.ds-document--play {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ds-play-ink, var(--ds-color-ink));
  background: var(--ds-play-base, var(--ds-color-page));
}

.ds-play-frame {
  --ds-play-column-max-width: 28rem;
  --ds-play-column-aspect: 9 / 19.5;
  --ds-play-footer-inset: 4.5rem;
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--ds-play-ink, var(--ds-color-ink));
  font-family: var(--ds-play-font-body, var(--ds-font-family-body));
}

.ds-play-frame :is(h1, h2, h3) {
  font-family: var(--ds-play-font-display, var(--ds-font-family-utility));
}

.ds-play-frame::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      var(--ds-play-wash-direction, 150deg),
      color-mix(in srgb, var(--ds-play-wash-from, var(--ds-color-page-atmosphere)) var(--ds-play-wash-alpha, 45%), transparent),
      transparent var(--ds-play-wash-stop, 42%)
    ),
    var(--ds-play-base, var(--ds-color-page));
}

.ds-play-frame .ds-button--primary,
[data-ds-play-root] .ds-button--primary {
  color: var(--play-color-on-fill, var(--ds-color-control-primary-foreground));
  background: var(--ds-play-primary, var(--ds-colorway-primary));
}

.ds-play-frame .ds-evaluator__prompt,
[data-ds-play-root] .ds-evaluator__prompt,
.ds-play-frame .ds-evaluator .ds-field__label,
[data-ds-play-root] .ds-evaluator .ds-field__label {
  color: var(--ds-play-ink, var(--ds-color-ink));
}

/* Answer form rhythm: prompt, controls, and submit share one grid gap (console + live Play). */
.ds-play-frame .ds-evaluator__form,
[data-ds-play-root] .ds-evaluator__form {
  display: grid;
  gap: var(--ds-layout-content-gap);
  inline-size: 100%;
  margin: 0;
}

.ds-play-frame .ds-evaluator__form > :is(.ds-field, .ds-field-group, .ds-choice-grid, .ds-chip-group, .ds-evaluator__submit),
[data-ds-play-root] .ds-evaluator__form > :is(.ds-field, .ds-field-group, .ds-choice-grid, .ds-chip-group, .ds-evaluator__submit) {
  margin: 0;
}

/* Card-style surfaces (dashboard, evaluator, ceremony, modals) use kit surface fill + wash. */
.ds-play-frame .ds-surface--subtle,
[data-ds-play-root] .ds-surface--subtle {
  --ds-surface-foreground: var(--ds-play-ink, var(--ds-color-ink));
  --ds-surface-supporting-foreground: var(--ds-play-supporting-ink, var(--ds-color-supporting-ink));
  border-style: solid;
  border-width: var(--play-surface-border-width, 0);
  border-color: var(--play-surface-border-color, transparent);
  box-shadow: var(--ds-play-surface-shadow, none);
}

.ds-play-frame[data-play-surface-recipe="platform-subtle"] .ds-surface--subtle,
[data-ds-play-root][data-play-surface-recipe="platform-subtle"] .ds-surface--subtle {
  --ds-surface-border: transparent;
  border: none;
  --ds-play-surface-shadow: var(--ds-shadow-surface-subtle);
  --ds-surface-background:
    radial-gradient(circle at 100% 0, var(--ds-color-surface-subtle-highlight), transparent 54%),
    var(--ds-color-surface-subtle-wash);
}

/* Play Dark platform kit: hairline uses the subtle-surface border token (quieter than secondary chrome). */
.ds-play-frame[data-play-surface-recipe="platform-subtle"][data-play-polarity="dark"] .ds-surface--subtle,
[data-ds-play-root][data-play-surface-recipe="platform-subtle"][data-play-polarity="dark"] .ds-surface--subtle,
[data-ds-play-root][data-play-surface-recipe="platform-subtle"][data-ds-theme="dark"] .ds-surface--subtle {
  --ds-surface-border: var(--ds-color-surface-subtle-border);
  border: var(--ds-component-border-width) solid var(--ds-surface-border);
}

.ds-play-frame[data-play-surface-recipe="custom"] .ds-surface--subtle:not(.ds-dialog__surface),
[data-ds-play-root][data-play-surface-recipe="custom"] .ds-surface--subtle:not(.ds-dialog__surface) {
  --ds-surface-background:
    radial-gradient(
      circle at 100% 0,
      var(--play-surface-highlight, transparent),
      transparent 54%
    ),
    linear-gradient(
      var(--play-surface-direction, 135deg),
      color-mix(
        in srgb,
        var(--ds-play-surface-from, var(--play-surface-from, transparent))
          var(--ds-play-surface-alpha, var(--play-surface-from-alpha, 50%)),
        transparent
      ),
      transparent var(--play-surface-from-stop, 100%)
    ),
    color-mix(
      in srgb,
      var(--ds-play-surface, var(--ds-color-surface)) var(--play-surface-bg-alpha, 100%),
      transparent
    );
}

