:root,:root[data-theme=dark-violet]{--color-bg: #0a0a0f;--color-surface: #111118;--color-surface-2: #18181f;--color-border: #2a2a38;--color-text: #e8e8f0;--color-text-dim: #8888a8;--color-accent: #7c3aed;--color-secondary: #06b6d4;--color-success: #22c55e;--color-danger: #ef4444;--color-text-faint: #44445a}:root[data-theme=dark-cyan]{--color-bg: #050d0f;--color-surface: #091318;--color-surface-2: #0d1c22;--color-border: #1a3340;--color-text: #d6f0f5;--color-text-dim: #6aabb8;--color-text-faint: #2a5060;--color-accent: #06b6d4;--color-secondary: #7c3aed;--color-success: #22c55e;--color-danger: #ef4444}:root[data-theme=dark-neon]{--color-bg: #08050d;--color-surface: #100d18;--color-surface-2: #16121f;--color-border: #2d1f42;--color-text: #f0e8ff;--color-text-dim: #b084e0;--color-text-faint: #4a2d6a;--color-accent: #f020b0;--color-secondary: #39ff14;--color-success: #39ff14;--color-danger: #ff3030}:root[data-theme=dark-blood]{--color-bg: #0a0505;--color-surface: #140808;--color-surface-2: #1c0c0c;--color-border: #3d1414;--color-text: #f0e0e0;--color-text-dim: #a86060;--color-text-faint: #4a1c1c;--color-accent: #dc2626;--color-secondary: #f97316;--color-success: #22c55e;--color-danger: #ff1010}:root[data-theme=dark-cyber]{--color-bg: #060809;--color-surface: #0a0e10;--color-surface-2: #0f1518;--color-border: #1c2c32;--color-text: #e8f4d0;--color-text-dim: #7aaa60;--color-text-faint: #1e3428;--color-accent: #f5e642;--color-secondary: #00ffea;--color-success: #00ffea;--color-danger: #ff3060}:root[data-theme=light]{--color-bg: #f5f5f8;--color-surface: #ffffff;--color-surface-2: #f0f0f5;--color-border: #d0d0de;--color-text: #12121e;--color-text-dim: #555577;--color-text-faint: #9999bb;--color-accent: #7c3aed;--color-secondary: #0891b2;--color-success: #16a34a;--color-danger: #dc2626}:root{--font-sans: "Inter", system-ui, sans-serif;--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--transition-fast: .12s ease;--transition-base: .2s ease;--color-accent-dim: color-mix(in srgb, var(--color-accent) 70%, black);--color-accent-glow: color-mix(in srgb, var(--color-accent) 35%, transparent);--color-text-muted: var(--color-text-dim);--color-text-faint: color-mix(in srgb, var(--color-text-dim) 50%, var(--color-bg));--color-border-subtle: color-mix(in srgb, var(--color-border) 70%, var(--color-bg));--color-surface-3: color-mix(in srgb, var(--color-surface-2) 60%, var(--color-border))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:1rem;line-height:1.6;min-height:100dvh}#root{min-height:100dvh;display:flex;flex-direction:column}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-secondary)}img,svg{display:block}.page-loader{display:flex;align-items:center;justify-content:center;min-height:100dvh}.page-loader__spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progressShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes progressSlide{0%{transform:translate(-120%)}50%{transform:translate(220%)}to{transform:translate(-120%)}}.layout{display:flex;flex-direction:column;min-height:100dvh}.nav{display:flex;align-items:center;gap:var(--space-6);padding:0 var(--space-8);height:56px;background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.nav__logo{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em;margin-right:auto}.nav__logo span{color:var(--color-accent)}.nav__link{font-size:.875rem;font-weight:500;color:var(--color-text-muted);transition:color var(--transition-fast);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.nav__link:hover,.nav__link.active{color:var(--color-text)}.nav__link.active{background:var(--color-surface-3)}.layout__main{flex:1}.landing{display:flex;flex-direction:column}.landing__hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-16) var(--space-8);min-height:calc(100dvh - 56px);overflow:hidden}.landing__hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,color-mix(in srgb,var(--color-accent) 18%,transparent) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 80% 80%,color-mix(in srgb,var(--color-secondary) 10%,transparent) 0%,transparent 60%);pointer-events:none}.landing__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-4)}.landing__title{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--color-text);max-width:14ch;margin-bottom:var(--space-5)}.landing__title em{font-style:normal;color:var(--color-accent)}.landing__subtitle{font-size:clamp(1rem,2.5vw,1.2rem);color:var(--color-text-muted);max-width:52ch;margin-bottom:var(--space-10);line-height:1.7}.landing__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;cursor:pointer;border:none;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);text-decoration:none}.btn:hover{transform:translateY(-1px)}.btn--primary{background:var(--color-accent);color:#fff;box-shadow:0 0 0 0 var(--color-accent-glow)}.btn--primary:hover{background:var(--color-accent-dim);box-shadow:0 4px 24px var(--color-accent-glow);color:#fff}.btn--ghost{background:var(--color-surface-3);color:var(--color-text);border:1px solid var(--color-border)}.btn--ghost:hover{background:var(--color-surface-2);border-color:var(--color-accent);color:var(--color-text)}.landing__features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);padding:var(--space-16) var(--space-8);max-width:1100px;margin:0 auto;width:100%}.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.feature-card:hover{border-color:var(--color-accent);box-shadow:0 0 24px var(--color-accent-glow)}.feature-card__icon{width:40px;height:40px;background:var(--color-surface-3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);border:1px solid var(--color-border)}.feature-card__title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.feature-card__body{font-size:.875rem;color:var(--color-text-muted);line-height:1.65}.landing__genres{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;padding:0 var(--space-8) var(--space-16)}.genre-tag{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface)}.studio{display:flex;flex-direction:column;height:calc(100dvh - 56px);overflow:hidden}.studio__body{display:grid;grid-template-columns:220px 1fr 260px;grid-template-rows:1fr;flex:1;gap:0;min-height:0}.studio__rail{background:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}.studio__rail--right{border-right:none;border-left:1px solid var(--color-border)}.studio__center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-6);gap:var(--space-6);overflow:hidden}.studio__note-bars{display:flex;align-items:flex-end;gap:2px;width:100%;max-width:1000px;height:48px}.studio__note-bar{flex:1;background:var(--color-surface-3);border-radius:2px 2px 0 0;transition:height var(--transition-fast),background var(--transition-fast);height:4px}.studio__note-bar--active{background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-secondary) 100%);box-shadow:0 0 8px var(--color-accent-glow);height:48px}.studio__transport{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--color-surface);border-top:1px solid var(--color-border);flex-shrink:0}.studio__transport-state{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);margin-left:auto}.preset-rail__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.preset-rail__empty{font-size:.8125rem;color:var(--color-text-faint);font-style:italic;line-height:1.5}.preset-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle);background:var(--color-surface-2);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.preset-item:hover{border-color:var(--color-accent);background:var(--color-surface-3)}.preset-item--selected{border-color:var(--color-accent);background:var(--color-surface-3);box-shadow:0 0 0 1px var(--color-accent-glow)}.preset-item__name{font-size:.8125rem;font-weight:500;color:var(--color-text)}.preset-item__category{font-size:.6875rem;color:var(--color-text-faint);margin-top:1px}@keyframes bg-drift{0%{background-position:50% 0%}50%{background-position:50% 100%}to{background-position:50% 0%}}.landing__hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 50% 40% at 20% 60%,color-mix(in srgb,var(--color-secondary) 6%,transparent) 0%,transparent 60%),radial-gradient(ellipse 35% 25% at 75% 30%,color-mix(in srgb,var(--color-accent) 8%,transparent) 0%,transparent 55%);background-size:200% 200%;animation:bg-drift 18s ease-in-out infinite;pointer-events:none}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:none;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:600;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);position:relative;text-decoration:none;white-space:nowrap;line-height:1}.ui-btn:hover:not(:disabled){transform:translateY(-1px)}.ui-btn:active:not(:disabled){transform:translateY(0)}.ui-btn:disabled{opacity:.45;cursor:not-allowed}.ui-btn--sm{font-size:.8125rem;padding:var(--space-2) var(--space-4);height:32px}.ui-btn--md{font-size:.9375rem;padding:var(--space-3) var(--space-6);height:40px}.ui-btn--lg{font-size:1rem;padding:var(--space-4) var(--space-8);height:48px}.ui-btn--primary{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-dim) 100%);color:#fff;box-shadow:0 0 0 0 var(--color-accent-glow)}.ui-btn--primary:hover:not(:disabled){box-shadow:0 4px 20px var(--color-accent-glow)}.ui-btn--secondary{background:transparent;color:var(--color-accent);border:1px solid var(--color-accent)}.ui-btn--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-accent) 10%,transparent);box-shadow:0 0 12px var(--color-accent-glow)}.ui-btn--ghost{background:var(--color-surface-3);color:var(--color-text);border:1px solid var(--color-border)}.ui-btn--ghost:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-accent)}.ui-btn--loading{pointer-events:none}.ui-btn__spinner{position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.ui-btn__label--hidden{visibility:hidden}.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.ui-card--interactive:hover{border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow);transform:translateY(-2px);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base)}.ui-card__header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border-subtle);font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--color-text)}.ui-card__body{padding:var(--space-6)}.ui-card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border-subtle);background:var(--color-surface-2)}.ui-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-8) var(--space-8) var(--space-6);border-bottom:1px solid var(--color-border-subtle)}.ui-page-header__text{display:flex;flex-direction:column;gap:var(--space-1)}.ui-page-header__title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text);line-height:1.2}.ui-page-header__subtitle{font-size:.875rem;color:var(--color-text-muted);line-height:1.5}.ui-page-header__actions{display:flex;gap:var(--space-3);align-items:center;flex-shrink:0}.ui-input{display:flex;flex-direction:column;gap:var(--space-2)}.ui-input__label{font-size:.8125rem;font-weight:500;color:var(--color-text-muted);letter-spacing:.01em}.ui-input__wrapper{position:relative}.ui-input__icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-text-faint);display:flex;align-items:center;pointer-events:none}.ui-input__field{width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:.9375rem;padding:var(--space-2) var(--space-3);height:40px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.ui-input__field--leading{padding-left:calc(var(--space-3) + 20px + var(--space-2))}.ui-input__field:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.ui-input__field--error{border-color:var(--color-danger)}.ui-input__field--error:focus{box-shadow:0 0 0 3px #ef444440}.ui-input__field::placeholder{color:var(--color-text-faint)}.ui-input__helper{font-size:.75rem;color:var(--color-text-muted)}.ui-input__helper--error{color:var(--color-danger)}.ui-slider{display:flex;flex-direction:column;gap:var(--space-2)}.ui-slider__header{display:flex;justify-content:space-between;align-items:center}.ui-slider__label{font-size:.8125rem;font-weight:500;color:var(--color-text-muted)}.ui-slider__value{font-size:.8125rem;font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}.ui-slider__unit{color:var(--color-text-muted);font-weight:400}.ui-slider__track{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--color-surface-3);border-radius:999px;outline:none;cursor:pointer}.ui-slider__track::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 6px var(--color-accent-glow);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.ui-slider__track::-webkit-slider-thumb:hover{box-shadow:0 0 12px var(--color-accent-glow);transform:scale(1.15)}.ui-slider__track::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-accent);border:none;box-shadow:0 0 6px var(--color-accent-glow)}.ui-tag{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px var(--space-2);border-radius:999px;border:1px solid var(--color-border);line-height:1.4}.ui-tag--default{background:var(--color-surface);color:var(--color-text-muted)}.ui-tag--accent{background:color-mix(in srgb,var(--color-accent) 15%,transparent);border-color:color-mix(in srgb,var(--color-accent) 40%,transparent);color:color-mix(in srgb,var(--color-accent) 80%,white)}.ui-tag--cyan{background:color-mix(in srgb,var(--color-secondary) 12%,transparent);border-color:color-mix(in srgb,var(--color-secondary) 35%,transparent);color:color-mix(in srgb,var(--color-secondary) 80%,white)}.ui-tag--danger{background:color-mix(in srgb,var(--color-danger) 12%,transparent);border-color:color-mix(in srgb,var(--color-danger) 35%,transparent);color:color-mix(in srgb,var(--color-danger) 80%,white)}.ui-select{display:flex;flex-direction:column;gap:var(--space-2)}.ui-select__label{font-size:.8125rem;font-weight:500;color:var(--color-text-muted)}.ui-select__wrapper{position:relative}.ui-select__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:.9375rem;padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);height:40px;outline:none;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.ui-select__field:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.ui-select__field option{background:var(--color-surface-2);color:var(--color-text)}.ui-select__chevron{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;display:flex;align-items:center}.ui-select__helper{font-size:.75rem;color:var(--color-text-muted)}.ui-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-4);padding:var(--space-16) var(--space-8)}.ui-empty-state__icon{width:56px;height:56px;background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-text-faint)}.ui-empty-state__title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--color-text)}.ui-empty-state__body{font-size:.875rem;color:var(--color-text-muted);max-width:38ch;line-height:1.6}.ui-empty-state__action{margin-top:var(--space-2)}.footer{border-top:1px solid var(--color-border-subtle);background:var(--color-surface);padding:var(--space-4) var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.footer__tagline{font-size:.75rem;color:var(--color-text-faint);letter-spacing:.04em;text-transform:uppercase;font-weight:500}.footer__meta{font-size:.75rem;color:var(--color-text-faint);font-variant-numeric:tabular-nums}.mixer-strip{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:56px}.mixer-strip__name{font-size:.6875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg);max-height:72px;overflow:hidden;text-overflow:ellipsis}.mixer-strip__fader{writing-mode:vertical-lr;-webkit-appearance:slider-vertical;width:20px;height:80px;cursor:pointer;accent-color:var(--color-accent)}.presets-page{display:flex;flex-direction:column;min-height:calc(100dvh - 56px)}.presets-page__toolbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-8);background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle);flex-wrap:wrap}.presets-page__filter-group{display:flex;gap:var(--space-2);flex-wrap:wrap}.presets-page__filter-btn{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.8125rem;font-weight:500;padding:var(--space-1) var(--space-3);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.presets-page__filter-btn:hover,.presets-page__filter-btn--active{border-color:var(--color-accent);color:var(--color-text);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}.presets-page__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4);padding:var(--space-6) var(--space-8)}.preset-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);cursor:pointer}.preset-card:hover{border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow);transform:translateY(-2px)}.preset-card--selected{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent),0 0 20px var(--color-accent-glow)}.preset-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2)}.preset-card__name{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--color-text);line-height:1.3}.preset-card__category{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-secondary);flex-shrink:0}.preset-card__desc{font-size:.8125rem;color:var(--color-text-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.preset-card__tags{display:flex;gap:var(--space-2);flex-wrap:wrap}.preset-card__footer{display:flex;justify-content:flex-end;margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--color-border-subtle)}.generate-page{display:flex;min-height:calc(100dvh - 56px)}.generate-page__form-panel{width:380px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--color-border-subtle);background:var(--color-surface);overflow-y:auto}.generate-page__form-body{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6)}.generate-page__canvas-panel{flex:1;display:flex;flex-direction:column;background:var(--color-bg);overflow:hidden}.generate-page__placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--color-text-faint);font-size:.875rem;text-align:center;padding:var(--space-8);border:1px dashed var(--color-border);margin:var(--space-6);border-radius:var(--radius-lg)}.generate-page__placeholder-label{font-family:var(--font-display);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}.stub-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 56px);gap:var(--space-4);color:var(--color-text-muted)}.stub-page h1{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--color-text)}.stub-page p{font-size:.9375rem;max-width:40ch;text-align:center}.generate-columns{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:var(--space-8);align-items:start}@media (max-width: 768px){.generate-columns{grid-template-columns:1fr}}.learn-page{display:flex;flex-direction:column;min-height:calc(100dvh - 56px);padding:var(--space-8);gap:var(--space-8);max-width:1200px;margin:0 auto;width:100%}.learn-page__intake{display:flex;flex-direction:column;gap:var(--space-6)}.learn-page__player{display:flex;flex-direction:column;gap:var(--space-4);flex:1}.learn-page__player-header{display:flex;align-items:center;gap:var(--space-4)}.learn-page__empty{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.learn-page__empty-hint{font-size:.9375rem;color:var(--color-text-muted)}.learn-page__features{display:flex;flex-direction:column;gap:var(--space-3)}.learn-page__feature-item{display:flex;align-items:center;gap:var(--space-3);font-size:.875rem;color:var(--color-text-muted)}.learn-page__feature-dot{width:12px;height:12px;border-radius:2px;flex-shrink:0}.learn-page__feature-dot--violet{background:var(--color-accent)}.learn-page__feature-dot--cyan{background:var(--color-secondary)}.learn-page__feature-dot--neutral{background:var(--color-border)}.yt-intake{display:flex;flex-direction:column;gap:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.yt-intake__header{display:flex;flex-direction:column;gap:var(--space-2)}.yt-intake__title{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--color-text)}.yt-intake__subtitle{font-size:.875rem;color:var(--color-text-muted);max-width:64ch;line-height:1.6}.yt-intake__disclaimer{font-size:.75rem;color:var(--color-text-faint);max-width:64ch;line-height:1.5;border-left:2px solid var(--color-border);padding-left:var(--space-3)}.yt-intake__form{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap}.yt-intake__form .ui-input{flex:1;min-width:280px}.yt-intake__status{display:flex;align-items:center;gap:var(--space-3);font-size:.875rem;color:var(--color-text-muted);min-height:24px}.yt-intake__status-spinner{width:14px;height:14px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.yt-intake__status-label--ready{color:var(--color-secondary);font-weight:600}.yt-intake__demos{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border-subtle)}.yt-intake__demos-label{font-size:.8125rem;color:var(--color-text-faint)}.chart-picker{min-width:280px}.fn-root{display:flex;flex-direction:column;gap:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-bg)}.fn-canvas-wrap{position:relative;width:100%;height:520px}.fn-canvas{display:block;width:100%;height:100%}.fn-hud{position:absolute;top:var(--space-4);right:var(--space-4);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none;-webkit-user-select:none;user-select:none}.fn-hud__score{display:flex;flex-direction:column;align-items:flex-end;background:#111118cc;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fn-hud__score-value{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-text);line-height:1.1;letter-spacing:-.02em}.fn-hud__score-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.fn-hud__combo-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);min-height:40px}.fn-hud__combo{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--color-accent);line-height:1;letter-spacing:-.02em;text-shadow:0 0 20px var(--color-accent-glow)}@keyframes combo-pulse{0%{transform:scale(1.4);opacity:1}60%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}.fn-hud__combo--pulse{animation:combo-pulse .28s cubic-bezier(.22,1,.36,1) forwards}.fn-hud__window{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.fn-hud__window--perfect{color:var(--color-secondary)}.fn-hud__window--miss{color:var(--color-danger)}.fn-hud__accuracy{display:flex;flex-direction:column;align-items:flex-end;background:#111118cc;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fn-hud__accuracy-value{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--color-text);line-height:1.1}.fn-hud__accuracy-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.fn-top-bar{display:flex;align-items:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle);flex-wrap:wrap}.fn-top-bar__control{display:flex;flex-direction:column}.fn-top-bar__control--mode{min-width:130px}.fn-top-bar__control--difficulty{min-width:120px}.fn-top-bar__control--speed{min-width:160px}.fn-top-bar__meta{display:flex;align-items:center;gap:var(--space-3);flex:1;flex-wrap:wrap;padding-bottom:2px}.fn-top-bar__meta-bpm,.fn-top-bar__meta-key,.fn-top-bar__meta-bars{font-size:.8125rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px var(--space-2)}.fn-top-bar__meta-key{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 30%,transparent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}.fn-top-bar__toggle{height:32px;padding:0 var(--space-3);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);white-space:nowrap;align-self:flex-end;margin-bottom:2px}.fn-top-bar__toggle:hover{border-color:var(--color-accent);color:var(--color-text)}.fn-top-bar__toggle--active{background:color-mix(in srgb,var(--color-accent) 15%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 80%,white)}.fn-controls{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-5);background:var(--color-surface);border-top:1px solid var(--color-border);flex-wrap:wrap}.fn-controls__transport{display:flex;gap:var(--space-2);flex-shrink:0}.fn-controls__info{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}.fn-controls__chart-title{font-size:.875rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fn-controls__pos{font-size:.75rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.fn-controls__speed{flex-shrink:0;min-width:160px}.fn-controls__mode-badge{color:var(--color-accent);font-weight:600}.fn-hud__window--great{color:var(--color-accent)}.fn-hud__window--ok{color:var(--color-text-muted)}.finger-overlay{pointer-events:none;z-index:10}.yt-intake__progress{display:flex;flex-direction:column;gap:var(--space-3)}.yt-intake__progress-header{display:flex;flex-direction:column;gap:var(--space-2)}.yt-intake__progress-row{display:flex;align-items:center;gap:var(--space-3)}.yt-intake__progress-pct{font-size:.8125rem;font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums;margin-left:auto}.yt-intake__bar-track{height:4px;background:var(--color-surface-3);border-radius:999px;overflow:hidden}.yt-intake__bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-secondary) 100%);border-radius:999px;transition:width .3s ease}.yt-intake__phases{display:flex;gap:var(--space-2);align-items:center}.yt-intake__phase-dot{width:8px;height:8px;border-radius:50%;background:var(--color-surface-3);border:1px solid var(--color-border);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);flex-shrink:0}.yt-intake__phase-dot--done{background:var(--color-accent);border-color:var(--color-accent)}.yt-intake__phase-dot--active{background:var(--color-secondary);border-color:var(--color-secondary);transform:scale(1.35);box-shadow:0 0 6px color-mix(in srgb,var(--color-secondary) 60%,transparent)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fade-in-up .28s cubic-bezier(.22,1,.36,1) both}.ui-btn:active:not(:disabled){transform:scale(.97)!important;transition-duration:60ms!important}.ui-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 40%,transparent)}.ui-btn{overflow:hidden}.ui-btn:after{content:"";position:absolute;left:var(--ripple-x, 50%);top:var(--ripple-y, 50%);width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}.ui-btn--rippling:after{animation:ripple-expand .42s ease-out forwards}@keyframes ripple-expand{0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%) scale(0)}60%{opacity:.6}to{width:200px;height:200px;opacity:0;transform:translate(-50%,-50%) scale(1)}}.ui-card--interactive{transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);will-change:transform}.ui-card--interactive:hover{border-color:var(--color-accent);box-shadow:0 0 24px var(--color-accent-glow);transform:translateY(-2px)}.nav{padding:0 var(--space-8);height:64px;border-bottom:2px solid color-mix(in srgb,var(--color-accent) 25%,var(--color-border))}.nav__link-wrap{position:relative;display:flex;align-items:center}.nav__link--active-bar:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--color-accent);border-radius:1px;animation:slide-in-bar .18s ease forwards}@keyframes slide-in-bar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.nav__icon-link{display:flex;align-items:center;justify-content:center;color:var(--color-text-dim);border-radius:var(--radius-sm);padding:var(--space-1);transition:color var(--transition-fast),background var(--transition-fast)}.nav__icon-link:hover{color:var(--color-text);background:var(--color-surface-3)}.theme-picker{display:flex;flex-direction:column;gap:var(--space-4)}.theme-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-3)}.theme-picker__card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.theme-picker__card:hover{border-color:var(--color-accent)}.theme-picker__card--active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-glow)}.theme-picker__swatches{display:flex;gap:2px;border-radius:var(--radius-sm);overflow:hidden;width:100%;height:28px}.theme-picker__swatch{flex:1;display:block}.theme-picker__label{font-size:.75rem;font-weight:600;color:var(--color-text-dim);letter-spacing:.04em}.theme-picker__accent-row{display:flex;align-items:center;gap:var(--space-3)}.theme-picker__accent-label{font-size:.8125rem;font-weight:500;color:var(--color-text-dim)}.theme-picker__accent-input{width:40px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:transparent;padding:2px}.theme-picker__accent-reset{font-size:.75rem;color:var(--color-text-dim);background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast)}.theme-picker__accent-reset:hover{color:var(--color-text);border-color:var(--color-accent)}.settings-page{max-width:800px;margin:0 auto;padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-8);min-height:calc(100dvh - 64px)}.settings-section__title{font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:var(--space-4)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-subtle)}.settings-row:last-child{border-bottom:none}.settings-row__label{font-size:.9375rem;font-weight:500;color:var(--color-text)}.settings-row__hint{font-size:.8125rem;color:var(--color-text-dim);margin-top:2px}.toggle{position:relative;width:42px;height:24px;flex-shrink:0}.toggle__input{position:absolute;opacity:0;width:0;height:0}.toggle__track{display:block;width:42px;height:24px;border-radius:999px;background:var(--color-surface-3);border:1px solid var(--color-border);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast);position:relative}.toggle__track:after{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--color-text-dim);transition:transform var(--transition-fast),background var(--transition-fast)}.toggle__input:checked+.toggle__track{background:var(--color-accent);border-color:var(--color-accent)}.toggle__input:checked+.toggle__track:after{transform:translateY(-50%) translate(18px);background:#fff}.toggle__input:focus-visible+.toggle__track{box-shadow:0 0 0 3px var(--color-accent-glow)}.mix-page{display:flex;flex-direction:column;min-height:calc(100dvh - 64px);padding:var(--space-6) var(--space-8);gap:var(--space-6);max-width:1400px;margin:0 auto;width:100%}.mix-decks{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-6);align-items:start}.mix-deck{display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.mix-deck__label{font-family:var(--font-display);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim)}.mix-deck__track-name{font-size:.875rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.3em}.jog-wheel{width:160px;height:160px;margin:0 auto;position:relative}.jog-wheel__outer{width:100%;height:100%;border-radius:50%;background:conic-gradient(var(--color-surface-3) 0deg,var(--color-border) 90deg,var(--color-surface-3) 180deg,var(--color-border) 270deg,var(--color-surface-3) 360deg);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-base)}.jog-wheel__outer--playing{border-color:var(--color-accent);animation:jog-spin 2s linear infinite}@keyframes jog-spin{to{transform:rotate(360deg)}}.jog-wheel__inner{width:60px;height:60px;border-radius:50%;background:var(--color-surface-2);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-dim);position:relative;z-index:1}.mix-deck__transport{display:flex;gap:var(--space-2);justify-content:center}.mix-deck__bpm{text-align:center;font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums}.mix-deck__bpm-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}.mix-deck__eq{display:flex;gap:var(--space-4);justify-content:center;align-items:flex-end}.mix-deck__eq-label{font-size:.6875rem;color:var(--color-text-dim);text-align:center;margin-top:var(--space-1)}.mix-center{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding-top:var(--space-8)}.mix-center__title{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim)}.crossfader{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.crossfader__track{writing-mode:vertical-lr;-webkit-appearance:slider-vertical;width:24px;height:160px;cursor:pointer;accent-color:var(--color-accent)}.vu-meter{display:flex;flex-direction:column;gap:2px;width:20px;height:120px;justify-content:flex-end}.vu-meter__bar{width:100%;border-radius:1px;transition:height var(--transition-fast),background var(--transition-fast);background:var(--color-border)}.vu-meter__bar--active{background:linear-gradient(to top,var(--color-secondary),var(--color-accent))}.vu-meter__bar--clip{background:var(--color-danger)}.mix-library{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.mix-library__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}.mix-library__list{display:flex;flex-direction:column;gap:var(--space-1)}.mix-library__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface-2);font-size:.8125rem;color:var(--color-text-dim);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);border:1px solid transparent}.mix-library__item:hover{background:var(--color-surface-3);color:var(--color-text);border-color:var(--color-border)}.knob{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);user-select:none;-webkit-user-select:none}.knob__dial{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--color-surface-3),var(--color-surface));border:2px solid var(--color-border);position:relative;cursor:ns-resize;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.knob__dial:hover{border-color:var(--color-accent);box-shadow:0 0 8px var(--color-accent-glow)}.knob__dial--active{border-color:var(--color-accent);box-shadow:0 0 12px var(--color-accent-glow)}.knob__indicator{position:absolute;top:5px;left:50%;transform:translate(-50%);width:2px;height:10px;background:var(--color-accent);border-radius:1px;transform-origin:center 17px}.knob__label{font-size:.6875rem;color:var(--color-text-dim);text-align:center}.knob__value{font-size:.6875rem;font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text);text-align:center;min-width:3ch}.pads-page{display:flex;flex-direction:column;min-height:calc(100dvh - 64px);padding:var(--space-6) var(--space-8);gap:var(--space-6);max-width:900px;margin:0 auto;width:100%}.pads-page__header{display:flex;align-items:center;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap}.pads-mode-toggle{display:flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.pads-mode-toggle__btn{padding:var(--space-2) var(--space-5);font-size:.875rem;font-weight:500;color:var(--color-text-dim);background:transparent;border:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.pads-mode-toggle__btn--active{background:var(--color-accent);color:#fff}.pads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);aspect-ratio:1;max-height:600px}.pad-cell{position:relative;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);overflow:hidden;aspect-ratio:1}.pad-cell:hover{border-color:var(--color-accent)}.pad-cell:active,.pad-cell--triggered{transform:scale(.95);border-color:var(--color-accent);box-shadow:0 0 16px var(--color-accent-glow);animation:pad-pulse .26s ease forwards}@keyframes pad-pulse{0%{box-shadow:0 0 0 0 var(--color-accent-glow)}50%{box-shadow:0 0 24px 4px var(--color-accent-glow)}to{box-shadow:0 0 8px 0 var(--color-accent-glow)}}.pad-cell__color-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-md) var(--radius-md) 0 0}.pad-cell__label{font-size:.875rem;font-weight:600;color:var(--color-text);text-align:center}.pad-cell__sample{font-size:.6875rem;color:var(--color-text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.pad-cell__note{font-size:.6875rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.pad-popover{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);min-width:280px;display:flex;flex-direction:column;gap:var(--space-4);box-shadow:0 8px 32px #00000080}.pad-popover__title{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--color-text)}.pad-popover__row{display:flex;flex-direction:column;gap:var(--space-2)}.pad-popover__label{font-size:.8125rem;font-weight:500;color:var(--color-text-dim)}.pad-popover__midi-learn{display:flex;gap:var(--space-2);align-items:center}.pad-color-row{display:flex;gap:var(--space-2);flex-wrap:wrap}.pad-color-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:border-color var(--transition-fast),transform var(--transition-fast)}.pad-color-swatch:hover{transform:scale(1.15)}.pad-color-swatch--selected{border-color:var(--color-text)}.sound-import{display:flex;flex-direction:column;gap:var(--space-4)}.sound-import__dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast);background:transparent;width:100%}.sound-import__dropzone:hover,.sound-import__dropzone--drag-over{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 5%,transparent)}.sound-import__icon{color:var(--color-text-dim)}.sound-import__title{font-size:.9375rem;font-weight:600;color:var(--color-text)}.sound-import__hint,.sound-import__or{font-size:.8125rem;color:var(--color-text-dim)}.sound-import__results{display:flex;flex-direction:column;gap:var(--space-2)}.sound-import__result-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}.sound-import__result-icon{color:var(--color-success);flex-shrink:0}.sound-import__result-name{font-size:.875rem;font-weight:500;color:var(--color-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-import__result-size{font-size:.75rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums;flex-shrink:0}.sound-import__error{font-size:.8125rem;color:var(--color-danger);padding:var(--space-2) var(--space-3);background:color-mix(in srgb,var(--color-danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-danger) 30%,transparent);border-radius:var(--radius-md)}@media (max-width: 768px){.nav{gap:var(--space-3);padding:0 var(--space-4);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.nav::-webkit-scrollbar{display:none}.studio__body{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.studio__rail{border-right:none;border-bottom:1px solid var(--color-border);max-height:180px}.studio__rail--right{border-left:none;border-top:1px solid var(--color-border)}.generate-page__form-panel{width:100%}.generate-page{flex-direction:column}.mix-decks{grid-template-columns:1fr;grid-template-rows:auto auto auto}.mix-center{flex-direction:row;padding-top:0;justify-content:center}.pads-grid{max-height:none}.ui-page-header{padding:var(--space-5) var(--space-4) var(--space-4)}.presets-page__grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:var(--space-4)}.settings-page{padding:var(--space-5) var(--space-4)}.mix-page,.pads-page{padding:var(--space-4)}.landing__features{padding:var(--space-10) var(--space-4)}.landing__hero{padding:var(--space-12) var(--space-4)}}.skip-link{position:absolute;top:-100px;left:var(--space-4);z-index:9999;background:var(--color-accent);color:#fff;padding:var(--space-2) var(--space-4);border-radius:0 0 var(--radius-md) var(--radius-md);font-size:.875rem;font-weight:600;text-decoration:none;transition:top var(--transition-fast)}.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.ui-btn:focus-visible,.ui-input__field:focus-visible,.ui-select__field:focus-visible{outline:none}.ui-btn,.nav__link,.nav__icon-link,.pad-cell,.presets-page__filter-btn,.fn-top-bar__toggle,.pads-mode-toggle__btn,.theme-picker__card{min-height:44px;min-width:44px}.nav__icon-link{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.nav__project-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-dim);font-size:.8125rem;font-weight:500;cursor:pointer;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color var(--transition-fast),color var(--transition-fast);min-height:32px;flex-shrink:0}.nav__project-indicator:hover{border-color:var(--color-accent);color:var(--color-text)}.nav__project-indicator:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.nav__project-name{max-width:140px;overflow:hidden;text-overflow:ellipsis}.nav__project-dirty{color:var(--color-accent);margin-left:2px}.toast-host{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:9000;display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;width:340px;max-width:calc(100vw - var(--space-8))}.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid;font-size:.875rem;font-weight:500;pointer-events:all;animation:toast-in .24s cubic-bezier(.22,1,.36,1) both;line-height:1.4;box-shadow:0 4px 16px #0006}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.toast--success{background:color-mix(in srgb,var(--color-success) 12%,var(--color-surface));border-color:color-mix(in srgb,var(--color-success) 40%,transparent);color:var(--color-text)}.toast--success .toast__icon{color:var(--color-success)}.toast--error{background:color-mix(in srgb,var(--color-danger) 12%,var(--color-surface));border-color:color-mix(in srgb,var(--color-danger) 40%,transparent);color:var(--color-text)}.toast--error .toast__icon{color:var(--color-danger)}.toast--info{background:color-mix(in srgb,var(--color-secondary) 12%,var(--color-surface));border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent);color:var(--color-text)}.toast--info .toast__icon{color:var(--color-secondary)}.toast--warning{background:color-mix(in srgb,#f97316 12%,var(--color-surface));border-color:color-mix(in srgb,#f97316 40%,transparent);color:var(--color-text)}.toast--warning .toast__icon{color:#f97316}.toast__icon{flex-shrink:0;display:flex;align-items:center}.toast__message{flex:1;min-width:0}.toast__dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--color-text-faint);padding:2px;border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--transition-fast);min-height:24px;min-width:24px;justify-content:center}.toast__dismiss:hover{color:var(--color-text)}.toast__dismiss:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 120px);padding:var(--space-8)}.error-boundary__card{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-10);max-width:480px;width:100%}.error-boundary__icon{color:var(--color-danger);opacity:.8}.error-boundary__title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--color-text)}.error-boundary__route{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint)}.error-boundary__detail{font-size:.8125rem;color:var(--color-text-dim);background:var(--color-surface-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-family:monospace;max-width:100%;word-break:break-word}.error-boundary__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.ui-skeleton{background:var(--color-surface-2);border-radius:var(--radius-sm);position:relative;overflow:hidden}.ui-skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--color-text) 6%,transparent) 50%,transparent 100%);background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ui-skeleton--circle{border-radius:50%}.page-skeleton{display:flex;flex-direction:column;min-height:calc(100dvh - 120px)}.page-skeleton__header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-8) var(--space-8) var(--space-6);border-bottom:1px solid var(--color-border-subtle)}.page-skeleton__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4);padding:var(--space-6) var(--space-8)}.page-skeleton__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.studio-skeleton{display:grid;grid-template-columns:220px 1fr 260px;height:calc(100dvh - 56px)}.studio-skeleton__rail{background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.studio-skeleton__center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);gap:var(--space-4)}.shortcuts-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8000;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fade-in-up .18s ease both}.shortcuts-modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px #00000080}.shortcuts-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0}.shortcuts-modal__title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--color-text)}.shortcuts-modal__close{background:none;border:none;cursor:pointer;color:var(--color-text-dim);padding:var(--space-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--transition-fast);min-height:32px;min-width:32px;justify-content:center}.shortcuts-modal__close:hover{color:var(--color-text)}.shortcuts-modal__close:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.shortcuts-modal__body{overflow-y:auto;padding:var(--space-5) var(--space-6) var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}.shortcuts-category__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-3)}.shortcuts-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-1)}.shortcuts-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.shortcuts-item:hover{background:var(--color-surface-2)}.shortcuts-item__keys{display:flex;align-items:center;gap:2px;flex-shrink:0;min-width:120px}.shortcuts-item__sep{font-size:.75rem;color:var(--color-text-faint);margin:0 2px}.shortcuts-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px var(--space-2);background:var(--color-surface-3);border:1px solid var(--color-border);border-bottom-width:2px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.75rem;font-weight:600;color:var(--color-text);white-space:nowrap}.shortcuts-item__desc{font-size:.875rem;color:var(--color-text-muted)}.projects-page{display:flex;flex-direction:column;min-height:calc(100dvh - 56px)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);padding:var(--space-6) var(--space-8)}.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.project-card:hover{border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow)}.project-card--active{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),0 0 20px var(--color-accent-glow)}.project-card__header{display:flex;flex-direction:column;gap:var(--space-2)}.project-card__title-row{display:flex;align-items:center;gap:var(--space-2)}.project-card__theme-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.project-card__name{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--color-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card__badge{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);border-radius:999px;padding:1px var(--space-2);flex-shrink:0}.project-card__meta{font-size:.8125rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.project-card__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8500;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.confirm-dialog{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);max-width:360px;width:100%;display:flex;flex-direction:column;gap:var(--space-5);box-shadow:0 16px 48px #00000080}.confirm-dialog__message{font-size:.9375rem;color:var(--color-text);line-height:1.5;text-align:center}.confirm-dialog__actions{display:flex;gap:var(--space-3);justify-content:flex-end}.presets-skeleton-row{display:flex;align-items:center;justify-content:center;padding:var(--space-16)}a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.ui-btn:focus-visible,.ui-input__field:focus-visible,.ui-select__field:focus-visible,.toggle__input:focus-visible+.toggle__track{outline:none}@media (max-width: 768px){.projects-grid{grid-template-columns:1fr;padding:var(--space-4)}.shortcuts-modal{max-height:90vh}.shortcuts-item__keys{min-width:80px}.toast-host{bottom:var(--space-4);right:var(--space-4);left:var(--space-4);width:auto}.nav__project-indicator{max-width:100px}.studio-skeleton{grid-template-columns:1fr}}.theme-picker__card[aria-pressed=true]{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-glow)}.sequencer-page{display:flex;flex-direction:column;min-height:calc(100dvh - 64px);overflow:hidden}.sequencer-topbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-wrap:wrap;flex-shrink:0}.sequencer-topbar__name{flex:1;min-width:160px;max-width:320px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-display);font-size:.9375rem;font-weight:600;padding:var(--space-2) var(--space-3);height:36px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.sequencer-topbar__name:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.sequencer-topbar__library-select{min-width:160px}.sequencer-body{display:flex;flex:1;min-height:0;overflow:hidden}.sequencer-rail{width:220px;flex-shrink:0;overflow-y:auto;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;gap:0}.sequencer-rail__add-btns{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border-subtle);margin-top:auto;flex-shrink:0}.sequencer-track-row{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle);min-height:56px}.sequencer-track-row:hover{background:var(--color-surface-2)}.sequencer-track-row--muted{opacity:.45}.sequencer-track-row__top{display:flex;align-items:center;gap:var(--space-2)}.sequencer-track-row__color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.sequencer-track-row__name{flex:1;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--color-text);font-size:.8125rem;font-weight:500;padding:1px 0;outline:none;transition:border-color var(--transition-fast);min-width:0}.sequencer-track-row__name:focus{border-bottom-color:var(--color-accent)}.sequencer-track-row__controls{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.sequencer-track-row__mute-btn{width:22px;height:22px;border-radius:var(--radius-sm);background:var(--color-surface-3);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:.625rem;font-weight:700;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);display:flex;align-items:center;justify-content:center;letter-spacing:.05em}.sequencer-track-row__mute-btn--active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.sequencer-track-row__kind-toggle{font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--color-surface-3);border:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);white-space:nowrap}.sequencer-track-row__kind-toggle:hover{border-color:var(--color-accent);color:var(--color-text)}.sequencer-track-row__remove-btn{width:20px;height:20px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--color-border);color:var(--color-text-faint);font-size:.875rem;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.sequencer-track-row__remove-btn:hover{color:var(--color-danger);border-color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 10%,transparent)}.sequencer-track-row__pitch-input{width:44px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.75rem;padding:2px var(--space-2);height:22px;outline:none;font-variant-numeric:tabular-nums;transition:border-color var(--transition-fast)}.sequencer-track-row__pitch-input:focus{border-color:var(--color-accent)}.sequencer-track-row__preset-select{width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.6875rem;padding:2px var(--space-2);height:22px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color var(--transition-fast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sequencer-track-row__preset-select:focus{border-color:var(--color-accent)}.sequencer-grid-wrap{flex:1;overflow:auto;display:flex;flex-direction:column}.sequencer-grid{display:grid;padding:0;flex:1}.sequencer-beat-row{display:flex;border-bottom:1px solid var(--color-border);flex-shrink:0;padding-left:0;height:24px;align-items:center;background:var(--color-surface);position:sticky;top:0;z-index:2}.sequencer-beat-label{display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;letter-spacing:.08em;color:var(--color-text-faint)}.sequencer-beat-label--beat{color:var(--color-text-muted);font-size:.6875rem}.sequencer-step-row{display:flex;align-items:stretch;border-bottom:1px solid var(--color-border-subtle);height:56px;flex-shrink:0}.sequencer-step-row--muted{opacity:.4}.sequencer-cell{border:1px solid transparent;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:1px solid color-mix(in srgb,var(--color-border) 30%,transparent)}.sequencer-cell--beat-start{border-left:1px solid var(--color-border)}.sequencer-cell--inactive{background:var(--color-surface-2)}.sequencer-cell--inactive:hover{background:var(--color-surface-3);border-color:var(--color-border)}.sequencer-cell--active{border-color:transparent}.sequencer-cell--playing{box-shadow:0 0 0 2px #fff inset,0 0 12px #ffffff40}.sequencer-cell__vel{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:#fff9;pointer-events:none}.sequencer-bottombar{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-6);background:var(--color-surface);border-top:1px solid var(--color-border);flex-wrap:wrap;flex-shrink:0}.sequencer-length-toggle{display:flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;flex-shrink:0}.sequencer-length-toggle__btn{padding:var(--space-1) var(--space-4);font-size:.8125rem;font-weight:600;color:var(--color-text-muted);background:transparent;border:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);font-variant-numeric:tabular-nums}.sequencer-length-toggle__btn--active{background:var(--color-accent);color:#fff}.sequencer-swing{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:180px;max-width:280px}.sequencer-swing__label{font-size:.8125rem;font-weight:500;color:var(--color-text-muted);white-space:nowrap}.sequencer-swing__value{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--color-text);min-width:3ch;text-align:right}.step-popover{position:fixed;z-index:200;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);min-width:200px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;gap:var(--space-3)}.step-popover__title{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint);border-bottom:1px solid var(--color-border-subtle);padding-bottom:var(--space-2)}.step-popover__row{display:flex;flex-direction:column;gap:var(--space-1)}.step-popover__label{font-size:.75rem;color:var(--color-text-muted);font-weight:500}.sequencer-export-hint{font-size:.8125rem;color:var(--color-text-muted);margin-left:auto}.arrange{display:flex;flex-direction:column;height:calc(100dvh - 64px);overflow:hidden;outline:none}.arrange__body{display:flex;flex:1;min-height:0;overflow:hidden}.arrange-transport{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;flex-wrap:wrap}.arrange-transport__bpm{display:flex;align-items:center;gap:var(--space-2)}.arrange-transport__label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint)}.arrange-transport__bpm-input{width:52px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.875rem;padding:2px var(--space-2);height:28px;outline:none;text-align:center;font-variant-numeric:tabular-nums}.arrange-transport__bpm-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-glow)}.arrange-transport__toggle{height:28px;padding:0 var(--space-3);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.arrange-transport__toggle:hover{border-color:var(--color-accent);color:var(--color-text)}.arrange-transport__toggle--active{background:color-mix(in srgb,var(--color-accent) 18%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 85%,white)}.arrange-transport__snap{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}.arrange-transport__snap-btn{height:24px;padding:0 var(--space-2);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.75rem;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.arrange-transport__snap-btn:hover{border-color:var(--color-accent)}.arrange-transport__snap-btn--active{background:color-mix(in srgb,var(--color-accent) 18%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 85%,white)}.arrange__rail{display:flex;flex-direction:column;background:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;flex-shrink:0}.arrange-track-header{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-subtle);height:60px;justify-content:center;padding-left:var(--space-3)}.arrange-track-header__top{display:flex;align-items:center;gap:var(--space-1)}.arrange-track-header__name{flex:1;background:transparent;border:none;outline:none;font-size:.8125rem;font-weight:500;color:var(--color-text);min-width:0}.arrange-track-header__name:focus{background:var(--color-surface-2);border-radius:var(--radius-sm);padding:0 4px}.arrange-track-header__remove{width:16px;height:16px;background:transparent;border:none;color:var(--color-text-faint);cursor:pointer;font-size:14px;line-height:1;border-radius:2px;transition:color var(--transition-fast),background var(--transition-fast);flex-shrink:0}.arrange-track-header__remove:hover{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent)}.arrange-track-header__controls{display:flex;align-items:center;gap:var(--space-1)}.arrange-track-header__btn{width:18px;height:18px;background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:2px;color:var(--color-text-muted);font-size:.6875rem;font-weight:700;cursor:pointer;line-height:1;transition:border-color var(--transition-fast),color var(--transition-fast)}.arrange-track-header__btn--active{background:color-mix(in srgb,var(--color-accent) 20%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 85%,white)}.arrange-track-header__vol{flex:1;height:3px;cursor:pointer;accent-color:var(--color-accent)}.arrange-track-header__preset{display:flex}.arrange-track-header__preset-select{width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.6875rem;padding:0 2px;height:18px;outline:none;cursor:pointer}.arrange-track-header__add-clip{font-size:.6875rem;font-weight:600;color:var(--color-accent);background:none;border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);border-radius:var(--radius-sm);padding:1px var(--space-2);cursor:pointer;transition:background var(--transition-fast)}.arrange-track-header__add-clip:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}.arrange__add-track{padding:var(--space-3);border-top:1px solid var(--color-border-subtle)}.arrange__kind-picker{display:flex;flex-direction:column;gap:var(--space-1)}.arrange-canvas{display:block;cursor:default}.arrange__inspector-rail{background:var(--color-surface);border-left:1px solid var(--color-border);overflow-y:auto;flex-shrink:0}.arrange-inspector{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.arrange-inspector--empty{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--space-6)}.arrange-inspector__hint{font-size:.8125rem;color:var(--color-text-faint);text-align:center}.arrange-inspector__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border-subtle)}.arrange-inspector__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.arrange-inspector__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.arrange-inspector__label{font-size:.75rem;color:var(--color-text-muted)}.arrange-inspector__value{font-size:.75rem;font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text)}.mixer-page{display:flex;flex-direction:column;min-height:calc(100dvh - 64px)}.mixer-strips{display:flex;flex-direction:row;gap:var(--space-3);padding:var(--space-5) var(--space-6);overflow-x:auto;flex:1;align-items:flex-start}.mixer-channel{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:64px;max-width:80px;transition:border-color var(--transition-fast)}.mixer-channel:hover{border-color:var(--color-accent-dim)}.mixer-channel--muted{opacity:.45}.mixer-channel--soloed{border-color:var(--color-secondary);box-shadow:0 0 10px color-mix(in srgb,var(--color-secondary) 25%,transparent)}.mixer-channel--master{border-color:var(--color-accent);box-shadow:0 0 12px var(--color-accent-glow);min-width:80px}.mixer-channel__name{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);writing-mode:vertical-rl;transform:rotate(180deg);max-height:68px;overflow:hidden;text-overflow:ellipsis;background:none;border:none;cursor:default;padding:0}.mixer-channel__name--master{color:var(--color-accent);cursor:default}.mixer-channel__name-input{font-size:.6875rem;width:52px;background:var(--color-surface-2);border:1px solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);padding:2px 4px;outline:none;writing-mode:vertical-rl;transform:rotate(180deg)}.mixer-channel__fader-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.mixer-channel__fader{cursor:ns-resize;accent-color:var(--color-accent)}.mixer-channel__fader-val{font-size:.625rem;font-variant-numeric:tabular-nums;color:var(--color-text-faint)}.mixer-channel__buttons{display:flex;gap:4px}.mixer-channel__btn{width:20px;height:20px;background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:2px;font-size:.625rem;font-weight:700;cursor:pointer;color:var(--color-text-muted);transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);line-height:1}.mixer-channel__btn--mute.mixer-channel__btn--active{background:color-mix(in srgb,var(--color-danger) 20%,transparent);border-color:var(--color-danger);color:var(--color-danger)}.mixer-channel__btn--solo.mixer-channel__btn--active{background:color-mix(in srgb,var(--color-secondary) 20%,transparent);border-color:var(--color-secondary);color:var(--color-secondary)}.mixer-channel__output-select{font-size:.6875rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);padding:2px 4px;outline:none;width:100%;cursor:pointer}.fx-panel{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border-top:1px solid var(--color-border-subtle)}.fx-panel--empty{display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.fx-panel__hint{font-size:.8125rem;color:var(--color-text-faint);text-align:center}.fx-panel__header{display:flex;align-items:baseline;gap:var(--space-2)}.fx-panel__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.fx-panel__preset-name{font-size:.75rem;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.fx-panel__chain{display:flex;flex-direction:column;gap:var(--space-2)}.fx-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.fx-card__label{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}.fx-card__knobs{display:flex;gap:var(--space-3);flex-wrap:wrap}.fx-card__type{font-size:.6875rem;color:var(--color-text-faint)}.fx-panel__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.chord-helper{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border-top:1px solid var(--color-border-subtle)}.chord-helper__header{display:flex;align-items:center;justify-content:space-between}.chord-helper__title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.chord-helper__controls{display:flex;flex-direction:column;gap:var(--space-2)}.chord-helper__root-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.chord-helper__root-btn{height:24px;background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.6875rem;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.chord-helper__root-btn:hover{border-color:var(--color-accent);color:var(--color-text)}.chord-helper__root-btn--active{background:color-mix(in srgb,var(--color-accent) 20%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 90%,white)}.chord-helper__mode-row{display:flex;flex-wrap:wrap;gap:3px}.chord-helper__mode-btn{height:22px;padding:0 var(--space-2);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);font-size:.6875rem;font-weight:500;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.chord-helper__mode-btn:hover{border-color:var(--color-accent);color:var(--color-text)}.chord-helper__mode-btn--active{background:color-mix(in srgb,var(--color-accent) 20%,transparent);border-color:var(--color-accent);color:color-mix(in srgb,var(--color-accent) 90%,white)}.chord-helper__chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.chord-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-1);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.chord-card:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}.chord-card--minor{border-color:color-mix(in srgb,var(--color-secondary) 40%,var(--color-border))}.chord-card--minor:hover{border-color:var(--color-secondary);background:color-mix(in srgb,var(--color-secondary) 8%,transparent)}.chord-card__numeral{font-size:.6875rem;font-weight:700;color:var(--color-accent);letter-spacing:.04em}.chord-card__name{font-size:.5625rem;color:var(--color-text-faint);text-align:center;line-height:1.3}.chord-helper__progressions{display:flex;flex-direction:column;gap:var(--space-2)}.chord-prog{display:flex;flex-direction:column;gap:var(--space-1);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}.chord-prog__label{font-size:.75rem;font-weight:600;color:var(--color-text)}.chord-prog__chords{display:flex;gap:var(--space-1)}.chord-prog__chip{padding:2px var(--space-2);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:999px;font-size:.6875rem;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.chord-prog__chip:hover{border-color:var(--color-accent);color:var(--color-accent)}.chord-prog__vibe{font-size:.6875rem;color:var(--color-text-faint);font-style:italic;line-height:1.4}