/* Graphican — the cosmos look for every page except the home film and the editors.
   Linked last on the pages that use site.css (chrome.theme_sync). Same world as the home page: deep space with stars,
   a glowing black-hole ring at the top, purple-lit cards, white pill buttons, headings in iBrand (Latin) + Nunito (Cyrillic).
   Colours only and a few static layers — no motion that runs per frame. */

@font-face { font-family:"iBrand"; font-display:swap; src:url(/assets/fonts/ibrand.otf) format("opentype"); }
@font-face { font-family:"Nunito Head"; src:url(/assets/fonts/web/Nunito-Bold-cyr.woff2) format("woff2"); font-weight:100 900; font-display:swap; unicode-range:U+0400-04FF; }

:root {
  --bg:#05030f; --bg2:#0d0824; --bg3:#140c33; --bg4:#1c1245; --panel:#130b30;
  --line:rgba(164,151,255,.2); --line-soft:rgba(164,151,255,.1); --line2:rgba(164,151,255,.28);
  --muted:#b3adcc; --mut:#b3adcc; --dim:#7d769a;
  --head:"iBrand", "Nunito Head", var(--display);
}
html { background:var(--bg); }
body { background:transparent; }   /* the page colour sits on <html>, so the stars and the ring (z-index -1) show through */

/* stars over the whole page, a black-hole ring at its top */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(/assets/home/cosmos/stars-a.svg) 0 0 / 520px 520px, url(/assets/home/cosmos/stars-b.svg) 120px 60px / 340px 340px; opacity:.75; }
html::after { content:""; position:absolute; z-index:-1; pointer-events:none; top:clamp(70px, 9vw, 120px); right:clamp(-120px, 6vw, 120px);
  width:clamp(220px, 30vw, 420px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #05030f 57%, transparent 59%);
  box-shadow:0 0 0 2px #ece6ffd9, 0 0 22px 6px #b9a8ffcc, 0 0 90px 30px #6d56fa80, 0 0 220px 90px #3a1f9e59, inset 0 0 40px 6px #6d56fa99; }
@media (max-width:760px) { html::after { width:150px; top:84px; right:12px; opacity:.55; } }

/* the old beam and arcs give way to the ring */
.fxl .beam, .fxl svg { display:none; }

/* headings: sentence case, iBrand for Latin, Nunito for Cyrillic */
main h1, main h2, .lp-hero h1, .lp-sec > h2, .nx-hero h1, .design-page .sec-title, .sec-title, .ac-welcome h1, .ac-overview h1, .hello h1 {
  font-family:var(--head); font-weight:700; font-synthesis:none; text-transform:none; letter-spacing:0; text-shadow:0 4px 40px #6d56fa59; }
.lp-hero h1, .nx-hero h1 { line-height:1.02; }
.wrap > h2 { font-family:"Inter", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.14em; text-shadow:none; }   /* the app launcher's small section label */

/* header like the home page: brand in iBrand, a white start pill */
.gh.scrolled { background:rgba(5,3,15,.74); border-bottom-color:var(--line-soft); }
.gh-logo { font-family:"iBrand", var(--display); font-size:24px; letter-spacing:.005em; }
@media (max-width:860px) { .gh-nav { background:rgba(10,6,28,.97); } }

/* buttons: the primary one is a white pill, as on the home page */
.bt.pri { color:#271c40; background:#fff; border-color:#fff; box-shadow:0 0 34px -10px #a497ff; }
.bt.pri::before { display:none; }
.bt.pri:hover { background:#efeaff; border-color:#efeaff; box-shadow:0 0 44px -8px #a497ff; }
.bt.ghost { border-color:var(--line2); }

/* cards lit in purple, like the editor cards in the film */
.gc { border-color:#a497ff4d; background:radial-gradient(130% 150% at 50% 50%, #0d0824f2 40%, #2a1a6e80 82%, #6d56fa59 100%); }
.gc::before { display:none; }

/* footer */
.ft { background:linear-gradient(180deg, transparent, #0b0620 60%); }
.ft-cols b { color:#9d95c4; }