/* =========================================================
   PAGE 27 · MISSION 03 GATEWAY
   CONNECT · China → Story → World
   1600×900 safe layout / isolated styles
========================================================= */
#page27Mission03Gateway{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  margin:0!important; padding:0!important;
  box-sizing:border-box!important; overflow:hidden!important;
  color:#f6ffff!important;
  background:
    linear-gradient(112deg,rgba(2,16,28,.93),rgba(5,42,52,.74) 48%,rgba(3,20,38,.91)),
    url("../assets/images/cover-bg.jpg") center/cover no-repeat!important;
  font-family:"Inter","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif!important;
}
#page27Mission03Gateway::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,rgba(55,255,208,.18),transparent 29%),
    radial-gradient(circle at 76% 30%,rgba(255,210,96,.08),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,9,20,.24));
}
#page27Mission03Gateway .p27-stage{
  position:absolute!important; inset:0!important; z-index:2!important;
  padding:20px 48px 22px!important; box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:88px 1fr 150px 108px!important;
  gap:10px!important;
}
#page27Mission03Gateway .p27-grid{
  position:absolute; inset:0; z-index:-1; opacity:.23; pointer-events:none;
  background-image:
    linear-gradient(rgba(91,235,219,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,235,219,.08) 1px,transparent 1px);
  background-size:86px 86px;
  mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 100%);
  animation:p27GridDrift 16s linear infinite;
}
@keyframes p27GridDrift{to{background-position:86px 43px}}
#page27Mission03Gateway .p27-particle{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:#6fffe2; box-shadow:0 0 16px #6fffe2;
  opacity:.6; pointer-events:none; animation:p27Float 6s ease-in-out infinite;
}
#page27Mission03Gateway .p27-p1{left:14%;top:27%}
#page27Mission03Gateway .p27-p2{right:18%;top:43%;animation-delay:-2s}
#page27Mission03Gateway .p27-p3{left:68%;bottom:19%;animation-delay:-4s}
@keyframes p27Float{50%{transform:translateY(-22px);opacity:1}}

#page27Mission03Gateway .p27-top{
  display:grid!important; grid-template-columns:1fr 1fr 280px!important;
  align-items:center!important;
  border-bottom:1px solid rgba(93,255,219,.38)!important;
}
#page27Mission03Gateway .p27-top-left{display:flex;flex-direction:column;align-items:flex-start}
#page27Mission03Gateway .p27-top-left span{font-size:17px;font-weight:900;letter-spacing:2px;color:#77f5df}
#page27Mission03Gateway .p27-top-left strong{font-size:30px;line-height:1.05;font-weight:950;margin-top:2px}
#page27Mission03Gateway .p27-top-left small{font-size:16px;font-weight:800;color:#a7e9dc;margin-top:4px}
#page27Mission03Gateway .p27-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
#page27Mission03Gateway .p27-brand strong{font-size:36px;line-height:1;font-weight:950;text-shadow:0 0 18px rgba(88,255,224,.42)}
#page27Mission03Gateway .p27-brand span{font-size:14px;font-weight:900;letter-spacing:1.5px;color:#71f3df;margin-top:5px}
#page27Mission03Gateway .p27-status{
  justify-self:end;min-width:250px;padding:8px 14px;box-sizing:border-box;text-align:center;
  border:1px solid rgba(99,255,221,.48);border-radius:14px;
  background:rgba(5,31,42,.70);box-shadow:0 0 22px rgba(65,255,211,.12);
}
#page27Mission03Gateway .p27-status span{display:block;font-size:13px;font-weight:900;letter-spacing:1.2px;color:#79f6df}
#page27Mission03Gateway .p27-status strong{display:block;font-size:25px;line-height:1;margin:3px 0;font-weight:950}
#page27Mission03Gateway .p27-status small{font-size:12px;font-weight:850;color:#b8f3e7}

