/* =====================================================================
   PROMATHIA — poster-accurate build
   Geometry is measured from the 2720 × 4554 reference and expressed in
   design units (u). 1u = stage width / 2720.
   ===================================================================== */

/* Paper Mono (OFL, fonts/PaperMono-OFL.txt). size-adjust 99% lands its 0.606 em advance on the sheet's 0.6 em grid,
   so every measured position holds. Line metrics keep the old 1.133 em box but are rebalanced so capitals sit
   dead-centre in any line box. Only a Regular exists, so 700 maps to the same file (no faux bold). */
@font-face {
  font-family: "Paper Mono";
  src: url("../fonts/paper-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 99%;
  ascent-override: 92.25%;
  descent-override: 21.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Paper Mono";
  src: url("../fonts/paper-mono.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 99%;
  ascent-override: 92.25%;
  descent-override: 21.6%;
  line-gap-override: 0%;
}
/* OPTI Enge Etienne (supplied): the PROMATHIA masthead. Metrics set so the 0.839 em capitals fill a 1 em box,
   centred: line-height 1 hugs the caps with 0.08 em above and below on every platform. */
@font-face {
  font-family: "Enge Etienne";
  src: url("../fonts/opti-enge-etienne.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 91.95%;
  descent-override: 8.05%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Missal Glyph";
  src: url("../fonts/symbols.woff2") format("woff2");
  unicode-range: U+2650;
  font-display: block;
}
@font-face {
  font-family: "Missal Amp";
  src: url("../fonts/amp.woff2?v=3") format("woff2"); /* Rouge Script & (OFL, see fonts/amp-OFL.txt); 800u advance + 924/-287 metrics kept from the v2 trace so every use sits where it did */
  unicode-range: U+0026;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #d5d4d0;
  --lav: #c3c5d0;
  --ink: #45464e;
  --line: #2c2d33;
  --frame: #2a2b31;
  --hud-bg: rgba(214, 213, 209, 0.86);
  --mono: "Paper Mono", "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  --display: "Enge Etienne", "Bodoni 72 Oldstyle", "Didot", Georgia, serif;
  --ease-flash: cubic-bezier(0.19, 1, 0.22, 1);
  --hair: 1px;   /* set by main.js: the sheet's 3-unit hairline in whole CSS pixels */
  --side: clamp(24px, 10vw - 72px, 112px);   /* desktop margin each side of the sheet: 28px at 1000, 72px at 1440 */
  --gut: 24px;                               /* phone/tablet gutter */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, canvas { display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }
figure { margin: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 14px; background: var(--line); color: var(--paper);
  font: 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .2s var(--ease-flash);
}
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--line); outline-offset: 3px; }

::selection { background: #2c2d33; color: #d5d4d0; }

/* ------------------------------------------------------------------ */
/* Stage + poster                                                      */
/* ------------------------------------------------------------------ */
.stage {
  position: relative;
  width: min(100% - 2 * var(--side), 1600px);
  margin: 0 auto;
  container-type: inline-size;
}
.poster {
  --u: calc(100cqw / 2720);
  position: relative;
  height: calc(4554 * var(--u));
  /* static fallback when the shader is unavailable */
  background:
    radial-gradient(circle calc(2247 * var(--u)) at calc(1280 * var(--u)) calc(1855 * var(--u)),
      #bfc1cc 0, #c6c8d2 96%, rgba(198,200,210,0) 100%);
}
.has-gl .poster { background: none; }

#bg-tiles {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.stage { z-index: 1; }
html { scrollbar-gutter: stable; }
.nojs-fallback #loader { display: none !important; }
#bg-tiles canvas { position: absolute; left: 0; top: 0; }
#bg-live {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0;
  pointer-events: none; display: none;
}
.bg-live-on #bg-live { display: block; }
/* replay: baked tiles from the previous run must not cover the live intro canvas */
.bg-live-on #bg-tiles { visibility: hidden; }

.poster > * { position: absolute; z-index: 1; }

/* ---- top rules ---- */
.rule { background: var(--line); height: var(--hair); transform-origin: 0 50%; }
.rule-a { left: calc(388 * var(--u)); top: calc(57.5 * var(--u)); width: calc(1312 * var(--u)); }
.rule-b { left: calc(2294 * var(--u)); top: calc(58 * var(--u)); width: calc(426 * var(--u)); transform-origin: 100% 50%; }
.pin {
  left: calc(2290.5 * var(--u)); top: calc(50.5 * var(--u));
  width: calc(19 * var(--u)); height: calc(19 * var(--u));
  border-radius: 50%; background: var(--line);
}

/* ---- hero ---- */
.hero {
  left: calc(67 * var(--u)); top: calc(94 * var(--u));
  width: calc(2585 * var(--u)); height: calc(2287 * var(--u));
  border: var(--hair) solid var(--frame);
  background: #c9cad2;
  box-shadow:
    calc(5 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u)) rgba(32, 33, 46, .22),
    calc(14 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)) rgba(32, 33, 46, .10);
}
.hero-inner { position: absolute; inset: 0; overflow: hidden; }
.hero-img, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; }
.hero-gl { opacity: 0; }
.hero.gl-ready .hero-gl { opacity: 1; }
.hero.gl-ready .hero-img { visibility: hidden; }
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 18%;
  background: linear-gradient(180deg, rgba(214,216,232,0) 0%, rgba(214,216,232,.22) 70%, rgba(240,242,255,.75) 98%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translateY(-110%);
}
.hl { position: absolute; z-index: 3; background: var(--frame); pointer-events: none; }

