/* ==========================================================================
   The Shot List / The Matrix (1999)
   Design system: "an operator's green-phosphor screen on the Nebuchadnezzar"
   The Matrix arrives on the tube as falling code, the real world as cold
   raster signal, and everything on the page is light on black glass. One
   accent, green phosphor, with its decay ramp. Chapters set in the real
   world switch the accent ROLE to a cold desaturated steel (a variant of the
   same role, never a second accent). Stills are live feeds on a monitor
   bank; plates and the hero are drawn in code by art-a.js and art-b.js;
   page.js draws the feed effects, the interactives and the margin ground.
   Body text, headings, captions and stills never animate. One theme.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* ground: black glass */
  --bg:        #020403;
  --bg-2:      #050b07;
  --bg-3:      #08130c;
  --glass:     #010201;
  --line:      #143222;
  --line-2:    #1d4630;

  /* text */
  --text:      #d5e7da;
  --text-2:    #a7c0ae;
  --muted:     #6f8b78;

  /* THE accent: green phosphor and its decay ramp */
  --phos:      #39f57a;
  --phos-hot:  #dcffe7;
  --phos-2:    #1fae57;
  --phos-3:    #0e5f30;
  --phos-4:    #06301a;
  --phos-glow: rgba(57, 245, 122, 0.45);

  /* the real-world variant of the accent role */
  --steel:     #93a5b1;
  --steel-hot: #e1e9ee;
  --steel-2:   #5d707c;
  --steel-3:   #2a3842;
  --steel-4:   #121a20;
  --steel-glow: rgba(147, 165, 177, 0.35);
  --steel-bg:  #030507;

  /* role tokens: page chrome uses these, never --phos or --steel directly */
  --ac: var(--phos); --ac-hot: var(--phos-hot); --ac-2: var(--phos-2);
  --ac-3: var(--phos-3); --ac-4: var(--phos-4); --ac-glow: var(--phos-glow);

  /* textures */
  --scan: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0 1px, transparent 1px 3px);

  /* type */
  --f-display: "Martian Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-body: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-term: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  --f-code: "M PLUS 1 Code", "MS Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans Mono CJK JP", monospace;

  --fs-body: clamp(18px, 0.55vw + 15.5px, 20.5px);

  /* layout */
  --gutter: 16px;
  --mast-h: 56px;
  --wide: 1120px;
  --sheet: 1280px;
  --fig-gap: clamp(2.2rem, 5vw, 3.4rem);
  --plate-gap: clamp(2.6rem, 6vw, 4.2rem);
  --chapter-gap: clamp(4rem, 9vw, 6.5rem);

  color-scheme: dark;
}
[data-world="real"] {
  --ac: var(--steel); --ac-hot: var(--steel-hot); --ac-2: var(--steel-2);
  --ac-3: var(--steel-3); --ac-4: var(--steel-4); --ac-glow: var(--steel-glow);
}
/* a green still or plate inside a real-world chapter stays green */
[data-world="matrix"], [data-world="construct"], [data-world="both"] {
  --ac: var(--phos); --ac-hot: var(--phos-hot); --ac-2: var(--phos-2);
  --ac-3: var(--phos-3); --ac-4: var(--phos-4); --ac-glow: var(--phos-glow);
}

@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 48px); --mast-h: 62px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  overflow-wrap: break-word;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
img, svg, canvas { max-width: 100%; }
cite { font-style: italic; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }

a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ac-3);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ac-hot); text-decoration-color: var(--ac); }

