/* C2C Cinematic Data Observatory — web-only preview */
@media (min-width: 900px) {
  body.web-browser.web-cinematic {
    --cinema-blue: 77, 121, 255;
    --cinema-violet: 133, 76, 255;
    --cinema-cyan: 32, 224, 213;
    --cinema-rose: 255, 72, 151;
    --cinema-depth-x: 0px;
    --cinema-depth-y: 0px;
    --cinema-light-x: 50%;
    --cinema-light-y: 32%;
    isolation: isolate;
    background: #050914 !important;
    color-scheme: dark;
  }

  body.web-browser.web-cinematic #cinematicStage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background:
      radial-gradient(circle at 52% -8%, rgba(74, 105, 255, .25), transparent 41%),
      radial-gradient(circle at 12% 76%, rgba(24, 193, 214, .12), transparent 33%),
      radial-gradient(circle at 94% 66%, rgba(132, 64, 255, .16), transparent 36%),
      linear-gradient(145deg, #060b19 0%, #07132c 44%, #0c1030 72%, #050814 100%);
  }

  body.web-browser.web-cinematic #cinematicStage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at var(--cinema-light-x) var(--cinema-light-y), rgba(111,147,255,.075), transparent 24%),
      linear-gradient(90deg, rgba(0,0,0,.22), transparent 14% 86%, rgba(0,0,0,.18)),
      linear-gradient(0deg, rgba(0,0,0,.24), transparent 22% 88%, rgba(0,0,0,.12));
  }

  body.web-browser.web-cinematic #cinematicCanvas {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    opacity: .86;
    transform: translate3d(var(--cinema-depth-x), var(--cinema-depth-y), 0) scale(1.015);
    transition: opacity .35s ease;
  }

  body.web-browser.web-cinematic .cinema-aurora,
  body.web-browser.web-cinematic .cinema-orbit,
  body.web-browser.web-cinematic .cinema-horizon,
  body.web-browser.web-cinematic .cinema-grain {
    position: absolute;
    pointer-events: none;
  }

  body.web-browser.web-cinematic .cinema-aurora {
    width: min(68vw, 980px);
    aspect-ratio: 1.7;
    border-radius: 50%;
    filter: blur(76px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
  }

  body.web-browser.web-cinematic .cinema-aurora-a {
    left: 15%;
    top: -22%;
    opacity: .2;
    background: conic-gradient(from 80deg, rgba(var(--cinema-cyan), .05), rgba(var(--cinema-blue), .8), rgba(var(--cinema-violet), .6), transparent 75%);
    animation: cinemaAuroraA 18s ease-in-out infinite alternate;
  }

  body.web-browser.web-cinematic .cinema-aurora-b {
    right: -24%;
    bottom: -20%;
    opacity: .15;
    background: conic-gradient(from 210deg, rgba(var(--cinema-rose), .5), rgba(var(--cinema-violet), .66), rgba(var(--cinema-blue), .15), transparent 76%);
    animation: cinemaAuroraB 23s ease-in-out infinite alternate;
  }

  body.web-browser.web-cinematic .cinema-orbit {
    left: var(--cinema-light-x);
    top: var(--cinema-light-y);
    width: min(72vw, 1100px);
    aspect-ratio: 1;
    border: 1px solid rgba(132, 162, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 110px rgba(68, 91, 255, .035), inset 0 0 90px rgba(73, 202, 255, .025);
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg);
  }

  body.web-browser.web-cinematic .cinema-orbit::before,
  body.web-browser.web-cinematic .cinema-orbit::after {
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(97, 129, 255, .085);
    border-radius: inherit;
  }

  body.web-browser.web-cinematic .cinema-orbit::after { inset: 24%; border-color: rgba(58, 222, 207, .065); }

  body.web-browser.web-cinematic .cinema-horizon {
    left: -10%;
    right: -10%;
    bottom: -32vh;
    height: 70vh;
    opacity: .32;
    transform: perspective(700px) rotateX(68deg);
    transform-origin: 50% 100%;
    background-image:
      linear-gradient(rgba(103, 133, 225, .08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(103, 133, 225, .07) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 78%);
    mask-image: linear-gradient(to top, #000 15%, transparent 78%);
  }

  body.web-browser.web-cinematic .cinema-grain {
    inset: 0;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }

  body.web-browser.web-cinematic .cinema-prism {
    position: absolute;
    left: 54%;
    top: 42%;
    width: min(50vw, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .16;
    pointer-events: none;
    filter: blur(1px);
    background: repeating-conic-gradient(from 0deg, transparent 0 12deg, rgba(82,132,255,.13) 12.5deg 13deg, transparent 13.5deg 26deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 42%, transparent 72%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 42%, transparent 72%);
    animation: cinemaPrism 48s linear infinite;
  }

  body.web-browser.web-cinematic #appChrome {
    position: relative;
    z-index: 2;
  }

  body.web-browser.web-cinematic .phone,
  body.web-browser.web-cinematic main { background: transparent !important; }

  body.web-browser.web-cinematic .web-desktop-toolbar,
  body.web-browser.web-cinematic .web-desktop-rail,
  body.web-browser.web-cinematic .bottom-nav {
    border-color: rgba(145, 171, 255, .2) !important;
    background:
      linear-gradient(125deg, rgba(12, 29, 62, .84), rgba(22, 34, 79, .78) 58%, rgba(50, 29, 105, .78)) !important;
    box-shadow:
      0 22px 70px rgba(0, 0, 0, .35),
      0 0 0 1px rgba(255, 255, 255, .035) inset,
      0 1px 0 rgba(255, 255, 255, .14) inset !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
  }

  body.web-browser.web-cinematic .web-desktop-rail {
    transform: perspective(1200px) rotateY(.8deg) translateZ(0);
    transform-origin: left center;
  }

  body.web-browser.web-cinematic .web-desktop-mark,
  body.web-browser.web-cinematic .web-desktop-user > span,
  body.web-browser.web-cinematic .web-pin-brand,
  body.web-browser.web-cinematic .holo-core {
    overflow: hidden;
    color: transparent !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50% !important;
    background-color: #07080d !important;
    background-image: url("cinematic-assets/shield-icon.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 24px rgba(196,35,49,.12), inset 0 1px 0 rgba(255,255,255,.2) !important;
  }

  body.web-browser.web-cinematic .web-pin-brand span,
  body.web-browser.web-cinematic .holo-core span { opacity: 0 !important; }

  body.web-browser.web-cinematic .web-3d-cube {
    left: 50% !important;
    top: 42% !important;
    width: clamp(148px, 13vw, 190px) !important;
    height: clamp(148px, 13vw, 190px) !important;
    border-radius: 50%;
    animation: cinemaShieldFloat 4.8s ease-in-out infinite !important;
    filter: drop-shadow(0 30px 44px rgba(0,0,0,.46)) drop-shadow(0 0 38px rgba(74,111,255,.2));
  }

  body.web-browser.web-cinematic .web-3d-cube > i { display: none !important; }

  body.web-browser.web-cinematic .web-3d-cube::before {
    content: "";
    position: absolute;
    inset: -15%;
    border: 1px solid rgba(134,166,255,.2);
    border-radius: 50%;
    box-shadow: 0 0 55px rgba(68,108,255,.1), inset 0 0 34px rgba(49,218,220,.06);
    animation: cinemaShieldHalo 3.4s ease-in-out infinite alternate;
  }

  body.web-browser.web-cinematic .web-3d-cube::after {
    content: "";
    position: absolute;
    inset: 2%;
    z-index: 4;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.26), transparent 22% 64%, rgba(84,129,255,.12));
    mix-blend-mode: screen;
  }

  body.web-browser.web-cinematic .web-3d-cube b {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100%;
    height: 100%;
    color: transparent !important;
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: #07080d url("cinematic-assets/shield-icon.png") center / cover no-repeat !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.5), 0 0 42px rgba(218,46,58,.16), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateZ(28px) !important;
  }

  body.web-browser.web-cinematic .web-3d-intro-scene {
    width: min(680px, 92vw) !important;
    height: min(560px, 92dvh) !important;
  }

  body.web-browser.web-cinematic .web-3d-intro-copy {
    top: auto !important;
    bottom: clamp(82px, 13vh, 118px) !important;
    width: 100%;
    padding-inline: 18px;
    box-sizing: border-box;
  }

  body.web-browser.web-cinematic .web-3d-intro-copy strong {
    font-size: clamp(36px, 4.2vw, 58px) !important;
    letter-spacing: -.055em !important;
  }

  body.web-browser.web-cinematic .web-3d-intro-line { bottom: clamp(38px, 6vh, 58px) !important; }

  body.web-browser.web-cinematic .web-3d-intro-scene.cinema-solar-ready > .web-3d-orbit,
  body.web-browser.web-cinematic .web-3d-intro-scene.cinema-solar-ready > .web-3d-cube { display: none !important; }

  body.web-browser.web-cinematic .cinema-solar-system {
    position: absolute;
    left: 50%;
    top: 41%;
    width: clamp(390px, 38vw, 560px);
    height: clamp(390px, 38vw, 560px);
    transform: translate3d(-50%, -50%, 0);
    transform-style: preserve-3d;
    perspective: 1200px;
    pointer-events: none;
  }

  body.web-browser.web-cinematic .cinema-star-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52%;
    height: 52%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle, rgba(255,255,255,.22) 0 3%, rgba(89,128,255,.19) 13%, rgba(75,93,238,.1) 34%, transparent 70%);
    filter: blur(8px);
    animation: cinemaStarBreath 3.2s ease-in-out infinite alternate;
  }

  body.web-browser.web-cinematic .cinema-space-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    border: 1px solid rgba(139,173,255,.3);
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 24px rgba(71,113,255,.055), inset 0 0 18px rgba(80,218,255,.035);
  }

  body.web-browser.web-cinematic .cinema-space-ring::before,
  body.web-browser.web-cinematic .cinema-space-ring::after,
  body.web-browser.web-cinematic .cinema-space-ring > b,
  body.web-browser.web-cinematic .cinema-space-ring > em {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    border-radius: 50%;
    transform-style: preserve-3d;
  }

  body.web-browser.web-cinematic .cinema-space-ring::before {
    width: 10px;
    height: 10px;
    margin: -5px;
    transform: translateX(var(--planet-radius)) translateZ(8px);
    background: radial-gradient(circle at 34% 28%, #fff, #85a7ff 24%, #3150c4 66%, #101d59);
    box-shadow: 0 0 10px #7898ff, 0 0 28px rgba(82,119,255,.72);
  }

  body.web-browser.web-cinematic .cinema-space-ring::after {
    width: 6px;
    height: 6px;
    margin: -3px;
    transform: translateX(calc(var(--planet-radius) * -1)) translateZ(-5px);
    background: #68ebdc;
    box-shadow: 0 0 8px #68ebdc, 0 0 20px rgba(45,231,216,.58);
  }

  body.web-browser.web-cinematic .cinema-space-ring > b {
    width: 14px;
    height: 14px;
    margin: -7px;
    transform: translateY(var(--planet-radius)) translateZ(5px);
    background: radial-gradient(circle at 35% 28%, #fff2fa, #e66db7 28%, #742b8c 68%);
    box-shadow: 0 0 12px rgba(255,105,194,.8), 0 0 30px rgba(234,66,173,.44);
  }

  body.web-browser.web-cinematic .cinema-space-ring > em {
    width: 4px;
    height: 4px;
    margin: -2px;
    transform: translateY(calc(var(--planet-radius) * -1)) translateZ(-4px);
    background: #d5e2ff;
    box-shadow: 0 0 10px rgba(195,215,255,.8);
  }

  body.web-browser.web-cinematic .cinema-space-ring-outer {
    --planet-radius: clamp(177px, 17.4vw, 255px);
    width: 94%;
    height: 94%;
    margin: -47%;
    animation: cinemaOrbitOuter 13s linear infinite;
  }

  body.web-browser.web-cinematic .cinema-space-ring-middle {
    --planet-radius: clamp(140px, 13.7vw, 201px);
    width: 74%;
    height: 74%;
    margin: -37%;
    border-color: rgba(93,225,217,.25);
    animation: cinemaOrbitMiddle 9s linear infinite reverse;
  }

  body.web-browser.web-cinematic .cinema-space-ring-inner {
    --planet-radius: clamp(104px, 10.2vw, 149px);
    width: 55%;
    height: 55%;
    margin: -27.5%;
    border-color: rgba(208,113,247,.26);
    animation: cinemaOrbitInner 6.8s linear infinite;
  }

  body.web-browser.web-cinematic .cinema-shield-sun {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;
    width: clamp(142px, 13vw, 190px);
    height: clamp(142px, 13vw, 190px);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 80px);
    background: #06070b url("cinematic-assets/shield-icon.png") center / cover no-repeat;
    image-rendering: auto;
    box-shadow:
      0 28px 64px rgba(0,0,0,.52),
      0 0 0 10px rgba(95,125,255,.025),
      0 0 55px rgba(77,111,255,.28),
      0 0 100px rgba(199,42,68,.12),
      inset 0 1px 0 rgba(255,255,255,.26);
    animation: cinemaSunFloat 4.6s ease-in-out infinite;
  }

  body.web-browser.web-cinematic .cinema-shield-sun::before {
    content: "";
    position: absolute;
    inset: -10%;
    border: 1px solid rgba(139,172,255,.26);
    border-radius: 50%;
    box-shadow: inset 0 0 22px rgba(83,123,255,.12), 0 0 28px rgba(71,107,255,.12);
    animation: cinemaSunHalo 2.8s ease-in-out infinite alternate;
  }

  body.web-browser.web-cinematic .cinema-shield-sun::after {
    content: "";
    position: absolute;
    inset: 1%;
    border-radius: 50%;
    background: linear-gradient(128deg, rgba(255,255,255,.26), transparent 23% 63%, rgba(104,142,255,.12));
    mix-blend-mode: screen;
  }

  body.web-browser.web-cinematic main > section:not(.hidden) {
    perspective: 1400px;
    transform-style: preserve-3d;
  }

  body.web-browser.web-cinematic .cinematic-card {
    --card-rx: 0deg;
    --card-ry: 0deg;
    --card-lx: 50%;
    --card-ly: 50%;
    position: relative;
    transform: perspective(1200px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateZ(0);
    transform-style: preserve-3d;
    border-color: rgba(141, 166, 236, .18) !important;
    box-shadow:
      0 22px 60px rgba(0, 0, 0, .18),
      0 1px 0 rgba(255, 255, 255, .55) inset,
      0 -1px 0 rgba(77, 91, 170, .06) inset !important;
    transition: transform .22s cubic-bezier(.2,.72,.2,1), box-shadow .22s ease, border-color .22s ease !important;
    backface-visibility: hidden;
  }

  body.web-browser.web-cinematic .cinematic-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--card-lx) var(--card-ly), rgba(255,255,255,.24), rgba(93,129,255,.055) 23%, transparent 54%);
    transition: opacity .22s ease;
  }

  body.web-browser.web-cinematic .cinematic-card.cinema-hover {
    border-color: rgba(126, 153, 255, .35) !important;
    box-shadow: 0 28px 78px rgba(0, 0, 0, .25), 0 0 34px rgba(76, 105, 255, .08), 0 1px 0 rgba(255,255,255,.6) inset !important;
  }

  body.web-browser.web-cinematic .cinematic-card.cinema-hover::after { opacity: .48; }

  body.web-browser.web-cinematic[data-theme="dark"] .cinematic-card,
  body.web-browser.web-cinematic .cinematic-card[data-cinema-dark="true"] {
    background: linear-gradient(145deg, rgba(20, 34, 63, .91), rgba(14, 24, 49, .88)) !important;
    color: #eef4ff;
    box-shadow: 0 26px 72px rgba(0,0,0,.36), 0 1px 0 rgba(255,255,255,.11) inset !important;
  }

  body.web-browser.web-cinematic .screen.cinema-enter,
  body.web-browser.web-cinematic main > section.cinema-enter {
    animation: cinemaPageEnter .58s cubic-bezier(.17,.82,.22,1) both !important;
  }

  body.web-browser.web-cinematic .cinema-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.992);
  }

  body.web-browser.web-cinematic .cinema-reveal.cinema-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity .62s ease, transform .62s cubic-bezier(.18,.78,.22,1);
  }

  body.web-browser.web-cinematic .web-3d-intro {
    background:
      radial-gradient(circle at 50% 44%, rgba(64, 102, 245, .34), transparent 28%),
      radial-gradient(circle at 20% 80%, rgba(24, 216, 205, .12), transparent 34%),
      linear-gradient(145deg, #020611, #081631 47%, #100c2d) !important;
  }

  body.web-browser.web-cinematic .web-3d-intro::before {
    content: "";
    position: absolute;
    width: 86vmax;
    height: 86vmax;
    border-radius: 50%;
    opacity: .24;
    background: repeating-conic-gradient(from 20deg, rgba(104,139,255,.2) 0 1deg, transparent 1deg 15deg);
    animation: cinemaIntroBeams 20s linear infinite;
    -webkit-mask-image: radial-gradient(circle, #000, transparent 68%);
    mask-image: radial-gradient(circle, #000, transparent 68%);
  }

  body.web-browser.web-cinematic .web-3d-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background: linear-gradient(transparent 49%, rgba(113,147,255,.2) 50%, transparent 51%);
    background-size: 100% 8px;
    animation: cinemaScan 5s linear infinite;
  }

  body.web-browser.web-cinematic .web-3d-cube {
    filter: drop-shadow(0 24px 38px rgba(61,87,255,.34)) drop-shadow(0 0 30px rgba(82,211,255,.2));
  }

  body.web-browser.web-cinematic .web-3d-intro-copy {
    text-shadow: 0 5px 24px rgba(68,106,255,.36);
  }

  body.web-browser.web-cinematic .web-pin-gate {
    background:
      radial-gradient(circle at 20% 15%, rgba(66, 106, 255, .3), transparent 34%),
      radial-gradient(circle at 85% 78%, rgba(125, 65, 244, .25), transparent 34%),
      linear-gradient(145deg, rgba(3,8,20,.98), rgba(8,22,49,.98) 48%, rgba(16,12,45,.98)) !important;
  }

  body.web-browser.web-cinematic .web-pin-card {
    border-color: rgba(150,178,255,.26) !important;
    background: linear-gradient(145deg, rgba(18,39,76,.9), rgba(9,20,45,.83)) !important;
    box-shadow: 0 52px 130px rgba(0,0,0,.52), 0 0 70px rgba(72,89,255,.11), inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  @keyframes cinemaAuroraA {
    from { transform: translate3d(-5%, -3%, 0) rotate(-8deg) scale(.92); opacity: .13; }
    to { transform: translate3d(13%, 15%, 0) rotate(13deg) scale(1.12); opacity: .25; }
  }
  @keyframes cinemaAuroraB {
    from { transform: translate3d(6%, 4%, 0) rotate(8deg) scale(1.03); }
    to { transform: translate3d(-16%, -12%, 0) rotate(-12deg) scale(.9); opacity: .24; }
  }
  @keyframes cinemaPageEnter {
    from { opacity: .35; transform: translate3d(0, 18px, -24px) scale(.992); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }
  @keyframes cinemaIntroBeams { to { transform: rotate(360deg); } }
  @keyframes cinemaScan { to { background-position: 0 80px; } }
  @keyframes cinemaPrism { to { transform: rotate(360deg); } }
  @keyframes cinemaShieldFloat {
    0%, 100% { transform: translate3d(-50%, -50%, 32px) perspective(900px) rotateX(4deg) rotateY(-7deg) rotateZ(-2deg); }
    50% { transform: translate3d(-50%, calc(-50% - 12px), 52px) perspective(900px) rotateX(-3deg) rotateY(7deg) rotateZ(2deg); }
  }
  @keyframes cinemaShieldHalo {
    from { opacity: .45; transform: scale(.94) rotate(-3deg); }
    to { opacity: 1; transform: scale(1.06) rotate(3deg); }
  }
  @keyframes cinemaOrbitOuter {
    from { transform: rotateX(68deg) rotateZ(8deg); }
    to { transform: rotateX(68deg) rotateZ(368deg); }
  }
  @keyframes cinemaOrbitMiddle {
    from { transform: rotateY(66deg) rotateZ(-18deg); }
    to { transform: rotateY(66deg) rotateZ(342deg); }
  }
  @keyframes cinemaOrbitInner {
    from { transform: rotateX(57deg) rotateY(25deg) rotateZ(0); }
    to { transform: rotateX(57deg) rotateY(25deg) rotateZ(360deg); }
  }
  @keyframes cinemaSunFloat {
    0%, 100% { transform: translate3d(-50%, -50%, 80px) rotateX(2deg) rotateY(-4deg) scale(1); }
    50% { transform: translate3d(-50%, calc(-50% - 10px), 94px) rotateX(-2deg) rotateY(4deg) scale(1.025); }
  }
  @keyframes cinemaSunHalo { from { opacity: .46; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } }
  @keyframes cinemaStarBreath { from { opacity: .48; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
}

/* WebGL solar system preview: correct planet order and orbital hierarchy,
   with interface-compressed distances so every planet remains visible. */
body.web-browser.web-cinematic .cinema-webgl-space {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  z-index: 0;
  opacity: .58;
  filter: saturate(1.08) contrast(1.04);
  transition: opacity .5s ease;
}

body.web-browser.web-cinematic .cinema-space-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(ellipse at 78% 52%, rgba(26,54,129,.34), transparent 46%),
    radial-gradient(ellipse at 20% 80%, rgba(0,116,155,.22), transparent 52%),
    linear-gradient(145deg, #010510 0%, #061128 49%, #100b31 100%);
}

body.web-browser.web-cinematic.web-intro-active .cinema-space-backdrop {
  z-index: 998;
  opacity: 1;
}

body.web-browser.web-cinematic.web-locked .cinema-space-backdrop {
  z-index: 498;
  opacity: 1;
}

body.web-browser.web-cinematic.web-intro-active .cinema-webgl-space {
  z-index: 999;
  opacity: 1;
}

body.web-browser.web-cinematic.web-locked .cinema-webgl-space {
  z-index: 499;
  opacity: 1;
}

body.web-browser.web-cinematic.webgl-space-ready .web-3d-intro {
  background:
    radial-gradient(circle at 50% 42%, rgba(18,48,112,.18), transparent 48%),
    linear-gradient(150deg, rgba(1,5,15,.22), rgba(3,9,29,.08)) !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-3d-intro::before,
body.web-browser.web-cinematic.webgl-space-ready .web-3d-intro::after,
body.web-browser.web-cinematic.webgl-space-ready .cinema-solar-system {
  display: none !important;
}

/* The restored Three.js solar system is the sole opening visual. Hide the
   temporary typography mark so it cannot overlap the shield and planets. */
body.web-browser.web-cinematic.webgl-space-ready .mm-live-status,
body.web-browser.web-cinematic.webgl-space-ready .mm-live-mark,
body.web-browser.web-cinematic.webgl-space-ready .mm-live-signal {
  display: none !important;
}

body.web-browser.web-cinematic.webgl-space-ready .mm-live-stage {
  width: 100vw !important;
  height: 100dvh !important;
  display: grid !important;
  place-items: end center !important;
  padding-bottom: clamp(54px, 8vh, 82px) !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-pin-brand {
  color: #fff !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #2c60d5, #7453e5) !important;
  box-shadow: 0 18px 40px rgba(51,77,202,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-pin-brand span {
  opacity: 1 !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-3d-intro-copy {
  z-index: 3;
  bottom: clamp(54px, 8vh, 82px) !important;
  top: auto !important;
  padding: 14px 28px 12px;
  border: 1px solid rgba(146,177,255,.13);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(6,14,35,.52), rgba(14,18,50,.22));
  box-shadow: 0 24px 80px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
}

body.web-browser.web-cinematic.webgl-space-ready .web-3d-intro-line {
  z-index: 4;
  bottom: clamp(33px, 4.8vh, 48px) !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-pin-gate {
  background:
    radial-gradient(circle at 78% 47%, rgba(31,70,166,.08), transparent 40%),
    linear-gradient(145deg, rgba(2,7,18,.84), rgba(6,12,31,.58) 52%, rgba(9,9,30,.42)) !important;
  backdrop-filter: none;
}

body.web-browser.web-cinematic.webgl-space-ready .web-pin-gate::before,
body.web-browser.web-cinematic.webgl-space-ready .web-pin-gate::after {
  opacity: .18 !important;
}

body.web-browser.web-cinematic.webgl-space-ready.web-locked .web-pin-gate.show .web-pin-world {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.web-browser.web-cinematic.webgl-space-ready .web-pin-card {
  position: relative;
  z-index: 3;
  border-color: rgba(135,168,255,.22) !important;
  background: linear-gradient(145deg, rgba(9,20,45,.88), rgba(11,16,42,.78)) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) saturate(1.2);
}

@media (max-width: 900px) {
  body.web-browser.web-cinematic.webgl-space-ready .web-pin-gate {
    background: linear-gradient(160deg, rgba(1,6,18,.78), rgba(5,9,30,.62)) !important;
  }
}

@media (min-width: 900px) and (max-height: 700px) {
  body.web-browser.web-cinematic .web-3d-intro-scene { height: calc(100dvh - 24px) !important; }
  body.web-browser.web-cinematic .web-3d-cube { top: 38% !important; width: 126px !important; height: 126px !important; }
  body.web-browser.web-cinematic .web-3d-intro-copy { bottom: 68px !important; }
  body.web-browser.web-cinematic .web-3d-intro-copy strong { font-size: 38px !important; }
  body.web-browser.web-cinematic .web-3d-intro-copy span { margin-top: 5px; }
  body.web-browser.web-cinematic .web-3d-intro-line { bottom: 30px !important; }
}

@media (min-width: 2560px) {
  body.web-browser.web-cinematic #cinematicCanvas { opacity: .96; }
  body.web-browser.web-cinematic .cinema-aurora { width: min(72vw, 1500px); filter: blur(110px); }
  body.web-browser.web-cinematic .cinema-orbit { width: min(68vw, 1500px); }
  body.web-browser.web-cinematic .cinema-prism { width: min(52vw, 1320px); opacity: .2; }
  body.web-browser.web-cinematic .web-desktop-rail { width: clamp(280px, 13vw, 360px); }
  body.web-browser.web-cinematic .web-desktop-brand strong { font-size: 15px; }
  body.web-browser.web-cinematic .web-desktop-brand small,
  body.web-browser.web-cinematic .web-desktop-nav button small { font-size: 11px; }
  body.web-browser.web-cinematic .web-desktop-nav button b { font-size: 15px; }
  body.web-browser.web-cinematic .web-desktop-toolbar { min-height: 88px; }
  body.web-browser.web-cinematic .web-desktop-heading strong { font-size: 28px; }
  body.web-browser.web-cinematic .web-desktop-heading small { font-size: 12px; }
  body.web-browser.web-cinematic .cinematic-card { box-shadow: 0 34px 90px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.55) inset !important; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  body.web-browser.web-cinematic .cinema-aurora { filter: blur(58px); }
  body.web-browser.web-cinematic .cinematic-card { transform: none !important; }
  body.web-browser.web-cinematic .cinematic-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.web-browser.web-cinematic .cinema-aurora,
  body.web-browser.web-cinematic .cinema-prism,
  body.web-browser.web-cinematic .web-3d-cube,
  body.web-browser.web-cinematic .web-3d-cube::before,
  body.web-browser.web-cinematic .cinema-space-ring,
  body.web-browser.web-cinematic .cinema-shield-sun,
  body.web-browser.web-cinematic .cinema-shield-sun::before,
  body.web-browser.web-cinematic .cinema-star-glow,
  body.web-browser.web-cinematic .web-3d-intro::before,
  body.web-browser.web-cinematic .web-3d-intro::after { animation: none !important; }
  body.web-browser.web-cinematic .cinematic-card,
  body.web-browser.web-cinematic .cinema-reveal,
  body.web-browser.web-cinematic .cinema-reveal.cinema-visible { transform: none !important; transition: none !important; opacity: 1 !important; }
}