/* The site is drawn the way the panel is drawn.
 *
 * Sixteen greys, no colour, no shadow, no gradient. Rules are 2 px black,
 * surfaces are panel white, the surround is one of the light greys, and the
 * background is a 25 % dither — the texture of a screen made of pixels.
 * The rules come from the system's own interface spec (docs/design/eink-ui.md):
 * outlines instead of elevation, state shown by inversion rather than colour.
 *
 * Inside .screen everything is laid out in real device pixels: the panel is
 * 1072 px wide, so --u is one device pixel and the sizes read the same as in
 * the Android resources (38 px body text, 48 dp rows, 2 px outlines).
 */

:root {
  color-scheme: light;

  /* The 16-level ramp, by panel level. */
  --l15: #ffffff;
  --l14: #eeeeee;
  --l12: #cccccc;
  --l9: #999999;
  --l6: #666666;
  --l3: #333333;
  --l0: #000000;

  --w: var(--l15);
  --page: #f1f1f1;
  --sunk: #e4e4e4;
  --k: var(--l0);
  --g1: #2b2b2b;
  --g2: #5e5e5e;
  --g3: #8f8f8f;
  --g4: #c4c4c4;
  --dither: rgba(0, 0, 0, 0.07);

  --rule: 2px;
  --hair: 1px;
  --maxw: 1120px;
  --gutter: clamp(18px, 5vw, 48px);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Noto Sans Mono CJK SC", monospace;

  /* The panel as the eye sees it, in any theme. Carta's white state reflects
   * about 42 %, so its white is a light warm grey and its black is not
   * ink-black. The system still writes level 15 and level 0 — this is how
   * those two look on glass. */
  --screen-bg: #f2f1ed;
  --screen-ink: #1c1c1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --w: #0c0c0c;
    --page: #000000;
    --sunk: #141414;
    --k: #f2f2f2;
    --g1: #dcdcdc;
    --g2: #a6a6a6;
    --g3: #727272;
    --g4: #3a3a3a;
    --dither: rgba(255, 255, 255, 0.07);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--page);
  background-image: radial-gradient(var(--dither) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  color: var(--k);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* A pen nib, point first, because this device has no pen of its own —
   * the pen belongs to the reader, the one you annotate a book with. The
   * hotspot is the nib's point. Text fields keep the I-beam below. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3 L10.5 22.5 Q16.5 16.5 22.5 10.5 Z' fill='%23fff' stroke='%231a1a1a' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M3 3 L12.2 12.2' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='14.3' cy='14.3' r='1.7' fill='%23fff' stroke='%231a1a1a' stroke-width='1.3'/%3E%3C/svg%3E")
      3 3,
    auto;
}

/* Over anything that can be clicked, a drop of ink gathers at the point. */
a,
button,
summary,
[role="button"],
label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3 L10.5 22.5 Q16.5 16.5 22.5 10.5 Z' fill='%23fff' stroke='%231a1a1a' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M3 3 L12.2 12.2' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='14.3' cy='14.3' r='1.7' fill='%23fff' stroke='%231a1a1a' stroke-width='1.3'/%3E%3Ccircle cx='2.6' cy='2.6' r='2.7' fill='%231a1a1a'/%3E%3C/svg%3E")
      3 3,
    pointer;
}

input,
textarea,
select {
  cursor: auto;
}

@media (prefers-color-scheme: dark) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3 L10.5 22.5 Q16.5 16.5 22.5 10.5 Z' fill='%231a1a1a' stroke='%23f2f2f2' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M3 3 L12.2 12.2' stroke='%23f2f2f2' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='14.3' cy='14.3' r='1.7' fill='%231a1a1a' stroke='%23f2f2f2' stroke-width='1.3'/%3E%3C/svg%3E")
        3 3,
      auto;
  }
}

/* The selection is the panel inverting a block, not a system highlight. */
::selection {
  background: var(--k);
  color: var(--page);
}

img,
svg {
  max-width: 100%;
}

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

:focus-visible {
  outline: var(--rule) solid var(--k);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 0.85em;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--sunk);
  padding: 0.08em 0.34em;
  border: var(--hair) solid var(--g4);
}

/* Both languages live in the page; the inactive one is taken out. */
html[data-lang="zh"] [data-l="en"],
html[data-lang="en"] [data-l="zh"] {
  display: none !important;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections are separated by a hairline, not by a black rule: the heavy rules
 * belong to the things that are surfaces — panels, tables, the device. */
.section {
  padding-block: clamp(60px, 8.5vw, 116px);
  border-top: var(--hair) solid var(--g4);
}

.lede {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--g2);
  max-width: 36em;
}

