@font-face{font-family:Rufina;font-style:normal;font-weight:400;font-display:swap;src:url(../media/714e3253ffd8e086-s.p.0ju5ynfpt5q76.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Rufina;font-style:normal;font-weight:400;font-display:swap;src:url(../media/1bee532e5bf2fd31-s.p.0x435-pyjpaxc.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Rufina;font-style:normal;font-weight:700;font-display:swap;src:url(../media/904c9811680a2757-s.p.1jl9dn-1t12-3.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Rufina;font-style:normal;font-weight:700;font-display:swap;src:url(../media/5586ccf4be9b21a8-s.p.2j24kbe7knbiq.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Rufina Fallback;src:local(Times New Roman);ascent-override:82.38%;descent-override:25.28%;line-gap-override:0.0%;size-adjust:114.71%}.rufina_780cd8d5-module__Z69IMa__className{font-family:Rufina,Rufina Fallback;font-style:normal}.rufina_780cd8d5-module__Z69IMa__variable{--font-rufina:"Rufina", "Rufina Fallback"}
@font-face{font-family:Playfair Display;font-style:normal;font-weight:400;font-display:swap;src:url(../media/65c558afe41e89d6-s.013x9cty0dvbp.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Playfair Display;font-style:normal;font-weight:400;font-display:swap;src:url(../media/14e23f9b59180572-s.054a9rxhye2rx.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Playfair Display;font-style:normal;font-weight:400;font-display:swap;src:url(../media/b49b0d9b851e4899-s.12c_00cnxx2oq.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Playfair Display;font-style:normal;font-weight:400;font-display:swap;src:url(../media/2a65768255d6b625-s.2r-cuu_7locvx.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Playfair Display;font-style:normal;font-weight:700;font-display:swap;src:url(../media/65c558afe41e89d6-s.013x9cty0dvbp.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Playfair Display;font-style:normal;font-weight:700;font-display:swap;src:url(../media/14e23f9b59180572-s.054a9rxhye2rx.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Playfair Display;font-style:normal;font-weight:700;font-display:swap;src:url(../media/b49b0d9b851e4899-s.12c_00cnxx2oq.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Playfair Display;font-style:normal;font-weight:700;font-display:swap;src:url(../media/2a65768255d6b625-s.2r-cuu_7locvx.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Playfair Display Fallback;src:local(Times New Roman);ascent-override:97.25%;descent-override:22.56%;line-gap-override:0.0%;size-adjust:111.26%}.playfair_display_33bb92a-module__aUwrCq__className{font-family:Playfair Display,Playfair Display Fallback;font-style:normal}.playfair_display_33bb92a-module__aUwrCq__variable{--font-playfair:"Playfair Display", "Playfair Display Fallback"}
@font-face{font-family:Mulish;font-style:normal;font-weight:400;font-display:swap;src:url(../media/817e411a5e01ed4b-s.3mmhyaxk8nf40.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Mulish;font-style:normal;font-weight:400;font-display:swap;src:url(../media/69c910a8dbdebe03-s.2csjwd2kj9786.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Mulish;font-style:normal;font-weight:400;font-display:swap;src:url(../media/4aa1cac135eb7d75-s.p.31_j8g9fmg02t.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Mulish;font-style:normal;font-weight:400;font-display:swap;src:url(../media/59000b645a38f9c6-s.0eweg9n4xoxd5.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Mulish;font-style:normal;font-weight:400;font-display:swap;src:url(../media/fed68dff3ca987ed-s.p.12-p1fgtf6kxs.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url(../media/817e411a5e01ed4b-s.3mmhyaxk8nf40.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url(../media/69c910a8dbdebe03-s.2csjwd2kj9786.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url(../media/4aa1cac135eb7d75-s.p.31_j8g9fmg02t.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url(../media/59000b645a38f9c6-s.0eweg9n4xoxd5.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url(../media/fed68dff3ca987ed-s.p.12-p1fgtf6kxs.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url(../media/817e411a5e01ed4b-s.3mmhyaxk8nf40.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url(../media/69c910a8dbdebe03-s.2csjwd2kj9786.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url(../media/4aa1cac135eb7d75-s.p.31_j8g9fmg02t.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url(../media/59000b645a38f9c6-s.0eweg9n4xoxd5.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url(../media/fed68dff3ca987ed-s.p.12-p1fgtf6kxs.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url(../media/817e411a5e01ed4b-s.3mmhyaxk8nf40.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url(../media/69c910a8dbdebe03-s.2csjwd2kj9786.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url(../media/4aa1cac135eb7d75-s.p.31_j8g9fmg02t.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url(../media/59000b645a38f9c6-s.0eweg9n4xoxd5.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url(../media/fed68dff3ca987ed-s.p.12-p1fgtf6kxs.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Mulish Fallback;src:local(Arial);ascent-override:96.56%;descent-override:24.02%;line-gap-override:0.0%;size-adjust:104.08%}.mulish_1ef6e3fc-module__oXgaPa__className{font-family:Mulish,Mulish Fallback;font-style:normal}.mulish_1ef6e3fc-module__oXgaPa__variable{--font-mulish:"Mulish", "Mulish Fallback"}
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#080302;--surface:#140b06;--surface-raised:#231810;--surface-high:#33261d;--surface-sunken:#0c0603;--surface-solid:#0f0703;--header-bg:#080302eb;--scrim:#0101008c;--brand:#cc8730;--brand-dim:#8c5d2b;--brand-hover:#e39938;--brand-glow:#cc873033;--brand-strong:#c06f0a;--on-brand:#0d0603;--brand-tint:#cc87301a;--brand-tint-strong:#cc873026;--brand-tint-track:#cc873052;--brand-ring-soft:#cc873061;--brand-ring:#cc873080;--text-primary:#e6e0d9;--text-secondary:#92877b;--text-muted:#4f453e;--border:#2d211a;--border-subtle:#1d140e;--accent-minor:#0968a2;--on-accent-minor:#e9e4dd;--success:#5ab66b;--danger:#db6c66;--danger-ring:#b14e4999;--mute-mark:#7c4243;--diff-easy:#5ab66b;--diff-medium:#d7a03d;--diff-hard:#d86357;--shadow-sm:0 2px 8px #00000073;--shadow-sheet:0 20px 44px -26px #000000f2;--shadow-brand:0 0 0 1px #cc873014, 0 18px 46px -28px #cc873080;--beat-mid:#625245;--beat-mid-active:#be9e7c;--beat-off-ring:#3b3029;--beat-pulse:#cc87308c;--slider-thumb:#f0e6da;--fret-bg:#0a0503;--fret-edge:#0a0503;--fret-line:#2d1a11;--fret-string:#503223;--fret-position:#b09a84;--fret-finger-text:#140b06;--fret-tuning:#413933;--fret-note-on:#7e7269;--fret-note-off:#332c28;--piano-frame:#0a0503;--piano-white:#d7d3cf;--piano-black:#0b0604;--piano-edge:#040201;--piano-ink:#0c0806;--piano-label:#39312c;--chord-major-bg:#2b1401;--chord-major-text:#e9e4dd;--chord-major-accent:#e28e3a;--chord-major-dot:#d2833b;--chord-major-border:#d2833b47;--chord-major-glow:#2b140166;--chord-minor-bg:#011322;--chord-minor-text:#e9e4dd;--chord-minor-accent:#4999d6;--chord-minor-dot:#418dc2;--chord-minor-border:#418dc247;--chord-minor-glow:#01132266;--chord-dim-bg:#160c1f;--chord-dim-text:#e9e4dd;--chord-dim-accent:#9777af;--chord-dim-dot:#8b6aa8;--chord-dim-border:#8b6aa847;--chord-dim-glow:#160c1f66;--chord-dom-bg:#270e06;--chord-dom-text:#e9e4dd;--chord-dom-accent:#f28058;--chord-dom-dot:#dc7352;--chord-dom-border:#dc735247;--chord-dom-glow:#270e0666;--chord-aug-bg:#26080c;--chord-aug-text:#e9e4dd;--chord-aug-accent:#e66d75;--chord-aug-dot:#d0616c;--chord-aug-border:#d0616c47;--chord-aug-glow:#26080c66;--chord-sus-bg:#001612;--chord-sus-text:#e9e4dd;--chord-sus-accent:#3eb59e;--chord-sus-dot:#3da38d;--chord-sus-border:#3da38d47;--chord-sus-glow:#00161266;--chord-power-bg:#1f1610;--chord-power-text:#e9e4dd;--chord-power-accent:#c0a589;--chord-power-dot:#aa947f;--chord-power-border:#aa947f47;--chord-power-glow:#1f161066;--chord-on-accent:#140b06;--illus-bg:#080302;--illus-hub:#0f0703;--illus-ink:#33261d;--illus-ink-soft:#231810;--illus-text:#e6e0d9;--illus-text-dim:#7b6f66;--illus-accent:#c06f0a8c;--illus-accent-soft:#c06f0a59;--font-serif:var(--font-rufina), Georgia, "Times New Roman", serif;--font-sans:var(--font-mulish), system-ui, -apple-system, sans-serif;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1)}@supports (color:lab(0% 0 0)){:root{--bg:lab(1.184% .973254 1.1265);--surface:lab(3.64968% 2.70799 3.22317);--surface-raised:lab(9.42274% 5.12523 7.31011);--surface-high:lab(16.3791% 5.472 8.59009);--surface-sunken:lab(1.95597% 1.53025 1.79566);--surface-solid:lab(2.44118% 1.99535 2.31321);--header-bg:lab(1.184% .973254 1.1265/.92);--scrim:lab(.19046% .218391 .203586/.55);--brand:lab(62.5737% 22.0084 55.2986);--brand-dim:lab(44.0729% 16.2251 36.0803);--brand-hover:lab(69.5421% 22.9437 59.8226);--brand-glow:lab(62.5737% 22.0084 55.2986/.2);--brand-strong:lab(55.3689% 28.574 60.5715);--on-brand:lab(1.95374% 1.63529 1.88309);--brand-tint:lab(62.5737% 22.0084 55.2986/.1);--brand-tint-strong:lab(62.5737% 22.0084 55.2986/.15);--brand-tint-track:lab(62.5737% 22.0084 55.2986/.32);--brand-ring-soft:lab(62.5737% 22.0084 55.2986/.38);--brand-ring:lab(62.5737% 22.0084 55.2986/.5);--text-primary:lab(89.5799% 1.05247 4.45036);--text-secondary:lab(57.0735% 2.91941 7.93207);--text-muted:lab(30.3514% 3.3581 5.97387);--border:lab(14.0765% 4.59485 7.2266);--border-subtle:lab(7.16178% 3.64425 4.73303);--accent-minor:lab(41.6524% -8.42245 -38.6632);--on-accent-minor:lab(90.7369% .870407 3.7042);--success:lab(66.9531% -41.0222 29.459);--danger:lab(59.1936% 43.8272 24.9677);--danger-ring:lab(46.5223% 40.7876 23.5147/.6);--mute-mark:lab(35.3734% 25.5465 11.2872);--diff-easy:lab(66.9531% -41.0222 29.459);--diff-medium:lab(69.8324% 14.6789 57.1886);--diff-hard:lab(56.8247% 46.3547 30.3597);--shadow-sm:0 2px 8px lab(0% 0 0/.45);--shadow-sheet:0 20px 44px -26px lab(0% 0 0/.95);--shadow-brand:0 0 0 1px lab(62.5737% 22.0084 55.2986/.08), 0 18px 46px -28px lab(62.5737% 22.0084 55.2986/.5);--beat-mid:lab(36.1245% 5.4511 10.3029);--beat-mid-active:lab(67.4621% 8.70276 22.3434);--beat-off-ring:lab(21.0619% 3.80844 6.70703);--beat-pulse:lab(62.5737% 22.0084 55.2986/.55);--slider-thumb:lab(91.9105% 1.80176 7.44995);--fret-bg:lab(1.53507% 1.19998 1.17804);--fret-edge:lab(1.53507% 1.19998 1.17804);--fret-line:lab(11.6191% 9.04594 9.93294);--fret-string:lab(24.3131% 12.3682 15.5147);--fret-position:lab(65.1757% 5.53933 14.6197);--fret-finger-text:lab(3.6335% 3.07374 2.96343);--fret-tuning:lab(24.5498% 3.00547 4.80327);--fret-note-on:lab(48.9172% 3.49152 6.74278);--fret-note-off:lab(18.7603% 2.39711 3.83672);--piano-frame:lab(1.53507% 1.19998 1.17804);--piano-white:lab(84.9206% .878125 2.48811);--piano-black:lab(1.96623% 1.02954 1.32936);--piano-edge:lab(.648947% .463441 .489214);--piano-ink:lab(2.46195% .968128 1.31802);--piano-label:lab(21.0692% 3.01813 4.81388);--chord-major-bg:lab(9.28526% 11.0727 13.607);--chord-major-text:lab(90.7369% .870407 3.7042);--chord-major-accent:lab(67.0175% 27.7833 56.3911);--chord-major-dot:lab(62.3677% 26.8826 50.8344);--chord-major-border:lab(62.3677% 26.8826 50.8344/.28);--chord-major-glow:lab(9.28526% 11.0727 13.607/.4);--chord-minor-bg:lab(5.20781% -2.55784 -11.9964);--chord-minor-text:lab(90.7369% .870407 3.7042);--chord-minor-accent:lab(60.3268% -10.8241 -39.0234);--chord-minor-dot:lab(55.7771% -11.3903 -35.1902);--chord-minor-border:lab(55.7771% -11.3903 -35.1902/.28);--chord-minor-glow:lab(5.20781% -2.55784 -11.9964/.4);--chord-dim-bg:lab(4.83817% 7.46425 -10.4381);--chord-dim-text:lab(90.7369% .870407 3.7042);--chord-dim-accent:lab(54.6842% 21.0399 -25.168);--chord-dim-dot:lab(49.8855% 22.9431 -28.625);--chord-dim-border:lab(49.8855% 22.9431 -28.625/.28);--chord-dim-glow:lab(4.83817% 7.46425 -10.4381/.4);--chord-dom-bg:lab(6.89551% 12.7034 8.00222);--chord-dom-text:lab(90.7369% .870407 3.7042);--chord-dom-accent:lab(66.382% 42.1287 42.1763);--chord-dom-dot:lab(60.614% 40.0734 37.5035);--chord-dom-border:lab(60.614% 40.0734 37.5035/.28);--chord-dom-glow:lab(6.89551% 12.7034 8.00222/.4);--chord-aug-bg:lab(5.74553% 15.0844 3.99874);--chord-aug-text:lab(90.7369% .870407 3.7042);--chord-aug-accent:lab(61.2816% 48.2794 19.4267);--chord-aug-dot:lab(55.5548% 45.3077 16.1606);--chord-aug-border:lab(55.5548% 45.3077 16.1606/.28);--chord-aug-glow:lab(5.74553% 15.0844 3.99874/.4);--chord-sus-bg:lab(5.66239% -9.64285 .336409);--chord-sus-text:lab(90.7369% .870407 3.7042);--chord-sus-accent:lab(66.5992% -38.4703 1.15689);--chord-sus-dot:lab(60.6871% -34.9455 2.37257);--chord-sus-border:lab(60.6871% -34.9455 2.37257/.28);--chord-sus-glow:lab(5.66239% -9.64285 .336409/.4);--chord-power-bg:lab(8.31061% 3.34629 5.50739);--chord-power-text:lab(90.7369% .870407 3.7042);--chord-power-accent:lab(69.8025% 7.05627 18.4043);--chord-power-dot:lab(62.8368% 5.97942 14.4208);--chord-power-border:lab(62.8368% 5.97942 14.4208/.28);--chord-power-glow:lab(8.31061% 3.34629 5.50739/.4);--chord-on-accent:lab(3.64968% 2.70799 3.22317);--illus-bg:lab(1.184% .973254 1.1265);--illus-hub:lab(2.43856% 2.11833 2.41326);--illus-ink:lab(16.3791% 5.472 8.59009);--illus-ink-soft:lab(9.42274% 5.12523 7.31011);--illus-text:lab(89.5799% 1.05247 4.45036);--illus-text-dim:lab(47.7571% 3.49459 6.74518);--illus-accent:lab(55.3689% 28.574 60.5715/.55);--illus-accent-soft:lab(55.3689% 28.574 60.5715/.35)}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f9f5ef;--surface:#fefdfa;--surface-raised:#f4eee6;--surface-high:#ebe1d6;--surface-sunken:#f1ece4;--surface-solid:#fefdfa;--header-bg:#f9f5efe0;--scrim:#3a2a2052;--brand:#8f3c00;--brand-dim:#b7743d;--brand-hover:#732c00;--brand-glow:#8f3c002e;--brand-strong:#9b4800;--on-brand:#fdfaf4;--brand-tint:#8f3c0017;--brand-tint-strong:#8f3c0024;--brand-tint-track:#8f3c0047;--brand-ring-soft:#8f3c0052;--brand-ring:#8f3c007a;--text-primary:#2c1b12;--text-secondary:#5d4c40;--text-muted:#807165;--border:#d4c8bd;--border-subtle:#e3dbd2;--accent-minor:#005799;--on-accent-minor:#f4f9fe;--success:#1d7635;--danger:#a5292b;--danger-ring:#bd413f8c;--mute-mark:#9a504e;--diff-easy:#257c3a;--diff-medium:#af7100;--diff-hard:#b6322b;--shadow-sm:0 2px 8px #684f4133;--shadow-sheet:0 20px 44px -26px #5e402f59;--shadow-brand:0 0 0 1px #8f3c001f, 0 18px 46px -28px #8f3c0073;--beat-mid:#b5a08f;--beat-mid-active:#a06e3f;--beat-off-ring:#d1c5ba;--beat-pulse:#8f3c0073;--slider-thumb:#fefdfb;--fret-bg:#f8f3e9;--fret-edge:#d6c8ba;--fret-line:#b09a89;--fret-string:#947a6a;--fret-position:#6b4e39;--fret-finger-text:#fdfaf4;--fret-tuning:#a2968c;--fret-note-on:#584a40;--fret-note-off:#b2a9a1;--piano-frame:#523d33;--piano-white:#fefdfa;--piano-black:#271d17;--piano-edge:#89766a;--piano-ink:#1e130e;--piano-label:#b9a798;--chord-major-bg:#ffe4c9;--chord-major-text:#3a1e0e;--chord-major-accent:#8d4400;--chord-major-dot:#a05000;--chord-major-border:#a0500066;--chord-major-glow:#a050002e;--chord-minor-bg:#d7ecff;--chord-minor-text:#152a41;--chord-minor-accent:#005a9d;--chord-minor-dot:#0066ac;--chord-minor-border:#0066ac66;--chord-minor-glow:#0066ac2e;--chord-dim-bg:#f3e2fd;--chord-dim-text:#31213b;--chord-dim-accent:#6c4289;--chord-dim-dot:#794b9b;--chord-dim-border:#794b9b66;--chord-dim-glow:#794b9b2e;--chord-dom-bg:#ffe3d6;--chord-dom-text:#3e2015;--chord-dom-accent:#9d3800;--chord-dom-dot:#ad4216;--chord-dom-border:#ad421666;--chord-dom-glow:#ad42162e;--chord-aug-bg:#ffe1df;--chord-aug-text:#421b1d;--chord-aug-accent:#a52932;--chord-aug-dot:#b23641;--chord-aug-border:#b2364166;--chord-aug-glow:#b236412e;--chord-sus-bg:#cff2ea;--chord-sus-text:#052d27;--chord-sus-accent:#006557;--chord-sus-dot:#007260;--chord-sus-border:#00726066;--chord-sus-glow:#0072602e;--chord-power-bg:#f4e7da;--chord-power-text:#32261d;--chord-power-accent:#6d523b;--chord-power-dot:#7a5c42;--chord-power-border:#7a5c4266;--chord-power-glow:#7a5c422e;--chord-on-accent:#fdfaf4;--illus-bg:#fefcf9;--illus-hub:#f1e6da;--illus-ink:#bca695;--illus-ink-soft:#dccec0;--illus-text:#35251b;--illus-text-dim:#776558;--illus-accent:#9b48009e;--illus-accent-soft:#9b48004d}@supports (color:lab(0% 0 0)){:root[data-theme=light]{--bg:lab(96.7821% .414193 3.41135);--surface:lab(99.2045% .107348 1.52054);--surface-raised:lab(94.4565% 1.06761 4.84345);--surface-high:lab(90.147% 2.11754 6.52092);--surface-sunken:lab(93.5324% .844002 4.5035);--surface-solid:lab(99.2045% .107348 1.52054);--header-bg:lab(96.7821% .414193 3.41135/.88);--scrim:lab(18.6508% 6.98864 9.29691/.32);--brand:lab(36.3236% 39.548 67.1627);--brand-dim:lab(55.4604% 23.4336 41.0686);--brand-hover:lab(28.0753% 41.7109 58.6725);--brand-glow:lab(36.3236% 39.548 67.1627/.18);--brand-strong:lab(41.0414% 38.1252 69.1153);--on-brand:lab(98.2924% .224292 3.04729);--brand-tint:lab(36.3236% 39.548 67.1627/.09);--brand-tint-strong:lab(36.3236% 39.548 67.1627/.14);--brand-tint-track:lab(36.3236% 39.548 67.1627/.28);--brand-ring-soft:lab(36.3236% 39.548 67.1627/.32);--brand-ring:lab(36.3236% 39.548 67.1627/.48);--text-primary:lab(11.659% 7.87105 9.55598);--text-secondary:lab(33.7645% 6.3125 9.63665);--text-muted:lab(48.9009% 4.60428 8.81865);--border:lab(81.427% 2.95749 7.42083);--border-subtle:lab(87.8335% 1.58548 5.48986);--accent-minor:lab(35.4663% -2.02532 -43.501);--on-accent-minor:lab(97.6736% -.878602 -2.85898);--success:lab(43.5947% -38.335 28.0827);--danger:lab(38.0642% 50.5966 31.1519);--danger-ring:lab(46.203% 50.4327 30.0437/.55);--mute-mark:lab(43.3097% 31.6913 15.5771);--diff-easy:lab(45.9201% -38.2911 27.9475);--diff-medium:lab(53.3587% 20.0533 60.9969);--diff-hard:lab(42.6627% 53.1093 37.3843);--shadow-sm:0 2px 8px lab(36.0052% 9.24304 12.3035/.2);--shadow-sheet:0 20px 44px -26px lab(30.1399% 11.8518 15.7872/.35);--shadow-brand:0 0 0 1px lab(36.3236% 39.548 67.1627/.12), 0 18px 46px -28px lab(36.3236% 39.548 67.1627/.45);--beat-mid:lab(67.4553% 5.86551 12.1183);--beat-mid-active:lab(50.9973% 17.1813 34.1599);--beat-off-ring:lab(80.2493% 3.23218 6.8307);--beat-pulse:lab(36.3236% 39.548 67.1627/.45);--slider-thumb:lab(99.4324% .0796318 1.13986);--fret-bg:lab(95.9856% .665784 5.32092);--fret-edge:lab(81.4344% 3.28326 8.98751);--fret-line:lab(65.1034% 6.56867 11.6492);--fret-string:lab(53.4559% 8.21132 12.9866);--fret-position:lab(36.0271% 10.0278 17.3694);--fret-finger-text:lab(98.2924% .224292 3.04729);--fret-tuning:lab(62.8388% 3.46163 6.71998);--fret-note-on:lab(32.6482% 4.74434 8.36835);--fret-note-off:lab(69.8177% 2.40985 5.11293);--piano-frame:lab(27.8807% 8.65737 10.1149);--piano-white:lab(99.3205% .107318 1.52054);--piano-black:lab(11.7437% 4.60246 6.12985);--piano-edge:lab(51.1573% 6.47399 9.28635);--piano-ink:lab(7.13384% 4.51558 4.89488);--piano-label:lab(69.7876% 4.96933 10.3383);--chord-major-bg:lab(92.4322% 6.87698 18.2313);--chord-major-text:lab(15.0331% 12.3057 16.2594);--chord-major-accent:lab(37.6953% 34.0718 66.3086);--chord-major-dot:lab(43.4492% 36.319 72.1641);--chord-major-border:lab(43.4492% 36.319 72.1641/.4);--chord-major-glow:lab(43.4492% 36.319 72.1641/.18);--chord-minor-bg:lab(92.4233% -4.63364 -14.5951);--chord-minor-text:lab(16.2729% -2.18742 -17.1845);--chord-minor-accent:lab(36.6423% -2.33193 -43.5277);--chord-minor-dot:lab(41.3211% -4.35396 -46.2758);--chord-minor-border:lab(41.3211% -4.35396 -46.2758/.4);--chord-minor-glow:lab(41.3211% -4.35396 -46.2758/.18);--chord-dim-bg:lab(91.9495% 9.30622 -11.0909);--chord-dim-text:lab(15.7688% 12.1763 -13.5011);--chord-dim-accent:lab(35.5382% 29.3827 -33.0516);--chord-dim-dot:lab(40.0305% 31.4468 -36.3157);--chord-dim-border:lab(40.0305% 31.4468 -36.3157/.4);--chord-dim-glow:lab(40.0305% 31.4468 -36.3157/.18);--chord-dom-bg:lab(92.203% 11.5694 13.5588);--chord-dom-text:lab(16.11% 13.8994 13.6698);--chord-dom-accent:lab(38.4876% 42.727 53.9448);--chord-dom-dot:lab(43.1087% 43.1704 47.3617);--chord-dom-border:lab(43.1087% 43.1704 47.3617/.4);--chord-dom-glow:lab(43.1087% 43.1704 47.3617/.18);--chord-aug-bg:lab(91.9905% 15.0624 7.09238);--chord-aug-text:lab(15.8412% 19.3105 7.75072);--chord-aug-accent:lab(38.0132% 51.0695 27.0706);--chord-aug-dot:lab(42.6275% 51.2958 24.0558);--chord-aug-border:lab(42.6275% 51.2958 24.0558/.4);--chord-aug-glow:lab(42.6275% 51.2958 24.0558/.18);--chord-sus-bg:lab(92.9372% -12.9561 -.117671);--chord-sus-text:lab(15.8846% -15.7457 -.117546);--chord-sus-accent:lab(37.4544% -35.4634 -.240988);--chord-sus-dot:lab(42.2385% -39.1363 1.17921);--chord-sus-border:lab(42.2385% -39.1363 1.17921/.4);--chord-sus-glow:lab(42.2385% -39.1363 1.17921/.18);--chord-power-bg:lab(92.4571% 2.85253 7.88212);--chord-power-text:lab(16.3997% 4.90281 8.53703);--chord-power-accent:lab(37.2304% 9.06281 18.0799);--chord-power-dot:lab(41.8566% 9.9846 19.9106);--chord-power-border:lab(41.8566% 9.9846 19.9106/.4);--chord-power-glow:lab(41.8566% 9.9846 19.9106/.18);--chord-on-accent:lab(98.2924% .224292 3.04729);--illus-bg:lab(99.0925% .13572 1.90161);--illus-hub:lab(91.8966% 2.14058 7.33827);--illus-ink:lab(69.7601% 6.20505 11.8773);--illus-ink-soft:lab(83.7547% 3.27861 8.98405);--illus-text:lab(16.3289% 7.02423 9.3441);--illus-text-dim:lab(44.2345% 5.68119 10.0308);--illus-accent:lab(41.0414% 38.1252 69.1153/.62);--illus-accent-soft:lab(41.0414% 38.1252 69.1153/.3)}}:root[data-theme-switching] *,:root[data-theme-switching] :before,:root[data-theme-switching] :after{transition:background-color .28s var(--ease-in-out), border-color .28s var(--ease-in-out), color .28s var(--ease-in-out), fill .28s var(--ease-in-out), stroke .28s var(--ease-in-out), box-shadow .28s var(--ease-in-out)!important}@media (prefers-reduced-motion:reduce){:root[data-theme-switching] *,:root[data-theme-switching] :before,:root[data-theme-switching] :after{transition:none!important}}html:lang(vi){--font-serif:var(--font-playfair), Georgia, "Times New Roman", serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;padding-bottom:max(0px, env(safe-area-inset-bottom));line-height:1.65}img,svg{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}a{color:inherit;text-decoration:none}.serif{font-family:var(--font-serif)}.sans{font-family:var(--font-sans)}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{opacity:.4}50%{opacity:.8}to{opacity:.4}}.site-header{z-index:50;background:var(--header-bg);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0}.site-header-inner{max-width:1200px;padding:var(--space-4) var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);margin:0 auto;display:flex}.site-logo{font-family:var(--font-serif);color:var(--text-primary);letter-spacing:-.01em;align-items:center;gap:var(--space-2);font-size:1.25rem;font-weight:700;display:flex}.site-logo-dot{background:var(--brand);border-radius:50%;flex-shrink:0;width:7px;height:7px}.site-nav{align-items:center;gap:var(--space-1);display:flex}.nav-link{color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);white-space:nowrap;font-size:.875rem;font-weight:500;transition:color .15s,background .15s}.nav-link:hover{color:var(--text-primary);background:var(--surface)}.nav-link.active{color:var(--brand);background:var(--brand-tint)}.home-page{flex-direction:column;min-height:100vh;display:flex}.hero-section{max-width:1200px;padding:var(--space-10) var(--space-6) var(--space-8);align-items:flex-start;gap:var(--space-6);flex-direction:column;flex:1;margin:0 auto;display:flex}@media (min-width:768px){.hero-section{padding:var(--space-16) var(--space-8) var(--space-12);gap:var(--space-8)}}.hero-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--brand);align-items:center;gap:var(--space-3);animation:fadeUp .6s var(--ease-out-quart) both;font-size:.75rem;font-weight:600;display:flex}.hero-eyebrow:before{content:"";background:var(--brand);flex-shrink:0;width:28px;height:1px;display:block}.hero-heading{font-family:var(--font-serif);letter-spacing:-.02em;color:var(--text-primary);max-width:14ch;animation:fadeUp .6s .1s var(--ease-out-quart) both;font-size:clamp(2.75rem,7vw,5.5rem);font-weight:700;line-height:1.05}.hero-heading em{color:var(--brand);font-style:normal}.hero-body{color:var(--text-secondary);max-width:50ch;animation:fadeUp .6s .2s var(--ease-out-quart) both;font-size:1.125rem;line-height:1.7}.hero-cta{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--brand);color:var(--on-brand);border-radius:var(--radius-md);animation:fadeUp .6s .3s var(--ease-out-quart) both;border:none;font-size:.9375rem;font-weight:700;transition:background .18s,transform .18s;display:inline-flex}.hero-cta:hover{background:var(--brand-hover);transform:translateY(-1px)}.hero-cta svg{transition:transform .18s;display:inline-block}.hero-cta:hover svg{transform:translate(3px)}.tools-section{max-width:1200px;padding:var(--space-6) var(--space-6) var(--space-12);margin:0 auto}@media (min-width:768px){.tools-section{padding:var(--space-12) var(--space-8) var(--space-20)}}.tools-label{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-6);font-size:.75rem;font-weight:600}.tools-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (min-width:640px){.tools-grid{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.tools-grid{grid-template-columns:repeat(3,1fr)}}.tool-card{gap:var(--space-4);padding:var(--space-6);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:inherit;flex-direction:column;text-decoration:none;transition:border-color .2s,transform .2s,background .2s;display:flex;position:relative;overflow:hidden}.tool-card:not(.tool-card--disabled):hover{border-color:var(--brand-dim);background:var(--surface-raised);transform:translateY(-2px)}.tool-card--disabled{opacity:.5;cursor:default}.tool-card-preview{border-radius:var(--radius-md);background:var(--surface-raised);justify-content:center;align-items:center;height:100px;display:flex;overflow:hidden}.tool-card-badge{align-items:center;gap:var(--space-1);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:2px 8px;font-size:.6875rem;font-weight:700;display:inline-flex}.badge-available{background:var(--brand-tint-strong);color:var(--brand)}.badge-soon{background:var(--surface-raised);color:var(--text-muted)}.tool-card-title{font-family:var(--font-serif);letter-spacing:-.01em;color:var(--text-primary);font-size:1.375rem;font-weight:700}.tool-card-desc{color:var(--text-secondary);flex:1;font-size:.9375rem;line-height:1.6}.tool-card-link{align-items:center;gap:var(--space-2);color:var(--brand);margin-top:auto;font-size:.875rem;font-weight:600;transition:gap .15s;display:flex}.tool-card:not(.tool-card--disabled):hover .tool-card-link{gap:var(--space-3)}.cof-page{max-width:1200px;min-height:calc(100vh - 57px);padding:var(--space-6);gap:var(--space-6);grid-template-columns:1fr;margin:0 auto;display:grid}@media (min-width:900px){.cof-page{align-items:start;gap:var(--space-8);padding:var(--space-8) var(--space-8);grid-template-columns:360px 1fr}}@media (min-width:1100px){.cof-page{padding:var(--space-10) var(--space-10);grid-template-columns:420px 1fr}}.cof-wheel-col{gap:var(--space-4);flex-direction:column;display:flex}@media (min-width:900px){.cof-wheel-col{top:calc(57px + var(--space-6));position:sticky}}.cof-content-col{gap:var(--space-5);flex-direction:column;display:flex}.mode-toggle{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:3px;padding:3px;display:grid;overflow:hidden}.mode-btn{padding:var(--space-3) var(--space-4);border-radius:calc(var(--radius-md) - 3px);font-size:.875rem;font-weight:600;font-family:var(--font-sans);letter-spacing:.02em;transition:all .2s var(--ease-out-quart);color:var(--text-muted);background:0 0;border:none}.mode-btn.active-major{background:var(--brand-strong);color:var(--on-brand)}.mode-btn.active-minor{background:var(--accent-minor);color:var(--on-accent-minor)}.key-info{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);display:flex}.key-info-name{font-family:var(--font-serif);color:var(--text-primary);min-width:2.5ch;font-size:2rem;font-weight:700;line-height:1}.key-info-divider{background:var(--border);flex-shrink:0;width:1px;height:32px}.key-info-meta{flex-direction:column;gap:2px;display:flex}.key-info-mode{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:.6875rem;font-weight:700}.key-info-relative{color:var(--text-secondary);font-size:.875rem}.key-info-relative strong{color:var(--brand);font-weight:600}.chord-section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2);font-size:.6875rem;font-weight:700}.chord-grid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}@media (min-width:420px){.chord-grid{gap:var(--space-1);grid-template-columns:repeat(7,1fr)}}@media (min-width:640px){.chord-grid{gap:var(--space-2)}}.chord-card{align-items:center;gap:var(--space-1);cursor:pointer;animation:fadeUp .25s var(--ease-out-quart) both;flex-direction:column;display:flex}.chord-card:first-child{animation-delay:0s}.chord-card:nth-child(2){animation-delay:35ms}.chord-card:nth-child(3){animation-delay:70ms}.chord-card:nth-child(4){animation-delay:.105s}.chord-card:nth-child(5){animation-delay:.14s}.chord-card:nth-child(6){animation-delay:.175s}.chord-card:nth-child(7){animation-delay:.21s}.chord-degree{letter-spacing:.06em;font-size:.625rem;font-weight:700;line-height:1}.chord-name-box{border-radius:var(--radius-sm);font-family:var(--font-serif);text-align:center;border:1px solid #0000;width:100%;padding:8px 4px;font-size:.875rem;font-weight:700;line-height:1;transition:transform .15s,box-shadow .15s,border-color .15s}@media (min-width:420px){.chord-name-box{padding:10px 6px;font-size:1rem}}@media (min-width:640px){.chord-name-box{padding:11px 8px;font-size:1.0625rem}}.chord-card.root .chord-name-box{border-radius:var(--radius-md);padding:10px 6px;font-size:1rem}@media (min-width:420px){.chord-card.root .chord-name-box{padding:12px 8px;font-size:1.125rem}}@media (min-width:640px){.chord-card.root .chord-name-box{padding:14px 10px;font-size:1.25rem}}.chord-card.selected .chord-name-box{outline-offset:2px;outline:2px solid}@media (hover:hover){.chord-card:hover .chord-name-box{transform:translateY(-2px)}}.chord-type-label{letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-size:.5625rem;font-weight:600;line-height:1}.fretboard-panel-wrap{transition:grid-template-rows .32s var(--ease-out-quart);grid-template-rows:0fr;display:grid}.fretboard-panel-wrap.open{grid-template-rows:1fr}.fretboard-panel-inner{overflow:hidden}.fretboard-panel{padding-top:var(--space-4);animation:fadeIn .25s var(--ease-out-quart)}.fretboard-panel-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}@media (min-width:640px){.fretboard-panel-card{align-items:flex-start;gap:var(--space-6);flex-direction:row}}.fretboard-panel-info{gap:var(--space-2);flex-direction:column;min-width:100px;display:flex}.fretboard-chord-name{font-family:var(--font-serif);font-size:2rem;font-weight:700;line-height:1}.fretboard-chord-type{letter-spacing:.1em;text-transform:uppercase;opacity:.7;font-size:.75rem;font-weight:600}.fretboard-chord-degree{color:var(--text-muted);margin-top:var(--space-1);font-size:.8125rem}.fretboard-legend{gap:var(--space-1);flex-direction:column;margin-top:auto;display:flex}.fretboard-legend-item{color:var(--text-muted);align-items:center;gap:var(--space-2);font-size:.6875rem;display:flex}.fretboard-diagram-wrap{flex:1;justify-content:center;display:flex}.fretboard-close{top:var(--space-3);right:var(--space-3);border:1px solid var(--border);background:var(--surface-raised);width:28px;height:28px;color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;transition:background .15s,color .15s;display:flex;position:absolute}.fretboard-close:hover{background:var(--surface-high);color:var(--text-primary)}.fretboard-panel-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex}.page-title-block{padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}.page-title{font-family:var(--font-serif);letter-spacing:-.02em;color:var(--text-primary);font-size:clamp(1.5rem,4vw,2.25rem);font-weight:700;line-height:1.1}.page-subtitle{color:var(--text-secondary);margin-top:var(--space-2);max-width:55ch;font-size:.9375rem;line-height:1.5}.wheel-container{width:100%;max-width:380px;margin:0 auto}@media (min-width:900px){.wheel-container{max-width:100%}}.hint-text{color:var(--text-muted);text-align:center;font-size:.75rem}.site-footer{padding:var(--space-8) var(--space-6);text-align:center;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:.8125rem}.site-footer a{color:var(--text-secondary);transition:color .15s}.site-footer a:hover{color:var(--brand)}.fretboard-diagram-col{align-items:center;gap:var(--space-3);flex-direction:column;flex:1;width:100%;display:flex}.instrument-toggle{background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-self:center;gap:3px;padding:3px;display:flex}.instrument-btn{align-items:center;gap:var(--space-2);padding:5px var(--space-3);border-radius:calc(var(--radius-md) - 3px);font-family:var(--font-sans);letter-spacing:.01em;color:var(--text-muted);cursor:pointer;transition:color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);white-space:nowrap;background:0 0;border:none;font-size:.8125rem;font-weight:600;display:flex}.instrument-btn.active{background:var(--surface-raised);color:var(--text-primary)}.instrument-btn:not(.active):hover{color:var(--text-secondary)}.instrument-btn svg{flex-shrink:0;transition:opacity .15s}.instrument-btn:not(.active) svg{opacity:.5}.no-data-placeholder{padding:var(--space-6);text-align:center;color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);font-size:.875rem}.metro-page{max-width:1200px;min-height:calc(100vh - 57px);padding:var(--space-6);gap:var(--space-6);flex-direction:column;margin:0 auto;display:flex}@media (min-width:900px){.metro-page{padding:var(--space-8);gap:var(--space-8)}}.metro-layout{gap:var(--space-6);grid-template-columns:1fr;align-items:start;display:grid}@media (min-width:900px){.metro-layout{gap:var(--space-8);grid-template-columns:minmax(300px,380px) 1fr}}@media (min-width:1100px){.metro-layout{grid-template-columns:420px 1fr}}.metro-stage{align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-5);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:border-color .4s var(--ease-in-out), box-shadow .4s var(--ease-in-out);flex-direction:column;display:flex}.metro-stage.is-running{border-color:var(--brand-ring-soft);box-shadow:var(--shadow-brand)}@media (min-width:900px){.metro-stage{top:calc(57px + var(--space-6));position:sticky}}.metro-visual{width:100%;max-width:240px}.metro-svg{width:100%;height:auto}.metro-rod{transform-box:view-box}.metro-readout{justify-content:center;align-items:center;gap:var(--space-4);width:100%;display:flex}.bpm-step{border:1px solid var(--border);background:var(--surface-raised);width:40px;height:40px;color:var(--text-secondary);transition:color .15s, background .15s, border-color .15s, transform .12s var(--ease-out-quart);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.bpm-step:hover{color:var(--brand);border-color:var(--brand-ring);background:var(--surface-high)}.bpm-step:active{transform:scale(.92)}.bpm-value{justify-content:center;align-items:baseline;column-gap:var(--space-2);text-align:center;grid-template-columns:auto auto;min-width:132px;display:grid}.bpm-number{letter-spacing:-.03em;color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:clamp(3rem,12vw,3.75rem);font-weight:700;line-height:1}.bpm-unit{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:.75rem;font-weight:700}.bpm-term{margin-top:var(--space-1);letter-spacing:.04em;color:var(--brand);grid-column:1/-1;font-size:.8125rem;font-style:italic}.beat-dots{justify-content:center;column-gap:var(--space-2);padding-top:var(--space-1);flex-wrap:wrap;row-gap:20px;display:flex}.beat-dot{border:1px solid var(--border);background:var(--bg);width:34px;height:34px;transition:border-color .18s, background .18s, transform .12s var(--ease-out-quart);border-radius:50%;place-items:center;display:grid;position:relative}.beat-dot:hover{border-color:var(--surface-high)}.beat-dot:active{transform:scale(.9)}.beat-dot-core{width:12px;height:12px;transition:width .18s var(--ease-out-quart), height .18s var(--ease-out-quart), background .18s, box-shadow .18s;border-radius:50%}.beat-dot.level-2 .beat-dot-core{background:var(--brand);width:16px;height:16px}.beat-dot.level-1 .beat-dot-core{background:var(--beat-mid)}.beat-dot.level-0 .beat-dot-core{width:12px;height:12px;box-shadow:inset 0 0 0 1.5px var(--beat-off-ring);background:0 0}.beat-dot-num{color:var(--text-muted);font-size:.625rem;font-weight:600;transition:color .18s;position:absolute;bottom:-15px}.beat-dot.is-current{border-color:var(--brand-ring);background:var(--surface-raised)}.beat-dot.is-current .beat-dot-num{color:var(--text-secondary)}.beat-dot.is-current.level-1 .beat-dot-core{background:var(--beat-mid-active)}.beat-dot.is-hit .beat-dot-core{animation:beatHit .36s var(--ease-out-quart)}@keyframes beatHit{0%{box-shadow:0 0 0 0 var(--beat-pulse);transform:scale(1.9)}to{transform:scale(1);box-shadow:0 0 0 14px #0000}}.beat-dots{margin-bottom:var(--space-3)}.metro-hint{color:var(--text-muted);text-align:center;font-size:.75rem}.metro-transport{align-items:center;gap:var(--space-4);width:100%;margin-top:var(--space-1);display:flex}.play-btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:52px;padding:0 var(--space-6);border-radius:var(--radius-md);font-family:var(--font-sans);letter-spacing:.02em;background:var(--brand);color:var(--on-brand);transition:background .18s, transform .12s var(--ease-out-quart), box-shadow .18s;border:none;flex:1;font-size:1rem;font-weight:700;display:inline-flex}.play-btn:hover{background:var(--brand-hover)}.play-btn:active{transform:scale(.98)}.play-btn.is-running{background:var(--surface-high);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--brand-ring-soft)}.bar-counter{min-width:56px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg);flex-direction:column;align-items:center;gap:1px;display:flex}.bar-counter-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:.5625rem;font-weight:700}.bar-counter-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.125rem;font-weight:700;line-height:1.2}.metro-controls{gap:var(--space-4);flex-direction:column;display:flex}.metro-card{gap:var(--space-4);padding:var(--space-5);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;display:flex}.metro-card-head{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.metro-card-title{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);font-size:.6875rem;font-weight:700}.tap-btn{padding:var(--space-2) var(--space-4);border:1px solid var(--border);background:var(--surface-raised);color:var(--text-secondary);transition:color .15s, border-color .15s, background .15s, transform .1s var(--ease-out-quart);border-radius:999px;font-size:.8125rem;font-weight:600}.tap-btn:hover{color:var(--brand);border-color:var(--brand-ring)}.tap-btn:active{background:var(--surface-high);transform:scale(.95)}.tempo-slider,.volume-slider{--fill:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:22px}.tempo-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--brand) 0 var(--fill), var(--surface-high) var(--fill) 100%);border-radius:999px;height:6px}.volume-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--brand) 0 var(--fill), var(--surface-high) var(--fill) 100%);border-radius:999px;height:6px}.tempo-slider::-moz-range-track{background:linear-gradient(to right, var(--brand) 0 var(--fill), var(--surface-high) var(--fill) 100%);border-radius:999px;height:6px}.volume-slider::-moz-range-track{background:linear-gradient(to right, var(--brand) 0 var(--fill), var(--surface-high) var(--fill) 100%);border-radius:999px;height:6px}.tempo-slider::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);border:3px solid var(--brand);width:20px;height:20px;box-shadow:var(--shadow-sm);transition:transform .12s var(--ease-out-quart);border-radius:50%;margin-top:-7px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);border:3px solid var(--brand);width:20px;height:20px;box-shadow:var(--shadow-sm);transition:transform .12s var(--ease-out-quart);border-radius:50%;margin-top:-7px}.tempo-slider::-moz-range-thumb{background:var(--slider-thumb);border:3px solid var(--brand);width:14px;height:14px;box-shadow:var(--shadow-sm);border-radius:50%}.volume-slider::-moz-range-thumb{background:var(--slider-thumb);border:3px solid var(--brand);width:14px;height:14px;box-shadow:var(--shadow-sm);border-radius:50%}.tempo-slider:active::-webkit-slider-thumb{transform:scale(1.15)}.tempo-slider:focus-visible,.volume-slider:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:999px}.slider-scale{justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:calc(-1 * var(--space-2));color:var(--text-muted);font-size:.6875rem;display:flex}.slider-scale span:nth-child(2){color:var(--text-secondary);text-align:center}.preset-row{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}@media (min-width:520px){.preset-row{grid-template-columns:repeat(6,1fr)}}.preset-chip{padding:var(--space-2) var(--space-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);flex-direction:column;align-items:center;gap:1px;transition:border-color .15s,background .15s,color .15s;display:flex}.preset-name{color:var(--text-secondary);font-size:.75rem;font-style:italic;font-weight:600}.preset-bpm{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.625rem;font-weight:700}.preset-chip:hover{border-color:var(--border);background:var(--surface-raised)}.preset-chip.active{border-color:var(--brand-ring);background:var(--brand-tint)}.preset-chip.active .preset-name,.preset-chip.active .preset-bpm{color:var(--brand)}.sig-grid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}@media (min-width:520px){.sig-grid{grid-template-columns:repeat(8,1fr)}}.sig-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);min-height:58px;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;line-height:1;transition:border-color .15s,background .15s,color .15s;display:flex}.sig-top,.sig-bottom{font-size:1.0625rem;font-weight:700}.sig-top{padding-bottom:3px}.sig-bottom{opacity:.95;border-top:1.5px solid;padding-top:3px}.sig-btn:hover{border-color:var(--border);background:var(--surface-raised);color:var(--text-primary)}.sig-btn.active{border-color:var(--brand-ring);background:var(--brand-tint-strong);color:var(--brand)}.subdiv-row{gap:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}@media (min-width:460px){.subdiv-row{grid-template-columns:repeat(4,1fr)}}.subdiv-btn{align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-secondary);flex-direction:column;transition:border-color .15s,background .15s,color .15s;display:flex}.subdiv-btn:hover{border-color:var(--border);background:var(--surface-raised);color:var(--text-primary)}.subdiv-btn.active{border-color:var(--brand-ring);background:var(--brand-tint-strong);color:var(--brand)}.subdiv-label{letter-spacing:.02em;font-size:.6875rem;font-weight:600}.note-glyph{color:currentColor}.sound-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.sound-chip{padding:var(--space-2) var(--space-4);border:1px solid var(--border-subtle);background:var(--bg);color:var(--text-secondary);border-radius:999px;font-size:.8125rem;font-weight:600;transition:border-color .15s,background .15s,color .15s}.sound-chip:hover{border-color:var(--border);color:var(--text-primary)}.sound-chip.active{border-color:var(--brand-ring);background:var(--brand-tint-strong);color:var(--brand)}.volume-row{align-items:center;gap:var(--space-3);display:flex}.volume-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);width:34px;height:34px;color:var(--text-secondary);flex-shrink:0;place-items:center;transition:color .15s,border-color .15s;display:grid}.volume-btn:hover{color:var(--brand);border-color:var(--brand-ring-soft)}.volume-value{text-align:right;min-width:30px;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:600}.metro-shortcuts{gap:var(--space-2) var(--space-5);padding:0 var(--space-1);color:var(--text-muted);flex-wrap:wrap;font-size:.75rem;display:flex}.metro-shortcuts span{align-items:center;gap:var(--space-1);display:inline-flex}.metro-shortcuts kbd{border:1px solid var(--border);background:var(--surface-raised);min-width:20px;color:var(--text-secondary);font-family:var(--font-sans);border-bottom-width:2px;border-radius:4px;place-items:center;padding:2px 6px;font-size:.6875rem;font-weight:600;line-height:1.3;display:inline-grid}.metro-page button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@media (prefers-reduced-motion:reduce){.beat-dot.is-hit .beat-dot-core{animation:none}}.site-header-inner .site-nav{flex:auto}.lang-toggle{padding:3px 3px 3px var(--space-2);border:1px solid var(--border-subtle);background:var(--surface);border-radius:999px;flex-shrink:0;align-items:center;gap:2px;display:flex}.lang-toggle-icon{color:var(--text-muted);flex-shrink:0;margin-right:2px}.lang-btn{padding:4px var(--space-2);color:var(--text-muted);letter-spacing:.06em;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;font-size:.6875rem;font-weight:700;text-decoration:none;transition:color .15s,background .15s;display:inline-flex}.lang-btn:hover{color:var(--text-secondary)}.lang-btn.active{background:var(--brand-tint-strong);color:var(--brand)}.lang-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}.site-header-inner{z-index:3;position:relative}.header-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.nav-toggle{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface);width:44px;height:44px;color:var(--text-secondary);flex-shrink:0;place-items:center;transition:color .15s,border-color .15s,background .15s;display:grid}.nav-toggle:hover{color:var(--text-primary)}.nav-toggle.is-open{color:var(--brand);border-color:var(--brand-ring-soft);background:var(--brand-tint)}.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.nav-toggle-box{width:18px;height:12px;position:relative}.nav-toggle-box span{width:100%;height:2px;transition:transform .28s var(--ease-out-quart), opacity .16s linear;background:currentColor;border-radius:2px;position:absolute;left:0}.nav-toggle-box span:first-child{top:0}.nav-toggle-box span:nth-child(2){top:5px}.nav-toggle-box span:nth-child(3){top:10px}.nav-toggle.is-open .nav-toggle-box span:first-child{transform:translateY(5px)rotate(45deg)}.nav-toggle.is-open .nav-toggle-box span:nth-child(2){opacity:0;transform:scaleX(.3)}.nav-toggle.is-open .nav-toggle-box span:nth-child(3){transform:translateY(-5px)rotate(-45deg)}.mobile-nav-wrap{z-index:2;background:var(--surface-solid);transition:grid-template-rows .3s var(--ease-out-quart), border-color .3s;border-bottom:1px solid #0000;grid-template-rows:0fr;display:grid;position:absolute;top:100%;left:0;right:0}.mobile-nav-wrap.open{border-bottom-color:var(--border);box-shadow:var(--shadow-sheet);grid-template-rows:1fr}.mobile-nav{overflow:hidden}.mobile-nav-link{justify-content:space-between;align-items:center;gap:var(--space-3);min-height:54px;padding:0 var(--space-5);font-family:var(--font-sans);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);font-size:.9375rem;font-weight:600;transition:color .15s,background .15s;display:flex}.mobile-nav-link:last-child{border-bottom:none}.mobile-nav-link:active{background:var(--surface)}.mobile-nav-link svg{opacity:.35;transition:opacity .18s, transform .18s var(--ease-out-quart);flex-shrink:0}.mobile-nav-link.active{color:var(--brand);background:var(--brand-tint);box-shadow:inset 3px 0 0 var(--brand)}.mobile-nav-link.active svg{opacity:1;transform:translate(2px)}.mobile-nav-wrap.open .mobile-nav-link{animation:fadeUp .32s var(--ease-out-quart) backwards}.mobile-nav-wrap.open .mobile-nav-link:first-child{animation-delay:30ms}.mobile-nav-wrap.open .mobile-nav-link:nth-child(2){animation-delay:70ms}.mobile-nav-wrap.open .mobile-nav-link:nth-child(3){animation-delay:.11s}.mobile-nav-wrap.open .mobile-nav-link:nth-child(4){animation-delay:.15s}.nav-scrim{z-index:1;background:var(--scrim);opacity:0;visibility:hidden;cursor:default;transition:opacity .25s var(--ease-in-out), visibility .25s;border:none;padding:0;position:fixed;inset:0}.nav-scrim.open{opacity:1;visibility:visible}@media (max-width:767px){.site-header-inner{padding:var(--space-3) var(--space-4);gap:var(--space-3)}.site-logo{font-size:1.0625rem}.site-nav,.lang-toggle-icon{display:none}.lang-btn{min-height:30px;padding:0 var(--space-3)}}.tool-card-badges{align-items:center;gap:var(--space-2);display:flex}@media (min-width:768px){.nav-toggle,.mobile-nav-wrap,.nav-scrim{display:none}}@media (prefers-reduced-motion:reduce){.mobile-nav-wrap{transition:none}.mobile-nav-wrap.open .mobile-nav-link{animation:none}.nav-toggle-box span{transition:none}}.cf-page{max-width:1240px;padding:var(--space-8) var(--space-4) var(--space-16);margin:0 auto}@media (min-width:768px){.cf-page{padding:var(--space-12) var(--space-8) var(--space-20)}}.cf-title-block{margin-bottom:var(--space-8)}.cf-layout{gap:var(--space-6);align-items:start;display:grid}@media (min-width:1000px){.cf-layout{gap:var(--space-8);grid-template-columns:352px minmax(0,1fr)}}.cf-builder{gap:var(--space-6);padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface);flex-direction:column;display:flex}@media (min-width:1000px){.cf-builder{top:var(--space-6);position:sticky}}.cf-field{gap:var(--space-3);flex-direction:column;display:flex}.cf-field-head{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.cf-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:.6875rem;font-weight:700}.cf-search{align-items:center;gap:var(--space-2);padding:0 var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg);color:var(--text-muted);transition:border-color .18s,color .18s;display:flex}.cf-search:focus-within{border-color:var(--brand-ring);color:var(--brand)}.cf-search.is-invalid{border-color:var(--danger-ring)}.cf-search svg{flex-shrink:0}.cf-search-input{min-width:0;min-height:42px;color:var(--text-primary);background:0 0;border:none;flex:auto;font-family:inherit;font-size:.9375rem}.cf-search-input::placeholder{color:var(--text-muted)}.cf-search-input:focus{outline:none}.cf-search-hint{color:var(--text-muted);font-size:.75rem}.cf-search-hint.is-invalid{color:var(--danger)}.cf-acc-toggle{border:1px solid var(--border-subtle);background:var(--bg);border-radius:999px;gap:2px;padding:3px;display:flex}.cf-acc-btn{min-width:30px;min-height:26px;color:var(--text-muted);background:0 0;border:none;border-radius:999px;font-size:.9375rem;line-height:1;transition:color .15s,background .15s}.cf-acc-btn:hover{color:var(--text-secondary)}.cf-acc-btn.active{background:var(--brand-tint-strong);color:var(--brand)}.cf-root-grid{gap:var(--space-1);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.cf-root-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);min-height:44px;color:var(--text-secondary);padding:0 2px;font-size:.9375rem;font-weight:700;transition:border-color .15s,background .15s,color .15s}.cf-root-btn.is-accidental{background:var(--surface-sunken);color:var(--text-muted);font-size:.875rem}.cf-root-btn:hover{border-color:var(--border);color:var(--text-primary);background:var(--surface-raised)}.cf-root-btn.active{background:var(--surface-raised);box-shadow:inset 0 0 0 1px}.cf-group-tabs{gap:var(--space-1);flex-wrap:wrap;display:flex}.cf-group-tab{padding:var(--space-2) var(--space-3);color:var(--text-muted);background:0 0;border:1px solid #0000;border-radius:999px;font-size:.75rem;font-weight:600;transition:color .15s,background .15s,border-color .15s}.cf-group-tab:hover{color:var(--text-secondary);background:var(--bg)}.cf-group-tab.active{border-color:var(--border);background:var(--surface-raised);color:var(--text-primary)}.cf-quality-grid{gap:var(--space-1);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}.cf-quality-btn{min-height:52px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg);text-align:left;flex-direction:column;align-items:flex-start;gap:1px;transition:border-color .15s,background .15s;display:flex}.cf-quality-btn:hover{border-color:var(--border);background:var(--surface-raised)}.cf-quality-symbol{color:var(--text-primary);font-size:.9375rem;font-weight:700;line-height:1.3}.cf-quality-name{color:var(--text-muted);font-size:.625rem;line-height:1.35}.cf-result{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.cf-hero{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);flex-wrap:wrap;display:flex}.cf-hero-main{align-items:baseline;gap:var(--space-4);min-width:0;display:flex}.cf-hero-symbol{letter-spacing:-.01em;font-size:clamp(2.25rem,7vw,3.25rem);font-weight:700;line-height:1}.cf-hero-meta{min-width:0}.cf-hero-full{color:var(--text-primary);font-size:.9375rem;font-weight:600;line-height:1.4}.cf-hero-family{letter-spacing:.1em;text-transform:uppercase;font-size:.6875rem;font-weight:700}.cf-play-btn{align-items:center;gap:var(--space-2);min-height:42px;padding:0 var(--space-5);color:var(--chord-on-accent);transition:transform .15s var(--ease-out-quart), filter .15s;border:none;border-radius:999px;font-size:.875rem;font-weight:700;display:inline-flex}.cf-play-btn:hover{filter:brightness(1.08)}.cf-play-btn:active{transform:scale(.97)}.cf-audio-off{color:var(--text-muted);font-size:.75rem}.cf-notes{gap:var(--space-3);flex-direction:column;display:flex}.cf-notes-head{align-items:baseline;gap:var(--space-3);display:flex}.cf-formula{color:var(--text-secondary);letter-spacing:.04em;font-size:.75rem;font-weight:600}.cf-note-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.cf-note-chip{min-width:58px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface);transition:transform .15s var(--ease-out-quart), background .15s;flex-direction:column;align-items:center;gap:1px;display:flex}.cf-note-chip:hover{background:var(--surface-raised);transform:translateY(-2px)}.cf-note-chip:active{transform:translateY(0)scale(.97)}.cf-note-degree{letter-spacing:.06em;font-size:.625rem;font-weight:700}.cf-note-name{color:var(--text-primary);font-size:1.0625rem;font-weight:700;line-height:1.2}.cf-instrument{justify-content:flex-start;display:flex}.cf-panel{gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface);animation:fadeUp .32s var(--ease-out-quart);flex-direction:column;display:flex}.cf-panel-head{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.cf-panel-count{color:var(--text-muted);font-size:.75rem}.cf-voicing-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.cf-voicing-chip{align-items:center;gap:var(--space-2);min-height:34px;padding:0 var(--space-4);border:1px solid var(--border-subtle);background:var(--bg);color:var(--text-secondary);border-radius:999px;font-size:.8125rem;font-weight:600;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.cf-voicing-chip:hover{border-color:var(--border);color:var(--text-primary)}.cf-voicing-chip.active{color:var(--text-primary)}.cf-diff-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.cf-diagram-stage{align-items:flex-start;gap:var(--space-6);padding-top:var(--space-1);flex-wrap:wrap;display:flex}.cf-diagram-side{gap:var(--space-4);padding-top:var(--space-2);flex-direction:column;display:flex}.cf-difficulty{align-items:center;gap:var(--space-2);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);font-size:.75rem;font-weight:700;display:inline-flex}.cf-keyboard-stage{padding-bottom:var(--space-1);overflow-x:auto}.cf-piano-hint{color:var(--text-muted);font-size:.75rem;line-height:1.6}.cf-switch{align-items:center;gap:var(--space-2);color:var(--text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;display:inline-flex}.cf-switch input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.cf-switch-track{background:var(--surface-high);width:32px;height:18px;transition:background .2s var(--ease-in-out);border-radius:999px;padding:2px;display:block}.cf-switch-thumb{background:var(--text-muted);width:14px;height:14px;transition:transform .2s var(--ease-out-quart), background .2s;border-radius:50%;display:block}.cf-switch input:checked+.cf-switch-track{background:var(--brand-tint-track)}.cf-switch input:checked+.cf-switch-track .cf-switch-thumb{background:var(--brand);transform:translate(14px)}.cf-switch input:focus-visible+.cf-switch-track{outline:2px solid var(--brand);outline-offset:2px}.cf-keys{gap:var(--space-3);padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-sunken);flex-direction:column;display:flex}.cf-key-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.cf-key-chip{padding:var(--space-1) var(--space-3);border:1px solid var(--border-subtle);background:var(--bg);color:var(--text-secondary);border-radius:999px;font-size:.75rem;font-weight:600}.cf-keys-empty{color:var(--text-muted);font-size:.8125rem;line-height:1.6}.cf-page button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.cf-page svg [role=button]:focus-visible{outline:2px solid var(--brand);outline-offset:1px}@media (prefers-reduced-motion:reduce){.cf-panel{animation:none}.cf-note-chip:hover{transform:none}}.theme-toggle{border:1px solid var(--border-subtle);background:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;flex-shrink:0;align-items:center;gap:2px;width:58px;height:32px;padding:3px;transition:border-color .15s,background .15s;display:inline-flex;position:relative}.theme-toggle:hover{border-color:var(--brand-ring-soft)}.theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.theme-toggle:active .theme-knob{transform:scale(.92)}.theme-knob{background:var(--brand-tint-strong);width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--brand-ring-soft);transition:transform .34s var(--ease-out-quart), background .2s;pointer-events:none;border-radius:50%;position:absolute;top:3px;left:3px;transform:translate(26px)}:root[data-theme=light] .theme-knob{transform:translate(0)}.theme-toggle-icon{z-index:1;width:24px;height:24px;color:var(--text-muted);transition:color .2s, transform .34s var(--ease-out-quart);place-items:center;display:grid;position:relative}.theme-toggle-icon--moon{color:var(--brand)}.theme-toggle-icon--sun{transform:rotate(-45deg)scale(.85)}:root[data-theme=light] .theme-toggle-icon--sun{color:var(--brand);transform:none}:root[data-theme=light] .theme-toggle-icon--moon{color:var(--text-muted);transform:rotate(20deg)scale(.85)}@media (max-width:767px){.theme-toggle{width:60px;height:34px}.theme-toggle:after{content:"";position:absolute;inset:-5px -2px}}@media (max-width:400px){.site-header-inner{padding:var(--space-3);gap:var(--space-2)}.header-actions{gap:6px}.theme-toggle{width:52px}.theme-toggle-icon{width:22px}.theme-knob{width:22px;transform:translate(24px)}:root[data-theme=light] .theme-knob{transform:translate(0)}.lang-toggle{padding:3px}.lang-btn{padding:0 6px}}@media (prefers-reduced-motion:reduce){.theme-knob,.theme-toggle-icon{transition:none}}