/* Riftway home. The page is laid out like a Riftway window: every section is a pane, and panes are
   separated by the app's 4px gap (the rift) on the window grey. Text hangs from one axis at 5/12 of the
   width. Colours are the app's own: window grey, white panes, the blue accent, and the profile colours
   that mark each pane's login, used here as whole fields. */

@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/libre-franklin-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --gap: #e9e9ec;
  --pane: #ffffff;
  --tone: #f2f2f4;
  --ink: #1d1d1f;
  --muted: #55555a;
  --accent: #0a64e8;
  --accent-hover: #0853c4;
  --teal: #0e7c86;
  --teal-tone: #0b6870;
  --raspberry: #c2255c;
  --green: #2f7d32;
  --amber: #b45309;
  --blue: #0a64e8;
  --warn-bg: #fff4e0;
  --warn-text: #7a4700;
  --night: #0c0c0e;
  --night-pane: #1c1c1f;
  --night-ink: #f2f2f4;
  --night-muted: #b4b4ba;

  --display-face: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --text-face: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --small: 0.875rem;
  --body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --display: clamp(2.6rem, 6.1vw, 7.5rem);

  --rift: 4px;
  --inset: clamp(12px, 2vw, 28px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --section-y: clamp(72px, 9vw, 136px);
  --radius: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gap: #111113;
    --pane: #1c1c1e;
    --tone: #262629;
    --ink: #f2f2f4;
    --muted: #a8a8ae;
    --accent: #4b93ff;
    --accent-hover: #6fa8ff;
    --warn-bg: #3a2a10;
    --warn-text: #ffd48a;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  accent-color: var(--accent);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  padding: 0 var(--rift) var(--rift);
  background: var(--gap);
  color: var(--ink);
  font: 400 var(--body) / 1.55 var(--text-face);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.field :focus-visible {
  outline-color: #fff;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display-face);
  font-weight: 700;
  text-wrap: balance;
}

.display {
  font-family: var(--display-face);
  font-size: var(--display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.head {
  font-size: var(--head);
  line-height: 1;
  letter-spacing: -0.03em;
}

.head-xl {
  font-size: var(--display);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.lead {
  font-size: var(--lead);
  line-height: 1.35;
}

.small {
  font-size: var(--small);
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--pane);
}

/* Draft banner (config.showDraftBanner) */
.draft-banner {
  margin: 0 calc(var(--rift) * -1);
  padding: 8px 24px;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--small);
  text-align: center;
}

/* ---------- the page grid: 12 columns, the axis at column 6 ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.sheet {
  margin-top: var(--rift);
  padding: var(--section-y) var(--inset);
  border-radius: var(--radius);
  background: var(--pane);
}

.field {
  color: #fff;
}

.field.teal { background: var(--teal); }

/* A still of the hero's silk: deep navy rising to blue, with soft pools of light. */
.field.deep {
  background:
    radial-gradient(60% 55% at 88% 18%, rgba(75, 147, 255, 0.42), transparent),
    radial-gradient(55% 60% at 8% 92%, rgba(40, 90, 220, 0.32), transparent),
    linear-gradient(160deg, #050c22 0%, #0a2a6e 52%, #0b1f4d 100%);
}
.field.raspberry { background: var(--raspberry); }
.field.blue { background: var(--blue); }
.field.green { background: var(--green); }
.field.amber { background: var(--amber); }

/* ---------- header: wordmark, three links, one action, on the window grey ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 60px;
  padding: 0 var(--inset);
  font-family: var(--display-face);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 1rem;
  font-weight: 600;
}

.nav a:not(.btn) {
  text-decoration: none;
}

.nav a:not(.btn):hover {
  text-decoration: underline;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 10px 0 10px 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 1rem var(--display-face);
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 60px;
    left: var(--rift);
    right: var(--rift);
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    border-radius: var(--radius);
    background: var(--pane);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); /* taste-skill-ignore: the open menu floats over the page */
    font-size: 1.125rem;
  }

  .nav.open {
    display: flex;
  }

  .nav a:not(.btn) {
    padding: 12px 0;
  }

  .nav .btn {
    margin-top: 10px;
  }
}

/* ---------- buttons: flat, square, one fill ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 600 1rem / 1.2 var(--display-face);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s var(--ease-out);
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:active {
  transform: scale(0.97);
}

.site-header .btn {
  min-height: 40px;
  padding: 8px 16px;
}

.btn.ink {
  background: var(--ink);
  color: var(--pane);
}

.btn.ink:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--pane));
}

.btn.paper {
  background: #fff;
  color: var(--blue);
}

.btn.paper:hover {
  background: #e8f0fd;
}

.text-link {
  font: 600 1rem var(--display-face);
}

/* ---------- the Riftway window (a real fragment of the app, at true size) ---------- */

[data-ui] {
  --ui-bg: #e9e9ec;
  --ui-chrome: #f6f6f7;
  --ui-pane: #ffffff;
  --ui-text: #1d1d1f;
  --ui-muted: #6e6e73;
  --ui-line: #d2d2d7;
  --ui-seam: #b4b4ba;
  --ui-field: #ffffff;
  --ui-accent: #0a64e8;
  --ui-accent-soft: rgba(10, 100, 232, 0.14);
  --ui-menu: #ffffff;
  font: 13px / 1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ui-text);
}

@media (prefers-color-scheme: dark) {
  [data-ui] {
    --ui-bg: #111113;
    --ui-chrome: #1c1c1e;
    --ui-pane: #232326;
    --ui-text: #f2f2f4;
    --ui-muted: #98989f;
    --ui-line: #38383c;
    --ui-seam: #62626a;
    --ui-field: #2c2c2f;
    --ui-accent: #4b93ff;
    --ui-accent-soft: rgba(75, 147, 255, 0.2);
    --ui-menu: #2c2c2f;
  }
}

/* The hero's window, and every drawn window below it, are always in the app's dark appearance. */
.stage [data-ui].win,
.uses-pic [data-ui],
.shot [data-ui],
[data-ui].plate {
  --ui-bg: #111113;
  --ui-chrome: #1c1c1e;
  --ui-pane: #232326;
  --ui-text: #f2f2f4;
  --ui-muted: #98989f;
  --ui-line: #38383c;
  --ui-seam: #62626a;
  --ui-field: #2c2c2f;
  --ui-accent: #4b93ff;
  --ui-accent-soft: rgba(75, 147, 255, 0.2);
  --ui-menu: #2c2c2f;
}

[data-ui].win {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(340px, 44vh, 520px);
  border-radius: var(--radius);
  background: var(--ui-bg);
  overflow: hidden;
  user-select: none;
}

[data-ui] .win-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-radius: 7px 7px 0 0;
  color: color-mix(in srgb, var(--ui-muted) 80%, var(--ui-text));
  white-space: nowrap;
}

[data-ui] .win-tab svg {
  fill: currentColor;
}

