/* IISPIG.COM / MAINFRAME, the English page (its release and edition come from content/site.json)
   A one-person 2001 studio console in mid-grey steel: a hero render on top, short panels below
   (2Advanced v3's order), one warm accent for the human layer only (pig pink: the current tab, the
   one primary action, the owner's name), one window that breaks the frame (//FEATURE).
   No radius, no transitions, 1px hard edges. Hover = instant invert. Everything is self-hosted.

   Text in IISPIG Pixel Latin is set on whole pixels: 12px/15px (14px/15px on phones), no
   synthesised bold (bold = a 1px text-shadow), -webkit-font-smoothing:none, and every box it sits
   in has whole-pixel edges on the 960 desktop stage (fixed px columns), so each font pixel lands on
   one screen pixel. build.mjs replaces the PXL_FACES marker below with its @font-face rules (the
   hashed files in ../fonts/latin/, shared with the Chinese forum). */

/* IISPIG Pixel Latin (written by build.mjs) */
@font-face { font-family: "IISPIG Pixel Latin 10"; src: url("../fonts/latin/pxl10r.2eea4997.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0020-007E,U+00A0,U+00A9,U+00B7,U+2013-2014,U+2026; }
@font-face { font-family: "IISPIG Pixel Latin 12"; src: url("../fonts/latin/pxl12r.7d839af3.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2026,U+2039-203A; }
@font-face { font-family: "IISPIG Pixel Latin 14"; src: url("../fonts/latin/pxl15r-at14.13ce71ce.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2026,U+2039-203A; }
@font-face { font-family: "IISPIG Pixel Latin 16"; src: url("../fonts/latin/pxl16r.43264edb.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2026,U+2039-203A; }
@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-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Ferrite Core DX Black, upper case, figures and a little punctuation only (design/en/ferrite-subset.sh) */
@font-face { font-family: "Ferrite Core DX"; src: url("fonts/ferrite-core-dx-black-subset.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --page:   #1F2A3E;  /* outside the stage */
  --stage:  #2D3851;  /* the console plate */
  --area:   #444F63;  /* text areas (panel bodies) */
  --frame:  #5B6679;  /* panel frames */
  --rule:   #61718B;  /* rules, hairlines */
  --bar-a:  #929DAF;  /* title bar, top */
  --bar-b:  #646F82;  /* title bar, bottom */
  --hi:     #C8D4E6;  /* 1px highlights */
  --cell:   #A5B5CD;  /* nav cells */
  --ink:    #1F2A3E;  /* dark text on light steel */
  --bar-ink: #0B1120; /* title-bar headings: >= 5.8:1 on every bar row under a glyph */
  --text:   #E6ECF4;  /* text on dark */
  --dim:    #C3CDDB;  /* secondary text: 5.1:1 on --area, 4.5:1 on the lighter pixels of its line texture */
  --well:   #131A29;  /* inset readouts */
  --pink:   #FF7EA8;  /* the human layer, <= 3% of the screen */

  --f-px:   "Silkscreen", monospace;                 /* 8px or 16px only */
  --f-wide: "Michroma", Verdana, Geneva, sans-serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-head: "Ferrite Core DX", "Michroma", Verdana, sans-serif;
  --f-seg:  "DSEG7 Classic", monospace;
  --f-body: "IISPIG Pixel Latin 12", Verdana, Geneva, sans-serif;
  /* the 中文 key: WenQuanYi Bitmap Song 12, the Chinese forum's own face (the same file, cached from the
     language gate; build.mjs declares it in the page's <head>, for these two characters only) */
  --f-cjk:  "IISPIG WQY 12", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  /* textures: a 1px "/" line every 4px (panels), a 2px checker halftone (title bars) */
  --tx-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M3 0h1v1H3zM2 1h1v1H2zM1 2h1v1H1zM0 3h1v1H0z' fill='%23fff' fill-opacity='.045'/%3E%3C/svg%3E");
  --tx-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M3 0h1v1H3zM2 1h1v1H2zM1 2h1v1H1zM0 3h1v1H0z' fill='%235B6679'/%3E%3C/svg%3E");
  --tx-dots:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0z' fill='%231F2A3E' fill-opacity='.13'/%3E%3C/svg%3E");
  /* title bars: the dark end stays below the glyph rows of the 12-13px headings, and the halftone is only
     on the bar's empty filler (.pbar::after), never under a heading */
  --bar-grad: linear-gradient(#A9B4C5, var(--bar-a) 55%, #8A95A8 85%, var(--bar-b));
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--page); color: var(--text);
  font: 12px/15px var(--f-body);
  font-synthesis: none; font-kerning: none;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
b, strong, th { font-weight: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; }
a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:not(.skiplink):active, .btn:active { position: relative; top: 1px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* a view's heading takes the focus when its tab is used from the keyboard (main.js): no ring on the title bar */
.pbar h2[tabindex="-1"]:focus { outline: 0; }
button { font: inherit; color: inherit; border-radius: 0; margin: 0; }
time { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }

/* Pixel type: Silkscreen at 8px (labels) and the Pixel Latin body face are never smoothed. */
.px { font: 8px/8px var(--f-px); letter-spacing: 0; text-transform: uppercase; -webkit-font-smoothing: none; }
/* Vector display faces are smoothed. */
.wide, .tabs a, .btn, .hero-h, .hero-line, .pbar h2, .f-h, .seg, .hs-label, .dl-name { -webkit-font-smoothing: antialiased; }
.dim { color: var(--dim); }

@media (hover: hover) {
  a:hover { background: var(--text); color: var(--ink); text-decoration: none; }
  .btn:hover, .tabs a:hover { background: var(--text); color: var(--ink); }
}

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

/* LEDs */
.led { display: inline-block; flex: none; width: 6px; height: 6px; background: #2A3346; box-shadow: inset 1px 1px 0 #11182A, 0 0 0 1px #6E7A8E; }
.audio[aria-pressed="true"] .led { background: var(--text); box-shadow: 0 0 0 1px #6E7A8E; }

/* bevelled buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px;
  font: 9px/1 var(--f-wide); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--text); background: linear-gradient(#5E6A7F, #47526A); cursor: pointer;
  border: 1px solid; border-color: #8C98AC #1A2234 #1A2234 #8C98AC;
}
.btn:active { border-color: #1A2234 #8C98AC #8C98AC #1A2234; }
.btn .px { font-size: 8px; }
/* the one primary action on the page */
.btn-go { background: var(--pink); color: var(--ink); border-color: #FFC2D6 #7A2D46 #7A2D46 #FFC2D6; }

/* ---------- stage ---------- */
.stage {
  position: relative; width: 960px; max-width: calc(100% - 32px); margin: 32px auto 40px; padding: 0 7px 7px;
  background: var(--stage); border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 #3E4A64, 0 0 0 1px #141B2B;
}
/* centred on a whole pixel: at an odd viewport width (1281, or 1349 / 1519 / 1903 with a Windows
   scrollbar) "auto" would put the stage, and every Pixel Latin line in it, on x + .5 */
@supports (margin-left: round(down, 1px, 1px)) {
  .stage { margin-left: max(16px, round(down, (100% - 960px) / 2, 1px)); margin-right: 0; }
}
/* hairlines that run past the stage's corners (crop marks), where the margin has room for them
   (1040: 25px of margin even with a 17px scrollbar) */
@media (min-width: 1040px) {
  .stage::before, .stage::after { content: ""; position: absolute; pointer-events: none; }
  .stage::before { left: -25px; right: -25px; top: -2px; bottom: -2px; border-block: 1px solid var(--rule); }
  .stage::after  { top: -25px; bottom: -25px; left: -2px; right: -2px; border-inline: 1px solid var(--rule); }
}

/* ---------- top bar 56px ---------- */
.top { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand-h { flex: none; }
.brand { position: relative; display: block; width: 240px; height: 48px; text-decoration: none; }
.brand img { width: 240px; height: 48px; }
.brand-fb { display: none; }
.brand.wm-missing img { visibility: hidden; }
.brand.wm-missing .brand-fb { display: block; position: absolute; inset: 0; font: 34px/48px var(--f-head); color: var(--text); text-shadow: 1px 1px 0 #0E1424; }
@media (hover: hover) { .brand:hover { background: none; } }
.sys { flex: none; color: var(--text); }
.sys-k { color: var(--dim); margin-right: 3px; }
.top-fill { flex: 1; height: 8px; min-width: 16px; background: var(--tx-hatch); border-block: 1px solid var(--frame); }
.ctl { flex: none; display: flex; align-items: center; gap: 6px; }
/* WenQuanYi 12 is 15px tall (12 up, 3 down): an odd line-height puts its baseline on a whole pixel, and the 18px
   block keeps the key on the button's whole-pixel top (centring a 17px line in 18px would put it on y + .5) */
.lang-zh { display: block; height: 18px; font: 12px/17px var(--f-cjk); letter-spacing: 0; -webkit-font-smoothing: none; }
.audio-state { width: 18px; }

/* ---------- tabs 24px ---------- */
.tabs { display: flex; align-items: stretch; height: 24px; gap: 1px; background: var(--well); border: 1px solid var(--frame); padding: 1px; }
.tabs-lead { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; color: var(--hi); }
.tabs ul { display: flex; gap: 1px; flex: none; }
.tabs li { display: flex; }
.tabs a {
  display: flex; align-items: center; padding: 0 16px 0 17px; text-decoration: none;
  font: 10px/1 var(--f-wide); letter-spacing: .16em; color: var(--ink); background: var(--cell);
  box-shadow: inset 1px 1px 0 #D7E0EC, inset -1px -1px 0 #7D8BA2;
}
.tabs a[aria-current="true"] { background: var(--pink); color: var(--ink); box-shadow: inset 1px 1px 0 #FFC2D6, inset -1px -1px 0 #B04D6E; }
.tabs-fill { flex: 1; min-width: 8px; background: var(--tx-hatch) #1A2234; }
.tabs-upd { flex: none; display: flex; align-items: center; padding: 0 8px; color: var(--dim); }

/* ---------- hero 944 x 300 ---------- */
.hero-wrap { position: relative; margin-top: 8px; padding-bottom: 8px; }
.hero { position: relative; height: 300px; overflow: hidden; background: #1A2336; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px #0E1424, inset 1px 1px 0 2px rgba(200, 212, 230, .14); }
.hero-pic { position: absolute; inset: 0; }
.hero-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-art, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; }
/* a photo gets a dark wash on the left, under the headline (the vector scene leaves that side dark itself) */
.hero-pic:has(> .hero-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 26, 41, .78), rgba(19, 26, 41, .35) 45%, rgba(19, 26, 41, 0) 70%); }
.hero-narrow { display: none; }
.hs-label { font: 9px var(--f-wide); letter-spacing: .1em; }

.hero-copy { position: absolute; z-index: 2; left: 28px; top: 26px; max-width: 420px; }
.hero-kicker { color: var(--hi); margin-bottom: 10px; }
.hero-h {
  font: 30px/32px var(--f-head); letter-spacing: .02em; color: #F2F5F9;
  text-shadow: 1px 1px 0 #0B1120;
}
.hero-line { margin-top: 12px; max-width: 340px; font: 9px/15px var(--f-wide); letter-spacing: .14em; color: var(--hi); text-transform: uppercase; text-shadow: 1px 1px 0 #0B1120; }
/* the time on a line of its own, at every width (never a three-line "WENT / LIVE AT / 21:41 ...") */
.hl-when { display: block; }
.hs-fig { font: 8px var(--f-px); -webkit-font-smoothing: none; }

/* the figure plate over the floor: a caption, like the one under a figure in a manual (no leader) */
.hero-data {
  position: absolute; z-index: 2; left: 28px; bottom: 24px; display: grid; gap: 5px; padding: 7px 10px 6px 9px;
  background: rgba(19, 26, 41, .78); border: 1px solid var(--rule); box-shadow: inset 1px 1px 0 rgba(200, 212, 230, .12);
}
.hero-data div { display: flex; gap: 10px; }
.hero-data dt { width: 44px; flex: none; font: 8px/8px var(--f-px); color: var(--dim); -webkit-font-smoothing: none; }
.hero-data div:first-child dt { color: var(--hi); }
.hero-data dd { font: 8px/8px var(--f-px); color: var(--text); -webkit-font-smoothing: none; }
/* the key to the scene's numbered marks (only with the vector scene, and only where the marks are drawn) */
.hd-key dd { display: flex; gap: 10px; white-space: nowrap; }
.hd-key b { color: var(--hi); }
/* the coordinates: on the plate only where the picture's own reticle and labels are hidden (761-991, a photo) */
.hero-data .hd-base { display: none; }
.hero:has(.hero-photo) .hero-data .hd-base { display: flex; }

/* ---------- //FEATURE: the one window that breaks the frame ---------- */
/* 88px tall with a one- or two-line entry; a longer one grows the window upwards over the hero's floor
   (its bottom edge stays on the seam), never cut off */
.feature {
  position: absolute; z-index: 3; right: 16px; bottom: 0; width: 300px;
  background: var(--stage); border: 1px solid var(--cell);
  box-shadow: 4px 4px 0 rgba(11, 17, 32, .6), inset 1px 1px 0 #6E7A8E;
}
.f-bar { display: flex; align-items: stretch; height: 16px; background: var(--bar-grad); box-shadow: inset 0 1px 0 var(--hi); }
.f-bar::after { content: ""; order: 1; flex: 1; margin-top: 1px; background: var(--tx-dots); }
.f-code { display: flex; align-items: center; padding: 0 6px 0 5px; background: var(--ink); color: var(--hi); }
.f-h { flex: none; display: flex; align-items: center; padding: 0 8px 0 7px; font: 700 12px/1 var(--f-cond); letter-spacing: .07em; color: var(--bar-ink); text-transform: uppercase; }
.f-x { order: 2; position: relative; flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-left: 1px solid var(--bar-b); background: transparent; cursor: pointer; color: var(--ink); }
/* the x is a 10 x 10 pixel mask (two 2px stepped diagonals), on whole pixels: no antialiased edge */
.f-x svg { position: absolute; left: 2px; top: 3px; fill: currentColor; }
@media (hover: hover) { .f-x:hover { background: var(--text); } }
.f-body { padding: 6px 7px 8px 9px; min-height: 70px; }
.f-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; height: 16px; }
.f-meta { padding-top: 1px; color: var(--dim); }
.f-meta .px { margin-right: 6px; color: var(--hi); }
.f-text { margin-top: 7px; }
/* the download card (LOG view): the picture beside the file, like 2Advanced v2's feature window */
.f-card { display: flex; gap: 10px; align-items: flex-start; }
.f-card-t { flex: 1; min-width: 0; }
.dl-thumb.f-thumb { flex: none; width: 96px; height: 54px; }
.dl-thumb.f-thumb svg, .dl-thumb.f-thumb img { width: 94px; height: 52px; }
.f-go { height: 16px; flex: none; }
.feature.is-closed { display: none; }
/* two cards: the newest log entry, and on the LOG view (whose table has that entry) the newest download */
.f-dl, .f-k-dl { display: none; }
.feature.on-log .f-log, .feature.on-log .f-k-log { display: none; }
.feature.on-log .f-dl { display: block; }
.feature.on-log .f-k-dl { display: inline; }
/* The window hangs out past the stage's right frame: the one thing on the page that does not stay inside
   its box. 8px past it on tablets (the margin is 16px there, 11px at 1000-1039 with a 17px scrollbar), 24px
   past it and its crop hairline where the margin has room for the crop marks. */
@media (min-width: 761px) {
  .feature { right: -16px; }
}
@media (min-width: 1040px) {
  .feature { right: -32px; }
}

/* ---------- control strip under the hero ---------- */
.strip {
  display: flex; align-items: stretch; height: 20px; background: var(--well);
  border: 1px solid #0B111D; border-top: 0; box-shadow: inset 0 -1px 0 #252F44;
}
.strip > * { display: flex; align-items: center; gap: 6px; padding: 0 9px 0 10px; color: var(--dim); }
/* separators between cells only: nothing dangles after the last visible one */
.strip > * + * { border-left: 1px solid #2A3449; }
.strip a { color: var(--dim); text-decoration: none; }
@media (hover: hover) { .strip a:hover { color: var(--ink); } }
.strip-k { color: var(--dim); }
.strip-tz { color: var(--hi); }
.seg { position: relative; display: inline-block; font: 700 12px/14px var(--f-seg); letter-spacing: 1px; color: var(--text); }
.ghost { color: var(--text); opacity: .1; }
.seg-v { position: absolute; left: 0; top: 0; }
@media (prefers-reduced-motion: no-preference) { .js .colon { animation: blink 1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: .15; } }
/* the reopen button sits at the strip's right end; the empty run before it is the strip itself (not a target) */
.strip-feature { flex: none; margin-left: auto; border: 0; border-left: 1px solid #2A3449; background: #1A2234; cursor: pointer; color: var(--hi); }
.strip-feature .led { background: var(--text); }
@media (hover: hover) { .strip-feature:hover { background: var(--text); color: var(--ink); } }

/* ---------- panels ---------- */
.panels { display: grid; grid-template-columns: 292px 292px 344px; gap: 8px; margin-top: 8px; }
.panels:focus { outline: 0; }
.views { grid-column: 1 / 3; grid-row: 1; display: grid; }
.p-dl { grid-column: 3; grid-row: 1; }
.p-spec { grid-column: 1; grid-row: 2; }
.p-cred { grid-column: 2 / 4; grid-row: 2; }

.panel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tx-lines), var(--area); border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 #66728A, inset -1px -1px 0 #333D53;
}
.view { min-height: 156px; }
.pbar { display: flex; align-items: stretch; flex: none; height: 18px; background: var(--bar-grad); box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 #4B566B; }
/* the halftone fills the bar's empty run only, between the heading and the number cell */
.pbar::after { content: ""; order: 1; flex: 1; margin: 1px 0; background: var(--tx-dots); }
.pcode { display: flex; align-items: center; flex: none; padding: 0 7px 0 6px; background: var(--ink); color: var(--hi); }
.pbar h2 { flex: none; display: flex; align-items: center; padding: 0 10px 0 8px; font: 700 13px/1 var(--f-cond); letter-spacing: .08em; color: var(--bar-ink); text-transform: uppercase; }
/* 8px labels never sit on the light bar: the number gets a dark cell like the code */
.pno { order: 2; display: flex; align-items: center; flex: none; padding: 0 6px 0 7px; color: var(--hi); background: var(--ink); }
.pbody { flex: 1; padding: 9px 10px 10px 11px; }

/* key / value rows (About) */
.kv { display: grid; gap: 6px; }
.kv > div { display: flex; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #505B70; }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { flex: none; width: 48px; padding-top: 4px; color: var(--dim); }
.owner { display: inline-block; padding: 0 4px 0 5px; background: var(--pink); color: var(--ink); text-shadow: 1px 0 0 currentColor; letter-spacing: 1px; }

/* the log */
.log { width: 100%; }
.log th { text-align: left; color: var(--dim); padding: 0 0 6px; border-bottom: 1px solid var(--rule); }
.log td { padding: 4px 12px 3px 0; vertical-align: top; border-bottom: 1px solid #505B70; }
.log td:last-child { padding-right: 0; }
.log tr:last-child td { border-bottom: 0; }
.log .no { width: 40px; color: var(--hi); }
.log .no .px { position: relative; top: -1px; }
.log .date { width: 128px; white-space: nowrap; color: var(--dim); }
.log-foot { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.log-foot .px { color: var(--dim); }

/* links */
.lk { display: grid; gap: 4px; }
.lk li { display: flex; gap: 12px; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid #505B70; }
.lk li:last-child { border-bottom: 0; }
.lk-k { flex: none; width: 32px; color: var(--hi); }
.lk-d { color: var(--dim); }

/* MODULE.STANDBY: the one empty module (Works), drawn as standby, not as a gap */
.standby {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 100%; min-height: 110px; padding: 0 16px;
  background: var(--tx-hatch), var(--stage); border: 1px solid #252F44; box-shadow: inset 1px 1px 0 #1A2234;
}
.standby-h { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 16px; color: var(--hi); background: var(--stage); align-self: flex-start; padding-right: 4px; }
.led-off { background: #262F42; }
.standby-t { color: var(--dim); text-shadow: 0 0 0 transparent; background: var(--stage); align-self: flex-start; padding: 0 4px 0 0; }

/* downloads */
.dl { display: grid; gap: 8px; }
.dl li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 10px; align-items: start; }
.dl .btn { margin-top: 8px; }   /* top-aligned rows (centring a 36px tile against 45px of text would put it on y + .5) */
.dl-thumb { width: 64px; height: 36px; overflow: hidden; background: var(--well); border: 1px solid var(--rule); }
.dl-thumb svg, .dl-thumb img { width: 62px; height: 34px; }
.dl-thumb img { object-fit: cover; }
/* the font pack's tile: a specimen, each size in its own face, baselines on whole pixels */
.dl-type {
  display: grid; grid-template-columns: 16px 18px; justify-content: center; align-content: start; align-items: baseline;
  column-gap: 8px; padding-top: 2px; color: var(--text); -webkit-font-smoothing: none;
}
.dl-type span { white-space: nowrap; }
.sp10 { font: 10px/11px "IISPIG Pixel Latin 10", var(--f-body); color: var(--dim); }
.sp12 { font: 12px/13px "IISPIG Pixel Latin 12", var(--f-body); }
.sp14 { font: 14px/13px "IISPIG Pixel Latin 14", var(--f-body); color: var(--dim); }
.sp16 { font: 16px/16px "IISPIG Pixel Latin 16", var(--f-body); }
.dl-info { display: grid; gap: 5px; }
.dl-name { font: 9px/10px var(--f-wide); letter-spacing: .12em; color: var(--text); text-transform: uppercase; }
.dl-meta { color: var(--dim); }
.dl-bytes { color: var(--hi); }
.dl-lic { margin-top: 9px; padding-top: 7px; border-top: 1px solid #505B70; color: var(--dim); }

/* site requirements */
.req { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; color: var(--hi); }
.req li { display: flex; gap: 6px; align-items: center; }
.req li::before { content: ""; width: 4px; height: 4px; background: var(--dim); flex: none; }

/* credits: a spec list in SITE.REQ's style, each face linked to its licence */
.cred { display: grid; grid-template-columns: 156px 112px 148px 124px; gap: 8px 16px; }   /* fixed: whole-pixel columns */
.cred div { display: flex; gap: 6px; }
.cred dt { flex: none; width: 40px; color: var(--dim); }
.cred a { color: var(--hi); }
/* 8px links get a 16px tall target without moving the text */
.cred a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.cred-lic { margin-top: 10px; padding-top: 8px; border-top: 1px solid #505B70; line-height: 14px; color: var(--dim); }

/* ---------- footer ---------- */
.foot { display: flex; align-items: center; gap: 16px; height: 28px; margin-top: 8px; padding: 0 2px 0 3px; color: var(--dim); border-top: 1px solid var(--frame); }
.foot > * { white-space: nowrap; }
.foot-bv { margin-left: auto; }
.code39 { display: flex; align-items: center; gap: 8px; }
/* Code 39 drawn 1:1 (narrow bar 1px, wide 2px), so every bar is whole pixels */
.barcode { fill: var(--dim); }
.tagline { position: absolute; top: 0; left: calc(100% + 12px); writing-mode: vertical-rl; color: #9AA6BA; white-space: nowrap; }
/* the edition: in the top bar from 761px, in front of the tagline on phones */
.tag-ed { display: none; }
@media (max-width: 1019px) {
  .foot { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 2px; row-gap: 8px; }
  .tagline { position: static; writing-mode: horizontal-tb; flex-basis: 100%; white-space: normal; }
}

/* ---------- views without JavaScript: :target picks the view, About when there is none ---------- */
.view[hidden] { display: none; }
@supports selector(:has(a)) {
  html:not(.js) .view { display: none; }
  html:not(.js) .view:target,
  html:not(.js) .views:not(:has(.view:target)) #about { display: flex; }
  html:not(.js) body:not(:has(.view:target)) .tabs a[href="#about"],
  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(--pink); }
  html:not(.js) body:has(#log:target) .f-log, html:not(.js) body:has(#log:target) .f-k-log { display: none; }
  html:not(.js) body:has(#log:target) .f-dl { display: block; }
  html:not(.js) body:has(#log:target) .f-k-dl { display: inline; }
}

/* ---------- INITSEQ (first visit only; .boot is set by the inline script in <head>) ---------- */
.initseq { display: none; }
.boot .initseq {
  display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center;
  background: rgba(19, 26, 41, .55);
  animation: is-hide 1ms linear 560ms both;
}
.is-box { width: 280px; background: var(--stage); border: 1px solid var(--cell); box-shadow: 4px 4px 0 rgba(11, 17, 32, .6); }
.is-bar { display: flex; justify-content: space-between; align-items: stretch; height: 16px; background: var(--tx-dots), var(--bar-grad); box-shadow: inset 0 1px 0 var(--hi); }
.is-lines { padding: 6px 10px 0; }
.is-lines li { display: flex; justify-content: space-between; padding: 5px 0 4px; border-bottom: 1px solid var(--frame); visibility: hidden; animation: show 1ms linear both, is-hide 1ms linear 560ms both; }
.is-lines li:nth-child(1) { animation-delay: 90ms, 560ms; }
.is-lines li:nth-child(2) { animation-delay: 190ms, 560ms; }
.is-lines li:nth-child(3) { animation-delay: 290ms, 560ms; }
.is-lines span { color: var(--dim); }
.is-skip { margin: 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 .strip, .boot .feature, .boot .panels > *, .boot .foot, .boot .hero-copy, .boot .hero-data { visibility: hidden; animation: show 1ms linear both; }
.boot .top { animation-delay: 540ms; }
.boot .tabs { animation-delay: 570ms; }
/* the hero is uncovered from the top by a scan line, in 10 steps */
.boot .hero::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0;
  background: #1A2336; border-top: 1px solid var(--hi);
  animation: unscan 300ms steps(10) 560ms both;
}
@keyframes unscan { to { top: 100%; } }
.boot .hero-copy { animation-delay: 760ms; }
.boot .hero-data { animation-delay: 870ms; }   /* after the scan line has uncovered its rows (560 + 300 ms) */
.boot .strip { animation-delay: 620ms; }
.boot .views { animation-delay: 660ms; }
.boot .p-dl { animation-delay: 700ms; }
.boot .p-spec, .boot .p-cred { animation-delay: 740ms; }
.boot .foot { animation-delay: 760ms; }
.boot .feature { animation-delay: 840ms; }
@media (prefers-reduced-motion: reduce) {
  .boot .initseq { display: none; }
}

/* ---------- tablet: the stage is narrower than 960 ---------- */
@media (max-width: 991px) and (min-width: 761px) {
  .hero { height: auto; aspect-ratio: 944 / 300; }
  .panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }
  .tabs-upd { display: none; }
  .hero-h { font-size: 24px; line-height: 26px; }
  .req { grid-template-columns: 1fr; }
  /* the picture is scaled down here: its 8px marks and 9px labels would blur (and at 761-950 the scene moves
     right under the labels), and its 2px halftone screen would beat into moire, so the marks (and the plate's key to
     them), the reticle, its labels and the screen go, and the plate carries the coordinates */
  .hs-fig, .hs-reticle, .hs-label, .hs-tx { display: none; }
  .hero-data .hd-base { display: flex; }
  .hero-data .hd-key { display: none; }
  .cred { grid-template-columns: repeat(2, 180px); }
}
/* a link row whose description does not fit beside it takes two lines, the description under the link */
@media (max-width: 991px) {
  .lk li { flex-wrap: wrap; row-gap: 2px; }
  .lk-d { flex-basis: 100%; padding-left: 44px; }
}
/* the same height on a whole pixel, so nothing below the hero sits on y + .969 */
@supports (height: round(down, 1cqw, 1px)) {
  @media (max-width: 991px) and (min-width: 761px) {
    .hero-wrap { container-type: inline-size; }
    .hero { aspect-ratio: auto; height: round(down, 100cqw * 300 / 944, 1px); }
  }
}
/* the two flexible panel columns on whole pixels: at an odd width two 1fr columns would split it in halves and
   put the Credits panel (column 2) and its Pixel Latin text on x + .5 */
@supports (width: round(down, 1px, 1px)) {
  @media (max-width: 991px) and (min-width: 761px) {
    .panels { grid-template-columns: round(down, (100% - 316px) / 2, 1px) minmax(0, 1fr) 300px; }
  }
}
/* 761-950: the picture is scaled to 75-95%, which brings the wordmark within ~300px of the hero's left
   edge: the copy is set at the phone sizes and the scene (not the rulers or the reticle) moves 48 units
   right, so the copy ends 40px or more short of the wordmark and the plates (from 951 the full-size copy
   clears them by 40px or more without the shift) */
@media (max-width: 950px) and (min-width: 761px) {
  .hero-wide use { transform: translate(48px, 0); }
  .hero-copy { top: 20px; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-h { font-size: 22px; line-height: 24px; }
  .hero-line { font-size: 8px; line-height: 13px; letter-spacing: .12em; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  html, body { background: var(--stage); }
  body { font: 14px/17px var(--f-body); --f-body: "IISPIG Pixel Latin 14", Verdana, Geneva, sans-serif; }
  .stage { width: auto; max-width: none; margin: 0; padding: 0 16px 24px; border: 0; box-shadow: none; }
  .top { height: auto; padding: 10px 0; gap: 8px; }
  .brand, .brand img { width: 160px; height: 32px; }
  .sys, .top-fill { display: none; }
  .ctl { margin-left: auto; gap: 4px; }
  .ctl .btn { padding: 0 6px; letter-spacing: .08em; }
  .audio-state { display: none; }
  .tabs { height: 30px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 0 11px 0 12px; letter-spacing: .12em; }
  /* the strip scrolls, so an outside ring would be cut off: draw it inside the cell */
  .tabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
  .tabs-upd { display: none; }
  .hero { height: 248px; }
  .hs-reticle { display: none; }
  .hero-wide { display: none; }
  /* scaled by the hero's height and centred, the scene running on past the svg box on wider phones */
  .hero-narrow { display: block; left: 50%; width: calc(248px * 540 / 390); margin-left: calc(248px * -270 / 390); overflow: visible; }
  .hero-copy { left: 14px; top: 14px; right: 14px; max-width: none; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-h { font-size: 22px; line-height: 24px; }
  .hero-line { margin-top: 8px; max-width: 270px; font-size: 8px; line-height: 13px; letter-spacing: .12em; }
  .hero-data { display: none; }
  .hero-wrap { padding-bottom: 0; }
  .feature { position: relative; right: auto; bottom: auto; width: auto; height: auto; margin: -30px 14px 0 auto; max-width: 320px; }
  /* in the flow here: the card ends 8px under its last line (no desktop window size to keep) */
  .f-body { height: auto; min-height: 0; padding-bottom: 8px; }
  .f-text { max-height: none; }
  .f-row { flex-wrap: wrap; height: auto; row-gap: 6px; }
  .strip { flex-wrap: wrap; height: auto; margin-top: 10px; border-top: 1px solid #0B111D; }
  .strip > * { height: 22px; padding: 0 7px 0 8px; }
  .lg-x { display: none; }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .views, .p-dl, .p-spec, .p-cred { grid-column: 1; grid-row: auto; }
  .view { min-height: 0; }
  .kv dt, .log th, .lk-k { padding-top: 5px; }
  .log .date { width: auto; }
  .log thead { display: none; }
  .log tr { display: grid; grid-template-columns: 40px 1fr; padding: 6px 0; border-bottom: 1px solid #505B70; }
  .log tr:last-child { border-bottom: 0; }
  .log td { border: 0; padding: 0; }
  .log td:last-child { grid-column: 2; }
  .standby { min-height: 96px; padding: 14px 16px; }
  .dl li { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .dl-meta { white-space: normal; }
  .req { grid-template-columns: 1fr 1fr; }
  .foot { flex-wrap: wrap; height: auto; padding: 10px 0 0; gap: 10px 16px; }
  .foot-bv { margin-left: 0; }
  .tagline { flex-basis: 100%; }
  .tag-ed { display: inline; }
  .cred { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 479px) {
  .feature { margin: -30px 14px 0; max-width: none; }
}
/* small phones (320-374 px) */
@media (max-width: 374px) {
  .brand, .brand img { width: 130px; height: 26px; }
  .ctl { gap: 2px; }
  .ctl .btn { padding: 0 5px; letter-spacing: .06em; }
  .hero-h { font-size: 18px; line-height: 20px; white-space: nowrap; }
  .hero-line { max-width: none; }
  .hero { height: 224px; }
  .hero-narrow { width: calc(224px * 540 / 390); margin-left: calc(224px * -270 / 390); }
  .tabs a { padding: 0 8px 0 9px; font-size: 9px; letter-spacing: .1em; }
  /* the reopen button does not fit after FILES: it takes a row of its own, with a rule above it */
  .strip-feature { flex-basis: 100%; border-left: 0; border-top: 1px solid #2A3449; }
}