:root{
  --ink:#d9d7d1; --dim:#7d7b76; --line:#5a5855; --bg:#0a0a0a;
  --paper:#f3f1eb; --paper-ink:#141414; --paper-dim:#b5b2aa;
  --cell:11px; --row:22px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:14px/1.5 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;min-height:100vh}
a{color:inherit;text-decoration:none}
a:hover{border-bottom:1px solid var(--ink)}
[hidden]{display:none!important}

/* home */
#home{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}
.mark{font-weight:400;letter-spacing:.32em;font-size:22px;margin:0 0 40px;color:var(--ink)}
.mark.small{font-size:12px;letter-spacing:.3em;margin:0}
#form{width:min(560px,100%)}
#q{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;color:var(--ink);
   font:18px/1.6 Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif",serif;
   letter-spacing:.04em;padding:6px 0;outline:none;caret-color:var(--ink)}
.hint{color:var(--dim);font-size:11px;letter-spacing:.3em;margin-top:28px;opacity:0;transition:opacity 1.6s}
.hint.on{opacity:1}

/* locate / found */
#locate{min-height:100vh;padding:28px 32px}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:56px}
.query{font:20px/1.5 Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif",serif;
       letter-spacing:.04em;margin:0 0 26px;border-bottom:1px solid var(--line);display:inline-block;min-width:min(560px,100%);
       white-space:pre-wrap;word-break:break-all}
.query.small{font-size:15px;border:0;min-width:0;margin:0}
.status{margin:0 0 24px;font-size:12px;letter-spacing:.3em}
.status.locating::after{content:"";display:inline-block;width:0;height:1px;background:var(--ink);vertical-align:middle;margin-left:14px;animation:grow 1.1s ease-in-out infinite}
@keyframes grow{0%{width:0;opacity:.2}60%{width:120px;opacity:1}100%{width:120px;opacity:0}}
.loc{display:grid;grid-template-columns:7.5em 1fr;gap:6px 16px;margin:0 0 36px;font-size:12px}
.loc dt{color:var(--dim)}
.loc dd{margin:0}
.loc dd .digits{color:var(--dim);margin-left:10px;font-size:11px}
.act{font-size:13px;letter-spacing:.3em}
.act a{border-bottom:1px solid var(--line);padding-bottom:2px}
.act a:hover{border-color:var(--ink)}

/* reader */
#reader{padding:18px 24px 40px}
.reader-bar{margin-bottom:10px;flex-wrap:wrap;gap:8px 24px}
.rloc{font-size:11px;color:var(--dim);letter-spacing:.2em;white-space:nowrap}
@media (max-width:700px){.rloc{white-space:normal;letter-spacing:.15em}}
.controls{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:11px;letter-spacing:.25em;color:var(--dim);margin-bottom:16px}
.controls a{padding:2px 0;border-bottom:1px solid transparent}
.controls a:hover{color:var(--ink);border-color:var(--ink)}
.controls a.on{color:var(--ink);border-bottom:1px solid var(--ink)}
.pager a{padding:0 6px;font-size:15px;line-height:1}
#surface{overflow-x:auto;overflow-y:hidden;padding-bottom:12px}
#paper{background:var(--paper);color:var(--paper-ink);padding:28px 32px;transform-origin:0 0;
       font:15px/var(--row) Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif",serif;
       letter-spacing:0;width:calc(80 * var(--cell) + 64px)}
#paper.symbol{--cell:22px;font:8px/var(--row) Menlo,Consolas,"Courier New",monospace}
#paper.raw{--cell:19px;font:9px/var(--row) Menlo,Consolas,"Courier New",monospace}
.line{display:grid;grid-template-columns:repeat(80,var(--cell));height:var(--row)}
.cell{position:relative;height:var(--row);white-space:pre;direction:ltr;unicode-bidi:isolate;overflow:visible;text-align:left}
#paper.symbol .cell,#paper.raw .cell{text-align:center;overflow:hidden}
#paper.symbol .cell{border:1px solid transparent}
#paper.symbol .cell.lead,#paper.symbol .cell.cont{border-top:1px solid var(--paper-dim)}
#paper.symbol .cell.lead{border-left:1px solid var(--paper-dim)}
.cell.ph{color:var(--paper-dim)}
.cell.hit::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--paper-ink)}
.cell.hit{cursor:help}
.inspect{margin:14px 0 0;font-size:12px;letter-spacing:.2em;color:var(--dim)}
.inspect b{font-weight:400;color:var(--ink);font-family:Menlo,Consolas,monospace;margin-left:14px}

@media (max-width:700px){
  #locate{padding:22px 18px}
  .bar{margin-bottom:36px}
  .loc{grid-template-columns:6.5em 1fr}
  #reader{padding:14px 12px 32px}
  .controls{gap:6px 18px}
  #paper{padding:16px 14px;width:calc(80 * var(--cell) + 28px)}
}

/* wall (PHASE 3) */
#wall{padding:18px 24px 40px;min-height:100vh}
.walls a{margin-left:10px;padding:2px 2px}
#shelves{max-width:1100px}
#shelves svg{display:block;width:100%;height:auto}
.board{stroke:var(--line);stroke-width:1}
.book line{stroke:var(--ink);stroke-width:1;opacity:.55}
.book text{fill:var(--dim);font:9px -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:1.5px;opacity:.75}
.book rect{fill:transparent;cursor:pointer}
.book:hover line{opacity:1}
.book:hover text{fill:var(--ink);opacity:1}
.book.found line{opacity:1;stroke-width:1.5}
.book.found text{fill:var(--ink);opacity:1}
.book.here line{stroke-dasharray:none;opacity:.9}
.book.here text{fill:var(--ink)}
.wallnote{fill:var(--dim);font:10px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:2px}

