/* Medcue Glass: Try a question (/demo). Clinical samples, Viva station, Arena preview, Recall card. */
@layer glass.page {

/* ── Hero, sections ─────────────────────────────────────────────── */
:where(.mc-glass) .pa-hero { padding: 84px 0 92px; text-align: center; }
:where(.mc-glass) .pa-hero h1 { max-width: 16ch; margin: 0 auto; text-wrap: balance; }
:where(.mc-glass) .pa-hero .g-m-lede { max-width: 42ch; margin: 20px auto 0; }
:where(.mc-glass) .pa-hero-sm { padding: 64px 0 40px; }
:where(.mc-glass) .pa-hero-sm h1 { max-width: none; }
:where(.mc-glass) .pa-hero-sm .g-m-lede { max-width: 46ch; }
:where(.mc-glass) .pa-try { padding: 0 0 96px; }
:where(.mc-glass) .pa-after { text-align: center; padding: 96px 0; }
:where(.mc-glass) .pa-after .g-m-lede { max-width: 42ch; margin: 14px auto 0; }
:where(.mc-glass) .h-ctas { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
:where(.mc-glass) .mc-demo [id$="-demo"] { scroll-margin-top: 64px; }

:where(.mc-glass) .tv-section { --card: var(--g-bg); }
:where(.mc-glass) .tv-section.alt { --card: var(--g-bg-plain); }
:where(.mc-glass) .tv-head { max-width: 680px; margin-bottom: 36px; }
:where(.mc-glass) .tv-head .g-m-lede { margin-top: 14px; }
:where(.mc-glass) .tv-fallback { color: var(--g-ink-2); }
:where(.mc-glass) .tv-foot { margin-top: 22px; color: var(--g-ink-2); max-width: 70ch; }
:where(.mc-glass) .tv-foot .g-mlink { display: block; margin-top: 6px; font-size: inherit; }
:where(.mc-glass) .tv-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; max-width: 760px; margin: 0 0 32px; }
:where(.mc-glass) .tv-modes > div { padding: 14px 0; border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .tv-modes dt { font: 600 17px/1.3 var(--g-font); color: var(--g-ink); }
:where(.mc-glass) .tv-modes dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--g-ink-2); }

/* ── Question gallery ───────────────────────────────────────────── */
:where(.mc-glass) .tq-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 14px; max-width: 760px; }
:where(.mc-glass) .tq-switch .g-btn { --h: 36px; position: relative; color: var(--g-label); }
:where(.mc-glass) .tq-switch .g-btn[aria-pressed="true"] { background: var(--g-tint); color: var(--g-tint-on); }
:where(.mc-glass) .tq-done { display: none; }
:where(.mc-glass) .tq-switch .is-answered .tq-done { display: block; }
:where(.mc-glass) .tq-status { text-align: center; margin: 0 0 28px; min-height: 1.4em; }

:where(.mc-glass) .tq-body { display: grid; grid-template-columns: minmax(0, 1fr); }
:where(.mc-glass) .tq-fig { margin: 0; min-width: 0; }
:where(.mc-glass) .tq-stage { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 1.6); max-height: 64dvh; border-radius: var(--g-r-card); background: var(--g-stage); overflow: hidden; cursor: zoom-in; text-decoration: none !important; }
:where(.mc-glass) .tq-stage img { width: 100%; height: 100%; object-fit: contain; }
:where(.mc-glass) .tq-fig[aria-busy="true"] .tq-stage img { opacity: .55; }
:where(.mc-glass) .tq-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; height: 34px; padding: 0 13px; border-radius: var(--g-r-capsule); color: #1D1D1F; background: rgb(250 250 252 / .84); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 0 0 .5px rgb(0 0 0 / .08), 0 4px 14px -4px rgb(0 0 0 / .3); font: 600 13px/1 var(--g-font); letter-spacing: -.01em; }
:where(.mc-glass) .tq-cap { display: flex; justify-content: space-between; gap: 12px; margin: 10px 4px 0; font-size: 13px; line-height: 1.38; color: var(--g-ink-2); }
:where(.mc-glass) .tq-cap span:last-child { text-align: right; }
:where(.mc-glass) .tq-cap a, :where(.mc-glass) .tq-source a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
:where(.mc-glass) .tq-img-error { margin: 12px 4px 0; padding: 12px 14px; border-radius: var(--g-r-cell); background: var(--g-wrong-soft); color: var(--g-wrong); font-size: 15px; line-height: 1.4; }
:where(.mc-glass) .tq-img-error .g-btn { margin-top: 8px; display: flex; }

