/* Hardcut FX — "Multiview". The shop is laid out like a broadcast control
   room: the catalogue is a wall of live monitors set into a light console,
   with under-monitor labels and tally lamps (green: previewing, red: on air).
   One bold object, the wall; everything around it stays quiet.
   Big Shoulders Display sets headings, Instrument Sans everything you read,
   Martian Mono (condensed) the labels, timecode and prices. Nothing under 14px. */

:root {
  color-scheme: light;
  --console: #E2E5E0;
  --console-hi: #EFF1EC;
  --ink: #101312;
  --ink-2: #4E544F;
  --rule: #BEC4BD;
  --wall: #0C0E0F;
  --wall-2: #171A1C;
  --wall-rule: #2B3033;
  --on-wall: #E7EBE5;
  --on-wall-2: #969D98;
  --pgm: #D42E23;
  --pvw: #23B25E;
  /* Focus rings: dark green on the console, bright green on the wall. */
  --focus: #0B7A3B;
  --good: #13703A;
  --bad: #B3261E;
  --checker-a: #CDD1CC;
  --checker-b: #F3F4F1;
  --key-green: #00FF00;
  --scrim: rgba(8, 10, 10, 0.66);
  --label-bg: rgba(8, 10, 10, 0.7);

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 1.25 scale from 16px; 14px is the floor. */
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: clamp(2.2rem, 5vw, 3.1rem);
  --t-hero: clamp(3rem, 8.4vw, 6.4rem);

  --gutter: clamp(16px, 4vw, 48px);
  /* One content column for every page, so nothing jumps sideways between them. */
  --max: 1360px;
  --inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--console); color: var(--ink);
  font: 400 var(--t-base) / 1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, canvas { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; max-width: 68ch; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 30; background: var(--ink); color: var(--console-hi); padding: 8px 12px; }
.mono { font-family: var(--mono); font-stretch: 75%; letter-spacing: 0.02em; }
.dim { color: var(--ink-2); }
/* Numbers that change (timecode, prices) don't jitter. */
.tc, .price, .price-big, .umd-price, time { font-variant-numeric: tabular-nums; }
.cur { font: inherit; }

/* Everything on the dark wall gets the bright focus ring. */
.wall-wrap, .stage, .pgm, .footer, .pill { --focus: var(--pvw); }

/* ---------------------------------------------------------------- type */

.eyebrow {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font: 500 var(--t-sm) / 1.4 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.08em;
}
.section-title, .hero-title, .design-title, .pack-name, .purchase-title, .page h1 {
  margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.95; letter-spacing: -0.005em; text-wrap: balance;
}
.hero-title { font-size: var(--t-hero); font-weight: 900; line-height: 0.9; }
.section-title { font-size: var(--t-xl); }
.sub-title { margin: 0; font: 600 var(--t-md) / 1.2 var(--body); }
.lede { margin: 0; max-width: 58ch; font-size: var(--t-md); line-height: 1.5; }
.section-lede { margin: 10px 0 0; max-width: 58ch; color: var(--ink-2); }

/* ---------------------------------------------------------------- masthead and footer */

.masthead {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding: 18px var(--inline);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 900 1.6rem / 1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none;
}
.wm-cut { width: 18px; height: 18px; flex: none; background: linear-gradient(118deg, var(--ink) 0 50%, var(--pgm) 50% 100%); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-weight: 500; }
.nav a { padding: 6px 0; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }

