/* Contents page for guide.janus360.app.

   The page looks like the app. Each guide is a large card in the app's four colors,
   the same card the app shows while a shift is running, with the two phones on it.
   Under the card, each task is a white tile with a numbered circle, as in the guides.

   The reader's phone and language are two attributes on <html> (data-phone and
   data-lang). The rules that hide the other phones and languages are written into
   the page by the guides engine (guides_engine/contents.py), because they depend on
   which phones and languages exist. Everything else is here.

   Every color is a token. Components only read the variables. Layout follows the
   width of the page box and of each card, so the only @media width rules are the
   fallback at the end for browsers without container queries. */

/* ---------- Tokens ---------- */

:root,
html[data-theme="light"] {
  --bg: #f0e5e5;               /* the app's page color */
  --panel: #ffffff;
  --surface: #f7efef;
  --text: #1d1818;
  --muted: #6b5e5e;            /* 5.0:1 on the page, 6.2:1 on a tile */
  --rule: rgba(29, 24, 24, 0.14);
  --rule-strong: rgba(29, 24, 24, 0.32);
  --focus: #1d1818;
  --num: #c4323c;              /* the app's deep red; white on it is 5.4:1 */
  --num-ink: #ffffff;
  --words: #6f47b8;            /* the app's purple, deepened; white on it is 6.4:1 */
  --words-ink: #ffffff;
  --seg-track: rgba(29, 24, 24, 0.08);
  --seg-on: #1d1818;
  --seg-on-ink: #ffffff;
  --seg-on-shadow: 0 1px 3px rgba(29, 24, 24, 0.3);
  --tile-shadow: 0 1px 2px rgba(29, 24, 24, 0.05), 0 8px 18px -10px rgba(29, 24, 24, 0.2);
  --tile-shadow-up: 0 2px 4px rgba(29, 24, 24, 0.07), 0 18px 30px -12px rgba(29, 24, 24, 0.3);
  --stage-glow: 0 36px 70px -38px rgba(196, 50, 60, 0.6), 0 22px 48px -30px rgba(111, 71, 184, 0.5);
}

/* The card, the phones and the mark keep the same colors in light and dark, as the
   card does in the app. */
:root {
  --brand: #e9545c;
  --mark-ink: #1d1818;
  --g1: #e9545c;               /* the app's red, yellow and pink */
  --g2: #e9c431;
  --g3: #f5a5c8;
  --g4: #9a74d8;               /* the app's purple, lightened so dark text on it is 4.9:1 */
  --on-stage: #1d1818;         /* 4.9:1 or better on every color of the card */
  --stage-chip: rgba(255, 255, 255, 0.58);
  --stage-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  --stage-button: #ffffff;
  --stage-button-ink: #1d1818;
  --stage-button-shadow: 0 2px 4px rgba(29, 24, 24, 0.12), 0 14px 26px -14px rgba(29, 24, 24, 0.55);
  --stage-button-shadow-up: 0 3px 6px rgba(29, 24, 24, 0.14), 0 22px 34px -14px rgba(29, 24, 24, 0.6);
  --arrow: #1d1818;
  --arrow-ink: #ffffff;
  --device: #141010;
  --device-edge: #4c4545;
  --device-line: rgba(255, 255, 255, 0.16);
  --device-shadow: rgba(29, 24, 24, 0.5);
  --screen: #f0e5e5;
  --glare: rgba(255, 255, 255, 0.22);
  --halo: rgba(255, 255, 255, 0.4);
  --camera: #0c0909;
  --font: "Work Sans", var(--font-script, "Work Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1818;
    --panel: #2a2323;
    --surface: #362e2e;
    --text: #f5eded;
    --muted: #b8a9a9;          /* 7.8:1 on the page, 6.8:1 on a tile */
    --rule: rgba(245, 237, 237, 0.16);
    --rule-strong: rgba(245, 237, 237, 0.36);
    --focus: #f5eded;
    --num: #f0767c;            /* dark text on it is 6.3:1 */
    --num-ink: #1d1818;
    --words: #b092e4;          /* dark text on it is 6.8:1 */
    --words-ink: #1d1818;
    --seg-track: rgba(245, 237, 237, 0.1);
    --seg-on: #f5eded;
    --seg-on-ink: #1d1818;
    --seg-on-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --tile-shadow-up: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 30px -12px rgba(0, 0, 0, 0.75);
    --stage-glow: 0 36px 80px -40px rgba(233, 84, 92, 0.45), 0 22px 60px -34px rgba(137, 96, 204, 0.45);
  }
}

