/* avril, the app (avril/SPEC.md section 6). Every class starts with "av-", every token "--av-", everything is scoped
   to .av-root. The host sets --av-w / --av-h on the mount (393 x 852; the 780 variant when --av-h < 816).
   Fonts are declared here (urls relative to this file): Newsreader italic (her lines, the wordmark), DM Mono (numbers,
   timers), Geist (UI). Her world: the gym at night. Ink ground, grain cards, film text, one mint accent.
   Rhythm: 24 px side margins, an 8 px grid, one title, one clip or one number, one action per screen.
   Motion: transform and opacity only (plus stroke-dashoffset on the rep ring). */

/* ------------------------------------------------------------------ fonts (latin and latin-ext) */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("media/fonts/geist-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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("media/fonts/geist-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: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/newsreader-italic-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: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/newsreader-italic-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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/dm-mono-latin-400-normal.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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/dm-mono-latin-ext-400-normal.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/dm-mono-latin-500-normal.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/dm-mono-latin-ext-500-normal.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;
}

/* ------------------------------------------------------------------ root */
.av-root {
  --av-ink: #0D0D0C; --av-grain: #1A1917; --av-raise: #22211E; --av-line: #2E2C28; --av-line2: #3A3833;
  --av-film: #F3EEE4; --av-film2: rgba(243, 238, 228, .86); --av-mute: #A9A397; --av-faint: #6F6B63;
  --av-veil: rgba(13, 13, 12, .70); --av-mint: #9BE8C8; --av-mint-press: #85D7B4; --av-mint-soft: rgba(155, 232, 200, .16);
  --av-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --av-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --av-sans: "Geist", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --av-ios: cubic-bezier(.32, .72, 0, 1); --av-out: cubic-bezier(.22, 1, .36, 1);
  --av-hl: 1px;
  /* the vertical rhythm (852; .av-short below for 780) */
  --av-top: 54px; --av-tab: 83px; --av-heroS: 336px; --av-heroC: 492px; --av-ring: 136px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--av-w, 393px); height: var(--av-h, 852px);
  background: var(--av-ink); color: var(--av-film);
  font: 400 15px/1.4 var(--av-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.av-root.av-short { --av-heroS: 292px; --av-heroC: 432px; --av-ring: 124px; }
@media (min-resolution: 2dppx) { .av-root { --av-hl: .5px; } }
.av-root :where(*), .av-root :where(*)::before, .av-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.av-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.av-root :where(h2, h3, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.av-root :where(img, video, svg) { display: block; max-width: none; }
.av-root :where(img) { -webkit-user-drag: none; }
.av-root :where(b, strong) { font-weight: inherit; }
.av-root :where(i, em) { font-style: normal; }
.av-story { pointer-events: none; }
.av-root :focus { outline: none; }
.av-root :focus-visible { outline: 2px solid var(--av-mint); outline-offset: 3px; border-radius: 14px; }
.av-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ glass, layers, chrome */
.av-glass { position: absolute; inset: 0; overflow: hidden; background: var(--av-ink); }
.av-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--av-ink); contain: layout style size; }
.av-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.av-layer.is-moving { box-shadow: -14px 0 40px -8px rgba(0, 0, 0, .7); }
.av-layer.av-warm:not(.is-on):not(.is-leaving) { opacity: .001 !important; visibility: visible; z-index: 0 !important; }
.av-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--av-film); }
.av-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--av-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.av-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.av-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(243, 238, 228, .9); z-index: 20; pointer-events: none; }
.av-full .av-status, .av-full .av-homeind { display: none; }
.av-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 8px 34px; background: var(--av-ink); box-shadow: inset 0 var(--av-hl) 0 var(--av-line); }
.av-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 12, 0), var(--av-ink)); }
.av-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 8px; color: var(--av-faint); font: 500 10.5px/1.2 var(--av-sans); letter-spacing: .01em; white-space: nowrap; }
.av-tab svg { width: 26px; height: 26px; }
.av-tab.is-on { color: var(--av-film); }
.av-tab.is-on svg { color: var(--av-mint); }
.av-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(243, 238, 228, .22); box-shadow: 0 0 0 1.5px rgba(243, 238, 228, .9), 0 6px 18px rgba(0, 0, 0, .45); }
.av-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(155, 232, 200, .8); }

