/* Totemphonia v2 · TOTEMPHONIA: Nature Sounds. Kilian: instruments on paper. The app's own light-mode tiles, radio
   and arcs sit directly on the page, live (assets/js/app-page.js). App tokens from TOTEMPHONIA/App/DesignSystem.swift:
   ground #F0F0F0, ink #1A1A1A, stroke 2 (1.67 active), title band 87/175 of the tile, INT/VOL bars, Auvant 30/175. */

.app {
  --a-ground: #F0F0F0; --a-ink: #1A1A1A;
  --cols: repeat(12, minmax(0, 1fr));
  --hdr: 4.25rem;
  --a-h: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.app section { padding: 0 var(--gutter); }
.a-num { font-size: var(--t-ui); font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
.a-h { font-family: var(--f-voice); font-weight: 300; font-size: var(--a-h); line-height: 1.04; letter-spacing: -0.02em; margin: 1rem 0 1.4rem -0.04em; text-wrap: balance; }
.a-ch__text p:not(.a-num) { max-width: 42ch; line-height: 1.6; }
.a-aside { margin-top: 1.1rem; font-size: var(--t-ui); color: var(--muted); }
.a-store {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; font-weight: 500;
  padding: 0.35rem 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.6s var(--settle);
}
.a-store::after { content: '↗'; transition: translate 0.5s var(--settle); }
.a-store:focus-visible { background-size: 0% 1px; background-position: 100% 100%; }
@media (hover: hover) { .a-store:hover { background-size: 0% 1px; background-position: 100% 100%; } }
.a-store:focus-visible::after { translate: 0.18rem -0.18rem; }
@media (hover: hover) { .a-store:hover::after { translate: 0.18rem -0.18rem; } }

/* ---------- Screen 1 ---------- */
.a-hero {
  min-height: 100svh; display: grid; grid-template-columns: var(--cols); gap: 0 var(--gutter); align-items: center;
  padding-top: var(--hdr) !important; padding-bottom: clamp(1.5rem, 5svh, 3rem) !important;
}
.a-hero__text { grid-column: 1 / span 5; }
.a-title { line-height: 0.95; }
/* the app's own icon, as on the home screen: a dark tile with the iPhone's rounded corners */
.a-icon { display: block; width: clamp(3.5rem, 2.8rem + 1.4vw, 4.5rem); height: auto; aspect-ratio: 1; border-radius: 22.37%; margin: 0 0 clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.a-title__mark { display: block; font-family: 'OPTIAuvantGothic-DemiBold', var(--f-use); font-size: clamp(2.4rem, 0.8rem + 4.6vw, 5.4rem); letter-spacing: 0.005em; margin-left: -0.05em; }
.a-title__sub { display: block; margin-top: 0.4rem; font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.9rem, 0.8rem + 3vw, 3.9rem); letter-spacing: -0.02em; }
.a-lede { margin-top: 1.8rem; max-width: 36ch; font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem); line-height: 1.55; }
.a-hero__mixer { grid-column: 7 / -1; justify-self: end; width: min(100%, 36rem, calc((100svh - var(--hdr) - 7rem) * 1.0)); }

/* ---------- The app's tile, light mode ---------- */
.mixer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1vw, 0.85rem); }
.tile { position: relative; aspect-ratio: 1; background: var(--a-ground); overflow: hidden; container-type: inline-size; color: var(--a-ink); }
.tile canvas, .tile__lift { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile__lift { background: #fff; opacity: 0.72; transition: opacity 0.5s var(--settle); pointer-events: none; }
.tile::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--a-ink); pointer-events: none; transition: border-width 0.25s ease-in-out; }
.tile.is-on::after { border-width: 1.67px; }
.tile__title {
  position: absolute; left: 0; right: 0; top: 0; height: 49.71%; z-index: 1;
  display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 3.43cqi; white-space: pre-line; /* hangs from the top-left, as in the app */
  font-family: 'OPTIAuvantGothic-DemiBold', var(--f-use); font-size: 17.14cqi; line-height: 1; letter-spacing: 0; color: var(--a-ink);
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
.tile.is-on .tile__title { background: rgba(0, 0, 0, 0.75); color: var(--a-ground); }
.tile__bar {
  position: absolute; left: 0; right: 0; height: 25.145%; z-index: 1; cursor: ew-resize; touch-action: none;
  background: rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.25s ease-in-out, visibility 0.25s;
}
.tile__bar[data-param="int"] { top: 49.71%; }
.tile__bar[data-param="vol"] { top: 74.855%; }
.tile.is-on .tile__bar { opacity: 1; visibility: visible; }
.tile__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0.5) * 100%); background: rgba(255, 255, 255, 0.6); }
.tile__bar b { position: absolute; left: 5.14cqi; top: 50%; translate: 0 -50%; font: 400 5.71cqi/1 'OPTIAuvantGothic-DemiBold', var(--f-use); letter-spacing: 0.57cqi; color: var(--a-ink); opacity: 0.94; }
@media (hover: hover) { .tile:not(.is-on):hover .tile__lift { opacity: 0.6; } } /* the material comes forward: something to wake */
.tile__title:focus-visible { outline: 1.5px solid var(--ink); outline-offset: -5px; }
.tile__bar:focus-visible { outline: 1.5px solid var(--ink); outline-offset: -3px; }
.tile.is-loading .tile__title { animation: a-wait 1.1s ease-in-out infinite; }
@keyframes a-wait { 50% { opacity: 0.55; } }
.mixer__hint { margin-top: 1rem; font-size: var(--t-ui); color: var(--muted); }
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }

/* ---------- Claim ---------- */
.a-claim { display: grid; grid-template-columns: var(--cols); gap: 1.6rem var(--gutter); margin-top: clamp(6rem, 18svh, 11rem); }
.a-claim__h { grid-column: 1 / span 9; font-family: var(--f-voice); font-weight: 300; font-size: var(--t-statement); line-height: 1.02; letter-spacing: -0.025em; margin-left: -0.04em; text-wrap: balance; }
.a-claim__p { grid-column: 7 / span 5; max-width: 40ch; line-height: 1.6; }

/* ---------- Chapters ---------- */
.a-ch { display: grid; grid-template-columns: var(--cols); gap: 2.5rem var(--gutter); align-items: start; margin-top: clamp(7rem, 22svh, 13rem); }
.a-ch__text { grid-column: 1 / span 5; }
.a-ch > :not(.a-ch__text) { grid-column: 7 / -1; }
.a-ch--radio .a-ch__text { grid-column: 1 / span 4; }
.a-ch--radio > .radio { grid-column: 6 / -1; }
.a-ch--timer .a-ch__text { grid-column: 8 / -1; grid-row: 1; }
.a-ch--timer > .arc { grid-column: 1 / span 6; grid-row: 1; }
.a-ch--alarm .a-ch__text { grid-column: 1 / span 4; }
.a-ch--alarm > .arc { grid-column: 6 / -1; }
.a-ch--hear .a-ch__text { grid-column: 9 / -1; grid-row: 1; }
.a-ch--hear > .hear { grid-column: 1 / span 7; grid-row: 1; }


/* 01 · the mixer: heading left, the paragraph on the right, level with the heading */
.a-ch__body { max-width: 42ch; line-height: 1.6; margin-top: 2.55rem; }