html[data-theme="dark"] {
  --bg: #1d1818;
  --panel: #2a2323;
  --surface: #362e2e;
  --text: #f5eded;
  --muted: #b8a9a9;
  --rule: rgba(245, 237, 237, 0.16);
  --rule-strong: rgba(245, 237, 237, 0.36);
  --focus: #f5eded;
  --num: #f0767c;
  --num-ink: #1d1818;
  --words: #b092e4;
  --words-ink: #1d1818;
  --seg-track: rgba(245, 237, 237, 0.1);
  --seg-on: #f5eded;
  --seg-on-ink: #1d1818;
  --seg-on-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
  --tile-shadow-up: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 30px -12px rgba(0, 0, 0, 0.75);
  --stage-glow: 0 36px 80px -40px rgba(233, 84, 92, 0.45), 0 22px 60px -34px rgba(137, 96, 204, 0.45);
}

/* ---------- Page ---------- */

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

/* Kept fully off screen until it has focus. */
.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  transform: translateY(calc(-100% - 24px));
}
.skip:focus { transform: none; }

.page {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
  container: page / inline-size;
}

/* ---------- Top bar: the name of the site, then the two pickers ---------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.brand__mark { flex: none; width: 32px; height: 32px; }
.brand__tile { fill: var(--brand); }
.brand__j { fill: var(--mark-ink); }
.brand__sub { font-weight: 400; color: var(--muted); }

/* The pickers sit on the right of the name. When the page is too narrow for that,
   they take the next line and share it. */
.pickers {
  flex: 1 1 320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.seg {
  position: relative;
  flex: 1 1 150px;
  max-width: 230px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--seg-track);
}
/* One picker alone needs less room, so it stays beside the name on all but the narrowest phones. */
.pickers[data-count="1"] { flex-basis: 150px; }
/* The radio buttons stay in the page for the keyboard and screen readers. The label is what shows. */
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 52px;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  font-size: clamp(13.5px, 4.2cqi, 15px);
  font-weight: 600;
  line-height: 1.15;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.seg input:checked + label {
  background: var(--seg-on);
  color: var(--seg-on-ink);
  box-shadow: var(--seg-on-shadow);
}
.seg input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Room for a language name whose letters are taller than Latin ones. */
.seg__name { line-height: 1.4; }
.seg__sub { font-size: 12px; line-height: 1.25; }
/* "Your phone" shows only under the phone the reader is holding. The engine's rules turn it on. */
.seg__sub[data-detected-for] { display: none; }
/* A language name uses the reader's own font for letters Work Sans does not have. */
.sys { font-family: "Work Sans", system-ui, sans-serif; }

/* ---------- The card for a guide ---------- */

.guide + .guide { margin-top: 64px; }

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 20px 0;
  padding: clamp(24px, 6.5cqi, 60px) clamp(20px, 6cqi, 60px) 0;
  border-radius: 28px;
  border-radius: clamp(28px, 5cqi, 44px);
  color: var(--on-stage);
  box-shadow: var(--stage-glow);
  container: stage / inline-size;
}
/* A light line along the edge, over the colors and under the words. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--stage-edge);
  pointer-events: none;
}
.stage :focus-visible { outline-color: var(--on-stage); }

/* The app's four colors. Three soft shapes of the same colors move slowly over them,
   and a fine grain sits on top. */