/* ------------------------------------------------------------------ shared parts */
.av-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-vs { position: relative; display: block; overflow: hidden; background: var(--av-grain); }
.av-vs__p, .av-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.av-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.av-vs.is-playing .av-video { opacity: 1; }
.av-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--av-raise); }
.av-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243, 238, 228, .12); }
.av-draft { display: inline-flex; flex: none; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(169, 163, 151, .55); font: 600 9.5px/1 var(--av-sans); letter-spacing: .12em; color: var(--av-mute); vertical-align: middle; white-space: nowrap; }
.av-wm { display: inline-flex; align-items: baseline; font: italic 400 26px/1 var(--av-serif); letter-spacing: -.02em; color: var(--av-film); }
.av-wm__d { display: inline-block; flex: none; width: .2em; height: .2em; margin-left: .1em; border-radius: 50%; background: var(--av-mint); }
.av-h { font: 600 26px/1.05 var(--av-sans); letter-spacing: -.02em; color: var(--av-film); }
.av-cue { font: italic 400 17px/1.25 var(--av-serif); color: var(--av-film); }
.av-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--av-grain); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line2); font: 500 13px/1 var(--av-sans); color: var(--av-film); white-space: nowrap; }
.av-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 28px; background: var(--av-mint); color: var(--av-ink); font: 600 17px/1 var(--av-sans); letter-spacing: -.005em; transition: transform .16s var(--av-out), background-color .16s linear; }
.av-btn svg { width: 18px; height: 18px; flex: none; }
.av-live .av-btn:active, .av-btn.is-press { transform: scale(.97); background: var(--av-mint-press); }
.av-btn.is-done { background: var(--av-raise); color: var(--av-mint); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line2); }
.av-story .av-btn { transition: none; }
.av-x { position: absolute; left: 16px; top: 56px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(13, 13, 12, .55); color: var(--av-film); box-shadow: inset 0 0 0 var(--av-hl) rgba(243, 238, 228, .14); }
.av-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
.av-x svg { width: 20px; height: 20px; }
.av-live .av-x:active { transform: scale(.94); }

/* the tab screens: a header row (the wordmark, her face), then the screen */
.av-scr { position: absolute; left: 0; right: 0; top: var(--av-top); bottom: var(--av-tab); display: flex; flex-direction: column; padding: 0 24px 16px; }
.av-hd { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; }
.av-hd .av-av { --s: 34px; }
.av-ttl { flex: none; margin-top: 10px; }

