/* blx.im disclaimer window: a System 1 (1984) document window. Scoped to #blx-window and the
   HUD footer row (.blx-hud), except the @font-face rules (families namespaced "BLX ..."), the
   footer row's sizes on :root (the window keeps clear of the row), the short-viewport reflow,
   which lets the page itself scroll, and the zoom rects, which the script draws on the page
   itself so their XOR lines really invert the scene behind them. This file is only loaded on blx.im. */
@font-face {
  font-family: "BLX Geist Pixel";
  src: url("/assets/fonts/GeistPixel-Square.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BLX Pixelify";
  src: url("/assets/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Pixelify's own curly quotes lean the wrong way and read as backticks: borrow Geist Pixel's comma-shaped ones */
@font-face {
  font-family: "BLX Pixelify";
  src: url("/assets/fonts/GeistPixel-Square.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+2018-201F;
}
/* the title bar's Chicago stand-in: Jersey 10 is a 1:1 bitmap at 18.6667px (75/1400 em grid) */
@font-face {
  font-family: "BLX Jersey";
  src: url("/assets/fonts/jersey-10-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* The HUD footer row, bottom right: "pause motion" (shown by the script) and "contact".
   Its size is worked out here, from the type, so the window can keep 20px of air from it:
   a mono advance of at most 0.62em plus 0.34em of letter-spacing per character. */
:root {
  --blx-hud-fs: max(11px, 0.6875rem);              /* follows a larger browser default text size */
  --blx-hud-row: calc(var(--blx-hud-fs) + 16px);   /* one line: 8px of padding above and below */
  --blx-hud-gap: 28px;
  --blx-hud-right: calc(var(--m) + 12px + env(safe-area-inset-right, 0px));
  --blx-hud-bottom: calc(var(--m) + 10px + env(safe-area-inset-bottom, 0px));
  /* "— contact" alone (no script, so no motion control) */
  --blx-hud-w: calc(22px + 6.38 * var(--blx-hud-fs));
  /* the room inside the HUD frame, from its left line to where the row ends on the right */
  --blx-hud-room: calc(100vw - 2 * var(--m) - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  /* the row's height: one line, or two when it is wider than the room and wraps (very large text on a phone) */
  --blx-hud-h: calc(var(--blx-hud-row) + clamp(0px, (var(--blx-hud-w) - var(--blx-hud-room)) * 1000, var(--blx-hud-row)));
}
/* "‖ pause motion", the gap, "— contact": reserved whenever scripting is on (so a late script never
   narrows the window), and in any case once the script has set up the motion control */
@media (scripting: enabled) {
  :root { --blx-hud-w: calc(17px + 11.52 * var(--blx-hud-fs) + var(--blx-hud-gap) + 22px + 6.38 * var(--blx-hud-fs)); }
}
html[data-motion] { --blx-hud-w: calc(17px + 11.52 * var(--blx-hud-fs) + var(--blx-hud-gap) + 22px + 6.38 * var(--blx-hud-fs)); }

#blx-window {
  /* 1-bit palette in inverse video: light ink on black, the light tinted a touch cool like the scene.
     Solid "paper" sits under the chrome (knock-outs, close box, scroll bar) so it stays pixel-crisp;
     the body is smoked glass over a blurred, dimmed view of the collider. Worst case, a pure white
     flash right behind the text, still leaves the ink at about 8:1 against the glass. */
  --blx-ink: #f4f7fb;
  --blx-paper: #000;
  --blx-glass: rgba(2, 3, 5, 0.58);
  --blx-backdrop: blur(12px) brightness(0.7);

  /* Type. Geist Pixel Square is drawn on a 38-unit grid: 26.3158px per em is 1 font pixel per CSS px.
     Body sizes are 2/3 and 3/4 of that (2/3 is exactly 2 device px per font pixel on 3x phones);
     the lede is 1:1, crisp at 1x, 2x and 3x. Line heights are rounded to whole pixels. */
  --blx-body: 17.5439px;
  --blx-floor: 1.0964rem;          /* follows a larger browser default text size */
  --blx-fs: max(var(--blx-body), var(--blx-floor));
  --blx-lh: calc(var(--blx-fs) * 1.48);
  --blx-lede: max(26.3158px, 1.6447rem);   /* the headings and lede follow a larger default text size too */
  --blx-lede-r: 1.216;             /* line height 32px */
  --blx-lede-lh: calc(var(--blx-lede) * var(--blx-lede-r));
  --blx-h1: max(40px, 2.5rem);     /* Pixelify Sans Bold */
  --blx-h1-lh: var(--blx-h1);
  --blx-h2: max(22px, 1.375rem);
  --blx-h2-r: 1.1818;              /* line height 26px */
  --blx-h2-lh: calc(var(--blx-h2) * var(--blx-h2-r));
  --blx-measure: 30em;             /* about 62 characters of Geist Pixel */
  --blx-smear: 1px;                /* QuickDraw bold: the glyph drawn again this far to the right */

  /* vertical rhythm, in whole pixels */
  --blx-pad-x: 18px;
  --blx-pad-top: 16px;
  --blx-pad-bottom: 26px;
  --blx-sp: 12px;                  /* between paragraphs */
  --blx-sp-sec: 22px;              /* above a section heading */
  --blx-sp-h: 4px;                 /* section heading to its first paragraph */
  --blx-sp-li: 8px;

  /* chrome, in CSS px (1 px = 1 Mac pixel), the same at every size */
  --blx-sb: 16px;                  /* scroll bar, including its left rule */
  --blx-win-w: calc(var(--blx-measure) + 2 * var(--blx-pad-x) + var(--blx-sb) + 2px);

  /* the host page's HUD frame (inset --blx-m) and its bottom-right footer row */
  --blx-m: clamp(18px, 4.5vmin, 44px);
  --blx-gap: clamp(10px, 2.5vmin, 28px);
  --blx-inset: calc(var(--blx-m) + var(--blx-gap));
  --blx-safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --blx-vh: 100vh;
  /* centred: the footer row sits m + 10px up and is --blx-hud-h tall (27px at the default text size);
     keep 20px of air above it, outside the 1px shadow and 1px matte */
  --blx-bottom: calc(var(--blx-hud-bottom) + var(--blx-hud-h) + 20px + 2px);
  --blx-w: min(var(--blx-win-w), 100vw - 2 * (var(--blx-inset) + var(--blx-safe-x)));
  --blx-W: var(--blx-w);
  --blx-x: calc((100vw - var(--blx-W)) / 2);
  --blx-y: calc(var(--blx-inset) + env(safe-area-inset-top, 0px));
  --blx-h: calc(var(--blx-vh) - var(--blx-y) - var(--blx-bottom));

  position: fixed;
  z-index: 20;
  top: var(--blx-y);
  left: var(--blx-x);
  width: var(--blx-W);
  max-height: var(--blx-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  color: var(--blx-ink);
  background: var(--blx-glass);
  -webkit-backdrop-filter: var(--blx-backdrop);
  backdrop-filter: var(--blx-backdrop);
  border: 1px solid var(--blx-ink);
  /* the hard 1px shadow (white, in inverse video), then a 1px black matte that keeps it clear of the scene */
  box-shadow:
    1px 1px 0 0 var(--blx-ink),
    0 0 0 1px var(--blx-paper),
    1px 1px 0 1px var(--blx-paper);
  font-family: "BLX Geist Pixel", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--blx-fs);
  font-synthesis: none;
  font-kerning: normal;
  font-variant-ligatures: none;
  line-height: var(--blx-lh);
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  #blx-window { --blx-vh: 100dvh; }
}
/* Snap the frame to whole pixels so every 1px line lands on whole device pixels at 1x, 2x and 3x.
   The width is even, so the centred title (an even number of pixels wide) lands on whole pixels too. */
@supports (width: round(down, 1.5px, 1px)) {
  #blx-window {
    --blx-W: round(down, var(--blx-w), 2px);
    --blx-lh: round(nearest, calc(var(--blx-fs) * 1.48), 1px);
    --blx-lede-lh: round(nearest, calc(var(--blx-lede) * var(--blx-lede-r)), 1px);
    --blx-h1-lh: round(nearest, var(--blx-h1), 1px);
    --blx-h2-lh: round(nearest, calc(var(--blx-h2) * var(--blx-h2-r)), 1px);
    top: round(nearest, var(--blx-y), 1px);
    left: round(down, var(--blx-x), 1px);
    max-height: round(down, var(--blx-h), 1px);
  }
}
#blx-window *, #blx-window *::before, #blx-window *::after { box-sizing: border-box; }
#blx-window [hidden] { display: none !important; }

/* ---------- title bar: 19px plus its rule, six 1px pinstripes on rows 4-14 ---------- */
#blx-window .blx-titlebar {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  height: 20px;
  border-bottom: 1px solid var(--blx-ink);
  background: repeating-linear-gradient(to bottom, var(--blx-ink) 0 1px, transparent 1px 2px)
              1px 4px / calc(100% - 2px) 11px no-repeat,
              var(--blx-paper);      /* solid, so the pinstripes stay crisp over the glass */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
#blx-window .blx-title {
  display: block;
  height: 19px;
  padding: 0 7px;
  background: var(--blx-paper);      /* knocks the stripes out behind the title */
  font: 400 18.6667px/18px "BLX Jersey", "BLX Pixelify", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
#blx-window .blx-titlebar,
#blx-window h1,
#blx-window h2,
#blx-window .blx-info {
  -webkit-font-smoothing: none;      /* macOS: 1-bit edges on the chrome and display type */
  -moz-osx-font-smoothing: grayscale;
}

/* close box: 11x11 on the stripe band, with a 1px knock-out either side */
#blx-window .blx-closebox {
  position: absolute;
  z-index: 1;
  left: 6px;
  top: 4px;
  width: 13px;
  height: 11px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--blx-paper);
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#blx-window .blx-closebox::before {             /* the box itself */
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--blx-ink);
  background: var(--blx-paper) no-repeat 0 0 / 9px 9px;
}
#blx-window .blx-closebox::after {              /* a larger, invisible hit area for fingers: 33 x 33 */
  content: "";
  position: absolute;
  inset: -11px -10px;
}
#blx-window .blx-closebox:active::before {      /* the System 1 pressed close box */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23f4f7fb' d='M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM1 1h1v1H1zM4 1h1v1H4zM7 1h1v1H7zM2 2h1v1H2zM6 2h1v1H6zM0 4h3v1H0zM6 4h3v1H6zM2 6h1v1H2zM6 6h1v1H6zM1 7h1v1H1zM4 7h1v1H4zM7 7h1v1H7zM0 8h1v1H0zM4 8h1v1H4zM8 8h1v1H8z'/%3E%3C/svg%3E");
}
/* without the script the box ships inert (tabindex -1, aria-hidden): it looks the same but does nothing */
#blx-window .blx-closebox[aria-hidden="true"] { cursor: default; }
#blx-window .blx-closebox[aria-hidden="true"]:active::before { background-image: none; }
#blx-window .blx-closebox:focus { outline: none; }
#blx-window .blx-closebox:focus-visible::before {
  box-shadow: 0 0 0 1px var(--blx-paper), 0 0 0 3px var(--blx-ink);
}