.footer {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px;
  padding: 48px var(--inline) calc(96px + env(safe-area-inset-bottom, 0px));
  background: var(--wall); color: var(--on-wall-2);
}
.footer p { margin: 0; }
.footer .wordmark { color: var(--on-wall); }
.footer .wm-cut { background: linear-gradient(118deg, var(--on-wall) 0 50%, var(--pgm) 50% 100%); }
.footer-brand { display: grid; gap: 12px; align-content: start; }
.footer-brand p { max-width: 36ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.footer-cols nav { display: grid; gap: 8px; align-content: start; }
.footer-cols a { color: var(--on-wall); text-decoration: none; width: fit-content; overflow-wrap: anywhere; }
.footer-cols a:hover { text-decoration: underline; }
.footer-head {
  margin-bottom: 2px !important; color: var(--on-wall-2);
  font: 500 var(--t-sm) / 1.4 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--console-hi);
  font: 600 var(--t-base) / 1.2 var(--body); text-decoration: none; text-align: center; cursor: pointer;
}
.btn:not(:disabled):hover { background: #000; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.btn-quiet, .btn-line { background: transparent; color: var(--ink); }
.btn-quiet:not(:disabled):hover, .btn-line:not(:disabled):hover { background: var(--console); }
.btn-block { width: 100%; }
.btn-ghost-dark { background: transparent; color: var(--on-wall); border-color: var(--wall-rule); }
.btn-ghost-dark:not(:disabled):hover { background: transparent; border-color: var(--on-wall-2); }
.link-btn, .text-btn {
  padding: 6px 0; border: 0; background: none; color: inherit; cursor: pointer;
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.icon-btn:hover { background: rgba(127, 127, 127, 0.18); }

/* ---------------------------------------------------------------- form controls */

.field { display: grid; gap: 6px; min-width: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-label { font-size: var(--t-sm); font-weight: 600; }
.field-note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.field-note:empty { display: none; }
.field-note strong { color: var(--ink); }
.input {
  width: 100%; min-height: 46px; padding: 0 12px;
  background: var(--console-hi); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.input:focus { border-color: var(--ink); outline: none; }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.input-big { min-height: 54px; font-size: var(--t-md); font-weight: 600; }
/* Marks an option that every graphic shares. */
.linked {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2);
  font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.06em;
}
.linked::before { content: ''; width: 8px; height: 8px; background: var(--pvw); }

.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--console-hi); border: 1.5px solid var(--rule); border-radius: var(--radius); }
.seg button { flex: 1 1 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 1px; background: transparent; cursor: pointer; font-weight: 500; white-space: nowrap; }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--console-hi); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--sw); cursor: pointer; }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--console-hi), 0 0 0 4px var(--ink); }
.swatch-custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ff3b3b, #ffd23b, #3bff6e, #3bd8ff, #6e3bff, #ff3bd2, #ff3b3b); }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swatch-custom:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.pic-row, .avatar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pic-thumb, .avatar-thumb { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--rule); }
/* A logo is shown whole, on a checkerboard so its see-through parts show. */
.logo-thumb { width: 74px; height: 46px; object-fit: contain; padding: 4px; border: 1.5px solid var(--rule); border-radius: var(--radius); background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 12px 12px; }
.file-btn { position: relative; overflow: hidden; min-height: 46px; padding: 0 16px; font-size: var(--t-sm); }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.status { margin: 0; }
.status:empty { display: none; }
.status.is-error { color: var(--bad); }
.status.is-good { color: var(--good); }

/* ---------------------------------------------------------------- monitors */