:where(.mc-glass) .tq-col { min-width: 0; max-width: 700px; width: 100%; margin: 36px auto 0; }
:where(.mc-glass) .tq[data-layout="wide"] .tq-fig { max-width: 880px; margin: 0 auto; width: 100%; }
:where(.mc-glass) .tq-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
:where(.mc-glass) .tq-mono { font-family: var(--g-mono); }
:where(.mc-glass) .tq-title { font: 600 21px/1.19 var(--g-font-display); letter-spacing: .011em; margin: 0 0 10px; color: var(--g-ink); }
:where(.mc-glass) .tq-title:focus { outline: none; }
:where(.mc-glass) .tq-stem { font: 400 calc(17px * var(--g-scale))/1.58 var(--g-font); letter-spacing: -.012em; margin: 0 0 20px; max-width: 66ch; color: var(--g-label); }
:where(.mc-glass) .tq-answers { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.mc-glass) .tq-lead { display: block; width: 100%; padding: 0; font: 600 calc(19px * var(--g-scale))/1.38 var(--g-font-display); letter-spacing: -.018em; margin: 0 0 16px; color: var(--g-label); }
:where(.mc-glass) .tq-opts { background: var(--g-bg); border-radius: var(--g-r-cell); overflow: hidden; }
:where(.mc-glass) .tq-opt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: start; width: 100%; padding: 14px 16px; background: transparent; color: var(--g-label); text-align: left; cursor: pointer; font: 400 calc(var(--g-t-body) * var(--g-scale))/1.41 var(--g-font); letter-spacing: -.02em; transition: background-color var(--g-d-fast) linear; }
:where(.mc-glass) .tq-opt + .tq-opt::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: .5px; background: var(--g-sep); }
:where(.mc-glass) .tq-opt:hover { background: var(--g-fill-4); }
:where(.mc-glass) .tq-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: -3px; }
:where(.mc-glass) .tq-opt .L { width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--g-font-rounded); color: var(--g-label-2); box-shadow: inset 0 0 0 1.5px var(--g-fill); transition: background-color var(--g-d-fast) linear, color var(--g-d-fast) linear, box-shadow var(--g-d-fast) linear; }
:where(.mc-glass) .tq-opt .tag { display: none; align-items: center; gap: 4px; font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); white-space: nowrap; margin-top: 3px; }
:where(.mc-glass) .tq-opt:has(input:checked) { background: var(--g-tint-soft); }
:where(.mc-glass) .tq-opt:has(input:checked) .L { background: var(--g-tint); color: var(--g-tint-on); box-shadow: none; }
:where(.mc-glass) .tq-opt.is-eliminated .txt { text-decoration: line-through; text-decoration-color: var(--g-label-2); color: var(--g-label-3); }
:where(.mc-glass) .tq-opt.is-eliminated .L { color: var(--g-label-3); }
:where(.mc-glass) [data-state="answered"] .tq-opt { cursor: default; }
:where(.mc-glass) [data-state="answered"] .tq-opt:hover { background: transparent; }
:where(.mc-glass) .tq-opt[data-outcome="other"] { color: var(--g-label-2); background: transparent; }
:where(.mc-glass) .tq-opt[data-outcome="other"] .L { background: transparent; color: var(--g-label-2); box-shadow: inset 0 0 0 1.5px var(--g-fill); }
:where(.mc-glass) .tq-opt[data-outcome="correct"] { background: var(--g-correct-soft); color: var(--g-label); }
:where(.mc-glass) .tq-opt[data-outcome="correct"] .L { background: var(--g-green); color: #fff; box-shadow: none; }
:where(.mc-glass) .tq-opt[data-outcome="correct"] .tag { display: inline-flex; color: var(--g-correct); }
:where(.mc-glass) .tq-opt[data-outcome="wrong"] { background: var(--g-wrong-soft); color: var(--g-label); }
:where(.mc-glass) .tq-opt[data-outcome="wrong"] .L { background: var(--g-red); color: #fff; box-shadow: none; }
:where(.mc-glass) .tq-opt[data-outcome="wrong"] .tag { display: inline-flex; color: var(--g-wrong); }
:where(.mc-glass) .tq-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; align-items: center; }
:where(.mc-glass) .tq-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
:where(.mc-glass) .tq-actions .g-btn-filled { min-width: 200px; }

:where(.mc-glass) .tq-expl { margin-top: 28px; }
:where(.mc-glass) .tq-expl:focus { outline: none; }
:where(.mc-glass) .tq-expl .x-verdict { display: flex; align-items: center; gap: 10px; font: 700 calc(var(--g-t-title2) * var(--g-scale))/1.2 var(--g-font-display); letter-spacing: -.018em; }
:where(.mc-glass) .tq-expl .x-verdict[data-ok="true"] { color: var(--g-correct); }
:where(.mc-glass) .tq-expl .x-verdict[data-ok="false"] { color: var(--g-wrong); }
:where(.mc-glass) .tq-expl .x-verdict .g-ic { width: 28px; height: 28px; stroke-width: 2.1; }
:where(.mc-glass) .tq-expl .x-answer { margin: 6px 0 0; font-size: calc(var(--g-t-subhead) * var(--g-scale)); color: var(--g-label-2); }
:where(.mc-glass) .tq-expl .x-answer b { color: var(--g-label); font-weight: 600; }
:where(.mc-glass) .x-block { padding: 18px 0; border-top: .5px solid var(--g-sep); margin-top: 18px; }
:where(.mc-glass) .x-block > h4 { font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); color: var(--g-label-2); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px; }
:where(.mc-glass) .x-why { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.55; margin: 0; max-width: 68ch; color: var(--g-label); }
:where(.mc-glass) .x-others details { border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .x-others details:first-child { border-top: 0; }
:where(.mc-glass) .x-others summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 10px; align-items: start; padding: 11px 0; font-size: calc(var(--g-t-callout) * var(--g-scale)); }
:where(.mc-glass) .x-others summary::-webkit-details-marker { display: none; }
:where(.mc-glass) .x-others summary .L { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--g-fill-3); font: 600 12px/1 var(--g-font-rounded); color: var(--g-label-2); }
:where(.mc-glass) .x-others summary .g-chev { margin-top: 4px; transition: rotate var(--g-d-fast) var(--g-ease); }
:where(.mc-glass) .x-others details[open] summary .g-chev { rotate: 90deg; }
:where(.mc-glass) .x-others details p { margin: 0 0 12px 36px; color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.5; }
:where(.mc-glass) .tq-ref { margin: 4px 0 0; font-size: 15px; }
:where(.mc-glass) .tq-source { margin-top: 28px; padding-top: 18px; border-top: .5px solid var(--g-sep); font-size: 13px; line-height: 1.45; color: var(--g-ink-2); }
:where(.mc-glass) .tq-source details { margin-top: 8px; }
:where(.mc-glass) .tq-source summary { cursor: pointer; color: var(--g-ink); font-weight: 500; }
:where(.mc-glass) .tq-source details p { margin-top: 8px; }
:where(.mc-glass) .tq-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 700px; margin: 48px auto 0; }
:where(.mc-glass) .tq-pager .g-btn { color: var(--g-label); }
:where(.mc-glass) .tq-gallery:has(.tq-switch[hidden]) [data-case-panel] + [data-case-panel] { margin-top: 72px; padding-top: 72px; border-top: .5px solid var(--g-sep); }

@media (prefers-reduced-motion: no-preference) {
  :where(.mc-glass) .tq.is-resolved .tq-expl { animation: tq-rise 320ms var(--g-ease) both; }
  @keyframes tq-rise { from { opacity: 0; translate: 0 8px; } }
  :where(.mc-glass) .tq-opt[data-outcome] .L { animation: tq-pop 380ms var(--g-spring-bouncy); }
  @keyframes tq-pop { from { scale: .6; } }
}