/* shared play button (presets, radio, arcs): the site's vector icon + a word */
.a-play { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; padding: 0.4rem 0; }
.a-play::before {
  content: ''; width: 0.85rem; height: 0.85rem; background: currentColor; transition: scale 0.4s var(--settle);
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.a-play[aria-pressed="true"]::before { clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }
.a-play:focus-visible::before { scale: 1.2; }
@media (hover: hover) { .a-play:hover::before { scale: 1.2; } }

/* 02 · presets */
.presets { display: grid; }
.preset { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1.5rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.preset:last-child { border-bottom: 1px solid var(--line); }
.preset__name { font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem); letter-spacing: -0.01em; line-height: 1.15; }
.preset__sub { grid-column: 1; font-size: var(--t-ui); color: var(--muted); max-width: 46ch; }
.preset__mix { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: end; gap: 3px; height: 1.9rem; }
.preset__mix i { width: 5px; background: var(--ink); height: calc(var(--p) * 100%); min-height: 1px; opacity: 0.85; }
.preset__name button { text-align: left; display: inline-flex; align-items: baseline; gap: 0.6rem; }
.preset__name button::before { content: ''; flex: none; width: 0.6em; height: 0.6em; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); transition: scale 0.4s var(--settle); translate: 0 -0.05em; }
.preset__name button[aria-pressed="true"]::before { clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }
.preset__name button span { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size 0.6s var(--settle); }
.preset__name button:focus-visible span, .preset__name button[aria-pressed="true"] span { background-size: 100% 1px; }
@media (hover: hover) { .preset__name button:hover span { background-size: 100% 1px; } }
.preset__name button:focus-visible::before { scale: 1.2; }
@media (hover: hover) { .preset__name button:hover::before { scale: 1.2; } }

/* 03 · Nature Radio, on paper */
.radio__panel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-ground); color: var(--a-ink); container-type: inline-size; }
.radio__panel canvas, .radio__lift { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.radio__lift { background: #fff; opacity: 0.66; pointer-events: none; }
.radio__panel::after { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--a-ink) 22%, transparent); pointer-events: none; }
.radio__meta { position: absolute; left: 4.2cqi; top: 4.2cqi; display: grid; gap: 0.35rem; font: 700 clamp(0.62rem, 1.45cqi, 0.78rem)/1.3 var(--f-use); letter-spacing: 0.11em; text-transform: uppercase; }
.radio__elev { opacity: 0.7; }
.radio__clock { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.radio__sun { width: 0.9rem; height: 0.9rem; fill: currentColor; stroke: currentColor; }
.radio__rec { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; font-size: 0.85em; letter-spacing: 0.18em; opacity: 0.85; } /* a recording, not LIVE: a still, hollow mark */
.radio__rec::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; border: 1px solid currentColor; }
.radio__title { position: absolute; right: 4.2cqi; top: 3.6cqi; text-align: right; white-space: pre-line; font-family: 'OPTIAuvantGothic-DemiBold', var(--f-use); font-size: clamp(1.4rem, 6.2cqi, 3.2rem); line-height: 1.02; letter-spacing: 0.035em; }
.radio__places { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin-top: 1.1rem; } /* one play button per place (Kilian) */
.radio__places .a-play span { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size 0.6s var(--settle); }
.radio__places .a-play.is-shown span, .radio__places .a-play:focus-visible span { background-size: 100% 1px; }
@media (hover: hover) { .radio__places .a-play:hover span { background-size: 100% 1px; } } /* the place in the panel */
.radio__places .a-play.is-loading::before { animation: a-wait 1.1s ease-in-out infinite; }

