/* Emaki site prototype. Colours come from tokens.toml (accents, shell_light, shell_dark, [color]).
   One pixel grid: --p is one art pixel, an integer number of device pixels (set by site.js;
   the media queries below are the fallback without scripts). The pixel font (Departure Mono) is
   drawn on an 11 px grid, so its sizes are whole multiples of 11 device pixels (--t-*).
   The site is an ordinary page that flows to the right. Each page ("strip") is one screen tall;
   every section is one screen wide, and the next section's tab peeks in at the right edge.
   The strips stack vertically like niri workspaces, and the overview zooms out to show them. */

@font-face {
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Noto Sans Site";
  src: url("fonts/NotoSans-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Noto Sans Site";
  src: url("fonts/NotoSans-Bold.woff2") format("woff2");
  font-weight: 700;
}

:root {
  --p: 2px;
  --vw: 100vw;
  --vh: 100vh;
  --m: calc(var(--p) * 20);          /* left page margin */
  --gap: calc(var(--p) * 24);        /* gutter between sections */
  --spine: calc(var(--p) * 26);      /* the tab at the start of every section */
  --top: calc(var(--p) * 34);        /* room for the corner buttons */
  --bot: calc(var(--p) * 22);        /* room for the dithered horizon */
  /* Every section is one screen wide: the next section's tab ends exactly at the right edge. */
  --sec-w: calc(var(--vw) - var(--m) - var(--gap) - var(--spine));
  --dur: 150ms;

  /* Type: pixel sizes in multiples of 11 px, reading text in Noto Sans. */
  --t-label: 22px;
  --t-ui: 22px;
  --t-h2: 44px;
  --t-hero: 33px;
  --t-big: 55px;
  --t-spine: 22px;
  --fs: 16px;

  /* Overview state, written by site.js every frame: zoom and open progress (0 closed, 1 open). */
  --z: 1;
  --ov: 0;
  --k: 1;                            /* viewport height / 1080, niri's shadow normalisation */
  --backdrop: #14100d;               /* [color] background, our darkest */
  --bezel: #14100d;

  /* Stepped (pixel) corners: c1 one step, c2 two, c3 a round three, c4 a round four. */
  --c1: polygon(0 var(--p), var(--p) var(--p), var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)));
  --c2: polygon(0 calc(var(--p) * 2), var(--p) calc(var(--p) * 2), var(--p) var(--p), calc(var(--p) * 2) var(--p), calc(var(--p) * 2) 0, calc(100% - var(--p) * 2) 0, calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p)) var(--p), calc(100% - var(--p)) calc(var(--p) * 2), 100% calc(var(--p) * 2), 100% calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p) * 2) calc(100% - var(--p)), calc(100% - var(--p) * 2) 100%, calc(var(--p) * 2) 100%, calc(var(--p) * 2) calc(100% - var(--p)), var(--p) calc(100% - var(--p)), var(--p) calc(100% - var(--p) * 2), 0 calc(100% - var(--p) * 2));
  --c3: polygon(0 calc(var(--p) * 3), var(--p) calc(var(--p) * 3), var(--p) calc(var(--p) * 2), var(--p) var(--p), calc(var(--p) * 3) var(--p), calc(var(--p) * 3) 0, calc(100% - var(--p) * 3) 0, calc(100% - var(--p) * 3) var(--p), calc(100% - var(--p)) var(--p), calc(100% - var(--p)) calc(var(--p) * 2), calc(100% - var(--p)) calc(var(--p) * 3), 100% calc(var(--p) * 3), 100% calc(100% - var(--p) * 3), calc(100% - var(--p)) calc(100% - var(--p) * 3), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p) * 3) calc(100% - var(--p)), calc(100% - var(--p) * 3) 100%, calc(var(--p) * 3) 100%, calc(var(--p) * 3) calc(100% - var(--p)), var(--p) calc(100% - var(--p)), var(--p) calc(100% - var(--p) * 2), var(--p) calc(100% - var(--p) * 3), 0 calc(100% - var(--p) * 3));
  --c4: polygon(0 calc(var(--p) * 4), var(--p) calc(var(--p) * 4), var(--p) calc(var(--p) * 3), var(--p) calc(var(--p) * 2), calc(var(--p) * 2) calc(var(--p) * 2), calc(var(--p) * 2) var(--p), calc(var(--p) * 4) var(--p), calc(var(--p) * 4) 0, calc(100% - var(--p) * 4) 0, calc(100% - var(--p) * 4) var(--p), calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p) * 2) calc(var(--p) * 2), calc(100% - var(--p)) calc(var(--p) * 2), calc(100% - var(--p)) calc(var(--p) * 3), calc(100% - var(--p)) calc(var(--p) * 4), 100% calc(var(--p) * 4), 100% calc(100% - var(--p) * 4), calc(100% - var(--p)) calc(100% - var(--p) * 4), calc(100% - var(--p)) calc(100% - var(--p) * 3), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) calc(100% - var(--p)), calc(100% - var(--p) * 4) calc(100% - var(--p)), calc(100% - var(--p) * 4) 100%, calc(var(--p) * 4) 100%, calc(var(--p) * 4) calc(100% - var(--p)), calc(var(--p) * 2) calc(100% - var(--p)), calc(var(--p) * 2) calc(100% - var(--p) * 2), var(--p) calc(100% - var(--p) * 2), var(--p) calc(100% - var(--p) * 3), var(--p) calc(100% - var(--p) * 4), 0 calc(100% - var(--p) * 4));
}
@media (max-height: 559px) { :root { --p: 1px; --t-label: 11px; --t-ui: 11px; --t-h2: 22px; --t-hero: 22px; --t-big: 33px; --t-spine: 11px; --fs: 14px; } }
@media (min-height: 990px) { :root { --p: 3px; --t-label: 22px; --t-ui: 22px; --t-h2: 55px; --t-hero: 44px; --t-big: 66px; --t-spine: 33px; --fs: 19px; } }
@media (min-height: 1320px) { :root { --p: 4px; --t-label: 33px; --t-ui: 33px; --t-h2: 77px; --t-hero: 55px; --t-big: 88px; --t-spine: 44px; --fs: 24px; } }

