/* =========================================================================
   Cosmix homepage — home.v1.css
   The only stylesheet on cosmix.click. Self-hosted, no external request.
   Order: fonts, tokens, reset, type, stage, bar, hero, beats, controls,
          responsive, reduced-motion, contrast.
   Contract: design/HOMEPAGE-DIRECTION.md + design/HOMEPAGE-PLAN.md §3.
   ========================================================================= */

/* -------------------------------------------------------------- 1. fonts */

@font-face{
  font-family:"Fraunces";
  src:url(/assets/fonts/Fraunces-display-latin.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url(/assets/fonts/PlusJakartaSans-var-latin.woff2) format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url(/assets/fonts/IBMPlexMono-400-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url(/assets/fonts/IBMPlexMono-500-latin.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap
}
/* metric-matched fallbacks. local() makes no network request — CSP-clean. */
@font-face{
  font-family:"Jakarta Fallback";src:local("Arial");
  size-adjust:104%;ascent-override:96%;descent-override:24%;line-gap-override:0%
}
@font-face{
  /* Courier New is absent on most Linux desktops, where the face then reports
     `error` and the metric match silently does not exist. */
  font-family:"Plex Fallback";
  src:local("Courier New"),local("Liberation Mono"),local("DejaVu Sans Mono"),local("Nimbus Mono PS");
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%
}

/* ------------------------------------------------------------- 2. tokens */

:root{
  /* surfaces + ink — the dashboard dark ramp, verbatim */
  --void:#08070C;
  --s-0:#0C0A12;
  --s-1:#131019;
  --s-2:#191622;
  --line-1:#221E2B;
  --line-2:#2C2736;
  --line-3:#3A3446;
  --text-display:#FCF9F3;
  --text-1:#F0ECE4;
  --text-2:#B9B2A8;
  --text-3:#8B8479;
  --accent:#4C82FF;

  /* the cosmos — light, never a component background */
  --glow-indigo:#0B0420;
  --glow-violet:#170A35;
  --aurora-1:#00BCEA;
  --aurora-2:#3877FF;
  --aurora-3:#A329E8;
  --spark:#FF8A68;

  /* type */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Plus Jakarta Sans","Jakarta Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Plex Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --h-mark:clamp(3rem, min(12vw, 21dvh), 10.5rem);
  --h-hero:clamp(1.45rem, 3.4vw, 2.75rem);
  --h-beat:clamp(1.75rem, 4.6vw, 3.5rem);
  --t-lead:clamp(0.9375rem, 1.15vw, 1.125rem);
  --t-ui:15px;
  --track-micro:.18em;

  /* geometry */
  --pad:clamp(20px, 4vw, 64px);
  --sp-5:12px;
  --sp-7:24px;
  --sp-9:48px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* motion — the dashboard system, no new tier */
  --ease-settle:cubic-bezier(0.33, 1, 0.68, 1);
  --ease-glide:cubic-bezier(0.19, 1, 0.22, 1);
  --ease-travel:cubic-bezier(0.65, 0, 0.35, 1);
  --t-0:90ms;
  --t-1:140ms;
  --t-2:220ms;
  --t-3:420ms;
  --t-4:900ms;
  --t-amb:90s;
}

/* -------------------------------------------------- 3. reset + document */

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  accent-color:var(--accent);
  background:var(--void);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--void);
  color:var(--text-1);
  font:400 16px/1.55 var(--font-sans);
  letter-spacing:-.003em;
  text-wrap:pretty;
  overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,p{margin:0}
::selection{background:rgba(76,130,255,.28);color:var(--text-display)}

/* ---------------------------------------------------------- 4. type */

.cx-mark,.cx-hero__line,.cx-beat__h{
  font-family:var(--font-display);
  font-weight:500;
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1
}

.cx-mark{
  font-size:var(--h-mark);
  line-height:.92;
  letter-spacing:-.035em;
  color:var(--text-display);
  text-shadow:0 0 32px rgba(163,41,232,.34), 0 0 96px rgba(56,119,255,.18)
}

.cx-hero__line{
  font-size:var(--h-hero);
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--text-display);
  text-shadow:0 0 32px rgba(163,41,232,.34), 0 0 96px rgba(56,119,255,.18);
  max-inline-size:22ch
}

.cx-beat__h{
  font-size:var(--h-beat);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text-1);
  max-inline-size:18ch
}

