/* Schematic: the whole site is one blueprint sheet.
   A redstone meter runs down the left margin, sheets stack down the page,
   and every drawing sits on a 16px grid with heavier chunk lines every 256px. */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Blueprint (dark) is the default sheet for everyone. Whiteprint (light) is only used when
   a visitor flips the lever in the footer or types /theme. */
:root {
  --paper: #0b1d33;
  --paper-2: #0f2541;
  --paper-3: #143052;
  --ink: #e8f1ff;
  --ink-2: #9db5d1;
  --ink-3: #5f7d9f;
  --ink-4: #27446a;
  --grid: rgba(190, 218, 255, 0.05);
  --grid-major: rgba(190, 218, 255, 0.1);
  --grid-hot: rgba(190, 218, 255, 0.17);
  --grid-hot-major: rgba(190, 218, 255, 0.3);
  --grid-cell: rgba(232, 241, 255, 0.5);
  --grid-trail: rgba(190, 218, 255, 0.07);
  --red: #ff3b2f;
  --red-dim: #a3261d;
  --red-off: #3d1c22;
  --red-glow: rgba(255, 59, 47, 0.55);
  --on-red: #0b1d33;
  --lamp: #ffc56b;
  --lamp-off: #23303f;
  --lamp-glow: rgba(255, 197, 107, 0.5);
  --ok: #67d796;
  --we: #ff6bff;
  --veil: rgba(11, 29, 51, 0.82);
  --shade: rgba(0, 0, 0, 0.28);

  /* In-game overlays (tooltips, chat, F3, hotbar) carry their own dark ground in both themes. */
  --mc-bg: rgba(16, 0, 16, 0.94);
  --mc-edge: #2a0b65;
  --mc-white: #ffffff;
  --mc-gray: #aaaaaa;
  --mc-gold: #ffaa00;
  --mc-green: #55ff55;
  --mc-aqua: #55ffff;
  --mc-red: #ff5555;
  --mc-yellow: #ffff55;
  --mc-purple: #ff55ff;
  --mc-chat: rgba(4, 8, 14, 0.78);
  --elixir: #d65de4;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-pixel: "Pixelify Sans", "Geist Mono", ui-monospace, monospace;

  --max: 1240px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --header-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --paper: #f3f6fa;
  --paper-2: #ffffff;
  --paper-3: #e6edf5;
  --ink: #0e2646;
  --ink-2: #47617f;
  --ink-3: #8399b3;
  --ink-4: #cdd8e5;
  --grid: rgba(14, 38, 70, 0.05);
  --grid-major: rgba(14, 38, 70, 0.1);
  --grid-hot: rgba(14, 38, 70, 0.14);
  --grid-hot-major: rgba(14, 38, 70, 0.26);
  --grid-cell: rgba(14, 38, 70, 0.45);
  --grid-trail: rgba(14, 38, 70, 0.05);
  --red: #d4291e;
  --red-dim: #9e1f16;
  --red-off: #efd2ce;
  --red-glow: rgba(212, 41, 30, 0.3);
  --on-red: #ffffff;
  --lamp: #d98608;
  --lamp-off: #e2e6ec;
  --lamp-glow: rgba(217, 134, 8, 0.35);
  --ok: #1d9150;
  --we: #b0139f;
  --veil: rgba(243, 246, 250, 0.86);
  --shade: rgba(14, 38, 70, 0.12);
  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 256px 256px, 256px 256px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  color: var(--ink);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
::selection { background: var(--red); color: var(--on-red); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 300;
  padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--ink-3);
  font: 500 12px/1 var(--font-mono); text-decoration: none;
}
.skip:focus { top: 12px; }

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