/* WindowShade: rolled up to the title bar, which stays exactly where it was */
#blx-window.is-collapsed .blx-titlebar { height: 19px; border-bottom: 0; cursor: pointer; }
#blx-window.is-collapsed .blx-titlebar::after {  /* a taller target for rolling it back down */
  content: "";
  position: absolute;
  inset: -8px -2px;
}

/* ---------- 404: the System 1 Finder info bar ---------- */
#blx-window .blx-info {
  display: none;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25em;
  margin: 0;
  padding: 2px var(--blx-pad-x) 3px;
  border-bottom: 3px double var(--blx-ink);
  line-height: max(var(--blx-info-lh, 22px), 1.3em);   /* grows with a larger default text size */
  white-space: nowrap;
}
@supports (width: round(down, 1.5px, 1px)) {
  /* whole pixels: exactly 22px (25px on tablets and up) at the default text size */
  #blx-window .blx-info { line-height: round(down, max(var(--blx-info-lh, 22px), 1.3em), 1px); }
}
#blx-window.is-404 .blx-info { display: flex; }
#blx-window .blx-info > span { display: inline-flex; align-items: center; }
/* the 404 and its glyph stay together; the message wraps when the text is large */
#blx-window .blx-info > span:last-child { display: block; min-width: 0; white-space: normal; }
#blx-window .blx-nopage {                       /* a dashed, dog-eared missing page */
  flex: none;
  width: 11px;
  height: 14px;
  margin-right: 7px;
  background: var(--blx-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='14' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM6 0h1v1H6zM6 1h2v1H6zM0 2h1v1H0zM6 2h1v1H6zM8 2h1v1H8zM6 3h1v1H6zM9 3h1v1H9zM0 4h1v1H0zM6 4h5v1H6zM0 6h1v1H0zM10 6h1v1h-1zM0 8h1v1H0zM10 8h1v1h-1zM0 10h1v1H0zM10 10h1v1h-1zM0 12h1v1H0zM10 12h1v1h-1zM1 13h1v1H1zM3 13h1v1H3zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9z'/%3E%3C/svg%3E") 0 0 / 11px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='14' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM6 0h1v1H6zM6 1h2v1H6zM0 2h1v1H0zM6 2h1v1H6zM8 2h1v1H8zM6 3h1v1H6zM9 3h1v1H9zM0 4h1v1H0zM6 4h5v1H6zM0 6h1v1H0zM10 6h1v1h-1zM0 8h1v1H0zM10 8h1v1h-1zM0 10h1v1H0zM10 10h1v1h-1zM0 12h1v1H0zM10 12h1v1h-1zM1 13h1v1H1zM3 13h1v1H3zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9z'/%3E%3C/svg%3E") 0 0 / 11px 14px no-repeat;
}

