:root{--beat-bg:#0b1028;--beat-panel:#151d42;--beat-line:#34457e;--beat-text:#f2f5ff;--beat-muted:#aab6dc;--beat-cyan:#5ce1e6;--beat-pink:#ff78bd;--beat-yellow:#ffe38a}.beat-page{min-height:calc(100vh - 67px);padding:30px 16px 50px;background:radial-gradient(circle at 50% 0,#263d78 0,transparent 43%),linear-gradient(135deg,#0b1028,#17133d 58%,#101f3a);color:var(--beat-text);font-family:system-ui,sans-serif}.beat-page *{box-sizing:border-box}.beat-wrap{width:min(980px,100%);margin:auto}.beat-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.beat-eyebrow{color:var(--beat-yellow);font-size:10px;font-weight:900;letter-spacing:.2em}.beat-header h1{margin:5px 0;color:#fff;font-size:clamp(30px,7vw,48px);letter-spacing:.08em}.beat-header p{margin:0;color:var(--beat-muted);font-size:13px}.beat-back{margin-top:7px;color:#e7f5ff;font-size:12px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.beat-layout{display:grid;grid-template-columns:minmax(300px,700px) 220px;gap:18px;align-items:start}.beat-play,.beat-panel{border:1px solid var(--beat-line);border-radius:8px;background:#111936e8;box-shadow:0 18px 55px #05091888}.beat-play{padding:clamp(12px,3vw,24px)}.beat-score-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}.beat-score-row div{padding:8px;border-radius:8px;background:#0b1028;text-align:center}.beat-score-row span{display:block;color:var(--beat-muted);font-size:10px}.beat-score-row strong{display:block;margin-top:2px;color:var(--beat-yellow);font-size:22px}.beat-intro{margin-bottom:13px;padding:11px 13px;border:1px solid #3e5d9a;border-radius:8px;background:#17254b;color:#dce8ff;font-size:12px}.beat-intro strong{color:var(--beat-cyan)}.beat-intro ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 0;padding:0;list-style-position:inside}.beat-intro p{margin:8px 0 0;color:var(--beat-muted);font-size:11px}.beat-stage-wrap{position:relative;width:min(100%,620px);margin:auto;padding:9px;border:1px solid #4668a7;border-radius:8px;background:#080d20;box-shadow:inset 0 0 26px #02040d}.beat-stage{position:relative;height:480px;overflow:hidden;border:1px solid #263d72;border-radius:8px;background:linear-gradient(180deg,#121b3d,#0b1029)}.beat-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#8299d21a calc(25% - 1px),#8299d21a 25%);pointer-events:none}.beat-lane-labels{position:absolute;inset:0 0 auto;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);height:32px;border-bottom:1px solid #8399d233;color:#8fa6dc;font-size:11px;font-weight:900;text-align:center}.beat-lane-labels span{padding-top:8px}.beat-notes{position:absolute;inset:0;z-index:2}.beat-note-item{position:absolute;width:18%;height:18px;border-radius:8px;background:linear-gradient(90deg,var(--beat-cyan),#d9ffff);box-shadow:0 0 13px #5ce1e6aa,0 0 3px #fff;transform:translateY(-50%);transition:filter .1s}.beat-note-item::after{content:"";position:absolute;inset:4px;border-radius:8px;background:#fff9}.beat-hit-line{position:absolute;right:0;bottom:82px;left:0;z-index:3;height:4px;background:linear-gradient(90deg,transparent,var(--beat-pink),var(--beat-yellow),var(--beat-pink),transparent);box-shadow:0 0 17px #ff78bdcc;pointer-events:none}.beat-stage.hit-0 .beat-hit-line{background:linear-gradient(90deg,transparent,#5ce1e6,transparent)}.beat-stage.hit-1 .beat-hit-line{background:linear-gradient(90deg,transparent,#ff78bd,transparent)}.beat-judgement{position:absolute;right:0;bottom:101px;left:0;z-index:4;color:#fff;text-align:center;font-size:18px;font-weight:900;letter-spacing:.1em;text-shadow:0 0 12px #fff}.beat-judgement.pop{animation:beat-judgement .25s ease-out}@keyframes beat-judgement{from{transform:scale(1.35);opacity:1}to{transform:scale(1);opacity:.5}}.beat-overlay{position:absolute;inset:9px;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;background:#080d20e8;text-align:center}.beat-overlay[hidden]{display:none}.beat-overlay h2{margin:0;color:#fff;font-size:clamp(25px,7vw,39px)}.beat-overlay p{max-width:340px;margin:0;color:#d4defa;font-size:12px;line-height:1.8}.beat-button,.beat-lane-buttons button{min-height:39px;border:1px solid #4663a0;border-radius:8px;padding:8px 11px;background:#1d2a57;color:var(--beat-text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.beat-button:hover,.beat-button:focus-visible,.beat-lane-buttons button:hover,.beat-lane-buttons button:focus-visible{border-color:var(--beat-cyan);outline:2px solid #5ce1e655;outline-offset:2px}.beat-primary{border-color:var(--beat-yellow);background:var(--beat-yellow);color:#17152d}.beat-lane-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.beat-lane-buttons button{min-height:52px;border-color:#45629b;background:#172750;color:#dbe9ff;font-size:16px;box-shadow:inset 0 -4px #0a1026}.beat-lane-buttons button.pressed{transform:translateY(3px);background:#38628f;box-shadow:inset 0 -1px #0a1026}.beat-message{min-height:1.5em;margin:12px 0 0;color:#d4defa;font-size:11px;text-align:center}.beat-side{display:flex;flex-direction:column;gap:10px}.beat-panel{padding:13px}.beat-actions{display:grid;gap:8px}.beat-sound h2,.beat-help h2{margin:0 0 9px;color:var(--beat-muted);font-size:11px;letter-spacing:.13em}.beat-sound>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.beat-sound .beat-button{padding:6px 3px}.beat-sound label{display:grid;gap:4px;margin-top:10px;color:var(--beat-muted);font-size:11px}.beat-sound input{width:100%;accent-color:var(--beat-yellow)}.beat-help dl{display:grid;gap:6px;margin:0}.beat-help dl div{display:flex;justify-content:space-between;font-size:11px}.beat-help dt{color:var(--beat-cyan);font-weight:900}.beat-help dd{margin:0;color:var(--beat-muted)}.beat-help p{margin:10px 0 0;color:var(--beat-muted);font-size:10px;line-height:1.65}.beat-note{margin:14px 0 0;color:#8090bb;font-size:10px;text-align:center}@media(max-width:760px){.beat-page{padding:21px 10px 38px}.beat-header{margin-bottom:14px}.beat-layout{display:block}.beat-side{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.beat-sound,.beat-help{grid-column:1/-1}.beat-intro ol{grid-template-columns:1fr}.beat-stage{height:420px}}@media(max-width:420px){.beat-stage-wrap{padding:6px}.beat-overlay{inset:6px}.beat-stage{height:370px}.beat-score-row strong{font-size:18px}}
.beat-page section{margin-bottom:10px}