/* Rohrpost, the making of. The game's own look: cream plan paper, brown ink, stamp red, brass, walnut, and navy for 1929. */

@font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans.ttf') format('truetype'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --paper: #f3e7cd;
  --paper-deep: #e7d6b2;
  --paper-edge: #d8c194;
  --card: #fbf3df;
  --ink: #2b1e14;
  --ink-soft: #5b4633;
  --red: #a8291c;
  --red-deep: #7d1b12;
  --brass-hi: #fbe7a4;
  --brass: #d4a24c;
  --brass-mid: #b07f2c;
  --brass-lo: #6e4a14;
  --copper: #b8673a;
  --navy: #17233f;
  --navy-deep: #0d1529;
  --stamp-blue: #24366b;
  --teal: #2c7c72;
  --wood: #5a2f17;
  --wood-lo: #3a1c0c;
  --gold: #d9b45a;
  --gold-hi: #f7e4a1;
  --serif: 'EB Garamond', Georgia, serif;
  --old: 'Old Standard TT', 'EB Garamond', Georgia, serif;
  --deco: 'Josefin Sans', 'Atkinson Hyperlegible', sans-serif;
  --sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --mono: 'DejaVu Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --brass-grad: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 38%, var(--brass-mid) 62%, var(--brass-lo) 100%);
  --wood-grad: linear-gradient(180deg, #6b3a1e 0%, var(--wood) 45%, var(--wood-lo) 100%);
  --shadow: 0 18px 40px rgba(40, 20, 5, 0.22), 0 3px 8px rgba(40, 20, 5, 0.18);
  --wrap: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  overflow-x: hidden;
}
/* the plan of Berlin, faintly, under everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(243, 231, 205, 0) 0%, rgba(216, 193, 148, 0.35) 100%),
    url('../img/maps/1905.jpg') center / cover no-repeat;
  opacity: 0.16;
  filter: sepia(0.6) contrast(0.9);
  pointer-events: none;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: var(--red); }
a:hover { color: var(--red-deep); }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--old); font-weight: 700; line-height: 1.12; margin: 0; }
mark { background: none; color: inherit; box-shadow: inset 0 -0.42em 0 rgba(168, 41, 28, 0.16); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 20px;
  background: var(--wood-grad);
  border-bottom: 3px solid var(--brass-mid);
  box-shadow: 0 4px 16px rgba(30, 14, 4, 0.35);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--old);
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--brass-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand em { font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: 0.04em; }
.brand-cap {
  width: 30px; height: 12px; border-radius: 6px; flex: none;
  background: linear-gradient(90deg, var(--stamp-blue) 0 22%, rgba(220, 235, 245, 0.85) 22% 78%, var(--stamp-blue) 78%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 0 0 1.5px var(--brass);
}
.nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-family: var(--deco);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f1dfb8;
  text-decoration: none;
  padding: 10px 10px 8px;
  white-space: nowrap;
  border-radius: 4px;
}
.nav-links a:hover { color: var(--brass-hi); background: rgba(255, 230, 170, 0.08); }
.nav-play {
  font-family: var(--deco); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff8e8; text-decoration: none; background: var(--red); padding: 9px 16px 7px; border-radius: 99px;
  box-shadow: 0 0 0 2px var(--brass), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.nav-play:hover { background: #bd3324; color: #fff; }

/* ---------------------------------------------------------------- buttons */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--deco);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8e8;
  background: radial-gradient(circle at 50% 30%, #c43a29 0%, var(--red) 60%, var(--red-deep) 100%);
  padding: 13px 26px 11px;
  border-radius: 99px;
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px var(--brass-lo), 0 8px 18px rgba(80, 20, 5, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.15s, filter 0.15s;
}
.btn-play::before { content: ''; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-top: -2px; }
.btn-play:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.btn-play.big { font-size: 20px; padding: 18px 38px 15px; }
.btn-play.small { font-size: 12px; padding: 9px 16px 7px; box-shadow: 0 0 0 2px var(--brass), 0 0 0 3.5px var(--brass-lo), 0 4px 10px rgba(80, 20, 5, 0.25); }
.btn-play.small::before { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
.round-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--brass-grad); color: var(--wood-lo); font-size: 24px; line-height: 1; padding-bottom: 3px;
  box-shadow: 0 2px 6px rgba(60, 30, 5, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.round-btn:hover { filter: brightness(1.08); }
.text-btn {
  border: 0; cursor: pointer; font-family: var(--deco); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 11px 18px 9px; border-radius: 99px;
}
.text-btn:hover { background: var(--wood); }

/* stamps, as in the game */
.stamp {
  display: inline-block;
  font-family: var(--old);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px 4px;
  border: 3px solid currentColor;
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
  transform: rotate(-7deg);
  background: rgba(251, 243, 223, 0.86);
  mix-blend-mode: multiply;
}
.stamp.blue { color: var(--stamp-blue); }
.stamp.red { color: var(--red); }
.stamp.small { font-size: 12px; padding: 3px 8px 1px; border-width: 2px; outline-width: 1px; }
.sc { font-family: var(--old); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.86em; }
.blue-ink { color: var(--stamp-blue); }
.red-ink { color: var(--red); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-bottom: 40px; }
.hero-banner { position: relative; background: #3a2a18; }
.hero-banner img { width: 100%; height: min(46vh, 56.25vw); object-fit: cover; object-position: 50% 42%; }
.hero-banner::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(180deg, rgba(243, 231, 205, 0) 0%, var(--paper) 100%);
  pointer-events: none;
}
/* a brass tube with a capsule shooting through it */
.tube-run {
  position: absolute; left: 0; right: 0; bottom: -11px; z-index: 2; height: 22px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0) 30%, rgba(255, 252, 240, 0.55) 45%, rgba(255, 252, 240, 0) 62%),
    linear-gradient(180deg, var(--brass-lo) 0%, var(--brass) 18%, #f3dc9c 30%, #efe6cf 40%, #e6dcc2 60%, var(--brass-mid) 78%, var(--brass-lo) 100%);
  box-shadow: 0 4px 10px rgba(60, 30, 5, 0.3);
}
.tube-run::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 238px, var(--brass-lo) 238px 241px, var(--brass-hi) 241px 243px, var(--brass-mid) 243px 250px, transparent 250px 488px);
  opacity: 0.85;
}
.capsule {
  position: absolute; top: 4px; left: -80px; width: 58px; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #3b6fd6 0 24%, rgba(225, 238, 250, 0.9) 24% 76%, #3b6fd6 76%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  animation: shoot 7s cubic-bezier(0.55, 0.05, 0.3, 1) infinite;
}
@keyframes shoot { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(calc(100vw + 160px)); } }
.hero-text { max-width: 980px; margin: 0 auto; padding: 34px 24px 10px; text-align: center; position: relative; z-index: 1; }
.kicker { font-family: var(--deco); font-weight: 600; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin: 0 0 14px; }
.hero h1 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.005em; }
.pitch { font-size: clamp(21px, 2.3vw, 27px); font-style: italic; color: var(--ink-soft); margin: 14px auto 24px; max-width: 760px; line-height: 1.35; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-note { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); margin: 0; }
.screens { max-width: var(--wrap); margin: 50px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: start; }
.screen { margin: 0; }
.screen-frame {
  position: relative; aspect-ratio: 16 / 9; background: #120c07;
  border: 11px solid var(--wood); border-image: linear-gradient(160deg, #7a4423, var(--wood) 40%, var(--wood-lo)) 1;
  box-shadow: var(--shadow), inset 0 0 0 2px var(--brass-mid);
}
.screen-frame::before, .screen-frame::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass) 45%, var(--brass-lo));
  top: -13px; left: -13px; box-shadow: calc(100% + 0px) 0 0 0 transparent;
}
.screen-frame::after { left: auto; right: -13px; }
.screen-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.slot-empty { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 40%, #3b2817, #1a110a); color: var(--paper-deep); text-align: center; font-style: italic; }
.slot-empty .stamp { font-size: 22px; background: rgba(243, 231, 205, 0.92); mix-blend-mode: normal; }
.slot-empty p { margin: 0; }
.screen.missing .slot-empty { display: flex; }
.screen.missing video { visibility: hidden; }
.screen figcaption { margin-top: 12px; font-size: 17px; color: var(--ink-soft); line-height: 1.4; }
.screen figcaption strong { color: var(--ink); font-family: var(--old); }

/* ---------------------------------------------------------------- sections */
.section { max-width: var(--wrap); margin: 0 auto; padding: 96px 24px 40px; }
.section-head { margin-bottom: 34px; }
.label {
  font-family: var(--deco); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px double var(--red); display: inline-block;
}
.section h2 { font-size: clamp(34px, 4.6vw, 58px); }
.subhead { margin: 64px 0 22px; max-width: 820px; }
.subhead h3 { font-size: 30px; }
.subhead p { margin: 8px 0 0; color: var(--ink-soft); }
.prose p { margin: 0 0 1em; max-width: 70ch; }
.prose.intro { max-width: 820px; color: var(--ink-soft); font-size: 21px; margin-bottom: 34px; }
.prose.intro p, p.prose.intro { max-width: none; }
.prose.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.lead { font-size: 25px; line-height: 1.35; font-family: var(--old); }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.clip-figure { margin: 0; }
.clip-figure video, .ending video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow); background: #d8c9a6; }
.clip-figure figcaption, .ending figcaption { font-size: 16px; color: var(--ink-soft); margin-top: 10px; font-style: italic; }