.eyebrow, .label {
  font: 500 11.5px/1.45 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.display {
  font-weight: 640;
  font-size: clamp(44px, 6.4vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.display .pw {
  color: inherit;
  transition: color 0.1s steps(1), text-shadow 0.1s steps(1);
}
.is-powered .display .pw { color: var(--red); text-shadow: 0 0 28px var(--red-glow); }
.h2 {
  font-weight: 620;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h3 {
  font-weight: 620;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.prose { display: grid; gap: 1.1em; }
.prose p { max-width: 36em; text-wrap: pretty; }
.mono { font-family: var(--font-mono); }
.pixel { font-family: var(--font-pixel); }
.muted { color: var(--ink-2); }
.line { display: block; }
html.js [data-lines] { visibility: hidden; animation: show-late 0s 2.5s forwards; }
html.no-reveal [data-lines] { visibility: visible; animation: none; }
@keyframes show-late { to { visibility: visible; } }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  font: 600 12.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 2px;
  transition: transform 0.1s steps(2), box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
}
.btn-power {
  background: var(--red); color: var(--on-red);
  box-shadow: inset 0 -3px 0 var(--red-dim);
}
.btn-power:hover { box-shadow: inset 0 -3px 0 var(--red-dim), 0 0 28px var(--red-glow); }
.btn-power:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--red-dim), 0 0 18px var(--red-glow); }
.btn-line { border-color: var(--ink-3); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); background: var(--grid-major); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--ink-3);
  transition: border-color 0.2s;
}
.link:hover { border-color: var(--red); }
.link.is-quiet { color: var(--ink-2); border-bottom-style: dashed; }
.links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* Minecraft's block selection: a thin outline snaps around whatever the cursor targets. */
.selectable { outline: 1.5px solid transparent; outline-offset: 12px; transition: outline-offset 0.18s var(--ease), outline-color 0.18s; }
.selectable:hover, .selectable:focus-visible { outline-color: var(--ink); outline-offset: 5px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.chip {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 9px; border: 1px solid var(--ink-4); color: var(--ink-2);
}

.kbd {
  display: inline-block; font: 500 10.5px/1 var(--font-mono);
  border: 1px solid var(--ink-3); border-bottom-width: 2px; padding: 3px 5px; color: var(--ink-2);
}

.copy {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1 var(--font-mono); letter-spacing: 0.02em;
  padding: 11px 12px; border: 1px solid var(--ink-3); background: var(--paper);
  color: var(--ink); cursor: pointer; border-radius: 2px;
}
.copy:hover { border-color: var(--ink); }
.copy .copy-state { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.copy[data-done] .copy-state { color: var(--ok); }

/* ---------- Icons: blueprint outline at rest, the fill pastes in from the bottom on hover ---------- */

.ico { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.ico svg { width: 100%; height: 100%; overflow: visible; }
.ico .o { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.ico .f { fill: currentColor; fill-opacity: 0.22; stroke: none; clip-path: inset(100% 0 0 0); transition: clip-path 0.2s steps(4); }
.ico .r { stroke: currentColor; transition: stroke 0.1s steps(1), fill 0.1s steps(1); }
.ico .rf { fill: currentColor; stroke: none; transition: fill 0.1s steps(1); }
.ico .m { transform-box: fill-box; transform-origin: center; transition: transform 0.1s steps(2); }
.hov:hover .ico .f, .ico.is-on .f, .ico:hover .f { clip-path: inset(0 0 0 0); }
.hov:hover .ico .r, .ico.is-on .r, .ico:hover .r { stroke: var(--red); }
.hov:hover .ico .rf, .ico.is-on .rf, .ico:hover .rf { fill: var(--red); }
.hov:hover .ico-piston .m, .ico-piston:hover .m { transform: translateY(-3px); }
.hov:hover .ico-lever .m, .ico-lever:hover .m, .ico-lever.is-on .m { transform: rotate(56deg); }
.ico-lever .m { transform-box: view-box; transform-origin: 12px 16px; }
.hov:hover .ico-repeater .m, .ico-repeater:hover .m { transform: translateX(3px); }
.hov:hover .ico-hopper .m, .ico-hopper:hover .m { transform: translateY(7px); }
.hov:hover .ico-minecart .m, .ico-minecart:hover .m { transform: translateX(3px); }
.hov:hover .ico-note .m, .ico-note:hover .m { transform: translateY(-4px); }
.hov:hover .ico-emerald .m, .ico-emerald:hover .m { transform: scaleX(-1); }
.hov:hover .ico-compass .m, .ico-compass:hover .m { transform: rotate(40deg); }
.ico-compass .m { transform-origin: 50% 50%; }
.hov:hover .ico-pearl .m, .ico-pearl:hover .m { transform: translate(3px, -3px); }
.hov:hover .ico-chest .m, .ico-chest:hover .m { transform: rotate(-12deg); }
.hov:hover .ico-command .m, .ico-command:hover .m { transform: translateX(2px); }
.hov:hover .ico-book .m, .ico-book:hover .m { transform: scaleX(-1); }
.hov:hover .ico-axe .m, .ico-axe:hover .m { stroke-dashoffset: 0; }
.ico-axe .m { stroke-dasharray: 2 2; stroke-dashoffset: 40; transition: stroke-dashoffset 0.25s steps(5); }
.hov:hover .ico-barrier .rf, .ico-barrier:hover .rf { animation: blink 0.4s steps(1) 2; }
@keyframes blink { 50% { fill: transparent; } }

/* ---------- Lamps ---------- */

.lamp {
  position: relative; display: inline-block; width: 14px; height: 14px; flex: none;
  background: var(--lamp-off);
  box-shadow: inset 0 0 0 2px var(--shade);
}
.lamp::after { content: ""; position: absolute; inset: 4px; background: var(--grid-major); }
.lamp.is-on, [data-sheet].is-on .sheet-head .lamp {
  background: var(--lamp);
  box-shadow: inset 0 0 0 2px var(--shade), 0 0 14px var(--lamp-glow), 0 0 2px var(--lamp);
}
.lamp.is-on::after, [data-sheet].is-on .sheet-head .lamp::after { background: rgba(255, 255, 255, 0.25); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--veil);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--ink-4);
}
.site-header .bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: height 0.3s var(--ease);
}
.is-compact .site-header .bar { height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark .mk-frame { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.brand-mark .mk-px rect { fill: none; stroke: var(--ink); stroke-width: 1; }
.brand-text { display: grid; gap: 3px; }
.brand-name { font-weight: 640; font-size: 17px; line-height: 1; letter-spacing: -0.02em; }
.brand-handle { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); padding: 12px 12px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--red); box-shadow: 0 0 10px var(--red-glow);
}
.nav .lamp { width: 10px; height: 10px; }
.nav .lamp::after { inset: 3px; }
.menu-btn {
  display: none; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--ink-4); padding: 8px 10px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.menu-btn[aria-expanded="true"] .ico-lever .m { transform: rotate(56deg); }
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--red); box-shadow: 0 0 8px var(--red-glow);
}

@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--paper); border-bottom: 1px solid var(--ink-4);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform 0.1s steps(2), opacity 0.1s steps(2), visibility 0s 0.1s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 0.1s steps(2), opacity 0.1s steps(2); }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--ink-4); font-size: 14px; }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 24px; bottom: -1px; }
}

/* ---------- Sheet chrome: meter, sheet tag, coordinates ---------- */

.meter {
  position: fixed; left: 22px; z-index: 40;
  top: calc(var(--header-h) + 48px); bottom: 56px; width: 14px;
  display: none;
}
@media (min-width: 1200px) { .meter { display: block; } }
.meter-track { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--red-off); }
.meter-seg {
  position: absolute; left: 6px; width: 2px; height: 0;
  background: linear-gradient(var(--red), var(--red-dim));
  box-shadow: 0 0 8px var(--red-glow);
}
.meter-node {
  position: absolute; left: 0; width: 14px; height: 14px; margin-top: -7px; padding: 0;
  background: var(--paper-2); border: 1px solid var(--ink-3); cursor: pointer;
}
.meter-node::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; background: var(--red-off); }
.meter-node.is-on { border-color: var(--red); }
.meter-node.is-on::after { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }

.sheet-tag {
  display: none; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px;
  padding: 6px 9px; border: 1px solid var(--ink-4);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; pointer-events: none;
}
.sheet-tag b { color: var(--ink); font-weight: 500; }
@media (min-width: 1100px) { .sheet-tag:not(:empty) { display: inline-flex; } }

.coords {
  position: fixed; z-index: 40; right: 22px; bottom: 16px;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-3);
  pointer-events: none; display: none; font-variant-numeric: tabular-nums;
}
@media (min-width: 1200px) { .coords { display: block; } }

/* ---------- Cursor light ---------- */
/* Around the pointer the sheet's grid brightens, and the 16px cell under it gets the thin
   outline Minecraft draws around a targeted block. Cells it leaves fade out over four ticks.
   All of it sits under the page's content. */
.grid-glow {
  position: fixed; left: 0; top: 0; z-index: -1; width: 480px; height: 480px; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-hot-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-hot-major) 1px, transparent 1px),
    linear-gradient(var(--grid-hot) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-hot) 1px, transparent 1px);
  background-size: 256px 256px, 256px 256px, 16px 16px, 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.35) 55%, transparent);
  mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.35) 55%, transparent);
  opacity: 0; transition: opacity 0.4s; will-change: transform;
}
.grid-cell, .grid-trail { position: fixed; left: 0; top: 0; z-index: -1; width: 17px; height: 17px; pointer-events: none; opacity: 0; }
.grid-cell { border: 1px solid var(--grid-cell); transition: opacity 0.4s; }
.grid-trail { background: var(--grid-trail); }
.grid-trail.is-on { animation: trail 0.2s steps(4) forwards; }
@keyframes trail { from { opacity: 1; } to { opacity: 0; } }
html.cursor-in .grid-glow, html.cursor-in .grid-cell { opacity: 1; }

/* ---------- Sheets ---------- */

.sheet { position: relative; padding-block: clamp(80px, 13vh, 150px); }
.sheet-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.sheet-no { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.sheet-head .rule { flex: 1; height: 1px; background: var(--ink-4); min-width: 24px; }

.frame {
  position: relative;
  border: 1px solid var(--ink-4);
  background: var(--paper-2);
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
}
/* Crop marks at the four corners of a drawing frame. */
.marks::before {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) left top / 12px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left top / 1px 12px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right top / 12px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right top / 1px 12px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right bottom / 1px 12px no-repeat;
}
.figcap {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-4);
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.canvas-box { position: relative; width: 100%; }
.canvas-box > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* In-game chat strip: always the dark chat ground, in either theme. */
.mc-chat {
  display: grid; gap: 2px;
  font: 400 16px/1.3 var(--font-pixel); color: var(--mc-white);
}
.mc-chat p {
  background: var(--mc-chat); padding: 3px 8px; width: fit-content; max-width: 100%;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); overflow-wrap: anywhere;
}
.mc-chat .c-gray { color: var(--mc-gray); }
.mc-chat .c-gold { color: var(--mc-gold); }
.mc-chat .c-green { color: var(--mc-green); }
.mc-chat .c-aqua { color: var(--mc-aqua); }
.mc-chat .c-red { color: var(--mc-red); }
.mc-chat .c-purple { color: var(--mc-purple); }
.mc-chat .c-yellow { color: var(--mc-yellow); }
.mc-chat p[hidden] { display: none; }

/* Obfuscated text, like Minecraft's §k: monospaced so the jumble never changes width. */
.obf { white-space: nowrap; }
.obf-txt { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-variant-ligatures: none; }
.project-title .obf-txt, .card-title .obf-txt { font-size: 0.86em; color: var(--ink-2); }
.project-pitch .obf-txt, .card-text .obf-txt { color: var(--ink-3); }
.boot .obf-txt { color: inherit; }

/* ---------- Sheet 01: hero ---------- */