/* A section announces itself with a tick, a word in the panel's own
 * typeface, and then says what it is. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g3);
  margin: 0 0 12px;
}

.head .label::before,
.pagehead .label::before {
  content: "";
  display: block;
  width: 26px;
  height: var(--rule);
  background: var(--k);
  margin-bottom: 14px;
}

.head {
  margin-bottom: clamp(26px, 3.8vw, 44px);
}

.head h2 {
  font-size: clamp(25px, 3.8vw, 40px);
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------- chrome */

/* The bar and the status line stay together and never leave. Their height is
 * measured into --chrome, because the stage is sized against it. */
.chrome {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* At the top of the page the bar is part of it; once the page has moved under
 * it, it becomes a surface and earns its rule. */
.topbar {
  background: var(--page);
  border-bottom: var(--hair) solid var(--g4);
}

.topbar.stuck {
  border-bottom-width: var(--rule);
  border-bottom-color: var(--k);
}

/* The viewport is `viewport-fit=cover`, so the artwork bleeds into the
 * notch and the home indicator — which is the point — but nothing you have
 * to read or press may sit under them. Every edge-anchored thing on the
 * page clears the inset: the bar here, the drawer it opens, and the three
 * at the bottom (home.css, "the edges of the page"). */
.topbar-in {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 3vw, 34px);
  min-height: 60px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* The name is one word and the drawn R is its first letter, so the five
 * that follow are drawn too: the whole lockup is one piece of artwork out
 * of the brand kit (material/Readom_integrated_brand_v2), not a drawing
 * set next to type. The letters are vector paths, so nothing here depends
 * on a font being present — the page is still zero third-party requests.
 *
 * Four files, picked by <picture> so only one is ever fetched:
 *   wordmark.svg          the whole name, in colour      (default)
 *   wordmark-reverse.svg  the same, all white            (dark)
 *   mark.svg              the R alone, in colour         (≤480px)
 *   mark-reverse.svg      the R alone, all white         (≤480px, dark)
 * The kit's own rule: the R alone is for small squares, the wordmark for
 * everything horizontal, and a dark ground takes the reverse — never the
 * ink version. Never the R followed by a second, typed "Readom". */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}

/* Sized by height, width auto, so the wordmark (3.73 : 1) and the R alone
 * (1 : 1) each keep their own proportion from the same rule. 46px leaves
 * the lockup about 172px wide — the kit asks for at least 160. */
.brand img {
  display: block;
  height: 46px;
  width: auto;
}


/* Everything on the right that is not a link to a page. One of these is a
 * button; the rest are words. */
.navtools {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: none;
}

.nav-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--g2) !important;
  text-decoration: none;
  white-space: nowrap;
}

.nav-star .ico {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
}

.nav-star:hover {
  color: var(--k) !important;
}

/* Language: two words, the live one underlined. No boxes — there is one
 * boxed thing in this bar and it is the button. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-left: 15px;
  border-left: var(--hair) solid var(--g4);
}

/* On the home page the bar carries nothing else, so there is nothing to
 * divide it from. */
.lang-only {
  padding-left: 0;
  border-left: 0;
}

.lang button {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--g3);
  line-height: 1.4;
}

.lang button:hover {
  color: var(--k);
}

.lang button[aria-pressed="true"] {
  color: var(--k);
  box-shadow: inset 0 -2px 0 0 var(--k);
}


@media (max-width: 620px) {
  .navtools {
    gap: 12px;
  }
  /* The bar keeps the language and the one action. Star has its own section. */
  .nav-star,
  .band-more {
    display: none !important;
  }
  .lang {
    padding-left: 12px;
  }
}

/* Narrower still: the whole name would push the bar wider than the window,
 * so <picture> swaps in the R alone — which is the name's own first letter
 * and the kit's prescribed small-square form. Square, so it is given the
 * height it should have as a mark rather than the wordmark's. */
@media (max-width: 480px) {
  .brand img {
    height: 36px;
  }
}

/* The state of the project, said once, on every page. */
.band {
  border-bottom: var(--hair) solid var(--g4);
  background: var(--sunk);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--g2);
}

.band-in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 6px var(--gutter);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.band b {
  color: var(--w);
  background: var(--k);
  font-weight: 500;
  padding: 1px 6px;
}

/* ---------------------------------------------------------------- pieces */

.panel {
  background: var(--w);
  border: var(--rule) solid var(--k);
  padding: clamp(16px, 2.4vw, 26px);
}

