:root{--bg:#101015;--card:#1b1822;--fg:#f3f0ff;--pu:#b79cff;--gr:#7ee0b8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;line-height:1.6}
main{max-width:720px;margin:0 auto;padding:32px 16px 64px}
header{text-align:center}
.tag{letter-spacing:.2em;font-size:.8rem;opacity:.7;margin:0}
.badge{display:inline-block;margin:12px 0;padding:4px 14px;border-radius:999px;background:var(--card);color:var(--pu);font-size:.85rem;border:1px solid var(--pu)}
h1{font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.2;margin:.2em 0}
.lead{max-width:36rem;margin:0 auto;opacity:.85}
.hero{width:100%;height:auto;margin:24px 0}
.flow{fill:none;stroke:var(--pu);stroke-width:3;stroke-dasharray:6 10;stroke-linecap:round;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.learner,.film,.code{animation:float 4s ease-in-out infinite}
.film{animation-delay:-1s}.code{animation-delay:-2s}
@keyframes float{50%{translate:0 -6px}}
.ring{fill:none;stroke:var(--pu);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.r2{animation-delay:1.2s}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.orb{transform-box:fill-box;transform-origin:center;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.07)}}
.spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.3) rotate(45deg);opacity:.6}}
.clap{transform-box:fill-box;transform-origin:left bottom;animation:clap 2.4s ease-in-out infinite}
@keyframes clap{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(-22deg)}}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
section{background:var(--card);border-radius:24px;padding:24px}
fieldset{border:0;padding:0;margin:0 0 16px}
legend{font-size:1.2rem;font-weight:600;margin-bottom:12px}
.choice{display:block;margin:8px 0;cursor:pointer}
.choice input{position:absolute;opacity:0}
.choice span{display:block;padding:14px 16px;border:2px solid #3a3450;border-radius:14px}
.choice input:checked+span{border-color:var(--gr);background:#22303a}
.choice input:focus-visible+span{outline:3px solid var(--pu)}
.mail{display:block;margin-bottom:8px}
.mail input{display:block;width:100%;margin-top:6px;padding:12px;border-radius:12px;border:2px solid #3a3450;background:var(--bg);color:var(--fg);font-size:1rem}
.note{font-size:.85rem;opacity:.8;margin:8px 0 16px}
.trap{position:absolute;left:-9999px;width:1px;height:1px}
button{cursor:pointer;padding:12px 22px;border-radius:12px;border:0;background:var(--pu);color:#101015;font-weight:700;font-size:1rem}
button:disabled{opacity:.5;cursor:wait}
#error{color:#ff8a8a;min-height:1.5em;margin:8px 0 0}
#chart{width:100%;height:auto}
#chart text{fill:var(--fg);font-size:14px;font-family:system-ui,sans-serif}
.bar{transform-box:fill-box;transform-origin:left;animation:grow .9s ease-out both}
@keyframes grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}