:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#123744;background:#143c4b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible{outline:3px solid #e3a23d;outline-offset:4px}[hidden]{display:none!important}#scene{position:fixed;inset:0}#scene canvas{width:100%;height:100%;display:block}header{position:fixed;inset:18px 24px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2}header a,header button{background:#f4faf2ed;color:#163e49;border:1px solid #fff9;border-radius:30px;padding:10px 16px;text-decoration:none;font-size:13px;font-weight:750;box-shadow:0 4px 18px #092e3320}header small{margin-left:6px;opacity:.55}.brand{color:#f5fff7;text-align:center;font-size:10px;font-weight:800;letter-spacing:.2em;text-shadow:0 2px 6px #062b42}.brand span{display:block;font-size:20px;letter-spacing:.08em;margin-top:2px}#dashboard{position:fixed;top:82px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:30px;padding:14px 24px;border:1px solid #ffffff94;border-radius:18px;background:#f1f7eded;box-shadow:0 8px 30px #082d4022;z-index:2;max-width:calc(100% - 32px)}.label{display:block;font-size:9px;letter-spacing:.13em;color:#4b747a;font-weight:800;white-space:nowrap}#dashboard strong{display:block;font-size:23px;margin-top:3px;font-variant-numeric:tabular-nums}#dashboard>div:first-child{width:164px}.stat{text-align:center}.connection-meter{height:4px;background:#b7cdc8;border-radius:4px;margin-top:8px;overflow:hidden}.connection-meter i{display:block;height:100%;background:#27877f;width:85%;transition:width .2s}#connection{font-size:15px!important}#callout{position:fixed;top:170px;left:0;right:0;text-align:center;pointer-events:none;color:#fff;filter:drop-shadow(0 2px 5px #06212b);z-index:2}#callout strong{display:block;font-size:30px;letter-spacing:-.03em}#callout span{font-size:13px}#callout[data-grade="perfect"] strong{color:#d3ffbc}#callout[data-grade="miss"] strong{color:#ffe6b6}#rhythm{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(830px,calc(100% - 32px));z-index:2;background:#f3f8efef;border:1px solid #ffffffad;box-shadow:0 12px 40px #022d4144;border-radius:22px;padding:16px 22px 10px}.track-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;font-weight:800;color:#55787a}#track{height:76px;position:relative;overflow:hidden;margin:5px 0 10px}.track-line{position:absolute;top:37px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#81a7a3 18%,#81a7a3 85%,transparent);z-index:-1}.target{position:absolute;left:22%;top:9px;transform:translateX(-50%);width:58px;height:58px;border:3px solid #247d78;border-radius:50%;box-shadow:0 0 0 6px #247d7818}.target i{position:absolute;inset:8px;border:1px dashed #448e864f;border-radius:50%}.note{position:absolute;top:14px;width:48px;height:48px;margin-left:-24px;display:grid;place-items:center;background:#123e4c;color:#fff;border:2px solid #daf6e4;border-radius:50%;font-size:20px;font-weight:850;box-shadow:0 3px 7px #123e4c30;will-change:left}.note.space{font-size:10px;background:#ad6b32}.note.judged{opacity:0;transform:scale(1.4);transition:opacity .15s,transform .15s}#keypad{display:grid;grid-template-columns:repeat(4,1fr) 1.35fr;gap:9px}#keypad button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:50px;background:#fffdf6;border:1px solid #b9cdbe;border-bottom:3px solid #9ab7a8;border-radius:10px;color:#214f55;touch-action:manipulation}#keypad b{font-size:18px}#keypad span{font-size:10px;white-space:nowrap}#keypad button:last-child b{font-size:12px}#keypad button.pressed{background:#c9efce;border-color:#439a7a;transform:translateY(2px)}.help{text-align:center;font-size:11px;color:#627f7b;margin:9px 0 0}#countdown{position:fixed;inset:0;display:grid;place-items:center;color:#fff;font-size:110px;font-weight:900;pointer-events:none;text-shadow:0 7px 30px #063244;z-index:3}.overlay{position:fixed;inset:0;background:linear-gradient(105deg,#173f4a80,#09283735);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:5;padding:22px;overflow:auto}.sheet{width:min(550px,100%);padding:36px 42px;border-radius:26px;background:#f4f6eefa;box-shadow:0 25px 90px #08233355}.eyebrow{font-size:9px;letter-spacing:.15em;color:#537b78;font-weight:800}h1{font-size:54px;line-height:1.02;letter-spacing:-.055em;margin:18px 0}h2{font-size:38px;line-height:1.06;letter-spacing:-.035em;margin:18px 0}.sheet p{font-size:14px;line-height:1.6;color:#52716e}.instructions{margin:22px 0}.instructions>div{display:flex;gap:13px;align-items:center;margin:13px 0;font-size:13px}.instructions>div>b{font-size:11px;color:#6a9990;border:1px solid #bcd1c4;border-radius:50%;padding:7px}.primary{display:block;width:100%;min-height:52px;background:#206d61;color:#fff;border:0;border-radius:12px;font-weight:800;font-size:15px;margin:22px 0 12px}.sheet>a{display:block;text-align:center;font-size:12px;color:#35655f;padding:8px}.sheet #load-status{font-size:11px;text-align:center}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.results-grid>div{padding:16px;background:#e4ece0;border-radius:12px}.results-grid strong{display:block;font-size:29px}.results-grid span{font-size:11px;color:#55736c}.compact{max-width:420px}.overlay~#scene{pointer-events:none}@media(max-width:820px){header{inset:12px 16px auto}.brand span{font-size:16px}#dashboard{top:72px;gap:20px;padding:12px 18px}#dashboard>div:first-child{width:145px}#callout{top:162px}#keypad span{display:none}#rhythm{padding:13px 15px 9px}}@media(max-width:520px){header a,header button{font-size:11px;padding:10px 12px}header small,.brand{display:none}#dashboard{width:calc(100% - 24px);gap:12px;padding:11px 12px;justify-content:space-between}#dashboard>div:first-child{width:110px}.label{font-size:8px;letter-spacing:.05em}#dashboard strong{font-size:20px}#connection{font-size:12px!important}#callout{top:151px}#callout strong{font-size:25px}#rhythm{bottom:12px;width:calc(100% - 20px);padding:12px 10px 8px;border-radius:16px}.track-caption{font-size:8px;letter-spacing:.03em}#track{height:68px}#keypad{gap:6px}#keypad button{min-height:48px}.help{font-size:9px}.sheet{padding:26px 24px}h1{font-size:43px}.overlay{padding:14px}.sheet p{font-size:13px}.instructions{margin:16px 0}#countdown{font-size:85px}}@media(max-height:650px){.sheet{padding:20px 28px}h1{font-size:38px;margin:10px 0}.instructions{margin:12px 0}.sheet p{margin:8px 0}.primary{margin-top:14px}#dashboard{top:65px;padding:8px 16px}#callout{top:140px}#rhythm{bottom:8px}#track{height:60px}.help{display:none}}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 100px #e58b4100;transition:box-shadow .2s}body.misjump::after{box-shadow:inset 0 0 110px #e58b414d}.note.failed{opacity:.85;background:#a9553c;border-color:#ffcb9e;transform:scale(.92);font-size:29px}#callout[data-grade=miss] strong{color:#ffdb9d;font-size:34px}body.misjump #connection{color:#a34f31}@media(max-width:520px){#callout[data-grade=miss] strong{font-size:24px}}

