/* THE VIDEO KIOSK. Standalone like the Lab, so it stands if the app bundle breaks.
   Metaphor: the push-to-play rail on a museum display. Setup rows are label
   plates with a brass edge, the preview is the screen on a plinth, and a lit
   button is Alchema yellow. The one bold thing is the plinth in the hero, which
   is the real kiosk, live. Everything around it stays quiet. */
:root {
  color-scheme: dark;
  --navy: #00030f; --deep: #010c26; --text: #eef3ff; --muted: rgba(214, 226, 255, 0.72);
  --yellow: #ffee00; --electric: #0e8efe; --aqua: #19ffad; --sky: #7fd0ff;
  --brass: #c9a35a; --brass-dim: rgba(201, 163, 90, 0.35);
  --plate: rgba(10, 22, 56, 0.72);
}
* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6;
  background:
    radial-gradient(ellipse 70% 45% at 85% -5%, rgba(14, 142, 254, 0.2), transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 30%, rgba(201, 163, 90, 0.08), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--deep) 55%, var(--navy) 100%);
  isolation: isolate;
}
/* gallery wall: a faint plaster grain so the dark reads as a wall, not a void (rule 1) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(rgba(127, 208, 255, 0.05) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
main { max-width: 1180px; margin: 0 auto; padding: clamp(1.4rem, 4vh, 2.6rem) 16px clamp(3rem, 8vh, 5rem); }
a { color: var(--sky); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + span, .btn:focus-within {
  outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 8px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: clamp(1.6rem, 5vh, 3rem); }
.home { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: "Pixelify Sans", monospace; font-size: 1.05rem; }
.home img { width: 34px; height: auto; transition: transform 0.25s ease; }
.home:hover img { transform: rotate(-12deg) scale(1.08); }
.home:hover { color: var(--yellow); }
.start { color: var(--navy); background: var(--yellow); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 0.6em 1.1em; border-radius: 999px; transition: box-shadow 0.2s ease, transform 0.2s ease; white-space: nowrap; }
.start:hover { box-shadow: 0 0 0 4px rgba(255, 238, 0, 0.25), 0 0 24px rgba(255, 238, 0, 0.35); transform: translateY(-1px); }

/* the site menu lives in /site-nav.css, shared with the Lab */

.tag { font-family: "Pixelify Sans", monospace; color: var(--aqua); font-size: 1.05rem; margin: 0 0 0.4rem; }
h1 { margin: 0; font-family: "Archivo", sans-serif; font-weight: 850; font-stretch: 88%; font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1; letter-spacing: -0.015em; max-width: 15ch; text-wrap: balance; }
h2 { font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 92%; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.08; margin: 0 0 0.6rem; text-wrap: balance; }
h3 { font-family: "Archivo", sans-serif; font-weight: 750; font-stretch: 92%; font-size: 1.2rem; margin: 0 0 0.5rem; }
.lede { max-width: 38rem; margin: 1rem 0 0; font-size: clamp(1.02rem, 2.2vw, 1.15rem); color: var(--muted); }
.note { color: var(--muted); font-size: 0.95rem; max-width: 42rem; }
section { margin-top: clamp(3.5rem, 10vh, 6rem); }
section.hero { margin-top: 0; }

