/* ── Direction 01 · Workbench ────────────────────────────────────────────
   The application's own chrome as the identity: cool graphite, hairlines,
   docked panes, millimetre rulers, a property grid, one signal blue.      */

:root {
  --ink:        #14181d;
  --ink-2:      #4b535d;
  --ink-3:      #5c646e;
  --line:       #ccd2d9;
  --line-2:     #e2e6ea;
  --bg:         #e8ebef;
  --bg-2:       #f1f3f6;
  --panel:      #ffffff;
  --panel-2:    #f6f8fa;
  --deep:       #161a20;
  --deep-2:     #1e242c;
  --deep-line:  #313a45;
  --deep-ink:   #e7ebf0;
  --deep-ink-2: #9aa7b6;
  --accent:     #1550cf;
  --accent-2:   #6f9bff;
  --accent-soft:#dde7ff;
  --warn:       #b0331f;

  --r:      3px;
  --hair:   1px solid var(--line);
  --hair-2: 1px solid var(--line-2);
  --shadow: 0 1px 2px rgba(18,24,32,.05), 0 10px 28px -16px rgba(18,24,32,.35);
  --pane:   0 1px 0 rgba(18,24,32,.03), 0 12px 34px -20px rgba(18,24,32,.45);

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --dockw: 232px;
  --rulerw: 20px;
  --statush: 30px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --maxw: 1320px;
  --glyph-bg: #fff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* A grid or flex child may never claim a minimum wider than its track:
   the code block and its long lines scroll inside themselves instead. */
.hero > *, .libgrid > *, .libnotes > *, .ctl > *, .vf > *, .steps > *,
.split > *, .sec--split > *, .chartgrid > *, .bcgrid > *, .loupe > *,
.code, .code pre, .gen, .snip, .stages, .stages__list { min-width: 0; }


@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* browser surfaces the design still owns */
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--bg-2); }
*::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--bg-2); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 4.4vw, 3.55rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.14; }
h3 { font-size: 1.0625rem; line-height: 1.34; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: 0; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: var(--r);
  font-size: .875rem;
}
.skip:focus { top: 8px; }

.wxr-glyph { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wxr-glyph .fill { fill: currentColor; stroke: none; }

/* ── chrome ───────────────────────────────────────────────────────────── */
.chrome {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--hair);
}
.chrome__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 52px; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.mark { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.02em; }
.mark__sq { width: 15px; height: 15px; background: var(--accent); border-radius: 2px; position: relative; }
.mark__sq::after { content: ""; position: absolute; inset: 4px 4px auto 4px; height: 1.5px; background: #fff; box-shadow: 0 4px 0 rgba(255,255,255,.65); }
.chrome__nav { display: flex; gap: clamp(.75rem, 1.8vw, 1.6rem); margin-right: auto; font-size: .875rem; color: var(--ink-2); }
.chrome__nav a { padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .16s, border-color .16s; }
.chrome__nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 900px) { .chrome__nav { display: none; } }

.lang { display: flex; list-style: none; margin: 0; padding: 0; border: var(--hair); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.lang li + li { border-left: var(--hair); }
.lang a, .lang > li > span {
  display: block; font: 600 .75rem/1 var(--mono); letter-spacing: .04em;
  padding: .42rem .6rem; color: var(--ink-3);
  transition: color .16s, background .16s;
}
.lang a:hover { color: var(--ink); background: var(--panel-2); }
.lang .is-on { background: var(--accent); color: #fff; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
}
@media (max-width: 1080px) { .hero { grid-template-columns: 1fr; } }

.hero__copy { max-width: 40rem; }
.lead { margin-top: 1.35rem; color: var(--ink-2); font-size: 1.125rem; line-height: 1.6; max-width: 34em; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2.15rem; }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } }
.door {
  position: relative; display: grid; gap: .3rem; align-content: start;
  padding: 1.05rem 1.1rem 1.35rem; background: var(--panel); border: var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow); transition: border-color .18s, transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
}
.door:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18,24,32,.07), 0 18px 40px -22px rgba(18,24,32,.5); }
.door__role { font-size: 1.3rem; font-weight: 700; letter-spacing: -.028em; line-height: 1.18; color: var(--ink); }
.door__id { display: flex; align-items: baseline; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.door__name { font-size: .9375rem; font-weight: 600; color: var(--accent); }
.door__kind { font-size: .8125rem; color: var(--ink-3); }
.door__desc { margin-top: .55rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.door__go { width: 20px; height: 20px; position: absolute; right: 1.05rem; bottom: 1.05rem; fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .18s, transform .18s cubic-bezier(.16,1,.3,1); }
.door:hover .door__go { stroke: var(--accent); transform: translateX(3px); }

.os { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: .875rem; color: var(--ink-2); }
.os__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ── docked pane ──────────────────────────────────────────────────────── */
.dock { background: var(--panel); border: var(--hair); border-radius: var(--r); box-shadow: var(--pane); overflow: hidden; }
.dock__bar { display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem; background: var(--panel-2); border-bottom: var(--hair); }
.dock__title { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.dock__meta { margin-left: auto; font: 400 .75rem/1 var(--mono); color: var(--ink-3); }

.canvas { background: var(--bg-2); }
.ruler--h { height: 16px; margin-left: 16px; border-bottom: var(--hair-2);
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 8px),
    linear-gradient(to bottom, transparent 62%, var(--bg-2) 62%);
  background-blend-mode: normal;
}
.ruler--v { width: 16px; flex: none; border-right: var(--hair-2);
  background:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px),
    linear-gradient(to right, transparent 62%, var(--bg-2) 62%);
}
.canvas__body { display: flex; align-items: stretch; }
.bands { flex: 1; min-width: 0; padding: 10px 12px; display: grid; gap: 6px; }

.band {
  --bh: 34px;
  display: flex; align-items: stretch; gap: 0; width: 100%; text-align: left;
  min-height: var(--bh); padding: 0; cursor: pointer;
  background: var(--panel); border: var(--hair-2); border-radius: 2px;
  font: inherit; color: inherit;
  transition: border-color .15s, background .15s;
}
.band:hover { border-color: var(--accent); }
.band.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.band--rh { --bh: 62px; } .band--ph { --bh: 40px; } .band--gh { --bh: 36px; }
.band--dt { --bh: 32px; } .band--gf { --bh: 36px; } .band--rf { --bh: 74px; } .band--pf { --bh: 32px; }

.band__tag {
  flex: none; width: 146px; padding: .4rem .55rem; border-right: var(--hair-2);
  background: var(--panel-2);
  font: 500 .75rem/1.25 var(--mono); letter-spacing: .01em; color: var(--ink-2);
}
.band--dt .band__tag { color: var(--accent); }
.band__stage { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: .4rem .6rem; flex-wrap: wrap; }

.ob { width: var(--w, 20%); height: 9px; background: var(--line-2); border-radius: 1px; position: relative; }
.ob--title { height: 15px; background: var(--ink); opacity: .82; }
.ob--rule { height: 2px; background: var(--ink-3); }
.ob--accent { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.ob--sel { height: 13px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ob--chart { height: 44px; background:
  linear-gradient(to top, var(--line) 0 1px, transparent 1px),
  repeating-linear-gradient(to right, color-mix(in srgb, var(--accent) 26%, transparent) 0 9px, transparent 9px 17px);
  background-size: 100% 100%, 100% 62%; background-position: bottom, bottom; background-repeat: no-repeat;
}
.ob--code { height: 30px; background: repeating-linear-gradient(to right, var(--ink) 0 1.5px, transparent 1.5px 4px); opacity: .8; }
.hnd { position: absolute; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 0 1px var(--accent); }
.hnd--tl { left: -3px; top: -3px; } .hnd--tr { right: -3px; top: -3px; }
.hnd--bl { left: -3px; bottom: -3px; } .hnd--br { right: -3px; bottom: -3px; }

.props { flex: none; width: 214px; border-left: var(--hair); background: var(--panel); }
.props__bar { padding: .45rem .7rem; border-bottom: var(--hair-2); background: var(--panel-2); font: 600 .6875rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.props__list { display: grid; grid-template-columns: 1fr; }
.props__list dt { padding: .34rem .7rem 0; font-size: .6875rem; color: var(--ink-3); letter-spacing: .01em; }
.props__list dd { margin: 0; padding: 0 .7rem .34rem; font-size: .8125rem; border-bottom: var(--hair-2); }
.props__list dd.mono { font-size: .75rem; }
.props__list dd.is-warn { color: var(--warn); font-family: var(--mono); font-size: .6875rem; }
@media (max-width: 620px) { .props { display: none; } }

.statusbar { display: flex; align-items: center; gap: .6rem; padding: .4rem .85rem; border-top: var(--hair); background: var(--panel-2); font-size: .75rem; color: var(--ink-2); }
.statusbar__band { font-weight: 600; }
.statusbar__sep { width: 1px; height: 12px; background: var(--line); flex: none; }
.statusbar .mono, .wsstatus .mono { white-space: nowrap; }
.statusbar__grow { flex: 1; }
.statusbar__hint { color: var(--ink-3); font-size: .6875rem; }
.statusbar--quiet { color: var(--ink-3); }
@media (max-width: 760px) { .statusbar__hint { display: none; } }

/* ── engine band (the dark region) ───────────────────────────────────── */
.engine { background: var(--deep); color: var(--deep-ink); border-block: 1px solid var(--deep-line); }
.engine__in { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.engine h2 { max-width: 22ch; }
.engine p { margin-top: 1.15rem; max-width: 62ch; color: var(--deep-ink-2); font-size: 1.0625rem; }
.engine :focus-visible { outline-color: var(--accent-2); }

.chain { display: flex; align-items: stretch; gap: 0; margin-top: 2.6rem; flex-wrap: wrap; }
.chain__node { display: grid; gap: .2rem; padding: 1rem 1.35rem; border: 1px solid var(--deep-line); background: var(--deep-2); border-radius: var(--r); min-width: 190px; }
.chain__k { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.chain__v { font-size: .8125rem; color: var(--deep-ink-2); }
.chain__node--file { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); background: color-mix(in srgb, var(--accent) 22%, var(--deep-2)); }
.chain__node--file .chain__k { color: #fff; }
.chain__link { display: flex; align-items: center; padding: 0 .6rem; }
.chain__link svg { width: 26px; height: 26px; fill: none; stroke: var(--deep-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .chain { flex-direction: column; align-items: flex-start; }
  .chain__link { padding: .35rem 0 .35rem 1.35rem; }
  .chain__link svg { transform: rotate(90deg); }
}


/* ── the workspace shell ─────────────────────────────────────────────────
   The world is not an illustration in the hero: the page IS the docked
   workspace. A report tree on the left, a millimetre ruler beside it, and a
   status bar that reports where you are, the way the designer's does. */
body { padding-bottom: var(--statush); }

.wsdock {
  position: fixed; left: 0; top: 52px; bottom: var(--statush); width: var(--dockw); z-index: 35;
  background: var(--panel); border-right: var(--hair); display: flex; flex-direction: column;
}
.wsdock__bar {
  flex: none; padding: .5rem .85rem; border-bottom: var(--hair); background: var(--panel-2);
  font: 600 .6875rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.wsdock__list { padding: .35rem 0; overflow-y: auto; }
.wsdock__list a {
  display: block; padding: .36rem .85rem .36rem 1.65rem; position: relative;
  font-size: .875rem; color: var(--ink-2); transition: background .14s, color .14s;
}
.wsdock__list a::before {
  content: ""; position: absolute; left: .9rem; top: 50%; width: 5px; height: 5px;
  border: 1px solid var(--line); transform: translateY(-50%);
}
.wsdock__list a::after {
  content: ""; position: absolute; left: calc(.9rem + 2px); top: 0; bottom: 0; width: 1px;
  background: var(--line-2); z-index: -1;
}
.wsdock__list a:hover { background: var(--panel-2); color: var(--ink); }
.wsdock__list a.is-here { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.wsdock__list a.is-here::before { background: var(--accent); border-color: var(--accent); }

.wsruler {
  position: fixed; left: var(--dockw); top: 52px; bottom: var(--statush); width: var(--rulerw); z-index: 34;
  background-color: var(--bg-2); border-right: var(--hair-2);
  background-image:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--ink-3) 0 1px, transparent 1px 40px);
  background-size: 7px 100%, 12px 100%; background-position: right, right; background-repeat: repeat-y;
}

.wsstatus {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--statush); z-index: 36;
  display: flex; align-items: center; gap: .6rem; padding: 0 .9rem;
  background: var(--panel-2); border-top: var(--hair); font-size: .75rem; color: var(--ink-2);
}
.wsstatus__now { font-weight: 600; }
.wsstatus__sep { width: 1px; height: 12px; background: var(--line); }
.wsstatus__grow { flex: 1; }
.wsstatus__meta { color: var(--ink-3); }

@media (min-width: 1180px) { body { padding-left: calc(var(--dockw) + var(--rulerw)); } }
@media (max-width: 1179px) { .wsdock, .wsruler { display: none; } }

/* panes are separated by a splitter, not by empty space */
.sec, .engine { border-top: 1px solid var(--line); position: relative; }
.sec::before, .engine::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 3px;
  background-image: radial-gradient(circle 1.5px at 4px 1.5px, var(--ink-3) 0 1.5px, transparent 1.5px);
  background-size: 8px 3px; background-repeat: repeat-x; opacity: .55;
}
.sec--tight { border-top: 0; }
.sec--tight::before { display: none; }

/* ── generic section ─────────────────────────────────────────────────── */
.sec { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.sec--tight { padding-top: 0; }
.sec__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sec__note { margin-top: .95rem; color: var(--ink-2); }
.note { margin-top: 1.6rem; max-width: 68ch; color: var(--ink-2); font-size: .9375rem; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--hair); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 1.5rem 1.5rem 1.75rem 0; border-right: var(--hair); }
.step:last-child { border-right: 0; }
@media (max-width: 900px) { .step:nth-child(2n) { border-right: 0; } .step { border-bottom: var(--hair); } }
@media (max-width: 560px) { .step { border-right: 0; } }
.step__n { display: block; color: var(--accent); font-weight: 700; font-size: .75rem; letter-spacing: .08em; }
.step h3 { margin: .55rem 0 .5rem; }
.step p { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; padding-right: .75rem; }

/* split: elements + sheet */
.sec--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 1020px) { .sec--split { grid-template-columns: 1fr; } }

.els { display: grid; gap: 0; border-top: var(--hair-2); }
.els li { display: grid; grid-template-columns: 34px 8.5rem minmax(0, 1fr); align-items: baseline; gap: .5rem; padding: .82rem 0; border-bottom: var(--hair-2); }
.els .wxr-glyph { color: var(--accent); align-self: center; }
.els b { font-size: .9375rem; }
.els span { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 620px) { .els li { grid-template-columns: 30px minmax(0,1fr); } .els span { grid-column: 2; } }

/* print sheet */
.dock--sheet { position: sticky; top: 68px; }
@media (max-width: 1020px) { .dock--sheet { position: static; } }
.sheetwrap { padding: clamp(1rem, 2.4vw, 1.9rem); background: var(--bg-2); display: flex; justify-content: center; }
.sheet {
  width: 100%; max-width: 460px; aspect-ratio: 210 / 297; background: #fff;
  box-shadow: 0 1px 2px rgba(18,24,32,.08), 0 22px 44px -26px rgba(18,24,32,.6);
  padding: 7% 7.5%; display: flex; flex-direction: column; font-size: .75rem; line-height: 1.45;
  container-type: inline-size;
}
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: .35rem; }
.sheet__head b { font-size: 1rem; letter-spacing: -.015em; }
.sheet__head .mono { font-size: .75rem; color: var(--ink-3); }
.sheet__cols { display: grid; grid-template-columns: 1fr 3.2rem 4.2rem; gap: .3rem; padding: .4rem 0 .2rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); border-bottom: var(--hair); }
.sheet__cols span:not(:first-child) { text-align: right; }
.sheet__group { margin-top: .5rem; padding: .2rem .35rem; background: var(--accent-soft); font-weight: 600; font-size: .75rem; }
.sheet__rows { display: grid; grid-template-columns: 1fr 3.2rem 4.2rem; gap: .18rem .3rem; padding: .35rem 0; font-size: .75rem; }
.sheet__rows span:nth-child(3n+2), .sheet__rows span:nth-child(3n) { text-align: right; }
.sheet__total { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: .25rem; font-size: .75rem; font-weight: 700; }
.sheet__art { display: flex; align-items: flex-end; gap: .6rem; margin-top: auto; padding: .8rem 0; }
.sheet__chart { flex: 1; height: auto; }
.sheet__chart .ax { stroke: var(--ink-3); stroke-width: .8; fill: none; }
.sheet__chart .br { fill: var(--accent); opacity: .85; }
.sheet__bc { width: 62px; flex: none; display: block; }
.sheet__grand { display: flex; justify-content: space-between; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: .28rem 0; font-size: .8125rem; font-weight: 700; }
.sheet__foot { display: flex; justify-content: space-between; margin-top: .55rem; padding-top: .3rem; border-top: var(--hair); font-size: .6875rem; color: var(--ink-3); }
.wxr-barcode { display: block; width: 100%; height: auto; fill: var(--ink); }
.wxr-barcode .bc-digits { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); letter-spacing: .06em; }
.wxr-barcode--matrix { fill: var(--ink); }

/* charts */
.chartgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-2); border: var(--hair-2); }
@media (max-width: 900px) { .chartgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .chartgrid { grid-template-columns: repeat(3, 1fr); } }
.chartgrid li { background: var(--panel); padding: 1.15rem .75rem 1rem; display: grid; justify-items: center; gap: .6rem; transition: background .16s; }
.chartgrid li:hover { background: var(--panel-2); }
.chartgrid .wxr-glyph { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.35; }
.chartgrid span { font-size: .75rem; color: var(--ink-2); text-align: center; }

/* barcodes */
.bcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 1px; background: var(--line-2); border: var(--hair-2); }
.bcgrid li { background: var(--panel); padding: 1.15rem 1rem 1rem; display: grid; gap: .75rem; justify-items: center; align-content: space-between; }
.bc { display: block; width: 100%; max-width: 118px; }
.bc--sq { max-width: 62px; }
.bcgrid .mono { color: var(--ink-3); font-size: .6875rem; letter-spacing: .05em; }

/* control */
.ctl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-2); border: var(--hair-2); }
.ctl__item { background: var(--panel); padding: 1.4rem 1.35rem 1.5rem; grid-column: span 2; }
.ctl__item:nth-child(4) { grid-column: span 3; }
.ctl__item:nth-child(5) { grid-column: span 3; }
@media (max-width: 980px) { .ctl { grid-template-columns: 1fr 1fr; } .ctl__item, .ctl__item:nth-child(n) { grid-column: span 1; } }
@media (max-width: 620px) { .ctl { grid-template-columns: 1fr; } }
.ctl__item p { margin-top: .6rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.snip { margin: 1rem 0 0; padding: .75rem .85rem; background: var(--deep); color: var(--deep-ink); border-radius: var(--r); overflow-x: auto; font-size: .75rem; line-height: 1.65; }
.snip code { white-space: pre; }

/* databases */
.dbt { width: 100%; border-collapse: collapse; border-top: var(--hair); }
.dbt th, .dbt td { text-align: left; padding: .95rem .75rem .95rem 0; border-bottom: var(--hair-2); vertical-align: baseline; }
.dbt th { font-weight: 600; font-size: 1rem; width: 15rem; }
.dbt td { color: var(--ink-2); font-size: .9375rem; }
.dbt td.mono { color: var(--ink-3); text-align: right; padding-right: 0; }
@media (max-width: 720px) {
  .dbt, .dbt tbody, .dbt tr, .dbt th, .dbt td { display: block; width: auto; }
  .dbt tr { padding: .9rem 0; border-bottom: var(--hair-2); }
  .dbt th, .dbt td { border: 0; padding: 0; }
  .dbt td.mono { text-align: left; margin-top: .3rem; }
}

/* library */
.libgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 980px) { .libgrid { grid-template-columns: 1fr; } }
.code { margin: 0; background: var(--deep); border-radius: var(--r); overflow: hidden; box-shadow: var(--pane); }
.code pre { margin: 0; padding: 1.4rem 1.5rem; overflow-x: auto; color: var(--deep-ink); font-size: .8125rem; line-height: 1.75; }
.code code { white-space: pre; font-family: var(--mono); }
.code .k { color: #8fb8ff; } .code .kw { color: #d7a4ff; } .code .s { color: #9ad9a6; }
.code figcaption { padding: .6rem 1.5rem .8rem; border-top: 1px solid var(--deep-line); color: var(--deep-ink-2); font-size: .75rem; }

.gen { background: var(--panel); border: var(--hair); border-radius: var(--r); padding: 1.5rem 1.5rem 1.35rem; box-shadow: var(--shadow); }
.gen p { margin-top: .65rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.stages { margin-top: 1.4rem; }
.stages__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.stages__list li { display: grid; gap: .4rem; justify-items: start; font-size: .6875rem; color: var(--ink-3); line-height: 1.25; transition: color .2s; }
.stages__dot { width: 100%; height: 3px; background: var(--line-2); border-radius: 2px; transition: background .25s; }
.stages__list li.is-done { color: var(--ink-2); }
.stages__list li.is-done .stages__dot { background: var(--accent); }
.stages__list li.is-now { color: var(--accent); font-weight: 600; }
.stages__list li.is-now .stages__dot { background: var(--accent); }
@media (max-width: 620px) { .stages__list { grid-template-columns: repeat(3, 1fr); gap: .6rem .35rem; } }
.stages__bar { height: 4px; margin-top: 1rem; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.stages__bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--accent); transition: transform .38s cubic-bezier(.16,1,.3,1); }
.stages__foot { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem; font: 600 .8125rem/1 var(--sans);
  padding: .55rem .9rem; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: var(--r); cursor: pointer; transition: background .16s, border-color .16s;
}
.btn:hover { background: #103fa6; border-color: #103fa6; }
.btn:disabled { background: var(--line-2); border-color: var(--line); color: var(--ink-3); cursor: default; }
.btn .wxr-glyph { width: 15px; height: 15px; stroke-width: 1.7; }
#stages-out { color: var(--ink-3); font-size: .75rem; }

.libnotes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: var(--hair-2); margin-top: .25rem; }
@media (max-width: 720px) { .libnotes { grid-template-columns: 1fr; } }
.libnote { background: var(--panel); padding: 1.35rem 1.35rem 1.45rem; }
.libnote p { margin-top: .55rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }

/* verification */
.vf { border-top: var(--hair); }
.vf__item { display: grid; grid-template-columns: 26px 13rem minmax(0, 1fr); gap: .85rem; align-items: baseline; padding: .95rem 0; border-bottom: var(--hair-2); }
.vf__item .wxr-glyph { color: var(--accent); align-self: center; margin: 0; }
.vf__item p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 720px) { .vf__item { grid-template-columns: 26px minmax(0, 1fr); } .vf__item p { grid-column: 2; margin-top: .35rem; } }

/* platforms */
.pf { border-top: var(--hair); }
.pf__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 12rem; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: var(--hair-2); }
.pf__row b { font-size: 1.125rem; letter-spacing: -.015em; }
.pf__row span { color: var(--ink-2); font-size: .9375rem; }
.pf__row em { font-style: normal; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.pf__row.is-built em { color: var(--accent); }
.pf__row.is-built em::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: .45rem; vertical-align: .1em; }
@media (max-width: 720px) { .pf__row { grid-template-columns: 1fr; gap: .3rem; } .pf__row em { text-align: left; } }

/* status */
.sec--status { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border: 1px dashed var(--line); }
@media (max-width: 720px) { .open { grid-template-columns: 1fr; } }
.open li { background: var(--bg-2); padding: 1.3rem 1.35rem; display: grid; gap: .3rem; }
.open b { font-size: 1rem; }
.open span { color: var(--ink-2); font-size: .9375rem; }
.open em { font-style: normal; color: var(--ink-3); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; margin-top: .35rem; }

/* footer */
.foot { border-top: var(--hair); background: var(--bg-2); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; display: grid; gap: .35rem; }
.foot__name { font-weight: 700; letter-spacing: -.02em; }
.foot__tag { color: var(--ink-2); font-size: .9375rem; }
.foot__note { color: var(--ink-3); font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── server-rendered additions ───────────────────────────────────────────
   The package table, the release line and the footer credit. Availability is
   said in words in the row, never carried by colour alone. */
.visually-hidden {
  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;
}

.rel { margin-top: 1.1rem; color: var(--ink-2); font-size: .75rem; }
.rel b { color: var(--ink); font-weight: 700; }
.rel__sep { margin: 0 .45rem; color: var(--line); }
.hero__act { margin-top: 1.1rem; }

.btn--sm { padding: .42rem .75rem; font-size: .75rem; }
.btn--off {
  background: var(--panel-2); border-color: var(--line); color: var(--ink-3); cursor: default;
}
.btn--off:hover { background: var(--panel-2); border-color: var(--line); }

.pkg__empty {
  margin-bottom: 1.5rem; padding: .85rem 1rem;
  border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--bg-2); color: var(--ink-2); font-size: .9375rem;
}

