:root {
  --paper: #f2f3ef;
  --paper-deep: #e6eae5;
  --ink: #18201d;
  --muted: #68736e;
  --line: #bcc6c0;
  --mint: #65a893;
  --mint-dark: #2f7462;
  --peach: #dba98e;
  --night: #101815;
  --night-soft: #17231f;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 72rem;
  overflow: hidden;
  background: var(--paper);
  font-size: clamp(16px, min(0.833333vw, 1.481481vh), 32px);
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.site-header {
  transition: color 240ms linear;
}

body[data-active-theme="dark"] .site-header {
  color: #f0f4f1;
}

body[data-active-theme="dark"] .brand-mark,
body[data-active-theme="dark"] .portal-link {
  border-color: rgb(232 242 237 / 22%);
  background: rgb(13 21 18 / 66%);
  color: #edf4f0;
}

.directions-lab {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.directions-kicker {
  position: fixed;
  z-index: 120;
  top: 6.2rem;
  left: clamp(2.5rem, 4vw, 5rem);
  margin: 0;
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 820;
  letter-spacing: 0.18em;
  transition: color 240ms linear;
}

body[data-active-theme="dark"] .directions-kicker {
  color: rgb(223 234 228 / 58%);
}

.direction {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 380ms linear,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.direction[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2rem);
}

.direction-index {
  position: absolute;
  z-index: 15;
  top: 8rem;
  right: clamp(2.5rem, 4vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
}

.direction-index span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--mint-dark);
  font-weight: 800;
}

.particle-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: saturate(1.02) contrast(1.05);
  transition: opacity 450ms linear;
}

.particle-canvas[data-ready="true"] {
  opacity: 1;
}

.directions-switcher {
  position: fixed;
  z-index: 220;
  right: 50%;
  bottom: 1.15rem;
  display: flex;
  align-items: stretch;
  padding: 0.28rem;
  border: 1px solid rgb(80 96 88 / 25%);
  border-radius: 0.3rem;
  background: rgb(245 247 243 / 90%);
  box-shadow: 0 1rem 3rem rgb(30 45 38 / 12%);
  transform: translateX(50%);
  backdrop-filter: blur(18px);
}

.directions-switcher ol {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directions-switcher button {
  border: 0;
  background: transparent;
  color: #4f5b55;
  cursor: pointer;
}

.directions-switcher ol button {
  display: grid;
  min-width: 4.4rem;
  min-height: 2.55rem;
  place-content: center;
  padding: 0.3rem 0.5rem;
  border-radius: 0.2rem;
  text-align: center;
}

.directions-switcher ol button:hover,
.directions-switcher ol button:focus-visible {
  background: #e7ece8;
  outline: none;
}

.directions-switcher ol button[aria-pressed="true"] {
  background: #26342e;
  color: #fff;
}

.directions-switcher span,
.directions-switcher b {
  display: block;
}

.directions-switcher span {
  margin-bottom: 0.15rem;
  color: var(--mint);
  font-size: 0.43rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.directions-switcher b {
  font-size: 0.53rem;
  font-weight: 740;
  white-space: nowrap;
}

.directions-arrow {
  width: 2.5rem;
  font-size: 0.85rem;
}

.directions-help {
  position: fixed;
  z-index: 210;
  right: 2rem;
  bottom: 1.9rem;
  margin: 0;
  color: #7b8580;
  font-size: 0.43rem;
  font-weight: 760;
  letter-spacing: 0.14em;
}

/* 01 · Particle relay */
.direction-relay {
  background:
    radial-gradient(circle at 33% 58%, rgb(101 168 147 / 12%), transparent 31%),
    var(--paper);
}

.relay-photo {
  position: absolute;
  z-index: 3;
  bottom: 8.5rem;
  left: 0;
  width: min(58vw, 70rem);
  height: auto;
  aspect-ratio: 3 / 2;
}

.relay-photo-next {
  position: absolute;
  z-index: 2;
  top: 10rem;
  right: -2rem;
  width: 24vw;
  height: auto;
  aspect-ratio: 3 / 2;
  opacity: 0.28;
  filter: grayscale(0.45) contrast(0.92);
}

.relay-photo-next[data-ready="true"] {
  opacity: 0.28;
}

.relay-route {
  position: absolute;
  z-index: 4;
  right: 4vw;
  bottom: 9rem;
  width: 56vw;
  height: 48vh;
  overflow: visible;
}

.relay-route path {
  fill: none;
  stroke: var(--mint);
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  stroke-width: 2;
}

.relay-route circle {
  fill: var(--paper);
  stroke: var(--mint);
  stroke-width: 2;
}

.relay-copy {
  position: absolute;
  z-index: 8;
  top: 26%;
  right: 4vw;
  width: min(40vw, 39rem);
}

.relay-copy p,
.map-copy p,
.constellation-copy p,
.life-copy p,
.portal-title p,
.depth-copy p,
.microscope-copy p {
  margin: 0 0 0.85rem;
  color: var(--mint-dark);
  font-size: 0.55rem;
  font-weight: 820;
  letter-spacing: 0.16em;
}

.relay-copy h1,
.map-copy h1,
.constellation-copy h1,
.life-copy h1,
.portal-title h1,
.depth-copy h1,
.microscope-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 4.5vw, 5.4rem);
  font-weight: 620;
  letter-spacing: -0.075em;
  line-height: 0.98;
}

