:root{--night: #070B18;--panel: #0E152B;--panel-2: #131C38;--line: #22305A;--ink: #EAF2FF;--muted: #8E9CC2;--gold: #FFB547;--rec: #FF4D5E;--accent: #9FE3FF;--font-display: "Chakra Petch", "Bahnschrift", "Segoe UI", sans-serif;--font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 500px at 50% -120px,rgba(159,227,255,.08),transparent 70%),var(--night);color:var(--ink);font:16px/1.55 var(--font-body)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}kbd{font:700 .78em var(--font-display);padding:1px 7px;border-radius:6px;border:1px solid var(--line);background:var(--panel);white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.app{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,4vw);background:#070b18d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(34,48,90,.6)}.brand{display:flex;align-items:center;gap:10px;font:500 1.15rem var(--font-display);letter-spacing:.02em}.brand b{color:var(--gold);font-weight:700}.brand-mark{width:26px;height:26px;border-radius:8px;position:relative;background:linear-gradient(160deg,#1b2645,#0b1226);box-shadow:inset 0 0 0 1px var(--line)}.brand-mark:before{content:"";position:absolute;left:7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--gold)}.brand-mark:after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:3px;border-radius:2px;background:#9fe3ff}.icon-btn{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--panel)}.icon-btn:hover{border-color:var(--accent)}.icon-btn svg{width:20px;height:20px}.home{width:100%;max-width:1180px;margin:0 auto;padding:40px max(16px,4vw) 64px;display:grid;gap:28px}.hero h1{margin:0;font:700 clamp(2.2rem,6vw,4rem)/1 var(--font-display);letter-spacing:-.01em;text-wrap:balance}.hero h1 span{color:var(--gold)}.hero p{margin:14px 0 0;max-width:60ch;color:var(--muted);font-size:1.05rem}.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:7px 16px;border-radius:999px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 .82rem var(--font-display);letter-spacing:.06em;text-transform:uppercase}.chip:hover{color:var(--ink)}.chip.on{background:var(--ink);color:var(--night);border-color:var(--ink)}.search input{width:min(280px,100%);padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -18px var(--accent)}.thumb{aspect-ratio:16 / 10;background:#000;border-bottom:1px solid var(--line)}.thumb canvas{width:100%;height:100%;display:block}.card-body{padding:14px 16px 18px;display:grid;gap:8px}.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.card h3{margin:0;font:700 1.25rem var(--font-display)}.card p{margin:0;color:var(--muted);font-size:.93rem}.best{font:700 .75rem var(--font-display);color:var(--gold);letter-spacing:.04em;white-space:nowrap}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{font:700 .68rem var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 8px;border-radius:999px}.play-chip{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:999px;background:var(--accent);color:#06101e;font:700 .8rem var(--font-display);letter-spacing:.05em;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s}.card:hover .play-chip,.card:focus-visible .play-chip{opacity:1;transform:none}.reel-badge{position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:8px;background:linear-gradient(90deg,#ff2e97,#a259ff);color:#fff;font:700 .68rem var(--font-display);letter-spacing:.08em;box-shadow:0 4px 14px -4px #ff2e97}.empty{color:var(--muted)}.filters{scroll-margin-top:80px}.count{margin:-12px 0 0;color:var(--muted);font-size:.88rem}.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding-top:8px}.pg{min-width:44px;height:44px;padding:0 14px;border-radius:12px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 .95rem var(--font-display)}.pg:hover:not(:disabled){border-color:var(--accent)}.pg.on{background:var(--gold);border-color:var(--gold);color:var(--night)}.pg:disabled{opacity:.35;cursor:not-allowed}.pg-gap{color:var(--muted);padding:0 2px}.play{width:100%;max-width:1280px;margin:0 auto;padding:18px max(16px,3vw) 40px;display:grid;gap:16px}.play-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}.back{color:var(--muted);font-weight:700}.back:hover{color:var(--ink)}.play-title{display:flex;align-items:baseline;gap:14px}.play-title h1{margin:0;font:700 1.8rem var(--font-display);color:var(--accent)}.stage-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}.stage{position:relative;display:flex;justify-content:center;align-items:center;padding:14px;border-radius:18px;background:#03050c;border:1px solid var(--line);min-width:0}.stage canvas{display:block;width:100%;height:auto;border-radius:10px;touch-action:none;outline:none}.stage.recording{border-color:var(--rec);box-shadow:0 0 0 3px #ff4d5e40}.stage:fullscreen{border-radius:0;padding:0}.stage:fullscreen canvas{max-width:min(100vw,calc(100vh * var(--ar, 1)))!important;max-height:100vh;width:auto;height:100vh}.rec-badge{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;background:#000000b3;font:700 .8rem var(--font-display);letter-spacing:.08em;color:#fff;pointer-events:none}.dot{width:10px;height:10px;border-radius:50%;background:var(--rec);flex:none}.rec-badge .dot,.rec-btn.on .dot{animation:blink 1s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}.side{display:grid;gap:16px;min-width:0}.toolbar,.info,.recs{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px}.rec-btn{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;padding:13px 16px;border-radius:12px;border:1px solid var(--rec);background:#ff4d5e1a;color:#ffd7db;font:700 1rem var(--font-display);letter-spacing:.06em;text-transform:uppercase}.rec-btn:hover{background:#ff4d5e2e}.rec-btn.on{background:var(--rec);color:#fff}.rec-btn.on .dot{background:#fff}.rec-btn:disabled{opacity:.5;cursor:not-allowed}.row{display:flex;flex-wrap:wrap;gap:8px}.btn{flex:1;padding:9px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;border:1px solid var(--line);background:var(--panel-2);font-weight:700;font-size:.9rem}.btn:hover{border-color:var(--accent)}.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);cursor:pointer}.check input{margin-top:3px;accent-color:var(--gold)}.notice{margin:0;padding:9px 12px;border-radius:10px;background:#4ade801a;color:#bbf7d0;font-size:.88rem;overflow-wrap:anywhere}.warn{margin:0;padding:9px 12px;border-radius:10px;background:#ff4d5e1f;color:#ffc9cf;font-size:.88rem}.levels{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px}.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tier{display:grid;gap:2px;padding:8px 6px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font:700 .78rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}.tier span{font-size:.72rem;letter-spacing:.04em;color:var(--gold)}.tier:hover{color:var(--ink)}.tier.on{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,var(--panel-2))}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.lvl{aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:1px;cursor:pointer;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);font:700 .95rem var(--font-display)}.lvl:hover:not(:disabled){border-color:var(--accent)}.lvl.done{background:color-mix(in srgb,var(--accent) 10%,var(--panel-2))}.lvl.on{background:var(--accent);color:#06101e;border-color:var(--accent)}.lvl:disabled{cursor:not-allowed;color:#3d4a72;background:transparent}.lvl svg{width:15px;height:15px}.lvl .stars{font-size:.5rem;line-height:1;letter-spacing:0;color:var(--gold)}.lvl.on .stars{color:#06101e}.levels h2,.info h2,.recs h2{margin:0;font:700 .8rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.recs h2 span{color:var(--gold);margin-left:6px}.info p{margin:0;font-size:.93rem}.controls{color:var(--accent)}.keys,.muted{color:var(--muted);font-size:.86rem}.recs ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}.recs li{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}.recs li:last-child{border-bottom:0;padding-bottom:0}.recs video{width:100%;max-height:200px;border-radius:10px;background:#000}.rec-meta{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;min-width:0}.rec-meta .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 900px){.stage-wrap{grid-template-columns:minmax(0,1fr)}.stage{padding:8px}.stage canvas{max-width:100%!important}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}.top-nav{display:flex;align-items:center;gap:10px}.kids-link{padding:8px 14px;border-radius:999px;font:700 .9rem var(--font-body);background:linear-gradient(90deg,#ffb347,#ff6fb5);color:#2a0e3f}.kids-link:hover{filter:brightness(1.08)}.kids-banner{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;background:linear-gradient(100deg,#ffe29a,#ffb3d9 55%,#b9d8ff);color:#2a0e3f;box-shadow:0 14px 34px -20px #ff6fb5;transition:transform .18s ease}.kids-banner:hover,.kids-banner:focus-visible{transform:translateY(-3px)}.kb-emoji{font-size:2.6rem;line-height:1}.kb-text{flex:1;font-size:.98rem}.kb-text b{display:block;font:800 1.3rem var(--font-body)}.kb-go{padding:8px 16px;border-radius:999px;background:#2a0e3f;color:#fff;font-weight:800;white-space:nowrap}.kids{width:100%;max-width:1180px;margin:24px auto 56px;padding:32px max(16px,3vw) 40px;display:grid;gap:24px;border-radius:28px;background:linear-gradient(180deg,#fff8e7,#ffeaf4 60%,#eaf4ff);color:#2a0e3f;font-family:var(--font-body)}.kids .muted{color:#6b5a80}.kids-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.kids-hero h1{margin:0;font:800 clamp(2rem,5vw,3.2rem)/1.05 var(--font-body);color:#3d1c6b}.kids-hero p{margin:10px 0 0;max-width:62ch;font-size:1.05rem;color:#4b3a66}.kids-mascot{font-size:clamp(3.5rem,10vw,6rem);animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}.kid-skills{display:flex;flex-wrap:wrap;gap:8px}.kid-chip{--accent: #7C5CFF;padding:9px 16px;border-radius:999px;cursor:pointer;font:800 .92rem var(--font-body);border:2px solid color-mix(in srgb,var(--accent) 45%,transparent);background:#fff;color:#3d1c6b}.kid-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.kid-card{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;border:3px solid color-mix(in srgb,var(--accent) 35%,#FFF);transition:transform .18s ease,box-shadow .18s ease}.kid-card:hover,.kid-card:focus-visible{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 16px 30px -18px var(--accent)}.kid-thumb{aspect-ratio:4 / 3;background:#fff3e0}.kid-thumb canvas{width:100%;height:100%;display:block}.kid-body{padding:12px 16px 16px;display:grid;gap:8px}.kid-body h3{margin:0;font:800 1.25rem var(--font-body);color:#3d1c6b}.kid-body p{margin:0;font-size:.92rem;color:#5b4b70}.kid-meta{display:flex;flex-wrap:wrap;gap:6px}.kid-skill,.kid-age{padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:800}.kid-skill{background:color-mix(in srgb,var(--accent) 16%,#FFF);color:#3d1c6b}.kid-age{background:#f1ecf8;color:#5b4b70}.kid-stars{display:flex;align-items:center;gap:2px;font-size:1.4rem;color:#e4ddee}.kid-stars .on{color:#ffb800}.kid-stars small{margin-left:auto;font-size:.8rem;font-weight:800;color:#6b5a80}.parents{padding:20px;border-radius:20px;background:#ffffffbf;display:grid;gap:12px}.parents h2{margin:0;font:800 1.25rem var(--font-body);color:#3d1c6b}.parents p{margin:0}.skill-rows{display:grid;gap:10px}.skill-row{display:grid;grid-template-columns:minmax(180px,1.3fr) 2fr auto;align-items:center;gap:14px}.skill-name small{display:block;color:#6b5a80;font-size:.8rem}.skill-bar{height:14px;border-radius:999px;background:#efe8f7;overflow:hidden}.skill-bar span{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s ease}.skill-num{font-weight:800;font-size:.88rem;color:#4b3a66;white-space:nowrap}@media (max-width: 640px){.kids{margin:12px 8px 40px;padding:22px 16px;border-radius:22px}.kids-banner{flex-wrap:wrap}.skill-row{grid-template-columns:1fr;gap:6px}.kids-link{padding:7px 11px;font-size:.85rem}}