[data-ui] .win-tab.active {
  background: var(--ui-chrome);
  color: var(--ui-text);
}

/* The window's only bar holds all nine layouts, open and centred, so it reads as something to press. */
[data-ui] .win-bar {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  background: var(--ui-chrome);
  border-bottom: 1px solid var(--ui-line);
}

[data-ui] .picker-options {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--ui-field);
  box-shadow: 0 0 0 1px var(--ui-line);
}

[data-ui] .picker-options button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ui-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

[data-ui] .picker-options button i {
  display: grid;
  gap: 2px;
  width: 24px;
  height: 16px;
}

[data-ui] .picker-options button i b {
  border-radius: 1.5px;
  background: currentColor;
}

[data-ui] .picker-options button:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}

[data-ui] .picker-options button[aria-checked='true'] {
  background: var(--ui-accent);
  color: #fff;
}

[data-ui] .picker-options button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

[data-ui] .tabline .primary {
  padding: 4px 10px;
  border: 1px solid var(--ui-accent);
  border-radius: 6px;
  background: var(--ui-accent);
  color: #fff;
  white-space: nowrap;
}

[data-ui] .win-grid {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
  padding: 4px;
}

[data-ui] .win-grid > * {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ui-pane);
}

/* Four static pages, one word each, in the profile colours. Every word is set at the size that lets the
   longest, EVERY, fill its pane, so equal panes carry equal letters; the size follows the pane as a gap is dragged. */
[data-ui] .word {
  container-type: size;
  display: grid;
  place-items: center;
  background: var(--silk);
  color: #fff;
}

/* Each page is a still of the hero's silk: a dark fold rising to blue, with a soft pool of light where a fold
   catches it. */
[data-ui] .word.s1 {
  --silk: radial-gradient(70% 45% at 78% 72%, rgba(120, 175, 255, 0.45), transparent),
    linear-gradient(140deg, #04070f 0%, #0a2a6e 45%, #1f63d8 76%, #0b1f4d 100%);
}

[data-ui] .word.s2 {
  --silk: radial-gradient(80% 50% at 20% 28%, rgba(110, 140, 255, 0.4), transparent),
    linear-gradient(200deg, #050a1a 0%, #1a2fa8 52%, #0c3a96 74%, #050c24 100%);
}

[data-ui] .word.s3 {
  --silk: radial-gradient(90% 40% at 60% 88%, rgba(110, 200, 255, 0.42), transparent),
    linear-gradient(170deg, #04131c 0%, #0b4f8a 50%, #2a7be0 82%, #072a4a 100%);
}

[data-ui] .word.s4 {
  --silk: radial-gradient(60% 40% at 30% 18%, rgba(150, 190, 255, 0.3), transparent),
    radial-gradient(75% 45% at 82% 76%, rgba(160, 200, 255, 0.4), transparent),
    linear-gradient(120deg, #060818 0%, #1b3fb5 40%, #4b8dff 66%, #0a1a44 100%);
}

[data-ui] .word p {
  margin: 0;
  font-family: var(--display-face);
  font-size: min(calc(86cqi / 3.4), 62cqb);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

[data-ui] .ai-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 0;
  padding: 0 6px;
  overflow: hidden;
  background: #2c2c2e;
  color: #a1a1a8;
  transition: height 0.18s var(--ease-out);
}

[data-ui] .pane-site:hover .ai-head {
  height: 30px;
}

[data-ui] .pane-index {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

[data-ui] .pane-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ui] .empty-pane {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
}

[data-ui] .empty-pane span {
  width: min(100%, 220px);
  padding: 7px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-field);
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ui] .win-seams {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[data-ui] .seam {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
}

[data-ui] .seam::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: var(--ui-seam);
  opacity: 0;
  transition: opacity 0.12s;
}

[data-ui] .seam:hover::after,
[data-ui] .seam.dragging::after,
[data-ui] .seam:focus-visible::after,
[data-ui].hinting .seam::after {
  opacity: 1;
}

[data-ui] .seam:focus-visible {
  outline: none;
}

[data-ui] .seam.col {
  width: 12px;
  margin-left: -4px;
  cursor: col-resize;
}

[data-ui] .seam.col::after {
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
}

[data-ui] .seam.row {
  height: 12px;
  margin-top: -4px;
  cursor: row-resize;
}

[data-ui] .seam.row::after {
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
}

@media (max-width: 760px) {
  [data-ui].win {
    height: 440px;
  }

  [data-ui] .picker-options {
    gap: 2px;
  }

  [data-ui] .picker-options button {
    width: 34px;
    height: 30px;
  }

  [data-ui] .picker-options button i {
    width: 20px;
    height: 14px;
  }
}

/* ---------- features: one pane as a plate, notes in both margins ---------- */

.ground {
  padding: var(--section-y) var(--inset);
}

/* The title over the window on the left; the five features down the right, centred on the window. */
.plate-wrap {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(40px, 7vw, 120px);
  justify-content: center;
  max-width: 1120px;
  margin: 0 auto;
}

.plate-title {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 32px;
  font-size: var(--head);
}

/* The features stand on a rail; the one playing in the window lights its stretch of the rail. */
.notes {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  max-width: 40ch;
}

.note {
  position: relative;
  display: block;
  padding: 14px 0 14px 24px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}

.note::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}

.note b {
  display: block;
  margin-bottom: 2px;
  font: 600 1.0625rem / 1.4 var(--display-face);
  transition: color 0.2s;
}

.note span {
  display: block;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--muted);
}

.note:hover b {
  color: var(--accent);
}

.note[aria-pressed='true'] b {
  color: var(--accent);
}

.note[aria-pressed='true'] span {
  color: var(--ink);
}

.note[aria-pressed='true']::after {
  transform: scaleY(1);
}

.note:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The window: a fixed 540-wide stage in the app's dark appearance, a slim title bar over one scene per
   feature. A soft ring of light sets it off the grey ground. */
[data-ui].plate {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: 540px;
  height: 600px;
  margin: 0;
  border-radius: 12px;
  background: var(--ui-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 30px 60px -20px rgba(12, 12, 14, 0.45);
  overflow: hidden;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}

.plate-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
}

.plate-bar .lights {
  display: flex;
  gap: 6px;
}

.plate-bar .lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3e;
}

.plate-name {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 500;
  transform: translateX(-50%);
}

.plate-name svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.plate-name span {
  display: none;
}

.plate[data-scene='swap'] .plate-name [data-for='swap'],
.plate[data-scene='find'] .plate-name [data-for='find'],
.plate[data-scene='saved'] .plate-name [data-for='saved'],
.plate[data-scene='focus'] .plate-name [data-for='focus'],
.plate[data-scene='refresh'] .plate-name [data-for='refresh'] {
  display: inline;
}

.plate .scene {
  position: absolute;
  inset: 24px 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s 0.35s;
}