#page27Mission03Gateway .p27-center{
  min-height:0;display:grid;grid-template-columns:255px 1fr 255px;align-items:center;gap:18px;
}
#page27Mission03Gateway .p27-side{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:.88;
}
#page27Mission03Gateway .p27-side img{
  width:145px;height:165px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 12px rgba(68,224,255,.36));
}
#page27Mission03Gateway .p27-side span{font-size:13px;font-weight:900;letter-spacing:1.4px;color:#66e9f3;margin-top:2px}
#page27Mission03Gateway .p27-side strong{font-size:25px;line-height:1.05;font-weight:950;margin-top:2px}
#page27Mission03Gateway .p27-side small{font-size:16px;font-weight:800;color:#9edee8;margin-top:3px}
#page27Mission03Gateway .p27-side em{
  margin-top:7px;padding:5px 11px;border:1px solid rgba(92,235,241,.38);border-radius:999px;
  font-size:11px;font-weight:900;font-style:normal;color:#8df5e8;background:rgba(4,40,49,.5);
}

#page27Mission03Gateway .p27-core{
  position:relative;min-height:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
#page27Mission03Gateway .p27-unlocked{
  position:absolute;top:3px;padding:5px 16px;border-radius:999px;
  border:1px solid rgba(105,255,218,.55);background:rgba(7,56,54,.62);
  color:#8effe8;font-size:12px;font-weight:950;letter-spacing:1.4px;
  box-shadow:0 0 20px rgba(58,255,207,.13);
}
#page27Mission03Gateway .p27-aura{
  position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,255,201,.24),rgba(48,205,175,.07) 44%,transparent 70%);
  filter:blur(3px);animation:p27Pulse 3.6s ease-in-out infinite;
}
@keyframes p27Pulse{50%{transform:scale(1.06);opacity:.72}}
#page27Mission03Gateway .p27-ring{
  position:absolute;border:1px solid rgba(104,255,222,.28);border-radius:50%;pointer-events:none;
}
#page27Mission03Gateway .p27-ring-a{width:320px;height:128px;transform:rotate(-12deg);animation:p27SpinA 12s linear infinite}
#page27Mission03Gateway .p27-ring-b{width:280px;height:108px;transform:rotate(21deg);animation:p27SpinB 10s linear infinite reverse}
@keyframes p27SpinA{to{transform:rotate(348deg)}}
@keyframes p27SpinB{to{transform:rotate(381deg)}}
#page27Mission03Gateway .p27-main-beacon{
  position:relative;z-index:2;width:235px;height:245px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 22px rgba(73,255,204,.64)) drop-shadow(0 0 38px rgba(255,207,86,.12));
}
#page27Mission03Gateway .p27-mission-no{
  position:relative;z-index:3;margin-top:-22px;font-size:14px;font-weight:950;letter-spacing:2px;color:#75f6df;
}
#page27Mission03Gateway .p27-title{
  position:relative;z-index:3;font-size:42px;line-height:1;font-weight:950;letter-spacing:1px;
  color:#fff;text-shadow:0 0 22px rgba(72,255,206,.42);
}
#page27Mission03Gateway .p27-title-cn{
  position:relative;z-index:3;margin-top:4px;font-size:19px;font-weight:850;color:#b7f1e6;
}
#page27Mission03Gateway .p27-path{
  position:relative;z-index:3;margin-top:10px;font-size:17px;font-weight:950;letter-spacing:1px;color:#eafffa;
}
#page27Mission03Gateway .p27-path b,#page27Mission03Gateway .p27-path-cn b{color:#f2ca70;margin:0 9px}
#page27Mission03Gateway .p27-path-cn{position:relative;z-index:3;margin-top:3px;font-size:14px;font-weight:800;color:#9edfd4}

