:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f6f4ef;--card:#fff;--text:#1d1c1a;--muted:#66625a;--border:#e4e0d8;--subtle:#f1eee7;--field:#ece8e0;--accent:#c2521b;--accent-text:#fff;--accent-ink:#b4481a;--accent-soft:#fbefe8;--inverse:#1d1c1a;--inverse-text:#fff;--danger:#b42318;--recording:#b42318;--shadow:0 1px 2px #00000014;--segment-on:#fff;--strip-bg:#fff;--strip-bar:#d8d2c6;--strip-played:#a39b8c;--loop-fill:#c2521b2e;--roll-bg:#22211e;--roll-grid:#34322d;--left:#5b8def;--left-dark:#3f6fd0;--right:#f2a05b;--right-dark:#d9823a;--heard:#3dbe7a;--key-white:#f7f7f7;--key-black:#22211e;--key-edge:#c8c4bc}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#151412;--card:#1f1e1b;--text:#f1efea;--muted:#a9a397;--border:#34322d;--subtle:#2a2925;--field:#2a2925;--accent:#e0703a;--accent-text:#1d1c1a;--accent-ink:#f08a55;--accent-soft:#3a2418;--inverse:#f1efea;--inverse-text:#1d1c1a;--danger:#f97066;--shadow:0 1px 2px #0006;--segment-on:#46433c;--strip-bg:#1f1e1b;--strip-bar:#4a463e;--strip-played:#8a8376;--loop-fill:#e0703a38;--roll-bg:#0f0e0d;--roll-grid:#242320}}*{box-sizing:border-box}[hidden]{display:none!important}html{touch-action:manipulation;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.5 DM Sans,system-ui,-apple-system,sans-serif}main{max-width:760px;padding:max(16px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));margin:0 auto}h1,h2{letter-spacing:-.02em;margin:0}.muted{color:var(--muted)}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button{border:1px solid var(--border);background:var(--card);min-height:44px;color:var(--text);border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-weight:600;text-decoration:none;display:inline-flex}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button.inverse{background:var(--inverse);border-color:var(--inverse);color:var(--inverse-text);border-radius:22px}.button.pill{border-radius:20px;min-height:40px;padding:0 14px;font-size:.9rem}.button.small{min-height:36px;padding:0 12px;font-size:.9rem}.icon-button{background:0 0;border:0;border-radius:12px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.icon-button.small{width:36px;height:36px;color:var(--muted)}.text-button{background:0 0;border:0;min-height:44px;padding:0 4px;font-weight:600}.danger{color:var(--danger)}.home-header{flex-direction:column;gap:4px;margin:24px 0 22px;display:flex}.brand{color:var(--accent-ink);letter-spacing:.02em;font-size:.95rem;font-weight:700}.home-header h1{font-size:1.85rem;line-height:1.15}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.tile{border:1px solid var(--border);background:var(--card);text-align:left;cursor:pointer;border-radius:18px;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:12px;min-height:128px;padding:16px;display:flex}.tile svg{color:var(--accent-ink)}.tile strong{font-size:1.05rem;display:block}.tile small{color:var(--muted);font-size:.85rem;display:block}.tile.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.tile.primary svg,.tile.primary small{color:inherit}.tile.recording{background:var(--recording);border-color:var(--recording);color:#fff}.tile.disabled{opacity:.5;cursor:default}.hint{color:var(--muted);margin:10px 0 0;font-size:.9rem}.status{margin-top:16px}.status p{margin:0 0 8px}progress{width:100%;accent-color:var(--accent)}.resume{flex-direction:column;gap:12px;margin-top:22px;display:flex}.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:600}.resume-row{align-items:center;gap:12px;display:flex}.resume-text{flex:1;min-width:0}.resume-name{overflow-wrap:anywhere;font-size:1.15rem;font-weight:700}.strip{background:var(--strip-bg);border:1px solid var(--border);touch-action:none;cursor:pointer;border-radius:8px;width:100%;height:34px;display:block}.strip.small{background:var(--subtle);cursor:default;border:0;height:22px}#library{flex-direction:column;gap:10px;margin-top:26px;display:flex}#library h2{font-size:1.15rem}.search{background:var(--field);min-height:44px;color:var(--muted);border-radius:12px;align-items:center;gap:8px;padding:0 14px;display:flex}.search input{min-width:0;color:var(--text);background:0 0;border:0;outline:none;flex:1}.library{background:var(--card);border:1px solid var(--border);border-radius:16px;margin:0;padding:0;list-style:none;overflow:hidden}.library:empty{display:none}.library li+li{border-top:1px solid var(--border)}.library a{color:inherit;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;display:flex}.library a:hover{background:var(--subtle)}.library .text{flex-direction:column;flex:1;min-width:0;display:flex}.library .name{overflow-wrap:anywhere;font-weight:600}.library .muted{font-size:.85rem}.library svg{color:var(--muted);flex:none}#results{flex-direction:column;gap:12px;padding-top:8px;display:flex}.piece-header{align-items:center;gap:4px;display:flex}.piece-header>.icon-button{margin-left:-10px}.piece-title{flex:1;min-width:0}.name-row{align-items:center;gap:4px;display:flex}.name-row h1{overflow-wrap:anywhere;min-width:0;font-size:1.3rem;line-height:1.25}.piece-title p{margin:0;font-size:.85rem}.menu-wrap{position:relative}.menu{z-index:10;border:1px solid var(--border);background:var(--card);border-radius:14px;flex-direction:column;min-width:190px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 10px 30px #00000026}.menu button{text-align:left;background:0 0;border:0;border-radius:10px;min-height:44px;padding:0 12px;font-weight:500}.menu button:hover{background:var(--subtle)}.overview-labels{min-height:28px;color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;font-size:.8rem;display:flex}.loop-label{align-items:center;gap:6px;display:inline-flex}.loop-label.active{color:var(--accent-ink);font-weight:600}.loop-toggle{border:1px solid var(--border);background:var(--card);height:28px;color:var(--text);border-radius:8px;align-items:center;gap:4px;padding:0 9px;font-size:.8rem;font-weight:700;display:inline-flex}.loop-label.active .loop-toggle{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.loop-label .clear{width:28px;height:28px;color:var(--muted);background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;margin-left:-4px;display:inline-flex}.roll-wrap{position:relative}#roll{border-radius:16px;width:100%;height:min(52vh,460px);display:block}.legend{pointer-events:none;gap:6px;display:flex;position:absolute;top:10px;left:10px}.legend span{color:#fff;background:#22211ed9;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:.75rem;font-weight:600;display:inline-flex}.swatch{border-radius:2px;width:8px;height:8px}.swatch.left{background:var(--left)}.swatch.right{background:var(--right)}.wait-bar{align-items:center;gap:6px;max-width:calc(100% - 20px);display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.wait-status{color:#fff;white-space:nowrap;background:#22211eeb;border-radius:999px;align-items:center;gap:8px;min-width:0;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex;overflow:hidden}.skip{color:#1d1c1a;background:#ffffffeb;border:0;border-radius:999px;flex:none;min-height:32px;padding:0 12px;font-size:.85rem;font-weight:700}.wait-status .meter{background:var(--heard);border-radius:50%;width:8px;height:8px;transition:transform 80ms linear}.roll-wrap:has(.wait-status:not([hidden])) .legend{display:none}.controls{flex-direction:column;gap:14px;padding:14px;display:flex}.transport{align-items:center;gap:12px;display:flex}.play{background:var(--accent);width:52px;height:52px;color:var(--accent-text);border:0;border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.play .icon-pause,.play.playing .icon-play{display:none}.play.playing .icon-pause{display:block}.speed{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.speed-label{color:var(--muted);justify-content:space-between;font-size:.85rem;display:flex}.speed-label strong{color:var(--text)}.speed input{width:100%;accent-color:var(--accent);margin:0}.toggle{border:1px solid var(--border);background:var(--card);border-radius:12px;flex:none;min-height:44px;padding:0 12px;font-size:.85rem;font-weight:700}.toggle[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--muted);font-size:.85rem}.segmented{background:var(--subtle);border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:3px;display:grid}.segmented.three{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented button{min-height:38px;color:var(--muted);background:0 0;border:0;border-radius:9px;font-size:.9rem;font-weight:600}.segmented button[aria-pressed=true]{background:var(--segment-on);color:var(--text);box-shadow:var(--shadow);font-weight:700}.wait-help{color:var(--muted);flex-direction:column;align-items:flex-start;gap:8px;font-size:.85rem;display:flex}.wait-help p{margin:0}.footer-row{align-items:center;gap:12px;display:flex}dialog{border:1px solid var(--border);background:var(--card);width:min(420px,100% - 32px);color:var(--text);border-radius:18px;padding:20px}dialog::backdrop{background:#00000080}dialog label{font-size:1.1rem;font-weight:700;display:block}dialog input{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:12px;margin:12px 0 16px;padding:10px 12px}dialog input:focus{border-color:var(--accent);outline:none}dialog .row{justify-content:flex-end}.dialog-status{color:var(--muted);margin:-6px 0 16px;font-size:.85rem}