.relay-copy h1 {
  font-size: clamp(2.8rem, 3.65vw, 4.5rem);
}

.relay-copy dl {
  display: grid;
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}

.relay-copy dl div {
  display: grid;
  grid-template-columns: 4rem 1fr;
  padding: 0.65rem 0;
  border-bottom: 1px solid #d4d9d5;
  font-size: 0.7rem;
}

.relay-copy dt {
  color: var(--mint-dark);
  font-weight: 800;
}

.relay-copy dd {
  margin: 0;
  color: #49534e;
}

.relay-caption {
  position: absolute;
  z-index: 7;
  bottom: 9rem;
  left: 4vw;
  margin: 0;
  color: #59645f;
  font-size: 0.62rem;
  line-height: 1.6;
}

/* 02 · Theater */
.direction-theater {
  background: var(--night);
  color: #f1f5f2;
}

.direction-theater .direction-index {
  color: rgb(235 244 239 / 58%);
}

.direction-theater .direction-index span {
  color: #8fc8b6;
}

.theater-frame {
  position: absolute;
  inset: 8rem 9vw 5.8rem;
}

.theater-photo {
  position: absolute;
  inset: -9% -5%;
  width: 110%;
  height: 118%;
  filter: saturate(0.72) contrast(1.18) brightness(0.8);
}

.theater-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(16 24 21 / 74%), transparent 42% 70%, rgb(16 24 21 / 55%)),
    linear-gradient(0deg, rgb(16 24 21 / 88%), transparent 52%);
}

.theater-copy {
  position: absolute;
  z-index: 8;
  bottom: 10rem;
  left: 10vw;
}

.theater-copy p {
  margin: 0 0 0.65rem;
  color: #88c4b1;
  font-size: 0.55rem;
  font-weight: 820;
  letter-spacing: 0.15em;
}

.theater-copy h1 {
  margin: 0 0 1rem;
  font-size: clamp(5rem, 8vw, 9rem);
  font-weight: 570;
  letter-spacing: -0.085em;
  line-height: 0.9;
}

.theater-copy span {
  color: rgb(234 241 237 / 68%);
  font-size: 0.78rem;
  line-height: 1.7;
}

.theater-chapters {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: 4.5vw;
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  color: rgb(236 245 240 / 34%);
  list-style: none;
  transform: translateY(-50%);
  font-size: 0.52rem;
}

.theater-chapters li[aria-current="step"] {
  color: #94d2be;
  transform: scale(1.45);
}

/* 03 · Film */
.direction-film {
  background: #eee9e1;
}

.film-heading {
  position: absolute;
  z-index: 8;
  top: 11rem;
  left: 4vw;
}

.film-heading p {
  margin: 0 0 0.6rem;
  color: #a46d50;
  font-size: 0.52rem;
  font-weight: 820;
  letter-spacing: 0.14em;
}

.film-heading h1 {
  margin: 0;
  font-size: 3.4rem;
  font-weight: 640;
  letter-spacing: -0.07em;
}

.film-track {
  position: absolute;
  top: 21%;
  right: -14vw;
  bottom: 9rem;
  left: 3vw;
}

