/* TONO website — the shared design system ("Hardware Object", Docs/DESIGN-2.md), used by every page.
   Alu (light) and Graphit (dark) finishes, black-glass displays, graphite controls and ONE signal
   orange (#FF4F00) that only ever means "on" or "moving". Archivo + Martian Mono, nothing else.
   The landing page adds home.css on top of this file. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
/* Metric-matched stand-ins while Archivo loads: Arial scaled per width band (62 % condensed, 100 %, 108–112 %,
   125 % expanded) from the two fonts' advance widths, so the swap barely moves anything (build notes: README). */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); font-stretch: 50% 80%; font-weight: 100 900; size-adjust: 68.4%; ascent-override: 128.4%; descent-override: 30.7%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); font-stretch: 81% 104%; font-weight: 100 549; size-adjust: 98.6%; ascent-override: 89.0%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); font-stretch: 81% 104%; font-weight: 550 900; size-adjust: 97.3%; ascent-override: 90.2%; descent-override: 21.6%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); font-stretch: 105% 115%; font-weight: 100 549; size-adjust: 108.0%; ascent-override: 81.3%; descent-override: 19.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); font-stretch: 105% 115%; font-weight: 550 900; size-adjust: 112.0%; ascent-override: 78.4%; descent-override: 18.7%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); font-stretch: 116% 125%; font-weight: 100 549; size-adjust: 128.4%; ascent-override: 68.4%; descent-override: 16.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); font-stretch: 116% 125%; font-weight: 550 900; size-adjust: 128.5%; ascent-override: 68.3%; descent-override: 16.3%; line-gap-override: 0%; }