.plate[data-scene='swap'] .scene[data-for='swap'],
.plate[data-scene='find'] .scene[data-for='find'],
.plate[data-scene='saved'] .scene[data-for='saved'],
.plate[data-scene='focus'] .scene[data-for='focus'],
.plate[data-scene='refresh'] .scene[data-for='refresh'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s;
}

.plate .fp {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--fw);
  height: var(--fh);
}

.plate .mp-head b {
  background: var(--ui-line);
}

/* The maps follow the window's appearance: pale land and water in light, deep in dark. */
.plate .mp-map .land {
  fill: color-mix(in srgb, var(--ui-pane) 80%, #6e9b5f);
}

.plate .mp-map .lake {
  fill: color-mix(in srgb, var(--ui-pane) 55%, #2f6fc0);
}

.plate .mp-map .road {
  stroke: color-mix(in srgb, var(--ui-pane) 60%, var(--ui-muted));
}

.plate .cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #1d1d1f;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Swap: pane 2 is lifted by its number, the two panes cross, then cross back. */
.plate[data-scene='swap'] .swap-a {
  animation: swap-a 5s var(--ease-out) infinite;
}

.plate[data-scene='swap'] .swap-b {
  animation: swap-b 5s var(--ease-out) infinite;
}

.plate[data-scene='swap'] .swap-cursor {
  animation: swap-cursor 5s var(--ease-out) infinite;
}

.plate[data-scene='swap'] .grab {
  animation: grab 5s infinite;
}

.swap-cursor {
  left: 286px;
  top: 16px;
  z-index: 3;
}

@keyframes swap-a {
  0%, 30% { transform: none; }
  50%, 80% { transform: translateX(268px); }
  100% { transform: none; }
}

@keyframes swap-b {
  0%, 18% { transform: none; box-shadow: none; z-index: 0; }
  26% { transform: scale(0.97); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); z-index: 2; }
  50% { transform: translateX(-268px) scale(0.97); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); z-index: 2; }
  58%, 80% { transform: translateX(-268px); box-shadow: none; z-index: 2; }
  100% { transform: none; }
}

@keyframes swap-cursor {
  0% { transform: translate(60px, 120px); opacity: 0; }
  12% { transform: translate(0, 0); opacity: 1; }
  26% { transform: translate(0, 0) scale(0.9); }
  50% { transform: translate(-268px, 0) scale(0.9); }
  58% { transform: translate(-268px, 0); opacity: 1; }
  70%, 100% { transform: translate(-200px, 140px); opacity: 0; }
}

@keyframes grab {
  0%, 18% { background: var(--ui-line); color: var(--ui-text); }
  24%, 56% { background: var(--ui-accent); color: #fff; }
  64%, 100% { background: var(--ui-line); color: var(--ui-text); }
}

/* Find: the bar floats over the three panes, and the current match steps from pane to pane. */
.find-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--ui-menu);
  box-shadow: 0 0 0 1px var(--ui-line), 0 12px 30px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
  white-space: nowrap;
}

.find-bar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.find-q {
  min-width: 120px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ui-field);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

.find-n {
  display: grid;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

.find-n span {
  grid-area: 1 / 1;
  opacity: 0;
}

.find-n span:first-child {
  opacity: 1;
}

/* Each match sits on a line of text, as a highlighter would mark a word. */
.plate .mp-art i:has(mark) {
  position: relative;
}

.plate mark {
  position: absolute;
  left: var(--ml);
  top: -3px;
  bottom: -3px;
  width: var(--mw);
  border-radius: 3px;
  background: rgba(255, 204, 0, 0.42);
}

.plate[data-scene='find'] mark.cur {
  animation: find-hit 6s var(--d) infinite;
}

.plate[data-scene='find'] .find-n span {
  animation: find-count 6s var(--d) infinite;
}

@keyframes find-hit {
  0%, 31% { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.35); }
  34%, 100% { background: rgba(255, 196, 0, 0.55); box-shadow: 0 0 0 0 transparent; }
}

@keyframes find-count {
  0%, 31% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

/* Richer pages: an article opens on a picture, and paragraphs break with a little air between them. */
.plate .mp-art {
  gap: 1.5cqi;
  padding: 2.6cqi;
}

.plate .mp-art .img {
  flex: none;
  height: 18cqi;
  margin-bottom: 1cqi;
  border-radius: 1cqi;
  background: color-mix(in srgb, var(--ui-text) 13%, transparent);
}

.plate .mp-art .tag {
  background: color-mix(in srgb, var(--ui-text) 22%, transparent);
}

.plate .mp-art .gap {
  height: 0.4cqi;
  background: none;
}

/* The rest of the page carries on in lines of text, fading out towards the foot of the pane. */
.plate .mp-art::after {
  content: '';
  flex: 1;
  margin-top: 2.6cqi;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ui-text) 16%, transparent) 0 1.1cqi,
    transparent 1.1cqi 2.6cqi
  );
  border-radius: 1cqi;
  -webkit-mask: linear-gradient(#000 30%, transparent);
  mask: linear-gradient(#000 30%, transparent);
}

/* The swap scene's map, kept calm: grey land, one soft river, two roads and a single pin. */
.plate .mp-map.calm .land {
  fill: color-mix(in srgb, var(--ui-pane) 92%, var(--ui-text));
}

.plate .mp-map.calm .lake {
  fill: color-mix(in srgb, var(--ui-pane) 78%, #5b8fd6);
}

.plate .mp-map.calm .road {
  stroke: color-mix(in srgb, var(--ui-pane) 70%, var(--ui-text));
  stroke-width: 3;
}

.plate .mp-map.calm .road.thin {
  stroke-width: 1.5;
}

.plate .mp-map.calm .pin {
  left: calc(30% - 1.3cqi);
  top: calc(38% - 1.3cqi);
  border-color: var(--ui-pane);
  background: var(--ui-accent);
  box-shadow: 0 0 0 1.4cqi color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

/* A dashboard's headline number: a label, the figure and its change. */
.plate .kpi {
  display: grid;
  gap: 0.4cqi;
  margin-bottom: 2cqi;
}

.plate .kpi small {
  color: var(--ui-muted);
  font-size: 2.2cqi;
}

.plate .kpi strong {
  display: grid;
  color: var(--ui-text);
  font: 700 6cqi / 1 var(--display-face);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plate .kpi em {
  color: #34c759;
  font-style: normal;
  font-weight: 600;
  font-size: 2.2cqi;
}

.plate .swap-n span {
  grid-area: 1 / 1;
}

.plate .swap-n span + span {
  opacity: 0;
}

.plate[data-scene='refresh'] .swap-n span {
  animation: ref-num 8s infinite;
}

.plate[data-scene='refresh'] .swap-n span + span {
  animation-name: ref-num-2;
}

@keyframes ref-num {
  0%, 41% { opacity: 1; }
  44%, 91% { opacity: 0; }
  94%, 100% { opacity: 1; }
}

@keyframes ref-num-2 {
  0%, 41% { opacity: 0; }
  44%, 91% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.plate .ref-in {
  margin-right: 2px;
  color: var(--ui-muted);
  font-size: 11px;
}

.tray-label em {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-line);
  color: var(--ui-text);
  font-style: normal;
  font-size: 11px;
}

/* Saved links: a cursor right-clicks the link, then moves to Save. */
.save-cursor {
  left: 120px;
  top: 282px;
  z-index: 3;
  opacity: 0;
}

.plate[data-scene='saved'] .save-cursor {
  animation: save-cursor 6s var(--ease-out) infinite;
}

@keyframes save-cursor {
  0% { opacity: 0; transform: translate(80px, 90px); }
  8% { opacity: 1; transform: none; }
  14% { transform: none; }
  24%, 36% { opacity: 1; transform: translate(14px, 22px); }
  44%, 100% { opacity: 0; transform: translate(14px, 22px); }
}

/* A simplified article, drawn in grey bars: a masthead, the title, tabs, two columns of text with one link
   picked out for the right-click menu, and an infobox with a portrait. Placed in the pane's own pixels. */
[data-ui] .sk {
  --sk-bar: color-mix(in srgb, var(--ui-text) 13%, transparent);
  background: var(--ui-pane);
}

[data-ui] .sk i,
[data-ui] .sk b {
  position: absolute;
}

[data-ui] .sk i {
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: 8px;
  border-radius: 4px;
  background: var(--sk-bar);
}

[data-ui] .sk .sk-link {
  background: var(--ui-accent);
  opacity: 0.75;
}

[data-ui] .sk .sk-tab {
  box-shadow: 0 8px 0 -6px var(--ui-accent);
}

[data-ui] .sk-logo {
  top: 10px;
  left: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sk-bar);
}

[data-ui] .sk-field {
  top: 10px;
  right: 20px;
  width: 140px;
  height: 24px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
}

[data-ui] .sk-title {
  position: absolute;
  top: 52px;
  left: 20px;
  margin: 0;
  font: 400 30px / 1.2 var(--text-face);
  color: var(--ui-text);
}

[data-ui] .sk-rule {
  top: 127px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--ui-line);
}

[data-ui] .sk-box {
  position: absolute;
  top: 140px;
  left: 350px;
  width: 170px;
  height: 290px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
}

[data-ui] .sk-pic {
  top: 32px;
  left: 12px;
  width: 146px;
  height: 176px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ui-text) 13%, transparent);
}

