/* fly.css — zettarack.com: the fly-through and the pages beside it.
   The site is one 3D space: the stops hang along a route drawn on a
   canvas floor (fly.js) in a hall drawn behind it all (hall.js), and the
   camera flies between them; the flat view lays the same sections out as
   a page. Fonts are the site's own files,
   under the SIL Open Font License (fonts.txt); nothing is loaded from
   anywhere else, which the Worker's policy enforces. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/archivo.woff2?v=88b798c60b) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/ibm-plex-mono-400.woff2?v=ffdd11a4ce) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/ibm-plex-mono-600.woff2?v=a7331a6080) format('woff2'); }

:root {
  --body: #1b1c1e;      /* graphite: the machine's body */
  --module: #26272a;    /* a raised module */
  --well: #141517;      /* recessed panel, screens */
  --rule: #3a3b3f;
  --ivory: #ede8df;     /* labels and light panels */
  --label: #9a968e;
  --sub: #b3aea5;
  --ink: #1b1c1e;
  --ink-sub: #4a4741;
  --signal: #ff6a13;    /* the one orange signal */
  --signal-rgb: 255,106,19;  /* the same, for a glow (fly.js reads it for the route) */
  --signal-ink: #b8470a;     /* the signal on ivory */
  --sage: #c9d1c8;
  --ok: #7fd18b;        /* running state in screens */
  --display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --panel-w: min(940px, 90vw);
  color-scheme: dark;
}
html, body { height: 100%; }
body { margin: 0; background: var(--body); color: var(--ivory); font-family: var(--display); font-size: 17px; line-height: 1.55; overflow: hidden; }
body.flat { overflow: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------- the 3D space ---------- */
#hall, #floor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.hall-off #hall { display: none; }
.viewport { position: fixed; inset: 0; perspective: 1400px; perspective-origin: 50% 42%; overflow: hidden; }
.world { position: absolute; left: 50%; top: 48%; transform-style: preserve-3d; }
.station { position: absolute; left: 0; top: 0; width: var(--panel-w); transform-origin: 0 0; backface-visibility: hidden; contain: layout style; }
/* The captures from the bench. In a stop, a screen as it is; beside the
   desktop stop, four machines' desktops that fly.js stands in an arc. The
   group stays flat and untransformed: opacity on it would flatten the arc
   (CSS flattens a 3D group that is not opaque), so each screen fades. */
.capture { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--well); }
.screens { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.screen { position: absolute; left: 0; top: 0; width: 1100px; margin: 0; transform-origin: 0 0; backface-visibility: hidden; }
.screen img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--well); box-shadow: 0 0 80px rgba(0,0,0,0.55); }
.screen figcaption { margin-top: 12px; font-family: var(--mono); font-size: 20px; letter-spacing: 0.04em; color: var(--label); }
/* A panel too tall for the room scrolls inside itself (fly.js gives it a
   max-height of the room). Border-box, so its padding is inside that height:
   without it every scrolling panel overran the room by its padding, ran
   under the route bar, and the stop's name sat on its last lines
   (2026-10-28, kbx's stops with their captures). */