/* ---------- Theme: light / dark (shell_light, shell_dark) ---------- */
[data-theme="light"] {
  --paper: #faf1ea;                  /* the page: warm, not white */
  --card: #fffaf6;
  --bg-2: #f1e5de;
  --bg-3: #e7d5cb;
  --ink: #241018;
  --body: #4a3438;
  --dim: #70565b;
  --line: #e2cfc5;
  --dot: rgba(36, 16, 24, 0.075);
  --card-shadow: #e7d5cb;
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #1c1612;
  --card: #261d19;
  --bg-2: #2b201c;
  --bg-3: #352622;
  --ink: #f4e9f0;
  --body: #e3d3d8;
  --dim: #c4b2b8;
  --line: #45342d;
  --dot: rgba(244, 233, 240, 0.06);
  --card-shadow: #0d0a08;
  color-scheme: dark;
}

/* ---------- Accents ([accents.*] in tokens.toml) ---------- */
[data-accent="orange"] { --a: #e2733f; --a-text: #2a0f05; --a-soft: #f39a5f; --a-light: #c2481f; --a-dark: #ff9b6a; --a-sel: #e7b39a; }
[data-accent="coral"]  { --a: #ef786b; --a-text: #300f0c; --a-soft: #ffb09a; --a-light: #aa382e; --a-dark: #ffaca0; --a-sel: #f9c9c4; }
[data-accent="rose"]   { --a: #e780aa; --a-text: #300c1c; --a-soft: #f5b1cb; --a-light: #a32c61; --a-dark: #ffb0d2; --a-sel: #f5ccdd; }
[data-accent="amber"]  { --a: #dca745; --a-text: #281b04; --a-soft: #f0ca78; --a-light: #855716; --a-dark: #f4ca79; --a-sel: #f1dcb5; }
[data-accent="green"]  { --a: #83b969; --a-text: #12230b; --a-soft: #b2d58e; --a-light: #416b2a; --a-dark: #b4db9c; --a-sel: #cde3c3; }
[data-accent="teal"]   { --a: #61b5a5; --a-text: #08251f; --a-soft: #91d4c4; --a-light: #25695e; --a-dark: #95d9cc; --a-sel: #c0e1db; }
[data-accent="blue"]   { --a: #78aaf0; --a-text: #0b1b36; --a-soft: #a9c9ff; --a-light: #315fab; --a-dark: #b0cfff; --a-sel: #c9ddf9; }
[data-accent="violet"] { --a: #b294e8; --a-text: #211035; --a-soft: #d2b7ff; --a-light: #69429b; --a-dark: #d5bbff; --a-sel: #e0d4f6; }

[data-theme="light"] {
  --a-ink: var(--a-light);           /* accent as text on the page */
  --a-deep: var(--a-light);          /* the hard shadow under accent buttons */
  --tint: color-mix(in srgb, var(--a) 16%, var(--paper));
  --tint-2: color-mix(in srgb, var(--a) 30%, var(--paper));
  --hover: var(--a-sel);
}
[data-theme="dark"] {
  --a-ink: var(--a-dark);
  --a-deep: color-mix(in srgb, var(--a) 45%, #000);
  --tint: color-mix(in srgb, var(--a) 14%, var(--paper));
  --tint-2: color-mix(in srgb, var(--a) 26%, var(--paper));
  --hover: var(--bg-3);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--backdrop);
  color: var(--body);
  font: var(--fs)/1.6 "Noto Sans Site", "Noto Sans", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.px, .btn, h1, h2, .spine, .next-n {
  font-family: "Departure Mono", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
.px { font-size: var(--t-label); line-height: 1.2; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
h1, h2, h3, .h4 { color: var(--ink); }
h2 { font-size: var(--t-h2); line-height: 1; }
h1.big { font-size: var(--t-big); line-height: 1; }
h3, .h4 {
  font-family: "Noto Sans Site", "Noto Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--fs) * 1.12);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.h4 { font-size: var(--fs); }
ul, ol { padding: 0; list-style: none; }
a {
  color: var(--a-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--a) 60%, transparent);
  text-decoration-thickness: var(--p);
  text-underline-offset: calc(var(--p) * 2);
}
a:hover { color: var(--ink); text-decoration-color: var(--a); background: var(--tint); }
b { color: var(--ink); font-weight: 700; }
code, pre, kbd {
  font-family: ui-monospace, "Iosevka", "DejaVu Sans Mono", "Noto Sans Mono", monospace;
  font-size: calc(var(--fs) * 0.86);
}
code { color: var(--ink); }
pre {
  background: var(--bezel);
  color: #f2e6d8;
  padding: calc(var(--p) * 5) calc(var(--p) * 6);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  clip-path: var(--c2);
  line-height: 1.55;
}
pre code { color: inherit; }
kbd {
  display: inline-block;
  color: var(--ink);
  background: var(--card);
  padding: 0 calc(var(--p) * 3);
  box-shadow: inset 0 calc(var(--p) * -2) 0 var(--bg-3), inset 0 0 0 var(--p) var(--line);
  clip-path: var(--c1);
  line-height: 1.6;
}
.ico {
  width: calc(var(--p) * 9);
  height: calc(var(--p) * 9);
  fill: currentColor;
  shape-rendering: crispEdges;
  flex: none;
}
:focus { outline: none; }
:focus-visible { outline: var(--p) solid var(--ink); outline-offset: calc(var(--p) * 2); }
.small { font-size: calc(var(--fs) * 0.88); color: var(--dim); }

/* ---------- Pixel surfaces: the face and its hard shadow live on pseudo-elements,
   so the stepped corners clip them but never clip text or focus outlines. ---------- */
.btn, .card, .screen-face, .spine, .tile, .next {
  position: relative;
  isolation: isolate;
}
.btn::before, .card::before, .screen-face::before, .spine::before, .tile::before, .next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.btn::after, .card::after, .screen-face::after, .next::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* ---------- Buttons: 2 px hard shadow; hover lifts by one pixel, press sinks into the shadow ---------- */
.btn {
  --face: var(--card);
  --shade: var(--bg-3);
  --sh: var(--p);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--p) * 4);
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: calc(var(--p) * 4) calc(var(--p) * 6);
  white-space: nowrap;
}
.btn::before { background: var(--face); clip-path: var(--c2); }
.btn::after { background: var(--shade); clip-path: var(--c2); transform: translate(var(--sh), var(--sh)); }
.btn:hover { color: var(--ink); background: none; transform: translate(calc(var(--p) * -1), calc(var(--p) * -1)); }
.btn:hover::after { transform: translate(calc(var(--sh) + var(--p)), calc(var(--sh) + var(--p))); }
.btn:active { transform: translate(var(--sh), var(--sh)); }
.btn:active::after { transform: none; }

.btn-primary {
  --face: var(--a);
  --shade: var(--a-deep);
  --sh: calc(var(--p) * 2);
  color: var(--a-text);
  font-size: var(--t-hero);
  padding: calc(var(--p) * 8) calc(var(--p) * 12) calc(var(--p) * 8) calc(var(--p) * 10);
  gap: calc(var(--p) * 7);
}
.btn-primary:hover { color: var(--a-text); --face: var(--a-soft); }
.btn-primary .ico { width: calc(var(--t-hero) * 9 / 11); height: calc(var(--t-hero) * 9 / 11); }

/* ---------- The two corner controls ---------- */
.corner { position: fixed; top: calc(var(--p) * 9); z-index: 40; }
.corner-l { left: var(--m); padding: calc(var(--p) * 3) calc(var(--p) * 5); gap: calc(var(--p) * 4); font-size: var(--t-ui); }
.corner-l .ico { width: calc(var(--p) * 7); height: calc(var(--p) * 7); color: var(--a-ink); }
.corner-r { right: var(--m); }
.btn-icon { padding: calc(var(--p) * 3); font-size: var(--t-ui); }
.btn-icon .ico { width: calc(var(--p) * 9); height: calc(var(--p) * 9); }
.corner-l[aria-expanded="true"] { --face: var(--a); --shade: var(--a-deep); }
.corner-l[aria-expanded="true"], .corner-l[aria-expanded="true"] .ico { color: var(--a-text); }

.theme-pop {
  position: absolute;
  right: 0;
  top: calc(100% + var(--p) * 5);
  width: calc(var(--p) * 160);
  padding: calc(var(--p) * 8);
  background: var(--card);
  box-shadow: calc(var(--p) * 3) calc(var(--p) * 3) 0 var(--card-shadow), 0 0 0 var(--p) var(--line);
  z-index: 30;
}
.theme-pop[hidden] { display: none; }
.pop-h { color: var(--ink); margin-bottom: calc(var(--p) * 4); }
.seg { display: flex; gap: calc(var(--p) * 3); margin-bottom: calc(var(--p) * 8); }
.btn-seg { flex: 1; justify-content: center; --face: var(--bg-2); }
.btn-seg[aria-pressed="true"] { color: var(--a-text); --face: var(--a); --shade: var(--a-deep); }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--p) * 2); }
.sw {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 4);
  padding: calc(var(--p) * 2) calc(var(--p) * 3);
  border: 0;
  background: none;
  color: var(--body);
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: var(--t-label);
  -webkit-font-smoothing: none;
  cursor: pointer;
  text-align: left;
  position: relative;
  isolation: isolate;
}
.sw::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--c2); }
.sw:hover::before { background: var(--bg-2); }
.sw[aria-pressed="true"] { color: var(--ink); }
.sw[aria-pressed="true"]::before { background: var(--bg-3); }
.chip { width: calc(var(--p) * 8); height: calc(var(--p) * 8); clip-path: var(--c1); flex: none; }
.chip[data-a="orange"] { background: #e2733f; }
.chip[data-a="coral"]  { background: #ef786b; }
.chip[data-a="rose"]   { background: #e780aa; }
.chip[data-a="amber"]  { background: #dca745; }
.chip[data-a="green"]  { background: #83b969; }
.chip[data-a="teal"]   { background: #61b5a5; }
.chip[data-a="blue"]   { background: #78aaf0; }
.chip[data-a="violet"] { background: #b294e8; }
.pop-note { margin-top: calc(var(--p) * 7); font-size: calc(var(--fs) * 0.82); color: var(--dim); }

.phone-menu { display: none; }

/* ---------- Strips: one screen each, flowing to the right ---------- */
.stage { position: fixed; inset: 0; overflow: clip; }
.strip {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--vw);
  height: var(--vh);
  /* Warm paper with a faint pixel dot grid. */
  background:
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--dot) 0) 0 0 / calc(var(--p) * 8) calc(var(--p) * 8),
    var(--paper);
  transform-origin: 0 0;
  will-change: transform;
  /* niri's workspace shadow: softness 40, spread 10, offset y 10, #00000050, at 1080 px tall. */
  box-shadow: 0 calc(10px * var(--k)) calc(40px * var(--k)) calc(10px * var(--k)) rgba(0, 0, 0, calc(0.3137 * var(--ov)));
}

/* The dithered horizon along the bottom of every page: 1/16, 1/4, 1/2 and 3/4 of the pixels. */
.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-rows: calc(var(--p) * 4);
  pointer-events: none;
  --hc: var(--tint-2);
}
.horizon i { display: block; }
.horizon i:nth-child(1) { background: conic-gradient(at var(--p) var(--p), transparent 75%, var(--hc) 0) 0 0 / calc(var(--p) * 4) calc(var(--p) * 2); }
.horizon i:nth-child(2) { background: conic-gradient(at var(--p) var(--p), transparent 75%, var(--hc) 0) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2); }
.horizon i:nth-child(3) { background: conic-gradient(var(--hc) 25%, transparent 0 50%, var(--hc) 0 75%, transparent 0) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2); }
.horizon i:nth-child(4) { background: conic-gradient(at var(--p) var(--p), var(--hc) 75%, transparent 0) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2); }

.scroller {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  padding: var(--top) 0 var(--bot) var(--m);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-padding-left: var(--m);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller::after { content: ""; flex: none; width: calc(var(--m) - var(--gap) + 1px); }

.sec {
  flex: none;
  width: var(--sec-w);
  display: flex;
  gap: calc(var(--p) * 22);
  min-height: 0;
  container-type: inline-size;
}
.body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: calc(var(--p) * 14);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding: calc(var(--p) * 4) calc(var(--p) * 6) calc(var(--p) * 8) 0;
}

/* The tab at the start of every section: its number and name, read top to bottom. */
.spine {
  flex: none;
  width: var(--spine);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--p) * 8);
  padding: calc(var(--p) * 8) 0;
  color: var(--a-text);
  overflow: hidden;
}
.spine::before { background: var(--a); clip-path: var(--c2); }
.spine-n { font-size: var(--t-spine); line-height: 1; }
.spine-t {
  writing-mode: vertical-rl;
  font-size: var(--t-spine);
  line-height: 1;
  white-space: nowrap;
}

.sec-head { display: flex; flex-direction: column; gap: calc(var(--p) * 7); }
.sec-lead { font-size: calc(var(--fs) * 1.15); color: var(--body); max-width: 46em; line-height: 1.5; }

/* In the overview the pages are pictures: clicks choose a page, they do not follow links. */
.is-overview .strip * { pointer-events: none; }
.is-overview .strip { cursor: pointer; }
.is-overview .strip.is-hot {
  outline: calc(var(--p) * 2 / var(--z)) solid var(--a);
  outline-offset: 0;
}

/* Overview labels sit on the backdrop, beside each page; they do not zoom. */
.ov-label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  border: 0;
  background: none;
  padding: calc(var(--p) * 2) 0;
  color: #f2e6d8;
  opacity: 0.72;
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: var(--t-ui);
  line-height: 1.2;
  -webkit-font-smoothing: none;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-100%, -50%);
  visibility: hidden;
}
.is-overview .ov-label { visibility: visible; }
.ov-label.is-hot, .ov-label:hover { opacity: 1; color: var(--a); }

