/* Bag Check — X-ray checkpoint landing page.
   The stage is laid out in the photograph's own pixels (1536 × 864) and scaled to the window
   by main.js, so everything placed on it stays registered to the plate. */

:root {
  --page: #51504e;
  --ink: #1b1a17;
  --ink2: #57534b;
  --paper: #f2f0ea;
  --floor: #d8d4cc;
  --band: #E4572E;
  --rival: #2B6CB0;
  --prior: #7B8088;
  --xfont: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cond: "Barlow Condensed", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* a phone keeps the page's sizes when it's turned sideways (Safari otherwise enlarges the text), and
   doesn't flash a grey box over what's tapped */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, input, label { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--page);
  color: #eceae6;
  font: 16px/1.5 var(--xfont);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ hero / stage */

.hero {
  position: relative;
  height: var(--hero-h, 100svh);
  min-height: 300px;
  background: var(--page);
  user-select: none;
  -webkit-user-select: none;
}
/* The scene stays pinned while the first stretch of scrolling zooms it out from the monitor to the
   whole checkpoint, belts and all; then it scrolls away into the page. */
.pin { position: sticky; top: 0; height: var(--pin-h, 100svh); overflow: hidden; }
.stage {
  position: absolute;
  left: 0; top: 0;
  width: 1672px; height: 941px;
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1));
  will-change: transform;
  opacity: 0;
  transition: opacity .6s ease-out;
}
.stage.ready { opacity: 1; }
.plate {
  position: absolute; inset: 0; width: 1672px; height: 941px; display: block;
  /* the bottom edge fades over its last 130px, eased, into the blurred colours under it */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 130px), rgba(0,0,0,.93) calc(100% - 104px), rgba(0,0,0,.74) calc(100% - 78px), rgba(0,0,0,.47) calc(100% - 52px), rgba(0,0,0,.2) calc(100% - 26px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 130px), rgba(0,0,0,.93) calc(100% - 104px), rgba(0,0,0,.74) calc(100% - 78px), rgba(0,0,0,.47) calc(100% - 52px), rgba(0,0,0,.2) calc(100% - 26px), transparent);
}
/* Under the photograph's feathered bottom edge: its last rows' colours, blurred sideways, easing into
   the page grey (pre-rendered by tools/under.py: assets/under.webp), so it doesn't end on a line. */
.under { position: absolute; left: 0; top: 760px; width: 1672px; height: 481px; display: block; pointer-events: none; }

/* Lanes: the belt either side of the scanner, seen from above. Posts lie flat on it, so the lane
   carries the camera's perspective; its clip is where the housing hides the belt. */
.lane {
  position: absolute; left: 0; top: 0; width: 1672px; height: 941px;
  pointer-events: none;
  perspective: 1500px;
  perspective-origin: 836px -260px;
}
.beltfx {
  position: absolute;
  transform-origin: 50% 100%;
  transform: rotateX(52deg);
  background-image: repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,255,255,.05) 140px 142px, rgba(0,0,0,.35) 142px 145px, transparent 145px 300px);
  background-position: var(--bx, 0px) 0;
  mix-blend-mode: overlay;
  opacity: .8;
}

/* ------------------------------------------------------------------ posts on the belt */

.card {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 50% 100%;
  will-change: transform;
}
.card .face {
  position: absolute; inset: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #f1efe9;
  /* exposed like the photograph: the night terminal, lit from above */
  filter: brightness(.66) contrast(.92) saturate(.75);
  box-shadow: 0 1.6px 0 #8d8f93, 0 0 0 .5px rgba(0,0,0,.4);
}
.card .face canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .face::after { /* the overhead light falls off toward the near edge */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0) 35%, rgba(0,0,0,.12));
  mix-blend-mode: soft-light;
}
/* the housing's shadow falls on the post as it slides under (and comes out) */
.card .tunnel { position: absolute; inset: 0; pointer-events: none; }
.lane-in .card .tunnel { background: linear-gradient(90deg, rgba(8,9,10,0) calc(var(--sx, 9999px) - 50px), rgba(8,9,10,.55) calc(var(--sx, 9999px) - 5px), rgba(8,9,10,.92) calc(var(--sx, 9999px) + 30px)); }
.lane-out .card .tunnel { background: linear-gradient(90deg, rgba(8,9,10,.92) calc(var(--sx, -9999px) - 30px), rgba(8,9,10,.55) calc(var(--sx, -9999px) + 5px), rgba(8,9,10,0) calc(var(--sx, -9999px) + 50px)); }
.card .cast {
  position: absolute; inset: 6px -2px -10px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.7);
  filter: blur(7px);
}
/* a tagged post: the extension's tag in the row it opened (card units, scaled in by main.js) */
.card .btag { position: absolute; transform-origin: 0 0; pointer-events: none; }

/* ------------------------------------------------------------------ the monitor */
/* Position and size come from main.js (the photograph's screen rectangle). Inside, the software
   is laid out in its own units: 1074 wide, height by the screen's aspect. */

