/* Legibility-first adjustments for desktop and touch screens */
:root{--muted:#c6bfd7;--line:#524966;--text:#f9f6ff;--purple:#d4bbff;--cyan:#a1f4f0}
.mode-nav{max-width:none;gap:8px;padding:7px;flex-wrap:wrap}
.mode-tab{min-height:49px;flex:1 1 142px;white-space:normal;line-height:1.3;color:#e5def4;font-size:14px;border:1px solid transparent}
.mode-tab.active{border-color:#9781cf;background:#604c85;color:#fff}
.note-line strong{font-weight:850;font-size:clamp(48px,6vw,70px)}
.note-korean{font-size:16px;font-weight:800;color:#ece1ff;border-color:#7868a5;background:#3c315a}
.readout-label{font-size:13px;color:#d6cde8}.hz-readout{font-size:14px;color:#dfd7ee}
.graph-head strong{font-size:17px;color:white}.graph-head p{font-size:13px;color:#d0c8dd}
.graph-legend,.graph-bottom{font-size:12px;color:#ddd4ec}
.desc,.tip-block p,.info-tint,.guide-details p{color:#e3dced}
.field>span,.stat-tile>span,.readout-label{color:#ded5ed;font-size:13px}
.field select{min-height:46px;font-size:14px;color:#fff;border-color:#6f6088}
.tip-block p{font-size:13px}.stat-tile small{color:#cbbfdb;font-size:12px}
.saved-result div span,.history-entry small{color:#c5b9d7}
.chart-wrap{height:390px;background:radial-gradient(circle at 40% 30%,#322749aa,#171225 66%);border-color:#706083}
.graph-head p{max-width:100%}
.note-chip{font-size:12px;line-height:1.3;white-space:normal;min-width:65px}
.guide-nav{min-height:42px;display:flex;align-items:center}
@media(max-width:640px){
 .mode-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .mode-tab{width:100%;min-height:49px;font-size:13px;padding:10px 6px}
 .mode-tab[data-mode=range]{grid-column:1/-1}
 .note-line{gap:8px}.note-line strong{font-size:52px}
 .note-korean{font-size:13px;white-space:nowrap;padding:5px 7px}
 .chart-wrap{height:350px}
 .graph-legend{white-space:normal;justify-content:flex-end}
 .stat-tile{min-height:94px}
 .stat-tile strong{font-size:23px}
 .readout-label{font-size:12px}
 .guide-nav{font-size:12px}
}
@media(max-width:380px){.readout{flex-direction:column;align-items:stretch;gap:14px}
 .tuning-readout{max-width:100%;width:100%}.tuning-readout strong{text-align:left}
 .note-line strong{font-size:49px}.chart-wrap{height:325px}}