/* ---------- content pane ---------- */
#blx-window .blx-body,
#blx-window .blx-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#blx-window .blx-body { flex-direction: column; }
#blx-window .blx-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px;          /* focus scrolling leaves room for the links' focus rings */
  outline: none;
}
#blx-window .blx-scroll:focus-visible {
  outline: 2px dotted var(--blx-ink);
  outline-offset: -5px;
}

/* ---------- System 1 scroll bar (drawn; it mirrors the native scroll position) ----------
   Every part shares its 1px edges with its neighbours: the title bar rule tops the up arrow box,
   the square thumb's rules sit on the arrow boxes' rules at either end of its travel,
   and the window frame closes the grow box. */
#blx-window .blx-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--blx-sb);
  border-left: 1px solid var(--blx-ink);
  background: var(--blx-paper);        /* solid, so the dither stays a true 1-bit 50% */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#blx-window .blx-bar > span { position: relative; display: block; }
#blx-window .blx-arrow,
#blx-window .blx-grow { flex: none; height: 16px; }
#blx-window .blx-up { border-bottom: 1px solid var(--blx-ink); }
#blx-window .blx-down,
#blx-window .blx-grow { border-top: 1px solid var(--blx-ink); }
#blx-window .blx-arrow::before,
#blx-window .blx-grow::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 15px; height: 15px;
  background: var(--blx-ink);
  -webkit-mask: var(--blx-icon) 0 0 / 15px 15px no-repeat;
  mask: var(--blx-icon) 0 0 / 15px 15px no-repeat;
}
#blx-window .blx-up   { --blx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M7 2h1v1H7zM6 3h1v1H6zM8 3h1v1H8zM5 4h1v1H5zM9 4h1v1H9zM4 5h1v1H4zM10 5h1v1h-1zM3 6h1v1H3zM11 6h1v1h-1zM2 7h4v1H2zM9 7h4v1H9zM5 8h1v4H5zM9 8h1v4H9zM5 12h5v1H5z'/%3E%3C/svg%3E"); }
#blx-window .blx-down { --blx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h5v1H5zM5 3h1v4H5zM9 3h1v4H9zM2 7h4v1H2zM9 7h4v1H9zM3 8h1v1H3zM11 8h1v1h-1zM4 9h1v1H4zM10 9h1v1h-1zM5 10h1v1H5zM9 10h1v1H9zM6 11h1v1H6zM8 11h1v1H8zM7 12h1v1H7z'/%3E%3C/svg%3E"); }
#blx-window .blx-up.is-pressed   { --blx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M7 2h1v1H7zM6 3h3v1H6zM5 4h5v1H5zM4 5h7v1H4zM3 6h9v1H3zM2 7h11v1H2zM5 8h5v5H5z'/%3E%3C/svg%3E"); }
#blx-window .blx-down.is-pressed { --blx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h5v5H5zM2 7h11v1H2zM3 8h9v1H3zM4 9h7v1H4zM5 10h5v1H5zM6 11h3v1H6zM7 12h1v1H7z'/%3E%3C/svg%3E"); }
/* the grow box: a small square behind at top left, a 9x9 square in front at bottom right */
#blx-window .blx-grow { --blx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h7v1H2zM2 3h1v6H2zM8 3h1v1H8zM3 8h1v1H3zM4 4h9v1H4zM4 12h9v1H4zM4 5h1v7H4zM12 5h1v7h-1z'/%3E%3C/svg%3E"); }
#blx-window .blx-track {
  flex: 1 1 auto;
  min-height: 18px;
  margin: -1px 0;                     /* overlaps the arrow boxes' rules, so the thumb shares them */
}
#blx-window .blx-track::before {      /* 50% grey, the 1-bit way */
  content: "";
  position: absolute;
  inset: 1px 0;
  background: var(--blx-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E") 0 0 / 2px 2px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E") 0 0 / 2px 2px repeat;
}
#blx-window .blx-thumb {               /* the square System 1 scroll box, 16 x 16 with its rules */
  position: absolute;
  z-index: 1;
  left: 0; right: 0; top: 0;
  height: 16px;
  background: var(--blx-paper);
  border-top: 1px solid var(--blx-ink);
  border-bottom: 1px solid var(--blx-ink);
}
/* nothing to scroll: an inactive System 1 bar, plain (black, in inverse video) */
#blx-window .blx-bar.is-idle .blx-up,
#blx-window .blx-bar.is-idle .blx-down { border-color: transparent; }
#blx-window .blx-bar.is-idle .blx-arrow::before,
#blx-window .blx-bar.is-idle .blx-track::before,
#blx-window .blx-bar.is-idle .blx-thumb { display: none; }