@font-face { font-family: "Martian Fallback"; src: local("Menlo-Regular"), local("Menlo"), local("SF Mono"); size-adjust: 108.0%; ascent-override: 92.6%; descent-override: 18.5%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-var.woff2") format("woff2"); font-weight: 400 700; font-stretch: 87.5%; font-display: swap; }

/* ── Tokens · Alu ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #e3e0d9; --bg-hi: #ebe8e2; --bg-lo: #dad6ce;
  --plate-a: #eeebe5; --plate-b: #e3e0d9; --plate-c: #d9d5cd;
  --key-a: #f4f2ee; --key-b: #e6e3dd;
  --well: #d5d1c8; --deep: #c6c1b6;
  --ink: #1a1a18; --ink2: #57534b; --ink3: #645f57;
  --rule: rgb(26 26 24 / .14);
  --control: #252523; --control-hi: #45443f; --control-lo: #121211; --on-control: #f1eee7;
  --led-off: #b3ada2;
  --edge-light: rgb(255 255 255 / .75); --edge-dark: rgb(110 104 92 / .35);
  --rim-hi: rgb(255 255 255 / .95); --rim-lo: rgb(183 177 166 / .6);
  --key-base: rgb(138 132 120 / .55); --cast: rgb(74 69 60 / .18);
  --recess-top: rgb(110 104 92 / .55); --recess-bottom: rgb(255 255 255 / .95);
  --slot: #1b1b19;
  --signal-ink: #b33500;
  --plate-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 0 0 1px rgb(120 112 98 / .22) inset, 0 2px 2px rgb(74 69 60 / .12), 0 40px 80px -30px rgb(74 69 60 / .45), 0 12px 24px -12px rgb(74 69 60 / .25);
  --grain: .9;
  --nav-bg: #e3e0d9;

  --bezel: #1c1c1a; --glass: #0b0c0b;
  --lcd: #f2ede2; --lcd-dim: #a3a09a; --lcd-ghost: rgb(242 237 226 / .075);
  --signal: #ff4f00; --signal-glow: #ff7a3a;

  --f-sans: "Archivo", "Archivo Fallback", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", "Martian Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4.2vw, 64px);
  --wrap: min(1240px, 100% - 2 * var(--gutter));
  --ease: cubic-bezier(.3, .1, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 64px;
}
/* Graphit: the Mac is in dark mode (unless Alu was chosen), or Graphit was chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-finish="alu"]) {
    color-scheme: dark;
    --bg: #2a2a27; --bg-hi: #30302d; --bg-lo: #242422;
    --plate-a: #353532; --plate-b: #2d2d2a; --plate-c: #262624;
    --key-a: #3b3b37; --key-b: #30302d; --well: #1f1f1d; --deep: #181816;
    --ink: #ece9e2; --ink2: #aba79e; --ink3: #9c988f; --rule: rgb(236 233 226 / .12);
    --control: #d6d3cb; --control-hi: #f3f1ec; --control-lo: #a9a59c; --on-control: #1a1a18;
    --led-off: #4a4843;
    --edge-light: rgb(255 255 255 / .09); --edge-dark: rgb(0 0 0 / .55);
    --rim-hi: rgb(255 255 255 / .16); --rim-lo: rgb(0 0 0 / .5);
    --key-base: rgb(0 0 0 / .7); --cast: rgb(0 0 0 / .4);
    --recess-top: rgb(0 0 0 / .75); --recess-bottom: rgb(255 255 255 / .14);
    --slot: #0e0e0d; --signal-ink: #ff7a3d;
    --plate-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 0 0 1px rgb(0 0 0 / .55) inset, 0 2px 2px rgb(0 0 0 / .4), 0 50px 90px -30px rgb(0 0 0 / .8), 0 12px 24px -12px rgb(0 0 0 / .5);
    --grain: .7;
    --nav-bg: #2a2a27;
  }
}
:root[data-finish="graphit"], .t-night, .t-glass {
  color-scheme: dark;
  --bg: #2a2a27; --bg-hi: #30302d; --bg-lo: #242422;
  --plate-a: #353532; --plate-b: #2d2d2a; --plate-c: #262624;
  --key-a: #3b3b37; --key-b: #30302d; --well: #1f1f1d; --deep: #181816;
  --ink: #ece9e2; --ink2: #aba79e; --ink3: #9c988f; --rule: rgb(236 233 226 / .12);
  --control: #d6d3cb; --control-hi: #f3f1ec; --control-lo: #a9a59c; --on-control: #1a1a18;
  --led-off: #4a4843;
  --edge-light: rgb(255 255 255 / .09); --edge-dark: rgb(0 0 0 / .55);
  --rim-hi: rgb(255 255 255 / .16); --rim-lo: rgb(0 0 0 / .5);
  --key-base: rgb(0 0 0 / .7); --cast: rgb(0 0 0 / .4);
  --recess-top: rgb(0 0 0 / .75); --recess-bottom: rgb(255 255 255 / .14);
  --slot: #0e0e0d; --signal-ink: #ff7a3d;
  --plate-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 0 0 1px rgb(0 0 0 / .55) inset, 0 2px 2px rgb(0 0 0 / .4), 0 50px 90px -30px rgb(0 0 0 / .8), 0 12px 24px -12px rgb(0 0 0 / .5);
  --grain: .7;
}
:root[data-finish="graphit"] { --nav-bg: #2a2a27; }
/* night = the studio the Graphit objects stand in: one step darker than the chassis */
.t-night { --bg: #1d1d1b; --bg-hi: #242422; --bg-lo: #171716; }
.t-glass { --bg: #0b0c0b; --bg-hi: #0b0c0b; --bg-lo: #0b0c0b; }

/* ── Base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 440 17px/1.5 var(--f-sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-optical-sizing: auto;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--signal); color: #fff; }
/* the focus ring is ink, not orange: orange means "on" (and fails 3:1 on Alu) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--control); color: var(--on-control); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.mono { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 500; letter-spacing: .04em; }
html:not(.js) .js-only { display: none !important; }
.grain { background-image: url("../img/grain.png"); background-size: 128px; }
section[class*="t-"], footer[class*="t-"] { background-color: var(--bg); color: var(--ink); position: relative; }

.kicker { font: 650 11.5px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.kicker::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--rule); }
.kicker.mono { font: 500 11px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; }
.h2 { font-size: clamp(40px, 5.3vw, 88px); font-weight: 780; font-stretch: 108%; line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.h2 .soft, .soft { color: var(--ink3); }
.lede { font-size: clamp(17px, 1.32vw, 20.5px); line-height: 1.5; color: var(--ink2); max-width: 33em; margin-top: 26px; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 620; }
.fine { font-size: 13.5px; line-height: 1.55; color: var(--ink2); max-width: 60em; }
.hero-type { font-family: var(--f-sans); font-stretch: 62%; font-weight: 780; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .005em; line-height: .88; }
.spec { margin-top: 28px; font: 500 10.5px/1.7 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
/* A printed spec line is a row of items that never break inside. The dot between two items sits in the gap,
   so a line can only break between items: a dot that would start a line is clipped (left-aligned lines) or
   hidden by site.js (.is-ls, centered lines). The negative margin takes back each item's trailing letter-spacing. */
.spec, .hero__meta { --sep: 2.1em; display: flex; flex-wrap: wrap; column-gap: var(--sep); }
.spec > span, .hero__meta > span { position: relative; white-space: nowrap; margin-right: -.12em; }
.spec > span + span::before, .hero__meta > span + span::before { content: "·"; content: "·" / ""; position: absolute; left: calc(-1 * var(--sep)); width: var(--sep); text-align: center; opacity: .7; }
.spec > span.is-ls::before, .hero__meta > span.is-ls::before { visibility: hidden; }
.spec { clip-path: inset(-.5em -3em -.5em 0); }
/* The Mac's modifier keys (⌃ ⌥ ⌘ ⇧): neither typeface has them, so they are drawn (the #k-* symbols) on
   Martian Mono's grid: a 650-unit advance, the 800-unit cap height, its 500-weight stroke. --kw sets the stroke. */
.kg { display: inline-block; width: .65em; height: 1em; vertical-align: -.2em; margin-right: .1em; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--kw, 110); stroke-linejoin: miter; stroke-miterlimit: 8; }
.kg--sans { width: .557em; height: .8575em; vertical-align: -.1715em; margin: 0 .04em; --kw: 104; }   /* Archivo's cap height (.686 em) */
.kg--disp { width: .557em; height: .8575em; vertical-align: -.1715em; margin-right: .1em; --kw: 150; }       /* the display type, 780 weight */
.tag { display: inline-block; font: 560 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; padding: 4px 6px 3px; border-radius: 3px; box-shadow: inset 0 0 0 .75px currentColor; vertical-align: middle; text-transform: uppercase; }
.fig { font: 500 10px/1.6 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; color: var(--ink3); }
.fig b { color: var(--ink); font-weight: 600; margin-right: .8em; }
.dotled { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: radial-gradient(circle at 40% 35%, #ffd2b0, var(--signal) 45%, #d63f00); box-shadow: 0 0 6px rgb(255 79 0 / .7); }

/* ── Keys (raised / latched) and LEDs ─────────────────────────────────────── */
.key {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 18px;
  border: 0; border-radius: 9px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 680 11px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, var(--key-a), var(--key-b));
  box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1.2px .6px var(--key-base), 0 3px 8px var(--cast);
  transition: transform 60ms linear, box-shadow 90ms linear, background 90ms linear, color 90ms linear;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.key:active, .key.is-pressed { transform: translateY(.5px); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 2px var(--cast), 0 .5px .5px var(--key-base); }
.key--latched, .key[aria-pressed="true"], .key[aria-checked="true"] {
  color: var(--on-control);
  background: linear-gradient(180deg, var(--control-hi), var(--control) 30%, var(--control) 70%, var(--control-lo));
  box-shadow: inset 0 0 0 .75px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .16), inset 0 1px 1.6px rgb(0 0 0 / .4), 0 1px .6px var(--key-base), 0 3px 8px var(--cast);
}
.key--sm { --h: 34px; padding: 0 14px; font-size: 10px; gap: 8px; }
.key--lg { --h: 50px; padding: 0 24px; font-size: 11.5px; border-radius: 11px; }
.key .glyph { width: 12px; height: 12px; fill: currentColor; flex: none; }
.key[disabled], .key[aria-disabled="true"] { opacity: .55; cursor: default; }
.led { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--led-off); box-shadow: inset 0 1px 1px rgb(0 0 0 / .35), 0 .5px 0 var(--edge-light); transition: background 80ms linear, box-shadow 80ms linear; }
.key--latched .led, [aria-pressed="true"] > .led, [aria-checked="true"] > .led, .led.is-on, .led--on {
  background: radial-gradient(circle at 40% 35%, #ffd2b0, var(--signal) 45%, #d63f00);
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .3), 0 0 7px 1px rgb(255 79 0 / .55);
}
.key .arrow { width: 14px; height: 10px; flex: none; }
/* a printed key: silkscreen caps + a drawn mark, a rim on hover (DESIGN-2 §5.1) */
.printed { display: inline-flex; align-items: center; gap: 8px; font: 680 10px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 9px 10px; margin: -9px -10px; border-radius: 7px; transition: box-shadow .12s; color: var(--ink); }
.printed:hover { box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi); }

/* ── Glass display ─────────────────────────────────────────────────────────── */
.lcd {
  --r: 16px; --pad: 6px;
  position: relative; border-radius: var(--r); padding: var(--pad); background: var(--bezel);
  box-shadow: 0 -1px 0 var(--recess-top), 0 1.5px 0 var(--recess-bottom), inset 0 1px 2px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(0 0 0 / .6);
}
.lcd__glass {
  position: relative; overflow: hidden; height: 100%; border-radius: calc(var(--r) - var(--pad)); color: var(--lcd);
  background: radial-gradient(circle, var(--lcd-ghost) .75px, transparent 1.15px) 0 0 / 5px 5px, var(--glass);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .9);
}
.lcd__glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(168deg, rgb(255 255 255 / .065), rgb(255 255 255 / .015) 35%, transparent 60%); }
.lcd--sm { --r: 11px; --pad: 4px; }
.lcd-dim { color: var(--lcd-dim); }
.wipe { animation: wipe .18s steps(9) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── Plates and printing ───────────────────────────────────────────────────── */
.device {
  position: relative; border-radius: 24px; padding: 22px;
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b) 42%, var(--plate-c));
  box-shadow: var(--plate-shadow);
}
.device::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("../img/grain.png") 0 0 / 128px; opacity: calc(var(--grain) * .9); }
.device > * { position: relative; }
.silk { font: 650 9.5px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.silklabel { display: flex; align-items: center; gap: 10px; }
.silklabel::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.well { border-radius: 12px; background: var(--well); box-shadow: inset 0 1.5px 3px var(--cast), inset 0 -1px 0 var(--edge-light), 0 -1px 0 var(--edge-dark); }
.groove { height: 2px; border-top: 1px solid var(--edge-dark); border-bottom: 1px solid var(--edge-light); }

/* ── Segment switch (the app's EINFACH | PRO): a well with a sliding key-top ─ */
.segment { --n: 2; --i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 10px; background: var(--well); box-shadow: inset 0 1.5px 3px var(--cast), inset 0 -1px 0 var(--edge-light); isolation: isolate; }
.segment::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 7px; background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1px 2px var(--cast); transform: translateX(calc(var(--i) * 100%)); transition: transform .16s var(--ease); }
.segment > * { border: 0; background: none; height: 32px; padding: 0 16px; cursor: pointer; display: grid; place-items: center; text-decoration: none; font: 620 9.5px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); transition: color .16s; white-space: nowrap; }
.segment > [aria-checked="true"], .segment > [aria-current] { color: var(--ink); }
.segment--small > * { height: 26px; padding: 0 10px; font-size: 9px; }

