:root {
  --black: #050507;
  --black-2: #0b0b10;
  --gray: #191a20;
  --gray-2: #292b34;
  --muted: #a7a9b2;
  --white: #f7f7f2;
  --cyan: #00efff;
  --pink: #ff2dcc;
  --lime: #c8ff00;
  --yellow: #fff000;
  --purple: #8b4dff;
  --orange: #ff6300;
  --red: #ff3155;
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
  --mono: "Courier New", "PingFang TC", "Noto Sans TC", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  max-width: 100%;
  scroll-behavior: smooth;
  background: var(--black);
  scrollbar-color: var(--pink) #09090c;
}

body {
  min-width: 0;
  min-height: 100vh;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  color: var(--white);
  background:
    radial-gradient(circle at 8% 11%, rgba(139,77,255,.15), transparent 20rem),
    radial-gradient(circle at 93% 26%, rgba(0,239,255,.08), transparent 26rem),
    radial-gradient(circle at 20% 78%, rgba(255,45,204,.08), transparent 25rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    var(--black);
  font-family: var(--body-font);
  line-height: 1.75;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .055;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 3px 4px);
  mix-blend-mode: screen;
}

::selection { color: #000; background: var(--lime); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, summary { font: inherit; }
a, button, summary { -webkit-tap-highlight-color: rgba(0,239,255,.22); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: .65rem 1rem;
  color: #000;
  background: var(--yellow);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.pixel-ambience {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .65;
  mix-blend-mode: screen;
}

.status-ticker {
  position: relative;
  z-index: 100;
  width: 100%;
  overflow: hidden;
  color: #000;
  background: var(--yellow);
  border-bottom: 4px solid #000;
  box-shadow: 0 4px 0 var(--orange);
  font: 900 .78rem/1 var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 1.4rem;
  padding: .75rem 0;
  animation: ticker 30s linear infinite;
}
.ticker-track span:nth-child(2n) { color: var(--pink); }

.site-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 4rem) 6rem;
  isolation: isolate;
}

.world-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route { fill: none; vector-effect: non-scaling-stroke; }
.route-cyan { stroke: var(--cyan); stroke-width: 2; opacity: .45; filter: drop-shadow(0 0 5px var(--cyan)); }
.route-pink { stroke: var(--pink); stroke-width: 4; opacity: .22; }
.route-dash { stroke: rgba(255,255,255,.3); stroke-width: 1; stroke-dasharray: 6 12; }

.floating-glyphs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: visible; }
.glyph {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 2.8rem;
  min-height: 2.8rem;
  padding: .55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--cyan);
  background: #07070a;
  font: 900 .72rem/1 var(--mono);
  font-style: normal;
  box-shadow: 0 0 18px currentColor;
}
.g1 { top: 5%; left: 3%; color: var(--pink); transform: rotate(-16deg); }
.g2 { top: 19%; right: 4%; color: var(--lime); }
.g3 { top: 37%; left: 8%; color: var(--yellow); font-size: 1.5rem; }
.g4 { top: 56%; right: 2%; color: var(--purple); border-radius: 50% 30% 55% 35%; transform: rotate(8deg); }
.g5 { top: 73%; left: 5%; color: var(--orange); font-size: 1.25rem; }
.g6 { top: 88%; right: 8%; color: var(--cyan); font-size: 1.5rem; }

.masthead {
  position: relative;
  min-height: clamp(15rem, 30vw, 25rem);
  padding-top: clamp(2rem, 6vw, 5rem);
}
.wordmark {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  text-decoration: none;
  color: var(--white);
  font: 1000 clamp(2.3rem, 8vw, 7rem)/.8 var(--body-font);
  letter-spacing: -.1em;
  text-shadow: .04em .04em 0 var(--pink), -.03em -.03em 0 var(--cyan);
  transform: rotate(-3deg);
}
.wordmark-core { position: relative; }
.wordmark-core::after {
  content: "";
  position: absolute;
  left: 10%; right: -8%; bottom: -.35rem;
  height: .16em;
  background: var(--lime);
  transform: skewX(-25deg);
}
.wordmark-dot { color: var(--yellow); }
.wordmark-cool { color: var(--white); }

.language-console {
  position: absolute;
  z-index: 5;
  top: clamp(6.8rem, 15vw, 10rem);
  right: clamp(.2rem, 5vw, 5rem);
  width: clamp(8.5rem, 18vw, 12rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--cyan);
  border-left-color: transparent;
  border-radius: 50%;
  background: rgba(5,5,7,.84);
  box-shadow: inset 0 0 0 9px rgba(0,239,255,.05), 0 0 28px rgba(0,239,255,.24);
  animation: breathe 4s steps(4,end) infinite;
}
.language-console::before, .language-console::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.language-console::before { inset: -1rem; border: 1px dashed rgba(255,255,255,.32); }
.language-console::after { width: .75rem; height: .75rem; top: 4%; left: 14%; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.console-label { position: absolute; top: 19%; font: 900 .57rem/1 var(--mono); letter-spacing: .15em; color: var(--muted); }
.language-switch { display: flex; align-items: center; gap: .35rem; }
.lang-button {
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: .4rem;
  border: 1px solid var(--gray-2);
  border-radius: 50%;
  color: var(--white);
  background: #111217;
  cursor: pointer;
  font: 900 .74rem/1 var(--mono);
}
.lang-button[data-set-lang="en"] { min-width: 4.25rem; }
.lang-button.is-active { color: #000; background: var(--lime); border-color: var(--lime); box-shadow: 0 0 16px rgba(200,255,0,.65); }

.nav-tabs {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.nav-tabs::before {
  content: "";
  position: absolute;
  left: 10%; top: 26%;
  width: 70%; height: 54%;
  border: 1px solid rgba(255,255,255,.3);
  border-top-color: var(--purple);
  border-right-color: var(--cyan);
  border-radius: 50%;
  transform: rotate(8deg);
}
.nav-tabs a {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(4.6rem, 9vw, 7rem);
  aspect-ratio: 1;
  padding: .55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--white);
  background: rgba(11,11,16,.94);
  text-align: center;
  text-decoration: none;
  font: 900 clamp(.55rem, .9vw, .72rem)/1.2 var(--mono);
  pointer-events: auto;
  transition: transform .18s steps(2,end), color .18s;
}
.nav-tabs a:hover { color: var(--lime); transform: scale(1.12) rotate(-5deg); }
.nav-tabs a:nth-child(1) { left: 3%; top: 47%; color: var(--pink); }
.nav-tabs a:nth-child(2) { left: 22%; bottom: 2%; color: var(--cyan); }
.nav-tabs a:nth-child(3) { left: 46%; bottom: -6%; color: var(--yellow); }
.nav-tabs a:nth-child(4) { right: 24%; bottom: 5%; color: var(--purple); }
.nav-tabs a:nth-child(5) { right: 5%; top: 55%; color: var(--lime); }

main { min-width: 0; }
.section-block, .hero { position: relative; min-width: 0; scroll-margin-top: 2rem; }
.section-block { margin-top: clamp(8rem, 17vw, 15rem); }

.hero {
  min-height: clamp(62rem, 105vw, 90rem);
  margin-top: clamp(2rem, 5vw, 5rem);
}
.hero-orbit {
  position: absolute;
  z-index: -1;
  top: 1%; left: 1%;
  width: min(82vw, 61rem);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.24);
  border-right-color: var(--cyan);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.hero-orbit::before, .hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.hero-orbit::before { inset: 11%; border: 1px dashed var(--pink); opacity: .48; }
.hero-orbit::after { inset: 28%; border: 1px solid rgba(200,255,0,.4); }
.hero-orbit i { position: absolute; width: .85rem; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 18px var(--yellow); }
.hero-orbit i:nth-child(1) { top: 10%; left: 18%; }
.hero-orbit i:nth-child(2) { top: 43%; right: -6px; background: var(--cyan); }
.hero-orbit i:nth-child(3) { bottom: 9%; left: 24%; background: var(--pink); }

.hero-copy { position: relative; z-index: 2; width: min(100%, 61rem); padding-top: clamp(4rem, 9vw, 8rem); }
.eyebrow {
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: .5rem .85rem;
  color: #000;
  background: var(--cyan);
  font: 900 .75rem/1.2 var(--mono);
  letter-spacing: .1em;
  transform: rotate(-2deg);
  box-shadow: .45rem .45rem 0 var(--purple);
}
.hero h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: .83;
  letter-spacing: -.095em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: .045em .045em 0 var(--purple), -.022em -.022em 0 var(--cyan);
}
.hero-statement { width: min(90%, 43rem); margin: 2.8rem 0 2rem 8%; font-weight: 900; font-size: clamp(1.15rem, 2.5vw, 2rem); transform: rotate(-1deg); }
.hero-statement mark { color: #000; background: var(--lime); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .08em .25em; }
.hero-intro { width: min(84%, 44rem); margin-left: 2%; padding: 1.2rem 1.5rem; background: rgba(5,5,7,.83); border-left: 2px solid var(--pink); border-radius: 0 45% 18% 0 / 0 30% 20% 0; }
.hero-intro p { margin: 0 0 1rem; color: #d2d3d9; font-size: clamp(1rem, 1.5vw, 1.17rem); }
.hero-intro p:last-child { margin-bottom: 0; }
.hero-copy > .hero-intro { margin-top: 1rem; }
.hero-copy > p.hero-intro { display: inline-block; width: auto; margin: 1rem 0 0 12%; border: 0; border-bottom: 2px solid var(--yellow); border-radius: 0; }
.hero-close {
  width: min(82%, 43rem);
  margin: 2.2rem 0 0 4%;
  color: var(--yellow);
  font: 900 clamp(1.2rem, 2.3vw, 1.8rem)/1.45 var(--mono);
  transform: rotate(1deg);
}
.hero-art {
  position: absolute;
  z-index: 3;
  top: clamp(30rem, 45vw, 38rem);
  right: 2%;
  width: clamp(16rem, 39vw, 34rem);
  margin: 0;
  transform: rotate(5deg);
}
.art-screen {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid var(--white);
  border-radius: 50% 42% 52% 46% / 46% 56% 42% 54%;
  background: var(--gray);
  box-shadow: 1rem 1rem 0 var(--purple), -1rem -.7rem 0 var(--pink), 0 0 0 1.5rem rgba(0,239,255,.08);
}
.art-screen img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: saturate(1.15) contrast(1.08); }
.art-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.24) 5px 7px); }
.hero-art figcaption { width: 85%; margin: 1.5rem auto 0; color: var(--cyan); text-align: center; font: 900 .74rem/1.5 var(--mono); transform: rotate(-5deg); }
.hero-readout { position: absolute; right: 1%; top: 26rem; display: grid; gap: .3rem; color: var(--muted); font: 700 .65rem/1 var(--mono); text-align: right; }
.hero-readout span:nth-child(2) { color: var(--yellow); }

