:root {
  color-scheme: dark;
  --bg: #080b13;
  --bg-soft: #0c111c;
  --panel: #111825;
  --panel-2: #151e2d;
  --ink: #f0f4f9;
  --muted: #8a96a9;
  --faint: #566176;
  --line: rgba(181, 202, 225, .13);
  --mint: #8df4bf;
  --cyan: #6ee7ef;
  --purple: #9a8bff;
  --pink: #ff8ab8;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --page-width: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: -2%; z-index: 0; pointer-events: none; background-image: linear-gradient(180deg,rgba(8,11,19,.78),rgba(8,11,19,.92) 35%,rgba(8,11,19,.84) 72%,rgba(8,11,19,.9)),radial-gradient(ellipse at 50% 0%,rgba(110,231,239,.1),transparent 52%),url("https://images.unsplash.com/photo-1631375937044-6dd5beac01d2?auto=format&fit=crop&fm=jpg&q=78&w=2400"); background-size: 100% 100%,100% 100%,cover; background-position: center; transform: scale(1.03); transform-origin: center; animation: backgroundDrift 42s ease-in-out infinite alternate; }
@keyframes backgroundDrift { to { transform: scale(1.09) translate3d(-.6%,.5%,0); } }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: rgba(141, 244, 191, .3); color: white; }
#networkCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .035; 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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 30; background: rgba(255,255,255,.05); }
.reading-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--cyan), var(--purple)); box-shadow: 0 0 12px var(--cyan); }
.site-header { position: sticky; top: 0; z-index: 20; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(5vw, calc((100vw - var(--page-width)) / 2)); background: rgba(8,11,19,.8); border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; }
.brand-mark { font: 500 18px var(--mono); color: var(--mint); letter-spacing: -2px; }
.brand-mark span { color: #556175; margin: 0 2px; }
.brand-name { font: 400 9px/1.45 var(--mono); color: #79859a; letter-spacing: 1px; }
.brand-name b { color: var(--ink); font-weight: 500; }
.main-nav { display: flex; gap: clamp(18px, 3vw, 44px); align-items: center; }
.main-nav a { color: #a4afc0; font-size: 12px; transition: color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--mint); }
.presentation-button { display: flex; align-items: center; gap: 9px; background: none; border: 1px solid #303b4e; padding: 10px 13px; border-radius: 4px; color: #c8d2df; cursor: pointer; font: 10px var(--mono); letter-spacing: .08em; transition: .2s; }
.presentation-button:hover { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 20px rgba(141,244,191,.08); }
.button-icon { font-size: 15px; }
main, footer { position: relative; z-index: 1; }
.chapter { position: relative; }
.hero { min-height: 715px; max-width: var(--page-width); padding: 96px 24px 86px; margin: 0 auto; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 32px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 25px; }
.eyebrow, .mono-label, .card-kicker { color: var(--mint); font: 500 10px var(--mono); letter-spacing: .12em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: pulse 1.9s infinite; }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 3px var(--mint); } }
.hero h1 { font-size: clamp(48px, 6.3vw, 82px); line-height: .98; letter-spacing: -.065em; font-weight: 500; margin: 28px 0 23px; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--mint); }
.gradient-text { color: transparent; background: linear-gradient(105deg, #b9ffd5 3%, #72dee9 48%, #aa96ff 97%); background-clip: text; -webkit-background-clip: text; }
.hero-lede { max-width: 520px; color: #9ba7b8; line-height: 1.8; font-size: 14px; }
.hero-actions { margin-top: 31px; display: flex; align-items: center; gap: 26px; }
.primary-link { display: inline-flex; gap: 20px; align-items: center; border-radius: 3px; padding: 14px 17px; background: var(--mint); color: #08120f; font-size: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.primary-link:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(141,244,191,.18); }
.primary-link span { font-size: 18px; line-height: 10px; }
.reading-time { color: #667286; font: 9px var(--mono); letter-spacing: .06em; }
.sound-wave { color: var(--cyan); letter-spacing: -2px; margin-right: 7px; }
.hero-stat-row { display: flex; gap: 34px; margin-top: 70px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 520px; }
.hero-stat-row div { display: grid; gap: 7px; }
.hero-stat-row strong { font-size: 23px; font-weight: 500; letter-spacing: -.04em; }
.hero-stat-row strong span { font-size: 12px; color: var(--mint); }
.hero-stat-row small { color: #68758a; font: 8px var(--mono); letter-spacing: .07em; }
.hero-visual { min-height: 485px; position: relative; display: flex; align-items: center; justify-content: center; }
.orbit { position: absolute; border: 1px solid rgba(141,244,191,.11); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 440px; height: 220px; }
.orbit-two { width: 390px; height: 300px; transform: rotate(40deg); border-color: rgba(154,139,255,.12); }
.orbit-one { animation: orbitBreathe 7s ease-in-out infinite; }
.orbit-two { animation: orbitBreathe 8.5s ease-in-out infinite reverse; }
@keyframes orbitBreathe { 50% { opacity: .42; border-color: rgba(141,244,191,.28); } }
.hero-image { overflow: hidden; position: absolute; border: 1px solid rgba(162,215,205,.3); background: #161e27; box-shadow: 0 20px 80px rgba(0,0,0,.55); }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.62) contrast(1.08); }
.hero-image::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(6,9,14,.8)); }
.hero-image-main { width: 295px; height: 355px; transform: rotate(4deg) translate(14px, 5px); border-radius: 3px; }
.hero-image-small { width: 190px; height: 145px; left: 6px; top: 92px; transform: rotate(-8deg); border-radius: 3px; z-index: 3; }
.image-label { position: absolute; bottom: 13px; left: 14px; z-index: 2; color: white; font: 9px var(--mono); letter-spacing: .1em; }
.hero-chip { position: absolute; right: 15px; bottom: 54px; z-index: 4; width: 130px; height: 122px; background: linear-gradient(145deg,#172638,#10131d); border: 1px solid rgba(141,244,191,.43); box-shadow: 0 15px 45px #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); color: var(--mint); font: 9px var(--mono); }
.hero-chip { animation: chipGlow 3.8s ease-in-out infinite; }
@keyframes chipGlow { 50% { box-shadow: 0 15px 45px #000,0 0 35px rgba(141,244,191,.23); border-color: rgba(141,244,191,.8); } }
.hero-chip::before, .hero-chip::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(141,244,191,.18); }
.hero-chip::after { inset: -7px 45px; border-width: 0 1px; }
.hero-chip b { margin-top: 8px; text-align: center; color: #82b5c6; font-size: 14px; line-height: 1.2; }
.hero-chip i { color: #727f98; margin-top: 5px; font-style: normal; }
.hero-caption { position: absolute; left: 15px; bottom: 17px; z-index: 5; display: flex; align-items: center; gap: 10px; color: #687488; font: 8px/1.7 var(--mono); letter-spacing: .05em; }
.hero-caption b { color: #c0ccdb; font-weight: 400; }
.caption-line { height: 1px; width: 35px; background: var(--mint); }
.scroll-cue { position: absolute; bottom: 22px; left: 24px; color: #556277; display: flex; align-items: center; gap: 10px; font: 8px var(--mono); letter-spacing: .1em; }
.scroll-cue span { width: 15px; height: 22px; display: inline-block; border: 1px solid #657187; border-radius: 10px; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; height: 4px; width: 1px; background: var(--mint); left: 6px; top: 4px; animation: scrollCue 1.2s infinite; }
@keyframes scrollCue { to { transform: translateY(7px); opacity: 0; } }

.journey-section { padding: 114px 24px 130px; max-width: var(--page-width); margin: auto; }
.section-heading { max-width: 680px; }
.section-heading h2 { margin: 21px 0 15px; font-size: clamp(37px, 5vw, 60px); letter-spacing: -.055em; line-height: 1.04; font-weight: 500; }
.muted-heading { color: #657188; }
.section-intro { max-width: 580px; color: #8995a8; font-size: 14px; line-height: 1.8; }
.timeline-toolbar { margin: 54px 0 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.mono-label { color: #727f94; font-size: 9px; }
.filter-list { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-button { border: 1px solid #293346; background: transparent; color: #8793a5; font-size: 10px; padding: 8px 12px; border-radius: 30px; cursor: pointer; transition: .2s; }
.filter-button:hover, .filter-button.active { color: var(--mint); border-color: rgba(141,244,191,.48); background: rgba(141,244,191,.06); }
.timeline { position: relative; padding: 0 0 0 190px; }
.timeline-rail { position: absolute; left: 151px; top: 12px; bottom: 6px; width: 1px; background: #273145; }
.timeline-rail span { display: block; height: 0; width: 1px; background: linear-gradient(var(--mint),var(--purple)); box-shadow: 0 0 10px var(--mint); }
.timeline-item { position: relative; display: grid; grid-template-columns: 1fr; padding: 0 0 35px; transition: opacity .3s, transform .3s; }
.timeline-item.is-hidden { display: none; }
.timeline-date { position: absolute; left: -190px; top: 18px; width: 127px; text-align: right; color: var(--mint); font: 500 20px var(--mono); letter-spacing: -.06em; }
.timeline-date small { display: block; margin-top: 5px; color: #657187; font: 8px var(--mono); letter-spacing: .1em; }
.timeline-node { position: absolute; left: -45px; top: 17px; width: 11px; height: 11px; border: 1px solid var(--mint); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 5px rgba(141,244,191,.04); }
.timeline-node span { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--mint); margin: 3px; }
.timeline-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #222d40; border-radius: 5px; background: linear-gradient(125deg,rgba(20,29,43,.95),rgba(12,17,27,.9)); padding: 22px 28px; transition: border-color .25s, transform .25s, box-shadow .35s; }
.timeline-card::before, .generation-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(141,244,191,.12),transparent 68%); transition: opacity .35s; }
.timeline-card:hover, .timeline-card.is-open { border-color: rgba(141,244,191,.38); box-shadow: 0 12px 40px rgba(0,0,0,.17),0 0 26px rgba(141,244,191,.045); }
.timeline-card:hover::before, .timeline-card.is-open::before, .generation-card:hover::before { opacity: 1; }
.timeline-trigger { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.timeline-trigger:focus-visible, .part-hotspot:focus-visible, .part-info-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.timeline-trigger-copy { display: grid; gap: 8px; }
.timeline-trigger .card-kicker { color: #8aa0ad; font-size: 8px; transition: color .25s; }
.timeline-card:hover .timeline-trigger .card-kicker, .timeline-card.is-open .timeline-trigger .card-kicker { color: var(--mint); }
.timeline-card .card-kicker { color: #7c91a1; font-size: 8px; }
.timeline-card h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.035em; transition: letter-spacing .25s,color .25s; }
.timeline-card:hover h3 { letter-spacing: -.02em; }
.timeline-trigger-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 13px; color: #64738a; }
.timeline-trigger-meta small { font: 7px var(--mono); letter-spacing: .09em; white-space: nowrap; }
.timeline-chevron { width: 27px; height: 27px; border: 1px solid #354258; border-radius: 50%; display: grid; place-items: center; color: var(--mint); font: normal 15px var(--sans); transition: transform .35s,border-color .25s,background .25s; }
.timeline-card.is-open .timeline-chevron { transform: rotate(180deg); border-color: rgba(141,244,191,.58); background: rgba(141,244,191,.08); }
.timeline-body { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .7s cubic-bezier(.2,.7,.2,1), opacity .35s ease, margin .35s ease; }
.timeline-card.is-open .timeline-body { max-height: 1800px; margin-top: 16px; opacity: 1; }
.timeline-card.is-open .timeline-body > :first-child { animation: contentArrive .45s both; }
@keyframes contentArrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.timeline-card p { margin: 0; color: #9aa6b7; font-size: 12px; line-height: 1.8; max-width: 740px; }
.timeline-card .card-note { margin-top: 13px; padding-left: 13px; border-left: 2px solid var(--purple); color: #a8b1c0; }
.card-note b { color: #d7dce6; }
.fact-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.fact-tags span { border: 1px solid #2b3749; color: #758398; padding: 5px 8px; font: 8px var(--mono); letter-spacing: .05em; }
.timeline-photo { position: relative; overflow: hidden; margin-top: 17px; width: 100%; max-width: 575px; }
.timeline-photo img { display: block; width: 100%; height: 245px; object-fit: cover; border: 1px solid #344153; filter: saturate(.75); }
.timeline-photo::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -50%; height: 20%; background: linear-gradient(transparent,rgba(141,244,191,.1),transparent); opacity: 0; pointer-events: none; }
.timeline-card.is-open .timeline-photo::after { opacity: 1; animation: photoScan 4.5s linear infinite; }
.timeline-photo span { display: block; color: #68758a; font: 8px/1.5 var(--mono); margin-top: 5px; }
@keyframes photoScan { to { top: 130%; } }

.turning-section { padding: 112px 24px 120px; background: linear-gradient(180deg,rgba(15,22,34,.92),rgba(12,17,27,.95)); border-top: 1px solid rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.04); }
.turning-inner { max-width: var(--page-width); margin: auto; }
.generation-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.generation-card { position: relative; isolation: isolate; overflow: hidden; min-height: 320px; padding: 22px 20px; border: 1px solid #273246; background: rgba(15,22,33,.78); transition: transform .35s,border-color .25s,box-shadow .35s; }
.generation-card:hover { transform: translateY(-6px) rotateX(1deg); border-color: rgba(141,244,191,.48); box-shadow: 0 18px 45px rgba(0,0,0,.25),0 0 22px rgba(141,244,191,.05); }
.generation-number { position: absolute; top: 16px; left: 18px; color: #465369; font: 10px var(--mono); }
.generation-years { position: absolute; top: 16px; right: 17px; color: #66758a; font: 8px var(--mono); }
.generation-card h3 { margin: 16px 0 9px; font-size: 16px; font-weight: 500; }
.generation-card p { color: #8592a6; font-size: 11px; line-height: 1.7; min-height: 58px; }
.gen-caption { display: inline-block; margin-top: 16px; color: var(--mint); font: 8px var(--mono); letter-spacing: .08em; }
.gen-illustration { height: 128px; margin: 33px 0 10px; position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #243044; background-image: linear-gradient(rgba(81,105,139,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(81,105,139,.055) 1px,transparent 1px); background-size: 12px 12px; }
.tube { display: block; width: 23px; height: 72px; border: 2px solid #ad89ff; border-radius: 10px 10px 5px 5px; background: linear-gradient(90deg,rgba(146,117,255,.2),rgba(33,31,58,.8)); margin: 0 5px; box-shadow: inset 0 0 10px rgba(177,141,255,.3),0 0 13px rgba(177,141,255,.15); }
.tube::before { content: ""; display: block; width: 7px; height: 20px; margin: -10px auto 0; border: 1px solid #9a84da; background: #151426; }
.transistor { position: relative; width: 52px; height: 52px; background: linear-gradient(135deg,#677585,#111924 64%); border: 1px solid #90f6c1; box-shadow: 0 0 20px rgba(141,244,191,.2); }
.transistor::before, .transistor::after { content: ""; position: absolute; background: #99f3c4; opacity: .7; }
.transistor::before { width: 7px; height: 26px; left: -6px; top: 13px; box-shadow: 55px 0 #99f3c4; }
.transistor::after { width: 40px; height: 1px; left: 5px; bottom: -12px; box-shadow: 0 5px #99f3c4,0 10px #99f3c4; }
.spark { position: absolute; color: var(--mint); font-size: 20px; opacity: .7; }
.s1 { top: 26px; left: 36%; }.s2 { bottom: 24px; right: 35%; color: var(--purple); }
.chip-illustration { perspective: 500px; }
.chip-visual { width: 98px; height: 80px; border: 1px solid var(--cyan); background: linear-gradient(140deg,#172a37,#0b151d); display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; padding: 13px; transform: rotateX(30deg) rotateZ(-12deg); box-shadow: 9px 12px 0 rgba(69,177,201,.15),0 0 25px rgba(110,231,239,.15); position: relative; }
.chip-visual::before { content: ""; position: absolute; inset: -9px 8px; border: 1px solid rgba(110,231,239,.34); border-width: 0 1px; }
.chip-visual i { display: block; background: rgba(110,231,239,.2); border: 1px solid rgba(110,231,239,.45); }
.chip-visual b { position: absolute; inset: 0; display: grid; place-items: center; color: white; font: 14px var(--mono); }
.mini-monitor { width: 67px; height: 48px; border: 4px solid #d2b98d; border-radius: 7px; background: #07170f; box-shadow: 0 0 13px rgba(141,244,191,.18); }
.mini-monitor::before { content: "01"; display: block; color: var(--mint); font: 10px var(--mono); padding: 9px; }
.mini-monitor::after { content: ""; display: block; width: 17px; height: 7px; background: #bcaa87; margin: 2px auto; }
.mini-keyboard { position: absolute; bottom: 12px; width: 81px; height: 8px; background: repeating-linear-gradient(90deg,#c5b58f 0 5px,transparent 5px 8px),#766b58; transform: perspective(40px) rotateX(20deg); }
.scale-callout { margin-top: 45px; display: grid; grid-template-columns: 145px 1fr 1.1fr; align-items: center; gap: 26px; padding: 23px 30px; border: 1px solid rgba(154,139,255,.27); background: linear-gradient(105deg,rgba(133,116,255,.09),rgba(13,20,31,.7) 60%); }
.scale-symbol { color: var(--purple); font: 500 47px var(--mono); letter-spacing: -.08em; }
.scale-symbol sup { font-size: 16px; }
.scale-callout .eyebrow { margin: 0 0 9px; font-size: 8px; }
.scale-callout h3 { font-size: 18px; margin: 0; line-height: 1.25; font-weight: 500; }
.scale-copy { color: #8d99ac; line-height: 1.7; font-size: 11px; border-left: 1px solid #384156; padding-left: 25px; }

.video-section { max-width: var(--page-width); margin: 0 auto; padding: 112px 24px 118px; }
.video-section-heading { max-width: 760px; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 42px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid #273348; background: linear-gradient(145deg,rgba(18,27,41,.96),rgba(10,15,24,.94)); transition: transform .35s,border-color .3s,box-shadow .35s; }
.video-card:hover { transform: translateY(-6px); border-color: rgba(110,231,239,.45); box-shadow: 0 18px 48px rgba(0,0,0,.3),0 0 25px rgba(110,231,239,.055); }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at center,#1a2a39,#070b11 75%); border-bottom: 1px solid #273348; }
.video-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg,rgba(110,231,239,.09),transparent 38%,transparent 70%,rgba(154,139,255,.1)); opacity: .55; transition: opacity .3s; }
.video-card:hover .video-frame::after { opacity: .15; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-index { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 7px; color: #c5d4e3; background: rgba(5,9,15,.78); border: 1px solid rgba(190,211,233,.18); font: 7px var(--mono); letter-spacing: .08em; pointer-events: none; }
.video-card-copy { padding: 19px 19px 20px; }
.video-card-copy .card-kicker { margin: 0 0 8px; color: var(--cyan); font-size: 8px; }
.video-card-copy h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.25; letter-spacing: -.025em; font-weight: 500; }
.video-card-copy > p:not(.card-kicker) { min-height: 54px; margin: 0; color: #8997aa; font-size: 10px; line-height: 1.7; }
.video-card-copy a { display: inline-block; margin-top: 13px; color: var(--mint); font: 8px var(--mono); transition: color .2s; }
.video-card-copy a:hover { color: white; }
.video-footnote { display: flex; gap: 9px; align-items: center; margin: 17px 0 0; color: #657389; font: 8px/1.6 var(--mono); }
.video-footnote span { color: var(--cyan); font-size: 12px; }

.lab-section { padding: 115px 24px 125px; max-width: var(--page-width); margin: auto; }
.lab-heading { max-width: 710px; }
.lab-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 26px; margin-top: 44px; align-items: stretch; }
.scene-shell { border: 1px solid #273248; background: #0b111c; }
.scene-topbar, .scene-footer { display: flex; justify-content: space-between; align-items: center; color: #78869b; font: 8px var(--mono); letter-spacing: .06em; padding: 14px 17px; }
.scene-topbar { border-bottom: 1px solid #202b3c; }
.scene-topbar span:first-child { display: flex; gap: 8px; align-items: center; }
.scene-topbar .live-dot { width: 5px; height: 5px; }
.scene { height: 430px; position: relative; overflow: hidden; touch-action: none; cursor: grab; perspective: 1000px; background: radial-gradient(ellipse at 50% 46%,#18263a 0,#0d1420 46%,#080c14 82%); }
.scene:active { cursor: grabbing; }
.scene-stars { position: absolute; inset: 0; opacity: .6; background-image: radial-gradient(1px 1px at 18% 24%,#d9f4e9 90%,transparent),radial-gradient(1px 1px at 75% 12%,#7fe9d6 90%,transparent),radial-gradient(2px 2px at 84% 64%,#b4a0ff 90%,transparent),radial-gradient(1px 1px at 33% 78%,#b3dcff 90%,transparent),radial-gradient(1px 1px at 61% 29%,#fff 90%,transparent),radial-gradient(1px 1px at 11% 57%,#88eabc 90%,transparent),radial-gradient(2px 2px at 91% 38%,#fff 90%,transparent); }
.scene-grid { position: absolute; left: -20%; right: -20%; bottom: -38%; height: 82%; transform: rotateX(66deg); transform-origin: top; background-image: linear-gradient(rgba(105,209,200,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(105,209,200,.17) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(transparent,black 20%,black 80%,transparent); animation: gridDrift 12s linear infinite; }
@keyframes gridDrift { to { background-position: 0 46px,46px 0; } }
.scene-world { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; --rx: -13deg; --ry: -24deg; }
.scene-world { animation: worldFloat 6s ease-in-out infinite; }
@keyframes worldFloat { 50% { translate: 0 -7px; } }
.computer-model { position: relative; width: 340px; height: 270px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; --case: #b8a985; --case-side: #87785f; --screen: #05180f; --glow: #a7ffcc; --chip: #d4bd8c; }
.computer-model[data-model="early"] { --case: #748278; --case-side: #3d4b46; --screen: #061713; --glow: #a9f8ca; --chip: #92a398; }
.computer-model[data-model="early"] .monitor { transform: translateZ(24px) scale(1.16); }
.computer-model[data-model="early"] .tower { width: 85px; height: 168px; top: 50px; background: linear-gradient(95deg,#283b38,#65776c 50%,#35443f); border-color: #a6b4a9; }
.computer-model[data-model="early"] .monitor-face { border-color: #45544c; box-shadow: inset 0 0 0 2px #87958a; }
.computer-model[data-model="modern"] { --case: #6b768a; --case-side: #31394a; --screen: #091629; --glow: #84e9f4; --chip: #d2d8e4; }
.computer-model[data-model="modern"] .monitor { width: 235px; height: 143px; left: 52px; top: 18px; }
.computer-model[data-model="modern"] .monitor-back { border-radius: 9px; transform: translateZ(-8px); box-shadow: 8px 8px 0 var(--case-side); }
.computer-model[data-model="modern"] .monitor-face { inset: 6px; border-width: 4px; border-radius: 7px; box-shadow: inset 0 0 0 1px #d2d8e4; }
.computer-model[data-model="modern"] .monitor-neck,
.computer-model[data-model="modern"] .monitor-foot,
.computer-model[data-model="modern"] .tower { display: none; }
.computer-model[data-model="modern"] .keyboard { top: 179px; left: 40px; width: 262px; height: 59px; border-color: #8591a6; background: linear-gradient(150deg,#aab4c5,#586276); transform: perspective(350px) rotateX(58deg) translateZ(29px); }
.computer-model[data-model="modern"] .cpu-chip { background: linear-gradient(140deg,#1e6371,#111b2d); border-color: var(--cyan); color: #c5fcff; box-shadow: 0 0 30px rgba(110,231,239,.3),8px 8px 0 rgba(110,231,239,.14); }
.computer-model[data-model="modern"] .board-label { color: rgba(110,231,239,.72); }
.computer-model.focus-screen .monitor-face { box-shadow: inset 0 0 0 2px var(--glow),0 0 24px var(--glow); }
.computer-model.focus-cpu .cpu-chip { animation: focusPulse .8s ease-in-out 3; }
.computer-model.focus-storage .tower { filter: drop-shadow(0 0 15px var(--cyan)); }
.computer-model[data-model="modern"].focus-storage .monitor-back { filter: drop-shadow(0 0 15px var(--cyan)); }
.computer-model.focus-keyboard .keyboard { filter: drop-shadow(0 0 13px var(--mint)); }
@keyframes focusPulse { 50% { transform: translateZ(115px) rotateY(13deg) rotateX(8deg) scale(1.12); box-shadow: 0 0 38px rgba(255,138,184,.65),8px 8px 0 rgba(255,138,184,.2); } }
.component-hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.part-hotspot { position: absolute; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(141,244,191,.85); border-radius: 50%; background: rgba(8,13,20,.74); color: var(--mint); font: 8px var(--mono); cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 0 rgba(141,244,191,.28); animation: hotspotPulse 2.8s ease-out infinite; transition: color .2s,background .2s,transform .2s; }
.part-hotspot:hover, .part-hotspot.selected { color: #06110d; background: var(--mint); transform: scale(1.12); animation: none; }
.part-hotspot span { position: relative; z-index: 2; }
.part-hotspot i { position: absolute; inset: -6px; border: 1px solid rgba(141,244,191,.24); border-radius: 50%; }
.part-hotspot::after { content: attr(data-label); position: absolute; left: 37px; top: 7px; color: #a9f8d0; background: rgba(7,12,20,.84); border: 1px solid rgba(141,244,191,.19); padding: 4px 6px; font: 7px var(--mono); white-space: nowrap; opacity: .78; transition: opacity .2s,color .2s; }
.part-hotspot:hover::after, .part-hotspot.selected::after { color: white; opacity: 1; }
.hotspot-screen { left: 44%; top: 36%; }
.hotspot-cpu { left: 58%; top: 23%; animation-delay: .5s; }
.hotspot-storage { left: 79%; top: 46%; animation-delay: 1s; }
.hotspot-keyboard { left: 54%; top: 69%; animation-delay: 1.5s; }
@keyframes hotspotPulse { 75% { box-shadow: 0 0 0 9px rgba(141,244,191,0); } 100% { box-shadow: 0 0 0 0 rgba(141,244,191,0); } }
.part-info-panel { position: absolute; z-index: 8; left: 15px; bottom: 43px; width: min(230px,43%); padding: 18px 17px 17px; border: 1px solid rgba(141,244,191,.38); background: rgba(7,12,20,.94); box-shadow: 0 15px 45px rgba(0,0,0,.42),0 0 30px rgba(141,244,191,.08); opacity: 0; visibility: hidden; transform: translateX(-12px) scale(.97); transition: opacity .28s,visibility .28s,transform .35s cubic-bezier(.2,.75,.2,1); backdrop-filter: blur(12px); }
.part-info-panel.visible { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
.part-info-panel .mono-label { margin: 0 22px 10px 0; color: var(--mint); font-size: 8px; }
.part-info-panel h3 { margin: 0 20px 8px 0; font-size: 17px; line-height: 1.2; font-weight: 500; }
.part-info-panel > p:last-child { margin: 0; color: #95a3b6; font-size: 10px; line-height: 1.65; }
.part-info-close { position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; border: 1px solid #354257; background: transparent; color: #aebac9; cursor: pointer; transition: .2s; }
.part-info-close:hover { border-color: var(--mint); color: var(--mint); transform: rotate(90deg); }
.monitor { position: absolute; width: 192px; height: 160px; left: 74px; top: 8px; transform-style: preserve-3d; transform: translateZ(24px); }
.monitor-back { position: absolute; inset: 0; border-radius: 18px 18px 12px 12px; background: linear-gradient(115deg,#ead5aa,var(--case) 48%,#96866a); transform: translateZ(-20px); box-shadow: 16px 12px 0 var(--case-side); }
.monitor-face { position: absolute; inset: 8px 9px 13px; border: 7px solid #80775f; border-radius: 19px 19px 13px 13px; background: #131712; transform: translateZ(2px); box-shadow: inset 0 0 0 2px #d3c29f; display: grid; place-items: center; overflow: hidden; }
.screen-content { position: relative; width: 81%; height: 76%; padding: 12px 9px; background: radial-gradient(ellipse,#10231a,var(--screen)); box-shadow: 0 0 17px var(--glow); color: var(--glow); font: 9px var(--mono); text-shadow: 0 0 8px var(--glow); }
.screen-prompt { display: block; font-size: 11px; }
.screen-lines { display: block; margin-top: 7px; opacity: .64; line-height: 1.5; font-size: 7px; }
.screen-cursor { display: block; position: absolute; bottom: 12px; left: 9px; height: 8px; width: 5px; background: var(--glow); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.monitor-neck { position: absolute; width: 57px; height: 29px; bottom: -17px; left: 67px; background: linear-gradient(90deg,#927f61,var(--case),#927f61); transform: translateZ(-1px); }
.monitor-foot { position: absolute; width: 115px; height: 16px; bottom: -24px; left: 38px; background: linear-gradient(#e0ceaa,#96866a); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); transform: translateZ(3px); }
.keyboard { position: absolute; top: 190px; left: 80px; width: 186px; height: 51px; padding: 9px; display: grid; grid-template-columns: repeat(9,1fr); gap: 4px; border: 1px solid #806f54; border-radius: 6px; background: linear-gradient(150deg,#d2bf98,#8b7c63); transform: perspective(350px) rotateX(58deg) translateZ(25px); box-shadow: 2px 9px 0 #5c523f; }
.keyboard span { border-radius: 1px; background: #353538; box-shadow: 0 1px 1px #eee1c0; }
.tower { position: absolute; width: 71px; height: 152px; top: 62px; left: 277px; border-radius: 7px; background: linear-gradient(95deg,#635a4a,#c6b58e 50%,#8b7c62); transform: translateZ(-3px); box-shadow: 9px 7px 0 #504838; border: 1px solid #d3c29c; }
.tower-slot { height: 5px; width: 32px; background: #393b3d; margin: 26px auto 0; border: 1px solid #e2d0a5; }
.tower-light { width: 5px; height: 5px; border-radius: 50%; margin: 20px auto; background: var(--glow); box-shadow: 0 0 7px var(--glow); }
.cpu-chip { position: absolute; top: 32px; left: 145px; width: 72px; height: 58px; border: 1px solid rgba(255,138,184,.88); background: linear-gradient(140deg,#67354f,#171322); transform: translateZ(96px) rotateY(13deg) rotateX(8deg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffc5da; box-shadow: 0 0 25px rgba(255,138,184,.22),8px 8px 0 rgba(255,138,184,.14); font: 7px var(--mono); }
.cpu-chip b { margin: 3px 0; font-size: 14px; }
.cpu-chip i { color: #ae8a9d; font-style: normal; font-size: 6px; }
.board-label { position: absolute; bottom: -5px; left: 102px; color: rgba(141,244,191,.55); font: 7px var(--mono); letter-spacing: .16em; transform: translateZ(30px); }
.scene-hint { position: absolute; left: 16px; bottom: 16px; color: #718198; font: 8px var(--mono); }
.scene-hint span { color: var(--mint); font-size: 16px; vertical-align: -2px; margin-right: 5px; }
.scene-coordinates { position: absolute; right: 14px; bottom: 12px; text-align: right; font: 8px/1.8 var(--mono); color: #64748a; }
.scene-coordinates span { color: var(--cyan); }
.scene-footer { border-top: 1px solid #202b3c; justify-content: flex-start; gap: 22px; }
.scene-footer b { width: 6px; height: 6px; display: inline-block; margin-right: 5px; }
.green-square { background: var(--mint); }.pink-square { background: var(--pink); }.blue-square { background: var(--cyan); }
.lab-controls { padding: 21px; border: 1px solid #273248; background: rgba(12,18,28,.7); }
.lab-controls > .mono-label { margin: 3px 0 16px; }
.era-selector { display: grid; gap: 7px; }
.era-button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 10px; border: 1px solid transparent; border-bottom-color: #273044; background: transparent; cursor: pointer; color: #a2aec0; transition: .2s; }
.era-button.active, .era-button:hover { border-color: rgba(141,244,191,.33); background: rgba(141,244,191,.055); color: white; }
.era-dot { width: 8px; height: 8px; border: 1px solid #5a687c; border-radius: 50%; }
.era-button.active .era-dot { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 9px var(--mint); }
.era-button-copy { display: grid; gap: 4px; flex: 1; }
.era-button b { font-size: 11px; font-weight: 500; }
.era-button small { font: 8px var(--mono); color: #67768b; }
.era-arrow { opacity: 0; color: var(--mint); transition: .2s; }
.era-button.active .era-arrow, .era-button:hover .era-arrow { opacity: 1; }
.era-description { border-top: 1px solid #273044; margin-top: 18px; padding-top: 18px; }
.description-index { color: var(--purple); font: 9px var(--mono); }
.era-description h3 { margin: 9px 0; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.era-description p { margin: 0; color: #8794a8; font-size: 11px; line-height: 1.75; }
.lab-tip { margin-top: 22px; padding: 11px; display: flex; gap: 10px; border: 1px solid #283349; background: #111a28; }
.lab-tip > span { color: var(--mint); }
.lab-tip p { margin: 0; color: #758399; font-size: 9px; line-height: 1.65; }
.lab-tip b { font: 8px var(--mono); color: #a8b7c7; letter-spacing: .08em; }

.future-section { min-height: 610px; padding: 100px max(24px,calc((100vw - var(--page-width)) / 2)); overflow: hidden; background: radial-gradient(ellipse at 77% 43%,rgba(82,71,168,.19),transparent 42%),linear-gradient(105deg,#111722,#0a0d17 78%); border-top: 1px solid #232c3b; }
.future-grid-bg { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(143,164,205,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(143,164,205,.23) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,transparent,black 55%); }
.future-content { position: relative; z-index: 2; max-width: 670px; }
.future-content h2 { margin: 23px 0 17px; font-size: clamp(38px,5vw,61px); line-height: 1.06; letter-spacing: -.055em; font-weight: 500; }
.future-lede { max-width: 610px; color: #929fb2; font-size: 13px; line-height: 1.8; }
.future-prompts { margin-top: 29px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.future-prompts div { border-top: 1px solid #344056; padding: 12px 10px 8px 0; }
.future-prompts span { color: var(--mint); font: 9px var(--mono); }
.future-prompts p { margin: 7px 0 0; font-size: 10px; color: #a9b4c3; line-height: 1.55; }
.closing-line { color: var(--mint); font: italic 16px Georgia,serif; margin-top: 35px; }
.future-art { position: absolute; z-index: 1; width: 390px; height: 390px; right: max(20px,calc((100vw - var(--page-width)) / 2 - 8px)); top: 96px; display: grid; place-items: center; }
.future-ring { position: absolute; inset: 22px; border: 1px solid rgba(151,132,255,.26); border-radius: 50%; transform: rotateX(66deg) rotate(-23deg); }
.ring-b { inset: 59px; border-color: rgba(110,231,239,.3); transform: rotateY(60deg) rotateX(20deg); }
.future-orbit-dot { position: absolute; top: 54px; left: 58px; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 22px var(--mint); }
.future-core { z-index: 1; width: 210px; height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border: 1px solid rgba(151,132,255,.53); background: linear-gradient(145deg,rgba(25,29,57,.94),rgba(8,14,22,.94)); box-shadow: 0 0 65px rgba(112,105,255,.18),inset 0 0 30px rgba(112,105,255,.08); transform: rotateX(10deg) rotateY(-10deg); font: 9px var(--mono); color: #8f9cb0; }
.future-core span { color: var(--mint); font-size: 20px; }
.future-core b { font-size: 10px; color: #c7d0de; letter-spacing: .15em; }
.future-core i { color: var(--purple); font-style: normal; }

.sources-section { max-width: var(--page-width); padding: 25px 24px 35px; margin: auto; }
.sources-details { border: 1px solid #273146; background: rgba(13,19,29,.78); }
.sources-details summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; cursor: pointer; list-style: none; }
.sources-details summary::-webkit-details-marker { display: none; }
.sources-details summary > span:first-child { display: grid; gap: 8px; }
.sources-details summary .eyebrow { display: block; margin: 0; font-size: 8px; }
.sources-details summary b { font-size: 16px; font-weight: 500; }
.sources-toggle { color: var(--mint); font-size: 20px; transition: transform .2s; }
.sources-details[open] .sources-toggle { transform: rotate(45deg); }
.sources-content { border-top: 1px solid #273146; padding: 22px 24px 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.source-column { display: grid; align-content: start; gap: 11px; }
.source-column .mono-label { margin: 0 0 3px; }
.source-column a { color: #a0adbf; font-size: 10px; line-height: 1.5; transition: color .2s; }
.source-column a:hover { color: var(--mint); }
.source-note { margin: 5px 0 0; color: #69778d; font-size: 9px; line-height: 1.6; }
.site-footer { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px max(5vw,calc((100vw - var(--page-width))/2)); border-top: 1px solid rgba(255,255,255,.06); background: #070910; }
.footer-brand { min-width: 220px; }
.site-footer > p { color: #778398; font: 8px var(--mono); letter-spacing: .06em; text-align: center; }
.site-footer > p span { color: #aab5c5; }
.back-top { color: var(--mint); font: 8px var(--mono); white-space: nowrap; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%,20px); opacity: 0; z-index: 40; background: #d5ffe7; color: #09130f; padding: 10px 15px; font: 10px var(--mono); pointer-events: none; transition: .25s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
body.presentation-mode .site-header { position: fixed; top: 0; left: 0; right: 0; }
body.presentation-mode { scroll-snap-type: y proximity; }
body.presentation-mode .chapter { scroll-snap-align: start; }
body.presentation-mode .presentation-button { border-color: var(--mint); color: var(--mint); }
@media (max-width: 930px) {
  .main-nav { gap: 11px; }.main-nav a { font-size: 9px; }
  .hero { grid-template-columns: 1fr .85fr; padding-top: 78px; }
  .hero-image-main { width: 240px; height: 310px; }
  .hero-image-small { width: 155px; height: 125px; }
  .hero-chip { right: 0; }
  .generation-grid { grid-template-columns: repeat(2,1fr); }
  .generation-card { min-height: 300px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .future-art { right: -80px; opacity: .55; }
  .future-content { max-width: 650px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  .site-header { height: 66px; padding: 0 16px; }
  .brand { min-width: 0; gap: 8px; }.brand-mark { font-size: 15px; }.brand-name { font-size: 7px; }
  .main-nav { display: none; }
  .presentation-button { padding: 8px 9px; }.button-label { font-size: 8px; }
  .hero { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 73px 19px 76px; gap: 15px; }
  .hero h1 { font-size: clamp(46px,13vw,68px); }
  .hero-lede { font-size: 13px; }
  .hero-actions { flex-wrap: wrap; gap: 17px; }
  .hero-stat-row { margin-top: 39px; gap: 16px; justify-content: space-between; }
  .hero-stat-row strong { font-size: 18px; }.hero-stat-row small { max-width: 95px; font-size: 7px; line-height: 1.5; }
  .hero-visual { min-height: 380px; margin-top: 10px; }
  .hero-image-main { width: 240px; height: 305px; }
  .hero-image-small { left: 0; top: 61px; width: 147px; height: 117px; }
  .hero-chip { right: 0; bottom: 35px; transform: scale(.82) rotate(-6deg); transform-origin: bottom right; }
  .hero-caption { left: 0; bottom: 0; }
  .scroll-cue { left: 20px; bottom: 18px; }
  .journey-section, .lab-section { padding: 82px 18px 88px; }
  .section-heading h2 { font-size: 40px; }
  .section-intro { font-size: 12px; }
  .timeline-toolbar { align-items: flex-start; flex-direction: column; margin-top: 38px; }
  .filter-list { gap: 5px; }.filter-button { font-size: 9px; padding: 7px 10px; }
  .timeline { padding-left: 34px; }
  .timeline-rail { left: 5px; }.timeline-node { left: -34px; }
  .timeline-date { position: static; width: auto; text-align: left; margin-bottom: 10px; font-size: 13px; }
  .timeline-date small { display: inline; margin-left: 7px; }
  .timeline-card { padding: 18px 16px; }
  .timeline-trigger { gap: 10px; }
  .timeline-trigger-meta { gap: 0; }
  .timeline-trigger-meta small { display: none; }
  .timeline-card h3 { font-size: 18px; }
  .timeline-card p { font-size: 11px; }
  .timeline-photo img { height: 180px; }
  .turning-section { padding: 82px 18px 88px; }
  .generation-grid { gap: 8px; margin-top: 35px; }
  .generation-card { min-height: 315px; padding: 16px 13px; }
  .generation-number { left: 13px; }.generation-years { right: 12px; font-size: 7px; }
  .generation-card h3 { font-size: 14px; }.generation-card p { font-size: 10px; }
  .gen-illustration { margin-top: 36px; }
  .scale-callout { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .scale-symbol { font-size: 34px; }.scale-copy { border-left: 0; border-top: 1px solid #384156; padding: 12px 0 0; }
  .video-section { padding: 82px 18px 88px; }
  .video-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 30px; }
  .video-card-copy > p:not(.card-kicker) { min-height: 0; }
  .lab-layout { grid-template-columns: 1fr; gap: 13px; margin-top: 32px; }
  .scene { height: 340px; }
  .computer-model { transform: scale(.76) rotateX(var(--rx)) rotateY(var(--ry)); }
  .scene-hint { font-size: 7px; }
  .part-hotspot::after { font-size: 6px; }
  .hotspot-storage::after { left: auto; right: 37px; }
  .part-info-panel { left: 10px; bottom: 39px; width: min(220px,52%); padding: 13px; }
  .part-info-panel h3 { font-size: 15px; }
  .part-info-panel > p:last-child { font-size: 9px; }
  .lab-controls { padding: 17px; }
  .future-section { min-height: 720px; padding: 80px 19px 70px; }
  .future-content h2 { font-size: 43px; }
  .future-lede { font-size: 12px; }
  .future-prompts { grid-template-columns: 1fr; gap: 0; max-width: 390px; }
  .future-prompts div { display: grid; grid-template-columns: 27px 1fr; align-items: baseline; padding: 10px 0; }
  .future-prompts p { margin: 0; }
  .future-art { width: 250px; height: 250px; right: -61px; top: auto; bottom: 8px; opacity: .5; }
  .future-core { width: 145px; height: 145px; }
  .future-ring { inset: 15px; }.ring-b { inset: 36px; }
  .sources-section { padding: 16px 18px 25px; }
  .sources-content { grid-template-columns: 1fr; gap: 26px; padding: 20px; }
  .site-footer { flex-wrap: wrap; padding: 19px 18px; }
  .site-footer > p { order: 3; flex-basis: 100%; text-align: left; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* A quieter museum identity: archival warmth, editorial type, less synthetic glow. */
:root {
  --bg: #111313;
  --bg-soft: #171a19;
  --panel: #1b1e1c;
  --panel-2: #242723;
  --ink: #f1eee6;
  --muted: #c0bcb1;
  --faint: #918e84;
  --line: rgba(224,210,180,.17);
  --mint: #dcb77b;
  --cyan: #a9c4b6;
  --purple: #d08e6e;
  --pink: #cb8c83;
  --sans: "Be Vietnam Pro", system-ui, sans-serif;
  --serif: "Lora", Georgia, serif;
}
body { background: #111313; color: #f1eee6; font-family: var(--sans); }
body::before {
  background-image:
    linear-gradient(180deg,rgba(12,15,14,.78),rgba(13,16,15,.88) 38%,rgba(13,16,15,.83) 72%,rgba(10,13,12,.91)),
    radial-gradient(ellipse at 17% 9%,rgba(192,149,83,.10),transparent 43%),
    radial-gradient(ellipse at 86% 47%,rgba(107,145,128,.09),transparent 41%),
    url("https://images.unsplash.com/photo-1631375937044-6dd5beac01d2?auto=format&fit=crop&fm=jpg&q=82&w=2600");
  background-size: 100% 100%,100% 100%,100% 100%,cover;
}
#networkCanvas { opacity: .16; }
.grain { opacity: .022; }
.site-header { background: rgba(15,18,16,.9); border-bottom-color: rgba(220,183,123,.18); }
.brand-mark, .main-nav a.active, .main-nav a:hover { color: var(--mint); }
.brand-name b { color: #eee8db; }
.presentation-button { border-radius: 5px; border-color: rgba(220,183,123,.35); color: #e2d7c4; }
.presentation-button:hover { border-color: var(--mint); color: var(--mint); box-shadow: none; }
.hero h1, .section-heading h2, .future-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.hero h1 em { color: #dfbd87; }
.gradient-text { background-image: linear-gradient(100deg,#ead1a4,#c4d0c0 70%,#d6b188); }
.eyebrow, .mono-label, .card-kicker { color: #dfbd87; }
.live-dot { background: #bd9560; box-shadow: 0 0 7px rgba(189,149,96,.42); animation: none; }
.hero-lede, .section-intro, .future-lede { color: #d0cec5; }
.primary-link { background: #d9b77e; color: #211b12; border-radius: 5px; box-shadow: none; }
.primary-link:hover { box-shadow: 0 7px 24px rgba(217,183,126,.13); }
.hero-chip {
  border-color: rgba(220,183,123,.52);
  border-radius: 6px;
  background: linear-gradient(145deg,#242822,#131815);
  color: #e5c993;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  animation: none;
}
.hero-chip b { color: #b8c4b1; }
.hero-image { border-color: rgba(220,183,123,.32); }
.orbit { border-color: rgba(220,183,123,.13); }
.orbit-two { border-color: rgba(169,196,182,.13); }
.timeline-card, .generation-card, .video-card, .scene-shell, .lab-controls, .sources-details, .evolution-ribbon article {
  border-color: rgba(207,195,165,.2);
  border-radius: 9px;
  background: linear-gradient(145deg,rgba(28,32,29,.97),rgba(17,21,19,.96));
  box-shadow: 0 11px 30px rgba(0,0,0,.18);
}
.timeline-card::before, .generation-card::before { display: none; }
.timeline-card:hover, .timeline-card.is-open, .generation-card:hover, .video-card:hover {
  border-color: rgba(220,183,123,.58);
  box-shadow: 0 15px 34px rgba(0,0,0,.26);
}
.timeline-card:hover, .timeline-card.is-open { transform: translateY(-1px); }
.generation-card:hover { transform: translateY(-3px); }
.timeline-date { color: #dfbd87; }
.timeline-date small, .timeline-trigger-meta, .timeline-trigger-meta small { color: #b8b1a3; }
.timeline-rail { background: linear-gradient(#a98c60,#3c4039); }
.timeline-rail span { background: linear-gradient(#d6bd8f,#8da79b); box-shadow: none; }
.timeline-node { border-color: #cfaa70; box-shadow: 0 0 0 4px rgba(207,170,112,.08); }
.timeline-node span { background: #cfaa70; box-shadow: none; }
.timeline-trigger .card-kicker, .timeline-card .card-kicker { color: #c8b997; }
.timeline-card p, .generation-card p, .scale-copy, .video-card-copy > p:not(.card-kicker), .era-description p, .future-lede { color: #d1cfc5; }
.timeline-card h3, .generation-card h3, .video-card-copy h3, .era-description h3, .part-info-panel h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; }
.timeline-chevron { color: #dfbd87; border-color: rgba(220,183,123,.34); }
.timeline-card.is-open .timeline-chevron { border-color: #cfaa70; background: rgba(207,170,112,.12); }
.fact-tags span { color: #d8cdb7; border-color: rgba(207,195,165,.28); border-radius: 4px; }
.evolution-ribbon article { background: rgba(26,31,28,.87); }
.evolution-ribbon article::after { border-color: rgba(220,183,123,.12); box-shadow: 0 0 0 12px rgba(220,183,123,.018),0 0 0 26px rgba(169,196,182,.018); }
.evolution-ribbon article:hover { border-color: rgba(220,183,123,.48); box-shadow: 0 12px 28px rgba(0,0,0,.23); }
.evolution-index, .generation-number, .gen-caption { color: #dfbd87; }
.evolution-ribbon p, .generation-number, .generation-years { color: #c3bdaf; }
.filter-button { border-radius: 5px; border-color: rgba(207,195,165,.25); color: #d0cabb; }
.filter-button:hover, .filter-button.active { color: #f1d29a; border-color: rgba(220,183,123,.62); background: rgba(220,183,123,.1); box-shadow: none; }
.video-card { overflow: hidden; }
.video-frame { border-radius: 0; }
.video-index { color: #efe3cd; background: rgba(17,21,19,.78); }
.video-card-copy a, .source-column a:hover { color: #e4c68f; }
.scene-shell, .lab-controls { background: #171b19; }
.scene {
  background:
    linear-gradient(180deg,transparent 71%,rgba(178,159,125,.055) 71.2%,transparent 71.6%),
    radial-gradient(ellipse at 50% 58%,#30342e 0,#222722 46%,#171b19 84%);
}
.scene-stars { display: none; }
.scene-grid {
  animation: none;
  opacity: .24;
  background-image: linear-gradient(rgba(204,189,156,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(204,189,156,.11) 1px,transparent 1px);
}
.scene-world { animation: none; }
.scene-topbar, .scene-footer { color: #c6bdab; }
.scene-topbar { border-bottom-color: rgba(207,195,165,.17); }
.scene-footer { border-top-color: rgba(207,195,165,.17); }
.scene-hint, .scene-coordinates { color: #c3bdaf; }
.scene-hint span, .scene-coordinates span { color: #dfbd87; }

/* Keep the whole machine in one predictable 3D coordinate space. Hotspots now
   share its coordinate system, so they stay on the right component as it turns. */
.computer-model {
  width: 420px;
  height: 330px;
  --case: #c2b394;
  --case-side: #7c705d;
  --screen: #14201b;
  --glow: #d9c691;
  --chip: #bca779;
  transform: scale(var(--model-scale,1)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: center center;
}
.computer-model > .monitor { left: 22px; top: 6px; width: 238px; height: 180px; transform: none; }
.computer-model .monitor-back { transform: none; border-radius: 15px 15px 11px 11px; background: linear-gradient(105deg,#d0c09d,#a99a79 56%,#82765f); box-shadow: 10px 12px 0 #6d6656, inset -8px 0 rgba(50,45,35,.18); }
.computer-model .monitor-face { inset: 9px 11px 17px; border: 8px solid #84785f; border-radius: 13px 13px 9px 9px; transform: none; background: #111713; box-shadow: inset 0 0 0 1px #c9ba98; }
.computer-model .screen-content { width: 83%; height: 78%; background: #101a15; box-shadow: inset 0 0 0 1px rgba(216,197,146,.2); color: #d8c996; text-shadow: none; font-size: 10px; }
.computer-model .screen-prompt { font-size: 13px; }
.computer-model .screen-lines { color: #b7b49d; font-size: 9px; }
.computer-model .screen-cursor { background: #d8c996; animation-duration: 1.5s; }
.computer-model .monitor-neck { left: 82px; width: 68px; background: #a99a79; transform: none; }
.computer-model .monitor-foot { left: 52px; width: 130px; background: linear-gradient(#d0c09d,#887b60); transform: none; }
.computer-model > .keyboard { left: 47px; top: 223px; width: 235px; height: 58px; padding: 10px; gap: 4px; border-color: #74684f; border-radius: 5px; background: linear-gradient(145deg,#c7b48e,#918269); transform: perspective(480px) rotateX(39deg) translateZ(8px); box-shadow: 2px 8px 0 #625743; z-index: 4; }
.computer-model .keyboard span { background: #383a36; box-shadow: 0 1px 0 #d0c4a8; }
.computer-model > .tower { left: 272px; top: 148px; width: 124px; height: 70px; border-radius: 4px; border-color: #cdbd98; background: linear-gradient(95deg,#756c5a,#b7a885 55%,#82765f); transform: none; box-shadow: 7px 7px 0 #625947; z-index: 2; }
.computer-model .tower-slot { height: 6px; width: 39px; margin-top: 11px; border-color: #c4b38d; background: #373933; }
.computer-model .tower-light { background: #d9bf82; box-shadow: none; margin-top: 6px; }
.computer-model > .cpu-chip {
  left: 254px;
  top: 128px;
  width: 51px;
  height: 42px;
  transform: none;
  z-index: 5;
  border-color: #d3b877;
  border-radius: 3px;
  background: linear-gradient(145deg,#62553c,#262822);
  color: #e1d3ab;
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
  font-size: 8px;
}
.computer-model .cpu-chip b { margin: 0; color: #eee0b4; font-size: 12px; }
.computer-model .cpu-chip i { color: #c5b995; font-size: 7px; }
.computer-model .board-label { bottom: -4px; left: 70px; color: #d6c7a4; font-size: 8px; transform: none; }
.scene-topbar, .scene-footer { font: 500 10px/1.5 var(--sans); letter-spacing: .055em; }
.scene-footer { flex-wrap: wrap; gap: 8px 20px; }
.scene-footer b { background: #c9a66e; }
.pink-square, .blue-square { background: #a5b2a3; }
.scene-note { margin: 0; padding: 9px 16px 0; color: #aaa495; font-size: 11px; line-height: 1.6; }
.component-hotspots { z-index: 10; }
.hotspot-screen { left: 35%; top: 27%; }
.hotspot-cpu { left: 62%; top: 40%; }
.hotspot-storage { left: 76%; top: 53%; }
.hotspot-keyboard { left: 42%; top: 73%; }
.part-hotspot {
  width: 32px;
  height: 32px;
  border-color: #eee1c4;
  background: rgba(34,35,29,.92);
  color: #f2d49a;
  box-shadow: 0 1px 4px rgba(0,0,0,.34);
  animation: none;
}
.part-hotspot:hover, .part-hotspot.selected { color: #211d15; background: #e3c58e; transform: scale(1.08); }
.part-hotspot i { border-color: rgba(230,209,164,.45); }
.part-hotspot::after { color: #eee4d0; background: rgba(29,31,27,.95); border-color: rgba(220,183,123,.35); padding: 5px 7px; font-size: 9px; opacity: 1; }
.part-hotspot:hover::after, .part-hotspot.selected::after { color: #fff8e9; }
.part-info-panel { border-color: rgba(220,183,123,.48); border-radius: 7px; background: rgba(22,25,22,.97); box-shadow: 0 13px 32px rgba(0,0,0,.38); }
.part-info-panel .mono-label { color: #dfbd87; }
.part-info-panel h3 { color: #f1eee6; }
.part-info-close { border-color: rgba(207,195,165,.3); color: #ded6c6; }
.part-info-close:hover { border-color: #dfbd87; color: #dfbd87; }
.computer-model[data-model="early"] > .monitor { transform: none; }
.computer-model[data-model="early"] > .monitor { left: 28px; top: 31px; width: 220px; height: 172px; }
.computer-model[data-model="early"] .monitor-back { border-radius: 2px; background: linear-gradient(100deg,#69736c,#92978a 55%,#555f58); box-shadow: 8px 9px 0 #454b44; }
.computer-model[data-model="early"] .monitor-face { inset: 8px; border: 5px solid #565e56; border-radius: 2px; background: #111713; }
.computer-model[data-model="early"] .monitor-neck,
.computer-model[data-model="early"] .monitor-foot { display: none; }
.computer-model[data-model="early"] > .tower { width: 112px; height: 220px; top: 28px; left: 282px; border-radius: 2px; background: linear-gradient(95deg,#4e5b53,#7d887d 55%,#465149); box-shadow: 8px 8px 0 #3d443e; }
.computer-model[data-model="early"] .tower-slot { width: 50px; height: 8px; border-color: #b6b39c; }
.computer-model[data-model="early"] > .keyboard { top: 251px; left: 45px; width: 218px; height: 43px; transform: perspective(480px) rotateX(24deg); background: repeating-linear-gradient(90deg,#434d45 0 9px,#a9a792 9px 11px); }
.computer-model[data-model="early"] .keyboard span { display: none; }
.computer-model[data-model="early"] > .cpu-chip { left: 266px; top: 245px; }
.computer-model[data-model="early"] .hotspot-screen { left: 37%; top: 36%; }
.computer-model[data-model="early"] .hotspot-cpu { left: 69%; top: 72%; }
.computer-model[data-model="early"] .hotspot-storage { left: 81%; top: 47%; }
.computer-model[data-model="early"] .hotspot-keyboard { left: 41%; top: 76%; }
.computer-model[data-model="modern"] > .monitor { left: 22px; top: 6px; width: 280px; height: 168px; }
.computer-model[data-model="modern"] .monitor-back { border-radius: 7px; box-shadow: 8px 8px 0 var(--case-side); }
.computer-model[data-model="modern"] .monitor-face { inset: 7px; border-width: 5px; border-radius: 5px; }
.computer-model[data-model="modern"] .monitor-neck,
.computer-model[data-model="modern"] .monitor-foot,
.computer-model[data-model="modern"] > .tower { display: none; }
.computer-model[data-model="modern"] > .keyboard { left: 42px; top: 221px; width: 260px; background: linear-gradient(145deg,#bbbcb1,#7d8178); }
.computer-model[data-model="modern"] > .cpu-chip { left: 312px; top: 80px; background: #35443c; border-color: #9cb4a4; color: #e1e7dd; box-shadow: 2px 3px 0 rgba(0,0,0,.35); }
.computer-model[data-model="modern"] .hotspot-screen { left: 48%; top: 28%; }
.computer-model[data-model="modern"] .hotspot-cpu { left: 75%; top: 31%; }
.computer-model[data-model="modern"] .hotspot-storage { left: 70%; top: 53%; }
.computer-model[data-model="modern"] .hotspot-keyboard { left: 43%; top: 73%; }
.computer-model[data-model="modern"] .cpu-chip b { color: #edf3e9; }
.computer-model[data-model="modern"] .cpu-chip i { color: #c2cec2; }
.computer-model.focus-screen .monitor-face { box-shadow: inset 0 0 0 2px #e0c890,0 0 0 3px rgba(224,200,144,.22); }
.computer-model.focus-cpu .cpu-chip { animation: focusPulse .55s ease-in-out 2; }
.computer-model.focus-storage > .tower { outline: 2px solid #e0c890; outline-offset: 3px; filter: none; }
.computer-model[data-model="modern"].focus-storage .monitor-back { outline: 2px solid #e0c890; filter: none; }
.computer-model.focus-keyboard > .keyboard { outline: 2px solid #e0c890; outline-offset: 2px; filter: none; }
@keyframes focusPulse { 50% { transform: translateY(-3px); box-shadow: 3px 5px 0 rgba(0,0,0,.3),0 0 0 3px rgba(224,200,144,.25); } }
.future-grid-bg { opacity: .055; }
.future-ring { border-color: rgba(220,183,123,.19); }
.future-ring.ring-b { border-color: rgba(169,196,182,.2); }
.future-core { border-radius: 50%; border-color: rgba(220,183,123,.42); background: radial-gradient(circle,#292922,#171916 72%); box-shadow: 0 10px 35px rgba(0,0,0,.32); }
.future-orbit-dot { background: #d4ac6d; box-shadow: 0 0 10px rgba(212,172,109,.42); }
.future-core span { color: #e0c48d; }
.future-core i { color: #b7c8ba; }
.sources-details summary b { font-family: var(--serif); }
.source-column a { color: #d2ccbd; }
.source-note { color: #b9b4a8; }

@media (max-width: 930px) {
  .computer-model { --model-scale: .82; }
}
@media (max-width: 680px) {
  .computer-model { --model-scale: .73; }
  .part-hotspot { width: 29px; height: 29px; }
  .part-hotspot::after { font-size: 8px; }
  .part-info-panel { width: min(255px,64%); }
  .scene { height: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-grid, .scene-world, .part-hotspot, .live-dot, .hero-chip { animation: none !important; }
}

/* Component inspection is a separate panel; it no longer covers the model. */
.lab-controls { border-color: rgba(220,183,123,.25); }
.era-button { border-bottom-color: rgba(207,195,165,.2); color: #ddd6c8; }
.era-button.active, .era-button:hover {
  border-color: rgba(220,183,123,.55);
  background: rgba(220,183,123,.09);
  color: #f1e6d0;
}
.era-dot { border-color: #a69c88; }
.era-button.active .era-dot { background: #d5b476; border-color: #d5b476; box-shadow: 0 0 0 3px rgba(213,180,118,.14); }
.era-button small { color: #beb7a9; }
.era-arrow, .description-index { color: #dfbd87; }
.era-description { border-top-color: rgba(207,195,165,.22); }
.lab-tip { border-color: rgba(207,195,165,.2); border-radius: 7px; background: #20231f; }
.lab-tip > span { color: #dfbd87; }
.part-info-panel {
  position: relative;
  inset: auto;
  display: none;
  width: 100%;
  max-width: none;
  margin: 16px 0 20px;
  padding: 20px 20px 18px;
  grid-template-columns: minmax(0,1fr);
  gap: 5px;
  opacity: 1;
  visibility: visible;
  transform: none;
  overflow: visible;
  border: 1px solid rgba(220,183,123,.35);
  border-left: 3px solid #c5a56d;
  border-radius: 6px;
  background: linear-gradient(135deg,#22241f,#191c19);
  box-shadow: 0 9px 24px rgba(0,0,0,.2);
  backdrop-filter: none;
}
.part-info-panel.visible { display: grid; opacity: 1; visibility: visible; transform: none; }
.part-info-panel .mono-label { margin: 0 32px 4px 0; color: #dfbd87; font-size: 10px; }
.part-info-panel h3 { margin: 0 26px 6px 0; color: #f2eee3; font-size: 22px; line-height: 1.25; }
.part-info-panel > p:last-child { margin: 0; color: #d3cec2; font-size: 14px; line-height: 1.75; }
.part-info-close { top: 12px; right: 12px; width: 27px; height: 27px; border-radius: 4px; }
.component-hotspots { z-index: 10; }
.part-hotspot { width: 34px; height: 34px; border: 1px solid #e4d3ad; color: #241f17; background: #e0c58e; font-size: 10px; }
.part-hotspot:hover, .part-hotspot.selected { background: #f1ddb2; transform: scale(1.12); }
.part-hotspot::after { opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .16s,transform .16s,visibility .16s; }
.part-hotspot:hover::after, .part-hotspot.selected::after { opacity: 1; visibility: visible; transform: translateX(0); }
.computer-model .screen-content::after {
  content: attr(data-inspect);
  position: absolute;
  inset: 7px;
  display: none;
  place-content: center;
  padding: 6px;
  border: 1px solid rgba(224,200,144,.45);
  background: rgba(15,25,20,.97);
  color: #e8d5a2;
  font: 9px/1.7 var(--mono);
  text-align: center;
  white-space: pre-line;
  text-shadow: none;
}
.computer-model.focus-screen .screen-content { background: #101d17; }
.computer-model.focus-screen .screen-content::after { display: grid; }
.computer-model.focus-screen .screen-prompt,
.computer-model.focus-screen .screen-lines,
.computer-model.focus-screen .screen-cursor { opacity: 0; }
.computer-model.focus-screen .monitor-face { outline: 3px solid #e0c890; outline-offset: 3px; box-shadow: inset 0 0 0 2px #e0c890; }
.computer-model.focus-cpu > .cpu-chip { outline: 3px solid #e0c890; outline-offset: 3px; transform: translateY(-5px) scale(1.16); }
.computer-model.focus-storage > .tower { outline: 3px solid #e0c890; outline-offset: 3px; box-shadow: 8px 8px 0 #5e5542,0 0 0 6px rgba(224,200,144,.12); }
.computer-model[data-model="modern"].focus-storage .monitor-back { outline: 3px solid #e0c890; outline-offset: 3px; }
.computer-model.focus-keyboard > .keyboard { outline: 3px solid #e0c890; outline-offset: 3px; transform: perspective(480px) rotateX(39deg) translateZ(18px); }
.computer-model.focus-keyboard .keyboard span { background: #e1ca97; box-shadow: 0 1px 0 #fff0c6; }
.computer-model[data-model="early"].focus-keyboard > .keyboard { transform: perspective(480px) rotateX(24deg) translateZ(14px); }
.computer-model[data-model="early"].focus-keyboard .keyboard span { display: none; }
.scene-note { padding-top: 12px; font-size: 12px; }
.scene-footer { padding-top: 13px; padding-bottom: 15px; color: #ded6c5; }
@media (max-width: 680px) {
  .part-info-panel { width: 100%; max-width: none; margin-top: 13px; padding: 17px; }
  .part-info-panel h3 { font-size: 20px; }
  .part-info-panel > p:last-child { font-size: 13px; }
  .part-hotspot { width: 29px; height: 29px; }
  .computer-model .screen-content::after { font-size: 8px; }
}

/* Editorial refresh: stronger type, clearer contrast, luminous glass panels. */
:root {
  --mint: #91ffd0;
  --cyan: #80eaff;
  --purple: #aa9bff;
  --muted: #b1bdcf;
  --line: rgba(181, 202, 225, .19);
}
body { font-size: 16px; }
body::before {
  background-image:
    linear-gradient(180deg,rgba(5,9,17,.7),rgba(6,10,19,.84) 36%,rgba(6,10,19,.78) 72%,rgba(5,8,15,.88)),
    radial-gradient(ellipse at 16% 5%,rgba(77,217,210,.12),transparent 40%),
    radial-gradient(ellipse at 88% 39%,rgba(133,108,255,.12),transparent 38%),
    url("https://images.unsplash.com/photo-1631375937044-6dd5beac01d2?auto=format&fit=crop&fm=jpg&q=82&w=2600");
  background-size: 100% 100%,100% 100%,100% 100%,cover;
}
.site-header {
  background: rgba(6,10,18,.84);
  border-bottom-color: rgba(139,231,231,.14);
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.brand-mark { font-size: 19px; }
.brand-name { font-size: 10px; }
.main-nav { gap: clamp(13px,2vw,30px); }
.main-nav a { font-size: 13px; color: #c1cada; }
.presentation-button { border-radius: 999px; font-size: 11px; padding: 11px 15px; }
.hero { min-height: 740px; }
.hero h1 { font-size: clamp(58px,7vw,92px); }
.hero-lede { max-width: 600px; color: #c0cbd9; font-size: 18px; line-height: 1.8; }
.hero-actions { gap: 22px; }
.primary-link { border-radius: 999px; padding: 16px 20px; font-size: 14px; box-shadow: 0 8px 35px rgba(141,244,191,.11); }
.reading-time { font-size: 10px; color: #aab6c7; }
.hero-stat-row { max-width: 590px; }
.hero-stat-row strong { font-size: 27px; }
.hero-stat-row small { max-width: 155px; color: #a1aec1; font: 10px/1.55 var(--mono); }
.hero-image-main { border-radius: 14px; box-shadow: 0 26px 90px rgba(0,0,0,.58),0 0 34px rgba(110,231,239,.08); }
.hero-image-small { border-radius: 12px; }
.hero-chip { border-radius: 16px; }
.image-label { font-size: 10px; }
.hero-caption { font-size: 9px; }
.scroll-cue { font-size: 9px; }
.eyebrow, .mono-label, .card-kicker { font-size: 11px; }
.section-heading h2 { font-size: clamp(44px,5.4vw,68px); }
.muted-heading { color: #a2aec4; }
.section-intro { max-width: 760px; color: #bac6d7; font-size: 17px; line-height: 1.85; }
.journey-section { padding-top: 126px; }
.evolution-ribbon {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin-top: 35px;
}
.evolution-ribbon article {
  position: relative;
  min-height: 158px;
  padding: 22px 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(141,171,207,.2);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(20,34,49,.9),rgba(11,17,29,.78));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: transform .3s,border-color .3s,box-shadow .3s;
}
.evolution-ribbon article::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -45px;
  bottom: -53px;
  border: 1px solid rgba(128,234,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(128,234,255,.025),0 0 0 26px rgba(170,155,255,.025);
}
.evolution-ribbon article:hover { transform: translateY(-5px); border-color: rgba(145,255,208,.42); box-shadow: 0 18px 44px rgba(0,0,0,.25),0 0 28px rgba(110,231,239,.07); }
.evolution-index { display: block; margin-bottom: 20px; color: var(--cyan); font: 11px var(--mono); }
.evolution-ribbon b { display: block; color: #edf5ff; font: 600 13px var(--sans); letter-spacing: .04em; }
.evolution-ribbon p { margin: 9px 0 0; max-width: 200px; color: #b1bfd0; font-size: 14px; line-height: 1.6; }
.timeline-toolbar { margin-top: 45px; padding-top: 23px; }
.mono-label { color: #9baac0; }
.filter-button {
  border-radius: 999px;
  padding: 10px 15px;
  color: #c1cddd;
  font-size: 12px;
  transition: color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s;
}
.filter-button:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(110,231,239,.08); }
.timeline { padding-left: 205px; }
.timeline-rail { left: 161px; background: linear-gradient(#3d5366,#202d41); }
.timeline-date { left: -205px; width: 137px; font-size: 22px; }
.timeline-date small { color: #9aa8bd; font-size: 10px; line-height: 1.5; }
.timeline-node { border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(128,234,255,.055),0 0 18px rgba(128,234,255,.12); }
.timeline-node span { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.timeline-item { padding-bottom: 28px; }
.timeline-card {
  padding: clamp(24px,3vw,36px);
  border: 1px solid rgba(143,174,209,.22);
  border-radius: 20px;
  background: linear-gradient(130deg,rgba(19,30,45,.96),rgba(10,16,27,.94));
  box-shadow: 0 13px 40px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
}
.timeline-card:hover, .timeline-card.is-open {
  transform: translateY(-2px);
  border-color: rgba(145,255,208,.48);
  box-shadow: 0 22px 58px rgba(0,0,0,.26),0 0 34px rgba(110,231,239,.07),inset 0 1px rgba(255,255,255,.06);
}
.timeline-trigger { min-height: 60px; }
.timeline-trigger-copy { gap: 10px; }
.timeline-trigger .card-kicker, .timeline-card .card-kicker { color: #a5b5c6; font-size: 10px; letter-spacing: .13em; line-height: 1.5; }
.timeline-card:hover .timeline-trigger .card-kicker, .timeline-card.is-open .timeline-trigger .card-kicker { color: var(--mint); }
.timeline-card h3 { max-width: 790px; font-size: clamp(24px,2.7vw,32px); line-height: 1.14; letter-spacing: -.04em; }
.timeline-trigger-meta { gap: 16px; color: #a9b9cb; }
.timeline-trigger-meta small { font-size: 9px; }
.timeline-chevron { width: 34px; height: 34px; font-size: 19px; }
.timeline-card.is-open .timeline-body { max-height: 2400px; margin-top: 22px; }
.timeline-card p { max-width: 860px; color: #c0cada; font-size: 16px; line-height: 1.82; }
.timeline-card .card-note { margin-top: 16px; padding: 12px 0 12px 17px; color: #d1d9e5; border-left-width: 3px; border-color: var(--purple); }
.card-note b { color: #f1f5fc; }
.fact-tags { gap: 8px; margin-top: 21px; }
.fact-tags span { border-radius: 999px; border-color: rgba(135,163,195,.26); color: #c2d0de; padding: 7px 11px; font: 10px var(--mono); }
.timeline-photo { max-width: 720px; margin-top: 22px; }
.timeline-photo img { height: clamp(220px,31vw,360px); border-radius: 14px; filter: saturate(.9) contrast(1.04); }
.timeline-photo span { margin-top: 9px; color: #a0aec1; font: 10px/1.6 var(--mono); }
.turning-section { background: linear-gradient(180deg,rgba(13,21,34,.97),rgba(9,15,26,.97)); }
.generation-grid { gap: 16px; }
.generation-card {
  min-height: 350px;
  padding: 25px 23px;
  border-color: rgba(143,174,209,.21);
  border-radius: 18px;
  background: linear-gradient(150deg,rgba(17,27,42,.92),rgba(9,15,26,.84));
}
.generation-number { color: #90a3bb; font-size: 11px; }
.generation-years { color: #a8b7c9; font-size: 9px; }
.generation-card h3 { margin-top: 19px; font-size: 20px; line-height: 1.2; }
.generation-card p { min-height: 84px; color: #becada; font-size: 15px; line-height: 1.72; }
.gen-caption { color: var(--mint); font-size: 10px; }
.scale-callout { border-radius: 18px; border-color: rgba(143,174,209,.28); background: linear-gradient(115deg,rgba(18,27,41,.92),rgba(23,25,46,.89)); }
.scale-callout h3 { font-size: clamp(23px,2.5vw,30px); }
.scale-copy { color: #c0cada; font-size: 15px; line-height: 1.8; }
.video-card { border-radius: 18px; background: linear-gradient(145deg,rgba(17,27,42,.96),rgba(9,15,25,.96)); }
.video-card:hover { transform: translateY(-7px); border-color: rgba(145,255,208,.42); box-shadow: 0 24px 55px rgba(0,0,0,.3),0 0 30px rgba(110,231,239,.07); }
.video-frame { border-radius: 14px 14px 0 0; }
.video-index { font-size: 9px; }
.video-card-copy { padding: 22px 22px 25px; }
.video-card-copy .card-kicker { font-size: 10px; }
.video-card-copy h3 { font-size: 22px; line-height: 1.2; }
.video-card-copy > p:not(.card-kicker) { min-height: 76px; color: #c0cada; font-size: 15px; line-height: 1.7; }
.video-card-copy a { font-size: 13px; }
.video-footnote { color: #b3c0d0; font-size: 13px; }
.lab-layout { gap: 20px; }
.scene-shell, .lab-controls, .sources-details { overflow: hidden; border-radius: 18px; border-color: rgba(143,174,209,.22); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.scene-topbar, .scene-footer { font-size: 9px; color: #aab8ca; }
.scene-hint { color: #aebbd0; font-size: 9px; }
.scene-coordinates { color: #99a8bf; font-size: 9px; }
.part-hotspot { width: 37px; height: 37px; font-size: 10px; }
.part-hotspot::after { font-size: 9px; padding: 6px 8px; }
.part-info-panel { width: min(270px,48%); border-radius: 14px; }
.part-info-panel .mono-label { font-size: 10px; }
.part-info-panel h3 { font-size: 20px; }
.part-info-panel > p:last-child { color: #c0cada; font-size: 14px; line-height: 1.7; }
.lab-controls { padding: 24px; background: linear-gradient(145deg,rgba(14,23,37,.94),rgba(9,15,25,.93)); }
.lab-controls > .mono-label { font-size: 11px; }
.era-button { border-radius: 11px; padding: 14px 12px; }
.era-button b { font-size: 14px; }
.era-button small { color: #a0aec2; font-size: 10px; }
.era-description h3 { font-size: 24px; }
.era-description p { color: #becada; font-size: 15px; line-height: 1.75; }
.lab-tip { border-radius: 12px; padding: 14px; }
.lab-tip p { color: #bcc8d8; font-size: 13px; line-height: 1.65; }
.lab-tip b { font-size: 9px; }
.future-section { background: radial-gradient(ellipse at 77% 43%,rgba(82,71,168,.24),transparent 42%),linear-gradient(105deg,#111a2a,#090d18 78%); }
.future-content h2 { font-size: clamp(45px,5.4vw,69px); }
.future-lede { color: #c0cada; font-size: 17px; line-height: 1.85; }
.future-prompts div { border-color: #53617a; }
.future-prompts span { font-size: 10px; }
.future-prompts p { color: #d0d8e4; font-size: 14px; line-height: 1.65; }
.closing-line { font-size: 19px; }
.sources-details { overflow: visible; }
.sources-details summary { padding: 24px 27px; }
.sources-details summary .eyebrow { font-size: 10px; }
.sources-details summary b { font-size: 21px; }
.sources-content { background: rgba(10,16,27,.7); }
.source-column .mono-label { font-size: 10px; }
.source-column a { color: #c2cddd; font-size: 14px; line-height: 1.65; }
.source-column a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.source-note { color: #aab7c9; font-size: 12px; line-height: 1.7; }
.site-footer > p { color: #a7b4c7; font-size: 10px; line-height: 1.6; }
.back-top { font-size: 10px; }
.toast { border-radius: 999px; font-size: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

@media (max-width: 1050px) {
  .main-nav { gap: 10px; }
  .main-nav a { font-size: 10px; }
  .evolution-ribbon { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .evolution-ribbon article { min-height: 145px; }
  .timeline { padding-left: 185px; }
  .timeline-rail { left: 146px; }
  .timeline-date { left: -185px; width: 123px; }
}
@media (max-width: 680px) {
  .brand-name { font-size: 8px; }
  .hero { min-height: auto; padding: 83px 19px 77px; }
  .hero h1 { font-size: clamp(48px,13vw,70px); }
  .hero-lede { font-size: 16px; }
  .hero-stat-row { gap: 12px; margin-top: 38px; }
  .hero-stat-row strong { font-size: 22px; }
  .hero-stat-row small { max-width: 104px; font-size: 9px; }
  .section-heading h2, .future-content h2 { font-size: clamp(39px,10vw,53px); }
  .section-intro { font-size: 16px; }
  .journey-section { padding-top: 86px; }
  .evolution-ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 27px; }
  .evolution-ribbon article { min-height: 145px; padding: 17px 14px; border-radius: 14px; }
  .evolution-index { margin-bottom: 15px; }
  .evolution-ribbon b { font-size: 12px; }
  .evolution-ribbon p { font-size: 13px; }
  .evolution-ribbon article:last-child { grid-column: 1 / -1; min-height: auto; }
  .timeline-toolbar { margin-top: 32px; }
  .timeline-toolbar > .mono-label { font-size: 10px; }
  .filter-list { gap: 7px; }
  .filter-button { padding: 9px 12px; font-size: 11px; }
  .timeline { padding-left: 32px; }
  .timeline-rail { left: 5px; }
  .timeline-node { left: -33px; top: 43px; }
  .timeline-date { position: static; width: auto; margin: 2px 0 9px; text-align: left; font-size: 17px; }
  .timeline-date small { margin-left: 7px; font-size: 9px; }
  .timeline-card { padding: 19px 17px; border-radius: 16px; }
  .timeline-trigger { min-height: 52px; gap: 8px; }
  .timeline-trigger-copy { gap: 7px; }
  .timeline-trigger .card-kicker, .timeline-card .card-kicker { font-size: 9px; }
  .timeline-card h3 { font-size: clamp(21px,6vw,25px); }
  .timeline-trigger-meta { gap: 0; }
  .timeline-trigger-meta small { display: none; }
  .timeline-chevron { width: 31px; height: 31px; }
  .timeline-card.is-open .timeline-body { margin-top: 16px; }
  .timeline-card p { font-size: 15px; line-height: 1.76; }
  .fact-tags span { font-size: 9px; }
  .timeline-photo img { height: 205px; }
  .timeline-photo span { font-size: 9px; }
  .generation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .generation-card { min-height: 0; padding: 17px 13px 19px; border-radius: 15px; }
  .generation-years { font-size: 8px; }
  .generation-card h3 { font-size: 16px; }
  .generation-card p { min-height: 0; font-size: 13px; }
  .gen-caption { font-size: 8px; }
  .video-card-copy { padding: 20px; }
  .video-card-copy h3 { font-size: 21px; }
  .video-card-copy > p:not(.card-kicker) { font-size: 15px; }
  .scene { height: 370px; }
  .part-info-panel { width: min(255px,64%); }
  .part-info-panel h3 { font-size: 18px; }
  .part-info-panel > p:last-child { font-size: 13px; }
  .scene-hint { max-width: 240px; font-size: 8px; }
  .era-button b { font-size: 13px; }
  .era-description h3 { font-size: 21px; }
  .era-description p { font-size: 14px; }
  .future-lede { font-size: 16px; }
  .future-prompts p { font-size: 14px; }
  .source-column a { font-size: 14px; }
  .source-note { font-size: 12px; }
  .sources-details summary { padding: 20px; }
  .sources-details summary b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Final interaction layer: keep component details beside the model and make
   the selected screen content visibly replace the idle readout. */
.lab-controls .part-info-panel {
  position: relative;
  inset: auto;
  display: none;
  width: 100%;
  max-width: none;
  margin: 16px 0 18px;
  padding: 19px 48px 19px 20px;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  overflow: visible;
  border: 1px solid rgba(220,183,123,.32);
  border-left: 3px solid #d0ae72;
  border-radius: 9px;
  background: linear-gradient(140deg,rgba(40,39,31,.96),rgba(22,25,24,.97));
  box-shadow: 0 14px 35px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  opacity: 1;
  visibility: visible;
  transform: none;
  backdrop-filter: blur(12px);
}
.lab-controls .part-info-panel.visible {
  display: grid;
  animation: inspectionPanelIn .28s cubic-bezier(.2,.75,.2,1) both;
}
.lab-controls .part-info-panel .mono-label { margin: 0 0 4px; color: #dfbd87; font-size: 10px; letter-spacing: .12em; }
.lab-controls .part-info-panel h3 { margin: 0 0 4px; color: #f2eee3; font-size: 22px; line-height: 1.25; }
.lab-controls .part-info-panel > p:last-child { margin: 0; color: #d3cec2; font-size: 14px; line-height: 1.72; }
.lab-controls .part-info-close { top: 13px; right: 13px; width: 28px; height: 28px; border-radius: 5px; }
@keyframes inspectionPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.component-hotspots { z-index: 10; }
.part-hotspot::after { opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .16s,transform .16s,visibility .16s; }
.part-hotspot:hover::after, .part-hotspot.selected::after { opacity: 1; visibility: visible; transform: translateX(0); }
.hotspot-storage::after { left: auto; right: 37px; transform: translateX(4px); }
.hotspot-storage:hover::after, .hotspot-storage.selected::after { transform: translateX(0); }
.computer-model .screen-content::after {
  content: attr(data-inspect);
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  place-content: center;
  padding: 8px;
  border: 1px solid rgba(224,200,144,.55);
  background: linear-gradient(145deg,rgba(20,33,26,.98),rgba(9,19,14,.98));
  color: #f0dba5;
  font: 9px/1.75 var(--mono);
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 0 10px rgba(240,219,165,.16);
  box-shadow: inset 0 0 24px rgba(224,200,144,.08);
}
.computer-model.focus-screen .screen-content::after { display: grid; }
.computer-model.focus-screen .screen-prompt,
.computer-model.focus-screen .screen-lines,
.computer-model.focus-screen .screen-cursor { opacity: 0; }
.computer-model.focus-screen .monitor-face { outline: 3px solid #e0c890; outline-offset: 3px; }
.computer-model.focus-cpu > .cpu-chip { outline: 3px solid #e0c890; outline-offset: 3px; }
.computer-model.focus-storage > .tower { outline: 3px solid #e0c890; outline-offset: 3px; }
.computer-model[data-model="modern"].focus-storage .monitor-back { outline: 3px solid #e0c890; outline-offset: 3px; }
.computer-model.focus-keyboard > .keyboard { outline: 3px solid #e0c890; outline-offset: 3px; }

@media (max-width: 680px) {
  .lab-controls .part-info-panel { margin: 13px 0 16px; padding: 16px 44px 16px 16px; }
  .lab-controls .part-info-panel h3 { font-size: 20px; }
  .lab-controls .part-info-panel > p:last-child { font-size: 13px; }
  .computer-model .screen-content::after { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-controls .part-info-panel.visible { animation: none; }
}

/* Opening title card: archival colors and the same photographic backdrop as the exhibit. */
body.intro-active { overflow: hidden; }
.intro-cover {
  position: fixed;
  z-index: 70;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  color: #f1eee6;
  background: radial-gradient(ellipse at 82% 47%,rgba(154,133,91,.15),transparent 34%),linear-gradient(120deg,rgba(12,15,14,.985),rgba(18,21,18,.96) 55%,rgba(10,13,13,.985));
  transition: opacity .48s ease,transform .48s ease;
}
.intro-cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .2;
  background: linear-gradient(90deg,rgba(224,210,180,.07) 1px,transparent 1px),linear-gradient(rgba(224,210,180,.07) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg,transparent 4%,black 70%,transparent);
}
.intro-cover-grid { position: absolute; inset: 0; pointer-events: none; }
.intro-cover.is-exiting { opacity: 0; transform: scale(1.018); pointer-events: none; }
.intro-cover-inner { width: min(1380px,100%); min-height: 100svh; margin: 0 auto; padding: 30px clamp(22px,5vw,76px) 20px; display: grid; grid-template-rows: auto 1fr auto; }
.intro-topline, .intro-bottomline { display: flex; align-items: center; justify-content: space-between; color: #aaa696; font: 10px var(--mono); letter-spacing: .13em; }
.intro-topline { min-height: 46px; }
.intro-topline-actions { display: flex; align-items: center; gap: 15px; }
.intro-fullscreen-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 11px;
  border: 1px solid rgba(220,183,123,.35); border-radius: 999px; color: #e2d7c4;
  background: rgba(8,12,10,.45); font: 9px var(--mono); letter-spacing: .08em; cursor: pointer;
  transition: color .2s,border-color .2s,background .2s;
}
.intro-fullscreen-button:hover, .intro-fullscreen-button:focus-visible {
  color: #fff1d1; border-color: #d7b97e; background: rgba(220,183,123,.12); outline: none;
}
.fullscreen-notice {
  position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: calc(100vw - 32px);
  padding: 13px 18px; border: 1px solid rgba(220,183,123,.42); border-radius: 999px;
  color: #f1eee6; background: rgba(10,14,13,.94); box-shadow: 0 12px 38px rgba(0,0,0,.4);
  font: 13px/1.5 var(--sans); text-align: center; opacity: 0; pointer-events: none;
  transform: translate(-50%,12px); transition: opacity .22s,transform .22s;
}
.fullscreen-notice.is-visible { opacity: 1; transform: translate(-50%,0); }
.intro-brand { display: inline-flex; align-items: center; gap: 12px; color: #aaa696; font-size: 8px; line-height: 1.55; }
.intro-brand-mark { color: #dfbd87; font-size: 21px; letter-spacing: -.12em; }
.intro-brand-mark span { padding: 0 3px; color: #756b57; }
.intro-brand b { color: #f1eee6; font-weight: 500; }
.intro-edition { color: #858477; }
.intro-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: clamp(30px,6vw,100px); align-items: center; padding: 30px 0 34px; }
.intro-copy { max-width: 680px; }
.intro-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: #c9b58d; font: 10px var(--mono); letter-spacing: .15em; }
.intro-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dcb77b; box-shadow: 0 0 13px rgba(220,183,123,.7); }
.intro-kicker i { color: #726d5f; font-style: normal; }
.intro-copy h1 { margin: 25px 0 19px; color: #f4f0e7; font: 500 clamp(50px,7vw,92px)/.99 var(--serif); letter-spacing: -.055em; }
.intro-copy h1 em { color: #d8bd8d; font-weight: 400; }
.intro-period { color: #b8c5b7; }
.intro-lede { max-width: 550px; margin: 0; color: #c0bcb1; font-size: clamp(14px,1.4vw,17px); line-height: 1.8; }
.intro-credits { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,1.4fr); gap: 22px; margin-top: 29px; padding: 19px 0 17px; border-top: 1px solid rgba(224,210,180,.2); border-bottom: 1px solid rgba(224,210,180,.2); }
.intro-credit-group, .intro-credit-members { min-width: 0; }
.intro-credit-label { display: block; margin-bottom: 9px; color: #d1b985; font: 9px var(--mono); letter-spacing: .12em; }
.intro-credit-group > b { color: #f0ece2; font-size: 13px; font-weight: 500; }
.intro-credit-group > b i { padding: 0 5px; color: #888273; font-style: normal; }
.intro-credit-members ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 17px; margin: 0; padding: 0; list-style: none; }
.intro-credit-members li { display: flex; gap: 8px; min-width: 0; color: #e3dfd5; font-size: 11px; line-height: 1.5; }
.intro-credit-members li span { color: #8f8a7b; font: 9px var(--mono); }
.intro-run-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.intro-run-button { min-height: 62px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 9px; border: 1px solid rgba(220,183,123,.54); border-radius: 8px; color: #f1eee6; background: linear-gradient(135deg,rgba(220,183,123,.15),rgba(29,32,27,.78)); text-align: left; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.045); transition: transform .22s,border-color .22s,background .22s,box-shadow .22s; }
.intro-run-button:hover { transform: translateY(-2px); border-color: #e7c98e; background: linear-gradient(135deg,rgba(220,183,123,.24),rgba(29,32,27,.9)); box-shadow: 0 17px 38px rgba(0,0,0,.32),0 0 25px rgba(220,183,123,.1); }
.intro-run-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 6px; color: #171812; background: #d7b97e; box-shadow: inset 0 1px rgba(255,255,255,.28); }
.intro-run-icon svg { width: 23px; height: 23px; fill: currentColor; transform: translateX(1px); }
.intro-run-button > span:nth-child(2) { display: grid; gap: 5px; }
.intro-run-button b { color: #f3ead9; font: 10px var(--mono); letter-spacing: .07em; }
.intro-run-button small { color: #bcb5a5; font: 8px var(--mono); letter-spacing: .11em; }
.intro-run-arrow { padding-left: 12px; color: #d7b97e; font-size: 17px; }
.intro-run-hint { color: #8e8a7e; font: 8px var(--mono); letter-spacing: .08em; }
.intro-run-hint kbd { margin-right: 6px; padding: 5px 7px; border: 1px solid rgba(224,210,180,.22); border-radius: 4px; color: #cbc3b2; font: 9px var(--mono); }
.intro-visual { position: relative; min-height: 450px; display: grid; place-items: center; perspective: 900px; }
.intro-orbit { position: absolute; width: min(36vw,440px); aspect-ratio: 1.45; border: 1px solid rgba(220,183,123,.18); border-radius: 50%; transform: rotate(-22deg) rotateX(28deg); }
.intro-orbit-a { animation: introOrbit 12s linear infinite; }
.intro-orbit-b { width: min(30vw,360px); border-color: rgba(169,196,182,.16); transform: rotate(33deg) rotateY(55deg); animation: introOrbit 16s linear infinite reverse; }
@keyframes introOrbit { to { rotate: 360deg; } }
.intro-artifact { position: relative; z-index: 1; width: min(100%,400px); height: min(57vh,475px); min-height: 330px; margin: 0; overflow: hidden; border: 1px solid rgba(220,183,123,.38); border-radius: 8px; background: #272720; box-shadow: 0 28px 82px rgba(0,0,0,.55),0 0 40px rgba(220,183,123,.06); transform: rotateY(-8deg) rotateX(2deg); }
.intro-artifact img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 45% center; filter: grayscale(.48) sepia(.25) saturate(.72) contrast(1.05); }
.intro-artifact::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(12,15,14,.04) 26%,rgba(12,15,14,.22) 49%,rgba(12,15,14,.97) 100%); }
.intro-artifact figcaption { position: absolute; z-index: 2; right: 22px; bottom: 24px; left: 22px; display: grid; gap: 8px; }
.intro-artifact figcaption span, .intro-artifact figcaption small { color: #cec3aa; font: 9px var(--mono); letter-spacing: .1em; }
.intro-artifact figcaption b { color: #f3eee3; font: 500 29px/1.1 var(--serif); }
.intro-artifact figcaption small { color: #c0bcb1; font: 11px var(--sans); letter-spacing: 0; }
.intro-visual-stamp { position: absolute; z-index: 2; top: 41px; right: max(0px,calc((100% - 420px)/2 - 18px)); width: 75px; height: 75px; display: grid; place-content: center; gap: 3px; border: 1px solid rgba(220,183,123,.58); border-radius: 50%; color: #e1c48e; background: rgba(24,27,23,.89); transform: rotate(10deg); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.intro-visual-stamp span { font: 24px var(--serif); text-align: center; }
.intro-visual-stamp i { color: #bbb2a0; font: 7px var(--mono); font-style: normal; }
.intro-visual-caption { position: absolute; z-index: 2; bottom: 15px; left: 0; margin: 0; color: #9e998b; font: 8px var(--mono); letter-spacing: .1em; }
.intro-visual-caption span { padding: 0 6px; color: #d6b879; }
.intro-bottomline { min-height: 38px; border-top: 1px solid rgba(224,210,180,.16); color: #8f8c81; font-size: 8px; }
button:focus-visible, a:focus-visible { outline-color: #dfbd87; }

/* The abacus sits in the same perspective stage as the three computer models. */
.computer-model[data-model="abacus"] > .monitor,
.computer-model[data-model="abacus"] > .keyboard,
.computer-model[data-model="abacus"] > .tower,
.computer-model[data-model="abacus"] > .cpu-chip,
.computer-model[data-model="abacus"] > .board-label { display: none; }
.computer-model[data-model="abacus"] .abacus-device { display: block; }
.abacus-device { position: absolute; inset: 0; display: none; transform-style: preserve-3d; }
.abacus-frame { position: absolute; left: 44px; top: 33px; width: 332px; height: 262px; overflow: visible; border: 12px solid #765632; border-radius: 11px; background: linear-gradient(135deg,#c29451,#704c2a 36%,#a77a40 65%,#624323); transform: translateZ(12px) rotateY(-4deg) rotateX(3deg); transform-style: preserve-3d; box-shadow: 12px 14px 0 #3e2e20,0 23px 46px rgba(0,0,0,.36),inset 2px 3px 0 rgba(255,232,181,.46),inset -4px -5px 0 rgba(39,27,17,.54); }
.abacus-face { position: absolute; inset: 9px; border: 1px solid rgba(230,190,119,.4); background: linear-gradient(180deg,#303026,#24251f 49%,#24251f); box-shadow: inset 0 0 26px rgba(0,0,0,.46); transform: translateZ(-2px); }
.abacus-rail { position: absolute; z-index: 3; left: 7px; right: 7px; border: 1px solid #d1a75d; background: linear-gradient(180deg,#e2c27d,#996633 42%,#624323); box-shadow: 0 4px 4px rgba(28,19,11,.5),inset 0 1px rgba(255,239,193,.6); transform: translateZ(19px); }
.abacus-rail-top { top: 5px; height: 13px; }
.abacus-rail-middle { top: 99px; height: 18px; display: grid; place-items: center; color: #402e1c; font: 7px var(--mono); letter-spacing: .13em; }
.abacus-rail-bottom { bottom: 5px; height: 13px; }
.abacus-rods { position: absolute; z-index: 4; inset: 18px 12px 18px; display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); transform-style: preserve-3d; }
.abacus-column { position: relative; min-width: 0; transform-style: preserve-3d; }
.abacus-rod { position: absolute; top: 0; bottom: 0; left: calc(50% - 2px); width: 4px; border: 1px solid #dfc28d; border-radius: 4px; background: linear-gradient(90deg,#6f4d2c,#edd396 42%,#99703e); box-shadow: 0 0 5px rgba(236,204,140,.16); transform: translateZ(9px); }
.abacus-stack { position: absolute; z-index: 2; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translateX(-50%); transform-style: preserve-3d; }
.abacus-stack--upper { top: 7px; }
.abacus-stack--lower { bottom: 7px; }
.abacus-bead { position: relative; z-index: 1; width: 22px; height: 19px; flex: 0 0 19px; padding: 0; border: 1px solid #efd497; border-radius: 6px 6px 8px 8px; color: transparent; background: linear-gradient(145deg,#e8c578 0,#b88745 38%,#76502c 76%,#d2a962 100%); box-shadow: 1px 3px 0 #553a22, inset 1px 1px 0 rgba(255,242,196,.68), inset -2px -2px 3px rgba(50,32,16,.44); cursor: pointer; transform: translateZ(16px); transition: transform .26s cubic-bezier(.2,.75,.2,1),filter .2s,box-shadow .2s; }
.abacus-bead:hover, .abacus-bead:focus-visible { z-index: 5; filter: brightness(1.28); box-shadow: 0 0 0 3px rgba(235,199,126,.2),0 4px 12px rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,242,196,.75); }
.abacus-bead--upper.is-counting { transform: translateY(58px) translateZ(20px); }
.abacus-bead--lower.is-counting { transform: translateY(-39px) translateZ(20px); }
.abacus-engraving { position: absolute; z-index: 5; right: 11px; bottom: -24px; color: #dcc18e; font: 8px var(--mono); letter-spacing: .16em; text-shadow: 0 2px 5px #111; }
.computer-model[data-model="abacus"] .component-hotspots { z-index: 8; }
.computer-model[data-model="abacus"] .hotspot-screen { left: 28%; top: 22%; }
.computer-model[data-model="abacus"] .hotspot-cpu { left: 49%; top: 35%; }
.computer-model[data-model="abacus"] .hotspot-storage { left: 69%; top: 55%; }
.computer-model[data-model="abacus"] .hotspot-keyboard { left: 38%; top: 76%; }
.computer-model[data-model="abacus"].focus-screen .abacus-frame { box-shadow: 0 0 0 4px rgba(224,200,144,.6),12px 14px 0 #3e2e20,0 23px 46px rgba(0,0,0,.36); }
.computer-model[data-model="abacus"].focus-cpu .abacus-rods { filter: drop-shadow(0 0 6px #efd497); }
.computer-model[data-model="abacus"].focus-storage .abacus-bead { filter: brightness(1.22); }
.computer-model[data-model="abacus"].focus-keyboard .abacus-rail-middle { outline: 3px solid #e0c890; outline-offset: 2px; }
.scene-shell.is-abacus .abacus-readout { display: flex; }
.scene-shell.is-abacus .scene-note { color: #bdb29c; }
.abacus-readout { display: none; align-items: center; flex-wrap: wrap; gap: 7px 15px; min-height: 58px; padding: 10px 15px; border-top: 1px solid rgba(207,195,165,.17); color: #c6bdab; background: #191c19; }
.abacus-readout > span { color: #d6b879; font: 8px var(--mono); letter-spacing: .1em; }
.abacus-readout output { color: #f0e6d0; font: 16px var(--mono); letter-spacing: .14em; }
.abacus-readout small { flex-basis: 100%; color: #aaa495; font: 9px var(--sans); }

/* Make all four component choices readable and thumb-friendly. */
.era-button { min-height: 66px; gap: 11px; padding: 12px 12px; }
.era-index { width: 25px; flex: 0 0 25px; color: #d6b879; font: 11px var(--mono); }
.era-button-copy { display: grid; gap: 5px; flex: 1; }
.era-button-copy b { font-size: 14px; }
.era-button-copy small { color: #bbb5a9; font: 10px var(--mono); }
.era-dot { width: 9px; height: 9px; flex: 0 0 9px; }
.abacus-mode-button { width: 100%; min-height: 65px; display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 11px 13px; border: 1px solid rgba(220,183,123,.32); border-radius: 8px; color: #e8e0d0; text-align: left; background: linear-gradient(120deg,rgba(220,183,123,.08),rgba(27,30,27,.75)); cursor: pointer; transition: background .2s,border-color .2s,transform .2s; }
.abacus-mode-button:hover, .abacus-mode-button.active { border-color: rgba(220,183,123,.72); background: rgba(220,183,123,.13); transform: translateY(-1px); }
.abacus-mode-button > span:nth-child(2) { display: grid; flex: 1; gap: 5px; }
.abacus-mode-button b { color: #f2e7d2; font-size: 14px; font-weight: 500; }
.abacus-mode-button small { color: #bcb5a7; font: 9px var(--mono); }
.abacus-mode-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(220,183,123,.45); border-radius: 50%; color: #d6b879; font-size: 21px; }
.part-legend.scene-footer { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); justify-content: stretch; gap: 8px; padding: 11px 13px; }
.part-legend-button { min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(207,195,165,.22); border-radius: 6px; color: #d6d0c3; background: rgba(14,17,15,.58); text-align: left; cursor: pointer; transition: transform .18s,border-color .18s,background .18s,color .18s; }
.part-legend-button:hover, .part-legend-button.selected { transform: translateY(-1px); border-color: rgba(220,183,123,.68); color: #fff4df; background: rgba(220,183,123,.11); }
.part-number { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid rgba(220,183,123,.48); border-radius: 50%; color: #e2c88f; font: 11px var(--mono); }
.part-name { overflow: hidden; color: inherit; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; }
.part-hotspot { width: 46px; height: 46px; border-width: 2px; color: #f5e4bd; font-size: 13px; font-weight: 500; box-shadow: 0 3px 12px rgba(0,0,0,.5),0 0 0 4px rgba(220,183,123,.12); }
.part-hotspot:hover, .part-hotspot.selected { color: #171711; background: #f0d398; }
.part-hotspot::after { top: 50%; left: 51px; padding: 7px 9px; border-radius: 4px; font-size: 10px; transform: translateY(-50%) translateX(-4px); }
.part-hotspot:hover::after, .part-hotspot.selected::after { transform: translateY(-50%); }
.hotspot-storage::after { left: auto; right: 51px; transform: translateY(-50%) translateX(4px); }
.hotspot-storage:hover::after, .hotspot-storage.selected::after { transform: translateY(-50%); }
.lab-controls .part-info-panel { margin-top: 15px; }

@media (max-width: 880px) {
  .intro-layout { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: 27px; }
  .intro-visual { min-height: 380px; }
  .intro-artifact { min-height: 310px; }
  .intro-copy h1 { font-size: clamp(49px,8vw,72px); }
  .intro-credit-members ul { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 680px) {
  .intro-cover-inner { min-height: 100svh; padding: 18px 20px 14px; }
  .intro-topline { min-height: 35px; }
  .intro-edition { font-size: 8px; }
  .intro-topline-actions { gap: 7px; }
  .intro-fullscreen-button { min-height: 32px; gap: 5px; padding: 0 8px; font-size: 7px; }
  .intro-layout { grid-template-columns: 1fr; gap: 22px; padding: 27px 0 22px; }
  .intro-copy h1 { margin: 20px 0 14px; font-size: clamp(47px,13vw,66px); }
  .intro-lede { font-size: 14px; line-height: 1.7; }
  .intro-credits { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; padding: 15px 0; }
  .intro-credit-members ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .intro-run-row { gap: 11px; margin-top: 18px; }
  .intro-run-button { min-height: 58px; gap: 10px; padding-right: 12px; }
  .intro-run-button b { font-size: 9px; }
  .intro-run-hint { font-size: 7px; }
  .intro-visual { min-height: 245px; }
  .intro-orbit { width: 87vw; }
  .intro-orbit-b { width: 72vw; }
  .intro-artifact { width: min(73vw,310px); height: 240px; min-height: 0; }
  .intro-artifact figcaption { right: 15px; bottom: 15px; left: 15px; }
  .intro-artifact figcaption b { font-size: 23px; }
  .intro-visual-stamp { top: 4px; right: 5%; width: 60px; height: 60px; }
  .intro-visual-caption { bottom: -3px; font-size: 7px; }
  .intro-bottomline { gap: 7px; font-size: 7px; }
  .intro-bottomline span:nth-child(2) { display: none; }
  .era-button { min-height: 62px; }
  .era-button-copy b, .abacus-mode-button b { font-size: 13px; }
  .part-legend.scene-footer { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; }
  .part-legend-button { min-height: 46px; }
  .part-hotspot { width: 44px; height: 44px; }
  .abacus-frame { left: 40px; width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cover, .intro-orbit-a, .intro-orbit-b { animation: none; transition-duration: .01ms; }
}

/* Page 2 footer navigation back to the separate introduction page. */
.footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.back-to-intro {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 10px;
  padding: 0 17px; border: 1px solid rgba(214,181,116,.58); border-radius: 999px;
  color: #d7b97e; background: linear-gradient(135deg,rgba(214,181,116,.12),rgba(8,11,19,.5));
  font: 10px var(--mono); letter-spacing: .1em; white-space: nowrap;
  transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.back-to-intro span { font: 18px var(--sans); line-height: 1; }
.back-to-intro:hover, .back-to-intro:focus-visible {
  color: #fff4d9; border-color: #d7b97e; background: rgba(214,181,116,.2);
  box-shadow: 0 0 24px rgba(214,181,116,.12); transform: translateY(-2px);
}
.back-to-intro:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (max-width: 680px) {
  .footer-actions { width: 100%; justify-content: space-between; gap: 9px; }
  .back-to-intro { min-height: 42px; padding: 0 12px; font-size: 9px; }
}


/* Reusable 3D image turntable controlled by pointer, touch, or arrow keys. */
.interactive-gallery {
  position: relative; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab;
  transform-style: preserve-3d; outline: none;
}
.interactive-gallery.is-dragging { cursor: grabbing; }
.interactive-gallery:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
.interactive-gallery [data-gallery-tilt] {
  position: absolute; inset: 0; transform: rotateX(var(--gallery-x,0deg)) rotateY(var(--gallery-y,0deg));
  transform-style: preserve-3d; transition: transform .16s ease-out;
}
.interactive-gallery.is-dragging [data-gallery-tilt] { transition: none; }
.gallery-track { position: absolute; inset: 0; transform-style: preserve-3d; animation: galleryAutoSpin 38s linear infinite; }
.interactive-gallery.is-dragging .gallery-track { animation-play-state: paused; }
@keyframes galleryAutoSpin { to { transform: rotateY(360deg); } }
.gallery-controls {
  position: absolute; z-index: 8; display: flex; align-items: center; gap: 8px;
  color: #bac7d6; font: 8px var(--mono); letter-spacing: .08em; pointer-events: none;
}
.gallery-controls output { padding: 6px 8px; border: 1px solid rgba(167,190,214,.25); border-radius: 5px; color: var(--mint); background: rgba(7,12,19,.82); font: 8px var(--mono); white-space: nowrap; }
.gallery-reset {
  width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(220,183,123,.52);
  border-radius: 50%; color: #e4c78f; background: rgba(8,12,18,.88); font-size: 18px; cursor: pointer;
  pointer-events: auto; transition: transform .2s,background .2s,border-color .2s;
}
.gallery-reset:hover, .gallery-reset:focus-visible { transform: rotate(-35deg); border-color: var(--mint); background: #111c25; }

/* Page 1: nine milestones orbit as a draggable 3D photo carousel. */
.intro-visual { perspective: 1050px; }
.intro-carousel {
  position: relative; z-index: 2; width: 100%; height: 390px; overflow: visible;
}
.intro-gallery-tilt { perspective: 1050px; }
.intro-carousel-track { animation-duration: 46s; }
.intro-carousel-card {
  position: absolute; top: 50%; left: 50%; width: 152px; height: 234px; overflow: hidden;
  margin: -117px 0 0 -76px; border: 1px solid rgba(220,183,123,.58); border-radius: 12px;
  background: #171a18; box-shadow: 0 18px 52px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.18);
  transform: rotateY(var(--panel-angle)) translateZ(200px); transform-style: preserve-3d; backface-visibility: hidden;
}
.intro-carousel-card::before, .archive-gallery-card::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,rgba(255,255,255,.19),transparent 23%,transparent 76%,rgba(255,255,255,.06)),linear-gradient(180deg,transparent 32%,rgba(7,10,15,.96) 100%);
}
.intro-carousel-card img, .archive-gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05); }
.intro-carousel-card figcaption, .archive-gallery-card figcaption {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px; display: grid; gap: 7px;
}
.intro-carousel-card figcaption span, .archive-gallery-card figcaption span { color: #dfc791; font: 8px var(--mono); letter-spacing: .12em; }
.intro-carousel-card figcaption b, .archive-gallery-card figcaption b { color: #f5f0e6; font: 500 22px/1.08 var(--serif); }
.intro-carousel-card figcaption small, .archive-gallery-card figcaption small { color: #c1bdaf; font: 9px/1.5 var(--sans); }
.intro-gallery-controls { top: 12px; left: 10px; }
.intro-gallery-controls > span { color: #d8c9a7; text-shadow: 0 2px 9px #080b13; }
.intro-visual-caption { max-width: 100%; }

/* Page 2: a second, fully draggable 3D carousel adds three archive photographs. */
.archive-gallery {
  margin-top: 68px; padding: 34px 30px 22px; border: 1px solid rgba(143,174,209,.2); border-radius: 22px;
  background: radial-gradient(ellipse at 50% 60%,rgba(69,113,139,.17),transparent 56%),linear-gradient(145deg,rgba(17,28,44,.85),rgba(9,15,25,.78));
  box-shadow: 0 22px 65px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);
}
.archive-gallery-heading { max-width: 700px; margin: 0 auto; text-align: center; }
.archive-gallery-heading .card-kicker { margin: 0 0 9px; color: var(--cyan); font-size: 10px; }
.archive-gallery-heading h3 { margin: 0; color: #f0f4fa; font: 500 clamp(25px,3vw,36px)/1.15 var(--serif); }
.archive-gallery-heading > p:last-child { margin: 11px 0 0; color: #a8b6c9; font-size: 14px; line-height: 1.65; }
.archive-gallery-stage {
  width: 100%; height: 445px; max-width: 1040px; margin: 12px auto 0; perspective: 1150px;
  border-radius: 18px; background: radial-gradient(ellipse at 50% 52%,rgba(87,147,170,.13),transparent 58%);
}
.archive-gallery-tilt { perspective: 1150px; }
.archive-gallery-track { animation-duration: 42s; }
.archive-gallery-card {
  position: absolute; top: 50%; left: 50%; width: 225px; height: 338px; overflow: hidden;
  margin: -169px 0 0 -112.5px; border: 1px solid rgba(141,244,191,.42); border-radius: 15px;
  background: #111b28; box-shadow: 0 24px 66px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.12);
  transform: rotateY(var(--panel-angle)) translateZ(248px); transform-style: preserve-3d; backface-visibility: hidden;
}
.archive-gallery-card figcaption { right: 15px; bottom: 15px; left: 15px; gap: 6px; }
.archive-gallery-card figcaption b { font-size: 26px; }
.archive-gallery-card figcaption small { min-height: 29px; }
.archive-gallery-card figcaption a { width: fit-content; margin-top: 3px; color: #9fe8d3; font: 8px/1.5 var(--mono); text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
.archive-gallery-card figcaption a:hover { color: white; }
.archive-gallery-controls { right: 17px; bottom: 16px; left: 17px; justify-content: space-between; }
.archive-gallery-controls > span { padding: 7px 9px; border: 1px solid rgba(167,190,214,.2); border-radius: 5px; color: #ced7e2; background: rgba(7,12,19,.82); }

/* The two hero photos orbit in 3D and share pointer/touch controls with the galleries. */
.hero-visual { perspective: 1050px; touch-action: none; }
.hero-photo-tilt { perspective: 1050px; }
.hero-photo-orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-image { top: 50%; left: 50%; transform-style: preserve-3d; }
.hero-image-main { margin: -177.5px 0 0 -147.5px; animation: heroImageOrbitA 18s linear infinite; }
.hero-image-small { width: 190px; height: 145px; margin: -72.5px 0 0 -95px; animation: heroImageOrbitB 14s linear infinite; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; animation: none; transform: none; backface-visibility: hidden; }
.hero-gallery-controls { right: 5px; bottom: 7px; left: 5px; justify-content: space-between; }
.hero-gallery-controls > span { padding: 6px 8px; border: 1px solid rgba(167,190,214,.2); border-radius: 5px; color: #d6e1ea; background: rgba(7,12,19,.78); }
.timeline-photo { perspective: 1000px; }
.timeline-photo img {
  transform-origin: center; transform-style: preserve-3d; backface-visibility: hidden;
  animation: archiveImageOrbit 11s ease-in-out infinite; animation-play-state: paused; will-change: transform;
}
.timeline-card.is-open .timeline-photo img { animation-play-state: running; }
@keyframes heroImageOrbitA {
  0% { transform: translate3d(0,-28px,38px) rotateY(-7deg) rotateX(2deg) rotateZ(3deg); }
  12.5% { transform: translate3d(48px,-42px,27px) rotateY(-3deg) rotateX(1deg) rotateZ(2deg); }
  25% { transform: translate3d(72px,0,0) rotateY(5deg) rotateX(0deg) rotateZ(0deg); }
  37.5% { transform: translate3d(48px,42px,-27px) rotateY(7deg) rotateX(-1deg) rotateZ(-2deg); }
  50% { transform: translate3d(0,28px,-38px) rotateY(3deg) rotateX(-2deg) rotateZ(-3deg); }
  62.5% { transform: translate3d(-48px,42px,-27px) rotateY(-3deg) rotateX(-1deg) rotateZ(-2deg); }
  75% { transform: translate3d(-72px,0,0) rotateY(-7deg) rotateX(0deg) rotateZ(0deg); }
  87.5% { transform: translate3d(-48px,-42px,27px) rotateY(-5deg) rotateX(1deg) rotateZ(2deg); }
  100% { transform: translate3d(0,-28px,38px) rotateY(-7deg) rotateX(2deg) rotateZ(3deg); }
}
@keyframes heroImageOrbitB {
  0% { transform: translate3d(-108px,-63px,0) rotateY(6deg) rotateX(-2deg) rotateZ(-8deg); }
  12.5% { transform: translate3d(-74px,-84px,-8px) rotateY(3deg) rotateX(-1deg) rotateZ(-5deg); }
  25% { transform: translate3d(0,-74px,-16px) rotateY(-5deg) rotateX(1deg) rotateZ(-1deg); }
  37.5% { transform: translate3d(76px,-35px,-12px) rotateY(-7deg) rotateX(2deg) rotateZ(4deg); }
  50% { transform: translate3d(108px,26px,4px) rotateY(-2deg) rotateX(1deg) rotateZ(7deg); }
  62.5% { transform: translate3d(60px,70px,18px) rotateY(5deg) rotateX(-1deg) rotateZ(5deg); }
  75% { transform: translate3d(-18px,75px,14px) rotateY(7deg) rotateX(-2deg) rotateZ(0deg); }
  87.5% { transform: translate3d(-88px,22px,7px) rotateY(2deg) rotateX(-2deg) rotateZ(-5deg); }
  100% { transform: translate3d(-108px,-63px,0) rotateY(6deg) rotateX(-2deg) rotateZ(-8deg); }
}
.hero-visual.is-dragging .hero-image-main, .hero-visual.is-dragging .hero-image-small { animation-play-state: paused; }
@keyframes archiveImageOrbit {
  0%,100% { transform: perspective(1000px) translate3d(-2px,0,0) rotateY(-7deg) rotateX(2.2deg) scale(1.09); }
  25% { transform: perspective(1000px) translate3d(0,-5px,18px) rotateY(-2deg) rotateX(1deg) scale(1.12); }
  50% { transform: perspective(1000px) translate3d(2px,0,0) rotateY(7deg) rotateX(-2.2deg) scale(1.09); }
  75% { transform: perspective(1000px) translate3d(0,5px,-12px) rotateY(2deg) rotateX(-1deg) scale(1.12); }
}
@media (max-width: 880px) {
  .intro-carousel { height: 340px; }
  .intro-carousel-card { width: 125px; height: 192px; margin: -96px 0 0 -62.5px; transform: rotateY(var(--panel-angle)) translateZ(158px); }
  .intro-carousel-card figcaption { right: 10px; bottom: 11px; left: 10px; gap: 5px; }
  .intro-carousel-card figcaption b { font-size: 17px; }
  .intro-carousel-card figcaption small { font-size: 8px; }
  .archive-gallery { padding: 28px 18px 18px; }
  .archive-gallery-card { width: 205px; height: 310px; margin: -155px 0 0 -102.5px; transform: rotateY(var(--panel-angle)) translateZ(210px); }
}
@media (max-width: 680px) {
  .intro-visual { min-height: 310px; }
  .intro-carousel { height: 275px; }
  .intro-carousel-card { width: 96px; height: 148px; margin: -74px 0 0 -48px; transform: rotateY(var(--panel-angle)) translateZ(120px); border-radius: 9px; }
  .intro-carousel-card figcaption { right: 7px; bottom: 9px; left: 7px; gap: 4px; }
  .intro-carousel-card figcaption span { font-size: 6px; letter-spacing: .07em; }
  .intro-carousel-card figcaption b { font-size: 13px; line-height: 1.08; }
  .intro-carousel-card figcaption small { font-size: 7px; line-height: 1.3; }
  .intro-gallery-controls { top: 5px; left: 4px; }
  .intro-gallery-controls > span { max-width: 90px; font-size: 6px; line-height: 1.4; }
  .intro-gallery-controls output { font-size: 7px; padding: 5px 6px; }
  .intro-gallery-controls .gallery-reset { width: 25px; height: 25px; }
  .intro-visual-stamp { top: -3px; right: 7%; }
  .intro-visual-caption { bottom: -3px; font-size: 6px; }
  .archive-gallery { margin-top: 42px; padding: 23px 10px 14px; border-radius: 17px; }
  .archive-gallery-heading > p:last-child { font-size: 13px; }
  .archive-gallery-stage { height: 360px; margin-top: 4px; }
  .archive-gallery-card { width: 158px; height: 244px; margin: -122px 0 0 -79px; transform: rotateY(var(--panel-angle)) translateZ(124px); border-radius: 11px; }
  .archive-gallery-card figcaption { right: 10px; bottom: 10px; left: 10px; gap: 4px; }
  .archive-gallery-card figcaption span { font-size: 6px; }
  .archive-gallery-card figcaption b { font-size: 19px; }
  .archive-gallery-card figcaption small { min-height: 25px; font-size: 7px; }
  .archive-gallery-card figcaption a { font-size: 6px; }
  .archive-gallery-controls { right: 7px; bottom: 7px; left: 7px; gap: 5px; }
  .archive-gallery-controls > span { max-width: 170px; font-size: 6px; line-height: 1.4; padding: 5px 6px; }
  .archive-gallery-controls output { font-size: 6px; padding: 5px; }
  .archive-gallery-controls .gallery-reset { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-orbit-a, .intro-orbit-b, .gallery-track, .hero-image-main, .hero-image-small { animation: none; }
  .hero-image img, .timeline-photo img { animation: none; transform: none; will-change: auto; }
}


.brand-mark [data-chapter-current] { margin: 0; color: var(--mint); }
@media (max-width: 930px) {
  .hero-image-main { margin: -155px 0 0 -120px; }
  .hero-image-small { width: 155px; height: 125px; margin: -62.5px 0 0 -77.5px; }
}
@media (max-width: 680px) {
  .hero-image-main { margin: -152.5px 0 0 -120px; }
  .hero-image-small { width: 147px; height: 117px; margin: -58.5px 0 0 -73.5px; }
  .hero-gallery-controls { right: 0; bottom: 0; left: 0; gap: 5px; }
  .hero-gallery-controls > span { font-size: 6px; padding: 5px 6px; }
  .hero-gallery-controls output { font-size: 6px; padding: 5px; }
  .hero-gallery-controls .gallery-reset { width: 25px; height: 25px; }
}

/* Keep both presentation screens inside one document so fullscreen survives the transition. */
.content-screen {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  height: 100dvh;
  padding: 0;
  border: 0;
  background: #080b13;
}
.content-screen[hidden] { display: none; }
body.showing-content { overflow: hidden; }
body.showing-content .intro-cover { visibility: hidden; }
.embedded-fullscreen-button {
  position: fixed;
  z-index: 10000;
  top: 17px;
  right: max(5vw,calc((100vw - var(--page-width)) / 2));
  display: flex;
  background: rgba(8,11,19,.88);
  backdrop-filter: blur(14px);
}
.embedded-fullscreen-button[hidden] { display: none; }
.embedded-presentation .site-header .presentation-button { display: none !important; }
@media (max-width: 680px) {
  .embedded-fullscreen-button { top: 12px; right: 16px; }
}

/* Five-part timeline: one foundation chapter and the four computer generations. */
.timeline-part-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.timeline-part-nav a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 7px 11px;
  border: 1px solid #293346; border-radius: 24px; color: #8793a5; background: rgba(8,13,21,.35);
  font: 9px var(--mono); text-decoration: none; transition: color .2s,border-color .2s,background .2s;
}
.timeline-part-nav a:hover, .timeline-part-nav a:focus-visible {
  color: var(--mint); border-color: rgba(141,244,191,.48); background: rgba(141,244,191,.06); outline: none;
}
.timeline-item[id] { scroll-margin-top: 110px; }
.history-subitems { display: grid; gap: 13px; margin-top: 19px; }
.history-subitem {
  display: grid; grid-template-columns: minmax(250px,.82fr) minmax(0,1.7fr); min-width: 0;
  align-items: start;
  overflow: hidden; border: 1px solid rgba(125,151,181,.19); border-radius: 10px;
  background: linear-gradient(115deg,rgba(18,27,41,.78),rgba(10,16,26,.62));
}
.history-subitem-media { min-width: 0; height: 240px; min-height: 240px; display: grid; grid-template-rows: minmax(0,1fr); margin: 0; background: #0b111a; }
.history-subitem-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; filter: saturate(.78); }
.history-subitem-copy { align-self: center; padding: 19px 22px; }
.history-subitem-gallery { grid-template-columns: minmax(0,1fr); }
.history-subitem-gallery .history-subitem-copy { align-self: start; padding: 20px 24px; }
.history-subitem-copy .history-subitem-label { margin: 0 0 7px; color: var(--mint); font: 8px/1.5 var(--mono); letter-spacing: .1em; }
.timeline-card .history-subitem-copy h4 { margin: 0 0 9px; color: #e2e8f0; font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.timeline-card .history-subitem-copy p:not(.history-subitem-label) { margin: 0 0 9px; color: #98a6b8; font-size: 12px; line-height: 1.75; max-width: none; }
.timeline-card .history-subitem-copy p:last-child { margin-bottom: 0; }
.history-image-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-width: 0; }
.history-image-pair .history-subitem-media { height: 240px; min-height: 240px; }
.history-image-pair .history-subitem-media img { object-fit: contain; background: #080d14; }
.history-subitem-gallery .history-image-pair .history-subitem-media { height: 280px; min-height: 280px; overflow: hidden; border: 1px solid rgba(125,151,181,.19); border-radius: 9px; }
@media (max-width: 930px) {
  .timeline-part-nav { justify-content: flex-start; }
  .history-subitem { grid-template-columns: minmax(190px,.8fr) minmax(0,1.2fr); }
  .history-subitem-gallery { grid-template-columns: minmax(0,1fr); }
  .history-subitem-copy { padding: 16px; }
  .history-subitem-media, .history-image-pair .history-subitem-media { height: 200px; min-height: 200px; }
  .history-subitem-gallery .history-image-pair .history-subitem-media { height: 240px; min-height: 240px; }
}
@media (max-width: 640px) {
  .timeline-part-nav { gap: 6px; }
  .timeline-part-nav a { min-height: 30px; padding: 6px 9px; font-size: 8px; }
  .history-subitem { grid-template-columns: 1fr; }
  .history-subitem-media { height: 210px; min-height: 210px; }
  .history-subitem-media img { height: 100%; min-height: 0; }
  .history-image-pair .history-subitem-media { height: 170px; min-height: 170px; }
  .history-image-pair .history-subitem-media img { height: 100%; min-height: 0; }
  .history-subitem-copy { padding: 15px; }
  .timeline-card .history-subitem-copy h4 { font-size: 16px; }
  .timeline-card .history-subitem-copy p:not(.history-subitem-label) { font-size: 11px; }
}

/* Presentation reading size: 22 pt in PowerPoint is about 29.3 CSS pixels. */
:root { --presentation-copy-size: 22pt; }
.hero-lede,
.intro-lede,
.section-intro,
.timeline-card p:not(.card-kicker):not(.history-subitem-label),
.timeline-card .history-subitem-copy p:not(.history-subitem-label),
.generation-card p,
.scale-copy,
.video-card-copy > p:not(.card-kicker),
.video-footnote,
.part-info-panel > p:last-child,
.era-description p,
.lab-tip p,
.future-lede,
.future-prompts p,
.closing-line,
.source-column a,
.source-note,
.site-footer > p,
.intro-credit-group > b,
.intro-credit-members li {
  font-size: var(--presentation-copy-size) !important;
  line-height: 1.55;
}
.timeline-date { font-size: var(--presentation-copy-size); }
.timeline-date small { font-size: 16pt; line-height: 1.4; }
.timeline-card h3,
.timeline-card .history-subitem-copy h4,
.generation-card h3,
.scale-callout h3,
.video-card-copy h3,
.part-info-panel h3,
.era-description h3,
.sources-details summary b {
  font-size: 24pt !important;
  line-height: 1.25;
}
.generation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.intro-credit-members ul { grid-template-columns: 1fr; }
@media (max-width: 680px) {
  .generation-grid, .video-grid { grid-template-columns: 1fr; }
  .intro-credit-members ul { grid-template-columns: 1fr; }
  .timeline-date { font-size: 22pt; }
  .timeline-date small { font-size: 15pt; }
}

/* Two additions from the report outline: a compact software trail and a
   photo-led overview of current computing directions. */
.software-evolution {
  margin: 52px 0 0;
  padding: clamp(24px,3.5vw,42px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(143,174,209,.22);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(17,27,42,.95),rgba(10,15,24,.94));
  box-shadow: 0 22px 65px rgba(0,0,0,.18);
}
.software-evolution::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -145px;
  top: -190px;
  border: 1px solid rgba(128,230,206,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(128,230,206,.025),0 0 0 68px rgba(128,230,206,.02);
  pointer-events: none;
}
.software-heading { position: relative; z-index: 1; max-width: 850px; }
.software-heading .card-kicker { color: var(--mint); font-size: 11px; letter-spacing: .12em; }
.software-heading h3 { margin: 14px 0 28px; font-size: clamp(29px,3.3vw,42px); line-height: 1.15; letter-spacing: -.04em; font-weight: 500; }
.software-heading h3 span { color: #9eacc0; }
.software-milestones { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; position: relative; z-index: 1; }
.software-milestones article { min-width: 0; padding: 22px 22px 24px; border: 1px solid rgba(143,174,209,.17); border-radius: 15px; background: rgba(7,12,20,.55); transition: border-color .25s ease,transform .25s ease,background .25s ease; }
.software-milestones article:hover { transform: translateY(-4px); border-color: rgba(128,230,206,.48); background: rgba(14,26,36,.86); }
.software-date { color: var(--mint); font: 12px var(--mono); letter-spacing: .08em; }
.software-milestones h4 { margin: 15px 0 9px; color: #e8edf4; font-size: 22pt; line-height: 1.25; font-weight: 600; }
.software-milestones p { margin: 0; color: #c1ccda; font-size: 22pt !important; line-height: 1.5; }

.future-trends { position: relative; z-index: 2; margin-top: 68px; }
.trend-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 26px; padding-top: 29px; border-top: 1px solid rgba(143,174,209,.25); }
.trend-heading .eyebrow { margin: 0 0 12px; color: var(--mint); font-size: 11px; letter-spacing: .14em; }
.trend-heading h3 { margin: 0; max-width: 780px; font-size: clamp(34px,4.5vw,55px); line-height: 1.1; letter-spacing: -.05em; font-weight: 500; }
.trend-heading > p { flex: 0 1 480px; max-width: 480px; margin: 0; color: #c1ccda; font-size: 22pt !important; line-height: 1.5; }
.trend-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; perspective: 1200px; }
.trend-card { grid-column: span 2; min-width: 0; overflow: hidden; border: 1px solid rgba(143,174,209,.2); border-radius: 18px; background: linear-gradient(145deg,rgba(17,26,40,.95),rgba(9,14,23,.96)); box-shadow: 0 18px 48px rgba(0,0,0,.22); transform-style: preserve-3d; transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.trend-card:nth-child(4), .trend-card:nth-child(5) { grid-column: span 3; }
.trend-card:hover { transform: translateY(-7px) rotateX(1deg); border-color: rgba(128,230,206,.52); box-shadow: 0 25px 64px rgba(0,0,0,.34),0 0 25px rgba(128,230,206,.07); }
.trend-media { position: relative; height: clamp(210px,21vw,300px); margin: 0; overflow: hidden; background: #111a25; }
.trend-media::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,rgba(6,10,16,.76)); pointer-events: none; }
.trend-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.04); transition: transform .6s cubic-bezier(.2,.75,.25,1),filter .4s ease; }
.trend-card:hover .trend-media img { transform: scale(1.055); filter: saturate(1.06) contrast(1.04); }
.trend-photo-label { position: absolute; z-index: 1; left: 19px; bottom: 16px; padding: 7px 10px; border: 1px solid rgba(229,237,245,.22); border-radius: 999px; color: #f0eee8; background: rgba(7,12,19,.58); backdrop-filter: blur(10px); font: 10px var(--mono); letter-spacing: .09em; }
.trend-copy { padding: 23px 25px 27px; }
.trend-index { color: var(--mint); font: 11px var(--mono); letter-spacing: .1em; }
.trend-copy h4 { margin: 12px 0 10px; color: #eef2f7; font-size: 24pt; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.trend-copy p { margin: 0; color: #c3ccda; font-size: 22pt !important; line-height: 1.48; }

@media (max-width: 1050px) {
  .software-milestones { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-heading { align-items: start; flex-direction: column; gap: 16px; }
  .trend-heading > p { max-width: 760px; flex-basis: auto; }
  .trend-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-card, .trend-card:nth-child(4), .trend-card:nth-child(5) { grid-column: auto; }
  .trend-media { height: 230px; }
}
@media (max-width: 640px) {
  .software-evolution { margin-top: 34px; padding: 21px 17px; border-radius: 17px; }
  .software-heading h3 { font-size: 30px; }
  .software-milestones { grid-template-columns: 1fr; gap: 10px; }
  .software-milestones article { padding: 18px 16px 20px; }
  .software-milestones h4 { font-size: 20pt; }
  .software-milestones p { font-size: 22pt !important; }
  .future-trends { margin-top: 48px; }
  .trend-heading { margin-bottom: 18px; padding-top: 22px; }
  .trend-heading h3 { font-size: clamp(34px,9vw,48px); }
  .trend-grid { grid-template-columns: 1fr; gap: 13px; }
  .trend-media { height: 225px; }
  .trend-copy { padding: 20px 19px 23px; }
  .trend-copy h4 { font-size: 22pt; }
  .trend-copy p { font-size: 22pt !important; }
  .future-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .software-milestones article, .trend-card, .trend-media img { transition: none; }
}

/* The report has seven numbered chapters; keep their layout and links clear. */
.software-section {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 112px 24px 118px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg,rgba(9,15,25,.94),rgba(13,21,34,.97));
}
.software-section-inner { max-width: 100%; margin: 0 auto; }
.trend-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.trend-grid-two .trend-card { grid-column: auto; }
.trend-grid-single { grid-template-columns: minmax(0,1fr); }
.trend-grid-single .trend-card {
  display: grid;
  grid-template-columns: minmax(280px,.9fr) 1.1fr;
  align-items: stretch;
}
.trend-grid-single .trend-media { height: 100%; min-height: 320px; }
.future-closing { position: relative; z-index: 2; max-width: 850px; margin-top: 30px; }
.future-closing .future-prompts { margin-top: 0; }
.future-closing .closing-line { margin-bottom: 0; }
.site-header .main-nav { min-width: 0; }

@media (max-width: 1050px) {
  .site-header .main-nav {
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header .main-nav::-webkit-scrollbar { display: none; }
  .site-header .main-nav a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 112px; }
  .site-header {
    height: auto;
    min-height: 104px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: 43px 39px;
    align-content: center;
    gap: 3px 10px;
    padding: 8px 16px 7px;
  }
  .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-header .brand-mark { font-size: 17px; }
  .site-header .brand-name { font-size: 8px; }
  .site-header .presentation-button { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-header .main-nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    gap: 19px;
    overflow-x: auto;
    padding: 5px 1px 7px;
    overscroll-behavior-x: contain;
  }
  .site-header .main-nav a { font-size: 11px; }
  .software-section { padding: 82px 18px 88px; }
  .trend-grid-two { grid-template-columns: 1fr; }
  .trend-grid-single .trend-card { grid-template-columns: 1fr; }
  .trend-grid-single .trend-media { min-height: 0; height: 225px; }
  .future-closing { margin-top: 24px; }
}

.software-photo {
  position: relative;
  height: 190px;
  margin: -22px -22px 19px;
  overflow: hidden;
  background: linear-gradient(145deg,#1b2736,#0b111a);
}
.software-photo::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(transparent,rgba(4,8,14,.78));
  pointer-events: none;
}
.software-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.05);
  transition: transform .55s ease,filter .35s ease;
}
.software-milestones article:hover .software-photo img { transform: scale(1.045); filter: saturate(1.02) contrast(1.05); }
.software-photo span {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 13px;
  color: #f0eee8;
  font: 10px var(--mono);
  letter-spacing: .08em;
}
.software-photo-manual img { object-fit: contain; padding: 12px; background: #121923; }
.trend-grid-quantum { grid-template-columns: repeat(3,minmax(0,1fr)); }
.trend-grid-quantum .trend-card { grid-column: auto; }
.trend-grid-quantum .trend-copy p + p { margin-top: 14px; }
.component-reference {
  display: grid;
  grid-template-columns: minmax(250px,.82fr) minmax(0,1.18fr);
  align-items: center;
  gap: clamp(22px,4vw,54px);
  margin-top: 34px;
  padding: clamp(22px,3.2vw,42px);
  border: 1px solid rgba(143,174,209,.2);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(17,26,40,.92),rgba(9,14,23,.9));
  box-shadow: 0 18px 48px rgba(0,0,0,.2);
}
.component-reference-image { min-width: 0; min-height: 300px; display: grid; place-items: center; margin: 0; padding: 18px; border: 1px solid rgba(143,174,209,.15); border-radius: 12px; background: #f2f4f4; }
.component-reference-image img { display: block; width: 100%; max-height: 440px; object-fit: contain; }
.component-reference-copy .eyebrow { margin: 0 0 12px; color: var(--mint); }
.component-reference-copy h3 { margin: 0 0 12px; color: #edf2f7; font-size: clamp(28px,3vw,40px); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; }
.component-reference-copy > p:not(.eyebrow) { margin: 0 0 18px; color: #c1ccda; font-size: 22pt; line-height: 1.5; }
.component-reference-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 18px; margin: 0; padding: 0; list-style: none; }
.component-reference-list li { display: flex; align-items: center; gap: 10px; min-width: 0; color: #d7e0eb; font-size: 22pt; line-height: 1.3; }
.component-reference-list b { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(128,230,206,.42); border-radius: 50%; color: var(--mint); font: 12px var(--mono); }
@media (max-width: 760px) {
  .component-reference { grid-template-columns: 1fr; }
  .component-reference-image { min-height: 220px; }
}
@media (max-width: 460px) {
  .component-reference-list { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  .trend-grid-quantum { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .software-photo { height: 190px; margin: -18px -16px 17px; }
  .trend-grid-quantum { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .software-photo img { transition: none; }
}

/* Hardware is one chapter; its 3D lab and component map stay together. */
.hardware-section {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 112px 24px 118px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg,rgba(9,15,25,.94),rgba(13,21,34,.97));
}
.hardware-section-inner { max-width: 100%; margin: 0 auto; }
.hardware-model-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
  padding: 12px 18px;
  border: 1px solid rgba(141,244,191,.42);
  border-radius: 999px;
  color: var(--mint);
  font-size: 22pt;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.hardware-model-link:hover { transform: translateY(-2px); background: rgba(141,244,191,.09); }
.hardware-model-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.hardware-flow {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 38px;
}
.hardware-flow article {
  min-width: 0;
  padding: 22px 20px 24px;
  border: 1px solid rgba(143,174,209,.18);
  border-radius: 15px;
  background: linear-gradient(145deg,rgba(20,31,47,.94),rgba(10,16,26,.96));
  transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hardware-flow article:hover {
  transform: translateY(-4px);
  border-color: rgba(141,244,191,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.hardware-flow-number { color: var(--mint); font: 12px var(--mono); letter-spacing: .1em; }
.hardware-flow h3 { margin: 18px 0 10px; color: #f1f5fa; font-size: 24pt; line-height: 1.12; }
.hardware-flow p { margin: 0; color: #c1ccda; font-size: 22pt; line-height: 1.42; }
.hardware-power-note {
  margin: 20px 0 0;
  padding: 17px 21px;
  border-left: 3px solid var(--mint);
  border-radius: 0 12px 12px 0;
  background: rgba(141,244,191,.06);
  color: #d6e1ec;
  font-size: 22pt;
  line-height: 1.4;
}
.hardware-power-note b { color: var(--mint); }
.hardware-section .lab-section {
  max-width: none;
  margin: 48px 0 0;
  padding: 48px 0 28px;
  border-top: 1px solid rgba(143,174,209,.16);
}
.hardware-section .lab-layout { margin-top: 30px; }
.hardware-section .component-reference { margin-top: 42px; }
@media (max-width: 1000px) {
  .hardware-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .hardware-section { padding: 82px 18px 88px; }
  .hardware-flow { grid-template-columns: 1fr; gap: 11px; margin-top: 26px; }
  .hardware-flow article { padding: 19px 17px; }
  .hardware-section .lab-section { margin-top: 34px; padding: 35px 0 20px; }
  .hardware-model-link { font-size: 22pt; }
}

/* Keep the introduction cover complete within one viewport. */
.intro-cover { height: 100svh; overflow: hidden; }
.intro-cover-inner {
  height: 100%;
  min-height: 0;
  padding: clamp(12px,2.2vh,22px) clamp(22px,5vw,76px) clamp(10px,1.5vh,16px);
  grid-template-rows: auto minmax(0,1fr);
}
.intro-topline { min-height: 36px; }
.intro-topline-actions { gap: 0; }
.intro-layout {
  min-height: 0;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(20px,4vw,58px);
  padding: clamp(8px,1.6vh,16px) 0;
}
.intro-copy { max-width: none; }
.intro-copy h1 { margin: 13px 0 11px; font-size: clamp(45px,5.15vw,70px); line-height: .96; }
.intro-lede { max-width: 620px; font-size: 22pt !important; line-height: 1.3; }
.intro-credits { grid-template-columns: minmax(0,1fr); gap: 7px; margin-top: 12px; padding: 10px 0; }
.intro-credit-label { margin-bottom: 4px; }
.intro-credit-group > b { font-size: 22pt !important; line-height: 1.2; }
.intro-credit-members ul { grid-template-columns: minmax(0,1fr); gap: 3px; }
.intro-credit-members li {
  gap: 8px;
  align-items: center;
  font-size: 22pt !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.intro-credit-members li > span { flex: 0 0 2ch; white-space: nowrap; }
/* The document root is the fullscreen element; keep each member name on one line there too. */
:root:fullscreen .intro-credit-members ul { grid-template-columns: minmax(0,1fr); }
:root:fullscreen .intro-credit-members li { white-space: nowrap; }
.intro-run-row { margin-top: 14px; }
.intro-run-button { min-height: 56px; }
.intro-visual { min-height: 0; height: min(60vh,490px); }
.intro-carousel { height: min(48vh,410px); }
@media (max-width: 880px) {
  .intro-layout { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 22px; }
  .intro-copy h1 { font-size: clamp(43px,6vw,62px); }
  .intro-visual { height: min(54vh,400px); }
  .intro-carousel { height: min(45vh,360px); }
}
@media (max-width: 680px) {
  .intro-cover-inner { padding: 10px 16px 12px; }
  .intro-topline { min-height: 31px; }
  .intro-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 5px; padding: 8px 0 0; }
  .intro-copy h1 { margin: 8px 0 7px; font-size: clamp(38px,10vw,52px); }
  .intro-lede { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .intro-credits { gap: 6px; margin-top: 8px; padding: 8px 0; }
  .intro-credit-members ul { grid-template-columns: 1fr; gap: 3px; }
  .intro-credit-members li { align-items: center; white-space: nowrap; overflow-wrap: normal; }
  .intro-credit-members li span { display: inline; margin: 0; }
  .intro-run-row { margin-top: 9px; }
  .intro-run-button { min-height: 50px; }
  .intro-visual { height: min(31vh,235px); }
  .intro-carousel { height: min(30vh,220px); min-height: 165px; }
  .intro-visual-stamp { top: 0; }
  .intro-visual-caption { bottom: -2px; }
}
@media (max-height: 720px) {
  .intro-cover-inner { padding-top: 8px; padding-bottom: 8px; }
  .intro-topline { min-height: 28px; }
  .intro-layout { padding-top: 5px; padding-bottom: 5px; }
  .intro-copy h1 { margin-top: 7px; margin-bottom: 6px; font-size: clamp(40px,5.1vw,60px); }
  .intro-credits { margin-top: 7px; padding: 6px 0; }
  .intro-run-row { margin-top: 8px; }
  .intro-visual { height: min(54vh,360px); }
  .intro-carousel { height: min(42vh,310px); }
}
@media (max-width: 680px) and (max-height: 720px) {
  .intro-lede { display: none; }
  .intro-copy h1 { font-size: clamp(36px,8vw,46px); }
  .intro-credit-group > b, .intro-credit-members li { font-size: 18pt !important; }
  .intro-visual { height: min(26vh,175px); }
  .intro-carousel { height: min(25vh,165px); min-height: 140px; }
}
@media (max-width: 680px) and (min-height: 721px) and (max-height: 800px) {
  .intro-lede { -webkit-line-clamp: 1; }
  .intro-credit-group > b, .intro-credit-members li { font-size: 18pt !important; }
  .intro-visual { height: min(24vh,190px); }
  .intro-carousel { height: min(22vh,175px); min-height: 150px; }
}