/* ===========================================================================
   Ungodly Emerald Zombie AI — install guide
   Visual system: "board up the window".

   The install is a sequence, and the game's structural material is the plank,
   so the sequence is rendered as planks nailed across a window frame. Colour
   carries meaning and is not decoration:
       blood red  = the game / the stock AI / things that break the install
       emerald    = the mod / the new brain / things that succeeded
       plank wood = the install sequence itself
   Reference pages are deliberately NOT planks — they are not part of the
   sequence, so they do not get the sequence's material.
   =========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  --grave:       #0E0B09;
  --grave-2:     #13100C;
  --panel:       #1A1512;
  --panel-2:     #221B16;
  --edge:        #2E2620;
  --edge-soft:   #241E19;

  --plank:       #6B4A2F;
  --plank-hi:    #8A6440;
  --plank-lo:    #3A2718;
  --nail:        #7C766C;

  --blood:       #D8362F;
  --blood-hi:    #F05049;
  --blood-dim:   #8C1F1C;

  --emerald:     #35D08A;
  --emerald-hi:  #5CE8A8;
  --emerald-dim: #1B7F55;

  --bone:        #EDE6D8;
  --bone-dim:    #9C9083;
  --bone-faint:  #6B6157;

  --f-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --f-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --rail-w: 272px;
  --pad:    clamp(18px, 3.4vw, 46px);
  --maxw:   980px;
  --r:      3px;
  --ease:   cubic-bezier(.22, .68, .32, 1);

  --grain:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.10) 48%, rgba(0,0,0,.17)),
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.075) 0px,  rgba(0,0,0,0) 3px,
      rgba(255,255,255,.02) 9px, rgba(0,0,0,0) 18px,
      rgba(0,0,0,.055) 27px, rgba(0,0,0,0) 43px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grave);
  color: var(--bone);
  font: 400 16.5px/1.68 var(--f-body);
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1100px 640px at 76% -12%, rgba(140, 32, 28, .16), transparent 62%),
    radial-gradient(760px 520px at 4% 106%, rgba(27, 127, 85, .10), transparent 60%);
  background-attachment: fixed;
}

img, svg, picture { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--emerald); text-decoration-color: rgba(53, 208, 138, .38); text-underline-offset: 3px; }
a:hover { color: var(--emerald-hi); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--emerald-hi);
  outline-offset: 2px;
  border-radius: 2px;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: #FBF6EC; }
em { font-style: italic; color: var(--bone); }
kbd {
  font: 600 .78em/1 var(--f-mono);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: .22em .42em;
  color: var(--bone);
  white-space: nowrap;
}
code { font-family: var(--f-mono); font-size: .875em; }
:not(pre) > code {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--edge-soft);
  border-radius: 2px;
  padding: .1em .36em;
  color: #E3D9C6;
  word-break: break-word;
}

.skip {
  position: absolute; left: 10px; top: -60px; z-index: 300;
  background: var(--emerald); color: #06140D;
  padding: 9px 16px; border-radius: 2px;
  font: 600 14px var(--f-body); text-decoration: none;
  transition: top .15s var(--ease);
}
.skip:focus { top: 10px; color: #06140D; }

/* ---------------------------------------------------------------- 03 topbar */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 11px var(--pad);
  background: rgba(14, 11, 9, .93);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; }