.pkg { width: 100%; border-collapse: collapse; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pkg__caption {
  text-align: left; padding-bottom: .6rem; border-bottom: 2px solid var(--ink);
  font-size: 1rem; font-weight: 600; letter-spacing: -.015em;
}
.pkg thead th {
  text-align: left; padding: .55rem .75rem .55rem 0; border-bottom: var(--hair);
  font: 500 .6875rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.pkg tbody th, .pkg tbody td {
  text-align: left; padding: .9rem .75rem .9rem 0; border-bottom: var(--hair-2); vertical-align: top;
}
.pkg tbody th { width: 12rem; font-weight: 600; }
.pkg__platform { display: block; font-size: 1rem; letter-spacing: -.015em; }
.pkg__arch { display: block; font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); margin-top: .15rem; }
.pkg__badge {
  display: inline-block; margin-top: .35rem; padding: .1rem .4rem;
  background: var(--accent-soft); color: var(--accent);
  font: 600 .625rem/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.pkg__fmt { width: 5rem; color: var(--ink-2); }
.pkg__file { display: block; color: var(--ink); font-size: .75rem; word-break: break-all; }
.pkg__note { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.pkg__size { width: 6rem; color: var(--ink-2); white-space: nowrap; }
.pkg__get { width: 8rem; text-align: right; padding-right: 0; }
.pkg--void .pkg__platform, .pkg--void .pkg__file { color: var(--ink-3); }
.pkg--match { background: color-mix(in srgb, var(--accent) 4%, transparent); }
@media (max-width: 780px) {
  .pkg thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pkg, .pkg tbody, .pkg tr, .pkg tbody th, .pkg tbody td { display: block; width: auto; }
  .pkg tr { padding: .9rem 0; border-bottom: var(--hair-2); }
  .pkg tbody th, .pkg tbody td { border: 0; padding: 0; }
  .pkg__fmt { display: inline-block; margin-right: .75rem; }
  .pkg__size { display: inline-block; }
  .pkg__note { margin-top: .35rem; }
  .pkg__get { text-align: left; margin-top: .7rem; }
}

.foot__who { margin: .35rem 0 0; color: var(--ink-2); font-size: .875rem; }
.foot__who a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.foot__who a:hover { text-decoration-color: var(--accent); color: var(--accent); }
.foot__who span[aria-hidden] { margin: 0 .4rem; color: var(--line); }