.grid {
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Four items, so the row is four or two — never three and a stray. */
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A fact: one number, a few words. A rule over it rather than a box around
 * it — four boxes in a row is a lot of ink for four numbers. */
.fact {
  border-top: var(--rule) solid var(--k);
  padding: 16px 0 0;
  display: grid;
  gap: 2px;
  align-content: start;
}

.fact .n {
  font-family: var(--mono);
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.fact .n small {
  font-size: 0.46em;
  letter-spacing: 0;
  margin-left: 2px;
}

.fact .t {
  font-size: 14px;
  margin-top: 8px;
}

.fact .s {
  font-size: 12.5px;
  color: var(--g2);
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--g2);
  border: var(--hair) solid var(--g4);
  padding: 2px 7px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  padding: 10px 18px;
  border: var(--rule) solid var(--k);
  background: var(--w);
  color: var(--k);
  cursor: pointer;
  transition: background 0.1s steps(1, end), color 0.1s steps(1, end);
}

.btn:hover {
  background: var(--k);
  color: var(--w);
}

.btn-fill {
  background: var(--k);
  color: var(--w);
}

.btn-fill:hover {
  background: var(--w);
  color: var(--k);
}

.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  border-style: dashed;
  background: transparent;
  color: var(--g3);
  cursor: not-allowed;
}

/* Beside a filled button, a second outlined one is two buttons shouting.
 * This one is a link that happens to sit in the row. */
.btn-text,
.btn-text:hover {
  border-color: transparent;
  background: none;
  color: var(--k);
  padding-inline: 4px;
}

.btn-text:hover {
  box-shadow: inset 0 -2px 0 0 var(--k);
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tables: ruled, never shaded. */
.tablewrap {
  overflow-x: auto;
  border: var(--rule) solid var(--k);
  background: var(--w);
}

table.ink {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 380px;
}

table.ink th,
table.ink td {
  text-align: left;
  padding: 13px 17px;
  border-bottom: var(--hair) solid var(--g4);
  vertical-align: top;
}

/* The name of the row carries the weight. In English the first cell is the
 * Chinese one, which is not in the page, so the one after it is the name. */
table.ink tbody td:first-child,
html[data-lang="en"] table.ink tbody td[data-l="zh"]:first-child + td[data-l="en"] {
  font-weight: 600;
}

table.ink thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g2);
  border-bottom: var(--rule) solid var(--k);
  white-space: nowrap;
  font-weight: 500;
}

table.ink tbody tr:last-child td {
  border-bottom: 0;
}

table.ink td.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
}

/* State, by shape rather than colour. */
.st {
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}

.st::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border: 2px solid currentColor;
  vertical-align: 0;
}

.st-yes::before {
  background: currentColor;
}

.st-half {
  color: var(--g2);
}

.st-half::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.st-no {
  color: var(--g3);
}

ol.steps {
  list-style: none;
  counter-reset: s;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 48px;
  min-height: 32px;
}

ol.steps > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  border: var(--rule) solid var(--k);
  background: var(--w);
}

/* The five steps live under "方式二", so they are h4, not h3. */
ol.steps h4 {
  font-size: 16px;
  margin-bottom: 3px;
}

ol.steps p {
  font-size: 14px;
  color: var(--g2);
  margin-bottom: 0;
}

.note {
  border-left: var(--rule) solid var(--k);
  padding-left: 14px;
  color: var(--g2);
  font-size: 13.5px;
  margin: 10px 0 0;
}

/* --------------------------------------------------------- device mockup */

/* The device, rendered rather than drawn: one sheet of glass over a black
 * shell, lit from the upper left. Geometry is the real thing — 117 × 169 mm,
 * a 4.5 mm corner, and a bezel of 13.1 mm at the sides and 23.2 mm top and
 * bottom, which leaves exactly 1072 × 1448.
 *
 * Both padding percentages resolve against the width, so the vertical one is
 * the bezel measured that way too: 23.2 / 117. */