.brand__mark { color: var(--plank-hi); flex: none; display: block; }
.brand:hover .brand__mark { color: var(--blood); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font: 700 20px/1 var(--f-display);
  letter-spacing: .028em; text-transform: uppercase; color: var(--bone);
}
.brand__sub { font-size: 11.5px; color: var(--bone-faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }

.top__meta { display: flex; gap: 7px; flex: none; }
.chip {
  font: 600 11px/1 var(--f-mono);
  padding: 6px 9px; border-radius: 2px;
  border: 1px solid var(--edge); background: var(--panel);
  color: var(--bone-dim); white-space: nowrap;
}
.chip--bep { border-color: rgba(216, 54, 47, .34); color: #E9A19C; }
.chip--mod { border-color: rgba(53, 208, 138, .34); color: var(--emerald); }

.navtoggle {
  display: none; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 8px 12px; cursor: pointer;
  font: 600 12px var(--f-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--bone-dim);
}
.navtoggle:hover { color: var(--bone); border-color: var(--plank); }
.navtoggle__bars { display: grid; gap: 3px; }
.navtoggle__bars i { display: block; width: 15px; height: 2px; background: currentColor; }

/* ---------------------------------------------------------------- 04 shell */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

/* ------------------------------------------------- 05 the rail: the barricade */
.rail {
  position: sticky; top: 57px;
  height: calc(100vh - 57px);
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(19,16,12,.92), rgba(10,8,6,.96));
  padding: 22px 16px 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }
.rail__inner { display: flex; flex-direction: column; min-height: 100%; }

.rail__group { margin: 0 0 9px; padding: 0 4px; display: flex; flex-direction: column; gap: 1px; }
.rail__list + .rail__group { margin-top: 26px; }
.rail__glabel {
  font: 700 12px/1 var(--f-display);
  letter-spacing: .17em; text-transform: uppercase; color: var(--plank-hi);
}
.rail__gnote { font-size: 10.5px; letter-spacing: .05em; color: var(--bone-faint); text-transform: uppercase; }

.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

/* The plank itself. Sequence pages only. */
.plank {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 11px;
  text-decoration: none; color: var(--bone-dim);
  border-radius: 2px;
  border: 1px solid var(--plank-lo);
  background-color: #2A1D12;
  background-image: var(--grain);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.42);
  transition: transform .16s var(--ease), background-color .16s var(--ease),
              color .16s var(--ease), border-color .16s var(--ease);
}
.rail__list li:nth-child(odd)  .plank { transform: rotate(-.35deg); }
.rail__list li:nth-child(even) .plank { transform: rotate(.3deg); }
.plank:hover { background-color: #3C2A19; color: var(--bone); transform: rotate(0deg) translateX(2px); }

.plank__nails { position: absolute; inset: 0; pointer-events: none; }
.plank__nails i {
  position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #B6AFA3, var(--nail) 62%, #35302A);
  box-shadow: 0 1px 1px rgba(0,0,0,.65);
  transform: translateY(-50%);
}
.plank__nails i:first-child { left: 5px; }
.plank__nails i:last-child  { right: 5px; }

.plank__n {
  font: 700 12.5px/1 var(--f-mono);
  letter-spacing: .02em;
  color: var(--plank-hi); flex: none; width: 22px; text-align: center;
  margin-left: 5px;
}
.plank__t {
  font: 500 14px/1.25 var(--f-body);
  letter-spacing: .012em; margin-right: 4px;
}

.plank.is-done {
  background-color: #4A3320; color: #D6C9B4; border-color: #5B4028;
}
.plank.is-done .plank__n { color: var(--emerald); }

.plank.is-current {
  background-color: #56381F;
  border-color: var(--blood);
  color: #FBF4E7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(216,54,47,.25), 0 2px 10px rgba(216,54,47,.18);
  transform: rotate(0deg);
}
.plank.is-current .plank__n { color: var(--blood-hi); }
.plank.is-current::after {
  content: ""; position: absolute; left: -17px; top: 50%;
  width: 9px; height: 2px; background: var(--blood); transform: translateY(-50%);
}

/* Reference pages: not part of the sequence, so not planks. */
.plank--ref {
  background-color: transparent; background-image: none;
  border: 1px solid transparent; border-left: 2px solid var(--edge);
  border-radius: 0; box-shadow: none; padding: 7px 10px 7px 12px;
  transform: none !important;
}
.plank--ref .plank__nails { display: none; }
.plank--ref .plank__n { color: var(--bone-faint); }
.plank--ref:hover { background-color: rgba(255,255,255,.03); border-left-color: var(--plank-hi); transform: none; }
.plank--ref.is-current {
  background-color: rgba(53, 208, 138, .07);
  border-left-color: var(--emerald); box-shadow: none; color: #FBF4E7;
}
.plank--ref.is-current .plank__n { color: var(--emerald); }
.plank--ref.is-current::after { display: none; }

.rail__foot { margin-top: auto; padding-top: 24px; }
.rail__dl {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 13px; border-radius: var(--r);
  border: 1px solid var(--emerald-dim);
  background: linear-gradient(180deg, rgba(53,208,138,.10), rgba(53,208,138,.03));
  text-decoration: none; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rail__dl:hover { border-color: var(--emerald); background: rgba(53,208,138,.15); }
.rail__dl span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--bone-faint); }
.rail__dl strong { font: 700 15px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--emerald); }
.rail__by { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--bone-faint); }
.rail__by strong { color: var(--bone-dim); font-weight: 600; }