[data-ui] .menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 8px;
  background: var(--ui-menu);
  box-shadow: 0 0 0 1px var(--ui-line), 0 10px 28px rgba(0, 0, 0, 0.2);
}

[data-ui] .menu span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

[data-ui] .menu > i:empty {
  height: 1px;
  margin: 4px 6px;
  background: var(--ui-line);
}

[data-ui] .menu .hot {
  background: var(--ui-accent);
  color: #fff;
}

[data-ui] .menu .sub::after {
  content: '›';
  margin-left: auto;
  padding-left: 12px;
  color: var(--ui-muted);
}

/* Saved links: the right-click menu on a link, then the link's card drops into the tray at the foot. */
[data-ui] .save-menu {
  top: 294px;
  left: 70px;
  width: 212px;
}

.plate .tray {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding: 0 14px 12px;
  border-radius: 8px;
  background: var(--ui-chrome);
  box-shadow: 0 -1px 0 var(--ui-line);
}

.tray-label {
  position: absolute;
  top: 10px;
  left: 14px;
  color: var(--ui-muted);
  font-weight: 600;
  font-size: 12px;
}

.plate .card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
  height: 70px;
  padding: 6px;
  border-radius: 6px;
  background: var(--ui-pane);
  box-shadow: 0 0 0 1px var(--ui-line);
}

.plate .card b {
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
}

.plate .card i {
  width: var(--w, 100%);
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ui-text) 16%, transparent);
}

.plate .card.slot {
  background: none;
  box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--ui-muted) 50%, transparent);
  outline-offset: -1.5px;
}

.plate .card.fly {
  position: absolute;
  left: 338px;
  top: 490px;
  opacity: 0;
}

.plate[data-scene='saved'] .save-menu {
  animation: save-menu 6s infinite;
}

.plate[data-scene='saved'] .card.fly {
  animation: save-fly 6s var(--ease-out) infinite;
}

@keyframes save-menu {
  0%, 6% { opacity: 0; transform: scale(0.96); }
  12%, 40% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: none; }
}