/* the letter */
.letter-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; margin: 80px 0 60px; align-items: center; }
.letter {
  position: relative; background: var(--card); border-radius: 6px; padding: 30px 40px 38px; transform: rotate(-1deg);
  box-shadow: 0 26px 50px rgba(40, 20, 5, 0.28), 0 4px 10px rgba(40, 20, 5, 0.2);
}
.letter header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 3px double var(--red); padding-bottom: 10px; margin-bottom: 18px;
  font-family: var(--old); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); font-size: 14px;
}
.letter header em { font-weight: 400; font-style: italic; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); font-size: 15px; }
.letter p { margin: 0 0 12px; font-size: 19px; }
.letter-title { font-family: var(--old); font-weight: 700; font-size: 24px !important; }
.sign { font-style: italic; font-size: 30px !important; color: var(--ink-soft); margin-top: 10px !important; }
.postmark {
  position: absolute; right: -26px; bottom: -34px; width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--red);
  color: var(--red); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(14deg);
  font-family: var(--old); opacity: 0.8; mix-blend-mode: multiply; background: rgba(251, 243, 223, 0.4);
}
.postmark b { font-size: 24px; letter-spacing: 0.08em; }
.postmark i { font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; font-style: normal; border-top: 2px solid var(--red); padding-top: 3px; margin-top: 2px; }
.how p { font-size: 19px; }