.hit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: zoom-in;
}
.hit:focus-visible { outline: 3px solid #f2f2f4; outline-offset: -8px; }

/* ---- dividers ---- */
.divider { left: 0; width: 100%; height: calc(50 * var(--u)); pointer-events: none; }
.d1 { top: calc((2410 - 25) * var(--u)); }
.d2 { top: calc((2838 - 25) * var(--u)); }
.divider .seg { position: absolute; top: calc(25 * var(--u) - var(--hair) / 2); height: var(--hair); background: var(--line); }
.seg-l { left: calc(64 * var(--u)); width: calc(181 * var(--u)); transform-origin: 0 50%; }
.seg-m { left: calc(550 * var(--u)); width: calc(1308 * var(--u)); transform-origin: 50% 50%; }
.seg-r { left: calc(2166 * var(--u)); width: calc(179 * var(--u)); transform-origin: 100% 50%; }
.divider .tick { position: absolute; top: calc(3 * var(--u)); width: var(--hair); height: calc(47 * var(--u)); background: var(--line); }
.tick-l { left: calc(81.75 * var(--u)); }
.tick-r { left: calc(2325.75 * var(--u)); }

/* ---- text ---- */
.t1, .col, .lit {
  font-family: var(--mono);
  font-size: calc(35.9 * var(--u));
  line-height: calc(43 * var(--u));
  color: var(--ink);
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: 0;
  word-spacing: 0;
}
.t1 {
  position: absolute;
  left: calc(68 * var(--u)); top: calc(2451 * var(--u));
  width: 107ch;
  margin: 0;
}

.cols, .oratio { left: 0; top: 0; width: 100%; height: 0; }
.col {
  position: absolute;
  top: calc(2913 * var(--u));
  width: 34.4ch;
  text-align: center;
}
.c1 { left: calc(437.5 * var(--u) - 17.2ch); }
.c2 { left: calc(1335 * var(--u) - 17.2ch); }
.c3 { left: calc(2241 * var(--u) - 17.2ch); }
.col .l {
  --ux: 1;
  display: table;
  margin: 0 auto;
  position: relative;
  white-space: nowrap;
}
.col .l::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: calc(46 * var(--u));
  height: var(--hair);
  background: rgba(69, 70, 78, .5);
  transform: scaleX(var(--ux));
}

