:root {
  font-family: Manrope, Arial, sans-serif;
  font-synthesis: none;
  color: #e7edf2;
  background: #10151c;
  --ink: #e7edf2;
  --soft: #aebbc9;
  --accent: #a2c7e5;
  --line: rgba(198,218,237,.24);
  --gutter: 4.3%;
  --display: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
button, a { transition: color .2s, background .2s, border-color .2s, opacity .2s, transform .2s; }
button:active { transform: scale(.97); }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip { position: fixed; top: -80px; left: 20px; padding: 14px; background: var(--ink); color: #10151c; z-index: 8; }
.skip:focus { top: 15px; }
#world, #fallback-art { position: fixed; inset: 0; }
#world { z-index: 0; opacity: 0; transition: opacity .7s; }
#world canvas { width: 100%; height: 100%; display: block; }
.loaded #world { opacity: 1; }
#fallback-art { z-index: 0; pointer-events: none; }
#fallback-art img { width: 100%; height: 100%; object-fit: cover; }
.loaded #fallback-art { opacity: 0; }
.fallback #fallback-art, .reduced #fallback-art { opacity: 1; }
.fallback #world, .reduced #world { display: none; }
.scene-shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,rgba(8,13,20,.72),rgba(8,13,20,.12) 49%,transparent 75%); }
header { position: fixed; z-index: 4; inset: 0 0 auto; padding: 30px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-title { font-size: 16px; font-weight: 700; line-height: 1.17; letter-spacing: -.025em; }
.home-title:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.concept-link { color: var(--soft); }
.concept-link:hover { color: var(--ink); }
.concept-link span { margin-left: 12px; }
#motion, #quality, #pulse { min-height: 44px; border: 1px solid var(--line); border-radius: 30px; background: rgba(174,199,222,.055); }
#motion, #quality { padding: 10px 16px; font-size: 12px; }
#motion { display: flex; align-items: center; gap: 15px; }
#motion-icon { font-size: 16px; }
#quality { color: var(--soft); }
#motion:hover, #quality:hover { background: rgba(174,199,222,.12); border-color: var(--accent); color: var(--ink); }
#scroll-story { position: relative; height: 1600svh; pointer-events: none; z-index: 0; }
.scroll-marker { position: absolute; left: 0; height: 1px; width: 1px; }
#machine { top: 0; } #city { top: 420svh; } #context { top: 652.5svh; } #intelligence { top: 892.5svh; } #simulation { top: 1147.5svh; } #network { top: 1387.5svh; }
.story-ui { position: fixed; z-index: 2; inset: 0; pointer-events: none; }
.chapter-copy { position: absolute; left: var(--gutter); top: 28%; width: 50%; opacity: 0; visibility: hidden; transform: translateY(16px); transition: none; }
.chapter-copy.active { opacity: 1; visibility: visible; transform: translateY(0); }
.eyebrow { font-size: 10px !important; letter-spacing: .13em; line-height: 1.4 !important; margin: 0 0 28px !important; font-weight: 600; color: var(--soft); }
h1, h2 { font-family: var(--display); font-size: clamp(58px,6.2vw,100px); line-height: 1.06; letter-spacing: -.055em; font-weight: 400; margin: 0; text-wrap: balance; }
em { font-style: normal; color: inherit; }
.chapter-copy p { font-size: 14px; line-height: 1.75; color: var(--soft); margin: 25px 0; }
#explore { pointer-events: auto; display: flex; align-items: center; gap: 18px; font-size: 12px; padding: 0; margin-top: 28px; }
#explore span { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; font-size: 19px; }
#explore:hover { color: var(--accent); }
#explore:hover span { background: rgba(174,199,222,.12); border-color: var(--accent); }
#machine-caption { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; }
.replay { opacity: 0; visibility: hidden; margin-top: 16px; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.replay span { margin-left: 25px; }
.at-end .replay { opacity: 1; visibility: visible; pointer-events: auto; }
#network-copy { position: relative; }
#outro-copy { position: absolute; inset: 0; opacity: 0; }
.human-note { display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(100%, 420px); margin: 28px 0 26px; padding: 13px 18px 13px 12px; border: 1px solid rgba(198,218,237,.3); background: rgba(15,24,35,.72); }
.human-note > div { display: grid; gap: 5px; }
.note-label { font-size: 9px; letter-spacing: .08em; color: var(--accent); }
.human-note strong { font-size: 13px; font-weight: 500; line-height: 1.35; }
.person-mark { position: relative; flex: none; width: 43px; height: 43px; border: 1px solid var(--accent); border-radius: 50%; }
.person-mark::before { content: ""; position: absolute; width: 10px; height: 10px; left: 15px; top: 8px; border: 1.5px solid var(--ink); border-radius: 50%; }
.person-mark::after { content: ""; position: absolute; width: 23px; height: 12px; left: 9px; bottom: 6px; border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 14px 14px 0 0; }
.specialists { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 7px 18px; margin-top: 19px; }
.specialists span { display: flex; align-items: baseline; gap: 8px; font-size: 11px; white-space: nowrap; position: relative; padding-bottom: 7px; }
.specialists span::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--role); opacity: .7; transform: scaleX(var(--complete,0)); transform-origin: left; }
body[data-task="research"] .specialists span:nth-child(1) b,
body[data-task="structure"] .specialists span:nth-child(2) b,
body[data-task="surface"] .specialists span:nth-child(3) b,
body[data-task="verify"] .specialists span:nth-child(4) b,
body[data-task="complete"] .specialists b { color: var(--role); }
.specialists span::before { content: ""; width: 6px; height: 6px; flex: none; align-self: center; border-radius: 50%; background: var(--role); box-shadow: 0 0 12px var(--role); }
.specialists b { font-weight: 600; color: var(--ink); }
.specialists small { font-size: 10px; color: var(--soft); }
.layer-intro { max-width: 38ch; }
.archive-kinds { display: flex; flex-wrap: wrap; gap: 15px; font-size: 11px; color: var(--accent); margin-top: 25px; }
.archive-kinds span { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.archive-kinds span.selected { color: var(--ink); border-color: var(--accent); }
.simulation-cases { display: grid; gap: 12px; margin-top: 24px; }
.simulation-cases > span { display: flex; align-items: baseline; gap: 12px; font-size: 11px; }
.simulation-cases b { min-width: 75px; color: var(--role); font-weight: 500; }
.simulation-cases small { color: var(--soft); font-size: 10px; }
.simulation-cases > span[data-failed="true"] { opacity: .45; }
.simulation-cases > span[data-active="true"] b { text-decoration: underline; text-underline-offset: 5px; }
.chapter-copy .layer-status { font-size: 11px; max-width: 43ch; margin-top: 20px; min-height: 18px; }
.fallback .layer-status, .reduced .layer-status { display: none; }
#interaction { position: fixed; z-index: 3; right: var(--gutter); bottom: 144px; display: flex; align-items: center; gap: 22px; }
.interaction-hint { font-size: 11px; color: var(--soft); }
#pulse { display: flex; align-items: center; gap: 25px; padding: 13px 22px; font-size: 12px; backdrop-filter: blur(8px); }
#pulse:hover, #pulse.firing { background: var(--accent); color: #10151c; border-color: var(--accent); }
#pulse.firing { box-shadow: 0 0 0 1px rgba(162,199,229,.4), 0 0 45px rgba(118,184,235,.35); }
.swarm-stages { display: flex; gap: 23px; margin-top: 20px; pointer-events: auto; }
.swarm-stages button { font-size: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid transparent; color: var(--soft); opacity: .6; }
.swarm-stages button[aria-pressed="true"], .swarm-stages button:hover { opacity: 1; color: var(--ink); border-color: var(--accent); }
.swarm-stages span { font-size: 9px; margin-right: 7px; }
#swarm-status { font-size: 11px; color: var(--soft); margin-top: 12px; min-height: 18px; }
footer { position: fixed; z-index: 4; inset: auto 0 0; padding: 20px var(--gutter); background: linear-gradient(transparent,rgba(10,16,24,.45)); }
.footer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chapter-nav { display: flex; gap: 28px; }
.chapter-nav button { min-height: 30px; font-size: 12px; padding: 0; display: flex; align-items: center; gap: 10px; opacity: .5; }
.chapter-nav button[aria-current], .chapter-nav button:hover { opacity: 1; }
.chapter-nav b { font-weight: 500; }
.chapter-nav span { font-size: 10px; color: var(--soft); }
@media(max-width:1100px) { .chapter-nav b { display: none; } .chapter-nav button[aria-current] b { display: inline; } .chapter-nav { gap: 18px; } }
.scroll-hint { display: flex; gap: 18px; align-items: center; font-size: 11px; }
#current-scene { display: none; }
#progress-number { font-variant-numeric: tabular-nums; font-size: 12px; }
.scroll-hint .percent { margin-left: -14px; opacity: .6; }
.progress { height: 2px; background: var(--line); position: relative; }
#progress-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.progress input { position: absolute; left: 0; top: -10px; width: 100%; height: 22px; margin: 0; opacity: 0; cursor: ew-resize; }
.progress:focus-within { outline: 2px solid var(--accent); outline-offset: 5px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 16px; font-size: 9px; letter-spacing: .08em; color: var(--soft); }
#tour { pointer-events: auto; padding: 0 12px; margin: -7px 0; min-height: 30px; font-size: 10px; letter-spacing: .02em; color: var(--ink); border-bottom: 1px solid var(--line); }
#tour:hover, #tour[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.reduced #tour, .fallback #tour { display: none; }
.reduced-note { display: none; position: fixed; bottom: 175px; right: var(--gutter); font-size: 11px; color: var(--soft); z-index: 3; }
.reduced .reduced-note { display: block; }
.reduced #interaction, .fallback .swarm-stages, .reduced .swarm-stages, .fallback #swarm-status, .reduced #swarm-status { display: none; }
#fallback-note { position: fixed; bottom: 176px; right: var(--gutter); max-width: 320px; font-size: 13px; line-height: 1.5; background: #18212d; color: var(--ink); padding: 14px; z-index: 5; }
.noscript { position: fixed; top: 25%; left: 5%; max-width: 400px; background: #18212d; padding: 25px; z-index: 5; }
.reduced[data-chapter="3"] #fallback-art, .fallback[data-chapter="3"] #fallback-art { background: #10151c; }
.reduced[data-chapter="3"] #fallback-image, .fallback[data-chapter="3"] #fallback-image { position: absolute; top: 13%; height: 70%; object-fit: contain; object-position: center; }
@media(max-width:1100px) and (min-width:761px) { .chapter-copy { top: 15%; width: 82%; } h1,h2 { font-size: clamp(48px,6.6vw,68px); } .chapter-copy[data-copy="3"] .specialist-intro { max-width: 340px; margin-top: 16px; } .chapter-copy[data-copy="3"] h2 { font-size: clamp(46px,5.6vw,60px); } .chapter-copy[data-copy="3"] .eyebrow { margin-bottom: 18px !important; } .swarm-stages { margin-top: 10px; } #swarm-status { margin-top: 5px; } }
@media(min-width:1101px) and (max-height:800px) {
  .chapter-copy { top: 22%; width: 45%; }
  h1,h2 { font-size: clamp(52px,5.4vw,80px); }
  .eyebrow { margin-bottom: 20px !important; }
  .chapter-copy p { margin: 18px 0; }
  .specialists { margin-top: 15px; }
  .swarm-stages { margin-top: 12px; }
  #swarm-status { margin-top: 7px; }
}
@media(max-width:760px) {
  :root { --gutter: 6%; }
  header { padding-top: 24px; gap: 15px; }
  .home-title { font-size: 14px; }
  .header-actions { gap: 9px; }
  .concept-link { display: none; }
  #motion,#quality { font-size: 10px; padding: 9px 11px; min-height: 38px; }
  #motion { gap: 9px; } #motion-icon { font-size: 13px; }
  .chapter-copy { top: 16%; width: 88%; }
  h1,h2 { font-size: clamp(42px,11.3vw,70px); line-height: 1.07; }
  .eyebrow { font-size: 9px !important; margin-bottom: 20px !important; }
  .chapter-copy p { font-size: 12px; margin: 15px 0; line-height: 1.65; }
  .human-note { margin: 19px 0 18px; padding: 10px 12px 10px 9px; gap: 11px; }
  .human-note strong { font-size: 11px; }
  .person-mark { width: 36px; height: 36px; }
  .person-mark::before { left: 12px; top: 6px; }
  .person-mark::after { left: 6px; bottom: 5px; }
  .specialists { gap: 5px 12px; margin-top: 13px; }
  .specialists span { font-size: 10px; gap: 5px; }
  .specialists small { font-size: 9px; }
  .archive-kinds { font-size: 10px; gap: 13px; margin-top: 17px; }
  .simulation-cases { gap: 7px; margin-top: 16px; }
  .simulation-cases > span { font-size: 10px; gap: 8px; }
  .simulation-cases b { min-width: 68px; }
  .simulation-cases small { font-size: 9px; }
  .chapter-copy .layer-status { font-size: 10px; margin-top: 15px; }
  #explore { font-size: 11px; margin-top: 18px; gap: 17px; }
  #explore span { width: 34px; height: 34px; font-size: 18px; }
  #interaction { bottom: 133px; }
  .interaction-hint { display: none; }
  #pulse { padding: 11px 18px; font-size: 11px; gap: 17px; }
  .swarm-stages { gap: 18px; margin-top: 10px; }
  .swarm-stages button { font-size: 11px; padding: 9px 0; }
  #swarm-status { font-size: 10px; margin-top: 8px; }
  footer { padding-top: 16px; }
  .chapter-nav { gap: 17px; }
  .chapter-nav button { font-size: 11px; gap: 7px; }
  .chapter-nav b { display: none; }
  .chapter-nav button[aria-current] b { display: inline; }
  .footer-bottom { font-size: 8px; letter-spacing: .04em; }
  .footer-top { margin-bottom: 16px; }
  .scene-shade { background: linear-gradient(180deg,rgba(8,13,20,.65),rgba(8,13,20,.1) 50%,transparent 80%); }
  body[data-chapter="5"] .scene-shade { background: linear-gradient(180deg,rgba(6,10,17,.92),rgba(6,10,17,.78) 35%,rgba(6,10,17,.24) 55%,transparent 74%); }
  #fallback-art img { object-position: 65% center; }
  .reduced-note { left: var(--gutter); right: var(--gutter); bottom: 140px; font-size: 10px; }
}
@media(max-height:650px) and (min-width:761px) {
  header { padding-top: 20px; }
  .chapter-copy { top: 24%; }
  h1,h2 { font-size: 58px; }
  .eyebrow { margin-bottom: 16px !important; }
  .chapter-copy p { font-size: 12px; margin: 15px 0; }
  .swarm-stages { margin-top: 12px; }
  #interaction { bottom: 120px; }
}
@media(max-width:390px), (max-height:650px) { .specialists small { display: none; } .specialists { gap: 4px 12px; } }
@media(max-width:390px) and (max-height:650px) {
  #motion, #quality { font-size: 9px; padding: 8px; white-space: nowrap; }
  #motion { gap: 6px; }
  .chapter-copy[data-copy="2"] h2, .chapter-copy[data-copy="4"] h2 { font-size: clamp(34px,10.5vw,40px); line-height: 1.02; }
  .chapter-copy[data-copy="2"] .layer-intro, .chapter-copy[data-copy="4"] .layer-intro, .simulation-cases small { display: none; }
  body[data-chapter="2"] #interaction, body[data-chapter="4"] #interaction { bottom: 113px; }
  body[data-chapter="4"] #interaction { top: 45%; bottom: auto; }
  .simulation-cases { display: flex; gap: 12px; margin-top: 15px; }
  .simulation-cases b { min-width: auto; }
  .chapter-copy .layer-status { font-size: 9px; margin-top: 12px; }
  .chapter-copy[data-copy="3"] h2 { font-size: clamp(34px,10.5vw,40px); line-height: 1.02; }
  .chapter-copy[data-copy="3"] .specialist-intro { display: none; }
  .chapter-copy[data-copy="3"] .specialists { margin-top: 14px; }
  .chapter-copy[data-copy="3"] .swarm-stages { margin-top: 7px; }
  .chapter-copy[data-copy="3"] #swarm-status { margin-top: 3px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .story-ui .chapter-copy { transform: none !important; } }