/* Audio Audit faces, redesigned (v1.21). Inspired by how Apple draws sound and activity: a living colour field for the Orb, a segmented level control for the Stack, a mirrored
   voice-memo waveform for the Wave; near-black stage, vivid system colours, thin large numerals, sentence-case words, gentle springs. Original drawing, no Apple assets.
   Colour is never the only signal: the number, the word and the limit marks say the same thing. The stage keeps moving only by transform and opacity on plain gradients (no filters, no blend
   modes: both made the Timer's wallpapers stutter in Safari). Motion stays inside prefers-reduced-motion: no-preference; the level itself still updates when motion is off. Loads after motion.css. */
@property --zc { syntax: '<color>'; inherits: true; initial-value: #8E8E93; }
html body .nm-stage {
  --board: #0A0D10; --chalk: #F5F5F7; --z-idle: #8E8E93; --z-calm: #64D2FF; --z-good: #30D158; --z-warn: #FFD60A; --z-loud: #FF453A;
  --spring: cubic-bezier(.22, 1.18, .36, 1);
  background: var(--board); border: 0; border-radius: 14px; box-shadow: none; color: var(--chalk);
  font-family: -apple-system, "SF Pro Display", var(--font-display);
}
.nm-key [data-zone=calm], .nm-rep[data-zone=calm] { --c: #64D2FF; } .nm-key [data-zone=good], .nm-rep[data-zone=good] { --c: #30D158; }
.nm-key [data-zone=warn], .nm-rep[data-zone=warn] { --c: #FFD60A; } .nm-key [data-zone=loud], .nm-rep[data-zone=loud] { --c: #FF453A; }
.nm-face { inset: 0 0 clamp(56px, 19cqh, 170px); }

/* ---- Orb: a soft living field of colour with a calm sphere in it; the thin ring is the limit, the hairline is the recent peak ---- */
html body .nm-orb { width: min(66cqmin, 560px); }
html body .nm-orb::before { display: none; }
html body .nm-orb > i { border: 0; }
html body .nm-orb-glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--zc) 42%, transparent), color-mix(in srgb, var(--zc) 12%, transparent) 62%, transparent); opacity: 1; transform: scale(calc(.72 + var(--lv, 0) * .62)); transition: transform .28s var(--spring) !important; }
.nm-orb-swirl { position: absolute; inset: 6%; transform: scale(calc(.52 + var(--lv, 0) * .62)); transition: transform .24s var(--spring); }
.nm-orb-spin { position: absolute; inset: 0; }
.nm-orb-lobe { position: absolute; width: 66%; height: 66%; border-radius: 50%; }
.nm-orb-lobe.l1 { left: 0; top: 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--zc) 92%, #fff), color-mix(in srgb, var(--zc) 40%, transparent) 58%, transparent); }
.nm-orb-lobe.l2 { right: 0; top: 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--zc) 62%, #BF5AF2), color-mix(in srgb, var(--zc) 30%, #BF5AF2 22%) 55%, transparent); }
.nm-orb-lobe.l3 { left: 18%; bottom: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--zc) 62%, #0A84FF), color-mix(in srgb, var(--zc) 30%, #0A84FF 22%) 55%, transparent); }
html body .nm-orb-core { inset: 25%; border: 0; background: radial-gradient(circle at 36% 28%, rgb(255 255 255 / .85), rgb(255 255 255 / .14) 28%, transparent 46%), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--zc) 88%, #fff 12%), color-mix(in srgb, var(--zc) 62%, #000) 96%); transform: scale(calc(.62 + var(--lv, 0) * .78)); transition: transform .16s var(--spring) !important; }
html body .nm-orb-peak { inset: 6%; border: 1.5px solid rgb(245 245 247 / .55); opacity: 1; transform: scale(calc(.3 + var(--pk, 0) * .66)); transition: transform .45s cubic-bezier(.2, .7, .2, 1) !important; }
html body .nm-orb::after { inset: 6%; border: 2.5px solid rgb(245 245 247 / .82); border-radius: 50%; transform: scale(calc(.3 + var(--ceil, .35) * .66)); opacity: 1; }
.nm-stage[data-alarm=true] .nm-orb::after { border-color: var(--z-loud); }