/* 04/05 · arcs (TimerArcView on paper) */
.arc { position: relative; padding: clamp(1.1rem, 2.2vw, 1.8rem); color: var(--a-ink); }
.arc__bg { position: absolute; inset: 0; overflow: hidden; background: var(--a-ground); }
.arc__bg canvas { position: absolute; left: -56px; top: -56px; width: calc(100% + 112px); max-width: none; height: calc(100% + 112px); filter: blur(14px); } /* GaussianBlurView; overscan ≥ 3σ so the blur's own edge stays out of sight */
.arc__lift { position: absolute; inset: 0; background: #fff; opacity: 0.8; }
.arc > :not(.arc__bg) { position: relative; }
.arc__head { display: flex; align-items: baseline; gap: 1rem; }
.arc__name { font-family: 'OPTIAuvantGothic-DemiBold', var(--f-use); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); letter-spacing: 0.03em; text-transform: uppercase; }
.arc__wake { font-size: 0.6em; letter-spacing: 0.14em; margin-right: 0.4rem; opacity: 0.7; }
.arc__track { position: relative; margin-top: 1.4rem; cursor: ew-resize; touch-action: pan-y; } /* drag the playhead through time */
.arc__track:focus-visible { outline: 1.5px solid var(--a-ink); outline-offset: 6px; }
.arc__chart { display: block; width: 100%; height: clamp(11rem, 26vw, 15rem); overflow: visible; }
.arc__chart [data-head] { transition: stroke-width 0.25s var(--settle); }
.arc__track.is-drag [data-head], .arc__track:focus-visible [data-head] { stroke-width: 2.6; }
@media (hover: hover) { .arc__track:hover [data-head] { stroke-width: 2.6; } }
.arc__legend { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.35rem 1.6rem; margin-top: 0.9rem; font-size: 0.72rem; color: color-mix(in srgb, var(--a-ink) 70%, transparent); }
.arc__legend li { display: flex; align-items: center; gap: 0.5rem; }
.arc__legend svg { width: 1.6rem; height: 0.5rem; overflow: visible; }
.arc__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin-top: 1.4rem; font-size: var(--t-ui); color: color-mix(in srgb, var(--a-ink) 72%, transparent); }
.arc__cap .a-play { color: var(--a-ink); font-size: var(--t-body); }

/* ---------- the demo's end: a quiet note in the header's glass ---------- */
.demo-note {
  position: fixed; left: 50%; bottom: var(--gutter); z-index: var(--z-chrome); width: min(46rem, calc(100% - var(--gutter) * 2));
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.6rem; align-items: center;
  padding: 1.1rem 1.3rem 1.2rem; color: var(--ink);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(13px) saturate(0.7); backdrop-filter: blur(13px) saturate(0.7);
  border: 1px solid var(--line);
  translate: -50% 1.5rem; opacity: 0; transition: translate 0.6s var(--settle), opacity 0.4s;
}
.demo-note.is-in { translate: -50% 0; opacity: 1; }
.demo-note[hidden] { display: none; } /* else its grid display wins over [hidden] and it blocks clicks, invisibly */
.demo-note:not(.is-in) { pointer-events: none; }
.demo-note__h { grid-column: 1; font-family: var(--f-voice); font-size: 1.35rem; line-height: 1.2; }
.demo-note__p { grid-column: 1; font-size: var(--t-ui); color: var(--muted); max-width: 52ch; }
.demo-note .a-store { grid-column: 1; margin-top: 0.6rem; justify-self: start; }
.demo-note__wait { grid-column: 1; font-size: var(--t-ui); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-note__x { grid-column: 2; grid-row: 1; align-self: start; font-size: var(--t-ui); color: var(--muted); padding: 0.3rem 0; transition: color 0.3s; }
.demo-note__x:focus-visible { color: var(--ink); }
@media (hover: hover) { .demo-note__x:hover { color: var(--ink); } }

/* ---------- Good to know + end ---------- */
.a-know { margin-top: clamp(8rem, 24svh, 14rem); }
.a-know__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--gutter); margin-top: 1.6rem; }
.a-know__list li { padding-top: 1rem; border-top: 1px solid var(--line); line-height: 1.5; color: var(--muted); }
.a-know__list b { display: block; color: var(--ink); font-family: var(--f-voice); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.35rem; }
.a-end { display: grid; grid-template-columns: var(--cols); gap: 3.5rem var(--gutter); align-items: start; margin: clamp(8rem, 24svh, 14rem) 0 clamp(4rem, 12svh, 8rem); }
.a-end__text { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 2rem); } /* the statement stays while the sessions scroll by (CSS only) */
.a-end__demo { grid-column: 7 / -1; }
.a-end__h3 { font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0.8rem 0 1rem -0.03em; text-wrap: balance; }
.a-end__p { max-width: 46ch; line-height: 1.6; margin-bottom: 2rem; }
.a-end__h { font-family: var(--f-voice); font-weight: 300; font-size: var(--t-statement); line-height: 1.02; letter-spacing: -0.025em; margin-left: -0.04em; max-width: 14ch; }
.a-store--big { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin-top: 2.4rem; }