@keyframes save-fly {
  0%, 42% { opacity: 0; transform: translate(-270px, -212px) scale(0.35); }
  46% { opacity: 1; transform: translate(-270px, -212px) scale(0.35); }
  70%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* Focus: pane 2 grows to fill the window while the rest step back, then Esc returns the grid. */
.plate[data-scene='focus'] .fp:not(.grow) {
  animation: focus-rest 6s infinite;
}

.plate[data-scene='focus'] .grow {
  animation: focus-grow 6s var(--ease-out) infinite;
}

.plate[data-scene='focus'] .esc {
  animation: focus-esc 6s infinite;
}

@keyframes focus-grow {
  0%, 18% { left: 272px; top: 4px; width: 264px; height: 282px; }
  32%, 72% { left: 4px; top: 4px; width: 532px; height: 568px; }
  86%, 100% { left: 272px; top: 4px; width: 264px; height: 282px; }
}

@keyframes focus-rest {
  0%, 18% { opacity: 1; }
  28%, 76% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes focus-esc {
  0%, 46% { opacity: 0; transform: translate(-50%, 8px); }
  52%, 72% { opacity: 1; transform: translate(-50%, 0); }
  78%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

.plate .esc {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 22, 0.82);
  color: #fff;
  opacity: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.plate .esc kbd {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  font: 600 11px / 1.4 inherit;
}

/* Auto-refresh: a ring counts down, the reload arrow turns, the pane blinks and its numbers move. */
.plate .dash {
  display: grid;
  grid-template-rows: 1.3fr 1fr;
}

.plate .dash .mp-bars {
  padding-top: 0;
}

.plate .dash .mp-bars i {
  background: color-mix(in srgb, var(--ui-text) 22%, transparent);
}

.plate .ref-ctl {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.plate .ref-ctl svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plate .ring circle {
  stroke: var(--ui-line);
}

.plate .ring .left {
  stroke: var(--ui-accent);
  stroke-dasharray: 44;
  transform: rotate(-90deg);
  transform-origin: center;
}

.plate .spin {
  stroke: var(--ui-accent);
}

.plate .flash {
  position: absolute;
  inset: 0;
  background: var(--ui-pane);
  opacity: 0;
  pointer-events: none;
}

.plate .mp-bars i {
  transform-origin: bottom;
}

[data-ui] .ref-menu {
  top: 34px;
  right: 12px;
  width: 200px;
}

[data-ui] .ref-menu .menu-head {
  color: var(--ui-muted);
  font-weight: 600;
  font-size: 12px;
}

[data-ui] .ref-menu svg {
  width: 12px;
  height: 12px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.plate[data-scene='refresh'] .ring .left {
  animation: ref-ring 4s linear infinite;
}

.plate[data-scene='refresh'] .spin {
  animation: ref-spin 4s var(--ease-out) infinite;
}

.plate[data-scene='refresh'] .flash {
  animation: ref-flash 4s infinite;
}

.plate[data-scene='refresh'] .mp-bars i {
  animation: ref-bars 8s var(--ease-out) infinite;
}

@keyframes ref-ring {
  0% { stroke-dashoffset: 0; }
  80%, 100% { stroke-dashoffset: 44; }
}

@keyframes ref-spin {
  0%, 80% { transform: rotate(0); }
  95%, 100% { transform: rotate(360deg); }
}

@keyframes ref-flash {
  0%, 80% { opacity: 0; }
  84% { opacity: 0.6; }
  94%, 100% { opacity: 0; }
}

@keyframes ref-bars {
  0%, 41% { transform: scaleY(1); }
  46%, 91% { transform: scaleY(var(--k)); }
  96%, 100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .plate .scene *,
  .note::after {
    animation: none !important;
    transition: none !important;
  }

  .plate .card.fly {
    opacity: 1;
  }

  .plate .card.slot {
    visibility: hidden;
  }
}

/* Narrower screens: the title, then the window, then the features underneath. */
@media (max-width: 1000px) {
  .plate-wrap {
    grid-template-columns: minmax(0, 540px);
  }

  .notes {
    grid-column: 1;
    grid-row: 3;
    margin-top: 40px;
    max-width: none;
  }
}

/* The window keeps its true proportions and scales to fit narrower screens. */
@media (max-width: 600px) {
  [data-ui].plate {
    zoom: 0.8;
  }
}

@media (max-width: 480px) {
  [data-ui].plate {
    zoom: 0.62;
  }
}

/* ---------- uses: a square picture, tabs and spare text ---------- */

.uses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  align-items: stretch;
  min-height: 88svh;
}

/* The text on the left, the picture on the right. */
.uses-pic {
  position: relative;
  order: 2;
  align-self: center;
  justify-self: end;
  width: calc(100% - 40px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111113;
}

/* Each use is a simplified Riftway window drawn to fill the square: the grid's tab, then its panes,
   with each site reduced to bars, a map, a chart or a video. Sizes follow the square (cqi). */
.uses-pic {
  container-type: inline-size;
}

.use-shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.use-shot.on {
  opacity: 1;
}

.mw-tabs {
  display: flex;
  height: 8cqi;
  padding: 1.6cqi 1.6cqi 0;
}

.mw-tab {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  padding: 0 2.4cqi;
  border-radius: 1.2cqi 1.2cqi 0 0;
  background: var(--ui-chrome);
  font-size: 2.6cqi;
  white-space: nowrap;
}

.mw-tab svg {
  width: 2.2cqi;
  height: 2.2cqi;
  fill: currentColor;
}

.mw-grid {
  flex: 1;
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-rows: var(--rows);
  gap: 0.8cqi;
  padding: 0.8cqi;
  background: var(--ui-chrome);
}

.mp {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: 1.2cqi;
  background: var(--ui-pane);
  overflow: hidden;
}

.mp-head {
  display: flex;
  align-items: center;
  gap: 1cqi;
  flex: none;
  height: 4.4cqi;
  padding: 0 1.2cqi;
  background: var(--ui-chrome);
}

.mp-head b {
  display: grid;
  place-items: center;
  width: 2.6cqi;
  height: 2.6cqi;
  border-radius: 0.6cqi;
  background: rgba(255, 255, 255, 0.1);
  font: 600 1.6cqi / 1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.mp-head i {
  width: 40%;
  height: 1cqi;
  border-radius: 1cqi;
  background: var(--ui-line);
}

.mp > div {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* An article or dictionary entry: a heading and lines of text. */
.mp-art {
  display: flex;
  flex-direction: column;
  gap: 1.3cqi;
  padding: 2.4cqi;
}

.mp-art i {
  flex: none;
  width: var(--w, 100%);
  height: 1.1cqi;
  border-radius: 1cqi;
  background: color-mix(in srgb, var(--ui-text) 16%, transparent);
}

.mp-art .h {
  width: var(--w, 70%);
  height: 2.6cqi;
  margin-bottom: 0.8cqi;
  background: color-mix(in srgb, var(--ui-text) 55%, transparent);
}

.mp-art .tag {
  width: 22%;
  height: 2cqi;
  background: color-mix(in srgb, var(--ui-accent) 40%, transparent);
}

.mp-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mp-map .land {
  fill: #1d2a26;
}

.mp-map .lake {
  fill: #1b3f66;
}

.mp-map .road {
  fill: none;
  stroke: #4a5560;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.mp-map .road.thin {
  stroke-width: 0.8;
}

.mp-map .pin {
  position: absolute;
  left: 34%;
  top: 44%;
  width: 2.6cqi;
  height: 2.6cqi;
  border: 0.6cqi solid #fff;
  border-radius: 50%;
  background: var(--raspberry);
}

.mp-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8cqi;
  padding: 1.6cqi;
}

.mp-tiles i {
  border-radius: 0.8cqi;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  opacity: 0.85;
}

/* A dashboard: a big number over a traffic line, bars, and a list of statuses. */
.mp-line {
  display: flex;
  flex-direction: column;
  padding: 2.4cqi;
}

.mp-line .stat {
  width: 30%;
  height: 4cqi;
  border-radius: 0.8cqi;
  background: color-mix(in srgb, var(--ui-text) 70%, transparent);
}

.mp-line .stat-sub {
  width: 46%;
  height: 1.1cqi;
  margin: 1.4cqi 0 2.4cqi;
  border-radius: 1cqi;
  background: color-mix(in srgb, var(--ui-text) 16%, transparent);
}

.mp-line svg {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.mp-line .area {
  fill: color-mix(in srgb, var(--ui-accent) 24%, transparent);
}

.mp-line .trace {
  fill: none;
  stroke: var(--ui-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.mp-bars {
  display: flex;
  align-items: flex-end;
  gap: 1cqi;
  padding: 2.4cqi;
}

.mp-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.6cqi 0.6cqi 0 0;
  background: var(--teal);
}

.mp-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1.2cqi 2.4cqi;
}

.mp-list i {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
}

.mp-list i::before {
  content: '';
  flex: none;
  width: 1.6cqi;
  height: 1.6cqi;
  border-radius: 50%;
  background: var(--c);
}

.mp-list i::after {
  content: '';
  flex: 1;
  height: 1.1cqi;
  border-radius: 1cqi;
  background: color-mix(in srgb, var(--ui-text) 16%, transparent);
}

/* A wall's live video: a dark frame of its colour, a play mark and a progress line. */
.mp-video {
  background: radial-gradient(80% 70% at 30% 30%, color-mix(in srgb, var(--c) 60%, transparent), transparent), #0e0e12;
}

.mp-video b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5cqi;
  height: 5cqi;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
}

.mp-video b::after {
  content: '';
  position: absolute;
  left: 2cqi;
  top: 1.5cqi;
  border-left: 1.6cqi solid #fff;
  border-top: 1cqi solid transparent;
  border-bottom: 1cqi solid transparent;
}

.mp-video i {
  position: absolute;
  left: 1.6cqi;
  right: 1.6cqi;
  bottom: 1.6cqi;
  height: 0.6cqi;
  border-radius: 1cqi;
  background: linear-gradient(90deg, #fff 38%, rgba(255, 255, 255, 0.25) 38%);
}

.mp-feed {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1.2cqi 2cqi;
}

.mp-feed i {
  display: flex;
  gap: 1.4cqi;
  align-items: center;
}

.mp-feed i::before {
  content: '';
  flex: none;
  width: 3.4cqi;
  height: 3.4cqi;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 70%, transparent);
}

.mp-feed i::after {
  content: '';
  flex: 1;
  height: 2.6cqi;
  background:
    linear-gradient(color-mix(in srgb, var(--ui-text) 30%, transparent) 0 0) 0 0 / 50% 1cqi no-repeat,
    linear-gradient(color-mix(in srgb, var(--ui-text) 16%, transparent) 0 0) 0 100% / 100% 1cqi no-repeat;
}

.uses-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 8px 0;
}

/* A segmented control under the heading: a dark track, and a white pill that slides to the chosen use. */
.tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 36px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tabs.sliding::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--thumb-w, 0);
  border-radius: 999px;
  background: #fff;
  transform: translateX(var(--thumb-x, 0));
  transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out);
}

.tabs button {
  position: relative;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: 600 0.9375rem / 1 var(--display-face);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s;
}

.tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.tabs button[aria-selected='true'] {
  color: #0a2a6e;
  background: #fff;
}

.tabs.sliding button[aria-selected='true'] {
  background: none;
}

.tabs button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.uses-copy p {
  max-width: 34ch;
}

.uses-copy h2 {
  margin-bottom: 28px;
}

.uses-copy .lead {
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .uses {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .uses-pic {
    order: 0;
    width: 100%;
    margin-bottom: 32px;
  }

  .uses-text {
    gap: 32px;
  }

  .uses-copy h2 {
    margin-bottom: 20px;
  }

  .tabs {
    margin-bottom: 24px;
  }
}

/* ---------- fragments of the app shown in the steps ---------- */

[data-ui].call {
  width: fit-content;
  max-width: 100%;
  padding: 20px;
  border-radius: 8px;
  background: var(--tone);
}

[data-ui].response {
  margin: 16px 0 0 56px;
}

[data-ui] .profile-menu {
  position: static;
  width: 200px;
}

[data-ui] .profile-menu .menu-head {
  color: var(--ui-muted);
  font-weight: 600;
  font-size: 12px;
}

[data-ui] .profile-menu i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

[data-ui] .profile-menu .hot i {
  box-shadow: 0 0 0 1.5px #fff;
}

[data-ui] .profile-menu svg {
  width: 12px;
  height: 12px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

[data-ui] .profile-menu .muted {
  color: var(--ui-muted);
}

[data-ui] .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--ui-bg);
}

[data-ui] .duo > div {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ui-pane);
  box-shadow: inset 0 3px 0 var(--c);
}

/* Each pane is the same inbox drawn in bars, once for each profile. Sizes follow the pair (cqi). */
[data-ui] .duo {
  container-type: inline-size;
}

[data-ui] .duo .mp-feed {
  flex: 1;
  padding: 2cqi 2.6cqi 7cqi;
}

/* The pair sits in a browser window: a title bar with its three lights, and each pane its own toolbar showing
   the same address, signed in twice. */
[data-ui] .bwin {
  border-radius: 10px;
  overflow: hidden;
  background: var(--ui-bg);
  box-shadow: 0 0 0 1px var(--ui-line);
}

[data-ui] .bwin .duo {
  padding-top: 0;
  border-radius: 0;
}

[data-ui] .bwin-bar {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
}

[data-ui] .bwin-bar .lights {
  display: flex;
  gap: 6px;
}

[data-ui] .bwin-bar .lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

[data-ui] .bwin-bar .lights i:nth-child(2) {
  background: #febc2e;
}

[data-ui] .bwin-bar .lights i:nth-child(3) {
  background: #28c840;
}

[data-ui] .pbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 30px;
  margin-top: 3px;
  padding: 0 6px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-chrome);
}

