: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: #eeeef5;--color-border: #c8c8dc;--color-text: #12121e;--color-text-dim: #374151;--color-text-faint: #6b7280;--color-accent: #6d28d9;--color-secondary: #0369a1;--color-success: #15803d;--color-danger: #b91c1c}:root[data-theme=dark-monochrome]{--color-bg: #080808;--color-surface: #111111;--color-surface-2: #1a1a1a;--color-border: #2e2e2e;--color-text: #f0f0f0;--color-text-dim: #909090;--color-text-faint: #484848;--color-accent: #f0f0f0;--color-secondary: #b0b0b0;--color-success: #a0a0a0;--color-danger: #e04040}:root[data-theme=vibrant-electric]{--color-bg: #050510;--color-surface: #0a0a1e;--color-surface-2: #0f0f2a;--color-border: #1e1e50;--color-text: #f8f0ff;--color-text-dim: #c0a8f0;--color-text-faint: #4a3880;--color-accent: #ff1adc;--color-secondary: #00f5ff;--color-success: #00e5a0;--color-danger: #ff4040}: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;padding-bottom:40px}.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: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);background:transparent;border:none;border-radius:var(--radius-sm);padding:var(--space-1);cursor:pointer;text-decoration:none;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__version-pill{display:inline-flex;align-items:center;padding:2px 8px;margin-left:var(--space-2);font-size:11px;font-weight:600;font-feature-settings:"tnum";color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent);border-radius:999px;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.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:calc(40px + var(--space-4));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:calc(40px + var(--space-2));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}@keyframes ctx-slide-in{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ctx-menu{position:fixed;z-index:9500;min-width:200px;max-width:260px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-1) 0;box-shadow:0 8px 32px #00000073,0 0 0 1px color-mix(in srgb,var(--color-accent) 12%,transparent);animation:ctx-slide-in .14s cubic-bezier(.22,1,.36,1) both;outline:none}.ctx-menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-4);background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:.875rem;font-weight:500;color:var(--color-text);text-align:left;transition:background var(--transition-fast),color var(--transition-fast);border-radius:0;min-height:32px}.ctx-menu__item:hover:not(.ctx-menu__item--disabled){background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-text)}.ctx-menu__item:focus-visible{outline:none;background:color-mix(in srgb,var(--color-accent) 12%,transparent)}.ctx-menu__item--danger{color:var(--color-danger)}.ctx-menu__item--danger:hover:not(.ctx-menu__item--disabled){background:color-mix(in srgb,var(--color-danger) 12%,transparent);color:var(--color-danger)}.ctx-menu__item--disabled{opacity:.4;cursor:not-allowed}.ctx-menu__item-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-text-muted)}.ctx-menu__item-label{flex:1}.ctx-menu__item-shortcut{font-size:.75rem;color:var(--color-text-faint);font-weight:400;flex-shrink:0}.ctx-menu__separator{height:1px;background:var(--color-border-subtle);margin:var(--space-1) 0}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.tooltip{pointer-events:none;z-index:9600;background:var(--color-surface-2);border:1px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);display:flex;align-items:center;gap:var(--space-2);box-shadow:0 4px 16px #0006,0 0 0 1px var(--color-accent-glow);max-width:240px;white-space:nowrap}.tooltip--visible{animation:tooltip-fade-in .12s ease both}.tooltip__label{font-size:.8125rem;font-weight:500;color:var(--color-text);line-height:1.4}.tooltip__shortcut{font-size:.75rem;font-family:var(--font-sans);font-weight:600;color:var(--color-text-faint);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:3px;padding:1px var(--space-1);flex-shrink:0}.tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--color-surface-2);border:1px solid var(--color-accent);transform:rotate(45deg)}.tooltip--top .tooltip__arrow{bottom:-5px;left:50%;margin-left:-4px;border-top:none;border-left:none}.tooltip--bottom .tooltip__arrow{top:-5px;left:50%;margin-left:-4px;border-bottom:none;border-right:none}.tooltip--left .tooltip__arrow{right:-5px;top:50%;margin-top:-4px;border-top:none;border-left:none}.tooltip--right .tooltip__arrow{left:-5px;top:50%;margin-top:-4px;border-bottom:none;border-right:none}.status-bar{position:fixed;bottom:0;left:0;right:0;height:40px;z-index:800;background:var(--color-surface);border-top:1px solid var(--color-border-subtle);display:flex;align-items:center;gap:0;padding:0 var(--space-4);font-size:.75rem;font-variant-numeric:tabular-nums;overflow:hidden;flex-shrink:0}.status-bar__slot{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);height:100%;white-space:nowrap;overflow:hidden}.status-bar__divider{width:1px;height:18px;background:var(--color-border-subtle);flex-shrink:0}.status-bar__text{color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis}.status-bar__led{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--color-text-faint)}.status-bar__audio--running .status-bar__led{background:var(--color-success);box-shadow:0 0 6px color-mix(in srgb,var(--color-success) 60%,transparent)}.status-bar__audio--suspended .status-bar__led{background:var(--color-text-faint)}.status-bar__midi-led{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--color-text-faint);transition:background var(--transition-fast),box-shadow var(--transition-fast)}.status-bar__midi-led--active{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent-glow)}.status-bar__playing-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--color-text-faint)}.status-bar__playing-dot--active{background:var(--color-secondary);box-shadow:0 0 8px color-mix(in srgb,var(--color-secondary) 50%,transparent);animation:status-pulse 1.2s ease-in-out infinite}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.5}}.status-bar__spinner{width:10px;height:10px;border:1.5px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.status-bar__save-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-bar__save-dot--saved{background:var(--color-success)}.status-bar__save-dot--dirty{background:#f59e0b}@media (max-width: 768px){.status-bar{gap:0;padding:0 var(--space-2)}.status-bar__text,.status-bar__text--icon-only{display:none}.status-bar__slot{padding:0 var(--space-2)}}.autosave-badge{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.autosave-badge--saved{background:var(--color-success);box-shadow:0 0 6px color-mix(in srgb,var(--color-success) 50%,transparent)}.autosave-badge--dirty{background:#f59e0b;box-shadow:0 0 6px color-mix(in srgb,#f59e0b 50%,transparent)}.welcome-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fade-in-up .2s ease both}.welcome-modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);max-width:480px;width:100%;display:flex;flex-direction:column;gap:var(--space-6);box-shadow:0 32px 80px #0009,0 0 0 1px color-mix(in srgb,var(--color-accent) 20%,transparent);animation:fade-in-up .24s cubic-bezier(.22,1,.36,1) both}.welcome-modal__header{display:flex;flex-direction:column;gap:var(--space-2)}.welcome-modal__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}.welcome-modal__title{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--color-text);line-height:1.1}.welcome-modal__title span{color:var(--color-accent)}.welcome-modal__features{display:flex;flex-direction:column;gap:var(--space-4)}.welcome-modal__feature{display:flex;align-items:flex-start;gap:var(--space-4);font-size:.9375rem;color:var(--color-text-muted);line-height:1.6}.welcome-modal__feature strong{color:var(--color-text)}.welcome-modal__feature-icon{display:inline-block;width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0}.welcome-modal__feature-icon--create{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent-glow)}.welcome-modal__feature-icon--play{background:var(--color-secondary)}.welcome-modal__feature-icon--learn{background:var(--color-success)}.welcome-modal__actions{display:flex;flex-direction:column;gap:var(--space-3)}.welcome-modal__btn{display:flex;align-items:center;justify-content:center;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);height:44px}.welcome-modal__btn:hover{transform:translateY(-1px)}.welcome-modal__btn:active{transform:translateY(0)}.welcome-modal__btn--primary{background:var(--color-accent);color:#fff;box-shadow:0 0 20px var(--color-accent-glow)}.welcome-modal__btn--primary:hover{background:var(--color-accent-dim);box-shadow:0 4px 24px var(--color-accent-glow)}.welcome-modal__btn--secondary{background:var(--color-surface-3);color:var(--color-text);border:1px solid var(--color-border)}.welcome-modal__btn--secondary:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface-3))}.welcome-modal__btn--ghost{background:transparent;color:var(--color-text-muted)}.welcome-modal__btn--ghost:hover{color:var(--color-text)}.coachmark-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9200;pointer-events:none;background:#0000008c}.coachmark-highlight{position:fixed;z-index:9300;border-radius:var(--radius-md);box-shadow:0 0 0 2px var(--color-accent),0 0 0 9999px #0000008c,0 0 24px var(--color-accent-glow);pointer-events:none;transition:left var(--transition-base),top var(--transition-base),width var(--transition-base),height var(--transition-base)}.coachmark-tip{position:fixed;z-index:9400;background:var(--color-surface);border:1px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);width:280px;box-shadow:0 8px 32px #00000080,0 0 16px var(--color-accent-glow);display:flex;flex-direction:column;gap:var(--space-3);pointer-events:all;animation:fade-in-up .18s ease both}.coachmark-tip__step{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}.coachmark-tip__title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--color-text)}.coachmark-tip__desc{font-size:.875rem;color:var(--color-text-muted);line-height:1.6}.coachmark-tip__actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-1)}.coachmark-tip__skip{background:none;border:none;cursor:pointer;color:var(--color-text-faint);font-size:.875rem;transition:color var(--transition-fast)}.coachmark-tip__skip:hover{color:var(--color-text-muted)}.coachmark-tip__next{background:var(--color-accent);border:none;border-radius:var(--radius-md);color:#fff;font-size:.875rem;font-weight:600;padding:var(--space-2) var(--space-5);cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.coachmark-tip__next:hover{background:var(--color-accent-dim);box-shadow:0 4px 12px var(--color-accent-glow)}.coachmark-tip__dots{display:flex;gap:var(--space-2);justify-content:center}.coachmark-dot{width:7px;height:7px;border-radius:50%;background:var(--color-border);transition:background var(--transition-fast),transform var(--transition-fast)}.coachmark-dot--active{background:var(--color-accent);transform:scale(1.3)}@keyframes page-enter-anim{0%{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes page-exit-anim{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.page-enter{animation:page-enter-anim .24s cubic-bezier(.16,1,.3,1) both}.page-enter>*{animation:page-enter-anim .24s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--stagger-index, 0) * 30ms)}.page-exit{animation:page-exit-anim .16s ease-out both;pointer-events:none}.fade-in-up{animation:page-enter-anim .24s cubic-bezier(.16,1,.3,1) both}@keyframes dnd-border-pulse{0%,to{border-color:var(--color-accent);box-shadow:0 0 0 0 var(--color-accent-glow)}50%{border-color:color-mix(in srgb,var(--color-accent) 70%,white);box-shadow:0 0 16px 4px var(--color-accent-glow)}}body.dnd-file-over .sound-import__dropzone,body.dnd-file-over .drop-zone,body.dnd-file-over .pad-cell{border-color:var(--color-accent);animation:dnd-border-pulse 1.4s ease-in-out infinite}.sound-import__dropzone--drag-over,.drop-zone--drag-over,.pad-cell--drag-over{border-color:var(--color-accent)!important;box-shadow:0 0 24px var(--color-accent-glow)!important;background:color-mix(in srgb,var(--color-accent) 8%,transparent)!important;animation:none!important}.dnd-ghost{font-family:var(--font-sans);letter-spacing:.01em}.status-bar{font-size:11px;font-feature-settings:"tnum";letter-spacing:.01em}.status-bar__audio{cursor:pointer;transition:color var(--transition-fast)}.status-bar__audio:hover{color:var(--color-text)}.status-bar__mute-btn{margin-left:auto;display:flex;align-items:center;gap:var(--space-1);padding:0 var(--space-3);height:100%;background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:11px;font-feature-settings:"tnum";font-family:var(--font-sans);font-weight:500;transition:color var(--transition-fast);flex-shrink:0;white-space:nowrap}.status-bar__mute-btn:hover{color:var(--color-text)}.status-bar__mute-btn--muted{color:var(--color-danger)}.welcome-modal__hero{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-2)}.welcome-modal__feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.welcome-feature-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.welcome-feature-card:hover{border-color:var(--color-accent);box-shadow:0 0 16px var(--color-accent-glow)}.welcome-feature-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-accent) 15%,transparent);color:var(--color-accent);flex-shrink:0}.welcome-feature-card__title{font-family:var(--font-display);font-size:.875rem;font-weight:700;color:var(--color-text)}.welcome-feature-card__body{font-size:.8125rem;color:var(--color-text-muted);line-height:1.55}.ui-card--interactive{will-change:transform,box-shadow}.ui-card--interactive:hover{transform:translateY(-2px);box-shadow:0 4px 32px var(--color-accent-glow),0 1px 8px #0000004d}.ui-btn:hover:not(:disabled){transform:translateY(-1px)}.ui-btn:active:not(:disabled){transform:translateY(0) scale(.97)!important;box-shadow:inset 0 2px 4px #00000040!important;transition-duration:60ms!important}.ui-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent),0 0 16px var(--color-accent-glow)!important}.preset-card:hover{transform:translateY(-2px);box-shadow:0 4px 32px var(--color-accent-glow)}.project-card:hover{transform:translateY(-2px);box-shadow:0 4px 32px var(--color-accent-glow);border-color:var(--color-accent)}.midi-device-skeleton{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) 0}.sequencer-lib-skeleton{display:flex;gap:var(--space-2);align-items:center}.recordings-skeleton{display:flex;flex-direction:column;gap:var(--space-2)}.sample-list-skeleton{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.charts-skeleton{display:flex;flex-direction:column;gap:var(--space-2)}.ui-btn svg,.nav__icon-link svg,.status-bar__slot svg,.welcome-modal svg,.preset-card svg,.ctx-menu__item-icon svg{display:inline-block;vertical-align:middle;flex-shrink:0}.landing__tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);padding:0 var(--space-8) var(--space-8);max-width:1100px;margin:0 auto;width:100%}.hero-tile{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-fast)}.hero-tile:hover{border-color:var(--tile-accent, var(--color-accent));box-shadow:0 0 28px color-mix(in srgb,var(--tile-accent, var(--color-accent)) 30%,transparent);transform:translateY(-2px)}.hero-tile__icon{width:48px;height:48px;background:var(--color-surface-3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);color:var(--tile-accent, var(--color-accent))}.hero-tile__label{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--color-text)}.hero-tile__body{font-size:.875rem;color:var(--color-text-muted);line-height:1.6}.landing__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-top:1px solid var(--color-border);margin-top:var(--space-8);font-size:.8125rem;color:var(--color-text-faint)}.landing__footer-version{font-family:var(--font-mono)}.landing__footer-tagline{color:var(--color-text-muted)}.landing__footer-link{color:var(--color-accent);text-decoration:none;font-weight:500}.landing__footer-link:hover{text-decoration:underline}.layout__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-2) var(--space-6);border-top:1px solid var(--color-border);background:var(--color-surface);font-size:.75rem;color:var(--color-text-faint);flex-shrink:0}.layout__footer-text{flex:1;text-align:left}.layout__footer-link{color:var(--color-accent);text-decoration:none;font-weight:500;font-size:.75rem}.layout__footer-link:hover{text-decoration:underline}.showcase{display:flex;flex-direction:column;padding-bottom:var(--space-16)}.showcase__hero{position:relative;padding:var(--space-16) var(--space-8) var(--space-12);text-align:center;overflow:hidden}.showcase__icon-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:var(--space-8);opacity:.04;pointer-events:none;color:var(--color-accent);flex-wrap:wrap;padding:var(--space-6)}.showcase__hero-content{position:relative;z-index:1}.showcase__eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-3)}.showcase__title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,3rem);font-weight:800;color:var(--color-text);line-height:1.15;margin-bottom:var(--space-5);max-width:700px;margin-left:auto;margin-right:auto}.showcase__subtitle{font-size:1.0625rem;color:var(--color-text-muted);line-height:1.7;max-width:620px;margin:0 auto var(--space-8)}.showcase__hero-cta{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap}.showcase__section-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--color-text);text-align:center;margin-bottom:var(--space-8)}.showcase__features{padding:var(--space-12) var(--space-8);max-width:1100px;margin:0 auto;width:100%}.showcase__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.showcase-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)}.showcase-card:hover{border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow)}.showcase-card__icon{width:44px;height:44px;background:var(--color-surface-3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);color:var(--color-accent);margin-bottom:var(--space-4)}.showcase-card__title{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.showcase-card__body{font-size:.8125rem;color:var(--color-text-muted);line-height:1.65}.showcase__pitch{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);padding:var(--space-8);max-width:1100px;margin:0 auto;width:100%;border-top:1px solid var(--color-border)}.showcase__pitch-item{display:flex;flex-direction:column;gap:var(--space-2)}.showcase__pitch-item strong{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--color-text)}.showcase__pitch-item span{font-size:.875rem;color:var(--color-text-muted);line-height:1.6}.showcase__footer-cta{text-align:center;padding:var(--space-12) var(--space-8);border-top:1px solid var(--color-border);margin-top:var(--space-8)}.showcase__footer-text{font-size:1.0625rem;color:var(--color-text-muted);margin-bottom:var(--space-6);display:block}.lyrics-panel{background:color-mix(in srgb,var(--color-surface) 92%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-height:80px;text-align:center;-webkit-user-select:none;user-select:none}.lyrics-panel__current{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--color-accent);letter-spacing:.02em;line-height:1.3;animation:lyrics-pop .18s ease-out both;margin:0}@keyframes lyrics-pop{0%{transform:scale(.92);opacity:.6}to{transform:scale(1);opacity:1}}.lyrics-panel__placeholder{font-size:1.125rem;color:var(--color-text-faint);letter-spacing:.12em;margin:0}.lyrics-panel__upcoming{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.lyrics-panel__next{font-size:.9375rem;color:var(--color-text-dim);opacity:.72;line-height:1.4;margin:0}.lyrics-panel__next:nth-child(2){opacity:.4;font-size:.875rem}.share-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 200);background:#000000b8;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.share-modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:520px;display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6);box-shadow:0 24px 64px #0009}.share-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.share-modal__title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-modal__close{background:transparent;border:none;color:var(--color-text-dim);font-size:1.25rem;line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);flex-shrink:0;transition:color var(--transition-base)}.share-modal__close:hover{color:var(--color-text)}.share-modal__body{display:flex;flex-direction:column;gap:var(--space-4)}.share-modal__hint{font-size:.9375rem;color:var(--color-text-dim);line-height:1.6;margin:0}.share-modal__warning{font-size:.875rem;color:var(--color-text-dim);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-sm);padding:var(--space-3);line-height:1.5;margin:0}.share-modal__warning--minor{background:color-mix(in srgb,var(--color-accent) 8%,transparent);border-color:color-mix(in srgb,var(--color-accent) 24%,transparent)}.share-modal__link-row{display:flex;gap:var(--space-2);align-items:center}.share-modal__link-input{flex:1;min-width:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.8125rem;font-family:var(--font-mono, "Space Mono", monospace);padding:var(--space-2) var(--space-3);outline:none}.share-modal__link-input:focus{border-color:var(--color-accent)}.share-modal__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.projects-page__header-actions{display:flex;gap:var(--space-2);align-items:center}.projects-page__templates{padding:var(--space-8) var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-4);border-bottom:1px solid var(--color-border-subtle);padding-bottom:var(--space-8)}.projects-page__section-heading{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}.projects-page__section-sub{font-size:.875rem;color:var(--color-text-muted);margin-top:calc(-1 * var(--space-2))}.starter-pack-picker{width:100%}.starter-pack-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}.starter-pack-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-fast)}.starter-pack-card:hover{border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow);transform:translateY(-2px)}.starter-pack-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.starter-pack-card__genre{flex-shrink:0}.starter-pack-card__meta{font-size:.75rem;color:var(--color-text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}.starter-pack-card__name{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em;line-height:1.25}.starter-pack-card__desc{font-size:.8125rem;color:var(--color-text-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}.starter-pack-card__tracks{display:flex;flex-wrap:wrap;gap:var(--space-1)}.starter-pack-card__track-pill{font-size:.625rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px var(--space-2);background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-faint);white-space:nowrap}.starter-pack-card__cta{margin-top:auto;align-self:flex-start}.welcome-modal__templates{display:flex;flex-direction:column;gap:var(--space-4)}.welcome-modal__templates-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.welcome-modal__templates-label{font-size:.875rem;color:var(--color-text-muted);line-height:1.5}.welcome-modal .starter-pack-picker__grid{grid-template-columns:repeat(2,1fr);max-height:340px;overflow-y:auto;padding-right:var(--space-1)}.welcome-modal .starter-pack-picker__grid::-webkit-scrollbar{width:4px}.welcome-modal .starter-pack-picker__grid::-webkit-scrollbar-track{background:transparent}.welcome-modal .starter-pack-picker__grid::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:999px}.welcome-modal:has(.welcome-modal__templates){max-width:720px}@media (max-width: 768px){.landing__tiles{grid-template-columns:1fr 1fr}.showcase__grid,.showcase__pitch,.starter-pack-picker__grid,.welcome-modal .starter-pack-picker__grid{grid-template-columns:1fr}}@media (max-width: 480px){.landing__tiles{grid-template-columns:1fr}}