@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(data:font/woff2;base64,d09GMgABAAAAAAfsABQAAAAAEAwAAAeCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoP0hWQVJbBmA/U1RBVIFiJyYAdC9qEQgKhGSEAAsgADCGCAE2AiQDOgQgBYlMB4EUDAcbLQ4onoexrSC/2ZyLAa8p8VHB8/x3Vue+V0hVJalMJg2nx/TCrQXxBeqLjQG7FyM1WEa/X1tEXN7cFz9EJEMmMUz3RihWSSKeQCbcIou0izz/C8v+fq3VfajEa9gDD11CImXS7qL/RJFVzC1qiB6KmKeD6TZdQ6IRGv78dL6uSVVCfgni5mzu7kcgQBgAEAQTQRCoL++STTYybkJxNfQxAAIAGu8OdEB9teW2jh4BpgDqFjAeSEByW3zFP0CBBgNMsMCGEDjgggdhiEAUAeIIED7ABTDUEnkIE9Q9ahFgKttcVhApo4ACB4qobHaccgDfEjFO6aaWUhjMLt2SyIvHKoDqoA4CSUwEIYQCEjhAO9R1G6keDeDZGjNo+AhxOjCEGTr1WeIF3kYBiLAOKvkJSMiKX0VdAyQt3SDJClCkxJCHkCzfqyVTriJZLcolS32JZHUekq2TYNkYtCtjYHMQXSxGjXDz2t/yLWXzDzxz+o3zFwDEaN23F+13pyMdQAEaSKAR9vcGq4A4MTSKCElGW+M7UcY7xqkggITb28ZJhlqc9q2twYKTt0NjixBgYvO9BIihEBLYuOFXQzfIQ7dXGUEEEgFDooBfAzqiQbpJrhiWSuKJCRFKYbHCyJKI2G5GiZbNAvgAu5pc3vwx4G+g3aDkhklABiSz0BICXrYghtYhx/cdJ+44rY2oZ0aMNRFz3VZjb6W33F3gzltqtOCV8tTHSpOeXuItfvr5lCdfzFpqtEitvqdcdGGFd28ZqqC0tPbeChGXgrIlnhSWu/eUso4uKWFLugyDzQJhflY4659+WjQ++6x72WUMv9G8mw6QJl7BVxX5fe/kpUsOvnZwee9uQ0cGXYd0o89XB2748sDSnt8d2VphdOTTgceDVvOds0v9P/s7HPq15aGun/6Vllb56f1dl0t1LejqrNkpdRZsG8TOnM5vkBG5oiVyVGnS8LHps5cfNWJs6qKPfaNSxiQNBUm3cKNWROr0GSur7Za31k1vieq7LH11VF+jXdRIasRKflc7jkobm1Z9te1IyZA0pDkhLR98+H37Zf1c/8at+dB7x+7GfVyTfJMPiYztsnl59Y5l4j+0n1RXlpHnF3Tq7HecmNF/CJodEMAikruxiyJaGLvHOdAfoA+oDvpjBm2b91cHGRZMU9n25xEU0A8fgEEAdKI3Q1iDtc034sug5YVMkE2jsE+BIkwSoQ3gxXMqz9tELp48bd0cFKOKS7xYjEuXBnZP5ia7DyiO/X/YI+PQSbt2uSdqAkWL9nQbV1XB94/+uPfdZz8dnXYFBYrcTl2SIR/ybxJNJPz/Gupb0JaZeens2ekC7EKr8t+Ls/P5VJPYJdHKyqfg2nqU6bhlidzcddQV/7MmecTzJ5VPcKXkNKSEogHjYFx6QZ7rQ+FSe8njaiNuOnXS8H2ScQ619c2mC3VTtauL0rRbXd/CkSOP37FY9Zkjz8+GibYUMOEWF+RdrFS8Ecv1SHOpPUPZGEIpjPvFyU5cXKjd6OXqorTqy9GwRd++HVufPGnVsW+aO3vggKZ18jR9sXaTC1PWTEsVUaK0FkNySbTQDqlm2PfDjZcu4aalnSLKjnOoYQ0nUlqqXcGpPu/4VgV/xU2pAqW4BW3qzhQ8/hFKhV2qE3+BKAtDqBXjfgnVdH4y0wg5tbVNRenNdTWOrenWLcupQdmsbq5b+18piTe/xRdp1xbILxNPJGInm2z6hoB21Lal0i+ePTtd7B45+3XhFJ329evskXm7qurUVREotqSluSo/L29d3qDhI4YOQqWhI4YNvBNfsMHeXKemXrxQfKeuPOGRVayA3JtkJKEgbPp+dXUDluddutRYLFoXGXWX6N3WFaGLbQtRSitVYNacTNSdy7AaG/HSaUEANcBoGXNdcZvZsOqQ1icBDv21/gzAoYPHH/WDW0qNR3QTYKEAEHig6o13NXbND06CQPlRtYjGNnSktRc09k1mAMDvAlDKfQjgy6fssInlfzmNAjKkDxoxHOBLdVRAIVt9j4qo+hA1w9T1aNBNTUOTTNUHLbqokE+UAfJXCIGw/IxCSL5GRUJeR40rL/UxTm4Q08H6MbCs70ObuNyIIXrINHQYInF06UUlevTjbQzTh5upiDMzMMogUtEnjPs/Y7jAHCJeB0GBHh04tC6FiB6ZFB1oArUSIoFoqhzCeAN6lHwm0T4C3VVPWvjpSMXReuWesMEcoqrmgtNBGd2noWeV0hNAz9rFeShNJxHGsPa3HXeKTk8b55hahySYHaYKKFFLpCfN8rsoaJn01CR04Gkc+5k7KVTCmClX8Q10HCrUEkVlSX+XO33oQR9609tJ516H497WSobWs5Up6TLaS10/dessIskgJSLiDlWvHVUywpkQ7hdPZqGyiEF0uVQerVcPamT1A3eKXdyI1vG9OoflrSXihZ1qqGE3nhmAgiIbRCQgPLEPtOM3UQwTLYaYYomNlpA44opnjV6jkD6id80OOrzf6BzmMD6eEa1zKyeYG1fzfEf16V6jw9XYOaar1/b2kP/IYX8oR2mcFvv2GtBV3JXgd437AQAA) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg: #0d1014;--surface: #161a20;--surface-2: #1d222a;--border: #262c36;--text: #f4f4f6;--text-muted: #a1a8b3;--text-faint: #6b7280;--accent: #d4a574;--accent-hi: #e8b87f;--accent-bg: rgba(212, 165, 116, .12);--on-accent: #1a1108;--success: #4ade80;--danger: #f87171;--warning: #fbbf24;--fret-board-bg: rgba(139, 90, 43, .15);--fret-string: #a0968a;--fret-string-active: #f5a623;--fret-marker: rgba(255, 255, 255, .15);--diagram-line: rgba(255, 255, 255, .2);--diagram-string: rgba(255, 255, 255, .3);--diagram-fret-label: rgba(255, 255, 255, .6);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-pill: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--shadow-md: 0 4px 12px rgba(0, 0, 0, .25);--ring: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg);--font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}[data-theme=light]{--bg: #faf8f5;--surface: #ffffff;--surface-2: #f1eee9;--border: #d8d1c5;--text: #1a1a1f;--text-muted: #4a5361;--text-faint: #6b7280;--accent: #8f5f2e;--accent-hi: #9c6a34;--accent-bg: rgba(143, 95, 46, .12);--on-accent: #ffffff;--success: #15803d;--danger: #dc2626;--warning: #b45309;--shadow-md: 0 4px 12px rgba(60, 50, 40, .15);--fret-board-bg: rgba(120, 80, 40, .1);--fret-string: #5c4a33;--fret-marker: rgba(45, 30, 15, .32);--diagram-line: rgba(40, 28, 14, .28);--diagram-string: rgba(40, 28, 14, .55);--diagram-fret-label: #4a5361}@media(prefers-color-scheme:light){:root:not([data-theme]){--bg: #faf8f5;--surface: #ffffff;--surface-2: #f1eee9;--border: #d8d1c5;--text: #1a1a1f;--text-muted: #4a5361;--text-faint: #6b7280;--accent: #8f5f2e;--accent-hi: #9c6a34;--accent-bg: rgba(143, 95, 46, .12);--on-accent: #ffffff;--success: #15803d;--danger: #dc2626;--warning: #b45309;--shadow-md: 0 4px 12px rgba(60, 50, 40, .15);--fret-board-bg: rgba(120, 80, 40, .1);--fret-string: #5c4a33;--fret-marker: rgba(45, 30, 15, .32);--diagram-line: rgba(40, 28, 14, .28);--diagram-string: rgba(40, 28, 14, .55);--diagram-fret-label: #4a5361}}*,*:before,*:after{box-sizing:border-box}html{overflow-x:hidden}html,body{margin:0;padding:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}svg{display:block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}.fret-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.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}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;min-width:44px;padding:0 var(--space-4);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.9rem;font-weight:600;line-height:1;border:1px solid transparent;transition:background .12s ease,color .12s ease,border-color .12s ease,filter .12s ease,transform 80ms ease;text-decoration:none;white-space:nowrap}.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-primary.active{background:var(--accent-hi)}.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-icon{width:44px;padding:0}.btn svg{width:1.15em;height:1.15em;flex:none}.inline-icon{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);position:sticky;top:0;z-index:40}.app-header h1{margin:0;font-size:1.1rem;color:var(--text);font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:var(--space-2)}.app-title-icon{width:1.1em;height:1.1em;flex:none;color:var(--accent)}.header-controls{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.app-content{display:grid;grid-template-columns:1fr;padding:var(--space-3);padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom));gap:var(--space-4);width:100%;max-width:1200px;margin:0 auto}.main-layout{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start}.chord-list-panel{display:flex;flex-direction:column;min-width:0}.center-panel{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}.strum-btn{position:fixed;left:0;right:0;bottom:0;width:100%;border-radius:0;min-height:56px;padding-bottom:calc(env(safe-area-inset-bottom) + var(--space-1));z-index:50;box-shadow:0 -4px 16px #0006}.no-chord-hint{text-align:center;color:var(--text-muted);font-size:.95rem;padding:var(--space-5) var(--space-3);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md)}.audio-init-banner{background:var(--accent-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3)}.audio-init-hint{font-size:.85rem;color:var(--text-muted)}@media(prefers-reduced-motion:no-preference){.audio-enable-spinner{animation:audioSpin .9s linear infinite}@keyframes audioSpin{to{transform:rotate(360deg)}}}@media(min-width:600px){.app-header{padding:var(--space-3) var(--space-5)}.app-header h1{font-size:1.3rem}.app-content{padding:var(--space-4);padding-bottom:var(--space-4);gap:var(--space-5)}.strum-btn{position:static;width:auto;max-width:320px;border-radius:var(--radius-md);min-height:44px;padding-bottom:0;box-shadow:none;align-self:center}}@media(min-width:900px){.app-header h1{font-size:1.4rem}.main-layout{grid-template-columns:minmax(220px,280px) 1fr;gap:var(--space-5)}.app-content{padding:var(--space-5);gap:var(--space-5)}}@media(min-width:1200px){.main-layout{grid-template-columns:280px 1fr}}.instrument-selector{display:flex;gap:var(--space-2)}.instrument-btn{white-space:nowrap}.instrument-icon{width:1.1em;height:1.1em;flex:none}.fretboard-container{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--space-3);width:100%;box-sizing:border-box}.fretboard-container.portrait{padding:var(--space-3)}.fretboard-title{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-2)}.fretboard-svg{display:block;width:100%;max-width:668px;height:auto;margin:0 auto}.fretboard-portrait-frame{container-type:size;position:relative;width:100%;max-width:360px;margin:0 auto}.fretboard-svg-portrait{position:absolute;top:50%;left:50%;width:100cqh;height:100cqw;max-width:none;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}.segmented-control{display:inline-flex;gap:var(--space-1);margin-bottom:var(--space-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:var(--space-1);width:fit-content}.segmented-control .segment{border-radius:var(--radius-pill);font-size:.85rem;min-height:40px}.fret-cell,.mute-toggle{cursor:pointer;touch-action:manipulation}.mute-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.fret-cell-label,.fret-dot,.fret-ripple{pointer-events:none}.fretboard-mode-hint{margin:calc(-1 * var(--space-1)) 0 var(--space-3);font-size:.78rem;color:var(--text-muted)}.fret-ripple{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}@media(prefers-reduced-motion:no-preference){.fret-ripple{animation:fretRipple .45s ease-out forwards}@keyframes fretRipple{0%{opacity:.55;transform:scale(.35)}to{opacity:0;transform:scale(1.8)}}}@media(prefers-reduced-motion:reduce){.fret-ripple{opacity:.4}}.string-line{transition:stroke .1s}.string-line.active{stroke:var(--accent)!important}@media(prefers-reduced-motion:no-preference){.string-line.active{animation:stringPulse 1.5s ease-out forwards}@keyframes stringPulse{0%{opacity:1;stroke:var(--accent)}30%{opacity:.6;stroke:var(--accent)}60%{opacity:1;stroke:var(--accent)}to{opacity:.4;stroke:var(--text-faint)}}}.fretboard-container.placement-mode{border-color:var(--accent);background:var(--accent-bg)}.chord-diagram-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);cursor:pointer}.chord-diagram-wrapper.selected .chord-diagram-svg{filter:drop-shadow(0 0 8px var(--accent))}.chord-diagram-label{font-size:.75rem;font-weight:700;color:var(--text);text-align:center}.chord-diagram-label.large{font-size:1.1rem;color:var(--text)}.chord-diagram-label.difficulty{font-size:.65rem;color:var(--text-faint);font-weight:400}.chord-description{font-size:.75rem;color:var(--text-muted);text-align:center;max-width:240px;line-height:1.4;font-style:italic}.chord-list{display:flex;flex-direction:column;gap:var(--space-4)}.chord-group{display:flex;flex-direction:column;gap:var(--space-2)}.chord-group-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);font-weight:700;padding-bottom:var(--space-1);border-bottom:1px solid var(--border)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}.chord-strip-wrap{position:relative;margin:0 calc(var(--space-3) * -1)}.chord-strip{--fade-l: 0px;--fade-r: 0px;display:flex;flex-direction:row;gap:var(--space-2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:var(--space-2) var(--space-1);scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%)}.chord-strip.fade-left{--fade-l: 28px}.chord-strip.fade-right{--fade-r: 44px}.chord-strip::-webkit-scrollbar{display:none}.chord-strip-more{position:absolute;top:50%;right:var(--space-2);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);color:var(--accent);box-shadow:var(--shadow-md);pointer-events:none}.chord-strip-more svg{width:16px;height:16px}@media(prefers-reduced-motion:no-preference){.chord-strip-more{animation:chordStripNudge 1.4s ease-in-out infinite}@keyframes chordStripNudge{0%,to{transform:translateY(-50%) translate(0)}50%{transform:translateY(-50%) translate(2px)}}}.chord-chip{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.9rem;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,border-color .12s ease,color .12s ease}.chord-chip:hover{background:var(--surface-2);border-color:var(--accent)}.chord-chip.selected{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.chord-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-1);transition:background .12s ease,border-color .12s ease,transform 80ms ease;cursor:pointer}.chord-card:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-1px)}.chord-card.selected{background:var(--accent-bg);border-color:var(--accent);box-shadow:var(--shadow-md)}.chord-display-large{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.chord-display-name{font-size:1.4rem;font-weight:700;color:var(--text)}.chord-display-meta{font-size:.8rem;color:var(--text-muted);text-transform:capitalize}.chord-challenge{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-5) var(--space-4);gap:var(--space-5)}.challenge-mode-select{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);max-width:600px;width:100%;padding:var(--space-6) 0}.challenge-mode-select h2{font-size:1.8rem;color:var(--text);margin:0}.challenge-mode-select p{color:var(--text-muted);text-align:center;margin:0;font-size:.95rem;line-height:1.6}.challenge-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);width:100%}.challenge-type-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);cursor:pointer;text-align:left;transition:background .12s ease,border-color .12s ease,transform 80ms ease;color:var(--text)}.challenge-type-card:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}.challenge-type-card h3{margin:0 0 var(--space-2);font-size:1rem;color:var(--accent)}.challenge-type-card p{margin:0;font-size:.8rem;color:var(--text-muted);text-align:left}.mode-buttons{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.reward-teaser{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.85rem;color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);margin:0}.challenge-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:800px;gap:var(--space-3)}.challenge-progress{font-size:.85rem;color:var(--text-muted)}.challenge-timer{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1rem;font-weight:700;color:var(--warning);min-width:60px;text-align:right}.challenge-timer.urgent{color:var(--danger)}@media(prefers-reduced-motion:no-preference){.challenge-timer.urgent{animation:timerPulse .5s ease-in-out infinite alternate}@keyframes timerPulse{0%{opacity:1}to{opacity:.5}}}.challenge-controls{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.challenge-control-btn{font-size:.85rem}.challenge-paused{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);max-width:420px;width:100%;color:var(--text-muted)}.challenge-paused .inline-icon{color:var(--accent)}.challenge-paused-title{font-size:1.4rem;font-weight:700;color:var(--text)}.challenge-paused p{margin:0;font-size:.85rem}.challenge-question{text-align:center}.challenge-question h3{font-size:1.1rem;color:var(--text-muted);margin:0 0 var(--space-2);font-weight:400}.challenge-question .chord-name-big{font-size:2rem;font-weight:700;color:var(--accent)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);width:100%;max-width:600px}.option-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;transition:background .12s ease,border-color .12s ease,transform 80ms ease;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.option-badge{position:absolute;top:var(--space-2);right:var(--space-2);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-pill);color:#fff}.option-badge svg{width:16px;height:16px}.option-badge.correct{background:var(--success)}.option-badge.wrong{background:var(--danger)}.option-card:hover:not(.correct):not(.wrong){background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}.option-card.correct{background:#4ade8026;border-color:var(--success);box-shadow:0 0 16px #4ade804d}.option-card.wrong{background:#f8717126;border-color:var(--danger)}.option-card-name{font-size:.75rem;color:var(--text-muted)}.placement-controls{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.placement-hint{font-size:.85rem;color:var(--text-muted);text-align:center}.string-toggle-row{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}.string-toggle{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.string-toggle span{font-size:.7rem;color:var(--text-muted)}.toggle-btn.open-active{background:#4ade8026;border-color:var(--success);border-width:2px;color:var(--success)}.toggle-btn.mute-active{background:#f8717126;border-color:var(--danger);border-width:2px;color:var(--danger)}.placement-feedback{font-size:1rem;font-weight:700;padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill)}.placement-feedback.correct{background:#4ade802e;color:var(--success);border:1px solid var(--success)}.placement-feedback.wrong{background:#f871712e;color:var(--danger);border:1px solid var(--danger)}.results-screen{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);max-width:500px;width:100%;text-align:center}.results-screen h2{font-size:1.8rem;margin:0;color:var(--text)}.results-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);width:100%;display:flex;flex-direction:column;gap:var(--space-3)}.result-stat{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}.result-stat .label{color:var(--text-muted)}.result-stat .value{font-weight:700;color:var(--text)}.result-stat .value.pass{color:var(--success)}.result-stat .value.fail{color:var(--danger)}.unlock-code{background:var(--accent-bg);border:1px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-4);color:var(--accent);font-size:.9rem}.unlock-code strong{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.2rem;margin-top:var(--space-2);color:var(--text);letter-spacing:2px}.unlock-hint{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);color:var(--text-muted);font-size:.85rem}.results-review{width:100%;text-align:left}.results-review h3{font-size:.95rem;color:var(--text-muted);font-weight:600;margin:0 0 var(--space-3);text-align:center}.review-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.review-item{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:.9rem}.review-item.correct{border-left-color:var(--success)}.review-item.wrong{border-left-color:var(--danger)}.review-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.8rem;min-width:1.5em;text-align:right}.review-icon{display:inline-flex;align-items:center;justify-content:center}.review-icon svg{width:18px;height:18px}.review-item.correct .review-icon{color:var(--success)}.review-item.wrong .review-icon{color:var(--danger)}.review-chord{flex:1;font-weight:600;color:var(--text)}.review-outcome{color:var(--text-muted);font-size:.8rem}.results-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.toast-stack{position:fixed;left:50%;transform:translate(-50%);bottom:calc(var(--space-7) + env(safe-area-inset-bottom) + var(--space-3));display:flex;flex-direction:column;align-items:center;gap:var(--space-2);z-index:60;pointer-events:none}@media(min-width:600px){.toast-stack{bottom:var(--space-5)}}.toast{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);font-size:.85rem;font-weight:600;max-width:min(90vw,420px)}.toast-message{min-width:0}.toast-icon{width:1.15em;height:1.15em;flex:none;color:var(--accent)}.toast-success .toast-icon{color:var(--success)}.toast-success{border-color:var(--success)}@media(prefers-reduced-motion:no-preference){.toast{animation:toastIn .2s ease}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}