#page27Mission03Gateway .p27-brief{
  display:grid;grid-template-columns:1.16fr .84fr;gap:14px;min-height:0;
}
#page27Mission03Gateway .p27-nova,
#page27Mission03Gateway .p27-driving{
  border:1px solid rgba(91,240,217,.30);border-radius:16px;
  background:linear-gradient(110deg,rgba(6,28,46,.78),rgba(11,52,57,.58));
  box-shadow:inset 0 0 28px rgba(49,237,205,.035);
}
#page27Mission03Gateway .p27-nova{
  display:grid;grid-template-columns:118px 1fr;align-items:center;padding:10px 18px;gap:12px;
}
#page27Mission03Gateway .p27-nova-orb{
  position:relative;width:92px;height:92px;border-radius:50%;justify-self:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,#0b5470 0 28%,#092b4c 29% 48%,rgba(5,25,44,.5) 49%);
  border:1px solid rgba(95,250,239,.66);box-shadow:0 0 25px rgba(55,235,231,.35),inset 0 0 20px rgba(63,228,255,.28);
}
#page27Mission03Gateway .p27-nova-orb i{position:absolute;inset:7px;border:1px solid rgba(102,255,227,.28);border-radius:50%}
#page27Mission03Gateway .p27-nova-orb i:nth-child(2){inset:1px 13px;transform:rotate(55deg)}
#page27Mission03Gateway .p27-nova-orb i:nth-child(3){inset:13px 1px;transform:rotate(-55deg)}
#page27Mission03Gateway .p27-nova-orb strong{font-size:17px;font-weight:950;color:#fff}
#page27Mission03Gateway .p27-nova-orb span{font-size:7px;font-weight:900;color:#76f4e6}
#page27Mission03Gateway .p27-nova>div:last-child{text-align:left}
#page27Mission03Gateway .p27-nova>div:last-child>strong{font-size:16px;font-weight:950;letter-spacing:1px;color:#74f4df}
#page27Mission03Gateway .p27-nova p{font-size:17px;line-height:1.28;font-weight:750;margin:5px 0 4px;color:#f4fffd}
#page27Mission03Gateway .p27-nova p b{color:#f5d17a}
#page27Mission03Gateway .p27-nova small{display:block;font-size:14px;line-height:1.35;font-weight:750;color:#b9ddd8}
#page27Mission03Gateway .p27-driving{
  display:flex;flex-direction:column;justify-content:center;padding:13px 22px;text-align:left;
  border-color:rgba(242,202,112,.28);
}
#page27Mission03Gateway .p27-driving span{font-size:13px;font-weight:950;letter-spacing:1.4px;color:#f0cb79}
#page27Mission03Gateway .p27-driving strong{font-size:24px;line-height:1.13;font-weight:950;margin:6px 0;color:#fff}
#page27Mission03Gateway .p27-driving small{font-size:16px;line-height:1.3;font-weight:800;color:#c8e9e2}

#page27Mission03Gateway .p27-footer{
  min-height:0;display:grid;grid-template-columns:1fr 38px 1fr 38px 1.15fr 250px;align-items:center;gap:8px;
  padding:10px 14px;border:1px solid rgba(91,240,217,.28);border-radius:16px;
  background:rgba(5,24,42,.72);box-sizing:border-box;
}
#page27Mission03Gateway .p27-footer>div{
  min-width:0;height:68px;padding:7px 12px;box-sizing:border-box;border-radius:12px;
  border:1px solid rgba(91,213,222,.16);display:flex;flex-direction:column;justify-content:center;text-align:left;
}
#page27Mission03Gateway .p27-footer>div.active{
  border-color:rgba(100,255,218,.48);background:linear-gradient(100deg,rgba(18,87,75,.52),rgba(17,56,66,.48));
  box-shadow:0 0 18px rgba(61,255,207,.10);
}
#page27Mission03Gateway .p27-footer div span{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#75dfe0}
#page27Mission03Gateway .p27-footer div strong{font-size:19px;line-height:1.05;font-weight:950}
#page27Mission03Gateway .p27-footer div small{font-size:10px;font-weight:800;color:#9cbcc3;margin-top:2px}
#page27Mission03Gateway .p27-footer>i{text-align:center;font-size:23px;font-style:normal;color:#60d8d4}
#page27Mission03Gateway .p27-enter{
  height:58px;border:1px solid rgba(109,255,220,.68);border-radius:12px;
  background:linear-gradient(100deg,#147b72,#1aa67e);color:#fff;
  font-size:14px;font-weight:950;letter-spacing:.4px;cursor:pointer;
  box-shadow:0 0 20px rgba(43,255,199,.18);
}
#page27Mission03Gateway .p27-enter:hover{transform:translateY(-1px);filter:brightness(1.08)}
#page27Mission03Gateway .p27-enter b{font-size:19px;margin-left:8px;color:#f6d782}


