#harmonyView{max-width:1200px;margin:24px auto;padding:0 20px;color:#173b2c;font-size:1rem}#harmonyView[hidden]{display:none}#harmonyView>header{margin-bottom:20px}#harmonyView h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:10px 0}#harmonyView p{line-height:1.6}#tetradWorkspace{border:1px solid #b5cdbd;border-radius:18px;background:#f6fbf7;padding:24px}.th-controls{display:flex;flex-wrap:wrap;gap:20px;align-items:end;margin-bottom:18px}.th-controls fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.th-controls legend,.th-controls label{font-size:1rem;font-weight:700}.th-controls legend{margin-bottom:8px}.th-controls label{display:grid;gap:8px}#harmonyView button,#harmonyView select,#harmonyView input{font-size:1rem;padding:10px 14px;min-height:44px;border:1px solid #9fbba8;border-radius:8px;background:#fff;color:#173b2c}#harmonyView button{cursor:pointer}#harmonyView button[aria-pressed=true]{background:#173b2c;color:#fff;border-color:#173b2c}#harmonyView button:focus-visible,.th-board-scroll:focus-visible{outline:3px solid #168f59;outline-offset:3px}#harmonyView button:disabled{opacity:.45;cursor:default}.th-controls input{width:100px}.th-summary{display:flex;align-items:center;gap:24px;border-left:4px solid #218458;background:#e5f3e9;padding:16px 20px;border-radius:4px;line-height:1.8}.th-summary>strong{font-size:2rem}.th-legend span{color:#c92031}.th-boards{display:grid;gap:20px}.th-card{background:#fff;border:1px solid #b8cebf;border-radius:12px;padding:18px;min-width:0}.th-card header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}.th-card h2{font-size:1.2rem;margin:0}.th-card header span{font-size:.9rem}.th-board-scroll{overflow-x:auto;margin:12px 0}.th-board-scroll svg{display:block;width:100%;min-width:620px;height:auto;color:#332f24;font-size:15px;font-weight:700}.th-note circle{fill:#26382e;stroke:#fff;stroke-width:1.5}.th-note text{fill:white;font-size:14px}.th-root circle{fill:#c92031}.th-playing circle{fill:#f6c53e;stroke:#173b2c;stroke-width:3}.th-playing text{fill:#173b2c}.th-swipe{font-size:.9rem;display:none}.th-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:20px 0}.th-practice{margin-top:20px;padding:20px;background:#e5f3e9;border-radius:12px}.th-practice li{line-height:1.6;margin-bottom:8px}.th-practice+button{margin-top:20px}.home-feature-card.card-tetrads{--cover:url('card-tool-02.png')}@media(max-width:700px){#harmonyView{padding:0 12px}#tetradWorkspace{padding:16px}.th-summary{gap:15px;align-items:start}.th-summary>strong{font-size:1.6rem}.th-card{padding:12px}.th-swipe{display:block}.th-next{justify-content:start}.th-next span{width:100%;order:-1}}
.th-derivation{margin:18px 0;padding:18px 20px;border:1px solid #c8cfc6;border-left:4px solid #548d35;background:#fff;color:#173b2c;border-radius:3px}
.th-derivation h2{margin:0;font-size:1.25rem;line-height:1.4}
.th-derivation p{margin:12px 0 0;font-size:1rem;line-height:1.65}
.th-compare{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.th-formula-comparison{font-variant-numeric:tabular-nums}
#harmonyView .th-summary{flex-wrap:wrap;overflow-wrap:anywhere}
#harmonyView .th-summary>div{min-width:0}
#harmonyView .th-summary>strong{font-size:clamp(1.3rem,4vw,2rem)}
#harmonyView .th-controls label{min-width:0;max-width:100%}
#harmonyView .th-controls select{max-width:100%}
#harmonyView .th-card,#harmonyView #tetradWorkspace,#harmonyView .th-practice{border-radius:3px}
#harmonyView .th-note .th-change-ring{fill:none;stroke:#365b29;stroke-width:2;stroke-dasharray:4 3}
#harmonyView .th-playing .th-change-ring{fill:none;stroke:#365b29;stroke-width:2}
#harmonyView .th-practice details{margin-top:16px;border-top:1px solid #aabbaa;padding-top:14px}
#harmonyView .th-practice summary{cursor:pointer;min-height:44px;font-weight:700}
#harmonyView .th-practice a{color:#365b29;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.th-derivation{padding:14px}.th-controls #thCategories{width:100%}.th-compare button{width:100%;overflow-wrap:anywhere}}