:root{--primary:#ddd;--secondary:#1e1f24;--transition-time:.1s;--transition-style:ease-in-out;--track-a:#5ec4b6;--track-b:#9b8cc4;--track-c:#d96b7d;--track-d:#7ea8d8;--bg-primary:#1f2028;--bg-raised:#262830;--bg-panel:#262830;--bg-card:#2e3038;--bg-hover:#ffffff0a;--bg-elevated:#ffffff08;--border:#ffffff14;--border-hover:#ffffff26;--text-primary:#dde0e8;--text-body:#8890a4;--text-secondary:#6a7080;--text-muted:#606474;--text-dim:#2a2c34;--accent:#5ec4b6;--accent-hover:#7ed4c8;--accent-glow:color-mix(in srgb, var(--accent) 20%, transparent);--accent-subtle:color-mix(in srgb, var(--accent) 10%, transparent);--accent-a04:color-mix(in srgb, var(--accent) 4%, transparent);--accent-a05:color-mix(in srgb, var(--accent) 5%, transparent);--accent-a06:color-mix(in srgb, var(--accent) 6%, transparent);--accent-a08:color-mix(in srgb, var(--accent) 8%, transparent);--accent-a12:color-mix(in srgb, var(--accent) 12%, transparent);--accent-a13:color-mix(in srgb, var(--accent) 13%, transparent);--accent-a15:color-mix(in srgb, var(--accent) 15%, transparent);--accent-a18:color-mix(in srgb, var(--accent) 18%, transparent);--accent-a20:color-mix(in srgb, var(--accent) 20%, transparent);--accent-a25:color-mix(in srgb, var(--accent) 25%, transparent);--accent-a30:color-mix(in srgb, var(--accent) 30%, transparent);--accent-a35:color-mix(in srgb, var(--accent) 35%, transparent);--accent-a40:color-mix(in srgb, var(--accent) 40%, transparent);--accent-a50:color-mix(in srgb, var(--accent) 50%, transparent);--accent-a60:color-mix(in srgb, var(--accent) 60%, transparent);--accent-a70:color-mix(in srgb, var(--accent) 70%, transparent);--accent-a80:color-mix(in srgb, var(--accent) 80%, transparent);--accent-a90:color-mix(in srgb, var(--accent) 90%, transparent);--error:#c44;--error-bg:color-mix(in srgb, var(--error) 8%, transparent);--error-border:color-mix(in srgb, var(--error) 20%, transparent);--success:#888;--success-bg:color-mix(in srgb, var(--success) 8%, transparent);--success-border:color-mix(in srgb, var(--success) 20%, transparent);--error-a10:color-mix(in srgb, var(--error) 10%, transparent);--error-a15:color-mix(in srgb, var(--error) 15%, transparent);--error-a25:color-mix(in srgb, var(--error) 25%, transparent);--error-a30:color-mix(in srgb, var(--error) 30%, transparent);--error-a50:color-mix(in srgb, var(--error) 50%, transparent);--error-a75:color-mix(in srgb, var(--error) 75%, transparent);--border-strong:#ffffff80;--cursor:var(--accent);--synth-key-white:#2e3038;--synth-key-black:#1f2028;--dilla-accent:#5ec4b6;--dilla-accent-bg:color-mix(in srgb, var(--dilla-accent) 8%, transparent);--dilla-accent-border:color-mix(in srgb, var(--dilla-accent) 20%, transparent);--glass-blur:blur(12px);--glass-blur-strong:blur(20px);--glass-blur-soft:blur(6px);--glass-border:transparent;--panel-bg:#262830;--panel-bg-subtle:#1f2028;--panel-bg-overlay:#1f2028eb;--btn-height-lg:32px;--btn-height-md:28px;--btn-height-sm:24px;--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--font-label:10px;--font-btn:12px;--font-btn-sm:11px;--font-value:12px;--radius:4px;--radius-sm:3px;--radius-xs:2px;--font-ui:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Menlo", monospace;--font-bitmap:"JetBrains Mono", "Menlo", monospace;--label-transform:none;--label-spacing:.03em;--label-weight:300}[data-theme=light]{--bg-primary:#f0f2f5;--bg-raised:#fff;--bg-card:#e8eaed;--bg-hover:#0000000a;--bg-elevated:#00000008;--border:#0000001a;--border-hover:#0003;--border-strong:#00000080;--text-primary:#1a1c22;--text-body:#4a5060;--text-secondary:#6a7080;--text-muted:#7880a0;--text-dim:#8898a8;--panel-bg:#fff;--panel-bg-subtle:#f0f2f5;--panel-bg-overlay:#fffffff5;--synth-key-white:#e8eaed;--synth-key-black:#2e3038;--glass-blur:blur(0px);--glass-blur-strong:blur(0px);--glass-blur-soft:blur(0px);--glass-border:#00000014}[data-theme=light] *{scrollbar-color:#0003 transparent}[data-theme=light] ::-webkit-scrollbar-thumb{background:#0003}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#00000059}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;margin:0;padding:0}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}html,body{height:100%;overflow:hidden}body.landing-mode{height:auto;overflow-y:auto}html:has(body.landing-mode){height:auto;overflow-y:auto}body.landing-mode #root{height:auto}body{background:var(--bg-primary);color:var(--text-body);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300}#root{z-index:1;width:100%;height:100%;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 16px 2px var(--accent-glow)}}@keyframes lcdBlink{0%,to{opacity:1}50%{opacity:.85}}.toast{z-index:9999;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-ui);letter-spacing:.03em;pointer-events:none;border-left-width:2px;align-items:flex-start;gap:7px;max-width:280px;padding:9px 14px;font-size:12px;font-weight:300;line-height:1.5;animation:.2s toastIn;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 20px #0009}.toast--success{border-left-color:var(--accent)}.toast--success svg{color:var(--accent);flex-shrink:0;margin-top:1px}.toast--error{border-left-color:var(--error)}.toast--error svg{color:var(--error);flex-shrink:0;margin-top:1px}.toast--info{border-left-color:var(--border-strong);color:var(--text-secondary)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.arr{background:var(--bg-primary);min-width:0;height:100%;color:var(--text-body);grid-template-rows:auto auto 1fr;grid-template-columns:1fr;font-family:Inter,sans-serif;font-weight:300;display:grid;overflow:hidden}.arr-info{border-bottom:1px solid var(--border);grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 16px;display:grid}.arr-info-brand{grid-area:1/1/auto/-1}.arr-genre-select{grid-area:2/1}.arr-info-meta{grid-area:2/2}.arr-info-actions{grid-area:2/3}.arr-info-brand{color:var(--text-secondary);letter-spacing:.04em;align-items:center;gap:7px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;display:inline-flex}.arr-info-dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background .2s}.arr-info-dot--playing{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:1.2s ease-in-out infinite arr-dot-pulse}@keyframes arr-dot-pulse{0%,to{opacity:1}50%{opacity:.35}}.arr-info-meta{align-items:baseline;gap:16px;min-width:0;font-family:JetBrains Mono,monospace;font-size:11px;display:flex;overflow:hidden}.arr-val{color:var(--text-primary);font-weight:400}.arr-lbl{color:var(--text-muted);letter-spacing:.03em;margin-left:3px;font-size:10px}.arr-info-actions{align-items:center;gap:4px;display:flex}.arr-track-dock{border-bottom:1px solid var(--border);justify-content:center;align-items:center;gap:2px;padding:5px 16px;display:flex}.arr-role-pill{cursor:pointer;background:0 0;border:none;border-radius:3px;align-items:center;gap:7px;padding:5px 10px;font-family:inherit;transition:background .12s;display:inline-flex}.arr-role-pill:hover{background:var(--bg-hover)}.arr-role-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.arr-role-letter{color:var(--text-body);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500}.arr-role-name{color:var(--text-secondary);letter-spacing:.03em;font-family:Inter,sans-serif;font-size:11px;font-weight:300}.arr-stage{min-width:0;min-height:0}.arr-stage canvas{touch-action:none;width:100%;height:100%;display:block}.arr-loop-btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:3px;justify-content:center;align-items:center;padding:0;font-size:14px;transition:border-color .12s,color .12s;display:inline-flex}.arr-loop-btn.active{border-color:var(--accent);color:var(--accent)}.arr-loop-btn:hover{border-color:var(--border-hover);color:var(--text-body)}@keyframes arr-drawer-in{0%{opacity:0;transform:translate(-50%)translateY(16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.arr-drawer{width:fit-content;max-width:calc(100vw - 24px);left:50%;bottom:calc(var(--transport-bar-height,0px) + 8px);z-index:25;-webkit-backdrop-filter:blur(20px);max-height:min(62vh, calc(100vh - var(--transport-bar-height,0px) - 120px));background:#1f2028b8;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;animation:.2s cubic-bezier(.22,1,.36,1) arr-drawer-in;display:flex;position:fixed;overflow-y:auto;transform:translate(-50%);box-shadow:0 -8px 32px #0006}.arr-drawer-handle{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:24px;display:flex;position:relative}.arr-drawer-handle:before{content:"";height:44px;position:absolute;top:-10px;left:0;right:0}.arr-drawer-handle:active{cursor:grabbing}.arr-drawer-handle-bar{pointer-events:none;background:#ffffff40;border-radius:2px;width:36px;height:4px;transition:background .12s;display:block}.arr-drawer-handle:hover .arr-drawer-handle-bar,.arr-drawer-handle:active .arr-drawer-handle-bar{background:#ffffff8c}.arr-drawer-header{z-index:1;background:0 0;justify-content:space-between;align-items:center;padding:10px 14px 0;display:flex;position:sticky;top:0}.arr-drawer-title{color:var(--accent);letter-spacing:.04em;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600}.arr-drawer-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:2px 6px;font-size:16px;line-height:1;position:relative}.arr-drawer-close:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arr-drawer-close:hover{color:var(--text-primary)}.arr-drawer-play{color:var(--text-muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;margin-left:auto;padding:2px 8px;font-size:11px;line-height:1.6;transition:color .15s,border-color .15s}.arr-drawer-play:hover{color:var(--accent);border-color:var(--accent)}.arr-drawer-play--active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)}.arr-drawer-remove{font-family:var(--font-ui);color:var(--text-muted);cursor:pointer;letter-spacing:.03em;background:0 0;border:none;padding:2px 8px;font-size:11px;font-weight:300;transition:color .15s}.arr-drawer-remove:hover{color:var(--error,#c44)}.arr-drawer-body{grid-template-columns:1fr;gap:0;padding:6px 14px;display:grid}.arr-drawer-type-row{align-items:center;gap:6px;width:100%;margin-bottom:4px;display:flex}.arr-drawer-type-row .arr-drawer-subtitle{flex-shrink:0;width:auto;margin-bottom:0}.arr-type-btn{font-family:var(--font-ui);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;letter-spacing:.03em;background:0 0;border-radius:3px;padding:3px 7px;font-size:11px;font-weight:300;transition:border-color .1s,color .1s}.arr-type-btn:hover{border-color:var(--border-hover);color:var(--text-body)}.arr-type-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-a08)}.arr-drawer-field{color:var(--text-secondary);align-items:center;gap:8px;width:100%;margin-bottom:2px;font-size:12px;display:flex}.arr-drawer-field label{font-family:var(--font-ui);width:44px;color:var(--text-muted);flex-shrink:0;font-weight:300}.arr-drawer-field input[type=range]{-webkit-appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;width:0;min-width:0;height:4px}.arr-drawer-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.arr-drawer-val{color:var(--text-primary);text-align:right;flex-shrink:0;min-width:32px;font-family:JetBrains Mono,monospace;font-size:12px}.arr-drawer-divider{background:var(--border);width:100%;height:1px;margin:4px 0}.arr-drawer-subtitle{font-family:var(--font-ui);color:var(--text-secondary);letter-spacing:.03em;width:100%;margin-bottom:4px;font-size:10px;font-weight:600}.arr-drawer-tracks-wrap{flex-direction:column;align-items:stretch;gap:0;width:100%;margin-bottom:2px;display:flex}.arr-drawer-track{border-top:1px solid #ffffff0f;align-items:center;gap:6px;min-width:0;padding:4px 0;display:flex}.arr-drawer-track:first-child{border-top:none;padding-top:2px}.arr-drawer-track-label{text-align:center;flex-shrink:0;width:18px;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:600}.arr-icon-select{border:1px solid var(--border);min-width:28px;height:24px;color:var(--text-body);cursor:pointer;background:0 0;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0 6px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;transition:border-color .12s,color .12s;display:inline-flex}.arr-icon-select:hover{border-color:var(--border-hover);color:var(--text-primary)}.arr-icon-select.open{border-color:var(--accent);color:var(--accent)}.arr-icon-select-item-icon{width:18px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.popover-item.active .arr-icon-select-item-icon{color:var(--accent)}.arr-icon-select-panel{font-family:var(--font-ui)}.arr-drawer-variant-row{flex-shrink:0;gap:2px;display:flex}.arr-variant-btn{border:1px solid var(--border);width:22px;height:22px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:border-color .1s,color .1s;display:inline-flex;position:relative}.arr-variant-btn:before{content:"";width:36px;height:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arr-variant-btn svg{display:block}.arr-variant-btn:hover{border-color:var(--border-hover);color:var(--text-body)}.arr-variant-btn.active{border-color:var(--accent);color:var(--accent);background:#5ec4b614}.arr-drawer-pat-row{flex-shrink:0;gap:2px;display:flex}.arr-pat-btn{border:1px solid var(--border);width:18px;height:22px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:2px;flex-shrink:0;padding:0;font-family:JetBrains Mono,monospace;font-size:10px;transition:border-color .1s,color .1s;position:relative}.arr-pat-btn:before{content:"";width:36px;height:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arr-pat-btn:hover{border-color:var(--border-hover);color:var(--text-body)}.arr-pat-btn.active{border-color:var(--accent);color:var(--accent);background:#5ec4b61f}.arr-auto-tag{color:var(--accent);opacity:.85;letter-spacing:.03em;white-space:nowrap;flex-shrink:0;align-items:center;gap:3px;margin-left:4px;font-family:JetBrains Mono,monospace;font-size:11px;display:inline-flex}.arr-auto-tag-icon{justify-content:center;align-items:center;width:16px;display:inline-flex}.arr-auto-tag-icon svg{display:block}.arr-auto-tag-arrow{opacity:.7;flex-shrink:0;display:block}.arr-auto-tag--muted{color:var(--text-muted)}.arr-energy-wrap{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.arr-energy-wrap input[type=range]{background:linear-gradient(90deg,#5ec4b61a 0% 35%,#5ec4b642 35% 75%,#5ec4b67a 75% 100%);width:100%;min-width:0}.arr-energy-zones{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.02em;opacity:.8;font-size:9px;display:flex}.arr-energy-zones span:first-child{width:35%}.arr-energy-zones span:nth-child(2){text-align:center;width:40%}.arr-energy-zones span:nth-child(3){text-align:right;width:25%}.cof-svg{-webkit-tap-highlight-color:transparent;touch-action:manipulation;width:100%;max-width:200px;margin:0 auto;display:block;overflow:visible}@media (width<=768px){.cof-svg{max-width:min(100%,240px)}}@media (width>=769px){.cof-svg{max-width:min(60vh,480px)}}@media (width>=769px) and (height<=900px){.cof-svg{max-width:min(45vh,360px)}}.cof-seg{cursor:pointer;fill:#0000;stroke:var(--border);stroke-width:.8px;transition:opacity .1s,fill .1s}.cof-seg--sel{stroke:var(--accent);stroke-width:1.5px;fill:var(--accent-subtle)!important}.cof-seg--hov{opacity:.75}.cof-seg:active{opacity:.55}.cof-lbl{font-family:var(--font-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none}.cof-lbl--major{fill:var(--text-secondary);font-size:10px;font-weight:400}.cof-lbl--minor{fill:var(--text-muted);font-size:8px;font-weight:300}.cof-lbl--sel{fill:var(--accent);font-weight:600}.cof-center{fill:var(--bg-raised);stroke:var(--border);stroke-width:1px}.cof-center-note{font-family:var(--font-ui);fill:var(--text-primary);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:18px;font-weight:300}.cof-center-scale{font-family:var(--font-ui);fill:var(--text-muted);text-anchor:middle;dominant-baseline:central;letter-spacing:.05em;pointer-events:none;font-size:6.5px}.cof-track-dot{opacity:.85}.cof-backdrop{z-index:300;-webkit-backdrop-filter:blur(6px);background:#000000b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cof-modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap-md);gap:var(--gap-sm);flex-direction:column;width:min(320px,92vw);display:flex}.cof-modal-header{justify-content:space-between;align-items:center;display:flex}.cof-modal-title{font-size:var(--font-label);letter-spacing:.04em;color:var(--text-secondary);font-weight:600}.cof-modal-close{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:14px;transition:background .12s,color .12s;display:flex}.cof-modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.cof-modal-hint{font-size:var(--font-label);color:var(--text-muted);text-align:center;letter-spacing:.02em;margin:0}.key-sync-panel{min-height:0;padding:var(--gap-md) var(--gap-md) var(--gap-lg);gap:var(--gap-sm);font-family:var(--font-ui);flex-direction:column;flex:1;display:flex}.key-sync-detect-btn{height:var(--btn-height-sm);border-radius:var(--radius-sm);color:var(--text-body);font-size:var(--font-btn-sm);font-family:var(--font-ui);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:0 10px;transition:background .15s,color .15s;display:inline-flex}.key-sync-detect-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.key-sync-section-label{font-size:var(--font-label);letter-spacing:.04em;color:var(--text-secondary);font-weight:600}.key-sync-master{padding-bottom:var(--gap-sm);flex-direction:column;gap:6px;display:flex}.key-sync-master-header{justify-content:space-between;align-items:center;display:flex}.key-sync-master-actions{align-items:center;gap:4px;display:flex}.key-sync-sync-btn{height:var(--btn-height-sm);border-radius:var(--radius-sm);color:var(--text-body);font-size:var(--font-btn-sm);font-family:var(--font-ui);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 10px;font-weight:300;transition:background .15s,color .15s}.key-sync-sync-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.key-sync-sync-btn.is-active{color:var(--accent);border-color:var(--accent-a25);background:var(--accent-subtle)}.key-sync-sync-btn.is-active:hover{background:var(--accent-subtle);color:var(--accent)}.key-sync-sync-btn:disabled{opacity:.35;cursor:default}.key-sync-global-row{align-items:center;gap:var(--gap-sm);flex-wrap:wrap;display:flex}.key-sync-step-btn{width:var(--btn-height-sm);height:var(--btn-height-sm);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:14px;font-family:var(--font-ui);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;line-height:1;transition:background .15s,color .15s;display:flex}.key-sync-step-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.key-sync-global-val{font-size:var(--font-value);color:var(--text-primary);text-align:center;letter-spacing:-.01em;min-width:32px;font-weight:400}.key-sync-bass-note{font-size:var(--font-btn-sm);color:var(--accent);background:var(--accent-subtle);border:1px solid var(--accent-a25);border-radius:var(--radius-xs);letter-spacing:.02em;padding:1px 5px;font-weight:400}.key-sync-tracks{gap:var(--gap-xs);border-top:1px solid var(--border);min-height:0;padding-top:var(--gap-sm);padding-bottom:var(--gap-sm);flex:1;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;grid-auto-flow:column;display:grid}.key-sync-track-row{align-items:center;gap:var(--gap-sm);border-left:2px solid var(--row-color,var(--border));border-radius:0 var(--radius-xs) var(--radius-xs) 0;padding:4px 10px;transition:background .12s;display:flex}.key-sync-track-row:hover{background:var(--bg-hover)}.key-sync-track-label{font-size:var(--font-label);color:var(--row-color,var(--text-muted));min-width:14px;font-weight:600}.key-sync-key-info{flex:1}.key-sync-key-text{align-items:baseline;gap:1px;display:inline-flex}.key-sync-key-root{letter-spacing:-.02em;font-size:16px;font-weight:400;line-height:1}.key-sync-key-scale{font-size:var(--font-btn-sm);color:var(--text-secondary);vertical-align:2px;font-weight:300}.key-sync-key--detected .key-sync-key-root{color:var(--text-primary)}.key-sync-key--loading{color:var(--text-muted);font-size:var(--font-btn-sm);align-items:center;gap:6px;display:flex}.key-sync-key--empty{font-size:var(--font-value);color:var(--text-muted)}.key-sync-key--uncertain .key-sync-key-root{color:var(--text-secondary)}.key-sync-uncertain-mark{font-size:var(--font-label);color:var(--text-muted);vertical-align:3px;margin-left:2px;font-weight:300}.key-sync-key-arrow{font-size:var(--font-label);color:var(--text-muted);margin:0 2px}.key-sync-key-current{letter-spacing:-.02em;color:var(--row-color);font-size:16px;font-weight:400;line-height:1}.key-sync-pitch-val{font-size:var(--font-label);color:var(--text-secondary);text-align:right;white-space:nowrap;min-width:28px;font-weight:400}.key-sync-pitch-val:not(:empty){background:var(--bg-card);border-radius:var(--radius-xs);padding:2px 5px}.key-sync-track-step{width:20px;height:20px;color:var(--text-muted);font-size:12px}.key-sync-track-step:hover{color:var(--text-primary)}.key-sync-exclude-btn{border-radius:var(--radius-xs);width:20px;height:20px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:color .15s,background .15s;display:flex}.key-sync-exclude-btn:hover{color:var(--text-secondary);background:var(--bg-hover)}.key-sync-exclude-btn.is-excluded{color:var(--accent)}.key-sync-exclude-btn.is-excluded:hover{color:var(--text-primary)}.key-sync-track-row.is-excluded .key-sync-key-info,.key-sync-track-row.is-excluded .key-sync-strength,.key-sync-track-row.is-excluded .key-sync-pitch-val{opacity:.4}.key-sync-strength{color:var(--text-muted);flex-shrink:0;font-size:1rem;line-height:1}.key-sync-wasm-state{justify-content:center;align-items:center;gap:var(--gap-sm);flex-direction:column;flex:1;display:flex}.key-sync-wasm-label{font-size:var(--font-btn-sm);color:var(--text-muted);margin:0}.key-sync-wasm-error{font-size:var(--font-label);color:var(--text-muted);opacity:.7;margin:0}@media (width<=768px){.key-sync-panel{padding:var(--gap-sm) var(--gap-sm) var(--gap-md);gap:4px}.key-sync-master{padding-bottom:var(--gap-xs);gap:4px}.key-sync-detect-btn,.key-sync-sync-btn,.key-sync-step-btn{min-width:44px;min-height:44px}.key-sync-track-row{min-height:36px}.key-sync-track-step,.key-sync-exclude-btn{min-width:28px;min-height:36px}.key-sync-tracks{grid-template-rows:repeat(4,1fr);grid-template-columns:1fr;grid-auto-flow:row}}@media (width>=769px){.key-sync-panel{justify-content:center;align-items:center;gap:var(--gap-lg)}.key-sync-master{width:100%;max-width:520px}.key-sync-global-row{justify-content:center}.key-sync-tracks{flex:none;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-flow:column;width:100%;max-width:640px}}.sources-panel{flex-direction:column;gap:12px;height:100%;padding:16px;display:flex;overflow-y:auto}.sources-panel-header{border-bottom:1px solid var(--border);align-items:center;padding-bottom:8px;display:flex}.sources-panel-title{letter-spacing:.03em;color:var(--text-secondary);text-transform:none;font-size:11px;font-weight:300}.sources-panel-list{flex-direction:column;gap:6px;display:flex}.source-slot{border:1px solid var(--border);background:var(--bg-card);border-radius:6px;align-items:center;min-height:48px;padding:0 12px;display:flex}.source-slot--empty{background:0 0;border-style:dashed;justify-content:center}.source-slot-add-btn{color:var(--text-secondary);letter-spacing:.03em;cursor:pointer;width:100%;transition:color var(--transition-time) var(--transition-style);background:0 0;border:none;padding:8px 16px;font-size:12px;font-weight:300}.source-slot-add-btn:hover{color:var(--accent)}.source-slot--loading{justify-content:flex-start}.source-slot-loading-text{color:var(--text-secondary);letter-spacing:.03em;font-size:11px}.source-slot--loaded{justify-content:space-between;gap:8px}.source-slot-info{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.source-slot-name{letter-spacing:.03em;color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:300;overflow:hidden}.source-slot-tracks{color:var(--accent);white-space:nowrap;flex-shrink:0;font-size:11px}.source-slot-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.source-slot-play-btn,.source-slot-delete-btn{cursor:pointer;width:28px;height:28px;color:var(--text-secondary);transition:color var(--transition-time) var(--transition-style), background var(--transition-time) var(--transition-style);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:flex}.source-slot-play-btn:hover{color:var(--accent);background:var(--accent-subtle)}.source-slot-play-btn.playing{color:var(--accent)}.source-slot-delete-btn:hover{color:var(--error);background:var(--error-a10)}.global-loading-bar{z-index:9000;align-items:flex-start;height:3px;display:flex;position:fixed;top:0;left:0;right:0;overflow:hidden}.global-loading-track{background:linear-gradient(90deg, transparent 0%, var(--accent) 40%, #fffc 50%, var(--accent) 60%, transparent 100%);background-size:200% 100%;height:3px;animation:1.2s ease-in-out infinite globalLoadingSlide;position:absolute;top:0;left:0;right:0}.global-loading-label{font-size:var(--font-btn-sm);font-family:var(--font-ui);color:var(--accent);background:var(--bg-card);border:1px solid var(--accent);white-space:nowrap;pointer-events:none;border-radius:2px;align-items:center;gap:5px;padding:2px 8px;display:flex;position:fixed;top:6px;left:50%;transform:translate(-50%)}@keyframes globalLoadingSlide{0%{background-position:100% 0}to{background-position:-100% 0}}.waveform-card,.step-sequencer{--accent:var(--track-color,var(--accent));background:0 0;border:none;border-radius:0;margin-left:-8px;margin-right:-8px}.pad-section{background:0 0;border:none;border-radius:0;margin-left:-8px;margin-right:-8px}.app{height:100dvh;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);padding-bottom:var(--transport-bar-height,0px);flex-direction:column;display:flex;overflow:hidden}.panel-swiper:not(.panel-swiper--locked){--accent:var(--track-color,var(--track-a));--accent-hover:color-mix(in srgb, var(--accent) 80%, white);--accent-glow:color-mix(in srgb, var(--accent) 30%, transparent);--accent-subtle:color-mix(in srgb, var(--accent) 10%, transparent)}.app--landing{height:auto;min-height:100dvh;overflow-y:auto}.app-topbar{padding:calc(env(safe-area-inset-top,0) + 8px) 16px 8px;background:var(--bg-primary);z-index:100;border-bottom:none;flex-shrink:0;justify-content:space-between;align-items:flex-end;gap:8px;animation:.4s ease-out both fadeInUp;display:flex;position:relative}.app-topbar-left{flex:1;align-items:center;gap:12px;min-width:0;display:flex;overflow:hidden}.hamburger-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;line-height:1;transition:background .15s,color .15s;display:flex}.hamburger-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.hamburger-btn.is-open{background:var(--accent-subtle);color:var(--accent)}.hamburger-btn.is-dirty{position:relative}.hamburger-btn.is-dirty:after{content:"";background:var(--accent);pointer-events:none;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:4px}.panel-swiper{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:0;flex:1;display:flex;position:relative;overflow:auto hidden}.panel-swiper::-webkit-scrollbar{display:none}.panel-swiper--locked{overflow-x:hidden}.panel-page{scroll-snap-align:start;flex-direction:column;flex:0 0 100%;gap:0;width:100%;height:100%;padding:12px 16px 0;display:flex;overflow:hidden auto}.panel-page:after{content:"";flex-shrink:0;height:12px;display:block}.panel-page>:last-child{flex:1;min-height:0}.panel-page>.pad-section{flex:1;height:auto;min-height:0}.panel-page .pad-grid{grid-auto-rows:auto;align-content:start;height:auto}.panel-page .pad{aspect-ratio:1}.panel-empty-hint{color:var(--text-muted);font-size:13px;font-family:var(--font-mono);pointer-events:none;flex:1;justify-content:space-between;align-items:center;padding:0 32px;display:flex}.panel-dots{justify-content:center;align-items:center;gap:var(--gap-lg);height:36px;margin-top:var(--gap-sm);flex-shrink:0;display:flex}.panel-dot{min-width:36px;min-height:36px;color:var(--text-muted);opacity:.4;cursor:pointer;justify-content:center;align-items:center;transition:color .15s,opacity .15s;display:flex}.panel-dot.active{color:var(--accent);opacity:1}.menu-overlay{z-index:800;background:#0006;position:fixed;inset:0}.hamburger-menu{background:var(--panel-bg-overlay);width:240px;height:100%;-webkit-backdrop-filter:var(--glass-blur-strong);border-left:1px solid var(--glass-border);flex-direction:column;gap:4px;padding:16px;animation:.2s ease-out both slideInRight;display:flex;position:absolute;top:0;right:0;overflow-y:auto}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.menu-section-label{letter-spacing:1px;color:var(--text-muted);text-transform:none;padding:12px 0 4px;font-size:10px;font-weight:600}.menu-section-label:first-child{padding-top:0}.menu-item{border-radius:var(--radius-sm);color:var(--text-body);font-size:13px;font-family:var(--font-ui);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:9px 10px;transition:background .15s,color .15s;display:flex}.menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}.menu-item svg{opacity:.7;flex-shrink:0}.menu-item--danger{color:var(--error)}.menu-item--danger:hover{background:var(--error-bg);color:var(--error)}.menu-item--link{color:var(--text-body);text-decoration:none}.menu-maker-card{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-body);background:var(--bg-elevated);padding:10px;text-decoration:none;transition:border-color .15s,background .15s,color .15s;display:block}.menu-maker-card:hover{border-color:var(--accent);background:var(--accent-subtle);color:var(--text-primary)}.menu-maker-card__title{color:var(--text-primary);letter-spacing:.03em;margin-bottom:4px;font-size:12px;display:block}.menu-maker-card__desc{color:var(--text-secondary);font-size:11px;line-height:1.45;display:block}.menu-theme-toggle{gap:4px;padding:4px 0;display:flex}.menu-item--theme{border:1px solid var(--border);flex:1;justify-content:center}.menu-item--theme.is-active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}.menu-item--theme.is-active svg{opacity:1}.app-body{flex-direction:column;gap:0;display:flex}.transport-bar{z-index:500;padding:0 24px max(env(safe-area-inset-bottom,0), 8px);background:var(--bg-raised);border-top:none;position:fixed;bottom:0;left:0;right:0}.transport-bar .beat-player{-webkit-backdrop-filter:none;background:0 0;border:none;margin-top:0;margin-bottom:0;animation:none}.header-right{align-items:center;gap:8px;display:flex}.main-row{margin-bottom:0}.pad-seq-area{animation:.4s ease-out .12s both fadeInUp}.pad-seq-tabs{align-items:flex-end;gap:2px;margin-bottom:0;display:flex}.track-type-toggle{align-self:center;gap:2px;margin-bottom:2px;margin-left:auto;display:flex}.pad-seq-tab{height:var(--btn-height-lg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border:1px solid var(--glass-border);color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-mono);cursor:pointer;background:#00000026;border-bottom:none;padding:6px 14px;transition:all .15s}.pad-seq-tab:hover{background:var(--bg-hover);color:var(--text-secondary)}.pad-seq-tab-active{background:var(--panel-bg);color:var(--accent)}.pad-seq-area .pad-section,.pad-seq-area .step-sequencer,.pad-seq-area .piano-roll{border-radius:0}.youtube-drawer-overlay{z-index:100;background:#00000080;animation:.2s ease-out fadeIn;position:fixed;inset:0}.youtube-drawer{background:var(--panel-bg-overlay);width:320px;-webkit-backdrop-filter:var(--glass-blur-strong);border-left:1px solid var(--glass-border);z-index:101;padding:16px;animation:.25s ease-out slideInRight;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.youtube-drawer .playlist-panel,.youtube-source-modal .playlist-panel{-webkit-backdrop-filter:none;background:0 0;border:none;width:100%;max-height:none}.youtube-source-modal .playlist-panel{border-radius:0;flex:1;min-height:0}.header-icon-btn{width:var(--btn-height-lg);height:var(--btn-height-lg);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:#0003;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.header-icon-btn:hover{color:var(--text-primary);background:#ffffff14}.youtube-toggle-btn{width:var(--btn-height-lg);height:var(--btn-height-lg);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:#0003;border:1px solid #0000;justify-content:center;align-items:center;font-size:13px;transition:all .15s;display:flex}.youtube-toggle-btn:hover{color:var(--text-primary);background:#ffffff14}.auth-btn{width:var(--btn-height-lg);height:var(--btn-height-lg);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:#0003;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.auth-btn:hover{color:var(--text-primary);background:#ffffff14}.export-popup-wrapper{align-self:flex-start;display:inline-block;position:relative}.export-trigger-btn{margin-top:4px}.export-popup{background:var(--panel-bg-overlay);-webkit-backdrop-filter:var(--glass-blur-strong);border:1px solid var(--glass-border);border-radius:var(--radius);z-index:50;gap:6px;margin-bottom:4px;padding:8px;animation:.15s ease-out fadeIn;display:flex;position:absolute;bottom:100%;left:0}.playlist-panel{background:var(--panel-bg);width:260px;-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);flex-direction:column;flex-shrink:0;max-height:calc(100vh - 100px);display:flex;overflow:hidden}.playlist-panel-header{font-size:var(--font-btn);color:var(--text-secondary);font-weight:600;font-family:var(--font-mono);text-transform:none;letter-spacing:.5px;border-bottom:1px solid var(--glass-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.playlist-url-bar{border-bottom:1px solid var(--glass-border);flex-shrink:0;gap:4px;padding:8px;display:flex}.playlist-url-bar input{border-radius:var(--radius-sm);border:1px solid var(--glass-border);min-width:0;color:var(--text-primary);font-size:var(--font-btn);font-family:var(--font-mono);background:#0003;outline:none;flex:1;padding:6px 8px;transition:border-color .15s}.playlist-url-bar input:focus{border-color:var(--accent)}.playlist-url-bar input::placeholder{color:var(--text-muted)}.playlist-url-bar button{border-radius:var(--radius-sm);background:var(--accent);color:var(--bg-primary);font-size:var(--font-btn);font-weight:300;font-family:var(--font-mono);cursor:pointer;white-space:nowrap;border:none;padding:6px 10px;transition:background .15s}.playlist-url-bar button:hover{background:var(--accent-hover)}.playlist-url-bar button:disabled{opacity:.4;cursor:not-allowed}.youtube-login-btn{border-radius:var(--radius);background:var(--accent);color:var(--bg-primary);font-size:12px;font-weight:300;font-family:var(--font-ui);text-align:center;margin:12px;padding:8px 16px;text-decoration:none;transition:background .15s;display:block}.youtube-login-btn:hover{background:var(--accent-hover)}.server-error-msg{border-radius:var(--radius-sm);background:var(--error-a10);border:1px solid var(--error-a25);color:var(--error);font-size:var(--font-btn-sm);font-family:var(--font-mono);text-align:center;flex-direction:column;align-items:center;gap:8px;margin:12px;padding:10px 14px;line-height:1.5;display:flex}.server-error-hint{font-size:var(--font-btn-sm);color:var(--error-a75);line-height:1.6}.server-error-link{color:var(--error);text-decoration:underline}.retry-btn{border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-family:var(--font-mono);background:0 0;padding:2px 8px}.retry-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.playlist-selector{border-bottom:1px solid var(--glass-border);flex-direction:column;flex-shrink:0;gap:1px;max-height:150px;padding:6px;display:flex;overflow-y:auto}.playlist-tab{color:var(--text-secondary);font-size:var(--font-btn);font-family:var(--font-ui);cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:4px;padding:6px 8px;transition:all .15s;overflow:hidden}.playlist-tab:hover{background:var(--bg-hover);color:var(--text-primary)}.playlist-tab.active{background:var(--accent-a18);color:var(--accent)}.playlist-loading{text-align:center;font-size:var(--font-btn);color:var(--text-muted);padding:12px}.playlist-empty{flex-direction:column;gap:6px;padding:16px 12px;display:flex}.playlist-empty p{font-size:var(--font-btn);color:var(--text-muted)}.playlist-empty .playlist-empty-hint{font-size:var(--font-label);color:var(--text-dim);margin-bottom:4px}.playlist-sort-bar{border-bottom:1px solid var(--bg-hover);gap:4px;padding:4px 8px;display:flex}.playlist-sort-btn{border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn-sm);cursor:pointer;background:0 0;border:1px solid #0000;flex:1;padding:3px 6px;transition:all .15s}.playlist-sort-btn:hover{background:var(--bg-hover);color:var(--text-body)}.playlist-sort-btn.active{background:var(--accent-a18);border-color:var(--accent-a40);color:var(--accent)}.playlist-items{flex:1;padding:4px;overflow-y:auto}.playlist-items::-webkit-scrollbar{width:4px}.playlist-selector::-webkit-scrollbar{width:4px}.playlist-items::-webkit-scrollbar-track{background:0 0}.playlist-selector::-webkit-scrollbar-track{background:0 0}.playlist-items::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.playlist-selector::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.playlist-items::-webkit-scrollbar-thumb:hover{background:#ffffff40}.playlist-selector::-webkit-scrollbar-thumb:hover{background:#ffffff40}.playlist-item{border-radius:4px;align-items:center;gap:6px;padding:5px 6px;transition:all .15s;display:flex}.playlist-item:hover{background:#ffffff0a}.playlist-item-info{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.playlist-thumb-wrap{flex-shrink:0;position:relative}.playlist-thumb{object-fit:cover;border-radius:3px;width:48px;height:36px;display:block}.playlist-duration{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-primary);background:#000000bf;border-radius:2px;padding:0 3px;line-height:1.4;position:absolute;bottom:2px;right:2px}.playlist-item-title{font-size:var(--font-btn);color:var(--text-body);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;display:-webkit-box;overflow:hidden}.playlist-fetch-btn{border:1px solid var(--glass-border);color:var(--text-secondary);font-size:var(--font-label);font-family:var(--font-mono);cursor:pointer;background:#0003;border-radius:3px;flex-shrink:0;padding:3px 8px;transition:all .15s}.playlist-fetch-btn:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.playlist-item-actions{flex-shrink:0;gap:4px;display:flex}.playlist-preload-btn{border:1px solid var(--glass-border);color:var(--text-muted);font-size:var(--font-btn-sm);cursor:pointer;background:#0003;border-radius:3px;padding:3px 6px;transition:all .15s}.playlist-preload-btn:hover{color:var(--text-primary);background:#ffffff14}.playlist-item-cached .playlist-fetch-btn{border-color:var(--success);color:var(--success)}.cache-badge{color:var(--success);font-size:var(--font-label);margin-right:4px}@media (width<=768px){.playlist-panel{width:100%;max-height:none}}.header{justify-content:space-between;align-items:center;margin-bottom:20px;padding:12px 0;animation:.5s ease-out both fadeInUp;display:flex;position:relative}.app-logo{color:var(--text-primary);letter-spacing:-.5px;border-left:2px solid var(--accent);align-items:center;gap:8px;padding-left:10px;font-size:18px;font-weight:700;display:flex}.beta-badge{font-size:var(--font-label);font-weight:400;font-family:var(--font-mono);color:var(--accent);background:var(--accent-a15);border:1px solid var(--accent-a30);letter-spacing:1px;border-radius:4px;padding:2px 6px;line-height:1}.local-badge{font-size:var(--font-label);font-weight:400;font-family:var(--font-mono);color:var(--success);background:var(--success-bg);border:1px solid var(--success-border);letter-spacing:1px;border-radius:4px;padding:2px 6px;line-height:1}.global-stop{height:var(--btn-height-lg);border-radius:var(--radius-sm);border:1px solid var(--error-a30);background:var(--error-bg);color:var(--error);font-size:var(--font-btn);font-weight:300;font-family:var(--font-mono);cursor:pointer;text-transform:none;letter-spacing:.5px;padding:0 14px;transition:all .15s}.global-stop:hover{background:var(--error);color:var(--bg-primary)}.error-banner{border-radius:var(--radius);background:var(--error-bg);border:1px solid var(--error-border);-webkit-backdrop-filter:var(--glass-blur);align-items:flex-start;gap:12px;margin-bottom:14px;padding:10px 14px;animation:.3s ease-out both fadeIn;display:flex}.error-text{font-size:var(--font-btn);color:var(--error);white-space:pre-wrap;word-break:break-all;font-family:var(--font-mono);-webkit-user-select:text;user-select:text;flex:1;margin:0;line-height:1.5}.error-close{color:var(--error);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:16px;line-height:1;transition:opacity .15s}.error-close:hover{opacity:.7}.url-bar{gap:8px;margin-bottom:20px;animation:.5s ease-out 50ms both fadeInUp;display:flex}.url-bar input{border-radius:var(--radius);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-primary);font-size:14px;font-family:var(--font-ui);background:#0003;outline:none;flex:1;padding:10px 14px;transition:border-color .2s,box-shadow .2s}.url-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.url-bar input:disabled{opacity:.5}.url-bar button{border-radius:var(--radius);background:var(--accent);color:var(--bg-primary);font-size:13px;font-weight:300;font-family:var(--font-ui);cursor:pointer;white-space:nowrap;border:none;padding:10px 20px;transition:background .15s,transform .1s}.url-bar button:hover{background:var(--accent-hover)}.url-bar button:active{transform:scale(.97)}.url-bar button:disabled{opacity:.4;cursor:not-allowed;transform:none}.landing{flex-direction:column;align-items:center;gap:32px;padding:48px 20px 40px;animation:.6s ease-out both fadeInUp;display:flex}.landing-hero{text-align:center;max-width:560px}.landing-title{color:var(--text-primary);letter-spacing:-1.5px;margin:0 0 12px;font-size:36px;font-weight:700;line-height:1.1}.landing-subtitle{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.6}.landing-loading{color:var(--text-body);flex-direction:column;align-items:center;gap:12px;padding:48px 24px;display:flex}.landing-loading-spinner{border:2px solid #ffffff1f;border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.landing-loading-text{font-size:13px;font-family:var(--font-mono);letter-spacing:.02em}.upload-dropzone{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;max-width:480px;padding:40px 32px;transition:border-color .25s,transform .25s;animation:.6s ease-out .1s both fadeInUp;display:flex}.upload-dropzone:hover,.upload-dropzone.drag-over{border-color:var(--accent);transform:translateY(-2px)}.upload-icon{color:var(--accent);opacity:.6;transition:opacity .25s,transform .25s}.upload-dropzone:hover .upload-icon,.upload-dropzone.drag-over .upload-icon{opacity:1;transform:translateY(-2px)}.upload-text{color:var(--text-body);font-size:14px;font-weight:300}.upload-hint{font-size:var(--font-btn);color:var(--text-muted);font-family:var(--font-mono)}.landing-features{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:640px;animation:.6s ease-out .2s both fadeInUp;display:grid}.feature-card{border-radius:var(--radius);border:1px solid var(--border);text-align:center;background:0 0;flex-direction:column;align-items:center;gap:6px;padding:24px 12px 20px;transition:border-color .2s;display:flex}.feature-card:hover{border-color:var(--border-hover)}.feature-step{color:var(--text-secondary);font-size:10px;font-weight:400;font-family:var(--font-mono);letter-spacing:.08em;line-height:1}.feature-icon{color:var(--accent);justify-content:center;align-items:center;margin-top:4px;margin-bottom:8px;display:flex}.feature-title{color:var(--text-primary);letter-spacing:.02em;font-size:13px;font-weight:400}.feature-desc{color:var(--text-muted);margin-top:2px;font-size:11px;line-height:1.5}.landing-idle-spinner{opacity:.4;justify-content:center;display:flex}.landing-alts{align-items:center;gap:10px;animation:.5s ease-out .15s both fadeInUp;display:flex}.landing-alt-btn{border-radius:var(--radius);border:1px solid var(--border);color:var(--text-body);font-size:12px;font-family:var(--font-ui);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:6px 14px;font-weight:300;transition:border-color .15s,color .15s;display:flex}.landing-alt-btn:hover{border-color:var(--border-hover);color:var(--text-primary)}.landing-alt-divider{color:var(--text-muted);font-size:11px}.landing-feature-list{grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:640px;animation:.6s ease-out .3s both fadeInUp;display:grid}.feature-group{flex-direction:column;gap:8px;display:flex}.feature-group-label{font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--accent);text-transform:uppercase}.feature-group-items{flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;display:flex}.feature-group-items li{color:var(--text-secondary);padding-left:12px;font-size:11px;line-height:1.4;position:relative}.feature-group-items li:before{content:"";background:var(--border-hover);width:4px;height:1px;position:absolute;top:6px;left:0}.landing-workflow-links{width:min(640px,100%);color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:11px;line-height:1.4;animation:.6s ease-out .35s both fadeInUp;display:flex}.landing-workflow-links__label{color:var(--text-secondary);letter-spacing:.03em;text-align:center;flex-basis:100%;font-size:10px}.landing-workflow-links a{color:var(--text-secondary);border-bottom:1px solid #0000;text-decoration:none;transition:color .15s,border-color .15s}.landing-workflow-links a:hover{color:var(--accent);border-color:#5ec4b673}.landing-preview{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:640px;animation:.6s ease-out .4s both fadeInUp;display:grid}.landing-preview-item{flex-direction:column;gap:6px;display:flex}.landing-preview-img{aspect-ratio:30/23;object-fit:contain;border-radius:var(--radius);width:100%;display:block}.landing-preview-caption{color:var(--text-muted);text-align:center;letter-spacing:.03em;font-size:10px}.landing-maker{border-top:1px solid var(--border);text-align:center;width:min(720px,100vw - 32px);margin:10px auto 0;padding:18px 0 0}.landing-maker__label{color:var(--text-primary);letter-spacing:.03em;margin-bottom:8px;font-size:12px;display:block}.landing-maker__copy{max-width:520px;color:var(--text-secondary);margin:0 auto 12px;font-size:13px;line-height:1.6}.landing-maker__link{color:var(--accent);letter-spacing:.03em;justify-content:center;align-items:center;gap:6px;font-size:12px;text-decoration:none;transition:color .15s;display:inline-flex}.landing-maker__link:hover{color:var(--accent-hover)}@media (width<=768px){.landing-title{font-size:28px}.landing-features{grid-template-columns:repeat(3,1fr);max-width:100%}.landing-feature-list{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.landing-features{grid-template-columns:repeat(3,1fr);max-width:100%}.landing-feature-list{grid-template-columns:repeat(2,1fr)}}.loading-container{flex-direction:column;align-items:center;gap:16px;padding:48px 0;animation:.3s ease-out both fadeIn;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.loading-status{color:var(--text-secondary);text-align:center;font-size:12px}.loading-step{color:var(--accent);font-weight:500;font-family:var(--font-mono);font-size:var(--font-btn)}.track-info{align-items:center;gap:12px;margin-bottom:14px;animation:.4s ease-out both fadeInUp;display:flex}.track-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden}.meta{align-items:center;gap:6px;display:flex}.tag{border-radius:var(--radius-sm);border:1px solid var(--glass-border);font-size:var(--font-btn);color:var(--accent);font-weight:400;font-family:var(--font-mono);letter-spacing:-.3px;background:#0003;padding:2px 7px}.bpm-control{align-items:center;gap:var(--gap-xs);margin-left:6px;display:inline-flex}.bpm-input-group{align-items:center;gap:3px;display:inline-flex}.bpm-input{border-radius:var(--radius-xs);border:1px solid var(--glass-border);width:56px;height:22px;color:var(--text-primary);font-size:12px;font-family:var(--font-mono);text-align:center;background:#0003;outline:none;padding:0 4px;transition:all .15s}.bpm-input:focus{border-color:var(--accent);background:#00000059}.bpm-input::placeholder{color:var(--text-secondary)}.bpm-label{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-muted);text-transform:none;letter-spacing:.5px}.bpm-tap{height:var(--btn-height-sm);border-radius:var(--radius-xs);border:1px solid var(--glass-border);color:var(--text-secondary);font-size:var(--font-btn-sm);font-weight:300;font-family:var(--font-mono);cursor:pointer;text-transform:none;letter-spacing:.5px;background:#0003;padding:0 7px;transition:all .15s}.bpm-tap:hover{color:var(--text-primary);background:#ffffff14}.bpm-tap:active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.bpm-metronome{border-radius:var(--radius-xs);border:1px solid var(--glass-border);color:var(--text-secondary);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:#0003;justify-content:center;align-items:center;min-width:28px;padding:2px 6px;transition:all .15s;display:flex}.bpm-metronome:hover{color:var(--text-primary);background:#ffffff14}.bpm-metronome-active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.met-beats{align-items:center;gap:3px;display:flex}.met-dot{background:#0000004d;border-radius:50%;width:5px;height:5px;transition:background 50ms}.met-dot-active{background:var(--bg-primary)}.bpm-reset{height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;text-transform:lowercase;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0 5px;transition:background .15s,color .15s;display:flex}.bpm-reset:hover{background:var(--bg-hover);color:var(--text-primary)}.waveform-container{margin-bottom:0}.waveform-outer{background:0 0;border:none;border-radius:0;position:relative;overflow:hidden}.waveform-loading{z-index:2;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.waveform-loading-bar{background:var(--bg-hover);border-radius:2px;width:60%;height:3px;position:relative;overflow:hidden}.waveform-loading-bar:after{content:"";background:var(--accent);border-radius:2px;width:40%;height:100%;animation:1.2s ease-in-out infinite waveformLoadSlide;position:absolute;top:0;left:-40%}@keyframes waveformLoadSlide{0%{left:-40%}to{left:100%}}.waveform-timeline{border-bottom:1px solid var(--glass-border);height:18px;position:relative;overflow:hidden}.timeline-marker{font-size:var(--font-label);color:var(--text-dim);font-family:var(--font-mono);border-left:1px solid var(--glass-border);pointer-events:none;height:100%;padding:2px 4px;position:absolute;top:0}.waveform-scroll{cursor:crosshair;touch-action:none;position:relative;overflow:scroll hidden}.waveform-scroll::-webkit-scrollbar{height:4px}.waveform-scroll::-webkit-scrollbar-track{background:0 0}.waveform-scroll::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.waveform-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff40}.waveform-inner{min-width:100%;position:relative}.waveform-body{position:relative}.waveform{z-index:1;position:relative}.region-overlay{background:var(--accent-subtle);border-left:2px solid var(--accent);border-right:2px solid var(--accent);z-index:2;pointer-events:none;position:absolute;top:0;bottom:0}.region-handle-floating{cursor:ew-resize;z-index:10;touch-action:none;justify-content:center;align-items:center;width:24px;margin-left:-12px;display:flex;position:absolute;top:0;bottom:0}.region-handle-bar{background:var(--accent);opacity:.5;width:4px;height:28px;transition:opacity var(--transition-time) var(--transition-style);border-radius:2px}.region-handle-floating:hover .region-handle-bar{opacity:1}.loop-btn{font-family:var(--font-mono);font-size:var(--font-btn-sm)!important}.loop-btn:disabled{opacity:.25;cursor:not-allowed!important}.loop-active{background:var(--accent-a18)!important;color:var(--accent)!important;border-color:var(--accent-a30)!important}.region-marker{background:var(--accent);z-index:2;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.slice-marker{background:var(--error-a50);z-index:3;pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.slice-range{z-index:2;pointer-events:none;transition:opacity .1s;position:absolute;top:0;bottom:0}.waveform-slice-cursor{background:var(--track-color);pointer-events:none;z-index:5;width:2px;height:100%;position:absolute;top:0;transform:translate(-50%)}.slice-preview-marker{z-index:3;pointer-events:none;border-left:1px dashed #ffffff59;width:1px;position:absolute;top:0;bottom:0}.cue-marker{background:var(--success);z-index:4;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.cue-label{font-size:var(--font-label);color:var(--success);pointer-events:none;line-height:1;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.waveform-minimap{background:var(--panel-bg);cursor:pointer;border:none;border-radius:0;height:24px;position:relative;overflow:hidden}.minimap-dim{pointer-events:none;background:#0000008c;position:absolute;top:0;bottom:0}.minimap-region{pointer-events:none;background:#fff3;border-left:1.5px solid #ffffff8c;border-right:1.5px solid #ffffff8c;position:absolute;top:0;bottom:0}.waveform-controls{align-items:center;gap:var(--gap-sm);margin-top:var(--gap-sm);flex-wrap:wrap;min-width:0;display:flex}.waveform-time{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary);min-width:70px}.waveform-controls button{width:var(--btn-height-lg);height:var(--btn-height-lg);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-btn);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.waveform-controls button:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.waveform-controls button:disabled{opacity:.35;cursor:not-allowed}.minimap-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.region-overlay.looping{animation:1.5s ease-in-out infinite loopPulse}@keyframes loopPulse{0%,to{background:var(--accent-subtle)}50%{background:var(--accent-a15)}}.region-info{font-size:var(--font-btn);color:var(--accent);font-weight:500;font-family:var(--font-mono);margin-left:auto}.hint{font-size:var(--font-btn-sm);color:var(--text-dim);margin-left:auto}.controls{align-items:center;gap:var(--gap-md);flex-wrap:wrap;margin-bottom:20px;animation:.4s ease-out .1s both fadeInUp;display:flex}.btn-primary{height:var(--btn-height-lg);border-radius:var(--radius-sm);background:var(--accent);color:var(--bg-primary);font-weight:300;font-size:var(--font-btn);font-family:var(--font-mono);cursor:pointer;border:1px solid #0000;padding:0 12px;transition:background .15s,transform .1s,box-shadow .2s}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 16px var(--accent-glow)}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{background:var(--text-muted);color:var(--text-secondary);cursor:not-allowed;box-shadow:none;transform:none}.export-btns{gap:4px;display:flex}.export-btns button,.btn-secondary{height:var(--btn-height-md);border-radius:var(--radius-sm);color:var(--text-body);font-size:var(--font-btn);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 12px;transition:all .15s}.export-btns button:hover,.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-secondary.active{background:var(--accent);color:var(--bg-primary)}.btn-secondary:disabled,.pad-rev-toggle:disabled{color:var(--text-muted);cursor:not-allowed;pointer-events:auto}.btn-secondary:disabled:hover,.pad-rev-toggle:disabled:hover{color:var(--text-muted);background:0 0}.toggle-btn{border-right:1px solid var(--glass-border);background:#00000026}.toggle-btn.active{background:var(--accent-a18);color:var(--accent)}.numeric-control{align-items:center;gap:var(--gap-xs);display:flex}.bpm-nudge{width:var(--btn-height-md);height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s;display:flex}.bpm-nudge:hover{background:var(--bg-hover);color:var(--text-primary)}.control-label{font-size:var(--font-label);color:var(--text-muted);font-weight:500;font-family:var(--font-mono);text-transform:none;letter-spacing:.5px}.numeric-input{width:50px;height:var(--btn-height-md);border-radius:var(--radius-xs);border:1px solid var(--bg-hover);color:var(--accent);font-size:var(--font-btn);font-weight:400;font-family:var(--font-mono);text-align:center;-moz-appearance:textfield;background:0 0;outline:none;padding:0 5px;transition:border-color .2s,box-shadow .2s}.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none}.numeric-input::-webkit-outer-spin-button{-webkit-appearance:none}.numeric-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.pitch-value{color:var(--accent);font-size:12px;font-weight:400;font-family:var(--font-mono);text-align:center;cursor:pointer;min-width:28px}.sensitivity-control{align-items:center;gap:6px;display:flex}.slice-control-label{font-size:var(--font-btn-sm);text-transform:none;letter-spacing:.03em;color:var(--text-secondary);font-weight:300;font-family:var(--font-mono)}.sensitivity-section{align-items:center;gap:4px;transition:opacity .15s;display:flex}.sensitivity-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;width:40px;height:3px}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:10px;height:10px}.pad-section{flex-direction:column;height:100%;padding:10px;display:flex}.pad-section .pad-grid{flex:none;align-content:start}.pad-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.pad-header h3{font-size:11px;font-family:var(--font-ui);color:var(--accent);text-transform:none;letter-spacing:.08em;opacity:.7;font-weight:500}.mode-toggle{gap:var(--gap-sm);display:flex}.popover-select{display:inline-flex;position:relative}.popover-trigger{white-space:nowrap;align-items:center;gap:5px;display:flex}.source-bar-popover{flex:1;min-width:0}.source-bar-popover .popover-trigger{min-width:0;max-width:100%;overflow:hidden}.source-bar-popover .popover-trigger-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.popover-trigger--open{background:var(--bg-hover);border-color:var(--border-hover)}.popover-chevron{font-size:var(--font-label);opacity:.55;line-height:1;transition:transform .15s}.popover-trigger--open .popover-chevron{transform:rotate(180deg)}.popover-panel{z-index:1000;background:var(--panel-bg-overlay);min-width:140px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);animation:.1s ease-out popoverIn;overflow:hidden;box-shadow:0 8px 24px #0006}@keyframes popoverIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.popover-item{width:100%;min-height:36px;color:var(--text-body);font-size:var(--font-btn);font-family:var(--font-ui);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:0 12px;transition:background .1s,color .1s;display:flex}.popover-item:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.popover-item.active{color:var(--accent)}.popover-item:disabled{opacity:.35;cursor:not-allowed}.popover-dot{border:1px solid var(--text-muted);background:0 0;border-radius:50%;flex-shrink:0;width:5px;height:5px;transition:background .1s,border-color .1s}.popover-item.active .popover-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 5px var(--accent-glow)}.control-strip{scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:center;gap:0;display:flex;overflow-x:auto}.control-strip::-webkit-scrollbar{display:none}.control-strip-group{align-items:center;gap:var(--gap-sm);padding:0 var(--gap-md);scroll-snap-align:start;flex-shrink:0;height:40px;display:flex}.control-strip-group+.control-strip-group{border-left:1px solid var(--glass-border)}@media (width<=768px){.control-strip{width:100%}.control-strip-group{height:44px}}.slider-popover{display:inline-flex;position:relative}.slider-popover-label{color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);text-transform:none;letter-spacing:.3px}.slider-popover-value{color:var(--accent);font-family:var(--font-mono);font-size:var(--font-btn-sm);text-align:right;min-width:22px}.slider-popover-panel{min-width:220px;padding:10px 14px}.slider-popover-row{align-items:center;gap:8px;display:flex}.slider-popover-row+.slider-popover-row{margin-top:8px}.slider-popover-row-label{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-muted);text-transform:none;min-width:16px}.slider-popover-row-value{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary);text-align:right;min-width:36px}.pad-role-badge{width:16px;height:16px;font-size:10px;font-family:var(--font-mono);border:1px solid var(--border-color,#ffffff26);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:3px;justify-content:center;align-items:center;margin-left:4px;padding:0;font-weight:600;transition:all .1s;display:inline-flex}.pad-role-badge:hover{border-color:var(--accent);color:var(--accent)}.pad-role-badge.pad-role-kick,.pad-role-badge.pad-role-snare,.pad-role-badge.pad-role-hat{color:var(--accent);border-color:var(--accent)}.seq-role-col{z-index:1;background:var(--bg-primary);flex-shrink:0;width:24px;min-width:24px;height:32px;margin-right:4px;position:sticky;left:42px}.seq-role-col.pad-role-badge{border-radius:0;justify-content:center;align-items:center;margin-left:0;font-size:11px;display:flex}.seq-role-col-header{background:0 0;border:none}.seq-generate-hint{color:var(--text-muted);font-size:11px;font-weight:300;line-height:1.4}.slider-popover-row input[type=range]{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex:1;height:3px}.slider-popover-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:box-shadow .15s}.slider-popover-row input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 6px var(--accent-glow)}.slider-popover--disabled .popover-trigger{opacity:.4;pointer-events:none}.pad-grid{gap:3px;padding-bottom:12px;display:grid}.pad{aspect-ratio:1;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;transition:background var(--transition-time) var(--transition-style), border-color var(--transition-time) var(--transition-style);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.pad:hover{background:var(--bg-hover);border-color:var(--border-hover)}.pad:active{background:#ffffff14}.pad-selected{outline:2px solid var(--track-color,var(--track-a));outline-offset:-2px}.pad-active{border-color:var(--track-color,var(--track-a))!important;background:color-mix(in srgb, var(--track-color,var(--track-a)) 12%, transparent)!important}.pad-header-controls{align-items:center;gap:var(--gap-sm);display:flex}.pad-header-divider{background:var(--glass-border);width:1px;height:16px;margin:0 2px}.export-inline-wrapper{position:relative}.export-inline-wrapper .export-popup{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);z-index:50;white-space:nowrap;gap:4px;margin-top:4px;padding:6px;display:flex;position:absolute;top:100%;right:0}.pad-rev-toggle{height:var(--btn-height-md);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-btn);font-weight:300;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 12px;transition:all .15s}.pad-rev-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}.pad-rev-active{background:var(--accent);color:var(--bg-primary)}.pad-active .pad-key,.pad-active .pad-duration{color:var(--text-primary)!important}.pad-loading{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pad-loading-bar{background:var(--bg-hover);border-radius:1px;width:50%;height:2px;position:relative;overflow:hidden}.pad-loading-bar:after{content:"";background:var(--text-muted);border-radius:1px;width:40%;height:100%;animation:1.2s ease-in-out infinite waveformLoadSlide;position:absolute;top:0;left:-40%}.pad-content{z-index:2;pointer-events:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.pad-key{font-size:20px;font-family:var(--font-bitmap);color:var(--text-secondary);font-weight:300}.pad-duration{font-size:var(--font-label);font-family:var(--font-bitmap);color:var(--text-muted);text-transform:none;letter-spacing:.08em;margin-top:2px;font-weight:300}.beat-player{border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-blur);margin-top:14px;margin-bottom:14px;padding:6px 12px;animation:.4s ease-out .1s both fadeInUp}.beat-player-bar{align-items:center;gap:var(--gap-md);flex-wrap:wrap;display:flex}.beat-play-btn{width:var(--btn-height-md);height:var(--btn-height-md);border-radius:var(--radius-xs,4px);color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;transition:all .15s;display:flex}.beat-play-btn:hover{background:var(--bg-hover)}.beat-play-btn:disabled{opacity:.3;cursor:not-allowed}.beat-playing{background:var(--accent);color:var(--bg-primary);animation:2s ease-in-out infinite pulseGlow}.beat-playing:hover{background:var(--accent-hover)}.beat-vol-label{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-muted);flex-shrink:0;margin-left:auto}.beat-volume-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex-shrink:0;width:60px;height:3px}.beat-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:10px;height:10px;transition:box-shadow .15s}.beat-volume-slider::-webkit-slider-thumb:hover{box-shadow:0 0 6px var(--accent-glow)}.beat-steps{flex-shrink:0;gap:2px;display:flex}.beat-step{background:#ffffff14;border-radius:2px;width:8px;height:8px;transition:background 60ms,box-shadow .1s}.beat-step-bar{border-left:1px solid var(--border-hover)}.beat-step-active{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}[data-theme=light] .beat-step{background:#0000001a}.beat-mute-solo-group{align-items:center;gap:var(--gap-sm);display:flex}.beat-mute-label{font-size:var(--font-label);color:var(--text-muted);font-family:var(--font-mono);text-transform:none;letter-spacing:.5px}.beat-mute-btns{gap:var(--gap-xs);display:flex}.beat-track-btn{border-radius:var(--radius-xs);width:24px;height:24px;font-size:var(--font-btn-sm);font-weight:300;font-family:var(--font-mono);cursor:pointer;color:var(--text-secondary);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.beat-track-btn:hover{background:var(--bg-hover)}.beat-track-btn-muted{background:var(--error-a15);color:var(--error)}.beat-track-btn-muted:hover{background:var(--error-a25)}.beat-track-btn-solo{background:var(--accent-a15);color:var(--accent);border-color:var(--accent-a30)}.beat-track-btn-solo:hover{background:var(--accent-a25)}.beat-file-label{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-xs,4px);border:1px solid var(--glass-border);white-space:nowrap;text-overflow:ellipsis;background:#0003;max-width:160px;padding:4px 8px;transition:background .15s;overflow:hidden}.beat-file-label:hover{background:var(--bg-hover)}.slice-panel{background:0 0;border:none;border-radius:0;flex-direction:column;padding:10px 14px;display:flex}.slice-overview-wrapper{flex-direction:column;flex:1;min-height:198px;margin-left:-8px;margin-right:-8px;animation:.4s ease-out .12s both fadeInUp;display:flex}.slice-overview-wrapper .sequencer-header{padding-left:0;padding-right:0}.slice-overview-wrapper .control-strip-group:first-child{padding-left:0}.slice-overview-wrapper .control-strip-group:last-child{padding-right:0}.slice-controls-row{align-items:center;gap:var(--gap-sm);font-size:var(--font-btn);flex-wrap:wrap;margin-bottom:8px;display:flex}.slice-controls-row .bpm-nudge{width:var(--btn-height-md);height:var(--btn-height-md);font-size:var(--font-btn)}.slice-controls-row .numeric-input{height:var(--btn-height-md);font-size:var(--font-btn)}.slice-controls-row .control-label{font-size:var(--font-btn)}.region-playback-controls{align-items:center;gap:4px;display:flex}.region-play-btn,.region-loop-btn{width:var(--btn-height-md);height:var(--btn-height-md);font-size:var(--font-btn)}.region-play-btn.active,.region-loop-btn.active{background:var(--accent-a18);color:var(--accent);border-color:var(--accent)}.region-time-display{font-family:var(--font-mono);font-size:var(--font-btn-sm);color:var(--text-secondary);letter-spacing:.3px;min-width:100px}.slice-overview-controls{justify-content:flex-end;align-items:center;gap:var(--gap-sm);margin-bottom:6px;display:flex}.slice-transport-bar{align-items:center;gap:var(--gap-sm);margin-top:var(--gap-sm);flex-wrap:wrap;min-width:0;display:flex}.slice-transport-btn{width:var(--btn-height-lg);height:var(--btn-height-lg);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-btn);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.slice-transport-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.slice-transport-btn:disabled{opacity:.35;cursor:not-allowed}.slice-transport-btn.active{color:var(--accent)}.slice-transport-sep{background:var(--glass-border);flex-shrink:0;width:1px;height:20px;margin:0 4px}.slice-transport-time{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary);min-width:70px}.slice-overview{background:0 0;border:none;border-radius:0;flex-direction:column;flex:1;min-height:96px;display:flex;position:relative;overflow:hidden}.slice-overview-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:4px 8px;display:flex}.slice-overview-title{font-size:var(--font-btn-sm);color:var(--text-muted);font-weight:600;font-family:var(--font-mono);text-transform:none;letter-spacing:.5px}.slice-overview-actions{gap:4px;display:flex}.slice-controls-actions-row{border-top:1px solid var(--glass-border);margin-top:2px;padding-top:4px}.slice-controls-actions-row .slice-controls-actions{gap:4px;margin-left:auto;display:flex}.slice-action-btn{min-width:var(--btn-height-md);height:var(--btn-height-md);border-radius:var(--radius-sm);border:1px solid var(--glass-border);color:var(--text-secondary);font-size:var(--font-btn);font-family:var(--font-mono);cursor:pointer;background:#0003;justify-content:center;align-items:center;padding:0 4px;transition:all .15s;display:flex}.slice-action-btn:hover{color:var(--text-primary);background:#ffffff14}.slice-overview-scroll{flex-direction:column;flex:1;min-height:96px;display:flex;position:relative;overflow-x:auto}.slice-overview-scroll::-webkit-scrollbar{height:6px}.slice-overview-scroll::-webkit-scrollbar-track{background:#0003}.slice-overview-scroll::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.slice-overview-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff40}.slice-overlay-btn{border-radius:var(--radius-xs);border:1px solid var(--glass-border);width:24px;height:24px;color:var(--text-secondary);cursor:pointer;z-index:5;background:#000000b3;justify-content:center;align-items:center;padding:0;font-size:13px;line-height:1;transition:all .15s;display:flex;position:absolute;top:4px}.slice-overlay-btn:hover{color:var(--text-primary);background:#ffffff26}.slice-overlay-add{transform:translate(4px)}.slice-overlay-delete{transform:translate(-28px)}.slice-ruler{background:var(--bg-primary);border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;height:16px;margin:0 4px;position:relative;overflow:visible}.slice-ruler-loop{background:var(--accent-a15);pointer-events:none;height:100%;position:absolute;top:0}.slice-ruler-marker{cursor:ew-resize;pointer-events:auto;align-items:flex-start;height:100%;display:flex;position:absolute;top:0;transform:translate(-50%)}.seek-marker{z-index:3}.loop-marker{z-index:4}.ruler-triangle{font-size:var(--font-label);padding-top:1px;line-height:1}.ruler-triangle.seek{color:var(--text-primary)}.ruler-triangle.left{color:var(--accent);transform:translate(-2px)}.ruler-triangle.right{color:var(--accent);transform:translate(2px)}.slice-overview-canvas{flex:1;width:100%;min-height:80px;display:block}.sidebar{flex-direction:column;gap:12px;display:flex}.sidebar-section{border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-blur);padding:10px 12px}.sidebar-title{font-size:var(--font-btn);color:var(--text-secondary);font-weight:600;font-family:var(--font-mono);text-transform:none;letter-spacing:.5px;margin-bottom:8px}.app-footer{font-size:var(--font-btn);color:var(--text-dim);font-family:var(--font-mono);justify-content:center;align-items:center;gap:8px;padding:24px 16px 16px;display:flex}.app-footer a{color:var(--text-muted);text-decoration:none;transition:color .15s}.app-footer a:hover{color:var(--accent)}.footer-dot{background:var(--text-dim);border-radius:50%;width:3px;height:3px}@media (width<=768px){html,body{overflow-x:hidden}.app{padding:0 0 28px}.header{margin-bottom:14px}.meta,.controls,.waveform-controls{flex-wrap:wrap}.waveform-controls .region-info,.waveform-controls .hint{width:100%;margin-top:4px;margin-left:0}.region-handle-floating{width:20px;margin-left:-10px}.main-row,.waveform-grid{grid-template-columns:1fr}.track-info{flex-direction:column;align-items:flex-start;gap:6px}.pad{touch-action:manipulation}.youtube-drawer{width:280px}.sequencer-header{align-items:flex-start;gap:var(--gap-sm);flex-direction:column}.sequencer-grid-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}.beat-player-bar{gap:var(--gap-sm);flex-wrap:wrap}.btn-primary,.btn-secondary,.pad-rev-toggle,.seq-clear-btn{min-width:44px;height:auto;min-height:44px}.waveform-controls button{width:36px;height:36px}.pad-grid{grid-template-columns:repeat(4,1fr)!important}.pad-card-controls{flex-wrap:wrap}.seq-btn,.pad-card-controls button{min-width:44px;min-height:44px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}.app-body{padding-bottom:130px}.track-nav{-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:8px;overflow:auto visible}.track-nav::-webkit-scrollbar{display:none}.track-nav-tab{white-space:nowrap;flex-shrink:0;gap:4px;padding:6px 8px;font-size:10px}.track-nav-type-toggle{gap:0}.slice-action-btn{min-width:44px;min-height:44px}.slice-controls-row .btn-secondary{min-height:44px}.slice-controls-row .bpm-nudge{min-width:44px;min-height:44px}.slice-controls-row{flex-wrap:wrap;gap:6px}.slice-controls-row .popover-select{order:-1;width:100%}.slice-controls-row .popover-select .popover-trigger{justify-content:space-between;width:100%}.pads-control-label,.slice-controls-row .pads-control-group .control-label{display:none}.slice-controls-actions{justify-content:flex-end;width:auto;margin-left:auto}}.beat-expand-btn{width:var(--btn-height-md);height:var(--btn-height-md);border-radius:var(--radius-xs,4px);color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:none;position:relative}.beat-expand-btn:after{content:"";position:absolute;inset:-8px}.beat-expand-btn:hover{background:var(--bg-hover)}@media (width<=768px){.pad-header h3{display:none}.beat-player-bar.beat-collapsed{max-height:44px;overflow:hidden}.beat-player-bar.beat-collapsed .beat-mute-solo-group,.beat-player-bar.beat-collapsed .popover-select,.beat-player-bar.beat-collapsed .beat-file-label,.beat-player-bar.beat-collapsed .beat-steps{display:none}.beat-player-bar.beat-expanded{max-height:200px}.beat-expand-btn{display:block}.app-body{padding-bottom:60px}}.step-sequencer{flex-direction:column;height:100%;display:flex;overflow:hidden}.sequencer-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.sequencer-title{font-size:16px;font-family:var(--font-bitmap);color:var(--text-secondary);text-transform:none;letter-spacing:2px}.sequencer-controls,.seq-ctrl-group{align-items:center;gap:var(--gap-sm);display:flex}.seq-ctrl-group--action{margin-left:auto}.seq-play-btn{border-radius:var(--radius-xs);width:28px;height:24px;color:var(--text-secondary);font-size:var(--font-btn);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.seq-play-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.seq-playing{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.seq-btn{width:var(--btn-height-md);height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.seq-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.seq-btn.active{background:var(--accent-a18);color:var(--accent);border-color:var(--accent-a30)}.seq-clear-btn{height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 8px;transition:all .15s}.seq-clear-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.seq-clear-btn:disabled{opacity:.3;cursor:default}.seq-zoom-btn{height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 8px;transition:all .15s}.seq-zoom-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.seq-zoom-btn:disabled{opacity:.3;cursor:default}.seq-zoom-inline{align-items:center;gap:4px;margin-left:auto;display:flex}.seq-zoom-label{color:var(--text-muted);font-size:10px;font-family:var(--font-mono);text-align:center;min-width:24px}.seq-swing-control{align-items:center;gap:6px;display:flex}.seq-swing-label{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap}.seq-swing-value{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary);text-align:right;min-width:28px}.seq-swing-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex-shrink:0;width:72px;height:3px}.seq-swing-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:10px;height:10px;transition:box-shadow .15s}.seq-swing-slider::-webkit-slider-thumb:hover{box-shadow:0 0 6px var(--accent-glow)}.seq-random-control{align-items:center;gap:6px;margin-left:auto;display:flex}.seq-random-btn{height:var(--btn-height-md);border-radius:var(--radius-xs);border:1px solid var(--glass-border);color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);white-space:nowrap;cursor:pointer;background:#0003;padding:0 8px;transition:all .15s}.seq-random-btn:hover{color:var(--text-primary);background:#ffffff14}.pads-control-group{align-items:center;gap:0;display:flex}.pads-control-label{font-size:10px;font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.5px;text-transform:none;margin-right:4px}.seq-random-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex-shrink:0;width:80px;height:3px}.seq-random-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:10px;height:10px;transition:box-shadow .15s}.seq-random-slider::-webkit-slider-thumb:hover{box-shadow:0 0 6px var(--accent-glow)}.sequencer-grid-wrapper{flex:1;padding:4px 0 0;overflow:auto}.sequencer-grid-wrapper:after{content:"";height:4px;display:block}.sequencer-row{align-items:center;height:36px;display:flex}.seq-row-selected{background:#ffffff0a}.seq-row-active{background:var(--accent-a06)}.sequencer-step-header{z-index:2;background:var(--bg-primary);height:16px;margin-bottom:8px;position:sticky;top:0}.sequencer-step-header .seq-pad-label{border:none}.seq-pad-label{z-index:1;background:var(--bg-primary);-webkit-user-select:none;user-select:none;width:36px;min-width:36px;height:32px;transition:background var(--transition-time) var(--transition-style);border:1px solid #ffffff2e;border-radius:0;margin:0 4px 0 2px;position:sticky;left:0;overflow:clip}.seq-pad-label-content{z-index:1;width:100%;height:100%;font-size:14px;font-family:var(--font-bitmap);color:var(--text-body);justify-content:center;align-items:center;display:flex;position:relative}.seq-pad-label-tappable{cursor:pointer}.seq-pad-label-tappable:hover{background:#ffffff0f}.seq-pad-active{background:var(--track-color,var(--track-a))!important}.seq-pad-active .seq-pad-label-content{color:var(--bg-primary)!important}.seq-pad-key{color:inherit}.seq-step-num{text-align:center;min-width:0;font-size:11px;font-family:var(--font-bitmap);color:var(--text-muted);flex:1;position:relative}.seq-cell{box-sizing:border-box;cursor:pointer;min-width:0;height:28px;transition:background var(--transition-time) var(--transition-style);border:1px solid #ffffff1f;border-radius:0;flex:1;margin:1px}.seq-cell:hover{background:#ffffff14}.seq-cell.seq-on{background:var(--track-color,var(--track-a));opacity:1}.seq-cell.seq-on:hover{opacity:.85}.seq-cell.seq-current{border-color:var(--track-color,var(--track-a))}.seq-cell.seq-bar-start{border-left:2px solid #ffffff47}.seq-cell.seq-beat-start{border-left:2px solid #ffffff59}.seq-cell.seq-cell-dilla{background:#ffffff08;border-radius:0}.seq-cell.seq-cell-dilla:hover{background:#ffffff14}.seq-cell.seq-cell-dilla.seq-on{background:var(--track-color,var(--track-a));opacity:1}.seq-cell.seq-cell-dilla.seq-current{border-color:var(--track-color,var(--track-a))}.seq-fx-label{color:var(--accent,#5ec4b6);justify-content:center}.seq-fx-label .seq-pad-key{font-size:10px;font-family:var(--font-mono);letter-spacing:.08em;padding:0 2px}.seq-cell.seq-cell-fx{font-family:var(--font-mono);cursor:pointer;background:#ffffff05;border-radius:0;justify-content:center;align-items:center;font-size:10px;display:flex}.seq-cell.seq-cell-fx:hover{background:#ffffff14}.seq-cell.seq-cell-fx.seq-on{opacity:1}.seq-cell.seq-cell-fx .seq-fx-icon{color:currentColor;line-height:1}.seq-cell.seq-fx-brk{color:#d76c6c;background:#d76c6c47}.seq-cell.seq-fx-stut{color:var(--accent);background:#5ec4b647}.seq-cell.seq-fx-rev{color:#e0a458;background:#e0a45847}.seq-cell.seq-fx-flt{color:#6bc28e;background:#6bc28e47}.seq-cell.seq-fx-stop{color:#a865c9;background:#a865c947}.seq-fx-popover-backdrop{z-index:40;background:#0000004d;position:fixed;inset:0}.seq-fx-popover{z-index:41;background:var(--bg-panel,#252631);border:1px solid var(--accent,#5ec4b6);border-radius:6px;min-width:280px;max-width:90vw;padding:12px 14px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px #00000080}.seq-fx-popover-title{letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;font-size:10px}.seq-fx-popover-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.seq-fx-popover-opt{color:var(--text-body);cursor:pointer;background:#ffffff08;border:1px solid #ffffff1f;border-radius:4px;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;transition:all .1s;display:flex}.seq-fx-popover-opt:not(.disabled):hover{border-color:var(--accent,#5ec4b6);background:#5ec4b614}.seq-fx-popover-opt.selected{border-color:var(--accent,#5ec4b6);background:#5ec4b61f}.seq-fx-popover-opt.disabled{opacity:.35;cursor:not-allowed}.seq-fx-popover-icon{font-size:16px;font-family:var(--font-mono);line-height:1}.seq-fx-popover-icon.seq-fx-brk{color:#d76c6c}.seq-fx-popover-icon.seq-fx-stut{color:var(--accent,#5ec4b6)}.seq-fx-popover-icon.seq-fx-rev{color:#e0a458}.seq-fx-popover-icon.seq-fx-flt{color:#6bc28e}.seq-fx-popover-icon.seq-fx-stop{color:#a865c9}.seq-fx-popover-name{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:9px}[data-theme=light] .seq-cell{border-color:#0000001f}[data-theme=light] .seq-cell:hover,[data-theme=light] .seq-cell.seq-cell-dilla:hover,[data-theme=light] .seq-cell.seq-cell-fx:hover{background:#0000000d}[data-theme=light] .seq-cell.seq-cell-dilla{background:#00000005}[data-theme=light] .seq-cell.seq-bar-start{border-left:2px solid #00000040}[data-theme=light] .seq-cell.seq-beat-start{border-left:2px solid #00000047}[data-theme=light] .seq-row-selected{background:#0000000a}[data-theme=light] .seq-pad-label-tappable:hover{background:#0000000f}.pad-feel-toggle{font-size:var(--font-label);font-weight:300;font-family:var(--font-mono);cursor:pointer;border:1px solid #0000;border-radius:3px;margin-left:2px;padding:1px 3px;line-height:1}.pad-feel-standard{color:var(--text-dim);background:var(--bg-hover);border-color:var(--text-dim)}.pad-feel-standard:hover{color:var(--text-muted);background:var(--bg-hover)}.pad-feel-dilla{color:var(--dilla-accent);background:var(--dilla-accent-bg);border-color:var(--dilla-accent-border)}.pad-feel-dilla:hover{background:var(--accent-a25)}.seq-step-num.seq-beat-start{color:var(--text-dim)}.seq-step-num.seq-bar-start{color:var(--text-muted)}.seq-step-num.seq-current{color:var(--accent);font-weight:400}.pattern-selector{align-items:center;gap:var(--gap-md);border-bottom:1px solid var(--glass-border);justify-content:space-between;padding:6px 12px;display:flex}.pattern-selector-label{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-muted);text-transform:none;letter-spacing:.5px;flex-shrink:0}.pattern-selector-buttons{gap:3px;display:flex}.pattern-btn{width:28px;height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-muted);font-size:var(--font-btn);font-weight:300;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .15s;display:flex}.pattern-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.pattern-btn-active{background:var(--accent);color:var(--bg-primary)}.pattern-btn-has-data{color:var(--text-secondary)}.pattern-btn-has-data.pattern-btn-active{color:var(--accent)}.pattern-copy-btn{height:var(--btn-height-md);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 8px;transition:all .15s}.pattern-copy-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.track-tabs{gap:2px;margin-top:16px;margin-bottom:0;animation:.4s ease-out .12s both fadeInUp;display:flex}.track-tab{height:var(--btn-height-lg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border:1px solid var(--glass-border);color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-mono);cursor:pointer;background:#00000026;border-bottom:none;align-items:center;gap:6px;padding:6px 14px;transition:all .15s;display:flex}.track-tab:hover{background:var(--bg-hover);color:var(--text-secondary)}.track-tab-active{background:var(--panel-bg);color:var(--accent);border-color:var(--text-dim)}.track-tab-dot{background:var(--text-dim);border-radius:50%;flex-shrink:0;width:6px;height:6px}.track-tab-active .track-tab-dot{background:var(--accent)}.track-tab-has-data .track-tab-dot{background:var(--text-secondary)}.section-label{font-size:var(--font-btn-sm);text-transform:none;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:6px;font-weight:600}.waveform-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;display:grid}.source-tabs{gap:2px;margin-bottom:0;display:flex}.source-tab{height:var(--btn-height-lg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border:1px solid var(--glass-border);color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-mono);cursor:pointer;background:#00000026;border-bottom:none;align-items:center;gap:6px;max-width:200px;padding:6px 10px 6px 14px;transition:all .15s;display:flex}.source-tab:hover{background:var(--bg-hover);color:var(--text-secondary)}.source-tab-active{background:var(--panel-bg);color:var(--accent)}.source-tab-title{text-overflow:ellipsis;white-space:nowrap;max-width:160px;overflow:hidden}.source-tab-close{width:16px;height:16px;color:var(--text-muted);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;line-height:1;display:flex}.source-tab-close:hover{color:var(--text-primary);background:#ffffff1a}.source-tab-add{max-width:none;padding:6px 14px;font-size:18px;font-weight:400}.source-tabs+.waveform-card{border-top-left-radius:0}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel-bg-overlay);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);padding:24px;position:relative}.modal-close{width:24px;height:24px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;top:12px;right:12px}.modal-close:hover{color:var(--text-primary);background:#ffffff14}.modal-title{color:var(--text-primary);margin-bottom:16px;font-size:14px;font-weight:600}@keyframes source-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes source-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes source-modal-in{0%{opacity:0;transform:scale(.94)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes source-modal-out{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.94)translateY(8px)}}.source-add-overlay{animation:.15s ease-out source-overlay-in}.source-add-overlay.closing{animation:.15s ease-in forwards source-overlay-out}.source-add-modal{width:360px;max-width:calc(100vw - 32px);animation:.2s ease-out source-modal-in}.source-add-modal.closing{animation:.15s ease-in forwards source-modal-out}.source-add-modal.drag-over{border-color:var(--accent)}.source-add-modal.drag-over .source-add-option:first-child{border-color:var(--accent);color:var(--accent)}.source-add-options{grid-template-columns:1fr 1fr;gap:10px;display:grid}.source-add-option{border-radius:var(--radius);cursor:pointer;text-align:center;background:#0000002e;border:1px solid #ffffff0f;flex-direction:column;align-items:center;gap:6px;padding:28px 16px 22px;transition:background .15s,border-color .15s,transform .15s;display:flex}.source-add-option:hover{background:var(--accent-subtle);border-color:var(--accent-a30);transform:translateY(-2px)}.source-add-option:active{transition-duration:80ms;transform:scale(.97)translateY(0)}.source-add-option-icon{color:var(--accent);justify-content:center;align-items:center;margin-bottom:6px;display:flex}.source-add-option-label{color:var(--text-primary);letter-spacing:.03em;font-size:13px;font-weight:500}.source-add-option-desc{color:var(--text-muted);letter-spacing:.02em;font-size:11px}.source-add-option-hint{color:var(--text-muted);letter-spacing:.02em;margin-top:4px;font-size:10px}.source-add-option:disabled{opacity:.35;cursor:not-allowed}.file-preview-overlay{animation:.15s ease-out source-overlay-in}.file-preview-overlay.closing{animation:.15s ease-in forwards source-overlay-out}.file-preview-modal{width:360px;max-width:calc(100vw - 32px);animation:.2s ease-out source-modal-in}.file-preview-modal.closing{animation:.15s ease-in forwards source-modal-out}.file-preview-player{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:12px;margin-bottom:20px;padding:14px 16px;display:flex}.file-preview-icon{color:var(--accent);flex-shrink:0;align-items:center;display:flex}.file-preview-meta{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.file-preview-title{font-size:var(--font-btn);color:var(--text-primary);letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis;font-weight:400;overflow:hidden}.file-preview-info{font-size:var(--font-label);color:var(--text-muted);letter-spacing:.02em}.file-preview-play-btn{background:var(--bg-hover);border:1px solid var(--border);width:36px;height:36px;color:var(--text-primary);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .12s,border-color .12s,color .12s;display:flex}.file-preview-play-btn:hover,.file-preview-play-btn.playing{background:var(--accent-subtle);border-color:var(--accent-a30);color:var(--accent)}.file-preview-actions{gap:8px;display:flex}.file-preview-back-btn{font-size:var(--font-btn);letter-spacing:.03em;color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:0 0;flex:1;padding:9px 0;font-weight:300;transition:background .12s,color .12s,border-color .12s}.file-preview-back-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}.file-preview-back-btn:disabled{opacity:.4;cursor:not-allowed}.file-preview-add-btn{font-size:var(--font-btn);letter-spacing:.03em;color:var(--bg-primary);background:var(--accent);border-radius:var(--radius);cursor:pointer;border:1px solid #0000;flex:2;padding:9px 0;font-weight:400;transition:background .12s,opacity .12s}.file-preview-add-btn:hover:not(:disabled){background:var(--accent-hover)}.file-preview-add-btn:disabled{opacity:.6;cursor:not-allowed}.mic-recorder-overlay{animation:.15s ease-out source-overlay-in}.mic-recorder-overlay.closing{animation:.15s ease-in forwards source-overlay-out}.mic-recorder-modal{flex-direction:column;gap:16px;width:360px;max-width:calc(100vw - 32px);animation:.2s ease-out source-modal-in;display:flex}.mic-recorder-modal.closing{animation:.15s ease-in forwards source-modal-out}.mic-device-select{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);font-size:var(--font-btn);letter-spacing:.02em;cursor:pointer;appearance:none;background-color:#00000047;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;padding:7px 28px 7px 10px;font-family:inherit;font-weight:300}.mic-device-select:hover{border-color:var(--border-hover)}.mic-device-select:focus{border-color:var(--accent-a30);outline:none}.mic-device-select:disabled{opacity:.5;cursor:not-allowed}.mic-device-select option{color:var(--text-primary);background-color:#1f2028}.mic-waveform-canvas{border-radius:var(--radius-xs);background:#00000047;border:1px solid #ffffff0f;width:100%;height:88px;transition:border-color .3s;display:block}.mic-waveform-canvas.recording{border-color:var(--accent-a30)}.mic-controls{justify-content:center;display:flex}.mic-rec-btn{border-radius:var(--radius-sm);color:var(--text-body);font-size:var(--font-btn);cursor:pointer;background:0 0;border:1px solid #ffffff1f;align-items:center;gap:8px;padding:10px 28px;font-weight:300;transition:background .15s,border-color .15s,transform .15s;display:flex}.mic-rec-btn:hover{background:var(--accent-subtle);border-color:var(--accent-a30)}.mic-rec-btn:active{transition-duration:80ms;transform:scale(.97)}.mic-recording-row{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.mic-timer{font-size:16px;font-family:var(--font-mono);color:var(--text-primary);letter-spacing:.06em;text-align:center;min-width:48px;font-weight:300}.mic-stop-btn{border-radius:var(--radius-sm);border:1px solid var(--error);color:var(--error);font-size:var(--font-btn);cursor:pointer;background:0 0;align-items:center;gap:7px;padding:8px 16px;font-weight:300;transition:background .15s,transform .15s;display:flex}.mic-stop-btn:hover{background:#cc444414}.mic-stop-btn:active{transition-duration:80ms;transform:scale(.97)}.mic-rec-dot{background:var(--error);border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1.2s ease-in-out infinite mic-blink}@keyframes mic-blink{0%,to{opacity:1}50%{opacity:.3}}.mic-stop-square{background:var(--error);border-radius:1px;flex-shrink:0;width:8px;height:8px}.mic-processing-row{color:var(--text-muted);align-items:center;gap:10px;display:flex}.mic-processing{font-size:var(--font-btn);color:var(--text-muted);letter-spacing:.04em}.recorder-mode-pills{gap:6px;margin-bottom:4px;display:flex}.recorder-mode-pill{letter-spacing:.04em;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:20px;flex:1;padding:6px 12px;font-size:11px;font-weight:400;transition:background .15s,border-color .15s,color .15s}.recorder-mode-pill:hover:not(:disabled){color:var(--text-primary);border-color:#ffffff2e}.recorder-mode-pill.active{color:var(--accent);border-color:var(--accent-a30);background:var(--accent-subtle)}.recorder-mode-pill.unavailable{opacity:.35;cursor:pointer}.mic-preview{border-radius:var(--radius);border:1px solid #ffffff14;justify-content:center;align-items:center;gap:14px;height:88px;margin-bottom:0;display:flex}.mic-preview-play-btn{width:40px;height:40px;color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex}.mic-preview-play-btn:hover{background:#ffffff0f;border-color:#ffffff40}.mic-preview-play-btn.playing{border-color:var(--accent-a30);color:var(--accent)}.mic-preview-duration{color:var(--text-muted);letter-spacing:.06em;font-variant-numeric:tabular-nums;font-size:13px}.mic-preview-actions{gap:8px;width:100%;display:flex}.mic-retake-btn{font-size:var(--font-btn);letter-spacing:.04em;color:var(--text-muted);border-radius:var(--radius);cursor:pointer;background:0 0;border:1px solid #ffffff1a;flex:1;padding:9px 0;transition:background .15s,border-color .15s,color .15s}.mic-retake-btn:hover{color:var(--text-primary);background:#ffffff0a;border-color:#fff3}.mic-use-btn{font-size:var(--font-btn);letter-spacing:.04em;border-radius:var(--radius);cursor:pointer;background:0 0;border:1px solid;flex:2;padding:9px 0;transition:opacity .15s}.mic-use-btn:hover{opacity:.75}.youtube-source-modal{flex-direction:column;width:min(560px,90vw);height:min(620px,85vh);padding:0;display:flex;overflow:hidden}.youtube-source-modal .modal-close{position:absolute;top:12px;right:12px}.chapter-modal{flex-direction:column;gap:0;width:min(520px,90vw);max-height:80vh;padding:20px;display:flex;overflow:hidden}.chapter-modal-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;padding-right:28px;font-size:14px;font-weight:600;overflow:hidden}.chapter-modal-subtitle{font-size:var(--font-btn);color:var(--text-muted);margin-bottom:14px}.chapter-list{flex-direction:column;flex:1;gap:2px;margin-bottom:12px;display:flex;overflow-y:auto}.chapter-item{width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff12;border-radius:6px;align-items:center;gap:10px;padding:9px 12px;font-size:13px;transition:background .15s;display:flex}.chapter-item:hover{background:var(--accent-a12);border-color:var(--accent-a25)}.chapter-item-time{font-family:var(--font-mono);font-size:var(--font-btn);color:var(--text-muted);min-width:38px}.chapter-item-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.chapter-item-dur{font-family:var(--font-mono);font-size:var(--font-btn);color:var(--text-dim)}.chapter-full-btn{width:100%;color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:9px;font-size:12px;transition:background .15s}.chapter-full-btn:hover{color:var(--text-primary);background:#ffffff14}.waveform-card-loading{justify-content:center;align-items:center;min-height:120px;display:flex}.waveform-card-loading-text{color:var(--text-muted);font-size:12px;font-family:var(--font-mono)}.waveform-card{cursor:pointer;min-height:160px;transition:border-color var(--transition-time) var(--transition-style);flex-direction:column;padding:8px 10px;display:flex;position:relative;overflow:visible}.panel-resizer{cursor:row-resize;-webkit-user-select:none;user-select:none;touch-action:none;flex-shrink:0;justify-content:center;align-items:center;height:14px;margin-left:-8px;margin-right:-8px;display:flex;position:relative}.panel-resizer:after{content:"";background-image:radial-gradient(circle,#ffffff59 1.5px,#0000 1.5px);background-repeat:repeat;background-size:8px 6px;width:24px;height:6px;display:block}.waveform-card:hover{border-color:var(--border-hover)}.waveform-card-active{border-color:var(--track-color,var(--track-a))}.waveform-card-close{width:20px;height:20px;color:var(--text-muted);cursor:pointer;z-index:5;opacity:0;background:#0000004d;border:none;border-radius:3px;justify-content:center;align-items:center;font-size:12px;transition:opacity .15s;display:flex;position:absolute;top:6px;right:6px}.waveform-card:hover .waveform-card-close{opacity:1}.waveform-card-close:hover{background:var(--error-a30);color:var(--text-primary)}.waveform-card-header{justify-content:space-between;align-items:center;min-width:0;margin-bottom:6px;display:flex;overflow:hidden}.waveform-card-filename{font-size:var(--font-btn);color:var(--text-body);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-weight:400;overflow:hidden}.waveform-card-meta{flex-shrink:0;align-items:center;gap:6px;display:flex}.meta-tag{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary)}.key-analysis-btn{font-size:var(--font-btn-sm);border:1px solid var(--accent-a40);background:var(--accent-a08);color:var(--accent-a80);cursor:pointer;white-space:nowrap;border-radius:4px;padding:2px 8px;transition:background .15s,border-color .15s}.key-analysis-btn:hover{background:var(--accent-a18);border-color:var(--accent-a70)}.key-analysis-loading{font-size:var(--font-btn-sm);color:var(--text-secondary);font-style:italic}.key-analysis-result{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--accent-a90);align-items:center;gap:5px;display:inline-flex}.key-analysis-apply-btn{font-size:var(--font-btn-sm);border:1px solid var(--accent-a50);background:var(--accent-a12);color:var(--accent-a90);cursor:pointer;border-radius:4px;padding:1px 7px;transition:background .15s}.key-analysis-apply-btn:hover{background:var(--accent-a25)}.waveform-card-empty{color:var(--text-muted);cursor:pointer;border:1px dashed #ffffff14;border-radius:5px;flex-direction:column;justify-content:center;align-self:center;align-items:center;gap:4px;margin:auto;padding:12px 20px;font-size:12px;transition:all .15s;display:inline-flex}.waveform-card-empty:hover,.waveform-card-empty.drag-over{border-color:var(--text-dim);color:var(--text-secondary)}.waveform-card-empty-title{color:var(--text-muted);font-size:12px}.waveform-card-empty-text{font-size:var(--font-btn);color:var(--text-dim);font-family:var(--font-ui)}.track-assign-group{gap:3px;margin-left:auto;display:flex}.track-assign-btn{width:22px;height:22px;font-size:var(--font-label);font-weight:300;font-family:var(--font-mono);cursor:pointer;color:var(--text-muted);background:#0003;border:1px solid #ffffff1a;border-radius:3px;justify-content:center;align-items:center;transition:all .15s;display:flex}.track-assign-btn:hover{color:var(--text-primary);border-color:var(--border-hover);background:#ffffff14}.track-assign-btn:disabled{opacity:.3;cursor:not-allowed}.track-assign-btn-filled{background:var(--accent-a15);color:var(--accent);border-color:var(--accent-a35)}.track-assign-btn-filled:hover{background:var(--accent-a25)}.track-assign-row{align-items:center;gap:6px;margin-top:8px;animation:.3s ease-out both fadeInUp;display:flex}.track-assign-label{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-muted);text-transform:none;letter-spacing:.5px;margin-right:4px}.timeline-section{flex-direction:column;height:100%;display:flex;overflow:hidden}.timeline-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.timeline-title{font-size:var(--font-btn);font-weight:300;font-family:var(--font-mono);color:var(--text-secondary);text-transform:none;letter-spacing:.03em}.timeline-controls{align-items:center;gap:var(--gap-sm);display:flex}.timeline-grid-wrapper{padding:8px 0;overflow-x:auto}.timeline-grid-wrapper::-webkit-scrollbar{height:6px}.timeline-grid-wrapper::-webkit-scrollbar-track{background:0 0}.timeline-grid-wrapper::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.timeline-grid{gap:0;min-width:100%;display:grid}.timeline-row{align-items:center;height:28px;display:flex}.timeline-row-header{height:20px}.timeline-row-label{width:36px;min-width:36px;font-size:var(--font-btn-sm);font-weight:400;font-family:var(--font-mono);color:var(--text-muted);text-align:center;flex-shrink:0}.timeline-bar-num{text-align:center;min-width:40px;font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-secondary);border-left:1px solid var(--bg-hover);flex:1}.timeline-cell{cursor:pointer;min-width:40px;height:24px;font-size:var(--font-label);font-weight:300;font-family:var(--font-mono);color:#0000;-webkit-user-select:none;user-select:none;border:1px solid #ffffff12;border-radius:2px;flex:1;justify-content:center;align-items:center;margin:1px;transition:background 80ms;display:flex}.timeline-cell:hover{background:var(--bg-hover)}.timeline-cell-filled{background:var(--accent-a15);border-color:var(--accent-a25);color:var(--accent)}.timeline-cell-filled:hover{filter:brightness(1.3)}.timeline-cell-block-start{border-right:none;border-radius:2px 0 0 2px;margin-right:0}.timeline-cell-block-mid{border-left:none;border-right:none;border-radius:0;margin-left:0;margin-right:0}.timeline-cell-block-end{border-left:none;border-radius:0 2px 2px 0;margin-left:0}.timeline-cell-beat{background:var(--bg-hover);border-color:var(--text-dim);color:var(--text-muted)}.timeline-cell-beat:hover{background:#ffffff1a}.timeline-cell-current{box-shadow:inset 0 0 0 1.5px var(--accent)}.timeline-add-btn{height:var(--btn-height-sm);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 8px;transition:all .15s}.timeline-add-btn:hover{color:var(--text-primary);background:#ffffff14}.timeline-auto-structure{align-items:center;gap:4px;display:flex}.timeline-auto-label{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.08em;margin-right:2px}.timeline-auto-btn{height:var(--btn-height-sm);border-radius:var(--radius-xs);border:1px solid var(--accent-glow);background:var(--accent-a06);color:var(--accent-a60);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;white-space:nowrap;padding:0 8px;transition:all .15s}.timeline-auto-btn:hover{background:var(--accent-a15);border-color:var(--accent-a40);color:var(--accent-a90)}.timeline-player-bar{align-items:center;gap:var(--gap-md);border-top:1px solid var(--glass-border);padding:6px 12px;display:flex}.timeline-bar-indicator{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--text-secondary);margin-left:auto}.timeline-player{align-items:center;gap:var(--gap-lg);border-top:1px solid #ffffff0a;flex-wrap:wrap;margin-top:0;padding:8px 12px;display:flex}.timeline-play-btn{height:var(--btn-height-sm);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 10px;transition:all .15s}.timeline-play-btn:hover{color:var(--text-primary);background:#ffffff14}.timeline-play-btn-active{background:var(--accent-a15);border-color:var(--accent-a30);color:var(--accent)}.timeline-play-btn-active:hover{background:var(--accent-a25)}.timeline-loop-btn{height:var(--btn-height-sm);border-radius:var(--radius-xs);color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:0 8px;transition:all .15s}.timeline-loop-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.timeline-loop-btn-active{background:var(--accent-a12);border-color:var(--accent-a25);color:var(--accent-a90)}.timeline-loop-btn-active:hover{background:var(--accent-a20)}.timeline-position{font-size:var(--font-value);font-family:var(--font-mono);color:var(--text-secondary)}.timeline-legend{gap:var(--gap-lg);margin-left:auto;display:flex}.legend-item{align-items:center;gap:var(--gap-xs);font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-muted);display:flex}.legend-swatch{border-radius:2px;width:10px;height:10px}.timeline-bar-loop{background:var(--accent-a12);color:var(--accent-a70)!important}.timeline-cell-loop{box-shadow:inset 0 -2px 0 var(--accent-a30)}.timeline-bar-num{cursor:crosshair}.visualizer-screen{z-index:9000;background:var(--bg-primary);background-image:radial-gradient(ellipse at 20% 50%, #7c3aed14 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, #10b9810f 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, var(--accent-a05) 0%, transparent 50%), radial-gradient(#ffffff06 1px, transparent 1px);background-size:auto,auto,auto,24px 24px;flex-direction:column;gap:10px;padding:16px;display:flex;position:fixed;inset:0;overflow:hidden}.visualizer-header{flex-shrink:0;align-items:center;gap:12px;display:flex}.visualizer-title{font-size:var(--font-btn-sm);font-family:var(--font-mono);letter-spacing:.18em;text-transform:none;color:var(--text-muted)}.visualizer-bpm{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--accent-a60);letter-spacing:.1em}.visualizer-play-btn{width:28px;height:28px;color:var(--text-body);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;place-items:center;font-size:11px;transition:color .15s,background .15s,border-color .15s;display:grid}.visualizer-play-btn:hover{color:var(--text-primary);border-color:var(--text-muted)}.visualizer-play-btn-active{background:var(--accent-a18);border-color:var(--accent-a35);color:var(--accent)}.visualizer-play-btn-active:hover{background:var(--accent-a25)}.visualizer-close-btn{background:var(--bg-card);border:1px solid var(--border);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;border-radius:2px;place-items:center;margin-left:auto;font-size:14px;transition:color .15s,border-color .15s;display:grid}.visualizer-close-btn:hover{color:var(--text-primary);border-color:var(--text-dim)}.visualizer-source-card{background:var(--panel-bg);min-height:0;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #ffffff14;border-radius:8px;flex-direction:column;flex:1;gap:10px;padding:12px;display:flex}.visualizer-source-header{align-items:center;gap:10px;display:flex}.visualizer-source-thumb{object-fit:cover;background:#ffffff0d;border-radius:4px;flex-shrink:0;width:60px;height:40px}.visualizer-source-title{font-size:13px;font-family:var(--font-ui);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.visualizer-source-canvas-wrap{flex:1;min-height:60px;position:relative}.visualizer-canvas{border-radius:4px;width:100%;height:100%;display:block}.visualizer-loading{color:var(--text-muted);font-size:var(--font-btn-sm);font-family:var(--font-mono);letter-spacing:.1em;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.visualizer-seq-panel{background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #ffffff14;border-radius:8px;flex-direction:column;gap:6px;padding:12px;display:flex}.visualizer-seq-row{align-items:center;gap:8px;display:flex}.visualizer-seq-label{font-size:var(--font-btn-sm);font-family:var(--font-mono);color:var(--accent-a70);letter-spacing:.08em;flex-shrink:0;width:14px}.visualizer-seq-grid{flex:1;gap:2px;display:flex;overflow:hidden}.visualizer-seq-cell{background:#ffffff0f;border-radius:3px;flex:1;min-width:4px;height:20px}.visualizer-seq-cell.on{opacity:.9}.visualizer-seq-cell.current{box-shadow:0 0 8px #ffffff80;background:#ffffffa6!important}.visualizer-seq-cell.on.current{filter:brightness(2);box-shadow:0 0 10px}.piano-roll{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.piano-roll-scale-bar{align-items:center;gap:var(--gap-md);border-bottom:1px solid var(--glass-border);padding:6px 12px;display:flex}.piano-roll-scale-label{font-size:var(--font-label);color:var(--text-muted);font-family:var(--font-mono)}.piano-roll-select{border-radius:var(--radius-xs);border:1px solid var(--glass-border);height:24px;color:var(--text-body);font-size:var(--font-btn-sm);font-family:var(--font-mono);cursor:pointer;background:#ffffff0d;padding:0 6px}.piano-roll-select:focus{border-color:var(--accent-glow);outline:none}.piano-roll-adsr{align-items:center;gap:var(--gap-md);border-bottom:1px solid var(--glass-border);flex-wrap:wrap;padding:6px 12px;display:flex}.adsr-control{align-items:center;gap:6px;display:flex}.adsr-label{font-size:var(--font-label);color:var(--text-muted);font-family:var(--font-mono);min-width:10px;font-weight:300}.adsr-slider{cursor:pointer;width:80px;height:28px;accent-color:var(--accent)}.adsr-value{font-size:var(--font-label);color:var(--text-secondary);font-family:var(--font-mono);min-width:32px}.piano-roll-grid-wrapper{flex:1;min-height:0;overflow-y:auto}.piano-roll-header-row{z-index:2;background:var(--panel-bg);position:sticky;top:0}.piano-roll-key-label{width:40px;min-width:40px;font-size:var(--font-label);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:flex-end;align-items:center;padding-right:4px;display:flex}.piano-roll-key-white{background:#ffffff0a;border-right:2px solid #ffffff1f}.piano-roll-key-black{background:#0000004d;border-right:2px solid #ffffff14}.piano-roll-key-c{border-right-color:var(--accent-glow)}.piano-roll-key-name{color:var(--text-muted)}.piano-roll-key-c .piano-roll-key-name{color:var(--accent);font-weight:300}.piano-roll-row{align-items:center;height:14px;display:flex}.piano-roll-row-white{background:#ffffff04}.piano-roll-row-black{background:#0003}.piano-roll-row-c{border-bottom:1px solid var(--accent-a15)}.piano-roll-row-scale{background:var(--accent-a04)}.piano-roll-cell{box-sizing:border-box;cursor:pointer;border:.5px solid #ffffff0a;border-radius:2px;flex:1;min-width:0;height:12px;margin:1px;transition:background 50ms}.piano-roll-cell:hover{background:#ffffff1a}.piano-roll-cell-black{background:#00000026}.piano-roll-cell-scale{background:var(--accent-a05)}.piano-roll-cell-on{opacity:.85;box-shadow:0 0 4px var(--accent-a50);background:var(--accent)!important}.piano-roll-cell-on:hover{opacity:1}.piano-roll-cell.seq-current{box-shadow:inset 0 0 0 1px #fff6}.piano-roll-cell.seq-bar-start{border-left:2px solid #fff3}.piano-roll-cell.seq-beat-start{border-left:1px solid #ffffff14}.track-nav{gap:2px;margin-top:12px;margin-bottom:0;animation:.4s ease-out 80ms both fadeInUp;display:flex}.track-strip{background:var(--bg-primary);border-bottom:1px solid var(--border);--accent:var(--track-color,var(--track-a));--accent-hover:color-mix(in srgb, var(--accent) 80%, white);--accent-glow:color-mix(in srgb, var(--accent) 30%, transparent);--accent-subtle:color-mix(in srgb, var(--accent) 10%, transparent);flex-shrink:0;align-items:stretch;padding:0 8px;display:flex;overflow:hidden}.panel-dots{--accent:var(--track-color,var(--track-a))}.track-strip .track-nav{scrollbar-width:none;flex:1;align-items:stretch;gap:0;min-width:0;margin-top:0;margin-bottom:0;animation:none;overflow:auto hidden}.track-strip .track-nav::-webkit-scrollbar{display:none}.track-strip .track-nav-tab{min-width:0;height:36px;color:var(--text-muted);font-size:11px;font-weight:400;font-family:var(--font-ui);letter-spacing:.03em;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;flex:1;justify-content:center;align-items:center;gap:5px;padding:0 12px;transition:color .15s,border-color .15s;display:flex}.track-strip .track-nav-tab:hover{color:var(--text-body);background:0 0}.track-strip .track-nav-tab-active{color:var(--text-primary);border-bottom-color:var(--accent);background:0 0}.track-strip .track-nav-tab-beatarc{letter-spacing:.03em;font-size:11px}.track-nav-tab{height:var(--btn-height-lg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border:1px solid var(--glass-border);color:var(--text-muted);font-size:11px;font-weight:400;font-family:var(--font-ui);cursor:pointer;background:#0000001a;border-bottom:none;align-items:center;gap:5px;padding:6px 12px;transition:all .15s;display:flex}.track-nav-tab:hover{background:var(--bg-hover);color:var(--text-secondary)}.track-nav-tab-active{background:var(--panel-bg);color:var(--text-primary);border-color:var(--text-dim)}.track-nav-label{align-items:center;gap:0;display:inline-flex}.track-nav-arrow{color:var(--text-muted);white-space:nowrap;font-size:10px}.track-nav-source{color:var(--text-body);text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:10px;overflow:hidden}.track-nav-dot{background:var(--text-secondary);border-radius:50%;flex-shrink:0;width:5px;height:5px}.track-nav-tab-active .track-nav-dot{background:var(--accent)}.track-nav-level{font-family:var(--font-mono);color:var(--tab-color,var(--accent));opacity:.7;flex-shrink:0;font-size:11px;line-height:1}.track-nav-tab-active .track-nav-level{opacity:1}.track-nav-badge{font-size:var(--font-label);font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.03em;background:var(--bg-hover);border-radius:var(--radius-xs);padding:1px 4px}.track-nav-tab-active .track-nav-badge{color:var(--accent);background:var(--accent-subtle)}.track-header-bar{border:none;border-bottom:1px solid var(--border);background:0 0;border-radius:0;flex-direction:row;align-items:center;gap:8px;margin-bottom:4px;padding:6px 0;display:flex}.track-header-bar-source{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.source-bar{background:var(--panel-bg);border:1px solid var(--glass-border);border-top:none;border-bottom:none;align-items:center;gap:6px;padding:6px 12px;display:flex}.source-bar-select{text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--bg-hover);border-radius:var(--radius-xs);min-width:0;max-width:220px;color:var(--text-secondary);font-size:12px;font-family:var(--font-mono);cursor:pointer;appearance:none;background:0 0;outline:none;flex:1;padding:4px 8px;overflow:hidden}.source-bar-select:focus{border-color:var(--accent-glow)}.source-bar-add-btn{border-radius:var(--radius-xs);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;line-height:1;transition:all .15s;display:flex}.source-bar-add-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.source-bar-use-btn{background:var(--accent-subtle);border:1px solid var(--accent);border-radius:var(--radius-xs);color:var(--accent);font-size:var(--font-label);font-family:var(--font-ui);letter-spacing:.03em;cursor:pointer;white-space:nowrap;padding:3px 8px;font-weight:300;transition:background .12s,border-color .12s}.source-bar-use-btn:hover{background:var(--accent-subtle);border-color:var(--accent-glow)}.source-bar-wave-btn{border-radius:var(--radius-xs);height:24px;color:var(--text-muted);font-size:11px;font-family:var(--font-mono);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;flex-shrink:0;align-items:center;gap:4px;padding:4px 10px;transition:all .15s;display:flex}.source-bar-wave-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.source-bar-wave-btn-active{color:var(--accent);background:var(--accent-subtle)}.seq-toggle-bar{border-top:1px solid var(--glass-border);align-items:center;padding:4px 0 0;display:flex}.seq-toggle-btn{border-radius:var(--radius-xs);border:1px solid var(--glass-border);height:26px;color:var(--text-muted);font-size:11px;font-weight:300;font-family:var(--font-mono);letter-spacing:.05em;cursor:pointer;background:0 0;padding:4px 12px;transition:all .15s}.seq-toggle-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.seq-toggle-btn-active{border-color:var(--accent-glow);color:var(--accent);background:var(--accent-subtle)}.sampler-empty-cta{border:1px dashed var(--border-hover);border-radius:var(--radius-sm,4px);width:100%;color:var(--text-secondary);font-size:13px;font-family:var(--font-ui);letter-spacing:.03em;cursor:pointer;background:0 0;flex:1;justify-content:center;align-items:center;min-height:80px;margin:12px 8px;font-weight:300;transition:color .15s,border-color .15s;display:flex}.sampler-empty-cta:hover{color:var(--text-primary);border-color:var(--accent)}.empty-track-hint{background:var(--panel-bg);border:1px solid var(--glass-border);color:var(--text-muted);font-size:12px;font-family:var(--font-mono);border-top:none;align-items:center;gap:12px;padding:12px;display:flex}.empty-track-hint-btn{border-radius:var(--radius-xs);border:1px solid var(--glass-border);color:var(--accent);font-size:11px;font-family:var(--font-mono);cursor:pointer;white-space:nowrap;background:0 0;padding:4px 12px;transition:all .15s}.empty-track-hint-btn:hover{background:var(--accent-subtle);border-color:var(--accent-glow)}.empty-track-hint-btn-ghost{color:var(--text-muted)}.empty-track-hint-btn-ghost:hover{background:var(--bg-hover);border-color:var(--glass-border);color:var(--text-secondary)}.track-header-bar-meta{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:4px;display:flex}.track-meta-tag{border-radius:var(--radius-xs);background:var(--bg-elevated);border:1px solid var(--glass-border);color:var(--text-muted);font-size:10px;font-family:var(--font-mono);white-space:nowrap;align-items:center;gap:4px;padding:2px 6px;display:inline-flex}.track-meta-analyze-btn{cursor:pointer;color:var(--text-secondary);transition:all .15s}.track-meta-analyze-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}.track-meta-analyzing{opacity:.6}.track-meta-key-result{color:var(--text-secondary)}.track-meta-apply-btn{border-radius:var(--radius-xs);border:1px solid var(--glass-border);color:var(--accent);font-size:var(--font-label);font-family:var(--font-mono);cursor:pointer;background:0 0;padding:1px 4px;transition:all .15s}.track-meta-apply-btn:hover{background:var(--accent-subtle);border-color:var(--accent-glow)}.track-nav-type-toggle{align-items:center;gap:0;margin-left:6px;display:inline-flex}.track-nav-type-sep{color:var(--text-dim);pointer-events:none;-webkit-user-select:none;user-select:none;padding:0 2px;font-size:10px}.track-nav-type-btn{height:16px;color:var(--text-dim);font-size:10px;font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;padding:0 4px;font-weight:300;line-height:1;transition:color .1s}.track-nav-type-btn:hover{color:var(--text-secondary)}.track-nav-type-btn-active{color:var(--text-primary);font-weight:500}.sound-type-switcher{align-self:flex-start;gap:4px;margin:8px 8px 0;display:flex}.sound-type-btn{color:var(--text-muted);font-size:11px;font-family:var(--font-ui);letter-spacing:.03em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;padding:6px 14px;font-weight:300;transition:color .12s,border-color .12s}.sound-type-btn:hover{color:var(--text-primary)}.sound-type-btn--active{color:var(--text-primary);border-bottom-color:var(--accent)}.synth-settings{grid-template-columns:1fr 1fr;gap:48px 56px;width:100%;padding:18px 8px 32px;display:grid}@media (width<=559px){.synth-settings{grid-template-columns:1fr;gap:40px 0}}.synth-block{flex-direction:column;gap:18px;min-width:0;display:flex}.synth-block-head{justify-content:space-between;align-items:center;min-height:22px;display:flex}.synth-block-title{font-size:12px;font-family:var(--font-mono);letter-spacing:.16em;color:var(--text-secondary);text-transform:lowercase;font-weight:300}.synth-osc-row{grid-template-columns:repeat(2,1fr);gap:8px;padding:4px 0 2px;display:grid}.synth-osc-wave-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;flex-direction:column;align-items:center;gap:14px;padding:22px 8px 18px;transition:color .12s;display:flex;position:relative}.synth-osc-wave-btn svg{width:64px;height:32px}.synth-osc-wave-btn:hover{color:var(--text-primary)}.synth-osc-wave-btn.is-active{color:var(--accent)}.synth-osc-wave-btn.is-active:after{content:"";background:var(--accent);width:18px;height:1px;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.synth-osc-wave-label{font-size:10px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:lowercase;font-weight:300}.synth-type-toggle{gap:2px;display:flex}.synth-type-btn{font-size:11px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:lowercase;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-weight:300;transition:color .12s;position:relative}.synth-type-btn:hover{color:var(--text-primary)}.synth-type-btn.is-active{color:var(--accent)}.synth-type-btn.is-active:after{content:"";background:var(--accent);height:1px;position:absolute;bottom:2px;left:8px;right:8px}.synth-curve-stage,.synth-env-stage{justify-content:center;align-items:center;padding:2px 0;display:flex}.synth-filter-curve,.synth-lfo-wave{width:100%;max-width:100%;height:auto;display:block}.adsr-graph{width:100%;height:100%;display:block}.synth-param-grid{flex-direction:column;gap:12px;padding-top:2px;display:flex}.synth-param-row{grid-template-columns:44px 1fr 52px;align-items:center;gap:12px;display:grid}.synth-param-row.is-disabled{opacity:.35;pointer-events:none}.synth-param-label{font-size:11px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:lowercase;color:var(--text-secondary);font-weight:300}.synth-param-value{font-size:12px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-body);text-align:right;font-variant-numeric:tabular-nums;font-weight:300}.synth-param-slider{appearance:none;background:var(--border);cursor:pointer;border-radius:0;outline:none;width:100%;height:1px}.synth-param-slider::-webkit-slider-runnable-track{background:var(--border);height:1px}.synth-param-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bg-primary);border:1px solid var(--accent);cursor:grab;border-radius:50%;width:12px;height:12px;margin-top:-5.5px;transition:transform .1s}.synth-param-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.synth-param-slider::-webkit-slider-thumb:active{cursor:grabbing;background:var(--accent)}.synth-param-slider:disabled{cursor:not-allowed}.synth-keyboard{flex-direction:column;gap:16px;height:100%;padding:18px 20px 16px;display:flex}.synth-keyboard-info{justify-content:space-between;align-items:center;padding-bottom:4px;display:flex;position:relative}.synth-info-cluster{align-items:center;gap:20px;display:flex}.synth-info-btn{cursor:pointer;color:var(--text-body);background:0 0;border:none;align-items:baseline;gap:8px;padding:4px 0;transition:color .12s;display:flex;position:relative}.synth-info-btn:hover{color:var(--text-primary)}.synth-info-btn.is-open{color:var(--accent)}.synth-info-btn.is-open:after{content:"";background:var(--accent);height:1px;position:absolute;bottom:0;left:0;right:0}.synth-info-label{font-size:10px;font-family:var(--font-mono);letter-spacing:.18em;text-transform:lowercase;color:var(--text-secondary);font-weight:300}.synth-info-btn.is-open .synth-info-label{color:var(--accent);opacity:.7}.synth-info-value{font-size:15px;font-family:var(--font-mono);letter-spacing:.02em;color:inherit;font-variant-numeric:tabular-nums;font-weight:300}.synth-info-octave{font-size:11px;font-family:var(--font-mono);letter-spacing:.06em;color:var(--text-secondary);text-align:center;font-variant-numeric:tabular-nums;min-width:64px;font-weight:300}.synth-octave-btn{color:var(--text-muted);font-size:16px;font-family:var(--font-mono);cursor:pointer;background:0 0;border:none;padding:0 8px;font-weight:300;line-height:1;transition:color .12s}.synth-octave-btn:hover:not(:disabled){color:var(--accent)}.synth-octave-btn:disabled{opacity:.25;cursor:not-allowed}.synth-popover{z-index:50;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:20px;animation:.14s ease-out synth-pop-in;position:absolute;top:calc(100% + 12px);left:0;box-shadow:0 12px 40px #00000080}@keyframes synth-pop-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.synth-key-wheel{display:block}.synth-scale-list{flex-direction:column;gap:2px;min-width:140px;margin:0;padding:0;list-style:none;display:flex}.synth-scale-list li{display:block}.synth-scale-option{text-align:left;width:100%;font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;color:var(--text-body);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:8px 12px;font-weight:300;transition:color .1s,background .1s;display:block}.synth-scale-option:hover{color:var(--text-primary);background:#ffffff08}.synth-scale-option.is-active{color:var(--accent);background:var(--accent-subtle)}.synth-keyboard-keys{flex:1;align-items:stretch;gap:2px;display:flex;overflow:hidden}.synth-key{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;border:none;border-radius:3px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:6px;transition:filter 50ms;display:flex;position:relative}.synth-key:active{filter:brightness(1.4)}.synth-key-white{background:var(--synth-key-white);min-height:160px}.synth-key-black{background:var(--synth-key-black);border-radius:0 0 2px 2px;flex:.65;align-self:flex-start;min-height:100px}.synth-key-in-scale.synth-key-white{background:color-mix(in srgb, var(--accent) 22%, var(--synth-key-white))}.synth-key-in-scale.synth-key-black{background:color-mix(in srgb, var(--accent) 38%, var(--synth-key-black))}.synth-key-root{box-shadow:inset 0 0 0 1.5px var(--accent)}.synth-key-root:before{content:"";background:var(--accent);pointer-events:none;border-radius:50%;width:4px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.synth-key-label{font-size:var(--font-label);font-family:var(--font-mono);color:#0006;pointer-events:none;letter-spacing:.04em}@keyframes share-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes share-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes share-modal-in{0%{opacity:0;transform:scale(.94)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes share-modal-out{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.94)translateY(8px)}}@media (prefers-reduced-motion:reduce){@keyframes share-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes share-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes share-modal-in{0%{opacity:0}to{opacity:1}}@keyframes share-modal-out{0%{opacity:1}to{opacity:0}}}.share-overlay{z-index:400;-webkit-backdrop-filter:blur(4px);background:#0000008c;justify-content:center;align-items:center;animation:.15s ease-out share-overlay-in;display:flex;position:fixed;inset:0}.share-overlay.closing{animation:.15s ease-in forwards share-overlay-out}.share-modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-md);width:min(380px,100vw - 32px);animation:.18s ease-out share-modal-in;box-shadow:0 24px 64px #00000073}.share-modal.closing{animation:.15s ease-in forwards share-modal-out}.share-modal__header{justify-content:space-between;align-items:center;min-height:44px;padding:0 4px 0 16px;display:flex}.share-modal__title{letter-spacing:.06em;color:var(--text-secondary);font-size:12px;font-weight:300}.share-modal__close{min-width:44px;min-height:44px;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.share-modal__close:hover{background:var(--bg-hover);color:var(--text-primary)}.share-modal__body{padding:20px 16px 16px}.share-state{flex-direction:column;gap:12px;display:flex}.share-state--centered,.share-state--centered p{text-align:center}.share-value-flow{justify-content:center;align-items:center;gap:8px;padding:8px 0 4px;display:flex}.share-value-step{flex-direction:column;align-items:center;gap:6px;display:flex}.share-value-icon{background:var(--bg-hover);border:1px solid var(--border);width:40px;height:40px;color:var(--text-secondary);border-radius:10px;justify-content:center;align-items:center;display:flex}.share-value-icon--accent{background:var(--accent-subtle,#5ec4b61f);border-color:var(--accent-a30,#5ec4b64d);color:var(--accent)}.share-value-label{letter-spacing:.04em;color:var(--text-secondary);white-space:nowrap;font-size:10px;font-weight:300}.share-value-arrow{color:var(--text-muted,var(--text-secondary));opacity:.4;flex-shrink:0;margin-bottom:16px}.share-value-headline{color:var(--text-primary);margin:0;font-size:14px;font-weight:400;line-height:1.4}.share-modal__desc{color:var(--text-body);margin:0;font-size:13px;line-height:1.5}.share-modal__hint{color:var(--text-secondary);margin:-4px 0 0;font-size:12px;line-height:1.4}.share-modal__hint a{color:var(--accent);opacity:.8;text-decoration:none}.share-modal__hint a:hover{opacity:1;text-decoration:underline}.share-modal__error{color:var(--error,#e06c75);margin:0;font-size:12px;line-height:1.4}.share-btn{border-radius:var(--radius-sm);min-height:44px;font-size:13px;font-family:var(--font-ui);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:500;transition:opacity .15s,background .15s;display:flex}.share-btn:disabled{opacity:.55;cursor:not-allowed}.share-btn--publish{background:var(--accent);color:#1f2028;width:100%}.share-btn--publish:hover:not(:disabled){opacity:.88}.share-btn--google{background:var(--bg-hover);color:var(--text-body);border:1px solid var(--border);width:100%}.share-btn--google:hover{background:var(--bg-active)}.share-btn--x{color:var(--text-body);border:1px solid var(--border);background:0 0;width:100%}.share-btn--x:hover{background:var(--bg-hover)}.feedback-modal .share-modal__body{padding-top:4px}.feedback-form{flex-direction:column;gap:10px;display:flex}.feedback-textarea{background:var(--bg-input,var(--bg-surface));border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;min-height:120px;color:var(--text-body);resize:vertical;box-sizing:border-box;letter-spacing:.02em;outline:none;padding:10px 12px;font-family:inherit;font-size:13px}.feedback-textarea:focus{border-color:var(--accent)}.feedback-email{background:var(--bg-input,var(--bg-surface));border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;height:40px;color:var(--text-body);box-sizing:border-box;outline:none;padding:0 12px;font-family:inherit;font-size:12px}.feedback-email:focus{border-color:var(--accent)}.feedback-divider{color:var(--text-muted);letter-spacing:.05em;align-items:center;gap:10px;margin:4px 0;font-size:11px;display:flex}.feedback-divider:before,.feedback-divider:after{content:"";background:var(--border);flex:1;height:1px}.feedback-thanks{flex-direction:column;gap:14px;padding:8px 0;display:flex}.share-url-row{gap:6px;display:flex}.share-url-input{background:var(--bg-input,var(--bg-surface));border:1px solid var(--border);border-radius:var(--radius-sm);min-height:44px;color:var(--text-body);font-size:12px;font-family:var(--font-mono);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;outline:none;flex:1;padding:0 10px;overflow:hidden}.share-url-input:focus{border-color:var(--accent)}.share-copy-btn{border:1px solid var(--border);border-radius:var(--radius-sm);min-width:44px;min-height:44px;color:var(--text-secondary);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.share-copy-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.share-copy-btn.is-copied{border-color:var(--accent);color:var(--accent)}.share-footer{flex-wrap:wrap;align-items:center;gap:10px;padding-top:4px;display:flex}.share-update-btn{font-size:12px;font-family:var(--font-ui);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;min-height:32px;padding:0;transition:color .15s}.share-update-btn:hover:not(:disabled){color:var(--accent)}.share-update-btn:disabled{opacity:.5;cursor:not-allowed}.share-saved-at{color:var(--text-muted,var(--text-secondary));opacity:.6;font-size:11px}.menu-item__dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:auto}.menu-install-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;margin:4px 0;padding:12px;display:flex}.menu-install-card__title{color:var(--text-secondary);letter-spacing:.03em;font-size:10px;font-weight:600}.menu-install-card__steps{align-items:center;gap:6px;display:flex}.menu-install-card__step{flex-direction:column;flex:1;align-items:center;gap:5px;display:flex}.menu-install-card__step span{color:var(--text-secondary);letter-spacing:.03em;font-size:10px;font-weight:300}.menu-install-card__icon{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);width:44px;height:44px;color:var(--text-body);justify-content:center;align-items:center;display:flex}.menu-install-card__arrow{color:var(--accent);opacity:.8;flex-shrink:0}.menu-install-card__hint{color:var(--text-muted);letter-spacing:.03em;font-size:10px;font-weight:300;line-height:1.5}.menu-install-card__hint strong{color:var(--text-secondary);font-weight:400}.empty-slice-state{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;min-height:160px;padding:24px;display:flex}.empty-slice-hint{font-family:var(--font-ui);font-size:var(--font-btn-sm);letter-spacing:.03em;color:var(--text-secondary);text-transform:none;margin:0;font-weight:300}.panel-page--viz{padding:0;overflow:hidden}.panel-page--viz:after{display:none}.beat-viz{background:#1f2028;flex-direction:column;width:100%;height:100%;display:flex;position:relative}.beat-viz-empty{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.beat-viz-canvas{flex:1;width:100%;min-height:0;display:block}.track-nav-tab-icon{padding:6px 8px}.track-nav-braille{font-family:var(--font-mono);letter-spacing:.05em;font-size:12px;line-height:1}.track-nav-tab-viz{color:#ffffff73}.track-nav-tab-viz:hover{color:#ffffffbf}.confirm-overlay{z-index:500;-webkit-backdrop-filter:blur(4px);background:#0000008c;justify-content:center;align-items:center;animation:.15s ease-out share-overlay-in;display:flex;position:fixed;inset:0}.confirm-overlay.closing{animation:.15s ease-in forwards share-overlay-out}.confirm-dialog{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-md);width:min(320px,100vw - 32px);padding:20px;animation:.18s ease-out share-modal-in;box-shadow:0 24px 64px #00000073}.confirm-dialog.closing{animation:.15s ease-in forwards share-modal-out}.confirm-dialog__message{color:var(--text-primary);margin:0 0 18px;font-size:13px;line-height:1.5}.confirm-dialog__actions{justify-content:flex-end;gap:8px;display:flex}.confirm-dialog__cancel{border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;letter-spacing:.03em;background:0 0;padding:6px 14px;font-size:12px;font-weight:300}.confirm-dialog__cancel:hover{color:var(--text-primary);border-color:var(--text-secondary)}.confirm-dialog__confirm{border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#000;cursor:pointer;letter-spacing:.03em;padding:6px 14px;font-size:12px;font-weight:400}.confirm-dialog__confirm:hover{opacity:.85}