:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#16171d;color:#d8d9db;--surface:#272930;--line:#51525c;--muted:#999da5;--green:#69ac8c;--green-2:#e65740}
*{box-sizing:border-box}body{margin:0;padding:28px 30px 24px;background:radial-gradient(circle at 90% 0%,#33343c 0,transparent 34%),#16171d}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:2px solid var(--green);outline-offset:2px}h1,h2,p{margin:0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.2px;color:var(--muted)}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:23px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:15px}.brand-mark{width:44px;height:44px;border:1px solid #4c8057;border-radius:12px;display:grid;place-items:center;color:#0d180f;background:var(--green);font-size:17px;font-weight:950;letter-spacing:-2px;box-shadow:0 0 24px #71ee7940}h1{font-size:27px;letter-spacing:-1.1px;margin-top:3px;font-weight:760}.header-actions,.pattern-targets,.footer-actions{display:flex;align-items:end;gap:9px}
.field{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:10px;letter-spacing:1.1px;font-weight:800}.field input,.sample-name{background:#121317;border:1px solid var(--line);border-radius:9px;color:#d1d39a;padding:10px 12px;outline:none}.field input:focus,.sample-name:focus{border-color:var(--green-2)}.kitname input{width:184px;letter-spacing:0;font-size:14px}.button{border:1px solid var(--line);border-radius:9px;padding:11px 15px;font-size:12px;font-weight:760;white-space:nowrap;min-height:39px}.button.subtle,.actions button{background:#24262d;color:#c4c9c6}.button.subtle:hover,.actions button:hover{background:#363941}.button.primary{color:#0c1b11;background:var(--green);border-color:var(--green);font-weight:850}.button.primary:hover{background:#b8ffad}
.workspace{border:1px solid var(--line);background:linear-gradient(155deg,#303139,#212229);border-radius:18px;padding:18px;margin-top:22px}.section-head{display:flex;align-items:end;gap:18px;margin-bottom:15px}.section-head h2{font-size:19px;letter-spacing:-.45px;margin-top:4px}.section-head p{font-size:12px;color:var(--muted);padding-bottom:2px}.pattern-controls{display:flex;align-items:stretch;gap:16px}.pattern-drop{flex:1;min-height:70px;border:1px dashed #4a8c5d;background:#1b1d23;border-radius:12px;color:var(--green);display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;cursor:pointer}.pattern-drop:hover,.pattern-drop.over{background:#2c3037;border-color:var(--green)}.drop-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#31353b;font-size:20px}.pattern-drop strong{display:block;font-size:13px}.pattern-drop small{display:block;font-size:11px;color:#a7aaa6;margin-top:3px}.pattern-targets .field input{width:91px;height:39px;font-size:13px}.pattern-status{min-height:18px;font-size:11px;color:#a7aaa6;margin-top:10px;line-height:1.4}
.pattern-panel{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}.pattern-panel[hidden]{display:none}.pattern-meta{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:12px}.pattern-meta-main{min-width:150px}.pattern-meta strong{font-size:14px}.pattern-meta span{font-size:11px;color:var(--muted)}.pattern-meta .meta-line{display:block;margin-top:4px}.pattern-transport{display:flex;align-items:end;gap:8px;margin-left:auto}.pattern-transport .field input{width:76px;height:37px}.pattern-transport .button{min-height:37px;padding:8px 12px}.pattern-transport .play-pattern{background:var(--green);color:#0b1b10;border-color:var(--green)}.pattern-transport .play-pattern:hover{background:#b5ffaa}
.roll-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#101116;scrollbar-color:#486b4f #142019}.roll{width:max-content;min-width:100%;padding:5px 0}.roll-bars,.roll-row{display:grid;grid-template-columns:72px repeat(var(--steps),15px);align-items:center}.roll-bars{height:24px;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:800}.roll-bar{height:100%;padding:5px 0 0 6px;border-left:1px solid #3c5142}.roll-row{height:25px}.roll-row:nth-child(even){background:#1b1c22}.roll-label{position:sticky;left:0;z-index:2;height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;background:#292b32;border-right:1px solid var(--line);font-size:11px;font-weight:850;color:#d2d4d3}.roll-label small{font-size:9px;color:#829c88;font-weight:650}.roll-cell{height:25px;display:grid;place-items:center;border-left:1px solid #30313a}.roll-cell.bar-start{border-left-color:#496b50}.roll-cell.active{background:#383a43}.roll-note{height:15px;width:11px;border-radius:3px;background:#4e7257}.roll-note.on{background:var(--green-2);box-shadow:0 0 7px #65ec7890}.roll-note.accent{background:#ff9a79}.roll-note.ghost{background:#a96559}.roll-cell.active .roll-note.on{background:#ffcfac}
.samples-section{margin-top:24px}#grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.card,.multi{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:13px}.card.loaded{background:linear-gradient(160deg,#303139,#25262d);border-color:#365443}.cardtop{display:flex;align-items:baseline;justify-content:space-between}.abbr{font-size:22px;letter-spacing:-1px;font-weight:900;color:var(--green)}.number{font:10px ui-monospace,SFMono-Regular,monospace;color:#789083}.label{font-size:9px;color:var(--muted);letter-spacing:1px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 10px}.drop{height:69px;border:1px dashed #506958;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#8eb799;font-size:10px;font-weight:800;cursor:pointer;overflow:hidden;position:relative}.loaded .drop{border-color:#65c576;background:#18191f;color:var(--green)}.drop.over{background:#275b37;border-color:var(--green)}.drop .wave{font-size:17px}.drop canvas{position:absolute;inset:6px 5px;width:calc(100% - 10px);height:calc(100% - 12px);opacity:.74}.drop span:last-child{z-index:1;padding:3px 6px;background:#14151ddd;border-radius:4px}.sample-name{width:100%;height:34px;margin:9px 0 5px;font-size:11px;padding:6px 8px;white-space:nowrap}.sample-name:disabled{opacity:.6}.metadata{font:10px ui-monospace,SFMono-Regular,monospace;color:#c6c883;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;gap:5px;margin-top:5px}.actions button{flex:1;border:0;border-radius:7px;padding:6px 4px;font-size:10px;min-width:0}.multi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:225px;border-style:dashed;color:#8cab94;cursor:pointer;background:#202128}.multi:hover{background:#172a1d;border-color:var(--green-2)}.multi .wave{font-size:24px;color:var(--green)}.multi b{font-size:11px}.multi span{font-size:10px}
footer{position:sticky;bottom:0;z-index:5;margin-top:22px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #3c5846;border-radius:13px;background:#25262ef5;backdrop-filter:blur(14px);box-shadow:0 -8px 26px #07100bc7}.footer-info{display:flex;flex-direction:column;gap:3px;min-width:0}.footer-info strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}.footer-info span{font:10px ui-monospace,SFMono-Regular,monospace;color:#a1a3ab}.footer-actions{flex-wrap:wrap;justify-content:flex-end}.footer-actions .button{padding:9px 11px;min-height:35px;font-size:11px}
body{min-width:1100px}

/* Hardware-inspired panel typography and full-width sequencer. */
:root{font-family:"Helvetica Neue",Arial,sans-serif}
body{background:linear-gradient(135deg,#34353d 0,#1c1d24 45%,#14151b 100%)}
h1{font-size:28px;font-weight:650;letter-spacing:.5px}h2{text-transform:uppercase;font-weight:700;letter-spacing:1px}.eyebrow{letter-spacing:1.5px;color:#b0b1b9}
.brand-mark{background:#252830;border:1px solid #777981;color:#71b897;box-shadow:inset 0 1px 0 #a1a2aa55;border-radius:4px;letter-spacing:-1px}
.button,.actions button{border:1px solid #0b0c11;border-radius:4px;box-shadow:inset 0 1px 1px #ffffff18,0 1px 2px #0008;text-transform:uppercase;letter-spacing:.65px;font-weight:700;color:#77ac94;background:linear-gradient(#353740,#1a1c23)}
.button.subtle,.actions button{color:#77ac94;background:linear-gradient(#353740,#1a1c23)}.button.primary,.pattern-transport .play-pattern{background:linear-gradient(#4d695a,#253e30);color:#b2e6c3;border-color:#151c18}.button.primary:hover,.pattern-transport .play-pattern:hover{background:#425e4c}
.workspace,.card,.multi,footer{border-radius:5px;border-color:#555660;box-shadow:inset 0 1px 0 #a0a1aa33,0 2px 5px #0005}.section-head{align-items:center}.section-head #sequencer-toggle{margin-left:auto}
.field input,.sample-name{border-radius:3px;background:#101115;color:#d1d39a;border:1px solid #55565b;box-shadow:inset 0 2px 3px #0009;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;letter-spacing:.1px}.field{color:#c1c1c7;letter-spacing:1px}.pattern-transport .field input{color:#ef694e}
.abbr{color:#d2d3d7;font-size:23px;font-weight:650;letter-spacing:.2px}.label{background:#cdced0;color:#24252b;padding:3px 5px;text-align:center;letter-spacing:.35px;font-size:9px;font-weight:750}.number{color:#8e9891}.card.loaded{border-color:#62636b}.drop,.loaded .drop{border-radius:3px;border-color:#697669;color:#bfc48b;background:#17191f}.drop.over{background:#333b31}.drop span:last-child{color:#d0d294}.multi{color:#9fa89e}.multi:hover{background:#2e3037}
.pattern-drop{border-radius:4px;border-color:#64796d;color:#8fbc9f}.drop-icon{background:#30343a;border-radius:3px;color:#a9c29b}
.roll-wrap{border-radius:3px;border-color:#686971;background:#111218;scrollbar-color:#62636a #22232a}.roll{width:100%;min-width:calc(72px + var(--steps)*8px);padding:0}.roll-bars,.roll-row{grid-template-columns:72px repeat(var(--steps),minmax(0,1fr))}.roll-bars{color:#9bad9f}.roll-bar{border-left-color:#71727a}.roll-row{height:25px}.roll-label{color:#d8d9d6;background:#292b32}.roll-label small{color:#9d9e8b}.roll-cell{border-left-color:#30313a}.roll-cell.bar-start{border-left-color:#70717a}.roll-cell.active{background:#454a46}.roll-note{width:calc(100% - 4px);max-width:28px;min-width:3px;border-radius:2px}.roll-note.on{background:linear-gradient(#f35d3e,#e89486);box-shadow:0 0 5px #e04c3433}.roll-note.accent{background:linear-gradient(#ff5432,#ffc0a9)}.roll-note.ghost{background:#a96051}.roll-cell.active .roll-note.on{background:#ffc0a2}
footer{background:#25262ef5;border-color:#666770}.footer-info strong{font-weight:500}.metadata{font-weight:400}.pattern-meta strong{color:#ced08a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}

/* Fixed design canvas; WKWebView scales everything together with the window. */
html{margin:0;overflow:hidden;background:#16171d}
body{width:1380px;min-width:1380px;max-width:1380px;margin:0;padding:20px 22px 18px}
footer{position:static;margin-top:18px}
#grid{grid-template-columns:repeat(6,1fr)}
.actions{gap:5px}.actions button{white-space:nowrap;letter-spacing:.3px;padding:6px 3px;font-size:10px}.actions [data-play],.actions .send{flex:1.4}.actions .load,.actions .remove{flex:1}
.pattern-meta{flex-wrap:nowrap}.pattern-meta-main{min-width:140px}.pattern-meta>span{max-width:270px}.pattern-transport{flex-shrink:0}

.roll-cell{cursor:crosshair}.roll-cell:hover{background:#37383f}.roll-cell.selected{outline:1px solid #a8c9b2;outline-offset:-2px}.roll-cell[draggable=true]{cursor:grab}.roll-cell[draggable=true]:active{cursor:grabbing}.pattern-meta{flex-wrap:wrap}.pattern-transport{gap:6px}.pattern-meta>span{max-width:360px}.pattern-transport .button{padding:8px 9px;font-size:10px}

.roll-bar{position:relative;padding:0;overflow:visible}.bar-button{width:100%;height:100%;padding:3px 6px;text-align:left;border:0;background:transparent;color:#9bad9f;font:inherit;cursor:pointer}.bar-button:hover{background:#303b34;color:#cce7d2}.bar-duplicate{position:absolute;top:100%;left:0;z-index:8;border:1px solid #728476;border-radius:3px;padding:9px 10px;background:#282f2b;color:#c5dfb2;font:11px "Helvetica Neue",Arial,sans-serif;white-space:nowrap;box-shadow:0 4px 10px #000a}

.pattern-targets .button{padding:10px 9px;font-size:10px}.midi-routing{margin-top:9px;color:#9eaaa0;font-size:11px}.midi-routing summary{cursor:pointer}.midi-routing>div{display:flex;align-items:end;gap:14px;padding:12px 0 5px}.midi-routing input{width:65px}.midi-routing span{font-size:11px;line-height:1.5;max-width:500px}.pattern-status#device-selection{color:#b8bba0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.roll-bar.playing{background:#3b5744}.roll-bar.playing .bar-button{color:#d7efd7}.roll-bar.not-selected .bar-button{opacity:.45}

.bar-menu{position:absolute;top:100%;left:0;z-index:9;min-width:150px;padding:4px;border:1px solid #728476;border-radius:4px;background:#282f2b;box-shadow:0 4px 12px #000a}.bar-menu-item{display:block;width:100%;border:0;border-radius:2px;padding:8px 9px;background:transparent;color:#c5dfb2;text-align:left;font:11px "Helvetica Neue",Arial,sans-serif;white-space:nowrap}.bar-menu-item:hover:enabled{background:#435348}.roll-bar.drag-target{background:#54755a;outline:1px solid #bad4ae;outline-offset:-1px}.bar-button[draggable=true]{cursor:grab}

.app-settings{position:relative}.app-settings>summary{list-style:none;cursor:pointer}.app-settings>summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;right:0;top:48px;width:570px;padding:20px;z-index:100;background:#22242c;border:1px solid #62646b;box-shadow:0 8px 24px #000b}.settings-panel h2{margin-bottom:14px}#sequencer-settings{display:flex;gap:8px;flex-wrap:wrap}.arrangement-option{display:block;margin-top:16px;color:var(--muted);font-size:12px}.pattern-transport{margin-left:0;width:100%}.pattern-transport .play-pattern{order:0}

/* Compact pattern panel, matching the instrument-panel typography. */
.pattern-workspace{padding:16px;background:linear-gradient(110deg,#2d2f38,#22242c);margin-top:16px}
.pattern-workspace .section-head{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #50525c;align-items:center}
.pattern-workspace .section-head>div{display:flex;align-items:center;gap:14px}
.pattern-workspace .section-head .eyebrow{font-size:10px;letter-spacing:1.4px}
.pattern-workspace .section-head h2{font-size:16px;letter-spacing:1.1px;margin:0}
.pattern-workspace #sequencer-toggle{min-height:30px;padding:7px 11px;font-size:10px}
.pattern-controls{align-items:end;justify-content:space-between;gap:16px}
.pattern-drop{flex:0 0 320px;min-height:46px;justify-content:flex-start;padding:7px 12px;border:1px dashed #68766e;background:#1a1c22;border-radius:3px;gap:10px}
.pattern-drop .drop-icon{width:28px;height:28px;font-size:17px;background:#2b3034}
.pattern-drop strong{font-size:11px;letter-spacing:.65px;text-transform:uppercase}
.pattern-drop small{font-size:10px;margin-top:2px;color:#969c98}
.pattern-targets{gap:12px;align-items:end}
.pattern-targets .field{gap:5px;font-size:9px;letter-spacing:1px}
.pattern-targets .field input{width:86px;height:34px;padding:6px 10px;font-size:14px}
.pattern-targets .button{height:34px;min-height:34px;padding:7px 12px;font-size:10px}
.sequencer-feedback{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:10px;padding:7px 0 0}
.sequencer-feedback .pattern-status{margin:0;min-height:14px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sequencer-feedback #device-selection{font-family:inherit;color:#8da698;max-width:48%}
.sequencer-feedback #pattern-status{max-width:52%;text-align:right;color:#afb1b9}
.pattern-panel{margin-top:12px;padding-top:12px;border-top:1px solid #62646e}
.pattern-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:18px;margin-bottom:14px;min-height:64px}
.pattern-meta-main{flex:1;min-width:0;padding:9px 13px;background:#111319;border:1px solid #4e5159;box-shadow:inset 0 2px 4px #0009;max-width:440px;border-radius:2px}
.pattern-meta-main strong{display:block;font-size:16px;letter-spacing:.3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d5d596}
.pattern-meta-main .meta-line{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;color:#8c9395;margin-top:5px;letter-spacing:.3px}
.pattern-transport{width:auto;margin-left:auto;gap:8px;align-items:end}
.pattern-transport .field{gap:5px;font-size:9px;letter-spacing:1px;margin-left:7px}
.pattern-transport .field input{width:78px;height:34px;padding:6px 10px;font-size:16px;color:#f2664b}
.pattern-transport .button{height:34px;min-height:34px;padding:7px 13px;font-size:10px}
.pattern-transport .play-pattern{background:linear-gradient(#425b4c,#283d31);color:#b4d7bf}
.editing-help{display:block;width:100%;padding-top:12px;font-size:11px;color:#a6a9b1;line-height:1.5}
.roll-wrap{border-color:#737580;box-shadow:inset 0 1px 4px #0008}
.roll-bars{height:27px;background:#16181e;letter-spacing:.4px}
.roll-row,.roll-label,.roll-cell{height:29px}
.roll-label{background:linear-gradient(90deg,#2d3039,#252832);font-size:11px;letter-spacing:.5px;border-bottom:1px solid #41434d}
.roll-cell{border-bottom:1px solid #333640}
.roll-row:nth-child(even){background:#20222a}
.roll-row:nth-child(odd){background:#171920}
.roll-note{height:18px;width:calc(100% - 5px);max-width:30px;border:1px solid #1b1110;border-radius:2px}
.roll-note.on{background:linear-gradient(#ff6244,#e7816c);box-shadow:inset 0 1px 1px #ffb09b66,0 0 4px #ec53352b}
.roll-cell.active{background:#3b4941}
.roll-bar.playing{background:linear-gradient(#496251,#334638);box-shadow:inset 0 1px #a6c4a333}

/* One full-width 16-step variation, following the transport. */
.variation-tabs{display:flex;gap:8px;align-items:center;margin:0 0 14px;height:36px}
.variation-tabs .roll-bar{display:flex;width:70px;height:36px;border:1px solid #111218;border-radius:3px;background:linear-gradient(#3a3d46,#23252d);box-shadow:inset 0 1px #ffffff19,0 1px 3px #0008}
.variation-tabs .bar-button{width:46px;text-align:center;padding:0;font-size:13px;color:#a2b7ac}
.variation-options{width:22px;border:0;border-left:1px solid #17191f;background:transparent;color:#889c91;padding:0;font-size:12px}
.variation-tabs .viewed{border-color:#72977c;background:linear-gradient(#465d4c,#2b4032)}
.variation-tabs .viewed .bar-button{color:#c7e7c9;opacity:1}
.variation-tabs .playing{box-shadow:inset 0 1px #a6c4a355,0 0 5px #71ab7455}
.step-numbers{height:29px;text-align:center;background:#20222a;font-size:11px;color:#c3c4c9}
.variation-caption{font-size:10px;color:#a5c1ad;letter-spacing:.5px}
.roll{min-width:0}.roll-bars,.roll-row{grid-template-columns:72px repeat(16,minmax(0,1fr))}
.roll-row,.roll-label,.roll-cell{height:43px}
.roll-label{padding:0 9px;font-size:12px}
.roll-cell{position:relative;border-left:0;background:transparent;padding:5px 10px}
.roll-cell::before{content:"";position:absolute;inset:6px 12px;border:1px solid #111219;border-radius:3px;background:linear-gradient(#666970,#44464c);box-shadow:inset 0 1px 2px #b8bac13b,0 2px 3px #0009}
.roll-cell:nth-child(4n+2){border-left:1px solid #5b5e67}
.roll-cell:hover::before{background:linear-gradient(#81858b,#595d64)}
.roll-cell.active::before{border-color:#adc1ad;box-shadow:0 0 0 1px #99b79a,0 0 8px #8caf8a55}
.roll-note{position:absolute;inset:6px 12px;width:auto;max-width:none;min-width:0;height:auto;z-index:1;border:1px solid #9a4537;border-radius:3px}
.roll-note.on{background:linear-gradient(#ff6241,#dc4530);box-shadow:inset 0 1px 3px #ffb39899,0 0 7px #e14b3844}
.roll-note.accent{background:linear-gradient(#ff8660,#f35030)}
.roll-note.ghost{background:linear-gradient(#c87563,#974c40);border-color:#6a3b33}
.roll-cell.active .roll-note.on{background:linear-gradient(#ffba8b,#ff744b);box-shadow:0 0 0 1px #c8d8bb,0 0 8px #e7774e77}

.variation-follow{margin-left:auto;height:34px;min-height:34px;font-size:10px;padding:7px 12px}.variation-follow[aria-pressed=true]{color:#c4e2c9;background:linear-gradient(#405b48,#293d30)}

.roll-bars,.roll-row{grid-template-columns:130px repeat(16,minmax(0,1fr)) 64px}
.roll-label{gap:5px;justify-content:flex-start}.roll-label>span{margin-left:3px}.track-switch{width:23px;height:24px;padding:0;border:1px solid #111218;border-radius:3px;background:linear-gradient(#3b3e47,#22242c);color:#8f9c94;font-size:10px;font-weight:700}
.track-switch.mute[aria-pressed=true]{background:#805340;color:#ffe4ca}.track-switch.solo[aria-pressed=true]{background:#455e3c;color:#d8efb8}
.track-length{display:flex;justify-content:center;align-items:center;height:43px;background:#24262e;border-left:1px solid #535661}.track-length input{width:50px;height:28px;padding:3px 4px;background:#14161b;border:1px solid #51555c;border-radius:3px;color:#c6cf9c;font:12px ui-monospace,SFMono-Regular,monospace}
.roll-cell.beyond-length{opacity:.25}.roll-cell.track-muted .roll-note{filter:grayscale(1);opacity:.5}

/* Drag each track's end marker; no numeric LAST column. */
.roll-bars,.roll-row{grid-template-columns:130px repeat(16,minmax(0,1fr))}
.roll-row{position:relative}
.track-end-handle{position:absolute;left:calc(130px + (100% - 130px)*var(--track-length)/16 - 12px);top:3px;width:12px;height:37px;z-index:4;padding:0;border:1px solid #b8cba7;border-radius:3px;background:linear-gradient(#7b9775,#3a563d);color:#deecd2;cursor:ew-resize;touch-action:none;box-shadow:0 1px 4px #000a;font-size:16px;line-height:1}
.track-end-handle:hover{background:#88a47b}.track-end-handle:active{background:#a5c38d}
.variation-tabs .editing{border-color:#d9c090;box-shadow:0 0 0 1px #b0956155}

/* Quiet end markers, with a generous invisible drag target. */
.track-end-handle{top:6px;height:31px;width:12px;border:0;background:transparent;color:transparent;box-shadow:none;opacity:.7}
.track-end-handle::after{content:"";position:absolute;right:3px;top:2px;bottom:2px;width:3px;border-radius:2px;background:#91ab8d}
.track-end-handle:hover,.track-end-handle:active{background:#87a47d22;opacity:1}
.track-end-handle:hover::after{background:#c1d4ae}

.kit-preview{margin-left:auto;flex-shrink:0}.kit-preview .pattern-transport{margin:0}
.samples-section .section-head{align-items:center}.samples-section .section-head p{max-width:380px;font-size:11px}
.pattern-gesture-hint{margin-left:auto;font-size:11px;color:#929b98}
.pattern-meta{min-height:55px}.roll-cell{touch-action:none}
.roll-note{top:auto;bottom:6px;height:max(3px,calc((100% - 12px)*var(--velocity,127)/127));transition:height 40ms linear}
.velocity-readout{position:absolute;left:50%;top:-17px;transform:translateX(-50%);z-index:7;padding:2px 5px;border-radius:3px;background:#11151b;color:#e7eac7;font:10px ui-monospace,SFMono-Regular,monospace;pointer-events:none;box-shadow:0 1px 4px #0009}

#sequencer-settings .field input{width:76px;height:34px;padding:6px 10px;color:#ef694e}

.kit-description-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 14px;padding:0 0 13px;border-bottom:1px solid #50525c}
.kit-description-row>p{font-size:11px;color:var(--muted);padding-bottom:8px;max-width:470px}
.kit-description-row .pattern-targets{gap:12px}.pattern-workspace .section-head{margin-bottom:0}.sequencer-feedback{padding-top:0}

.restored-targets{justify-content:flex-end;margin-top:12px}.restored-targets+.sequencer-feedback{margin-top:10px}.kit-description-row{padding-bottom:0;border-bottom:0;margin-bottom:14px}.kit-description-row>p{padding-bottom:0}

.dice-button,.lock-mode{padding:5px 10px;height:34px;min-height:34px;font-size:20px}.lock-mode{font-size:14px}.lock-mode[aria-pressed=true]{background:#435343;border-color:#8da57f}
.step-lock{position:absolute;right:3px;top:1px;z-index:5;padding:0;width:16px;height:16px;border:0;border-radius:2px;background:#15191ddd;color:#a8bd9b;font-size:9px;line-height:16px;cursor:pointer}
.step-lock:hover{background:#486046}.random-locked .roll-note{border-color:#d1bc81}
.sample-dice{margin-left:auto;font-size:17px;width:22px;color:#acb99b}
.roll-label{gap:4px}.roll-bars,.roll-row{grid-template-columns:154px repeat(16,minmax(0,1fr))}
.track-end-handle{left:calc(154px + (100% - 154px)*var(--track-length)/16 - 12px)}

.channel-lock{font-size:10px;color:#8a9986}.channel-lock[aria-pressed=true]{background:#4b5040;color:#dcc695;border-color:#a7966a}
.random-density{display:flex;align-items:center;gap:9px;color:#adb8a6;font-size:10px;white-space:nowrap}.random-density input{width:98px;accent-color:#89a782;height:18px}
.roll-bars,.roll-row{grid-template-columns:178px repeat(16,minmax(0,1fr))}
.track-end-handle{left:calc(178px + (100% - 178px)*var(--track-length)/16 - 12px)}

/* Dice icons fill their buttons consistently across system fonts. */
.dice-button{width:36px;height:36px;min-height:36px;padding:0;display:grid;place-items:center}
.dice-button svg{display:block;width:28px;height:28px}
.track-switch.sample-dice{width:24px;height:24px;min-height:24px;padding:0;display:grid;place-items:center}
.sample-dice svg{display:block;width:22px;height:22px}

/* Desktop studio layout: one sequencer and one row of instrument pads. */
body{padding:20px 22px 18px;background:linear-gradient(120deg,#30323b,#24262d)}
.app-header{padding-bottom:20px}.brand{gap:12px}.brand-mark{display:none}.app-header h1{font-size:28px;letter-spacing:-.8px;font-weight:650}.app-header .eyebrow{font-size:9px;letter-spacing:2px}.header-actions{gap:9px}
.pattern-workspace{border:0;box-shadow:none;background:none;padding:0;margin-top:20px}.pattern-workspace .section-head{border:0;padding:0;margin-bottom:0}.pattern-workspace .section-head>div{display:block}.pattern-workspace .section-head h2{font-size:14px;letter-spacing:0;margin-top:5px;text-transform:none}.pattern-workspace .section-head .eyebrow{font-size:9px}
.restored-targets{margin-top:0;position:relative;top:-39px;margin-bottom:-30px;padding-right:136px}.pattern-targets{gap:9px}.pattern-targets .field{font-size:8px}.pattern-targets .field input{width:72px;height:28px;padding:4px 8px;font-size:12px}.pattern-targets .button{height:28px;min-height:28px;font-size:8px;padding:6px 9px}
.sequencer-feedback{margin-top:10px!important}.sequencer-feedback .pattern-status{font-size:9px}.pattern-panel{margin-top:10px;padding-top:0;border:0}
.variation-tabs{height:32px;margin-bottom:12px;gap:7px}.variation-tabs .roll-bar{height:32px;width:53px}.variation-tabs .bar-button{font-size:11px;width:35px}.variation-options{width:16px;font-size:10px}.dice-button{width:32px;height:32px;min-height:32px}.dice-button svg{width:25px;height:25px}.variation-follow{height:32px;min-height:32px;font-size:9px}.random-density{font-size:9px}
.roll-bars{height:25px}.roll-row,.roll-label,.roll-cell{height:34px}.roll-label{font-size:10px;padding:0 7px}.track-switch{width:19px;height:20px;min-height:20px;font-size:8px}.track-switch.sample-dice{width:20px;height:20px;min-height:20px}.sample-dice svg{width:18px;height:18px}.channel-lock{font-size:8px}.roll-label{gap:4px}.roll-bars,.roll-row{grid-template-columns:146px repeat(16,minmax(0,1fr))}
.roll-cell::before{inset:4px 9px}.roll-note{left:9px;right:9px;bottom:4px;height:max(3px,calc((100% - 8px)*var(--velocity,127)/127))}.roll-cell.active{background:transparent}.roll-cell.active::before{background:#637366;outline:1px solid #c5d7b5;outline-offset:2px;border-color:#a7b79e;box-shadow:none}.roll-cell.active .roll-note.on{box-shadow:inset 0 1px #ffb49655;background:linear-gradient(#ff855c,#e65a3a)}
.track-end-handle{left:calc(146px + (100% - 146px)*var(--track-length)/16 - 12px);height:26px;top:4px}
.pattern-meta{min-height:0;margin-top:10px;margin-bottom:0;gap:15px}.pattern-meta-main{display:flex;gap:10px;align-items:center;max-width:850px;background:none;border:0;box-shadow:none;padding:0}.pattern-meta-main strong{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a9b5a1;max-width:400px}.pattern-meta-main .meta-line{font-size:9px;margin:0;white-space:nowrap}.pattern-gesture-hint{font-size:8px;color:#818d84}
.samples-section{margin-top:20px;border-top:1px solid #555b61;padding-top:17px}.samples-section .section-head{margin-bottom:14px;gap:16px;align-items:center}.samples-section .section-head h2{font-size:14px;text-transform:none;letter-spacing:0}.samples-section .eyebrow{font-size:9px;letter-spacing:1.4px}.samples-section .kitname{margin-left:auto;font-size:8px}.samples-section .kitname input{width:152px;height:32px;font-size:11px;padding:5px 9px}.kit-preview{margin-left:0}.kit-preview .pattern-transport{gap:7px}.kit-preview .pattern-transport .button{font-size:9px;height:32px;min-height:32px;padding:6px 10px}.kit-preview .field{font-size:8px;gap:4px}.kit-preview .field input{height:32px;width:65px;font-size:13px}
.sample-import{display:flex;align-items:center;gap:11px;min-width:245px;height:51px;padding:8px 13px;border:1px dashed #647568;border-radius:3px;background:#20262b;color:#b2c69d;text-align:left}.sample-import svg{width:30px;height:30px;flex-shrink:0}.sample-import strong{display:block;font-size:11px;letter-spacing:.4px}.sample-import small{display:block;margin-top:4px;font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#929e91}.sample-import:hover,.sample-import.over{background:#303b31;border-color:#b1c498}
#grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:7px}.card{padding:8px;border:1px solid #58605c;border-radius:3px;background:#252a30;box-shadow:none}.card.loaded{background:#292e35;border-color:#606a61}.cardtop .abbr{font-size:14px;font-weight:650}.cardtop .number{font-size:7px}.card .label{display:none}.card .drop{height:50px;border-color:#687b65;margin-top:7px;font-size:8px}.drop span:last-child{font-size:7px;padding:2px 3px}.card .sample-name{height:25px;padding:4px;font-size:8px;margin:7px 0 4px;border-color:#414a43}.card .metadata{font-size:7px;min-height:12px;line-height:1.6}.card .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:6px}.card .actions button{font-size:8px;padding:4px 2px;min-height:22px;letter-spacing:0}.card .actions .load,.card .actions .remove{min-height:18px;font-size:10px;padding:1px}
footer{border:0;border-top:1px solid #525c53;border-radius:0;background:none;box-shadow:none;padding:12px 0 0;margin-top:16px}.footer-info strong{font-size:10px}.footer-info span{font-size:9px}.footer-actions .button{font-size:9px;min-height:29px;padding:6px 10px}

.history-button{height:32px;min-height:32px;padding:6px 9px;font-size:9px;letter-spacing:0}

.new-kit-button{height:32px;min-height:32px;font-size:9px;padding:6px 10px}.restored-targets{padding-right:0;top:-34px;margin-bottom:-29px}
.roll-cell.beat-shade{background:#00000012}.step-numbers .beat-shade{height:100%;display:grid;place-items:center;background:#00000017}
.roll-cell.bar-start{border-left-color:#788370}.roll-cell:nth-child(4n+2){border-left-color:#59615b}

.brand-slogan{margin-top:5px;font-size:10px;color:#aab5a4;letter-spacing:.2px}.app-header h1{letter-spacing:1px}