/* ---------------------------------------------------------------- 06 main */
.main { padding: 40px var(--pad) 72px; min-width: 0; }
.main > * { max-width: var(--maxw); }

.phead { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--edge); }
.phead__kick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.phead__stage {
  font: 700 11px/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blood-hi); border: 1px solid rgba(216,54,47,.4);
  background: rgba(216,54,47,.08); padding: 5px 9px; border-radius: 2px;
}
.phead__stage--ref { color: var(--emerald); border-color: rgba(53,208,138,.4); background: rgba(53,208,138,.07); }
.phead__grp { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.phead__h {
  margin: 0 0 12px;
  font: 800 clamp(34px, 5.4vw, 56px)/.94 var(--f-display);
  letter-spacing: .006em; text-transform: uppercase; color: #FBF6EC;
}
.phead__lede { margin: 0; font-size: 18px; line-height: 1.55; color: var(--bone-dim); max-width: 62ch; }

/* ---------------------------------------------------------------- 07 sections */
.sec { margin: 0 0 46px; }
.sec:last-child { margin-bottom: 0; }
.sec__kick {
  margin: 0 0 6px;
  font: 700 11px/1 var(--f-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--plank-hi);
}
.sec__h {
  margin: 0 0 18px;
  font: 700 clamp(23px, 3vw, 30px)/1.08 var(--f-display);
  letter-spacing: .015em; text-transform: uppercase; color: #F6EFE2;
  padding-bottom: 10px; border-bottom: 1px solid var(--edge-soft);
}
.sec h4 {
  margin: 26px 0 9px;
  font: 600 16px/1.3 var(--f-body); letter-spacing: .01em; color: #F0E8DA;
}
.sec ul, .sec ol { margin: 0 0 1.05em; padding-left: 1.25em; }
.sec li { margin-bottom: .42em; }
.sec li::marker { color: var(--plank-hi); }
.sec ul.plain { list-style: none; padding-left: 0; }
.sec ul.plain li { padding-left: 1.15em; position: relative; }
.sec ul.plain li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; background: var(--plank-hi); border-radius: 1px;
}

