/* RADR: a single, quiet visual field with a shared mechanical world. */
html { scroll-behavior:auto; scroll-padding-top:0; scrollbar-width:none; }
html::-webkit-scrollbar,body.cinematic-site::-webkit-scrollbar { display:none; width:0; height:0; }
body.cinematic-site {
  --paper:#03070d; --ink:#e9f0f7; --blue:#91bff0; --line:#c7ddf51b;
  --muted:#8c9cae; --pad:7.6vw;
  margin:0; background:var(--paper); color:var(--ink);
  font-family:RadarSans,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:400; overflow-x:hidden;
}
body.cinematic-site::before { content:none; }
body.cinematic-site ::selection { background:#83b9ed; color:#03070d; }
body.cinematic-site a,body.cinematic-site button { -webkit-tap-highlight-color:transparent; }
body.cinematic-site a:focus-visible,body.cinematic-site button:focus-visible { outline:2px solid #9dc8f4; outline-offset:6px; }
body.cinematic-site .skip { color:#07101a; background:#e9f0f7; border-radius:2px; }
body.cinematic-site .page-world { display:none; position:fixed; inset:0; z-index:2; pointer-events:none; background:transparent; }
body.cinematic-site .page-world canvas { width:100%; height:100%; opacity:1; pointer-events:none; }
body.cinematic-site main { position:relative; z-index:3; }
body.cinematic-site .flow-caption { display:none; }
body.cinematic-site .site-header,body.cinematic-site .site-header.scrolled {
  height:100px; padding:0 var(--pad); position:fixed; inset:0 0 auto; z-index:30;
  background:transparent; color:var(--ink); border:0; backdrop-filter:none;
}
body.cinematic-site .site-header.scrolled { background:linear-gradient(#03070de6,#03070d00); }
body.cinematic-site .brand { gap:11px; flex-shrink:0; white-space:nowrap; }
body.cinematic-site .brand img { width:35px; height:35px; filter:none; }
body.cinematic-site .brand>span { font-size:25px; letter-spacing:1px; font-weight:500; }
body.cinematic-site .brand small { margin:7px 0 0 1px; font-size:8px; letter-spacing:3.5px; font-weight:400; }
body.cinematic-site .header-nav { display:flex; align-items:center; gap:35px; margin-left:auto; margin-right:48px; font-size:12px; color:#a5b3c4; }
body.cinematic-site .header-nav a { padding:12px 0; transition:color .18s; white-space:nowrap; }
body.cinematic-site .header-nav a:hover { color:#f0f5fb; }
body.cinematic-site .header-actions { gap:12px; flex-shrink:0; }
body.cinematic-site .round-button,body.cinematic-site .menu-button,body.cinematic-site .app-link { height:37px; font-size:12px; font-weight:400; border-radius:22px; flex-shrink:0; white-space:nowrap; }
body.cinematic-site .round-button { width:37px; background:transparent; border:1px solid #bfd6ef26; color:#a6b8cc; }
body.cinematic-site .menu-button { padding:0 0 0 11px; gap:13px; background:transparent; color:#b7c4d3; }
body.cinematic-site .menu-dots { width:17px; height:13px; position:relative; display:block; }
body.cinematic-site .menu-dots i { position:absolute; width:17px; height:1px; border-radius:0; background:currentColor; left:0; top:3px; }
body.cinematic-site .menu-dots i:last-child { top:10px; width:11px; }
body.cinematic-site .app-link { padding:0 19px; gap:18px; color:#06111d; background:#e1ebf5; }
body.cinematic-site .button-dot { width:4px; height:4px; background:#315579; }
body.cinematic-site .hero,body.cinematic-site .flow-chapter,body.cinematic-site .mechanism {
  position:relative; height:auto; min-height:0; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--ink); overflow:visible; isolation:auto; z-index:auto;
}
body.cinematic-site .hero-scroll,body.cinematic-site .hero-sticky { position:relative; height:auto; min-height:0; padding:0; }
body.cinematic-site .hero-stage,body.cinematic-site .flow-panel,body.cinematic-site .mechanism-sticky {
  position:relative; inset:auto; height:100svh; min-height:760px; margin:0; padding:0;
  width:100%; max-height:none; border-radius:0; background:transparent; overflow:hidden; isolation:auto;
}
body.cinematic-site .hero-stage { cursor:default; }

body.cinematic-site .hero-stage::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 9% 23%,#a6c4e242 0 .5px,transparent .9px),
    radial-gradient(circle at 18% 77%,#a6c4e22e 0 .5px,transparent .9px),
    radial-gradient(circle at 27% 12%,#a6c4e238 0 .5px,transparent .9px),
    radial-gradient(circle at 34% 56%,#a6c4e225 0 .5px,transparent .9px),
    radial-gradient(circle at 44% 83%,#a6c4e238 0 .5px,transparent .9px),
    radial-gradient(circle at 53% 19%,#a6c4e24a 0 .5px,transparent .9px),
    radial-gradient(circle at 59% 72%,#a6c4e22e 0 .5px,transparent .9px),
    radial-gradient(circle at 68% 9%,#a6c4e238 0 .5px,transparent .9px),
    radial-gradient(circle at 76% 31%,#a6c4e225 0 .5px,transparent .9px),
    radial-gradient(circle at 81% 85%,#a6c4e242 0 .5px,transparent .9px),
    radial-gradient(circle at 88% 16%,#a6c4e238 0 .5px,transparent .9px),
    radial-gradient(circle at 92% 63%,#a6c4e22e 0 .5px,transparent .9px),
    radial-gradient(circle at 97% 43%,#a6c4e24a 0 .5px,transparent .9px);
}
body.cinematic-site #hero-canvas { position:absolute; inset:0; width:100%; height:100%; transform:none; pointer-events:none; }
body.cinematic-site .hero-intro,body.cinematic-site .chapter-label { font-size:10px; color:var(--muted); letter-spacing:.06em; }
body.cinematic-site .hero-intro { position:absolute; top:24%; left:var(--pad); display:flex; gap:26px; align-items:center; }
body.cinematic-site .brand-code { font-size:9px; letter-spacing:.25em; }
body.cinematic-site .hero-type { position:absolute; z-index:4; top:32%; left:var(--pad); font-size:clamp(56px,6.5vw,104px); line-height:1.17; letter-spacing:-.055em; color:#edf3f9; font-weight:400; transform:none; max-width:50%; pointer-events:none; }
body.cinematic-site .hero-type span { padding-bottom:.08em; margin-bottom:-.08em; }
body.cinematic-site .hero-type b { font-weight:400; }
body.cinematic-site .hero-description { position:absolute; top:64%; left:var(--pad); font-size:16px; line-height:1.9; letter-spacing:.035em; color:#9baec3; z-index:4; }
body.cinematic-site .scene-interaction { position:absolute; left:var(--pad); right:auto; top:auto; bottom:18%; z-index:5; display:inline-flex; align-items:center; gap:20px; padding:0; border-radius:0; background:none; color:#d9e5f2; font-size:12px; }
body.cinematic-site .circle-arrow { display:grid; place-items:center; width:31px; height:31px; border:1px solid #b9d3ef42; font-size:15px; border-radius:50%; }
body.cinematic-site .scene-interaction:hover .circle-arrow { transform:translateY(3px); }
body.cinematic-site .scene-bottom { position:absolute; left:var(--pad); right:var(--pad); bottom:38px; display:flex; justify-content:space-between; align-items:center; color:#6e839b; font-size:10px; z-index:6; }
body.cinematic-site .scroll-invitation { display:inline-flex; align-items:center; gap:18px; color:#a0b1c4; }
body.cinematic-site .scroll-invitation span { font-size:17px; }
body.cinematic-site .journey-meter { display:none; }
body.cinematic-site .model-annotation { position:absolute; color:#7b91aa; font-size:10px; letter-spacing:.02em; display:flex; flex-direction:column; gap:7px; z-index:4; pointer-events:none; }
body.cinematic-site .annotation-line { display:block; width:50px; height:1px; background:#94bde94a; margin-bottom:7px; }
body.cinematic-site .model-annotation small { font-size:10px; color:#526c88; letter-spacing:.02em; }
body.cinematic-site .hero-annotation { left:61%; bottom:16%; }
body.cinematic-site .hero-fallback { display:flex; position:absolute; inset:0; padding:0; justify-content:flex-end; align-items:center; background:transparent; pointer-events:none; }
body.cinematic-site .hero-fallback img { width:32vw; height:48vh; max-width:490px; margin-right:8vw; object-fit:contain; opacity:.75; filter:grayscale(.65) saturate(.55) brightness(.85); }
body.cinematic-site .section-top,body.cinematic-site .join-top { position:absolute; top:16%; left:var(--pad); right:var(--pad); margin:0; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.04em; color:var(--muted); }
body.cinematic-site .chapter-index { font-size:9px; color:#536b85; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
body.cinematic-site .display-heading { font-size:clamp(44px,5.25vw,80px); line-height:1.22; font-weight:400; letter-spacing:-.055em; color:var(--ink); margin:0; }
body.cinematic-site .intro-grid { display:block; position:absolute; top:26%; left:var(--pad); width:38%; }
body.cinematic-site .intro .display-heading { max-width:none; }
body.cinematic-site .chapter-summary { margin-top:27px; font-size:18px; line-height:1.8; letter-spacing:.025em; color:#a8bacd; }
body.cinematic-site .intro-body { padding:0; margin-top:31px; max-width:380px; }
body.cinematic-site .intro-body>p { color:#8499b1; font-size:14px; line-height:1.95; }
body.cinematic-site .pill-link { display:inline-flex; align-items:center; gap:13px; padding:0; margin-top:24px; background:none; border:0; border-radius:0; font-size:12px; color:#c5d6e8; }
body.cinematic-site .play-symbol { display:grid; place-items:center; width:26px; height:26px; border:1px solid #b6d1ef37; border-radius:50%; font-size:7px; padding-left:1px; }
body.cinematic-site .intro-annotation { left:61%; bottom:18%; }
body.cinematic-site .intro-bottom { position:absolute; left:var(--pad); right:var(--pad); bottom:45px; margin:0; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#617b97; }
body.cinematic-site .text-link { display:inline-flex; gap:21px; align-items:center; padding:0; background:none; font-size:12px; color:#bdcee0; }
body.cinematic-site .text-link>span { font-size:16px; }
body.cinematic-site .flow-staticmark { display:block; position:absolute; left:61%; top:32%; width:28vw; max-width:430px; pointer-events:none; }
body.cinematic-site .flow-staticmark img { width:100%; opacity:.55; filter:grayscale(.65) saturate(.5) brightness(.75); }
body.cinematic-site .mechanism-heading { position:absolute; left:var(--pad); top:16%; z-index:4; }
body.cinematic-site .mechanism-heading>span { font-size:10px; color:var(--muted); letter-spacing:.04em; }
body.cinematic-site .mechanism-heading h2 { margin:22px 0 0; max-width:280px; font-size:clamp(31px,3.4vw,52px); line-height:1.28; letter-spacing:-.04em; font-weight:400; }
body.cinematic-site .mechanism-heading>p { max-width:270px; margin-top:17px; font-size:14px; color:#7f94ad; line-height:1.8; }
body.cinematic-site .mechanism-caption { position:absolute; right:var(--pad); top:16%; display:flex; align-items:center; gap:35px; color:#6e86a0; font-size:10px; }
body.cinematic-site .reward-row { position:absolute; inset:66% var(--pad) auto; display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:6vw; align-items:start; z-index:4; }
body.cinematic-site .reward-copy { padding:0; }
body.cinematic-site .reward-heading { display:flex; align-items:baseline; gap:25px; }
body.cinematic-site .reward-value { font-size:clamp(58px,6vw,90px); line-height:1; letter-spacing:-.055em; color:#dfebf8; }
body.cinematic-site .reward-value>span { font-size:.28em; letter-spacing:-.02em; margin-left:5px; color:#99b4d1; }
body.cinematic-site .reward-copy h3 { font-size:18px; line-height:1.5; font-weight:400; margin:0; color:#c2d1e1; }
body.cinematic-site .reward-copy>p:not(.reward-value) { margin-top:18px; font-size:13px; line-height:1.8; color:#8298b1; }
body.cinematic-site .reward-copy>a { display:inline-flex; align-items:center; gap:26px; margin-top:17px; font-size:12px; color:#bfd0e2; }
body.cinematic-site .reward-copy>a>span { font-size:16px; }
body.cinematic-site .reward-divider { width:1px; height:156px; align-self:center; background:linear-gradient(transparent,#b2cef329,transparent); }
body.cinematic-site .mechanism-note { position:absolute; bottom:30px; left:var(--pad); right:var(--pad); font-size:10px; color:#607a97; line-height:1.7; }
body.cinematic-site .mechanism .flow-staticmark { left:39%; top:34%; width:22vw; }
body.cinematic-site .eco-heading { position:absolute; left:57%; right:var(--pad); top:21.5%; z-index:4; }
body.cinematic-site .ecosystem .display-heading { font-size:clamp(36px,3.8vw,58px); line-height:1.25; margin:0; }
body.cinematic-site .planning-label { display:flex; align-items:center; gap:8px; margin-top:17px; color:#6e87a3; font-size:11px; line-height:1.5; }
body.cinematic-site .planning-label i { width:4px; height:4px; background:#7d9abd; border-radius:50%; }
body.cinematic-site .ecosystem-grid { position:absolute; inset:0 var(--pad); display:grid; grid-template-columns:1.05fr .82fr; gap:9.8vw; align-items:center; }
body.cinematic-site .eco-stage { position:relative; width:100%; height:100%; background:transparent; border:0; border-radius:0; overflow:visible; }
body.cinematic-site .eco-stage::before { content:none; }
body.cinematic-site .eco-stage-label { display:none; bottom:8%; left:0; right:0; text-align:center; font-size:10px; letter-spacing:.02em; color:#708ba9; }
body.cinematic-site .eco-list { position:absolute; top:43%; left:calc(57vw - var(--pad)); right:0; margin:0; }
body.cinematic-site .eco-list>button { display:flex; align-items:center; gap:19px; width:100%; min-height:82px; padding:14px 0; text-align:left; border-bottom:1px solid #b4cdeb19; transition:color .2s,border-color .2s; }
body.cinematic-site .eco-list>button[aria-selected=false] { opacity:1; color:#71849a; }
body.cinematic-site .eco-list>button[aria-selected=true] { color:#e0ebf7; border-bottom-color:#9bc4ef7a; }
body.cinematic-site .eco-list>button[aria-selected=true] strong,body.cinematic-site .eco-list>button[aria-selected=true] b { color:#dbeafa; }
body.cinematic-site .eco-list>button:hover { color:#dbeafa; }
body.cinematic-site .eco-number { margin-top:3px; align-self:flex-start; font-size:8px; letter-spacing:.06em; color:#526a85; }
body.cinematic-site .eco-list strong { display:block; font-size:22px; font-weight:400; letter-spacing:-.02em; }
body.cinematic-site .eco-list small { display:block; font-size:13px; margin-top:9px; line-height:1.6; color:#6e839c; }
body.cinematic-site .eco-list b { margin-left:auto; font-size:18px; font-weight:400; }
body.cinematic-site .eco-list>p { margin-top:18px; font-size:11px; line-height:1.8; color:#5d7692; }
body.cinematic-site .ecosystem .flow-staticmark { left:14%; top:36%; width:27vw; }
body.cinematic-site .protocol-grid { display:block; position:absolute; inset:25% var(--pad) auto; }
body.cinematic-site .protocol-copy { width:43%; }
body.cinematic-site .protocol-grid h2 { font-size:clamp(40px,4.5vw,70px); font-weight:400; line-height:1.22; letter-spacing:-.055em; }
body.cinematic-site .protocol .chapter-summary { font-size:16px; margin-top:20px; }
body.cinematic-site .protocol-copy .text-link { margin-top:24px; }
body.cinematic-site .protocol-details { position:relative; top:auto; left:0; display:flex; gap:clamp(32px,4vw,64px); margin-top:32px; width:43%; }
body.cinematic-site .protocol-details strong { font-size:clamp(38px,3.3vw,48px); font-weight:400; letter-spacing:-.045em; line-height:1; }
body.cinematic-site .protocol-details strong span { display:inline; font-size:13px; letter-spacing:0; margin-left:8px; color:#7e96b1; }
body.cinematic-site .protocol-details p { font-size:12px; color:#5e7895; margin-top:13px; }
body.cinematic-site .protocol-annotation { left:63%; bottom:23%; }
body.cinematic-site .timeline-labels { position:absolute; left:var(--pad); right:var(--pad); bottom:42px; margin:0; padding-top:16px; display:flex; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; color:#607b98; }
body.cinematic-site .protocol .flow-staticmark { left:62%; top:32%; width:27vw; }
body.cinematic-site .join-top { top:16%; }
body.cinematic-site .join h2 { position:absolute; left:var(--pad); top:28%; max-width:43%; font-size:clamp(40px,4.7vw,72px); font-weight:400; line-height:1.22; letter-spacing:-.055em; margin:0; }
body.cinematic-site .join-description { position:absolute; left:var(--pad); top:54%; font-size:14px; line-height:1.8; color:#869cb4; }
body.cinematic-site .join-button { position:absolute; left:var(--pad); top:63%; display:inline-flex; align-items:center; gap:55px; margin:0; padding:15px 21px; background:#dce9f5; color:#091626; border:1px solid #dce9f5; border-radius:2px; font-size:12px; }
body.cinematic-site .join-button>span:last-child { font-size:20px; }
body.cinematic-site .join-resource { position:absolute; top:75%; left:var(--pad); color:#8ea8c4; font-size:12px; }
body.cinematic-site .join-signature { position:absolute; bottom:43px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; font-size:10px; color:#5b7693; }
body.cinematic-site .join-signature .brand-code { color:#9db6d2; }
body.cinematic-site .join .flow-staticmark { left:61%; top:32%; width:29vw; }
body.cinematic-site .site-footer { position:relative; z-index:8; padding:76px var(--pad) 25px; background:#03070d; border-top:1px solid #8caed11a; }
body.cinematic-site .footer-logo { font-size:22px; font-weight:400; letter-spacing:1px; }
body.cinematic-site .footer-logo small { font-size:9px; color:#6c86a2; letter-spacing:.2em; }
body.cinematic-site .footer-links { display:flex; flex-wrap:wrap; gap:28px; color:#88a0bb; font-size:12px; }
body.cinematic-site .footer-wordmark { color:#d3e0ed; font-size:12.4vw; line-height:1.05; letter-spacing:-.045em; font-weight:400; margin:59px 0 45px; }
body.cinematic-site .footer-wordmark>span { font-size:6vw; font-weight:200; transform:none; color:#657f9c; }
body.cinematic-site .footer-wordmark:hover>span { transform:translateY(-7px); }
body.cinematic-site .footer-bottom { display:flex; gap:20px; align-items:center; border-color:#b9d6f31b; font-size:10px; color:#526a84; line-height:1.7; }
body.cinematic-site .site-progress { inset:0 0 auto; width:100%; height:4px; background:#a8ceef0a; z-index:35; pointer-events:none; overflow:hidden; }
body.cinematic-site .site-progress span { width:100%; background:#85b9ec; border-radius:0 999px 999px 0; transform:translate3d(-100%,0,0); will-change:transform; }
body.cinematic-site dialog { background:#09121d; color:#e0eaf5; border:1px solid #aacdf529; border-radius:5px; padding:34px; box-shadow:0 30px 100px #0009; }
body.cinematic-site dialog::backdrop { background:#01040bcc; backdrop-filter:blur(18px); }
body.cinematic-site .dialog-head h2 { font-size:23px; font-weight:400; }
body.cinematic-site .dialog-head button { background:#b7d3f015; color:#b9cee5; font-size:24px; width:34px; height:34px; }
body.cinematic-site #dialog-body>p,body.cinematic-site .resource-list small { color:#7e96af; }
body.cinematic-site .resource-list a { border-color:#b2cdeb1d; }
body.cinematic-site .resource-list strong { font-size:16px; font-weight:400; }
body.cinematic-site .resource-list a>span { font-size:19px; color:#80a6d0; }
body.cinematic-site .mobile-menu a,body.cinematic-site .mobile-menu button { color:#c9d9ea; font-size:24px; border-color:#a2c6ed1a; }
body.cinematic-site .film-dialog video { border-radius:2px; }

/* Only the initialized world owns viewport panels. Without it the page reads normally. */
body.cinematic-site.cinematic-active .page-world { display:block; }
body.cinematic-site.cinematic-active .site-footer { opacity:0; visibility:hidden; }
body.cinematic-site.cinematic-active .hero { height:130svh; }
body.cinematic-site.cinematic-active .intro { height:160svh; }
body.cinematic-site.cinematic-active .mechanism { height:200svh; }
body.cinematic-site.cinematic-active .ecosystem { height:300svh; }
body.cinematic-site.cinematic-active .protocol { height:160svh; }
body.cinematic-site.cinematic-active .join { height:130svh; }
body.cinematic-site.cinematic-active .hero-scroll,body.cinematic-site.cinematic-active .hero-sticky { height:100%; }
body.cinematic-site.cinematic-active .hero-stage,body.cinematic-site.cinematic-active .flow-panel,body.cinematic-site.cinematic-active .mechanism-sticky { position:fixed; inset:0; height:100svh; min-height:0; z-index:4; pointer-events:none; will-change:opacity; }
body.cinematic-site.cinematic-active .flow-panel,body.cinematic-site.cinematic-active .mechanism-sticky { opacity:0; visibility:hidden; }
body.cinematic-site.cinematic-active .is-visible { pointer-events:auto; }
body.cinematic-site.cinematic-active .hero-stage.is-visible { pointer-events:auto; }
body.cinematic-site.cinematic-active .hero-fallback,body.cinematic-site.cinematic-active .flow-staticmark { display:none; }

@media(min-width:1600px) {
  body.cinematic-site { --pad:9vw; }
  body.cinematic-site .hero-description { top:65%; }
}
@media(max-width:1100px) and (min-width:701px) {
  body.cinematic-site { --pad:6vw; }
  body.cinematic-site .header-nav { gap:22px; margin-right:30px; }
  body.cinematic-site .hero-type { font-size:7.2vw; }
  body.cinematic-site .reward-heading { gap:20px; }
  body.cinematic-site .reward-row { gap:4vw; }
  body.cinematic-site .eco-heading { left:55%; }
  body.cinematic-site .eco-list { left:calc(55vw - var(--pad)); }
  body.cinematic-site .ecosystem-grid { grid-template-columns:1fr .9fr; gap:6vw; }
  body.cinematic-site .eco-list strong { font-size:22px; }
}
@media(max-width:1000px) {
  body.cinematic-site .header-nav { display:none; }
}
@media(max-width:700px) {
  body.cinematic-site { --pad:7vw; }
  body.cinematic-site .site-header,body.cinematic-site .site-header.scrolled { height:80px; padding:0 var(--pad); }
  body.cinematic-site .brand { gap:8px; }
  body.cinematic-site .brand img { width:29px; height:29px; }
  body.cinematic-site .brand>span { font-size:16px; letter-spacing:.025em; }
  body.cinematic-site .brand small { font-size:6px; letter-spacing:2.7px; margin-top:6px; }
  body.cinematic-site .header-nav { display:none; }
  body.cinematic-site .header-actions { gap:9px; }
  body.cinematic-site .round-button { width:30px; height:30px; font-size:12px; }
  body.cinematic-site .app-link { padding:0 13px; height:31px; font-size:12px; gap:9px; }
  body.cinematic-site .button-dot { width:3px; height:3px; }
  body.cinematic-site .menu-button { height:30px; padding-left:3px; }
  body.cinematic-site .menu-word { display:none; }
  body.cinematic-site .hero-stage,body.cinematic-site .flow-panel,body.cinematic-site .mechanism-sticky { height:auto; min-height:760px; }
  body.cinematic-site .hero-intro { top:15%; gap:20px; font-size:10px; }
  body.cinematic-site .hero-intro .brand-code { font-size:7px; }
  body.cinematic-site .hero-type { top:20%; font-size:clamp(42px,11.4vw,66px); line-height:1.15; letter-spacing:-.055em; max-width:90%; }
  body.cinematic-site .hero-description { top:65%; font-size:13px; line-height:1.85; }
  body.cinematic-site .scene-interaction { bottom:16%; font-size:12px; gap:17px; background:none; }
  body.cinematic-site .circle-arrow { width:28px; height:28px; font-size:14px; }
  body.cinematic-site .scene-bottom { bottom:27px; font-size:10px; }
  body.cinematic-site .scene-bottom .brand-code { font-size:7px; }
  body.cinematic-site .scroll-invitation { gap:10px; font-size:10px; }
  body.cinematic-site .scroll-invitation span { font-size:14px; }
  body.cinematic-site .hero-annotation { left:auto; right:var(--pad); bottom:24%; font-size:10px; }
  body.cinematic-site .model-annotation small { display:none; }
  body.cinematic-site .annotation-line { width:32px; }
  body.cinematic-site .hero-fallback { justify-content:center; align-items:flex-start; }
  body.cinematic-site .hero-fallback img { position:absolute; top:35%; width:48vw; height:28%; margin:0; }
  body.cinematic-site .section-top,body.cinematic-site .join-top { top:14%; font-size:10px; }
  body.cinematic-site .chapter-index { font-size:7px; }
  body.cinematic-site .display-heading { font-size:clamp(38px,10.2vw,56px); line-height:1.2; letter-spacing:-.055em; }
  body.cinematic-site .intro-grid { top:20%; width:86%; }
  body.cinematic-site .intro-heading .chapter-summary { position:absolute; left:0; top:calc(63svh - 20svh); margin:0; font-size:14px; line-height:1.7; }
  body.cinematic-site .intro-body { position:absolute; left:0; top:calc(72svh - 20svh); max-width:85%; margin:0; padding:0; }
  body.cinematic-site .intro-body>p { font-size:13px; line-height:1.7; color:#8b9fb6; }
  body.cinematic-site .desktop-break { display:none; }
  body.cinematic-site .pill-link { font-size:12px; margin-top:13px; gap:11px; }
  body.cinematic-site .play-symbol { width:24px; height:24px; }
  body.cinematic-site .intro-annotation { display:none; }
  body.cinematic-site .intro-bottom { bottom:31px; padding-top:14px; font-size:10px; }
  body.cinematic-site .intro-bottom .text-link { font-size:12px; gap:12px; }
  body.cinematic-site .flow-staticmark { left:32%; top:35%; width:36vw; max-width:none; }
  body.cinematic-site .mechanism-heading { top:14%; }
  body.cinematic-site .mechanism-heading>span { font-size:10px; }
  body.cinematic-site .mechanism-heading h2 { font-size:clamp(25px,6.7vw,37px); letter-spacing:-.04em; line-height:1.3; margin-top:19px; }
  body.cinematic-site .mechanism-heading>p { max-width:86vw; font-size:12px; margin-top:13px; line-height:1.75; }
  body.cinematic-site .mechanism-caption { top:14%; font-size:10px; gap:0; }
  body.cinematic-site .mechanism-caption>span:first-child { display:none; }
  body.cinematic-site .reward-row { inset:64% var(--pad) auto; grid-template-columns:1fr 1px 1fr; gap:6vw; }
  body.cinematic-site .reward-heading { display:block; }
  body.cinematic-site .reward-value { font-size:clamp(45px,12.9vw,70px); letter-spacing:-.055em; }
  body.cinematic-site .reward-value>span { font-size:.28em; margin-left:3px; }
  body.cinematic-site .reward-copy h3 { font-size:14px; margin-top:12px; }
  body.cinematic-site .reward-copy>p:not(.reward-value) { font-size:12px; line-height:1.55; margin-top:11px; }
  body.cinematic-site .reward-copy>a { font-size:12px; gap:15px; margin-top:10px; }
  body.cinematic-site .reward-copy>a>span { font-size:13px; }
  body.cinematic-site .reward-divider { height:151px; }
  body.cinematic-site .mechanism-note { bottom:25px; font-size:10px; line-height:1.7; }
  body.cinematic-site .mechanism .flow-staticmark { left:37%; top:37%; width:26vw; }
  body.cinematic-site .eco-heading { left:var(--pad); right:var(--pad); top:20%; }
  body.cinematic-site .ecosystem .display-heading { font-size:clamp(35px,9.9vw,53px); line-height:1.2; }
  body.cinematic-site .planning-label { position:absolute; top:calc(34svh - 20svh); margin:0; font-size:10px; gap:7px; }
  body.cinematic-site .planning-label i { width:3px; height:3px; }
  body.cinematic-site .ecosystem-grid { inset:0 var(--pad); display:block; }
  body.cinematic-site .eco-stage { position:absolute; inset:32% 0 38%; height:auto; }
  body.cinematic-site .eco-stage-label { display:none; }
  body.cinematic-site .eco-list { position:absolute; left:0; right:0; top:66%; bottom:auto; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
  body.cinematic-site .eco-list>button { min-height:0; display:block; padding:0 0 15px; position:relative; }
  body.cinematic-site .eco-number { display:block; font-size:7px; margin:0 0 11px; }
  body.cinematic-site .eco-list strong { font-size:13px; line-height:1.6; letter-spacing:0; white-space:nowrap; }
  body.cinematic-site .eco-list small,body.cinematic-site .eco-list b { display:none; }
  body.cinematic-site .eco-list>p { grid-column:1/-1; margin-top:17px; font-size:12px; line-height:1.8; }
  body.cinematic-site .ecosystem .flow-staticmark { left:32%; top:37%; width:36vw; }
  body.cinematic-site .protocol-grid { inset:20% var(--pad) auto; }
  body.cinematic-site .protocol-copy { width:100%; }
  body.cinematic-site .protocol-grid h2 { font-size:clamp(38px,10.2vw,56px); line-height:1.2; letter-spacing:-.055em; }
  body.cinematic-site .protocol .chapter-summary { position:absolute; top:calc(62svh - 20svh); margin:0; font-size:13px; }
  body.cinematic-site .protocol-copy .text-link { position:absolute; top:calc(85svh - 20svh); margin:0; font-size:12px; }
  body.cinematic-site .protocol-details { position:absolute; top:calc(73svh - 20svh); margin:0; gap:49px; width:100%; }
  body.cinematic-site .protocol-details strong { font-size:43px; letter-spacing:-.055em; }
  body.cinematic-site .protocol-details strong span { display:inline; font-size:12px; margin-left:7px; }
  body.cinematic-site .protocol-details p { font-size:12px; margin-top:9px; }
  body.cinematic-site .protocol-annotation { display:none; }
  body.cinematic-site .timeline-labels { bottom:30px; padding-top:14px; font-size:10px; }
  body.cinematic-site .protocol .flow-staticmark { left:34%; top:36%; width:32vw; }
  body.cinematic-site .join h2 { top:22%; max-width:none; font-size:clamp(38px,10.4vw,57px); line-height:1.2; letter-spacing:-.055em; margin:0; }
  body.cinematic-site .join-description { top:65%; font-size:13px; }
  body.cinematic-site .join-button { top:72%; padding:13px 18px; font-size:12px; gap:43px; }
  body.cinematic-site .join-button>span:last-child { font-size:18px; }
  body.cinematic-site .join-resource { top:83%; font-size:12px; gap:12px; }
  body.cinematic-site .join-resource>span { font-size:13px; }
  body.cinematic-site .join-signature { bottom:29px; font-size:10px; }
  body.cinematic-site .join-signature .brand-code { font-size:8px; }
  body.cinematic-site .join .flow-staticmark { left:31%; top:39%; width:38vw; }
  body.cinematic-site .site-footer { padding:48px var(--pad) 25px; }
  body.cinematic-site .footer-upper { display:block; }
  body.cinematic-site .footer-logo { font-size:22px; }
  body.cinematic-site .footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:22px 15px; margin-top:34px; font-size:12px; }
  body.cinematic-site .footer-wordmark { font-size:12.4vw; margin:43px 0 36px; }
  body.cinematic-site .footer-wordmark>span { font-size:8vw; }
  body.cinematic-site .footer-bottom { align-items:flex-start; flex-wrap:wrap; gap:14px; font-size:10px; }
  body.cinematic-site .footer-bottom>p { order:3; width:100%; }
  body.cinematic-site .footer-bottom>span:last-child { margin-left:auto; }
  body.cinematic-site dialog { padding:25px; border-radius:4px; }
}
@media(max-width:360px) {
  body.cinematic-site .brand { gap:7px; }
  body.cinematic-site .brand img { width:24px; height:24px; }
  body.cinematic-site .brand>span { font-size:14px; }
  body.cinematic-site .header-actions { gap:7px; }
  body.cinematic-site .round-button { width:26px; height:26px; }
  body.cinematic-site .app-link { padding:0 9px; font-size:11px; gap:8px; }
  body.cinematic-site .menu-button { width:28px; padding:0; }
}
/* Compact viewports retain the same model zone and keep controls inside the screen. */
@media(max-width:700px) and (max-height:700px) {
  body.cinematic-site .site-header,body.cinematic-site .site-header.scrolled { height:67px; }
  body.cinematic-site .hero-intro,body.cinematic-site .section-top,body.cinematic-site .join-top,body.cinematic-site .mechanism-heading,body.cinematic-site .mechanism-caption { top:14%; }
  body.cinematic-site .hero-type { top:20%; font-size:10.4vw; }
  body.cinematic-site .display-heading,body.cinematic-site .protocol-grid h2,body.cinematic-site .join h2 { font-size:9.4vw; }
  body.cinematic-site .hero-description { font-size:13px; top:66%; }
  body.cinematic-site .scene-interaction { bottom:15%; font-size:12px; }
  body.cinematic-site .hero-annotation { bottom:24%; font-size:10px; }
  body.cinematic-site .scene-bottom { bottom:22px; font-size:10px; }
  body.cinematic-site .intro-heading .chapter-summary { top:calc(62svh - 20svh); font-size:13px; }
  body.cinematic-site .intro-body { top:calc(70svh - 20svh); }
  body.cinematic-site .intro-body>p { font-size:12px; line-height:1.7; }
  body.cinematic-site .pill-link { margin-top:10px; font-size:12px; }
  body.cinematic-site .intro-bottom { bottom:23px; padding-top:10px; font-size:10px; }
  body.cinematic-site .mechanism-heading h2 { font-size:6.4vw; margin-top:16px; }
  body.cinematic-site .mechanism-heading>p { font-size:12px; margin-top:9px; }
  body.cinematic-site .reward-value { font-size:11.8vw; }
  body.cinematic-site .reward-copy h3 { margin-top:9px; font-size:14px; }
  body.cinematic-site .reward-copy>p:not(.reward-value) { margin-top:8px; font-size:12px; }
  body.cinematic-site .reward-copy>a { margin-top:9px; font-size:12px; }
  body.cinematic-site .mechanism-note { bottom:19px; font-size:10px; }
  body.cinematic-site .eco-list { top:67%; }
  body.cinematic-site .eco-list strong { font-size:13px; }
  body.cinematic-site .eco-list>button { padding-bottom:12px; }
  body.cinematic-site .eco-list>p { margin-top:13px; font-size:12px; }
  body.cinematic-site .protocol .chapter-summary { top:calc(61svh - 20svh); font-size:12px; }
  body.cinematic-site .protocol-details { top:calc(72svh - 20svh); }
  body.cinematic-site .protocol-details strong { font-size:34px; }
  body.cinematic-site .protocol-details p { font-size:12px; margin-top:9px; }
  body.cinematic-site .protocol-copy .text-link { top:calc(85svh - 20svh); font-size:12px; }
  body.cinematic-site .timeline-labels { bottom:22px; padding-top:11px; font-size:10px; }
  body.cinematic-site .join-description { top:64%; font-size:12px; }
  body.cinematic-site .join-button { top:71%; padding:11px 16px; font-size:12px; }
  body.cinematic-site .join-resource { top:82%; }
  body.cinematic-site .join-signature { bottom:23px; }
}
@media(min-width:701px) and (max-height:650px) {
  body.cinematic-site .site-header,body.cinematic-site .site-header.scrolled { height:74px; }
  body.cinematic-site .hero-type { font-size:8.5vh; top:30%; }
  body.cinematic-site .hero-intro { top:21%; }
  body.cinematic-site .hero-description { font-size:16px; top:59%; }
  body.cinematic-site .scene-interaction { bottom:18%; font-size:12px; }
  body.cinematic-site .scene-bottom { bottom:25px; }
  body.cinematic-site .display-heading,body.cinematic-site .protocol-grid h2,body.cinematic-site .join h2 { font-size:7.8vh; }
  body.cinematic-site .intro-grid { top:26%; }
  body.cinematic-site .chapter-summary { font-size:18px; margin-top:17px; }
  body.cinematic-site .intro-body { margin-top:18px; }
  body.cinematic-site .intro-body>p { font-size:14px; line-height:1.65; }
  body.cinematic-site .pill-link { margin-top:16px; font-size:12px; }
  body.cinematic-site .intro-bottom { bottom:26px; }
  body.cinematic-site .mechanism-heading h2 { font-size:5.5vh; margin-top:16px; }
  body.cinematic-site .mechanism-heading>p { font-size:14px; margin-top:11px; }
  body.cinematic-site .reward-row { top:66%; }
  body.cinematic-site .reward-value { font-size:10vh; }
  body.cinematic-site .reward-copy h3 { font-size:18px; }
  body.cinematic-site .reward-copy>p:not(.reward-value) { font-size:13px; margin-top:10px; }
  body.cinematic-site .reward-copy>a { font-size:12px; margin-top:11px; }
  body.cinematic-site .mechanism-note { bottom:20px; font-size:10px; }
  body.cinematic-site .ecosystem .display-heading { font-size:6.4vh; }
  body.cinematic-site .eco-heading { top:21%; }
  body.cinematic-site .eco-list { top:45%; margin-top:0; }
  body.cinematic-site .eco-list>button { min-height:61px; padding:13px 0; }
  body.cinematic-site .eco-list strong { font-size:22px; }
  body.cinematic-site .eco-list small { font-size:13px; margin-top:6px; }
  body.cinematic-site .eco-list>p { font-size:11px; margin-top:15px; }
  body.cinematic-site .protocol-grid { top:24%; }
  body.cinematic-site .protocol .chapter-summary { font-size:16px; margin-top:17px; }
  body.cinematic-site .protocol-copy .text-link { margin-top:20px; }
  body.cinematic-site .protocol-details { margin-top:24px; gap:45px; }
  body.cinematic-site .protocol-details strong { font-size:35px; }
  body.cinematic-site .protocol-details p { font-size:12px; margin-top:10px; }
  body.cinematic-site .timeline-labels { bottom:27px; }
  body.cinematic-site .join h2 { top:26%; }
  body.cinematic-site .join-description { top:53%; font-size:14px; }
  body.cinematic-site .join-button { top:63%; padding:11px 17px; }
  body.cinematic-site .join-resource { top:76%; }
  body.cinematic-site .join-signature { bottom:27px; }
}

/* A readable static composition is also the no-WebGL and reduced-motion experience. */
body.cinematic-site:not(.cinematic-active) .hero-stage,body.cinematic-site:not(.cinematic-active) .flow-panel,body.cinematic-site:not(.cinematic-active) .mechanism-sticky { opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  body.cinematic-site *,body.cinematic-site *::before,body.cinematic-site *::after { animation:none!important; transition:none!important; }
  body.cinematic-site.cinematic-active .page-world { display:none; }
  body.cinematic-site.cinematic-active .hero,body.cinematic-site.cinematic-active .flow-chapter,body.cinematic-site.cinematic-active .mechanism { height:auto; }
  body.cinematic-site.cinematic-active .hero-scroll,body.cinematic-site.cinematic-active .hero-sticky { height:auto; }
  body.cinematic-site.cinematic-active .hero-stage,body.cinematic-site.cinematic-active .flow-panel,body.cinematic-site.cinematic-active .mechanism-sticky { position:relative!important; inset:auto; height:100svh; min-height:760px; opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; }
  body.cinematic-site .hero-type b { transform:none!important; }
  body.cinematic-site.cinematic-active .hero-fallback { display:flex; }
  body.cinematic-site.cinematic-active .flow-staticmark { display:block!important; }
}
/* Natural reading uses content height; text never depends on viewport motion. */
@media(max-width:700px) {
  body.cinematic-site:not(.cinematic-active) .hero-stage,body.cinematic-site:not(.cinematic-active) .flow-panel,body.cinematic-site:not(.cinematic-active) .mechanism-sticky { min-height:800px; }
  body.cinematic-site:not(.cinematic-active) .intro-grid { top:160px; }
  body.cinematic-site:not(.cinematic-active) .intro-heading .chapter-summary { top:350px; }
  body.cinematic-site:not(.cinematic-active) .intro-body { top:416px; }
  body.cinematic-site:not(.cinematic-active) .protocol .chapter-summary { top:345px; }
  body.cinematic-site:not(.cinematic-active) .protocol-details { top:440px; }
  body.cinematic-site:not(.cinematic-active) .protocol-copy .text-link { top:545px; }
}