.header-right { gap: 24px; }
.instrument { grid-template-columns:1.75fr 1fr; }
.sound-field { min-height:350px; }
.sound-field:before { display:none; }
#wave { top:47px; height:215px; width:100%; }
.field-top { top:21px; font-size:9px; }
.field-tag { font-size:8px; display:flex; align-items:center; gap:6px; letter-spacing:.7px; }
.scope-led { width:5px; height:5px; border-radius:50%; background:var(--mint); box-shadow:0 0 7px #8aa68c45; }
.field-copy { bottom:40px; }
.field-copy h2 { font-size:21px; margin-bottom:5px; }
.field-copy p { font-size:11px; }
.field-bottom { bottom:15px; font-size:7px; }
.readout { justify-content:center; padding:24px 20px; }
.small-label { font-size:9px; }
.note-name { font-size:80px; margin-top:12px; }
.note-name span { font-size:36px; }
.cents-gauge { margin-top:22px; }
.cents-text { font-size:10px; margin-bottom:18px; }
.tuning-standard { font-size:7px; margin-top:13px; }
.mini-keys { height:24px; gap:4px; }
.mini-keys i { height:23px; width:12px; border-radius:2px; }
.mini-keys i.black { height:16px; }
.countdown { bottom:28px; }
.celebration-badge { display:inline-flex; padding:8px 13px; border:1px solid #d5a54f4d; border-radius:30px; background:#bd8c2020; color:#eac978; font-size:11px; letter-spacing:.3px; margin-top:12px; }
@media(min-width:1600px) { .sound-field { min-height:370px; } #wave { height:232px; } .field-copy { bottom:43px; } }
@media(max-width:650px) {
  .header { padding:0 16px; }
  .header-right { gap:12px; }
  .text-button { padding:0; font-size:10px; gap:5px; }
  .brand { font-size:22px; gap:7px; }
  .brand svg { width:23px; }
  .instrument { grid-template-columns:1fr; }
  .sound-field { min-height:315px; }
  #wave { top:43px; height:188px; }
  .field-top { left:15px; right:15px; top:18px; font-size:8px; }
  .field-tag { font-size:7px; }
  .field-copy { bottom:42px; }
  .field-copy h2 { font-size:20px; max-width:none; margin:0 0 5px; }
  .field-copy p { font-size:10px; max-width:none; }
  .field-bottom { left:15px; right:15px; font-size:6px; }
  .field-bottom>span:last-child { display:inline; }
  .readout { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.2fr; justify-items:center; padding:17px 16px; gap:0 12px; }
  .small-label { font-size:7px; grid-column:1; grid-row:1; }
  .note-name { grid-column:1; grid-row:2 / 5; font-size:55px; margin:3px 0 0; }
  .note-name span { font-size:25px; }
  .frequency-number { grid-column:2; grid-row:1 / 3; padding-top:5px; }
  .frequency-number input { font-size:21px; width:80px; }
  .cents-gauge { grid-column:2; grid-row:3; width:125px; margin-top:10px; }
  .cents-text { grid-column:2; grid-row:4; margin:6px 0 0; font-size:9px; }
  .mini-keys { grid-column:1; grid-row:5; height:15px; gap:3px; margin-top:8px; }
  .mini-keys i { width:7px; height:15px; }
  .mini-keys i.black { height:10px; }
  .tuning-standard { grid-column:2; grid-row:5; margin-top:8px; font-size:5.5px; letter-spacing:.3px; }
}

.graph-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 27px 13px; }
.graph-toolbar>span { font-size:8px; letter-spacing:1.2px; color:var(--muted); }
.graph-options { display:flex; gap:3px; border:1px solid var(--line); background:var(--bg); padding:3px; border-radius:7px; }
.graph-options button { border:0; background:transparent; color:var(--muted); padding:6px 11px; font-size:10px; border-radius:4px; }
.graph-options button.active { background:#f4ad831d; color:var(--accent); }
.instrument[data-graph="ribbons"] .sound-field { background:#020405; min-height:400px; }
.instrument[data-graph="ribbons"] #wave { top:0; left:0; height:100%; width:100%; }
.instrument[data-graph="ribbons"] .field-top { color:#dedee6; z-index:2; text-shadow:0 1px 5px #000; }
.instrument[data-graph="ribbons"] .field-tag { color:#969ba8; }
.instrument[data-graph="ribbons"] .field-copy { z-index:2; color:#fff; bottom:36px; padding:14px 0; background:linear-gradient(90deg,transparent,#0006,transparent); text-shadow:0 1px 8px #000; }
.instrument[data-graph="ribbons"] .field-copy p { color:#b1b5c5; }
.instrument[data-graph="ribbons"] .field-bottom { color:#aaaebd; z-index:2; }
.instrument[data-graph="ribbons"] .countdown { z-index:3; }
.instrument[data-graph="ribbons"] .field-status { color:#eee; }
@media(max-width:650px) {
  .toolbar { gap:8px; }
  .mode-tabs { gap:2px; }
  .mode-tabs button { padding:7px 10px; }
  .graph-toolbar { margin:0 15px 12px; }
  .graph-options button { padding:6px 9px; font-size:9px; }
  .instrument[data-graph="ribbons"] .sound-field { min-height:350px; }
}