:root{--color-paper: #f7f7f2;--color-ink: #111111;--color-muted: #77776f;--color-rule: #d8d7cf;--color-accent: #2457ff;--color-accent-soft: #eef1ff;--color-error: #b42318;--font-display: "Instrument Sans", "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "Geist Mono", "SFMono-Regular", Menlo, monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--border-thin: 1px solid var(--color-rule);--transition-fast: .16s ease}*{box-sizing:border-box}html{background:var(--color-paper)}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}button,textarea,input{font:inherit}button{color:inherit}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.app-shell{min-height:100vh;padding:var(--space-5)}.topbar{align-items:center;border-bottom:var(--border-thin);display:flex;gap:var(--space-4);justify-content:space-between;padding-bottom:var(--space-4)}.wordmark{font-family:var(--font-display);font-size:.875rem;letter-spacing:.08em;margin:0;text-transform:uppercase}.topbar__status{color:var(--color-muted);font-size:.8125rem;margin:var(--space-1) 0 0}.transport{align-items:center;display:flex;gap:var(--space-2)}.bpm-control{align-items:center;border:var(--border-thin);display:flex;gap:var(--space-2);min-height:2.25rem;padding:0 var(--space-2)}.bpm-control span,.field-label,.eyebrow,.section-heading p,.detail-list dt{color:var(--color-muted);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}.bpm-control input{background:transparent;border:0;color:var(--color-ink);font-family:var(--font-mono);inline-size:3.75rem;outline:0}.button{align-items:center;background:transparent;border:var(--border-thin);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;justify-content:center;min-height:2.25rem;padding:0 var(--space-3);transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.button:hover,.button:focus-visible{border-color:var(--color-accent);outline:0}.button:disabled{color:var(--color-muted);cursor:not-allowed}.button--primary{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.button--icon{inline-size:2.25rem;padding:0}.button__icon{block-size:1rem;fill:currentColor;inline-size:1rem}.hero-panel{align-items:end;border-bottom:var(--border-thin);display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1.5fr) minmax(16rem,.5fr);padding:var(--space-7) 0}.hero-panel h1{font-family:var(--font-display);font-size:4.5rem;font-weight:500;line-height:.96;margin:var(--space-3) 0 0;max-inline-size:50rem}.hero-panel__copy{color:var(--color-muted);font-size:1rem;line-height:1.5;margin:0;max-inline-size:22rem}.workspace,.analysis-layout{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr) 20rem}.workspace{border-bottom:var(--border-thin);padding:var(--space-5) 0}.composer,.library,.analysis-panel,.detail-panel{min-width:0}.composer__label-row{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.button--roll{inline-size:2.25rem;padding:0}.button--roll__icon{block-size:1rem;fill:currentColor;flex:0 0 auto;inline-size:1rem;stroke:currentColor;stroke-width:1.5;transform-origin:center}.button--roll.is-rolling .button--roll__icon{animation:dice-roll .42s ease}.progression-input{background:transparent;border:0;border-bottom:var(--border-thin);color:var(--color-ink);display:block;font-family:var(--font-mono);font-size:3rem;inline-size:100%;line-height:1.14;min-height:11rem;outline:0;padding:var(--space-3) 0 var(--space-4);resize:vertical}.progression-input:focus{border-color:var(--color-accent)}@keyframes dice-roll{0%{transform:rotate(0) translateY(0)}30%{transform:rotate(-18deg) translateY(-1px)}68%{transform:rotate(22deg) translateY(1px)}to{transform:rotate(0) translateY(0)}}.hint{color:var(--color-muted);font-size:.875rem;line-height:1.5;margin:var(--space-3) 0 0}.section-heading{align-items:baseline;border-bottom:var(--border-thin);display:flex;justify-content:space-between;margin-bottom:var(--space-3);padding-bottom:var(--space-2)}.section-heading h2{font-family:var(--font-display);font-size:.875rem;font-weight:600;margin:0;text-transform:uppercase}.section-heading p{margin:0}.library-list{display:grid;gap:0}.library-item{background:transparent;border:0;border-bottom:var(--border-thin);cursor:pointer;display:grid;gap:var(--space-2);grid-template-columns:minmax(0,1fr) 4rem 4rem;padding:var(--space-3) 0;text-align:left}.library-item:hover,.library-item:focus-visible{color:var(--color-accent);outline:0}.library-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-item__example,.library-item__formula,.chord-cell__symbol,.detail-symbol,.detail-list dd,.key{font-family:var(--font-mono)}.library-item__example,.library-item__formula{color:var(--color-muted);justify-self:end}.analysis-layout{padding:var(--space-5) 0 0}.chord-grid{border-left:var(--border-thin);border-top:var(--border-thin);display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.chord-cell{align-content:start;background:transparent;border:0;border-bottom:var(--border-thin);border-right:var(--border-thin);cursor:pointer;display:grid;gap:var(--space-2);min-height:11rem;padding:var(--space-3);position:relative;text-align:left}.chord-cell:before{background:transparent;content:"";height:2px;inset:0 0 auto;position:absolute}.chord-cell:hover,.chord-cell:focus-visible,.chord-cell.is-selected{outline:0}.chord-cell:hover .chord-cell__symbol,.chord-cell:focus-visible .chord-cell__symbol,.chord-cell.is-selected .chord-cell__symbol{color:var(--color-accent)}.chord-cell.is-active:before{background:var(--color-accent)}.chord-cell__symbol{font-size:2rem;line-height:1}.chord-cell span{color:var(--color-muted);font-size:.875rem;line-height:1.45}.chord-cell b{color:var(--color-ink);font-weight:600}.chord-cell.has-error{color:var(--color-error)}.chord-cell__error{color:var(--color-error)!important}.chord-detail{display:grid;gap:var(--space-4)}.detail-title-row{align-items:center;display:flex;justify-content:space-between}.detail-symbol{font-size:3rem;line-height:1;margin:0}.detail-list{border-top:var(--border-thin);display:grid;margin:0}.detail-list div{border-bottom:var(--border-thin);display:grid;grid-template-columns:7rem 1fr;padding:var(--space-3) 0}.detail-list dt,.detail-list dd{margin:0}.detail-description,.keyboard-hint,.advanced-panel__copy,.advanced-panel__empty,.detail-empty p{color:var(--color-muted);font-size:.9375rem;line-height:1.55;margin:0}.advanced-panel{border-top:var(--border-thin);padding-top:var(--space-3)}.advanced-panel summary{cursor:pointer;font-family:var(--font-display);font-size:.875rem;font-weight:600;text-transform:uppercase}.advanced-panel summary:focus-visible{color:var(--color-accent);outline:0}.advanced-panel__content{display:grid;gap:var(--space-3);padding-top:var(--space-3)}.advanced-panel__header{align-items:start;display:flex;gap:var(--space-3);justify-content:space-between}.advanced-panel__title{font-weight:600;margin:0 0 var(--space-1)}.pattern-strip{display:flex;flex-wrap:wrap;gap:var(--space-2)}.pattern-event{background:transparent;border:var(--border-thin);color:inherit;cursor:pointer;display:inline-flex;gap:1px;padding:2px}.pattern-event--root{border-color:var(--color-accent)}.pattern-event:hover,.pattern-event:focus-visible{border-color:var(--color-accent);outline:0}.pattern-note{align-items:center;background:transparent;display:inline-flex;font-family:var(--font-mono);font-size:.75rem;justify-content:center;min-inline-size:1.45rem;padding:.2rem .3rem}.pattern-note--root{background:var(--color-ink);color:var(--color-paper)}.keyboard{display:grid;gap:1px;grid-template-columns:repeat(12,minmax(0,1fr))}.key{align-items:end;background:transparent;border:var(--border-thin);border-radius:var(--radius-none);cursor:default;display:flex;font-size:.6875rem;justify-content:center;min-height:5.5rem;padding-bottom:var(--space-2);transition:border-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)}.key--black{background:var(--color-ink);color:var(--color-paper);min-height:3.75rem}.key.is-on{border-color:var(--color-accent);color:var(--color-accent);cursor:pointer}.key.is-bass{box-shadow:inset 0 -3px 0 var(--color-accent)}.key.is-on:hover,.key.is-on:focus-visible{outline:1px solid var(--color-accent);outline-offset:-1px}.key:disabled{cursor:default;opacity:.42}.site-footer{align-items:center;border-top:var(--border-thin);color:var(--color-muted);display:flex;font-size:.8125rem;justify-content:space-between;margin-top:var(--space-7);padding-top:var(--space-4)}.site-footer p{margin:0}.icon-link{align-items:center;block-size:2rem;color:var(--color-muted);display:inline-flex;inline-size:2rem;justify-content:center;transition:color var(--transition-fast)}.icon-link:focus-visible{color:var(--color-ink);outline:1px solid var(--color-ink);outline-offset:2px}@media (max-width: 900px){.app-shell{padding:var(--space-4)}.topbar,.hero-panel,.workspace,.analysis-layout{grid-template-columns:1fr}.topbar{align-items:stretch;display:grid}.transport{flex-wrap:wrap}.hero-panel{align-items:start}.hero-panel h1{font-size:3rem}.progression-input{font-size:2.25rem}}@media (max-width: 520px){.hero-panel h1{font-size:2.5rem}.progression-input{font-size:1.75rem}.library-item{grid-template-columns:minmax(0,1fr) 3.25rem}.library-item__formula{display:none}.detail-list div{grid-template-columns:1fr;gap:var(--space-1)}.keyboard{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (prefers-reduced-motion: reduce){.button--roll.is-rolling .button--roll__icon{animation:none}}