/* ---- glyph blocks ---- */
.glyphs {
  font-size: calc(19.5 * var(--u));
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.glyphs .gr {
  display: block;
  height: calc(18.67 * var(--u));
  line-height: calc(18.67 * var(--u));
}
.glyphs i {
  display: inline-block;
  width: calc(16.8 * var(--u));
  text-align: center;
  font-style: normal;
  vertical-align: baseline;
}
.glyphs .s { font-family: "Missal Glyph", "Noto Sans Symbols", "Segoe UI Symbol", sans-serif; }
.glyphs .a { font-family: "Missal Amp", Georgia, serif; font-style: normal; }
/* small ♐: the reference sets it ~16% smaller than the &, centred 1.1u left / 0.3u up (fitted per cell) */
.glyphs .gr .s { transform: translate(-.0564em, -.0154em) scale(.84); }
.g1 { left: calc(2363.5 * var(--u)); top: calc(2426 * var(--u)); width: calc(300 * var(--u)); text-align: center; }
.g1 .big { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; }
.g1 .big i { position: absolute; width: auto; line-height: 1; }
.big-s {
  font-family: "Missal Glyph", "Noto Sans Symbols", sans-serif;
  font-size: calc(106.35 * var(--u));
  left: calc((2415.9 - 2363.5) * var(--u));
  top: calc((2631.8 - 2426) * var(--u)); /* box bottom (translate below); ink fitted to the reference */
  transform: translateY(-100%);
}
.big-a {
  font-family: "Missal Amp", Georgia, serif;
  font-size: calc(125.5 * var(--u));
  left: calc((2517.37 - 2363.5) * var(--u));
  top: calc((2657.89 - 2426) * var(--u)); /* box bottom; glyph baseline/ink height baked into amp.woff2 to match the reference */
  transform-origin: 0 100%;
  transform: translateY(-100%);
}
.g2 { left: calc(2036 * var(--u)); top: calc(3767.3 * var(--u)); width: calc(600 * var(--u)); text-align: right; }
@media (min-width: 1000px) {
  /* reference: last two rows of the lower block sit 1.5u lower, the final row 4.1u further right */
  .g2 .gr:nth-child(6) { transform: translateY(calc(1.5 * var(--u))); }
  .g2 .gr:nth-child(7) { transform: translate(calc(4.1 * var(--u)), calc(1.5 * var(--u))); }
}

/* ---- crosses ---- */
.crosses { left: 0; top: 0; width: 100%; height: 0; pointer-events: none; }
.x { position: absolute; display: block; }
.x i { position: absolute; background: var(--line); }
.x-b { left: calc(1221.5 * var(--u)); top: calc(3658 * var(--u)); width: calc(226 * var(--u)); height: calc(227 * var(--u)); }
.x-b .xh { left: 0; right: 0; top: calc(107.5 * var(--u)); height: calc(12 * var(--u)); }
.x-b .xv { top: 0; bottom: 0; left: calc(107 * var(--u)); width: calc(12 * var(--u)); }
.x-s { width: calc(84 * var(--u)); height: calc(85 * var(--u)); top: calc(3729 * var(--u)); }
.x-l { left: calc(1075 * var(--u)); }
.x-r { left: calc(1512.5 * var(--u)); }
.x-s .xh { left: 0; right: 0; top: calc(42.5 * var(--u) - var(--hair) / 2); height: var(--hair); }
.x-s .xv { top: 0; bottom: 0; left: calc(42 * var(--u) - var(--hair) / 2); width: var(--hair); }

/* ---- thick rule ---- */
.thick { left: calc(67 * var(--u)); top: calc(3950 * var(--u)); width: calc(1850 * var(--u)); height: calc(18 * var(--u)); }
.thick-fill { position: absolute; inset: 0; background: var(--line); transform-origin: 0 50%; }

/* ---- litany ---- */
.litany { left: calc(68 * var(--u)); top: calc(4003 * var(--u)); width: calc(1849 * var(--u)); }
.lit { position: relative; }
.lit .ln { display: flex; justify-content: space-between; white-space: nowrap; height: calc(43 * var(--u)); }
.lit .w { display: inline-block; }

/* ---- detail ---- */
.detail {
  left: calc(1969 * var(--u)); top: calc(3943 * var(--u));
  width: calc(683 * var(--u)); height: calc(537 * var(--u));
  border: var(--hair) solid var(--frame);
  background: #cfcfd3;
}
.detail-inner { position: absolute; inset: 0; overflow: hidden; }
.detail-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ruler { position: absolute; left: calc(-3 * var(--u)); top: calc(-19 * var(--u)); width: calc(683 * var(--u)); height: calc(19 * var(--u)); }
.ruler i { position: absolute; top: 0; width: calc(14.5 * var(--u)); height: calc(19 * var(--u)); background: var(--line); }
.ruler i:nth-child(1) { left: calc((1990 - 1969) * var(--u)); }
.ruler i:nth-child(2) { left: calc((2114 - 1969) * var(--u)); }
.ruler i:nth-child(3) { left: calc((2238 - 1969) * var(--u)); }
.ruler i:nth-child(4) { left: calc((2363 - 1969) * var(--u)); }
.ruler i:nth-child(5) { left: calc((2487 - 1969) * var(--u)); }
.ruler i:nth-child(6) { left: calc((2611 - 1969) * var(--u)); }

/* ---- signature lines ---- */
.sig { top: calc(4476.5 * var(--u)); height: var(--hair); background: var(--line); transform-origin: 0 50%; }
.sig-1 { left: calc(610 * var(--u)); width: calc(157 * var(--u)); }
.sig-2 { left: calc(1468 * var(--u)); width: calc(156 * var(--u)); }

/* ------------------------------------------------------------------ */
/* Flow mode (narrow screens)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 999px) {
  .stage { width: 100%; }
  .poster {
    --u: calc((100cqw - 2 * var(--gut)) / 2585);
    --fs: min(16px, calc((100cqw - 2 * var(--gut)) / 21));
    height: auto;
    padding: 34px var(--gut) 64px;
    display: flex; flex-direction: column;
    background: none;
  }
  .poster > * { position: relative; left: auto; top: auto; }
  .rule-a, .rule-b { position: absolute; top: 18px; height: var(--hair); }
  .rule-a { left: 14%; width: 48%; }
  .rule-b { left: auto; right: 0; width: 16%; }
  .pin { position: absolute; width: 9px; height: 9px; top: 14.5px; left: auto; right: calc(16% - 4px); }

  .hero { order: 1; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 2585 / 2287; border-width: var(--hair); }

  .d1 { order: 2; margin-top: 10px; }
  .oratio { order: 3; }
  .g1 { order: 4; }
  .d2 { order: 5; }
  .cols { order: 6; }
  .crosses { order: 7; }
  .g2 { order: 8; }
  .thick { order: 9; }
  .litany { order: 10; }
  .detail { order: 11; }
  .sig { display: none; }

  .divider { height: 26px; width: 100%; }
  .divider .seg { top: calc(13px - var(--hair) / 2); height: var(--hair); }
  .seg-l { left: 0; width: 8%; }
  .seg-m { left: 19%; width: 51%; }
  .seg-r { left: auto; right: 0; width: 8%; }
  .divider .tick { top: 2px; width: var(--hair); height: 24px; }
  .tick-l { left: 1%; }
  .tick-r { left: auto; right: 1%; }

  .t1, .col, .lit { font-size: var(--fs); line-height: 1.2; }
  .t1 { position: static; width: auto; max-width: 107ch; font-size: min(15px, var(--fs)); margin-top: 8px; }

  .g1 { width: 100%; height: calc(22 * 18.67 * var(--u) * 2); margin: 18px 0 6px; font-size: calc(19.5 * var(--u) * 2); }
  .g1 .gr { height: calc(18.67 * var(--u) * 2); line-height: calc(18.67 * var(--u) * 2); }
  .g1 i { width: calc(16.8 * var(--u) * 2); }
  .g1 .big { left: 50%; top: 0; }
  .big-s { font-size: calc(106.35 * var(--u) * 2); left: calc((2415.9 - 2513.5) * var(--u) * 2); top: calc((2631.8 - 2426) * var(--u) * 2); }
  .big-a { font-size: calc(125.5 * var(--u) * 2); left: calc((2517.37 - 2513.5) * var(--u) * 2); top: calc((2657.89 - 2426) * var(--u) * 2); }

  .oratio { height: auto; width: auto; }
  .cols { height: auto; display: flex; flex-direction: column; gap: 34px; padding-top: 18px; }
  .col { position: relative; left: auto !important; top: auto; margin: 0 auto; width: 34.4ch; }
  .col .l::after { top: calc(1.2em + 1px); height: var(--hair); }
  .col .l { padding-bottom: 3px; }

  .crosses { height: 120px; margin-top: 18px; }
  .x-b { left: calc(50% - 50px); top: 10px; width: 100px; height: 100px; }
  .x-b .xh { top: 47px; height: 6px; }
  .x-b .xv { left: 47px; width: 6px; }
  .x-s { width: 38px; height: 38px; top: 41px; }
  .x-l { left: calc(50% - 110px); }
  .x-r { left: calc(50% + 72px); }
  .x-s .xh { top: calc(19px - var(--hair) / 2); height: var(--hair); }
  .x-s .xv { left: calc(19px - var(--hair) / 2); width: var(--hair); }

  .g2 { width: 100%; font-size: calc(19.5 * var(--u) * 1.5); margin: 8px 0 12px; overflow: hidden; }
  .g2 .gr { height: calc(18.67 * var(--u) * 1.5); line-height: calc(18.67 * var(--u) * 1.5); }
  .g2 i { width: calc(16.8 * var(--u) * 1.5); }

  .thick { width: 100%; height: 8px; margin: 6px 0 14px; }
  .litany { width: 100%; }
  .lit { font-size: max(11px, min(16px, calc((100cqw - 2 * var(--gut)) / 35))); }
  .lit .ln { height: auto; flex-wrap: wrap; column-gap: 1ch; }
  .detail { width: 100%; height: auto; aspect-ratio: 683 / 537; margin-top: 40px; border-width: var(--hair); }
  .ruler { left: -2px; top: -11px; width: calc(100% + 4px); height: 11px; }
  .ruler i { width: 2.1%; height: 11px; }
  .ruler i:nth-child(1) { left: 3%; }
  .ruler i:nth-child(2) { left: 21.2%; }
  .ruler i:nth-child(3) { left: 39.3%; }
  .ruler i:nth-child(4) { left: 57.6%; }
  .ruler i:nth-child(5) { left: 75.8%; }
  .ruler i:nth-child(6) { left: 94%; }
}

/* ------------------------------------------------------------------ */
/* Preloader                                                           */
/* ------------------------------------------------------------------ */
#loader { display: none; }
.js #loader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  font: 11px/1.2 var(--mono); letter-spacing: .14em; color: var(--line);
  text-transform: uppercase;
}
.ld-frame { position: relative; width: min(340px, 78vw); padding: 26px 26px 22px; }
.ld-reg { position: absolute; width: 14px; height: 14px; }
.ld-reg::before, .ld-reg::after { content: ""; position: absolute; background: var(--line); }
.ld-reg::before { left: 0; right: 0; top: calc(50% - var(--hair) / 2); height: var(--hair); }
.ld-reg::after { top: 0; bottom: 0; left: calc(50% - var(--hair) / 2); width: var(--hair); }
.ld-reg--tl { left: -7px; top: -7px; } .ld-reg--tr { right: -7px; top: -7px; }
.ld-reg--bl { left: -7px; bottom: -7px; } .ld-reg--br { right: -7px; bottom: -7px; }
.ld-top { display: flex; gap: 10px; align-items: baseline; margin-bottom: 18px; }
.ld-sep { opacity: .45; }
.ld-glyph { margin-left: auto; font-size: 14px; letter-spacing: .08em; } /* & ink spans -.023em..+.763em of its .8em advance (v2 trace: -.07..+.87); spacing kept so the label width is unchanged */
.ld-glyph { font-family: "Missal Glyph", "Missal Amp", serif; }
.ld-bar { position: relative; height: var(--hair); background: rgba(44,45,51,.18); }
.ld-fill { position: absolute; inset: 0; background: var(--line); transform-origin: 0 50%; transform: scaleX(0); }
.ld-head { position: absolute; top: -4px; width: var(--hair); height: 9px; background: var(--line); left: 0; }
.ld-row { display: flex; justify-content: space-between; margin-top: 12px; }
.ld-num { font-variant-numeric: tabular-nums; }
.ld-num b { font-weight: 400; font-size: 22px; letter-spacing: .02em; }
.ld-bytes { margin-top: 4px; opacity: .55; font-size: 10px; }
.ld-enter { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.ld-enter[hidden] { display: none; }
.ld-btn {
  position: relative; min-height: 44px; padding: 0 14px;
  background: transparent; border: var(--hair) solid var(--line); cursor: pointer;
  letter-spacing: .16em; font-size: 11px; text-transform: uppercase; text-align: center;
  overflow: hidden;
}
.ld-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--line);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-flash);
  z-index: -1;
}
.ld-btn { z-index: 0; }
.ld-btn:hover, .ld-btn:focus-visible { color: var(--paper); }
.ld-btn:hover::before, .ld-btn:focus-visible::before { transform: scaleX(1); }
.ld-btn--quiet { border-color: rgba(44,45,51,.35); }
.ld-btn-k { opacity: .5; }