/* Modals use the same wash and border but a solid (opaque) surface fill. */
.ds-play-frame[data-play-surface-recipe="custom"] .ds-dialog__surface.ds-surface--subtle,
[data-ds-play-root][data-play-surface-recipe="custom"] .ds-dialog__surface.ds-surface--subtle {
  --ds-surface-background:
    radial-gradient(
      circle at 100% 0,
      var(--play-surface-highlight, transparent),
      transparent 54%
    ),
    linear-gradient(
      var(--play-surface-direction, 135deg),
      color-mix(
        in srgb,
        var(--ds-play-surface-from, var(--play-surface-from, transparent))
          var(--ds-play-surface-alpha, var(--play-surface-from-alpha, 50%)),
        transparent
      ),
      transparent var(--play-surface-from-stop, 100%)
    ),
    var(--ds-play-surface, var(--ds-color-surface));
}

.ds-play-frame__main {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  min-height: 0;
  padding: var(--ds-header-height) var(--ds-page-gutter) var(--ds-play-footer-inset);
  overflow: hidden;
}

.ds-play-frame__column {
  display: flex;
  flex-direction: column;
  inline-size: min(100%, var(--ds-play-column-max-width));
  max-block-size: min(100%, calc(var(--ds-play-column-max-width) * 19.5 / 9));
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 40rem) {
  .ds-play-frame__main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ds-play-frame__column {
    flex: 1 1 auto;
    align-self: stretch;
    max-block-size: none;
    block-size: 100%;
  }
}

@media (min-width: 40.0625rem) {
  .ds-play-frame__main {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
  }
}

.ds-play-frame__attribution,
.ds-play-frame__strapline {
  position: fixed;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  margin: 0;
  padding: var(--ds-space-3) var(--ds-page-gutter);
  color: var(--ds-play-supporting-ink, var(--ds-color-supporting-ink));
}

.ds-play-frame__attribution-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: inherit;
  text-decoration: none;
}

.ds-play-frame__attribution-logo {
  display: block;
  block-size: 1.25rem;
  inline-size: auto;
}

.ds-play-options__locale,
.ds-play-options__legal {
  display: grid;
  gap: var(--ds-space-1);
  padding-top: var(--ds-layout-stack-gap);
  border-top: 1px solid var(--ds-color-border);
}

.ds-play-options__legal {
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--ds-layout-cluster-gap);
}

.ds-play-panel { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-panel--surface { padding: var(--ds-surface-inset); }
.ds-play-panel > :is(h1, h2, h3, p) { margin: 0; }

.ds-play-marketing { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-marketing__hero + .ds-play-marketing__titles {
  margin-block-start: calc(var(--ds-space-2) - var(--ds-layout-stack-gap));
}
.ds-play-marketing__hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ds-control-radius);
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ds-color-media-placeholder);
}
@media (max-width: 40rem) {
  .ds-play-marketing__hero { aspect-ratio: 5 / 2; }
}
.ds-play-marketing__hero img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Platform TEST affordance — fixed Noir/Parchment; not org kit surface. */
.ds-play-frame[data-play-polarity="dark"] .ds-play-test-stripe,
[data-ds-play-root][data-play-polarity="dark"] .ds-play-test-stripe {
  color: var(--ds-palette-parchment);
  background-color: color-mix(in srgb, var(--ds-palette-noir) 80%, transparent);
}
.ds-play-frame[data-play-polarity="light"] .ds-play-test-stripe,
[data-ds-play-root][data-play-polarity="light"] .ds-play-test-stripe {
  color: var(--ds-palette-noir);
  background-color: color-mix(in srgb, var(--ds-palette-parchment) 80%, transparent);
}
.ds-play-test-stripe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-meta);
  font-weight: 400;
  line-height: var(--ds-line-height-body);
}
.ds-play-marketing__hero > .ds-play-test-stripe {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 0;
}
.ds-play-test-stripe--standalone {
  border-radius: var(--ds-control-radius);
}
.ds-play-test-stripe .ds-button--quiet {
  color: inherit;
}
.ds-play-marketing__titles { display: grid; gap: var(--ds-space-1); }
.ds-play-marketing__titles > :is(h1, p) { margin: 0; }

.ds-play-puzzle,
.ds-play-stage {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ds-layout-section-gap);
  min-block-size: 100%;
}

.ds-play-puzzle__intro,
.ds-play-puzzle__dock,
.ds-play-stage__intro,
.ds-play-stage__dock {
  flex: 0 0 auto;
}

