:root {
  --ink: #090817;
  --ink-2: #100e25;
  --paper: #f4f0ff;
  --muted: #c3b9d7;
  --brass: #c5a8ff;
  --brass-dim: #8068ad;
  --line: rgba(210,190,255,.22);
  --pane: rgba(8,7,22,.83);
}
body { background:#090817; }
::selection { background:#c5a8ff; color:#090817; }
#vignette { background: radial-gradient(ellipse 112% 80% at 52% 44%,transparent 27%,rgba(11,7,30,.5) 77%,rgba(5,4,17,.88) 100%); }
#topbar { background:linear-gradient(rgba(7,6,23,.9),transparent); }
.brand em { font:400 .68rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.top-count { border:1px solid var(--line); border-radius:99px; padding:.4rem .8rem; color:var(--brass); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
#nav button { background:none; border:0; padding:.25rem 0; color:var(--muted); font:inherit; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
#nav button:hover, #nav button:focus-visible { color:var(--paper); }
body.exploring #page, body.exploring #topbar { opacity:0; pointer-events:none; }
body.exploring #topbar { transform:translateY(-110%); }
#explore-ui { position:fixed; inset:0; z-index:20; display:none; flex-direction:column; justify-content:space-between; padding:calc(1rem + env(safe-area-inset-top,0px)) max(1.2rem,4vw) calc(1rem + env(safe-area-inset-bottom,0px)); pointer-events:none; color:var(--paper); }
body.exploring[data-mode="page"] #explore-ui { display:flex; }
.explore-top, .explore-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.explore-top { font-size:.65rem; letter-spacing:.2em; }
.explore-top span { color:var(--brass); text-align:center; }
.explore-top button { pointer-events:auto; border:1px solid var(--line); padding:.7rem .9rem; background:rgba(7,6,20,.78); backdrop-filter:blur(16px); color:var(--paper); text-transform:uppercase; letter-spacing:.1em; font:600 .68rem var(--sans); cursor:pointer; }
.explore-top button:hover, .explore-top button:focus-visible { border-color:var(--brass); }
.explore-bottom { align-items:end; padding:1rem 1.2rem; border:1px solid var(--line); background:rgba(7,6,20,.74); backdrop-filter:blur(16px); max-width:780px; width:100%; margin:0 auto; }
.explore-bottom strong { display:block; font:400 clamp(1.1rem,2.8vw,1.7rem)/1.1 var(--serif); }
.explore-bottom small { display:block; margin-top:.3rem; color:var(--muted); font:.65rem/1.3 var(--sans); letter-spacing:.04em; }
#walk-progress { color:var(--brass); font-size:.65rem; letter-spacing:.18em; white-space:nowrap; }
#home { position:relative; }
#home:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(7,5,23,.78) 0%,rgba(7,5,23,.47) 44%,transparent 82%); }
#home .hero { position:relative; max-width:1100px; }
#home .hero-feature { position:absolute; z-index:1; top:50%; right:max(6vw,3rem); transform:translateY(-48%) rotate(3deg); width:min(26vw,340px); aspect-ratio:4/5; padding:.65rem; background:#120d28; border:1px solid #9e85cc; box-shadow:0 24px 65px #0009,0 0 80px #8c62c141; }
.hero-feature img { width:100%; height:100%; object-fit:cover; }
.hero-feature .feature-label, .hero-feature strong { position:absolute; left:1.2rem; right:1.2rem; color:white; text-shadow:0 2px 9px #000; }
.hero-feature .feature-label { top:1.1rem; font-size:.52rem; letter-spacing:.22em; }
.hero-feature strong { bottom:1.2rem; font:400 1.55rem/1 var(--serif); }
#home .eyebrow { color:var(--brass); }
#hero-title { white-space:pre-line; font-size:min(clamp(4.3rem,11vw,9.5rem),22vh); line-height:.83; text-shadow:0 4px 40px rgba(4,2,19,.75); }
#hero-line { margin-top:1.1rem; max-width:32ch; color:#e2d8fa; }
#walk { position:relative; pointer-events:none; }
.walk-guide { position:sticky; top:calc(100svh - 6.5rem - env(safe-area-inset-bottom,0px)); width:min(720px,calc(100% - 2.5rem)); margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem; padding:1rem 1.3rem; color:var(--paper); border:1px solid var(--line); border-top-color:var(--brass-dim); background:rgba(7,6,20,.76); backdrop-filter:blur(20px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.guide-kicker, #walk-progress { color:var(--brass); font-size:.62rem; letter-spacing:.23em; white-space:nowrap; }
#passing-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 clamp(1.1rem,2.2vw,1.65rem)/1 var(--serif); text-align:center; }
#collection { background:linear-gradient(180deg,rgba(9,7,25,.94),rgba(9,7,25,.98)); }
#collection .tile { aspect-ratio:4/5; background:#171329; border:1px solid rgba(214,194,255,.14); }
#collection .tile:before { content:""; position:absolute; inset:-12px; background-image:var(--art); background-position:center; background-size:cover; filter:blur(24px) brightness(.48); }
#collection .tile img { position:relative; object-fit:contain; filter:none; }
#collection .tile figcaption { z-index:2; }
#collection .tile:hover img, #collection .tile:focus-visible img { filter:none; transform:scale(1.03); }
#collection .tile figcaption { opacity:1; transform:none; padding-top:2rem; }
#footer { background:#090817; }
#plate { border-top-color:var(--brass); background:rgba(10,8,27,.87); }
#plate-caption:empty { display:none; }
body.flat #walk { display:none; }
body.flat #home { background:radial-gradient(circle at 70% 30%,#372758,#0b0920 70%); }
#fallback-viewer { position:fixed; inset:0; margin:auto; width:min(96vw,1100px); max-height:96svh; padding:1rem; border:1px solid var(--line); background:#0b091b; color:var(--paper); }
#fallback-viewer::backdrop { background:rgba(0,0,0,.9); }
#fallback-viewer img { max-width:100%; max-height:calc(96svh - 5rem); object-fit:contain; margin:auto; }
#fallback-viewer p { text-align:center; padding:.5rem; }
.concept-link { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:max-content; min-height:36px; padding:.5rem .8rem; color:var(--brass); background:transparent; border:1px solid var(--brass-dim); font:600 .7rem/1.2 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.concept-link[hidden] { display:none; }
#concept-viewer { position:fixed; inset:0; margin:auto; width:min(96vw,1000px); max-height:96svh; padding:clamp(1rem,3vw,2rem); border:1px solid var(--brass-dim); background:#0b091b; color:var(--paper); text-align:center; }
#concept-viewer::backdrop { background:rgba(0,0,0,.9); }
#concept-viewer img { display:block; max-width:100%; max-height:calc(90svh - 10rem); object-fit:contain; margin:1rem auto; }
#concept-viewer .concept-link { margin:auto; }
#concept-close { position:absolute; top:.4rem; right:.6rem; color:var(--paper); background:transparent; border:0; font-size:1.8rem; cursor:pointer; }
#fallback-close { position:absolute; top:.5rem; right:.5rem; z-index:2; width:44px; height:44px; border:0; background:rgba(0,0,0,.7); color:white; font-size:2rem; cursor:pointer; }
@media (max-width:700px) {
  #topbar { gap:.4rem; }
  #nav { display:flex; gap:.65rem; }
  #nav a { font-size:.6rem; letter-spacing:.06em; }
  #nav button { font-size:.6rem; letter-spacing:.06em; }
  .explore-top span { display:none; }
  .explore-bottom { padding:.8rem 1rem; }
  .explore-bottom small { font-size:.58rem; max-width:23ch; }
  .brand em { display:none; }
  .brand span { font-size:.75rem; letter-spacing:.08em; }
  .top-count { display:none; }
  #home:before { background:linear-gradient(90deg,rgba(7,5,23,.83),rgba(7,5,23,.38)); }
  #home .hero-feature { top:5.6rem; right:1.5rem; transform:rotate(7deg); width:112px; padding:.3rem; box-shadow:0 12px 35px #0009,0 0 45px #8c62c141; }
  .hero-feature .feature-label { display:none; }
  .hero-feature strong { font-size:.7rem; left:.6rem; right:.6rem; bottom:.7rem; }
  #hero-title { font-size:min(clamp(3.7rem,14vw,6rem),20vh); }
  .walk-guide { grid-template-columns:1fr auto; top:calc(100svh - 5.5rem - env(safe-area-inset-bottom,0px)); padding:.75rem 1rem; }
  .guide-kicker { display:none; }
  #passing-title { text-align:left; }
  #collection .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #plate { top:calc(.75rem + env(safe-area-inset-top,0px)); bottom:auto; }
}
@media (max-width:380px) {
  #nav a:first-child { display:none; }
  #hero-title { font-size:min(15vw,20vh); }
}

/* Entrance: the room is the centerpiece; Enter is its single main action. */
#home { height:100svh; min-height:640px; padding:0; display:block; }
#home:before { background:linear-gradient(90deg,rgba(7,5,23,.7),transparent 56%),linear-gradient(0deg,rgba(7,5,23,.55),transparent 35%); }
#home .hero { position:absolute; top:19%; left:0; width:36%; padding-right:0; gap:.7rem; }
#hero-title { font-size:clamp(3.5rem,6.5vw,6.8rem); line-height:.95; }
#home .eyebrow { font-size:.6rem; letter-spacing:.23em; }
#hero-line { color:var(--muted); font-size:clamp(.95rem,1.2vw,1.15rem); max-width:25ch; margin-top:.7rem; min-height:0; }
.entrance-action { position:absolute; z-index:2; left:50%; top:76%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:.85rem; }
#hero-explore { display:flex; align-items:center; justify-content:center; gap:1rem; min-width:228px; min-height:76px; padding:1.1rem 1.8rem; border:1px solid var(--brass); border-radius:14px; color:var(--paper); background:linear-gradient(120deg,color-mix(in srgb,var(--brass) 28%,transparent),rgba(12,10,30,.9)); backdrop-filter:blur(14px); box-shadow:0 0 0 5px color-mix(in srgb,var(--brass) 6%,transparent),0 0 46px color-mix(in srgb,var(--brass) 22%,transparent),inset 0 1px 0 #ffffff36; font:600 1.05rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; cursor:pointer; transition:background .2s,box-shadow .2s,transform .2s; }
#hero-explore svg { width:27px; height:30px; fill:none; stroke:var(--brass); stroke-width:1.3; }
#hero-explore:hover { background:color-mix(in srgb,var(--brass) 32%,#100e25); box-shadow:0 0 0 5px color-mix(in srgb,var(--brass) 12%,transparent),0 0 65px color-mix(in srgb,var(--brass) 32%,transparent); transform:translateY(-2px); }
.enter-arrow { font-size:1.2rem; color:var(--brass); letter-spacing:0; }
.entrance-action p { font:.55rem/1.4 var(--sans); letter-spacing:.28em; color:var(--muted); }
.entrance-collection { position:absolute; right:var(--pad-r); bottom:11%; font:.7rem/1.4 var(--sans); color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding:.8rem 0; }
.entrance-collection span { margin-left:.5rem; color:var(--brass); }
.entrance-collection:hover { color:var(--paper); }
@media (max-width:700px) {
  #home { min-height:540px; }
  #home .hero { top:11%; width:95%; gap:.35rem; }
  #hero-title { font-size:clamp(1.8rem,8.4vw,3.3rem); white-space:normal; }
  #home .eyebrow { font-size:.5rem; }
  #hero-line { font-size:.85rem; max-width:28ch; margin-top:.25rem; }
  .entrance-action { top:77%; }
  #hero-explore { min-width:210px; min-height:68px; }
  .entrance-collection { right:50%; transform:translateX(50%); bottom:4%; white-space:nowrap; }
  .explore-bottom { flex-wrap:wrap; gap:.6rem; }
  .explore-bottom > div { flex:1; min-width:0; }
  #walk-progress { margin-left:auto; }
}
@media (max-height:550px) and (min-width:701px) {
  #home { min-height:100svh; }
  #home .hero { top:23%; }
  #hero-title { font-size:3.2rem; }
  .entrance-action { top:78%; }
  #hero-explore { min-height:58px; }
}
@media (prefers-reduced-motion:reduce) { #hero-explore { transition:none; } #hero-explore:hover { transform:none; } }

/* Shared visitor controls. Colors inherit each child's gallery theme. */
.explore-actions { display:flex; align-items:center; gap:.45rem; }
.explore-actions button { white-space:nowrap; }
#help-open { width:38px; height:38px; padding:0; border-radius:50%; font-size:1rem; }
#help-panel, #look-exit, #music-controls { pointer-events:auto; }
#help-panel[hidden], #look-exit[hidden], #music-controls[hidden] { display:none; }
#help-panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(90vw,340px); padding:1.3rem 1.5rem; border:1px solid var(--brass); border-radius:12px; background:rgba(8,7,20,.94); box-shadow:0 20px 80px #000a; backdrop-filter:blur(20px); }
#help-panel strong { display:block; margin-bottom:.9rem; color:var(--brass); font:500 1.5rem var(--serif); }
#help-panel p { margin:.5rem 0; color:var(--paper); font:.85rem/1.45 var(--sans); }
#help-close { position:absolute; right:.6rem; top:.45rem; border:0; background:none; color:var(--paper); font-size:1.5rem; cursor:pointer; }
#look-exit { position:absolute; top:calc(4.5rem + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); }
#look-exit button { padding:.7rem 1rem; border:1px solid var(--brass); background:rgba(8,7,20,.9); color:var(--paper); font:600 .7rem var(--sans); cursor:pointer; }
#music-controls { position:absolute; right:max(1.2rem,4vw); bottom:calc(6.8rem + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:.35rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:8px; background:rgba(8,7,20,.78); backdrop-filter:blur(12px); color:var(--paper); }
#music-controls button { min-width:33px; height:33px; border:0; background:none; color:var(--paper); cursor:pointer; }
#music-controls label { display:flex; align-items:center; gap:.35rem; font:.58rem var(--sans); }
#music-volume { width:58px; accent-color:var(--brass); }
#music-title { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:.58rem var(--sans); }
#fallback-viewer { background:color-mix(in srgb,var(--ink) 93%,var(--brass)); border:1px solid var(--brass-dim); border-radius:3px; box-shadow:0 25px 80px #000b,0 0 0 1px color-mix(in srgb,var(--brass) 16%,transparent); transform-origin:top left; }
body #fallback-viewer.viewer-returning { background:transparent; border-color:transparent; box-shadow:none; }
#fallback-viewer::backdrop { background:rgba(3,3,9,.48); backdrop-filter:blur(1px); }
#fallback-viewer[open] { display:flex; flex-direction:column; width:max-content; max-width:calc(100vw - 24px); height:max-content; max-height:calc(100dvh - 24px); padding:.55rem; overflow:hidden; }
#fallback-viewer .viewer-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:39px; padding:0 .35rem .35rem; }
#fallback-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 1.2rem var(--serif); }
#fallback-close { position:static; flex:none; }
#viewer-viewport { flex:none; min-height:0; width:var(--art-width); aspect-ratio:var(--art-aspect); max-width:100%; max-height:68dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; border:6px solid var(--brass-dim); padding:3px; background:color-mix(in srgb,var(--ink) 88%,var(--paper)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 34%,transparent),0 8px 28px #0009; cursor:grab; }
#viewer-viewport:active { cursor:grabbing; }
#fallback-viewer #fallback-image { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; margin:0; user-select:none; -webkit-user-drag:none; transform-origin:center; }
.viewer-tools { display:flex; justify-content:center; align-items:center; gap:.35rem; min-height:42px; padding-top:.4rem; }
.viewer-tools button { min-width:34px; min-height:33px; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer; }
.viewer-tools .concept-link { min-width:auto; color:var(--brass); }
@media(max-width:700px) {
  .explore-top { gap:.4rem; }
  .explore-top button { padding:.5rem .55rem; font-size:.56rem; }
  .explore-actions { gap:.25rem; }
  #help-open { width:33px; height:33px; }
  #music-controls { bottom:calc(6rem + env(safe-area-inset-bottom,0px)); right:1rem; }
  #fallback-viewer[open] { max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin:auto; }
  .viewer-tools { flex-wrap:wrap; }
  .viewer-tools .concept-link { font-size:.55rem; }
}
@media(max-width:370px) { #explore-collection { display:none; } }

/* Shared soundtrack: the track choices stay visible on phones and desktop. */
#music-controls { display:flex; flex-direction:column; align-items:stretch; width:280px; max-width:calc(100vw - 2rem); padding:.55rem .65rem; gap:.35rem; }
#music-controls [hidden] { display:none; }
#music-track-picker { width:100%; gap:.6rem; }
#music-track-count { flex:none; font-size:.66rem; color:var(--muted); }
#music-track-select { flex:1; min-width:0; width:100%; min-height:40px; padding:.45rem .55rem; border:1px solid var(--brass-dim); border-radius:4px; background:var(--ink); color:var(--paper); font:.78rem var(--sans); color-scheme:dark; }
#music-track-select:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.music-buttons { display:flex; align-items:center; gap:.4rem; }
#music-controls .music-buttons button { min-width:40px; height:40px; }
#music-controls .music-buttons label { margin-left:auto; font-size:.65rem; }
#music-controls #music-title { display:block; max-width:none; white-space:normal; font-size:.75rem; }
#music-controls #music-title[hidden] { display:none; }
#music-volume { width:80px; }

/* Myles: purple crystal, neon light and a pair of projected heroes. */
:root{--ink:#100b21;--ink-2:#231537;--muted:#cbbadd;--brass-dim:#8e69bb;--line:#b392dc40;--pane:#170e2aeb;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:#100b21}
#grain{opacity:.017}
#vignette{background:radial-gradient(ellipse 118% 98% at 54% 45%,transparent 38%,#11082126 76%,#0b061b99 100%)}
#topbar{background:linear-gradient(#120b26d9,transparent)}
#home:before{background:linear-gradient(90deg,#140c2ab0,transparent 53%),linear-gradient(0deg,#10091f88,transparent 29%)}
#home .hero{top:20%;width:38%}
#hero-title{font-family:var(--sans);font-size:clamp(3.2rem,5.5vw,6rem);font-weight:500;letter-spacing:-.065em;line-height:1.03;text-shadow:0 3px 28px #16072c}
#hero-line{font-size:1rem;line-height:1.6;color:#e1d2f1;max-width:23ch}
#home .eyebrow{color:#d1b1ef;letter-spacing:.2em}
#hero-explore{border-radius:7px;background:linear-gradient(130deg,#9461bf77,#241333e8);border-color:#dab7ff;box-shadow:0 0 0 5px #c691ff09,0 12px 42px #10042699,inset 0 1px 0 #ffffff36}
#collection{background:linear-gradient(155deg,#1e1231fa,#130c24fa)}
#collection .tile{background:#241638;border-color:#a584cf55}
#footer{background:#140c25}
.explore-top button,.explore-bottom{background:#180e2cde}
@media(max-width:700px){
 #home .hero{top:10%;width:95%}
 #hero-title{max-width:100%;font-size:clamp(2.3rem,10.4vw,3.6rem);letter-spacing:-.055em;line-height:1.02}
 #hero-line{max-width:29ch;font-size:.8rem;line-height:1.4;margin-top:.25rem}
 #home .eyebrow{font-size:.45rem}
 #home:before{background:linear-gradient(180deg,#170c2b66,transparent 33%,transparent 65%,#10081f88)}
}