/* the counters */
.counters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.counter {
  background: linear-gradient(180deg, #2f2216, #1d140c); border-radius: 8px; padding: 18px 10px 14px; text-align: center;
  box-shadow: inset 0 0 0 2px var(--brass-mid), inset 0 0 0 5px #24190f, inset 0 0 0 6px rgba(212, 162, 76, 0.4), var(--shadow);
}
.counter b {
  display: block; font-family: var(--old); font-weight: 700; font-size: clamp(34px, 3.6vw, 50px); line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.counter span { display: block; margin-top: 8px; font-family: var(--deco); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #ead7ae; }
.counter.zero b { background: linear-gradient(180deg, #f08a76, var(--red) 55%, var(--red-deep)); -webkit-background-clip: text; background-clip: text; }
.small-facts { font-size: 16px; color: var(--ink-soft); font-style: italic; text-align: center; margin: 18px auto 0; max-width: 900px; }

/* ---------------------------------------------------------------- prototypes */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pair { margin: 0; }
.compare { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow); --x: 50%; touch-action: pan-y; cursor: ew-resize; background: #222; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .top { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.compare .divider { position: absolute; top: 0; bottom: 0; left: var(--x); width: 4px; margin-left: -2px; background: var(--brass-grad); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); pointer-events: none; }
.compare .divider::after {
  content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
  background: var(--brass-grad); color: var(--wood-lo); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.tag {
  position: absolute; top: 10px; z-index: 2; font-family: var(--sans); font-size: 12px; line-height: 1.3; padding: 5px 9px; border-radius: 4px; max-width: 46%;
  background: rgba(20, 14, 8, 0.82); color: #f6ead0; pointer-events: none;
}
.tag.left { left: 10px; }
.tag.right { right: 10px; text-align: right; }
.tag.ai { background: rgba(124, 27, 18, 0.9); }
.pair figcaption { font-size: 16px; color: var(--ink-soft); margin-top: 10px; }
.pair figcaption strong { font-family: var(--old); color: var(--ink); }

.proto-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.proto-card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.proto-media { position: relative; aspect-ratio: 16 / 9; background: #20160d; }
.proto-media img, .proto-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proto-media video { opacity: 0; transition: opacity 0.3s; }
.proto-media.playing video { opacity: 1; }
.proto-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proto-round { font-family: var(--deco); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.proto-card h3, .proto-card h4 { font-family: var(--old); font-weight: 700; margin: 0; }
.proto-card h3 { font-size: 30px; }
.proto-card h4 { font-size: 22px; }
.proto-pitch { margin: 0; font-size: 18px; line-height: 1.45; }
.proto-blurb { margin: 0; font-size: 16px; color: var(--ink-soft); }
.quote { margin: 4px 0 0; font-style: italic; font-size: 21px; line-height: 1.38; color: var(--ink); padding-left: 18px; border-left: 3px solid var(--red); }
.verdict { margin: 0; font-style: italic; font-size: 16.5px; line-height: 1.42; color: var(--ink-soft); }
.verdict::before { content: 'Sibi: '; font-style: normal; font-family: var(--deco); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.proto-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.builder { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.builder b { color: var(--ink); }
.versions { display: flex; flex-wrap: wrap; gap: 6px; }
.versions button {
  border: 1.5px solid var(--brass-mid); background: transparent; border-radius: 99px; padding: 3px 11px 2px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
}
.versions button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.needs { display: flex; flex-wrap: wrap; gap: 6px; }
.need { font-family: var(--sans); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; background: #f0d6a8; color: var(--wood); }
.need::before { content: 'Needs '; font-weight: 400; }
.need.plain::before { content: ''; }
.proto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.proto-grid .proto-body { padding: 16px 18px 18px; gap: 8px; }
.proto-grid .proto-pitch { font-size: 16.5px; }

/* ---------------------------------------------------------------- the rival */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 28px 0 44px; }
.vs-card { margin: 0; }
.vs-card img, .vs-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow); cursor: zoom-in; background: #3a2a18; }
.vs-card video { cursor: default; }
.vs-card figcaption { margin-top: 14px; font-size: 18px; }
.vs-card figcaption .stamp { margin-right: 10px; vertical-align: 2px; }
.vs-card strong { font-family: var(--old); }
.rival-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.pull { margin: 0; padding: 30px 36px; background: var(--card); border-radius: 6px; box-shadow: var(--shadow); position: relative; }
.pull p { font-size: 23px; line-height: 1.38; font-style: italic; margin: 0 0 14px; }
.pull cite { font-family: var(--deco); font-style: normal; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.rival-play { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rival-play img { width: 100%; border-radius: 6px; box-shadow: var(--shadow); cursor: zoom-in; }

/* audio buttons */
.audio-line { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink-soft); width: 100%; }
.audio-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; flex: none; position: relative;
  background: var(--brass-grad); box-shadow: 0 2px 6px rgba(60, 30, 5, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.audio-btn::before { content: ''; position: absolute; left: 16px; top: 13px; border-left: 13px solid var(--wood-lo); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.audio-btn.on::before { left: 14px; top: 14px; width: 4px; height: 14px; border: 0; background: var(--wood-lo); box-shadow: 8px 0 0 var(--wood-lo); }
.audio-meta { flex: 1; min-width: 0; }
.audio-meta span { display: block; line-height: 1.3; }
.audio-bar { height: 4px; background: rgba(110, 74, 20, 0.2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.audio-bar i { display: block; height: 100%; width: 0; background: var(--red); }

/* ---------------------------------------------------------------- flipbook */
.flipbook { max-width: 1000px; margin: 0 auto; }
.flip-stage {
  position: relative; aspect-ratio: 16 / 9; background: #d8c9a6; overflow: hidden;
  border: 12px solid var(--wood); border-image: linear-gradient(160deg, #7a4423, var(--wood) 40%, var(--wood-lo)) 1; box-shadow: var(--shadow);
}
.flip-stage img { width: 100%; height: 100%; object-fit: cover; }
.flip-count { position: absolute; right: 12px; top: 12px; font-family: var(--deco); font-weight: 700; letter-spacing: 0.14em; font-size: 13px; background: rgba(20, 14, 8, 0.78); color: var(--brass-hi); padding: 6px 10px 4px; border-radius: 4px; }
.flip-caption { font-family: var(--old); font-size: clamp(19px, 2vw, 25px); text-align: center; margin: 18px 0 14px; min-height: 2.4em; }
.flip-controls { display: flex; align-items: center; gap: 14px; }
.flip-controls input { flex: 1; }

/* brass range inputs */
input[type='range'] { -webkit-appearance: none; appearance: none; background: transparent; height: 30px; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--brass-lo), var(--brass) 40%, var(--brass-mid)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
input[type='range']::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--brass-lo), var(--brass) 40%, var(--brass-mid)); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 18px; border-radius: 9px; margin-top: -5px; border: 0;
  background: linear-gradient(90deg, #3b6fd6 0 25%, #e8f0f8 25% 75%, #3b6fd6 75%); box-shadow: 0 0 0 2px var(--brass-hi), 0 2px 6px rgba(0, 0, 0, 0.4);
}
input[type='range']::-moz-range-thumb {
  width: 40px; height: 18px; border-radius: 9px; border: 0;
  background: linear-gradient(90deg, #3b6fd6 0 25%, #e8f0f8 25% 75%, #3b6fd6 75%); box-shadow: 0 0 0 2px var(--brass-hi), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- models */
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; margin-top: 30px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.viewer-stage, .dom-stage {
  position: relative; aspect-ratio: 16 / 10; min-height: 320px;
  background: radial-gradient(ellipse at 50% 45%, #fbf4e2 0%, #f0e2c2 60%, #dfcca2 100%);
}
.viewer-stage canvas, .dom-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.viewer-info { position: absolute; left: 22px; bottom: 18px; right: 22px; pointer-events: none; }
.viewer-info h3 { font-size: 30px; }
.viewer-info p { margin: 4px 0 0; font-size: 17px; color: var(--ink-soft); max-width: 60ch; }
.viewer-info .year { font-family: var(--deco); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.viewer-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: italic; color: var(--ink-soft); pointer-events: none; transition: opacity 0.3s; }
.viewer-load.hide { opacity: 0; }
.viewer-side { border-left: 1px solid var(--paper-edge); position: relative; min-width: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--paper-edge); }
.tabs button {
  flex: 1; border: 0; background: transparent; cursor: pointer; padding: 14px 4px 12px; font-family: var(--deco); font-weight: 700; white-space: nowrap;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 3px solid transparent;
}
.tabs button[aria-selected='true'] { color: var(--red); border-bottom-color: var(--red); }
.model-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; position: absolute; top: 47px; left: 0; right: 0; bottom: 0; }
.model-list button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 0; background: transparent; cursor: pointer;
  text-align: left; padding: 8px 18px; font-family: var(--serif); font-size: 18px; color: var(--ink);
}
.model-list button small { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.model-list button:hover { background: rgba(212, 162, 76, 0.16); }
.model-list button[aria-current='true'] { background: var(--ink); color: var(--paper); }
.model-list button[aria-current='true'] small { color: var(--brass-hi); }

.dom { margin-top: 70px; background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 26px 26px 22px; }
.dom-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 26px; margin-bottom: 20px; }
.dom-head h3 { font-size: 32px; }
.dom-head p { margin: 8px 0 0; color: var(--ink-soft); max-width: 70ch; font-size: 18px; }
.dom-head .btn-play { flex: none; margin-top: 6px; }
.dom-body { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; }
.dom-stage { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; }
.dom-hud { position: absolute; left: 18px; top: 14px; pointer-events: none; font-family: var(--old); color: var(--ink); }
.dom-step b { font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dom-step span { font-size: 18px; margin-left: 8px; color: var(--ink-soft); }
.dom-part { font-style: italic; font-size: 24px; color: var(--red); }
.dom-tris { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.dom-tris b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dom-code { background: #1c1712; border-radius: 6px; color: #d9ccb0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-shadow: inset 0 0 0 1px #3a2e22; }
.code-title { font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; color: #a99577; padding: 10px 14px; border-bottom: 1px solid #3a2e22; }
.code { list-style: none; margin: 0; padding: 8px 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; overflow: hidden; flex: 1; position: relative; }
.code li { display: flex; gap: 12px; padding: 0 14px; white-space: pre; color: #9d8e74; }
.code li .ln { width: 3ch; text-align: right; color: #5e5040; flex: none; }
.code li .tx { overflow: hidden; text-overflow: ellipsis; }
.code li.done { color: #cbbd9f; }
.code li.now { background: rgba(212, 162, 76, 0.2); color: var(--brass-hi); box-shadow: inset 3px 0 0 var(--brass); }
.code li.part { color: #e7a07a; }
.dom-scrub { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.dom-track { position: relative; flex: 1; padding-top: 26px; }
.dom-track input { width: 100%; position: relative; z-index: 2; display: block; margin: 0; }
.dom-buffer { position: absolute; left: 0; bottom: 11px; height: 8px; width: 0; background: rgba(168, 41, 28, 0.35); border-radius: 4px; z-index: 3; pointer-events: none; mix-blend-mode: multiply; transition: width 0.3s; }
.dom-parts { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 1; }
.dom-parts button {
  position: absolute; top: 0; transform: translateX(-1px); border: 0; background: transparent; padding: 0 0 0 4px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; color: var(--ink-soft); white-space: nowrap; border-left: 1.5px solid var(--brass-mid); height: 24px; line-height: 14px;
}
.dom-parts button:hover { color: var(--red); }
.dom-parts button.tick { font-size: 0; padding: 0; width: 6px; height: 9px; top: 15px; }
.dom-speed { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }
.dom-speed select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--paper-edge); background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------- experiments */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.exp-card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.exp-media { position: relative; aspect-ratio: 16 / 10; }
.exp-media img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.exp-card.dropped .exp-media img { filter: saturate(0.45) sepia(0.25); }
.exp-media .stamp { position: absolute; right: 14px; bottom: 16px; font-size: 18px; mix-blend-mode: normal; }
.exp-card h3 { font-size: 24px; padding: 16px 20px 0; }
.exp-card p { margin: 6px 0 0; padding: 0 20px 20px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the board (a dark control room, like the Hub) */
.board { max-width: none; background: linear-gradient(180deg, #15171c 0%, #101216 100%); color: #e6dcc6; margin-top: 70px; padding-bottom: 90px; }
.board > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.board .label { color: #ef8a6a; border-bottom-color: #ef8a6a; }
.board h2 { color: #f6ead0; }
.board-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; margin-bottom: 46px; }
.board-intro .prose p { color: #d8ccb2; }
.board-intro em { color: #f6ead0; }
.board-intro figure { margin: 0; }
.board-intro img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px #2a2f38, 0 20px 40px rgba(0, 0, 0, 0.5); cursor: zoom-in; }
.board-intro figcaption { font-size: 15px; color: #9b927f; margin-top: 10px; font-style: italic; }
.board-stats { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.board-stats li { font-family: var(--sans); font-size: 14px; background: #20242c; border: 1px solid #333945; border-radius: 99px; padding: 6px 14px; color: #c9bfab; }
.board-stats b { color: #fff; }
.ticket-grid { columns: 3 340px; column-gap: 22px; }
.ticket {
  break-inside: avoid; margin: 0 0 22px; background: #1d2027; border: 1px solid #2d323c; border-radius: 10px; overflow: hidden;
  font-family: var(--sans); font-size: 15px; line-height: 1.45; color: #d9d0bd;
}
.ticket-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #0d0f12; }
.ticket-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.ticket-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ticket-body { padding: 14px 16px 16px; }
.ticket h3 { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.3; color: #f4ecdb; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: #2a2f38; color: #c3baa6; }
.chip.ok { background: #1f3a26; color: #8fd49f; }
.chip.no { background: #3d2020; color: #f09a8a; }
.chip.decided { background: #3b321a; color: #e9c66f; }
.three { margin: 0; display: grid; gap: 6px; }
.three div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.three dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8d8574; padding-top: 3px; }
.three dd { margin: 0; }
.three .ask-need dt { color: #e9c66f; }
.three .ask-need dd { color: #f4ecdb; }
.answers { margin-top: 14px; display: grid; gap: 10px; }
.answer {
  background: var(--card); color: var(--ink); border-radius: 4px; padding: 10px 14px 10px 16px; font-family: var(--serif); font-size: 17px; line-height: 1.4;
  border-left: 4px solid var(--red); position: relative; margin: 0;
}
.answer::before { content: 'Sibi'; display: block; font-family: var(--deco); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; }
.outcome { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #2d323c; color: #b9b09d; font-size: 14.5px; }
.outcome::before { content: 'Then: '; font-weight: 700; color: #8fd49f; }
.ticket .audio-line { margin-top: 12px; color: #c9bfab; font-family: var(--sans); font-size: 14px; }
.ticket .audio-bar { background: rgba(255, 255, 255, 0.12); }

/* ---------------------------------------------------------------- conversations */
.talks { display: grid; gap: 54px; }
.talk { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-items: start; }
.talk-context { grid-column: 1 / -1; font-family: var(--deco); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.talk-context b { color: var(--red); font-size: 15px; }
.talk-context::after { content: ''; flex: 1; height: 1px; background: var(--paper-edge); }
.note {
  background: var(--card); border-radius: 4px; padding: 16px 22px 18px; box-shadow: 0 14px 30px rgba(40, 20, 5, 0.2), 0 2px 6px rgba(40, 20, 5, 0.16);
  transform: rotate(-0.8deg); position: relative;
}
.note header { font-family: var(--old); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); border-bottom: 3px double var(--red); padding-bottom: 6px; margin-bottom: 10px; }
.note p { margin: 0; font-size: 20px; line-height: 1.42; }
.note p::before { content: '“'; color: var(--red); }
.note p::after { content: '”'; color: var(--red); }
.note .sign { font-size: 22px !important; margin: 8px 0 0 !important; }
.note .after { margin-top: 12px; font-size: 18px; color: var(--ink-soft); }
.tape {
  margin-top: 54px; position: relative; background: #f7f0dc; padding: 16px 20px 16px 22px; transform: rotate(0.6deg);
  box-shadow: 0 10px 22px rgba(40, 20, 5, 0.18);
  background-image: radial-gradient(circle at 8px 50%, var(--paper) 3.5px, transparent 4px);
  background-size: 100% 18px;
  background-repeat: repeat-y;
  border-left: 14px solid #efe5c9;
}
.tape header { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.tape p { margin: 0; font-family: var(--mono); font-size: 14.5px; line-height: 1.6; color: #2f2a22; }

/* ---------------------------------------------------------------- eras and sound */
.era-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.era { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.era video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #d8c9a6; }
.era-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.era h3 { font-size: 30px; }
.era .era-levels { font-family: var(--deco); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.era p { margin: 0; font-size: 17px; line-height: 1.45; }
.era .era-plan { font-size: 14px; font-style: italic; opacity: 0.8; }
.era .audio-line { margin-top: auto; padding-top: 6px; }
.era-1876 { background: #efe0bf; color: #3a2716; }
.era-1876 h3 { font-family: var(--old); }
.era-1876 .era-levels { color: #8a3a1c; }
.era-1876 video { filter: sepia(0.15); }
.era-1906 { background: var(--card); color: var(--ink); }
.era-1906 h3 { font-family: var(--serif); font-weight: 700; }
.era-1906 .era-levels { color: var(--red); }
.era-1929 { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #f4ead2; box-shadow: var(--shadow), inset 0 0 0 1px rgba(217, 180, 90, 0.4); }
.era-1929 h3 { font-family: var(--deco); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 26px; color: var(--gold-hi); }
.era-1929 .era-levels { color: var(--gold); }
.era-1929 p { font-family: var(--deco); font-weight: 400; font-size: 16px; }
.era-1929 .audio-line { color: #d9cfb6; }
.era-1929 .audio-bar i { background: var(--gold); }
.era-1929 .audio-bar { background: rgba(255, 255, 255, 0.15); }
.voice { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; margin-top: 80px; align-items: center; }
.voice h3 { font-size: 40px; color: var(--stamp-blue); }
.voice p { font-size: 19px; }
.translation { display: block; font-style: italic; color: var(--ink-soft); font-size: 17px; margin-top: 4px; }
.takes { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.take {
  width: 112px; height: 112px; border-radius: 50%; cursor: pointer; border: 4px solid var(--stamp-blue); background: rgba(251, 243, 223, 0.9);
  color: var(--stamp-blue); font-family: var(--old); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 5px var(--stamp-blue); transition: transform 0.15s;
}
.take:nth-child(odd) { transform: rotate(-8deg); }
.take:nth-child(even) { transform: rotate(6deg); }
.take:hover, .take.on { transform: rotate(0) scale(1.06); background: #e4ebfa; }
.take b { font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.take span { font-size: 12px; font-family: var(--sans); font-weight: 400; margin-top: 2px; }
.sfx { margin-top: 70px; }
.sfx h3 { font-size: 28px; }
.sfx > p { color: var(--ink-soft); margin: 6px 0 18px; }
.sfx-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sfx-btn {
  border: 0; cursor: pointer; text-align: left; background: var(--card); border-radius: 8px; padding: 14px 16px; box-shadow: 0 6px 16px rgba(40, 20, 5, 0.14);
  display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--brass);
}
.sfx-btn b { font-family: var(--old); font-size: 20px; }
.sfx-btn span { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.sfx-btn:hover, .sfx-btn.on { border-top-color: var(--red); background: #fff8e8; }
.ending { margin: 70px 0 0; }
.closing { text-align: center; padding-top: 110px; padding-bottom: 120px; }
.closing .prose.intro { margin: 18px auto 34px; }

/* ---------------------------------------------------------------- footer and lightbox */
.footer { background: var(--wood-grad); color: #ead9b6; padding: 50px 24px 60px; text-align: center; border-top: 4px solid var(--brass-mid); }
.footer .made { font-family: var(--old); font-weight: 700; font-size: 28px; margin: 0 0 20px; background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.credits { max-width: 860px; margin: 0 auto; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: #d9c6a0; }
.credits p { margin: 0 0 8px; }
.credits strong { color: #f3e4c2; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 7, 4, 0.92); display: flex; align-items: center; justify-content: center; padding: 3vw; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.lightbox-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 28px; background: var(--brass-grad); color: var(--wood-lo); cursor: pointer; }
[data-zoom] { cursor: zoom-in; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1100px) {
  .counters { grid-template-columns: repeat(3, 1fr); }
  .proto-grid, .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .sfx-row { grid-template-columns: repeat(3, 1fr); }
  .viewer { grid-template-columns: 1fr 270px; }
}
@media (max-width: 860px) {
  body { font-size: 18px; }
  .topbar { padding: 6px 12px; gap: 10px; }
  .brand em { display: none; }
  .section { padding: 70px 18px 30px; }
  .screens, .split, .letter-row, .prose.columns, .pairs, .proto-highlights, .versus, .rival-row, .board-intro, .voice, .dom-body { grid-template-columns: 1fr; }
  .screens { gap: 30px; padding: 0 18px; }
  .letter { padding: 24px 22px 32px; }
  .postmark { width: 92px; height: 92px; right: -6px; bottom: -40px; }
  .postmark b { font-size: 18px; }
  .talk { grid-template-columns: 1fr; }
  .tape { margin: 18px 0 0 28px; }
  .era-row { grid-template-columns: 1fr; }
  .viewer { grid-template-columns: 1fr; }
  .viewer-side { border-left: 0; border-top: 1px solid var(--paper-edge); position: static; }
  .model-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; position: static; }
  .model-list li { flex: none; }
  .model-list button { width: auto; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--paper-edge); font-size: 16px; white-space: nowrap; }
  .model-list button small { display: none; }
  .viewer-stage { aspect-ratio: 1 / 1; }
  .viewer-info h3 { font-size: 24px; }
  .viewer-info p { font-size: 15px; }
  .dom { padding: 18px 14px; }
  .dom-head { flex-direction: column; gap: 12px; }
  .dom-stage { aspect-ratio: 1 / 1; }
  .dom-code { max-height: 220px; }
  .dom-step b { font-size: 40px; }
  .dom-scrub { flex-direction: column; align-items: stretch; }
  .dom-parts button { font-size: 0; width: 1px; padding: 0; }
  .dom-speed { justify-content: center; }
  .ticket-grid { columns: 1; }
  .board { padding-left: 14px; padding-right: 14px; }
  .three div { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  .counters { grid-template-columns: repeat(2, 1fr); }
  .proto-grid, .exp-grid { grid-template-columns: 1fr; }
  .sfx-row { grid-template-columns: repeat(2, 1fr); }
  .hero-banner img { height: 52vw; }
  .proto-card h3 { font-size: 26px; }
  .quote { font-size: 19px; }
  .pull { padding: 22px 22px; }
  .pull p { font-size: 20px; }
  .take { width: 92px; height: 92px; }
  .flip-controls { gap: 8px; }
  .text-btn { padding: 10px 12px 8px; }
  .tag { font-size: 10.5px; max-width: 48%; }
}