@import"https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Libre+Baskerville:wght@700&family=Plus+Jakarta+Sans:wght@700;800&display=swap";:root{--color-white: #ffffff;--color-off-white: #f8fafc;--color-slate-50: #F8FAFC;--color-slate-100: #F1F5F9;--color-slate-200: #E2E8F0;--color-slate-300: #94A3B8;--color-slate-400: #64748B;--color-slate-500: #475569;--color-slate-600: #334155;--color-slate-700: #1E293B;--color-slate-800: #0F172A;--color-slate-900: #020617;--color-chrome-tint: #1E293B;--color-blue-50: #eef8ff;--color-blue-100: #d8effe;--color-blue-200: #b9e3fd;--color-blue-300: #88d2fb;--color-blue-400: #60BFFB;--color-blue-500: #35a3e8;--color-blue-600: #2286c7;--color-blue-700: #1d6da1;--color-blue-800: #1d5b85;--color-blue-900: #1e4c6e;--color-blue-dark-400: #4583AA;--color-blue-dark-500: #55A5DB;--color-blue-dark-600: #7EC3EB;--color-blue-dark-700: #A8D9F3;--color-gold-50: #fdf8e8;--color-gold-100: #faefc5;--color-gold-200: #f5df8e;--color-gold-300: #efc94d;--color-gold-400: #DB990A;--color-gold-500: #cc8c08;--color-gold-600: #a86d05;--color-gold-700: #865008;--color-gold-800: #70410e;--color-gold-900: #603612;--color-gold-dark-400: #A8780A;--color-gold-dark-500: #C99B1A;--color-gold-dark-600: #E4B840;--color-gold-dark-700: #F0D070;--color-magenta-50: #fdf2fb;--color-magenta-100: #fbe5f7;--color-magenta-200: #f8c9ef;--color-magenta-300: #f2a0e1;--color-magenta-400: #e76dcc;--color-magenta-500: #9C2686;--color-magenta-600: #8b1f76;--color-magenta-700: #72165f;--color-magenta-800: #5e154e;--color-magenta-dark-400: #7A2068;--color-magenta-dark-500: #A83690;--color-magenta-dark-600: #C754AD;--color-magenta-dark-700: #D87EC5;--color-magenta-dark-800: #E8A8D8;--color-magenta-dark-900: #F2CCE9;--color-rose: #d6336c;--color-rose-light: #e8457a;--color-emerald: #10b981;--color-emerald-light: #34d399;--color-emerald-dark: #059669;--color-success: #22c55e;--color-error: #ef4444;--color-error-light: rgb(254 226 226 / .5);--space-px: 1px;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-3-5: .875rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.75rem;--space-8: 2rem;--space-9: 2.25rem;--space-10: 2.5rem;--text-2xs: .625rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-normal: 1.5;--tracking-tighter: -.05em;--tracking-tight: -.025em;--tracking-normal: 0;--tracking-wide: .025em;--tracking-wider: .05em;--tracking-widest: .1em;--tracking-note: -.02em;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-display: "Manrope", system-ui, sans-serif;--font-body: "Manrope", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--radius-sm: .125rem;--radius-md: .25rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--icon-size-lg: 2rem;--duration-fast: .1s;--duration-normal: .15s;--duration-slow: .3s;--ease-out: cubic-bezier(.4, 0, .2, 1);--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--sidebar-width: 250px;--sidebar-collapsed-width: 56px}:root{--surface-app: var(--color-white);--surface-sidebar: var(--color-slate-50);--surface-card: var(--color-white);--surface-elevated: var(--color-white);--surface-overlay: rgb(0 0 0 / .5);--surface-muted: var(--color-slate-50);--text-primary: var(--color-slate-900);--text-secondary: var(--color-slate-700);--text-muted: var(--color-slate-400);--border-default: var(--color-slate-200);--border-subtle: var(--color-slate-100);--border-strong: var(--color-slate-300);--border-focus: var(--color-blue-400);--accent-primary: var(--color-blue-400);--accent-primary-hover: var(--color-blue-300);--accent-primary-active: var(--color-blue-600);--accent-secondary: var(--color-magenta-500);--accent-gradient: linear-gradient(90deg, var(--color-blue-400), var(--color-magenta-500));--interactive-bg-hover: var(--color-slate-50);--interactive-bg-active: var(--color-slate-100);--hover-overlay-light: color-mix(in srgb, var(--color-chrome-tint) 8%, transparent);--card-bg: var(--color-slate-50);--card-border: var(--border-default);--card-shadow: 0 4px 16px -4px color-mix(in srgb, var(--color-chrome-tint) 14%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--color-chrome-tint) 8%, transparent);--card-shadow-active: 0 6px 20px -4px color-mix(in srgb, var(--color-chrome-tint) 20%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--color-chrome-tint) 12%, transparent);--card-radius: var(--radius-xl);--content-bg-gradient: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--color-chrome-tint) 6%, transparent) 0%, transparent 60%);--btn-primary-bg: var(--accent-primary);--btn-primary-text: var(--color-slate-900);--btn-primary-hover-bg: var(--accent-primary-hover);--btn-ghost-text: var(--text-secondary);--btn-ghost-hover-bg: var(--interactive-bg-hover);--btn-delete-hover-bg: var(--color-error-light);--input-bg: var(--color-white);--input-border: var(--border-default);--input-text: var(--text-primary);--checkbox-bg: var(--color-white);--checkbox-border: var(--color-slate-200);--checkbox-checked-bg: var(--accent-primary);--checkbox-checked-border: var(--accent-primary);--checkbox-checkmark: var(--color-white);--toggle-bg: var(--color-slate-100);--toggle-active-bg: var(--color-slate-700);--toggle-active-text: var(--color-white);--toggle-runner-bg: rgb(0 0 0 / .08);--toggle-runner-border: rgb(0 0 0 / .06);--toggle-runner-shadow: inset 0 1px 2px rgb(0 0 0 / .06);--toggle-chip-bg: rgb(255 255 255 / .65);--toggle-chip-text: var(--text-primary);--toggle-chip-shadow: 0 1px 2px rgb(0 0 0 / .08);--toggle-option-hover-bg: rgb(0 0 0 / .04);--dropdown-bg: var(--surface-elevated);--dropdown-border: var(--border-default);--dropdown-shadow: var(--shadow-lg);--dropdown-item-hover: var(--interactive-bg-hover);--dropdown-item-selected: var(--color-blue-400);--panel-bg: var(--surface-card);--panel-border: var(--border-subtle);--panel-header-bg: var(--surface-muted);--fretboard-bar-bg: var(--color-slate-50);--fretboard-bar-pill-bg: var(--color-white);--fretboard-bar-gradient-start: var(--color-slate-100);--selector-root-outline: var(--color-root-border);--selector-root-label: color-mix(in srgb, var(--color-root-border) 80%, black);--selector-root-value: color-mix(in srgb, var(--color-root-border) 90%, white);--selector-root-tint: color-mix(in srgb, var(--color-root-border) 6%, transparent);--selector-position-outline: var(--position-1-color);--selector-position-tint: color-mix(in srgb, var(--selector-position-outline) 6%, transparent);--marker-overlay-text: var(--color-slate-300);--marker-overlay-bg: var(--color-white);--marker-overlay-border-color: var(--color-slate-200);--scrollbar-thumb: var(--color-slate-300);--scrollbar-thumb-hover: var(--color-slate-400);--section-header-text: var(--color-slate-500);--section-header-size: var(--text-xs);--section-header-weight: var(--font-weight-bold);--section-header-tracking: var(--tracking-widest);--fretboard-scale: 1.333333333333333333333;--cell-width: calc(48px * var(--fretboard-scale));--cell-height: calc(52px * var(--fretboard-scale));--nut-cell-height: calc(48px * var(--fretboard-scale));--fretboard-border-radius: 4px;--fret-marker-width: calc(16px * var(--fretboard-scale));--nut-border-width: 3px;--string-line-width: 1px;--note-size-xs: calc(12px * var(--fretboard-scale));--note-size-sm: calc(18px * var(--fretboard-scale));--note-size-smed: calc(22px * var(--fretboard-scale));--note-size-md: calc(26px * var(--fretboard-scale));--note-size-lg: calc(30px * var(--fretboard-scale));--note-size-connect: calc(19px * var(--fretboard-scale));--note-marker-font-weight: 600;--note-marker-transition: all .15s ease;--note-marker-z-index: 2;--fret-marker-font-size: calc(11px * var(--fretboard-scale));--fret-marker-font-weight: 400;--fret-marker-highlight-font-weight: 600;--fret-marker-double-font-weight: 700;--string-label-height: calc(32px * var(--fretboard-scale));--string-label-font-size: calc(14px * var(--fretboard-scale));--string-label-font-weight: 600;--accidental-font-size: .9em;--focus-ring-offset: 2px;--focus-ring-width: 2px;--glass-bg: color-mix(in srgb, var(--color-slate-50) 80%, transparent);--glass-bg-warm: color-mix(in srgb, var(--color-chrome-tint) 7%, transparent);--glass-border: color-mix(in srgb, var(--color-chrome-tint) 18%, transparent);--glass-blur: 16px;--glass-highlight: rgb(255 255 255 / .8);--glow-root: rgb(253 159 18 / .2);--glow-root-strong: rgb(253 159 18 / .35);--glow-accent: color-mix(in srgb, var(--color-blue-500) 18%, transparent);--glow-accent-strong: color-mix(in srgb, var(--color-blue-500) 30%, transparent);--glow-emerald: rgb(16 185 129 / .25);--glow-emerald-strong: rgb(16 185 129 / .4);--glow-rose: rgb(214 51 108 / .2);--glow-rose-strong: rgb(214 51 108 / .35);--glass-shadow: 0 4px 24px -8px color-mix(in srgb, var(--color-chrome-tint) 12%, transparent);--glass-shadow-hover: 0 6px 28px -6px color-mix(in srgb, var(--color-chrome-tint) 18%, transparent);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.25, .1, .25, 1);--duration-micro: .12s;--duration-hover: .2s;--duration-expand: .35s;--label-size: .6rem;--label-weight: 600;--label-tracking: .08em;--label-color: var(--text-muted);--info-section-size: .75rem;--info-section-weight: 700;--info-section-tracking: .04em;--info-section-color: var(--text-secondary);--info-subsection-size: .625rem;--info-subsection-weight: 600;--info-subsection-tracking: .06em;--info-subsection-color: var(--text-secondary);--info-help-size: .6rem;--info-help-weight: 400;--info-help-color: var(--text-muted);--info-help-line-height: 1.4;--info-panel-padding: var(--space-2);--info-section-gap: var(--space-4);--info-group-gap: var(--space-2-5);--info-element-gap: var(--space-1)}@media(max-width:640px){:root{--fretboard-scale: 1}}:root{--color-root-text: #cf7c00;--color-root-border: #ee991a;--color-root-bg: #fff3e2;--color-root-glow: rgba(255, 183, 77, .6);--color-relative-border: #10b981;--color-relative-text: #059669;--color-major-border: #e0d6c8;--color-minor-border: #9333ea;--color-minor-text: var(--color-deep-purple);--color-deep-purple: #7E22CE;--color-chord-tone-text: hsl(30, 60%, 25%);--color-chord-tone-border: #ffffff;--color-chord-tone-badge: #f0c040;--color-chord-third-bg: var(--color-rose);--color-chord-third-text: var(--color-rose);--color-chord-third-border: var(--color-rose);--color-chord-third-glow: var(--glow-rose);--color-chord-fifth-bg: var(--color-emerald);--color-chord-fifth-text: var(--color-emerald-dark);--color-chord-fifth-border: var(--color-emerald);--color-chord-fifth-glow: var(--glow-emerald);--harmony-major-text: var(--text-secondary);--harmony-major-bg: color-mix(in srgb, var(--color-major-border) 20%, var(--surface-card));--harmony-major-border: color-mix(in srgb, var(--color-major-border) 50%, transparent);--harmony-minor-text: var(--color-deep-purple);--harmony-minor-bg: color-mix(in srgb, var(--color-deep-purple) 12%, var(--surface-card));--harmony-minor-border: color-mix(in srgb, var(--color-deep-purple) 30%, transparent);--harmony-dim-text: #d6336c;--harmony-dim-bg: color-mix(in srgb, #d6336c 12%, var(--surface-card));--harmony-dim-border: color-mix(in srgb, #d6336c 30%, transparent);--harmony-aug-text: #0d9488;--harmony-aug-bg: color-mix(in srgb, #0d9488 12%, var(--surface-card));--harmony-aug-border: color-mix(in srgb, #0d9488 30%, transparent);--marker-default-bg: var(--glass-highlight);--marker-default-border: rgb(110 98 188 / .22);--marker-default-text: var(--text-primary);--marker-interval-color: white;--marker-root-bg: color-mix(in srgb, var(--color-root-border) 18%, var(--surface-card));--marker-root-border: color-mix(in srgb, var(--color-root-border) 35%, var(--surface-card));--marker-root-text: var(--color-root-text);--marker-root-glow: var(--glow-root);--marker-chord-third-bg: color-mix(in srgb, var(--color-chord-third-bg) 10%, var(--surface-card));--marker-chord-third-border: color-mix(in srgb, var(--color-chord-third-border) 25%, var(--surface-card));--marker-chord-third-text: var(--color-chord-third-text);--marker-chord-third-glow: var(--color-chord-third-glow);--marker-chord-fifth-bg: color-mix(in srgb, var(--color-chord-fifth-bg) 14%, var(--surface-card));--marker-chord-fifth-border: color-mix(in srgb, var(--color-chord-fifth-border) 35%, var(--surface-card));--marker-chord-fifth-text: var(--color-chord-fifth-text);--marker-chord-fifth-glow: var(--color-chord-fifth-glow);--marker-default-interval-bg: color-mix(in srgb, var(--color-slate-500) 55%, var(--surface-card));--marker-root-interval-bg: color-mix(in srgb, var(--color-root-text) 78%, var(--surface-card));--marker-chord-third-interval-bg: color-mix(in srgb, var(--color-chord-third-text) 60%, var(--surface-card));--marker-chord-fifth-interval-bg: color-mix(in srgb, var(--color-chord-fifth-text) 72%, var(--surface-card));--marker-root-interval-text: white;--marker-chord-third-interval-text: white;--marker-chord-fifth-interval-text: white;--marker-size: var(--note-size-md);--marker-opacity: .9;--marker-bg: var(--marker-default-bg);--marker-text: var(--marker-default-text);--marker-font-size: var(--note-size-xs);--marker-border-width: 1px;--marker-border-color: var(--marker-default-border);--marker-border-style: solid;--marker-border-radius: var(--radius-lg);--marker-outline-width: 0;--marker-outline-color: transparent;--marker-outline-style: solid;--marker-outline-offset: 0px;--marker-shadow: none;--marker-glow-color: transparent;--marker-glow-spread: 0px;--marker-glow-intensity: 0;--marker-scale: 1;--marker-backdrop: white;--marker-outbox-size: var(--note-size-xs);--marker-outbox-opacity: 1;--marker-outbox-bg: var(--color-slate-500);--marker-outbox-text: var(--marker-text);--marker-outbox-font-size: calc(8px * var(--fretboard-scale));--marker-outbox-border-width: 1px;--marker-outbox-border-color: var(--color-slate-500);--marker-outbox-root-border: color-mix(in srgb, var(--color-root-border) 78%, black);--marker-outbox-fifth-border: color-mix(in srgb, var(--color-chord-fifth-border) 75%, black);--marker-connected-size: calc(20px * var(--fretboard-scale));--marker-connected-font-size: calc(9px * var(--fretboard-scale));--note-position-text: white;--note-marker-border-radius: 6px;--font-note-marker: "Inter", system-ui, sans-serif;--note-marker-letter-spacing: var(--tracking-note);--badge-bg: transparent;--badge-text: var(--text-muted);--badge-font-size: calc(11px * var(--fretboard-scale));--badge-border-width: 1px;--badge-border-color: transparent;--badge-border-radius: 4px;--badge-padding: 2px 4px;--badge-min-width: calc(16px * var(--fretboard-scale));--badge-offset-bottom: calc(-15px * var(--fretboard-scale));--badge-offset-left: 50%;--badge-transform: translateX(-50%);--badge-shadow: none;--position-1-hue: 235;--position-2-hue: 270;--position-3-hue: 305;--position-4-hue: 340;--position-5-hue: 15;--position-6-hue: 165;--position-7-hue: 200;--position-1-saturation: 55%;--position-2-saturation: 50%;--position-3-saturation: 50%;--position-4-saturation: 55%;--position-5-saturation: 55%;--position-6-saturation: 55%;--position-7-saturation: 55%;--position-1-lightness: 44%;--position-2-lightness: 48%;--position-3-lightness: 50%;--position-4-lightness: 46%;--position-5-lightness: 44%;--position-6-lightness: 38%;--position-7-lightness: 42%;--position-1-color: hsl(var(--position-1-hue), var(--position-1-saturation), var(--position-1-lightness));--position-2-color: hsl(var(--position-2-hue), var(--position-2-saturation), var(--position-2-lightness));--position-3-color: hsl(var(--position-3-hue), var(--position-3-saturation), var(--position-3-lightness));--position-4-color: hsl(var(--position-4-hue), var(--position-4-saturation), var(--position-4-lightness));--position-5-color: hsl(var(--position-5-hue), var(--position-5-saturation), var(--position-5-lightness));--position-6-color: hsl(var(--position-6-hue), var(--position-6-saturation), var(--position-6-lightness));--position-7-color: hsl(var(--position-7-hue), var(--position-7-saturation), var(--position-7-lightness));--position-indicator-width: 6px;--position-underlay-opacity: .12;--position-underlay-edge-width: 1.2px;--position-underlay-edge-opacity: 10%;--fretboard-bg: #e8e8ed;--fretboard-grid-bg: var(--color-white);--position-indicator-column-bg: transparent;--fret-markers-bg: transparent;--fretboard-border-width: 1px;--fretboard-border-color: rgb(110 98 188 / .12);--fretboard-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);--fret-color: var(--color-slate-300);--fret-border-width: 1px;--string-color: var(--color-slate-400);--nut-border-color: var(--color-slate-300);--fret-marker-color: var(--color-slate-500);--fret-marker-highlight: var(--color-slate-700);--fret-marker-double-color: var(--color-slate-900);--string-label-color: var(--color-slate-600);--color-chord-tone-badge-text: var(--color-slate-900)}@keyframes glow-pulse{0%{box-shadow:0 0 0 2px var(--_glow-color),0 0 8px -2px var(--_glow-color)}50%{box-shadow:0 0 0 3px var(--_glow-color),0 0 20px -2px var(--_glow-color)}to{box-shadow:0 0 0 2px var(--_glow-color),0 0 8px -2px var(--_glow-color)}}[data-theme=dark]{--color-slate-500: #4B5563;--color-slate-600: #374151;--color-slate-700: #1F2937;--color-slate-800: #151B26;--color-slate-900: #0F1218;--surface-app: var(--color-slate-900);--surface-sidebar: var(--color-slate-800);--surface-card: var(--color-slate-800);--surface-elevated: var(--color-slate-700);--surface-muted: var(--color-slate-800);--surface-overlay: rgb(0 0 0 / .7);--text-primary: var(--color-slate-50);--text-secondary: var(--color-slate-200);--text-muted: var(--color-slate-300);--border-default: var(--color-slate-700);--border-subtle: var(--color-slate-800);--border-strong: var(--color-slate-600);--border-focus: var(--color-blue-dark-500);--accent-primary: var(--color-blue-dark-500);--accent-primary-hover: var(--color-blue-dark-600);--accent-primary-active: var(--color-blue-dark-400);--accent-secondary: var(--color-magenta-dark-500);--interactive-bg-hover: var(--color-slate-700);--interactive-bg-active: var(--color-slate-600);--hover-overlay-light: color-mix(in srgb, var(--color-slate-600) 50%, transparent);--card-bg: var(--color-slate-800);--card-border: var(--color-slate-700);--card-shadow: 0 4px 16px -4px rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .25);--card-shadow-active: 0 6px 20px -4px rgb(0 0 0 / .5), 0 2px 8px -2px rgb(0 0 0 / .3);--content-bg-gradient: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--color-slate-700) 50%, transparent) 0%, transparent 60%);--btn-primary-bg: var(--color-blue-dark-500);--btn-primary-text: var(--color-slate-900);--btn-ghost-text: var(--color-slate-200);--btn-ghost-hover-bg: var(--color-slate-700);--input-bg: var(--color-slate-800);--input-border: var(--color-slate-600);--input-text: var(--color-slate-100);--checkbox-bg: var(--color-slate-800);--checkbox-border: var(--color-slate-600);--checkbox-checked-bg: var(--accent-primary);--checkbox-checkmark: var(--color-white);--toggle-bg: var(--color-slate-700);--toggle-active-bg: var(--color-blue-dark-500);--toggle-active-text: var(--color-slate-900);--toggle-runner-bg: rgb(0 0 0 / .25);--toggle-runner-border: rgb(255 255 255 / .04);--toggle-runner-shadow: inset 0 1px 2px rgb(0 0 0 / .15);--toggle-chip-bg: rgb(255 255 255 / .1);--toggle-chip-text: var(--accent-primary);--toggle-chip-shadow: 0 1px 2px rgb(0 0 0 / .15);--toggle-option-hover-bg: rgb(255 255 255 / .05);--dropdown-bg: var(--color-slate-800);--dropdown-border: var(--color-slate-600);--dropdown-item-hover: var(--color-slate-700);--panel-bg: var(--color-slate-800);--panel-border: var(--color-slate-700);--panel-header-bg: var(--color-slate-700);--scrollbar-thumb: var(--color-slate-600);--scrollbar-thumb-hover: var(--color-slate-500);--color-major-border: #bfab94;--fretboard-bar-bg: var(--color-slate-800);--fretboard-bar-pill-bg: var(--color-slate-700);--fretboard-bar-gradient-start: color-mix(in srgb, var(--color-chrome-tint) 12%, transparent);--btn-delete-hover-bg: rgb(239 68 68 / .15);--selector-root-outline: color-mix(in srgb, var(--color-root-border) 90%, white);--selector-root-label: var(--selector-root-outline);--selector-root-value: color-mix(in srgb, var(--color-root-border) 75%, white);--selector-root-tint: color-mix(in srgb, var(--color-root-border) 10%, transparent);--selector-position-tint: color-mix(in srgb, var(--selector-position-outline) 10%, transparent);--glass-bg: color-mix(in srgb, var(--color-slate-900) 70%, transparent);--glass-bg-warm: color-mix(in srgb, var(--color-slate-700) 30%, transparent);--glass-border: rgb(255 255 255 / .08);--glass-highlight: rgb(255 255 255 / .05);--glow-root: rgb(253 159 18 / .35);--glow-root-strong: rgb(253 159 18 / .55);--glow-accent: color-mix(in srgb, var(--color-blue-dark-500) 30%, transparent);--glow-accent-strong: color-mix(in srgb, var(--color-blue-dark-500) 50%, transparent);--glow-emerald: rgb(52 211 153 / .2);--glow-emerald-strong: rgb(52 211 153 / .35);--glow-rose: rgb(214 51 108 / .25);--glow-rose-strong: rgb(214 51 108 / .4);--glass-shadow: 0 4px 24px -8px rgb(0 0 0 / .4);--glass-shadow-hover: 0 6px 28px -6px rgb(0 0 0 / .5);--fretboard-bg: var(--color-slate-800);--fretboard-grid-bg: var(--color-slate-800);--position-indicator-column-bg: transparent;--fret-markers-bg: transparent;--fretboard-border-color: var(--color-slate-600);--fretboard-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);--fret-color: var(--color-slate-600);--string-color: var(--color-slate-500);--nut-border-color: var(--color-slate-400);--fret-marker-color: var(--color-slate-400);--fret-marker-highlight: var(--color-slate-300);--fret-marker-double-color: var(--color-slate-100);--string-label-color: var(--color-slate-300);--section-header-text: var(--color-blue-dark-700);--info-section-color: var(--color-slate-200);--info-subsection-color: var(--color-slate-300);--info-help-color: var(--color-slate-300);--marker-root-bg: color-mix(in srgb, var(--color-root-border) 30%, var(--surface-card));--marker-root-border: color-mix(in srgb, var(--color-root-border) 50%, var(--surface-card));--marker-root-interval-bg: color-mix(in srgb, var(--color-root-text) 78%, var(--surface-card));--marker-overlay-text: var(--color-slate-400);--marker-overlay-bg: var(--color-slate-800);--marker-overlay-border-color: var(--color-slate-500);--marker-interval-color: white;--marker-default-text: var(--color-slate-300);--marker-default-border: var(--glass-border);--marker-backdrop: var(--fretboard-bg);--marker-outbox-border-color: var(--color-slate-400);--marker-outbox-bg: color-mix(in srgb, var(--color-slate-400) 75%, var(--surface-card));--marker-outbox-root-border: var(--color-root-border);--marker-outbox-fifth-border: var(--color-chord-fifth-border);--position-1-lightness: 73%;--position-2-lightness: 75%;--position-3-lightness: 75%;--position-4-lightness: 70%;--position-5-lightness: 67%;--position-6-lightness: 70%;--position-7-lightness: 70%;--position-1-saturation: 65%;--position-2-saturation: 60%;--position-3-saturation: 60%;--position-4-saturation: 65%;--position-5-saturation: 65%;--position-6-saturation: 65%;--position-7-saturation: 65%;--position-underlay-edge-opacity: 40%;--harmony-major-text: var(--text-secondary);--harmony-major-bg: color-mix(in srgb, var(--color-major-border) 15%, var(--surface-card));--harmony-major-border: color-mix(in srgb, var(--color-major-border) 35%, transparent);--harmony-minor-text: #a855f7;--harmony-minor-bg: color-mix(in srgb, #a855f7 15%, var(--surface-card));--harmony-minor-border: color-mix(in srgb, #a855f7 30%, transparent);--harmony-dim-text: #f06292;--harmony-dim-bg: color-mix(in srgb, #f06292 12%, var(--surface-card));--harmony-dim-border: color-mix(in srgb, #f06292 28%, transparent);--harmony-aug-text: #2dd4bf;--harmony-aug-bg: color-mix(in srgb, #2dd4bf 12%, var(--surface-card));--harmony-aug-border: color-mix(in srgb, #2dd4bf 28%, transparent);--note-position-text: var(--color-slate-900)}[data-theme=dark] .pill-zone--root:hover{background:color-mix(in srgb,var(--color-root-border) 40%,var(--surface-card))}[data-theme=dark] .note-marker--lowlight,[data-theme=dark] .note-marker--root.note-marker--lowlight,[data-theme=dark] .note-marker--chord-third.note-marker--lowlight,[data-theme=dark] .note-marker--chord-fifth.note-marker--lowlight,[data-theme=dark] .note-marker--blue-note.note-marker--lowlight{--marker-opacity: .12;--marker-glow-spread: 0px;--marker-glow-color: transparent}[data-theme=dark] .note-marker--triad-match{--marker-outline-color: hsl(var(--triad-hue, 220) 45% 65%)}[data-theme=dark] .sidebar__add-board{background:linear-gradient(180deg,rgb(255 255 255 / .04) 0%,transparent 50%,rgb(0 0 0 / .02) 100%),var(--surface-elevated);box-shadow:inset 0 1px #ffffff0d,0 1px 3px -1px #00000026}[data-theme=dark] .sidebar__add-board:hover:not(:disabled){background:linear-gradient(180deg,rgb(255 255 255 / .08) 0%,transparent 50%,rgb(0 0 0 / .03) 100%),color-mix(in srgb,white 5%,var(--surface-elevated));box-shadow:inset 0 1px #ffffff12,0 0 10px -3px #ffffff0f}[data-theme=dark] .sidebar-item{background:linear-gradient(180deg,rgb(255 255 255 / .04) 0%,transparent 50%,rgb(0 0 0 / .02) 100%),var(--surface-elevated);box-shadow:inset 0 1px #ffffff0d,0 1px 3px -1px #00000026}[data-theme=dark] .sidebar-item:hover{background:linear-gradient(180deg,rgb(255 255 255 / .08) 0%,transparent 50%,rgb(0 0 0 / .03) 100%),color-mix(in srgb,white 5%,var(--surface-elevated));box-shadow:inset 0 1px #ffffff12,0 0 8px -3px #ffffff0f}[data-theme=dark] .sidebar__section .vf-pill-toggle,[data-theme=dark] .sidebar__controls .vf-pill-toggle,[data-theme=dark] .sidebar-flyout .vf-pill-toggle{background:linear-gradient(180deg,rgb(255 255 255 / .04) 0%,transparent 50%,rgb(0 0 0 / .02) 100%),var(--surface-elevated)}.relative{position:relative}.inline-icon{width:.75rem;height:.75rem;display:inline-block;margin-right:.25rem;vertical-align:middle}.mt-2{margin-top:var(--space-2)}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.hover\:opacity-100:hover{opacity:1}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-weight:var(--font-weight-normal);background:var(--surface-app);color:var(--text-primary);min-height:100vh;line-height:var(--leading-normal)}.app-layout{display:flex;height:100vh;overflow:hidden}.app-sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);flex-shrink:0;background:transparent;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;transition:all .2s ease,min-width .2s ease}.app-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:0;margin:0}.app-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.content-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-subtle)}.content-body{flex:1;padding:var(--space-6);overflow-y:auto}.fretboard-container{display:flex;flex-direction:column;gap:var(--space-4)}.fretboard-wrapper{display:flex;flex-direction:column;gap:var(--space-2)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}h5{font-size:var(--text-base)}h6{font-size:var(--text-sm)}:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:767px){.app-sidebar{display:none}.app-main{padding:0}.app-content{overflow:visible}}.sidebar{display:flex;flex-direction:column;height:100%;background:var(--glass-bg);background-image:linear-gradient(180deg,var(--glass-bg-warm),transparent 40%);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-right:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight),var(--glass-shadow);transition:all var(--duration-hover) var(--ease-smooth);padding:var(--space-4) var(--space-4) 0;gap:var(--space-5)}.sidebar__logo{display:flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default);overflow:hidden}.sidebar__logo-icon{width:var(--icon-size-lg);height:var(--icon-size-lg);color:var(--accent-primary)}.sidebar__logo-text{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);text-transform:uppercase;color:var(--text-primary)}.sidebar__section{display:flex;flex-direction:column;gap:var(--space-2-5)}.sidebar__section-header{font-size:var(--section-header-size);font-weight:var(--section-header-weight);text-transform:uppercase;letter-spacing:var(--section-header-tracking);color:var(--section-header-text)}.sidebar__controls{display:flex;flex-direction:column;gap:var(--space-1-5)}.sidebar__control-row{display:flex;align-items:center;gap:var(--space-3)}.sidebar__control-label{font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.sidebar__checkbox-group{display:flex;flex-direction:column;gap:var(--space-2)}.sidebar__divider{width:50%;height:1px;margin:calc(-1 * var(--space-2)) auto;background:var(--border-default)}.sidebar__footer{padding-top:var(--space-1);padding-bottom:var(--space-1);border-top:1px solid var(--border-default);display:flex;flex-direction:column;align-items:center;gap:0}.sidebar__content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-5)}.sidebar__content::-webkit-scrollbar{width:6px}.sidebar__content::-webkit-scrollbar-track{background:transparent}.sidebar__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.sidebar__content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.sidebar-item{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-lg);cursor:pointer;background:linear-gradient(180deg,rgb(255 255 255 / .05) 0%,transparent 50%,rgb(0 0 0 / .03) 100%),color-mix(in srgb,var(--accent-primary) 3%,var(--surface-elevated));border:1px solid color-mix(in srgb,var(--accent-primary) 10%,var(--glass-border));box-shadow:inset 0 1px #ffffff12,0 1px 3px -1px #0000001a;transition:background-color var(--duration-hover) var(--ease-smooth),color var(--duration-hover) var(--ease-smooth),border-color var(--duration-hover) var(--ease-smooth),box-shadow var(--duration-hover) var(--ease-smooth)}.sidebar-item:hover{background:linear-gradient(180deg,rgb(255 255 255 / .1) 0%,transparent 50%,rgb(0 0 0 / .05) 100%),color-mix(in srgb,var(--accent-primary) 8%,var(--surface-elevated));border-color:color-mix(in srgb,var(--accent-primary) 25%,var(--glass-border));box-shadow:inset 0 1px #ffffff1f,0 0 8px -3px color-mix(in srgb,var(--accent-primary) 15%,transparent)}.sidebar-item:active{background:color-mix(in srgb,var(--accent-primary) 10%,var(--surface-elevated));box-shadow:inset 0 1px 2px #00000014;transition-duration:50ms}.sidebar-item__text{font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary);text-transform:capitalize}.sidebar-item .sidebar-item__icon[class]{font-size:.625rem;color:var(--text-muted);transition:color var(--duration-fast) var(--ease-out)}.sidebar-item:hover .sidebar-item__icon[class]{color:var(--accent-primary)}.sidebar__guitars-icon{font-size:var(--text-sm)}.sidebar__accidental{font-size:1.6em;line-height:1;vertical-align:middle}.sidebar__section .vf-pill-toggle,.sidebar__controls .vf-pill-toggle,.sidebar-flyout .vf-pill-toggle{background:linear-gradient(180deg,rgb(255 255 255 / .05) 0%,transparent 50%,rgb(0 0 0 / .03) 100%),color-mix(in srgb,var(--accent-primary) 3%,var(--surface-elevated));border:1px solid color-mix(in srgb,var(--accent-primary) 10%,var(--glass-border));box-shadow:inset 0 1px #ffffff12,0 1px 3px -1px #0000001a;min-height:32px;padding:3px}.sidebar__section .vf-pill-toggle__option,.sidebar__controls .vf-pill-toggle__option,.sidebar-flyout .vf-pill-toggle__option{text-transform:uppercase;font-size:.5625rem;letter-spacing:var(--section-header-tracking);color:var(--text-secondary)}.sidebar__section .vf-pill-toggle__option:hover:not(.vf-pill-toggle__option--active):not(:disabled),.sidebar__controls .vf-pill-toggle__option:hover:not(.vf-pill-toggle__option--active):not(:disabled),.sidebar-flyout .vf-pill-toggle__option:hover:not(.vf-pill-toggle__option--active):not(:disabled){background:var(--toggle-option-hover-bg);color:var(--text-secondary)}.sidebar__section .vf-pill-toggle__option--active,.sidebar__controls .vf-pill-toggle__option--active,.sidebar-flyout .vf-pill-toggle__option--active{background:var(--toggle-runner-bg);color:var(--toggle-chip-text);box-shadow:none;border-radius:var(--radius-md)}.sidebar__section .vf-pill-toggle__option--active:hover:not(:disabled),.sidebar__controls .vf-pill-toggle__option--active:hover:not(:disabled),.sidebar-flyout .vf-pill-toggle__option--active:hover:not(:disabled){background:var(--toggle-runner-bg)}.sidebar__controls .vf-dropdown{display:flex;width:100%}.sidebar__controls .vf-dropdown__trigger{width:100%}.sidebar-flyout .vf-dropdown{display:flex;width:100%}.sidebar-flyout .vf-dropdown__trigger{width:100%}.sidebar--collapsed{padding:var(--space-2);align-items:center;overflow:hidden}.sidebar--collapsed .sidebar__logo{justify-content:center;padding-bottom:var(--space-2)}.sidebar--collapsed .sidebar__logo .vf-logo{gap:0}.sidebar--collapsed .sidebar__logo .vf-logo__text{max-width:0;opacity:0;pointer-events:none}.sidebar__rail{display:flex;flex-direction:column;gap:var(--space-1);flex:1;width:100%;padding-top:var(--space-1)}.sidebar__rail-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--text-muted);font-size:var(--text-lg);cursor:pointer;transition:background-color var(--duration-normal),color var(--duration-normal);align-self:center}.sidebar__rail-icon:hover{background:var(--hover-overlay-light);color:var(--text-primary)}.sidebar__rail-svg-icon{width:1em;height:1em}.sidebar__rail-icon--active{background:var(--interactive-bg-active);color:var(--accent-primary)}.sidebar--collapsed .sidebar__footer{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding-top:var(--space-2)}.sidebar__pre-footer{margin-top:auto;padding-bottom:var(--space-1)}.sidebar__version{display:flex;justify-content:center;padding-top:var(--space-2)}.sidebar__collapse-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-1-5);width:100%;height:28px;flex-shrink:0;border:none;border-radius:var(--card-radius);background:none;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:color .15s ease}.sidebar__collapse-toggle span{font-family:var(--font-mono);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.sidebar--collapsed .sidebar__collapse-toggle{justify-content:center}.sidebar__collapse-toggle:hover{color:var(--accent-primary)}.sidebar__section-icon{font-size:var(--text-sm);color:var(--text-muted)}.sidebar-flyout__backdrop{position:fixed;inset:0;z-index:var(--z-modal-backdrop)}.sidebar-flyout{position:fixed;z-index:var(--z-modal);min-width:220px;max-width:280px;background:var(--dropdown-bg);border:1px solid var(--dropdown-border);border-radius:var(--radius-xl);box-shadow:var(--dropdown-shadow);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);animation:flyout-enter .1s ease-out}@keyframes flyout-enter{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}.sidebar-flyout__section{display:flex;flex-direction:column;gap:var(--space-2)}.sidebar-flyout__section+.sidebar-flyout__section{padding-top:var(--space-2);border-top:1px solid var(--border-subtle)}.fretboard-bar{padding:var(--space-3) var(--space-4);display:grid;grid-template-columns:1fr;align-items:center;gap:var(--space-3);background:linear-gradient(180deg,var(--fretboard-bar-gradient-start),var(--card-bg) 60%);border-bottom:none;border-radius:var(--card-radius) var(--card-radius) 0 0;box-shadow:inset 0 1px 0 0 var(--glass-highlight);transition:box-shadow var(--duration-hover) var(--ease-smooth)}.fretboard-bar--with-delete{grid-template-columns:1fr auto}.fretboard-bar__actions{display:flex;align-items:center;gap:var(--space-2)}.pill-groups{display:flex;align-items:stretch;gap:var(--space-3)}.pill-group{display:flex;align-items:stretch;padding:0 var(--space-1);background:var(--fretboard-bar-pill-bg);border-radius:var(--radius-xl);overflow:hidden;border:1.5px solid var(--border-default);box-shadow:var(--shadow-sm);position:relative;transition:border-color var(--duration-hover) var(--ease-smooth),background-color var(--duration-hover) var(--ease-smooth)}.pill-group--root{flex:2;border-color:var(--selector-root-outline);background:linear-gradient(180deg,var(--selector-root-tint),transparent 60%),var(--fretboard-bar-pill-bg)}.pill-group--position{flex:1;border-color:var(--selector-position-outline);background:linear-gradient(180deg,var(--selector-position-tint),transparent 60%),var(--fretboard-bar-pill-bg)}.pill-segment{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-1) 0 var(--space-2);border-right:1px solid var(--border-default)}.pill-segment:last-child{border-right:none}.pill-segment--key{flex:1;min-width:5rem;padding-right:0;padding-left:0}.pill-segment--position{flex:1;min-width:5.25rem;padding-right:var(--space-3);padding-left:var(--space-2)}.pill-segment--scale{flex:3;min-width:17.25rem}.pill-segment--system{flex:1.2;min-width:6.9rem}.pill-segment--disabled{opacity:.35;pointer-events:none}.pill-segment__label{font-size:var(--text-2xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);margin-bottom:var(--space-0-5);color:var(--section-header-text)}.pill-segment__label--key,.pill-group--root .pill-segment--scale .pill-segment__label{color:var(--selector-root-label)}.pill-segment__label--system,.pill-segment__label--position{color:var(--selector-position-outline)}.pill-segment__content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0}.stepper-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-muted);padding:var(--space-1);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--duration-normal) var(--ease-out);background:none;border:none;font-size:.875rem}.stepper-arrow:hover{color:var(--text-primary)}.pill-segment__value{flex:1;text-align:center;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);font-size:1rem;font-weight:var(--font-weight-bold);color:var(--text-primary)}.pill-segment__key-value{color:var(--selector-root-value)}.pill-segment__scale-value{text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill-segment__system-value{font-size:.75rem}.fretboard-bar__delete{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;justify-self:center;background:transparent;border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--duration-normal);font-size:.75rem}.fretboard-bar__delete{color:var(--text-muted)}.fretboard-bar__delete:hover:not(:disabled){background:var(--btn-delete-hover-bg);color:var(--color-error)}.fretboard-bar__delete:disabled{opacity:.3;pointer-events:none;cursor:default}@media(max-width:640px){.fretboard-bar{padding:var(--space-3);gap:var(--space-2)}.pill-groups{gap:var(--space-2)}.pill-segment--key,.pill-segment--position{min-width:4rem}.pill-segment--scale{min-width:8rem}.pill-segment--system{min-width:5rem}.pill-segment__scale-value{max-width:5rem}.pill-segment__label{font-size:7px}.pill-segment__content{gap:var(--space-1)}.stepper-arrow{font-size:.75rem}.pill-segment__key-value,.pill-segment__position-value{font-size:1rem}.pill-segment__scale-value{font-size:.625rem}}.vf-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-modal-backdrop);background:var(--surface-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.vf-drawer__backdrop--open{opacity:1}.vf-drawer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-modal);max-height:85vh;background:var(--surface-sidebar);border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl);box-shadow:var(--shadow-xl);overflow:hidden;transform:translateY(100%);transition:transform var(--duration-slow) var(--ease-out)}.vf-drawer--open{transform:translateY(0)}.vf-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle)}.vf-drawer__handle{position:absolute;top:var(--space-2);left:50%;transform:translate(-50%);width:40px;height:4px;background:var(--border-default);border-radius:var(--radius-full)}.vf-drawer__title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.vf-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--icon-size-lg);height:var(--icon-size-lg);padding:0;background:transparent;border:none;border-radius:var(--radius-lg);color:var(--text-muted);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.vf-drawer__close:hover{background:var(--interactive-bg-hover);color:var(--text-primary)}.vf-drawer__content{padding:var(--space-5);overflow-y:auto;max-height:calc(85vh - 60px)}.vf-drawer__content::-webkit-scrollbar{width:6px}.vf-drawer__content::-webkit-scrollbar-track{background:transparent}.vf-drawer__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.mobile-shell{display:flex;flex-direction:column;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:var(--surface-app)}.mobile-top-bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--space-3);padding-block:var(--space-1);padding-top:max(var(--space-1),env(safe-area-inset-top,0px));flex-shrink:0;background:var(--glass-bg);background-image:linear-gradient(180deg,var(--glass-bg-warm),transparent 40%);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight),0 4px 12px -2px #0000001f,0 1px 3px #0000000f;touch-action:none}.landscape-overlay{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);background:var(--surface-app);color:var(--text-primary)}.landscape-overlay__icon{width:64px;height:64px;opacity:.6}.landscape-overlay__message{font-size:var(--text-lg);font-weight:var(--font-weight-medium);text-align:center;opacity:.8}.mobile-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:8px;flex-shrink:0}.mobile-pagination__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:.3;border:none;padding:0;cursor:pointer;transition:opacity .2s ease,transform .2s ease}.mobile-pagination__dot:before{content:"";position:absolute;inset:-18px}.mobile-pagination__dot--active{opacity:1;transform:scale(1.25);background:var(--text-primary)}.mobile-board-container{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.mobile-board-container::-webkit-scrollbar{display:none}.mobile-board-view{flex-shrink:0;width:100%;display:flex;flex-direction:column;scroll-snap-align:start}.mobile-board-view__fretboard{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;scroll-padding-top:var(--string-label-height);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;text-align:center}.mobile-board-view__fretboard::-webkit-scrollbar{display:none}.mobile-bottom-bar{flex-shrink:0;padding:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px));background:var(--surface-app);border-top:1px solid var(--border-default);touch-action:none}.mobile-degree-row{display:flex;align-items:stretch;gap:8px;margin-top:8px}.mobile-degree-row__options{display:flex;align-items:center;justify-content:center;width:2.75rem;flex-shrink:0;background:var(--fretboard-bar-pill-bg);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);color:var(--text-secondary);font-size:1.25rem;cursor:pointer;-webkit-tap-highlight-color:transparent}.mobile-degree-row__options:active{background:var(--interactive-bg-active)}.mobile-degree-ribbon{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;gap:7px;flex:1;min-width:0;padding:6px 8px;min-height:36px;background:var(--fretboard-bar-pill-bg);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;color:inherit}.mobile-degree-ribbon:active{filter:brightness(1.05)}.mobile-pill{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:26px;padding:0;border-radius:var(--radius-md);font-family:var(--font-mono);font-weight:700;font-size:.7rem;line-height:1;border:1px solid var(--marker-default-border);background:var(--glass-highlight);color:var(--text-primary);overflow:hidden;transition:background-color var(--duration-hover) var(--ease-smooth);--accidental-font-size: .9em;--accidental-top: -.15em}.mobile-pill.pill-zone{--pill-interval-size: .625rem;--pill-note-size: .75rem;--pill-radius: var(--radius-md);--pill-interval-pad: 2px 5px;--pill-note-pad: 3px 2px}.mobile-control-row{display:flex;align-items:stretch;gap:8px}.mobile-selector-pill{display:flex;align-items:stretch;min-width:0;background:var(--fretboard-bar-pill-bg);border-radius:var(--radius-xl);overflow:hidden;border:1.5px solid var(--border-default);box-shadow:var(--shadow-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--duration-hover) var(--ease-smooth),background-color var(--duration-hover) var(--ease-smooth)}.mobile-selector-pill:active{filter:brightness(.97);transition-duration:50ms}.mobile-selector-pill--root{flex:2;border-color:var(--selector-root-outline);background:linear-gradient(180deg,var(--selector-root-tint),transparent 60%),var(--fretboard-bar-pill-bg)}.mobile-selector-pill--position{flex:1;border-color:var(--selector-position-outline);background:linear-gradient(180deg,var(--selector-position-tint),transparent 60%),var(--fretboard-bar-pill-bg)}.mobile-selector-pill--disabled{opacity:.35;pointer-events:none}.mobile-selector-pill__segment{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px 10px 10px}.mobile-selector-pill--root .mobile-selector-pill__segment:first-child{padding-inline:18px;min-width:4.25rem}.mobile-selector-pill--position .mobile-selector-pill__segment{flex:1}.mobile-selector-pill__segment--scale{flex:1;min-width:0;overflow:hidden}.mobile-selector-pill__divider{width:1px;align-self:stretch;margin:6px 0;background:color-mix(in srgb,var(--text-muted) 40%,transparent)}.mobile-selector-pill__label{font-size:.5625rem;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);margin-bottom:3px;color:var(--section-header-text)}.mobile-selector-pill__label--key,.mobile-selector-pill--root .mobile-selector-pill__segment--scale .mobile-selector-pill__label{color:var(--selector-root-label)}.mobile-selector-pill__label--position,.mobile-selector-pill__label--system{color:var(--selector-position-outline)}.mobile-selector-pill__value{display:flex;align-items:center;justify-content:center;min-height:1.2rem;font-family:var(--font-body);font-size:1rem;font-weight:var(--font-weight-bold);color:var(--text-primary);line-height:1.2;--accidental-font-size: .75em;--accidental-top: -.15em}.mobile-selector-pill__value--scale{text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.8125rem}.mobile-selector-pill__value--system{font-size:.75rem}.mobile-selector-pill__arrow{font-size:.75em;opacity:.7;margin-left:-2px}.mobile-bottom-sheet-backdrop{position:fixed;inset:0;z-index:100;background:#00000040;transition:opacity .2s ease}.mobile-bottom-sheet{position:fixed;left:0;right:0;bottom:0;z-index:101;background:var(--glass-bg);background-image:linear-gradient(180deg,var(--glass-bg-warm),transparent 40%);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-bottom:none;border-radius:20px 20px 0 0;box-shadow:inset 0 1px 0 0 var(--glass-highlight),var(--glass-shadow);max-height:85vh;display:flex;flex-direction:column;transform:translateY(0);transition:transform .3s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}.mobile-bottom-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0;flex-shrink:0}.mobile-bottom-sheet__title{font-size:var(--text-lg);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight)}.mobile-bottom-sheet__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -12px -8px 0;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);font-size:1.125rem;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:color var(--duration-fast) var(--ease-out)}.mobile-bottom-sheet__close:active{color:var(--text-primary)}.mobile-bottom-sheet__content{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sheet-divider{border:none;height:1px;background:var(--glass-border);margin:0;opacity:.5}.glass-toggle{border-radius:var(--radius-xl);cursor:pointer;background:linear-gradient(180deg,rgb(255 255 255 / .05) 0%,transparent 50%,rgb(0 0 0 / .03) 100%),color-mix(in srgb,var(--accent-primary) 3%,var(--surface-elevated));border:1px solid color-mix(in srgb,var(--accent-primary) 10%,var(--glass-border));color:var(--text-muted);box-shadow:inset 0 1px #ffffff12,0 1px 3px -1px #0000001a;transition:background-color var(--duration-hover) var(--ease-smooth),color var(--duration-hover) var(--ease-smooth),border-color var(--duration-hover) var(--ease-smooth),box-shadow var(--duration-hover) var(--ease-smooth);-webkit-tap-highlight-color:transparent}.glass-toggle:active{background:color-mix(in srgb,var(--accent-primary) 10%,var(--surface-elevated));box-shadow:inset 0 1px 2px #00000014;transition-duration:50ms}.glass-toggle--active{background:color-mix(in srgb,var(--accent-primary) 15%,var(--surface-card));border-color:color-mix(in srgb,var(--accent-primary) 60%,transparent);color:var(--accent-primary);box-shadow:0 0 8px -2px var(--glow-accent)}.glass-toggle--active:active{background:color-mix(in srgb,var(--accent-primary) 20%,var(--surface-card));box-shadow:0 0 10px -2px var(--glow-accent)}.mobile-board-view__fretboard .string-labels{margin-top:-4px}.mobile-board-view__fretboard .string-labels,.mobile-board-view__fretboard .fret-row[data-fret]{scroll-snap-align:start}.mobile-top-bar__version :deep(.version-indicator){flex-direction:row;align-items:center;gap:8px}.info-panel-toggle{border:1px solid var(--border-subtle);border-radius:var(--radius-lg, 8px);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-card) 92%,white),color-mix(in srgb,var(--surface-muted) 92%,white));color:var(--text-muted);cursor:pointer;box-shadow:0 1px 2px #0000000f;transition:background var(--duration-hover) var(--ease-smooth),color var(--duration-hover) var(--ease-smooth),border-color var(--duration-hover) var(--ease-smooth),box-shadow var(--duration-hover) var(--ease-smooth)}.info-panel-toggle:hover{background:var(--surface-card);border-color:var(--glass-border);color:var(--text-secondary);box-shadow:0 1px 3px #0000001a}[data-theme=dark] .info-panel-toggle{border-color:var(--border-strong)}.info-panel-toggle--active{background:color-mix(in srgb,var(--accent-primary) 15%,var(--surface-card));border-color:color-mix(in srgb,var(--accent-primary) 35%,transparent);color:var(--accent-primary);box-shadow:0 0 8px -2px var(--glow-accent)}[data-theme=dark] .info-panel-toggle--active{border-color:color-mix(in srgb,var(--accent-primary) 35%,transparent)}.info-panel-toggle--active:hover{background:color-mix(in srgb,var(--accent-primary) 20%,var(--surface-card));box-shadow:0 0 10px -2px var(--glow-accent)}.vf-checkbox{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.vf-checkbox--disabled{cursor:not-allowed;opacity:.5}.vf-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.vf-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);border-radius:var(--radius-md);transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);flex-shrink:0}.vf-checkbox__box:after{content:"";position:absolute;width:6px;height:10px;border-right:2px solid var(--checkbox-checkmark);border-bottom:2px solid var(--checkbox-checkmark);transform:translate(-50%,-55%) rotate(45deg);top:50%;left:50%;opacity:0;transition:opacity var(--duration-fast) var(--ease-out)}.vf-checkbox__input:focus-visible+.vf-checkbox__box{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}.vf-checkbox__input:checked+.vf-checkbox__box{background:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}.vf-checkbox__input:checked+.vf-checkbox__box:after{opacity:1}.vf-checkbox__label{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal)}.vf-checkbox:hover:not(.vf-checkbox--disabled) .vf-checkbox__box{border-color:var(--border-strong)}.vf-checkbox:hover:not(.vf-checkbox--disabled) .vf-checkbox__input:checked+.vf-checkbox__box{background:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}.vf-pill-toggle{display:inline-flex;padding:var(--space-1);background:var(--hover-overlay-light);border-radius:var(--radius-lg);border:1px solid var(--border-default)}.vf-pill-toggle--full{width:100%}.vf-pill-toggle__option{position:relative;display:flex;align-items:center;justify-content:center;flex:1;padding:.375rem 0;font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--text-muted);background:transparent;border:none;border-radius:.375rem;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);white-space:nowrap;-webkit-user-select:none;user-select:none}.vf-pill-toggle__option:hover:not(.vf-pill-toggle__option--active):not(:disabled){color:var(--text-secondary)}.vf-pill-toggle__option:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:calc(var(--focus-ring-offset) * -1);z-index:1}.vf-pill-toggle__option:disabled{opacity:.5;cursor:not-allowed}.vf-pill-toggle__option--active{background:var(--toggle-active-bg);color:var(--toggle-active-text);box-shadow:var(--shadow-sm),0 0 0 1px #0000000a;font-weight:800}.vf-pill-toggle__option--active:hover:not(:disabled){background:var(--toggle-active-bg)}.vf-pill-toggle--dividers .vf-pill-toggle__option:not(:first-child):before{content:"";position:absolute;left:0;top:25%;height:50%;width:1px;background:var(--border-default);transition:opacity var(--duration-fast) var(--ease-out)}.vf-pill-toggle--dividers .vf-pill-toggle__option--active:before,.vf-pill-toggle--dividers .vf-pill-toggle__option--active+.vf-pill-toggle__option:before{opacity:0}.vf-pill-toggle--sm{padding:var(--space-0-5)}.vf-pill-toggle--sm .vf-pill-toggle__option{padding:var(--space-px) var(--space-2);font-size:var(--text-2xs)}.vf-pill-toggle--lg .vf-pill-toggle__option{padding:var(--space-1-5) var(--space-4);font-size:var(--text-sm)}.vf-dropdown{position:relative;display:inline-flex}.vf-dropdown__trigger{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer}.vf-dropdown__content{position:fixed;z-index:var(--z-dropdown);min-width:140px;max-height:320px;overflow-y:auto;background:var(--dropdown-bg);border:1px solid var(--dropdown-border);border-radius:var(--radius-lg);box-shadow:var(--dropdown-shadow);padding:var(--space-1);opacity:0;transform:translateY(-4px);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.vf-dropdown__content--open{opacity:1;transform:translateY(0)}.vf-dropdown__backdrop{position:fixed;inset:0;z-index:calc(var(--z-dropdown) - 1)}.vf-dropdown__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:background-color var(--duration-fast) var(--ease-out);white-space:nowrap}.vf-dropdown__item:hover{background:var(--dropdown-item-hover)}.vf-dropdown__item:active:not(.vf-dropdown__item--disabled){background:var(--interactive-bg-active)}.vf-dropdown__item:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:calc(var(--focus-ring-offset) * -1)}.vf-dropdown__item--selected{background:color-mix(in srgb,var(--dropdown-item-selected) 15%,var(--surface-card));color:var(--accent-primary-active);font-weight:var(--font-weight-medium)}.vf-dropdown__item--disabled{opacity:.5;cursor:not-allowed}.vf-dropdown__divider{height:1px;background:var(--border-subtle);margin:var(--space-1) 0}.vf-dropdown__group{padding:var(--space-1) 0}.vf-dropdown__group:not(:first-child){border-top:1px solid var(--border-subtle);margin-top:var(--space-1);padding-top:var(--space-2)}.vf-dropdown__group-label{display:block;padding:var(--space-1) var(--space-3);font-size:var(--text-2xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-muted)}.vf-dropdown__content::-webkit-scrollbar{width:6px}.vf-dropdown__content::-webkit-scrollbar-track{background:transparent}.vf-dropdown__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.vf-dropdown__content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.vf-fretboard-section{display:flex;flex-direction:column;height:100%;min-height:0;min-width:calc(7 * var(--cell-width) + 2 * var(--fret-marker-width) + 2 * var(--position-indicator-width) + 2 * var(--space-2) + 2 * var(--space-3) + 15px);background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);border:1px solid var(--card-border);flex-shrink:0;transition:box-shadow var(--duration-slow) var(--ease-out)}.vf-fretboard-section__content{flex:1;min-height:0;padding:0 var(--space-3) 0;display:flex;flex-direction:row;justify-content:center;position:relative;overflow-y:auto;scroll-padding-top:var(--string-label-height)}.vf-fretboard-section__content::-webkit-scrollbar{width:3px}.vf-fretboard-section__content::-webkit-scrollbar-track{background:transparent}.vf-fretboard-section__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.vf-fretboard-section__content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.vf-fretboard-section__main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-lg)}.vf-fretboard-section--active{box-shadow:var(--card-shadow-active)}.vf-fretboard-section__bar-wrapper{position:relative}.vf-fretboard-section__dropdown-backdrop{position:fixed;inset:0;z-index:var(--z-modal-backdrop)}.vf-fretboard-section__dropdown{z-index:var(--z-modal)}.vf-fretboard-details{width:100%;margin-top:var(--space-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}.vf-details-card{background:var(--card-bg);border:1px solid var(--border-default);padding:var(--space-4);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm)}.vf-details-card--related{display:flex;align-items:center;justify-content:space-between}.vf-details-card__title{font-size:var(--text-2xs);font-weight:var(--font-weight-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-widest);margin-bottom:var(--space-2)}.vf-details-card__badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}.vf-interval-badge{padding:var(--space-1) var(--space-2);background:var(--surface-muted);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:var(--text-2xs);font-weight:var(--font-weight-bold);border:1px solid var(--border-default)}.vf-interval-badge--root{background:color-mix(in srgb,var(--accent-primary) 10%,transparent);color:var(--accent-primary);border-color:color-mix(in srgb,var(--accent-primary) 20%,transparent)}.vf-details-card__formula{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--text-primary)}.vf-details-card__subtitle{font-size:var(--text-2xs);color:var(--text-secondary);text-transform:uppercase;margin-top:var(--space-1)}.vf-details-card__value{font-size:var(--text-sm);font-weight:var(--font-weight-bold);color:var(--text-primary);text-transform:uppercase}.vf-details-card__link{width:var(--icon-size-lg);height:var(--icon-size-lg);display:flex;align-items:center;justify-content:center;background:var(--surface-muted);border-radius:var(--radius-full);border:none;color:var(--text-secondary);cursor:pointer;transition:background-color var(--duration-normal)}.vf-details-card__link:hover{background:var(--interactive-bg-active)}@media(max-width:1024px){.vf-fretboard-details{grid-template-columns:repeat(2,1fr)}.vf-details-card--related{grid-column:span 2}}@media(max-width:640px){.vf-fretboard-details{grid-template-columns:1fr;padding:0 var(--space-4)}.vf-details-card--related{grid-column:span 1}}.note-marker{display:flex;align-items:center;justify-content:center;position:relative;font-family:var(--font-note-marker);font-weight:var(--note-marker-font-weight);letter-spacing:var(--note-marker-letter-spacing);transition:var(--note-marker-transition);z-index:var(--note-marker-z-index);width:var(--marker-size);height:var(--marker-size);opacity:var(--marker-opacity);background-color:var(--marker-bg);color:var(--marker-text);font-size:var(--marker-font-size);border-width:var(--marker-border-width);border-color:var(--marker-border-color);border-style:var(--marker-border-style);border-radius:var(--marker-border-radius);outline-width:var(--marker-outline-width);outline-color:var(--marker-outline-color);outline-style:var(--marker-outline-style);outline-offset:var(--marker-outline-offset);box-shadow:var(--marker-shadow),0 0 var(--marker-glow-spread) 0 var(--marker-glow-color);transform:scale(var(--marker-scale)) scale(var(--_nut-scale, 1))}[data-fret="0"]{--_nut-scale: .8}.note-marker:before{content:"";position:absolute;inset:0;background:var(--marker-backdrop);border-radius:inherit;z-index:-1}.note-marker--outbox{--marker-size: var(--marker-outbox-size);--marker-opacity: var(--marker-outbox-opacity);--marker-bg: var(--marker-outbox-bg);--marker-text: var(--marker-outbox-text);--marker-font-size: var(--marker-outbox-font-size);--marker-border-width: var(--marker-outbox-border-width);--marker-border-color: var(--marker-outbox-border-color);transform:scale(.8) scale(var(--marker-scale)) scale(var(--_nut-scale, 1))}.note-marker--root{--marker-bg: var(--marker-root-bg);--marker-backdrop: transparent;--marker-text: var(--marker-root-text);--marker-size: var(--note-size-lg);--marker-font-size: var(--note-size-sm);--marker-border-radius: 38%;--marker-border-width: 2px;--marker-border-color: var(--marker-root-border);--marker-outline-width: 1px;--marker-outline-color: var(--color-root-border);--marker-outline-style: solid;--marker-outline-offset: 1px;--marker-glow-color: var(--marker-root-glow);--marker-glow-spread: 8px;--marker-opacity: 1;--marker-scale: .9}.note-marker--outbox.note-marker--root{--marker-size: calc(8% + var(--note-size-xs));--marker-border-width: 1.5px;--marker-border-color: var(--marker-outbox-root-border);--marker-outline-width: 0;--marker-glow-spread: 4px}.note-marker--root .note-marker__interval{background:var(--marker-root-interval-bg);color:var(--marker-root-interval-text)}.note-marker--chord-third{--marker-scale: 1;--marker-bg: var(--marker-chord-third-bg);--marker-backdrop: transparent;--marker-text: var(--marker-chord-third-text);--marker-border-width: 2px;--marker-border-color: var(--marker-chord-third-border);--marker-border-radius: 20%;--marker-outline-width: 1px;--marker-outline-color: var(--color-chord-third-border);--marker-outline-style: solid;--marker-outline-offset: 1px;--marker-glow-color: var(--marker-chord-third-glow);--marker-glow-spread: 5px;--marker-opacity: 1}.note-marker--chord-third .note-marker__interval{background:var(--marker-chord-third-interval-bg);color:var(--marker-chord-third-interval-text)}.note-marker--outbox.note-marker--chord-third{--marker-size: var(--marker-outbox-size);--marker-opacity: var(--marker-outbox-opacity);--marker-border-width: 1px;--marker-border-color: var(--color-chord-third-border);--marker-outline-width: 0;--marker-glow-spread: 0px;--marker-scale: 1}.note-marker--chord-fifth{--marker-scale: 1;--marker-bg: var(--marker-chord-fifth-bg);--marker-backdrop: transparent;--marker-text: var(--marker-chord-fifth-text);--marker-border-width: 2px;--marker-border-color: var(--marker-chord-fifth-border);--marker-outline-width: 1px;--marker-outline-color: var(--color-chord-fifth-border);--marker-outline-style: solid;--marker-outline-offset: 1px;--marker-glow-color: var(--marker-chord-fifth-glow);--marker-glow-spread: 3px;--marker-opacity: 1}.note-marker--chord-fifth .note-marker__interval{background:var(--marker-chord-fifth-interval-bg);color:var(--marker-chord-fifth-interval-text)}.note-marker--outbox.note-marker--chord-fifth{--marker-size: var(--marker-outbox-size);--marker-opacity: var(--marker-outbox-opacity);--marker-border-width: 1px;--marker-border-color: var(--marker-outbox-fifth-border);--marker-outline-width: 0;--marker-glow-spread: 0px;--marker-scale: 1}.note-marker--blue-note{--marker-border-style: dashed;--marker-border-width: 2px;--marker-border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--surface-card));--marker-text: var(--accent-primary);--marker-bg: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-card));--marker-backdrop: transparent;--marker-opacity: .9}.note-marker--outbox.note-marker--blue-note{--marker-border-width: 1px;--marker-opacity: var(--marker-outbox-opacity);--marker-scale: .8}.note-marker--overlay{--marker-text: var(--marker-overlay-text);--marker-bg: var(--marker-overlay-bg);--marker-opacity: .85;--marker-border-style: dashed;--marker-border-radius: 30%;--marker-border-width: 2.5px;--marker-border-color: var(--marker-overlay-border-color);--marker-scale: .8}.note-marker--outbox.note-marker--overlay{--marker-opacity: .35}.note-marker--lowlight{--marker-opacity: .2}.note-marker--root.note-marker--lowlight,.note-marker--chord-third.note-marker--lowlight,.note-marker--chord-fifth.note-marker--lowlight,.note-marker--blue-note.note-marker--lowlight{--marker-opacity: .2;--marker-glow-spread: 0px;--marker-glow-color: transparent}.note-marker--position-color{--marker-bg: var(--marker-position-color);--marker-text: var(--note-position-text);--marker-border-color: color-mix(in srgb, var(--marker-position-color) 80%, black)}.note-marker--triad-match{--marker-size: var(--note-size-md);--marker-opacity: 1;--marker-font-size: var(--note-size-xs);--marker-outline-width: 3px;--marker-outline-color: hsl(var(--triad-hue, 220) 50% 55%);--marker-outline-style: solid;--marker-outline-offset: 2px}.note-marker--outbox.note-marker--triad-match{--marker-size: var(--note-size-md);--marker-opacity: 1;--marker-font-size: var(--note-size-xs)}.note-marker--triad-nonmatch{--marker-opacity: .2;--marker-glow-spread: 0px;--marker-glow-color: transparent}.note-marker--root.note-marker--triad-nonmatch,.note-marker--outbox.note-marker--root.note-marker--triad-nonmatch,.note-marker--chord-third.note-marker--triad-nonmatch,.note-marker--outbox.note-marker--chord-third.note-marker--triad-nonmatch,.note-marker--chord-fifth.note-marker--triad-nonmatch,.note-marker--outbox.note-marker--chord-fifth.note-marker--triad-nonmatch,.note-marker--blue-note.note-marker--triad-nonmatch,.note-marker--outbox.note-marker--blue-note.note-marker--triad-nonmatch{--marker-opacity: .2;--marker-size: var(--marker-outbox-size);--marker-glow-spread: 0px;--marker-glow-color: transparent;--marker-scale: 1}.note-marker--highlight{--marker-size: var(--note-size-md);--marker-opacity: 1;--marker-font-size: var(--note-size-xs);--marker-scale: 1.15;--marker-glow-color: var(--color-root-glow);--marker-glow-spread: 10px}.note-marker--outbox.note-marker--highlight{--marker-size: var(--note-size-md);--marker-opacity: 1;--marker-font-size: var(--note-size-xs)}.note-marker--dimmed,.note-marker--root.note-marker--dimmed,.note-marker--chord-third.note-marker--dimmed,.note-marker--chord-fifth.note-marker--dimmed,.note-marker--blue-note.note-marker--dimmed,.note-marker--outbox.note-marker--dimmed,.note-marker--outbox.note-marker--root.note-marker--dimmed,.note-marker--outbox.note-marker--chord-third.note-marker--dimmed,.note-marker--outbox.note-marker--chord-fifth.note-marker--dimmed,.note-marker--outbox.note-marker--blue-note.note-marker--dimmed{--marker-opacity: .2;--marker-glow-spread: 0px;--marker-glow-color: transparent}.note-marker--connected{--marker-size: var(--marker-connected-size);--marker-font-size: var(--marker-connected-font-size);opacity:.85}.note-marker--connected .note-marker__text{--accidental-font-size: 1.11em}.note-marker--outbox.note-marker--root.note-marker--connected{--marker-size: var(--note-size-smed);--marker-font-size: calc(4px + var(--marker-connected-font-size));--marker-border-width: 1.5px;--marker-glow-spread: 4px}.note-marker--outbox.note-marker--chord-third.note-marker--connected,.note-marker--outbox.note-marker--chord-fifth.note-marker--connected,.note-marker--outbox.note-marker--blue-note.note-marker--connected{--marker-size: var(--marker-connected-size);--marker-scale: 1;--marker-font-size: var(--marker-connected-font-size);--marker-border-width: 1.5px;--marker-glow-spread: 3px}.note-marker--outbox.note-marker--overlay{--marker-opacity: 1;--marker-scale: .95;--marker-border-style: dashed}.note-marker__text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1;font-family:var(--font-mono);--accidental-font-size: 1em;--accidental-top: -.15em}.note-marker__text .note-name__accidental{font-weight:700}.note-marker--with-interval{flex-direction:column;align-items:stretch;justify-content:stretch;width:var(--marker-size);height:auto;padding:0;gap:0;--marker-border-radius: var(--radius-lg)}.note-marker__interval{display:flex;align-items:baseline;justify-content:center;font-family:var(--font-mono);font-size:calc(var(--note-size-xs) * .7);font-weight:500;line-height:1;color:var(--marker-interval-color);padding:var(--space-1) var(--space-0-5);border-radius:calc(var(--marker-border-radius) - 1px) calc(var(--marker-border-radius) - 1px) 0 0;background:var(--marker-default-interval-bg)}.note-marker__interval-accidental{font-size:1em;font-weight:700;position:relative;top:-.05em;margin-right:.5px}.note-marker--with-interval .note-marker__text{position:static;transform:none;display:flex;align-items:center;justify-content:center;flex:1;padding:var(--space-1-5) var(--space-0-5)}.pill-zone{--pill-interval-size: .65rem;--pill-note-size: .85rem;--pill-radius: var(--radius-lg, 8px);--pill-interval-pad: var(--space-1) var(--space-0-5);--pill-note-pad: var(--space-1-5) var(--space-0-5)}.pill-zone__interval{align-self:stretch;display:flex;align-items:baseline;justify-content:center;font-family:var(--font-mono);font-size:var(--pill-interval-size);font-weight:500;line-height:1;color:var(--marker-interval-color);padding:var(--pill-interval-pad);border-radius:calc(var(--pill-radius) - 1px) calc(var(--pill-radius) - 1px) 0 0;background:var(--marker-default-interval-bg)}.pill-zone__accidental{font-size:1em;font-weight:700;position:relative;top:-.05em;line-height:1;margin-right:.5px}.pill-zone__interval--italic{font-style:italic}.pill-zone__note{font-family:var(--font-mono);font-size:var(--pill-note-size);font-weight:700;line-height:1;min-height:1em;display:flex;align-items:center;justify-content:center;flex:1;padding:var(--pill-note-pad);color:var(--text-primary)}.pill-zone--root{--pill-select-color: var(--color-root-border);--pill-select-glow: var(--glow-root);background:var(--marker-root-bg);border:1px solid var(--marker-root-border);box-shadow:0 0 12px -2px var(--glow-root)}.pill-zone--root .pill-zone__interval{background:var(--marker-root-interval-bg);color:var(--marker-root-interval-text)}.pill-zone--root .pill-zone__note{color:var(--color-root-text)}.pill-zone--root:hover{background:color-mix(in srgb,var(--color-root-border) 26%,var(--surface-card));box-shadow:0 0 18px -2px var(--glow-root)}.pill-zone--chord-third{--pill-select-color: var(--color-chord-third-border);--pill-select-glow: var(--color-chord-third-glow);background:var(--marker-chord-third-bg);border:1px solid var(--marker-chord-third-border);border-top:2px solid color-mix(in srgb,var(--color-chord-third-border) 55%,var(--surface-card))}.pill-zone--chord-third .pill-zone__interval{background:var(--marker-chord-third-interval-bg);color:var(--marker-chord-third-interval-text)}.pill-zone--chord-third .pill-zone__note{color:var(--color-chord-third-text)}.pill-zone--chord-third:hover{background:color-mix(in srgb,var(--color-chord-third-bg) 18%,var(--surface-card));box-shadow:0 0 14px -2px var(--color-chord-third-glow)}.pill-zone--chord-fifth{--pill-select-color: var(--color-chord-fifth-border);--pill-select-glow: var(--color-chord-fifth-glow);background:var(--marker-chord-fifth-bg);border:1px solid var(--marker-chord-fifth-border);border-top:2px solid color-mix(in srgb,var(--color-chord-fifth-border) 65%,var(--surface-card))}.pill-zone--chord-fifth .pill-zone__interval{background:var(--marker-chord-fifth-interval-bg);color:var(--marker-chord-fifth-interval-text)}.pill-zone--chord-fifth .pill-zone__note{color:var(--color-chord-fifth-text)}.pill-zone--chord-fifth:hover{background:color-mix(in srgb,var(--color-chord-fifth-bg) 22%,var(--surface-card));box-shadow:0 0 14px -2px var(--color-chord-fifth-glow)}.pill-zone--scale-tone{--pill-select-color: var(--text-muted);--pill-select-glow: rgb(148 163 184 / .25);background:var(--glass-highlight);border:1px solid var(--marker-default-border)}.pill-zone--scale-tone .pill-zone__interval{background:var(--marker-default-interval-bg);color:var(--marker-interval-color)}.pill-zone--scale-tone .pill-zone__note{color:var(--text-primary)}.pill-zone--blue-note{--pill-select-color: var(--accent-primary);--pill-select-glow: rgb(59 130 246 / .25);border:1px dashed color-mix(in srgb,var(--accent-primary) 50%,var(--surface-card));background:color-mix(in srgb,var(--accent-primary) 8%,var(--surface-card))}.pill-zone--blue-note .pill-zone__interval{opacity:.85}.pill-zone--blue-note .pill-zone__note{color:var(--accent-primary);opacity:.85}.pill-zone--blue-note:hover{background:color-mix(in srgb,var(--accent-primary) 10%,var(--surface-card))}.pill-zone--ghost{border:1px dashed var(--glass-border);background:var(--surface-card);opacity:1;cursor:pointer}.pill-zone--ghost .pill-zone__interval{background:color-mix(in srgb,var(--glass-border) 35%,var(--surface-card));color:var(--text-muted)}.pill-zone--ghost .pill-zone__note{color:var(--text-muted)}.pill-zone--blue-note .pill-zone__interval,.note-marker--blue-note .note-marker__interval{background:color-mix(in srgb,var(--accent-primary) 60%,var(--surface-card));color:#fff}.degree-bar__section{display:flex;flex-direction:column;gap:var(--info-group-gap)}.degree-bar__section>.info-panel__section-header+.info-panel__help-text,.degree-bar__section>.info-panel__subsection-header+.info-panel__help-text{margin-top:calc(var(--info-element-gap) - var(--info-group-gap))}.degree-bar__overlay-well{padding:var(--space-1) var(--space-1-5);margin-bottom:var(--space-1);background:color-mix(in srgb,var(--surface-app) 40%,var(--glass-bg));border:1px solid color-mix(in srgb,var(--glass-border) 30%,transparent);border-radius:var(--radius-md, 6px);box-shadow:0 0 8px -2px var(--glow-accent)}[data-theme=dark] .degree-bar__overlay-well{border-color:color-mix(in srgb,var(--glass-border) 25%,transparent)}.degree-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1)}.degree-bar__cell{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border-radius:var(--radius-lg, 8px);cursor:pointer;min-width:0;--accidental-font-size: 1.05em;--accidental-top: -.25em;transition:background-color var(--duration-hover) var(--ease-smooth),transform var(--duration-hover) var(--ease-spring),box-shadow var(--duration-hover) var(--ease-smooth),border-color var(--duration-hover) var(--ease-smooth)}.degree-bar__cell:hover{transform:translateY(-2px) scale(1.03)}.degree-bar__cell--empty{border:1px dashed color-mix(in srgb,var(--text-muted) 35%,transparent);background:color-mix(in srgb,var(--glass-border) 8%,transparent);pointer-events:none;border-radius:var(--radius-lg, 8px)}.degree-bar__cell--selected{--_glow-color: var(--pill-select-color);background:color-mix(in srgb,var(--pill-select-color) 30%,var(--surface-card));box-shadow:0 0 0 2px var(--pill-select-color),0 0 16px -2px var(--pill-select-glow);transform:scale(1.05);animation:glow-pulse .6s var(--ease-smooth)}.degree-bar__cell--selected.pill-zone--scale-tone{background:var(--surface-card)}.degree-bar--collapsed{display:flex;flex-direction:column;gap:var(--space-1)}.degree-bar--collapsed .degree-bar__collapsed-row{display:grid;grid-template-columns:1fr .7fr;align-items:stretch}.degree-bar--collapsed .degree-bar__collapsed-row>.degree-bar__harmony-cell{opacity:.7}.degree-bar--collapsed .degree-bar__cell--empty{min-height:0}.degree-bar__header{display:flex;align-items:center;padding:0 var(--space-1)}.degree-bar__label{font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color);text-transform:uppercase;letter-spacing:var(--label-tracking)}.degree-bar__toggle{display:flex;align-items:center;justify-content:center;width:fit-content;height:24px;padding:0 var(--space-2);font-size:.75rem}.degree-bar__toggle-label{font-size:.65rem;line-height:1;padding-left:var(--space-1);letter-spacing:.06em;font-weight:600}.degree-bar__toggles-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1-5);padding:0}.degree-bar__toggles-grid .degree-bar__toggle{width:100%;justify-content:flex-start}.degree-bar__toggles-grid .degree-bar__toggle-label{flex:1;text-align:center}.degree-bar__toggles-header{display:flex;flex-direction:column;gap:var(--space-1)}.degree-bar__harmony-row{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1);margin-top:var(--space-1)}.degree-bar__harmony-cell{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;font-weight:600;line-height:1;padding:var(--space-1) 0;border-radius:var(--radius-full);border:1px solid transparent;background:transparent;color:var(--harmony-major-text);cursor:pointer;transition:all var(--duration-hover) var(--ease-smooth)}.degree-bar__harmony-cell:hover{background:var(--harmony-major-bg);border-color:var(--harmony-major-border);transform:translateY(-1px)}.degree-bar__harmony-cell--empty{border:none;background:transparent;pointer-events:none;cursor:default}.degree-bar__harmony-cell--major{color:var(--harmony-major-text)}.degree-bar__harmony-cell--major:hover{background:var(--harmony-major-bg);border-color:var(--harmony-major-border)}.degree-bar__harmony-cell--minor{color:var(--harmony-minor-text)}.degree-bar__harmony-cell--minor:hover{background:var(--harmony-minor-bg);border-color:var(--harmony-minor-border)}.degree-bar__harmony-cell--dim{color:var(--harmony-dim-text)}.degree-bar__harmony-cell--dim:hover{background:var(--harmony-dim-bg);border-color:var(--harmony-dim-border)}.degree-bar__harmony-cell--aug{color:var(--harmony-aug-text)}.degree-bar__harmony-cell--aug:hover{background:var(--harmony-aug-bg);border-color:var(--harmony-aug-border)}.degree-bar__harmony-cell--relative{position:relative}.degree-bar__harmony-cell--relative:after{content:"";position:absolute;top:2px;right:3px;width:4px;height:4px;border-radius:50%;background:var(--color-rose)}.degree-bar__collapsed-toggles-label{font-size:.5rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;text-align:center;display:block}.degree-bar__collapsed-divider{height:1px;background:var(--glass-border);margin:var(--space-1) 0}.degree-bar__collapsed-toggles{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.degree-bar__collapsed-toggles .degree-bar__toggle{width:100%;padding:var(--space-1-5) 0;height:auto;justify-content:center;font-size:.9rem;border-radius:var(--radius-lg, 8px)}.degree-bar__collapsed-toggles .vf-dropdown{width:100%}.degree-bar__collapsed-toggles .vf-dropdown__trigger{display:flex;width:100%}.degree-bar__collapsed-header{display:none;text-align:center}.degree-bar__harmony-cell--collapsed{display:flex;align-items:center;justify-content:center;align-self:stretch;font-size:.55rem;padding:0 var(--space-1);border-radius:var(--radius-lg, 8px);margin-left:var(--space-1)}.degree-bar__collapsed-toggles-label--display{margin-top:var(--space-1);padding-top:var(--space-2);border-top:1px solid var(--glass-border)}.degree-bar__toggle-label--collapsed{display:none;font-size:var(--label-size)}@container info-col (min-width: 80px){.degree-bar__collapsed-header{display:block}.degree-bar__toggle-label--collapsed{display:inline}}@container info-col (min-width: 180px){.degree-bar__collapsed-toggles{display:grid;grid-template-columns:1fr 1fr}.degree-bar__collapsed-toggles .degree-bar__toggle{justify-content:flex-start;padding:var(--space-1-5) var(--space-1)}.degree-bar__collapsed-toggles .vf-dropdown{grid-column:1 / -1}}.triad-card{display:flex;flex-direction:column;gap:var(--space-2)}.triad-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.triad-card__header-left{display:flex;align-items:baseline;gap:var(--space-2)}.triad-card__toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-1);width:fit-content;height:24px;padding:0 var(--space-2);font-size:.75rem;flex-shrink:0}.triad-card__toggle--collapsed{width:100%;height:28px;font-size:.7rem}.triad-card__label{font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color);text-transform:uppercase;letter-spacing:var(--label-tracking)}.triad-card__toggle-label{font-size:.65rem;letter-spacing:.06em;font-weight:600}.triad-card__chord-symbol{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--text-primary)}.triad-card__inversion-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--glass-bg);border-radius:var(--radius-lg, 8px);padding:3px}.triad-card__inv-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;min-height:44px;padding:var(--space-1-5) var(--space-1);border-radius:calc(var(--radius-lg, 8px) - 2px);border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--duration-hover) var(--ease-smooth),color var(--duration-hover) var(--ease-smooth),box-shadow var(--duration-hover) var(--ease-smooth),transform var(--duration-micro) var(--ease-smooth);white-space:nowrap}.triad-card__inv-btn:hover{background:var(--glass-highlight);color:var(--text-primary)}.triad-card__inv-btn:active{transform:scale(.98)}.triad-card__inv-btn--active{background:var(--accent-primary);color:#fff;box-shadow:0 0 12px -2px var(--glow-accent-strong)}.triad-card__inv-btn--active:hover{background:var(--accent-primary);color:#fff}.triad-card__inv-btn-label{font-size:.75rem;line-height:1.2;padding-bottom:var(--space-2)}.triad-card__inv-btn-notes{font-size:.8rem;font-weight:500;opacity:.75}.triad-card__inv-btn--active .triad-card__inv-btn-notes{opacity:.9;color:#fff}.triad-card--collapsed{align-items:center;gap:var(--space-1-5);border-top:1px solid var(--glass-border);padding-top:var(--space-1-5)}.triad-card__section-label{font-size:.5rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.triad-card__inv-stack{display:flex;flex-direction:column;gap:2px;width:100%}.triad-card__inv-stack-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-1);border-radius:var(--radius-lg, 8px);border:1px solid var(--glass-border);background:var(--glass-highlight);color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);font-size:.6rem;font-weight:600;transition:all var(--duration-hover) var(--ease-smooth);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.triad-card__inv-stack-btn:hover{background:color-mix(in srgb,var(--accent-primary) 15%,var(--surface-card));color:var(--accent-primary);transform:translateY(-1px)}.triad-card__inv-stack-btn:active{transform:scale(.98)}.triad-card__inv-stack-btn--active{background:color-mix(in srgb,var(--accent-primary) 20%,var(--surface-card));border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 0 10px -2px var(--glow-accent)}.info-panel__section-header{font-size:var(--info-section-size);font-weight:var(--info-section-weight);color:var(--info-section-color);text-transform:uppercase;letter-spacing:var(--info-section-tracking);line-height:1}.info-panel__subsection-header{font-size:var(--info-subsection-size);font-weight:var(--info-subsection-weight);color:var(--info-subsection-color);text-transform:uppercase;letter-spacing:var(--info-subsection-tracking);line-height:1}.info-panel__help-text{font-size:var(--info-help-size);font-weight:var(--info-help-weight);color:var(--info-help-color);line-height:var(--info-help-line-height)}.scale-info-panel{display:flex;flex-direction:column;gap:var(--info-section-gap);font-family:var(--font-mono);padding:var(--info-panel-padding);background:var(--glass-bg);background-image:linear-gradient(180deg,var(--glass-bg-warm),transparent 40%);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:var(--fretboard-border-radius);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight),var(--glass-shadow);transition:box-shadow var(--duration-hover) var(--ease-smooth)}.scale-info-panel:hover{box-shadow:inset 0 1px 0 0 var(--glass-highlight),var(--glass-shadow-hover)}.scale-info-panel__section{border-radius:var(--radius-lg, 8px)}.scale-info-panel__section--overlay{background:color-mix(in srgb,var(--accent-primary) 2%,transparent)}.scale-info-panel__section--overlay.scale-info-panel__section--empty{min-height:0;background:transparent}.scale-info-panel__section--triad{background:color-mix(in srgb,var(--surface-app) 45%,var(--glass-bg));border:1px solid var(--glass-border);padding:var(--space-2)}.scale-info-panel__divider{height:1px;background:var(--glass-border);margin:0 var(--space-2)}.scale-info-panel--collapsed{padding:var(--space-1);gap:var(--space-2);border-radius:var(--radius-lg, 8px);box-shadow:none}.scale-info-panel--collapsed:hover{box-shadow:none}.overlay-stepper__row{display:flex;align-items:center;gap:var(--space-2);width:100%}.overlay-stepper{display:flex;align-items:center;width:100%;padding:var(--space-1) var(--space-1-5);background:var(--glass-bg);border-radius:var(--radius-full, 9999px);border:1px solid var(--glass-border);transition:border-color var(--duration-hover) var(--ease-smooth),box-shadow var(--duration-hover) var(--ease-smooth)}.overlay-stepper--active{border-color:color-mix(in srgb,var(--accent-primary) 40%,transparent);box-shadow:0 0 10px -2px var(--glow-accent)}.overlay-stepper__label-group{display:flex;align-items:center;gap:var(--space-0-5);flex-shrink:0}.overlay-stepper__label{font-size:var(--label-size);font-weight:var(--label-weight);text-transform:uppercase;letter-spacing:var(--label-tracking);color:var(--label-color);white-space:nowrap;line-height:1;transition:color var(--duration-hover) var(--ease-smooth)}.overlay-stepper__label--active{color:var(--accent-primary);cursor:pointer}.overlay-stepper__controls{display:flex;align-items:center;justify-content:center;flex:1;min-width:0}.overlay-stepper__arrow{display:flex;align-items:center;justify-content:center;color:var(--text-muted);padding:var(--space-0-5);cursor:pointer;-webkit-user-select:none;user-select:none;background:none;border:none;font-size:.875rem;transition:color var(--duration-micro) var(--ease-smooth),transform var(--duration-hover) var(--ease-spring)}.overlay-stepper__arrow:hover{color:var(--text-primary);transform:scale(1.2)}.overlay-stepper__controls .vf-dropdown{flex:1;min-width:0}.overlay-stepper__controls .vf-dropdown__trigger{display:flex;width:100%}.overlay-stepper__value{flex:1;text-align:center;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--duration-hover) var(--ease-smooth)}.overlay-stepper__value--active,.overlay-stepper__value:hover{color:var(--text-primary)}.overlay-stepper__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-0-5);background:none;border:none;color:var(--text-muted);font-size:.7rem;flex-shrink:0;border-radius:var(--radius-sm, 4px);visibility:hidden;pointer-events:none;transition:color var(--duration-micro) var(--ease-smooth),background-color var(--duration-micro) var(--ease-smooth)}.overlay-stepper__clear--visible{visibility:visible;pointer-events:auto;cursor:pointer}.overlay-stepper__clear--visible:hover{color:var(--text-primary);background:#ffffff14}.overlay-stepper--collapsed{display:flex;justify-content:center;background:transparent;border:none;padding:var(--space-1);border-radius:0}.overlay-stepper__diamond{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg, 8px);cursor:pointer;font-size:1rem;color:var(--text-muted);transition:all var(--duration-hover) var(--ease-spring)}.overlay-stepper__diamond:hover{background:color-mix(in srgb,var(--glass-highlight) 100%,rgb(255 255 255 / .06));color:var(--text-primary);transform:translateY(-1px)}.overlay-stepper__diamond--active{color:var(--accent-primary);border-color:color-mix(in srgb,var(--accent-primary) 40%,transparent);background:color-mix(in srgb,var(--accent-primary) 8%,var(--glass-bg));box-shadow:0 0 10px -2px var(--glow-accent)}.overlay-stepper__diamond--active:hover{background:color-mix(in srgb,var(--accent-primary) 15%,var(--glass-bg));box-shadow:0 0 14px -2px var(--glow-accent)}.key-scale-panel{display:flex;flex-direction:column;gap:var(--space-3)}.key-scale-panel__divider{height:1px;background:var(--glass-border);opacity:.5;flex-shrink:0}.key-scale-panel__scale-column{min-width:0;max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:var(--space-2-5);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-muted) 30%,transparent) transparent}.key-scale-panel__scale-column::-webkit-scrollbar{width:4px}.key-scale-panel__scale-column::-webkit-scrollbar-track{background:transparent}.key-scale-panel__scale-column::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-muted) 30%,transparent);border-radius:2px}.key-scale-panel__section-label{display:flex;align-items:center;gap:var(--space-1);font-size:var(--info-subsection-size);font-weight:var(--info-subsection-weight);letter-spacing:var(--info-subsection-tracking);text-transform:uppercase;color:var(--info-subsection-color);margin-bottom:var(--space-2-5);background:none;border:none;padding:0;cursor:default}.key-scale-panel__key-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.key-scale-panel__key-btn{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:var(--text-base);font-weight:var(--font-weight-bold);padding:0;--accidental-font-size: .75em;--accidental-top: -.15em}.key-scale-panel__scale-columns{display:flex;gap:var(--space-3)}.key-scale-panel__scale-col{flex:1;min-width:0}.key-scale-panel__scale-group{margin-bottom:var(--space-3)}.key-scale-panel__scale-group:last-child{margin-bottom:0}.key-scale-panel__group-label{display:block;font-size:var(--info-help-size);font-weight:var(--info-subsection-weight);letter-spacing:var(--info-subsection-tracking);text-transform:uppercase;color:var(--info-subsection-color);margin-bottom:var(--space-1-5)}.key-scale-panel__scale-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);padding:var(--space-1-5) var(--space-2);margin-bottom:var(--space-1-5);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.key-scale-panel__scale-btn:last-child{margin-bottom:0}.system-position-panel{display:flex;flex-direction:column;gap:var(--space-3)}.system-position-panel__toggle{padding:0}.system-position-panel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2-5)}.system-position-panel__pos-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1-5);min-height:48px;font-size:var(--text-base);font-weight:var(--font-weight-semibold);padding:var(--space-2) var(--space-1-5)}.system-position-panel__dot{width:8px;height:8px;border-radius:9999px;background:var(--position-color);flex-shrink:0}.system-position-panel__arrow{font-size:.75em;opacity:.7;margin-left:-4px}.selector-pill--root{border-color:var(--selector-root-outline);background:var(--selector-root-tint)}.selector-pill--position{border-color:var(--selector-position-outline);background:var(--selector-position-tint)}.selector-panel-dropdown{background:var(--dropdown-bg);border-radius:var(--radius-xl);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);padding:var(--space-4)}.selector-panel-dropdown .key-scale-panel{flex-direction:row;gap:var(--space-4)}.selector-panel-dropdown .key-scale-panel__key-column{flex-shrink:0}.selector-panel-dropdown .key-scale-panel__divider{width:1px;height:auto}.selector-panel-dropdown .key-scale-panel__scale-column{flex:1;max-height:none;overflow-y:visible}.selector-panel-dropdown .key-scale-panel__key-btn{min-height:40px;min-width:40px;font-size:.9375rem}.selector-panel-dropdown .key-scale-panel__scale-btn{min-height:28px;min-width:140px;font-size:var(--text-2xs);text-align:left;justify-content:flex-start;border-radius:var(--radius-md)}.selector-panel-dropdown .system-position-panel__pos-btn{min-height:40px;font-size:.9375rem}