/* TuneLit · Design F, built natively on the Ears & Waves stylesheet.
   Layer 1 (his): fonts, tokens, base, buttons, ranges, top bar, hero, sections, cards, chips, seg, tiles,
   lab cards, the "Ear Age" split card, sheets, toast, footer. Rules are his, lightly renamed where the
   page shell keeps TuneLit's class names (.site-header = his .topbar, .site-nav = .nav, .sheet-backdrop = .scrim).
   Layer 2: names the other tools and the long-form pages already use (aliases on his tokens).
   Layer 3 (TuneLit): the tuner card, the three meters, the strings, focus mode.
   Section 4 (at the end): the tuner's sheets and popovers.
   Dark only: the sky and its 22 themes are sky.js (--bg-top / --bg-mid / --bg on <html>). */

/* ---------- fonts (self-hosted, variable weight, OFL). Outfit has no Cyrillic: Nunito covers it letter by letter. ---------- */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Registered, so a background theme cross-fades (sky.js sets these three on <html>). */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #0A1426; }
@property --bg-top { syntax: '<color>'; inherits: true; initial-value: #17305C; }
@property --bg-mid { syntax: '<color>'; inherits: true; initial-value: #0E1B33; }

/* ==========================================================================
   1 · Ears & Waves
   ========================================================================== */

:root {
  --bg: #0A1426;
  --bg-top: #17305C;
  --bg-mid: #0E1B33;
  --ocean: #0E1B33;
  --navy: #16284A;
  --aqua: #3FD3E6;
  --foam: #9BEBD9;
  --sand: #F6D89A;
  --coral: #FF6B6B;
  --coral-ink: #FF8F8F; /* coral for small words (kickers, labels under 18 px): 4.5:1 on a card lit by its glow (tests/sky.test.mjs) */
  --violet: #A78BFA;
  --text: #EEF3F8;
  --muted: #A6B5CC;
  --faint: #8A9CB8;   /* 12–12.5 px captions and labels pass AA (4.5:1) on every theme's cards (tests/sky.test.mjs) */
  --ink: #06182B;
  --on-coral: #1A0A12;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  /* surfaces follow the background theme, so a green or violet sky never gets navy cards */
  --glass: color-mix(in srgb, var(--bg-top) 62%, transparent);
  --bar: color-mix(in srgb, var(--bg) 74%, transparent);
  --dock-bg: color-mix(in srgb, var(--bg-mid) 82%, transparent);
  --r-lg: 28px;
  --r: 20px;
  --display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px);
  --right: env(safe-area-inset-right, 0px);
  color-scheme: dark;

  /* ---- 2 · TuneLit names on his tokens (generator, calculator and long-form pages use them) ---- */
  --sky-0: var(--bg);
  --sky-1: var(--bg-mid);
  --sky-2: var(--bg-top);
  --halo: var(--coral);
  --on-halo: var(--on-coral);
  --brass: var(--coral);
  --on-brass: var(--on-coral);
  --accent: var(--coral);
  --on-accent: var(--on-coral);
  --mint: var(--foam);
  --mint-text: var(--foam);
  --voice: var(--foam);
  --honey: var(--sand);
  --ember: var(--coral);
  --starlight: #FFFFFF;
  --core: #FFFFFF;
  --track: rgba(255, 255, 255, 0.13);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.08);
  --sheet-bg: color-mix(in srgb, var(--bg-top) 52%, var(--bg-mid));
  --backdrop: rgba(3, 8, 20, 0.6);
  --toast-bg: var(--text);
  --toast-text: var(--ink);
  --toast-action: #B3261E;
  --f-display: var(--display);
  --f-body: var(--font);
  --r-card: var(--r-lg);
  --r-tile: var(--r);
  --r-pill: 999px;
  --safe-t: var(--top);
  --safe-b: var(--bottom);
  --safe-l: var(--left);
  --safe-r: var(--right);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(80px + var(--top)); /* clear of the fixed top bar */
  background: var(--bg);
  transition: --bg 0.8s, --bg-top 0.8s, --bg-mid 0.8s;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; overflow-x: clip; isolation: isolate;
  background: transparent; font: 16px/1.6 var(--font); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* The sky glow is a fixed layer of its own: iOS ignores background-attachment: fixed and would tile the gradient down the page. */
body::before {
  content: ''; position: fixed; inset: 0; height: 100lvh; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg) 100%);
}
.sky { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: -1; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, canvas { display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--aqua); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.05; text-wrap: pretty; }
p { margin: 0; }
p, li, summary { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 10px; }
::selection { background: color-mix(in srgb, var(--aqua) 38%, transparent); color: var(--text); }
.sr, .sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.fine { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.is-busy { cursor: progress; opacity: 0.82; pointer-events: none; }
html.has-sheet { overflow: hidden; }
html.has-sheet body { overscroll-behavior: none; }
main, .site-footer { position: relative; }

/* line icons (inline SVG): .ic is stroked, .icf filled */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icf { width: 20px; height: 20px; fill: currentColor; stroke: none; flex: none; }
/* ♯ and ♭ drawn (tuner.js): a letter and its sign never part */
.acc { display: inline-block; margin: 0 0.02em 0 0.03em; letter-spacing: 0; white-space: nowrap; }
.acc svg { display: inline-block; width: 0.47em; height: 0.8em; vertical-align: -0.08em; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.acc svg[viewBox="0 0 18 34"] { width: 0.42em; vertical-align: -0.05em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15px/1.1 var(--font); white-space: nowrap; background: none; color: var(--text); text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn > svg:not(.ic):not(.icf) { fill: currentColor; }
.btn-glass { background: rgba(255, 255, 255, 0.07); border-color: var(--line-2); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.11); }
.btn-glass.is-on { border-color: color-mix(in srgb, var(--aqua) 70%, transparent); color: var(--aqua); background: rgba(63, 211, 230, 0.1); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.btn-ghost.is-on { border-color: color-mix(in srgb, var(--coral) 65%, transparent); background: rgba(255, 107, 107, 0.12); }
.btn-aqua { background: var(--aqua); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(63, 211, 230, 0.7); }
.btn-aqua:hover { background: #6BE0EE; }
.btn-coral, .btn-primary, .btn-brass { background: var(--coral); color: var(--on-coral); box-shadow: 0 10px 30px -12px rgba(255, 107, 107, 0.8); }
.btn-coral:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-brass:hover:not(:disabled) { background: #FF8585; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; } /* small words, a full 44 px to the finger */
.btn-sm svg { width: 18px; height: 18px; }
.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon { width: 44px; }
.btn-plain { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); }
.btn-plain:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.btn-plain svg { width: 22px; height: 22px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: none; color: var(--muted); }
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none;
  color: var(--muted); font: 700 14px/1.3 var(--font); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
}
.link:hover { color: var(--text); text-decoration-color: currentColor; }

/* ---------- ranges: his 6 px track, white thumb with a halo ---------- */
input[type=range], .slider {
  --v: 50%; --fill: var(--coral);
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--fill) 0 var(--v), rgba(255, 255, 255, 0.13) var(--v) 100%);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 5px color-mix(in srgb, var(--fill) 22%, transparent);
  transition: box-shadow 0.2s;
}
input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 9px color-mix(in srgb, var(--fill) 25%, transparent); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.13); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--fill); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 5px color-mix(in srgb, var(--fill) 22%, transparent); }
input[type=range]:focus-visible { outline-offset: 2px; border-radius: 12px; }
.vol { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.vol svg { width: 20px; height: 20px; flex: none; }

/* ---------- top bar (his .topbar) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--coral); color: var(--on-coral); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: calc(12px + var(--top)); }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: calc(12px + var(--top)) max(var(--gutter), var(--right)) 12px max(var(--gutter), var(--left));
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.is-scrolled .site-header {
  background: var(--bar); border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); margin-right: auto; text-decoration: none; }
.brand:hover { text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; color: var(--text); }
.wordmark b { color: var(--coral); font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.9vw, 24px); }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); font-weight: 700; font-size: 15px; white-space: nowrap; }
.site-nav a:nth-child(-n+2) { color: var(--text); }
.site-nav a:nth-child(2)::after { content: ''; display: inline-block; width: 1px; height: 14px; margin: 0 0 -2px clamp(12px, 1.9vw, 24px); background: var(--line-2); }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.is-app [data-install] { display: none !important; }
.menu-btn { display: none; } /* phones and tablets only */
/* the tuner's Settings (tuner pages only): a gear like the palette beside it, turning a little under the pointer */
.set-btn svg { transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1.2); }
.set-btn:hover svg, .set-btn[aria-expanded=true] svg { transform: rotate(45deg); }

/* "Beta": a small lilac pill for what still learns from real use (Play along, All strings, Match a recording). Calm,
   never a warning: the words beside it say what it means. The Play along link's pill is its ::after (the nav and the
   phone menu), so the link's markup stays plain. */
.beta, .site-nav a[href="/play-along/"]::after, .menu-list a[href="/play-along/"] b::after {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; border-radius: 999px; flex: none;
  border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent); background: color-mix(in srgb, var(--violet) 16%, transparent);
  color: color-mix(in srgb, var(--violet) 55%, #fff); font: 800 11px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; vertical-align: 0.12em; text-decoration: none; text-indent: 0;
}
.site-nav a[href="/play-along/"]::after, .menu-list a[href="/play-along/"] b::after { content: 'Beta'; margin-left: 8px; }
/* an inline block, not a flex item: the Play along page's underline stays under the words, never under the pill */
.site-nav a[href="/play-along/"] { display: inline-block; line-height: 44px; }
.site-nav a[href="/play-along/"]::after { vertical-align: 1px; }
.menu-list a[href="/play-along/"] b::after { vertical-align: 0.1em; }
/* on a segmented button (the mode switch "All strings"): a tag riding the button's top corner, so the switch keeps its
   width on a 360 px phone */
.seg .beta-tag {
  position: absolute; top: -10px; right: -3px; z-index: 1; height: 16px; padding: 0 5px; font-size: 9.5px; letter-spacing: 0.06em; pointer-events: none;
  background: color-mix(in srgb, var(--violet) 30%, var(--bg)); border-color: color-mix(in srgb, var(--violet) 70%, transparent);
}
.seg button[aria-checked=true] .beta-tag { color: color-mix(in srgb, var(--violet) 40%, #fff); }
/* the honest line beside a beta feature */
.beta-line { color: var(--muted); }

/* ---------- hero ---------- */
.hero {
  max-width: 1200px; margin: 0 auto; text-align: center;
  padding: calc(96px + var(--top) + clamp(12px, 6vh, 72px)) var(--gutter) 0;
}
.eyebrow, .hero .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--foam);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 12px var(--aqua); animation: blink 2.4s ease-in-out infinite; flex: none; }
@keyframes blink { 50% { opacity: 0.35; } }
h1 {
  margin-top: 22px; font-weight: 800; font-size: clamp(52px, 11vw, 118px); line-height: 0.95; letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--aqua) 10%, var(--foam) 60%, #CFFAF0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 40px rgba(63, 211, 230, 0.35));
}
.lede { max-width: 640px; margin: 22px auto 0; color: var(--muted); font-size: clamp(16px, 2.1vw, 19px); text-wrap: pretty; }
.hero .lede { max-width: 640px; text-wrap: balance; color: color-mix(in srgb, var(--muted) 55%, var(--text)); } /* never one word alone on the last line; lighter over the aurora (QA contrast) */
.hero .lede:empty { display: none; }
.hero .crumbs { margin-bottom: 18px; }

/* ---------- sections & cards ---------- */
main > .tool, main > .about, main > .faq, main > .related, .section {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 10vw, 120px) max(var(--gutter), var(--right)) 0 max(var(--gutter), var(--left));
}
main > .tool { padding-top: clamp(40px, 6vw, 72px); }
.section-head { display: grid; gap: 10px; margin-bottom: 26px; }
.section-head h2 { font-weight: 800; font-size: clamp(32px, 4.8vw, 52px); }
.section-head p { color: var(--muted); max-width: 600px; }
.sub-head { margin: 52px 0 16px; }
.sub-head h3 { font-weight: 700; font-size: 22px; }
.sub-head p { font-size: 14.5px; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kicker { font-size: 12px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua); }
.kicker.coral { color: var(--coral-ink); }
.kicker.sand { color: var(--sand); }
.card {
  --c: var(--coral);
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 55%, rgba(255, 255, 255, 0.04)), color-mix(in srgb, var(--bg-mid) 60%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  padding: clamp(20px, 3.4vw, 36px);
}
.tool { position: relative; }

