:root{--bg: #0d1117;--panel: #161b22;--panel-2: #1c2230;--line: #2a3140;--text: #e6edf3;--dim: #8b98a9;--rec: #f4534d;--play: #35c07a;--count: #d3a13b;--accent: #4a8cff;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;-webkit-text-size-adjust:100%}.app{max-width:460px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.head h1{font-size:15px;font-weight:600;letter-spacing:.04em;margin:0}.head__meta{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.stage{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 16px 18px;text-align:center;transition:border-color .12s,background .12s}.stage[data-phase=record]{border-color:var(--rec);background:color-mix(in srgb,var(--rec) 10%,var(--panel))}.stage[data-phase=play]{border-color:var(--play);background:color-mix(in srgb,var(--play) 10%,var(--panel))}.stage[data-phase=countin]{border-color:var(--count)}.stage__phase{font-size:30px;font-weight:700;letter-spacing:.08em;line-height:1.1}.stage[data-phase=record] .stage__phase{color:var(--rec)}.stage[data-phase=play] .stage__phase{color:var(--play)}.stage[data-phase=countin] .stage__phase{color:var(--count)}.stage__pos{margin-top:6px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}.stage__beats{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}.beat{width:12px;height:12px;border-radius:50%;background:#333c4d;transition:transform .06s,background .06s}.beat[data-first=true]{box-shadow:inset 0 0 0 1.5px #55617a}.beat[data-on=true]{background:var(--text);transform:scale(1.35)}.transport{width:100%;padding:18px;font-size:18px;font-weight:700;letter-spacing:.08em;color:#06121f;background:var(--accent);border:none;border-radius:12px;cursor:pointer;touch-action:manipulation}.transport[data-running=true]{background:var(--rec);color:#fff}.transport:disabled{opacity:.5;cursor:default}.error{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--rec) 18%,var(--panel));border:1px solid var(--rec);font-size:12px;line-height:1.5}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.panel--details{display:block}.panel--details>summary{cursor:pointer;font-size:13px;color:var(--dim);list-style:none}.panel--details>summary:before{content:"▸ "}.panel--details[open]>summary:before{content:"▾ "}.panel--details[open]>summary{margin-bottom:10px}.panel--details>*:not(summary){margin-bottom:10px}.panel__head{display:flex;align-items:center;justify-content:space-between}.panel h2{font-size:13px;font-weight:600;margin:0}.dim{color:var(--dim);font-weight:400}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}.row label{font-size:13px;color:var(--dim);flex:none}.row--tempo label{font-size:13px}#settings[data-locked=true] .row,#settings[data-locked=true] .slider:not(#metronome-gain):not(#playback-gain){opacity:.45}#settings[data-locked=true] .row:has(#metronome-gain),#settings[data-locked=true] .row:has(#playback-gain){opacity:1}input[type=number],select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:15px;font-family:inherit;font-variant-numeric:tabular-nums}input[type=number]{width:72px;text-align:center}.stepper{display:flex;align-items:center;gap:6px}.stepper button{width:36px;height:34px;font-size:18px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;cursor:pointer;touch-action:manipulation}.stepper .unit{font-size:12px;color:var(--dim)}.meter-select{display:flex;align-items:center;gap:6px;color:var(--dim)}.slider{width:100%;accent-color:var(--accent)}.slider--inline{max-width:180px}.check{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:5px;cursor:pointer}.ghost{width:100%;padding:10px;font-size:13px;font-family:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:9px;cursor:pointer}.ghost:disabled{opacity:.5}.ghost--tap{padding:14px;font-size:15px;font-weight:700;letter-spacing:.12em;touch-action:manipulation;-webkit-user-select:none;user-select:none}.tap__hint{margin-left:8px;font-size:11px;font-weight:400;letter-spacing:0;color:var(--dim);font-variant-numeric:tabular-nums}.ghost--tap.is-tapped{animation:tap-pulse .18s ease-out}@keyframes tap-pulse{0%{background:var(--accent);border-color:var(--accent)}to{background:var(--panel-2);border-color:var(--line)}}@media(prefers-reduced-motion:reduce){.ghost--tap.is-tapped{animation:none}}.takes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.takes:empty:after{content:"（まだありません）";font-size:12px;color:var(--dim)}.take{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}.take[data-playing=true]{border-color:var(--play)}.take__play{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:13px;cursor:pointer}.take[data-playing=true] .take__play{color:var(--play);border-color:var(--play)}.take__label{flex:1;min-width:0;font-size:13px;font-variant-numeric:tabular-nums}.take__sub{display:block;font-size:11px;color:var(--dim)}.take__del{flex:none;background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:4px 6px}.meter{flex:1;height:8px;max-width:200px;background:var(--panel-2);border-radius:4px;overflow:hidden}.meter__bar{height:100%;width:0;background:var(--play);transition:width .05s linear}.note{margin:0;font-size:11.5px;line-height:1.6;color:var(--dim)}.note[data-tone=ok]{color:var(--play)}.note[data-tone=warn]{color:var(--count)}.note[data-tone=error]{color:var(--rec)}