/* The board's fonts, the same files as its web pages (web/fonts, F-053):
   Space Grotesk for headings and numbers, IBM Plex Sans for text, IBM Plex
   Mono for labels and code. */
@font-face { font-family: "McpVue Display"; src: url(assets/fonts/display-700.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "McpVue Sans"; src: url(assets/fonts/sans-400.woff2) format("woff2"); font-weight: 300 450; font-display: swap; }
@font-face { font-family: "McpVue Sans"; src: url(assets/fonts/sans-600.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "McpVue Mono"; src: url(assets/fonts/mono-500.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
:root {
  /* Brand colors from the board (face_tokens.h): amber and light blue on
     dark; the deeper blue is the light-theme blue of the board's pages, for
     text and buttons on white (4.9:1). */
  --blue: #1f6fcc;
  --blue-hover: #185aa8;
  --sky: #6cc4ff;
  --amber: #ffb547;
  --green: #7fe0b0;
  --red: #ff6b5e;
  --ink: #101112;
  --paper: #fff;
  --muted: #5d6572;
  --line: #dedfe2;
  --navy: #0e1a2c;
  --sans: "McpVue Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "McpVue Display", var(--sans);
  --mono: "McpVue Mono", ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ink); /* shows around the hero while it shrinks on scroll */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 115px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sky); outline-offset: 5px; }
p, h1, h2, h3, figure { margin: 0; }
img { display: block; max-width: 100%; }
p { line-height: 1.6; }
button { border-radius: 0; }
code { font-family: var(--mono); }
.container { width: min(1180px, calc(100% - 112px)); margin-inline: auto; }
.panel { position: relative; overflow: clip; }
.panel-white { background: var(--paper); }
.panel-black { background: var(--ink); color: #fff; --muted: #a8aeb8; --line: #343537; }
/* The "blue" sections take the navy of the board's screens: a deep blue with
   a soft light-blue glow from the top, as on the device in the photos. */
.panel-blue { background: radial-gradient(120% 70% at 50% -10%, #1e3d66 0%, rgb(30 61 102 / 0%) 60%), var(--navy); color: #eef1f5; --muted: #b4c0d0; --line: #ffffff26; }
.skip-link { position: fixed; left: 20px; top: 10px; transform: translateY(-150%); background: white; color: black; padding: 12px 18px; z-index: 20; }
.skip-link:focus { transform: none; }
.site-header { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); width: min(1000px, calc(100% - 48px)); z-index: 10; }
/* A hairline through the navigation at the top of the page: fades toward the
   window edges, a blue ring in each side gap, and now and then a short signal
   running along it into the bar. Hidden once the page scrolls. */
.nav-rail { --gap: calc(50vw - min(500px, 50vw - 24px)); position: absolute; top: 50%; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: linear-gradient(to right, transparent, #cbced5 14%, #cbced5 86%, transparent); transition: opacity .4s ease; }
.is-scrolled .nav-rail { opacity: 0; }
.nav-rail i { position: absolute; top: -4px; width: 9px; height: 9px; border: 1.5px solid var(--blue); border-radius: 50%; background: #fff; }
.nav-rail i:first-child { left: calc(var(--gap) / 2 - 4.5px); }
.nav-rail i:last-child { right: calc(var(--gap) / 2 - 4.5px); }
.nav-rail::before, .nav-rail::after { content: ""; position: absolute; top: -.5px; width: 56px; height: 2px; opacity: 0; }
.nav-rail::before { left: 0; background: linear-gradient(to right, transparent, var(--blue)); }
.nav-rail::after { right: 0; background: linear-gradient(to left, transparent, var(--blue)); }
@media (prefers-reduced-motion: no-preference) {
  .nav-rail::before { animation: rail-in-left 5s cubic-bezier(.5, 0, .7, 1) 1s infinite; }
  .nav-rail::after { animation: rail-in-right 5s cubic-bezier(.5, 0, .7, 1) 3.5s infinite; }
}
@keyframes rail-in-left {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: translateX(calc(var(--gap) - 56px)); opacity: 1; }
  44%, 100% { transform: translateX(calc(var(--gap) - 56px)); opacity: 0; }
}
@keyframes rail-in-right {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: translateX(calc(56px - var(--gap))); opacity: 1; }
  44%, 100% { transform: translateX(calc(56px - var(--gap))); opacity: 0; }
}
/* The bar of the board's own web pages (web/style.css .bar): near-black with
   a fine border, the amber TV, and the wordmark in white, amber, and blue. */
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 12px; min-height: 58px; background: #12161e; color: #eef1f5; border: 1px solid #262a31; border-radius: 5px; box-shadow: 0 3px 10px #00000012; }
.nav .brand img { width: 32px; height: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.wordmark { font: 700 22px/32px var(--display); letter-spacing: -.02em; color: #eef1f5; }
.wordmark b { font-weight: inherit; }
.wordmark .v { color: var(--amber); }
.wordmark .ue { color: var(--sky); }
.nav-links { display: flex; align-items: center; gap: 25px; font-size: 13px; font-weight: 500; }
.nav-links > a:not(.nav-cta) { padding-block: 14px; color: #c9d0d9; transition: color .2s; }
.nav-links > a:hover, .nav-links > a[aria-current="page"] { color: var(--sky); }
/* Buy stands out from the text links: an outlined square button with a cart. */
.nav-links > .nav-buy { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border: 1px solid #3a3f48; border-radius: 2px; color: #eef1f5; transition: border-color .2s, color .2s; }
.nav-links > .nav-buy:hover, .nav-links > .nav-buy[aria-current="page"] { border-color: var(--sky); color: var(--sky); }
.nav-buy .cart { flex: none; }
.nav-links:has(.nav-buy) { gap: 20px; }
.nav-cta { display: flex; align-items: center; gap: 16px; padding: 15px 20px; background: var(--sky); color: #0b0e13; font-weight: 600; border-radius: 2px; transition: background .2s; }
.nav-links > .nav-cta:hover { background: #93d4ff; }
.hero { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: 150px 150px; --horizon: 60%; transform: scale(calc(1 - .2 * var(--hero-progress, 0))); transform-origin: 50% 100%; border-radius: calc(32px * var(--hero-progress, 0)); }
/* The scene behind the layout: a desk seen from a little above. The wall is
   a warm off-white lit from the top right. The desk is a pale oak top from
   the horizon down (script.js sets --horizon so that the devices stand on the
   desk, about a third of their height in front of its back edge, and the
   copy stays on the wall): a gradient, a shade where it meets the wall, its
   front edge along the bottom (a light line where the top rounds over, then
   the edge's face), and the grain, an SVG turbulence stretched left to
   right, finer toward the wall. The foliage shadow is drawn on the canvases
   (the far layer blurrier), lighter where the copy sits; film grain over all
   of it keeps the gradients from banding. */
/* The hero's own background, under the scene: the desk edge's colour, which
   shows when --art-shift lifts the scene a few pixels off the card's bottom. */
.hero.panel-white { background: #b28d5b; }
.hero-scene { position: absolute; inset: 0; pointer-events: none; transform: translateY(var(--art-shift, 0px)); background: radial-gradient(70% 60% at 82% 0%, #fffdf8 0%, rgb(255 253 248 / 0%) 70%), linear-gradient(180deg, #f7f4ee 0%, #ece6dc 100%); }
.hero-desk { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; --edge: 14px;
  background:
    linear-gradient(180deg, rgb(255 248 232 / 90%), rgb(255 248 232 / 0%)) left 0 bottom var(--edge) / 100% 3px no-repeat,
    linear-gradient(180deg, #c7a777 0%, #b28d5b 100%) left bottom / 100% var(--edge) no-repeat,
    linear-gradient(180deg, rgb(92 66 30 / 26%) 0%, rgb(92 66 30 / 0%) 30%),
    radial-gradient(80% 130% at 80% 0%, rgb(255 247 228 / 60%) 0%, rgb(255 247 228 / 0%) 70%),
    linear-gradient(180deg, #d8bd93 0%, #e4cca4 50%, #ead4ae 100%);
  box-shadow: 0 -1px 0 rgb(122 98 64 / 30%), 0 -20px 30px -16px rgb(60 44 20 / 18%); }
.hero-desk::before, .hero-desk::after { content: ''; position: absolute; left: 0; right: 0; mix-blend-mode: multiply; }
.hero-desk::before { top: 0; height: 46%; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='150'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .26' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .13 2.4 0 0 0 -.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 1100px 150px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hero-desk::after { top: 26%; bottom: var(--edge); opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .11' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .13 2.4 0 0 0 -.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 1500px 320px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 30%) 0, rgb(0 0 0 / 30%) 28%, #000 52%); mask-image: linear-gradient(to right, rgb(0 0 0 / 30%) 0, rgb(0 0 0 / 30%) 28%, #000 52%); }
.hero-shade.is-far { opacity: .11; filter: blur(18px); z-index: 1; }
.hero-shade.is-near { opacity: .19; filter: blur(4.5px); z-index: 1; }
.hero-scene::after { content: ''; position: absolute; inset: 0; z-index: 2; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Ruler marks along the top of the wall (the desk's front edge has the bottom). */
.hero-marks { position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 2; background: repeating-linear-gradient(to right, #d3cdc2 0 1px, transparent 1px 11px); }
/* Things on the desk besides the devices, out of focus so they frame the
   device without competing with it: a plant in a pale pot at the far right,
   standing just in front of the desk's back edge (in the scene, behind the
   devices), and the corner of a keyboard coming in from the bottom right (in
   .hero-front, over the layout, as a thing nearer than the device's
   reflection). Not shown in the single-column layout. */
.hero-plant { position: absolute; z-index: 1; left: calc(100% - 8.2vw); top: calc(var(--horizon) + 4.2vw); width: 15vw; height: auto; transform: translateY(-100%); filter: blur(.42vw); }
.hero-front { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateY(var(--art-shift, 0px)); }
.hero-keys { position: absolute; right: -5vw; bottom: -4.5vw; width: 37vw; height: auto; overflow: visible; filter: drop-shadow(-1vw .8vw .9vw rgb(40 28 12 / 24%)) blur(.36vw); }
.hero-layout { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.square { width: 6px; height: 6px; display: inline-block; background: currentColor; border-radius: 50%; flex-shrink: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(44px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -.045em; }
h1 span { color: var(--blue); }
.intro { color: var(--muted); font-size: 16px; max-width: 430px; }
/* Level with the device's top, so the copy stays on the wall above the desk. */
.hero-copy { align-self: start; }
.hero-copy .intro { font-size: 17px; max-width: 420px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 15px 21px; border-radius: 2px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: background .2s, transform .2s; }
.button-blue { background: var(--blue); color: #fff; }
.button-blue:hover { background: var(--blue-hover); transform: translateY(-2px); }
.panel-black .button-blue, .panel-blue .button-blue { background: var(--sky); color: #0b0e13; }
.panel-black .button-blue:hover, .panel-blue .button-blue:hover { background: #93d4ff; }
.hero-copy .button { margin-top: 27px; }
.hero { --bleed: calc((100vw - min(1180px, 100vw - 112px)) / 2); }
.hero-photo { display: flex; flex-direction: column; align-items: center; }
.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center; width: 100%; transform: translateY(var(--art-shift, 0px)); will-change: transform; }
/* The D1 (886 x 937, no cable; straightened, see PROJECT.md) and the RLCD
   (999 x 718, no cable), about the same size on screen. */
.hero-photo .hero-art { grid-area: 1 / 1; position: relative; isolation: isolate; width: min(100%, calc((100% + var(--bleed)) * .68)); }
/* Standing on the desk: a contact shadow under the base and the shadow the
   device casts on the desk, toward the lower left (the light comes from the
   top right), both in ::before; and the photo mirrored on the desk, faint
   and soft, since the wood is satin. */
.hero-art::before { content: ''; position: absolute; left: -30%; right: -2%; bottom: -11%; height: 24%; z-index: -1; background: radial-gradient(39% 15% at 60.6% 50%, rgb(40 28 12 / 88%), rgb(40 28 12 / 0%) 100%), radial-gradient(50% 42% at 49% 60%, rgb(40 28 12 / 46%), rgb(40 28 12 / 0%) 100%); filter: blur(6px); }
.hero-art::after { content: ''; position: absolute; left: 0; top: 100%; width: 100%; aspect-ratio: var(--photo-ratio); z-index: -1; background: var(--photo) center / 100% 100% no-repeat; transform: scaleY(-1); opacity: .2; filter: blur(4px); -webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / 85%) 0, rgb(0 0 0 / 0%) 24%); mask-image: linear-gradient(to top, rgb(0 0 0 / 85%) 0, rgb(0 0 0 / 0%) 24%); }
.hero-art-d1 { --photo: url(assets/d1-device.webp); --photo-ratio: 886 / 937; }
.hero-art-rlcd { --photo: url(assets/rlcd-device.webp); --photo-ratio: 999 / 718; }
.hero-photo .hero-art-rlcd { width: min(100%, calc((100% + var(--bleed)) * .82)); }
/* A click on the shown device brings the next one (script.js). A "Click me"
   label over the device says so for a few seconds after each device comes in,
   until the first click: it rises in, the pointer taps twice with a ring, and
   it fades out. */
.hero-stage.is-clickable .hero-art.is-active { cursor: pointer; }
.hero-stage:focus-visible { outline: 3px solid var(--sky); outline-offset: 8px; }
.hero-hint { grid-area: 1 / 1; position: relative; z-index: 2; opacity: 0; pointer-events: none; }
.hint-label { display: block; padding: 10px 14px; border-radius: 2px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px rgb(16 17 18 / 22%); }
.hint-hand { position: absolute; right: -16px; bottom: -20px; transform-origin: 20% 10%; filter: drop-shadow(0 3px 4px rgb(16 17 18 / 25%)); }
.hero-hint::after { content: ''; position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; margin: -13px -13px 0 0; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; transform: translate(50%, 50%) scale(.3); }
.hero-hint.is-shown { animation: hint-show 3.6s ease forwards; }
.hero-hint.is-shown .hint-hand { animation: hint-tap 3.6s ease forwards; }
.hero-hint.is-shown::after { animation: hint-ring 3.6s ease-out forwards; }
@keyframes hint-show {
  0% { opacity: 0; transform: translateY(10px) scale(.92); }
  10%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes hint-tap {
  0%, 26%, 36%, 51%, 61%, 100% { transform: none; }
  30%, 55% { transform: scale(.82); }
}
@keyframes hint-ring {
  0%, 29%, 47%, 54%, 72%, 100% { opacity: 0; transform: translate(50%, 50%) scale(.3); }
  30%, 55% { opacity: .8; transform: translate(50%, 50%) scale(.3); }
  46%, 71% { opacity: 0; transform: translate(50%, 50%) scale(2.4); }
}
/* The devices take turns: the shown one turns away to the left and fades out,
   the next one comes forward from the right. script.js sets the classes. */
.hero-art { transition: transform 1.2s cubic-bezier(.65, 0, .35, 1), opacity .9s ease, filter 1.2s ease; }
.hero-art:not(.is-active) { opacity: 0; transform: perspective(1400px) translateX(24%) rotateY(18deg) scale(.86); filter: blur(6px); pointer-events: none; }
.hero-art.is-leaving { transform: perspective(1400px) translateX(-24%) rotateY(-18deg) scale(.86); }
.hero-art.is-active { transition-delay: .2s; }
.hero-art.is-resetting { transition: none; }
.hero-photo img { width: 100%; height: auto; filter: drop-shadow(-3px 4px 5px rgb(40 28 12 / 20%)); }

/* ── The board's interface drawn over each photo's blank screen ──────────────
   The firmware lays its screens out on a 480 x 480 canvas (lib/design,
   face_tokens.h). --u is one canvas pixel across the screen and --v one
   down, so the same layout fits the D1's square panel and the RLCD's
   400 x 300 one (scaled 0.83 across and 0.63 down, as Painter::scale does). */
.ui-screen { position: absolute; container-type: size; overflow: hidden; }
/* D1 photo: the screen is a square, x 100 to 782 and y 137 to 819 of
   886 x 937 (682 x 682, centred in the 802 x 802 glass), so --u equals --v. */
.hero-art-d1 .ui-screen { left: 11.287%; top: 14.621%; width: 76.975%; height: 72.785%; border-radius: .4%; }
/* RLCD photo: panel from x 29 to 935 and y 32 to 685 of 999 x 718. */
.hero-art-rlcd .ui-screen { left: 2.9%; top: 4.46%; width: 90.7%; height: 90.95%; }
.ui { --u: calc(100cqw / 480); --v: calc(100cqh / 480);
  --bg: #0b0e13; --card: #1c1f25; --card-hi: #272b32; --line: #2c3037; --ink: #eef1f5; --soft: #c9d0d9; --muted: #9aa4b2;
  --amber: #ffb547; --blue: #6cc4ff; --green: #7fe0b0; --red: #ff6b5e; --purple: #b79cff; --orange: #ff9f5a; --sel: #6cc4ff;
  /* D1 type sizes in canvas px (tools/face_fonts.py, sensecap_indicator_d1). */
  --fs-label: 15; --fs-badge: 15; --fs-title: 20; --fs-small: 16; --fs-heading: 34; --fs-subhead: 26; --fs-figure: 21; --fs-text: 19; --fs-lh: 25;
  position: absolute; inset: 0; padding: 0;
  background: radial-gradient(90% 55% at 70% -5%, #1b3150 0%, rgb(27 49 80 / 0%) 70%), linear-gradient(#121620, #0b0e13);
  color: var(--ink); font: 400 calc(var(--fs-text) * var(--u))/1.25 var(--sans); letter-spacing: 0; transition: opacity .35s ease; }
.ui.is-changing { opacity: 0; }
.ui p { margin: 0; line-height: 1.2; }
.ui button { font-family: inherit; color: inherit; text-align: left; border: 0; padding: 0; background: transparent; cursor: pointer; }
.ui a { color: var(--blue); }
/* Positions are the firmware's 480 canvas (UiScreens): header baseline 38,
   lists from y 62, 20 px side margins. */
.ui-head { position: absolute; z-index: 2; left: calc(27 * var(--u)); right: calc(22 * var(--u)); top: calc(16 * var(--v)); height: calc(32 * var(--v)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ui-label { font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(3 * var(--u)); text-transform: uppercase; color: var(--soft); }
.ui-count { min-width: calc(28 * var(--u)); height: calc(27 * var(--v)); padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: #f1f3f6; color: #13151a; font: 700 calc(var(--fs-figure) * var(--u))/calc(27 * var(--v)) var(--display); text-align: center; }
.ui-clock { margin-left: auto; font: 700 calc(var(--fs-subhead) * var(--u))/1 var(--display); letter-spacing: -.02em; }
.ui-title { font: 700 calc(var(--fs-subhead) * var(--u))/1 var(--display); }
.ui-nav { width: calc(44 * var(--u)); height: calc(44 * var(--v)); display: grid; place-items: center; border: calc(1.5 * var(--u)) solid var(--line); border-radius: calc(10 * var(--u)); color: var(--ink); font-size: calc(26 * var(--u)); background: var(--card); }
.ui-body { position: absolute; inset: 0; overflow: hidden; }
/* Four job rows (80 + 8) from y 62 end at 406. The clip stops there so the next row does not show through the "More" strip. */
.clip { position: absolute; left: 0; right: 0; top: calc(62 * var(--v)); bottom: calc(66 * var(--v)); overflow: hidden; }
.ui-foot { position: absolute; z-index: 2; left: calc(27 * var(--u)); right: calc(27 * var(--u)); top: calc(444 * var(--v)); height: calc(28 * var(--v)); display: flex; align-items: center; gap: calc(14 * var(--u)); color: var(--soft); font-size: calc(var(--fs-small) * var(--u)); }
.ui-foot .is-end, .ui-foot .t-amber, .ui-foot .t-red { font-size: calc(var(--fs-title) * var(--u)); }
.ui-foot .is-end { margin-left: auto; }
.ui-foot.is-more { justify-content: center; }
.t-amber { color: var(--amber); } .t-blue { color: var(--blue); } .t-green { color: var(--green); } .t-red { color: var(--red); } .t-muted { color: var(--muted); }
/* Jobs: a card per job with a progress ring, the agent badge, and its state. */
/* Jobs: 80 px rows, 8 px apart, from y 62. Ring at x 58, agent badge beside it, text from x 96. */
.job { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); height: calc(80 * var(--v)); border-radius: calc(14 * var(--u)); background: var(--card); }
.job::before { content: ""; position: absolute; left: 0; top: calc(12 * var(--v)); bottom: calc(12 * var(--v)); width: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--state, var(--amber)); }
.job.is-selected { outline: calc(2 * var(--u)) solid var(--sel); outline-offset: calc(-2 * var(--u)); background: var(--card-hi); }
.job.is-done { --state: var(--green); } .job.is-ask { --state: var(--blue); } .job.is-quiet { --state: #f5c542; } .job.is-failed { --state: var(--red); }
.ring { --p: 0; position: absolute; inset: calc(4 * var(--u)); border-radius: 50%;
  background: conic-gradient(var(--state, var(--amber)) calc(var(--p) * 1%), #343840 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 66%); mask: radial-gradient(circle, transparent 62%, #000 66%); }
.ring-wrap { --state: var(--amber); position: absolute; left: calc(17 * var(--u)); top: calc(15 * var(--v)); width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.ring-wrap.is-ask { --state: var(--blue); } .ring-wrap.is-done { --state: var(--green); } .ring-wrap.is-failed { --state: var(--red); } .ring-wrap.is-quiet { --state: #f5c542; }
.ring-wrap b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--fs-small) * var(--u))/1 var(--sans); }
.ring-wrap.is-done .ring, .ring-wrap.is-ask .ring, .ring-wrap.is-failed .ring { -webkit-mask: none; mask: none; background: var(--state); inset: 0; }
.ring-wrap.is-done b, .ring-wrap.is-ask b, .ring-wrap.is-failed b { color: #13151a; }
.ring-wrap.is-ask b { font-size: calc(var(--fs-subhead) * var(--u)); }
.ring-wrap b.mark { width: 46%; height: 46%; margin: auto; }
.ring-wrap b.mark svg { width: 100%; height: 100%; stroke-width: 3; }
/* The badge sits on the ring's lower right (agentBadge: 16 px right and 17 px down from the ring's center). */
.agent { position: absolute; left: calc(23 * var(--u)); top: calc(24 * var(--v)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #2c3038; border: calc(1.5 * var(--u)) solid var(--agent, var(--blue)); color: var(--agent, var(--blue)); z-index: 1; }
.agent svg { width: 72%; height: 72%; }
.tile-icon svg, .sender-icon svg, .cat-icon svg, .day-icon svg { width: 58%; height: 58%; }
.job-text { position: absolute; left: calc(76 * var(--u)); right: calc(16 * var(--u)); top: calc(8 * var(--v)); bottom: calc(10 * var(--v)); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: calc(12 * var(--u)); row-gap: calc(2 * var(--v)); align-items: center; }
.job-title { grid-column: 1; grid-row: 1; min-width: 0; font: 600 calc(var(--fs-title) * var(--u))/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-state { grid-column: 2; grid-row: 1; justify-self: end; font-size: calc(var(--fs-small) * var(--u)); font-weight: 600; white-space: nowrap; }
.job-sub { grid-column: 1; grid-row: 2; min-width: 0; color: var(--muted); font-size: calc(var(--fs-small) * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-ago { grid-column: 2; grid-row: 2; justify-self: end; color: var(--soft); font-size: calc(var(--fs-small) * var(--u)); white-space: nowrap; }
.job-bar { grid-column: 1 / -1; grid-row: 3; align-self: end; height: calc(5 * var(--v)); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, var(--state, var(--amber)) calc(var(--p) * 1%), #343840 0); }
/* Tasks: the default list. A 34 px group label, then 44 px rows (taskList). */
.group { position: absolute; left: calc(27 * var(--u)); height: calc(34 * var(--v)); display: flex; align-items: flex-end; padding-bottom: calc(8 * var(--v)); font: 600 calc(var(--fs-badge) * var(--u)) var(--mono); letter-spacing: calc(3 * var(--u)); color: var(--muted); }
.group.is-overdue { color: var(--red); } .group.is-today { color: var(--amber); }
.task { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); height: calc(44 * var(--v)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(var(--fs-title) * var(--u)); font-weight: 600; background: transparent; }
.task.is-selected { outline: calc(2 * var(--u)) solid var(--blue); background: var(--card-hi); }
.task.is-overdue.is-selected { outline-color: var(--red); } .task.is-today.is-selected { outline-color: var(--amber); }
.task i { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--muted); }
.task.is-overdue i { background: var(--red); border-color: var(--red); } .task.is-today i { background: var(--amber); border-color: var(--amber); }
.task span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task em { font-style: normal; font-weight: 600; color: var(--soft); font-size: calc(var(--fs-figure) * var(--u)); font-family: var(--display); }
.task.is-overdue em { color: var(--red); } .task.is-today em { color: var(--amber); }
/* Calendar: the month grid with today outlined and the day's list below. */
/* Month: weekday labels at y 78, cells from y 96, the day's panel from y 358 (calendarMonth). */
.cal { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); top: calc(70 * var(--v)); height: calc(280 * var(--v)); display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: calc(18 * var(--v)) repeat(var(--weeks, 5), minmax(0, 1fr)); gap: calc(5 * var(--v)) calc(5 * var(--u)); }
.cal span, .cal button { display: grid; align-items: start; justify-items: start; align-self: stretch; min-height: 0; height: 100%; padding: calc(4 * var(--v)) 0 0 calc(8 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--card); font: 700 calc(var(--fs-figure) * var(--u))/1 var(--display); position: relative; color: inherit; }
.cal .dow { align-items: center; justify-items: center; padding: 0; background: none; font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(1 * var(--u)); color: var(--muted); }
.cal .is-out { background: none; color: #5a6472; }
.cal .is-today { outline: calc(2 * var(--u)) solid var(--amber); background: #3b301f; }
.cal .is-today .num { display: grid; place-items: center; min-width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: calc(-1 * var(--v)) 0 0 calc(-2 * var(--u)); border-radius: 50%; background: #f1f3f6; color: #13151a; }
.cal .is-chosen:not(.is-today) { outline: calc(2 * var(--u)) solid var(--blue); }
.cal .marks { position: absolute; left: calc(8 * var(--u)); right: auto; bottom: calc(4 * var(--v)); height: auto; display: flex; justify-content: flex-start; align-items: center; gap: calc(3 * var(--u)); padding: 0; background: none; border-radius: 0; font-size: 0; }
.cal .marks i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); background: var(--dot, var(--blue)); }
.cal .marks i.kind-job { width: 0; height: 0; background: none; }
.cal .marks i.kind-task.is-overdue { background: none; }
.agenda { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); top: calc(358 * var(--v)); height: calc(112 * var(--v)); padding: 0; border-radius: calc(16 * var(--u)); background: var(--card); overflow: hidden; }
.agenda-head { position: absolute; left: calc(16 * var(--u)); right: calc(52 * var(--u)); top: calc(12 * var(--v)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.agenda-head b { min-width: 0; font: 600 calc(var(--fs-title) * var(--u))/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; align-items: center; gap: calc(6 * var(--u)); flex: none; color: var(--soft); font-size: calc(var(--fs-small) * var(--u)); font-weight: 400; }
.agenda .slot { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); height: calc(22 * var(--v)); display: flex; align-items: center; gap: calc(8 * var(--u)); font: 600 calc(var(--fs-title) * var(--u))/1 var(--sans); white-space: nowrap; overflow: hidden; }
.agenda .slot > span:not(.t-muted) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The day's rows as the firmware draws them: time, mark, title, and the agent or sender at the right. */
.agenda .slot small { margin-left: auto; flex: none; padding-left: calc(8 * var(--u)); color: var(--soft); font: 400 calc(var(--fs-small) * var(--u))/1 var(--sans); }
.agenda .slot.is-more { color: var(--muted); font-weight: 400; font-size: calc(var(--fs-small) * var(--u)); }
.agenda .t-muted { flex: none; width: calc(62 * var(--u)); font: 500 calc(var(--fs-label) * var(--u)) var(--mono); font-weight: 500; }
.agenda .is-free { color: var(--muted); font-weight: 400; font-size: calc(var(--fs-small) * var(--u)); }
.agenda-open { position: absolute; right: calc(6 * var(--u)); top: calc(8 * var(--v)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); color: var(--soft); font-size: calc(26 * var(--u)); text-align: center; }
.kind { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); background: var(--dot, var(--blue)); align-self: center; }
.kind-task { border-radius: calc(2 * var(--u)); } .kind-message { border-radius: 50%; }
/* An overdue task's square is an outline (ui_screens.cpp marker). */
.kind-task.is-overdue { background: none; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--dot, var(--red)); }
.kind-job { width: 0; height: 0; background: none; border-left: calc(5 * var(--u)) solid transparent; border-right: calc(5 * var(--u)) solid transparent; border-bottom: calc(8 * var(--u)) solid var(--dot, var(--orange)); }
.task i.kind { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border: 0; background: var(--dot, var(--blue)); }
/* Notes: category rows (64 px, from y 62), then a category's cards (96 px). */
.cat, .note { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card); }
.cat { height: calc(64 * var(--v)); }
.cat.is-selected, .note.is-selected { outline: calc(2 * var(--u)) solid var(--sel); outline-offset: calc(-2 * var(--u)); background: var(--card-hi); }
.cat-icon, .sender-icon { position: absolute; left: calc(12 * var(--u)); top: calc(10 * var(--v)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: grid; place-items: center; border-radius: calc(11 * var(--u)); background: var(--tint, #3b301f); color: var(--tone, var(--amber)); }
.cat b, .note-top b { position: absolute; left: calc(72 * var(--u)); right: calc(90 * var(--u)); top: calc(8 * var(--v)); font-size: calc(var(--fs-title) * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat b { top: calc(10 * var(--v)); line-height: 1.05; }
.cat small { position: absolute; left: calc(72 * var(--u)); right: calc(120 * var(--u)); top: calc(34 * var(--v)); color: var(--muted); font-size: calc(var(--fs-small) * var(--u)); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat .chev { position: absolute; right: calc(8 * var(--u)); top: calc(16 * var(--v)); width: calc(24 * var(--u)); color: var(--soft); font-size: calc(22 * var(--u)); text-align: center; line-height: 1; }
.cat .ui-count { position: absolute; right: calc(34 * var(--u)); top: calc(18 * var(--v)); min-width: calc(40 * var(--u)); height: calc(28 * var(--v)); line-height: calc(28 * var(--v)); background: var(--card-hi); color: var(--ink); }
.note { height: calc(96 * var(--v)); border-radius: calc(16 * var(--u)); }
.note::before { content: ""; position: absolute; left: calc(10 * var(--u)); top: calc(14 * var(--v)); bottom: calc(14 * var(--v)); width: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--tone, var(--muted)); }
.note-top span { position: absolute; right: calc(16 * var(--u)); top: calc(12 * var(--v)); color: var(--muted); font-size: calc(var(--fs-small) * var(--u)); }
.note-text { position: absolute; left: calc(26 * var(--u)); right: calc(16 * var(--u)); top: calc(38 * var(--v)); color: var(--soft); font-size: calc(var(--fs-small) * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { position: static; display: inline-flex; align-items: center; height: calc(22 * var(--v)); padding: 0 calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--tint, var(--tone)); color: var(--tone, var(--blue)); font: 600 calc(var(--fs-badge) * var(--u)) var(--mono); }
.note .note-top b { left: calc(26 * var(--u)); top: calc(10 * var(--v)); right: calc(88 * var(--u)); }
.note-meta { position: absolute; left: calc(26 * var(--u)); right: calc(16 * var(--u)); top: calc(64 * var(--v)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.note .author { position: static; color: var(--muted); font-size: calc(var(--fs-small) * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Message and note details. Sender square at (28, 63), 48 px. Title from y 154. Foot at y 405. */
.sender-icon { left: calc(28 * var(--u)); top: calc(63 * var(--v)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(2 * var(--u)) solid var(--tone, var(--amber)); }
.sender-id { position: absolute; left: calc(92 * var(--u)); right: calc(28 * var(--u)); top: calc(66 * var(--v)); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.sender-id b, .who { position: static; font-size: calc(var(--fs-title) * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--blue); color: #13151a; display: grid; place-items: center; }
.verified svg { width: 70%; height: 70%; stroke-width: 3.2; }
.ui.is-mono .verified { background: var(--ink); color: #dfe5e9; }
.sender small { position: absolute; left: calc(92 * var(--u)); top: calc(92 * var(--v)); color: var(--muted); font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(1 * var(--u)); }
.msg-title { position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(122 * var(--v)); font: 700 calc(var(--fs-heading) * var(--u))/1.05 var(--display); letter-spacing: -.02em; }
.msg-text { position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(168 * var(--v)); bottom: calc(88 * var(--v)); overflow: hidden; color: var(--soft); font-size: calc(var(--fs-text) * var(--u)); line-height: calc(var(--fs-lh) * var(--v)) !important; }
.msg-text .line { display: block; }
.msg-text .is-bullet, .msg-text .is-num { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.msg-text .is-bullet i { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(2 * var(--u)); border-radius: 50%; background: currentColor; align-self: center; }
.msg-text .is-num b { flex: none; min-width: calc(28 * var(--u)); font-weight: 400; }
.msg-foot { position: absolute; left: calc(29 * var(--u)); right: calc(29 * var(--u)); top: calc(392 * var(--v)); display: flex; justify-content: space-between; align-items: flex-end; font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(2 * var(--u)); color: var(--muted); }
.msg-foot b { display: block; margin-top: calc(4 * var(--v)); color: var(--ink); font: 700 calc(var(--fs-figure) * var(--u))/1 var(--display); letter-spacing: 0; text-transform: none; }
.msg-foot div:last-child { text-align: right; }
.msg-foot .is-time b { color: var(--amber); }
.msg-foot .is-soft b { color: var(--soft); }
.who { position: absolute; left: calc(92 * var(--u)); top: calc(68 * var(--v)); right: calc(150 * var(--u)); }
.where { position: absolute; left: calc(92 * var(--u)); top: calc(94 * var(--v)); color: var(--muted); font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(1 * var(--u)); text-transform: uppercase; }
.badge.is-detail { position: absolute; left: auto; right: calc(28 * var(--u)); top: calc(70 * var(--v)); height: calc(34 * var(--v)); padding: 0 calc(14 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--tone, var(--green)); color: #13151a; font: 600 calc(var(--fs-title) * var(--u))/calc(34 * var(--v)) var(--sans); }
.due-row { position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(74 * var(--v)); display: flex; align-items: center; gap: calc(14 * var(--u)); }
.pill { position: static; display: inline-flex; align-items: center; height: calc(32 * var(--v)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--fill, var(--amber)); font: 600 calc(var(--fs-badge) * var(--u)) var(--mono); letter-spacing: calc(2 * var(--u)); }
.due-line { position: static; font: 700 calc(var(--fs-figure) * var(--u))/1 var(--display); }
.dots { position: absolute; left: 0; right: 0; top: calc(456 * var(--v)); display: flex; justify-content: center; align-items: center; gap: calc(8 * var(--u)); }
.dots button, .dots i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #3a4048; padding: 0; }
.dots .is-on { width: calc(24 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--ink); }
.ui:has(.back) .ui-head:not(.is-back) { left: calc(72 * var(--u)); }
.ui-head.is-back { left: calc(72 * var(--u)); }
.cat-mini { width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: grid; place-items: center; border-radius: calc(9 * var(--u)); background: var(--tint, #3b301f); color: var(--tone, var(--amber)); flex: none; }
.cat-mini svg { width: 58%; height: 58%; }
.empty { position: absolute; left: 0; right: 0; top: calc(200 * var(--v)); text-align: center; color: var(--muted); }
.popup { position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--v)); right: calc(12 * var(--u)); bottom: calc(12 * var(--v)); border-radius: calc(18 * var(--u)); background: var(--card); border: calc(1.5 * var(--u)) solid var(--line); }
.popup-x { position: absolute; z-index: 3; right: calc(14 * var(--u)); top: calc(14 * var(--v)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--card-hi); font-size: calc(24 * var(--u)); text-align: center; }
.popup .ring-wrap { left: calc(20 * var(--u)); top: calc(16 * var(--v)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.popup .agent { left: calc(25 * var(--u)); top: calc(26 * var(--v)); }
.popup-title { position: absolute; left: calc(82 * var(--u)); right: calc(64 * var(--u)); top: calc(22 * var(--v)); font: 600 calc(var(--fs-title) * var(--u))/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-sub { position: absolute; left: calc(82 * var(--u)); right: calc(64 * var(--u)); top: calc(50 * var(--v)); font-size: calc(var(--fs-small) * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-rule { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(80 * var(--v)); height: 1px; background: var(--line); }
.popup-body { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(98 * var(--v)); color: var(--soft); font-size: calc(var(--fs-text) * var(--u)); line-height: calc(var(--fs-lh) * var(--v)); }
.popup-k { font: 500 calc(var(--fs-label) * var(--u)) var(--mono); letter-spacing: calc(2 * var(--u)); color: var(--muted); }
.popup-when { margin-top: calc(14 * var(--v)); font-size: calc(var(--fs-small) * var(--u)); }
.popup-when b { color: var(--ink); font-weight: 600; }
.msg-bar { position: absolute; left: calc(28 * var(--u)); right: calc(29 * var(--u)); top: calc(438 * var(--v)); height: calc(6 * var(--v)); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, var(--amber) calc(var(--p) * 1%), #272b32 0); }
.back { position: absolute; z-index: 3; left: calc(18 * var(--u)); top: calc(16 * var(--v)); width: calc(44 * var(--u)); height: calc(44 * var(--v)); border-radius: calc(10 * var(--u)); background: var(--card); border: calc(1.5 * var(--u)) solid var(--line) !important; color: var(--ink); font-size: calc(28 * var(--u)); text-align: center; }
/* The day's list scrolls inside the screen; its rows are buttons that open the item. */
.day-scroll { position: absolute; left: 0; right: 0; top: calc(62 * var(--v)); bottom: calc(8 * var(--v)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.day-scroll .day-row { position: relative; display: block; left: auto; top: auto; margin: 0 0 calc(6 * var(--v)) calc(20 * var(--u)); padding: 0; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.day-scroll .day-row:focus-visible { outline: calc(2 * var(--u)) solid var(--sel, var(--blue)); outline-offset: calc(-2 * var(--u)); }
.day-row { position: absolute; left: calc(20 * var(--u)); width: calc(440 * var(--u)); height: calc(64 * var(--v)); border-radius: calc(12 * var(--u)); background: var(--card); }
.day-icon { position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--v)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; border-radius: calc(10 * var(--u)); background: var(--tint, #1d3043); color: var(--tone, var(--blue)); }
.day-row b { position: absolute; left: calc(68 * var(--u)); right: calc(100 * var(--u)); top: calc(10 * var(--v)); font-size: calc(var(--fs-title) * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-row small { position: absolute; left: calc(68 * var(--u)); top: calc(34 * var(--v)); color: var(--muted); font-size: calc(var(--fs-small) * var(--u)); }
.day-row em { position: absolute; right: calc(16 * var(--u)); top: calc(18 * var(--v)); font-style: normal; font: 600 calc(var(--fs-figure) * var(--u)) var(--display); color: var(--soft); }
/* The view menu: eight tiles with live counts. */
/* View menu: two columns, tiles from y 74, 215 x 89, gap 12 (viewMenu, compact). */
.tiles { position: absolute; inset: 0; }
.tile { position: absolute; width: calc(215 * var(--u)); height: calc(89 * var(--v)); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card); border: calc(1.5 * var(--u)) solid var(--line); }
.tile.is-selected { border-color: var(--sel); border-width: calc(2.5 * var(--u)); background: var(--card-hi); }
.tile-icon { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: grid; place-items: center; border-radius: calc(9 * var(--u)); background: var(--tint); color: var(--tone); }
.tile b { display: block; font: 600 calc(var(--fs-subhead) * var(--u))/1.05 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { display: block; color: var(--soft); font-size: calc(var(--fs-small) * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(140 * var(--u)); }
.tile .dot.is-ask { background: var(--blue); }  /* the questions waiting, in blue (F-062) */
.tile .dot { position: absolute; top: calc(8 * var(--v)); right: calc(8 * var(--u)); min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(11 * var(--u)); display: grid; place-items: center; background: var(--tone); color: #13151a; font: 700 calc(12 * var(--u)) var(--sans); }
.ui-gear { width: calc(36 * var(--u)); height: calc(36 * var(--v)); display: grid; place-items: center; border: 1px solid var(--line); border-radius: calc(8 * var(--u)); }
.ui-gear svg { width: 60%; height: 60%; }
/* The 1-bit RLCD: the UI's colors print as paper, a dotted tint, or ink;
   pills and badges come out inverted (Painter::monoUi). Its glyphs keep the
   board's own sizes, smaller against the canvas than on the D1. */
.ui.is-mono { --bg: transparent; --card: transparent; --line: #3a4048; --ink: #1c2026; --soft: #1c2026; --muted: #1c2026; --amber: #1c2026; --blue: #1c2026; --green: #1c2026; --red: #1c2026; --purple: #1c2026; --orange: #1c2026; --sel: #1c2026;
  --fs-label: 13; --fs-badge: 13; --fs-title: 17; --fs-small: 14; --fs-heading: 28; --fs-subhead: 21; --fs-figure: 17; --fs-text: 16; --fs-lh: 22;
  background: none; color: var(--ink); text-shadow: none; }
.ui.is-mono .ui-count, .ui.is-mono .badge, .ui.is-mono .tile .dot { background: var(--ink); color: #dfe5e9; }
.ui.is-mono .job, .ui.is-mono .note, .ui.is-mono .agenda, .ui.is-mono .tile { background: none; border: calc(1.5 * var(--u)) dotted #3a4048; }
.ui.is-mono .job.is-selected, .ui.is-mono .note.is-selected, .ui.is-mono .tile.is-selected { outline: none; border: calc(3 * var(--u)) solid var(--ink); }
.ui.is-mono .job::before, .ui.is-mono .note::before { background: var(--ink); }
.ui.is-mono .ring { background: conic-gradient(var(--ink) calc(var(--p) * 1%), #9ea7ad 0); }
.ui.is-mono .ring-wrap.is-done .ring, .ui.is-mono .ring-wrap.is-ask .ring, .ui.is-mono .ring-wrap.is-failed .ring { background: var(--ink); }
.ui.is-mono .ring-wrap.is-done b, .ui.is-mono .ring-wrap.is-ask b, .ui.is-mono .ring-wrap.is-failed b { color: #dfe5e9; }
.ui.is-mono .agent { background: #dfe5e9; border-color: var(--ink); color: var(--ink); }
.ui.is-mono .job-bar, .ui.is-mono .msg-bar { background: linear-gradient(90deg, var(--ink) calc(var(--p) * 1%), #9ea7ad 0); }
.ui.is-mono .cal span, .ui.is-mono .cal button { background: none; }
.ui.is-mono .cal .is-out { color: #6d767d; }
.ui.is-mono .cal .is-today { outline-color: var(--ink); background: none; }
.ui.is-mono .task.is-selected { outline-color: var(--ink); background: none; }
.ui.is-mono .task.is-overdue i, .ui.is-mono .task.is-today i { background: var(--ink); border-color: var(--ink); }
.ui.is-mono .sender-icon, .ui.is-mono .tile-icon { background: none; border: calc(1.5 * var(--u)) solid var(--ink); color: var(--ink); }
.ui.is-mono .cal .has-item::after { background: var(--ink); }
.ui.is-mono .job-sub, .ui.is-mono .job-state, .ui.is-mono .t-amber, .ui.is-mono .t-blue, .ui.is-mono .t-green, .ui.is-mono .t-red { font-weight: 700; }
.ui.is-mono .cal .is-today .num { background: none; color: var(--ink); }
/* The RLCD on USB power: the bolt before the clock in the lists' headers. */
.ui.is-mono .ui-head.is-status .ui-clock::before { content: ''; display: inline-block; width: calc(14 * var(--u)); height: calc(20 * var(--v)); margin-right: calc(10 * var(--u)); vertical-align: -8%; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M9 0 0 11.5h5.5L4 20l10-12.5H8.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M9 0 0 11.5h5.5L4 20l10-12.5H8.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ui.is-mono .unread-pill { border-color: var(--ink); color: var(--ink); }
.ui.is-mono .badge-dots i { background: var(--ink); }
/* Notes' categories on the RLCD: plain icons and counts, the chosen one framed in ink. */
.ui.is-mono .cat { background: none; border: calc(1.5 * var(--u)) solid transparent; }
.ui.is-mono .cat.is-selected { outline: none; background: none; border: calc(3 * var(--u)) solid var(--ink); }
.ui.is-mono .cat-icon, .ui.is-mono .cat-mini { background: none; color: var(--ink); }
.ui.is-mono .cat .ui-count { background: none; color: var(--ink); }
.ui.is-mono .tile-icon { border: 0; }
.ui.is-mono .kind-task.is-overdue { background: none; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--ink); }
/* A message not read yet (the firmware's Unread pill, F-032). */
.unread-pill { position: absolute; right: calc(28 * var(--u)); top: calc(70 * var(--v)); padding: calc(3 * var(--v)) calc(10 * var(--u)); border: calc(1.5 * var(--u)) solid var(--red); border-radius: 999px; color: var(--red); font: 600 calc(var(--fs-label) * var(--u))/1.2 var(--mono); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; }
.unread-pill::before { content: '\25CF\00A0'; }
/* A category's notes' badge colours (ui_screens.cpp notes categories). */
.cat .badge-dots { position: absolute; right: calc(84 * var(--u)); top: calc(28 * var(--v)); display: flex; gap: calc(4 * var(--u)); }
.cat .badge-dots i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--dot, var(--muted)); }
.popup-about { margin-bottom: calc(10 * var(--v)); color: var(--ink); }

.section-space { padding-block: 65px 100px; }
.section-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 55px; }
.section-top .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--blue); }
.panel-black .section-top .eyebrow::before, .panel-blue .section-top .eyebrow::before { background: var(--sky); }
h2 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -.045em; }
h3 { font-size: 18px; letter-spacing: -.2px; font-weight: 600; }
.views-heading, .screens-heading, .connection-heading, .hardware-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; }
.views-heading .intro, .screens-heading .intro, .connection-heading .intro, .hardware-heading .intro { font-size: 15px; max-width: 380px; padding-bottom: 4px; }
/* Photos of the D1 on a desk, each with what its view does. */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 62px; }
.show-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: #191b1f; border: 1px solid #26282d; }
.show-wide { grid-column: span 2; grid-template-columns: 1.35fr 1fr; grid-template-rows: none; }
.show-photo { overflow: hidden; }
.show-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.25; transition: transform .8s ease; }
.show-card:hover .show-photo img { transform: scale(1.03); }
.show-text { padding: 28px 30px 32px; align-self: center; }
.show-text h3 { font: 700 24px/1.15 var(--display); letter-spacing: -.02em; }
.show-text p { margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 440px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 50px; margin-top: 88px; }
.features article { border-top: 1px solid var(--line); padding-top: 26px; }
.feature-number { font: 700 44px/1 var(--display); letter-spacing: -.04em; }
.feature-number > span { font: 500 11px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.features h3 { margin-top: 20px; font-size: 17px; }
.features p { font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 320px; }
.features code { font-size: 12.5px; color: #fff; }
/* Screens from the firmware's drawing code. On a computer they sit near the
   panel's own size and scale smoothly, so the type stays readable. */
.screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; gap: 48px 40px; margin-top: 72px; }
.screen-shot .bezel { padding: 16px; border-radius: 22px; background: #12141a; box-shadow: 0 22px 48px rgb(16 17 18 / 16%); }
.screen-shot img { display: block; width: 100%; height: auto; border-radius: 6px; image-rendering: auto; }
.screen-shot.is-mono .bezel { background: #d7dbe0; }
.screen-shot.is-mono img { border-radius: 2px; }
.screen-shot p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 460px; }
.screens-follow { margin-top: 96px; }
.desk-copy { order: 1; } .desk-device { order: 2; min-width: 0; }
/* The virtual display: the same canvas, clicked through like the board. */
.desk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: 56px; align-items: center; margin-top: 36px; }
.usecase-list { list-style: none; margin: 28px 0 0; padding: 0; }
.usecase-list li { border-top: 1px solid var(--line); }
.usecase-list button { display: block; width: 100%; padding: 16px 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.usecase-list button strong { display: block; font: 600 16px/1.3 var(--sans); }
.usecase-list button span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.usecase-list button[aria-pressed="true"] strong { color: var(--blue); }
.desk-bezel { padding: 16px; border-radius: 28px; background: #12141a; box-shadow: 0 24px 50px rgb(16 17 18 / 18%); }
.desk-screen { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.desk-screen .ui-screen { position: absolute; inset: 0; }
.desk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.desk-tabs button { border: 1px solid #d9dadc; background: #fff; color: #16181d; border-radius: 2px; padding: 8px 10px; font: 600 13px var(--sans); cursor: pointer; }
.desk-tabs button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; margin-top: 62px; }
.flow article { position: relative; align-self: stretch; padding: 31px 25px 24px; border-top: 1px solid #ffffff40; background: transparent; }
.flow-index { position: absolute; top: -14px; right: 22px; background: var(--navy); padding: 7px 10px; border: 1px solid #ffffff59; border-radius: 50%; font: 500 10px var(--mono); color: white; }
.terminal-symbol, .wifi-symbol, .screen-symbol { width: 61px; height: 53px; margin: 13px 0 38px; color: var(--sky); }
.terminal-symbol { font: 46px/53px var(--mono); letter-spacing: -5px; }
.screen-symbol { border: 2px solid currentColor; height: 43px; position: relative; margin-bottom: 48px; padding: 11px; }
.screen-symbol::after { content: ''; position: absolute; left: 17px; right: 17px; bottom: -10px; border-bottom: 2px solid currentColor; }
.screen-symbol span { display: block; height: 2px; background: currentColor; margin-bottom: 6px; }
.screen-symbol span:last-child { width: 60%; }
.flow h3 { font: 700 24px var(--display); letter-spacing: -.02em; }
.flow p { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.flow-tag { display: block; border-top: 1px solid var(--line); margin-top: 25px; padding-top: 15px; font: 500 10px var(--mono); letter-spacing: .5px; color: var(--amber); }
.flow-arrow { text-align: center; font-size: 26px; color: var(--sky); }
.connection-footer { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); }
.connection-footer .square { color: var(--amber); }
.connection-footer p { font-size: 13px; }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; margin-top: 55px; }
.faq-list article { border-top: 1px solid var(--line); padding: 26px 0 34px; }
.faq-list h3 { font-size: 20px; }
.faq-list p { font-size: 15px; margin-top: 12px; max-width: 470px; color: var(--muted); }
.faq-list code { font: 12.5px/1.9 var(--mono); padding: 2px 5px; background: #ffffff17; color: #eef1f5; overflow-wrap: anywhere; }
.hardware-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 52px; align-items: center; }
.photo-frame { display: grid; place-items: center; background: #f1f3f6; overflow: hidden; border-radius: 20px; padding: 40px; }
.photo-frame img { grid-area: 1 / 1; width: 82%; height: auto; max-height: 100%; object-fit: contain; transition: transform .8s, opacity .5s ease; filter: drop-shadow(0 16px 20px rgb(16 17 18 / 14%)); }
.photo-frame img:not(.is-active) { opacity: 0; pointer-events: none; }
.photo-frame:hover img { transform: scale(1.03); }
.board-pick { display: flex; align-items: center; gap: 17px; width: 100%; margin: 0; border: 0; border-top: 1px solid #d9dadc; border-radius: 0; padding: 22px 12px 22px 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s ease; }
.board-pick:hover { background: #f6f7f9; }
.board-pick:focus-visible { outline: 3px solid #8db4ff; outline-offset: -3px; }
.board-pick[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--blue); }
.board-num { font: 500 11px var(--mono); color: #6b717b; }
.board-text { display: flex; flex-direction: column; min-width: 0; }
.board-name { font-weight: 600; font-size: 18px; letter-spacing: -.2px; line-height: 1.2; }
.board-specs { font-size: 13px; color: var(--muted); margin-top: 5px; }
.board-chip { margin-left: auto; font: 500 10px var(--mono); color: #4b525d; border: 1px solid #d9dadc; padding: 5px 7px; white-space: nowrap; }
.board-pick .board-chip { color: #fff; background: var(--blue); border-color: var(--blue); }
.board-list .board-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 22px; }
.board-note a { color: var(--blue); white-space: nowrap; }
.board-note a:hover { text-decoration: underline; text-underline-offset: 4px; }
.setup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; }
.setup-layout .intro { margin-top: 25px; max-width: 360px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 23px 0 26px 45px; border-top: 1px solid var(--line); }
.steps li::before { content: '0' counter(step); position: absolute; left: 0; top: 26px; font: 500 11px var(--mono); color: #8d939f; }
.steps h3 { font-size: 20px; }
.steps .step-button { margin-top: 18px; }
.steps p { font-size: 14px; color: var(--muted); margin-top: 10px; }
.endpoint { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border: 1px solid #414348; margin-top: 20px; }
.endpoint code { font-size: 13px; overflow-wrap: anywhere; }
.endpoint button { border: 0; background: none; color: var(--sky); padding: 7px 0; font-size: 12px; white-space: nowrap; }
.copy-status { display: block; min-height: 18px; margin-top: 6px; color: var(--muted); font-size: 12px; }
footer { display: flex; align-items: center; gap: 25px; border-top: 1px solid var(--line); padding-block: 30px; }
footer .wordmark { font-size: 20px; }
footer p { font-size: 12px; color: var(--muted); }
footer > div { margin-left: auto; display: flex; gap: 25px; font-size: 13px; }
.back-top { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #525357; margin-left: 15px; }
footer a:hover { color: var(--sky); }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .motion-ready .reveal.is-visible { opacity: 1; transform: none; }
  .features .reveal:nth-child(3n+2), .flow .reveal:nth-of-type(2), .screen-grid .reveal:nth-child(3n+2) { transition-delay: .1s; }
  .features .reveal:nth-child(3n), .flow .reveal:nth-of-type(3), .screen-grid .reveal:nth-child(3n) { transition-delay: .2s; }
}
@media (max-width: 1050px) {
  .container { width: calc(100% - 72px); }
  .hero { --bleed: 36px; }
  .hero-layout { gap: 35px; }
  h1 { font-size: 46px; }
  .hero-copy .intro { font-size: 15px; }
  .views-heading, .screens-heading, .connection-heading, .hardware-heading, .hardware-layout, .setup-layout { gap: 40px; }
  .faq-list { column-gap: 45px; }
  .board-name { font-size: 16px; }
  .flow { grid-template-columns: 1fr 28px 1fr 28px 1fr; }
  .flow article { padding-inline: 20px; }
  .show-wide { grid-template-columns: 1.1fr 1fr; }
  .screen-grid { gap: 36px 22px; }
  footer { flex-wrap: wrap; }
  footer p { display: none; }
}
@media (max-width: 760px) {
  .nav-rail { display: none; }
  .site-header { top: 16px; width: calc(100% - 32px); }
  .container { width: calc(100% - 40px); }
  .nav { min-height: 56px; padding-left: 8px; }
  .wordmark { font-size: 20px; }
  .nav .brand img { width: 28px; height: 28px; }
  .nav-links { gap: 18px; font-size: 12px; }
  .nav-cta { padding: 14px 13px; gap: 10px; }
  .hero { padding-block: 112px 70px; --horizon: 72%; }
  .hero-marks, .hero-plant, .hero-front { display: none; }
  .hero { padding-bottom: 120px; }
  .hero-shade { -webkit-mask-image: none; mask-image: none; }
  .hero-shade.is-near { opacity: .09; }
  .hero-layout { grid-template-columns: 1fr; gap: 35px; }
  h1 { font-size: clamp(40px, 7.8vw, 56px); }
  .hero-copy .intro { font-size: 15px; max-width: 440px; }
  .hero-copy .button { margin-top: 20px; }
  .hero { --bleed: 20px; }
  .hero-photo .hero-art { width: 77%; }
  .hero-photo .hero-art-rlcd { width: 94%; }
  .section-space { padding-block: 35px 60px; }
  .section-top { padding-bottom: 40px; }
  .eyebrow { font-size: 10px; }
  h2 { font-size: clamp(36px, 7.5vw, 52px); }
  .views-heading, .screens-heading, .connection-heading, .hardware-heading, .hardware-layout, .setup-layout, .desk-layout { grid-template-columns: 1fr; gap: 24px; }
  .desk-device { order: 1; } .desk-copy { order: 2; }
  .screens-follow { margin-top: 56px; }
  .intro { font-size: 15px; }
  .showcase { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .show-wide { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .show-text { padding: 22px 22px 26px; }
  .show-text h3 { font-size: 21px; }
  .show-text p { font-size: 14px; }
  .features { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; }
  .features article { padding-top: 22px; display: grid; grid-template-columns: 110px 1fr; gap: 0 20px; }
  .feature-number { grid-row: span 2; font-size: 38px; }
  .feature-number > span { display: block; margin: 8px 0 0; font-size: 10px; }
  .features h3 { margin: 4px 0 0; font-size: 16px; }
  .features p { font-size: 13px; margin-top: 6px; max-width: none; }
  .screen-grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 40px; }
  .screen-shot .bezel { padding: 8px; border-radius: 12px; }
  .screen-shot p { font-size: 13px; margin-top: 10px; }
  .connection-heading .intro, .hardware-heading .intro { max-width: 470px; font-size: 14px; }
  .flow { grid-template-columns: 1fr; margin-top: 35px; }
  .flow article { display: grid; grid-template-columns: 75px 1fr; gap: 0 20px; padding: 26px 23px; }
  .flow-index { font-size: 9px; }
  .terminal-symbol, .wifi-symbol, .screen-symbol { grid-row: span 2; margin: 12px 0 0; }
  .flow h3 { font-size: 23px; }
  .flow p { margin-top: 9px; font-size: 13px; }
  .flow-tag { grid-column: 1 / -1; margin-top: 22px; }
  .flow-arrow { transform: rotate(90deg); height: 40px; line-height: 40px; }
  .connection-footer { align-items: flex-start; }
  .connection-footer .square { margin-top: 7px; }
  .faq-list { grid-template-columns: 1fr; margin-top: 35px; }
  .faq-list article { padding: 22px 0 26px; }
  .faq-list h3 { font-size: 18px; }
  .faq-list p { font-size: 14px; }
  .hardware-layout { margin-top: 35px; gap: 30px; }
  .photo-frame { padding: 24px; }
  .board-pick { padding-block: 20px; }
  .board-name { font-size: 17px; }
  .board-specs { font-size: 12px; }
  .board-list .board-note { font-size: 13px; }
  .setup-layout { gap: 40px; }
  .steps li { padding-left: 35px; }
  .steps h3 { font-size: 19px; }
  .endpoint { padding: 10px; }
  .endpoint code { font-size: 12px; }
  footer { gap: 20px; padding-block: 26px; }
  footer > div { order: 3; width: 100%; margin: 0; font-size: 12px; }
  .back-top { margin-left: auto; }
}
/* Seven links: the dashboard editor first (it needs a larger screen anyway),
   then the section links, then Flasher (it needs a computer anyway: phones
   have no Web Serial), then Manual; Buy (down to its cart) and Get started
   stay. Each step a little above the width where the links would come
   within 8 px of each other or the wordmark (2026-10-30: 818, 686, 597, 516,
   450 px; tools/test_site_pages.js checks every width). */
@media (max-width: 840px) {
  .nav-links > .nav-editor { display: none; }
}
@media (max-width: 700px) {
  .nav-links > a:first-child { display: none; }
}
@media (max-width: 610px) {
  .nav-links > a:nth-child(2) { display: none; }
}
@media (max-width: 530px) {
  .nav-links > a:nth-child(3) { display: none; }
}
@media (max-width: 460px) {
  .nav-links > a:nth-child(4) { display: none; }
}
@media (max-width: 450px) {
  .screen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 370px) {
  .nav-buy-label { display: none; }
}
@media (max-width: 400px) {
  .nav-links > .nav-buy { padding-inline: 11px; gap: 6px; }
}
@media (max-width: 340px) {
  .nav-cta span { display: none; }
}
@media (max-width: 390px) {
  .brand { gap: 8px; }
  .wordmark { font-size: 18px; }
  .nav .brand img { width: 26px; height: 26px; }
  .nav-links { gap: 12px; }
  .nav-cta { padding-inline: 10px; }
  .container { width: calc(100% - 32px); }
  .hero { --bleed: 16px; }
  h1 { font-size: 38px; }
  .board-pick { gap: 12px; }
  .board-name { font-size: 15px; }
  .board-chip { font-size: 9px; }
  .endpoint { flex-wrap: wrap; }
  .features article { grid-template-columns: 90px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-stage, .hero-art { transform: none !important; will-change: auto; }
  .hero { transform: none; border-radius: 0; }
  .hero-hint.is-still { opacity: 1; }  /* reduced motion: shown, then gone (script.js), without the animation */
}