.monitor-bar {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  background: var(--wall); color: var(--on-wall);
  font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em;
}
.bar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc { font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; color: var(--on-wall-2); }
.tally { padding: 5px 7px 4px; background: var(--pgm); color: #fff; font: 600 var(--t-sm) / 1 var(--mono); font-stretch: 75%; letter-spacing: 0.08em; }
.bar-btn {
  display: grid; place-items: center; width: 36px; height: 32px; margin-left: -4px;
  background: var(--wall-2); border: 1px solid var(--wall-rule); border-radius: 2px; color: var(--on-wall); cursor: pointer;
}
.bar-btn svg { width: 16px; height: 16px; fill: currentColor; }
.has-footage, .pgm-screen, .screen { background-color: #2b3036; background-size: cover; background-position: center; }
.screen { position: relative; aspect-ratio: 16 / 9; }
.screen canvas, .pgm-screen canvas, .tile-screen canvas, .mv-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.screen.bg-checker { background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 20px 20px; }
.screen.bg-green { background: var(--key-green); }

/* ---------------------------------------------------------------- storefront: hero */

.hero {
  display: grid; gap: 28px; padding: 12px var(--inline) 56px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'pgm' 'source';
}
.hero-copy { grid-area: copy; display: grid; gap: 18px; align-content: start; }
.pgm { grid-area: pgm; align-self: start; margin: 0; overflow: hidden; background: var(--wall); border-radius: var(--radius); }
.source { grid-area: source; align-self: start; display: grid; gap: 16px; padding: 20px; background: var(--console-hi); border: 1.5px solid var(--rule); border-radius: var(--radius); }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'copy pgm' 'source pgm'; gap: 28px 48px; padding-top: 28px; }
  .hero-title { font-size: clamp(3.4rem, 5.4vw, 5.6rem); }
}
.pgm-screen { position: relative; display: block; aspect-ratio: 16 / 9; }
.pgm-open {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius); background: var(--label-bg); color: var(--on-wall);
  font: 600 var(--t-sm) / 1 var(--body);
}
.pgm-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.bus { display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: thin; }
.bus-btn {
  flex: 1 0 auto; min-width: 108px; min-height: 54px; padding: 8px 10px;
  display: grid; justify-items: start; align-content: center; gap: 3px; text-align: left;
  border: 1px solid var(--wall-rule); border-radius: 2px; background: var(--wall-2); color: var(--on-wall-2); cursor: pointer;
  font: 500 var(--t-sm) / 1.15 var(--body);
}
.bus-num { font: 600 var(--t-sm) / 1 var(--mono); font-stretch: 75%; }
.bus-name { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-btn:hover { color: var(--on-wall); border-color: var(--on-wall-2); }
.bus-btn[aria-pressed='true'] { background: var(--pgm); border-color: var(--pgm); color: #fff; }
.source-head { display: grid; gap: 4px; }
.source-note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.details-form { display: grid; gap: 16px; }
.form-pair { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------------------------------------------------------------- storefront: the wall */

.wall-wrap { padding: 56px var(--inline) 64px; background: var(--wall); color: var(--on-wall); }
.wall-wrap .section-lede { color: var(--on-wall-2); }
.wall-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.use-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--wall-rule); border-radius: var(--radius); }
.use-seg button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; background: transparent; color: var(--on-wall-2); cursor: pointer; font-weight: 600;
}
.use-seg button[aria-pressed='true'] { background: var(--on-wall); color: var(--wall); }
.count { font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; opacity: 0.8; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; }
.chips-scroll { flex: 1 1 420px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 6px; width: max-content; }
@media (min-width: 760px) {
  .chips-scroll { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .chips { width: auto; flex-wrap: wrap; }
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--wall-rule); border-radius: 999px; background: var(--wall-2); color: var(--on-wall); cursor: pointer;
  font-size: var(--t-sm); font-weight: 500;
}
.chip:hover { border-color: var(--on-wall-2); }
.chip[aria-pressed='true'] { background: var(--on-wall); border-color: var(--on-wall); color: var(--wall); }
.filter-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search {
  display: flex; align-items: center; gap: 8px; width: 200px; max-width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--wall-rule); border-radius: var(--radius); background: var(--wall-2);
}
.search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--on-wall-2); stroke-width: 2; }
.search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--on-wall); outline: none; }
.search input::placeholder { color: var(--on-wall-2); }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--wall-rule); border-radius: var(--radius); cursor: pointer; font-size: var(--t-sm); font-weight: 500;
}
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--pvw); }
.sort select {
  min-height: 42px; padding: 0 10px; border: 1px solid var(--wall-rule); border-radius: var(--radius);
  background: var(--wall-2); color: var(--on-wall); font-size: var(--t-sm); font-weight: 500; color-scheme: dark;
}
.result-line { display: flex; align-items: center; gap: 16px; min-height: 32px; margin: 22px 0 10px; color: var(--on-wall-2); font-size: var(--t-sm); }

