:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#133f6b;background:#d7f5f5;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,#fff9d9 0 8%,transparent 28%),linear-gradient(135deg,#c1f6ee,#a8d6f4 60%,#d8c9fa)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #fd9800;outline-offset:3px}#app{height:100dvh;min-height:560px;display:flex;flex-direction:column;padding:clamp(10px,1.5vw,24px);gap:14px}.home{justify-content:center;align-items:center}.home h1{font-size:clamp(2.3rem,4vw,4.3rem);margin:0 0 12px;text-align:center;color:#174777;text-shadow:0 3px #fff}.card-row{width:min(1450px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,30px)}.card{padding:12px;border:4px solid #fff;border-radius:26px;background:#fffdf7;box-shadow:0 12px 25px #20466530;color:#173d68;transition:transform .15s,box-shadow .15s;text-align:center;font-size:clamp(1.2rem,2vw,2rem);font-weight:800}.card:hover{transform:translateY(-5px);box-shadow:0 16px 28px #20466545}.card svg{display:block;width:100%;height:min(57vh,520px);background:white;border-radius:15px}.card span{display:block;padding:9px 2px}.editor{background:#ffffffb8;border:2px solid #fff;border-radius:24px;box-shadow:0 12px 30px #1d568638}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.title{font-size:clamp(1.2rem,2vw,2rem);font-weight:850;flex:1;min-width:140px;text-align:center}.tool{min-height:56px;border:2px solid #b6d6e8;border-radius:15px;background:#fff;padding:8px 17px;color:#124270;font-weight:750;font-size:clamp(1rem,1.3vw,1.3rem)}.tool:hover,.tool.active{background:#fff0a5;border-color:#f3bd42}.tool:disabled{opacity:.43;cursor:default}.danger{color:#a53f65}.workspace{flex:1;min-height:0;display:flex;gap:14px}.art-frame{flex:1;min-width:0;min-height:0;border:5px solid #fff;border-radius:18px;background:white;box-shadow:inset 0 0 0 2px #b9d8e6;display:flex;justify-content:center;align-items:center;overflow:hidden}.art-frame svg{height:100%;width:100%;display:block}.region{stroke:#203a59;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;cursor:pointer;transition:filter .12s}.region:hover{filter:drop-shadow(0 0 4px #ffc335)}.outline{fill:none;stroke:#203a59;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.fine{stroke-width:2.3}.ink{fill:#203a59;pointer-events:none}.palette{width:clamp(230px,20vw,350px);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;border:4px solid #fff;border-radius:18px;background:#ecfcff}.palette h2{font-size:1.35rem;margin:0;text-align:center}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{aspect-ratio:1;min-width:0;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 5px #15426666}.swatch:hover,.swatch.selected{outline:4px solid #244c76;outline-offset:1px;transform:scale(1.05)}.hint{text-align:center;font-size:1.05rem;font-weight:700;line-height:1.35;margin:0;color:#3b6a81}.modal-backdrop{position:fixed;inset:0;background:#102b50a8;display:grid;place-items:center;padding:20px}.dialog{background:white;border-radius:24px;padding:30px;text-align:center;max-width:430px;box-shadow:0 20px 60px #102b5066}.dialog h2{margin:0 0 12px;font-size:1.7rem}.dialog p{font-size:1.2rem}.dialog-actions{display:flex;justify-content:center;gap:15px}.dialog-actions .tool{min-width:120px}@media(max-width:900px){#app{min-height:0}.workspace{flex-direction:column}.palette{width:100%;padding:10px;gap:5px}.colors{grid-template-columns:repeat(16,1fr);gap:5px}.palette h2,.hint{display:none}.swatch{border-width:2px}.tool{min-height:46px;padding:5px 11px}.card svg{height:47vh}}@media(max-width:650px){#app{height:auto;min-height:100dvh}.card-row{grid-template-columns:1fr}.card svg{height:38vh}.workspace{flex-direction:column}.art-frame{height:min(68vh,700px);flex:none}.colors{grid-template-columns:repeat(8,1fr)}}
@media(min-width:2600px){#app{padding:28px;gap:22px}.toolbar{gap:16px}.tool{min-height:88px;padding:12px 25px;font-size:1.7rem;border-radius:22px}.title{font-size:2.6rem}.workspace{gap:22px}.palette{width:520px;padding:25px;gap:25px}.palette h2{font-size:2rem}.hint{font-size:1.5rem}.colors{gap:18px}.art-frame{border-width:7px}}
.region.background{stroke:none}

.region:not([fill]){fill:#fff}
.art-frame .region.hover-zone{fill:url(#region-hover);filter:none}
.reference{padding:8px;background:#fff;border:2px solid #b6d6e8;border-radius:14px;margin-bottom:6px}
.reference h2{font-size:1rem;margin:0 0 5px}
.reference svg{display:block;width:100%;max-height:27vh;pointer-events:none;border-radius:8px}
.reference .region{cursor:default}
.palette{justify-content:center;gap:10px}
@media(max-width:900px){.reference{display:none}}
@media(min-width:2600px){.reference h2{font-size:1.5rem}.reference svg{max-height:30vh}}
@media(max-width:900px){.reference{display:block;padding:4px;margin:0}.reference h2{display:block;font-size:.9rem}.reference svg{max-height:120px}.palette{gap:8px}}

:root{--text:#133f6b;--panel:#ecfcff;--button-bg:#fff;--button-border:#b6d6e8;--button-text:#124270;--page-bg:linear-gradient(135deg,#c1f6ee,#a8d6f4 60%,#d8c9fa);--editor-bg:#ffffffb8;--hint:#3b6a81;--heading:#174777;--heading-shadow:#fff}
:root[data-theme="dark"]{--text:#edf4ff;--panel:#183453e8;--button-bg:#173653;--button-border:#6285ae;--button-text:#edf4ff;--page-bg:radial-gradient(ellipse at 7% 91%,#18b8b580 0,transparent 43%),radial-gradient(ellipse at 100% 93%,#7652d599 0,transparent 48%),radial-gradient(ellipse at 0% 25%,#078f9d80 0,transparent 38%),radial-gradient(ellipse at 100% 18%,#613fa066 0,transparent 38%),linear-gradient(135deg,#07334c,#102345 58%,#202953);--editor-bg:#102942d9;--hint:#bbd5e5;--heading:#edf4ff;--heading-shadow:#11233d}
body{background:var(--page-bg);color:var(--text)}
.bar{height:76px;padding:10px 24px;display:flex;align-items:center;gap:12px;background:var(--panel);color:var(--text);border-bottom:2px solid var(--button-border);position:relative;z-index:5}
.bar a{font-size:1.2rem;color:inherit;text-decoration:none;font-weight:800}.bar-spacer{flex:1}.bar button{min-width:64px}
#app{height:calc(100dvh - 76px)}.home h1{color:var(--heading);text-shadow:0 3px var(--heading-shadow)}
.editor{background:var(--editor-bg);border-color:var(--button-border)}.tool{background:var(--button-bg);border-color:var(--button-border);color:var(--button-text)}
.tool:hover,.tool.active{color:#124270}.palette{background:var(--panel);border-color:var(--button-border)}.hint{color:var(--hint)}.dialog{background:var(--panel);color:var(--text)}.modal-backdrop{z-index:2147483647}
.card{background:var(--panel);border-color:var(--button-border);color:var(--text)}.reference h2{color:#133f6b}.reference{border-color:var(--button-border)}
.embedded .bar{display:none}.embedded #app{height:100dvh}

@media(max-width:650px){#app{height:auto;min-height:calc(100dvh - 76px)}.bar{padding:10px 12px}.bar a{font-size:1rem}}
@media(min-width:2600px){.bar{height:112px;padding:12px 28px}.bar a{font-size:1.8rem}.bar button{min-width:96px}#app{height:calc(100dvh - 112px)}.embedded #app{height:100dvh}}

/* Static aurora: CSS-only, shared by the gallery and editor, no animation cost. */
:root[data-theme="dark"]{background:#102345}
:root[data-theme="dark"] body{background-attachment:fixed}
:root[data-theme="dark"] .bar{background:linear-gradient(110deg,#103650f5,#19274ef5);border-color:#41668e}
:root[data-theme="dark"] .card{border-color:#647bb4;box-shadow:0 12px 28px #03172c66,inset 0 0 30px #638ad00d}
:root[data-theme="dark"] .card:hover{border-color:#b0c9ff;box-shadow:0 16px 30px #03172c80,0 0 22px #56c6d02b}
:root[data-theme="dark"] .theme-card.fairytales{background:linear-gradient(145deg,#173e5fe8,#333365ed);border-color:#9a79d4}
:root[data-theme="dark"] .theme-card.vehicles{background:linear-gradient(145deg,#104256e8,#17466ced);border-color:#4fbdce}
:root[data-theme="dark"] .theme-card.space{background:linear-gradient(145deg,#263763e8,#403574ed);border-color:#927be0}
:root[data-theme="dark"] .theme-card .picture-count{background:#102a4773;border-color:inherit}

/* The sheet is transformed outside SVG, so PNG always exports the full drawing. */
.drawing{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}
.zoom-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zoom-controls .tool{min-width:56px;min-height:56px}
#zoomLevel{min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}
.zoom-hint{font-size:.9rem;color:var(--hint);flex:1;min-width:180px}
.art-frame{position:relative;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.art-sheet{position:absolute;inset:0;transform-origin:center;will-change:transform}
.art-frame.zoomed .region,.art-frame.zoomed{cursor:grab}
.art-frame.zoomed:active,.art-frame.zoomed:active .region{cursor:grabbing}
@media(max-width:900px){.drawing{flex:1;min-height:280px}.zoom-hint{display:none}}
@media(max-width:650px){.drawing{flex:none}.art-frame{height:min(68vh,700px)}}

.coloring-settings{position:fixed;z-index:2147483647;max-width:calc(100vw - 16px);padding:12px;border:2px solid var(--button-border);border-radius:14px;background:var(--button-bg);color:var(--text);box-shadow:0 12px 30px #0004}
.coloring-settings[hidden]{display:none}.smooth-setting{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-weight:650}.smooth-setting input{width:24px;height:24px;accent-color:#4361ee}
.art-frame .region.fill-animating{filter:none}

/* Keep larger scene palettes reachable without shrinking the drawing. */
@media(min-width:901px){.editor .palette{justify-content:flex-start;overflow-y:auto;min-height:0}.editor .palette>*{flex-shrink:0}}

.color-groups{display:flex;flex-direction:column;gap:8px}.color-group{display:flex;flex-direction:column;gap:6px}.color-group h3{font-size:.9rem;font-weight:700;color:var(--hint);text-align:center;margin:0}.color-divider{width:100%;margin:2px 0;border:0;border-top:1px solid var(--button-border)}

/* Number rings show completed paint targets without changing palette order. */
.number-swatch{position:relative;background:conic-gradient(#299876 var(--progress),#c8d5df 0)!important;border:0;padding:6px;display:grid;place-items:center;isolation:isolate;min-width:38px;min-height:38px}
.number-swatch::before{content:"";position:absolute;inset:6px;border-radius:50%;background:inherit;background:var(--swatch-color);z-index:0}
.swatch-number{position:relative;z-index:1;color:#152e43;background:#fffffff0;border-radius:50%;min-width:1.6em;line-height:1.6;font-size:clamp(12px,1.1vw,16px);font-weight:800;text-align:center}
.swatch-number:empty,.swatch-check:empty{display:none}
.swatch-check{position:absolute;z-index:2;right:-3px;top:-4px;background:#20765d;border:2px solid #fff;border-radius:50%;color:#fff;font-size:12px;line-height:16px;min-width:20px;font-weight:900}
.region-number{fill:#183a57;stroke:#fff;paint-order:stroke;stroke-linejoin:round;font-family:system-ui,sans-serif;font-weight:750;pointer-events:none}
@media(max-width:900px){.colors{grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:8px}.number-swatch{padding:5px}.number-swatch::before{inset:5px}}

.number-mode .colors{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:10px}

/* Keep the selected pigment visible against each theme, outside its progress ring. */
:root{--selected-color-accent:#244c76}
:root[data-theme="dark"]{--selected-color-accent:#fff176}
.swatch.selected{outline-color:var(--selected-color-accent)}