/* ---------- Shared blocks ---------- */
.eyebrow { display: flex; align-items: center; gap: calc(var(--p) * 5); color: var(--a-ink); }
.eyebrow::before { content: ""; width: calc(var(--p) * 4); height: calc(var(--p) * 4); background: var(--a); flex: none; }
.lead { font-size: calc(var(--fs) * 1.3); line-height: 1.5; color: var(--ink); max-width: 30em; }

.card { padding: calc(var(--p) * 9) calc(var(--p) * 10); display: flex; flex-direction: column; gap: calc(var(--p) * 5); min-width: 0; }
.card::before { background: var(--card); clip-path: var(--c2); }
.card::after { background: var(--card-shadow); clip-path: var(--c2); transform: translate(calc(var(--p) * 2), calc(var(--p) * 2)); }

.tile {
  flex: none;
  width: calc(var(--p) * 17);
  height: calc(var(--p) * 17);
  display: grid;
  place-items: center;
  color: var(--a-ink);
}
.tile::before { background: var(--tint-2); clip-path: var(--c1); }

.list li { position: relative; padding-left: calc(var(--p) * 10); }
.list li + li { margin-top: calc(var(--p) * 4); }
.list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: calc(var(--p) * 3); height: calc(var(--p) * 3); background: var(--a); }