.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1500px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wall-item { display: grid; }
.tile { position: relative; display: grid; background: var(--wall-2); color: var(--on-wall); text-decoration: none; outline-offset: -2px; }
.tile-screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tile-kind, .tile-shapes, .badge {
  position: absolute; padding: 5px 7px 4px; background: var(--label-bg); color: var(--on-wall);
  font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em;
}
.tile-kind { top: 8px; left: 8px; }
.tile-shapes { top: 8px; right: 8px; color: var(--on-wall-2); }
.badge { left: 8px; bottom: 8px; }
.badge-new { background: var(--on-wall); color: var(--wall); }
.badge-soon { box-shadow: inset 0 0 0 1px var(--on-wall-2); }
.umd { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-top: 1px solid var(--wall-rule); }
.lamp { width: 9px; height: 9px; flex: none; background: var(--wall-rule); transition: background 120ms; }
.umd-name, .umd-price { font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em; }
.umd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umd-price { font-weight: 600; }
.tile:hover { outline: 2px solid var(--pvw); }
.tile:hover .lamp, .tile:focus-visible .lamp { background: var(--pvw); }
.tile:active .lamp { background: var(--pgm); }
.empty { padding: 40px 0; color: var(--on-wall-2); }
.more { display: flex; margin-top: 20px; }

/* ---------------------------------------------------------------- storefront: packs */

.packs-wrap { display: grid; gap: 12px; padding: 64px var(--inline); }
.packs { display: grid; gap: 28px; margin-top: 20px; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--console-hi); border: 1.5px solid var(--rule); border-radius: var(--radius); scroll-margin-top: 16px; }
@media (min-width: 900px) { .pack { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mv { --focus: var(--pvw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--wall); }
/* A pack with one graphic so far: it fills the monitor, centred, instead of a 2x2 wall with gaps. */
.mv-one { grid-template-columns: minmax(0, 1fr); align-content: center; }
.mv-cell { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; outline-offset: -2px; }
.mv-cell:hover { outline: 2px solid var(--pvw); }
.mv-label {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 6px 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--label-bg); color: var(--on-wall);
  font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em;
}
.pack-copy { display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(20px, 3vw, 36px); }
.pack-name { font-size: clamp(2.2rem, 4vw, 3rem); }
.pack-blurb { margin: 0; color: var(--ink-2); }
.pack-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pack-list li { border-bottom: 1px solid var(--rule); }
.pack-list a { display: block; padding: 10px 0; font-weight: 500; text-decoration: none; }
.pack-list a:hover { text-decoration: underline; }
.pack-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.save { padding: 7px 9px 6px; border: 1.5px solid var(--ink); font: 600 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- how it works, questions */

.how, .faq { padding: 56px var(--inline); border-top: 1.5px solid var(--rule); }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.steps li { display: grid; gap: 6px; align-content: start; }
.step-n { font: 600 var(--t-lg) / 1 var(--mono); font-stretch: 75%; color: var(--pgm); }
.steps strong { font-size: var(--t-md); }
.steps span:last-child { max-width: 44ch; color: var(--ink-2); }
.facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--rule); }
.facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); font: 500 var(--t-sm) / 1.4 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.06em; }
.facts dd { margin: 4px 0 0; }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 64px; }
.faq-intro p { color: var(--ink-2); }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-size: var(--t-md); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-weight: 500; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); }

/* ---------------------------------------------------------------- details pill and drawer */

.pill {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); min-height: 50px; padding: 0 8px 0 16px;
  border: 1px solid var(--wall-rule); border-radius: 999px; background: var(--wall); color: var(--on-wall); cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, 150%); visibility: hidden; transition: transform 250ms ease, visibility 0s 250ms;
}
.show-pill .pill { transform: translate(-50%, 0); visibility: visible; transition: transform 250ms ease; }
.pill-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--wall-rule); }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.pill-edit { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--on-wall); color: var(--wall); font-size: var(--t-sm); font-weight: 600; }
dialog { color: var(--ink); }
dialog::backdrop { background: var(--scrim); }
.drawer { width: 100%; max-width: 520px; max-height: 88dvh; margin: auto auto 0; padding: 0; overflow: auto; border: 0; border-radius: 10px 10px 0 0; background: var(--console-hi); }
.drawer-inner { display: grid; gap: 16px; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }

/* ---------------------------------------------------------------- design page */

/* The monitor is sized from the window height, not its column width, so the
   picture, scrubber and preview buttons always fit on screen together. 260px
   is the masthead plus the monitor's own bars; it never goes below 560px wide. */