/* long-form copy (the about card on every page; content.css adds tables, ladders, steps) */
main > .about { max-width: calc(860px + 2 * var(--gutter)); }
main > .about.card { padding: clamp(20px, 3.4vw, 36px); margin-top: clamp(64px, 10vw, 120px); max-width: 860px; }
@media (max-width: 899px) { main > .about.card { margin-inline: var(--gutter); } }
.prose { font-size: 16.5px; line-height: 1.65; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-weight: 800; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; margin-top: 1.5em; }
.prose h3 { font-weight: 700; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.25; margin-top: 1.4em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose strong, .prose b { color: var(--text); font-weight: 800; }
.prose a { color: var(--aqua); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--aqua) 45%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 0; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--aqua); font-weight: 900; }
.prose code, .prose kbd { font: 600 0.9em ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; }
.prose blockquote { margin-inline: 0; padding-left: 1em; border-left: 3px solid var(--coral); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose img { border-radius: var(--r); }

/* ---------- faq ---------- */
main > .faq { max-width: calc(860px + 2 * var(--gutter)); }
.faq > h2 { font-weight: 800; font-size: clamp(32px, 4.8vw, 52px); margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; min-height: 44px;
  font-weight: 800; font-size: 17.5px; line-height: 1.35; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--aqua); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { color: var(--muted); padding: 0 0 22px; max-width: 720px; }

/* ---------- related pages: his about-related pills ---------- */
main > .related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 40px; max-width: calc(860px + 2 * var(--gutter)); }
.related .chip { height: 44px; min-height: 44px; padding: 0 16px; border-color: var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--text); }
.related .chip:hover { border-color: var(--aqua); }
.related > h2, .related > p { width: 100%; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* ---------- tables (long-form pages) ---------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.table-wrap table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { font-size: 11.5px; font-weight: 900; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---------- chips & seg ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font: 700 14px/1.1 var(--font); color: var(--muted);
  white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.chip::before { content: ''; position: absolute; left: 0; right: 0; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); } /* 44 px to the finger */
.chip.is-on, .chip[aria-pressed=true] {
  color: var(--text); border-color: color-mix(in srgb, var(--coral) 70%, transparent); background: color-mix(in srgb, var(--coral) 14%, transparent);
}
.chip-sm { height: 38px; min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.chip-2 { height: auto; padding: 8px 14px; display: grid; gap: 0; text-align: left; border-radius: 16px; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); flex: none; }
.seg { display: inline-flex; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); }
.seg button {
  position: relative; height: 32px; min-width: 0; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font-weight: 800; font-size: 14px; white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.seg button::before { content: ''; position: absolute; inset: -6px 0; } /* a 44 px tap target inside the pill */
.seg button:hover:not(:disabled) { color: var(--text); }
.seg button:disabled { opacity: 0.4; }
.seg button[aria-checked=true] { background: var(--aqua); color: var(--ink); }
.seg button:focus-visible { outline-offset: 1px; }
.seg-coral button[aria-checked=true] { background: var(--coral); color: var(--on-coral); }
.seg-sm { padding: 3px; }
.seg-sm button { height: 28px; padding: 0 11px; font-size: 12.5px; }
.seg-full { display: flex; width: 100%; }
.seg-full button { flex: 1 1 0; padding: 0 8px; font-size: 13.5px; }
.switch { position: relative; width: 56px; height: 32px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.14); flex: none; transition: background 0.25s; }
.switch::before { content: ''; position: absolute; inset: -6px -2px; }
.switch span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1.2); }
.switch[aria-checked=true] { background: var(--coral); }
.switch[aria-checked=true] span { transform: translateX(24px); }
.focus-label { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* ---------- his three lab cards (the next phase puts Tuning · Reference A · Tone generator here) ---------- */
.lab { display: grid; gap: 14px; align-items: start; } /* each card as tall as its content: no empty lower half beside the generator */
@media (min-width: 760px) { .lab { grid-template-columns: 1fr 1fr; } .lab-tone { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .lab { grid-template-columns: 1fr 1fr 1.35fr; } .lab-tone { grid-column: auto; } }
.lab-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 22px; border-radius: var(--r-lg); overflow: hidden; overflow: clip;
  border: 1px solid var(--line); background: var(--glass);
}
.lab-card::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.18), transparent 65%); opacity: 0.4; transition: opacity 0.4s;
}
.lab-card.is-sounding::before { opacity: 1; animation: throb 1s ease-in-out infinite; }
.lab-card > * { position: relative; }
.lab-card h3 { font-weight: 700; font-size: 24px; }
.lab-card .kicker { color: var(--coral-ink); }
.lab-note { font-size: 14px; color: var(--foam); font-weight: 700; }
.tg-read { display: flex; align-items: baseline; gap: 8px; }
.tg-read input {
  width: 5.4ch; min-width: 0; padding: 0; border: 0; border-bottom: 2px solid var(--line-2); border-radius: 0; background: none;
  font-family: var(--display); font-weight: 800; font-size: 52px; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.tg-read input:focus { outline: none; border-bottom-color: var(--coral); }
.tg-unit { font-weight: 700; color: var(--muted); font-size: 18px; }
.tg-note { margin-left: auto; font-weight: 800; color: var(--coral); font-size: 15px; }
.tg-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-steps .chip { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; }
.tg-steps .chip.is-on { color: var(--on-coral); background: var(--coral); border-color: var(--coral); }
.tl-name { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 1.02; }
.tl-notes { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.16em; color: var(--muted); }
.big-hz { font-family: var(--display); font-weight: 800; font-size: clamp(58px, 10vw, 96px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.big-hz small { font-size: 0.34em; color: var(--muted); letter-spacing: 0; margin-left: 0.2em; font-weight: 700; }
@keyframes throb { 50% { transform: scale(1.12); } }

/* ---------- his tiles (popular tunings, next phase) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile {
  --c: var(--aqua);
  position: relative; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); padding: 14px 14px 12px; overflow: hidden; overflow: clip;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 17%, var(--glass)), color-mix(in srgb, var(--c) 4%, var(--glass)) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s, background 0.3s, transform 0.25s, box-shadow 0.3s;
}
.tile::before {
  content: ''; position: absolute; width: 170px; height: 170px; right: -70px; top: -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 42%, transparent), transparent 68%); opacity: 0.45; transition: opacity 0.5s, transform 0.6s;
}
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.tile.is-on { border-color: color-mix(in srgb, var(--c) 62%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.tile-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 10%, transparent)); color: color-mix(in srgb, var(--c) 88%, #fff); }
.tile-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.tile-hint { display: flex; gap: 0.7em; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, var(--text)); }

/* ---------- his "Ear Age" split card and app card ---------- */
.eartest { display: grid; gap: 28px; }
@media (min-width: 900px) { .eartest { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 48px; } }
.eartest-copy { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.eartest-panel {
  position: relative; display: grid; align-content: center; min-height: 380px; padding: clamp(22px, 4vw, 40px);
  border-radius: 24px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.5); text-align: center; overflow: hidden; overflow: clip;
}
.eartest-panel::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.2), transparent 65%); opacity: 0.5; transition: opacity 0.4s, transform 0.6s, background 0.6s;
}
.checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.eartest-copy .checks li { position: relative; padding-left: 30px; font-weight: 600; }
.eartest-copy .checks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 107, 107, 0.16); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 9px var(--coral); }
.step-label { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.app-card { display: grid; gap: 30px; overflow: hidden; overflow: clip; }
.app-card::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(63, 211, 230, 0.18), transparent 65%); }
@media (min-width: 900px) { .app-card { grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px; } }
.app-card h2 { font-weight: 800; font-size: clamp(30px, 4.4vw, 48px); margin: 12px 0 14px; }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.offline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--faint); }
.offline::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.offline.is-ready { color: var(--foam); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.features li { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.features span { color: var(--muted); font-size: 14.5px; }
.tension-line { padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.35; }

/* ---------- fields, big numbers, badges, banners (shared by the tools) ---------- */
.field {
  display: block; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 16px/1.2 var(--font);
}
input.field { -webkit-appearance: none; appearance: none; }
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); }
select.field { padding-right: 12px; }
select.field option { background: var(--sheet-bg); color: var(--text); }
.bignum {
  width: 5.4ch; min-width: 0; padding: 0 0 2px; margin: 0;
  border: 0; border-bottom: 2px solid var(--line-2); border-radius: 0; background: none; color: var(--text);
  font: 800 52px/1.05 var(--display); letter-spacing: -0.03em; text-align: left; font-variant-numeric: tabular-nums;
  transition: border-color 0.2s;
}
.bignum:hover { border-bottom-color: color-mix(in srgb, var(--coral) 50%, var(--line-2)); }
.bignum:focus { outline: none; border-bottom-color: var(--coral); }
.bignum-sm { width: 3.4ch; font-size: 36px; text-align: center; }
.bignum-xs { width: 4.4ch; font-size: 26px; letter-spacing: -0.02em; text-align: center; }
.unit { color: var(--muted); font: 700 17px/1 var(--display); margin-left: 0.2em; white-space: nowrap; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: 999px;
  font: 800 11.5px/1.2 var(--font); letter-spacing: 0.04em; color: var(--foam);
  background: rgba(155, 235, 217, 0.1); border: 1px solid rgba(155, 235, 217, 0.3);
}
button.badge { position: relative; cursor: pointer; }
button.badge::before { content: ''; position: absolute; inset: -10px -2px; }
button.badge svg { width: 12px; height: 12px; stroke-width: 2.6; }
.badge-warn { color: var(--sand); background: rgba(246, 216, 154, 0.1); border-color: rgba(246, 216, 154, 0.36); }
.banner {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; text-align: left;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); font-size: 14.5px; line-height: 1.45;
}
.banner-warn { border-color: rgba(246, 216, 154, 0.5); background: rgba(246, 216, 154, 0.08); }
.banner-stop { border-color: rgba(255, 107, 107, 0.8); background: rgba(255, 107, 107, 0.16); }
.banner-stop strong { font: 900 22px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack:not(table) { display: grid; gap: 10px; } /* a table marked .stack is content.css's (rows as cards on phones) */
.center { text-align: center; justify-items: center; justify-content: center; }
.label { margin: 0; font-size: 12px; font-weight: 900; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.hint { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.live { color: var(--foam); font-weight: 700; }
.grid-2 { display: grid; gap: clamp(16px, 3vw, 28px); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.step { min-width: 44px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.stepper, .fine-row, .a4-cents { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.stepper-val { display: inline-flex; align-items: baseline; padding: 0 4px; }
.a4-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.a4-big .bignum { width: 5.6ch; }
.a4-steps { display: flex; justify-content: space-between; gap: 6px; }
.a4-steps .btn { flex: 1; }
.a4-ends { display: flex; justify-content: space-between; margin-top: -8px; font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.preset-list { display: grid; gap: 6px; }
.preset-row {
  display: grid; gap: 1px; min-height: 50px; padding: 8px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit;
}
.preset-row:hover { background: rgba(255, 255, 255, 0.08); }
.preset-row b { font: 700 15px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.preset-row small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.preset-row.is-on { border-color: var(--coral); background: rgba(255, 107, 107, 0.1); }
/* the tones family (generator) */
.family-tones, body[data-page=generator] .tool { --accent: var(--coral); --c: var(--coral); }

/* ---------- sheets (his bottom sheet; a centred dialog from 700 px) & toast ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--backdrop); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s; }
.sheet-backdrop.is-on { opacity: 1; }
.sheet-backdrop.is-clear { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet {
  position: fixed; z-index: 60; left: 50%; right: auto; top: auto; bottom: 0; margin: 0; width: min(520px, 100%); max-width: 100%;
  padding: 0 22px calc(24px + var(--bottom)); border-radius: 28px 28px 0 0; border: 1px solid var(--line-2); border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 96%, white), var(--bg-mid)); color: var(--text); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 105%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
  display: grid; gap: 14px; align-content: start;
  max-height: calc(100vh - 12px - var(--top)); max-height: calc(100dvh - 12px - var(--top)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.sheet[open], .sheet.is-open { transform: translate(-50%, 0); visibility: visible; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.sheet-wide { width: min(680px, 100%); }
/* reduced motion: an opening sheet and everything in it are visible at once. With the 0.01 ms of the reduced-motion rule
   (end of file) every element would run its own transition of the visibility it inherits, still hidden on the next
   frame, where ui.openSheet moves the focus into it: the focus stayed on the page (Settings from the top bar) */
@media (prefers-reduced-motion: reduce) { :is(.sheet[open], .sheet.is-open), :is(.sheet[open], .sheet.is-open) * { transition: none !important; } }
@media (min-width: 700px) {
  .sheet { bottom: auto; top: 50%; border-radius: 28px; border-bottom: 1px solid var(--line-2); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); transform: translate(-50%, -46%) scale(0.97); opacity: 0; transition: transform 0.25s, opacity 0.25s, visibility 0s linear 0.25s; }
  .sheet[open], .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; transition: transform 0.25s, opacity 0.25s, visibility 0s; }
  /* reference A: a popover under its chip (ui.js places it) */
  .sheet.pop.is-anchored { width: 380px; max-height: calc(100dvh - 24px); border-radius: 24px; transform: translateY(-6px); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75); }
  .sheet.pop.is-anchored[open], .sheet.pop.is-anchored.is-open { transform: none; }
}
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -22px; padding: 22px 22px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 96%, white) 70%, transparent);
}
.sheet-title, .sheet-head h3 { font: 700 22px/1.2 var(--display); letter-spacing: -0.01em; margin: 0; }
.sheet-head .label { margin-bottom: 2px; }
.sheet-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -4px -8px 0 0; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--muted);
}
.sheet-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.sheet-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-actions { justify-content: space-between; padding-top: 6px; }
.sheet .chips { margin: 0; }
.sheet .tg-steps .chip { height: 34px; padding: 0 13px; font-size: 13.5px; }
.sheet .tg-read .bignum { font-size: 48px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { height: 52px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); font-weight: 800; font-size: 15px; transition: all 0.2s; }
.opt:hover { background: rgba(255, 255, 255, 0.1); }
.opt.is-on, .opt[aria-pressed=true] { border-color: var(--aqua); color: var(--aqua); background: rgba(63, 211, 230, 0.1); }
.coral-ui .opt.is-on, .coral-ui .opt[aria-pressed=true] { border-color: var(--coral); color: var(--coral); background: rgba(255, 107, 107, 0.1); }
.coral-ui .opts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.coral-ui .opt { height: 46px; font-size: 14px; padding: 0 10px; }
.sheet-read { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.sheet-read .tl-name { font-size: 34px; }
.sheet-read .tl-notes { font-size: 16px; margin: 0; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.theme { display: grid; gap: 8px; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-weight: 800; font-size: 14px; text-align: left; color: var(--text); }
.theme:hover { background: rgba(255, 255, 255, 0.08); }
.theme-swatch { height: 76px; border-radius: 12px; }
.theme.is-on { border-color: var(--aqua); box-shadow: 0 0 0 2px rgba(63, 211, 230, 0.25); }
.menu-list { display: grid; gap: 2px; }
.menu-tools { padding-top: 12px; border-top: 1px solid var(--line); }
.menu-list a, .menu-list button {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: center; width: 100%; padding: 7px 12px; min-height: 52px;
  border: 0; border-radius: 14px; background: none; color: var(--text); text-align: left; line-height: 1.25; transition: background 0.2s;
}
.menu-list a:hover, .menu-list button:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.menu-list svg { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--aqua); }
.menu-list b { grid-column: 2; font-weight: 800; font-size: 16px; }
.menu-list small { grid-column: 2; color: var(--faint); font-size: 12.5px; font-weight: 700; }
.howto { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.howto li::marker { color: var(--aqua); font-weight: 900; }

.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(24px + var(--bottom)); transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 20px; min-height: 48px; border-radius: 24px; background: var(--toast-bg); color: var(--toast-text);
  font: 800 14px/1.35 var(--font); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; text-align: center;
}
.toast.has-action { padding: 6px 6px 6px 20px; text-align: left; }
.toast > span { min-width: 0; overflow-wrap: break-word; }
.toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
html.has-sheet .toast { bottom: calc(96px + var(--bottom)); }
.toast button { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(217, 71, 58, 0.12); color: var(--toast-action); font: 900 14px/1 var(--font); }

/* ---------- footer ---------- */
.site-footer {
  max-width: var(--maxw); margin: 0 auto; display: grid; gap: 22px;
  padding: clamp(80px, 10vw, 130px) max(var(--gutter), var(--right)) calc(48px + var(--bottom)) max(var(--gutter), var(--left));
}
.footer-brand p { color: var(--foam); font-weight: 800; margin-top: 4px; }
.footer-home { display: inline-flex; align-items: center; min-height: 44px; font-size: 26px; text-decoration: none; }
.footer-home:hover { text-decoration: none; }
.footer-home:hover b { color: var(--aqua); }
.footer-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .footer-pages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-pages div { display: grid; gap: 0; align-content: start; }
.footer-pages strong { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.footer-pages a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-weight: 700; font-size: 14.5px; }
.footer-pages a:hover { color: var(--text); }
.footer-promise { color: var(--foam); font-weight: 800; }
.nw { white-space: nowrap; } /* a phrase that never splits across lines */
.site-footer .fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   3 · TuneLit: the tuner (his "Ear Age" card, a size up)
   ========================================================================== */

.tuner-card { position: relative; }
@media (min-width: 900px) {
  .tuner-card { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr); gap: 44px; align-items: start; }
  /* the copy starts level with the panel's label */
  .tuner-copy { padding-top: calc(clamp(24px, 3.6vw, 40px) + 1px); }
}
.tuner-title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.tuner-lede { color: var(--muted); }
.tuner-caption { font-size: 14px; color: var(--foam); font-weight: 700; letter-spacing: 0.02em; }
.tuner-keys { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .tuner-keys { display: block; } }
.tension { padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13.5px; line-height: 1.45; text-align: left; }
.tension-link { justify-self: start; color: var(--foam); text-decoration: none; }
.tension-link:hover { color: var(--text); text-decoration: underline; }
.tension:not([hidden]) + .tension-link { margin-top: -10px; }

/* the three chips: Instrument → Tuning (◂ name ▸) → A. One row while they fit, else two (never cut short:
   a long tuning name steps its size down, then takes two lines inside its chip) */
.tuner-setup { display: grid; gap: 10px; container-type: inline-size; min-width: 0; }
.picks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; min-width: 0; }
.pick { height: 48px; min-height: 48px; padding: 0 14px 0 10px; font-size: 15px; color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, 0.06); }
.pick:hover { background: rgba(255, 255, 255, 0.1); }
.pick-label { white-space: nowrap; font-weight: 800; }
.chip-art { --art-accent: var(--coral); display: grid; place-items: center; width: 30px; height: 30px; margin-left: -2px; flex: none; color: var(--text); }
.chip-art svg { width: 30px; height: 30px; }
.pk-caret { width: 15px; height: 15px; color: var(--muted); margin-right: -2px; }
.pick-a4 { padding: 0 16px; gap: 6px; color: var(--muted); }
.pick-a4 .pick-label { font-weight: 700; color: var(--muted); }
.pick-a4 b { color: var(--text); font-family: var(--display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.pick-a4.is-on { border-color: color-mix(in srgb, var(--coral) 60%, transparent); }
/* the compound tuning chip (also the calculator's) */
.combo, .chip-tune {
  display: inline-flex; align-items: stretch; height: 48px; min-height: 48px; padding: 0; gap: 0; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.06); overflow: hidden; color: var(--text);
}
.chip-tune:hover { background: rgba(255, 255, 255, 0.06); }
.chip-arrow, .chip-name { display: inline-grid; place-items: center; border: 0; background: none; color: var(--text); font: inherit; transition: background 0.2s, color 0.2s; }
.chip-arrow { width: 44px; flex: none; color: var(--muted); }
.chip-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.chip-arrow:disabled, .chip-arrow[aria-disabled=true] { opacity: 0.35; cursor: default; }
.chip-name { min-width: 7.6em; padding: 0 6px; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.005em; white-space: nowrap; }
button.chip-name:hover { background: rgba(255, 255, 255, 0.07); }
.chip-name.is-wrap { white-space: normal; line-height: 1.1; text-wrap: balance; }
.chip-arrow:focus-visible, .chip-name:focus-visible { outline-offset: -3px; border-radius: 999px; }
.combo .chip-name { flex: 1; min-width: 0; padding-inline: 8px; }
/* narrow (phones): Instrument gets its own full-width row, Tuning and A share the next */
@container (max-width: 399px) {
  .picks { grid-template-columns: minmax(0, 1fr) auto; }
  .pick-inst { grid-column: 1 / -1; justify-content: flex-start; }
  .pick-inst .pk-caret { margin-left: auto; }
}

/* the panel: the giant note, the meter, Start, the strings */
.tuner-panel { min-height: 0; padding: clamp(24px, 3.6vw, 40px) clamp(16px, 3.4vw, 40px) clamp(20px, 3vw, 30px); display: block; container: tpanel / inline-size; }
.tuner-panel::before { width: 440px; height: 440px; margin: -220px 0 0 -220px; top: 27%; }
.tuner-card.is-listening .tuner-panel { border-color: rgba(155, 235, 217, 0.18); }
.tuner[data-state=tune] .tuner-panel::before { opacity: 1; background: radial-gradient(circle, rgba(155, 235, 217, 0.22), transparent 65%); }
.tp-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
.tp-slot:empty { display: none; }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; }
.step-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-align: left; white-space: nowrap; }
.tp-head .step-label { flex-shrink: 0; }   /* the label keeps its words; the tools are sized to leave it room */
/* a narrow panel keeps the short word ("Demo", "Reference"): its tools share the row */
@container (max-width: 440px) { .st-more { display: none; } }
.step-label i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.tuner[data-phase=listening] .step-label { color: var(--foam); }
.tuner[data-phase=listening] .step-label i { animation: blink 1.4s ease-in-out infinite; }
.tuner[data-phase=paused] .step-label, .tuner[data-phase=asking] .step-label { color: var(--sand); }
.tuner.is-ref .step-label { color: var(--sand); }
.tp-tools { display: flex; align-items: center; gap: 4px; margin-right: -8px; }
.meter-seg button { width: 44px; padding: 0; display: inline-grid; place-items: center; }
.meter-seg button::before { inset: -6px 0; } /* 32 + 12: 44 px to the finger */
.meter-seg.seg-sm button { height: 32px; }
/* a narrow panel has no room for three 44 px buttons: one button steps through the meters, its icon the one on */
.meter-cycle { display: none; }
.meter-cycle svg { display: none; }
.tuner[data-meter=bar] .mc-bar, .tuner[data-meter=needle] .mc-needle, .tuner[data-meter=strobe] .mc-strobe { display: block; }
@container (max-width: 440px) { .meter-seg { display: none; } .meter-cycle { display: inline-grid; } }
.meter-seg svg { width: 18px; height: 18px; }
.meter-seg button[aria-checked=true] { background: rgba(255, 255, 255, 0.16); color: var(--text); }
.tool-btn { width: 44px; height: 44px; }
/* Settings lives in the top bar (its gear); focus mode hides the top bar, so the panel's head carries the same gear */
html:not(.tuner-focus) .tp-tools .set-gear { display: none; }
.set-gear svg { transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1.2); }
.set-gear:hover svg, .set-gear[aria-expanded=true] svg { transform: rotate(45deg); }
/* a 360 px phone: the label and the tools share one row without touching ("REFERENCE", "EXAMPLE") */
@container (max-width: 300px) {
  .tp-tools { gap: 0; }
  .step-label { gap: 6px; font-size: 11px; letter-spacing: 0.1em; }
}