@media (min-width: 1024px) {
  :where(.mc-glass) .tq[data-layout="tall"] .tq-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
  :where(.mc-glass) .tq[data-layout="tall"] .tq-fig { position: sticky; top: 72px; }
  :where(.mc-glass) .tq[data-layout="tall"] .tq-stage { max-height: calc(100dvh - 160px); }
  :where(.mc-glass) .tq[data-layout="tall"] .tq-col { margin-top: 0; max-width: none; }
}

/* ── Figure inspector (shared clinical-figure.js dialog) ───────── */
:where(.mc-glass) dialog.clinical-figure { width: min(1600px, calc(100vw - 40px)); height: calc(100dvh - 40px); max-width: none; max-height: none; margin: auto; border: 0; border-radius: var(--g-r-window); padding: 0; overflow: hidden; color: var(--g-label); background: var(--g-bg-elevated); box-shadow: var(--g-pop-shadow); font: 400 15px/1.4 var(--g-font); }
:where(.mc-glass) dialog.clinical-figure[open] { display: flex; flex-direction: column; }
dialog.clinical-figure::backdrop { background: rgb(0 0 0 / .62); }
:where(.mc-glass) .clinical-figure__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: .5px solid var(--g-sep); }
:where(.mc-glass) .clinical-figure__toolbar h2 { margin: 0 auto 0 0; font: 600 17px/1.3 var(--g-font-display); letter-spacing: -.01em; }
:where(.mc-glass) .clinical-figure__controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:where(.mc-glass) .clinical-figure__zoom { display: flex; align-items: center; gap: 4px; }
:where(.mc-glass) .clinical-figure__zoom output { min-width: 4ch; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--g-label-2); }
:where(.mc-glass) .clinical-figure__controls :is(button, a) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 0; border-radius: var(--g-r-capsule); padding: 0 16px; color: var(--g-tint); background: var(--g-fill-3); font: 600 15px/1 var(--g-font); letter-spacing: -.01em; text-decoration: none; cursor: pointer; }
:where(.mc-glass) .clinical-figure__controls :is(button, a):hover { background: var(--g-fill-2); }
:where(.mc-glass) .clinical-figure__controls :is(button, a):disabled { opacity: .4; cursor: default; }
:where(.mc-glass) .clinical-figure__controls [aria-pressed="true"] { background: var(--g-tint-soft); }
:where(.mc-glass) .clinical-figure__controls .clinical-figure__close { color: var(--g-tint-on); background: var(--g-tint); }
:where(.mc-glass) .clinical-figure__stage { display: block; flex: 1; min-height: 0; padding: 12px; overflow: auto; background: var(--g-stage); }
:where(.mc-glass) .clinical-figure__stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
:where(.mc-glass) dialog.clinical-figure.is-actual-size img { width: var(--figure-width, auto); height: auto; max-width: none; max-height: none; margin: 0 auto; }
:where(.mc-glass) .clinical-figure__status { flex: none; margin: 0; padding: 8px 16px; color: var(--g-label-2); font-size: 13px; line-height: 1.4; }
@media (max-width: 640px) {
  :where(.mc-glass) dialog.clinical-figure { width: 100%; height: 100dvh; border-radius: 0; }
  :where(.mc-glass) .clinical-figure__toolbar h2 { width: 100%; }
  :where(.mc-glass) .clinical-figure__controls { width: 100%; }
  :where(.mc-glass) .clinical-figure__controls :is(button, a) { flex: 1; padding-inline: 8px; font-size: 14px; }
  :where(.mc-glass) .clinical-figure__stage { padding: 6px; }
  :where(.mc-glass) .clinical-figure__status { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ── Viva station ───────────────────────────────────────────────── */
:where(.mc-glass) .viva-demo { overflow: hidden; border-radius: var(--g-r-card); background: var(--card, var(--g-bg)); color: var(--g-label); --viva-inset: clamp(18px, 3vw, 32px); font-size: 17px; line-height: 1.5; }
:where(.mc-glass) .viva-demo [hidden] { display: none; }
:where(.mc-glass) .viva-demo__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px var(--viva-inset) 18px; }
:where(.mc-glass) .viva-demo__mode, :where(.mc-glass) .viva-demo__part-label { margin: 0 0 4px; color: var(--g-ink-2); font-size: 13px; line-height: 1.3; }
:where(.mc-glass) .viva-demo__title { margin: 0; font: 600 24px/1.2 var(--g-font-display); letter-spacing: -.012em; text-wrap: balance; }
:where(.mc-glass) .viva-demo__timing { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; flex: none; }
:where(.mc-glass) .viva-demo__clock { grid-column: 1; font: 600 30px/1.1 var(--g-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:where(.mc-glass) .viva-demo__target { grid-column: 1; grid-row: 2; font-size: 12px; line-height: 1.3; color: var(--g-ink-2); max-width: 18ch; }
:where(.mc-glass) .viva-demo__timing > button { grid-column: 2; grid-row: 1 / 3; }
:where(.mc-glass) .viva-demo__timing.is-overtime .viva-demo__clock { color: var(--g-warn); }
:where(.mc-glass) .viva-demo__rail { padding: 0 var(--viva-inset) 4px; }
:where(.mc-glass) .viva-demo__steps { list-style: none; margin: 0; padding: 3px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: 12px; background: var(--g-fill-3); }
:where(.mc-glass) .viva-demo__step { width: 100%; height: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 9px 10px; border: 0; border-radius: 9px; text-align: left; background: transparent; color: var(--g-label-2); font: 500 14px/1.25 var(--g-font); cursor: pointer; letter-spacing: -.01em; }
:where(.mc-glass) .viva-demo__step[aria-current] { color: var(--g-label); background: var(--g-bg-elevated); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04); }
:where(.mc-glass) .viva-demo__step-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g-fill-3); font: 600 12px/1 var(--g-font-rounded); font-variant-numeric: tabular-nums; }
:where(.mc-glass) .viva-demo__step[aria-current] .viva-demo__step-number { background: var(--g-tint); color: var(--g-tint-on); }
:where(.mc-glass) .viva-demo__step-mark { grid-column: 2; font-size: 12px; color: var(--g-correct); font-weight: 600; }
:where(.mc-glass) .viva-demo__step-mark:empty { display: none; }
:where(.mc-glass) .viva-demo__content { min-width: 0; padding: 22px var(--viva-inset) var(--viva-inset); }
:where(.mc-glass) .viva-demo__stage { min-width: 0; }
:where(.mc-glass) .viva-demo__context { margin-bottom: 24px; padding-bottom: 16px; border-bottom: .5px solid var(--g-sep); }
:where(.mc-glass) .viva-demo summary { cursor: pointer; font-weight: 600; padding-block: 8px; }
:where(.mc-glass) .viva-demo__role { margin: 6px 0; color: var(--g-ink-2); font-size: 15px; }
:where(.mc-glass) .viva-demo__scenario { margin: 8px 0 0; max-width: 70ch; }
:where(.mc-glass) .viva-demo__prompt { margin: 0 0 18px; font: 600 21px/1.3 var(--g-font-display); letter-spacing: -.012em; max-width: 60ch; text-wrap: pretty; }
:where(.mc-glass) .viva-demo__prompt:focus { outline: none; }
:where(.mc-glass) .viva-demo__figure { margin: 0 0 20px; border-radius: 16px; overflow: hidden; background: var(--g-bg-plain); }
:where(.mc-glass) .viva-demo__figure > img { width: 100%; max-height: clamp(220px, 34svh, 360px); height: auto; object-fit: contain; background: var(--g-stage); }
:where(.mc-glass) .viva-demo__figure figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 8px 12px 10px; font-size: 13px; color: var(--g-ink-2); }
:where(.mc-glass) .viva-demo__credit { grid-column: 1 / -1; }
:where(.mc-glass) .viva-demo__credit a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
:where(.mc-glass) .viva-demo__image-link, :where(.mc-glass) .viva-demo__reset { background: transparent; border: 0; padding: 0 8px; min-height: 36px; color: var(--g-tint); cursor: pointer; font: 500 15px/1 var(--g-font); }
:where(.mc-glass) .viva-demo__image-error { padding: 12px 16px; color: var(--g-wrong); }
:where(.mc-glass) .viva-demo__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--g-r-capsule); background: var(--g-fill-3); color: var(--g-tint); font: 600 16px/1 var(--g-font); letter-spacing: -.02em; cursor: pointer; transition: background-color var(--g-d-fast) linear, transform var(--g-d-fast) var(--g-ease); }
:where(.mc-glass) .viva-demo__button:hover { background: var(--g-fill-2); }
:where(.mc-glass) .viva-demo__button:active { transform: scale(.97); }
:where(.mc-glass) .viva-demo__button--primary { background: var(--g-tint); color: var(--g-tint-on); }
:where(.mc-glass) .viva-demo__button--primary:hover { background: var(--g-tint-hover); }
:where(.mc-glass) .viva-demo__button:disabled { background: var(--g-fill-3); color: var(--g-label-3); cursor: default; transform: none; }
:where(.mc-glass) .viva-demo__timing > .viva-demo__button { min-height: 40px; padding: 0 16px; }
:where(.mc-glass) .viva-demo__reveal { width: 100%; justify-content: flex-start; background: var(--g-tint-soft); }
:where(.mc-glass) .viva-demo__guide-detail { padding: 20px 0 0; }
:where(.mc-glass) .viva-demo__guide-detail > :is(h3, h4, h5) { margin: 0 0 14px; font: 600 19px/1.3 var(--g-font-display); letter-spacing: -.012em; }
:where(.mc-glass) .viva-demo__guide-detail :is(p, li) { max-width: 70ch; }
:where(.mc-glass) .viva-demo__guide-detail ul { padding-inline-start: 1.25rem; margin-block: 8px 20px; }
:where(.mc-glass) .viva-demo__guide-detail li + li { margin-top: 8px; }
:where(.mc-glass) .viva-demo__guide-heading { font-weight: 600; margin-top: 14px; }
:where(.mc-glass) .viva-demo__marking { margin: 24px 0 0; padding: 18px 0 0; border: 0; border-top: .5px solid var(--g-sep); display: flex; flex-wrap: wrap; gap: 8px; }
:where(.mc-glass) .viva-demo__marking legend { font-size: 15px; font-weight: 600; padding: 0 12px 0 0; float: left; line-height: 44px; }
:where(.mc-glass) .viva-demo__marking label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--g-r-capsule); background: var(--g-fill-3); cursor: pointer; font-size: 15px; font-weight: 500; }
:where(.mc-glass) .viva-demo__marking label:has(:checked) { background: var(--g-tint-soft); color: var(--g-tint); font-weight: 600; }
:where(.mc-glass) .viva-demo__marking label:has(:focus-visible) { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; }
:where(.mc-glass) .viva-demo__marking input { width: 16px; height: 16px; margin: 0; accent-color: var(--g-tint); }
:where(.mc-glass) .viva-demo__material { border-top: .5px solid var(--g-sep); padding-block: 8px; margin-block: 12px; }
:where(.mc-glass) .viva-demo__material-body { font-size: 16px; line-height: 1.55; }
:where(.mc-glass) .viva-demo__table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
:where(.mc-glass) .viva-demo__table-scroll table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: 15px; }
:where(.mc-glass) .viva-demo__table-scroll :is(th, td) { border: 0; border-bottom: .5px solid var(--g-sep); padding: 10px 12px; text-align: start; vertical-align: top; }
:where(.mc-glass) .viva-demo__table-scroll th { color: var(--g-ink-2); font-size: 13px; font-weight: 600; }
:where(.mc-glass) .viva-demo__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: .5px solid var(--g-sep); padding-top: 20px; margin-top: 24px; }
:where(.mc-glass) .viva-demo__reset { margin-inline-start: auto; }
:where(.mc-glass) .viva-demo__status, :where(.mc-glass) .viva-demo__note { margin: 0; padding: 12px var(--viva-inset); font-size: 13px; line-height: 1.45; color: var(--g-ink-2); }
:where(.mc-glass) .viva-demo__status:empty { padding: 0; }
:where(.mc-glass) .viva-demo__note { border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .viva-demo__source { font-size: 13px; line-height: 1.45; padding: 8px var(--viva-inset) 14px; color: var(--g-ink-2); border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .viva-demo__source summary { font-weight: 500; color: var(--g-ink); }
:where(.mc-glass) .viva-demo__source p { max-width: 78ch; margin-top: 6px; }
:where(.mc-glass) .viva-demo__source a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
:where(.mc-glass) .viva-demo__review-list { margin: 18px 0; }
:where(.mc-glass) .viva-demo__review-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: 12px; border-bottom: .5px solid var(--g-sep); gap: 16px; }
:where(.mc-glass) .viva-demo__review-list dd { margin: 0; font-weight: 600; }
:where(.mc-glass) .viva-demo__loading, :where(.mc-glass) .viva-demo__error { min-height: 16rem; padding: 28px; border-radius: var(--g-r-card); background: var(--card, var(--g-bg)); color: var(--g-ink-2); }
:where(.mc-glass) .viva-demo__error { display: grid; align-content: center; justify-items: start; gap: 14px; color: var(--g-label); }
@media (prefers-reduced-motion: no-preference) {
  :where(.mc-glass) .viva-demo__part.is-transitioning, :where(.mc-glass) .viva-demo__guide-detail { animation: tv-rise 280ms var(--g-ease) both; }
  @keyframes tv-rise { from { opacity: 0; translate: 0 6px; } }
}
@media (min-width: 1000px) {
  :where(.mc-glass) .viva-demo__content:has(.viva-demo__context[open]) { display: grid; grid-template-columns: minmax(15rem, .37fr) minmax(0, 1fr); column-gap: 40px; }
  :where(.mc-glass) .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__context { grid-row: 1 / 3; grid-column: 1; margin: 0; padding: 0 28px 0 0; border-bottom: 0; border-inline-end: .5px solid var(--g-sep); }
  :where(.mc-glass) .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__stage { grid-row: 1; grid-column: 2; }
  :where(.mc-glass) .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__footer { grid-row: 2; grid-column: 2; }
}
@media (max-width: 760px) {
  :where(.mc-glass) .viva-demo__header { align-items: flex-start; flex-direction: column; gap: 14px; }
  :where(.mc-glass) .viva-demo__title { font-size: 21px; }
  :where(.mc-glass) .viva-demo__timing { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: 12px; }
  :where(.mc-glass) .viva-demo__target { grid-column: 2; grid-row: 1; max-width: none; }
  :where(.mc-glass) .viva-demo__timing > button { grid-column: 3; grid-row: 1; }
  :where(.mc-glass) .viva-demo__step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 8px 4px; font-size: 12px; gap: 4px; }
  :where(.mc-glass) .viva-demo__step-mark { grid-column: 1; }
  :where(.mc-glass) .viva-demo__marking legend { float: none; width: 100%; line-height: 1.3; padding-bottom: 8px; }
  :where(.mc-glass) .viva-demo__marking label { flex: 1; justify-content: center; padding-inline: 8px; }
}
@media (max-width: 420px) {
  :where(.mc-glass) .viva-demo__footer { gap: 8px; }
  :where(.mc-glass) .viva-demo__footer > .viva-demo__button { flex: 1; padding-inline: 8px; }
  :where(.mc-glass) .viva-demo__reset { margin-inline-start: 0; }
}