/* hexagon (PHASE 4) */
#hex{padding:18px 24px 40px;min-height:100vh}
#gallery{max-width:1000px;margin:0 auto}
#gallery svg{display:block;width:100%;height:auto}
.g-outline{fill:none;stroke:var(--ink);stroke-width:1;opacity:.8}
.g-void{fill:none;stroke:var(--line);stroke-width:1}
.g-rail{fill:none;stroke:var(--ink);stroke-width:.6;opacity:.5;stroke-dasharray:3 4}
.g-wall{cursor:pointer}
.g-wall .shelves{stroke:var(--ink);stroke-width:.7;opacity:.35}
.g-wall .face{stroke:var(--ink);stroke-width:1.2;opacity:.85}
.g-wall text{fill:var(--dim);font:10px -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:2.5px}
.g-wall:hover .shelves{opacity:.8}
.g-wall:hover text{fill:var(--ink)}
.g-wall.found text{fill:var(--ink)}
.g-wall.found .mark{stroke:var(--ink);stroke-width:1.5}
.g-hit{fill:transparent;stroke:none;cursor:pointer}
.g-exit{cursor:pointer}
.g-exit .corridor{stroke:var(--ink);stroke-width:1;opacity:.6}
.g-exit .beyond{fill:none;stroke:var(--ink);stroke-width:1;opacity:.14}
.g-exit text{fill:var(--dim);font:9px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:2px;opacity:.7}
.g-exit:hover .beyond{opacity:.35}
.g-exit:hover text{fill:var(--ink);opacity:1}
.g-lamp{fill:var(--ink);opacity:.9}
.g-glow{fill:none;stroke:var(--ink);opacity:.12}
.g-mirror{stroke:var(--ink);stroke-width:1.4;opacity:.7}
.g-mirror-ghost{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.16}
.g-stair{cursor:pointer}
.g-stair path{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.7}
.g-stair text{fill:var(--dim);font:9px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:2px}
.g-stair:hover path{opacity:1}
.g-stair:hover text{fill:var(--ink)}
.g-dim{opacity:.35}

/* full location panel */
#locpanel{position:fixed;inset:0;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;z-index:5}
.locbox{width:min(520px,90vw);border:1px solid var(--line);padding:28px 32px}
.locbox .status{margin-bottom:14px}
.locinfo{font-size:12px;color:var(--dim);line-height:1.9;margin:0 0 22px;letter-spacing:.12em}
.locinfo b{font-weight:400;color:var(--ink)}
.locbox .act a{margin-right:26px}
/* honeycomb */
.g-vest{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.5}
.g-shaft{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.6}
.g-closet{fill:none;stroke:var(--ink);stroke-width:.7;opacity:.45}
.g-far{cursor:pointer}
.g-far polygon{fill:none;stroke:var(--ink);stroke-width:1;opacity:.14}
.g-far text{fill:var(--dim);font:8.5px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:1.5px;opacity:.55}
.g-far:hover polygon{opacity:.4}
.g-far:hover text{fill:var(--ink);opacity:1}
.g-door{stroke:var(--ink);stroke-width:1;opacity:.55}

/* transitions (PHASE 5) */
section{transition:opacity .45s ease}
section.pre{opacity:0}
#fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:4;overflow:visible}
#fx line,#fx polyline,#fx polygon{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
#fx rect{stroke:var(--ink);stroke-width:1;fill:var(--paper)}
#gallery svg{transition:transform .55s cubic-bezier(.5,0,.9,.4),opacity .55s ease}
#shelves svg{transition:opacity .35s ease}
#paper{transition:opacity .25s ease}
#locate .fade{transition:opacity .35s ease}
#locate.dim .fade{opacity:0}
@media (prefers-reduced-motion:reduce){
  section,#gallery svg,#shelves svg,#paper,#locate .fade{transition:none}
}

/* PHASE 6 */
.homefoot{position:fixed;bottom:22px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.3em;color:var(--dim);opacity:0;transition:opacity 1.6s}
.homefoot.on{opacity:1}
.homefoot a{margin:0 14px;color:var(--dim)}
.homefoot a:hover{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:pre}
.refusal{background:var(--paper);color:var(--paper-ink);width:calc(80 * var(--cell) + 64px);max-width:100%;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;font:13px/2 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.3em;white-space:pre-line}
#open-text{width:100%;background:transparent;color:var(--ink);border:1px solid var(--line);font:11px/1.5 Menlo,Consolas,monospace;padding:8px;resize:vertical;margin-bottom:12px}
#open-file{color:var(--dim);font-size:11px}
.book:focus,.g-wall:focus,.g-far:focus,.g-stair:focus{outline:none}
.book:focus line,.g-wall:focus .face{stroke-width:2;opacity:1}
.g-far:focus polygon{opacity:.45}
.g-stair:focus text{fill:var(--ink)}
body.doc{padding:32px 24px}
main.doc{max-width:760px;margin:0 auto}
.doctext{white-space:pre-wrap;font:15px/1.7 Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif",serif;letter-spacing:.02em;color:var(--ink);margin:36px 0}