:root{--bg:#120b1f;--bg-elev:#1c1230;--bg-stage:#0b0714;--text:#f3edff;--muted:#b3a6cc;--line:#2f2246;--accent:#ffc43d;--accent-ink:#2a1c00;--cyan:#66e3ff;--cut-sm:8px;--cut-md:14px;--cut-lg:22px;--ease:cubic-bezier(.2, .8, .2, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1);--ease-land:cubic-bezier(.2, 1.25, .35, 1);--dur-micro:.14s;--dur-state:.2s;--dur-pop:.34s;--dur-exit:.18s;--dur-section:.52s;--dur-hero:.7s;--stagger:60ms;--shadow-sm:0 2px 3px -1px #06020e80, 0 1px 0 0 #06020e40, 0 0 0 1px #2f2246e6;--shadow-lg:0 18px 38px #06020e8c;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--display:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--gutter:20px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fredoka-700-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@property --beam-angle{syntax:"<angle>";inherits:false;initial-value:0deg}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font:16px/1.55 var(--sans);-webkit-text-size-adjust:100%;margin:0}a{color:var(--cyan)}.mark-sprite{width:0;height:0;position:absolute;overflow:hidden}.app{max-width:880px;padding:28px var(--gutter) 48px;margin:0 auto}@media (min-width:720px){:root{--gutter:40px}}.mark{width:40px;height:40px;color:inherit;flex:none;display:block}.masthead{margin-bottom:22px}h1{font:700 clamp(30px, 6vw, 44px) / 1.05 var(--display);letter-spacing:-.01em;margin:0}h1 .word-mask{vertical-align:top;padding-bottom:.08em;display:inline-block;overflow:hidden}h1 .word{animation:word-rise var(--dur-hero) var(--ease) forwards;animation-delay:calc(var(--i) * 35ms);display:inline-block;transform:translateY(110%)}@keyframes word-rise{to{transform:translateY(0)}}.eyebrow{color:var(--muted);font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:8px 0 0}.lede{max-width:62ch;color:var(--muted);margin:12px 0 0;font-size:17px}h2{margin:0 0 12px;font-size:1.15rem}.controls{margin-bottom:16px}.buttons{flex-wrap:wrap;gap:10px;display:flex}.button{--cut:var(--cut-sm);-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:var(--bg-elev);min-height:44px;color:var(--text);font:600 16px/1 var(--sans);cursor:pointer;box-shadow:var(--shadow-sm);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);justify-content:center;align-items:center;padding:12px 20px;display:inline-flex}.button:hover:not(:disabled){border-color:var(--muted);background:#241640}.button:active:not(:disabled){transform:translateY(1px)}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}.button.primary:hover:not(:disabled){background:#ffd167;border-color:#ffd167}.button:disabled,.button.primary:disabled{background:var(--bg-elev);border-color:var(--line);color:var(--muted);box-shadow:none;opacity:.7;cursor:not-allowed}.button.is-idle-hidden{display:none}.status{min-height:1.5em;color:var(--muted);margin:12px 0 0}.arena{--cut:var(--cut-lg);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));filter:drop-shadow(var(--shadow-lg));transition:background var(--dur-state) var(--ease);background:linear-gradient(150deg,#ffc43dd9,#ffc43d4d 46%,#ffc43d8c);padding:1px;position:relative}.arena:has(.stage.running){background:linear-gradient(150deg, var(--accent), #ffc43d9e 46%, #ffc43dd9)}.stage{aspect-ratio:4/3;background:radial-gradient(120% 60% at 50% 104%, #ffc43d21, transparent 64%), var(--bg-stage);width:100%;max-height:min(60vh,520px);clip-path:inherit;margin-inline-start:auto;margin-inline-end:auto;position:relative;overflow:hidden;container-type:size}.stage:before{content:"";z-index:0;pointer-events:none;--b:linear-gradient(var(--accent), var(--accent));background:var(--b) left 0 top 0 / 22px 2px no-repeat, var(--b) left 0 top 0 / 2px 22px no-repeat, var(--b) right 0 top 0 / 22px 2px no-repeat, var(--b) right 0 top 0 / 2px 22px no-repeat, var(--b) left 0 bottom 0 / 22px 2px no-repeat, var(--b) left 0 bottom 0 / 2px 22px no-repeat, var(--b) right 0 bottom 0 / 22px 2px no-repeat, var(--b) right 0 bottom 0 / 2px 22px no-repeat;opacity:.4;position:absolute;top:14px;bottom:14px;left:14px;right:14px}.stage:after{content:"";z-index:0;pointer-events:none;background:linear-gradient(90deg,#0000,#ffc43d47 18% 82%,#0000);height:1px;position:absolute;bottom:16%;left:0;right:0}.stage:before,.stage:after{transition:opacity var(--dur-state) var(--ease)}.stage.running:before{opacity:.22}.stage.running:after{opacity:0}.stage video,.stage canvas{object-fit:contain;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.stage.camera video,.stage.camera canvas{transform:scaleX(-1)}.stage video{display:none}.stage.camera video{display:block}.placeholder{text-align:center;color:var(--muted);align-content:center;justify-items:center;gap:clamp(14px,4cqh,28px);padding:16px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.triptych{gap:clamp(18px,8cqw,56px);margin:0;padding:0;list-style:none;display:flex}.triptych li{color:var(--accent);justify-items:center;gap:10px;display:grid}.triptych .mark{width:clamp(34px,13cqh,56px);height:clamp(34px,13cqh,56px)}.triptych span{font:700 clamp(12px, 3cqh, 15px) / 1 var(--display);color:var(--text)}.placeholder p{max-width:34ch;margin:0;font-size:14px}.demo-caption{--cut:6px;color:var(--text);font:400 12px/1.4 var(--mono);letter-spacing:.04em;clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));background:#0b0714db;border:1px solid #ffc43d47;padding:5px 11px;position:absolute;top:14px;left:14px}.emote{pointer-events:none;align-content:center;justify-items:center;gap:10px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.emote-plate{background:linear-gradient(#2a1c44,#1a1030 52%,#120b1f) padding-box padding-box,linear-gradient(#ffe096d9,#ffc43d47 45%,#140c22e6) border-box;border:1px solid #0000;border-radius:20px;padding:clamp(10px,3cqw,18px);position:relative;box-shadow:0 18px 34px #06020e8c,0 5px 12px #06020e66,inset 0 1px #ffe9b280,inset 0 -1px #0a0612b3}.emote-plate:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffe9b224,#0000);height:35%;position:absolute;top:1px;bottom:auto;left:1px;right:1px}.emote img{width:min(clamp(110px,32vw,220px),44cqh);height:auto;display:block}.emote span{font:700 clamp(15px, 4cqw, 20px) / 1.1 var(--display);color:var(--accent);text-shadow:0 1px #0a0612b3}.emote.pop{animation:land var(--dur-pop) var(--ease-land) both}.emote.pop .emote-plate{animation:plate var(--dur-pop) var(--ease-land) both}@keyframes land{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.emote.leaving{animation:emote-leave var(--dur-exit) var(--ease-exit) both}@keyframes emote-leave{0%{opacity:1}to{opacity:0}}@keyframes plate{0%{transform:scale(.92)}to{transform:scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.hud{transition:transform var(--dur-state) var(--ease);background:linear-gradient(#0b071400,#0b0714db 40%);border-top:1px solid #ffc43d38;justify-content:center;align-items:flex-end;gap:clamp(16px,6cqw,48px);padding:12px clamp(10px,3cqw,22px) 10px;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(101%)}.stage.running .hud{transform:translateY(0)}.hud-cell{justify-items:center;gap:6px;display:grid}.hud-mark{width:40px;height:40px;color:var(--muted);transition:color var(--dur-state) var(--ease);display:block;position:relative}.hud-mark .mark{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.hud-fill{--fill:0;color:var(--accent);clip-path:inset(calc(100% - var(--fill) * 100%) 0 0 0);transition:clip-path .12s linear;position:absolute;top:0;bottom:0;left:0;right:0}.hud-cell.is-active .hud-mark,.hud-cell.is-almost .hud-mark{color:var(--accent)}.hud-label{font:700 11px/1 var(--display);letter-spacing:.01em;color:var(--muted)}.hud-cell.is-active .hud-label{color:var(--accent)}.hud-cell.is-almost .hud-mark:after{content:"";background:conic-gradient(from var(--beam-angle,0deg), transparent 0deg, #ffc43df2 44deg, transparent 100deg);-webkit-mask-composite:xor;opacity:.6;pointer-events:none;border-radius:10px;padding:1px;animation:3.2s linear infinite beam;position:absolute;top:-7px;bottom:-7px;left:-7px;right:-7px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude}@keyframes beam{to{--beam-angle:360deg}}@media (max-width:560px){.buttons{gap:8px}.button{padding:12px 13px;font-size:15px}.triptych{gap:12px}.triptych span{font-size:11px}.hud{gap:clamp(18px,10cqw,40px)}.hud-mark{width:28px;height:28px}.hud-label{display:none}}.gestures,.how{margin-top:36px}.gesture-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.gesture-list li{--cut:var(--cut-md);border:1px solid var(--line);background:var(--bg-elev);color:var(--muted);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));transition:border-color var(--dur-state) var(--ease);grid-template-columns:auto 40px 1fr;align-items:center;gap:14px;padding:14px 16px;display:grid}.gesture-list .num{font:400 12px/1 var(--mono);letter-spacing:.06em;color:#8f7fb4}.gesture-body strong{font:700 17px/1.2 var(--display);color:var(--text);display:block}.hint{color:var(--muted);margin-top:2px;font-size:14px;display:block}.gesture-list li.almost{border-color:var(--accent)}.gesture-list li.almost .hint{color:var(--accent)}.value,.bar{display:none}.gesture-list.is-live li{grid-template-columns:auto 40px 1fr auto;grid-template-areas:"num mark body value""bar bar bar bar"}.gesture-list.is-live .num{grid-area:num}.gesture-list.is-live .mark{grid-area:mark}.gesture-list.is-live .gesture-body{grid-area:body}.gesture-list.is-live .value{font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);grid-area:value;display:block}.gesture-list.is-live .bar{background:var(--line);grid-area:bar;height:6px;margin-top:4px;display:block;position:relative;overflow:hidden}.fill{transform-origin:0;background:var(--muted);width:100%;height:100%;transition:transform .12s linear;transform:scaleX(0)}.bar.active .fill{background:var(--accent)}.note{color:var(--muted);margin:14px 0 0;font-size:14px}.how-steps{color:var(--muted);margin:0 0 18px;padding-left:22px}.how-steps li+li{margin-top:8px}.how-grid{columns:2;column-gap:12px}@media (max-width:620px){.how-grid{columns:1}}.how-grid article{break-inside:avoid;--cut:var(--cut-md);border:1px solid var(--line);background:var(--bg-elev);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));margin-bottom:12px;padding:14px 16px}.how-grid h3{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0 0 6px}.how-grid p{color:var(--muted);margin:0;font-size:14px}.timings{border-top:1px solid var(--line);gap:0;margin:18px 0;display:grid}.timings>div{border-bottom:1px solid var(--line);grid-template-columns:minmax(120px,30%) 1fr;gap:12px;padding:9px 2px;display:grid}.timings dt{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.timings dd{font:400 13px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--text);margin:0}@media (max-width:560px){.timings>div{grid-template-columns:1fr;gap:2px}}.how>p:last-of-type{color:var(--muted);font-size:14px}.footer{border-top:1px solid var(--line);color:var(--muted);margin-top:36px;padding-top:18px;font-size:13px}html.reveal-ready [data-reveal]{opacity:0;transition:opacity var(--dur-section) var(--ease), transform var(--dur-section) var(--ease);transition-delay:calc(var(--i,0) * var(--stagger));transform:translateY(16px)}html.reveal-ready [data-reveal].is-in{opacity:1;transform:none}.hidden{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{z-index:10;border:1px solid var(--cyan);background:var(--bg-elev);color:var(--cyan);transition:transform var(--dur-state) var(--ease);padding:12px 18px;font-weight:700;text-decoration:none;position:absolute;top:16px;left:16px;transform:translateY(-96px)}.skip-link:focus-visible{transform:translateY(0)}:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.button:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}.button.primary:focus-visible{outline-color:var(--accent-ink)}@media (prefers-reduced-motion:reduce){h1 .word{animation:none;transform:none}[data-reveal],html.reveal-ready [data-reveal]{opacity:1;transition:none;transform:none}.hud,.arena,.stage:before,.stage:after,.hud-fill,.fill,.hud-mark{transition:none}.hud-cell.is-almost .hud-mark:after{border:1px solid var(--accent);opacity:1;background:0 0;animation:none;-webkit-mask-image:none;mask-image:none}.emote.pop{animation:.12s linear both fade-in}.emote.leaving{animation:.12s linear both emote-leave}.emote.pop .emote-plate{animation:none}.button{transition:background var(--dur-micro) linear, border-color var(--dur-micro) linear}.button:active:not(:disabled){transform:none}.skip-link{transition:none}.hud-mark,.arena,.button{transition-duration:0s}}