/* ------------------------------------------------------------------ */
/* HUD                                                                 */
/* ------------------------------------------------------------------ */
#hud { display: none; }
.js #hud { display: block; }
#hud > * {
  position: fixed; z-index: 60;
  font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--line);
  background: var(--hud-bg);
  border: var(--hair) solid rgba(44,45,51,.55);
  padding: 6px 8px 5px;
  margin: 0;
  opacity: 0;
}
.hud-on #hud > * { opacity: 1; transition: opacity .3s; }
.hud-dim { opacity: .5; }
.hud-tl { left: 12px; top: 12px; }
.hud-tr { right: 12px; top: 12px; }
.hud-bl { left: 12px; bottom: 12px; font-variant-numeric: tabular-nums; }
.hud-tl .hud-dim { font-family: "Missal Glyph", "Missal Amp", var(--mono); letter-spacing: .08em; }
#hud .hud-snd {
  right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  min-height: 30px; cursor: pointer;
}
.snd-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 2px; background: var(--line); transition: height .15s; }
.snd-on .snd-bars i { animation: eq .9s steps(6) infinite; }
.snd-on .snd-bars i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.snd-on .snd-bars i:nth-child(3) { animation-delay: -.5s; animation-duration: 1.1s; }
.snd-on .snd-bars i:nth-child(4) { animation-delay: -.2s; animation-duration: .8s; }
.snd-on .snd-bars i:nth-child(5) { animation-delay: -.6s; animation-duration: 1s; }
@keyframes eq { 0% { height: 2px; } 30% { height: 11px; } 60% { height: 5px; } 100% { height: 2px; } }
.snd-label b { font-weight: 400; }
#hud .hud-rail {
  right: 12px; top: 50%; width: 9px; height: 120px; margin-top: -60px; padding: 0;
  background: transparent; border: 0; border-right: var(--hair) solid rgba(44,45,51,.55);
}
.hud-rail::before, .hud-rail::after { content: ""; position: absolute; right: 0; width: 7px; height: var(--hair); background: rgba(44,45,51,.55); }
.hud-rail::before { top: 0; } .hud-rail::after { bottom: 0; }
.hud-rail-tick { position: absolute; right: 0; top: 0; width: 9px; height: 3px; background: var(--line); }

