:root{--ink: #e8e6e2;--dim: #9a978f;--accent: #29c3d6;--tan: #cbc0a8;--bg: #0a0b0d;--panel: #12141800}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}#app{display:grid;grid-template-columns:1fr;min-height:100vh}#stage{position:relative;width:100%;height:78vh;min-height:420px;background:radial-gradient(62% 52% at 50% 42%,#23262b,#14161a 45%,#0a0b0d);overflow:hidden}#stage canvas{display:block;touch-action:none}#loader{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:.9rem;justify-items:center;z-index:5;transition:opacity .4s ease;pointer-events:none}#loader.done{opacity:0}#loader .bar{width:min(210px,40vw);height:2px;background:#2a2d33;overflow:hidden}#bar-fill{display:block;height:100%;width:0%;background:var(--accent);transition:width .18s linear}#loader p{margin:0;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}.titleblock{position:absolute;top:clamp(1rem,4vh,3rem);left:clamp(1rem,5vw,4rem);z-index:4;max-width:20rem;pointer-events:none}.titleblock>*{pointer-events:auto}.eyebrow{margin:0 0 .35rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.titleblock h1{margin:0;font-size:clamp(2.4rem,6vw,4rem);font-weight:300;letter-spacing:-.02em;line-height:.95}.titleblock .sub{margin:.7rem 0 1.1rem;font-size:.95rem;line-height:1.45;color:var(--dim);max-width:17rem}#reset{background:none;border:1px solid #33373e;color:var(--dim);padding:.45rem .85rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .16s,color .16s}#reset:hover,#reset:focus-visible{border-color:var(--accent);color:var(--ink)}.hotspot{position:relative;cursor:pointer;transform:translate(-50%,-50%);pointer-events:auto}.hotspot .dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--accent);background:#0a0b0dcc;box-shadow:0 0 0 4px #29c3d61a;transition:background .16s,box-shadow .16s}.hotspot[data-open=true] .dot,.hotspot:hover .dot{background:var(--accent);box-shadow:0 0 0 7px #29c3d626}.hotspot .card{position:absolute;left:20px;top:-8px;width:15rem;padding:.7rem .85rem;background:#0e1013f2;border:1px solid #2b2f36;border-left:2px solid var(--accent);opacity:0;visibility:hidden;transform:translate(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}.hotspot[data-open=true] .card{opacity:1;visibility:visible;transform:none}.hotspot .card h3{margin:0 0 .3rem;font-size:.82rem;letter-spacing:.04em}.hotspot .card p{margin:0;font-size:.76rem;line-height:1.45;color:var(--dim)}.hotspot.behind{opacity:.25}.readout{padding:clamp(2rem,6vw,5rem) clamp(1rem,5vw,4rem) 5rem;max-width:44rem}.readout h2{margin:2rem 0 .6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500}.readout h2:first-child{margin-top:0}.readout p{margin:0 0 .9rem;line-height:1.65;color:#c7c4bd}.readout dl{margin:0}.readout dt{margin-top:.9rem;font-size:.86rem;color:var(--tan);font-weight:500}.readout dd{margin:.2rem 0 0;font-size:.86rem;line-height:1.6;color:var(--dim)}.readout .caveat{font-size:.78rem;color:#7c7972;font-style:italic}.fallback{padding:2rem;color:var(--dim)}@media (max-width: 720px){#stage{height:62vh}.titleblock{position:static;padding:1.5rem 1rem 0;max-width:none}.hotspot .card{width:12rem}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important}}