:root {
  color-scheme: dark;
  --forest-950: #050b08;
  --forest-900: #08130e;
  --forest-800: #102219;
  --gold: #a88745;
  --gold-bright: #d6bc79;
  --ivory: #f4f0e6;
  --muted: rgba(244, 240, 230, .58);
  --line: rgba(214, 188, 121, .23);
  font-family: "Source Sans 3", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--ivory);
}

button { font: inherit; }

.guider {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(39, 74, 53, .22), transparent 38%),
    linear-gradient(145deg, #040806 0%, #09140f 50%, #030705 100%);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  outline: none;
  transition: opacity .65s ease, filter .65s ease;
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 4, .72), transparent 30%, transparent 70%, rgba(2, 6, 4, .5)),
    radial-gradient(ellipse at 50% 105%, rgba(168, 135, 69, .10), transparent 42%);
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  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='.3'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.brand {
  position: absolute;
  z-index: 4;
  top: clamp(2rem, 7vh, 5.5rem);
  left: clamp(1.5rem, 6vw, 7rem);
  max-width: 27rem;
  pointer-events: none;
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.brand__logo {
  display: block;
  width: clamp(13rem, 23vw, 19rem);
  height: auto;
  padding: .45rem .6rem;
  background: var(--ivory);
  box-shadow: 0 16px 46px rgba(0,0,0,.22), 0 0 0 1px rgba(168,135,69,.22);
}

.brand__motto {
  margin: .65rem 0 0 .18rem;
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
}

.brand h1 {
  margin: clamp(1.6rem, 4vh, 3.4rem) 0 0;
  max-width: 19rem;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1.04;
}

.scene-hint {
  position: absolute;
  z-index: 4;
  left: clamp(1.5rem, 6vw, 7rem);
  bottom: clamp(1.25rem, 4vh, 3rem);
  max-width: 20rem;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
  transition: opacity .4s ease;
}

.branch-label {
  position: absolute;
  z-index: 6;
  right: clamp(1.5rem, 5vw, 5.5rem);
  bottom: clamp(1.5rem, 8vh, 6rem);
  width: min(25rem, calc(100vw - 3rem));
  padding: 1.25rem 1.4rem 1.35rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(4, 10, 7, .72), rgba(4, 10, 7, .08));
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.branch-label.is-visible { opacity: 1; transform: translateY(0); }
.branch-label__number { display: block; color: var(--gold); font-size: .7rem; letter-spacing: .24em; margin-bottom: .45rem; }
.branch-label strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 400; }
.branch-label small { display: block; margin-top: .5rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }

.prelude {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 50% 47%, #12271c 0%, #07100c 42%, #030605 100%);
  transition: opacity .8s ease, visibility .8s;
}

.prelude.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }

.prelude__constellation {
  display: grid;
  grid-template-columns: repeat(3, 11px);
  gap: 8px;
  height: 49px;
  perspective: 280px;
}

