:root{--panel:#14151a;--panel-2:#191b21;--well:#0c0d11;--raised:#24262e;--edge:#303441;--ink:#d3d7e0;--ink-dim:#767c88;--ink-faint:#4b4f5a;--lane-drums:#ff7a45;--lane-bass:#b15cff;--lane-harmony:#34d8c0;--lane-lead:#ffd23d;--warn:#ffc24b;--alert:#ff5470;--radius:10px;--radius-sm:6px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(120% 90% at 50% -10%, #1b1d24 0%, var(--panel) 46%, #101116 100%);min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:IBM Plex Sans,system-ui,sans-serif;font-size:14px;line-height:1.5}button{font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius-sm);cursor:pointer;padding:8px 14px;transition:background .12s,border-color .12s,transform 80ms}button:hover{background:#2b2e37;border-color:#454a59}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible{outline:2px solid var(--lane-harmony);outline-offset:2px}.app{max-width:1120px;margin:0 auto;padding:20px 20px 48px}.topbar{border-bottom:1px solid var(--edge);justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:18px;display:flex}.wordmark{letter-spacing:.14em;color:var(--ink);align-items:baseline;gap:10px;font-family:Chakra Petch,sans-serif;font-size:22px;font-weight:700;display:flex}.wordmark:before{content:"";background:var(--lane-harmony);width:8px;height:8px;box-shadow:0 0 8px var(--lane-harmony);border-radius:50%;align-self:center}.wordmark-sub{letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:500}.standby{letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--edge);border-radius:999px;padding:4px 12px;font-family:IBM Plex Mono,monospace;font-size:11px}.topbar-actions{align-items:center;gap:12px;display:flex}.btn-eject{letter-spacing:.04em;color:var(--ink-dim);border:1px solid var(--edge);white-space:nowrap;background:0 0;padding:7px 12px;font-family:IBM Plex Mono,monospace;font-size:12px}.btn-eject:hover{color:var(--ink);background:var(--raised);border-color:#454a59}.transport{color:var(--ink-dim);background:var(--well);border:1px solid var(--edge);border-radius:var(--radius-sm);align-items:center;gap:14px;padding:6px 8px 6px 6px;font-family:IBM Plex Mono,monospace;font-size:12px;display:flex;box-shadow:inset 0 1px 3px #0009}.transport button{background:var(--raised);width:40px;height:32px;color:var(--lane-harmony);place-items:center;font-size:13px;display:grid}.transport button:hover{background:#2b2e37}.transport-readout{color:var(--ink-dim)}.transport-readout b{color:var(--ink);font-weight:600}.transport-id{color:var(--ink-faint)}.landing{flex-direction:column;gap:18px;display:flex}.hero{grid-template-columns:1fr auto;align-items:center;gap:32px;padding:28px 4px 30px;display:grid}.hero-title{letter-spacing:.01em;color:var(--ink);margin:0 0 10px;font-family:Chakra Petch,sans-serif;font-size:clamp(26px,4.5vw,40px);font-weight:600;line-height:1.08}.hero-title em{color:var(--lane-harmony);font-style:normal}.hero-sub{max-width:42ch;color:var(--ink-dim);margin:0;font-size:15px}.ghost-grid{grid-template-columns:repeat(4,60px);grid-auto-rows:60px;gap:8px;display:grid}.ghost-pad{border-radius:var(--radius-sm);background:linear-gradient(180deg, var(--panel-2), var(--well));border:1px solid var(--edge);letter-spacing:.06em;color:var(--ink-faint);text-align:center;place-items:center;padding:4px;font-family:IBM Plex Mono,monospace;font-size:10px;display:grid;box-shadow:inset 0 1px #ffffff08,inset 0 -6px 12px #00000080}.drop-zone{border:1.5px dashed var(--edge);border-radius:var(--radius);text-align:center;background:#ffffff03;padding:30px 24px;transition:border-color .14s,background .14s}.drop-zone pre,.drop-zone>div:first-child{color:var(--ink-dim);white-space:pre;margin:0 0 8px;font-family:IBM Plex Mono,monospace;font-size:12px}.drop-zone p{justify-content:center;gap:10px;margin:12px 0 0;display:flex}.drop-zone--over{border-color:var(--lane-harmony);background:#34d8c00f}.upload-panel{border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel-2);flex-direction:column;gap:10px;max-width:460px;padding:16px;display:flex}.upload-panel-title{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:11px}.api-base,.upload-panel input[type=file]{font:inherit;color:var(--ink);background:var(--well);border:1px solid var(--edge);border-radius:var(--radius-sm);padding:8px 10px}.api-base{font-family:IBM Plex Mono,monospace;font-size:13px}.upload-panel input[type=file]::file-selector-button{font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius-sm);cursor:pointer;margin-right:10px;padding:5px 10px}.upload-panel>button{align-self:flex-start}.error-panel{border:1px solid var(--alert);border-radius:var(--radius-sm);color:var(--alert);white-space:pre-wrap;background:#ff54700f;padding:12px 14px;font-family:IBM Plex Mono,monospace;font-size:12px}.banner-rejected{border:1px solid var(--warn);border-radius:var(--radius-sm);color:var(--warn);background:#ffc24b12;margin-bottom:16px;padding:10px 14px;font-size:13px}.workstation{grid-template-columns:1fr 340px;align-items:start;gap:20px;display:grid}.workstation-bottom{grid-column:1/-1}.panel{background:var(--panel-2);border:1px solid var(--edge);border-radius:var(--radius);padding:18px}.panel-title{letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px;font-family:IBM Plex Mono,monospace;font-size:11px}.pad-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.pad{--lane:var(--edge);aspect-ratio:1;text-align:left;border:1px solid color-mix(in srgb, var(--lane) 40%, var(--edge));border-radius:var(--radius);color:var(--ink);-webkit-user-select:none;user-select:none;background:radial-gradient(140% 120% at 50% 0%, color-mix(in srgb, var(--lane) 16%, var(--panel-2)) 0%, var(--well) 78%);flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;padding:12px;transition:transform 90ms,box-shadow 90ms,background .14s,border-color .14s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0d,inset 0 -10px 20px #0000008c,0 2px 4px #0006}.pad:hover{border-color:color-mix(in srgb, var(--lane) 70%, var(--edge))}.pad:focus-visible{outline:2px solid var(--lane);outline-offset:2px}.pad[data-lane=drums]{--lane:var(--lane-drums)}.pad[data-lane=bass]{--lane:var(--lane-bass)}.pad[data-lane=harmony]{--lane:var(--lane-harmony)}.pad[data-lane=lead]{--lane:var(--lane-lead)}.pad-key{color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;position:absolute;top:10px;right:11px}.pad-slot{letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--lane) 75%, var(--ink-dim));font-family:IBM Plex Mono,monospace;font-size:10px}.pad-label{font-family:Chakra Petch,sans-serif;font-size:15px;font-weight:600;line-height:1.1}.pad--empty,.pad--reserved{--lane:var(--edge);color:var(--ink-faint);background:linear-gradient(180deg, var(--panel-2), var(--well))}.pad--reserved{cursor:default}.pad--reserved:hover{border-color:var(--edge)}.pad--reserved .pad-slot,.pad--empty .pad-slot{color:var(--ink-faint)}.pad--muted{opacity:.5}.pad--muted .pad-label{text-decoration:line-through;text-decoration-thickness:1px}.pad--error{--lane:var(--alert);color:var(--alert)}.pad--error .pad-slot{color:var(--alert)}.pad--flash{background:radial-gradient(140% 130% at 50% 0%, var(--lane) 0%, color-mix(in srgb, var(--lane) 50%, var(--well)) 100%);border-color:var(--lane);color:#0c0d11;box-shadow:inset 0 1px 0 #fff6, 0 0 24px color-mix(in srgb, var(--lane) 65%, transparent), 0 2px 4px #0006;transform:translateY(2px)}.pad--flash .pad-slot,.pad--flash .pad-key{color:#0c0d11bf}.inspector{font-size:12px}.inspector h3{letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--edge);margin:16px 0 8px;padding-bottom:6px;font-family:IBM Plex Mono,monospace;font-size:11px}.inspector h3:first-child{margin-top:0}.inspector>div{color:var(--ink-dim);padding:2px 0;font-family:IBM Plex Mono,monospace}.inspector ul{margin:0;padding:0;list-style:none}.inspector li{color:var(--ink);border-bottom:1px dotted var(--edge);padding:3px 0;font-family:IBM Plex Mono,monospace}.inspector li:last-child{border-bottom:none}.inspector .missing{color:var(--alert)}.inspector .warn{color:var(--warn)}.step-grid{overflow-x:auto}.step-grid table{border-collapse:separate;border-spacing:3px;width:100%}.step-grid th{text-align:right;color:var(--ink-dim);white-space:nowrap;padding-right:12px;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:500}.step-grid td{text-align:center;width:20px;height:20px;color:var(--ink-faint);background:var(--well);box-shadow:inset 0 0 0 1px var(--edge);border-radius:3px;font-size:0}.step-grid td.step-on{background:var(--lane-harmony);box-shadow:0 0 8px color-mix(in srgb, var(--lane-harmony) 55%, transparent)}.step-row-drums td.step-on{background:var(--lane-drums);box-shadow:0 0 8px color-mix(in srgb, var(--lane-drums) 55%, transparent)}.step-row-bass td.step-on{background:var(--lane-bass);box-shadow:0 0 8px color-mix(in srgb, var(--lane-bass) 55%, transparent)}.step-row-harmony td.step-on{background:var(--lane-harmony);box-shadow:0 0 8px color-mix(in srgb, var(--lane-harmony) 55%, transparent)}.step-row-lead td.step-on{background:var(--lane-lead);box-shadow:0 0 8px color-mix(in srgb, var(--lane-lead) 55%, transparent)}.step-grid td.step-playhead{box-shadow:inset 0 0 0 1px var(--ink), 0 0 10px #d3d7e066}.step-missing th{color:var(--alert)}.step-missing td{box-shadow:inset 0 0 0 1px var(--alert)}.uploading{padding:40px 4px}.uploading-title{letter-spacing:.1em;margin-bottom:22px;font-family:Chakra Petch,sans-serif;font-size:20px;font-weight:600}.stages{flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;display:flex}.stage{letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--edge);color:var(--ink-faint);border-radius:999px;padding:8px 14px;font-family:IBM Plex Mono,monospace;font-size:12px}.stage--done{color:var(--ink-dim);border-color:var(--edge)}.stage--current{color:#0c0d11;background:var(--lane-harmony);border-color:var(--lane-harmony);box-shadow:0 0 14px color-mix(in srgb, var(--lane-harmony) 45%, transparent)}.stage--pending{color:var(--ink-faint)}.uploading-error{color:var(--alert);white-space:pre-wrap;margin:22px 0;font-family:IBM Plex Mono,monospace}@media (width<=760px){.workstation,.hero{grid-template-columns:1fr}.ghost-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}.ghost-pad{aspect-ratio:1}.topbar{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}