.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:12px;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-status-pill .hu-device-dot{width:6px;height:6px}.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:16px;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:13px}.hu-device-info-value{color:#ffffffd9;font-variant-numeric:tabular-nums;font-size:13px;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}: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}.page-narrow{max-width:520px}.page-center{justify-content:center;align-items:center;min-height:70vh;display:flex}.muted{color:var(--muted)}.small{font-size:13px}.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:15px;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:15px}.key-select option{color:var(--text);background:#14141c}.error{color:var(--error);font-size:14px}.drive-header{border-bottom:1px solid var(--border);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:24px;font-weight:600}.drive-header-right{align-items:center;gap:14px;display:flex}.drive-controls{grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:24px;margin-bottom:32px;padding:20px 0;display:grid}@media (width<=720px){.drive-controls{grid-template-columns:1fr}}.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:12px;display:flex}.drive-slider-label .mono{color:var(--text);letter-spacing:0;text-transform:none;font-size:14px}.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:12px;font-weight:500}.drive-pattern-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.drive-pattern-btn{text-align:left;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;font:inherit;border-radius:10px;flex-direction:column;gap:4px;padding:14px;transition:background .12s,border-color .12s;display:flex}.drive-pattern-btn:hover{background:var(--surface-strong);border-color:#ef446859}.drive-pattern-btn.active{border-color:var(--rose);background:#ef446814}.drive-pattern-icon{opacity:.8;font-size:18px}.drive-pattern-title{font-size:14.5px;font-weight:600}.drive-pattern-desc{color:var(--muted);font-size:12px;line-height:1.35}.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-macros{background:var(--surface);border:1px solid var(--border);border-radius:12px;grid-template-columns:1fr 1.4fr 1fr;gap:24px;margin-bottom:24px;padding:20px;display:grid}@media (width<=720px){.drive-macros{grid-template-columns:1fr}}.drive-macro-heat input[type=range]{width:100%}.drive-chips{flex-wrap:wrap;gap:8px;display:flex}.drive-chip{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffff0a;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500}.drive-chip:hover{background:#ef446814;border-color:#ef446880}.drive-shuffle{flex-direction:column;justify-content:center;gap:10px;display:flex}.drive-shuffle-toggle,.drive-shuffle-secs{align-items:center;gap:8px;font-size:14px;display:flex}.drive-shuffle-secs select{background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font:inherit;border-radius:6px;padding:4px 8px;font-size:13px}.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:11.5px;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:13px;font-weight:700}.drive-preset-label{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:10.5px;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:13px;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{justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:10px 24px;display:flex}.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:14px;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-right{align-items:center;gap:12px;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:14px;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:14px;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:12px;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:12px;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:13px}.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:13px}.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:13px}.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:13px;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:12px;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}.classic-randomizer{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:18px;padding:20px;display:flex}.classic-randomizer-header{align-items:center;gap:14px;display:flex}.classic-current-pick{background:#ef44680f;border:1px solid #ef446840;border-radius:10px;align-items:center;gap:14px;padding:10px 14px;font-size:14px;display:flex}.classic-current-pick .mono{color:var(--text);flex:1}.classic-randomizer-grid{grid-template-columns:1fr 1fr;gap:20px 32px;display:grid}@media (width<=640px){.classic-randomizer-grid{grid-template-columns:1fr}}.classic-pause-row{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;padding-top:14px;display:flex}.classic-pause-row .button{padding:8px 16px;font-size:13px}