.scene-post {
  max-width: 1280px;
}

.scene-post > .endmatter::before {
  right: 0;
}

.method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  max-width: 82ch;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}

.method span,
.viewer-kicker,
.section-heading p,
.panel-note,
.viewer-status,
.transport output,
.speed-control,
.load-status,
.decoder-drawer span {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.method span,
.viewer-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.method p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Animal picker ----------------------------------------------------------- */

.animal-picker {
  margin-top: var(--s5);
}

.animal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.animal-card {
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 9px 14px;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.animal-card:hover {
  border-color: color-mix(in srgb, var(--link) 45%, var(--border));
}

.animal-card.is-selected {
  color: var(--link);
  border-color: color-mix(in srgb, var(--link) 65%, var(--border));
  background: color-mix(in srgb, var(--link) 7%, var(--panel));
}

.animal-card:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.animal-name {
  font-size: 14px;
  font-weight: 620;
}

.animal-stats {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.animal-card.is-selected .animal-stats {
  color: color-mix(in srgb, var(--link) 70%, var(--muted));
}

.scene-picker {
  margin-top: var(--s5);
}

.section-heading,
.viewer-heading,
.transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
}

.section-heading {
  align-items: end;
  margin-bottom: var(--s1);
}

.section-heading h2,
.viewer-heading h2 {
  margin: 0;
}

.section-heading p {
  margin: 5px 0 0;
}

.scene-instruction {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 16px;
}

.scene-card,
.quiet-button,
.transport button,
.transport select {
  color: var(--text);
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.scene-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}

.scene-card:hover {
  transform: translateY(-1px);
}

.scene-card:focus-visible,
.quiet-button:focus-visible,
.transport button:focus-visible,
.transport select:focus-visible,
.transport input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.scene-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 322 / 90;
  object-fit: cover;
  border-radius: 3px;
  background: #090e16;
}

.scene-card span {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-card.is-selected {
  box-shadow: none;
}

.scene-card.is-selected img {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.scene-card.is-selected span {
  color: var(--text);
  font-weight: 650;
}

.viewer {
  position: relative;
  scroll-margin-top: 12px;
  margin-top: var(--s5);
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}

.viewer-heading {
  margin-bottom: 10px;
}

.viewer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.viewer-actions .quiet-button {
  font-size: 13px;
}

.viewer-kicker {
  margin: 0 0 4px;
}

.quiet-button,
.transport button,
.transport select {
  min-height: 36px;
  padding: 7px 10px;
  cursor: pointer;
}

.quiet-button[aria-pressed="true"],
.transport button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--link) 65%, var(--border));
  color: var(--link);
  background: color-mix(in srgb, var(--link) 7%, var(--panel));
}

.viewer-status {
  display: grid;
  gap: 3px;
  margin: 0 0 9px;
}

.status-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  min-height: 18px;
}

.status-row strong {
  width: 58px;
  flex: 0 0 58px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-row span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border);
}

/* The three core panels always share a row; each optional panel adds a column.
   `data-columns` is set in app.js so one rule covers every combination. At six
   panels the row wraps into two rows of three rather than shrinking every
   canvas past the point of being readable. */
.panel-grid,
.panel-grid[data-columns="3"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panel-grid[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel-grid[data-columns="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.panel-grid[data-columns="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 901px) {
  .panel-grid[data-columns="4"] .visual-panel figcaption,
  .panel-grid[data-columns="5"] .visual-panel figcaption,
  .panel-grid[data-columns="6"] .visual-panel figcaption {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 92px;
  }

  .panel-grid[data-columns="4"] .panel-legend,
  .panel-grid[data-columns="5"] .panel-legend,
  .panel-grid[data-columns="6"] .panel-legend {
    flex-wrap: wrap;
    gap: 4px 7px;
  }
}

.visual-panel {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #090e16;
}

.visual-panel[hidden] {
  display: none;
}

.visual-panel figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
}

.visual-panel figcaption > span:first-child {
  white-space: nowrap;
}

.visual-panel canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #090e16;
}