.workspace {
  --monitor-w: max(560px, calc((100dvh - 260px) * 16 / 9));
  display: grid; grid-template-columns: minmax(0, var(--monitor-w)) minmax(380px, 1fr);
  grid-template-areas: 'stage head' 'stage controls'; grid-template-rows: auto 1fr;
  gap: 18px 28px; align-items: start; padding: 8px var(--inline) 56px;
}
.design-head { grid-area: head; display: grid; gap: 10px; }
.crumb { width: fit-content; color: var(--ink-2); font-size: var(--t-sm); text-decoration: none; }
.crumb::before { content: '← ' / ''; }
.crumb:hover { color: var(--ink); text-decoration: underline; }
.design-title { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.design-blurb { margin: 0; color: var(--ink-2); }
.stage { grid-area: stage; position: sticky; top: 12px; }
.stage .monitor { margin: 0; overflow: hidden; background: var(--wall); color: var(--on-wall); border-radius: var(--radius); }
/* The screen takes the shape of what it shows (--ar, set by the page) and is
   never taller than the window allows: a vertical, square or 4:3 frame stands
   in the middle of the monitor. */
.stage .screen { aspect-ratio: var(--ar, 1.7778); width: min(100%, calc((100dvh - 260px) * var(--ar, 1.7778))); margin-inline: auto; }
.transport { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; }
.transport .icon-btn { color: var(--on-wall); }
.scrub { position: relative; flex: 1; height: 40px; }
.scrub input { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; accent-color: var(--pgm); }
/* Sound cues on the scrubber, as keyframe diamonds. */
.cue { position: absolute; top: 2px; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: var(--on-wall-2); pointer-events: none; }
.transport .tc { min-width: 74px; text-align: right; }
.view-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px; background: var(--wall-2); color: var(--on-wall-2); font-size: var(--t-sm); }
/* The preview row stays one line: in a narrow monitor the "Behind it" and
   "Zoom" words go (the Preview only tag and the button names carry it). */
.stage .monitor { container: monitor / inline-size; }
@container monitor (max-width: 820px) {
  .view-row { gap: 8px 12px; }
  .view-row > span:not(.preview-tag) { display: none; }
}
.view-row .seg { background: transparent; border-color: var(--wall-rule); }
.view-row .seg button { min-height: 36px; padding: 0 12px; color: var(--on-wall-2); font-size: var(--t-sm); }
.view-row .seg button[aria-pressed='true'] { background: var(--on-wall); color: var(--wall); }
/* Says plainly that these buttons only change the preview, not the file. */
.preview-tag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--on-wall);
  font: 500 var(--t-sm) / 1 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.06em;
}
.preview-tag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.controls { grid-area: controls; background: var(--console-hi); border: 1.5px solid var(--rule); border-radius: var(--radius); }
.group { border-bottom: 1.5px solid var(--rule); }
.group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; font: 600 var(--t-md) / 1.2 var(--body); }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after { content: '+'; font-family: var(--mono); font-weight: 500; }
.group[open] > summary::after { content: '−'; }
.group-body { display: grid; gap: 16px; padding: 0 18px 20px; }
.row { display: grid; gap: 6px; min-width: 0; }
.row > .field-label { color: var(--ink); }
.colour-row { display: flex; align-items: center; gap: 10px; }
.unavailable { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

.buy { display: grid; gap: 10px; padding: 18px; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.price-big { font: 600 2rem / 1 var(--mono); font-stretch: 75%; }
.price-note { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.progress { display: grid; gap: 6px; }
.progress-track { height: 6px; overflow: hidden; background: var(--rule); border-radius: 3px; }
.progress-fill { width: 0; height: 100%; background: var(--pgm); }
.progress-row { display: flex; justify-content: space-between; color: var(--ink-2); font-size: var(--t-sm); }
.owned-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--t-md) / 1.2 var(--body); }
.owned-title svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--pvw); fill: none; stroke: var(--wall); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.owned-note { margin: 6px 0 0; color: var(--ink-2); }

/* How to use the file: numbered steps, then the exact settings to type in,
   set in code so they're easy to copy. */