@media (max-width: 999px) {
  .hud-tl, .hud-bl, #hud .hud-rail { display: none; }
  #hud .hud-snd { right: 10px; bottom: 10px; }
  .hud-tr { right: 10px; top: 10px; }
}

/* ------------------------------------------------------------------ */
/* Cursor                                                              */
/* ------------------------------------------------------------------ */
#cursor { display: none; }
@media (pointer: fine) {
  .cursor-on, .cursor-on * { cursor: none !important; }
  .cursor-on #cursor { display: block; }
}
/* v10: contrast cursor, no outline. .cur-a's backdrop filter turns whatever is beneath it into pure black (light
   ground) or pure white (dark ground) and its clipPath (#cur-ca: ring, cross, dot) cuts the marks out of that,
   pixel by pixel. The label chip (.cur-c, #cur-cc) thresholds a heavily blurred backdrop instead, so it comes
   out as one solid black or white block even over waveform dots or type; .cur-b then inverts the chip inside
   the label's glyphs (#cur-cb). main.js sets the geometry and moves #cursor with the pointer, 1:1. It sits above
   everything (dev panel included). Without backdrop-filter the same clips fall back to a white difference blend. */
#cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 1000; pointer-events: none; transform: translate3d(-200px, -200px, 0); }
#cursor .cur-a, #cursor .cur-b, #cursor .cur-c { position: absolute; left: -48px; top: -48px; width: 320px; height: 160px; display: block; pointer-events: none; }
#cursor .cur-a {
  clip-path: url(#cur-ca);
  -webkit-backdrop-filter: blur(.5px) grayscale(1) invert(1) contrast(400);
  backdrop-filter: blur(.5px) grayscale(1) invert(1) contrast(400);
}
#cursor .cur-c {
  clip-path: url(#cur-cc);
  -webkit-backdrop-filter: blur(12px) grayscale(1) invert(1) contrast(400);
  backdrop-filter: blur(12px) grayscale(1) invert(1) contrast(400);
}
#cursor .cur-b { clip-path: url(#cur-cb); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
#cursor .cur-defs { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }
#cursor .cur-text { font-family: var(--mono); font-size: 9px; font-kerning: none; font-variant-ligatures: none; }
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  #cursor .cur-a, #cursor .cur-b, #cursor .cur-c { background: #fff; mix-blend-mode: difference; }
}