::selection { background: rgba(57, 245, 122, 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ac-hot);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--phos);
  color: var(--bg);
  font: 600 13px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* ---------- Ground texture (page.js, 1100px and up) ---------- */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ground canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: opacity 500ms ease;
}
.ground .g-raster { opacity: 0; }
.ground.is-real .g-raster { opacity: 1; }
.ground.is-real .g-code { opacity: 0; }
@media (max-width: 1099px) {
  .ground { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ground canvas { transition: none; }
}

/* ---------- Reading progress: a phosphor trace ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 2px;
  pointer-events: none;
}
.progress-bar {
  display: block;
  height: 100%;
  background: var(--ac);
  box-shadow: 0 0 8px var(--ac-glow);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.progress-head {
  position: absolute;
  top: -1px;
  left: 0;
  width: 6px;
  height: 4px;
  background: var(--ac-hot);
  box-shadow: 0 0 6px var(--ac-glow);
  opacity: 0;
}
.progress.is-on .progress-head { opacity: 1; }

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  z-index: 5;
  background: #000;
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--sheet);
  height: var(--mast-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--ac-hot); }
.brand-cursor {
  flex: none;
  width: 9px;
  height: 15px;
  background: var(--ac);
  box-shadow: 0 0 8px var(--ac-glow);
}
.brand-name {
  font: 600 15px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.masthead-meta {
  font: 400 12px/1.3 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* ---------- Hero ---------- */
header.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--mast-h));
  min-height: calc(100svh - var(--mast-h));
  background:
    var(--scan),
    radial-gradient(ellipse 46% 52% at 66% 42%, rgba(57, 245, 122, 0.11), rgba(57, 245, 122, 0.035) 55%, transparent 80%),
    var(--bg);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-art > canvas { display: block; width: 100%; height: 100%; max-width: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--scan);
  opacity: 0.55;
  box-shadow: inset 0 0 18vmin rgba(0, 0, 0, 0.85);
}
.hero-block {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(32px, 7vh, 80px);
}
.hero-block::before {
  content: "";
  position: absolute;
  inset: -20% -20% -20% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 82%, rgba(2, 4, 3, 0.88), transparent 68%);
}
.hero-title {
  margin: 0;
  font-family: var(--f-display);
  text-transform: uppercase;
}
.hero.is-resolving .hero-title { opacity: 0; }
.hero.is-title-in .hero-title { opacity: 1; transition: opacity 420ms ease-out; }
.ht-the {
  display: block;
  width: max-content;
  margin: 0 0 0.55em 0.04em;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1;
  letter-spacing: 0.42em;
  color: var(--phos);
  text-shadow: 0 0 0.3em rgba(57, 245, 122, 0.35);
}
.ht-main {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-left: -0.05em;
  font-weight: 800;
  font-stretch: 87.5%;
  font-variation-settings: "wdth" 87.5;
  font-size: clamp(64px, 19vw, 208px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--phos);
  text-shadow: 0 0 0.06em var(--phos-glow), 0 0 0.35em rgba(57, 245, 122, 0.22);
}
.hero-sub {
  margin-top: clamp(18px, 2.2vw, 28px);
  font: 500 clamp(13px, 1vw, 15px)/1.3 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero-dek {
  max-width: 40ch;
  margin-top: 14px;
  font: italic 400 clamp(19px, 1vw + 14px, 24px)/1.45 var(--f-body);
  color: var(--text);
  text-wrap: pretty;
}
.hero-meta {
  margin-top: 18px;
  font: 400 clamp(17px, 1.2vw, 20px)/1.2 var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta .hm-by { color: var(--phos); }
.hero-meta .sep { color: var(--line-2); }

/* ---------- The flow grid ---------- */
.entry { position: relative; }
.flow {
  --measure: 66ch;
  --wide-extra: calc((min(var(--wide), 100vw - 2 * var(--gutter)) - min(var(--measure), 100vw - 2 * var(--gutter))) / 2);
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.flow > * { grid-column: text; min-width: 0; }
.flow > * + * { margin-top: 1.1em; }
.flow > p {
  text-wrap: pretty;
  hanging-punctuation: first;
}
@media (max-width: 559px) {
  .flow > p { hyphens: auto; -webkit-hyphens: auto; }
}
.flow > :is(figure, aside, .divider, .feed-pair) { margin-top: var(--fig-gap); }
.flow > :is(figure, aside, .divider, .feed-pair) + * { margin-top: var(--fig-gap); }
.flow > :is(.art, .ix) { margin-top: var(--plate-gap); }
.flow > :is(.art, .ix) + * { margin-top: var(--plate-gap); }

/* a still that is not on the page leaves no gap */
html:not(.show-placeholders) .flow > .is-missing { display: none; }
html:not(.show-placeholders) .flow > .is-missing + p { margin-top: 1.1em; }
html:not(.show-placeholders) .flow > .is-missing + :is(figure, aside, .feed-pair) { margin-top: var(--fig-gap); }

.chapter { padding-top: var(--chapter-gap); }
.chapter--intro { padding-top: clamp(56px, 8vw, 104px); }

/* ---------- The real world: the page goes steel ---------- */
.chapter--real {
  margin-top: var(--chapter-gap);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-bottom: clamp(3.4rem, 7vw, 5.4rem);
  background: rgba(5, 9, 13, 0.62);
  border-top: 1px solid var(--steel-3);
  border-bottom: 1px solid var(--steel-3);
}
.chapter--real::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(147, 165, 177, 0.035), transparent 160px, transparent calc(100% - 160px), rgba(147, 165, 177, 0.03));
}
.chapter--real + .chapter { padding-top: var(--chapter-gap); }

/* ---------- Drop cap: a lit character cell ---------- */
p.lede .dc {
  float: left;
  position: relative;
  display: block;
  width: 1.2em;
  height: 1.38em;
  margin: 0.13em 0.22em 0 0;
  border: 1px solid var(--ac-3);
  font: normal 800 calc(1.72em * 3.3 / 1.42) / 1.32 var(--f-display);
  font-stretch: 87.5%;
  text-align: center;
  color: var(--ac);
  text-shadow: 0 0 0.08em var(--ac-glow), 0 0 0.4em rgba(57, 245, 122, 0.2);
  background: var(--bg-2);
}
p.lede .dc::before {
  content: attr(data-k);
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 1.04em/1 var(--f-code);
  color: var(--ac);
  opacity: 0.18;
  text-shadow: none;
  transform: scaleX(-1);
}
p.lede .dc { isolation: isolate; }

/* ---------- Chapter headings: terminal prompts ---------- */
.ch-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  padding-bottom: 18px;
  font-family: var(--f-display);
  background:
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 56px 1px,
    linear-gradient(var(--line), var(--line)) no-repeat 0 100% / 100% 1px;
}
.ch-idx {
  flex: none;
  position: relative;
  top: -0.32em;
  margin-right: 14px;
  padding: 2px 7px;
  border: 1px solid var(--ac);
  font: 400 24px/1 var(--f-term);
  letter-spacing: 0.04em;
  color: var(--ac);
  text-shadow: 0 0 8px var(--ac-glow);
}
.ch-text {
  min-width: 0;
  font-weight: 700;
  font-stretch: 87.5%;
  font-variation-settings: "wdth" 87.5;
  font-size: clamp(30px, 2.4vw + 20px, 50px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}
.ch-text::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.2em;
  vertical-align: -0.1em;
  background: var(--ac);
  box-shadow: 0 0 10px var(--ac-glow);
}
.flow > .ch-title + * { margin-top: 1.6em; }

/* ---------- Chapter openers: a full-bleed feed ---------- */
.flow > .still--opener {
  grid-column: full;
  justify-self: center;
  width: min(100%, 1800px);
  margin-top: 0;
}
.still--opener + .ch-title--opener { margin-top: -25px; }
.ch-title--opener { position: relative; z-index: 2; align-items: flex-end; }
.ch-title--opener .ch-idx {
  top: 0;
  align-self: flex-start;
  margin-right: clamp(14px, 2vw, 24px);
  padding: 0.04em 0.12em 0.02em;
  border: 0;
  background: var(--bg);
  font: 800 clamp(56px, 9vw, 120px)/0.96 var(--f-display);
  font-stretch: 87.5%;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: -0.03em;
  text-shadow: 0 0 0.06em var(--ac-glow), 0 0 0.35em rgba(57, 245, 122, 0.18);
}
.chapter--real .ch-title--opener .ch-idx { background: #04070a; text-shadow: 0 0 0.06em var(--ac-glow), 0 0 0.35em rgba(147, 165, 177, 0.16); }
.ch-title--opener .ch-text { padding-bottom: 0.06em; margin-top: 26px; } /* only the numeral sits on the rail; a wrapped heading never climbs into it */
.flow > .op-cap {
  margin-top: 18px;
  font: 400 13.5px/1.55 var(--f-mono);
  color: var(--text-2);
  max-width: 70ch;
}
.flow > .op-cap + * { margin-top: 2em; }
html:not(.show-placeholders) .still--opener.is-missing + .ch-title--opener { margin-top: 0; }
html:not(.show-placeholders) .still--opener.is-missing ~ .op-cap { display: none; }

/* ---------- Stills: feeds on the operator's monitor bank ---------- */
.flow > .still { grid-column: wide; }
.feed {
  position: relative;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px #000, 0 18px 50px -20px rgba(0, 0, 0, 0.9);
}
/* viewfinder corner brackets, 6px outside the bezel */
.feed::before,
.art-brackets {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background:
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 2px 14px;
  opacity: 0.9;
}
.feed-bar {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  min-height: 30px;
  margin: 0 -10px 10px;
  padding: 3px 12px 2px;
  border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
  background: var(--bg-2);
  font: 400 18px/1.15 var(--f-term);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.fb-no {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ac);
  text-shadow: 0 0 6px var(--ac-glow);
}
.fb-no::before {
  content: "";
  width: 7px;
  height: 12px;
  background: var(--ac);
  box-shadow: 0 0 6px var(--ac-glow);
}
.fb-tc { color: var(--muted); white-space: nowrap; }
.fb-slate { flex: 1 1 auto; min-width: 0; color: var(--text-2); }
.fb-world { margin-left: auto; color: var(--ac); white-space: nowrap; }
@media (min-width: 720px) {
  .feed-bar { font-size: 19px; }
}
@media (max-width: 559px) {
  .feed-bar { flex-wrap: wrap; padding: 4px 12px 4px; }
  .fb-slate { order: 3; flex-basis: 100%; }
}
.feed-glass {
  position: relative;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.feed-glass img {
  display: block;
  width: 100%;
  height: auto;
}
.feed-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scan);
  opacity: 0.14;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
}
.feed-rail {
  position: relative;
  height: 24px;
  margin: 10px -10px 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 5px 5px;
  background: #000;
  overflow: hidden;
}
.feed-rail canvas { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.rail-label {
  position: absolute;
  right: 10px;
  top: 0;
  height: 23px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: #000;
  font: 400 17px/1 var(--f-term);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.feed-rail.has-label-row { height: auto; }
.feed-rail.has-label-row .rail-draw { position: relative; height: 23px; }
.feed-rail.has-label-row .rail-label {
  position: static;
  justify-content: flex-end;
  height: 20px;
  padding: 0 10px 3px;
  font-size: 15px;
}
.feed-fx {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.feed-fx canvas { display: block; width: 100%; height: 100%; max-width: none; }

/* the opener feed spans the full width: no side bezel, no brackets */
.feed--opener {
  padding: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: 0 18px 60px -24px rgba(0, 0, 0, 0.95);
}
.feed--opener::before { display: none; }
.feed--opener .feed-bar {
  margin: 0;
  padding: 4px var(--gutter) 3px;
  border-radius: 0;
  font-size: 20px;
  flex-wrap: wrap;
}
.feed--opener .fb-slate { white-space: normal; }
.feed--opener .feed-rail { margin: 0; border-radius: 0; }
.feed--opener .rail-label { right: var(--gutter); }
@media (min-width: 1800px) {
  .feed--opener { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
}

/* placeholders: only with ?placeholders */
.ph { display: none; }
.show-placeholders .is-missing .ph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 2.4 / 1;
  padding: clamp(14px, 3vw, 36px);
  border: 1px dashed var(--line-2);
  background:
    repeating-linear-gradient(to bottom, rgba(57, 245, 122, 0.05) 0 1px, transparent 1px 3px),
    var(--glass);
  line-height: 1.4;
}
.show-placeholders .is-missing .feed-glass img { display: none; }
.ph-no { font: 400 22px/1 var(--f-term); letter-spacing: 0.06em; color: var(--ac); }
.ph-desc { max-width: 60ch; font: 400 13.5px/1.5 var(--f-mono); color: var(--text-2); }
.ph-file { font: 400 15px/1 var(--f-term); color: var(--muted); }

/* ---------- Captions ---------- */
figcaption {
  font: 400 13.5px/1.55 var(--f-mono);
  color: var(--text-2);
  text-wrap: pretty;
}
.still > figcaption,
.art > figcaption,
.ix > figcaption {
  max-width: 70ch;
  margin-top: 16px;
}
.cap-no {
  display: inline-block;
  margin-right: 0.35em;
  font: 400 18px/1 var(--f-term);
  letter-spacing: 0.05em;
  color: var(--ac);
  text-shadow: 0 0 6px var(--ac-glow);
}
.art .cap-no,
.ix .cap-no {
  padding: 1px 5px 0;
  border: 1px solid var(--ac-3);
  font-size: 16px;
}

/* ---------- Monitor pairs ---------- */
.flow > .feed-pair {
  grid-column: wide;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.feed-pair > .still + .pair-badge,
.feed-pair > .still + .still { margin-top: 0; }
.pair-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
}
.pair-badge::before,
.pair-badge::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.pb-tab {
  flex: none;
  padding: 3px 10px 2px;
  border: 1px solid var(--ac);
  background: #000;
  font: 400 18px/1.1 var(--f-term);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac);
  box-shadow: 0 0 12px -2px var(--ac-glow);
  white-space: nowrap;
}
.pb-tab [data-world] { color: var(--ac); text-shadow: 0 0 6px var(--ac-glow); }
.pb-sep { color: var(--muted); }
@media (min-width: 900px) {
  .flow > .feed-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 22px;
    align-items: start;
    padding-top: 40px;
  }
  .feed-pair > .still:first-child { grid-column: 1; grid-row: 1; }
  .feed-pair > .still:last-child { grid-column: 2; grid-row: 1; }
  .pair-badge {
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    margin: 0;
    height: 28px;
    justify-content: center;
  }
  /* a bracket joining the two monitors, with the tab across the gap */
  .pair-badge::before,
  .pair-badge::after {
    flex: 1;
    height: 12px;
    margin-top: 14px;
    border-top: 1px solid var(--ac-3);
    background: none;
  }
  .pair-badge::before { border-left: 1px solid var(--ac-3); }
  .pair-badge::after { border-right: 1px solid var(--ac-3); }
}
html:not(.show-placeholders) .feed-pair.has-missing { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
html:not(.show-placeholders) .feed-pair.has-missing > .still { grid-column: 1; }
html:not(.show-placeholders) .feed-pair.has-missing > .pair-badge { display: none; }
html:not(.show-placeholders) .feed-pair > .still.is-missing { display: none; }
html:not(.show-placeholders) .flow > .feed-pair.all-missing { display: none; }

/* ---------- Plates: CRT housings for art-a.js and art-b.js ---------- */
.entry { counter-reset: plate; }
.flow > .art { grid-column: wide; }
figure.art {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
figure.art:not(.art--signoff) { counter-increment: plate; }
figure.art:not(.art--signoff)::before {
  content: "PLATE " counter(plate, decimal-leading-zero) " / " attr(data-art);
  grid-row: 1;
  display: block;
  margin-bottom: 14px;
  font: 400 17px/20px var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac);
  text-shadow: 0 0 6px var(--ac-glow);
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(var(--line), var(--line)) no-repeat right 0 top 50% / calc(100% - var(--hn, 16) * (1ch + 0.06em) - 14px) 1px;
}
figure.art > * { grid-column: 1; min-width: 0; }
figure.art > .art-canvas { grid-row: 2; }
/* the corner brackets sit on the canvas cell, outside the bezel */
figure.art:not(.art--signoff)::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  margin: -15px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 2px 14px;
  opacity: 0.9;
}
.art-canvas {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 5px var(--line), inset 0 0 70px rgba(0, 0, 0, 0.9);
}
.art-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--scan);
  opacity: 0.5;
  border-radius: inherit;
}
/* before the drawing: a static dim cell texture, never animated */
.art-canvas:empty {
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(to bottom, rgba(1, 2, 1, 0) 0%, rgba(1, 2, 1, 0.55) 70%, var(--glass) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(57, 245, 122, 0.06), transparent 70%),
    repeating-linear-gradient(to right, transparent 0 2px, rgba(6, 48, 26, 0.9) 2px 7px, transparent 7px 11px),
    repeating-linear-gradient(to bottom, transparent 0 3px, var(--glass) 3px 5px, transparent 5px 14px),
    var(--glass);
  background-blend-mode: normal, screen, normal, normal, normal;
}
figure.art[data-art="pipeline"] .art-canvas:not(:empty) { aspect-ratio: auto; }
.art-canvas > canvas { display: block; max-width: none; }
.flow > .art + figcaption { margin-top: 16px; }

