:root {
  color-scheme: dark;
  --ink: #f0eadf;
  --dim: #aaa092;
  --gold: #d2ad67;
  --violet: #a884ff;
  --panel: rgba(12, 10, 17, 0.72);
  --line: rgba(218, 188, 133, 0.22);
  --luminance: 0.42;
  --motion: 0.32;
  --texture: 0.62;
}

* { box-sizing: border-box; }

html {
  background: #07070a;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 300px;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(67, 45, 94, 0.2), transparent 36rem),
    #07070a;
  color: var(--ink);
  font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
}

button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-200%);
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: #08070b;
}
.skip-link:focus { transform: none; }

#temple-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#temple-canvas,
#temple-canvas canvas,
#temple-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#temple-canvas canvas { display: block; }

#temple-fallback {
  background:
    linear-gradient(180deg, rgba(2, 3, 8, 0.25), rgba(7, 6, 10, 0.9)),
    radial-gradient(circle at 50% 24%, #2b2452 0, #15101e 19rem, #08080b 48rem);
  transition: opacity 1s ease;
}

.webgl-ready #temple-fallback { opacity: 0; }

.fallback-moon {
  position: absolute;
  top: 13vh;
  left: 50%;
  width: min(24vw, 12rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f1e5cc, #9b8bb7 52%, #302744 75%);
  box-shadow: 0 0 5rem rgba(166, 139, 236, 0.3);
}

.fallback-column {
  position: absolute;
  top: 10vh;
  bottom: -5vh;
  width: clamp(4rem, 12vw, 10rem);
  opacity: 0.38;
  background:
    repeating-linear-gradient(90deg, #2e2930 0 8%, #0e0d12 10% 17%),
    linear-gradient(#474047, #121117);
  box-shadow: inset 0 0 2rem #000;
}
.fallback-column::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -20%;
  width: 140%;
  height: 3rem;
  background: linear-gradient(#373038, #151318);
}
.fallback-column-left { left: 5vw; transform: perspective(30rem) rotateY(12deg); }
.fallback-column-right { right: 5vw; transform: perspective(30rem) rotateY(-12deg); }

.fallback-chasm {
  position: absolute;
  left: 50%;
  bottom: -22vh;
  width: min(72vw, 48rem);
  height: 40vh;
  transform: translateX(-50%) rotateX(68deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, #000 0 38%, #4c2d66 48%, #130f18 62%);
  box-shadow: 0 0 5rem rgba(158, 83, 205, 0.22);
}

.temple-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 35%, rgba(0,0,0,.72)),
    radial-gradient(ellipse, transparent 35%, rgba(0,0,0,.78) 105%);
}

.temple-grain {
  position: absolute;
  inset: -50%;
  opacity: calc(0.025 + var(--texture) * 0.035);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grain 0.28s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 4%); }
  100% { transform: translate(-2%, -2%); }
}

#ritual-ui {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: min(100% - 2rem, 72rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
}

.temple-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.78rem;
}
.wordmark-mark { color: var(--violet); font-size: 1.2rem; text-shadow: 0 0 1rem var(--violet); }

.quiet-control {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.quiet-control:hover, .quiet-control:focus-visible {
  color: var(--ink);
  border-color: var(--line);
}

.threshold {
  align-self: center;
  max-width: 48rem;
  margin: clamp(8rem, 23vh, 16rem) auto 2rem;
  text-align: center;
  transition: opacity 0.8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.7rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 0 3rem rgba(6, 4, 10, 0.9);
}

.intro {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--dim);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  text-wrap: balance;
}

.reading-space {
  width: min(100%, 48rem);
  margin: 0 auto;
}

#thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-margin-top: 5rem;
}

