.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#door-sitting {
  --ds-paper: var(--os-ground);
  --ds-ink: var(--os-fam-text, var(--os-ink));
  --ds-muted: var(--os-fam-muted, var(--os-muted));
  --ds-accent: var(--os-fam-accent, var(--os-green));
  --ds-rule: var(--os-fam-border, var(--os-rule));
  scroll-margin-top: calc(var(--os-space-unit) * 4);
  min-width: 0;
}

.ds-section-title {
  margin: 0 0 calc(var(--os-space-unit) * 6);
  font-size: var(--la-title);
  letter-spacing: -0.04em;
}

#doors .tile-pick,
#scene .tile-pick {
  margin: 0 calc(var(--os-space-unit) * 3) calc(var(--os-space-unit) * 3);
}

#door-sitting-pack,
.ds-bench,
.ds-stations,
.ds-station,
.ds-card,
.ds-cluster {
  min-width: 0;
}

.ds-bench {
  display: grid;
  gap: calc(var(--os-space-unit) * 6);
  color: var(--ds-ink);
  font-family: var(--os-font-body);
}

.ds-blocked {
  padding: calc(var(--os-space-unit) * 6);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-md);
  background: var(--ds-paper);
}

.ds-door-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--os-space-unit) * 48), 0.7fr);
  gap: calc(var(--os-space-unit) * 6);
  padding: calc(var(--os-space-unit) * 6);
  border-radius: var(--os-radius-lg);
  background: var(--os-ground-void);
  color: var(--os-ground);
  box-shadow: var(--os-press-shadow-out);
  overflow: clip;
}

.ds-head-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: calc(var(--os-space-unit) * 3);
}

.ds-overline,
.ds-label,
.ds-chip,
.ds-fact-strip,
.ds-heartbeat,
.ds-register-foot,
.ds-req-line,
.ds-source-stamp,
.ds-result,
.ds-table-meta {
  font-family: var(--os-font-mono);
  font-size: var(--la-label);
  letter-spacing: 0.04em;
}

.ds-overline,
.ds-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ds-door-head h3 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(var(--la-title), 5vw, var(--os-type-display-size));
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.ds-head-note,
.ds-copy,
.ds-honesty,
.ds-gap,
.ds-receipt-copy,
.ds-deploy-reason,
.ds-defect-copy {
  margin: 0;
  font-family: var(--os-font-body);
  font-size: var(--la-meta);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ds-hex-tail::before {
  content: "7a3e";
}

.ds-head-note {
  color: color-mix(in oklab, var(--os-ground) 72%, var(--os-ground-void));
}

.ds-silhouette {
  position: relative;
  min-height: calc(var(--os-space-unit) * 44);
  color: var(--ds-accent);
  align-self: stretch;
}

.ds-silhouette svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(calc(var(--os-space-unit) * -2));
  opacity: 0.62;
  transition:
    transform var(--ss-silk-duration) var(--ss-silk-easing),
    opacity var(--ss-silk-duration) var(--ss-silk-easing);
}

.ds-door-head[data-settled] .ds-silhouette svg {
  transform: none;
  opacity: 1;
}