.cx-spark{color:var(--spark)}

.cx-hero__lead,.cx-beat__lead{
  font-size:var(--t-lead);
  line-height:1.55;
  letter-spacing:-.003em;
  color:var(--text-2)
}
.cx-hero__lead{max-inline-size:46ch}
.cx-beat__lead{max-inline-size:44ch}

.cx-eyebrow,.cx-kicker,.cx-index,.cx-cue__label{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  line-height:1.25;
  letter-spacing:var(--track-micro);
  text-transform:uppercase;
  color:var(--text-2)
}

.cx-foot__meta{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.06em;
  color:var(--text-3)
}

/* ---------------------------------------------------------- 5. the stage */

.cx-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}

.cx-cosmos{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 30%, rgba(23,10,53,.92) 0%, rgba(11,4,32,.70) 42%, rgba(8,7,12,0) 78%),
    radial-gradient(70% 52% at 78% 88%, rgba(56,119,255,.10) 0%, rgba(8,7,12,0) 70%),
    radial-gradient(58% 46% at 16% 12%, rgba(163,41,232,.09) 0%, rgba(8,7,12,0) 68%),
    var(--void)
}

.cx-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;
  transition:opacity var(--t-4) var(--ease-glide)
}
.cx-canvas[data-ready="1"]{opacity:1}
[data-webgl="off"] .cx-canvas{display:none}

.cx-fallback{display:none;position:absolute;inset:0}
[data-webgl="off"] .cx-fallback{display:block}
.cx-stars{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.cx-fallback-mark{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:46vmin;block-size:46vmin;
  translate:-50% -50%;
  opacity:.22
}

.cx-wash{
  position:absolute;
  inset-block-start:-8dvh;inset-inline-start:-6vw;
  inline-size:min(70vw,900px);block-size:min(60dvh,700px);
  filter:blur(90px);opacity:.06;
  background:radial-gradient(closest-side,rgba(56,119,255,.6),rgba(163,41,232,.35),transparent);
  will-change:transform;
  animation:cx-drift var(--t-amb) var(--ease-travel) infinite alternate
}
@keyframes cx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(28px,-30px,0)}}

main,.cx-bar,.cx-foot{position:relative;z-index:20}

/* ------------------------------------------------------ 6. the sticky bar */

.cx-bar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:10px max(var(--pad),env(safe-area-inset-left,0px));
  padding-block-start:calc(10px + var(--safe-t));
  background:linear-gradient(to bottom,rgba(12,10,18,.92),rgba(12,10,18,.72) 70%,rgba(12,10,18,0));
  border-block-end:1px solid transparent;
  transition:opacity var(--t-1) var(--ease-settle),
             transform var(--t-1) var(--ease-settle),
             visibility 0s linear var(--t-1)
}
.cx-bar[data-state="hidden"]{opacity:0;visibility:hidden;transform:translateY(-8px)}
.cx-bar[data-state="shown"]{
  opacity:1;visibility:visible;transform:translateY(0);
  border-block-end-color:var(--line-1);
  transition:opacity var(--t-2) var(--ease-settle),
             transform var(--t-2) var(--ease-settle),
             visibility 0s linear 0s
}
.cx-bar__brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text-1);
  font:500 var(--t-ui)/1.2 var(--font-sans);
  letter-spacing:-.01em
}
/* flex:0 0 auto on both: the reset's `img{max-width:100%}` plus a default
   flex-shrink let the bar squeeze the mark to 5px at 390 and to 0px at 360,
   so the brand vanished instead of the nav wrapping. */
.cx-bar__brand{flex:0 0 auto}
.cx-bar__brand img{flex:0 0 auto;inline-size:28px;block-size:28px;max-inline-size:none}
.cx-bar__nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);min-inline-size:0}

/* ------------------------------------------------------------- 7. hero */

.cx-hero{
  position:relative;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:calc(var(--safe-t) + 4dvh) calc(var(--safe-b) + 4dvh);
  padding-inline:max(var(--pad),env(safe-area-inset-left,0px))
}
.cx-hero > *{max-inline-size:100%}

