:root{--bg:#14161b;--bg-deep:#0e1013;--bg-raised:#1b1e25;--line:#31353f;--ink:#f2f0e6;--dim:#9b9e94;--yellow:#ffd400;--red:#ff4245;--blue:#4da6ff;--font-px:"Press Start 2P", "DotGothic16", monospace;--font-dot:"DotGothic16", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;--font-body:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--bg);color:var(--ink);font-family:var(--font-body);touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-image:radial-gradient(#f2f0e60d 1px,#0000 1.5px);background-size:16px 16px;min-height:100dvh;line-height:1.75}.app{max-width:520px;min-height:100dvh;padding:28px 20px calc(36px + env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}.screen{flex-direction:column;flex:1;gap:18px;display:flex}.screen>*{animation:.32s ease-out backwards rise}.screen>:nth-child(2){animation-delay:45ms}.screen>:nth-child(3){animation-delay:90ms}.screen>:nth-child(4){animation-delay:.135s}.screen>:nth-child(5){animation-delay:.18s}.screen>:nth-child(n+6){animation-delay:.225s}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}h1,h2{font-family:var(--font-dot);margin:0;font-weight:400;line-height:1.4}h2{border-left:8px solid var(--yellow);padding-left:14px;font-size:1.45rem}p{margin:.4em 0}.note-dim{color:var(--dim);font-size:.88rem}.step-label{font-family:var(--font-px);color:var(--yellow);letter-spacing:.08em;margin:0;font-size:.68rem}.top-screen{text-align:center;justify-content:center}.app-tagline{font-family:var(--font-dot);color:var(--yellow);border:1px solid var(--yellow);align-self:center;margin:0;padding:4px 18px;font-size:.95rem}.app-title{color:var(--ink);text-shadow:5px 5px #ffd40038;letter-spacing:.02em;margin-bottom:4px;font-size:2.7rem}.time-note{font-family:var(--font-dot);color:var(--yellow);margin:.9em 0 .7em;font-size:1.1rem}.sound-note{color:var(--ink);background:#ffd40012;border:1px dashed #ffd40073;margin-bottom:0;padding:9px 14px;font-size:.9rem}.last-result{padding:12px 18px}.last-result p{margin:.15em 0}.last-result strong{font-family:var(--font-dot);color:var(--yellow);font-weight:400}.panel{background:var(--bg-raised);border:1px solid var(--line);text-align:left;padding:18px 20px}.panel>p:first-child{margin-top:0}.panel>p:last-child{margin-bottom:0}.panel strong{color:var(--yellow);font-weight:700}.caution{padding-top:0}.caution:before{content:"";background:repeating-linear-gradient(-45deg, var(--yellow) 0 10px, var(--bg-deep) 10px 20px);height:10px;margin:0 -20px 14px;display:block}.caution-title{font-family:var(--font-dot);color:var(--ink);margin-top:0;font-size:1.05rem}.caution p:not(.caution-title){color:var(--dim);font-size:.9rem}.step-list{margin:0;padding-left:1.5em}.step-list li{margin:.9em 0}.step-list li:first-child{margin-top:0}.step-list li::marker{font-family:var(--font-px);color:var(--yellow);font-size:.7rem}.step-list strong{font-family:var(--font-dot);color:var(--yellow);font-weight:400}button{cursor:pointer;font-family:inherit;font-size:1rem}.btn-primary,.btn-ghost{font-family:var(--font-dot);letter-spacing:.1em;border-radius:0;padding:13px 30px;font-size:1.1rem;transition:transform 80ms,box-shadow 80ms}.btn-primary{background:var(--yellow);color:#15130a;border:2px solid #15130a;box-shadow:5px 5px #000}.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px #000}.btn-primary:active{transform:translate(3px,3px);box-shadow:1px 1px #000}.btn-ghost{border:2px solid var(--line);color:var(--ink);background:0 0;box-shadow:4px 4px #0000008c}.btn-ghost:hover{border-color:var(--ink)}.btn-ghost:active{transform:translate(2px,2px);box-shadow:0 0 #0000}.btn-small{padding:5px 14px;font-size:.85rem;box-shadow:3px 3px #0000008c}.btn-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.btn-row .btn-primary{flex:1}.screen>.btn-primary{align-self:center;min-width:240px}button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.device-cards{gap:14px;display:flex}.device-card{background:var(--bg-raised);border:2px solid var(--line);color:var(--dim);font-family:var(--font-dot);flex-direction:column;flex:1;align-items:center;gap:6px;padding:20px 10px;font-size:1rem;transition:border-color .1s;display:flex}.device-card.selected{border-color:var(--yellow);color:var(--ink);background:linear-gradient(#ffd40012, #ffd40012), var(--bg-raised);box-shadow:4px 4px #000}.device-icon{font-size:1.8rem}.input-test{text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none}.react-count{font-family:var(--font-dot);color:var(--dim);margin-bottom:0;font-size:1.25rem}.react-count.reacted{color:var(--yellow)}.test-screen{-webkit-user-select:none;user-select:none}.test-header{justify-content:space-between;align-items:center;display:flex}.test-header .step-label{font-family:var(--font-dot);font-size:1.1rem}.lane-wrap{position:relative}.lane-countdown{pointer-events:none;will-change:transform;justify-content:center;align-items:center;font-size:2.6rem;display:flex;position:absolute;inset:0}.note-lane{background:var(--bg-deep);border:2px solid var(--line);will-change:transform;width:100%;height:min(56vh,480px);display:block}.test-footer{flex-direction:column;align-items:center;gap:8px;display:flex}.progress{font-family:var(--font-px);color:var(--yellow);margin:0;font-size:1.3rem}.tap-hint{color:var(--dim);font-family:var(--font-dot);font-size:.95rem;animation:1s step-end infinite blink}@keyframes blink{0%,59%{opacity:1}60%,to{opacity:0}}.tap-hint-static{text-align:center;color:var(--dim);margin:0;font-size:.9rem}.rhythm-stage{border:2px solid var(--line);background:var(--bg-deep);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;min-height:300px;display:flex}.rhythm-message{font-family:var(--font-dot);margin:0;font-size:1.35rem}.beat-heart{background:var(--yellow);border-radius:50%;width:120px;height:120px;animation:.4s ease-out both beat-pop;box-shadow:0 0 0 8px #ffd4002e,0 0 40px #ffd40059}@keyframes beat-pop{0%{transform:scale(1.35);box-shadow:0 0 0 16px #ffd4004d,0 0 70px #ffd40099}45%{transform:scale(.97)}to{transform:scale(1);box-shadow:0 0 0 8px #ffd4002e,0 0 40px #ffd40059}}.countdown-label{font-family:var(--font-px);color:var(--ink);margin:0;font-size:2.2rem;animation:.35s ease-out both countdown-pop}@keyframes countdown-pop{0%{opacity:.3;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}.pulse{animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.result-screen{text-align:center}.result-lead{color:var(--dim);font-family:var(--font-dot);margin:0}.result-type{color:var(--yellow);text-shadow:4px 4px #000;margin-top:-8px;font-size:2.15rem}.score-cards{gap:14px;display:flex}.score-card{background:var(--bg-raised);border:2px solid var(--line);flex:1;padding:16px 10px 14px}.score-label{color:var(--dim);font-family:var(--font-dot);margin:0 0 8px;font-size:.85rem}.score-value{font-family:var(--font-px);color:var(--ink);margin:0;font-size:2rem;line-height:1}.score-value.win{color:var(--yellow)}.stat-row{border-bottom:1px dotted var(--line);justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;display:flex}.stat-row:last-child{border-bottom:none}.stat-row span:first-child{color:var(--dim);font-size:.9rem}.stat-row span:last-child{font-family:var(--font-px);font-size:.72rem}.metrics-detail .caution-title{margin-bottom:4px}.term-help{background:var(--bg-raised);border:1px solid var(--line);text-align:left}.term-help summary{font-family:var(--font-dot);cursor:pointer;-webkit-user-select:none;user-select:none;padding:13px 20px;font-size:1rem;list-style:none}.term-help summary::-webkit-details-marker{display:none}.term-help summary:before{content:"▶";color:var(--yellow);margin-right:10px;font-size:.7em;transition:transform .15s;display:inline-block}.term-help[open] summary:before{transform:rotate(90deg)}.term-help-body{margin:0;padding:0 20px 18px}.term-help-body dt{font-family:var(--font-dot);color:var(--yellow);margin-top:12px}.term-help-body dd{color:var(--dim);margin:4px 0 0;font-size:.9rem}.share-row{margin-top:4px}.result-screen>.btn-ghost{align-self:center}