/* The block down to the first @font-face is zell's resources/zanoshky-standard/tokens.css, copied
   verbatim so the page needs one stylesheet. Copy it again when the tokens change. */
/* Zanoshky Standard tokens for the web. Generated by build.py from tokens.json: edit that, then run it.
   Light by default; the phone's dark setting gives Black, as the approved mockup pages do;
   data-look on <html> picks one: light, dark, black, or auto (follow the phone). */
:root {
  color-scheme: light dark;
  --zs-fill: #004cc0;
  --zs-on-fill: #ffffff;
  --zs-glow: #0068ff;
  --zs-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zs-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zs-fs: 1;
  --zs-type-screen-title: calc(27px * var(--zs-fs));
  --zs-type-app-bar-title: calc(22px * var(--zs-fs));
  --zs-type-pro-headline: calc(22px * var(--zs-fs));
  --zs-type-sheet-title: calc(18px * var(--zs-fs));
  --zs-type-sheet-title-big: calc(22px * var(--zs-fs));
  --zs-type-section-label: calc(13px * var(--zs-fs));
  --zs-type-panel-value: calc(19px * var(--zs-fs));
  --zs-type-number: calc(20px * var(--zs-fs));
  --zs-type-version: calc(17px * var(--zs-fs));
  --zs-type-body: calc(15px * var(--zs-fs));
  --zs-type-key: calc(15px * var(--zs-fs));
  --zs-type-key-main: calc(16px * var(--zs-fs));
  --zs-type-header-key: calc(13px * var(--zs-fs));
  --zs-type-item-name: calc(15px * var(--zs-fs));
  --zs-type-feature-name: calc(15px * var(--zs-fs));
  --zs-type-pitch: calc(14.5px * var(--zs-fs));
  --zs-type-hint: calc(14px * var(--zs-fs));
  --zs-type-small: calc(13.5px * var(--zs-fs));
  --zs-type-feature-line: calc(13px * var(--zs-fs));
  --zs-type-nav-label: calc(12.5px * var(--zs-fs));
  --zs-type-chip: calc(12.5px * var(--zs-fs));
  --zs-type-meta: calc(12.5px * var(--zs-fs));
  --zs-type-axis: calc(12px * var(--zs-fs));
  --zs-r-plate: 16px;
  --zs-r-key: 14px;
  --zs-r-key-focus-inner: 10px;
  --zs-r-header-key: 12px;
  --zs-r-icon-button: 12px;
  --zs-r-row: 12px;
  --zs-r-note: 12px;
  --zs-r-theme-tile: 14px;
  --zs-r-tile-preview: 9px;
  --zs-r-feature-tile: 10px;
  --zs-r-list-icon: 10px;
  --zs-r-sheet-top: 24px;
  --zs-r-grab: 4px;
  --zs-r-pill: 999px;
  --zs-r-chip: 999px;
  --zs-r-switch: 999px;
  --zs-key-h: 52px;
  --zs-header-key-h: 48px;
  --zs-touch: 48px;
  --zs-row-h: 52px;
  --zs-item-h: 56px;
  --zs-nav-item-h: 56px;
  --zs-pill-w: 60px;
  --zs-pill-h: 32px;
  --zs-pro-row-h: 60px;
  --zs-content-max: 1100px;
  --zs-press-ms: 70ms;
  --zs-release-ms: 140ms;
  --zs-look-ms: 250ms;
  --zs-pill-ms: 200ms;
  --zs-s0: 2px;
  --zs-s1: 4px;
  --zs-s2: 6px;
  --zs-s3: 8px;
  --zs-s4: 10px;
  --zs-s5: 12px;
  --zs-s6: 14px;
  --zs-s7: 16px;
  --zs-s8: 18px;
  --zs-s9: 22px;
  --zs-s10: 26px;
  --zs-s11: 28px;
  --zs-s12: 32px;
  --zs-s13: 48px;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-look]), :root[data-look="auto"] {
    --zs-ground: #000000;
    --zs-plate: #0d0d10;
    --zs-well: #16171b;
    --zs-line: #24252b;
    --zs-edge: #646771;
    --zs-bevel: #34363e;
    --zs-text: #ffffff;
    --zs-soft: #b6b8c0;
    --zs-blue: #7aaeff;
    --zs-on-blue: #04132e;
    --zs-ok: #6fdc9b;
    --zs-warn: #f2c06b;
    --zs-bad: #ff9d97;
    --zs-scrim: rgba(0,0,0,.6);
    --zs-chosen: #0a2350;
    --zs-on-chosen: #ffffff;
    --zs-risky-fill: #2a0d10;
    --zs-risky-text: #ffb4ae;
    --zs-risky-line: #ff5a4f;
    --zs-live-dot: #3ecf8e;
  }
}
:root[data-look="light"] {
  color-scheme: light;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
:root[data-look="dark"] {
  color-scheme: dark;
  --zs-ground: #111215;
  --zs-plate: #18191d;
  --zs-well: #1f2126;
  --zs-line: #2a2c33;
  --zs-edge: #6c707b;
  --zs-bevel: #3a3d46;
  --zs-text: #eceef2;
  --zs-soft: #b5b8c1;
  --zs-blue: #86b6ff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.55);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
:root[data-look="black"] {
  color-scheme: dark;
  --zs-ground: #000000;
  --zs-plate: #0d0d10;
  --zs-well: #16171b;
  --zs-line: #24252b;
  --zs-edge: #646771;
  --zs-bevel: #34363e;
  --zs-text: #ffffff;
  --zs-soft: #b6b8c0;
  --zs-blue: #7aaeff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.6);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
@media (prefers-reduced-motion: reduce) { :root { --zs-press-ms: 0ms; --zs-release-ms: 0ms; --zs-look-ms: 0ms; --zs-pill-ms: 0ms; } }

/* The Shizuku guide in the Zanoshky Standard. Every colour comes from the tokens above
   (--zs-*), mapped once here. Light by default, Black when the phone is dark, or picked
   in the footer. Built for reading on the same phone you are tapping through Settings on:
   big numbered steps, short lines, a jump menu that stays in reach. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: var(--zs-ground);
  --plate: var(--zs-plate);
  --well: var(--zs-well);
  --line: var(--zs-line);
  --tx: var(--zs-text);
  --soft: var(--zs-soft);
  --blue: var(--zs-blue);
  --fill: var(--zs-fill);
  --glow: var(--zs-glow);
  --mono: var(--zs-mono);
  --sans: var(--zs-sans);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --read: 68ch;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  /* One light from above: a soft glow of the house blue at the top, nothing lit from below. */
  background-image: radial-gradient(ellipse 80% 420px at 50% -120px, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%);
  background-repeat: no-repeat;
  color: var(--tx);
  font: 400 17px/1.6 var(--sans);
  min-height: 100vh;
  overflow-wrap: break-word;
}
b, strong, th { font-weight: 600; }
p { margin: 0 0 14px; }
img, svg { max-width: 100%; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--fill); color: var(--zs-on-fill); padding: 12px 16px; z-index: 100; border-radius: var(--zs-r-key); font-weight: 600; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--zs-content-max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }

/* Header: the ground colour and a line under it. On a phone the nav is one row that scrolls
   sideways, and the whole header scrolls away so the steps get the screen. */
.top { background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--tx); text-decoration: none; font: 700 18px/1 var(--mono); min-height: 48px; margin-right: auto; }
.brand .mark { flex: none; width: 32px; height: 32px; }
.top nav { width: 100%; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 0 var(--gut-r) 6px var(--gut); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.top nav::-webkit-scrollbar { display: none; }
.top nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; width: max-content; }
.top nav a { color: var(--soft); text-decoration: none; padding: 0 14px; font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--zs-r-header-key); white-space: nowrap; }
.top nav a:hover { background: var(--well); color: var(--tx); }
.top nav a[aria-current] { background: var(--well); color: var(--tx); box-shadow: 0 0 0 1px var(--line) inset; font-weight: 600; }
@media (min-width: 760px) {
  .top { position: sticky; top: 0; z-index: 20; }
  .top .wrap { flex-wrap: nowrap; }
  .top nav { width: auto; margin: 0; padding: 0; overflow: visible; }
  html { scroll-padding-top: 88px; }
}

