/* IISPIG.COM v1.0 "PIGLET" / direction A: MAINFRAME
   A one-person 2001 studio console. One accent (ice), no radius, no transitions,
   1px hard edges, clip-path corner cuts (8px, top-right + bottom-left, everywhere).
   Every font below is self-hosted. */

@font-face { font-family: "Michroma"; src: url("fonts/michroma-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DSEG7 Classic"; src: url("fonts/DSEG7Classic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DSEG7 Classic"; src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink:    #182239;  /* page */
  --stage:  #1b2540;  /* console plate */
  --panel:  #253048;
  --bar:    #3b4964;  /* title bars, inner rules */
  --bar-hi: #56668a;  /* 1px top highlight on bars */
  --hi:     #34415e;  /* panel top/left edge */
  --lo:     #0f1627;  /* panel bottom/right edge */
  --well:   #0d1424;  /* inset readouts */
  --hair:   #627188;  /* hairlines only, never text */
  --dim:    #97a3b8;  /* secondary text, >= 5:1 on panel */
  --text:   #cfd8e2;
  --ice:    #94efff;  /* the one lit colour */
  --red:    #ff2600;  /* NEW only, always on --well */
  --cut:    8px;      /* the one corner-cut size */

  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --f-wide: "Michroma", var(--f-cjk);
  --f-cond: "Barlow Condensed", var(--f-cjk);
  --f-px: "Silkscreen", monospace;
  --f-seg: "DSEG7 Classic", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; transition: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, ol, ul, dl, dd, figure, table { margin: 0; padding: 0; }
h1 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }

html, body {
  background-color: var(--ink);
  /* 8px dot field */
  background-image: radial-gradient(circle at 0.5px 0.5px, rgba(98, 113, 136, .42) 0.6px, transparent 0.7px);
  background-size: 8px 8px;
}
body {
  display: flow-root;   /* the stage's 40px margins stay inside body, so a page that fits never scrolls */
  min-height: 100vh;
  color: var(--text);
  font: 400 13px/1.6 var(--f-cjk);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ice); text-decoration: none; }
a:not(.skiplink):active { position: relative; top: 1px; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 1px; }
button, select { font: inherit; color: inherit; border-radius: 0; }

/* Hover = instant invert. Only on devices that really hover, so a tap never leaves a stuck inverted state. */
@media (hover: hover) {
  a:hover { background: var(--text); color: var(--ink); }
  .brand:hover { background: none; }
}

/* ---------- type roles ---------- */
.px {                          /* Silkscreen: 8px only (or 16px) */
  font-family: var(--f-px);
  font-size: 8px;
  line-height: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}
.zh { font-family: var(--f-cjk); font-size: 12px; }
.en { font-family: var(--f-wide); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.dimpx { color: var(--dim); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Placeholder: the single treatment for anything not written yet. */
.ph { color: var(--dim); font-family: var(--f-cjk); }
.ph::before { content: "[\00a0"; }
.ph::after  { content: "\00a0]"; }
.grid .ph, .spec .ph, .kv .ph { white-space: nowrap; }   /* a bracketed token never breaks inside its brackets */
.nw { white-space: nowrap; }                                /* keeps a Chinese word together where a line wraps */

.stripe { background: repeating-linear-gradient(135deg, var(--bar) 0 2px, transparent 2px 6px); }

.skiplink { position: absolute; left: 8px; top: -60px; z-index: 60; padding: 8px 12px; background: var(--ice); color: var(--ink); font-size: 12px; }
.skiplink:focus { top: 8px; }

/* ---------- stage ---------- */
.stage {
  position: relative;
  width: min(960px, 100% - 32px);
  margin: 40px auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--stage);
  border: 1px solid var(--bar);
  box-shadow: inset 0 1px 0 #44526f;
}
@media (min-width: 1040px) {
  /* frame hairlines run past the plate, like crop marks */
  .stage::before, .stage::after { content: ""; position: absolute; pointer-events: none; }
  .stage::before { left: -33px; right: -33px; top: -1px; bottom: -1px; border-block: 1px solid var(--bar); }
  .stage::after  { top: -33px; bottom: -33px; left: -1px; right: -1px; border-inline: 1px solid var(--bar); }
}

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px; }
.brand-h { flex: none; margin: 0; line-height: 0; }
/* The PNG carries 17px of transparent margin; pull the box left so the glyphs sit on the 10px content line. */
.brand { position: relative; display: block; width: 240px; height: 48px; margin-left: -17px; }
.brand img { display: block; width: 240px; height: 48px; }
.brand-fb { display: none; }
.brand.wm-missing { box-shadow: inset 0 0 0 1px var(--bar); }
.brand.wm-missing img { display: none; }
.brand.wm-missing .brand-fb {
  display: flex; position: absolute; inset: 0; align-items: center; padding-left: 14px;
  font: 400 20px/1 var(--f-wide); letter-spacing: .22em; color: var(--text);
}
.sys { padding-left: 12px; border-left: 1px solid var(--bar); }
.sys-ver { font: 700 16px/16px var(--f-cond); letter-spacing: .05em; color: var(--text); }
.sys-code { color: var(--ice); }
.sys-build { margin-top: 7px; color: var(--dim); }
.ctl { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* the same tick strip that ends every panel title, carrying the system line across to the controls */
.top-fill { flex: 1; min-width: 0; height: 6px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--bar-hi) 0 1px, transparent 1px 3px); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 9px;
  border: 0; cursor: pointer;
  background: #2c3852; color: var(--text);
  box-shadow: inset 1px 1px 0 #4e5d7c, inset -1px -1px 0 var(--lo);
}
.btn .en { margin-right: -.15em; }   /* cancel Michroma's trailing letter-space so labels sit centred */
.btn:active { transform: translateY(1px); box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 #4e5d7c; }
.btn[hidden] { display: none; }
.led { width: 6px; height: 6px; background: #3b4964; box-shadow: inset 0 0 0 1px var(--lo); }
.audio[aria-pressed="true"] .led { background: var(--ice); }
.audio[aria-pressed="true"] .audio-state { color: var(--ice); }
.audio-state { min-width: 18px; color: var(--dim); }

.ver { display: inline-flex; align-items: center; gap: 6px; }
.ver .zh { color: var(--dim); }
.ver-sel {
  appearance: none; -webkit-appearance: none;
  height: 24px; padding: 0 24px 0 8px; border: 0; cursor: pointer;
  font: 700 14px/1 var(--f-cond); letter-spacing: .05em;
  color: var(--ice);
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%2394efff'/%3E%3C/svg%3E") no-repeat right 8px center;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}
.ver-sel option { background: var(--panel); color: var(--text); }
.ver-link { font-size: 12px; line-height: 24px; padding: 0 6px; box-shadow: inset 0 0 0 1px var(--bar); }
/* The select needs main.js to do anything; the plain link is the fallback without it. */
html:not(.js) .ver { display: none; }
html.js .ver-link { display: none; }

@media (hover: hover) {
  .btn:hover { background: var(--text); color: var(--ink); box-shadow: inset 0 0 0 1px var(--text); }
  .btn:hover:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 #4e5d7c; }   /* pressed: inverted fill, bevels swapped */
  .audio:hover .audio-state { color: inherit; }
  .ver-sel:hover {
    color: var(--ink);
    background-color: var(--text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23182239'/%3E%3C/svg%3E");
  }
  .ver-sel:hover, .ver-link:hover, .more:hover { box-shadow: inset 0 0 0 1px var(--text); }
}

/* ---------- tab strip ---------- */
.tabs { position: relative; display: flex; align-items: stretch; height: 24px; background: var(--well); box-shadow: inset 0 0 0 1px var(--bar); }
.tabs-lead { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; color: var(--ice); border-right: 1px solid var(--bar); }
.tabs ul { display: flex; }
.tabs li { border-right: 1px solid var(--bar); }
.tabs a { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; color: var(--text); white-space: nowrap; }
.tabs a .zh { line-height: 1; }
.tabs a .en { line-height: 1; padding-top: 1px; margin-right: -.15em; }
.tabs a[aria-current="true"] { background: var(--ice); color: var(--ink); }
.tabs a:active { top: 1px; }
/* the strip may scroll on narrow screens: draw the ring inside the tab so the scroller cannot clip it */
.tabs a:focus-visible { outline-offset: -3px; }
.tabs a[aria-current="true"]:focus-visible { outline-color: var(--ink); }
.tabs-fill { flex: 1; margin: 7px 8px 7px 10px; }
@media (hover: hover) {
  .tabs a:hover { background: var(--text); color: var(--ink); box-shadow: inset 0 0 0 1px var(--text); }
}

/* ---------- deck ---------- */
.deck {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 220px;
  grid-template-rows: minmax(404px, auto) minmax(152px, auto);
  grid-template-areas: "sub vp tx" "eq ar ar";
  gap: 8px;
}
.p-sub { grid-area: sub; }
.viewport { grid-area: vp; display: flex; flex-direction: column; min-height: 0; outline: none; }
.viewport > .view { flex: 1; }
/* Desktop: the console is one fixed frame, so a #view link never scrolls it. A 100vh scroll margin
   pushes the fragment target's scroll position below 0, which the browser clamps to the top. */
@media (min-width: 761px) { .viewport > .view { scroll-margin-top: 100vh; } }
.p-tx { grid-area: tx; }
.p-eq { grid-area: eq; }
.p-ar { grid-area: ar; }

/* ---------- HUD panel ---------- */
.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--panel);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* the two diagonal edges left by the corner cuts */
.panel::before, .panel::after { content: ""; position: absolute; z-index: 2; width: var(--cut); height: var(--cut); pointer-events: none; }
.panel::before { top: 0; right: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--bar-hi) calc(50% - 1px) 50%, transparent 50%); }
.panel::after  { bottom: 0; left: 0; background: linear-gradient(to top right, transparent 50%, var(--lo) 50% calc(50% + 1px), transparent calc(50% + 1px)); }
.panel.is-min { flex: none; }
@media (min-width: 761px) { .deck > .panel.is-min { align-self: start; } }   /* grid items: keep the width, drop the height */

.pbar {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 8px;
  min-height: 20px; padding: 0 10px;
  background: var(--bar);
  box-shadow: inset 0 1px 0 var(--bar-hi), inset 0 -1px 0 var(--lo), inset 1px 0 0 var(--bar-hi), inset -1px 0 0 var(--lo);
}
/* Order of giving way when a bar is short: the title's tick strip first, then the system code.
   The real heading keeps at least two CJK characters, even under a 12px minimum font size. */
.pcode { flex-shrink: 1; min-width: 0; overflow: hidden; color: var(--text); white-space: nowrap; }
@supports (overflow-x: clip) { .pcode { overflow: visible; overflow-x: clip; } }   /* trim the width only, never glyph tops */
.pcode::before { content: ">>\00a0"; color: var(--ice); }
.pbar h2, .pbar .ptl { flex: 1; min-width: calc(2em + 9px); overflow: hidden; display: flex; align-items: center; padding-left: 8px; border-left: 1px solid var(--hair); font: 400 13px/14px var(--f-cjk); color: var(--text); white-space: nowrap; }
/* tick strip after the title; content-box keeps a clean 12px gap after the last glyph */
.pbar h2::after, .pbar .ptl::after { content: ""; flex: 0 1 72px; height: 6px; margin: 0 2px 0 auto; padding-left: 12px; background: repeating-linear-gradient(90deg, var(--bar-hi) 0 1px, transparent 1px 3px) content-box; }
.pno { color: var(--text); }
/* The 200-220px side panels have no room for a full strip; drop it there rather than leave a stub. */
@media (min-width: 761px) {
  .p-sub .pbar h2::after, .p-tx .pbar h2::after, .p-eq .pbar h2::after { display: none; }
}

/* The centre viewport outranks the side widgets: taller bar, 16px pixel code. */
.view > .pbar { min-height: 28px; }
.view > .pbar .pcode { font-size: 16px; line-height: 16px; }

/* Collapse control. The button itself is transparent; the visible well + glyph live in ::after,
   so phones can grow the hit area without the drawing changing or slipping behind the bar. */
.pmin { position: relative; flex: none; width: 13px; height: 13px; padding: 0; border: 0; background: none; cursor: pointer; }
.pmin::after {
  content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px;
  background-color: var(--well);
  background-image: linear-gradient(var(--text), var(--text));
  background-size: 7px 1px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.pmin[aria-expanded="false"]::after {
  background-image: linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));
  background-size: 7px 1px, 1px 7px;
}
.pmin:active { transform: translateY(1px); }
.pmin[hidden] { display: none; }
/* touch tablets: same drawing, a bigger invisible hit area (the panel's clip-path trims it at the edge) */
@media (pointer: coarse) and (min-width: 761px) {
  .pmin::before { content: ""; position: absolute; left: -10px; right: -10px; top: -8px; bottom: -8px; }
}
@media (hover: hover) {
  .pmin:hover::after { background-color: var(--text); background-image: linear-gradient(var(--ink), var(--ink)); box-shadow: inset 0 0 0 1px var(--text); }
  .pmin[aria-expanded="false"]:hover::after { background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); }
}

