:root{color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg: #eee;--surface: transparent;--panel-soft: transparent;--border-strong: rgba(18, 37, 47, .12);--text: #445660;--text-strong: #16252f;--muted: #70828b;--muted-strong: #556a74;--accent: #d71920;--accent-strong: #a80f15;--accent-soft: rgba(215, 25, 32, .12);--accent-wash: rgba(215, 25, 32, .08);--accent-border: rgba(215, 25, 32, .34);--accent-shadow: rgba(215, 25, 32, .14);--shadow-soft: 0 12px 32px rgba(13, 26, 32, .06), 0 2px 8px rgba(13, 26, 32, .04);--display: Optima, "Avenir Next", Avenir, sans-serif;--sans: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;font-family:var(--sans);line-height:1.5;color:var(--text);background:var(--bg)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:960px}body,button,input{font:inherit}button{color:inherit}#root{width:min(1440px,calc(100% - 32px));margin:0 auto;padding:24px 0 32px}h1,h2,h3,h4{margin:0;color:var(--text-strong);font-family:var(--display);line-height:1.06}h1{font-size:clamp(2.6rem,4vw,4rem);letter-spacing:-.04em}h2{font-size:1.55rem;letter-spacing:-.03em}h3{font-size:1.15rem;letter-spacing:-.02em}p{margin:0}::selection{background:#d7192038}.app-shell{display:flex;flex-direction:column;gap:0}.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:6px 0 18px}.page-header h1{margin:0}.page-subtitle{margin-top:8px;color:var(--muted-strong)}.audio-status{margin:0;color:var(--muted);font-size:.95rem;text-align:right}.audio-status.is-ready{color:var(--text-strong)}.performance-sticky{position:sticky;top:0;z-index:20;background:var(--bg)}.keyboard-section{padding:6px 0 22px;border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}.keyboard-shell{width:100%}.keyboard-frame{--white-key-width: calc(100% / var(--white-count));--black-key-width: calc(var(--white-key-width) * .62);--white-key-height: clamp(210px, 24vw, 310px);--black-key-height: calc(var(--white-key-height) * .62);position:relative;width:100%;padding-top:10px}.white-keys{display:grid;grid-template-columns:repeat(var(--white-count),minmax(0,1fr));align-items:stretch;height:var(--white-key-height)}.black-keys{position:absolute;inset:0 0 auto;height:var(--black-key-height);pointer-events:none}.piano-key{position:relative;border:none;cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .16s ease,background .16s ease}.piano-key:hover{transform:translateY(-1px)}.piano-key:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}.white-key{display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;border-right:1px solid rgba(18,37,47,.12);border-bottom:1px solid rgba(18,37,47,.12);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#fff,#e7e7e7);box-shadow:inset 0 -10px 12px #0c1b230a}.white-key:first-child{border-radius:10px 0 10px 10px}.white-key:last-child{border-right:none;border-radius:0 10px 10px}.black-key{pointer-events:auto;position:absolute;top:0;left:calc((100% / var(--white-count) * var(--key-index)) - (var(--black-key-width) / 2));width:var(--black-key-width);height:var(--black-key-height);border-radius:0 0 8px 8px;background:linear-gradient(180deg,#2a3138,#11161a);box-shadow:0 8px 16px #0a121633}.white-key.is-selected{background:linear-gradient(180deg,#fff8f8,#ffb9bd);box-shadow:inset 0 -12px 16px #d719202e,0 8px 18px var(--accent-shadow)}.white-key.is-selected:after,.black-key.is-selected:after{content:"";position:absolute;inset:auto 12px 10px;height:4px;border-radius:999px;background:var(--accent)}.black-key.is-selected{background:linear-gradient(180deg,#ffd5d7,#f04d55 62%,#d71920);box-shadow:0 10px 18px var(--accent-shadow),inset 0 -10px 14px #800b121f}.black-key.is-selected:after{background:#8f0d12}.key-note-mark{font-size:.78rem;font-weight:500;color:var(--text-strong);-webkit-user-select:none;user-select:none}.key-note-mark-muted{font-weight:400;color:#12252fa6}.key-note-mark-black{position:absolute;right:0;bottom:-28px;left:0;color:var(--text-strong);text-align:center}.selection-section{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;min-height:112px;border-bottom:1px solid var(--border-strong)}.selection-section.is-empty{min-height:92px}.selection-action-button{border:none;background:transparent;color:var(--text-strong);font-weight:700;cursor:pointer;transition:color .14s ease}.selection-action-button:hover:not(:disabled){color:var(--accent)}.selection-action-button:disabled{cursor:not-allowed;color:var(--muted)}.clear-button{border-right:1px solid rgba(18,37,47,.1);text-align:left;padding:0 0 0 2px}.play-selection-button{border-left:1px solid rgba(18,37,47,.1);text-align:right;padding:0 2px 0 0}.selection-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:18px 0}.selection-blank{min-height:52px}.selection-note-line{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;color:var(--text-strong);font-size:1.05rem;font-weight:800}.selection-chord-name{font-size:1.7rem;line-height:1.1;color:var(--text-strong);font-family:var(--display);letter-spacing:-.03em;text-align:center}.workspace-section{padding-top:16px}.tab-row{display:flex;gap:24px;border-bottom:1px solid rgba(18,37,47,.12)}.tab-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:0 0 12px;cursor:pointer;color:var(--muted-strong);font-weight:700;transition:color .14s ease,border-color .14s ease}.tab-button:hover{color:var(--text-strong)}.tab-button.is-active{color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--accent)}.workspace-body{padding:18px 0 0}.panel-card{display:flex;flex-direction:column;gap:18px}.panel-head,.panel-head-progressions{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.panel-head h2,.panel-head-progressions h2{margin:0}.panel-copy{margin-top:6px;color:var(--muted-strong)}.tonality-controls{display:flex;gap:12px;align-items:end}.tonality-controls label{display:grid;gap:6px;color:var(--muted);font-size:.82rem;font-weight:700}.tonality-controls select{min-width:112px;border:1px solid rgba(18,37,47,.14);border-radius:10px;background:#ffffffb8;color:var(--text-strong);padding:8px 30px 8px 10px;font:inherit}.preset-matrix{overflow-x:auto}.preset-matrix-header,.preset-matrix-row{display:grid;grid-template-columns:104px repeat(7,minmax(112px,1fr));gap:10px;min-width:940px}.preset-matrix-header{align-items:end;margin-bottom:10px}.preset-matrix-row{align-items:stretch;margin-bottom:10px}.preset-corner,.preset-column-label,.preset-quality-label{color:var(--muted);font-size:.88rem;font-weight:700}.preset-column-label{color:var(--text-strong);text-align:center}.preset-quality-label{display:flex;align-items:center;min-height:78px;color:var(--text-strong)}.preset-cell{min-height:78px}.preset-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:78px;padding:12px 14px;border:1px solid rgba(18,37,47,.1);border-radius:12px;background:#ffffffa6;cursor:pointer;text-align:left;transition:transform .12s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.preset-card:hover{transform:translateY(-1px);border-color:var(--accent-border);background:#fff2f3eb;box-shadow:0 10px 20px #12252f0d}.preset-card.is-active{border-color:#d719207a;background:#ffe2e4f5;box-shadow:0 10px 20px var(--accent-shadow)}.preset-card-name{color:var(--text-strong);font-size:1rem;font-weight:800}.preset-card-notes{color:var(--muted-strong);font-size:.92rem}.preset-card-degree{color:var(--muted);font-size:.8rem}.preset-empty{display:block;width:100%;min-height:78px;border:1px dashed rgba(18,37,47,.06);border-radius:12px}.preset-card-meta{color:var(--muted);font-size:.8rem}.tempo-control{display:grid;gap:8px;min-width:220px;color:var(--text-strong);font-size:.95rem;font-weight:700}.tempo-control input{width:100%;accent-color:var(--accent)}.progression-grid{display:flex;flex-direction:column;gap:0}.progression-card{display:flex;flex-direction:column;gap:14px;padding:18px 0;border-bottom:1px solid rgba(18,37,47,.08)}.progression-card.is-running{border-bottom-color:#d7192059}.progression-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.progression-head h3{margin:0;font-size:1.1rem}.progression-head p,.progression-copy{margin:4px 0 0;color:var(--muted-strong)}.progression-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(18,37,47,.14);border-radius:999px;background:transparent;padding:8px 14px;cursor:pointer;color:var(--text-strong);font-weight:700}.progression-button:hover{border-color:#d7192073;color:var(--accent-strong)}.progression-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px}.progression-step{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:#12252f08;border:1px solid rgba(18,37,47,.08)}.progression-step span{font-size:.78rem;color:var(--muted)}.progression-step strong{color:var(--text-strong)}.progression-step.is-current{background:var(--accent-soft);border-color:var(--accent-border)}@media(max-width:1080px){.progression-grid{gap:0}}@media(max-width:900px){.page-header,.panel-head,.panel-head-progressions,.progression-head{flex-direction:column;align-items:flex-start}.selection-section{grid-template-columns:1fr}.selection-action-button{min-height:54px;padding:0}.clear-button{border-right:none;border-bottom:1px solid rgba(18,37,47,.1)}.play-selection-button{border-left:none;border-top:1px solid rgba(18,37,47,.1);text-align:left}.preset-matrix-header,.preset-matrix-row{grid-template-columns:92px repeat(7,minmax(104px,1fr));min-width:850px}}