.hu-status-pill{color:#ffffffb3;cursor:pointer;font:inherit;letter-spacing:.02em;background:#4ade801a;border:1px solid #4ade8040;border-radius:20px;align-items:center;gap:6px;padding:5px 12px;font-size:14px;font-weight:600;transition:background .12s,border-color .12s;display:inline-flex}.hu-status-pill:hover{background:#4ade8026;border-color:#4ade8066}.hu-device-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.hu-device-dot-on{background:#4ade80;box-shadow:0 0 8px #4ade8080}.hu-device-dot-warn{background:#f5a623;animation:1.2s ease-in-out infinite hu-pulse;box-shadow:0 0 8px #f5a62399}@keyframes hu-pulse{0%,to{opacity:1}50%{opacity:.35}}.hu-status-pill .hu-device-dot{width:6px;height:6px}.hu-status-pill-warn{color:#f5a623;background:#f5a6231a;border-color:#f5a62366}.hu-status-pill-warn:hover{background:#f5a6232e;border-color:#f5a6238c}.hu-info-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:20px;animation:.15s hu-info-fade-in;display:flex;position:fixed;inset:0}@keyframes hu-info-fade-in{0%{opacity:0}to{opacity:1}}.hu-device-info-modal{color:#e8e8ea;background:#16161e;border:1px solid #ffffff14;border-radius:16px;width:320px;max-width:90vw;padding:24px;position:relative}.hu-info-close{color:#fff6;cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:22px;line-height:1;position:absolute;top:10px;right:10px}.hu-info-close:hover{color:#e8e8ea}.hu-device-info-title{align-items:center;gap:8px;margin-bottom:14px;font-size:18px;font-weight:700;display:flex}.hu-device-info-row{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.hu-device-info-label{color:#ffffff80;font-size:15px}.hu-device-info-value{color:#ffffffd9;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}.hu-device-info-disconnect{color:#e8e8ea;cursor:pointer;width:100%;font:inherit;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;margin-top:16px;padding:10px;font-weight:600}.hu-device-info-disconnect:hover{background:#ffffff14}.hu-cheatsheet{color:#e8e8ea;background:#ffffff05;border:1px solid #ffffff14;border-radius:10px;margin-top:28px}.hu-cheatsheet-toggle{width:100%;color:inherit;font:inherit;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;padding:10px 14px;font-size:15px;font-weight:600;display:flex}.hu-cheatsheet-toggle:hover{background:#ffffff08}.hu-cheatsheet-hint{color:#ffffff73;font-size:14px;font-weight:500}.hu-cheatsheet-hint kbd{background:#ffffff0f;border:1px solid #ffffff14;border-radius:4px;justify-content:center;align-items:center;min-width:18px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,JetBrains Mono,monospace;font-size:15px;display:inline-flex}.hu-cheatsheet-chevron{color:#ffffff73;margin-left:auto}.hu-cheatsheet-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 18px;margin:0;padding:4px 14px 14px;font-size:14.5px;list-style:none;display:grid}.hu-cheatsheet-grid li{color:#fff9;align-items:center;gap:8px;line-height:1.5;display:flex}.hu-cheatsheet-grid li span:last-child{color:#e8e8ea}.hu-cheatsheet-keys{flex-shrink:0;align-items:center;gap:3px;display:inline-flex}.hu-cheatsheet-sep{color:#ffffff4d;padding:0 1px;font-size:15px}.hu-cheatsheet-grid kbd{color:#e8e8ea;background:#ffffff0f;border:1px solid #ffffff14;border-radius:4px;justify-content:center;align-items:center;min-width:20px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,JetBrains Mono,monospace;font-size:15px;display:inline-flex}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e8e8ea;--bg:#0a0a0f;--surface:#ffffff0a;--surface-strong:#ffffff14;--border:#ffffff14;--text:#e8e8ea;--muted:#9a9aa3;--dim:#6c6c76;--rose:#ef4468;--amber:#f5a623;--green:#4ade80;--error:#f87171;background:#0a0a0f;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}a{color:var(--rose);text-decoration:none}a:hover{text-decoration:underline}.page{max-width:1280px;margin:0 auto;padding:72px 24px 48px}.drive-page{max-width:1180px;padding-top:20px}.page-narrow{max-width:520px}@media (width<=720px){.page{padding:56px 14px 36px}.drive-page{padding-top:16px}}@media (width<=520px){.page{padding:48px 10px 28px}.drive-page{padding-top:12px}}@media (pointer:coarse){input[type=range]{height:30px}input[type=range]::-webkit-slider-thumb{width:26px!important;height:26px!important}input[type=range]::-moz-range-thumb{width:26px!important;height:26px!important}}.page-center{justify-content:center;align-items:center;min-height:70vh;display:flex}.muted{color:var(--muted)}.small{font-size:17px}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 24px}.button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;padding:12px 22px;font-size:17px;font-weight:600;text-decoration:none;transition:background .12s;display:inline-block}.button:hover{background:var(--surface-strong);text-decoration:none}.button.primary{background:var(--rose);color:#fff;border-color:var(--rose)}.button.primary:hover{background:#f0567a}.button:disabled{opacity:.5;cursor:not-allowed}.mono{font-family:ui-monospace,SFMono-Regular,JetBrains Mono,monospace}.key-select{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);font:inherit;letter-spacing:.04em;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path fill='rgba(255,255,255,0.6)' d='M6 7 0 0h12z'/></svg>");background-position:right 18px center;background-repeat:no-repeat;border-radius:10px;padding:12px 42px 12px 14px;font-size:17px}.key-select option{color:var(--text);background:#14141c}.error{color:var(--error);font-size:18px}.drive-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;padding-bottom:20px;display:flex}.drive-pattern-name{letter-spacing:-.01em;margin-top:4px;font-size:28px;font-weight:600}.drive-header-right{align-items:center;gap:14px;display:flex}.drive-viz-toggles,.drive-header-toggles{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.drive-header-toggles .drive-shuffle-countdown{color:var(--amber);font-variant-numeric:tabular-nums;background:#f5a62314;border:1px solid #f5a62340;border-radius:999px;padding:2px 10px;font-size:18px;font-weight:600}.toggle-chip,.action-chip{border:1px solid var(--border);color:var(--muted);font:inherit;cursor:pointer;letter-spacing:.02em;background:0 0;border-radius:999px;padding:4px 12px;font-size:18px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.toggle-chip:hover:not(:disabled),.action-chip:hover{background:var(--surface);color:var(--text)}.toggle-chip.on{color:var(--rose);background:#ef44681a;border-color:#ef446866}.toggle-chip:disabled{opacity:.4;cursor:not-allowed}.action-chip:active{transform:scale(.96)}.shuffle-interval{border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:4px 10px;font-size:18px;font-weight:600}.shuffle-interval:focus{outline:1px solid #ef446866}.drive-transport{grid-template-columns:1fr 1fr;align-items:start;gap:32px;margin-bottom:28px;padding:20px 0 8px;display:grid}@media (width<=720px){.drive-transport{grid-template-columns:1fr;gap:22px}}.drive-transport-controls{flex-direction:column;gap:18px;display:flex}.drive-transport-player{flex-direction:column;gap:10px;display:flex}.drive-play-btn-big{border:1px solid var(--rose);background:var(--rose);color:#fff;width:100%;font:inherit;letter-spacing:.02em;cursor:pointer;border-radius:10px;padding:12px 20px;font-size:17px;font-weight:700;transition:background .12s,transform 60ms}.drive-play-btn-big:hover{background:#f0567a}.drive-play-btn-big:active{transform:scale(.99)}.drive-play-btn-big:disabled{background:var(--surface);border-color:var(--border);color:var(--dim);cursor:not-allowed}.drive-play-btn-big.playing{background:var(--surface-strong);border-color:var(--border);color:var(--text)}.drive-player-actions{grid-template-columns:1fr 1fr;align-items:start;gap:8px;display:grid}.drive-shuffle-col{flex-direction:column;gap:8px;display:flex}.drive-player-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:9px 14px;font-size:15px;font-weight:600;transition:background .12s,border-color .12s,color .12s,transform 60ms;display:inline-flex}.drive-player-btn svg{width:16px;height:16px}.drive-player-btn:hover{background:var(--surface-strong);border-color:#ef446859}.drive-player-btn:active{transform:scale(.98)}.drive-player-btn.shuffle.on{border-color:var(--rose);color:var(--rose);background:#ef44681f}@media (width<=720px){.drive-play-btn-big{padding:16px 22px;font-size:19px}.drive-player-btn{padding:13px 16px;font-size:16px}.drive-player-btn svg{width:18px;height:18px}}.drive-shuffle-extras{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:2px 0 0;display:flex}.shuffle-pill{border:1px solid var(--border);height:28px;color:var(--text);font:inherit;cursor:pointer;font-variant-numeric:tabular-nums;background:0 0;border-radius:999px;align-items:center;gap:4px;padding:0 10px;font-size:13px;font-weight:600;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.shuffle-pill:hover:not(:disabled){background:var(--surface);border-color:#ef446859}.shuffle-pill.countdown{color:var(--amber);cursor:default;background:#f5a6231a;border-color:#f5a6234d}.shuffle-pill.countdown:hover{background:#f5a6231a;border-color:#f5a6234d}.shuffle-pill.skip{color:var(--rose);border-color:#ef44684d}.shuffle-pill.skip:hover:not(:disabled){border-color:var(--rose);background:#ef44681a}.shuffle-pill:disabled{opacity:.4;cursor:not-allowed}select.shuffle-pill{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,0.6)' d='M5 6 0 0h10z'/></svg>");background-position:right 8px center;background-repeat:no-repeat;padding-right:22px}select.shuffle-pill option{color:var(--text);background:#14141c}.preset-update-pill{color:var(--rose);font:inherit;cursor:pointer;letter-spacing:.02em;background:0 0;border:1px solid #ef446866;border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;transition:background .12s,border-color .12s,color .12s}.preset-update-pill:hover{background:#ef44681f}.preset-update-pill.active{background:var(--amber);border-color:var(--amber);color:#0a0a0f}.drive-slider{display:block}.drive-slider-label{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:18px;display:flex}.drive-slider-label .mono{color:var(--text);letter-spacing:0;text-transform:none;font-size:18px}.drive-slider input[type=range]{appearance:none;background:var(--surface-strong);border-radius:3px;outline:none;width:100%;height:6px}.drive-slider input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--rose);cursor:pointer;border:2px solid #0a0a0f;border-radius:50%;width:20px;height:20px}.drive-slider input[type=range]::-moz-range-thumb{background:var(--rose);cursor:pointer;border:2px solid #0a0a0f;border-radius:50%;width:20px;height:20px}.drive-play-row{justify-content:flex-end;display:flex}.drive-group{text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:24px 0 10px;font-size:18px;font-weight:500}.drive-pattern-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.viz{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:24px}.viz-empty{background:var(--surface);border:1px solid var(--border);border-radius:10px;justify-content:center;align-items:center;margin-bottom:24px;display:flex}.drive-presets{margin-bottom:32px}.drive-preset-grid{grid-template-columns:repeat(9,1fr);gap:6px;margin-top:10px;display:grid}@media (width<=720px){.drive-preset-grid{grid-template-columns:repeat(3,1fr)}}.drive-preset-btn{border:1px solid var(--border);color:var(--dim);cursor:pointer;font:inherit;text-align:center;background:#ffffff08;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:10px 8px;font-size:17px;line-height:1.25;display:flex}.drive-preset-btn.filled{color:var(--text);background:#ef44680f;border-color:#ef44684d}.drive-preset-btn:hover{color:var(--text);background:#ef44681a;border-color:#ef446880}.drive-preset-btn.save-mode{background:#f5a6230d;border-color:#f5a62380}.drive-preset-btn.save-mode:hover{background:#f5a62326}.drive-preset-slot{opacity:.7;font-size:17px;font-weight:700}.drive-preset-label{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:18px;overflow:hidden}.drive-preset-btn.filled .drive-preset-label{color:var(--text);opacity:.9}.drive-play-btn{min-width:140px}.drive-footer{border:1px solid var(--border);text-align:center;background:#ffffff05;border-radius:8px;margin-top:32px;padding:12px 16px}.link-like{color:var(--rose);cursor:pointer;background:0 0;border:none;padding:0;font-size:17px;font-weight:500}.link-like:hover{text-decoration:underline}.link-like:disabled{color:var(--dim);cursor:not-allowed;text-decoration:none}.link-like.danger{color:var(--error)}.mode-bar{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#0a0a0feb;position:sticky;top:0}.mode-bar-inner{flex-direction:column;gap:4px;max-width:1180px;margin:0 auto;padding:6px 16px 8px;display:flex}.mode-bar-top{justify-content:space-between;align-items:center;gap:12px;min-height:36px;padding-left:120px;display:flex}.mode-bar-brand{flex:1}.mode-bar-actions{align-items:center;gap:8px;display:flex}.mode-tabs{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}@media (width<=720px){.delos-account-brand{display:none!important}.delos-account-trigger{box-sizing:border-box;width:38px;height:38px;border-radius:50%!important;gap:0!important;padding:4px!important}.delos-account-trigger img{width:100%;height:100%}.mode-bar-top{padding-left:60px}}@media (width<=420px){.mode-bar-top{gap:8px;padding-left:52px}.mode-bar-actions{gap:6px}}.mode-tabs{gap:4px;display:flex}.mode-tab{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:8px 18px;font-size:18px;font-weight:600;transition:background .12s,color .12s}.mode-tab:hover{background:var(--surface);color:var(--text)}.mode-tab.active{color:var(--rose);background:#ef44681a;border-color:#ef446859}.mode-bar-icon{width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.mode-bar-icon:hover{background:var(--surface);color:var(--text);border-color:var(--border)}.settings-modal{width:520px;max-width:92vw;max-height:86vh;color:var(--text);background:#16161e;border:1px solid #ffffff14;border-radius:16px;padding:28px;position:relative;overflow-y:auto}.settings-title{letter-spacing:-.01em;margin:0 0 20px;font-size:18px;font-weight:700}.settings-section{border-bottom:1px solid #ffffff0f;margin-bottom:22px;padding-bottom:20px}.settings-section:last-of-type{border-bottom:none;margin-bottom:14px;padding-bottom:8px}.settings-section-header h3{text-transform:uppercase;letter-spacing:.1em;color:var(--rose);margin:0 0 2px;font-size:17px;font-weight:700}.settings-section-header p{margin:0 0 14px}.settings-row{margin-bottom:14px}.settings-row>label{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-size:18px;font-weight:600;display:flex}.settings-row input[type=range]{width:100%}.settings-toggle{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 0;display:flex}.settings-toggle:first-of-type{border-top:none}.settings-toggle.disabled{opacity:.4}.settings-toggle-label{margin-bottom:2px;font-size:18px;font-weight:600}.settings-switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.settings-switch input{opacity:0;width:0;height:0}.settings-switch span{background:var(--surface-strong);border:1px solid var(--border);cursor:pointer;border-radius:999px;transition:background .15s;position:absolute;inset:0}.settings-switch span:before{content:"";background:#9a9aa3;border-radius:50%;width:18px;height:18px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.settings-switch input:checked+span{border-color:var(--rose);background:#ef44684d}.settings-switch input:checked+span:before{background:var(--rose);transform:translate(20px)}.settings-switch input:disabled+span{cursor:not-allowed}.settings-footer{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;display:flex}.toolkit{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;padding:14px 18px}.toolkit-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.toolkit-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;border-radius:10px;flex-direction:column;align-items:center;gap:2px;min-width:84px;padding:10px 16px;font-size:18px;font-weight:600;display:inline-flex}.toolkit-btn:hover{background:var(--surface-strong)}.toolkit-btn.primary{color:var(--rose);background:#ef44681f;border-color:#ef446880}.toolkit-btn.primary:hover{background:#ef446833}.toolkit-btn.recording{border-color:var(--rose);color:#fff;background:#ef446840;animation:1.6s infinite pulse-record}.toolkit-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes pulse-record{0%,to{box-shadow:0 0 #ef446866}50%{box-shadow:0 0 0 8px #ef446800}}.toolkit-mutations{border-left:1px solid var(--border);align-items:center;gap:10px;padding:4px 0 4px 16px;display:flex}.toolkit-record{border-left:1px solid var(--border);align-items:center;gap:12px;margin-left:auto;padding-left:16px;display:flex}.queue-layout{grid-template-columns:260px 1fr;gap:24px;min-height:70vh;display:grid}@media (width<=840px){.queue-layout{grid-template-columns:1fr}}.queue-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:12px;height:fit-content;padding:18px 16px}.queue-sidebar-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.queue-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.queue-list-item{text-align:left;width:100%;color:var(--text);cursor:pointer;font:inherit;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.queue-list-item:hover{background:var(--surface-strong)}.queue-list-item.active{background:#ef446814;border-color:#ef446859}.queue-list-name{text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:600;overflow:hidden}.queue-editor{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:18px;min-height:400px;padding:24px;display:flex}.queue-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.queue-editor-header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:14px;display:flex}.queue-name-input{background:var(--surface-strong);border:1px solid var(--border);min-width:200px;color:var(--text);font:inherit;border-radius:8px;flex:1;padding:10px 12px;font-size:17px;font-weight:600}.queue-name-input:focus{border-color:#ef446880;outline:none}.queue-progress{background:var(--surface-strong);border:1px solid var(--border);border-radius:6px;height:28px;position:relative;overflow:hidden}.queue-progress-bar{background:linear-gradient(90deg,#ef44684d,#f5a6234d);transition:width .2s linear;position:absolute;inset:0 auto 0 0}.queue-progress-label{justify-content:center;align-items:center;padding:0 10px;font-size:18px;display:flex;position:absolute;inset:0}.queue-item-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.queue-item{border:1px solid var(--border);background:#ffffff05;border-radius:10px;flex-direction:column;gap:10px;padding:14px 16px;transition:border-color .12s;display:flex}.queue-item.current{background:#ef44680d;border-color:#ef446880}.queue-item-top{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.queue-item-idx{background:var(--surface-strong);width:24px;height:24px;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:inline-flex}.queue-item.current .queue-item-idx{background:var(--rose);color:#fff}.queue-item-select{background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font:inherit;border-radius:6px;padding:6px 10px;font-size:17px}.queue-item-duration{align-items:center;gap:6px;display:flex}.queue-item-duration input{background:var(--surface-strong);border:1px solid var(--border);width:70px;color:var(--text);font:inherit;border-radius:6px;padding:6px 8px;font-size:17px}.queue-item-reorder{gap:8px;margin-left:auto;display:flex}.queue-item-sliders{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}@media (width<=720px){.queue-item-sliders{grid-template-columns:repeat(2,1fr)}}.queue-mini-slider{flex-direction:column;gap:4px;display:flex}.queue-mini-slider input[type=range]{appearance:none;background:var(--surface-strong);border-radius:2px;outline:none;width:100%;height:4px}.queue-mini-slider input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--rose);cursor:pointer;border:2px solid #0a0a0f;border-radius:50%;width:14px;height:14px}.compose-meta{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}@media (width<=720px){.compose-meta{grid-template-columns:repeat(2,1fr)}}.compose-meta-row{flex-direction:column;gap:4px;display:flex}.compose-meta-row select,.compose-meta-row input{background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font:inherit;border-radius:6px;padding:8px 10px;font-size:17px}.compose-tabs{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding-bottom:8px;display:flex}.compose-tab{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px 8px 0 0;padding:6px 14px;font-size:17px;font-weight:600}.compose-tab:hover{color:var(--text)}.compose-tab.active{color:var(--rose);background:#ef446814;border-color:#ef446859 #ef446859 #0000}.compose-canvas{border:1px solid var(--border);cursor:crosshair;-webkit-user-select:none;user-select:none;background:#0000004d;border-radius:10px;width:100%;height:220px}.compose-legend{color:var(--muted);gap:24px;font-size:18px;display:flex}.compose-legend span{align-items:center;gap:6px;display:inline-flex}.compose-swatch{border-radius:1px;width:12px;height:3px;display:inline-block}.handson-page .handson-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;padding:18px 20px}.handson-card-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:10px;display:flex}.handson-card-header h3{letter-spacing:.04em;text-transform:uppercase;color:var(--rose);margin:0;font-size:15px;font-weight:700}.handson-rec-live{color:var(--rose);font-weight:600;animation:1.4s ease-in-out infinite handson-rec-pulse}.handson-record-body{grid-template-columns:auto 1fr;align-items:start;gap:24px;display:grid}@media (width<=640px){.handson-record-body{grid-template-columns:1fr;justify-items:center;gap:16px}}.handson-record-controls{flex-direction:column;gap:12px;width:100%;max-width:340px;display:flex}.handson-record-aux{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.handson-record-hint{margin:4px 0 0;line-height:1.4}.handson-player-card .handson-player-body{flex-direction:column;gap:14px;display:flex}.handson-player-controls{flex-direction:column;gap:8px;display:flex}.handson-player-row{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.handson-player-empty{text-align:center;padding:20px 10px}.vertical-slider{border:1px solid var(--border);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:#ffffff05;border-radius:14px;width:72px;height:300px;padding:0 8px;transition:border-color .12s,background .12s;position:relative}.vertical-slider.is-recording{background:#ef44680d;border-color:#ef446873}.vertical-slider:active{cursor:grabbing}.vertical-slider.is-disabled{opacity:.45;cursor:not-allowed}.vertical-slider-track{background:var(--surface-strong);border-radius:5px;width:10px;height:100%;margin:0 auto;position:relative;overflow:visible}.vertical-slider-fill{background:linear-gradient(#f5a623,#ef4468);border-radius:5px;position:absolute;bottom:0;left:0;right:0}.vertical-slider-thumb{background:var(--rose);cursor:grab;pointer-events:none;border:3px solid #0a0a0f;border-radius:999px;width:48px;height:32px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #ef446866}.vertical-slider-tick{color:var(--dim);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-left:8px;font-size:12px;font-weight:600;position:absolute;left:100%}.handson-controls{flex-direction:column;gap:12px;display:flex}.handson-recording-info{flex-wrap:wrap;align-items:center;gap:8px;padding:4px 2px;display:flex}.handson-playback-banner{color:var(--amber);background:#f5a62314;border:1px solid #f5a6234d;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:15px;font-weight:600;display:flex}.handson-playback-banner .link-like{color:var(--rose)}.drive-player-btn.record.on{border-color:var(--rose);color:var(--rose);background:#ef446826;animation:1.4s ease-in-out infinite handson-rec-pulse}@keyframes handson-rec-pulse{0%,to{box-shadow:0 0 #ef446880}50%{box-shadow:0 0 0 6px #ef446800}}.handson-presets{margin-top:6px}.handson-diag{border:1px solid var(--border);color:var(--muted);background:#ffffff05;border-radius:10px;margin-top:8px;padding:10px 14px;font-size:13px}.handson-diag summary{cursor:pointer;color:var(--text);font-weight:600}.handson-diag ul{gap:4px;margin:10px 0 0;padding:0;list-style:none;display:grid}.handson-diag .mono{color:var(--text)}.drive-preset-btn.playing{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}.classic-randomizer{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:14px;margin-bottom:24px;padding:20px;display:flex}.classic-randomizer-subheader{text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-top:4px;font-size:12px;font-weight:600}.classic-randomizer-row{grid-template-columns:1fr;gap:20px 32px;display:grid}.classic-randomizer-row.two-col{grid-template-columns:1fr 1fr}@media (width<=640px){.classic-randomizer-row.two-col{grid-template-columns:1fr}}.drive-slider.is-disabled{opacity:.45;pointer-events:none}.drive-slider.is-disabled .drive-slider-label .mono{color:var(--dim)}.shuffle-pill.countdown.pause{color:#6bc5ff;background:#6bc5ff1f;border-color:#6bc5ff59}.drive-cheatsheet-top{margin-bottom:20px}.drive-cheatsheet-top .hu-cheatsheet{margin-top:0}.drive-cheatsheet-top .hu-cheatsheet:not(.open){width:auto;max-width:max-content;display:inline-block}@media (width<=720px){.drive-cheatsheet-top .hu-cheatsheet:not(.open){display:none}.drive-cheatsheet-top:has(.hu-cheatsheet:not(.open)){margin-bottom:0}}.drive-subgroup{text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:18px 0 10px;font-size:18px;font-weight:500}.drive-pattern-grid.compact{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px}.drive-pattern-tile{position:relative}.drive-pattern-tile .drive-pattern-btn{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;font:inherit;border-radius:10px;align-items:center;min-height:48px;padding:14px 30px 14px 14px;transition:background .12s,border-color .12s;display:flex}.drive-pattern-tile .drive-pattern-btn:hover{background:var(--surface-strong);border-color:#ef446859}.drive-pattern-tile.active .drive-pattern-btn{border-color:var(--rose);background:#ef446814}.drive-pattern-tile .drive-pattern-title{letter-spacing:-.01em;font-size:17px;font-weight:600}.pattern-info-btn{border:1px solid var(--border);width:20px;height:20px;color:var(--muted);cursor:pointer;background:#ffffff0a;border-radius:50%;justify-content:center;align-items:center;font-family:Georgia,serif;font-size:17px;font-style:italic;font-weight:700;line-height:1;transition:background .12s,color .12s,border-color .12s;display:inline-flex;position:absolute;top:6px;right:6px}.pattern-info-btn:hover,.pattern-info-btn.open{color:var(--rose);background:#ef44681f;border-color:#ef446866}.pattern-info-popover{z-index:20;background:#16161e;border:1px solid #ffffff1f;border-radius:10px;padding:12px 14px;font-size:17px;line-height:1.45;animation:.12s cockpit-fade-in;position:absolute;top:calc(100% + 6px);left:0;right:0;box-shadow:0 10px 30px #00000080}.pattern-info-title{margin-bottom:4px;font-size:15.5px;font-weight:700}.pattern-info-popover p{margin:0 0 6px}.pattern-info-popover p:last-child{margin-bottom:0}@keyframes cockpit-fade-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@media (width<=520px){.mode-bar-inner{padding:4px 10px 6px}.mode-tab{padding:6px 10px;font-size:15px}}.device-info-divider{background:#ffffff0f;height:1px;margin:14px 0 10px}.device-info-section-label{text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:6px;font-size:17px}.buffer-row{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.buffer-stepper{background:var(--surface-strong);border:1px solid var(--border);border-radius:999px;align-items:center;gap:8px;padding:2px;display:inline-flex}.buffer-stepper button{width:26px;height:26px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:inline-flex}.buffer-stepper button:hover{color:var(--rose);background:#ef446826}.buffer-value{text-align:center;min-width:68px;color:var(--text);font-size:17px;font-weight:600}.buffer-warn{color:var(--amber)}.buffer-advisory{color:var(--text);background:#f5a6231a;border:1px solid #f5a6234d;border-radius:8px;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;font-size:18px;line-height:1.4;display:flex}.buffer-advisory button{background:var(--amber);color:#0a0a0f;font:inherit;cursor:pointer;border:none;border-radius:6px;flex-shrink:0;padding:4px 12px;font-size:18px;font-weight:700}.buffer-advisory button:hover{background:#ffbe4a}.buffer-events{border-top:1px solid #ffffff0f;margin-top:12px;padding-top:12px;font-size:18px}.buffer-events summary{cursor:pointer;color:var(--muted);padding:4px 0;font-weight:600}.buffer-events ul{max-height:150px;margin:6px 0 0;padding:0;list-style:none;overflow-y:auto}.buffer-events li{color:var(--text);grid-template-columns:auto 1fr;gap:10px;padding:2px 0;font-size:17px;display:grid}.buffer-events li .mono{color:var(--dim);font-size:18px}.toolkit-row{gap:12px}@media (width<=720px){.toolkit{padding:12px 14px}.toolkit-row{gap:10px}.toolkit-mutations,.toolkit-record{border-left:none;width:100%;padding-left:0}.toolkit-record{margin-left:0}}