.film-scene {
  position: absolute;
  aspect-ratio: 3 / 2;
  margin: 0;
}

.film-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.film-scene span,
.film-scene b {
  position: absolute;
  z-index: 3;
}

.film-scene span {
  top: 10%;
  left: 7%;
  color: #a66c4e;
  font-size: 0.5rem;
  font-weight: 820;
}

.film-scene b {
  bottom: 8%;
  left: 7%;
  font-size: 0.75rem;
}

.film-scene-a { bottom: 3%; left: 0; width: 31vw; opacity: 0.46; }
.film-scene-b { top: 2%; left: 23%; width: 36vw; opacity: 0.72; }
.film-scene-c { bottom: 1%; left: 51%; width: 44vw; }
.film-scene-d { top: 0; left: 87%; width: 34vw; opacity: 0.5; }

.film-line {
  position: absolute;
  right: 4vw;
  bottom: 7.6rem;
  left: 4vw;
  height: 1rem;
}

.film-line i {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: #ae9e91;
}

.film-line b {
  position: relative;
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 23%;
  border: 1px solid #9b765f;
  border-radius: 50%;
  background: #eee9e1;
}

.film-note {
  position: absolute;
  right: 4vw;
  bottom: 8.8rem;
  margin: 0;
  color: #766c65;
  font-size: 0.58rem;
}

/* 04 · Map */
.direction-map {
  background:
    linear-gradient(rgb(61 92 80 / 6%) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgb(61 92 80 / 6%) 1px, transparent 1px) 0 0 / 3rem 3rem,
    #e7ede8;
}

.map-copy {
  position: absolute;
  z-index: 12;
  top: 24%;
  left: 5vw;
}

.map-copy > span,
.life-copy > span,
.depth-copy > span,
.microscope-copy > span {
  display: block;
  margin-top: 1.2rem;
  color: #59645f;
  font-size: 0.72rem;
  line-height: 1.65;
}

.factory-lines {
  position: absolute;
  z-index: 2;
  right: 3vw;
  bottom: 7rem;
  width: 76vw;
  height: 68vh;
}

.factory-lines path {
  fill: none;
  stroke: #6e9e8e;
  stroke-dasharray: 5 8;
  stroke-width: 2;
}

.factory-lines .branch {
  stroke: var(--peach);
}

.map-station {
  position: absolute;
  z-index: 5;
  width: 18vw;
  aspect-ratio: 3 / 2;
  border: 1px solid rgb(77 108 95 / 25%);
  background: rgb(239 244 240 / 60%);
}