/* =========================================================
   PAGE 27 / DISPLAYED PAGE 28 · v02
   Mission 03 Gateway refinement
   - viewport-wide background + rising light orbs
   - top header lifted away from divider
   - Page17-sized BEACONS ACTIVE box
   - bottom navigation reflow
   - NOVA animation/glow
========================================================= */

/* The city background now lives on the viewport FX layer,
   so the slide itself stays transparent and no white side bars appear. */
#page27Mission03Gateway{
    background:transparent!important;
}
#page27Mission03Gateway::before{
    background:
        radial-gradient(circle at 50% 42%,rgba(57,255,208,.10),transparent 31%),
        linear-gradient(115deg,rgba(2,20,30,.10),rgba(11,83,76,.07),rgba(3,19,35,.10))!important;
    z-index:1!important;
}
#page27Mission03Gateway::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(circle at 50% 44%,transparent 20%,rgba(0,10,17,.10) 66%,rgba(0,7,14,.20) 100%);
}

/* Full layout: create more reliable separation between header / brief / footer. */
#page27Mission03Gateway .p27-stage{
    z-index:10!important;
    padding:12px 48px 18px!important;
    grid-template-rows:82px minmax(0,1fr) 138px 94px!important;
    gap:10px!important;
}

/* 2) Top row moves upward; divider sits safely below text. */
#page27Mission03Gateway .p27-top{
    position:relative!important;
    top:-6px!important;
    border-bottom:none!important;
    padding-bottom:13px!important;
    box-sizing:border-box!important;
}
#page27Mission03Gateway .p27-top::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(91,246,220,.16),
        rgba(91,246,220,.52),
        rgba(240,202,112,.22)
    );
}
#page27Mission03Gateway .p27-top-left,
#page27Mission03Gateway .p27-brand,
#page27Mission03Gateway .p27-status{
    transform:translateY(-3px);
}

/* Reuse the final Page17 proportions for the upper-right status card. */
#page27Mission03Gateway .p27-status{
    min-width:215px!important;
    width:215px!important;
    padding:8px 12px!important;
    align-self:center!important;
    justify-self:end!important;
}
#page27Mission03Gateway .p27-status span{
    font-size:12px!important;
}
#page27Mission03Gateway .p27-status strong{
    font-size:24px!important;
}
#page27Mission03Gateway .p27-status small{
    font-size:11px!important;
}

/* Keep central beacon content from drifting too low after header shift. */
#page27Mission03Gateway .p27-center{
    transform:translateY(-3px);
}

/* 3) Brief row and bottom navigation become two completely separate zones. */
#page27Mission03Gateway .p27-brief{
    min-height:0!important;
    height:138px!important;
    align-self:stretch!important;
    overflow:hidden!important;
}
#page27Mission03Gateway .p27-nova,
#page27Mission03Gateway .p27-driving{
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
}
#page27Mission03Gateway .p27-driving{
    padding:10px 20px!important;
}
#page27Mission03Gateway .p27-driving strong{
    font-size:21px!important;
    line-height:1.10!important;
    margin:5px 0 4px!important;
}
#page27Mission03Gateway .p27-driving small{
    font-size:14px!important;
}

/* Footer is compact but fully independent; no text from the row above can enter it. */
#page27Mission03Gateway .p27-footer{
    height:94px!important;
    min-height:94px!important;
    padding:9px 12px!important;
    overflow:hidden!important;
    grid-template-columns:1fr 32px 1fr 32px 1.1fr 235px!important;
    gap:7px!important;
}
#page27Mission03Gateway .p27-footer>div{
    height:66px!important;
    min-height:66px!important;
    padding:6px 10px!important;
}
#page27Mission03Gateway .p27-footer div span{
    font-size:9px!important;
}
#page27Mission03Gateway .p27-footer div strong{
    font-size:17px!important;
}
#page27Mission03Gateway .p27-footer div small{
    font-size:9px!important;
    line-height:1.12!important;
}
#page27Mission03Gateway .p27-enter{
    height:54px!important;
    font-size:13px!important;
    padding:0 14px!important;
}