/* the giant note: his 20,000 with its small Hz */
.tuner-readout { display: grid; justify-items: center; gap: 4px; }
.big-note {
  display: flex; align-items: baseline; justify-content: center; color: var(--text);
  font-family: var(--display); font-weight: 800; font-size: clamp(72px, 8.4vw, 112px); letter-spacing: -0.045em; line-height: 0.9; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: opacity 0.3s;
}
.big-note.is-dim { opacity: 0.5; }
.big-note .bn { display: inline-block; }
/* while it listens (and in the example before Start) the letter keeps one slot whatever the string (E is narrower than
   G; with ♯/♭ in the tuning, room for one) and its words one width ("1st string" … "6th string", "82.41 Hz"), so the
   note's line never shifts sideways when another string sounds (the owner: "the labels jump around") */
.tuner:not([data-phase=ear]) .big-note .bn { min-width: 0.8em; text-align: right; }
.tuner:not([data-phase=ear]) .big-note.has-acc .bn { min-width: 1.12em; }
.tuner:not([data-phase=ear]) .big-note small { min-width: 4.8em; text-align: left; }
.big-note .acc { margin: 0; vertical-align: top; }
.big-note .acc svg { width: 0.3em; height: 0.52em; margin: 0.06em 0 0 0.02em; vertical-align: top; }
.big-note .acc svg[viewBox="0 0 18 34"] { width: 0.28em; }
.big-note sub { position: relative; top: 0.1em; font-size: 0.38em; line-height: 1; letter-spacing: -0.02em; margin-left: 0.03em; vertical-align: baseline; }
.big-note small { font-size: max(16px, 0.21em); margin-left: 0.5em; color: var(--muted); letter-spacing: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.big-note small:empty { display: none; }
/* simple by default: beside the letter, the string in words ("E  6th string"), a touch brighter than the Hz it replaces */
.big-note small.is-words { color: var(--text); opacity: 0.86; font-family: var(--display); font-weight: 800; letter-spacing: -0.005em; }
.big-note sub:empty { display: none; }
/* one line of its own height whatever it says ("", "tab: G", "Target E · 6th string"): the meter under it never moves */
.tuner-sub { color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; height: 1.6em; line-height: 1.6; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuner[data-phase=intro] .tuner-sub { display: none; } /* before Start the hint names the string */
.tuner-pro { color: var(--muted); font: 600 13px/1.4 var(--display); font-variant-numeric: tabular-nums; }
.tuner-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tuner-badges:not(:has(> :not([hidden]))) { display: none; }
/* the deep-mode badge keeps its room for the whole tuning when it has a deep string (shown for those only), so moving
   from E1 to A1 never moves the meter */
.tuner-badges .badge.is-off { visibility: hidden; }

/* the meter: one of three drawings, the same words under each */
.meter { --fill: #B8C4D6; --half: 200px; --band: 60px; width: min(460px, 100%); display: grid; gap: 10px; margin-top: 2px; }
.tuner[data-state=far] .meter, .tuner[data-state=close] .meter { --fill: var(--coral); }
.tuner[data-state=tune] .meter { --fill: var(--foam); }
.m-bar, .m-needle, .m-strobe { display: none; }
.tuner[data-meter=bar] .m-bar, .tuner[data-meter=needle] .m-needle, .tuner[data-meter=strobe] .m-strobe { display: block; }
/* bar: his slider language. ±10 ¢ takes half the track, so fine tuning has room */
.m-track { position: relative; height: 26px; }
.m-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: rgba(255, 255, 255, 0.13); }
.m-zone { position: absolute; left: 50%; top: 50%; width: var(--band); height: 6px; margin: -3px 0 0 calc(var(--band) / -2); border-radius: 99px; background: color-mix(in srgb, var(--foam) 60%, transparent); box-shadow: 0 0 14px rgba(155, 235, 217, 0.35); transition: opacity 0.3s; }
.m-zero { position: absolute; left: 50%; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; border-radius: 2px; background: var(--foam); opacity: 0.9; }
.m-fill { position: absolute; left: 50%; top: 50%; width: var(--half); height: 6px; margin-top: -3px; border-radius: 99px; background: var(--fill); transform-origin: left center; transform: scaleX(0); transition: background 0.3s; }
.m-thumb {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; transform: translate3d(0, -50%, 0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 5px color-mix(in srgb, var(--fill) 24%, transparent); transition: box-shadow 0.3s, background 0.3s;
}
.tuner[data-state=tune] .m-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 9px rgba(155, 235, 217, 0.28); }
.tuner:is([data-state=idle], [data-state=silent], [data-state=playing]) .m-thumb { background: #B8C4D6; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(255, 255, 255, 0.1); }
.tuner:is([data-state=idle], [data-state=silent], [data-state=playing]) .m-zone { opacity: 0.45; }
/* needle: a classic arc, ticks every 10 ¢ out to ±50, a mint wedge for in tune */
.m-dial { width: min(380px, 100%); height: auto; margin: 0 auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.d-track { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 7; stroke-linecap: round; }
.d-zone { fill: none; stroke: color-mix(in srgb, var(--foam) 65%, transparent); stroke-width: 7; stroke-linecap: round; }
.tuner:is([data-state=idle], [data-state=silent], [data-state=playing]) .d-zone { opacity: 0.45; }
.d-tick { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.6; stroke-linecap: round; }
.d-tick.is-major { stroke: rgba(255, 255, 255, 0.6); stroke-width: 2.2; }
.d-label { fill: var(--faint); font: 800 13px var(--font); text-anchor: middle; font-variant-numeric: tabular-nums; }
.d-needle path { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.d-tip { fill: var(--fill); stroke: #fff; stroke-width: 2; transition: fill 0.3s; }
/* strobe: a band of stripes that drifts left when low and right when high, at a speed in proportion to the cents,
   and stands still in tune; the centre line is the reference */
.m-strobe { position: relative; height: 64px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(4, 10, 24, 0.55); }
.m-band {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 24px); will-change: transform;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fill) 78%, transparent) 0 12px, transparent 12px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  transition: background 0.3s;
}
.tuner:is([data-state=idle], [data-state=silent], [data-state=playing]) .m-band { opacity: 0.4; }
.tuner[data-state=tune] .m-strobe { border-color: color-mix(in srgb, var(--foam) 60%, transparent); box-shadow: 0 0 0 3px rgba(155, 235, 217, 0.18), 0 0 26px -6px rgba(155, 235, 217, 0.6); }
.m-window { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
.meter.is-bloom .m-thumb, .meter.is-bloom .d-tip, .meter.is-bloom .m-strobe { animation: bloom 0.6s cubic-bezier(0.25, 0.7, 0.3, 1); }
@keyframes bloom { 40% { filter: drop-shadow(0 0 14px var(--foam)); } }
/* the words: Low · tighten | the cents (✓ in tune) | loosen · High; the side that applies lights up */
.m-words { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.m-words > :first-child { text-align: left; }
.m-words > :last-child { text-align: right; }
/* the middle is one fixed slot: the cents and "✓ in tune" share its cell and only their visibility changes, and the
   cents keep the room of a sign and two digits (also for 0) and the unit's ("−7 cents" → "−12 cents" → "0 cents"
   stays put); a reading never moves the words beside it (tuner.js setCents) */
.m-mid {
  display: grid; justify-items: center; align-items: center; width: 7.5em; text-align: center; font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--muted); font-variant-numeric: tabular-nums;
}
.m-mid > * { grid-area: 1 / 1; }
.tuner-cents { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.tuner-cents:empty::before { content: '—'; }
.c-num { display: inline-block; min-width: 1.8em; text-align: right; }   /* a sign and two digits: "−12", "+7", "0" */
.tuner.is-pro .c-num { min-width: 2.7em; }                                /* "−12.3" */
.c-unit { display: inline-block; width: 2.5em; text-align: left; white-space: pre; }
.m-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--foam); visibility: hidden; }
.m-ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
.tuner[data-state=tune] .m-ok { visibility: visible; }
.tuner[data-state=tune]:not(.is-pro) .tuner-cents { visibility: hidden; }
/* Pro view keeps its cents in tune (0.1 ¢), so "✓ in tune" takes a line of its own under them, for the whole session */
.tuner.is-pro .m-ok { grid-area: 2 / 1; }
.tuner:is([data-state=far], [data-state=close]) .m-mid { color: var(--text); }
.tuner[data-dir=low]:is([data-state=far], [data-state=close]) .m-low,
.tuner[data-dir=high]:is([data-state=far], [data-state=close]) .m-high { color: var(--coral); }

/* the hint under the meter: one box of two lines whatever it says ("In tune ✓" or "Sounds like string 6. Tune string 5
   first, or tap string 6."), its first line always in one place and nothing below it ever moving; a hint that needs
   more than two lines steps its size down inside the box (tuner.js fitHint: .is-long, .is-longer = three tight lines).
   Sizes come from --hint-fs, not from the font on screen, so a smaller step never changes the box. */
.panel-hint {
  --hint-fs: 16px; --hint-lh: 1.35; --hint-ch: 36;
  width: 100%; max-width: calc(var(--hint-ch) * 0.6 * var(--hint-fs)); height: calc(2 * var(--hint-lh) * var(--hint-fs)); overflow: hidden;
  font-size: var(--hint-fs); line-height: var(--hint-lh); font-weight: 700; color: var(--text); text-wrap: balance;
}
.panel-hint.is-long { font-size: calc(0.88 * var(--hint-fs)); }
.panel-hint.is-longer { font-size: calc(0.8 * var(--hint-fs)); line-height: calc(2 * var(--hint-lh) * var(--hint-fs) / 3); }
.panel-hint .sub { color: var(--muted); font-weight: 600; }
.tuner .live { color: var(--text); }
.tuner[data-state=tune] .live { color: var(--foam); }
.demo-hint { display: none; }
.tuner.has-demo .demo-hint { display: block; }
.tuner.has-demo .live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* a reference note playing over the demo: its own line ("Playing D3 again every 3 s · tap it to stop") takes the hint's
   place, in the same box */
.tuner.has-demo.is-ref .demo-hint { display: none; }
.tuner.has-demo.is-ref .live { position: static !important; width: 100%; height: calc(2 * var(--hint-lh) * var(--hint-fs)); overflow: hidden; clip: auto; clip-path: none; white-space: normal; }
.tuner-alerts { display: grid; gap: 8px; width: 100%; }
.tuner-alerts:not(:has(> :not([hidden]))) { display: none; }
.tuner-intro { display: grid; justify-items: center; gap: 10px; }
.tuner-intro .btn-lg { min-width: min(220px, 100%); }
#t-start svg { width: 22px; height: 22px; }
.tuner-ask { color: var(--muted); font-size: 13px; line-height: 1.4; }
.tuner-more { display: grid; justify-items: start; gap: 2px; }
.tuner-more .tuner-promise { justify-content: flex-start; }
.tuner-more .link { padding: 0; color: var(--foam); text-decoration-color: color-mix(in srgb, var(--foam) 45%, transparent); }
.tuner-promise { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--foam); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.tuner-promise svg { width: 16px; height: 16px; flex: none; }
.tuner-promise svg rect { fill: currentColor; }
.tuner-promise svg path { stroke: currentColor; stroke-width: 2; }
.sheet .tuner-promise { justify-content: flex-start; padding-top: 4px; }
.tuner-denied { width: 100%; }
.tuner-denied-title { font-weight: 800; color: var(--text); }
.pill-resume {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(155, 235, 217, 0.5); background: rgba(155, 235, 217, 0.12); color: var(--text); font: 800 14.5px/1.2 var(--font);
}
.pill-resume svg { width: 18px; height: 18px; }

/* the strings: his two-line chips (like 25 / 5 Classic), with NOW and ✓ flags */
.panel-strings { justify-self: stretch; display: grid; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-head .link { min-height: 44px; padding: 4px 2px; color: var(--foam); text-decoration: none; }
.ps-head .link:hover { text-decoration: underline; }
.stars { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px 8px; margin-top: 6px; } /* --cols: tuner.js, even rows */
.star {
  --c: var(--coral);
  position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 56px; padding: 9px 4px 8px;
  border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--muted); text-align: center; font: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; touch-action: manipulation;
}
.star:hover { color: var(--text); background: rgba(255, 255, 255, 0.09); }
.star-note { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; color: var(--text); }
.star-note sub { font-size: 0.6em; vertical-align: baseline; margin-left: 1px; color: var(--muted); font-weight: 700; }
.star-hz { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* simple by default: the tile's second line is the string in words, "6th string" ("6th" where the tile is narrow,
   "octave" on a 12-string's partner); Settings → Frequencies puts the Hz back */
.star-hz .sw-short { display: none; }
.star-hz .sw-kind { letter-spacing: 0.01em; }
.str-flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: none; height: 18px; padding: 0 7px; border-radius: 99px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.12em; line-height: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.str-flag[data-k=now] { display: block; background: var(--coral); color: var(--on-coral); }
.str-flag[data-k=done] { display: grid; place-items: center; width: 18px; padding: 0; background: var(--foam); color: var(--ink); }
.str-flag svg { width: 12px; height: 12px; stroke-width: 3; }
.star.is-now { border-color: color-mix(in srgb, var(--coral) 70%, transparent); background: rgba(255, 107, 107, 0.12); color: var(--text); }
.star.is-done, .star.is-demo-done { border-color: color-mix(in srgb, var(--foam) 55%, transparent); background: rgba(155, 235, 217, 0.08); color: var(--text); }
.star.is-locked { border-color: var(--text); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.star.is-current { color: var(--text); }
.star.is-next:not(.is-now) { border-style: dashed; border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.star.is-smolder { border-color: color-mix(in srgb, var(--sand) 60%, transparent); }
.star.is-pop .str-flag { animation: flag-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes flag-pop { from { transform: translateX(-50%) scale(0.2); } }
.stars.is-complete .star { animation: star-flash 0.5s ease-out both; }
@keyframes star-flash { 40% { box-shadow: 0 0 0 3px rgba(155, 235, 217, 0.35), 0 0 24px rgba(155, 235, 217, 0.5); } }
/* 12-string: six pairs, the thick string and its partner side by side in one tile */
.stars[data-courses] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) { .stars[data-courses] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 0; padding: 4px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.course .star { min-height: 48px; padding: 8px 2px 6px; border-radius: 13px; }
.course .star[data-kind] .star-note { font-size: 15px; }
.course .star-hz { font-size: 10.5px; }
.course.is-done { border-color: color-mix(in srgb, var(--foam) 45%, transparent); }
.course-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tuner-lockline { margin-top: -4px; }
/* the string that sounds: a calm coral ring that breathes; Repeat and Continuous say how to stop it */
.star.is-playing {
  border-color: var(--coral); background: rgba(255, 107, 107, 0.14); color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral) 55%, transparent), 0 0 22px -6px var(--coral);
  animation: ring-calm 2.4s ease-in-out infinite;
}
@keyframes ring-calm { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 16%, transparent), 0 0 30px -4px color-mix(in srgb, var(--coral) 75%, transparent); } }
.star.is-stopper .star-hz { color: var(--coral); }   /* colour only: a state never changes a weight (no reflow) */
/* "Tap to stop" where the tile has room for it on one line, "Stop" in a narrow tile (a 12-string's half, a laptop's row) */
.star { container-type: inline-size; }
.stop-short { display: none; }
@container (max-width: 65px) { .stop-long, .sw-long { display: none; } .stop-short, .star-hz .sw-short { display: inline; } }   /* "Tap to stop" at 12 px is 64 px */
@media (min-width: 900px) { @container (max-width: 70.5px) { .stop-long, .sw-long { display: none; } .stop-short, .star-hz .sw-short { display: inline; } } } /* 70 px at 13 px */
/* Sound and Length: two pills under the strings, each opens a small menu */
.snd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2px; container: snd / inline-size; }
.snd-pick {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 5px 14px 5px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--text); text-align: left; font: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.snd-pick:hover { background: rgba(255, 255, 255, 0.09); border-color: color-mix(in srgb, var(--coral) 40%, var(--line-2)); }
.snd-ic { width: 20px; height: 20px; color: var(--coral); }
.snd-text { display: grid; flex: 1; min-width: 0; line-height: 1.15; }
.snd-k { font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.snd-v { font: 800 16px/1.2 var(--display); letter-spacing: -0.005em; white-space: nowrap; }
.snd-pick .pk-caret { flex: none; margin: 0; }
/* a narrow row keeps the words whole ("Tuning fork", "Continuous"): the icons step aside first */
@container snd (max-width: 349px) { .snd-ic { display: none; } .snd-pick { gap: 6px; padding-inline: 16px 12px; } }
/* the reference volume: a speaker and a slim track (the owner: "a small slim slider so it doesn't clutter"). On a phone
   its own thin line under the pills: 28 px of room, its slider 44 px to the finger (it reaches into the gaps above and
   below); on a wide panel a third column beside them. The speaker mutes (and brings the last volume back); 0 shows it
   crossed out. */
.vol-row { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px; height: 28px; min-width: 0; color: var(--muted); }
.vol-row .vol-all { display: none; min-height: 28px; padding: 0 2px 0 10px; color: var(--foam); text-decoration: none; position: relative; }
.vol-row .vol-all::before { content: ''; position: absolute; inset: -8px 0; }   /* 44 px to the finger */
.vol-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); transition: color 0.2s, background 0.2s; }
.vol-btn::before { content: ''; position: absolute; inset: -8px 0; }   /* 44 px to the finger */
.vol-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.vol-btn svg { width: 20px; height: 20px; }
.vol-btn .vol-off, .vol-btn.is-muted .vol-on { display: none; }
.vol-btn.is-muted .vol-off { display: block; }
.vol-btn.is-muted { color: var(--sand); }
/* (.vol-row before each: his range rules are input[type=range], one step stronger than a class) */
.vol-row .vol-slider { --fill: color-mix(in srgb, var(--text) 62%, transparent); height: 44px; margin: -8px 0; }
.vol-row .vol-slider::-webkit-slider-runnable-track { height: 4px; }
.vol-row .vol-slider::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.08); }
.vol-row .vol-slider:active::-webkit-slider-thumb { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45), 0 0 0 7px rgba(255, 255, 255, 0.14); }
.vol-row .vol-slider::-moz-range-track { height: 4px; }
.vol-row .vol-slider::-moz-range-progress { height: 4px; }
.vol-row .vol-slider::-moz-range-thumb { width: 16px; height: 16px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.08); }
.vol-val { justify-self: end; min-width: 4.2ch; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vol-row.is-muted .vol-slider { --fill: rgba(255, 255, 255, 0.13); }
.vol-set .vol-slider { margin: -4px 0; }
.vol-row.is-muted .vol-val { color: var(--sand); }
/* a wide panel: the volume beside the pills, as tall as they are (no extra line under them) */
@container tpanel (min-width: 600px) {
  .snd-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.72fr); }
  .snd-row > .vol-row { grid-column: auto; height: auto; align-self: stretch; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: 999px; }
}
/* Settings: the same slider, a size up */
.vol-set { height: 36px; grid-template-columns: 44px minmax(0, 1fr) 4.6ch; }
.vol-set .vol-btn { height: 36px; }
.vol-set .vol-btn::before { inset: -4px 0; }
.vol-set .vol-val { font-size: 14px; color: var(--muted); }
/* Hear in the bar and Hear A4 turn into Stop while their note repeats or holds */
.tuner-bar .hear .i-stop, .tuner-bar .hear.is-stop .i-play { display: none; }
/* (light words on the tint: in Tune by ear Hear is a coral button whose dark words would vanish on it) */
.tuner-bar .hear.is-stop, .sheet-a4 .btn.is-stop, #h-a4-hear.is-stop { border-color: color-mix(in srgb, var(--coral) 65%, transparent); background: rgba(255, 107, 107, 0.14); color: var(--text); box-shadow: none; }
.tuner-bar .hear.is-stop:hover, .sheet-a4 .btn.is-stop:hover, #h-a4-hear.is-stop:hover { background: rgba(255, 107, 107, 0.22); }
@media (min-width: 421px) { .tuner-bar .hear.is-stop .i-stop { display: block; } }

