/* THE READING ROOM: black void, white line geometry, pixel books. The dialogues hang as a constellation;
   the Archivist's notes stand side-on on a floating hyperspace shelf. */
@font-face{font-family:"Fraktur";src:url(/static/fonts/UnifrakturMaguntia.ttf) format("truetype");font-display:block}
@font-face{font-family:"Cinzel";src:url(/static/fonts/Cinzel.ttf) format("truetype");font-weight:400 900;font-display:block}
@font-face{font-family:"Pix";src:url(/static/nq/PressStart2P-Regular.ttf) format("truetype");font-display:block}
*{box-sizing:border-box}
html{background:#000;overflow-x:hidden}
body{margin:0;background:#000;color:#fff;font:16px/1.45 "Times New Roman",serif;overflow-x:hidden}
a{color:#9cf}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.floor{position:fixed;left:-50%;right:-50%;bottom:0;height:42vh;z-index:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 1px,transparent 1px 60px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0 1px,transparent 1px 60px);
  transform:perspective(320px) rotateX(62deg);transform-origin:bottom;animation:roll 4s linear infinite;
  -webkit-mask:linear-gradient(transparent,#000 65%);mask:linear-gradient(transparent,#000 65%)}
@keyframes roll{to{background-position:0 60px,0 60px}}
.ufo{position:fixed;z-index:1;width:84px;image-rendering:pixelated;pointer-events:none;left:-120px;top:20vh;opacity:0}
.ufo.go{animation:fly var(--dur,14s) linear forwards}
@keyframes fly{0%{left:-120px;opacity:1;transform:translateY(0)}25%{transform:translateY(-14px)}50%{transform:translateY(6px)}75%{transform:translateY(-10px)}100%{left:calc(100vw + 40px);opacity:1;transform:translateY(0)}}
.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:16px 16px 70px;text-align:center}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;font:10px "Pix",monospace;margin-bottom:14px}
.top a{color:#fff}
.top input{font:14px "Courier New",monospace;background:#000;color:#fff;border:1px solid #fff;padding:6px 8px;width:210px}
.hex{width:140px;height:140px;margin:0 auto -14px;display:block;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h1{margin:0;font:normal clamp(50px,9vw,100px)/1 "Fraktur",serif;color:#fff;text-shadow:3px 3px 0 #000,0 0 22px rgba(255,255,255,.35)}
.rule{position:relative;height:9px;width:min(520px,80%);margin:12px auto 6px;border-top:1px solid #fff;border-bottom:1px solid #fff}
.rule:before{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;border:1px solid #fff;background:#000;transform:translate(-50%,-50%) rotate(45deg)}
.tag{font:11px "Pix",monospace;letter-spacing:1px;margin:14px 0 6px}
.blink{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
h2{font:12px "Pix",monospace;letter-spacing:2px;margin:46px 0 6px}
h2:before,h2:after{content:"";display:inline-block;width:60px;height:1px;background:#fff;vertical-align:middle;margin:0 12px}
.h2sub{font:italic 15px "Times New Roman";color:#bbb;margin:0 0 10px}
/* the constellation */
.sky{position:relative;width:min(96vw,1000px);height:500px;margin:28px auto 0}
.sky svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sky line{stroke:#fff;stroke-width:1;opacity:.55;stroke-dasharray:4 4;animation:dash 6s linear infinite}
.sky line.lit{opacity:1;stroke-dasharray:none;stroke-width:2}
@keyframes dash{to{stroke-dashoffset:-40}}
.bk{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;color:#fff;font:inherit}
.bk img{display:block;width:110px;height:auto;margin:0 auto;image-rendering:pixelated;animation:float 3.5s ease-in-out infinite}
.bk:nth-of-type(2n) img{animation-delay:-1.7s}
@keyframes float{50%{transform:translateY(-8px)}}
.bk span{display:block;width:max-content;margin:8px auto 0;padding:2px 4px;background:#000;font:9px/1.5 "Pix",monospace;text-shadow:0 0 4px #000}
.bk:hover img,.bk.on img,.bk:focus-visible img{filter:drop-shadow(0 0 10px #fff) brightness(1.2)}
.bk:focus-visible{outline:0}
.gap{position:absolute;transform:translate(-50%,-50%);width:92px;height:122px;border:2px dashed #fff;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-decoration:none;font:10px/1.8 "Pix",monospace;background:#000}
.gap b{font-size:30px;color:#f33}
.gap:hover{background:#1a0000}
/* the catalogue card: an old encyclopedia CD-ROM entry, white rules on black */
.win{max-width:580px;margin:26px auto 0;border:1px solid #fff;outline:1px solid #fff;outline-offset:4px;background:#000;text-align:left;display:none;position:relative;z-index:3;padding:20px 24px 22px}
.win.on{display:block;animation:fadein .35s ease-out}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.win .cat{font:italic 13px "Times New Roman",serif;color:#aaa;letter-spacing:1px;text-transform:uppercase;font-style:normal;font-size:11px;border-bottom:1px solid #555;padding-bottom:6px;margin-bottom:10px}
.win .wt{margin:0 0 4px;font:normal 40px/1.05 "Fraktur",serif;color:#fff}
.win .meta{font:italic 15px "Times New Roman",serif;color:#bbb;margin-bottom:12px}
.win .d{font:17px/1.5 "Times New Roman",serif;color:#eee}
.win .warn{color:#ff8080;font-style:italic;margin-top:8px}
.win .warn:empty{display:none}
.win .wx{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;font:26px/1 "Times New Roman",serif;cursor:pointer;padding:2px 6px}
.win .wx:hover{color:#9cf}
.win a.open{display:inline-block;margin-top:16px;color:#9cf;font:17px "Times New Roman",serif;text-decoration:underline;text-underline-offset:3px}
.win a.open:hover{color:#fff}
/* the hyperspace shelf */
.shelfzone{position:relative;max-width:900px;margin:0 auto}
.row{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:300px;padding:54px 10px 0}
/* the notes: leather-bound volumes drawn in depth (a cylinder-shaded spine, a cream page block on top, a dark side face) */
.spine{--c:#333;--ink:#fff;--h:250px;--w:60px;--d:12px;flex:0 0 auto;position:relative;width:var(--w);height:var(--h);border:0;cursor:pointer;padding:14px 0 16px;color:var(--ink);margin-right:var(--d);
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 16%,rgba(255,255,255,.22) 40%,rgba(255,255,255,.06) 55%,transparent 70%,rgba(0,0,0,.65)),var(--c);
  border-radius:5px 5px 2px 2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),6px 10px 16px rgba(0,0,0,.8);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;transition:transform .35s cubic-bezier(.2,.8,.2,1.2),filter .35s;font:inherit}
.spine .edge{position:absolute;left:0;bottom:100%;width:100%;height:var(--d);transform-origin:bottom left;transform:skewX(-45deg);
  background:repeating-linear-gradient(90deg,#f3ead2 0 2px,#d8cba6 2px 3px);border:1px solid rgba(0,0,0,.6);border-bottom:0;border-radius:3px 3px 0 0}
.spine .side{position:absolute;left:100%;top:0;width:var(--d);height:100%;transform-origin:top left;transform:skewY(-45deg);
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.7)),var(--c);border-radius:0 3px 2px 0}
.spine:before,.spine:after{content:"";position:absolute;left:5px;right:5px;height:5px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);opacity:.9}
.spine:before{top:64px}.spine:after{bottom:22px}
.spine img{width:34px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 1px 0 #000)}
.spine .t{writing-mode:vertical-rl;transform:rotate(180deg);font:700 13px/1.15 "Cinzel",Georgia,serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6);margin-top:12px;max-height:calc(var(--h) - 130px)}
.spine:hover,.spine:focus-visible{transform:translateY(-14px) rotate(-1deg);outline:0;filter:brightness(1.15) drop-shadow(0 0 14px rgba(255,255,255,.35))}
.spine.out{transform:translateY(-32px) rotate(-3deg);filter:brightness(1.2) drop-shadow(0 0 20px rgba(160,220,255,.7))}
.ghost{flex:0 0 auto;width:var(--w);height:var(--h);border:1px dashed rgba(255,255,255,.35)}
.plank{position:relative;height:12px;margin:0 6px;border:2px solid #fff;background:repeating-linear-gradient(90deg,#000 0 10px,#111 10px 20px);box-shadow:0 0 22px rgba(140,200,255,.45)}
.plank:after{content:"";position:absolute;left:10%;right:10%;top:22px;height:1px;background:linear-gradient(90deg,transparent,#9cf,transparent);animation:hum 3s ease-in-out infinite}
@keyframes hum{50%{opacity:.3}}
.reader{margin:48px auto 0;font:13px "Courier New",monospace;color:#bbb}
.reader .ctr{display:inline-block;background:#000;border:1px inset #777;color:#3f3;font:15px "Courier New";padding:2px 8px;letter-spacing:3px;margin-left:6px}
.reader small{display:block;margin-top:8px;color:#777}
@media(max-width:700px){
  .top input{width:130px}
  .sky{height:640px}
  .bk img{width:84px}
  .gap{width:70px;height:94px;font-size:8px}
  .row::-webkit-scrollbar{display:none}
  .ghost{display:none}
  .row{justify-content:center;overflow:visible;gap:4px;padding:56px 0 0}
  .spine{--d:8px;width:calc(var(--w) * .8);height:calc(var(--h) * .86);gap:10px}
  .spine:before{top:54px}
  .spine img{width:28px}
  h2:before,h2:after{display:none}
  .spine .t{font-size:10.5px;letter-spacing:.8px;max-height:calc(var(--h) * .86 - 112px)}
}
@media(prefers-reduced-motion:reduce){.floor,.hex,.bk img,.sky line{animation:none}.ufo{display:none}}