@import"https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&display=swap";:root{--ink:#13120f;--panel:#1b1915;--line:#3c382e;--acid:#d8ff38;--bone:#e8e2d5;--rust:#ff5c35;--muted:#9c9688;font-family:IBM Plex Mono,monospace;color:var(--bone);background:var(--ink)}*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:var(--ink)}body{min-height:100vh}button,input{font:inherit}button{min-height:44px;border:1px solid var(--line);background:#211f1a;color:var(--bone);padding:.65rem .8rem;cursor:pointer;border-radius:0}button:hover,button:focus-visible{border-color:var(--acid);outline:2px solid transparent;color:var(--acid)}button.selected,button.active,.primary{background:var(--acid);color:var(--ink);border-color:var(--acid);font-weight:600}main{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr}header{height:148px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-between;padding:18px 26px;background:linear-gradient(105deg,#171510 72%,#302c22 72%)}h1{font:64px/.68 Archivo Black,sans-serif;letter-spacing:-.06em;margin:9px 0 0;color:var(--bone)}.kicker,.mission,.panel-head p,.fine,.legend{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.mission{text-align:right;align-self:flex-end;line-height:1.8}.mission span{color:var(--acid)}.transport{display:grid;grid-template-columns:108px 96px 140px 100px 1fr;gap:8px;align-items:center;padding:10px 26px;border-bottom:1px solid var(--line);background:#0e0d0b;position:sticky;top:0;z-index:5}.transport label{display:flex;align-items:center;gap:8px;font-size:11px}.transport input{width:70px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--acid);padding:8px}.transport #position{font-weight:600;color:var(--acid)}#status{text-align:right;font-size:11px;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 390px;min-height:0}.phrase-panel{padding:22px 26px 28px;min-width:0}.rack{border-left:1px solid var(--line);background:#161410}.rack section{padding:17px 20px;border-bottom:1px solid var(--line)}.panel-head,.section-title{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:15px}.panel-head>div,.section-title{display:flex;gap:10px}.panel-head span,.section-title span{color:var(--rust);font-size:10px}.panel-head h2,.section-title h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:0}.panel-head p{max-width:420px;text-align:right;margin:0;line-height:1.5}.roll{height:330px;display:grid;grid-template-columns:repeat(16,minmax(44px,1fr));border:1px solid var(--line);overflow-x:auto;background:linear-gradient(#26231d 1px,transparent 1px);background-size:100% 55px}.step{position:relative;height:100%;min-width:44px;border:0;border-right:1px solid var(--line);background:transparent;padding:0;color:var(--bone);touch-action:none;overflow:hidden}.step:nth-child(4n){border-right-color:#77705e}.step .num{position:absolute;top:8px;left:8px;font-size:9px;color:var(--muted)}.step strong{position:absolute;bottom:11px;left:0;right:0;font-size:11px}.step .bar{position:absolute;left:26%;width:48%;height:80px;bottom:calc(50% + var(--pitch)*6px - 40px);background:var(--acid);opacity:.82}.step.rest .bar{height:2px;bottom:50%;background:var(--muted)}.step .flags{position:absolute;top:28px;left:0;right:0;color:var(--rust);font-size:11px;font-weight:600}.step.is-slide .bar{transform:skewY(-18deg)}.step.is-accent .bar{background:var(--rust)}.step.selected{box-shadow:inset 0 0 0 2px var(--bone)}.step.playing:after{content:"";position:absolute;inset:0;background:#d8ff381f}.legend{display:flex;gap:18px;padding:12px 0;flex-wrap:wrap}.dot{display:inline-block;width:7px;height:7px;margin-right:5px;background:var(--acid)}.dot.accent{background:var(--rust)}.dot.slide{transform:skewY(-18deg);background:var(--bone)}.scope{position:relative;border:1px solid var(--line);height:180px;background:#191713}.scope canvas{width:100%;height:100%;display:block}.scope-label{position:absolute;bottom:8px;right:10px;color:var(--muted);font-size:9px;text-transform:uppercase}.wave-picks,.presets,.actions,.edit-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.edit-modes{max-width:440px;margin:0 0 10px}.edit-modes button{min-height:36px;padding:.35rem;font-size:9px}.rack label{display:grid;grid-template-columns:1fr 42px;gap:4px;margin-top:14px;font-size:10px;text-transform:uppercase;color:var(--muted)}.rack label output{text-align:right;color:var(--acid)}input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--acid);height:20px}.presets{grid-template-columns:1fr}.actions{grid-template-columns:1fr 1fr}.actions #export{grid-column:1/-1}.fine{line-height:1.5;margin:12px 0 0}@media(max-width:800px){header{height:112px;padding:14px 16px}h1{font-size:45px}.mission{font-size:8px}.transport{grid-template-columns:1fr 1fr 92px;padding:8px;gap:6px}.transport #position{display:none}#status{grid-column:1/-1;text-align:left;padding:2px 4px}.workbench{display:block;max-width:100vw;overflow:hidden}.phrase-panel{padding:16px 0;width:100%;max-width:100vw;overflow:hidden}.panel-head{padding:0 16px;display:block}.panel-head p{text-align:left;margin-top:8px}.edit-modes{margin-left:16px}.roll{height:290px;width:100%;max-width:100vw;grid-template-columns:repeat(16,48px);border-left:0;border-right:0;overflow-x:auto}.legend{padding:11px 16px;font-size:8px}.scope{height:140px;border-left:0;border-right:0}.rack{border-left:0;border-top:1px solid var(--line);max-width:100vw}.rack section{padding:16px}.wave-picks button{font-size:10px;padding:.5rem}.step{min-width:48px}.roll{scroll-snap-type:x proximity}.step{scroll-snap-align:start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}