:root {
  color-scheme: dark;
  --ink: #f4f2e9;
  --muted: #a9b0bd;
  --cyan: #7ff7e5;
  --amber: #ffbd67;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #03050b; }

body { color: var(--ink); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 15%, rgba(1, 3, 9, .18) 55%, rgba(1, 3, 9, .72) 100%);
  box-shadow: inset 0 0 12rem rgba(0, 0, 0, .6);
}

.topbar {
  position: fixed;
  z-index: 3;
  top: max(1.5rem, env(safe-area-inset-top));
  left: max(1.5rem, env(safe-area-inset-left));
  right: max(1.5rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.brand { display: flex; gap: .7rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 650; font-size: .82rem; letter-spacing: .24em; }
.brand-mark { width: 1.3rem; height: 1.3rem; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 1rem rgba(127,247,229,.5); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 3px -5px; border: 1px solid rgba(127,247,229,.5); border-radius: 50%; transform: rotate(-28deg); }
.status { font: 500 .68rem/1.2 ui-monospace, "SFMono-Regular", monospace; letter-spacing: .16em; color: var(--muted); }
.status span { display: inline-block; width: .43rem; height: .43rem; border-radius: 50%; margin-right: .45rem; background: var(--cyan); box-shadow: 0 0 .8rem var(--cyan); }

.intro { position: fixed; z-index: 4; left: clamp(1.5rem, 7vw, 7rem); top: 50%; transform: translateY(-46%); width: min(35rem, calc(100vw - 3rem)); transition: opacity .6s, transform .6s; pointer-events: none; }
.intro.hidden { opacity: 0; transform: translateY(-43%); }
.eyebrow { margin: 0 0 1rem; color: var(--cyan); font-size: .75rem; font-weight: 600; letter-spacing: .3em; }
h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(3.4rem, 8vw, 7.3rem); font-weight: 400; letter-spacing: -.06em; line-height: .94; text-shadow: 0 0 3rem rgba(127,247,229,.14); }
.lead { margin: 1.4rem 0 1.8rem; color: #c3c7d0; font-size: clamp(1rem, 2vw, 1.22rem); letter-spacing: .08em; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; pointer-events: auto; }
button { min-height: 3.2rem; border-radius: 0; padding: 0 1.25rem; font: 650 .8rem/1 system-ui, sans-serif; letter-spacing: .12em; cursor: pointer; }
.vr-button { color: #04100f; background: var(--cyan); border: 1px solid var(--cyan); display: inline-flex; align-items: center; gap: .7rem; box-shadow: 0 0 2.2rem rgba(127,247,229,.15); }
.vr-button:hover:not(:disabled) { background: #c4fff7; transform: translateY(-1px); }
.vr-button:disabled { color: #747b83; background: rgba(20,25,33,.8); border-color: #363d47; cursor: not-allowed; }
.sound-button { color: var(--ink); background: rgba(7, 11, 20, .7); border: 1px solid rgba(255,255,255,.22); }
.sound-button:hover { border-color: rgba(255,255,255,.55); }
.vr-icon { width: 1.35rem; height: .75rem; border: 1.5px solid currentColor; border-radius: .2rem .2rem .5rem .5rem; position: relative; }
.vr-icon::before, .vr-icon::after { content: ""; position: absolute; top: .2rem; width: .28rem; height: .28rem; border: 1px solid currentColor; border-radius: 50%; }
.vr-icon::before { left: .2rem; } .vr-icon::after { right: .2rem; }
.hint { margin-top: 1.05rem; color: #777f8e; font: .72rem/1.4 ui-monospace, monospace; letter-spacing: .08em; }

.meter { position: fixed; z-index: 3; right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.6rem, env(safe-area-inset-bottom)); width: min(12rem, 35vw); text-align: right; pointer-events: none; }
.meter-label { display: block; font: .65rem/1.2 ui-monospace, monospace; letter-spacing: .2em; color: #7d8490; }
.meter strong { display: block; margin: .2rem 0 .45rem; color: var(--amber); font: 300 2rem/1 ui-monospace, monospace; }
.meter-track { height: 1px; background: rgba(255,255,255,.18); }
.meter-track i { display: block; width: 0%; height: 100%; background: var(--amber); box-shadow: 0 0 .8rem var(--amber); transition: width .5s; }

.orientation { position: fixed; z-index: 3; left: 50%; bottom: 2rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; color: #68707c; font: .62rem ui-monospace, monospace; letter-spacing: .12em; pointer-events: none; }
.orientation i { width: 2.2rem; height: 1px; background: rgba(255,255,255,.16); }

button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 640px) {
  .status, .orientation { display: none; }
  .intro { top: auto; bottom: 1.6rem; transform: none; }
  .intro.hidden { transform: translateY(.5rem); }
  h1 { font-size: clamp(3rem, 18vw, 5rem); }
  .lead { max-width: 18rem; line-height: 1.7; }
  .meter { top: 5rem; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }