:root{--bg:#101418;--panel:#1a2027;--text:#e8edf2;--muted:#8a96a3;--accent:#4fa3ff;--graph-bg:#0c1014;--grid:#1c232b;--grid-strong:#33404d;--now:#fff5;--target:#4fa3ff66;--target-listen:#8a96a333;--voice:#c9d4df;--hit:#3ddc84;--miss:#ff9f43;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif}main{max-width:640px;padding:12px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;margin:0 auto;display:flex}header{justify-content:space-between;align-items:baseline;display:flex}h1{letter-spacing:.02em;margin:0;font-size:18px}.muted{color:var(--muted)}.small{font-size:12px}#readout{text-align:center}#note{font-variant-numeric:tabular-nums;font-size:56px;font-weight:700;line-height:1}#solfege{margin-top:2px;font-size:16px}#cents{font-variant-numeric:tabular-nums;font-size:13px}.needle-track{background:var(--panel);border-radius:5px;width:min(100%,320px);height:10px;margin:10px auto 4px;position:relative}.needle-zone{background:#3ddc8422;border-radius:5px;width:25%;position:absolute;top:0;bottom:0;left:37.5%}#needle{background:var(--voice);border-radius:2px;width:4px;height:18px;margin-left:-2px;transition:left 60ms linear;position:absolute;top:-4px;left:50%}#needle[data-state=hit]{background:var(--hit)}#needle[data-state=miss]{background:var(--miss)}#graph{border-radius:10px;width:100%;height:42vh;min-height:220px;display:block}#phase{text-align:center;min-height:1.4em;color:var(--accent);font-weight:600}#actions{gap:10px;display:flex}button,label.button{text-align:center;cursor:pointer;font:inherit;border:1px solid var(--grid-strong);background:var(--panel);color:var(--text);border-radius:12px;flex:1;padding:14px;font-size:17px;font-weight:600}button.primary{background:var(--accent);border-color:var(--accent);color:#06121f}button:disabled{opacity:.4}#result{background:var(--panel);border-radius:12px;padding:14px 16px}.score{text-align:center;font-size:44px;font-weight:700}.score small{color:var(--muted);margin-left:4px;font-size:16px}#result ul{margin:8px 0 0;padding:0;list-style:none}#result li{border-top:1px solid var(--grid-strong);grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;display:grid}#result li small{color:var(--muted);grid-column:1/-1}details{background:var(--panel);border-radius:12px;padding:10px 14px}summary{cursor:pointer;font-weight:600}details label{justify-content:space-between;align-items:center;gap:12px;margin-top:10px;display:flex}details label.check{justify-content:flex-start}select{font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--grid-strong);border-radius:8px;max-width:60%;padding:6px 8px}#modes{gap:8px;display:flex}#modes button{border-color:var(--grid-strong);color:var(--muted);background:0 0;padding:10px;font-size:15px}#modes button.on{background:var(--panel);color:var(--text);border-color:var(--accent)}#view-lesson,#view-song{flex-direction:column;gap:12px;display:flex}#song-pick{grid-template-columns:1fr auto;align-items:center;gap:8px 10px;display:grid}#song-pick select{max-width:100%}#song-pick #songmsg,#song-manage{grid-column:1/-1}#songsel{padding:12px 8px}#transport{flex-direction:column;gap:10px;display:flex}#seekwrap{align-items:center;height:22px;display:flex;position:relative}#loopbar{border:1px solid var(--accent);pointer-events:none;background:#4fa3ff55;border-radius:4px;height:8px;position:absolute;top:7px}#seek{width:100%;accent-color:var(--accent);background:0 0;margin:0}#times{font-variant-numeric:tabular-nums;justify-content:space-between;display:flex}.row{gap:8px;display:flex}.row button,.row label.button{padding:12px 8px;font-size:15px}#prevPhrase,#nextPhrase{flex:0 0 56px}#live{text-align:center;font-variant-numeric:tabular-nums;min-height:1.4em;font-weight:600}#song-result{background:var(--panel);border-radius:12px;padding:14px 16px}#song-result ul{margin:8px 0 0;padding:0;list-style:none}#song-result li{border-top:1px solid var(--grid-strong);grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;display:grid}#song-result li small{color:var(--muted);grid-column:1/-1}#song-result p{margin:12px 0 0}details input[type=range]{accent-color:var(--accent);flex:1}details output{text-align:right;font-variant-numeric:tabular-nums;min-width:4.5em;color:var(--muted)}details p{margin:6px 0 0}