.ds-silhouette :is(rect, path) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.ds-head-chips,
.ds-chip-row,
.ds-mark-actions,
.ds-motion-choices,
.ds-template-picks,
.ds-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 2);
  min-width: 0;
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--os-space-unit) * 7);
  max-width: 100%;
  padding: calc(var(--os-space-unit) * 1) calc(var(--os-space-unit) * 2);
  border: 1px solid currentColor;
  border-radius: var(--os-radius-pill);
  color: var(--ds-muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ds-door-head .ds-chip {
  color: color-mix(in oklab, var(--os-ground) 76%, var(--os-ground-void));
}

.ds-chip[data-tone="danger"] {
  color: var(--os-status-danger);
}

.ds-chip[data-tone="success"] {
  color: var(--os-status-success);
}

.ds-chip[data-tone="warning"] {
  color: var(--os-status-warning);
}

.ds-chip[data-receipt] {
  color: var(--os-muted);
}

.ds-facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-facts a {
  color: color-mix(in oklab, var(--os-ground) 78%, var(--os-ground-void));
  text-underline-offset: calc(var(--os-space-unit) * 1);
  overflow-wrap: anywhere;
}

.ds-heartbeat {
  margin: 0;
  color: color-mix(in oklab, var(--os-ground) 68%, var(--os-ground-void));
  overflow-wrap: anywhere;
}

.ds-asleep {
  margin: 0;
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
  border-left: calc(var(--os-space-unit) * 0.5) solid var(--os-status-warning);
  color: var(--os-ground);
  font-size: var(--la-meta);
}

.ds-rail-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
}

.ds-rail {
  --ds-fill: 0%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--os-space-unit) * 2);
  margin: 0;
  padding: calc(var(--os-space-unit) * 3) 0 0;
  list-style: none;
}

.ds-rail::before,
.ds-rail::after {
  content: "";
  position: absolute;
  top: calc(var(--os-space-unit) * 1);
  left: 0;
  height: calc(var(--os-space-unit) * 0.5);
  border-radius: var(--os-radius-pill);
}

.ds-rail::before {
  width: 100%;
  background: color-mix(in oklab, var(--os-ground) 24%, var(--os-ground-void));
}

.ds-rail::after {
  width: var(--ds-fill);
  background: var(--ds-accent);
}

.ds-rail li {
  min-width: 0;
  font-family: var(--os-font-mono);
  font-size: var(--la-label);
  color: color-mix(in oklab, var(--os-ground) 64%, var(--os-ground-void));
  overflow-wrap: anywhere;
}

.ds-rail li[data-reached] {
  color: var(--os-ground);
}

.ds-rail-status {
  margin: 0;
  font-size: var(--la-meta);
  color: color-mix(in oklab, var(--os-ground) 74%, var(--os-ground-void));
}

.ds-bench-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--os-space-unit) * 3);
}

.ds-register-foot {
  margin: 0;
  color: var(--ds-muted);
  overflow-wrap: anywhere;
}

.ds-button,
.ds-choice,
.ds-copy-button,
.ds-eye-toggle {
  min-height: calc(var(--os-space-unit) * 11);
  max-width: 100%;
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-sm);
  background: var(--ds-paper);
  color: var(--ds-ink);
  font: inherit;
  font-size: var(--la-meta);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.ds-button[data-primary] {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--os-ground);
}

.ds-button:disabled {
  cursor: not-allowed;
  opacity: var(--os-press-disabled-opacity);
}

.ds-stations {
  display: grid;
  gap: calc(var(--os-space-unit) * 8);
}

.ds-station {
  display: grid;
  gap: calc(var(--os-space-unit) * 4);
  scroll-margin-top: calc(var(--os-space-unit) * 56);
}

.ds-station-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--os-space-unit) * 3);
}

.ds-station-number {
  display: grid;
  place-items: center;
  width: calc(var(--os-space-unit) * 9);
  height: calc(var(--os-space-unit) * 9);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-sm);
  font-family: var(--os-font-mono);
  font-size: var(--la-label);
}

.ds-station-head h3,
.ds-card h4,
.ds-cluster h5 {
  margin: 0;
  color: var(--ds-ink);
  font-family: var(--os-font-body);
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.ds-station-head h3 {
  font-size: var(--la-title);
}

.ds-station-head p {
  margin: calc(var(--os-space-unit) * 1) 0 0;
  color: var(--ds-muted);
  font-size: var(--la-meta);
}

.ds-card,
.ds-cluster {
  display: grid;
  gap: calc(var(--os-space-unit) * 3);
  padding: calc(var(--os-space-unit) * 4);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-md);
  background: var(--ds-paper);
}