/* the app icon: an ink squircle, "avril" in Newsreader italic, a mint dot (inside and outside the app) */
.av-icon { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--t, 64px); height: var(--t, 64px); border-radius: calc(var(--t, 64px) * .2237);
  background: radial-gradient(110% 90% at 50% 0%, #26241F 0%, #0D0D0C 70%); box-shadow: inset 0 0 0 max(.5px, calc(var(--t, 64px) * .01)) rgba(243, 238, 228, .14); }
.av-icon__w { display: inline-flex; align-items: baseline; font: italic 400 calc(var(--t, 64px) * .3)/1 "Newsreader", Georgia, serif; letter-spacing: -.02em; color: #F3EEE4; font-synthesis: none; }
.av-icon__w i { display: inline-block; width: .2em; height: .2em; margin-left: .08em; border-radius: 50%; background: #9BE8C8; }

/* ------------------------------------------------------------------ splash */
.av-sp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 40px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(243, 238, 228, .07), rgba(243, 238, 228, 0) 60%), var(--av-ink); }
.av-sp__face { position: relative; width: 112px; height: 112px; }
.av-sp__face .av-av { --s: 96px; position: absolute; left: 8px; top: 8px; }
.av-sp::after { content: ""; position: absolute; left: 50%; bottom: -120px; width: 420px; height: 260px; margin-left: -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(155, 232, 200, .10), rgba(155, 232, 200, 0)); pointer-events: none; }
.av-sp__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.av-sp__ring circle { fill: none; stroke: var(--av-mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.av-sp__wm { margin-top: 26px; }
.av-wm--xl { font-size: 44px; }
.av-sp__t { margin-top: 14px; color: var(--av-mute); }

/* ------------------------------------------------------------------ today */
.av-td__card { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; border-radius: 28px; overflow: hidden; background: var(--av-grain); }
.av-td__card .av-vs { position: absolute; inset: 0; }
.av-veil { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 12, 0), rgba(13, 13, 12, .55) 45%, rgba(13, 13, 12, .9)); }
.av-td__meta { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.av-td__d { display: flex; align-items: center; gap: 8px; font: 500 13px/1.25 var(--av-sans); color: var(--av-film2); }
.av-td__h { margin-top: 8px; }
.av-td__l { flex: none; margin-top: 16px; }
.av-td__x { flex: none; margin-top: 12px; font: 500 13px/1.25 var(--av-sans); color: var(--av-mute); }
.av-td__b { flex: none; margin-top: 20px; }

/* ------------------------------------------------------------------ sessions */
.av-grid { flex: 1 1 auto; min-height: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.av-tile { position: relative; display: block; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: var(--av-grain); transition: transform .16s var(--av-out); }
.av-tile .av-vs { position: absolute; inset: 0; }
.av-tile .av-veil { height: 50%; }
.av-tile__n { position: absolute; left: 14px; top: 13px; font: 400 12px/1 var(--av-mono); letter-spacing: .04em; color: var(--av-film2); }
.av-tile__t { position: absolute; left: 14px; right: 14px; bottom: 14px; font: 600 17px/1.15 var(--av-sans); letter-spacing: -.01em; color: var(--av-film); }
.av-live .av-tile:active { transform: scale(.97); }
.av-story .av-tile { transition: none; }

/* ------------------------------------------------------------------ session (the signature) */
.av-hero { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; background: var(--av-grain); }
.av-hero .av-vs { position: absolute; inset: 0; }
.av-hero .av-veil { height: 62%; background: linear-gradient(180deg, rgba(13, 13, 12, 0), rgba(13, 13, 12, .6) 50%, var(--av-ink)); }
.av-hero__top { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 12, .55), rgba(13, 13, 12, 0)); }
.av-hero__meta { position: absolute; left: 24px; right: 24px; bottom: 14px; }
.av-hero__sub { margin-top: 8px; font: 500 13px/1.25 var(--av-sans); color: var(--av-film2); }
.av-se__hero { height: var(--av-heroS); }
/* app/dips: the frame is cropped to her side of the rack (the left 29 % of the source never shows: a passer-by) */
.av-vs--dips .av-vs__p, .av-vs--dips .av-video { left: auto; right: 0; width: 140%; object-position: 50% 40%; }
.av-se__body { position: absolute; left: 24px; right: 24px; top: calc(var(--av-heroS) + 8px); bottom: 34px; display: flex; flex-direction: column; }
.av-set { position: relative; flex: none; perspective: 1100px; }
.av-set__in { position: relative; transform-style: preserve-3d; }
.av-set__f, .av-set__b { border-radius: 24px; background: var(--av-grain); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.av-set__f { position: relative; padding: 16px 16px 8px; }
.av-set__b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transform: rotateX(180deg); opacity: 0; }
.av-set__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px; }
.av-set__s { font: 600 15px/1.2 var(--av-sans); letter-spacing: -.005em; color: var(--av-film); }
.av-set__r { display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--av-sans); color: var(--av-mute); }
.av-set__r svg { width: 15px; height: 15px; }
.av-row { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; border-radius: 14px; }
.av-row + .av-row { margin-top: 4px; }
.av-row__i { width: 18px; font: 500 15px/1 var(--av-mono); color: var(--av-mute); }
.av-row__d { display: flex; gap: 8px; flex: 1; }
.av-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--av-line2); }
.av-dot > i { position: absolute; inset: 0; border-radius: 50%; background: var(--av-mute); }
.av-row__k { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--av-raise); color: var(--av-mute); }
.av-row.is-act .av-row__k { background: var(--av-mint); color: var(--av-ink); opacity: 0; }
.av-row.is-act { background: var(--av-raise); box-shadow: inset 0 0 0 var(--av-hl) rgba(155, 232, 200, .35); }
.av-row.is-act .av-row__i { color: var(--av-film); }
.av-row.is-act .av-dot { box-shadow: inset 0 0 0 1.5px rgba(155, 232, 200, .55); }
.av-row.is-act .av-dot > i { background: var(--av-mint); opacity: 1; transform: scale(0); }
.av-nine { display: flex; gap: 6px; }
.av-nine i { width: 8px; height: 8px; border-radius: 50%; background: var(--av-mint); opacity: 0; }
.av-nine i:nth-child(3n) { margin-right: 8px; }
.av-nine i:last-child { margin-right: 0; }
.av-stamp { padding: 10px 18px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--av-mint); transform-origin: 50% 50%;
  font: italic 400 34px/1 var(--av-serif); letter-spacing: -.01em; color: var(--av-mint); white-space: nowrap; }