.quick-questions { position: absolute; z-index: 4; inset: auto 0 0; min-height: 23rem; }
.quick-label { position: absolute; left: 38%; top: 41%; width: 9rem; margin: 0; text-align: center; color: var(--pink); font: 900 .7rem/1.4 var(--mono); }
.quick-label::before { content: ""; position: absolute; inset: -1.3rem; border: 1px dashed var(--pink); border-radius: 50%; }
.quick-question {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(8.5rem, 17vw, 13rem);
  aspect-ratio: 1;
  padding: 1.25rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(10,10,14,.94);
  text-align: center;
  text-decoration: none;
  font-weight: 850;
  line-height: 1.45;
  box-shadow: inset 0 0 0 .65rem rgba(255,255,255,.025), 0 0 24px color-mix(in srgb, currentColor 25%, transparent);
}
.quick-question:nth-of-type(1) { left: 1%; top: 20%; color: var(--cyan); transform: rotate(-7deg); }
.quick-question:nth-of-type(2) { left: 28%; bottom: 0; color: var(--yellow); transform: rotate(4deg); }
.quick-question:nth-of-type(3) { right: 5%; top: 5%; color: var(--lime); transform: rotate(7deg); }
.quick-question:hover { color: var(--pink); }

.section-marker { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .75rem; font: 900 .72rem/1 var(--mono); letter-spacing: .1em; transform: rotate(-5deg); }
.section-marker span { display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border: 2px solid var(--yellow); border-radius: 50%; color: #000; background: var(--yellow); box-shadow: .45rem .3rem 0 var(--pink); }
.section-marker b { padding: .45rem .75rem; color: var(--cyan); border-bottom: 1px solid currentColor; }
.section-heading { position: relative; z-index: 2; width: min(90%, 60rem); margin: 2rem 0 5rem 6%; }
.section-heading h2, .text-window h2, .record-panel > h2, .statement-panel h2, .future-island h2, .status-content h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 6vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.section-heading p { max-width: 43rem; color: #c4c5cc; }

.category-stack { position: relative; display: flex; flex-direction: column; gap: clamp(4rem, 9vw, 8rem); }
.category { position: relative; width: min(84%, 61rem); min-width: 0; }
.category:nth-child(3n+1) { align-self: flex-start; }
.category:nth-child(3n+2) { align-self: flex-end; }
.category:nth-child(3n) { align-self: center; }
.category:nth-child(1) { width: min(72%, 54rem); }
.category:nth-child(2) { width: min(66%, 49rem); }
.category:nth-child(3) { width: min(81%, 60rem); }
.category:nth-child(4) { width: min(63%, 47rem); margin-left: 9%; }
.category:nth-child(5) { width: min(76%, 56rem); }
.category:nth-child(6) { width: min(69%, 51rem); transform: translateX(-6%); }
.category:nth-child(7) { width: min(79%, 58rem); }
.category:nth-child(8) { width: min(65%, 48rem); margin-right: 7%; }
.category:nth-child(9) { width: min(74%, 55rem); transform: translateX(5%); }
.category::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(8rem, 20vw, 18rem);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .32;
}
.category:nth-child(odd)::before { color: var(--pink); left: -6%; top: -2.5rem; border-left-color: transparent; }
.category:nth-child(even)::before { color: var(--cyan); right: -5%; top: -2rem; border-right-color: transparent; }
.category > summary {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.5rem);
  min-height: 9rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 2px solid var(--gray-2);
  border-radius: 38% 62% 35% 65% / 57% 34% 66% 43%;
  background: rgba(11,11,16,.95);
  cursor: pointer;
  list-style: none;
  box-shadow: .7rem .7rem 0 rgba(0,0,0,.8);
  transition: border-color .2s, transform .2s steps(2,end);
}
.category:nth-child(even) > summary { border-radius: 62% 38% 68% 32% / 38% 62% 36% 64%; }
.category:nth-child(3n) > summary { border-radius: 50% 30% 52% 38% / 34% 58% 42% 66%; }
.category > summary::-webkit-details-marker, .question-card > summary::-webkit-details-marker { display: none; }
.category > summary:hover { border-color: var(--cyan); transform: rotate(-1deg); }
.category[open] > summary { border-color: var(--pink); background: #111118; }
.category-code {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 9vw, 7rem);
  aspect-ratio: 1;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  color: #000;
  background: var(--cyan);
  font: 1000 clamp(1.4rem, 3vw, 2.6rem)/1 var(--mono);
  box-shadow: .35rem .35rem 0 var(--purple);
}
.category:nth-child(3n+2) .category-code { background: var(--lime); border-color: var(--lime); }
.category:nth-child(3n) .category-code { background: var(--yellow); border-color: var(--yellow); }
.category-summary-text { min-width: 0; display: grid; gap: .6rem; }
.category-heading { font-weight: 950; font-size: clamp(1.15rem, 2.3vw, 1.85rem); line-height: 1.18; }
.category-description { color: var(--muted); line-height: 1.5; }
.category-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 2.8rem; aspect-ratio: 1; margin-left: auto; border: 1px solid var(--pink); border-radius: 50%; color: var(--pink); font-size: 1.8rem; }
.category[open] .category-toggle span { transform: rotate(45deg); }