.ds-card h4 {
  font-size: var(--la-body);
}

.ds-cluster h5 {
  font-size: var(--la-meta);
}

.ds-generate-grid {
  display: grid;
  gap: calc(var(--os-space-unit) * 4);
}

.ds-direction-grid,
.ds-type-grid,
.ds-mark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--os-space-unit) * 2);
}

.ds-choice {
  display: grid;
  align-content: start;
  gap: calc(var(--os-space-unit) * 1);
  text-align: left;
}

.ds-choice[aria-pressed="true"] {
  background: color-mix(in oklab, var(--ds-accent) 12%, var(--ds-paper));
  border-color: var(--ds-accent);
}

.ds-choice strong {
  font-size: var(--la-meta);
  font-weight: 700;
}

.ds-choice small {
  color: var(--ds-muted);
  font-size: var(--la-label);
}

.ds-type-grid .ds-choice {
  min-height: calc(var(--os-space-unit) * 18);
}

.ds-ramp {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
}

.ds-ramp button {
  min-width: 0;
  min-height: calc(var(--os-space-unit) * 12);
  padding: 0;
  border: 1px solid var(--ds-rule);
  background: var(--ds-ramp-color);
  cursor: pointer;
}

.ds-ramp button[aria-pressed="true"] {
  outline: var(--os-focus-ring-width) solid var(--ds-ink);
  outline-offset: calc(var(--os-space-unit) * -1);
}

.ds-contrast-list,
.ds-advisory-list,
.ds-queue-list,
.ds-receipt-list {
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-contrast-list li,
.ds-advisory-list li,
.ds-queue-list li,
.ds-receipt-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--os-space-unit) * 2);
  padding-top: calc(var(--os-space-unit) * 2);
  border-top: 1px solid var(--ds-rule);
  font-size: var(--la-meta);
}

.ds-motion-demo {
  position: relative;
  min-height: calc(var(--os-space-unit) * 20);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-sm);
  overflow: clip;
}

.ds-motion-demo span {
  position: absolute;
  top: 50%;
  left: calc(var(--os-space-unit) * 3);
  width: calc(var(--os-space-unit) * 8);
  height: calc(var(--os-space-unit) * 8);
  border-radius: var(--os-radius-sm);
  background: var(--ds-accent);
  transform: translateY(-50%);
  transition: transform var(--ss-duration) var(--ss-easing);
}

.ds-motion-demo[data-run] span {
  transform: translate3d(calc(var(--os-space-unit) * 20), -50%, 0);
}

.ds-motion-demo[data-reduced] span {
  transition: none;
  transform: translate3d(calc(var(--os-space-unit) * 3), -50%, 0);
}

.ds-reduced-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--os-space-unit) * 2);
  font-size: var(--la-meta);
}

.ds-mark {
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
  min-width: 0;
  padding: calc(var(--os-space-unit) * 2);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-sm);
  background: var(--ds-paper);
  color: var(--ds-ink);
  text-align: left;
  cursor: pointer;
}

.ds-mark img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--os-radius-sm);
  background: var(--os-ground-void);
}

.ds-mark[aria-pressed="true"] {
  border-color: var(--ds-accent);
}

.ds-mark strong,
.ds-mark span {
  overflow-wrap: anywhere;
}

.ds-mark strong {
  font-size: var(--la-meta);
}

.ds-mark span {
  color: var(--ds-muted);
  font-size: var(--la-label);
}

.ds-line-card {
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
  min-width: 0;
  padding: calc(var(--os-space-unit) * 3);
  border: 1px dashed var(--ds-rule);
  border-radius: var(--os-radius-sm);
}

.ds-req-line {
  display: block;
  min-width: 0;
  margin: 0;
  padding-left: calc(var(--os-space-unit) * 4);
  text-indent: calc(var(--os-space-unit) * -4);
  color: var(--ds-ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ds-copy-button {
  justify-self: start;
}

.ds-defect {
  border-left: calc(var(--os-space-unit) * 0.5) solid var(--os-status-danger);
}

.ds-defect .ds-chip {
  color: var(--os-status-danger);
}

.ds-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--os-space-unit) * 4);
}

