:root{
  --void:#070605; --fg:#b7954a; --bright:#f0dfa6;
  --lilian:#cf922b; --dim:#6b5a30; --faint:#3a3018;
  --glow:rgba(214,168,72,.35); --panel:rgba(9,7,5,.78); --lume:#d9c04a;
  --rr:rgba(210,80,60,.55); --cc:rgba(70,200,190,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0c0a07}
::-webkit-scrollbar-thumb{background:#2a2210;border:1px solid var(--faint)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
html{scrollbar-color:#2a2210 #0c0a07}
body{
  margin:0; min-height:100%;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(150,115,40,.12), transparent 55%),
    radial-gradient(150% 130% at 50% 55%, transparent 45%, rgba(0,0,0,.92) 100%),
    var(--void);
  color:var(--fg);
  font:14px/1.65 ui-monospace,"SF Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  text-shadow:0 0 1px var(--glow); letter-spacing:.02em; -webkit-font-smoothing:none;
}
body::before{content:""; position:fixed; inset:0; z-index:62; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.20) 2px 3px);
  mix-blend-mode:multiply; opacity:.6}
a{color:inherit; text-decoration:none}

.bezel{position:fixed; inset:9px; z-index:47; pointer-events:none;
  border:1px solid var(--faint); box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
.bezel i{position:absolute; color:var(--lilian); font-style:normal; font-size:13px; opacity:.8}
.bezel .tl{top:-8px;left:8px} .bezel .tr{top:-8px;right:8px}
.bezel .bl{bottom:-8px;left:8px} .bezel .br{bottom:-8px;right:8px}
.bezel .plate{position:absolute; background:var(--void); color:var(--dim);
  font-size:11px; letter-spacing:.18em; padding:0 8px}
.bezel .pt{top:-7px; left:36px} .bezel .pr{top:-7px; right:36px}

.screen{max-width:1000px; margin:0 auto; padding:40px 26px 90px; position:relative; z-index:1}

.mast{color:var(--lilian); white-space:pre; line-height:1.02; margin:2px 0 6px;
  font-size:clamp(5px,1.65vw,12px); text-shadow:0 0 6px var(--glow); animation:chroma 8s infinite}
@keyframes chroma{0%,93%,100%{text-shadow:0 0 6px var(--glow)}
  95%{text-shadow:-2px 0 var(--rr),2px 0 var(--cc),0 0 8px var(--glow)}
  97%{text-shadow:1px 0 var(--rr),-1px 0 var(--cc),0 0 6px var(--glow)}}
.tagl{color:var(--dim); letter-spacing:.28em; margin:-2px 0 16px; font-size:12px}
.tagl b{color:var(--lume); font-weight:400; text-shadow:0 0 6px rgba(217,192,74,.4)}
.sub{color:var(--dim); display:flex; gap:12px; flex-wrap:wrap; margin:0 0 30px; font-size:12px}
.sub b{color:var(--fg); font-weight:400}

.banner{color:var(--lilian); white-space:pre; text-align:center; overflow:hidden;
  margin:10px 0 6px; text-shadow:0 0 6px var(--glow); font-size:clamp(9px,1.4vw,13px); line-height:1.15}
.headsub{color:var(--dim); text-align:center; margin:0 0 22px; font-size:12px; font-style:italic}

/* hero — who lilian is, what the rooms are */
.hero{display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:34px; align-items:start; margin:6px 0 34px}
.hero-art{border:1px solid var(--faint); background:var(--panel); box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  padding:16px 18px; overflow-x:auto}
.hero-art pre{white-space:pre; color:var(--fg); font-size:12px; line-height:1.4; margin:0; scrollbar-width:none}
.hero-art pre::-webkit-scrollbar{display:none}
.hero-art .hi{color:var(--lume); text-shadow:0 0 6px rgba(217,192,74,.5)}
.hero-art .cap{display:block; color:var(--dim); text-align:center; letter-spacing:.16em; font-size:11px; margin-top:12px}
.lead{color:var(--bright); font-size:clamp(16px,2.1vw,21px); line-height:1.55; margin:0 0 22px; letter-spacing:.005em}
.lead b{color:var(--lume); font-weight:400; text-shadow:0 0 8px rgba(217,192,74,.4)}
.hero-text h3{color:var(--lilian); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  font-weight:400; margin:22px 0 7px; display:flex; align-items:center; gap:10px}
.hero-text h3::after{content:""; flex:1; height:1px; background:var(--faint)}
.hero-text p{color:var(--fg); line-height:1.8; margin:0; max-width:66ch}
@media(max-width:720px){.hero{grid-template-columns:1fr}}

.concepts{display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--faint);
  background:var(--panel); box-shadow:inset 0 0 60px rgba(0,0,0,.5); margin:0 0 8px}