.grid2, .grid3, .steps { display: grid; gap: calc(var(--p) * 12); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--p) * 12); }
.note { color: var(--body); max-width: 60em; }
.note .px { color: var(--a-ink); margin-right: calc(var(--p) * 4); }

/* Links that move along the page: pixel label, arrow, and a pixel bar under it. */
.more { display: flex; flex-wrap: wrap; gap: calc(var(--p) * 4) calc(var(--p) * 14); }
.more-a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--p) * 4);
  color: var(--ink);
  text-decoration: none;
  padding-bottom: calc(var(--p) * 3);
  background: linear-gradient(var(--a), var(--a)) 0 100% / 100% var(--p) no-repeat;
}
.more-a .ico { width: calc(var(--p) * 7); height: calc(var(--p) * 7); color: var(--a-ink); }
.more-a:hover { color: var(--a-ink); background: linear-gradient(var(--a), var(--a)) 0 100% / 100% calc(var(--p) * 2) no-repeat; }
.more-a:hover .ico { transform: translateX(var(--p)); }

/* ---------- Product shots: a screen with stepped corners and a hard accent shadow ---------- */
.screen { position: relative; display: flex; flex-direction: column; gap: calc(var(--p) * 8); min-width: 0; }
.screen-face { padding: calc(var(--p) * 3); }
.screen-face::before { background: var(--bezel); clip-path: var(--c4); }
.screen-face::after { background: var(--a); clip-path: var(--c4); transform: translate(calc(var(--p) * 6), calc(var(--p) * 6)); }
.screen-media { position: relative; aspect-ratio: 16 / 9; clip-path: var(--c2); background: #2a211a; overflow: hidden; }
.screen-tall .screen-media { aspect-ratio: 920 / 760; }
.screen-media img, .screen-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen-video { position: absolute; inset: 0; opacity: 0; }
.screen-video.is-live { opacity: 1; }
.screen figcaption { display: flex; align-items: center; gap: calc(var(--p) * 4); color: var(--dim); padding-left: calc(var(--p) * 2); }
.screen figcaption::before { content: ""; width: calc(var(--p) * 3); height: calc(var(--p) * 3); background: var(--a); flex: none; }

/* ---------- Download (first screen of Emaki) ---------- */
.hero { flex-direction: column; justify-content: center; gap: calc(var(--p) * 20); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--p) * 28); min-height: 0; }
.hero-main {
  flex: none;
  width: calc(var(--wm, 2px) * 200 + var(--p) * 26);
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 10);
}
.hero-main h1 { line-height: 0; margin: calc(var(--p) * 2) 0; }
/* The wordmark is 200 × 48 art pixels; site.js sets an integer device-pixel scale. */
.wordmark {
  display: block;
  width: calc(var(--wm, 2px) * 200);
  height: calc(var(--wm, 2px) * 48);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.dl { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--p) * 7); margin-top: calc(var(--p) * 6); }