.cx-rule{
  display:block;inline-size:40px;block-size:1px;border-radius:1px;
  background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2) 45%,var(--aurora-3));
  opacity:.55
}
.cx-eyebrow{margin-block-start:13px}
.cx-mark{margin-block-start:18px}
.cx-hero__line{margin-block-start:14px}
.cx-hero__lead{margin-block-start:14px}
.cx-cta{margin-block-start:clamp(24px,3.4dvh,40px)}
.cx-cue{margin-block-start:clamp(28px,5dvh,64px)}

/* B0 — ignition. Pure CSS, fill-mode both: no JS, no flash, works with JS off. */
@keyframes cx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cx-hero > *{animation:cx-rise var(--t-3) var(--ease-glide) both}
.cx-rule{animation-delay:120ms}
.cx-eyebrow{animation-delay:190ms}
.cx-mark{animation-delay:260ms}
.cx-hero__line{animation-delay:330ms}
.cx-hero__lead{animation-delay:400ms}
.cx-cta{animation-delay:470ms}
.cx-cue{animation-delay:900ms}

/* the copy scrim — a gradient wash, never a backdrop-filter */
.cx-hero::before,.cx-beat__body::before,.cx-close::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(12,10,18,.72),rgba(12,10,18,.34) 62%,transparent)
}
/* the hero and the close are already full-bleed: spilling them sideways would
   add scrollable overflow for no visual gain */
.cx-hero::before,.cx-close::before{inset:-6% 0}
.cx-beat__body::before{inset:-6% -8%}

/* --------------------------------------------------- 8. beats and close */

.cx-spacer{height:50lvh}

.cx-beat{
  min-height:100lvh;
  /* minmax(0,1fr) rather than the implicit `auto` track: an auto track takes its
     floor from its item's min-content and would grow past the gutter. */
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding-block:12lvh;
  padding-inline:max(var(--pad),env(safe-area-inset-left,0px))
}
.cx-beat__body{
  position:relative;
  max-inline-size:min(46ch,42vw);
  /* a grid item's automatic minimum size is min-content, and "CosmixAgent" set in
     Fraunces is wider than the track at a 160px layout viewport (320 at 200% zoom),
     which pushed 3px of glyph past the gutter */
  min-inline-size:0;
  margin-inline-end:auto
}
.cx-beat__rule{
  display:block;block-size:1px;inline-size:min(100%,320px);
  background:
    linear-gradient(90deg,rgba(0,188,234,.4) 0,rgba(56,119,255,.4) 60px,rgba(163,41,232,.4) 96px,rgba(44,39,54,0) 96px),
    var(--line-2)
}
.cx-index{margin-block-start:var(--sp-5)}
.cx-beat__h{margin-block-start:var(--sp-5)}
.cx-beat__lead{margin-block-start:var(--sp-7)}

.cx-close{
  position:relative;
  min-height:100lvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:12lvh;
  padding-inline:max(var(--pad),env(safe-area-inset-left,0px))
}
.cx-close .cx-beat__h{max-inline-size:16ch}
.cx-close .cx-cta{margin-block-start:var(--sp-9)}

.cx-foot{
  border-block-start:1px solid var(--line-1);
  padding:var(--sp-7) max(var(--pad),env(safe-area-inset-left,0px)) calc(var(--sp-7) + var(--safe-b));
  display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-9);
  justify-content:space-between;align-items:baseline;
  background:linear-gradient(to bottom,rgba(8,7,12,0),var(--void) 40%)
}
.cx-foot__nav{display:flex;flex-wrap:wrap;gap:var(--sp-7)}
.cx-foot__nav a{
  font:500 var(--t-ui)/1.2 var(--font-sans);
  color:var(--text-2);text-decoration:none;
  padding-block:8px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size var(--t-2) var(--ease-glide),
             color var(--t-1) var(--ease-settle)
}
.cx-foot__nav a:hover{background-size:100% 1px;color:var(--text-1)}

/* B5 — beat reveals. The VISIBLE state is the CSS default; the hidden start
   state is armed by home.v1.js only, so a JS-off page shows every word. */