/* ---------- buttons: the push-to-play button, lit or unlit ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1.2 "Inter", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  padding: 0.85em 1.4em; border-radius: 999px; border: 0; color: var(--text); background: transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn--lit {
  color: var(--navy); background: var(--yellow);
  box-shadow: 0 0 0 3px var(--brass-dim), 0 0 0 5px rgba(201, 163, 90, 0.55), 0 6px 0 rgba(120, 100, 0, 0.55), 0 0 26px rgba(255, 238, 0, 0.28);
}
.btn--lit:hover { box-shadow: 0 0 0 3px var(--brass-dim), 0 0 0 5px rgba(201, 163, 90, 0.75), 0 6px 0 rgba(120, 100, 0, 0.55), 0 0 40px rgba(255, 238, 0, 0.45); }
/* pressing it pushes it into the panel, like the real thing */
.btn--lit:active { transform: translateY(4px); box-shadow: 0 0 0 3px var(--brass-dim), 0 0 0 5px rgba(201, 163, 90, 0.75), 0 2px 0 rgba(120, 100, 0, 0.55), 0 0 18px rgba(255, 238, 0, 0.5); }
.btn--plain { box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.35) inset; }
.btn--plain:hover { background: rgba(127, 208, 255, 0.08); box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.7) inset; }
.btn--plain:active { transform: translateY(2px); }
.btn--small { padding: 0.55em 1.05em; font-size: 0.92rem; }
.btn--big { padding: 1em 2em; font-size: 1.12rem; }
.btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.facts { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.55rem; max-width: 36rem; }
.facts li { position: relative; padding-left: 1.6rem; color: var(--muted); }
.facts li::before { content: ""; position: absolute; left: 0.15rem; top: 0.48em; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim), 0 0 10px rgba(255, 238, 0, 0.5); }
.facts b { color: var(--text); font-weight: 600; }
.hero__go { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.watch { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.2rem; padding: 0.4em 0.2em; background: none; border: 0; color: var(--text); font: 600 0.98rem "Inter", sans-serif; cursor: pointer; }
.watch[hidden] { display: none; }
.watch small { color: var(--muted); font-weight: 400; }
.watch__play { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); position: relative; box-shadow: 0 0 0 3px var(--brass-dim); }
.watch__play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--navy); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.watch:hover .watch__play { box-shadow: 0 0 0 3px var(--brass), 0 0 18px rgba(255, 238, 0, 0.5); }

/* the plinth: a screen set into a dark cabinet with a brass edge */
.plinth { margin: 0; }
.screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; padding: 12px;
  background: linear-gradient(160deg, #1a2238, #070b18 60%);
  box-shadow: 0 0 0 1px var(--brass-dim), 0 0 0 7px #05070f, 0 0 0 8px rgba(201, 163, 90, 0.4), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 90px rgba(14, 142, 254, 0.12);
}
.plinth figcaption { margin-top: 1.2rem; font-size: 0.9rem; color: var(--muted); text-align: center; }

/* ---------- the kiosk itself. Sized in container units so the preview and the
   full screen version are the same design at two sizes. ---------- */