/* 4) NOVA: Page17-inspired float, pulse, orbital motion and stronger glow. */
#page27Mission03Gateway .p27-nova-orb{
    animation:p27NovaFloat 5.6s ease-in-out infinite!important;
    filter:
        drop-shadow(0 0 10px rgba(91,225,255,.52))
        drop-shadow(0 0 22px rgba(71,255,212,.30))!important;
}
#page27Mission03Gateway .p27-nova-orb::before{
    content:"";
    position:absolute;
    width:118px;
    height:118px;
    border-radius:50%;
    border:1px solid rgba(112,255,226,.20);
    box-shadow:0 0 24px rgba(73,244,223,.18);
    animation:p27NovaAura 5s ease-in-out infinite;
}
#page27Mission03Gateway .p27-nova-orb i:nth-child(1){
    animation:p27NovaOrbitA 7s linear infinite;
}
#page27Mission03Gateway .p27-nova-orb i:nth-child(2){
    animation:p27NovaOrbitB 8.5s linear infinite reverse;
}
#page27Mission03Gateway .p27-nova-orb i:nth-child(3){
    animation:p27NovaOrbitC 6.5s linear infinite;
}
@keyframes p27NovaFloat{
    0%,100%{transform:translateY(1px) scale(.99)}
    50%{transform:translateY(-7px) scale(1.015)}
}
@keyframes p27NovaAura{
    0%,100%{opacity:.55;transform:scale(.94)}
    50%{opacity:1;transform:scale(1.08)}
}
@keyframes p27NovaOrbitA{
    to{transform:rotate(360deg)}
}
@keyframes p27NovaOrbitB{
    from{transform:rotate(55deg)}
    to{transform:rotate(415deg)}
}
@keyframes p27NovaOrbitC{
    from{transform:rotate(-55deg)}
    to{transform:rotate(305deg)}
}

/* Beacon assets inherit the successful Page17 floating rhythm. */
#page27Mission03Gateway .p27-side img,
#page27Mission03Gateway .p27-main-beacon{
    animation:p27BeaconAssetFloat 5.6s ease-in-out infinite!important;
    will-change:transform,filter;
}
#page27Mission03Gateway .p27-main-beacon{animation-delay:-1.6s!important}
#page27Mission03Gateway .p27-side-right img{animation-delay:-3.1s!important}
@keyframes p27BeaconAssetFloat{
    0%,100%{transform:translateY(1px) scale(.99)}
    50%{transform:translateY(-7px) scale(1.015)}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
    #page27Mission03Gateway .p27-nova-orb,
    #page27Mission03Gateway .p27-nova-orb::before,
    #page27Mission03Gateway .p27-nova-orb i,
    #page27Mission03Gateway .p27-side img,
    #page27Mission03Gateway .p27-main-beacon{
        animation:none!important;
    }
}


