.chords-view,.field-view{max-width:1300px;margin:auto}

.chords-head h1{font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.055em;margin:8px 0}

.chords-head p{color:var(--muted)}

.chord-workspace{margin-top:28px;background:linear-gradient(145deg,#111827,#080c14);border:1px solid #29344b;border-radius:20px;overflow:hidden}

.chord-section-heading{padding:24px 20px 0}
.chord-section-heading span{color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.14em}
.chord-section-heading h2{margin:7px 0;font-size:clamp(1.5rem,3vw,2.3rem)}
.chord-section-heading p{margin:0;color:var(--muted);line-height:1.55}

.chord-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding:20px;border-bottom:1px solid #29344b}

.chord-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.8rem;font-weight:800}

.chord-controls select{background:#161d2b;color:var(--text);border:1px solid #32405a;border-radius:9px;padding:10px}

.chord-controls button{align-self:end}

.chord-result{display:grid;grid-template-columns:.7fr 1fr 1fr;align-items:center;gap:35px;padding:clamp(24px,5vw,55px)}

.chord-name{display:flex;flex-direction:column}

.chord-name span,.chord-theory span{color:var(--cyan);font-size:.7rem;letter-spacing:.16em;font-weight:900}

.chord-name>strong{font-size:clamp(4rem,9vw,8rem);line-height:1}

.chord-name small{color:var(--muted);margin-top:10px}

.chord-diagram svg{width:100%;max-width:330px;height:auto}

.chord-theory{display:grid;gap:20px}

.chord-theory div{display:flex;flex-direction:column;gap:7px}

.chord-theory p{color:var(--muted);line-height:1.6}

.chord-string{stroke:#8995a8}

.chord-fret{stroke:#48536a}

.chord-dot{fill:var(--cyan);stroke:#d9fbff;stroke-width:2}

.chord-text{fill:#071019;text-anchor:middle;dominant-baseline:central;font-weight:900;font-size:12px}

.chord-muted{fill:#ff718e;text-anchor:middle;font-weight:900}

@media(max-width:850px){.chord-result{grid-template-columns:1fr 1fr}

.chord-theory{grid-column:1/-1}

.chord-controls{grid-template-columns:1fr 1fr}

.chord-controls button{grid-column:1/-1}

}

@media(max-width:520px){.chord-result,.chord-controls{grid-template-columns:1fr}

.chord-theory,.chord-controls button{grid-column:auto}

}

.drop-workspace{margin-top:24px;padding:clamp(22px,4vw,38px);border:1px solid #29344b;border-radius:20px;background:linear-gradient(145deg,#111827,#080c14)}
.drop-heading h2{font-size:clamp(2rem,4vw,3.5rem);margin:7px 0}
.drop-heading p{color:var(--muted)}
.drop-controls{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr)) auto;gap:10px;margin:24px 0;padding:16px;border:1px solid #29344b;border-radius:14px;background:#090e17}
.drop-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.8rem;font-weight:800}
.drop-controls select{min-height:42px;background:#161d2b;color:var(--text);border:1px solid #32405a;border-radius:9px;padding:9px}
.drop-controls button{align-self:end;min-height:42px}
.drop-result{display:grid;grid-template-columns:minmax(190px,.45fr) minmax(0,1.55fr);gap:20px;align-items:center}
.drop-summary{display:flex;flex-direction:column;gap:9px}
.drop-summary>span{color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.14em}
.drop-summary>strong{font-size:clamp(2.8rem,6vw,5rem);line-height:1}
.drop-summary small{color:var(--green);font-weight:850}
.drop-summary p{color:var(--muted);line-height:1.5}
.drop-diagram{padding:12px;border:1px solid #263249;border-radius:13px;background:#060a11;overflow-x:auto}
.drop-diagram svg{display:block;width:100%;min-width:600px;height:auto}
.drop-string{stroke:#526077;stroke-width:1.5}
.drop-string.active{stroke:#b6c6dc;stroke-width:2.5}
.drop-fret{stroke:#3d4b63}
.drop-string-label,.drop-fret-label{fill:#8795aa;font-size:12px;font-weight:800;text-anchor:middle}
.drop-dot{fill:var(--green);stroke:#d9fff0;stroke-width:2}
.drop-dot.root{fill:var(--cyan)}
.drop-note{fill:#071019;font-size:11px;font-weight:950;text-anchor:middle;dominant-baseline:middle}
@media(max-width:1050px){.drop-controls{grid-template-columns:repeat(3,1fr)}
.drop-controls button{grid-column:1/-1}
.drop-result{grid-template-columns:1fr}
}
@media(max-width:650px){.drop-controls{grid-template-columns:1fr 1fr}
.drop-controls button{grid-column:1/-1}
.drop-workspace{padding:18px}
.drop-result{justify-items:center;text-align:center}
.drop-summary{align-items:center;max-width:34rem}
.drop-summary p{margin-inline:auto}
.drop-diagram{width:100%;max-width:620px;margin-inline:auto;overflow:hidden}
.drop-diagram svg{min-width:0;width:100%}
}
.tetrad-field-voicings{margin-top:20px;padding:clamp(18px,3vw,30px);border:1px solid #2c7658;border-radius:20px;background:linear-gradient(145deg,#071a13,#081018)}.tetrad-field-voicings[hidden]{display:none}.tetrad-field-voicings>header{display:flex;align-items:center;justify-content:space-between;gap:20px}.tetrad-field-voicings>header span{color:#54eba7;font-size:.72rem;font-weight:950;letter-spacing:.13em}.tetrad-field-voicings h3{margin:6px 0;font-size:clamp(1.5rem,3vw,2.3rem)}.tetrad-field-voicings header p{margin:0;color:#96aa9f}.tetrad-field-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.tetrad-field-controls label{display:grid;gap:7px;color:#9fb1a7;font-size:.8rem;font-weight:850}.tetrad-field-controls select{min-height:43px;padding:9px;border:1px solid #315b49;border-radius:9px;background:#07110d;color:#fff}.tetrad-field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.tetrad-field-grid article{padding:15px;border:1px solid #284b3d;border-radius:14px;background:#09120f}.tetrad-field-grid article>span{display:block;color:#4ce99e;font-size:.7rem;font-weight:950}.tetrad-field-grid article>strong{display:block;margin:4px 0;font-size:1.25rem}.tetrad-field-grid article>small{color:#91a99e}.field-drop-svg{display:block;width:100%;height:auto;margin:10px 0}.tetrad-field-grid button{width:100%;padding:9px;border:1px solid #2d6e53;border-radius:8px;background:#071711;color:#67eeb0;cursor:pointer}.tetrad-field-grid button:hover{background:#123d2d}@media(max-width:1100px){.tetrad-field-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.tetrad-field-voicings>header{align-items:stretch;flex-direction:column}.tetrad-field-controls,.tetrad-field-grid{grid-template-columns:1fr}}

.harmonic-field{margin-top:28px;padding:clamp(22px,4vw,40px);background:linear-gradient(145deg,#111827,#080c14);border:1px solid #29344b;border-radius:20px}

.field-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}

.field-heading h2{font-size:clamp(1.8rem,4vw,3rem);margin:5px 0 8px}

.field-heading p{color:var(--muted);max-width:680px;line-height:1.55}

.field-formula{min-width:290px;padding:16px 18px;border:1px solid #2b3a52;border-radius:12px;background:#0b111c}

.field-formula span,.field-scale span{display:block;color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.12em;margin-bottom:7px}

.field-formula strong{font-size:.9rem;line-height:1.5}

.field-controls{display:grid;grid-template-columns:auto minmax(190px,1fr) minmax(150px,.55fr);gap:12px;padding:16px;background:#0a0f19;border:1px solid #29344b;border-radius:14px}

.field-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.8rem;font-weight:800}

.field-controls select{background:#161d2b;color:var(--text);border:1px solid #32405a;border-radius:9px;padding:10px}

.field-kind{display:flex;gap:6px;align-items:flex-end}

.field-kind button{height:39px;padding:0 17px;border:1px solid #32405a;border-radius:9px;background:#101725;color:var(--muted);font-weight:900;cursor:pointer}

.field-kind button.active{color:#061117;background:var(--cyan);border-color:var(--cyan)}

.field-scale{padding:17px 3px 13px}
.field-scale strong{font-size:1rem;letter-spacing:.04em}

.field-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:9px}

.field-chord{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:16px 10px;border:1px solid #2b3a52;border-radius:13px;background:linear-gradient(160deg,#151e2d,#0d131f)}

.field-chord .field-degree{color:var(--cyan);font-size:.78rem;font-weight:900;letter-spacing:.14em}

.field-chord>strong{font-size:clamp(1.55rem,2.5vw,2.3rem);margin:11px 0 7px}

.field-chord small{color:#b8c2d4;font-size:.76rem;line-height:1.4}
.field-chord em{margin-top:10px;color:var(--muted);font-size:.72rem;font-style:normal}
.field-shape{width:100%;margin-top:14px;padding:9px 7px 5px;border:1px solid #2b3a52;border-radius:10px;background:#070b12}
.field-shape>span{display:block;margin-bottom:2px;color:var(--cyan);font-size:.66rem;font-weight:900;letter-spacing:.12em}
.field-mini-svg{display:block;width:100%;height:auto}
.field-mini-svg line{stroke:#627089;stroke-width:1}
.field-mini-svg circle{fill:var(--cyan);stroke:#d9fbff;stroke-width:1.5}
.field-mini-svg text{fill:#071019;font-size:8px;font-weight:900;text-anchor:middle;dominant-baseline:middle}
.field-mini-svg text.muted{fill:#ff718e;font-size:12px}
.field-mini-svg text.string-name{fill:#98a6bb;font-size:9px}

.field-tip{margin:18px 0 0;color:var(--muted);line-height:1.55}
.field-tip strong{color:var(--text)}

@media(max-width:1100px){.field-grid{grid-template-columns:repeat(4,1fr)}
.field-heading{align-items:flex-start}
.field-formula{min-width:250px}
}

@media(max-width:760px){.field-heading{display:grid}
.field-formula{min-width:0}
.field-controls{grid-template-columns:1fr 1fr}
.field-kind{grid-column:1/-1}
.field-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:460px){.field-controls,.field-grid{grid-template-columns:1fr}
.field-kind{grid-column:auto}
.field-kind button{flex:1}
.field-chord{min-height:390px}
}

.chord-position,.field-mini-svg text.position-label{fill:var(--text);font-size:16px;font-weight:800;text-anchor:end;dominant-baseline:middle}.chord-nut{stroke:var(--text);stroke-width:4}.chord-text{font-size:14px}.field-mini-svg text{font-size:11px}.field-mini-svg text.position-label{font-size:14px}

/* Harmonic field: all six string names stay readable on dark cards. */
.tetrad-field-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.field-drop-svg .drop-string-label{fill:#d9e7ee;font-size:16px;font-weight:800}.field-drop-svg .drop-fret-label{fill:#afc3cd;font-size:14px}.field-string-legend{font-size:14px;line-height:1.6;color:#c3d5cf}.tetrad-field-grid article.field-playing{border-color:#74f3ae;box-shadow:0 0 0 2px #74f3ae}.tetrad-field-controls label{font-size:14px}@media(max-width:650px){.tetrad-field-controls{grid-template-columns:1fr}}
/* Dictionary expansion: root notes and shape metadata. */
.chord-controls label{min-width:180px}
#chordDiagram .chord-root-dot{fill:#d5efa6;stroke:#efffcf;stroke-width:2}
#chordDiagram .chord-root-dot+.chord-text{fill:#152313;font-weight:800}
#chordVoicingNotes{padding:12px 14px;border-left:3px solid #b9da91;background:#ffffff08;font-size:1rem;line-height:1.6}
#chordFingers{font-size:.875rem;line-height:1.7;color:#d3dfca}
@media(max-width:600px){.chord-controls label{min-width:0;width:100%}.chord-controls select{width:100%;font-size:1rem}}

#chordDiagram .chord-open-dot{fill:none;stroke:#d5efa6;stroke-width:2}
#chordDiagram .chord-open-dot+.chord-text{fill:#eff6e7}