/* Graphican — «Өлзий» brand layer (2026-11). Linked last on every page.
   The look follows the owner's brand works: pure black, white words, ONE vivid royal blue (buttons, glows, the glass knot),
   a little red. No dull, greyish blues: neutral greys for quiet text, vivid blue only where something should shine.
   Sinistre for the logo and Latin headings, Manrope for everything else. Only looks change here — no text, no layout logic.
   Pictures: /assets/ulzii/*.webp (made from the owner's own images; no third-party logo is used). */

/* Sinistre (Collletttivo, OFL — assets/fonts/web/Sinistre-OFL.txt). It has no Ө Ү, so it covers Latin only (unicode-range):
   Cyrillic in the same line falls through to Manrope. */
@font-face { font-family:"Sinistre"; font-style:normal; font-weight:100 500; font-display:swap; src:url(/assets/fonts/web/Sinistre-Regular.woff2) format("woff2"); unicode-range:U+0020-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family:"Sinistre"; font-style:normal; font-weight:600 900; font-display:swap; src:url(/assets/fonts/web/Sinistre-Bold.woff2) format("woff2"); unicode-range:U+0020-024F, U+2000-206F, U+20AC, U+2122; }
/* arrows (← ↑ → ↓ ↗ …): neither Manrope nor Sinistre has ↗, and phones then draw it as a colour emoji. One small set of
   line arrows (from Inter, OFL) answers for every arrow, in both families, declared last so it wins for these characters. */
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/web/Manrope-Regular.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/web/Manrope-Medium.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/web/Manrope-SemiBold.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:700 800; font-display:swap; src:url(/assets/fonts/web/Manrope-Bold.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:700 800; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }
@font-face { font-family:"Sinistre"; font-style:normal; font-weight:100 500; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }
@font-face { font-family:"Sinistre"; font-style:normal; font-weight:600 900; font-display:swap; src:url(/assets/fonts/web/Arrows.woff2) format("woff2"); unicode-range:U+2190-2199, U+21A9-21AA; }