/* =========================================================
   MISSION 03 · VIEWPORT FX
   Covers the full browser viewport beyond the scaled 1600×900 slide.
========================================================= */
.reveal .m03-viewport-fx{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease;
    background:#02131a;
}
.reveal .m03-viewport-fx.is-active{
    opacity:1;
    visibility:visible;
}
.reveal .m03-viewport-fx::before{
    content:"";
    position:absolute;
    inset:-2%;
    background:
        linear-gradient(
            115deg,
            rgba(2,18,30,.92) 0%,
            rgba(5,63,64,.66) 48%,
            rgba(3,18,34,.80) 100%
        ),
        url("../assets/images/cover-bg.jpg") center center / cover no-repeat;
    filter:saturate(1.02) brightness(.92);
    transform:scale(1.03);
}
.reveal .m03-viewport-fx::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 44%,transparent 18%,rgba(0,0,0,.13) 68%,rgba(0,0,0,.30) 100%),
        radial-gradient(circle at 68% 18%,rgba(93,255,218,.14),transparent 27%),
        radial-gradient(circle at 20% 76%,rgba(53,210,244,.09),transparent 28%);
}
.reveal .m03-vp-glow{
    position:absolute;
    z-index:2;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(
        circle at center,
        rgba(75,255,214,.20) 0%,
        rgba(70,214,210,.09) 36%,
        rgba(238,202,112,.025) 58%,
        transparent 72%
    );
    animation:m03ViewportGlowFloat 10s ease-in-out infinite;
}
.reveal .m03-vp-glow.g1{
    width:620px;height:620px;
    right:-170px;top:-160px;
}
.reveal .m03-vp-glow.g2{
    width:500px;height:500px;
    left:-240px;bottom:-230px;
    animation-delay:-4s;
}
.reveal .m03-vp-particles{
    position:absolute;
    inset:0;
    z-index:3;
    overflow:hidden;
    pointer-events:none;
}
.reveal .m03-vp-particle{
    position:absolute;
    display:block;
    border-radius:50%;
    background:
        radial-gradient(circle,
            rgba(181,255,235,.98) 0 22%,
            rgba(81,248,220,.62) 24% 48%,
            rgba(68,200,198,.20) 50% 72%,
            transparent 74%);
    opacity:.38;
    box-shadow:
        0 0 9px rgba(93,255,222,.70),
        0 0 22px rgba(63,210,211,.28);
    animation:m03ViewportParticleRise linear infinite;
}
@keyframes m03ViewportGlowFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-20px,20px) scale(1.08)}
}
@keyframes m03ViewportParticleRise{
    from{transform:translateY(80px) scale(.72);opacity:0}
    15%{opacity:.48}
    78%{opacity:.30}
    to{transform:translateY(-108vh) scale(1.24);opacity:0}
}
@media(prefers-reduced-motion:reduce){
    .reveal .m03-vp-glow,
    .reveal .m03-vp-particle{animation:none!important}
}

/* =========================================================
   PAGE 28 · RENDER-MATCH FINAL PASS
   Exact visual hierarchy of the approved concept render.
========================================================= */
#page27Mission03Gateway .p27-stage{
  padding:14px 44px 14px!important;
  grid-template-rows:104px minmax(0,1fr) 188px 136px!important;
  gap:10px!important;
}
#page27Mission03Gateway .p27-top{
  top:-8px!important;padding-bottom:16px!important;
  grid-template-columns:1fr 1fr 250px!important;
}
#page27Mission03Gateway .p27-top-left,
#page27Mission03Gateway .p27-brand,
#page27Mission03Gateway .p27-status{transform:translateY(-4px)!important}
#page27Mission03Gateway .p27-status{
  width:235px!important;min-width:235px!important;height:96px!important;
  padding:9px 14px!important;border-radius:13px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}
#page27Mission03Gateway .p27-status span{font-size:13px!important}
#page27Mission03Gateway .p27-status strong{font-size:27px!important;margin:4px 0!important}
#page27Mission03Gateway .p27-status small{font-size:12px!important}

#page27Mission03Gateway .p27-center{transform:none!important;grid-template-columns:300px 1fr 300px!important;gap:28px!important}
#page27Mission03Gateway .p27-side img{width:168px!important;height:185px!important}
#page27Mission03Gateway .p27-side span{font-size:14px!important}
#page27Mission03Gateway .p27-side strong{font-size:28px!important}
#page27Mission03Gateway .p27-side small{font-size:17px!important}
#page27Mission03Gateway .p27-side em{font-size:12px!important;padding:5px 13px!important}
#page27Mission03Gateway .p27-unlocked{top:-1px!important;font-size:13px!important;padding:6px 18px!important}
#page27Mission03Gateway .p27-main-beacon{width:250px!important;height:250px!important}
#page27Mission03Gateway .p27-mission-no{margin-top:-25px!important;font-size:15px!important}
#page27Mission03Gateway .p27-title{font-size:44px!important}
#page27Mission03Gateway .p27-title-cn{font-size:19px!important}
#page27Mission03Gateway .p27-path{font-size:18px!important;margin-top:9px!important}
#page27Mission03Gateway .p27-path-cn{font-size:15px!important}

