@import url("https://fonts.googleapis.com/css2?family=Literata:wght@500;700&family=Geologica:wght@400;500;600;700&family=Unbounded:wght@700;800&display=swap");
/* Layout: one full-screen WebGL hall; quiet UI rails hug the edges like museum wall labels. Single dark look (a lit hall at dusk). */
:root{
  --ink:#f3ece2; --muted:#c9bcae; --night:#110c0b; --panel:rgba(20,14,12,.86); --line:rgba(243,236,226,.16);
  --gold:#f2c14e; --red:#a3121a;
  --f-display:"Literata",Georgia,serif; --f-body:"Geologica",system-ui,sans-serif; --f-mark:"Unbounded","Geologica",sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-body);overflow:hidden}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stage canvas.drag{cursor:grabbing}
#stage canvas.hot{cursor:pointer}
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;
  padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(180deg,rgba(17,12,11,.85),rgba(17,12,11,0));pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;gap:10px;align-items:center}
.brand b{font-family:var(--f-mark);font-weight:800;font-size:15px;letter-spacing:.01em}
.brand span{display:block;font-size:12px;color:var(--muted)}
.dev{margin-left:4px;padding:4px 10px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.dev:hover,.dev:focus-visible{background:var(--gold);color:#1b1310}
.right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.seg button{min-height:38px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1b1310}
.tour{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;gap:10px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-top:40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(0deg,rgba(17,12,11,.92) 35%,rgba(17,12,11,0));pointer-events:none}
.tour>*{pointer-events:auto}
.stopline{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stopline .n{font-family:var(--f-mark);font-weight:800;font-size:13px;color:var(--gold);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.stopline h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,34px);line-height:1.1;text-wrap:balance}
.stopline p{margin:0;flex-basis:100%;max-width:62ch;color:var(--muted);font-size:15px;line-height:1.55}
.ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 15px var(--f-body);cursor:pointer}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1b1310}
.btn:focus-visible,.seg button:focus-visible,.dot:focus-visible,.card button:focus-visible,#map:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.dots{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.dot{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 12px var(--f-body);cursor:pointer;font-variant-numeric:tabular-nums}
.dot[aria-current="step"]{background:var(--gold);color:#1b1310;border-color:var(--gold)}
.card{position:fixed;z-index:6;right:max(16px,env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));width:min(360px,calc(100vw - 32px));
  padding:18px 20px 20px;border-radius:18px;background:var(--panel);border:1px solid rgba(242,193,78,.4);backdrop-filter:blur(8px);box-sizing:border-box}
.card .k{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.card h2{margin:6px 0 0;font-family:var(--f-display);font-size:28px;line-height:1.1}
.card .en{margin:2px 0 0;color:var(--muted);font-size:14px}
.card .t{margin:10px 0 0;font-size:15px;line-height:1.55}
.card .note{margin:10px 0 0;font-size:12px;color:var(--muted)}
.card .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#mapwrap{position:fixed;z-index:5;left:max(16px,env(safe-area-inset-left,0px));top:calc(78px + env(safe-area-inset-top,0px));padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
#map{display:block;width:198px;height:84px;cursor:pointer}
#mapwrap small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.loader{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:var(--night);transition:opacity .6s}
.loader.done{opacity:0;pointer-events:none}
.loader div{width:min(420px,80vw);text-align:center}
.loader b{font-family:var(--f-display);font-size:26px}
.bar{height:4px;margin-top:16px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.loader p{color:var(--muted);font-size:14px}
.hint{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:4;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--muted);transition:opacity .5s;text-align:center;max-width:calc(100vw - 32px)}
@media (max-width:640px){
  .card{top:auto;bottom:calc(210px + env(safe-area-inset-bottom,0px))}
  .stopline p{font-size:14px}
  .dots{margin-left:0}
  #mapwrap{display:none}
  .hint{top:calc(120px + env(safe-area-inset-top,0px))}
}

.mm-audio{margin-top:12px;display:grid;gap:10px}.mm-audio audio{width:100%}.mm-audio p{margin:4px 0 0;font-size:12px;color:var(--muted)}