/* ── Arena preview ──────────────────────────────────────────────── */
:where(.mc-glass) .arena-demo { min-inline-size: 0; border-radius: var(--g-r-card); background: var(--card, var(--g-bg)); color: var(--g-label); container-type: inline-size; overflow: hidden; font-size: 17px; line-height: 1.5; }
:where(.mc-glass) .arena-demo [hidden] { display: none; }
:where(.mc-glass) .arena-demo p, :where(.mc-glass) .arena-demo :is(h2, h3, h4, h5) { margin: 0; }
:where(.mc-glass) .arena-demo__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; padding: 22px clamp(18px, 3cqi, 32px) 0; }
:where(.mc-glass) .arena-demo__head strong { font: 600 21px/1.2 var(--g-font-display); letter-spacing: -.012em; }
:where(.mc-glass) .arena-demo__head > span { font-size: 13px; color: var(--g-ink-2); }
:where(.mc-glass) .arena-demo__steps { list-style: none; margin: 0; padding: 16px clamp(18px, 3cqi, 32px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:where(.mc-glass) .arena-demo__steps li { padding-block: 8px 0; border-top: 3px solid var(--g-fill-2); color: var(--g-label-3); font-size: 13px; line-height: 1.3; font-weight: 500; transition: border-color var(--g-d-fast) linear, color var(--g-d-fast) linear; }
:where(.mc-glass) .arena-demo__steps li[aria-current] { border-top-color: var(--g-tint); color: var(--g-label); font-weight: 600; }
:where(.mc-glass) .arena-demo__stage { padding: clamp(18px, 3cqi, 32px); }
:where(.mc-glass) .arena-demo__setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4cqi, 48px); align-items: center; }
:where(.mc-glass) .arena-demo__setup { display: grid; gap: 16px; justify-items: start; }
:where(.mc-glass) .arena-demo .arena-demo__title { font: 600 24px/1.2 var(--g-font-display); letter-spacing: -.012em; text-wrap: balance; max-inline-size: 30ch; }
:where(.mc-glass) .arena-demo__setup > p { max-inline-size: 52ch; color: var(--g-ink-2); font-size: 17px; line-height: 1.5; }
:where(.mc-glass) .arena-demo__modes, :where(.mc-glass) .arena-demo__answers { min-inline-size: 0; padding: 0; border: 0; margin: 0; }
:where(.mc-glass) .arena-demo__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
:where(.mc-glass) .arena-demo__modes legend { grid-column: 1 / -1; padding: 0; margin-block-end: 2px; font-size: 13px; font-weight: 600; color: var(--g-ink-2); text-transform: uppercase; letter-spacing: .01em; }
:where(.mc-glass) .arena-demo__mode { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--g-r-cell); background: var(--g-bg-plain); cursor: pointer; box-shadow: inset 0 0 0 1px transparent; }
:where(.mc-glass) .arena-demo__mode:has(input:checked) { background: var(--g-tint-soft); box-shadow: inset 0 0 0 1.5px var(--g-tint); }
:where(.mc-glass) .arena-demo__mode:has(input:focus-visible), :where(.mc-glass) .arena-demo__option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; }
:where(.mc-glass) .arena-demo input { accent-color: var(--g-tint); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
:where(.mc-glass) .arena-demo__mode strong { display: block; font-weight: 600; font-size: 16px; }
:where(.mc-glass) .arena-demo__mode small { display: block; margin-top: 2px; color: var(--g-ink-2); font-size: 13px; line-height: 1.35; }
:where(.mc-glass) .arena-demo .arena-demo__mode-copy { min-block-size: 4.5em; font-size: 15px; }
:where(.mc-glass) .arena-demo__timing { display: flex; align-items: center; gap: 12px; min-block-size: 44px; font-size: 15px; cursor: pointer; }
:where(.mc-glass) .arena-demo__timing input { margin: 0; }
:where(.mc-glass) .arena-demo__button { display: inline-flex; justify-content: center; align-items: center; min-block-size: 44px; padding: 0 22px; border: 0; border-radius: var(--g-r-capsule); background: var(--g-tint); color: var(--g-tint-on); font: 600 16px/1 var(--g-font); letter-spacing: -.02em; text-align: center; cursor: pointer; transition: background-color var(--g-d-fast) linear, transform var(--g-d-fast) var(--g-ease); }
:where(.mc-glass) .arena-demo__button:hover { background: var(--g-tint-hover); }
:where(.mc-glass) .arena-demo__button:active { transform: scale(.97); }
:where(.mc-glass) .arena-demo__button--quiet { background: var(--g-fill-3); color: var(--g-tint); }
:where(.mc-glass) .arena-demo__button--quiet:hover { background: var(--g-fill-2); }
:where(.mc-glass) .arena-demo__button:disabled { background: var(--g-fill-3); color: var(--g-label-3); cursor: default; transform: none; }
:where(.mc-glass) .arena-demo .arena-demo__meta { color: var(--g-ink-2); font: 500 13px/1.4 var(--g-font); }
:where(.mc-glass) .arena-demo__figure { margin: 10px 0 0; }
:where(.mc-glass) .arena-demo__figure > a { display: block; border-radius: 16px; overflow: hidden; background: var(--g-stage); cursor: zoom-in; }
:where(.mc-glass) .arena-demo__figure img { display: block; inline-size: 100%; block-size: auto; max-block-size: 22rem; object-fit: contain; }
:where(.mc-glass) .arena-demo__image-error { display: grid; justify-items: start; gap: 10px; padding: 16px; border-radius: var(--g-r-cell); background: var(--g-wrong-soft); color: var(--g-wrong); font-size: 15px; line-height: 1.45; }
:where(.mc-glass) .arena-demo__figure figcaption { display: grid; gap: 2px; padding-block: 8px 0; color: var(--g-ink-2); font-size: 13px; line-height: 1.4; }
:where(.mc-glass) .arena-demo__image-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 16px; }
:where(.mc-glass) .arena-demo .arena-demo__image-credit { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: inherit; }
:where(.mc-glass) .arena-demo__figure figcaption a, :where(.mc-glass) .arena-demo__sources a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
:where(.mc-glass) .arena-demo .arena-demo__preview-note { margin-block-start: 10px; color: var(--g-ink-2); font-size: 15px; max-inline-size: 44ch; }
:where(.mc-glass) .arena-demo__round { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-block-end: 14px; }
:where(.mc-glass) .arena-demo__clock { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
:where(.mc-glass) .arena-demo__clock-track { block-size: 3px; margin-block: -4px 22px; background: var(--g-fill-2); border-radius: 2px; overflow: hidden; }
:where(.mc-glass) .arena-demo__clock-track span { display: block; block-size: 100%; background: var(--g-tint); transform-origin: left; transition: transform 260ms linear; }
:where(.mc-glass) .arena-demo__question-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3cqi, 40px); align-items: start; }
:where(.mc-glass) .arena-demo .arena-demo__stem { margin-block-start: 6px; font-size: 17px; line-height: 1.58; letter-spacing: -.012em; }
:where(.mc-glass) .arena-demo__decision .arena-demo__title { font-size: 19px; line-height: 1.38; max-inline-size: none; }
:where(.mc-glass) .arena-demo__answers { display: grid; gap: 0; margin-block-start: 14px; border-radius: var(--g-r-cell); background: var(--g-bg-plain); overflow: hidden; }
:where(.mc-glass) .arena-demo__option { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 13px 16px; cursor: pointer; transition: background-color var(--g-d-fast) linear; }
:where(.mc-glass) .arena-demo__option + .arena-demo__option::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: .5px; background: var(--g-sep); }
:where(.mc-glass) .arena-demo__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
:where(.mc-glass) .arena-demo__option-key { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--g-font-rounded); color: var(--g-label-2); box-shadow: inset 0 0 0 1.5px var(--g-fill); }
:where(.mc-glass) .arena-demo__option-copy { grid-column: 2; font-size: 16px; line-height: 1.4; }
:where(.mc-glass) .arena-demo__option:has(input:checked) { background: var(--g-tint-soft); }
:where(.mc-glass) .arena-demo__option:has(input:checked) .arena-demo__option-key { background: var(--g-tint); color: var(--g-tint-on); box-shadow: none; }
:where(.mc-glass) .arena-demo__option:has(input:disabled) { cursor: default; }
:where(.mc-glass) .arena-demo__option:not(:has(input:disabled)):hover { background: var(--g-fill-4); }
:where(.mc-glass) .arena-demo[data-phase="review"] .arena-demo__option.is-correct { background: var(--g-correct-soft); }
:where(.mc-glass) .arena-demo[data-phase="review"] .arena-demo__option.is-correct .arena-demo__option-key { background: var(--g-green); color: #fff; box-shadow: none; }
:where(.mc-glass) .arena-demo[data-phase="review"] .arena-demo__option.is-wrong { background: var(--g-wrong-soft); }
:where(.mc-glass) .arena-demo[data-phase="review"] .arena-demo__option.is-wrong .arena-demo__option-key { background: var(--g-red); color: #fff; box-shadow: none; }
:where(.mc-glass) .arena-demo__option-result { grid-column: 2; font-size: 13px; font-weight: 600; color: var(--g-wrong); }
:where(.mc-glass) .arena-demo__option.is-correct .arena-demo__option-result { color: var(--g-correct); }
:where(.mc-glass) .arena-demo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-start: 20px; }
:where(.mc-glass) .arena-demo__locked { display: grid; justify-items: start; gap: 10px; margin-block-start: 20px; padding-block-start: 16px; border-block-start: .5px solid var(--g-sep); }
:where(.mc-glass) .arena-demo__locked strong:focus, :where(.mc-glass) .arena-demo__result strong:focus, :where(.mc-glass) .arena-demo [tabindex="-1"]:focus { outline: none; }
:where(.mc-glass) .arena-demo__locked p { font-size: 15px; line-height: 1.5; color: var(--g-ink-2); }
:where(.mc-glass) .arena-demo__sources { margin-block-start: 8px; font-size: 13px; line-height: 1.45; color: var(--g-ink-2); }
:where(.mc-glass) .arena-demo__sources summary { cursor: pointer; padding-block: 8px; color: var(--g-ink); font-weight: 500; }
:where(.mc-glass) .arena-demo__sources p + p { margin-block-start: 6px; }
:where(.mc-glass) .arena-demo__source-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
:where(.mc-glass) .arena-demo__text-link, :where(.mc-glass) .arena-demo__reference { color: var(--g-tint); font-size: 15px; }
:where(.mc-glass) .arena-demo__text-link { display: inline-flex; min-block-size: 44px; align-items: center; }
:where(.mc-glass) .arena-demo__teaching { margin-block-start: 28px; padding-block-start: 22px; border-block-start: .5px solid var(--g-sep); }
:where(.mc-glass) .arena-demo__result { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
:where(.mc-glass) .arena-demo__result > strong { font: 700 22px/1.2 var(--g-font-display); letter-spacing: -.018em; }
:where(.mc-glass) .arena-demo__points { color: var(--g-tint); font: 600 19px/1.2 var(--g-font-display); font-variant-numeric: tabular-nums; }
:where(.mc-glass) .arena-demo .arena-demo__score-note { margin-block: 6px 20px; max-inline-size: 70ch; color: var(--g-ink-2); font-size: 15px; line-height: 1.5; }
:where(.mc-glass) .arena-demo__teaching :is(h3, h4, h5, h6) { font: 600 13px/1.2 var(--g-font); text-transform: uppercase; letter-spacing: .01em; color: var(--g-label-2); }
:where(.mc-glass) .arena-demo .arena-demo__reasoning { max-inline-size: 70ch; margin-block-start: 8px; font-size: 17px; line-height: 1.55; }
:where(.mc-glass) .arena-demo__reference { display: inline-block; margin-block-start: 12px; }
:where(.mc-glass) .arena-demo .arena-demo__disclosure { max-inline-size: none; padding: 14px clamp(18px, 3cqi, 32px) 18px; border-block-start: .5px solid var(--g-sep); color: var(--g-ink-2); font-size: 13px; line-height: 1.45; }
:where(.mc-glass) .arena-demo__loading { min-block-size: 16rem; padding: 28px; display: grid; place-content: center; justify-items: start; gap: 14px; color: var(--g-ink-2); }
:where(.mc-glass) .arena-demo__status { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  :where(.mc-glass) .arena-demo[data-phase="question"] .arena-demo__question-grid, :where(.mc-glass) .arena-demo[data-phase="review"] .arena-demo__teaching, :where(.mc-glass) .arena-demo[data-phase="locked"] .arena-demo__locked { animation: tv-rise 280ms var(--g-ease) both; }
}
@container (max-width: 700px) {
  :where(.mc-glass) .arena-demo__setup-grid, :where(.mc-glass) .arena-demo__question-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.mc-glass) .arena-demo__first-case { padding-block-start: 20px; border-block-start: .5px solid var(--g-sep); }
  :where(.mc-glass) .arena-demo__first-case .arena-demo__figure img { max-block-size: 18rem; }
  :where(.mc-glass) .arena-demo .arena-demo__mode-copy { min-block-size: auto; }
  :where(.mc-glass) .arena-demo .arena-demo__title { font-size: 21px; }
}

/* ── Recall card ────────────────────────────────────────────────── */
:where(.mc-glass) .tf { max-width: 720px; }
:where(.mc-glass) .tf-panel { border-radius: var(--g-r-card); background: var(--card, var(--g-bg)); padding: 20px clamp(18px, 3vw, 28px) 22px; min-height: 360px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
:where(.mc-glass) .tf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--g-ink-2); font-weight: 500; }
:where(.mc-glass) .tf-card { min-width: 0; display: grid; }
:where(.mc-glass) .tf-face { display: grid; align-content: start; gap: 14px; width: 100%; min-height: 210px; padding: 24px clamp(18px, 3vw, 28px); border: 0; border-radius: 18px; background: var(--g-bg); color: var(--g-label); text-align: left; font: inherit; }
:where(.mc-glass) .tf-front { cursor: pointer; align-content: space-between; transition: transform var(--g-d-fast) var(--g-ease); }
:where(.mc-glass) .tf-front:active { transform: scale(.992); }
:where(.mc-glass) .tf-label { font: 600 12px/1 var(--g-font); text-transform: uppercase; letter-spacing: .04em; color: var(--g-ink-2); }
:where(.mc-glass) .tf-back .tf-label { color: var(--g-tint); }
:where(.mc-glass) .tf-q { font: 600 clamp(21px, 2.6vw, 26px)/1.28 var(--g-font-display); letter-spacing: -.012em; text-wrap: balance; }
:where(.mc-glass) .tf-a { font-size: 19px; line-height: 1.5; letter-spacing: -.014em; }
:where(.mc-glass) .tf-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--g-tint); font-size: 15px; font-weight: 500; }
:where(.mc-glass) .tf-hint .g-ic { width: 18px; height: 18px; }
:where(.mc-glass) .tf-audio { display: flex; align-items: center; gap: 14px; padding: 8px 0 0; }
:where(.mc-glass) .tf-play { --h: 44px; flex: none; }
:where(.mc-glass) .tf-play .g-ic { width: 18px; height: 18px; }
:where(.mc-glass) .tf-eq { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 3px; }
:where(.mc-glass) .tf-eq i { flex: 1; max-width: 6px; height: 30%; border-radius: 3px; background: var(--g-fill); transition: background-color var(--g-d-base) linear; }
:where(.mc-glass) .tf-eq i:nth-child(3n) { height: 62%; }
:where(.mc-glass) .tf-eq i:nth-child(4n+1) { height: 44%; }
:where(.mc-glass) .tf-eq i:nth-child(5n+2) { height: 84%; }
:where(.mc-glass) .tf-audio.is-playing .tf-eq i { background: var(--g-tint); }
:where(.mc-glass) .tf-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--g-ink-2); min-width: 7ch; text-align: right; }
:where(.mc-glass) .tf-note { margin: 0; color: var(--g-wrong); min-height: 0; }
:where(.mc-glass) .tf-note:empty { display: none; }
:where(.mc-glass) .tf-back-actions { display: flex; }
:where(.mc-glass) .tf-back-actions .g-btn .g-ic { width: 16px; height: 16px; }
:where(.mc-glass) .tf-pager { display: flex; align-items: center; gap: 8px; }
:where(.mc-glass) .tf-pager .g-btn { color: var(--g-label); --h: 40px; }
:where(.mc-glass) .tf-pager .g-ic { width: 18px; height: 18px; }
:where(.mc-glass) .tf-count { margin-left: 8px; font-variant-numeric: tabular-nums; }
:where(.mc-glass) .tf-count b { color: var(--g-label); font-weight: 600; }
:where(.mc-glass) .tf-skel { display: grid; gap: 12px; padding: 8px 0; }
:where(.mc-glass) .tf-skel i { display: block; height: 18px; border-radius: 9px; background: var(--g-fill-3); }
:where(.mc-glass) .tf-skel i:nth-child(1) { width: 34%; height: 12px; }
:where(.mc-glass) .tf-skel i:nth-child(3) { width: 72%; }
:where(.mc-glass) .tf-error { display: grid; justify-items: start; gap: 12px; align-content: center; min-height: 200px; }
@media (prefers-reduced-motion: no-preference) {
  :where(.mc-glass) .tf-back:not([hidden]), :where(.mc-glass) .tf-front { animation: tv-rise 240ms var(--g-ease) both; }
  :where(.mc-glass) .tf-audio.is-playing .tf-eq i { animation: tf-eq 900ms ease-in-out infinite alternate; }
  :where(.mc-glass) .tf-audio.is-playing .tf-eq i:nth-child(odd) { animation-delay: -300ms; }
  :where(.mc-glass) .tf-audio.is-playing .tf-eq i:nth-child(3n) { animation-delay: -600ms; }
  @keyframes tf-eq { from { scale: 1 .5; } to { scale: 1 1.35; } }
}