.hero {
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(40px, 7vh, 88px));
  padding-bottom: clamp(48px, 8vh, 88px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.hero-copy { display: grid; gap: 28px; min-width: 0; }
.hero-fig { position: relative; margin: 0; min-width: 0; }
.hero-fig .canvas-box { aspect-ratio: 1 / 1; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lever-cue {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(28px, 5vh, 56px);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.lever-cue .ico { width: 32px; height: 32px; color: var(--ink); }
.is-powered .lever-cue .ico .m { transform: rotate(56deg); }
.is-powered .lever-cue .ico .r { stroke: var(--red); }
.is-powered .lever-cue .ico .rf { fill: var(--red); }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-fig { width: 100%; max-width: 460px; justify-self: center; }
}

/* ---------- Sheet 02: spec sheet ---------- */

.spec-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.spec-copy { display: grid; gap: 28px; min-width: 0; }
.spec-copy .prose p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }
.player-fig { margin: 0; padding: clamp(16px, 2.5vw, 28px); min-width: 0; }
.player-box { position: relative; aspect-ratio: 3 / 4; }
.player-box svg, .player-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.player-box img { inset: auto; left: 30%; top: 11.5%; width: 40%; height: 61.5%; image-rendering: pixelated; filter: grayscale(1) sepia(1) hue-rotate(175deg) saturate(2.2) brightness(0.95) opacity(0.85); transition: filter 1.2s var(--ease); }
.player-box.has-skin .pl, .player-box.has-skin .pl-face { display: none; }
.player-box img.is-developed { filter: none; }
.player-box img[hidden] { display: none; }
.player-svg .pl { fill: none; stroke: var(--ink); stroke-width: 0.35; }
.player-svg .pl-face { fill: var(--ink-3); }
.player-svg .dim { stroke: var(--ink-3); stroke-width: 0.25; fill: none; }
.player-svg .hit { fill: none; stroke: var(--red); stroke-width: 0.3; stroke-dasharray: 1 0.8; }
.player-svg text { fill: var(--ink-2); font: 500 1.7px var(--font-mono); letter-spacing: 0.12em; }

.counters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: clamp(48px, 7vw, 88px);
  border: 1px solid var(--ink-4); background: var(--paper-2);
}
.counter { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(16px, 2.2vw, 28px); min-width: 0; }
.counter + .counter { border-left: 1px solid var(--ink-4); }
.counter-label { font: 500 11px/1.35 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.counter .rep { position: absolute; left: -11px; top: 50%; width: 22px; height: 12px; margin-top: -6px; z-index: 1; }
.rep rect { fill: var(--paper-2); stroke: var(--ink-3); stroke-width: 1; }
.rep .t { fill: var(--red-off); transition: fill 0.1s steps(1); }
.rep.is-on .t { fill: var(--red); }
.lampnum { display: flex; gap: 6px; --cell: clamp(7px, 0.85vw, 10px); }
.digit { display: grid; grid-template-columns: repeat(3, var(--cell)); grid-auto-rows: var(--cell); gap: 2px; }
.digit i { background: var(--lamp-off); box-shadow: inset 0 0 0 1px var(--shade); }
.digit i.on { background: var(--lamp); box-shadow: 0 0 9px var(--lamp-glow); }

@media (max-width: 900px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .player-fig { max-width: 360px; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter:nth-child(3) { border-left: 0; }
  .counter:nth-child(n + 3) { border-top: 1px solid var(--ink-4); }
  .counter .rep { display: none; }
}

/* ---------- Sheet 03: service record ---------- */

.record-intro { display: grid; gap: 16px; max-width: 40em; }
.record-stage { position: relative; }
.record-body { position: relative; margin-top: clamp(32px, 5vw, 56px); }
.record-track { display: grid; gap: 20px; padding-left: 36px; position: relative; }
.record-track::before {
  content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 8px;
  border-left: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3);
  background: repeating-linear-gradient(transparent 0 10px, var(--ink-4) 10px 13px);
}
.station { position: relative; }
.station::before {
  content: ""; position: absolute; left: -32px; top: 22px; width: 16px; height: 6px;
  background: var(--ink-4); transition: background-color 0.1s steps(1), box-shadow 0.1s steps(1);
}
.station.is-on::before { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.station-card {
  display: grid; gap: 10px; padding: 20px 22px;
  border: 1px solid var(--ink-4); background: var(--paper-2);
  transition: border-color 0.2s, transform 0.1s steps(2);
}
.station.is-on .station-card { border-color: var(--ink-3); }
.station-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.station-name { font-size: clamp(22px, 2vw, 28px); font-weight: 620; letter-spacing: -0.02em; line-height: 1.1; }
.station-role { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.station-text { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.station-big { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.station-big b { display: block; font-size: clamp(30px, 3vw, 44px); line-height: 1; font-weight: 640; letter-spacing: -0.03em; color: var(--lamp); }
.station-big span { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.station.is-now .station-card { border-color: var(--lamp); }
.cart { display: none; }

/* Desktop: the record becomes a pinned rail ride. */
.record.is-ride { padding-block: 0; }
.record.is-ride .record-stage { height: 100vh; height: 100svh; overflow: hidden; }
.record.is-ride .record-head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(24px, 6vh, 64px)); z-index: 1; }
.record.is-ride .record-body { position: absolute; inset: 0; margin: 0; max-width: none; padding: 0; }
.record.is-ride .record-pin { position: relative; }
.record.is-ride .record-track {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 0; padding: 0 0 calc(18vh + 40px) 0; margin: 0;
  width: max-content; will-change: transform;
}
.record.is-ride .record-track::before {
  left: 0; right: 0; top: auto; bottom: 18vh; width: auto; height: 16px;
  border: 0; border-top: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  background: repeating-linear-gradient(90deg, transparent 0 22px, var(--ink-4) 22px 26px);
}
.record.is-ride .station { width: min(560px, 46vw); flex: none; padding-right: 64px; }
.record.is-ride .station:first-child { margin-left: 34vw; }
.record.is-ride .station:last-child { margin-right: 40vw; }
.record.is-ride .station::before { left: 0; top: auto; bottom: calc(-40px + 5px); width: 72px; height: 6px; }
.record.is-ride .station-card { transform: translateY(26px); opacity: 0.4; transition: transform 0.1s steps(2), opacity 0.1s steps(2), border-color 0.2s; }
.record.is-ride .station.is-on .station-card { transform: none; opacity: 1; }
.record.is-ride .cart {
  display: block; position: absolute; z-index: 2; left: 26vw; bottom: calc(18vh + 14px); width: 104px; height: 56px;
}
.cart .c-body { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.5; }
.cart .c-in { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.cart .c-wheel { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cart .c-spoke { stroke: var(--ink-2); stroke-width: 1.5; }
.record-head-pinned { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 40px); z-index: 1; pointer-events: none; }
.record.is-ride .record-intro { pointer-events: auto; }
.record-dim {
  position: absolute; left: 0; right: 0; bottom: calc(18vh - 46px); height: 20px; display: none;
  font: 500 10.5px/20px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.record.is-ride .record-dim { display: block; }
.record-dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--ink-3);
}
.record-dim span { position: relative; margin-left: 34vw; padding: 0 10px; background: var(--paper); }

/* ---------- Sheet 04: featured work ---------- */

.work-intro { display: grid; gap: 18px; max-width: 44em; }
.project {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: clamp(64px, 10vh, 120px);
  border-top: 1px solid var(--ink-4);
}
.project-copy { display: grid; gap: 22px; align-content: center; min-width: 0; }
.project-index { display: flex; align-items: center; gap: 12px; }
.project-title { font-size: clamp(44px, 5.6vw, 84px); font-weight: 650; line-height: 0.94; letter-spacing: -0.045em; }
.project-pitch { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 34em; }
.features li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; font-size: 16px; line-height: 1.5; }
.features li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; background: var(--ink-3); }
.project-fig { margin: 0; min-width: 0; }
.project-fig .canvas-box { aspect-ratio: 5 / 4; }
.fig-under { display: grid; gap: 10px; margin-top: 14px; min-height: 64px; }
.paste-log p { transition: opacity 0.1s steps(1); }
.paste-log .c-cmd { color: var(--mc-gray); }

.elixir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.elixir-bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.elixir-bar i { height: 10px; background: var(--ink-4); }
.elixir-bar i.on { background: var(--elixir); box-shadow: 0 0 10px rgba(214, 93, 228, 0.55); }
.elixir .label { white-space: nowrap; }

.stamp {
  position: absolute; z-index: 3; left: 50%; top: 46%;
  padding: 10px 18px; border: 4px solid var(--red); color: var(--red);
  font: 700 clamp(22px, 3vw, 40px)/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--veil);
  transform: translate(-50%, -50%) rotate(-9deg) scale(1.7); opacity: 0; pointer-events: none;
}
.stamp.is-on { animation: stamp 0.1s steps(2) forwards; }
@keyframes stamp { to { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: 1; } }

/* Jeopardy: a front elevation of the board, in the plugin's own blue and gold. */
.jy { --jy-blue: #0a2a9e; --jy-frame: #061a66; --jy-edge: #8fb0e8; --jy-gold: #e9a95c; display: grid; gap: 12px; }
.jy-board {
  position: relative; aspect-ratio: 16 / 10;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 1.25fr repeat(5, 1fr);
  gap: 3px; padding: 6px; border: 1px dashed var(--ink-3);
  transition: background-color 0.1s steps(1), border-color 0.1s steps(1);
}
.jy-board.is-built { background: var(--jy-frame); border: 3px solid var(--jy-edge); }
.jy-cell {
  display: grid; place-items: center; text-align: center; min-width: 0; overflow: hidden;
  border: 1px dashed var(--ink-4);
  font: 600 clamp(11px, 1.4vw, 20px)/1 var(--font-pixel); color: transparent;
}
.jy-cat { font-size: clamp(7px, 0.72vw, 11px); line-height: 1.1; padding: 2px; }
.jy-cell.is-lit { background: var(--jy-blue); border: 1px solid #000; color: var(--jy-gold); text-shadow: 2px 2px 0 #000; }
.jy-cat.is-lit { color: #fff; }
.jy-cell.is-played { color: transparent; text-shadow: none; }
.jy-clue {
  position: absolute; inset: 6px; z-index: 2;
  display: grid; place-items: center; text-align: center; padding: 5% 9%;
  background: var(--jy-blue); color: #fff; border: 2px solid var(--jy-edge);
  font: 600 clamp(13px, 1.9vw, 27px)/1.25 var(--font-pixel); text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
  transform: scale(0); opacity: 0; transform-origin: 50% 50%;
}
.jy-podiums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jy-pod {
  display: grid; gap: 6px; justify-items: center; padding: 10px 8px;
  border: 1px solid var(--ink-4); background: var(--paper-2);
  font: 400 15px/1 var(--font-pixel); color: var(--ink-2);
}
.jy-pod b { color: var(--ink); font-weight: 600; }
.jy-buzz { width: 28px; height: 10px; background: var(--red-off); transition: background-color 0.1s steps(1), box-shadow 0.1s steps(1); }
.jy-pod.is-buzz { border-color: var(--red); }
.jy-pod.is-buzz .jy-buzz { background: var(--red); box-shadow: 0 0 14px var(--red-glow); }
.jy-pop { color: var(--ok); opacity: 0; transition: opacity 0.1s steps(1); }
.jy-pod.is-buzz .jy-pop { opacity: 1; }

/* Lexdle: six letter reels that settle on a roll. */
.lx { display: grid; gap: 18px; }
.lx-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); }
.lx-tile {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1.5px solid var(--ink-3); background: var(--paper-2);
  transition: border-color 0.1s steps(1), box-shadow 0.1s steps(1);
}
.lx-reel { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.lx-reel span {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4;
  font: 600 clamp(26px, 3.8vw, 54px)/1 var(--font-mono); color: var(--ink);
}
.lx-tile.is-glyph { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp), 0 0 22px var(--lamp-glow); }
.lx-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-4); opacity: 0.6; pointer-events: none; }
.lx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lx-glyphs { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-glyph {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 10px; border: 1px solid var(--ink-4); color: var(--ink-3);
  transition: color 0.1s steps(1), border-color 0.1s steps(1);
}
.lx-glyph.is-on { color: var(--ink); border-color: var(--ink-3); }
.lx-glyph.is-on b { color: var(--lamp); font-weight: 500; }
.lx .stamp { position: relative; left: auto; top: auto; display: inline-block; font-size: clamp(16px, 1.6vw, 22px); padding: 6px 12px; border-width: 3px; transform: rotate(-6deg) scale(1.7); color: var(--lamp); border-color: var(--lamp); }
.lx .stamp.is-on { animation: stamp-inline 0.1s steps(2) forwards; }
@keyframes stamp-inline { to { transform: rotate(-6deg) scale(1); opacity: 1; } }

/* Sheet 04-E is withheld: redaction bars under an obfuscated title. */
.redacted { display: grid; gap: 10px; max-width: 30em; }
.redacted i {
  display: block; height: 16px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s steps(5);
}
.redacted.is-on i { transform: scaleX(1); }
.redacted i:nth-child(2) { width: 82%; transition-delay: 0.1s; }
.redacted i:nth-child(3) { width: 64%; transition-delay: 0.2s; }

@media (max-width: 900px) {
  .project { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .project-fig { order: -1; }
}

/* ---------- Sheet 05: minigames ---------- */

.mg-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.mg-stage { aspect-ratio: 16 / 11; }
.mg-copy { display: grid; gap: 22px; min-width: 0; }
.mg-card { display: grid; gap: 14px; }
.mg-card[hidden] { display: none; }
.mg-name { font-size: clamp(36px, 4vw, 60px); font-weight: 650; line-height: 0.95; letter-spacing: -0.04em; }

.hotbar {
  display: flex; width: max-content; max-width: 100%; margin: 18px auto 0;
  padding: 3px; background: rgba(10, 10, 10, 0.55); border: 2px solid #111;
  overflow-x: auto;
}
.slot {
  position: relative; width: 50px; height: 50px; flex: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(139, 139, 139, 0.32); border: 0;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.16);
}
.slot + .slot { margin-left: 2px; }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.slot .n { position: absolute; left: 4px; top: 3px; font: 400 11px/1 var(--font-pixel); color: #fff; opacity: 0.55; }
.slot.is-sel { outline: 3px solid #fff; outline-offset: -1px; z-index: 1; }
.slot .plus { font: 400 18px/1 var(--font-pixel); color: rgba(255, 255, 255, 0.35); }
.hotbar-note { text-align: center; margin-top: 10px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 900px) {
  .mg-grid { grid-template-columns: minmax(0, 1fr); }
  .slot { width: 40px; height: 40px; }
  .slot img { width: 26px; height: 26px; }
}

/* ---------- Sheet 06: toolbox ---------- */

.tb-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.craft {
  display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 3vw, 36px);
}
.craft-title { grid-column: 1 / -1; margin-bottom: 4px; }
.craft-grid { display: grid; grid-template-columns: repeat(3, var(--slot, 64px)); grid-auto-rows: var(--slot, 64px); gap: 4px; }
.craft-slot {
  position: relative; display: grid; place-items: center;
  border: 1px solid var(--ink-3); background: var(--paper);
}
.craft-slot .ico { width: 30px; height: 30px; color: var(--ink); opacity: 0; transform: translateX(-24px); }
.craft-slot.is-in .ico { opacity: 1; transform: none; transition: transform 0.1s steps(2), opacity 0.05s steps(1); }
.craft-slot.is-in .ico .f { clip-path: inset(0 0 0 0); }
.craft-arrow { width: 44px; height: 24px; }
.craft-arrow path { fill: none; stroke: var(--ink-3); stroke-width: 2; transition: stroke 0.1s steps(1); }
.craft.is-made .craft-arrow path { stroke: var(--red); }
.craft-out {
  width: calc(var(--slot, 64px) * 1.35); height: calc(var(--slot, 64px) * 1.35);
  display: grid; place-items: center; border: 1.5px solid var(--ink-3); background: var(--paper);
  transition: border-color 0.1s steps(1), box-shadow 0.1s steps(1);
}
.craft-out .ico { width: 40px; height: 40px; color: var(--lamp); opacity: 0; }
.craft.is-made .craft-out { border-color: var(--lamp); box-shadow: 0 0 26px var(--lamp-glow); }
.craft.is-made .craft-out .ico { opacity: 1; }
.craft.is-made .craft-out .ico .f { clip-path: inset(0 0 0 0); fill-opacity: 0.35; }
.craft-caption { grid-column: 1 / -1; text-align: center; }

.bom { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.bom caption { text-align: left; padding-bottom: 12px; }
.bom th, .bom td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--ink-4); }
.bom thead th { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--ink-3); }
.bom td:first-child { font: 500 12px/1.6 var(--font-mono); color: var(--ink-3); width: 3.2em; }
.bom td:nth-child(2) { font-weight: 560; white-space: nowrap; padding-right: 20px; }
.bom td:last-child { color: var(--ink-2); }
.bom-wrap { overflow-x: auto; }

