html{overflow:auto;background:#24262d}body{margin:0 auto;min-height:0}.connection-bar{display:flex;align-items:center;gap:9px;padding:12px 0 14px;border-bottom:1px solid #526052;margin-bottom:16px}.web-home{color:#c1d6ad;font-size:13px;font-weight:700;letter-spacing:1px;text-decoration:none;margin-right:8px}.connection-bar>span{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#aab1a5;flex:1;line-height:1.5}.connection-bar .button{font-size:9px;min-height:32px;padding:7px 10px}.connection-bar.connected #connection-status{color:#b5d0a7}.web-midi-settings{font-size:10px;color:#acb9a6;margin-bottom:14px}.web-midi-settings>summary{cursor:pointer}.web-midi-settings>div{display:flex;gap:12px;align-items:end;margin-top:12px;flex-wrap:wrap}.web-midi-settings label{display:flex;flex-direction:column;gap:5px}.web-midi-settings select{max-width:175px;background:#171c21;border:1px solid #5d695c;color:#b8c5ac;padding:5px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.web-midi-settings input{width:73px;background:#171c21;color:#b8c5ac;border:1px solid #5d695c;padding:5px}.web-midi-settings p{margin:10px 0;line-height:1.6;color:#8f9e89}.app-header{padding-bottom:13px}.settings-panel{max-height:75vh;overflow:auto}.roll-note{transition:height 40ms linear}
#trial-banner{padding:18px 24px;border-bottom:1px solid #6a7054;background:#20282a;color:#c5cab9}#trial-banner>div{display:flex;align-items:center;gap:16px}#trial-banner p{font-size:13px;color:#a6b2a7;line-height:1.5}#trial-clock{font:700 24px monospace;color:#dadca8;margin-left:auto}#trial-kit{background:#11151a;color:#d4d7a9;padding:12px;border:1px solid #626959;font:inherit}.hardware-trial #save-project,.hardware-trial #open-project,.hardware-trial #import-midi,.hardware-trial #save-slots,.hardware-trial #open-slots,.hardware-trial #add,.hardware-trial #new-kit,.hardware-trial #direct,.hardware-trial #export,.hardware-trial #sd-copy{display:none!important}.hardware-trial #sample-pads button[aria-label="Add WAV"],.hardware-trial .sample-pad button[title="Add WAV"]{pointer-events:none;opacity:.35}.trial-expired .roll,.trial-expired .variation-tabs,.trial-expired .sample-grid{pointer-events:none;opacity:.6}
.hardware-trial .card .send,.hardware-trial .card .load,.hardware-trial .card .remove{display:none!important}.trial-expired #grid{pointer-events:none;opacity:.6}
.hardware-trial .pattern-workspace{position:relative}:is(#trial-end-overlay,#trial-signin-overlay){position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:36px;background:rgba(20,24,29,.91);backdrop-filter:blur(2px);border:1px solid #69765d;border-radius:6px}:is(#trial-end-overlay,#trial-signin-overlay)>div{max-width:580px;text-align:center}:is(#trial-end-overlay,#trial-signin-overlay) h2{font-size:36px;line-height:1.15;color:#e3e7da;margin:18px 0}:is(#trial-end-overlay,#trial-signin-overlay) p{color:#afb9b0;font-size:16px;line-height:1.6}:is(#trial-end-overlay,#trial-signin-overlay) a{display:inline-flex;margin:20px 0;padding:16px 24px}
.hardware-trial #add{display:inline-flex!important}.hardware-trial #grid .card:nth-child(-n+5) .send,.hardware-trial #grid .card:nth-child(-n+5) .load,.hardware-trial #grid .card:nth-child(-n+5) .remove{display:block!important;pointer-events:auto;opacity:1}.hardware-trial #grid .trial-locked{position:relative;opacity:.45;pointer-events:none}.hardware-trial #grid .trial-locked::after{content:'TRIAL LOCKED';position:absolute;inset:40% 10% auto;text-align:center;padding:10px;background:#14191e;color:#d6dbb9;font:700 12px monospace;border:1px solid #6b735c}
#trial-developer-tools[hidden]{display:none!important}#trial-developer-tools{margin-top:14px;padding:12px;border:1px solid #728669;color:#cfe0b8}:is(#trial-end-overlay,#trial-signin-overlay) .button.subtle{margin-left:12px}
.roll-cell{cursor:default;user-select:none;-webkit-user-select:none}.roll-note{pointer-events:none}.track-end-handle{width:20px;left:calc(146px + (100% - 146px)*var(--track-length)/16 - 10px);border:0;background:transparent;box-shadow:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.track-end-handle::before{content:'';position:absolute;left:9px;top:0;bottom:0;width:2px;background:#8da985;border-radius:2px;pointer-events:none}.track-end-handle:hover::before{background:#c4d5af;box-shadow:0 0 4px #9ab99180}.polymeter-dragging,.polymeter-dragging *{cursor:ew-resize!important;user-select:none!important;-webkit-user-select:none!important}
.roll-cell[draggable=true]{-webkit-user-drag:auto}
.roll-cell[draggable=true],.roll-cell[draggable=true]:active{cursor:default}
.device-slot-name{display:block;max-width:180px;min-height:15px;margin-top:5px;color:#cbd4a9;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;text-transform:none}
.studio-toolbar{position:relative;display:flex;flex-wrap:nowrap;gap:14px;align-items:center;padding:12px 0;margin-bottom:10px;min-height:62px}.studio-toolbar .web-home{flex:0 0 85px;margin:0;font-size:16px}.toolbar-status{flex:1;min-width:70px;max-width:220px;overflow:hidden}.toolbar-status #connection-status{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:10px ui-monospace,SFMono-Regular,monospace}.toolbar-slots{display:flex;flex:0 0 auto;gap:12px;align-items:center}.toolbar-slots .field{flex:0 0 140px;width:140px;min-width:140px;margin:0;gap:3px}.toolbar-slots .field input{width:72px;height:28px;padding:4px 7px}.toolbar-slots .device-slot-name{width:140px;max-width:140px;min-width:140px;height:15px;margin-top:2px}.toolbar-actions{display:flex;flex:0 0 auto;gap:7px;align-items:center}.studio-toolbar .web-midi-settings{position:relative;margin:0;flex:0 0 auto}.studio-toolbar .web-midi-settings>summary{font-size:9px;padding:9px;border:1px solid #515960;border-radius:3px;background:#252b31;white-space:nowrap}.studio-toolbar .web-midi-settings>div,.studio-toolbar .web-midi-settings>p{position:absolute;right:0;top:35px;z-index:120;background:#22272e;border:1px solid #5f6c61;padding:14px;width:650px;box-shadow:0 8px 24px #0009}.studio-toolbar .web-midi-settings>p{top:210px;font-size:11px;margin:0}.studio-toolbar .app-settings .settings-panel{top:36px}.studio-toolbar [hidden]{display:none!important}.pattern-workspace>.section-head{display:none}.pattern-workspace{padding-top:8px!important}.sequencer-feedback{display:flex;justify-content:space-between;gap:20px;min-height:16px;margin:0 0 8px}.sequencer-feedback .pattern-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0;font-size:10px}#variation-follow{display:none!important}
.studio-toolbar .web-midi-settings>div>p{flex-basis:100%;font-size:11px;line-height:1.5;margin:6px 0 0;color:#aeb9ae}

/* Keep connection controls right-aligned; slot selection sits above the grid. */
.toolbar-actions{margin-left:auto}.toolbar-status{max-width:360px}.sequencer-feedback{align-items:center;min-height:64px}.sequencer-slots{margin-left:auto}.sequencer-feedback #pattern-status{display:none}.toolbar-slots .field{flex:0 0 160px;width:160px;min-width:160px}.toolbar-slots .device-slot-name{width:160px;min-width:160px;max-width:160px}.toolbar-slots .field input{width:90px;height:32px}.studio-toolbar .app-settings .web-midi-settings{margin:12px 0}.studio-toolbar .app-settings .web-midi-settings>summary{font-size:12px;padding:8px}.studio-toolbar .app-settings .web-midi-settings>div{position:static;width:auto;box-shadow:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.studio-toolbar .app-settings .web-midi-settings:not([open])>div{display:none}.studio-toolbar .app-settings .web-midi-settings label{min-width:140px;flex:1}.studio-toolbar .app-settings .web-midi-settings select{max-width:100%}.studio-toolbar .settings-panel{max-height:80vh;overflow:auto}

/* Compact sequencer toolbar: slots align with the variation controls. */
.studio-toolbar{min-height:44px;padding:6px 0;margin-bottom:4px}.studio-toolbar .button{min-height:30px;height:30px;padding:5px 12px}.sequencer-feedback{min-height:14px;margin:0 0 5px}.pattern-workspace{padding-top:4px!important}.variation-tabs{height:46px;margin-bottom:8px;gap:6px}.variation-tabs .sequencer-slots{margin-left:auto;gap:10px;align-self:center}.sequencer-slots .field{display:grid;grid-template-columns:58px 96px;grid-template-rows:24px 14px;align-items:center;column-gap:6px;row-gap:0;font-size:8px;flex:0 0 160px;height:40px}.sequencer-slots .field input{grid-column:2;grid-row:1;width:96px;height:24px;padding:2px 6px}.sequencer-slots .device-slot-name{grid-column:1 / -1;grid-row:2;margin:0;font-size:9px;height:14px}.variation-tabs .roll-bar{flex-shrink:0}.variation-tabs .random-density{flex-shrink:0}
/* Stable black slot displays include both slot number and device name. */
.sequencer-slots .field{position:relative;display:block;width:198px;min-width:198px;flex:0 0 198px;height:32px;padding:0 0 0 58px;line-height:32px;font-size:8px;box-sizing:border-box}.sequencer-slots .field input{position:absolute;left:58px;top:0;width:140px;height:32px;margin:0;padding:4px 104px 4px 6px;box-sizing:border-box;font-size:10px;background:#0e1014}.sequencer-slots .device-slot-name{position:absolute;left:98px;top:0;width:92px;min-width:92px;max-width:92px;height:32px;line-height:32px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;pointer-events:auto}.sequencer-slots .field input::-webkit-inner-spin-button,.sequencer-slots .field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sequencer-slots .field input{appearance:textfield;-moz-appearance:textfield}.variation-tabs{height:36px}
.sequencer-slots .field{display:flex;align-items:center;padding:0 140px 0 0;line-height:12px}

/* Center slot labels over their fixed black displays. */
.sequencer-slots .field{display:block;padding:0;width:140px;min-width:140px;flex:0 0 140px;height:46px;text-align:center;line-height:12px;font-size:8px}.sequencer-slots .field input{left:0;top:14px;width:140px;height:30px;text-align:left}.sequencer-slots .device-slot-name{left:40px;top:14px;height:30px;line-height:30px;text-align:left}.variation-tabs{height:48px}.samples-section .section-head #trial-send{flex:0 0 auto;height:38px;min-height:38px;margin:0 8px 0 0;padding:7px 14px}

.sequencer-slots .slot-navigation{position:absolute;right:4px;top:18px;display:flex;gap:2px;height:22px}.slot-navigation button{width:18px;height:22px;padding:0;min-height:0;border:1px solid #434951;border-radius:2px;background:#242930;color:#bed3ab;font-size:13px;line-height:20px;cursor:pointer}.slot-navigation button:hover{background:#3b4940}.sequencer-slots .device-slot-name{width:56px;min-width:56px;max-width:56px}.sequencer-slots .field input{padding-right:104px}
.sequencer-slots .field{width:180px;min-width:180px;flex-basis:180px}.sequencer-slots .field input{width:180px;padding-right:144px}.sequencer-slots .device-slot-name{width:96px;min-width:96px;max-width:96px}
/* Shared control rhythm: 32px controls, centered 8px labels, fixed fields. */
.sequencer-feedback{display:none}.variation-tabs{height:46px;align-items:flex-end}.variation-tabs .sequencer-slots{align-self:flex-end;align-items:flex-end}.sequencer-slots .field{height:46px;font-size:8px;letter-spacing:1.1px;font-weight:800;line-height:12px}.sequencer-slots .field input{top:14px;height:32px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:3px}.sequencer-slots .device-slot-name{top:14px;height:32px;line-height:32px;font-size:11px}.sequencer-slots .slot-navigation{top:19px}.samples-section .section-head{align-items:flex-end}.samples-section .kitname{width:180px;min-width:180px;flex:0 0 180px;height:46px;gap:2px;text-align:center;font-size:8px;line-height:12px;letter-spacing:1.1px;font-weight:800}.samples-section .kitname input{box-sizing:border-box;width:180px;height:32px;min-height:32px;border-radius:3px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;padding:4px 8px}.kit-preview .pattern-transport{align-items:flex-end}.kit-preview .field{text-align:center;font-size:8px;line-height:12px;gap:2px}.kit-preview .field input{box-sizing:border-box;height:32px;min-height:32px;border-radius:3px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.samples-section .section-head #trial-send,.kit-preview .pattern-transport .button{box-sizing:border-box;height:32px;min-height:32px;font:700 9px "Helvetica Neue",Arial,sans-serif;letter-spacing:.65px;padding:6px 10px;margin-bottom:0}.variation-tabs .button{height:32px;min-height:32px;font-size:9px;padding:6px 10px}

.samples-section .kitname .trial-kit-select{box-sizing:border-box;width:180px;height:32px;min-height:32px;background:#0e1014;border:1px solid #555660;border-radius:3px;color:#d1d39a;padding:4px 8px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}.roll-cell{touch-action:none}

.samples-section .kitname input[hidden]{display:none!important}
/* Mouse selection stays quiet; retain keyboard focus and the transport indicator. */
.roll-cell.selected{outline:none;box-shadow:none}.roll-cell:focus:not(:focus-visible){outline:none}.samples-section .kitname .trial-kit-select{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 0 32px;width:180px;height:32px;min-height:32px;max-height:32px;margin:0;padding:0 24px 0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:400;line-height:normal;letter-spacing:0;color:#d1d39a;background-color:#0e1014;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d1d39a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:10px 7px;background-position:right 8px center;border:1px solid #555660;border-radius:3px}.samples-section .kitname .trial-kit-select option{font:11px ui-monospace,SFMono-Regular,Menlo,monospace}

.samples-section .kitname #trial-kit[hidden]{display:none!important}.trial-kit-menu{position:relative;width:180px;flex:0 0 32px;height:32px;text-align:left}.trial-kit-display{list-style:none;display:block;box-sizing:border-box;width:180px;height:32px;line-height:30px;padding:0 24px 0 8px;border:1px solid #555660;border-radius:3px;background:#0e1014;color:#d1d39a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:400;letter-spacing:0;cursor:pointer}.trial-kit-display::-webkit-details-marker{display:none}.trial-kit-display::after{content:'⌄';position:absolute;right:8px;top:0;font-size:14px}.trial-kit-menu>div{position:absolute;top:34px;left:0;width:180px;z-index:30;background:#0e1014;border:1px solid #555660;padding:4px}.trial-kit-menu:not([open])>div{display:none}.trial-kit-menu>div button{display:block;width:100%;padding:7px 8px;text-align:left;border:0;background:transparent;color:#d1d39a;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.trial-kit-menu>div button:hover{background:#35443a}

.variation-tabs #random-steps{flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:2px;display:flex;align-items:center;justify-content:center;align-self:flex-end}.variation-tabs #random-steps svg{width:25px;height:25px;display:block}
/* Sample import aligns with the sequencer's 146px channel controls. */
.samples-section .section-head>div:first-child{display:none}.samples-section .sample-import{box-sizing:border-box;width:146px;min-width:146px;max-width:146px;flex:0 0 146px;height:46px;min-height:46px;margin-left:0;padding:6px 8px;gap:7px}.samples-section .sample-import svg{width:23px;height:23px}.samples-section .sample-import strong{font-size:10px;letter-spacing:0;white-space:nowrap}.samples-section .sample-import small{font-size:7px;letter-spacing:0;white-space:nowrap;margin-top:3px}

#trial-signin-form{display:flex;flex-wrap:wrap;gap:10px;max-width:420px;margin:22px auto 14px}#trial-signin-form label{width:100%;text-align:left;font-size:11px;color:#b5c3af}#trial-signin-email{flex:1;min-width:180px;height:42px;padding:8px 12px;background:#0e1014;border:1px solid #69765d;border-radius:3px;color:#e3e7da;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}#trial-signin-form .button{height:42px;padding:8px 16px;font-size:11px}#trial-signin-overlay #trial-signin-message{font-size:13px;margin-top:12px}