.map-station canvas { position: absolute; inset: 0; }
.map-station small { position: absolute; z-index: 4; top: 0.7rem; left: 0.8rem; color: #3f7664; font-size: 0.52rem; font-weight: 800; }
.map-station b { position: absolute; z-index: 4; right: 1rem; bottom: 0.8rem; left: 1rem; font-size: 0.58rem; line-height: 1.5; }
.map-station-1 { top: 13%; left: 38%; transform: scale(0.74); opacity: 0.52; }
.map-station-2 { top: 34%; left: 43%; width: 34vw; border-color: #5a9984; box-shadow: 0 2rem 5rem rgb(52 89 75 / 12%); }
.map-station-3 { right: 7%; bottom: 14%; transform: scale(0.78); opacity: 0.58; }
.map-station-4 { top: 14%; right: 3%; transform: scale(0.66); opacity: 0.45; }

.map-you-are-here {
  position: absolute;
  z-index: 9;
  top: 32%;
  left: 44%;
  padding: 0.4rem 0.6rem;
  background: #2f7462;
  color: #fff;
  font-size: 0.45rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

/* 05 · Constellation */
.direction-constellation {
  background:
    radial-gradient(circle at 50% 45%, #21312b 0, #111a17 56%, #0c1210 100%);
  color: #eff5f1;
}

.direction-constellation::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(204 232 218 / 38%) 0 1px, transparent 1.5px);
  background-size: 5rem 4rem;
  opacity: 0.22;
  content: "";
}

.direction-constellation .direction-index { color: rgb(234 244 239 / 52%); }
.direction-constellation .direction-index span { color: #91cdb9; }

.constellation-lines {
  position: absolute;
  inset: 10% 4% 9%;
  width: 92%;
  height: 81%;
}

.constellation-lines path { fill: none; stroke: rgb(138 202 180 / 32%); stroke-width: 1; }

.star-node {
  position: absolute;
  width: 13rem;
  aspect-ratio: 3 / 2;
  opacity: 0.28;
}

.star-node span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid #72aa97;
  border-radius: 50%;
  background: #14201c;
  color: #a7d7c7;
  font-size: 0.48rem;
  transform: translate(-50%, -50%);
}

.star-node-1 { top: 15%; left: 7%; }
.star-node-2 { top: 10%; left: 27%; }
.star-node-active { top: 28%; left: 32%; width: 43vw; opacity: 1; }
.star-node-4 { top: 12%; right: 10%; }
.star-node-5 { right: 8%; bottom: 12%; }
.star-node-active span { width: 2.8rem; height: 2.8rem; border-color: #99dbc5; box-shadow: 0 0 3rem rgb(111 190 162 / 36%); }

.constellation-copy {
  position: absolute;
  z-index: 10;
  right: 6vw;
  bottom: 14%;
}

.constellation-copy p { color: #90cfba; }
.constellation-copy h1 { font-size: clamp(3.8rem, 6vw, 7rem); }
.constellation-copy span { display: block; margin-top: 1.2rem; color: rgb(232 241 237 / 65%); font-size: 0.7rem; line-height: 1.65; }

/* 06 · Lifecycle */
.direction-lifecycle {
  background:
    radial-gradient(circle at 58% 51%, rgb(255 255 255 / 90%), transparent 30%),
    linear-gradient(115deg, #ece6df 0 42%, #e3ebe6 42% 100%);
}

.life-copy {
  position: absolute;
  z-index: 12;
  top: 26%;
  left: 5vw;
}

.life-center {
  position: absolute;
  z-index: 8;
  top: 13%;
  left: 30%;
  width: 53vw;
  height: auto;
  aspect-ratio: 3 / 2;
}

.life-ghost {
  position: absolute;
  z-index: 2;
  width: 29vw;
  height: auto;
  aspect-ratio: 3 / 2;
  filter: grayscale(0.8);
}

.life-ghost[data-ready="true"] { opacity: 0.12; }
.life-ghost-left { bottom: 10%; left: 19%; transform: rotate(-8deg); }
.life-ghost-right { top: 14%; right: -4%; transform: rotate(8deg); }

.life-orbit {
  position: absolute;
  z-index: 3;
  top: 18%;
  left: 34%;
  width: 48vw;
  aspect-ratio: 1.35;
  border: 1px solid rgb(73 118 101 / 25%);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.life-orbit i { position: absolute; width: 0.7rem; height: 0.7rem; border: 1px solid #5d9e88; border-radius: 50%; background: #edf1ec; }
.life-orbit i:nth-child(1) { top: 12%; left: 12%; }
.life-orbit i:nth-child(2) { top: 3%; right: 22%; }
.life-orbit i:nth-child(3) { right: 3%; bottom: 22%; }
.life-orbit i:nth-child(4) { bottom: 4%; left: 25%; }

.life-states {
  position: absolute;
  z-index: 14;
  right: 4vw;
  bottom: 9rem;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-states li {
  min-width: 8.5rem;
  padding: 0.7rem;
  border-top: 1px solid #aebbb5;
  color: #6e7773;
  font-size: 0.56rem;
}

.life-states li[aria-current="step"] { border-color: #337967; color: #26342e; font-weight: 760; }
.life-states span { display: block; margin-bottom: 0.35rem; color: #438673; font-weight: 820; }
.life-current { position: absolute; z-index: 14; right: 5vw; top: 26%; margin: 0; color: #73817b; font-size: 0.48rem; letter-spacing: 0.12em; }
.life-current b { display: block; margin-top: 0.4rem; color: #2e7563; font-size: 0.72rem; }

/* 07 · Portal */
.direction-portal {
  background: #ebece7;
}

.portal-stage {
  position: absolute;
  inset: 7rem 0 5rem;
}

.portal-current,
.portal-next {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portal-current { clip-path: polygon(0 0, 58% 0, 48% 35%, 61% 100%, 0 100%); }
.portal-next { clip-path: polygon(58% 0, 100% 0, 100% 100%, 61% 100%, 48% 35%); filter: hue-rotate(-8deg) saturate(0.9); }

.portal-stage::before,
.portal-stage::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 52%;
  content: "";
}

.portal-stage::before { left: 0; background: #e4ebe6; }
.portal-stage::after { right: 0; background: #ede2dc; }

.portal-seam {
  position: absolute;
  z-index: 8;
  top: 8%;
  left: 55%;
  width: 1px;
  height: 82%;
  background: linear-gradient(transparent, #b77e60 15% 85%, transparent);
  transform: rotate(-8deg);
}

.portal-seam i { position: absolute; left: 50%; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #cf9677; transform: translateX(-50%); }
.portal-seam i:nth-child(1) { top: 14%; }.portal-seam i:nth-child(2) { top: 31%; }.portal-seam i:nth-child(3) { top: 48%; }.portal-seam i:nth-child(4) { top: 66%; }.portal-seam i:nth-child(5) { top: 82%; }

.portal-title { position: absolute; z-index: 12; top: 22%; left: 6vw; }
.portal-title h1 { font-size: clamp(3.6rem, 5.4vw, 6.4rem); }
.portal-label { position: absolute; z-index: 12; bottom: 9rem; width: 18rem; padding-top: 0.8rem; border-top: 1px solid #9facA5; }
.portal-label-left { left: 6vw; }.portal-label-right { right: 6vw; text-align: right; }
.portal-label span { color: #4d8d79; font-size: 0.5rem; font-weight: 820; }
.portal-label b { display: block; margin: 0.3rem 0; font-size: 0.86rem; }
.portal-label small { color: #6b756f; font-size: 0.56rem; }
.portal-transfer { position: absolute; z-index: 12; right: 50%; bottom: 7.9rem; margin: 0; color: #9e6c52; font-size: 0.48rem; font-weight: 760; letter-spacing: 0.1em; transform: translateX(50%); }
.portal-transfer b { margin-left: 0.6rem; font-size: 0.9rem; }

/* 08 · Depth */
.direction-depth {
  perspective: 75rem;
  background: linear-gradient(145deg, #e8ece7, #dce4de);
}

.direction-depth::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 49.9%, rgb(53 84 71 / 15%) 50%, transparent 50.1%);
  content: "";
}

.depth-copy { position: absolute; z-index: 20; top: 25%; left: 5vw; }

.depth-stage {
  position: absolute;
  z-index: 4;
  top: 13%;
  right: 6vw;
  width: 63vw;
  height: 66vh;
  perspective: 62rem;
  transform-style: preserve-3d;
}

.depth-layer {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  aspect-ratio: 3 / 2;
  border: 1px solid rgb(74 111 95 / 25%);
  background: rgb(238 242 238 / 52%);
  transform-style: preserve-3d;
}

.depth-layer span { position: absolute; top: 0.8rem; right: 0.8rem; color: #347b68; font-size: 0.52rem; font-weight: 820; }
.depth-layer-1 { z-index: 4; bottom: 0; left: 0; width: 46vw; transform: perspective(60rem) rotateY(-2deg); box-shadow: 0 2rem 5rem rgb(46 69 59 / 16%); }
.depth-layer-2 { z-index: 3; top: 21%; right: 10%; width: 36vw; opacity: 0.5; transform: perspective(60rem) rotateY(-4deg); }
.depth-layer-3 { z-index: 2; top: 8%; right: 3%; width: 27vw; opacity: 0.32; transform: perspective(60rem) rotateY(-6deg); }
.depth-layer-4 { z-index: 1; top: 0; right: 0; width: 19vw; opacity: 0.18; transform: perspective(60rem) rotateY(-8deg); }

.depth-meter { position: absolute; right: 4vw; bottom: 9rem; display: flex; align-items: center; gap: 0.7rem; color: #6a756f; font-size: 0.46rem; letter-spacing: 0.12em; }
.depth-meter i { display: block; width: 13rem; height: 1px; background: linear-gradient(90deg, #3f8b73, #b9c2bd); }

/* 09 · Microscope */
.direction-microscope {
  background:
    linear-gradient(rgb(232 236 231 / 4%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, rgb(232 236 231 / 4%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    #17201d;
  color: #edf3ef;
}

.direction-microscope .direction-index { color: rgb(237 244 240 / 52%); }
.direction-microscope .direction-index span { color: #8dccb6; }
.microscope-copy { position: absolute; z-index: 12; top: 24%; left: 5vw; }
.microscope-copy p { color: #91cbb7; }
.microscope-copy > span { color: rgb(232 241 236 / 58%); }

.microscope-lens {
  position: absolute;
  z-index: 4;
  top: 12%;
  right: 8vw;
  width: min(54vw, 64rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(152 205 186 / 56%);
  border-radius: 50%;
  background: #e8ece7;
  box-shadow: 0 0 0 1.2rem rgb(144 198 178 / 5%), 0 0 6rem rgb(88 158 132 / 13%);
}

.microscope-lens canvas { position: absolute; inset: -8%; width: 116%; height: 116%; transform: scale(1.25); }
.lens-cross { position: absolute; z-index: 5; background: rgb(77 130 110 / 35%); }
.lens-cross-x { top: 50%; right: 8%; left: 8%; height: 1px; }
.lens-cross-y { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.lens-ring { position: absolute; z-index: 5; top: 50%; left: 50%; border: 1px solid rgb(87 148 125 / 32%); border-radius: 50%; transform: translate(-50%, -50%); }
.lens-ring-a { width: 28%; height: 28%; }.lens-ring-b { width: 58%; height: 58%; }

.microscope-scale { position: absolute; z-index: 12; top: 50%; right: 3vw; display: grid; gap: 1.2rem; color: rgb(227 239 232 / 30%); font-size: 0.48rem; transform: translateY(-50%); }
.microscope-scale span[aria-current="step"] { color: #9dd7c3; transform: scale(1.35); }
.microscope-findings { position: absolute; z-index: 12; bottom: 8.5rem; left: 5vw; width: 23rem; margin: 0; border-top: 1px solid rgb(223 237 229 / 20%); }
.microscope-findings div { display: grid; grid-template-columns: 4rem 1fr; padding: 0.65rem 0; border-bottom: 1px solid rgb(223 237 229 / 14%); font-size: 0.6rem; }
.microscope-findings dt { color: #8bc9b4; }.microscope-findings dd { margin: 0; color: rgb(236 243 239 / 68%); }

/* 10 · Typography */
.direction-type {
  background:
    linear-gradient(90deg, #e9ece7 0 74%, #dfe5e0 74%),
    var(--paper);
}

.type-intro { position: absolute; z-index: 8; top: 13%; left: 5vw; margin: 0; color: #387b68; font-size: 0.55rem; font-weight: 820; letter-spacing: 0.16em; }
.type-accessible-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.type-particle-word { position: absolute; z-index: 3; top: 15%; left: 2vw; width: 73vw; height: 57vh; }
.type-source-photo { position: absolute; z-index: 2; right: -3vw; bottom: 7rem; width: 34vw; height: auto; aspect-ratio: 3 / 2; opacity: 0.26; }
.type-source-photo[data-ready="true"] { opacity: 0.26; }
.type-copy { position: absolute; z-index: 10; right: 5vw; top: 28%; width: 21vw; }
.type-copy span { color: #3b7d69; font-size: 0.6rem; font-weight: 820; }
.type-copy b { display: block; margin: 0.5rem 0 1rem; font-size: 2.3rem; letter-spacing: -0.06em; }
.type-copy p { color: #59645f; font-size: 0.65rem; line-height: 1.65; }
.type-history { position: absolute; z-index: 8; bottom: 8.4rem; left: 5vw; display: flex; margin: 0; padding: 0; list-style: none; }
.type-history li { padding: 0.65rem 1.1rem; border-top: 1px solid #bdc6c1; color: #8a928e; font-size: 0.53rem; }
.type-history li[aria-current="step"] { border-color: #347a67; color: #25342d; font-weight: 760; }

@media (max-height: 48rem) {
  .directions-kicker { top: 5.6rem; }
  .direction-index { top: 6.7rem; }
  .directions-switcher { bottom: 0.7rem; }
  .relay-photo { bottom: 6rem; }
  .theater-frame { inset-block: 6.5rem 4.5rem; }
  .film-track { bottom: 6.5rem; }
  .map-copy, .life-copy, .portal-title, .depth-copy, .microscope-copy { top: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .direction,
  .particle-canvas {
    transition: none;
  }
}