.dl-meta { color: var(--dim); }
.hero .more { margin-top: calc(var(--p) * 4); }
.hero-shot {
  flex: 0 1 auto;
  width: 100%;
  /* As wide as the row allows, but never taller than the screen leaves room for. */
  max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 92) * 16 / 9);
  margin-right: calc(var(--p) * 6);
}
.glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--p) * 14);
  padding-top: calc(var(--p) * 12);
  border-top: var(--p) solid var(--line);
}
.glance li, .points li { display: flex; gap: calc(var(--p) * 7); align-items: flex-start; }
.glance p, .points p { color: var(--dim); font-size: calc(var(--fs) * 0.92); line-height: 1.45; margin-top: calc(var(--p) * 1); }

/* ---------- First screens of About, Docs, Community ---------- */
.split { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--p) * 30); }
.split-main { flex: 0 1 calc(var(--p) * 300); min-width: 0; display: flex; flex-direction: column; gap: calc(var(--p) * 12); }
.split-main .lead { max-width: 26em; }
.points { display: flex; flex-direction: column; gap: calc(var(--p) * 9); margin-top: calc(var(--p) * 4); }
.split-shot {
  flex: 0 1 auto;
  width: 100%;
  max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 40) * 920 / 760);
  margin-right: calc(var(--p) * 6);
}