/* ---- Stack: a column of capsules, each filling from the left as the level rises, like a segmented volume control ---- */
html body .nm-stack { width: min(34cqmin, 300px); height: min(66cqmin, 560px); gap: 1.05cqmin; }
html body .nm-block { position: relative; overflow: hidden; border: 0 !important; border-radius: 999px; background: rgb(245 245 247 / .08) !important; translate: none !important; transition: transform .22s var(--spring) !important; }
.nm-block::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); background: var(--bc, var(--z-calm)); transition: transform .16s cubic-bezier(.2, .7, .2, 1); }
.nm-block[data-z=calm] { --bc: var(--z-calm); } .nm-block[data-z=good] { --bc: var(--z-good); } .nm-block[data-z=warn] { --bc: var(--z-warn); } .nm-block[data-z=loud] { --bc: var(--z-loud); }
html body .nm-block.on { transform: scaleX(1.035); }
html body .nm-ceil { left: -9%; right: -9%; border-top: 2.5px solid rgb(245 245 247 / .82); border-radius: 2px; }
html body .nm-ceil::after { right: auto; left: calc(100% + 8px); bottom: -.85em; padding: 3px 9px; border-radius: 999px; background: rgb(245 245 247 / .14); font: 600 clamp(11px, 2.3cqmin, 16px)/1 -apple-system, "SF Pro Text", var(--font-display); letter-spacing: 0; content: "Limit"; }
.nm-stage[data-alarm=true] .nm-ceil { border-top-color: var(--z-loud); }

/* ---- Wave: a mirrored voice-memo waveform that scrolls in from the right and fades away at the left ---- */
html body .nm-wave { width: 90%; height: 62%; shape-rendering: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
html body .nm-wave .bar { stroke: none; }
.nm-wave .z-calm { fill: var(--z-calm); } .nm-wave .z-good { fill: var(--z-good); } .nm-wave .z-warn { fill: var(--z-warn); } .nm-wave .z-loud { fill: var(--z-loud); }
html body .nm-wave .now { stroke: none; fill: #F5F5F7; }
html body .nm-wave .base { stroke: rgb(245 245 247 / .22); stroke-width: 1.5; }
.nm-wave .nm-limit { stroke: rgb(245 245 247 / .7); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.nm-stage[data-alarm=true] .nm-wave .nm-limit { stroke: var(--z-loud); }

/* ---- Number and word ---- */
html body .nm-word { bottom: 5cqh; font: 600 clamp(24px, 7cqmin, 72px)/1.05 -apple-system, "SF Pro Display", var(--font-display); letter-spacing: -.015em; text-transform: none; color: var(--zc); }
html body .nm-num { top: 5cqh; right: 5cqw; font: 200 clamp(26px, 9cqmin, 92px)/1 -apple-system, "SF Pro Display", var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--chalk); }
html body .nm-stage[data-face=orb] .nm-num { top: calc((100cqh - clamp(56px, 19cqh, 170px)) / 2); font-size: clamp(32px, 15cqmin, 150px); text-shadow: 0 0 1px rgb(0 0 0 / .4); mix-blend-mode: normal; color: #fff; }
html body .nm-stage[data-status=demo]::before { top: 16px; left: 18px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgb(245 245 247 / .14); font: 600 13px/1 -apple-system, "SF Pro Text", var(--font-display); letter-spacing: 0; content: "Demo"; }

/* ---- Too loud: a thin red edge that breathes, never a shake ---- */
html body .nm-stage[data-alarm=true] { border: 0; box-shadow: inset 0 0 0 3px var(--z-loud); }

@media (prefers-reduced-motion: no-preference) {
  html body .nm-stage { transition: --zc .45s ease; }
  .nm-orb-spin { animation: nm-spin 16s linear infinite; }
  .nm-orb-lobe.l2 { animation: nm-lobe 7s ease-in-out infinite alternate; }
  .nm-orb-lobe.l3 { animation: nm-lobe 9s ease-in-out infinite alternate-reverse; }
  @keyframes nm-spin { to { transform: rotate(360deg); } }
  @keyframes nm-lobe { from { transform: scale(.9); } to { transform: scale(1.14); } }
  html body .nm-stage[data-zone=idle] .nm-orb-core { animation: nm-rest 4.6s ease-in-out infinite; }
  @keyframes nm-rest { 50% { scale: 1.06; } }
  html body .nm-stage[data-alarm=true] { animation: nm-edge 1.6s ease-in-out infinite; }
  @keyframes nm-edge { 50% { box-shadow: inset 0 0 0 6px var(--z-loud); } }
  html body .nm-stage[data-alarm=true][data-face=orb] .nm-orb-core { animation: nm-rest 1.6s ease-in-out infinite; }
}