:root{color:#f4ead8;background:#070605;font-family:ui-sans-serif,system-ui,sans-serif;--a:#5cbf5a;--b:#e24b4b;--x:#3b7fe0;--y:#efd14a;--paper:#f1e2c4}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#070605;overflow:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--y);outline-offset:3px}a{color:var(--paper)}.sr-only,.a11y{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#app,.stage{position:fixed;inset:0}.stage{background:#070605}.arena-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.grain{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 28%,transparent 58%,#0005 100%)}.enter{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#0504036b;color:var(--paper);letter-spacing:.4em;text-transform:uppercase;font-size:11px}.enter .mark{display:grid;place-items:center;width:88px;height:88px;margin-bottom:18px;font-family:serif;font-size:48px;letter-spacing:0;border:1px solid #d7b56a88;background:#1a120ccc;box-shadow:0 0 40px #c4842a44}.enter[hidden]{display:none}.chrome{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;padding:14px 16px;pointer-events:none}.chrome>*{pointer-events:auto}.icon{width:40px;height:40px;border-radius:50%;background:#0006;border:1px solid #ffffff22;color:var(--paper);font-size:16px}.streak{margin-left:auto;font-size:13px;letter-spacing:.18em;color:#d7b56a;min-width:2ch;text-align:right}.lessons{position:absolute;top:62px;left:16px;z-index:6;width:min(240px,70vw);background:#120e0ad4;border:1px solid #d7b56a33;padding:10px;backdrop-filter:blur(10px);max-height:70vh;overflow:auto}.lessons[hidden]{display:none}.level-label{margin:10px 6px 6px;font-size:9px;letter-spacing:.16em;color:#d7b56a;text-transform:uppercase}.drill-choice{width:100%;display:flex;gap:8px;align-items:center;text-align:left;padding:8px;color:#f4ead8cc;font-size:13px}.drill-choice.selected{color:#fff;background:#d7b56a22}.drill-number{opacity:.45;font-size:11px}.xbox{position:absolute;left:50%;bottom:28px;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .35s ease,transform .35s ease}.xbox[data-visible=false]{opacity:0;transform:translate(-50%) translateY(18px);pointer-events:none}.xbox[data-visible=false].touchable{opacity:.55;pointer-events:auto;transform:translate(-50%)}.sequence{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:92vw}.sequence-step{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 8px;border-radius:999px;border:1px solid #fff2;background:#0007;color:#fff;font-weight:700;letter-spacing:.04em;opacity:.35;transition:opacity .2s,transform .2s,box-shadow .2s,border-color .2s}.sequence-step.next,.sequence-step.demo{opacity:1;transform:scale(1.08);box-shadow:0 0 18px #ffe08a88;border-color:#ffe08a}.sequence-step.complete{opacity:.7;border-color:#5cbf5a88}.sequence-arrow,.step-count,.step-label{display:none}.step-glyphs{display:flex;gap:4px;align-items:center}.plus{opacity:.5;padding:0 2px}.xbox-body{display:flex;flex-direction:column;gap:8px;align-items:center}.bumpers,.xbox-mid{display:flex;gap:10px;align-items:center}.xbox-mid{gap:22px}.pad-key,.xbox b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid #fff4;background:#111c;color:#fff;font-size:13px;font-weight:800;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}.xbox b.pressed,.pad-key.pressed,.xbox b.lit{transform:scale(1.08);box-shadow:0 0 16px currentColor;border-color:currentColor}.xbox .a,.glyph-a{color:var(--a);background:#5cbf5a22}.xbox .b,.glyph-b{color:var(--b);background:#e24b4b22}.xbox .x,.glyph-x{color:var(--x);background:#3b7fe022}.xbox .y,.glyph-y{color:var(--y);background:#efd14a22}.dpad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);place-items:center}.dpad [data-pad=D_UP]{grid-column:2;grid-row:1}.dpad [data-pad=D_LEFT]{grid-column:1;grid-row:2}.dpad [data-pad=D_RIGHT]{grid-column:3;grid-row:2}.dpad [data-pad=D_DOWN]{grid-column:2;grid-row:3}.dpad .pad-key,.dpad b{width:30px;height:30px;border-radius:6px;font-size:12px}.face{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);place-items:center}.face .y{grid-column:2;grid-row:1}.face .x{grid-column:1;grid-row:2}.face .b{grid-column:3;grid-row:2}.face .a{grid-column:2;grid-row:3}.sticks svg{width:84px;height:36px;opacity:.7}.stick-dot{fill:#fff}.meter{position:absolute;left:50%;bottom:8px;transform:translate(-50%);width:min(280px,60vw);height:4px;background:#fff2;z-index:4;border-radius:4px;overflow:hidden}#meter-fill{height:100%;width:0;background:#d7b56a}#meter-fill.full{background:#5cbf5a}#meter-zone{position:absolute;top:0;bottom:0;width:2px;background:#fff8}.feedback[data-status=success]~.xbox .sequence-step{border-color:#5cbf5a}.load-error{padding:48px;max-width:28rem;margin:10vh auto;color:var(--paper)}.arena-error{position:absolute;top:20%;left:50%;transform:translate(-50%);z-index:3;color:var(--paper);background:#0008;padding:12px 16px}dialog{border:1px solid #d7b56a44;background:#120e0af2;color:var(--paper);border-radius:16px;padding:22px;max-width:28rem;width:calc(100vw - 32px)}dialog::backdrop{background:#0008}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.primary-button{margin-top:12px;padding:10px 14px;background:#d7b56a;color:#1a120c;font-weight:700}.quiet-button{border:1px solid #fff3;padding:8px 12px;border-radius:10px}label{display:block;margin:10px 0;font-size:13px}input{width:100%;margin-top:4px;padding:8px;background:#0006;border:1px solid #fff2;color:inherit}.keyboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:12px 0}.keyboard-grid kbd{display:block;margin-top:4px;opacity:.6}.small{font-size:12px;opacity:.7}.css-arena{position:absolute;inset:18% 10%;border:1px solid #d7b56a33}.css-scene{position:relative;height:100%}.css-floor{position:absolute;inset:auto 10% 12%;height:8px;background:#5a4630}.css-fighter{position:absolute;bottom:18%;width:40px;height:90px;border-radius:20px;background:#c57a4a}.css-you{left:28%}.css-foe{right:28%;background:#7a88a4}.mobile-note{display:none;position:absolute;top:58px;left:0;right:0;z-index:4;text-align:center;font-size:11px;color:#f4ead899;pointer-events:none}.hit{position:fixed;bottom:0;width:12px;height:12px;opacity:.02;z-index:9}#watch.hit{left:0}#retry.hit{left:16px}#range.hit{left:32px}[data-pad=LS].hit{left:48px}[data-pad=RS].hit{left:64px}@media(max-width:720px){.xbox{bottom:16px}.xbox[data-visible=false]{opacity:.7;pointer-events:auto;transform:translate(-50%)}.pad-key,.xbox b{width:42px;height:42px}.face{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}.mobile-note{display:block}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}