:root{color-scheme:dark;--bg: #121418;--elev: #1c2026;--elev-2: #262b32;--line: #3a414a;--text: #f6f1e8;--muted: #b7b0a4;--accent: #e0a15a;--accent-ink: #24180d;--danger: #e08a72;font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(900px 420px at 50% -80px,#3a3126 0%,transparent 60%),var(--bg)}button,input,select{font:inherit;color:inherit}button,.file{min-height:44px;min-width:44px;border:1px solid var(--line);background:var(--elev-2);border-radius:12px;padding:0 14px;cursor:pointer}button:hover{border-color:#6a6256}button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.45;cursor:default}input[type=number],input[type=text],input:not([type]),select{min-height:44px;width:100%;border-radius:12px;border:1px solid var(--line);background:#15181c;padding:0 12px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:44px;background:transparent;accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:#4a433a}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--accent);border:0}input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:#4a433a}input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--accent)}.page,.shell{width:min(680px,100%);margin:0 auto;padding:28px 16px 48px}.page h1{font-size:1.6rem;font-weight:650;letter-spacing:-.03em;margin:0 0 16px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.brand{margin:0;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:.78rem}.chips,.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.top .chips button{background:transparent}.face{background:linear-gradient(180deg,#242930,#1a1e24);border:1px solid #343b44;border-radius:28px;padding:18px 18px 16px;box-shadow:0 28px 70px #00000059}.compact{margin-top:12px}.compact .start{width:100%}.bpm-block{display:grid;justify-items:center}.bpm-readout{display:flex;align-items:baseline;justify-content:center;gap:8px}.bpm-readout input{width:5.4ch;border:0;background:transparent;font-size:clamp(4.4rem,18vw,6.4rem);font-weight:620;letter-spacing:-.04em;line-height:.9;text-align:right;font-variant-numeric:tabular-nums;padding:0;min-height:0}.bpm-readout span{color:var(--muted);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}.bpm-row{display:flex;align-items:center;gap:8px;width:min(100%,460px);margin-top:8px}.bpm-row button{width:44px;padding:0;font-size:1.3rem}.slider{flex:1;min-width:0}.unit-line{margin:8px 0 0;text-align:center;color:var(--text);letter-spacing:.04em}.practice-readout{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:8px 0 0;color:var(--muted);font-variant-numeric:tabular-nums}.unit-caption{color:var(--muted)}.beats{margin:8px 0 4px}.ring{width:92px;height:92px;display:block;margin:0 auto 8px}.ring circle{fill:none;stroke:var(--accent);stroke-width:2.4}.ring .track{stroke:#3d4650}.beat-row{display:grid;gap:8px}.beat{min-height:58px;border:1px solid var(--line);border-radius:14px;display:grid;align-content:center;justify-items:center;gap:1px;color:var(--muted);background:#15181c}.beat-num{font-size:1.15rem;font-variant-numeric:tabular-nums;line-height:1}.beat-mark{font-size:.68rem;letter-spacing:.06em;line-height:1}.beat.accent-strong{box-shadow:inset 0 3px 0 var(--accent);color:var(--text)}.beat.accent-quiet{border-style:dashed}.beat.accent-mute{opacity:.45;border-style:dotted}.beat.is-on{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:none}.sub-row{display:flex;justify-content:center;gap:8px;margin-top:10px;color:var(--muted)}.sub-row i{width:10px;height:10px;border-radius:99px;border:1px solid var(--muted);display:block}.sub-row i.is-on{background:var(--accent);border-color:var(--accent)}.prepare,.chord{text-align:center;margin:0 0 8px}.prepare{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.82rem}.chord{font-size:1.35rem}.transport{display:grid;gap:8px;margin-top:14px}.side{display:flex;gap:8px}.side>button{flex:1}.start{min-height:58px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:1.05rem;border:0;letter-spacing:.04em}.start:hover{filter:brightness(1.05)}.start.is-stop{background:var(--danger);color:#2a120e}.desk{margin-top:14px;display:grid;gap:10px}.sound-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sound-row .preview{grid-column:1 / -1;background:transparent}.volume-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.volume-row label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin:0;color:var(--muted)}.summary,.hint,.foot{color:var(--muted)}.summary{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:#1a1e24;border:1px solid var(--line)}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:16px;padding:4px;background:#171b20;border:1px solid var(--line);border-radius:16px}.tabs button{background:transparent;border-color:transparent}.tabs button[aria-selected=true]{background:var(--elev-2);color:var(--text)}.panel,.notice,.dialog{background:var(--elev);border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:12px}.panel label,.stack,.blocks li{display:grid;gap:6px;margin:8px 0}fieldset{border:1px solid var(--line);border-radius:16px;margin:12px 0;padding:4px 12px 12px}legend{padding:0 6px;color:var(--text)}.hint{font-size:.9rem;line-height:1.45}.accent-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px}.file input{display:none}.presets,.blocks{list-style:none;padding:0;margin:0}.presets li,.blocks li{padding:10px 0;border-bottom:1px solid var(--line)}.notice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-left:3px solid var(--accent)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;background:#08090bb8}dialog{color:inherit;border:0;padding:0;background:transparent;max-width:none}.dialog{position:relative;width:min(520px,100%);margin:0}.dialog h2{margin:0 0 8px;font-size:1.2rem}.foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:18px}.foot .quiet{background:transparent;border-color:transparent;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}a{color:var(--accent)}.is-focus .bpm-readout input{font-size:clamp(5.6rem,24vw,8rem)}.is-focus .desk,.is-focus .tabs,.is-focus .foot,.is-focus .summary{display:none}@media(max-width:719px){.shell,.page{padding-top:16px}.face{padding:14px 12px 12px;border-radius:22px}}@media(prefers-reduced-motion:reduce){.ring circle{stroke-dashoffset:0!important}.start:hover{filter:none}}