.viva-demo {
  --viva-inset: clamp(1rem, 2.8vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.viva-demo [hidden] { display: none; }
.viva-demo :is(button, a, input, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}
.viva-demo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: min(var(--viva-inset), var(--space-6)) var(--viva-inset);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
.viva-demo__mode, .viva-demo__part-label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm);
}
.viva-demo__title { margin: 0; font-size: var(--type-h2); text-wrap: balance; }
.viva-demo__timing {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  flex: 0 0 auto;
}
.viva-demo__clock { grid-column: 1; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.viva-demo__target { grid-column: 1; grid-row: 2; font-size: var(--type-caption); max-width: 18ch; }
.viva-demo__timing > button { grid-column: 2; grid-row: 1 / 3; }
.viva-demo__timing.is-overtime .viva-demo__clock { color: var(--color-warning); }
.viva-demo__workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
.viva-demo__rail { padding: var(--space-3) var(--viva-inset); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.viva-demo__steps { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.viva-demo__step {
  width: 100%; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start; gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-2); border: 0; border-inline-start: 3px solid transparent;
  border-radius: var(--radius-xs); text-align: start; background: transparent;
  color: var(--color-text-secondary); font: inherit; font-size: var(--type-body-sm); cursor: pointer;
}
.viva-demo__step[aria-current] { color: var(--color-text); background: var(--color-surface); border-inline-start-color: var(--color-brand); }
.viva-demo__step-number { font-variant-numeric: tabular-nums; font-weight: 600; }
.viva-demo__step-mark { grid-column: 2; color: var(--color-text-secondary); font-size: var(--type-caption); }
.viva-demo__step-mark:empty { display: none; }
.viva-demo__content { min-width: 0; padding: var(--viva-inset); }
.viva-demo__stage { min-width: 0; }
.viva-demo__part.is-transitioning { animation: viva-demo-reveal var(--duration-normal) var(--ease-out); }
.viva-demo__context { margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
.viva-demo summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); min-height: var(--control-height); box-sizing: border-box; }
.viva-demo :is(.viva-demo__role, .viva-demo__scenario) { max-width: 70ch; padding: 0; }
.viva-demo__role { color: var(--color-text-secondary); font-size: var(--type-body-sm); margin: var(--space-2) 0; }
.viva-demo .viva-demo__scenario { margin: var(--space-3) 0; color: var(--color-text); font-family: var(--font-clinical); font-size: var(--type-clinical); line-height: var(--leading-clinical); }
.viva-demo__prompt { margin: 0 0 var(--space-5); font-size: var(--type-h3); line-height: 1.4; max-width: 64ch; text-wrap: pretty; }
.viva-demo__prompt:focus { outline: none; }
.viva-demo__figure { margin: 0 0 var(--space-5); background: var(--color-bg-subtle); }
.viva-demo__figure > img { display: block; width: 100%; max-height: clamp(14rem, 32svh, 22rem); height: auto; object-fit: contain; }
.viva-demo__figure figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--type-caption); }
.viva-demo__credit { grid-column: 1 / -1; color: var(--color-text-secondary); }
.viva-demo__image-link, .viva-demo__reset { background: transparent; border: 0; color: var(--color-link); cursor: pointer; font: inherit; font-size: var(--type-body-sm); text-decoration: underline; text-underline-offset: .2em; min-height: var(--control-height); }
.viva-demo__image-link { flex: 0 0 auto; }
.viva-demo__button {
  min-height: var(--control-height); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: inherit;
  font-size: var(--type-body-sm); font-weight: 600; line-height: 1.35; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.viva-demo__button--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); }
