/* Cosmic Origins — a quiet, cinematic voyage through cosmic time. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #02040a; }
body { color: #eff5ff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.origins-page { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 52% 31%, rgba(28, 39, 86, .24), transparent 52%), #02040a; }
.origins-topbar { position: relative; z-index: 2; display:flex; align-items:center; justify-content:space-between; gap:18px; padding: max(18px, env(safe-area-inset-top)) clamp(16px, 4vw, 52px) 14px; border-bottom:1px solid rgba(151,184,240,.13); }
.origins-brand { display:flex; align-items:center; gap:12px; color:#f7f9ff; text-decoration:none; }
.origins-brand-mark { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(151,211,255,.3); border-radius:50%; background:radial-gradient(circle at 33% 28%, #77d4ff, #1d4d90 43%, #050a18 78%); box-shadow:0 0 30px rgba(55,140,255,.18); font-weight:900; }
.origins-brand strong { display:block; font-size:.78rem; letter-spacing:.15em; }
.origins-brand small { display:block; margin-top:4px; color:#849bb9; font-size:.6rem; letter-spacing:.12em; }
.origins-top-actions { display:flex; align-items:center; gap:8px; }
.origins-small-button, .origins-exit { min-height:39px; border:1px solid rgba(153,188,244,.2); border-radius:11px; padding:0 12px; background:rgba(255,255,255,.045); color:#eaf4ff; cursor:pointer; font:inherit; font-size:.75rem; font-weight:750; }
.origins-small-button:hover, .origins-exit:hover, .origins-control:hover { border-color:rgba(158,219,255,.65); background:rgba(65,123,193,.15); }
.origins-main { width:min(1440px, 100%); margin:0 auto; padding:clamp(18px,3.2vh,34px) clamp(16px,4vw,52px) max(18px, env(safe-area-inset-bottom)); }
.origins-eyebrow { margin:0 0 10px; color:#92bfee; font-size:.64rem; font-weight:900; letter-spacing:.19em; text-transform:uppercase; }
.origins-intro { max-width:780px; margin:0 auto 18px; text-align:center; }
.origins-intro h1 { margin:0; font-size:clamp(2rem,5vw,4.25rem); font-weight:720; letter-spacing:-.055em; line-height:1.02; }
.origins-intro-copy { max-width:650px; margin:13px auto 0; color:#a6b9d4; font-size:clamp(.88rem,1.3vw,1rem); line-height:1.65; }
.origins-stage { position:relative; display:grid; min-height:clamp(270px,43vh,520px); overflow:hidden; isolation:isolate; place-items:center; border:1px solid rgba(136,175,234,.17); border-radius:24px; background:radial-gradient(ellipse at 50% 50%, rgba(16,36,76,.32), transparent 65%),#02050d; box-shadow:0 28px 100px rgba(0,0,0,.25), inset 0 0 65px rgba(24,58,107,.09); }
#originsCanvas { display:block; position:absolute; inset:0; width:100%; height:100%; }
.origins-stage::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(180deg,rgba(1,4,12,.08),transparent 32%,rgba(1,4,12,.14) 65%,rgba(1,4,12,.66)); }
.origins-stage-topline { position:absolute; z-index:1; top:17px; right:18px; left:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:#91a7c7; font-size:.59rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.origins-scene-status { display:inline-flex; align-items:center; gap:7px; }
.origins-scene-status::before { width:6px; height:6px; border-radius:50%; background:#79e8bf; box-shadow:0 0 12px rgba(121,232,191,.75); content:""; }
.origins-stage-caption { position:absolute; z-index:1; right:14px; bottom:17px; left:14px; color:rgba(194,215,244,.78); text-align:center; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.origins-story-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(235px,.7fr); gap:clamp(18px,4vw,52px); align-items:start; padding:clamp(19px,3vw,30px) 0 0; }
.origins-story { min-width:0; }
.origins-time { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:12px; color:#9ed8ff; font-size:.68rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.origins-time::before { display:block; width:24px; height:1px; background:#78c8ff; content:""; }
.origins-story h2 { margin:0 0 12px; color:#f5f8ff; font-size:clamp(1.6rem,3.5vw,3rem); font-weight:690; letter-spacing:-.045em; line-height:1.08; }
.origins-poetry { max-width:770px; margin:0; color:#c1d1e8; font-size:clamp(.98rem,1.5vw,1.16rem); line-height:1.72; }
.origins-science-card { padding:18px; border:1px solid rgba(144,187,245,.16); border-radius:17px; background:linear-gradient(145deg,rgba(12,25,48,.72),rgba(3,8,20,.77)); }
.origins-science-card h3 { margin:0 0 8px; color:#9bcfff; font-size:.63rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.origins-science-card p { margin:0; color:#9fb3cd; font-size:.79rem; line-height:1.6; }
.origins-source { display:inline-block; margin-top:12px; color:#9ad6ff; font-size:.74rem; text-underline-offset:3px; }
.origins-timeline { padding-top:23px; }
.origins-timeline-labels { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; color:#8ba0bd; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.origins-slider { display:block; width:100%; margin:0; accent-color:#9edcff; cursor:pointer; }
.origins-chapters { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin-top:12px; }
.origins-chapter-button { min-width:0; display:grid; gap:7px; justify-items:start; padding:7px 5px 4px; border:0; border-radius:8px; background:transparent; color:#7289a8; cursor:pointer; text-align:left; }
.origins-chapter-button::before { display:block; width:7px; height:7px; border-radius:50%; background:#53657f; box-shadow:0 0 0 4px rgba(115,151,201,.07); content:""; transition:background .2s, box-shadow .2s; }
.origins-chapter-button[aria-current="step"] { color:#eff7ff; }
.origins-chapter-button[aria-current="step"]::before { background:#a8e1ff; box-shadow:0 0 0 4px rgba(115,194,255,.14),0 0 18px rgba(120,199,255,.7); }
.origins-chapter-button span { width:100%; overflow-wrap:anywhere; font-size:.63rem; font-weight:750; line-height:1.35; }
.origins-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:22px; padding-top:17px; border-top:1px solid rgba(143,177,230,.13); }
.origins-playback { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.origins-control { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:0 15px; border:1px solid rgba(138,188,244,.22); border-radius:12px; background:rgba(255,255,255,.045); color:#eaf4ff; cursor:pointer; font:inherit; font-size:.76rem; font-weight:800; }
.origins-control-primary { border-color:rgba(123,207,255,.4); background:linear-gradient(110deg,rgba(27,128,206,.26),rgba(123,84,210,.23)); }
.origins-control:disabled { opacity:.45; cursor:not-allowed; }
.origins-progress-copy { color:#8399b5; font-size:.68rem; }
.origins-progress-copy strong { color:#d5eaff; font-variant-numeric:tabular-nums; }
.origins-footnote { margin:22px 0 0; color:#7287a5; font-size:.68rem; line-height:1.6; text-align:center; }
.origins-footer { padding:15px clamp(16px,4vw,52px) max(18px,env(safe-area-inset-bottom)); border-top:1px solid rgba(151,184,240,.1); color:#7287a5; font-size:.67rem; text-align:center; }
.origins-footer a { color:#9bcfff; text-underline-offset:3px; }
.origins-page a:focus-visible, .origins-page button:focus-visible, .origins-page input:focus-visible { outline:3px solid #a2ddff; outline-offset:3px; }
@media (max-width: 740px) {
  .origins-topbar { gap:9px; padding-right:14px; padding-left:14px; }
  .origins-brand small { font-size:.53rem; }
  .origins-top-actions { gap:5px; }
  .origins-small-button, .origins-exit { min-height:35px; padding:0 9px; font-size:.69rem; }
  .origins-main { padding-top:20px; padding-right:13px; padding-left:13px; }
  .origins-intro { margin-bottom:15px; }
  .origins-intro-copy { max-width:490px; font-size:.85rem; }
  .origins-stage { min-height:clamp(245px,37svh,390px); border-radius:18px; }
  .origins-stage-topline { top:12px; right:12px; left:12px; font-size:.52rem; }
  .origins-stage-caption { bottom:12px; font-size:.55rem; }
  .origins-story-layout { grid-template-columns:1fr; gap:15px; padding-top:18px; }
  .origins-story h2 { margin-bottom:8px; font-size:clamp(1.6rem,7vw,2.3rem); }
  .origins-poetry { font-size:.94rem; line-height:1.6; }
  .origins-science-card { padding:13px 15px; }
  .origins-science-card p { font-size:.76rem; }
  .origins-timeline { padding-top:20px; }
  .origins-chapters { gap:2px; margin-top:8px; }
  .origins-chapter-button { gap:6px; padding:6px 2px 3px; }
  .origins-chapter-button span { font-size:.53rem; }
  .origins-controls { align-items:flex-start; }
  .origins-playback { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .origins-control { min-width:0; padding:0 8px; font-size:.69rem; }
  .origins-progress-copy { width:100%; }
}
@media (max-width: 380px) {
  .origins-brand { gap:8px; }
  .origins-brand-mark { width:32px; height:32px; }
  .origins-brand strong { font-size:.68rem; }
  .origins-chapter-button span { font-size:.48rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}