html,
body {
  max-width: 100%;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    min-width: 0;
    min-height: 100svh;
    overflow-y: auto !important;
    padding-bottom: 76px;
  }

  canvas,
  .stage,
  .grain,
  .codex-strange-backdrop,
  .codex-strange-canvas {
    max-width: 100vw;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 14px 8px !important;
    text-align: left !important;
  }

  .topbar > div {
    min-width: 0;
    text-align: left !important;
  }

  .topbar h1,
  h1 {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    font-size: 42px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .eyebrow,
  .room-kicker,
  .pane-label,
  .trace-list strong {
    letter-spacing: 0.1em !important;
  }

  .brand,
  .backlink,
  .topnav a,
  .wing-link,
  .directorate-link {
    display: inline-flex !important;
    min-height: 42px !important;
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .topnav,
  .top-actions {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .topnav a,
  .top-actions > *,
  .topbar > .backlink {
    flex: 1 1 auto;
  }

  .room,
  .entrance,
  .salon,
  .directorate,
  .wing {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px 14px 96px !important;
  }

  .room > *,
  .entrance > *,
  .salon > *,
  .directorate > *,
  .wing > * {
    min-width: 0;
    max-width: 100%;
  }

  .hero,
  .wall-text {
    max-width: 100% !important;
    min-height: auto !important;
    padding: 24px 0 14px !important;
  }

  .rendering,
  .docent,
  .assembly,
  .thesis,
  .voice,
  .installation,
  .accession,
  .receipt,
  .studio-labor,
  .provenance-anchor,
  .control-dock,
  .ledger,
  .table,
  .motion-table,
  .governance-covenant,
  .open-questions,
  .directives,
  .studio-keys,
  .archive-ritual,
  .dream-stage,
  .dream-controls,
  .dream-receipt,
  .dream-catalogue,
  .trace-panel,
  .catalogue,
  .ritual,
  section[data-tender] {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 14px !important;
  }

  .rendering h2,
  .docent h2,
  .assembly h2,
  .thesis h2,
  .voice h2,
  .wall-text h2,
  .hero h2,
  .dream-title,
  .room-card h2,
  .wing-cards h2 {
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  .hero-copy,
  .voice p,
  .assembly p,
  .thesis p,
  .docent p,
  .wall-line,
  .reason {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .rooms,
  .wing-cards,
  .columns,
  .labels,
  .authority-strip,
  .score-grid,
  .catalogue,
  .minutes,
  .transcript,
  .compact-grid,
  .labor-grid,
  .privacy-note,
  .governance-compact,
  .rituals,
  .score-actions,
  .memory-mode,
  .docent-tools,
  .question-list,
  .motion-list,
  .directive-list,
  .key-list,
  .archive-list,
  .shell-body,
  .section-head,
  .input-row,
  .provenance-field,
  .vigil-controls,
  .apology-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-head,
  .docent-head,
  .ledger-head,
  .dock-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .segmented,
  .signal-picker,
  .memory-mode {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .segmented button,
  .signal-picker button,
  .memory-mode button,
  .rituals button,
  .score-grid button,
  .docent-tools button,
  .minor-button,
  .labor-button,
  .rollback-button,
  .icon-button {
    min-height: 44px !important;
  }

  input,
  textarea,
  select {
    max-width: 100%;
    font-size: 16px !important;
  }

  textarea {
    min-height: 120px;
  }

  .ledger {
    max-height: none !important;
    overflow: visible !important;
  }

  #ledgerList {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #ledgerList li,
  .trace-list li,
  .room-card,
  .wing-cards a,
  .catalogue article,
  .minutes article,
  .transcript article {
    min-height: 0 !important;
  }

  .pane,
  .chamber,
  .artifact,
  .seam-stage,
  .dream-canvas-wrap,
  .shell-map {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .chamber {
    min-height: 0 !important;
  }

  .glyph {
    font-size: 44px !important;
  }

  .target-pane .arriving,
  .target-pane .arriving[lang="zh"] {
    font-size: 30px !important;
    overflow-wrap: anywhere;
  }

  .wall-text::after {
    right: 0 !important;
    bottom: 0 !important;
    max-width: 100% !important;
  }

  .statement-panel,
  .vestibule {
    padding: 12px !important;
    place-items: stretch !important;
  }

  .statement-sheet,
  .vestibule-card {
    width: 100% !important;
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
  }

  .statement-grid,
  .consent-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .salon-foundation {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 12px 14px 16px !important;
  }

  .salon-foundation__panel {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    max-height: 68svh !important;
  }

  .copy-vote {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: 34svh;
    overflow: auto;
  }

  .copy-vote strong {
    font-size: 22px !important;
  }

  .copy-vote__scrap {
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
  }

  .codex-score-toggle {
    right: 10px !important;
    bottom: 10px !important;
    min-height: 42px !important;
    padding: 8px !important;
  }

  .codex-score-toggle strong {
    max-width: 72px !important;
  }

  .spatial-weather {
    right: 10px !important;
    bottom: 62px !important;
    left: 10px !important;
    width: auto !important;
  }

  body.law-active {
    padding-top: 58px !important;
  }

  .remainder-law {
    align-items: flex-start;
    font-size: 11px !important;
    line-height: 1.35;
    text-transform: none !important;
  }

  .wing > section {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  .chart-strip {
    justify-content: flex-start !important;
    width: auto !important;
    margin: 8px 14px 0 !important;
  }
}

@media (max-width: 420px) {
  body {
    padding-bottom: 68px;
  }

  .topbar h1,
  h1 {
    font-size: 36px !important;
  }

  .rendering h2,
  .docent h2,
  .assembly h2,
  .thesis h2,
  .voice h2,
  .wall-text h2,
  .hero h2,
  .dream-title,
  .room-card h2,
  .wing-cards h2 {
    font-size: 30px !important;
  }

  .segmented,
  .signal-picker,
  .memory-mode {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .codex-score-toggle strong {
    max-width: 0 !important;
    opacity: 0;
  }

  .copy-vote__copies {
    display: none;
  }
}