.viva-demo__button:disabled { background: var(--color-disabled-bg); color: var(--color-disabled); border-color: var(--color-border); cursor: default; }
.viva-demo__reveal { width: 100%; text-align: start; padding-inline: var(--space-4); }
.viva-demo__guide-detail { padding: var(--space-5) 0 0; animation: viva-demo-reveal var(--duration-normal) var(--ease-out); }
.viva-demo__guide-detail > h4, .viva-demo__guide-detail > h3 { margin: 0 0 var(--space-4); font-size: var(--type-h3); }
.viva-demo__guide-detail :is(p, li) { font-family: var(--font-clinical); font-size: var(--type-clinical); line-height: var(--leading-clinical); max-width: 70ch; }
.viva-demo__guide-detail ul { padding-inline-start: 1.3rem; margin-block: var(--space-3) var(--space-5); }
.viva-demo__guide-detail li + li { margin-top: var(--space-3); }
.viva-demo__guide-heading { font-weight: 600; }
.viva-demo__marking { margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.viva-demo__marking legend { font-size: var(--type-body-sm); font-weight: 600; padding: 0 var(--space-2) 0 0; }
.viva-demo__marking label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--control-height); box-sizing: border-box; }
.viva-demo__marking label:has(:checked) { background: var(--color-bg-subtle); border-color: var(--color-text); }
.viva-demo__marking input { width: 1rem; height: 1rem; accent-color: var(--color-brand); margin: 0; }
.viva-demo__material { border-block-start: 1px solid var(--color-border); padding-block: var(--space-2); margin-block: var(--space-3); }
.viva-demo__material-body { font-family: var(--font-clinical); font-size: var(--type-clinical); line-height: var(--leading-clinical); }
.viva-demo__table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.viva-demo__table-scroll table { border-collapse: collapse; width: 100%; min-width: 28rem; font-size: var(--type-body); }
.viva-demo__table-scroll :is(th, td) { border: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-3); text-align: start; vertical-align: top; }
.viva-demo__table-scroll th { color: var(--color-text-secondary); font-size: var(--type-body-sm); font-weight: 600; }
.viva-demo__footer { display: flex; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-6); }
.viva-demo__reset { margin-inline-start: auto; }
.viva-demo :is(.viva-demo__status, .viva-demo__note) { max-width: none; margin: 0; padding: var(--space-3) var(--viva-inset); font-size: var(--type-body-sm); line-height: 1.5; }
.viva-demo__status:empty { padding: 0; }
.viva-demo__status { background: var(--color-bg-subtle); }
.viva-demo__note { color: var(--color-text-secondary); border-top: 1px solid var(--color-border); }
.viva-demo__review-list { margin: var(--space-5) 0; }
.viva-demo__review-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); gap: var(--space-4); }
.viva-demo__review-list dd { margin: 0; font-weight: 600; }
.viva-demo__source { font-size: var(--type-body-sm); padding: var(--space-2) var(--viva-inset); background: var(--color-bg); border-top: 1px solid var(--color-border); }
.viva-demo__source p { max-width: 78ch; }
.viva-demo__loading, .viva-demo__error { min-height: 22rem; padding: var(--space-6); background: var(--color-bg-subtle); }
.viva-demo__image-error { padding: var(--space-4); color: var(--color-error); }
@keyframes viva-demo-reveal { from { opacity: .35; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) {
  .viva-demo__button:not(:disabled):hover { background: var(--color-bg-subtle); border-color: var(--color-text); }
  .viva-demo__button--primary:not(:disabled):hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
  .viva-demo__step:hover { color: var(--color-text); background: var(--color-bg-subtle); }
}
@media (min-width: 1000px) {
  .viva-demo__content:has(.viva-demo__context[open]) { display: grid; grid-template-columns: minmax(15rem, .37fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__context { grid-row: 1 / 3; grid-column: 1; margin: 0; padding: 0 var(--space-6) 0 0; border-bottom: 0; border-inline-end: 1px solid var(--color-border); }
  .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__stage { grid-row: 1; grid-column: 2; }
  .viva-demo__content:has(.viva-demo__context[open]) .viva-demo__footer { grid-row: 2; grid-column: 2; }
}
@media (max-width: 760px) {
  .viva-demo__header { align-items: start; flex-direction: column; gap: var(--space-4); }
  .viva-demo__timing { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: var(--space-3); }
  .viva-demo__target { grid-column: 2; grid-row: 1; max-width: none; }
  .viva-demo__timing > button { grid-column: 3; grid-row: 1; }
  .viva-demo__workspace { grid-template-columns: minmax(0, 1fr); }
  .viva-demo__rail { padding: var(--space-3) var(--viva-inset); border-inline-end: 0; border-bottom: 1px solid var(--color-border); }
  .viva-demo__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
  .viva-demo__step { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); border-inline-start: 0; border-bottom: 3px solid transparent; padding: var(--space-2) var(--space-1); font-size: var(--type-caption); }
  .viva-demo__step[aria-current] { border-bottom-color: var(--color-brand); }
  .viva-demo__step-mark { grid-column: 1; }
  .viva-demo__step-number { font-size: var(--type-body); }
  .viva-demo__figure figcaption { align-items: start; }
  .viva-demo__marking label { flex: 1; justify-content: center; padding-inline: var(--space-2); }
}
@media (max-width: 420px) {
  .viva-demo__footer { gap: var(--space-2); }
  .viva-demo__footer > .viva-demo__button { flex: 1; padding-inline: var(--space-2); }
  .viva-demo__reset { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viva-demo *, .viva-demo *::before, .viva-demo *::after { animation: none; transition: none; scroll-behavior: auto; }
}