:root{
  --bg:#020308;
  --fg:#f7f7fb;
  --muted:rgba(247,247,251,.62);
  --hair:rgba(255,255,255,.11);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
#space,#focus{
  position:fixed;inset:0;width:100vw;height:100vh;
}
#space{
  z-index:0;background:#020308;
  transition:filter 320ms var(--ease-out),opacity 260ms var(--ease-out)
}
#space.blur{
  filter:blur(8px) brightness(.58) saturate(.78);
}
#focus{
  z-index:34;pointer-events:none;opacity:0;
  transition:opacity 260ms var(--ease-out),filter 320ms var(--ease-out);
  filter:saturate(1.08);
}
#focus.show{opacity:1}
#scroll-space{position:relative;height:1895.5vh;z-index:1;pointer-events:none}

/* top chrome */
.chrome{
  position:fixed;z-index:70;left:0;right:0;top:0;height:64px;
  padding:0 clamp(18px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(2,3,8,.74),rgba(2,3,8,0));
  pointer-events:auto;
}
.brand{font-size:12px;font-weight:720;letter-spacing:.22em;opacity:.92;display:flex;align-items:center;gap:8px}
.caelarium-symbol{width:26px;height:26px;display:block;flex:0 0 auto;border-radius:50%;object-fit:cover;box-shadow:0 0 14px rgba(196,180,255,.12)}
.caelarium-symbol--compact{width:19px;height:19px;box-shadow:0 0 10px rgba(196,180,255,.10)}
.caelarium-brand-lockup{display:inline-flex;align-items:center;gap:7px}
.brand-cluster{
  display:flex;
  align-items:center;
  gap:8px;
}
.section-menu-toggle{
  display:none;
  position:relative;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:#fff;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:
    opacity 180ms var(--ease-out),
    background 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.section-menu-toggle.available{
  opacity:1;
  pointer-events:auto;
}
.section-menu-toggle:hover{background:rgba(255,255,255,.075)}
.section-menu-toggle:active{transform:scale(.95)}
.section-menu-toggle span{
  position:absolute;
  left:9px;
  width:14px;
  height:1px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  transform-origin:center;
  transition:
    transform 190ms var(--ease-out),
    top 190ms var(--ease-out),
    opacity 140ms var(--ease-out);
}
.section-menu-toggle span:nth-child(1){top:10px}
.section-menu-toggle span:nth-child(2){top:16px}
.section-menu-toggle span:nth-child(3){top:22px}
.section-menu-toggle.open span:nth-child(1){
  top:16px;
  transform:rotate(45deg);
}
.section-menu-toggle.open span:nth-child(2){
  opacity:0;
}
.section-menu-toggle.open span:nth-child(3){
  top:16px;
  transform:rotate(-45deg);
}
.chrome-right{display:flex;gap:10px}
.btn,.iconbtn{
  border:1px solid var(--hair);background:rgba(255,255,255,.045);color:#fff;
  backdrop-filter:blur(18px) saturate(145%)
}
.btn{
  height:34px;padding:0 13px;border-radius:999px;font-size:11px;cursor:pointer;
  transition:transform 120ms var(--ease-out),background 160ms var(--ease-out)
}
.btn:hover{background:rgba(255,255,255,.085)}
.btn:active{transform:scale(.97)}
.iconbtn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer
}
.iconbtn svg{width:15px;height:15px;opacity:.82}

/* intro copy */
.story{
  position:fixed;z-index:16;left:50%;top:50%;
  width:min(1180px,calc(100vw - 44px));
  transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;opacity:0
}
.story h1,.story h2{margin:0}
.hero-small{
  display:block;margin-bottom:17px;font-size:clamp(13px,1.25vw,19px);
  letter-spacing:.28em;color:rgba(255,255,255,.72);font-weight:570
}
.hero-title{
  font-size:clamp(54px,9vw,132px);line-height:.88;letter-spacing:-.058em;font-weight:745
}
.big{
  font-size:clamp(40px,7vw,102px);line-height:.96;letter-spacing:-.052em;font-weight:710
}
.scrollhint{
  position:fixed;z-index:18;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.36);opacity:0;pointer-events:none;text-align:center
}
.scrollhint::after{
  content:"";display:block;width:1px;height:30px;margin:10px auto 0;
  background:linear-gradient(to bottom,rgba(255,255,255,.46),transparent)
}
.map-caption{
  position:fixed;z-index:20;left:clamp(20px,4vw,64px);bottom:28px;
  max-width:370px;opacity:0;pointer-events:none
}
.map-caption .k{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.map-caption .t{margin-top:8px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.68)}
.drag-hint{
  margin-top:10px;
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.30);
  transition:opacity 180ms var(--ease-out);
}
body.galaxy-dragging .drag-hint{opacity:.72}

/* interaction */
#interaction{position:fixed;inset:0;z-index:28;pointer-events:none;touch-action:pan-y pinch-zoom}
#interaction.active{pointer-events:auto}
.tooltip{
  position:fixed;z-index:85;width:min(330px,calc(100vw - 34px));
  padding:15px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.11);
  background:rgba(7,9,16,.56);backdrop-filter:blur(24px) saturate(155%);
  box-shadow:0 18px 60px rgba(0,0,0,.30);
  opacity:0;pointer-events:none;transform:translateY(7px) scale(.985);
  transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out)
}
.tooltip.show{opacity:1;transform:translateY(0) scale(1)}
.tooltip .name{font-size:15px;font-weight:680}
.tooltip .status{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:5px 0 8px}
.tooltip .desc{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.66)}
.back{
  position:fixed;z-index:87;left:clamp(16px,4vw,62px);top:82px;
  opacity:0;pointer-events:none;transform:translateX(-8px);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)
}
.back.show{opacity:1;pointer-events:auto;transform:translateX(0)}
.panel{
  position:fixed;z-index:88;right:clamp(18px,4vw,64px);top:50%;
  width:min(445px,calc(100vw - 36px));padding:30px;border-radius:26px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 16% 13%,rgba(142,91,231,.13),transparent 35%),
    linear-gradient(145deg,rgba(17,18,27,.78),rgba(5,6,10,.60));
  backdrop-filter:blur(32px) saturate(165%);
  box-shadow:0 32px 100px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transform:translate(28px,-50%) scale(.985);filter:blur(2px);
  transition:opacity 280ms var(--ease-out),transform 360ms var(--ease-out),filter 280ms var(--ease-out)
}
.panel.show{opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(1);filter:blur(0)}
.panel .eyebrow{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.43);text-transform:uppercase;margin-bottom:14px}
.panel h3{font-size:clamp(42px,4.5vw,60px);line-height:.95;letter-spacing:-.05em;margin:0}
.panel .full{font-size:13px;color:rgba(255,255,255,.54);margin-top:8px}
.panel .desc{font-size:14px;line-height:1.68;color:rgba(255,255,255,.73);margin:20px 0 24px}
.panel .buttons{display:flex;flex-wrap:wrap;gap:9px}
.panel .buttons button{
  border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:10px 14px;
  background:rgba(255,255,255,.055);color:#fff;font-size:12px
}
.panel .buttons .primary{background:#f5f5f7;color:#101014}

/* Small-world cards follow their 3D body and adapt to the viewport. */
.world-popover-anchor{
  position:fixed;
  left:0;top:0;
  z-index:89;
  width:0;height:0;
  pointer-events:none;
  transform:translate3d(-2000px,-2000px,0);
  will-change:transform;
}
.world-popover{
  position:absolute;
  left:0;top:0;
  width:min(310px,calc(100vw - 32px));
  padding:17px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 14% 10%,rgba(143,95,225,.09),transparent 36%),
    rgba(9,10,18,.72);
  backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 18px 60px rgba(0,0,0,.30);
  opacity:0;
  pointer-events:none;
  transform:translateY(7px) scale(.98);
  transform-origin:18px 18px;
  filter:blur(1px);
  transition:
    opacity 170ms var(--ease-out),
    transform 190ms var(--ease-out),
    filter 170ms var(--ease-out);
}
.world-popover.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.world-popover .eyebrow{
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.43);
  margin-bottom:9px;
}
.world-popover h3{
  margin:0;
  padding-right:34px;
  font-size:24px;
  line-height:1;
  letter-spacing:-.035em;
}
.world-popover .full{
  margin-top:7px;
  font-size:11px;
  color:rgba(255,255,255,.45);
}
.world-popover .desc{
  margin-top:12px;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,255,255,.68);
}
.world-popover-action{
  display:none;
  margin-top:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:9px 13px;
  background:rgba(255,255,255,.92);
  color:#0b0c12;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
  transition:transform 140ms var(--ease-out),background 160ms var(--ease-out);
}
.world-popover-action.show{display:inline-flex}
.world-popover-action:hover{background:#fff;transform:translateY(-1px)}
.world-popover-action:active{transform:translateY(0) scale(.98)}
.world-popover-hint{
  margin-top:12px;
  font-size:9px;
  color:rgba(255,255,255,.28);
}
.world-popover-close{
  position:absolute;
  right:10px;top:9px;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.70);
  cursor:pointer;
  transition:transform 120ms var(--ease-out),background 150ms var(--ease-out);
}
.world-popover-close:hover{background:rgba(255,255,255,.09)}
.world-popover-close:active{transform:scale(.94)}

/* richer company sections */
.feature{
  position:fixed;z-index:22;left:50%;top:50%;
  width:min(1200px,calc(100vw - 38px));height:min(690px,76vh);
  transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
  display:grid;grid-template-columns:1.03fr .97fr;
  gap:clamp(20px,3vw,44px);align-items:stretch
}
.feature.reverse{grid-template-columns:.97fr 1.03fr}
.copybox{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4vw,62px)}
.copybox .eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.39);margin-bottom:18px}
.copybox h2{margin:0;font-size:clamp(36px,5.2vw,76px);line-height:.97;letter-spacing:-.05em}
.copybox p{margin:22px 0 0;max-width:600px;font-size:clamp(15px,1.35vw,20px);line-height:1.6;color:rgba(255,255,255,.62)}
.visual{
  position:relative;overflow:hidden;border-radius:32px;border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 72% 18%,rgba(83,121,255,.14),transparent 32%),
    radial-gradient(circle at 12% 88%,rgba(233,88,158,.07),transparent 28%),
    linear-gradient(150deg,rgba(14,18,31,.80),rgba(5,7,14,.55));
  box-shadow:0 32px 100px rgba(0,0,0,.28);backdrop-filter:blur(20px) saturate(140%)
}
.visual-caption{position:absolute;left:24px;right:24px;bottom:20px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.40)}
.mission-word{position:absolute;left:34px;top:30px;font-size:14px;font-weight:720;letter-spacing:.20em;color:rgba(255,255,255,.76)}
.mission-grid{position:absolute;left:8%;right:8%;top:23%;bottom:18%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mission-card{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.028);padding:18px;overflow:hidden}
.mission-card strong{display:block;font-size:12px}.mission-card span{display:block;margin-top:7px;font-size:10px;line-height:1.45;color:rgba(255,255,255,.42)}
.frontier-title{position:absolute;left:32px;top:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.frontier-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:26px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(108,132,255,.18),rgba(79,60,150,.12));display:grid;place-items:center;font-size:10px;font-weight:720;letter-spacing:.15em}
.domain{position:absolute;width:118px;height:58px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.026);display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.d1{left:8%;top:20%}.d2{right:8%;top:22%}.d3{left:9%;bottom:19%}.d4{right:10%;bottom:18%}.d5{left:50%;top:11%;transform:translateX(-50%)}
.constellation{position:absolute;left:8%;right:8%;top:16%;bottom:20%}
.northstar{position:absolute;left:50%;top:18%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.92),0 0 45px rgba(145,190,255,.58),0 0 120px rgba(93,116,255,.22)}
.axis{position:absolute;left:50%;top:18%;bottom:17%;width:1px;background:linear-gradient(to bottom,rgba(188,219,255,.36),rgba(153,125,236,.14),transparent)}
.rule{position:absolute;left:50%;transform:translateX(-50%);width:76%;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.022);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:10px;color:rgba(255,255,255,.56)}
.rule b{font-weight:650;color:rgba(255,255,255,.78)}.r1{top:34%}.r2{top:52%}.r3{top:70%}
.final{
  position:fixed;z-index:24;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px,calc(100vw - 42px));
  text-align:center;opacity:0;pointer-events:none;
  will-change:opacity;
}
.final h2{font-size:clamp(46px,7.5vw,104px);line-height:.94;letter-spacing:-.058em;margin:0}
.final p{margin:22px auto 30px;color:rgba(255,255,255,.55);font-size:clamp(15px,1.4vw,20px)}
.final .links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.final .links button,.final .links a{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:11px 16px;font-size:12px}.final .links a{display:inline-flex;align-items:center;text-decoration:none;transition:transform 120ms var(--ease-out),background 160ms var(--ease-out)}.final .links a:active{transform:scale(.97)}
.footer{position:fixed;z-index:25;left:0;right:0;bottom:15px;display:flex;justify-content:space-between;padding:0 clamp(18px,4vw,62px);font-size:10px;color:rgba(255,255,255,.31);opacity:0;pointer-events:none}
@media(max-width:800px){
  .chrome{height:56px;padding:0 16px}
  .back{top:66px;left:14px}

  /* LIA detail: the planet may sit behind this translucent sheet. */
  .panel{
    left:16px;right:16px;top:auto;bottom:16px;width:auto;
    max-height:42vh;overflow:auto;
    background:
      radial-gradient(circle at 16% 13%,rgba(142,91,231,.10),transparent 35%),
      rgba(9,10,18,.62);
    backdrop-filter:blur(26px) saturate(150%);
    transform:translateY(18px) scale(.985)
  }
  .panel.show{transform:translateY(0) scale(1)}

  /* Company story keeps visible breathing room around the visual card. */
  .feature,.feature.reverse{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(240px,1fr);
    width:calc(100vw - 40px);
    height:min(84vh,740px);
    gap:14px
  }
  .feature.reverse .visual{order:2}
  .feature.reverse .copybox{order:1}
  .copybox{padding:18px 4px}
  .copybox h2{font-size:clamp(32px,7.6vw,54px)}
  .copybox p{font-size:14px;margin-top:14px}
  .visual{
    min-height:250px;
    border-radius:24px;
    margin:0 4px 6px;
  }

  .mission-grid{top:21%;bottom:17%;gap:8px}
  .mission-card{padding:12px}
  .domain{width:96px;height:48px;font-size:7px}
  .rule{width:90%;font-size:8px;padding:0 10px}
}

@media(orientation:portrait){
  /* On portrait screens the chapter bar becomes a vertical rail.
     No horizontal clipping and no hidden labels. */
  .section-nav{
    left:auto;
    right:10px;
    top:72px;
    width:min(122px,31vw);
    max-height:calc(100vh - 92px);
    transform:translateX(10px);
  }
  .section-nav.show{
    transform:translateX(0);
  }
  .section-nav-inner{
    width:100%;
    max-height:calc(100vh - 92px);
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    padding:7px;
    overflow-x:hidden;
    overflow-y:auto;
    scroll-padding-block:50px;
    border-radius:22px;
    scroll-snap-type:y proximity;
  }
  .section-nav-brand{
    position:sticky;
    top:0;
    left:auto;
    z-index:3;
    width:100%;
    padding:8px 7px;
    text-align:center;
    border-radius:15px;
    background:rgba(9,10,17,.92);
    backdrop-filter:blur(18px);
  }
  .section-nav button{
    flex:0 0 auto;
    width:100%;
    min-width:0;
    height:31px;
    padding:0 10px;
    text-align:left;
    font-size:9px;
    scroll-snap-align:center;
  }

  #panel{
    left:16px;right:16px;top:auto;bottom:16px;width:auto;
    max-height:40vh;overflow:auto;
  }

  /* The moving small-world card gets more margin on portrait screens. */
  .world-popover{
    width:min(286px,calc(100vw - 36px));
  }

  .map-caption{
    left:16px;right:16px;bottom:16px;
    max-width:none;
    padding-right:2px;
  }
  .map-caption .t{
    max-width:31em;
    font-size:14px;
    line-height:1.42;
  }
  .drag-hint{
    font-size:8px;
    letter-spacing:.14em;
  }

  .feature,.feature.reverse{
    width:calc(100vw - 36px);
  }
}