.stage__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 38%, var(--g3) 68%, var(--g4) 100%);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.stage__bg i {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.stage__bg i:nth-child(1) {
  width: 64%;
  left: 12%;
  top: -34%;
  background: radial-gradient(closest-side, var(--g2), transparent);
}
.stage__bg i:nth-child(2) {
  width: 78%;
  right: -26%;
  bottom: -52%;
  background: radial-gradient(closest-side, var(--g4), transparent);
}
.stage__bg i:nth-child(3) {
  width: 60%;
  left: -22%;
  bottom: -44%;
  background: radial-gradient(closest-side, var(--g3), transparent);
}
.stage__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.38;
}

.stage__text { min-width: 0; }

.kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.title {
  margin: 10px 0 0;
  font-weight: 800;
  font-size: clamp(34px, 10vw, 60px);
  font-size: clamp(34px, 12cqi, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.tag {
  max-width: 24em;
  margin: 14px 0 0;
  font-size: 18px;
  font-size: clamp(18px, 2cqi + 12px, 22px);
  line-height: 1.4;
  text-wrap: pretty;
}

.go {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-top: 24px;
}

/* The button looks like the app's Clock Out button: a white capsule on the colors. */
.open {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  min-height: 58px;
  padding: 8px 10px 8px 26px;
  border-radius: 999px;
  background: var(--stage-button);
  color: var(--stage-button-ink);
  box-shadow: var(--stage-button-shadow);
  font-size: 17px;
  font-size: clamp(16px, 5.6cqi, 18px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.open__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--arrow);
  color: var(--arrow-ink);
  transition: transform 0.25s ease;
}
.open__arrow svg { width: 18px; height: 18px; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--stage-chip);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- The phones ----------
   Each phone reads --f: 1 for the phone in front, 0 for the one behind. The engine's
   rules set it from the reader's choice. Every size follows --w, the width of a phone. */

.stage__visual {
  --w: 150px;
  --w: clamp(150px, 46cqi, 236px);
  position: relative;
  margin-top: 30px;
  perspective: 1100px;
}

/* A soft light behind the phones lifts them off the colors. */
.stage__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--w) * 2.5);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.phones {
  --front-x: -27%;
  --front-y: 0%;
  --front-r: -5deg;
  --back-x: 40%;
  --back-y: 8%;
  --back-r: 8deg;
  --back-s: 0.9;
  position: relative;
  height: calc(var(--w) * 1.36);     /* the card cuts the phones off below this */
  transform: rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg));
  transition: transform 0.35s ease-out;
}

.phone {
  --f: 0;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--f);
  width: var(--w);
  margin: 0 0 0 calc(var(--w) * -0.5);
  transform:
    translate(
      calc(var(--f) * var(--front-x) + (1 - var(--f)) * var(--back-x)),
      calc(var(--f) * var(--front-y) + (1 - var(--f)) * var(--back-y)))
    rotate(calc(var(--f) * var(--front-r) + (1 - var(--f)) * var(--back-r)))
    scale(calc(var(--f) + (1 - var(--f)) * var(--back-s)));
  filter: brightness(calc(0.9 + var(--f) * 0.1));
  /* The two phones change places: they slide past each other and swap which is on top halfway. */
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1), filter 0.8s ease, z-index 0s 0.24s;
}
.phones[data-count="1"] .phone {
  --f: 1;
  --front-x: 0%;
  --front-r: -3deg;
}

.phone__body {
  position: relative;
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.165);
  background: linear-gradient(150deg, var(--device-edge), var(--device) 26%, var(--device) 74%, var(--device-edge));
  box-shadow:
    inset 0 0 0 1px var(--device-line),
    0 calc(var(--w) * 0.14) calc(var(--w) * 0.2) calc(var(--w) * -0.1) var(--device-shadow);
}
/* The buttons on the sides of the phone. */
.phone__body::before,
.phone__body::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--w) * 0.02);
  border-radius: 2px;
  background: var(--device);
}
.phone__body::before { left: calc(var(--w) * -0.012); top: 19%; height: 7%; }
.phone__body::after { right: calc(var(--w) * -0.012); top: 24%; height: 11%; }