/* Without JS the drawn bar stays hidden and the native bar is styled instead (Chromium / Safari desktop).
   Chromium ignores ::-webkit-scrollbar once scrollbar-color is set, so that is given only to other engines. */
@media (forced-colors: none) {
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar { width: var(--blx-sb); }
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-track {
    background: linear-gradient(var(--blx-ink), var(--blx-ink)) left / 1px 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23000'/%3E%3Cpath fill='%23f4f7fb' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E") 0 0 / 2px 2px;
  }
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-thumb {
    background: var(--blx-paper);
    border: 1px solid var(--blx-ink);
    border-right: 0;
  }
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-button:vertical:start:increment,
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
    display: block;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23000'/%3E%3Cpath fill='%23f4f7fb' d='M0 0h1v16H0zM1 15h15v1H1zM8 2h1v1H8zM7 3h1v1H7zM9 3h1v1H9zM6 4h1v1H6zM10 4h1v1h-1zM5 5h1v1H5zM11 5h1v1h-1zM4 6h1v1H4zM12 6h1v1h-1zM3 7h4v1H3zM10 7h4v1h-4zM6 8h1v4H6zM10 8h1v4h-1zM6 12h5v1H6z'/%3E%3C/svg%3E") 0 0 / 16px 16px;
  }
  #blx-window:not(.blx-has-bar) .blx-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
    display: block;
    height: 32px;   /* down arrow box with the grow box under it */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' shape-rendering='crispEdges'%3E%3Crect width='16' height='32' fill='%23000'/%3E%3Cpath fill='%23f4f7fb' d='M0 0h1v32H0zM1 0h15v1H1zM6 3h5v1H6zM6 4h1v4H6zM10 4h1v4h-1zM3 8h4v1H3zM10 8h4v1h-4zM4 9h1v1H4zM12 9h1v1h-1zM5 10h1v1H5zM11 10h1v1h-1zM6 11h1v1H6zM10 11h1v1h-1zM7 12h1v1H7zM9 12h1v1H9zM8 13h1v1H8zM1 16h15v1H1zM3 18h7v1H3zM3 19h1v6H3zM9 19h1v1H9zM4 24h1v1H4zM5 20h9v1H5zM5 28h9v1H5zM5 21h1v7H5zM13 21h1v7h-1z'/%3E%3C/svg%3E") 0 0 / 16px 32px;
  }
}
@supports not selector(::-webkit-scrollbar) {
  #blx-window:not(.blx-has-bar) .blx-scroll { scrollbar-width: auto; scrollbar-color: var(--blx-ink) #2b2e33; }
}
#blx-window.blx-has-bar .blx-scroll { scrollbar-width: none; }
#blx-window.blx-has-bar .blx-scroll::-webkit-scrollbar { display: none; }