/* ---------- Sign-off ---------- */
.signoff-sec { padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(2.4rem, 5vw, 3.6rem); }
.flow > .art--signoff {
  grid-column: wide;
  justify-self: center;
  width: 100%;
  max-width: 900px;
  margin-top: 0;
}
.art--signoff .art-canvas { border-radius: 14px; }
.art--signoff .art-canvas:empty {
  aspect-ratio: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(to right, transparent 0 3px, rgba(6, 48, 26, 0.55) 3px 8px, transparent 8px 13px),
    var(--glass);
}
.art--signoff .art-canvas:empty::before {
  content: "REZA";
  font: 400 clamp(64px, 13vw, 132px)/1 var(--f-term);
  letter-spacing: 0.06em;
  color: var(--phos);
  text-shadow: 0 0 0.05em var(--phos-glow), 0 0 0.4em rgba(57, 245, 122, 0.3);
}
@media (max-width: 639px) {
  .art--signoff .art-canvas:empty { aspect-ratio: 2 / 1; }
}
.flow > .signoff-line {
  justify-self: center;
  margin-top: 22px;
  font: 400 18px/1 var(--f-term);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- Interactives: the same CRT housing ---------- */
.flow > .ix { grid-column: wide; }
figure.ix {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
figure.ix::before {
  content: "INTERACTIVE / " attr(data-label);
  grid-row: 1;
  display: block;
  margin-bottom: 14px;
  font: 400 17px/20px var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac);
  text-shadow: 0 0 6px var(--ac-glow);
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(var(--line), var(--line)) no-repeat right 0 top 50% / calc(100% - var(--hn, 24) * (1ch + 0.06em) - 14px) 1px;
}
figure.ix > * { grid-column: 1; min-width: 0; }
figure.ix > .ix-box { grid-row: 2; }
figure.ix::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  margin: -15px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 0 / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 0 100% / 2px 14px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 14px 2px,
    linear-gradient(var(--ac), var(--ac)) no-repeat 100% 100% / 2px 14px;
  opacity: 0.9;
}
.ix-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: clamp(10px, 1.6vw, 18px);
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 5px var(--line), inset 0 0 70px rgba(0, 0, 0, 0.9);
}
.ix-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--scan);
  opacity: 0.4;
  border-radius: inherit;
}
.no-js .ix-box::before {
  content: "THIS DEMONSTRATION NEEDS JAVASCRIPT";
  display: block;
  padding: 48px 12px;
  font: 400 19px/1.2 var(--f-term);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--muted);
}
.ix-stage { position: relative; min-width: 0; }
.ix-cv-wrap {
  position: relative;
  border: 1px solid var(--line);
  background: #000;
  line-height: 0;
}
.ix-cv-wrap canvas { display: block; width: 100%; height: 100%; max-width: none; }
.ix-tag {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 2;
  font: 400 16px/1 var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  pointer-events: none;
}