/* ------------------------------------------------------------
   Apple-like local section navigation
------------------------------------------------------------ */
.section-nav{
  position:fixed;
  z-index:68;
  left:50%;
  top:70px;
  width:min(1240px,calc(100vw - 24px));
  transform:translate(-50%,-10px);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms var(--ease-out),transform 280ms var(--ease-out);
}
.section-nav.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.section-nav-inner{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
  scroll-padding-inline:72px;
  scrollbar-width:none;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(7,8,14,.58);
  backdrop-filter:blur(24px) saturate(155%);
  box-shadow:0 12px 42px rgba(0,0,0,.20);
}
.section-nav-inner::-webkit-scrollbar{display:none}
.section-nav-brand{
  flex:0 0 auto;
  padding:0 10px;
  font-size:9px;
  font-weight:720;
  letter-spacing:.16em;
  color:rgba(255,255,255,.78);
}
.section-nav button{
  flex:1 1 auto;
  min-width:max-content;
  height:30px;
  padding:0 clamp(7px,.75vw,11px);
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.48);
  font:600 clamp(8px,.72vw,10px) -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:background 150ms var(--ease-out),color 150ms var(--ease-out),transform 100ms var(--ease-out);
}
.section-nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
.section-nav button:active{transform:scale(.96)}
.section-nav button.active{color:#fff;background:rgba(255,255,255,.10)}

/* ------------------------------------------------------------
   Company summary
------------------------------------------------------------ */
.company-summary{
  position:fixed;
  z-index:22;
  left:50%;
  top:50%;
  width:min(1120px,calc(100vw - 44px));
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;
  pointer-events:none;
}
.company-summary .eyebrow{
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin-bottom:18px;
}
.company-summary h2{
  margin:0 auto;
  max-width:1040px;
  font-size:clamp(48px,7.2vw,108px);
  line-height:.94;
  letter-spacing:-.055em;
}
.company-summary p{
  max-width:760px;
  margin:28px auto 0;
  font-size:clamp(16px,1.55vw,23px);
  line-height:1.55;
  color:rgba(255,255,255,.57);
}

/* ------------------------------------------------------------
   Feature visual language
------------------------------------------------------------ */
.feature{
  height:min(720px,78vh);
}
.feature .visual{
  isolation:isolate;
}
.visual-label{
  position:absolute;
  top:24px;
  left:26px;
  z-index:4;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.36);
}
.soft-grid{
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,#000 0,#000 42%,transparent 82%);
}

/* Human + Intelligence */
.partner-stage{
  position:absolute;
  inset:0;
}
.partner-human,
.partner-lia{
  position:absolute;
  top:50%;
  border-radius:50%;
  transform:translateY(-50%);
}
.partner-human{
  left:13%;
  width:clamp(90px,13vw,156px);
  aspect-ratio:1;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.92),rgba(157,181,222,.38) 30%,rgba(41,53,91,.08) 70%,transparent 72%);
  box-shadow:0 0 80px rgba(102,142,222,.13);
}
.partner-lia{
  right:11%;
  width:clamp(128px,18vw,220px);
  aspect-ratio:1;
  background:
    radial-gradient(circle at 31% 27%,#faf7ff 0,#d6ccef 17%,#9d77c3 38%,#5c3c78 61%,#1f1932 76%);
  box-shadow:
    0 0 0 1px rgba(204,186,255,.18),
    0 0 90px rgba(137,91,223,.22);
}
.partner-link{
  position:absolute;
  left:31%;
  right:32%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(151,195,255,.60),rgba(198,156,255,.55),transparent);
}
.partner-link::after{
  content:"";
  position:absolute;
  top:-3px;
  width:7px;height:7px;
  border-radius:50%;
  background:#e7efff;
  box-shadow:0 0 16px rgba(160,205,255,.9);
  animation:partnerSignal 3.6s linear infinite;
}
@keyframes partnerSignal{from{left:0}to{left:100%}}
.partner-caption{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:80%;
  text-align:center;
  font-size:10px;
  color:rgba(255,255,255,.40);
}

/* Memory */
.memory-stage{position:absolute;inset:0}
.memory-orbit{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:74%;height:46%;
  border:1px solid rgba(166,190,240,.10);
  border-radius:50%;
}
.memory-orbit.o2{width:54%;height:70%;transform:translate(-50%,-50%) rotate(56deg)}
.memory-core{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:76px;height:76px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#fff,#c8b9e5 27%,#775398 61%,#21172f 80%);
  box-shadow:0 0 54px rgba(142,96,215,.26);
}
.memory-node{
  position:absolute;
  width:12px;height:12px;
  border-radius:50%;
  background:#d9e3ff;
  box-shadow:0 0 18px rgba(152,190,255,.58);
}
.mn1{left:17%;top:30%}.mn2{right:18%;top:25%}.mn3{left:25%;bottom:19%}.mn4{right:23%;bottom:18%}
.memory-strip{
  position:absolute;
  left:12%;right:12%;bottom:15%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.memory-strip span{
  padding:10px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  text-align:center;
  font-size:9px;
  color:rgba(255,255,255,.42);
}

/* Multi-agent */
.minds-stage{position:absolute;inset:0}
.mind-core{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:750;letter-spacing:.14em;
  background:radial-gradient(circle at 35% 28%,#fff,#c8b6e7 28%,#6b468e 64%,#21172e 78%);
  box-shadow:0 0 70px rgba(142,91,220,.23)
}
.agent-node{
  position:absolute;
  width:92px;height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  display:grid;place-items:center;
  font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.50);
}
.an1{left:8%;top:19%}.an2{right:8%;top:18%}.an3{left:8%;bottom:17%}.an4{right:8%;bottom:17%}.an5{left:50%;top:9%;transform:translateX(-50%)}
.agent-line{
  position:absolute;
  left:50%;top:50%;
  width:1px;height:1px;
  box-shadow:
    -185px -110px 0 0 rgba(130,168,238,.33),
     185px -112px 0 0 rgba(168,113,229,.29),
    -182px  112px 0 0 rgba(82,184,174,.27),
     182px  112px 0 0 rgba(225,104,162,.22),
       0px -145px 0 0 rgba(232,194,120,.26);
}

/* Local */
.local-stage{position:absolute;inset:0}
.device-frame{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:70%;height:56%;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 50% 45%,rgba(109,92,200,.11),transparent 44%),
    rgba(3,5,11,.46);
  box-shadow:inset 0 1px rgba(255,255,255,.03);
}
.local-shield{
  position:absolute;left:50%;top:47%;
  transform:translate(-50%,-50%);
  width:94px;height:108px;
  clip-path:polygon(50% 0,92% 15%,85% 70%,50% 100%,15% 70%,8% 15%);
  background:linear-gradient(160deg,rgba(235,234,244,.86),rgba(112,79,155,.48));
  display:grid;place-items:center;
  color:#11131a;font-weight:800;font-size:20px;
  box-shadow:0 0 66px rgba(136,94,212,.20);
}
.local-tags{
  position:absolute;left:10%;right:10%;bottom:12%;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
}
.local-tags span{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.45);
  font-size:8px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:8px 11px;border-radius:999px;
}

/* Action pipeline */
.action-stage{position:absolute;inset:0}
.action-flow{
  position:absolute;
  left:8%;right:8%;top:50%;
  transform:translateY(-50%);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  align-items:center;
}
.action-step{
  position:relative;
  min-height:76px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  color:rgba(255,255,255,.66);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}
.action-step b{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,.86);
}
.action-pulse{
  position:absolute;
  left:10%;right:10%;top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(123,178,255,.32),rgba(190,130,246,.34),transparent);
}
.action-pulse::after{
  content:"";
  position:absolute;
  top:-3px;
  width:7px;height:7px;border-radius:50%;
  background:#e7efff;
  box-shadow:0 0 18px rgba(160,205,255,.9);
  animation:actionSignal 5s linear infinite;
}
@keyframes actionSignal{from{left:0}to{left:100%}}

/* System exploration hint */
.system-drag-hint{
  position:fixed;
  z-index:44;
  left:50%;
  bottom:26px;
  transform:translate(-50%,10px);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(7,8,14,.40);
  backdrop-filter:blur(16px);
  color:rgba(255,255,255,.34);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out);
}
.system-drag-hint.show{opacity:1;transform:translate(-50%,0)}
body.lia-dragging .system-drag-hint,
body.system-dragging .system-drag-hint{color:rgba(255,255,255,.68)}

/* ------------------------------------------------------------
   Standard end-of-page footer
------------------------------------------------------------ */
.site-footer{
  position:relative;
  z-index:60;
  min-height:560px;
  padding:70px max(24px,calc((100vw - 1040px)/2)) 28px;
  background:#0a0b0f;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(245,245,247,.58);
}
.site-footer-top{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer-top strong{
  color:#f5f5f7;
  font-size:16px;
  letter-spacing:.14em;
}
.site-footer-top p{
  margin:0;
  max-width:620px;
  font-size:12px;
  line-height:1.65;
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:28px;
  padding:34px 0 40px;
}
.footer-column h4{
  margin:0 0 13px;
  color:rgba(245,245,247,.88);
  font-size:10px;
  font-weight:650;
}
.footer-column a{
  display:block;
  margin:9px 0;
  color:rgba(245,245,247,.50);
  font-size:10px;
  text-decoration:none;
}
.footer-column a:hover{color:#fff}
.site-footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:9px;
  color:rgba(245,245,247,.34);
}
.site-footer-bottom a{color:inherit;text-decoration:none;margin-left:16px}

@media(max-width:900px){
  .section-nav{
    top:62px;
    width:calc(100vw - 16px);
  }
  .section-nav-inner{
    justify-content:flex-start;
    gap:2px;
    padding:5px 6px;
    scroll-snap-type:x proximity;
  }
  .section-nav-brand{
    position:sticky;
    left:0;
    z-index:2;
    background:rgba(9,10,17,.88);
    border-radius:999px;
    padding:0 10px;
  }
  .section-nav button{
    flex:0 0 auto;
    min-width:auto;
    padding:0 10px;
    font-size:9px;
    scroll-snap-align:center;
  }
}
@media(max-width:900px){
  .section-nav{top:62px;width:calc(100vw - 24px)}
  .section-nav-brand{padding-left:9px;padding-right:8px}
  .section-nav button{padding:0 10px}
  .footer-columns{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .company-summary{width:calc(100vw - 34px)}
  .company-summary h2{font-size:clamp(44px,13vw,70px)}
  .company-summary p{font-size:15px;margin-top:20px}
  .partner-human{left:8%}
  .partner-lia{right:6%}
  .memory-strip{left:6%;right:6%}
  .action-flow{left:4%;right:4%;gap:5px}
  .action-step{min-height:66px;font-size:6px;border-radius:14px}
  .action-step b{font-size:14px}
  .footer-columns{grid-template-columns:repeat(2,1fr);gap:26px 20px}
  .site-footer{padding:54px 24px 24px}
  .site-footer-top{display:block}
  .site-footer-top p{margin-top:16px}
  .site-footer-bottom{display:block}
  .site-footer-bottom .legal{margin-top:12px}
  .site-footer-bottom a{margin:0 12px 0 0}
}

.company-summary,
.feature,
.final{
  will-change:opacity,transform;
}

@media(orientation:portrait) and (max-width:700px){
  .company-summary{
    width:calc(100vw - 42px);
    padding-right:min(78px,13vw);
  }
  .feature{
    width:calc(100vw - 34px);
  }
}

/* ============================================================
   Final portrait navigation override.
   Must remain at the end of the stylesheet so no earlier mobile
   rule can stretch the rail back into a full-width pill.
============================================================ */
@media (orientation:portrait){
  .section-nav{
    position:fixed !important;
    left:12px !important;
    right:auto !important;
    top:62px !important;

    width:116px !important;
    max-width:116px !important;
    height:auto !important;
    max-height:calc(100vh - 82px) !important;

    transform:translateX(-8px) !important;
  }

  .section-nav.show{
    transform:translateX(0) !important;
  }

  .section-nav-inner{
    width:116px !important;
    max-width:116px !important;
    height:auto !important;
    max-height:calc(100vh - 82px) !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:2px !important;
    padding:6px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;

    border-radius:18px !important;
    scroll-snap-type:y proximity !important;
    scroll-padding-block:42px !important;
  }

  .section-nav-brand{
    position:sticky !important;
    top:0 !important;
    left:auto !important;

    width:100% !important;
    min-width:0 !important;

    padding:8px 7px !important;
    margin:0 0 2px !important;

    text-align:left !important;
    font-size:8px !important;
    letter-spacing:.14em !important;

    border-radius:12px !important;
    background:rgba(9,10,17,.92) !important;
    backdrop-filter:blur(18px) !important;
  }

  .section-nav button{
    flex:0 0 auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:29px !important;
    padding:0 9px !important;

    text-align:left !important;
    white-space:nowrap !important;

    font-size:8.5px !important;
    border-radius:11px !important;

    scroll-snap-align:center !important;
  }

  /* Do not reserve a giant blank area for the rail.
     It floats above the galaxy, like a compact control palette. */
  .company-summary{
    padding-right:0 !important;
  }
}

@media (orientation:portrait) and (max-width:420px){
  .section-nav{
    left:9px !important;
    width:108px !important;
    max-width:108px !important;
  }

  .section-nav-inner{
    width:108px !important;
    max-width:108px !important;
  }

  .section-nav button{
    height:28px !important;
    padding:0 8px !important;
    font-size:8px !important;
  }
}


/* ============================================================
   Collapsible portrait section navigation.
   Default state: only the hamburger is visible.
============================================================ */
@media (orientation:portrait){
  .section-menu-toggle{
    display:block;
  }

  .section-nav,
  .section-nav.show{
    left:12px !important;
    right:auto !important;
    top:62px !important;

    width:116px !important;
    max-width:116px !important;
    height:auto !important;
    max-height:calc(100vh - 82px) !important;

    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(-10px,0,0) scale(.985) !important;
    transform-origin:top left !important;
    filter:blur(1px);

    transition:
      opacity 180ms var(--ease-out),
      transform 220ms var(--ease-out),
      filter 180ms var(--ease-out) !important;
  }

  .section-nav.portrait-open,
  .section-nav.show.portrait-open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translate3d(0,0,0) scale(1) !important;
    filter:blur(0);
  }

  .section-nav-inner{
    width:116px !important;
    max-width:116px !important;
    max-height:calc(100vh - 82px) !important;
  }

  /* When collapsed the story receives the full screen width again. */
  .company-summary{
    padding-right:0 !important;
  }
}

@media (orientation:portrait) and (max-width:420px){
  .section-nav,
  .section-nav.show,
  .section-nav.portrait-open,
  .section-nav.show.portrait-open{
    left:9px !important;
    width:108px !important;
    max-width:108px !important;
  }

  .section-nav-inner{
    width:108px !important;
    max-width:108px !important;
  }

  .brand-cluster{
    gap:6px;
  }

  .section-menu-toggle{
    width:32px;
    height:32px;
  }

  .section-menu-toggle span{
    left:8px;
  }
}


/* ============================================================
   Solid portrait menu.
   The rail is collapsed by default, so when opened prioritize
   clarity instead of showing the content beneath it.
============================================================ */
@media (orientation:portrait){
  .section-nav-inner{
    background:#0b0c12 !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:
      0 20px 70px rgba(0,0,0,.58),
      inset 0 1px rgba(255,255,255,.025) !important;

    /* Remove the translucent/glass look on the expanded menu itself. */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .section-nav-brand{
    background:#11121a !important;
    color:rgba(255,255,255,.88) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .section-nav button{
    color:rgba(255,255,255,.60) !important;
  }

  .section-nav button:hover{
    color:#fff !important;
    background:#191a23 !important;
  }

  .section-nav button.active{
    color:#fff !important;
    background:#2b2c36 !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
  }

  /* The hamburger itself remains compact and readable. */
  .section-menu-toggle{
    background:#11121a !important;
    border-color:rgba(255,255,255,.14) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .section-menu-toggle.open{
    background:#191a23 !important;
  }
}


/* ============================================================
   CAELARIUM company homepage — company-level story only.
   LIA product capabilities belong in Discover LIA.
============================================================ */
.company-chapter{
  position:fixed;
  z-index:22;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:clamp(34px,6vw,104px);
  padding:
    clamp(96px,12vh,138px)
    clamp(32px,6.5vw,106px)
    clamp(54px,7vh,80px);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.company-chapter.reverse-company{
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
}
.chapter-copy{
  position:relative;
  z-index:3;
  max-width:620px;
}
.chapter-copy .eyebrow{
  margin-bottom:20px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.chapter-copy h2{
  margin:0;
  font-size:clamp(48px,5.5vw,86px);
  line-height:.96;
  letter-spacing:-.055em;
  max-width:720px;
}
.chapter-copy p{
  margin:28px 0 0;
  max-width:620px;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.62;
  color:rgba(255,255,255,.56);
}
.chapter-note{
  margin-top:24px;
  max-width:560px;
  font-size:11px;
  line-height:1.55;
  letter-spacing:.035em;
  color:rgba(255,255,255,.34);
}
.chapter-visual{
  position:relative;
  height:min(70vh,720px);
  min-height:470px;
  overflow:visible;
}

/* ---------------- Frontier worlds ---------------- */
.frontier-worlds-visual{
  filter:drop-shadow(0 30px 90px rgba(0,0,0,.20));
}
.frontier-worlds-visual::before{
  content:"";
  position:absolute;
  inset:5% 3% 4%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 48%,rgba(129,92,196,.10),transparent 25%),
    radial-gradient(circle at 56% 42%,rgba(56,124,195,.07),transparent 34%),
    radial-gradient(circle at 45% 60%,rgba(211,101,151,.035),transparent 40%);
}
.future-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(190,202,236,.08);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
}
.fo1{width:46%;height:28%}
.fo2{width:71%;height:43%}
.fo3{width:93%;height:58%}
.future-world{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.34);
  text-align:center;
}
.future-world .world-core{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(93,96,119,.18) 45%,rgba(25,26,37,.30) 72%);
  border:1px solid rgba(255,255,255,.07);
}
.future-world b{
  font-size:8px;
  letter-spacing:.12em;
  font-weight:650;
}
.future-world em{
  font-style:normal;
  font-size:7px;
  letter-spacing:.11em;
  color:rgba(255,255,255,.22);
}
.future-world.lia-world{
  left:48%;
  top:45%;
  transform:translate(-50%,-50%);
  color:#fff;
}
.future-world.lia-world .world-core{
  width:42px;
  height:42px;
  background:
    radial-gradient(circle at 34% 28%,#fff 0,#e7e9ff 22%,#9781dc 50%,#302542 75%);
  box-shadow:
    0 0 28px rgba(218,229,255,.52),
    0 0 72px rgba(133,97,226,.34);
}
.future-world.lia-world em{
  color:rgba(255,255,255,.50);
}
.fw-robotics{left:18%;top:23%}
.fw-mobility{right:14%;top:29%}
.fw-neuro{left:12%;bottom:19%}
.fw-health{right:18%;bottom:16%}
.fw-forming{right:38%;top:10%}
.fw-forming .world-core{
  box-shadow:0 0 18px rgba(138,99,211,.12);
}
.frontier-signal{
  position:absolute;
  left:48%;
  top:45%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px #fff;
  animation:frontierSignal 4.6s ease-out infinite;
}
@keyframes frontierSignal{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.75}
  65%{transform:translate(-50%,-50%) scale(12);opacity:0}
  100%{transform:translate(-50%,-50%) scale(12);opacity:0}
}

/* ---------------- Human capability / agency ---------------- */
.agency-visual{
  display:grid;
  place-items:center;
}
.agency-space{
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(128,94,195,.11),transparent 25%),
    radial-gradient(circle at 48% 52%,rgba(66,129,210,.06),transparent 48%);
}
.agency-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(190,204,238,.10);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.ar1{width:22%;height:22%}
.ar2{width:39%;height:39%}
.ar3{width:58%;height:58%}
.ar4{width:78%;height:78%}
.agency-human{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:4;
}
.agency-human span{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 20px rgba(255,255,255,.60),
    0 0 58px rgba(135,171,235,.36);
}
.agency-human b{
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.62);
}
.agency-cap{
  position:absolute;
  font-size:8px;
  letter-spacing:.13em;
  color:rgba(255,255,255,.32);
  transform:translate(-50%,-50%);
}
.ac-intelligence{left:50%;top:12%}
.ac-memory{left:19%;top:31%}
.ac-mobility{right:5%;top:30%;transform:none}
.ac-health{left:14%;bottom:24%}
.ac-action{right:10%;bottom:24%}
.ac-knowledge{left:50%;bottom:9%}
.agency-axis{
  position:absolute;
  left:50%;
  top:15%;
  bottom:15%;
  width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.13),transparent);
}
.agency-caption{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:80%;
  text-align:center;
  font-size:9px;
  line-height:1.55;
  color:rgba(255,255,255,.30);
}