/* ── Nav: an opaque chassis strip (no blur, no glass) ──────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--ink); background: transparent; transition: color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); }
.nav.is-solid, .nav--page { background: var(--nav-bg); box-shadow: 0 1px 0 var(--rule); }
.nav.is-dark { color: #ece9e2; --rule: rgb(236 233 226 / .1); }
.nav.is-dark.is-solid { background: #1d1d1b; }
.nav__in { height: 100%; width: min(1400px, 100% - 2 * var(--gutter)); margin: auto; display: flex; align-items: center; gap: 28px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.lockup__mark { width: 24px; height: 24px; }
.mark-disc { fill: currentColor; }
.lockup__word { font-weight: 820; font-stretch: 125%; letter-spacing: .08em; font-size: 17px; line-height: 1; padding-top: 1px; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { font-size: 13.5px; font-weight: 520; text-decoration: none; opacity: .8; transition: opacity .15s; padding: 6px 0; }
.nav__links a:hover, .nav__links a[aria-current] { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: 16px; }
.nav__lang { display: flex; gap: 2px; font: 560 10.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; }
.nav__lang a { text-decoration: none; padding: 7px 5px; opacity: .72; }
.nav__lang a[aria-current] { opacity: 1; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.nav__progress i { position: absolute; left: 0; top: 0; height: 1px; width: 100%; transform-origin: 0 0; transform: scaleX(var(--progress, 0)); background: var(--signal); opacity: .9; will-change: transform; }   /* its own layer: the nav never repaints while you scroll */
/* Where the browser can, the hairline is a scroll-driven animation: the compositor draws it straight from the
   scroll position, so a scroll frame costs the main thread nothing for it (home.js writes it otherwise). */
