/* ==========================================================================
   Projects: seven apps, each in its own colours.
   The opener is the one scroll-scrubbed scene: a pinned track of seven app
   posters that slides until the last one is fully in view. Each chapter then
   takes its app's own colours (sampled from its logo and its real UI), and
   the walkthroughs pin a device beside a list of steps that lives in its own
   grid column, so no line can ever cross a device.
   ========================================================================== */

:root {
  --gap: clamp(16px, 1.6vw, 28px);
  --head-pad: clamp(88px, 11vw, 168px);
  --step: 64dvh;            /* scroll per walkthrough step */
  --tail: 22dvh;            /* hold on the last step before the stage leaves */
}

/* Each app's colours: field, text, a quieter text that still reads at 4.5:1,
   and the colour its buttons take. */
.app--ankitool, .card--ankitool { --app: #f3cc4b; --app-ink: #1c1830; --app-muted: #5a4813; --app-btn: #1c1830; --app-on-btn: #f3cc4b; }
.app--gumhop,   .card--gumhop   { --app: #ff5a7e; --app-ink: #1c1830; --app-muted: #5c1029; --app-btn: #1c1830; --app-on-btn: #ffd6df; }
/* On the two dark fields the step you're on also takes the app's warm accent
   (PrimerMed's stethoscope coral, Jireader's yellow), large type only */
.app--primermed,.card--primermed{ --app: #1e6e66; --app-ink: #ffffff; --app-muted: #d5ece7; --app-btn: #ffffff; --app-on-btn: #164f49; --app-on: #ffb9a3; }
.app--qpkit,    .card--qpkit    { --app: #ff5c35; --app-ink: #1c1830; --app-muted: #4a1407; --app-btn: #191918; --app-on-btn: #fffdf8; }
.app--jireader, .card--jireader { --app: #3f5fcb; --app-ink: #ffffff; --app-muted: #e6ebfc; --app-btn: #ffbe1e; --app-on-btn: #1c1830; --app-name: #ffbe1e; --app-on: #ffbe1e; }
.app--vid3k,    .card--vid3k    { --app: #20e070; --app-ink: #0a0a0a; --app-muted: #0d4d2a; --app-btn: #0a0a0a; --app-on-btn: #20e070; }
.app--gamehour, .card--gamehour { --app: #00bcd5; --app-ink: #1c1830; --app-muted: #0b3d47; --app-btn: #1c1830; --app-on-btn: #ffffff; }

/* ---------------------------------------------------------------------------
   Logos: real app icons. The ones drawn on a transparent ground sit on a
   white icon tile; the ones that are already a tile stand as they are.
   --------------------------------------------------------------------------- */
.logo { --s: 64px; display: block; flex: none; width: var(--s); height: var(--s); border-radius: 23%; object-fit: contain; }
.logo--tile { background: #ffffff; padding: calc(var(--s) * .11); box-shadow: 0 1px 2px rgba(28, 24, 48, .14), 0 6px 18px -8px rgba(28, 24, 48, .35); }
.logo--svg { border-radius: 23%; }

/* ---------------------------------------------------------------------------
   Opener: the headline, then the seven posters
   --------------------------------------------------------------------------- */
.opener { position: relative; background: var(--paper); contain: layout paint; }
.opener__stage { position: relative; }
.opener__track {
  display: grid; gap: clamp(36px, 5vw, 64px);
  padding: calc(var(--chrome-h) + clamp(40px, 7vw, 96px)) var(--gutter) clamp(64px, 8vw, 112px);
}
.opener__intro { max-width: 34rem; }
.opener__title {
  font: 760 clamp(60px, 8.6vw, 140px)/.86 var(--font-display); letter-spacing: -.045em;
  text-wrap: balance;
}
.opener__lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 36ch; font-size: var(--step-lede); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.opener__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.card-slot { display: flex; container-type: inline-size; }

/* A poster: the app's colour, its icon and name, a line, its real screens */
.card {
  --c: var(--app); --c-ink: var(--app-ink);
  position: relative; display: flex; flex-direction: column; width: 100%;
  aspect-ratio: 25 / 32;
  padding: 7cqi 6.5cqi 6.5cqi; border-radius: 30px; overflow: hidden;
  background: var(--c); color: var(--c-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(28, 24, 48, .08), 0 22px 44px -28px rgba(28, 24, 48, .45);
  transition: transform var(--dur-ui) var(--ease-out);
}
/* Lifts only when the page is still: a poster passing under a resting pointer
   during a scroll never starts a transition (.is-scrolling, set by page.js) */
html:not(.is-scrolling) .card:hover { transform: translateY(-4px); }
.card:focus-visible { outline: 3px solid var(--ink-fixed); outline-offset: 5px; border-radius: 30px; }
.card__head { display: flex; align-items: center; gap: 3.6cqi; }
.card__logo { --s: 13.5cqi; }
.card__name { font: 720 10.6cqi/.95 var(--font-display); letter-spacing: -.04em; }
.card--jireader .card__name { color: var(--app-name); }
.card__line { margin-top: 3.4cqi; max-width: 30ch; font: 500 max(15px, 3.6cqi)/1.35 var(--font-body); }
.nobr { white-space: nowrap; }
/* devices.css centres the address pill as a flex box; the text inside it
   takes the ellipsis so a long address never clips mid-letter */
.url-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__stage { position: relative; flex: 1; margin-top: 5cqi; min-height: 0; }

/* Devices inside a poster, sized in the poster's own units */
.card .browser { --bar: 6.4cqi; border-radius: 2.6cqi; }
.card .browser__bar { padding: 0 2.6cqi; }
.card .browser__dots { gap: 1.3cqi; }
.card .browser__dots i { width: 1.9cqi; height: 1.9cqi; }
.card .browser__url { height: 4.2cqi; padding: 0 2.2cqi; gap: 1cqi; border-radius: 1.3cqi; font-size: max(9px, 2.1cqi); max-width: 64%; }
.card .browser__url::before { width: 1.5cqi; height: 1.8cqi; }
/* One browser: full width at the foot. A browser and a phone: the browser
   up and to the right, the phone standing in front of its lower-left corner. */
.card__browser { position: absolute; left: 0; right: 0; bottom: 2cqi; }
.card__browser--back { left: auto; right: 0; width: 80%; bottom: 26cqi; }
.card__phone { position: absolute; left: 0; bottom: 0; }
.card__trio { position: absolute; inset: 0; }
.card__trio .iphone { position: absolute; bottom: 0; }
.card__phone--a { left: 0; transform: rotate(-6deg); transform-origin: 50% 100%; }
.card__phone--b { left: calc(50% - 16.5cqi); bottom: 6cqi !important; z-index: 1; }
.card__phone--c { right: 0; transform: rotate(6deg); transform-origin: 50% 100%; }

/* Live: the stage pins and the track slides. page.js sets --travel from the
   last poster's right edge, so the pin releases with it fully in view. */
.is-live .opener { height: calc(100dvh + var(--travel, 0px) + var(--hold, 0px)); }
/* clip, not hidden: a clipped box can't be scrolled by focus, so a poster
   reached with Tab never shifts the track under page.js's transform */
.is-live .opener__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; overflow: clip; }
.is-live .opener__track {
  --card-h: clamp(380px, calc(100dvh - var(--chrome-h) - 92px), 640px);
  --card-w: min(calc(var(--card-h) * .78), 80vw);
  display: flex; align-items: center; gap: 0; height: 100%;
  width: max-content;
  padding: calc(var(--chrome-h) + 8px) var(--gutter) 20px;
  will-change: transform;
}
.is-live .opener__intro { flex: none; width: min(36rem, 34vw); margin-right: clamp(40px, 5vw, 96px); }
.is-live .opener__cards { display: flex; gap: var(--gap); }
.is-live .card-slot { flex: none; width: var(--card-w); }
.is-live .card { aspect-ratio: auto; height: var(--card-h); }

/* ---------------------------------------------------------------------------
   Chapters
   --------------------------------------------------------------------------- */
.app {
  --bg: var(--app); --ink: var(--app-ink); --ink-muted: var(--app-muted);
  --line: color-mix(in srgb, var(--app-ink) 20%, transparent);
  --focus: var(--app-ink);
  position: relative; background: var(--app); color: var(--app-ink);
  /* Each chapter keeps its painting to itself: a pinned stage can never be
     assumed to overlap the chapters after it, so the browser doesn't promote
     whole chapters to giant layers, and a change inside one chapter never
     repaints or relays out another. (clip, not hidden: sticky still works) */
  contain: layout paint;
  padding-bottom: 2px;      /* a pinned stage's last position never touches the next chapter */
}
.app ::selection { background: var(--app-ink); color: var(--app); }
.app__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--head-pad) var(--gutter) clamp(40px, 5vw, 72px);
  max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto;
}
.app__title {
  display: flex; align-items: center; gap: .22em; min-width: 0;
  font: 760 clamp(60px, 9vw, 158px)/.86 var(--font-display); letter-spacing: -.048em;
}
.app__logo { --s: .86em; }
.app__name { min-width: 0; color: var(--app-name, inherit); }
.app__line { font: 650 var(--step-h3)/1.18 var(--font-display); letter-spacing: -.015em; max-width: 30ch; text-wrap: balance; }
.app__story { display: grid; gap: 14px; }
.app__story p { font-size: var(--step-lede); line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.app__story .app__how { font-size: 16.5px; line-height: 1.55; color: var(--app-muted); }
.app__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.app__btn { background: var(--app-btn); color: var(--app-on-btn); }
.app__btn:hover { background: color-mix(in srgb, var(--app-btn) 86%, var(--app)); }
.app__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 16px/1.6 var(--font-body); color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.app__link:hover { text-decoration-color: currentColor; }
/* a link to the Chrome Web Store carries the store's logo */
.app__btn.is-store, .app__link.is-store { display: inline-flex; align-items: center; gap: .55em; }
.cws { width: 1.5em; height: 1.5em; flex: none; }
.app__btn.is-store .cws { margin-left: -.2em; }

/* Seven heads, no two neighbours alike */
.head--a .app__title { grid-column: 1 / span 7; grid-row: 1 / span 3; align-self: start; }
.head--a .app__line { grid-column: 8 / span 5; grid-row: 1; }
.head--a .app__story { grid-column: 8 / span 5; grid-row: 2; margin-top: 22px; }
.head--a .app__links { grid-column: 8 / span 5; grid-row: 3; margin-top: 26px; }

.head--b { justify-items: center; text-align: center; }
.head--b > * { grid-column: 2 / span 10; }
.head--b .app__title { font-size: clamp(64px, 11vw, 190px); }
.head--b .app__line { margin-top: clamp(22px, 2.6vw, 36px); }
.head--b .app__story { margin-top: 18px; justify-items: center; }
.head--b .app__links { justify-content: center; margin-top: 26px; }

.head--c .app__title { grid-column: 5 / span 8; grid-row: 1; justify-content: flex-end; }
.head--c .app__line { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(28px, 3vw, 44px); }
.head--c .app__story { grid-column: 7 / span 6; grid-row: 2; margin-top: clamp(28px, 3vw, 44px); }
.head--c .app__links { grid-column: 7 / span 6; grid-row: 3; margin-top: 24px; }

/* Jireader: the line stands beside the name; the story and how it's built
   share the row beneath */
.head--e .app__title { grid-column: 1 / span 7; grid-row: 1; }
.head--e .app__line { grid-column: 8 / span 5; grid-row: 1; align-self: end; padding-bottom: .4em; font-size: clamp(24px, 2.3vw, 36px); }
.head--e .app__story { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.head--e .app__story p:first-child { grid-column: 1; padding-right: 8%; }
.head--e .app__story .app__how { grid-column: 2; }
.head--e .app__links { grid-column: 1 / span 7; grid-row: 3; margin-top: 26px; }

.head--f .app__title { grid-column: 1 / -1; font-size: clamp(72px, 14vw, 240px); }
.head--f .app__line { grid-column: 1 / span 5; margin-top: clamp(24px, 3vw, 44px); }
.head--f .app__story { grid-column: 7 / span 6; margin-top: clamp(24px, 3vw, 44px); }
.head--f .app__links { grid-column: 7 / span 6; margin-top: 24px; }

/* ---------------------------------------------------------------------------
   Walkthroughs. Static by default (no JS, reduced motion, short screens):
   each step shows its own still. Live: one stage pins, the device swaps its
   screens as you scroll, and the list marks the step you're on.
   --------------------------------------------------------------------------- */
.wt { position: relative; padding: 0 var(--gutter) clamp(72px, 9vw, 128px); contain: layout paint; isolation: isolate; }
.wt__stage { max-width: 1440px; margin: 0 auto; }
.wt__device { display: none; }
.wt__tag { display: none; }
.wt__list { display: grid; gap: clamp(40px, 5vw, 72px); }
.wt__words { display: contents; }   /* a box of its own only on a phone's pinned stage */
.wt__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: 8px; align-items: start; }
.wt__t { grid-column: 1; font: 650 clamp(21px, 1.7vw, 27px)/1.18 var(--font-display); letter-spacing: -.015em; }
.wt__d { grid-column: 1; max-width: 40ch; font-size: 16.5px; line-height: 1.55; }
.wt__still { grid-column: 2; grid-row: 1 / span 3; position: relative; margin: 0 0 6% 0; container-type: inline-size; }
/* Phones are sized from their box in container units (devices.css needs a length) */
.wt__companion { container-type: inline-size; }
.wt__still-phone { position: absolute; right: -2%; bottom: -8%; }
.wt__go {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
.wt__go:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* Layers inside the live device: each wipes up over the one before */
.wt__layer { position: absolute; inset: 0; background: #ffffff; }
.wt__layer + .wt__layer { clip-path: inset(calc((1 - var(--r, 0)) * 100%) 0 0 0); }
.wt__layer.is-off { visibility: hidden; }
.wt__layer > img, .wt__layer > video, .qv__layer > img, .qv__layer > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}
.clip { background: transparent; }
.wt__layer > img.popup, .wt__still img.popup {
  left: auto; right: 1.2%; top: 0; bottom: auto; width: 29%; height: auto; object-fit: contain;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 0 1px rgba(28, 24, 48, .1), 0 18px 36px -14px rgba(28, 24, 48, .35);
}
.wt__still .browser__view > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wt__still .browser__view > img.popup { position: absolute; }

/* A phone's screens, each with its own status band, wiping like the browser's */
.pls { position: absolute; inset: 0; z-index: 1; }
.pl { position: absolute; inset: 0; padding-top: 13.72%; background: var(--sb, #ffffff); }
.pl > img, .pl > video, .pl > .clip__poster {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.pl > .clip__poster, .pl > video { position: absolute; left: 0; right: 0; bottom: 0; top: 13.72%; width: 100%; height: auto; }
.pl > video { height: calc(100% - 13.72%); }
.pl > .clip__poster { height: calc(100% - 13.72%); }
.wt__companion .pl + .pl { clip-path: inset(calc((1 - var(--r, 0)) * 100%) 0 0 0); }
.wt__companion .pl.is-off { visibility: hidden; }

/* The tab strip of PrimerMed's window */
.win-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 8px 12px 0 16px; background: #e9e5ef; }
.win-tabs .browser__dots { align-self: center; margin: 0 22px 0 2px; padding-bottom: 6px; }
.wt--tabs .browser__bar .browser__dots { visibility: hidden; }
.win-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 196px;
  height: 34px; padding: 0 14px 0 10px; border-radius: 9px 9px 0 0;
  font: 500 12.5px/1 var(--font-body); color: #55506a; white-space: nowrap;
}
.win-tab.is-on { background: #f4f2f7; color: #1c1830; }
.win-tab__icon { --s: 16px; padding: 1px; border-radius: 4px; box-shadow: none; }
.win-tab__t { overflow: hidden; text-overflow: ellipsis; }

/* ---- Live, wide screens ---------------------------------------------------- */
@media (min-width: 1000px) and (min-height: 600px) {
  .is-live .wt { height: calc(100dvh + (var(--n) - 1) * var(--step) + var(--tail)); padding: 0; }
  .is-live .wt__stage {
    position: sticky; top: 0; height: 100dvh; max-width: none;
    display: grid; align-items: center; column-gap: clamp(48px, 5vw, 96px);
    padding: calc(var(--chrome-h) + 12px) var(--gutter) 28px;
    overflow: clip;           /* its layer is exactly the screen, shadows and all */
  }
  .is-live .wt__device { display: block; position: relative; justify-self: center; }
  .is-live .wt__still { display: none; }
  .is-live .wt__list { gap: 0; align-content: center; }
  .is-live .wt__item { display: block; position: relative; padding: 14px 0 14px 26px; }
  .is-live .wt__item::before, .is-live .wt__item::after {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  }
  .is-live .wt__item::before { background: color-mix(in srgb, var(--app-ink) 22%, transparent); }
  .is-live .wt__item::after { background: var(--app-ink); transform-origin: 50% 0; transform: scaleY(var(--f, 0)); }
  .is-live .wt__t, .is-live .wt__d { color: var(--app-muted); transition: color var(--dur-ui) var(--ease-out); }
  .is-live .wt__item.is-on .wt__d { color: var(--app-ink); }
  .is-live .wt__item.is-on .wt__t { color: var(--app-on, var(--app-ink)); }
  .is-live .wt__item::after { background: var(--app-on, var(--app-ink)); }
  .is-live .wt__d { margin-top: 6px; font-size: 16px; }

  /* The browser is as wide as its column allows and as tall as the screen allows */
  .is-live .wt__browser { width: 100%; }

  /* Anki Tool: the browser left, the steps right */
  .is-live .wt--desk .wt__stage { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .is-live .wt--desk .wt__device { width: min(100%, calc((100dvh - var(--chrome-h) - 80px - 40px) * 1.6)); }

  /* PrimerMed: the steps left, a window with real tabs right */
  .is-live .wt--tabs .wt__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .is-live .wt--tabs .wt__list { grid-column: 1; grid-row: 1; }
  .is-live .wt--tabs .wt__device { grid-column: 2; grid-row: 1; width: min(100%, calc((100dvh - var(--chrome-h) - 80px - 82px) * 1.6)); }

  /* Jireader: the phone leads, the browser stands behind it, the steps right */
  .is-live .wt--phone .wt__stage { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .is-live .wt--phone .wt__device { width: min(100%, calc((100dvh - var(--chrome-h) - 80px - 40px) * 1.6 / .84)); padding-left: 16%; }
  .is-live .wt--phone .wt__companion { position: absolute; left: 0; bottom: -7%; width: 25%; z-index: 2; }

  /* GumHop: the browser in the spotlight, its phone beside it, the steps
     in a rail underneath. The browser takes 82.5% of the device box (page.js
     sizes the box from the browser, /.825), the phone 22.5% at its right */
  .is-live .wt--spot .wt__stage { grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(24px, 3dvh, 40px); padding-bottom: clamp(24px, 3dvh, 40px); }
  .is-live .wt--spot .wt__device { align-self: end; width: min(calc(100% - 4vw), var(--fit-w, calc((100dvh - var(--chrome-h) - 300px) * 1.6 / .825))); padding-right: 17.5%; }
  .is-live .wt--spot .wt__companion { position: absolute; right: 0; bottom: 0; width: 22.5%; z-index: 2; }
  .is-live .wt--spot .wt__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 28px); max-width: 1500px; width: 100%; justify-self: center; }
  .is-live .wt--spot .wt__item { padding: 18px 0 0; }
  .is-live .wt--spot .wt__item::before, .is-live .wt--spot .wt__item::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; }
  .is-live .wt--spot .wt__item::after { transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
  .is-live .wt--spot .wt__t { font-size: clamp(17px, 1.25vw, 21px); }
  .is-live .wt--spot .wt__d { font-size: 14.5px; line-height: 1.45; }

  .wt__companion { transition: none; }
  .is-live .wt__companion { opacity: var(--c, 0); transform: translate3d(0, calc((1 - var(--c, 0)) * 24px), 0); }
}

/* ---- Live, phones and tablets: the device holds at the top, the step you're
   on reads underneath, and a row of segments shows how far along you are -- */
@media (max-width: 999px) and (min-height: 600px) {
  .is-live .wt { height: calc(100dvh + (var(--n) - 1) * 70dvh + 16dvh); padding: 0; }
  .is-live .wt__stage {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; gap: 18px;
    padding: calc(var(--chrome-h) + 4px) var(--gutter) 24px;
  }
  .is-live .wt__device { display: block; position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
  .is-live .wt__still { display: none; }
  .is-live .wt__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 6px; row-gap: 0; max-width: 640px; width: 100%; margin: 0 auto; }
  .is-live .wt__item { display: contents; }
  .is-live .wt__item::before { content: ""; grid-row: 1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--app-ink) 22%, transparent); }
  .is-live .wt__item.is-on::before, .is-live .wt__item.is-done::before { background: var(--app-ink); }
  /* Every step's words share one cell, so the block is always as tall as the
     longest step and nothing above it moves when the step changes */
  .is-live .wt__words { display: block; grid-column: 1 / -1; grid-row: 2; }
  .is-live .wt__item:not(.is-on) .wt__words { opacity: 0; pointer-events: none; }
  .is-live .wt__t { margin-top: 16px; font-size: 21px; }
  .is-live .wt__go { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* a 44 px target, same line */
  .is-live .wt__d { margin-top: 8px; font-size: 16px; }
  /* the app's icon and name ride along at the top of the pinned stage */
  .is-live .wt__tag {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; margin: 0 auto 2px;
    font: 700 19px/1 var(--font-display); letter-spacing: -.02em; color: var(--app-name, var(--app-ink));
  }
  .wt__tag-logo { --s: 30px; }
  .wt__tag-logo.logo--tile { box-shadow: none; }
  /* the phone stands in front of the browser's lower corner; the device keeps
     room under it so the segments below never meet the phone */
  .is-live .wt--phone .wt__device, .is-live .wt--spot .wt__device { margin-bottom: 7%; }
  .is-live .wt--phone .wt__companion { position: absolute; left: -1%; bottom: -9%; width: 25%; z-index: 2; }
  .is-live .wt--spot .wt__companion { position: absolute; right: -1%; bottom: -9%; width: 25%; z-index: 2; }
  .is-live .wt__companion { opacity: var(--c, 0); }
  .win-tabs { padding-left: 64px; }
  .win-tab { flex-basis: 150px; }
}

/* ---------------------------------------------------------------------------
   qpkit: a giant 26, then the frame of 26 tools around the one website
   --------------------------------------------------------------------------- */
.q-head { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: var(--head-pad) var(--gutter) clamp(64px, 8vw, 120px); }
.q-head__26 {
  grid-column: 1 / span 6; grid-row: 1; align-self: center;
  font: 800 clamp(200px, 33vw, 560px)/.74 var(--font-display); letter-spacing: -.07em;
  color: #191918; margin-left: -.04em;
}
.q-head .app__head { grid-column: 7 / span 6; grid-row: 1; display: block; padding: 0; margin: 0; align-self: center; }
.head--d .app__line { margin-top: clamp(22px, 2.4vw, 34px); }
.head--d .app__story { margin-top: 18px; }
.head--d .app__links { margin-top: 26px; }

.q26 {
  --q-ink: #fffdf8; --q-muted: #c9c2b5;
  background: #191918; color: var(--q-ink);
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(72px, 9vw, 128px);
}
.q26 ::selection { background: #ff5c35; color: #191918; }
.q26__frame {
  --g: clamp(8px, .7vw, 12px);
  --tw: min(calc((100vw - 2 * var(--gutter) - 7 * var(--g)) / 8), calc((100dvh - var(--chrome-h) - 56px - 6 * var(--g)) / 7 * 1.6), 228px);
  --th: calc(var(--tw) / 1.6);
  display: grid; justify-content: center;
  grid-template-columns: repeat(8, var(--tw)); grid-template-rows: repeat(7, var(--th));
  gap: var(--g);
}
.q26__tools { display: contents; }
.tool-slot { display: block; min-width: 0; }
.tool {
  position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  border-radius: clamp(8px, .7vw, 12px); overflow: hidden; cursor: pointer;
  background: var(--t); color: var(--on-t); text-align: left;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t) 70%, #ffffff);
  transition: transform var(--dur-ui) var(--ease-out);
}
.tool__shot { position: absolute; left: 0; top: 0; width: 100%; height: 72%; object-fit: cover; object-position: 0 0; background: #ffffff; }
/* the name band holds one line at 28% of the tile and grows upward for a
   second, with room above and below it either way */
.tool__name {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 28%;
  display: flex; align-items: center; padding: .42em 9% .5em;
  background: var(--band, var(--t));
  font: 650 clamp(11px, .78vw, 14px)/1.18 var(--font-body); letter-spacing: -.005em;
  text-wrap: balance;
}
.tool--plain { background: var(--band, var(--t)); }
.tool--plain .tool__name { height: 100%; align-items: flex-end; padding: 9%; font-size: clamp(12px, .92vw, 16px); white-space: normal; }
html:not(.is-scrolling) .tool:hover { transform: translateY(-3px); }
.tool[aria-pressed="true"] { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--q-ink); }
.tool:focus-visible { outline: 3px solid var(--q-ink); outline-offset: 3px; }

.q26__centre {
  grid-row: 2 / 7; grid-column: 2 / 8;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 2vw, 36px); align-items: center;
  padding: calc(var(--g) * 1.6) calc(var(--g) * 1.6);
}
.q26__caption { display: grid; gap: 12px; align-content: center; min-width: 0; }
.q26__name { font: 700 clamp(22px, 1.9vw, 34px)/1.05 var(--font-display); letter-spacing: -.02em; }
.q26__desc { color: var(--q-muted); font-size: clamp(14.5px, 1.05vw, 17px); line-height: 1.5; }
/* a long tool name wraps the link to two lines: the line height leaves room
   for the first line's underline above the second */
.q26__open {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  font: 600 15px/1.6 var(--font-body); color: var(--q-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: #ff5c35;
}
.q26__browser { width: calc((5 * var(--th) + 4 * var(--g) - 3.2 * var(--g) - 40px) * 1.6); }
.q26__browser .browser__view { background: #f6efe6; }
.qv__layer { position: absolute; inset: 0; }
.qv__layer[hidden] { display: block; visibility: hidden; }

/* ---------------------------------------------------------------------------
   vid3k
   --------------------------------------------------------------------------- */
.v3 { display: grid; justify-items: center; padding: 0 var(--gutter) clamp(88px, 10vw, 150px); }
.v3__browser { width: min(100%, 1080px); }
.v3-splash { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4%; background: #0a0a0a; }
.v3-splash__mark { width: 15%; height: auto; aspect-ratio: 1; }
.v3-splash__word { font: 700 clamp(18px, 4cqi, 56px)/1 var(--font-display); color: #fafafa; letter-spacing: -.03em; }
.v3__browser .browser__view, .card--vid3k .browser__view { container-type: inline-size; }
.v3-splash__word { font-size: 7cqi; }
/* With screens: a viewer above an editing timeline of frames */
.v3 { gap: clamp(18px, 2.2vw, 28px); }
.v3__viewer { position: relative; width: min(100%, 1180px); padding-right: 15%; }
.v3__viewer .v3__browser { width: 100%; }
.v3__phone {
  position: absolute; right: 0; bottom: 0; width: 17%; z-index: 2; container-type: inline-size;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.v3__phone.is-off { opacity: 0; transform: translateY(14px); pointer-events: none; }
.v3__phone .pl[hidden] { display: block; visibility: hidden; }
.v3__layer { position: absolute; inset: 0; background: #0b0b0c; }
.v3__layer[hidden] { display: block; visibility: hidden; }
.v3__layer > img, .v3__layer > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.v3__track {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px;
  width: min(100%, 1180px);
  padding: 12px; border-radius: 18px; background: #0a0a0a;
}
.v3__frame {
  display: grid; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0;
  background: none; color: #d4d4d8; text-align: left; cursor: pointer;
}
@media (max-width: 760px) {
  .v3__viewer { padding-right: 0; margin-bottom: 8%; }
  .v3__phone { width: 26%; right: -1%; bottom: -12%; }
  /* on a phone the frames run sideways under a swipe */
  .v3__track { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .v3__track > li { flex: none; width: 34vw; scroll-snap-align: start; }
}
.v3__thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; transition: transform var(--dur-ui) var(--ease-out); }
html:not(.is-scrolling) .v3__frame:hover .v3__thumb { transform: translateY(-2px); }
.v3__frame[aria-pressed="true"] .v3__thumb { outline: 3px solid #20e070; outline-offset: 2px; }
.v3__frame[aria-pressed="true"] .v3__label { color: #ffffff; }
.v3__label { padding: 0 2px 2px; font: 600 13.5px/1.3 var(--font-body); }
.v3__frame:focus-visible { outline: 2px solid #20e070; outline-offset: 4px; border-radius: 10px; }

/* ---------------------------------------------------------------------------
   GameHour: the lobby beside the head, then the four games
   --------------------------------------------------------------------------- */
.gh-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: var(--head-pad) var(--gutter) clamp(48px, 6vw, 88px); }
.gh-top .app__head { grid-column: 1 / span 7; display: block; padding: 0; margin: 0; container-type: inline-size; }
/* the name and its logo fit the head's own width (about 6 em at this
   tracking), never running under the lobby's phones beside it */
.head--g .app__title { font-size: min(clamp(60px, 9vw, 158px), 16cqi); }
.head--g .app__line { margin-top: clamp(22px, 2.6vw, 36px); }
.head--g .app__story { margin-top: 18px; }
.head--g .app__links { margin-top: 26px; }
.gh-lobby { grid-column: 8 / span 5; position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6%; container-type: inline-size; }
.gh-lobby__guest { margin-bottom: 9cqi; }

.games {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px);
  max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 8vw, 120px);
}
.game { display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center; container-type: inline-size; }
.game__name { font: 700 clamp(24px, 2.1vw, 34px)/1.05 var(--font-display); letter-spacing: -.02em; }
.game__phone .pl { transition: opacity var(--dur-ui) var(--ease-out); }
.game__phone .pl[hidden] { display: block; visibility: hidden; opacity: 0; }
.game__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.game__btn {
  min-height: 44px; padding: 0 16px; border-radius: var(--pill); border: 1.5px solid color-mix(in srgb, var(--app-ink) 30%, transparent);
  background: transparent; color: var(--app-ink); font: 600 14px/1 var(--font-body);
  transition: background-color var(--dur-micro) ease-out, color var(--dur-micro) ease-out, border-color var(--dur-micro) ease-out;
}
.game__btn:hover { border-color: var(--app-ink); }
.game__btn[aria-pressed="true"] { background: var(--app-ink); border-color: var(--app-ink); color: #ffffff; }
.game__rule { max-width: 30ch; font-size: 16px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   The lightbox for qpkit tools on small screens
   --------------------------------------------------------------------------- */
.lb { width: min(100% - 24px, 980px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 22px; background: #191918; color: #fffdf8; overflow: auto; }
.lb::backdrop { background: rgba(21, 17, 43, .72); }
.lb[open] { animation: lb-in 220ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: translateY(8px); } }
.lb__box { display: grid; gap: 18px; padding: 16px; }
.lb__text { display: grid; gap: 8px; padding: 0 4px; }
.lb__name { font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.lb__desc { color: #c9c2b5; }
.lb__open { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: #ff5c35; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.lb__nav { display: flex; gap: 8px; justify-content: flex-end; }
.lb__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #2c2b29; color: #fffdf8; }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:hover { background: #3a3936; }
.lb__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* On a phone a tool opens as its own phone layout, in an iPhone */
.lb__fig { display: grid; justify-items: center; }
.lb__fig > .browser { width: 100%; }
.lb__phone { display: none; }
@media (max-width: 600px) {
  .lb.has-phone .lb__browser { display: none; }
  .lb.has-phone .lb__phone { display: block; }
}

/* ---------------------------------------------------------------------------
   Tablet and phone
   --------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .app__head { padding-top: clamp(72px, 14vw, 120px); }
  .app__head > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .head--a .app__story, .head--c .app__story, .head--f .app__story { margin-top: 18px; }
  .head--a .app__line, .head--c .app__line, .head--f .app__line { margin-top: 22px; }
  .head--c .app__title { justify-content: flex-start; }
  .head--e .app__story { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 18px; }
  .head--e .app__story > p { grid-column: 1 !important; padding-right: 0 !important; }
  .head--e .app__line { margin-top: 22px; padding-bottom: 0; font-size: var(--step-h3); }
  .q-head { padding-top: clamp(72px, 14vw, 120px); }
  .q-head__26 { grid-column: 1 / -1; grid-row: 1; font-size: clamp(160px, 46vw, 360px); }
  .q-head .app__head { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; }
  .gh-top .app__head, .gh-lobby { grid-column: 1 / -1; }
  .gh-lobby { width: 100%; margin-top: 40px; max-width: 520px; justify-self: center; }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }

  /* the frame becomes a grid; a tap opens the tool large */
  .q26__frame { --tw: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; justify-content: stretch; }
  .tool-slot { grid-area: auto !important; aspect-ratio: 16 / 11; }
  .q26__centre { grid-row: 1; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 0 0 18px; }
  .q26__browser { width: 100%; order: -1; }
}
@media (max-width: 760px) {
  :root { --gap: 14px; }
  .opener__track { gap: 32px; }
  .app__title { font-size: clamp(48px, 14.5vw, 76px); }
  .head--b .app__title { font-size: clamp(52px, 16vw, 84px); }
  .head--f .app__title { font-size: clamp(64px, 20vw, 110px); }
  .wt__item { grid-template-columns: minmax(0, 1fr); }
  .wt__still { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .wt .browser__url, .v3 .browser__url { max-width: 50%; }
  .q26__frame { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* on a phone the four games sit side by side under a swipe, the next one
     peeking in, instead of a long stack */
  .games {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding: 4px var(--gutter) clamp(72px, 16vw, 96px); scrollbar-width: none;
  }
  .games::-webkit-scrollbar { display: none; }
  .game { flex: none; width: 78vw; max-width: 330px; scroll-snap-align: start; }
  .game__phone { --w: min(74cqi, 250px) !important; }
}

/* Live opener on phones: posters a little narrower than the screen */
@media (max-width: 700px) {
  .is-live .opener__track { --card-w: 80vw; --card-h: min(calc(100dvh - var(--chrome-h) - 120px), calc(80vw * 1.42)); }
  /* the headline's top edge lines up with the first poster's */
  .is-live .opener__intro { width: 72vw; margin-right: 24px; align-self: flex-start; margin-top: calc((100dvh - var(--chrome-h) - 28px - var(--card-h)) / 2); }
  .is-live .opener__title { font-size: clamp(54px, 16vw, 76px); }
}