.coloring-page{background:#fffaf0}.color-studio{max-width:1400px;margin:auto;padding:26px 5% 40px}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.studio-heading h1{font-size:clamp(32px,3.6vw,48px);letter-spacing:-1.2px;line-height:1.12;margin:9px 0}.studio-heading p{font-size:15px;margin:0}.studio-back{display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.studio-doodle{font-size:86px;line-height:1;color:#c9384b;transform:rotate(14deg);padding-right:14px}.studio-layout{display:grid;grid-template-columns:242px minmax(0,1fr);gap:24px;align-items:start}.studio-layout[hidden]{display:none}.studio-tools{background:#f0e7f7;border:1px solid #daccdf;border-radius:20px;padding:20px}.studio-tools fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}.studio-tools legend{font-size:13px;font-weight:700;padding:0 0 12px}.scene-options{display:grid;gap:8px}.scene-options button{display:flex;align-items:center;gap:10px;text-align:left;background:#fffdf9;border:1px solid #c9b8d5;border-radius:12px;min-height:48px;padding:10px 12px;color:var(--ink);font-size:13px}.scene-options button>span{font-size:23px;line-height:1}.scene-options button[aria-pressed=true]{background:var(--purple);color:white;border-color:var(--purple)}.color-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.color-swatch{min-height:44px;aspect-ratio:1;border:2px solid #fff;border-radius:50%;position:relative;box-shadow:0 0 0 1px #35234e33;display:grid;place-items:center;padding:0;font-size:19px;font-weight:700}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}.color-swatch:hover{transform:scale(1.07)}.color-swatch:focus-visible{outline:3px solid #bc5336;outline-offset:5px}.selected-color{font-size:12px;line-height:1.5;margin:12px 0 8px;color:var(--ink)}.custom-color{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.custom-color input{width:56px;height:44px;border:1px solid #c2b0d0;border-radius:8px;background:#fffdf9;padding:4px;cursor:pointer}.studio-history{display:grid;grid-template-columns:1fr 1fr;gap:8px}.studio-history button{min-height:44px;font-size:12px;background:#fffdf9;border:1px solid #c9b8d5;color:var(--ink);border-radius:9px;padding:8px}.studio-history button span{font-size:20px;vertical-align:middle;margin-right:3px}.studio-history #clear{grid-column:1/-1;background:transparent}.studio-history button:disabled{opacity:.45;cursor:default}.creative-idea{border-top:1px solid #cfbedf;margin-top:20px;padding-top:18px}.creative-idea strong{font-size:12px}.creative-idea p{font-size:12px;line-height:1.65;margin:6px 0 5px;color:var(--ink)}.creative-idea button{padding:10px 0;border:0;background:none;color:var(--purple);font-size:12px;font-weight:700;min-height:44px;text-decoration:underline;text-underline-offset:4px}.art-workspace{min-width:0}.canvas-topline{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:0 4px 10px;font-size:12px}.canvas-topline span:first-child{font-weight:700}.canvas-topline span:last-child{font-size:11px;color:var(--muted)}.art-sheet{background:white;border:1px solid #ddd2e6;border-radius:20px;overflow:hidden;box-shadow:0 7px 0 #eee4f4}.art-sheet svg{display:block;width:100%;height:auto;max-height:660px}.paint-region{cursor:crosshair;transition:fill .12s}.paint-region:hover{stroke:#57358c;stroke-width:5}.paint-region:focus{outline:none;stroke:#c9384b;stroke-width:6;stroke-dasharray:9 5}.art-line{pointer-events:none}.keyboard-tip{font-size:11px;line-height:1.5;margin:16px 4px;color:var(--muted)}.finish-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line)}.finish-bar strong{display:block;font-size:14px}.finish-bar>div>span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.finish-actions{display:flex;gap:8px}.finish-actions .button{padding:12px 16px;gap:8px;min-height:46px;font-size:12px}.studio-status{font-size:12px;line-height:1.6;margin:0 0 10px;color:var(--ink);min-height:20px}.autosave-status{font-size:11px;line-height:1.6;margin:0 0 8px;color:var(--ink)}.studio-privacy{font-size:11px;line-height:1.6;margin:0;color:var(--muted)}.studio-alert{padding:20px;background:#f8e9a7;border-radius:12px}.studio-alert a{text-decoration:underline}.coloring-page dialog{border:1px solid #d4c5e0;border-radius:22px;background:#fffaf0;color:var(--ink);padding:28px;max-width:490px;width:calc(100% - 32px);box-shadow:0 12px 60px #35234e33}.coloring-page dialog::backdrop{background:#24173399}.coloring-page dialog h2{font-size:30px;margin:0 0 16px}.coloring-page dialog p{font-size:14px;margin:0 0 20px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}.dialog-actions button{font-size:12px;padding:13px 17px}
@media(max-width:980px){.studio-layout{grid-template-columns:210px minmax(0,1fr);gap:18px}.studio-tools{padding:15px}.color-palette{gap:7px}.color-palette{grid-template-columns:repeat(3,minmax(44px,1fr))}.color-swatch{min-height:44px}.finish-bar{align-items:flex-start;flex-direction:column}.finish-actions{width:100%}.finish-actions .button{flex:1}.canvas-topline span:last-child{display:none}}
@media(max-width:700px){.color-studio{padding:18px 5% 30px}.studio-heading{margin-bottom:18px}.studio-heading h1{font-size:34px;max-width:350px}.studio-heading p{font-size:13px;max-width:300px}.studio-doodle{font-size:50px;align-self:center;padding:0}.studio-layout{display:flex;flex-direction:column;gap:18px}.studio-tools{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}.studio-tools fieldset{margin:0}.studio-tools legend{font-size:12px;padding-bottom:9px}.scene-options button{font-size:12px;min-height:44px;padding:9px}.scene-options button>span{font-size:20px}.palette-field{grid-column:1/-1;grid-row:2}.color-palette{grid-template-columns:repeat(auto-fit,44px);gap:6px;justify-content:space-between}.color-swatch{width:44px;height:44px;min-height:44px;aspect-ratio:1}.selected-color{display:inline-block;margin:10px 0 0}.custom-color{float:right;margin-top:8px;font-size:11px}.custom-color input{height:44px;width:48px}.studio-history{gap:6px;align-content:start;padding-top:0}.studio-history button{font-size:11px;padding:6px}.studio-history button span{font-size:18px}.creative-idea{display:none}.art-workspace{width:100%}.canvas-topline{padding-bottom:8px}.art-sheet{border-radius:14px}.art-sheet svg{max-height:none}.keyboard-tip{margin:13px 2px;font-size:10px}.finish-bar{gap:10px;padding:14px 0}.finish-actions .button{padding:12px 10px;font-size:12px}.studio-privacy{font-size:10px}.studio-status{font-size:12px}.coloring-page header>.button{display:none}}
@media(max-width:400px){.studio-heading h1{font-size:30px}.studio-doodle{display:none}.studio-tools{padding:14px}.color-swatch{min-height:44px}.custom-color{float:none;justify-content:flex-start;margin-top:8px}.studio-tools legend{font-size:11px}}
@media print{@page{size:portrait;margin:12mm}html,body.coloring-page{background:#fff!important;margin:0!important;padding:0!important}.coloring-page>header,.coloring-page>footer,.skip,.studio-heading,.studio-tools,.canvas-topline,.keyboard-tip,.finish-bar,.studio-status,.autosave-status,.studio-privacy,#save-svg,dialog,noscript{display:none!important}.color-studio,.studio-layout,.art-workspace{display:block!important;padding:0!important;margin:0!important;max-width:none!important;width:100%!important}.art-sheet{border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;break-inside:avoid;page-break-inside:avoid}.art-sheet svg{width:100%!important;height:auto!important;max-height:245mm!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.paint-region{stroke:#35234e!important;stroke-width:3!important;stroke-dasharray:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.paint-region,.color-swatch{transition:none!important}.color-swatch:hover{transform:none}}
/* Print/save is a desktop sidebar card; on phones it follows the artwork in DOM order. */
.studio-layout{grid-template-areas:"tools art" "finish art";grid-template-rows:auto 1fr}.studio-tools{grid-area:tools}.art-workspace{grid-area:art}.finish-bar{grid-area:finish;display:block;align-self:start;margin:0;padding:18px;border:1px solid #daccdf;border-radius:18px;background:#fffdf9}.finish-bar>div>span{font-size:11px;line-height:1.6;margin-top:7px}.finish-actions{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0}.finish-actions .button{width:100%;justify-content:center;min-height:46px;padding:11px 12px}.finish-bar .studio-status{font-size:11px;margin:0}.finish-bar .textbutton{font-size:11px;line-height:1.5;width:100%;min-height:44px;padding:8px 0;text-align:left}#print-sheet{display:none}
@media(max-width:700px){.finish-bar{width:100%;padding:16px}.finish-actions{grid-template-columns:1fr 1fr}.finish-actions #save-picture{grid-column:1/-1}.finish-bar .studio-status{font-size:12px}}
@media print{body[data-coloring-print] .color-studio{display:none!important}body[data-coloring-print] #print-sheet{display:block!important;width:100%!important;margin:0!important;padding:0!important;break-inside:avoid;page-break-inside:avoid}#print-sheet svg{display:block;width:100%!important;height:auto!important;max-height:245mm!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Match the shared site content measure. */
.color-studio{width:min(calc(100% - var(--page-gutter)*2),var(--content-width));max-width:var(--content-width);padding-inline:0}