:root{--gold:#f3c46b;--gold2:#c8913c;--ink:#fff7e6;--red:#c23a2b;--glass:rgba(18,10,6,.58)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0604;color:var(--ink);font:16px/1.55 Georgia,'Iowan Old Style',serif;overflow:hidden}
a{color:var(--gold)}button{font:inherit;cursor:pointer}
.bg{position:fixed;inset:-3%;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease,transform 14s ease-out;filter:saturate(1.15) contrast(1.05)}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(5,2,1,.82) 100%),linear-gradient(transparent 60%,rgba(5,2,1,.7))}
#motes{position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen}
#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:10px 18px;z-index:5;background:linear-gradient(rgba(5,2,1,.85),transparent)}
.brand{letter-spacing:.35em;font-size:13px;text-decoration:none;color:var(--gold);text-shadow:0 0 12px rgba(243,196,107,.6);white-space:nowrap}
#path{flex:1;display:flex;gap:4px;list-style:none;margin:0;padding:0;justify-content:center;flex-wrap:wrap}
#path li{width:30px;height:30px;border-radius:50%;background:center/cover;border:1.5px solid rgba(243,196,107,.35);opacity:.55;cursor:pointer;position:relative;transition:.3s}
#path li.seen{opacity:.95;border-color:var(--gold2)}#path li.on{opacity:1;border-color:var(--gold);box-shadow:0 0 14px var(--gold);transform:scale(1.18)}
#path li:hover::after{content:attr(data-n);position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;background:#000a;padding:1px 6px;border-radius:4px}
.hudbtns button{background:rgba(0,0,0,.45);color:var(--ink);border:1px solid rgba(243,196,107,.4);border-radius:20px;padding:5px 12px;font-size:13px;margin-left:4px}
.hudbtns .red{border-color:var(--red);color:#ffb3a8}
#scene{position:fixed;inset:64px 0 62px 0;overflow:auto;display:flex;justify-content:center;padding:18px;z-index:3}
#guide{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:linear-gradient(transparent,rgba(5,2,1,.9))}
#guide button{background:linear-gradient(#f6d58f,#c8913c);color:#2a1606;border:0;border-radius:24px;padding:9px 20px;font-weight:bold;box-shadow:0 0 18px rgba(243,196,107,.35)}
#guide button:disabled{opacity:.3}#where{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#f3e0b8}
.glass{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(243,196,107,.28);border-radius:18px;padding:22px 26px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
h1,h2{font-weight:normal;margin:.15em 0;text-shadow:0 0 30px rgba(243,196,107,.55)}h1{font-size:clamp(54px,10vw,120px);letter-spacing:.25em}h2{font-size:clamp(32px,5vw,54px);letter-spacing:.06em}
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.gate{max-width:640px;margin:auto;text-align:center}
.ring{width:220px;height:220px;margin:0 auto 6px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 40px var(--gold),inset 0 0 40px var(--gold2);animation:spin 18s linear infinite;background:conic-gradient(from 0deg,transparent,rgba(243,196,107,.35),transparent 30%,transparent 50%,rgba(243,196,107,.35),transparent 80%)}
@keyframes spin{to{transform:rotate(360deg)}}
.cta{display:inline-block;margin-top:12px;background:linear-gradient(#f6d58f,#c8913c);color:#2a1606;border:0;border-radius:30px;padding:12px 30px;font-size:18px;box-shadow:0 0 30px rgba(243,196,107,.5);text-decoration:none}
.room{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(280px,1fr);gap:18px;max-width:1180px;width:100%;align-content:start}
@media(max-width:820px){.room{grid-template-columns:1fr}#path li{width:20px;height:20px}.brand{display:none}}
.hero{border-radius:18px;overflow:hidden;position:relative;min-height:300px;background:center/cover;border:1px solid rgba(243,196,107,.35);box-shadow:0 0 50px rgba(243,196,107,.18)}
.hero .kb{position:absolute;inset:0;background:inherit;background-size:cover;animation:kb 22s ease-in-out infinite alternate}@keyframes kb{to{transform:scale(1.14) translate(-2%,-2%)}}
.hero .num{position:absolute;left:16px;bottom:10px;font-size:84px;line-height:1;color:rgba(255,240,200,.85);text-shadow:0 0 24px #000}
.hero .anim{position:absolute;right:14px;bottom:14px;background:#000a;border-radius:14px;padding:4px 12px;font-size:13px}
.shelf{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.book{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,240,200,.06);text-decoration:none;color:var(--ink);transition:.25s;border-left:6px solid var(--gold2)}
.book:hover{background:rgba(243,196,107,.2);transform:translateX(6px);box-shadow:0 0 18px rgba(243,196,107,.3)}
.book.banned{border-left-color:var(--red);background:rgba(194,58,43,.12)}.book.banned:hover{background:rgba(194,58,43,.3)}
.tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ffb3a8}
.links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.links a{font-size:13px;border:1px solid rgba(243,196,107,.45);padding:5px 12px;border-radius:20px;text-decoration:none}
.map{position:relative;width:min(78vh,92vw);aspect-ratio:1;margin:auto}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.vein{fill:none;stroke:url(#vg);stroke-width:.45;stroke-dasharray:2 1.5;animation:flow 3s linear infinite;opacity:.85}@keyframes flow{to{stroke-dashoffset:-7}}
.vein.path{stroke:#fff2c8;stroke-width:.25;stroke-dasharray:.6 1.2;opacity:.6}
.node{position:absolute;width:12.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:center/cover;border:2px solid var(--gold);box-shadow:0 0 22px rgba(243,196,107,.55);cursor:pointer;transition:.35s;animation:breathe 5s ease-in-out infinite}
.node:hover{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 40px var(--gold);z-index:2}
.node span{position:absolute;top:104%;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.12em;white-space:nowrap;text-shadow:0 0 6px #000,0 0 6px #000}
.node.core{width:20%}.node.halo{width:9%;border-style:dashed}.node.seen{border-color:#fff2c8}
@keyframes breathe{50%{box-shadow:0 0 34px rgba(243,196,107,.85)}}
.aeon-banner{grid-column:1/-1}.spine{display:inline-block;width:10px;height:18px;background:var(--red);border-radius:2px;vertical-align:middle;box-shadow:0 0 8px var(--red)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.poster{max-height:62vh;border-radius:14px;box-shadow:0 0 60px rgba(243,196,107,.4)}
.end{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:1100px}