:root {
  --u-blue:#2148f3; --u-deep:#0030e8; --u-light:#358dff; --u-red-deep:#8d0001; --u-red:#d5323b;
  --u-text:#fff; --u-muted:#a1a1a8; --u-dim:#6e6e76; --u-line:#ffffff1a; --u-card:#0b0b0d; --u-card2:#111114;
  --u-grad:linear-gradient(135deg, #0030e8 0%, #2148f3 60%, #3b6bff 100%);
  --u-red-grad:linear-gradient(135deg, #8d0001, #d5323b);
  --u-glow:0 10px 34px -10px #2148f3;
  --body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --head:"Sinistre", "iBrand", "Manrope", "Helvetica Neue", Arial, sans-serif;   /* Sinistre for Latin headings, Manrope for Cyrillic */
  --u-accent:"Sinistre", "iBrand", "Manrope", sans-serif;
}
body { font-family:var(--body); }
button, input, select, textarea { font-family:inherit; }
::selection { background:#2148f3; color:#fff; }

/* the Graphican logo in Sinistre, on every page and in every editor */
.gh-logo, .brand, .logo, .ac-logo, .vh .logo, .ga-logo, .footer .gh-logo { font-family:"Sinistre", "iBrand", "Manrope", sans-serif !important; font-weight:400; letter-spacing:0; }

/* ---------- the dark site pages (cosmos.css) ---------- */
html:has(link[href*="cosmos.css"]) { --bg:#000; --bg2:#0b0b0d; --bg3:#111114; --bg4:#18181c; --panel:#0b0b0d;
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line2:rgba(255,255,255,.16);
  --muted:#a1a1a8; --mut:#a1a1a8; --dim:#6e6e76; }
/* the glass endless knot, top right */
html:has(link[href*="cosmos.css"])::after { box-shadow:none; border-radius:0; aspect-ratio:1672 / 941;
  top:0; right:0; width:clamp(420px, 56vw, 900px);
  background:url(/assets/ulzii/knot-corner.webp?v=1) right top / contain no-repeat;
  -webkit-mask:radial-gradient(120% 120% at 100% 0, #000 45%, transparent 78%); mask:radial-gradient(120% 120% at 100% 0, #000 45%, transparent 78%); opacity:.9; }
@media (max-width:760px) { html:has(link[href*="cosmos.css"])::after { width:100vw; top:0; right:0; opacity:.5; } }
html:has(link[href*="cosmos.css"]) body::before { opacity:.18; }
html:has(link[href*="cosmos.css"]) .ft { position:relative; background:#000; }
.ft-cols b { color:#fff; }

/* header: white words, the start button in royal blue */
.gh .gh-nav a, .gh .gh-nav button, .gh-nav > a { color:#ffffffd9; }
.gh .gh-nav a:hover, .gh-nav > a:hover { color:#fff; }
.gh.scrolled { background:rgba(0,0,0,.78); border-bottom-color:#ffffff14; }
.gh-inst { color:#fff !important; }
@media (max-width:860px) { html:has(link[href*="cosmos.css"]) .gh-nav { background:#0b0b0df7; } }

main h1, main h2, .lp-hero h1, .lp-sec > h2, .nx-hero h1, .sec-title { font-family:var(--head); }
html:has(link[href*="cosmos.css"]) :is(main h1, main h2, .lp-hero h1, .lp-sec > h2, .nx-hero h1, .sec-title) { color:#fff; text-shadow:none; }

/* buttons: royal-blue pill; ghost buttons plain glass */
.bt.pri { color:#fff; background:var(--u-grad); border-color:transparent; box-shadow:var(--u-glow); }
.bt.pri:hover { background:linear-gradient(135deg, #0a3cff, #3158ff 60%, #4d7bff); border-color:transparent; box-shadow:0 14px 40px -10px #2148f3; }
.bt.ghost { background:#ffffff0a; border-color:var(--line2); color:#fff; }

/* cards: near-black, a hairline; the blue light only when you point at them */
.gc { border-color:#ffffff14; background:var(--u-card); box-shadow:inset 0 1px 0 #ffffff0d; }
.gc:hover { border-color:#2148f3; box-shadow:inset 0 1px 0 #ffffff12, 0 18px 50px -28px #2148f3; }
/* the small «new» marks in red, the brand's 5% accent */
.h2-new b, .ft-tag { background:var(--u-red-grad); color:#fff; }

/* ---------- home ---------- */
.cosmos { --space:#000; }
.cs-hole { background:#000; }

/* hero — one photograph, full bleed, like a film frame: the queen with her tablet before the glass knot ribbons
   (the owner's «Cobalt-rimmed queen with tablet»). The words sit on its dark left side. */
.home-cosmos .hs { --w:auto; left:0; top:0; width:100%; height:100%; aspect-ratio:auto; isolation:isolate; overflow:hidden; }
.home-cosmos .hs-bg { left:auto; right:0; top:0; width:min(100%, max(68vw, 100% - 520px)); height:100%; object-fit:cover; object-position:58% 30%; transform-origin:60% 40%;
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 34%); mask:linear-gradient(90deg, transparent 0%, #000 34%); }
.home-cosmos .hs::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, #000 0%, #0000 26%), linear-gradient(180deg, #000a 0%, #0000 18%); }
.home-cosmos .hs-tw, .home-cosmos .hs-sp, .home-cosmos .hs-mt { display:none; }
@keyframes u-drift { to { transform:translate(-2%, 1.5%) scale(1.03); } }
@keyframes u-float { to { transform:translate(16px, -12px); } }
@keyframes u-rise { from { opacity:0; transform:translateY(30px); } }

.home-cosmos .cs-hero { text-align:left; justify-content:center; padding:110px var(--pad) 22px; }
.home-cosmos .cs-hero .eyebrow { position:static; margin:0 0 20px; color:#ffffffa6; letter-spacing:.3em; font-size:11px; }
.home-cosmos .cs-hero h1 { font-family:var(--u-accent); font-weight:400; font-size:clamp(64px, 10vw, 184px); line-height:.95; letter-spacing:-.02em; max-width:9ch; color:#fff; text-shadow:none; }
.home-cosmos .cs-hero > p { margin:20px 0 clamp(34px, 6svh, 72px); max-width:30ch; font-size:clamp(15px, 1.2vw, 18px); color:#ffffffb3; }
.home-cosmos .cs-hero .hero-tools { max-width:min(100%, 52vw); margin:0; border:0; gap:8px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.home-cosmos .cs-hero .hero-tools a { border:1px solid #ffffff1f !important; border-radius:14px; padding:16px 18px; background:#0b0b0dcc;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .25s, background .25s; }
.home-cosmos .cs-hero .hero-tools a:hover { border-color:#2148f3 !important; background:#2148f3; }
.home-cosmos .cs-hero .hero-tools svg { color:#fff; flex:none; width:20px; height:20px; }
.home-cosmos .cs-hero .hero-tools a { min-width:0; } .home-cosmos .cs-hero .hero-tools span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.home-cosmos .cs-hero .hero-tools i { flex:none; font-style:normal; }
.home-cosmos .cs-hero .scroll-note { color:#ffffff80; letter-spacing:.2em; }
@media (max-width:900px) {
  .home-cosmos .hs::after { background:linear-gradient(0deg, #000 0%, #000 34%, #0000 64%), linear-gradient(180deg, #000a 0%, #0000 18%); }
  .home-cosmos .hs-bg { width:100%; object-position:66% 0%; height:72%; -webkit-mask:none; mask:none; }
  .home-cosmos .cs-hero { justify-content:flex-end; }
  .home-cosmos .cs-hero h1 { font-size:clamp(58px, 19vw, 120px); }
  .home-cosmos .cs-hero .hero-tools { grid-template-columns:1fr 1fr; max-width:none; }
  .home-cosmos .cs-hero > p { margin:14px 0 24px; }
  .home-cosmos .cs-hero .hero-tools a { padding:14px; min-width:0; gap:8px; }
  .home-cosmos .cs-hero .hero-tools span { font-size:20px; }
}

/* ---------- the home chapters, stacked as sections (the space film is retired): editorial, technical, the brand's pictures ---------- */
.home-cosmos .cs-sky, .home-cosmos .cs-dawn, .home-cosmos .cs-globe, .home-cosmos .cs-rim, .home-cosmos .cs-flood, .home-cosmos .cs-after { display:none !important; }
.cosmos h2 { text-shadow:none; color:#fff; }
.cosmos p { color:#ffffffb3; }
.cosmos .eyebrow { color:#ffffff99; }
.home-cosmos .cs-sc:not(.cs-hero) { width:100%; max-width:calc(1280px + 2 * var(--pad)); margin:0 auto; text-align:left;
  padding:clamp(96px, 12vw, 160px) var(--pad) 0; position:relative; }
.home-cosmos .cs-sc:not(.cs-hero)::before { content:""; position:absolute; left:var(--pad); right:var(--pad); top:clamp(40px, 5vw, 64px); height:1px; background:#ffffff1a; }
.home-cosmos .cs-sc:not(.cs-hero) > .eyebrow { display:block; margin:0 0 22px; font-size:11px; }
.home-cosmos .cs-sc:not(.cs-hero) h2 { margin:0; font-family:var(--u-accent); font-weight:400; font-size:clamp(48px, 6.4vw, 104px); line-height:.98; letter-spacing:-.02em; }
.home-cosmos .cs-sc:not(.cs-hero) > p { margin:22px 0 0; max-width:46ch; font-size:16px; }
.home-cosmos .cs-sc .text-link { margin-top:26px; }

/* [01] the four editors: tall picture cards from the brand's photographs */
.home-cosmos .cs-eds { max-width:none; margin:clamp(36px, 5vw, 64px) 0 0; gap:12px; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.home-cosmos .cs-ed { position:relative; overflow:hidden; isolation:isolate; aspect-ratio:3 / 4; justify-content:flex-end; padding:22px; border-radius:18px;
  border:1px solid #ffffff1a !important; background:#0b0b0d !important; box-shadow:none; }
.home-cosmos .cs-ed::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--u-pic) center / cover no-repeat; transition:transform 1.4s var(--u-ease), filter .6s; filter:saturate(.95); }
.home-cosmos .cs-ed::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, #0000 30%, #000000d9 88%); }
.home-cosmos .cs-ed:nth-child(1) { --u-pic:url(/assets/ulzii/queen-tablet.webp?v=1); }
.home-cosmos .cs-ed:nth-child(2) { --u-pic:url(/assets/ulzii/tassel.webp?v=1); }
.home-cosmos .cs-ed:nth-child(3) { --u-pic:url(/assets/ulzii/headdress.webp?v=1); }
.home-cosmos .cs-ed:nth-child(4) { --u-pic:url(/assets/ulzii/queen-ride.webp?v=1); }
.home-cosmos .cs-ed:hover { border-color:#2148f3 !important; box-shadow:0 30px 70px -40px #2148f3; translate:0 -6px; }
.home-cosmos .cs-ed:hover::before { transform:scale(1.07); }
.home-cosmos .cs-ed svg { position:absolute; left:22px; top:22px; width:22px; height:22px; color:#fff; }
.home-cosmos .cs-ed b { font-family:var(--u-accent); font-weight:400; font-size:clamp(30px, 2.8vw, 44px); }
.home-cosmos .cs-ed span { color:#ffffffcc; }
.home-cosmos .cs-eds { counter-reset:u-ed; }
.home-cosmos .cs-ed { counter-increment:u-ed; }
.home-cosmos .cs-ed b::after { content:"/0" counter(u-ed); position:absolute; right:22px; top:24px; font:600 10px/1 var(--u-mono); letter-spacing:.14em; color:#ffffff99; }

/* [02] the small tools: a numbered instrument list */
.home-cosmos .cs-sts { max-width:none; margin:clamp(36px, 5vw, 64px) 0 0; gap:0; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid #ffffff1a; border-left:1px solid #ffffff1a; counter-reset:u-st; }
.home-cosmos .cs-st { counter-increment:u-st; border-radius:0; border:0; border-right:1px solid #ffffff1a; border-bottom:1px solid #ffffff1a; background:transparent; padding:26px 22px; column-gap:16px; transition:background .4s; }
.home-cosmos .cs-st::before { content:"T-" counter(u-st, decimal-leading-zero); position:absolute; right:18px; top:16px; left:auto; bottom:auto; width:auto; height:auto; background:none; transform:none; opacity:1;
  font:600 10px/1 var(--u-mono); letter-spacing:.14em; color:#ffffff59; }
.home-cosmos .cs-st:hover { background:#2148f314; }
.home-cosmos .cs-st:hover::before { color:#2148f3; }
.home-cosmos .cs-st .tool-icon { background:#2148f3; color:#fff; border-radius:10px; }
.home-cosmos .cs-st b { font-size:15px; }
.home-cosmos .cs-dl { justify-content:flex-start; margin:36px 0 0; }
.home-cosmos .cs-dl b { font-family:var(--u-accent); font-size:clamp(40px, 4vw, 64px); }

/* [03] templates: a wall of the real designs */
.home-cosmos .cs-earth { order:5; }
.home-cosmos .cs-orb-c { --cw:auto; max-width:calc(1280px + 2 * var(--pad)); margin:0 auto; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; padding:clamp(36px, 5vw, 56px) var(--pad) 0; }
.home-cosmos .cs-tp span { width:100%; border-radius:14px; box-shadow:0 0 0 1px #ffffff1a; transition:transform .9s var(--u-ease), box-shadow .4s; }
.home-cosmos .cs-tp:nth-child(even) span { translate:0 28px; }
.home-cosmos .cs-tp:hover span { transform:translateY(-6px) scale(1.02); box-shadow:0 0 0 1px #2148f3, 0 30px 60px -30px #2148f3; }

/* [04] made for your words: the map of Mongolia in royal-blue line, beside the words */
.home-cosmos .cs-mn { order:7; padding:clamp(28px, 4vw, 48px) var(--pad) 0; }
.home-cosmos .cs-mn-map { width:min(100%, 1040px); margin:0 auto; }
.home-cosmos .cs-mn-f { fill:#2148f31f; }
.home-cosmos .cs-mn-l { stroke:#2148f3; stroke-width:1.5; filter:drop-shadow(0 0 10px #2148f3aa); }
.home-cosmos .cs-w { text-shadow:none; color:#fff; }
.home-cosmos .cs-pin { background:#d5323b; box-shadow:0 0 0 4px #d5323b40, 0 0 18px 4px #d5323b88; }

/* [05] reviews */
.home-cosmos .cs-rcs { max-width:none; margin:clamp(36px, 5vw, 64px) 0 0; gap:12px; }
.home-cosmos .cosmos .review, .home-cosmos .cs-rc { background:#0b0b0d; border:1px solid #ffffff1a; border-radius:18px; padding:30px; }
.home-cosmos .cs-rc blockquote { font-size:15px; line-height:1.7; }

/* [06] the closing call: centred over the glass knot */
.home-cosmos .cs-end { text-align:center !important; isolation:isolate; overflow:hidden; padding-bottom:clamp(120px, 14vw, 200px) !important; }
.home-cosmos .cs-end::after { content:""; position:absolute; z-index:-1; inset:10% -10% 0; background:url(/assets/ulzii/knot.webp?v=1) center / contain no-repeat; mix-blend-mode:screen; opacity:.55;
  -webkit-mask:radial-gradient(closest-side, #000 50%, transparent); mask:radial-gradient(closest-side, #000 50%, transparent); }
.home-cosmos .cs-end h2, .home-cosmos .cs-end > p { margin-left:auto !important; margin-right:auto !important; }

@media (max-width:900px) {
  .home-cosmos .cs-eds { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-cosmos .cs-sts { grid-template-columns:1fr 1fr; }
  .home-cosmos .cs-orb-c { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px) {
  .home-cosmos .cs-sts { grid-template-columns:1fr; }
  .home-cosmos .cs-ed { aspect-ratio:4 / 5; padding:16px; }
  .home-cosmos .cs-ed b::after { right:14px; top:16px; }
}

/* ---------- home, after the film: pricing, website, footer — black, white, one blue ---------- */
body.home-cosmos { --paper:#000; --ink:#fff; --muted:#a1a1a8; --line:#ffffff1a; background:#000; color:var(--ink); }
.home-cosmos .section h2, .home-cosmos .free-plan h3, .home-cosmos .pr-c h3 { font-family:var(--u-accent); color:#fff; }
.home-cosmos .section .eyebrow { color:#ffffff99; letter-spacing:.28em; }
.home-cosmos .price { position:relative; isolation:isolate; border-top:0; overflow-x:clip; }
.home-cosmos .price::before { content:""; position:absolute; z-index:-1; right:-6%; top:-4%; width:min(60vw, 860px); aspect-ratio:1672 / 941; pointer-events:none;
  background:url(/assets/ulzii/knot-wide.webp?v=1) right top / contain no-repeat; mix-blend-mode:screen; opacity:.6;
  -webkit-mask:radial-gradient(90% 90% at 100% 0, #000 40%, transparent 80%); mask:radial-gradient(90% 90% at 100% 0, #000 40%, transparent 80%); }
.home-cosmos .pr-c { background:var(--u-card); border-color:#ffffff1a; box-shadow:none; }
.home-cosmos .pr-c.best { background:var(--u-grad); border-color:transparent; box-shadow:0 30px 80px -36px #2148f3; }
.home-cosmos .pr-c.best, .home-cosmos .pr-c.best ul, .home-cosmos .pr-c.best small, .home-cosmos .pr-c.best p { color:#fff; }
.home-cosmos .pr-c.best ul { border-color:#ffffff40; }
.home-cosmos .plan-top > span { background:var(--u-red-grad); color:#fff; }
.home-cosmos .button.primary { background:var(--u-grad); color:#fff; box-shadow:var(--u-glow); }
.home-cosmos .button.primary:hover { background:linear-gradient(135deg, #0a3cff, #3158ff 60%, #4d7bff); }
.home-cosmos .pr-c.best .button.primary { background:#fff; color:#0030e8; box-shadow:none; }
.home-cosmos .button.secondary { border-color:#ffffff33; color:#fff; background:transparent; }
.home-cosmos .button.secondary:hover { background:#ffffff12; border-color:#ffffff66; }
.home-cosmos .pricing-note, .home-cosmos .pricing-note a { color:var(--muted); }
/* the website block and its form */
.home-cosmos .wl { --w-ink:#fff; --w-muted:#a1a1a8; --w-line:#ffffff1a; --w-card:#0b0b0d; --w-soft:#ffffff08; --w-acc:#4d7bff; --w-on:#2148f333; }
.home-cosmos .wl-go { background:var(--u-grad); color:#fff; box-shadow:var(--u-glow); }
.home-cosmos .wl input, .home-cosmos .wl textarea, .home-cosmos .wl select { background:#ffffff0a; color:#fff; border-color:#ffffff1f; }
.home-cosmos .wl input::placeholder, .home-cosmos .wl textarea::placeholder { color:#6e6e76; }
.home-cosmos .wx-c { border-color:#ffffff1a; }
/* things that were ink-on-white */
.home-cosmos .header-start { background:var(--u-grad); color:#fff; box-shadow:none; }
.home-cosmos .skip { background:#fff; color:#000; }
.home-cosmos .cs-end .button { background:var(--u-grad); color:#fff; box-shadow:var(--u-glow); }
/* the header and its menus over the dark page */
.home-cosmos .gh-nav a, .home-cosmos .gh-nav button { color:#ffffffd9; background:transparent; }
.home-cosmos .gh-nav, .home-cosmos .gu-pop { color:#fff; border-color:#ffffff1a; }
@media (max-width:900px) { .home-cosmos .gh-nav { background:#0b0b0df7; } }
.home-cosmos .gu-pop { background:#0b0b0df7; }
.home-cosmos .lang-sw button { color:#ffffffb3; }
.home-cosmos .lang-sw button[aria-pressed=true] { background:#fff; color:#000; }

/* footer: the moonlit glass road with a ger under the links */
.footer { position:relative; isolation:isolate; overflow:hidden; }
.home-cosmos .footer { max-width:none; padding-left:max(var(--pad), calc((100vw - var(--max)) / 2)); padding-right:max(var(--pad), calc((100vw - var(--max)) / 2));
  padding-top:clamp(120px, 16vw, 240px); background:#000; }
.home-cosmos .footer::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:url(/assets/ulzii/road.webp?v=1) center 30% / cover no-repeat; opacity:.55;
  -webkit-mask:linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%); mask:linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%); }
.home-cosmos .footer-top, .home-cosmos .footer-links, .home-cosmos .footer-bottom { border-color:#ffffff1a; }
.home-cosmos .footer .gh-logo { font-size:clamp(34px, 5vw, 64px); }
.home-cosmos .footer-links h3 { font-family:var(--u-accent); color:#fff; }
.home-cosmos .footer-links a { color:#a1a1a8; }
.home-cosmos .footer-links a:hover { color:#fff; }
.home-cosmos .footer .round-arrow { border-color:#ffffff33; color:#fff; background:transparent; }

/* ---------- the apps: the business workspace (/org/, /business/workshop/), the admin panel, the account, the client review page ----------
   The same brand in a working tool: dark = pure black, neutral greys, one royal blue; light = the brand guide's ice and navy.
   Only the colour tokens and type change — every layout stays as it is. */
html[data-org-theme=dark] { --bg:#000; --c1:#0b0b0d; --c2:#141417; --surface:#0b0b0d; --surface2:#141417; --line:#ffffff17; --line2:#ffffff2b;
  --text:#fff; --mut:#a1a1a8; --dim:#8a8a92; --acc:#2148f3; --acc2:#7d9bff; --soft:#2148f31f; --hover:#18181c; --shadow:0 18px 50px #0008; }
html[data-org-theme=light] { --bg:#eef3fb; --c1:#fff; --c2:#f4f7fd; --surface:#fff; --surface2:#f4f7fd; --line:#d6e0f3; --line2:#b8c7e6;
  --text:#00094f; --mut:#4a5578; --dim:#5d6888; --acc:#2148f3; --acc2:#0030e8; --soft:#e3ecff; --hover:#e8eefb; --shadow:0 12px 40px #00094f12; }
html[data-org-theme=dark] .og .btn.pri { color:#fff !important; }
html[data-org-theme] .og .btn.pri { background:var(--u-grad) !important; border-color:transparent !important; color:#fff !important; }
html[data-org-theme] :is(.og h1, .og h2, .og-title, .bp-hero h1, .bp-hero h2) { font-family:var(--head); }
html[data-org-theme] .ac-h { position:relative; }
html[data-org-theme] .ac-h::after, html:has(link[href*="account.css"]) .ac-h::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:8px; pointer-events:none; opacity:.5;
  background:url(/assets/ulzii/khee.svg?v=1) 0 0 / 16px 8px repeat-x; -webkit-mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
html[data-org-theme=dark] body { background:#000; }
/* the account and the admin panel (account.css), outside the workspace */
html:has(link[href*="account.css"]):not([data-org-theme]) { --bg:#000; --c1:#0b0b0d; --c2:#141417; --line:#ffffff17; --line2:#ffffff2b; --text:#fff; --mut:#a1a1a8; --dim:#8a8a92; --acc:#2148f3; --acc2:#7d9bff; }
html:has(link[href*="account.css"]):not([data-org-theme]) :is(h1, h2) { font-family:var(--head); }
html:has(link[href*="account.css"]) .ac-h { position:relative; }
/* the client's review page (review/index.html): always the dark brand */
html:has(link[href*="review-pins.css"]):not([data-org-theme]) { --bg:#000; --c1:#0b0b0d; --c2:#141417; --line:#ffffff17; --line2:#ffffff2b; --text:#fff; --mut:#a1a1a8;
  --acc:#2148f3; --acc2:#7d9bff; --soft:#2148f31f; color-scheme:dark; }
html:has(link[href*="review-pins.css"]):not([data-org-theme]) body { font-family:var(--body); }
html:has(link[href*="review-pins.css"]):not([data-org-theme]) header a { font-family:"Sinistre", "Manrope", sans-serif; font-weight:400; font-size:22px; }

/* narrow phones: the account header and the workshop header wrap instead of pushing the page sideways */
@media (max-width:480px) {
  html:has(link[href*="account.css"]) .ac-h { flex-wrap:wrap; row-gap:8px; }
  .business-workshop > header { flex-wrap:wrap; row-gap:8px; }
}

/* ---------- Graphican for Business (landing): the queen at her laptop, fading into the page ---------- */
.bz-hero { position:relative; isolation:isolate; }
.bz-hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; right:calc(50% - 50vw); top:-90px; width:min(64vw, 1100px); aspect-ratio:1672 / 941;
  background:url(/assets/ulzii/queen-laptop.webp?v=1) center / cover no-repeat;
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 30%); -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg, transparent 0%, #000 42%) intersect, linear-gradient(0deg, transparent 0%, #000 30%); }
.bz-hero h1 { font-family:"Manrope", sans-serif; }
@media (max-width:900px) { .bz-hero::after { width:100vw; right:calc(50% - 50vw); top:-40px; opacity:.35; } }

/* ---------- motion: calm, expensive-feeling, one easing for everything ---------- */
:root { --u-ease:cubic-bezier(.16, 1, .3, 1); }
.home-cosmos .hs-bg { transition:translate 1.4s var(--u-ease); }
.bt.pri, .button.primary, .header-start, .wl-go { transition:translate .5s var(--u-ease), background .3s, box-shadow .3s, transform .3s; }

/* the hero comes in like a film title: the eyebrow, the word wiped up from a line, the sentence, then the four doors */
@media (prefers-reduced-motion:no-preference) {
  .home-cosmos .cs-hero .eyebrow { animation:u-in 1s var(--u-ease) .2s both; }
  .home-cosmos .cs-hero h1 { animation:u-wipe 1.5s var(--u-ease) .3s both, u-sheen 7s ease-in-out 2.2s infinite; }
  .home-cosmos .cs-hero > p { animation:u-in 1.1s var(--u-ease) .65s both; }
  .home-cosmos .cs-hero .hero-tools a { animation:u-in 1s var(--u-ease) both; }
  .home-cosmos .cs-hero .hero-tools a:nth-child(1) { animation-delay:.8s; }
  .home-cosmos .cs-hero .hero-tools a:nth-child(2) { animation-delay:.88s; }
  .home-cosmos .cs-hero .hero-tools a:nth-child(3) { animation-delay:.96s; }
  .home-cosmos .cs-hero .hero-tools a:nth-child(4) { animation-delay:1.04s; }
  .home-cosmos .hs-bg { animation:u-cine 2.6s var(--u-ease) both; }
  .home-cosmos .cs-hero .scroll-note { animation:u-in 1s var(--u-ease) 1.3s both, u-bob 2.4s ease-in-out 2.4s infinite; }
}
/* a thin line of light crosses the word now and then */
.home-cosmos .cs-hero h1 { background:linear-gradient(105deg, #fff 0%, #fff 44%, #a9bcff 50%, #fff 56%, #fff 100%) 120% 0 / 250% 100% no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes u-in { from { opacity:0; transform:translateY(22px); filter:blur(8px); } }
@keyframes u-wipe { from { clip-path:inset(0 0 100% 0); transform:translateY(40px); } to { clip-path:inset(-10% -5% -20% -5%); } }
@keyframes u-sheen { 0%, 70% { background-position:120% 0; } 100% { background-position:-20% 0; } }
@keyframes u-cine { from { opacity:0; transform:scale(1.14); filter:brightness(.3) blur(6px); } }
@keyframes u-bob { 50% { transform:translateY(6px); } }

/* the other site pages open like the home page: the title is wiped up, the eyebrow and the first lines follow */
@media (prefers-reduced-motion:no-preference) {
  html:has(link[href*="cosmos.css"]) main h1 { animation:u-wipe 1.3s var(--u-ease) .15s both; }
  html:has(link[href*="cosmos.css"]) main :is(.eyebrow, .kicker, .lp-kick, .crumbs, .bc):first-of-type { animation:u-in .9s var(--u-ease) .05s both; }
  html:has(link[href*="cosmos.css"]) main h1 + p { animation:u-in 1s var(--u-ease) .45s both; }
  html[data-org-theme] .og main h1, html[data-org-theme] .og-title { animation:u-in .8s var(--u-ease) both; }
}

/* main buttons: a sweep of light on hover */
.bt.pri, .button.primary, .header-start, .wl-go, .home-cosmos .pr-c.best .button.primary { position:relative; overflow:hidden; isolation:isolate; }
.bt.pri::after, .button.primary::after, .header-start::after, .wl-go::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, #ffffff59 50%, transparent 70%); transform:translateX(-130%); transition:transform .9s var(--u-ease); }
.bt.pri:hover::after, .button.primary:hover::after, .header-start:hover::after, .wl-go:hover::after { transform:translateX(130%); }
.bt.pri:active, .button.primary:active, .header-start:active, .wl-go:active { transform:scale(.97); }

/* cards: royal-blue light under the pointer (ulzii.js sets --mx / --my), a lift on hover */
.gc, .home-cosmos .pr-c:not(.best), .cs-ed, .home-cosmos .cs-hero .hero-tools a, .home-cosmos .wl-card {
  background-image:radial-gradient(380px circle at var(--mx, -500px) var(--my, -500px), #2148f333, transparent 62%); }
.gc, .home-cosmos .pr-c, .cs-ed, .home-cosmos .wx-c { transition:transform .6s var(--u-ease), border-color .3s, box-shadow .6s var(--u-ease); }
.gc:hover, .home-cosmos .pr-c:hover, .home-cosmos .wx-c:hover { transform:translateY(-4px); }
.home-cosmos .wx-c img { transition:transform 1.2s var(--u-ease); }
.home-cosmos .wx-c:hover img { transform:scale(1.04); }

/* sections rise into place as they come into view (browsers with scroll timelines; others just show them) */
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .home-cosmos .section-head, .home-cosmos .free-plan, .home-cosmos .pr-c, .home-cosmos .wx-c, .home-cosmos .wl-card, .home-cosmos .wl-form,
    .home-cosmos .footer-links > div, html:has(link[href*="cosmos.css"]) main .gc {
      animation:u-reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
    .home-cosmos .pr-c:nth-child(2), .home-cosmos .wx-c:nth-child(2) { animation-range:entry 5% entry 50%; }
    .home-cosmos .pr-c:nth-child(3), .home-cosmos .wx-c:nth-child(3) { animation-range:entry 10% entry 55%; }
    .home-cosmos .price::before { animation:u-knot-scroll linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  }
}
@keyframes u-reveal { from { opacity:0; transform:translateY(46px) scale(.98); filter:blur(6px); } }
@keyframes u-knot-scroll { from { transform:translate(4%, -6%) rotate(4deg); } to { transform:translate(-4%, 6%) rotate(-4deg); } }

/* ---------- «Өлзий кино»: the home page as one continuous film (CSS scroll timeline, no library) ----------
   One sticky stage; the page's scroll is the playhead. Shots, in % of the film:
     0–17   the hero photograph; the camera pushes into the glass knot on the right, the words lift away
    14–24   through the glass: the knot ribbons fill the screen, then settle as the film's background for every shot
    20–36   the four editors fly in out of the depth, one after another, then the camera passes them
    37–52   the small tools land one by one on a grid
    52–66   the templates slide past like a dolly shot
    66–80   down onto Mongolia: the border draws itself, the words and red points light
    80–92   three reviews, one at a time
    93–100  the closing call over the turning knot; pricing follows in the normal page
   Without scroll timelines, or with «reduce motion», the same chapters are simply stacked (above). */
.u-flow { display:none; }
@supports (animation-timeline:view()) {
@media (prefers-reduced-motion:no-preference) {
  .home-cosmos .cosmos { height:980svh; view-timeline:--cos block; background:#000; }
  .home-cosmos .cs-stage { position:sticky; top:0; display:block; height:100svh; overflow:hidden; }
  .home-cosmos .cosmos .cs-stage > * { position:absolute; inset:0; }
  .home-cosmos .cs-zone { height:16%; }
  .home-cosmos .cs-hero { min-height:0; }
  .home-cosmos .cs-sc:not(.cs-hero) { padding-top:clamp(84px, 13svh, 140px); }
  .home-cosmos .cs-sc:not(.cs-hero)::before { display:none; }

  .home-cosmos :is(.cs-hole, .cs-hero, .cs-sky, .cs-tools, .cs-ed, .cs-fall, .cs-st, .cs-tpl, .cs-earth, .cs-orb-c, .cs-local, .cs-mn, .cs-mn-f, .cs-mn-l, .cs-w, .cs-pin, .cs-rv, .cs-rc, .cs-end) {
    animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both; animation-timeline:--cos; animation-range:contain 0% contain 100%; }

  /* shot 1: the photograph; push in towards the knot, then through it */
  .home-cosmos .cs-hole { animation-name:f-hole; transform-origin:92% 34%; }
  .home-cosmos .cs-hero { animation-name:f-hero; }
  /* shot 2: the glass — the knot ribbons rush in, then stay as the film's slow-turning background */
  .home-cosmos .cs-sky { display:block !important; opacity:0; pointer-events:none; animation-name:f-sky;
    background:url(/assets/ulzii/knot-wide.webp?v=1) center / cover no-repeat; }
  .home-cosmos .cs-sky > * { display:none; }
  .home-cosmos .cs-sky::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 50%, #0000 0%, #000c 70%, #000 100%); }
  /* shot 3: the editors */
  .home-cosmos .cs-tools { animation-name:f-tools; }
  .home-cosmos .cs-tools, .home-cosmos .cs-fall { display:flex; flex-direction:column; justify-content:center; padding-top:72px !important; padding-bottom:4svh; }
  .home-cosmos .cs-tools .cs-eds { width:min(100%, 128svh); }
  .home-cosmos .cs-ed { animation-name:f-card; }
  .home-cosmos .cs-ed:nth-child(1) { animation-range:contain 19% contain 25%; }
  .home-cosmos .cs-ed:nth-child(2) { animation-range:contain 20.2% contain 26.2%; }
  .home-cosmos .cs-ed:nth-child(3) { animation-range:contain 21.4% contain 27.4%; }
  .home-cosmos .cs-ed:nth-child(4) { animation-range:contain 22.6% contain 28.6%; }
  /* shot 4: the small tools */
  .home-cosmos .cs-fall { animation-name:f-fall; }
  .home-cosmos .cs-st { animation-name:f-land; }
  .home-cosmos .cs-st:nth-child(1) { animation-range:contain 38% contain 41%; } .home-cosmos .cs-st:nth-child(2) { animation-range:contain 39% contain 42%; }
  .home-cosmos .cs-st:nth-child(3) { animation-range:contain 40% contain 43%; } .home-cosmos .cs-st:nth-child(4) { animation-range:contain 41% contain 44%; }
  .home-cosmos .cs-st:nth-child(5) { animation-range:contain 42% contain 45%; } .home-cosmos .cs-st:nth-child(6) { animation-range:contain 43% contain 46%; }
  /* shot 5: the templates pass by */
  .home-cosmos .cs-tpl { animation-name:f-io; animation-range:contain 52% contain 66%; }
  .home-cosmos .cs-earth { animation-name:f-io; animation-range:contain 52% contain 66%; display:flex; align-items:flex-end; padding-bottom:clamp(40px, 9svh, 96px); }
  .home-cosmos .cs-orb-c { position:static; display:flex; gap:18px; width:max-content; max-width:none; margin:0; padding:0 0 0 100vw; grid-template-columns:none;
    animation-name:f-dolly; animation-range:contain 52% contain 66%; }
  .home-cosmos .cs-tp span { width:clamp(150px, 17vw, 250px); }
  .home-cosmos .cs-tp:nth-child(even) span { translate:0 -36px; }
  .home-cosmos .cs-tp:nth-child(odd) span, .home-cosmos .cs-tp:nth-child(even) span { animation:none; }
  /* shot 6: Mongolia */
  .home-cosmos .cs-local { animation-name:f-io; animation-range:contain 66% contain 80%; }
  .home-cosmos .cs-mn { animation-name:f-land-map; display:flex; align-items:flex-end; justify-content:center; padding:0 var(--pad) 6svh; }
  .home-cosmos .cs-mn-map { width:min(86vw, 860px, 112svh); }
  .home-cosmos .cs-mn-l { stroke-dasharray:1; animation-name:f-draw; }
  .home-cosmos .cs-mn-f { animation-name:f-fill; }
  .home-cosmos .cs-w { animation-name:f-word; animation-range:contain var(--a) contain var(--b); }
  .home-cosmos .cs-pin { animation-name:f-word; animation-range:contain var(--a) contain var(--b); }
  /* shot 7: the reviews, one at a time */
  .home-cosmos .cs-rv { animation-name:f-io; animation-range:contain 79% contain 92%; pointer-events:none; }
  .home-cosmos .cs-rcs { display:block; position:absolute; left:0; right:0; bottom:max(28px, 7svh); margin:0; }
  .home-cosmos .cs-rc { position:absolute; left:0; right:0; bottom:0; width:min(92vw, 560px); margin:0 auto; pointer-events:auto; animation-name:f-io; animation-range:contain var(--a) contain var(--b); }
  /* shot 8: the closing call */
  .home-cosmos .cs-end { animation-name:f-in; animation-range:contain 93% contain 99%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:0 !important; }

  @media (max-width:760px) {
    .home-cosmos .cs-eds { gap:8px; }
    .home-cosmos .cs-ed { aspect-ratio:3 / 4; }
    .home-cosmos .cs-sts { grid-template-columns:1fr 1fr; }
    .home-cosmos .cs-st { padding:14px 12px; }
    .home-cosmos .cs-st small { display:none; }
    .home-cosmos .cs-mn-map { width:94vw; }
  }
}
}
@keyframes f-hole { 0% { transform:none; opacity:1; filter:none; } 12% { transform:scale(1.35); filter:brightness(1.1); } 17% { transform:scale(4); opacity:1; filter:brightness(1.8) saturate(1.3); }
  20% { transform:scale(7); opacity:0; } 100% { transform:scale(7); opacity:0; visibility:hidden; } }
@keyframes f-hero { 0% { opacity:1; transform:none; } 6% { opacity:0; transform:translateY(-8vh); visibility:visible; } 6.1%, 100% { opacity:0; visibility:hidden; } }
@keyframes f-sky { 0%, 13% { opacity:0; transform:scale(3) rotate(-12deg); } 18% { opacity:1; transform:scale(1.6) rotate(-4deg); } 24% { opacity:.5; transform:scale(1.05); }
  50% { opacity:.38; transform:scale(1.15) rotate(6deg); } 92% { opacity:.4; transform:scale(1.3) rotate(18deg); } 100% { opacity:.15; transform:scale(1.4) rotate(22deg); } }
@keyframes f-tools { 0%, 18% { opacity:0; visibility:hidden; } 18.1% { opacity:0; visibility:visible; transform:none; } 21% { opacity:1; } 31% { opacity:1; transform:none; }
  36% { opacity:0; transform:scale(1.25) translateY(-6vh); visibility:visible; } 36.1%, 100% { opacity:0; visibility:hidden; } }
@keyframes f-card { from { opacity:0; transform:translateY(30vh) scale(.7) rotateX(30deg); filter:blur(12px); } to { opacity:1; transform:none; filter:none; } }
@keyframes f-fall { 0%, 36% { opacity:0; visibility:hidden; } 36.1% { visibility:visible; } 39% { opacity:1; transform:none; } 48% { opacity:1; transform:none; }
  52% { opacity:0; transform:translateY(-8vh); visibility:visible; } 52.1%, 100% { opacity:0; visibility:hidden; } }
@keyframes f-land { from { opacity:0; transform:translate(10vw, -30vh) scale(.6); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes f-dolly { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 100vw - 20vw)); } }
@keyframes f-land-map { 0%, 66% { opacity:0; transform:scale(2.4); visibility:hidden; } 66.1% { visibility:visible; } 72% { opacity:1; transform:none; } 78% { opacity:1; transform:none; }
  81% { opacity:0; transform:scale(.6); visibility:visible; } 81.1%, 100% { opacity:0; visibility:hidden; } }
@keyframes f-draw { 0%, 68% { stroke-dashoffset:1; } 75%, 100% { stroke-dashoffset:0; } }
@keyframes f-fill { 0%, 72% { opacity:0; } 77%, 100% { opacity:1; } }
@keyframes f-word { 0% { opacity:0; transform:scale(.5); } 100% { opacity:1; transform:none; } }
@keyframes f-io { 0% { opacity:0; transform:translateY(5vh); visibility:hidden; } .1% { visibility:visible; } 16% { opacity:1; transform:none; } 84% { opacity:1; transform:none; }
  99.9% { visibility:visible; } 100% { opacity:0; transform:translateY(-5vh); visibility:hidden; } }
@keyframes f-in { 0% { opacity:0; transform:translateY(5vh) scale(.96); visibility:hidden; } .1% { visibility:visible; } 100% { opacity:1; transform:none; visibility:visible; } }
@keyframes u-turn { from { transform:rotate(-14deg) scale(.85); opacity:0; } 40% { opacity:.55; } to { transform:rotate(10deg) scale(1.08); } }

/* the header turns to smoked glass once the page moves */
.gh.scrolled { -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); }

/* ---------- the technical layer: a blueprint grid, HUD readouts, chapter rail, Mongolian key pattern ---------- */
:root { --u-mono:ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; }
/* a fine blueprint grid over the dark pages, fading towards the edges (one fixed layer, painted once) */
body.home-cosmos::after, html:has(link[href*="cosmos.css"]) body::after { content:""; position:fixed; inset:0; z-index:5; pointer-events:none; animation:none; opacity:1;
  background:linear-gradient(#ffffff0b 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(90deg, #ffffff0b 1px, transparent 1px) 0 0 / 88px 88px;
  -webkit-mask:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 85%); mask:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 85%); mix-blend-mode:normal; }
/* the alkhan (key) pattern of Mongolian ornament as a thin royal-blue band: under the header, above sections and the footer */
.gh::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:8px; pointer-events:none; opacity:.55;
  background:url(/assets/ulzii/khee.svg?v=1) 0 0 / 16px 8px repeat-x; -webkit-mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.home-cosmos .price::after, .home-cosmos .web::before, .home-cosmos .footer-top::before, html:has(link[href*="cosmos.css"]) .ft::after {
  content:""; display:block; height:16px; margin:0 0 clamp(36px, 5vw, 64px); opacity:.6; pointer-events:none;
  background:url(/assets/ulzii/khee.svg?v=1) 0 0 / 32px 16px repeat-x; -webkit-mask:linear-gradient(90deg, #000, transparent 70%); mask:linear-gradient(90deg, #000, transparent 70%); }
.home-cosmos .price::after { position:absolute; left:var(--pad); right:var(--pad); bottom:0; margin:0; }
.home-cosmos .footer-top::before { position:absolute; left:0; right:0; top:-40px; margin:0; }
.home-cosmos .footer-top { position:relative; }
html:has(link[href*="cosmos.css"]) .ft::after { position:absolute; left:0; right:0; top:0; margin:0; }

/* eyebrows read like instrument labels: monospace, numbered */
body { counter-reset:u-sec; }
.home-cosmos .eyebrow, html:has(link[href*="cosmos.css"]) :is(.eyebrow, .kicker, .lp-kick, .ft-kicker, .dp-sub) { font-family:var(--u-mono); letter-spacing:.16em; }
.home-cosmos .cs-sc > .eyebrow::before, .home-cosmos .section .section-head .eyebrow::before, .home-cosmos .section > .eyebrow::before {
  counter-increment:u-sec; content:"[" counter(u-sec, decimal-leading-zero) "] "; color:#2148f3; font-weight:700; }
.home-cosmos .cs-hero .eyebrow::before { content:"[00] "; color:#2148f3; counter-increment:none; }

/* HUD frame on the hero */
.u-hud { position:absolute; inset:96px var(--pad) 18px; pointer-events:none; z-index:2; font:500 10.5px/1.6 var(--u-mono); letter-spacing:.14em; color:#ffffff8c; }
.u-c { position:absolute; width:18px; height:18px; border:0 solid #ffffff66; }
.u-c.tl { left:0; top:0; border-width:1px 0 0 1px; } .u-c.tr { right:0; top:0; border-width:1px 1px 0 0; }
.u-c.bl { left:0; bottom:0; border-width:0 0 1px 1px; } .u-c.br { right:0; bottom:0; border-width:0 1px 1px 0; }
.u-ro { position:absolute; white-space:nowrap; } .u-ro b { color:#fff; font-weight:600; }
.u-ro.tl { left:30px; top:10px; } .u-ro.tr { right:30px; top:10px; text-align:right; }
.u-dot { display:inline-block; width:6px; height:6px; margin:0 8px 1px 0; border-radius:50%; background:#d5323b; box-shadow:0 0 8px #d5323b; vertical-align:middle; }
@media (prefers-reduced-motion:no-preference) {
  .u-hud { animation:u-in 1.2s var(--u-ease) 1.1s both; }
    .u-dot { animation:u-blink 1.6s steps(2) infinite; }
}
@keyframes u-blink { 50% { opacity:.25; } }
@media (max-width:900px) { .u-hud { inset:82px 14px 12px; font-size:9px; } @media (max-width:600px) { .u-ro.tl { display:none; } }

/* the chapter rail of the home film */
.u-rail { position:fixed; left:clamp(10px, 1.6vw, 28px); top:50%; z-index:40; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; pointer-events:none;
  font:600 9.5px/1 var(--u-mono); letter-spacing:.12em; color:#ffffff59; transition:opacity .5s; }
.u-rail i { display:flex; align-items:center; gap:8px; font-style:normal; }
.u-rail i::before { content:""; width:10px; height:1px; background:currentColor; transition:width .5s var(--u-ease), background .3s; }
.u-rail i.on { color:#fff; } .u-rail i.on::before { width:26px; background:#2148f3; box-shadow:0 0 8px #2148f3; }
.u-pct { margin-top:8px; padding-top:10px; border-top:1px solid #ffffff26; color:#ffffff8c; }
.u-pct::after { content:" %"; }
.u-rail.gone { opacity:0; }
@media (max-width:1199px) { .u-rail { display:none; } }

/* cards get instrument corners */
.home-cosmos .pr-c, .home-cosmos .wl-card, .gc { position:relative; }
.home-cosmos .pr-c::after, .home-cosmos .wl-card::after, html:has(link[href*="cosmos.css"]) .gc::after { content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit;
  background:linear-gradient(#2148f3, #2148f3) 0 0 / 14px 1px, linear-gradient(#2148f3, #2148f3) 0 0 / 1px 14px,
    linear-gradient(#2148f3, #2148f3) 100% 100% / 14px 1px, linear-gradient(#2148f3, #2148f3) 100% 100% / 1px 14px; background-repeat:no-repeat; opacity:.9; }
.home-cosmos .pr-c.best::after { background:linear-gradient(#fff, #fff) 0 0 / 14px 1px, linear-gradient(#fff, #fff) 0 0 / 1px 14px, linear-gradient(#fff, #fff) 100% 100% / 14px 1px, linear-gradient(#fff, #fff) 100% 100% / 1px 14px; background-repeat:no-repeat; }

@media (prefers-reduced-motion:reduce) { .bt.pri, .gc, .home-cosmos .pr-c, .cs-ed { transition:none; } .home-cosmos .cs-hero h1 { background-position:50% 0; } }