/* A cinematic motion layer shared by the overview, editorial pages, and data flow. */
body { --xylen-pointer-x: 54%; --xylen-pointer-y: 34%; isolation: isolate; }
.xylen-ambient {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.xylen-ambient::before,
.xylen-ambient::after { position:absolute; content:""; inset:-12%; }
.xylen-ambient::before {
  background:
    radial-gradient(ellipse at var(--xylen-pointer-x) var(--xylen-pointer-y), rgba(0,161,222,.15), transparent 34%),
    radial-gradient(ellipse at 16% 78%, rgba(44,200,171,.075), transparent 31%),
    radial-gradient(ellipse at 89% 82%, rgba(142,91,232,.095), transparent 30%);
  animation: xylen-ambient-breathe 17s ease-in-out infinite alternate;
  will-change: transform;
}
.xylen-ambient::after {
  inset:-38% -18%;
  opacity:.23;
  background-image:linear-gradient(rgba(86,173,201,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(86,173,201,.065) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse at 50% 38%,#000 4%,transparent 71%);
  transform:perspective(980px) rotateX(61deg) rotateZ(-12deg) scale(1.16);
  transform-origin:50% 50%;
  animation:xylen-grid-float 48s linear infinite;
}

.silent-motion-hero {
  width:min(1480px,100%);
  min-height:min(880px,calc(100svh - 72px));
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(22px,4.5vw,72px);
  padding:clamp(52px,8vh,96px) clamp(24px,4.5vw,72px);
  border-radius:0 0 54px 54px;
}
.silent-motion-hero::before {
  position:absolute;
  z-index:0;
  inset:0;
  content:"";
  pointer-events:none;
  opacity:.75;
  background:radial-gradient(ellipse at 75% 42%,rgba(0,168,232,.12),transparent 43%),linear-gradient(115deg,transparent 44%,rgba(81,197,225,.035) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 75%,transparent 100%);
}
.silent-motion-copy { max-width:820px; }
.silent-motion-copy .hero-statement-title {
  max-width:780px;
  font-size:clamp(4rem,8.6vw,9.1rem);
  line-height:.86;
  letter-spacing:-.085em;
  text-wrap:balance;
  animation:xylen-title-open 1.05s cubic-bezier(.16,.82,.2,1) .08s both;
}
.silent-motion-copy .hero-statement-desc {
  max-width:650px;
  margin:clamp(24px,3.5vh,42px) 0 0;
  font-size:clamp(1.04rem,1.5vw,1.28rem);
  line-height:1.75;
  animation:xylen-copy-arrive .85s cubic-bezier(.16,.82,.2,1) .28s both;
}
.silent-motion-copy .hero-actions-row { margin-top:34px; animation:xylen-copy-arrive .85s cubic-bezier(.16,.82,.2,1) .45s both; }
.silent-motion-visual {
  width:min(100%,640px);
  filter:drop-shadow(0 0 56px rgba(0,155,216,.12));
  transform-style:preserve-3d;
  animation:xylen-visual-reveal 1.35s cubic-bezier(.16,.82,.2,1) .1s both;
}
.silent-motion-orbit {
  isolation:isolate;
  transform:rotateX(var(--xylen-tilt-y,0deg)) rotateY(var(--xylen-tilt-x,0deg));
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.75,.2,1);
}
.silent-motion-orbit::before,
.silent-motion-orbit::after {
  position:absolute;
  z-index:0;
  inset:3%;
  border:1px solid rgba(78,210,243,.2);
  border-radius:50%;
  content:"";
  pointer-events:none;
  transform:rotateX(67deg) rotateZ(-22deg);
  box-shadow:0 0 34px rgba(21,171,214,.08),inset 0 0 22px rgba(21,171,214,.045);
  animation:xylen-orbit-plane 18s linear infinite;
}
.silent-motion-orbit::after { inset:14% -3%; border-style:dashed; border-color:rgba(169,131,255,.27); transform:rotateY(68deg) rotateZ(24deg); animation-direction:reverse; animation-duration:26s; }
.orbit-ring-a { inset:2%; border-width:1.5px; border-color:rgba(79,220,248,.57); box-shadow:0 0 28px rgba(0,183,231,.11),inset 0 0 25px rgba(0,183,231,.07); }
.orbit-ring-b { inset:18%; border-color:rgba(172,136,255,.55); }
.orbit-ring-c { position:absolute; inset:31%; border:1px solid rgba(114,231,245,.23); border-radius:50%; transform:rotateX(67deg) rotateZ(18deg); animation:xylen-orbit-plane 13s linear infinite reverse; }
.orbit-depth-plane { position:absolute; inset:-7%; border:1px dashed rgba(88,196,230,.18); border-radius:50%; transform:rotateX(72deg) rotateZ(-8deg); animation:xylen-orbit-plane 34s linear infinite; }
.orbit-depth-plane::before,.orbit-depth-plane::after { position:absolute; content:""; width:8px; height:8px; top:9%; left:17%; border-radius:50%; background:#9cefff; box-shadow:0 0 22px 6px rgba(45,208,244,.42); }
.orbit-depth-plane::after { top:auto; left:auto; right:12%; bottom:18%; width:5px; height:5px; background:#c6a8ff; box-shadow:0 0 18px 5px rgba(144,105,242,.42); }
.orbit-core { position:relative; z-index:2; width:34%; border-color:rgba(131,233,255,.76); background:radial-gradient(circle at 38% 30%,rgba(42,200,241,.43),rgba(8,22,36,.95) 69%); box-shadow:0 0 100px rgba(0,176,231,.26),inset 0 0 44px rgba(67,201,242,.24),0 0 0 12px rgba(39,179,222,.035); animation:xylen-core-breathe 4.8s ease-in-out infinite alternate; }
.orbit-core::before,.orbit-core::after { position:absolute; inset:-17%; border:1px solid rgba(79,211,240,.27); border-radius:50%; content:""; animation:xylen-core-ring 4.8s ease-out infinite; }
.orbit-core::after { animation-delay:2.4s; }
.orbit-core span { text-shadow:0 0 22px rgba(131,237,255,.42); }
.orbit-node { z-index:4; min-width:132px; padding:11px 14px; border-radius:14px; box-shadow:0 10px 36px rgba(0,0,0,.28),0 0 26px rgba(40,176,216,.08); backdrop-filter:blur(14px); }
.orbit-node b { text-shadow:0 0 18px currentColor; }
.orbit-sweep { position:absolute; z-index:3; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 76%,rgba(90,221,255,.33) 81%,transparent 87% 100%); mask:radial-gradient(circle,transparent 33%,#000 34% 35%,transparent 36%); animation:orbit-turn 9s linear infinite; pointer-events:none; }
.silent-motion-route { position:absolute; z-index:2; inset:2%; width:96%; height:96%; overflow:visible; pointer-events:none; }
.silent-motion-route path { fill:none; stroke:rgba(92,214,244,.23); stroke-width:1; stroke-dasharray:3 9; }
.silent-motion-route .route-highlight { stroke:url(#xylen-route-glow); stroke-width:2; stroke-dasharray:48 920; animation:xylen-route-flow 3.4s linear infinite; filter:drop-shadow(0 0 6px rgba(90,229,255,.8)); }
.silent-motion-route .route-highlight:last-of-type { animation-delay:-1.1s; stroke:url(#xylen-route-violet); }
.orbit-node { animation:xylen-node-float 5.2s ease-in-out infinite; }
.orbit-node-2 { animation-delay:-1.4s; }
.orbit-node-3 { animation-delay:-2.7s; }
.orbit-node-4 { animation-delay:-3.8s; }
.motion-caption { position:absolute; left:50%; bottom:-7%; width:max-content; max-width:90%; color:#8498aa; font:700 10px/1.4 var(--font-mono); letter-spacing:.16em; text-align:center; transform:translateX(-50%); }

.motion-preview-box { isolation:isolate; background:#08131d; }
.motion-preview-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:.94; }
.motion-video-shade { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,12,20,.14),transparent 38%,rgba(5,12,20,.16)),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(4,10,17,.22)); }
.motion-video-shade { background:linear-gradient(180deg,rgba(5,12,20,.96) 0 15px,transparent 20px),linear-gradient(0deg,rgba(5,12,20,.98) 0 18px,transparent 23px),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(4,10,17,.22)); }
.motion-video-heading { position:absolute; z-index:4; top:10px; left:14px; max-width:calc(100% - 164px); overflow:hidden; color:#c8edf5; font:800 8px/1.2 var(--font-mono); letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 8px #000; }
.motion-video-index { position:absolute; z-index:4; bottom:8px; left:14px; max-width:calc(100% - 28px); overflow:hidden; color:rgba(205,239,248,.86); font:700 8px/1.2 var(--font-mono); letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 8px #000; }
.motion-play-tag { z-index:3; border:1px solid rgba(132,218,241,.2); box-shadow:0 6px 20px rgba(0,0,0,.22); }
.motion-card { position:relative; transform:translateZ(0); transition:transform .55s cubic-bezier(.16,.82,.2,1),border-color .4s ease,box-shadow .5s ease; }
.motion-card::after { position:absolute; z-index:4; inset:0; border:1px solid transparent; border-radius:inherit; content:""; pointer-events:none; background:linear-gradient(130deg,rgba(91,224,248,.16),transparent 32%,rgba(158,123,255,.12) 76%,transparent) border-box; opacity:0; transition:opacity .4s ease; mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); mask-composite:exclude; }
.motion-card:hover { transform:translateY(-10px) rotateX(2deg); box-shadow:0 28px 65px rgba(0,0,0,.33),0 0 36px rgba(22,174,222,.13); }
.motion-card:hover::after { opacity:1; }
.motion-card:hover .motion-preview-video { transform:scale(1.055); filter:saturate(1.18) brightness(1.08); }
.motion-preview-video { transition:transform 1.1s cubic-bezier(.16,.82,.2,1),filter .6s ease; }
.motion-paused .motion-preview-video { filter:saturate(.84); }

.consent-interlude,.kpi-showcase-section,.motion-carousel-section,.xylen-story-expansion > section { position:relative; isolation:isolate; }
.consent-interlude::before,.kpi-showcase-section::before,.motion-carousel-section::before,.story-section::before { pointer-events:none; }
.consent-interlude { overflow:hidden; }
.consent-interlude-orbit { transform:translate3d(calc((var(--xylen-pointer-x,54%) - 50%) * .08),calc((var(--xylen-pointer-y,34%) - 50%) * .08),0); transition:transform .4s ease-out; }
.story-section { overflow:hidden; }
.story-step { transform-style:preserve-3d; }
.story-step:nth-child(odd) { transform:translateY(22px) rotate(-1deg); }
.story-step:nth-child(even) { transform:translateY(-14px) rotate(1deg); }
.story-flow.revealed .story-step { animation:xylen-step-arrive .8s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--step) * 130ms); }
.story-flow.revealed .story-step-line { animation:story-line-grow 1s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--step) * 130ms + 220ms); }
.boundary-card,.access-card,.device-route-step,.traffic-truth-card,.release-editorial-card { transform-style:preserve-3d; transition:transform .55s cubic-bezier(.16,.82,.2,1),border-color .4s ease,box-shadow .45s ease,background .45s ease; }
.boundary-card:hover,.access-card:hover,.device-route-step:hover,.traffic-truth-card:hover,.release-editorial-card:hover { transform:translateY(-7px) rotateX(1deg); border-color:rgba(91,215,242,.52); box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 32px rgba(34,178,220,.09); }
.story-faq-item summary { transition:color .25s ease,padding-left .3s ease; }
.story-faq-item summary:hover { padding-left:8px; color:#96ebff; }
.story-faq-item[open] { border-color:rgba(91,215,242,.42); }

#page-about .privacy-grand-heading { grid-template-columns:minmax(150px,.35fr) minmax(0,1fr); }
#page-about .about-chapter,
#page-about .about-privacy-story { scroll-margin-top:clamp(92px,12vh,148px); }
#page-about .privacy-grand-heading > div:last-child { min-width:0; }
#page-about .privacy-grand-heading h2 { max-width:920px; margin:14px 0 20px; font-size:clamp(46px,7.4vw,98px); line-height:.93; letter-spacing:-.08em; text-wrap:balance; overflow-wrap:anywhere; }
#page-about .privacy-grand-heading p,
#page-about .privacy-chapter p { max-width:74ch; overflow-wrap:anywhere; }
#page-about .privacy-chapter h3,
#page-about .about-chapter-copy h3 { min-width:0; text-wrap:balance; overflow-wrap:anywhere; }
#page-about .privacy-chapter { transform:translate3d(62px,24px,0); clip-path:inset(0 0 0 7%); }
#page-about .privacy-chapter:nth-child(even) { transform:translate3d(-62px,24px,0); clip-path:inset(0 7% 0 0); }
#page-about .privacy-chapter.is-visible { transform:none; clip-path:inset(0); }
#page-about .about-chapter { transform:translate3d(-54px,26px,0); clip-path:inset(0 8% 0 0); }
#page-about .about-chapter:nth-child(even) { transform:translate3d(54px,26px,0); clip-path:inset(0 0 0 8%); }
#page-about .about-chapter.is-visible { transform:none; clip-path:inset(0); }
#page-about .privacy-chapter-tag { display:inline-flex; align-items:center; gap:10px; }
#page-about .privacy-chapter-tag::before { width:26px; height:1px; background:linear-gradient(90deg,#58d3f2,transparent); content:""; }
#page-about .privacy-chapter-no { text-shadow:0 0 20px rgba(70,202,236,.35); }
#page-about .about-answer { transition:border-color .35s ease,background .35s ease; }
#page-about .about-answer[open] { padding:0 14px; background:linear-gradient(100deg,rgba(34,122,149,.12),transparent 78%); }
#page-about .about-answer summary b { display:inline-grid; width:27px; aspect-ratio:1; place-items:center; border:1px solid rgba(96,210,238,.25); border-radius:50%; }
#page-about .about-endmark { position:relative; overflow:hidden; }
#page-about .about-endmark::before { position:absolute; left:-5%; top:-1px; width:20%; height:1px; content:""; background:linear-gradient(90deg,transparent,#65e1fb,transparent); animation:xylen-footer-light 5.4s ease-in-out infinite; }

#page-devices.active .devices-page > *,#page-traffic.active .traffic-page > *,#page-releases.active .container > * { animation:xylen-page-piece .85s cubic-bezier(.16,.82,.2,1) both; }
#page-devices.active .devices-page > *:nth-child(2),#page-traffic.active .traffic-page > *:nth-child(2),#page-releases.active .container > *:nth-child(2) { animation-delay:.12s; }
#page-devices.active .devices-page > *:nth-child(3),#page-traffic.active .traffic-page > *:nth-child(3),#page-releases.active .container > *:nth-child(3) { animation-delay:.22s; }
#page-devices.active .devices-page > *:nth-child(4),#page-traffic.active .traffic-page > *:nth-child(4),#page-releases.active .container > *:nth-child(4) { animation-delay:.3s; }
.app-footer { position:relative; overflow:hidden; }
.app-footer::before { position:absolute; top:0; left:50%; width:min(70vw,900px); height:1px; content:""; background:linear-gradient(90deg,transparent,rgba(72,204,235,.56),transparent); transform:translateX(-50%); }
.btn-back-to-top { transition:transform .35s cubic-bezier(.16,.82,.2,1),box-shadow .35s ease; }
.btn-back-to-top:hover { transform:translateY(-5px) scale(1.04); box-shadow:0 12px 38px rgba(37,173,217,.28); }

@keyframes xylen-ambient-breathe { to { transform:translate3d(1.5%,-1.2%,0) scale(1.035); } }
@keyframes xylen-grid-float { to { background-position:76px 76px,-76px 76px; } }
@keyframes xylen-title-open { from { opacity:0; transform:translate3d(-45px,20px,0) scale(.97); clip-path:inset(0 0 45% 0); filter:blur(8px); } to { opacity:1; transform:none; clip-path:inset(0); filter:blur(0); } }
@keyframes xylen-copy-arrive { from { opacity:0; transform:translate3d(36px,15px,0); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes xylen-visual-reveal { from { opacity:0; transform:perspective(900px) rotateY(-18deg) rotateZ(-5deg) scale(.82); filter:blur(12px); } to { opacity:1; transform:perspective(900px) rotateY(0) rotateZ(0) scale(1); filter:blur(0); } }
@keyframes xylen-orbit-plane { to { rotate:1turn; } }
@keyframes xylen-core-breathe { to { box-shadow:0 0 125px rgba(0,190,239,.34),inset 0 0 56px rgba(67,201,242,.3),0 0 0 24px rgba(39,179,222,.035); } }
@keyframes xylen-core-ring { 0% { transform:scale(.84); opacity:.8; } 100% { transform:scale(1.42); opacity:0; } }
@keyframes xylen-node-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes xylen-route-flow { to { stroke-dashoffset:-968; } }
@keyframes xylen-step-arrive { from { opacity:0; transform:translateY(24px) rotateX(-12deg) scale(.97); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes xylen-page-piece { from { opacity:0; transform:translate3d(0,24px,0) scale(.992); clip-path:inset(5% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes xylen-footer-light { 0%,100% { transform:translateX(0); opacity:.3; } 50% { transform:translateX(450%); opacity:1; } }

@media (max-width: 900px) {
  .silent-motion-hero { grid-template-columns:minmax(0,1fr) minmax(300px,.82fr); min-height:730px; padding-inline:clamp(22px,4vw,42px); }
  .silent-motion-copy .hero-statement-title { font-size:clamp(3.55rem,9vw,6.5rem); }
  .silent-motion-visual { width:min(100%,500px); }
  .orbit-node { min-width:104px; padding:8px 10px; }
}
@media (max-width: 700px) {
  .xylen-ambient::after { opacity:.13; }
  .silent-motion-hero { min-height:0; grid-template-columns:1fr; gap:8px; padding:70px 14px 46px; border-radius:0 0 28px 28px; }
  .silent-motion-visual { grid-row:1; width:min(100%,470px); margin:0 auto 2px; }
  .silent-motion-copy { grid-row:2; width:100%; text-align:left; }
  .silent-motion-copy .hero-statement-title { max-width:100%; font-size:clamp(3.2rem,13vw,5.2rem); line-height:.92; }
  .silent-motion-copy .hero-statement-desc { max-width:60ch; margin-top:19px; font-size:1rem; }
  .silent-motion-copy .hero-actions-row { margin-top:24px; }
  .silent-motion-orbit { width:100%; }
  .orbit-node { min-width:88px; gap:6px; padding:7px 8px; font-size:.62rem; }
  .orbit-node-1 { left:2%; }
  .orbit-node-2 { right:1%; }
  .orbit-node-3 { right:2%; }
  .orbit-node-4 { left:1%; }
  .motion-caption { bottom:-4%; font-size:8px; letter-spacing:.1em; }
  #page-about .privacy-grand-heading { grid-template-columns:1fr; gap:20px; }
  .privacy-index-art { width:min(40vw,180px); }
  #page-about .privacy-grand-heading h2 { font-size:clamp(42px,11vw,66px); }
  #page-about .privacy-chapter { grid-template-columns:42px minmax(0,1fr); gap:14px; padding-block:32px; }
  #page-about .privacy-chapter h3 { font-size:clamp(26px,7vw,38px); }
  #page-about .privacy-chapter p { font-size:14px; line-height:1.78; }
  #page-about .privacy-chapter p.privacy-chapter-lead { font-size:17px; }
  #page-about .about-chapter { grid-template-columns:72px minmax(0,1fr); gap:14px; }
}
@media (max-width: 430px) {
  .orbit-node { min-width:78px; max-width:124px; font-size:.56rem; }
  .orbit-node b { font-size:.62rem; }
  .silent-motion-hero { padding-top:68px; }
}
@media (prefers-reduced-motion: reduce) {
  .xylen-ambient::before,.xylen-ambient::after,.silent-motion-copy .hero-statement-title,.silent-motion-copy .hero-statement-desc,.silent-motion-copy .hero-actions-row,.silent-motion-visual,.orbit-ring-a,.orbit-ring-b,.orbit-ring-c,.orbit-depth-plane,.orbit-core,.orbit-core::before,.orbit-core::after,.orbit-sweep,.orbit-node,.silent-motion-route .route-highlight,.story-flow.revealed .story-step,.story-flow.revealed .story-step-line,#page-about .about-endmark::before,#page-devices.active .devices-page > *,#page-traffic.active .traffic-page > *,#page-releases.active .container > * { animation:none !important; }
  .silent-motion-visual,.silent-motion-copy .hero-statement-title,.silent-motion-copy .hero-statement-desc,.silent-motion-copy .hero-actions-row,.editorial-reveal,.privacy-chapter,.about-chapter { opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .motion-card,.boundary-card,.access-card,.device-route-step,.traffic-truth-card,.release-editorial-card { transition:none !important; }
  .motion-card:hover,.boundary-card:hover,.access-card:hover,.device-route-step:hover,.traffic-truth-card:hover,.release-editorial-card:hover { transform:none !important; }
}

/* Roomy tab strip and the owner's utility drawer. */
.top-navbar {
  box-sizing:border-box;
  top:12px;
  width:min(1580px,calc(100% - 48px));
  max-width:1580px;
  padding:0;
}
.nav-island-inner {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(12px,1.65vw,25px);
}
.brand-badge-clean {
  width:204px;
  height:72px;
  justify-content:center;
  padding:6px 13px;
  border-radius:22px;
}
.brand-lockup { display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.brand-lockup img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-lockup-light { display:none !important; }
body.theme-light .brand-lockup-dark { display:none !important; }
body.theme-light .brand-lockup-light { display:block !important; }
.brand-monogram-icon,.brand-clean-name { display:none; }
.main-nav-menu {
  width:100%;
  max-width:940px;
  min-width:0;
  height:62px;
  justify-self:center;
  gap:4px;
  padding:5px;
  border-radius:20px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
.main-nav-menu::-webkit-scrollbar { display:none; }
.nav-active-pill { top:5px; bottom:5px; border-radius:15px; }
.nav-page-btn {
  flex:1 0 auto;
  justify-content:center;
  height:50px;
  min-width:max-content;
  padding:0 clamp(13px,1.55vw,24px);
  border-radius:15px;
  font-size:clamp(.82rem,.94vw,.98rem);
}
.header-menu-pill { justify-self:end; }
.header-hamburger-trigger { height:62px; min-width:108px; justify-content:center; border-radius:20px; }
.compact-nav-drawer .drawer-sheet {
  inset:86px max(18px,calc((100vw - 1580px)/2)) auto auto;
  box-sizing:border-box;
  width:min(390px,calc(100vw - 28px));
  max-height:min(660px,calc(100dvh - 104px));
  padding:17px;
  border-radius:24px;
  border:1px solid color-mix(in srgb,var(--cyan-bright) 25%,var(--border-subtle));
  background:
    radial-gradient(ellipse at 100% 0,rgba(23,164,208,.15),transparent 48%),
    var(--bg-canvas);
  box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 48px rgba(0,153,218,.1);
}
.compact-nav-drawer .drawer-sheet::before {
  position:absolute;
  inset:0 18px auto;
  height:1px;
  content:"";
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),rgba(159,129,255,.78),transparent);
  box-shadow:0 0 18px rgba(66,203,241,.42);
}
.compact-nav-drawer .drawer-header { min-height:48px; padding:5px 2px 12px; }
.drawer-menu-title { color:var(--text-primary); font-size:.75rem; letter-spacing:.16em; }
.compact-nav-drawer .drawer-close-btn { border-radius:13px; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.compact-nav-drawer .drawer-close-btn:hover { transform:rotate(90deg); border-color:var(--cyan-bright); background:var(--cyan-subtle); }
.compact-nav-drawer .drawer-footer-controls {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:15px 0 0;
  border-top:0;
}
.compact-nav-drawer .drawer-control-group { gap:9px; }
.compact-nav-drawer .drawer-group-label { color:#80a5b8; font-size:.66rem; letter-spacing:.14em; }
.compact-nav-drawer .drawer-lang-row { gap:9px; }
.compact-nav-drawer .drawer-lang-row .lang-text-btn {
  min-height:50px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  font-size:.82rem;
  transition:transform .25s cubic-bezier(.16,.82,.2,1),border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.compact-nav-drawer .drawer-lang-row .lang-text-btn:hover { transform:translateY(-2px); }
.compact-nav-drawer .drawer-lang-row .lang-text-btn.active { box-shadow:0 8px 28px rgba(0,153,218,.28),inset 0 1px rgba(255,255,255,.18); }
.compact-nav-drawer .drawer-theme-pill-btn {
  min-height:62px;
  padding:11px 15px;
  border-radius:15px;
  background:linear-gradient(120deg,rgba(22,82,102,.35),rgba(255,255,255,.025));
  font-size:.94rem;
  transition:transform .3s cubic-bezier(.16,.82,.2,1),border-color .3s ease,box-shadow .3s ease;
}
.compact-nav-drawer .drawer-theme-pill-btn:hover { transform:translateX(3px); box-shadow:0 8px 26px rgba(0,153,218,.12); }
.compact-nav-drawer .theme-icon-symbol { display:grid; width:35px; height:35px; flex:none; place-items:center; border:1px solid rgba(102,211,240,.22); border-radius:12px; background:rgba(3,16,27,.34); font-size:16px; }
.compact-nav-drawer .drawer-manager-btn {
  position:relative;
  min-height:58px;
  margin-top:2px;
  border-radius:15px;
  border-color:rgba(87,210,237,.35);
  background:linear-gradient(108deg,rgba(8,123,157,.29),rgba(24,34,56,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.14);
  letter-spacing:.015em;
  transition:transform .28s cubic-bezier(.16,.82,.2,1),border-color .25s ease,box-shadow .25s ease;
}
.compact-nav-drawer .drawer-manager-btn:hover { transform:translateY(-2px); border-color:rgba(92,226,250,.72); box-shadow:0 13px 32px rgba(0,153,218,.16); }
.compact-nav-drawer .drawer-manager-btn .pulse-dot { box-shadow:0 0 16px rgba(48,224,124,.7); }

/* The original lockup is used at a larger scale across the header and footer. */
.footer-center-brand { min-height:90px; gap:0; }
.footer-lockup { width:clamp(220px,24vw,300px); height:auto; }
.footer-lockup img { width:100%; height:auto; }
.footer-monogram-icon,.footer-brand-title { display:none; }

/* Later cards travel above earlier cards for a clean, full-face handoff. */
/* Irregular editorial rhythm for the report story: each section takes its own side. */
.xylen-story-expansion { padding:clamp(40px,6vw,92px) 0 20px; }
.story-section {
  width:94%;
  isolation:isolate;
  margin-bottom:clamp(54px,8vw,108px);
  border-radius:24px;
  background:radial-gradient(ellipse at 100% 0,rgba(25,129,166,.13),transparent 43%),linear-gradient(135deg,rgba(13,26,38,.94),rgba(8,14,22,.93));
}
.story-section::before { width:2px; opacity:1; box-shadow:0 0 20px rgba(40,189,225,.35); animation:story-edge-current 6s ease-in-out infinite; }
.story-section::after {
  position:absolute;
  z-index:0;
  right:-11%;
  bottom:-44%;
  width:min(43vw,540px);
  aspect-ratio:1;
  border:1px solid rgba(76,198,231,.08);
  border-radius:50%;
  content:"";
  pointer-events:none;
  box-shadow:0 0 0 26px rgba(76,198,231,.018),0 0 0 70px rgba(76,198,231,.012);
  animation:story-orbit-in 12s ease-in-out infinite alternate;
}
.story-heading { position:relative; z-index:1; display:grid; max-width:none; grid-template-columns:minmax(0,1fr) minmax(250px,.68fr); align-items:end; column-gap:clamp(26px,6vw,82px); margin-bottom:clamp(34px,5vw,62px); }
.story-eyebrow { grid-column:1/-1; margin-bottom:14px; }
.story-heading h2 { grid-column:1; grid-row:2; max-width:790px; margin:0; font-size:clamp(35px,5vw,66px); line-height:.98; letter-spacing:-.065em; text-wrap:balance; }
.story-heading > p { grid-column:2; grid-row:2; align-self:end; max-width:52ch; margin:0 0 2px; padding-left:17px; border-left:1px solid rgba(80,208,235,.34); color:#9db3c0; font-size:clamp(14px,1.2vw,16px); line-height:1.8; }
.story-flow { width:100%; padding-block:clamp(44px,7vw,80px); }
.story-flow .story-heading { padding-right:9%; }
.story-route { position:relative; z-index:1; gap:clamp(10px,2.2vw,28px); padding-top:12px; }
.story-route::before { position:absolute; top:32px; left:1%; right:2%; height:1px; content:""; background:linear-gradient(90deg,rgba(49,219,236,.47),rgba(102,132,229,.28) 58%,rgba(170,132,255,.16)); transform-origin:left; }
.story-step { z-index:1; min-height:220px; padding:0 clamp(8px,1.3vw,18px) 8px 0; }
.story-step:nth-child(odd) { --step-settle:14px; }
.story-step:nth-child(even) { --step-settle:-10px; }
.story-flow.revealed .story-step { animation:xylen-step-arrive .82s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--step) * 150ms); }
.story-step-no { position:relative; z-index:2; width:48px; height:48px; border-color:rgba(71,218,239,.7); background:radial-gradient(circle at 35% 25%,#164959,#0b202d 72%); box-shadow:0 0 0 7px rgba(69,202,229,.035),0 0 34px rgba(37,195,228,.18); }
.story-step-no::after { position:absolute; inset:-7px; border:1px solid rgba(78,211,236,.28); border-radius:50%; content:""; animation:story-no-ring 3s ease-out infinite; }
.story-step-line { top:23px; left:52px; height:1px; background:linear-gradient(90deg,rgba(65,214,234,.72),rgba(65,195,233,.05)); }
.story-flow.revealed .story-step-line { animation:story-line-grow 1.15s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--step) * 150ms + 200ms); }
@keyframes xylen-step-arrive { from { opacity:0; transform:translateY(24px) rotateX(-12deg) scale(.97); filter:blur(5px); } to { opacity:1; transform:translateY(var(--step-settle,0)); filter:none; } }
.story-step h3 { max-width:24ch; margin:27px 0 10px; font-size:clamp(16px,1.35vw,19px); line-height:1.35; }
.story-step p { max-width:34ch; font-size:13px; line-height:1.75; }
.story-caption { position:relative; z-index:1; width:max-content; max-width:100%; margin:38px 0 0; padding:10px 14px; border:1px solid rgba(84,193,219,.17); border-radius:99px; background:rgba(5,21,31,.58); }
.story-caption span { animation:caption-beacon 1.9s ease-in-out infinite; }

.story-boundaries { width:91%; margin-left:auto; margin-right:0; background:radial-gradient(ellipse at 0 95%,rgba(42,158,162,.13),transparent 42%),radial-gradient(ellipse at 100% 5%,rgba(136,82,225,.14),transparent 44%),linear-gradient(140deg,#0e1a27,#0b111d 70%,#111020); }
.story-boundaries .story-heading { max-width:1150px; }
.boundary-grid { position:relative; z-index:1; gap:clamp(15px,2.4vw,30px); align-items:start; }
.boundary-card { overflow:hidden; min-height:250px; border-radius:21px; background:linear-gradient(140deg,rgba(21,51,61,.54),rgba(13,25,35,.5)); }
.boundary-card::before { position:absolute; inset:0; content:""; pointer-events:none; opacity:.45; background:linear-gradient(115deg,transparent 0 42%,rgba(90,215,235,.06) 49%,transparent 56%),linear-gradient(rgba(100,204,225,.035) 1px,transparent 1px); background-size:auto,100% 34px; mask-image:linear-gradient(115deg,#000,transparent 70%); }
.boundary-card::after { position:absolute; top:0; left:-50%; width:26%; height:1px; content:""; background:linear-gradient(90deg,transparent,#68eff1,transparent); box-shadow:0 0 18px #58dbe7; opacity:.76; }
.story-boundaries.revealed .boundary-card { animation:boundary-card-arrive .9s cubic-bezier(.16,.82,.2,1) both; }
.story-boundaries.revealed .boundary-card:nth-child(2) { animation-delay:.18s; }
.story-boundaries.revealed .boundary-card::after { animation:boundary-beam 4.6s ease-in-out infinite; }
.boundary-reported { transform:translateY(16px); }
.boundary-private { transform:translateY(-14px); border-color:rgba(159,131,255,.25); background:linear-gradient(145deg,rgba(49,35,78,.42),rgba(14,20,34,.72)); }
.boundary-private::after { background:linear-gradient(90deg,transparent,#bd9cff,transparent); box-shadow:0 0 18px #a888ff; }
.boundary-card h3 { position:relative; z-index:1; font-size:clamp(18px,1.65vw,22px); }
.boundary-card ul { position:relative; z-index:1; }
.boundary-card li { padding-left:24px; }
.boundary-card li::before { content:"↗"; font-size:13px; }
.boundary-private li::before { content:"⌁"; }
.boundary-symbol { position:relative; z-index:1; display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(91,215,236,.3); border-radius:13px; background:rgba(14,75,92,.25); }
.boundary-private .boundary-symbol { border-color:rgba(174,148,255,.36); background:rgba(90,64,152,.18); }

.story-access { width:96%; margin-left:auto; margin-right:0; }
.story-access .story-heading { max-width:860px; grid-template-columns:1fr; }
.story-access .story-heading h2 { grid-column:1; grid-row:2; }
.story-access .story-heading > p { display:none; }
.access-grid { position:relative; z-index:1; gap:16px; align-items:stretch; }
.access-card { position:relative; overflow:hidden; min-height:208px; padding:27px; border-radius:17px 17px 26px 17px; background:linear-gradient(150deg,rgba(16,39,52,.88),rgba(12,18,28,.82)); }
.access-card:nth-child(1) { transform:translateY(14px); }
.access-card:nth-child(2) { transform:translateY(-10px); border-color:rgba(154,135,255,.24); }
.access-card:nth-child(3) { transform:translateY(19px); }
.access-card::before { position:absolute; top:-40px; right:-55px; width:142px; height:142px; border:1px solid rgba(79,206,232,.2); border-radius:50%; content:""; box-shadow:0 0 0 18px rgba(79,206,232,.024),0 0 0 42px rgba(79,206,232,.018); }
.access-card:nth-child(2)::before { border-style:dashed; border-color:rgba(178,147,255,.28); }
.access-card::after { position:absolute; top:0; left:0; width:100%; height:1px; content:""; background:linear-gradient(90deg,rgba(82,224,238,.7),transparent 80%); transform:scaleX(.35); transform-origin:left; transition:transform .65s cubic-bezier(.16,.82,.2,1); }
.access-card:hover::after { transform:scaleX(1); }
.access-card > span { position:relative; z-index:1; display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(76,208,232,.4); border-radius:50%; background:#0c2634; box-shadow:0 0 24px rgba(34,173,207,.1); }
.access-card h3 { position:relative; z-index:1; max-width:24ch; margin:24px 0 9px; font-size:20px; }
.access-card p { position:relative; z-index:1; max-width:34ch; font-size:13px; }
.story-access.revealed .access-card { animation:access-card-arrive .82s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--story-index,0) * 120ms); }
.access-card:nth-child(1) { --story-index:0; }
.access-card:nth-child(2) { --story-index:1; }
.access-card:nth-child(3) { --story-index:2; }

.story-faq { display:grid; grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr); align-items:start; gap:clamp(34px,7vw,100px); width:92%; margin-left:0; margin-right:auto; }
.story-faq .story-heading { display:block; margin:0; }
.story-faq .story-heading h2 { max-width:11ch; }
.story-faq .story-heading > p { display:none; }
.story-faq-list { position:relative; z-index:1; }
.story-faq-item { transition:border-color .35s ease; }
.story-faq-item summary { min-height:74px; gap:14px; padding:20px 9px; font-size:clamp(14px,1.2vw,16px); }
.story-faq-item summary > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(83,202,232,.23); border-radius:50%; background:rgba(22,79,97,.2); }
.story-faq-item summary i::before,.story-faq-item summary i::after { transition:transform .4s cubic-bezier(.16,.82,.2,1),background .3s; }
.story-faq-item[open] summary i::before { background:#b59aff; }
.story-faq-item > p { max-width:68ch; }
.story-cta { position:relative; overflow:hidden; margin:clamp(64px,9vw,120px) 0 10px; padding:clamp(32px,5vw,62px); }
.story-cta::before { position:absolute; inset:0 auto 0 58%; width:1px; content:""; background:linear-gradient(transparent,rgba(91,219,238,.28),transparent); }
.story-cta::after { position:absolute; top:-60%; left:-30%; width:34%; height:220%; content:""; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(102,215,239,.07),transparent); transform:rotate(18deg); animation:cta-light-pass 7s ease-in-out infinite; }
.story-cta > div { position:relative; z-index:1; }
.story-cta h2 { max-width:18ch; font-size:clamp(30px,4vw,49px); }

/* Editorial motion and directional entrances for supporting product pages. */
.editorial-panel { background:radial-gradient(ellipse at 92% 12%,rgba(45,138,180,.2),transparent 37%),linear-gradient(128deg,#0d1d28,#0a111b 60%,#14172a); }
.editorial-panel::after { position:absolute; top:-80%; bottom:-80%; left:-26%; width:1px; content:""; pointer-events:none; background:linear-gradient(transparent,rgba(94,225,240,.35),transparent); transform:rotate(28deg); animation:panel-scan 8s ease-in-out infinite; }
.editorial-panel-head,.editorial-panel h2,.editorial-panel-lead,.device-route-grid,.device-limit-note { position:relative; z-index:1; }
.device-route-grid { align-items:stretch; gap:clamp(10px,2vw,24px); }
.device-route-step { overflow:hidden; min-height:220px; background:linear-gradient(150deg,rgba(22,47,60,.53),rgba(13,24,34,.48)); }
.device-route-step:nth-child(1) { transform:translateY(16px); }
.device-route-step:nth-child(2) { transform:translateY(-11px); border-color:rgba(151,135,255,.3); }
.device-route-step:nth-child(3) { transform:translateY(21px); }
.device-route-step::before { position:absolute; right:-40px; bottom:-78px; width:150px; aspect-ratio:1; border:1px solid rgba(94,215,239,.22); border-radius:50%; content:""; box-shadow:0 0 0 18px rgba(94,215,239,.027),0 0 0 44px rgba(94,215,239,.016); }
.device-route-step:nth-child(2)::before { border-style:dashed; border-color:rgba(170,143,255,.29); }
.device-route-step > span { position:relative; z-index:1; display:inline-flex; min-width:39px; min-height:39px; align-items:center; justify-content:center; border:1px solid rgba(85,213,236,.42); border-radius:50%; background:rgba(11,40,54,.7); }
.device-route-step h3,.device-route-step p { position:relative; z-index:1; }
.device-route-step h3 { margin-top:27px; }
.device-editorial .device-route-step.is-visible { animation:access-card-arrive .82s cubic-bezier(.16,.82,.2,1) both; animation-delay:calc(var(--reveal-order,0) * 140ms); }
.traffic-truth-grid { align-items:stretch; }
.traffic-truth-card:nth-child(1) { transform:translateY(12px); }
.traffic-truth-card:nth-child(2) { transform:translateY(-12px); border-color:rgba(167,139,255,.26); }
.traffic-truth-card:nth-child(3) { transform:translateY(17px); }
.traffic-truth-card > i { transition:transform .7s cubic-bezier(.16,.82,.2,1),border-color .4s ease; }
.traffic-truth-card:hover > i { transform:translate(-18px,-16px) rotate(20deg); border-color:rgba(93,222,240,.56); }
.releases-editorial-hero { background:radial-gradient(ellipse at 81% 10%,rgba(77,58,159,.34),transparent 34%),linear-gradient(120deg,#10212c,#10121d 64%,#17142d); }
.release-editorial-card:nth-child(1) { transform:translateY(9px); }
.release-editorial-card:nth-child(2) { transform:translateY(-15px); }
.release-editorial-card::before { position:absolute; z-index:0; inset:0 0 auto; height:1px; content:""; background:linear-gradient(90deg,rgba(99,220,239,.72),transparent 70%); transform:scaleX(.2); transform-origin:left; transition:transform .75s cubic-bezier(.16,.82,.2,1); }
.release-editorial-card:hover::before { transform:scaleX(1); }
.release-art-orbit b { text-shadow:0 0 28px rgba(103,221,241,.45); }
.release-install-notes { position:relative; overflow:hidden; background:radial-gradient(ellipse at 100% 0,rgba(107,81,202,.15),transparent 44%),linear-gradient(125deg,rgba(23,27,44,.95),rgba(13,21,29,.95)); }
.release-note-grid article { position:relative; overflow:hidden; min-height:150px; }
.release-note-grid article::after { position:absolute; top:0; right:0; width:1px; height:0; content:""; background:linear-gradient(transparent,#7be2f3,transparent); transition:height .7s cubic-bezier(.16,.82,.2,1); }
.release-note-grid article:hover::after { height:100%; }

/* Asymmetric chapter choreography keeps the About and data charter pages editorial. */
#page-about .about-grand-hero h1 { max-width:820px; margin-left:0; }
#page-about .about-grand-lead { max-width:560px; margin-left:clamp(0px,8vw,130px); }
#page-about .about-manifesto { max-width:1180px; margin-left:7%; }
#page-about .about-manifesto-text { max-width:1050px; margin-left:clamp(0px,7vw,105px); }
#page-about .about-section-heading { grid-template-columns:minmax(0,1fr) minmax(250px,.64fr); }
#page-about .about-section-heading h2 { max-width:11ch; }
#page-about .about-section-heading p { margin-bottom:4px; padding-left:17px; border-left:1px solid rgba(85,211,244,.34); }
#page-about .about-chapter:nth-of-type(even) .about-chapter-copy { padding-left:clamp(0px,4vw,58px); }
#page-about .about-chapter:nth-of-type(odd) .about-chapter-index { transform:translateY(8px); }
#page-about .privacy-chapter { transform:translate3d(75px,28px,0) rotateY(-1deg); clip-path:inset(0 0 0 9%); }
#page-about .privacy-chapter:nth-child(even) { transform:translate3d(-68px,24px,0) rotateY(1deg); clip-path:inset(0 9% 0 0); }
#page-about .privacy-chapter.is-visible { transform:none; clip-path:inset(0); }
#page-about .privacy-chapter:nth-child(even) > div { padding-left:clamp(0px,5vw,70px); }
#page-about .privacy-grand-heading h2 { max-width:820px; }
#page-about .about-endmark { position:relative; min-height:90px; }

@keyframes story-edge-current { 0%,100% { opacity:.55; filter:hue-rotate(0); } 50% { opacity:1; filter:hue-rotate(34deg); } }
@keyframes story-orbit-in { from { transform:translate3d(0,0,0) scale(.96); opacity:.45; } to { transform:translate3d(-3%, -2%,0) scale(1.05); opacity:.95; } }
@keyframes story-no-ring { 0% { transform:scale(.75); opacity:.66; } 100% { transform:scale(1.45); opacity:0; } }
@keyframes boundary-card-arrive { from { opacity:0; filter:blur(9px); clip-path:inset(15% 0 0); } to { opacity:1; filter:none; clip-path:inset(0); } }
@keyframes boundary-beam { 0%,100% { left:-28%; opacity:.12; } 45%,60% { opacity:.82; } 85% { left:110%; opacity:0; } }
@keyframes access-card-arrive { from { opacity:0; filter:blur(8px); clip-path:inset(0 0 18%); } to { opacity:1; filter:none; clip-path:inset(0); } }
@keyframes caption-beacon { 0%,100% { box-shadow:0 0 5px #27c7e7; } 50% { box-shadow:0 0 18px 5px rgba(39,199,231,.48); } }
@keyframes cta-light-pass { 0%,72%,100% { transform:translateX(-15%) rotate(18deg); opacity:0; } 82% { opacity:1; } 94% { transform:translateX(470%) rotate(18deg); opacity:0; } }
@keyframes panel-scan { 0%,100% { transform:translateX(0) rotate(28deg); opacity:.15; } 50% { transform:translateX(650px) rotate(28deg); opacity:.78; } }

@media (max-width:900px) {
  .top-navbar { width:calc(100% - 32px); }
  .brand-badge-clean { width:164px; height:62px; }
  .header-hamburger-trigger { min-width:90px; height:58px; }
  .main-nav-menu { height:58px; }
  .nav-page-btn { height:46px; padding-inline:12px; }
  .story-section { width:97%; }
  .story-faq { width:97%; grid-template-columns:minmax(190px,.58fr) minmax(0,1.42fr); gap:28px; }
}
@media (max-width:700px) {
  .top-navbar { top:8px; width:calc(100% - 24px); }
  .nav-island-inner { grid-template-columns:112px minmax(0,1fr) 42px; gap:8px; }
  .brand-badge-clean { width:112px; height:48px; padding:4px 7px; border-radius:15px; }
  .main-nav-menu { height:48px; gap:2px; padding:3px; border-radius:15px; }
  .nav-active-pill { top:3px; bottom:3px; border-radius:11px; }
  .nav-page-btn { height:40px; flex:0 0 auto; padding:0 9px; border-radius:11px; font-size:.72rem; }
  .header-hamburger-trigger { width:42px; min-width:42px; height:48px; padding:0; border-radius:15px; }
  .hamburger-txt { display:none; }
  .hamburger-bars-wrap,.hamburger-bars-wrap .hamburger-bar { width:17px; }
  .compact-nav-drawer .drawer-sheet { inset:64px 12px auto auto; width:min(390px,calc(100vw - 24px)); max-height:calc(100dvh - 78px); }
  .motion-carousel-section { padding-top:24px; }
  .story-section,.story-flow,.story-boundaries,.story-access,.story-faq { width:100%; margin-left:auto; margin-right:auto; padding:25px 20px; border-radius:21px; }
  .story-heading { display:block; margin-bottom:30px; }
  .story-heading h2 { max-width:100%; margin:12px 0 14px; font-size:clamp(34px,9vw,48px); }
  .story-heading > p { max-width:62ch; margin:0; padding:12px 0 0 13px; border-left:1px solid rgba(80,208,235,.34); font-size:14px; }
  .story-route { grid-template-columns:1fr; gap:18px; }
  .story-route::before { top:28px; bottom:36px; left:23px; right:auto; width:1px; height:auto; background:linear-gradient(rgba(49,219,236,.48),rgba(102,132,229,.28) 65%,transparent); }
  .story-step,.story-step:nth-child(odd),.story-step:nth-child(even) { min-height:0; padding:0 0 10px 62px; transform:none; }
  .story-step-no { position:absolute; top:0; left:0; width:46px; height:46px; }
  .story-step-line { display:none; }
  .story-step h3 { margin:3px 0 7px; }
  .story-step p { max-width:52ch; }
  .story-caption { width:auto; font-size:10px; line-height:1.5; }
  .boundary-grid,.access-grid { grid-template-columns:1fr; gap:13px; }
  .boundary-card,.boundary-reported,.boundary-private { min-height:0; padding:22px; transform:none; }
  .access-card,.access-card:nth-child(1),.access-card:nth-child(2),.access-card:nth-child(3) { min-height:0; padding:21px; transform:none; }
  .access-card h3 { margin-top:17px; }
  .story-faq { display:block; }
  .story-faq .story-heading { margin-bottom:20px; }
  .story-faq .story-heading h2 { max-width:15ch; }
  .story-cta { gap:24px; }
  .story-cta::before { inset:0 0 auto; width:auto; height:1px; }
  .editorial-panel .device-route-grid { grid-template-columns:1fr; gap:10px; }
  .device-route-step,.device-route-step:nth-child(1),.device-route-step:nth-child(2),.device-route-step:nth-child(3) { min-height:0; transform:none; }
  .device-route-step h3 { margin-top:17px; }
  .traffic-truth-grid { grid-template-columns:1fr; gap:10px; }
  .traffic-truth-card,.traffic-truth-card:nth-child(1),.traffic-truth-card:nth-child(2),.traffic-truth-card:nth-child(3) { min-height:180px; transform:none; }
  .release-editorial-card:nth-child(1),.release-editorial-card:nth-child(2) { transform:none; }
  #page-about .about-grand-lead { margin-left:0; }
  #page-about .about-manifesto { margin-left:0; }
  #page-about .about-manifesto-text { margin-left:0; }
  #page-about .about-section-heading { grid-template-columns:1fr; }
  #page-about .about-section-heading h2 { max-width:12ch; }
  #page-about .about-section-heading p { margin-top:16px; }
  #page-about .privacy-chapter:nth-child(even) > div { padding-left:0; }
}
@media (max-width:430px) {
  .nav-island-inner { grid-template-columns:96px minmax(0,1fr) 40px; gap:6px; }
  .brand-badge-clean { width:96px; height:45px; }
  .header-hamburger-trigger { width:40px; min-width:40px; height:45px; }
  .nav-page-btn { padding:0 8px; font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce) {
  .story-section::before,.story-section::after,.story-step-no::after,.story-caption span,.boundary-card::after,.story-cta::after,.editorial-panel::after { animation:none !important; }
  .story-step,.boundary-card,.access-card,.device-route-step,.traffic-truth-card,.release-editorial-card { animation:none !important; filter:none !important; clip-path:none !important; }
  .story-step { opacity:1; transform:none; }
  .boundary-card,.access-card,.device-route-step,.traffic-truth-card,.release-editorial-card { opacity:1; }
}

/* Keep mobile navigation legible; let the tab strip scroll instead of shrinking. */
@media (max-width:700px) {
  .nav-island-inner { grid-template-columns:130px minmax(0,1fr) 46px; gap:8px; }
  .brand-badge-clean { width:130px; height:54px; }
  .main-nav-menu { height:54px; }
  .nav-page-btn { height:46px; padding-inline:13px; font-size:.8rem; }
  .header-hamburger-trigger { width:46px; min-width:46px; height:54px; }
  .story-step:nth-child(odd),.story-step:nth-child(even) { --step-settle:0px; }
}
@media (max-width:430px) {
  .nav-island-inner { grid-template-columns:104px minmax(0,1fr) 40px; gap:6px; }
  .brand-badge-clean { width:104px; height:50px; }
  .main-nav-menu { height:50px; }
  .nav-page-btn { height:42px; padding-inline:11px; font-size:.74rem; }
  .header-hamburger-trigger { width:40px; min-width:40px; height:50px; }
}

/* Preserve the animated orbital centerpiece while bringing the hero title into view. */
@media (max-width:700px) {
  .silent-motion-hero { gap:6px; padding-top:54px; padding-bottom:34px; }
  .silent-motion-visual { width:min(100%,370px); }
  .silent-motion-copy .hero-statement-title { font-size:clamp(3.1rem,12vw,4.5rem); }
  .silent-motion-copy .hero-statement-desc { margin-top:15px; }
}
@media (max-width:430px) {
  .silent-motion-visual { width:min(100%,330px); }
  .silent-motion-copy .hero-statement-title { font-size:clamp(3rem,12vw,3.5rem); }
}

/* Spacious navigation, with a compact menu-only state instead of an empty header rail. */
.top-navbar:not(.navbar-hidden) {
  width:min(1640px,calc(100% - 48px));
  max-width:1640px;
  padding-right:128px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.nav-island-inner { grid-template-columns:190px minmax(0,1fr) 96px; gap:clamp(10px,1.1vw,18px); }
.brand-badge-clean { width:190px; height:64px; padding:6px 11px; border-radius:20px; }
.brand-lockup:not(.footer-lockup) { width:100%; height:100%; }
.main-nav-menu { width:100%; max-width:900px; height:56px; justify-self:center; gap:5px; padding:5px; }
.nav-page-btn { height:46px; min-width:80px; justify-content:center; padding-inline:clamp(8px,.95vw,17px); font-size:clamp(.78rem,.84vw,.92rem); }
.header-menu-pill { justify-content:flex-end; }
.header-hamburger-trigger { min-width:96px; height:56px; padding-inline:14px; border-radius:18px; font-size:.88rem; }
.top-navbar.navbar-hidden {
  left:auto;
  right:max(12px,calc((100vw - 1640px) / 2 + 12px));
  width:auto;
  max-width:none;
  padding:0;
  transform:translateY(0);
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.top-navbar.navbar-hidden .nav-island-inner { display:flex; width:auto; justify-content:flex-end; }
.top-navbar.navbar-hidden .header-menu-pill { display:flex; }
.compact-nav-drawer .drawer-nav-list { display:none !important; }

.motion-carousel-section { padding-top:clamp(32px,4svh,56px); }

/* Stronger directional arrivals and live video finishes across the main page. */
.reveal-on-scroll {
  filter:blur(7px);
  transform:translate3d(0,42px,0) scale(.988);
  transition:opacity .82s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.16,1,.3,1),filter .78s ease;
  will-change:opacity,transform,filter;
}
.reveal-on-scroll.revealed { filter:none; transform:translate3d(0,0,0) scale(1); }
.motion-card { transform-style:preserve-3d; transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .5s ease; }
.motion-card:hover { transform:translateY(-9px) rotateX(1.2deg) scale(1.012); }
.motion-preview-box { isolation:isolate; }
.motion-preview-box::after {
  position:absolute;
  z-index:2;
  inset:-30% -45%;
  content:"";
  pointer-events:none;
  opacity:.38;
  background:linear-gradient(112deg,transparent 43%,rgba(104,237,255,.2) 49%,rgba(171,137,255,.14) 51%,transparent 57%);
  transform:translateX(-55%) rotate(7deg);
  animation:video-light-pass 7.8s cubic-bezier(.4,0,.2,1) infinite;
}
.motion-preview-video { transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .7s ease; }
.motion-card:hover .motion-preview-video { transform:scale(1.075); filter:saturate(1.3) contrast(1.05); }
@keyframes video-light-pass { 0%,18% { transform:translateX(-60%) rotate(7deg); opacity:0; } 38% { opacity:.65; } 72%,100% { transform:translateX(60%) rotate(7deg); opacity:0; } }

/* Soft pointer-responsive light follows the visitor between pages. */
body { isolation:isolate; }
body::before {
  position:fixed;
  z-index:-1;
  inset:0;
  content:"";
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(ellipse 34rem 28rem at var(--ambient-x,52%) var(--ambient-y,35%),rgba(0,153,218,.115),transparent 74%),
    radial-gradient(ellipse 30rem 24rem at 9% 78%,rgba(23,160,102,.09),transparent 76%),
    radial-gradient(ellipse 28rem 26rem at 91% 49%,rgba(125,79,220,.09),transparent 76%);
  animation:ambient-breathe 16s ease-in-out infinite alternate;
}
@keyframes ambient-breathe { to { opacity:.82; background-position:8px -12px,-16px 10px,12px 8px; } }

@media (max-width:1100px) {
  .top-navbar:not(.navbar-hidden) { width:calc(100% - 24px); max-width:none; padding:0; top:8px; }
  .nav-island-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:58px 50px; gap:7px 10px; }
  .brand-badge-clean { grid-column:1; grid-row:1; width:min(232px,58vw); height:58px; padding:5px 10px; border-radius:18px; }
  .header-menu-pill { grid-column:2; grid-row:1; justify-self:end; }
  .header-hamburger-trigger { min-width:106px; height:58px; border-radius:18px; }
  .main-nav-menu { grid-column:1 / -1; grid-row:2; display:flex; max-width:none; width:100%; height:50px; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .main-nav-menu::-webkit-scrollbar { display:none; }
  .nav-page-btn { height:42px; min-width:max-content; flex:0 0 auto; padding-inline:clamp(12px,2vw,22px); font-size:.84rem; }
  .nav-active-pill { display:none; }
  .nav-page-btn.active { background:var(--cyan-electric); }
  .top-navbar.navbar-hidden { top:8px; right:10px; width:auto; padding:0; }
  .top-navbar.navbar-hidden .header-hamburger-trigger { height:58px; }
}

/* A tab-like miniature makes page destinations legible before the visitor opens them. */
.nav-page-preview {
  position:fixed;
  z-index:1200;
  width:min(460px,calc(100vw - 28px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.965);
  transform-origin:top center;
  transition:opacity .22s ease,transform .36s cubic-bezier(.16,1,.3,1),visibility .22s;
}
.nav-page-preview.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.nav-preview-window {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(120,211,241,.25);
  border-radius:19px;
  background:#111923;
  box-shadow:0 24px 72px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.035),0 0 42px rgba(0,162,221,.14);
}
.nav-preview-topbar { height:34px; display:flex; align-items:center; gap:11px; padding:0 13px; border-bottom:1px solid rgba(255,255,255,.08); background:#0c111a; }
.nav-preview-brand { color:#e8f4ff; font-size:9px; font-weight:900; letter-spacing:.18em; white-space:nowrap; }
.nav-preview-brand i { margin-left:4px; color:#6d8398; font-size:6px; font-style:normal; letter-spacing:.08em; }
.nav-preview-tab { max-width:142px; overflow:hidden; padding:5px 8px; border:1px solid rgba(97,205,238,.18); border-radius:7px 7px 0 0; background:#182431; color:#b8cad8; font:600 8px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.nav-preview-dots { display:flex; gap:4px; margin-left:auto; }
.nav-preview-dots i { width:5px; height:5px; border-radius:50%; background:#526274; }
.nav-preview-canvas { position:relative; height:260px; overflow:hidden; background:radial-gradient(ellipse at 50% 42%,rgba(10,142,182,.2),transparent 58%),linear-gradient(135deg,#111a24,#10131d 65%,#121927); }
.nav-preview-canvas::before { position:absolute; inset:0; content:""; opacity:.17; background-image:linear-gradient(rgba(150,210,232,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(150,210,232,.2) 1px,transparent 1px); background-size:23px 23px; mask-image:linear-gradient(transparent,#000 25%,#000 80%,transparent); }
.nav-preview-scenery { position:absolute; inset:0; display:grid; place-items:center; }
.nav-preview-screen { position:absolute; z-index:2; inset:0 auto auto 0; width:1280px; height:760px; border:0; background:#080d15; opacity:0; pointer-events:none; transform:scale(var(--nav-preview-scale,.359375)); transform-origin:top left; transition:opacity .24s ease; }
.nav-page-preview.has-preview-frame .nav-preview-screen { opacity:1; }
.nav-page-preview.has-preview-frame .nav-preview-scenery { opacity:0; transition:opacity .2s ease; }
.nav-preview-orbit { position:absolute; width:144px; height:112px; border:1px solid rgba(39,192,231,.65); border-radius:50%; box-shadow:0 0 26px rgba(0,183,221,.12); animation:preview-orbit 12s linear infinite; }
.nav-preview-orbit-inner { width:98px; height:74px; border-style:dashed; border-color:rgba(131,119,247,.55); animation-direction:reverse; }
.nav-preview-core { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(58,208,239,.52); border-radius:50%; background:radial-gradient(circle at 40% 35%,#15546a,#081b2a 74%); box-shadow:0 0 25px rgba(12,171,213,.22); color:#e7fcff; font:900 8px var(--font-mono); letter-spacing:.15em; }
.nav-preview-node { position:absolute; width:6px; height:6px; border-radius:50%; background:#6aebf3; box-shadow:0 0 13px #39d4ef; animation:preview-blink 2.2s ease-in-out infinite; }
.nav-preview-node-a { top:30%; left:27%; }.nav-preview-node-b { right:25%; bottom:28%; animation-delay:-1.1s; }
.nav-preview-metrics { width:76%; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.nav-preview-metrics>i { height:52px; display:flex; flex-direction:column; justify-content:space-between; padding:8px; border:1px solid rgba(115,201,220,.18); border-radius:9px; background:rgba(255,255,255,.035); }
.nav-preview-metrics>i::before { width:52%; height:4px; border-radius:4px; background:#657b8d; content:""; }
.nav-preview-metrics b { width:50%; height:11px; border-radius:4px; background:linear-gradient(90deg,#14aade,#2ce2c1); box-shadow:0 0 14px rgba(29,204,222,.22); }
.nav-preview-metrics b:last-child { width:28%; height:4px; background:#788b9b; box-shadow:none; }
.nav-preview-device-line { position:absolute; bottom:23px; left:18%; right:18%; display:flex; align-items:center; justify-content:space-between; }
.nav-preview-device-line span { width:8px; height:8px; border:1px solid #4ae6ed; border-radius:50%; box-shadow:0 0 10px #28bbd9; }
.nav-preview-device-line b { flex:1; height:1px; margin:0 8px; background:linear-gradient(90deg,transparent,#34c7dc,transparent); }
.nav-preview-bars { height:82px; display:flex; align-items:end; gap:7px; }
.nav-preview-bars i { width:10px; height:var(--bar-height,40%); border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#20c8e8,#238a9f); box-shadow:0 0 15px rgba(27,184,213,.24); animation:preview-bar 1.8s ease-in-out infinite alternate; }
.nav-preview-bars i:nth-child(1){--bar-height:32%;animation-delay:-.5s}.nav-preview-bars i:nth-child(2){--bar-height:62%;animation-delay:-1.2s}.nav-preview-bars i:nth-child(3){--bar-height:45%;animation-delay:-.8s}.nav-preview-bars i:nth-child(4){--bar-height:82%;animation-delay:-1.5s}.nav-preview-bars i:nth-child(5){--bar-height:55%;animation-delay:-.3s}.nav-preview-bars i:nth-child(6){--bar-height:72%;animation-delay:-1s}.nav-preview-bars i:nth-child(7){--bar-height:39%;animation-delay:-.7s}.nav-preview-bars i:nth-child(8){--bar-height:60%;animation-delay:-1.4s}
.nav-preview-wave { position:absolute; width:70%; height:22px; bottom:24px; border-top:1px solid rgba(145,117,255,.62); border-radius:50%; filter:drop-shadow(0 0 5px rgba(123,104,240,.5)); transform:rotate(-6deg); }
.nav-preview-release { width:48%; height:68px; display:grid; grid-template-columns:42px 1fr; grid-template-rows:1fr auto; gap:3px 10px; align-items:center; padding:10px 12px; border:1px solid rgba(103,210,234,.25); border-radius:11px; background:rgba(21,33,47,.9); box-shadow:0 8px 24px rgba(0,0,0,.2); transform:translateX(-25px) rotate(-4deg); }
.nav-preview-release b { grid-row:span 2; display:grid; place-items:center; height:40px; border-radius:9px; background:linear-gradient(145deg,#05bcd5,#1675c3); color:#f3fdff; font:900 10px var(--font-mono); }
.nav-preview-release span { display:grid; gap:4px; }.nav-preview-release span i { height:4px; border-radius:4px; background:linear-gradient(90deg,#68c9d6 74%,rgba(255,255,255,.1) 74%); }.nav-preview-release small { color:#8395a5; font:7px var(--font-mono); letter-spacing:.1em; }
.nav-preview-release-ios { position:absolute; margin-left:115px; transform:translate(6px,25px) rotate(5deg); border-color:rgba(163,119,255,.3); }.nav-preview-release-ios b { background:linear-gradient(145deg,#8a66e6,#5145a2); }
.nav-preview-route { width:68%; display:flex; align-items:center; gap:8px; }.nav-preview-route i { width:6px; height:6px; border-radius:50%; background:#5be8dd; box-shadow:0 0 12px #55d9eb; }.nav-preview-route b { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(62,211,225,.6); border-radius:50%; color:#90f2f0; font:700 8px var(--font-mono); }.nav-preview-route span { flex:1; height:1px; background:linear-gradient(90deg,#2bd3df,#7163d7); }
.nav-preview-charter { position:absolute; right:10%; bottom:20px; width:57%; display:grid; gap:5px; padding:9px 11px; border:1px solid rgba(167,121,255,.25); border-radius:8px; background:rgba(255,255,255,.035); transform:rotate(-2deg); }.nav-preview-charter b { color:#c9b8ff; font:700 7px var(--font-mono); letter-spacing:.13em; }.nav-preview-charter i { height:3px; border-radius:3px; background:linear-gradient(90deg,rgba(85,210,226,.65) 78%,transparent 78%); }.nav-preview-charter i:nth-child(3){width:77%}.nav-preview-charter i:nth-child(4){width:55%}
.nav-preview-caption { min-height:61px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 14px 11px; background:linear-gradient(115deg,#131c27,#151826); }
.nav-preview-caption>span { min-width:0; display:grid; gap:3px; }.nav-preview-caption small { color:#4ad8ee; font:700 7px var(--font-mono); letter-spacing:.16em; }.nav-preview-caption strong { overflow:hidden; color:#f2f6fa; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.nav-preview-caption em { overflow:hidden; color:#91a0b0; font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.nav-preview-arrow { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border:1px solid rgba(91,208,232,.25); border-radius:50%; color:#51d7ed; font-size:13px; }
.nav-preview-hint { position:absolute; top:47px; right:12px; color:#688395; font:7px var(--font-mono); letter-spacing:.13em; }
@keyframes preview-orbit { to { transform:rotate(360deg); } }
@keyframes preview-blink { 50% { opacity:.32; transform:scale(.65); } }
@keyframes preview-bar { to { height:calc(var(--bar-height) * .76); filter:brightness(.8); } }
@media (hover:none) { .nav-page-preview { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .nav-page-preview *, .nav-page-preview::before { animation:none !important; transition:none !important; } }

/* A single muted page instance supplies a real miniature screen on desktop nav hover. */
html.nav-preview-mode,
html.nav-preview-mode body { width:1280px !important; min-width:1280px !important; overflow:hidden !important; background:#090d16 !important; }
html.nav-preview-mode .top-navbar,
html.nav-preview-mode footer,
html.nav-preview-mode #loading-screen,
html.nav-preview-mode #btn-back-to-top,
html.nav-preview-mode #compact-hamburger-btn-header,
html.nav-preview-mode #nav-page-preview,
html.nav-preview-mode .modal-overlay,
html.nav-preview-mode .toast-notification { display:none !important; }
html.nav-preview-mode .page-section.active { min-height:760px; padding-top:34px; }
html.nav-preview-mode .page-section.active .reveal-on-scroll { opacity:1 !important; filter:none !important; transform:none !important; }
html.nav-preview-mode .motion-carousel-track { animation:none !important; }
html.nav-preview-mode video { display:none !important; }
html.nav-preview-mode .motion-preview-box { background-color:#101927; }
@media (max-width:700px) {
  .top-navbar:not(.navbar-hidden) { width:calc(100% - 20px); top:8px; }
  .nav-island-inner { grid-template-rows:54px 48px; gap:6px 8px; }
  .brand-badge-clean { width:min(192px,52vw); height:54px; padding:4px 9px; }
  .header-hamburger-trigger { min-width:94px; height:54px; padding-inline:13px; }
  .hamburger-txt { display:inline; }
  .hamburger-bars-wrap,.hamburger-bars-wrap .hamburger-bar { width:17px; }
  .main-nav-menu { height:48px; gap:3px; padding:3px; border-radius:15px; }
  .nav-page-btn { height:40px; padding-inline:12px; font-size:.78rem; }
  .top-navbar.navbar-hidden .header-hamburger-trigger { height:54px; }
  .motion-carousel-track { animation-duration:25s !important; }
  .motion-card:hover { transform:none; }
  body::before { opacity:.42; background-size:100% 100%,90% 90%,92% 92%; }
}
@media (prefers-reduced-motion:reduce) {
  body::before,.motion-preview-box::after { animation:none !important; }
  .reveal-on-scroll { filter:none; transform:none; transition:none; }
  .motion-card,.motion-preview-video { transition:none !important; }
}

/* Empty device state: an animated report sheet, not a pretend radio scanner. */
.devices-empty-state-card {
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  grid-template-areas:"art title" "art copy" "art status" "art actions";
  align-items:center;
  column-gap:clamp(24px,5vw,68px);
  row-gap:14px;
  text-align:left;
}
.devices-empty-visual { position:relative; grid-area:art; width:min(100%,210px); aspect-ratio:1; display:grid; place-items:center; justify-self:center; isolation:isolate; }
.empty-report-orbit { position:absolute; border:1px solid rgba(48,212,237,.24); border-radius:50%; }
.empty-report-orbit-outer { inset:3%; border-style:dashed; animation:empty-report-orbit 24s linear infinite; }
.empty-report-orbit-inner { inset:16%; border-color:rgba(158,118,255,.4); animation:empty-report-orbit 18s linear infinite reverse; }
.empty-report-sheet { position:relative; z-index:1; width:43%; height:56%; display:flex; flex-direction:column; gap:9px; padding:16px 12px 11px; border:1px solid rgba(93,222,242,.58); border-radius:14px; background:linear-gradient(148deg,rgba(16,42,59,.96),rgba(13,19,31,.98)); box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 30px rgba(16,180,219,.14); transform:rotate(-7deg); animation:empty-report-float 5.8s ease-in-out infinite; }
.empty-report-sheet::before { width:40%; height:3px; border-radius:3px; background:#42d7eb; box-shadow:0 0 12px rgba(66,215,235,.45); content:""; }
.empty-report-sheet>i { height:4px; border-radius:4px; background:linear-gradient(90deg,rgba(139,168,191,.55) 72%,transparent 72%); }
.empty-report-sheet>i:nth-child(2) { width:83%; }.empty-report-sheet>i:nth-child(3) { width:65%; }
.empty-report-chart { display:flex; align-items:flex-end; justify-content:space-between; gap:5px; flex:1; padding:8px 2px 0; border-bottom:1px solid rgba(92,196,220,.22); }
.empty-report-chart b { flex:1; height:38%; border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#41d8ed,#3486d2 75%,#13a47d); transform-origin:bottom; animation:empty-report-bars 1.8s ease-in-out infinite alternate; }
.empty-report-chart b:nth-child(2) { height:66%; animation-delay:-.7s; }.empty-report-chart b:nth-child(3) { height:47%; animation-delay:-1.2s; }.empty-report-chart b:nth-child(4) { height:83%; animation-delay:-.4s; }.empty-report-chart b:nth-child(5) { height:55%; animation-delay:-1.5s; }
.empty-report-signal { position:absolute; z-index:2; top:19%; right:16%; width:9px; height:9px; border-radius:50%; background:#70f0e1; box-shadow:0 0 0 6px rgba(73,223,224,.08),0 0 22px rgba(73,223,224,.9); animation:empty-report-pulse 2.6s ease-in-out infinite; }
.devices-empty-state-card .devices-empty-heading { grid-area:title; margin:0; }
.devices-empty-state-card .devices-empty-text { grid-area:copy; margin:0; max-width:68ch; }
.report-waiting-status { grid-area:status; justify-self:start; display:flex; align-items:center; gap:10px; color:var(--text-secondary); }
.devices-empty-state-card>div:last-child { grid-area:actions; justify-content:flex-start !important; margin-top:0 !important; }
@keyframes empty-report-orbit { to { transform:rotate(360deg); } }
@keyframes empty-report-float { 50% { transform:translateY(-7px) rotate(-4deg); } }
@keyframes empty-report-bars { to { transform:scaleY(.63); filter:brightness(.78); } }
@keyframes empty-report-pulse { 50% { opacity:.45; transform:scale(.72); } }
@media (max-width:700px) {
  .devices-empty-state-card { grid-template-columns:1fr; grid-template-areas:"art" "title" "copy" "status" "actions"; text-align:center; row-gap:12px; }
  .devices-empty-visual { width:min(42vw,160px); }
  .report-waiting-status,.devices-empty-state-card>div:last-child { justify-self:center; justify-content:center !important; }
}
@media (prefers-reduced-motion:reduce) {
  .empty-report-orbit,.empty-report-sheet,.empty-report-chart b,.empty-report-signal { animation:none !important; }
}

/* Keep the footer lockup at brand scale on wide and high-density displays. */
.app-footer .footer-center-brand {
  width:min(320px,calc(100vw - 36px));
  min-height:90px;
  margin-inline:auto;
}
.app-footer .footer-lockup {
  flex:0 1 300px;
  width:min(300px,72vw);
  max-width:100%;
  max-height:126px;
}
.app-footer .footer-lockup img {
  display:block;
  width:100%;
  max-width:100%;
  max-height:126px;
  height:auto;
  object-fit:contain;
}

/* Five procedural 3D scenes trace the real client-to-summary path. */
.data-path-story {
  position:relative;
  isolation:isolate;
  width:min(1680px,calc(100% - 48px));
  margin:0 auto;
  padding:clamp(72px,10svh,126px) 0 38px;
  perspective:1800px;
}
.data-path-story::before {
  position:absolute;
  z-index:-1;
  top:16%;
  left:50%;
  width:min(1180px,100vw);
  height:78%;
  content:"";
  pointer-events:none;
  opacity:.48;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 16% 30%,rgba(5,153,133,.13),transparent 35%),radial-gradient(ellipse at 82% 48%,rgba(0,161,219,.16),transparent 42%),radial-gradient(ellipse at 52% 85%,rgba(109,77,222,.12),transparent 35%);
  filter:blur(28px);
}
.data-path-story-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(28px,6vw,90px);
  margin:0 auto clamp(38px,6svh,76px);
  padding:0 clamp(18px,4.8vw,72px);
}
.data-path-story-copy { max-width:850px; }
.data-path-story-kicker {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  color:#74869b;
  font:700 .72rem/1.4 var(--font-mono);
  letter-spacing:.19em;
}
.data-path-story-kicker i { width:8px; height:8px; border-radius:50%; background:#16c6e9; box-shadow:0 0 18px rgba(22,198,233,.85); }
.data-path-story-heading h2 {
  max-width:13ch;
  margin:0;
  color:#f5f8fb;
  font-size:clamp(38px,6.3vw,88px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.data-path-story-heading p { max-width:62ch; margin:22px 0 0; color:#9aabba; font-size:clamp(15px,1.38vw,19px); line-height:1.7; }
.data-path-progress { display:grid; flex:0 0 176px; grid-template-columns:1fr auto; align-items:center; gap:10px 14px; padding:15px 17px; border:1px solid rgba(123,160,184,.15); border-radius:16px; background:linear-gradient(140deg,rgba(16,25,37,.88),rgba(9,15,24,.72)); box-shadow:0 14px 38px rgba(0,0,0,.18); }
.data-path-progress-label { color:#778b9e; font:700 .58rem var(--font-mono); letter-spacing:.14em; }
.data-path-progress-count { color:#6f8295; font:700 .7rem var(--font-mono); }
.data-path-progress-count b { color:#47dcf0; font-size:.92rem; }
.data-path-progress-count i { margin:0 4px; color:#526477; font-style:normal; }
.data-path-progress-track { display:flex; grid-column:1 / -1; gap:5px; }
.data-path-progress-track i { flex:1; height:3px; overflow:hidden; border-radius:4px; background:rgba(132,159,181,.17); transition:background .35s ease,box-shadow .35s ease; }
.data-path-progress-track i.is-passed { background:linear-gradient(90deg,#12b8dc,#54e0d4); box-shadow:0 0 12px rgba(27,196,218,.35); }
.data-path-progress-track i.is-active { box-shadow:0 0 14px rgba(59,223,230,.58); }
.data-path-stack { position:relative; padding:0 0 76svh; }
.data-path-card {
  position:sticky;
  top:var(--path-pin-top,116px);
  z-index:calc(2 + var(--path-card-index, 0));
  width:100%;
  margin:0 0 clamp(150px,25svh,270px);
  perspective:1500px;
  transform-style:preserve-3d;
  --path-cover-x:0px;
  --path-cover-y:0px;
  --path-cover-z:0px;
  --path-cover-turn:0deg;
  --path-cover-scale:1;
  --path-cover-opacity:1;
  --path-cover-blur:0px;
}
.data-path-card:not(.is-scene-visible) .path-scene-stage,.data-path-card:not(.is-scene-visible) .path-scene-stage * { animation-play-state:paused !important; }
.data-path-card:nth-child(1) { --path-card-index:1;--path-pin-top:112px;--path-arrive-x:8vw;--path-arrive-turn:-13deg; }
.data-path-card:nth-child(2) { --path-card-index:2;--path-pin-top:122px;--path-arrive-x:-8vw;--path-arrive-turn:13deg; }
.data-path-card:nth-child(3) { --path-card-index:3;--path-pin-top:132px;--path-arrive-x:8vw;--path-arrive-turn:-13deg; }
.data-path-card:nth-child(4) { --path-card-index:4;--path-pin-top:142px;--path-arrive-x:-8vw;--path-arrive-turn:13deg; }
.data-path-card:nth-child(5) { --path-card-index:5;--path-pin-top:152px;--path-arrive-x:8vw;--path-arrive-turn:-13deg; }
.path-card-shell {
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  align-items:stretch;
  min-height:clamp(510px,68svh,700px);
  overflow:hidden;
  border:1px solid rgba(91,189,220,.22);
  border-radius:clamp(24px,3vw,38px);
  background:linear-gradient(112deg,rgba(16,24,35,.98),rgba(9,17,27,.97) 54%,rgba(8,14,25,.98));
  box-shadow:0 48px 120px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.055),0 0 70px rgba(0,153,196,.055);
  transform:translate3d(var(--path-cover-x),var(--path-cover-y),var(--path-cover-z)) rotateY(var(--path-cover-turn)) scale(var(--path-cover-scale));
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  opacity:var(--path-cover-opacity);
  filter:blur(var(--path-cover-blur));
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
}
.path-card-shell::before { position:absolute; inset:0; content:""; pointer-events:none; opacity:.22; background:linear-gradient(115deg,transparent 18%,rgba(42,203,233,.07) 48%,transparent 72%),radial-gradient(ellipse at 3% 100%,rgba(8,188,153,.1),transparent 42%); }
.path-card-shell::after { position:absolute; top:-42%; left:-36%; width:34%; height:184%; content:""; pointer-events:none; opacity:0; transform:rotate(21deg); background:linear-gradient(90deg,transparent,rgba(138,235,255,.08),transparent); transition:transform 1.35s cubic-bezier(.16,1,.3,1),opacity .4s ease; }
.data-path-card.is-entered .path-card-shell::after { opacity:1; transform:translateX(430%) rotate(21deg); }
.path-card-copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(30px,5.2vw,76px); }
.data-path-card:nth-child(even) .path-card-shell { grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr); }
.data-path-card:nth-child(even) .path-card-copy { grid-column:2; grid-row:1; }
.data-path-card:nth-child(even) .path-card-visual { grid-column:1; grid-row:1; border-right:1px solid rgba(134,175,197,.1); border-left:0; }
.data-path-card.is-entered:nth-child(odd) .path-card-copy { animation:path-copy-arrive-left .8s cubic-bezier(.16,1,.3,1) both; }
.data-path-card.is-entered:nth-child(even) .path-card-copy { animation:path-copy-arrive-right .8s cubic-bezier(.16,1,.3,1) both; }
.path-card-overline { display:flex; align-items:center; gap:11px; color:#6e8194; font:700 .67rem var(--font-mono); letter-spacing:.16em; }
.path-card-overline span:first-child { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(50,197,224,.42); border-radius:50%; color:#43d9ee; font-size:.75rem; letter-spacing:0; box-shadow:inset 0 0 18px rgba(32,177,217,.09),0 0 18px rgba(28,178,215,.09); }
.path-card-overline i { width:34px; height:1px; background:linear-gradient(90deg,rgba(65,213,233,.62),rgba(65,213,233,0)); }
.path-card-copy h3 { max-width:11ch; margin:clamp(26px,4vh,42px) 0 18px; color:#f2f7fb; font-size:clamp(33px,4.2vw,62px); font-weight:900; line-height:1.02; letter-spacing:-.06em; text-wrap:balance; }
.path-card-copy p { max-width:44ch; margin:0; color:#9aaebe; font-size:clamp(15px,1.3vw,18px); line-height:1.72; }
.path-card-footnote { margin-top:clamp(26px,5vh,58px); color:#617b8d; font:700 .57rem/1.5 var(--font-mono); letter-spacing:.1em; }
.path-card-visual { position:relative; min-width:0; min-height:500px; overflow:hidden; isolation:isolate; border-left:1px solid rgba(134,175,197,.1); background:radial-gradient(ellipse at 51% 48%,rgba(21,78,99,.23),transparent 53%),linear-gradient(140deg,rgba(8,16,26,.5),rgba(8,14,25,.12)); }
.path-card-visual::before { position:absolute; inset:0; content:""; opacity:.19; background-image:linear-gradient(rgba(117,188,209,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(117,188,209,.22) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse at center,#000 8%,transparent 76%); }
.path-card-visual::after { position:absolute; inset:0; content:""; pointer-events:none; background:radial-gradient(ellipse at center,transparent 34%,rgba(7,13,23,.48) 100%); }
.path-scene-stage { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; perspective:1050px; transform-style:preserve-3d; }
.data-path-card.is-entered .path-scene-stage { animation:path-scene-arrive .95s cubic-bezier(.16,1,.3,1) both; }
.data-path-card[data-path-side="-1"].is-entered .path-scene-stage { animation-name:path-scene-arrive-reverse; }
.scene-horizon { position:absolute; width:78%; height:58%; border:1px solid rgba(64,198,223,.13); border-radius:50%; transform:rotateX(68deg) rotateZ(-13deg); box-shadow:0 0 36px rgba(10,159,197,.08),inset 0 0 30px rgba(16,165,201,.04); }
.scene-ring { position:absolute; width:min(68%,440px); aspect-ratio:1; border:1px solid rgba(47,197,227,.17); border-radius:50%; transform-style:preserve-3d; box-shadow:inset 0 0 22px rgba(30,172,204,.035),0 0 25px rgba(30,172,204,.035); }
.scene-ring-a { animation:path-ring-turn 20s linear infinite; }
.scene-ring-b { width:min(55%,360px); border-color:rgba(119,115,239,.23); border-style:dashed; transform:rotateX(66deg) rotateZ(22deg); animation:path-ring-turn-reverse 28s linear infinite; }
.scene-ring-c { width:min(42%,275px); border-color:rgba(60,222,195,.17); transform:rotateY(62deg) rotateZ(-29deg); animation:path-ring-flip 18s ease-in-out infinite alternate; }
.scene-signal { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#77edfb; box-shadow:0 0 8px #61deee,0 0 24px rgba(68,213,239,.8); animation:path-signal-pulse 2.8s ease-in-out infinite; }
.scene-signal-a { top:25%; left:26%; }.scene-signal-b { top:68%; right:24%; animation-delay:-1.2s; }.scene-signal-c { right:34%; bottom:20%; width:5px; height:5px; animation-delay:-2s; }

/* Stage 1: explicit user-controlled permission. */
.scene-consent .scene-horizon { border-color:rgba(51,215,183,.22); }
.scene-consent .scene-ring-a { border-color:rgba(42,218,188,.23); }
.scene-consent .scene-ring-b { border-color:rgba(40,175,220,.28); }
.scene-permission-card { position:relative; z-index:3; display:flex; width:min(54%,360px); min-width:230px; flex-direction:column; gap:19px; padding:23px 25px; border:1px solid rgba(101,230,221,.34); border-radius:20px; background:linear-gradient(145deg,rgba(13,38,49,.95),rgba(11,22,35,.94)); box-shadow:0 24px 68px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.08),0 0 40px rgba(39,210,200,.13); transform:translateZ(65px) rotateY(-7deg) rotateX(4deg); animation:path-permission-float 5s ease-in-out infinite; }
.scene-permission-card>span { color:#6c94a6; font:700 .54rem var(--font-mono); letter-spacing:.16em; }
.scene-permission-card>b { color:#edffff; font:800 clamp(.9rem,1.5vw,1.2rem) var(--font-mono); letter-spacing:.08em; }
.scene-permission-card>small { color:#63cbbf; font:700 .5rem var(--font-mono); letter-spacing:.14em; }
.scene-toggle { align-self:flex-end; display:block; width:60px; height:31px; padding:4px; border:1px solid rgba(85,235,202,.62); border-radius:20px; background:linear-gradient(90deg,rgba(37,202,165,.48),rgba(12,82,82,.52)); box-shadow:0 0 20px rgba(41,222,177,.21); }
.scene-toggle i { display:block; width:21px; height:21px; margin-left:auto; border-radius:50%; background:linear-gradient(145deg,#bbfff0,#3dd4b8); box-shadow:0 0 14px rgba(72,239,192,.62); animation:path-toggle-pulse 2.4s ease-in-out infinite; }
.scene-consent-shield { position:absolute; z-index:4; top:23%; right:21%; display:grid; place-items:center; width:73px; height:82px; border:1px solid rgba(98,229,216,.62); border-radius:22px 22px 28px 28px; background:linear-gradient(150deg,rgba(37,158,148,.72),rgba(17,56,72,.88)); color:#dffffb; box-shadow:0 14px 38px rgba(0,0,0,.3),0 0 35px rgba(51,227,203,.3); transform:translateZ(100px) rotateY(18deg) rotateZ(8deg); animation:path-shield-float 5.8s ease-in-out infinite; }
.scene-consent-shield b { font-size:30px; font-weight:500; text-shadow:0 0 15px rgba(164,255,235,.9); }.scene-consent-shield small { position:absolute; bottom:7px; color:#a5ddd4; font:700 8px var(--font-mono); }
.scene-shard { position:absolute; z-index:2; width:18px; height:48px; border:1px solid rgba(79,218,222,.47); background:linear-gradient(180deg,rgba(91,228,233,.33),rgba(29,112,147,.04)); clip-path:polygon(50% 0,100% 38%,70% 100%,10% 64%); transform:translateZ(60px) rotate(28deg); animation:path-shard-drift 4s ease-in-out infinite; }
.scene-shard-a { left:24%; bottom:23%; }.scene-shard-b { right:30%; bottom:24%; height:34px; animation-delay:-1.8s; }

/* Stage 2: an Android event packet built from reported fields. */
.scene-report .scene-ring-a { width:min(63%,410px); border-color:rgba(68,193,231,.23); transform:rotateX(58deg) rotateZ(-23deg); }
.scene-report .scene-ring-b { width:min(46%,300px); border-color:rgba(120,111,234,.27); }
.scene-report-phone,.scene-ios-phone { position:relative; z-index:3; display:flex; width:clamp(168px,23%,232px); min-width:168px; height:min(68%,430px); min-height:340px; flex-direction:column; align-items:flex-start; gap:14px; padding:35px 21px 23px; border:1px solid rgba(104,210,240,.56); border-radius:27px; background:linear-gradient(145deg,#17283b,#0a1220 75%); box-shadow:0 26px 68px rgba(0,0,0,.47),inset 0 0 0 5px rgba(155,224,239,.04),0 0 34px rgba(48,194,226,.16); transform:translate3d(-8%,0,72px) rotateY(-15deg) rotateX(4deg); animation:path-phone-tilt 8s ease-in-out infinite; }
.scene-phone-speaker { position:absolute; top:13px; left:50%; width:42px; height:5px; border-radius:5px; background:rgba(180,224,237,.38); transform:translateX(-50%); }
.scene-report-phone>span,.scene-ios-phone>span { width:100%; color:#82c3d0; font:700 .54rem var(--font-mono); letter-spacing:.12em; }
.scene-report-phone>b { color:#58d7da; font:700 1rem var(--font-mono); }
.scene-code-line { display:block; height:6px; border-radius:5px; background:linear-gradient(90deg,rgba(55,214,221,.78),rgba(54,131,188,.3)); box-shadow:0 0 10px rgba(48,204,217,.14); animation:path-line-glow 3s ease-in-out infinite alternate; }
.scene-code-line.w-1 { width:85%; }.scene-code-line.w-2 { width:64%; animation-delay:-1s; }.scene-code-line.w-3 { width:76%; animation-delay:-.4s; }.scene-code-line.w-4 { width:49%; animation-delay:-1.4s; }
.scene-report-phone>small,.scene-ios-phone>small { margin-top:auto; color:#73899b; font:700 .48rem var(--font-mono); letter-spacing:.12em; }
.scene-report-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:13px 17px; border:1px solid rgba(81,203,230,.32); border-radius:11px; background:rgba(12,29,43,.92); box-shadow:0 18px 38px rgba(0,0,0,.32),0 0 22px rgba(41,177,217,.12); color:#b9e9ee; font:700 .54rem var(--font-mono); letter-spacing:.08em; transform:translateZ(125px); }
.scene-report-chip i { width:6px; height:6px; border-radius:50%; background:#54e1e9; box-shadow:0 0 11px #54e1e9; }.scene-report-chip b { color:#61e1e8; font-size:.9rem; }.scene-report-chip-a { top:26%; left:15%; animation:path-chip-a 5s ease-in-out infinite; }.scene-report-chip-b { right:13%; bottom:25%; border-color:rgba(158,126,241,.38); color:#c8befb; animation:path-chip-b 5.8s ease-in-out infinite; }.scene-report-chip-b i,.scene-report-chip-b b { background:#a28aff; box-shadow:0 0 11px #a28aff; }
.scene-report-trail { position:absolute; width:57%; height:36%; border-top:1px solid rgba(57,205,233,.55); border-radius:50%; transform:translate3d(-4%,10%,32px) rotate(-19deg); filter:drop-shadow(0 0 7px rgba(56,204,233,.48)); }
.scene-report-node { position:absolute; top:28%; right:22%; width:9px; height:9px; border-radius:50%; background:#68e8f3; box-shadow:0 0 20px #41dcf2; animation:path-signal-pulse 1.9s ease-in-out infinite; }

/* Stage 3: events crossing a dimensional API gateway. */
.scene-api .scene-ring-a { width:min(76%,500px); border-color:rgba(37,194,224,.25); transform:rotateX(72deg) rotateZ(18deg); }
.scene-api .scene-ring-b { width:min(56%,370px); border-color:rgba(144,105,240,.3); transform:rotateY(62deg) rotateZ(-20deg); }
.scene-api .scene-ring-c { width:min(38%,255px); border-color:rgba(58,224,205,.24); }
.scene-api-lane { position:absolute; z-index:1; width:63%; height:1px; transform-style:preserve-3d; background:linear-gradient(90deg,transparent,rgba(77,214,234,.72),transparent); filter:drop-shadow(0 0 6px rgba(76,213,237,.7)); }
.scene-api-lane-a { transform:translate3d(-4%,0,14px) rotate(-15deg); }.scene-api-lane-b { transform:translate3d(3%,5%,48px) rotate(11deg); background:linear-gradient(90deg,transparent,rgba(159,124,249,.7),transparent); }.scene-api-lane-c { width:44%; transform:translate3d(4%,-12%,86px) rotate(34deg); background:linear-gradient(90deg,transparent,rgba(67,224,202,.66),transparent); }
.scene-api-packet { position:absolute; z-index:3; width:13px; height:13px; border:1px solid #afffff; border-radius:4px; background:#39dbea; box-shadow:0 0 12px #45e3f0,0 0 30px rgba(41,211,233,.72); transform:rotate(45deg) translateZ(82px); animation:path-packet-a 4.2s ease-in-out infinite; }
.scene-api-packet-a { top:38%; left:15%; }.scene-api-packet-b { top:60%; left:25%; animation-delay:-1.4s; background:#ab94ff; box-shadow:0 0 12px #9d8cff,0 0 30px rgba(141,117,241,.65); animation-name:path-packet-b; }.scene-api-packet-c { top:26%; left:34%; animation-delay:-2.7s; background:#69f2d1; box-shadow:0 0 12px #69f2d1,0 0 30px rgba(73,235,195,.6); animation-name:path-packet-c; }
.scene-api-gateway { position:relative; z-index:4; display:grid; place-items:center; width:clamp(168px,25%,260px); aspect-ratio:1; border:1px solid rgba(78,220,235,.55); border-radius:26px; background:linear-gradient(145deg,rgba(16,44,64,.94),rgba(9,18,33,.97)); box-shadow:0 28px 72px rgba(0,0,0,.47),0 0 48px rgba(20,195,222,.22),inset 0 0 35px rgba(48,184,210,.1); transform:translateZ(105px) rotateY(-18deg) rotateX(9deg); animation:path-gateway-breathe 5.4s ease-in-out infinite; }
.scene-gateway-face { position:absolute; inset:13px; border:1px solid rgba(65,200,229,.32); border-radius:20px; transform:translateZ(19px); }.scene-gateway-face:nth-child(2) { inset:30px; border-color:rgba(142,119,244,.38); transform:translateZ(38px) rotateY(12deg); }.scene-gateway-face:nth-child(3) { inset:48px; border-color:rgba(80,236,209,.42); transform:translateZ(57px) rotateY(-12deg); }
.scene-api-gateway>b { z-index:2; color:#e0fbff; font:900 2rem var(--font-mono); letter-spacing:.16em; text-shadow:0 0 18px rgba(71,222,244,.75); }.scene-api-gateway>small { position:absolute; bottom:17%; color:#75bdcf; font:700 .48rem var(--font-mono); letter-spacing:.2em; }.scene-api-base { position:absolute; bottom:17%; width:39%; height:14%; border:1px solid rgba(56,209,226,.31); border-radius:50%; background:radial-gradient(ellipse,rgba(29,194,219,.24),transparent 70%); transform:translateZ(28px) rotateX(72deg); filter:blur(1px); }

/* Stage 4: received events combine into an aggregate view. */
.scene-summary .scene-ring-a { width:min(75%,500px); border-color:rgba(135,112,238,.24); transform:rotateX(67deg) rotateZ(-12deg); }
.scene-summary .scene-ring-b { width:min(58%,380px); border-color:rgba(48,208,197,.23); transform:rotateY(66deg) rotateZ(26deg); }
.scene-summary-orbit { position:absolute; z-index:3; width:70%; height:55%; transform-style:preserve-3d; transform:rotateX(64deg) rotateZ(-17deg); animation:path-orbit-rock 10s ease-in-out infinite alternate; }
.scene-summary-orbit i { position:absolute; width:9px; height:9px; border-radius:50%; background:#65eee3; box-shadow:0 0 18px #48e7db,0 0 44px rgba(42,218,206,.56); animation:path-signal-pulse 2.2s ease-in-out infinite; }
.scene-summary-orbit i:nth-child(1) { top:0; left:50%; }.scene-summary-orbit i:nth-child(2) { top:20%; right:5%; animation-delay:-.4s; }.scene-summary-orbit i:nth-child(3) { right:12%; bottom:7%; animation-delay:-.8s; }.scene-summary-orbit i:nth-child(4) { bottom:0; left:48%; animation-delay:-1.2s; }.scene-summary-orbit i:nth-child(5) { bottom:22%; left:2%; animation-delay:-1.6s; }.scene-summary-orbit i:nth-child(6) { top:19%; left:7%; animation-delay:-2s; }
.scene-summary-chart { position:relative; z-index:4; display:flex; width:clamp(220px,42%,440px); height:clamp(170px,37%,290px); flex-direction:column; justify-content:flex-end; gap:19px; padding:24px 27px 34px; border:1px solid rgba(76,217,221,.45); border-radius:22px; background:linear-gradient(145deg,rgba(8,40,49,.94),rgba(9,20,34,.96)); box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 48px rgba(44,221,200,.19),inset 0 0 30px rgba(41,199,198,.1); transform:translateZ(95px) rotateY(8deg) rotateX(4deg); animation:path-chart-hover 6s ease-in-out infinite; }
.scene-chart-label { color:#8be9df; font:700 .51rem var(--font-mono); letter-spacing:.16em; text-align:center; }
.scene-chart-bars { display:flex; height:72%; align-items:flex-end; justify-content:center; gap:clamp(7px,1.1vw,15px); padding:0 4px; }
.scene-chart-bars i { width:clamp(9px,1.3vw,18px); height:var(--path-bar-height,48%); border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#70eee0 0%,#26b4bb 65%,#176a89 100%); box-shadow:0 0 17px rgba(51,222,213,.25); transform-origin:bottom; animation:path-bar-rise 2.5s ease-in-out infinite alternate; }
.scene-chart-bars i:nth-child(1){--path-bar-height:44%;animation-delay:-.1s}.scene-chart-bars i:nth-child(2){--path-bar-height:72%;animation-delay:-.8s}.scene-chart-bars i:nth-child(3){--path-bar-height:58%;animation-delay:-1.3s}.scene-chart-bars i:nth-child(4){--path-bar-height:88%;animation-delay:-.4s}.scene-chart-bars i:nth-child(5){--path-bar-height:62%;animation-delay:-1.6s}.scene-chart-bars i:nth-child(6){--path-bar-height:79%;animation-delay:-1s}.scene-chart-bars i:nth-child(7){--path-bar-height:49%;animation-delay:-.6s}
.scene-chart-floor { position:absolute; right:12%; bottom:18%; left:12%; height:1px; background:linear-gradient(90deg,transparent,rgba(105,232,220,.65),transparent); box-shadow:0 0 14px rgba(61,230,218,.43); }
.scene-summary-ray { position:absolute; z-index:2; width:57%; height:1px; background:linear-gradient(90deg,transparent,rgba(75,220,203,.65),transparent); transform:translateZ(25px) rotate(24deg); }.scene-summary-ray-a { left:6%; top:48%; }.scene-summary-ray-b { right:5%; bottom:35%; transform:translateZ(36px) rotate(-28deg); background:linear-gradient(90deg,transparent,rgba(160,126,244,.65),transparent); }
.scene-summary-node { position:absolute; z-index:3; width:7px; height:7px; border-radius:50%; background:#60e4e2; box-shadow:0 0 15px #60e4e2; animation:path-signal-pulse 2.6s ease-in-out infinite; }.scene-summary-node-a { top:25%; left:22%; }.scene-summary-node-b { right:19%; top:27%; animation-delay:-.9s; }.scene-summary-node-c { right:26%; bottom:22%; animation-delay:-1.8s; }

/* Stage 5: the iOS log is shown behind an on-device boundary. */
.scene-ios .scene-ring-a { width:min(65%,430px); border-color:rgba(157,123,246,.3); transform:rotateX(59deg) rotateZ(17deg); }.scene-ios .scene-ring-b { width:min(48%,315px); border-color:rgba(51,185,227,.23); }
.scene-ios-phone { min-height:350px; transform:translate3d(-9%,0,80px) rotateY(13deg) rotateX(4deg); animation:path-phone-tilt-reverse 8.8s ease-in-out infinite; border-color:rgba(167,131,244,.49); box-shadow:0 26px 68px rgba(0,0,0,.47),inset 0 0 0 5px rgba(215,191,255,.04),0 0 34px rgba(139,102,237,.18); }
.scene-ios-notch { position:absolute; top:10px; left:50%; width:54px; height:13px; border-radius:10px; background:#070d17; box-shadow:inset 0 1px rgba(255,255,255,.08); transform:translateX(-50%); }
.scene-ios-phone>span { color:#bea5fb; font-size:.48rem; }
.scene-log-line { display:block; width:100%; height:7px; border-radius:6px; background:linear-gradient(90deg,rgba(173,142,255,.74),rgba(90,146,211,.26)); box-shadow:0 0 10px rgba(141,115,230,.14); animation:path-line-glow 3.4s ease-in-out infinite alternate; }.scene-log-line.l-1 { width:86%; }.scene-log-line.l-2 { width:62%; animation-delay:-1s; }.scene-log-line.l-3 { width:77%; animation-delay:-.5s; }.scene-log-line.l-4 { width:54%; animation-delay:-1.6s; }.scene-log-line.l-5 { width:71%; animation-delay:-.8s; }
.scene-ios-phone>small { color:#b8a5ed; }
.scene-ios-boundary { position:absolute; z-index:4; top:14%; right:23%; width:2px; height:72%; background:linear-gradient(transparent,rgba(163,129,255,.82) 20%,rgba(163,129,255,.82) 80%,transparent); box-shadow:0 0 18px rgba(149,118,251,.8); transform:translateZ(124px); }
.scene-ios-route { position:absolute; z-index:2; right:10%; width:30%; height:1px; background:linear-gradient(90deg,rgba(163,128,249,.76),transparent); transform:translateZ(97px) rotate(11deg); }.scene-ios-stop { position:absolute; z-index:5; top:44%; right:17%; display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(202,159,255,.7); border-radius:50%; background:rgba(36,22,57,.92); color:#d7bcff; font:700 1rem var(--font-mono); box-shadow:0 0 20px rgba(172,129,255,.38); transform:translateZ(135px); }
.scene-ios-node { position:absolute; z-index:3; width:7px; height:7px; border-radius:50%; background:#bea2ff; box-shadow:0 0 16px #a885ff; animation:path-signal-pulse 2.2s ease-in-out infinite; }.scene-ios-node-a { left:19%; top:34%; }.scene-ios-node-b { left:25%; bottom:29%; animation-delay:-1.2s; }

@keyframes path-scene-arrive { from { opacity:0; clip-path:inset(8% 0 6% 12% round 26px); transform:translate3d(5vw,14px,0) rotateY(-5deg) scale(.985); } to { opacity:1; clip-path:inset(0 round 0); transform:translate3d(0,0,0) rotateY(0) scale(1); } }
@keyframes path-scene-arrive-reverse { from { opacity:0; clip-path:inset(8% 12% 6% 0 round 26px); transform:translate3d(-5vw,14px,0) rotateY(5deg) scale(.985); } to { opacity:1; clip-path:inset(0 round 0); transform:translate3d(0,0,0) rotateY(0) scale(1); } }
@keyframes path-copy-arrive-left { from { opacity:0; transform:translate3d(-30px,8px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes path-copy-arrive-right { from { opacity:0; transform:translate3d(30px,8px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes path-ring-turn { to { transform:rotateX(64deg) rotateZ(360deg); } }
@keyframes path-ring-turn-reverse { to { transform:rotateX(66deg) rotateZ(-338deg); } }
@keyframes path-ring-flip { 50% { transform:rotateY(70deg) rotateZ(22deg) translateZ(20px); } }
@keyframes path-signal-pulse { 50% { opacity:.34; transform:scale(.7); box-shadow:0 0 8px currentColor; } }
@keyframes path-permission-float { 50% { transform:translate3d(0,-9px,72px) rotateY(-4deg) rotateX(2deg); } }
@keyframes path-toggle-pulse { 50% { box-shadow:0 0 22px rgba(72,239,192,.9); } }
@keyframes path-shield-float { 50% { transform:translate3d(0,-12px,118px) rotateY(25deg) rotateZ(4deg); } }
@keyframes path-shard-drift { 50% { margin-top:-14px; transform:translateZ(88px) rotate(47deg); opacity:.64; } }
@keyframes path-phone-tilt { 50% { transform:translate3d(-5%, -7px, 85px) rotateY(-9deg) rotateX(1deg); } }
@keyframes path-phone-tilt-reverse { 50% { transform:translate3d(-12%, -7px, 88px) rotateY(8deg) rotateX(1deg); } }
@keyframes path-line-glow { to { filter:brightness(.68); opacity:.58; } }
@keyframes path-chip-a { 50% { transform:translate3d(7px,-11px,142px) rotateY(-7deg); } }
@keyframes path-chip-b { 50% { transform:translate3d(-8px,9px,135px) rotateY(6deg); } }
@keyframes path-packet-a { 50% { transform:translate3d(185px,43px,95px) rotate(225deg) scale(1.2); opacity:.38; } }
@keyframes path-packet-b { 50% { transform:translate3d(150px,-44px,110px) rotate(230deg) scale(.72); opacity:.5; } }
@keyframes path-packet-c { 50% { transform:translate3d(120px,70px,95px) rotate(225deg) scale(1.15); opacity:.4; } }
@keyframes path-gateway-breathe { 50% { transform:translateZ(118px) rotateY(-13deg) rotateX(5deg); box-shadow:0 32px 82px rgba(0,0,0,.42),0 0 66px rgba(20,195,222,.32),inset 0 0 42px rgba(48,184,210,.14); } }
@keyframes path-orbit-rock { to { transform:rotateX(72deg) rotateZ(7deg) translateZ(15px); } }
@keyframes path-chart-hover { 50% { transform:translate3d(0,-8px,108px) rotateY(4deg) rotateX(1deg); } }
@keyframes path-bar-rise { to { transform:scaleY(.72); filter:brightness(.78); } }

/* Shrink both brand marks and make the hover/focus page preview a compact popover. */
.top-navbar:not(.navbar-hidden) .nav-island-inner { grid-template-columns:170px minmax(0,1fr) 0; gap:clamp(9px,1vw,16px); }
.top-navbar:not(.navbar-hidden) .brand-badge-clean { width:170px; height:56px; padding:5px 9px; border-radius:18px; }
.top-navbar:not(.navbar-hidden) .main-nav-menu { height:52px; }
.top-navbar:not(.navbar-hidden) .nav-page-btn { height:42px; }
.top-navbar .brand-badge-clean,.top-navbar .main-nav-menu {
  flex:0 1 auto;
  min-width:0;
  opacity:1;
  visibility:visible;
  transition:width .38s cubic-bezier(.16,1,.3,1),max-width .38s cubic-bezier(.16,1,.3,1),min-width .38s cubic-bezier(.16,1,.3,1),height .34s cubic-bezier(.16,1,.3,1),padding .34s cubic-bezier(.16,1,.3,1),flex-basis .38s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1),border-width .3s ease,visibility 0s;
  will-change:width,max-width,opacity,transform;
}
.top-navbar .main-nav-menu { transform-origin:top center; }
.top-navbar.navbar-hidden .nav-island-inner { display:flex; width:0; max-width:0; gap:0; justify-content:flex-end; overflow:visible; }
.top-navbar.navbar-hidden .brand-badge-clean {
  flex:0 0 0;
  width:0;
  min-width:0;
  max-width:0;
  height:0;
  padding:0;
  border-width:0;
  opacity:0;
  visibility:hidden;
  transform:translate3d(-17px,-6px,0) scale(.97);
  pointer-events:none;
  transition-delay:0s,0s,0s,0s,0s,0s,0s,0s,0s,.38s;
}
.top-navbar.navbar-hidden .main-nav-menu {
  flex:0 0 0;
  width:0;
  min-width:0;
  max-width:0;
  height:0;
  padding:0;
  border-width:0;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,-8px,0) scale(.985);
  pointer-events:none;
  transition-delay:0s,0s,0s,0s,0s,0s,0s,0s,0s,.38s;
}
.top-navbar.navbar-hidden .header-menu-pill { display:flex; }
.nav-page-preview { width:min(360px,calc(100vw - 28px)); }
.nav-preview-window { border-radius:15px; }
.nav-preview-topbar { height:30px; gap:9px; padding-inline:11px; }
.nav-preview-canvas { height:200px; }
.nav-preview-caption { min-height:54px; gap:10px; padding:8px 12px 9px; }
.nav-preview-caption strong { font-size:12px; }
.nav-preview-caption em { font-size:8px; }
.nav-preview-arrow { flex-basis:23px; width:23px; height:23px; }
.app-footer .footer-center-brand { width:min(210px,calc(100vw - 36px)); min-height:68px; }
.app-footer .footer-lockup { flex:0 1 195px; width:min(195px,64vw); max-height:84px; }
.app-footer .footer-lockup img { max-height:84px; }
.footer-center-brand:hover { transform:translateY(-1px) scale(1.025); }

@media (max-width:1100px) {
  .top-navbar:not(.navbar-hidden) .nav-island-inner { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:50px 46px; gap:6px 9px; }
  .top-navbar:not(.navbar-hidden) .brand-badge-clean { width:min(184px,45vw); height:50px; }
  .top-navbar:not(.navbar-hidden) .main-nav-menu { height:46px; }
  .top-navbar:not(.navbar-hidden) .nav-page-btn { height:38px; }
  .top-navbar.navbar-hidden .nav-island-inner { display:flex; grid-template-columns:none; grid-template-rows:none; }
  .top-navbar.navbar-hidden .brand-badge-clean,.top-navbar.navbar-hidden .main-nav-menu { height:0; }
  .data-path-story { width:calc(100% - 32px); }
  .path-card-shell { grid-template-columns:minmax(230px,.86fr) minmax(0,1.14fr); }
  .path-card-copy { padding:clamp(28px,4.2vw,50px); }
}
@media (max-width:700px) {
  .data-path-story { width:calc(100% - 24px); padding-top:64px; }
  .data-path-story-heading { display:block; margin-bottom:30px; padding:0 8px; }
  .data-path-story-kicker { margin-bottom:15px; font-size:.59rem; letter-spacing:.13em; }
  .data-path-story-heading h2 { max-width:12ch; font-size:clamp(36px,10vw,58px); }
  .data-path-story-heading p { margin-top:15px; font-size:14px; }
  .data-path-progress { display:none; }
  .data-path-stack { padding-bottom:66svh; }
  .data-path-card { top:var(--path-mobile-pin,114px); margin-bottom:clamp(130px,22svh,220px); }
  .data-path-card:nth-child(1) { --path-pin-top:114px;--path-mobile-pin:114px; }
  .data-path-card:nth-child(2) { --path-pin-top:122px;--path-mobile-pin:122px; }
  .data-path-card:nth-child(3) { --path-pin-top:130px;--path-mobile-pin:130px; }
  .data-path-card:nth-child(4) { --path-pin-top:138px;--path-mobile-pin:138px; }
  .data-path-card:nth-child(5) { --path-pin-top:146px;--path-mobile-pin:146px; }
  .path-card-shell { display:flex; min-height:0; flex-direction:column; border-radius:23px; }
  .path-card-copy { padding:24px 22px 20px; }
  .path-card-overline { gap:8px; font-size:.56rem; }
  .path-card-overline span:first-child { width:30px; height:30px; }
  .path-card-copy h3 { max-width:15ch; margin:21px 0 11px; font-size:clamp(30px,8.1vw,44px); }
  .path-card-copy p { font-size:14px; line-height:1.58; }
  .path-card-footnote { margin-top:18px; font-size:.48rem; }
  .path-card-visual { min-height:0; height:clamp(275px,41svh,380px); border-top:1px solid rgba(134,175,197,.1); border-left:0; }
  .scene-permission-card { width:62%; min-width:0; gap:13px; padding:18px; }
  .scene-permission-card>b { font-size:.85rem; }
  .scene-consent-shield { top:19%; right:15%; width:58px; height:66px; }
  .scene-report-phone,.scene-ios-phone { width:clamp(152px,46%,195px); min-width:0; height:78%; min-height:0; padding:31px 17px 17px; gap:12px; }
  .scene-report-chip { gap:7px; padding:10px 12px; font-size:.47rem; }
  .scene-report-chip-a { left:7%; }.scene-report-chip-b { right:6%; }
  .scene-api-gateway { width:clamp(150px,45%,220px); }
  .scene-summary-chart { width:min(70%,340px); height:67%; padding:18px 18px 27px; }
  .scene-ios-phone { min-height:0; }
  .scene-ios-boundary { right:18%; }
  .scene-ios-route { right:5%; width:27%; }
  .scene-ios-stop { right:11%; }
  .top-navbar:not(.navbar-hidden) .nav-island-inner { grid-template-columns:minmax(94px,auto) minmax(0,1fr) 0; grid-template-rows:46px 44px; gap:5px 7px; }
  .top-navbar:not(.navbar-hidden) .brand-badge-clean { width:min(116px,34vw); height:44px; padding:3px 6px; border-radius:13px; }
  .top-navbar:not(.navbar-hidden) .main-nav-menu { height:44px; }
  .top-navbar:not(.navbar-hidden) .nav-page-btn { height:36px; }
  .top-navbar.navbar-hidden .nav-island-inner { display:flex; width:0; }
}
@media (max-width:430px) {
  .top-navbar:not(.navbar-hidden) .nav-island-inner { grid-template-columns:minmax(84px,auto) minmax(0,1fr) 0; }
  .top-navbar:not(.navbar-hidden) .brand-badge-clean { width:min(100px,28vw); height:42px; }
  .top-navbar:not(.navbar-hidden) .nav-page-btn { padding-inline:8px; font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce) {
  .data-path-story *, .data-path-story::before { animation:none !important; scroll-behavior:auto !important; }
  .data-path-card:not(.is-entered) .path-card-shell,.data-path-card:not(.is-entered) .path-scene-stage { opacity:1 !important; clip-path:none !important; transform:none !important; }
  .path-card-shell { transform:none !important; filter:none !important; }
  .scene-ring,.scene-signal,.scene-permission-card,.scene-consent-shield,.scene-shard,.scene-toggle i,.scene-report-phone,.scene-report-chip,.scene-api-packet,.scene-api-gateway,.scene-summary-orbit,.scene-summary-chart,.scene-chart-bars i,.scene-ios-phone,.scene-log-line,.scene-ios-node { animation:none !important; }
  .top-navbar .brand-badge-clean,.top-navbar .main-nav-menu { transition-duration:.01ms; }
}

/* Light surfaces keep editorial copy readable while the procedural scene windows stay dark. */
body.theme-light .xylen-story-expansion { --story-line:rgba(30,93,117,.18); --story-muted:#536978; }
body.theme-light .story-section {
  border-color:rgba(29,99,125,.17);
  background:radial-gradient(ellipse at 100% 0,rgba(27,147,180,.08),transparent 43%),linear-gradient(135deg,rgba(250,253,254,.98),rgba(240,247,249,.98));
  box-shadow:0 25px 68px rgba(28,71,88,.09);
}
body.theme-light .story-section::before { opacity:.62; }
body.theme-light .story-section::after { border-color:rgba(27,125,155,.1); box-shadow:0 0 0 26px rgba(27,125,155,.025),0 0 0 70px rgba(27,125,155,.018); }
body.theme-light .story-heading h2,body.theme-light .story-cta h2 { color:#172b38; }
body.theme-light .story-heading>p { border-left-color:rgba(14,119,153,.3); color:#536978; }
body.theme-light .story-eyebrow,body.theme-light .story-step-no,body.theme-light .access-card>span,body.theme-light .story-faq-item summary>span { color:#087b9f; }
body.theme-light .story-route::before { background:linear-gradient(90deg,rgba(14,146,172,.4),rgba(95,120,205,.25) 58%,rgba(125,99,193,.18)); }
body.theme-light .story-step-no { border-color:rgba(8,126,165,.34); background:radial-gradient(circle at 35% 25%,#f6fdff,#eaf6f8 72%); box-shadow:0 0 0 7px rgba(29,141,169,.035),0 0 25px rgba(37,147,176,.1); }
body.theme-light .story-step-no::after { border-color:rgba(8,126,165,.2); }
body.theme-light .story-step-line { background:linear-gradient(90deg,rgba(14,146,172,.48),rgba(14,146,172,.05)); }
body.theme-light .story-step h3,body.theme-light .boundary-card h3,body.theme-light .access-card h3,body.theme-light .story-faq-item summary { color:#1a2d39; }
body.theme-light .story-step p,body.theme-light .boundary-card li,body.theme-light .access-card p,body.theme-light .story-faq-item>p,body.theme-light .story-cta p { color:#536978; }
body.theme-light .story-caption { border-color:rgba(29,99,125,.16); color:#536978; background:rgba(255,255,255,.8); }
body.theme-light .boundary-card { border-color:rgba(29,99,125,.17); background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(239,247,249,.9)); box-shadow:0 12px 32px rgba(30,72,90,.055); }
body.theme-light .boundary-card::before { opacity:.28; background-image:linear-gradient(115deg,transparent 0 42%,rgba(36,138,164,.08) 49%,transparent 56%),linear-gradient(rgba(35,124,147,.045) 1px,transparent 1px); }
body.theme-light .boundary-private { border-color:rgba(112,91,186,.2); background:linear-gradient(145deg,rgba(246,243,253,.98),rgba(255,255,255,.94)); }
body.theme-light .boundary-symbol { border-color:rgba(8,126,165,.22); background:rgba(8,126,165,.055); }
body.theme-light .boundary-private .boundary-symbol { border-color:rgba(112,91,186,.25); background:rgba(112,91,186,.06); }
body.theme-light .story-faq-list,body.theme-light .story-faq-item { border-color:rgba(29,99,125,.17); }
body.theme-light .story-faq-item summary i::before,body.theme-light .story-faq-item summary i::after { background:#087b9f; }
body.theme-light .story-cta { border-color:rgba(23,129,158,.24); background:radial-gradient(ellipse at 0 100%,rgba(18,151,177,.1),transparent 55%),linear-gradient(120deg,#eef8fa,#f7f8fc 70%,#f4f1fb); box-shadow:0 18px 48px rgba(32,70,87,.08); }

body.theme-light .data-path-story-kicker { color:#526d7c; }
body.theme-light .data-path-story-heading h2 { color:#172a37; }
body.theme-light .data-path-story-heading p { color:#526777; }
body.theme-light .data-path-progress { border-color:rgba(36,102,127,.18); background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(239,247,249,.94)); box-shadow:0 14px 36px rgba(35,75,91,.08); }
body.theme-light .data-path-progress-label,body.theme-light .data-path-progress-count { color:#526a79; }
body.theme-light .data-path-progress-count b { color:#087f9f; }
body.theme-light .data-path-progress-count i { color:#8a9ba4; }
body.theme-light .data-path-progress-track i { background:rgba(47,99,119,.16); }
body.theme-light .path-card-shell {
  border-color:rgba(34,101,126,.19);
  background:linear-gradient(112deg,#fbfdfe,#f1f7f9 54%,#f8f6fc);
  box-shadow:0 36px 88px rgba(27,66,82,.16),inset 0 1px rgba(255,255,255,.9),0 0 60px rgba(0,124,159,.045);
}
body.theme-light .path-card-shell::before { opacity:.38; background:linear-gradient(115deg,transparent 18%,rgba(22,145,174,.06) 48%,transparent 72%),radial-gradient(ellipse at 3% 100%,rgba(8,158,132,.055),transparent 42%); }
body.theme-light .path-card-shell::after { background:linear-gradient(90deg,transparent,rgba(8,126,165,.1),transparent); }
body.theme-light .path-card-overline { color:#526d7c; }
body.theme-light .path-card-overline span:first-child { border-color:rgba(8,126,165,.34); color:#087b9f; box-shadow:inset 0 0 18px rgba(32,150,177,.055),0 0 15px rgba(28,138,166,.055); }
body.theme-light .path-card-overline i { background:linear-gradient(90deg,rgba(8,126,165,.5),rgba(8,126,165,0)); }
body.theme-light .path-card-copy h3 { color:#172b38; }
body.theme-light .path-card-copy p { color:#506675; }
body.theme-light .path-card-footnote { color:#536f7f; }
body.theme-light .data-path-card:nth-child(even) .path-card-visual { border-right-color:rgba(134,175,197,.1); }
body.theme-light .path-card-visual { border-left-color:rgba(134,175,197,.1); }

body.theme-light .nav-page-preview .nav-preview-caption,
body.theme-light .nav-page-preview .nav-preview-hint { border-color:rgba(31,93,116,.16); color:#3d5665; background:rgba(250,253,254,.96); box-shadow:0 12px 34px rgba(28,63,78,.13); }
body.theme-light .nav-page-preview .nav-preview-hint { color:#526a78; }
body.theme-light .nav-page-preview .nav-preview-arrow { color:#087ea5; }
body.theme-light .motion-card { border-color:rgba(31,102,129,.18); }
body.theme-light .motion-card-footer { color:#20313e; }