.ds-template-card {
  display: grid;
  gap: calc(var(--os-space-unit) * 3);
  min-width: 0;
}

.ds-frame-row {
  display: grid;
  grid-template-columns: minmax(0, 390fr) minmax(0, 480fr);
  gap: calc(var(--os-space-unit) * 2);
  align-items: start;
}

.ds-frame {
  display: grid;
  gap: calc(var(--os-space-unit) * 1);
  min-width: 0;
  margin: 0;
}

.ds-frame figcaption {
  color: var(--ds-muted);
  font-size: var(--la-label);
}

.ds-frame iframe {
  display: block;
  width: 100%;
  height: calc(var(--os-space-unit) * 92);
  border: 1px solid var(--ds-rule);
  border-radius: var(--os-radius-sm);
  background: var(--ds-paper);
}

.ds-source-stamp {
  margin: 0;
  color: var(--ds-muted);
  overflow-wrap: anywhere;
}

.ds-verify-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--os-space-unit) * 4);
}

.ds-advisory-list li {
  align-items: center;
}

.ds-result {
  color: var(--ds-muted);
}

.ds-result[data-result="pass"] {
  color: var(--os-status-success);
}

.ds-result[data-result="fail"] {
  color: var(--os-status-danger);
}

.ds-receipt-slot {
  border-color: var(--ds-rule);
}

.ds-receipt-tile {
  color: var(--os-muted);
  border-color: var(--os-gold);
}

.ds-live-card {
  border-color: var(--os-status-success);
}

.ds-deploy-reason {
  color: var(--os-status-danger);
}

.ds-optional[hidden] {
  display: none;
}

.dt-page {
  min-height: 100%;
  margin: 0;
  background: var(--os-ground);
  color: var(--os-fam-text, var(--os-ink));
  font-family: var(--os-font-body);
  font-size: var(--la-body, 16px);
  line-height: 1.5;
}

.dt-page *,
.dt-page *::before,
.dt-page *::after {
  box-sizing: border-box;
}

.dt-hero,
.dt-evidence-head {
  display: grid;
  gap: calc(var(--os-space-unit) * 3);
  padding: calc(var(--os-space-unit) * 6);
  background: var(--os-ground-void);
  color: var(--os-ground);
}