/* Keys: 52 tall, 14 corners, filled for the one main action, tonal for the rest. Lit from the top edge. */
.key { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--zs-key-h); padding: 0 22px; border-radius: var(--zs-r-key); border: 1px solid transparent; font: 600 16px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--zs-release-ms) ease, filter var(--zs-release-ms) ease; }
.key:active { transform: scale(.97); transition-duration: var(--zs-press-ms); }
.key.filled { color: var(--zs-on-fill); background: linear-gradient(var(--fill), var(--fill)) padding-box, linear-gradient(to bottom, rgba(255,255,255,.32), color-mix(in srgb, var(--fill) 65%, #000) 45%) border-box; }
.key.filled:hover { filter: brightness(1.08); }
.key.tonal { color: var(--tx); background: linear-gradient(var(--well), var(--well)) padding-box, linear-gradient(to bottom, var(--zs-bevel), var(--line) 45%) border-box; }
.key.tonal:hover { filter: brightness(.97); }
.key.small { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: var(--zs-r-header-key); }
.keys { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.keys .key { flex: 1 1 auto; }
@media (min-width: 560px) { .keys .key { flex: 0 1 auto; } }

/* Type: JetBrains Mono Bold for titles and labels, sentence case; Inter for the rest. */
h1 { font: 700 clamp(30px, 6vw, 50px)/1.12 var(--mono); margin: 0 0 16px; text-wrap: balance; }
h1 .blue { color: var(--blue); }
h2 { font: 700 clamp(23px, 3.4vw, 30px)/1.22 var(--mono); margin: 0 0 12px; text-wrap: balance; }
h3 { font: 700 18px/1.35 var(--mono); margin: 24px 0 10px; }
.lbl { font: 700 14px/1.3 var(--mono); color: var(--soft); margin: 0 0 10px; }
.lede { font-size: 19px; color: var(--soft); max-width: 36em; margin: 0 0 20px; }
.sub { color: var(--soft); max-width: 40em; margin: 0 0 20px; }
code, pre, kbd { font-family: var(--mono); font-size: .9em; }
code { overflow-wrap: anywhere; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; background: var(--well); }

/* Menu names as they read on the phone, and paths as breadcrumbs. */
.ui { font-weight: 600; color: var(--tx); background: var(--well); border-radius: 6px; padding: 1px 6px; box-shadow: 0 0 0 1px var(--line) inset; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
code.ui { font-family: var(--sans); font-size: 1em; overflow-wrap: normal; }
.path { line-height: 1.9; }
.path .sep { color: var(--soft); padding: 0 3px; font-weight: 600; }

/* Plates: 16 corners, a hairline, a lit top edge. */
.plate { background: var(--plate); border: 1px solid var(--line); border-radius: var(--zs-r-plate); padding: 20px; box-shadow: 0 1px 0 var(--zs-bevel) inset; min-width: 0; }
.plate > :last-child { margin-bottom: 0; }
.plate > h2, .plate > h3 { margin-top: 0; }
.lit { position: relative; overflow: hidden; }
.lit::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); }
.lit::after { content: ""; position: absolute; inset: 0 0 auto; height: 120px; background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--glow) 12%, transparent), transparent); pointer-events: none; }
.lit > * { position: relative; z-index: 1; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Notes: blue for a tip, red for a warning, always with words that say which. */
.note, .warn { border-radius: var(--zs-r-note); padding: 14px 16px; margin: 16px 0; border: 1px solid var(--line); }
.note { background: var(--zs-chosen); border-color: color-mix(in srgb, var(--glow) 40%, var(--line)); }
.warn { background: var(--zs-risky-fill); border-color: var(--zs-risky-line); color: var(--zs-risky-text); }
.warn .ui { color: var(--tx); }
.warn a { color: inherit; }
.note > :last-child, .warn > :last-child { margin-bottom: 0; }
.note b:first-child, .warn b:first-child { font-family: var(--mono); }

/* Sources: small, last, after every fix and brand block. */
.src { font-size: 14px; color: var(--soft); margin: 14px 0 0; line-height: 1.7; }
.src a { color: var(--soft); text-decoration-color: color-mix(in srgb, var(--soft) 55%, transparent); display: inline-block; min-height: 24px; }
.src a:hover { color: var(--tx); }

/* Page head and breadcrumbs. */
.phead { padding-block: clamp(24px, 5vw, 56px) clamp(16px, 3vw, 28px); }
.phead .lbl { font-size: 15px; }
.crumbs { margin: 16px 0 0; font-size: 15px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li + li::before { content: "›"; color: var(--soft); padding: 0 6px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

/* The guide layout: one column on a phone with a sticky jump menu; past 960 the jump
   menu moves to a sticky column on the side. */
.layout { display: block; padding-bottom: 48px; }
.content { min-width: 0; max-width: var(--read); }
.content > section { padding-block: 28px; border-top: 1px solid var(--line); }
.content > section:first-of-type { border-top: 0; padding-top: 8px; }
.content > section > :last-child { margin-bottom: 0; }
.content ul:not([class]), .content ol:not([class]) { padding-left: 1.3em; }
.content li { margin-bottom: 6px; }

.jump-s { position: sticky; top: 0; z-index: 15; margin: 0 calc(-1 * var(--gut-r)) 16px calc(-1 * var(--gut)); background: var(--bg); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.jump-s summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 var(--gut-r) 0 var(--gut); font: 700 15px/1.2 var(--mono); }
.jump-s summary::-webkit-details-marker { display: none; }
.jump-s summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--soft); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.jump-s[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.jump-s .count, .jump-l .count { font: 500 14px/1 var(--sans); color: var(--soft); margin-left: auto; }
.jump-s ol { list-style: none; margin: 0; padding: 0 var(--gut-r) 10px var(--gut); max-height: 60vh; overflow-y: auto; }
.jump-s a, .jump-l a { display: flex; align-items: center; min-height: 44px; color: var(--tx); text-decoration: none; padding: 4px 10px; border-radius: var(--zs-r-row); font-size: 15px; line-height: 1.35; }
.jump-s a:hover, .jump-l a:hover { background: var(--well); }
.jump-l { display: none; }
@media (min-width: 960px) {
  .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
  .jump-s { display: none; }
  .jump-l { display: block; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 8px 0 16px; }
  .jump-l .lbl { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
  .jump-l ol { list-style: none; margin: 0; padding: 0; }
  .jump-l a { color: var(--soft); }
  .jump-l a:hover { color: var(--tx); }
  .content { max-width: 74ch; }
}

/* Steps: one action each, a big number, and a tick box (added by site.js) that remembers. */
.steps { list-style: none; margin: 16px 0 20px; padding: 0; counter-reset: step; display: grid; gap: 10px; }
.steps > li { counter-increment: step; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: var(--plate); border: 1px solid var(--line); border-radius: var(--zs-r-row); padding: 12px 10px 12px 12px; box-shadow: 0 1px 0 var(--zs-bevel) inset; margin: 0; }
.steps > li::before { content: counter(step); grid-column: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--mono); background: var(--zs-chosen); color: var(--zs-on-chosen); box-shadow: 0 0 0 1px color-mix(in srgb, var(--zs-chosen) 60%, var(--glow)) inset; }
.steps > li > .body { grid-column: 2; min-width: 0; padding-top: 7px; }
.steps > li > .body > :last-child { margin-bottom: 0; }
.steps > li > .tick { grid-column: 3; }
.steps > li.done { border-color: color-mix(in srgb, var(--zs-ok) 55%, var(--line)); }
.steps > li.done::before { content: "✓"; background: color-mix(in srgb, var(--zs-ok) 18%, var(--plate)); color: var(--zs-ok); box-shadow: 0 0 0 1px color-mix(in srgb, var(--zs-ok) 50%, transparent) inset; }
.tick { display: grid; place-items: center; width: 44px; height: 44px; margin: -2px 0 0; border-radius: var(--zs-r-row); cursor: pointer; }
.tick:hover { background: var(--well); }
.tick input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 7px; border: 2px solid var(--zs-edge); background: var(--plate); cursor: pointer; display: grid; place-items: center; }
.tick input:checked { background: var(--zs-ok); border-color: var(--zs-ok); }
.tick input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--zs-plate); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.tick input:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.prog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--zs-r-row); background: var(--well); border: 1px solid var(--line); font-size: 15px; color: var(--soft); }
.prog[hidden] { display: none; }
.prog .key { margin-left: auto; }