/* ---------- the words ---------- */
#blx-window .blx-text {
  max-width: calc(var(--blx-measure) + 2 * var(--blx-pad-x));
  padding: var(--blx-pad-top) var(--blx-pad-x) var(--blx-pad-bottom);
}
#blx-window .blx-text > * { margin: 0; }
#blx-window .blx-text > * + * { margin-top: var(--blx-sp); }
#blx-window h1,
#blx-window h2 {
  font-family: "BLX Pixelify", "BLX Geist Pixel", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-wrap: balance;
}
#blx-window h1 {
  font-size: var(--blx-h1);
  line-height: var(--blx-h1-lh);
  letter-spacing: 0.02em;
}
#blx-window .blx-text > .blx-lede {
  margin-top: 4px;
  font-size: var(--blx-lede);
  line-height: var(--blx-lede-lh);
  text-wrap: balance;
}
#blx-window .blx-text > h2 {
  margin-top: var(--blx-sp-sec);
  font-size: var(--blx-h2);
  line-height: var(--blx-h2-lh);
}
#blx-window .blx-text > h2 + * { margin-top: var(--blx-sp-h); }
#blx-window p, #blx-window li { text-wrap: pretty; overflow-wrap: break-word; }   /* very large text on a narrow phone */
/* QuickDraw bold: the body face drawn twice, one pixel apart, and one pixel wider per letter */
#blx-window strong {
  font-weight: inherit;
  letter-spacing: var(--blx-smear);
  text-shadow: var(--blx-smear) 0 0 currentColor;
}
#blx-window ul { list-style: none; padding: 0; }
#blx-window li { position: relative; padding-left: 1.25em; }
#blx-window li + li { margin-top: var(--blx-sp-li); }
#blx-window li::before {               /* a 6px square bullet, centred on the x-height */
  content: "";
  position: absolute;
  left: 0.2em;
  top: calc(var(--blx-lh) / 2 + 0.089em - 3px);
  width: 6px; height: 6px;
  background: var(--blx-ink);
}
@supports (width: round(down, 1.5px, 1px)) {
  #blx-window li::before { top: round(nearest, calc(var(--blx-lh) / 2 + 0.089em - 3px), 1px); }
}
#blx-window .blx-nw { white-space: nowrap; }
#blx-window a {
  color: var(--blx-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: none;
}
#blx-window a:hover { text-decoration-thickness: 2px; }
#blx-window a:focus { outline: none; }
#blx-window a:focus-visible {
  background: var(--blx-ink);
  color: var(--blx-paper);
  outline: 2px solid var(--blx-ink);
  outline-offset: 2px;
  text-decoration: none;
}
#blx-window .blx-ext {                 /* a 1-bit "opens elsewhere" arrow after the link's last word */
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: 0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h6v1H3zM8 1h1v5H8zM7 1h1v1H7zM6 2h1v1H6zM5 3h1v1H5zM4 4h1v1H4zM3 5h1v1H3zM2 6h1v1H2zM1 7h1v1H1zM0 8h1v1H0z'/%3E%3C/svg%3E") 0 0 / 9px 9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h6v1H3zM8 1h1v5H8zM7 1h1v1H7zM6 2h1v1H6zM5 3h1v1H5zM4 4h1v1H4zM3 5h1v1H3zM2 6h1v1H2zM1 7h1v1H1zM0 8h1v1H0z'/%3E%3C/svg%3E") 0 0 / 9px 9px no-repeat;
}
#blx-window .blx-foot { padding-top: var(--blx-sp); border-top: 1px dotted var(--blx-ink); }
#blx-window ::selection { background: var(--blx-ink); color: var(--blx-paper); }
#blx-window .blx-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- emphasis on dense screens: one whole device pixel or one font pixel ---------- */
@media (min-resolution: 2.5dppx) {
  #blx-window { --blx-smear: 0.6667px; }   /* 2 device px: exactly one font pixel of the 3x phone body */
}