.prelude__logo {
  width: min(16rem, 68vw);
  height: auto;
  margin-bottom: 1.7rem;
  padding: .35rem .45rem;
  background: var(--ivory);
  box-shadow: 0 18px 52px rgba(0,0,0,.3), 0 0 0 1px rgba(214,188,121,.22);
  animation: logo-arrival 1.15s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes logo-arrival {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.prelude__constellation i {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(214,188,121,.85);
  background: rgba(168,135,69,.15);
  box-shadow: 0 0 16px rgba(214,188,121,.18);
  animation: awaken 1.8s cubic-bezier(.2,.8,.2,1) infinite alternate;
}

.prelude__constellation i:nth-child(2) { animation-delay: .08s; }
.prelude__constellation i:nth-child(3) { animation-delay: .16s; }
.prelude__constellation i:nth-child(4) { animation-delay: .24s; }
.prelude__constellation i:nth-child(5) { animation-delay: .32s; }
.prelude__constellation i:nth-child(6) { animation-delay: .40s; }
.prelude__constellation i:nth-child(7) { animation-delay: .48s; }
.prelude__constellation i:nth-child(8) { animation-delay: .56s; }
.prelude__constellation i:nth-child(9) { animation-delay: .64s; }

@keyframes awaken {
  0% { transform: translateZ(-30px) rotate(0deg); opacity: .25; }
  75%,100% { transform: translateZ(18px) rotate(45deg); opacity: 1; background: rgba(168,135,69,.46); }
}

.prelude__word {
  margin-top: 1.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  letter-spacing: .46em;
  text-indent: .46em;
}

.prelude__motto { margin-top: .65rem; color: var(--muted); font-family: Georgia, serif; font-style: italic; font-size: .8rem; }

.dock {
  position: absolute;
  z-index: 12;
  top: 50%;
  right: 1rem;
  width: 4.25rem;
  padding: .55rem;
  border: 1px solid rgba(214,188,121,.18);
  background: rgba(5, 12, 8, .78);
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translate(120%, -50%);
  transition: opacity .4s ease, transform .65s cubic-bezier(.2,.85,.2,1), width .3s ease;
}

.dock:hover, .dock:focus-within { width: min(18rem, calc(100vw - 2rem)); }
.dock.is-left { right: auto; left: 1rem; }
.dock__side { position: absolute; top: -.85rem; right: -.65rem; width: 1.7rem; height: 1.7rem; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-bright); background: #09150f; cursor: pointer; }
.dock.is-left .dock__side { right: auto; left: -.65rem; }
.dock__mark { display: grid; place-items: center; height: 2.7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.dock__mark img { width: 3.15rem; height: 1.7rem; object-fit: contain; padding: .08rem; background: var(--ivory); }
.dock__items { display: grid; gap: .18rem; }
.dock__item { display: grid; grid-template-columns: 2.85rem 1fr; align-items: center; width: 100%; min-height: 2.85rem; padding: 0; border: 0; color: rgba(244,240,230,.48); background: transparent; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.dock__item:hover { color: var(--ivory); background: rgba(255,255,255,.035); }
.dock__item.is-active { color: var(--gold-bright); background: rgba(168,135,69,.1); }
.dock__icon { display: grid; place-items: center; font-family: Georgia, serif; font-size: .78rem; }
.dock__icon::before { content: ""; width: .7rem; height: .7rem; border: 1px solid currentColor; transform: rotate(45deg); }
.dock__text { padding-right: .8rem; font-size: .82rem; }

.content-stage {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-items: center;
  padding: clamp(1.5rem, 7vw, 8rem);
  background:
    linear-gradient(90deg, rgba(5,12,8,.96) 0%, rgba(5,12,8,.88) 42%, rgba(5,12,8,.54) 100%),
    radial-gradient(circle at 82% 35%, rgba(168,135,69,.13), transparent 32%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease, visibility .7s;
}

.content-stage__inner { width: min(42rem, calc(100vw - 8rem)); transform: translateY(24px); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.content-stage__number { display: block; color: var(--gold); font-size: .72rem; letter-spacing: .28em; }
.content-stage__overline { color: var(--muted); font-size: .7rem; letter-spacing: .25em; }
.content-stage h2 { margin: .65rem 0 1.1rem; font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 5.5vw, 5rem); line-height: .98; }
.content-stage p { max-width: 36rem; color: rgba(244,240,230,.76); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.7; }
.content-stage__rule { width: 5rem; height: 1px; margin: 1.8rem 0; background: var(--gold); }
.content-stage .content-stage__note { color: var(--muted); font-size: .84rem; }
.return-button { margin-top: 1.5rem; padding: .8rem 1rem; border: 1px solid var(--line); color: var(--ivory); background: transparent; cursor: pointer; }
.return-button:hover { border-color: var(--gold); color: var(--gold-bright); }

.branch-open #scene { opacity: .14; filter: blur(3px); }
.branch-open .brand { opacity: 0; transform: translateX(-2rem); }
.branch-open .scene-hint, .branch-open .branch-label { opacity: 0; }
.branch-open .dock { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.branch-open .content-stage { opacity: 1; visibility: visible; pointer-events: auto; }
.branch-open .content-stage__inner { transform: translateY(0); }

.fallback-grid {
  display: none;
  position: absolute;
  z-index: 5;
  inset: auto 1rem 1rem;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
.fallback-grid button { min-height: 5rem; padding: .7rem; border: 1px solid var(--line); color: var(--ivory); background: rgba(10,24,17,.74); text-align: left; cursor: pointer; }
.fallback-grid span { display: block; color: var(--gold); font-size: .68rem; margin-bottom: .35rem; }
.no-webgpu .fallback-grid { display: grid; }
.no-webgpu .scene-hint { display: none; }

@media (max-width: 760px) {
  .brand { top: 1.5rem; left: 1.25rem; }
  .brand__logo { width: 12rem; }
  .brand h1 { margin-top: 1rem; font-size: 1.45rem; }
  .scene-hint { left: 1.25rem; bottom: 1rem; }
  .branch-label { right: 1rem; bottom: 1rem; }
  .dock { top: auto; right: 50%; bottom: .65rem; width: calc(100vw - 1.3rem); transform: translate(50%, 140%); padding: .35rem; }
  .dock:hover, .dock:focus-within { width: calc(100vw - 1.3rem); }
  .dock.is-left { left: auto; right: 50%; }
  .dock__side, .dock__mark, .dock__text { display: none; }
  .dock__items { grid-template-columns: repeat(9, 1fr); gap: 0; }
  .dock__item { display: grid; grid-template-columns: 1fr; min-height: 2.8rem; }
  .branch-open .dock { transform: translate(50%, 0); }
  .content-stage { padding: 1.4rem 1.25rem 5.3rem; }
  .content-stage__inner { width: 100%; }
  .content-stage h2 { font-size: clamp(2rem, 12vw, 3.4rem); }
  .fallback-grid { grid-template-columns: repeat(2, 1fr); max-height: 58vh; overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}