@charset "UTF-8";

:root {
  --bg: #050607;
  --bg-2: #101317;
  --ink: #f5f7fa;
  --muted: #939ba7;
  --accent: #cfd5dd;
  --accent-2: #ffffff;
  --accent-3: #748091;
  --line: rgba(245, 247, 250, 0.16);
  --soft: rgba(207, 213, 221, 0.18);
  --header-h: 5.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --font-display: "Arial Narrow", "Roboto Condensed", "Inter Tight", Impact, sans-serif;
  --font-ui: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body.is-locked { overflow: hidden; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
a { text-decoration: none; }
::selection { color: var(--bg); background: var(--accent-2); }

.skip-link {
  position: fixed;
  z-index: 999;
  top: .8rem;
  left: .8rem;
  padding: .7rem 1rem;
  color: var(--bg);
  background: var(--ink);
  transform: translateY(-180%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

#world-stage,
#world-fx {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#world-fx { z-index: 1; mix-blend-mode: screen; opacity: .72; }

.world-wash,
.world-grid,
.world-noise,
.world-vignette,
.world-scan {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.world-wash {
  background:
    radial-gradient(circle at calc(50% + var(--px, 0px)) calc(45% + var(--py, 0px)), var(--soft), transparent 28%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 32%),
    linear-gradient(125deg, transparent 0 46%, color-mix(in srgb, var(--accent) 5%, transparent) 46% 54%, transparent 54%);
  opacity: .72;
}
.world-grid {
  opacity: .11;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: clamp(3rem, 6vw, 7rem) clamp(3rem, 6vw, 7rem);
  mask-image: radial-gradient(circle at center, #000 0 22%, transparent 76%);
  transform: perspective(700px) rotateX(62deg) translateY(35vh) scale(1.45);
  transform-origin: 50% 100%;
}
.world-noise {
  opacity: .045;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .18s steps(2) infinite;
}
.world-vignette { box-shadow: inset 0 0 14vw rgba(0,0,0,.82); }
.world-scan {
  opacity: .055;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.12) 4px);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-1%,1%) } 50% { transform: translate(1%,-1%) } 75% { transform: translate(1%,1%) } }

.boot {
  position: fixed;
  z-index: 300;
  inset: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(1.15rem + var(--safe-top)) calc(1.2rem + var(--safe-right)) calc(1.2rem + var(--safe-bottom)) calc(1.2rem + var(--safe-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, var(--soft), transparent 28%),
    linear-gradient(122deg, var(--bg), var(--bg-2) 55%, var(--bg));
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s var(--ease-in-out), visibility 0s 1.3s;
}
body.is-entered .boot { clip-path: inset(0 0 100% 0); visibility: hidden; }
.boot::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 5vw 5vw;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}
.boot__top,
.boot__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .64rem; letter-spacing: .22em; }
.boot__core {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(50vw, 33rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.boot__rings,
.boot__rings::before,
.boot__rings::after {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 50%;
  content: "";
  animation: boot-ring 9s linear infinite;
}
.boot__rings::before { inset: 12%; animation-direction: reverse; animation-duration: 6s; }
.boot__rings::after { inset: 27%; animation-duration: 3.6s; }
.boot__rings i,
.boot__rings b,
.boot__rings span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 2rem var(--accent);
}
.boot__rings i { width: .55rem; height: .55rem; top: 7%; left: 28%; }
.boot__rings b { width: .35rem; height: .35rem; right: 7%; top: 45%; }
.boot__rings span { width: .25rem; height: .25rem; left: 20%; bottom: 10%; }
@keyframes boot-ring { to { transform: rotate(360deg); } }
.boot__symbol {
  position: relative;
  z-index: 2;
  font: 700 clamp(5rem, 15vw, 11rem)/.75 var(--font-display);
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 0 0 4rem var(--soft);
}
.boot__number { position: absolute; top: 22%; right: 20%; font: 600 .75rem/1 var(--font-ui); letter-spacing: .2em; }
.boot__mass { position: absolute; bottom: 20%; left: 18%; font: 500 .62rem/1 var(--font-ui); letter-spacing: .18em; color: var(--muted); }
.boot__progress { flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.boot__progress span { display: block; width: 0%; height: 100%; background: var(--accent-2); box-shadow: 0 0 1rem var(--accent); transition: width .14s linear; }
.boot__count { min-width: 4rem; font-variant-numeric: tabular-nums; }
.boot__actions { display: flex; align-items: center; gap: .7rem; }
.enter,
.enter-muted {
  position: relative;
  padding: .82rem 1rem;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  letter-spacing: .16em;
  font-size: .6rem;
  transition: border-color .25s, background .25s, color .25s, transform .3s var(--ease-out);
}
.enter:hover { color: var(--bg); background: var(--ink); }
.enter:disabled,
.enter-muted:disabled { opacity: .35; cursor: wait; }
.enter-muted { border-color: transparent; color: var(--muted); }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) max(1.1rem, var(--safe-right)) 0 max(1.1rem, var(--safe-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: difference;
}
.site-header a,
.site-header button { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: .75rem; width: max-content; }
.brand__symbol { font: 700 1.7rem/1 var(--font-display); letter-spacing: -.06em; }
.brand__meta { font-size: .51rem; letter-spacing: .2em; color: var(--muted); }
.header-progress { display: flex; align-items: center; gap: .7rem; font-size: .55rem; letter-spacing: .17em; }
.header-progress i { display: block; width: clamp(3rem, 8vw, 8rem); height: 1px; background: rgba(255,255,255,.28); overflow: hidden; }
.header-progress i span { display: block; width: 0; height: 100%; background: #fff; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: .45rem; }
.utility,
.sound-toggle,
.origin-link {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 .72rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  font-size: .53rem;
  letter-spacing: .14em;
}
.sound-bars { display: flex; align-items: center; gap: 2px; height: .75rem; }
.sound-bars i { display: block; width: 1px; height: 30%; background: currentColor; animation: sound-bar 1.1s ease-in-out infinite; animation-play-state: paused; }
.sound-bars i:nth-child(2){ animation-delay: -.45s; height: 85%; }
.sound-bars i:nth-child(3){ animation-delay: -.2s; height: 55%; }
body.sound-on .sound-bars i { animation-play-state: running; }
@keyframes sound-bar { 50% { transform: scaleY(.25); } }

.chapter-rail {
  position: fixed;
  z-index: 70;
  right: max(1rem, var(--safe-right));
  top: 50%;
  width: 1.2rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .34rem;
}
.chapter-dot { width: .3rem; height: .3rem; padding: 0; cursor: pointer; border-radius: 50%; background: rgba(255,255,255,.24); transition: transform .3s var(--ease-out), background .3s; }
.chapter-dot.is-active { transform: scale(2); background: var(--accent-2); box-shadow: 0 0 1rem var(--accent); }

#experience { position: relative; z-index: 5; }
.chapter { position: relative; min-height: 175vh; }
.chapter--hero { min-height: 200vh; }
.chapter--lab { min-height: 225vh; }
.chapter--archive { min-height: 210vh; }
.chapter--origin { min-height: 180vh; }
.chapter--worlds { min-height: 220vh; }
.chapter__sticky {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  padding: calc(var(--header-h) + var(--safe-top)) clamp(1.2rem, 5vw, 5rem) calc(1.3rem + var(--safe-bottom));
  overflow: hidden;
  display: grid;
  align-items: center;
}
.chapter__sticky::after {
  content: attr(data-coordinate);
  position: absolute;
  right: clamp(1.2rem, 5vw, 5rem);
  bottom: 1.3rem;
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .2em;
}
.chapter-copy { position: relative; z-index: 4; width: min(52rem, 72vw); }
.chapter:nth-child(3n+2) .chapter-copy { justify-self: end; text-align: right; }
.chapter:nth-child(3n+3) .chapter-copy { justify-self: center; text-align: center; }
.chapter-kicker { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .62rem; letter-spacing: .24em; }
.chapter-title {
  margin: 0;
  font: 700 clamp(4.6rem, 13vw, 13rem)/.73 var(--font-display);
  letter-spacing: -.075em;
  text-transform: uppercase;
  transform: translateY(16vh);
  opacity: 0;
  transition: transform 1.15s var(--ease-out), opacity .8s;
}
.chapter-title i { display: block; color: transparent; -webkit-text-stroke: 1px var(--ink); font-style: normal; }
.chapter.is-active .chapter-title { transform: translateY(0); opacity: 1; }
.chapter-meta { margin-top: 1.35rem; display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .62rem; letter-spacing: .18em; }
.chapter:nth-child(3n+2) .chapter-meta { justify-content: flex-end; }
.chapter:nth-child(3n+3) .chapter-meta { justify-content: center; }
.chapter-meta::before { content: ""; width: clamp(2.5rem, 8vw, 9rem); height: 1px; background: var(--line); }

.hero-layout { place-items: center; text-align: center; }
.hero-title { position: relative; z-index: 4; margin: 0; font: 700 clamp(7rem, 27vw, 29rem)/.65 var(--font-display); letter-spacing: -.1em; text-transform: uppercase; }
.hero-title span { display: block; }
.hero-title span:last-child { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.hero-symbol { position: absolute; left: clamp(1.2rem, 5vw, 5rem); top: 28%; z-index: 5; display: grid; gap: .15rem; text-align: left; }
.hero-symbol b { font: 700 clamp(2.8rem, 7vw, 7rem)/.8 var(--font-display); }
.hero-symbol span { font-size: .58rem; letter-spacing: .2em; color: var(--muted); }
.hero-meta { position: absolute; right: clamp(1.2rem, 5vw, 5rem); bottom: 8%; z-index: 5; max-width: 18rem; text-align: right; font-size: .57rem; letter-spacing: .2em; color: var(--muted); }
.scroll-cue { position: absolute; z-index: 5; bottom: 6%; left: 50%; transform: translateX(-50%); display: grid; place-items: center; gap: .5rem; padding: .6rem; background: transparent; cursor: pointer; color: var(--ink); font-size: .52rem; letter-spacing: .18em; }
.scroll-cue svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1; animation: cue 1.7s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(.5rem); } }

.logo-hero { position: absolute; z-index: 5; width: min(50vw, 42rem); filter: drop-shadow(0 0 3.5rem var(--soft)); opacity: .94; }
.logo-hero img { display: block; width: 100%; height: auto; }
body[data-world="digitalised"] .hero-title { opacity: .22; filter: blur(.5px); }
body[data-world="digitalised"] .logo-hero { width: min(58vw, 49rem); }

.ornament { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ornament::before,
.ornament::after { content: ""; position: absolute; }
.ornament--rings::before { width: min(60vw, 55rem); aspect-ratio: 1; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 5vw color-mix(in srgb, var(--accent) 2%, transparent), 0 0 0 10vw color-mix(in srgb, var(--accent) 1%, transparent); }
.ornament--rings::after { width: .5rem; height: .5rem; left: 18%; top: 33%; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 2rem var(--accent); }
.ornament--grid::before { inset: 14% 9%; border: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 8% 12%; mask-image: linear-gradient(110deg, transparent, #000 28%, #000 72%, transparent); transform: skewY(-6deg); }
.ornament--cross::before { width: 72vw; height: 1px; left: 14vw; top: 50%; background: var(--line); }
.ornament--cross::after { width: 1px; height: 72vh; left: 50%; top: 14vh; background: var(--line); }
.ornament--meter::before { left: 8%; top: 18%; width: 1px; height: 64%; background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 12px); opacity: .38; }
.ornament--meter::after { content: "000 025 050 075 100"; left: calc(8% + 1rem); top: 18%; height: 64%; writing-mode: vertical-rl; color: var(--muted); font-size: .48rem; letter-spacing: 1.5em; }
.ornament--spectrum::before { inset: 0; opacity: .18; background: conic-gradient(from 90deg at 50% 50%, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent 68%); mask-image: radial-gradient(circle, transparent 0 18%, #000 19% 20%, transparent 21% 31%, #000 32% 33%, transparent 34%); animation: spectrum 18s linear infinite; }
@keyframes spectrum { to { transform: rotate(360deg); } }
.ornament--lines::before { width: 120vw; height: 34vh; left: -10vw; top: 35%; background: repeating-linear-gradient(172deg, transparent 0 17px, var(--line) 18px 19px, transparent 20px 38px); transform: rotate(-4deg); }

.breakdown-ui { position: absolute; z-index: 6; right: clamp(1.2rem, 7vw, 8rem); top: 50%; width: min(25rem, 38vw); transform: translateY(-50%); display: grid; gap: .45rem; }
.breakdown-ui button { min-height: 3rem; padding: 0 1rem; display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; text-align: left; cursor: pointer; background: rgba(4,4,5,.34); border: 1px solid var(--line); backdrop-filter: blur(12px); letter-spacing: .14em; font-size: .58rem; transition: background .25s, transform .35s var(--ease-out), border-color .25s; }
.breakdown-ui button:hover,
.breakdown-ui button.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateX(-.75rem); }
.breakdown-ui button i { font-style: normal; opacity: .56; }

.lab-layout { align-items: start; grid-template-columns: minmax(0,1fr) minmax(18rem, 34rem); gap: 4vw; padding-top: calc(16vh + var(--safe-top)); }
.lab-heading { align-self: start; }
.material-console { position: relative; z-index: 8; align-self: center; width: 100%; border-top: 1px solid var(--line); backdrop-filter: blur(16px); }
.material-console__head,
.material-console__foot { min-height: 2.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .54rem; letter-spacing: .16em; }
.material-list { display: grid; }
.material-option { min-height: 4.15rem; display: grid; grid-template-columns: 2rem 1.2rem 1fr auto; align-items: center; gap: .7rem; padding: 0 .2rem; cursor: pointer; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); text-align: left; transition: padding .3s var(--ease-out), background .25s, color .25s; }
.material-option:hover,
.material-option.is-active { padding-left: .9rem; color: var(--bg); background: var(--ink); }
.material-option__swatch { width: .72rem; aspect-ratio: 1; border-radius: 50%; background: var(--swatch); border: 1px solid color-mix(in srgb, var(--swatch) 45%, #fff); box-shadow: 0 0 1.1rem color-mix(in srgb, var(--swatch) 55%, transparent); }
.material-option span,
.material-option em { font-size: .52rem; letter-spacing: .14em; font-style: normal; }
.material-option b { font-size: .66rem; letter-spacing: .12em; }

.archive-layout { grid-template-columns: 1fr minmax(19rem, 36rem); gap: 6vw; }
.form-console { position: relative; z-index: 7; display: grid; border-top: 1px solid var(--line); }
.form-option { min-height: 5rem; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; padding: 0 .3rem; cursor: pointer; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); text-align: left; transition: padding .35s var(--ease-out), background .25s, color .25s; }
.form-option:hover,
.form-option.is-active { padding-left: 1.1rem; color: var(--bg); background: var(--ink); }
.form-option span,
.form-option i { font-size: .53rem; letter-spacing: .16em; font-style: normal; }
.form-option b { font-size: .88rem; letter-spacing: .11em; }
.archive-telemetry { position: absolute; right: clamp(1.2rem, 5vw, 5rem); bottom: 6.5rem; display: flex; gap: 1.5rem; color: var(--muted); font-size: .52rem; letter-spacing: .17em; }

.origin-layout { place-items: center; text-align: center; }
.origin-mark { position: relative; z-index: 7; display: grid; place-items: center; gap: 2rem; }
.origin-mark p { margin: 0; color: var(--muted); font-size: .58rem; letter-spacing: .24em; }
.origin-mark h2 { margin: 0; white-space: pre-line; font: 700 clamp(4rem, 11vw, 11rem)/.72 var(--font-display); letter-spacing: -.07em; text-transform: uppercase; }
.origin-mark a { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border: 1px solid var(--line); font-size: .62rem; letter-spacing: .17em; transition: color .25s, background .25s, transform .3s var(--ease-out); }
.origin-mark a:hover { color: var(--bg); background: var(--ink); transform: scale(1.04); }
.origin-logo { width: min(48vw, 40rem); filter: drop-shadow(0 0 3rem var(--soft)); }

.worlds-layout { display: grid; grid-template-rows: auto 1fr auto; align-items: center; padding-top: calc(12vh + var(--safe-top)); padding-bottom: calc(4vh + var(--safe-bottom)); background: linear-gradient(to bottom, transparent, rgba(0,0,0,.42) 60%, rgba(0,0,0,.86)); }
.worlds-heading { position: relative; z-index: 6; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.worlds-heading h2 { margin: 0; font: 700 clamp(3.6rem, 9vw, 9rem)/.75 var(--font-display); letter-spacing: -.07em; }
.worlds-heading p { margin: 0; color: var(--muted); font-size: .58rem; letter-spacing: .2em; }
.world-carousel { position: relative; z-index: 9; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(.5rem, 2vw, 2rem); }
.world-arrow { width: clamp(3rem, 5vw, 4.5rem); aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 50%; backdrop-filter: blur(12px); transition: color .25s, background .25s, transform .35s var(--ease-out); }
.world-arrow:hover { color: var(--bg); background: var(--ink); transform: scale(1.08); }
.world-arrow svg { width: 42%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.world-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.world-viewport.is-dragging { cursor: grabbing; }
.world-track { display: flex; align-items: stretch; gap: clamp(.7rem, 1.5vw, 1.4rem); transform: translate3d(0,0,0); transition: transform .8s var(--ease-out); will-change: transform; }
.world-card { --card-accent: var(--accent); flex: 0 0 clamp(15rem, 28vw, 27rem); min-height: clamp(17rem, 38vh, 27rem); position: relative; overflow: hidden; padding: 1.1rem; display: grid; grid-template-rows: auto 1fr auto; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 22%, #050505), #050505 74%); border: 1px solid rgba(255,255,255,.16); cursor: pointer; opacity: .44; transform: scale(.88); transition: opacity .55s, transform .7s var(--ease-out), border-color .4s; }
.world-card::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -26%; top: -24%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--card-accent) 70%, transparent); box-shadow: 0 0 4rem color-mix(in srgb, var(--card-accent) 24%, transparent), inset 0 0 4rem color-mix(in srgb, var(--card-accent) 16%, transparent); }
.world-card::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 2.8rem 2.8rem; mask-image: linear-gradient(135deg, #000, transparent 76%); }
.world-card.is-selected { opacity: 1; transform: scale(1); border-color: color-mix(in srgb, var(--card-accent) 78%, #fff); }
.world-card__top,
.world-card__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: .52rem; letter-spacing: .16em; }
.world-card__symbol { position: relative; z-index: 2; align-self: center; font: 700 clamp(4.6rem, 9vw, 9rem)/.75 var(--font-display); letter-spacing: -.08em; text-shadow: 0 0 3rem color-mix(in srgb, var(--card-accent) 65%, transparent); }
.world-card__name { font-weight: 700; }
.world-enter { position: relative; z-index: 8; justify-self: center; min-width: min(31rem, 90vw); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 1rem 1rem 1rem 1.35rem; cursor: pointer; color: var(--ink); background: rgba(0,0,0,.32); border: 1px solid var(--line); backdrop-filter: blur(16px); text-align: left; transition: background .3s, color .3s, transform .35s var(--ease-out); }
.world-enter:hover:not(:disabled) { color: var(--bg); background: var(--ink); transform: translateY(-.3rem); }
.world-enter:disabled { opacity: .45; cursor: default; }
.world-enter span { display: grid; gap: .25rem; }
.world-enter small { color: var(--muted); font-size: .5rem; letter-spacing: .18em; }
.world-enter b { font-size: .75rem; letter-spacing: .14em; }
.world-enter i { width: 3.4rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-size: 1.4rem; }
.worlds-footer { position: relative; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .5rem; letter-spacing: .16em; }
.worlds-footer a { color: var(--ink); }

.cursor { position: fixed; z-index: 500; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; mix-blend-mode: difference; }
.cursor__ring { position: absolute; width: 2.7rem; height: 2.7rem; left: -1.35rem; top: -1.35rem; border: 1px solid #fff; border-radius: 50%; transition: width .25s var(--ease-out), height .25s var(--ease-out), left .25s var(--ease-out), top .25s var(--ease-out), opacity .25s; }
.cursor__dot { position: absolute; width: .22rem; height: .22rem; left: -.11rem; top: -.11rem; border-radius: 50%; background: #fff; }
.cursor__label { position: absolute; left: 1.7rem; top: -.3rem; white-space: nowrap; font-size: .5rem; letter-spacing: .16em; opacity: 0; transition: opacity .2s; }
.cursor.is-active .cursor__ring { width: 4.5rem; height: 4.5rem; left: -2.25rem; top: -2.25rem; }
.cursor.is-active .cursor__label { opacity: 1; }

.toast { position: fixed; z-index: 190; left: 50%; bottom: calc(1.3rem + var(--safe-bottom)); padding: .75rem 1rem; color: var(--bg); background: var(--ink); transform: translate(-50%, 160%); font-size: .55rem; letter-spacing: .15em; transition: transform .45s var(--ease-out); }
.toast.is-visible { transform: translate(-50%, 0); }

.portal-transition { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.portal-transition__iris { position: absolute; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--portal, var(--accent)); transform: scale(0); box-shadow: 0 0 12rem var(--portal, var(--accent)); }
.portal-transition__rings { position: absolute; width: min(54vw, 42rem); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; opacity: 0; }
.portal-transition__rings::before,
.portal-transition__rings::after { content:""; position:absolute; inset: 12%; border: inherit; border-radius: inherit; }
.portal-transition__rings::after { inset: 27%; }
.portal-transition__copy { position: relative; z-index: 2; display: grid; gap: .4rem; text-align: center; color: #fff; opacity: 0; }
.portal-transition__copy span { font: 700 clamp(3rem, 10vw, 10rem)/.8 var(--font-display); letter-spacing: -.07em; }
.portal-transition__copy b { font-size: .58rem; letter-spacing: .2em; }
body.is-portaling .portal-transition { visibility: visible; }
body.is-portaling .portal-transition__iris { animation: portal-iris 1.6s var(--ease-in-out) forwards; }
body.is-portaling .portal-transition__rings { animation: portal-rings 1.35s .12s var(--ease-out) forwards; }
body.is-portaling .portal-transition__copy { animation: portal-copy .75s .48s var(--ease-out) forwards; }
@keyframes portal-iris { 0%{transform:scale(0)} 58%{transform:scale(130)} 100%{transform:scale(180)} }
@keyframes portal-rings { from{opacity:0;transform:scale(.35) rotate(0)} to{opacity:.72;transform:scale(1.7) rotate(180deg)} }
@keyframes portal-copy { from{opacity:0;transform:translateY(2rem)} to{opacity:1;transform:none} }

.arrival { position: fixed; z-index: 240; inset: 0; display: grid; place-items: center; pointer-events: none; visibility: hidden; background: var(--bg); }
.arrival__ring { width: min(56vw, 44rem); aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 8rem var(--soft); }
.arrival__copy { position: absolute; display: grid; text-align: center; gap: .45rem; }
.arrival__copy span { font: 700 clamp(3rem, 10vw, 9rem)/.8 var(--font-display); }
.arrival__copy b { color: var(--muted); font-size: .55rem; letter-spacing: .2em; }
body.is-arriving .arrival { visibility: visible; animation: arrival-out 1.8s .2s var(--ease-in-out) forwards; }
body.is-arriving .arrival__ring { animation: arrival-ring 1.7s var(--ease-out) both; }
@keyframes arrival-out { 0%,45%{clip-path:circle(100% at 50% 50%)} 100%{clip-path:circle(0 at 50% 50%);visibility:hidden} }
@keyframes arrival-ring { from{transform:scale(.1);opacity:0} 45%{opacity:1} to{transform:scale(2.3);opacity:0} }

.noscript { position: fixed; z-index: 999; inset: 0; display: grid; place-items: center; padding: 2rem; background: var(--bg); text-align: center; }

@media (pointer: coarse), (hover: none) { .cursor { display: none; } }

@media (max-width: 860px) {
  :root { --header-h: 4.35rem; }
  .site-header { grid-template-columns: 1fr auto; }
  .header-progress { display: none; }
  .origin-link { display: none; }
  .chapter-rail { display: none; }
  .chapter { min-height: 145vh; }
  .chapter--hero { min-height: 170vh; }
  .chapter--lab,
  .chapter--archive,
  .chapter--worlds { min-height: 190vh; }
  .chapter__sticky { padding-left: 1.15rem; padding-right: 1.15rem; }
  .chapter-copy { width: 92vw; }
  .chapter-title { font-size: clamp(3.7rem, 19vw, 8rem); }
  .hero-title { font-size: clamp(7rem, 35vw, 16rem); }
  .hero-symbol { top: 22%; }
  .hero-meta { bottom: 12%; max-width: 12rem; }
  .logo-hero,
  body[data-world="digitalised"] .logo-hero { width: 86vw; }
  .breakdown-ui { right: 1.15rem; left: 1.15rem; top: auto; bottom: 8%; width: auto; transform: none; }
  .lab-layout,
  .archive-layout { display: grid; grid-template-columns: 1fr; align-content: center; gap: 2rem; padding-top: calc(var(--header-h) + 7vh); }
  .lab-heading .chapter-title,
  .archive-layout .chapter-title { font-size: clamp(3.5rem, 16vw, 6rem); }
  .material-option { min-height: 3.45rem; }
  .form-option { min-height: 3.8rem; }
  .archive-telemetry { display: none; }
  .origin-logo { width: 82vw; }
  .worlds-layout { padding-top: calc(var(--header-h) + 4vh); }
  .worlds-heading { align-items: start; }
  .worlds-heading h2 { font-size: clamp(3.5rem, 17vw, 6rem); }
  .worlds-heading p { max-width: 8rem; text-align: right; }
  .world-carousel { grid-template-columns: 2.8rem minmax(0,1fr) 2.8rem; gap: .4rem; }
  .world-card { flex-basis: min(72vw, 20rem); min-height: 19rem; }
  .worlds-footer { display: grid; grid-template-columns: 1fr auto; }
  .worlds-footer span:nth-child(2) { display: none; }
  .boot__bottom { align-items: end; flex-wrap: wrap; }
  .boot__progress { flex-basis: 100%; }
  .boot__core { width: min(80vw, 30rem); }
  .boot__actions { width: 100%; }
  .enter { flex: 1; }
}

@media (max-width: 520px) {
  .brand__meta,
  .utility { display: none; }
  .site-header { padding-left: .85rem; padding-right: .85rem; }
  .sound-toggle { padding: 0 .6rem; }
  .chapter__sticky { padding-left: .9rem; padding-right: .9rem; }
  .chapter__sticky::after { right: .9rem; }
  .chapter-title { font-size: clamp(3.2rem, 18vw, 6rem); }
  .chapter-meta { font-size: .5rem; }
  .hero-title { font-size: 36vw; }
  .hero-symbol { left: .9rem; }
  .hero-meta { right: .9rem; }
  .breakdown-ui { left: .9rem; right: .9rem; }
  .breakdown-ui button { min-height: 2.75rem; }
  .material-option { grid-template-columns: 1.6rem 1rem 1fr auto; gap: .4rem; }
  .material-option b { font-size: .57rem; }
  .world-card { flex-basis: 70vw; }
  .world-enter { min-width: 100%; }
  .boot__top span:last-child { max-width: 9rem; text-align: right; }
  .boot__actions { gap: .25rem; }
  .enter,
  .enter-muted { padding: .72rem .65rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .chapter-title { opacity: 1; transform: none; }
}


/* MATERIAL UNIVERSE V3 — adaptive visual layer */
.world-aurora{position:fixed;z-index:0;inset:-24vmax;pointer-events:none;opacity:.13;background:conic-gradient(from 0deg at calc(50% + var(--px,0px)) calc(50% + var(--py,0px)),transparent 0 18%,color-mix(in srgb,var(--accent) 24%,transparent) 28%,transparent 39% 60%,color-mix(in srgb,var(--accent-2) 15%,transparent) 72%,transparent 86%);transform:translate3d(0,0,0) rotate(calc(var(--scroll-progress,0)*26deg));transition:opacity .8s ease;will-change:transform}
.universe-link{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;padding:0 .82rem;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.52rem;letter-spacing:.18em;background:rgba(0,0,0,.16);transition:border-color .25s ease,background .25s ease,transform .35s var(--ease-out)}
.universe-link:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.25))}
.world-card[data-world-card="universe"]::before{border-radius:0;transform:rotate(45deg);background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 18%,transparent),transparent 66%)}
body.is-idle #world-fx{opacity:.48}
body[data-quality="eco"] .world-aurora,body[data-quality="eco"] .world-scan{display:none}
body[data-quality="eco"] #world-fx{opacity:.42}
.chapter{contain:layout style}
.chapter__sticky{backface-visibility:hidden}
@media (max-width:900px){.origin-link{display:none}.universe-link{padding:0 .62rem;font-size:.44rem}.world-aurora{opacity:.085}.breakdown-ui button,.material-console,.world-arrow,.world-enter{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(4,4,7,.76)}}
@media (max-width:640px){.universe-link{display:none}.header-actions{gap:.35rem}.world-aurora{display:none}}
@media (prefers-reduced-motion:reduce){.world-aurora{display:none}}


/* MATERIAL UNIVERSE 4 / PERFORMANCE EDITION */
body{--panel-solid:rgba(4,4,8,.78)}
body:not([data-quality="high"]) .breakdown-ui button,
body:not([data-quality="high"]) .material-console,
body:not([data-quality="high"]) .world-arrow,
body:not([data-quality="high"]) .world-enter,
body:not([data-quality="high"]) .focus-enter{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel-solid)
}
body.is-idle .world-aurora{opacity:.055}
body.is-idle .ornament--spectrum::before,
body.is-idle .boot__rings,
body.is-idle .sound-bars i{animation-play-state:paused!important}
body[data-quality="eco"] .world-noise,
body[data-quality="eco"] .world-scan{display:none!important}
body[data-quality="eco"] .world-grid{opacity:.08}
.chapter:not(.is-active) .ornament{opacity:.36}
.chapter.is-active .ornament{opacity:1;transition:opacity .8s ease}
.world-card,.material-option,.form-option,.world-enter,.focus-enter{touch-action:manipulation}
#world-stage,#world-fx{contain:strict}
@media(max-width:900px){
  .site-header{mix-blend-mode:normal}
  .world-noise{opacity:.025}
  .ornament--spectrum::before{animation-duration:30s}
}
@media(max-width:640px){.world-grid,.world-scan{display:none!important}}