.kz {
  --bg: #121417; --ink: #f4f1ea; --soft: rgba(244, 241, 234, 0.62); --tile: #1d2025; --plate-ink: #121417;
  position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
  container-type: size; background: var(--bg); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kz[data-theme="daylight"] { --bg: #e9edf2; --ink: #15202b; --soft: rgba(21, 32, 43, 0.6); --tile: #ffffff; --plate-ink: #15202b; }
.kz[data-theme="poster"] { --bg: #0a0a0a; --ink: #ffffff; --soft: rgba(255, 255, 255, 0.7); --tile: #000000; --plate-ink: #0a0a0a; }
.kz[data-theme="poster"] .kz__title { font-stretch: 125%; font-weight: 900; text-transform: none; }
/* --u is the kiosk's text unit: a slice of the height on a landscape screen, and of the width
   on a portrait one, so type stays the same size whichever way the screen is turned */
.kz__menu { --u: min(1cqh, 1.6cqw); position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqh 5cqw 4cqh; }
.kz__head { text-align: center; }
.kz__title { margin: 0; font-weight: 800; font-stretch: 95%; font-size: clamp(10px, calc(var(--u) * 6.4), 72px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.kz__sub { margin: 1cqh 0 0; font-family: "Inter", system-ui, sans-serif; font-size: clamp(7px, calc(var(--u) * 3), 30px); color: var(--soft); }
.kz__sub:empty { display: none; }
/* rows share the height left under the title, so any count from one to eight fits the screen */
.kz__grid { flex: 1; min-height: 0; display: grid; gap: 3.4cqh 3cqw; margin: 4.5cqh 0 3cqh; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); }
/* one or two videos: keep the buttons button-sized and centered, not one slab filling the screen */
.kz__grid[data-n="1"] { grid-template-columns: minmax(0, 46cqw); justify-content: center; }
.kz__grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 40cqw)); justify-content: center; }
.kz__btn {
  appearance: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit;
  display: flex; flex-direction: column; border-radius: 1.6cqh; overflow: hidden; background: var(--tile);
  box-shadow: 0 0 0 0.35cqh color-mix(in srgb, var(--accent) 45%, transparent), 0 1.2cqh 0 color-mix(in srgb, var(--accent) 30%, #000), 0 2cqh 4cqh rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.kz__btn:active, .kz__btn.pressed { transform: translateY(0.9cqh); box-shadow: 0 0 0 0.35cqh var(--accent), 0 0.3cqh 0 color-mix(in srgb, var(--accent) 30%, #000), 0 0 4cqh color-mix(in srgb, var(--accent) 50%, transparent); }
.kz__btn img, .kz__btn .kz__ph { display: block; width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; background: color-mix(in srgb, var(--accent) 18%, var(--tile)); }
.kz__label { display: flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); background: var(--accent); color: #0b0b0b; font-weight: 750; font-size: clamp(7px, calc(var(--u) * 3.3), 34px); line-height: 1.12; text-wrap: balance; }
.kz__label::before { content: ""; flex: none; width: 0; height: 0; border-left: 1.9cqh solid currentColor; border-top: 1.15cqh solid transparent; border-bottom: 1.15cqh solid transparent; }
.kz__hint { position: absolute; left: 0; right: 0; bottom: 3.4cqh; margin: 0; text-align: center; font-family: "Inter", sans-serif; font-size: clamp(7px, 2.6cqh, 26px); color: var(--soft); opacity: 0; transition: opacity 0.6s ease; }
.kz.idle .kz__hint { opacity: 1; animation: kzbreath 2.6s ease-in-out infinite; }
.kz.idle .kz__btn { animation: kzglow 2.6s ease-in-out infinite; }
.kz.idle .kz__btn:nth-child(2n) { animation-delay: 0.4s; }
.kz.idle .kz__btn:nth-child(3n) { animation-delay: 0.8s; }
@keyframes kzbreath { 50% { opacity: 0.45; } }
@keyframes kzglow { 50% { box-shadow: 0 0 0 0.45cqh var(--accent), 0 1.2cqh 0 color-mix(in srgb, var(--accent) 30%, #000), 0 0 5cqh color-mix(in srgb, var(--accent) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .kz.idle .kz__hint, .kz.idle .kz__btn { animation: none; } }
.kz__credit { position: absolute; right: 2.2cqw; bottom: 1.6cqh; margin: 0; font-family: "Inter", sans-serif; font-size: clamp(6px, 1.7cqh, 15px); color: var(--soft); opacity: 0.7; }
.kz__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 10cqw; text-align: center; font-family: "Inter", sans-serif; font-size: clamp(9px, 3.6cqh, 28px); color: var(--soft); pointer-events: none; }
.kz.has .kz__empty { display: none; }

.kz__player { position: absolute; inset: 0; background: #000; }
.kz__player[hidden] { display: none; }
.kz__player video { width: 100%; height: 100%; object-fit: contain; display: block; }
.kz__back {
  position: absolute; left: 2.6cqw; bottom: 4.6cqh; display: inline-flex; align-items: center; gap: 1.4cqh;
  padding: 1.8cqh 3cqh; border: 0; border-radius: 99px; cursor: pointer; font: 700 clamp(8px, 3.2cqh, 30px) "Archivo", sans-serif;
  color: #0b0b0b; background: var(--accent); box-shadow: 0 0.9cqh 0 color-mix(in srgb, var(--accent) 30%, #000), 0 0 3cqh rgba(0, 0, 0, 0.5);
}
.kz__back:active { transform: translateY(0.7cqh); box-shadow: 0 0.2cqh 0 color-mix(in srgb, var(--accent) 30%, #000); }
.kz__back span { width: 0; height: 0; border-right: 1.7cqh solid currentColor; border-top: 1.1cqh solid transparent; border-bottom: 1.1cqh solid transparent; }
/* visitor sound controls, opposite the back button, shown only if setup allows them */
.kz__sound { position: absolute; right: 2.6cqw; bottom: 4.6cqh; display: flex; align-items: center; gap: 2cqh; padding: 1.2cqh 1.6cqh; border-radius: 99px; background: rgba(0, 0, 0, 0.55); }
.kz__sound[hidden], .kz__mute[hidden], .kz__vol[hidden] { display: none; }
.kz__mute { width: 7.4cqh; height: 7.4cqh; min-width: 30px; min-height: 30px; padding: 1.4cqh; border: 0; border-radius: 50%; cursor: pointer; color: #0b0b0b; background: var(--accent); box-shadow: 0 0.7cqh 0 color-mix(in srgb, var(--accent) 30%, #000); }
.kz__mute:active { transform: translateY(0.5cqh); box-shadow: 0 0.2cqh 0 color-mix(in srgb, var(--accent) 30%, #000); }
.kz__mute svg { width: 100%; height: 100%; display: block; }
.kz__mute .off, .kz__mute[aria-pressed="true"] .on { display: none; }
.kz__mute[aria-pressed="true"] .off { display: inline; }
/* a slider sized for a finger, not a mouse */
.kz__vol { -webkit-appearance: none; appearance: none; width: 22cqw; min-width: 90px; height: 6cqh; min-height: 24px; background: transparent; cursor: pointer; margin: 0; }
.kz__vol::-webkit-slider-runnable-track { height: 1.2cqh; min-height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.3); }
.kz__vol::-moz-range-track { height: 1.2cqh; min-height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.3); }
.kz__vol::-moz-range-progress { height: 1.2cqh; min-height: 5px; border-radius: 99px; background: var(--accent); }
.kz__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 5cqh; height: 5cqh; min-width: 20px; min-height: 20px; margin-top: max(-1.9cqh, -7.5px); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0.5cqh rgba(0, 0, 0, 0.4); }
.kz__vol::-moz-range-thumb { width: 5cqh; height: 5cqh; min-width: 20px; min-height: 20px; border: 0; border-radius: 50%; background: var(--accent); }
.kz__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.9cqh; background: rgba(255, 255, 255, 0.14); }
.kz__bar i { display: block; height: 100%; width: 0; background: var(--accent); }

/* the staff exit: a ring that fills while the corner is held */
.kz__corner { position: absolute; left: 0; top: 0; width: 12cqh; height: 12cqh; display: none; padding: 2cqh; z-index: 3; }
.kz__corner svg { width: 100%; height: 100%; transform: rotate(-90deg); opacity: 0; transition: opacity 0.2s; }
.kz__corner circle { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; }
.kz__corner.holding svg { opacity: 1; }
.kz__corner.holding circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }

/* PORTRAIT. A phone or a tablet stood upright: buttons become wide rows, picture on
   the left and label on the right, instead of tall narrow tiles whose labels wrap
   three lines deep. Up to four videos in one column, more in two. */
@container (aspect-ratio < 1) {
  .kz__menu { padding: 7cqh 5cqw 5cqh; }
  .kz__grid, .kz__grid[data-n] { grid-template-columns: repeat(var(--pcols, 1), minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; align-content: center; justify-content: stretch; gap: 2.2cqh 3cqw; margin: 4cqh 0 3cqh; }
  /* the picture keeps its own 16:9 shape so nothing in it is cropped, and sets the row's height */
  .kz__btn { flex-direction: row; align-self: center; width: 100%; max-height: 100%; }
  .kz__btn img, .kz__btn .kz__ph { flex: 0 0 50%; width: 50%; height: auto; aspect-ratio: 16 / 9; }
  .kz__label { flex: 1; font-size: clamp(9px, calc(var(--u) * 3.4), 36px); padding: calc(var(--u) * 2); text-wrap: pretty; }
  .kz__grid[data-n="5"] .kz__label, .kz__grid[data-n="6"] .kz__label, .kz__grid[data-n="7"] .kz__label, .kz__grid[data-n="8"] .kz__label { font-size: clamp(8px, calc(var(--u) * 3.4), 24px); }
  .kz__grid[data-n="5"] .kz__btn, .kz__grid[data-n="6"] .kz__btn, .kz__grid[data-n="7"] .kz__btn, .kz__grid[data-n="8"] .kz__btn { flex-direction: column; }
  .kz__grid[data-n="5"] .kz__btn img, .kz__grid[data-n="6"] .kz__btn img, .kz__grid[data-n="7"] .kz__btn img, .kz__grid[data-n="8"] .kz__btn img { width: 100%; flex: 1 1 0; }
  .kz__back { font-size: clamp(10px, 4cqw, 30px); }
}

/* run mode: the same element, taking the whole screen */
.kz.run { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.kz.run .kz__corner { display: block; }
.kz.run.still, .kz.run.still * { cursor: none; }
.kz:fullscreen { width: 100%; height: 100%; }
body.running { overflow: hidden; }

/* ---------- where people use it: a row of small label plates ---------- */
/* six places: three across, then two, then one, so a row is never left half full */
.uses ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
@media (max-width: 960px) { .uses ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uses ul { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
.uses li { position: relative; padding: 1rem 1.1rem 1rem 2.4rem; border-radius: 14px; background: rgba(10, 22, 56, 0.5); box-shadow: 0 0 0 1px rgba(201, 163, 90, 0.2) inset; color: var(--muted); font-size: 0.95rem; transition: box-shadow 0.2s ease; }
.uses li:hover { box-shadow: 0 0 0 1px var(--brass) inset; }
.uses li::before { content: ""; position: absolute; left: 1rem; top: 1.35rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim); }
.uses b { display: block; color: var(--text); font: 750 1.05rem "Archivo", sans-serif; margin-bottom: 0.15rem; }

/* ---------- setup ---------- */
.setup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 1.4rem; }
.plate {
  position: relative; padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 18px; background: var(--plate);
  box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.14) inset, 0 18px 40px rgba(0, 0, 0, 0.3);
}
/* the brass edge on top, the one detail that says "display case" */
.plate::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0.7; }
.plate--rail { grid-row: span 4; }
/* two-way choices (sound, mute, volume): a pair of pill buttons */
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice legend { width: 100%; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label span { display: block; padding: 0.5em 1em; border-radius: 999px; font-size: 0.92rem; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.25) inset; transition: box-shadow 0.15s, background 0.15s, color 0.15s; }
.choice label:hover span { background: rgba(127, 208, 255, 0.07); }
.choice input:checked + span { color: var(--navy); background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
.choice:disabled { opacity: 0.4; }
.choice:disabled label { cursor: default; }
.choice__note { width: 100%; margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--muted); }
.plate--go { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.field { display: grid; gap: 6px; margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field span { font-size: 0.92rem; font-weight: 600; }
.field i { font-style: normal; color: var(--muted); font-weight: 400; }
input[type=text] {
  width: 100%; font: 500 1rem "Inter", sans-serif; color: var(--text); background: rgba(0, 3, 15, 0.6);
  border: 0; border-radius: 10px; padding: 0.75em 0.9em; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.22) inset; transition: box-shadow 0.2s;
}
input[type=text]::placeholder { color: rgba(214, 226, 255, 0.38); }
input[type=text]:hover { box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.45) inset; }
input[type=text]:focus { outline: none; box-shadow: 0 0 0 2px var(--yellow) inset; }

.rail__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0.9rem; }
.rail__head h3 { margin: 0; }
.rail__head h3 span { font: 500 0.88rem "Inter", sans-serif; color: var(--muted); margin-left: 6px; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: r; }
.row {
  display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: 14px; background: rgba(0, 3, 15, 0.45); box-shadow: 0 0 0 1px rgba(201, 163, 90, 0.18) inset;
  transition: box-shadow 0.2s, transform 0.2s;
}
.row:focus-within { box-shadow: 0 0 0 1px var(--brass) inset; }
.row.bad { box-shadow: 0 0 0 1px #ff6a3d inset; }
.row__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim), 0 0 8px rgba(255, 238, 0, 0.4); justify-self: center; }
.row.bad .row__dot { background: #ff6a3d; box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.35); }
.row__thumb { width: 92px; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: #0b1530; display: block; }
.row__mid { display: grid; gap: 4px; min-width: 0; }
.row__mid input { padding: 0.5em 0.7em; font-size: 0.95rem; }
.row__file { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.bad .row__file { color: #ffb199; white-space: normal; }
.row__acts { display: flex; gap: 4px; }
.ico { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: 600 1rem "Inter", sans-serif; display: grid; place-items: center; transition: background 0.15s, color 0.15s; }
.ico:hover { background: rgba(127, 208, 255, 0.1); color: var(--text); }
.ico--x:hover { background: rgba(255, 106, 61, 0.15); color: #ffb199; }
.ico:disabled { opacity: 0.25; cursor: default; background: none; }
.row.enter { animation: rowin 0.35s ease; }
@keyframes rowin { from { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--yellow) inset, 0 0 18px rgba(255, 238, 0, 0.25); } }
@media (prefers-reduced-motion: reduce) { .row.enter { animation: none; } }
.rail__empty { margin: 0; padding: 1.4rem; border-radius: 14px; color: var(--muted); text-align: center; box-shadow: 0 0 0 1px dashed rgba(127, 208, 255, 0.2) inset; border: 1px dashed rgba(127, 208, 255, 0.22); }
.warn { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(255, 106, 61, 0.1); color: #ffcbb8; font-size: 0.92rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
fieldset:last-child { margin-bottom: 0; }
legend { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.looks { display: flex; flex-wrap: wrap; gap: 10px; }
.looks label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px 6px 6px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.2) inset; font-size: 0.95rem; transition: box-shadow 0.15s, background 0.15s; }
.looks label:hover { background: rgba(127, 208, 255, 0.06); }
.looks label:has(input:checked) { box-shadow: 0 0 0 2px var(--yellow) inset; }
.looks input, .accents input { position: absolute; opacity: 0; pointer-events: none; }
.sw { width: 42px; height: 28px; border-radius: 7px; display: block; position: relative; overflow: hidden; }
.sw::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 7px; border-radius: 3px; background: var(--yellow); }
.sw--gallery { background: #121417; box-shadow: 0 0 0 1px #2c3038 inset; }
.sw--daylight { background: #e9edf2; }
.sw--poster { background: #0a0a0a; box-shadow: 0 0 0 1px #333 inset; }
.sw--poster::after { height: 10px; }
.accents { display: flex; gap: 10px; }
.accents label { cursor: pointer; position: relative; }
.accents span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(0, 3, 15, 0.9), 0 0 0 4px rgba(127, 208, 255, 0.25); transition: transform 0.15s, box-shadow 0.15s; }
.accents label:hover span { transform: scale(1.08); }
.accents input:checked + span { box-shadow: 0 0 0 3px rgba(0, 3, 15, 0.9), 0 0 0 5px var(--c), 0 0 16px var(--c); }
.accents input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 6px; }

/* ---------- Chris's story: a note from a person, so it's set like a letter, not a card ---------- */
.story { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.8rem); align-items: start; max-width: 50rem; }
.story img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--navy), 0 0 0 4px var(--brass), 0 12px 30px rgba(0, 0, 0, 0.4); }
.story p { color: var(--muted); font-size: 1.05rem; margin: 0 0 1rem; max-width: 40rem; }
.story p:first-of-type { color: var(--text); }
.story__sign { font-family: "Pixelify Sans", monospace; color: var(--yellow) !important; font-size: 1rem !important; }
@media (max-width: 480px) { .story { grid-template-columns: minmax(0, 1fr); } .story img { width: 72px; height: 72px; } }

/* ---------- free vs custom ---------- */
.versus { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; margin-top: 1.8rem; align-items: end; }
.vs { margin: 0; }
.vs figcaption { margin-top: 0.8rem; color: var(--muted); font-size: 0.95rem; }
.vs figcaption b { display: block; color: var(--text); font-family: "Archivo", sans-serif; font-size: 1.05rem; }
.vs__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.16), 0 16px 40px rgba(0, 0, 0, 0.35); }
.vs__screen--free { background: #121417; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 8%; padding: 7% 10%; filter: saturate(0.85); }
.vs__screen--free b { grid-column: 1 / -1; text-align: center; font: 800 clamp(0.7rem, 1.6vw, 1rem) "Archivo", sans-serif; color: #f4f1ea; }
.vs__screen--free span { border-radius: 6px; background: linear-gradient(#2a2f38 70%, #ffee00 70%); }
.vs__screen--custom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs__screen--custom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 3, 15, 0.85)); }
.vs__screen--custom b { position: absolute; left: 6%; right: 6%; bottom: 8%; z-index: 1; font: 850 clamp(1rem, 2.6vw, 1.7rem)/1.05 "Archivo", sans-serif; font-stretch: 110%; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.vs--custom .vs__screen { box-shadow: 0 0 0 1px var(--brass), 0 0 0 5px rgba(0, 3, 15, 0.9), 0 0 0 6px var(--brass-dim), 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 238, 0, 0.1); }
.adds { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem 2rem; }
.adds li { position: relative; padding-left: 1.5rem; color: var(--muted); }
.adds li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim); }
.adds b { color: var(--text); display: block; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 2.2rem; }
.tier {
  display: grid; gap: 4px; padding: 1.4rem 1.5rem; border-radius: 18px; text-decoration: none; color: var(--text); background: var(--plate);
  box-shadow: 0 0 0 1px rgba(201, 163, 90, 0.35) inset, 0 18px 40px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--brass) inset, 0 24px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 238, 0, 0.08); }
