/* Bruit blanc, rose, brun */
.nz { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 18px); text-align: center; width: 100%; }
.nz-status { min-height: 1.4em; font-weight: 700; }
/* Le visuel : une rangée de barres (la couleur du bruit), le nom en grand, le temps qui reste. Sa taille ne change jamais. */
.nz-show { --w: calc(min(560px, 86vw) * var(--cs, 1)); display: flex; flex-direction: column; align-items: center; width: var(--w); }
.nz-bars { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; height: calc(var(--w) * .3); }
.nz-bars i { display: block; width: 2.3%; height: 100%; border-radius: 99px; background: var(--white); transform-origin: 50% 100%; transform: scaleY(.5); transition: transform .5s var(--ease); }
.nz[data-state="run"] .nz-bars i { transition: transform .12s linear; }
.nz-name { margin: calc(var(--w) * .045) 0 0; font-family: var(--f-display); font-size: calc(var(--w) * .135); line-height: 1; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.nz-left { margin: calc(var(--w) * .02) 0 0; font-family: var(--f-display); font-size: calc(var(--w) * .085); line-height: 1; font-variant-numeric: tabular-nums; opacity: .72; }
.nz-sentence { text-wrap: balance; }
.nz-bar .chip-btn { padding: 0 18px; }
.nz-actions .btn-wide { min-width: 220px; white-space: nowrap; }
@media (min-width: 721px) {
  .nz-sentence { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; }
  .nz-show { --w: calc(min(560px, 86vw, 62vh) * var(--cs, 1)); }
}
@media (max-width: 720px) {
  .nz-show { --w: calc(min(88vw, 400px, calc((100svh - 400px) * 1.9)) * var(--cs, 1)); }
  .nz-sentence { font-size: 19px; line-height: 1.5; }
  .nz-actions .btn-wide { flex: 1 1 0; }
}
@supports not (height: 1svh) { @media (max-width: 720px) { .nz-show { --w: calc(min(88vw, 400px, calc((100vh - 400px) * 1.9)) * var(--cs, 1)); } } }
@media (max-width: 520px) { .nz-bar .chip-btn { padding: 0 14px; } }
@media (max-width: 380px) { .nz-sentence { font-size: 18px; } }
/* Plein écran : la phrase des réglages laisse la place au visuel. En écoute, au repos, le visuel s'assombrit
   lentement sur place pour ne pas éclairer la chambre (il ne bouge pas, il ne change pas de taille). */
.hero.is-fs .nz-sentence { display: none; }
.hero--noise.is-fs .nz-show { transition: opacity 4s ease; }
.hero--noise.is-fs.fs-idle.is-running .nz-show { opacity: .22; }
.hero--noise.is-fs .nz-show.zoomable > * { zoom: 1; }
/* Roues de la phrase : seule la valeur se voit au repos (comme le Pomodoro) */
.nz-sentence .iw { margin-block: -.62em; }
.nz-sentence .iw:not(:active):not(:focus-visible) .w-item:not(.is-center) { visibility: hidden; }
/* Le nom en grand reste sur une ligne ; client.js réduit la taille d'un nom trop long. */
.nz-name { width: 100%; overflow: hidden; line-height: 1.2; margin-top: calc(var(--w) * .02) !important; margin-bottom: calc(var(--w) * -.02); }
.nz-name span { display: inline-block; }
.nz-pick[hidden] { display: none; }