/* ------------------------------------------------------------------ */
/* Viewer                                                              */
/* ------------------------------------------------------------------ */
#viewer { position: fixed; inset: 0; z-index: 140; background: rgba(28, 29, 35, 0); }
#viewer[hidden] { display: none; }
.vw-box { position: absolute; overflow: hidden; border: var(--hair) solid #d5d4d0; }
.vw-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.vw-stage img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; transform-origin: 0 0; will-change: transform; }
.vw-reg { position: absolute; width: 18px; height: 18px; }
.vw-reg::before, .vw-reg::after { content: ""; position: absolute; background: #d5d4d0; }
.vw-reg::before { left: 0; right: 0; top: calc(50% - var(--hair) / 2); height: var(--hair); }
.vw-reg::after { top: 0; bottom: 0; left: calc(50% - var(--hair) / 2); width: var(--hair); }
.vw-reg--tl { left: 3px; top: 3px; } .vw-reg--tr { right: 3px; top: 3px; }
.vw-reg--bl { left: 3px; bottom: 3px; } .vw-reg--br { right: 3px; bottom: 3px; }
.vw-ui > * { position: fixed; z-index: 2; font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d5d4d0; }
.vw-read { left: 14px; top: 14px; font-variant-numeric: tabular-nums; background: rgba(28,29,35,.7); padding: 6px 8px 5px; }
.vw-close, .vw-zoombtn { top: 10px; min-height: 36px; padding: 0 12px; background: rgba(28,29,35,.7); border: var(--hair) solid rgba(213,212,208,.6); cursor: pointer; }
.vw-close { right: 12px; }
.vw-zoombtn { right: 128px; }
.vw-close:hover, .vw-zoombtn:hover { background: #d5d4d0; color: #1c1d23; }
@media (max-width: 640px) { .vw-read { max-width: calc(100vw - 230px); overflow: hidden; white-space: nowrap; } }
.vw-map { right: 14px; bottom: 14px; width: 140px; border: var(--hair) solid rgba(213,212,208,.6); background: #1c1d23; }
.vw-map img { width: 100%; height: auto; opacity: .7; }
#vw-map-rect { position: absolute; left: 0; top: 0; border: var(--hair) solid #f4f4f6; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.vw-map { overflow: hidden; }
.vw-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }

/* ---- shared transport ---- */
.tp { color: var(--line); }
.tp p { margin: 0; }
.tp-btns { display: flex; align-items: center; gap: 2px; }
.tp-b {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  background: transparent; border: var(--hair) solid transparent; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.tp-b svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.tp-b:hover { border-color: rgba(44, 45, 51, .55); }
.tp-b:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
.tp-play { border-color: var(--line); }
.tp-play:hover { background: var(--line); color: var(--paper); }
.tp .i-pause { display: none; }
.tp.is-playing .i-pause { display: block; }
.tp.is-playing .i-play { display: none; }
.tp-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.tp-k { opacity: .5; }
.tp-k:empty { display: none; }
.tp-n { opacity: .55; font-variant-numeric: tabular-nums; }
.tp-t { overflow: hidden; min-width: 0; }
.tp-tt { display: inline-block; }
.tp-wave { position: relative; height: 24px; min-width: 60px; cursor: pointer; touch-action: none; }
.tp-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tp-wave:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.tp-ghost { position: absolute; top: -3px; bottom: -3px; left: 0; width: var(--hair); background: currentColor; opacity: 0; pointer-events: none; }
.tp-tip {
  position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateX(-50%);
  padding: 3px 4px 2px; background: var(--line); color: var(--paper); font-size: 9px; letter-spacing: .1em;
  opacity: 0; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tp-wave.is-hover .tp-ghost { opacity: .45; }
.tp-wave.is-hover .tp-tip { opacity: 1; }
.tp-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-sl { opacity: .45; }
.tp.is-buf .tp-cur { animation: tp-blink .5s steps(2) infinite; }
@keyframes tp-blink { 50% { opacity: .2; } }

/* ------------------------------------------------------------------ */
/* Mini player [new]                                                   */
/* ------------------------------------------------------------------ */
.pl {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 12px; margin: 0 auto;
  width: min(700px, calc(100vw - 400px));
  font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line);
  background: rgba(213, 212, 208, .95); border: var(--hair) solid rgba(44, 45, 51, .55);
  transform-origin: 50% 50%;
}
.pl[hidden] { display: none; }
.intro-run .pl, .vw-open .pl { visibility: hidden; }
.pl-reg { position: absolute; width: 9px; height: 9px; pointer-events: none; }
.pl-reg::before, .pl-reg::after { content: ""; position: absolute; background: var(--line); }
.pl-reg::before { left: 0; right: 0; top: calc(4.5px - var(--hair) / 2); height: var(--hair); }
.pl-reg::after { top: 0; bottom: 0; left: calc(4.5px - var(--hair) / 2); width: var(--hair); }
.pl-reg--tl { left: -5px; top: -5px; } .pl-reg--tr { right: -5px; top: -5px; }
.pl-reg--bl { left: -5px; bottom: -5px; } .pl-reg--br { right: -5px; bottom: -5px; }
.pl-in { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 5px 0 4px; }
.pl-in .tp-meta { flex: 0 1 190px; }
.pl-in .tp-wave { flex: 1 1 auto; }
.pl-in .tp-time { flex: 0 0 auto; }
.tp-list { width: auto; padding: 0 9px; gap: 7px; grid-auto-flow: column; border-left-color: rgba(44, 45, 51, .3); }
.tp-list-ic { display: grid; gap: 2px; }
.tp-list-ic i { display: block; width: 9px; height: var(--hair); background: currentColor; }
@media (max-width: 999px) {
  .pl { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .pl-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: 44px 26px; column-gap: 10px; height: auto; padding: 0 4px 8px; }
  .pl-in .tp-wave { grid-column: 1 / -1; grid-row: 2; height: 24px; margin: 0 6px; }
  .pl-in .tp-b { width: 38px; height: 38px; }
  .pl-in .tp-list { width: auto; padding: 0 8px; }
  .pl-on #hud .hud-snd { bottom: calc(8px + 80px + 10px); }
  .pl-on .hud-snd { transition: bottom .35s var(--ease-flash); }
}
@media (max-width: 420px) {
  .pl-in .tp-time .tp-sl, .pl-in .tp-time .tp-dur { display: none; }
}

/* ------------------------------------------------------------------ */
/* Dev panel [new]                                                     */
/* ------------------------------------------------------------------ */
.dev {
  position: fixed; z-index: 190; top: 52px; left: 52px; width: 352px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 72px); display: flex; flex-direction: column;
  background: rgba(214, 213, 209, .97); color: var(--line); border: 1px solid var(--line);
  box-shadow: 10px 12px 0 rgba(44, 45, 51, .2);
  font: 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.dev[hidden] { display: none; }
.dev * { cursor: auto; }
.dev-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 3px 0 10px; background: var(--line); color: var(--paper); cursor: move; user-select: none; touch-action: none; }
.dev-bar * { cursor: inherit; }
.dev-bar b { font-weight: 400; flex: 1; }
.dev-bar .dev-x { cursor: pointer; width: 26px; height: 24px; padding: 0; border: 1px solid rgba(213, 212, 208, .5); background: transparent; color: inherit; font: inherit; }
.dev-bar .dev-x:hover { background: var(--paper); color: var(--line); }
.dev-body { overflow-y: auto; padding: 2px 10px 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.dev-sec { border-top: 1px solid rgba(44, 45, 51, .28); padding: 10px 0 8px; }
.dev-sec:first-child { border-top: 0; }
.dev-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 7px; }
.dev-h > span { opacity: .58; }
.dev-h .dev-btn { min-height: 18px; padding: 0 6px; }
.dev-opts { display: grid; gap: 2px; }
.dev-opt { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; padding: 6px 6px 6px 4px; border: 1px solid transparent; cursor: pointer; }
.dev-opt * { cursor: pointer; }
.dev-opt:hover { border-color: rgba(44, 45, 51, .38); }
.dev-opt input, .dev-chk input { appearance: none; -webkit-appearance: none; width: 11px; height: 11px; margin: 1px 0 0; border: 1px solid var(--line); background: transparent; border-radius: 0; }
.dev-opt input:checked { background: var(--line); box-shadow: inset 0 0 0 2px var(--paper); }
.dev-opt input:focus-visible, .dev-chk input:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
.dev-opt b { display: block; font-weight: 400; }
.dev-opt small { display: block; margin-top: 3px; font-size: 9px; line-height: 1.35; letter-spacing: .04em; text-transform: none; opacity: .62; }
.dev-opt.is-on { background: rgba(44, 45, 51, .06); }
.dev-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 7px 0 2px; }
.dev-row > span { opacity: .58; margin-right: 4px; }
.dev-btn { min-height: 24px; padding: 0 8px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.dev-btn:hover, .dev-btn[aria-pressed="true"] { background: var(--line); color: var(--paper); }
.dev-btn:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
.dev-btn.is-hit { background: var(--line); color: var(--paper); }
.dev-range { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; margin: 5px 0; }
.dev-range output { text-align: right; font-variant-numeric: tabular-nums; }
.dev-r { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.dev-r::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.dev-r::-moz-range-track { height: 1px; background: var(--line); }
.dev-r::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 14px; margin-top: -7px; background: var(--line); border: 0; border-radius: 0; }
.dev-r::-moz-range-thumb { width: 7px; height: 14px; background: var(--line); border: 0; border-radius: 0; }
.dev-r:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
.dev-chk { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.dev-chk * { cursor: pointer; }
.dev-chk input:checked { background: var(--line); box-shadow: inset 0 0 0 2px var(--paper); }
.dev-grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.dev-now { margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.dev-foot { margin: 8px 0 0; font-size: 9px; letter-spacing: .04em; text-transform: none; opacity: .6; line-height: 1.45; }
.dev kbd { font: inherit; padding: 0 3px; border: 1px solid rgba(44, 45, 51, .5); }
@media (max-width: 999px) {
  .dev { left: 12px; right: 12px; top: 48px; width: auto; max-height: calc(100vh - 140px); }
}
/* Hi-ReS! Stats nod */
.dev-fps { position: fixed; z-index: 191; right: 12px; top: 44px; width: 84px; padding: 3px 4px 4px; background: #000033; font: 9px/1.25 var(--mono); letter-spacing: .04em; pointer-events: none; }
.dev-fps[hidden] { display: none; }
.dev-fps p { margin: 0; white-space: nowrap; }
.dev-fps .f { color: #ffff00; } .dev-fps .m { color: #00ff00; } .dev-fps .e { color: #00ffff; }
.dev-fps canvas { display: block; width: 76px; height: 30px; margin-top: 2px; image-rendering: pixelated; }
.dev-gridlay {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(214, 30, 96, .34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214, 30, 96, .34) 1px, transparent 1px),
    linear-gradient(to right, rgba(214, 30, 96, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214, 30, 96, .12) 1px, transparent 1px);
  background-size: calc(500 * var(--u)) calc(500 * var(--u)), calc(500 * var(--u)) calc(500 * var(--u)), calc(100 * var(--u)) calc(100 * var(--u)), calc(100 * var(--u)) calc(100 * var(--u));
}
.dev-nohud #hud > * { display: none !important; }
.dev-nocursor #cursor { display: none !important; }
.dev-nocursor.cursor-on, .dev-nocursor.cursor-on * { cursor: auto !important; }
.dev-nocursor.cursor-on button, .dev-nocursor.cursor-on .hit { cursor: pointer !important; }

/* ------------------------------------------------------------------ */
/* Intro states                                                        */
/* ------------------------------------------------------------------ */
.intro-lock { overflow: hidden; }
.pre .poster > *:not(#bg-tiles) { visibility: hidden; }

/* reduced motion: everything visible, no loader */
@media (prefers-reduced-motion: reduce) {
  .js #loader { display: none; }
  .pre .poster > *:not(#bg-tiles) { visibility: visible; }
  .snd-on .snd-bars i { animation: none; height: 6px; }
  .tp.is-buf .tp-cur { animation: none; }
}