.ds-play-puzzle__middle,
.ds-play-stage__middle {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--ds-layout-section-gap);
  min-block-size: 0;
}

.ds-play-stage--work .ds-play-stage__middle {
  justify-content: flex-start;
}

.ds-play-stage__more {
  display: grid;
  inline-size: 100%;
}
.ds-play-stage__more > .ds-button {
  display: flex;
  inline-size: 100%;
  justify-content: center;
}
.ds-play-situation { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-situation__actions .ds-button,
.ds-play-situation__actions form { inline-size: 100%; }
.ds-play-situation__actions,
.ds-play-situation__secondary { display: grid; gap: var(--ds-layout-cluster-gap); }
.ds-play-situation__secondary { justify-items: start; }
.ds-play-situation__diagnostics { display: grid; gap: var(--ds-space-2); }

.ds-play-dashboard { display: grid; gap: var(--ds-layout-cluster-gap); }
.ds-play-dashboard__card {
  display: grid;
  justify-items: start;
  gap: var(--ds-space-2);
  inline-size: 100%;
  padding: var(--ds-surface-inset);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
}
.ds-play-dashboard__card--transparent {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ds-play-metrics {
  --ds-progress-bar-fill: var(--ds-play-primary, var(--ds-colorway-primary));
  --ds-progress-bar-border: var(--ds-play-primary, var(--ds-colorway-primary));
  display: grid;
  gap: var(--ds-space-2);
  inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
}
.ds-play-dashboard__card > .ds-play-metrics {
  inline-size: 100%;
  justify-self: stretch;
}
.ds-play-metrics__stats { display: grid; gap: var(--ds-layout-stack-gap); }

.ds-play-stage__identity {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ds-layout-stack-gap);
}
.ds-play-stage__thumb {
  position: relative;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  overflow: hidden;
  border-radius: var(--ds-control-radius);
  background: var(--ds-color-media-placeholder);
}
.ds-play-stage__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-play-stage__thumb-fallback {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  color: var(--ds-play-supporting-ink, var(--ds-color-supporting-ink));
}
.ds-play-stage__heading {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
}
.ds-play-stage__heading > :is(h1, p) { margin: 0; }
.ds-play-stage__heading .ds-play-stage__truncate { flex: 1 1 auto; }
.ds-play-stage__copy { display: grid; gap: var(--ds-space-1); min-inline-size: 0; }
.ds-play-stage__copy > :is(h1, h2, p) { margin: 0; }
.ds-play-stage__truncate {
  overflow: hidden;
  min-inline-size: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-play-stage__puzzle { color: var(--ds-play-supporting-ink, var(--ds-color-supporting-ink)); }
.ds-play-stage__live { justify-self: start; }

.ds-play-journey__list { display: grid; gap: var(--ds-layout-cluster-gap); padding: 0; margin: 0; list-style: none; }
.ds-play-journey__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-layout-cluster-gap);
  inline-size: 100%;
  padding: var(--ds-surface-compact-inset);
  color: inherit;
  text-align: start;
  text-decoration: none;
  background: transparent;
  border: 0;
}
.ds-play-journey__form { margin: 0; }

.ds-play-hints { display: grid; gap: var(--ds-layout-cluster-gap); }
.ds-play-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-layout-cluster-gap);
  inline-size: 100%;
}
.ds-play-hint__badge { display: inline-flex; }
.ds-play-hint-consent { display: grid; gap: var(--ds-layout-stack-gap); }