/* the bar at the bottom of focus mode: Hear · Guided/Auto · Pause · Done (his dock) */
.tuner-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px max(12px, var(--right)) calc(10px + var(--bottom)) max(12px, var(--left));
  border-top: 1px solid var(--line-2); background: var(--dock-bg);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.tuner-bar .btn { min-height: 48px; }
.tuner-bar .hear { min-width: 116px; font-variant-numeric: tabular-nums; -webkit-touch-callout: none; }
/* "Hear E" over "6th string": two short lines keep the bar's width on a 360 px phone */
.hear-text { display: grid; justify-items: start; text-align: left; line-height: 1.1; }
.hear-sub { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.hear-sub[hidden] { display: none; }
.tuner-bar .hear.btn-coral .hear-sub { color: inherit; opacity: 0.78; }
.tuner-bar .hear.has-sub { padding-block: 4px; }
.tuner-bar .hear svg { width: 18px; height: 18px; }
.tuner-bar .seg button { height: 38px; padding: 0 14px; }
.tuner-bar .listen .i-mic, .tuner-bar .listen.is-on .i-pause { display: block; }
.tuner-bar .listen .i-pause, .tuner-bar .listen.is-on .i-mic { display: none; }
.tuner-bar .done { padding: 0 20px; }

/* the tuner's sheets: section 4 */

/* ---------- focus mode: the tuner fills the screen while it is in use; everything else steps aside ---------- */
html.tuner-focus, html.tuner-focus body { overflow: hidden; }
html.tuner-focus :is(.site-header, .hero, .site-footer, .skip-link),
html.tuner-focus main > :not(.tool) { display: none !important; }
html.tuner-focus main > .tool { padding: 0; }
.tuner-focus .tuner-card {
  position: fixed; inset: 0; z-index: 40; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
}
.tuner-focus .tuner-copy { display: none; }
.tuner-focus .tuner-panel {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: hidden; overflow: clip;
}
.tuner-focus .tuner-panel::before { top: 34%; }
.tuner-focus .tp-main {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; gap: 12px;
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: calc(10px + var(--top)) max(16px, var(--right)) 16px max(16px, var(--left));
}
/* the chips at the top, then status, note, meter and the strings right under them: no empty bands */
.tuner-focus .tp-main > * { flex-shrink: 0; }
.tuner-focus .panel-strings { width: 100%; }
.tuner-focus .tuner-alerts { width: 100%; }
.tuner-focus .tp-slot { width: 100%; }
.tuner-focus .tuner-setup { container-type: normal; }
.tuner-focus .picks { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; max-width: 728px; margin: 0 auto; } /* level with the panel below */
.tuner-focus .pick-inst { grid-column: auto; }
.tuner-focus .pick, .tuner-focus .combo { height: 46px; min-height: 46px; }
html.tuner-focus .tuner-panel .big-note { font-size: clamp(96px, min(32vw, 21svh), 200px); }
.tuner-focus .meter { width: min(560px, 100%); }
/* the meter takes the room left between the note and the strings: the needle's dial shrinks on a short screen, so the
   strings and Sound/Length always end just above the bar, and switching meters moves nothing else */
.tuner-focus .tp-main > .meter { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.tuner-focus .meter > * { flex: none; }
.tuner-focus .tuner[data-meter=needle] .m-needle { display: flex; justify-content: center; flex: 0 1 min(190px, calc((100vw - 32px) * 0.43)); min-height: 64px; }
.tuner-focus .m-dial { width: auto; height: 100%; max-width: 100%; }
/* the meter a size up: read at arm's length */
.tuner-focus .m-track { height: 34px; }
.tuner-focus .m-track::before, .tuner-focus .m-zone, .tuner-focus .m-fill { height: 8px; margin-top: -4px; }
.tuner-focus .m-zero { height: 22px; margin-top: -11px; }
.tuner-focus .m-thumb { width: 30px; height: 30px; margin-left: -15px; }
.tuner-focus .m-strobe { height: 84px; }
.tuner-focus .m-mid { font-size: 17px; }
.tuner-focus .panel-hint { --hint-fs: 18px; --hint-ch: 30; margin-top: 4px; }
.tuner-focus .panel-strings { padding-top: 14px; }
.tuner-focus .star { min-height: 66px; }
.tuner-focus .star-note { font-size: 22px; }
.tuner-focus .star-hz { font-size: 12px; }
.tuner-focus .toast, html.tuner-focus .toast { bottom: calc(84px + var(--bottom)); }
/* a short screen in focus mode: messages come in at the top, clear of the strings, Sound/Length and the volume (QA: Tune
   by ear's first message covered them at 360 × 740 and 375 × 667) */
@media (max-height: 760px) {
  html.tuner-focus .toast { top: calc(10px + var(--top)); bottom: auto; transform: translate(-50%, -12px); }
  html.tuner-focus .toast.is-on { transform: translate(-50%, 0); }
}
/* Tune by ear: no mic, so no meter, no meter switch and no deep-mode badge; the hint repeats the banner, so it is
   read out (aria-live) but not shown, and the strings move up under the note */
.tuner-focus .tuner[data-phase=ear] :is(.meter, .meter-seg, .meter-cycle, #t-deep) { display: none; }
.tuner[data-phase=ear] .panel-hint { position: absolute !important; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.tuner-focus .sheet-backdrop { z-index: 55; }

/* ---------- Tune by ear: the instrument's head beside the note, and the walk through the strings ----------
   #t-stage takes the room left between the chips and the strings (the meter's room). tuner.js sets [data-hs] from
   its size: v = the drawing upright beside the note and the row; none = no room for it (the note and the row alone).
   To make room on a short screen the card steps aside first (#t-denied.is-tucked: its words come as a toast), then
   Previous and Next (.is-tight: the strings are tapped instead). .is-measuring: no transitions while tuner.js measures
   (reduced motion runs every property for 0.01 ms, and the first reading would be the old value). The drawing
   (headstock.js) is fitted to .hs by tuner.js; the row (#t-walk) says where the walk is ("String 2 · B3", three dots:
   the plucks) with Previous and Next, or what a tap plays. */
.ear-stage, .ear-side { display: contents; }
.hs, .ear-row { display: none; }
.tuner-focus .tuner[data-phase=ear] .ear-stage {
  display: grid; flex: 1 1 0; width: 100%; max-width: 728px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 36px;
}
.ear-stage.is-measuring, .ear-stage.is-measuring * { transition: none !important; }
.tuner-focus .tuner[data-phase=ear] .ear-side { display: grid; justify-items: center; align-content: center; gap: 12px; min-width: 0; container: earside / inline-size; }
.tuner-focus .tuner[data-phase=ear] .hs:not([hidden]) { display: block; }
.tuner-focus .tuner[data-phase=ear] .ear-row:not([hidden]) { display: grid; }
.tuner-focus .tuner[data-phase=ear] .tuner-sub { display: none; } /* the row says "String 2" */
.tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=v] { grid-template-columns: var(--hs-w, 240px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; column-gap: clamp(12px, 3.6vw, 40px); }
.tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=none] { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=none] .hs { display: none; }
.ear-stage.is-short:is([data-hs=v], [data-hs=none]) .big-note small { display: none; } /* a short phone: the Hz is on the strings below */
html.tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=v] .big-note { font-size: clamp(56px, min(12vw, 15svh), 150px); }
html.tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=none] .big-note { font-size: clamp(56px, 13svh, 120px); }
.tuner-focus .tuner[data-phase=ear] .ear-stage:is([data-hs=v], [data-hs=none]) .ear-side { gap: clamp(6px, 1.4svh, 18px); }
.ear-stage:is([data-hs=v], [data-hs=none]) .wh-note { display: none; } /* the big note names the note */
.tuner-focus .tuner[data-phase=ear] .tuner-denied.is-tucked { display: none; }
.ear-stage.is-tight .walk-step { display: none; }
.tuner.is-walk .ear-stage.is-tight .ear-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "now"; }
/* no drawing and very little height (an iPhone SE in Safari): the note and the row side by side, ‹ E₄ String 1 › */
.tuner-focus .tuner[data-phase=ear] .ear-stage.is-flat .ear-side { grid-template-columns: auto auto minmax(0, auto) auto; grid-template-areas: "prev note now next"; align-items: center; justify-content: center; column-gap: 12px; }
.tuner-focus .tuner[data-phase=ear] .ear-stage.is-flat .ear-row:not([hidden]) { display: contents; }
.ear-stage.is-flat .tuner-readout { grid-area: note; }
.ear-stage.is-flat .walk-now { grid-area: now; justify-items: start; text-align: left; }
.ear-stage.is-flat #t-walk-prev { grid-area: prev; }
.ear-stage.is-flat #t-walk-next { grid-area: next; }
html.tuner-focus .tuner[data-phase=ear] .ear-stage.is-flat .big-note { font-size: clamp(48px, 11svh, 72px); }
/* a phone on its side: the stage is one row of the left column, as tall as the note and the row (tuner.js: flat, no drawing) */
@media (orientation: landscape) and (max-height: 560px) {
  .tuner-focus .tuner[data-phase=ear] .ear-stage[data-hs=none] { grid-template-rows: auto; min-height: auto; }
}
/* a phone: the column beside the drawing is narrow; the Hz goes under the note, the buttons under the words */
@container earside (max-width: 300px) {
  .big-note { flex-wrap: wrap; row-gap: 2px; }
  .big-note small { flex-basis: 100%; margin: 0; text-align: center; font-size: 15px; }
  .ear-row, .tuner.is-walk .ear-row { grid-template-columns: repeat(2, minmax(48px, 1fr)); grid-template-areas: "now now" "prev next"; justify-items: center; gap: 10px 8px; }
  .walk-now { grid-area: now; }
  #t-walk-prev { grid-area: prev; }
  #t-walk-next { grid-area: next; }
  .walk-head { font-size: 19px; }
  .walk-sub { font-size: 13.5px; }
  .tuner[data-walk=done] .walk-sub { display: none; } /* "All 6 strings played" takes two lines; the bar says Play again */
}
.walk-name, #t-length-label { word-spacing: 0.1em; }
/* the row: Previous · where the walk is · Next */
.ear-row { grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; width: 100%; max-width: 460px; }
.tuner:not(.is-walk) .ear-row { grid-template-columns: minmax(0, 1fr); }
.walk-step {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--text); transition: background 0.2s, opacity 0.2s;
}
.walk-step svg { width: 22px; height: 22px; stroke-width: 2.4; }
.walk-step:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.walk-step:disabled { opacity: 0.32; }
.ear-row.is-rest .walk-step { visibility: hidden; } /* before Play and after the last string: their room kept */
.walk-now { display: grid; justify-items: center; gap: 5px; min-width: 0; text-align: center; }
.walk-head { font: 800 22px/1.15 var(--display); letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; text-wrap: balance; }
.walk-sub { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 14.5px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.walk-dots { display: inline-flex; gap: 6px; }
.walk-dots[hidden] { display: none; }
.walk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s, box-shadow 0.2s; }
.walk-dots i.is-on { background: var(--coral); }
.walk-dots i.is-now { box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.22); }
@media (min-width: 900px) { .walk-head { font-size: 26px; } .walk-sub { font-size: 15.5px; } }
/* the bar's Play · Pause · Resume (the walk keeps its icon on a phone too: "▶ Play strings 1 → 6") */
.tuner-bar .hear .i-pause, .tuner-bar .hear.is-pause .i-play { display: none; }
.tuner-bar .hear.is-walk .i-play { display: block; }
.tuner-bar .hear.is-walk.is-pause .i-play { display: none; }
.tuner-bar .hear.is-walk.is-pause .i-pause { display: block; }
/* the reason for Tune by ear and the way back to the microphone: one compact card */
.tuner-focus .tuner[data-phase=ear] .tuner-denied { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 10px 10px 10px 16px; }
.tuner-focus .tuner[data-phase=ear] .tuner-denied > p { grid-column: 1; }
.tuner-focus .tuner[data-phase=ear] .tuner-denied > .row { grid-column: 2; grid-row: 1 / span 2; }
.tuner-focus .tuner[data-phase=ear] .tuner-denied-title { font-size: 14.5px; line-height: 1.35; }
.tuner-focus .tuner[data-phase=ear] #t-denied-help { font-size: 13px; line-height: 1.35; }
.rt-short { display: none; }
@media (max-width: 560px) {
  .tuner-focus .tuner[data-phase=ear] .tuner-denied { gap: 2px 10px; padding: 8px 8px 8px 14px; }
  .tuner-focus .tuner[data-phase=ear] .tuner-denied-title { font-size: 13.5px; }
  .tuner-focus .tuner[data-phase=ear] #t-denied-help { font-size: 12.5px; }
  .tuner-focus .tuner[data-phase=ear] #t-retry { padding: 0 14px; }
  .tuner-focus .tuner[data-phase=ear] .rt-long { display: none; }
  .tuner-focus .tuner[data-phase=ear] .rt-short { display: inline; }
}