/* ---------------- Mission / civilization expansion ---------------- */
.civilization-visual{
  display:grid;
  place-items:center;
}
.civilization-visual::before{
  content:"";
  position:absolute;
  inset:5%;
  background:
    radial-gradient(circle at center,rgba(124,96,203,.08),transparent 33%),
    radial-gradient(circle at 60% 48%,rgba(69,142,208,.05),transparent 45%);
  border-radius:50%;
}
.civilization-network{
  width:100%;
  height:100%;
  overflow:visible;
}
.network-lines path{
  fill:none;
  stroke:rgba(188,205,239,.13);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.network-nodes circle{
  fill:rgba(219,229,250,.70);
  filter:drop-shadow(0 0 6px rgba(173,200,255,.28));
}
.network-nodes .origin-node{
  fill:#fff;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.72));
}
.network-labels text{
  fill:rgba(255,255,255,.25);
  font-size:12px;
  letter-spacing:3px;
  text-anchor:middle;
}
.network-lines,
.network-nodes{
  transform-box:fill-box;
  transform-origin:center;
}
.civilization-network{
  animation:civilizationBreath 8s ease-in-out infinite alternate;
}
@keyframes civilizationBreath{
  from{transform:scale(.985);opacity:.78}
  to{transform:scale(1.015);opacity:1}
}
.civilization-caption{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:78%;
  text-align:center;
  font-size:9px;
  color:rgba(255,255,255,.30);
}

/* ---------------- Principles / North Star ---------------- */
.principles-company .chapter-copy{
  max-width:680px;
}
.north-star-visual{
  min-height:520px;
}
.north-star-field{
  position:absolute;
  inset:4%;
  background:
    radial-gradient(circle at 70% 27%,rgba(255,255,255,.035),transparent 13%),
    radial-gradient(circle at 70% 27%,rgba(110,138,214,.035),transparent 36%);
}
.north-star-core{
  position:absolute;
  left:70%;
  top:26%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 12px #fff,
    0 0 36px rgba(196,216,255,.78),
    0 0 100px rgba(122,110,211,.28);
}
.north-star-ray{
  position:absolute;
  left:70%;
  top:26%;
  width:1px;
  height:46%;
  transform:translateX(-50%);
  background:linear-gradient(rgba(255,255,255,.24),transparent);
}
.north-principles{
  position:absolute;
  left:9%;
  bottom:17%;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.north-principles span{
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.40);
}
.north-caption{
  position:absolute;
  left:9%;
  bottom:6%;
  font-size:9px;
  color:rgba(255,255,255,.24);
}

/* ---------------- Mobile ---------------- */
@media(max-width:820px){
  .company-chapter,
  .company-chapter.reverse-company{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(300px,1fr);
    align-content:center;
    gap:20px;
    padding:
      90px
      20px
      42px;
  }

  .chapter-copy{
    max-width:none;
  }

  .chapter-copy h2{
    font-size:clamp(40px,10.5vw,64px);
  }

  .chapter-copy p{
    font-size:14px;
    margin-top:18px;
  }

  .reverse-company .chapter-visual{
    order:2;
  }

  .reverse-company .chapter-copy{
    order:1;
  }

  .chapter-visual{
    min-height:300px;
    height:min(48vh,470px);
  }

  .future-world b{
    font-size:6.5px;
  }

  .future-world em{
    font-size:5.8px;
  }

  .agency-cap{
    font-size:6px;
  }

  .network-labels text{
    font-size:9px;
  }

  .north-star-core{
    left:72%;
  }
  .north-star-ray{
    left:72%;
  }
}


/* ============================================================
   v0.27 Company visual polish
============================================================ */

/* Frontier: the awakened LIA world uses the approved planet artwork. */
.future-world{
  color:rgba(255,255,255,.58);
}
.future-world b{
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 10px rgba(0,0,0,.78);
}
.future-world em{
  color:rgba(255,255,255,.40);
  text-shadow:0 1px 8px rgba(0,0,0,.72);
}
.future-world.lia-world{
  color:#fff;
}
.future-world.lia-world .world-core{
  width:68px;
  height:68px;
  border:0;
  background:
    url("../images/lia-approved-planet.webp")
    center / contain
    no-repeat;
  box-shadow:none;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.36))
    drop-shadow(0 0 28px rgba(146,101,226,.38));
  animation:frontierLiaFloat 6.8s ease-in-out infinite alternate;
}
.future-world.lia-world b{
  color:rgba(255,255,255,.96);
}
.future-world.lia-world em{
  color:rgba(255,255,255,.68);
}
@keyframes frontierLiaFloat{
  from{transform:translateY(2px) scale(.98)}
  to{transform:translateY(-3px) scale(1.025)}
}

/* Agency: readable supporting information, still subordinate to the headline. */
.agency-cap{
  color:rgba(255,255,255,.56);
  text-shadow:0 1px 9px rgba(0,0,0,.78);
}
.agency-caption{
  color:rgba(255,255,255,.47);
}
.agency-ring{
  border-color:rgba(204,216,245,.14);
}
.agency-human b{
  color:rgba(255,255,255,.78);
}

/* Mission network labels / captions. */
.network-labels text{
  fill:rgba(255,255,255,.50);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.75));
}
.civilization-caption{
  color:rgba(255,255,255,.46);
}
.network-lines path{
  stroke:rgba(197,213,246,.18);
}
.network-nodes circle{
  fill:rgba(226,234,252,.78);
}

/* Chapter supporting copy. */
.chapter-note{
  color:rgba(255,255,255,.45);
}

/* ------------------------------------------------------------
   North Star — scroll-driven camera focus scene.
   --north-focus: 0 = distant planet above the galaxy
                  1 = camera has moved upward and focused on it
------------------------------------------------------------ */
.principles-company{
  --north-focus:0;
}

.north-star-visual{
  min-height:540px;
  overflow:visible;
  perspective:1000px;
}

.north-focus-scene{
  position:absolute;
  inset:-8% -6% -5%;
  overflow:visible;
  transform-style:preserve-3d;
}

.north-star-planet-wrap{
  position:absolute;
  left:58%;
  top:50%;
  width:min(340px,30vw);
  aspect-ratio:1;
  transform:
    translate(-50%,-50%)
    translateY(calc((1 - var(--north-focus)) * -250px))
    scale(calc(.16 + var(--north-focus) * .84));
  transform-origin:center;
  will-change:transform,opacity;
  opacity:calc(.36 + var(--north-focus) * .64);
  z-index:5;
}

.north-star-planet{
  position:absolute;
  inset:0;
  background:
    url("../images/north-star-thumbnail.webp")
    center / contain
    no-repeat;
  filter:
    drop-shadow(0 0 14px rgba(245,248,255,.28))
    drop-shadow(0 0 54px rgba(145,164,226,.26));
  transform:
    rotate(calc((1 - var(--north-focus)) * -8deg));
  transition:filter .25s linear;
}

.north-star-planet-glow{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.22),
      rgba(175,197,255,.075) 44%,
      transparent 72%
    );
  filter:blur(16px);
  transform:scale(calc(.72 + var(--north-focus) * .36));
  opacity:calc(.40 + var(--north-focus) * .34);
  z-index:-1;
}

.north-star-name{
  position:absolute;
  left:50%;
  top:100%;
  transform:
    translate(-50%,8px)
    translateY(calc((1 - var(--north-focus)) * 8px));
  font-size:9px;
  letter-spacing:.20em;
  white-space:nowrap;
  color:rgba(255,255,255,calc(.20 + var(--north-focus) * .54));
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}

.north-orbit-trace{
  position:absolute;
  left:57%;
  top:62%;
  border:1px solid rgba(183,202,240,.10);
  border-radius:50%;
  transform:
    translate(-50%,-50%)
    translateY(calc(var(--north-focus) * 130px))
    rotate(-7deg)
    scale(calc(1 + var(--north-focus) * .10));
  opacity:calc(.50 - var(--north-focus) * .38);
}
.north-orbit-trace.nt1{
  width:78%;
  height:28%;
}
.north-orbit-trace.nt2{
  width:98%;
  height:40%;
  opacity:calc(.34 - var(--north-focus) * .26);
}

.north-principles{
  left:6%;
  bottom:15%;
  opacity:calc(.42 + var(--north-focus) * .58);
  transform:
    translateY(calc((1 - var(--north-focus)) * 18px));
}
.north-principles span{
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 10px rgba(0,0,0,.76);
}

.north-caption{
  left:6%;
  bottom:4%;
  color:rgba(255,255,255,.42);
}

@media(max-width:820px){
  .future-world.lia-world .world-core{
    width:58px;
    height:58px;
  }

  .agency-cap{
    color:rgba(255,255,255,.62);
  }

  .network-labels text{
    fill:rgba(255,255,255,.58);
  }

  .north-star-planet-wrap{
    left:62%;
    width:min(260px,52vw);
    transform:
      translate(-50%,-50%)
      translateY(calc((1 - var(--north-focus)) * -150px))
      scale(calc(.18 + var(--north-focus) * .82));
  }

  .north-principles{
    left:4%;
  }

  .north-caption{
    left:4%;
  }
}


/* ============================================================
   v0.28 Readability + North Star camera push
============================================================ */

/* Frontier labels */
.future-world b{
  font-size:11px !important;
  letter-spacing:.11em !important;
  color:rgba(255,255,255,.78) !important;
}
.future-world em{
  font-size:8.5px !important;
  letter-spacing:.10em !important;
  color:rgba(255,255,255,.50) !important;
}
.future-world.lia-world b{
  color:#fff !important;
}
.future-world.lia-world em{
  color:rgba(255,255,255,.74) !important;
}

/* Agency labels */
.agency-cap{
  font-size:10px !important;
  letter-spacing:.12em !important;
  color:rgba(255,255,255,.66) !important;
}
.agency-human b{
  font-size:11px !important;
}
.agency-caption{
  font-size:11px !important;
  color:rgba(255,255,255,.56) !important;
}

/* Mission labels */
.network-labels text{
  font-size:16px !important;
  letter-spacing:2.2px !important;
  fill:rgba(255,255,255,.68) !important;
}
.civilization-caption{
  font-size:11px !important;
  color:rgba(255,255,255,.54) !important;
}
.network-lines path{
  stroke:rgba(205,218,247,.23) !important;
}
.network-nodes circle{
  fill:rgba(232,238,255,.86) !important;
}
.network-nodes .origin-node{
  r:11;
  fill:#fff !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.92))
    drop-shadow(0 0 22px rgba(172,199,255,.50)) !important;
}

/* North Star labels */
.north-star-name{
  font-size:11px !important;
  letter-spacing:.20em !important;
  color:rgba(255,255,255,calc(.32 + var(--north-focus) * .60)) !important;
}
.north-principles span{
  font-size:14px !important;
  letter-spacing:.15em !important;
  color:rgba(255,255,255,.72) !important;
}
.north-caption{
  font-size:11px !important;
  color:rgba(255,255,255,.52) !important;
}

/* Stronger North Star "camera push" feeling.
   Planet begins nearly as a distant point, then becomes a close subject. */
.north-star-planet-wrap{
  left:60% !important;
  top:49% !important;
  width:min(390px,34vw) !important;
  transform:
    translate(-50%,-50%)
    translateY(calc((1 - var(--north-focus)) * -330px))
    scale(calc(.055 + var(--north-focus) * 1.045)) !important;
  opacity:calc(.18 + var(--north-focus) * .82) !important;
}

.north-star-planet{
  transform:
    rotate(calc((1 - var(--north-focus)) * -11deg))
    scale(calc(.88 + var(--north-focus) * .12)) !important;
}

.north-star-planet-glow{
  inset:8% !important;
  transform:
    scale(calc(.42 + var(--north-focus) * .92)) !important;
  opacity:calc(.30 + var(--north-focus) * .55) !important;
}

.north-orbit-trace{
  transform:
    translate(-50%,-50%)
    translateY(calc(var(--north-focus) * 210px))
    scale(calc(1 + var(--north-focus) * .35)) !important;
  opacity:calc(.56 - var(--north-focus) * .50) !important;
}

.north-orbit-trace.nt2{
  opacity:calc(.38 - var(--north-focus) * .34) !important;
}

/* Slightly dim the principle labels at the very beginning so the
   camera movement gets a clean visual lead-in. */
.north-principles{
  opacity:calc(.14 + var(--north-focus) * .86) !important;
  transform:
    translateY(calc((1 - var(--north-focus)) * 28px)) !important;
}

.north-caption{
  opacity:calc(.12 + var(--north-focus) * .88);
}

/* Mobile readability */
@media(max-width:820px){
  .future-world b{
    font-size:8.5px !important;
  }
  .future-world em{
    font-size:7px !important;
  }
  .agency-cap{
    font-size:8px !important;
  }
  .agency-caption{
    font-size:9.5px !important;
  }
  .network-labels text{
    font-size:12px !important;
  }
  .civilization-caption{
    font-size:9.5px !important;
  }
  .north-principles span{
    font-size:11px !important;
  }
  .north-caption{
    font-size:9px !important;
  }
  .north-star-planet-wrap{
    left:62% !important;
    width:min(310px,62vw) !important;
    transform:
      translate(-50%,-50%)
      translateY(calc((1 - var(--north-focus)) * -210px))
      scale(calc(.065 + var(--north-focus) * 1.035)) !important;
  }
}


/* ============================================================
   v0.29 North Star = real interactive 3D world
============================================================ */
#northStar3d{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:20;
  pointer-events:none;
  opacity:0;
  transition:opacity 180ms linear;
}

#northStarHit{
  position:fixed;
  left:-999px;
  top:-999px;
  width:0;
  height:0;
  z-index:33;
  border-radius:50%;
  pointer-events:none;
  touch-action:pan-y pinch-zoom;
  cursor:grab;
}
#northStarHit.active{pointer-events:auto}
#northStarHit.dragging{cursor:grabbing}

.north-star-hover-label{
  position:absolute;
  left:50%;
  top:100%;
  min-width:210px;
  transform:translate(-50%,14px);
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#0b0c12;
  box-shadow:0 14px 46px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity 150ms var(--ease-out),transform 170ms var(--ease-out);
}
#northStarHit:hover .north-star-hover-label,
#northStarHit.hovering .north-star-hover-label{
  opacity:1;
  transform:translate(-50%,9px);
}
.north-star-hover-label strong{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.92);
}
.north-star-hover-label span{
  display:block;
  margin-top:5px;
  font-size:7.5px;
  letter-spacing:.10em;
  color:rgba(255,255,255,.42);
}

.north-star-info{
  position:fixed;
  z-index:42;
  width:min(300px,calc(100vw - 30px));
  padding:16px 17px 15px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.11);
  background:#0b0c12;
  box-shadow:0 18px 60px rgba(0,0,0,.38);
  opacity:0;
  pointer-events:none;
  transform:translateY(7px) scale(.98);
  transition:opacity 170ms var(--ease-out),transform 190ms var(--ease-out);
}
.north-star-info.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.north-star-info .eyebrow{
  font-size:8px;
  letter-spacing:.17em;
  color:rgba(255,255,255,.40);
}
.north-star-info strong{
  display:block;
  margin-top:7px;
  font-size:18px;
  color:#fff;
}
.north-star-info span{
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.55;
  color:rgba(255,255,255,.58);
}

