/* Deep charcoal ground from the brand board, with the gold and turquoise threads. */
:root{--night:#171717;--deep:#1C1C1C;--panel:#212121;--panel2:#2B2B2B;--mist:#BAB6AE;--line:rgba(243,238,227,.11)}
html,body{background:#171717}
body{background:radial-gradient(120% 55% at 50% -12%,#2A2622 0,#171717 58%) fixed}
.flow-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.demobar,.offline{position:relative;z-index:1}
.top{z-index:5;background:rgba(23,23,23,.86)}
.tabs{position:fixed;z-index:5;background:rgba(19,19,19,.94);backdrop-filter:blur(8px)}
.card{background:rgba(33,33,33,.9)}
.flow-hero{position:absolute;left:0;right:0;top:0;width:100%;height:330px;z-index:1;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 52%,transparent 68%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 52%,transparent 68%)}
.xhero>.cap{position:relative;z-index:2}
.flow-splash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.splash>*:not(canvas){position:relative;z-index:1}
.xhero h1 .acc{font-size:44px}
@media (min-width:700px){.xhero h1 .acc{font-size:56px}}
@media (prefers-reduced-motion:reduce){.flow-hero{opacity:.8}}