/* Capital Catalyst - engine additions
   - the canvas fades in once the first view is drawn (html.cc-wait until then)
   - a skipped elevator never shows (.intro.skip, set by the inline script after #intro)
   - plain mode (html.plain): no 3D (WebGL missing, failed, or the GPU context lost for good). The nine panels become an
     ordinary scrolling page on a still gradient in the current theme. The same rules, unscoped, sit in index.html's
     <noscript> block for visitors without JavaScript: keep the two in step. */
#gl { transition: opacity .6s ease; }
html.cc-wait #gl { opacity: 0; }
.intro.skip { display: none; }

html.plain, html.plain body { height: auto; overflow: visible; overflow-x: hidden; overscroll-behavior: auto; }
html.plain body { min-height: 100vh; touch-action: auto; background: linear-gradient(180deg, #7d9cba 0%, #a9bed2 40%, #dfe7ee 100%) fixed; }
html.plain body.golden { background: linear-gradient(180deg, #8d6f86 0%, #d79a6c 42%, #f3dcc0 100%) fixed; }
html.plain body.night { background: linear-gradient(180deg, #04060a 0%, #0a111c 50%, #13203a 100%) fixed; }
/* the future city in plain mode: the theme's skyline, faint, at the foot of the page (not with ?future=0) */
html.plain:not(.no-future) body.day { background: linear-gradient(180deg, rgba(125,156,186,.92), rgba(223,231,238,.82)), url(../img/future/skyline-day.webp) center bottom / cover no-repeat fixed, #a9bed2; }
html.plain:not(.no-future) body.golden { background: linear-gradient(180deg, rgba(141,111,134,.9), rgba(243,220,192,.8)), url(../img/future/skyline-golden.webp) center bottom / cover no-repeat fixed, #d79a6c; }
html.plain:not(.no-future) body.night { background: linear-gradient(180deg, rgba(4,6,10,.9), rgba(10,17,28,.72)), url(../img/future/skyline-night.webp) center bottom / cover no-repeat fixed, #0a111c; }
html.plain #gl, html.plain .intro, html.plain .cue, html.plain .floors, html.plain .pager, html.plain .arrows, html.plain .speedlines { display: none !important; }
html.plain .topbar { background: var(--glass); border-bottom: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
html.plain .skymark { position: relative; justify-content: center; padding: 112px 16px 4px; transform: none !important; opacity: 1 !important; }
html.plain #panels { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 16px 80px; }
html.plain .panel { position: relative; left: auto; top: auto; max-width: 100%; max-height: none; overflow: visible; will-change: auto;
  transform: none !important; opacity: 1 !important; visibility: visible !important; }
html.plain .panel.split { width: min(1120px, 100%); }
html.plain .panel > *, html.plain .panel.split .story > * { opacity: 1; transform: none; filter: none; }
@media (max-width: 760px) {
  html.plain .skymark { padding-top: 88px; }
  html.plain .skymark .logo { width: 40px; height: 40px; }
  html.plain .skymark span { font-size: 26px; }
  html.plain #panels { gap: 22px; padding-top: 22px; }
}