/* Commands: monospace on a well, with a copy key added by site.js. */
.cmd { position: relative; margin: 12px 0 16px; }
.cmd pre { margin: 0; padding: 14px 16px; background: var(--well); border: 1px solid var(--line); border-radius: var(--zs-r-row); overflow-x: auto; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd.has-copy pre { padding-bottom: 60px; }
.cmd .copy { position: absolute; right: 8px; bottom: 8px; }
@media (min-width: 560px) { .cmd.has-copy pre { padding-bottom: 14px; padding-right: 104px; } .cmd .copy { top: 6px; bottom: auto; } }

/* Tables: label style head, hairlines; stacked when narrow. */
.tbl { overflow-x: auto; margin: 12px 0 16px; }
.wpt { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.wpt th, .wpt td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.wpt th:last-child, .wpt td:last-child { padding-right: 0; }
.wpt tbody tr:last-child > * { border-bottom: 0; }
.wpt thead th { font: 700 14px/1.3 var(--mono); color: var(--soft); }
.wpt tbody th { font-weight: 600; }
@media (max-width: 40em) {
  .wpt, .wpt tbody, .wpt tr, .wpt th, .wpt td { display: block; width: auto !important; }
  .wpt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wpt tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .wpt tbody tr:last-child { border-bottom: 0; }
  .wpt th, .wpt td { padding: 0; border-bottom: 0; }
  .wpt td { margin-top: 4px; }
  .wpt td[data-h]::before { content: attr(data-h) ": "; font-weight: 600; color: var(--soft); }
}

/* Collapsibles: fixes, problems, questions. */
.fold { display: grid; gap: 10px; margin: 12px 0 20px; }
.fold details { border: 1px solid var(--line); border-radius: var(--zs-r-plate); background: var(--plate); box-shadow: 0 1px 0 var(--zs-bevel) inset; scroll-margin-top: 64px; }
.fold summary { cursor: pointer; padding: 12px 16px; min-height: var(--zs-row-h); font-weight: 600; list-style: none; display: flex; align-items: center; gap: 12px; border-radius: var(--zs-r-plate); line-height: 1.4; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .no { flex: none; font: 700 13px/1 var(--mono); color: var(--soft); min-width: 2.2em; }
.fold summary::after { content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border: solid var(--soft); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--zs-pill-ms) ease; }
.fold details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold details[open] summary { border-bottom: 1px solid var(--line); border-radius: var(--zs-r-plate) var(--zs-r-plate) 0 0; }
.fold .in { padding: 14px 16px 16px; }
.fold .in > :last-child { margin-bottom: 0; }
.fold .in h3 { font-size: 15px; margin: 14px 0 6px; color: var(--soft); }
.fold .in h3:first-child { margin-top: 0; }
@media (min-width: 760px) { .fold details { scroll-margin-top: 96px; } }

.filter { margin: 0 0 20px; }
.filter[hidden] { display: none; }
.filter label { display: block; font: 700 14px/1.3 var(--mono); color: var(--soft); margin-bottom: 8px; }
.filter input { width: 100%; min-height: 52px; padding: 0 16px; font: 400 17px var(--sans); color: var(--tx); background: var(--plate); border: 1px solid var(--zs-edge); border-radius: var(--zs-r-key); }
.filter input:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.filter .res { font-size: 15px; color: var(--soft); margin: 8px 0 0; }
.f-hide { display: none !important; }

/* Home */
.hero { padding-block: clamp(28px, 6vw, 72px) 24px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; } }
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.facts li { font: 500 14px/1.25 var(--sans); color: var(--tx); border: 1px solid var(--line); background: var(--well); padding: 8px 14px; border-radius: var(--zs-r-chip); }
.home section { padding-block: clamp(28px, 5vw, 56px); border-top: 1px solid var(--line); }
.choose .plate h3 { margin-top: 0; }
.choose .plate p { color: var(--soft); }
.choose .plate .key { width: 100%; }
.big-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: big; }
@media (min-width: 760px) { .big-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .big-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.big-list li { counter-increment: big; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; background: var(--plate); border: 1px solid var(--line); border-radius: var(--zs-r-plate); padding: 16px; box-shadow: 0 1px 0 var(--zs-bevel) inset; }
.big-list li::before { content: counter(big); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--mono); background: var(--fill); color: var(--zs-on-fill); }
.big-list b { display: block; font: 700 16px/1.35 var(--mono); margin: 8px 0 4px; }
.big-list span { color: var(--soft); font-size: 16px; }
.terminal { font: 500 15px/1.7 var(--mono); background: var(--zs-plate); border: 1px solid var(--line); border-radius: var(--zs-r-plate); padding: 18px 20px; box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--glow) 60%, transparent), 0 1px 0 var(--zs-bevel) inset; }
.terminal p { margin: 0; color: var(--soft); }
.terminal .ok { color: var(--zs-ok); }
.terminal .pr { color: var(--blue); }

