:root{--ink:#263b4d;--muted:#778796;--teal:#058f99;--paper:#fffefa;--warm:#fff8eb;--line:#e9e4d9;--yellow:#ffcf50;--green:#4ac388;--shadow:0 16px 36px rgba(49,78,95,.10)}
*{box-sizing:border-box}html{height:100%;scrollbar-gutter:stable}body{margin:0;min-width:280px;min-height:100%;color:var(--ink);font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;background:radial-gradient(ellipse 45% 37% at 4% 20%,#fef0c6 0%,transparent 95%),radial-gradient(ellipse 48% 44% at 96% 85%,#d9f6ee 0%,transparent 95%),#fffaf0;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,[tabindex]:focus-visible{outline:4px solid #f4a83b;outline-offset:3px}button:disabled{opacity:.5;cursor:default}h1,h2,p{margin:0}h1,h2{font-family:'Shantell Sans','Comic Sans MS',cursive;letter-spacing:-.04em}img{display:block;max-width:100%}
.app-shell{width:100%;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{width:100%;height:74px;min-height:74px;padding:0 clamp(18px,3.2vw,65px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(215,201,173,.4);background:rgba(255,253,246,.78);z-index:2}.brand{display:flex;align-items:center;gap:12px;background:transparent;color:var(--ink);padding:3px 0;text-align:left}.brand-mark{display:grid;place-items:center;width:47px;height:47px;border-radius:16px;color:#fff;background:#32b7b9;font-size:29px;box-shadow:0 5px 0 #1b8794;transform:rotate(-8deg)}.brand-name{display:flex;flex-direction:column;line-height:1.14;font-size:16px}.brand-name strong{font-family:'Shantell Sans',cursive;font-size:17px}.brand-name small{font-size:13px;font-weight:600;color:#e5a025}.topbar-right{display:flex;align-items:center;gap:18px}.edition{font-size:12px;color:#79909a;font-weight:500}.icon-btn{border:2px solid #e1e8e5;border-radius:15px;background:#fff;width:46px;height:44px;display:grid;place-items:center;font-size:24px;box-shadow:0 4px 0 rgba(10,102,112,.10)}.sound-toggle[aria-pressed="true"]{color:#138e99;border-color:#8bd9d7;background:#e5fbf7}
.screen{display:none;flex:1;min-height:0;flex-direction:column}.screen.active{display:flex}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:#2f9ba0}.muted{color:var(--muted);font-size:15px}.screen-welcome{justify-content:center;padding:22px clamp(22px,6vw,105px) 22px}.hero-content{width:100%;max-width:1450px;min-height:570px;margin:auto;display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(310px,.95fr);align-items:center;gap:30px}.hero-copy{z-index:1;padding:25px 0}.hero-copy h1{font-size:clamp(56px,5.6vw,105px);line-height:1.07;max-width:780px;margin:15px 0 5px;letter-spacing:-.05em}.gradient-ink{color:#ec9a36;text-shadow:2px 3px 0 #fff0b1}.hero-subtitle{font-family:'Shantell Sans',cursive;color:#179da9;font-size:clamp(28px,2.8vw,46px);font-weight:700;margin-bottom:20px}.hero-description{font-size:clamp(18px,1.3vw,23px);max-width:575px;line-height:1.5;color:#607786}.mini-spark{color:#f9af38;font-size:18px}.demo-paints{display:flex;align-items:center;gap:10px;margin:21px 0 27px}.dot{width:31px;height:31px;border-radius:50%;box-shadow:inset -4px -5px 0 rgba(0,0,0,.1),0 3px 0 rgba(31,59,77,.13);border:3px solid #fff}.yellow{background:#ffd04e}.blue{background:#66b8ef}.coral{background:#f97877}.green{background:#65c98b}.demo-doodle{font-family:'Shantell Sans',cursive;color:#949486;font-size:15px;transform:rotate(-3deg);margin-left:10px}.big-cta{background:#ffbb44;color:#2c3a3d;box-shadow:0 8px 0 #df8e24,0 18px 32px rgba(218,151,34,.25);border-radius:20px;padding:18px 36px;min-width:265px;font-size:clamp(19px,1.7vw,25px);font-weight:800;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;transition:transform .2s,box-shadow .2s}.big-cta:hover{transform:translateY(-3px);box-shadow:0 10px 0 #df8e24,0 20px 40px rgba(218,151,34,.28)}.big-cta:active{transform:translateY(6px);box-shadow:0 2px 0 #df8e24}.resume-note{margin-top:22px;color:#87979b;font-size:13px}.hero-visual{position:relative;width:100%;min-height:530px;display:flex;align-items:flex-end;justify-content:center}.hero-halo{position:absolute;width:min(90%,520px);aspect-ratio:1;bottom:35px;background:#e1f7e9;border:5px dashed #bce9cc;border-radius:50%;box-shadow:0 10px 0 rgba(255,255,255,.7) inset}.hero-iskryk{position:relative;width:min(82%,450px);height:510px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 16px 8px rgba(25,75,70,.14));animation:welcome-float 4.5s ease-in-out infinite}.hero-bubble{position:absolute;right:4%;top:12%;padding:14px 18px;background:white;border:2px solid #cae6e5;border-radius:21px 21px 21px 3px;font-family:'Shantell Sans',cursive;font-size:15px;font-weight:700;color:#118997;transform:rotate(4deg);box-shadow:var(--shadow)}.float-item{position:absolute;z-index:1}.float-star{top:18%;left:5%;font-size:55px;color:#ffce5e}.float-heart{top:35%;right:0%;color:#ee8988;font-size:40px;transform:rotate(13deg)}.float-drop{bottom:30%;left:3%;color:#78caea;font-size:35px}.welcome-bottom{display:flex;justify-content:center;gap:clamp(22px,6vw,110px);font-size:14px;color:#638c8e;font-weight:700;margin:5px auto 18px;flex-wrap:wrap}@keyframes welcome-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.screen-menu{padding:clamp(20px,3vw,45px) clamp(20px,5vw,100px) 20px;max-width:1800px;width:100%;margin:0 auto;overflow-y:auto}.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 23px}.menu-heading h2{font-size:clamp(30px,3.4vw,54px);margin:2px 0 7px}.menu-success{background:#e7f8ee;border-radius:14px;padding:12px 17px;color:#248f75;white-space:nowrap;font-weight:700}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}.lesson-card{border:2px solid #e8e6df;background:#fffefa;border-radius:24px;padding:13px;text-align:left;box-shadow:0 9px 0 rgba(43,84,97,.06);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;min-height:285px;color:inherit}.lesson-card:hover{transform:translateY(-4px);border-color:#9edbd5;box-shadow:0 15px 24px rgba(43,84,97,.13)}.lesson-card:active{transform:translateY(2px)}.mini-stage{width:100%;aspect-ratio:900/560;display:grid;place-items:center;background:#fffaf2;border:2px solid #eee9df;border-radius:16px;overflow:hidden;pointer-events:none}.mini-stage svg{width:100%;height:100%;display:block}.lesson-card-bottom{padding:13px 4px 1px;display:flex;align-items:center;gap:10px}.lesson-card-bottom strong{font-family:'Shantell Sans',cursive;font-size:20px;line-height:1.2}.lesson-card small{color:var(--muted);display:block;font-size:12px;margin-top:5px}.card-number{background:#eef9f7;color:#168f99;border-radius:12px;width:35px;height:35px;flex:none;display:grid;place-items:center;font-weight:800}.card-check{margin-left:auto;border-radius:50%;background:#ddf7eb;color:#218a6c;width:31px;height:31px;display:grid;place-items:center;font-weight:800}.card-arrow{margin-left:auto;color:#0e9aa5;font-size:23px}.menu-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px}.btn-subtle{background:#fff;border:2px solid #e5eae7;border-radius:12px;padding:12px 18px;font-weight:700;color:#668087}
.screen-game{padding:12px clamp(10px,2.2vw,38px) 15px;overflow:hidden}.game-topline{display:grid;grid-template-columns:minmax(140px,1fr) minmax(200px,2fr) minmax(130px,1fr);align-items:center;gap:20px;height:83px;min-height:83px;max-width:1900px;width:100%;margin:0 auto}.back-btn{border:2px solid #e0e9e8;background:#fff;border-radius:15px;display:inline-flex;align-items:center;gap:11px;padding:9px 18px;font-weight:700;color:#506e79;justify-self:start}.back-btn span:first-child{font-size:27px;line-height:23px;color:#16969e}.lesson-titles{text-align:center}.lesson-kicker{font-size:11px;letter-spacing:.13em;color:#9c9e95;font-weight:800}.lesson-titles h2{font-size:clamp(24px,2.4vw,40px);line-height:1.2}.lesson-counter{text-align:right}.lesson-counter strong{display:block;color:#159b9a;font-size:24px}.lesson-counter span{display:block;color:#95a3a2;font-size:11px;font-weight:600}.game-layout{flex:1;min-height:0;max-width:1900px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(285px,21.5vw,360px);gap:clamp(12px,1.7vw,28px);margin:0 auto}.painting-area{display:flex;flex-direction:column;min-width:0;min-height:0}.board-heading{flex:none;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:3px 7px;color:#778992;font-size:13px;font-weight:600}.spark-left{color:#edb240;font-size:17px}.progress-track{width:min(28%,190px);height:10px;background:#e7f1ed;border-radius:10px;overflow:hidden}.progress-fill{width:0;height:100%;background:linear-gradient(90deg,#32c4ac,#a8d64c);border-radius:10px;transition:width .35s}.painting-paper{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;background:#fffefa;border:3px solid #ede7d9;border-radius:24px;box-shadow:0 10px 0 #efeadd,0 17px 30px rgba(49,69,70,.07);position:relative;overflow:hidden;padding:10px}.svg-holder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;min-width:0}.scene-svg{width:100%;height:100%;max-height:100%;display:block;overflow:visible;touch-action:manipulation}.art-target{cursor:pointer;outline:none;--paint:#fffef8}.art-target .paintable{fill:#fffdf8;transition:fill .75s cubic-bezier(.28,.84,.38,1)}.art-target .paintable-stroke{stroke:#fffdf8;transition:stroke .75s cubic-bezier(.28,.84,.38,1)}.art-target.colored .paintable{fill:var(--paint)}.art-target.colored .paintable-stroke{stroke:var(--paint)}.art-target .accent-green{fill:#fffdf8;transition:fill .7s}.art-target .accent-orange{fill:#fffdf8;transition:fill .7s,stroke .7s}.art-target.colored .accent-green{fill:#70c58b}.art-target.colored .accent-orange{fill:#ffa84e}.art-target.colored path.accent-orange[fill="none"]{fill:none;stroke:#e88638}.art-target:focus-visible,.art-target.hinted{filter:drop-shadow(0 0 5px #ffd05b) drop-shadow(0 0 7px #ffc85c)}.art-target.hinted{animation:hint-twinkle .6s ease-in-out 3}.art-target.just-painted{animation:paint-pop .4s ease-out}.art-target:not(.colored):hover .paintable{fill:#fff9e4}.scenery,.scenery *{pointer-events:none}.road-mark{pointer-events:none}.scene-svg [stroke]{vector-effect:non-scaling-stroke}/* outlined shapes stay legible when small */
.paper-caption{flex:none;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:#97a3a7;font-size:12px}.game-tools{min-height:0;display:flex;flex-direction:column;gap:13px;padding-bottom:3px}.coach-card{flex:0 0 auto;min-height:174px;display:flex;align-items:center;gap:7px;border:2px solid #dcf0e9;background:linear-gradient(135deg,#e5f9ef,#f7fff8);border-radius:22px;padding:10px 13px;overflow:hidden}.coach-card img{width:110px;height:150px;object-fit:contain;object-position:center bottom;align-self:flex-end;filter:drop-shadow(0 6px 4px rgba(31,95,75,.10))}.coach-text{background:#fff;border:2px solid #d5ebe9;box-shadow:0 3px 0 #d6e7df;border-radius:17px 17px 17px 4px;padding:12px;font-weight:700;line-height:1.4;font-size:clamp(13px,1.1vw,16px);color:#507180;flex:1}.palette-section{background:#fff;border:2px solid #ece9e1;border-radius:21px;padding:17px 14px 18px;box-shadow:0 5px 0 #f0ebe2;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.palette-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.palette-title{font-family:'Shantell Sans',cursive;font-size:21px;font-weight:800}.small-help{font-size:11px;color:#93a09d}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.paint-btn{min-width:0;min-height:100px;padding:9px 4px 11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:3px solid #e8e8e5;border-radius:19px;background:#fffdf9;color:#546977;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s}.paint-btn:hover{border-color:#83cfcf;transform:translateY(-2px)}.paint-btn[aria-pressed="true"]{border-color:#0aa3ad;background:#edfcfa;box-shadow:0 0 0 3px rgba(28,172,177,.17),0 5px 0 rgba(13,140,144,.13);transform:translateY(-2px)}.paint-btn.hint-palette{animation:hint-twinkle .6s ease-in-out 3}.paint-blob{display:block;background:var(--swatch);height:42px;width:42px;border-radius:50% 46% 54% 47%;border:3px solid #fff;box-shadow:inset -7px -9px 0 rgba(0,0,0,.1),0 3px 0 rgba(22,40,42,.1);transform:rotate(-16deg)}.paint-btn[aria-pressed="true"]:after{content:'✓';position:absolute;right:6px;top:5px;font-weight:800;font-size:14px;color:#07868c}.paint-label{font-size:13px;font-weight:700}.tool-actions{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool-btn{min-height:53px;border-radius:15px;background:#fff;border:2px solid #e6e6de;box-shadow:0 4px 0 #efede5;font-size:13px;font-weight:700;color:#56707b;padding:9px 6px;line-height:1.2}.tool-btn:hover,.btn-subtle:hover,.back-btn:hover{border-color:#a6dad6;background:#f7fefa}.tool-btn:active{transform:translateY(3px);box-shadow:none}.complete-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;padding:18px;background:linear-gradient(transparent 63%,rgba(255,254,247,.7) 100%)}.complete-overlay[hidden]{display:none}.complete-pill{pointer-events:auto;display:flex;gap:12px;align-items:center;padding:12px 13px 12px 19px;border:2px solid #bee5cc;background:rgba(249,255,245,.98);border-radius:20px;box-shadow:0 8px 25px rgba(53,99,83,.15);animation:rise-in .3s ease-out;font-size:15px}.complete-icon{font-size:29px;color:#dba533}.next-btn{border-radius:12px;background:#ffcb5a;box-shadow:0 4px 0 #db9836;padding:10px 17px;font-size:16px;font-weight:800}.next-btn:hover{background:#ffd77a}.paint-flash{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;pointer-events:none;opacity:0;background:#ffe57b;box-shadow:0 0 0 4px #fff9a6;transform:translate(-50%,-50%) scale(0)}.paint-flash.ping{animation:pop-flash .65s ease-out}
.screen-finish{position:relative;justify-content:center;padding:30px 30px 40px}.finish-content{display:flex;align-items:center;justify-content:center;gap:50px;max-width:1200px;margin:auto}.finish-mascot{width:min(35vw,400px);max-height:580px;filter:drop-shadow(0 18px 15px rgba(75,115,78,.1))}.finish-copy{max-width:590px}.finish-copy h2{font-size:clamp(50px,5vw,85px);line-height:1.16;margin:15px 0 22px}.finish-copy h2 span{color:#d89b37}.finish-copy>p:not(.eyebrow){font-size:22px;line-height:1.5;color:#657e85}.finish-stars{font-size:40px;letter-spacing:11px;color:#f1b93d;text-shadow:0 3px 0 #f8e3a8;margin:23px 0 35px}.finish-menu-link{display:block;margin-top:23px;background:none;color:#198f9c;font-weight:800;font-size:16px}.finish-sparkles span{position:absolute;color:#f0b13b;animation:welcome-float 4s ease-in-out infinite;font-size:35px}.finish-sparkles span:nth-child(1){left:12%;top:18%}.finish-sparkles span:nth-child(2){right:14%;top:12%;font-size:70px;color:#71ccba}.finish-sparkles span:nth-child(3){left:42%;top:12%;color:#f48d82}.finish-sparkles span:nth-child(4){right:8%;bottom:16%;color:#8ec3f1}.finish-sparkles span:nth-child(5){left:20%;bottom:13%;color:#a0bf64}
@keyframes hint-twinkle{0%,100%{filter:drop-shadow(0 0 3px #ffd05b)}50%{filter:drop-shadow(0 0 12px #ffbf38)}}@keyframes paint-pop{0%{transform:scale(.98)}50%{transform:scale(1.012)}100%{transform:scale(1)}}@keyframes rise-in{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pop-flash{0%{opacity:.9;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(16)}}
@media(min-width:1500px) and (min-height:900px){.game-tools{gap:17px}.coach-card{min-height:208px}.coach-card img{width:135px;height:175px}.palette-section{padding:19px}.paint-btn{min-height:112px}.paint-blob{width:52px;height:52px}.painting-paper{padding:22px}.game-topline{height:94px;min-height:94px}}
@media(max-width:1050px){.hero-content{grid-template-columns:1fr .88fr;min-height:480px}.hero-visual{min-height:400px}.hero-iskryk{height:420px}.game-layout{grid-template-columns:minmax(0,1fr) 265px;gap:12px}.game-tools{gap:9px}.coach-card{min-height:135px;padding:7px}.coach-card img{height:120px;width:82px}.coach-text{padding:8px;font-size:13px}.palette-section{padding:9px}.color-grid{gap:6px}.paint-btn{min-height:87px;gap:6px;border-radius:14px}.paint-blob{width:34px;height:34px}.paint-label{font-size:11px}.palette-title{font-size:18px}.small-help{font-size:10px}.tool-btn{min-height:48px;font-size:12px}.game-topline{height:72px;min-height:72px}}
@media(max-width:690px){html{scrollbar-gutter:auto}.topbar{height:56px;min-height:56px;padding:0 14px}.brand{gap:8px}.brand-mark{height:36px;width:36px;font-size:21px;border-radius:11px;box-shadow:0 3px 0 #1b8794}.brand-name strong{font-size:13px}.brand-name small{font-size:10px}.edition{display:none}.icon-btn{width:38px;height:36px;border-radius:11px;font-size:20px}.screen-welcome{padding:8px 20px 17px;overflow-y:auto}.hero-content{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0}.hero-copy{padding:14px 0 0;display:flex;align-items:center;flex-direction:column;text-align:center}.hero-copy h1{font-size:clamp(44px,12vw,68px);line-height:1.1;margin:12px 0 3px}.hero-subtitle{font-size:clamp(25px,7vw,36px);margin-bottom:9px}.hero-description{font-size:16px;line-height:1.4}.demo-paints{margin:13px 0 19px}.demo-doodle{font-size:12px}.dot{width:26px;height:26px}.big-cta{font-size:20px;border-radius:16px;min-width:245px;padding:13px 22px;box-shadow:0 6px 0 #df8e24,0 10px 24px rgba(218,151,34,.19)}.resume-note{margin-top:15px;font-size:11px}.hero-visual{min-height:265px;max-height:38vh;align-self:stretch;margin-top:9px}.hero-halo{width:min(80%,285px);bottom:5px}.hero-iskryk{width:min(70%,270px);height:100%}.hero-bubble{top:11%;right:0;font-size:11px;padding:9px 11px}.float-star{font-size:33px}.float-heart{font-size:24px}.welcome-bottom{gap:14px;font-size:10px;margin:10px auto 5px}.screen-menu{padding:17px 14px;overflow:auto}.menu-heading{margin-bottom:13px}.menu-heading h2{font-size:29px}.menu-heading .eyebrow{font-size:9px}.menu-heading .muted{font-size:11px}.menu-success{font-size:11px;padding:9px 10px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lesson-card{padding:6px;border-radius:16px;min-height:0}.mini-stage{border-radius:11px}.lesson-card-bottom{padding:9px 2px 3px;gap:6px}.lesson-card-bottom strong{font-size:12px}.lesson-card small{font-size:10px;margin-top:3px}.card-number{width:23px;height:24px;font-size:11px;border-radius:7px}.card-check{width:20px;height:20px;font-size:10px}.card-arrow{font-size:14px}.menu-bottom{margin-top:18px}.btn-subtle{font-size:11px;padding:8px}.screen-game{height:calc(100dvh - 56px);flex:0 0 auto;padding:5px 8px max(8px,env(safe-area-inset-bottom));overflow:hidden}.game-topline{height:54px;min-height:54px;grid-template-columns:82px minmax(0,1fr) 59px;gap:3px}.back-btn{padding:5px 7px;gap:3px;border-radius:9px;font-size:11px}.back-btn span:first-child{font-size:19px}.lesson-kicker{font-size:8px}.lesson-titles h2{font-size:clamp(17px,4.6vw,25px);line-height:1.12}.lesson-counter strong{font-size:16px}.lesson-counter span{font-size:8px}.game-layout{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-height:0}.board-heading{min-height:25px;font-size:11px;padding:0 3px;white-space:nowrap;gap:5px}.progress-track{height:7px;min-width:61px;width:18%}.painting-paper{padding:3px;border-width:2px;border-radius:16px;box-shadow:0 4px 0 #efeadd,0 9px 16px rgba(49,69,70,.05)}.scene-svg{max-height:100%;overflow:hidden}.paper-caption{height:17px;font-size:9px;padding:0 4px}.game-tools{display:flex;flex-direction:column;gap:6px;padding:0;min-height:0}.coach-card{min-height:43px;height:43px;padding:3px 8px;border-radius:12px;gap:7px;flex:0 0 43px}.coach-card img{width:44px;height:46px;flex:none;align-self:flex-end}.coach-text{border:0;background:none;box-shadow:none;padding:0;border-radius:0;font-size:12px;line-height:1.25}.palette-section{flex:none;padding:6px;border-radius:13px;box-shadow:none}.palette-heading{margin:0 0 5px 3px}.palette-title{font-size:14px}.small-help{font-size:10px}.color-grid{grid-template-columns:repeat(var(--palette-size,4),minmax(0,1fr));gap:5px}.paint-btn{min-height:58px;padding:4px 1px 3px;gap:4px;border-width:2px;border-radius:11px}.paint-blob{width:25px;height:25px;border-width:2px;box-shadow:inset -3px -4px 0 rgba(0,0,0,.1)}.paint-label{font-size:clamp(9px,2.6vw,11px)}.paint-btn[aria-pressed="true"]:after{top:1px;right:3px;font-size:10px}.tool-actions{gap:7px}.tool-btn{min-height:36px;padding:5px 3px;border-radius:10px;box-shadow:0 2px 0 #efede5;font-size:12px}.complete-overlay{padding:5px}.complete-pill{padding:7px 8px;gap:7px;border-radius:12px;font-size:11px}.complete-icon{font-size:17px}.next-btn{font-size:11px;padding:7px 9px}.screen-finish{padding:12px}.finish-content{flex-direction:column;gap:0;text-align:center}.finish-mascot{width:200px;height:260px}.finish-copy h2{font-size:40px;margin:9px 0}.finish-copy>p:not(.eyebrow){font-size:16px}.finish-stars{font-size:29px;letter-spacing:5px;margin:14px}.finish-menu-link{margin:22px auto 0}}
@media(max-width:390px){.game-layout{gap:3px}.game-topline{height:50px;min-height:50px}.board-heading{min-height:21px;font-size:10px}.paper-caption{height:14px}.coach-card{height:38px;min-height:38px;flex-basis:38px}.coach-card img{width:37px;height:40px}.coach-text{font-size:10.5px}.palette-section{padding:5px}.palette-heading{margin-bottom:4px}.palette-title{font-size:12px}.small-help{font-size:9px}.paint-btn{min-height:55px}.paint-blob{width:24px;height:24px}.paint-label{font-size:9px}.tool-btn{min-height:33px;font-size:11px}.lesson-titles h2{font-size:17px}.lesson-kicker{font-size:7px}.lesson-card-bottom strong{font-size:11px}.menu-heading h2{font-size:25px}.menu-success{font-size:10px}.menu-heading .muted{font-size:10px}}
@media(max-height:650px) and (max-width:690px){.screen-game{padding-top:2px;padding-bottom:5px}.game-topline{height:46px;min-height:46px}.board-heading{min-height:17px;font-size:10px}.paper-caption{height:13px}.coach-card{height:33px;min-height:33px;flex-basis:33px}.coach-card img{height:34px;width:31px}.coach-text{font-size:10px}.palette-heading{margin-bottom:3px}.paint-btn{min-height:51px}.paint-blob{width:21px;height:21px}.tool-btn{min-height:31px}.game-tools{gap:4px}.hero-content{min-height:0}.hero-visual{min-height:200px}.hero-iskryk{height:200px}.welcome-bottom{display:none}}
@media(max-height:680px) and (min-width:691px){.topbar{height:56px;min-height:56px}.game-topline{height:61px;min-height:61px}.screen-game{padding-top:5px;padding-bottom:7px}.coach-card{min-height:92px}.coach-card img{height:95px;width:70px}.palette-section{padding:6px}.paint-btn{min-height:70px}.paint-blob{width:28px;height:28px}.tool-btn{min-height:40px}.game-tools{gap:6px}.hero-content{min-height:450px}.hero-visual{min-height:375px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Viewport fitting: the art stays proportional while controls receive spare space. */
.app-shell{height:100dvh;min-height:0}
.screen-welcome{overflow-y:auto}
.screen-menu{overflow-y:auto}
.scene-svg [stroke]{vector-effect:initial}
@media(max-width:690px){
 .game-layout{grid-template-rows:auto minmax(0,1fr)}
 .painting-area{height:auto;align-self:start}
 .painting-paper{flex:0 0 auto;aspect-ratio:900/560;width:100%;min-height:0}
 .game-tools{justify-content:space-evenly}
 .coach-card{flex:0 0 clamp(44px,12vh,98px);height:clamp(44px,12vh,98px);min-height:0}
 .coach-card img{width:clamp(40px,14vw,95px);height:100%}
 .coach-text{font-size:clamp(11px,3.3vw,14px)}
 .palette-section{flex:1;max-height:210px;min-height:0}
 .palette-title{font-size:clamp(13px,4vw,18px)}
 .paint-btn{min-height:clamp(54px,10vh,84px);gap:6px}
 .paint-blob{width:clamp(23px,7vw,41px);height:clamp(23px,7vw,41px)}
 .paint-label{font-size:clamp(9px,2.9vw,12px)}
 .tool-btn{min-height:clamp(34px,6vh,49px)}
}
@media(max-height:650px) and (max-width:690px){
 .coach-card{flex-basis:37px;height:37px}
 .coach-card img{width:34px;height:38px}
 .coach-text{font-size:10px}
 .palette-section{max-height:95px}
 .paint-btn{min-height:49px}
 .paint-blob{width:22px;height:22px}
 .tool-btn{min-height:31px}
}
@media(max-width:690px){
 .coach-card{flex:0 0 clamp(67px,21vh,165px);height:clamp(67px,21vh,165px);min-height:0}
 .coach-card img{width:clamp(58px,23vw,125px);height:100%}
 .coach-text{background:#fff;border:2px solid #d5ebe9;border-radius:14px 14px 14px 4px;padding:clamp(7px,2vw,13px);font-size:clamp(11px,3.3vw,15px);box-shadow:0 3px 0 #d6e7df}
 .palette-section{max-height:150px;min-height:0;padding:clamp(6px,1.6vw,12px)}
 .paint-btn{min-height:clamp(52px,9.5vh,83px)}
}
@media(max-height:650px) and (max-width:690px){
 .coach-card{flex-basis:clamp(52px,13vh,77px);height:clamp(52px,13vh,77px)}
 .coach-card img{width:clamp(42px,15vw,59px);height:100%}
 .coach-text{font-size:10px;padding:5px;border-width:1px;box-shadow:none}
 .palette-section{max-height:100px}
 .paint-btn{min-height:49px}
}
.tool-btn.go-next{background:#ffce63;border-color:#f4c76d;color:#35434c;box-shadow:0 4px 0 #dfa139}
@media(max-width:690px){
 .complete-overlay{display:none!important}
 .paint-label{max-width:100%;overflow-wrap:anywhere;hyphens:auto;text-align:center;line-height:1.1}
 .color-grid[style*="--palette-size: 5"] .paint-label{font-size:9px;letter-spacing:-.025em}
}
@media(max-width:350px){
 .lesson-grid{grid-template-columns:1fr;max-width:315px;margin:0 auto}
 .lesson-card{padding:9px}
 .lesson-card-bottom strong{font-size:17px}
 .lesson-card small{font-size:12px}
 .card-number{width:32px;height:32px;font-size:14px}
 .menu-heading{flex-wrap:wrap;gap:8px}
 .menu-success{font-size:11px}
}
@media(max-width:690px) and (max-height:650px){
 .screen-finish{padding:6px 12px 10px}
 .finish-content{gap:0}
 .finish-mascot{height:164px;width:165px;min-height:0;flex:none}
 .finish-copy .eyebrow{font-size:10px}
 .finish-copy h2{font-size:29px;line-height:1.08;margin:4px 0 8px}
 .finish-copy>p:not(.eyebrow){font-size:13px;line-height:1.35}
 .finish-stars{font-size:22px;letter-spacing:5px;margin:10px 0 14px}
 .finish-copy .big-cta{font-size:17px;min-width:222px;padding:10px 17px}
 .finish-menu-link{font-size:13px;margin:15px auto 0}
 .finish-sparkles span:nth-child(2){font-size:37px}
}
/* v0.2: artwork itself is from the supplied archives. Masks preserve ink outlines. */
.mini-stage {aspect-ratio:1672 / 941; background:#fff}
.mini-stage .artboard {width:100%!important;height:100%!important}
.artboard{width:100%;height:100%;position:relative;aspect-ratio:1672 / 941; background:#fff; overflow:hidden;isolation:isolate;touch-action:manipulation;cursor:crosshair; flex:none}
.artboard-preview{cursor:default}
.zone-layer{position:absolute;inset:0;pointer-events:none;z-index:1;--origin-x:50%;--origin-y:50%}
.mask-paint{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:fill;clip-path:circle(0% at var(--origin-x) var(--origin-y));opacity:0;transition:clip-path .75s cubic-bezier(.15,.74,.23,1),opacity .2s ease;user-select:none}
.zone-layer.colored .mask-paint{opacity:1;clip-path:circle(160% at var(--origin-x) var(--origin-y))}
.artboard-preview .mask-paint{transition:none}
.hint-paint{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none;user-select:none}.zone-layer.hinted:not(.colored) .hint-paint{opacity:1;animation:hint-soft 1s ease-in-out 3}
.lineart-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;mix-blend-mode:multiply;pointer-events:none;z-index:3;user-select:none}

.keyboard-target{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%);border:0;padding:0}
.keyboard-target:focus-visible{clip-path:none;opacity:1;left:5px;top:auto;bottom:5px;width:auto;height:auto;background:#fff2c3;color:#253645;z-index:7;border-radius:7px;padding:4px 8px}
.artboard:not(.artboard-preview){cursor:pointer}
.painting-paper{padding:9px}
@keyframes hint-soft{0%,100%{opacity:0}45%,60%{opacity:1}}
/* The real artist character takes up the same reserved area as the original prototype. */
.hero-iskryk,.finish-mascot,.coach-card img {object-fit:contain}
.hero-iskryk{filter:drop-shadow(0 13px 12px rgba(66,79,59,.14))}
.coach-card img{object-position:center bottom}
.lesson-card .mini-stage .artboard{border-radius:9px}
@media(max-width:690px){
 .painting-paper{padding:4px;aspect-ratio:1672 / 941;max-height:min(38vh,300px)}
 .mini-stage{aspect-ratio:1672/941}
 .paint-label{font-size:11px}
 .coach-text{font-size:clamp(10px,2.8vw,14px)}
 .paint-btn{min-height:clamp(50px,9vh,85px)}
 
}
@media(max-width:350px){.paint-label{font-size:10px}.coach-card img{width:36px}}
@media(prefers-reduced-motion:reduce){.mask-paint{transition:none!important}}
/* Wide displays: do not stretch the paint palette into a tall empty column. */
@media(min-width:1500px) and (min-height:900px){
 .game-tools{justify-content:flex-start;gap:17px}
 .coach-card{flex:1 1 auto;min-height:300px;max-height:none;padding:20px;gap:12px}
 .coach-card img{width:49%;height:min(100%,440px);align-self:center;object-position:center bottom}
 .coach-text{font-size:clamp(17px,1.1vw,20px);line-height:1.5;padding:16px}
 .palette-section{flex:0 0 auto;min-height:260px;max-height:290px;padding:20px 14px}
 .palette-heading{margin-bottom:18px}
 .paint-btn{min-height:128px;gap:12px}
 .paint-blob{width:55px;height:55px}
 .paint-label{font-size:14px}
 .tool-btn{min-height:60px;font-size:14px}
}

/* v0.3: robust visible color layers, tested with ordinary PNG <img> over file:// and HTTP. */
@media(min-width:1100px){
  .game-layout{grid-template-columns:minmax(0,1fr) clamp(330px,25vw,440px)}
  .palette-section{padding:15px 16px 19px}
  .paint-btn{min-height:114px;gap:9px;padding:9px 3px 10px}
  .paint-blob{width:58px;height:58px}
  .paint-label{font-size:13px}
}
@media(min-width:1500px) and (min-height:900px){
  .paint-btn{min-height:129px}
  .paint-blob{width:63px;height:63px}
  .paint-label{font-size:15px}
  .palette-section{max-height:330px}
}
@media(max-height:800px) and (min-width:1100px){
  .coach-card{min-height:130px}
  .coach-card img{height:123px}
  .paint-btn{min-height:102px}
  .paint-blob{width:51px;height:51px}
}
@media(prefers-reduced-motion:reduce){.mask-paint{transition:none!important}}

/* Keep long color labels within enlarged palette cards. */
@media(min-width:1100px) and (max-width:1500px){
  .paint-btn[data-color="orange"] .paint-label{font-size:11px;letter-spacing:-.035em}
}
@media(max-width:690px){
  .paint-btn[data-color="orange"] .paint-label{font-size:9px;letter-spacing:-.065em}
}

/* Hover is intentionally subdued: only a deliberately selected paint is turquoise. */
.paint-btn:hover:not([aria-pressed="true"]){border-color:#e9dec9;background:#fffaf2;box-shadow:none}