[data-ui] .pbar > svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-ui] .pbar .url {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: 20px;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ui-bg);
  color: var(--ui-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

/* In a narrow pair only Back stays, so the address keeps its room. */
@container (max-width: 420px) {
  [data-ui] .pbar > svg + svg,
  [data-ui] .pbar .url svg {
    display: none;
  }

  [data-ui] .pbar .url {
    padding: 0 7px;
  }
}

[data-ui] .pbar .url svg {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

[data-ui] .duo > div::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 3px;
  background: var(--c);
}

[data-ui] .who {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

[data-ui] .tabline {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 8px 0;
  border-radius: 8px 8px 0 0;
  background: var(--ui-bg);
}

[data-ui] .tabline .win-tab {
  min-width: 210px;
}

[data-ui] .tabline .primary {
  margin: 0 0 6px auto;
}

[data-ui] .typed::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ui-text);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}


/* ---------- the night: the page around the panes is dark, as a window's frame ---------- */

body {
  background: var(--night);
  color: var(--night-ink);
}

.site-header,
.site-header .brand,
.nav a:not(.btn),
.nav-toggle {
  color: var(--night-ink);
}

@media (max-width: 720px) {
  .nav a:not(.btn) {
    color: var(--ink);
  }
}

.night {
  padding: var(--section-y) var(--inset);
  color: var(--night-ink);
}

.night :focus-visible {
  outline-color: var(--night-ink);
}

.night a:not(.btn) {
  color: var(--night-ink);
}

.fit {
  margin: 0;
  font-family: var(--display-face);
  font-size: var(--display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.fit-inner {
  display: inline-block;
}

.phone-only {
  display: none;
}

.text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* ---------- hero: the line edge to edge, one row beneath it, then the window ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: clamp(44px, 5.5vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* Folded silk moves slowly behind the claim, drawn by a small WebGL shader. It fades out before the
   window, and without WebGL the hero is plain night. */
.hero-waves {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
  pointer-events: none;
}

/* The claim is 124px on a 1440px screen and shrinks in step below that (124 / 1440 of the width). */
.hero-title {
  font-size: min(124px, 8.611vw);
  line-height: 0.9;
}

/* The claim, the line under it and the buttons stack down one left edge, lined up with the window below. */
.hero-title,
.hero-row {
  width: min(100%, 86vw, 1180px);
  margin-inline: auto;
}

.hero-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(48px, 6vw, 88px);
}

.hero-lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--lead);
  line-height: 1.3;
}