.tier:active { transform: translateY(1px); }
.tier__name { font: 800 1.3rem "Archivo", sans-serif; }
.tier__for { color: var(--muted); font-size: 0.95rem; }
/* no prices on the free tool pages (Chris, 2026-11-08): a big figure first thing reads as sticker shock.
   The button goes straight into the quote form, which gives the real price once it knows the job. */
.tier__how { font: 600 0.98rem "Inter", sans-serif; color: var(--aqua); margin-top: 0.4rem; }
.tier__go { margin-top: 0.9rem; justify-self: start; color: var(--navy); background: var(--yellow); font-weight: 600; font-size: 0.95rem; padding: 0.6em 1.15em; border-radius: 999px; box-shadow: 0 0 0 3px var(--brass-dim), 0 4px 0 rgba(120, 100, 0, 0.55); }
.tier:hover .tier__go { box-shadow: 0 0 0 3px var(--brass-dim), 0 4px 0 rgba(120, 100, 0, 0.55), 0 0 22px rgba(255, 238, 0, 0.4); }
.fine { margin-top: 1rem; color: var(--muted); font-size: 0.88rem; }

/* ---------- guide and questions ---------- */
.guide__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 1.4rem; }
.guide article { padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--plate); box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.12) inset; min-width: 0; }
.guide ol { margin: 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 0.45rem; }
.guide p { color: var(--muted); font-size: 0.95rem; }
.cmd { display: block; margin: 0.9rem 0 0; padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(0, 3, 15, 0.7); color: var(--aqua); font-size: 0.8rem; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.faq details { max-width: 46rem; border-bottom: 1px solid rgba(127, 208, 255, 0.14); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; font-weight: 600; font-size: 1.05rem; position: relative; transition: color 0.15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.4rem; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq summary:hover { color: var(--yellow); }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); }
.foot { margin-top: clamp(3rem, 8vh, 5rem); color: var(--muted); font-size: 0.9rem; }
.foot a { margin-left: 0.9rem; }