.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.134);
  background: var(--screen);
}
.phone__screen img {
  display: block;
  width: 100%;
  height: auto;
}
/* Light across the glass. */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, var(--glare) 0%, transparent 26%);
  pointer-events: none;
}

.phone--android .phone__body {
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.128);
}
.phone--android .phone__screen { border-radius: calc(var(--w) * 0.102); }
/* The Android screenshots have no camera, so one is drawn. */
.phone--android .phone__screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.25%;
  left: 50%;
  width: 4.4%;
  aspect-ratio: 1;
  margin-left: -2.2%;
  border-radius: 50%;
  background: var(--camera);
}

/* ---------- What is in the guide ---------- */

.inside { margin-top: clamp(28px, 4.5cqi, 48px); }

.draft {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--surface);
  font-size: 15px;
}

.inside__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
}
.inside h3 {
  margin: 0;
  font-size: 24px;
  font-size: clamp(22px, 2cqi + 14px, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.updated {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* White tiles, as in the guides. Two columns on a phone, three around 600px, four on a wide page. */
.tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(150px, 22%), 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tasks li { display: flex; }
.tasks a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 14px 10px 12px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--tile-shadow);
  color: var(--text);
  font-size: 15px;
  font-size: clamp(15px, 1cqi + 10px, 16px);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tasks a > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.tasks .n {
  flex: none;                       /* a title that wraps must not squeeze the circle */
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--num);
  color: var(--num-ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease;
}
.tasks .n--words {
  background: var(--words);
  color: var(--words-ink);
}
.tasks .n svg { width: 18px; height: 18px; }

/* The plain list of every guide, shown only when scripts are off. */
.every {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 2;
}

.foot {
  margin-top: 64px;
  padding: 18px 0 max(44px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}
.foot p { margin: 0; }

/* ---------- A language with tall letters (Burmese and others) ----------
   Marks above and below the letters need more room between lines. Spacing the letters
   apart, or pulling them together, breaks the way they join. */

.tall { line-height: 1.8; }
.tall .kicker { letter-spacing: 0; font-size: 15px; }
.tall .title {
  font-weight: 700;
  font-size: clamp(28px, 8vw, 50px);
  font-size: clamp(28px, 9.6cqi, 50px);
  line-height: 1.4;
  letter-spacing: 0;
}
.tall .tag { line-height: 1.75; }
.tall .open { line-height: 1.5; }
.tall .facts li { line-height: 1.6; }
.tall h3 { line-height: 1.5; letter-spacing: 0; }
.tall .tasks a { line-height: 1.55; }
/* The titles are longer in these languages, so the tiles are wider: one column on a phone. */
.tall .tasks { grid-template-columns: repeat(auto-fit, minmax(max(220px, 22%), 1fr)); }

/* ---------- A narrow page: the pickers are on their own line, so they fill it ---------- */

/* The name is 200px wide and the gap is 20px. Two pickers need 320px beside it, one needs 150px. */
@container page (max-width: 539px) {
  .pickers[data-count="2"] .seg { max-width: none; }
}
@container page (max-width: 369px) {
  .pickers[data-count="1"] .seg { max-width: none; }
}

/* ---------- A wide page: the words on the left of the card, the phones on the right ---------- */

@container page (min-width: 760px) {
  .stage {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 28px;
    padding-block: 0;
  }
  .stage__text {
    align-self: center;
    padding-block: clamp(40px, 5.6cqi, 60px);
  }
  .title { font-size: clamp(42px, 6.4cqi, 68px); }
  .tall .title { font-size: clamp(34px, 5cqi, 54px); }
  .stage__visual {
    --w: clamp(170px, 27cqi, 290px);
    min-height: calc(var(--w) * 2.05);
    margin-top: 0;
  }
  .phones {
    --front-x: -30%;
    --back-x: 42%;
    position: absolute;
    inset: 0;
    height: auto;
  }
  /* The card always cuts the phones off at the bottom, however tall the words make it. */
  .phone { top: max(calc(var(--w) * 0.3), calc(100% - var(--w) * 1.9)); }
}

/* ---------- Movement ---------- */

@media (hover: hover) {
  .open:hover {
    transform: translateY(-2px);
    box-shadow: var(--stage-button-shadow-up);
  }
  .open:hover .open__arrow { transform: translateX(3px); }
  .tasks a:hover {
    transform: translateY(-3px);
    box-shadow: var(--tile-shadow-up);
  }
  .tasks a:hover .n { transform: scale(1.08); }
  .seg label:hover { box-shadow: inset 0 0 0 1px var(--rule-strong); }
  .seg input:checked + label:hover { box-shadow: var(--seg-on-shadow); }
}
.open:active { transform: translateY(1px); }
.tasks a:active { transform: translateY(1px); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
  }
  @keyframes settle {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
  }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(16%) rotate(4deg); }
  }
  @keyframes float {
    from { transform: translateY(-1.1%); }
    to { transform: translateY(1.1%); }
  }
  @keyframes drift-1 {
    to { transform: translate(26%, 22%) scale(1.15); }
  }
  @keyframes drift-2 {
    to { transform: translate(-22%, -18%) scale(0.9); }
  }
  @keyframes drift-3 {
    to { transform: translate(30%, -16%) scale(1.1); }
  }

  /* The page arrives in order: the bar, the card, the words on it, the phones, then the tiles.
     When the reader changes the phone or the language, the new words and tiles arrive the
     same way but without the wait (the page sets data-switched on <html> at the first change). */
  html { --wait: 1; }
  html[data-switched] { --wait: 0; }
  .bar { animation: rise 0.6s ease backwards; }
  .stage { animation: settle 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards; }
  .stage__copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .stage__copy > :nth-child(1) { animation-delay: calc(var(--wait) * 0.14s); }
  .stage__copy > :nth-child(2) { animation-delay: calc(var(--wait) * 0.2s + 0.04s); }
  .stage__copy > :nth-child(3) { animation-delay: calc(var(--wait) * 0.27s + 0.08s); }
  .stage__copy > :nth-child(n + 4) { animation-delay: calc(var(--wait) * 0.34s + 0.12s); }
  .stage__visual { animation: arrive 1.1s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s backwards; }
  .inside__head, .draft { animation: rise 0.6s ease calc(var(--wait) * 0.4s) backwards; }
  .tasks li {
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--wait) * 0.45s + var(--i) * 30ms);
  }

  .phone__body { animation: float 7s ease-in-out infinite alternate; }
  .phone:nth-child(2) .phone__body { animation-duration: 8.5s; animation-delay: -4s; }

  .stage__bg i:nth-child(1) { animation: drift-1 21s ease-in-out infinite alternate; }
  .stage__bg i:nth-child(2) { animation: drift-2 27s ease-in-out infinite alternate; }
  .stage__bg i:nth-child(3) { animation: drift-3 24s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  .phone, .phones, .open, .open__arrow, .tasks a, .tasks .n, .seg label { transition: none; }
}

/* Windows high contrast: colors are replaced, so the chosen button needs an outline. */
@media (forced-colors: active) {
  .seg input:checked + label { outline: 2px solid; outline-offset: -2px; }
  .open, .tasks a, .facts li { border: 1px solid; }
}

/* ---------- Browsers without container queries ---------- */

@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .stage {
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      column-gap: 28px;
      padding: 0 56px;
    }
    .stage__text { align-self: center; padding-block: 56px; }
    .title { font-size: 56px; }
    .tall .title { font-size: 44px; }
    .stage__visual {
      --w: 230px;
      min-height: calc(var(--w) * 2.05);
      margin-top: 0;
    }
    .phones {
      --front-x: -30%;
      --back-x: 42%;
      position: absolute;
      inset: 0;
      height: auto;
    }
    .phone { top: max(calc(var(--w) * 0.3), calc(100% - var(--w) * 1.9)); }
  }
}

@media print {
  .skip, .pickers, .stage__visual, .stage__bg i { display: none !important; }
  .stage { box-shadow: none; }
  .tasks a { box-shadow: none; border: 1px solid var(--rule-strong); }
}