.setup, .specs { padding: 18px; border-top: 1.5px solid var(--rule); }
.specs-title { margin: 0 0 12px; font: 600 var(--t-md) / 1.2 var(--body); }
.setup-steps { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 1.3em; }
.setup-steps li::marker { color: var(--pgm); font-weight: 700; }
.setup-settings, .specs dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.setup-settings dt, .specs dt { color: var(--ink-2); font: 500 var(--t-sm) / 1.6 var(--mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em; }
.setup-settings dd, .specs dd { margin: 0; min-width: 0; }
.setup-settings code { padding: 2px 7px; border-radius: 3px; background: var(--console); font: 500 var(--t-sm) / 1.5 var(--mono); user-select: all; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- after payment */

.purchase {
  width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 28px 24px 24px;
  background: var(--console-hi); border: 0; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.purchase[open] { animation: purchase-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes purchase-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.purchase-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.purchase-close:hover { color: var(--ink); }
.purchase-mark { width: 64px; height: 64px; margin-bottom: 16px; }
.purchase-mark svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.purchase-mark .ring { stroke: var(--rule); stroke-width: 2.5; }
.purchase-mark .tick { stroke: var(--wall); stroke-width: 3.2; stroke-dasharray: 30; stroke-dashoffset: 30; }
.purchase[data-state='confirming'] .ring { stroke: var(--pgm); stroke-dasharray: 22 66; transform-origin: 16px 16px; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.purchase[data-state='done'] .ring { fill: var(--pvw); stroke: var(--pvw); }
.purchase[data-state='done'] .tick { animation: tick-draw 420ms 120ms cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.purchase[data-state='pending'] .ring, .purchase[data-state='error'] .ring { stroke: var(--pgm); }
.purchase-title { margin: 0 0 8px; padding-right: 28px; font-size: 2.2rem; }
.purchase-body { margin: 0 0 20px; color: var(--ink-2); }
.purchase-actions { display: grid; gap: 8px; }
.purchase-list { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 6px; }
.purchase-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--console); border-left: 4px solid var(--pvw); text-decoration: none; }
.purchase-list a span:last-child { color: var(--ink-2); }
.key-box { display: grid; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.key-row code { flex: 1; padding: 8px 10px; background: var(--console); font: 500 var(--t-sm) / 1.4 var(--mono); word-break: break-all; user-select: all; }

/* Checkout overlay used by the local test checkout. */
.sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.sheet iframe { width: min(460px, 100%); height: min(560px, 100%); border: 0; border-radius: 6px; background: #fff; }

/* ---------------------------------------------------------------- text pages */

.page { padding: 28px var(--inline) 64px; }
.page > * { max-width: 760px; }
.page h1 { margin: 8px 0 18px; font-size: var(--t-xl); }
.page h2 { margin: 32px 0 8px; font: 600 var(--t-md) / 1.2 var(--body); }
.page li { max-width: 66ch; margin-bottom: 6px; }
.restore-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 18px 0; }
.restore-form .field { flex: 1 1 320px; margin: 0; }
.unlocked-list { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.unlocked-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 12px 14px; background: var(--console-hi); border-left: 4px solid var(--pvw); text-decoration: none; }
.unlocked-list a span:last-child { color: var(--ink-2); }

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'stage' 'controls'; grid-template-rows: none; padding-top: 12px; }
  .stage { top: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); }
  .stage .monitor { border-radius: 0; }
  .faq, .footer { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nav { gap: 2px 16px; font-size: var(--t-sm); }
  .use-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .use-seg button { justify-content: center; padding: 0 8px; }
  .filter-tools { width: 100%; }
  .search { flex: 1 1 160px; width: auto; }
  .swatches { gap: 6px; }
  .swatch { width: 34px; height: 34px; }
  .unlocked-list a { flex-direction: column; }
  /* Keep the sticky monitor short so the options have room under it: the
     preview buttons go on one line that scrolls sideways. */
  .view-row { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 8px 10px; scrollbar-width: none; }
  .view-row::-webkit-scrollbar { display: none; }
  .view-row .seg { flex: none; flex-wrap: nowrap; }
  .view-row .seg button { min-height: 34px; padding: 0 10px; }
  .transport { padding: 4px 10px 4px 4px; }
  .stage .screen { width: min(100%, calc(36dvh * var(--ar, 1.7778))); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .purchase[open] { animation: none; }
  .purchase[data-state='done'] .tick { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after { transition: none !important; }
}