/* Listening sessions: the YouTube player loads on play; the still waits in grey, as the page's instruments do */
.ls { display: grid; gap: 0; }
.ls__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--a-ink) 85%, var(--a-ground)); }
.ls__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter 0.9s var(--settle), scale 1.4s var(--settle); }
.ls__stage:has(.ls__play:focus-visible) img { filter: none; scale: 1.02; }
@media (hover: hover) { .ls__stage:hover img { filter: none; scale: 1.02; } }
.ls__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ls__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; cursor: pointer; }
.ls__play[hidden] { display: none; } /* once the player is there, it takes the clicks (its grid display would beat [hidden]) */
.ls__play:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
.ls__icon { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: color-mix(in srgb, #121212 82%, transparent); display: grid; place-items: center; transition: scale 0.5s var(--settle); }
.ls__icon::after { content: ''; width: 1.15rem; height: 1.3rem; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 0.25rem; }
.ls__play:focus-visible .ls__icon { scale: 1.1; }
@media (hover: hover) { .ls__play:hover .ls__icon { scale: 1.1; } }
.ls__stage.is-live { background: #000; }
.ls__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.9rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.ls__now-t { font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); letter-spacing: -0.01em; }
.ls__now-k { font-size: var(--t-ui); color: var(--muted); }
.ls__all { margin-left: auto; font-size: var(--t-ui); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 0.3s; }
.ls__all::after { content: ' ↗'; }
.ls__all:focus-visible { text-decoration-color: transparent; }
@media (hover: hover) { .ls__all:hover { text-decoration-color: transparent; } }
.ls__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gutter); }
.ls__item { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; text-align: left; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.ls__item::before { content: ''; grid-row: 1 / span 2; width: 0.6em; height: 0.6em; margin-top: 0.45em; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); transition: scale 0.4s var(--settle); } /* the presets' play glyph */
.ls__item[aria-pressed="true"]::before { clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }
.ls__title { font-family: var(--f-voice); font-weight: 300; font-size: 1.2rem; line-height: 1.2; justify-self: start; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size 0.6s var(--settle); }
.ls__item:focus-visible .ls__title, .ls__item.is-shown .ls__title { background-size: 100% 1px; }
@media (hover: hover) { .ls__item:hover .ls__title { background-size: 100% 1px; } }
.ls__item:focus-visible::before { scale: 1.2; }
@media (hover: hover) { .ls__item:hover::before { scale: 1.2; } }
.ls__kind { font-size: 0.75rem; color: var(--muted); }