#page27Mission03Gateway .p27-brief{
  display:block!important;height:188px!important;overflow:visible!important;
}
#page27Mission03Gateway .p27-nova{
  width:100%!important;height:188px!important;box-sizing:border-box!important;
  display:grid!important;grid-template-columns:245px 1fr!important;gap:28px!important;
  align-items:center!important;padding:8px 28px 8px 16px!important;
  border:1px solid rgba(76,235,227,.44)!important;border-radius:18px!important;
  background:linear-gradient(105deg,rgba(4,31,52,.86),rgba(6,49,58,.68),rgba(3,26,48,.82))!important;
  overflow:hidden!important;
}
#page27Mission03Gateway .p27-nova-visual{
  position:relative!important;width:225px!important;height:170px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
#page27Mission03Gateway .p27-nova-visual img{
  position:relative!important;z-index:2!important;width:185px!important;height:185px!important;object-fit:contain!important;
  filter:drop-shadow(0 0 12px rgba(62,223,255,.75)) drop-shadow(0 0 30px rgba(75,151,255,.36))!important;
  animation:p27NovaImageFloat 5.4s ease-in-out infinite!important;
}
#page27Mission03Gateway .p27-nova-halo{
  position:absolute!important;z-index:1!important;width:205px!important;height:120px!important;border-radius:50%!important;
  border:2px solid rgba(95,162,255,.52)!important;box-shadow:0 0 25px rgba(68,121,255,.38),inset 0 0 25px rgba(70,255,238,.16)!important;
  animation:p27NovaHaloSpin 8s linear infinite!important;
}
#page27Mission03Gateway .p27-nova-copy{text-align:left!important;align-self:center!important}
#page27Mission03Gateway .p27-nova-copy>strong{font-size:18px!important;letter-spacing:1.3px!important;color:#75f6e5!important}
#page27Mission03Gateway .p27-nova-copy p{font-size:17px!important;line-height:1.34!important;margin:7px 0 6px!important}
#page27Mission03Gateway .p27-nova-copy small{font-size:14px!important;line-height:1.38!important;color:#c5e4e2!important}
@keyframes p27NovaImageFloat{0%,100%{transform:translateY(3px) scale(.99)}50%{transform:translateY(-7px) scale(1.02)}}
@keyframes p27NovaHaloSpin{to{transform:rotate(360deg)}}

#page27Mission03Gateway .p27-footer{
  height:136px!important;min-height:136px!important;padding:10px 14px!important;
  grid-template-columns:1.62fr 1fr 32px 1fr 32px 1.18fr 250px!important;gap:8px!important;
  overflow:visible!important;
}
#page27Mission03Gateway .p27-footer>div{
  height:108px!important;min-height:108px!important;padding:9px 12px!important;
}
#page27Mission03Gateway .p27-footer>.p27-driving{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  border:none!important;background:transparent!important;box-shadow:none!important;padding:8px 10px!important;
}
#page27Mission03Gateway .p27-footer>.p27-driving span{font-size:11px!important;color:#69e9e8!important}
#page27Mission03Gateway .p27-footer>.p27-driving strong{font-size:18px!important;line-height:1.15!important;margin:5px 0!important;color:#b9d9ff!important}
#page27Mission03Gateway .p27-footer>.p27-driving small{font-size:11px!important;line-height:1.25!important;color:#c7d6df!important}
#page27Mission03Gateway .p27-footer div span{font-size:10px!important}
#page27Mission03Gateway .p27-footer div strong{font-size:17px!important}
#page27Mission03Gateway .p27-footer div small{font-size:10px!important;line-height:1.32!important}
#page27Mission03Gateway .p27-enter{
  height:92px!important;font-size:15px!important;border-radius:14px!important;
  background:linear-gradient(105deg,#0f8179,#16a878)!important;
  box-shadow:0 0 24px rgba(43,255,199,.20),inset 0 0 18px rgba(116,255,225,.08)!important;
}