@supports (animation-timeline: scroll()) {
  .nav__progress i { transform: scaleX(0); animation: nav-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes nav-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }   /* (an implicit from made WebKit draw progress²) */
.nav .key--latched { white-space: nowrap; }
.nav.is-dark .key--latched { color: #1a1a18; background: linear-gradient(180deg, #f3f1ec, #d6d3cb 30%, #d6d3cb 70%, #a9a59c); box-shadow: inset 0 0 0 .75px rgb(255 255 255 / .6), 0 1px .6px rgb(0 0 0 / .7), 0 3px 8px rgb(0 0 0 / .4); }
.nav.is-dark :focus-visible { outline-color: #ece9e2; }

/* the phone menu: a disclosure with a graphite panel */
.navmenu { display: none; }
.navmenu summary { list-style: none; cursor: pointer; width: 40px; height: 36px; display: grid; place-items: center; border-radius: 8px; }
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary i, .navmenu summary i::before, .navmenu summary i::after { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 1px; position: relative; transition: transform .2s var(--ease); }
.navmenu summary i::before, .navmenu summary i::after { content: ""; position: absolute; left: 0; }
.navmenu summary i::before { top: -5px; } .navmenu summary i::after { top: 5px; }
.navmenu[open] summary i { background: transparent; }
.navmenu[open] summary i::before { transform: translateY(5px) rotate(45deg); } .navmenu[open] summary i::after { transform: translateY(-5px) rotate(-45deg); }
.navmenu__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--nav-h) + 4px); padding: 8px 10px; border-radius: 16px; display: grid; background: #232321; color: #ece9e2; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(0 0 0 / .5); max-height: calc(100svh - var(--nav-h) - 20px); overflow: auto; }
.navmenu__panel a { padding: 14px 12px; text-decoration: none; font-size: 17px; font-weight: 560; border-bottom: 1px solid rgb(236 233 226 / .08); }
.navmenu__panel a:last-child { border: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: #aba79e; }
.navmenu__panel :focus-visible { outline-color: #ece9e2; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.foot { padding: 72px 0 40px; border-top: 1px solid rgb(236 233 226 / .06); }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.foot__brand p { color: var(--ink2); margin-top: 16px; font-size: 14.5px; max-width: 30em; }
.foot__plate { font-size: 9.5px !important; letter-spacing: .12em; color: var(--ink3) !important; }
.foot h2 { font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; color: var(--ink3); margin-bottom: 16px; text-transform: uppercase; }
.foot ul { display: grid; gap: 10px; }
.foot ul a { text-decoration: none; color: var(--ink2); font-size: 14.5px; }
.foot ul a:hover { color: var(--ink); }
.foot__base { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--rule); }
.foot__base p { font-size: 12px; color: var(--ink3); max-width: 64em; line-height: 1.55; }
.switches { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.switches .mono { font-size: 9px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }

/* ── Subpages: changelog, legal texts, forwarding, 404 ─────────────────────── */
.page { padding: calc(var(--nav-h) + 72px) 0 120px; min-height: 70vh; }
.page__head { max-width: 780px; padding-bottom: 40px; margin-bottom: 48px; border-bottom: 2px solid var(--ink); }
.page__head h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 790; font-stretch: 110%; letter-spacing: -.04em; line-height: .95; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.page__head .lead { margin-top: 22px; font-size: 19px; color: var(--ink2); max-width: 36em; }
.hint { font-size: 12.5px; color: var(--ink3); margin-top: 14px; }
.lead { font-size: 19px; color: var(--ink2); }
.prose { max-width: 780px; font-size: 16.5px; line-height: 1.65; color: var(--ink2); }
.prose h2 { font-size: 22px; font-weight: 740; font-stretch: 108%; letter-spacing: -.01em; color: var(--ink); margin: 52px 0 14px; padding-top: 18px; border-top: 1px solid var(--rule); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.prose h3 { font: 700 12px/1.3 var(--f-sans); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 30px 0 10px; }
.prose p, .prose ul, .prose ol, .prose address, .prose table, .prose blockquote { margin: 0 0 16px; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.prose ol { padding-left: 22px; list-style: decimal; }
.prose ol li { margin-bottom: 8px; }
.prose b, .prose strong { color: var(--ink); font-weight: 640; }
.prose address { font-style: normal; }
.prose a { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose code, .changelog code { font: 500 .86em var(--f-mono); color: var(--ink); }
.prose td code { overflow-wrap: anywhere; }
.prose thead th { font: 500 9.5px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.box { padding: 18px 20px; margin: 0 0 24px; }
.box p { margin: 0; }
.template-banner { padding: 18px 20px; margin: 0 0 32px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--signal-ink); color: var(--ink); }
.template-banner strong { display: block; font: 700 11px/1.4 var(--f-sans); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); margin-bottom: 6px; }
.template-banner p { margin: 0; font-size: 14.5px; color: var(--ink2); }
mark.ph { background: rgb(255 79 0 / .16); color: var(--ink); padding: 0 .2em; border-radius: 3px; }
.changelog { display: grid; max-width: 960px; }
.release { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.release:first-child { padding-top: 0; }
.release__meta { display: grid; gap: 10px; align-content: start; }
.release__version { font-family: var(--f-sans); font-stretch: 62%; font-weight: 780; font-size: 54px; line-height: .85; font-variant-numeric: tabular-nums; }
.release h2 { font-size: 24px; font-weight: 740; font-stretch: 108%; letter-spacing: -.01em; margin-bottom: 14px; }
.release ul { display: grid; gap: 9px; }
.release li { position: relative; padding-left: 20px; color: var(--ink2); font-size: 16px; line-height: 1.55; }
.release li::before { content: ""; position: absolute; left: 3px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.release li b { color: var(--ink); font-weight: 640; }
.badge { display: inline-flex; align-items: center; gap: 8px; font: 560 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.center-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px var(--gutter); }
.center-page .lcd { max-width: 520px; margin: 0 auto 34px; }
.center-page .lcd__glass { padding: 34px 24px 30px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* the language hint (site.js): a slim strip, once, never a redirect */
.hintbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 24px)); border-radius: 14px; background: #232321; color: #ece9e2; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .08); font-size: 14px; }
.hintbar .wrap { width: auto; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; }
.hintbar span { flex: 1; color: #aba79e; }
.hintbar a { font-weight: 620; text-decoration: none; }
.hintbar button { border: 0; background: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; color: #aba79e; }
.hintbar :focus-visible { outline-color: #ece9e2; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
/* One nav on every page (build-pages.py): six links fit down to 1040 px; below that "Hear it" steps back (the landing's
   hero has the key, the phone menu the link), so the links never run under the now-playing badge. */
@media (max-width: 1180px) {
  .nav__links { gap: 18px; }
}
@media (max-width: 1040px) {
  .nav__links a:nth-child(2) { display: none; }
}
@media (max-width: 960px) {
  :root { --nav-h: 56px; }
  .nav__links { display: none; }
  .nav__end { margin-left: auto; gap: 10px; }
  .navmenu { display: block; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .release { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .nav__lang { display: none; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .nav .key--latched .full { display: none; }
  .page { padding-top: calc(var(--nav-h) + 40px); }
  /* tables in documents: one row, one block — name first, then the cells under it */
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  .prose tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .prose td { border: 0; padding: 2px 0; }
  .prose td:first-child { color: var(--ink); }
}
@media (min-width: 561px) { .nav .key--latched .short { display: none; } }

/* ── Preferences ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --ink3: #4a463f; --ink2: #3a3731; --rule: rgb(26 26 24 / .32); --lcd-ghost: transparent; --lcd-dim: #d0ccc4; }
  .t-night, .t-glass, :root[data-finish="graphit"] { --ink3: #c4c0b8; --ink2: #d6d2ca; --rule: rgb(236 233 226 / .3); }
  .key { box-shadow: inset 0 0 0 1px var(--ink), 0 1px 0 var(--key-base); }
  .led { box-shadow: inset 0 0 0 1px var(--ink); }
  .grain, .device::before { background-image: none !important; }
}
@media (forced-colors: active) {
  .key, .segment > *, .lcd, .device, .well { border: 1px solid CanvasText; }
  .key--latched, .key[aria-pressed="true"], .key[aria-checked="true"] { outline: 2px solid Highlight; }
  .led.is-on, .key--latched .led, [aria-pressed="true"] > .led, [aria-checked="true"] > .led { background: Highlight; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  .nav, .navmenu, .hintbar, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding-top: 20px; }
}

/* The logo is the machined knob: the rendered cut-out replaces the flat mark wherever the lockup shows
   (the flat mark stays for the favicon). The picture's knob spans 0.82 of its square, so the frame is
   1.22 × the old mark and pulled back by the difference to keep the lockup's spacing. */
.lockup__mark { width: 30px; height: 30px; margin: -3px; background: url(../img/brand/knob-on-64@2x.png) center / contain no-repeat; }
.lockup__mark > use { display: none; }
:root[data-finish="graphit"] .lockup__mark, .t-night .lockup__mark { background-image: url(../img/brand/knob-on-64-graphit@2x.png); }
@media (prefers-color-scheme: dark) { :root:not([data-finish="alu"]) .lockup__mark { background-image: url(../img/brand/knob-on-64-graphit@2x.png); } }