/* Tracing fonts are registered by js/tracing-engine.js from the bytes it already
   downloaded, so the browser does not fetch each font a second time. */
body.site-page.tracing-page{--studio-accent:#176b9b;--studio-accent-hover:#125579;--studio-ink:#23364b;--studio-muted:#637484;--studio-line:#dce4eb;--studio-tint:#edf5fa;--studio-mat:#edf0f4;--studio-radius:14px;margin:0;background:#f5f7fa;color:var(--studio-ink);font-size:14px;line-height:1.5}
.tracing-page *{box-sizing:border-box}
.tracing-page .ui-icon{width:18px;height:18px;flex-shrink:0;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tracing-page .site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--studio-line)}
.tracing-page .site-header-inner{max-width:1264px;min-height:72px;margin:auto;display:flex;align-items:center;gap:24px;padding:12px 24px}
.tracing-page .site-brand{font:800 27px "ClassPlay Round",sans-serif;letter-spacing:-1px;color:var(--studio-ink);text-decoration:none}
.tracing-page .site-header nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.tracing-page .site-header nav a{color:var(--studio-muted);font-weight:700;font-size:14px;text-decoration:none;padding:12px 0;border-bottom:2px solid transparent}
.tracing-page .site-header nav a:hover,.tracing-page .site-header nav a[aria-current]{color:var(--studio-accent);border-bottom-color:var(--studio-accent);background:transparent;border-radius:0;box-shadow:none}
.tracing-page .cp-language-switch{margin-left:0}
.tracing-page .tracing-main{width:100%;max-width:1264px;margin:0 auto;padding:16px 24px 40px;background:transparent;box-shadow:none;min-height:0}
.studio-topline{display:flex;align-items:center;margin-bottom:6px}
.studio-back{display:inline-flex;align-items:center;gap:7px;min-height:26px;color:var(--studio-muted);font-size:13px;text-decoration:none}
.studio-back:hover{color:var(--studio-accent)}
.studio-heading{margin-bottom:18px}.studio-heading h1{font-size:28px;line-height:1.25;letter-spacing:-.65px;font-weight:800;margin:0 0 6px}.studio-heading p{font-size:14px;line-height:1.5;color:var(--studio-muted);margin:0}
.tracing-workspace{display:grid;grid-template-columns:clamp(380px,29vw,420px) minmax(0,1fr);gap:24px;align-items:start}
.tracing-controls,.tracing-preview{min-width:0;background:#fff;border:1px solid var(--studio-line);border-radius:var(--studio-radius);box-shadow:0 4px 18px #23364b06}
.tracing-controls{padding:24px}.tracing-controls fieldset{min-width:0;margin:0;padding:0;border:0}
.tracing-essentials{display:flex;flex-direction:column;gap:24px;min-width:0}.studio-section{min-width:0;padding:0 0 24px;margin:0;border:0;border-bottom:1px solid #e9eef3}.studio-section:last-child{padding-bottom:0;border-bottom:0}
.tracing-controls h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;line-height:1.4;margin:0 0 14px}.section-number{font-size:11px;font-weight:700;color:#8392a1;letter-spacing:.7px;font-variant-numeric:tabular-nums}
.tracing-controls label:not(.sr-only){display:block;font-size:12px;font-weight:700;line-height:1.4;margin:14px 0 7px}.tracing-controls .tracing-help{font-size:11px;line-height:1.6;color:var(--studio-muted);margin:7px 0 0}
.tracing-page select,.tracing-controls textarea,.tracing-controls input[type=text],.tracing-controls input[type=number]{font:inherit;min-width:0;border:1px solid #cbd6df;border-radius:7px;background:#fff;color:var(--studio-ink)}
.tracing-controls textarea,.tracing-controls select,.tracing-controls input[type=text],.tracing-controls input[type=number]{width:100%;min-height:38px;font-size:14px;padding:8px 10px}.tracing-controls textarea{display:block;min-height:104px;max-height:400px;resize:vertical;font-size:16px;line-height:1.6;background:#fcfdff}
.words-section #tracingTitle{margin-bottom:14px}
.tracing-page select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23637484' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:33px}
.tracing-controls input[type=checkbox]{width:19px;height:19px;accent-color:var(--studio-accent);flex-shrink:0;cursor:pointer}.tracing-controls input[type=range]{width:100%;min-height:30px;accent-color:var(--studio-accent)}
.tracing-controls [hidden],.tracing-preview [hidden]{display:none!important}.repeat-across{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.repeat-across label{margin:0!important}
.row-stepper{display:flex;align-items:center;flex-shrink:0;width:100px;height:36px;border:1px solid #cbd6df;border-radius:7px;background:#fff;overflow:hidden}.row-stepper button{display:grid;place-items:center;flex-shrink:0;width:31px;min-width:0;height:34px;border:0;background:transparent;padding:0;color:var(--studio-accent);cursor:pointer;font:inherit}.row-stepper button:hover:not(:disabled){background:var(--studio-tint)}.row-stepper button:disabled{opacity:.3;cursor:default}
.row-stepper input[type=number]{width:36px;min-height:34px;height:34px;border:0;border-radius:0;padding:0;text-align:center;background:transparent;font-size:14px;font-weight:700;appearance:textfield;-moz-appearance:textfield}.row-stepper input::-webkit-inner-spin-button,.picture-width-input input::-webkit-inner-spin-button{display:none}
.compact-style-row{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:14px}.compact-style-row label{margin-top:0!important}.writing-size-stepper{width:124px;height:38px}.writing-size-stepper button{width:31px;height:36px}.stepper-value{display:flex;align-items:center;justify-content:center;gap:2px;width:60px;font-weight:700}.stepper-value input[type=number]{width:29px;height:36px;min-height:36px}.stepper-value>span{color:var(--studio-muted);font-size:11px;font-weight:600;padding-right:3px}
.setting-label-with-help{display:flex;align-items:center;justify-content:space-between;margin-top:15px;margin-bottom:7px;position:relative}.setting-label-with-help label{margin:0!important}.guide-help{position:relative;z-index:6}.guide-help summary{display:grid;place-items:center;list-style:none;cursor:pointer;color:var(--studio-muted);min-width:24px;min-height:24px;border-radius:5px}.guide-help summary:hover{color:var(--studio-accent);background:var(--studio-tint)}.guide-help summary::-webkit-details-marker{display:none}.guide-help-content{position:absolute;right:0;top:34px;width:270px;max-width:calc(100vw - 80px);border:1px solid var(--studio-line);border-radius:10px;background:white;box-shadow:0 5px 24px #23364b18;padding:14px}
.guide-key{display:flex;align-items:flex-start;gap:10px;color:var(--studio-muted);font-size:12px;line-height:1.5}.guide-key p{margin:0}.guide-example{width:26px;height:15px;margin-top:2px;flex-shrink:0;border-top:1px solid #83b6d4;border-bottom:2px solid #ce7474;position:relative}.guide-example:after{content:"";position:absolute;inset:6px 0 auto;border-top:1px dashed #83b6d4}.is-mono .guide-example{filter:grayscale(1)}
.practice-rows{border:1px solid var(--studio-line);border-radius:9px;overflow:hidden;--practice-font:"CP Tracing Book"}.practice-row{display:flex;align-items:center;gap:9px;min-height:52px;padding:9px 10px;background:#fcfdff}.practice-row+.practice-row{border-top:1px solid #e7edf3}.practice-row label{flex:1;font-size:12px!important;font-weight:600!important;line-height:1.35!important;margin:0!important}.practice-row>input[type=checkbox]{margin:0}
.tracing-notes,.tracing-settings{margin-top:14px;border-top:1px solid #e9eef3}.tracing-controls summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;min-height:40px;padding:9px 0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;line-height:1.5;color:var(--studio-muted)}.tracing-controls summary::-webkit-details-marker,.tracing-files summary::-webkit-details-marker{display:none}.tracing-controls details[open]>summary{color:var(--studio-accent)}.tracing-controls details[open]>summary>.ui-icon{transform:rotate(180deg)}
.tracing-settings-body{padding:2px 0 0}.tracing-settings h3{font-size:12px;font-weight:800;line-height:1.5;color:var(--studio-muted);margin:20px 0 0}.tracing-option-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.tracing-checkbox{display:flex!important;align-items:center;gap:9px;font-weight:600!important}.tracing-range-label{display:flex!important;align-items:center;justify-content:space-between;gap:10px}.tracing-range-label output{color:var(--studio-muted);font-weight:400}.tracing-settings-save{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.tracing-settings-save .site-button{font-size:11px;min-height:36px;padding:8px 10px}.tracing-retry{font:inherit;font-size:12px;line-height:1.5;color:var(--studio-accent);border:0;background:transparent;padding:8px 0;text-decoration:underline;cursor:pointer}.tracing-notes textarea{min-height:88px;font-size:14px;margin-top:10px}.tracing-note-size{display:flex;align-items:center;justify-content:space-between;gap:12px}.tracing-note-size input{max-width:80px;margin-top:10px}.tracing-note-size label{margin:0!important}.tracing-privacy{font-size:10px;line-height:1.6;color:#788997;margin:20px 0 0}.tracing-error{font-size:12px;line-height:1.5;color:#a13e27;margin:10px 0 0}.tracing-controls [aria-invalid=true]{border-color:#b34429!important}#fileStatus:empty,#settingsStatus:empty{display:none}

/* Actions stay outside the independently scrolling page mat. */
.tracing-preview{position:sticky;top:calc(var(--site-header-height,72px) + 16px);height:auto;padding:18px;display:flex;flex-direction:column;scroll-margin-top:calc(var(--site-header-height,72px) + 16px)}
.tracing-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;margin:0 0 12px;flex-shrink:0}.worksheet-title{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}.worksheet-title h2{font-size:14px;font-weight:800;line-height:1.4;margin:0}.worksheet-title p{font-size:11px;line-height:1.5;color:var(--studio-muted);margin:0}.tracing-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.tracing-page .site-button,.tracing-picture-bar button,.tracing-picture-tools summary,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:1px solid #cbd6df;border-radius:7px;background:#fff;color:var(--studio-ink);padding:8px 10px;font:inherit;font-weight:700;font-size:12px;line-height:1.3;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:none}.tracing-page .site-button:hover:not(:disabled),.tracing-picture-bar button:hover:not(:disabled),.tracing-picture-tools summary:hover,.icon-button:hover{border-color:#9fb8c8;background:var(--studio-tint);color:var(--studio-accent)}
.tracing-page .tracing-actions .site-button.primary{background:var(--studio-accent);border-color:var(--studio-accent);color:#fff;box-shadow:none}.tracing-page .tracing-actions .site-button.primary:hover:not(:disabled){background:var(--studio-accent-hover);border-color:var(--studio-accent-hover)}.tracing-page button:disabled{opacity:.45;cursor:default}.worksheet-save-group{display:flex}.worksheet-save-group #saveTracingFile{border-radius:7px 0 0 7px}.worksheet-save-group .file-options-trigger{width:24px;min-width:24px;border-left:0;border-radius:0 7px 7px 0;padding:0}.file-options-trigger .ui-icon{width:18px}
/* Saving an editable copy is a quieter secondary action; PDF remains primary. */
.tracing-page .worksheet-save-group .site-button{border-color:transparent;background:transparent;color:var(--studio-muted);font-weight:500}
.tracing-page .worksheet-save-group .site-button:hover:not(:disabled){border-color:transparent;background:var(--studio-tint);color:var(--studio-accent)}
.worksheet-save-group #saveTracingFile .ui-icon{width:16px;height:16px}
.tracing-picture-bar{display:flex;align-items:center;gap:8px;min-height:36px;margin:0 0 14px;flex-shrink:0}.tracing-picture-bar button{font-size:12px;padding:7px 9px}.preview-scale{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12px;color:var(--studio-muted)}.preview-scale select{font:inherit;font-size:12px;min-height:36px;padding:7px 31px 7px 10px;color:var(--studio-ink);border-radius:7px}.preview-scale output{font-size:11px;font-variant-numeric:tabular-nums;min-width:4ch;color:var(--studio-muted)}.toolbar-separator{width:1px;height:22px;background:var(--studio-line);flex-shrink:0;margin:0 2px}
.tracing-picture-tools{position:relative;z-index:8;min-width:0}.tracing-picture-tools summary{list-style:none;padding:7px 9px}.tracing-picture-tools summary::-webkit-details-marker{display:none}.tracing-picture-tools[open] summary{background:var(--studio-tint);border-color:#9fb8c8;color:var(--studio-accent)}.picture-options{position:absolute;top:44px;right:0;width:220px;padding:14px;background:#fff;border:1px solid var(--studio-line);box-shadow:0 7px 24px #23364b18;border-radius:10px;display:flex;flex-direction:column;gap:12px}.picture-options label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:12px;color:var(--studio-muted)}.picture-options select{font-size:12px;width:90px;min-height:34px;padding:5px 32px 5px 8px}.picture-width-input{display:flex;align-items:center;gap:5px;width:90px;min-height:34px;border:1px solid #cbd6df;border-radius:6px;background:#fff;padding:0 8px}.picture-width-input input{font:inherit;font-size:13px;color:var(--studio-ink);width:44px;min-width:0;border:0;background:transparent;appearance:textfield;-moz-appearance:textfield;padding:5px 0}.picture-width-input>span{font-size:11px;color:var(--studio-muted)}.picture-options #removeTracingPicture{align-self:flex-start;min-height:32px;font-size:12px;padding:6px 10px}
.tracing-picture-status{position:fixed;z-index:80;left:50%;bottom:22px;max-width:min(560px,calc(100vw - 32px));width:max-content;margin:0;padding:12px 18px;border:1px solid #c1d8e7;border-radius:10px;background:#fff;color:var(--studio-ink);box-shadow:0 5px 24px #23364b24;font-size:13px;line-height:1.5;transform:translate(-50%,12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s}.tracing-picture-status[data-visible=true]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tracing-pages{flex:none;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px;background:var(--studio-mat);border:1px solid #e1e6ed;border-radius:9px}.tracing-sheet{display:block;flex:none;width:var(--preview-paper-width,100%);height:auto;max-width:none;margin:0 auto;background:white;box-shadow:0 2px 5px #23364b0d,0 10px 28px #23364b12}.tracing-sheet text{font-kerning:normal;font-variant-ligatures:none}.tracing-empty{margin:90px 24px;text-align:center;color:var(--studio-muted);font-size:14px;line-height:1.7;align-self:center}
.worksheet-picture{cursor:grab;touch-action:none;outline:none}.worksheet-picture:active{cursor:grabbing}.picture-selection{stroke:var(--studio-accent);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none;visibility:hidden}.picture-handle{fill:#fff;stroke:var(--studio-accent);stroke-width:1.5;vector-effect:non-scaling-stroke;visibility:hidden;cursor:nwse-resize}.picture-handle[data-picture-handle=ne],.picture-handle[data-picture-handle=sw]{cursor:nesw-resize}.worksheet-picture.is-selected .picture-selection,.worksheet-picture.is-selected .picture-handle,.worksheet-picture:focus-visible .picture-selection{visibility:visible}

.background-current{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:10px 12px;background:#fff;border:1px solid #cbd6df;border-radius:8px;text-align:left;cursor:pointer;color:var(--studio-ink);font:inherit}.background-current:hover{background:var(--studio-tint);border-color:#9fb8c8}.background-current>span:nth-child(2){flex:1;min-width:0}.background-current strong{display:block;font-family:inherit;font-weight:800;font-size:14px;line-height:1.4}.background-change{display:block;font-size:11px;color:var(--studio-muted);margin-top:3px}#currentBackgroundSwatch{display:block;width:31px;height:44px;flex-shrink:0;border:1px solid #d9e1e8;overflow:hidden;box-shadow:0 1px 4px #23364b08}#currentBackgroundSwatch svg{width:100%;height:100%;display:block}
.background-dialog,.worksheet-file-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border:1px solid var(--studio-line);border-radius:16px;padding:24px;background:#fff;color:var(--studio-ink);box-shadow:0 16px 60px #23364b30;overflow:auto}.background-dialog::backdrop,.worksheet-file-dialog::backdrop{background:#24394b60}.background-dialog-heading,.file-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.background-dialog-heading{position:sticky;top:-24px;background:white;padding-block:6px;z-index:2}.background-dialog-heading h2,.file-dialog-heading h2{font-size:22px;line-height:1.3;margin:0;font-weight:800}.background-dialog-heading button{display:grid;place-items:center;width:36px;height:36px;padding:8px;background:#fff;border:1px solid var(--studio-line);border-radius:7px;color:var(--studio-muted);cursor:pointer}.background-dialog-intro{font-size:13px;color:var(--studio-muted);line-height:1.6;margin:14px 0 18px}.background-dialog h3{font-size:12px;font-weight:800;line-height:1.5;color:var(--studio-muted);margin:24px 0 10px}
.background-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.background-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:8px 6px;border:1px solid var(--studio-line);border-radius:8px;background:#fff;color:var(--studio-ink);cursor:pointer;font:inherit}.background-choice:hover{border-color:#9fb8c8;background:var(--studio-tint)}.background-choice[aria-pressed=true]{border-color:var(--studio-accent);box-shadow:0 0 0 1px var(--studio-accent);background:var(--studio-tint)}.background-choice[aria-pressed=true]:after{content:'✓';position:absolute;right:5px;top:5px;background:var(--studio-accent);color:#fff;font-size:10px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%}.background-choice>span{font-size:11px;line-height:1.4;min-height:16px;text-align:center}.background-choice>svg{display:block;width:100%;height:72px;border-radius:3px;background:#fff;border:0;box-shadow:none}#themeBackgrounds .background-choice>svg{height:158px;box-shadow:0 1px 4px #23364b12}#plainBackgrounds .background-choice>svg{height:38px}
.worksheet-file-dialog{width:min(480px,calc(100vw - 32px))}.tracing-files{margin-top:16px}.tracing-files>summary{display:none}.tracing-files .tracing-help{font-size:13px;color:var(--studio-muted);line-height:1.6;margin:0 0 16px}.tracing-file-actions{display:flex;gap:10px;flex-wrap:wrap}.tracing-files #fileStatus{font-size:12px;line-height:1.5;margin-top:14px}
.tracing-page :is(button,a,input,textarea,select,summary):focus-visible,.tracing-page #tracingPages:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}.tracing-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tracing-page .skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 18px;background:white;border-radius:8px}.tracing-page .skip-link:focus{top:12px}.tracing-page .skip-link:not(:focus){clip-path:inset(50%)}
/* The title belongs to the editing rail; the worksheet uses the otherwise empty
   space beside it. Matching the bottom and sticky gaps prevents the grid boundary
   from pushing the worksheet upward when the controls reach the end of the page. */
@media (min-width:900px){.tracing-page .tracing-main{display:grid;grid-template-columns:clamp(380px,29vw,420px) minmax(0,1fr);column-gap:24px;align-items:start;padding-bottom:16px}.studio-topline{grid-column:1;grid-row:1}.studio-heading{grid-column:1;grid-row:2}.tracing-workspace{display:contents}.tracing-controls{grid-column:1;grid-row:3}.tracing-preview{grid-column:2;grid-row:1 / span 3}}
@media (min-width:900px) and (max-width:1100px){.tracing-actions .action-label,.tracing-picture-bar .toolbar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tracing-actions .site-button{width:36px;padding:8px}.worksheet-save-group .file-options-trigger{width:24px;padding:0}}
/* In a very short window the complete panel cannot fit below the header; let it
   scroll normally so its page controls remain reachable. */
@media screen and (min-width:900px) and (max-height:539px){.tracing-preview{position:relative;top:auto}}
@media (max-width:899px){.tracing-page .tracing-main{padding-inline:20px}.tracing-workspace{grid-template-columns:minmax(0,1fr);gap:24px}.tracing-preview{position:relative;top:auto;height:auto}.tracing-controls{padding:24px}}
@media (max-width:620px){.tracing-page .site-header-inner{padding:12px 16px;gap:12px;flex-wrap:wrap;min-height:0}.tracing-page .site-header nav{order:3;width:100%;margin:0;gap:22px}.tracing-page .site-header nav a{font-size:12px;padding:7px 0}.tracing-page .cp-language-switch{margin-left:auto}.tracing-page .tracing-main{padding:16px 12px 32px}.studio-heading{margin-bottom:20px}.studio-heading h1{font-size:26px}.studio-heading p{font-size:13px;max-width:32em}.tracing-controls{padding:20px}.tracing-preview{padding:12px;height:auto}.tracing-preview-heading{gap:8px;min-height:42px}.worksheet-title{display:block;flex:1}.worksheet-title h2{font-size:13px}.worksheet-title p{font-size:10px;margin-top:3px}.heading-divider{display:none}.tracing-actions{gap:6px}.tracing-actions .action-label,.tracing-picture-bar .toolbar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tracing-actions .site-button{width:34px;min-height:36px;padding:7px}.worksheet-save-group .file-options-trigger{width:24px;padding:0}.tracing-picture-bar{gap:7px}.tracing-picture-bar button,.tracing-picture-tools summary{min-height:36px;padding:7px}.tracing-picture-tools summary>.ui-icon:last-child{display:none}.preview-scale{gap:5px}.preview-scale select{font-size:12px;padding-left:7px;padding-right:28px;max-width:145px}.preview-scale output{display:none}.toolbar-separator{margin:0}.tracing-pages{padding:14px;gap:18px}.picture-options{right:0;width:210px}.background-dialog,.worksheet-file-dialog{padding:18px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.background-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#themeBackgrounds .background-choice>svg{height:120px}#plainBackgrounds .background-choice>svg{height:32px}.background-dialog-heading{top:-18px}.background-dialog-heading h2,.file-dialog-heading h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){.tracing-picture-status{transition:none}}
@media print{html,body.tracing-page{margin:0!important;padding:0!important;background:#fff!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.tracing-page .site-header,.tracing-page .skip-link,.studio-topline,.studio-heading,.tracing-controls,.tracing-preview-heading,.tracing-picture-bar,.tracing-picture-status,.guide-key,.picture-selection,.picture-handle,.tracing-page noscript,.background-dialog,.worksheet-file-dialog{display:none!important}.tracing-page .tracing-main,.tracing-workspace,.tracing-preview,.tracing-pages{position:static!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;max-width:none!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}.tracing-sheet{box-shadow:none!important;break-after:page;page-break-after:always;max-width:none!important;margin:0!important}.tracing-sheet:last-child{break-after:auto;page-break-after:auto}.tracing-empty{display:none!important}}

.tracing-controls .guide-help summary{display:grid;place-items:center;min-height:24px;min-width:24px;padding:0}.tracing-controls .guide-help[open]>summary>.ui-icon{transform:none}
@media(max-width:620px){.tracing-picture-bar{position:relative}.tracing-picture-tools{position:static}.picture-options{right:0;max-width:100%}}
/* An optional uncluttered reading view, with the same page selection as the editor. */
.tracing-picture-bar .expand-preview{margin-left:auto}
.tracing-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-shrink:0}
.paste-reminder{font-size:11px;line-height:1.5;color:var(--studio-muted);margin:0;min-width:0}
.worksheet-page-nav{display:flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0}
.worksheet-page-nav[hidden]{display:none!important}
.worksheet-page-nav output{min-width:48px;text-align:center;font-size:12px;color:var(--studio-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.worksheet-page-nav .icon-button{padding:7px;min-width:34px}
.expanded-preview-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f5f7fa;color:var(--studio-ink);overflow:hidden}
.expanded-preview-dialog[open]{display:flex;flex-direction:column}
.expanded-preview-dialog::backdrop{background:#f5f7fa}
.expanded-preview-header{display:flex;align-items:center;gap:18px;flex-shrink:0;padding:16px 24px;background:#fff;border-bottom:1px solid var(--studio-line)}
.expanded-preview-header h2{margin:0;flex:1;min-width:0;font-size:20px;line-height:1.3}
.expanded-preview-header .icon-button{width:36px;padding:7px}
.expanded-preview-pages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:24px;display:flex;align-items:flex-start}
.expanded-preview-pages .tracing-sheet{margin:0 auto}
.expanded-preview-footer{flex-shrink:0;padding:12px 24px;background:#fff;border-top:1px solid var(--studio-line)}
.expanded-preview-footer:has(.worksheet-page-nav[hidden]){display:none}
.tracing-page #expandedTracingPages:focus-visible{outline:2px solid var(--studio-accent);outline-offset:-3px}
@media screen{#tracingPages>.tracing-sheet[data-page-active=false]{display:none}}
@media(max-width:620px){.tracing-picture-bar{gap:4px}.tracing-preview-footer{flex-direction:column;align-items:stretch;gap:10px}.paste-reminder{font-size:11px}.worksheet-page-nav{align-self:center}.expanded-preview-header{padding:12px;gap:10px}.expanded-preview-header h2{font-size:16px}.expanded-preview-pages{padding:12px}.expanded-preview-footer{padding:10px 12px}}
@media print{.tracing-preview-footer,.expanded-preview-dialog{display:none!important}#tracingPages>.tracing-sheet{display:block!important}}

/* Copies across now sits with the page options. */
.background-section .repeat-across{margin:0 0 4px}.background-section #repeatHelp{margin:0 0 14px}
/* Phones and tablets: the worksheet sits below the settings, so a bar keeps it one tap away. */
.tracing-jump-bar{display:none}
@media (max-width:899px){
 .tracing-jump-bar:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;padding:8px 8px 8px 16px;background:#fff;border:1px solid var(--studio-line);border-radius:14px;box-shadow:0 10px 30px #1d2f4224}
 .tracing-jump-bar .jump-status{font-size:12px;color:var(--studio-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tracing-jump-bar .site-button{flex-shrink:0;min-height:40px;display:inline-flex;align-items:center;gap:8px}
 .tracing-page .tracing-main{padding-bottom:88px}
}
@media print{.tracing-jump-bar{display:none!important}}
.tracing-checkbox.is-disabled{opacity:.5}
.age-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 2px}
.words-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.words-footer .tracing-help{flex:1;min-width:0;margin:0}
.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:0 0 14px}.section-heading-row h2{margin:0}
/* Reset keeps its place while hidden, so showing it never moves the panel. */
.reset-words{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;font-weight:700;line-height:1;color:#8a4500;background:#fff3df;border:1px solid #f2b35b;border-radius:999px;min-height:32px;padding:5px 12px 5px 10px;cursor:pointer;box-shadow:0 1px 2px #8a450014;transition:background .15s,border-color .15s,opacity .2s}
.reset-words .ui-icon{width:15px;height:15px;stroke-width:2.2}.reset-words:hover{background:#ffe6bf;border-color:#e0952e}.reset-words:focus-visible{outline-color:#c46a00}
.tracing-controls .section-heading-row .reset-words[hidden]{display:inline-flex!important;visibility:hidden;opacity:0}
.quick-start{position:relative;flex:none;z-index:7}
.quick-start summary{display:flex;align-items:center;gap:4px;list-style:none;cursor:pointer;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.3;min-height:32px;padding:6px 10px 6px 12px;border:1px solid #cbd6df;border-radius:999px;background:#fff;color:var(--studio-ink)}
.quick-start summary::-webkit-details-marker{display:none}.quick-start summary:hover,.quick-start[open] summary{border-color:var(--studio-accent);background:#f3f8fb}
.quick-start summary .ui-icon{width:15px;height:15px;transition:transform .15s}.quick-start[open] summary .ui-icon{transform:rotate(180deg)}
.quick-start-menu{position:absolute;right:0;top:calc(100% + 6px);width:220px;max-width:calc(100vw - 48px);display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid var(--studio-line);border-radius:10px;box-shadow:0 7px 24px #23364b1f}
.quick-start-menu button{font:inherit;font-size:13px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;min-height:36px;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--studio-ink);text-align:left;cursor:pointer}
.quick-start-menu button:hover,.quick-start-menu button:focus-visible{background:#f3f8fb}.quick-start-menu small{font-size:11px;color:var(--studio-muted);white-space:nowrap}
.quick-start-heading{font-size:11px;font-weight:700;color:var(--studio-muted);margin:6px 10px 2px;padding-top:8px;border-top:1px solid #e9eef3}
.words-footer{min-height:36px}
/* The set changer replaces the help text in the same row, so it appears without moving anything. */
.set-nav{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.set-nav>span{font-size:12px;font-weight:600;color:var(--studio-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.set-previous,.set-next{font:inherit;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:3px;min-height:32px;border-radius:999px;cursor:pointer;flex:none}
.set-previous{width:32px;padding:0;border:1px solid #cbd6df;background:#fff;color:var(--studio-ink)}
.set-next{padding:5px 8px 5px 12px;border:1px solid var(--studio-accent);background:var(--studio-accent);color:#fff;white-space:nowrap}
.set-previous:hover{border-color:var(--studio-accent);background:#f3f8fb}.set-next:hover{filter:brightness(1.1)}
.set-previous:disabled,.set-next:disabled{opacity:.45;cursor:default}
.set-previous .ui-icon,.set-next .ui-icon{width:15px;height:15px}
@media (max-width:370px){.set-next{width:32px;padding:0}.set-next span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.tracing-controls #tracingText{tab-size:4;height:calc(9.6em + 18px)}
.chip-label{font-size:11px;font-weight:700;color:var(--studio-muted);margin-right:2px}
.tracing-controls .chip{font:inherit;font-size:12px;font-weight:600;line-height:1.3;min-height:32px;padding:6px 12px;border:1px solid #cbd6df;border-radius:999px;background:#fff;color:var(--studio-ink);cursor:pointer;transition:background .15s,border-color .15s}
.tracing-controls .chip:hover{border-color:var(--studio-accent);background:#f3f8fb}
.tracing-controls .chip:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
.tracing-controls .chip[aria-pressed=true]{background:var(--studio-accent);border-color:var(--studio-accent);color:#fff}

.age-presets{margin:12px 0 4px}
@media (prefers-reduced-motion:reduce){.tracing-controls .chip{transition:none}}
/* Dotted tracing: small previews show a scaled-up copy of the dot pattern; print shows the real one. */
.tracing-sheet .screen-dots{display:none}
@media screen{.tracing-sheet .dots-scaled>.screen-dots{display:inline}.tracing-sheet .dots-scaled>.print-dots{display:none}}