@font-face{font-family:Baloo;src:url("fonts/Baloo2-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
:root{color-scheme:dark;--bg:#080d22;--ink:#edf2ff;--muted:#a1afd1;--line:#263254;--accent:#8ad5fb;--pink:#ed92cf}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 14% 20%,#17143d 0,transparent 45%),var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}
button,input,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,.arena:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.shell{max-width:1160px;padding:0 48px;margin:auto}
header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;gap:9px;align-items:center;font-weight:750;font-size:17px}
.brand-icon{display:grid;place-items:center;background:var(--accent);color:var(--bg);width:29px;height:29px;border-radius:8px;font-size:25px;line-height:1}
.slash{color:#7d8eb7;font-weight:400}.back{font-size:13px;color:var(--muted)}
.intro{padding:51px 0 34px}
.eyebrow{font:600 10px/1.5 ui-monospace,monospace;letter-spacing:2px;color:var(--accent);display:flex;align-items:center;gap:9px;margin:0 0 22px}
.dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
h1{font:800 clamp(46px,6.5vw,76px)/1.01 Baloo,system-ui,sans-serif;letter-spacing:-2px;margin:0}
h1 span{color:var(--accent)}
.lede{margin:18px 0 0;color:var(--muted);font-size:16px}
.workspace{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0c1229}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;gap:20px;border-bottom:1px solid var(--line)}
.themes{display:flex;gap:6px;flex-wrap:wrap}
.theme{border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 13px;border-radius:10px;font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:42px}
.theme[aria-pressed=true]{color:var(--ink);border-color:#445371;background:#1b2440}
.theme:hover{background:#19213a}
.swatch{width:12px;height:12px;display:block;border-radius:50%}
.comet{background:#8ad5fb}.candy{background:#f69bd4}.pixel{background:#93e8bf;border-radius:2px}.orbit{background:#baa7ff}
.trail-control{font-size:12px;color:var(--muted);white-space:nowrap;display:flex;gap:8px;align-items:center;cursor:pointer}
.trail-control input{accent-color:var(--accent);width:16px;height:16px}
.arena{height:410px;position:relative;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% 50%,#2b235537,transparent 60%),radial-gradient(#34405b 1px,transparent 1px);background-size:auto,22px 22px;isolation:isolate}
@media(pointer:fine){.arena.is-active{cursor:none}}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.scene{position:absolute;inset:0;transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s linear;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(26px);opacity:.15}
.orb-one{width:240px;height:240px;background:var(--accent);left:20%;top:20%}
.orb-two{width:180px;height:180px;background:var(--pink);right:16%;top:15%}
.mascot{position:absolute;width:162px;height:146px;background:linear-gradient(140deg,#9edfff,#747bdf);left:calc(50% - 81px);top:calc(50% - 83px);border-radius:46% 48% 40% 43%;display:flex;justify-content:center;gap:10px;align-items:center;box-shadow:0 20px 55px #0005,inset 0 2px 4px #d2efff70;transform:rotate(-8deg)}
.eye{width:39px;height:47px;border-radius:50%;background:#fbfbff;position:relative;margin-top:-14px;overflow:hidden;box-shadow:inset 0 2px 3px #4c65aa50}
.pupil{position:absolute;width:17px;height:21px;border-radius:50%;background:#111a36;left:11px;top:14px;transform:translate(var(--eye-x,0px),var(--eye-y,0px))}
.pupil:after{content:"";position:absolute;width:5px;height:5px;background:white;border-radius:50%;top:3px;left:4px}
.smile{position:absolute;width:31px;height:15px;border-bottom:4px solid #34456e;border-radius:0 0 50% 50%;top:96px;left:68px;transform:rotate(-8deg)}
.sample{position:absolute;background:#121b36e8;border:1px solid #35436a;border-radius:15px;box-shadow:0 14px 40px #0003;backdrop-filter:blur(12px)}
.sample-one{left:7%;top:90px;padding:20px;display:flex;align-items:center;gap:14px;transform:rotate(-9deg);font-size:13px;line-height:1.5;color:#a7b6d5}
.sample-one b{color:var(--ink)}.sample-icon{font-size:32px;color:var(--pink)}
.sample-two{right:7%;top:180px;padding:18px 22px;transform:rotate(7deg)}
.tiny-label{display:block;color:#8f9cbb;letter-spacing:1.3px;font-size:8px}
.sample-two strong{font-size:15px;display:block;margin:5px 0 13px}
.color-dots{display:flex;gap:6px}.color-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent)}.color-dots i:nth-child(2){background:#bfa5ff}.color-dots i:nth-child(3){background:var(--pink)}
.arena-caption{position:absolute;bottom:19px;left:24px;right:24px;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#91a2c7;pointer-events:none;z-index:3}
.coordinate{font:10px/1.6 ui-monospace,monospace;letter-spacing:1px}
#pointer{position:absolute;left:0;top:0;display:none;z-index:4;width:38px;height:46px;pointer-events:none;filter:drop-shadow(0 3px 4px #0007);will-change:transform}
#pointer svg{width:100%;height:100%;display:block}
.arena.is-active #pointer{display:block}
.underbar{padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line)}
.underbar p{font-size:11px;color:#8f9cbb;margin:0;max-width:600px}
.clear{border:0;background:transparent;color:#b6c5e4;font-size:12px;white-space:nowrap;cursor:pointer;min-height:38px}
.clear:hover{color:white}
.outro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 48px;color:var(--muted);font-size:14px}
.outro p a{color:var(--accent)}.cta{background:#a3ddfa;color:#0b1730;padding:13px 19px;border-radius:12px;font-size:13px;font-weight:700;white-space:nowrap}
.cta:hover{background:#c6ecff;text-decoration:none}
footer{border-top:1px solid var(--line);padding:23px 0 32px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8594b7}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:15px;top:-80px;padding:12px;background:var(--accent);color:var(--bg);z-index:10}
.skip:focus{top:15px}.no-script{text-align:center;padding:24px}
@media(max-width:760px){
 .shell{padding:0 22px}header{height:80px}.slash{display:none}.intro{padding-top:35px}
 .toolbar{align-items:flex-start;flex-direction:column;gap:9px;padding:13px}
 .theme{padding:8px 10px}.themes{gap:1px}.trail-control{padding:0 9px}
 .arena{height:380px}.sample-one{left:5%;top:48px;padding:12px;font-size:11px;gap:9px}
 .sample-icon{font-size:24px}.sample-two{right:6%;top:252px;padding:12px 17px}
 .mascot{transform:scale(.9) rotate(-8deg)}.coordinate{display:none}
 .underbar{padding:10px 14px;gap:10px;align-items:flex-start}.underbar p{max-width:230px}
 .outro{flex-direction:column;align-items:flex-start;gap:9px;padding:20px 0 34px}
 footer{flex-direction:column;gap:5px}.eyebrow{font-size:8px;letter-spacing:1.4px}
}
@media(prefers-reduced-motion:reduce){.scene{transition:none;transform:none}.pupil{transform:none}.orb{display:none}}