/* Dark: tonal cards sit on a black page */
@media not all /* dark is set by html[data-learner-theme], see learner-appearance.js */ {
  :root:not([data-theme="light"]) :where(.mc-glass) .tv-section, :root:not([data-theme="light"]) :where(.mc-glass) .tv-section.alt { --card: var(--g-bg-2); }
  :root:not([data-theme="light"]) :where(.mc-glass) .tq-opts { background: var(--g-bg-2); }
  :root:not([data-theme="light"]) :where(.mc-glass) .tf-face, :root:not([data-theme="light"]) :where(.mc-glass) .arena-demo__mode, :root:not([data-theme="light"]) :where(.mc-glass) .arena-demo__answers, :root:not([data-theme="light"]) :where(.mc-glass) .viva-demo__figure { background: var(--g-bg-3); }
}
:root[data-learner-theme="dark"] :where(.mc-glass) .tv-section, :root[data-learner-theme="dark"] :where(.mc-glass) .tv-section.alt { --card: var(--g-bg-2); }
:root[data-learner-theme="dark"] :where(.mc-glass) .tq-opts { background: var(--g-bg-2); }
:root[data-learner-theme="dark"] :where(.mc-glass) :is(.tf-face, .arena-demo__mode, .arena-demo__answers, .viva-demo__figure) { background: var(--g-bg-3); }

/* ── Narrow ─────────────────────────────────────────────────────── */
@media (max-width: 833px) {
  :where(.mc-glass) .pa-hero { padding: 52px 0 60px; }
  :where(.mc-glass) .pa-hero-sm { padding: 44px 0 28px; }
  :where(.mc-glass) .pa-after { padding: 64px 0; }
  :where(.mc-glass) .tv-head { margin-bottom: 26px; }
  :where(.mc-glass) .tv-modes { grid-template-columns: minmax(0, 1fr); }
  :where(.mc-glass) .tq-col { margin-top: 28px; }
  :where(.mc-glass) .tq-actions .g-btn-filled { flex: 1; min-width: 0; }
  :where(.mc-glass) .tq-cap { flex-direction: column; gap: 2px; }
  :where(.mc-glass) .tq-cap span:last-child { text-align: left; }
  :where(.mc-glass) .tq-title { font-size: 19px; }
  :where(.mc-glass) .tq-pager [data-gallery-progress] { order: 3; flex-basis: 100%; text-align: center; }
  :where(.mc-glass) .tq-pager { margin-top: 36px; }
  :where(.mc-glass) .tf-panel { min-height: 0; }
}
}