:root{--ink: #2b2430;--paper: #fffdf8;--muted: #6d6475;--coral: #ff6b6b;--sun: #ffd166;--sky: #5ec8e3;--mint: #7ed9a6;--lilac: #c9a8ff;--shadow: 0 12px 28px rgba(43, 36, 48, .12);--radius: 28px}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 8% -10%,#ffe08a 0%,transparent 42%),radial-gradient(ellipse at 92% 0%,#ffb7d5 0%,transparent 44%),radial-gradient(ellipse at 10% 100%,#9ae6e0 0%,transparent 46%),radial-gradient(ellipse at 90% 100%,#c5f0a8 0%,transparent 42%),#fff3e4;overflow-x:hidden}button,a{font-family:inherit}button:focus-visible,[role=tab]:focus-visible,[role=option]:focus-visible{outline:3px solid #4dabf7;outline-offset:3px}.grain{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E")}.app-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 8px;padding-top:max(18px,env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));max-width:1120px;margin:0 auto}.brand{display:flex;align-items:center;gap:12px}.logo{width:54px;height:54px;border-radius:18px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center}.logo svg{width:40px;height:40px}.brand h1{font-family:"Baloo 2",Nunito,sans-serif;font-size:1.85rem;line-height:1;letter-spacing:.02em}.brand p{color:var(--muted);font-weight:700;font-size:.92rem}.header-actions{display:flex;gap:8px}.icon-btn{width:48px;height:48px;border:3px solid var(--ink);border-radius:16px;background:#fff;cursor:pointer;font-size:1.25rem;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease}.icon-btn:hover{transform:translate(-1px,-1px)}.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:8px 18px 40px}.hero{text-align:center;padding:8px 10px 22px}.hero h2{font-family:"Baloo 2",sans-serif;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.15}.hero p{margin-top:6px;font-size:1.1rem;font-weight:700;color:var(--muted)}.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}.gallery .card{width:100%}@media(min-width:520px){.gallery .card{width:calc((100% - 18px)/2)}}@media(min-width:760px){.gallery .card{width:calc((100% - 36px) / 3)}}.card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--ink);border-radius:28px;background:#fff;padding:12px 12px 14px;text-align:left;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease;width:100%}.card:hover{transform:translate(-3px,-4px) rotate(-.4deg);box-shadow:8px 10px 0 var(--ink)}.card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.card-preview{background:linear-gradient(#fff,#fff),repeating-linear-gradient(-12deg,#fff6d8,#fff6d8 12px,#ffe9b0 12px,#ffe9b0 24px);background-clip:padding-box,border-box;border-radius:20px;overflow:hidden;aspect-ratio:4 / 5;border:2px solid #eadfce;display:grid;place-items:center}.card-preview svg{width:100%;height:100%;display:block;pointer-events:none}svg .region{stroke:var(--ink);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}svg .region-bg{stroke:none}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 6px 2px}.card-meta h3{font-family:"Baloo 2",sans-serif;font-size:1.2rem}.badge{font-size:.75rem;font-weight:800;background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:2px 8px}.badge.done{background:var(--mint)}.studio{display:none;flex-direction:column;gap:12px}.gallery-wrap.is-hidden{display:none}.studio.is-open{display:flex;flex:1;min-height:0;height:100%;overflow:hidden}.studio-bar,.paper-wrap,.hint{width:min(560px,100%);margin-inline:auto}.studio-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.studio-title{font-family:"Baloo 2",sans-serif;font-size:1.45rem;text-align:center;flex:1}.tools{display:flex;gap:8px}.tool-btn{border:3px solid var(--ink);background:#fff;border-radius:16px;padding:8px 12px;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink);font-size:.95rem}.tool-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.paper-wrap{flex:1;display:flex;justify-content:center;align-items:center;min-height:0;min-width:0;overflow:hidden}.paper{width:min(520px,100%);max-height:100%;margin:0 auto;background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:8px 10px #2b24302e;overflow:hidden;position:relative;touch-action:manipulation}.paper svg{width:100%;height:auto;max-height:100%;display:block;user-select:none;-webkit-user-select:none}.paper .region{cursor:pointer}.paper .region.is-flash{filter:brightness(1.08)}.hint{text-align:center;font-weight:800;color:var(--muted);min-height:1.4em;flex-shrink:0}.palette-dock{position:relative;flex-shrink:0;background:#fff9efeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:3px solid var(--ink);border-radius:24px 24px 0 0;padding:10px 10px max(14px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));box-shadow:0 -8px 24px #2b243014}.palette-label{display:flex;justify-content:space-between;align-items:center;font-weight:800;padding:0 8px 8px;font-size:.95rem}.swatch-now{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:inline-block;vertical-align:middle;margin-left:6px}.palette{display:flex;gap:10px;overflow-x:auto;padding:6px 6px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}@media(max-width:900px){.palette{gap:8px;padding:6px 2px 10px 6px;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 32px),transparent)}}.crayon{flex:0 0 auto;width:44px;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;transform-origin:bottom center;transition:transform .15s ease}.crayon-tip{width:16px;height:14px;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%);border-bottom:0}.crayon-body{width:28px;height:58px;background:var(--c);border:3px solid var(--ink);border-radius:6px 6px 4px 4px;box-shadow:inset 4px 0 #ffffff40}.crayon-band{width:28px;height:12px;background:#f4efe6;border:3px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;margin-top:-3px}.crayon.is-selected{transform:translateY(-10px)}.crayon.is-selected .crayon-body{box-shadow:inset 4px 0 #ffffff47,0 0 0 3px #fff,0 0 0 6px var(--ink)}.crayon.magic .crayon-body{background:linear-gradient(180deg,#ff6b6b,#ffd166,#7ed9a6,#5ec8e3,#c9a8ff)}.crayon.magic .crayon-tip{background:#ff6b6b}.toast{position:fixed;left:50%;bottom:150px;transform:translate(-50%) translateY(20px);background:var(--ink);color:#fff;font-weight:800;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s ease;z-index:5}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b243073;display:none;place-items:center;z-index:6;padding:20px}.modal.is-open{display:grid}.modal-card{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:22px;width:min(360px,100%);text-align:center;box-shadow:8px 8px 0 var(--ink)}.modal-card h3{font-family:"Baloo 2",sans-serif;font-size:1.6rem}.modal-card p{margin:8px 0 16px;font-weight:700}.modal-actions{display:flex;gap:10px;justify-content:center}.yay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:4}.confetti{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall 1.6s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(280deg);opacity:.2}}#home.is-hidden{display:none}.mode-tabs{display:flex;justify-content:center;gap:10px;margin:6px 0 14px}.mode-tab{border:3px solid var(--ink);background:#fff;border-radius:999px;padding:8px 22px;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.mode-tab.is-on{background:var(--sun)}.practice-preview{font-family:"Baloo 2",sans-serif}.preview-letter{font-size:5rem;font-family:"Baloo 2",sans-serif;line-height:1}.practice-paper{touch-action:none;overflow:auto;min-height:360px}.studio.is-open .practice-paper{min-height:0;height:100%;max-height:100%;width:min(560px,100%)}.step-pill{font-weight:800;min-width:3ch;text-align:center}.step-pill:empty{display:none}.trace-svg,.dots-svg{width:100%;height:auto;display:block;touch-action:none}.practice-paper:has(.hunt-svg){display:flex;flex-direction:column}.hunt-svg{width:100%;height:100%;flex:1;display:block;touch-action:none}.trace-label{font-family:"Baloo 2",sans-serif;font-size:22px;fill:#6d6475;font-weight:800}.trace-ghost{fill:none;stroke:#f3e6c8;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}.trace-paint{fill:none;stroke:#ff6b6b;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}.trace-guide{fill:none;stroke:var(--ink);stroke-width:5;stroke-dasharray:8 12;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.match-board,.pic-grid,.quiz-card{padding:16px}.match-letters,.quiz-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px}.match-pics,.pic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.letter-tile,.pic-tile,.alpha-dot{border:3px solid var(--ink);background:#fff;border-radius:18px;cursor:pointer;font-family:"Baloo 2",sans-serif;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.letter-tile{width:64px;height:64px;font-size:1.8rem}.pic-tile{padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px}.pic-tile svg{width:72px;height:72px}.pic-tile span{font-size:.9rem;font-family:Nunito,sans-serif}.letter-tile.is-picked{background:var(--sun);transform:translateY(-4px)}.letter-tile.is-matched,.pic-tile.is-matched,.alpha-dot.is-found{background:var(--mint)}.letter-tile.is-wrong,.pic-tile.is-wrong,.alpha-dot.is-wrong{background:#ffb4b4;animation:shake .35s ease}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.fish-board{height:100%;min-height:360px;display:flex;align-items:center;justify-content:center;padding:28px 10px 20px;position:relative;background:linear-gradient(180deg,#c5eef8,#e8f7ff 48%,#fffdf8)}.fish-board:before,.fish-board:after{content:"";position:absolute;pointer-events:none;border:3px solid var(--ink);border-radius:50%;background:#ffffff8c}.fish-board:before{width:28px;height:28px;left:9%;bottom:8%}.fish-board:after{width:16px;height:16px;left:16%;bottom:15%}.fish{position:relative;width:min(520px,100%);display:flex;align-items:center;justify-content:center;padding:40px 4px 22px 0}.fish-tail,.fish-fin,.fish-eye,.fish-body:before,.fish-body:after{pointer-events:none}.fish-tail{position:absolute;left:0;top:50%;z-index:0;width:clamp(84px,22vw,118px);height:clamp(84px,22vw,118px);background:var(--sky);border:4px solid var(--ink);border-radius:20px;transform:translate(2px,-50%) rotate(45deg)}.fish-fin{position:absolute;left:56%;top:2px;z-index:0;width:58px;height:78px;background:var(--sky);border:4px solid var(--ink);border-radius:50% 50% 10px 10px;transform:translate(-40%,-18%)}.fish-body{position:relative;z-index:1;width:min(460px,calc(100% - 52px));margin-left:56px;height:clamp(250px,46dvh,340px);min-height:240px;border:4px solid var(--ink);border-radius:50%;background:radial-gradient(ellipse at 30% 28%,#fff 0 12%,transparent 40%),var(--sky);display:grid;grid-template-columns:repeat(4,52px);align-content:center;justify-content:center;gap:10px;padding:36px 78px 36px 28px}.fish-body:before{content:"";position:absolute;left:38%;bottom:-6px;width:56px;height:32px;background:var(--sky);border:4px solid var(--ink);border-radius:50%;transform:rotate(26deg)}.fish-body:after{content:"";position:absolute;right:22px;top:56%;width:24px;height:14px;border-bottom:4px solid var(--ink);border-radius:0 0 16px 16px}.fish-eye{position:absolute;top:28%;right:16px;z-index:2;width:38px;height:38px;background:#fff;border:4px solid var(--ink);border-radius:50%}.fish-eye:before{content:"";position:absolute;top:8px;left:11px;width:14px;height:14px;background:var(--ink);border-radius:50%}.fish-eye:after{content:"";position:absolute;top:10px;left:15px;width:6px;height:6px;background:#fff;border-radius:50%}.alpha-dot{width:52px;height:52px;font-size:1.4rem;border-radius:50%;position:relative;z-index:1}.quiz-card{text-align:center}.quiz-pic svg{width:140px;height:140px;margin:0 auto}.quiz-word{font-family:"Baloo 2",sans-serif;font-size:1.6rem;margin:6px 0 14px}.hunt-letter{cursor:pointer}.hunt-letter text{pointer-events:none}.hunt-letter.is-found text{fill:#20c997;font-size:26px;stroke:#2b2430;stroke-width:2;paint-order:stroke fill}.dot-hit{cursor:pointer}html:has(:is(#studio,#practice-studio).is-open){height:100dvh}body:has(:is(#studio,#practice-studio).is-open){height:100dvh;overflow:hidden;display:flex;flex-direction:column}body:has(:is(#studio,#practice-studio).is-open) .app-header{flex-shrink:0;width:100%;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:6px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:10px}body:has(:is(#studio,#practice-studio).is-open) .brand p{display:none}body:has(:is(#studio,#practice-studio).is-open) .logo{width:40px;height:40px;border-radius:14px}body:has(:is(#studio,#practice-studio).is-open) .logo svg{width:28px;height:28px}body:has(:is(#studio,#practice-studio).is-open) .brand h1{font-size:1.4rem}body:has(:is(#studio,#practice-studio).is-open) .icon-btn{width:40px;height:40px}body:has(:is(#studio,#practice-studio).is-open) main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;width:100%;padding:4px 18px 8px}.studio.is-open .paper-wrap{container-type:size}.studio.is-open .paper:not(.practice-paper){aspect-ratio:4 / 5;width:min(520px,100cqw,80cqh);max-height:100%;height:auto}.studio.is-open .paper:not(.practice-paper) svg{width:100%;height:100%;max-height:100%}@media(max-width:640px){.app-header{padding:12px 14px 4px;padding-top:max(12px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.brand h1{font-size:1.5rem}.studio-title{font-size:1.15rem;order:-1;flex:1 0 100%}.studio-bar{flex-wrap:wrap}.tool-btn{padding:8px 9px;font-size:.85rem}.crayon-body{height:50px}.fish-body{grid-template-columns:repeat(3,52px);padding:28px 62px 28px 22px;height:clamp(250px,48dvh,320px)}.fish-eye{width:32px;height:32px;right:12px}}@media(max-height:520px){body:has(:is(#studio,#practice-studio).is-open) .app-header{display:none}.studio.is-open{gap:6px}.studio.is-open .studio-title{font-size:1.1rem}.studio.is-open .tool-btn{padding:6px 10px;font-size:.85rem}.studio.is-open .palette-dock{padding:6px 8px max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.studio.is-open .palette-label{padding:0 6px 4px;font-size:.85rem}.studio.is-open .palette{padding:4px 4px 6px;gap:6px}.studio.is-open .crayon{width:36px}.studio.is-open .crayon-tip{width:12px;height:10px}.studio.is-open .crayon-body{width:22px;height:36px}.studio.is-open .crayon-band{width:22px;height:8px}.studio.is-open .crayon.is-selected{transform:translateY(-6px)}}@media(max-height:520px)and (orientation:landscape){#studio.is-open{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar bar" "paper palette" "hint palette";gap:6px 10px}#studio.is-open .studio-bar{grid-area:bar;width:100%;flex-wrap:nowrap}#studio.is-open .studio-title{order:0;flex:1 1 auto}#studio.is-open .paper-wrap{grid-area:paper;width:100%;height:100%}#studio.is-open .hint{grid-area:hint;width:100%}#studio.is-open .palette-dock{grid-area:palette;align-self:stretch;display:flex;flex-direction:column;min-height:0;width:auto;border-radius:24px;padding:8px;padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}#studio.is-open .palette-label{flex-direction:column;align-items:flex-end;gap:2px;padding:0 2px 4px;font-size:.75rem}#studio.is-open .palette{display:grid;grid-template-columns:repeat(4,auto);overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;align-content:start;justify-content:center;gap:2px 6px;padding:2px 2px 6px}#studio.is-open .crayon{width:32px}#studio.is-open .crayon-tip{width:11px;height:8px}#studio.is-open .crayon-body{width:20px;height:28px}#studio.is-open .crayon-band{width:20px;height:6px}#studio.is-open .crayon.is-selected{transform:translateY(-2px) scale(1.06)}}