/* controls: terminal buttons */
.ix-ui {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  min-width: 0;
}
.ix-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ix-glabel {
  flex-basis: 100%;
  font: 400 16px/1 var(--f-term);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ix-btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ac-3);
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  font: 400 19px/1 var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ix-btn:hover { border-color: var(--ac-2); color: var(--text); }
.ix-btn[aria-pressed="true"],
.ix-btn[aria-checked="true"] {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--bg);
  box-shadow: 0 0 12px var(--ac-glow);
}
.ix-btn:focus-visible { outline: 2px solid var(--ac-hot); outline-offset: 3px; }
.ix-btn--play { display: inline-flex; align-items: center; gap: 10px; }
.ix-btn--play .pl-ico {
  width: 0;
  height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.ix-btn--play[aria-pressed="true"] .pl-ico {
  width: 10px;
  height: 12px;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* range: a 2px track with ticks and a block cursor for a thumb */
.ix-range {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}
.ix-range-ticks {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 30px;
  height: 8px;
  pointer-events: none;
}
.ix-range-ticks i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: var(--ac-3);
}
.ix-range-ticks i.end { height: 8px; width: 2px; background: var(--ac-2); }
.ix-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ix-range input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ac-3);
}
.ix-range input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--ac-3);
}
.ix-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 28px;
  margin-top: -13px;
  border: 0;
  border-radius: 0;
  background: var(--ac);
  box-shadow: 0 0 10px var(--ac-glow);
}
.ix-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: var(--ac);
  box-shadow: 0 0 10px var(--ac-glow);
}
.ix-range input[type="range"]:focus-visible { outline: none; }
.ix-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ac-hot); outline-offset: 3px; }
.ix-range input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ac-hot); outline-offset: 3px; }