.north-star-planet-wrap,
.north-star-planet,
.north-star-planet-glow,
.north-orbit-trace{
  display:none !important;
}

.future-world b{
  font-size:11px !important;
  color:rgba(255,255,255,.80) !important;
}
.future-world em{
  font-size:8.5px !important;
  color:rgba(255,255,255,.52) !important;
}
.agency-cap{
  font-size:10px !important;
  color:rgba(255,255,255,.68) !important;
}
.agency-caption,
.civilization-caption{
  font-size:11px !important;
  color:rgba(255,255,255,.56) !important;
}
.network-labels text{
  font-size:16px !important;
  fill:rgba(255,255,255,.70) !important;
}
.north-principles span{
  font-size:14px !important;
  color:rgba(255,255,255,.72) !important;
}
.north-caption{
  font-size:11px !important;
  color:rgba(255,255,255,.52) !important;
}

.north-principles{
  opacity:calc(.12 + var(--north-focus) * .88) !important;
  transform:translateY(calc((1 - var(--north-focus)) * 22px)) !important;
}
.north-caption{
  opacity:calc(.10 + var(--north-focus) * .90) !important;
}

@media(max-width:820px){
  .future-world b{font-size:8.5px !important}
  .future-world em{font-size:7px !important}
  .agency-cap{font-size:8px !important}
  .network-labels text{font-size:12px !important}
  .north-principles span{font-size:11px !important}
  .north-caption{font-size:9px !important}
  .north-star-hover-label{min-width:190px}
}


/* ============================================================
   v0.30 North Star = luminous stellar world
============================================================ */
.north-star-hover-label{
  background:#0a0b10 !important;
  border-color:rgba(255,239,196,.14) !important;
}
.north-star-hover-label strong{
  color:#fff !important;
}
.north-star-hover-label span{
  color:rgba(255,244,219,.50) !important;
}

.north-star-info{
  background:#0a0b10 !important;
}
.north-star-info strong{
  color:#fff !important;
}


/* ============================================================
   v0.31 Mission readability + cool persistent North Star
============================================================ */

/* Do NOT scale the entire SVG; scaling text was the main source of blur. */
.civilization-network{
  animation:none !important;
  transform:none !important;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

/* Keep motion in the network, not on the text layer. */
.network-lines{
  animation:missionLinesPulse 5.8s ease-in-out infinite alternate;
}
.network-nodes{
  animation:missionNodesPulse 4.8s ease-in-out infinite alternate;
}
@keyframes missionLinesPulse{
  from{opacity:.56}
  to{opacity:1}
}
@keyframes missionNodesPulse{
  from{opacity:.78}
  to{opacity:1}
}

.network-labels{
  opacity:1 !important;
}
.network-labels text{
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:1.25px !important;
  fill:rgba(245,248,255,.82) !important;
  filter:none !important;
  text-shadow:none !important;
  paint-order:stroke fill;
  stroke:rgba(0,0,0,.42);
  stroke-width:.65px;
  stroke-linejoin:round;
}

.civilization-caption{
  font-size:12px !important;
  font-weight:500 !important;
  color:rgba(245,248,255,.66) !important;
}

/* North Star support copy remains visible in the final close-up. */
.north-principles span{
  color:rgba(242,247,255,.78) !important;
}
.north-caption{
  color:rgba(232,240,255,.62) !important;
}

@media(max-width:820px){
  .network-labels text{
    font-size:15px !important;
    font-weight:750 !important;
    letter-spacing:.75px !important;
    stroke-width:.50px;
  }

  .civilization-caption{
    font-size:10.5px !important;
  }
}

@media(orientation:portrait) and (max-width:700px){
  .network-labels text{
    font-size:16px !important;
    font-weight:760 !important;
    letter-spacing:.55px !important;
    fill:rgba(250,252,255,.90) !important;
  }

  .network-lines path{
    stroke:rgba(210,224,252,.28) !important;
  }

  .network-nodes circle{
    fill:rgba(238,244,255,.92) !important;
  }
}


/* ============================================================
   v0.32 North Star: brighter distance + synced blue close-up
============================================================ */
.north-star-hover-label{
  border-color:rgba(178,209,255,.18) !important;
}
.north-star-hover-label span{
  color:rgba(203,225,255,.60) !important;
}
.north-star-info{
  border-color:rgba(178,209,255,.16) !important;
}


/* ============================================================
   v0.34 North Star beacon + final top-down galaxy
============================================================ */
.north-star-hover-label{
  border-color:rgba(184,211,255,.18) !important;
}


/* ============================================================
   v0.35 North Star — v0.32 composition + stronger blue-white light
============================================================ */
.north-star-hover-label{
  border-color:rgba(191,220,255,.22) !important;
}
.north-star-hover-label strong{
  color:rgba(252,254,255,1) !important;
}
.north-star-hover-label span{
  color:rgba(213,233,255,.72) !important;
}
.north-star-info{
  border-color:rgba(191,220,255,.20) !important;
}


/* ============================================================
   v0.39 North Star late handoff / Galaxy hover
============================================================ */
.tip.show .status{
  letter-spacing:.10em;
}


/* ============================================================
   v0.43 bilingual EN / 中文
   i18n changes visible copy only; all world IDs/status/material
   semantics remain untouched.
============================================================ */
.lang-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,13,22,.58);
  color:rgba(255,255,255,.72);
  height:34px;
  min-width:72px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:border-color .22s ease,background .22s ease,color .22s ease;
}
.lang-toggle:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(20,22,34,.78);
}
.lang-toggle .lang-en,
.lang-toggle .lang-zh{
  opacity:.42;
  transition:opacity .2s ease,color .2s ease;
}
html[data-lang="en"] .lang-toggle .lang-en,
html[data-lang="zh"] .lang-toggle .lang-zh{
  opacity:1;
  color:#fff;
}
.lang-toggle .lang-sep{opacity:.24}

html[data-lang="zh"] body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Segoe UI",sans-serif;
}
html[data-lang="zh"] .chapter-copy h1,
html[data-lang="zh"] .chapter-copy h2,
html[data-lang="zh"] .hero-copy h1,
html[data-lang="zh"] .hero-copy h2{
  letter-spacing:-.045em;
  line-height:1.04;
}
html[data-lang="zh"] .chapter-copy p,
html[data-lang="zh"] .company-summary p,
html[data-lang="zh"] .detail-copy p{
  line-height:1.72;
}
html[data-lang="zh"] .section-nav button,
html[data-lang="zh"] .nav-menu button{
  letter-spacing:.02em;
}

@media (max-width:760px){
  .lang-toggle{
    height:32px;
    min-width:66px;
    padding:0 10px;
    font-size:9px;
  }
}


/* ============================================================
   v0.44 Chinese editorial localization
   Chinese is not forced into the English line structure.
============================================================ */

html[data-lang="zh"] #universe .big{
  width:min(92vw,980px);
  max-width:none;
  font-size:clamp(48px,6.6vw,92px);
  line-height:.98;
  letter-spacing:-.055em;
  text-align:center;
}

html[data-lang="zh"] #universe .big .zh-universe-line{
  display:inline-block;
}

html[data-lang="zh"] #universe .big .zh-universe-soft{
  font-size:.72em;
  font-weight:660;
  letter-spacing:-.035em;
}

html[data-lang="zh"] #universe .big .zh-universe-core{
  font-size:1.08em;
  font-weight:760;
  letter-spacing:-.065em;
  margin:.02em 0;
}

html[data-lang="zh"] .company-summary h2{
  line-height:1.04;
  letter-spacing:-.055em;
  font-size:clamp(50px,6.6vw,96px);
}

html[data-lang="zh"] .chapter-copy h2{
  line-height:1.05;
  letter-spacing:-.05em;
  font-size:clamp(46px,5.1vw,80px);
}

html[data-lang="zh"] .chapter-copy p{
  max-width:600px;
  font-size:clamp(15px,1.18vw,18px);
  line-height:1.82;
  letter-spacing:.005em;
}

html[data-lang="zh"] .chapter-note{
  line-height:1.72;
  letter-spacing:.025em;
}

html[data-lang="zh"] .company-summary p{
  max-width:720px;
  font-size:clamp(16px,1.42vw,21px);
  line-height:1.82;
  letter-spacing:.005em;
}

html[data-lang="zh"] #final h2{
  line-height:1.04;
  letter-spacing:-.055em;
}

html[data-lang="zh"] .map-caption .t{
  line-height:1.7;
}

html[data-lang="zh"] .eyebrow,
html[data-lang="zh"] .chapter-copy .eyebrow{
  letter-spacing:.13em;
}

html[data-lang="zh"] .north-principles span{
  letter-spacing:.10em;
}

@media(max-width:760px){
  html[data-lang="zh"] #universe .big{
    font-size:clamp(46px,13vw,72px);
    line-height:1.00;
    width:92vw;
  }

  html[data-lang="zh"] .company-summary h2{
    font-size:clamp(44px,12vw,68px);
  }

  html[data-lang="zh"] .chapter-copy h2{
    font-size:clamp(40px,10.3vw,60px);
  }
}


/* ============================================================
   v0.50 LIA Cinematic Scroll
   Scroll-scrubbed character video + original Three.js LIA world
============================================================ */
body.lia-cinema-open{overflow:hidden!important}

.lia-cinema{
  position:fixed; inset:0; z-index:220;
  background:#010209; color:#f7f7fb;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .38s ease, visibility .38s;
}
.lia-cinema.open{
  opacity:1; visibility:visible; pointer-events:auto;
}

.lia-cinema-header{
  position:absolute; left:0; right:0; top:0; z-index:40;
  height:62px; padding:0 clamp(18px,4vw,58px);
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:24px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:linear-gradient(to bottom,rgba(2,3,10,.88),rgba(2,3,10,.20));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.lia-cinema-back,.lia-cinema-lang,.lia-cinema-nav button{
  border:0; background:none; color:rgba(255,255,255,.58);
  cursor:pointer; font:650 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.lia-cinema-back:hover,.lia-cinema-lang:hover,.lia-cinema-nav button:hover{color:#fff}
.lia-cinema-brand{
  display:flex; gap:9px; align-items:center; justify-self:start;
  font-size:11px; letter-spacing:.16em;
}
.lia-cinema-brand strong{font-weight:760}.lia-cinema-brand strong.caelarium-brand-lockup{letter-spacing:.16em}
.lia-cinema-brand span{opacity:.26}
.lia-cinema-brand b{color:rgba(216,200,255,.86)}
.lia-cinema-nav{justify-self:end;display:flex;gap:22px}
.lia-cinema-nav button{padding:9px 0}
.lia-cinema-lang{
  height:34px; padding:0 12px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
}
.lia-cinema-lang span{opacity:.25}

.lc-en{display:inline}
.lc-zh{display:none}
html[data-lang="zh"] .lc-en{display:none!important}
html[data-lang="zh"] .lc-zh{display:inline!important}

.lia-cinema-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.19) transparent;
}
.lia-cinema-stage{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  background:
    radial-gradient(circle at 67% 35%,rgba(73,81,141,.10),transparent 34%),
    linear-gradient(180deg,#040613 0%,#010209 100%);
}
.lia-cinema-scrollspace{height:650vh}

.lia-video-world{position:absolute;inset:0;z-index:1;overflow:hidden}
.lia-video-backdrop{
  position:absolute; inset:-4%; opacity:.30; filter:blur(38px) brightness(.55) saturate(.75);
  transform:scale(1.12);
}
.lia-video-backdrop video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.lia-video-frame{
  position:absolute; z-index:2;
  right:0; top:0; width:74vw; height:100%;
  overflow:hidden; transform-origin:60% 50%;
  will-change:transform,opacity,filter;
}
.lia-video-frame::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,#010209 0%,rgba(1,2,9,.78) 5%,rgba(1,2,9,.20) 18%,transparent 42%);
}
.lia-video-frame video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center center;
  opacity:0;
}
.lia-video-frame video.active{opacity:1}

#liaCinema3D{
  position:absolute; inset:0; z-index:4; width:100%; height:100%;
  pointer-events:none;
}
.lia-cinema-space{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    radial-gradient(circle at 74% 45%,transparent 0 19%,rgba(0,0,0,.06) 52%,transparent 72%);
}
.lia-cinema-vignette{
  position:absolute; inset:0; z-index:10; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,2,8,.76) 0%,rgba(1,2,8,.26) 30%,transparent 55%),
    radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.34) 100%);
}
.lia-cinema-grain{
  position:absolute; inset:0; z-index:11; pointer-events:none; opacity:.012; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
}

.scene-copy{
  position:absolute; z-index:20;
  left:clamp(38px,6.6vw,106px); top:50%;
  width:min(39vw,620px);
  transform:translateY(-50%);
  opacity:0; filter:blur(8px); pointer-events:none;
  will-change:transform,opacity,filter;
}
.lia-cinema-kicker{
  margin-bottom:20px; font-size:10px; font-weight:650; letter-spacing:.17em;
  color:rgba(202,178,255,.68);
}
.scene-copy h1,.scene-copy h2{
  margin:0; font-size:clamp(52px,6.3vw,100px);
  line-height:.98; letter-spacing:-.058em; font-weight:710;
}
.scene-copy h3{
  margin:22px 0 0; max-width:650px;
  font-size:clamp(28px,3.15vw,50px);
  line-height:1.07; letter-spacing:-.042em; color:#bca6ff;
}
.scene-copy p{
  max-width:590px; margin:25px 0 0;
  font-size:clamp(14px,1.2vw,18px); line-height:1.72;
  color:rgba(255,255,255,.54);
}
.s2{width:min(34vw,550px)}
.s3{width:min(37vw,590px)}
.s4{width:min(38vw,610px)}

.lia-world-label{
  position:absolute; z-index:21;
  right:clamp(34px,6vw,94px); top:62%;
  opacity:0; transform:translateY(18px);
  color:#fff; text-align:right; pointer-events:none;
}
.lia-world-label strong{display:block;font-size:18px;letter-spacing:.06em}
.lia-world-label span{display:block;margin-top:4px;font-size:9px;letter-spacing:.14em;color:rgba(215,197,255,.55)}

.lia-cinema-beats{
  position:absolute; z-index:21;
  right:clamp(36px,5.4vw,88px); top:50%;
  width:min(30vw,450px); transform:translateY(-50%);
  display:grid; gap:30px; pointer-events:none;
}
.lia-cinema-beat{
  display:grid; grid-template-columns:34px 1fr; gap:14px;
  opacity:0; transform:translateX(28px);
}
.lia-cinema-beat>span{
  padding-top:4px; font-size:9px; letter-spacing:.12em; color:rgba(194,169,255,.48);
}
.lia-cinema-beat b{
  display:block; font-size:clamp(17px,1.55vw,23px); font-weight:650; letter-spacing:-.025em;
}
.lia-cinema-beat small{
  display:block; margin-top:7px; color:rgba(255,255,255,.41); font-size:11px; line-height:1.55;
}

.lia-recall-cinema{
  position:absolute; z-index:22;
  right:clamp(38px,6.2vw,100px); top:50%;
  width:min(30vw,410px); transform:translateY(-50%) translateX(44px);
  opacity:0; padding:28px 30px;
  border:1px solid rgba(196,174,255,.16); border-radius:25px;
  background:linear-gradient(145deg,rgba(119,84,192,.11),rgba(255,255,255,.02));
  backdrop-filter:blur(17px);
}
.lia-recall-cinema .status{
  font-size:8px; letter-spacing:.15em; color:rgba(210,190,255,.60)
}
.lia-recall-cinema h3{margin:8px 0 0;font-size:35px;letter-spacing:-.04em}
.lia-recall-cinema p{margin:14px 0 0;color:rgba(255,255,255,.51);font-size:13px;line-height:1.65}
.lia-recall-cinema>b{
  display:inline-flex;margin-top:18px;padding:7px 10px;border:1px solid rgba(255,255,255,.09);
  border-radius:999px;font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.42)
}

.lia-cinema-progress{
  position:absolute; z-index:30; left:clamp(20px,2.5vw,40px); top:50%;
  width:1px; height:190px; transform:translateY(-50%);
  background:rgba(255,255,255,.13);
}
.lia-cinema-progress i{
  display:block;width:1px;height:0;background:#d6c8ff;box-shadow:0 0 13px rgba(188,160,255,.68)
}
.lia-cinema-chapter{
  position:absolute;z-index:30;left:clamp(15px,2vw,31px);top:calc(50% - 119px);
  font-size:9px;color:rgba(255,255,255,.42)
}
.lia-cinema-scrollhint{
  position:absolute;z-index:30;left:50%;bottom:24px;transform:translateX(-50%);
  font-size:8px;letter-spacing:.15em;color:rgba(255,255,255,.25)
}

html[data-lang="zh"] .scene-copy h1,
html[data-lang="zh"] .scene-copy h2{letter-spacing:-.045em;line-height:1.04}
html[data-lang="zh"] .scene-copy p{line-height:1.82}