.pbody {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 10px;
  overflow: auto;
  scrollbar-width: thin; scrollbar-color: var(--ice) var(--well);
}
.pbody::-webkit-scrollbar { width: 6px; }
.pbody::-webkit-scrollbar-track { background: var(--well); }
.pbody::-webkit-scrollbar-thumb { background: var(--ice); }
.pbody[hidden] { display: none !important; }

/* ---------- DSEG7 readouts ---------- */
.seg { display: inline-grid; justify-items: end; font-family: var(--f-seg); font-weight: 400; line-height: 1; color: var(--ice); white-space: pre; }
.seg > * { grid-area: 1 / 1; }
.seg .ghost { opacity: .1; }
.seg-lg {
  display: grid; justify-items: center; font-weight: 700; font-size: 38px;
  padding: 11px 10px 10px;
  background: var(--well);
  box-shadow: inset 1px 1px 0 #060a13, inset -1px -1px 0 var(--hi);
}
/* every small readout sits in the same sunken window: 15px digits, 20px tall, fits a 30px row */
.seg-sm {
  font-size: 15px; padding: 3px 5px 2px; vertical-align: middle;
  background: var(--well);
  box-shadow: inset 1px 1px 0 #060a13, inset -1px -1px 0 var(--hi);
}
.seg-u { color: var(--ice); }   /* unit after a readout: Silkscreen 8px, lit like the digits */
.colon { animation: blink 1s linear infinite; }
@keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- key / value rows (one rhythm: 30px rows, 1px rules) ---------- */
.kv { margin-top: 10px; }
.kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 8px; min-height: 30px; border-top: 1px solid var(--bar); }
.kv > div:last-child { border-bottom: 1px solid var(--bar); }
.kv dt { flex: none; font-size: 12px; line-height: 16px; color: var(--dim); }
.kv dt .px { margin-left: 3px; color: var(--dim); }
.kv dd { flex: 1 1 auto; font-size: 13px; line-height: 16px; text-align: right; }
/* dates and times of day: white Barlow. Counters and clocks: DSEG7 in a well. Plain ice text: links only. */
.kv dd > time, .kv .sun { font: 700 14px/16px var(--f-cond); letter-spacing: .05em; color: var(--text); }
.sun-s { margin: 0 4px; color: var(--hair); }