/* ---------------------------------------------------------------- 08 steps */
.step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 0 0 26px; position: relative; }
.step + .step { padding-top: 4px; }
.step::before {
  content: ""; position: absolute; left: 22px; top: 40px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--edge), transparent);
}
.step:last-child::before { display: none; }
.step__n {
  width: 46px; height: 34px; display: grid; place-items: center;
  font: 700 13px/1 var(--f-mono); letter-spacing: .02em; color: #17100A;
  background: linear-gradient(180deg, var(--plank-hi), var(--plank));
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.5);
  position: relative; z-index: 1;
}
.step__h { margin: 4px 0 9px; font: 600 19px/1.28 var(--f-body); color: #F6EFE2; letter-spacing: .005em; }
.step__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 09 callouts */
.call {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 13px;
  padding: 15px 17px; margin: 20px 0;
  border: 1px solid var(--edge); border-left-width: 3px;
  border-radius: var(--r); background: var(--panel);
}
.call__mark {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; font: 700 13px/1 var(--f-body); margin-top: 1px;
}
.call__h { margin: 0 0 5px; font: 600 15.5px/1.35 var(--f-body); color: #F6EFE2; }
.call__body > :last-child { margin-bottom: 0; }
.call__body p { font-size: 15.5px; }

.call--note  { border-left-color: var(--plank-hi); }
.call--note  .call__mark { background: rgba(138,100,64,.2); color: var(--plank-hi); }
.call--warn  { border-left-color: #D9922F; background: rgba(217,146,47,.05); }
.call--warn  .call__mark { background: rgba(217,146,47,.18); color: #E7A94E; }
.call--stop  { border-left-color: var(--blood); background: rgba(216,54,47,.06); }
.call--stop  .call__mark { background: rgba(216,54,47,.2); color: var(--blood-hi); }
.call--good  { border-left-color: var(--emerald); background: rgba(53,208,138,.055); }
.call--good  .call__mark { background: rgba(53,208,138,.18); color: var(--emerald); }
.call--brain { border-left-color: var(--emerald-dim); background: rgba(27,127,85,.07); }
.call--brain .call__mark { background: rgba(27,127,85,.24); color: var(--emerald-hi); }

/* ---------------------------------------------------------------- 10 code */
.code { margin: 18px 0; border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; background: #0B0908; }
.code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px 7px 13px; background: var(--panel); border-bottom: 1px solid var(--edge);
}
.code__label {
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-faint);
}
.code__copy {
  background: transparent; border: 1px solid var(--edge); border-radius: 2px;
  padding: 4px 10px; cursor: pointer;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bone-dim); transition: all .14s var(--ease);
}
.code__copy:hover { color: var(--emerald); border-color: var(--emerald-dim); }
.code__copy.is-done { color: var(--emerald); border-color: var(--emerald); }
.code__pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font: 400 13.4px/1.68 var(--f-mono); color: #D8CDB9;
  scrollbar-width: thin;
}
.code__pre::-webkit-scrollbar { height: 8px; }
.code__pre::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }

/* ---------------------------------------------------------------- 11 shots */
.shot { margin: 22px 0; }
.shot__btn {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  overflow: hidden; position: relative;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.shot__btn:hover { border-color: var(--plank); transform: translateY(-2px); }
.shot__btn img { width: 100%; height: auto; }
.shot__zoom {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 2px;
  background: rgba(10, 8, 6, .86); border: 1px solid var(--edge);
  color: var(--bone); font: 600 11px/1 var(--f-body);
  letter-spacing: .07em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px); transition: all .16s var(--ease);
}
.shot__btn:hover .shot__zoom, .shot__btn:focus-visible .shot__zoom { opacity: 1; transform: translateY(0); }
.shot__cap {
  margin: 9px 0 0; font-size: 13.5px; color: var(--bone-faint);
  display: flex; align-items: baseline; gap: 7px;
}
.shot__cap::before {
  content: ""; flex: none; width: 14px; height: 1px; background: var(--plank);
  transform: translateY(-4px);
}

.shotgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 22px 0; }
.shotgrid .shot { margin: 0; }