@media(max-width:900px){
  .lia-cinema-header{
    height:58px; padding:0 14px; gap:10px;
    grid-template-columns:auto 1fr auto;
  }
  .lia-cinema-brand{justify-self:center;font-size:9px}
  .lia-cinema-nav{display:none}
  .lia-cinema-back{font-size:9px}
  .lia-cinema-lang{height:31px;padding:0 9px;font-size:8px}

  .lia-video-frame{
    top:3vh; right:0; width:100vw; height:67vh;
  }
  .lia-video-frame::before{
    background:linear-gradient(0deg,#010209 0%,rgba(1,2,9,.22) 23%,transparent 48%);
  }
  .lia-cinema-vignette{
    background:
      linear-gradient(0deg,rgba(1,2,8,.82) 0%,rgba(1,2,8,.13) 42%,transparent 72%),
      radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.25) 100%);
  }
  .scene-copy{
    left:22px;right:22px;top:auto;bottom:8vh;width:auto;
    transform:none;
  }
  .scene-copy h1,.scene-copy h2{
    font-size:clamp(43px,11.8vw,66px);line-height:1.02
  }
  .scene-copy h3{font-size:clamp(27px,7.2vw,40px)}
  .scene-copy p{max-width:92vw;font-size:14px}
  .s1{bottom:8vh}.s2{bottom:7vh}.s3{bottom:7vh}.s4{bottom:7vh}

  .lia-world-label{right:19px;top:38%;font-size:10px}
  .lia-cinema-beats{
    left:22px;right:22px;top:auto;bottom:6.5vh;width:auto;transform:none;gap:18px
  }
  .lia-cinema-beat{grid-template-columns:29px 1fr}
  .lia-cinema-beat b{font-size:18px}
  .lia-cinema-beat small{font-size:10px}
  .lia-recall-cinema{
    left:20px;right:20px;top:auto;bottom:6vh;width:auto;
    transform:translateY(30px);padding:22px
  }
  .lia-cinema-progress{left:13px;top:30%;height:116px}
  .lia-cinema-chapter{left:9px;top:calc(30% - 75px)}
  .lia-cinema-scrollhint{bottom:12px}
}


/* ============================================================
   v0.51 Black → full-screen LIA reveal
============================================================ */
.lia-cinema-black-intro{
  position:absolute;
  inset:0;
  z-index:9;
  background:#000;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
}

.lia-video-world{
  opacity:0;
  will-change:opacity;
}

/* First cinematic beat now occupies the entire viewport. */
.lia-video-frame{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  transform-origin:50% 50% !important;
}

.lia-video-frame::before{
  background:
    linear-gradient(90deg,rgba(1,2,9,.58) 0%,rgba(1,2,9,.08) 28%,transparent 54%) !important;
}

.lia-video-frame video{
  object-fit:cover !important;
  object-position:center center !important;
}

.lia-video-backdrop{
  opacity:.20;
}

/* Keep the first words away until the person has clearly appeared. */
.lia-cinema-scrollhint{
  transition:opacity .2s ease;
}

@media(max-width:900px){
  .lia-video-frame{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100vh !important;
  }

  .lia-video-frame::before{
    background:
      linear-gradient(0deg,rgba(1,2,9,.70) 0%,rgba(1,2,9,.06) 37%,transparent 64%) !important;
  }

  .lia-video-frame video{
    object-fit:cover !important;
    object-position:center center !important;
  }
}


/* ============================================================
   v0.52 — LIA-only polish
============================================================ */

/* Make the cinematic film dissolve into the surrounding space instead
   of revealing a rectangular video boundary during the handoff. */
.lia-video-frame{
  -webkit-mask-image:
    radial-gradient(
      ellipse 92% 88% at 53% 49%,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.98) 60%,
      rgba(0,0,0,.78) 72%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,.08) 94%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 92% 88% at 53% 49%,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.98) 60%,
      rgba(0,0,0,.78) 72%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,.08) 94%,
      transparent 100%
    );
}

.lia-video-world::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(90deg,#010209 0%,rgba(1,2,9,.88) 3%,rgba(1,2,9,.43) 11%,transparent 27%),
    linear-gradient(270deg,#010209 0%,rgba(1,2,9,.84) 3%,rgba(1,2,9,.36) 10%,transparent 25%),
    linear-gradient(180deg,#010209 0%,rgba(1,2,9,.57) 5%,rgba(1,2,9,.13) 14%,transparent 24%),
    linear-gradient(0deg,#010209 0%,rgba(1,2,9,.76) 5%,rgba(1,2,9,.24) 16%,transparent 29%);
  opacity:.72;
}

/* Recall is intentionally absent from Discover LIA. */
.lia-recall-cinema{display:none!important}

@media(max-width:900px){
  /* Scene 3 becomes a cinematic text-over-world composition.
     The LIA sphere stays real Three.js, but becomes a soft background subject. */
  .lia-cinema.scene3-mobile #liaCinema3D{
    filter:blur(10px) brightness(.57) saturate(.82);
    transform:scale(1.055);
    transform-origin:50% 36%;
    transition:filter .22s ease,transform .22s ease;
  }

  .lia-cinema.scene3-mobile .lia-cinema-space{
    z-index:13;
    background:
      linear-gradient(0deg,rgba(1,2,9,.72) 0%,rgba(1,2,9,.25) 34%,transparent 66%),
      radial-gradient(circle at 50% 34%,rgba(60,47,96,.06),rgba(1,2,9,.24) 72%);
  }

  .lia-cinema.scene3-mobile .s3{
    z-index:36;
    left:18px;
    right:18px;
    width:auto;
    bottom:8vh;
    padding:22px 18px 24px;
    border-radius:22px;
    background:
      linear-gradient(180deg,rgba(4,5,13,.10),rgba(3,4,11,.50));
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    text-shadow:0 4px 30px rgba(0,0,0,.92);
  }

  .lia-cinema.scene3-mobile .s3 h2{
    font-size:clamp(42px,11.2vw,60px);
    line-height:1.01;
  }

  .lia-cinema.scene3-mobile .s3 h3{
    max-width:94%;
    color:#c9b6ff;
    font-size:clamp(26px,7vw,38px);
    text-shadow:0 4px 28px rgba(0,0,0,.95);
  }

  .lia-cinema.scene3-mobile .lia-cinema-beats{
    z-index:37;
    left:20px;
    right:20px;
    bottom:7vh;
    width:auto;
    padding:18px;
    border-radius:20px;
    background:rgba(3,4,11,.38);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
  }

  .lia-video-world::after{
    opacity:.82;
    background:
      linear-gradient(90deg,#010209 0%,rgba(1,2,9,.62) 5%,transparent 26%),
      linear-gradient(270deg,#010209 0%,rgba(1,2,9,.62) 5%,transparent 26%),
      linear-gradient(180deg,#010209 0%,rgba(1,2,9,.62) 5%,transparent 24%),
      linear-gradient(0deg,#010209 0%,rgba(1,2,9,.88) 4%,rgba(1,2,9,.38) 17%,transparent 34%);
  }

  .lia-video-frame{
    -webkit-mask-image:
      radial-gradient(
        ellipse 95% 90% at 50% 44%,
        #000 0%,
        #000 49%,
        rgba(0,0,0,.96) 61%,
        rgba(0,0,0,.64) 76%,
        rgba(0,0,0,.22) 90%,
        transparent 100%
      );
    mask-image:
      radial-gradient(
        ellipse 95% 90% at 50% 44%,
        #000 0%,
        #000 49%,
        rgba(0,0,0,.96) 61%,
        rgba(0,0,0,.64) 76%,
        rgba(0,0,0,.22) 90%,
        transparent 100%
      );
  }
}


/* ============================================================
   v0.53 — trust/explanation page refinements
============================================================ */
.lia-current-state{
  position:absolute;
  z-index:24;
  right:clamp(38px,6vw,96px);
  bottom:clamp(42px,7vh,80px);
  width:min(31vw,430px);
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.11);
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
}
.lia-current-state .state-kicker{
  font-size:8px;
  letter-spacing:.15em;
  color:rgba(206,187,255,.55);
}
.lia-current-state p{
  margin:10px 0 0;
  font-size:11px;
  line-height:1.62;
  color:rgba(255,255,255,.39);
}

@media(max-width:900px){
  /* Sphere is still visible, but no longer fills the entire portrait screen. */
  .lia-cinema.scene3-mobile #liaCinema3D{
    filter:blur(12px) brightness(.45) saturate(.74) !important;
    transform:scale(.90) translateY(-7vh) !important;
    transform-origin:50% 32% !important;
  }

  /* Inline JS previously added blur while the copy faded in.
     Force text itself to stay optically sharp. */
  .lia-cinema.scene3-mobile .s3{
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    filter:none !important;
    left:19px !important;
    right:19px !important;
    width:auto !important;
    padding:24px 20px 26px !important;
    background:rgba(3,4,11,.36) !important;
    border:1px solid rgba(255,255,255,.055);
    box-shadow:0 22px 70px rgba(0,0,0,.22);
  }

  .lia-cinema.scene3-mobile .s3 h2{
    font-size:clamp(37px,9.8vw,54px) !important;
    line-height:1.04 !important;
  }

  .lia-cinema.scene3-mobile .s3 h3{
    font-size:clamp(24px,6.4vw,35px) !important;
    line-height:1.10 !important;
    margin-top:18px !important;
  }

  /* Once the headline has left, beats use a separate lower panel. */
  .lia-cinema.scene3-mobile .lia-cinema-beats{
    bottom:8vh !important;
    padding:20px 18px !important;
    background:rgba(3,4,11,.56) !important;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 20px 60px rgba(0,0,0,.20);
  }

  .lia-current-state{
    left:20px;
    right:20px;
    bottom:6.5vh;
    width:auto;
  }
}


/* ============================================================
   v0.54 Apple-like content pacing
============================================================ */

/* Video should only dissolve; never reveal its rectangular perimeter. */
.lia-video-frame{
  -webkit-mask-image:
    radial-gradient(
      ellipse 118% 112% at 50% 48%,
      #000 0%,
      #000 63%,
      rgba(0,0,0,.98) 72%,
      rgba(0,0,0,.76) 82%,
      rgba(0,0,0,.30) 93%,
      transparent 100%
    ) !important;
  mask-image:
    radial-gradient(
      ellipse 118% 112% at 50% 48%,
      #000 0%,
      #000 63%,
      rgba(0,0,0,.98) 72%,
      rgba(0,0,0,.76) 82%,
      rgba(0,0,0,.30) 93%,
      transparent 100%
    ) !important;
}

/* Deeper edge fade, especially during the human → world handoff. */
.lia-video-world::after{
  opacity:.88 !important;
  background:
    linear-gradient(90deg,#010209 0%,rgba(1,2,9,.88) 2%,rgba(1,2,9,.40) 9%,transparent 22%),
    linear-gradient(270deg,#010209 0%,rgba(1,2,9,.88) 2%,rgba(1,2,9,.40) 9%,transparent 22%),
    linear-gradient(180deg,#010209 0%,rgba(1,2,9,.68) 3%,rgba(1,2,9,.18) 13%,transparent 23%),
    linear-gradient(0deg,#010209 0%,rgba(1,2,9,.82) 3%,rgba(1,2,9,.27) 15%,transparent 28%) !important;
}

/* Remove every card-like treatment. */
.lia-cinema-beats,
.lia-cinema.scene3-mobile .lia-cinema-beats,
.lia-cinema.scene3-mobile .s3,
.lia-current-state{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Direct, editorial typography. */
.lia-cinema-beats{
  gap:0 !important;
}
.lia-cinema-beat{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  grid-template-columns:44px minmax(0,1fr);
  align-items:start;
}
.lia-cinema-beat b{
  font-size:clamp(28px,2.6vw,44px) !important;
  line-height:1.05;
  letter-spacing:-.045em;
}
.lia-cinema-beat small{
  max-width:520px;
  margin-top:13px !important;
  font-size:clamp(12px,1vw,15px) !important;
  line-height:1.68 !important;
  color:rgba(255,255,255,.46) !important;
}

.lia-current-state{
  padding-top:0 !important;
  border-top:0 !important;
}
.lia-current-state p{
  max-width:520px;
}

/* Scene 4: pure title + paragraph, no UI container. */
.s4{
  max-width:650px;
}

/* Portrait scene 3: the LIA world becomes a cinematic soft backdrop.
   Text sits directly in front, without any panel. */
@media(max-width:900px){
  .lia-cinema.scene3-mobile #liaCinema3D{
    filter:blur(15px) brightness(.42) saturate(.72) !important;
    transform:scale(.82) translateY(-9vh) !important;
    transform-origin:50% 30% !important;
  }

  .lia-cinema.scene3-mobile .s3{
    top:auto !important;
    bottom:10vh !important;
    transform:none !important;
    left:24px !important;
    right:24px !important;
    width:auto !important;
    padding:0 !important;
    filter:none !important;
    text-shadow:0 4px 30px rgba(0,0,0,.92);
  }

  .lia-cinema.scene3-mobile .s3 h2{
    font-size:clamp(39px,10.2vw,56px) !important;
    line-height:1.03 !important;
  }

  .lia-cinema.scene3-mobile .s3 h3{
    font-size:clamp(24px,6.5vw,34px) !important;
    margin-top:20px !important;
    line-height:1.1 !important;
  }

  .lia-cinema.scene3-mobile .lia-cinema-beats{
    left:24px !important;
    right:24px !important;
    top:auto !important;
    bottom:9vh !important;
    width:auto !important;
    height:210px;
    padding:0 !important;
    transform:none !important;
  }

  .lia-cinema-beat{
    display:grid;
    top:0;
    transform:none;
    grid-template-columns:34px minmax(0,1fr);
  }

  .lia-cinema-beat b{
    font-size:clamp(26px,7.4vw,38px) !important;
    line-height:1.05 !important;
  }

  .lia-cinema-beat small{
    font-size:12px !important;
    line-height:1.62 !important;
    max-width:88vw;
  }

  /* Scene 4 no longer inherits the scene-3 blurred world composition. */
  .lia-cinema:not(.scene3-mobile) #liaCinema3D{
    filter:none !important;
    transform:none !important;
  }

  .s4{
    bottom:10vh !important;
    left:24px !important;
    right:24px !important;
    width:auto !important;
  }

  .s4 h2{
    font-size:clamp(42px,10.8vw,58px) !important;
  }

  .lia-current-state{
    left:24px !important;
    right:24px !important;
    bottom:4vh !important;
    width:auto !important;
  }
}


/* ============================================================
   v0.55 — Editorial roadmap
   Restraint, typography, space, one accent, no card wall.
============================================================ */

:root{
  --lia-ease-out:cubic-bezier(0.23,1,0.32,1);
  --lia-ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --lia-ink:#f5f5f7;
  --lia-body:rgba(245,245,247,.58);
  --lia-muted:rgba(245,245,247,.30);
  --lia-accent:#b7a1e8;
}

/* The sticky cinematic only carries the opening story. */
.lia-editorial-gate{
  position:absolute;
  z-index:23;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
}
.lia-editorial-gate-copy{
  width:min(900px,78vw);
  text-align:center;
}
.lia-editorial-eyebrow{
  margin-bottom:1.3rem;
  color:rgba(194,174,235,.66);
  font-size:.65rem;
  font-weight:650;
  letter-spacing:.18em;
}
.lia-editorial-gate h2{
  margin:0;
  font-size:clamp(3.5rem,7.3vw,7.8rem);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:690;
}
.lia-editorial-gate p{
  max-width:44rem;
  margin:1.8rem auto 0;
  color:var(--lia-body);
  font-size:clamp(.98rem,1.25vw,1.22rem);
  line-height:1.7;
}

/* Normal-flow roadmap begins after the cinematic sticky scene. */
.lia-editorial-sections{
  position:relative;
  z-index:60;
  background:#000;
  color:var(--lia-ink);
}
.lia-editorial-section{
  min-height:112vh;
  display:grid;
  align-items:center;
  padding:clamp(6rem,12vh,11rem) clamp(1.5rem,7vw,8rem);
  border:0;
}
.lia-editorial-section + .lia-editorial-section{
  box-shadow:0 -1px rgba(255,255,255,.035) inset;
}
.lia-editorial-inner{
  width:min(88rem,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.83fr) minmax(28rem,1.17fr);
  align-items:center;
  gap:clamp(4rem,8vw,9rem);
}
.lia-editorial-inner.reverse{
  grid-template-columns:minmax(28rem,1.17fr) minmax(0,.83fr);
}
.lia-editorial-copy{
  max-width:41rem;
}
.lia-stage-meta{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2rem;
}
.lia-stage-num{
  color:rgba(255,255,255,.22);
  font:650 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.lia-stage-status{
  color:rgba(255,255,255,.42);
  font-size:.63rem;
  font-weight:650;
  letter-spacing:.12em;
}
.lia-stage-status.live{color:#c1e6cf}
.lia-stage-status.next{color:#d0c2f4}
.lia-stage-status.planned{color:#b0b5c1}
.lia-stage-status.horizon{color:#8f95a4}

.lia-editorial-copy h2,
.lia-editorial-current h2{
  margin:0;
  font-size:clamp(3.5rem,6vw,7rem);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:680;
  text-wrap:balance;
}
.lia-editorial-copy p,
.lia-editorial-current p{
  max-width:41rem;
  margin:2rem 0 0;
  color:var(--lia-body);
  font-size:clamp(1rem,1.23vw,1.25rem);
  line-height:1.72;
  letter-spacing:-.005em;
}

/* Visuals: geometric, quiet, no neon HUD. */
.lia-stage-visual{
  position:relative;
  min-height:34rem;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.56);
}

.local-runtime-visual::before,
.specialists-visual::before,
.evolution-visual::before{
  content:"";
  position:absolute;
  width:min(32rem,72%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(151,131,198,.07),transparent 66%);
}
.runtime-core,
.specialist-core,
.evo-core{
  position:relative;
  z-index:3;
  width:8.5rem;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#f7f7fb;
  font-size:1.1rem;
  font-weight:720;
  letter-spacing:.08em;
  background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.15),transparent 34%),
    radial-gradient(circle at center,#191724,#09090d 72%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1.5rem 5rem rgba(0,0,0,.34);
}
.runtime-line,
.specialist-path{
  position:absolute;
  width:1px;
  height:12rem;
  left:50%;
  top:50%;
  transform-origin:50% 0;
  background:linear-gradient(rgba(183,161,232,.35),transparent);
}
.line-a{transform:rotate(45deg)}
.line-b{transform:rotate(135deg)}
.line-c{transform:rotate(225deg)}
.runtime-node,
.specialist-node{
  position:absolute;
  font-size:.62rem;
  letter-spacing:.12em;
  color:rgba(255,255,255,.30);
}
.n1{top:12%;left:50%}.n2{top:49%;right:8%}.n3{bottom:12%;left:47%}.n4{top:48%;left:4%}

.memory-visual{
  min-height:34rem;
}
.memory-axis{
  position:absolute;
  left:50%;
  top:9%;
  bottom:9%;
  width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.18) 14%,rgba(255,255,255,.18) 86%,transparent);
}
.memory-point{
  position:absolute;
  left:50%;
  display:flex;
  align-items:center;
  gap:.85rem;
  transform:translateX(-.35rem);
  color:rgba(255,255,255,.28);
  font-size:.62rem;
  letter-spacing:.12em;
}
.memory-point i{
  width:.7rem;height:.7rem;border-radius:50%;
  background:#15141b;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
.mp1{top:14%}.mp2{top:31%}.mp3{top:48%}.mp4{top:65%}
.memory-focus{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  text-align:center;
}
.memory-focus b{display:block;font-size:1.4rem;letter-spacing:-.02em}
.memory-focus small{display:block;margin-top:.5rem;color:rgba(255,255,255,.28);font-size:.56rem;letter-spacing:.12em}

.p1{transform:rotate(35deg)}
.p2{transform:rotate(110deg)}
.p3{transform:rotate(205deg)}
.p4{transform:rotate(295deg)}
.s1{top:11%;left:52%}.s2{top:49%;right:4%}.s3{bottom:10%;left:47%}.s4{top:48%;left:1%}

.evolution-visual{
  overflow:hidden;
}
.evo-ring{
  position:absolute;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
}
.er1{width:12rem;aspect-ratio:1}
.er2{width:20rem;aspect-ratio:1}
.er3{width:29rem;aspect-ratio:1}
.evo-label{
  position:absolute;
  color:rgba(255,255,255,.26);
  font-size:.58rem;
  letter-spacing:.14em;
}
.el1{left:49%;top:26%}.el2{right:13%;top:49%}.el3{left:8%;top:49%}

.lia-editorial-current{
  width:min(64rem,100%);
  margin:0 auto;
  text-align:center;
}
.stage-current{
  min-height:85vh;
}
.stage-current .lia-editorial-current p{
  margin-left:auto;
  margin-right:auto;
}

/* Rare explanatory page: reveal once, not on every pixel of scrolling. */
.lia-editorial-section .lia-editorial-copy,
.lia-editorial-section .lia-stage-visual,
.lia-editorial-current{
  opacity:0;
  transform:translateY(1.5rem);
  transition:
    opacity 700ms var(--lia-ease-out),
    transform 700ms var(--lia-ease-out);
}
.lia-editorial-section[data-visible] .lia-editorial-copy,
.lia-editorial-section[data-visible] .lia-stage-visual,
.lia-editorial-section[data-visible] .lia-editorial-current{
  opacity:1;
  transform:translateY(0);
}
.lia-editorial-section[data-visible] .lia-stage-visual{
  transition-delay:80ms;
}

/* Press feedback: subtle, immediate. */
.lia-cinema-back:active,
.lia-cinema-lang:active,
.lia-cinema-nav button:active{
  transform:scale(.97);
}

/* Reduced motion keeps hierarchy, drops travel. */
@media(prefers-reduced-motion:reduce){
  .lia-editorial-section .lia-editorial-copy,
  .lia-editorial-section .lia-stage-visual,
  .lia-editorial-current{
    transform:none!important;
    transition:opacity 200ms ease!important;
  }
}

/* Portrait is a new composition, not a squeezed desktop. */
@media(max-width:900px){
  .lia-editorial-gate-copy{
    width:calc(100vw - 3rem);
    text-align:left;
  }
  .lia-editorial-gate h2{
    font-size:clamp(3.2rem,13vw,5.4rem);
  }
  .lia-editorial-gate p{
    margin-left:0;
  }

  .lia-editorial-section{
    min-height:auto;
    padding:8rem 1.45rem 9rem;
  }
  .lia-editorial-inner,
  .lia-editorial-inner.reverse{
    display:flex;
    flex-direction:column;
    gap:4.5rem;
  }
  .lia-editorial-inner.reverse .lia-stage-visual{
    order:2;
  }
  .lia-editorial-inner.reverse .lia-editorial-copy{
    order:1;
  }
  .lia-editorial-copy{
    max-width:none;
    width:100%;
  }
  .lia-editorial-copy h2,
  .lia-editorial-current h2{
    font-size:clamp(3.25rem,13.5vw,5.6rem);
    line-height:.96;
  }
  .lia-editorial-copy p,
  .lia-editorial-current p{
    font-size:1rem;
    line-height:1.72;
  }
  .lia-stage-visual{
    width:100%;
    min-height:27rem;
  }
  .er3{width:23rem}
  .stage-current{
    padding-top:10rem;
    padding-bottom:11rem;
  }
}


/* ============================================================
   v0.56 — Spatial roadmap
   Keep the same LIA world alive behind every development stage.
============================================================ */

.lia-editorial-sections{
  position:relative !important;
  z-index:60 !important;
  background:transparent !important;
  color:var(--lia-ink);
  isolation:isolate;
}

.lia-editorial-section{
  position:relative;
  min-height:118vh !important;
  display:block !important;
  padding:0 clamp(1.5rem,7vw,8rem) !important;
  overflow:visible;
  background:transparent !important;
  box-shadow:none !important;
}

/* Only darken the side that carries copy.
   The LIA sphere remains visible through the other half. */
.lia-editorial-section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.82) 24%,
      rgba(0,0,0,.50) 43%,
      rgba(0,0,0,.14) 62%,
      transparent 79%
    );
}
.lia-editorial-section:has(.lia-editorial-inner.reverse)::before{
  background:
    linear-gradient(
      270deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.82) 24%,
      rgba(0,0,0,.50) 43%,
      rgba(0,0,0,.14) 62%,
      transparent 79%
    );
}

.lia-editorial-inner,
.lia-editorial-inner.reverse{
  position:sticky !important;
  top:12vh;
  min-height:76vh;
  width:min(88rem,100%);
  margin:0 auto;
  display:grid;
  align-items:center;
  gap:clamp(4rem,8vw,9rem);
  will-change:transform,opacity;
}

.lia-editorial-inner{
  grid-template-columns:minmax(0,.82fr) minmax(28rem,1.18fr) !important;
}
.lia-editorial-inner.reverse{
  grid-template-columns:minmax(28rem,1.18fr) minmax(0,.82fr) !important;
}

/* Disable old one-shot reveal. Scroll now drives presentation directly. */
.lia-editorial-section .lia-editorial-copy,
.lia-editorial-section .lia-stage-visual,
.lia-editorial-current{
  opacity:1;
  transform:none;
  transition:none !important;
  will-change:transform,opacity;
}

/* Planet remains behind the roadmap, deliberately out of focus. */
.lia-cinema.roadmap-active #liaCinema3D{
  transform:scale(1.018);
  transform-origin:center center;
}
.lia-cinema.roadmap-active .lia-video-world{
  opacity:0 !important;
  visibility:hidden;
}
.lia-cinema.roadmap-active .lia-cinema-progress,
.lia-cinema.roadmap-active .lia-cinema-chapter{
  opacity:1 !important;
  visibility:visible !important;
}

.lia-cinema.roadmap-active .lia-cinema-scrollhint{
  opacity:0 !important;
}

/* More editorial typography, less "interface". */
.lia-stage-meta{
  margin-bottom:2.4rem !important;
}
.lia-stage-num{
  color:rgba(255,255,255,.22) !important;
}
.lia-editorial-copy h2,
.lia-editorial-current h2{
  max-width:12ch;
}
.lia-editorial-copy p{
  max-width:37rem;
}
.lia-stage-visual{
  min-height:38rem !important;
}

/* Local runtime: nodes arrive along real spatial paths. */
.runtime-line,
.specialist-path{
  opacity:0;
  transform-origin:50% 0;
}
.runtime-node,
.specialist-node,
.memory-point,
.evo-label{
  opacity:0;
  will-change:transform,opacity;
}

/* Prevent the quiet geometric visuals from reading like neon HUD. */
.runtime-core,
.specialist-core,
.evo-core{
  background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.11),transparent 35%),
    radial-gradient(circle at center,#15141b,#08080c 74%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.065) inset,
    0 1.8rem 5rem rgba(0,0,0,.35) !important;
}
.runtime-line,
.specialist-path{
  background:linear-gradient(rgba(183,161,232,.26),transparent) !important;
}
.evo-ring{
  border-color:rgba(255,255,255,.07) !important;
}

/* Final state also keeps the world visible. */
.stage-current{
  min-height:145vh !important;
  display:block !important;
  padding:0 clamp(1.5rem,7vw,8rem) !important;
}
.stage-current::before{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.78) 76%,#000 100%) !important;
}
.stage-current .lia-editorial-current{
  position:sticky;
  top:26vh;
  min-height:48vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  will-change:transform,opacity;
}

/* Physical press response remains immediate and tiny. */
.lia-cinema-back,
.lia-cinema-lang,
.lia-cinema-nav button{
  transition:transform 160ms var(--lia-ease-out),color 150ms ease;
}
.lia-cinema-back:active,
.lia-cinema-lang:active,
.lia-cinema-nav button:active{
  transform:scale(.97);
}

/* Portrait gets a real vertical composition, not a squeezed desktop grid. */
@media(max-width:900px){
  .lia-editorial-section{
    min-height:112vh !important;
    padding:0 1.4rem !important;
  }

  .lia-editorial-section::before,
  .lia-editorial-section:has(.lia-editorial-inner.reverse)::before{
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.88) 26%,
        rgba(0,0,0,.62) 48%,
        rgba(0,0,0,.17) 69%,
        transparent 86%
      ) !important;
  }

  .lia-editorial-inner,
  .lia-editorial-inner.reverse{
    top:8vh !important;
    min-height:86vh;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-end;
    gap:1.7rem !important;
  }

  .lia-editorial-inner .lia-editorial-copy,
  .lia-editorial-inner.reverse .lia-editorial-copy{
    order:2 !important;
    padding-bottom:7vh;
  }

  .lia-editorial-inner .lia-stage-visual,
  .lia-editorial-inner.reverse .lia-stage-visual{
    order:1 !important;
    position:absolute;
    inset:1vh 0 auto;
    min-height:48vh !important;
    opacity:.72;
    pointer-events:none;
  }

  .lia-editorial-copy h2,
  .lia-editorial-current h2{
    max-width:9.7ch;
    font-size:clamp(3.15rem,13vw,5.4rem) !important;
    line-height:.96 !important;
  }

  .lia-editorial-copy p,
  .lia-editorial-current p{
    max-width:94%;
    font-size:.98rem !important;
  }

  .lia-cinema.roadmap-active #liaCinema3D{
    transform:scale(.96) translateY(-4vh);
    transform-origin:50% 31%;
  }

  .stage-current{
    min-height:138vh !important;
    padding:0 1.4rem !important;
  }
  .stage-current .lia-editorial-current{
    top:22vh;
    text-align:left !important;
  }
}