.hero .hero-act,
.hero .hero-buttons {
  align-items: center;
  justify-content: flex-start;
}

.hero .hero-buttons {
  gap: 12px 40px;
}

.hero-act {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 24px;
}

.hero-note {
  margin: 0;
  color: var(--night-muted);
  font-size: var(--small);
}

/* The window sits inside the page margins, narrower than the claim, on a soft blue glow. */
.stage {
  position: relative;
  width: min(100%, 86vw, 1180px);
  margin: 0 auto;
}

.stage::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(160, 205, 255, 0.85), transparent) 0 0 / 46% 60% no-repeat,
    radial-gradient(closest-side, rgba(130, 100, 255, 0.6), transparent) 100% 100% / 50% 64% no-repeat,
    radial-gradient(closest-side, rgba(75, 147, 255, 0.95), rgba(40, 80, 220, 0.55) 66%, transparent);
  filter: blur(40px);
  pointer-events: none;
  animation: shimmer 7s ease-in-out infinite alternate;
}

/* The glow breathes, and two brighter patches drift across it, so it shimmers rather than sits. */
@keyframes shimmer {
  0% {
    opacity: 0.7;
    background-position: 8% 10%, 92% 90%, 0 0;
  }
  50% {
    opacity: 1;
    background-position: 60% 0%, 30% 100%, 0 0;
  }
  100% {
    opacity: 0.85;
    background-position: 96% 40%, 4% 60%, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage::before {
    animation: none;
  }
}

.stage [data-ui].win {
  height: clamp(440px, 62vh, 640px);
  border-radius: var(--radius);
  overflow: hidden;
}

.drag-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 86vw, 1180px);
  margin: 16px auto 0;
  color: var(--night-muted);
  font: 600 var(--small) var(--display-face);
}

.drag-hint .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 860px) {
  .hero-lede,
  .hero-act {
    grid-column: 1 / -1;
  }

  .hero-act,
  .hero-buttons {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .stage,
  .drag-hint,
  .hero-title,
  .hero-row {
    width: 100%;
  }

  .stage [data-ui].win {
    height: 460px;
  }
}

/* The two sections kept from the last round sit on the night as panes. */
.features {
  margin-top: var(--rift);
  border-radius: var(--radius);
  background: var(--gap);
  color: var(--ink);
}

/* ---------- steps: three panes slide past sideways while the section is held ---------- */

.steps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 40px;
}

.steps-head p {
  max-width: 30ch;
  margin: 0;
  color: var(--night-muted);
}

.track {
  display: grid;
  gap: var(--rift);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px var(--gutter);
  align-items: center;
  padding: clamp(28px, 3.5vw, 56px);
  border-radius: var(--radius);
  background: var(--night-pane);
}

.slide-title {
  margin-bottom: 24px;
  font-size: var(--display);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.slide-text p {
  max-width: 30ch;
  margin: 0;
  font-size: var(--lead);
  line-height: 1.35;
  color: var(--night-ink);
}

.slide-ui {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.slide-ui [data-ui].call {
  padding: 16px;
  border-radius: 8px;
  background: #2a2a2d;
}

.slide-ui [data-ui].response {
  width: 100%;
  max-width: 560px;
  margin: 0;
}

.slide-ui .shot {
  width: 100%;
  max-width: 680px;
  margin: 0;
}

/* The saved grid, drawn like the Uses pictures: four simplified panes in the app's dark window. */
.slide-ui .shot-win {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: var(--ui-bg);
  overflow: hidden;
  container-type: inline-size;
}

.shot-win .mw-grid {
  gap: 0.6cqi;
  padding: 0.6cqi;
}

/* The first step is a working picker: the nine layouts on the left, and a preview that reshapes to the one
   picked, its panes sliding to their new places. */
.slide.pick {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
/* The nine layouts run in one row above the preview, spanning its width. */
.layouts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
}

.layouts-picker {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.layouts-picker button {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--night-muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.layouts-picker button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--night-ink);
}

.layouts-picker button[aria-checked='true'] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.layouts-picker button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.layouts-picker i {
  display: grid;
  gap: 2px;
  width: 26px;
  height: 17px;
}

.layouts-picker b {
  border-radius: 1.5px;
  background: currentColor;
}

.layouts-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: var(--night);
}

/* Each pane is placed by fractions of the window; the 2px padding on every side makes the 4px rift. */
.lp {
  position: absolute;
  left: calc(2px + var(--x) * (100% - 4px));
  top: calc(2px + var(--y) * (100% - 4px));
  width: calc(var(--w) * (100% - 4px));
  height: calc(var(--h) * (100% - 4px));
  padding: 2px;
  container-type: size;
  transition: left 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s, transform 0.3s;
}

.lp b {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: min(10cqi, 10cqb);
  border-radius: 7px;
  background: var(--c);
  color: #fff;
  font: 700 min(56cqb, 44cqi) / 0.8 var(--display-face);
  letter-spacing: -0.04em;
}

.lp.off {
  opacity: 0;
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .lp {
    transition: opacity 0.2s;
  }
}

.steps.held .layouts {
  justify-self: end;
  width: min(100%, 50vh * 1.6);
}

.steps.held .layouts-picker button {
  height: 52px;
}

.steps.held .layouts-picker i {
  width: 30px;
  height: 20px;
}

@media (max-width: 600px) {
  .layouts-picker {
    gap: 2px;
  }

  .layouts-picker button {
    height: 34px;
  }

  .layouts-picker i {
    width: 20px;
    height: 13px;
  }
}

/* Held mode, switched on by the script on wide screens: the slides run in one row. */
.steps.held {
  height: calc(100vh + var(--travel, 200vh));
  padding: 0;
}

.steps.held .steps-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding: 0 var(--inset);
  overflow: hidden;
}

.steps.held .track {
  display: flex;
  width: max-content;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}

.steps.held .slide {
  flex: 0 0 calc(100vw - 2 * var(--inset) - 2 * var(--rift));
  min-height: min(640px, 70vh);
}

/* In the wide panes the app's pieces are shown enlarged, like a detail in a manual. */
.steps.held .slide-ui [data-ui] {
  zoom: 1.3;
}

/* The profiles menu stays at the app's own size, so it reads as a menu beside the larger window. */
.steps.held .slide.flip .slide-ui [data-ui].call {
  zoom: 1;
}

.steps.held .slide-ui .shot-win {
  zoom: 1;
  width: min(100%, 52vh * 1.6);
}