[data-reveal="on"] .cx-beat__body > *{
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-3) var(--ease-glide),
             transform var(--t-3) var(--ease-glide)
}
[data-reveal="on"] .cx-beat__body > .cx-index{transition-delay:60ms}
[data-reveal="on"] .cx-beat__body > .cx-beat__h{transition-delay:120ms}
[data-reveal="on"] .cx-beat__body > .cx-beat__lead{transition-delay:180ms}
[data-reveal="on"] .cx-beat__body[data-in="1"] > *{opacity:1;transform:none}

/* ------------------------------------------- 9. pills, kickers, cue, focus */

.cx-cta{display:flex;flex-wrap:wrap;gap:var(--sp-7);align-items:flex-start;justify-content:center}
.cx-cta__col{display:flex;flex-direction:column;align-items:center;gap:10px}
.cx-beat .cx-cta,.cx-beat .cx-cta__col{align-items:flex-start}

.cx-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding-inline:28px;border-radius:999px;
  font:500 var(--t-ui)/1.2 var(--font-sans);
  letter-spacing:0;
  text-decoration:none;white-space:nowrap;
  border:1px solid var(--line-3);
  background:var(--s-1);color:var(--text-1);
  transition:background-color var(--t-1) var(--ease-settle),
             border-color var(--t-1) var(--ease-settle),
             color var(--t-1) var(--ease-settle),
             transform var(--t-0) var(--ease-settle)
}
.cx-pill--ghost{background:transparent;border-color:var(--line-2);color:var(--text-2)}
.cx-pill--sm{min-height:44px;padding-inline:18px}
.cx-pill:hover{background:var(--s-2);color:var(--text-1)}
.cx-pill:active{transform:scale(.98)}
.cx-pill__glyph{transition:transform var(--t-1) var(--ease-settle)}
.cx-pill:hover .cx-pill__glyph{transform:translateX(3px)}

/* the aurora gradient border — two clips, never a fill */
.cx-pill--primary{position:relative;background-clip:padding-box}
.cx-pill--primary::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1px;opacity:0;pointer-events:none;
  background:linear-gradient(48deg,#00BCEA 0%,#3877FF 45%,#A329E8 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--t-1) var(--ease-settle)
}
.cx-pill--primary:hover::after,.cx-pill--primary:focus-visible::after{opacity:1}

.cx-kicker{display:block}

.cx-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;padding-block:6px;
  transition:color var(--t-1) var(--ease-settle)
}
.cx-cue:hover .cx-cue__label{color:var(--text-1)}
.cx-cue__label{transition:color var(--t-1) var(--ease-settle)}
/* --line-2 on a 1px rail read as an invisible tick in every hero screenshot;
   --line-3 is the same ramp one step up and the segment now runs at full
   --aurora-2 at its midpoint, so motion beat B7 actually registers. */
.cx-cue__rail{
  position:relative;display:block;inline-size:1px;block-size:28px;
  background:var(--line-3);overflow:hidden
}
.cx-cue__seg{
  position:absolute;inset-inline:0;inset-block-start:0;
  display:block;block-size:10px;
  background:linear-gradient(180deg,rgba(0,188,234,0),var(--aurora-2) 50%,rgba(163,41,232,0));
  animation:cx-cue-travel 2400ms var(--ease-travel) infinite
}
@keyframes cx-cue-travel{
  0%{transform:translateY(-8px)}
  75%{transform:translateY(28px)}
  100%{transform:translateY(28px)}
}

:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit}

.cx-skip{
  position:absolute;inset-inline-start:12px;inset-block-start:-64px;z-index:60;
  padding:10px 16px;border-radius:999px;
  background:var(--s-1);border:1px solid var(--line-3);color:var(--text-1);
  text-decoration:none;
  font:500 14px/1 var(--font-sans);
  transition:transform var(--t-1) var(--ease-settle)
}
.cx-skip:focus-visible{transform:translateY(76px)}

/* ------------------------------------------------------- 10. responsive */

@media (min-width:1921px){
  /* at 2560 the 10.5rem ceiling left the whole message occupying ~20% of the
     frame width and the page read as a small card in an empty sky */
  :root{--h-mark:clamp(3rem, min(12vw, 26dvh), 17rem)}
  .cx-hero > *{max-inline-size:1200px}
  .cx-hero__lead{max-inline-size:min(46ch,760px)}
  .cx-beat__body{max-inline-size:min(46ch,640px)}
}