.message {
  max-width: 88%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  background: rgba(9, 8, 12, 0.76);
  backdrop-filter: blur(18px);
  line-height: 1.6;
  animation: message-in 0.45s ease-out;
}
.message.user {
  align-self: flex-end;
  color: #d8d0c4;
  border-color: rgba(255,255,255,.1);
  font-size: 0.92rem;
}
.message.pythia {
  align-self: flex-start;
  max-width: 42rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border-color: rgba(183, 139, 255, .32);
  background: linear-gradient(135deg, rgba(21, 15, 30, .88), rgba(7, 7, 11, .76));
  color: #dfc7ff;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-style: italic;
  box-shadow: 0 1.5rem 5rem rgba(0,0,0,.28);
}
.message.error { align-self: flex-start; color: #f1a6a6; }

@keyframes message-in {
  from { opacity: 0; transform: translateY(0.8rem); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.ritual-status {
  min-height: 1.5rem;
  margin: 1rem 0;
  color: var(--gold);
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
}

.offering-space {
  width: min(100%, 48rem);
  margin: 1rem auto 0;
}

#starter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
#starter-chips.hidden { display: none; }

.chip {
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(8, 8, 11, .5);
  color: var(--dim);
  cursor: pointer;
}
.chip:hover, .chip:focus-visible { color: var(--ink); border-color: var(--gold); }

#question-form label {
  display: block;
  margin: 0 0 0.45rem 0.2rem;
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.offering-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 0.45rem;
  border: 1px solid rgba(203, 174, 124, .34);
  background: rgba(8, 7, 11, .8);
  box-shadow: 0 1.2rem 4rem rgba(0,0,0,.32), inset 0 0 2rem rgba(148,94,213,.04);
  backdrop-filter: blur(20px);
}

#question-input {
  width: 100%;
  min-height: 52px;
  max-height: 10rem;
  resize: none;
  border: 0;
  outline: 0;
  padding: 0.85rem;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}
#question-input::placeholder { color: #7f766b; }

.offering-field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(210,173,103,.3), 0 1.2rem 4rem rgba(0,0,0,.4);
}

.offering-field button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 92px;
  min-height: 52px;
  justify-content: center;
  border: 0;
  background: var(--ink);
  color: #0a0810;
  cursor: pointer;
}
.offering-field button:hover { background: #fff8e9; }
.offering-field button:disabled { opacity: .45; cursor: wait; }

.after-reading-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
}

.signal-beacon {
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(168,132,255,.36);
  border-radius: 999px;
  background: rgba(17,12,25,.82);
  color: #cdb7ff;
  cursor: pointer;
}

.signal-panel {
  margin-top: 0.8rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--line);
  background: rgba(8, 7, 11, .94);
  backdrop-filter: blur(24px);
}
.signal-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.signal-panel h2 { margin: 0; font-size: 1.45rem; font-weight: 400; }

.temple-footer {
  width: min(100%, 40rem);
  margin: 2rem auto 0;
  color: var(--dim);
  text-align: center;
  font-size: 0.75rem;
}
.disclaimer { line-height: 1.55; }
.field-note summary { min-height: 44px; padding: .8rem; cursor: pointer; }
.field-note p { line-height: 1.6; text-align: left; }

body[data-ritual="ask"] .threshold,
body[data-ritual="receive"] .threshold,
body[data-ritual="idle"] .threshold {
  opacity: 0;
  transform: translateY(-3rem) scale(.96);
  position: absolute;
  pointer-events: none;
}

body[data-ritual="enter"] .reading-space { min-height: 0; }
body[data-ritual="receive"] .offering-space,
body[data-ritual="idle"] .offering-space { margin-top: 2rem; }