/* ---------- SUB.DATA ---------- */
.clock-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.clock-h .zh { color: var(--dim); }
.clock-d { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 4px; margin-top: 7px; color: var(--text); }

.yr { margin-top: 12px; }
.yr-h { display: flex; align-items: baseline; gap: 5px; }
.yr-h .zh { color: var(--dim); }
.yr-h .px { color: var(--dim); }
.yr-h .seg { margin-left: auto; }
.yr-h .seg-u { align-self: flex-start; line-height: 20px; }   /* the unit sits on the 20px well's centre line, like KB under MANIFEST (the well tops the baseline row) */
.segbar { position: relative; height: 14px; margin-top: 8px; padding: 3px; background: var(--well); box-shadow: inset 1px 1px 0 #060a13, inset -1px -1px 0 var(--hi); }
.segbar::before { content: ""; position: absolute; inset: 3px; background: repeating-linear-gradient(90deg, rgba(148, 239, 255, .13) 0 3px, transparent 3px 4px); }
/* Where round() exists, the track holds whole 4px cells only (3px lit + 1px gap) and is centred in the
   well: the last cell is never a sliver and the two inner margins differ by 1px at most.
   --sb-in is the track width, --sb-l its left inset; their 100% is the bar's own width wherever used. */
@supports (width: round(down, 100% - 5px, 4px)) {
  .segbar {
    --sb-in: round(down, 100% - 5px, 4px);
    --sb-l: round(down, (100% - var(--sb-in) + 1px) / 2, 1px);
    padding-inline: var(--sb-l) calc(100% - var(--sb-in) - var(--sb-l));
  }
  .segbar::before { left: var(--sb-l); right: auto; width: var(--sb-in); }
}
.yr-d { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 4px; margin-top: 7px; color: var(--dim); }
.segbar-fill {
  position: relative; display: block; height: 100%;
  width: calc(var(--p, 0) * 100%);
  width: round(down, calc(var(--p, 0) * 100%), 4px);
  background: repeating-linear-gradient(90deg, var(--ice) 0 3px, transparent 3px 4px);
}

/* ---------- FEATURE: an empty, calibrated viewport ----------
   The calibration drawing is hairline-family (--dim / --hair); the only lit thing in the slot is the
   measured readout in .slot-dim, so the eye goes to a real value, not to the frame of an empty box. */
.feat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.slot {
  position: relative;
  flex: 1; min-height: 232px;
  background-color: #111a2d;
  background-image: radial-gradient(circle at 0.5px 0.5px, rgba(98, 113, 136, .55) 0.6px, transparent 0.7px);
  background-size: 8px 8px;
  background-position: 0 0;          /* dot field registers with the 8px ruler ticks */
  box-shadow: inset 0 0 0 1px var(--bar);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.slot::before, .slot::after { content: ""; position: absolute; width: var(--cut); height: var(--cut); }
.slot::before { top: 0; right: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--bar) calc(50% - 1px) 50%, transparent 50%); }
.slot::after  { bottom: 0; left: 0; background: linear-gradient(to top right, transparent 50%, var(--bar) 50% calc(50% + 1px), transparent calc(50% + 1px)); }