/* Brand picker: tiles 56 tall, two across on a phone. */
.brands { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brands a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 14px; border-radius: var(--zs-r-row); background: var(--plate); border: 1px solid var(--line); color: var(--tx); text-decoration: none; box-shadow: 0 1px 0 var(--zs-bevel) inset; }
.brands a:hover { border-color: var(--glow); }
.brands b { font: 700 15px/1.3 var(--mono); }
.brands span { font-size: 14px; color: var(--soft); line-height: 1.35; }

.next { margin: 32px 0 0; padding: 20px; border-radius: var(--zs-r-plate); background: var(--plate); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--zs-bevel) inset; }
.next .lbl { margin-bottom: 12px; }
.next .keys { margin: 0; }

.card h3 { margin-top: 0; }
.card dl { margin: 0; }
.card dt { font: 700 14px/1.3 var(--mono); color: var(--soft); margin: 14px 0 4px; }
.card dd { margin: 0; }

.gloss dt { font: 700 17px/1.35 var(--mono); margin: 22px 0 6px; scroll-margin-top: 64px; }
.gloss dd { margin: 0; }
.gloss dt:first-child { margin-top: 0; }

.disclaim { font-size: 15px; color: var(--soft); }
.mail { color: var(--tx); font-family: var(--mono); overflow-wrap: anywhere; }