/* 06 · Hören: the app's Noise Sensitivity row (SettingsOverlayView), on paper, and the filter drawn as it runs */
.hear { --hi: 10px; padding: clamp(1.1rem, 2.2vw, 1.8rem); background: color-mix(in srgb, #fff 72%, var(--a-ground)); color: var(--a-ink); border: 1px solid color-mix(in srgb, var(--a-ink) 12%, transparent); }
.hear__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hear__label { font: 700 0.78rem/1.3 var(--f-use); letter-spacing: 0.12em; }
.hear__sub { margin-top: 0.3rem; font-size: 0.74rem; color: color-mix(in srgb, var(--a-ink) 66%, transparent); }
.hear__value { font: 500 1rem var(--f-use); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.hear__fader { position: relative; height: 3.6rem; margin-top: 1.3rem; cursor: pointer; touch-action: pan-y; overflow: clip; --step: 0; } /* touch anywhere, it snaps */
.hear__fader:focus-visible { outline: 1.5px solid var(--a-ink); outline-offset: 4px; }
.hear__rule { position: absolute; left: var(--hi); right: var(--hi); top: 1.2rem; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--a-ink) 16%, transparent); }
.hear__tick { position: absolute; top: 1.2rem; left: calc(var(--hi) + (100% - 2 * var(--hi)) * var(--i) / 4); width: 2px; height: 16px; margin: -8px 0 0 -1px; background: color-mix(in srgb, var(--a-ink) 32%, transparent); }
.hear__glide { position: absolute; left: var(--hi); right: var(--hi); top: 1.2rem; height: 0; translate: calc(var(--step) * 25%) 0; transition: translate 0.15s ease-out; }
.hear__handle { position: absolute; left: -7px; top: -16px; width: 14px; height: 32px; background: var(--a-ink); box-shadow: inset 0 0 0 1.5px var(--a-ground); transition: scale 0.3s var(--settle); }
.hear__fader:active .hear__handle { scale: 1.12; }
@media (hover: hover) { .hear__fader:hover .hear__handle { scale: 1.12; } }
.hear__num { position: absolute; top: 2.35rem; left: calc(var(--hi) + (100% - 2 * var(--hi)) * var(--i) / 4); translate: -50% 0; font-size: 0.72rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--a-ink) 62%, transparent); transition: color 0.2s; }
.hear__num--a { translate: -30% 0; } .hear__num--z { translate: -70% 0; } /* the outer labels stay inside */
.hear__num.is-on { color: var(--a-ink); font-weight: 600; }
.hear__chart { display: block; width: 100%; height: clamp(10rem, 22vw, 13.5rem); margin-top: 1.2rem; overflow: visible; }
.hear__chart text { font: 400 10px var(--f-data); fill: color-mix(in srgb, var(--a-ink) 66%, transparent); }
.hear__resp { fill: none; stroke: var(--a-ink); stroke-width: 1.6; stroke-linejoin: round; }
.hear__post { fill: color-mix(in srgb, var(--a-ink) 14%, transparent); stroke: none; }
.hear__pre { fill: none; stroke: color-mix(in srgb, var(--a-ink) 55%, transparent); stroke-width: 1; stroke-dasharray: 1.5 3; }
.hear__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin-top: 0.9rem; font-size: 0.72rem; color: color-mix(in srgb, var(--a-ink) 70%, transparent); }
.hear__legend li { display: flex; align-items: center; gap: 0.5rem; }
.hear__key { width: 1.6rem; height: 0.55rem; }
.hear__key--resp { border-top: 1.6px solid var(--a-ink); height: 0; }
.hear__key--post { background: color-mix(in srgb, var(--a-ink) 14%, transparent); }
.hear__key--pre { border-top: 1px dotted color-mix(in srgb, var(--a-ink) 70%, transparent); height: 0; }
.hear__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin-top: 1.4rem; font-size: var(--t-ui); color: color-mix(in srgb, var(--a-ink) 72%, transparent); }
.hear__cap .a-play { color: var(--a-ink); font-size: var(--t-body); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 1000px) {
  .a-hero { align-content: center; gap: 2.5rem var(--gutter); }
  .a-hero__text, .a-hero__mixer { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .a-hero__mixer { max-width: 34rem; }
  .a-ch__text, .a-ch > :not(.a-ch__text), .a-ch--radio .a-ch__text, .a-ch--radio > .radio,
  .a-ch--timer .a-ch__text, .a-ch--timer > .arc, .a-ch--alarm .a-ch__text, .a-ch--alarm > .arc,
  .a-ch--hear .a-ch__text, .a-ch--hear > .hear { grid-column: 1 / -1; grid-row: auto; }
  .a-claim__h { grid-column: 1 / -1; }
  .a-claim__p { grid-column: 1 / -1; }
  .a-ch__body { margin-top: 0; }
  .a-know__list { grid-template-columns: 1fr 1fr; }
  .a-end__text, .a-end__demo { grid-column: 1 / -1; position: static; }
}
@media (max-width: 640px) {
  .radio__panel { aspect-ratio: 4 / 5; }
  .radio__places { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; }
  .ls__list { grid-template-columns: 1fr; }
  .ls__all { margin-left: 0; flex-basis: 100%; }
  .arc__legend { grid-template-columns: repeat(2, auto); }
  .a-know__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.is-loading .tile__title { animation: none; }
}