@media (max-width:900px){
  .cx-br{display:none}
  .cx-beat__body{margin-inline:auto;text-align:center;max-inline-size:38ch}
  .cx-beat__rule{margin-inline:auto}
  .cx-beat__lead{margin-inline:auto}
  .cx-beat__h{margin-inline:auto}
  .cx-beat .cx-cta,.cx-beat .cx-cta__col{align-items:center}
  .cx-hero__line{max-inline-size:26ch}
  /* On a phone the copy is centred and so is the field, so the beat text lands
     directly on the mark's near-white chevron. The scrim is the designed device
     for exactly this (§3 "the copy scrim — a gradient wash, never a
     backdrop-filter"); it just has to work harder when the two share a centre. */
  .cx-beat__body::before,.cx-close::before{
    background:radial-gradient(closest-side,rgba(12,10,18,.92),rgba(12,10,18,.66) 58%,transparent)
  }
  /* the close and the hero are full-bleed: a side spill there is scrollable overflow */
  .cx-beat__body::before{inset:-16% -8%}
  .cx-hero::before,.cx-close::before{inset:-14% 0}
}

@media (max-width:640px){
  :root{--pad:20px}
  .cx-cta{flex-direction:column;gap:var(--sp-7);align-self:stretch;inline-size:100%}
  .cx-cta__col{inline-size:100%;gap:8px}
  .cx-pill{inline-size:100%;min-height:48px}
  /* the bar's pills are a row, not a stack: the 100% basis above made them
     unsatisfiable and the primary CTA was sheared off the right edge at 320 */
  .cx-bar .cx-pill{inline-size:auto}
  .cx-spacer{height:36lvh}
  .cx-bar__brand span{display:none}
  .cx-foot{gap:var(--sp-7)}
  /* --pad is only 20px here, so the scrim's 8% side spill would escape the page */
  .cx-beat__body::before{inset:-16% 0}
}

@media (max-width:420px){
  /* Below this the two bar pills cannot both fit beside the brand without
     clipping "Open the dashboard". The bar keeps the primary action only; the
     hero, the close and the footer each still carry BOTH, so "get the app"
     is never more than one screen away. */
  .cx-bar__nav .cx-pill--ghost{display:none}
  .cx-pill--sm{padding-inline:14px}
}

@media (max-width:380px){
  /* the hero line ran flush to the 20px gutter at 320px — give it slack */
  :root{--t-ui:14px;--track-micro:.14em;--h-hero:clamp(1.3rem, 5.6vw, 2.75rem)}
  .cx-pill{padding-inline:18px}
  /* At ≤900px the beat body is centred with `margin-inline:auto`, which makes its
     used width fit-content — and fit-content's floor is min-content, not min-width.
     "CosmixAgent" in Fraunces is 143px against a 120px gutter at a 160px layout
     viewport (320 at 200% zoom), so the body overflowed by 3px whatever the track
     said. `anywhere` (unlike `break-word`) actually lowers the min-content size.
     Scoped to ≤380 so ordinary phones keep unbroken words. */
  .cx-beat__h,.cx-beat__lead,.cx-index{overflow-wrap:anywhere}
}

@media (max-height:640px){
  .cx-hero{padding-block:calc(var(--safe-t) + 2dvh) calc(var(--safe-b) + 2dvh)}
  :root{--h-mark:clamp(2.5rem, min(12vw, 17dvh), 10.5rem)}
  .cx-cue{display:none}
}

/* -------------------------------------------------- 11. reduced motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .cx-canvas,.cx-bar,.cx-skip,
  [data-reveal="on"] .cx-beat__body > *{transition-duration:90ms!important}
  [data-reveal="on"] .cx-beat__body > *{transform:none}
  .cx-wash{animation:none;transform:translate3d(14px,-15px,0)}
  .cx-cue__seg{animation:none;transform:translateY(20px)}
}

/* ------------------------------------------------ 12. contrast preference */

@media (prefers-contrast:more){
  .cx-mark,.cx-hero__line{text-shadow:none;color:var(--text-display)}
  .cx-hero::before,.cx-beat__body::before,.cx-close::before{
    background:radial-gradient(closest-side,rgba(8,7,12,.90),rgba(8,7,12,.60) 70%,transparent)
  }
  .cx-canvas{opacity:.55}
  .cx-canvas[data-ready="1"]{opacity:.55}
}