/* Every step reads the same way: the text on the left, the interface on the right, both centred on the
   slide's height. */
.slide.flip,
.slide.wide {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.slide-ui {
  align-content: center;
}

.slide.wide .slide-ui .shot {
  max-width: none;
}

@media (max-width: 860px) {
  .slide,
  .slide.pick,
  .slide.flip,
  .slide.wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  /* On a phone the tab is left out; the saved grid below it carries the step. */
  .slide:not(.flip) .slide-ui .call {
    display: none;
  }
}

/* ---------- privacy: one phrase across the field, the facts along its foot ---------- */

.privacy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
  min-height: 72svh;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.privacy-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  align-items: end;
}

.facts {
  grid-column: 1 / 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--body);
  line-height: 1.35;
}

.privacy-foot .text-link {
  grid-column: 10 / 13;
  justify-self: end;
  font: 600 1rem var(--display-face);
  text-align: right;
}

@media (max-width: 860px) {
  .facts {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .privacy-foot .text-link {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

/* ---------- pricing: two figures split down the middle by the gap ---------- */

.pricing h2 {
  max-width: 14ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rift);
  margin: 0 calc(var(--inset) * -1);
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius);
  background: var(--night-pane);
}

.plan.pro {
  background: var(--blue);
  color: #fff;
}

.plan h3 {
  font-size: var(--lead);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: clamp(12px, 2vw, 28px) 0 0;
}

.fig {
  font-family: var(--display-face);
  font-size: clamp(6rem, 15vw, 15rem);
  font-weight: 700;
  display: inline-block;
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.per {
  font-size: var(--lead);
}

/* The yearly bill sits quietly under "a month"; it lines up on the figure's baseline by its first line, and
   its own line is kept on Monthly too, so the card doesn't jump when the period changes. */
.per-stack {
  display: inline-flex;
  flex-direction: column;
}

.billed {
  font-size: var(--body);
  opacity: 0.72;
}

.billed.off {
  visibility: hidden;
}

.plan > p:not(.figure) {
  max-width: 44ch;
  margin: 0 0 8px;
}

.plan .btn {
  margin-top: auto;
}

.btn.paper {
  background: #fff;
  color: #111;
}

.btn.paper:hover {
  background: #e6e6ea;
}

.period {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.period button {
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 600 0.875rem var(--display-face);
  cursor: pointer;
  transition: background-color 0.15s;
}

.period button[aria-pressed='true'] {
  background: #fff;
  color: var(--blue);
}

.period button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .plans {
    grid-template-columns: 1fr;
  }

  .plan.pro {
    order: -1;
  }
}

/* ---------- questions: a stack of panes, each opened in place ---------- */

.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  color: var(--ink);
}

.faq-title {
  grid-column: 1 / 5;
  align-self: start;
}

.qs {
  grid-column: 5 / 13;
  display: grid;
  gap: var(--rift);
}

.qs details {
  border-radius: var(--radius);
  background: var(--tone);
  transition: background-color 0.2s;
}

.qs details[open] {
  background: var(--gap);
}

.qs summary {
  position: relative;
  padding: 22px 64px 22px 24px;
  font: 700 clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem) / 1.25 var(--display-face);
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

.qs summary::-webkit-details-marker {
  display: none;
}

/* A plus drawn from two bars; the upright one turns flat when the answer is open. */
.qs summary::before,
.qs summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 26px;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease-out);
}

.qs summary::after {
  transform: rotate(90deg);
}

.qs details[open] summary::after {
  transform: rotate(0deg);
}

.qs summary:hover {
  color: var(--accent);
}

.qs details p {
  max-width: 60ch;
  margin: 0;
  padding: 0 24px 24px;
}

@media (max-width: 860px) {
  .faq-title,
  .qs {
    grid-column: 1 / -1;
  }

  .faq-title {
    margin-bottom: 32px;
  }
}

/* ---------- closing: real grids drifting past, then the line ---------- */

.closing {
  padding-left: 0;
  padding-right: 0;
}

.reel {
  overflow: hidden;
}

.reel-track {
  display: flex;
  gap: var(--rift);
  width: max-content;
  animation: reel 70s linear infinite;
}

.reel:hover .reel-track {
  animation-play-state: paused;
}

.reel figure {
  flex: none;
  width: clamp(300px, 40vw, 640px);
  margin: 0;
}

.reel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@keyframes reel {
  to {
    transform: translate3d(calc(-50% - var(--rift) / 2), 0, 0);
  }
}

.closing h2,
.close-row {
  margin-left: var(--inset);
  margin-right: var(--inset);
}

.closing h2 {
  margin-top: clamp(64px, 8vw, 120px);
}

.close-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-top: 32px;
}

.close-row p {
  grid-column: 1 / 6;
  margin: 0;
  max-width: 38ch;
}

@media (max-width: 860px) {
  .close-row {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .close-row p,
  .close-row .hero-act {
    grid-column: 1;
    justify-content: flex-start;
  }
}

/* ---------- footer: the facts small along the top, the name across the foot ---------- */

.site-footer {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: 0;
  overflow: hidden;
}

.foot-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  font-size: var(--small);
  color: var(--night-muted);
}

.foot-mail {
  grid-column: 1 / 5;
  font: 700 var(--lead) var(--display-face);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.foot-mail:hover {
  text-decoration: underline;
}

.foot-row ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display-face);
  font-weight: 600;
}

.foot-row ul:nth-of-type(1) {
  grid-column: 5 / 7;
}

.foot-row ul:nth-of-type(2) {
  grid-column: 7 / 9;
}

.foot-row li + li {
  margin-top: 6px;
}

.foot-row ul a {
  text-decoration: none;
}

.foot-row ul a:hover {
  text-decoration: underline;
}

.foot-row p {
  grid-column: 9 / 13;
  max-width: 60ch;
  margin: 0;
}

.wordmark {
  margin-top: clamp(48px, 6vw, 96px);
  line-height: 0.74;
  transform: translateY(0.04em);
}

@media (max-width: 860px) {
  .foot-mail,
  .foot-row p {
    grid-column: 1 / -1;
  }

  .foot-row ul:nth-of-type(1) {
    grid-column: 1 / 7;
  }

  .foot-row ul:nth-of-type(2) {
    grid-column: 7 / -1;
  }
}

/* ---------- motion: parts of each section rise in once, from a visible default ---------- */

.js [data-reveal] {
  transition:
    opacity 0.7s var(--ease-out) calc(var(--i, 0) * 80ms),
    transform 0.8s var(--ease-out) calc(var(--i, 0) * 80ms);
}

.js [data-reveal].pre {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .use-shot,
  .drag-hint,
  .note,
  .btn {
    transition: none !important;
  }

  .js [data-reveal].pre {
    opacity: 1;
    transform: none;
  }

  [data-ui] .typed::after,
  .reel-track {
    animation: none;
  }
}