/* ★ 2026-10-06 · Site-wide Macro Book style.
   Core rules lifted verbatim from macrobook.html (drawer + JRPG window system)
   so the portal pages read as pages of the same book. Site-only components
   are appended at the bottom. */
  /* ---- site drawer, retuned to the macro book palette ---- */
  :root{
    --site-ivory:#EFE7D6; --site-mist:#C4B8D8;
    --site-border-soft:rgba(232,200,120,0.14);
    --site-border:rgba(232,200,120,0.24);
    --font-meta:'Inter',sans-serif; --font-nav:'Cinzel',serif;
  }
  /* ★ 2026-10-07 · drawer rebuilt in the page's own dark-cosmic JRPG language:
     void + nebula + stars behind a gold-framed menu window, pixel type, ▶ cursor. */
  .menu-toggle{
    position:fixed; top:18px; right:18px; z-index:200;
    width:46px; height:46px; padding:0; cursor:pointer;
    background:#050310;
    border:3px solid #FFC83D;
    box-shadow:inset 0 0 0 2px #050310, inset 0 0 0 3px rgba(232,200,120,.42), 4px 4px 0 #34205E, 0 0 18px -4px rgba(184,124,255,.6);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    transition:transform .12s steps(2), box-shadow .12s steps(2), background .2s ease;
  }
  .menu-toggle:hover{ background:#100821; transform:translate(-2px,-2px);
    box-shadow:inset 0 0 0 2px #050310, inset 0 0 0 3px rgba(232,200,120,.42), 6px 6px 0 #34205E, 0 0 24px -2px rgba(184,124,255,.8); }
  .menu-toggle:focus-visible{ outline:2px solid #FFDF7A; outline-offset:3px; }
  .menu-toggle .bar{ display:block; width:18px; height:3px; background:#FFC83D; box-shadow:1px 1px 0 #34205E;
    transition:transform .25s steps(4), opacity .2s steps(2); transform-origin:center; }
  .menu-toggle.open{ border-color:#ED2038; }
  .menu-toggle.open .bar{ background:#FF8290; }
  .menu-toggle.open .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open .bar:nth-child(2){ opacity:0; }
  .menu-toggle.open .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .menu-backdrop{ position:fixed; inset:0; z-index:150;
    background:radial-gradient(ellipse at 100% 50%,rgba(52,32,94,.35),rgba(2,1,6,.82) 60%);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
  .menu-backdrop.open{ opacity:1; visibility:visible; }

  .menu-drawer{
    position:fixed; top:0; right:0; bottom:0; width:86%; max-width:400px; z-index:180;
    background:
      radial-gradient(1px 1px at 18% 12%,#fff,transparent), radial-gradient(1px 1px at 72% 8%,rgba(255,255,255,.7),transparent),
      radial-gradient(1.5px 1.5px at 88% 34%,#fff,transparent), radial-gradient(1px 1px at 34% 46%,rgba(255,255,255,.6),transparent),
      radial-gradient(1px 1px at 62% 58%,rgba(255,255,255,.8),transparent), radial-gradient(2px 2px at 12% 72%,#fff,transparent),
      radial-gradient(1px 1px at 82% 80%,rgba(255,255,255,.7),transparent), radial-gradient(1px 1px at 44% 92%,rgba(255,255,255,.6),transparent),
      radial-gradient(1.5px 1.5px at 92% 96%,#fff,transparent), radial-gradient(1px 1px at 6% 30%,rgba(255,255,255,.7),transparent),
      radial-gradient(ellipse at 90% 0%,rgba(74,45,138,.55),transparent 55%),
      radial-gradient(ellipse at 0% 100%,rgba(35,49,128,.35),transparent 55%),
      linear-gradient(180deg,#050310 0%,#0a0618 55%,#020104 100%);
    border-left:3px solid #FFC83D;
    box-shadow:inset 2px 0 0 #050310, inset 3px 0 0 rgba(232,200,120,.42), -24px 0 60px rgba(0,0,0,.75), -2px 0 40px -10px rgba(184,124,255,.45);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column; padding:84px 24px 30px; overflow-y:auto;
  }
  .menu-drawer.open{ transform:translateX(0); }
  .menu-drawer::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); }
  .menu-drawer > *{ position:relative; }
  .menu-eyebrow{ align-self:flex-start; font-family:'Press Start 2P',monospace; font-size:.5rem; line-height:1.9; letter-spacing:.04em;
    color:#050310; background:#FFC83D; padding:.42rem .6rem; margin-bottom:18px; text-transform:uppercase; }
  .menu-list{ list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:0; counter-reset:mnu;
    background:rgba(20,10,38,.88); border:3px solid #FFC83D;
    box-shadow:inset 0 0 0 2px #050310, inset 0 0 0 3px rgba(232,200,120,.42), 5px 5px 0 #34205E; }
  .menu-list li{ counter-increment:mnu; margin:0; opacity:0; transform:translateX(16px);
    transition:opacity .3s steps(3), transform .3s steps(3); border-bottom:2px solid rgba(139,105,43,.55); }
  .menu-list li:last-child{ border-bottom:none; }
  .menu-drawer.open .menu-list li{ opacity:1; transform:translateX(0); }
  .menu-drawer.open .menu-list li:nth-child(1){ transition-delay:.08s }
  .menu-drawer.open .menu-list li:nth-child(2){ transition-delay:.13s }
  .menu-drawer.open .menu-list li:nth-child(3){ transition-delay:.18s }
  .menu-drawer.open .menu-list li:nth-child(4){ transition-delay:.23s }
  .menu-drawer.open .menu-list li:nth-child(5){ transition-delay:.28s }
  .menu-drawer.open .menu-list li:nth-child(6){ transition-delay:.33s }
  .menu-drawer.open .menu-list li:nth-child(7){ transition-delay:.38s }
  .menu-link{ display:grid; grid-template-columns:1.1rem 2rem 1fr; align-items:center;
    font-family:'DotGothic16','Zen Kaku Gothic New',monospace; font-size:1.35rem; line-height:1.2; letter-spacing:.02em;
    text-transform:uppercase; color:#D2C9E2; text-decoration:none; padding:14px 14px 14px 10px; position:relative;
    transition:color .15s steps(2), background .15s steps(2); }
  .menu-link::before{ content:'▶'; font-size:.8rem; color:transparent; }
  .menu-link::after{ content:counter(mnu,decimal-leading-zero);
    font-family:'JetBrains Mono',monospace; font-size:.66rem; font-weight:700; color:#AEA1C4; }
  .menu-link{ grid-template-areas:"cur num txt"; }
  .menu-link::before{ grid-area:cur; } .menu-link::after{ grid-area:num; }
  .menu-link:hover{ color:#FFC83D; background:rgba(5,3,16,.7); }
  .menu-link:hover::before{ color:#FFC83D; }
  .menu-link.active{ color:#FFDF7A; background:#102955; box-shadow:inset 3px 0 #ED2038; text-shadow:2px 2px 0 #34205E; }
  .menu-link.active::before{ color:#FFDF7A; animation:blink 1.1s steps(2,start) infinite; }
  .menu-link.active::after{ color:#FFC83D; }
  .menu-link:focus-visible{ outline:2px solid #FFDF7A; outline-offset:-4px; }
  .menu-socials{ display:flex; gap:10px; justify-content:flex-start; margin-top:22px; padding:0; border:none; }
  .menu-socials a{ display:flex; align-items:center; justify-content:center; width:42px; height:42px;
    background:rgba(10,6,23,.94); border:2px solid #8B692B; color:#C4B8D8; text-decoration:none;
    transition:color .15s steps(2), border-color .15s steps(2), transform .12s steps(2); }
  .menu-socials a:hover{ color:#FFDF7A; border-color:#FFC83D; transform:translate(-2px,-2px); box-shadow:3px 3px 0 #34205E; }
  .menu-socials a:focus-visible{ outline:2px solid #FFDF7A; outline-offset:2px; }
  .menu-socials svg{ width:16px; height:16px; fill:currentColor; }
  /* player card injected by site-game.js */
  .menu-save{ margin-top:auto; padding-top:22px; }
  .menu-save .ms{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:12px 14px;
    background:rgba(10,6,23,.94); border:2px solid #8B692B; font-family:'Press Start 2P',monospace; font-size:.42rem; line-height:1.9; color:#AEA1C4; }
  .menu-save .ms b{ display:block; font-family:'DotGothic16',monospace; font-weight:400; font-size:1rem; color:#FFDF7A; letter-spacing:.02em; }
  .menu-save .gem{ width:18px; height:18px; margin:4px; transform:rotate(45deg); background:linear-gradient(135deg,#E7C9FF,#B87CFF 45%,#5B2E9C);
    box-shadow:0 0 0 2px #050310,0 0 0 3px #FFC83D,0 0 14px -2px #B87CFF; }
  @media (prefers-reduced-motion:reduce){ .menu-link.active::before{ animation:none; } }
  body.menu-open{ overflow:hidden; }

  /* keep the drawer button clear of the book's contents rail */
  @media (max-width:900px){ .menu-toggle{ top:14px; right:14px; } }

  /* footer link row added for the site build */
  .sitelinks{ margin-top:16px; }
  .sitelinks a{ color:#C4B8D8; text-decoration:none; }
  .sitelinks a:hover{ color:#FFD700; }
  .sitelinks .sep{ margin:0 8px; color:#9585B0; opacity:.6; }
:root{
  --void:#050310;
  --ground:#100821;
  --panel:rgba(20,10,38,.92);
  --panel-2:#251344;
  --panel-3:rgba(10,6,23,.94);
  --gold:#FFC83D;
  --gold-hi:#FFDF7A;
  --gold-dim:#9C8A64;
  --gold-deep:#8B692B;
  --blue:#2563FF;
  --blue-hi:#8AB8FF;
  --blue-deep:#102955;
  --red:#ED2038;
  --red-hi:#FF8290;
  --amethyst:#A972D6;
  --amethyst-dp:#34205E;
  --text:#F5EEDF;
  --text-dim:#D2C9E2;
  --muted:#AEA1C4;
  --crimson:#ED2038;
  --emerald:#4FBF87;
  --pixel:'DotGothic16','Zen Kaku Gothic New',monospace;
  --tiny:'Press Start 2P',monospace;
  --body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --rail:270px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.75;font-weight:400;
  background:var(--void);
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
}
.wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

/* Home-page starfield: two repeating depths, slow transform drift, white stars.
   Scroll and idle movement use separate elements so their transforms compose. */
.starfield{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 10%,rgba(74,45,138,.38),transparent 50%),
    radial-gradient(ellipse at 80% 70%,rgba(35,49,128,.18),transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(43,23,88,.48),transparent 60%),
    linear-gradient(180deg,#050310 0%,#0a0618 50%,#020104 100%);
}
.starfield::before{
  content:'';position:absolute;inset:0;background:#010103;
  opacity:var(--cosmic-depth,0);
}
.star-parallax{position:absolute;inset:0;will-change:transform}
.star-parallax span{
  display:block;position:absolute;inset:0 -900px -1800px 0;
  background-image:
    radial-gradient(1px 1px at 23% 17%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 67% 41%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 84% 73%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 12% 83%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 45% 28%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 91% 12%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 38% 64%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 76% 88%,rgba(255,255,255,.95),transparent),
    radial-gradient(1px 1px at 8% 38%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 58% 5%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.5px 1.5px at 4% 9%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 16% 52%,rgba(255,255,255,.75),transparent),
    radial-gradient(2px 2px at 29% 35%,rgba(255,255,255,1),transparent),
    radial-gradient(1px 1px at 34% 91%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 49% 76%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 54% 49%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 63% 62%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 72% 20%,rgba(255,255,255,.75),transparent),
    radial-gradient(2px 2px at 88% 48%,rgba(255,255,255,1),transparent),
    radial-gradient(1px 1px at 96% 93%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 7% 68%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 19% 96%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 31% 7%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 41% 44%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 47% 14%,rgba(255,255,255,.7),transparent),
    radial-gradient(2px 2px at 60% 84%,rgba(255,255,255,.95),transparent),
    radial-gradient(1px 1px at 69% 96%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 79% 56%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 85% 30%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 97% 66%,rgba(255,255,255,.9),transparent);
  background-repeat:repeat;background-size:600px 600px;
  --drift-end:-600px;--pulse-low:.35;--pulse-high:1;
  animation:star-drift 480s linear infinite,star-pulse 6s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.star-parallax:nth-of-type(2) span{
  background-size:900px 900px;--drift-end:-900px;--pulse-low:.25;--pulse-high:.85;
  animation-duration:1140s,9s;animation-direction:reverse,alternate;
  animation-delay:0s,-5s;
}
/* Same drift speeds as index.html (300px / 240s and 300px / 380s),
   but travel one whole repeating tile so the loop has no visible reset. */
@keyframes star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--drift-end),var(--drift-end),0)}}
@keyframes star-pulse{from{opacity:var(--pulse-low)}to{opacity:var(--pulse-high)}}
@media (prefers-reduced-motion:reduce){
  .star-parallax{transform:none!important;will-change:auto}
  .star-parallax span{animation:none;opacity:.65;transform:none;will-change:auto}
}

/* ===== JRPG WINDOW ===== */
.win{
  background:var(--panel);
  border:3px solid var(--gold);
  box-shadow:inset 0 0 0 2px var(--void), inset 0 0 0 3px rgba(232,200,120,.42);
}

/* ===== MENU RAIL ===== */
.rail{
  background:linear-gradient(180deg,#0a0412,#08030e);border-right:3px solid var(--gold-deep);
  padding:22px 18px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.railmark{font-family:var(--pixel);font-size:1.5rem;line-height:1.05;color:var(--gold);margin:0;letter-spacing:.02em;text-shadow:2px 2px 0 var(--amethyst-dp)}
.railmark span{display:block;font-family:var(--tiny);font-size:.42rem;line-height:1.9;letter-spacing:.06em;color:var(--muted);margin-top:11px}
.build{
  display:inline-block;font-family:var(--tiny);font-size:.5rem;line-height:1.6;letter-spacing:.02em;
  color:var(--gold-hi);background:var(--panel-3);border:2px solid var(--gold);
  padding:.42rem .5rem;margin:16px 0 22px;
}
.railttl{font-family:var(--tiny);font-size:.44rem;letter-spacing:.06em;color:var(--blue-hi);margin:0 0 10px;line-height:1.8}
.rail nav{display:flex;flex-direction:column;gap:1px}
.rail a{
  display:grid;grid-template-columns:1rem 2.2rem 1fr;align-items:baseline;
  text-decoration:none;color:var(--text-dim);padding:.4rem .3rem;
  font-size:.87rem;font-weight:500;line-height:1.34;
}
.rail a .cur{font-family:var(--pixel);color:transparent;font-size:.8rem}
.rail a .num{font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--muted)}
.rail a:hover{color:var(--gold);background:var(--panel-3)}
.rail a:hover .cur{color:var(--gold)}
.rail a.on{background:var(--blue-deep);color:var(--gold-hi);box-shadow:inset 3px 0 var(--red)}
.rail a.on .cur{color:var(--gold-hi);animation:blink 1.1s steps(2,start) infinite}
.rail a.on .num{color:var(--gold)}
.rail a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.railfoot{margin-top:24px;padding-top:14px;border-top:2px solid var(--gold-deep);font-family:var(--mono);font-size:.58rem;line-height:2;letter-spacing:.08em;color:var(--muted)}

/* ===== PAGE ===== */
main{padding:0 0 90px;background:transparent}
.col{max-width:74ch;margin:0 auto;padding:0 44px}

/* cover */
.cover{padding:64px 0 52px;border-bottom:3px solid var(--gold-deep);
  background:linear-gradient(180deg,rgba(3,1,8,.62),rgba(6,2,13,.28))}
.kicker{display:inline-block;font-family:var(--tiny);font-size:.5rem;line-height:1.9;letter-spacing:.04em;color:var(--void);background:var(--gold);padding:.42rem .6rem;margin:0 0 24px}
h1{
  font-family:var(--pixel);font-weight:400;color:var(--text);
  font-size:clamp(2.6rem,7.4vw,4.9rem);line-height:.98;letter-spacing:.01em;
  margin:0;text-shadow:4px 4px 0 var(--blue-deep);text-wrap:balance;
}
h1::after{content:'';display:block;width:min(100%,360px);height:5px;margin-top:25px;
  background:linear-gradient(90deg,var(--red) 0 31%,transparent 31% 34%,var(--blue) 34% 65%,transparent 65% 68%,var(--gold) 68%);transform:skewX(-24deg)}
.h1sub{display:block;font-family:var(--tiny);font-size:clamp(.52rem,1.5vw,.78rem);line-height:2;letter-spacing:.04em;color:var(--blue-hi);margin-top:20px}
.covertags{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0}
.tag{font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.04em;padding:.4rem .5rem;border:2px solid}
.tag.g{color:var(--gold);border-color:var(--gold);background:rgba(232,200,120,.08)}
.tag.p{color:var(--blue-hi);border-color:var(--blue);background:rgba(37,99,255,.12)}
.tag.hi{color:var(--void);border-color:var(--gold-hi);background:var(--gold-hi)}
.deck{font-size:1.07rem;line-height:1.75;color:var(--text-dim);margin:28px 0 0;max-width:58ch}
.covermeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:32px;background:var(--panel);border:3px solid var(--gold);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(232,200,120,.42)}
.covermeta div{padding:14px 16px;border-right:2px solid var(--gold-deep)}
.covermeta div:last-child{border-right:none}
.covermeta .k{font-family:var(--tiny);font-size:.4rem;line-height:2;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:7px}
.covermeta .v{font-family:var(--pixel);font-size:1.15rem;color:var(--gold-hi);line-height:1}

/* sections */
section{padding:60px 0 0;scroll-margin-top:12px}
.parthead{margin-bottom:32px}
.partnum{display:inline-block;font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.05em;color:var(--gold-hi);border:2px solid var(--gold-deep);background:var(--panel-3);padding:.4rem .55rem;margin-bottom:16px}
section:nth-of-type(3n+2) .partnum{color:var(--blue-hi);border-color:var(--blue)}
section:nth-of-type(3n) .partnum{color:var(--red-hi);border-color:var(--red)}
h2{
  font-family:var(--pixel);font-weight:400;color:var(--gold);
  font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.02;margin:0;
  padding-bottom:14px;border-bottom:3px solid;border-image:linear-gradient(90deg,var(--red) 0 32%,var(--blue) 32% 66%,var(--gold) 66%) 1;
  text-shadow:3px 3px 0 var(--amethyst-dp);text-wrap:balance;
}
.lede{font-size:1.01rem;color:var(--text-dim);margin:18px 0 0;max-width:60ch}
h3{
  font-family:var(--pixel);font-weight:400;font-size:1.22rem;line-height:1.3;
  margin:42px 0 12px;color:var(--gold);padding-left:14px;border-left:5px solid var(--red);
}
h4{font-family:var(--mono);font-weight:700;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:28px 0 8px}
p{margin:0 0 17px}
a{color:var(--gold-hi)}
strong{font-weight:700;color:var(--gold)}
em{color:var(--text-dim)}
.term{font-family:var(--mono);font-size:.85em;font-weight:700;color:var(--blue-hi);letter-spacing:-.01em}
ul,ol{margin:0 0 17px;padding-left:1.25rem}
li{margin-bottom:7px}
li::marker{color:var(--gold)}

/* callout window */
.box{margin:26px 0;background:var(--panel);border:3px solid var(--gold);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(232,200,120,.42)}
.boxttl{font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.05em;color:var(--gold-hi);padding:.7rem .95rem .55rem;border-bottom:2px solid var(--gold-deep)}
.boxbody{padding:15px 18px}
.box p:last-child{margin-bottom:0}
.box.amethyst{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(37,99,255,.35)}
.box.amethyst .boxttl{color:var(--blue-hi);border-bottom-color:var(--blue-deep)}

/* tables */
.tablewrap{overflow-x:auto;margin:22px 0 26px;background:var(--panel-3);border:3px solid var(--gold-deep)}
table{border-collapse:collapse;width:100%;font-size:.85rem;font-variant-numeric:tabular-nums}
th{font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:var(--blue-deep);color:var(--gold-hi);text-align:left;padding:9px 14px;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid rgba(232,200,120,.14);vertical-align:top;color:var(--text-dim);line-height:1.55}
tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(169,114,214,.07)}
td:first-child{color:var(--gold);font-weight:700;white-space:nowrap}
.rn{font-family:var(--mono);font-size:.75rem;color:var(--blue-hi);margin-right:.45rem}
.num-c{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--gold-hi);white-space:nowrap}

/* type grid */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:5px;margin:22px 0}
.type{border:2px solid var(--gold-deep);background:var(--panel-3);padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.swatch{height:14px;border:2px solid rgba(0,0,0,.5)}
.type .nm{font-family:var(--pixel);font-size:.92rem;line-height:1.1;color:var(--text)}
.type .gr{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;color:var(--muted)}
.ultimate{border:3px solid var(--gold-hi);background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(36,21,57,.9));box-shadow:0 0 0 3px var(--void),0 0 0 5px rgba(255,215,0,.35);padding:24px 26px;margin:36px 0 26px}
.ultimate h3{margin:0 0 12px;border-left:none;padding-left:0;color:var(--gold-hi);font-size:1.45rem;text-shadow:2px 2px 0 var(--amethyst-dp)}
.ultimate p{margin:0 0 10px;font-size:.95rem;color:var(--text-dim)}
.ultimate p:last-child{margin:0}

/* move slots — the 2x2 kit */
.slots{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:22px 0}
.slot{border:2px solid var(--gold-deep);background:var(--panel-3);padding:14px 16px}
.slot .code{font-family:var(--tiny);font-size:.44rem;line-height:1.9;letter-spacing:.04em;color:var(--void);background:var(--gold);padding:.34rem .42rem}
.slot .nm{font-family:var(--pixel);font-size:1.15rem;color:var(--gold);margin:11px 0 7px}
.slot p{margin:0;font-size:.85rem;color:var(--text-dim);line-height:1.55}

/* meters */
.meters{display:grid;gap:5px;margin:22px 0}
.meter{border:2px solid var(--gold-deep);background:var(--panel-3);padding:13px 16px;display:grid;grid-template-columns:2.4rem 1fr;gap:14px;align-items:start}
.meter .ico{font-size:1.4rem;line-height:1.2;text-align:center}
.meter .nm{font-family:var(--pixel);font-size:1rem;color:var(--gold);margin-bottom:5px}
.meter p{margin:0;font-size:.86rem;color:var(--text-dim);line-height:1.55}

/* tips */
.tip{border:2px solid var(--gold-deep);background:var(--panel-3);margin:0 0 5px;display:grid;grid-template-columns:2.8rem 1fr}
.tipnum{background:var(--amethyst-dp);color:var(--gold-hi);font-family:var(--mono);font-weight:700;font-size:.72rem;display:grid;place-items:center;border-right:2px solid var(--gold-deep)}
.tipbody{padding:13px 16px}
.tipbody h4{margin:0 0 6px;font-family:var(--pixel);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--gold)}
.tipbody p{margin:0;font-size:.89rem;color:var(--text-dim);line-height:1.6}

/* spoilers */
details{border:3px solid var(--crimson);background:var(--panel-3);margin:26px 0}
summary{cursor:pointer;padding:.85rem 1rem;font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.05em;color:var(--crimson);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▶ "}
details[open] summary::before{content:"▼ "}
summary:hover{color:var(--gold-hi)}
summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
.spoilbody{padding:4px 18px 18px;border-top:2px solid rgba(192,57,43,.4)}
.spoilbody p:last-child,.spoilbody ol:last-child,.spoilbody ul:last-child{margin-bottom:0}

footer{border-top:3px solid var(--gold-deep);margin-top:72px;background:rgba(3,1,7,.88)}
footer .col{padding-top:34px;padding-bottom:40px}
footer p{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--muted);margin:0 0 7px;line-height:2}
footer .stamp{display:inline-block;font-family:var(--tiny);font-size:.5rem;line-height:1.7;color:var(--gold-hi);border:2px solid var(--gold);background:var(--panel-3);padding:.42rem .55rem;margin-bottom:14px}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:none;border-bottom:3px solid var(--gold-deep);padding:20px 24px 24px}
  .rail nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:0 12px}
  .col{padding:0 24px}
  .slots{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rail a.on .cur{animation:none}}

/* figures */
.fig{margin:26px 0;background:var(--panel-3);border:3px solid var(--gold-deep);padding:16px 18px 18px}
.figttl{font-family:var(--tiny);font-size:.44rem;line-height:1.9;letter-spacing:.05em;color:var(--gold-hi);margin:0 0 14px}
.figscroll{overflow-x:auto}
.fig svg{display:block;width:100%;height:auto}
.figcap{font-family:var(--mono);font-size:.63rem;letter-spacing:.07em;color:var(--muted);margin:14px 0 0;line-height:1.85}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ★★ v0.96.79 · .lock / .typegrid / .closer were used in markup with NO rules.
   .lock shipped unstyled in v0.96.77 — the canon-lock panels have been rendering
   as bare text on the live site since then.  Modelled on .box so the two read as
   siblings, with the accent flipped to signal "this one is a rule, not a note". */
.lock{margin:26px 0;background:var(--panel-3);border:2px solid var(--red);
  border-left:6px solid var(--red);padding:14px 18px 16px}
.lock-t{font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.05em;
  color:var(--red-hi);display:block;margin-bottom:.55rem}
.lock p{margin:0;color:var(--text-dim)}
.typegrid{margin:20px 0;padding:15px 18px;background:var(--panel);
  border:2px solid var(--gold-deep);text-align:center}
.typegrid p{margin:0;line-height:2.05;letter-spacing:.02em}
.closer{margin-top:30px;padding-top:22px;border-top:2px solid var(--gold-deep);
  font-size:1.05rem;line-height:1.9;color:var(--text-dim)}
.closer strong{color:var(--gold-hi);font-size:1.15rem;letter-spacing:.04em}


/* ===================================================================
   SITE COMPONENTS · built from the book's own parts (.win, .partnum, .tag)
   =================================================================== */

/* buttons */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.btn{display:inline-block;font-family:var(--tiny);font-size:.56rem;line-height:1.8;letter-spacing:.05em;
  text-decoration:none;padding:.85rem 1.1rem;border:3px solid var(--gold);
  color:var(--void);background:var(--gold);box-shadow:4px 4px 0 var(--amethyst-dp);
  transition:transform .12s steps(2), box-shadow .12s steps(2), background .2s ease}
.btn:hover{background:var(--gold-hi);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--amethyst-dp);color:var(--void)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--amethyst-dp)}
.btn.ghost{background:var(--panel-3);color:var(--blue-hi);border-color:var(--blue);box-shadow:4px 4px 0 var(--blue-deep)}
.btn.ghost:hover{background:var(--blue-deep);color:var(--gold-hi)}
.btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* door cards (home) */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.door{display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:var(--panel);border:3px solid var(--gold);
  box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(232,200,120,.42);
  transition:transform .12s steps(2), box-shadow .12s steps(2)}
.door:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(232,200,120,.42),6px 6px 0 var(--amethyst-dp)}
.door.blue{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(37,99,255,.35)}
.door .doorttl{font-family:var(--tiny);font-size:.46rem;line-height:1.9;letter-spacing:.05em;color:var(--gold-hi);
  padding:.7rem .95rem .55rem;border-bottom:2px solid var(--gold-deep)}
.door.blue .doorttl{color:var(--blue-hi);border-bottom-color:var(--blue-deep)}
.door .doorbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.door .nm{font-family:var(--pixel);font-size:1.8rem;line-height:1;color:var(--gold);text-shadow:3px 3px 0 var(--amethyst-dp)}
.door p{margin:0;font-size:.92rem;color:var(--text-dim);line-height:1.6}
.door .stat{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px solid rgba(232,200,120,.14)}
.door .go{font-family:var(--tiny);font-size:.48rem;letter-spacing:.05em;color:var(--gold-hi)}
.door .go .cur{animation:blink 1.1s steps(2,start) infinite}

/* pull quote */
.quote{margin:28px 0;padding:20px 22px;background:var(--panel-3);border:2px solid var(--gold-deep);border-left:6px solid var(--gold);
  font-family:var(--pixel);font-size:1.3rem;line-height:1.45;color:var(--gold-hi);text-shadow:2px 2px 0 var(--amethyst-dp)}

/* card grid (factionlands, inhabitants) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:24px 0}
.card{background:var(--panel-3);border:2px solid var(--gold-deep);padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;
  border-top:4px solid var(--c,var(--gold))}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .code{font-family:var(--tiny);font-size:.42rem;line-height:1.9;letter-spacing:.04em;color:var(--void);background:var(--c,var(--gold));padding:.28rem .42rem}
.card .meta{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card .gemdot{width:14px;height:14px;transform:rotate(45deg);background:var(--c,var(--gold));
  box-shadow:0 0 0 2px var(--void),0 0 0 3px rgba(232,200,120,.45),0 0 12px -2px var(--c,var(--gold))}
.card .nm{font-family:var(--pixel);font-size:1.25rem;line-height:1.1;color:var(--gold);margin-top:4px}
.card .sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--blue-hi)}
.card p{margin:4px 0 0;font-size:.86rem;color:var(--text-dim);line-height:1.55}
.card em{color:var(--red-hi);font-style:normal}

/* triad */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}
.triad .slot .motto{font-family:var(--pixel);font-size:.95rem;color:var(--blue-hi);margin-top:12px}

/* versus (the hunt) */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.versus .box{margin:0}
.versus .box.red{border-color:var(--red);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 3px rgba(237,32,56,.35)}
.versus .box.red .boxttl{color:var(--red-hi);border-bottom-color:rgba(237,32,56,.4)}
.versus .nm{font-family:var(--pixel);font-size:1.4rem;color:var(--gold);margin:0 0 8px}
.roster{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:5px}
.roster li{margin:0;font-family:var(--tiny);font-size:.42rem;line-height:1.9;letter-spacing:.04em;padding:.3rem .45rem;
  border:2px solid var(--gold-deep);color:var(--text-dim);background:var(--panel-3)}
.roster li.lead{color:var(--gold-hi);border-color:var(--gold)}

/* corefall figure */
.corefall{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center}
.corefall svg{max-width:200px}
.corefall p{margin:0;color:var(--text-dim)}
.arches td:nth-child(2){color:var(--text)}
.arches tr.missing td{color:var(--red-hi);font-style:italic}

@media (max-width:700px){
  .doors,.versus,.triad{grid-template-columns:1fr}
  .corefall{grid-template-columns:1fr;justify-items:center}
}

/* ★ 2026-10-06 · locked worlds / coming-soon doors */
.doors.three{grid-template-columns:repeat(3,1fr)}
.door.soon{border-style:dashed;border-color:var(--gold-deep);box-shadow:none;cursor:default}
.door.soon:hover{transform:none;box-shadow:none}
.door.soon .nm{color:var(--text-dim)}
.door.soon .go{color:var(--muted)}
.door.soon .go .cur{animation:none}
.worldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:24px 0}
.world{background:var(--panel-3);border:2px dashed rgba(156,138,100,.55);padding:11px 12px 12px;display:flex;flex-direction:column;gap:4px;opacity:.72}
.world .top{display:flex;justify-content:space-between;align-items:center}
.world .no{font-family:var(--mono);font-weight:700;font-size:.66rem;color:var(--muted)}
.world .lk{font-family:var(--tiny);font-size:.38rem;letter-spacing:.05em;color:var(--red-hi)}
.world .nm{font-family:var(--pixel);font-size:1.02rem;color:var(--text-dim);line-height:1.15}
.world .arch{font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;color:var(--muted)}
@media (max-width:900px){.doors.three{grid-template-columns:1fr}}

/* ★ 2026-10-08 · the Macro Book guidebook panel (home, games, books) */
.guidebook{ display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:18px 22px; margin:26px 0;
  text-decoration:none; color:var(--text); }
.guidebook .gb-book{ width:46px; height:56px; display:block; }
.guidebook .gb-book svg{ width:100%; height:100%; display:block; }
.guidebook .gb-k{ display:block; font-family:var(--tiny); font-size:.46rem; line-height:1.9; letter-spacing:.05em; color:var(--blue-hi); }
.guidebook .gb-nm{ display:block; font-family:var(--pixel); font-size:1.5rem; line-height:1.1; color:var(--gold); margin:4px 0 6px; }
.guidebook .gb-p{ display:block; font-size:.9rem; line-height:1.55; color:var(--text-dim); }
.guidebook .gb-go{ font-family:var(--tiny); font-size:.5rem; letter-spacing:.05em; color:var(--gold-hi); white-space:nowrap; }
.guidebook:hover .gb-go{ color:var(--text); }
@media (max-width:640px){ .guidebook{ grid-template-columns:auto 1fr; } .guidebook .gb-go{ grid-column:1 / -1; } }

/* ★ 2026-10-15 · dev door (games-dev.js) */
.devdoor{ width:min(420px,calc(100% - 32px)); padding:0; color:var(--text); background:var(--panel); border:3px solid var(--gold); }
.devdoor::backdrop{ background:rgba(0,0,0,.8); }
.devdoor-in{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px; margin:0; }
.devdoor-k{ margin:0; font-family:var(--tiny); font-size:.46rem; letter-spacing:.05em; color:var(--blue-hi); }
.devdoor-t{ margin:0; padding:0 0 10px; font-family:var(--pixel); font-size:1.6rem; color:var(--gold); }
.devdoor-l{ display:flex; flex-direction:column; gap:6px; margin:0; }
.devdoor-l span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--muted); }
.devdoor-l input{ font:inherit; font-size:1rem; color:var(--text); background:var(--panel-3); border:1px solid var(--gold-deep); padding:.7rem .8rem; min-height:44px; }
.devdoor-l input:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }
.devdoor-err{ margin:0; font-size:.85rem; color:var(--red-hi); }
.devdoor-btns{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
.devdoor-btns .btn{ cursor:pointer; }
.devdoor.shake{ animation:gm-shake .42s steps(6); }