.dt-hero h1,
.dt-evidence-head h1 {
  margin: 0;
  max-width: 10ch;
  font-size: var(--os-type-display-size);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.dt-label,
.dt-picks {
  margin: 0;
  font-family: var(--os-font-mono);
  font-size: var(--os-type-label-size);
  overflow-wrap: anywhere;
}

.dt-copy {
  margin: 0;
  max-width: 48ch;
  font-family: var(--os-font-body);
  font-size: var(--os-type-body-size);
}

.dt-evidence {
  display: grid;
  gap: calc(var(--os-space-unit) * 4);
  padding: calc(var(--os-space-unit) * 5);
}

.dt-evidence h2 {
  margin: 0;
  font-size: var(--os-type-title-size);
}

.dt-controls {
  display: grid;
  gap: calc(var(--os-space-unit) * 3);
}

.dt-search,
.dt-check {
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
  font-size: var(--os-type-meta-size);
}

.dt-search input {
  width: 100%;
  min-height: calc(var(--os-space-unit) * 11);
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
  border: 1px solid var(--os-fam-border, var(--os-rule));
  border-radius: var(--os-radius-sm);
  background: var(--os-ground);
  color: var(--os-ink);
  font: inherit;
}

.dt-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.dt-check input {
  width: calc(var(--os-space-unit) * 5);
  height: calc(var(--os-space-unit) * 5);
  accent-color: var(--os-fam-accent, var(--os-green));
}

.dt-evidence table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dt-evidence caption,
.dt-evidence th {
  padding: calc(var(--os-space-unit) * 2);
  color: var(--os-fam-muted, var(--os-muted));
  font-family: var(--os-font-mono);
  font-size: var(--os-type-label-size);
  text-align: left;
  overflow-wrap: anywhere;
}

.dt-evidence th {
  border-bottom: 1px solid var(--os-fam-border, var(--os-rule));
}

.dt-gap {
  margin: 0;
  padding: calc(var(--os-space-unit) * 4);
  border: 1px dashed var(--os-fam-border, var(--os-rule));
  border-radius: var(--os-radius-sm);
  font-family: var(--os-font-body);
  font-size: var(--os-type-meta-size);
}

.dt-evidence-first {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

html[data-night="1"] #door-sitting .ds-bench {
  --ds-paper: var(--os-ground-void);
  --ds-ink: var(--os-ground);
  --ds-muted: color-mix(in oklab, var(--os-ground) 64%, var(--os-ground-void));
  --ds-rule: color-mix(in oklab, var(--os-ground) 18%, var(--os-ground-void));
}

html[data-night="1"] #door-sitting .ds-button,
html[data-night="1"] #door-sitting .ds-choice,
html[data-night="1"] #door-sitting .ds-copy-button,
html[data-night="1"] #door-sitting .ds-eye-toggle,
html[data-night="1"] #door-sitting .ds-mark {
  background: var(--os-ground-void);
  color: var(--os-ground);
}

html[data-reduced="1"] #door-sitting *,
html[data-reduced="1"] #door-sitting *::before,
html[data-reduced="1"] #door-sitting *::after {
  animation: none !important;
  transition: none !important;
}

html[data-reduced="1"] #door-sitting .ds-silhouette svg {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #door-sitting *,
  #door-sitting *::before,
  #door-sitting *::after {
    animation: none !important;
    transition: none !important;
  }

  #door-sitting .ds-silhouette svg {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .ds-door-head,
  .ds-preview-grid,
  .ds-verify-split {
    grid-template-columns: 1fr;
  }

  .ds-direction-grid,
  .ds-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-door-head {
    position: relative;
  }
}

@media (max-width: 390px) {
  #door-sitting {
    width: calc(100% + var(--os-space-unit) * 6);
    margin-inline: calc(var(--os-space-unit) * -3);
  }

  .ds-section-title,
  .ds-station-head,
  .ds-register-foot,
  .ds-bench-tools {
    padding-inline: calc(var(--os-space-unit) * 3);
  }

  .ds-bench {
    gap: calc(var(--os-space-unit) * 5);
  }

  .ds-door-head,
  .ds-card,
  .ds-cluster {
    border-radius: 0;
    padding-inline: calc(var(--os-space-unit) * 3);
  }

  .ds-rail li {
    color: transparent;
    min-height: calc(var(--os-space-unit) * 3);
    position: relative;
  }

  .ds-rail li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--os-space-unit) * 3);
    height: calc(var(--os-space-unit) * 3);
    border: 1px solid var(--os-ground);
    border-radius: var(--os-radius-pill);
    transform: translateX(-50%);
  }

  .ds-rail li[data-reached]::before {
    background: var(--ds-accent);
  }

  .ds-direction-grid,
  .ds-type-grid,
  .ds-mark-grid {
    grid-template-columns: 1fr;
  }

  .ds-frame-row {
    grid-template-columns: 1fr;
  }

  .ds-frame[data-size="390"] iframe {
    aspect-ratio: 390 / 844;
    height: auto;
  }

  .ds-frame[data-size="1440"] iframe {
    height: calc(var(--os-space-unit) * 44);
    transform-origin: top left;
  }

  .ds-ramp button {
    min-height: calc(var(--os-space-unit) * 10);
  }

  .dt-evidence-first {
    grid-template-columns: 1fr;
  }
}