@media (max-width: 640px) {
  #ritual-ui { width: min(100% - 1.2rem, 48rem); }
  .temple-header { padding-inline: .2rem; }
  .wordmark { letter-spacing: .22em; }
  .threshold { margin-top: clamp(7rem, 20vh, 11rem); }
  h1 { font-size: clamp(2.45rem, 13vw, 4.2rem); }
  .intro { font-size: .96rem; padding-inline: .6rem; }
  .chip {
    width: 100%;
    border-radius: 0.8rem;
    padding: 0.8rem 0.9rem;
    text-align: left;
    line-height: 1.35;
  }
  .message { max-width: 94%; }
  .message.pythia {
    max-width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
    line-height: 1.55;
  }
  .offering-field { grid-template-columns: 1fr; }
  .offering-field button { width: 100%; }
  .fallback-column-left { left: -1rem; }
  .fallback-column-right { right: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .temple-grain { display: none; }
}

/* Exploration temple */
[hidden] { display: none !important; }

/* Living Descent */
.descent-stage {
  --descent-rgb: 168, 132, 255;
  --descent-core: #d8c6ff;
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--descent-rgb), .24), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(17,16,26,.82), rgba(3,3,7,.7) 72%);
  color: #fffaf1;
  cursor: pointer;
  isolation: isolate;
}
.descent-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  opacity: .55;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0 10deg,
      rgba(var(--descent-rgb), .5) 11deg,
      transparent 13deg 28deg
    );
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: descent-vortex 4s cubic-bezier(.32,0,.2,1) forwards;
}
body[data-portal="sky"] .descent-stage {
  --descent-rgb: 157, 189, 255;
  --descent-core: #e6efff;
}
body[data-portal="air"] .descent-stage {
  --descent-rgb: 111, 225, 197;
  --descent-core: #dbfff7;
}
body[data-portal="earth"] .descent-stage {
  --descent-rgb: 209, 123, 71;
  --descent-core: #ffd8ba;
}
body[data-portal="time"] .descent-stage {
  --descent-rgb: 226, 191, 105;
  --descent-core: #fff0bd;
}
body[data-portal="world"] .descent-stage {
  --descent-rgb: 197, 132, 255;
  --descent-core: #edd7ff;
}
body[data-view="descent"] #ritual-ui {
  opacity: 0;
  pointer-events: none;
}
.descent-tunnel,
.descent-rings,
.descent-streams,
.descent-core {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.descent-tunnel { perspective: 650px; transform-style: preserve-3d; }
.descent-rings {
  inset: -45%;
  opacity: .72;
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0 7%,
      rgba(var(--descent-rgb), .08) 7.3%,
      rgba(var(--descent-rgb), .5) 7.6%,
      transparent 8%
    );
  animation: descent-rings 4s cubic-bezier(.55,.02,.4,1) forwards;
}
.descent-streams {
  inset: -30%;
  opacity: .52;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0 8deg,
      rgba(var(--descent-rgb), .28) 9deg,
      transparent 11deg 25deg
    );
  filter: blur(2px);
  animation: descent-spin 4s cubic-bezier(.4,0,.25,1) forwards;
}
.descent-core {
  inset: 50%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: var(--descent-core);
  box-shadow: 0 0 2rem .8rem var(--descent-core);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
body[data-descent-phase="core"] .descent-core,
body[data-descent-phase="complete"] .descent-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
}
body[data-portal="air"] .descent-streams {
  filter: blur(8px);
  animation-name: descent-air;
}
body[data-portal="earth"] .descent-rings {
  border-radius: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 7%,
      rgba(var(--descent-rgb), .12) 7.4%,
      rgba(var(--descent-rgb), .62) 7.8%,
      transparent 8.2%
    );
  clip-path: polygon(7% 0, 96% 3%, 88% 100%, 12% 94%);
}
body[data-portal="time"] .descent-rings { animation-direction: reverse; }
body[data-portal="world"] .descent-streams {
  background:
    radial-gradient(circle at 18% 28%, rgba(var(--descent-rgb), .8) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 19%, rgba(var(--descent-rgb), .7) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 72%, rgba(var(--descent-rgb), .6) 0 2px, transparent 3px),
    repeating-conic-gradient(from 0deg, transparent 0 18deg, rgba(var(--descent-rgb), .18) 19deg, transparent 21deg);
}
.descent-layer {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: min(38rem, calc(100vw - 3rem));
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 4rem) scale(.84);
  transition: opacity .65s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.descent-layer strong {
  display: block;
  margin-top: .55rem;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;
}
.descent-label {
  color: var(--descent-core);
  font: .62rem/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.descent-observation { top: 36%; }
.descent-source { top: 57%; }
body[data-descent-phase="enter"] .descent-observation,
body[data-descent-phase="strata"] .descent-source {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
body[data-descent-phase="strata"] .descent-observation {
  opacity: 0;
  transform: translate(-50%, -10rem) scale(1.35);
}
.descent-source strong { font-size: clamp(1.2rem, 3vw, 2.2rem); }
.descent-progress-track {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.descent-progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--descent-core);
  transform: scaleX(0);
  transform-origin: left;
  animation: descent-progress 4s linear forwards;
}
.descent-skip {
  position: absolute;
  z-index: 4;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.66);
  font: .62rem ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
@keyframes descent-rings {
  0% { transform: translateZ(-30rem) scale(.18); opacity: 0; }
  18% { opacity: .72; }
  100% { transform: translateZ(36rem) scale(1.8) rotate(24deg); opacity: 0; }
}
@keyframes descent-spin {
  from { transform: scale(.4) rotate(0deg); opacity: 0; }
  20% { opacity: .52; }
  to { transform: scale(2.4) rotate(110deg); opacity: 0; }
}
@keyframes descent-air {
  from { transform: translate3d(-25%, 18%, 0) scale(.6) rotate(-20deg); }
  to { transform: translate3d(28%, -20%, 0) scale(2.2) rotate(65deg); }
}
@keyframes descent-progress { to { transform: scaleX(1); } }
@keyframes descent-vortex {
  0% { transform: scale(.25) rotate(-25deg); opacity: 0; }
  20% { opacity: .62; }
  70% { opacity: .48; }
  100% { transform: scale(2.8) rotate(135deg); opacity: 0; }
}

#exploration-chamber {
  display: grid;
  grid-template-rows: auto minmax(25rem, 1fr) auto;
  min-height: calc(100svh - 5rem);
  align-items: center;
}