/* rulers along the top and left edges: minor tick every 8px, major every 40px; main.js prints the offsets */
.rule { position: absolute; pointer-events: none; }
.rule-x {
  left: 0; right: var(--cut); top: 0; height: 6px;
  background:
    repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 40px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 8px) 0 0 / 100% 3px no-repeat;
}
.rule-y {
  top: 0; bottom: var(--cut); left: 0; width: 6px;
  background:
    repeating-linear-gradient(180deg, var(--dim) 0 1px, transparent 1px 40px) 0 0 / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px 8px) 0 0 / 3px 100% no-repeat;
}
.rule-l { position: absolute; color: var(--dim); }
.rule-l > span { position: absolute; }
.rule-lx { left: 0; right: 0; top: 9px; height: 8px; }
.rule-lx > span { top: 0; margin-left: 3px; }
.rule-ly { top: 0; bottom: 0; left: 9px; width: 24px; }
.rule-ly > span { left: 0; margin-top: 3px; }

.reg { position: absolute; width: 12px; height: 12px; border: 0 solid var(--dim); }
.reg-tl { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
.reg-tr { top: 24px; right: 24px; border-width: 1px 1px 0 0; }
.reg-bl { bottom: 24px; left: 24px; border-width: 0 0 1px 1px; }
.reg-br { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }
.slot-tag { position: absolute; left: 44px; top: 28px; color: var(--dim); }
.slot-stripe { position: absolute; right: 44px; top: 24px; width: 96px; height: 16px; background: repeating-linear-gradient(135deg, var(--hair) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--bar); }
.xhair { position: absolute; left: 50%; top: 50%; width: 41px; height: 41px; margin: -34px 0 0 -20px; }
.xhair::before, .xhair::after { content: ""; position: absolute; }
.xhair::before { left: 0; right: 0; top: 20px; height: 1px; background: linear-gradient(90deg, var(--dim) 0 15px, transparent 15px 26px, var(--dim) 26px); }
.xhair::after  { top: 0; bottom: 0; left: 20px; width: 1px; background: linear-gradient(180deg, var(--dim) 0 15px, transparent 15px 26px, var(--dim) 26px); }
.slot-msg { position: absolute; left: 0; right: 0; top: calc(50% + 16px); text-align: center; font-size: 13px; line-height: 16px; }
.slot-dim { position: absolute; left: 0; right: 0; bottom: 10px; height: 8px; display: flex; justify-content: center; color: var(--ice); }
.slot-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--dim); }
.slot-dim::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-inline: 1px solid var(--dim); }
.slot-dim span { position: relative; z-index: 1; padding: 0 6px; background: #111a2d; }

.feat-cap { flex: none; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.feat-no { font: 700 18px/20px var(--f-cond); letter-spacing: .05em; color: var(--dim); }   /* placeholder number: dim, not lit */
.feat-title { font: 600 14px/20px var(--f-cjk); }
.feat-desc { grid-column: 2; font-size: 13px; line-height: 20px; text-wrap: pretty; }

.spec { flex: none; display: flex; margin-top: 10px; border-top: 1px solid var(--bar); }
/* 28px cells: a 20px DSEG7 well and a 16px text line both fit, so the footer row is one height in every view */
.spec > div { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 14px 0 0; margin-right: 14px; border-right: 1px solid var(--bar); }
.spec > div:last-child { border-right: 0; }
.spec dt { color: var(--dim); }
.spec dd { font-size: 12px; line-height: 16px; }
.spec dd > time { font: 700 14px/16px var(--f-cond); letter-spacing: .05em; color: var(--text); }
/* every centre view closes on the same spec row, pinned to the panel's bottom edge */
.view .spec { margin-top: auto; }
.view .pbody > :nth-last-child(2) { margin-bottom: 10px; }

/* ---------- PROFILE / LOG / LINKS views ---------- */
.view-h { font: 700 18px/20px var(--f-cond); letter-spacing: .12em; color: var(--text); margin-bottom: 8px; }
.kv-rows { margin-top: 0; }
.kv-rows > div { justify-content: flex-start; }
.kv-rows dt { width: 96px; }
.kv-rows dd { text-align: left; }
.kv-rows dd .px { margin-left: 6px; }
.about-txt { margin-top: 14px; font-size: 14px; }

.grid { width: 100%; border-collapse: collapse; table-layout: auto; }
.grid th { padding: 5px 8px 4px; text-align: left; font-weight: 400; white-space: nowrap; background: var(--well); border-bottom: 1px solid var(--hair); }
.grid th .zh { margin-right: 5px; color: var(--dim); }
.grid th .px { color: var(--dim); }
.grid td { padding: 6px 8px 5px; border-bottom: 1px solid var(--bar); font-size: 13px; line-height: 18px; vertical-align: baseline; }
.grid td.px { font-size: 8px; line-height: 8px; }   /* pixel cells stay on the 8px grid */
.grid td time { font: 700 14px/18px var(--f-cond); letter-spacing: .05em; color: var(--text); white-space: nowrap; }
.grid td.vc { font: 700 14px/18px var(--f-cond); letter-spacing: .05em; }
.sub-h { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.sub-h .zh { color: var(--dim); }
.sub-h .px { color: var(--dim); }
.rel > li { display: grid; grid-template-columns: 130px 90px 1fr; align-items: baseline; padding: 6px 8px 5px; border-top: 1px solid var(--bar); }
.rel > li:last-child { border-bottom: 1px solid var(--bar); }
.rel-v { font: 700 14px/18px var(--f-cond); letter-spacing: .05em; }
.rel time { font: 700 14px/18px var(--f-cond); letter-spacing: .05em; color: var(--text); }
.rel-s { display: flex; align-items: baseline; gap: 8px; font-size: 13px; white-space: nowrap; }
.cur { padding: 2px 3px 2px 4px; background: var(--ice); color: var(--ink); }

.lk > li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 7px; border-top: 1px solid var(--bar); font-size: 13px; }
.lk > li:last-child { border-bottom: 1px solid var(--bar); }
.lk-k { flex: none; width: 32px; color: var(--dim); }
/* a path is always Barlow and keeps its real case; inside a link it takes the link's colour */
.lk-u, .path { font: 700 13px/16px var(--f-cond); letter-spacing: .05em; }
.lk-u { margin-left: auto; color: var(--dim); }

/* ---------- TRANSMISSIONS ---------- */
.tx > li { padding: 8px 0 8px; border-top: 1px solid var(--bar); }
.tx > li:first-child { border-top: 0; padding-top: 2px; }
.tx-meta { display: flex; align-items: center; gap: 7px; }
.tx-meta .px { color: var(--dim); }
.tx-meta time { font: 700 14px/16px var(--f-cond); letter-spacing: .05em; color: var(--text); }
.tx-meta .new { margin-left: auto; padding: 3px 3px 3px 4px; color: var(--red); background: var(--well); box-shadow: inset 0 0 0 1px var(--red); }
.tx-meta .new[hidden] { display: none; }
.tx-t { margin-top: 3px; font-size: 13px; line-height: 18px; }
.tx-end { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--bar); color: var(--dim); text-align: center; }

.mf { margin-top: 16px; }
.mf-h { display: flex; align-items: baseline; gap: 5px; padding-bottom: 6px; }
.mf-h .zh, .mf-h .px { color: var(--dim); }
.mf-hu { margin-left: auto; }
.mf-t { width: 100%; border-collapse: collapse; }
.mf-t th, .mf-t td { height: 20px; padding: 0; border-top: 1px solid var(--bar); vertical-align: middle; }
.mf-t tr:last-child > * { border-bottom: 1px solid var(--bar); }
.mf-t th { text-align: left; font-weight: 400; color: var(--dim); }
.mf-t td { text-align: right; font: 700 13px/16px var(--f-cond); letter-spacing: .05em; color: var(--text); }
.mf-total { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.mf-total .zh, .mf-total .px { color: var(--dim); }
.mf-total .seg { margin-left: auto; }
.mf-total .seg-u { color: var(--ice); }

.more { margin-top: auto; display: flex; flex: none; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--bar); }
.p-tx .mf { margin-bottom: 12px; }
.more .zh { color: inherit; }

/* ---------- ARCHIVE / EQUIPMENT ---------- */
.arc .c-no { width: 56px; }
.arc .c-sm { width: 112px; }
.arc .arc-no { color: var(--dim); }
.arc-count { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; }
.arc-count .zh, .arc-count .px { color: var(--dim); }
.p-eq .kv { margin-top: 0; }
.specblock { margin-top: auto; padding-top: 8px; line-height: 12px; color: var(--dim); }

/* ---------- footer ---------- */
.foot { display: flex; align-items: center; gap: 18px; min-height: 30px; padding: 0 10px; border-top: 1px solid var(--bar); }
.foot-c { color: var(--dim); }
.foot-key { font-size: 12px; line-height: 1; color: var(--dim); }
.foot-bv { color: var(--dim); }
.foot-sys { display: none; }
.code39 { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.code39 .px { color: var(--dim); }
.bc-label { display: block; padding: 1px 10px; background: var(--dim); }   /* a label, not a light: --dim keeps it below the readouts */
.barcode { display: block; fill: var(--ink); }
.vert {
  position: absolute; top: 96px; right: -30px;
  writing-mode: vertical-rl; font-size: 12px; line-height: 1; letter-spacing: .5em; color: var(--dim);
}
@media (max-width: 1039px) { .vert { display: none; } }

/* ---------- views: which one is showing ---------- */
.view[hidden] { display: none; }
/* JS off (or main.js failed): the hash picks the view, and WORKS is lit by default */
html:not(.js) .tabs a[href="#works"] { background: var(--ice); color: var(--ink); }
@supports selector(:has(*)) {
  html:not(.js) .viewport:has(> .view:target) > .view:not(:target),
  html:not(.js) .viewport:not(:has(> .view:target)) > .view:not(#works) { display: none; }
  html:not(.js) body:has(.view:target) .tabs a[href="#works"] { background: none; color: var(--text); }
  html:not(.js) body:has(#about:target) .tabs a[href="#about"],
  html:not(.js) body:has(#works:target) .tabs a[href="#works"],
  html:not(.js) body:has(#log:target)   .tabs a[href="#log"],
  html:not(.js) body:has(#links:target) .tabs a[href="#links"] { background: var(--ice); color: var(--ink); }
}

/* ---------- INITSEQ (first visit only; .boot is set by the inline gate) ---------- */
.initseq { display: none; }
.boot .initseq {
  display: flex; position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  animation: is-hide 1ms linear 540ms both;
}
.is-box { width: 300px; outline: 1px solid var(--stage); }
.is-body { padding: 10px; }
.is-lines li { display: flex; justify-content: space-between; padding: 5px 0 4px; border-top: 1px solid var(--bar); visibility: hidden; animation: show 1ms linear both, is-hide 1ms linear 540ms both; }
.is-lines li:nth-child(1) { animation-delay: 90ms, 540ms; }
.is-lines li:nth-child(2) { animation-delay: 190ms, 540ms; }
.is-lines li:nth-child(3) { animation-delay: 290ms, 540ms; border-bottom: 1px solid var(--bar); }
.is-lines span { color: var(--dim); }
.is-lines b { font-weight: 400; color: var(--text); }
.is-skip { margin-top: 10px; }
@keyframes show { to { visibility: visible; } }
@keyframes is-hide { to { visibility: hidden; } }

.boot .stage::before { animation: grow-x 300ms steps(9) both; }
.boot .stage::after  { animation: grow-y 300ms steps(9) both; }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }

.boot .top, .boot .tabs, .boot .foot, .boot .deck > * { visibility: hidden; animation: show 1ms linear both; }
.boot .top  { animation-delay: 520ms; }
.boot .tabs { animation-delay: 550ms; }
.boot .viewport { animation-delay: 580ms; }
.boot .p-sub { animation-delay: 610ms; }
.boot .p-tx  { animation-delay: 640ms; }
.boot .p-ar  { animation-delay: 670ms; }
.boot .p-eq  { animation-delay: 700ms; }
.boot .foot  { animation-delay: 700ms; }
.boot .deck .pbody { visibility: hidden; animation: show 1ms linear 720ms both; }
.boot .tabs a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--ice); transform-origin: left;
  animation: sweep 200ms steps(6) 570ms both;
}
@keyframes sweep { 0% { transform: scaleX(0); opacity: 1; } 75% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .colon { animation: none; }
  .boot .initseq { display: none; }
}

/* ---------- mid widths ---------- */
@media (max-width: 900px) and (min-width: 761px) {
  .deck { grid-template-columns: 190px minmax(0, 1fr) 190px; }
  .sys { display: none; }
  .pno, .pbar h2::after { display: none; }
  .p-sub .kv dt .px, .p-sub .yr-h > .px:not(.seg-u) { display: none; }
  .top-fill { display: none; }
  .feat-desc { text-wrap: balance; }
  .rel > li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .rel-s { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .stage { width: auto; margin: 0; padding: 12px 16px 24px; gap: 12px; background: transparent; border: 0; box-shadow: none; }
  .top { height: auto; gap: 8px; padding: 0; }
  .brand { width: 160px; height: 44px; margin-left: 0; display: flex; align-items: center; }   /* glyphs land on the 28px content line */
  .brand img { width: 160px; height: 32px; }
  .brand.wm-missing .brand-fb { font-size: 14px; padding-left: 10px; }
  .sys, .top-fill, .top .ver, .top .ver-link { display: none; }
  .btn { height: 44px; padding: 0 12px; }
  .ver-sel { height: 44px; font-size: 16px; }   /* 16px: iOS does not zoom on focus */
  .ver-link { line-height: 44px; font-size: 15px; }

  /* tabs: Chinese over an 8px pixel label, four equal cells, so all four fit at 320px+ and the current one is always on screen */
  .tabs { height: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs ul { flex: 1; }
  .tabs li { flex: 1; }
  .tabs a { flex-direction: column; justify-content: center; gap: 5px; padding: 0 6px; }
  .tabs a .zh { font-size: 13px; line-height: 13px; }
  .tabs a .en { font: 400 8px/8px var(--f-px); letter-spacing: 0; margin-right: 0; padding-top: 0; -webkit-font-smoothing: none; }
  .tabs-lead { width: 28px; }
  .tabs-fill { display: none; }
  .boot .tabs a[aria-current="true"]::after { bottom: 0; }

  .deck { display: flex; flex-direction: column; gap: 12px; }
  .viewport > .view { flex: none; }
  .pbody { overflow: visible; padding: 12px; }
  .pbar, .view > .pbar { min-height: 32px; padding: 0 12px; }
  .pno { margin-left: auto; }
  /* 44x32 hit area, flush with the bar; the 15px well sits on the 12px content edge */
  .pmin { width: 44px; height: 32px; margin: 0 -3px 0 -8px; }
  .pmin::after { left: auto; right: 3px; top: 8px; width: 15px; height: 15px; }
  /* the hit area reaches 12px down into the body's padding: 44x44, with nothing drawn outside the bar */
  .pmin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -12px; }
  .pmin:focus-visible { outline-offset: -2px; }

  .feat { flex: none; }
  .slot { flex: none; min-height: 190px; }
  .xhair { margin-top: -30px; }
  .feat-desc { font-size: 15px; line-height: 22px; }
  .feat-title { font-size: 15px; }
  .spec { flex-wrap: wrap; }

  .p-sub .pbody:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .clock { grid-column: 1 / -1; margin-bottom: 8px; }
  .seg-lg { font-size: 44px; }
  .p-sub .kv { display: contents; }
  .p-sub .kv > div { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 0; border-top: 1px solid var(--bar); border-bottom: 0; }
  .p-sub .kv dd { text-align: left; font-size: 15px; line-height: 22px; }
  .yr { grid-column: 1 / -1; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--bar); }
  .kv dd { font-size: 15px; }

  .tx-t { font-size: 15px; line-height: 22px; }
  .p-tx .mf { margin-bottom: 0; }
  .more { height: 44px; margin-top: 12px; }
  .lk > li { min-height: 44px; align-items: center; flex-wrap: wrap; }
  .lk a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .rel > li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .rel-s { grid-column: 1 / -1; }
  .rel-s a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -11px 0; }    /* 44px target, same row rhythm as v1.0; gap stands in for the space flex drops before .path */
  .about-txt { font-size: 15px; }
  .kv-rows dt { width: 84px; }
  .grid th { padding: 5px 6px 4px; }
  .grid td:not(.px) { padding: 8px 6px 7px; font-size: 15px; }
  .grid td.px { padding: 8px 6px 7px; }
  .grid td.vc { font-size: 15px; }
  .grid th .zh + .px { display: none; }
  .arc .c-no { width: 40px; }
  .arc .c-sm { width: auto; }
  .arc .ph, .ver .zh { white-space: nowrap; }

  .foot { flex-wrap: wrap; height: auto; gap: 10px 16px; padding: 12px 0 0; }
  .foot-sys { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--bar); order: -1; }
  .foot-sys > .px { color: var(--dim); line-height: 12px; }   /* may wrap to two lines at 320 */
  .code39 { margin-left: 0; }
  .vert { display: block; position: static; writing-mode: horizontal-tb; letter-spacing: .3em; width: 100%; }
}

/* ---------- forced colours: gradients and box-shadows are dropped, so redraw them with system colours ---------- */
@media (forced-colors: active) {
  .pmin::after, .pmin:hover::after {
    forced-color-adjust: none;
    border: 1px solid ButtonText; box-shadow: none;
    background-color: Canvas;
    background-image: linear-gradient(ButtonText, ButtonText);
  }
  .pmin[aria-expanded="false"]::after, .pmin[aria-expanded="false"]:hover::after {
    background-image: linear-gradient(ButtonText, ButtonText), linear-gradient(ButtonText, ButtonText);
  }
  .tabs a[aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .btn, .ver-sel { border: 1px solid ButtonText; }
}