@charset "utf-8";
/* Root Kernel — 점등 / EMBER CIRCUIT (DESIGN_SPEC_v3.md v3.1)
   Every length is an integer multiple of --px.  No gradients, blur, glow, scanlines.
   Contains no sentences: all copy lives in _workspace/r5/copy/*.json. */

/* ---------------------------------------------------------------- tokens
   Amendment r10 §1: the three pixel faces are gone.  Every face here is a system face,
   so the document loads no font, CLS is structurally 0, and the game typography that
   the readouts carried is replaced by size hierarchy alone (body 18 > ui1 16 > ui2 15 >
   ui3 13 at >=1280).  Font sizes are fixed px; line heights stay `calc(n * var(--px))`,
   which is the only thing still holding the vertical grid. */
:root{
  --px:3px;
  --ash0:#121110; --ash1:#1C1A18; --ash2:#2E2B28; --ash3:#4A4541;
  --dim:#8E8880; --bone:#EDE9E7;
  --teal:#10C4BE; --teal2:#0B7E7A;
  --ember1:#FFC14A; --ember2:#F27B2A; --ember3:#B23A18;
  --iron:#5C5852; --iron2:#88827A;
  /* R13 orb palette: the four one-shot launcher embers.  White is --bone, so only
     three hues are added. */
  --orb-b:#7EA6D8; --orb-g:#7FA653; --orb-r:#D96A4A;
  --w:calc(400 * var(--px));
  --body:-apple-system,"Apple SD Gothic Neo",Pretendard,"Noto Sans KR","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Noto Sans Mono CJK KR",monospace;
}
@media (max-width:1279px){ :root{ --px:2px; --w:calc(360 * var(--px)); } }
@media (max-width:767px){ :root{ --w:calc(100% - 32px); } }

*{box-sizing:border-box}
html{background:var(--ash0);scroll-behavior:auto}
body{margin:0;background:var(--ash0);color:var(--bone);font-family:var(--body);
  font-size:18px;line-height:calc(10 * var(--px));
  word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
@media (max-width:1279px){ body{font-size:17px;line-height:calc(13 * var(--px))} }
@media (max-width:767px){ body{font-size:16px;line-height:calc(13 * var(--px))} }
/* Background: two giant meshing gear silhouettes on a viewport-fixed canvas under
   every plate (engine §3). html keeps the ash0 ground; body goes transparent only
   once the engine has made the canvas (html.bg), so the no-JS page is unchanged. */
html.bg body{background:transparent}
.bgc{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:var(--px) solid var(--teal);outline-offset:var(--px)}
svg.px{display:block;shape-rendering:crispEdges}
svg.sheet{position:absolute;width:0;height:0;overflow:hidden}
img,.px-img{image-rendering:pixelated}

/* r10 §1.5: the pixel-glyph swap is gone with the faces.  `.sr` still carries the two
   backtick characters of an inline identifier, so the rendered text node sequence stays
   byte-identical to the manuscript line (see `rich()`). */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:calc(-400 * var(--px));top:0;
  font:400 15px/calc(10 * var(--px)) var(--body);color:var(--teal)}
.skip:focus{left:calc(8 * var(--px));top:calc(8 * var(--px));background:var(--ash1);
  padding:calc(2 * var(--px)) calc(4 * var(--px));z-index:9}

/* container: left margin snapped down to a whole cell (spec §2.2) */
.wrap{width:var(--w);margin:0 auto}
@supports (margin-left: round(down, 1px, 1px)){
  .wrap{margin:0 0 0 round(down, calc((100% - var(--w)) / 2), var(--px))}
}

/* ---------------------------------------------------------------- header */
/* The desktop header uses a two-row grid so the tagline sits below the brand while
   navigation and language controls stay vertically centred.  Narrow layouts stack
   brand/language, tagline, and navigation without shrinking any label off the grid. */
.top{display:grid;grid-template-columns:max-content 1fr max-content;
  grid-template-areas:"brand nav lang" "tag nav lang";
  align-items:center;column-gap:calc(8 * var(--px));row-gap:0;
  padding:calc(6 * var(--px)) 0;border-bottom:var(--px) solid var(--ash2)}
.brand{grid-area:brand;display:flex;align-items:flex-end;gap:calc(4 * var(--px));text-decoration:none;
  color:var(--bone);font:600 25px/calc(14 * var(--px)) var(--body)}
.brand svg{width:calc(20 * var(--px));height:calc(7 * var(--px));display:block;
  transform:translateY(calc(-4 * var(--px)))}
/* The tagline forms the second line of the brand lockup and remains visible at every
   breakpoint.  Its shorter line box preserves the cell grid without overpowering the
   enlarged wordmark and navigation labels. */
.tag{grid-area:tag;padding:0;justify-self:center;
  font:400 14px/calc(7 * var(--px)) var(--body);color:var(--dim);overflow-wrap:normal;text-decoration:none;
  transform:translateY(calc(-1 * var(--px)))}
.tag:hover{color:var(--bone)}
@media (max-width:1279px){
  .top{grid-template-columns:max-content 1fr auto;
    grid-template-areas:"brand . lang" "tag . ." "nav nav nav"}
  .tag{display:block}
  .top .nav{margin-left:0;justify-self:start}
  .top .lang{justify-self:end}
}
.nav{grid-area:nav;margin-left:auto;display:flex;flex:0 0 auto;flex-wrap:wrap;
  gap:calc(6 * var(--px));
  font:400 16px/calc(10 * var(--px)) var(--body)}
/* the global `overflow-wrap:anywhere` is for long code identifiers; without this it
   splits "AI Harn/ess" in the seven-item nav (r10 §4.8) */
.nav a{flex:0 0 auto;color:var(--dim);text-decoration:none;
  padding:calc(1 * var(--px)) 0;overflow-wrap:normal}
.nav a:hover,.nav a[aria-current]{color:var(--bone)}
/* r10 §1.3 #2b: with one face for everything, the current page needs a second channel
   besides colour */
.nav a[aria-current]{font-weight:600}
/* Navigation and language controls retain the compact UI measure while the brand
   lockup carries the larger display scale above the tagline. */
/* Mobile-only toggle injected by rk.js: on phones the seven-item nav collapses
   behind a button named after the current page, next to the language flag.  Hidden
   everywhere else, and never rendered at all without JS (the button is not in the
   static HTML), so the no-JS page keeps the always-visible nav. */
.navtoggle{display:none}
.lang{grid-area:lang;flex:0 0 auto;padding:calc(1 * var(--px)) 0;
  font:400 16px/calc(10 * var(--px)) var(--body);color:var(--dim)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
  color:var(--dim);text-decoration:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:22px;line-height:1}
.lang a:hover{color:var(--teal)}

/* ---------------------------------------------------------------- stage
   R13 flight system: no wire, no rail actor, no fog.  The page starts bright;
   flying embers colour the text blocks they pass, and the launcher pads sit
   above everything so they stay clickable.  All three kinds of element are
   injected by the engine — this file only styles them. */
.stage{position:relative;padding-bottom:calc(48 * var(--px))}
/* text paint (R13 §4): an ember colours a text block it passes in its own orb
   hue; a later ember's colour overwrites an earlier one's.  id+class beats the
   body rules, and links keep their own teal underneath it. */
#main .pc.c0{color:var(--orb-b)}
#main .pc.c1{color:var(--orb-g)}
#main .pc.c2{color:var(--orb-r)}
#main .pc.c3{color:var(--bone)}
/* The flying orbs share one DPI-aware viewport-windowed canvas. Circles are drawn
   directly by the renderer, so this surface deliberately keeps normal antialiasing. */
.flight-canvas{position:absolute;z-index:4;left:0;pointer-events:none}

/* Launcher: a dark cradle holding a round orb in the pad's colour — the same
   two-circle silhouette the flight canvas draws. No caption. */
.pad{position:absolute;z-index:5;margin:0;padding:0;cursor:grab;
  width:calc(18 * var(--px));height:calc(18 * var(--px));
  background:var(--ash1);border:var(--px) solid var(--iron);border-radius:50%;
  font:inherit;touch-action:none}
.pad.c0{--pad-orb:var(--orb-b)}
.pad.c1{--pad-orb:var(--orb-g)}
.pad.c2{--pad-orb:var(--orb-r)}
.pad.c3{--pad-orb:var(--bone)}
.pad:active{cursor:grabbing}
.pad .pface{position:absolute;inset:calc(2 * var(--px));pointer-events:none;
  background:var(--ash0);border:0;border-radius:50%}
.pad .porb{position:absolute;left:50%;top:50%;
  width:calc(10 * var(--px));height:calc(10 * var(--px));
  margin:calc(-5 * var(--px)) 0 0 calc(-5 * var(--px));
  border-radius:50%;background:var(--pad-orb)}
.pad .porb::after{content:"";position:absolute;left:50%;top:38%;
  width:calc(2 * var(--px));height:calc(2 * var(--px));
  margin:calc(-1 * var(--px)) 0 0 calc(-1 * var(--px));
  border-radius:50%;background:var(--bone)}
.pad.c3 .porb::after{background:var(--ember1)}
.pad.s1 .porb{transform:translateY(calc(-1 * var(--px)))}
.pad.s2 .porb{transform:translateY(calc(1 * var(--px)))}
.pad:focus-visible{outline-color:var(--bone)}
/* At the cap the cradle stays; the orb leaves. */
.pad.inact{cursor:default;opacity:1}
.pad.inact .pface,.pad.inact:hover .pface,.pad.inact:focus-visible .pface,
.pad.inact:active .pface{background:var(--ash0)}
.pad.inact .porb{visibility:hidden}
.pad.aiming{border-color:var(--iron2)}
.pad.aiming .porb,.pad:active .porb{transform:translateY(calc(1 * var(--px))) scale(.92)}
.pad.fire .porb{visibility:hidden}
/* Thin neutral guide begins at the exact launch centre and ends at the pointer. */
.aim{position:absolute;z-index:5;height:1px;pointer-events:none;background:var(--iron2);
  transform-origin:left center;will-change:transform}
.aim::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;
  border-radius:50%;background:var(--iron2)}

/* ---------------------------------------------------------------- hero */
/* Amendment r8 §1.9 · §3.1: the hero and the five anchors run on the detail-page grid
   (rail / gap / text / gap / note), so one rail x carries every port on the site and
   the wire is a straight line.  The fifth track is left empty on purpose — it holds the
   measure of the text column steady across page kinds. */
.hero{padding:calc(12 * var(--px)) 0 0}
.h1{margin:0;color:var(--bone);letter-spacing:-0.02em;
  font:800 48px/calc(20 * var(--px)) var(--body);
  word-break:keep-all;overflow-wrap:normal}
.h1 .l{display:inline}
/* Wide home: the left column is too narrow for a full sentence, so each cut
   is a line.  768–1279 has the heading full-width and wraps as one line. */
@media (min-width:1280px){
  .hero .h1 .l{display:block}
}
/* r12 §1: the same `ui:tagline` string as the header, as an eyebrow over the H1 of the
   company page.  Caption tier (`ui2-` 14/13/13) in the dim colour so it reads
   under the heading, not against it; nine-cell line + three-cell gap = twelve cells of
   lead-in, and no padding, so `offsetHeight` and the H1's top stay whole cells. */
.eyebrow{color:var(--dim);font:400 14px/calc(9 * var(--px)) var(--body);
  overflow-wrap:normal}
/* `.body p` and `.dt .body p` both set the paragraph rhythm (4 cells above, none
   below); an eyebrow is not a paragraph of the body, it is the first line of the
   heading, so it takes the H1's own top and keeps a three-cell gap under itself.  Both
   selectors are spelled out because `.dt .body p` outweighs a lone `.eyebrow`. */
.body .eyebrow,.dt .body .eyebrow{margin:0 0 calc(3 * var(--px))}
.tag,.eyebrow{color:var(--teal)}
.lead{margin:calc(6 * var(--px)) 0 0;font-size:20px;line-height:calc(11 * var(--px));
  color:var(--bone);max-width:calc(220 * var(--px))}
.index{list-style:none;margin:calc(10 * var(--px)) 0 0;
  padding:calc(4 * var(--px)) 0 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(2 * var(--px)) calc(8 * var(--px));border-top:var(--px) solid var(--ash2);
  font:400 15px/calc(10 * var(--px)) var(--body)}
/* anchor names break at word boundaries only: the global `anywhere` is for long code
   identifiers, and it split "Control technolog/y" in the 768 index (validation M2) */
.index a{display:flex;align-items:center;gap:calc(2 * var(--px));text-decoration:none;
  color:var(--dim);min-height:calc(10 * var(--px));overflow-wrap:normal}
/* an EN anchor name is wider than a third of the column, so the label is allowed a
   second line; the coordinate chip and the dot never shrink into it */
.index a::before{content:attr(data-a);color:var(--teal);flex:0 0 auto;font-weight:600}
.index a > i{flex:0 0 auto}
.index a:hover{color:var(--bone)}
.index i{display:block;width:calc(3 * var(--px));height:calc(3 * var(--px));
  border:var(--px) solid var(--iron2);background:var(--ember2)}
.index i.wait{background:transparent}

/* ---------------------------------------------------------------- Podway hero demo */
.hero-demo{display:contents}
.hcompact{display:none}
.hgraph{min-width:0}
.hbar{height:calc(14 * var(--px));padding:0 calc(4 * var(--px));display:flex;
  align-items:center;justify-content:space-between;border-bottom:var(--px) solid var(--ash2);
  color:var(--iron2);font:600 13px/calc(10 * var(--px)) var(--mono);letter-spacing:.04em}
.hreplay{padding:0;background:none;border:0;color:var(--dim);
  font:500 13px/calc(10 * var(--px)) var(--mono);text-transform:uppercase;cursor:pointer}
.hreplay:hover{color:var(--teal)}
.hreplay:disabled{color:var(--ash3);cursor:default}
html:not(.js) .hreplay{display:none}
.hgraph-fallback{display:none}
.hgraph{position:relative;grid-column:2;grid-row:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:calc(14 * var(--px)) auto calc(10 * var(--px));
  height:auto;align-self:start;border:var(--px) solid var(--ash2)}
.hgraph > .hbar{grid-column:1 / -1;grid-row:1;padding-right:calc(8em + 8 * var(--px));
  list-style:none;cursor:default;pointer-events:none}
.hgraph > .hreplay{position:absolute;top:0;right:calc(4 * var(--px));z-index:2;
  height:calc(14 * var(--px));min-width:7em;display:flex;align-items:center;
  justify-content:flex-end;padding:0}
.hgraph > .hbar::-webkit-details-marker{display:none}
.hgraph > .hbar::marker{content:""}
.hstate{color:var(--teal);text-align:right}
.hcanvas{grid-column:1 / -1;grid-row:2;height:auto;overflow:visible;background:var(--ash0)}
.hcanvas svg{display:block;width:100%;min-width:0;height:auto;overflow:visible}
.hedge,.hrework{fill:none;stroke:var(--ash3);stroke-width:1.5;vector-effect:non-scaling-stroke;
  marker-end:url(#h-arrow)}
.hedge.preview{stroke:#9A6BC6}.hedge.approval{stroke:#D85555}.hedge.issue{stroke:var(--ember2)}
.hrework{stroke-width:2;stroke-dasharray:8 6;marker-end:url(#h-arrow-rework)}
#h-arrow path{fill:var(--ash3)} #h-arrow-rework path{fill:context-stroke}
.hnode rect{fill:var(--ash0);stroke:var(--ash3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hnode text{font-family:var(--mono);pointer-events:none}
.hnum{fill:var(--iron2);font-size:10px}.hnlabel{fill:var(--dim);font-size:12px;font-weight:600}
.hnode.preview rect{stroke:#725091}.hnode.approval rect{stroke:#833737}.hnode.issue rect{stroke:#8B451E}
.hnode.on rect{stroke:var(--teal)}.hnode.on .hnlabel{fill:var(--bone)}
.hnode.active rect{fill:#132322;stroke:var(--teal);stroke-width:2}.hnode.active .hnlabel{fill:var(--teal)}
.hnode.preview.on rect{stroke:#9A6BC6}.hnode.preview.on .hnlabel{fill:#C693EB}
.hnode.preview.active rect{fill:#1a1222;stroke:#9A6BC6;stroke-width:2}
.hnode.preview.active .hnlabel{fill:#C693EB}
.hnode.issue.on rect{stroke:var(--ember2)}.hnode.issue.on .hnlabel{fill:var(--ember2)}
.hnode.issue.active rect{fill:#24160e;stroke:var(--ember2);stroke-width:2}
.hnode.issue.active .hnlabel{fill:var(--ember1)}
.hnode.approval.on rect{stroke:#D85555}.hnode.approval.on .hnlabel{fill:#F17373}
.hnode.approval.active rect{fill:#1f1212;stroke:#D85555;stroke-width:2}
.hnode.approval.active .hnlabel{fill:#F17373}
.hnode.approval.done rect{stroke:#D85555}.hnode.approval.done .hnlabel{fill:#F17373}
.hnode.preview.done rect{stroke:#9A6BC6}.hnode.preview.done .hnlabel{fill:#C693EB}
.hnode.issue.done rect{stroke:var(--ember2)}.hnode.issue.done .hnlabel{fill:var(--ember2)}
/* Invalidated work (rework from policy) keeps ember, even on approval/preview nodes. */
.hnode.invalid.on rect{fill:var(--ash1);stroke:var(--ember2);stroke-dasharray:5 4}
.hnode.invalid.on .hnlabel,.hnode.invalid.on .hnum{fill:var(--ember2)}
.hnode:focus{outline:none}.hnode:focus rect{stroke:var(--bone);stroke-width:2}
html:not(.js) .hnode rect{stroke:var(--teal)}
html:not(.js) .hnode .hnlabel{fill:var(--bone)}
html:not(.js) .hnode.preview rect{stroke:#9A6BC6}
html:not(.js) .hnode.approval rect{stroke:#D85555}
html:not(.js) .hnode.issue rect{stroke:var(--ember2)}
html:not(.js) .hedge{stroke:var(--teal)}
html:not(.js) .hedge.preview{stroke:#9A6BC6}
html:not(.js) .hedge.approval{stroke:#D85555}
html:not(.js) .hedge.issue,html:not(.js) .hrework{stroke:var(--ember2)}
/* Pending procedure stays legible at rest: structure in ash3/iron2, progress in colour
   (surface pass 2026-09-05; the old .12 opacity hid the graph until the demo reached it). */
.hero-demo.hdemo-ready .hnode:not(.on) rect{stroke:var(--ash3);fill:var(--ash0)}
.hero-demo.hdemo-ready .hnode:not(.on) .hnlabel{fill:var(--iron2)}
.hero-demo.hdemo-ready .hnode:not(.on) .hnum{fill:var(--ash3)}
.hero-demo.hdemo-ready .hedge:not(.on),.hero-demo.hdemo-ready .hrework:not(.on){stroke:var(--ash3)}
.hero-demo.hdemo-ready .hpreview:not(.on){fill:var(--ash3)}
.hedge.on{stroke:var(--teal)}.hedge.preview.on{stroke:#9A6BC6}.hedge.approval.on{stroke:#D85555}
.hedge.issue.on{stroke:var(--ember2)}
.hedge.on.invalid{opacity:.16!important;stroke:var(--ember2);stroke-dasharray:5 4}
.hpreview.invalid{fill:var(--ember2)}
.hrework.on{stroke:var(--ember2);animation:hrework 12s linear infinite}
@keyframes hrework{to{stroke-dashoffset:-140}}
.hpreview{font:600 11px var(--mono);letter-spacing:.04em}
.hattempt-node{display:none;fill:var(--ember2);font:500 10px var(--mono)}
.hpreview{fill:#C693EB}
.hinspect,.hlegend{align-self:center;margin:0;color:var(--dim);
  font:400 12px/calc(7 * var(--px)) var(--body)}
.hinspect{grid-column:1;grid-row:3;padding-left:calc(4 * var(--px))}
.hlegend{grid-column:2;grid-row:3;padding-right:calc(4 * var(--px));font-family:var(--mono);text-align:right}
@media (prefers-reduced-motion:reduce){
  .hrework.on{animation:none}
}

/* ---------------------------------------------------------------- flight status
   A viewport-fixed instrument for the live flight state. Its top edge is also the
   simulation's lower wall, so embers reflect from the bar instead of drawing over it. */
body.has-flight-status{padding-bottom:calc(14 * var(--px))}
.flight-status{position:fixed;z-index:10;left:0;right:0;bottom:0;
  height:calc(14 * var(--px));border-top:var(--px) solid var(--ash3);
  background:var(--ash1);pointer-events:none;visibility:hidden}
/* The instrument shows only while embers fly; hidden, it keeps its box so the
   playfield's lower wall does not move (surface pass 2026-09-05). */
body.flight-live .flight-status{visibility:visible}
.fsinner{width:var(--w);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  gap:calc(6 * var(--px));white-space:nowrap;overflow:hidden;
  font:600 12px/calc(8 * var(--px)) var(--mono);color:var(--dim)}
@supports (margin-left:round(down,1px,1px)){
  .fsinner{margin-left:round(down,calc((100% - var(--w)) / 2),var(--px))}
}
.fsrow{display:flex;align-items:center;justify-content:center;gap:calc(3 * var(--px));min-width:0}
.fsrow + .fsrow{padding-left:calc(6 * var(--px));border-left:var(--px) solid var(--ash3)}
.fshead{color:var(--iron2);letter-spacing:.04em}
.fshead output{color:var(--bone)}
.fsitem{display:inline-flex;align-items:center;gap:var(--px)}
.fswatch{width:calc(2 * var(--px));height:calc(2 * var(--px));background:currentColor;
  border-radius:50%}
.fsitem.c0{color:var(--orb-b)}.fsitem.c1{color:var(--orb-g)}
.fsitem.c2{color:var(--orb-r)}.fsitem.c3{color:var(--bone)}
.fsitem output{display:inline-block;color:currentColor}
.fsitem output[data-fs="ember"]{width:3ch}
.fsitem output[data-fs="text"]{width:7ch}
.fsclear{flex:none;padding:var(--px) calc(2 * var(--px));border:var(--px) solid var(--iron2);
  background:var(--ash0);color:var(--bone);font:600 11px/calc(6 * var(--px)) var(--mono);
  pointer-events:auto;cursor:pointer}
.fsclear:hover{border-color:var(--bone)}
.fsclear:focus-visible{outline:var(--px) solid var(--bone);outline-offset:var(--px)}
@media (max-width:1279px){
  .hedge{marker-end:url(#h-arrow-responsive)}
  .hrework{marker-end:url(#h-arrow-rework-responsive)}
  #h-arrow-responsive path{fill:context-stroke}
  #h-arrow-rework-responsive path{fill:context-stroke}
  .hattempt-node{display:block}
  body.has-flight-status{padding-bottom:calc(28 * var(--px))}
  .flight-status{height:calc(28 * var(--px))}
  .fsinner{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr 1fr;gap:0;font-size:12px}
  .fsrow{grid-column:1;height:calc(14 * var(--px));gap:calc(3 * var(--px));overflow:hidden}
  .fsrow + .fsrow{grid-column:1 / -1;padding-left:0;border-left:0;
    border-top:var(--px) solid var(--ash3)}
  .fsclear{grid-column:2;grid-row:1;margin:0 var(--px)}
}
@media (max-width:767px){
  .fsinner{font-size:10px}
  .fsrow{gap:var(--px)}
  .fswatch{width:var(--px);height:var(--px)}
}

/* ---------------------------------------------------------------- anchors
   R13: the grid keeps its five tracks — the first is now the empty flight gutter
   the left launcher pads inherit, the text measure is unchanged. */
.anchor{position:relative;z-index:2;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) calc(228 * var(--px)) minmax(0,1fr)}
.hero{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,5fr);
  grid-template-rows:auto;gap:0;align-items:start}
.hero-left{grid-column:1;grid-row:1;padding-right:calc(8 * var(--px));min-width:0}
.hero-left .lead{max-width:none}
.hero-links{display:flex;flex-wrap:wrap;gap:0 calc(6 * var(--px))}
.hero-links .more{margin-top:calc(4 * var(--px))}
.anchor{margin-top:calc(40 * var(--px))}
.anchor > .head{grid-column:2;grid-row:1}
.anchor > .body{grid-column:2;grid-row:2}

.brz{position:relative;width:calc(16 * var(--px));height:calc(24 * var(--px))}
.brz svg{width:100%;height:100%}
.brz-art{display:block;shape-rendering:geometricPrecision;overflow:visible}
.brz-art .module{fill:var(--iron2)}
.brz-art .face{fill:var(--iron)}
.brz-art .well{fill:var(--ash0)}
.brz-art .charge{display:none;fill:var(--ember2);transform-box:fill-box;
  transform-origin:center bottom}
.brz.lit .charge{display:inline}
/* A lit receiver takes its section's dominant text colour (rk.js updateBrzInk); the
   no-JS and reduced-motion pages keep the ember default. */
.brz.lit.k0 .charge{fill:var(--orb-b)}
.brz.lit.k1 .charge{fill:var(--orb-g)}
.brz.lit.k2 .charge{fill:var(--orb-r)}
.brz.lit.k3 .charge{fill:var(--bone)}
.brz.lit.ig0 .charge{transform:scaleY(.14)}
.brz.lit.ig1 .charge{transform:scaleY(.34)}
.brz.lit.ig2 .charge{transform:scaleY(.64)}
.brz.lit.ig3 .charge{transform:scaleY(.88)}
/* R13: a brazier hangs as a direct child of its section, at the bottom of the section
   just right of the body column (surface pass: 4 cells past the column's right edge,
   no longer the container corner); declaration rows carry their own placement below. */
.sec > .brz,.anchor > .brz{position:absolute;left:calc(50% + 118 * var(--px));
  bottom:calc(4 * var(--px))}
/* With JS the receiver window stays dark until an orb passes; no-JS renders it lit (the
   class in the static HTML is the lit one) */
html.js .brz:not(.lit) .charge{display:none}

/* Amendment r8 §4.1: the sentences of the site — H1~H4 and the declarations — are set
   in the body face; the readouts, chips, keys and buttons stay in the pixel faces.
   Every line height is a whole number of cells at both --px steps. */
.head h2{margin:0;color:var(--dim);letter-spacing:-0.01em;
  font:800 28px/calc(12 * var(--px)) var(--body);overflow-wrap:normal;
  padding-bottom:calc(3 * var(--px));
  border-bottom:calc(2 * var(--px)) solid var(--ember3)}
.anchor.lit .head h2{color:var(--bone)}
.body p{margin:calc(4 * var(--px)) 0 0}
.more{display:block;width:fit-content;height:calc(11 * var(--px));
  margin-top:calc(5 * var(--px));text-decoration:none;
  font:400 15px/calc(10 * var(--px)) var(--body);color:var(--teal);
  border-bottom:var(--px) solid var(--teal2)}
.more:hover{border-color:var(--teal)}
.sub{margin:calc(5 * var(--px)) 0 0;border-top:var(--px) solid var(--ash2)}
.sub dt{padding:calc(3 * var(--px)) 0 0;
  font:600 15px/calc(12 * var(--px)) var(--body);color:var(--teal)}
.sub dd{margin:0;padding:0 0 calc(3 * var(--px));border-bottom:var(--px) solid var(--ash2)}
.chain{margin:calc(5 * var(--px)) 0 0;padding:0;list-style:none;display:flex;
  flex-wrap:wrap;gap:calc(2 * var(--px));
  font:400 14px/calc(8 * var(--px)) var(--body)}
.chain li{height:calc(12 * var(--px));padding:var(--px) calc(2 * var(--px));
  border:var(--px) solid var(--ash3);color:var(--dim)}
.anchor.lit .chain li,.sec.lit .chain li{border-color:var(--ember2);color:var(--ember1)}
/* R13 obstacle plinths read as objects. Hero panels already own their surface and
   border styles, so data-ob gives them collision without adding a second frame. */
[data-ob]:not(.hero-demo):not(.hgraph):not(.hcompact){background:var(--ash1);border:var(--px) solid var(--ash2);
  padding:calc(2 * var(--px))}
.repos{margin:calc(3 * var(--px)) 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:0 calc(6 * var(--px))}
.repos li{padding:calc(2 * var(--px)) 0;border-bottom:var(--px) solid var(--ash2);
  font:400 15px/calc(10 * var(--px)) var(--body)}
.repos li a{color:var(--bone);text-decoration:none;font-weight:500}
.repos li a::after{content:" \2192";color:var(--iron2)}
.repos li a:hover{color:var(--teal)}
.repos.wide{grid-template-columns:1fr}
.decl{margin:calc(4 * var(--px)) 0 0;color:var(--bone);
  font:700 24px/calc(13 * var(--px)) var(--body);overflow-wrap:normal}
.mail{display:block;width:fit-content;margin-top:calc(4 * var(--px));
  text-decoration:none;
  padding:calc(2 * var(--px)) calc(4 * var(--px));height:calc(16 * var(--px));
  font:600 16px/calc(12 * var(--px)) var(--body);
  color:var(--ash0);background:var(--ember1)}
.mail:hover{background:var(--ember2)}

.foot{padding:calc(6 * var(--px)) 0 calc(8 * var(--px));
  border-top:var(--px) solid var(--ash2);display:flex;flex-wrap:wrap;
  gap:calc(2 * var(--px)) calc(6 * var(--px));
  font:400 14px/calc(10 * var(--px)) var(--body);color:var(--dim)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--teal)}

/* JS on: an unlit chain stays cold (the receiver rule lives with .brz above) */
.js .anchor:not(.lit) .chain li,.js .sec:not(.lit) .chain li{
  border-color:var(--ash3);color:var(--dim)}

/* --------------------------------------------- r10 §1.3: responsive type at <=1279
   UI labels step down with the body while the brand remains intentionally larger than
   the navigation so the wordmark balances the symbol at narrow widths. */
@media (max-width:1279px){
  .skip{font-size:14px}
  .brand{font-size:21px}
  .nav{font-size:14px}
  .lang{font-size:14px}
  .eyebrow{font-size:13px}
  .index{font-size:14px}
  .more{font-size:14px}
  .sub dt{font-size:14px}
  .chain{font-size:13px}
  .repos li{font-size:14px}
  .mail{font-size:15px}
  .foot{font-size:13px}
  .hbar,.hreplay{font-size:12px}
}
/* ---------------------------------------------------------------- 768–1279 */
@media (min-width:768px) and (max-width:1279px){
  .anchor{grid-template-columns:minmax(0,1fr) minmax(0,calc(270 * var(--px))) minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
    row-gap:calc(8 * var(--px))}
  .hero-left{grid-column:1;grid-row:1;max-width:none;padding-right:0}
  .h1{font:800 36px/calc(22 * var(--px)) var(--body)}
  .head h2{font:800 24px/calc(15 * var(--px)) var(--body)}
  .decl{font:700 20px/calc(15 * var(--px)) var(--body)}
  .lead{font-size:19px;line-height:calc(14 * var(--px));max-width:none}
  /* an EN anchor name does not fit a third of the 768 container without breaking a
     word, so the index runs two columns here (validation M2) */
  .index{grid-template-columns:1fr 1fr}
  .hgraph{grid-column:1;grid-row:2;height:auto;
    grid-template-rows:calc(14 * var(--px)) auto auto}
  .hgraph > .hbar{pointer-events:none}
  .hcanvas{overflow:visible}
  .hcanvas svg{min-width:0;height:auto}
  .hlegend{display:none}
}

/* ---------------------------------------------------------------- 390 cut */
@media (max-width:767px){
  .top{grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand navtoggle lang" "tag tag tag" "nav nav nav";
    column-gap:calc(4 * var(--px));row-gap:calc(2 * var(--px))}
  .brand{grid-area:brand;min-width:0}
  .brand svg{width:calc(16 * var(--px));height:calc(6 * var(--px))}
  .tag{grid-area:tag;justify-self:start;transform:none}
  .lang{grid-area:lang;justify-self:end}
  /* r10 §4.8: seven items, two of them ten characters long — the row needs the two
     cells the gap gives back */
  .nav{order:3;margin-left:0;width:100%;gap:calc(4 * var(--px));
    justify-content:flex-start;font-size:13px}
  /* with JS on, the row collapses behind a toggle named after the current page
     (r10 §4.8 still governs the no-JS fallback row) */
  html.js .navtoggle{display:flex;align-items:center;gap:calc(2 * var(--px));
    grid-area:navtoggle;justify-self:end;align-self:center;
    min-height:40px;margin-left:auto;padding:calc(1 * var(--px)) calc(3 * var(--px));
    background:none;border:var(--px) solid var(--ash2);border-radius:0;
    color:var(--bone);font:400 13px/calc(8 * var(--px)) var(--body);cursor:pointer}
  html.js .navtoggle .nt-ind{color:var(--teal)}
  html.js .navtoggle:focus-visible{outline:var(--px) solid var(--teal);
    outline-offset:calc(1 * var(--px))}
  html.js .top .nav{display:none}
  html.js .top.open .nav{display:flex;flex-direction:column;gap:0}
  html.js .top.open .nav a{padding:calc(3 * var(--px)) 0;
    min-height:40px;display:flex;align-items:center;border-top:var(--px) solid var(--ash2)}
  @media (max-width:359px){
    .top{grid-template-areas:"brand brand brand" "tag tag tag" ". navtoggle lang" "nav nav nav"}
  }
  /* same 20-cell entry gap the detail pages get from .sec/.phead margin-top (:830),
     so the header-to-body rhythm is identical on every page of this cut */
  .hero{padding:calc(20 * var(--px)) 0 0}
  .anchor{grid-template-columns:minmax(0,1fr)}
  .anchor > .head,.anchor > .body{grid-column:1}
  .anchor > .head,.anchor > .body,.sec > .body{
    padding-left:calc(22 * var(--px))}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto;
    gap:calc(6 * var(--px)) 0}
  .hero-left{grid-column:1;grid-row:1;max-width:none;margin-left:0;padding-right:0}
  .h1{font:800 30px/calc(20 * var(--px)) var(--body)}
  .h1 .l{display:block}
  .head h2{font:800 22px/calc(15 * var(--px)) var(--body)}
  .decl{font:700 19px/calc(15 * var(--px)) var(--body)}
  .lead{font-size:16px;line-height:calc(13 * var(--px));max-width:none}
  .index{grid-template-columns:1fr 1fr;margin-top:calc(8 * var(--px))}
  .anchor{margin-top:calc(28 * var(--px))}
  .repos{grid-template-columns:1fr}
  .hgraph{display:none}
  .hcompact{display:block;grid-column:1;grid-row:2;margin:0;
    padding:calc(4 * var(--px));border:var(--px) solid var(--ash2);background:var(--ash0)}
  .hcompact svg{display:block;width:100%;height:auto}
  .hcompact .fcap{margin:calc(3 * var(--px)) 0 0;color:var(--dim);
    font:400 14px/calc(9 * var(--px)) var(--body)}
}

@media (max-width:1279px){
  html:not(.js) .hcanvas > svg{display:none}
  html:not(.js) .hgraph-fallback{display:block;margin:0;padding:calc(4 * var(--px))}
  html:not(.js) .hgraph-fallback p{margin:0 0 calc(3 * var(--px));padding-bottom:calc(3 * var(--px));
    border-bottom:var(--px) solid var(--ash2);color:var(--teal);font:600 12px/calc(8 * var(--px)) var(--mono)}
  html:not(.js) .hgraph-fallback-nodes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:calc(2 * var(--px));margin:0;padding:0;list-style:none}
  html:not(.js) .hgraph-fallback [data-node]{grid-column:1;min-height:calc(18 * var(--px));
    padding:calc(3 * var(--px));border:var(--px) solid var(--teal);color:var(--bone);
    font:600 12px/calc(8 * var(--px)) var(--mono)}
  html:not(.js) .hgraph-fallback [data-node="issue"]{grid-column:2;grid-row:18}
  html:not(.js) .hgraph-fallback [data-node="ask"]{grid-column:2;grid-row:19}
  html:not(.js) .hgraph-fallback span{display:block;color:var(--iron2);font-size:10px}
}

/* ================================================================ detail pages
   Spec §6.2–§6.7.  Column split re-cut from 96/8/240/8/48 to 96/8/228/8/60 so the
   right flight gutter has enough room without clipping (see BUILD_NOTES). */
.dt{display:block}
.sec,.phead{position:relative;z-index:2;display:grid;align-items:start;
  margin-top:calc(24 * var(--px));
  grid-template-columns:minmax(0,1fr) calc(228 * var(--px)) minmax(0,1fr)}
.phead{margin-top:calc(12 * var(--px))}
/* R13: the rail track is now the empty flight gutter inherited by the left
   launcher pads. */
.sec > .body,.phead > .body{grid-column:2;grid-row:1;min-width:0}
/* headings: page label (H1) → manuscript L1 (h2) → L2 (h3) → L3 (h4) */
.dt .h1{margin:0;max-width:calc(228 * var(--px))}
.dt .lead{margin:calc(6 * var(--px)) 0 0;max-width:none}
/* second lead paragraph (products, §6): body size, dim, same measure as the lead */
.dt .lead.sub2{margin-top:calc(5 * var(--px));font-size:18px;
  line-height:calc(10 * var(--px));color:var(--dim)}
.dt .body h2{margin:0;color:var(--bone);letter-spacing:-0.01em;
  font:800 28px/calc(12 * var(--px)) var(--body);overflow-wrap:normal;
  padding-bottom:calc(3 * var(--px));
  border-bottom:calc(2 * var(--px)) solid var(--ember3)}
.dt .body h3{margin:calc(10 * var(--px)) 0 0;color:var(--bone);letter-spacing:-0.01em;
  padding-top:calc(6 * var(--px));border-top:var(--px) solid var(--ash2);
  font:700 22px/calc(11 * var(--px)) var(--body);overflow-wrap:normal}
.dt .body h4{margin:calc(8 * var(--px)) 0 0;color:var(--bone);position:relative;
  padding-left:calc(7 * var(--px));
  font:700 19px/calc(10 * var(--px)) var(--body);overflow-wrap:normal}
.dt .body h4::before{content:"";position:absolute;left:0;top:calc(4 * var(--px));
  width:calc(3 * var(--px));height:calc(3 * var(--px));background:var(--iron2)}
.sec.lit .body h4::before{background:var(--ember2)}
.dt .body > h2:first-child,.dt .body > h3:first-child{margin-top:0}
.dt .body p{margin:calc(4 * var(--px)) 0 0}
.bul{margin:calc(4 * var(--px)) 0 0;padding:0;list-style:none}
.bul li{margin-top:calc(2 * var(--px));padding-left:calc(6 * var(--px));
  position:relative;font-size:16px;line-height:calc(8 * var(--px))}
.bul li::before{content:"";position:absolute;left:0;top:calc(3 * var(--px));
  width:calc(2 * var(--px));height:calc(2 * var(--px));background:var(--iron2)}
/* r10 §1.3 #21: with the command blocks gone (§4.4) the inline identifier is the only
   code surface left on the site, so it has to be the one that says "type this".  0.94em
   offsets the larger x-height of a system mono.
   `line-height:0` is load-bearing, not cosmetic: an inline box in a second face has its
   own ascent and descent, and its leaded box then sticks out of the block's strut — a
   24-cell bullet measured 25px and every section below it left the grid (measured, all
   four widths).  At zero the box cannot reach past the strut, and the strut is the
   block's own `calc(n * var(--px))`.  The glyphs still paint: inline overflow is not
   clipped. */
.tick{background:var(--ash1);padding:0 var(--px);color:var(--bone);
  font-family:var(--mono);font-size:0.94em;font-weight:500;line-height:0}
.code{margin:calc(4 * var(--px)) 0 0;padding:calc(3 * var(--px)) calc(4 * var(--px));
  background:var(--ash1);border-left:calc(2 * var(--px)) solid var(--ash3);
  overflow-x:auto;color:var(--bone);
  font:400 15px/calc(8 * var(--px)) var(--mono)}
/* an install command is longer than the text column; it wraps rather than clipping */
.code code{font:inherit;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere}

/* tables (company §6.6) */
.tbl{width:100%;border-collapse:collapse;margin:calc(5 * var(--px)) 0 0;
  border-top:var(--px) solid var(--ash2);table-layout:fixed}
.tbl th{text-align:left;color:var(--dim);vertical-align:top;
  padding:calc(2 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)) 0;
  border-bottom:var(--px) solid var(--ash2);
  font:600 14px/calc(10 * var(--px)) var(--body)}
.tbl td{padding:calc(3 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px)) 0;
  font-size:16px;line-height:calc(8 * var(--px));vertical-align:top;
  border-bottom:var(--px) solid var(--ash2)}
.tbl th:first-child,.tbl td:first-child{width:calc(44 * var(--px));position:relative}
.tbl td:first-child{color:var(--dim)}
/* client-project period: start and end on their own lines (founder 2026-09-06) */
.tbl td.period{white-space:nowrap}
/* appendix glossary (vision.077): its term column holds one 18-character identifier,
   which a 44-cell fixed column can only fit by breaking mid-token — the one wrap this
   site never makes.  Auto layout plus a normal wrap rule lets the term column claim
   its own longest token and leaves the rest of the row to the meaning. */
.gloss .tbl{table-layout:auto}
.gloss .tbl th:first-child,.gloss .tbl td:first-child{width:auto;overflow-wrap:normal;
  padding-right:calc(6 * var(--px))}

/* approval buttons used on detail-page gates */
.gbtn{height:calc(14 * var(--px));padding:0 calc(4 * var(--px));cursor:pointer;
  background:var(--ash1);border:var(--px) solid var(--iron2);color:var(--dim);
  font:600 15px/calc(12 * var(--px)) var(--body)}
.gbtn[disabled]{cursor:default;color:var(--iron2);border-color:var(--ash3)}
.gbtn.armed{background:var(--ember1);border-color:var(--ember1);color:var(--ash0)}
.gbtn[hidden]{display:none}
/* amendment r9 §4.2: the three aquarium editions are one row inside the aquarium
   section instead of three sections of their own.  Body face at the bullet size, the
   label dim, the separators iron — a row of links, not a list. */
.eds{display:flex;flex-wrap:wrap;margin:calc(4 * var(--px)) 0 0;
  gap:0 calc(3 * var(--px));font-size:15px;line-height:calc(8 * var(--px))}
.eds .lb{color:var(--dim)}
.eds a{color:var(--bone);text-decoration:none}
.eds a:hover{color:var(--teal)}
.eds i{font-style:normal;color:var(--iron2)}

/* nine declarations (§6.5): the principles are plain full-width rows; their
   explanatory sections carry the page's braziers. */
.decls9{list-style:none;margin:calc(6 * var(--px)) 0 0;padding:0}
.decls9 li{position:relative;padding:calc(4 * var(--px)) 0;
  border-bottom:var(--px) solid var(--ash2)}
/* r8c p4: the number sits in an 11-cell gutter of its own — 8 cells of marker and a
   3-cell gap — so every line of a wrapped declaration hangs under the first word
   instead of running back under the number.  The marker is placed absolutely, the way
   `.leg li::before` is, so the readout face cannot lift the line box off the grid. */
.decls9 .decl{position:relative;margin:0;color:var(--dim);
  padding-left:calc(11 * var(--px))}
.decls9 .decl::before{content:attr(data-n);position:absolute;left:0;top:0;
  min-width:calc(8 * var(--px));
  font-family:var(--mono);font-size:20px;font-weight:700;
  line-height:inherit;color:var(--iron2)}

/* explanatory diagram (amendment r8 §6): the raster carries shapes and numerals, the
   words are HTML — a caption and a numbered legend, both from registered ui-strings.
   The frame is a drawing frame, not a card: one cell of ash2, no shadow, no corners. */
.fig{margin:calc(6 * var(--px)) 0 0;padding:calc(4 * var(--px));
  border:var(--px) solid var(--ash2);background:var(--ash1);
  width:100%}
.fig img{margin:0}
/* visual-refresh: explanatory diagrams are inline SVG (build: svg_fig). The drawing is
   648 CSS px wide at every cut (216 cells at --px:3, 324 at --px:2) so its labels never
   scale; narrower frames scroll it horizontally like the hero board. */
.fig.dgf{overflow-x:auto}
.dg{display:block;width:648px;height:auto;max-width:none}
.dg text{font-family:var(--mono)}
/* The company page shows the wide logo as a bare centred figure: no plate, no caption.
   The image keeps a cell-multiple height so the frame stays on the grid. */
.fig.logo{display:flex;justify-content:center;align-items:center;
  margin:calc(12 * var(--px)) 0 calc(12 * var(--px));padding:0;background:none;border:0}
.fig.logo img{display:block;height:calc(16 * var(--px));width:auto;margin:0;image-rendering:auto}
.fcap{margin:calc(3 * var(--px)) 0 0;color:var(--bone);
  font:400 15px/calc(8 * var(--px)) var(--body)}
.leg{list-style:none;margin:calc(2 * var(--px)) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--px) calc(6 * var(--px));
  color:var(--dim);font:400 14px/calc(10 * var(--px)) var(--body)}
/* the marker repeats the numeral in the image, in the same ember and at the same size
   the raster draws it (>=9 art px at scale 3).  The row is a 10-cell line box so the
   readout face lands on one of its integer sizes and the marker sits in its own row;
   absolute placement keeps a tall glyph from lifting the line box off the grid. */
.leg li{position:relative;min-height:calc(10 * var(--px));
  padding-left:calc(12 * var(--px))}
.leg li::before{content:attr(data-n);position:absolute;left:0;top:0;
  font:700 20px/calc(10 * var(--px)) var(--mono);color:var(--ember1)}
/* r8c fig: a diagram no wider than half the body column (D7 288, D8 168 against 684)
   left most of the frame empty with the legend stacked under it.  From 1280 up such a
   figure is two columns — raster left, legend beside it — under a full-width caption.
   Every track is a whole number of cells, and the row is as tall as the raster. */
@media (min-width:1280px){
  .fig.side{display:grid;grid-template-columns:max-content minmax(0,1fr);
    column-gap:calc(8 * var(--px));row-gap:calc(3 * var(--px))}
  .fig.side > .fcap{grid-column:1 / -1;grid-row:1;margin:0}
  .fig.side > img{grid-column:1;grid-row:2}
  .fig.side > .leg{grid-column:2;grid-row:2;margin:0;align-self:start;
    grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1279px){ .fcap{line-height:calc(9 * var(--px))} }
/* r8c m1: on the 390 cut the frame's side padding drops to three cells so the widest
   diagram (152 art px at scale 2 = 304) fits the 320-cell body column exactly. */
@media (max-width:767px){
  .fig{padding:calc(4 * var(--px)) calc(3 * var(--px))}
  .leg{grid-template-columns:minmax(0,1fr)}
  .px-img.wide{--s:1}
}

/* raster placements (§13) */
.px-img{--s:3;display:block;image-rendering:pixelated;
  width:calc(var(--aw) * var(--s) * 1px);height:calc(var(--ah) * var(--s) * 1px)}
.px-img.s6{--s:6}
/* r8c m1: a raster wider than the frame's content box on the 768 cut (420 CSS px)
   pierced the border at scale 3, so it drops its step of scale from 1279 down. */
@media (max-width:1279px){ .px-img.xwide{--s:2} }
@media (max-width:359px){ .px-img.xwide{--s:1} }
.scene{margin:calc(6 * var(--px)) 0 0;padding:0}
/* aperture scene: rect data at one art px per cell, so it scales with the grid and
   keeps its contrast in place of the raster that read as a bare rule (§4) */
.apert{width:calc(152 * var(--px));height:calc(44 * var(--px))}
/* contact form (§6.7, BRIEF §3.2) */
.direct{display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(4 * var(--px)) calc(6 * var(--px));margin-top:calc(6 * var(--px));
  font:400 15px/calc(10 * var(--px)) var(--body)}
.direct a{color:var(--dim);text-decoration:none}
.direct a:hover{color:var(--teal)}
.direct .mail{margin-top:0}
.form{margin-top:calc(8 * var(--px))}
.fs{margin:0;padding:0;border:0}
.fs legend{padding:0;color:var(--dim);
  font:500 14px/calc(10 * var(--px)) var(--body)}
/* r10 §1.3 #29: a choice in a form is content, not chrome — it keeps the body size */
.rd,.cs{display:flex;align-items:center;gap:calc(3 * var(--px));
  height:calc(12 * var(--px));cursor:pointer;line-height:calc(10 * var(--px))}
.cs{height:calc(14 * var(--px));margin-top:calc(4 * var(--px))}
.rd input,.cs input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:calc(5 * var(--px));height:calc(5 * var(--px));background:var(--ash0);
  border:var(--px) solid var(--iron2)}
.rd input:checked,.cs input:checked{background:var(--ember2);border-color:var(--ember1)}
.field{margin-top:calc(4 * var(--px))}
.field label{display:block;height:calc(10 * var(--px));color:var(--dim);
  font:500 14px/calc(10 * var(--px)) var(--body)}
.field .req{font-style:normal;color:var(--ember2)}
.field input,.field textarea{display:block;width:100%;height:calc(14 * var(--px));
  background:var(--ash1);border:var(--px) solid var(--ash3);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:calc(10 * var(--px));
  padding:0 calc(3 * var(--px));border-radius:0}
.field textarea{height:calc(90 * var(--px));resize:vertical;
  padding:calc(2 * var(--px)) calc(3 * var(--px))}
.field input:focus,.field textarea:focus{border-color:var(--teal2)}
.lim{margin:calc(3 * var(--px)) 0 0;color:var(--dim);
  font:400 14px/calc(10 * var(--px)) var(--body)}
.lim .mono{font-family:var(--mono);font-weight:500;color:var(--iron2)}
.fnote{margin:calc(3 * var(--px)) 0 0;font-size:15px;
  line-height:calc(8 * var(--px));color:var(--dim)}
.btn{display:block;margin-top:calc(6 * var(--px));height:calc(16 * var(--px));
  padding:0 calc(6 * var(--px));cursor:pointer;border:0;
  background:var(--ember1);color:var(--ash0);
  font:600 16px/calc(12 * var(--px)) var(--body)}
.btn:hover{background:var(--ember2)}
.status{margin:calc(4 * var(--px)) 0 0;min-height:calc(10 * var(--px));
  color:var(--dim);font:500 15px/calc(10 * var(--px)) var(--body)}
.status.on{color:var(--ember1)}
.fallback{margin-top:calc(4 * var(--px))}
.fallback[hidden]{display:none}
.mlink[hidden]{display:none}

/* --------------------------------------------- r10 §1.3: one step down at <=1279 */
@media (max-width:1279px){
  /* a multi-line block at 15px with a 36px leading read as double-spaced */
  .code{font-size:14px;line-height:calc(9 * var(--px))}
  .tbl th{font-size:13px}
  .gbtn{font-size:14px}
  .decls9 .decl::before,.leg li::before{font-size:16px}
  .direct{font-size:14px}
  .fs legend,.field label,.lim{font-size:13px}
  .btn{font-size:15px}
  .status{font-size:14px}
}

/* ---------------------------------------------------------------- 768–1279 */
@media (min-width:768px) and (max-width:1279px){
  .sec,.phead{grid-template-columns:minmax(0,1fr) minmax(0,calc(270 * var(--px))) minmax(0,1fr)}
  .sec > .brz,.anchor > .brz{left:calc(50% + 139 * var(--px))}
  .dt .h1{max-width:calc(270 * var(--px))}
  .dt .lead.sub2{font-size:17px;line-height:calc(13 * var(--px))}
  .dt .body h2{font:800 24px/calc(15 * var(--px)) var(--body)}
  .dt .body h3{font:700 20px/calc(14 * var(--px)) var(--body)}
  .dt .body h4{font:700 18px/calc(13 * var(--px)) var(--body)}
}

/* ---------------------------------------------------------------- 390 cut */
@media (max-width:767px){
  .sec,.phead{margin-top:calc(20 * var(--px));
    grid-template-columns:minmax(0,1fr)}
  .sec > .body{grid-column:1;grid-row:2}
  /* The page head remains in the body column while detail sections stack. */
  .phead > .body{grid-column:1;grid-row:1}
  .dt .h1{max-width:none}
  .dt .lead.sub2{font-size:16px;line-height:calc(13 * var(--px))}
  .dt .body h2{font:800 22px/calc(15 * var(--px)) var(--body)}
  .dt .body h3{font:700 19px/calc(13 * var(--px)) var(--body)}
  .dt .body h4{font:700 17px/calc(13 * var(--px)) var(--body)}
  .px-img.wide{--s:2}
  /* On the stacked cut the full lit raster gets its own row after the copy.  Keeping
     it in normal grid flow protects paragraphs, repository links, and form status
     text without narrowing the mobile reading measure. */
  .sec > .brz,.anchor > .brz{position:relative;left:auto;right:auto;bottom:auto;
    grid-column:1;grid-row:3;justify-self:end;margin-top:calc(4 * var(--px))}
  .tbl th:first-child,.tbl td:first-child{width:calc(34 * var(--px))}
  /* the client-project period keeps "2026.08–" whole: 40 cells (founder 2026-09-06) */
  .tbl.client th:first-child,.tbl.client td:first-child{width:calc(40 * var(--px))}
  .field textarea{height:calc(80 * var(--px))}
}
@media (max-width:359px){
  .fig > .px-img.wide{--s:1}
  .fig > .px-img:not(.wide){--s:2}
}

/* label row: the required marker and the character counter sit beside the label but
   outside it, so each block element still holds exactly one registered string */
.lrow{display:flex;align-items:baseline;gap:calc(3 * var(--px));
  height:calc(10 * var(--px))}
.lrow .cnt{margin-left:auto}
.lrow .req,.lrow .cnt{font-style:normal;
  font:600 13px/calc(10 * var(--px)) var(--body);color:var(--ember2)}
.lrow .cnt{font:500 13px/calc(10 * var(--px)) var(--mono);color:var(--iron2)}
.lim{margin:0}

/* ---------------------------------------------------------------- 404 board (§8.2)
   No header, no HUD, no machine: the broken-wire raster, the code, both messages and
   the two home links.  Every box is a whole number of cells so the board stays on the
   grid at any width, and the fixed heights keep CLS at 0 while the faces load. */
.nfp{display:flex;min-height:100vh;align-items:center}
.nf{padding:calc(24 * var(--px)) 0}
.nfart{display:flex;align-items:center;gap:calc(8 * var(--px));
  height:calc(24 * var(--px))}
.nfimg{--s:3}
.nfcode{margin:0;height:calc(20 * var(--px));color:var(--ember1);
  font:700 40px/calc(20 * var(--px)) var(--mono)}
.nfm{margin:calc(8 * var(--px)) 0 0;max-width:calc(240 * var(--px))}
.nfm[lang="en"]{color:var(--dim)}
.nfl{display:flex;gap:calc(12 * var(--px));margin-top:calc(4 * var(--px))}
@media (max-width:1279px){
  .lrow .req,.lrow .cnt{font-size:12px}
  .nfcode{font-size:28px}
}
@media (max-width:767px){
  .nf{padding:calc(16 * var(--px)) 0}
  .nfm{max-width:none}
}