#callout{padding:0 18px}#callout>span{display:block;max-width:560px;margin:3px auto 0;line-height:1.45}
#cue-verdict{display:inline-block;margin-top:10px;padding:7px 13px;border-radius:8px;background:#fff2dceF;border:1px solid #fff9;color:#763c29;font-size:10px;font-weight:850;letter-spacing:.09em;text-shadow:none}
#callout[data-grade=recovery] strong{color:#c5f5ec}
#keypad button.needed{border:2px solid #d18b35;box-shadow:0 0 0 3px #e7b96836;background:#fff0ce}
#keypad button.wrong-key{background:#f6dace;border-color:#b76144;color:#8d3b25}
#rhythm[data-grade=miss] .target{border-color:#b86b42;box-shadow:0 0 0 7px #b86b4222}
#rhythm[data-grade=recovery] .target,#rhythm[data-grade=perfect] .target{border-color:#278b68;box-shadow:0 0 0 8px #51b28325}
#impact-lens{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;overflow:hidden}
#impact-lens i{position:absolute;width:22px;height:35px;border-radius:48% 52% 55% 45%;border:1px solid #d5faff70;border-bottom:3px solid #e9ffffa6;background:linear-gradient(120deg,#d5f5ff40,#18516c0d 40%,#d5faff55);box-shadow:inset 2px 3px 6px #07394d33,0 2px 5px #07263b15;backdrop-filter:blur(2px);transform:translateY(var(--runoff,0px)) rotate(-15deg)}
#impact-lens i:nth-child(1){left:7%;top:39%;width:28px;height:43px}#impact-lens i:nth-child(2){left:16%;top:57%;width:15px;height:24px}#impact-lens i:nth-child(3){left:27%;top:31%;width:10px;height:15px}#impact-lens i:nth-child(4){right:9%;top:44%;width:31px;height:47px}#impact-lens i:nth-child(5){right:21%;top:61%;width:17px;height:29px}#impact-lens i:nth-child(6){right:31%;top:35%;width:12px;height:18px}#impact-lens i:nth-child(7){left:3%;top:68%;width:11px;height:17px}#impact-lens i:nth-child(8){right:4%;top:25%;width:14px;height:21px}
@media(max-width:520px){#callout>span{font-size:12px;max-width:330px}#cue-verdict{margin-top:7px;font-size:9px;padding:6px 10px}#callout[data-grade=recovery] strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){#impact-lens{display:none}.note.judged,body::after,.connection-meter i{transition:none}}