/* Motion accessibility: keep hierarchy, drop travel. */
@media(prefers-reduced-motion:reduce){
  .lia-cinema.roadmap-active #liaCinema3D{
    transform:none !important;
  }
  .lia-editorial-inner,
  .lia-editorial-copy,
  .lia-stage-visual,
  .lia-editorial-current,
  .runtime-node,
  .specialist-node,
  .memory-point,
  .evo-label{
    transform:none !important;
  }
}


/* ============================================================
   v0.57 — Live world handoff
============================================================ */

.lia-cinema.roadmap-active #liaCinema3D{
  opacity:1 !important;
  transition:none !important;
  will-change:filter,transform,opacity;
}

/* Ensure roadmap copy is never hidden behind the 3D canvas. */
.lia-editorial-sections{
  z-index:70 !important;
}
.lia-editorial-copy,
.lia-editorial-current{
  position:relative;
  z-index:4;
}
.lia-stage-visual{
  position:relative;
  z-index:3;
}

/* The content side remains readable without blocking the whole sphere. */
.lia-editorial-section::before{
  z-index:1 !important;
}
.lia-editorial-inner{
  z-index:2;
}

/* Avoid accidental black rectangles across the viewport. */
.lia-editorial-section,
.lia-editorial-inner,
.lia-editorial-sections{
  background-color:transparent !important;
}

/* Portrait: keep visual hierarchy strong but do not hide text. */
@media(max-width:900px){
  .lia-editorial-copy{
    opacity:1;
  }
  .lia-editorial-section{
    overflow:visible !important;
  }
}


/* ============================================================
   v0.58 — long, continuous handoff
============================================================ */

/* Longer runway gives the world enough scroll distance to travel rather than snap. */
.lia-editorial-section{
  min-height:118vh !important;
}

/* Remove the horizontal black "section slab".
   Only create a soft reading field around the copy side. */
.lia-editorial-section::before{
  inset:10vh 42% 10vh -6% !important;
  background:
    radial-gradient(
      ellipse 92% 72% at 28% 50%,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.72) 37%,
      rgba(0,0,0,.38) 58%,
      rgba(0,0,0,.10) 72%,
      transparent 86%
    ) !important;
}
.lia-editorial-section:has(.lia-editorial-inner.reverse)::before{
  inset:10vh -6% 10vh 42% !important;
  background:
    radial-gradient(
      ellipse 92% 72% at 72% 50%,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.72) 37%,
      rgba(0,0,0,.38) 58%,
      rgba(0,0,0,.10) 72%,
      transparent 86%
    ) !important;
}

/* Text is above all roadmap masking layers. */
.lia-editorial-copy,
.lia-editorial-current{
  position:relative;
  z-index:8 !important;
}

/* No CSS transition fighting scroll-driven values. */
.lia-editorial-copy,
.lia-stage-visual,
.lia-editorial-current{
  transition:none !important;
}

/* The gate itself may move only by transform/opacity. */
.lia-editorial-gate{
  will-change:transform,opacity;
}

/* During the long roadmap entry the same live sphere stays visible. */
.lia-cinema.roadmap-active #liaCinema3D{
  opacity:1;
  will-change:filter,transform,opacity;
}

@media(max-width:900px){
  .lia-editorial-section{
    min-height:112vh !important;
  }

  .lia-editorial-section::before,
  .lia-editorial-section:has(.lia-editorial-inner.reverse)::before{
    inset:48% -5% 2vh -5% !important;
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.82) 36%,
        rgba(0,0,0,.42) 63%,
        rgba(0,0,0,.10) 80%,
        transparent 100%
      ) !important;
  }
}


/* No hard scene boundary: planet remains visible above/below roadmap copy. */
.lia-editorial-sections,
.lia-editorial-section,
.lia-editorial-inner{
  background:transparent !important;
}
.lia-editorial-section{
  isolation:isolate;
}


/* ============================================================
   v0.59 — sequenced handoff
   Fade → soften → travel → recover.
============================================================ */

/* Three.js owns all spatial movement. No class-toggle transform jump. */
.lia-cinema.roadmap-active #liaCinema3D{
  transform:none !important;
  transform-origin:center center !important;
}

/* Roadmap copy must never disappear because of an old reveal rule. */
.lia-editorial-copy,
.lia-editorial-current{
  visibility:visible !important;
}

/* The live world remains behind all roadmap chapters. */
.lia-cinema.roadmap-active #liaCinema3D{
  display:block !important;
  opacity:1;
  will-change:filter,opacity;
}

/* Keep only a local reading field — no hard horizontal page slab. */
.lia-editorial-section::before{
  border:0 !important;
  box-shadow:none !important;
}

@media(max-width:900px){
  .lia-cinema.roadmap-active #liaCinema3D{
    transform:none !important;
  }

  .lia-editorial-copy,
  .lia-editorial-current{
    visibility:visible !important;
  }
}


/* v0.59: JS owns the complete fade/blur sequence in every orientation. */
.lia-cinema.roadmap-active #liaCinema3D{
  transform:none !important;
  transition:none !important;
}
@media(max-width:900px){
  .lia-cinema.roadmap-active #liaCinema3D{
    transform:none !important;
  }
}


/* ============================================================
   v0.62 — Scene handoff, not single-page flattening
============================================================ */

/* Keep the multi-section roadmap structure.
   Only the LIA planet travels; the world itself never switches modes. */
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  transition:none !important;
}

