:root{color-scheme:light dark;--bg: #f4efe6;--bg-top: #f9f4ec;--panel: #fffcf6;--panel-strong: #fffdf8;--line: rgba(77, 52, 34, .15);--line-hover: rgba(141, 61, 30, .3);--text: #2f241b;--muted: #786352;--accent: #d86d3c;--accent-deep: #8d3d1e;--accent-soft: #f6d9c7;--shadow: 0 24px 60px rgba(93, 58, 28, .14);--surface: rgba(255, 251, 246, .9);--surface-active: linear-gradient(145deg, rgba(216, 109, 60, .18), rgba(255, 251, 246, .95));--grid-line: rgba(77, 52, 34, .22);--grid-line-nut: rgba(77, 52, 34, .45);--key-border: rgba(77, 52, 34, .18);--key-black-border: rgba(255, 255, 255, .04);--key-white-bg: linear-gradient(180deg, #fffdfa, #f3eadc);--key-black-bg: linear-gradient(180deg, #3e332d, #1d1714);--label-active: #8d3d1e;--tab-bg: rgba(49, 36, 27, .94);--tab-text: #ffe7d5;--label-passive: rgba(47, 36, 27, .25);--label-octave: rgba(47, 36, 27, .2);--hero-pad-v: 1.1rem;--hero-pad-h: 1.35rem;--white-key-width: clamp(1.15rem, 3.8vw, 2rem);--app-gutter: 1rem;font-family:Trebuchet MS,Gill Sans,Segoe UI,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button{font:inherit}.app-shell{width:min(1360px,calc(100vw - (var(--app-gutter) * 2)));margin:0 auto;padding:max(1rem,env(safe-area-inset-top)) 0 calc(3rem + env(safe-area-inset-bottom))}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.page-header h1,.section-heading h2,.hero-card h2,.card-header h3{margin:0;font-family:Georgia,Times New Roman,serif;letter-spacing:-.03em}.page-header h1{font-size:clamp(2.35rem,5.4vw,4rem);line-height:.96;cursor:pointer}.page-header__lede{max-width:54ch;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.6}.workspace{display:grid;gap:1.25rem}.workspace>*,.control-column,.detail-layout,.instrument-grid{min-width:0}.workspace--landing .control-column,.workspace--landing .panel,.workspace--landing .hero-card--empty{height:100%}.control-column{display:grid;gap:1rem}.panel,.hero-card{background:var(--panel);border:1px solid var(--line);border-radius:1.4rem;box-shadow:var(--shadow);min-width:0}.panel,.panel--compact{padding:1.1rem}.hero-card{display:grid;gap:1rem;padding:var(--hero-pad-v) var(--hero-pad-h);overflow:hidden;background:linear-gradient(145deg,#ffffffeb,#f9efe2d1),var(--panel-strong)}.hero-card--empty{min-height:20rem;align-content:center}.hero-card__description{margin:.35rem 0 0;color:var(--muted);max-width:44ch;line-height:1.6}.hero-card__alternate{color:var(--muted);font-size:.72em;font-weight:500}.hero-card__long-name{margin:.25rem 0 0;color:var(--accent-deep);font-size:.98rem;line-height:1.5}.hero-card__meta{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;align-items:end;justify-content:space-between}.detail-layout,.instrument-grid{display:grid;gap:1rem}.section-heading,.card-header{display:flex;gap:1rem;align-items:start;justify-content:space-between;margin-bottom:1rem}.section-heading{flex-direction:column;align-items:stretch}.card-header{margin-bottom:.85rem}.eyebrow{margin:0 0 .25rem;color:var(--accent-deep);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.section-note{margin:.35rem 0 0;color:var(--muted);font-size:.94rem}.section-note--mobile{display:none}.section-actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;justify-content:flex-start}.chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));gap:.65rem}.chip,.list-card,.play-button,.ghost-button{border:1px solid var(--line);border-radius:1rem;background:var(--surface);color:var(--text);transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.chip{min-height:3rem;padding:.75rem;font-weight:700}.chip:hover,.list-card:hover,.play-button:hover,.ghost-button:hover{transform:translateY(1px);border-color:var(--line-hover)}.chip--active,.list-card--active{background:var(--surface-active);border-color:#8d3d1e70;box-shadow:inset 0 0 0 1px #8d3d1e14}.list-stack{display:grid;gap:.7rem;width:100%;max-width:100%;min-width:0}.list-card{display:grid;gap:.3rem;padding:.9rem 1rem;text-align:left;min-width:0}.list-card__title{font-weight:700}.list-card__subtitle{color:var(--muted);font-size:.94rem;line-height:1.5}.variation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.65rem}.variation-chip{min-height:3rem;padding:.75rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);color:var(--text);font:inherit;font-weight:700;transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.variation-chip:hover{transform:translateY(1px);border-color:var(--line-hover)}.variation-chip--active{background:var(--surface-active);border-color:#8d3d1e70;box-shadow:inset 0 0 0 1px #8d3d1e14}.instrument-grid .panel{background:linear-gradient(180deg,#fffdfaf0,#f9f2e8eb),var(--panel)}button.tag{border:none;outline:none;cursor:pointer;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.tag{display:inline-flex;align-items:center;min-height:2rem;padding:0 .75rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-size:.84rem;font-weight:700;white-space:nowrap}.voicing-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}.detail-block{display:grid;gap:.2rem}.detail-label{margin:0;color:var(--muted);font-size:.88rem}.detail-value{margin:0;font-size:1rem;line-height:1.5}.play-button{min-height:3rem;padding:.9rem 1.25rem;background:linear-gradient(145deg,#d86d3c,#c85a24);border-color:#8d3d1e73;color:#fff8f3;font-weight:700;box-shadow:0 12px 26px #c85a2433}.ghost-button{min-height:2.5rem;padding:.65rem 1rem;color:var(--accent-deep);font-weight:700}.mini-button{min-height:2rem;padding:.4rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--accent-deep);font:inherit;font-size:.85rem;font-weight:700;transition:transform .14s ease,border-color .14s ease,background .14s ease}.mini-button:hover{transform:translateY(1px);border-color:var(--line-hover)}.mini-button--active{background:var(--surface-active);border-color:#8d3d1e70}.theme-toggle{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--accent-deep);cursor:pointer;flex-shrink:0;transition:transform .14s ease,border-color .14s ease,background .14s ease}.theme-toggle:hover{transform:translateY(1px);border-color:var(--line-hover)}.theme-toggle svg{width:1.1rem;height:1.1rem}.guitar-diagram{display:grid;gap:.5rem;margin-bottom:.9rem}.guitar-diagram__top,.guitar-diagram__labels{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;justify-items:center}.guitar-diagram__top{min-height:1.2rem}.guitar-diagram__marker,.guitar-diagram__labels span{min-width:1ch;font-size:.88rem;color:var(--muted)}.guitar-diagram__frame{position:relative}.guitar-diagram--offset .guitar-diagram__top,.guitar-diagram--offset .guitar-diagram__frame,.guitar-diagram--offset .guitar-diagram__labels{padding-left:2.35rem}.guitar-diagram__base-fret{position:absolute;top:.65rem;left:0;color:var(--muted);font-size:.8rem;font-weight:700}.guitar-diagram__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;min-height:12rem}.guitar-diagram__cell{position:relative;min-height:3rem;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line)}.guitar-diagram__cell:nth-child(6n+1){border-left:1px solid var(--grid-line)}.guitar-diagram__cell--top{border-top:1px solid var(--grid-line)}.guitar-diagram__cell--nut{border-top:4px solid var(--grid-line-nut)}.guitar-diagram__dot{position:absolute;inset:50% auto auto 50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #d86d3c2e}.tab-panel{margin:0;padding:.85rem 1rem;border-radius:1rem;background:var(--tab-bg);color:var(--tab-text);overflow-x:auto;-webkit-overflow-scrolling:touch}.keyboard-shell{position:relative;width:fit-content;max-width:100%;margin-top:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.keyboard-shell::-webkit-scrollbar{display:none}.keyboard{position:relative}.keyboard--white{display:grid;grid-template-columns:repeat(16,var(--white-key-width))}.keyboard--black{position:absolute;inset:0 auto auto 0;width:calc(16 * var(--white-key-width));height:100%;pointer-events:none}.key{border:1px solid var(--key-border);border-radius:0 0 .45rem .45rem}.key--white{position:relative;height:10.5rem;background:var(--key-white-bg)}.key__label{position:absolute;bottom:.75rem;left:0;right:0;text-align:center;font-size:.62rem;font-weight:700;line-height:1;pointer-events:none}.key__label--passive{color:var(--label-passive)}.key__label--active{color:var(--label-active)}.key--black .key__label{bottom:.35rem;font-size:.5rem;color:#fff8f0d9}.key__octave{position:absolute;bottom:.25rem;left:0;right:0;text-align:center;font-size:.5rem;font-weight:600;color:var(--label-octave);line-height:1;pointer-events:none}.key--black{position:absolute;top:0;width:calc(var(--white-key-width) * .62);height:6.4rem;background:var(--key-black-bg);border-color:var(--key-black-border);transform:translate(calc(var(--white-key-width) * -.31))}.key--active.key--white{background:linear-gradient(180deg,#f9b48d,#e58a58)}.key--active.key--black{background:linear-gradient(180deg,#ffbb8f,#cf6b35)}.fine-print{margin:.75rem 0 0;color:var(--muted);font-size:.86rem}@media (min-width: 940px){.workspace{grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);align-items:start}.workspace--landing{align-items:stretch}.instrument-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}@media (max-width: 939px){:root{--app-gutter: .85rem}.workspace{gap:1rem}.section-heading,.card-header{gap:.85rem}.hero-card__meta{align-items:stretch}.play-button{width:100%}}@media (max-width: 720px){:root{--app-gutter: .7rem;--hero-pad-v: 1.02rem;--hero-pad-h: 1.08rem;--white-key-width: clamp(1.2rem, calc(6.25vw - .21rem) , 2rem)}.app-shell{width:min(100vw - (var(--app-gutter) * 2),100%)}.page-header{margin-bottom:1rem}.page-header h1{font-size:clamp(2.25rem,10vw,2.85rem)}.hero-card,.panel{border-radius:1.15rem}.workspace--landing .hero-card--empty{display:none}.panel{padding:.95rem}.hero-card__description,.page-header__lede,.list-card__subtitle,.detail-value{font-size:.96rem}.section-note--mobile{display:block}.card-header{flex-wrap:wrap}.ghost-button,.tag{align-self:flex-start}.section-actions .ghost-button,.section-actions .tag{align-self:center}.chip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.chip,.play-button{min-height:3.15rem}.list-card{padding:.85rem .9rem}.list-stack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(12rem,74vw);gap:.65rem;overflow-x:auto;padding-bottom:.35rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.list-card{min-height:4.6rem;align-content:start;scroll-snap-align:start}.list-card__subtitle{display:none}.variation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.variation-chip{min-height:3.15rem}.mini-button{min-height:2.35rem;padding:.45rem .8rem}.guitar-diagram__cell{min-height:2.4rem}.tab-panel{padding:.8rem .9rem;font-size:.92rem}.keyboard-shell{max-width:calc(100vw - (var(--app-gutter) * 2) - 1.9rem);padding-bottom:.2rem}.key--white{height:8.75rem}.key--black{height:5.45rem}}@media (max-width: 560px){.app-shell{padding-bottom:calc(2.25rem + env(safe-area-inset-bottom))}.page-header h1{letter-spacing:-.04em}.eyebrow{font-size:.72rem}.section-note{font-size:.9rem}.chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.list-stack{grid-auto-columns:minmax(11rem,82vw)}.variation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-button{width:100%}.voicing-nav .mini-button,.key-drawer__tabs .mini-button{width:auto}.guitar-diagram__top,.guitar-diagram__labels{gap:.25rem}.guitar-diagram__cell{min-height:2rem}}.key-context-trigger{display:flex;align-items:center;justify-content:center;gap:.4rem;width:calc(100% + var(--hero-pad-h) * 2);margin:0 calc(-1 * var(--hero-pad-h)) calc(-1 * var(--hero-pad-v));padding:.6rem var(--hero-pad-h);border:none;border-top:1px solid var(--line);background:transparent;color:var(--accent-deep);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:background .14s ease}.key-context-trigger:hover{background:#d86d3c12}.key-context-trigger svg{width:.8rem;height:.8rem;transition:transform .22s ease}.key-context-trigger--open svg{transform:rotate(180deg)}.key-drawer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}.key-drawer-wrap--open{grid-template-rows:1fr}.key-drawer-wrap>*{overflow:hidden;padding-top:.75rem}.key-drawer__panel{padding:1rem var(--hero-pad-h) var(--hero-pad-v);background:var(--panel);border:1px solid var(--line);border-radius:1.4rem;box-shadow:var(--shadow)}.key-drawer__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}.key-drawer__header .eyebrow{margin:0}.key-drawer__tabs{display:flex;gap:.4rem;flex-wrap:wrap}.key-drawer__chords{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}.key-drawer__chord{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .2rem;border:1px solid var(--line);border-radius:.85rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}.key-drawer__chord:not(:disabled):hover{transform:translateY(1px);border-color:var(--line-hover)}.key-drawer__chord--active{background:var(--surface-active);border-color:#8d3d1e70}.key-drawer__roman{font-size:.6rem;font-weight:700;color:var(--muted);line-height:1;letter-spacing:.04em}.key-drawer__chord--active .key-drawer__roman{color:var(--accent-deep)}.key-drawer__name{font-size:.75rem;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media (max-width: 720px){.key-drawer__panel{border-radius:1.15rem}}:root[data-theme=dark]{color-scheme:dark;--bg: #18120e;--bg-top: #1f1812;--panel: #201a13;--panel-strong: #261f17;--line: rgba(255, 200, 150, .1);--line-hover: rgba(240, 152, 98, .3);--text: #ede3d5;--muted: #9e8878;--accent: #e07848;--accent-deep: #f09862;--accent-soft: #3d2416;--shadow: 0 24px 60px rgba(0, 0, 0, .5);--surface: rgba(36, 28, 20, .9);--surface-active: linear-gradient(145deg, rgba(224, 120, 72, .22), rgba(36, 28, 20, .95));--grid-line: rgba(255, 190, 140, .13);--grid-line-nut: rgba(255, 190, 140, .4);--key-border: rgba(255, 200, 150, .08);--key-black-border: rgba(255, 255, 255, .06);--key-white-bg: linear-gradient(180deg, #4e4038, #3c2e24);--key-black-bg: linear-gradient(180deg, #100d0a, #070503);--tab-bg: rgba(7, 4, 2, .97);--tab-text: #f0d5b8;--label-passive: rgba(255, 220, 180, .2);--label-octave: rgba(255, 220, 180, .15);--label-active: #2a1c10}[data-theme=dark] .hero-card{background:linear-gradient(145deg,#32261ab3,#20181099),var(--panel-strong)}[data-theme=dark] .instrument-grid .panel{background:linear-gradient(180deg,#261e1680,#1c160fb3),var(--panel)}