@media (max-width: 900px) {
  .tb-grid { grid-template-columns: minmax(0, 1fr); }
  .craft { --slot: 48px; }
  .bom td:nth-child(2) { white-space: normal; }
}

/* ---------- Sheet 07: commission ---------- */

.call { display: grid; gap: 28px; }
.call-title { font-size: clamp(46px, 7.4vw, 116px); font-weight: 650; line-height: 0.94; letter-spacing: -0.05em; max-width: 11ch; text-wrap: balance; }
.stats { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); }
.stat b { display: block; font-size: clamp(34px, 3.6vw, 52px); font-weight: 640; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat span { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.call-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-huge { min-height: 64px; padding: 0 28px; font-size: 14px; }

.dwg-index { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--ink-3); }
.dwg-index h3 { padding: 14px 0; border-bottom: 1px solid var(--ink-4); }
.dwg {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--ink-4); text-decoration: none;
}
.dwg:hover .dwg-name { color: var(--red); }
.dwg-no { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--ink-2); }
.dwg-name { font-size: clamp(17px, 1.6vw, 21px); font-weight: 560; letter-spacing: -0.01em; transition: color 0.15s; }

/* ---------- Footer: the title block ---------- */

.site-footer { margin-top: clamp(48px, 8vw, 96px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.titleblock {
  display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
  border-top: 1px solid var(--ink-3); border-left: 1px solid var(--ink-3);
}
.tb-cell { display: grid; gap: 7px; align-content: start; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.tb-k { font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.tb-v { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.tb-v a { text-decoration: none; border-bottom: 1px solid var(--ink-3); }
.tb-v a:hover { border-color: var(--red); }
.tb-brand { display: flex; align-items: center; gap: 14px; }
.tb-brand .brand-mark { width: 40px; height: 40px; }
.tb-brand b { display: block; font-size: 20px; font-weight: 640; letter-spacing: -0.02em; }
.theme-lever {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.theme-lever .ico { width: 28px; height: 28px; }
.foot-notes {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 16px 0 28px; font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-3);
}
.foot-notes .keys { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

@media (max-width: 900px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-cell.wide { grid-column: 1 / -1; }
}

/* ---------- In-game overlays ---------- */

.mc-tip {
  position: fixed; z-index: 140; left: 0; top: 0; pointer-events: none;
  max-width: min(320px, calc(100vw - 24px));
  padding: 5px 8px 6px; background: var(--mc-bg);
  box-shadow: inset 0 0 0 1px var(--mc-edge), 0 0 0 1px var(--mc-bg);
  font: 400 16px/1.3 var(--font-pixel); color: var(--mc-white);
}
.mc-tip p { margin: 0; white-space: pre-line; }
.mc-tip p + p { color: var(--mc-gray); }
.mc-tip .gold { color: var(--mc-gold); }
.mc-tip .aqua { color: var(--mc-aqua); }
.mc-tip .green { color: var(--mc-green); }

.chat {
  position: fixed; z-index: 150; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: min(640px, calc(100vw - 16px));
  display: grid; gap: 4px;
  font: 400 18px/1.25 var(--font-pixel); color: var(--mc-white);
}
.chat[hidden] { display: none; }
.chat-log { display: grid; max-height: 46vh; overflow-y: auto; }
.chat-log p { margin: 0; padding: 2px 6px; background: rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }
.chat-log .c-gray { color: var(--mc-gray); }
.chat-log .c-gold { color: var(--mc-gold); }
.chat-log .c-red { color: var(--mc-red); }
.chat-log .c-yellow { color: var(--mc-yellow); }
.chat-log .c-aqua { color: var(--mc-aqua); }
.chat-log .c-green { color: var(--mc-green); }
.chat-suggest { display: grid; width: fit-content; min-width: 200px; background: rgba(0, 0, 0, 0.82); padding: 2px 6px; }
.chat-suggest[hidden] { display: none; }
.chat-suggest span { color: var(--mc-gray); }
.chat-suggest span.sel { color: var(--mc-yellow); }
.chat-line { display: flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, 0.62); padding: 4px 6px; }
.chat-line input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--mc-white); font: inherit; caret-color: var(--mc-white);
}

.f3 {
  position: fixed; z-index: 145; left: 8px; right: 8px; top: calc(var(--header-h) + 10px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: space-between; gap: 16px; pointer-events: none;
  font: 400 16px/1.15 var(--font-pixel); color: #e0e0e0;
}
.f3[hidden] { display: none; }
.f3 > div { display: grid; gap: 1px; align-content: start; }
.f3 p { margin: 0; padding: 1px 4px; width: fit-content; background: rgba(80, 80, 80, 0.62); text-shadow: 1px 1px 0 #3f3f3f; }
.f3 .f3-right p { justify-self: end; }
.f3 .gap { height: 12px; background: none; }

.boot {
  position: fixed; inset: 0; z-index: 260;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) max(24px, env(safe-area-inset-bottom, 0px));
  background: #070b10; color: #c9d4df;
  font: 400 13px/1.6 var(--font-mono);
}
.boot p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.boot .t { color: #6f7f90; }
.boot .w { color: #ffd166; }
.boot .pl { color: #6cc4ff; }
.boot .ok { color: #7ee2a0; }
.boot-skip {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px;
  padding: 7px 9px; background: none; border: 1px solid #2a3542; color: #8a9bb0; cursor: pointer;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.boot-caret { display: inline-block; width: 8px; height: 14px; background: #c9d4df; vertical-align: -2px; animation: blink-caret 1s steps(1) infinite; }
@keyframes blink-caret { 50% { opacity: 0; } }

.chunks { position: fixed; inset: 0; z-index: 250; pointer-events: none; width: 100%; height: 100%; }
html.chunk-in body::after { content: ""; position: fixed; inset: 0; z-index: 249; background: var(--paper); }

/* ---------- Inner pages ---------- */

.page-head {
  padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px));
  padding-bottom: clamp(32px, 6vh, 64px);
  display: grid; gap: 22px;
}
.page-head .display { font-size: clamp(42px, 6vw, 92px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 14px; border: 1px solid var(--ink-4); background: transparent; color: var(--ink-2); cursor: pointer;
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-top: 28px; }
.card {
  position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0;
  border: 1px solid var(--ink-4); background: var(--paper-2); text-decoration: none;
}
.card[hidden] { display: none; }
.card-fig { position: relative; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--ink-4); overflow: hidden; }
.card-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 22px; }
.card-title { font-size: 24px; font-weight: 620; letter-spacing: -0.02em; line-height: 1.1; }
.card-text { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.card .stamp { font-size: 20px; padding: 6px 12px; border-width: 3px; }
.card-mini { position: absolute; inset: 12%; display: grid; place-items: center; }

.case-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 1px solid var(--ink-3); }
.meta dt, .meta dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--ink-4); }
.meta dt { padding-right: 24px; font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.meta dd { font-size: 15.5px; line-height: 1.45; }
.meta dd a { text-decoration: none; border-bottom: 1px solid var(--ink-3); }
.meta dd a:hover { border-color: var(--red); }
.case-fig { margin: clamp(40px, 6vw, 72px) 0 0; }
.case-fig .canvas-box { aspect-ratio: 16 / 9; }
.case-fig .frame { padding: clamp(12px, 2vw, 24px); }
.case-section {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 64px); padding-block: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--ink-4);
}
.case-section:first-of-type { margin-top: clamp(40px, 6vw, 80px); }
.case-section > header { display: grid; gap: 10px; align-content: start; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
.feature { display: grid; gap: 8px; align-content: start; }
.feature h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.feature p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.notes { display: grid; gap: 18px; }
.note { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--ink-4); }
.note h3 { font: 500 11px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.note p { font-size: 16px; line-height: 1.55; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border: 1px solid var(--ink-4); }
.next-case {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px 0; border-top: 1px solid var(--ink-3); text-decoration: none;
}
.next-case .h3 { transition: color 0.15s; }
.next-case:hover .h3 { color: var(--red); }

@media (max-width: 900px) {
  .case-head, .case-section { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about-grid .prose p { font-size: clamp(17px, 1.4vw, 20px); }
.compare { position: relative; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; touch-action: pan-y; }
.compare canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare .after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px;
  background: var(--red); box-shadow: 0 0 10px var(--red-glow); pointer-events: none;
}
.compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: var(--paper); border: 2px solid var(--red);
}
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare-tags { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.compare-tags span { padding: 5px 7px; background: var(--veil); border: 1px solid var(--ink-4); font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }

@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* Commissions */
.open-tag { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 12px; border: 1px solid var(--ink-3); font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service { display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--ink-4); background: var(--paper-2); }
.service .ico { width: 32px; height: 32px; }
.service h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.service p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.step { position: relative; display: grid; gap: 10px; align-content: start; padding: 0 20px 0 0; }
.step-top { display: flex; align-items: center; gap: 10px; }
.step-top .ico { width: 32px; height: 32px; }
.step-top::after { content: ""; flex: 1; height: 2px; background: var(--red-off); transition: background-color 0.1s steps(1), box-shadow 0.1s steps(1); }
.step:last-child .step-top::after { display: none; }
.step.is-on .step-top::after { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.step-no { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--ink-2); }
.step h3 { font-size: 19px; font-weight: 600; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.order { position: relative; border: 1px solid var(--ink-3); background: var(--paper-2); }
.order-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--ink-3); }
.order-head > div { padding: 16px 20px; display: grid; gap: 6px; }
.order-head > div + div { border-left: 1px solid var(--ink-3); text-align: right; }
.order-body { display: grid; gap: 28px; padding: clamp(20px, 3vw, 36px); }
.field { display: grid; gap: 10px; min-width: 0; }
.field > label, .field > legend, .field-label { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding: 0; }
.req { color: var(--red); }
.input {
  width: 100%; min-width: 0; padding: 13px 14px; border-radius: 0;
  background: var(--paper); border: 1px solid var(--ink-4); color: var(--ink);
  font: 400 16px/1.4 var(--font-sans);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px var(--grid-major); }
.input[aria-invalid="true"] { border-color: var(--red); }
textarea.input { min-height: 170px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; cursor: pointer;
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid var(--ink-4); background: var(--paper);
}
.choice span:hover { color: var(--ink); border-color: var(--ink-3); }
.choice input:checked + span { color: var(--ink); border-color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.choice input:focus-visible + span { outline: 2px solid var(--lamp); outline-offset: 2px; }
/* File drop: a hopper you drop files into. */
.field > .drop {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 18px; cursor: pointer;
  border: 1.5px dashed var(--ink-3); background: var(--paper); text-align: center;
  font: 400 15px/1.45 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-2);
  transition: border-color 0.1s steps(1), background-color 0.1s steps(1);
}
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop .ico { width: 34px; height: 34px; color: var(--ink); }
.drop-text b { color: var(--ink); font-weight: 600; }
.drop-text u { text-decoration-color: var(--red); text-underline-offset: 3px; }
.drop-hint { font: 500 11px/1.45 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.drop:hover, .drop.is-over { border-color: var(--red); background: var(--grid-major); }
.drop:hover .ico .f, .drop.is-over .ico .f { clip-path: inset(0 0 0 0); }
.drop:hover .ico .rf, .drop.is-over .ico .rf { fill: var(--red); }
.drop.is-over .ico .m { transform: translateY(7px); }
.drop:focus-within { outline: 2px solid var(--lamp); outline-offset: 2px; }
.drop-note { font: 500 12px/1.4 var(--font-mono); color: var(--ink-2); }
.drop-note:empty { display: none; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.files[hidden] { display: none; }
.files li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 8px 8px 8px 12px; border: 1px solid var(--ink-4); background: var(--paper);
  font: 500 13px/1.3 var(--font-mono);
}
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.file-size { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.file-x {
  width: 32px; height: 32px; padding: 0; cursor: pointer; border: 1px solid var(--ink-4); background: transparent;
  font: 400 18px/1 var(--font-mono); color: var(--ink-2);
}
.file-x:hover { color: var(--red); border-color: var(--red); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--ink-4); }
.form-error { color: var(--red); font: 500 12.5px/1.4 var(--font-mono); }
.order.is-sending .order-body { opacity: 0.35; transform: scale(0.985); transition: opacity 0.2s steps(2), transform 0.2s steps(2); }
.sent { display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border-top: 1px solid var(--ink-3); }
.sent[hidden] { display: none; }
.sent textarea { min-height: 220px; font: 400 13px/1.55 var(--font-mono); }
.sent-head { display: flex; align-items: center; gap: 14px; }
.sent-head .ico { width: 36px; height: 36px; color: var(--lamp); }
.faq { display: grid; border-top: 1px solid var(--ink-3); }
.faq details { border-bottom: 1px solid var(--ink-4); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0;
  cursor: pointer; list-style: none; font-size: 18px; font-weight: 560;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--font-mono); color: var(--ink-2); }
.faq details[open] summary::after { content: "-"; }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 44em; }

@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .step-top::after { display: none; }
}
@media (max-width: 640px) {
  .services, .two { grid-template-columns: minmax(0, 1fr); }
  .order-head { grid-template-columns: minmax(0, 1fr); }
  .order-head > div + div { border-left: 0; border-top: 1px solid var(--ink-3); text-align: left; }
}

/* 404 */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; gap: 22px; padding-block: calc(var(--header-h) + 40px) 40px; }

/* ---------- Reduced motion: every sheet is already built ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}