/* readouts: real text */
.ix-readout {
  min-width: 0;
  font: 400 20px/1.3 var(--f-term);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ix-readout .ro { display: block; }
.ix-readout .ro b { font-weight: 400; color: var(--ac); text-shadow: 0 0 6px var(--ac-glow); }
.ix-readout .ro-note {
  display: block;
  margin-top: 8px;
  font: 400 12.5px/1.5 var(--f-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* Bullet Time: view at the film's 2.35:1, plan beside it */
.ix--bullettime .bt-view { aspect-ratio: 2.35 / 1; cursor: ew-resize; touch-action: pan-y; }
.ix--bullettime .bt-plan { aspect-ratio: 1.6 / 1; cursor: pointer; }
.ix--bullettime .ix-ui { align-items: flex-end; }
@media (min-width: 760px) {
  .ix--bullettime .ix-box {
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    grid-template-areas: "view plan" "ui readout";
    column-gap: 16px;
    row-gap: 16px;
  }
  .ix--bullettime .ix-stage { display: contents; }
  .ix--bullettime .bt-view { grid-area: view; }
  .ix--bullettime .bt-plan { grid-area: plan; aspect-ratio: auto; align-self: stretch; min-height: 0; }
  .ix--bullettime .ix-ui { grid-area: ui; }
  .ix--bullettime .ix-readout { grid-area: readout; align-self: start; }
}
@media (max-width: 759px) {
  .ix--bullettime .ix-stage { display: grid; gap: 12px; }
  .ix--bullettime .ix-readout { order: 2; }
  .ix--bullettime .ix-ui { order: 3; }
}

/* Lamps: ceiling plan, the frame and the meter */
.ix--lamps .lp-stage { aspect-ratio: 2 / 1; }
@media (max-width: 759px) {
  .ix--lamps .lp-stage { aspect-ratio: 1 / 1.1; }
}
.ix--lamps .ix-ui { align-items: flex-start; }
.lp-stops { flex: 1 1 420px; }
.lp-fps { flex: 0 1 auto; }
.lp-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.lp-row .ix-btn { padding: 8px 4px; min-width: 0; }
.lp-fps .lp-row { grid-template-columns: repeat(2, minmax(84px, 1fr)); }
.lp-marks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font: 400 11.5px/1.35 var(--f-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.lp-marks li {
  position: relative;
  padding-top: 9px;
  border-top: 1px solid var(--ac-3);
}
.lp-marks li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 1px;
  height: 6px;
  background: var(--ac-3);
}
.lp-marks .lm-low { grid-column: 1 / span 2; }
.lp-marks .lm-t11 { grid-column: 5; }
.lp-marks .lm-t16 { grid-column: 6; }
.lp-marks .lm-at { display: none; color: var(--ac); }
@media (max-width: 759px) {
  .lp-marks { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lp-marks li { grid-column: 1 !important; padding-top: 0; border-top: 0; }
  .lp-marks li::before { display: none; }
  .lp-marks .lm-at { display: inline; margin-right: 0.6em; }
}

/* ---------- Pull quotes ---------- */
.flow > .pq { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.flow > .pq + * { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.pq blockquote {
  position: relative;
  margin: 0;
  padding-left: 1.3em;
  font-family: var(--f-display);
  font-weight: 500;
  font-stretch: 87.5%;
  font-variation-settings: "wdth" 87.5;
  font-size: clamp(22px, 1.4vw + 16px, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.pq blockquote::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0.02em;
  font: 400 1.25em/1 var(--f-term);
  color: var(--ac);
  text-shadow: 0 0 8px var(--ac-glow);
}
.pq figcaption {
  margin-top: 14px;
  padding-left: calc(1.3 * clamp(22px, 1.4vw + 16px, 32px));
  font: 400 12.5px/1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 1000px) {
  .flow > .pq { margin-left: -40px; }
  .pq blockquote { padding-left: 40px; }
  .pq figcaption { padding-left: 40px; }
}

/* ---------- Dividers: a row of mirrored code ---------- */
.flow > .divider {
  grid-column: wide;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 24px);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--line);
}
.dv-row {
  flex: none;
  display: flex;
  font: 500 15px/1 var(--f-code);
  letter-spacing: 0.5em;
  color: var(--ac-3);
  margin-right: -0.5em;
}
.dv-row span { display: inline-block; transform: scaleX(-1); }
.dv-row .hot { color: var(--ac); text-shadow: 0 0 8px var(--ac-glow), 0 0 2px var(--ac); }
@media (max-width: 400px) {
  .dv-row { letter-spacing: 0.32em; margin-right: -0.32em; }
}

/* ---------- Sidenotes ---------- */
.sn { white-space: normal; }
.sn-ref {
  position: relative;
  display: inline;
  margin: 0 0 0 0.12em;
  padding: 0 1px;
  border: 0;
  background: none;
  font: 400 1.05em/1 var(--f-term);
  letter-spacing: 0.02em;
  color: var(--ac);
  text-shadow: 0 0 6px var(--ac-glow);
  vertical-align: 0.12em;
  cursor: pointer;
}
.sn-ref::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.sn-ref:hover,
.sn.is-hot .sn-ref { color: var(--ac-hot); }
.sn-note {
  display: none;
  font: 400 13.5px/1.6 var(--f-mono);
  color: var(--text-2);
  text-wrap: pretty;
  hyphens: manual;
}
.sn-num {
  font: 400 17px/1 var(--f-term);
  color: var(--ac);
}
/* inline (narrow): tap to open a block under the line */
.no-js .sn-note,
.sn.is-open .sn-note {
  display: block;
  margin: 0.8em 0 0.9em;
  padding: 10px 14px;
  border-left: 2px solid var(--ac-3);
  background: var(--bg-2);
}
/* margin rail (1200px and up), placed by page.js */
.sn-margin .sn-note {
  display: block;
  position: absolute;
  top: 0;
  max-width: 230px;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--ac-3);
  background: none;
}
.sn-margin .sn.sn-inline .sn-note {
  position: static;
  max-width: none;
  margin: 0.8em 0 0.9em;
  padding: 10px 14px;
  background: var(--bg-2);
  display: none;
}
.sn-margin .sn.sn-inline.is-open .sn-note { display: block; }
.sn-margin .sn.is-hot .sn-note { color: var(--text); border-left-color: var(--ac); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
  background: #000;
}
.footer-inner {
  display: grid;
  gap: 14px;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter) clamp(36px, 5vw, 56px);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--text);
  text-decoration: none;
}
.colophon {
  max-width: 72ch;
  font: 400 13px/1.6 var(--f-mono);
  color: var(--muted);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font: 400 18px/1.2 var(--f-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-links a { color: var(--text-2); text-decoration-color: var(--ac-3); }
.footer-links a:hover { color: var(--ac-hot); }

/* ---------- Small screens ---------- */
@media (max-width: 719px) {
  .hero-block { padding-bottom: 28px; }
  .hero-dek { font-size: 19px; }
  .ch-idx { font-size: 21px; top: -0.26em; margin-right: 11px; padding: 1px 6px; }
}
@media (max-width: 400px) {
  .feed { padding: 0 8px; }
  .feed-bar { margin: 0 -8px 8px; }
  .feed-rail { margin: 8px -8px 0; }
  .feed::before { inset: -8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero.is-resolving .hero-title { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  :root { --bg: #fff; --text: #111; --text-2: #333; --muted: #555; }
  body { background: #fff; color: #111; }
  .progress, .ground, .ix-ui, .feed-rail, .feed-fx, .skip-link { display: none !important; }
  .masthead, .site-footer { background: #fff; }
  .chapter--real { background: none; }
  header.hero { min-height: 0; background: #fff; }
  .hero::after { display: none; }
  .ht-main, .ht-the, .ch-text { text-shadow: none; }
  .ht-main, .ht-the { color: #111; }
  .feed, .art-canvas, .ix-box { box-shadow: none; }
  .feed-glass::after, .art-canvas::after, .ix-box::after { display: none; }
  figure, .feed-pair { break-inside: avoid; }
  .sn-note { display: block !important; position: static !important; }
}