.pw3 {
  position: relative;
  aspect-ratio: 117 / 169;
  flex: none;
  /* The texture and the sheen blend with the device, never with the page. */
  isolation: isolate;
  border-radius: 3.9% / 2.7%;
  background-image: radial-gradient(
      120% 70% at 16% -6%,
      rgba(255, 255, 255, 0.17),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      159deg,
      #3c3c3e 0%,
      #242426 14%,
      #131315 46%,
      #0d0d0e 72%,
      #1b1b1d 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.14),
    0 22px 40px -22px rgba(0, 0, 0, 0.42),
    0 56px 86px -44px rgba(0, 0, 0, 0.38);
}

/* The moulded texture of the shell, and the sheen of the glass over it. */
.pw3::before,
.pw3::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.pw3::before {
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.pw3::after {
  background-image: linear-gradient(
    116deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.05) 22%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 88%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

@media (prefers-color-scheme: dark) {
  /* On a black page the shell needs an edge of its own instead of a shadow. */
  .pw3 {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 40px 70px -40px rgba(0, 0, 0, 0.9);
  }
}

/* The panel sits in the shell where the real one does. The body is
 * 117 × 169 mm and the panel 90.8 × 122.6 mm (1072 × 1448 at 300 ppi), and
 * the 46.6 mm left over vertically is not split evenly: the PW3 has a thin
 * brow and a chin with the name on it. Getting that wrong is what makes a
 * drawn Kindle look like it has a thick frame.
 *
 * The split is 13 / 19 / 26 mm (sides / brow / chin) — the-ebook-reader's
 * measurement of the Paperwhite 1-3 body, which checks out against the
 * width: 117 - 13 x 2 = 91, and the panel is 90.8. Measured off a photo of
 * a device held in the hand it looks more like 17 / 30, but a hand-held
 * photo is shot at an angle and the near end comes out long.
 *
 * Insets rather than padding on the shell, because a percentage padding is
 * measured against whatever contains the device, not against the device. */
.screen {
  container-type: size;
  position: absolute;
  inset: 11.6% 11.2% 15.9%;
  overflow: hidden;
  isolation: isolate;
  background: var(--screen-bg);
  color: var(--screen-ink);
  font-family: var(--sans);
  /* The panel is flush with the bezel on this device, so it gets an edge
   * rather than a well: a deep inner shadow reads as extra frame. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px -1px rgba(0, 0, 0, 0.16);
}

/* The grain of the panel itself, over whatever it is showing. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.22'/%3E%3C/svg%3E");
}

/* One device pixel. Everything below is written in them. */
.screen > * {
  --u: calc(100cqw / 1072);
}

.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--screen-bg);
}

.sbar {
  flex: none;
  height: calc(48 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding-inline: calc(20 * var(--u));
  font-size: calc(24 * var(--u));
  font-variant-numeric: tabular-nums;
}

.sbar .sp {
  margin-left: auto;
}

.sbar svg,
.lib-top svg {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.navbar {
  flex: none;
  height: calc(90 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline: calc(120 * var(--u));
}

.navbar svg {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navbar .nb-home {
  fill: currentColor;
  stroke: none;
}

/* Outlined box: the port's substitute for elevation (eink-ui.md rule 3),
 * and the one place a corner is rounded — 4 dp, as on the device. */
.boxed {
  border: calc(2 * var(--u)) solid currentColor;
  border-radius: calc(7.5 * var(--u));
  background: var(--screen-bg);
}

/* An installer screen in its real geometry: 944 px wide from (64, 176),
 * Chinese and English together — that is what the device shows
 * (installer/screens/render_screens.py). */
.iscr {
  position: absolute;
  inset: 0;
  padding: calc(176 * var(--u)) calc(64 * var(--u));
}

/* The installer's own title line. Not a heading: this is a picture of a
 * screen, and an <h4> here put a level-4 heading above the page's <h1>. */
.iscr .ih {
  margin: 0;
  font-weight: 600;
  font-size: calc(52 * var(--u));
  line-height: 1.25;
}

.iscr .en {
  font-size: calc(40 * var(--u));
  line-height: 1.25;
  margin: calc(6 * var(--u)) 0 0;
  font-weight: 400;
}

.iscr p {
  font-size: calc(38 * var(--u));
  line-height: 1.45;
  margin: calc(32 * var(--u)) 0 0;
}

.iscr p.en {
  font-size: calc(32 * var(--u));
  margin-top: calc(10 * var(--u));
}

.bar {
  margin-top: calc(44 * var(--u));
  height: calc(34 * var(--u));
  border: calc(2 * var(--u)) solid currentColor;
  padding: calc(5 * var(--u));
}

.bar i {
  display: block;
  height: 100%;
  background: currentColor;
  width: 0;
}

.pct {
  margin-top: calc(14 * var(--u));
  font-family: var(--mono);
  font-size: calc(32 * var(--u));
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: var(--rule) solid var(--k);
  background: var(--sunk);
  padding-block: clamp(32px, 4.5vw, 52px);
  font-size: 13.5px;
  color: var(--g2);
}

.foot h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: 9px;
  font-weight: 500;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.foot a {
  color: var(--g2);
}

.foot a:hover {
  color: var(--k);
}

.disclaim {
  margin-top: clamp(24px, 3.5vw, 40px);
  padding-top: 16px;
  border-top: var(--hair) solid var(--g4);
  font-size: 12px;
  line-height: 1.7;
  color: var(--g3);
  max-width: 70em;
}

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

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--w);
  border: var(--rule) solid var(--k);
  padding: 8px 14px;
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}