.panel.scroll { box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #4a4b50 transparent; }

/* ---------- flat view ---------- */
body.flat #floor { display: none; }
body.flat .viewport { position: static; perspective: none; overflow: visible; }
body.flat .world { position: static; transform: none !important; display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 130px 16px 80px; }
body.flat .station { position: relative; transform: none !important; opacity: 1 !important; visibility: visible !important; width: min(940px, 100%); }
body.flat .screens { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(940px, 100%); }
body.flat .screen { position: relative; width: auto; transform: none !important; opacity: 1 !important; visibility: visible !important; }
body.flat .screen figcaption { margin-top: 6px; font-size: 12px; }
/* A stop with one capture shows it at the panel's width, not in half a grid. */
body.flat .screen:only-child { grid-column: 1 / -1; }
body.flat .screen img { box-shadow: none; }
body.flat .route { display: none; }
body.flat .panel { max-height: none !important; overflow: visible; }

/* ---------- panels ---------- */
.panel { border-radius: 4px; padding: clamp(22px, 4.5vw, 44px); display: flex; flex-direction: column; gap: 22px; }
.panel.dark { background: var(--module); border: 1px solid #323337; }
.panel.light { background: var(--ivory); color: var(--ink); }
.panel.bare { padding-inline: 0; }
.eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--label); }
.light .eyebrow { color: #6a665f; }

h1, h2 { margin: 0; font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: 0.9; text-wrap: balance; }
h1 { font-size: clamp(52px, 8.5vw, 118px); line-height: 0.88; }
h2 { font-size: clamp(40px, 6vw, 74px); }
h1 em, h2 em { font-style: normal; color: var(--signal); }
p { margin: 0; max-width: 62ch; color: var(--sub); }
.light p { color: var(--ink-sub); }
.lede { font-size: 20px; }
.two { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.two > * { flex: 1 1 320px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.chip { background: var(--module); padding: 7px 10px; border-radius: 3px; }
.chip.dim { color: var(--label); }
.chip.ivory { background: var(--ivory); color: var(--ink); padding: 10px 14px; }
.chip.orange { background: var(--signal); color: #141414; padding: 10px 14px; }
.chip.dashed { background: transparent; border: 1px dashed #6a6760; color: var(--label); padding: 9px 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { border: 0; border-radius: 3px; padding: 15px 22px; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; min-height: 48px; }
.btn.primary { background: var(--signal); color: #141414; }
.btn.ghost { background: transparent; border: 1px solid #4a4b50; color: var(--ivory); font-weight: 600; }
/* A download beside the two ways in, on the brand page: a touch smaller, so the
   four of a product fit one row of its 940px panel (they needed 1011px and
   wrapped; the operator, 2026-10-30: "make the download buttons a touch
   smaller so all 4 things fit on the same line"). The same height. */
.btn.small { padding-left: 14px; padding-right: 14px; font-size: 13px; letter-spacing: 0.04em; }
.btn[disabled] { background: #3a3b3f; color: var(--label); cursor: not-allowed; }
.caption { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--label); }
.light .caption { color: #6a665f; }

/* hero: the product named plainly, and what it is (the operator, 2026-10-21:
   "clearly define VMX - Hypervisor, in testing then ZXP - Storage Server, in
   testing"; the V picture that stood here went the same day) */
.product-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.product-id b { font-stretch: 75%; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: 0.04em; color: var(--ivory); }
.product-id span { font-family: var(--mono); font-size: 14px; color: var(--label); text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- screens: framed technical illustrations, each swappable for a real screenshot ---------- */
.shot { background: var(--well); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-family: var(--mono); font-size: 12px; color: #d8d4cc; }
.shot-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1e1f22; border-bottom: 1px solid var(--rule); color: var(--label); font-size: 11px; }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b3f; }
.shot-bar span { margin-left: 8px; }
.shot-bar b { margin-left: auto; font-weight: 400; }

.down { color: #6a6760; } .gold { color: #d4a017; }

.screen { flex-grow: 1; margin: 10px; background: #000; border-radius: 4px; padding: 12px; color: #c8c8c8; line-height: 1.6; white-space: pre-wrap; overflow: hidden; font-size: 11.5px; }

/* the wall */

.newtile { display: flex; align-items: center; justify-content: center; color: var(--label); border-style: dashed; background: #1a1b1d; }

/* plan dialog */
.plan { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.plan h3 { margin: 0; font-family: var(--display); font-size: 18px; color: var(--ivory); font-weight: 600; }
.plan ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: s; }
.plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; line-height: 1.5; counter-increment: s; }
.plan li::before { content: counter(s); color: var(--signal); text-align: right; }
.plan li span { overflow-wrap: anywhere; }
.plan .destroys { border-top: 1px solid var(--rule); padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.plan .destroys b { color: var(--ok); font-weight: 400; }
.plan .destroys b.bad { color: #ff8a6a; }
.plan .row-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.plan .row-btns span { border: 1px solid #4a4b50; border-radius: 3px; padding: 6px 12px; color: var(--ivory); }
.plan .row-btns span.go { background: var(--signal); border-color: var(--signal); color: #141414; }
.plan .confirm { border: 1px solid #4a4b50; border-radius: 3px; padding: 6px 10px; color: var(--label); }

/* terminal */
.tty { padding: 14px 16px; white-space: pre; overflow-x: auto; line-height: 1.6; font-size: 12px; color: #d8d4cc; }
.tty .p { color: var(--signal); }
.tty .c { color: var(--label); }
.tty .k { color: var(--ok); }

/* layers */
.layers { display: flex; flex-direction: column; gap: 14px; }
.layer { display: flex; align-items: center; gap: 14px; }
.slab { flex: 0 0 56%; height: 54px; border-radius: 3px; transform: skewX(-12deg); display: flex; align-items: center; padding-left: 22px; }
.slab b { transform: skewX(12deg); font-weight: 800; text-transform: uppercase; font-stretch: 75%; font-size: 18px; }
.slab.image { background: var(--ink); color: var(--ivory); }
.slab.be { background: var(--signal); color: #141414; }
.slab.state { background: var(--sage); color: var(--ink); }
.leader { flex-grow: 1; height: 1px; background: var(--ink); }
.layer small { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

/* modules */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px; }
.mod { background: var(--body); padding: 16px 18px; border-radius: 3px; display: flex; flex-direction: column; gap: 4px; }
.mod code { font-family: var(--mono); font-size: 11px; color: var(--signal); }
.mod span { font-weight: 600; }
/* vmx's three strongest, under the headline (operator, 2026-10-21: "put
   the 3 up as its strongest features"). The hero's panel is bare, so these
   tiles are raised to the module colour; a plain .mod is the body's. */
.modules.lead { gap: 8px; }
.modules.lead .mod { background: var(--module); border: 1px solid #323337; padding: 18px 20px; gap: 6px; }
.modules.lead .mod span { font-size: 18px; line-height: 1.3; }
.mod p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--label); }

/* Each product on the brand page: set like the statement above it, under a
   rule in its own colour, vmx's orange and zxp's red (operator, 2026-10-18:
   vmx "above the picture"; its line since 2026-10-20 is "every machine on one
   screen", in place of "the hypervisor you can use"; zxp below it since
   2026-10-21) */
.brand-product { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; padding-top: 30px; border-top: 4px solid var(--signal); }

/* get vmx */
.get { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px; }
.card { background: var(--body); border-radius: 3px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { margin: 0; font-stretch: 75%; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.card p { font-size: 15px; }
.card pre { margin: 0; background: var(--well); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; font-family: var(--mono); font-size: 12px; color: #d8d4cc; overflow-x: auto; white-space: pre; }
.card ul { margin: 0; padding-left: 18px; color: var(--sub); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.card.dl { border-top: 4px solid var(--signal); }
.meta { font-family: var(--mono); font-size: 12px; color: var(--label); }
.meta.hash { overflow-wrap: anywhere; }   /* 64 hex digits are one word, wider than a phone */
.credit { font-family: var(--mono); font-size: 12px; color: var(--label); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- HUD ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(var(--body) 40%, rgba(27,28,30,0)); }
body.flat .top { background: var(--body); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 4px 0; }
.brand i { width: 26px; height: 26px; background: var(--signal); border-radius: 3px; display: grid; place-items: center; color: #141414; font-style: normal; font-weight: 800; font-size: 15px; }
.brand span { font-stretch: 75%; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
/* BootMASS's wordmark keeps its own case: MASS is the point (D-446) */
.brand span.mixed { text-transform: none; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.links button { background: none; border: 0; cursor: pointer; padding: 10px 2px; color: var(--label); text-transform: uppercase; letter-spacing: 0.08em; }
.links button:hover { color: var(--ivory); }
.links .toggle { border: 1px solid #4a4b50; border-radius: 3px; padding: 9px 12px; color: var(--ivory); }
.links .join { background: var(--signal); color: #141414; border-radius: 3px; padding: 10px 14px; font-weight: 600; }
.links .join:hover { color: #141414; }
.route { position: fixed; left: 16px; right: 16px; z-index: 10; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.route-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--label); }
.route-head b { color: var(--ivory); font-weight: 600; }
.step { width: 44px; height: 44px; border-radius: 3px; cursor: pointer; font-size: 18px; }
.step.prev { background: var(--module); border: 1px solid var(--rule); }
.step.next { background: var(--signal); border: 0; color: #141414; }
.hint { display: none; }
@media (min-width: 760px) { .hint { display: inline; } }
.track { display: flex; align-items: center; background: rgba(27,28,30,0.9); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 12px; overflow-x: auto; }
.track .seg { flex: 1 0 12px; min-width: 12px; height: 2px; background: var(--rule); }
.track .seg.done { background: var(--signal); }
.stop { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 10px 4px; white-space: nowrap; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); min-height: 44px; }
.stop .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #6a6760; flex: 0 0 auto; }
.stop.done { color: var(--ivory); } .stop.done .dot { background: var(--ivory); border-color: var(--ivory); }
.stop.here { color: var(--signal); } .stop.here .dot { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(var(--signal-rgb),0.2); }
@media (max-width: 860px) { .stop .lbl { display: none; } .stop.here .lbl { display: inline; } }

@media (max-width: 560px) { body.flat .screens { grid-template-columns: 1fr; } }

/* jewm desktop mock */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
.feat { background: var(--body); border-radius: 3px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.light .feat { background: #e2dccf; }
.feat b { font-weight: 600; }
.feat span { color: var(--sub); font-size: 15px; }
.light .feat span { color: var(--ink-sub); }
.keys { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--label); }
kbd { font-family: var(--mono); font-size: 12px; background: var(--ivory); color: var(--ink); border-radius: 3px; padding: 4px 8px; box-shadow: inset 0 -2px 0 #b8b1a4; }
.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
.cmds { padding: 12px 16px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; font-size: 12px; line-height: 1.5; }
.cmds .c { color: var(--signal); white-space: nowrap; }
.cmds span:nth-child(2n) { color: #c8c4bc; }

/* the stop you are at gets a copper edge once the camera settles */
.station.here .panel.dark, .station.here .panel.light { box-shadow: 0 0 0 1px rgba(var(--signal-rgb),0.55), 0 0 70px rgba(var(--signal-rgb),0.16); }
.links .demo { color: var(--signal); }

/* What the draft wrote inline, as classes: the policy allows no inline style. */
.fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.two.stretch { align-items: stretch; }
.steps-btns { display: flex; gap: 8px; }
.verify-note { font-size: 14px; }

/* A page of its own (bootmass.com, the 404): the flat view, always. */
body.page { overflow: auto; }
body.page main { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 120px 16px 80px; }
body.page .panel { width: min(940px, 100%); box-sizing: border-box; }
body.page .top { background: var(--body); border-bottom: 1px solid var(--rule); }
/* On a phone the header is two to four rows. Pinned, it kept a fifth of the
   brand page and a quarter of vmx's on a 390 x 844 screen (2026-10-15). In
   the flat view and on a page it scrolls away with the page; flying, it
   stays, as the flight's controls. 639px is where fly.js puts a phone in
   the flat view. */
@media (max-width: 639px) { body.flat .top, body.page .top { position: absolute; } }
a.brand, .links a { text-decoration: none; color: inherit; }
.links a.join { color: #141414; }
a.inline { color: var(--signal); }
.credit a { color: inherit; text-underline-offset: 3px; }   /* the footer's one link stays as quiet as the line it sits in */
/* Bootmass's consulting address, as a command that prints it. It wraps
   rather than scrolls on a phone; a soft wrap still copies as one line. */
.shot pre.term { margin: 0; padding: 14px 16px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--signal); white-space: pre-wrap; word-break: break-all; }
.shot pre.term .p { color: var(--label); user-select: none; }   /* the prompt stays behind when the line is copied */

/* The brand page (/): flat, over the hall. The hall's canvas is fixed, which
   paints it over anything not positioned, so the page's main is. */
body.page main { position: relative; z-index: 1; }
.links a:not(.join) { padding: 10px 2px; color: var(--label); }
.links a:not(.join):hover { color: var(--ivory); }
.brandpage .hero { width: min(940px, 100%); padding-top: 6vh; }
.brandpage .hero h1 { font-size: clamp(52px, 9vw, 128px); }
a.btn { display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none; }   /* a button is border-box by default; a link is not */
.light a.inline { color: var(--signal-ink); }

/* the comparison under the three layers (stop 4): a table that scrolls
   sideways on a phone rather than pushing the page */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-top: 1px solid rgba(27, 28, 30, .18); }
.compare thead th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-sub); border-top: 0; }
.compare tbody th { font-weight: 600; width: 21%; color: var(--ink); }
.compare td:nth-child(2) { color: var(--ink); font-weight: 500; }

/* a command on a card (stop 10): the line itself, wrapped where it must */
.feat code { display: block; font-family: var(--mono); font-size: 12px; color: var(--signal); white-space: pre; overflow-x: auto; line-height: 1.6; padding-bottom: 2px; }

/* zxp's page, and its block on the brand page: the same chassis in zxp's
   red, where vmx's is orange (D-318; the operator, 2026-10-18: "im thinking
   zxp should be red"). A red light enough that the dark ink on its buttons
   reads at 4.9:1; the deep ember of its scenes is in the city behind
   (wallpaper.js), not on a button. */
body.zxp, .brand-product.zxp { --signal: #f2412a; --signal-rgb: 242,65,42; --signal-ink: #b3261a; }
/* Two command cards to a row where the commands are long (zxp's stop 11):
   at three to a row a 40-character line was cut off in its card. Never wider
   than the panel: a phone's is under 340 px. */
.feats.wide { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* vmx's page, and its block on the brand page: a violet (D-445; the
   operator, 2026-10-30: "vmx would look better with purple insted of the
   halloween orange", then "a" of three drawn). Cool and apart from kbx's
   sky blue, which Miami blue would have all but matched. Dark ink on it
   reads at 6.8:1; on ivory it is too pale for words, so a light panel's
   emphasis takes the deeper violet of signal-ink (5.8:1). The hall behind
   the page takes it too (hall.js reads --signal-rgb). */
body.vmx, .brand-product.vmx { --signal: #a78bfa; --signal-rgb: 167,139,250; --signal-ink: #6d28d9; --streak-rgb: 196,181,253; }
.vmx .light h2 em, .vmx .light h1 em { color: var(--signal-ink); }

/* kbx's page, and its block on the brand page: a sky blue, kbx's own key
   colour on its console made a signal (D-405's Deep water), cool where
   vmx's orange and zxp's red are warm. Dark ink on it reads at 8.6:1. On
   ivory it is too pale for words (1.8:1), so a light panel's emphasis
   and links take the deeper blue of signal-ink (4.8:1). The dust's warm
   streak (fly.js) takes the paler key blue. */
body.kbx, .brand-product.kbx { --signal: #38bdf8; --signal-rgb: 56,189,248; --signal-ink: #0369a1; --streak-rgb: 125,211,252; }
.kbx .light h2 em, .kbx .light h1 em { color: var(--signal-ink); }
/* kbx's layer captions are kept to fourteen characters, which fit beside
   their slabs on a 390 px phone; on a narrower one they wrap rather than
   run past the panel's edge. */
@media (max-width: 379px) { .kbx .layer small { white-space: normal; } }

/* A capture still to be taken: an empty frame of the capture's own shape,
   naming the screen and the file it waits for, so a page tells the truth
   until the picture is real (kbx's, 2026-10-28: no screen of it may be
   drawn in its place). */
.slot { box-sizing: border-box; aspect-ratio: 16 / 9; width: 100%; display: grid; place-items: center; padding: 16px; border: 1px dashed #55575d; border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(237,232,223,0.035) 0 1px, transparent 1px 14px), var(--well);
  font-family: var(--mono); font-size: 12px; line-height: 1.8; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--label); }
.light .slot { border-color: #b4ada1; background: repeating-linear-gradient(135deg, rgba(27,28,30,0.05) 0 1px, transparent 1px 14px), #e2dccf; color: #6a665f; }
/* beside a stop a slot stands 1100 px wide and is seen from further off */
.screen .slot { border-radius: 10px; font-size: 24px; }
body.flat .screen .slot { font-size: 12px; }

/* The phases of a build, in order (kbx's stop 2): a number in the signal,
   the phase, and a line on what it does and reads back. */
.phases { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 4px; counter-reset: ph; }
.phases li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-content: start; background: var(--body); border-radius: 3px; padding: 12px 16px; counter-increment: ph; }
.phases li::before { content: counter(ph); grid-row: 1 / span 2; font-family: var(--mono); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--signal); }
.phases b { font-weight: 600; }
.phases span { grid-column: 2; color: var(--sub); font-size: 15px; line-height: 1.45; }