.ds-play-work { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-ceremony {
  display: grid;
  justify-items: center;
  gap: var(--ds-layout-stack-gap);
  padding: var(--ds-surface-inset);
  text-align: center;
}
.ds-play-ceremony > :is(h2, p) { margin: 0; }
.ds-play-ceremony__mark {
  display: inline-flex;
  inline-size: 10.5rem;
  block-size: 10.5rem;
}
@media (max-width: 719px) {
  .ds-play-ceremony__mark {
    inline-size: 5.25rem;
    block-size: 5.25rem;
  }
}
.ds-play-ceremony__layer-stack {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.ds-play-ceremony__layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--ds-motion-fast) ease, transform var(--ds-motion-fast) ease;
}
.ds-play-ceremony__layer--base,
.ds-play-ceremony--checking .ds-play-ceremony__layer--checking,
.ds-play-ceremony--failure .ds-play-ceremony__layer--failure { opacity: 1; }
.ds-play-ceremony--success .ds-play-ceremony__layer--success,
.ds-play-ceremony--result .ds-play-ceremony__layer--success,
.ds-play-ceremony--completed .ds-play-ceremony__layer--success { opacity: 1; }
.ds-play-ceremony__layer--rotor { opacity: 1; transform-origin: center; }
.ds-play-ceremony--checking .ds-play-ceremony__layer--rotor {
  animation: ds-play-ceremony-rotor var(--ds-motion-slow) linear infinite;
  animation-duration: 3.2s;
}
.ds-play-ceremony--failure .ds-play-ceremony__layer--rotor { transform: rotate(13deg); }
.ds-play-ceremony--checking .ds-play-ceremony__layer--lock-closed,
.ds-play-ceremony--failure .ds-play-ceremony__layer--lock-closed { opacity: 1; }
.ds-play-ceremony--checking .ds-play-ceremony__layer--lock-closed { opacity: 0.38; }
.ds-play-ceremony--success .ds-play-ceremony__layer--lock-open,
.ds-play-ceremony--result .ds-play-ceremony__layer--lock-open,
.ds-play-ceremony--completed .ds-play-ceremony__layer--lock-open { opacity: 1; }
.ds-play-ceremony.is-arriving { animation: ds-play-ceremony-arrive 360ms ease-out both; }
.ds-play-ceremony__actions { display: grid; gap: var(--ds-layout-cluster-gap); inline-size: 100%; }
@media (prefers-reduced-motion: reduce) {
  .ds-play-ceremony--checking .ds-play-ceremony__layer--rotor,
  .ds-play-ceremony.is-arriving { animation: none; }
}
@keyframes ds-play-ceremony-rotor { to { transform: rotate(360deg); } }
@keyframes ds-play-ceremony-arrive {
  from { opacity: 0; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1); }
}

.ds-play-evaluator__list-rows {
  --ds-choice-option-background: var(--ds-color-control-secondary-background);
  --ds-choice-option-foreground: var(--ds-color-control-secondary-foreground);
  --ds-choice-option-border: transparent;
  --ds-choice-option-hover-background: var(--ds-color-control-secondary-hover);
  --ds-choice-option-selected-background: var(--ds-colorway-primary);
  --ds-choice-option-selected-foreground: var(--ds-color-control-primary-foreground);
  --ds-choice-option-selected-border: var(--ds-colorway-primary);
}

.ds-play-frame,
[data-ds-play-root] {
  --ds-choice-option-background: color-mix(
    in srgb,
    var(--ds-play-secondary, var(--ds-colorway-secondary)) 24%,
    var(--ds-play-base, var(--ds-color-page))
  );
  --ds-choice-option-foreground: var(--ds-play-ink, var(--ds-color-ink));
  --ds-choice-option-border: color-mix(
    in srgb,
    var(--ds-play-secondary, var(--ds-colorway-secondary)) 48%,
    transparent
  );
  --ds-choice-option-hover-background: color-mix(
    in srgb,
    var(--ds-play-secondary, var(--ds-colorway-secondary)) 34%,
    var(--ds-play-base, var(--ds-color-page))
  );
  --ds-choice-option-selected-background: var(--ds-play-primary, var(--ds-colorway-primary));
  --ds-choice-option-selected-foreground: var(--play-color-on-fill, var(--ds-color-control-primary-foreground));
  --ds-choice-option-selected-border: var(--ds-play-primary, var(--ds-colorway-primary));
}

.ds-play-evaluator__choice-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-layout-cluster-gap);
  padding: var(--ds-surface-compact-inset);
}
.ds-play-evaluator__list { display: grid; gap: var(--ds-layout-cluster-gap); }
.ds-play-evaluator__toggle-strip { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-play-evaluator__toggle.is-selected {
  color: var(--play-color-on-fill, var(--ds-color-control-primary-foreground));
  background: var(--ds-play-primary, var(--ds-colorway-primary));
}
.ds-play-evaluator__input--code { font-family: ui-monospace, Menlo, monospace; }
.ds-play-evaluator__input--prominent { font-size: 1.25em; }

.ds-play-context { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-context > :is(h2, h3, p, ul, dl, figure, hr) { margin: 0; }
.ds-play-context img { display: block; max-inline-size: 100%; }
.ds-play-context__quote { display: grid; gap: var(--ds-space-2); }
.ds-play-context__quote-text { margin: 0; }
.ds-play-review { display: grid; gap: var(--ds-layout-stack-gap); }
.ds-play-review__list { display: grid; gap: var(--ds-layout-cluster-gap); padding: 0; margin: 0; list-style: none; }
.ds-play-review__item { display: grid; gap: var(--ds-space-1); }
/* Layout the open dialog body only. Display on `.ds-play-more` itself would
   override the closed native `<dialog>` and paint Stage support on page load. */
.ds-play-more .ds-dialog__body { display: grid; gap: var(--ds-layout-cluster-gap); }