/* Approved render uses a brighter, full-width blue city with rising light nodes. */
.reveal .m03-viewport-fx{background:#021025!important}
.reveal .m03-viewport-fx::before{
  inset:-3%!important;
  background:
    linear-gradient(180deg,rgba(2,16,40,.18),rgba(2,20,42,.18) 54%,rgba(1,14,30,.48)),
    url("../assets/mission-system/digital-network-bg.webp") center center / cover no-repeat!important;
  filter:saturate(1.08) brightness(.78)!important;transform:scale(1.08)!important;
}
.reveal .m03-viewport-fx::after{
  background:
    radial-gradient(circle at 50% 46%,rgba(30,207,224,.10),transparent 36%),
    linear-gradient(90deg,rgba(1,12,31,.18),transparent 24%,transparent 76%,rgba(1,12,31,.18))!important;
}
.reveal .m03-vp-particle{
  background:radial-gradient(circle,#b9fff5 0 18%,#5be6ff 20% 43%,rgba(98,118,255,.32) 45% 68%,transparent 70%)!important;
  box-shadow:0 0 12px rgba(87,225,255,.92),0 0 30px rgba(79,103,255,.40)!important;
  opacity:.55!important;
}

/* =========================================================
   PAGE 28 · BACKGROUND HOTFIX v04
   Keep the approved layout untouched. Restore a dark, full-canvas
   Digital City background and make viewport FX activation resilient.
========================================================= */
#page27Mission03Gateway{
  background:
    linear-gradient(180deg,rgba(2,13,34,.34),rgba(2,19,40,.32) 54%,rgba(1,10,26,.68)),
    url("../assets/mission-system/digital-network-bg.webp") center center / cover no-repeat!important;
}
#page27Mission03Gateway::before{
  background:
    radial-gradient(circle at 50% 40%,rgba(42,220,222,.13),transparent 34%),
    linear-gradient(90deg,rgba(1,11,29,.25),transparent 24%,transparent 76%,rgba(1,11,29,.25))!important;
}

/* CSS fallback: even if Reveal's slidechanged callback fires late,
   the viewport layer becomes visible whenever this gateway is present. */
.reveal:has(#page27Mission03Gateway.present) .m03-viewport-fx,
.reveal:has(#page27Mission03Gateway.present[data-mission="03"]) .m03-viewport-fx{
  opacity:1!important;
  visibility:visible!important;
}

/* Prevent the Reveal theme's light viewport from showing at the sides
   while Page 28 is the current slide. */
.reveal-viewport:has(#page27Mission03Gateway.present){
  background:#021025!important;
}

/* DISPLAYED PAGE 28 · keep one central Mission 03 message and open the final briefing. */
#page27Mission03Gateway .p27-path,
#page27Mission03Gateway .p27-path-cn{display:none!important}
#page27Mission03Gateway .p27-side{opacity:.72!important}
#page27Mission03Gateway .p27-nova{grid-template-columns:205px minmax(0,1fr)!important;gap:22px!important;padding:12px 28px 12px 14px!important}
#page27Mission03Gateway .p27-nova-visual{width:190px!important;height:156px!important}
#page27Mission03Gateway .p27-nova-visual img{width:158px!important;height:158px!important}
#page27Mission03Gateway .p27-nova-halo{width:178px!important;height:106px!important}
#page27Mission03Gateway .p27-nova-copy>strong{font-size:18px!important}
#page27Mission03Gateway .p27-nova-copy p{font-size:18px!important;line-height:1.24!important;margin:6px 0!important}
#page27Mission03Gateway .p27-nova-copy small{font-size:15px!important;line-height:1.28!important}
#page27Mission03Gateway .p27-footer>.p27-driving strong{font-size:19px!important;line-height:1.2!important}
#page27Mission03Gateway .p27-footer>.p27-driving small{font-size:12px!important;line-height:1.4!important}