/* ---------------------------------------------------------------- 12 tree */
.tree {
  margin: 18px 0; padding: 15px 17px;
  background: #0B0908; border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--f-mono); font-size: 13.2px;
}
.tree__root {
  margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--edge-soft);
  color: var(--bone-dim); font-size: 12.4px; word-break: break-all;
}
.tree__list { list-style: none; margin: 0; padding: 0; }
.tree__row {
  padding: 2.5px 0 2.5px calc(var(--d, 0) * 18px);
  display: flex; align-items: baseline; gap: 10px; color: var(--bone-dim);
  line-height: 1.55;
}
.tree__name { white-space: nowrap; }
.tree__note { font: 400 11.6px/1.4 var(--f-body); color: var(--bone-faint); letter-spacing: .01em; }
.tree__row--dir   .tree__name { color: #D9B98C; font-weight: 600; }
.tree__row--dir   .tree__name::after { content: "\\"; opacity: .5; }
.tree__row--new   .tree__name { color: var(--emerald); font-weight: 600; }
.tree__row--new::marker { color: var(--emerald); }
.tree__row--ghost .tree__name { color: var(--bone-faint); opacity: .72; }
.tree__row--ghost .tree__note { opacity: .8; }

/* ---------------------------------------------------------------- 13 tables */
.tablewrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.6px; min-width: 460px; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge-soft); }
.tbl thead th {
  background: var(--panel); color: var(--plank-hi);
  font: 700 11px/1.3 var(--f-mono); letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 1px solid var(--edge); position: sticky; top: 0;
}
.tbl tbody th { font-weight: 600; color: #F0E8DA; }
.tbl td { color: var(--bone-dim); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: rgba(255,255,255,.022); }
.tbl code { font-size: .86em; }
.tbl--map tbody th { font-family: var(--f-mono); font-size: 13px; font-weight: 400; color: #E9A19C; }

/* ---------------------------------------------------------------- 14 cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); margin: 20px 0; }
.card {
  padding: 16px 17px; border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--panel); position: relative;
}
.card__tag {
  display: inline-block; margin-bottom: 8px;
  font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald); border: 1px solid var(--emerald-dim);
  padding: 4px 7px; border-radius: 2px;
}
.card__h { margin: 0 0 7px; font: 600 16px/1.3 var(--f-body); color: #F6EFE2; }
.card__d { font-size: 14.6px; line-height: 1.6; color: var(--bone-dim); }
.card__d > :last-child { margin-bottom: 0; }
.cards--tight .card { padding: 13px 14px; }
.cards--tight .card__h { font-size: 15px; }
.cards--tight .card__d { font-size: 13.8px; }

/* ---------------------------------------------------------------- 15 faq */
.faq { border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel); margin-bottom: 9px; }
.faq[open] { border-color: var(--plank); }
.faq__q {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font: 600 15.6px/1.4 var(--f-body); color: #F0E8DA;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; font: 400 19px/1 var(--f-mono); color: var(--plank-hi);
  transition: transform .16s var(--ease);
}
.faq[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: #FBF6EC; }
.faq__qtext { flex: 1; }
.faq__tag {
  flex: none; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 2px; color: var(--bone-faint); border: 1px solid var(--edge);
}
.faq__a { padding: 0 16px 16px; font-size: 15.4px; color: var(--bone-dim); border-top: 1px solid var(--edge-soft); padding-top: 14px; }
.faq__a > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 16 versus */
.vs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px; margin: 0 0 12px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
}
.vs__topic {
  grid-column: 1 / -1; margin: 0; padding: 9px 15px; background: var(--panel-2);
  font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim);
}
.vs__side { padding: 13px 15px; background: var(--panel); }
.vs__side p { margin: 0; font-size: 14.6px; line-height: 1.6; color: var(--bone-dim); }
.vs__lab {
  display: block; margin-bottom: 6px;
  font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.vs__side--stock .vs__lab { color: var(--blood-hi); }
.vs__side--brain .vs__lab { color: var(--emerald); }
.vs__side--brain { background: rgba(27,127,85,.05); }

/* ---------------------------------------------------------------- 17 pager */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--edge);
  max-width: var(--maxw);
}
.pager__link {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 17px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--panel); text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.pager__link:hover { border-color: var(--plank); background: var(--panel-2); transform: translateY(-2px); }
.pager__link--next { text-align: right; }
.pager__dir { font: 600 10.5px/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--bone-faint); }
.pager__t { font: 700 19px/1.15 var(--f-display); letter-spacing: .028em; text-transform: uppercase; color: var(--bone); }
.pager__link:hover .pager__t { color: var(--emerald); }
.pager__spacer { display: block; }

