/* Note Checker */
.page-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,42px);line-height:1}
.lede{max-width:52ch;margin:8px 0 18px}
.startrow{display:flex;justify-content:center;margin:16px 0 0}
.readout{display:grid;grid-template-columns:auto 1fr;gap:18px 26px;align-items:center;margin:20px 0}
@media (max-width:560px){.readout{grid-template-columns:1fr}}
.bignote{min-width:150px;text-align:center}
.bignote b{display:block;font-family:var(--display),var(--music);font-weight:400;font-size:88px;line-height:1;color:var(--bone)}
.bignote b.hit{color:var(--gold);text-shadow:var(--glow-yellow)}
.bignote span{font-size:15px;color:var(--mist)}
.meter svg{width:100%;height:auto;display:block}
.meter .m-zone{fill:rgba(255,225,77,.16)}
.meter .m-tick{stroke:var(--text-dim)}
.meter .m-label{fill:var(--text-lo)}
.meter .m-needle{stroke:var(--yellow-hi)}
.meter .m-hub{fill:var(--yellow)}
.meter .verdict{text-align:center;font-weight:700;font-size:18px;min-height:27px;margin-top:4px}
.found{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.found b{font-size:18px}
.sens{display:grid;gap:6px;background:var(--night-2);border-radius:var(--r);padding:14px 16px}
.sens label{font-weight:700}
.sens p{margin:0;font-size:14px;color:var(--mist)}
.sens-row{display:flex;align-items:center;gap:14px;font-size:14px}
.sens input{flex:1;accent-color:var(--gold);min-height:32px}
.levelbar{position:relative;height:10px;border-radius:5px;background:var(--deep);overflow:hidden}
.levelbar i{position:absolute;inset:0 auto 0 0;background:var(--mist);width:0}
.levelbar i.over{background:var(--gold)}
.levelbar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--coral)}

/* mode toggle: FIRST 5 NOTES | FULL RANGE */
/* six modes: one pill row on wide screens, a 3 × 2 grid of buttons on narrow ones */
.modes{display:flex;flex-wrap:wrap;gap:2px;margin:14px 0 4px;border:2px solid var(--cyan-ink);border-radius:26px;padding:3px;width:max-content;max-width:100%}
.mode-btn{min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--text-lo);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:560px){ .modes{display:grid;grid-template-columns:repeat(3,1fr);width:100%} .mode-btn{padding:8px 6px} }
.mode-btn[aria-pressed="true"]{background:var(--cyan);color:var(--deep);box-shadow:var(--glow-cyan)}
.mode-btn:not([aria-pressed="true"]):hover{color:var(--text-hi)}

/* full range and scales (the instrument question, "Playing: … change" are shared styles in theme.css) */
.full-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 10px}
.dir-btn[aria-pressed="true"]{background:var(--cyan);color:var(--deep);border-color:var(--cyan)}
.full-stage{padding:6px 8px 0}
.full-stage .staff+.staff{margin-top:-6px;border-top:1px dashed var(--screen-2)}
/* the note being heard right now: a glowing outline on the staff */
#fullStaff .hearing .head{stroke:var(--cyan-ink);stroke-width:6px;stroke-opacity:.85;paint-order:stroke}
#fullStaff .hearing .ncap{fill:var(--cyan-ink)}
/* ?demo: the note Space will play */
#fullStaff .demo-cursor .ncap{text-decoration:underline;fill:var(--pink-ink)}
.octave-hint{min-height:27px;margin:8px 0 0;font-weight:700;color:var(--text-hi)}

@media (max-width:420px){ .mode-btn{font-size:14px} }
.full-head .playing{margin:0}

/* ---------- ARTICULATION: the attack counter ---------- */
.art-box{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 4px;padding:14px;border-radius:20px;background:var(--floor-2);border:2px solid var(--cyan);box-shadow:var(--glow-cyan)}
.art-count{min-width:2.2ch;text-align:center;font-family:var(--display);font-size:clamp(84px,18vw,150px);line-height:1;color:var(--cyan-hi);text-shadow:var(--glow-cyan);font-variant-numeric:tabular-nums}
.art-count.flash{animation:art-flash .35s ease-out}
@keyframes art-flash{0%{color:var(--yellow);text-shadow:var(--glow-yellow);transform:scale(1.12)}100%{transform:none}}
.art-side p{margin:0}
.art-label{font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-lo)}
.art-note{font-family:var(--display);font-size:clamp(30px,6vw,46px);color:var(--yellow);min-height:1.2em}
.art-rate{color:var(--text-lo);font-weight:700;min-height:1.3em}
.art-tip{margin:6px 0;text-align:center;font-weight:700;font-size:18px;color:var(--text-hi)}
@media (prefers-reduced-motion:reduce){.art-count.flash{animation:none;color:var(--yellow)}}