/* the headstock (headstock.js): line art in the page's ink; the string that sounds is coral and swings, its key glows */
.hs { position: relative; min-width: 0; min-height: 0; color: var(--text); -webkit-tap-highlight-color: transparent; }
.hs-svg { position: absolute; inset: 0; margin: auto; display: block; overflow: visible; }
/* the neck fades out where the drawing ends */
.hs-svg[data-orient=vertical] { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); }
.hs-svg[data-orient=horizontal] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.hs-neck { fill: color-mix(in srgb, var(--bg) 78%, #000); stroke: none; }
.hs-neck-edge { fill: none; stroke: rgba(232, 238, 247, 0.5); stroke-width: 1.6; stroke-linecap: round; } /* its two sides only: no hard end */
.hs-fret { fill: none; stroke: rgba(214, 224, 238, 0.42); stroke-width: 2; stroke-linecap: round; }
.hs-dot { fill: rgba(232, 238, 247, 0.2); }
.hs-body { fill: color-mix(in srgb, var(--bg-top) 52%, var(--bg)); stroke: rgba(232, 238, 247, 0.72); stroke-width: 2; stroke-linejoin: round; }
.hs-detail { fill: rgba(255, 255, 255, 0.035); stroke: rgba(232, 238, 247, 0.34); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hs-nut { fill: #EDE4D0; opacity: 0.9; }
.hs-shaft { fill: none; stroke: rgba(214, 224, 238, 0.62); stroke-linecap: round; }
.hs-post > circle:first-child { fill: color-mix(in srgb, var(--bg) 70%, #000); stroke: rgba(232, 238, 247, 0.8); stroke-width: 1.6; }
.hs-hole { fill: rgba(232, 238, 247, 0.7); }
.hs-str { fill: none; stroke: #CBD5E3; stroke-linecap: round; }
.hs-str-head { opacity: 0.5; }
.hs-glow { fill: none; stroke: transparent; stroke-width: 10; stroke-linecap: round; }
.hs-lens { fill: transparent; }
.hs-hit { fill: none; stroke: transparent; stroke-width: 22px; pointer-events: stroke; cursor: pointer; }
.hs-knob { fill: color-mix(in srgb, var(--bg-top) 70%, var(--bg)); stroke: rgba(232, 238, 247, 0.5); stroke-width: 1.6; transition: fill 0.2s, stroke 0.2s; }
.hs-note { fill: var(--text); font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; text-anchor: middle; pointer-events: none; }
.hs-oct { font-weight: 700; } /* the octave a size down and lower (headstock.js), as on the strings */
.hs-gap { pointer-events: none; } /* no octave shown: an invisible character keeps the drawn ♯/♭'s room */
.hs-accp { fill: none; stroke: var(--text); stroke-linecap: round; pointer-events: none; } /* a drawn ♯/♭ (the brand fonts have none) */
.hs-acc { font-family: system-ui, 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', sans-serif; font-size: 0.78em; font-weight: 700; }
.hs-badge circle { fill: var(--bg); stroke: rgba(232, 238, 247, 0.36); stroke-width: 1.2; }
.hs-badge text { fill: var(--muted); font-family: var(--font); font-weight: 900; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.hs-halo { fill: none; stroke: transparent; stroke-width: 5; transform-box: fill-box; transform-origin: center; }
.hs-hitk { fill: transparent; cursor: pointer; }
.hs-key:hover .hs-knob { stroke: rgba(255, 255, 255, 0.85); }
.hs-string.is-sounding .hs-str { stroke: var(--coral); opacity: 1; }
.hs-string.is-sounding .hs-str-neck { stroke-width: 2.6px; }
.hs-string.is-sounding .hs-glow { stroke: rgba(255, 107, 107, 0.22); }
.hs-string.is-sounding .hs-lens { fill: rgba(255, 107, 107, 0.2); }
.hs-shaft.is-sounding { stroke: color-mix(in srgb, var(--coral) 80%, #fff); }
.hs-post.is-sounding > circle:first-child { stroke: var(--coral); }
.hs-key.is-sounding .hs-knob { fill: var(--coral); stroke: var(--coral); }
.hs-key.is-sounding .hs-note { fill: var(--on-coral); }
.hs-key.is-sounding .hs-accp { stroke: var(--on-coral); }
.hs-key.is-sounding .hs-badge circle { fill: var(--on-coral); stroke: var(--coral); }
.hs-key.is-sounding .hs-badge text { fill: var(--coral); }
.hs-key.is-sounding .hs-halo { stroke: rgba(255, 107, 107, 0.38); } /* headstock.js pulses it once with each pluck */
/* the string Play starts with, or the walk goes on with: a dashed coral ring (and its tile's dashed border), its string
   a faint coral */
.hs-key.is-next .hs-knob { stroke: var(--coral); stroke-dasharray: 5 4; }
.hs-string.is-next .hs-str { stroke: var(--coral); opacity: 0.45; }
.hs-key.is-next .hs-badge text { fill: var(--coral); }
.hs-svg.is-compact .hs-knob { stroke-width: 1.3; } /* a short screen: the keys without their words */
@media (forced-colors: active) {
  .hs-key.is-sounding .hs-knob { forced-color-adjust: none; fill: Highlight; stroke: Highlight; }
  .hs-string.is-sounding .hs-str { stroke: Highlight; }
}

/* ---------- desktop: the phone's LARGE scale on wide screens too (the owner's pick) ----------
   Instrument takes the whole first row of the chips, then Tuning and A, as on a phone; 60 px chips with 20–22 px
   words, big string tiles, a 52 px Sound/Length row and the panel's words a size up. On short desktop screens the
   hero gives way, so Start stays on the first screen (1024 × 768, 1280 × 800). */
@media (min-width: 900px) {
  .tuner-copy { gap: 16px; }
  .picks { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .pick-inst { grid-column: 1 / -1; justify-content: flex-start; }
  .pick-inst .pk-caret { margin-left: auto; }
  .pick, .combo, .chip-tune { height: 60px; min-height: 60px; }
  .pick { padding: 0 22px 0 16px; gap: 12px; font-size: 21px; }
  .chip-art, .chip-art svg { width: 38px; height: 38px; }
  .pk-caret { width: 18px; height: 18px; }
  .chip-name { font-size: 21px; padding: 0 8px; }
  .chip-arrow { width: 52px; }
  .chip-arrow svg { width: 20px; height: 20px; }
  .pick-a4 { padding: 0 24px; gap: 8px; }
  .pick-a4 .pick-label { font-size: 20px; }
  .pick-a4 b { font-size: 22px; }
  .tuner-caption { font-size: 15px; }
  .step-label { font-size: 13px; }
  .panel-hint { --hint-fs: 18px; }
  .m-words { font-size: 12px; }
  .m-mid { font-size: 17px; }
  .tuner-ask { font-size: 14px; }
  .ps-head .focus-label { font-size: 13px; }
  .ps-head .link { font-size: 15px; }
  .stars { gap: 14px 8px; }
  .star { min-height: 80px; padding: 10px 4px 9px; border-radius: 18px; }
  .star-note { font-size: 28px; }
  .star-hz { font-size: 13px; }
  .course .star { min-height: 66px; }
  .course .star[data-kind] .star-note { font-size: 21px; }
  .course .star-hz { font-size: 11.5px; }
  .snd-pick { min-height: 54px; padding-inline: 18px 16px; }
  .snd-ic { width: 22px; height: 22px; }
  .snd-k { font-size: 10.5px; }
  .snd-v { font-size: 18px; }
  .tuner-focus .pick, .tuner-focus .combo { height: 56px; min-height: 56px; }
  .tuner-focus .pick-inst { grid-column: auto; }
  /* a laptop's narrow panel (900–1099 px): six strings in two rows of three, a 12-string's pairs two across, so
     "246.9 Hz" and "C♯2" keep their size */
  @media (max-width: 1099px) {
    .stars { grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr)); }
    .stars[data-courses] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* focus mode on a desktop: the same large strings as the panel, the column clear of the top edge */
  .tuner-focus .tp-main { padding-top: calc(22px + var(--top)); gap: 14px; }
  .tuner-focus .stars, .tuner-focus .stars[data-courses] { grid-template-columns: repeat(var(--cols-lg, 6), minmax(0, 1fr)); }
  .tuner-focus .star { min-height: 80px; }
  .tuner-focus .star-note { font-size: 28px; }
  .tuner-focus .star-hz { font-size: 13px; }
  .tuner-focus .course .star-hz { font-size: 11px; letter-spacing: -0.01em; } /* six pairs in a row: "246.9 Hz" inside half a pair tile */
  .tuner-focus .panel-hint { --hint-ch: 34; }
}
/* a laptop screen (up to 940 px tall): the hero gives way (one line of lede, a smaller title, the three selling points
   aside), so the whole tuner card, strings and Sound/Length included, is on the first screen at 1440 × 900 */
@media (min-width: 900px) and (max-height: 940px) {
  body[data-page=tuner] .hero { padding-top: calc(74px + var(--top) + clamp(4px, 1.2vh, 12px)); }
  body[data-page=tuner] .hero .crumbs { margin-bottom: 8px; }
  body[data-page=tuner] h1 { margin-top: 12px; font-size: clamp(52px, min(7vw, 8vh), 84px); }
  /* the eyebrow pill steps aside here too (as on a short phone): with the volume's line the card ended 54 px under the
     first screen at 1440 × 900 (QA) */
  body[data-page=tuner] .hero > .eyebrow { display: none; }
  body[data-page=tuner] .hero > .eyebrow + h1 { margin-top: 0; }
  body[data-page=tuner] .hero .lede { margin-top: 10px; max-width: 780px; font-size: clamp(16px, 1.4vw, 18px); }
  body[data-page=tuner] main > .tool { padding-top: clamp(14px, 2.2vh, 24px); }
  .tuner-copy .checks { display: none; }
  .tuner-panel { padding-top: clamp(16px, 2.4vh, 24px); padding-bottom: 20px; }
  .tuner-copy { padding-top: calc(clamp(16px, 2.4vh, 24px) + 1px); }
  .tp-main { gap: 8px; }
  .tuner-panel .big-note { font-size: clamp(64px, 9vh, 96px); }
  .panel-strings { gap: 8px; padding-top: 12px; }
  .star { min-height: 60px; }
  html:not(.tuner-focus) .m-strobe { height: 56px; }
  /* the volume's thin line under Sound and Length still ends on the first screen at 1440 × 900 (any meter) */
  html:not(.tuner-focus) .tuner-panel { padding-top: clamp(14px, 1.8vh, 20px); }
  .tuner-copy { padding-top: calc(clamp(14px, 1.8vh, 20px) + 1px); }
  html:not(.tuner-focus) .snd-pick { min-height: 50px; }
  html:not(.tuner-focus) .snd-row { row-gap: 6px; }
  html:not(.tuner-focus) .snd-row > .vol-row { height: 24px; }
  html:not(.tuner-focus) .snd-row > .vol-row .vol-slider { margin: -10px 0; }
}
/* shorter still (1280 × 800, 1024 × 768): the title steps down and the "asks once" line steps aside */
@media (min-width: 900px) and (max-height: 860px) {
  .tuner-title { font-size: clamp(34px, 3.9vw, 50px); }
  .tuner-intro .tuner-ask { display: none; }
}
/* tool and album pages on a desktop: a compact hero, so the tool (Choose a song, Tune like this) is on the first screen */
@media (min-width: 900px) {
  body[data-page=playalong] .hero, .hero.bd-album-hero { padding-top: calc(76px + var(--top) + clamp(6px, 2.4vh, 28px)); }
  body[data-page=playalong] .hero .crumbs, .hero.bd-album-hero .crumbs { margin-bottom: 10px; }
  body[data-page=playalong] h1, .hero.bd-album-hero h1 { margin-top: 14px; font-size: clamp(48px, min(5.6vw, 9vh), 80px); }
  body[data-page=playalong] .hero .lede, .hero.bd-album-hero .lede { margin-top: 12px; max-width: 760px; font-size: clamp(16px, 1.4vw, 18px); }
  body[data-page=playalong] main > .tool { padding-top: clamp(20px, 3vh, 36px); }
}

/* ---------- big screens ---------- */
@media (min-width: 1600px) { :root { --maxw: 1320px; } .hero { max-width: 1300px; } }

/* ---------- small screens ---------- */
/* the top bar's widths, measured with the tuner pages' Settings gear and room for a desktop scrollbar (17 px): the nav
   (its Play along "Beta" pill too) needs about 1000 px beside the gear and the palette, Install about 1200 px; under
   that they step into the Menu, the same on every page so the bar never changes between pages */
@media (min-width: 561px) { .site-header > .btn + .btn { margin-left: -10px; } } /* the round buttons as one group */
/* off the tuner pages, the gear's place stays empty where the nav shows, so the nav never moves between pages */
.bar-space { visibility: hidden; pointer-events: none; }
/* 1001–1199 px: Install as its icon alone (its words stay for screen readers), the nav a touch tighter beside it */
@media (min-width: 1001px) and (max-width: 1199px) {
  .site-header .install-btn { width: 44px; padding: 0; }
  .install-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-nav { gap: 14px; }
  .site-nav a:nth-child(2)::after { margin-left: 14px; }
}
@media (max-width: 1000px) {
  .site-nav, .bar-space { display: none; }
  .site-header .install-btn { display: none !important; } /* the menu has it */
  .menu-btn { display: inline-flex; }
}
@media (max-width: 899px) {
  /* one column: kicker, title and the chips, then the panel; the caption, the tension plate and the no-mic line
     follow the panel, so a phone's first screen holds the note, the meter and Start */
  .tuner-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tuner-copy { display: contents; }
  .tuner-copy > * { min-width: 0; }
  .tuner-panel { order: 1; margin-top: 4px; }
  .tuner-copy > :is(.tuner-caption, .tension, .tension-link, .tuner-more) { order: 2; }
  .tuner-caption { margin-top: 4px; }
  .tuner-lede, .tuner .checks { display: none; }
  main > .tool { padding-top: 24px; }
}
@media (max-width: 560px) {
  .site-header { gap: 12px; }
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .theme { padding: 6px; gap: 6px; font-size: 12.5px; border-radius: 14px; }
  .theme-swatch { height: 56px; border-radius: 10px; }
  .wordmark { font-size: 16px; }
  .mark { width: 30px; height: 30px; }
  .hero { padding-top: calc(74px + var(--top)); } /* clear of the 68 px top bar */
  .hero .crumbs { display: none; } /* the page's place is in the top bar, the footer and the related links */
  .lede { font-size: 15.5px; margin-top: 16px; }
  .hero .lede { font-size: 16px; line-height: 1.45; margin-top: 10px; } /* the size of the text it introduces */
  h1 { margin-top: 12px; }
  main > .tool { padding-top: 16px; }
  .tuner-card { padding: 16px 14px 14px; border-radius: 24px; gap: 10px; }
  .tuner-panel { padding: 14px 14px 18px; }
  .tp-main { gap: 8px; }
  .tuner-title { font-size: 34px; }
  /* LARGE on phones: tall chips, big strings, readable words */
  .pick, .combo, .chip-tune { height: 52px; min-height: 52px; }
  .pick { font-size: 16px; }
  .chip-name { font-size: 17px; }
  .chip-arrow { width: 44px; }
  .pick-a4 b { font-size: 18px; }
  .stars { grid-template-columns: repeat(var(--cols-sm, 3), minmax(0, 1fr)); gap: 14px 8px; }
  .stars[data-courses] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star { min-height: 64px; }
  .star-note { font-size: 21px; }
  .star-hz { font-size: 12px; }
  .big-note small { margin-left: 0.4em; }
  .m-words { font-size: 10.5px; letter-spacing: 0.08em; gap: 4px; }
  .m-mid { width: 6em; font-size: 15px; }
  .tl-name { font-size: 38px; }
  /* focus mode on a phone: one compact chips row, the instrument as its picture */
  .tuner-focus .tuner-card { background: color-mix(in srgb, var(--bg) 66%, transparent); }
  .tuner-focus .picks { gap: 6px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .tuner-focus .pick-inst { padding: 0 8px; }
  .tuner-focus .pick-inst .pick-label, .tuner-focus .pick-inst .pk-caret { display: none; }
  .tuner-focus .pick-a4 { padding: 0 12px; }
  .tuner-focus .chip-name { font-size: 16px; }
  .tuner-focus .tp-main { gap: 12px; }
  .tuner-focus .star { min-height: 64px; }
  .tuner-bar { gap: 6px; padding-inline: max(10px, var(--left)) max(10px, var(--right)); }
  .tuner-bar > * { min-width: 0; }
  .tuner-bar .hear { min-width: 0; padding: 0 14px; }
  .tuner-bar .seg button { padding: 0 11px; font-size: 13.5px; }
  .tuner-bar .listen { width: 48px; padding: 0; }
  .tuner-bar .listen .bar-word { display: none; }
  .tuner-bar .done { padding: 0 16px; }
  /* focus mode: a 12-string's pairs three across; Sound and Length stay under them */
  .tuner-focus .stars[data-courses] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
  .tuner-focus .stars[data-courses] .course { padding: 3px; gap: 3px; }
  .tuner-focus .stars[data-courses] .star { padding-inline: 0; }
  .tuner-focus .stars[data-courses] .star-hz { font-size: 10px; letter-spacing: -0.01em; } /* "146.8 Hz" inside half a pair tile */
  .tuner-focus .snd-pick { min-height: 46px; }
  .tuner-focus .m-words { font-size: 12.5px; letter-spacing: 0.06em; } /* read at arm's length */
}
/* the bar fits a 360 px screen with a gutter on both sides */
@media (max-width: 420px) {
  .tuner-bar { gap: 4px; padding-inline: max(8px, var(--left)) max(8px, var(--right)); }
  .tuner-bar .hear { padding: 0 12px; }
  .tuner-bar .hear svg { display: none; }
  .tuner-bar .seg button { padding: 0 9px; }
  .tuner-bar .done { padding: 0 12px; }
}
@media (max-width: 430px) { /* the meter words take two short lines: ◂ LOW / TIGHTEN */
  .m-dot { display: none; }
  .m-act { display: block; color: inherit; } /* the side that applies lights up whole (QA: TIGHTEN stayed grey) */
  .m-words { line-height: 1.35; }
}
@media (max-width: 380px) {
  .tuner-bar .seg button { padding: 0 8px; font-size: 13px; }
  .tuner-bar .hear { padding: 0 10px; }
  .tuner-bar .done { padding: 0 11px; }
  .pick-a4 { padding: 0 12px; }
}
/* a short phone (360 × 740): everything a notch tighter, so Start still shows on the first screen */
@media (max-width: 560px) and (max-height: 760px) {
  .hero { padding-top: calc(74px + var(--top)); }
  h1 { margin-top: 10px; font-size: 44px; }
  /* the tuner's pages: the eyebrow pill steps aside, so the title, lede and Start share the first screen */
  body[data-page=tuner] .hero > .eyebrow { display: none; }
  body[data-page=tuner] h1 { margin-top: 0; }
  .hero .lede { line-height: 1.45; margin-top: 8px; }
  main > .tool { padding-top: 16px; }
  .tuner-card { padding-top: 16px; gap: 10px; }
  .tuner-panel { padding-top: 12px; }
  .tp-head { min-height: 32px; }
  .tuner-panel .big-note { font-size: 64px; }
}
@media (max-width: 360px) { .eyebrow, .hero .kicker { font-size: 11px; letter-spacing: 0.08em; padding: 6px 12px; gap: 8px; } }
/* short screens in focus mode: the note gives way first, so the strings and the bar stay in view */
@media (max-height: 800px) {
  html.tuner-focus .tuner-panel .big-note { font-size: clamp(64px, min(28vw, 13svh), 200px); }
  .tuner-focus .tuner-sub { display: none; }
}
@media (max-height: 760px) {
  .tuner-focus .tp-main { gap: 8px; }
  .tuner-focus .panel-strings { gap: 8px; padding-top: 10px; }
  .tuner-focus .star { min-height: 52px; padding-block: 6px; }
}
@media (max-height: 700px) { /* 375 × 667 */
  html.tuner-focus .tuner-panel .big-note { font-size: clamp(56px, 12svh, 120px); }
  .tuner-focus .m-strobe { height: 64px; }
  /* the volume's thin line costs a row: the strings' head row ("Strings · tap to hear") steps aside for it, and its
     Hear all sits at the end of the volume's line, under Sound and Length */
  .tuner-focus .ps-head { display: none; }
  .tuner-focus .vol-row .vol-val { display: none; }
  .tuner-focus .vol-row .vol-all:not([hidden]) { display: inline-flex; }
}
/* a phone on its side: chips and status across the top, note and meter left, strings right */
@media (orientation: landscape) and (max-height: 560px) {
  .tuner-focus .tp-main {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-content: safe center;
    column-gap: 24px; row-gap: 8px; max-width: 980px;
  }
  .tuner-focus .tp-main > :not(.tp-slot, .tp-head, .panel-strings) { grid-column: 1; }
  .tuner-focus .tp-slot, .tuner-focus .tp-head { grid-column: 1 / -1; }
  .tuner-focus .panel-strings { grid-column: 2; grid-row: 3 / span 6; align-self: center; border-top: 0; padding-top: 0; }
  html.tuner-focus .tuner-panel .big-note { font-size: clamp(48px, 16svh, 88px); }
  /* the left column must fit between the chips and the bar: a lower dial and band, the hint a size down */
  .tuner-focus :is(.pick, .combo) { height: 42px; min-height: 42px; }
  .tuner-focus .tp-main > .meter { display: grid; flex: none; }
  .tuner-focus .tuner[data-meter=needle] .m-needle { display: block; }
  .tuner-focus .m-dial { width: min(440px, 100%); height: auto; max-height: 76px; }
  .tuner-focus .m-strobe { height: 52px; }
  .tuner-focus .m-track { height: 28px; }
  .tuner-focus .panel-hint { --hint-fs: 15px; }
  .tuner-focus .tuner-sub { display: none; }
  .tuner-focus .snd-pick { min-height: 42px; }
  .tuner-focus .panel-strings { gap: 8px; }
  .tuner-focus .stars { row-gap: 10px; }
  .tuner-focus .star { min-height: 52px; padding-block: 6px; }
  .tuner-focus .tuner-denied { padding: 10px 14px; font-size: 13.5px; }
}

/* ---------- All strings (strum mode): one bar per string, like tuner needles side by side ----------
   tuner.js builds the bars (#t-sm-board) and sets --bars (columns), --sm-half (the thumb's travel each way, px) and
   --zone (the precision's ±threshold as a share of that travel); each lane carries --p (−1 flat … +1 sharp).
   Higher on the bar = higher in pitch. Mint and a ✓ in tune, coral off, and the words under each bar ("tighten",
   "loosen", "in tune") and its position carry the meaning too. Before Start the bars play an example (inert). */
.strum, .sm-lines { display: none; }
.tuner.is-strum :is(.tuner-readout, .meter, .meter-seg, .meter-cycle, .demo-hint) { display: none !important; }
.tuner.is-strum .live { position: absolute !important; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tuner.is-strum .strum { display: block; position: relative; width: 100%; }
.tuner.is-strum .sm-lines { display: grid; justify-items: center; gap: 2px; width: 100%; text-align: center; }
.tuner[data-phase=intro] .sm-board { pointer-events: none; }

.sm-board {
  --bars: 6; --sm-half: 100px; --zone: 0.18;
  display: grid; grid-template-columns: repeat(var(--bars), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  height: clamp(240px, 34vh, 320px); margin-inline: -6px; transition: opacity 0.4s;
}
.sm-board[data-two-rows] { row-gap: 10px; height: clamp(380px, 54vh, 560px); }
.sm-bar {
  --c: var(--muted); --vs: clamp(17px, 50cqi, 44px);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 0;
  padding: 8px 1px 6px; border: 0; border-radius: 20px; background: none; color: var(--text); font: inherit; text-align: center;
  container-type: inline-size; touch-action: manipulation; transition: background 0.3s;
}
.sm-bar:hover { background: rgba(255, 255, 255, 0.045); }
.sm-bar:focus-visible { outline-offset: -2px; }
.sm-bar.is-off, .sm-bar.is-out { --c: var(--coral); }
/* a guess, a value inside the window not held long enough yet ("almost"), two strings on one note read together: neutral */
.sm-bar.is-blend, .sm-bar.is-near { --c: var(--text); }
.sm-bar.is-tune { --c: var(--foam); background: radial-gradient(55% 46% at 50% 50%, rgba(155, 235, 217, 0.12), transparent 78%); }
/* the cents, big and bold: two smaller numbers when a 12-string's pair reads apart */
.sm-val {
  display: grid; align-content: center; justify-items: center; height: var(--vs); font: 800 var(--vs)/1 var(--display);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--c); white-space: nowrap; transition: color 0.3s;
}
.sm-bar.is-none .sm-val { color: var(--faint); }
.sm-num { display: block; }
.sm-num2 { display: none; }
/* ≈ marks a guess: small, so "≈−16" fits a narrow bar; a guess and a far-off value a size down, never sticking out */
.sm-approx { font-style: normal; font-size: 0.6em; font-weight: 700; margin-right: 0.03em; vertical-align: 0.14em; letter-spacing: 0; }
.sm-bar.is-blend .sm-val { font-size: calc(var(--vs) * 0.84); }
/* a pair (or two strings on one note) can read apart: every number keeps room for two, so the lanes line up */
.sm-board[data-split-room] .sm-val { height: calc(var(--vs) * 1.42); }
.sm-bar.is-split .sm-val { font-size: calc(var(--vs) * 0.7); line-height: 1.02; }
.sm-bar.is-split .sm-num2 { display: block; }
/* the needle, standing up: the track (one lane, two for a pair), ticks at ±10 ¢, the mint line and zone, fill, thumb */
.sm-col { position: relative; flex: 1 1 auto; min-height: 48px; width: 100%; display: flex; justify-content: center; gap: max(3px, 7cqi); }
.sm-lane {
  position: relative; width: clamp(16px, 40cqi, 44px); height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0.09));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 0.3s, background 0.3s, opacity 0.3s;
}
.sm-bar[data-lanes="2"] .sm-lane { width: clamp(10px, 26cqi, 26px); }
.sm-lane::before, .sm-lane::after {
  content: ''; position: absolute; left: 24%; right: 24%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.2); top: calc(50% - 0.5 * var(--sm-half));
}
.sm-lane::after { top: calc(50% + 0.5 * var(--sm-half)); }
.sm-zone {
  position: absolute; left: 0; right: 0; top: 50%; height: max(8px, calc(2 * var(--zone) * var(--sm-half))); border-radius: 6px;
  transform: translateY(-50%); background: color-mix(in srgb, var(--foam) 22%, transparent); transition: background 0.3s, box-shadow 0.3s;
}
.sm-mid { position: absolute; left: -6px; right: -6px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--foam); opacity: 0.8; }
.sm-fill {
  position: absolute; left: 3px; right: 3px; bottom: 50%; height: var(--sm-half); border-radius: 999px; transform-origin: 50% 100%;
  transform: scaleY(var(--p, 0)); background: linear-gradient(0deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 85%, transparent));
  transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.3s;
}
.sm-thumb {
  position: absolute; left: -7px; right: -7px; top: 50%; height: 16px; margin-top: -8px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 18px -2px color-mix(in srgb, var(--c) 80%, transparent);
  transform: translate3d(0, calc(var(--p, 0) * var(--sm-half) * -1), 0);
  transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.3, 1), box-shadow 0.3s, background 0.3s, opacity 0.3s;
}
.sm-bar[data-lanes="2"] .sm-thumb { left: -4px; right: -4px; height: 12px; margin-top: -6px; }
.sm-lane.is-empty :is(.sm-thumb, .sm-fill) { opacity: 0; }
.sm-bar.is-none .sm-lane { opacity: 0.55; }
.sm-bar.is-tune .sm-lane {
  background: linear-gradient(180deg, rgba(155, 235, 217, 0.11), rgba(155, 235, 217, 0.04) 50%, rgba(155, 235, 217, 0.11));
  box-shadow: inset 0 0 0 1px rgba(155, 235, 217, 0.5), 0 0 26px -6px rgba(155, 235, 217, 0.8);
}
.sm-bar.is-tune .sm-zone { background: color-mix(in srgb, var(--foam) 48%, transparent); box-shadow: 0 0 14px rgba(155, 235, 217, 0.45); }
.sm-bar.is-tune .sm-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(155, 235, 217, 0.3), 0 0 26px rgba(155, 235, 217, 0.75); }
/* a string that only blends with another (an octave in tune with it): its inferred value as a hollow thumb */
.sm-lane.is-hollow .sm-thumb { background: var(--ink); box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent); }
.sm-lane.is-hollow .sm-fill { opacity: 0; }
/* too far off to read: the end of the bar glows and a big arrow points the way to go */
.sm-arrow {
  display: none; position: absolute; left: 50%; width: clamp(26px, 70cqi, 44px); height: clamp(26px, 70cqi, 44px); margin-left: calc(clamp(26px, 70cqi, 44px) / -2);
  fill: none; stroke: var(--coral); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.65));
}
.sm-bar.is-out .sm-arrow { display: block; }
.sm-bar.is-out-hi .sm-arrow { top: 6px; }
.sm-bar.is-out-lo .sm-arrow { bottom: 6px; transform: rotate(180deg); }
.sm-bar.is-out :is(.sm-thumb, .sm-fill) { opacity: 0; }
.sm-bar.is-out-hi .sm-lane { background: linear-gradient(180deg, rgba(255, 107, 107, 0.55), rgba(255, 107, 107, 0.1) 42%, rgba(255, 255, 255, 0.04)); }
.sm-bar.is-out-lo .sm-lane { background: linear-gradient(0deg, rgba(255, 107, 107, 0.55), rgba(255, 107, 107, 0.1) 42%, rgba(255, 255, 255, 0.04)); }
.sm-bar.is-out .sm-val { font-size: calc(var(--vs) * 0.78); }
/* the first readings of a strum on a bar that shows nothing yet: a soft pulse (opacity only: cheap to draw); a bar that
   shows a value keeps it still until the strum's own reading replaces it (it used to pulse at every strum: the owner's
   "something blinks"); a value not refreshed for a while or paused: the bar fades, its number and word stay readable;
   a peg turning: quicker */
.sm-bar.is-none.is-pending :is(.sm-lane, .sm-num) { animation: sm-pending 1.1s ease-in-out infinite; }
@keyframes sm-pending { 50% { opacity: 0.4; } }
.sm-bar.is-stale .sm-val, .strum.is-paused .sm-bar .sm-val { opacity: 0.78; }
.sm-bar.is-stale .sm-word, .strum.is-paused .sm-bar .sm-word { color: var(--muted); }
.sm-bar.is-stale .sm-col, .strum.is-paused .sm-bar .sm-col { opacity: 0.4; }
.sm-bar.is-moving :is(.sm-thumb, .sm-fill) { transition-duration: 0.09s; }
/* the words under the bar: tighten · loosen · in tune · tighten a lot · ≈ with E2 */
.sm-word {
  display: grid; place-items: center; align-content: end; min-height: 2.3em; max-width: 100%; font: 800 clamp(10.5px, 22cqi, 15px)/1.15 var(--font);
  color: var(--c); text-wrap: balance; transition: color 0.3s, opacity 0.3s;
}
/* small coral words a touch lighter: 4.5:1 on every background theme */
.sm-bar:is(.is-off, .is-out) .sm-word { color: color-mix(in srgb, var(--coral) 78%, #fff); }
.sm-bar.is-tune .sm-word::before { content: '✓'; display: block; font-size: 1.15em; line-height: 1; }
.sm-bar:is(.is-blend, .is-near) .sm-word { color: var(--muted); }
/* a pair read apart: one word per string, in the order of its numbers */
.sm-word.is-two { gap: 0; line-height: 1.1; }
.sm-w { display: block; white-space: nowrap; }
.sm-w.is-ok { color: var(--foam); }
/* narrow bars (7 or 8 strings on a phone): the way to turn as a big arrow, ▲ tighten, ▼ loosen (the word stays in the
   bar's label for screen readers) */
@container (max-width: 50px) {
  .sm-bar[data-dir] .sm-word { font-size: 0; min-height: calc(2.3 * clamp(10.5px, 22cqi, 15px)); }
  .sm-bar[data-dir] .sm-word::after { font-size: 18px; line-height: 1; }
  .sm-bar[data-dir=up] .sm-word::after { content: '▲'; }
  .sm-bar[data-dir=down] .sm-word::after { content: '▼'; }
}
.sm-name { display: grid; justify-items: center; gap: 2px; line-height: 1; }
.sm-note { font: 800 clamp(15px, 40cqi, 30px)/1 var(--display); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.sm-note sub { font-size: 0.62em; vertical-align: baseline; margin-left: 1px; color: var(--muted); font-weight: 700; }
.sm-sub { font-size: clamp(10px, 19cqi, 12.5px); font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-sub .acc svg { width: 0.42em; height: 0.75em; }
/* waiting for a strum: the bars dim and the ask stands over them */
.sm-wait {
  display: none; position: absolute; inset: 0; z-index: 2; place-content: center; justify-items: center; gap: 12px; padding: 0 10%;
  pointer-events: none; text-align: center; font: 800 clamp(20px, 5.4vw, 28px)/1.25 var(--display); letter-spacing: -0.01em; color: var(--text); text-wrap: balance;
}
.sm-wait svg { width: 44px; height: 44px; color: var(--coral); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(255, 107, 107, 0.5)); }
/* under the ask, one honest line: the mode is in beta */
.sm-beta { display: block; max-width: 32ch; margin-top: 2px; font: 700 14px/1.45 var(--font); letter-spacing: 0; color: var(--muted); text-shadow: 0 1px 10px var(--bg); }
.sm-beta .beta { margin-right: 4px; vertical-align: 0.1em; text-shadow: none; }
@media (min-width: 900px) { .sm-beta { max-width: 44ch; font-size: 15.5px; } }
.strum.is-waiting .sm-wait { display: grid; }
.strum.is-waiting .sm-board { opacity: 0.5; }
.strum.is-waiting .sm-val { visibility: hidden; }
.sm-board.is-complete .sm-bar.is-tune .sm-lane { animation: sm-flash 0.8s ease-out; }
@keyframes sm-flash { 40% { box-shadow: 0 0 0 4px rgba(155, 235, 217, 0.45), 0 0 36px rgba(155, 235, 217, 0.85); } }
/* the summary ("4 of 6 in tune · B3 −12 ¢, E4 +7 ¢") and one short hint, each a box of two lines whatever it says (one
   line for the hint before Start), so neither moves the other or the bars; a longer one steps its size down inside its
   box (tuner.js fitHint). Sizes come from --sum-fs / --smh-fs, so a smaller step never changes the box. */
.sm-sum {
  --sum-fs: clamp(16px, 4.4vw, 21px); --sum-ch: 34;
  width: 100%; max-width: calc(var(--sum-ch) * 0.6 * var(--sum-fs)); height: calc(2 * 1.35 * var(--sum-fs)); overflow: hidden;
  font: 700 var(--sum-fs)/1.35 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.sm-sum.is-long { font-size: calc(0.88 * var(--sum-fs)); }
.sm-sum.is-longer { font-size: calc(0.8 * var(--sum-fs)); line-height: calc(2 * 1.35 * var(--sum-fs) / 3); }
.sm-sum b { color: var(--text); font-weight: 800; }
.sm-sum.is-all, .sm-sum.is-all b { color: var(--foam); }
.sm-hint {
  --smh-fs: 15px; --smh-ch: 36;
  width: 100%; max-width: calc(var(--smh-ch) * 0.6 * var(--smh-fs)); height: calc(2 * 1.4 * var(--smh-fs)); overflow: hidden;
  font-size: var(--smh-fs); font-weight: 700; line-height: 1.4; color: var(--muted); text-wrap: balance;
}
.sm-hint.is-long { font-size: calc(0.88 * var(--smh-fs)); }
.sm-hint.is-longer { font-size: calc(0.8 * var(--smh-fs)); line-height: calc(2 * 1.4 * var(--smh-fs) / 3); }
.tuner:not(.is-strum) .sm-board, html:not(.tuner-focus) .sm-bar { --vs: clamp(16px, 42cqi, 34px); }
html:not(.tuner-focus) .sm-note { font-size: clamp(15px, 36cqi, 24px); }
/* before Start the example stays compact: Start (phones), the strings and Sound/Length (desktop) stay on the first screen */
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] :is(.sm-sum, .sm-sub) { display: none; }
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-hint { height: calc(1.4 * var(--smh-fs)); }
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-bar { gap: 3px; padding-block: 4px 2px; }
/* (one height for a word and for the ▲/▼ of a narrow bar, so the example's lanes never change length) */
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-word { min-height: 0; height: max(18px, calc(1.25 * clamp(10.5px, 22cqi, 15px))); }
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-bar.is-tune .sm-word { grid-auto-flow: column; gap: 3px; }
html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-thumb { height: 12px; margin-top: -6px; }
@media (max-width: 899px) { html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-board { height: clamp(150px, 22vh, 190px); } }
@media (max-width: 400px) { html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-bar.is-tune .sm-word::before { content: none; } }
@media (min-width: 900px) {
  .sm-board { height: clamp(300px, 40vh, 380px); }
  .sm-sum { --sum-fs: 21px; --sum-ch: 46; }
  .sm-hint { --smh-fs: 16px; }
  /* arm's length on a desktop: the words and string numbers a size up */
  .tuner-focus .sm-word { font-size: 18px; }
  .tuner-focus .sm-sub { font-size: 14px; }
  .tuner-focus .sm-hint { --smh-ch: 60; }
}
@media (min-width: 900px) and (max-height: 940px) {
  .sm-board { height: clamp(280px, 36vh, 320px); }
  html:not(.tuner-focus) .tuner.is-strum[data-phase=intro] .sm-board { height: 176px; }
}
/* focus mode: the bars take the room between the chips and the summary; the string chips step aside (the bars
   name every string, and a tap on one tunes it alone) */
.tuner-focus .tuner.is-strum .panel-strings { display: none; }
.tuner-focus .tuner.is-strum .tp-main > .strum { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tuner-focus .sm-board { flex: 1 1 auto; height: auto; min-height: 200px; max-height: 640px; }
.tuner-focus .sm-board[data-two-rows] { max-height: none; }
.tuner-focus .sm-sum { --sum-fs: clamp(18px, 5vw, 23px); }
.tuner-focus .sm-hint { --smh-fs: 16px; }
.tuner-focus .tuner.is-strum .tp-main { padding-bottom: 12px; }
/* the bars keep their size whatever the summary says: its box and the hint's hold two lines each (above) */
.tuner-focus .tuner.is-strum .sm-lines { align-content: start; }
@media (max-width: 560px) {
  /* a phone: seven or eight bars reach toward the screen's edges so each is 44 px wide at 360 px; fewer keep (almost)
     the page's gutter */
  .tuner-focus .sm-board { margin-inline: -4px; }
  .tuner-focus .sm-board:is([data-n="7"], [data-n="8"]) { margin-inline: -12px; }
  .sm-board { margin-inline: -10px; }
}
@media (max-height: 700px) { .tuner-focus .sm-board { min-height: 170px; } }
/* a phone on its side: one column again, the bars in the room left, compact words */
@media (orientation: landscape) and (max-height: 560px) {
  .tuner-focus .tuner.is-strum .tp-main { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 980px; padding-bottom: 6px; }
  .tuner-focus .tuner.is-strum .tp-main > .strum { min-height: 0; }
  .tuner-focus .tuner.is-strum .sm-board { min-height: 120px; max-height: none; margin-inline: 0; }
  .tuner-focus .tuner.is-strum .sm-bar { --vs: clamp(16px, 30cqi, 28px); gap: 3px; padding-block: 2px; }
  .tuner-focus .tuner.is-strum .sm-word { min-height: 1.2em; font-size: 12px; }
  .tuner-focus .tuner.is-strum .sm-bar.is-tune .sm-word { grid-auto-flow: column; gap: 3px; }
  .tuner-focus .tuner.is-strum .sm-word.is-two { grid-auto-flow: column; gap: 4px; }
  .tuner-focus .tuner.is-strum .sm-note { font-size: 18px; }
  .tuner-focus .tuner.is-strum .sm-sub, .tuner-focus .tuner.is-strum .sm-hint { display: none; }
  .tuner-focus .tuner.is-strum .sm-sum { --sum-fs: 15px; --sum-ch: 999; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-fill, .sm-thumb, .sm-board, .sm-val, .sm-word, .sm-lane { transition: none !important; }
  .sm-bar.is-none.is-pending :is(.sm-lane, .sm-num), .sm-board.is-complete .sm-bar.is-tune .sm-lane { animation: none !important; }
  .sm-bar.is-none.is-pending .sm-lane { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
}
@media (forced-colors: active) {
  .sm-thumb { background: CanvasText; }
  .sm-lane { outline: 1px solid CanvasText; }
}
/* the mode switch in the bar: "All strings" keeps its short word on a small phone, still 44 px wide */
.seg-more { white-space: pre; }
@media (max-width: 400px) { .tuner-bar .seg-more { display: none; } }
.tuner-bar #t-mode button { min-width: 44px; }
/* the way back after a bar was tapped, in the lock line under the strings */
.tuner-lockline .sm-back { min-height: 44px; padding: 0 4px; color: var(--foam); text-decoration-color: color-mix(in srgb, var(--foam) 45%, transparent); font-size: inherit; }

/* ==========================================================================
   4 · Home sections (home.js, build/home.mjs; only "/"): "Shape the sound" (his lab row: Tuning · Reference A ·
   the tone generator from its own partial), Popular tunings (his tiles), the string tension teaser (his app card)
   ========================================================================== */
.home-lab { padding-top: 0; }
.home-lab .sub-head { margin: 52px 0 16px; }
.section-head.sub-head h2 { font-weight: 800; font-size: clamp(32px, 4.8vw, 52px); } /* "Shape the sound" as big as "Popular tunings" */
.lab .kicker { color: var(--coral); }
.lab .tl-name { overflow-wrap: break-word; text-wrap: balance; } /* "Double Drop C♯" takes two lines, never the card's edge */
.lab .tl-notes { margin-top: -4px; }
.lab .lab-note { min-height: 0; }
.lab-seg { display: flex; width: 100%; }
.lab-seg button { flex: 1 1 auto; min-width: 0; padding: 0 8px; font-size: 13.5px; }
.lab .chip:disabled { opacity: 0.35; pointer-events: none; }
/* LARGE controls: 40 px pills (38 px seg buttons) with a band that makes 44 px to the finger, at least 44 px wide */
.lab .tg-steps .chip { height: 40px; min-height: 40px; min-width: 44px; padding: 0 14px; font-size: 14px; }
.lab .tg-steps .chip::before { content: ''; position: absolute; inset: -3px 0; }
.lab .seg button, .lab-tone .seg button { height: 38px; min-width: 44px; }
.lab .seg button::before, .lab-tone .seg button::before { inset: -3px 0; }
.test-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lab .test-actions { justify-content: flex-start; }

/* his third card: the tone generator's own partial (generator.js wires it), in his lab-card look and order */
.lab-tone { display: grid; min-width: 0; }
.lab-tone > .gen { display: grid; }
.lab-tone .gen-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 12px 10px;
  padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass); box-shadow: none; overflow: hidden; overflow: clip;
  container-type: inline-size;
}
.lab-tone .gen-card::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.18), transparent 65%); opacity: 0.4; transition: opacity 0.4s;
}
.lab-tone .gen-card.is-playing::before { opacity: 1; animation: throb 1s ease-in-out infinite; }
.lab-tone .gen-card > * { position: relative; flex: 1 1 100%; min-width: 0; }
.lab-tone .gen-head { order: 1; }
.lab-tone .gen-read { order: 2; flex: 0 0 auto; }
.lab-tone .gen-note { order: 3; flex: 1 1 auto; }
.lab-tone .gen-slider { order: 4; }
.lab-tone .gen-steps { order: 5; }
.lab-tone #g-waves { order: 6; flex: 0 1 auto; }
.lab-tone .gen-vol { order: 7; }
.lab-tone .gen-presets { order: 8; }
.lab-tone .gen-actions { order: 9; flex: 0 1 auto; }
.lab-tone .gen-card > .fine { order: 10; }
.lab-tone .gen-keys, .lab-tone #g-a4 { display: none; } /* Reference A is the card beside it; keys work with focus inside */
.lab-tone .gen-head, .lab-tone .gen-head > div { display: grid; gap: 12px; }
.lab-tone .gen-head h3 { margin: 0; font-weight: 700; font-size: 24px; }
.lab-tone .gen-read { display: flex; align-items: baseline; gap: 8px; }
.lab-tone .gen-read .bignum { width: 5.2ch; }
@supports (field-sizing: content) { .lab-tone .gen-read .bignum { field-sizing: content; width: auto; min-width: 2.4ch; max-width: 7ch; padding-right: 0.08em; } }
.lab-tone .gen-read .unit { margin: 0; font: 700 18px/1 var(--font); }
.lab-tone .gen-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.lab-tone .gen-note-name { font: 800 17px/1.2 var(--display); color: var(--coral); }
.lab-tone .gen-cents { font: 700 14px/1.2 var(--display); color: var(--muted); }
.lab-tone .gen-at { font-size: 13px; font-weight: 700; color: var(--faint); }
.lab-tone #g-snap { height: 30px; min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.lab-tone .gen-slider { display: grid; gap: 2px; }
.lab-tone .gen-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.lab-tone .gen-steps, .lab-tone .gen-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-tone .gen-gap { display: none; }
.lab-tone .gen-steps .btn, .lab-tone .gen-presets .chip {
  position: relative; height: 40px; min-height: 40px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--muted); font: 700 14px/1.1 var(--font);
}
.lab-tone .gen-steps .btn:hover, .lab-tone .gen-presets .chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.lab-tone .gen-steps .btn::before, .lab-tone .gen-presets .chip::before { content: ''; position: absolute; inset: -3px 0; }
.lab-tone .gen-presets .chip.is-on { color: var(--coral); background: var(--glass); border-color: var(--coral); } /* F's outlined pill: one at a time */
.lab-tone #g-waves { width: max-content; max-width: 100%; }
.lab-tone #g-waves button[aria-checked=true] { background: var(--coral); color: var(--on-coral); }
.lab-tone .gen-vol { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.5ch; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; font-weight: 700; }
.lab-tone .gen-vol output { text-align: right; font-variant-numeric: tabular-nums; }
.lab-tone .gen-actions { display: flex; gap: 10px; }
.lab-tone .gen-actions ~ .gen-actions { flex: 1 1 0; } /* Sweep stays beside Play: its words take two lines first */
.lab-tone #g-sweep { min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.2; text-align: center; background: rgba(255, 255, 255, 0.07); border-color: var(--line-2); }
.lab-tone #g-sweep:hover { background: rgba(255, 255, 255, 0.11); }
.lab-tone #g-sweep.is-on { border-color: color-mix(in srgb, var(--coral) 65%, transparent); }
@container (max-width: 420px) {
  .lab-tone .gen-at { display: none; } /* A is in the card beside it */
  /* one reading row, "440 Hz  A4": the note and its cents stack at the right */
  .lab-tone .gen-note { flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; }
  .lab-tone .gen-read .bignum { font-size: 48px; }
  /* − octave −1 +1 + octave, then the two cent steps */
  .lab-tone .gen-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lab-tone .gen-steps [data-cents] { grid-column: span 2; }
  .lab-tone .gen-steps .btn { padding: 0 2px; }
  .lab-tone #g-waves button { padding: 0 10px; }
  .lab-tone #g-sweep { padding: 4px 14px; font-size: 14px; }
}

/* popular tunings: the string-chart tiles of tuning-tiles.js (styled in content.css), each a link to its tuning's
   page; a tap here loads it into the tuner, and the one in the tuner has a coral ring and "In the tuner" */
.home-tunings .section-head p { max-width: 520px; }
/* heading, line and legend, then the button: beside them on wide screens, under them on a phone (the legend then
   sits right above the tiles) */
.tunings-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.tunings-head > :not(.btn) { grid-column: 1; }
.tunings-head > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.tunings-head > .tt-key { margin-top: 4px; }
@media (max-width: 560px) {
  .tunings-head { grid-template-columns: minmax(0, 1fr); }
  .tunings-head > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* the string tension teaser: his app card as it is (aqua kicker, aqua glow, aqua button) */
.home-tension .app-card > * { position: relative; }
.tension-card > div > p:not(.tension-line):not(.kicker) { color: var(--muted); } /* the kicker stays his aqua */
.tension-card .tension-line { margin-top: 18px; color: var(--text); text-wrap: balance; }
.tension-line b { font-weight: 800; color: var(--text); }
.tension-line b.is-ok { color: var(--foam); }  /* standard tension: nothing to fix */
.tension-line b.is-big { color: var(--coral); } /* 8 % or more: another set is worth it */
.tension-advice { color: var(--foam); font-weight: 700; }
.features strong { font-size: 16px; }
.offline.is-ready::before { box-shadow: 0 0 10px var(--foam); }

/* ==========================================================================
   4 · Sheets & popovers: the tuner's Instrument, Tuning, Custom builder, Reference A and Settings.
   His bottom sheet (a centred dialog from 700 px) with his focus-labels, opts, seg, pills, tiles and rows.
   Scoped to .tuner where a rule could reach other sheets: the tuner's sheets live inside #t-root, so the
   generator's A sheet and the site sheets (Background, Menu, Install) keep their own look.
   ========================================================================== */

/* -- shared: sections, a label row with one small action, his pills (38 px, 44 px to the finger), sticky actions -- */
.tuner .sheet { gap: 16px; }
.sheet-sec { display: grid; gap: 10px; min-width: 0; }
.tuner .sheet .focus-label { margin: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tuner .sheet .chip::before { content: ''; position: absolute; inset: min(-3px, calc(50% - 22px)) -1px; }
.tuner .sheet .chip:disabled { opacity: 0.35; cursor: default; }
.pill-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.tuner .sheet :is(.pill-steps, .tg-steps) .chip, .sec-sign {
  height: 38px; min-height: 38px; padding: 0 14px; border-color: var(--line-2); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font-size: 14px; font-weight: 800;
}
.tuner .sheet :is(.pill-steps, .tg-steps) .chip:hover:not(:disabled), .sec-sign:hover:not(:disabled) { background: rgba(255, 255, 255, 0.11); }
.pill-steps .chip { min-width: 54px; }
.sec-sign { min-width: 44px; padding: 0 12px; font-size: 17px; }
.pill-steps .stepper-val { display: inline-flex; align-items: baseline; justify-content: center; padding: 0 4px; }
.pill-steps .bignum-sm { width: 2.7ch; font-size: 38px; text-align: center; }
.pill-steps .bignum-xs { width: 3.6ch; font-size: 30px; text-align: center; }
.pill-steps .unit { font-size: 16px; }
.tuner .sheet .lab-note { min-height: 0; }
.tuner .sheet .hint { font-size: 15px; }
.sheet-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet-tools .btn { color: var(--text); }
/* the sheet's answer stays in reach: Done (or Save) sits at the bottom while the sheet scrolls */
.tuner .sheet-actions {
  position: sticky; bottom: calc(-24px - var(--bottom)); z-index: 2; gap: 10px; justify-content: space-between;
  margin: 2px -22px calc(-24px - var(--bottom)); padding: 12px 22px calc(16px + var(--bottom));
  background: var(--bg-mid); border-top: 1px solid var(--line);
}
.tuner .sheet-actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-mid) 80%, transparent)); }

/* his sticky head, solid: the sheet's top colour, and a short fade under it so rows slide away under the title */
.sheet-head { background: color-mix(in srgb, var(--bg-top) 96%, white); padding-bottom: 10px; margin-bottom: -4px; }
.sheet-head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 96%, white), transparent); }