.exploration-intro {
  max-width: 34rem;
  margin: 2vh auto -2rem;
  text-align: center;
}

.exploration-intro h1 {
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: .86;
}

.portal-orbit {
  position: relative;
  width: min(100%, 68rem);
  min-height: 30rem;
  margin-inline: auto;
}

.oracle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-content: center;
  width: 8rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(168,132,255,.42);
  background: radial-gradient(circle, rgba(108,52,165,.4), rgba(8,7,12,.62) 64%);
  box-shadow: 0 0 5rem rgba(139,83,220,.3), inset 0 0 2rem rgba(255,255,255,.04);
}

.oracle-label > * { transform: rotate(-45deg); text-align: center; }
.oracle-label span {
  color: var(--dim);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.oracle-label strong { color: var(--ink); font-size: .78rem; font-weight: 400; }

.portal-grid { position: absolute; inset: 0; }

.portal-button {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .65rem;
  width: min(14rem, 27vw);
  min-height: 5rem;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(7,7,11,.82), rgba(30,20,43,.42));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(15px);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.portal-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0;
  border: 1px solid var(--violet);
  box-shadow: 0 0 2.4rem rgba(168,132,255,.32);
  transition: opacity .35s ease;
}

.portal-button:hover,
.portal-button:focus-visible {
  z-index: 2;
  transform: translateY(-.35rem) scale(1.03);
  outline: 0;
}
.portal-button:hover::before,
.portal-button:focus-visible::before { opacity: 1; }
.portal-button strong { font-size: 1.18rem; font-weight: 400; }
.portal-index {
  align-self: center;
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: .56rem;
  letter-spacing: .1em;
}
.portal-value {
  grid-column: 1 / -1;
  color: var(--dim);
  font-size: .72rem;
  line-height: 1.35;
}
.portal-button.dormant { opacity: .34; filter: grayscale(.6); cursor: not-allowed; }

.portal-sky { top: 6%; left: 50%; transform: translateX(-50%); }
.portal-sky:hover, .portal-sky:focus-visible { transform: translateX(-50%) translateY(-.35rem) scale(1.03); }
.portal-air { top: 35%; left: 3%; }
.portal-earth { bottom: 4%; left: 19%; }
.portal-time { bottom: 4%; right: 19%; }
.portal-world { top: 35%; right: 3%; }

