:root{--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .85rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700}[data-theme=dark],[data-theme=dark][data-dark-variant=midnight],:root{--bg-base: #0a0a0b;--bg-elevated: #141416;--bg-surface: #1c1c1f;--bg-overlay: #252528;--bg-hover: #2a2a2e;--bg-active: #323236;--text-primary: #f5f5f7;--text-secondary: #a1a1a6;--text-muted: #6e6e73;--text-inverse: #1d1d1f;--accent-primary: #5be4a1;--accent-primary-hover: #4cd492;--accent-primary-muted: rgba(91, 228, 161, .15);--accent-primary-glow: rgba(91, 228, 161, .4);--accent-secondary: #67d7ff;--accent-secondary-hover: #52c9f5;--accent-secondary-muted: rgba(103, 215, 255, .15);--accent-blue: #2176ae;--accent-blue-muted: rgba(33, 118, 174, .2);--accent-orange: #ff9f0a;--accent-orange-muted: rgba(255, 159, 10, .15);--color-success: #32d17c;--color-warning: #ffd60a;--color-error: #ff453a;--color-error-muted: rgba(255, 69, 58, .15);--color-info: #64d2ff;--border-subtle: rgba(255, 255, 255, .06);--border-default: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .18);--border-accent: rgba(91, 228, 161, .5);--shadow-color: rgba(0, 0, 0, .4);--shadow-sm: 0 2px 8px var(--shadow-color);--shadow-md: 0 4px 16px var(--shadow-color);--shadow-lg: 0 8px 32px var(--shadow-color);--shadow-glow: 0 0 20px var(--accent-primary-glow);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .2);--shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, .03);--shadow-drag: 0 0 20px rgba(0, 0, 0, .3);--panel-bg: var(--bg-elevated);--panel-border: var(--border-subtle);--input-bg: var(--bg-surface);--input-border: var(--border-default);--input-focus-border: var(--accent-primary);--input-focus-ring: var(--accent-primary-muted);--chip-bg: var(--bg-surface);--chip-border: var(--border-default);--chip-hover-bg: var(--bg-hover);--chip-active-bg: var(--accent-primary-muted);--chip-active-border: var(--accent-primary);--button-primary-bg: var(--accent-primary);--button-primary-text: var(--text-inverse);--button-primary-hover: var(--accent-primary-hover);--button-secondary-bg: var(--bg-surface);--button-secondary-text: var(--text-primary);--button-secondary-border: var(--border-default);--button-secondary-hover: var(--bg-hover);--measure-container-bg: var(--bg-elevated);--measure-bg: var(--bg-surface);--measure-border: var(--border-default);--measure-active-border: var(--accent-primary);--measure-active-glow: var(--accent-primary-glow);--chord-bg: var(--bg-overlay);--chord-border: var(--border-default);--chord-text: var(--text-primary);--chord-hover-border: var(--accent-secondary);--chord-active-bg: var(--accent-primary-muted);--chord-active-border: var(--accent-primary);--drag-handle-color: var(--text-muted);--drag-handle-hover: var(--text-secondary);--drag-ghost-bg: var(--bg-overlay);--drag-ghost-border: var(--accent-secondary);--drop-zone-bg: var(--accent-blue-muted);--drop-zone-border: var(--accent-blue);--scrollbar-track: var(--bg-elevated);--scrollbar-thumb: var(--bg-active);--scrollbar-thumb-hover: var(--text-muted)}[data-theme=dark][data-dark-variant=charcoal]{--bg-base: #121212;--bg-elevated: #1e1e1e;--bg-surface: #252525;--bg-overlay: #2d2d2d;--bg-hover: #353535;--bg-active: #404040;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--text-muted: #707070;--text-inverse: #121212;--accent-primary: #f59e0b;--accent-primary-hover: #d97706;--accent-primary-muted: rgba(245, 158, 11, .15);--accent-primary-glow: rgba(245, 158, 11, .35);--accent-secondary: #60a5fa;--accent-secondary-hover: #4d94e8;--accent-secondary-muted: rgba(96, 165, 250, .15);--accent-blue: #3b82f6;--accent-blue-muted: rgba(59, 130, 246, .2);--color-success: #4ade80;--color-warning: #fbbf24;--color-error: #f87171;--color-error-muted: rgba(248, 113, 113, .15);--color-info: #60a5fa;--border-subtle: rgba(255, 255, 255, .05);--border-default: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .15);--border-accent: rgba(245, 158, 11, .5);--shadow-color: rgba(0, 0, 0, .5)}[data-theme=dark][data-dark-variant=ocean]{--bg-base: #0a1628;--bg-elevated: #0f1d32;--bg-surface: #14263f;--bg-overlay: #1a3050;--bg-hover: #1f3a5c;--bg-active: #264466;--text-primary: #e8f1fc;--text-secondary: #94b3d6;--text-muted: #5d7fa8;--text-inverse: #0a1628;--accent-primary: #22d3ee;--accent-primary-hover: #06b6d4;--accent-primary-muted: rgba(34, 211, 238, .15);--accent-primary-glow: rgba(34, 211, 238, .35);--accent-secondary: #38bdf8;--accent-secondary-hover: #2aa8e0;--accent-secondary-muted: rgba(56, 189, 248, .15);--accent-blue: #0ea5e9;--accent-blue-muted: rgba(14, 165, 233, .2);--color-success: #34d399;--color-warning: #fcd34d;--color-error: #fb7185;--color-error-muted: rgba(251, 113, 133, .15);--color-info: #38bdf8;--border-subtle: rgba(148, 179, 214, .06);--border-default: rgba(148, 179, 214, .12);--border-strong: rgba(148, 179, 214, .2);--border-accent: rgba(34, 211, 238, .5);--shadow-color: rgba(0, 0, 0, .5)}[data-theme=dark][data-dark-variant=forest]{--bg-base: #0c1410;--bg-elevated: #121c16;--bg-surface: #18251d;--bg-overlay: #1f2f25;--bg-hover: #26392c;--bg-active: #2e4434;--text-primary: #e8f0eb;--text-secondary: #9cb5a4;--text-muted: #6a8a74;--text-inverse: #0c1410;--accent-primary: #6ee7b7;--accent-primary-hover: #5dd4a6;--accent-primary-muted: rgba(110, 231, 183, .15);--accent-primary-glow: rgba(110, 231, 183, .35);--accent-secondary: #5eead4;--accent-secondary-hover: #4dd6c0;--accent-secondary-muted: rgba(94, 234, 212, .15);--accent-blue: #14b8a6;--accent-blue-muted: rgba(20, 184, 166, .2);--color-success: #6ee7b7;--color-warning: #fcd34d;--color-error: #fca5a5;--color-error-muted: rgba(252, 165, 165, .15);--color-info: #5eead4;--border-subtle: rgba(156, 181, 164, .06);--border-default: rgba(156, 181, 164, .12);--border-strong: rgba(156, 181, 164, .2);--border-accent: rgba(110, 231, 183, .5);--shadow-color: rgba(0, 0, 0, .5)}[data-theme=dark][data-dark-variant=aura]{--bg-base: #12101a;--bg-elevated: #1a1725;--bg-surface: #221e30;--bg-overlay: #2a263c;--bg-hover: #332e48;--bg-active: #3d3754;--text-primary: #f0edf6;--text-secondary: #b0a6c4;--text-muted: #7a6f96;--text-inverse: #12101a;--accent-primary: #a78bfa;--accent-primary-hover: #9679e8;--accent-primary-muted: rgba(167, 139, 250, .15);--accent-primary-glow: rgba(167, 139, 250, .35);--accent-secondary: #f0abfc;--accent-secondary-hover: #e094ea;--accent-secondary-muted: rgba(240, 171, 252, .15);--accent-blue: #818cf8;--accent-blue-muted: rgba(129, 140, 248, .2);--color-success: #a78bfa;--color-warning: #fcd34d;--color-error: #fca5a5;--color-error-muted: rgba(252, 165, 165, .15);--color-info: #f0abfc;--border-subtle: rgba(176, 166, 196, .06);--border-default: rgba(176, 166, 196, .12);--border-strong: rgba(176, 166, 196, .2);--border-accent: rgba(167, 139, 250, .5);--shadow-color: rgba(0, 0, 0, .5)}[data-theme=light],[data-theme=light][data-light-variant=cream]{--bg-base: #f8f6f1;--bg-elevated: #fffefa;--bg-surface: #fdfbf7;--bg-overlay: #f5f3ee;--bg-hover: #eeebe4;--bg-active: #e6e3db;--text-primary: #2c2a25;--text-secondary: #6b6560;--text-muted: #9a958e;--text-inverse: #fdfbf7;--accent-primary: #2d8659;--accent-primary-hover: #246d48;--accent-primary-muted: rgba(45, 134, 89, .12);--accent-primary-glow: rgba(45, 134, 89, .25);--accent-secondary: #3a7bc8;--accent-secondary-hover: #2e63a3;--accent-secondary-muted: rgba(58, 123, 200, .12);--accent-blue: #3a7bc8;--accent-blue-muted: rgba(58, 123, 200, .12);--accent-orange: #e67e00;--accent-orange-muted: rgba(230, 126, 0, .12);--color-success: #2d8659;--color-warning: #c9860a;--color-error: #c43d35;--color-error-muted: rgba(196, 61, 53, .12);--color-info: #3a7bc8;--border-subtle: rgba(44, 42, 37, .06);--border-default: rgba(44, 42, 37, .12);--border-strong: rgba(44, 42, 37, .2);--border-accent: rgba(45, 134, 89, .4);--shadow-color: rgba(44, 42, 37, .1);--shadow-sm: 0 2px 8px var(--shadow-color);--shadow-md: 0 4px 16px var(--shadow-color);--shadow-lg: 0 8px 32px var(--shadow-color);--shadow-glow: 0 0 20px var(--accent-primary-glow);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .06);--shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, .5);--shadow-drag: 0 0 20px rgba(0, 0, 0, .15);--panel-bg: var(--bg-elevated);--panel-border: var(--border-subtle);--input-bg: var(--bg-elevated);--input-border: var(--border-default);--input-focus-border: var(--accent-primary);--input-focus-ring: var(--accent-primary-muted);--chip-bg: var(--bg-elevated);--chip-border: var(--border-default);--chip-hover-bg: var(--bg-hover);--chip-active-bg: var(--accent-primary-muted);--chip-active-border: var(--accent-primary);--button-primary-bg: var(--accent-primary);--button-primary-text: var(--text-inverse);--button-primary-hover: var(--accent-primary-hover);--button-secondary-bg: var(--bg-elevated);--button-secondary-text: var(--text-primary);--button-secondary-border: var(--border-default);--button-secondary-hover: var(--bg-hover);--measure-container-bg: var(--bg-overlay);--measure-bg: var(--bg-elevated);--measure-border: var(--border-default);--measure-active-border: var(--accent-primary);--measure-active-glow: var(--accent-primary-glow);--chord-bg: var(--bg-elevated);--chord-border: var(--border-default);--chord-text: var(--text-primary);--chord-hover-border: var(--accent-secondary);--chord-active-bg: var(--accent-primary-muted);--chord-active-border: var(--accent-primary);--drag-handle-color: var(--text-muted);--drag-handle-hover: var(--text-secondary);--drag-ghost-bg: var(--bg-elevated);--drag-ghost-border: var(--accent-secondary);--drop-zone-bg: var(--accent-blue-muted);--drop-zone-border: var(--accent-blue);--scrollbar-track: var(--bg-base);--scrollbar-thumb: var(--border-strong);--scrollbar-thumb-hover: var(--text-muted)}[data-theme=light][data-light-variant=gray]{--bg-base: #e6eef6;--bg-elevated: #f2f7fc;--bg-surface: #eaf3fa;--bg-overlay: #dce8f4;--bg-hover: #d0e0f0;--bg-active: #c4d8ec;--text-primary: #1a2533;--text-secondary: #4a5d73;--text-muted: #7a8fa6;--text-inverse: #f2f7fc;--accent-primary: #0066cc;--accent-primary-hover: #0052a3;--accent-primary-muted: rgba(0, 102, 204, .15);--accent-primary-glow: rgba(0, 102, 204, .3);--accent-secondary: #0891b2;--accent-secondary-hover: #0e7490;--accent-secondary-muted: rgba(8, 145, 178, .15);--accent-blue: #0066cc;--accent-blue-muted: rgba(0, 102, 204, .15);--color-success: #0d9488;--color-warning: #d97706;--color-error: #dc2626;--color-error-muted: rgba(220, 38, 38, .12);--color-info: #0066cc;--border-subtle: rgba(26, 37, 51, .08);--border-default: rgba(26, 37, 51, .15);--border-strong: rgba(26, 37, 51, .25);--border-accent: rgba(0, 102, 204, .45);--shadow-color: rgba(26, 37, 51, .12)}[data-theme=light][data-light-variant=sage]{--bg-base: #e2efe6;--bg-elevated: #f0f8f2;--bg-surface: #e8f4ec;--bg-overlay: #d6e8dc;--bg-hover: #c8dfd0;--bg-active: #bad6c4;--text-primary: #1a2e22;--text-secondary: #3d5c4a;--text-muted: #6a8a78;--text-inverse: #f0f8f2;--accent-primary: #059669;--accent-primary-hover: #047857;--accent-primary-muted: rgba(5, 150, 105, .18);--accent-primary-glow: rgba(5, 150, 105, .35);--accent-secondary: #0d9488;--accent-secondary-hover: #0f766e;--accent-secondary-muted: rgba(13, 148, 136, .15);--accent-blue: #0d9488;--accent-blue-muted: rgba(13, 148, 136, .15);--color-success: #059669;--color-warning: #ca8a04;--color-error: #dc2626;--color-error-muted: rgba(220, 38, 38, .12);--color-info: #0d9488;--border-subtle: rgba(26, 46, 34, .08);--border-default: rgba(26, 46, 34, .15);--border-strong: rgba(26, 46, 34, .25);--border-accent: rgba(5, 150, 105, .45);--shadow-color: rgba(26, 46, 34, .12)}[data-theme=light][data-light-variant=slate]{--bg-base: #ebe4f2;--bg-elevated: #f5f0fa;--bg-surface: #f0eaf6;--bg-overlay: #e0d6ec;--bg-hover: #d6cae4;--bg-active: #ccbeda;--text-primary: #2a2240;--text-secondary: #584a70;--text-muted: #8678a0;--text-inverse: #f5f0fa;--accent-primary: #7c3aed;--accent-primary-hover: #6d28d9;--accent-primary-muted: rgba(124, 58, 237, .18);--accent-primary-glow: rgba(124, 58, 237, .35);--accent-secondary: #a855f7;--accent-secondary-hover: #9333ea;--accent-secondary-muted: rgba(168, 85, 247, .15);--accent-blue: #7c3aed;--accent-blue-muted: rgba(124, 58, 237, .15);--color-success: #059669;--color-warning: #d97706;--color-error: #dc2626;--color-error-muted: rgba(220, 38, 38, .12);--color-info: #7c3aed;--border-subtle: rgba(42, 34, 64, .08);--border-default: rgba(42, 34, 64, .15);--border-strong: rgba(42, 34, 64, .25);--border-accent: rgba(124, 58, 237, .45);--shadow-color: rgba(42, 34, 64, .12)}[data-theme=light][data-light-variant=rose]{--bg-base: #f8e8e2;--bg-elevated: #fcf2ee;--bg-surface: #faede8;--bg-overlay: #f2dcd4;--bg-hover: #ead0c6;--bg-active: #e2c4b8;--text-primary: #3d2820;--text-secondary: #6d4a3c;--text-muted: #9a7468;--text-inverse: #fcf2ee;--accent-primary: #dc5044;--accent-primary-hover: #c43d35;--accent-primary-muted: rgba(220, 80, 68, .18);--accent-primary-glow: rgba(220, 80, 68, .35);--accent-secondary: #ea580c;--accent-secondary-hover: #c2410c;--accent-secondary-muted: rgba(234, 88, 12, .15);--accent-blue: #ea580c;--accent-blue-muted: rgba(234, 88, 12, .15);--color-success: #059669;--color-warning: #ca8a04;--color-error: #b91c1c;--color-error-muted: rgba(185, 28, 28, .12);--color-info: #ea580c;--border-subtle: rgba(61, 40, 32, .08);--border-default: rgba(61, 40, 32, .15);--border-strong: rgba(61, 40, 32, .25);--border-accent: rgba(220, 80, 68, .45);--shadow-color: rgba(61, 40, 32, .12)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}[data-theme],[data-theme] *{transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-fast)}.no-transitions,.no-transitions *{transition:none!important}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;z-index:1000;padding:6px 10px;font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-medium, 500);line-height:1.4;white-space:nowrap;color:var(--tooltip-text, var(--text-primary));background:var(--tooltip-bg, var(--bg-overlay));border:1px solid var(--tooltip-border, var(--border-default));border-radius:var(--radius-md, 6px);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease,transform .15s ease;pointer-events:none}[data-tooltip]:before{content:"";position:absolute;z-index:1001;width:0;height:0;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none}[data-tooltip]:hover:after,[data-tooltip]:hover:before,[data-tooltip]:focus-visible:after,[data-tooltip]:focus-visible:before{opacity:1;visibility:visible}[data-tooltip]:not([data-tooltip-position]):after,[data-tooltip][data-tooltip-position=top]:after{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px)}[data-tooltip]:not([data-tooltip-position]):hover:after,[data-tooltip][data-tooltip-position=top]:hover:after,[data-tooltip]:not([data-tooltip-position]):focus-visible:after,[data-tooltip][data-tooltip-position=top]:focus-visible:after{transform:translate(-50%) translateY(0)}[data-tooltip]:not([data-tooltip-position]):before,[data-tooltip][data-tooltip-position=top]:before{bottom:calc(100% + 4px);left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--tooltip-border, var(--border-default))}[data-tooltip][data-tooltip-position=bottom]:after{top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(-4px)}[data-tooltip][data-tooltip-position=bottom]:hover:after,[data-tooltip][data-tooltip-position=bottom]:focus-visible:after{transform:translate(-50%) translateY(0)}[data-tooltip][data-tooltip-position=bottom]:before{top:calc(100% + 4px);left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--tooltip-border, var(--border-default))}[data-tooltip][data-tooltip-position=left]:after{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(4px)}[data-tooltip][data-tooltip-position=left]:hover:after,[data-tooltip][data-tooltip-position=left]:focus-visible:after{transform:translateY(-50%) translate(0)}[data-tooltip][data-tooltip-position=left]:before{right:calc(100% + 4px);top:50%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid var(--tooltip-border, var(--border-default))}[data-tooltip][data-tooltip-position=right]:after{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(-4px)}[data-tooltip][data-tooltip-position=right]:hover:after,[data-tooltip][data-tooltip-position=right]:focus-visible:after{transform:translateY(-50%) translate(0)}[data-tooltip][data-tooltip-position=right]:before{left:calc(100% + 4px);top:50%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid var(--tooltip-border, var(--border-default))}@media(hover:none){[data-tooltip]:after,[data-tooltip]:before{display:none}}@media(prefers-reduced-motion:reduce){[data-tooltip]:after,[data-tooltip]:before{transition:none}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{transform:translate(-50%) translateY(0)}[data-tooltip][data-tooltip-position=bottom]:hover:after,[data-tooltip][data-tooltip-position=bottom]:focus-visible:after{transform:translate(-50%) translateY(0)}[data-tooltip][data-tooltip-position=left]:hover:after,[data-tooltip][data-tooltip-position=left]:focus-visible:after{transform:translateY(-50%) translate(0)}[data-tooltip][data-tooltip-position=right]:hover:after,[data-tooltip][data-tooltip-position=right]:focus-visible:after{transform:translateY(-50%) translate(0)}}:root{--tooltip-bg: var(--bg-overlay);--tooltip-text: var(--text-primary);--tooltip-border: var(--border-default)}.skeleton{display:inline-block;background:var(--skeleton-bg, var(--bg-hover));border-radius:var(--radius-sm, 4px);position:relative;overflow:hidden}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shimmer, rgba(255, 255, 255, .08)) 50%,transparent 100%);animation:skeleton-shimmer 1.5s ease-in-out infinite}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton--text{height:1em;width:100%}.skeleton--button{height:36px;width:80px;border-radius:var(--radius-md, 6px)}.skeleton--card{height:60px;width:100%;border-radius:var(--radius-md, 6px)}.skeleton--circle{border-radius:50%}.skeleton-container{display:flex;flex-direction:column;gap:8px}.progressions-skeleton{display:flex;flex-direction:column;gap:10px;padding:8px 12px}.progressions-skeleton-item{display:flex;flex-direction:column;gap:6px}.progressions-skeleton-name{height:14px;width:70%;background:var(--skeleton-bg, var(--bg-hover));border-radius:var(--radius-sm, 4px);position:relative;overflow:hidden}.progressions-skeleton-meta{height:10px;width:50%;background:var(--skeleton-bg, var(--bg-hover));border-radius:var(--radius-sm, 4px);position:relative;overflow:hidden}.progressions-skeleton-name:after,.progressions-skeleton-meta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shimmer, rgba(255, 255, 255, .08)) 50%,transparent 100%);animation:skeleton-shimmer 1.5s ease-in-out infinite}.progressions-skeleton-item:nth-child(2) .progressions-skeleton-name:after,.progressions-skeleton-item:nth-child(2) .progressions-skeleton-meta:after{animation-delay:.15s}.progressions-skeleton-item:nth-child(3) .progressions-skeleton-name:after,.progressions-skeleton-item:nth-child(3) .progressions-skeleton-meta:after{animation-delay:.3s}@media(prefers-reduced-motion:reduce){.skeleton:after,.progressions-skeleton-name:after,.progressions-skeleton-meta:after{animation:none;background:transparent}.skeleton,.progressions-skeleton-name,.progressions-skeleton-meta{background:var(--skeleton-static, var(--bg-elevated))}}:root{--skeleton-bg: var(--bg-hover);--skeleton-shimmer: rgba(255, 255, 255, .06);--skeleton-static: var(--bg-elevated)}[data-theme=light]{--skeleton-bg: var(--bg-elevated);--skeleton-shimmer: rgba(0, 0, 0, .04);--skeleton-static: var(--bg-surface)}:root{font-family:var(--font-family);line-height:1.5;font-weight:400;color:var(--text-primary);background-color:var(--bg-base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg-base)}[data-theme=dark] body{background:radial-gradient(1200px at 15% 10%,var(--bg-elevated) 0%,var(--bg-base) 55%),radial-gradient(900px at 85% 0%,var(--bg-surface) 0%,var(--bg-base) 60%)}[data-theme=light] body{background:var(--bg-base)}a{color:var(--accent-secondary);text-decoration:none}button{border-radius:var(--radius-md);border:1px solid var(--border-default);padding:.65em 1.4em;font-size:1em;font-weight:600;font-family:inherit;background:var(--button-secondary-bg);color:var(--text-primary);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}button:hover{transform:translateY(-1px);border-color:var(--border-strong);background:var(--button-secondary-hover);box-shadow:var(--shadow-sm)}button:active{transform:translateY(0)}button:focus{outline:none}button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-primary{background:var(--button-primary-bg);color:var(--button-primary-text);border-color:var(--button-primary-bg)}.btn-primary:hover{background:var(--button-primary-hover);border-color:var(--button-primary-hover);box-shadow:var(--shadow-md),0 0 12px var(--accent-primary-glow)}select{border-radius:var(--radius-md);border:1px solid var(--input-border);padding:.5em .75em;font-size:1em;font-family:inherit;background:var(--input-bg);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}select:hover:not(:disabled){border-color:var(--accent-secondary)}select:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 2px var(--input-focus-ring)}select:disabled{opacity:.5;cursor:not-allowed}select option{background:var(--bg-overlay);color:var(--text-primary)}input[type=text],input[type=number],input[type=email],input[type=password]{border-radius:var(--radius-md);border:1px solid var(--input-border);padding:.5em .75em;font-size:1em;font-family:inherit;background:var(--input-bg);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input[type=text]:hover:not(:disabled),input[type=number]:hover:not(:disabled),input[type=email]:hover:not(:disabled),input[type=password]:hover:not(:disabled){border-color:var(--accent-secondary)}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 2px var(--input-focus-ring)}input[type=text]:disabled,input[type=number]:disabled,input[type=email]:disabled,input[type=password]:disabled{opacity:.5;cursor:not-allowed}.error-boundary-fallback,.app-error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);text-align:center;background:var(--bg-surface);border:1px solid var(--color-error);border-radius:var(--radius-lg);margin:var(--space-4)}.app-error-boundary{min-height:50vh;max-width:500px;margin:var(--space-8) auto}.app-error-boundary h1{color:var(--color-error);margin-bottom:var(--space-2)}.error-boundary-fallback p,.app-error-boundary p{color:var(--text-secondary);margin-bottom:var(--space-3)}.error-boundary-detail,.error-details{font-size:.85em;color:var(--text-tertiary);background:var(--bg-base);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.error-boundary-reset-btn{background:var(--button-primary-bg);color:var(--button-primary-text);border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:background var(--transition-fast)}.error-boundary-reset-btn:hover{background:var(--button-primary-hover)}.auth-modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:auth-backdrop-enter .2s ease-out}@keyframes auth-backdrop-enter{0%{opacity:0}to{opacity:1}}.auth-modal{position:relative;width:100%;max-width:400px;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px;animation:auth-modal-enter .25s ease-out}@keyframes auth-modal-enter{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.auth-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast)}.auth-modal-close:hover{color:var(--text-primary);background:var(--bg-hover)}.auth-modal-header{text-align:center;margin-bottom:24px}.auth-modal-logo{font-size:1.5rem;font-weight:700;color:var(--accent-primary);letter-spacing:.5px;margin-bottom:8px}.auth-modal-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.auth-mode-toggle{display:flex;gap:4px;padding:4px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);margin-bottom:20px}.auth-mode-button{flex:1;padding:10px 16px;background:transparent;border:none;border-radius:var(--radius-full);color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.auth-mode-button:hover:not(.auth-mode-button--active){color:var(--text-primary);background:var(--bg-hover)}.auth-mode-button--active{background:var(--accent-secondary-muted);color:var(--text-primary)}.auth-error-banner{padding:12px 16px;background:var(--color-error-muted);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:.875rem;margin-bottom:16px}.auth-social-section{display:flex;flex-direction:column;gap:12px}.google-signin-wrapper{width:100%;display:flex;justify-content:center}.google-signin-wrapper>div{width:100%!important}.google-signin-wrapper iframe{width:100%!important;max-width:100%!important}.google-signin-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.google-signin-button:hover:not(.google-signin-button--disabled){border-color:var(--border-strong);background:var(--bg-hover)}.google-signin-button--disabled{opacity:.6;cursor:not-allowed}.google-icon{flex-shrink:0}.auth-divider{display:flex;align-items:center;gap:16px;margin:20px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.auth-divider-text{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-label{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.auth-input{width:100%;padding:12px 14px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem;box-sizing:border-box;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.auth-input::placeholder{color:var(--text-muted)}.auth-input:hover:not(:disabled){border-color:var(--border-strong)}.auth-input:focus{outline:none;border-color:var(--accent-secondary);box-shadow:0 0 0 3px var(--accent-secondary-muted)}.auth-input--error{border-color:var(--color-error)}.auth-input--error:focus{border-color:var(--color-error);box-shadow:0 0 0 3px var(--color-error-muted)}.auth-input:disabled{opacity:.6;cursor:not-allowed}.auth-password-wrapper{position:relative}.auth-password-wrapper .auth-input{padding-right:44px}.auth-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast)}.auth-password-toggle:hover{color:var(--text-primary)}.auth-field-error{font-size:.8rem;color:var(--color-error)}.auth-submit{width:100%;padding:14px 20px;background:var(--accent-primary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);color:var(--text-inverse);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;min-height:48px}.auth-submit:hover:not(:disabled){background:var(--accent-primary-hover);border-color:var(--accent-primary-hover);box-shadow:var(--shadow-glow)}.auth-submit:disabled{opacity:.7;cursor:not-allowed}.auth-spinner{width:20px;height:20px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-subtle)}.auth-footer-text{font-size:.875rem;color:var(--text-secondary)}.auth-footer-link{background:none;border:none;padding:0;font-size:.875rem;font-weight:600;color:var(--accent-secondary);cursor:pointer;transition:color var(--transition-fast)}.auth-footer-link:hover{color:var(--accent-primary);text-decoration:underline}.user-menu{position:relative;display:flex;align-items:center;gap:8px;z-index:100}.sign-in-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-primary);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.sign-in-button:hover{border-color:var(--accent-secondary);background:var(--bg-hover);transform:translateY(-1px)}.sign-in-button svg{color:var(--text-secondary)}.dev-login-button{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-surface);border:1px dashed var(--accent-secondary);border-radius:var(--radius-full);color:var(--accent-secondary);font-size:.75rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.dev-login-button:hover:not(:disabled){background:var(--accent-secondary-muted);border-style:solid}.dev-login-button:disabled{opacity:.6;cursor:not-allowed}.dev-login-button svg{width:14px;height:14px}.user-button{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.user-button:hover{border-color:var(--border-strong);background:var(--bg-hover)}.user-avatar{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--accent-primary-muted);color:var(--accent-primary);border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase}.user-email{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:1000;animation:user-dropdown-enter .15s ease-out}@keyframes user-dropdown-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background var(--transition-fast);text-align:left}.user-dropdown-item:hover{background:var(--bg-hover)}.user-dropdown-item--danger{color:var(--color-error)}.user-dropdown-item--danger:hover{background:var(--color-error-muted)}@media(max-width:640px){.auth-modal{padding:24px 20px;max-width:none;margin:0 12px}.auth-modal-header{margin-bottom:20px}.auth-modal-logo{font-size:1.3rem}.auth-modal-title{font-size:1.1rem}.user-email{display:none}.user-button{padding:6px}}@media(prefers-reduced-motion:reduce){.auth-modal-backdrop,.auth-modal,.auth-spinner,.user-dropdown{animation:none}.auth-spinner{animation:auth-spin 1.5s linear infinite}}.playback-controls{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:12px;font-size:.95rem}.playback-controls__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}.playback-controls__card{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid var(--border-default)}.measure-action-row{margin-bottom:12px;display:flex;gap:10px;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.control-label{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}.control-input{padding:6px 9px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);font:inherit}.control-input--select{cursor:pointer;min-width:100px}.control-hint{font-size:.8rem;color:var(--text-muted);margin-left:8px}.control-group-title{font-size:.75rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary);margin-top:2px}.octave-stepper{display:inline-flex;align-items:center;gap:8px}.octave-stepper__button{padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);font:inherit;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.octave-stepper__button:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-hover)}.octave-stepper__button:disabled{opacity:.45;cursor:not-allowed}.octave-stepper__value{min-width:24px;text-align:center;font-weight:600;color:var(--text-primary)}.playback-controls>button{margin:0;align-self:flex-start}.metronome{display:flex;align-items:center;gap:8px;margin:0}.metronome-label{font-weight:600;color:var(--text-secondary)}.metronome-toggle{padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.metronome-toggle:hover{border-color:var(--border-strong);background:var(--bg-hover)}.metronome-toggle--on{border-color:var(--accent-primary);background:var(--accent-primary-muted)}@media(max-width:640px){.playback-controls__grid{grid-template-columns:1fr}.control-input{padding:5px 8px;font-size:.95rem}.control-input--range{width:120px}.playback-controls button{padding:8px 12px;font-size:.95rem}.measure-action-row{gap:8px}}@media(hover:none)and (pointer:coarse){.control-input{min-height:44px;padding:10px 12px;font-size:1rem}.octave-stepper__button{min-width:44px;min-height:44px;padding:8px 14px;font-size:1rem}.octave-stepper__button:hover:not(:disabled){background:var(--input-bg);border-color:var(--input-border)}.octave-stepper__button:active:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong);transform:scale(.95);transition:transform .1s ease-out}.control-input--select{min-height:44px;font-size:1rem}.metronome-toggle{min-width:44px;min-height:44px;padding:10px 14px;font-size:1rem}.metronome-toggle:hover{background:var(--input-bg);border-color:var(--input-border)}.metronome-toggle--on:hover{background:var(--accent-primary-muted);border-color:var(--accent-primary)}.metronome-toggle:active{transform:scale(.95);transition:transform .1s ease-out}.playback-controls button{min-height:48px;padding:12px 16px;font-size:1rem}}@media(prefers-reduced-motion:reduce){.octave-stepper__button,.metronome-toggle,.control-input{transition:none}.octave-stepper__button:active:not(:disabled),.metronome-toggle:active{transform:none}}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:10000;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--bg-overlay);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);min-width:280px;max-width:420px;pointer-events:auto;animation:toast-enter .3s ease-out}.toast--exiting{animation:toast-exit .3s ease-out forwards}@keyframes toast-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toast-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:14px;font-weight:var(--font-weight-bold)}.toast-message{flex:1;font-size:var(--font-size-sm);color:var(--text-primary);line-height:1.4}.toast-close{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);padding:0}.toast-close:hover{color:var(--text-primary);background:var(--bg-hover)}.toast--info{border-left:3px solid var(--accent-blue)}.toast--info .toast-icon{background:var(--accent-blue-muted);color:var(--accent-blue)}.toast--warning{border-left:3px solid var(--accent-orange)}.toast--warning .toast-icon{background:var(--accent-orange-muted);color:var(--accent-orange)}.toast--error{border-left:3px solid var(--color-error)}.toast--error .toast-icon{background:var(--color-error-muted);color:var(--color-error)}.toast--success{border-left:3px solid var(--accent-primary)}.toast--success .toast-icon{background:var(--accent-primary-muted);color:var(--accent-primary)}@media(max-width:480px){.toast-container{left:16px;right:16px;bottom:16px}.toast{min-width:auto;max-width:none}}@media(prefers-reduced-motion:reduce){.toast{animation:none}.toast--exiting{animation:none;opacity:0}}.measures-section{display:flex;flex-direction:column;gap:12px;width:100%}.measures-container{--measures-per-row: 4;display:flex;flex-wrap:wrap;gap:12px;width:100%;padding:16px;border-radius:var(--radius-xl);background-color:var(--measure-container-bg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md),var(--shadow-inset)}.measure-view{display:flex;flex-direction:column;width:100%;min-width:0;background:var(--measure-bg);border-radius:var(--radius-lg);border:1px solid var(--measure-border);overflow:hidden;position:relative;transition:border-color .3s ease-out,box-shadow .3s ease-out,transform .2s ease-out;box-shadow:var(--shadow-sm)}.measure-view:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}.measure-view.active{border-color:var(--measure-active-border);box-shadow:0 0 0 2px var(--measure-active-glow),var(--shadow-glow);transform:translateY(-2px);animation:measure-pulse 2s ease-in-out infinite;will-change:transform,box-shadow;backface-visibility:hidden}.measure-view.active .measure-header{background:linear-gradient(180deg,var(--accent-primary-muted) 0%,transparent 100%);border-bottom-color:var(--accent-primary-muted)}.measure-view.active .measure-number{background:var(--accent-primary-muted);border-color:var(--accent-primary);color:var(--accent-primary)}.measure-progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--bg-surface);overflow:hidden}.measure-progress-bar:after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transform:scaleX(var(--measure-progress, 0));transform-origin:left center;transition:transform 50ms linear;will-change:transform;backface-visibility:hidden}@keyframes measure-pulse{0%,to{box-shadow:0 0 0 2px var(--measure-active-glow),var(--shadow-glow)}50%{box-shadow:0 0 0 3px var(--measure-active-glow),0 0 16px var(--measure-active-glow),var(--shadow-glow)}}.measure-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 0;color:var(--text-secondary);background:linear-gradient(180deg,var(--bg-hover) 0%,transparent 100%);border-bottom:1px solid var(--border-subtle);transition:background .3s ease-out,border-color .3s ease-out}.measure-number{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);background:var(--bg-elevated);padding:4px 10px;border-radius:var(--radius-md);border:1px solid var(--border-default);box-shadow:var(--shadow-sm);min-width:32px;text-align:center;transition:background .3s ease-out,border-color .3s ease-out,color .3s ease-out,box-shadow .3s ease-out}.measure-delete-button.delete-button--small{position:relative;top:auto;right:auto;width:24px;height:24px}.measure-content{display:flex;align-items:center;min-height:64px;padding:10px 10px 12px;gap:6px;width:100%;box-sizing:border-box}.chord-slot{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 10px;background:var(--chord-bg);border-radius:var(--radius-md);border:1px solid var(--chord-border);min-height:42px;flex-shrink:1;flex-grow:0;transition:border-color var(--transition-fast),box-shadow .3s ease-out,background .15s ease-out,transform .2s ease-out;cursor:pointer;box-shadow:var(--shadow-sm);overflow:visible}.chord-slot:hover:not(.empty){border-color:var(--chord-hover-border);box-shadow:var(--shadow-md);transform:translateY(-1px)}.chord-slot:focus{outline:none}.chord-slot:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-color:var(--accent-primary)}.chord-slot.active{border-color:var(--chord-active-border);box-shadow:0 0 0 2px var(--accent-primary-glow),var(--shadow-glow);background:linear-gradient(to right,color-mix(in srgb,var(--accent-primary) 35%,var(--chord-bg)) 0%,color-mix(in srgb,var(--accent-primary) 35%,var(--chord-bg)) calc(var(--progress, 0) * 100%),var(--chord-bg) calc(var(--progress, 0) * 100%),var(--chord-bg) 100%);transform:scale(1.02) translateY(-1px);animation:chord-pulse 1.5s ease-in-out infinite;will-change:transform,box-shadow;backface-visibility:hidden}.chord-slot.active .chord-name{color:var(--accent-primary);text-shadow:0 0 8px var(--accent-primary-glow)}@keyframes chord-pulse{0%,to{box-shadow:0 0 0 2px var(--accent-primary-glow),var(--shadow-glow)}50%{box-shadow:0 0 0 3px var(--accent-primary-glow),0 0 12px var(--accent-primary-glow),var(--shadow-glow)}}.chord-slot--muted{opacity:.4;filter:grayscale(30%)}.chord-slot--muted:hover{opacity:.6}.chord-slot--in-range{box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--accent-secondary-muted)}.measure-view--in-loop-range{background:color-mix(in srgb,var(--accent-secondary-muted) 30%,var(--measure-bg));border-color:color-mix(in srgb,var(--accent-secondary) 40%,var(--measure-border))}.measure-view--in-loop-range .measure-header{background:linear-gradient(180deg,var(--accent-secondary-muted) 0%,transparent 100%)}.chord-roman-badge{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-bold, 700);color:var(--accent-secondary);background:var(--accent-secondary-muted);padding:2px 6px;border-radius:var(--radius-sm, 4px);border:1px solid var(--accent-secondary);letter-spacing:.02em;white-space:nowrap;flex-shrink:0}.measure-loop-handle{width:24px;height:24px;border-radius:var(--radius-sm, 4px);border:1px solid var(--accent-secondary);background:var(--accent-secondary-muted);color:var(--accent-secondary);font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,background .15s ease;flex-shrink:0;padding:0}.measure-loop-handle:hover{transform:scale(1.1);box-shadow:var(--shadow-md);background:var(--accent-secondary);color:var(--bg-surface)}.measure-loop-handle:active{cursor:grabbing}.chord-slot--short{padding:6px}.chord-slot--short .chord-content{flex-direction:column;gap:2px}.chord-slot--short .chord-name{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);padding-right:0}.chord-slot--short .chord-duration-badge{margin-left:0;font-size:.65rem;padding:0 4px}.chord-slot--short .chord-delete-button.delete-button--small{inset:1px 1px auto auto;transform:none;width:18px;height:18px;font-size:11px;z-index:15;background:var(--bg-overlay);border:none;box-shadow:none;pointer-events:none}.chord-slot--short:hover .chord-delete-button.delete-button--small,.sortable-chord-wrapper:hover .chord-slot--short .chord-delete-button.delete-button--small{pointer-events:auto}.chord-slot.empty{background:var(--bg-surface);border:1px dashed var(--border-default);opacity:.7;cursor:default;box-shadow:none}.chord-slot.empty.active{border-color:var(--accent-secondary);border-style:solid;opacity:1;box-shadow:0 0 0 2px var(--accent-secondary-muted),var(--shadow-glow);background:linear-gradient(to right,var(--accent-secondary-muted) 0%,var(--accent-secondary-muted) calc(var(--progress, 0) * 100%),var(--bg-surface) calc(var(--progress, 0) * 100%),var(--bg-surface) 100%);transform:scale(1.02);animation:empty-beat-pulse 1.5s ease-in-out infinite;will-change:transform,box-shadow;backface-visibility:hidden}.chord-slot.empty.active .empty-indicator{color:var(--accent-secondary);text-shadow:0 0 6px var(--accent-secondary-muted)}@keyframes empty-beat-pulse{0%,to{box-shadow:0 0 0 2px var(--accent-secondary-muted),var(--shadow-glow)}50%{box-shadow:0 0 0 3px var(--accent-secondary-muted),0 0 10px var(--accent-secondary-muted),var(--shadow-glow)}}.chord-slot.empty:hover{transform:none;box-shadow:none}.chord-slot.empty[role=button]{cursor:pointer;transition:opacity var(--transition-fast),border-color var(--transition-fast)}.chord-slot.empty[role=button]:hover{opacity:1;border-color:var(--accent-secondary)}.empty-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-muted);font-weight:var(--font-weight-medium);opacity:.6;line-height:1.2;transition:color .2s ease-out,opacity .2s ease-out}.empty-indicator-icon{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:1}.empty-indicator-text{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em}.chord-slot.empty.empty--interactive{cursor:pointer}.chord-slot.empty.empty--interactive:hover{opacity:1;border-color:var(--accent-secondary);border-style:solid}.chord-slot.empty.empty--interactive:hover .empty-indicator{color:var(--accent-secondary);opacity:1}.chord-slot.empty.empty--interactive:hover .empty-indicator-icon{transform:scale(1.1);transition:transform .15s ease-out}.beat-dividers{position:absolute;inset:0;pointer-events:none}.beat-divider{position:absolute;top:4px;bottom:4px;width:1px;background:var(--border-subtle);transform:translate(-50%)}.chord-content{display:flex;align-items:center;justify-content:center;gap:2px;position:relative;z-index:1;min-height:20px;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis}.chord-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--chord-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding-right:8px;letter-spacing:.03em;line-height:1.2;transition:color .2s ease-out,text-shadow .3s ease-out}.chord-duration-badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--accent-secondary);background:var(--accent-secondary-muted);padding:1px 5px;border-radius:var(--radius-sm);border:1px solid var(--accent-secondary);letter-spacing:.02em;margin-left:4px;white-space:nowrap;flex-shrink:0}.chord-delete-button.delete-button--small{top:2px;right:2px}.measure-add{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px 20px;border-radius:var(--radius-lg);border:2px dashed var(--border-strong);background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-elevated) 100%);color:var(--text-secondary);font-size:1.2rem;font-weight:var(--font-weight-bold);cursor:pointer;transition:border-color .2s ease-out,color .2s ease-out,background .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out;position:relative;overflow:hidden}.measure-add:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,var(--accent-primary-muted) 50%,transparent 100%);transition:left .5s ease-out}.measure-add:hover:before{left:100%}.measure-add:hover{border-color:var(--accent-primary);border-style:solid;color:var(--accent-primary);background:linear-gradient(135deg,var(--accent-primary-muted) 0%,var(--bg-surface) 100%);transform:translateY(-1px);box-shadow:var(--shadow-lg),0 0 20px var(--accent-primary-glow)}.measure-add:active{transform:translateY(-1px) scale(1);box-shadow:var(--shadow-md)}.measure-add:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.measure-add:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;border-style:dashed}.measure-add:disabled:before{display:none}.measure-add-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;opacity:.8}@media(max-width:1024px){.measures-container{--measures-per-row: 3}}@media(max-width:768px){.measures-container{--measures-per-row: 2;gap:10px}.measure-header{padding:8px 12px 4px}.measure-content{padding:12px;gap:8px}}@media(max-width:480px){.measures-container{--measures-per-row: 1;padding:12px;gap:12px}.measure-view{border-radius:var(--radius-md)}.measure-header{padding:10px 12px 6px}.measure-number{font-size:var(--font-size-base);padding:6px 12px}.measure-content{padding:14px 12px 16px;gap:10px;min-height:72px}.chord-slot{padding:10px 14px;min-height:52px}.chord-name{font-size:var(--font-size-base);padding-right:28px}.empty-indicator{font-size:var(--font-size-xl)}.measure-add{min-height:44px;padding:10px 16px}}@media(max-width:320px){.measures-container{--measures-per-row: 1;padding:8px;gap:8px}.measure-content{padding:10px 8px 12px;gap:6px}.chord-slot{padding:8px 10px}.chord-name{font-size:var(--font-size-sm)}}@media(hover:none)and (pointer:coarse){.chord-slot{min-height:48px;padding:10px 14px}.measure-number{min-height:32px;min-width:40px}.measure-add{min-height:48px}.chord-delete-button.delete-button--small,.measure-delete-button.delete-button--small{opacity:.7}.chord-slot:active:not(.empty){transform:scale(.98);transition:transform .1s ease-out}.measure-add:active{transform:scale(.98)}.chord-slot:hover:not(.empty){transform:none}.measure-view:hover{border-color:var(--measure-border);box-shadow:var(--shadow-sm)}.measure-content{gap:10px}.measure-drag-handle{width:64px;height:28px;opacity:1}.chord-slot:active:not(.empty):not(.active){border-color:var(--chord-hover-border);box-shadow:var(--shadow-md)}}.measure-view:not(.active),.chord-slot:not(.active){will-change:auto}@media(prefers-reduced-motion:reduce){.chord-slot,.measure-view,.measure-add,.chord-name,.measure-header,.measure-number{transition:none}.chord-slot.active,.chord-slot.empty.active,.measure-view.active{animation:none;will-change:auto}.measure-progress-bar:after{transition:none}.measure-add:before{display:none}}.delete-button{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:18px;font-weight:400;color:var(--text-muted);transition:color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast);z-index:10;padding:0;margin:0;line-height:1;border-radius:0 var(--radius-md) 0 var(--radius-md);opacity:.6}.measure-view:hover .delete-button,.chord-slot:hover .delete-button,.sortable-chord-wrapper:hover .delete-button{opacity:1}.delete-button:hover:not(:disabled){color:var(--color-error);background-color:var(--color-error-muted);transform:scale(1.1);opacity:1}.delete-button:active:not(:disabled){transform:scale(.95)}.delete-button:focus{outline:none}.delete-button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:-2px;opacity:1}.delete-button:disabled{cursor:not-allowed;opacity:.3}.delete-button--small{width:28px;height:28px;font-size:14px;border-radius:var(--radius-full);background:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);opacity:0}.delete-button--small:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:var(--radius-full)}.measure-view:hover .delete-button--small,.chord-slot:hover .delete-button--small,.sortable-chord-wrapper:hover .delete-button--small,.draggable-measure:hover .delete-button--small{opacity:.8}.delete-button--small:hover:not(:disabled){opacity:1;background:var(--color-error-muted, rgba(255, 69, 58, .15));border-color:var(--color-error);color:var(--color-error);box-shadow:0 0 6px #ff453a66}.delete-button--small:active:not(:disabled){transform:scale(.9)}.delete-button--small:focus-visible{opacity:1;outline:2px solid var(--accent-secondary);outline-offset:2px}.delete-button--inline{position:relative;top:auto;right:auto;opacity:.8}.delete-button--inline:hover:not(:disabled){opacity:1}.delete-button-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.delete-button svg{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none}@media(hover:none)and (pointer:coarse){.delete-button{opacity:.7}.delete-button--small{opacity:.7;width:32px;height:32px;font-size:16px}.delete-button--small:before{width:48px;height:48px}}.sortable-chord-item{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.sortable-chord-item .chord-slot{width:100%}.sortable-chord-item:focus{outline:2px solid var(--accent-secondary);outline-offset:2px}.sortable-chord-item:focus:not(:focus-visible){outline:none}.sortable-chord-item:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}.sortable-chord-item.dragging{opacity:.35;box-shadow:none;z-index:1}.sortable-chord-item.dragging .chord-slot{background:var(--drop-zone-bg);border:2px dashed var(--accent-secondary);border-color:var(--accent-secondary)}.sortable-chord-item.dragging .chord-slot .chord-name,.sortable-chord-item.dragging .chord-slot .chord-delete-button{opacity:0}.sortable-chord-item.sorting{transition:transform .2s ease}.sortable-chord-item.disabled{cursor:not-allowed;opacity:.6}.sortable-chord-item.disabled:after{content:"";position:absolute;inset:0;background:transparent;cursor:not-allowed}.drag-overlay-content{cursor:grabbing;box-shadow:0 12px 40px #00000059,0 4px 12px #00000040,var(--shadow-drag);transform:scale(1.08) rotate(-2deg);opacity:.95;border-radius:var(--radius-md);background:var(--drag-ghost-bg);border:2px solid var(--drag-ghost-border);animation:drag-float .2s ease-out;pointer-events:none}@keyframes drag-float{0%{transform:scale(1) rotate(0);opacity:.7;box-shadow:var(--shadow-md)}to{transform:scale(1.08) rotate(-2deg);opacity:.95;box-shadow:0 12px 40px #00000059,0 4px 12px #00000040,var(--shadow-drag)}}.chord-drag-overlay{display:flex;align-items:stretch;background:none;border:none;border-radius:var(--radius-md);box-shadow:0 12px 40px #00000059,0 4px 12px #00000040;transform:rotate(-3deg) scale(1.1);animation:chord-lift .15s ease-out}.chord-drag-overlay .chord-slot{width:100%;box-sizing:border-box}@keyframes chord-lift{0%{transform:rotate(0) scale(1);box-shadow:var(--shadow-md)}to{transform:rotate(-3deg) scale(1.1);box-shadow:0 12px 40px #00000059,0 4px 12px #00000040}}.measure-drag-overlay{background:var(--drag-ghost-bg);border:2px solid var(--drag-ghost-border);border-radius:var(--radius-lg);box-shadow:0 16px 48px #0006,0 6px 16px #0000004d;transform:rotate(-1deg) scale(1.02);animation:measure-lift .2s ease-out;overflow:hidden}.measure-drag-overlay .measure-view{border:none;box-shadow:none}@keyframes measure-lift{0%{transform:rotate(0) scale(1);box-shadow:var(--shadow-lg)}to{transform:rotate(-1deg) scale(1.02);box-shadow:0 16px 48px #0006,0 6px 16px #0000004d}}.draggable-measure{position:relative;touch-action:none;flex:0 0 calc((100% - (var(--measures-per-row) - 1) * 12px) / var(--measures-per-row));min-width:220px;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}.draggable-measure.dragging{opacity:.3;transform:scale(.98)}.draggable-measure.dragging .measure-view{background:var(--drop-zone-bg);border:2px dashed var(--accent-secondary)}.draggable-measure.dragging .measure-header,.draggable-measure.dragging .measure-content{opacity:.3}.draggable-measure.sorting{transition:transform .25s ease}.draggable-measure.drop-target{transform:scale(1.02)}.draggable-measure.drop-target .measure-view{border-color:var(--accent-secondary);box-shadow:0 0 0 3px var(--accent-secondary-muted),0 0 20px var(--accent-secondary-muted),var(--shadow-md)}.measures-container--readonly .measure-drag-handle{display:none}.measure-drag-handle{position:absolute;top:-1px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;width:52px;height:22px;cursor:grab;color:var(--drag-handle-color);background:var(--bg-surface);border:1px solid var(--border-default);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);transition:color var(--transition-fast),background-color var(--transition-fast),opacity var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),width var(--transition-fast);z-index:10;touch-action:none;-webkit-user-select:none;user-select:none;opacity:.85}.draggable-measure:hover .measure-drag-handle{color:var(--drag-handle-hover);background:var(--bg-hover);border-color:var(--border-strong);opacity:1}.measure-drag-handle:hover{color:var(--accent-secondary);background:var(--accent-secondary-muted);border-color:var(--accent-secondary);width:60px}.measure-drag-handle:active{cursor:grabbing;transform:translate(-50%) scale(.98)}.measure-drag-handle.disabled{cursor:not-allowed;opacity:.3;pointer-events:none}.drag-handle-icon{display:flex;align-items:center;justify-content:center;gap:2px}.drag-handle-icon:before{content:"";display:block;width:16px;height:10px;background-image:radial-gradient(circle,currentColor 1.5px,transparent 1.5px);background-size:5px 5px;background-position:0 0;opacity:.9}.sortable-chord-wrapper{display:flex;align-items:stretch;cursor:grab;position:relative}.sortable-chord-wrapper:active{cursor:grabbing}.sortable-chord-wrapper.dragging{opacity:.35;z-index:1}.sortable-chord-wrapper.dragging .chord-slot{background:var(--drop-zone-bg);border:2px dashed var(--accent-secondary)}.sortable-chord-wrapper.dragging .chord-slot .chord-name,.sortable-chord-wrapper.dragging .chord-slot .chord-delete-button{opacity:0}.sortable-chord-wrapper .chord-slot{width:100%;cursor:inherit}.sortable-chord-wrapper.drop-target{transform:scale(1.05)}.sortable-chord-wrapper.drop-target .chord-slot{border-color:var(--accent-secondary);box-shadow:0 0 0 2px var(--accent-secondary),0 0 12px var(--accent-secondary-muted),var(--shadow-md)}.measures-container.is-dragging{background-color:var(--bg-hover)}@keyframes pulse{0%,to{opacity:.4;border-color:var(--accent-blue)}50%{opacity:.7;border-color:var(--accent-secondary)}}.drop-placeholder{animation:pulse 1.2s ease-in-out infinite;background:var(--drop-zone-bg);border:2px dashed var(--drop-zone-border);border-radius:var(--radius-md)}.drop-target-indicator{position:absolute;inset:0;border:2px dashed var(--drop-zone-border);border-radius:var(--radius-md);background:var(--drop-zone-bg);pointer-events:none;z-index:100;animation:pulse-border 1s ease-in-out infinite}@keyframes pulse-border{0%,to{border-color:var(--accent-blue);background:var(--accent-blue-muted);opacity:.6}50%{border-color:var(--accent-secondary);background:var(--accent-secondary-muted);opacity:1}}.droppable-empty-slot{position:relative;transition:transform var(--transition-fast)}.droppable-empty-slot.drop-target{transform:scale(1.08)}.droppable-empty-slot.drop-target .chord-slot.empty{border-color:var(--accent-secondary);border-style:solid;border-width:2px;background:var(--accent-secondary-muted);opacity:1;box-shadow:0 0 12px var(--accent-secondary-muted)}.droppable-empty-slot.drop-target .chord-slot.empty .empty-indicator{color:var(--accent-secondary);font-size:1.4rem}.chord-drag-indicator{position:absolute;left:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:24px;color:var(--drag-handle-color);cursor:grab;opacity:.4;transition:opacity var(--transition-fast),color var(--transition-fast)}.chord-drag-indicator:before{content:"";display:block;width:8px;height:14px;background-image:radial-gradient(circle,currentColor 1px,transparent 1px);background-size:4px 4px;background-position:0 0}.chord-slot:hover .chord-drag-indicator,.sortable-chord-item:hover .chord-drag-indicator,.sortable-chord-wrapper:hover .chord-drag-indicator{opacity:.7}.chord-drag-indicator:hover{color:var(--accent-secondary);opacity:1}.drag-invalid{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.sortable-chord-item[aria-grabbed=true]:before{content:"Use arrow keys to move, Enter to drop, Escape to cancel";position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);font-size:.75rem;color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:1001;background:var(--bg-overlay);padding:4px 8px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.sortable-container{display:flex;flex-wrap:wrap;gap:.5rem;min-height:60px;padding:.5rem;border-radius:.5rem;transition:background-color .2s ease}.sortable-container.is-dragging{background-color:var(--bg-hover)}@keyframes drop-settle{0%{transform:scale(1.05)}50%{transform:scale(.98)}to{transform:scale(1)}}.drop-success{animation:drop-settle .25s ease-out}@media(hover:none)and (pointer:coarse){.measure-drag-handle,.panel-drag-handle{opacity:1}.chord-drag-indicator{opacity:.6}.measure-drag-handle{width:64px;height:28px}.panel-drag-handle{width:36px;height:36px}.chord-slot:hover .chord-drag-indicator{opacity:.6}.sortable-chord-wrapper:active,.draggable-measure:active,.draggable-panel:active{opacity:.9}.measures-container{-webkit-overflow-scrolling:touch}}.drag-overlay-content,.chord-drag-overlay,.measure-drag-overlay,.panel-drag-overlay,.sortable-chord-wrapper.dragging,.draggable-measure.dragging,.draggable-panel.dragging{will-change:transform;backface-visibility:hidden}.sortable-chord-wrapper:not(.dragging),.draggable-measure:not(.dragging),.draggable-panel:not(.dragging){will-change:auto}.draggable-panel{position:relative;touch-action:none;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}.draggable-panel.dragging{opacity:.3;transform:scale(.99)}.draggable-panel.dragging>.panel{background:var(--drop-zone-bg);border:2px dashed var(--accent-secondary)}.draggable-panel.dragging .panel-header,.draggable-panel.dragging .panel-content{opacity:.3}.draggable-panel.sorting{transition:transform .25s ease}.draggable-panel.drop-target>.panel{border-color:var(--accent-secondary);box-shadow:0 0 0 3px var(--accent-secondary-muted),0 0 20px var(--accent-secondary-muted),var(--shadow-md)}.panel-drag-handle{position:absolute;top:8px;left:8px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:grab;color:var(--drag-handle-color);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:color var(--transition-fast),background-color var(--transition-fast),opacity var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);z-index:15;touch-action:none;-webkit-user-select:none;user-select:none;opacity:.75}.draggable-panel:hover .panel-drag-handle{color:var(--drag-handle-hover);background:var(--bg-hover);border-color:var(--border-strong);opacity:1}.panel-drag-handle:hover{color:var(--accent-secondary);background:var(--accent-secondary-muted);border-color:var(--accent-secondary);transform:scale(1.05)}.panel-drag-handle:active{cursor:grabbing;transform:scale(.95)}.panel-drag-handle.disabled{cursor:not-allowed;opacity:.3;pointer-events:none}.draggable-panel .panel-header{padding-left:48px}@media(max-width:640px){.draggable-panel .panel-header{padding-left:44px}}.panel-drag-overlay{background:var(--drag-ghost-bg);border:2px solid var(--drag-ghost-border);border-radius:var(--radius-lg);box-shadow:0 20px 60px #00000073,0 8px 20px #00000059;transform:rotate(-.5deg) scale(1.01);animation:panel-lift .2s ease-out;overflow:hidden}.panel-drag-overlay .panel{border:none;box-shadow:none}.panel-drag-overlay--collapsed{min-width:280px;max-width:400px}.panel-drag-preview{display:flex;align-items:center;gap:8px;padding:10px 14px 10px 20px;background:var(--bg-hover);border-radius:var(--radius-lg)}.panel-drag-preview-title{color:var(--text-secondary);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}@keyframes panel-lift{0%{transform:rotate(0) scale(1);box-shadow:var(--shadow-lg)}to{transform:rotate(-.5deg) scale(1.01);box-shadow:0 20px 60px #00000073,0 8px 20px #00000059}}@media(prefers-reduced-motion:reduce){.sortable-chord-item,.sortable-chord-wrapper,.draggable-measure,.draggable-panel,.measure-drag-handle,.panel-drag-handle,.drag-handle{transition:none}.drag-overlay-content,.chord-drag-overlay,.measure-drag-overlay,.panel-drag-overlay{animation:none;transform:none}.drop-placeholder,.drop-target-indicator,.drag-invalid,.drop-success{animation:none}.sortable-chord-item.dragging,.sortable-chord-wrapper.dragging,.draggable-measure.dragging,.draggable-panel.dragging{opacity:.5}.droppable-empty-slot.drop-target{transform:none}}.chord-box--custom{border:1px solid var(--border-default);padding:12px;width:auto;text-align:center;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:10px;background:var(--bg-surface);color:var(--text-primary);transition:transform var(--transition-fast),box-shadow var(--transition-normal),border-color var(--transition-fast);box-shadow:var(--shadow-md)}.chord-box--custom:hover{border-color:var(--border-strong)}.chord-box--custom.chord-box--active{background:var(--bg-overlay);border-color:var(--accent-primary);box-shadow:var(--shadow-md),0 0 0 2px var(--accent-primary-muted)}.chord-box--custom.chord-box--drop-target{border-color:var(--accent-secondary);box-shadow:0 0 0 2px var(--accent-secondary-muted),var(--shadow-md)}.chord-box--custom.chord-box--dragging{opacity:.7;transform:rotate(-1deg) scale(.98);box-shadow:var(--shadow-lg)}.chord-chip{display:flex;flex-direction:column;gap:4px;width:100%;border-radius:var(--radius-md);border:1px solid var(--border-accent);padding:6px 8px;color:var(--text-primary);cursor:pointer;background:var(--accent-primary-muted);transition:opacity var(--transition-fast),box-shadow var(--transition-normal),transform var(--transition-fast),border-color var(--transition-fast)}.chord-chip:hover{border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.chord-chip-title{font-size:11px;font-weight:var(--font-weight-semibold);opacity:.8;color:var(--text-secondary)}.chord-chip-value{font-size:14px;font-weight:var(--font-weight-bold);color:var(--text-primary);background:var(--accent-blue-muted);padding:1px 4px;border-radius:var(--radius-sm)}.chord-chip-hint{font-size:10px;opacity:.7;color:var(--text-muted)}.chord-chip-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.chord-chip-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.chord-chip-drag{border:1px dashed var(--border-default);background:var(--bg-overlay);color:var(--text-secondary);font-size:12px;line-height:1;padding:4px 6px;border-radius:var(--radius-sm);cursor:grab}.chord-chip-drag:disabled{cursor:not-allowed;opacity:.6}.chord-chip-drag:active{cursor:grabbing}.chord-chip-row{display:grid;grid-template-columns:minmax(64px,1fr) minmax(64px,1fr);gap:8px;align-items:end;width:100%}.chord-chip-field{display:flex;flex-direction:column;gap:6px;text-align:left}.chord-chip-field-label{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--text-secondary)}.chord-chip-select{width:100%;padding:8px 10px;border-radius:var(--radius-md);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);font-size:13px;font-weight:var(--font-weight-bold);text-align:left;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);outline:none;font-family:inherit;cursor:pointer;box-shadow:var(--shadow-sm)}.chord-chip-select option{background-color:var(--bg-overlay);color:var(--text-primary);padding:8px}.chord-chip-select:hover:not(:disabled){border-color:var(--accent-secondary);background:var(--bg-hover)}.chord-chip-select:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 2px var(--input-focus-ring)}.chord-chip-select:disabled{opacity:.6;cursor:not-allowed;background:var(--bg-surface);box-shadow:none}.chord-chip-beats .chord-duration{height:100%;justify-content:space-between}.chord-chip-beats{width:100%}.chord-chip-beats .chord-duration-title{font-size:11px}.chord-duration{font-size:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg-overlay);color:var(--text-primary);padding:8px 10px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:border-color var(--transition-fast)}.chord-duration:hover{border-color:var(--border-default)}.chord-duration-header{display:flex;justify-content:space-between;align-items:center}.chord-duration-title{font-weight:var(--font-weight-semibold);color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.03em}.chord-duration-max{font-size:10px;color:var(--text-muted);font-weight:var(--font-weight-medium)}.chord-duration-value{font-weight:var(--font-weight-bold);color:var(--accent-primary);font-size:14px}.chord-duration input[type=range]{width:100%;height:6px;border-radius:var(--radius-full);background:var(--bg-surface);outline:none;-webkit-appearance:none;appearance:none;border:1px solid var(--border-subtle)}.chord-duration input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));cursor:pointer;border:2px solid var(--bg-elevated);box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.chord-duration input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:var(--shadow-lg),0 0 8px var(--accent-primary-glow)}.chord-duration input[type=range]::-webkit-slider-thumb:active{transform:scale(1.05)}.chord-duration input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));cursor:pointer;border:2px solid var(--bg-elevated);box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.chord-duration input[type=range]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:var(--shadow-lg),0 0 8px var(--accent-primary-glow)}.chord-duration input[type=range]::-moz-range-track{background:var(--bg-surface);height:6px;border-radius:var(--radius-full);border:1px solid var(--border-subtle)}@media(max-width:640px){.chord-box--custom{padding:6px}.chord-chip-row{grid-template-columns:minmax(58px,1fr) minmax(58px,1fr);gap:6px}.chord-chip-field-label{font-size:10px}.chord-chip-select{padding:5px 6px;font-size:12px}.chord-chip-beats .chord-duration{padding:6px}}@media(hover:none)and (pointer:coarse){.chord-chip{min-height:44px;padding:10px 12px}.chord-chip:hover{transform:none}.chord-chip:active{transform:scale(.98);transition:transform .1s ease-out}.chord-chip-select{min-height:44px;padding:10px 12px;font-size:14px}.chord-chip-drag{min-width:44px;min-height:44px;padding:8px 12px;font-size:14px;display:flex;align-items:center;justify-content:center}.chord-duration input[type=range]::-webkit-slider-thumb{width:28px;height:28px}.chord-duration input[type=range]::-moz-range-thumb{width:28px;height:28px}.chord-duration input[type=range]::-webkit-slider-thumb:hover{transform:none}.chord-duration input[type=range]::-moz-range-thumb:hover{transform:none}.chord-duration input[type=range]::-webkit-slider-thumb:active{transform:scale(1.1);transition:transform .1s ease-out}}@media(prefers-reduced-motion:reduce){.chord-chip,.chord-box--custom,.chord-chip-select,.chord-duration input[type=range]::-webkit-slider-thumb,.chord-duration input[type=range]::-moz-range-thumb{transition:none}.chord-chip:hover,.chord-chip:active{transform:none}.chord-duration input[type=range]::-webkit-slider-thumb:hover,.chord-duration input[type=range]::-webkit-slider-thumb:active{transform:none}}.chord-editor-popover{position:fixed;z-index:1000;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),var(--shadow-inset-light);opacity:0;transform:translateY(8px);transition:opacity var(--transition-fast),transform var(--transition-fast);pointer-events:none}.chord-editor-popover.visible{opacity:1;transform:translateY(0);pointer-events:auto}.chord-editor-popover--above{transform:translateY(-8px)}.chord-editor-popover--above.visible{transform:translateY(0)}.chord-editor-popover-arrow{position:absolute;width:16px;height:16px;background:var(--bg-overlay);border:1px solid var(--border-default);transform:rotate(45deg);pointer-events:none}.chord-editor-popover--below .chord-editor-popover-arrow{top:-9px;border-right:none;border-bottom:none}.chord-editor-popover--above .chord-editor-popover-arrow{bottom:-9px;border-left:none;border-top:none}.chord-editor-popover-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-subtle)}.chord-editor-popover-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.chord-editor-popover-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.chord-editor-popover-close:hover{background:var(--bg-hover);border-color:var(--border-strong);color:var(--text-primary)}.chord-editor-popover-close:active{transform:scale(.95)}.chord-editor-popover-content{padding:12px 14px 14px}.chord-editor-popover-content .chord-box{background:transparent;border:none;padding:0;margin:0;box-shadow:none}.chord-editor-popover-content .chord-chip-wrapper{gap:10px}.chord-editor-popover-content .chord-chip-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.chord-editor-popover-content .chord-chip-field{display:flex;flex-direction:column;gap:4px}.chord-editor-popover-content .chord-chip-field-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.chord-editor-popover-content .chord-chip-select{width:100%;padding:8px 10px;font-size:var(--font-size-sm);border-radius:var(--radius-md);background:var(--input-bg);border:1px solid var(--input-border);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.chord-editor-popover-content .chord-chip-select:hover{border-color:var(--border-strong)}.chord-editor-popover-content .chord-chip-select:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-ring)}.chord-editor-popover-content .chord-chip-beats{margin-top:2px}.chord-editor-popover-footer{display:flex;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--border-subtle)}.chord-editor-popover-done{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--button-primary-text);background:var(--button-primary-bg);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.chord-editor-popover-done:hover{background:var(--button-primary-hover);box-shadow:var(--shadow-md)}.chord-editor-popover-done:active{transform:scale(.98)}.chord-editor-popover-done:focus-visible{outline:2px solid var(--button-primary-bg);outline-offset:2px}.chord-editor-backdrop{position:fixed;inset:0;z-index:999;background:#00000080;opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.chord-editor-backdrop.visible{opacity:1;pointer-events:auto}.chord-editor-popover--mobile{position:fixed;left:0;right:0;bottom:0;width:100%;max-height:80vh;z-index:1000;background:var(--bg-overlay);border:1px solid var(--border-default);border-bottom:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform var(--transition-normal);pointer-events:none}.chord-editor-popover--mobile.visible{transform:translateY(0);pointer-events:auto}.chord-editor-popover--mobile .chord-editor-popover-header{padding:16px 16px 12px;position:relative}.chord-editor-popover--mobile .chord-editor-popover-header:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:var(--radius-full);background:var(--border-strong)}.chord-editor-popover--mobile .chord-editor-popover-title{font-size:var(--font-size-base)}.chord-editor-popover--mobile .chord-editor-popover-close{width:32px;height:32px}.chord-editor-popover--mobile .chord-editor-popover-content{padding:12px 16px 16px}.chord-editor-popover--mobile .chord-editor-popover-footer{padding:12px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.chord-editor-popover--mobile .chord-editor-popover-done{width:100%;padding:14px 24px;font-size:var(--font-size-base)}.chord-editor-popover--mobile .chord-chip-row{grid-template-columns:1fr 1fr;gap:12px}.chord-editor-popover--mobile .chord-chip-select{padding:12px 14px;font-size:var(--font-size-base)}@keyframes popover-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-above{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.chord-editor-popover:focus-visible{outline:none}.chord-editor-popover [tabindex]:focus-visible,.chord-editor-popover button:focus-visible,.chord-editor-popover select:focus-visible,.chord-editor-popover input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}@media(hover:none)and (pointer:coarse){.chord-editor-popover-close{width:36px;height:36px}.chord-editor-popover--mobile .chord-editor-popover-close{width:40px;height:40px}.chord-editor-popover-content .chord-chip-select{min-height:48px;padding:12px 14px;font-size:var(--font-size-base)}.chord-editor-popover-close:active{transform:scale(.9);transition:transform .1s ease-out}.chord-editor-popover-close:hover{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}.chord-editor-popover-done{min-height:48px;padding:14px 28px;font-size:var(--font-size-base)}.chord-editor-popover-done:active{transform:scale(.96);transition:transform .1s ease-out}}@media(prefers-reduced-motion:reduce){.chord-editor-popover,.chord-editor-popover--mobile,.chord-editor-backdrop{transition:none}.chord-editor-popover.visible,.chord-editor-popover--above.visible,.chord-editor-popover--mobile.visible{transform:none}}.chord-measure{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-inline:auto}.custom-progression-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}.time-signature-buttons{display:inline-flex;gap:4px;padding:5px;border-radius:var(--radius-lg);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-md),var(--shadow-inset)}.time-signature-button{border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);padding:8px 18px;border-radius:var(--radius-md);cursor:pointer;transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out,transform .15s ease-out;min-width:52px;text-align:center}.time-signature-button:hover{background:var(--bg-hover);color:var(--text-primary);transform:translateY(-1px)}.time-signature-button:active{transform:translateY(0)}.time-signature-button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:1px}.time-signature-button[aria-pressed=true]{background:var(--accent-secondary-muted);color:var(--accent-secondary);border:1px solid var(--accent-secondary);box-shadow:0 0 12px var(--accent-secondary-muted),var(--shadow-sm);font-weight:var(--font-weight-bold)}.time-signature-button[aria-pressed=true]:hover{background:var(--accent-secondary-muted);box-shadow:0 0 16px var(--accent-secondary-muted),var(--shadow-md)}.reset-progression-btn{padding:8px 14px;background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.reset-progression-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}.reset-progression-btn:disabled{opacity:.4;cursor:not-allowed}.save-progression-btn{padding:8px 14px;background:var(--accent-primary, #4a9eff);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.save-progression-btn:hover:not(:disabled){background:var(--accent-primary-hover, #3d8ee6)}.save-progression-btn:disabled{opacity:.5;cursor:not-allowed}.custom-chord-editor{width:100%;border-radius:var(--radius-xl);background:var(--bg-overlay);border:1px solid var(--border-default);padding:16px;box-shadow:var(--shadow-lg),var(--shadow-inset-light)}.custom-chord-editor-header{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle)}.custom-chord-editor-close{border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);width:28px;height:28px;border-radius:var(--radius-full);cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.custom-chord-editor-close:hover{background:var(--bg-hover);border-color:var(--border-strong);color:var(--text-primary);transform:scale(1.05)}.custom-chord-editor-close:active{transform:scale(.95)}@media(max-width:480px){.chord-measure{gap:12px;width:100%}.custom-progression-toolbar{flex-wrap:wrap;gap:10px}.toolbar-left,.toolbar-right{flex:1 1 auto;justify-content:center}.time-signature-buttons{flex:1}.time-signature-button{flex:1;padding:10px 12px;min-height:44px}.reset-progression-btn,.save-progression-btn{padding:10px 12px;min-height:44px}}@media(hover:none)and (pointer:coarse){.time-signature-button,.reset-progression-btn,.save-progression-btn{min-height:48px}.time-signature-button:active,.reset-progression-btn:active,.save-progression-btn:active{transform:scale(.98);transition:transform .1s ease-out}.time-signature-button:hover{transform:none}}@media(prefers-reduced-motion:reduce){.time-signature-button,.reset-progression-btn,.save-progression-btn{transition:none}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--panel-bg);border-radius:8px;width:90%;max-width:400px;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color, #333)}.modal-header h2{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-primary, #fff)}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-secondary, #888);cursor:pointer;padding:0;line-height:1}.modal-close:hover{color:var(--text-primary, #fff)}.modal-body{padding:1.25rem}.modal-body label{display:block;margin-bottom:.5rem;font-size:.875rem;color:var(--text-secondary, #888)}.modal-body input{width:100%;padding:.625rem .75rem;border:1px solid var(--border-color, #333);border-radius:4px;background:var(--input-bg, #1a1a1a);color:var(--text-primary, #fff);font-size:.9375rem}.modal-body input:focus{outline:none;border-color:var(--accent-color, #4a9eff)}.modal-error{margin-top:.75rem;margin-bottom:0;color:var(--error-color, #ff6b6b);font-size:.875rem}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid var(--border-color, #333)}.modal-btn{padding:.5rem 1rem;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .15s ease}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.modal-btn-secondary{background:transparent;border:1px solid var(--border-color, #333);color:var(--text-primary, #fff)}.modal-btn-secondary:hover:not(:disabled){background:var(--hover-bg, rgba(255, 255, 255, .05))}.modal-btn-primary{background:var(--accent-color, #4a9eff);border:none;color:#fff}.modal-btn-primary:hover:not(:disabled){background:var(--accent-hover, #3d8ee6)}.progressions-list{position:relative;display:inline-block}.progressions-list-toggle{display:flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:var(--button-bg, #2a2a2a);border:1px solid var(--border-color, #333);border-radius:4px;color:var(--text-primary, #fff);font-size:.8125rem;cursor:pointer;transition:background-color .15s ease}.progressions-list-toggle:hover{background:var(--button-hover-bg, #333)}.progressions-list-chevron{transition:transform .2s ease}.progressions-list-chevron.open{transform:rotate(180deg)}.progressions-list-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;max-width:300px;max-height:300px;overflow-y:auto;background:var(--panel-bg, #1e1e1e);border:1px solid var(--border-color, #333);border-radius:6px;box-shadow:0 4px 12px #0000004d;z-index:100}.progressions-list-loading,.progressions-list-empty{padding:1rem;text-align:center;color:var(--text-secondary, #888);font-size:.8125rem}.progressions-list-items{list-style:none;margin:0;padding:.25rem 0}.progressions-list-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s ease}.progressions-list-item:hover{background:var(--hover-bg, rgba(255, 255, 255, .05))}.progressions-list-item-info{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}.progressions-list-item-name{font-size:.875rem;color:var(--text-primary, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progressions-list-item-meta{font-size:.75rem;color:var(--text-secondary, #888)}.progressions-list-delete{flex-shrink:0;margin-left:.5rem;padding:.25rem .5rem;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--text-secondary, #888);font-size:.75rem;cursor:pointer;transition:all .15s ease}.progressions-list-delete:hover{color:var(--error-color, #ff6b6b);border-color:var(--error-color, #ff6b6b)}.progressions-list-delete.confirm{color:#fff;background:var(--error-color, #ff6b6b);border-color:var(--error-color, #ff6b6b)}.progressions-list-delete:disabled{opacity:.5;cursor:not-allowed}.app-main-container{width:100%;min-height:100vh;background:var(--bg-base);color:var(--text-primary);padding:20px 12px;display:flex;justify-content:center}.content-main-container{display:flex;flex-direction:column;align-items:center;padding:32px 18px;width:100%;max-width:1100px;margin-inline:auto}@media(max-width:640px){.content-main-container{padding:22px 12px;max-width:540px}}.all-rows-container{display:flex;flex-direction:column;gap:12px;width:100%}.app-header{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:22px;width:100%}.app-header-content{text-align:center}.app-header h1{margin:0;font-size:2.8rem;letter-spacing:.4px;color:var(--text-primary)}.app-subtitle{margin:8px 0 0;color:var(--text-secondary);font-size:1rem}.app-header-controls{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;flex-shrink:0;z-index:1000}.theme-toggle-container{position:relative}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.theme-toggle:hover{transform:translateY(-1px);border-color:var(--border-strong);background:var(--bg-hover);color:var(--text-primary)}.theme-toggle:active{transform:translateY(0)}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;line-height:1}.theme-toggle-icon svg{transition:transform var(--transition-normal)}.theme-toggle:hover .theme-toggle-icon svg{transform:rotate(15deg)}.theme-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;padding:8px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;animation:theme-menu-enter .15s ease-out}@keyframes theme-menu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.theme-menu-section{display:flex;flex-direction:column;gap:6px}.theme-menu-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:0 4px}.theme-menu-divider{height:1px;background:var(--border-subtle);margin:8px 0}.theme-mode-toggle{display:flex;gap:4px;padding:3px;background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.theme-mode-btn{display:flex;align-items:center;gap:6px;flex:1;padding:6px 10px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}.theme-mode-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.theme-mode-btn--active{background:var(--accent-secondary-muted);color:var(--accent-secondary)}.theme-mode-btn--active:hover{background:var(--accent-secondary-muted)}.theme-mode-btn svg{flex-shrink:0}.theme-variant-list{display:flex;flex-direction:column;gap:2px}.theme-variant-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease;text-align:left}.theme-variant-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.theme-variant-btn--active{background:var(--accent-secondary-muted);color:var(--accent-secondary)}.theme-variant-swatch{width:16px;height:16px;border-radius:var(--radius-full);border:2px solid var(--border-default);flex-shrink:0}.theme-variant-swatch[data-theme-type=dark][data-variant=midnight]{background:linear-gradient(135deg,#1a1a2e,#16213e)}.theme-variant-swatch[data-theme-type=dark][data-variant=charcoal]{background:linear-gradient(135deg,#2d2d2d,#1a1a1a)}.theme-variant-swatch[data-theme-type=dark][data-variant=ocean]{background:linear-gradient(135deg,#0d1b2a,#1b263b)}.theme-variant-swatch[data-theme-type=dark][data-variant=forest]{background:linear-gradient(135deg,#1a2f1a,#0d1f0d)}.theme-variant-swatch[data-theme-type=dark][data-variant=aura]{background:linear-gradient(135deg,#1a1625,#2d1f3d)}.theme-variant-swatch[data-theme-type=light][data-variant=cream]{background:linear-gradient(135deg,#faf8f5,#f5f0e8)}.theme-variant-swatch[data-theme-type=light][data-variant=gray]{background:linear-gradient(135deg,#e6eef6,#c4d8ec)}.theme-variant-swatch[data-theme-type=light][data-variant=sage]{background:linear-gradient(135deg,#e2efe6,#bad6c4)}.theme-variant-swatch[data-theme-type=light][data-variant=slate]{background:linear-gradient(135deg,#ebe4f2,#ccbeda)}.theme-variant-swatch[data-theme-type=light][data-variant=rose]{background:linear-gradient(135deg,#f8e8e2,#e2c4b8)}@media(max-width:640px){.app-header{flex-direction:column;align-items:center;gap:12px;padding-bottom:8px}.app-header h1{font-size:2.1rem}.app-subtitle{font-size:.95rem}.app-header-controls{position:static;transform:none;flex-direction:row;gap:10px;align-items:center}.theme-toggle{width:36px;height:36px}.theme-toggle-icon svg{width:18px;height:18px}.theme-menu{right:-40px;min-width:160px}}.panel-surface{background:var(--panel-bg);border:1px solid var(--panel-border)}.panel-row{width:100%}.key-mode-panel{display:flex;flex-direction:column;width:100%}.key-mode-panel__header{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;width:100%}.key-and-mode-panel{display:flex;gap:10px;align-items:flex-end;flex-wrap:nowrap;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box;flex:1 1 auto}.key-select{max-width:170px;flex:1 1 120px;min-width:0}.mode-select{max-width:420px;flex:2 1 240px;min-width:0}.mode-selects,.control-row,.measure-action-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:nowrap;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box}.measure-action-row button{flex:1 1 160px}.key-select,.mode-select{display:flex;flex-direction:column;gap:6px;min-width:0;width:100%}.mode-select-label{font-size:.9rem;color:var(--text-secondary);font-weight:600}.key-select select,.mode-select select{padding:7px 9px;border-radius:8px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);font-size:.95rem;box-shadow:var(--shadow-sm);appearance:none;cursor:pointer;width:100%;box-sizing:border-box}.mode-select select option,.key-select select option{background-color:var(--bg-surface);color:var(--text-primary)}.mode-select select:hover:not(:disabled),.key-select select:hover:not(:disabled){border-color:var(--accent-secondary);box-shadow:0 0 0 1px var(--accent-secondary-muted),var(--shadow-md)}.mode-select select:focus,.key-select select:focus{outline:2px solid var(--accent-secondary);outline-offset:2px}.mode-select--disabled{opacity:.6}.mode-select--disabled select{cursor:not-allowed}.mode-select--wide{max-width:320px}.chord-details-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border-default);color:var(--text-secondary);font-size:.85rem;cursor:pointer;flex:0 0 auto;white-space:nowrap}.chord-details-toggle input{accent-color:var(--accent-secondary)}.note-spelling-toggle{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:0 0 auto;min-width:180px}.tonal-center{display:flex;flex-direction:column;gap:6px;padding:6px 10px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border-default);flex:0 0 auto;min-width:170px}.tonal-center__label{font-size:.8rem;color:var(--text-secondary);font-weight:600}.tonal-center__value{font-size:.92rem;font-weight:700;color:var(--text-primary)}.note-spelling-label{font-size:.8rem;color:var(--text-secondary);font-weight:600}.note-spelling-buttons{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border-default)}.note-spelling-button{border:0;background:transparent;color:var(--text-secondary);font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}.note-spelling-button[aria-pressed=true]{background:var(--accent-secondary-muted);color:var(--text-primary)}.chord-progression-select{display:flex;flex-direction:column;gap:6px;width:100%}.chord-progression-select__label{font-size:.9rem;color:var(--text-secondary);font-weight:600}.chord-progression-select select{padding:7px 9px;border-radius:8px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);font-size:.95rem;box-shadow:var(--shadow-sm);appearance:none;cursor:pointer;width:100%;box-sizing:border-box}.chord-progression-select select option{background-color:var(--bg-surface);color:var(--text-primary)}.chord-progression-select select:hover:not(:disabled){border-color:var(--accent-secondary);box-shadow:0 0 0 1px var(--accent-secondary-muted),var(--shadow-md)}.chord-progression-select select:focus{outline:2px solid var(--accent-secondary);outline-offset:2px}.chord-progression-select__helper{display:block;margin-top:6px;color:var(--text-secondary);font-size:.9rem;opacity:.85}.chord-progression-select__scales{display:flex;flex-direction:column;gap:6px;margin-top:6px}.chord-progression-select__toggle{margin-top:4px;align-self:flex-start}.chord-progression-select__scales-label{font-size:.82rem;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--text-muted)}.chord-progression-select__scales-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}.chord-progression-select__scale-item{padding:4px 8px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text-primary);background:var(--accent-secondary-muted);border:1px solid var(--accent-secondary);box-shadow:var(--shadow-sm)}.mode-chord-grid{margin-top:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-bottom:4px;width:100%;min-width:0}@media(max-width:640px){.key-and-mode-panel{gap:8px}.mode-selects,.control-row,.measure-action-row{gap:6px;justify-content:flex-start;flex-wrap:nowrap;width:100%;min-width:0}.key-select{max-width:120px;flex:0 1 110px;min-width:0}.mode-select{max-width:200px;flex:1 1 140px;min-width:0}.mode-select select{font-size:.95rem;padding:7px 9px}.chord-details-toggle{padding:6px 7px;font-size:.8rem}.note-spelling-toggle{min-width:0;width:100%}.note-spelling-buttons{flex-wrap:wrap}.mode-chord-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode-chord-card{min-height:44px;font-size:12px;padding:6px 8px}.mode-chord-degree{font-size:12px;padding:3px 5px}.mode-chord-name{font-size:11px}}.mode-chord-volume-rail{margin-top:12px;display:flex;align-items:center;gap:8px;width:100%}.mode-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}.mode-list__label{font-size:.85rem;color:var(--text-secondary);font-weight:600}.mode-list__grid{display:flex;flex-wrap:wrap;gap:6px}.mode-list__chip{border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);font-size:.82rem;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.mode-list__chip[aria-pressed=true]{border-color:var(--accent-primary);background:var(--accent-primary-muted);color:var(--text-primary)}.mode-list__chip:disabled{opacity:.45;cursor:not-allowed}.mode-chord-helper{display:block;margin-top:8px;color:var(--text-secondary);font-size:.9rem;opacity:.85}.mode-equivalents{margin-top:12px;display:flex;flex-direction:column;gap:8px}.mode-equivalents-label{font-size:.85rem;color:var(--text-secondary);font-weight:600}.mode-equivalents-list{display:flex;flex-wrap:wrap;gap:6px}.mode-equivalent-chip{padding:4px 8px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border-default);color:var(--text-secondary);font-size:.8rem;font-weight:600;letter-spacing:.2px;cursor:pointer}.mode-equivalent-chip:hover{border-color:var(--accent-secondary);background:var(--bg-hover)}.mode-chord-volume-label{font-size:.9rem;color:var(--text-secondary);font-weight:600}.mode-chord-volume-slider{width:140px}.mode-chord-volume-value{font-size:11px;color:var(--text-secondary);text-align:center}.mode-chord-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 6px;min-width:0;min-height:40px;width:100%;flex:1 1 auto;border-radius:8px;background:var(--chip-bg);border:1px solid var(--border-default);color:var(--text-primary);cursor:pointer;font-size:11px;line-height:1.1;white-space:nowrap}.mode-chord-card:hover{border-color:var(--accent-primary);background:var(--chip-active-bg)}.mode-chord-degree{padding:2px 3px;border-radius:6px;background:var(--bg-surface);border:1px solid var(--border-default);font-weight:700;font-size:11px;position:relative}.mode-chord-name{font-weight:600;letter-spacing:.2px;font-size:10px}.mode-chord-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:6px;min-height:40px;padding:4px 6px;border-radius:8px;border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-secondary);text-align:center}.mode-chord-tone{display:flex;flex-direction:column;gap:3px;padding:4px 0}.mode-chord-tone+.mode-chord-tone{border-left:1px solid var(--border-subtle);padding-left:6px}.mode-chord-tone-label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}.mode-chord-tone-note{font-size:12px;font-weight:700;color:var(--text-primary)}.mode-chord-item{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%}@media(max-width:640px){.mode-chord-item{gap:6px}.mode-chord-details{min-height:52px;padding:8px 10px;gap:6px;border-color:var(--border-default);background:var(--bg-surface)}.mode-chord-tone{gap:4px;padding:6px 0}.mode-chord-tone+.mode-chord-tone{padding-left:8px}.mode-chord-tone-label{font-size:11px;letter-spacing:.4px}.mode-chord-tone-note{font-size:14px}}.mode-chord-sup{font-size:.6em;line-height:1;position:absolute;top:-2px;right:-2px}@media(min-width:900px){.mode-chord-grid{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:center;width:100%;align-self:stretch}.mode-chord-card{flex-direction:row;gap:6px;padding:7px 12px;border-radius:10px;font-size:13px;min-height:48px}.mode-chord-degree{padding:3px 6px;font-size:13px}.mode-chord-name{font-size:12px;letter-spacing:.3px}.mode-chord-details{min-height:48px;padding:7px 12px;border-radius:10px;gap:10px}.mode-chord-tone-label{font-size:10px}.mode-chord-tone-note{font-size:14px}}.audio-wave{display:flex;align-items:flex-end;gap:4px;padding:8px 10px;height:48px;min-width:90px;border-radius:12px;background:var(--bg-surface);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}.audio-wave-bar{width:6px;border-radius:6px;background:linear-gradient(180deg,var(--accent-secondary) 0%,var(--accent-primary) 100%);transform-origin:center bottom;animation:wavePulse .9s ease-in-out infinite;animation-play-state:paused;opacity:.75}.audio-wave--active .audio-wave-bar{animation-play-state:running;opacity:1}@keyframes wavePulse{0%{transform:scaleY(.6)}50%{transform:scaleY(1.4)}to{transform:scaleY(.65)}}.tab-bar{display:flex;gap:8px;margin:12px 0 10px;width:100%}.tab{flex:1;padding:10px 12px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary);text-align:center;font-size:.95rem;transition:transform .08s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;cursor:pointer}.tab:hover{transform:translateY(-1px);border-color:var(--accent-secondary);background:var(--bg-hover);box-shadow:var(--shadow-md)}.tab--active{background:var(--bg-overlay);border-color:var(--accent-secondary);box-shadow:var(--shadow-lg)}.preset-progression-panel{border-radius:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;width:100%}.preset-progression-guidance{display:flex;flex-direction:column;gap:6px;margin-top:4px;align-items:flex-start}.preset-progression-guidance__header{width:100%;display:flex;align-items:center;justify-content:flex-start}.preset-progression-guidance__title{font-size:.92rem;font-weight:700;color:var(--text-secondary)}.per-chord-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;letter-spacing:.2px}.per-chord-toggle[aria-pressed=true]{border-color:var(--accent-primary);background:var(--accent-primary-muted);color:var(--text-primary)}.start-row{width:100%;display:flex;justify-content:center}.start-control{display:flex;justify-content:center;width:100%}.start-control button{width:32%;min-width:200px;max-width:360px;padding:12px 16px;font-size:1rem;font-weight:700;border-radius:10px;border:1px solid var(--accent-primary);background:var(--accent-primary);color:var(--text-inverse);box-shadow:var(--shadow-lg);cursor:pointer;transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}.start-control button:disabled{opacity:.55;cursor:not-allowed}.start-control button:hover:not(:disabled){border-color:var(--accent-primary-hover);background:var(--accent-primary-hover);box-shadow:var(--shadow-glow);transform:translateY(-1px)}@media(max-width:640px){.start-control button{width:100%;max-width:100%}}.preset-progression-panel select{cursor:pointer}.preset-progression-view{display:flex;flex-direction:column;gap:10px}.preset-progression-meta{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}.preset-progression-meta__label{font-size:.74rem;font-weight:600;letter-spacing:.4px;color:var(--text-secondary);text-transform:uppercase}.preset-progression-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.3px;color:var(--text-primary);background:var(--accent-secondary-muted);border:1px solid var(--accent-secondary)}@media(max-width:640px){.scale-row{grid-template-columns:1fr;gap:6px;padding:8px 10px}.scale-row__scales{font-size:.82rem}}.preset-progression-scales{display:flex;flex-direction:column;gap:6px;width:100%}.scale-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;border:1px solid var(--border-subtle);background:var(--bg-surface)}.scale-row__chord{display:inline-flex;align-items:center;gap:8px;color:var(--text-primary)}.scale-row__degree{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;background:var(--accent-secondary-muted);border:1px solid var(--accent-secondary);color:var(--accent-secondary);font-size:.78rem;font-weight:700;min-width:34px}.scale-row__name{font-weight:600;font-size:.9rem}.scale-row__scales{color:var(--text-secondary);font-size:.85rem;line-height:1.3}.preset-progression-empty{color:var(--text-secondary);opacity:.85;font-size:.95rem}.helper-text{display:block;margin-top:6px;color:var(--text-secondary);font-size:.9rem;opacity:.85}.control-input{padding:6px 10px;border-radius:6px;border:1px solid var(--border-default);background:var(--input-bg);color:inherit;font:inherit}.control-input--range{width:140px}.start-stop-wrapper{margin-bottom:14px}.start-button-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.playback-visuals{width:520px;max-width:100%}.playback-visuals-inner{display:flex;align-items:center;gap:14px}.playback-progress{flex:1}.playback-progress-header{display:flex;justify-content:space-between}.loop-progress-bar{height:10px;background:var(--bg-surface);border-radius:10px;overflow:hidden;margin-top:4px}.loop-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--color-success));transition:width .1s linear}@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle-icon svg,.theme-menu,.theme-mode-btn,.theme-variant-btn,.tab,.chip-style,.mode-list__chip,.mode-equivalent-chip,.mode-chord-card,.start-control button,.preset-progression-chip,.preset-progression-chip-name,.loop-progress-fill{transition:none}.theme-menu{animation:none}.audio-wave-bar{animation:none;transform:scaleY(1)}.preset-progression-chip--active{animation:none;will-change:auto}}@media(hover:none)and (pointer:coarse){.preset-progression-chip{min-height:48px}.preset-progression-chip:hover{transform:none;border-color:var(--chord-border);box-shadow:var(--shadow-sm)}.preset-progression-chip:active:not(.preset-progression-chip--active){transform:scale(.98);transition:transform .1s ease-out}}.panels-grid-wrapper{display:flex;flex-direction:column;gap:16px;width:100%}.panel-row{position:relative;width:100%;min-height:fit-content;display:grid;gap:16px;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.panel-row:has(>.panel:only-child){grid-template-columns:1fr}.panel-row>.panel{min-width:0;max-width:100%}@media(max-width:768px){.panel-row{grid-template-columns:1fr}}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);transition:box-shadow var(--transition-normal),border-color var(--transition-normal),background-color var(--transition-normal);min-width:0}.panel:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}.panel-header{padding:10px 14px 10px 20px;border-bottom:1px solid var(--border-subtle);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--bg-hover);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transition:background var(--transition-fast)}.panel-header:hover{background:var(--bg-active)}.panel-handle{display:flex;align-items:center;gap:8px}.panel-title{color:var(--text-secondary);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex:1}.panel-collapse-icon{color:var(--text-muted);font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--transition-normal),color var(--transition-fast);padding:4px}.panel-collapse-icon:hover{color:var(--text-primary)}.panel-content{padding:16px 20px;transition:opacity .2s ease,max-height .3s ease;overflow:hidden;box-sizing:border-box;max-width:100%;width:100%;min-width:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}@media(max-width:640px){.panel-content{padding:14px}.panel-header{padding-left:14px}}.panel--in-row.panel--collapsed{width:50px!important;min-width:50px!important;max-width:50px!important;overflow:hidden;align-self:stretch;height:100%}.panel--in-row.panel--collapsed .panel-content{display:none}.panel--in-row.panel--collapsed .panel-header{border-bottom:none;border-radius:12px;padding:0;height:100%;display:flex;align-items:stretch;justify-content:center}.panel--in-row.panel--collapsed .panel-handle{flex-direction:column;align-items:center;justify-content:space-between;gap:8px;height:100%;width:100%;padding:12px 4px}.panel--in-row.panel--collapsed .panel-title{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:2px;font-size:.75rem}.panel:not(.panel--in-row).panel--collapsed{height:auto!important;align-self:start;width:100%}.panel:not(.panel--in-row).panel--collapsed .panel-content{display:none!important}.panel:not(.panel--in-row).panel--collapsed .panel-header{border-bottom:none;border-radius:12px}@media(prefers-reduced-motion:reduce){.panel,.panel-header,.panel-collapse-icon,.panel-content{transition:none}}