/* -- Instrument: search, groups, his picture tiles (Design F's .inst) -- */
/* a steady height: typing a search never makes the sheet jump */
.sheet-inst { gap: 14px; min-height: min(640px, calc(100dvh - 40px)); }
.sheet-search { position: relative; }
.sheet-search .ic { position: absolute; left: 17px; top: 50%; margin-top: -10px; color: var(--muted); pointer-events: none; }
.sheet-search .field { padding-left: 48px; border-radius: 999px; }
.inst-list { display: grid; gap: 22px; padding-bottom: 6px; }
.inst-group { display: grid; gap: 10px; }
.inst-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 900 12px/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.inst-group .badge { letter-spacing: 0.06em; text-transform: lowercase; }
.inst-group .chips .chip { color: var(--text); }
.inst-group > .fine { margin-top: -2px; }
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.inst-tile {
  position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px 8px 10px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; color: var(--text); font: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.inst-tile:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.inst-tile b { font-size: 14px; font-weight: 800; line-height: 1.2; padding: 0 2px; overflow-wrap: anywhere; }
.inst-tile small { font-size: 11.5px; line-height: 1.3; color: var(--muted); font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0 2px; }
.inst-std { white-space: nowrap; }
.inst-tile[aria-pressed=true] { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.25); }
/* the one on screen also carries a ✓ on its picture: colour is never the only signal */
.inst-tile[aria-pressed=true]::after {
  content: ''; position: absolute; top: 13px; right: 13px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0A12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.inst-art {
  --art-accent: var(--coral);
  display: grid; place-items: center; height: 76px; margin-bottom: 4px; border-radius: 12px; color: #EEF3F8;
  background: radial-gradient(circle at 26% 30%, rgba(63, 211, 230, 0.32), transparent 58%), radial-gradient(circle at 78% 72%, rgba(255, 107, 107, 0.26), transparent 58%), radial-gradient(circle at 50% 100%, rgba(167, 139, 250, 0.22), transparent 55%), linear-gradient(180deg, var(--bg-top), var(--bg));
}
.inst-art svg { width: 58px; height: 58px; }
.inst-empty { display: grid; justify-items: start; gap: 12px; color: var(--muted); }
/* a saved custom tuning: one full-width row, picture · text · delete */
.inst-saved { position: relative; display: grid; grid-column: 1 / -1; }
.inst-grid .inst-saved .inst-tile { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; min-height: 64px; padding: 8px 52px 8px 8px; }
.inst-saved .inst-tile > :not(.inst-art) { grid-column: 2; }
.inst-saved .inst-art { grid-row: 1 / span 2; width: 56px; height: 48px; margin: 0; }
.inst-saved .inst-art svg { width: 38px; height: 38px; }
.inst-saved .inst-tile[aria-pressed=true]::after { top: 50%; right: 52px; margin-top: -11px; }
.inst-del { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 12px; background: none; color: var(--muted); }
.inst-del:hover { color: var(--coral); background: rgba(255, 255, 255, 0.06); }
.inst-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* -- Tuning: his read-out card, the shapes (his opts / seg), the shift pills, the ladder as his tiles -- */
.sheet-tune .sheet-read { gap: 6px; padding: 16px 18px; }
.sheet-read .tl-name { overflow-wrap: anywhere; }
.tune-notes { letter-spacing: 0.08em; word-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.tune-notes small { margin-left: 0.15em; font-size: 0.68em; letter-spacing: 0; word-spacing: 0; color: var(--faint); }
.coral-ui .shape-opts { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.coral-ui .opt { color: var(--text); }
.coral-ui .opt[aria-checked=true] { border-color: var(--coral); color: var(--coral); background: rgba(255, 107, 107, 0.1); box-shadow: inset 0 0 0 1px var(--coral); }
.shape-opts .opt { white-space: normal; line-height: 1.15; text-wrap: balance; }
.shape-seg button { height: 40px; font-size: 14.5px; }
.tune-ladder { --c: var(--aqua); display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.tune-ladder[data-kind=drop] { --c: var(--coral); }
.tune-ladder[data-kind=open] { --c: var(--sand); }
.tune-ladder[data-kind=other] { --c: var(--violet); }
.rung {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 4px 8px; min-width: 0; min-height: 62px; padding: 10px 10px 10px 12px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line)); color: var(--text); text-align: left; font: inherit;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, 0.03)), rgba(255, 255, 255, 0.02) 70%);
  transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s;
}
.rung:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.rung b { font: 800 15px/1.2 var(--display); letter-spacing: -0.005em; }
.rung small { grid-column: 1 / -1; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 0.04em; word-spacing: 0.08em; color: color-mix(in srgb, var(--c) 45%, var(--text)); }
.rung-st {
  grid-area: 1 / 2; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 99px;
  font-size: 11.5px; font-weight: 900; line-height: 22px; text-align: center; color: var(--muted); background: rgba(255, 255, 255, 0.07); font-variant-numeric: tabular-nums;
}
.rung.is-on {
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 26%, rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--c) 6%, transparent) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--c) 80%, transparent);
}
.rung.is-on .rung-st { color: var(--ink); background: var(--c); }
.sheet-tune .tension { margin-top: -4px; }