/* ---------- dialogs ---------- */
dialog { border: 0; border-radius: 20px; padding: 1.6rem; color: var(--text); background: #0a1430; box-shadow: 0 0 0 1px var(--brass-dim), 0 30px 80px rgba(0, 0, 0, 0.6); max-width: min(30rem, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 3, 15, 0.75); backdrop-filter: blur(4px); }
.gate h2 { font-size: 1.5rem; }
.gate p { color: var(--muted); }
.gate__url code { color: var(--aqua); }
.gate__go { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1rem; }
.explainer { max-width: min(60rem, calc(100vw - 32px)); padding: 1rem; }
.explainer video { width: 100%; border-radius: 12px; display: block; margin-bottom: 0.8rem; background: #000; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .setup__grid { grid-template-columns: minmax(0, 1fr); }
  .plate--rail { grid-row: auto; }
  .versus, .tiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .row { grid-template-columns: 70px minmax(0, 1fr); }
  .row__dot { display: none; }
  .row__thumb { width: 70px; }
  .row__acts { grid-column: 1 / -1; justify-content: flex-end; }
  .screen { padding: 8px; border-radius: 14px; }
  .home { font-size: 0.9rem; white-space: nowrap; gap: 8px; }
  .home img { width: 28px; }
  .start { font-size: 0.85rem; padding: 0.55em 0.95em; }
}