.question-list { position: relative; display: flex; flex-direction: column; gap: 2.6rem; width: min(93%, 52rem); margin: 3rem auto 0; padding: 1rem 0 2rem; }
.question-list::before { content: ""; position: absolute; z-index: -1; left: 49%; top: -4rem; bottom: 0; width: 45%; border: 2px dashed rgba(255,255,255,.18); border-left-color: var(--purple); border-radius: 50%; transform: translateX(-50%); }
.question-card { width: min(87%, 43rem); }
.question-card:nth-child(odd) { align-self: flex-start; }
.question-card:nth-child(even) { align-self: flex-end; }
.question-card > summary {
  position: relative;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  padding: 1rem 3.2rem 1rem 1.35rem;
  border: 1px solid var(--gray-2);
  border-radius: 999px 55% 999px 45%;
  background: #121319;
  cursor: pointer;
  font-weight: 820;
  line-height: 1.45;
}
.question-card:nth-child(even) > summary { border-radius: 48% 999px 40% 999px; }
.question-card > summary::before { content: "?"; position: absolute; right: .6rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.35rem; aspect-ratio: 1; border-radius: 50%; color: #000; background: var(--yellow); font: 1000 1rem/1 var(--mono); }
.question-card[open] > summary { border-color: var(--lime); color: var(--lime); }
.question-answer {
  position: relative;
  width: min(96%, 40rem);
  margin: 1rem auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8% 22% 7% 18% / 10% 6% 14% 8%;
  background: rgba(5,5,8,.96);
  color: #d3d4da;
}
.question-answer p { margin: 0 0 1rem; }
.case-source { font: 700 .7rem/1.5 var(--mono); color: var(--muted); }
.case-source span { color: var(--pink); margin-right: .65rem; }
.gap-sequence { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.5rem 0; }
.gap-sequence::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: var(--cyan); }
.gap-state { position: relative; z-index: 1; min-width: 0; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; padding: 1rem; border: 1px solid currentColor; border-radius: 50%; background: #0a0a0e; text-align: center; }
.gap-state:nth-child(1) { color: var(--cyan); transform: rotate(-3deg); }
.gap-state:nth-child(2) { color: var(--yellow); transform: translateY(1rem); }
.gap-state:nth-child(3) { color: var(--lime); transform: rotate(3deg); }
.gap-state h4 { margin: 0 0 .4rem; font: 900 .65rem/1.2 var(--mono); text-transform: uppercase; }
.gap-state p { margin: 0; color: var(--white); font-size: .82rem; line-height: 1.35; }
.concept-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
.concept-tags span { padding: .35rem .65rem; border: 1px solid var(--purple); border-radius: 999px; color: var(--white); background: #15131d; font: 700 .72rem/1.25 var(--mono); }
.mini-flow, .process-track, .timeline { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1.2rem 0; }
.mini-flow span, .process-track span, .timeline span { position: relative; padding: .35rem .7rem; border-radius: 999px; color: #000; background: var(--cyan); font: 800 .69rem/1.3 var(--mono); }
.mini-flow span:not(:last-child)::after, .process-track span:not(:last-child)::after, .timeline span:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + .1rem); color: var(--pink); }

.about-world { min-height: 75rem; }
.text-window {
  position: relative;
  width: min(77%, 57rem);
  margin: 4rem 0 0 3%;
  padding: clamp(2rem, 5vw, 5rem);
  border: 2px solid var(--purple);
  border-radius: 48% 52% 30% 70% / 14% 28% 72% 86%;
  background: rgba(10,10,15,.95);
  box-shadow: -1rem 1.2rem 0 rgba(139,77,255,.17);
}
.text-window p { max-width: 44rem; color: #c9cad0; }
.question-lines { display: grid; gap: 1rem; padding: 0; list-style: none; }
.question-lines li { position: relative; padding-left: 2.4rem; }
.question-lines li::before { content: "?"; position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.65rem; aspect-ratio: 1; border-radius: 50%; color: #000; background: var(--yellow); font: 900 .85rem/1 var(--mono); }
.closing-banner { color: var(--lime) !important; font-weight: 900; font-size: 1.2rem; }
.side-note {
  position: absolute;
  right: 2%;
  top: 35%;
  width: clamp(12rem, 25vw, 20rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  color: var(--white);
  background: #090a0e;
  text-align: center;
  font: 900 clamp(.9rem, 1.5vw, 1.1rem)/1.55 var(--mono);
  transform: rotate(7deg);
}
.side-note::before { content: ""; position: absolute; inset: -1.4rem; border: 1px dashed var(--pink); border-radius: 50%; }
.orbit-scrap { position: absolute; right: 14%; bottom: 5%; color: #000; background: var(--lime); padding: 1rem; font: 900 .7rem/1.3 var(--mono); transform: rotate(-12deg); box-shadow: .5rem .5rem 0 var(--pink); }

.example-world { min-height: 0; }
.example-card { position: relative; margin-top: 4rem; }
.example-head {
  position: relative;
  z-index: 3;
  width: min(72%, 50rem);
  min-height: 20rem;
  display: grid;
  align-content: center;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem);
  border: 3px solid var(--pink);
  border-radius: 50%;
  background: #0c0c11;
  text-align: center;
  box-shadow: 0 0 0 1.2rem rgba(255,45,204,.06), 1rem 1rem 0 #000;
}
.example-head::before { content: ""; position: absolute; inset: -2.4rem; border: 1px dashed var(--cyan); border-radius: 50%; }
.example-number { color: var(--yellow); font: 900 .78rem/1 var(--mono); letter-spacing: .1em; }
.example-head h2 { margin: 1rem 0 0; font-size: clamp(1.7rem, 4vw, 3.8rem); line-height: 1.1; text-wrap: balance; }
.example-body { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem 2rem; margin-top: 3rem; padding: 4rem 0; }
.example-body::before { content: ""; position: absolute; left: 9%; right: 9%; top: 3%; bottom: 12%; border: 2px solid rgba(255,255,255,.18); border-left-color: var(--cyan); border-right-color: var(--purple); border-radius: 50%; transform: rotate(-8deg); }
.example-step { position: relative; z-index: 2; min-width: 0; min-height: 13rem; padding: 1.5rem; border: 1px solid currentColor; border-radius: 50% 42% 56% 38% / 45% 60% 38% 55%; background: rgba(10,10,14,.97); color: var(--cyan); }
.example-step h3 { margin: 0 0 .7rem; font: 900 1rem/1.25 var(--mono); }
.example-step p { margin: 0 0 .75rem; color: #d0d1d6; font-size: .94rem; }
.example-step:nth-child(1) { grid-column: 1 / 6; transform: rotate(-3deg); }
.example-step:nth-child(2) { grid-column: 8 / 13; color: var(--yellow); transform: translateY(3rem) rotate(3deg); }
.example-step:nth-child(3) { grid-column: 2 / 7; color: var(--lime); transform: rotate(2deg); }
.example-step:nth-child(4) { grid-column: 8 / 13; color: var(--pink); transform: translateY(2rem) rotate(-3deg); }
.example-step:nth-child(5) { grid-column: 4 / 10; color: var(--purple); transform: rotate(2deg); }
.example-insight { position: relative; z-index: 4; grid-column: 5 / 11; margin: -2rem 0 0; padding: 1rem; color: #000; background: var(--lime); font-weight: 900; line-height: 1.45; text-align: center; transform: rotate(-3deg); box-shadow: .7rem .7rem 0 var(--pink); }
.example-footer { width: max-content; max-width: 90%; margin: 2rem auto 0; padding: .65rem 1rem; border-bottom: 2px solid var(--yellow); color: var(--yellow); text-align: center; font: 900 .82rem/1.4 var(--mono); }

.record-world { min-height: 0; }
.record-panel { margin-top: 4rem; }
.record-panel > h2 { width: min(84%, 55rem); }
.record-intro { width: min(80%, 45rem); color: #c8c9cf; }
.schema-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem 1.5rem; margin-top: 4rem; padding: 3rem 0; }
.schema-grid::before { content: ""; position: absolute; inset: 4% 12% 8%; border: 2px dashed rgba(0,239,255,.35); border-radius: 48%; }
.schema-item { position: relative; display: grid; align-content: center; min-width: 0; aspect-ratio: 1; padding: 1.25rem; border: 1px solid var(--gray-2); border-radius: 50%; background: #0e0f14; text-align: center; }
.schema-item h3 { margin: 0 0 .45rem; color: var(--cyan); font: 900 .83rem/1.2 var(--mono); }
.schema-item p { margin: 0; color: #c9cad0; font-size: .83rem; line-height: 1.45; }
.schema-item:nth-child(1) { grid-column: 1 / 3; }
.schema-item:nth-child(2) { grid-column: 3 / 5; transform: translateY(2rem); }
.schema-item:nth-child(3) { grid-column: 5 / 7; }
.schema-item:nth-child(4) { grid-column: 2 / 4; }
.schema-item:nth-child(5) { grid-column: 4 / 6; transform: translateY(2rem); }
.schema-item:nth-child(6) { grid-column: 1 / 3; }
.schema-item:nth-child(7) { grid-column: 3 / 5; transform: translateY(2rem); }
.schema-item:nth-child(8) { grid-column: 5 / 7; }
.schema-item:nth-child(9) { grid-column: 2 / 4; }
.schema-item:nth-child(10) { grid-column: 4 / 6; transform: translateY(2rem); }
.schema-item:nth-child(3n+2) h3 { color: var(--yellow); }
.schema-item:nth-child(3n) h3 { color: var(--pink); }
.process-track { justify-content: center; max-width: 62rem; margin-inline: auto; }
.process-track span:nth-child(2n) { background: var(--yellow); }
.process-track span:nth-child(3n) { background: var(--lime); }

.island-chain, .future-orbit { min-height: 0; display: flex; flex-direction: column; gap: clamp(8rem, 16vw, 14rem); }
.statement-panel, .future-island { position: relative; padding: clamp(2rem, 5vw, 5rem); background: rgba(10,10,15,.96); }
.danger-island { align-self: flex-start; width: min(73%, 52rem); border: 2px solid var(--pink); border-radius: 30% 70% 42% 58% / 17% 36% 64% 83%; }
.people-island { align-self: flex-end; width: min(76%, 56rem); border: 2px solid var(--cyan); border-radius: 62% 38% 28% 72% / 31% 14% 86% 69%; }
.statement-list, .agent-list, .friendly-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.statement-list li, .agent-list li, .friendly-list li { position: relative; padding-left: 2rem; }
.statement-list li::before, .agent-list li::before, .friendly-list li::before { content: "×"; position: absolute; left: 0; color: var(--pink); font: 900 1.2rem/1 var(--mono); }
.panel-close { color: var(--lime); font-weight: 900; }
.role-cloud { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; }
.role-cloud span { padding: .45rem .75rem; border: 1px solid var(--cyan); border-radius: 50%; background: #101117; font-size: .86rem; }
.role-cloud span:nth-child(3n) { border-color: var(--pink); transform: rotate(3deg); }
.role-cloud span:nth-child(3n+2) { border-color: var(--lime); transform: rotate(-2deg); }

.future-orbit::before { content: ""; position: absolute; inset: 4% 8%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--yellow); border-bottom-color: var(--purple); border-radius: 50%; transform: rotate(9deg); }
.agent-island { align-self: flex-start; width: min(70%, 51rem); border: 2px solid var(--purple); border-radius: 47% 53% 68% 32% / 30% 60% 40% 70%; }
.friendly-island { align-self: flex-end; width: min(70%, 51rem); border: 2px solid var(--lime); border-radius: 60% 40% 28% 72% / 55% 25% 75% 45%; }
.terminal-quote { padding: 1rem; color: var(--cyan); background: #050507; border-left: 2px solid var(--cyan); font-family: var(--mono); }
.friendly-list li::before { content: "+"; color: var(--lime); }

.construction-zone { min-height: 70rem; display: grid; place-items: center; }
.status-content {
  position: relative;
  z-index: 3;
  width: min(72%, 55rem);
  padding: clamp(2rem, 6vw, 5rem);
  border: 3px solid var(--yellow);
  border-radius: 50% 42% 50% 44% / 40% 55% 45% 60%;
  background: #09090d;
  box-shadow: 1rem 1rem 0 var(--purple);
}
.status-content p { color: #cbccd2; }
.status-closing { color: var(--yellow) !important; font: 900 clamp(1.15rem, 2vw, 1.5rem)/1.5 var(--mono); }
.status-ring { position: absolute; width: min(calc(100% - 6rem), 68rem); aspect-ratio: 1; border: 2px dashed rgba(0,239,255,.42); border-radius: 50%; animation: slowturn 32s linear infinite; }
.status-ring::before { content: ""; position: absolute; inset: 12%; border: 1px solid var(--pink); border-left-color: transparent; border-radius: 50%; }
.status-ring i { position: absolute; display: grid; place-items: center; width: 4rem; aspect-ratio: 1; border-radius: 50%; color: #000; background: var(--cyan); font: 900 1.2rem/1 var(--mono); font-style: normal; }
.status-ring i:nth-child(1) { left: 48%; top: -2rem; }
.status-ring i:nth-child(2) { right: -2rem; top: 45%; background: var(--yellow); }
.status-ring i:nth-child(3) { left: 47%; bottom: -2rem; background: var(--pink); }
.status-ring i:nth-child(4) { left: -2rem; top: 46%; background: var(--lime); }
.caution-orbit { position: absolute; inset: auto 0 3%; display: flex; gap: 3rem; overflow: hidden; padding: .8rem 0; color: #000; background: repeating-linear-gradient(135deg,var(--yellow) 0 2rem,#050507 2rem 4rem); border-block: 2px solid var(--yellow); font: 900 .72rem/1 var(--mono); }
.caution-orbit span { padding: .4rem .8rem; background: var(--yellow); white-space: nowrap; }

.site-footer {
  position: relative;
  width: min(86%, 64rem);
  min-height: 34rem;
  display: grid;
  place-content: center;
  margin: clamp(5rem, 12vw, 11rem) auto 0;
  padding: clamp(2rem, 6vw, 5rem);
  border: 2px solid var(--purple);
  border-radius: 50%;
  background: #09090e;
  text-align: center;
}
.site-footer::before, .site-footer::after { content: ""; position: absolute; border-radius: 50%; }
.site-footer::before { inset: -2rem; border: 1px dashed var(--cyan); }
.site-footer::after { inset: 12%; border: 1px solid rgba(255,45,204,.35); }
.footer-logo { position: relative; z-index: 2; margin: 0; font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 1000; line-height: .9; letter-spacing: -.09em; text-shadow: .05em .05em 0 var(--pink), -.025em -.025em 0 var(--cyan); overflow-wrap: anywhere; }
.footer-tagline { position: relative; z-index: 2; color: var(--lime); font-weight: 900; font-size: clamp(1rem, 2vw, 1.35rem); }
.footer-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.footer-meta span { padding: .35rem .7rem; border: 1px solid var(--muted); border-radius: 999px; color: var(--muted); font: 700 .7rem/1.3 var(--mono); }

.back-to-top {
  position: fixed;
  z-index: 110;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 4.2rem;
  aspect-ratio: 1;
  border: 2px solid #000;
  border-radius: 50%;
  color: #000;
  background: var(--lime);
  box-shadow: .45rem .25rem 0 var(--pink);
  font: 1000 1.4rem/1 var(--mono);
  cursor: pointer;
  opacity: 0;
  translate: 0 6rem;
  transition: opacity .2s, translate .2s;
}
.back-to-top.is-visible { opacity: 1; translate: 0; }
.noscript-note { margin: 1rem; padding: 1rem; color: #000; background: var(--yellow); font-weight: 900; }
.reveal { opacity: 0; translate: 0 2.5rem; transition: opacity .5s steps(5,end), translate .5s steps(5,end); }
.reveal.is-visible { opacity: 1; translate: 0; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes slowturn { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 9px rgba(0,239,255,.09), 0 0 42px rgba(0,239,255,.36); } }

@media (max-width: 760px) {
  body { line-height: 1.68; }
  .site-shell { padding-inline: 1rem; }
  .world-lines { opacity: .68; }
  .floating-glyphs { opacity: .5; }
  .glyph { min-width: 2.35rem; min-height: 2.35rem; padding: .4rem; box-shadow: 0 0 10px currentColor; }
  .masthead { min-height: 25rem; padding-top: 2.3rem; }
  .wordmark { display: flex; flex-wrap: wrap; font-size: clamp(2.6rem, 15vw, 5rem); letter-spacing: -.09em; }
  .language-console { top: 8.8rem; right: 1rem; width: 9.4rem; }
  .nav-tabs::before { left: 2%; top: 39%; width: 94%; height: 48%; }
  .nav-tabs a { width: 4.45rem; font-size: .52rem; }
  .nav-tabs a:nth-child(1) { left: 0; top: 53%; }
  .nav-tabs a:nth-child(2) { left: 14%; bottom: 1%; }
  .nav-tabs a:nth-child(3) { left: calc(50% - 2.2rem); bottom: -7%; }
  .nav-tabs a:nth-child(4) { right: 13%; bottom: 2%; }
  .nav-tabs a:nth-child(5) { right: 0; top: 52%; }
  .section-block { margin-top: 9rem; }
  .hero { min-height: 0; margin-top: 2rem; }
  .hero-orbit { top: 1rem; left: 2%; width: 96%; }
  .hero-orbit i:nth-child(2) { right: 0; }
  .hero-copy { padding-top: 4rem; }
  .hero h1 { font-size: clamp(3.2rem, 18vw, 5.6rem); }
  .hero-statement { width: 93%; margin-left: 4%; }
  .hero-intro { width: 96%; margin-left: 0; padding: 1rem; border-radius: 0 25% 12% 0 / 0 18% 10% 0; }
  .hero-copy > p.hero-intro { margin-left: 4%; }
  .hero-close { width: 93%; margin-left: 2%; }
  .hero-art { position: relative; top: auto; right: auto; width: min(74vw, 22rem); margin: 4rem 2% 2rem auto; }
  .hero-readout { position: relative; top: auto; left: auto; right: auto; width: max-content; max-width: 100%; margin: 1rem 0; text-align: left; }
  .quick-questions { position: relative; inset: auto; min-height: 27rem; margin-top: 2rem; }
  .quick-label { left: calc(50% - 4.5rem); top: 39%; }
  .quick-question { width: min(36vw, 10.5rem); padding: .8rem; font-size: .78rem; }
  .quick-question:nth-of-type(1) { left: 0; top: 2%; }
  .quick-question:nth-of-type(2) { left: 29%; bottom: 0; }
  .quick-question:nth-of-type(3) { right: 0; top: 2%; }
  .section-heading { width: 96%; margin-left: 2%; margin-bottom: 3rem; }
  .category-stack { gap: 4rem; }
  .category { width: 92% !important; margin-inline: auto !important; transform: none !important; align-self: center !important; }
  .category::before { left: 0 !important; right: 0 !important; }
  .category > summary { min-height: 8rem; padding: 1rem; border-radius: 28% 72% 25% 75% / 58% 33% 67% 42%; }
  .category:nth-child(even) > summary { border-radius: 70% 30% 62% 38% / 38% 62% 35% 65%; }
  .category-code { width: 4.2rem; }
  .category-description { font-size: .85rem; }
  .category-toggle { width: 2.4rem; }
  .question-list { width: 100%; gap: 2rem; margin-top: 2rem; }
  .question-card { width: 94%; }
  .question-answer { width: 97%; padding: 1.1rem; border-radius: 2rem; }
  .gap-sequence { grid-template-columns: 1fr; gap: .8rem; }
  .gap-sequence::before { left: 50%; top: 8%; bottom: 8%; width: 1px; height: auto; }
  .gap-state { width: min(78%, 16rem); aspect-ratio: auto; min-height: 9rem; justify-self: start; }
  .gap-state:nth-child(2) { justify-self: end; transform: none; }
  .gap-state:nth-child(3) { justify-self: start; }
  .about-world { min-height: 0; }
  .text-window { width: 92%; margin-left: 4%; padding: 2rem 1.2rem 4rem; border-radius: 18% 12% 25% 8% / 5% 10% 8% 12%; }
  .text-window h2, .record-panel > h2, .statement-panel h2, .future-island h2, .status-content h2 { font-size: clamp(2.25rem, 11vw, 4rem); }
  .side-note { position: relative; inset: auto; width: 14rem; margin: 4rem 1.25rem 0 auto; }
  .side-note::before { inset: -.6rem; }
  .orbit-scrap { position: relative; inset: auto; width: max-content; max-width: 80%; margin: 4rem 0 0 1%; }
  .example-world { min-height: 0; }
  .example-head { width: 92%; min-height: 19rem; padding: 2rem; }
  .example-head::before { inset: -.5rem; }
  .example-body { display: flex; flex-direction: column; gap: 3.5rem; min-height: 0; padding-bottom: 2rem; }
  .example-body::before { left: 16%; right: 16%; top: 0; bottom: 1%; transform: rotate(4deg); }
  .example-step { position: relative; width: min(86%, 20rem); min-height: 14rem; padding: 1.25rem; transform: none !important; }
  .example-step:nth-child(odd) { align-self: flex-start; }
  .example-step:nth-child(even) { align-self: flex-end; }
  .example-step:nth-child(3) { margin-left: 7%; }
  .example-insight { position: relative; width: 78%; margin: 0 0 0 auto; font-size: .9rem; }
  .record-world { min-height: auto; }
  .record-intro { width: 96%; }
  .schema-grid { min-height: auto; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1.2rem .6rem; margin-top: 3rem; }
  .schema-grid::before { inset: 2%; }
  .schema-item { position: relative !important; grid-column: auto !important; width: min(45%, 10.5rem); transform: none !important; }
  .schema-item:nth-child(2n) { margin-top: 3rem; }
  .process-track { margin-top: 3rem; }
  .island-chain, .future-orbit { min-height: auto; gap: 8rem; }
  .statement-panel, .future-island { position: relative; inset: auto; width: 98%; padding: 3rem 1.35rem; }
  .danger-island { align-self: flex-start; border-radius: 16% 25% 18% 30% / 6% 12% 8% 14%; }
  .people-island { align-self: flex-end; border-radius: 26% 14% 28% 12% / 10% 6% 12% 8%; }
  .future-orbit::before { inset: 2% 12%; }
  .agent-island, .friendly-island { border-radius: 18% 30% 15% 24% / 8% 16% 10% 18%; }
  .construction-zone { min-height: 71rem; }
  .status-content { width: 90%; padding: 3rem 1.35rem; border-radius: 15% 22% 13% 26% / 8% 15% 10% 17%; }
  .status-ring { width: calc(100% - 5rem); }
  .status-ring i:nth-child(1) { top: -1rem; }
  .status-ring i:nth-child(2) { right: -1rem; }
  .status-ring i:nth-child(3) { bottom: -1rem; }
  .status-ring i:nth-child(4) { left: -1rem; }
  .site-footer { width: 90%; min-height: 29rem; padding: 2rem 1.2rem; }
  .site-footer::before { inset: -.5rem; }
  .footer-logo { font-size: clamp(3.1rem, 15vw, 5.4rem); }
}

@media (max-width: 430px) {
  .status-ticker { font-size: .7rem; }
  .masthead { min-height: 24rem; }
  .wordmark { font-size: 3.25rem; }
  .language-console { top: 7rem; width: 9.2rem; }
  .nav-tabs a { width: 4.1rem; }
  .hero { min-height: 0; }
  .hero-art { width: 17.5rem; }
  .quick-question { width: 8.2rem; font-size: .72rem; }
  .category > summary { min-height: 9rem; }
  .category-code { width: 3.7rem; }
  .category-heading { font-size: 1.05rem; }
  .category-toggle { width: 2.1rem; font-size: 1.4rem; }
  .side-note { width: 12.5rem; padding: 1.3rem; }
  .example-step { width: 88%; }
  .schema-item { width: 47%; padding: .9rem; }
  .schema-item p { font-size: .76rem; }
  .construction-zone { min-height: 75rem; }
  .status-ring { width: calc(100% - 4rem); }
  .status-ring i { width: 3.25rem; }
  .status-ring i:nth-child(1) { top: -.6rem; }
  .status-ring i:nth-child(2) { right: -.6rem; }
  .status-ring i:nth-child(3) { bottom: -.6rem; }
  .status-ring i:nth-child(4) { left: -.6rem; }
}

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

/* CURRENT ORBIT LAYOUT CONTRACT */
.world-lines {
  position: fixed;
  z-index: 0;
  height: 100vh;
}

.wordmark {
  gap: clamp(.55rem, 1.5vw, 1rem);
}
.wordmark-orbit {
  position: relative;
  flex: 0 0 auto;
  width: clamp(3.2rem, 7vw, 6.2rem);
  aspect-ratio: 1;
  border: 2px solid var(--cyan);
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .45rem rgba(0, 239, 255, .06);
}
.wordmark-orbit::before,
.wordmark-orbit::after,
.wordmark-orbit i {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.wordmark-orbit::before {
  inset: 18%;
  border: 1px dashed var(--pink);
}
.wordmark-orbit::after {
  top: 15%;
  right: 2%;
  width: .6rem;
  aspect-ratio: 1;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
}
.wordmark-orbit i {
  inset: 42%;
  background: var(--lime);
}

.category-stack {
  padding-block: 2rem;
}
.map-route {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.map-route path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: .5;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  opacity: .5;
  filter: drop-shadow(0 0 4px rgba(0, 239, 255, .55));
}

.pixel-workers {
  position: absolute;
  z-index: 4;
  inset: 10% 6%;
  pointer-events: none;
}
.pixel-workers span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.8rem;
  aspect-ratio: 1;
  border: 2px solid #000;
  border-radius: 50%;
  color: #000;
  background: var(--cyan);
  box-shadow: .35rem .35rem 0 var(--purple);
  font: 1000 1.25rem/1 var(--mono);
}
.pixel-workers span:nth-child(1) { left: 8%; top: 14%; transform: rotate(-12deg); }
.pixel-workers span:nth-child(2) { right: 6%; top: 20%; background: var(--pink); transform: rotate(9deg); }
.pixel-workers span:nth-child(3) { left: 11%; bottom: 14%; background: var(--lime); transform: rotate(7deg); }
.pixel-workers span:nth-child(4) { right: 10%; bottom: 8%; background: var(--yellow); transform: rotate(-9deg); }

@media (max-width: 760px) {
  .wordmark {
    max-width: 100%;
    gap: .45rem;
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }
  .wordmark-orbit { width: 3.2rem; }
  .map-route { left: 5%; width: 90%; }
  .pixel-workers { inset: 5% 1%; }
  .pixel-workers span { width: 3.2rem; }
}

@media (max-width: 350px) {
  .site-shell { padding-inline: .75rem; }
  .wordmark { font-size: 2.25rem; }
  .wordmark-orbit { width: 2.7rem; }
  .nav-tabs a { width: 3.75rem; padding: .4rem; font-size: .47rem; }
  .nav-tabs a:nth-child(2) { left: 16%; }
  .nav-tabs a:nth-child(4) { right: 16%; }
  .hero h1 { font-size: 3rem; }
  .quick-question { width: 7.4rem; padding: .65rem; font-size: .68rem; }
  .category > summary {
    grid-template-columns: 3.25rem minmax(0, 1fr) 2rem;
    gap: .5rem;
    padding: .8rem;
  }
  .category-code { width: 3.25rem; }
  .category-toggle { width: 2rem; }
}

/* MAXIMAL EARLY-WEB MATERIAL LAYER */
:root {
  --body-font: Verdana, Geneva, Tahoma, "PingFang TC", "Noto Sans TC", sans-serif;
  --display-font: "Arial Black", Impact, Haettenschweiler, "PingFang TC", sans-serif;
}

.collage-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,7,.2), rgba(5,5,7,.78) 45%, rgba(5,5,7,.28)),
    url("assets/y2k-collage-texture.webp") center / cover no-repeat;
  opacity: .2;
  filter: saturate(1.35) contrast(1.14);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 93%);
  mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 93%);
}

body {
  background:
    repeating-radial-gradient(circle at 18% 22%, rgba(255,255,255,.055) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(0,239,255,.025) 31px 32px),
    radial-gradient(circle at 8% 11%, rgba(139,77,255,.2), transparent 20rem),
    radial-gradient(circle at 93% 26%, rgba(0,239,255,.11), transparent 26rem),
    radial-gradient(circle at 20% 78%, rgba(255,45,204,.11), transparent 25rem),
    var(--black);
}

.status-ticker {
  color: #0c0030;
  background:
    linear-gradient(180deg, #fff9a7 0, #fff000 24%, #ff9d00 50%, #fff77a 54%, #c8ff00 100%);
  border: 3px ridge #fff7a0;
  box-shadow: 0 3px 0 #000, 0 7px 0 var(--pink), inset 0 0 8px #fff;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8);
}

.glitter-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.glitter-field i {
  position: absolute;
  width: clamp(.8rem, 1.7vw, 1.45rem);
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 11px currentColor);
  animation: oldweb-twinkle 1.15s steps(2,end) infinite alternate;
}
.glitter-field i:nth-child(1) { top: 2%; left: 34%; color: var(--cyan); }
.glitter-field i:nth-child(2) { top: 9%; right: 3%; color: var(--yellow); animation-delay: -.45s; }
.glitter-field i:nth-child(3) { top: 17%; left: 1%; color: var(--pink); animation-delay: -.8s; }
.glitter-field i:nth-child(4) { top: 25%; right: 16%; color: var(--lime); animation-delay: -.2s; }
.glitter-field i:nth-child(5) { top: 34%; left: 46%; color: var(--purple); animation-delay: -.65s; }
.glitter-field i:nth-child(6) { top: 43%; right: 2%; color: var(--cyan); animation-delay: -.1s; }
.glitter-field i:nth-child(7) { top: 52%; left: 9%; color: var(--yellow); animation-delay: -.9s; }
.glitter-field i:nth-child(8) { top: 61%; right: 27%; color: var(--pink); animation-delay: -.35s; }
.glitter-field i:nth-child(9) { top: 70%; left: 2%; color: var(--lime); animation-delay: -.75s; }
.glitter-field i:nth-child(10) { top: 79%; right: 4%; color: var(--purple); animation-delay: -.15s; }
.glitter-field i:nth-child(11) { top: 88%; left: 39%; color: var(--cyan); animation-delay: -.55s; }
.glitter-field i:nth-child(12) { top: 97%; right: 20%; color: var(--yellow); animation-delay: -.95s; }

.wordmark {
  align-items: center;
  font-family: var(--display-font);
}
.wordmark > span:last-child {
  color: transparent;
  background: linear-gradient(180deg, #fff 0, #baf9ff 15%, #36a7ff 34%, #081453 49%, #fff 52%, #ff83e3 69%, #8b4dff 84%, #fff 100%);
  background-size: 100% 210%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(.06em .06em 0 var(--pink)) drop-shadow(-.035em -.035em 0 var(--cyan));
  animation: chrome-shimmer 2.2s steps(8,end) infinite alternate;
}
.wordmark-orbit {
  background:
    radial-gradient(circle at 38% 28%, #fff 0 5%, #6ef7ff 7%, #1434a4 31%, #060814 57%, #ff2dcc 78%, #fff 83%, #1b1350 100%);
  border: 4px ridge #baf9ff;
  box-shadow: inset 0 0 0 .45rem rgba(0,0,0,.42), 0 0 7px #fff, 0 0 20px var(--cyan), .45rem .35rem 0 rgba(255,45,204,.52);
}

.language-console {
  z-index: 30;
  pointer-events: auto;
  isolation: isolate;
  border: 4px ridge #d8fdff;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 13%),
    radial-gradient(circle, #292b58 0 13%, #070812 58%, #00265f 100%);
  box-shadow: inset 0 0 0 8px rgba(0,0,0,.72), inset 0 0 19px #00efff, 0 0 7px #fff, 0 0 30px rgba(0,239,255,.55);
}
.language-console::before,
.language-console::after { pointer-events: none; }
.language-switch { position: relative; z-index: 3; pointer-events: auto; }
.lang-button {
  position: relative;
  z-index: 4;
  overflow: hidden;
  pointer-events: auto;
  touch-action: manipulation;
  border: 3px outset #a8b7d8;
  color: #fff;
  background: linear-gradient(180deg, #7f89a4 0, #24283b 42%, #05070c 48%, #313750 78%, #080a10 100%);
  box-shadow: inset 0 .35rem .45rem rgba(255,255,255,.32), inset 0 -.35rem .5rem #000, 0 2px 0 #000;
  text-shadow: 1px 1px 0 #000;
}
.lang-button::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 8%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  pointer-events: none;
}
.lang-button.is-active {
  color: #18002b;
  border-color: #fff;
  background: linear-gradient(180deg, #fff 0, #f6ff8b 16%, #c8ff00 42%, #61b700 54%, #f8ff9d 66%, #b6ed00 100%);
  box-shadow: inset 0 .35rem .4rem rgba(255,255,255,.9), inset 0 -.4rem .55rem #4f8100, 0 0 7px #fff, 0 0 19px var(--lime);
}

.nav-tabs a {
  border: 4px ridge #a9f8ff;
  color: #fff;
  background:
    radial-gradient(ellipse at 34% 20%, rgba(255,255,255,.9) 0 5%, transparent 7%),
    radial-gradient(circle at 44% 35%, #315dba 0, #141638 35%, #05050c 62%, #3b0d64 100%);
  box-shadow: inset 0 0 0 .42rem rgba(0,0,0,.45), inset 0 .6rem .8rem rgba(255,255,255,.2), .32rem .38rem 0 #000, 0 0 12px currentColor;
  text-shadow: 1px 1px 0 #000, 0 0 4px currentColor;
}
.nav-tabs a:nth-child(2n) { border-color: #ffb4ec; }
.nav-tabs a:nth-child(3n) { border-color: #f8ff9c; }

.retro-sticker {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #000;
  font: 1000 .7rem/1 var(--mono);
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
}
.sticker-new {
  top: 3%;
  left: 41%;
  width: 5.4rem;
  aspect-ratio: 1;
  border: 3px outset #fff;
  border-radius: 50% 45% 53% 42%;
  background: radial-gradient(circle at 32% 24%, #fff 0 7%, #fff000 9%, #ff6300 48%, #ff2dcc 72%, #5b003e 100%);
  transform: rotate(11deg);
  animation: oldweb-blink .9s steps(2,end) infinite;
}
.sticker-new b { font: 1000 1.15rem/.9 var(--display-font); }
.sticker-new small { font-size: .47rem; }
.sticker-www {
  top: 7%;
  right: 1%;
  padding: .5rem .75rem;
  border: 3px outset #c8ff00;
  border-radius: 999px;
  color: #fff;
  background: repeating-linear-gradient(135deg, #ff2dcc 0 8px, #5420aa 8px 16px, #00a9ff 16px 24px);
  box-shadow: .35rem .35rem 0 #000, 0 0 14px var(--pink);
  transform: rotate(-7deg);
}

.hero h1,
.section-heading h2,
.text-window h2,
.record-panel > h2,
.statement-panel h2,
.future-island h2,
.status-content h2 {
  font-family: var(--display-font);
  text-shadow: 3px 3px 0 #050507, 5px 5px 0 rgba(139,77,255,.72), -2px -2px 0 rgba(0,239,255,.48);
}
.hero h1 { filter: drop-shadow(0 0 8px rgba(255,255,255,.23)); }
.eyebrow {
  border: 3px outset #bdfaff;
  background: linear-gradient(180deg, #fff 0, #00efff 20%, #008bb7 48%, #9dffff 52%, #04bfd0 100%);
  box-shadow: .45rem .45rem 0 var(--purple), 0 0 12px rgba(0,239,255,.72);
  text-shadow: 1px 1px 0 rgba(255,255,255,.75);
}

.art-screen {
  border: 7px ridge #dbfbff;
  box-shadow: 1rem 1rem 0 var(--purple), -1rem -.7rem 0 var(--pink), 0 0 0 .35rem #0a1030, 0 0 0 1.15rem rgba(0,239,255,.17), 0 0 35px rgba(255,255,255,.25);
}
.art-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.32) 33%, transparent 37% 100%);
  animation: glass-scan 3.4s steps(7,end) infinite;
}

.chrome-chain {
  position: absolute;
  z-index: 6;
  top: clamp(35rem, 49vw, 43rem);
  left: 2%;
  display: flex;
  align-items: center;
  gap: 0;
  transform: rotate(-12deg);
}
.chrome-chain i {
  display: block;
  width: clamp(1.5rem, 3vw, 2.5rem);
  aspect-ratio: 1;
  margin-left: -.25rem;
  border: 3px ridge #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 25%, #fff 0 5%, #7ef2ff 12%, #203f9e 31%, #050510 48%, #ff63d8 66%, #fff 74%, #24244d 100%);
  box-shadow: .2rem .2rem 0 #000, 0 0 8px var(--cyan);
}
.chrome-chain i:nth-child(2n) { translate: 0 .65rem; filter: hue-rotate(78deg); }
.chrome-chain i:nth-child(3n) { filter: hue-rotate(210deg); }

.mini-player {
  position: absolute;
  z-index: 7;
  top: clamp(48rem, 67vw, 60rem);
  right: 8%;
  display: grid;
  grid-template-columns: repeat(5, 2.2rem);
  gap: .18rem;
  padding: .45rem;
  border: 4px ridge #dce4f5;
  background: linear-gradient(180deg, #e6e9ef, #72798a 47%, #242833 51%, #aeb4c1);
  box-shadow: .55rem .55rem 0 #000, 0 0 16px rgba(255,255,255,.36);
  color: #03040a;
  font: 900 .62rem/1 var(--mono);
  transform: rotate(4deg);
}
.mini-player span {
  display: grid;
  place-items: center;
  min-height: 1.7rem;
  border: 2px outset #eef3ff;
  background: linear-gradient(#fff, #7c8290);
}
.mini-player .player-screen {
  grid-column: 1 / -1;
  justify-content: end;
  padding-right: .5rem;
  color: var(--lime);
  background: #061009;
  border-color: #222;
  text-shadow: 0 0 4px var(--lime);
  animation: oldweb-blink 1.1s steps(2,end) infinite;
}

.texture-scrap {
  position: absolute;
  z-index: -1;
  width: clamp(15rem, 38vw, 36rem);
  aspect-ratio: 1.25;
  pointer-events: none;
  background: url("assets/y2k-collage-texture.webp") center / cover no-repeat;
  opacity: .32;
  filter: saturate(1.6) contrast(1.28);
  mix-blend-mode: screen;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 28px rgba(0,239,255,.18);
}
.texture-scrap-a { top: 17%; right: 1%; background-position: 88% 32%; clip-path: polygon(9% 3%, 94% 12%, 100% 77%, 72% 97%, 16% 88%, 0 38%); transform: rotate(7deg); }
.texture-scrap-b { top: 7%; left: 1%; background-position: 5% 72%; clip-path: polygon(2% 22%, 69% 0, 100% 29%, 89% 91%, 19% 100%, 8% 61%); transform: rotate(-8deg); }
.texture-scrap-c { top: 22%; right: 4%; background-position: 54% 90%; clip-path: polygon(0 11%, 81% 0, 100% 46%, 79% 100%, 14% 87%); transform: rotate(11deg); }
.things-world,
.about-world,
.future-orbit { isolation: isolate; }

.category > summary,
.question-card > summary,
.question-answer,
.schema-item,
.statement-panel,
.future-island,
.status-content {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.08), transparent 28%);
}
.category > summary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: url("assets/y2k-collage-texture.webp") center / 48rem auto;
  opacity: .08;
  mix-blend-mode: screen;
}
.category > summary > * { position: relative; z-index: 1; }
.category-code,
.schema-item:nth-child(3n+1) {
  background: radial-gradient(circle at 31% 22%, #fff 0 5%, #7fffff 9%, #00dbe9 39%, #00627a 55%, #00efff 73%, #002f4a 100%);
  border: 4px ridge #c7ffff;
  box-shadow: inset 0 .45rem .6rem rgba(255,255,255,.45), inset 0 -.45rem .7rem rgba(0,0,0,.65), .35rem .35rem 0 var(--purple), 0 0 12px var(--cyan);
}
.category:nth-child(3n+2) .category-code {
  background: radial-gradient(circle at 31% 22%, #fff 0 5%, #f3ff83 10%, #c8ff00 39%, #4f8500 58%, #c8ff00 76%, #183000 100%);
  border-color: #f4ffb8;
}
.category:nth-child(3n) .category-code {
  background: radial-gradient(circle at 31% 22%, #fff 0 5%, #fff890 10%, #fff000 39%, #b55b00 58%, #fff000 76%, #4a2100 100%);
  border-color: #fffbc5;
}

.section-marker span,
.pixel-workers span,
.status-ring i,
.back-to-top {
  border: 4px outset #fff;
  background: radial-gradient(circle at 30% 20%, #fff 0 7%, #fff17c 9%, #fff000 36%, #f06300 56%, #ff2dcc 77%, #5c002e 100%);
  box-shadow: inset 0 -.45rem .55rem rgba(0,0,0,.55), .35rem .35rem 0 #000, 0 0 12px currentColor;
}

.concept-tags span {
  border: 2px outset #bcbfd0;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, #27293a 0 5px, #11121a 5px 10px);
  box-shadow: 2px 2px 0 #000;
}
.concept-tags span:nth-child(3n+1) { color: var(--cyan); transform: rotate(-2deg); }
.concept-tags span:nth-child(3n+2) { color: var(--lime); transform: translateY(.18rem); }
.concept-tags span:nth-child(3n) { color: var(--pink); transform: rotate(2deg); }
.mini-flow span,
.process-track span,
.timeline span {
  border: 2px outset #dffcff;
  border-radius: 2px;
  background: linear-gradient(180deg, #eaffff 0, #00efff 28%, #008399 56%, #76f8ff 100%);
  box-shadow: 2px 2px 0 #000;
}
.footer-logo {
  color: transparent;
  background: linear-gradient(180deg, #fff 0, #88eeff 16%, #1c58c2 38%, #05062d 49%, #fff 52%, #ff70d6 69%, #792dd8 84%, #fff 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(.06em .06em 0 var(--pink)) drop-shadow(-.03em -.03em 0 var(--cyan));
  animation: chrome-shimmer 2s steps(7,end) infinite alternate;
}
.footer-meta span {
  width: 7.6rem;
  min-height: 2.35rem;
  display: grid;
  place-items: center;
  padding: .3rem .45rem;
  border: 3px outset #dffcff;
  border-radius: 2px;
  color: #fff;
  background: repeating-linear-gradient(135deg, #2143c4 0 6px, #071046 6px 12px);
  box-shadow: 3px 3px 0 #000, 0 0 8px rgba(0,239,255,.48);
  font-size: .62rem;
  text-shadow: 1px 1px 0 #000;
}
.footer-meta span:nth-child(2) { border-color: #ffe3f7; background: repeating-linear-gradient(135deg, #ff2dcc 0 6px, #5d0752 6px 12px); }
.footer-meta span:nth-child(3) { border-color: #f6ffc9; background: repeating-linear-gradient(135deg, #5a8200 0 6px, #172800 6px 12px); }

@keyframes oldweb-twinkle {
  0%, 38% { scale: .45; opacity: .25; rotate: 0deg; }
  39%, 100% { scale: 1.45; opacity: 1; rotate: 45deg; }
}
@keyframes oldweb-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .35; } }
@keyframes chrome-shimmer { to { background-position: 0 100%; } }
@keyframes glass-scan { from { translate: -85% 0; } to { translate: 115% 0; } }

@media (max-width: 760px) {
  .collage-texture { opacity: .13; background-position: 58% center; }
  .glitter-field i { width: .78rem; }
  .retro-sticker { scale: .82; }
  .sticker-new { top: 4.5rem; left: .2rem; }
  .sticker-www { top: 2.4rem; right: .2rem; }
  .chrome-chain { position: relative; inset: auto; width: max-content; max-width: 72%; margin: -1rem 0 2.5rem 1rem; transform: rotate(-7deg); }
  .mini-player { position: relative; inset: auto; width: 14.2rem; margin: 1.5rem 1rem 3rem auto; transform: rotate(3deg); }
  .texture-scrap { width: min(69vw, 19rem); opacity: .24; }
  .texture-scrap-a { top: 13%; right: 2%; }
  .texture-scrap-b { top: 2%; left: 2%; }
  .texture-scrap-c { top: 8%; right: 3%; }
}

@media (max-width: 430px) {
  .wordmark > span:last-child { animation-duration: 1.7s; }
  .sticker-new { top: 4.2rem; left: -.1rem; }
  .sticker-www { top: 2.7rem; right: 0; }
  .mini-player { width: 13rem; grid-template-columns: repeat(5, 1fr); }
  .chrome-chain i { width: 1.55rem; }
}

/* FULL-BLEED COLLAGE DENSITY PASS */
.collage-texture {
  opacity: 1;
  background: none;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.collage-texture::before,
.collage-texture::after {
  content: "";
  position: absolute;
  inset: 0;
}

.collage-texture::before {
  background:
    linear-gradient(90deg, rgba(2,2,5,.12), rgba(2,2,5,.3) 38%, rgba(2,2,5,.08)),
    url("assets/y2k-collage-texture.webp") center / cover no-repeat;
  opacity: .66;
  filter: saturate(1.5) contrast(1.2) brightness(.92);
}

.collage-texture::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.055) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(0,239,255,.045) 47px 48px),
    radial-gradient(circle at 18% 27%, transparent 0 2rem, rgba(255,45,204,.18) 2.05rem 2.13rem, transparent 2.18rem),
    radial-gradient(circle at 82% 63%, transparent 0 4rem, rgba(200,255,0,.15) 4.05rem 4.12rem, transparent 4.18rem);
  opacity: .8;
  mix-blend-mode: screen;
}

.pixel-ambience { opacity: .9; }

.masthead,
.hero,
.section-block,
.site-footer {
  isolation: isolate;
}

.masthead::before,
.hero::before,
.things-world::after,
.about-world::after,
.example-world::before,
.record-world::before,
.island-chain::before,
.future-orbit::after,
.construction-zone::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  background-image: url("assets/y2k-collage-texture.webp");
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(1.65) contrast(1.28);
  mix-blend-mode: screen;
}

.masthead::before {
  inset: -2rem -8vw -3rem 24%;
  opacity: .58;
  background-position: 58% 7%;
  clip-path: polygon(8% 0, 100% 5%, 94% 70%, 77% 100%, 18% 87%, 0 39%);
  transform: rotate(2deg);
}

.hero::before {
  inset: -8rem -7vw 9% -9vw;
  opacity: .76;
  background-position: 42% 37%;
  clip-path: polygon(0 7%, 46% 0, 100% 13%, 94% 43%, 100% 79%, 64% 96%, 30% 88%, 0 100%, 5% 52%);
  transform: rotate(-1.5deg);
}

.things-world::after {
  inset: -4rem -8vw 2% 17%;
  opacity: .72;
  background-position: 82% 30%;
  clip-path: polygon(8% 0, 100% 6%, 94% 37%, 100% 59%, 85% 100%, 37% 91%, 0 70%, 11% 33%);
  transform: rotate(2.5deg);
}

.about-world::after {
  inset: -8% 19% -2% -8vw;
  opacity: .7;
  background-position: 4% 67%;
  clip-path: polygon(0 8%, 72% 0, 100% 28%, 87% 63%, 100% 91%, 51% 100%, 3% 82%);
  transform: rotate(-2deg);
}

.example-world::before {
  inset: -18% -7vw -12% 22%;
  opacity: .76;
  background-position: 94% 49%;
  clip-path: polygon(4% 2%, 79% 0, 100% 18%, 89% 48%, 100% 83%, 65% 100%, 7% 90%, 0 38%);
  transform: rotate(3deg);
}

.record-world::before {
  inset: -15% 12% -7% -8vw;
  opacity: .72;
  background-position: 15% 88%;
  clip-path: polygon(0 17%, 34% 0, 91% 8%, 100% 49%, 85% 100%, 25% 91%, 4% 70%);
  transform: rotate(-3deg);
}

.island-chain::before {
  inset: -8% -7vw -6% 17%;
  opacity: .76;
  background-position: 86% 80%;
  clip-path: polygon(10% 0, 100% 12%, 92% 41%, 100% 73%, 74% 100%, 12% 90%, 0 52%);
  transform: rotate(2deg);
}

.future-orbit::after {
  inset: -8% 16% -8% -8vw;
  opacity: .72;
  background-position: 8% 22%;
  clip-path: polygon(0 3%, 81% 0, 100% 30%, 88% 69%, 100% 96%, 38% 100%, 4% 82%);
  transform: rotate(-2deg);
}

.construction-zone::before {
  inset: -7% -9vw 1%;
  opacity: .82;
  background-position: 50% 53%;
  clip-path: polygon(3% 3%, 48% 0, 100% 10%, 96% 44%, 100% 92%, 59% 100%, 4% 91%, 0 47%);
  transform: rotate(1deg);
}

.hero-copy::before,
.section-heading::before,
.record-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 43% 44%, rgba(3,3,7,.98) 0 28%, rgba(3,3,7,.88) 48%, rgba(3,3,7,.5) 65%, transparent 78%);
}

.hero-copy::before { inset: -5rem -8rem -6rem -6rem; transform: rotate(-4deg); }
.section-heading::before { inset: -4rem -7rem -3rem -4rem; transform: rotate(3deg); }
.record-panel { position: relative; z-index: 1; }
.record-panel::before { inset: -5rem 28% 15% -6rem; transform: rotate(-3deg); }

.section-block { margin-top: clamp(5.5rem, 10vw, 9rem); }
.category-stack { gap: clamp(3rem, 6vw, 5.5rem); }
.island-chain,
.future-orbit { gap: clamp(5rem, 10vw, 9rem); }

.texture-scrap {
  width: clamp(32rem, 72vw, 76rem);
  aspect-ratio: 1.5;
  opacity: .78;
  filter: saturate(1.75) contrast(1.32) brightness(.96);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 38px rgba(0,239,255,.3);
}

.texture-scrap-a { top: 9%; right: -16%; }
.texture-scrap-b { top: -1%; left: -14%; }
.texture-scrap-c { top: 6%; right: -13%; }

.category > summary { background-color: rgba(7,7,12,.9); }
.category > summary::after { opacity: .18; }
.question-card > summary { background-color: rgba(8,9,14,.92); }
.question-answer { background-color: rgba(3,3,7,.91); }
.text-window,
.statement-panel,
.future-island,
.status-content { background-color: rgba(5,5,10,.91); }

.site-footer {
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(5,5,10,.94) 0 25%, rgba(5,5,10,.72) 50%, rgba(5,5,10,.18) 75%),
    url("assets/y2k-collage-texture.webp") 52% 53% / cover no-repeat;
  box-shadow: 0 0 0 .55rem rgba(0,0,0,.48), 0 0 3rem rgba(0,239,255,.22);
}

@media (max-width: 760px) {
  .collage-texture { opacity: 1; background: none; }
  .collage-texture::before {
    background-image: url("assets/y2k-collage-texture.webp");
    background-size: auto max(56vh, 32rem);
    background-position: 53% top;
    background-repeat: repeat;
    opacity: .7;
    filter: saturate(1.55) contrast(1.22) brightness(.9);
  }
  .collage-texture::after { opacity: .95; }

  .masthead::before { inset: -1rem -16vw -2rem 4%; opacity: .72; }
  .hero::before { inset: -4rem -18vw 4% -18vw; opacity: .82; background-position: 47% 38%; }
  .things-world::after { inset: -2rem -22vw 0 2%; opacity: .78; }
  .about-world::after { inset: -5% 2% -2% -22vw; opacity: .76; }
  .example-world::before { inset: -12% -25vw -10% 0; opacity: .82; }
  .record-world::before { inset: -9% 0 -5% -24vw; opacity: .78; }
  .island-chain::before { inset: -5% -24vw -4% 0; opacity: .82; }
  .future-orbit::after { inset: -6% 0 -7% -24vw; opacity: .8; }
  .construction-zone::before { inset: -4% -24vw 0; opacity: .86; }

  .hero-copy::before { inset: -3rem -4rem -4rem -3rem; }
  .section-heading::before { inset: -3rem -3rem -2rem -2rem; }
  .record-panel::before { inset: -3rem 8% 8% -3rem; }

  .section-block { margin-top: 5.5rem; }
  .category-stack { gap: 3.4rem; }
  .island-chain,
  .future-orbit { gap: 5.5rem; }

  .texture-scrap {
    width: 112vw;
    max-width: none;
    opacity: .82;
  }
  .texture-scrap-a { top: 7%; right: -43vw; }
  .texture-scrap-b { top: -1%; left: -42vw; }
  .texture-scrap-c { top: 3%; right: -44vw; }

  .category > summary::after { opacity: .22; }
  .site-footer {
    background-position: 50% 50%;
    background-size: auto 100%;
  }
}

/* MOBILE LEGIBILITY AND TOP-ORBIT CORRECTIONS */
html {
  min-width: 100%;
  touch-action: pan-x pan-y pinch-zoom;
}

.masthead { z-index: 20; }
.hero { z-index: 1; }
.nav-tabs { z-index: 25; }

/* Keep the shared page collage, but remove only the masthead's extra local crop. */
.masthead::before { display: none; }

.nav-tabs a {
  z-index: 2;
  color: var(--yellow);
  font-size: clamp(.8rem, 1.05vw, .96rem);
  line-height: 1.25;
  letter-spacing: .025em;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 8px currentColor;
}

.nav-tabs a:hover { color: #fff; }

.nav-tabs a:nth-child(1) { color: var(--yellow); }
.nav-tabs a:nth-child(2) { color: var(--cyan); }
.nav-tabs a:nth-child(3) { bottom: 0; color: var(--yellow); }
.nav-tabs a:nth-child(4) { color: var(--lime); }
.nav-tabs a:nth-child(5) { color: var(--cyan); }

.quick-label {
  isolation: isolate;
  width: 11rem;
  color: var(--yellow);
  font-size: clamp(.84rem, 1.2vw, 1rem);
  line-height: 1.5;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 8px rgba(255,240,0,.8);
}

.quick-label::before {
  z-index: -1;
  border-color: var(--yellow);
  background: rgba(0,0,0,.62);
}

.schema-item h3 {
  font-size: clamp(.96rem, 1.35vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: .015em;
}

.schema-item p {
  font-size: clamp(.88rem, 1.15vw, .98rem);
  line-height: 1.48;
  font-weight: 700;
}

.schema-item:nth-child(3n+1) h3,
.schema-item:nth-child(3n+1) p {
  color: #04101a;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.schema-item:nth-child(3n+2) h3,
.schema-item:nth-child(3n) h3,
.example-step:nth-child(4) h3,
.example-step:nth-child(5) h3 {
  color: var(--yellow);
  text-shadow: 0 0 7px rgba(255,240,0,.38);
}

@media (max-width: 760px) {
  .masthead { min-height: 25.5rem; }
  .nav-tabs a {
    font-size: .78rem;
  }
  html[data-lang="en"] .nav-tabs a { font-size: .62rem; }
  .nav-tabs a:nth-child(1) { top: 51%; }
  .nav-tabs a:nth-child(2) { bottom: 4%; }
  .nav-tabs a:nth-child(3) {
    left: calc(50% - 2.2rem);
    bottom: 0;
    z-index: 4;
  }
  .nav-tabs a:nth-child(4) { bottom: 4%; }
  .nav-tabs a:nth-child(5) { top: 51%; }

  .quick-label {
    left: calc(50% - 5.5rem);
    font-size: .94rem;
  }

  .schema-item { padding: 1rem .82rem; }
  .schema-item h3 { font-size: .98rem; }
  .schema-item p { font-size: .86rem; }
}

@media (max-width: 430px) {
  .masthead { min-height: 24.8rem; }
  .nav-tabs a { font-size: .74rem; }
  html[data-lang="en"] .nav-tabs a { font-size: .58rem; }
  .nav-tabs a:nth-child(3) { left: calc(50% - 2.05rem); }
  .schema-item h3 { font-size: .94rem; }
  .schema-item p { font-size: .84rem; }
}

/* USER MOBILE POSITION + ENGLISH DISPLAY-TYPE OVERRIDES */
@media (max-width: 760px) {
  /* 施工狀態 */
  .nav-tabs a:nth-child(5) {
    right: -0.7rem;
    top: 57%;
  }

  /* 落差地圖 */
  .nav-tabs a:nth-child(2) {
    left: 13%;
    bottom: 9%;
  }

  /* 中文標題中的 newbie.cool：只放鬆英文，不改「我們是」 */
  .hero-title-brand {
    letter-spacing: -.02em;
  }

  /* 全英文版的大標題：避免原本負字距把英文字母壓得太緊 */
  html[data-lang="en"] .hero h1 {
    letter-spacing: -.02em;
  }

  html[data-lang="en"] .section-heading h2,
  html[data-lang="en"] .text-window h2,
  html[data-lang="en"] .record-panel > h2,
  html[data-lang="en"] .statement-panel h2,
  html[data-lang="en"] .future-island h2,
  html[data-lang="en"] .status-content h2 {
    letter-spacing: -.025em;
  }

  /* 這兩個本身永遠是英文品牌字樣，也稍微放鬆 */
  .wordmark {
    letter-spacing: -.06em;
  }

  .footer-logo {
    letter-spacing: -.05em;
  }
}