/* -- Reference A: his big number, slider and preset pills; a popover from 700 px, his bottom sheet on phones -- */
.sheet-a4 { gap: 12px; }
.sheet.pop.is-anchored { width: 392px; }
.sheet-a4 .tg-read { flex-wrap: wrap; gap: 4px 10px; }
.sheet-a4 .tg-read .bignum { width: 5.4ch; font-size: 52px; }
.sheet-a4 .tg-unit { font-size: 18px; }
.sheet-a4 .badge { align-self: center; }
.a4-range { display: grid; gap: 2px; }
.a4-range .a4-ends { margin-top: 0; }
.sheet-a4 .a4-picks { gap: 8px; }
.a4-more { justify-self: start; min-height: 44px; margin: -8px 0 -6px; padding: 0 2px; }
.a4-extra { display: grid; gap: 12px; }
.sheet-a4 .tg-steps .chip.is-on { color: var(--on-coral); background: var(--coral); border-color: var(--coral); }
.a4-fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.sheet-a4 .a4-steps { display: flex; justify-content: flex-start; gap: 6px; }
.sheet-a4 .a4-steps .chip { min-width: 46px; padding: 0 10px; }
.sheet-a4 .a4-cents { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
.sheet-a4 .a4-cents .bignum-xs { width: 3.9ch; font-size: 24px; }
.sheet-a4 .a4-cents .unit { font-size: 14px; }
.a4-extra .focus-label { margin-top: 4px; }

/* -- Settings: his rows (a card per setting: icon, name, the control, one line of help) -- */
.sheet-set { gap: 10px; }
.set-row { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.sheet-head + .set-row { border-top: 1px solid var(--line); padding-top: 14px; }
.set-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.set-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.set-switch > :last-child { flex: none; }
.set-ic {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--aqua);
  background: color-mix(in srgb, var(--aqua) 15%, rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.set-ic svg { width: 20px; height: 20px; }
.set-ic-text { font: 800 15px/1 var(--display); letter-spacing: -0.01em; }
.set-ic-text sub { font-size: 0.66em; vertical-align: baseline; margin-left: 1px; }
.set-name { flex: 1; font-weight: 800; font-size: 16px; line-height: 1.25; }
.set-sub { margin: 2px 0 -2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.set-more { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.tuner .sheet .seg-full button { height: auto; min-height: 38px; padding: 4px 8px; font-size: 14px; line-height: 1.15; white-space: normal; text-wrap: balance; }
.tuner .sheet #t-set-acc .acc { font-size: 22px; line-height: 1; }
.tuner .sheet #t-set-len button { flex: 1 1 auto; }
.seg-ic button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg-ic svg { width: 18px; height: 18px; flex: none; }
.sheet-set .tuner-promise { justify-content: center; padding: 6px 0 2px; }

/* -- Custom builder: his card rows -- */
.sheet-custom .sheet-head .kicker { margin-bottom: 4px; }
.cb-strings { gap: 12px; }
.stepper { gap: 6px; }
.stepper.cb-count .step { width: 44px; min-width: 44px; padding: 0; font-size: 20px; }
.stepper.cb-count .bignum-sm { width: 2.2ch; font-size: 34px; text-align: center; }
.cb-pairs { display: grid; gap: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.cb-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.cb-check input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 24px; height: 24px; margin: 0; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--line-2); background: rgba(255, 255, 255, 0.06); transition: background 0.2s, border-color 0.2s;
}
.cb-check input:checked {
  border-color: var(--coral);
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0A12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.cb-check input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.cb-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.cb-num { font-size: 12px; font-weight: 900; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cb-hz { color: var(--muted); font: 700 13px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-cents { display: inline-flex; align-items: center; gap: 4px; }
.cb-cents-in { width: 4.4em; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 12px; text-align: center; font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.cb-ctrl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cb-ctrl .step { min-width: 44px; padding: 0 10px; }
.cb-ctrl .step[data-step="-12"] { margin-left: auto; }
.cb-note { width: 4.4em; min-width: 0; padding: 0 4px; border-radius: 14px; text-align: center; font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.cb-note[aria-invalid=true] { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); }
.cb-err { margin: 0; color: var(--coral); font-weight: 700; }
.cb-list[data-pairs] .cb-row[data-partner] { margin-top: -4px; border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* -- Sound and Length: small menus beside their pills (bottom sheets on phones); a pick shows a ✓ -- */
.sheet-pick { gap: 12px; }
.pick-list { display: grid; gap: 6px; }
.pick-list button {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px;
  padding: 8px 46px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--text); text-align: left; font: inherit; transition: background 0.2s, border-color 0.2s;
}
.pick-list button:hover { background: rgba(255, 255, 255, 0.08); }
.po-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted);
  background: rgba(255, 255, 255, 0.06); transition: background 0.2s, color 0.2s;
}
.po-ic .ic { width: 22px; height: 22px; }
.po-text { display: grid; gap: 1px; min-width: 0; }
.po-text b { font: 800 17px/1.2 var(--display); letter-spacing: -0.005em; }
.po-text small { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.pick-list button[aria-checked=true] { border-color: var(--coral); background: rgba(255, 107, 107, 0.1); box-shadow: inset 0 0 0 1px var(--coral); }
.pick-list button[aria-checked=true] .po-ic { color: var(--coral); background: rgba(255, 107, 107, 0.16); }
.pick-list button[aria-checked=true]::after, .snd-opts button[aria-checked=true]::after {
  content: ''; position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0A12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* the instrument's own sound, while the instrument decides */
.pick-list button.is-auto .po-text b::after, .snd-opts button.is-auto::before {
  content: 'Auto'; display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 99px; vertical-align: 2px;
  font: 900 10px/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foam); background: rgba(155, 235, 217, 0.12);
}
.pick-note { margin-top: -2px; }
/* Settings: the six sounds as his opts */
.snd-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.snd-opts button {
  position: relative; min-height: 48px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05); color: var(--text); font: 800 14.5px/1.15 var(--font); text-align: left;
}
.snd-opts button:hover { background: rgba(255, 255, 255, 0.09); }
.snd-opts button[aria-checked=true] { border-color: var(--coral); background: rgba(255, 107, 107, 0.1); box-shadow: inset 0 0 0 1px var(--coral); }
.snd-opts button[aria-checked=true]::after { top: -7px; right: -6px; width: 20px; height: 20px; margin: 0; background-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.snd-opts button.is-auto::before { position: absolute; top: -8px; left: 10px; margin: 0; }

/* -- the shape grid: each shape named as the tuning it gives at this shift, with its notes -- */
.shape-opts .opt { display: grid; align-content: center; gap: 2px; height: auto; min-height: 58px; padding: 7px 8px; }
.shape-opts .opt b { font: 800 15px/1.15 var(--display); letter-spacing: -0.005em; }
.shape-opts .opt small { font-size: 12.5px; font-weight: 800; line-height: 1.2; letter-spacing: 0.03em; word-spacing: 0.04em; white-space: nowrap; color: var(--muted); }
.shape-opts .opt[aria-checked=true] small { color: color-mix(in srgb, var(--coral) 70%, var(--text)); }
.shape-opts .sn { white-space: nowrap; }
.shape-seg button b { font-weight: inherit; }

/* -- Match a recording: the entry in Reference A, then choose how · measuring (a ring) · the result card -- */
.match-entry, .match-way {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; min-height: 62px;
  padding: 9px 12px 9px 10px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05);
  color: var(--text); text-align: left; font: inherit; transition: background 0.2s, border-color 0.2s;
}
.match-entry { border-color: color-mix(in srgb, var(--coral) 38%, var(--line-2)); background: linear-gradient(150deg, rgba(255, 107, 107, 0.13), rgba(255, 255, 255, 0.03) 75%); }
.match-entry:hover, .match-way:hover { background: rgba(255, 255, 255, 0.09); border-color: color-mix(in srgb, var(--coral) 55%, var(--line-2)); }
:is(.me-ic, .mw-ic) { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--coral); background: rgba(255, 107, 107, 0.16); }
:is(.me-ic, .mw-ic) .ic { width: 22px; height: 22px; }
:is(.me-text, .mw-text) { display: grid; gap: 1px; min-width: 0; }
:is(.me-text, .mw-text) b { font: 800 16.5px/1.2 var(--display); letter-spacing: -0.005em; }
:is(.me-text, .mw-text) small { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
:is(.me-go, .mw-go) { color: var(--muted); }
.sheet-match { gap: 14px; }
.sheet-match .sheet-head { justify-content: flex-start; gap: 6px; }
.sheet-match .sheet-title { flex: 1; min-width: 0; }
.sheet-back {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -4px 0 0 -12px; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--muted);
}
.sheet-back:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.sheet-back svg { width: 22px; height: 22px; }
.match-idle { display: grid; gap: 10px; }
.match-idle .hint { margin-bottom: 2px; }
.match-run { display: grid; justify-items: center; gap: 12px; padding: 4px 0 2px; text-align: center; }
.match-ring { position: relative; width: 172px; height: 172px; }
.match-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mr-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 8; }
.mr-fill { fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 0.3s linear; filter: drop-shadow(0 0 7px rgba(255, 107, 107, 0.55)); }
.mr-read { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; }
.mr-read b { font: 800 36px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mr-read small { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.match-status { min-height: 1.45em; max-width: 30ch; font-weight: 700; text-wrap: balance; }
.match-result { display: grid; gap: 12px; }
.match-card {
  display: grid; gap: 6px; padding: 16px 18px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--line));
  background: linear-gradient(150deg, rgba(255, 107, 107, 0.12), rgba(255, 255, 255, 0.03) 70%);
}
.match-head { font: 800 27px/1.12 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.match-meta { color: var(--foam); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.match-actions { display: grid; gap: 8px; }
.match-actions .btn { width: 100%; min-height: 50px; padding: 8px 18px; white-space: normal; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; }
.match-result .link { justify-self: start; padding: 0 2px; margin-top: -6px; }
.match-same { font-size: 15px; font-weight: 700; color: var(--foam); }
.match-err { color: var(--sand); font-size: 14px; font-weight: 700; }
.sheet-match .tuner-promise { justify-content: flex-start; padding-top: 0; }
.sheet-a4 .match-entry { margin-top: -2px; }

/* -- phones: his 3-across tiles, everything else a size that reads at arm's length -- */
@media (max-width: 560px) {
  .inst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .inst-tile { padding: 6px 6px 8px; border-radius: 14px; }
  .inst-art { height: 60px; border-radius: 10px; }
  .inst-art svg { width: 46px; height: 46px; }
  .inst-tile b { font-size: 13.5px; }
  .inst-tile small { font-size: 11px; }
  .inst-tile[aria-pressed=true]::after { top: 10px; right: 10px; width: 19px; height: 19px; background-size: 11px; }
  .sheet-read .tl-name { font-size: 32px; }
  .coral-ui .shape-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coral-ui .shape-opts .opt { padding: 0 6px; font-size: 13.5px; }
  .tune-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pill-steps { gap: 6px; }
  .pill-steps .chip { min-width: 48px; padding: 0 12px; }
  .pill-steps .bignum-sm { font-size: 36px; }
  .set-row { padding: 12px 14px; }
  .tuner .sheet .seg-full button { padding: 4px 4px; font-size: 13.5px; }
  .cb-row { padding: 10px 12px; }
}
/* a 360 px phone: the five shift steps on one row (−oct −1 [st] +1 +oct) */
@media (max-width: 400px) {
  /* the shapes two across, so "Double Drop D −2" and "B♭ F B♭ F B♭ D" each keep one line */
  .coral-ui .shape-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shift-steps { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 6px; }
  .pill-steps.shift-steps .chip { min-width: 44px; padding: 0 10px; }
  .shift-steps .bignum-sm { width: 3.2ch; }
  .sheet-search-hint { font-size: 12.5px; }
}
.sheet-search-hint { margin: -6px 0 0 18px; }
/* Windows high contrast: the one in use is outlined, not only tinted */
@media (forced-colors: active) {
  .inst-tile[aria-pressed=true], .rung.is-on, .coral-ui .opt[aria-checked=true], .sheet-a4 .tg-steps .chip.is-on { outline: 2px solid Highlight; outline-offset: 1px; }
  .cb-check input:checked { forced-color-adjust: none; }
}
/* ---------- end of section 4 (sheets & popovers) ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip.is-on, .seg button[aria-checked=true], .star.is-now, .star.is-done { outline: 2px solid Highlight; }
  .m-thumb, .d-needle path { forced-color-adjust: none; }
}
@media print {
  .sky, .grain, .site-header, .tool, .sheet, .toast, .sheet-backdrop { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- wide screens (the owner, 2026-10-09: "tiny on some monitors"). A monitor at 100 % Windows scaling gives
   a page 1900–3400 CSS px wide, and the layout, built in px for 1440, sat small in the middle. Above 1800 px the
   header, the page and the footer are zoomed as one (1.15 / 1.3 / 1.5). Not zoomed: the sky, the overlays outside
   <main>, the sheets inside it (zoomed back: they are fixed, sized by the viewport and placed by ui.js in px), and the
   tuner's focus mode and Play along's play mode, which already fill the screen by its own units. */
:root { --page-zoom: 1; }
@media (min-width: 1800px) { :root { --page-zoom: 1.15; } }
@media (min-width: 2200px) { :root { --page-zoom: 1.3; } }
@media (min-width: 2800px) { :root { --page-zoom: 1.5; } }
html:not(.tuner-focus):not(.pl-play-mode) :is(.site-header, #main, .site-footer) { zoom: var(--page-zoom); }
html:not(.tuner-focus):not(.pl-play-mode) #main .sheet { zoom: calc(1 / var(--page-zoom)); }