:root{--color-bg:#f7f2e8;--color-surface:#fffdf8;--color-sunk:#efe7d6;--color-text:#221d16;--color-muted:#625a4d;--color-line:#d8ccb4;--color-accent:#b4490e;--color-accent-ink:#fff;--color-accent-soft:#f6dcc4;--color-focus:#1f5fbf;--color-ok:#1f6f43;--color-notice:#7a4b00;--color-key-white:#fff;--color-key-black:#2a241c;--color-key-on:#e07a2f;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--radius:.625rem;--radius-small:.375rem;--shadow:0 1px 0 #221d160f, 0 6px 18px -10px #221d1640;--font-body:system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-small:.875rem;--text-body:1rem;--text-large:1.25rem;--text-chord:1.5rem;--text-title:2rem;--motion:.18s cubic-bezier(.2, .7, .2, 1);--transport-height:7.5rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#15171c;--color-surface:#1d2027;--color-sunk:#262a33;--color-text:#f1ece2;--color-muted:#b3ab9c;--color-line:#3a3f4a;--color-accent:#f0a25e;--color-accent-ink:#1a1206;--color-accent-soft:#4a3220;--color-focus:#8ab4ff;--color-ok:#6fd39b;--color-notice:#f3c26b;--color-key-white:#e9e4da;--color-key-black:#0d0e11;--color-key-on:#f0a25e;--shadow:0 1px 0 #0000004d, 0 8px 22px -12px #000000b3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--color-bg:#15171c;--color-surface:#1d2027;--color-sunk:#262a33;--color-text:#f1ece2;--color-muted:#b3ab9c;--color-line:#3a3f4a;--color-accent:#f0a25e;--color-accent-ink:#1a1206;--color-accent-soft:#4a3220;--color-focus:#8ab4ff;--color-ok:#6fd39b;--color-notice:#f3c26b;--color-key-white:#e9e4da;--color-key-black:#0d0e11;--color-key-on:#f0a25e;--shadow:0 1px 0 #0000004d, 0 8px 22px -12px #000000b3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);margin:0;line-height:1.5}h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.2}h2{font-size:var(--text-large)}h3{font-size:var(--text-body);margin-top:var(--space-4)}a{color:var(--color-accent)}code{font-family:var(--font-mono)}button,input,select{font:inherit;color:inherit}button{min-height:2.75rem;padding:var(--space-2) var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-small);background:var(--color-surface);cursor:pointer;transition:background var(--motion), border-color var(--motion), transform var(--motion)}button:hover:not(:disabled){border-color:var(--color-accent)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.5}button[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}input[type=text],input[type=number],select{width:100%;min-height:2.75rem;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-small);background:var(--color-surface)}input[type=range]{width:100%;min-height:2.75rem;accent-color:var(--color-accent)}input[type=checkbox]{width:1.5rem;height:1.5rem;accent-color:var(--color-accent)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{left:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-surface);border-radius:var(--radius-small);position:absolute;top:-3rem}.skip:focus{top:var(--space-2)}.muted{color:var(--color-muted)}.notice{color:var(--color-notice);font-size:var(--text-small);margin:var(--space-2) 0}.empty{color:var(--color-muted);margin:var(--space-4) 0}.app{max-width:72rem;padding:var(--space-4) var(--space-4) calc(var(--transport-height) + var(--space-6));margin:0 auto}.masthead{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.masthead h1{font-size:var(--text-title);letter-spacing:-.01em}.masthead__dot{background:var(--color-accent);border-radius:50%;width:.45em;height:.45em;margin-left:.12em;display:inline-block}.masthead__tag{margin:var(--space-1) 0 0;color:var(--color-muted)}.theme-toggle{font-size:var(--text-small);white-space:nowrap}.layout,.layout__pair{gap:var(--space-4);display:grid}@media (width>=60rem){.layout__pair{grid-template-columns:1.15fr 1fr;align-items:start}}.panel{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);min-width:0}.panel__head{justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.panel__head p{font-size:var(--text-small);margin:0}.field{gap:var(--space-1);min-width:0;display:grid}.field label{font-size:var(--text-small);font-weight:600}.field__hint{font-size:var(--text-small);color:var(--color-muted);margin:0}.field--check{align-items:center;gap:var(--space-2);display:flex}.settings{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.field--wide,.field--bpm{grid-column:1/-1}@media (width>=48rem){.settings{grid-template-columns:2fr 1fr 1fr 1fr 2fr;align-items:end}.field--wide,.field--bpm{grid-column:auto}}.bpm{gap:var(--space-2);grid-template-columns:5rem 1fr;align-items:center;display:grid}.bars{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}@media (width>=40rem){.bars{grid-template-columns:repeat(4,minmax(0,1fr))}}.bar{gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-small);background:var(--color-sunk);transition:border-color var(--motion), background var(--motion);border:2px solid #0000;padding-top:1.4rem;display:flex;position:relative}.bar--playing{border-color:var(--color-accent);background:var(--color-accent-soft)}.bar__number{top:.2rem;left:var(--space-2);color:var(--color-muted);font-variant-numeric:tabular-nums;font-size:.75rem;position:absolute}.slot{min-width:0;min-height:4.25rem;padding:var(--space-2) var(--space-1);background:var(--color-surface);flex:1 1 0;align-content:center;justify-items:center;gap:.1rem;display:grid;position:relative}.slot__symbol{font-family:var(--font-display);font-size:var(--text-chord);overflow-wrap:anywhere;font-weight:600;line-height:1.1}.bar--split .slot__symbol{font-size:var(--text-large)}.slot__roman{color:var(--color-muted);font-size:.8rem}.slot--empty .slot__symbol{color:var(--color-muted)}.slot--selected,.slot[aria-pressed=true]{border:2px solid var(--color-accent);background:var(--color-surface);box-shadow:0 0 0 3px var(--color-accent-soft)}.slot__lock{font-size:.75rem;position:absolute;top:.15rem;right:.25rem}.toolbar,.actions,.tabs,.stepper{gap:var(--space-2);flex-wrap:wrap;display:flex}.toolbar{margin-top:var(--space-3)}.toolbar button{font-size:var(--text-small)}.dial{align-items:center;gap:var(--space-2);font-size:var(--text-small);grid-template-columns:auto 1fr auto;font-weight:600;display:grid}.idea-list{margin:var(--space-3) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.idea{gap:var(--space-2);grid-template-columns:1fr auto;display:grid}.idea__use{gap:var(--space-1) var(--space-3);text-align:left;padding:var(--space-2) var(--space-3);grid-template-columns:3.25rem 1fr;align-items:center;display:grid}.idea__chord{grid-row:span 2;display:grid}@media (width>=40rem){.idea__use{grid-template-columns:4.5rem 1fr}}.idea__symbol{font-family:var(--font-display);font-size:var(--text-large);font-weight:600}.idea__roman{color:var(--color-muted);font-size:.8rem}.idea__why{font-size:var(--text-small)}.idea__tags{gap:var(--space-1);flex-wrap:wrap;display:flex}.tag{padding:0 var(--space-2);background:var(--color-sunk);color:var(--color-muted);border-radius:999px;font-size:.75rem}.idea__hear{min-width:2.75rem;color:var(--color-accent);padding:0}.voicing__controls{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.voicing__views{gap:var(--space-4);margin-top:var(--space-4);display:grid}.voicing__guitar{justify-items:center;gap:var(--space-2);display:grid}.voicing__shape{margin:0}.guitar{width:min(13rem,100%);height:auto}.guitar__fret,.guitar__string{stroke:var(--color-muted);stroke-width:1.2px}.guitar__nut{fill:var(--color-text)}.guitar__dot{fill:var(--color-accent)}.guitar__open{fill:none;stroke:var(--color-text);stroke-width:1.6px}.guitar__mark,.guitar__base,.guitar__note{fill:var(--color-text);font-size:13px;font-family:var(--font-body)}.guitar__note{fill:var(--color-muted);font-size:11px}.piano{gap:var(--space-2);margin:0;display:grid}.piano svg{width:100%;height:auto}.piano figcaption{font-size:var(--text-small);text-align:center}.piano__white{fill:var(--color-key-white);stroke:var(--color-line)}.piano__black{fill:var(--color-key-black)}.piano__white--on,.piano__black--on{fill:var(--color-key-on)}.piano__dot{fill:var(--color-accent-ink)}.stepper{font-size:var(--text-small);justify-content:center;align-items:center}.preset{gap:var(--space-1);margin-bottom:var(--space-4);display:grid}.preset label{font-size:var(--text-small);font-weight:600}.preset__row{gap:var(--space-2);grid-template-columns:1fr auto;display:grid}.saved{margin:var(--space-2) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.saved li{gap:var(--space-2);grid-template-columns:1fr auto auto auto;align-items:center;display:grid}.saved__title{overflow-wrap:anywhere}.transport{z-index:10;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-line);grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px -16px #00000059}.transport>.field{grid-column:span 2}.transport__play{background:var(--color-accent);border-color:var(--color-accent);min-height:3rem;color:var(--color-accent-ink);grid-column:1/4;font-weight:700}.transport__play[aria-pressed=true]{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}.transport__status{font-size:var(--text-small);color:var(--color-muted);font-variant-numeric:tabular-nums;grid-column:4/7;align-self:center;margin:0}@media (width>=48rem){.transport{padding-left:max(var(--space-4), calc((100vw - 72rem) / 2 + var(--space-4)));padding-right:max(var(--space-4), calc((100vw - 72rem) / 2 + var(--space-4)));grid-template-columns:12rem 1fr 12rem 10rem auto;align-items:center}.transport__play,.transport__status,.transport>.field{grid-column:auto}:root{--transport-height:4.5rem}}.about{margin-top:var(--space-8);color:var(--color-muted);font-size:var(--text-small);max-width:44rem}.about summary{cursor:pointer;color:var(--color-text);align-items:center;min-height:2.75rem;font-weight:600;display:flex}.about h2{font-size:var(--text-body);color:var(--color-text);margin-top:var(--space-4)}.about__maker{margin-top:var(--space-4)}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}