:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--bg:#faf6f0;--surface:#fff;--surface-blur:#ffffffe0;--border:#e6dfd2;--text:#1f1c18;--text-muted:#6b6357;--text-subtle:#9c9489;--brand:#b87a5c;--brand-text:#fdf6ee;--record:#a85e6c;--record-text:#fdf2f4;font:16px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root[data-theme=scriabin-dark],:root[data-theme=mono-dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--bg);min-height:100svh;margin:0;transition:background-color .2s}#root{flex-direction:column;min-height:100svh;display:flex}h1{margin:0;font-weight:700}button{font-family:inherit}.app{min-height:100svh;color:var(--text);flex-direction:column;display:flex;position:relative}.brand{letter-spacing:-.01em;color:var(--text);z-index:5;pointer-events:none;margin:0;font-size:20px;font-weight:600;position:absolute;top:16px;left:20px}.corner-actions{z-index:5;gap:6px;display:flex;position:absolute;top:12px;right:14px}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;text-decoration:none;transition:color .2s,transform 80ms,background .2s;display:inline-flex}.icon-btn:hover{color:var(--text);background:var(--surface);transform:translateY(-1px)}.swatch{border:1px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex;position:relative}.swatch-core{border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 1px #0000002e}.main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:16px 20px 24px;display:flex}.circle-wrap{aspect-ratio:1;width:min(64vh,90vw,540px);position:relative}.hub{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:0 6%;display:flex;position:absolute;inset:0}.hub>*{pointer-events:auto}.mode-toggle{background:var(--surface-blur);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.mode-btn{color:var(--text-muted);cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-radius:999px;padding:8px 20px;font-size:14px;font-weight:600;transition:background .16s,color .16s}.mode-btn:hover{color:var(--text)}.mode-btn.on{background:color-mix(in srgb, var(--brand) 22%, transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent)}.record-toggle{background:var(--surface-blur);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:.02em;border-radius:999px;align-items:center;gap:8px;padding:7px 16px 7px 14px;font-size:13px;font-weight:600;transition:color .16s,background .16s,border-color .16s;display:inline-flex}.record-toggle:hover{color:var(--text)}.record-toggle.on{color:var(--text);border-color:color-mix(in srgb, var(--record) 55%, var(--border));background:color-mix(in srgb, var(--record) 14%, var(--surface))}.record-toggle-dot{border:1.5px solid var(--text-subtle);box-sizing:border-box;border-radius:50%;width:9px;height:9px;transition:background .16s,border-color .16s}.record-toggle.on .record-toggle-dot{background:var(--record);border-color:#0000;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.btn{cursor:pointer;letter-spacing:.02em;border:1px solid #0000;border-radius:999px;min-width:200px;padding:20px 52px;font-size:22px;font-weight:700;transition:transform 80ms,box-shadow .2s,border-color .2s,background .2s}.btn.start{background:var(--brand);color:var(--brand-text)}.btn.record{background:var(--record);color:var(--record-text)}.btn.stop,.btn.cancel{background:var(--surface);color:var(--text);border-color:var(--border)}.btn .rec-dot{background:var(--record);vertical-align:middle;border-radius:50%;width:9px;height:9px;margin-right:8px;animation:1.2s ease-in-out infinite pulse;display:inline-block}.btn:hover{box-shadow:0 6px 20px color-mix(in srgb, var(--brand) 25%, transparent);transform:translateY(-1px)}.btn:focus-visible,.icon-btn:focus-visible,.mode-btn:focus-visible,.record-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.timer{color:var(--text-muted);font-variant-numeric:tabular-nums;background:var(--surface-blur);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:13px;font-weight:600;display:inline-flex}.timer.subtle{color:var(--text-subtle)}.timer.playback{color:var(--text);border-color:color-mix(in srgb, var(--brand) 40%, var(--border))}.play-icon{border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--brand);width:0;height:0;display:inline-block}.readout{background:0 0;border:none;grid-template-columns:repeat(5,max-content);justify-content:center;align-items:baseline;gap:4px 18px;width:min(540px,92vw);padding:0;display:grid}.readout-row{align-items:baseline;gap:6px;padding:0;display:inline-flex}.readout-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle);white-space:nowrap;font-size:10px;font-weight:500}.readout-value{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-text-fill-color:var(--text);text-align:left;background:0 0;font-size:13px;font-weight:600;display:inline-block}.readout-value.v-note{width:4ch}.readout-value.v-freq{width:9ch}.readout-value.v-cents{width:4ch}.readout-value.v-fifth{width:3ch}.readout-value.v-note small{color:var(--text-subtle);-webkit-text-fill-color:var(--text-subtle);margin-left:1px;font-size:10px;font-weight:500}.error{color:#ff8a8a;background:color-mix(in srgb, #f57 18%, var(--surface));border:1px solid color-mix(in srgb, #f57 35%, var(--border));border-radius:8px;padding:8px 12px;font-size:13px}.rec-strip{-webkit-overflow-scrolling:touch;flex-direction:column;gap:6px;width:min(540px,92vw);max-height:280px;padding:2px;display:flex;overflow-y:auto}.rec-strip::-webkit-scrollbar{width:6px}.rec-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.rec-strip::-webkit-scrollbar-track{background:0 0}.rec-empty{text-align:center;width:min(540px,92vw);color:var(--text-subtle);padding:4px 12px;font-size:12px;line-height:1.5}.rec-empty strong{color:var(--text-muted);font-weight:600}.rec-card{box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:10px;grid-template-columns:30px minmax(0,1fr) auto 26px;align-items:center;gap:10px;width:100%;padding:6px 10px;transition:border-color .16s;display:grid}.rec-card.playing{border-color:color-mix(in srgb, var(--brand) 60%, var(--border));box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent)}.rec-card-play{background:var(--brand);width:30px;height:30px;color:var(--brand-text);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:transform 80ms;display:inline-flex}.rec-card.playing .rec-card-play{background:var(--surface);color:var(--text);border:1px solid var(--border)}.rec-card-play:hover{transform:scale(1.06)}.rec-card-name,.rec-card-rename{box-sizing:border-box;width:100%;min-width:0;height:28px;color:var(--text);text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;outline:none;padding:2px 8px;font-family:inherit;font-size:14px;font-weight:600}.rec-card-name{cursor:text;white-space:nowrap;text-overflow:ellipsis;margin-left:-8px;overflow:hidden}.rec-card-name:hover{color:var(--brand)}.rec-card-rename{background:var(--bg);border-color:var(--brand);margin-left:-8px}.rec-card-dur{color:var(--text-subtle);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.rec-card-del{width:26px;height:26px;color:var(--text-subtle);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:color .16s,background .16s,transform .12s;display:inline-flex}.rec-card-del:hover{color:var(--record);background:color-mix(in srgb, var(--record) 14%, transparent)}.rec-card-del.armed{background:var(--record);color:var(--record-text);animation:1.2s ease-in-out infinite armedPulse;transform:scale(1.08)}@keyframes armedPulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--record) 60%, transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--record) 0%, transparent)}}@media (width<=540px){.main{gap:10px;padding:10px 12px 20px}.readout{gap:2px 14px}.readout-label{font-size:9px}.readout-value{font-size:12px}.mode-btn{padding:6px 12px;font-size:11px}.record-toggle{padding:5px 12px 5px 10px;font-size:11px}.btn{min-width:170px;padding:16px 40px;font-size:18px}}@media (width<=380px){.brand{font-size:19px;top:12px;left:14px}.corner-actions{top:10px;right:10px}}