/* ---------------------------------------------------------------- 18 footer */
.foot { border-top: 1px solid var(--edge); background: #0A0806; margin-top: 0; }
.foot__in {
  display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 40px var(--pad) 30px; max-width: 1240px;
}
.foot__col--wide { grid-column: span 2; min-width: 0; }
.foot__h {
  margin: 0 0 12px; font: 700 12px/1 var(--f-display);
  letter-spacing: .17em; text-transform: uppercase; color: var(--plank-hi);
}
.foot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.foot__list a { color: var(--bone-dim); text-decoration: none; font-size: 14.4px; }
.foot__list a:hover { color: var(--emerald); }
.foot__p { font-size: 14px; line-height: 1.6; color: var(--bone-dim); }
.foot__p--dim { color: var(--bone-faint); font-size: 12.8px; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0; padding: 16px var(--pad) 26px;
  border-top: 1px solid var(--edge-soft);
  font: 400 11.6px/1.5 var(--f-mono); color: var(--bone-faint); text-align: center;
}
.foot__sep { opacity: .5; }

/* ---------------------------------------------------------------- 19 lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: #050403;
  display: flex; flex-direction: column;
  animation: lbIn .16s var(--ease);
}
.lb[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

.lb__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px; border-bottom: 1px solid var(--edge); background: var(--grave); flex: none;
}
.lb__cap { margin: 0; font-size: 14px; color: var(--bone); min-width: 0; }
.lb__tools { display: flex; align-items: center; gap: 12px; flex: none; }
.lb__count { font: 400 12px/1 var(--f-mono); color: var(--bone-faint); }
.lb__open {
  font: 600 11px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--emerald); text-decoration: none; border: 1px solid var(--emerald-dim);
  padding: 6px 10px; border-radius: 2px;
}
.lb__open:hover { background: rgba(53,208,138,.12); }
.lb__close {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--edge); border-radius: 2px;
  padding: 6px 10px; cursor: pointer;
  font: 600 11px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--bone-dim);
}
.lb__close:hover { color: var(--blood-hi); border-color: var(--blood-dim); }

.lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 0; position: relative; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--edge); }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 62px; display: grid; place-items: center;
  background: rgba(14,11,9,.8); border: 1px solid var(--edge); border-radius: 2px;
  cursor: pointer; font-size: 26px; line-height: 1; color: var(--bone-dim);
}
.lb__nav:hover { color: var(--bone); border-color: var(--plank); background: rgba(14,11,9,.95); }
.lb__nav--prev { left: 12px; }
.lb__nav--next { right: 12px; }
.lb__nav[hidden] { display: none; }
body.lb-open { overflow: hidden; }

/* ---------------------------------------------------------------- 20 home */
/* The hero: a boarded window. The planks carry the three things you install. */
.hero { max-width: none !important; margin: 0 0 46px; }
.hero__in { max-width: var(--maxw); }
.hero__kick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin: 0 0 16px;
  font: 600 11px/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--bone-faint);
}
.hero__kick b { color: var(--blood-hi); font-weight: 700; }
.hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--emerald); }
.hero__h {
  margin: 0 0 16px;
  font: 800 clamp(42px, 7.4vw, 82px)/.9 var(--f-display);
  letter-spacing: .004em; text-transform: uppercase; color: #FBF6EC;
}
.hero__h em { display: block; font-style: normal; color: var(--emerald); }
.hero__lede { margin: 0 0 26px; font-size: 19px; line-height: 1.55; color: var(--bone-dim); max-width: 60ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 11px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--r); text-decoration: none;
  font: 700 14px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid transparent; transition: all .15s var(--ease);
}
.btn--primary { background: var(--emerald); color: #06140D; border-color: var(--emerald); }
.btn--primary:hover { background: var(--emerald-hi); color: #06140D; transform: translateY(-2px); }
.btn--ghost { border-color: var(--edge); color: var(--bone); background: var(--panel); }
.btn--ghost:hover { border-color: var(--plank); color: var(--bone); background: var(--panel-2); transform: translateY(-2px); }
.btn--blood { border-color: var(--blood-dim); color: #F0AFAB; background: rgba(216,54,47,.08); }
.btn--blood:hover { border-color: var(--blood); color: #FFD3D0; transform: translateY(-2px); }

/* the window */
.window {
  position: relative; margin: 0 0 44px; max-width: var(--maxw);
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--panel); padding: 15px;
}
.window__frame {
  position: relative; border-radius: 2px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(216,54,47,.20), transparent 58%),
    linear-gradient(180deg, #060505 0%, #0C0908 62%, #050404 100%);
  border: 1px solid #000;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
  padding: 30px 18px;
  display: flex; flex-direction: column; gap: 11px;
}
.window__eyes { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.window__eyes i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--blood); box-shadow: 0 0 7px 2px rgba(216,54,47,.55);
  animation: blink 5.6s infinite;
}
.window__eyes i:nth-child(1) { left: 17%; top: 30%; animation-delay: .2s; }
.window__eyes i:nth-child(2) { left: 20.4%; top: 30%; animation-delay: .2s; }
.window__eyes i:nth-child(3) { left: 71%; top: 58%; animation-delay: 2.7s; }
.window__eyes i:nth-child(4) { left: 74%; top: 58%; animation-delay: 2.7s; }
@keyframes blink { 0%,44%,52%,100% { opacity: .9; } 47%,49% { opacity: 0; } }

.board {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 13px 18px; border-radius: 2px;
  background-color: #4A3320; background-image: var(--grain);
  border: 1px solid var(--plank-lo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 9px rgba(0,0,0,.55);
  animation: nail .5s var(--ease) backwards;
}
.board:nth-child(1) { transform: rotate(-.7deg); animation-delay: .06s; }
.board:nth-child(2) { transform: rotate(.5deg);  animation-delay: .2s; }
.board:nth-child(3) { transform: rotate(-.35deg); animation-delay: .34s; }
@keyframes nail {
  0%   { opacity: 0; transform: translateX(-26px) rotate(-5deg); }
  100% { opacity: 1; }
}
.board__nails { position: absolute; inset: 0; pointer-events: none; }
.board__nails i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #C3BCAF, var(--nail) 60%, #2E2A24);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.board__nails i:nth-child(1) { left: 7px; top: 8px; }
.board__nails i:nth-child(2) { left: 7px; bottom: 8px; }
.board__nails i:nth-child(3) { right: 7px; top: 8px; }
.board__nails i:nth-child(4) { right: 7px; bottom: 8px; }
.board__n {
  flex: none; width: 26px; text-align: center;
  font: 700 14px/1 var(--f-mono); letter-spacing: .03em;
  color: #F2E2C8; text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.board__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board__t { font: 600 15.5px/1.2 var(--f-body); color: #FBF2E2; }
.board__s { font-size: 12.6px; line-height: 1.4; color: #C4A984; }
.board__size {
  margin-left: auto; flex: none;
  font: 600 11px/1 var(--f-mono); color: #C4A984; letter-spacing: .05em;
}
.window__cap {
  margin: 12px 2px 0; font-size: 12.6px; color: var(--bone-faint); text-align: center;
}

.factgrid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; margin: 22px 0; }
.fact { background: var(--panel); padding: 14px 16px; }
.fact__k { display: block; font: 600 10.5px/1 var(--f-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 7px; }
.fact__v { display: block; font: 700 19px/1.12 var(--f-display); letter-spacing: .025em; text-transform: uppercase; color: #F6EFE2; }
.fact__v--sm { font-size: 15px; }
.fact__n { display: block; margin-top: 4px; font-size: 12px; color: var(--bone-faint); }

/* ---------------------------------------------------------------- 21 misc */
.lede-block { font-size: 17.2px; line-height: 1.62; color: var(--bone-dim); margin-bottom: 22px; }
.hr { border: 0; border-top: 1px solid var(--edge); margin: 34px 0; max-width: var(--maxw); }

.dl {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start;
  padding: 20px; margin: 18px 0;
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel);
}
.dl--bep { border-left: 3px solid var(--blood); }
.dl--mod { border-left: 3px solid var(--emerald); }
.dl--box { border-left: 3px solid #D9922F; }
.dl__h { margin: 0 0 4px; font: 700 22px/1.1 var(--f-display); letter-spacing: .022em; text-transform: uppercase; color: #FBF6EC; }
.dl__sub { margin: 0 0 13px; font-size: 14px; color: var(--bone-dim); }
.dl__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.dl__tag {
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .07em;
  padding: 5px 8px; border-radius: 2px; border: 1px solid var(--edge);
  color: var(--bone-dim); background: rgba(255,255,255,.02);
}
.dl__hash { font: 400 11.4px/1.5 var(--f-mono); color: var(--bone-faint); word-break: break-all; margin: 0; }
.dl__hash b { color: var(--bone-dim); font-weight: 600; }
.dl__acts { display: flex; flex-direction: column; gap: 8px; min-width: 168px; }
.dl__acts .btn { justify-content: center; }

.mirror {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; margin: 20px 0; border-radius: var(--r);
  border: 1px solid var(--emerald-dim); background: rgba(53,208,138,.055);
}
.mirror__ic { flex: none; color: var(--emerald); margin-top: 2px; }
.mirror__h { margin: 0 0 5px; font: 600 15.5px/1.35 var(--f-body); color: #F6EFE2; }
.mirror p { font-size: 15px; }
.mirror > div > :last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li {
  display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; align-items: start;
  padding: 12px 15px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel);
  margin: 0; font-size: 15.2px;
}
.checklist li::before {
  content: "\2713"; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(53,208,138,.16); color: var(--emerald);
  font-size: 11px; font-weight: 700; margin-top: 1px;
}
.checklist b { display: block; color: #F6EFE2; font-weight: 600; margin-bottom: 2px; }
.checklist span { color: var(--bone-dim); }

.keyline { color: var(--emerald); font-weight: 600; }
.badline { color: var(--blood-hi); font-weight: 600; }

/* ---------------------------------------------------------------- 22 responsive */
@media (max-width: 1080px) {
  :root { --rail-w: 232px; }
  .plank__t { font-size: 13.4px; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .navtoggle { display: flex; }
  .top__meta { display: none; }
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(300px, 84vw); height: 100vh;
    border-right: 1px solid var(--plank-lo);
    box-shadow: 24px 0 60px rgba(0,0,0,.7);
    transform: translateX(-102%); transition: transform .22s var(--ease);
    padding-top: 68px;
  }
  .rail.is-open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(5,4,3,.68);
  }
  .main { padding-top: 30px; }
  .vs { grid-template-columns: minmax(0, 1fr); }
  .foot__col--wide { grid-column: span 1; }
  .dl { grid-template-columns: minmax(0,1fr); }
  .dl__acts { min-width: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .brand__sub { display: none; }
  .phead__h { font-size: clamp(29px, 9vw, 40px); }
  .step { grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
  .step__n { width: 36px; height: 30px; font-size: 11.5px; }
  .step::before { left: 17px; }
  .pager { grid-template-columns: minmax(0,1fr); }
  .pager__link--next { text-align: left; }
  .board { flex-wrap: wrap; gap: 10px; padding: 12px 15px; }
  .board__size { margin-left: 0; width: 100%; }
  .lb__bar { flex-wrap: wrap; gap: 9px; }
  .lb__cap { width: 100%; font-size: 12.6px; }
  .lb__nav { width: 34px; height: 50px; }
  .code__pre { font-size: 12.4px; }
  .tree { font-size: 12px; }
}

/* ---------------------------------------------------------------- 23 motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .board { animation: none; opacity: 1; }
  .window__eyes i { animation: none; }
}

/* ---------------------------------------------------------------- 24 print */
@media print {
  .top, .rail, .pager, .navtoggle, .lb, .shot__zoom, .code__copy { display: none !important; }
  body { background: #fff; color: #000; }
  .shell { display: block; }
  .main { padding: 0; }
  .main > *, .pager { max-width: none; }
  .card, .call, .code, .tree, .faq, .checklist li { break-inside: avoid; }
}