/* Private Cat. One desk in a dark room, lit by its monitor.
   Every object on the page is a pixel sprite on ONE block grid: --k is the block in px, every shown
   size is a whole multiple of it, and the page steps --k down instead of ever scaling off the grid.
   One container (--page) and one gutter (--gut) hold everything, at every width. */

@font-face { font-family: "Departure"; src: url("/fonts/DepartureMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("/fonts/SportingGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("/fonts/SportingGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-MicroMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --k: 4;                       /* the page's one block, in px */
  --page: 1120px;               /* the one container */
  --gut: 32px;                  /* the one gutter */
  --gap: 24px;                  /* the one gap between objects */
  --row: 12px;                  /* the one vertical step inside a readout */
  --notes-w: 216px;
  --winpad: 32px;
  --pot: 55px;                  /* the pixel face only ever lands on its own 11 px grid */
  --cap-h: 72px;
  --key-h: 56px;

  --ground: #001820;
  --ground-deep: #000810;
  --plate: #042820;
  --paper: #c8e8a8;
  --paper-sheet: #d8e8c8;
  --paper-ink: #0d2a18;
  --paper-ink-2: #2b4a2c;
  --paper-ink-3: #3e5c3e;

  --ink: #c8f0d8;               /* values, the brightest text   12.7 : 1 on --plate */
  --ink-2: #7fdcae;             /* secondary                     9.7 : 1 */
  --acc: #28c078;               /* live readings, the accent     6.7 : 1 */
  --label: #5fc298;             /* labels                        7.2 : 1 */
  --muted: #45ab83;             /* separators, disabled          5.5 : 1 */
  --red: #c04038;

  --mon-w: calc(168 * var(--k) * 1px);
  --mon-h: calc(131 * var(--k) * 1px);
  --glass-l: 11.31%;  --glass-t: 12.977%;  --glass-w: 77.381%;  --glass-h: 67.176%;
  --tow-w: calc(46 * var(--k) * 1px);
  --tow-h: calc(131 * var(--k) * 1px);
  --kbd-w: calc(126 * var(--k) * 1px);
  --kbd-h: calc(37 * var(--k) * 1px);
  --std-w: calc(58 * var(--k) * 1px);
  --std-h: calc(18 * var(--k) * 1px);
  --cat-s: 3;                   /* the cat sprite's own block: his raster, resampled, never stretched */
  --cat-w: calc(39 * var(--cat-s) * 1px);
  --mug-w: calc(27 * var(--k) * 1px);
  --badge-ink: 172px;           /* "Private Cat" at 22px Departure: its INK, measured, not its box */
}

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

html { background: var(--ground); }

body {
  margin: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: "Sporting", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the pixel role: only on its own 11 px grid, never smoothed, never glowing */
.t-label, .tower-readout span, .badge, .win-title, .pot, .sb-v, .n-h,
.p-h, .p-sub, .sp-n, .f-k, .tot-v, .key, .cap {
  font-family: "Departure", monospace;
  letter-spacing: calc(1em / 11);
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  text-shadow: none;
  will-change: transform;        /* its own layer, so Chrome on Windows drops its LCD fringe */
}

/* ---------- the room behind everything ---------- */
.room {
  position: fixed; inset: 0; z-index: -2;
  background: url("/img/room.png") center top / cover no-repeat;
  image-rendering: pixelated;
  filter: blur(3px) brightness(0.74) saturate(0.95);
  transform: scale(1.03);
}
.roomglow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 34%, rgba(40, 192, 120, 0.13), rgba(0, 8, 16, 0) 72%);
  animation: breathe 7.5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

/* ---------- the one container ---------- */
main { }
.shell { max-width: calc(var(--page) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- 1. the scene ---------- */
.scene { position: relative; z-index: 1; padding-top: 44px; }

.rig {
  display: grid;
  grid-template-columns: var(--tow-w) var(--mon-w) var(--notes-w);
  grid-template-areas: "tow mon notes";
  gap: var(--gap);
  justify-content: center;
  align-items: start;
}

/* the tower: the keeper */
.tower {
  grid-area: tow;
  position: relative;
  width: var(--tow-w); height: var(--tow-h);
  background: url("/img/tower.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  justify-self: end;
}
.tower-panel {
  position: absolute;
  left: 14.1%; top: 17.5%; width: 71.8%; height: 15.2%;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: calc(2 * var(--k) * 1px) calc(3 * var(--k) * 1px);
}
.t-label { margin: 0; font-size: 22px; line-height: 1; color: var(--acc); }
.t-note { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.t-k { font-size: 14px; line-height: 1.25; color: var(--label); }
.t-v { font-family: "Sligoil", monospace; font-size: 14px; line-height: 1.25; color: var(--ink-2); }
.tower-readout {
  position: absolute; left: 30.6%; top: 44.6%; width: 38.8%; height: 6.2%;
  display: flex; align-items: center; justify-content: center;
}
.tower-readout span { font-size: 22px; line-height: 1; color: var(--acc); }
.tower-led {
  position: absolute; left: 46.5%; top: 52.4%;
  width: calc(2 * var(--k) * 1px); height: calc(2 * var(--k) * 1px);
  background: var(--red); opacity: 0.35;
}
.tower.is-live .tower-led { animation: led 2.4s steps(1) infinite; }
@keyframes led { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.25; } }

/* the monitor: the one object */
.monitor {
  grid-area: mon;
  position: relative;
  width: var(--mon-w); height: var(--mon-h);
  background: url("/img/monitor.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.glass {
  position: absolute;
  left: var(--glass-l); top: var(--glass-t); width: var(--glass-w); height: var(--glass-h);
  background: #021a18;
  overflow: hidden;
  display: flex; flex-direction: column; gap: calc(2 * var(--k) * 1px);
  padding: calc(1 * var(--k) * 1px);
  box-shadow: inset 0 0 calc(6 * var(--k) * 1px) rgba(40, 192, 120, 0.16);
}
.field {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, rgba(40, 192, 120, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}
/* The name on the bezel.
   The monitor sprite has a nameplate RULE drawn into it: block row 126 of its 131, running from
   block 19 to block 138. The word used to be set at 7 blocks from the left and 4 from the bottom,
   which put that rule straight through the lower half of the letters: "Pri" stood on the plain
   bezel and "vate Cat" stood on the rule, and that is what read as two different weights. Nothing
   was wrong with the face. The word now sits ABOVE its rule, centred on it, in whole device pixels
   at every block size: the ink is 172 x 16 px with 3 px of clearance inside its 22 px line box,
   measured, so the placement is written against the ink and not against the box.
     left    78 blocks is the rule's own centre, less half the ink
     bottom  the bezel carries a dark groove at row 121 and the bright rule at row 126; the clear
             face between the upper lip and that groove is rows 113..120, and 14k - 11 drops the
             ink exactly into its middle, so no drawn line crosses a letter at any block size   */
.badge {
  position: absolute;
  left: calc(78 * var(--k) * 1px - var(--badge-ink) / 2 - 1px);
  bottom: calc(14 * var(--k) * 1px - 11px);
  margin: 0; font-size: 22px; line-height: 1; color: var(--acc);
}

/* a window, on the glass or on the desk */
.win {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-image: url("/img/window.png") 11 3 3 3 fill / max(48px, calc(12 * var(--k) * 1px)) calc(3 * var(--k) * 1px) calc(3 * var(--k) * 1px) calc(3 * var(--k) * 1px) / 0 stretch;
  image-rendering: pixelated;
  position: relative;
}
.win-title {
  height: max(48px, calc(12 * var(--k) * 1px));
  display: flex; align-items: center;
  padding: 0 var(--winpad);
  font-size: 22px; line-height: 1;
  color: #022016; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-body { padding: 12px var(--winpad); }

.win-round { flex: 1 1 auto; display: flex; flex-direction: column; }
.win-round .win-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.pot { margin: 0; font-size: var(--pot); line-height: 1; color: var(--ink); }
.pot-unit { color: var(--acc); }
.pot.is-empty { color: var(--muted); }
.pot.is-empty .pot-unit { color: var(--muted); }

.weekbar { display: block; margin: calc(2 * var(--k) * 1px) 0 0; image-rendering: pixelated; }
.weekbar-cap { margin: var(--row) 0 0; font-size: 15px; line-height: 1.45; color: var(--label); }

/* one grid for every readout row: a label over a value, one baseline, one vertical step */
.figs, .split-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--row) var(--gap); margin: var(--row) 0 0;
}
.win-round .figs { margin-top: auto; padding-top: 8px; }
/* value first, label under it: the values keep one baseline however a label wraps */
.fig, .sb, .tot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fig-k, .sb-k, .tot-k { font-size: 14px; line-height: 1.3; color: var(--label); }
.fig-v { font-family: "Sligoil", monospace; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sb-v { font-size: 22px; line-height: 1.25; color: var(--acc); }

/* the token window */
.win-token { flex: 0 0 auto; }
.ca-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--row) var(--gap); }
.ca {
  flex: 1 1 340px; display: block;
  font-family: "Sligoil", monospace; font-size: clamp(14px, 1vw, 15px); line-height: 1.5; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere; user-select: all;
}
.ca.is-empty { color: var(--muted); user-select: none; }
.marks { flex: 0 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.marks .key { height: var(--key-h); padding-top: 0; padding-bottom: 0; }
/* the confirmation word is longer than the word it replaces: the plate is sized for both */
.marks .key-copy { margin-right: 14px; min-width: 134px; }

/* keys: the pressable plates, all of one height */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--key-h); padding: 13px 24px;
  border-style: solid; border-width: 1px;
  border-image: url("/img/key-plate.png") 3 fill / calc(3 * var(--k) * 1px) / 0 stretch;
  image-rendering: pixelated;
  background: none;
  font-size: 22px; line-height: 1;
  color: var(--acc); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color 0.12s ease, transform 0.08s ease;
}
.key img { width: 32px; height: 32px; image-rendering: auto; }
.key:hover:not([disabled]):not([aria-disabled="true"]) { color: var(--ink); }
.key:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(2px); }
.key[disabled], .key[aria-disabled="true"] { opacity: 0.74; cursor: default; color: var(--muted); }
.key-mark { flex: 0 0 auto; width: 64px; padding: 0; }
.key-copy { flex: 0 0 auto; }
.key:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* the sticky notes: the three steps, one width, one height, one right line */
.notes { grid-area: notes; display: grid; gap: 12px; height: var(--mon-h); grid-template-rows: repeat(3, 1fr); }
.note {
  min-height: 0;
  border-style: solid; border-width: 1px;
  border-image: url("/img/note.png") 8 3 6 10 fill / calc(10 * var(--k) * 1px) calc(3 * var(--k) * 1px) calc(5 * var(--k) * 1px) calc(10 * var(--k) * 1px) / 0 stretch;
  image-rendering: pixelated;
  padding: calc(10 * var(--k) * 1px) 24px 16px;
  color: var(--paper-ink);
  display: flex; flex-direction: column; gap: 6px;
}
.n-head { display: flex; align-items: baseline; gap: 10px; }
.n-step { margin: 0; font-family: "Sligoil", monospace; font-size: 14px; line-height: 1; color: var(--paper-ink-3); }
.n-h { margin: 0; font-size: 22px; line-height: 1; color: var(--paper-ink); }
.n-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--paper-ink-2); }

/* the stand, the desk row, the nav keys */
.stand {
  position: relative; z-index: 1;
  width: var(--std-w); height: var(--std-h);
  background: url("/img/stand.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  margin-right: calc(var(--notes-w) + var(--gap) + (var(--mon-w) - var(--std-w)) / 2);
  margin-left: calc(var(--tow-w) + var(--gap) + (var(--mon-w) - var(--std-w)) / 2);
}

/* the desk row: mug, keyboard and cat all stand on the SAME line, centred as one group, so the
   three read as one plane and their sizes are read against each other */
.deskrow {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center; gap: var(--gap);
  flex-wrap: wrap; min-width: 0;
}
.mug { width: var(--mug-w); height: var(--mug-w); background: url("/img/mug.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; flex: 0 0 auto; }
.keyboard { width: var(--kbd-w); height: var(--kbd-h); background: url("/img/keyboard.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; flex: 0 0 auto; }
/* His cat: art/ref/cat-his.jpg, put on its own measured 113 block grid, the ground he drew on
   flooded to alpha and the square cropped to the ink. Not one pixel of his drawing is redrawn.
   The sprite is 39 x 78 blocks, the last 5 of them a contact shadow, so the cat sits ON the desk
   instead of floating over it. Width only, height auto, integer scale. */
.cat {
  flex: 0 0 auto;
  width: var(--cat-w); height: auto;
  image-rendering: pixelated;
  pointer-events: none;
}

.keys {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  max-width: 760px; margin: 0 auto; padding-top: 22px;
}
.cap {
  min-height: var(--cap-h);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(18px, calc(5 * var(--k) * 1px)) 8px max(26px, calc(9 * var(--k) * 1px));
  border-style: solid; border-width: 1px;
  border-image: url("/img/keycap.png") 6 6 8 6 fill / calc(6 * var(--k) * 1px) calc(6 * var(--k) * 1px) calc(8 * var(--k) * 1px) calc(6 * var(--k) * 1px) / 0 stretch;
  image-rendering: pixelated;
  font-size: 22px; line-height: 1;
  color: #d8f6e4; text-decoration: none;
  transition: color 0.12s ease, transform 0.08s ease;
}
.cap:hover { color: #ffffff; }
.cap:active { transform: translateY(3px); }
.cap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cap.is-here { color: #f0fff6; }

/* ---------- the desk: everything the camera finds below the monitor ---------- */
/* No z-index and no filter on this element or on any ancestor of the cat: either one makes a
   stacking context, and a stacking context isolates the cat's screen blend, which then paints its
   own black square onto the page. The desk's two tones are baked into the sprites instead. */
.desk {
  position: relative;
  margin-top: calc(-6 * var(--k) * 1px);
  padding: calc(6 * var(--k) * 1px) 0 110px;
  background: url("/img/desk-tile.png") 0 calc(5 * var(--k) * 1px) / calc(400 * var(--k) * 1px) calc(8 * var(--k) * 1px) repeat;
  image-rendering: pixelated;
}
.desk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(20 * var(--k) * 1px);
  background: url("/img/desk-edge.png") 0 0 / calc(400 * var(--k) * 1px) calc(20 * var(--k) * 1px) repeat-x;
  image-rendering: pixelated; pointer-events: none;
}
.desk > *, .desk-in > * { position: relative; }

.desk-spill { display: flex; flex-direction: column; gap: 20px; margin: 26px 0 0; }
.desk-spill:empty { display: none; }
.desk-spill > .weekbar-cap, .desk-spill > .figs, .desk-spill > .split-bar { padding: 0 2px; margin-top: 0; }

/* the two private sheets sit side by side where there is room */
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; margin-top: 72px; }
.sheets .sheet-sec { margin-top: 0; display: flex; }
.sheets .paper { flex: 1 1 auto; display: flex; flex-direction: column; }
.sheet-sec, .win-sec { margin-top: 72px; }

/* paper sections */
.paper {
  border-style: solid; border-width: 1px;
  border-image: url("/img/paper.png") 3 3 4 3 fill / calc(3 * var(--k) * 1px) calc(3 * var(--k) * 1px) calc(4 * var(--k) * 1px) calc(3 * var(--k) * 1px) / 0 stretch;
  image-rendering: pixelated;
  padding: 32px 32px 36px;
  color: var(--paper-ink);
}
.paper-taped { position: relative; }
.paper-taped::before {
  content: ""; position: absolute; left: 50%; top: calc(-5 * var(--k) * 1px);
  width: calc(14 * var(--k) * 1px); height: calc(9 * var(--k) * 1px); transform: translateX(-50%) rotate(-4deg);
  background: url("/img/tape.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.p-h { margin: 0 0 10px; font-size: 33px; line-height: 1.1; color: var(--paper-ink); }
.p-sub { margin: 24px 0 8px; font-size: 22px; line-height: 1.1; color: var(--paper-ink); }
.p-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.6; max-width: 62ch; color: var(--paper-ink-2); }
.p-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--paper-ink-2); }
.p-list li { margin-bottom: 6px; }
.rules-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--row) 36px; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 4px; }
.sp { display: flex; flex-direction: column; gap: 3px; }
.sp-n { font-size: 33px; line-height: 1; color: var(--paper-ink); }
.sp-k { font-size: 14px; line-height: 1.4; color: var(--paper-ink-2); }

.form { margin-top: 8px; }
.f-row { display: flex; flex-direction: column; gap: 6px; }
.f-k { font-size: 22px; line-height: 1; color: var(--paper-ink); }
.f-v {
  width: 100%; min-width: 0; height: var(--key-h); padding: 0 20px;
  font-family: "Sligoil", monospace; font-size: 16px; color: var(--paper-ink);
  background: rgba(13, 42, 24, 0.07);
  border: 0; border-bottom: 3px solid var(--paper-ink);
}
.f-v::placeholder { color: var(--paper-ink-3); }
.f-v:focus-visible { outline: 3px solid var(--paper-ink); outline-offset: 2px; }
.f-help { margin: 8px 0 0; font-size: 14px; color: var(--paper-ink-2); }
/* the actions of a form are one column: one width, one height, one line of text each */
.f-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.f-acts .key { width: 100%; }
.f-acts .key { color: #bdf2d4; }
.f-acts .key:hover:not([disabled]) { color: #ffffff; }
.f-state { margin: 16px 0 0; font-family: "Sligoil", monospace; font-size: 14px; color: var(--paper-ink-2); overflow-wrap: anywhere; }
.f-state.is-bad { color: #8a2520; }
.f-state.is-good { color: #15532c; }

.mine-out { margin: 20px 0 0; }
.p-v.is-empty { color: var(--paper-ink-3); }
.p-row { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 11px 0; border-bottom: 2px solid rgba(13, 42, 24, 0.22); }
.p-k { flex: 0 0 170px; font-size: 14px; color: var(--paper-ink-2); }
.p-v { font-family: "Sligoil", monospace; font-size: 14px; color: var(--paper-ink); overflow-wrap: anywhere; min-width: 0; }
.p-table { border-collapse: collapse; margin: 18px 0 0; width: 100%; table-layout: fixed; }
.p-table th { text-align: left; font-size: 14px; font-weight: 400; color: var(--paper-ink-2); padding: 9px 14px 9px 0; border-bottom: 2px solid rgba(13, 42, 24, 0.3); }
.p-table td { font-family: "Sligoil", monospace; font-size: 14px; color: var(--paper-ink); padding: 11px 14px 11px 0; border-bottom: 2px solid rgba(13, 42, 24, 0.14); overflow-wrap: anywhere; }
.p-table a { color: var(--paper-ink); }
.p-empty { margin: 14px 0 0; font-size: 14px; color: var(--paper-ink-2); }

/* the rounds window on the desk */
.win-wide .win-body { padding: 24px var(--winpad) 28px; }
.w-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.6; max-width: 70ch; color: var(--ink-2); }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--row) var(--gap); margin-bottom: 22px; }
.tot-v { font-size: 33px; line-height: 1.05; color: var(--ink); }
.w-table { border-collapse: collapse; margin-left: 0; width: 100%; table-layout: fixed; }
.w-table th { text-align: left; font-size: 14px; font-weight: 400; color: var(--label); padding: 9px 14px 9px 0; border-bottom: 2px solid var(--muted); }
.w-table td { font-family: "Sligoil", monospace; font-size: 14px; color: var(--ink); padding: 11px 14px 11px 0; border-bottom: 2px solid rgba(69, 171, 131, 0.35); overflow-wrap: anywhere; }
.w-table a { color: var(--acc); }
.w-table a:hover { color: var(--ink); }
.w-empty { margin: 14px 0 0; font-size: 14px; color: var(--label); }

/* ---------- widths, set by what actually fits and measured, not guessed ----------
   the k=4 rig row (tower + gap + monitor) is 880 px; with the notes column beside it, 1120.      */

/* 960..1183: still the 4 px block, but the notes drop under the rig as three equal cards */
@media (max-width: 1183px) {
  :root { --gut: 28px; }
  .rig { grid-template-columns: var(--tow-w) var(--mon-w); grid-template-areas: "tow mon" "notes notes"; }
  /* the notes now stand in front of the monitor foot, so they cover its neck (a z-index here is
     safe: .notes is not an ancestor of the cat, whose screen blend must stay un-isolated) */
  .notes { height: auto; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); margin-top: var(--gap); position: relative; z-index: 1; }
  .desk { margin-top: 0; }
  .stand { margin-right: calc((var(--mon-w) - var(--std-w)) / 2); }
}

/* 722..959: the 3 px block */
@media (max-width: 959px) {
  :root { --k: 3; --gut: 24px; --gap: 18px; --winpad: 28px; --pot: 44px; --cap-h: 64px; --cat-s: 2; }
  /* the tower's own panel is 99 px wide here: the pixel face cannot hold a six letter word in it,
     so the label takes the text face, which is what RULES/05 asks for at this size anyway */
  .t-label { font-family: "Sporting", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
}

/* under 722: the 2 px block, the rig stacks */
@media (max-width: 721px) {
  /* ten characters of the pixel face at 33 px do not fit a 216 px glass: the pot steps to 22 */
  :root { --k: 2; --gut: 20px; --gap: 16px; --winpad: 22px; --pot: 22px; --cap-h: 56px; }
  /* A sprite, or a pixel face, that starts on HALF a pixel is resampled by the browser and goes
     soft. Centring leaves a half whenever the window is an odd number of pixels wide, so here the
     two sprites are centred by a margin rounded down to a whole pixel instead of by the grid. */
  .rig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mon" "tow" "notes"; justify-items: stretch; }
  .monitor, .tower { margin-left: round(down, calc((100% - var(--mon-w)) / 2), 1px); margin-right: auto; }
  .tower { margin-left: round(down, calc((100% - 78 * var(--k) * 1px) / 2), 1px); }
  .tower { background-image: url("/img/tower-l.png"); width: calc(78 * var(--k) * 1px); height: calc(222 * var(--k) * 1px); }
  .notes { width: 100%; margin-top: 0; }
  .stand { display: none; }
  .keyboard { width: calc(100% - var(--mug-w) - var(--cat-w) - 2 * var(--gap)); max-width: var(--kbd-w); min-width: 120px; height: auto; aspect-ratio: 126 / 37; }
  .desk-spill { max-width: none; }
  .sheets, .rules-cols, .split { grid-template-columns: 1fr; }
  .keys { grid-template-columns: repeat(3, 1fr); max-width: 440px; }
  .paper { padding: 24px 22px 28px; }
  .p-h, .sp-n, .tot-v { font-size: 22px; }
  .p-k { flex: 0 0 100%; }
}

/* under 560: one note per row, two keys per row */
@media (max-width: 559px) {
  .notes { grid-template-columns: 1fr; }
  .keys { grid-template-columns: repeat(2, 1fr); max-width: 340px; }
}

@media (max-width: 491px) { :root { --gut: 16px; } }

/* under 368 the full monitor no longer fits inside the gutter: its narrow cut does */
@media (max-width: 367px) {
  /* the narrow cut is a different drawing, so the sprite measures that every other rule reads from
     change with it: declare them once here instead of overriding width and height on the element */
  :root { --gut: 12px; }
}

/* under 360 the full monitor no longer fits even inside the 12 px gutter: its narrow cut does.
   At 360 it fits exactly (336 of sprite in 336 of column), so the band that carries the different
   drawing, and the different bezel geometry that comes with it, starts one pixel below that. */
@media (max-width: 359px) {
  :root { --mon-w: calc(139 * var(--k) * 1px); --mon-h: calc(109 * var(--k) * 1px); }
  .monitor { background-image: url("/img/monitor-s.png"); }
  .glass { --glass-l: 11.511%; --glass-t: 12.844%; --glass-w: 77.698%; --glass-h: 66.972%; }
  /* the narrow cut carries its own nameplate rule: row 104 of 109, blocks 15..112 */
  /* the narrow cut is only ever drawn at the 2 px block, and its clear face is 7 blocks: two less
     than the name's own ink needs, so the ink overhangs its groove and its lip by one pixel each */
  .badge { left: calc(63 * var(--k) * 1px - var(--badge-ink) / 2 - 1px); bottom: calc(11.5 * var(--k) * 1px - 11px); }
}

@media (prefers-reduced-motion: reduce) {
  .roomglow { animation: none; opacity: 0.86; }
  .tower.is-live .tower-led { animation: none; opacity: 1; }
  .key:active, .cap:active, .cap, .key { transition: none; transform: none; }
}