*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#151a1f;--bg-secondary:#1b2026;--bg-tertiary:#222832;--surface-1:#1b2026;--surface-2:#222832;--surface-3:#2a3140;--accent-primary:#5a7ba6;--accent-primary-dark:#3c5678;--accent-secondary:#7f9cc2;--accent-primary-rgb:90,123,166;--accent-secondary-rgb:127,156,194;--text-primary:#d1d5db;--text-secondary:#aeb6c2;--text-muted:#778199;--border-color:#232a35;--shadow-color:#02060c80;--gradient-primary:linear-gradient(180deg,rgba(var(--accent-primary-rgb),.14),rgba(var(--accent-primary-rgb),.12));--gradient-secondary:linear-gradient(180deg,#ffffff05,#0000);--spacing-xs:3px;--spacing-sm:6px;--spacing-md:10px;--spacing-lg:14px;--spacing-xl:18px;--spacing-2xl:22px;--border-radius-sm:5px;--border-radius-md:8px;--border-radius-lg:10px;--border-radius-xl:12px;--font-size-xs:.75rem;--font-size-sm:.85rem;--font-size-md:1rem;--font-size-lg:1.05rem;--font-size-xl:1.35rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--component-padding:var(--spacing-md);--component-gap:var(--spacing-md);--container-max-width:1080px;--button-padding:calc(var(--spacing-sm) + 1px)var(--spacing-lg);--input-padding:var(--spacing-md)var(--spacing-lg);--transition-fast:all .12s ease;--transition-normal:all .2s ease;--control-xs:28px;--control-sm:32px;--control-md:36px;--control-lg:44px;--control-xl:48px;--icon-sm:16px;--icon-md:18px;--icon-lg:20px;--icon-xl:24px;--color-purple-primary:#667eea;--color-purple-secondary:#764ba2;--color-wood-light:#f1f0eb;--color-wood-dark:#e9e7df;--color-string-light:#8b7355;--color-string-dark:#6b5d4f;--color-fret-line:#5a5f66;--color-grey-dark:#1e232a;--color-overlay-light:#ffffff08;--color-overlay-medium:#ffffff0f;--color-overlay-strong:#ffffff1a;--spacing-3xl:28px;--spacing-4xl:36px;--spacing-5xl:44px;--spacing-6xl:56px;--spacing-7xl:72px;--spacing-8xl:120px;--font-size-2xs:.6rem;--font-size-xxs:.65rem;--font-size-2xl:1.2rem;--font-size-3xl:1.3rem;--font-size-4xl:1.4rem;--font-size-5xl:1.5rem;--font-size-6xl:1.85rem;--font-size-7xl:2.25rem;--font-size-8xl:2.5rem;--font-size-9xl:3rem;--font-size-10xl:3.5rem;--font-weight-bold:700;--font-weight-extrabold:800;--line-height-tight:1.15;--line-height-snug:1.25;--line-height-normal:1.45;--line-height-relaxed:1.6;--line-height-loose:1.75;--border-radius-xs:4px;--border-radius-2xl:20px;--border-radius-3xl:24px;--diagram-min-width:150px;--diagram-max-width:180px;--diagram-card-padding:8px;--diagram-gap:12px;--finger-dot-size:16px;--barre-height:var(--finger-dot-size);--barre-radius:10px;--fret-number-width:12px;--string-marker-height:20px;--fret-line-height:2px;--string-line-width:2px;--chord-button-min-width:32px;--chord-button-min-height:32px;--dropdown-height:var(--control-md);--dropdown-root-width:80px;--dropdown-type-width:120px;--gradient-purple:linear-gradient(180deg,#667eea1f,#764ba21f);--gradient-wood:linear-gradient(to bottom,#f1f0eb,#e9e7df);--gradient-string:linear-gradient(to bottom,#8b7355,#6b5d4f,#8b7355);--gradient-finger-dot:linear-gradient(180deg,var(--accent-primary),var(--accent-primary));--gradient-hero:linear-gradient(180deg,#ffffff05,#0000);--gradient-notation-bg:linear-gradient(180deg,#667eea1f,#764ba21f);--gradient-notation-bg-hover:linear-gradient(180deg,#667eea2e,#764ba22e);--shadow-xs:0 1px 1px #00000059;--shadow-sm:0 1.5px 3px #0000004d;--shadow-md:0 3px 8px #00000052;--shadow-lg:0 6px 16px #00000059;--shadow-xl:0 8px 20px #00000061;--shadow-2xl:0 10px 28px #0006;--shadow-3xl:0 16px 40px #00000073;--shadow-button:0 2px 8px #00000040;--shadow-button-hover:0 4px 12px #00000047;--shadow-button-active:0 1px 3px #00000042;--shadow-card:0 1px 0 #ffffff05,0 6px 16px #00000047;--shadow-card-hover:0 1px 0 #ffffff05,0 10px 20px #00000052;--shadow-finger-dot:0 1px 2px #0006;--shadow-notation:0 2px 8px #00000042,inset 0 1px 0 #ffffff0f;--shadow-notation-hover:0 3px 10px #0000004d,inset 0 1px 0 #ffffff14;--shadow-logo:none;--transition-slow:all .28s ease;--transition-bounce:transform .22s cubic-bezier(.22,1,.36,1);--transition-smooth:all .18s cubic-bezier(.4,0,.2,1);--transition-button:all .16s cubic-bezier(.4,0,.2,1);--transition-card:all .22s cubic-bezier(.25,.46,.45,.94);--transform-hover-lift:translateY(-1px);--transform-hover-scale:none;--transform-active-scale:none;--transform-button-hover:translateY(-1px);--transform-button-active:translateY(0);--transform-card-hover:translateY(-4px);--dropdown-border:1px solid #ffffff1f;--dropdown-background:#ffffff08;--dropdown-background-hover:#ffffff0f;--dropdown-border-hover:#ffffff2e;--z-base:1;--z-low:2;--z-medium:5;--z-high:6;--z-higher:10;--z-overlay:50;--z-sidebar:100;--z-header:998;--z-dropdown:1000;--z-modal:2000;--z-tooltip:3000;--layout-vertical-display:grid;--layout-horizontal-display:none;--error-text:#ff6b6b}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;font-size:16px;line-height:1.6}@media (min-width:1024px){:root{--layout-vertical-display:none;--layout-horizontal-display:grid}}