.av-se__act { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-top: 8px; }
.av-rep { position: relative; flex: none; width: var(--av-ring); height: var(--av-ring); border-radius: 50%; }
.av-rep__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.av-rep__tr { fill: none; stroke: var(--av-line2); stroke-width: 7; stroke-linecap: round; }
.av-rep__a { fill: none; stroke: var(--av-mint); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.av-rep__in { position: absolute; inset: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--av-grain); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line); transition: transform .14s var(--av-out); }
.av-rep__c { font: 500 40px/1 var(--av-mono); letter-spacing: -.03em; color: var(--av-film); font-variant-numeric: tabular-nums; }
.av-rep.is-done .av-rep__c { color: var(--av-mint); }
.av-rep.is-done .av-rep__in { background: var(--av-mint-soft); box-shadow: none; }
.av-live .av-rep:active .av-rep__in { transform: scale(.95); }
.av-rep__halo { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--av-mint); opacity: 0; pointer-events: none; }
.av-live .av-rep.is-pulse .av-rep__halo { animation: av-pulse 1.8s var(--av-out) infinite; }
.av-osrm .av-rep.is-pulse .av-rep__halo, .av-rm .av-rep.is-pulse .av-rep__halo { animation: none; }
@keyframes av-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.2); opacity: 0; } }
.av-cnt { display: flex; align-items: baseline; gap: 8px; font: 400 13px/1.2 var(--av-sans); color: var(--av-mute); }
.av-roll { display: inline-flex; font: 500 17px/1 var(--av-mono); letter-spacing: -.01em; color: var(--av-film); font-variant-numeric: tabular-nums; }
.av-roll__w { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: top; }
.av-roll__c { display: block; }
.av-roll__s { display: block; height: 1.1em; line-height: 1.1em; }
/* the rolling digit is generated content (11 to 12), so the page's text never reads "112"; the sr text keeps the value */
.av-roll__c::before { content: "1\A 2"; display: block; white-space: pre; line-height: 1.1em; }
.av-cnt.is-up .av-roll { color: var(--av-mint); }

/* ------------------------------------------------------------------ combos */
.av-cb { flex: 1 1 auto; min-height: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr); gap: 12px; }
.av-cb .av-tile:first-child { grid-column: 1 / 3; }

/* ------------------------------------------------------------------ combo */
.av-co__hero { height: var(--av-heroC); }
.av-co__body { position: absolute; left: 24px; right: 24px; top: calc(var(--av-heroC) + 8px); bottom: 34px; display: flex; flex-direction: column; }
.av-list { flex: none; border-radius: 24px; background: var(--av-grain); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line); padding: 6px 16px; }
.av-ing { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 0; font: 500 16px/1.25 var(--av-sans); color: var(--av-film); }
.av-ing + .av-ing { box-shadow: inset 0 var(--av-hl) 0 var(--av-line); }
.av-ck { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--av-line2); }
.av-ck > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--av-mint); color: var(--av-ink); opacity: 0; transform: scale(.4); }
.av-ck svg { width: 14px; height: 14px; }
.av-ing.is-on .av-ing__t { color: var(--av-mute); }
.av-co__b { flex: none; margin-top: auto; }

/* ------------------------------------------------------------------ progress */
.av-pr__n { flex: none; margin-top: 18px; font: 500 88px/1 var(--av-mono); letter-spacing: -.05em; color: var(--av-film); font-variant-numeric: tabular-nums; }
.av-pr__l { flex: none; margin-top: 10px; font: 400 15px/1.4 var(--av-sans); color: var(--av-mute); }
.av-pr__card { flex: 1 1 auto; min-height: 0; margin-top: 28px; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 24px; background: var(--av-grain); box-shadow: inset 0 0 0 var(--av-hl) var(--av-line); }
.av-pr__r { flex: none; display: flex; align-items: center; gap: 8px; font: 500 13px/1.25 var(--av-sans); color: var(--av-film); }
.av-pr__r i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--av-mint); }
.av-bars { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 0 6px; box-shadow: inset 0 calc(var(--av-hl) * -1) 0 var(--av-line2); }
.av-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.av-bar__v { flex: none; margin-bottom: 8px; font: 400 13px/1 var(--av-mono); color: var(--av-mute); }
.av-bar__b { flex: none; width: 100%; max-width: 52px; border-radius: 10px 10px 3px 3px; background: var(--av-line2); transform-origin: 50% 100%; }
.av-bar.is-rec .av-bar__b { background: var(--av-mint); }
.av-bar.is-rec .av-bar__v { color: var(--av-mint); }

/* ------------------------------------------------------------------ reduced motion and desktop */
.av-rm .av-btn, .av-rm .av-tile, .av-rm .av-rep__in { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .av-desk.av-live .av-tab:hover { color: var(--av-film); }
}