.concept{padding:16px 20px; border-right:1px solid var(--faint); border-top:1px solid var(--faint)}
.concept:nth-child(-n+2){border-top:0}
.concept:nth-child(2n){border-right:0}
.concept .t{color:var(--lume); letter-spacing:.05em; margin-bottom:6px; text-shadow:0 0 6px rgba(217,192,74,.35)}
.concept .d{color:var(--dim); line-height:1.65}
.concept .d b{color:var(--fg); font-weight:400}
@media(max-width:600px){.concepts{grid-template-columns:1fr}
  .concept{border-right:0} .concept:nth-child(2){border-top:1px solid var(--faint)}}

/* index — room list as links to their own pages */
.roomindex{border:1px solid var(--faint); background:var(--panel); box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.roomlink{display:flex; align-items:baseline; gap:16px; padding:13px 18px;
  border-bottom:1px solid var(--faint); border-left:2px solid transparent; cursor:pointer; transition:.12s}
.roomlink:last-child{border-bottom:0}
.roomlink:hover{background:rgba(207,146,43,.09); border-left-color:var(--lilian)}
.roomlink .rd{color:var(--dim); width:44px; flex:none; font-size:12px}
.roomlink:hover .rd{color:var(--lilian)}
.roomlink .rn{color:var(--fg); width:210px; flex:none; letter-spacing:.03em}
.roomlink:hover .rn{color:var(--bright)}
.roomlink .rt{color:var(--dim); font-style:italic; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.roomlink .ra{color:var(--faint); flex:none} .roomlink:hover .ra{color:var(--lilian)}
.roomlink .here{color:var(--lume); flex:none; font-size:12px}
@media(max-width:640px){.roomlink .rt{display:none} .roomlink .rn{width:auto}}

/* single room page */
.rp-back{display:inline-block; color:var(--dim); letter-spacing:.14em; margin-bottom:26px}
.rp-back:hover{color:var(--lilian)}
.rp-d{color:var(--dim); letter-spacing:.18em; font-size:13px}
.rp-n{color:var(--lume); letter-spacing:.04em; margin:6px 0 22px; font-size:clamp(26px,5vw,44px);
  line-height:1; text-shadow:0 0 12px rgba(217,192,74,.4)}
.rp-map{border:1px solid var(--faint); background:var(--panel); box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  padding:22px 24px; margin:0 0 26px; overflow-x:auto}
.rp-map pre{white-space:pre; color:var(--fg); font-size:clamp(12px,1.6vw,15px); line-height:1.4; margin:0}
.rp-desc{color:var(--fg); line-height:1.85; font-size:15px; max-width:64ch; margin:0 0 30px}
.rp-stats{display:grid; grid-template-columns:1fr; border:1px solid var(--faint); background:var(--panel);
  box-shadow:inset 0 0 50px rgba(0,0,0,.45); margin:0 0 26px}
.rp-stats .st{display:flex; gap:18px; padding:13px 20px; border-bottom:1px solid var(--faint)}
.rp-stats .st:last-child{border-bottom:0}
.rp-stats .k{color:var(--lilian); width:96px; flex:none; text-transform:uppercase; letter-spacing:.16em; font-size:12px}
.rp-stats .v{color:var(--fg)}
.rp-note{color:var(--dim); font-style:italic; border-left:2px solid var(--faint); padding:4px 0 4px 16px; margin:0 0 40px; line-height:1.7}
.rp-note b{color:var(--lilian); font-style:normal; font-weight:400; letter-spacing:.12em; display:block; margin-bottom:4px; font-size:12px}
.rp-nav{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--faint); padding-top:18px}
.rp-nav a{color:var(--dim); max-width:46%}
.rp-nav a:hover{color:var(--lilian)}
.rp-nav .dir{color:var(--faint); font-size:12px; letter-spacing:.14em; display:block}
.rp-nav .none{opacity:.35; pointer-events:none}

/* glyph key */
.glyphkey{border:1px solid var(--faint); background:var(--panel); padding:6px 16px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.45)}
.glyphkey .row{display:flex; gap:14px; padding:6px 0; border-bottom:1px dotted var(--faint)}
.glyphkey .row:last-child{border-bottom:0}
.glyphkey .g{color:var(--lilian); width:36px; text-align:center; flex:none; font-size:15px}
.glyphkey .m{color:var(--fg)}

.status{position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:linear-gradient(0deg,var(--void),rgba(7,6,5,.55)); border-top:1px solid var(--faint);
  color:var(--dim); padding:8px 20px; display:flex; gap:18px; font-size:12px; letter-spacing:.06em}
.status .loc{margin-left:auto}
.status .pw{color:var(--lume)}

.powered{text-align:center; color:var(--dim); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; margin-top:48px}
.powered b{color:var(--lume); font-weight:400; text-shadow:0 0 6px rgba(217,192,74,.4)}

@media (prefers-reduced-motion: reduce){ .mast{animation:none} }