.screen {
  position: absolute;
  overflow: hidden;
  background: #07090b;
  border-radius: 2px;
}
.screen-glow {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 40px 8px rgba(200,215,230,.10), 0 0 10px 1px rgba(210,222,235,.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
}
.screen-glow.on { opacity: 1; }
.scr {
  position: absolute; left: 0; top: 0;
  width: 1074px;
  transform-origin: 0 0;
  background: #e8e8e8;
  color: #1a1a1a;
  font: 15px/1.25 Arial, Helvetica, sans-serif;
  display: grid;
  grid-template-rows: 40px 1fr 70px;
  opacity: 0;
  filter: brightness(.93) contrast(.97);
  --narrow: "Arial Narrow", Arial, Helvetica, sans-serif;
}
.scr.on { opacity: 1; transition: opacity .25s; }
.scr[hidden] { display: none; }

/* the status bar: bag number, time, operator, material, mode, belt, X-ray lamp */
.scr-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #dcdcdc; border-bottom: 1px solid #a8a8a8; }
.logo { width: 24px; height: 24px; flex: none; }
.logo svg { width: 100%; height: 100%; display: block; }
.sb { display: flex; align-items: stretch; height: 26px; border: 1px solid #9a9a9a; background: #f2f2f2; font: 700 13px/26px var(--narrow); letter-spacing: .04em; text-transform: uppercase; color: #222; white-space: nowrap; }
.sb-f { padding: 0 10px; border-right: 1px solid #c2c2c2; }
.sb-strong { background: #1a1a1a; color: #fff; }
.sb-mode { min-width: 52px; text-align: center; color: #0b4fae; }
.sb-dir { min-width: 30px; text-align: center; }
.sb-lamp { display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #8a8a8a; }
.sb-lamp i { width: 10px; height: 10px; border: 1px solid #6a6a6a; background: #5a2b26; }
.sb-lamp.on { color: #b3261e; }
.sb-lamp.on i { background: #ff3b2a; border-color: #8e1c13; box-shadow: 0 0 6px #ff5a4a; }
.hbtn {
  margin-left: auto; width: 30px; height: 28px; padding: 0; flex: none;
  border: 1px solid #8f8f8f; border-radius: 1px; background: #ececec;
  color: #333; cursor: pointer; display: grid; place-items: center;
}
.hbtn svg { width: 20px; height: 20px; }
.hbtn .i-wave { display: none; }
.hbtn[aria-pressed="true"] .i-wave { display: inline; }
.hbtn[aria-pressed="true"] .i-mute { display: none; }
.hbtn[aria-pressed="true"] { color: #0b4fae; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); background: #dedede; }
.hbtn:focus-visible { outline: 3px solid #2f74d8; outline-offset: 2px; }
.xclose {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #ee6a5f, #cf3a2f 70%, #b52d24);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.18);
  cursor: pointer; display: grid; place-items: center;
}
.xclose svg { width: 20px; height: 20px; }

.scr-main { position: relative; background: #fff; overflow: hidden; }
.scr-main canvas#xray { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the extension's tag on the monitor, over the top view (main.js places each one with its post) */
.xtags { position: absolute; left: 19px; top: 0; width: 695px; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.xtag-slot { position: absolute; overflow: hidden; pointer-events: auto; }
.xtag-slot[hidden] { display: none; }
.xtag-inner { position: absolute; transform-origin: 0 0; }

/* the right pane: the scan's RESULT, then the install keys (the most prominent thing in it) */
.result { position: absolute; left: 727px; top: 12px; width: 335px; display: flex; flex-direction: column; gap: 10px; z-index: 1; }
.res-head { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px; background: #1a1a1a; color: #fff; font: 700 14px/30px var(--narrow); letter-spacing: .06em; text-transform: uppercase; }
.res-head span { color: #c8c8c8; }
.result.alarmed .res-head span { color: #ffe600; }
.res-alarm { min-height: 64px; display: flex; }
.alarm {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; text-align: left;
  border: 1px solid #b3261e; border-left: 6px solid #b3261e; border-radius: 0; background: #fff3f1; color: #1a1a1a; cursor: pointer;
}
.alarm[hidden] { display: none; }
.alarm canvas { width: 72px; height: 42px; flex: none; image-rendering: pixelated; border: 1px solid #555; background: #fff; }
.alarm-tx { display: grid; gap: 3px; min-width: 0; }
.alarm-tx b { font: 700 14px/1.1 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-tx span { font: 400 13px/1.15 Arial, Helvetica, sans-serif; color: #444; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm:focus-visible { outline: 3px solid #2f74d8; outline-offset: 2px; }
.alarm-none { flex: 1; display: grid; place-items: center; border: 1px dashed #b4b4b4; color: #8a8a8a; font: 700 13px/1 var(--narrow); letter-spacing: .08em; text-transform: uppercase; }
.alarm:not([hidden]) + .alarm-none { display: none; }

.inst { display: flex; flex-direction: column; gap: 8px; }
.inst-h { margin: 2px 0 0; font: 700 15px/1 var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: #1a1a1a; }
.inst-copy { margin: 0 0 2px; font: 400 14px/1.25 Arial, Helvetica, sans-serif; color: #333; }
.ibtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--cta-h2, 58px); border-radius: 1px;
  font: 700 var(--cta-f2, 18px)/1 Arial, Helvetica, sans-serif; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.ibtn svg { width: 1.15em; height: 1.15em; flex: none; }
.ibtn-primary {
  position: relative; height: var(--cta-h1, 74px); font-size: var(--cta-f1, 22px);
  background: #151515; color: #fff;
  border: 1px solid #000; border-left: 0; padding-left: 6px;
}
.ibtn-primary::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 6px; background: #ffe600; }
.ibtn-primary:hover { background: #222; }
.ibtn-primary.flag { border-color: #ffe600; box-shadow: inset 0 0 0 1px #ffe600; }
.ibtn-secondary { background: transparent; color: #151515; border: 1px solid #151515; }
.ibtn-secondary:hover { background: rgba(0,0,0,.04); }
.ibtn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0,0,0,.6); }
.ibtn:focus-visible { outline: 3px solid #2f74d8; outline-offset: 2px; }
/* when the screen renders small, the keys grow to stay at least 44px tall and the copy above makes room */
.result.mid .inst-copy { display: none; }
.result.tight .res-alarm, .result.tight .inst-h, .result.tight .inst-copy { display: none; }

/* the bottom panel: one row of square function keys */
.scr-tools {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: #d6d6d6; border-top: 1px solid #a8a8a8;
}
.pos { min-width: 36px; font: 700 16px/1 var(--narrow); color: #222; }
.fk {
  height: 46px; min-width: 46px; padding: 0 6px;
  border: 1px solid #8a8a8a; border-radius: 1px;
  background: #ececec; color: #222;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c2c2c2;
  font: 700 13px/1 var(--narrow); letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; display: grid; place-items: center; position: relative;
}
.fk svg { width: 22px; height: 22px; }
.fk:hover { background: #f4f4f4; }
.fk:active, .fk.press { box-shadow: inset 0 1px 3px rgba(0,0,0,.4); background: #d8d8d8; }
.fk.on { background: #d2d2d2; box-shadow: inset 0 1px 3px rgba(0,0,0,.45); color: #0b4fae; }
.fk.on::before { content: ""; position: absolute; left: 50%; top: 4px; width: 16px; height: 3px; margin-left: -8px; background: #2fd04a; box-shadow: 0 0 4px #4cd067; }
.fk:focus-visible { outline: 3px solid #2f74d8; outline-offset: 2px; }
.sq { display: flex; gap: 4px; }
.sq .fk { width: 46px; }
.ib { display: flex; gap: 4px; }
.ib .fk { min-width: 44px; }
.belt { width: 64px; grid-template-rows: auto auto; gap: 2px; align-content: center; }
.belt svg { width: 18px; height: 18px; }
.belt span { font-size: 11px; }
.belt .i-play { display: none; }
.belt.paused { background: #f3b400; border-color: #8a6400; color: #1a1a1a; box-shadow: inset 0 1px 3px rgba(0,0,0,.45); }
.belt.paused .i-play { display: inline; }
.belt.paused .i-pause { display: none; }
.belt.paused::before { content: ""; position: absolute; left: 50%; top: 4px; width: 16px; height: 3px; margin-left: -8px; background: #d4291f; animation: blink .55s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }

.sliders { display: grid; gap: 1px; }
.sliders label { display: grid; grid-template-columns: 12px 108px 12px; align-items: center; column-gap: 5px; }
.sliders .pm { font: 400 17px/1 Arial, sans-serif; color: #333; text-align: center; }
.sliders em { grid-column: 2; font: 700 11px/1 var(--narrow); font-style: normal; color: #333; text-align: center; margin-top: -2px; text-transform: uppercase; letter-spacing: .05em; }
.sliders input { -webkit-appearance: none; appearance: none; width: 108px; height: 16px; background: transparent; margin: 0; cursor: pointer; }
.sliders input::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #2f6fe0 var(--v, 50%), #9b9b9b var(--v, 50%)); }
.sliders input::-moz-range-track { height: 4px; background: #9b9b9b; }
.sliders input::-moz-range-progress { height: 4px; background: #2f6fe0; }
.sliders input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -6px; border-radius: 1px; background: #ececec; border: 1px solid #555; }
.sliders input::-moz-range-thumb { width: 8px; height: 14px; border-radius: 1px; background: #ececec; border: 1px solid #555; }
.reset { width: 46px; }

.verdict { margin-left: auto; display: flex; gap: 6px; }
.v { width: 52px; height: 52px; padding: 0; border-radius: 1px; cursor: pointer; display: grid; place-items: center; }
.v svg { width: 36px; height: 36px; }
.v-ok { background: #d9e2d9; border: 1px solid #7f8f7f; color: #7fa07a; }
.v-tag { background: #ecc9c4; border: 1px solid #a8746c; color: #b85a4e; }
.v-tag.lit { background: #d8443a; border-color: #8e1c13; color: #7a160f; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.v:focus-visible, .xclose:focus-visible, .sliders input:focus-visible { outline: 3px solid #2f74d8; outline-offset: 2px; }

/* the details card behind a tag (js/bagcard.js): over the page, by its bag */
.bagcard { position: fixed; left: 0; top: 0; z-index: 60; }
.bagcard[hidden] { display: none; }
.bagcard:focus { outline: none; }

.boot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #e8e8e8; color: #555;
  font: 400 16px/1.4 Arial, Helvetica, sans-serif;
  transition: opacity .4s;
  z-index: 5;
}
.boot b { display: block; font: 700 30px/1 Arial, Helvetica, sans-serif; color: #222; margin-bottom: 14px; }
.boot .bar { display: block; width: 260px; height: 10px; margin: 0 auto 10px; border: 1px solid #9a9a9a; background: #fff; }
.boot .bar i { display: block; height: 100%; width: 0; background: #2f6fe0; transition: width .6s ease-out; }
.boot-in { text-align: center; }
.boot.done { opacity: 0; pointer-events: none; }

/* glass: a soft reflection of the ceiling lights and the recess shadow */
.glass {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(170deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 30%, rgba(255,255,255,0) 45%),
    linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,0) 30%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.45);
}

.lamp { position: absolute; left: 1259px; top: 784px; width: 0; height: 0; pointer-events: none; }
.lamp i { position: absolute; border-radius: 50%; }
/* off: a dark lens over the photographed lamp */
.lamp { --lamp-bg: 45,42,40; --lamp-core: #35291a; }
.lamp .lamp-off { left: -33px; top: -31px; width: 66px; height: 62px; background: radial-gradient(closest-side, var(--lamp-core) 0, rgb(var(--lamp-bg)) 30%, rgb(var(--lamp-bg)) 62%, rgba(var(--lamp-bg),.9) 76%, rgba(var(--lamp-bg),0) 100%); }
.lamp .lamp-off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 11px; margin: -5.5px 0 0 -8.5px; border-radius: 50%; border: 1px solid rgba(150,140,130,.18); background: var(--lamp-lens, radial-gradient(closest-side, #2a2119, #262320)); }
.lamp .lamp-glow { left: -26px; top: -26px; width: 52px; height: 52px; background: radial-gradient(closest-side, rgba(255,190,70,.75), rgba(255,150,30,.25) 45%, rgba(255,140,20,0) 100%); mix-blend-mode: screen; opacity: 0; }
.lamp.on .lamp-off { opacity: 0; }
.lamp.on .lamp-glow { opacity: 1; }

.learn {
  position: absolute; left: 768px; top: 690px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 6px 14px;
  background: linear-gradient(180deg, #e8bd42, #d9aa2c);
  color: #141414; text-decoration: none;
  font: 800 19px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  border-radius: 3px;
  transform: rotate(-2.5deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.35);
  filter: brightness(.88) saturate(.92);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.learn::after { /* the corner lifting */
  content: ""; position: absolute; right: 0; top: 0; width: 13px; height: 13px;
  background: linear-gradient(225deg, transparent 50%, #f7e7b0 50%, #cfb36a);
}
.learn svg { width: 17px; height: 17px; }
.learn:hover { transform: rotate(-2.5deg) translateY(-2px); filter: brightness(.95) saturate(.95); }
.learn:focus-visible { outline: 3px solid #f5a524; outline-offset: 3px; }

/* the lane display set into the scanner's front panel (position from main.js) */
.lane-display {
  position: absolute;
  transform-origin: 0 0;
  background: #0b0d10;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 2px rgba(0,0,0,.35);
  overflow: hidden;
}
.lane-display::after { /* glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(175deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
}
.ld-in {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  padding: 12px 22px 12px 24px;
  color: #e6e9ed;
  filter: brightness(.9);
}
.n-kicker { margin: 0 0 5px; font: 650 10.5px/1 var(--xfont); letter-spacing: .18em; text-transform: uppercase; color: #f5a524; }
.lane-display h1 { margin: 0 0 6px; font: 700 29px/1.04 var(--xfont); letter-spacing: -.02em; color: #f4f6f8; }
.n-body { margin: 0; font: 400 12.5px/1.4 var(--xfont); color: #9aa1a9; max-width: 36em; }
.n-cta { display: grid; justify-items: center; gap: 7px; }
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  background: #f4f6f8; color: #0d0f12;
  font: 650 15px/1 var(--xfont); text-decoration: none; white-space: nowrap;
}
.cta:hover { background: #fff; }
.n-alt { color: #9aa1a9; font: 500 12.5px/1 var(--xfont); text-underline-offset: 3px; }
.cta:focus-visible, .n-alt:focus-visible { outline: 3px solid #f5a524; outline-offset: 3px; }
.n-keys { color: #6c737c; font: 500 11px/1 var(--xfont); white-space: nowrap; }
.n-sound { all: unset; cursor: pointer; color: #6c737c; font: 500 11px/1 var(--xfont); text-decoration: underline; text-underline-offset: 2px; }
.n-sound[aria-pressed="true"] { color: #c3c8ce; }
.n-sound:focus-visible { outline: 2px solid #f5a524; outline-offset: 2px; }
.n-keys kbd { display: inline-block; min-width: 18px; padding: 2px 5px; border-radius: 4px; background: #1b1f24; border: 1px solid #2c3138; color: #c3c8ce; font: 600 10.5px/1 var(--xfont); text-align: center; }

.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--grain, none);
  background-size: 192px 192px;
}


/* ------------------------------------------------------------------ the CCTV look (?look=cctv) */

/* Departure Mono (Helena Zhang, SIL OFL 1.1: assets/fonts/OFL.txt) */
@font-face { font-family: "Departure Mono"; src: url(assets/fonts/DepartureMono-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* the Eva look's faces: the Mac's own Helvetica Bold and Courier New Bold (tools/fonts.py; need licences before launch) */
@font-face { font-family: "BC Helvetica Bold"; src: url(assets/fonts/HelveticaBold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "BC Courier Bold"; src: url(assets/fonts/CourierNewBold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Courier New, regular, only its hyphen: the Eva look's dashed rule under the logo */
@font-face { font-family: "BC Courier Rule"; src: url(assets/fonts/CourierNewRule.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Courier New, the regular weight: the page below the monitor (the manifesto, the FAQ's answers) */
@font-face { font-family: "BC Courier"; src: url(assets/fonts/CourierNew.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* the right panel's header: ABC Monument Grotesk Medium (a Dinamo trial from Michael's library; needs a licence before launch) */
@font-face { font-family: "Monument Grotesk"; src: url(assets/fonts/ABCMonumentGrotesk-Medium-Trial.otf) format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
/* the lab look (Bond): Monument Grotesk Light and Bold, Monument Grotesk Mono Light; the Wayne look (TDKR): ABC ROM Mono.
   All Dinamo trials from Michael's library; they need licences before launch. */
@font-face { font-family: "Monument Grotesk"; src: url(assets/fonts/ABCMonumentGrotesk-Light-Trial.otf) format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Monument Grotesk"; src: url(assets/fonts/ABCMonumentGrotesk-Bold-Trial.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Monument Mono"; src: url(assets/fonts/ABCMonumentGroteskMono-Light-Trial.otf) format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "ROM Mono"; src: url(assets/fonts/ABCROMMono-Regular-Trial.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ROM Mono"; src: url(assets/fonts/ABCROMMono-Bold-Trial.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
/* the XP look's wordmark: ABC Stefan Bubble (a Dinamo trial from Michael's library; needs a licence before launch) */
@font-face { font-family: "Stefan Bubble"; src: url(assets/fonts/ABCStefan-Bubble-Trial.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.cc {
  position: absolute; left: 0; top: 0; width: 1074px;
  transform-origin: 0 0;
  display: grid; grid-template-rows: 24px 1fr 26px;
  background: #0b0b0b; color: #bdbdbd;
  font: 400 11px/1.2 "Departure Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  font-synthesis: none;
  filter: brightness(.92);
  --ui: "Departure Mono", ui-monospace, monospace;
  --mono: "Departure Mono", ui-monospace, monospace;
  --cyan: #2fa6c6;
  --yellow: #ffd23a;
}
.cc[hidden] { display: none; }
/* local preview only (?font=diatype): Dinamo trial fonts installed on this Mac; not licensed to ship */
.cc.font-diatype { --ui: "ABC Diatype Semi-Mono Condensed Unlicensed Trial", "Departure Mono", monospace; --mono: "ABC Diatype Mono Unlicensed Trial", "Departure Mono", monospace; font-family: var(--ui); }
.cc button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cc button:focus-visible, .cc a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.cc-title { display: flex; align-items: center; gap: 12px; padding: 0 10px; background: linear-gradient(180deg, #2a2a2a, #1a1a1a); border-bottom: 1px solid #000; white-space: nowrap; }
.cc-title b { font: 700 12px/1 var(--ui); letter-spacing: .14em; color: #d2d2d2; }
.cc-ico { width: 12px; height: 9px; border: 1px solid #9a9a9a; border-top-width: 3px; }
.cc-rule { flex: 1; height: 9px; background: repeating-linear-gradient(180deg, #5d5d5d 0 1px, transparent 1px 3px); }
.cc-meta { font: 500 10px/1 var(--ui); letter-spacing: .12em; color: #a8a8a8; }
.cc-icon-btn { width: 20px; height: 18px; display: grid; place-items: center; color: #8a8a8a !important; }
.cc-icon-btn svg { width: 15px; height: 15px; }
.cc-icon-btn .i-wave { display: none; }
.cc-icon-btn[aria-pressed="true"] { color: #e6e6e6 !important; }
.cc-icon-btn[aria-pressed="true"] .i-wave { display: inline; }
.cc-icon-btn[aria-pressed="true"] .i-mute { display: none; }

.cc-body { display: grid; grid-template-columns: 712px 1fr; gap: 10px; padding: 6px 10px 6px 8px; min-height: 0; }
.cc-left { display: grid; grid-template-rows: 14px 471px 1fr; min-height: 0; background: #000; padding: 0 4px; }
.cc-tabs { display: flex; align-items: center; gap: 18px; font: 700 8.5px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #3c3c3c; }
.cc-tabs b { display: inline-flex; align-items: center; gap: 5px; color: #767676; font-weight: 700; }
.cc-tabs b i { display: grid; place-items: center; width: 9px; height: 9px; background: #232323; color: #555; font-size: 7px; font-style: normal; }
.cc-feed { position: relative; width: 704px; height: 471px; background: #000; overflow: hidden; }
.cc-feed canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-tagslot { position: absolute; z-index: 2; overflow: hidden; }
/* parts only some skins show */
.cc-strip, .cc-ring, .cc-sys, .cc-caps, .cc-xclose, .cc-track { display: none; }
.cc-seq[hidden] { display: none; }
.cc-tagslot[hidden] { display: none; }
.cc-taginner { position: absolute; transform-origin: 0 0; }
.cc-transport { display: flex; align-items: center; gap: 18px; padding: 0 4px; border-top: 1px solid #1d1d1d; }
.cc-keys { display: flex; align-items: center; gap: 12px; color: #8a8a8a; }
.cc-keys button { width: 20px; height: 20px; display: grid; place-items: center; }
.cc-keys button:hover { color: #e6e6e6; }
.cc-keys svg { width: 13px; height: 13px; }
.cc-play { width: 22px !important; height: 22px !important; border-radius: 50%; border: 1px solid #5a5a5a !important; color: #e6e6e6; }
.cc-play .i-play { display: none; }
.cc-play.paused { background: var(--yellow) !important; border-color: var(--yellow) !important; color: #111; }
.cc-play.paused .i-play { display: inline; }
.cc-play.paused .i-pause { display: none; }
.cc-dir { font: 400 11px/1 var(--mono); letter-spacing: .04em; color: #7d7d7d; min-width: 86px; }
.cc-modes { display: flex; align-items: center; background: #1c1c1c; }
.cc-modes-h { padding: 0 10px; font: 700 9.5px/20px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #9a9a9a; background: #111; }
.cc-modes-keys { display: contents; }
.cc-modes button { height: 20px; padding: 0 12px; font: 700 10px/20px var(--ui); letter-spacing: .1em; color: #9a9a9a; border-left: 1px solid #0b0b0b !important; }
.cc-modes button:hover { color: #e6e6e6; }
.cc-modes button.on { background: #3a3a3a; color: #fff; }

.cc-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cc-mid { display: grid; grid-template-columns: 1fr; gap: 14px; min-height: 0; }
/* the sequence: a strip of thumbnails in the transport row */
.cc-tiles { display: flex; align-items: center; gap: 3px; }
.cc-tile { position: relative; overflow: hidden; width: 30px; height: 20px; background: #c9c9c5; outline: 1px solid #2a2a2a; outline-offset: 0; }
.cc-tile canvas { width: 100%; height: 100%; display: block; filter: contrast(1.05); }
.cc-tile:not(.cur) canvas { opacity: .62; }
.cc-tile.cur { outline: 1px solid #e6e6e6; }
.cc-tile:hover canvas { opacity: 1; }
.cc-flag { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent var(--yellow) transparent transparent; display: none; }
.cc-tile.flagged .cc-flag { display: block; }
.cc-about { min-width: 0; padding-top: 2px; }
.cc-about-h { margin: 0 0 12px; font: 500 21px/1.15 "Monument Grotesk", var(--ui); letter-spacing: -.01em; color: #e9e9e9; }
.cc-about-body p { margin: 0 0 8px; font: 400 11px/1.45 var(--ui); letter-spacing: .02em; color: #6f6f6f; }
.cc-about-body i { display: block; height: 6px; margin: 0 0 7px; background: #1d1d1d; }
.cc-about-body i.short { width: 62%; margin-bottom: 14px; }

.cc-result { display: grid; gap: 4px; }
.cc-result-h { display: flex; justify-content: space-between; font: 700 9.5px/16px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; border-bottom: 1px solid #222; }
.cc-result-h b { color: #9a9a9a; }
.cc-result.alarmed .cc-result-h b { color: #ff8a7a; }
.cc-alarm { display: block; width: 100%; padding: 5px 8px !important; text-align: left; background: rgba(255,59,42,.12) !important; border-left: 3px solid #ff3b2a !important; font: 400 11px/1.2 var(--mono) !important; letter-spacing: 0 !important; color: #ffb3a8 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-alarm[hidden] { display: none; }

.cc-install { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.cc-install-h { margin: 0; font: 700 10px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #cfcfcf; }
.cc-copy { margin: 0 0 2px; font: 500 11px/1.3 var(--ui); letter-spacing: .04em; color: #8a8a8a; }
.cc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--cta-h2, 50px);
  background: #232323; color: #d8d8d8; border: 1px solid #3c3c3c;
  font: 700 var(--cta-f2, 15px)/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.cc-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.cc-btn:hover { background: #2c2c2c; color: #fff; }
.cc-btn-primary { height: var(--cta-h1, 62px); font-size: var(--cta-f1, 18px); background: var(--cyan); border-color: #6fd0ea; color: #03161c; }
.cc-btn-primary:hover { background: #44b8d6; color: #03161c; }
.cc-btn-primary.flag { box-shadow: 0 0 0 2px var(--yellow); }
.cc-btn:active { transform: translateY(1px); }
.cc-install.mid .cc-copy { display: none; }
.cc.tight .cc-tiles, .cc.tight .cc-result, .cc.tight .cc-copy, .cc.tight .cc-install-h { display: none; }

/* standby: the seal on the console's grey while the scanner warms up, then it gives way to the feed */
.cc-boot {
  position: absolute; left: 0; right: 0; top: 24px; bottom: 26px; z-index: 6;
  display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 76%, rgba(160,178,200,.26) 100%),
    repeating-radial-gradient(circle at 50% 46%, rgba(255,255,255,.016) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 72% 88% at 50% 46%, #8f9398 0%, #7b7f84 38%, #64686d 72%, #55595e 100%);
  transition: opacity .6s ease;
}
.cc-boot.done { opacity: 0; pointer-events: none; }
.cc-boot[hidden] { display: none; }
.cc-seal { display: block; width: 360px; height: 360px; margin-top: -14px; opacity: .9; }
.cc-boot-l {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #dde1e5; opacity: .75;
}
#cc-boot-line { min-width: 170px; text-align: right; }
.cc-boot-bar { display: block; width: 140px; height: 6px; border: 1px solid rgba(221,225,229,.6); }
.cc-boot-bar b { display: block; height: 100%; width: 0; background: #dde1e5; }

.cc-foot { display: flex; align-items: center; gap: 0; padding: 0 8px; background: linear-gradient(180deg, #1f1f1f, #141414); border-top: 1px solid #000; white-space: nowrap; }
.cc-chs { display: flex; }
.cc-ch { padding: 0 12px !important; height: 26px; font: 700 10px/26px var(--ui) !important; letter-spacing: .12em !important; color: #8f8f8f !important; border-left: 1px solid #3a3a3a !important; }
.cc-ch:first-child { border-left: 0 !important; }
.cc-ch.on { color: #fff !important; background: #2b2b2b !important; }
.cc-ch:hover { color: #e6e6e6 !important; }
.cc-foot-f { padding: 0 12px; font: 700 10px/26px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #8f8f8f; border-left: 1px solid #3a3a3a; }
.cc-foot-rule { flex: 1; height: 1px; margin: 0 12px; background: #4a4a4a; }
.cc-load { color: #bdbdbd; }

/* ------------------------------------------------------------------ below the fold
   The search's and the FAQ's working parts, shared by every look; the page's layout and the Eva look's
   drawing of it are at the end of this file. Colours lean on currentColor so the light pages (clinical,
   y2k) follow their own ink. */

/* the logo: the console's seal (the Eva look draws the monitor's bag instead), and its line */
.bl-logo { display: flex; flex-direction: column; align-items: center; margin: 0 auto 64px; text-align: center; }
.bl-logo .ev-logo { margin: 0; }
.bl-logo .ev-art:empty { display: none; }
.bl-seal { display: block; width: min(240px, 60vw); height: auto; }
.bl-logo .ev-tagline { margin: 16px 0 0; }
.bl-tagline-text { display: block; font: 700 20px/1.2 var(--cond); letter-spacing: .05em; text-transform: uppercase; }

/* are they on Bag Check? (js/check.js) */
.pc-field { position: relative; }
.pc-field input, .pc-row input, .pc-row textarea {
  width: 100%; margin: 0; font: inherit; color: inherit; background: rgba(0,0,0,.18);
  border: 1.5px solid color-mix(in srgb, currentColor 42%, transparent); border-radius: 10px; outline: 0;
  -webkit-appearance: none; appearance: none;
}
.pc-field input { height: 58px; padding: 0 16px 0 50px; font-size: 19px; }
.pc-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pc-field input::placeholder, .pc-row input::placeholder, .pc-row textarea::placeholder { color: color-mix(in srgb, currentColor 42%, transparent); opacity: 1; }
.pc-field input:focus-visible, .pc-row input:focus-visible, .pc-row textarea:focus-visible { border-color: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.pc-row [aria-invalid="true"] { border-color: #e4572e; }
.pc-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pc-status { min-height: 1.5em; margin: 22px 0 12px; font-size: 14px; color: color-mix(in srgb, currentColor 78%, transparent); }
.pc-status:empty { margin-bottom: 0; }
.pc-other { margin: 16px 0 0; font-size: 14px; }

/* nothing matched: the request */
.pc-empty { margin-top: 12px; padding: 24px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); }
.pc-empty-h, .pc-done-h { margin: 0 0 8px; font: 800 24px/1.05 var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.pc-empty-copy { margin: 0 0 22px; }
.pc-form { display: grid; gap: 18px; }
.pc-form[hidden], .pc-done[hidden] { display: none; }
.pc-row { display: grid; gap: 6px; }
.pc-row label { font-size: 14px; font-weight: 700; }
.pc-row label i { margin-left: 6px; font-style: normal; font-weight: 400; opacity: .65; }
.pc-row input, .pc-row textarea { padding: 12px 14px; font-size: 16px; line-height: 1.4; }
.pc-row textarea { resize: vertical; min-height: 92px; }
.pc-row small { font-size: 13px; opacity: .7; }
.pc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pc-send { justify-self: start; min-width: 280px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; font: 700 17px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--band); cursor: pointer; }
.pc-send:disabled { opacity: .6; cursor: progress; }
.pc-form-status { margin: 0; font-size: 14px; font-weight: 700; }
.pc-form-status:empty { display: none; }
.pc-done p { margin: 0 0 16px; }
.pc-done:focus { outline: 0; }

/* the FAQ: native details, one open or many */
.faq { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.faq details { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.faq summary { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 18px 44px 18px 0; font-size: 18px; font-weight: 700; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
/* plus and minus as two bars, so both have the same weight in any face */
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(currentColor, currentColor) center / 16px 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 16px no-repeat;
}
.faq details[open] > summary::after { background-size: 16px 2.5px, 0 0; }
.faq summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.faq-a { max-width: 40em; padding: 0 0 22px; }
.faq-a p { margin: 0 0 .8em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: inherit; text-underline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones: the scene crops to the monitor and the lane display drops below it */
#lane-display.sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; transform: none !important; margin: 0; }
.lane-display.loose { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; transform: none !important; margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.lane-display.loose::after { display: none; }
.lane-display.loose .ld-in { padding: 24px 20px 28px; grid-template-columns: 1fr; }
.lane-display.loose h1 { font-size: 32px; }
.lane-display.loose .n-body { font-size: 15px; }
.lane-display.loose .n-cta { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
.lane-display.loose .n-keys { display: none; }
.n-phone { display: none; }
.lane-display.loose .n-phone { display: inline-flex; align-items: center; gap: 16px; }
.lane-display.loose .cta { min-height: 48px; padding: 0 22px; }
.cta svg { width: 1.1em; height: 1.1em; }

@media (max-width: 720px) {
  .pc-empty { padding: 20px 16px; }
  .pc-send { justify-self: stretch; min-width: 0; }
  .faq summary { font-size: 17px; }
}


/* ------------------------------------------------------------------ the lab look (?look=lab)
   After Territory Studio's lab screens for No Time To Die: bone, a fine grid, charcoal and greys, one
   ochre accent; slash titles in a light wide mono; light/bold/light data stacks; bilateral symmetry
   (an index column left, the result and install column right, the feed between); paper cards with a
   heavy-over-thin "lid". */
.cc.skin-lab {
  --bone: #eceeec; --paper: #f5f6f4; --ink: #2a2d30; --dim: #80878d; --rule: #c9cfd1; --ochre: #e2a842; --ochre-d: #a5721a;
  --ui: "Monument Mono", "Departure Mono", ui-monospace, monospace;
  --mono: "Monument Mono", "Departure Mono", ui-monospace, monospace;
  --sans: "Monument Grotesk", system-ui, sans-serif;
  grid-template-rows: 30px 1fr 24px;
  background: linear-gradient(180deg, #e6e9e8, #dde1e0); color: var(--ink);
  font: 300 11px/1.3 var(--mono); letter-spacing: .04em;
  filter: none;
}
.skin-lab button:focus-visible, .skin-lab a:focus-visible { outline: 2px solid var(--ochre-d); outline-offset: 2px; }
.skin-lab .cc-title { background: var(--paper); border-bottom: 1px solid var(--rule); gap: 14px; padding: 0 12px; }
.skin-lab .cc-title b { font: 300 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink); }
.skin-lab .cc-title b::after { content: " /"; color: var(--dim); }
.skin-lab .cc-ico { width: 13px; height: 13px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px 4px, var(--ink) 4.5px 5.5px, transparent 6px); }
.skin-lab .cc-rule { height: 8px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 6px) bottom / 100% 4px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom / 100% 1px no-repeat; opacity: .8; }
.skin-lab .cc-meta { font: 300 10px/1 var(--mono); letter-spacing: .1em; color: var(--dim); }
.skin-lab .cc-icon-btn { color: var(--dim) !important; }
.skin-lab .cc-icon-btn[aria-pressed="true"] { color: var(--ink) !important; }

.skin-lab .cc-body { grid-template-columns: 196px 1fr 196px; grid-template-rows: auto 1fr auto auto; gap: 10px; padding: 8px 10px 6px; }
.skin-lab .cc-right, .skin-lab .cc-mid { display: contents; }
.skin-lab .cc-tabs { display: none; }
.skin-lab .cc-left { grid-column: 2; grid-row: 1 / -1; grid-template-rows: 22px 452px 1fr; background: none; padding: 0; }
.skin-lab .cc-strip { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 2px 5px; }
.skin-lab .cc-strip b { font: 300 13px/1 var(--mono); letter-spacing: .08em; color: var(--ink); }
.skin-lab .cc-strip span { font: 300 9px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.skin-lab .cc-feed { width: 636px; height: 452px; background: var(--bone); box-shadow: 0 0 0 1px var(--rule); }

/* the cards: paper, a hairline, a heavy-over-thin lid */
.skin-lab .cc-about, .skin-lab .cc-seq, .skin-lab .cc-result, .skin-lab .cc-install {
  position: relative; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 12px 12px 11px; min-width: 0;
}
.skin-lab .cc-about::before, .skin-lab .cc-seq::before, .skin-lab .cc-result::before, .skin-lab .cc-install::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--ink); opacity: .9;
}
.skin-lab .cc-about { grid-column: 1; grid-row: 1; }
.skin-lab .cc-about-h { margin: 0 0 3px; font: 500 21px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.skin-lab .cc-about-h::after { content: "DB/03 · LANE 03"; display: block; margin-top: 6px; font: 300 8.5px/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
.skin-lab .cc-about-body { margin-top: 10px; }
.skin-lab .cc-about-body::before { content: ""; display: block; width: 14px; height: 1px; background: var(--ink); margin-bottom: 10px; }
.skin-lab .cc-about-body p { font: 300 10.5px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); }
.skin-lab .cc-about-body i { background: #e1e5e4; }

.skin-lab .cc-seq { grid-column: 1; grid-row: 2 / -1; display: flex; flex-direction: column; gap: 1px; }
.skin-lab .cc-seq-h { margin: 0 0 8px; font: 300 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.skin-lab .cc-seq-h em { font-style: normal; color: var(--dim); }
.skin-lab .cc-seq-h small { display: block; margin-top: 5px; font: 300 8.5px/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
.skin-lab .cc-seq-r { position: relative; display: grid; grid-template-columns: 24px 1fr 9px; align-items: center; gap: 6px; height: 22px; padding: 0 2px 0 8px !important; text-align: left; border-bottom: 1px solid #e3e7e6 !important; }
.skin-lab .cc-seq-r b { font: 700 11px/1 var(--sans); color: var(--ink); }
.skin-lab .cc-seq-r span { font: 300 10px/1 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-lab .cc-seq-r i { width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; box-sizing: border-box; }
.skin-lab .cc-seq-r.flagged i { background: var(--ochre); border-color: var(--ochre-d); }
.skin-lab .cc-seq-r.cur { background: rgba(226,168,66,.16); }
.skin-lab .cc-seq-r.cur::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; background: var(--ochre); }
.skin-lab .cc-seq-r.cur span { color: var(--ink); }
.skin-lab .cc-seq-r:hover span { color: var(--ink); }

.skin-lab .cc-result { grid-column: 3; grid-row: 1 / 3; align-content: start; gap: 8px; }
.skin-lab .cc-result-h { font: 300 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink); border: 0; padding-bottom: 0; }
.skin-lab .cc-result-h span::after { content: " /"; color: var(--dim); }
.skin-lab .cc-result-h b { font: 300 9px/12px var(--mono); letter-spacing: .14em; color: var(--dim); }
.skin-lab .cc-result.alarmed .cc-result-h b { color: var(--ochre-d); }
/* the result's ring, after the lab's ochre value rings: segments that fill as the post is read */
.skin-lab .cc-ring { --f: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 128px; height: 128px; margin: 4px auto 2px; }
.skin-lab .cc-ring i { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ochre) calc(var(--f) * 1turn), #d9dedd 0);
  -webkit-mask: radial-gradient(circle, transparent 47px, #000 48px 63px, transparent 64px), repeating-conic-gradient(#000 0 8deg, transparent 8deg 10deg);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 47px, #000 48px 63px, transparent 64px), repeating-conic-gradient(#000 0 8deg, transparent 8deg 10deg); mask-composite: intersect; }
.skin-lab .cc-ring::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 1px var(--rule); transition: background .2s; }
.skin-lab .cc-ring::after { content: ""; position: absolute; inset: 29px; border-radius: 50%; border: 1px dashed var(--rule); }
.skin-lab .cc-result.alarmed .cc-ring::before { background: var(--paper); box-shadow: 0 0 0 1px var(--ochre-d), inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ochre); }
.skin-lab .cc-ring b { position: relative; z-index: 1; font: 700 30px/1 var(--sans); color: var(--ink); }
.skin-lab .cc-ring span { position: relative; z-index: 1; max-width: 62px; margin-top: 4px; text-align: center; font: 300 7px/1.25 var(--mono); letter-spacing: .1em; color: var(--ink); opacity: .85; }
.skin-lab .cc-alarm { background: rgba(226,168,66,.16) !important; border-left: 3px solid var(--ochre) !important; color: var(--ink) !important; font: 300 9.5px/1.3 var(--mono) !important; letter-spacing: .04em !important; padding: 6px 8px !important; white-space: normal; }

.skin-lab .cc-install { grid-column: 3; grid-row: 3 / -1; margin-top: 0; align-self: end; gap: 7px; }
.skin-lab .cc-install-h { font: 300 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.skin-lab .cc-install-h::after { content: " /"; color: var(--dim); }
.skin-lab .cc-copy { font: 300 10px/1.4 var(--mono); letter-spacing: .02em; color: var(--dim); }
.skin-lab .cc-btn { gap: 9px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font: 500 var(--cta-f2, 15px)/1 var(--sans); letter-spacing: 0; text-transform: none; }
.skin-lab .cc-btn:hover { background: #fff; color: var(--ink); }
.skin-lab .cc-btn-primary { background: var(--ochre); border-color: var(--ochre-d); color: #1d1f21; font-size: var(--cta-f1, 17px); }
.skin-lab .cc-btn-primary:hover { background: #e9b452; color: #1d1f21; }
.skin-lab .cc-btn-primary.flag { box-shadow: 0 0 0 2px var(--ink); }

/* the transport, centred under the feed: image modes left, belt keys centre, belt state right */
.skin-lab .cc-transport { display: grid; grid-template-columns: 1fr repeat(3, auto) 1fr; align-items: center; gap: 0 12px; padding: 0; border: 0; color: var(--ink); }
.skin-lab .cc-tiles { display: none; }
.skin-lab .cc-keys { display: contents; }
.skin-lab .cc-dir { grid-column: 5; grid-row: 1; justify-self: end; font: 300 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); min-width: 0; }
.skin-lab .cc-play { border-color: var(--ink) !important; color: var(--ink); }
.skin-lab .cc-play.paused { background: var(--ochre) !important; border-color: var(--ochre-d) !important; color: var(--ink); }
.skin-lab .cc-keys button:hover { color: #000; }
.skin-lab .cc-modes { grid-column: 1; grid-row: 1; justify-self: start; background: none; gap: 0; border: 1px solid var(--rule); }
.skin-lab .cc-modes-h { background: none; color: var(--dim); font: 300 8.5px/20px var(--mono); letter-spacing: .16em; padding: 0 8px; }
.skin-lab .cc-modes button { font: 300 9.5px/20px var(--mono); letter-spacing: .1em; color: var(--dim); border-left: 1px solid var(--rule) !important; padding: 0 9px; }
.skin-lab .cc-modes button:hover { color: var(--ink); }
.skin-lab .cc-modes button.on { background: var(--ink); color: var(--paper); }

/* the footer: channel keys, the system line, the load readout */
.skin-lab .cc-foot { background: var(--paper); border-top: 1px solid var(--rule); }
.skin-lab .cc-ch { height: 24px; font: 300 9.5px/24px var(--mono) !important; letter-spacing: .1em !important; color: var(--dim) !important; border-left: 1px solid #e2e6e5 !important; padding: 0 10px !important; }
.skin-lab .cc-ch.on { color: var(--ink) !important; background: none !important; box-shadow: inset 0 -2px 0 var(--ochre); }
.skin-lab .cc-ch:hover { color: var(--ink) !important; }
.skin-lab .cc-foot-f { font: 300 9.5px/24px var(--mono); letter-spacing: .1em; color: var(--dim); border-left: 1px solid #e2e6e5; text-transform: none; }
.skin-lab .cc-sys { display: block; }
.skin-lab .cc-sys + .cc-foot-f, .skin-lab .cc-sys + .cc-foot-f + .cc-foot-f { display: none; }
.skin-lab .cc-foot-rule { background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 6px) center / 100% 5px no-repeat; }

/* standby: the lab's seal on bone */
.skin-lab .cc-boot { top: 30px; bottom: 24px;
  background: linear-gradient(90deg, rgba(42,45,48,.045) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(rgba(42,45,48,.045) 1px, transparent 1px) 0 0 / 12px 12px, radial-gradient(ellipse 70% 85% at 50% 46%, #f3f4f2, #dfe3e2); }
.skin-lab .cc-boot-l { color: var(--ink); opacity: .85; font-family: var(--mono); font-weight: 300; }
.skin-lab .cc-boot-bar { border-color: var(--ink); }
.skin-lab .cc-boot-bar b { background: var(--ochre); }

/* ------------------------------------------------------------------ the Wayne look (?look=wayne)
   After Jorge Almeida's screens for The Dark Knight Rises: black, 1px white rules and boxes, one red;
   squared mono caps; inverted tabs; status tables; numbered cells; a centred boxed title. */
.cc.skin-wayne {
  --ink: #f2f2f2; --dim: #8c8c8c; --line: #f2f2f2; --red: #e3262c; --bg: #030303;
  --ui: "ROM Mono", "Departure Mono", ui-monospace, monospace;
  --mono: "ROM Mono", "Departure Mono", ui-monospace, monospace;
  grid-template-rows: 26px 1fr 26px;
  background: var(--bg); color: var(--ink);
  font: 400 11px/1.25 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  filter: none;
}
.skin-wayne button:focus-visible, .skin-wayne a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skin-wayne .cc-title { background: var(--bg); border-bottom: 1px solid var(--line); gap: 10px; padding: 0 8px; }
.skin-wayne .cc-title b { font: 700 11px/1 var(--mono); letter-spacing: .06em; color: var(--bg); background: var(--ink); padding: 4px 7px; }
.skin-wayne .cc-ico { display: none; }
.skin-wayne .cc-rule { height: 1px; background: var(--line); opacity: .5; }
.skin-wayne .cc-meta { font: 400 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink); border: 1px solid var(--line); padding: 4px 7px; }
.skin-wayne .cc-icon-btn { color: var(--dim) !important; border: 1px solid var(--dim) !important; width: 22px; height: 18px; }
.skin-wayne .cc-icon-btn[aria-pressed="true"] { color: var(--ink) !important; border-color: var(--ink) !important; }

.skin-wayne .cc-body { grid-template-columns: 712px 1fr; gap: 8px; padding: 6px 8px 6px 6px; }
.skin-wayne .cc-tabs { display: none; }
.skin-wayne .cc-left { grid-template-rows: 26px 446px 1fr; background: none; padding: 0 4px; }
/* the boxed, centred title over the feed */
.skin-wayne .cc-strip { display: flex; align-items: center; justify-content: center; gap: 0; height: 21px; border: 1px solid var(--line); border-bottom: 0; }
.skin-wayne .cc-strip b { font: 700 11px/1 var(--mono); letter-spacing: .04em; color: var(--ink); padding: 0 10px; }
.skin-wayne .cc-strip span { font: 400 10px/21px var(--mono); color: var(--dim); padding: 0 10px; border-left: 1px solid var(--line); }
.skin-wayne .cc-feed { height: 446px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }

.skin-wayne .cc-right { gap: 6px; }
.skin-wayne .cc-mid { display: flex; flex-direction: column; gap: 6px; }
.skin-wayne .cc-about, .skin-wayne .cc-seq, .skin-wayne .cc-result, .skin-wayne .cc-install { border: 1px solid var(--line); padding: 0 0 7px; }
.skin-wayne .cc-about-h { margin: 0; font: 700 11px/20px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bg); background: var(--ink); padding: 0 8px; }
.skin-wayne .cc-about-body { padding: 7px 8px 0; }
.skin-wayne .cc-about-body p { margin: 0 0 5px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0; color: var(--dim); text-transform: none; }
.skin-wayne .cc-about-body i { background: #1b1b1b; height: 5px; margin-bottom: 5px; }
.skin-wayne .cc-about-body i:nth-of-type(3), .skin-wayne .cc-about-body i:nth-of-type(4) { display: none; }
.skin-wayne .cc-about-body i.short { margin-bottom: 9px; }

.skin-wayne .cc-seq { display: grid; padding: 0; }
.skin-wayne .cc-seq-h, .skin-wayne .cc-seq-r { display: grid; grid-template-columns: 34px 1fr 76px; align-items: center; height: 17px; }
.skin-wayne .cc-seq-h { margin: 0; background: var(--ink); color: var(--bg); font: 700 9.5px/17px var(--mono); letter-spacing: .06em; }
.skin-wayne .cc-seq-h span { padding: 0 6px; }
.skin-wayne .cc-seq-h span + span { border-left: 1px solid var(--bg); }
.skin-wayne .cc-seq-r { text-align: left; border-top: 1px solid #2a2a2a !important; font: 400 10.5px/17px var(--mono) !important; text-transform: uppercase; }
.skin-wayne .cc-seq-r b { padding: 0 6px; font-weight: 700; }
.skin-wayne .cc-seq-r span { padding: 0 6px; border-left: 1px solid #2a2a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.skin-wayne .cc-seq-r i { padding: 0 6px; border-left: 1px solid #2a2a2a; font: 700 9.5px/17px var(--mono); font-style: normal; color: var(--dim); }
.skin-wayne .cc-seq-r i::after { content: "QUEUED"; }
.skin-wayne .cc-seq-r.flagged i { color: var(--red); }
.skin-wayne .cc-seq-r.flagged i::after { content: "FLAGGED"; }
.skin-wayne .cc-seq-r.cur { background: var(--ink); }
.skin-wayne .cc-seq-r.cur b, .skin-wayne .cc-seq-r.cur span { color: var(--bg); }
.skin-wayne .cc-seq-r.cur i { color: var(--bg); }
.skin-wayne .cc-seq-r.cur.flagged i { background: var(--red); color: #fff; }
.skin-wayne .cc-seq-r:hover span { text-decoration: underline; }

.skin-wayne .cc-result { gap: 0; padding: 0; }
.skin-wayne .cc-result-h { height: 20px; border: 0; padding: 0 8px; font: 700 11px/20px var(--mono); letter-spacing: .06em; color: var(--ink); background: repeating-linear-gradient(135deg, #2c2c2c 0 1.5px, transparent 1.5px 6px); }
.skin-wayne .cc-result-h span { background: var(--bg); padding: 0 6px; margin-left: -6px; }
.skin-wayne .cc-result-h b { background: var(--bg); padding: 0 6px; margin-right: -6px; color: var(--dim); }
.skin-wayne .cc-result.alarmed .cc-result-h { background: repeating-linear-gradient(135deg, var(--red) 0 1.5px, transparent 1.5px 6px); }
.skin-wayne .cc-result.alarmed .cc-result-h b { color: var(--red); }
.skin-wayne .cc-alarm { margin: 0 !important; background: var(--red) !important; border: 0 !important; color: #fff !important; font: 700 10.5px/1.2 var(--mono) !important; letter-spacing: .02em !important; padding: 6px 8px !important; text-align: center; }

.skin-wayne .cc-install { padding: 7px 7px 7px; gap: 6px; }
.skin-wayne .cc-install-h { font: 700 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
.skin-wayne .cc-copy { font: 400 10.5px/1.35 var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.skin-wayne .cc-btn { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); font: 700 var(--cta-f2, 15px)/1 var(--mono); letter-spacing: .04em; }
.skin-wayne .cc-btn:hover { background: #151515; color: #fff; }
.skin-wayne .cc-btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); font-size: var(--cta-f1, 17px); }
.skin-wayne .cc-btn-primary:hover { background: #fff; color: #000; }
.skin-wayne .cc-btn-primary.flag { background: var(--red); border-color: var(--red); color: #fff; box-shadow: none; }

.skin-wayne .cc-transport { gap: 12px; padding: 0; border: 0; }
.skin-wayne .cc-tiles { display: none; }
.skin-wayne .cc-keys { color: var(--ink); gap: 6px; }
.skin-wayne .cc-keys button { width: 26px; height: 20px; border: 1px solid var(--ink) !important; }
.skin-wayne .cc-play { border-radius: 0; width: 34px !important; height: 20px !important; }
.skin-wayne .cc-play.paused { background: var(--red) !important; border-color: var(--red) !important; color: #fff; }
.skin-wayne .cc-dir { font: 700 10px/1 var(--mono); color: var(--ink); min-width: 92px; padding-left: 6px; }
.skin-wayne .cc-modes { margin-left: auto; background: none; border: 1px solid var(--ink); }
.skin-wayne .cc-modes-h { background: var(--ink); color: var(--bg); font: 700 10px/20px var(--mono); letter-spacing: .04em; padding: 0 7px; }
.skin-wayne .cc-modes button { font: 700 10px/20px var(--mono); letter-spacing: .04em; color: var(--ink); border-left: 1px solid var(--ink) !important; padding: 0 10px; }
.skin-wayne .cc-modes button.on { background: var(--red); color: #fff; }

/* the footer: numbered cells, as on the datalink's channel grid */
.skin-wayne .cc-foot { background: var(--bg); border-top: 1px solid var(--line); gap: 4px; padding: 0 6px; }
.skin-wayne .cc-chs { gap: 3px; }
.skin-wayne .cc-ch { height: 18px; padding: 0 6px !important; font: 700 10px/16px var(--mono) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.skin-wayne .cc-ch:first-child { border-left: 1px solid var(--ink) !important; }
.skin-wayne .cc-ch.on { background: var(--ink) !important; color: var(--bg) !important; }
.skin-wayne .cc-foot-f { font: 700 10px/16px var(--mono); color: var(--ink); border: 1px solid var(--ink); padding: 0 7px; }
.skin-wayne .cc-foot-f { margin-left: 3px; }
.skin-wayne .cc-foot-rule { background: var(--line); opacity: .4; }

.skin-wayne .cc-boot { top: 26px; bottom: 26px; background: radial-gradient(ellipse 70% 85% at 50% 46%, #121212, #000); }
.skin-wayne .cc-boot-l { color: var(--ink); opacity: 1; font: 700 10px/1 var(--mono); }
.skin-wayne .cc-boot-bar { border-color: var(--ink); }
.skin-wayne .cc-boot-bar b { background: var(--red); }

/* ------------------------------------------------------------------ the photograph's grades (tools/grade.py)
   each sets the page colour its fade settles into, and the page below follows */
html[data-photo="clinical"] { --page: #d6dad9; }
html[data-photo="cleanroom"] { --page: #1d3135; }
html[data-photo="night"] { --page: #070707; }
html[data-photo="batcave"] { --page: #05070b; }
html[data-photo="clinical"] body { color: #22262a; }

/* the machine's lamp on each grade: its "off" patch in the grade's own colour; red on the Wayne look */
html[data-photo="clinical"] .lamp { --lamp-bg: 101,106,106; --lamp-core: #5b5f5f; }
html[data-photo="cleanroom"] .lamp { --lamp-bg: 64,85,86; --lamp-core: #3a4f50; }
html[data-photo="night"] .lamp { --lamp-bg: 10,10,10; --lamp-core: #1a0c0c; }
html[data-photo="batcave"] .lamp { --lamp-bg: 6,8,13; --lamp-core: #0d1119; }
html[data-look="wayne"] .lamp .lamp-glow { background: radial-gradient(closest-side, rgba(255,70,70,.8), rgba(227,38,44,.3) 45%, rgba(227,38,44,0) 100%); }
/* the "Learn more" sticker in each look's colours */
html[data-look="lab"] .learn { background: linear-gradient(180deg, #f3f4f1, #e3e6e4); color: #2a2d30; font-family: "Monument Mono", ui-monospace, monospace; font-weight: 300; font-size: 15px; letter-spacing: .12em; box-shadow: inset 0 3px 0 #2a2d30, 0 1px 1px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.2); filter: none; }
html[data-look="lab"] .learn::after { background: linear-gradient(225deg, transparent 50%, #ffffff 50%, #c9cfd1); }
html[data-look="lab"] .learn svg { color: #a5721a; }
html[data-look="wayne"] .learn { background: #e3262c; color: #fff; font-family: "ROM Mono", ui-monospace, monospace; font-weight: 700; font-size: 15px; letter-spacing: .06em; border-radius: 0; filter: none; }
html[data-look="wayne"] .learn::after { background: linear-gradient(225deg, transparent 50%, #ff8a8d 50%, #b81d22); }

/* the lab on a small screen (sizeKeys sets .tight when the keys must grow to stay 44px on screen):
   the index and the about card go, and the install keys get a full-height column beside the feed */
.cc.tight.skin-lab .cc-body { grid-template-columns: 636px 1fr; }
.cc.tight.skin-lab .cc-left { grid-column: 1; }
.cc.tight.skin-lab .cc-about, .cc.tight.skin-lab .cc-seq, .cc.tight.skin-lab .cc-result { display: none; }
.cc.tight.skin-lab .cc-install { grid-column: 2; grid-row: 1 / -1; align-self: stretch; justify-content: center; }
.cc.tight.skin-lab .cc-btn { letter-spacing: -.01em; }
/* the posts on the belt, exposed for each grade of the photograph */
html[data-photo="clinical"] .card .face { filter: brightness(.9) contrast(.9) saturate(.4); }
html[data-photo="cleanroom"] .card .face { filter: brightness(.7) contrast(.92) saturate(.35); }
html[data-photo="night"] .card .face { filter: brightness(.4) contrast(1.05) saturate(.35); }
html[data-photo="batcave"] .card .face { filter: brightness(.38) contrast(1) saturate(.3); }

/* ------------------------------------------------------------------ the XP look (?look=xp)
   Windows XP utility software crossed with a Y2K rave flyer: a Luna-blue title bar, thin cobalt
   outlines, pale grey-mint panels, compact Tahoma; glossy gel buttons only for the actions that
   matter; small utility windows down the right; a media bar under the scan. */
.cc.skin-xp {
  --navy: #0b1f86; --cobalt: #1f3fd0; --luna: #0b4ee3; --panel: #e9f0ee; --edge: #7f9db9; --sel: #316ac5;
  --acid: #36d12f; --pink: #ff2d7a;
  --ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; --mono: var(--ui);
  --title: "Trebuchet MS", Tahoma, system-ui, sans-serif;
  grid-template-rows: 28px 1fr 28px;
  background: var(--panel); color: var(--navy);
  font: 400 11px/1.3 var(--ui); letter-spacing: 0; text-transform: none;
  border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 3px var(--luna);
  filter: none;
}
.skin-xp button:focus-visible, .skin-xp a:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
/* the title bar */
.skin-xp .cc-title { gap: 6px; padding: 0 5px 0 8px; border: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #3e8df5 0%, #0a5ef0 8%, #0058e6 40%, #0050dc 88%, #003cbc 100%); }
.skin-xp .cc-ico { width: 16px; height: 16px; border: 0; background: url(assets/logo/bagcheck-seal-xp.svg) center / contain no-repeat; filter: drop-shadow(0 0 1px #fff); }
.skin-xp .cc-title b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 13px/1 var(--title); letter-spacing: 0; color: #fff; text-shadow: 1px 1px 0 #0a1f6a; }
.skin-xp .cc-rule, .skin-xp .cc-meta { display: none; }
.skin-xp .cc-caps { display: flex; gap: 2px; }
.skin-xp .cc-caps i, .skin-xp .cc-icon-btn, .skin-xp .cc-xclose {
  display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 1px solid #fff !important; border-radius: 3px;
  background: radial-gradient(circle at 30% 25%, #8cb6ff, #2a6af0 60%, #1748c8) !important; box-shadow: inset -1px -1px 0 rgba(0,0,40,.35); color: #fff !important; }
.skin-xp .cc-cap-min::after { content: ""; width: 7px; height: 2px; margin-top: 7px; background: #fff; }
.skin-xp .cc-cap-max::after { content: ""; width: 8px; height: 7px; border: 1px solid #fff; border-top-width: 2px; }
.skin-xp .cc-icon-btn svg { width: 14px; height: 14px; }
.skin-xp .cc-xclose { cursor: pointer; background: radial-gradient(circle at 30% 25%, #ffa68f, #e8542f 55%, #c1381a) !important; }
.skin-xp .cc-xclose svg { width: 12px; height: 12px; }

.skin-xp .cc-body { grid-template-columns: 712px 1fr; gap: 6px; padding: 4px 7px 4px 6px; }
.skin-xp .cc-tabs { display: none; }
.skin-xp .cc-left { grid-template-rows: 20px 446px 1fr; background: none; padding: 0; }
/* the menu bar */
.skin-xp .cc-strip { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; background: #f6f9f8; border: 1px solid #c3d1e6; border-bottom: 0; }
.skin-xp .cc-strip b { font: 400 11px/1 var(--ui); color: #000; white-space: pre; }
.skin-xp .cc-strip span { font: 400 11px/1 var(--ui); color: #5a6a8a; }
.skin-xp .cc-feed { width: 704px; height: 446px; background: #eef5f2; box-shadow: 0 0 0 1px var(--edge); }

/* the media bar: gel pills for the image modes, bevelled transport keys, a track, the belt's state */
.skin-xp .cc-transport { display: flex; align-items: center; gap: 10px; padding: 0 2px; border: 0; }
.skin-xp .cc-tiles { display: none; }
.skin-xp .cc-modes { order: 0; background: none; gap: 5px; }
.skin-xp .cc-modes-h { display: none; }
.skin-xp .cc-modes button {
  position: relative; height: 26px; min-width: 66px; padding: 0 12px; border-radius: 13px; overflow: hidden;
  font: 700 11px/26px var(--ui); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  border: 1px solid rgba(0,0,0,.45) !important; box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3); opacity: .72;
  background: var(--gel) !important;
}
.skin-xp .cc-modes button::before { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 45%; border-radius: 10px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.12)); pointer-events: none; }
.skin-xp .cc-modes button:nth-child(1) { --gel: linear-gradient(180deg, #8ef56a, #2fd12d 50%, #109a1a 52%, #49e24a); color: #052a07; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.skin-xp .cc-modes button:nth-child(2) { --gel: linear-gradient(180deg, #ff9fc4, #ff3d86 50%, #d4135d 52%, #ff5a9a); }
.skin-xp .cc-modes button:nth-child(3) { --gel: linear-gradient(180deg, #7aa6ff, #2a5ef2 50%, #0b34c8 52%, #3e7dff); }
.skin-xp .cc-modes button:nth-child(4) { --gel: linear-gradient(180deg, #f4f6fa, #c4cbd8 50%, #98a2b6 52%, #d8dde8); color: #0b1f86; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.skin-xp .cc-modes button:hover { opacity: .9; }
.skin-xp .cc-modes button.on { opacity: 1; box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 0 0 2px #fff, 0 0 0 3px var(--navy); }
.skin-xp .cc-keys { order: 1; gap: 3px; color: var(--navy); }
.skin-xp .cc-keys button, .skin-xp .cc-play {
  width: 28px !important; height: 24px !important; border-radius: 3px; border: 1px solid #003c74 !important;
  background: linear-gradient(180deg, #ffffff, #f0f0ea 60%, #d8d2c4) !important; color: var(--navy); box-shadow: inset -1px -1px 0 rgba(0,0,0,.08); }
.skin-xp .cc-keys button:hover { box-shadow: inset 0 0 0 2px #f8b330; }
.skin-xp .cc-play.paused { background: linear-gradient(180deg, #c9f7bf, #5bd64e 60%, #2f9d27) !important; color: #052a07; }
.skin-xp .cc-dir { display: inline-block; font: 400 11px/1 var(--ui); color: #4a5a7a; min-width: 70px; padding-left: 5px; text-transform: lowercase; }
.skin-xp .cc-dir::first-letter { text-transform: uppercase; }
.skin-xp .cc-track { order: 2; display: block; flex: 1; height: 9px; background: #fff; border: 1px solid; border-color: var(--edge) #d6dfe9 #d6dfe9 var(--edge); }
.skin-xp .cc-track b { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #9be89a, #36c13a 50%, #1d8c22); }

/* the right column: small utility windows, each with its own blue title bar */
.skin-xp .cc-right { gap: 6px; }
.skin-xp .cc-mid { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.skin-xp .cc-about { flex: 1 1 auto; min-height: 0; }
.skin-xp .cc-seq, .skin-xp .cc-result, .skin-xp .cc-install { flex: none; }
.skin-xp .cc-about, .skin-xp .cc-seq, .skin-xp .cc-result, .skin-xp .cc-install {
  position: relative; background: #f2f6f5; border: 1px solid var(--luna); border-radius: 6px 6px 0 0; overflow: hidden; padding: 0 0 6px;
}
.skin-xp .cc-about::before, .skin-xp .cc-seq-h, .skin-xp .cc-result-h, .skin-xp .cc-install-h {
  display: flex; align-items: center; justify-content: space-between; height: 19px; margin: 0; padding: 0 22px 0 7px; position: relative;
  background: linear-gradient(180deg, #3e8df5 0%, #0a5ef0 10%, #0058e6 50%, #0046d4 100%); border: 0;
  font: 700 11.5px/19px var(--title); letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 1px 1px 0 #0a1f6a;
}
.skin-xp .cc-about::before { content: "About Bag Check"; }
.skin-xp .cc-about::after, .skin-xp .cc-seq-h::after, .skin-xp .cc-result-h::after, .skin-xp .cc-install-h::after {
  content: "✕"; position: absolute; right: 3px; top: 2px; width: 13px; height: 13px; display: grid; place-items: center;
  border: 1px solid #fff; border-radius: 2px; background: #2a6af0; font: 700 9px/1 var(--ui); color: #fff; text-shadow: none;
}
.skin-xp .cc-about::after { top: 3px; }
.skin-xp .cc-about-h { margin: 5px 8px 0; font: 400 27px/1 "Stefan Bubble", var(--ui); letter-spacing: .01em; color: transparent;
  background: linear-gradient(180deg, #b9d3ff 0%, #4f86ff 38%, #1238c8 50%, #2a62f0 72%, #9fc0ff 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .8px #0b1f86; filter: drop-shadow(1.5px 1.5px 0 #ffe34a); }
.skin-xp .cc-about-h::after { content: "v.1.03 · SECURE POST INSPECTION"; display: block; margin-top: 4px; font: 700 8.5px/1 var(--ui); letter-spacing: .02em; color: var(--navy); -webkit-text-stroke: 0; background: none; -webkit-background-clip: border-box; filter: none; }
.skin-xp .cc-about-body { padding: 4px 8px 0; }
.skin-xp .cc-about-body p { margin: 0 0 3px; font: 400 10.5px/1.3 var(--ui); color: #5a6a8a; }
.skin-xp .cc-about-body i { display: none; }

.skin-xp .cc-seq { display: grid; padding-bottom: 3px; }
.skin-xp .cc-seq-cols { display: grid; grid-template-columns: 1fr 34px 30px; margin: 2px 6px 1px 26px; font: 400 10.5px/1 var(--ui); color: #4a6aa8; }
.skin-xp .cc-seq-r { display: grid; grid-template-columns: 14px 1fr 34px 30px; align-items: center; gap: 6px; height: 17px; margin: 0 4px; padding: 0 0 0 4px !important; text-align: left; font: 400 11.5px/18px var(--ui) !important; color: var(--navy); }
.skin-xp .cc-seq-r svg { width: 13px; height: 13px; }
.skin-xp .cc-seq-r svg .s { fill: #c5cddd; stroke: #6a7a9a; stroke-width: 1; }
.skin-xp .cc-seq-r svg .x, .skin-xp .cc-seq-r svg .b { stroke: #fff; stroke-width: 1.7; stroke-linecap: round; fill: none; display: none; }
.skin-xp .cc-seq-r.flagged svg .s { fill: #ff3b4e; stroke: #8a0f1d; }
.skin-xp .cc-seq-r.flagged svg .x { display: inline; }
.skin-xp .cc-seq-r.cur:not(.flagged) svg .s { fill: #f2c200; stroke: #8a6c00; }
.skin-xp .cc-seq-r.cur:not(.flagged) svg .b { display: inline; stroke: #5a4500; }
.skin-xp .cc-seq-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-xp .cc-seq-r b { font-weight: 400; color: #5a6a8a; }
.skin-xp .cc-seq-r i { justify-self: center; width: 11px; height: 11px; border: 1px solid #1c5180; background: linear-gradient(135deg, #dcdcd7, #fff); display: grid; place-items: center; font: 700 10px/1 var(--ui); font-style: normal; color: #21a121; }
.skin-xp .cc-seq-r.flagged i::after { content: "✓"; }
.skin-xp .cc-seq-r.cur { background: var(--sel); color: #fff; }
.skin-xp .cc-seq-r.cur b { color: #dbe6ff; }
.skin-xp .cc-seq-r:hover:not(.cur) { background: #dce8ff; }

.skin-xp .cc-result { gap: 0; padding-bottom: 0; }
.skin-xp .cc-result-h span, .skin-xp .cc-result-h b { color: #fff; font-weight: 700; }
.skin-xp .cc-result-h b { font: 400 10.5px/19px var(--ui); color: #dbe6ff; margin-right: 2px; }
.skin-xp .cc-result.alarmed .cc-result-h b { color: #ffe34a; }
.skin-xp .cc-alarm { margin: 4px 5px !important; width: calc(100% - 10px); background: #fff8c2 !important; border: 1px solid #c9b200 !important; border-left: 1px solid #c9b200 !important;
  color: #2a2000 !important; font: 400 11px/1.2 var(--ui) !important; letter-spacing: 0 !important; padding: 3px 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }

.skin-xp .cc-install { margin-top: auto; gap: 5px; padding: 0 0 6px; }
.skin-xp .cc-install > :not(.cc-install-h) { margin-left: 7px; margin-right: 7px; }
.skin-xp .cc-copy { margin-top: 4px; margin-bottom: 0; font: 400 11px/1.3 var(--ui); color: #4a5a7a; text-transform: none; }
/* the install keys: glossy gel buttons, acid green and cobalt */
.skin-xp .cc-btn {
  position: relative; overflow: hidden; gap: 9px; border-radius: 14px; text-transform: none;
  font: 700 var(--cta-f2, 15px)/1 var(--ui); letter-spacing: 0;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); border: 1px solid #0a2a9a;
  background: linear-gradient(180deg, #8fb4ff 0%, #3e74ff 30%, #1544e0 50%, #0b34c8 52%, #3f7cff 100%);
  box-shadow: inset 0 -4px 8px rgba(0,0,40,.3), 0 2px 3px rgba(0,0,40,.35);
}
.skin-xp .cc-btn::before { content: ""; position: absolute; left: 10px; right: 10px; top: 3px; height: 44%; border-radius: 12px; background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.15)); pointer-events: none; }
.skin-xp .cc-btn:hover { filter: brightness(1.07); color: #fff; background: linear-gradient(180deg, #8fb4ff 0%, #3e74ff 30%, #1544e0 50%, #0b34c8 52%, #3f7cff 100%); }
.skin-xp .cc-btn-primary { font-size: var(--cta-f1, 17px); color: #052a07; text-shadow: 0 1px 0 rgba(255,255,255,.55); border-color: #0b5f12;
  background: linear-gradient(180deg, #d9ffc7 0%, #8ef56a 26%, #2fd12d 50%, #13a51c 52%, #4fe84a 100%); }
.skin-xp .cc-btn-primary:hover { color: #052a07; background: linear-gradient(180deg, #d9ffc7 0%, #8ef56a 26%, #2fd12d 50%, #13a51c 52%, #4fe84a 100%); }
.skin-xp .cc-btn-primary.flag { box-shadow: inset 0 -4px 8px rgba(0,0,40,.3), 0 0 0 2px #fff, 0 0 0 4px var(--pink); }
.skin-xp .cc-btn svg { position: relative; }

/* the status bar: the bags as small XP buttons, status cells */
.skin-xp .cc-foot { gap: 3px; padding: 0 8px 0 7px; background: linear-gradient(180deg, #f3f6f5, #dfe7e5); border-top: 1px solid #9fb0c8; }
.skin-xp .cc-chs { gap: 2px; }
.skin-xp .cc-ch { height: 20px; padding: 0 7px !important; font: 400 11px/18px var(--ui) !important; letter-spacing: 0 !important; color: #000 !important;
  border: 1px solid #003c74 !important; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe6 70%, #d8d2c4) !important; }
.skin-xp .cc-ch:first-child { border-left: 1px solid #003c74 !important; }
.skin-xp .cc-ch.on { background: linear-gradient(180deg, #dfe9ff, #b9cdf5) !important; box-shadow: inset 1px 1px 2px rgba(0,0,60,.3); }
.skin-xp .cc-ch:hover { box-shadow: inset 0 0 0 2px #f8b330; }
.skin-xp .cc-foot-f { height: 18px; padding: 0 7px; font: 400 11px/16px var(--ui); letter-spacing: 0; text-transform: none; color: #2a3a5a;
  border: 1px solid; border-color: var(--edge) #fff #fff var(--edge); background: #f6f8f7; }
.skin-xp .cc-foot-rule { background: none; }

/* standby: the seal on mint, XP's green block progress bar */
.skin-xp .cc-boot { top: 28px; bottom: 28px; left: 3px; right: 3px;
  background: radial-gradient(ellipse 70% 85% at 50% 46%, #f6faf8, #dbe7e3); }
.skin-xp .cc-boot-l { color: var(--navy); opacity: 1; font: 400 11px/1 var(--ui); letter-spacing: 0; text-transform: none; }
.skin-xp .cc-boot-bar { width: 170px; height: 14px; padding: 2px; border: 1px solid var(--edge); background: #fff; box-sizing: border-box; }
.skin-xp .cc-boot-bar b { background: repeating-linear-gradient(90deg, #36c13a 0 7px, transparent 7px 9px); }

/* the photograph's y2k grade and the page under it */
html[data-photo="y2k"] { --page: #e2ebe9; }
html[data-photo="y2k"] body { color: #0b1f86; }
html[data-photo="y2k"] .card .face { filter: brightness(.82) contrast(.95) saturate(.55); }
html[data-look="xp"] .learn { background: linear-gradient(180deg, #8fb4ff 0%, #3e74ff 30%, #1544e0 50%, #0b34c8 52%, #3f7cff 100%); color: #fff;
  font: 700 14px/1 Tahoma, Verdana, sans-serif; letter-spacing: .02em; text-transform: none; border-radius: 12px; border: 1px solid #0a2a9a; filter: none; clip-path: none;
  box-shadow: inset 0 -3px 6px rgba(0,0,40,.3), 0 2px 4px rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.5); }
html[data-look="xp"] .learn::after { display: none; }
html[data-photo="y2k"] .lamp { --lamp-bg: 56,71,134; --lamp-core: #3e4c8c; --lamp-lens: radial-gradient(closest-side, #46559a, #3a4888); }
html[data-look="xp"] .lamp .lamp-glow { background: radial-gradient(closest-side, rgba(150,255,90,.85), rgba(54,209,47,.35) 45%, rgba(54,209,47,0) 100%); }
/* the XP look on a small screen: About goes, so the sequence and the (taller) install keys fit */
.cc.tight.skin-xp .cc-about { display: none; }

/* ================================================================= the Eva look (the default)
   After the screens in Neon Genesis Evangelion and Michael's Figma frames: black, white instruments,
   orange and deep red for what matters, cyan for the clock; stretched Helvetica Bold (js/type.js) and
   Courier; true blacks and a film's red halation, not a TV's scanlines (skins/eva.js). */
/* Michael's Figma file is set to Display P3, so its hex codes are P3 colours; read as sRGB (what a
   hex means in CSS) they come out duller: #B40001 as (180,0,1) where the Figma shows (197,0,0). */
html[data-look="eva"] {
  --eva-red: color(display-p3 .7059 0 .0039);       /* #B40001 */
  --eva-orange: color(display-p3 .9294 .4314 .0353); /* #ED6E09 */
  --eva-cyan: color(display-p3 .4784 1 .9804);       /* #7AFFFA */
  /* links in running copy: the page's white, underlined at half strength, the line solid and a soft glow on
     hover (Michael 2026-10-29: the cyan "way too bright"; tried grey-teal, the page's red and the brighter
     red, color(display-p3 .9 .07 .1), then "let me look at the links in white") */
  --eva-link: #f2f2f2;
  --eva-link-line: rgb(242 242 242 / .5);
  --eva-link-glow: rgb(255 255 255 / .45);
}
.cc.skin-eva {
  grid-template-rows: 1fr;
  background: #000; color: #f2f2f2;
  font: 700 11px/1.2 "BC Courier Bold", "Courier New", monospace; letter-spacing: -.02em;
  filter: none;
  --ui: "BC Helvetica Bold", Helvetica, Arial, sans-serif;
  --mono: "BC Courier Bold", "Courier New", monospace;
  --red: var(--eva-red); --orange: var(--eva-orange); --cyan: var(--eva-cyan); --alarm: #e4121e;
}
.cc.skin-eva button:focus-visible, .cc.skin-eva a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.skin-eva .cc-title, .skin-eva .cc-foot, .skin-eva .cc-tabs, .skin-eva .cc-strip, .skin-eva .cc-mid, .skin-eva .cc-result { display: none; }
.skin-eva .cc-body { grid-template-columns: 784px 1fr; gap: 0; padding: 0; }
.skin-eva .cc-left { display: block; position: relative; background: #000; padding: 0; }
.skin-eva .cc-feed { width: 784px; height: 579px; background: #000; }
.ev-glow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(2.2px) brightness(1.5); mix-blend-mode: screen; }
.ev-bloom { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(2.5px); mix-blend-mode: screen; opacity: .5; }
.ev-clip { position: absolute; left: 0; top: 0; width: 784px; height: 507px; overflow: hidden; z-index: 2; pointer-events: none; }
.ev-clip .cc-tagslot { pointer-events: auto; }
.ev-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
.ev-fx[hidden] { display: none; }
.ev-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ev-art svg { display: block; }

/* the band under the picture is the series' scale (drawn on the canvas); its -3 to +3 are the bags */
.skin-eva .cc-transport { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: block; padding: 0; border: 0; z-index: 3; pointer-events: none; }
.skin-eva .cc-transport > * { pointer-events: auto; }
/* the belt's keys and sound in the top band, beside the clock */
/* top right, where the series' counter was, inset as the clock is on the left (Michael 2026-10-13); four
   keys alike, each as tall as the clock's box, with its line and its corners (the canvas draws the box
   at y 22, 38 tall, a 1.7 line, radius 6: so 39.7 outside, from 21.15; Michael 2026-10-14) */
.skin-eva .cc-keys { position: absolute; left: auto; right: 25.15px; top: 21.15px; z-index: 3; gap: 5px; color: var(--cyan); }
.skin-eva .cc-keys button, .skin-eva #cc-sound {
  box-sizing: border-box; width: 39.7px !important; height: 39.7px !important; padding: 0;
  border: 1.7px solid var(--cyan) !important; border-radius: 6px !important; color: var(--cyan) !important;
  box-shadow: 0 0 8px color(display-p3 .4784 1 .9804 / .7), inset 0 0 5px color(display-p3 .4784 1 .9804 / .3);
}
.skin-eva .cc-keys button:hover, .skin-eva #cc-sound:hover { background: color(display-p3 .4784 1 .9804 / .14); }
.skin-eva .cc-keys svg { width: 18px; height: 18px; }
.skin-eva .cc-play.paused { background: var(--cyan) !important; color: #000 !important; }
.skin-eva .cc-dir { display: none; }
.skin-eva #cc-sound { display: grid; place-items: center; }
.skin-eva #cc-sound svg { width: 21px; height: 21px; }
.skin-eva .cc-modes { display: none; }
.skin-eva .cc-modes-h { display: none; }
.skin-eva .cc-modes button { width: 44px; height: 20px; padding: 0; display: grid; place-items: center; border: 1.3px solid var(--orange) !important; border-radius: 4px; color: var(--orange); box-shadow: 0 0 4px color(display-p3 .9294 .4314 .0353 / .4); }
.skin-eva .cc-modes button:hover { background: color(display-p3 .9294 .4314 .0353 / .16); color: var(--orange); }
.skin-eva .cc-modes button.on { background: var(--orange); color: #000; }
.skin-eva .cc-tiles { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; }
.skin-eva .ev-bag { position: absolute; left: -20px; top: 32px; width: 40px; height: 22px; background: none; border: 0; border-radius: 3px; outline: 0; }
.skin-eva .ev-bag:hover { box-shadow: inset 0 -2px 0 rgba(242,242,242,.75); }
.skin-eva .ev-bag:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.skin-eva .ev-bag[hidden] { display: none; }

/* the stake's entry: in the left gutter above the three checks; opens the records */
.skin-eva .cc-alarm {
  position: absolute; left: 46px; top: 416px; z-index: 3; width: 126px !important; height: 46px;
  padding: 0 !important; background: #000 !important; border: 1.4px solid var(--alarm) !important; border-radius: 5px;
  box-shadow: 0 0 10px rgba(228,18,30,.75), inset 0 0 6px rgba(228,18,30,.3); overflow: visible;
}
.skin-eva .cc-alarm:hover { background: #160000 !important; }
.skin-eva .cc-alarm.ev-gone { display: none; }
.skin-eva .ev-alarm-art svg { filter: drop-shadow(0 0 2px rgba(228,18,30,.85)) drop-shadow(0 0 6px rgba(228,18,30,.45)); }
.skin-eva #cc-alarm-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skin-eva .ev-alarm-art { position: absolute; inset: 0; }

/* the right panel: the bag logo, the line, the rule, the copy, the keys, as Michael's Figma "New screen"
   sets them. Its sizes are written in the Figma's own units times --s, the panel's scale (the logo, 388
   wide there, is 228 here). The console is 579 tall where the Figma's frame would be 629: the gaps above
   the logo, around the rule and under the copy are tighter than the Figma's (Michael
   2026-10-13: move the logo and tagline up a few pixels, never shrink them), and the copy sets as large
   as its box allows up to the Figma's 24 (skins/eva.js fitCopy; 20 or more from a 1280-wide window).
   The Figma's "- learn more -" under the copy is gone (Michael 2026-10-13). */
.skin-eva .cc-right { --s: .5875; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: calc(31px * var(--s)) 34px calc(30px * var(--s)) 26px; background: #000; }
.cc-eva { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cc-eva > * { flex: none; }
.cc-eva[hidden] { display: none; }
/* the logo and the line draw their own glow (skins/eva.js), in SVGs wider than the art by its pad all
   round (the logo's 23.7, the line's 12): the negative margins keep the art itself where the Figma has it */
.ev-logo { margin: 0; width: calc(388.08px * var(--s)); }
.ev-logo svg { width: calc(435.48px * var(--s)); height: auto; margin: calc(-23.7px * var(--s)); overflow: visible; }
.ev-tagline { margin: calc(24.54px * var(--s)) 0 0 calc(13.18px * var(--s)); width: calc(361.66px * var(--s)); }
.ev-tagline svg { width: calc(385.66px * var(--s)); height: auto; margin: calc(-12px * var(--s)); overflow: visible; }
/* the rule: Courier New's hyphens in its regular weight, unlit (the Figma gives it no glow) */
.ev-rule {
  margin: calc(22px * var(--s)) 0 0 calc(14.36px * var(--s)); width: calc(360.49px * var(--s));
  font: 400 calc(18px * var(--s))/1.1328 "BC Courier Rule", "Courier New", monospace; letter-spacing: -.04em;
  color: var(--orange); white-space: nowrap; overflow: hidden;
}
/* the copy (Michael's, 2026-10-13): Courier New Bold at the Figma's 24, -4%, justified, its normal
   leading (1.1328), a blank line between the two paragraphs; a little glow of its own colour */
.cc-eva > .ev-body {
  flex: 1 1 auto; min-height: 0; margin: calc(12px * var(--s)) 0 calc(18px * var(--s)) calc(14.36px * var(--s)); width: calc(360.49px * var(--s));
  overflow: hidden;
  font: 700 calc(24px * var(--s))/1.1328 var(--mono); letter-spacing: -.04em; color: var(--orange); text-align: justify;
  text-shadow: 0 0 calc(4px * var(--s)) color(display-p3 .9294 .4314 .0353 / .55);
}
.ev-body p { margin: 0 0 1.1328em; }
.ev-body p:last-child { margin-bottom: 0; }
/* "bag" in the copy, defined (main.js defineBag; Michael 2026-10-27): the word underlined in dashes, lit
   like a pressed key (orange, black letters) while its definition is open. The definition is a box of the
   console's, the sticker's line and glow, in the copy's type and size: under the word's line, its words
   on the copy's column, or over it where there's no room under it, a notch pointing at the word. A computer opens
   it on a hover; a phone or tablet on a tap, with a key to close it. */
.ev-body .ev-term {
  margin: 0 -.12em; padding: 0 .12em; border: 0; border-radius: 2px; cursor: help;
  font: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit;
  /* the dashes drawn, not a text underline: a browser's dashed underline is three long dashes under a
     short word, broken again where the g comes down */
  background: linear-gradient(90deg, currentColor 60%, transparent 0) .12em 100% / .3em max(1.5px, .1em) repeat-x;
  background-clip: content-box;
}
html.mobile .ev-term { cursor: pointer; }
html:not(.mobile) .ev-term:hover, .ev-body .ev-term.on { background: var(--orange); color: #000; text-shadow: none; box-shadow: 0 0 calc(5px * var(--s)) color(display-p3 .9294 .4314 .0353 / .6); }
.ev-def {
  position: absolute; z-index: 12; left: 0; top: 0; box-sizing: border-box; margin: 0;
  padding: .5em .65em .6em; background: #000; color: var(--orange);
  border: 1.5px solid var(--orange); border-radius: 5px;
  box-shadow: 0 0 10px color(display-p3 .9294 .4314 .0353 / .55), inset 0 0 6px color(display-p3 .9294 .4314 .0353 / .25);
  font: 700 calc(24px * var(--s))/1.1328 var(--mono); letter-spacing: -.04em; text-align: left;
  text-shadow: 0 0 calc(4px * var(--s)) color(display-p3 .9294 .4314 .0353 / .55);
}
.ev-def[hidden] { display: none; }
.ev-def::before {
  /* --notch (main.js defineBag): the word's middle; the diamond centred on it */
  content: ""; position: absolute; left: clamp(15px, var(--notch, 50%), calc(100% - 15px)); top: -6.5px; width: 9px; height: 9px;
  background: #000; border: solid var(--orange); border-width: 1.5px 0 0 1.5px; transform: translateX(-50%) rotate(45deg);
}
.ev-def[data-side="above"]::before { top: auto; bottom: -6.5px; border-width: 0 1.5px 1.5px 0; }
.ev-def p { margin: 0; }
/* the headword and its part of speech over a rule of dashes, as the panel's rule is drawn */
.ev-def-h { padding-bottom: .3em; margin-bottom: .35em !important; border-bottom: 1px dashed color(display-p3 .9294 .4314 .0353 / .7); }
.ev-def-h dfn { font-style: normal; }
.ev-def-h span { font-family: "BC Courier", "Courier New", monospace; font-weight: 400; opacity: .8; }
.ev-def-x { display: none; }
html.mobile .ev-def-x {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: var(--orange); cursor: pointer;
}
html.mobile .ev-def-x svg { width: 15px; height: 15px; filter: drop-shadow(0 0 2px color(display-p3 .9294 .4314 .0353 / .9)); }
/* the keys: 388 × 77 in the Figma (sizeKeys may make them taller to stay 44px on screen), 16 apart; a
   ring of the key's colour outside, black inside it, the key's colour within; no glow */
.skin-eva .cc-install { margin-top: 0; gap: calc(16px * var(--s)); }
.skin-eva .cc-install-h, .skin-eva .cc-copy { display: none; }
.skin-eva .cc-btn, .skin-eva .cc-btn-primary {
  position: relative; height: var(--cta-h2, calc(77.08px * var(--s))); padding: 0;
  background: var(--red); border: calc(3px * var(--s)) solid #000; border-radius: calc(21px * var(--s));
  box-shadow: 0 0 0 calc(3px * var(--s)) var(--red);
  color: transparent; font-size: 0;
}
.skin-eva .cc-btn > svg { display: none; }
.skin-eva .cc-btn .ev-art { position: absolute; inset: calc(-3px * var(--s)); color: #000; }
.skin-eva .cc-btn .ev-art svg { display: block; width: 100%; height: 100%; }
.skin-eva #cc-safari { background: var(--orange); box-shadow: 0 0 0 calc(3px * var(--s)) var(--orange); }
.skin-eva .cc-btn:hover { filter: brightness(1.18); background: var(--red); }
.skin-eva #cc-safari:hover { background: var(--orange); }
.skin-eva .cc-btn-primary.flag { box-shadow: 0 0 0 calc(3px * var(--s)) var(--red), 0 0 0 4px var(--alarm), 0 0 16px rgba(228,18,30,.9); }
.cc.tight.skin-eva .ev-body, .cc.tight.skin-eva .ev-rule { display: none; }
.cc.tight.skin-eva .cc-install { margin-top: auto; }

/* standby: the loading screen (hazard bands, BAG CHECK marching across), drawn by the skin; a hard cut out */
.skin-eva .cc-boot { top: 0; bottom: 0; background: #000; transition: none; }
.skin-eva .cc-boot.done { opacity: 0; }
.skin-eva .cc-seal { display: none; }
.ev-bootcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.skin-eva .cc-boot-l {
  bottom: 38px; z-index: 1; opacity: 1; gap: 10px; padding: 5px 10px; background: #000;
  border: 1.4px solid var(--orange); border-radius: 4px; box-shadow: 0 0 8px color(display-p3 .9294 .4314 .0353 / .55);
  font: 700 10.5px/1 var(--mono); letter-spacing: -.02em; color: var(--orange); text-shadow: 0 0 3px color(display-p3 .9294 .3529 .0353 / .35);
}
.skin-eva .cc-boot-bar { width: 120px; height: 7px; border-color: var(--orange); }
.skin-eva .cc-boot-bar b { background: var(--orange); }
/* the picture powers on in steps, like a tube warming up */
.skin-eva.ev-on .cc-feed { animation: ev-on .3s steps(3, end) both; }
@keyframes ev-on { from { filter: brightness(.25); } to { filter: brightness(1); } }

/* around the monitor */
html[data-look="eva"] { --page: #050505; }
html[data-look="eva"] .screen-glow { box-shadow: 0 0 46px 10px rgba(237,90,20,.12), 0 0 12px 1px rgba(255,120,40,.18); }
/* the sticker under the monitor: a lit label */
html[data-look="eva"] .learn {
  padding: 6px 10px 6px 11px; gap: 7px; background: #000; color: var(--orange, var(--eva-orange));
  border: 1.5px solid var(--eva-orange); border-radius: 5px; transform: none; clip-path: none; filter: none;
  box-shadow: 0 0 10px color(display-p3 .9294 .4314 .0353 / .55), inset 0 0 6px color(display-p3 .9294 .4314 .0353 / .25);
}
html[data-look="eva"] .learn::after { display: none; }
html[data-look="eva"] .learn span { display: block; }
html[data-look="eva"] .learn span svg { width: auto; height: auto; }
html[data-look="eva"] .learn svg { color: var(--eva-orange); filter: drop-shadow(0 0 2px color(display-p3 .9294 .4314 .0353 / .9)); }
html[data-look="eva"] .learn:hover { transform: translateY(-1px); background: #160800; }
html[data-look="eva"] .learn:focus-visible { outline: 2px solid var(--eva-cyan); }
html[data-look="eva"] .lamp .lamp-glow { background: radial-gradient(closest-side, rgba(255,120,40,.85), color(display-p3 .9294 .3529 .0353 / .3) 45%, color(display-p3 .9294 .3529 .0353 / 0) 100%); }

/* the page below in the monitor's language: the search's results and its request form (the page's
   layout and the rest are at the end of this file). Orange and red for what matters, cyan for what's
   in order; each glow one blurred copy under the sharp one. */
.ev-line { display: block; overflow: visible; }
html[data-look="eva"] .below {
  --ev-mono: "BC Courier Bold", "Courier New", monospace; --ev-sans: "BC Helvetica Bold", Helvetica, Arial, sans-serif;
  --o-glow: color(display-p3 .9294 .4314 .0353 / .5); --c-glow: color(display-p3 .4784 1 .9804 / .45);
  color: #f2f2f2; font: 700 16px/1.5 var(--ev-mono); letter-spacing: -.03em;
}
html[data-look="eva"] .bl-seal { display: none; }
html[data-look="eva"] .bl-tagline-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the request form's fields */
html[data-look="eva"] .pc-row input, html[data-look="eva"] .pc-row textarea {
  background: #000; border: 1.5px solid rgba(242,242,242,.75); border-radius: 6px; color: #f2f2f2; caret-color: var(--eva-orange);
  font-family: var(--ev-mono); font-weight: 700; letter-spacing: -.03em; box-shadow: 0 0 10px rgba(255,255,255,.07);
}
html[data-look="eva"] .pc-row input::placeholder, html[data-look="eva"] .pc-row textarea::placeholder { color: #5c5c5c; }
html[data-look="eva"] .pc-row input:focus-visible, html[data-look="eva"] .pc-row textarea:focus-visible { border-color: var(--eva-orange); box-shadow: 0 0 0 1px var(--eva-orange), 0 0 14px var(--o-glow); }
html[data-look="eva"] .pc-row [aria-invalid="true"] { border-color: #ff3b2f; box-shadow: 0 0 0 1px #ff3b2f, 0 0 12px rgba(255,59,47,.45); }
html[data-look="eva"] .pc-status, html[data-look="eva"] .pc-other { font-size: 14px; color: #a8a8a8; }
html[data-look="eva"] .pc-status { color: #d8d8d8; }
html[data-look="eva"] .pc-link, html[data-look="eva"] .faq-a a { color: var(--eva-link); text-decoration-color: var(--eva-link-line); }
html[data-look="eva"] .pc-link:hover, html[data-look="eva"] .faq-a a:hover { text-decoration-color: currentColor; text-shadow: 0 0 6px var(--eva-link-glow); }
html[data-look="eva"] .pc-link:focus-visible, html[data-look="eva"] .faq-a a:focus-visible { outline: 2px solid var(--eva-cyan); outline-offset: 3px; }

/* not on file: the series' hazard bands over an orange frame; cyan once the request is in */
html[data-look="eva"] .pc-empty { position: relative; overflow: hidden; margin-top: 16px; padding: 34px 26px 26px; background: #000; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--eva-orange), 0 0 14px color(display-p3 .9294 .4314 .0353 / .25); }
html[data-look="eva"] .pc-empty::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, var(--eva-orange) 0 9px, #000 9px 18px); }
html[data-look="eva"] .pc-empty:has(> .pc-done:not([hidden])) { box-shadow: inset 0 0 0 1.5px var(--eva-cyan), 0 0 14px color(display-p3 .4784 1 .9804 / .25); }
html[data-look="eva"] .pc-empty:has(> .pc-done:not([hidden]))::before { background: var(--eva-cyan); height: 4px; box-shadow: 0 0 8px var(--c-glow); }
html[data-look="eva"] .pc-empty-h, html[data-look="eva"] .pc-done-h { margin-bottom: 12px; font: 700 24px/1 var(--ev-sans); }
html[data-look="eva"] .pc-empty-h svg { filter: drop-shadow(0 0 2.5px var(--o-glow)); }
html[data-look="eva"] .pc-done-h svg { filter: drop-shadow(0 0 2.5px var(--c-glow)); }
html[data-look="eva"] .pc-empty-copy, html[data-look="eva"] .pc-done p { color: #e6e6e6; }
html[data-look="eva"] .pc-done b { color: var(--eva-cyan); }
html[data-look="eva"] .pc-row label { font: 700 12px/1.25 var(--ev-sans); letter-spacing: .07em; text-transform: uppercase; color: #f2f2f2; }
html[data-look="eva"] .pc-row label i { font: 700 12px/1 var(--ev-mono); letter-spacing: -.02em; text-transform: none; color: #8a8a8a; opacity: 1; }
html[data-look="eva"] .pc-row input, html[data-look="eva"] .pc-row textarea { font-size: 17px; }
html[data-look="eva"] .pc-row small { font-size: 13px; color: #8a8a8a; opacity: 1; }
html[data-look="eva"] .pc-form-status { color: #ff5a4a; text-shadow: 0 0 4px rgba(255,59,47,.45); }
/* the request's key: the panel's install key, in the series' orange, its label stretched in black */
html[data-look="eva"] .pc-send {
  min-width: 300px; min-height: 0; height: 56px; padding: 0 28px; margin-top: 4px;
  background: var(--eva-orange); border: 3px solid #000; border-radius: 14px; box-shadow: 0 0 0 3px var(--eva-orange), 0 0 16px var(--o-glow);
  font: 700 16px/1 var(--ev-sans); letter-spacing: 0; color: #000;
}
html[data-look="eva"] .pc-send:hover { filter: brightness(1.12); }
html[data-look="eva"] .pc-send:focus-visible { outline: 2px solid var(--eva-cyan); outline-offset: 6px; }
html[data-look="eva"] .pc-send-l { display: block; }
html[data-look="eva"] .pc-send-l .ev-line { margin: 0 auto; }

@media (max-width: 720px) {
  html[data-look="eva"] .pc-empty { padding: 30px 16px 20px; }
  html[data-look="eva"] .pc-send { min-width: 0; }
}

/* ================================================================= below the monitor
   Michael's Figma (Playground "New screen", 4123:3620 and 4133:4154, 2026-10-14), laid out in the
   frame's own units: --u is one of them, 1844 to the page's width (never more than a pixel), so the page
   keeps the frame's proportions; under 1000 wide it's one column and --u sizes the screen to the page.
   Every look shows it as drawn here. Positions are the Figma's, measured from the hazard band's top. */
.below {
  container-type: inline-size; position: relative; overflow-x: clip;
  padding: 18vh 0 0; background: #000; color: #f2f2f2;
  --orange: color(display-p3 .9294 .4314 .0353); --red: color(display-p3 .7059 0 .0039); --tag-red: color(display-p3 .6824 0 .0039);
  --o-glow: color(display-p3 .9294 .4314 .0353 / .5);
  --frame: color(display-p3 .6941 .902 .8588); --deep: color(display-p3 .0353 .0235 .9255);
  --sans: "BC Helvetica Bold", Helvetica, Arial, sans-serif; --courier: "BC Courier", "Courier New", monospace;
}
.below > * { --u: min(1px, 100cqw / 1844); --uf: var(--u-px, var(--u)); }
/* --uf, the unit for font sizes: --u in pixels (--u-px), which js/below.js measures off the probe, 10000 of
   them wide. Safari zoomed in or out (⌘+, or a site's page zoom) zooms a font size in container units
   twice, and at 115% the search's letters came out 15% too big for their field, tops cut off (Michael
   2026-10-22); widths and heights in them come out right. */
.u-probe { position: absolute; left: 0; top: 0; width: calc(10000 * var(--u)); height: 0; visibility: hidden; pointer-events: none; }
.uf { position: relative; width: calc(1844 * var(--u)); margin: 0 auto; padding-bottom: calc(150 * var(--u)); }

/* the hazard band: red bars leaning back, 93 apart (54 of red) and 106.6 tall, between two thin red
   rules (the top one added to match, Michael 2026-10-14); js/below.js draws it whole, every bar a shape
   of its own and the rules one line each (a repeated tile showed seams at its edges), and slides the
   bars sideways as the page scrolls */
.uf-hazard { height: calc(124.88 * var(--u)); }
.uf-hazard svg { display: block; width: 100%; height: 100%; }

/* two columns: the logo and the manifesto from x 142.7; how it works and the FAQ from x 933. The left
   one 5% wider than the Figma's 538, out of the gap (Michael 2026-10-22: the manifesto "increase width by 5%") */
.uf-cols { position: relative; display: grid; grid-template-columns: calc(564.9 * var(--u)) calc(910.95 * var(--u)); column-gap: calc(225.41 * var(--u)); padding: 0 0 calc(227.5 * var(--u)) calc(142.74 * var(--u)); align-items: start; }
/* the margins' instruments, after the reel's (js/below.js): down the left a hairline, a column of
   crosshairs and a numbered ladder; down the right a hairline, the crosshairs and a 0; both 0s on the
   screen's middle. Faint, from under the hazard band to "Is your bag checked?" */
.uf-rails { position: absolute; inset: 0; pointer-events: none; opacity: .38; }
.uf-rails svg { position: absolute; top: 0; height: 100%; overflow: visible; }
.uf-rail-l { left: 0; width: calc(142.74 * var(--u)); }   /* its height: js/below.js, down to the honeycomb */
.uf-rail-r { right: 0; width: calc(238.21 * var(--u)); }
.uf-left { padding-top: calc(132.93 * var(--u)); }
.uf-right { padding-top: calc(172.89 * var(--u)); }
.uf-why { scroll-margin-top: calc(257.81 * var(--u) + 24px); }

/* the logo (skins/eva.js draws it) and its line, set in from it as the Figma sets them */
.below .bl-logo { display: block; margin: 0 0 0 calc(3.26 * var(--u)); text-align: left; }
.below .ev-logo { width: calc(388 * var(--u)); }
.below .ev-logo svg { width: calc(435.48 * var(--u)); height: auto; margin: calc(-23.7 * var(--u)); overflow: visible; }
.below .ev-tagline { width: calc(361.66 * var(--u)); margin: calc(31.81 * var(--u)) 0 0 calc(121.34 * var(--u)); }
.below .ev-tagline svg { width: calc(385.66 * var(--u)); height: auto; margin: calc(-12 * var(--u)); overflow: visible; }
.below .bl-seal { width: calc(300 * var(--u)); }

/* the manifesto: Courier in an orange box, 16px at most; lines 1.35 apart, looser than the Figma's
   1.1328, and a blank line of the same between paragraphs (Michael 2026-10-22) */
.uf-manifesto {
  margin-top: calc(159.18 * var(--u)); padding: calc(34.56 * var(--u)) calc(29 * var(--u)) calc(34.56 * var(--u)) calc(29.52 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid var(--orange);
  font: 400 clamp(13px, calc(22.891 * var(--uf)), 16px)/1.35 var(--courier); letter-spacing: -.04em; color: var(--orange);
}
/* no paragraph ends on one word (Michael 2026-10-22: "fix these two widowed words"); "X dot com" and
   "can't see" are also held together in the HTML, for browsers without text-wrap: pretty */
.uf-manifesto p { margin: 0; text-wrap: pretty; }
.uf-manifesto p + p { margin-top: 1.35em; }

/* ---- how it works: the steps on their track, the caret and the line above them */
.st { position: relative; }
.st-head { position: relative; height: calc(192.1 * var(--u)); }
.st-rail { position: absolute; left: calc(-16 * var(--u)); top: calc(23.29 * var(--u)); width: 200vw; height: calc(3 * var(--u)); background: var(--orange); }
.st-caret {
  position: absolute; left: calc(-9.85 * var(--u)); top: 0; width: calc(19.71 * var(--u)); height: calc(17.07 * var(--u));
  background: var(--orange); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.st-track { position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; }
/* each step's label; only the label itself answers the pointer (the line and the caret's lane above
   it don't). Dim, hovered and lit are three strengths of its colours, mixed into black: a plain colour
   change, no fade and no blink, so the stretched type redraws in place instead of moving to a layer of
   its own and back (which made it shift under the pointer in Safari); only the screen blinks */
.st-track li { position: absolute; top: calc(55.76 * var(--u)); }
.st-step {
  all: unset; box-sizing: border-box; display: block; position: relative; cursor: pointer; white-space: nowrap;
  --k: 20%; --num: color-mix(in display-p3, var(--orange) var(--k), #000); --title: color-mix(in display-p3, var(--red) var(--k), #000);
}
.st-step:hover { --k: 45%; }
.st-step.on, .st-step:focus-visible { --k: 100%; }
.st-step:focus-visible { outline: 2px solid color(display-p3 .4784 1 .9804); outline-offset: 6px; }
.st-n { color: var(--num); }
.st-t { color: var(--title); }
.st-n, .st-t { display: block; }
.st-t { margin-top: calc(9.55 * var(--u)); }
.st-n svg, .st-t svg { display: block; overflow: visible; }
.st-n:not(:has(svg)), .st-t:not(:has(svg)) { visibility: hidden; }
/* the series' limited animation: on, off, on, off, on, a sixteenth of a second each */
@keyframes uf-on { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* ---- the screen: the series' pale neon frame (js/below.js draws it), four sides that don't meet: each
   ends mitred at 45° short of the corner, a gap between it and the next, and glows (a blurred copy of
   the same four bars under them), so the gap is a gap in the frame, not a line over it. A deep blue
   glow inside it. */
.st-box { position: relative; width: calc(672.79 * var(--u)); aspect-ratio: 1; }
.st-frame { position: absolute; left: calc(-20 * var(--u)); top: calc(-20 * var(--u)); width: calc(712.79 * var(--u)); height: calc(712.79 * var(--u)); pointer-events: none; overflow: visible; }
.st-screen { position: absolute; inset: calc(8 * var(--u)); overflow: hidden; background: #000; }
/* the inner glow: the Figma's deep blue, against the frame and fading as it goes in (four inset
   shadows, tight to wide, each fainter), drawn over what's on the screen */
.st-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 calc(4 * var(--u)) calc(.5 * var(--u)) color(display-p3 .0353 .0235 .9255 / .75),
    inset 0 0 calc(16 * var(--u)) color(display-p3 .0353 .0235 .9255 / .5),
    inset 0 0 calc(40 * var(--u)) color(display-p3 .0353 .0235 .9255 / .32),
    inset 0 0 calc(90 * var(--u)) color(display-p3 .0353 .0235 .9255 / .16);
}
/* the cut between step 1 and steps 2 and 3: a frame of the frame's pale cyan, a frame of the glow's blue */
.st-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.st-scene { position: absolute; inset: 0; visibility: hidden; }
.st-scene.shown { visibility: visible; }
/* the crosshairs, lit orange with a glow; js/below.js moves them between the browsers and the posts */
.st-cross { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.st-cross i {
  position: absolute; left: calc(-35 * var(--u)); top: calc(-35 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u));
  background: linear-gradient(var(--orange), var(--orange)) center / 100% max(1.5px, calc(2 * var(--u))) no-repeat, linear-gradient(var(--orange), var(--orange)) center / max(1.5px, calc(2 * var(--u))) 100% no-repeat;
  filter: drop-shadow(0 0 calc(2.5 * var(--u)) var(--orange)) drop-shadow(0 0 calc(10 * var(--u)) color(display-p3 .9294 .4314 .0353 / .7));
}
.st:not(.on) .st-cross { visibility: hidden; }
.st.on .st-cross i { animation: uf-on .25s steps(1, end); }

/* step 1: Chrome and Safari in their dials (js/below.js); hovering one grows it a little and shrinks the other */
.st-ico { position: absolute; display: block; border-radius: 50%; color: var(--orange); text-decoration: none; transform: scale(var(--k, 1)); transition: transform .35s cubic-bezier(.3, .7, .3, 1); -webkit-tap-highlight-color: transparent; }
.st-chrome { left: calc(6.44 * var(--u)); top: calc(8.84 * var(--u)); width: calc(373.12 * var(--u)); height: calc(373.12 * var(--u)); }
.st-safari { left: calc(284.8 * var(--u)); top: calc(280.2 * var(--u)); width: calc(360.4 * var(--u)); height: calc(360.4 * var(--u)); }
.st-icons:has(.st-ico:hover, .st-ico:focus-visible) .st-ico { --k: .94; }
.st-icons:has(.st-ico:hover, .st-ico:focus-visible) .st-ico:is(:hover, :focus-visible) { --k: 1.06; }
.st-ico:focus-visible { outline: 2px solid color(display-p3 .4784 1 .9804); outline-offset: calc(-14 * var(--u)); }
.st-art, .st-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-icons.power .st-ico { animation: uf-on .25s steps(1, end); }
.st-lab {
  position: absolute; padding-bottom: calc(4 * var(--u)); border-bottom: calc(1.6 * var(--u)) solid currentColor;
  font: 700 calc(15.3 * var(--uf))/1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
.st-lab::after { content: ""; position: absolute; right: calc(-15 * var(--u)); top: calc(-3 * var(--u)); width: calc(7 * var(--u)); height: calc(1.6 * var(--u)); background: currentColor; }
.st-chrome .st-lab { left: calc(352.56 * var(--u)); top: calc(73.6 * var(--u)); }
.st-safari .st-lab { left: calc(-44.8 * var(--u)); top: calc(261 * var(--u)); }

/* steps 2 and 3: a timeline of mock posts, the Figma's grey bars, 458 wide; each gets its tag as it comes up */
.st-col { position: absolute; left: calc(99.4 * var(--u)); top: 0; width: calc(458 * var(--u)); }
.sp { position: relative; box-sizing: border-box; border: 1px solid #857f81; border-radius: calc(17 * var(--u)); background: #000; transition: height .38s cubic-bezier(.2, .7, .3, 1); }
.sp i, .sp-badge, .sp-media, .sp-act { position: absolute; display: block; }
.sp-av { border-radius: 50%; background: #d9d9d9; }
.sp-badge svg, .sp-act svg, .sp-photo svg { display: block; width: 100%; height: 100%; }
.sp-tagrow { position: absolute; left: 0; right: 0; }
.sp-tag { position: absolute; color: var(--tag-red); opacity: 0; }
.sp-tag.rival { color: var(--orange); }
.sp-tag svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px currentColor); }
.sp.open .sp-tag { opacity: 1; animation: uf-on .25s steps(1, end) .38s backwards; }
.sp-after { position: absolute; left: 0; right: 0; top: 0; transition: transform .38s cubic-bezier(.2, .7, .3, 1); }
.sp.open .sp-after { transform: translateY(calc(237.05 * var(--u))); }
.sp.now, .sp.now .sp-after { transition: none; }
.sp.now .sp-tag { animation: none; }
.sp-media { border-radius: calc(14 * var(--u)); overflow: hidden; box-sizing: border-box; border: 1px solid #3a3838; }
.sp-photo { background: #151515; }
.sp-media i { position: absolute; }
.sp-linkimg { background: #1d1c1c; border-bottom: 1px solid #3a3838; }

/* ---- the FAQ: its title, red and glowing; questions in Helvetica, answers in Courier; open as many as you like */
.uf-faq { display: grid; grid-template-columns: calc(164.93 * var(--u)) calc(604.73 * var(--u)); align-items: start; margin: calc(218.9 * var(--u)) 0 0 calc(-3.75 * var(--u)); scroll-margin-top: 40px; }
.uf-faq-h { margin: calc(.7 * var(--u)) 0 0; line-height: 0; }
.uf-faq-h svg { display: block; overflow: visible; filter: drop-shadow(0 0 calc(3 * var(--u)) color(display-p3 .7059 0 .0039 / .8)); }
.below .faq { border: 0; }
.below .faq details { border: 0; }
.below .faq details + details { margin-top: calc(29.5 * var(--u)); }
.below .faq summary {
  position: relative; display: block; padding: 0; list-style: none; cursor: pointer;
  font: 700 max(15px, calc(22.891 * var(--uf)))/1.15 var(--sans); letter-spacing: -.04em; text-transform: uppercase; color: var(--red);
  transition: color .15s, text-shadow .15s;
}
.below .faq summary::-webkit-details-marker { display: none; }
/* the stepper's caret: pointing at the question while it's shut, down into its answer when it's open */
.below .faq summary::after {
  content: ""; position: absolute; left: calc(-30 * var(--u)); right: auto; top: 50%; width: calc(14 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u));
  background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .15s;
}
.below .faq details[open] > summary::after { background: var(--orange); background-size: auto; transform: rotate(90deg); }
.below .faq summary:hover { color: color(display-p3 .9 .07 .1); text-shadow: 0 0 calc(6 * var(--u)) color(display-p3 .7059 0 .0039 / .9); }
.below .faq summary:focus-visible { outline: 2px solid color(display-p3 .4784 1 .9804); outline-offset: 4px; }
/* every answer set as the manifesto is: 16px at most, lines 1.35 apart, a blank line of the same
   between paragraphs (Michael 2026-10-22; the Figma had the first at 22.9 units, the rest at 18) */
.below .faq-a { max-width: none; padding: calc(15.4 * var(--u)) 0 calc(6 * var(--u)); font: 400 clamp(13px, calc(22.891 * var(--uf)), 16px)/1.35 var(--courier); letter-spacing: -.04em; color: var(--orange); }
.below .faq-a p, .below .faq-a li { text-wrap: pretty; }   /* no answer ends on one word, as the manifesto */
.below .faq-a p { margin: 0; }
.below .faq-a p + p { margin-top: 1.35em; }
.below .faq-a ul { margin: 0; padding: 0 0 0 1.2em; }
.below .faq-a li + li { margin-top: .4em; }

/* ---- "Is your bag checked?": the search in an orange box set in a honeycomb of the library's faces.
   js/hexfield.js draws the honeycomb on a canvas, edge to edge, in the Figma's units (--hex-h: its height),
   and lays the search's answers over it as a list: a ring on each one's cell, the label beside it. */
.bc { --hex-h: 946.92; position: relative; min-height: calc(var(--hex-h) * var(--u)); }
.bc-field { position: absolute; top: 0; left: calc(50% - 50cqw); width: 100cqw; height: calc(var(--hex-h) * var(--u)); pointer-events: none; }
.hx-cv { position: absolute; left: 0; top: 0; display: block; }   /* its size: js/hexfield.js, its own pixels' */
.hx-probe { position: absolute; width: calc(1000 * var(--u)); height: 0; visibility: hidden; }
.bc-box {
  position: relative; z-index: 1; box-sizing: border-box; width: calc(527 * var(--u)); min-height: calc(403 * var(--u));
  margin: 0 0 0 calc(124 * var(--u)); top: calc(87.06 * var(--u)); padding: calc(35.5 * var(--u)) calc(37.5 * var(--u)) calc(38 * var(--u));
  background: #000; border: calc(4 * var(--u)) solid var(--orange); border-radius: calc(19 * var(--u));
}
.bc-h { margin: 0; line-height: 0; }
.bc-h svg { display: block; overflow: visible; }
.bc-box .pc-search { margin: 0; }
/* the field is the Figma's 62 tall for letters 61.13 tall, plus --room above and below, the field moved up
   by as much: the letters stay where they were, and a field clips what it shows to its own box. Safari
   zoomed in or out sets a field's line a few pixels off its middle, and with no room the letters' tops
   were cut off (Michael 2026-10-22). Below, the field runs on under the underline, clipped there: clip,
   not hidden, which would make the wrapper a box the browser scrolls the field into. */
.bc-box .pc-field { --room: calc(24 * var(--u)); width: calc(436 * var(--u)); margin-top: calc(76 * var(--u) - var(--room)); padding-bottom: calc(3 * var(--u)); overflow: clip; }
.bc-box .pc-field input {
  display: block; width: calc(436 * var(--u) / .78); height: calc(62 * var(--u) + 2 * var(--room)); padding: 0; margin: 0 0 calc(4 * var(--u) - var(--room));
  background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0;
  font: 700 calc(61.13 * var(--uf))/1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--orange); caret-color: var(--orange);
  transform: scaleX(.78); transform-origin: 0 50%;
}
.bc-box .pc-field input::placeholder { color: var(--orange); opacity: .3; }
/* the underline: a line of its own under the field, not the field's border, so in use the line itself
   glows, evenly round its shape like the page's other lit edges, rather than casting a shadow (Michael
   2026-10-15) */
.bc-box .pc-search { position: relative; }
.bc-box .pc-search::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(436 * var(--u)); height: calc(3 * var(--u));
  background: var(--orange); pointer-events: none;
}
.bc-box .pc-search:focus-within::after {
  box-shadow: 0 0 max(1px, calc(2 * var(--u))) color(display-p3 .9294 .4314 .0353 / .9), 0 0 max(3px, calc(6 * var(--u))) var(--o-glow);
}
.bc-box .pc-field input:focus-visible { box-shadow: none; border: 0; }
.bc-box .pc-status { margin: calc(22 * var(--u)) 0 0; }
.bc-box .pc-status:empty { display: none; }
.bc-box .pc-other, .bc-box .pc-empty { margin-top: 16px; }
/* Cloudflare Turnstile's check: there, but out of sight, until it wants a click */
.pc-human { height: 0; overflow: hidden; }
.pc-human.on { height: auto; overflow: visible; margin-top: 16px; }
.pc-human-note { margin: 0 0 10px; font-size: 14px; }

/* the answers: each an absolute box from its cell to its label's end (js/hexfield.js sets where; --cx is
   the cell's centre in it, --lx and --lw the label's left and width), shown once its cell lights up */
.hx-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hx { position: absolute; visibility: hidden; }
.hx.on { visibility: visible; }
.hx-ring { position: absolute; left: calc((var(--cx) - 89.26) * var(--u)); top: calc(-6 * var(--u)); width: calc(178.52 * var(--u)); height: calc(204.28 * var(--u)); overflow: visible; fill: none; stroke: var(--orange); stroke-width: max(2px, calc(3 * var(--u))); vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.hx-face {
  position: absolute; left: calc((var(--cx) - 83.26) * var(--u)); top: 0; width: calc(166.52 * var(--u)); height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: auto;
}
.hx-body {
  position: absolute; left: calc(var(--lx) * var(--u)); width: calc(var(--lw) * var(--u)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); pointer-events: auto;
}
.hx-hit { display: flex; flex-direction: column; align-items: flex-start; gap: calc(7 * var(--u)); max-width: 100%; color: inherit; text-decoration: none; }
.hx-hit:focus { outline: 0; }
.hx-hit:focus-visible { outline: 2px solid var(--eva-cyan, #7afffa); outline-offset: 8px; border-radius: 2px; }
.hx-name { display: block; max-width: 100%; color: var(--orange); line-height: 0; }
.hx-name-art { display: block; overflow: visible; }
.hx-name-text { font: 700 max(16px, calc(31 * var(--uf)))/1 var(--sans); text-transform: uppercase; line-height: 1; }
.hx-handle, .hx-tag, .hx-n, .hx-why { font: 700 max(12px, calc(19 * var(--uf)))/1.25 var(--ev-mono, "Courier New", monospace); letter-spacing: -.03em; }
.hx-handle { color: #9c9c9c; }
.hx-counts { font: 700 max(11px, calc(16 * var(--uf)))/1.2 var(--ev-mono, "Courier New", monospace); letter-spacing: -.03em; color: #d8d8d8; }
/* someone on X: one line each for the handle, the counts and who follows them, cut short with "…" (who
   follows them in full on hover), so their label stays about a face and a third tall */
.hx-hit > * { max-width: 100%; }
.hx-x .hx-handle, .hx-counts, .hx-by { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hx-tag { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--orange); }
.hx-why { color: #d8d8d8; }
.hx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
.hx-n { color: #d8d8d8; font-size: max(11px, calc(17 * var(--uf))); }
.hx-mark, .hx-state {
  display: inline-flex; align-items: center; gap: 5px; padding: max(3px, calc(5 * var(--u))) max(6px, calc(8 * var(--u)));
  border: 1.5px solid currentColor; border-radius: 3px; font: 700 max(10px, calc(14 * var(--uf)))/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.hx-mark { color: var(--eva-cyan, #7afffa); box-shadow: 0 0 6px color(display-p3 .4784 1 .9804 / .35); }
.hx-mark svg { width: 1em; height: 1em; }
.hx-state { color: var(--orange); }
.hx-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 400 max(12px, calc(18 * var(--uf)))/1.3 var(--courier, "Courier New", monospace); letter-spacing: -.03em; color: #d8d8d8; }
.hx-by { font: 700 max(11px, calc(16 * var(--uf)))/1.25 var(--ev-mono, "Courier New", monospace); letter-spacing: -.03em; color: var(--eva-cyan, #7afffa); }
/* a library person: the ring and their face brighten under the pointer or the keyboard */
.hx-lib:hover .hx-ring, .hx-lib:focus-within .hx-ring { opacity: 1; filter: drop-shadow(0 0 5px var(--o-glow)); }
.hx-lib:hover .hx-name, .hx-lib:focus-within .hx-name { filter: drop-shadow(0 0 5px var(--o-glow)); }
/* someone X knows and Bag Check doesn't: their face in greys, inside an orange ring */
.hx-x .hx-ring { opacity: 1; }
.hx-x .hx-name { color: #f2f2f2; }
.hx-x:hover .hx-ring, .hx-x:focus-within .hx-ring { filter: drop-shadow(0 0 5px var(--o-glow)); }
/* nobody we can find: a dashed ring and a question mark where a face would be */
.hx-none .hx-ring { opacity: 1; stroke-dasharray: 9 7; }
.hx-q { display: grid; place-items: center; color: var(--orange); pointer-events: none; }
.hx-q svg { width: 34%; overflow: visible; filter: drop-shadow(0 0 4px var(--o-glow)); }
.hx-find { font: 700 max(12px, calc(17 * var(--uf)))/1.2 var(--ev-mono, "Courier New", monospace); letter-spacing: -.03em; color: var(--eva-link, #f2f2f2); text-decoration: underline; text-decoration-color: var(--eva-link-line, rgb(242 242 242 / .5)); text-underline-offset: 3px; }
.hx-find:hover { text-decoration-color: currentColor; text-shadow: 0 0 6px var(--eva-link-glow, rgb(255 255 255 / .45)); }
.hx-find:focus-visible { outline: 2px solid var(--eva-cyan, #7afffa); outline-offset: 4px; }
/* the keys under a label: the panel's install key, orange, its label in black */
.hx-req, .hx-ask {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: max(40px, calc(54 * var(--u))); padding: 0 max(16px, calc(26 * var(--u)));
  background: var(--orange); color: #000; border: max(2px, calc(3 * var(--u))) solid #000; border-radius: max(9px, calc(13 * var(--u)));
  box-shadow: 0 0 0 max(2px, calc(3 * var(--u))) var(--orange), 0 0 14px var(--o-glow);
  font: 700 max(13px, calc(19 * var(--uf)))/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.hx-req span, .hx-ask span { display: inline-block; transform: scaleX(.86); }
.hx-req:hover, .hx-ask:hover { filter: brightness(1.12); }
.hx-req:focus-visible, .hx-ask:focus-visible { outline: 2px solid var(--eva-cyan, #7afffa); outline-offset: 6px; }
.hx-req[aria-disabled="true"] { cursor: default; filter: none; }
.hx-req.hx-sent { background: #000; color: var(--eva-cyan, #7afffa); box-shadow: 0 0 0 max(2px, calc(3 * var(--u))) var(--eva-cyan, #7afffa), 0 0 14px color(display-p3 .4784 1 .9804 / .4); }
.hx-req svg { width: 1em; height: 1em; }
/* a request that didn't go: the key turns red ("Try again"), the ring with it, and why underneath */
.hx-req.hx-err { background: #000; color: #ff5a4a; box-shadow: 0 0 0 max(2px, calc(3 * var(--u))) #ff3b2f, 0 0 14px rgba(255, 59, 47, .45); }
.hx-failed .hx-ring { stroke: #ff3b2f; filter: drop-shadow(0 0 5px rgba(255, 59, 47, .55)); }
.hx-err-msg { display: flex; align-items: flex-start; gap: 7px; max-width: 100%; font: 700 max(12px, calc(17 * var(--uf)))/1.3 var(--ev-mono, "Courier New", monospace); letter-spacing: -.03em; color: #ff5a4a; text-shadow: 0 0 4px rgba(255, 59, 47, .45); }
.hx-err-msg svg { flex: none; width: 1.05em; height: 1.05em; margin-top: .1em; }
/* labels type on in four drawings, left to right */
.hx.on .hx-body { animation: hx-type .34s steps(4, end) both; }
.hx-x.on .hx-ring, .hx-none.on .hx-ring { animation: hx-blink .34s steps(2, jump-none) 2; }
@keyframes hx-type { from { clip-path: inset(-20px 100% -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes hx-blink { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hx.on .hx-body, .hx.on .hx-ring { animation: none; }
}

/* ---- the small print under the honeycomb: the disclaimer from the left column's x, the privacy policy
   and support's email ending where the screen above ends; dim, so it stays out of the page's way */
.uf-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px 48px;
  margin: max(72px, calc(180 * var(--u))) calc(238.21 * var(--u)) 0 calc(142.74 * var(--u));
  font: 400 13px/1.45 var(--courier); letter-spacing: -.03em; color: #8a8a8a;
}
.uf-foot p { margin: 0; }
.uf-fine { max-width: 64ch; text-wrap: pretty; }
.uf-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.uf-links > * { white-space: nowrap; }
.uf-foot a { color: #c4c4c4; text-decoration: underline; text-decoration-color: rgb(196 196 196 / .4); text-underline-offset: 3px; }
.uf-foot a:hover { color: var(--orange); text-decoration-color: currentColor; }
.uf-foot a:focus-visible { outline: 2px solid color(display-p3 .4784 1 .9804); outline-offset: 3px; border-radius: 1px; }

/* ---- one column (phones, narrow windows): the screen fills the column; logo, steps, manifesto, FAQ */
@container (max-width: 999px) {
  .below > * { --u: min(.9px, (100cqw - 32px) / 672.8); }
  .uf { width: auto; max-width: calc(672.79 * var(--u) + 32px); padding: 0 16px 72px; }
  /* a phone held sideways: clear of the Dynamic Island and the corners (the page runs to the edges) */
  .uf { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .uf-hazard { margin-bottom: 48px; }
  .uf-cols { display: flex; flex-direction: column; padding: 0; }
  .uf-rails { display: none; }
  .uf-left, .uf-right, .uf-why { display: contents; }
  .bl-logo { order: 1; }
  .st { order: 2; margin-top: 56px; }
  .uf-manifesto { order: 3; margin-top: 64px; padding: 20px 18px; font-size: 15px; }
  .uf-faq { order: 4; grid-template-columns: 1fr; margin: 64px 0 0; padding-left: 28px; }
  .uf-faq-h { margin: 0 0 24px -28px; }
  .st-head { overflow-x: clip; margin-right: -16px; }
  .below .faq summary { font-size: 17px; }
  .below .faq summary::after { left: -24px; width: 11px; height: 10px; margin-top: -5px; }
  .below .faq-a { font-size: 15px; }   /* the manifesto's size on a phone */
  .below .faq details + details { margin-top: 20px; }
  .bc { margin-top: 72px; min-height: 0; }
  .bc-box { top: 0; width: auto; margin: 0; }
  .bc-field { position: relative; left: auto; margin: 24px 0 0 calc(50% - 50cqw); }
  .uf-foot { flex-direction: column; margin: 80px 0 0; }
  /* a face a row apart on a phone: someone on X keeps to one line of bio, a shorter key */
  .hx-bio { -webkit-line-clamp: 1; }
  .hx-req, .hx-ask { height: 36px; }
  .hx-body { gap: 10px; }
}


/* ================================================================= a phone held upright (main.js fitPhone)
   The Eva console stands up and leaves the photograph, whose monitor is landscape: on a phone the page
   itself is the screen. Laid out in the console's own units, 380 wide (--fh: the feed's height, 600 to
   780), and scaled to the page's width by main.js. Top to bottom: the feed (the clock, the division's name
   and the keys, the post being read, the readouts, the scale), then the panel's logo, line, rule, copy and
   keys; ?phone=logo puts
   the logo and its line over the feed. X's in-app browser on iPhone covers the bottom quarter of the
   screen with the post the link came from when it opens, so the post being read and its tag sit in the
   feed's top two thirds. */
.phone-cc { display: none; }
html.phone .pin { display: none; }
html.phone .hero { height: auto; min-height: 0; background: #000; }
html.phone .phone-cc { display: block; position: relative; overflow: hidden; background: #000; }
html.phone .phone-cc > .cc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cc.portrait { width: 380px; display: block; }
.skin-eva.portrait .cc-body { display: flex; flex-direction: column; }
.skin-eva.portrait .cc-left { order: 0; flex: none; width: 380px; height: var(--fh); }
.skin-eva.portrait .cc-feed { width: 380px; height: var(--fh); }
.skin-eva.portrait .ev-clip { width: 380px; height: calc(var(--fh) - 128px); }   /* the posts' room: above the readouts */
.skin-eva.portrait .cc-transport { height: 68px; }
/* the keys top right, a thumb's size, pause and sound only (no skipping on a phone, Michael 2026-10-27:
   so from x 274, and the division's name, drawn, fits between them and the clock's box top left) */
.skin-eva.portrait .cc-keys { right: 16px; top: 12px; gap: 6px; }
.skin-eva.portrait .cc-keys [data-belt] { display: none; }
.skin-eva.portrait .cc-keys button, .skin-eva.portrait #cc-sound { width: 42px !important; height: 42px !important; }
/* the stake's entry where the status was, bottom right of the readouts */
.skin-eva.portrait .cc-alarm { left: auto; right: 16px; top: calc(var(--fh) - 120px); }
/* the bags on the scale: -3 to +3, an eighth of the width apart */
.skin-eva.portrait .ev-bag { left: -22px; top: 28px; width: 44px; height: 30px; }
/* the loading screen covers the feed only */
.skin-eva.portrait .cc-boot { bottom: auto; height: var(--fh); }
/* the panel, under the feed: the Figma's panel at the screen's width (its 388 units across 348) */
.skin-eva.portrait .cc-right, .skin-eva.portrait .cc-eva { display: contents; }
.skin-eva.portrait .cc-right { --s: .8969; }
.skin-eva.portrait .ev-logo { order: 1; margin: 42px 0 0 16px; }
.skin-eva.portrait .ev-tagline { order: 2; margin: calc(24.54px * var(--s)) 0 0 calc(16px + 13.18px * var(--s)); }
.skin-eva.portrait .ev-rule { order: 3; margin: calc(26px * var(--s)) 0 0 calc(16px + 14.36px * var(--s)); }
.skin-eva.portrait .cc-eva > .ev-body {
  order: 4; flex: none; overflow: visible; width: calc(360.49px * var(--s));
  margin: calc(14px * var(--s)) 0 0 calc(16px + 14.36px * var(--s));
  font-size: 17px; text-align: left; text-wrap: pretty;      /* justified, a phone's line opened wide gaps between words */
}
.skin-eva.portrait .cc-install { order: 5; margin: 30px 16px 0; padding-bottom: 8px; }
/* ?phone=logo: the logo and its line over the feed */
.skin-eva.portrait[data-phone="logo"] .ev-logo { order: -2; margin-top: 26px; }
.skin-eva.portrait[data-phone="logo"] .ev-tagline { order: -1; margin-bottom: 18px; }
.skin-eva.portrait[data-phone="logo"] .ev-rule { margin-top: 34px; }

/* the keys a phone or tablet gets instead of the browsers' (an extension doesn't install there), held
   either way: send the page to your computer (the share sheet, or the link copied where there's none) and
   copy its link; upright, a line under them says where Bag Check runs */
.cc-btn.cc-phone-key, .cc-phone-note { display: none; }
html.mobile .cc-install > .cc-btn:not(.cc-phone-key) { display: none; }
html.mobile .cc-btn.cc-phone-key { display: flex; width: 100%; cursor: pointer; }
html.mobile .cc-btn.cc-phone-key[hidden] { display: none; }
.skin-eva #cc-copy-link { background: var(--orange); box-shadow: 0 0 0 calc(3px * var(--s)) var(--orange); }
.skin-eva #cc-copy-link:hover { background: var(--orange); }
/* done (the link copied or shared): black, a cyan ring and cyan words, as a request once it's sent */
html.mobile .skin-eva :is(#cc-send, #cc-copy-link).done { background: #000; filter: none; box-shadow: 0 0 0 calc(3px * var(--s)) var(--cyan), 0 0 14px color(display-p3 .4784 1 .9804 / .4); }
html.mobile .skin-eva .cc-phone-key.done .ev-art { color: var(--cyan); }
/* two lines tall whatever it says ("Copied. Open it on your computer." takes one), so a tap on a key
   doesn't move what's under it (Michael 2026-10-28) */
html.mobile .portrait .cc-phone-note {
  display: block; margin: 4px 2px 0; min-height: calc(2 * 1.35em); font: 400 15px/1.35 "BC Courier", "Courier New", monospace; letter-spacing: -.04em;
  color: var(--orange); text-wrap: pretty;
}
html.mobile .portrait .cc-phone-note:empty { display: none; }

/* below the console on a phone: the logo and its line are the panel's, so the page below starts with
   the manifesto; and the end of the page clears X's sheet (the post's actions stay over its bottom) */
html.phone .below { padding-top: 64px; }
html.phone .below .bl-logo { display: none; }
html.phone .below .st { margin-top: 0; }
html.phone .below .uf { padding-bottom: 150px; }
/* the sticker under the monitor (LEARN MORE, its arrow down), which goes with the photograph on a phone,
   set into the console's readouts instead (Michael 2026-10-27: "a clear signifier that there's more below
   the page"; 2026-10-28: "way too high… out of the way of tags"): in the checks' row, between them and the
   status, three quarters of its size (its centre and scale: main.js fitPhone), once the console is up */
html.phone #learn {
  position: absolute; z-index: 2; left: var(--learn-x); top: var(--learn-y); margin: 0;
  transform: translate(-50%, -50%) scale(var(--learn-k)); padding: 9px 13px 9px 14px; transition: opacity .3s, visibility 0s;
}
html.phone #learn:hover { transform: translate(-50%, -50%) scale(var(--learn-k)); }
html.phone #learn.away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
/* and out of the stake's moment (INVESTED, FIRM-LED ROUND… over the whole screen; its canvas shows only
   while it plays, skins/eva.js fx) and of the stake's entry that follows it in the same row until the tag
   is tied on: gone on the cut, back with a fade once they're over (Michael 2026-10-27) */
html.phone:has(.ev-fx:not([hidden]), .cc-alarm:not([hidden]):not(.ev-gone)) #learn { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
html.phone #learn > svg { animation: more-nudge 1.8s ease-in-out infinite; }
@keyframes more-nudge { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(3px); } 85% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { html.phone #learn > svg { animation: none; } }
/* the manifesto on a phone or tablet, in one column, folded (main.js): its opening fading out, and a key
   to read the rest; a tap anywhere on it opens it (Michael 2026-10-27) */
.uf-more { display: none; }
.uf-manifesto:focus { outline: none; }   /* it takes focus as it opens, for a reader on a keyboard */
@container (max-width: 999px) {
  html.mobile .uf-manifesto.folded { position: relative; max-height: calc(16.5 * 1.35em); overflow: hidden; cursor: pointer; }   /* 1.5 times the first fold's 11 lines (Michael 2026-10-28) */
  html.mobile .uf-manifesto.folded::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(6 * 1.35em);
    background: linear-gradient(to bottom, rgb(0 0 0 / 0), #000 72%); pointer-events: none;
  }
  html.mobile .uf-manifesto.folded .uf-more {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 16px; width: max-content; margin: 0 auto;
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px 9px 14px; background: #000; color: var(--orange);
    border: 1.5px solid var(--orange); border-radius: 5px; cursor: pointer;
    box-shadow: 0 0 10px color(display-p3 .9294 .4314 .0353 / .55), inset 0 0 6px color(display-p3 .9294 .4314 .0353 / .25);
  }
  .uf-more span { display: block; }
  .uf-more > svg { width: 17px; height: 17px; filter: drop-shadow(0 0 2px color(display-p3 .9294 .4314 .0353 / .9)); }
}
/* "How it works" in one column (js/below.js): the steps stand up, one under another, the line down their
   left and the caret beside it pointing in at the step that's on; the steps --sk times the track's size
   (js/below.js scales the track) and the caret --ck times, both set by js/below.js */
.st.upright .st-head { height: calc(3 * 86 * var(--sk) * var(--u) + 24px); }
.st.upright .st-rail { left: calc(26 * var(--u)); top: 0; width: max(1.5px, calc(4 * var(--u))); height: calc((2 * 86 + 67) * var(--sk) * var(--u)); }
.st.upright .st-caret { left: 0; top: 0; width: calc(17.07 * var(--ck) * var(--u)); height: calc(19.71 * var(--ck) * var(--u)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.st.upright .st-track { left: calc(50 * var(--u)); transform-origin: 0 0; }

/* ================================================================= donations (js/donate.js)
   On a computer the FAQ's mentions of support open this window over the page: the request form's black
   box with the series' hazard band across its top, its orange line and glow; the title stretched as the
   box's "IS YOUR BAG CHECKED?" is; copy in Courier as the FAQ's answers; the Venmo code on the right, an
   orange tile of black hexagons in a viewfinder's corners. A phone never sees it (the link opens Venmo). */
.dn {
  --o: color(display-p3 .9294 .4314 .0353); --o-glow: color(display-p3 .9294 .4314 .0353 / .5);
  --c: color(display-p3 .4784 1 .9804); --c-glow: color(display-p3 .4784 1 .9804 / .45);
  box-sizing: border-box; width: min(660px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  background: #000; color: var(--o); border: 3px solid var(--o); border-radius: 16px;
  box-shadow: 0 0 0 1px #000, 0 0 26px color(display-p3 .9294 .4314 .0353 / .4);
  font: 400 16px/1.35 "BC Courier", "Courier New", monospace; letter-spacing: -.04em;
}
.dn::backdrop { background: rgb(0 0 0 / .8); }
.dn[open] { animation: dn-in .2s cubic-bezier(.2,.7,.2,1); }
.dn[open]::backdrop { animation: dn-fade .2s; }
@keyframes dn-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes dn-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dn[open], .dn[open]::backdrop { animation: none; } }
.dn::before { content: ""; display: block; height: 11px; background: repeating-linear-gradient(-45deg, var(--o) 0 9px, #000 9px 18px); }
.dn-box { position: relative; display: grid; grid-template-columns: 300px 1fr; column-gap: 36px; align-items: start; padding: 34px 36px 34px 38px; }
.dn-h { margin: 0; line-height: 0; }
.dn-h svg { display: block; overflow: visible; filter: drop-shadow(0 0 2.5px var(--o-glow)); }
.dn-copy { margin-top: 24px; text-wrap: pretty; }
.dn-copy p { margin: 0; }
.dn-copy p + p { margin-top: 1em; }
/* the line Michael asked to say again: in the panel's white, "100%" lit as a pressed key */
.dn-all { font-family: "BC Courier Bold", "Courier New", monospace; font-weight: 700; color: #f2f2f2; }
.dn-all mark { margin: 0 -.08em; padding: 0 .14em; border-radius: 2px; background: var(--o); color: #000; box-shadow: 0 0 5px color(display-p3 .9294 .4314 .0353 / .6); }
.dn-label { font: 700 12px/1.25 "BC Helvetica Bold", Helvetica, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #f2f2f2; }
.dn-who { margin: 26px 0 0; padding-top: 14px; border-top: 1px dashed color(display-p3 .9294 .4314 .0353 / .7); }
.dn-who .dn-label { display: block; margin-bottom: 4px; }
.dn-link { display: inline-block; margin-top: 4px; color: var(--eva-link, #f2f2f2); text-decoration: underline; text-decoration-color: var(--eva-link-line, rgb(242 242 242 / .5)); text-underline-offset: 3px; }
.dn-link::after { content: " ↗"; text-decoration: none; display: inline-block; margin-left: .25em; }
.dn-link:hover { text-decoration-color: currentColor; text-shadow: 0 0 6px var(--eva-link-glow, rgb(255 255 255 / .45)); }
.dn-link:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 2px; }
.dn-scan { margin: 26px 0 0; justify-self: end; display: grid; justify-items: center; gap: 12px; }   /* clear of the close key */
.dn-qr { width: 246px; }
.dn-qr svg { display: block; width: 100%; height: auto; overflow: visible; }
.dn-qr .dn-vf { filter: drop-shadow(0 0 .35px var(--o)); }
.dn-scan .dn-label { text-align: center; }
/* the close key, the definition box's ✕ */
.dn-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--o); cursor: pointer; }
.dn-x svg { width: 15px; height: 15px; filter: drop-shadow(0 0 2px color(display-p3 .9294 .4314 .0353 / .9)); }
.dn-x:hover { background: #160800; }
.dn-x:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
/* a narrow window: the code under the words */
@media (max-width: 640px) {
  .dn-box { grid-template-columns: 1fr; row-gap: 28px; padding: 30px 22px 26px; }
  .dn-scan { margin-top: 0; justify-self: center; }
}