.exploration-actions {
  display: flex;
  position: fixed;
  z-index: 7;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  transform: translateX(-50%);
}
.signal-rail {
  bottom: max(1rem, env(safe-area-inset-bottom));
  padding: .38rem .55rem;
  border-radius: 999px;
  background: rgba(5,5,9,.58);
  backdrop-filter: blur(12px);
}
.signal-count {
  padding: .35rem .5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: .58rem/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.signal-count strong { color: var(--gold); font-weight: 500; }
.signal-count:hover,
.signal-count:focus-visible {
  outline: 0;
  background: rgba(255,255,255,.06);
  color: var(--ink);
}
.signal-rail .ritual-status {
  max-width: 18rem;
  margin: 0;
  overflow: hidden;
  color: var(--dim);
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signal-inspector {
  position: fixed;
  z-index: 12;
  bottom: 4.6rem;
  left: 50%;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(31rem, calc(100svh - 8rem));
  padding: 1.2rem;
  overflow-y: auto;
  border: 1px solid rgba(210,173,103,.2);
  border-radius: 1.5rem;
  background: rgba(6,6,10,.94);
  box-shadow: 0 1.5rem 6rem rgba(0,0,0,.62);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
}
.signal-inspector-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.signal-inspector-heading h2 {
  margin: .25rem 0 0;
  font-size: 1.65rem;
  font-weight: 400;
}
.signal-inspector-heading button {
  width: 2.5rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
}
.signal-source-list {
  display: grid;
  gap: .55rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.signal-source-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.signal-source-list li > span {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: .82rem;
}
.signal-source-list a,
.signal-source-list time {
  color: var(--dim);
  font-size: .68rem;
}
.signal-source-list a { color: #c5a7ff; }
.signal-privacy {
  margin: 0;
  color: var(--dim);
  font-size: .68rem;
}

.surprise-button {
  min-height: 48px;
  padding: .7rem 1.25rem;
  border: 1px solid rgba(210,173,103,.5);
  background: rgba(8,7,12,.72);
  color: var(--gold);
  letter-spacing: .08em;
  cursor: pointer;
}
.surprise-button:disabled { opacity: .35; cursor: wait; }
.surprise-button:not(:disabled):hover { box-shadow: 0 0 2rem rgba(210,173,103,.2); }

.portal-reveal {
  position: relative;
  align-self: center;
  width: min(100%, 42rem);
  margin: clamp(5rem, 14vh, 10rem) auto 2rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
}
.portal-reveal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -16%;
  opacity: .9;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(5,5,9,.92) 0 36%, rgba(5,5,9,.62) 58%, transparent 76%);
  filter: blur(14px);
  pointer-events: none;
}

.portal-button {
  width: 10.5rem;
  min-height: 10.5rem;
  place-content: center;
  padding: 1.2rem;
  overflow: hidden;
  border: 0;
  text-align: center;
  background: radial-gradient(circle at 42% 35%, rgba(76,55,98,.78), rgba(8,7,12,.72) 68%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 3rem rgba(0,0,0,.28);
}
.portal-button::before { inset: .35rem; border-radius: inherit; }
.portal-button::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border-radius: inherit;
  opacity: .64;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}
.portal-button strong,
.portal-value,
.portal-index { z-index: 1; }
.portal-button strong,
.portal-value { position: relative; }
.portal-button strong { font-size: 1.35rem; }
.portal-index { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); }
.portal-value { max-width: 8rem; margin-top: .4rem; }

.portal-sky {
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, rgba(190,210,255,.46), rgba(30,27,61,.6) 48%, rgba(8,7,12,.4) 70%);
}
.portal-sky::after {
  border: 1px solid rgba(213,225,255,.24);
  background: radial-gradient(circle, rgba(210,222,255,.16), transparent 62%);
  animation: portal-orbit 6s ease-in-out infinite;
}
.portal-air {
  border-radius: 58% 42% 64% 36% / 43% 56% 44% 57%;
  background: radial-gradient(ellipse at 38% 32%, rgba(143,228,207,.36), rgba(20,48,48,.48) 52%, rgba(8,7,12,.36) 72%);
}
.portal-air::after {
  inset: .35rem;
  border: 1px solid rgba(143,228,207,.2);
  background: radial-gradient(ellipse, rgba(143,228,207,.16), transparent 65%);
  animation: portal-breathe 5s ease-in-out infinite;
}
.portal-earth {
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 32% 42%, rgba(226,163,98,.48) 0 9%, transparent 10%),
    radial-gradient(ellipse at 68% 58%, rgba(164,103,61,.48) 0 13%, transparent 14%),
    radial-gradient(circle at 38% 30%, rgba(209,138,88,.44), rgba(58,35,29,.7) 62%, rgba(8,7,12,.4));
}
.portal-earth::after {
  inset: -12%;
  opacity: .5;
  background: repeating-linear-gradient(12deg, rgba(242,184,116,.22) 0 3px, transparent 4px 15px);
  animation: portal-globe 9s ease-in-out infinite alternate;
}
.portal-time {
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, rgba(226,191,105,.35) 38%, rgba(51,37,20,.68) 58%, transparent 62%);
}
.portal-time::after {
  border: 1px solid rgba(226,191,105,.26);
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(226,191,105,.42) 78%, transparent 86%);
  animation: portal-clock 7s linear infinite;
}
.portal-world {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(197,132,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 45%, rgba(197,132,255,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 72%, rgba(197,132,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(94,52,125,.38), rgba(8,7,12,.5) 67%);
}
.portal-world::after {
  background:
    radial-gradient(circle at 24% 68%, rgba(224,190,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 28%, rgba(224,190,255,.7) 0 2px, transparent 3px),
    linear-gradient(35deg, transparent 48%, rgba(197,132,255,.18) 49% 51%, transparent 52%);
  animation: portal-network 4s ease-in-out infinite;
}
@keyframes portal-orbit {
  50% { transform: translateZ(0) scale(1.08); opacity: .9; }
}
@keyframes portal-breathe {
  0%, 100% { transform: translateZ(0) rotate(-2deg) scale(.98, 1.02); opacity: .52; }
  50% { transform: translateZ(0) rotate(2deg) scale(1.08, .94); opacity: .86; }
}
@keyframes portal-globe {
  from { transform: translate3d(-8%, 0, 0) rotate(-2deg); opacity: .42; }
  to { transform: translate3d(8%, 0, 0) rotate(2deg); opacity: .62; }
}
@keyframes portal-clock {
  50% { opacity: .94; }
  to { transform: translateZ(0) rotate(360deg); opacity: .64; }
}
@keyframes portal-network {
  50% { transform: translateZ(0) rotate(4deg) scale(1.1); opacity: 1; }
}

body[data-view="reveal"] #exploration-chamber {
  display: block;
  height: 0;
  min-height: 0;
  overflow: visible;
}
body[data-view="reveal"] .exploration-intro,
body[data-view="reveal"] .oracle-label {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
}
body[data-view="reveal"] .signal-rail {
  right: auto;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 1rem;
  transform: none;
}
body[data-view="reveal"] .signal-rail .surprise-button,
body[data-view="reveal"] .signal-rail .ritual-status { display: none; }
body[data-view="reveal"] .temple-footer { visibility: hidden; }
body[data-view="reveal"] .portal-orbit {
  position: fixed;
  z-index: 8;
  top: 50%;
  right: 1.25rem;
  bottom: auto;
  left: auto;
  width: auto;
  min-height: 0;
  transform: translateY(-50%);
}
body[data-view="reveal"] .portal-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
body[data-view="reveal"] .portal-button,
body[data-view="reveal"] .portal-sky,
body[data-view="reveal"] .portal-air,
body[data-view="reveal"] .portal-earth,
body[data-view="reveal"] .portal-time,
body[data-view="reveal"] .portal-world {
  position: relative;
  inset: auto;
  width: 4.2rem;
  min-height: 4.2rem;
  transform: none;
  padding: .25rem;
}
body[data-view="reveal"] .portal-button:hover,
body[data-view="reveal"] .portal-button:focus-visible,
body[data-view="reveal"] .portal-sky:hover,
body[data-view="reveal"] .portal-sky:focus-visible {
  transform: translateY(-.25rem) scale(1.04);
}
body[data-view="reveal"] .portal-index,
body[data-view="reveal"] .portal-value { display: none; }
body[data-view="reveal"] .portal-button strong { font-size: .72rem; }
body[data-view="reveal"] .portal-reveal {
  width: min(calc(100% - 12rem), 42rem);
  margin-top: clamp(5rem, 12vh, 8rem);
  margin-bottom: 3rem;
}

body[data-portal="sky"] .portal-reveal { color: #eff4ff; }
body[data-portal="sky"] .portal-reveal::before {
  background: radial-gradient(ellipse, rgba(22,25,54,.88), rgba(7,8,18,.5) 58%, transparent 76%);
}
body[data-portal="air"] .portal-reveal { color: #e6fff8; }
body[data-portal="air"] .portal-reveal::before {
  border-radius: 58% 42% 64% 36% / 43% 56% 44% 57%;
  background: radial-gradient(ellipse, rgba(11,42,39,.84), rgba(5,13,14,.48) 58%, transparent 76%);
}
body[data-portal="earth"] .portal-reveal { color: #fff0e5; }
body[data-portal="earth"] .portal-reveal::before {
  border-radius: 42% 58% 36% 64% / 52% 40% 60% 48%;
  background: radial-gradient(ellipse, rgba(54,29,20,.86), rgba(15,8,7,.5) 58%, transparent 76%);
}
body[data-portal="time"] .portal-reveal { color: #fff8df; }
body[data-portal="time"] .portal-reveal::before {
  background: radial-gradient(circle, rgba(46,34,13,.86), rgba(10,8,4,.48) 56%, transparent 72%);
}
body[data-portal="world"] .portal-reveal { color: #f4eaff; }

.return-control {
  min-height: 44px;
  margin: -1rem 0 1.5rem;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.portal-reveal h2 {
  max-width: 32rem;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: .98;
}
.reveal-fact {
  margin: 1.3rem 0 .7rem;
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal-text {
  max-width: 36rem;
  min-height: 5rem;
  color: #e4d5f5;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.6;
}
.portal-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: 1rem;
  color: var(--dim);
  font-size: .7rem;
}
.portal-provenance p { margin: 0; }
.portal-provenance a { color: #c5a7ff; }
.glimpse-echoes {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.glimpse-echo {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.26);
  color: var(--dim);
  font: .55rem ui-monospace, "SFMono-Regular", monospace;
  cursor: pointer;
}
.glimpse-echo:hover,
.glimpse-echo:focus-visible {
  border-color: currentColor;
  color: var(--ink);
}

.followup-form { margin-top: 1.4rem; }
.followup-form label {
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.followup-field { display: flex; margin-top: .45rem; border: 1px solid var(--line); }
.followup-field input { flex: 1; min-width: 0; border: 0; padding: .8rem; background: rgba(0,0,0,.3); color: var(--ink); }
.followup-field button { border: 0; padding-inline: 1rem; background: var(--ink); color: #09080d; }

@media (max-width: 640px) {
  #exploration-chamber {
    grid-template-rows: auto auto auto;
    min-height: calc(100svh - 4rem);
  }
  .exploration-intro { margin-top: 5rem; }
  .exploration-intro h1 { font-size: clamp(3.4rem, 16vw, 4.8rem); }
  .portal-orbit {
    display: grid;
    align-content: end;
    min-height: 25rem;
    margin-top: -2rem;
    overflow: hidden;
  }
  .oracle-label { top: 34%; width: 6.5rem; }
  .portal-grid {
    position: relative;
    display: flex;
    gap: .65rem;
    align-items: stretch;
    overflow-x: auto;
    padding: 0 .2rem .8rem;
    scroll-snap-type: x mandatory;
  }
  .portal-button,
  .portal-sky,
  .portal-air,
  .portal-earth,
  .portal-time,
  .portal-world {
    position: relative;
    inset: auto;
    flex: 0 0 66vw;
    width: 66vw;
    min-height: 66vw;
    transform: none;
    scroll-snap-align: center;
  }
  .portal-button:hover,
  .portal-button:focus-visible,
  .portal-sky:hover,
  .portal-sky:focus-visible { transform: translateY(-.2rem); }
  .exploration-actions { margin-top: .3rem; }
  .signal-rail {
    gap: .55rem;
    max-width: calc(100vw - 1rem);
  }
  .signal-rail .ritual-status { display: none; }
  .signal-inspector {
    bottom: 5.7rem;
    max-height: calc(100svh - 8rem);
  }
  .signal-source-list li { grid-template-columns: 1fr; }
  .portal-reveal {
    width: calc(100% - .4rem);
    margin-top: 5rem;
    padding: 1rem;
    border-radius: 2rem;
  }
  .portal-reveal::before { inset: -8% 0; }
  .portal-reveal h2 { font-size: 2.5rem; }
  .reveal-text { font-size: 1rem; }
  body[data-view="reveal"] .portal-orbit {
    display: block;
    top: auto;
    right: auto;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    left: 50%;
    margin: 0;
    overflow: visible;
    transform: translateX(-50%);
  }
  body[data-view="reveal"] .portal-grid {
    flex-direction: row;
    overflow: visible;
    padding: 0;
  }
  body[data-view="reveal"] .portal-button,
  body[data-view="reveal"] .portal-sky,
  body[data-view="reveal"] .portal-air,
  body[data-view="reveal"] .portal-earth,
  body[data-view="reveal"] .portal-time,
  body[data-view="reveal"] .portal-world {
    flex: 0 0 3.6rem;
    width: 3.6rem;
    min-height: 3.6rem;
  }
  body[data-view="reveal"] .portal-reveal {
    width: calc(100% - .4rem);
    margin-top: 5rem;
    margin-bottom: 9rem;
    padding-inline: 1rem;
  }
  body[data-view="reveal"] .signal-rail {
    bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + 4.4rem);
    left: 50%;
    transform: translateX(-50%);
  }
}