/* Docs: contents and the first keys */
.toc { display: flex; flex-direction: column; margin-top: calc(var(--p) * 4); border-top: var(--p) solid var(--line); }
.toc a {
  display: grid;
  grid-template-columns: calc(var(--t-label) * 2) 1fr;
  column-gap: calc(var(--p) * 6);
  align-items: baseline;
  padding: calc(var(--p) * 5) calc(var(--p) * 4);
  color: var(--body);
  text-decoration: none;
  border-bottom: var(--p) solid var(--line);
}
.toc-n { color: var(--a-ink); grid-row: 1 / span 2; }
.toc-t { color: var(--ink); font-weight: 700; font-size: calc(var(--fs) * 1.08); }
.toc-d { grid-column: 2; color: var(--dim); font-size: calc(var(--fs) * 0.92); }
.toc a:hover { background: var(--tint); }
.toc a:hover .toc-t { color: var(--a-ink); }
.keypanel { flex: 0 1 calc(var(--p) * 230); padding: calc(var(--p) * 14); gap: calc(var(--p) * 12); margin-right: calc(var(--p) * 6); }
.keypanel-h { color: var(--a-ink); font-size: var(--t-label); }
.bigkeys { display: flex; flex-direction: column; gap: calc(var(--p) * 9); }
.bigkeys > div { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--p) * 10); padding-bottom: calc(var(--p) * 9); border-bottom: var(--p) solid var(--line); }
.bigkeys > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bigkeys dt { display: flex; gap: calc(var(--p) * 3); }
.bigkeys dd { color: var(--ink); font-size: calc(var(--fs) * 1.08); }
.bigkeys kbd, .keys kbd {
  font-family: "Departure Mono", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  font-size: var(--t-label);
  line-height: 1;
  padding: calc(var(--p) * 4) calc(var(--p) * 5) calc(var(--p) * 6);
  box-shadow: inset 0 calc(var(--p) * -3) 0 var(--bg-3), inset 0 0 0 var(--p) var(--line);
  background: var(--card);
  clip-path: var(--c1);
}
[data-theme="dark"] .bigkeys kbd, [data-theme="dark"] .keys kbd { background: var(--bg-3); box-shadow: inset 0 calc(var(--p) * -3) 0 #1a1310, inset 0 0 0 var(--p) var(--line); }
[data-theme="dark"] kbd { background: var(--bg-3); }

/* Community: places */
.places {
  flex: 0 1 calc(var(--p) * 360);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--p) * 10);
  margin-right: calc(var(--p) * 4);
}
.place {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--p) * 7);
  row-gap: calc(var(--p) * 1);
  align-items: center;
  color: var(--body);
  text-decoration: none;
}
.place .tile { grid-row: 1 / span 2; }
.place-t { color: var(--ink); font-weight: 700; font-size: calc(var(--fs) * 1.1); }
.place-w { color: var(--a-ink); grid-column: 2; }
.place-d { grid-column: 1 / -1; color: var(--dim); font-size: calc(var(--fs) * 0.92); margin-top: calc(var(--p) * 4); }
a.place:hover { background: none; transform: translate(calc(var(--p) * -1), calc(var(--p) * -1)); }
a.place:hover::after { transform: translate(calc(var(--p) * 3), calc(var(--p) * 3)); background: var(--a); }
a.place:active { transform: translate(var(--p), var(--p)); }
a.place:active::after { transform: none; }
.place-soon .tile { color: var(--dim); }
.place-soon .tile::before { background: var(--bg-2); }
.place-soon .place-w { color: var(--dim); }

/* ---------- Install ---------- */
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--p) * 8); row-gap: calc(var(--p) * 4); align-content: start; }
.steps li > :not(.step-n) { grid-column: 2; }
.step-n {
  grid-row: 1 / span 3;
  width: calc(var(--t-label) + var(--p) * 8);
  height: calc(var(--t-label) + var(--p) * 8);
  display: grid;
  place-items: center;
  background: var(--a);
  color: var(--a-text);
  clip-path: var(--c1);
  line-height: 1;
}
.facts { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--p) * 12); }
.facts > div { display: flex; flex-direction: column; gap: calc(var(--p) * 3); padding-left: calc(var(--p) * 8); border-left: var(--p) solid var(--a); }
.facts dt { color: var(--dim); }
.hash { overflow-wrap: anywhere; }

/* ---------- Verify ---------- */
.hashcard { gap: calc(var(--p) * 5); }
.hashcard::before { background: var(--tint); }
.hashcard::after { background: var(--a); }
.hashcard-k { color: var(--a-ink); }
.hash-big { font-size: calc(var(--fs) * 1.2); letter-spacing: 0.02em; }
.cmds { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--p) * 4) calc(var(--p) * 8); align-items: baseline; }
.cmds dt { color: var(--dim); }
.cmds code { overflow-wrap: anywhere; }

/* ---------- What's new / niri ---------- */
.news-body { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--p) * 28); }
.news-text { flex: 0 1 calc(var(--p) * 260); display: flex; flex-direction: column; gap: calc(var(--p) * 12); min-width: 0; }
.prose { display: flex; flex-direction: column; gap: calc(var(--p) * 7); max-width: 34em; }
.news-shots {
  flex: 0 1 auto;
  width: 100%;
  max-width: calc((var(--vh) - var(--top) - var(--bot)) * 1.25);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: calc(var(--p) * 18);
  align-items: center;
  margin-right: calc(var(--p) * 6);
}
.news-shots-one { grid-template-columns: 1fr; max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 40) * 16 / 9); }

/* ---------- Keys ---------- */
.keys { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--p) * 7) calc(var(--p) * 8); align-items: center; align-content: start; }
.keys dt { white-space: nowrap; display: flex; gap: calc(var(--p) * 2); }
.keys dd { color: var(--ink); }

/* ---------- The last section of a page points to the next page ---------- */
.sec-next { width: calc(var(--p) * 150); }
.next {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--p) * 6);
  padding: calc(var(--p) * 16);
  color: var(--a-text);
  text-decoration: none;
  margin: 0 calc(var(--p) * 4) calc(var(--p) * 4) 0;
}
.next::before { background: var(--a); clip-path: var(--c4); }
.next::after { background: var(--a-deep); clip-path: var(--c4); transform: translate(calc(var(--p) * 3), calc(var(--p) * 3)); }
.next:hover { color: var(--a-text); background: none; transform: translate(calc(var(--p) * -1), calc(var(--p) * -1)); }
.next:hover::after { transform: translate(calc(var(--p) * 4), calc(var(--p) * 4)); }
.next-k { opacity: 0.8; }
.next-n { font-size: var(--t-h2); line-height: 1; }
.next-d { max-width: 16em; }
.next-ico { width: calc(var(--p) * 18); height: calc(var(--p) * 18); margin-top: calc(var(--p) * 6); }

/* ---------- Width classes from site.js: section width in art pixels ---------- */
[data-width="wide"] .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-width="wide"] .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-width="wide"] .places { flex-basis: calc(var(--p) * 480); grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-width="narrow"] .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--p) * 8) calc(var(--p) * 14); }
[data-width="narrow"] .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-width="narrow"] .facts { grid-template-columns: 1fr; }
[data-width="narrow"] .news-shots { grid-template-columns: 1fr; }
[data-width="narrow"] .news-shots .screen-tall { display: none; }
[data-width="narrow"] .split-main { flex-basis: calc(var(--p) * 250); }

/* ---------- Phones: a normal vertical page ---------- */
@media (max-width: 699px) {
  :root { --p: 2px; --m: 18px; --fs: 16px; --t-label: 11px; --t-ui: 22px; --t-h2: 33px; --t-hero: 22px; --t-big: 33px; --t-spine: 11px; }
  body { overflow: auto; background: var(--paper); height: auto; }
  .stage { position: static; overflow: visible; }
  .strip { position: static; width: auto; height: auto; transform: none !important; box-shadow: none; padding-top: 8px; }
  .strip + .strip { border-top: var(--p) solid var(--line); }
  .horizon, .spine { display: none; }
  #emaki { padding-top: 56px; }
  .scroller { display: block; overflow: visible; height: auto; padding: 0 var(--m); }
  .scroller::after { display: none; }
  .sec, .sec-next { width: auto; display: block; padding: 28px 0; }
  .body { overflow: visible; padding: 0; }
  .strip, .sec { scroll-margin-top: 44px; }
  .hero, .split, .news-body, .hero-top { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .hero-main { width: auto; }
  .hero-shot, .split-shot, .news-shots { max-width: none; margin-right: 6px; }
  .btn-primary { justify-content: center; align-self: stretch; }
  .dl { align-items: stretch; }
  .glance, .grid2, .grid3, .steps, .cols, .places, .facts, .news-shots { grid-template-columns: 1fr; }
  .split-main, .news-text, .keypanel, .places { flex: none; margin-right: 0; }
  .sec-next { padding-bottom: 40px; }
  .next { min-height: 180px; margin: 0 6px 6px 0; }
  .corner { top: 10px; }
  .corner-l { left: 10px; }
  .corner-r { right: 10px; }
  .phone-menu {
    position: fixed;
    top: 52px;
    left: 10px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background: var(--card);
    box-shadow: 4px 4px 0 var(--card-shadow), 0 0 0 2px var(--line);
  }
  .phone-menu[hidden] { display: none; }
  .phone-menu a { padding: 12px 16px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--line); font-size: 22px; }
  .phone-menu a:last-child { border-bottom: 0; }
  .phone-menu a[aria-current="true"] { color: var(--a-ink); }
  .ov-label { display: none; }
  .theme-pop { position: fixed; right: 10px; top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  .btn:active, .btn:hover, .next:hover, a.place:hover { transform: none; }
}

/* ---------- Round 3 fixes ---------- */
/* The "Next" card peeks in like a tab: a plain accent edge, its text starts after the tab width. */
.next { padding-left: calc(var(--spine) + var(--p) * 12); }

/* Wide screens: the four points go under the text, so the product shot can grow. */
[data-width="wide"] .hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: calc(var(--p) * 30);
  row-gap: calc(var(--p) * 16);
}
[data-width="wide"] .hero-top { display: contents; }
[data-width="wide"] .hero-main { grid-column: 1; grid-row: 1; align-self: end; }
[data-width="wide"] .glance { grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(var(--wm, 2px) * 200 + var(--p) * 26); }
[data-width="wide"] .hero-shot {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 40) * 16 / 9);
}

/* What's new: the two shots overlap like prints on a table. */
.news-shots:not(.news-shots-one) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 30) * 1.45);
}
.news-shots:not(.news-shots-one) > :first-child { grid-column: 1 / 11; grid-row: 1; margin-bottom: 26%; }
.news-shots:not(.news-shots-one) > :last-child { grid-column: 7 / 13; grid-row: 1; align-self: end; z-index: 1; }
[data-width="narrow"] .news-shots:not(.news-shots-one) > :first-child { grid-column: 1 / -1; margin-bottom: 0; }

.keys { grid-template-columns: auto minmax(6.5em, 1fr); }
#links .split-main { flex-basis: calc(var(--p) * 330); }
@media (max-width: 699px) {
  .news-shots:not(.news-shots-one) { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .news-shots:not(.news-shots-one) > :first-child, .news-shots:not(.news-shots-one) > :last-child { grid-column: 1; grid-row: auto; margin-bottom: 0; }
  .news-shots .screen-tall { display: flex; }
}

/* Laptop heights (x2 pixels): denser cards so long sections fit the screen. */
[data-tier="2"] body, [data-tier="1"] body { line-height: 1.5; }
[data-tier="2"] .card { padding: calc(var(--p) * 7) calc(var(--p) * 9); gap: calc(var(--p) * 4); }
[data-tier="2"] .body { gap: calc(var(--p) * 11); }
[data-tier="2"] .grid2, [data-tier="2"] .grid3, [data-tier="2"] .steps, [data-tier="2"] .cols { gap: calc(var(--p) * 10); }
[data-tier="2"] .sec-head { gap: calc(var(--p) * 5); }
/* A section taller than the screen scrolls; its thin scrollbar is in the accent colour. */
.body { scrollbar-color: var(--a) transparent; }
.cmds dt { font-family: "Noto Sans Site", "Noto Sans", system-ui, sans-serif; font-weight: 700; font-size: calc(var(--fs) * 0.88); -webkit-font-smoothing: antialiased; }

/* Community: report and help side by side */
.rh { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--p) * 14); align-items: start; }
.rh-report { gap: calc(var(--p) * 7); }
.rh-help { display: flex; flex-direction: column; gap: calc(var(--p) * 8); }
.rh-h { color: var(--a-ink); font-size: var(--t-label); margin-bottom: calc(var(--p) * 1); }
.warn { margin-top: calc(var(--p) * 3); padding: calc(var(--p) * 6) calc(var(--p) * 8); background: var(--tint); color: var(--ink); clip-path: var(--c1); }
.warn .px { color: var(--a-ink); margin-right: calc(var(--p) * 4); }
[data-width="narrow"] .rh { grid-template-columns: 1fr; }
@media (max-width: 699px) { .rh { grid-template-columns: 1fr; } }
h1, h2, .lead, .sec-lead { text-wrap: balance; }
[data-tier] .keypanel { padding: calc(var(--p) * 12); gap: calc(var(--p) * 10); }

/* ---------- Site 4: contact line, the 404 page ---------- */
.contact { margin-top: calc(var(--p) * 2); }
.page-lost { background: var(--paper); }
.lost {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  box-shadow: none;
  display: grid;
  align-items: center;
  padding: var(--top) var(--m) calc(var(--bot) + var(--p) * 10);
}
.lost-main { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--p) * 10); max-width: calc(var(--p) * 360); margin-left: calc(var(--p) * 30); }
.lost-mark { line-height: 0; margin-bottom: calc(var(--p) * 10); }
.lost-mark:hover { background: none; }
.lost .btn-primary { margin-top: calc(var(--p) * 6); }
@media (max-width: 699px) {
  .page-lost { overflow: hidden; }
  .lost { padding: 56px var(--m) 60px; }
  .lost-main { margin-left: 0; }
}

/* ---------- Site 5: report column, the footer ---------- */
.rh-main { display: flex; flex-direction: column; gap: calc(var(--p) * 8); min-width: 0; }
.sec-end { flex-direction: column; gap: calc(var(--p) * 8); }
/* The footer lines up with the card text, so it stays hidden while the card peeks in as a tab. */
.sec-end .foot { padding-left: calc(var(--spine) + var(--p) * 12); }
.foot { display: flex; flex-wrap: wrap; gap: calc(var(--p) * 4) calc(var(--p) * 14); padding-bottom: calc(var(--p) * 2); }
.lost-foot { position: absolute; left: calc(var(--m) + var(--p) * 30); bottom: calc(var(--bot) + var(--p) * 6); }
@media (max-width: 699px) {
  .sec-end { display: flex; }
  .sec-end .foot { padding-left: 0; }
  .lost-foot { left: var(--m); bottom: 24px; }
}

/* ---------- Site 6: Programs & Updates, the MokManager screens, a look around ---------- */
.shots-programs .screen-media { aspect-ratio: 1280 / 900; }
.shots-programs.news-shots-one { max-width: calc((var(--vh) - var(--top) - var(--bot) - var(--p) * 40) * 1280 / 900); }
/* Step 3: the blue screens in a row, each a link to the full screen. */
.mok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--p) * 4); margin-top: calc(var(--p) * 1); }
.mok li { display: flex; flex-direction: column; gap: calc(var(--p) * 2); min-width: 0; }
.mok a { display: block; line-height: 0; }
.mok a:hover { background: none; }
.mok img { display: block; width: 100%; height: auto; clip-path: var(--c1); }
.mok a:hover img { filter: brightness(1.3); }
.mok span { color: var(--dim); font-size: calc(var(--fs) * 0.82); line-height: 1.3; }
.gallery { align-items: start; }
/* Normal and narrow widths: step 3 and its screens take two rows on the left, the fingerprints sit under step 4. */
.install-grid { display: flex; flex-direction: column; gap: calc(var(--p) * 14); }
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--p) * 12); }
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid .steps { display: contents; }
:root:not([data-width="wide"]):not([data-width="phone"]) .steps > li:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
:root:not([data-width="wide"]):not([data-width="phone"]) .steps > li:nth-child(4) { grid-column: 2; grid-row: 2; }
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid .facts { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; gap: calc(var(--p) * 8); align-self: start; }
[data-tier="2"]:not([data-width="wide"]) .install-grid { gap: calc(var(--p) * 10); }
[data-width="wide"] .mok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 699px) { .install-grid { gap: 28px; } }
/* Under step 4 the labels use the compact style of the Verify commands, so each stays on one line. */
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid .facts dt { font-family: "Noto Sans Site", "Noto Sans", system-ui, sans-serif; font-weight: 700; font-size: calc(var(--fs) * 0.88); -webkit-font-smoothing: antialiased; }
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid .facts { gap: calc(var(--p) * 6); }
:root:not([data-width="wide"]):not([data-width="phone"]) .install-grid .facts > div { gap: calc(var(--p) * 2); }