/* ===================================================================
   Tuner stage - the six instrument tuners.

   Everything here is scoped under .tn (the _MusicTuner partial). The
   instrument is inline SVG drawn by js/music/instrument-stage.js; a
   string's --amp (0..1) and data-tone are written from the level of
   the voice that is really sounding or the microphone reading that
   really arrived, never from which button was pressed.

   Tone colours are never the only signal: every state also changes
   the verdict text, the needle and the hint beside the instrument.
   =================================================================== */

.tn {
    --tn-ink: #10162b;
    --tn-muted: #5b6275;
    --tn-line: #e4e7ef;
    --tn-accent: #3d8bff;
    --tn-ref: #7cc4ff;
    --tn-flat: #ffb547;
    --tn-sharp: #ff6b7a;
    --tn-ok: #34f5a6;
    --tn-unstable: #b7c0d8;

    position: relative;
    margin: 0 auto 24px;
    padding: 0;
    max-width: 1080px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--tn-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    color: var(--tn-ink);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tn *, .tn *::before, .tn *::after { box-sizing: border-box; }
.tn button, .tn select, .tn input { font: inherit; }
.tn svg { display: block; }
.tn :where(p, dl, dd) { margin: 0; }

.tn-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The page around the tuner: the tuner gets the wide shell, the
   reading material keeps the narrower measure. */
.tn-page > .mu-note-box,
.tn-page > .mu-card { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---------- top bar ---------- */

.tn-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.tn-mode {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .88rem; font-weight: 600; letter-spacing: .02em;
}
.tn-mode-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #5a6280; box-shadow: 0 0 0 3px rgb(255 255 255 / 6%);
    transition: background-color .2s ease;
}
.tn[data-mode="playing"] .tn-mode-dot { background: var(--tn-ref); box-shadow: 0 0 0 3px rgb(124 196 255 / 25%); }
.tn[data-mode="listening"] .tn-mode-dot { background: #ff4d5e; animation: tn-rec 1.4s ease-in-out infinite; }
.tn[data-mode="error"] .tn-mode-dot { background: #ff9a3c; }
@keyframes tn-rec { 50% { box-shadow: 0 0 0 7px rgb(255 77 94 / 0%); } 0% { box-shadow: 0 0 0 0 rgb(255 77 94 / 55%); } }

.tn-top-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

.tn-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.tn-field-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8c96b8; }
.tn-select {
    min-height: 38px; padding: 6px 34px 6px 12px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 8%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23cdd5ee' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    color: #fff; font-size: .9rem; font-weight: 600;
    -webkit-appearance: none; appearance: none;
}
.tn-select option { color: var(--tn-ink); background: #fff; }
.tn-select:focus-visible { outline: 3px solid var(--tn-ref); outline-offset: 2px; }

.tn-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 8%); }
.tn-seg button {
    border: 0; border-radius: 999px; padding: 6px 14px; min-height: 32px; cursor: pointer;
    background: transparent; color: #aeb8d6; font-size: .82rem; font-weight: 600; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.tn-seg button:hover { color: #fff; }
.tn-seg button[aria-checked="true"] { background: #fff; color: var(--tn-ink); }
.tn-seg button:focus-visible { outline: 3px solid var(--tn-ref); outline-offset: 2px; }

/* ---------- stage ---------- */

.tn-stage {
    position: relative;
    padding: clamp(14px, 3vw, 34px) clamp(8px, 3vw, 36px) 14px;
    background:
        radial-gradient(60% 80% at 50% 115%, rgb(61 139 255 / 26%), transparent 70%),
        radial-gradient(40% 60% at 10% 20%, rgb(34 211 238 / 8%), transparent 70%),
        linear-gradient(180deg, #10162b 0%, #1a2142 100%);
    isolation: isolate;
    overflow: hidden;   /* the guitar body runs off the edge of the stage, not into the controls */
    transition: box-shadow .4s ease;
}
.tn.is-locked .tn-stage { box-shadow: inset 0 0 0 2px rgb(52 245 166 / 35%), inset 0 -40px 80px -40px rgb(52 245 166 / 30%); }

.tn-instrument { position: relative; margin: 0 auto; max-width: 980px; }
.tn-instrument .tn-svg { width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.tn-instrument.is-portrait .tn-svg { overflow: hidden; width: auto; height: min(640px, 76vh); max-width: 100%; margin: 0 auto; }
.tn-instrument--piano { max-width: 940px; }
.tn-instrument--chromatic { max-width: 900px; }
.tn-noscript { color: #cdd5ee; text-align: center; padding: 40px 12px; }

.tn-svg * { pointer-events: none; }
.tn-svg .tn-str-hit { pointer-events: stroke; stroke: transparent; cursor: pointer; }
.tn-svg .tn-peg-hit { pointer-events: all; fill: transparent; cursor: pointer; }
.tn-svg .tn-key, .tn-svg .tn-key *, .tn-svg .tn-seg-note, .tn-svg .tn-seg-note * { pointer-events: auto; }
.tn-svg .tn-key-label, .tn-svg .tn-seg-label { pointer-events: none; }
.tn-svg .tn-key, .tn-svg .tn-seg-note { cursor: pointer; outline: none; }

.tn-logo { fill: #c9a86b; font-size: 22px; font-weight: 800; letter-spacing: .12em; opacity: .75; }

/* ---------- strings ---------- */

.tn-str { --amp: 0; --tone: var(--tn-ref); }
.tn-str[data-tone="flat"] { --tone: var(--tn-flat); }
.tn-str[data-tone="sharp"] { --tone: var(--tn-sharp); }
.tn-str[data-tone="intune"] { --tone: var(--tn-ok); }
.tn-str[data-tone="unstable"] { --tone: var(--tn-unstable); }

.tn-str-core, .tn-str-tail {
    fill: none; stroke: #e6eaf2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .2s ease;
}
.tn-str.is-wound .tn-str-core, .tn-str.is-wound .tn-str-tail { stroke: #dcbb7e; }
.tn-svg--ukulele .tn-str-core, .tn-svg--ukulele .tn-str-tail { stroke: #f4eedf; }
.tn-svg--violin .tn-str-core, .tn-svg--violin .tn-str-tail { stroke: #d8dde6; }
.tn-svg--piano .tn-str-core { stroke: #f1d898; }
.tn-str-tail { opacity: .75; }
.tn-str-core { filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / 55%)); }

.tn-str-glow { fill: none; stroke: var(--tone); stroke-linecap: round; opacity: 0; transition: opacity .25s ease; }
.tn-str-env { fill: var(--tone); opacity: 0; }

.tn-str.is-vibrating .tn-str-core { stroke: var(--tone); filter: drop-shadow(0 0 4px var(--tone)); }
.tn-str.is-vibrating .tn-str-glow { opacity: calc(.2 + var(--amp) * .7); transition: none; }
.tn-str.is-vibrating .tn-str-env { opacity: calc(.08 + var(--amp) * .22); }

.tn-str:hover .tn-str-core { stroke: #fff; }
.tn-str.is-selected:not(.is-vibrating) .tn-str-glow { opacity: .28; stroke: var(--tn-ref); }
.tn-str.is-selected:not(.is-vibrating) .tn-str-core { stroke: #bfe2ff; }

.tn-str.is-plucked .tn-str-glow { animation: tn-pluck .45s ease-out; }
@keyframes tn-pluck { 0% { opacity: 1; } 100% { opacity: calc(.2 + var(--amp) * .7); } }

/* ---------- pegs ---------- */

.tn-peg-label {
    fill: #aeb8d6; font-size: 22px; font-weight: 700;
    paint-order: stroke; stroke: #10162b; stroke-width: 4px;
    transition: fill .2s ease;
}
.tn-svg--bass .tn-peg-label { font-size: 20px; }
.tn-instrument.is-portrait .tn-peg-label { font-size: 27px; stroke-width: 5px; }
.tn-peg-key { transition: filter .2s ease; }
.tn-peg:hover .tn-peg-key { filter: brightness(1.12); }
.tn-peg.is-selected .tn-peg-label { fill: var(--tn-ref); }
.tn-peg.is-sounding .tn-peg-key { filter: drop-shadow(0 0 8px var(--tn-ref)); }
.tn-peg.is-sounding .tn-peg-label { fill: #fff; }

.tn-arrow { opacity: 0; fill: none; stroke: var(--tn-flat); transition: opacity .2s ease; }
.tn-peg[data-state="sharp"] .tn-arrow { stroke: var(--tn-sharp); }
.tn[data-verdict="off"] .tn-peg.is-target .tn-peg-label { fill: #fff; }
.tn-peg.is-target[data-turn] .tn-peg-key { filter: drop-shadow(0 0 10px rgb(255 181 71 / 70%)); }
.tn-peg[data-turn="cw"] .tn-arrow--cw,
.tn-peg[data-turn="ccw"] .tn-arrow--ccw { opacity: 1; }
.tn-peg[data-turn="cw"] .tn-arrow--cw { animation: tn-wind-cw 1.3s ease-in-out infinite; }
.tn-peg[data-turn="ccw"] .tn-arrow--ccw { animation: tn-wind-ccw 1.3s ease-in-out infinite; }
@keyframes tn-wind-cw { 0% { transform: rotate(-30deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(40deg); opacity: 0; } }
@keyframes tn-wind-ccw { 0% { transform: rotate(30deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(-40deg); opacity: 0; } }

.tn-fine.is-target circle { stroke: var(--tn-flat); stroke-width: 3; animation: tn-fine 1s ease-in-out infinite; }
@keyframes tn-fine { 50% { stroke-width: 6; } }

/* ---------- piano ---------- */

.tn-key-face { stroke: #c9ced9; stroke-width: 1.5; transition: fill .12s ease; }
.tn-key.is-black .tn-key-face { stroke: #05060a; }
.tn-key { transition: transform .08s ease; transform-box: fill-box; transform-origin: top; }
.tn-key:hover .tn-key-face { filter: brightness(.96); }
.tn-key.is-black:hover .tn-key-face { filter: brightness(1.5); }
.tn-key:focus-visible .tn-key-face { stroke: var(--tn-accent); stroke-width: 4; }
.tn-key.is-active .tn-key-face { fill: #9fd2ff; }
.tn-key.is-black.is-active .tn-key-face { fill: #3d8bff; }
.tn[data-verdict="intune"] .tn-key.is-active .tn-key-face { fill: #6ff0b8; }
.tn[data-verdict="off"] .tn-key.is-active .tn-key-face { fill: #ffc978; }
.tn-key.is-pressed { animation: tn-press .28s ease; }
@keyframes tn-press { 30% { transform: scaleY(.985) translateY(3px); } }
.tn-key-label { fill: #8a90a2; font-size: 16px; font-weight: 600; }
.tn-key-label.is-c { fill: #3d4460; font-weight: 800; }

.tn-damper { fill: #2b2f3d; stroke: #11131b; transition: transform .18s ease; }
.tn-str.is-vibrating .tn-damper { transform: translateY(-14px); }

/* ---------- chromatic dial ---------- */

.tn-seg-face { fill: #151c3a; stroke: #2b3563; stroke-width: 2; transition: fill .15s ease; }
.tn-seg-note:hover .tn-seg-face { fill: #1f2a55; }
.tn-seg-note:focus-visible .tn-seg-face { stroke: var(--tn-ref); stroke-width: 4; }
.tn-seg-label { fill: #aeb8d6; font-size: 26px; font-weight: 700; }
.tn-svg--chromatic[viewBox="0 0 600 770"] .tn-seg-label { font-size: 34px; }
.tn-seg-note.is-active .tn-seg-face { fill: #3d8bff; }
.tn-seg-note.is-active .tn-seg-label { fill: #fff; }
.tn[data-verdict="intune"] .tn-seg-note.is-active .tn-seg-face { fill: #19b46f; }
.tn[data-verdict="off"] .tn-seg-note.is-active .tn-seg-face { fill: #d9822b; }

.tn-strobe-ring { stroke: #34406f; transition: stroke .2s ease; }
.tn[data-strobe="flat"] .tn-strobe-ring { stroke: var(--tn-flat); }
.tn[data-strobe="sharp"] .tn-strobe-ring { stroke: var(--tn-sharp); }
.tn[data-strobe="intune"] .tn-strobe-ring { stroke: var(--tn-ok); }
.tn[data-strobe="unstable"] .tn-strobe-ring { stroke: var(--tn-unstable); }
.tn-dial-note { fill: #fff; font-size: 44px; font-weight: 800; }
.tn-svg--chromatic[viewBox="0 0 600 770"] .tn-dial-note { font-size: 62px; }

/* ---------- hint under the instrument ---------- */

.tn .tn-turn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: fit-content; max-width: 100%; min-height: 40px;
    margin: 12px auto 0; padding: 8px 16px; border-radius: 999px;
    background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 12%);
    color: #e8ecfb; font-size: .92rem; font-weight: 600; text-align: center;
}
/* While listening the hint keeps its space, so the instrument does not
   jump up and down as readings come and go. */
.tn.is-listening .tn-turn[hidden] { display: flex !important; visibility: hidden; }
.tn-turn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tn-unstable); flex: none; }
.tn-turn[data-state="flat"]::before { background: var(--tn-flat); }
.tn-turn[data-state="sharp"]::before { background: var(--tn-sharp); }
.tn-turn[data-state="intune"] { color: #b9ffe0; border-color: rgb(52 245 166 / 35%); }
.tn-turn[data-state="intune"]::before { background: var(--tn-ok); }

.tn-notice {
    position: absolute; left: 50%; top: 12px; z-index: 2;
    width: max-content; max-width: min(560px, calc(100% - 24px));
    transform: translateX(-50%);
    padding: 9px 16px; border-radius: 14px;
    background: rgb(255 255 255 / 94%); color: #1d3a7a;
    font-size: .88rem; font-weight: 600; text-align: center; line-height: 1.35;
    box-shadow: 0 12px 30px -12px rgb(0 0 0 / 60%);
    animation: tn-notice-in .25s ease;
}
@keyframes tn-notice-in { from { opacity: 0; transform: translate(-50%, -6px); } }

/* Standing up on a phone the instrument is taller than the screen, so
   the hint sits over the top of the stage where the pegs are, and a
   notice over the bottom. */
.tn.is-portrait .tn-stage { padding-top: 60px; }
.tn.is-portrait .tn-turn {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
    margin: 0; width: max-content; max-width: calc(100% - 20px);
    background: rgb(16 22 43 / 88%);
}
.tn.is-portrait .tn-notice { top: auto; bottom: 14px; }
@keyframes tn-notice-in-up { from { opacity: 0; } }
.tn.is-portrait .tn-notice { animation-name: tn-notice-in-up; }

/* ---------- string rail ---------- */

.tn-rail {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
    padding: 14px clamp(12px, 3vw, 24px);
    background: #f6f8fc; border-bottom: 1px solid var(--tn-line);
}
.tn .mu-strings { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1 1 420px; }
.tn .mu-string {
    flex: 1 1 88px; min-width: 0;
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto 6px auto; justify-items: center; align-items: center; gap: 3px;
    min-height: 58px; padding: 7px 8px; border-radius: 14px;
    background: #fff; border: 1px solid var(--tn-line); cursor: pointer; text-align: center;
    box-shadow: 0 1px 2px rgb(16 22 43 / 6%);
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.tn .mu-string:hover { border-color: #b9c3dc; }
.tn .mu-string:active { transform: translateY(1px); }
.tn .mu-string:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 2px; }
.tn .mu-string-name { font-weight: 800; font-size: 1.02rem; color: var(--tn-ink); line-height: 1.1; }
.tn .mu-string-hz { font-size: .74rem; color: var(--tn-muted); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tn .mu-string-line { width: 70%; align-self: center; background: #9aa3bd; opacity: .7; border-radius: 3px; }
.tn .mu-string[data-gauge="1"] .mu-string-line { height: 1px; }
.tn .mu-string[data-gauge="2"] .mu-string-line { height: 2px; }
.tn .mu-string[data-gauge="3"] .mu-string-line { height: 3px; }
.tn .mu-string[data-gauge="4"] .mu-string-line { height: 4px; }
.tn .mu-string[data-gauge="5"] .mu-string-line { height: 5px; }
.tn .mu-string[data-gauge="6"] .mu-string-line { height: 6px; }
.tn .mu-string.is-active { border-color: var(--tn-accent); background: #eef5ff; box-shadow: 0 0 0 1px var(--tn-accent) inset; }
.tn .mu-string.is-active .mu-string-line { background: var(--tn-accent); }
.tn .mu-string.is-intune { border-color: #19b46f; background: #e7f9ef; box-shadow: 0 0 0 1px #19b46f inset; }

.tn-auto {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 58px; padding: 0 16px; border-radius: 14px; cursor: pointer;
    border: 1px dashed #b9c3dc; background: transparent; color: var(--tn-muted); font-weight: 600; font-size: .88rem;
}
.tn-auto svg { width: 20px; height: 20px; }
.tn-auto[aria-pressed="true"] { border-style: solid; border-color: var(--tn-accent); background: #eef5ff; color: #1d3a7a; }
.tn-auto:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 2px; }

/* ---------- panel: gauge + readouts ---------- */

.tn-panel {
    display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px 32px; align-items: center;
    padding: 22px clamp(14px, 3.5vw, 36px) 10px;
}

.tn-gauge-wrap { text-align: center; }
.tn .tn-gauge.mu-meter { width: 100%; max-width: 380px; height: auto; margin: 0 auto; overflow: visible; position: relative; }
.tn-gauge svg { width: 100%; height: auto; overflow: visible; }

.tn-arc { fill: none; stroke-width: 18; }
.tn-arc--track { stroke: #eef1f7; }
.tn-arc--flat { stroke: #ffe3b8; }
.tn-arc--sharp { stroke: #ffd3d8; }
.tn-arc--ok { stroke: #37d38f; }
.tn-tick { stroke: #aab2c8; stroke-width: 1.5; stroke-linecap: round; }
.tn-tick.is-major { stroke: #5b6275; stroke-width: 2.5; }
.tn-tick-label { fill: #7a8299; font-size: 12px; font-weight: 600; }
.tn-flat-sign, .tn-sharp-sign { fill: #9aa3bd; font-size: 22px; font-weight: 700; }

.tn-needle {
    transform-box: view-box; transform-origin: 160px 176px;
    transition: transform .18s cubic-bezier(.3, 1.35, .5, 1);
    fill: var(--tn-ink);
}
.tn-needle-cap { fill: #fff; }
.tn[data-verdict="off"] .tn-needle { fill: #d9722b; }
.tn[data-verdict="intune"] .tn-needle { fill: #12a150; }
.tn[data-verdict="error"] .tn-needle { fill: #9aa3bd; }

.tn-lock-ring { fill: none; stroke: #34d399; stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tn.is-locked-pop .tn-lock-ring { animation: tn-lock .9s ease-out; }
@keyframes tn-lock { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }
.tn.is-locked .tn-arc--ok { stroke: #12c276; filter: drop-shadow(0 0 6px rgb(18 194 118 / 60%)); }

.tn .mu-detected.tn-note {
    margin: 6px 0 0; font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 800; line-height: 1;
    color: var(--tn-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tn .mu-detected small { font-size: .42em; color: var(--tn-muted); font-weight: 700; margin-left: 2px; }
.tn.is-locked-pop .tn-note { animation: tn-note-pop .5s ease; }
@keyframes tn-note-pop { 40% { transform: scale(1.12); color: #12a150; } }

.tn-read { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.tn .mu-verdict {
    margin: 0; min-height: 0; padding: 12px 16px; border-radius: 14px;
    font-size: 1rem; font-weight: 700; line-height: 1.35;
    background: #f4f7ff; border: 1px solid #dce6fb; color: #1d3a7a;
}
.tn .mu-verdict.is-off { background: #fff4e5; border-color: #fadcb0; color: #8a4b08; }
.tn .mu-verdict.is-intune { background: #e7f9ef; border-color: #b5ebcf; color: #0f6a3a; font-size: 1.1rem; }
.tn .mu-verdict.is-error { background: #fdecec; border-color: #f3c9c9; color: #8d1f1f; }
.tn .mu-verdict.is-ref { background: #eef5ff; border-color: #cfe0fb; color: #1f4f99; }

.tn-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tn-nums div { padding: 10px 12px; border-radius: 12px; background: #f6f8fc; border: 1px solid var(--tn-line); min-width: 0; }
.tn-nums dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tn-muted); }
.tn-nums dd { font-size: 1.15rem; font-weight: 800; color: var(--tn-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tn-level-row { display: flex; align-items: center; gap: 10px; }
.tn-level-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tn-muted); }
.tn .mu-level.tn-level { flex: 1; height: 8px; max-width: none; margin: 0; border-radius: 999px; background: #eef1f7; overflow: hidden; }
.tn .mu-level-fill { height: 100%; width: 0; background: linear-gradient(90deg, #34f5a6, #22d3ee 55%, #ffb547 85%, #ff5f6d); transition: width .08s linear; }

.tn-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tn .tn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--tn-line); background: #fff; color: var(--tn-ink); font-weight: 700; font-size: .95rem;
    box-shadow: 0 4px 10px -6px rgb(16 22 43 / 35%);
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.tn .tn-btn[hidden] { display: none; }
.tn .tn-btn svg { width: 20px; height: 20px; flex: none; }
.tn .tn-btn:hover { transform: translateY(-1px); }
.tn .tn-btn:active { transform: scale(.97); }
.tn .tn-btn:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 2px; }
.tn .tn-btn--primary {
    border-color: transparent; color: #fff;
    background: radial-gradient(circle at 30% 25%, #6aa9ff, var(--tn-accent) 55%, #2254c9);
    box-shadow: 0 12px 24px -12px rgb(61 139 255 / 80%);
}
.tn .tn-btn--stop { border-color: #f3c9c9; background: #fdecec; color: #8d1f1f; }
.tn .tn-btn[aria-pressed="true"] { border-color: var(--tn-accent); background: #eef5ff; color: #1d3a7a; }

/* ---------- settings + footnotes ---------- */

.tn-settings {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
    margin: 14px clamp(14px, 3.5vw, 36px) 0; padding: 14px 16px;
    border-radius: 16px; background: #f6f8fc; border: 1px solid var(--tn-line);
}
.tn-setting { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }
.tn-setting-label { font-size: .85rem; font-weight: 600; color: var(--tn-ink); margin: 0; }
.tn-setting-label b { color: var(--tn-accent); font-variant-numeric: tabular-nums; }
.tn-range { width: 100%; min-height: 44px; accent-color: var(--tn-accent); cursor: pointer; }
.tn-range:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 2px; }
.tn-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: .9rem; cursor: pointer; }
.tn-check input { width: 20px; height: 20px; accent-color: var(--tn-accent); }

.tn-foot { padding: 14px clamp(14px, 3.5vw, 36px) 22px; display: grid; gap: 8px; }
.tn-foot p { font-size: .85rem; color: var(--tn-muted); line-height: 1.55; }

/* ---------- responsive ---------- */

@media (max-width: 820px) {
    .tn-panel { grid-template-columns: 1fr; }
    .tn .tn-gauge.mu-meter { max-width: 340px; }
}

@media (max-width: 575.98px) {
    .tn { border-radius: 20px; }
    .tn-topbar { padding: 10px 12px; }
    .tn-top-controls { width: 100%; }
    .tn-field { flex: 1 1 100%; }
    .tn-select { flex: 1; min-width: 0; }
    .tn-seg { width: 100%; }
    .tn-seg button { flex: 1; }
    .tn-stage { padding-inline: 4px; }
    .tn .tn-turn { font-size: .84rem; margin-inline: 8px; max-width: calc(100% - 16px); }
    .tn-rail { padding: 12px; }
    .tn .mu-string { flex-basis: calc(33.333% - 6px); }
    .tn-auto { flex: 1 1 100%; min-height: 48px; }
    .tn-nums dd { font-size: 1rem; }
    .tn-nums div { padding: 8px; }
    .tn-actions .tn-btn { flex: 1 1 auto; }
}

@media (pointer: coarse) {
    .tn-seg button, .tn-select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .tn *, .tn *::before, .tn *::after { animation: none !important; transition: none !important; }
}