/* Same space / glow / atmosphere before and after chapter boundaries. */
.lia-cinema .lia-cinema-space,
.lia-cinema .lia-cinema-vignette,
.lia-cinema .lia-cinema-grain{
  opacity:1 !important;
  visibility:visible !important;
}

/* Preserve orbital continuity when roadmap begins. */
.lia-cinema.roadmap-active .lia-cinema-stage{
  background:
    radial-gradient(circle at 67% 35%,rgba(73,81,141,.10),transparent 34%),
    linear-gradient(180deg,#040613 0%,#010209 100%) !important;
}

/* Roadmap sections remain real chapters, but their local readability fields
   must not create a hard "new page" edge. */
.lia-editorial-sections,
.lia-editorial-section,
.lia-editorial-inner{
  background-color:transparent !important;
}

.lia-editorial-section::before{
  border:0 !important;
  box-shadow:none !important;
}

/* Current / settled copy must remain readable. */
.lia-editorial-copy,
.lia-editorial-current{
  visibility:visible !important;
}

/* Opening → roadmap handoff should have room to breathe. */
.lia-editorial-gate{
  will-change:opacity,transform;
}

/* Never use class-triggered scale/translate on the entire canvas in portrait. */
@media(max-width:900px){
  .lia-cinema.roadmap-active #liaCinema3D{
    filter:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


/* ============================================================
   v0.63 — continuity polish
============================================================ */

/* Persistent wayfinding: the left rail belongs to the whole LIA journey. */
.lia-cinema-progress,
.lia-cinema-chapter{
  transition:
    opacity 220ms cubic-bezier(0.23,1,0.32,1);
}

/* Keep roadmap readability local and feathered.
   Never create a hard page-sized black rectangle. */
.lia-editorial-section::before{
  top:-18vh !important;
  bottom:-18vh !important;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.30) 8%,
      #000 20%,
      #000 80%,
      rgba(0,0,0,.30) 92%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.30) 8%,
      #000 20%,
      #000 80%,
      rgba(0,0,0,.30) 92%,
      transparent 100%
    );
}

/* Final status field also dissolves back into the same universe. */
.stage-current::before{
  inset:-24vh -10vw !important;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.34) 46%,
      rgba(0,0,0,.10) 69%,
      transparent 84%
    ) !important;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 18%,
      #000 82%,
      transparent
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 18%,
      #000 82%,
      transparent
    );
}

/* No transition blur on the global canvas. Depth does the work. */
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
}

/* Slightly more legible chapter rail without becoming UI-heavy. */
.lia-cinema-chapter{
  color:rgba(255,255,255,.52) !important;
}
.lia-cinema-progress{
  background:rgba(255,255,255,.11) !important;
}
.lia-cinema-progress i{
  background:#d8cbff !important;
  box-shadow:0 0 10px rgba(188,160,255,.45) !important;
}

@media(max-width:900px){
  .lia-editorial-section::before,
  .lia-editorial-section:has(.lia-editorial-inner.reverse)::before{
    top:-20vh !important;
    bottom:-20vh !important;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.28) 8%,
        #000 20%,
        #000 84%,
        rgba(0,0,0,.26) 94%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.28) 8%,
        #000 20%,
        #000 84%,
        rgba(0,0,0,.26) 94%,
        transparent 100%
      );
  }
}


/* ============================================================
   v0.64 — CRISP MODE
   No film grain, no scene blur, no fuzzy text.
============================================================ */

/* Remove the artificial noise layer entirely. */
.lia-cinema-grain{
  display:none !important;
  opacity:0 !important;
  background:none !important;
}

/* Never blur the Three.js world. */
#liaCinema3D,
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D,
.lia-cinema.scene3-mobile #liaCinema3D{
  filter:none !important;
  -webkit-filter:none !important;
  image-rendering:auto;
}

/* Never blur roadmap / scene copy. */
.scene-copy,
.roadmap-copy,
.lia-editorial-copy,
.lia-editorial-current,
.lia-cinema-beat,
.lia-world-label{
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none;
}

/* Keep text crisp over the planet using contrast, not blur. */
.lia-editorial-copy::before,
.roadmap-copy::before{
  filter:none !important;
  -webkit-filter:none !important;
}

/* No backdrop blur on content copy. */
.lia-editorial-copy,
.roadmap-copy,
.scene-copy{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Keep the original star field clean and dark. */
.lia-cinema-stage{
  background:
    radial-gradient(circle at 67% 35%,rgba(73,81,141,.08),transparent 34%),
    linear-gradient(180deg,#040613 0%,#010209 100%) !important;
}

/* Small local readability field only — no fuzzy glass. */
.lia-editorial-copy::before{
  background:
    radial-gradient(
      ellipse 76% 72% at 38% 50%,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.30) 44%,
      rgba(0,0,0,.08) 68%,
      transparent 84%
    ) !important;
}

.lia-editorial-inner.reverse .lia-editorial-copy::before{
  background:
    radial-gradient(
      ellipse 76% 72% at 62% 50%,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.30) 44%,
      rgba(0,0,0,.08) 68%,
      transparent 84%
    ) !important;
}

@media(max-width:900px){
  #liaCinema3D,
  .lia-cinema #liaCinema3D,
  .lia-cinema.roadmap-active #liaCinema3D,
  .lia-cinema.scene3-mobile #liaCinema3D{
    filter:none !important;
    -webkit-filter:none !important;
  }

  .scene-copy,
  .roadmap-copy,
  .lia-editorial-copy,
  .lia-editorial-current{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* ============================================================
   v0.65 — READABLE ROADMAP
============================================================ */

/* Remove secondary schematic visuals. The LIA planet is the hero visual. */
.lia-stage-visual{
  display:none !important;
}

/* Roadmap copy gets a calmer scale and stronger legibility. */
.lia-editorial-copy{
  position:relative !important;
  z-index:20 !important;
  max-width:38rem !important;
  visibility:visible !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.lia-editorial-copy h2{
  max-width:10ch !important;
  font-size:clamp(3.25rem,5.25vw,6.25rem) !important;
  line-height:.96 !important;
  letter-spacing:-.052em !important;
}

.lia-editorial-copy p{
  max-width:35rem !important;
  color:rgba(245,245,247,.70) !important;
  font-size:clamp(1rem,1.12vw,1.18rem) !important;
  line-height:1.72 !important;
}

/* Strong enough to read, but still local — not a new black page. */
.lia-editorial-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-4.5rem !important;
  bottom:-4.5rem !important;
  left:-5rem !important;
  right:-6rem !important;
  background:
    radial-gradient(
      ellipse 82% 78% at 34% 50%,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.42) 44%,
      rgba(0,0,0,.13) 68%,
      transparent 86%
    ) !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

.lia-editorial-inner.reverse .lia-editorial-copy::before{
  left:-6rem !important;
  right:-5rem !important;
  background:
    radial-gradient(
      ellipse 82% 78% at 66% 50%,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.42) 44%,
      rgba(0,0,0,.13) 68%,
      transparent 86%
    ) !important;
}

/* Final state readable as well. */
.lia-editorial-current{
  visibility:visible !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.lia-editorial-current h2{
  font-size:clamp(3.3rem,5.4vw,6.4rem) !important;
}

.lia-editorial-current p{
  color:rgba(245,245,247,.70) !important;
}

/* No grain / no blur remains authoritative. */
.lia-cinema-grain{
  display:none !important;
}
#liaCinema3D,
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Persistent chapter rail. */
.lia-cinema-progress,
.lia-cinema-chapter{
  opacity:1 !important;
  visibility:visible !important;
}

@media(max-width:900px){
  .lia-editorial-inner,
  .lia-editorial-inner.reverse{
    justify-content:flex-end !important;
  }

  .lia-editorial-copy{
    width:100% !important;
    max-width:none !important;
    padding:0 1.25rem 8vh !important;
  }

  .lia-editorial-copy h2{
    max-width:9.3ch !important;
    font-size:clamp(2.95rem,11.8vw,4.85rem) !important;
    line-height:.97 !important;
  }

  .lia-editorial-copy p{
    max-width:95% !important;
    font-size:.98rem !important;
    line-height:1.68 !important;
  }

  .lia-editorial-copy::before,
  .lia-editorial-inner.reverse .lia-editorial-copy::before{
    top:-4rem !important;
    bottom:-5rem !important;
    left:-1.45rem !important;
    right:-1.45rem !important;
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.86) 0%,
        rgba(0,0,0,.60) 38%,
        rgba(0,0,0,.20) 70%,
        transparent 96%
      ) !important;
  }
}


/* ============================================================
   v0.66 — ROADMAP TEXT OVERLAY
============================================================ */

/* Old roadmap copy is now only a scroll anchor.
   It can no longer fight the visible text layer. */
.lia-editorial-sections .lia-editorial-copy,
.lia-editorial-sections .lia-editorial-current{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Fixed foreground layer attached to the same LIA viewport. */
.lia-roadmap-text-layer{
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:none;
  overflow:hidden;
  visibility:hidden;
}

.lia-cinema.roadmap-active .lia-roadmap-text-layer{
  visibility:visible;
}

.lia-roadmap-overlay-copy{
  position:absolute;
  top:50%;
  width:min(38rem,42vw);
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,calc(-50% + 20px),0);
  will-change:transform,opacity;
  color:#f5f5f7;
}

.lia-roadmap-overlay-copy.left{
  left:clamp(4rem,7vw,7rem);
}

.lia-roadmap-overlay-copy.right{
  right:clamp(4rem,7vw,7rem);
}

.lia-roadmap-overlay-copy.center{
  left:50%;
  width:min(64rem,78vw);
  text-align:center;
  transform:translate3d(-50%,calc(-50% + 20px),0);
}

.lia-roadmap-overlay-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-4.5rem;
  bottom:-4.5rem;
  left:-5rem;
  right:-6rem;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse 82% 76% at 36% 50%,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.42) 43%,
      rgba(0,0,0,.13) 68%,
      transparent 86%
    );
}

.lia-roadmap-overlay-copy.right::before{
  left:-6rem;
  right:-5rem;
  background:
    radial-gradient(
      ellipse 82% 76% at 64% 50%,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.42) 43%,
      rgba(0,0,0,.13) 68%,
      transparent 86%
    );
}

.lia-roadmap-overlay-copy.center::before{
  left:-8rem;
  right:-8rem;
  background:
    radial-gradient(
      ellipse 72% 74% at 50% 50%,
      rgba(0,0,0,.62),
      rgba(0,0,0,.28) 52%,
      transparent 82%
    );
}

.lia-roadmap-overlay-copy h2{
  margin:0;
  max-width:10.5ch;
  font-size:clamp(3.3rem,5.25vw,6.3rem);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:680;
}

.lia-roadmap-overlay-copy.center h2{
  max-width:none;
}

.lia-roadmap-overlay-copy p{
  max-width:35rem;
  margin:2rem 0 0;
  color:rgba(245,245,247,.72);
  font-size:clamp(1rem,1.12vw,1.18rem);
  line-height:1.72;
}

.lia-roadmap-overlay-copy.center p{
  margin-left:auto;
  margin-right:auto;
  max-width:43rem;
}

/* Persistent wayfinding rail. */
.lia-cinema-progress,
.lia-cinema-chapter{
  opacity:1 !important;
  visibility:visible !important;
}

/* Crisp scene remains authoritative. */
.lia-cinema-grain{
  display:none !important;
}
#liaCinema3D,
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
  -webkit-filter:none !important;
}

@media(max-width:900px){
  .lia-roadmap-overlay-copy,
  .lia-roadmap-overlay-copy.left,
  .lia-roadmap-overlay-copy.right{
    top:auto;
    bottom:8vh;
    left:1.45rem;
    right:1.45rem;
    width:auto;
    transform:translate3d(0,20px,0);
  }

  .lia-roadmap-overlay-copy.center{
    top:auto;
    bottom:10vh;
    left:1.45rem;
    right:1.45rem;
    width:auto;
    text-align:left;
    transform:translate3d(0,20px,0);
  }

  .lia-roadmap-overlay-copy::before,
  .lia-roadmap-overlay-copy.right::before,
  .lia-roadmap-overlay-copy.center::before{
    top:-3rem;
    bottom:-5rem;
    left:-1.45rem;
    right:-1.45rem;
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.86),
        rgba(0,0,0,.58) 40%,
        rgba(0,0,0,.18) 70%,
        transparent 96%
      );
  }

  .lia-roadmap-overlay-copy h2{
    max-width:9.4ch;
    font-size:clamp(2.95rem,11.8vw,4.85rem);
    line-height:.97;
  }

  .lia-roadmap-overlay-copy.center h2{
    max-width:10ch;
  }

  .lia-roadmap-overlay-copy p{
    max-width:95%;
    font-size:.98rem;
    line-height:1.68;
  }
}

@media(prefers-reduced-motion:reduce){
  .lia-roadmap-overlay-copy{
    transform:none !important;
  }
}


/* ============================================================
   v0.67 — NO GHOST / NO EMPTY TAIL
============================================================ */

/* Old roadmap text is only an invisible scroll anchor now.
   display:none removes duplicate rendering completely. */
.lia-editorial-sections .lia-editorial-copy,
.lia-editorial-sections .lia-editorial-current{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Secondary roadmap diagrams stay removed. */
.lia-stage-visual{
  display:none !important;
}

/* Shorter chapter runways: enough for camera travel, no giant empty pages. */
.lia-editorial-section{
  min-height:118vh !important;
}

.stage-current{
  min-height:96vh !important;
}

/* Final overlay must remain above everything. */
.lia-roadmap-text-layer{
  z-index:120 !important;
}

.lia-roadmap-overlay-copy{
  z-index:121 !important;
}

/* No blur/noise regressions. */
.lia-cinema-grain{
  display:none !important;
}

#liaCinema3D,
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
  -webkit-filter:none !important;
}

@media(max-width:900px){
  .lia-editorial-section{
    min-height:112vh !important;
  }

  .stage-current{
    min-height:92vh !important;
  }
}


/* ============================================================
   v0.68 — EXCLUSIVE ROADMAP COPY
============================================================ */

/* Default: every roadmap copy is fully hidden. */
.lia-roadmap-overlay-copy{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* The new controller applies data-v68-visible only to the one
   chapter currently allowed to appear. */
.lia-roadmap-overlay-copy[data-v68-visible]{
  visibility:visible !important;
}

/* Old roadmap text stays completely removed. */
.lia-editorial-sections .lia-editorial-copy,
.lia-editorial-sections .lia-editorial-current{
  display:none !important;
}

/* No artificial grain/blur. */
.lia-cinema-grain{
  display:none !important;
}
#liaCinema3D,
.lia-cinema #liaCinema3D,
.lia-cinema.roadmap-active #liaCinema3D{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Slightly cleaner reading field. */
.lia-roadmap-overlay-copy::before{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Keep the final scene visually alive through the real page end. */
.lia-roadmap-overlay-copy.final{
  will-change:opacity,transform;
}



/* ============================================================
   v0.69 resilient LIA fallback
   If the Three.js WebGL layer is unavailable, keep the LIA world visible
   instead of leaving only an invisible hit target and atmosphere.
============================================================ */
#lia3dFallback{
  position:fixed;
  z-index:35;
  left:50%;
  top:50%;
  width:min(38vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.96);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.26),transparent 22%),
    url("../images/lia-approved-planet.webp") center/contain no-repeat;
  box-shadow:
    0 0 0 1px rgba(214,198,255,.10),
    0 0 70px rgba(143,97,224,.24),
    0 0 180px rgba(98,83,201,.11);
  transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-out),filter 320ms var(--ease-out);
  filter:saturate(1.04) contrast(1.02);
}
body.lia-system-active.webgl-lia-fallback #lia3dFallback{
  opacity:.94;
  transform:translate(-50%,-50%) scale(1);
}
body.lia-detail-active.webgl-lia-fallback #lia3dFallback{
  opacity:.66;
  transform:translate(-58%,-50%) scale(1.08);
  filter:blur(1.4px) saturate(.92) brightness(.82);
}
@media(max-width:820px){
  #lia3dFallback{width:min(72vw,430px)}
}


/* v0.69.5 — labels for registry-created LIA-system worlds. */
.caelarium-world-3d-label{
  position:fixed;
  left:0;
  top:0;
  z-index:42;
  pointer-events:none;
  opacity:0;
  color:rgba(247,247,251,.58);
  font:520 11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
  will-change:transform,opacity;
  transition:opacity 220ms cubic-bezier(.23,1,.32,1);
}


/* ============================================================
   v0.69.8 — North Star label scope
   The North Star remains draggable anywhere it is rendered, but its hover
   reference label is exclusive to the Principles / North Star interface.
============================================================ */
#northStarHit:not(.principles-label-enabled) .north-star-hover-label{
  opacity:0 !important;
  transform:translate(-50%,14px) !important;
}
#northStarHit.principles-label-enabled:hover .north-star-hover-label,
#northStarHit.principles-label-enabled.hovering .north-star-hover-label{
  opacity:1 !important;
  transform:translate(-50%,9px) !important;
}


/* ============================================================
   v0.70.0 explicit interaction layers
   ------------------------------------------------------------
   0 background universe canvas
   1 LIA 3D focus canvas
   2 story copy
   3 LIA detail / world panels
   4 navigation chrome
   Scroll ownership remains with the document story; fixed visual layers never
   own or pin scroll position beyond the one-shot Detail -> System handoff.
============================================================ */
#space{z-index:0}
#focus{z-index:34}
.story,.company-summary,.company-chapter,.feature,.final{isolation:isolate}
#panel,.world-popover-anchor{z-index:88}
.chrome,.section-nav{isolation:isolate}
html[data-caelarium-view="system"] #panel{pointer-events:none}


