:root {
  color-scheme: dark;
  --ink: #f5ead5;
  --muted: #c9baa1;
  --panel: rgba(11, 18, 20, 0.97);
  --border: rgba(224, 181, 91, 0.62);
  --accent: #dfa23a;
  --accent-2: #4eb4db;
  --shadow: 0 18px 54px rgba(0,0,0,.48);
}
* { box-sizing: border-box; }
html { background:#100a06; }
body { margin:0; background:#100a06; color:var(--ink); font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button, a { font:inherit; }
.hq-shell { width:min(100%, 1600px); margin-inline:auto; }
.hq-intro { padding:1rem clamp(1rem,3vw,2rem); display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.hq-intro h1 { margin:0; font-size:clamp(1.35rem,3vw,2rem); }
.hq-intro p { margin:.35rem 0 0; color:var(--muted); max-width:55ch; }
.hq-progress { white-space:nowrap; padding:.5rem .75rem; border:1px solid var(--border); border-radius:999px; color:var(--ink); background:rgba(0,0,0,.25); }
.hq-stage { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#24150b; isolation:isolate; }
.hq-stage picture, .hq-stage img { display:block; width:100%; height:100%; }
.hq-stage img { object-fit:contain; }
.hotspot-layer { position:absolute; inset:0; z-index:2; }
.hotspot {
  position:absolute;
  left:calc(var(--dx) * 1%); top:calc(var(--dy) * 1%);
  width:calc(var(--dw) * 1%); height:calc(var(--dh) * 1%);
  border:2px solid transparent; border-radius:.65rem;
  padding:0; background:transparent; cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.hotspot::after {
  content:"+"; position:absolute; right:.35rem; bottom:.35rem;
  display:grid; place-items:center; width:2rem; height:2rem;
  border:2px solid currentColor; border-radius:50%;
  color:#fff7e9; background:rgba(5,15,18,.76); box-shadow:0 2px 10px rgba(0,0,0,.45);
  font-size:1.35rem; line-height:1; font-weight:700;
  opacity:.82; transition:transform .16s ease, opacity .16s ease, background-color .16s ease;
}
.hotspot:hover, .hotspot:focus-visible { border-color:var(--accent); background:rgba(223,162,58,.13); box-shadow:inset 0 0 0 2px rgba(0,0,0,.35), 0 0 0 3px rgba(223,162,58,.25); outline:none; }
.hotspot:hover::after, .hotspot:focus-visible::after { transform:scale(1.08); opacity:1; background:#1b2c33; }
.hotspot[data-visited="true"]::after { content:"✓"; color:#0c191e; background:var(--accent); }
.hotspot-label { position:absolute; left:.4rem; top:.4rem; max-width:calc(100% - .8rem); padding:.28rem .45rem; border-radius:.3rem; background:rgba(5,15,18,.9); color:#fff; font-size:.75rem; font-weight:700; opacity:0; transform:translateY(4px); transition:.16s ease; pointer-events:none; }
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity:1; transform:none; }
.hq-help { padding:.8rem 1rem; color:var(--muted); text-align:center; }
.hq-help kbd { padding:.12rem .35rem; border:1px solid #7f7464; border-bottom-width:2px; border-radius:.25rem; background:#21160f; color:var(--ink); }
dialog { padding:0; border:0; color:var(--ink); background:var(--panel); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(2px); }
.artefact-dialog { width:min(31rem, 100%); max-width:100%; height:100dvh; max-height:100dvh; margin:0 0 0 auto; }
.dialog-inner { min-height:100%; display:flex; flex-direction:column; padding:clamp(1.25rem,4vw,2rem); border-left:1px solid var(--border); }
.dialog-top { display:flex; justify-content:space-between; align-items:start; gap:1rem; }
.artefact-category { margin:0 0 .55rem; color:var(--accent-2); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.artefact-title { margin:0; font-size:clamp(1.75rem,4vw,2.65rem); line-height:1.05; }
.close-button { flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--border); color:var(--ink); background:transparent; cursor:pointer; font-size:1.5rem; }
.close-button:hover, .close-button:focus-visible { background:rgba(223,162,58,.16); outline:2px solid var(--accent); outline-offset:2px; }
.artefact-teaser { margin:1.5rem 0 1rem; color:var(--accent); font-size:1.15rem; font-weight:750; }
.artefact-body { margin:0; color:#eee4d3; line-height:1.65; }
.artefact-quote { margin:1.5rem 0 0; padding:1rem 1rem 1rem 1.15rem; border-left:4px solid var(--accent); background:rgba(255,255,255,.045); color:#fff8e9; font-style:italic; line-height:1.55; }
.artefact-quote footer { margin-top:.65rem; color:var(--muted); font-style:normal; }
.dialog-nav { margin-top:auto; padding-top:2rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.65rem; }
.dialog-nav button { min-height:2.75rem; border:1px solid var(--border); border-radius:.45rem; background:rgba(255,255,255,.04); color:var(--ink); cursor:pointer; padding:.6rem .8rem; }
.dialog-nav button:hover, .dialog-nav button:focus-visible { background:rgba(223,162,58,.16); outline:2px solid var(--accent); outline-offset:2px; }
.dialog-index { color:var(--muted); font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hq-page-main { padding-bottom: clamp(2rem,5vw,4rem); }
.hq-toolbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; justify-content:flex-end; }
.hq-site-return { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; border:1px solid var(--border); border-radius:.45rem; color:var(--ink); text-decoration:none; background:rgba(255,255,255,.04); }
.hq-site-return:hover,.hq-site-return:focus-visible { background:rgba(223,162,58,.16); outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:760px) {
  .hq-intro { align-items:start; flex-direction:column; }
  .hq-toolbar { justify-content:flex-start; }
  .hq-stage { aspect-ratio:9/16; }
  .hotspot { left:calc(var(--mx) * 1%); top:calc(var(--my) * 1%); width:calc(var(--mw) * 1%); height:calc(var(--mh) * 1%); border-radius:.35rem; }
  .hotspot::after { width:2.15rem; height:2.15rem; right:.2rem; bottom:.2rem; }
  .hotspot-label { display:none; }
  .artefact-dialog { width:100%; height:auto; max-height:min(86dvh, 48rem); margin:auto 0 0; border-radius:1rem 1rem 0 0; }
  .dialog-inner { min-height:0; max-height:inherit; overflow:auto; border-left:0; border-top:1px solid var(--border); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }