:root{color-scheme:light;--paper:#fff9f3;--ink:#462817;--muted:#887367;--line:#f0dfd0;--accent:#c44b0b;--soft:#fff0dd;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.45}button,select,input{outline-offset:5px}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ffad5e}button{transition:background .16s,transform .16s}header{height:100px;max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 48px}.brand{display:flex;align-items:center;gap:12px;border:0;background:none;font-weight:650;letter-spacing:1px}.brand-icon{background:var(--ink);color:white;border-radius:12px;font-size:30px;width:43px;height:43px;display:grid;place-items:center}.brand small{display:block;text-align:left;font-size:9px;letter-spacing:3px;margin-top:4px;color:var(--muted)}.offline{font-size:12px;color:var(--muted)}.offline i{display:inline-block;width:6px;height:6px;background:#ed822b;border-radius:50%;margin-right:6px}main{max-width:1104px;margin:auto;padding:0 48px;min-height:calc(100vh - 100px)}h1{font-size:46px;letter-spacing:-1.5px;font-weight:600;margin:20px 0}p{line-height:1.8}h2{font-size:15px;font-weight:600;margin:0}.section-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tool-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:28px;text-align:left;position:relative;box-shadow:0 5px 12px #78350808}.tool-card:hover{border-color:#f2a460;transform:translateY(-3px)}.tool-icon{display:grid;place-items:center;background:var(--soft);color:var(--accent);height:58px;width:58px;border-radius:16px;font-size:37px}h3{font-size:21px;font-weight:600;margin:22px 0 24px}.enter{display:flex;justify-content:space-between;font-size:13px;font-weight:600;padding-top:18px;border-top:1px solid var(--line)}.back{background:none;border:0;padding:15px 0;margin:14px 0;color:var(--muted);font-size:13px}.tool-heading{display:flex;align-items:end;justify-content:space-between;margin:6px 0 30px}.tool-heading h1{font-size:32px;margin:12px 0 0;letter-spacing:-.5px}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:24px;align-items:start}.chord-card{background:white;border:1px solid var(--line);border-radius:24px;padding:26px 32px 22px;text-align:center;min-height:432px}.card-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.card-top>span:last-child{color:#a26d45}.chord{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:57px 0 6px;font-size:100px;line-height:1.25;letter-spacing:-5px;font-weight:500;font-variant-numeric:lining-nums}.chord-name{font-size:13px;color:var(--muted);margin:0 0 42px}.primary{display:block;background:var(--accent);color:white;border:0;border-radius:12px;padding:15px 20px;width:100%;font-size:15px;font-weight:550}.primary:hover:not(:disabled){background:#a83b03}.primary>span{font-size:21px;vertical-align:-1px;margin-right:6px}.shortcut{font-size:10px;color:#958171;margin:14px 0 0}kbd{font:inherit;border:1px solid var(--line);border-radius:4px;padding:2px 5px}.status{font-size:12px;color:var(--accent);margin:10px 0 0;min-height:21px}.controls{background:#fff1e4;border:1px solid var(--line);padding:24px;border-radius:24px}.control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.control-header span{font-size:10px;color:var(--muted)}.field+.field{margin-top:23px}.field-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.field-label label{font-size:13px}.lock{border:1px solid #ebcdb3;border-radius:6px;background:transparent;font-size:11px;padding:5px 9px;color:var(--muted)}.lock[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}select{width:100%;padding:12px;background:white;color:var(--ink);border:1px solid #ecd7c6;border-radius:9px;font-size:16px}.field p{font-size:10px;color:var(--muted);margin:7px 0 0}details{border-top:1px solid #edcfb6;margin-top:25px;padding-top:18px}summary{font-size:12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}details[open] summary span{transform:rotate(45deg)}.detail-note{font-size:11px;color:var(--muted);margin-top:20px}.weight-row{display:grid;grid-template-columns:1fr 86px 52px;gap:10px;align-items:center;margin:10px 0;font-size:12px}.weight-row input{width:100%;padding:8px;border:1px solid #ebcdb3;border-radius:6px;background:white;color:var(--ink)}.weight-row output{text-align:right;color:var(--accent);font-size:11px}.error{font-size:11px;color:#ac4337}.text-button{background:none;border:0;padding:5px 0;font-size:11px;color:var(--accent)}.text-button:hover{text-decoration:underline}.rule-note{font-size:10px;line-height:1.8;color:var(--muted);margin-top:16px}.settings{display:flex;align-items:center;justify-content:space-between;margin:22px 0 48px;font-size:10px;color:var(--muted);gap:14px}.settings>div{display:flex;gap:18px}[hidden]{display:none!important}@media(max-width:700px){header{padding:0 22px;height:80px}main{padding:0 22px}h1{font-size:34px}.tool-grid,.workspace{grid-template-columns:1fr}.tool-heading{align-items:start;gap:15px}.chord-card{padding:23px;min-height:410px}.chord{font-size:88px}.settings{flex-wrap:wrap}.offline{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Compact welcome layout and bilingual product title. */
#home{padding:32px 0 48px}.brand{text-align:left}.brand small{letter-spacing:1.5px;font-size:9px}.tool-heading h1{margin-top:0}@media(max-width:700px){header{gap:14px}.brand{padding:0;font-size:14px;letter-spacing:0}.brand small{font-size:8px;letter-spacing:.7px}.brand-icon{width:36px;height:36px;flex-shrink:0}.offline{white-space:nowrap;font-size:9px}#home{padding-top:24px}}

.brand-icon{background:var(--accent);font-size:25px}.tool-icon{font-size:27px;font-weight:600;letter-spacing:-1px}.tool-heading>h1{margin:0}.practice-workspace{padding-bottom:24px}.practice-card{min-width:0}.practice-symbol{font-size:clamp(34px,5.5vw,66px);font-weight:550;letter-spacing:-2px;overflow-wrap:anywhere;margin:42px 0;line-height:1.3}.practice-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.secondary{border:1px solid #e6bc96;border-radius:12px;background:#fff5e9;padding:12px;color:var(--accent);font-size:14px}.secondary:hover:not(:disabled){background:#ffe6c9}.countdown{font-size:13px;color:var(--muted);min-height:24px;font-variant-numeric:tabular-nums}.answer-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:22px}.answer-heading>span{font-size:11px;color:var(--muted)}.answer-notes{font-size:24px;font-weight:550;word-spacing:8px;line-height:1.7;margin:14px 0 6px;overflow-wrap:anywhere}.keyboard{position:relative;height:166px;display:flex;isolation:isolate;margin-top:20px}.piano-key{position:relative;flex:1;min-width:0;background:white;border:1px solid #d8c6b6;border-right:0;border-radius:0 0 4px 4px;color:#6f5949}.piano-key:last-child{border-right:1px solid #d8c6b6}.piano-key.black{position:absolute;top:0;width:calc(100% / 22 * .64);height:62%;background:#48362b;border:1px solid #3e2c22;z-index:2;color:white}.piano-key.active{background:#ffb45f;color:#602a07}.piano-key.black.active{background:#e97218;border-color:#b84a06;color:white}.piano-key.bass{box-shadow:inset 0 -6px #a63606}.key-label{position:absolute;bottom:12px;left:0;width:100%;font-size:9px;line-height:1.3;writing-mode:vertical-rl;display:flex;align-items:center}.keyboard-caption{font-size:10px;color:var(--muted);margin:12px 0 0;line-height:1.8}.delay-input{padding:12px;border:1px solid #ecd7c6;border-radius:9px;width:100%;background:white;color:var(--ink)}.controls>h2+.field{margin-top:24px}.range-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:16px 0}.range-toolbar>span{font-size:10px;color:var(--muted)}.category{border:0;padding:0;margin:20px 0}.category legend{font-size:12px;font-weight:600;padding:0;margin-bottom:10px}.choice-list{display:flex;flex-wrap:wrap;gap:8px}.choice{display:flex;align-items:center;gap:5px;font-size:11px;border:1px solid #edd5bf;border-radius:7px;padding:7px 8px;background:#fffaf5;cursor:pointer}.choice:has(input:checked){background:#ffdfbd;border-color:#efb16e}.choice input,.category-toggle{accent-color:var(--accent);margin:0}.category legend label{display:flex;align-items:center;gap:7px;cursor:pointer}.catalog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}#practice-answer{animation:reveal .2s ease-out}@keyframes reveal{from{opacity:0}to{opacity:1}}@media(max-width:700px){.keyboard{height:155px}.practice-symbol{font-size:48px}.practice-actions{grid-template-columns:1fr 1fr}.practice-actions button{font-size:13px;padding:13px 8px}.answer-notes{font-size:22px}}@media(prefers-reduced-motion:reduce){#practice-answer{animation:none}}

.mode-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;background:#ffe4cb;border-radius:10px;padding:4px;margin:20px 0 24px}.mode-presets button{border:0;border-radius:7px;background:transparent;font-size:11px;padding:10px 3px;white-space:nowrap;color:#855332}.mode-presets button[aria-pressed=true]{background:var(--accent);color:white;box-shadow:0 2px 5px #74300318}.mode-presets button:hover:not([aria-pressed=true]){background:#fff2e5}.answer-notes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;word-spacing:normal}.answer-note{display:inline-flex;align-items:center;gap:7px;padding:4px 6px;line-height:1.5;border:2px solid transparent}.answer-note.inversion-bass{background:#ffe2bc;border:2px solid #c44b0b;border-radius:9px;color:#983807;font-weight:750}.answer-note small{font-size:10px;letter-spacing:0;background:var(--accent);color:white;padding:2px 5px;border-radius:4px;white-space:nowrap}.answer-note.avoid-note{color:#77716c}.answer-note.avoid-note.inversion-bass{background:#e5e2de}.bass-description{font-weight:650;color:var(--accent)}.avoid-legend{font-size:10px;color:#77716c;margin:8px 0}.piano-key.active.avoid,.piano-key.black.active.avoid{background:#aaa7a3;color:#292725;border-color:#84817e}.piano-key.active.avoid.bass{box-shadow:inset 0 -6px #a63606}

.chord>span:last-child:empty{display:none}.half-diminished-symbol{font-size:.55em;position:relative;top:-.55em;vertical-align:baseline;line-height:0;letter-spacing:0}

.answer-panel{width:100%;min-width:0;margin:0 0 48px;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center}.answer-panel .answer-heading{border:0;padding-top:0}.answer-panel .keyboard{height:220px;margin-top:22px}.answer-panel .key-label{writing-mode:horizontal-tb;justify-content:center;font-size:12px;bottom:15px}.answer-panel .keyboard-caption{margin-bottom:0}@media(max-width:700px){.answer-panel{padding:20px 12px}.answer-panel .keyboard{height:170px}.answer-panel .key-label{writing-mode:vertical-rl;font-size:10px;bottom:10px}}

/* Keep the keyboard near the question; secondary settings remain collapsed. */
#practice-tool>.back{padding:8px 0;margin:4px 0}#practice-tool>.tool-heading{margin:6px 0 16px}#practice-tool>.tool-heading h1{font-size:28px}.practice-workspace{gap:20px;padding-bottom:18px}.practice-card{min-height:0;padding:20px 26px}.practice-symbol{margin:20px 0 24px;font-size:clamp(34px,5vw,60px)}.practice-card .countdown{margin:10px 0 0}.practice-card .status:empty{display:none}.practice-workspace>.controls{padding:20px 24px}.practice-workspace .mode-presets{margin:14px 0 18px}.practice-workspace .notation-field{margin-top:0}#practice-more{margin-top:16px;padding-top:14px}.advanced-settings{padding-top:20px}.answer-panel{padding:20px 28px;margin-bottom:28px}.answer-panel .keyboard{margin-top:0;height:200px}.answer-panel .answer-heading{margin-top:18px}.answer-panel .answer-notes{margin:8px 0 4px;font-size:22px}.answer-panel #answer-bass{margin:4px 0}.answer-panel .keyboard-caption{margin-top:6px}@media(max-width:700px){.practice-card{padding:18px 20px}.practice-symbol{margin:16px 0 20px}.practice-workspace>.controls{padding:18px 20px}.answer-panel{padding:16px 12px}.answer-panel .keyboard{height:170px}.answer-panel .answer-notes{font-size:20px;gap:6px}}