/* ---------- narrow phones: a little more room for the words ---------- */
@media (max-width: 374px) {
  #blx-window { --blx-pad-x: 14px; }
  #blx-window .blx-info { column-gap: 1em; }
}

/* ---------- tablets and up: bigger type, the same 1:1 chrome ---------- */
@media (min-width: 600px) and (min-height: 500px) {
  #blx-window {
    --blx-body: 19.7368px;     /* 3/4 of Geist Pixel's 1:1 size */
    --blx-floor: 1.2335rem;
    --blx-lede-r: 1.292;       /* line height 34px */
    --blx-h1: max(50px, 3.125rem);   /* Pixelify pixels are about 0.1em: 5px pixels */
    --blx-h2: max(24px, 1.5rem);
    --blx-h2-r: 1.25;          /* line height 30px */
    --blx-pad-x: 28px;
    --blx-pad-top: 20px;
    --blx-pad-bottom: 30px;
    --blx-sp: 14px;
    --blx-sp-sec: 24px;
    --blx-sp-h: 4px;
    --blx-info-lh: 25px;
  }
  #blx-window .blx-info { column-gap: 3em; }
}

/* ---------- desktops: the window sits on the left, the scene stays visible on the right ---------- */
@media (min-width: 960px) {
  #blx-window {
    --scene-docked: 1;   /* moves the collider into the middle of the space to the right */
    --blx-x: calc(var(--blx-inset) + env(safe-area-inset-left, 0px));
    /* never wider than the room left of the footer row, keeping 20px of air outside the shadow and matte */
    --blx-w: min(var(--blx-win-w), 100vw - var(--blx-x) - var(--blx-hud-right) - var(--blx-hud-w) - 22px);
    --blx-bottom: calc(var(--blx-inset) + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1280px) {
  /* most of the way only: its left arc stays behind the glass */
  #blx-window { --scene-docked: 0.6; }
}

/* ---------- the HUD footer row: "pause motion" and "contact", bottom right ----------
   The page's own corner link (site.css) moves into the row; the motion control is dressed exactly like it,
   with a tiny 1-bit glyph where the link has its leading line. The row has an explicit width, the one the
   window keeps clear of, and wraps onto two lines only when very large text will not fit on a phone. */
.blx-hud {
  position: fixed;
  z-index: 2;
  right: var(--blx-hud-right);
  bottom: var(--blx-hud-bottom);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--blx-hud-gap);
  width: min(var(--blx-hud-w), var(--blx-hud-room));
  margin: 0;
}
.blx-hud #contact {
  position: relative;
  inset: auto;
  font-size: var(--blx-hud-fs);
}
.blx-hud .blx-motion {
  position: relative;
  flex: none;
  box-sizing: content-box;
  min-width: calc(12ch + 4.08em);    /* "pause motion", so the glyph stays put when the label changes */
  margin: 0;
  padding: 8px 0 8px 17px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 11px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--blx-hud-fs);
  letter-spacing: 0.34em;
  text-transform: lowercase;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  transition: color 0.4s ease;
}
.blx-hud .blx-motion[hidden] { display: none; }
html:not([data-scene-live]) .blx-hud .blx-motion { visibility: hidden; }   /* no scene (yet): nothing to pause */
.blx-hud .blx-motion::before {        /* 1-bit: two bars to pause, a small triangle to play */
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 4.5px);          /* sits on the baseline, its top 1px above the x-height */
  width: 7px;
  height: 7px;
  background: currentColor;
  -webkit-mask: var(--blx-glyph) 0 0 / 7px 7px no-repeat;
  mask: var(--blx-glyph) 0 0 / 7px 7px no-repeat;
  --blx-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v7H0zM4 0h2v7H4z'/%3E%3C/svg%3E");
}
html[data-motion="paused"] .blx-hud .blx-motion::before {
  --blx-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
}
@supports (width: round(down, 1.5px, 1px)) {
  /* whole pixels, so the glyph sits on the text's baseline (down: only ever further from the window) */
  .blx-hud {
    right: round(down, var(--blx-hud-right), 1px);
    bottom: round(down, var(--blx-hud-bottom), 1px);
  }
  .blx-hud .blx-motion::before { top: round(down, calc(50% - 4.5px), 1px); }
}
.blx-hud .blx-motion { text-shadow: 0 0 2px #000, 0 0 6px #000; }
.blx-hud .blx-motion:hover, .blx-hud .blx-motion:focus-visible { color: #fff; }
.blx-hud .blx-motion:focus-visible { outline: 1px solid rgba(255,255,255,0.5); outline-offset: 4px; }

/* ---------- System 1 zoom rects as the window opens (drawn on the page by the script) ---------- */
#blx-window.blx-opening { visibility: hidden; }
.blx-zoom {
  position: fixed;
  z-index: 21;
  box-sizing: border-box;
  border: 1px solid #fff;
  mix-blend-mode: difference;   /* XOR: inverts whatever the scene draws underneath */
  pointer-events: none;
}

/* no backdrop blur available: near-opaque glass, so the words never compete with the scene */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #blx-window { --blx-glass: rgba(2, 3, 5, 0.9); }
}
@media (prefers-reduced-transparency: reduce) {
  #blx-window { --blx-glass: var(--blx-paper); --blx-backdrop: none; }
}

@media (forced-colors: active) {
  #blx-window { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #blx-window .blx-bar { display: none; }
  #blx-window.blx-has-bar .blx-scroll { scrollbar-width: auto; }
  #blx-window strong { font-weight: 700; font-synthesis: weight; }   /* text shadows are dropped here */
  #blx-window .blx-titlebar { background: none; }
  #blx-window .blx-closebox::before { border-color: ButtonText; }
  #blx-window li::before, #blx-window .blx-ext, #blx-window .blx-nopage { forced-color-adjust: none; background: CanvasText; }
  /* the title's text backplate would otherwise paint over the window's top frame line */
  #blx-window .blx-title { overflow: hidden; }
  /* box shadows are dropped here, so the close box shows its focus with an outline */
  #blx-window .blx-closebox:focus-visible::before { outline: 2px solid Highlight; outline-offset: 1px; }
  .blx-hud .blx-motion::before { forced-color-adjust: none; background: ButtonText; }
  .blx-hud #contact::before { forced-color-adjust: none; background: LinkText; }
}
@media (prefers-reduced-motion: reduce) {
  .blx-zoom { display: none; }
  #blx-window.blx-opening { visibility: visible; }
}

/* ---------- short viewports (300-400% zoom on a laptop, a phone on its side): reflow ----------
   The page scrolls instead of the window: the window sits in the normal flow at its usual insets, at its
   natural height, with no scroll bar of its own, and the footer row follows it, right-aligned, keeping
   20px of air below the window's shadow and matte. WindowShade still rolls it up to its title bar. */
@media (max-height: 430px) {
  html { height: auto; overflow: auto; scroll-padding-block: 8px; }
  body { height: auto; min-height: 100vh; overflow: visible; display: flow-root; }
  #blx-window {
    --blx-w: min(var(--blx-win-w), 100vw - 2 * (var(--blx-inset) + var(--blx-safe-x)));
    --blx-ml: calc((100% - var(--blx-W)) / 2);
    position: relative;
    top: auto;
    left: auto;
    max-height: none;
    margin: var(--blx-y) 0 0 var(--blx-ml);
  }
  #blx-window .blx-scroll { overflow: visible; }
  #blx-window .blx-bar { display: none; }
  .blx-hud {
    position: relative;
    inset: auto;
    width: auto;
    margin: 22px var(--blx-hud-right) var(--blx-hud-bottom) calc(var(--m) + 12px + env(safe-area-inset-left, 0px));
  }
  /* here the row can land mid-screen over the collider: a black plate behind each label */
  .blx-hud .blx-motion,
  .blx-hud #contact { background: rgba(0, 0, 0, 0.85); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85); }
}
@media (max-height: 430px) and (min-width: 960px) {
  #blx-window { --blx-ml: var(--blx-x); }   /* docked on the left, as in the full layout */
}
@supports (width: round(down, 1.5px, 1px)) {
  @media (max-height: 430px) {
    #blx-window { margin: round(nearest, var(--blx-y), 1px) 0 0 round(down, var(--blx-ml), 1px); }
  }
}