.canvas-stage {
  position: relative;
}

#truth-canvas {
  cursor: crosshair;
  touch-action: manipulation;
}

.scene-click-hint {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(9, 14, 22, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
}

.scene-magnifier {
  position: absolute;
  z-index: 3;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 2px solid #facc15;
  border-radius: 6px;
  background: #090e16;
  box-shadow: 0 7px 20px rgba(9, 14, 22, 0.34);
  pointer-events: none;
}

.scene-magnifier[hidden] {
  display: none;
}

.scene-magnifier canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.scene-magnifier::before,
.scene-magnifier::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(34, 211, 238, 0.92);
  box-shadow: 0 0 0 1px rgba(9, 14, 22, 0.45);
  transform: translate(-50%, -50%);
}

.scene-magnifier::before {
  width: 13px;
  height: 1px;
}

.scene-magnifier::after {
  width: 1px;
  height: 13px;
}

.screen-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen-scale span,
.patch-scale-wrap > span {
  position: absolute;
  display: flex;
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.screen-scale i,
.patch-scale-wrap i {
  display: block;
  border-color: currentColor;
  filter: drop-shadow(0 1px 1px #000);
}

.screen-scale-x {
  right: 2px;
  bottom: 2px;
  left: 2px;
  align-items: center;
  justify-content: center;
}

.screen-scale-x i {
  position: absolute;
  right: 0;
  left: 0;
  height: 5px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.screen-scale-x b,
.patch-scale-x b {
  z-index: 1;
  padding: 0 4px;
  background: rgba(9, 14, 22, 0.7);
}

.screen-scale-y {
  top: 2px;
  bottom: 2px;
  left: 2px;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.screen-scale-y i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.screen-scale-y b,
.patch-scale-y b {
  z-index: 1;
  padding: 4px 0;
  background: rgba(9, 14, 22, 0.7);
}

.panel-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 500;
}

.panel-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-line {
  display: inline-block;
  width: 12px;
  height: 0;
  border-top: 2px solid;
}

.legend-hull {
  border-color: #f08a24;
}

.legend-square {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid #facc15;
}

.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 1px #090e16;
}

.decoder-drawer {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.decoder-drawer[hidden] {
  display: none;
}

.decoder-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.decoder-heading p {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 650;
}

.decoder-flow {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto minmax(145px, 170px) auto 132px 132px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.decoder-flow figure {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.decoder-flow figcaption {
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.raster-figure canvas,
.patch-figure canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.raster-figure canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
  background: #f8fafc;
}

.raster-plot {
  position: relative;
  padding-left: 36px;
}

.raster-cell-scale {
  position: absolute;
  top: 0;
  bottom: 15px;
  left: 0;
  display: flex;
  width: 31px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 9px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.raster-cell-scale i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.raster-cell-scale b {
  position: relative;
  padding: 3px 0;
  background: var(--panel);
  font-weight: 550;
}

.raster-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}

.raster-axis i {
  font-size: 9px;
  font-style: normal;
}

.network-box {
  display: grid;
  align-content: center;
  min-height: 94px;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--text);
  border-radius: 5px;
  color: var(--text);
  font-size: 9px;
  text-align: left;
}

.network-box strong {
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.network-box span {
  display: grid;
  gap: 1px;
  color: var(--muted);
  line-height: 1.25;
}

.network-box small {
  color: var(--faint);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-arrow {
  color: var(--faint);
  font-size: 18px;
}

.patch-figure canvas {
  width: 112px;
  height: 112px;
  background: #808080;
  image-rendering: pixelated;
}

.patch-scale-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.patch-scale-placeholder {
  pointer-events: none;
}

.patch-scale-wrap > span {
  color: var(--muted);
  text-shadow: none;
}

.patch-scale-wrap > span b {
  background: var(--panel);
}

.patch-scale-x {
  right: 0;
  bottom: 1px;
  left: 20px;
  align-items: center;
  justify-content: center;
}

.patch-scale-x i {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.patch-scale-y {
  top: 0;
  bottom: 20px;
  left: 1px;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.patch-scale-y i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.patch-scale-wrap canvas {
  position: absolute;
  top: 0;
  right: 0;
}

.transport {
  margin-top: 6px;
}

.keyboard-hint {
  margin: 2px 0 9px;
  padding: 0;
  list-style: none;
  counter-reset: interaction-hint;
  color: var(--faint);
  font-size: 10px;
  text-align: left;
}

.keyboard-hint > li {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 5px;
  counter-increment: interaction-hint;
}

.keyboard-hint > li::before {
  content: counter(interaction-hint);
  display: inline-grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 9px;
}

.keyboard-instruction {
  margin-top: 4px;
}

.keyboard-hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-right: 3px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
}

.scrubber {
  display: flex;
  flex: 1;
}

.scrubber input {
  width: 100%;
  accent-color: var(--link);
}

.transport output {
  display: grid;
  min-width: 126px;
  gap: 2px;
  text-align: right;
}

/* [hidden] loses to the explicit display below, so restate it. */
.transport output span[hidden] {
  display: none;
}

.transport output span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 7px;
}

.transport output small {
  color: var(--faint);
  font: inherit;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.transport output b {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speed-control select {
  font-size: 13px;
}

.load-status {
  position: absolute;
  inset: 102px 16px 65px;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(6px);
}

.replay-source {
  position: fixed;
  left: -2px;
  bottom: -2px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.viewer:not([aria-busy="true"]) .load-status {
  display: none;
}

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

@media (max-width: 900px) {
  .scene-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .visual-panel figcaption:has(.panel-legend) {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-legend {
    flex-wrap: nowrap;
  }

  .decoder-flow {
    grid-template-columns: minmax(240px, 1fr) auto 140px auto 125px 125px;
    gap: 7px;
  }

  .panel-grid,
  .panel-grid[data-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .panel-grid,
  .panel-grid[data-columns] {
    grid-template-columns: 1fr;
  }

  .transport {
    flex-wrap: wrap;
  }

  .scrubber {
    order: 3;
    flex-basis: 100%;
  }

  .decoder-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .keyboard-hint {
    text-align: left;
  }

  .decoder-flow {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
  }

  .raster-figure {
    width: 100%;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

}

@media (max-width: 460px) {
  .scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .method {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .viewer-heading {
    align-items: flex-start;
  }

  .viewer-actions {
    max-width: 150px;
  }

  .quiet-button {
    max-width: 116px;
    line-height: 1.2;
  }

  .panel-legend {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-card {
    transition: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .keyboard-instruction {
    display: none;
  }
}

/* Reconstruction fidelity ------------------------------------------------- */

/* A column peer of the image panels. The plot is a 1280x720 canvas like the
   others, so `.visual-panel canvas` already handles all the scaling. */
.fidelity-panel {
  /* The same dark plate as the image panels; the plot is always drawn on it,
     so these do not change with the page theme. */
  --fidelity-surface: #090e16;
  --fidelity-posterior: #3987e5;
  --fidelity-evidence: #d95926;
  --fidelity-grid: rgba(255, 255, 255, 0.14);
  --fidelity-axis: rgba(255, 255, 255, 0.34);
  --fidelity-ink: rgba(255, 255, 255, 0.94);
  --fidelity-label: rgba(255, 255, 255, 0.9);
  --fidelity-muted: rgba(255, 255, 255, 0.74);
}

#fidelity-canvas {
  background: var(--fidelity-surface);
  cursor: crosshair;
  touch-action: manipulation;
}

.legend-posterior {
  width: 12px;
  border-color: var(--fidelity-posterior);
}

.legend-evidence {
  width: 12px;
  border-top-style: dashed;
  border-color: var(--fidelity-evidence);
}

/* Two explicit rows -- title with the selector beside it, legend below -- so
   the selector can never collide with the legend or change the panel height. */
.visual-panel.fidelity-panel figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
}

/* Grid items refuse to shrink below min-content by default, which pushed the
   caption wider than its column. */
.visual-panel.fidelity-panel figcaption > * {
  min-width: 0;
}

.visual-panel.fidelity-panel figcaption > span:first-child {
  white-space: normal;
}

.fidelity-metric {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.fidelity-legend {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 2px 7px;
}

.fidelity-metric select {
  min-height: 15px;
  max-width: 100%;
  padding: 0 1px;
  color: var(--text);
  font: inherit;
  font-size: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

/* Langevin sampling ------------------------------------------------------- */

/* A column peer of the image panels: the sample is drawn on the same
   1280x720 canvas, so `.visual-panel canvas` handles all the scaling. */
#langevin-canvas {
  background: #090e16;
}

.langevin-legend {
  font-variant-numeric: tabular-nums;
}

.langevin-readout {
  margin-top: 8px;
}

.langevin-readout[hidden] {
  display: none;
}

.langevin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.langevin-controls .quiet-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.langevin-slider {
  display: flex;
  flex: 1 1 150px;
  min-width: 128px;
  max-width: 240px;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

.langevin-slider input {
  width: 100%;
  min-width: 0;
  accent-color: var(--link);
}

.langevin-slider b,
.langevin-meter b {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.langevin-meter {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

.langevin-meter small {
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .langevin-slider {
    max-width: none;
  }

  .langevin-meter {
    margin-left: 0;
  }
}

/* Rebuild-in-progress panels ---------------------------------------------- */

/* Same treatment as the scene loading screen: the panel stays visible but is
   plainly marked as not yet rebuilt, so nothing stale is mistaken for current. */
.panel-pending {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  background: color-mix(in srgb, #090e16 82%, transparent);
  backdrop-filter: blur(3px);
}

.panel-pending[hidden] {
  display: none;
}

.panel-pending b {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 620;
}

.drawer-pending {
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
}

.decoder-drawer {
  position: relative;
}

.transport-pending {
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}

.transport-pending[hidden] {
  display: none;
}

/* Scene loading progress -------------------------------------------------- */

.load-state {
  display: flex;
  align-items: center;
  gap: 10px;
}

.load-progress {
  flex: 1;
  max-width: 260px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.load-progress[hidden] {
  display: none;
}

.load-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--link);
  transition: width 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .load-progress-bar {
    transition: none;
  }
}

/* Restricted scenes -------------------------------------------------------- */

.scene-card.is-locked {
  cursor: not-allowed;
}

.scene-card.is-locked img {
  filter: grayscale(1) contrast(0.35) brightness(0.55);
}

.locked-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 322 / 90;
  border-radius: 3px;
  background: repeating-linear-gradient(
    135deg,
    #12161f,
    #12161f 6px,
    #0b0f17 6px,
    #0b0f17 12px
  );
}

.locked-tile svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.66);
  stroke-width: 1.8;
}

.scene-card.is-locked span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scene-card.is-locked span::after {
  content: "Locked";
  padding: 0 4px;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.unlock-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.unlock-dialog {
  max-width: 420px;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.unlock-dialog::backdrop {
  background: rgba(9, 14, 22, 0.55);
}

.unlock-dialog form {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.unlock-dialog h3 {
  margin: 0;
  font-size: 15px;
}

.unlock-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.unlock-field {
  display: grid;
  gap: 4px;
}

.unlock-field span {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unlock-field input {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--text);
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.unlock-error {
  color: #d03b3b;
  font-size: 12px;
}

.unlock-error[hidden] {
  display: none;
}

.unlock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}