/* ============================================================
   v0.72.1 — LIA TRANSITION RESTORE
   Keep the v0.71.2 cinematic/3D travel exactly as the transition authority.
   Only one roadmap text layer is visible; hidden section copies are anchors.
============================================================ */

/* The fixed exclusive copy is the only visible post-gate copy source. */
.lia-editorial-sections .lia-editorial-copy,
.lia-editorial-sections .lia-editorial-current{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Do not let an old gate frame survive underneath a roadmap chapter. */
.lia-cinema.roadmap-active .lia-editorial-gate{
  pointer-events:none !important;
}

/* Preserve the long spatial handoff from v0.71.2. No CSS transform/scale jump. */
.lia-cinema.roadmap-active #liaCinema3D,
#liaCinema3D{
  transform:none !important;
  transition:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* Keep chapter copies readable, but slightly smaller than the old billboard
   sizes so they never collide with the planet or each other. */
.lia-roadmap-overlay-copy h2{
  font-size:clamp(3rem,4.65vw,5.55rem) !important;
  max-width:10.7ch !important;
}
.lia-roadmap-overlay-copy.center h2{
  max-width:none !important;
}
.lia-roadmap-overlay-copy p{
  max-width:34rem !important;
  font-size:clamp(.96rem,1.02vw,1.12rem) !important;
  line-height:1.68 !important;
}

/* Keep enough runway for the old fade -> depth -> travel transition, while
   shortening the empty tail. */
.lia-editorial-section{
  min-height:108vh !important;
}
.lia-editorial-section.stage-current,
.lia-editorial-section.stage-current:last-child{
  min-height:84vh !important;
  padding-bottom:3vh !important;
}
.lia-editorial-sections{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Exactly one copy may be visible. */
.lia-roadmap-overlay-copy{
  opacity:0 !important;
  visibility:hidden !important;
}
.lia-roadmap-overlay-copy[data-v68-visible]{
  visibility:visible !important;
}

@media(max-width:900px){
  .lia-editorial-section{min-height:104vh !important;}
  .lia-editorial-section.stage-current{min-height:82vh !important;}
  .lia-roadmap-overlay-copy h2{
    font-size:clamp(2.65rem,10.4vw,4.35rem) !important;
  }
}

/* ============================================================
   v0.87.0 — CLEAN CINEMA EDGES
   Keep the v0.75.1 cinematic timing, but remove the directional
   black fog layers that were obscuring the video and copy.
============================================================ */
.lia-video-backdrop{
  display:none !important;
  opacity:0 !important;
}
.lia-video-frame::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
.lia-video-frame{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.lia-video-world::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}
/* Keep only a very soft global edge falloff — no left/right fog wall. */
.lia-cinema-vignette{
  opacity:.10 !important;
  background:radial-gradient(ellipse at center,transparent 69%,rgba(0,0,0,.17) 100%) !important;
}
@media(max-width:900px){
  .lia-cinema-vignette{
    opacity:.08 !important;
    background:linear-gradient(0deg,rgba(0,0,0,.12),transparent 24%) !important;
  }
}
\n\n/* v0.88.3 — child-world pinned-card exit motion.\n   The anchor remains in place for 240 ms so closing is visibly animated. */\n.world-popover.closing{\n  opacity:0 !important;\n  pointer-events:none !important;\n  transform:translateY(12px) scale(.94) !important;\n  filter:blur(5px) !important;\n  transition:\n    opacity 210ms var(--ease-out),\n    transform 230ms var(--ease-out),\n    filter 210ms var(--ease-out) !important;\n}\n
/* v0.92.1 — The homepage Frontier remains an overview; the detailed dependency-based roadmap lives on /frontier/. */
.frontier-detail-link{position:relative;z-index:8;display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:11px 15px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.72);font-size:11px;text-decoration:none;pointer-events:auto;transition:background 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1),transform 120ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.frontier-detail-link:hover{background:rgba(255,255,255,.065);color:#fff;transform:translateY(-1px)}}
#featureFrontier .chapter-copy{pointer-events:auto}

/* v0.92.3 — Apple-style glass CTA for frontier detail */
.frontier-detail-link{
  position:relative;overflow:hidden;gap:11px!important;padding:12px 18px!important;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px rgba(8,10,18,.24),0 0 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(18px) saturate(165%)!important;-webkit-backdrop-filter:blur(18px) saturate(165%)!important;
  color:rgba(255,255,255,.92)!important;font-size:11px!important;font-weight:600;letter-spacing:.01em
}
.frontier-detail-link::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 42%,rgba(255,255,255,.03));
  pointer-events:none
}
.frontier-detail-link > *{position:relative;z-index:1}
.frontier-detail-link span[aria-hidden="true"],.frontier-detail-link [aria-hidden="true"]{opacity:.84}
@media(hover:hover) and (pointer:fine){.frontier-detail-link:hover{transform:translateY(-1px)!important;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 36px rgba(8,10,18,.30),0 0 0 1px rgba(255,255,255,.05)!important}}
.frontier-detail-link:active{transform:scale(.985)!important}

/* v0.92.6 — shared type scale + consistent glass CTA language */
.hero-title{font-size:clamp(50px,7.4vw,112px)!important}
.big{font-size:clamp(38px,5.9vw,86px)!important}
.company-summary h2{font-size:clamp(44px,6.1vw,92px)!important}
.chapter-copy h2{font-size:clamp(42px,4.7vw,74px)!important}
.final h2{font-size:clamp(42px,6.2vw,86px)!important}
.copybox h2{font-size:clamp(34px,4.5vw,66px)!important}
html[data-lang="zh"] .company-summary h2{font-size:clamp(44px,5.8vw,86px)!important}
html[data-lang="zh"] .chapter-copy h2{font-size:clamp(40px,4.5vw,70px)!important}

#featureFrontier .chapter-note{margin-bottom:18px!important}
.frontier-detail-link,
.final .links a,
.final .links button{
  min-height:42px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.94)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  font-size:11px!important;
  font-weight:600!important;
  text-decoration:none!important;
  transition:transform 120ms var(--ease-out),background 160ms var(--ease-out),border-color 160ms var(--ease-out)!important;
}
.frontier-detail-link{margin-top:0!important;width:max-content!important;position:relative!important;z-index:12!important}
.frontier-detail-link::before{display:none!important}
@media(hover:hover) and (pointer:fine){
  .frontier-detail-link:hover,.final .links a:hover,.final .links button:hover{
    background:rgba(255,255,255,.09)!important;
    border-color:rgba(255,255,255,.20)!important;
    transform:translateY(-1px)!important;
  }
}
.frontier-detail-link:active,.final .links a:active,.final .links button:active{transform:scale(.97)!important}

@media(max-width:640px){
  .hero-title{font-size:clamp(48px,13.4vw,72px)!important}
  .big{font-size:clamp(38px,11.2vw,60px)!important}
  .company-summary h2{font-size:clamp(42px,11.8vw,64px)!important}
  .chapter-copy h2,html[data-lang="zh"] .chapter-copy h2{font-size:clamp(38px,9.5vw,56px)!important}
  .final h2{font-size:clamp(40px,11.3vw,62px)!important}
}


/* v0.92.7 — give the mission lockup enough vertical air for descenders (p) before the next line (i). */
#featureMission .chapter-copy h2{line-height:1.035!important;letter-spacing:-.045em!important}


/* v0.92.8 — global display leading + restore larger opening/closing statements. */
.hero-title{font-size:clamp(58px,8.6vw,132px)!important;line-height:1.00!important;letter-spacing:-.045em!important}
#universe .big{font-size:clamp(46px,6.9vw,104px)!important;line-height:1.06!important;letter-spacing:-.044em!important}
.company-summary h2,.company-chapter h2{line-height:1.07!important;letter-spacing:-.040em!important}
.final h2{font-size:clamp(50px,7.1vw,102px)!important;line-height:1.06!important;letter-spacing:-.043em!important}
.final p{line-height:1.70!important}
@media(max-width:640px){.hero-title{font-size:clamp(54px,14.2vw,78px)!important;line-height:1.03!important}#universe .big{font-size:clamp(42px,12vw,66px)!important;line-height:1.08!important}.company-summary h2,.company-chapter h2,.final h2{line-height:1.10!important}.final h2{font-size:clamp(44px,12vw,68px)!important}}


/* v1.0.4 — immediate Recall launch feedback, no layout change. */
#detailPrimary.is-product-launching,
#detailSecondary.is-product-launching,
#detailTertiary.is-product-launching{
  opacity:.66!important;
  cursor:progress!important;
  transform:scale(.985);
  transition:opacity .12s ease,transform .12s ease;
}


/* v1.0.10 — keep the homepage scroll-start path compositor-native. */
#space,#focus{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.story,.scrollhint,.map-caption,.company-summary,.company-chapter,.final{
  will-change:opacity;
}


/* ============================================================
   v1.0.12 — FULL PIPELINE SCROLL FIX
============================================================ */
#space,#focus,#northStar3d{
  will-change:auto!important;
  transform:none!important;
  backface-visibility:visible!important;
}
.story,.scrollhint,.map-caption,.company-summary,.company-chapter,.final{
  will-change:auto!important;
}
@media(max-width:900px){
  .chrome{
    background:rgba(2,3,8,.965)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .chrome .btn,.chrome .iconbtn,.chrome .lang-toggle{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}


/* ============================================================
   v1.0.14 — ONE SCREEN HOMEPAGE STORY
   Nine physical viewport pages drive the existing fixed narrative layers.
   Native scroll snapping is used only for the homepage story track; no
   wheel/touch handler hijacks the browser's scrolling thread.
============================================================ */
#scroll-space{
  height:auto!important;
  min-height:0!important;
  pointer-events:none;
}
#scroll-space .home-snap-page{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  pointer-events:none;
}
html{
  scroll-snap-type:none;
  scroll-padding-top:0;
}
.site-footer{
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
/* During immersive product films normal body scrolling is already locked;
   explicitly remove snapping so their own interaction model stays isolated. */
body.lia-cinema-open,
body.recall-cinema-open{
  scroll-snap-type:none;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* ============================================================
   v1.0.15 — SECTION HOLD + ANTI-OVERSCROLL
   Keep native scrolling/compositor ownership, but give every homepage story
   page a small physical hold pocket. scroll-snap-stop:always remains the
   authority, so a strong swipe is far less likely to skip over a chapter.
============================================================ */
#scroll-space .home-snap-page{
  height:106vh!important;
  height:106svh!important;
  min-height:106svh!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
}
html{
  scroll-snap-type:none!important;
  overscroll-behavior-y:none;
}
@media(max-width:900px){
  #scroll-space .home-snap-page{
    height:107svh!important;
    min-height:107svh!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #scroll-space .home-snap-page{
    height:100svh!important;
    min-height:100svh!important;
  }
}


/* ============================================================
   v1.0.17 — GUARANTEED NORTH STAR + STRONG MOBILE STORY HOLD
============================================================ */
.north-star-planet-wrap.north-star-fallback{
  position:fixed!important;
  left:30vw!important;
  top:42vh!important;
  width:min(390px,30vw)!important;
  aspect-ratio:1!important;
  display:block!important;
  z-index:19!important;
  pointer-events:none!important;
  transform:
    translate(-50%,-50%)
    scale(calc(.25 + var(--north-focus) * .75))!important;
  opacity:calc(var(--north-focus) * 1.08)!important;
  transition:opacity 220ms linear!important;
}

.north-star-fallback .north-star-planet,
.north-star-fallback .north-star-planet-glow{
  display:block!important;
}

html.north-star-3d-rendered
.north-star-planet-wrap.north-star-fallback{
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:900px), (pointer:coarse){
  #scroll-space .home-snap-page{
    height:112svh!important;
    min-height:112svh!important;
    scroll-snap-stop:always!important;
  }

  .north-star-planet-wrap.north-star-fallback{
    left:38vw!important;
    top:39vh!important;
    width:min(310px,80vw)!important;
    transform:
      translate(-50%,-50%)
      scale(calc(.24 + var(--north-focus) * .76))!important;
  }

  html.mobile-story-paging-active{
    overscroll-behavior-y:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .north-star-planet-wrap.north-star-fallback{
    transition:none!important;
  }
}

@media(prefers-reduced-motion:reduce) and (max-width:900px),
       (prefers-reduced-motion:reduce) and (pointer:coarse){
  #scroll-space .home-snap-page{
    height:100svh!important;
    min-height:100svh!important;
  }
}


/* ============================================================
   v1.0.18 — SLOW / DAMPED MOBILE STORY
   Replace the strong v1.0.17 one-page jump with resisted direct dragging.
============================================================ */
@media(max-width:900px), (pointer:coarse){
  html{
    scroll-snap-type:none!important;
    overscroll-behavior-y:none!important;
  }

  html.mobile-damped-scroll-active{
    scroll-snap-type:none!important;
  }

  #scroll-space .home-snap-page{
    height:100svh!important;
    min-height:100svh!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:normal!important;
  }

  .site-footer{
    scroll-snap-stop:normal!important;
  }
}

@media(prefers-reduced-motion:reduce) and (max-width:900px),
       (prefers-reduced-motion:reduce) and (pointer:coarse){
  html{
    scroll-snap-type:none!important;
  }
}


/* ============================================================
   v1.0.19 — CONTINUOUS SLOW HOMEPAGE SCROLL
   No chapter snapping on either desktop or mobile.
============================================================ */
html{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overscroll-behavior-y:none;
}

#scroll-space .home-snap-page{
  height:120vh!important;
  min-height:120vh!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

.site-footer{
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

@media(max-width:900px), (pointer:coarse){
  html{
    scroll-snap-type:none!important;
  }

  #scroll-space .home-snap-page{
    height:116svh!important;
    min-height:116svh!important;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-snap-type:none!important;
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   v1.0.20 — RESTORE INERTIA, KEEP SNAP DISABLED
============================================================ */
html{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overscroll-behavior-y:auto!important;
}

body{
  overscroll-behavior-y:auto!important;
}

#scroll-space .home-snap-page{
  height:120vh!important;
  min-height:120vh!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

@media(max-width:900px), (pointer:coarse){
  #scroll-space .home-snap-page{
    height:116svh!important;
    min-height:116svh!important;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}


/* ============================================================
   v1.0.21 — TRUE NATIVE SCROLL
   Browser / OS owns scrolling and momentum. No JS paging physics.
============================================================ */
html,
body{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overscroll-behavior-y:auto!important;
}

#scroll-space,
#scroll-space .home-snap-page,
#interaction{
  touch-action:pan-y pinch-zoom!important;
}

#scroll-space .home-snap-page{
  height:108vh!important;
  min-height:108vh!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

.site-footer{
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

@media(max-width:900px), (pointer:coarse){
  html,
  body{
    scroll-snap-type:none!important;
    overscroll-behavior-y:auto!important;
  }

  #scroll-space,
  #scroll-space .home-snap-page,
  #interaction,
  main{
    touch-action:pan-y pinch-zoom!important;
  }

  #scroll-space .home-snap-page{
    height:104svh!important;
    min-height:104svh!important;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}


/* ============================================================
   v1.0.22 — ONE GALAXY BACKGROUND
   Camera composition is locked in universe.js; scrolling stays native.
============================================================ */
#space{
  transform:none!important;
}


/* ============================================================
   v1.0.23 — REVERSE RETURN + STABLE MOBILE BACKGROUND
============================================================ */

/* The mobile final CTA is deliberately compositor-simple.
   Safari can momentarily promote one blurred glass link to an opaque layer
   during touch/focus. All interaction states therefore use one exact paint. */
@media(max-width:900px), (pointer:coarse){
  .final .links a,
  .final .links a:link,
  .final .links a:visited,
  .final .links a:hover,
  .final .links a:active,
  .final .links a:focus,
  .final .links a:focus-visible,
  .final .links button,
  .final .links button:hover,
  .final .links button:active,
  .final .links button:focus,
  .final .links button:focus-visible{
    background:rgba(255,255,255,.055)!important;
    border-color:rgba(255,255,255,.14)!important;
    color:rgba(255,255,255,.94)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 10px 30px rgba(0,0,0,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    -webkit-tap-highlight-color:transparent!important;
    transform:none!important;
    outline:none!important;
  }
}


/* ============================================================
   v1.0.24 — BACKGROUND VISUALS RESTORED TO v1.0.22
   Background behavior is restored in universe.js.
   v1.0.23 mobile CTA transparency fix remains intentionally active.
============================================================ */


/* ============================================================
   v1.0.25 — STABLE FRONTIER CTA + SAME GALAXY
============================================================ */
@media(max-width:900px), (pointer:coarse){
  .frontier-detail-link,
  .frontier-detail-link:link,
  .frontier-detail-link:visited,
  .frontier-detail-link:hover,
  .frontier-detail-link:active,
  .frontier-detail-link:focus,
  .frontier-detail-link:focus-visible{
    background:rgba(255,255,255,.055)!important;
    border-color:rgba(255,255,255,.14)!important;
    color:rgba(255,255,255,.94)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 10px 30px rgba(0,0,0,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    -webkit-tap-highlight-color:transparent!important;
    transform:none!important;
    outline:none!important;
    transition:none!important;
  }
}