/* Footer: name, contact, disclaimer, every page, the look switch. Links 44 tall. */
footer { border-top: 1px solid var(--line); padding-block: 24px calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--soft); font-size: 15px; }
footer .wrap { display: grid; gap: 16px; }
footer .who { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
footer .who a { display: inline-flex; align-items: center; min-height: 44px; }
footer .fnav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { footer .fnav { grid-template-columns: 1fr 1fr 2fr; } }
footer .fnav p { margin: 0 0 4px; font: 700 13px/1.3 var(--mono); color: var(--soft); }
footer .fnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
footer .fnav a { padding: 0 8px; margin-left: -8px; margin-right: 8px; color: var(--tx); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--zs-r-header-key); }
footer .fnav a:hover { background: var(--well); }
footer .fnav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
footer .disclaim { margin: 0; max-width: 70ch; }
.looks { display: inline-flex; flex-wrap: wrap; background: var(--well); border: 1px solid var(--line); border-radius: var(--zs-r-key); padding: 3px; gap: 2px; justify-self: start; }
.looks button { font: 500 14px/1 var(--sans); color: var(--tx); background: none; border: 0; border-radius: 11px; padding: 0 12px; min-height: 44px; min-width: 48px; cursor: pointer; }
.looks button[aria-pressed="true"] { background: var(--zs-chosen); color: var(--zs-on-chosen); box-shadow: 0 0 0 1px var(--glow) inset; font-weight: 600; }

/* 404 and short pages */
.doc { padding-block: 40px 64px; }
.doc article { max-width: 70ch; }
.doc h2 { font-size: 22px; margin-top: 36px; }

/* Narrow (a phone at 200% zoom): tighter plates, smaller titles, no sideways scroll. */
@media (max-width: 380px) {
  .plate { padding: 16px; }
  .steps > li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 6px 10px 10px; }
  .steps > li::before { width: 34px; height: 34px; font-size: 16px; }
  .steps > li > .body { padding-top: 4px; }
}
@media (max-width: 300px) {
  h1 { font-size: 25px; }
  h2 { font-size: 21px; }
  .lede { font-size: 17px; }
  .brands { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .top nav, .jump-s, .jump-l, .looks, .copy, .tick, .prog, .filter { display: none !important; }
  .top { position: static; }
  .fold details { break-inside: avoid; }
}
.note a { color: var(--tx); }
.wpt tbody th a { display: inline-flex; align-items: center; min-height: 44px; }