/* ==========================================================================
   BOSA Omni AI — product demo widgets (SPEC §7.3) · owned by the demos agent
   terminal · pipeline · chat · polyglot · studio
   Every widget renders a complete static final state; .is-live is added by its JS module.
   Logical properties only (RTL); the pipeline diagram alone is forced LTR.
   ========================================================================== */

.demo {
  /* Demo-scoped accents (diff / status colours that the brand scale does not cover) */
  --demo-mint: #7fdcb5;
  --demo-rose: #ff9d92;
  --demo-violet: #b4a2ff;
  --demo-mono: 13px;
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--text-2);
}
.demo code { font-family: var(--font-mono); font-size: 0.94em; }
/* Controls are printed disabled (without JS there is nothing to control); each module enables them. */
.demo button:disabled, .demo input:disabled { cursor: default; }
.demo :where(p) code { padding: 0.08em 0.36em; border-radius: 5px; background: rgba(207, 226, 255, 0.08); color: var(--ice); }

/* Ghost typing (js/demo/_kit.js makeTyper): untyped text keeps its place, invisible */
.demo .k-off { color: transparent !important; -webkit-text-fill-color: transparent; }
.demo .k-caret { display: none; }
.demo .is-typing .k-caret {
  display: inline-block;
  width: 0;
  height: 1.15em;
  margin-inline-end: -2px;
  border-inline-start: 2px solid var(--gold-2);
  vertical-align: text-bottom;
  animation: demo-blink 1s steps(1) infinite;
}
@keyframes demo-blink { 50% { opacity: 0; } }

/* Syntax tokens (demo_hl / highlight) */
.demo .tk-k { color: var(--blue-2); }
.demo .tk-s { color: var(--gold-2); }
.demo .tk-c { color: var(--text-3); font-style: italic; }
.demo .tk-n { color: var(--gold-3); }
.demo .tk-f { color: var(--ice); }
.demo .tk-o { color: var(--text-3); }

/* ==========================================================================
   1 · TERMINAL — Omni Code session
   ========================================================================== */
.demo-terminal { --term-h: 540px; --demo-mono: 13px; container: demo-terminal / inline-size; }
.demo-terminal--compact { --term-h: 396px; --demo-mono: 12.5px; }

/* Demo windows are ~95% opaque: a backdrop blur would be invisible but expensive (every animated frame
   inside re-composites it), so the shared .window blur is switched off here. */
.demo-terminal__window, .demo-chat__window { -webkit-backdrop-filter: none; backdrop-filter: none; }
.demo-terminal__window {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(31, 111, 209, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(15, 29, 51, 0.94), rgba(5, 10, 21, 0.97));
}
.demo-terminal__window::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 90, 0.6), rgba(61, 139, 255, 0.5), transparent);
  pointer-events: none;
}
.demo-terminal__title { letter-spacing: 0.02em; }

/* Agent chips */
.demo-terminal__agents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--line);
  background: rgba(3, 6, 13, 0.25);
}
.demo-terminal [data-agent="planner"] { --ag: var(--gold-2); --ag-rgb: 255, 201, 90; }
.demo-terminal [data-agent="frontend"] { --ag: var(--blue-2); --ag-rgb: 61, 139, 255; }
.demo-terminal [data-agent="backend"] { --ag: var(--demo-violet); --ag-rgb: 180, 162, 255; }
.demo-terminal [data-agent="debugger"] { --ag: var(--demo-rose); --ag-rgb: 255, 157, 146; }
.demo-terminal [data-agent="qa"] { --ag: var(--demo-mint); --ag-rgb: 127, 220, 181; }

.demo-terminal__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding-inline: 9px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(207, 226, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur);
}
.demo-terminal__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(207, 226, 255, 0.25);
  transition: background-color var(--dur), box-shadow var(--dur);
}
.demo-terminal.is-live .demo-terminal__chip:not(.is-ready) { opacity: 0.4; }
.demo-terminal__chip.is-ready .demo-terminal__dot { background: rgba(var(--ag-rgb), 0.45); }
.demo-terminal__chip.is-done { color: var(--text-2); }
.demo-terminal__chip.is-done .demo-terminal__dot { background: var(--ag); }
.demo-terminal__chip.is-active {
  color: var(--text);
  border-color: rgba(var(--ag-rgb), 0.45);
  background: rgba(var(--ag-rgb), 0.12);
  box-shadow: 0 0 22px -6px rgba(var(--ag-rgb), 0.7);
}
.demo-terminal__chip.is-active .demo-terminal__dot {
  background: var(--ag);
  box-shadow: 0 0 0 0 rgba(var(--ag-rgb), 0.6);
  animation: demo-ping 1.2s var(--ease-out) infinite;
}
@keyframes demo-ping {
  0% { box-shadow: 0 0 0 0 rgba(var(--ag-rgb, 255, 201, 90), 0.65); }
  100% { box-shadow: 0 0 0 7px rgba(var(--ag-rgb, 255, 201, 90), 0); }
}

/* Screen + log */
.demo-terminal__screen {
  position: relative;
  padding: 18px 18px 20px;
  font-family: var(--font-mono);
  font-size: var(--demo-mono);
  line-height: 1.62;
}
.js .demo-terminal__screen {
  height: var(--term-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* poster: the finished session, scrolled to the end */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 14px), transparent);
}
.demo-terminal.is-live .demo-terminal__screen { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .js .demo-terminal__screen { height: auto; display: block; -webkit-mask-image: none; mask-image: none; }
}

.demo-terminal__log {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.tl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  min-width: 0;
}
.tl__gutter { color: var(--text-3); text-align: end; user-select: none; }
.tl__main { min-width: 0; overflow-wrap: anywhere; }
.tl--agent { margin-block-start: 8px; }
.tl--agent .tl__main { color: var(--text); }

.tl__tag {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--ag-rgb), 0.3);
  background: rgba(var(--ag-rgb), 0.1);
  color: var(--ag);
  font-size: 0.84em;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
}
.tl__tag--planner { --ag: var(--gold-2); --ag-rgb: 255, 201, 90; }
.tl__tag--frontend { --ag: var(--blue-2); --ag-rgb: 61, 139, 255; }
.tl__tag--backend { --ag: var(--demo-violet); --ag-rgb: 180, 162, 255; }
.tl__tag--debugger { --ag: var(--demo-rose); --ag-rgb: 255, 157, 146; }
.tl__tag--qa { --ag: var(--demo-mint); --ag-rgb: 127, 220, 181; }

.tl__where { color: var(--text-3); font-size: 0.92em; margin-inline-start: 4px; }
.tl--agent .tl__where::before { content: "· "; }

/* user prompt */
.tl--user .tl__main {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(207, 226, 255, 0.04);
  color: var(--text);
}
.tl--user .tl__gutter { padding-block-start: 10px; color: var(--gold-2); }
.tl__err { color: var(--demo-rose); font-size: 1em; }

.tl__num { font-size: 0.9em; color: var(--text-3); }
.tl--task .tl__main { color: var(--text-2); }
.tl--note .tl__main { color: var(--text-2); }
.tl--note code { padding: 0.05em 0.35em; border-radius: 5px; background: rgba(207, 226, 255, 0.08); color: var(--ice); }

/* "In plain words" */
.tl__plain {
  position: relative;
  margin-block: 4px;
  padding: 11px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 201, 90, 0.2);
  background: linear-gradient(100deg, rgba(240, 169, 30, 0.1), rgba(240, 169, 30, 0.02) 70%);
  font-family: var(--font-sans);
}
.tl__plain::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
}
.tl__plain-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.tl__plain-label .icon { width: 12px; height: 12px; fill: currentColor; stroke-width: 1; }
.tl__plain p { font-size: calc(var(--demo-mono) + 1.5px); line-height: 1.55; color: var(--text); }

/* Diff */
.tl__diff {
  margin-block: 2px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(3, 6, 13, 0.55);
  overflow: hidden;
  text-align: start;
}
.dl {
  display: grid;
  grid-template-columns: 3.2ch 2ch minmax(0, 1fr);
  padding-inline: 8px 12px;
  padding-block: 2px;
  line-height: 1.7;
}
.dl code { font-size: 1em; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.dl__n { color: rgba(125, 140, 165, 0.6); text-align: end; padding-inline-end: 8px; font-size: 0.9em; }
.dl__s { color: var(--text-3); }
.dl--ctx code { color: var(--text-3); }
.dl--del { background: rgba(255, 157, 146, 0.09); }
.dl--del .dl__s { color: var(--demo-rose); }
.dl--del code { text-decoration: line-through; text-decoration-color: rgba(255, 157, 146, 0.35); }
.dl--add { background: rgba(127, 220, 181, 0.1); box-shadow: inset 2px 0 0 rgba(127, 220, 181, 0.6); }
.dl--add .dl__s { color: var(--demo-mint); }
.dl--file { display: block; padding-block: 5px; border-block-end: 1px solid var(--line); color: var(--text-3); background: rgba(207, 226, 255, 0.03); }
.dl--file code { color: var(--text-3); }

/* Tests */
.tl__ok { display: inline-grid; justify-items: end; color: var(--demo-mint); }
.tl__ok .icon { width: 15px; height: 15px; margin-block-start: 3px; stroke-width: 2; }
.tl--test .tl__main { color: var(--text-2); }
.tl--test.is-busy .tl__ok .icon { opacity: 0; }
.tl--test.is-busy .tl__ok::before {
  content: "";
  grid-area: 1 / 1;
  width: 11px;
  height: 11px;
  margin-block-start: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(127, 220, 181, 0.25);
  border-block-start-color: var(--demo-mint);
  animation: demo-spin 0.7s linear infinite;
}
.tl--test.is-busy .tl__ok .icon { grid-area: 1 / 1; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
.tl--pass .tl__main { color: var(--demo-mint); }

/* Deployed */
.tl--done { margin-block-start: 10px; padding-block-start: 12px; border-block-start: 1px dashed var(--line-strong); }
.tl__seal {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #1c1303;
  background: radial-gradient(circle at 35% 30%, var(--gold-3), var(--gold-2) 45%, var(--gold));
  box-shadow: 0 0 0 4px rgba(240, 169, 30, 0.14), 0 0 24px rgba(255, 201, 90, 0.55);
}
.tl__seal .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.tl--done .tl__main { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-sans); }
.tl--done strong {
  font-size: calc(var(--demo-mono) + 3px);
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--gold-3), var(--gold-2) 50%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tl__note { font-size: calc(var(--demo-mono) + 0.5px); color: var(--text-3); }

/* Footer: input + status */
.demo-terminal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-block-start: 1px solid var(--line);
  background: rgba(3, 6, 13, 0.35);
  font-family: var(--font-mono);
  font-size: 12px;
}
.demo-terminal__input { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text-3); }
.demo-terminal__prompt { color: var(--gold-2); }
.demo-terminal__placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-terminal__caret { flex-shrink: 0; width: 7px; height: 14px; margin-inline-start: -4px; background: rgba(255, 201, 90, 0.8); animation: demo-blink 1.1s steps(1) infinite; }
.demo-terminal__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.demo-terminal__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.demo-terminal__status[data-state="working"] { color: var(--ice); }
.demo-terminal__status[data-state="working"] .demo-terminal__status-dot { --ag-rgb: 61, 139, 255; background: var(--blue-2); animation: demo-ping 1.2s var(--ease-out) infinite; }
.demo-terminal__status[data-state="done"] { color: var(--gold-2); }
.demo-terminal__status[data-state="done"] .demo-terminal__status-dot { background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); }

@media (max-width: 640px) {
  .demo-terminal { --term-h: 500px; --demo-mono: 12px; }
  .demo-terminal--compact { --term-h: 380px; }
  .demo-terminal__agents { padding: 10px 12px; gap: 5px; }
  .demo-terminal__chip { height: 24px; padding-inline: 8px 9px; font-size: 10.5px; }
  .demo-terminal__screen { padding: 14px 12px 16px; }
  .demo-terminal__log { column-gap: 8px; }
  .tl--agent { grid-template-columns: minmax(0, 1fr); }
  .tl--agent .tl__tag { grid-column: 1 / -1; margin-block-end: 2px; }
  .tl--agent .tl__main { grid-column: 1 / -1; }
  .tl:is(.tl--plain, .tl--diff, .tl--note) > .tl__gutter { display: none; }
  .tl:is(.tl--plain, .tl--diff, .tl--note) > .tl__main { grid-column: 1 / -1; }
  .demo-terminal__foot { padding: 10px 12px; }
}
/* Narrow window: the status keeps its dot, its words stay for screen readers only */
@container demo-terminal (max-width: 479px) {
  .demo-terminal__status [data-status-text] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   2 · PIPELINE — one prompt → reformulate → agents → resources → result
   The diagram is always LTR (labels keep their own dir). Layouts:
   h — horizontal, widget ≥ 1080px wide (both variants)
   v — vertical circuit (full, narrower): agents with their task text
   c — vertical trunk (compact, narrower): a 2 × 3 grid of agent chips, far shorter
   The narrow layout's viewBox comes from --mvw / --mvh (set inline by the partial).
   ========================================================================== */
.demo-pipeline { container: demo-pipeline / inline-size; }
.demo-pipeline__diagram {
  position: relative;
  direction: ltr;
  aspect-ratio: 1300 / 620;
  container-type: inline-size;
  isolation: isolate;
}
.demo-pipeline__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.demo-pipeline__svg:not(.demo-pipeline__svg--h) { display: none; }

.pp-tracks path { fill: none; stroke: rgba(160, 190, 235, 0.14); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.pp-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-lines--blue .pp-line { stroke: color-mix(in srgb, var(--blue-2) 58%, var(--bg-1)); }
.pp-lines--gold .pp-line { stroke: var(--gold); stroke-width: 2.2; }
.pp-lines--blue { filter: drop-shadow(0 0 5px rgba(61, 139, 255, 0.35)); }
.pp-lines--gold { filter: drop-shadow(0 0 6px rgba(240, 169, 30, 0.5)); }
.pp-guides path { fill: none; stroke: none; }
.pp-pulses { opacity: 0; }
.pp-pulse { opacity: 0; }
.pp-core { fill: var(--ice-2); }
.pp-pulse--gold .pp-core { fill: #fff8e6; }
.pp-stop-gold { stop-color: var(--gold-2); }
.pp-stop-blue { stop-color: var(--blue-2); }

/* Nodes (HTML over the SVG, placed in viewBox units) */
.pp-node {
  position: absolute;
  z-index: 1;
  inset-inline-start: calc(var(--x) / 1300 * 100%);
  inset-block-start: calc(var(--y) / 620 * 100%);
  width: calc(var(--w) / 1300 * 100%);
  translate: 0 -50%;
  font-size: clamp(12px, 1.1cqi, 15px);
  line-height: 1.35;
}
.pp-node [dir="rtl"] { text-align: start; }

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 1em 1.1em 1.1em;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(24, 42, 72, 0.9), rgba(8, 15, 28, 0.94));
  box-shadow: var(--shadow-1);
  overflow: hidden; /* no backdrop blur: the card is ~92% opaque and pulses move underneath */
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.pp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pp-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: max(11.5px, 0.8em);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.pp-label .icon { width: 1.3em; height: 1.3em; flex-shrink: 0; color: var(--gold-2); }
.pp-prompt { font-size: 1.14em; line-height: 1.32; color: var(--text); letter-spacing: -0.01em; }
.pp-prompt q { quotes: auto; }
.pp-w { display: inline; }
.pp-sub { font-size: max(12px, 0.84em); color: var(--gold-2); }

.pp-brief { display: grid; gap: 0; margin: 0.1em 0 0; }
.pp-brief__row { display: grid; gap: 0.1em; padding-block: 0.42em; border-block-start: 1px solid var(--line); }
.pp-brief__row:first-child { border-block-start: 0; padding-block-start: 0.1em; }
.pp-brief dt { font-family: var(--font-mono); font-size: max(11px, 0.74em); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pp-brief dd { margin: 0; font-size: 0.96em; color: var(--text); }
.pp-scan {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 8%;
  height: 10%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 201, 90, 0.16), transparent);
  pointer-events: none;
}

.pp-node--split {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.88cqi, 12.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice);
  text-align: center;
  white-space: nowrap;
}

.pp-agent {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding-block: 0.62em;
  padding-inline: 0.62em 0.8em;
  border-radius: 14px;
  border: 1px solid rgba(61, 139, 255, 0.24);
  background: linear-gradient(180deg, rgba(20, 38, 68, 0.94), rgba(8, 15, 28, 0.95));
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur);
}
.pp-agent__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: 10px;
  color: var(--ice);
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.24), rgba(61, 139, 255, 0.06));
  border: 1px solid rgba(61, 139, 255, 0.3);
}
.pp-agent__icon .icon { width: 1.2em; height: 1.2em; }
.pp-agent__text { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.pp-agent__text strong { font-size: 1em; font-weight: 500; line-height: 1.25; color: var(--text); }
.pp-agent__text span { font-size: max(12px, 0.84em); line-height: 1.3; color: var(--text-2); text-wrap: balance; }
.pp-node--agent.is-hot .pp-agent { border-color: rgba(61, 139, 255, 0.7); box-shadow: var(--shadow-1), 0 0 0 1px rgba(61, 139, 255, 0.35), 0 0 28px -4px rgba(61, 139, 255, 0.6); }
.pp-node--reform.is-hot .pp-card,
.pp-node--res.is-hot .pp-card { border-color: rgba(255, 201, 90, 0.45); box-shadow: var(--shadow-1), 0 0 30px -8px rgba(240, 169, 30, 0.55); }

/* ul[role=list] in base.css resets margins with a higher specificity: repeat the element name */
.pp-card ul.pp-res { display: grid; gap: 0.5em; margin: 0.2em 0 0; padding: 0; list-style: none; }
.pp-res__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.55em; row-gap: 0.3em; font-size: 0.94em; color: var(--text); }
.pp-res__row .icon { width: 1.2em; height: 1.2em; color: var(--ice); }
.pp-res__bar { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgba(207, 226, 255, 0.08); overflow: hidden; }
.pp-res__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-2), var(--gold-2));
  transform-origin: 0 50%;
  transform: scaleX(0.72);
  transition: transform 1.2s var(--ease-out);
}
[dir="rtl"] > .pp-res .pp-res__bar::after { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--blue-2), var(--gold-2)); }
.pp-res__row:nth-child(2) .pp-res__bar::after { transform: scaleX(0.54); }
.pp-res__row:nth-child(3) .pp-res__bar::after { transform: scaleX(0.86); }
.demo-pipeline.is-live .pp-res__row:not(.is-on) .pp-res__bar::after { transform: scaleX(0); }
.pp-node--res.is-hot .pp-res__bar::after { animation: pp-meter 1.1s var(--ease-in-out); }
@keyframes pp-meter { 50% { transform: scaleX(1); } }

.pp-card--result {
  align-items: flex-start;
  border-color: rgba(255, 201, 90, 0.35);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240, 169, 30, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(34, 36, 48, 0.94), rgba(10, 14, 24, 0.96));
  box-shadow: var(--shadow-1), 0 30px 60px -30px rgba(240, 169, 30, 0.55);
}
.pp-node--result.is-hot .pp-card--result { box-shadow: var(--shadow-1), 0 0 0 1px rgba(255, 201, 90, 0.5), 0 0 44px -6px rgba(240, 169, 30, 0.7); }
.pp-seal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  color: #1c1303;
  background: radial-gradient(circle at 35% 30%, var(--gold-3), var(--gold-2) 45%, var(--gold));
  box-shadow: 0 0 0 4px rgba(240, 169, 30, 0.14), 0 0 22px rgba(255, 201, 90, 0.5);
}
.pp-seal .icon { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.pp-result__title { font-size: 1.1em; font-weight: 500; line-height: 1.25; color: var(--text); letter-spacing: -0.01em; }
.pp-result__text { font-size: max(12px, 0.86em); color: var(--text-2); }
.pp-mock { display: grid; gap: 0.35em; width: 100%; margin-block-start: 0.4em; padding: 0.6em; border-radius: 10px; border: 1px solid var(--line); background: rgba(3, 6, 13, 0.4); }
.pp-mock i { display: block; height: 0.42em; border-radius: 4px; background: rgba(207, 226, 255, 0.12); }
.pp-mock i:first-child { width: 55%; background: linear-gradient(90deg, var(--gold-2), rgba(255, 201, 90, 0.3)); }
.pp-mock i:nth-child(2) { width: 85%; }
.pp-mock i:nth-child(3) { width: 70%; }

/* Stage captions (full). The horizontal grid follows the diagram's left-to-right flow in every
   language (each caption keeps its own dir); ol[role=list] in base.css needs the element name. */
.demo-pipeline ol.demo-pipeline__stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  direction: ltr;
}
.pp-stage { position: relative; display: grid; gap: 6px; align-content: start; padding-block-start: 16px; border-block-start: 1px solid var(--line); text-align: start; }
.pp-stage::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: 0 50%; /* the flow runs left to right in every language */
  transition: transform 700ms var(--ease-out);
}
.pp-stage__n { justify-self: start; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--text-3); transition: color var(--dur); }
.pp-stage__title { font-size: 17px; font-weight: 450; color: var(--text); letter-spacing: -0.01em; transition: color var(--dur-slow) var(--ease-out); }
.pp-stage__text { font-size: 14px; line-height: 1.5; color: var(--text-3); }
/* Waiting stages stay AA (no opacity): only the title dims and the gold line is not drawn yet */
.demo-pipeline.is-live .pp-stage:not(.is-active, .is-done) .pp-stage__title { color: var(--text-3); }
.pp-stage:is(.is-active, .is-done)::before, .demo-pipeline:not(.is-live) .pp-stage::before { transform: scaleX(1); }
.pp-stage.is-active .pp-stage__n { color: var(--gold-2); }

/* Narrow widgets: vertical layouts (v = full circuit, c = compact trunk) */
@container demo-pipeline (max-width: 1079px) {
  .demo-pipeline__diagram { aspect-ratio: var(--mvw) / var(--mvh); max-width: 460px; margin-inline: auto; }
  .demo-pipeline__svg--h { display: none; }
  .demo-pipeline__svg:not(.demo-pipeline__svg--h) { display: block; }
  .pp-node {
    inset-inline-start: calc(var(--mx) / var(--mvw) * 100%);
    inset-block-start: calc(var(--my) / var(--mvh) * 100%);
    width: calc(var(--mw) / var(--mvw) * 100%);
    font-size: clamp(12.5px, 3.5cqi, 15px);
  }
  .pp-node--split { font-size: clamp(11px, 2.8cqi, 12.5px); text-align: start; }
  .pp-agent__text span { text-wrap: pretty; }
  .pp-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1em; }
  .pp-brief__row:nth-child(2) { border-block-start: 0; padding-block-start: 0.1em; }
  .pp-card--result { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0.8em; }
  .pp-card--result .pp-result__text { flex-basis: 100%; }
  .pp-mock { display: none; }
  .pp-card ul.pp-res { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1em; }
  .demo-pipeline ol.demo-pipeline__stages { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; gap: 0; direction: inherit; }
  .pp-stage { grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding-block: 12px; }
  .pp-stage__n { grid-row: span 2; padding-block-start: 3px; }
  .pp-stage[dir="rtl"]::before { transform-origin: 100% 50%; }

  /* compact trunk: the split label sits beside the spine, agents are icon + name chips */
  .demo-pipeline--compact .pp-node--split { text-align: end; }
  .demo-pipeline--compact .pp-brief,
  .demo-pipeline--compact .pp-agent__text span { display: none; }
  .demo-pipeline--compact .pp-card { gap: 0.3em; padding: 0.85em 1em 0.9em; }
  .demo-pipeline--compact .pp-agent { padding-block: 0.55em; }
  .demo-pipeline--compact .pp-agent__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-pipeline--compact .pp-prompt { font-size: 1.08em; }
}

/* ==========================================================================
   3 · CHAT — Omni Chat with visible reasoning, multilingual
   ========================================================================== */
.demo-chat { --chat-h: 452px; --chat-fs: 15px; }
.demo-chat--compact { --chat-h: 356px; --chat-fs: 14px; }

.demo-chat__window {
  background:
    radial-gradient(90% 50% at 0% 0%, rgba(61, 139, 255, 0.12), transparent 60%),
    radial-gradient(70% 40% at 100% 100%, rgba(240, 169, 30, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(15, 29, 51, 0.94), rgba(5, 10, 21, 0.97));
}
.demo-chat__body { position: relative; padding: 22px 20px 18px; }
/* JS: a fixed-height, scrollable conversation (exchanges are appended below). The top edge fades
   under a sticky cap (a mask-image on the scroller would repaint the whole layer on every scroll). */
.js .demo-chat__body {
  height: var(--chat-h);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(207, 226, 255, 0.14) transparent;
}
.js .demo-chat__body::before {
  content: "";
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  display: block;
  height: 26px;
  margin-block: -22px -4px;
  margin-inline: -20px;
  background: linear-gradient(180deg, rgb(14, 27, 48) 15%, rgba(14, 27, 48, 0));
  pointer-events: none;
}
.demo-chat__body:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .js .demo-chat__body { height: auto; } .js .demo-chat__body::before { display: none; } }
.demo-chat__log { display: flex; flex-direction: column; gap: 26px; }
.demo-chat__ex { display: flex; flex-direction: column; gap: 16px; transition: opacity 700ms var(--ease-out); }
.demo-chat__ex.is-past { opacity: 0.72; }

.demo-chat__row--user { display: flex; justify-content: flex-end; }
.demo-chat__bubble {
  max-width: min(84%, 460px);
  padding: 11px 16px 12px;
  border-radius: 20px;
  border-end-end-radius: 6px;
  border: 1px solid rgba(61, 139, 255, 0.3);
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.24), rgba(31, 111, 209, 0.14));
  color: var(--text);
  font-size: var(--chat-fs);
  line-height: 1.5;
  box-shadow: 0 12px 30px -18px rgba(31, 111, 209, 0.8);
}

.demo-chat__row--omni { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.demo-chat__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 201, 90, 0.28);
  background: radial-gradient(circle at 50% 35%, rgba(22, 40, 70, 0.9), rgba(6, 12, 24, 0.95));
  box-shadow: 0 0 18px -6px rgba(240, 169, 30, 0.6);
}
.demo-chat__avatar img { width: 22px; height: 22px; object-fit: contain; }
.demo-chat__avatar--upload { overflow: hidden; }
.demo-chat__avatar--upload img { width: 24px; height: 24px; }
.demo-chat__reply { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-block-start: 2px; }

/* Thinking block */
.demo-chat__think { align-self: flex-start; max-width: 100%; }
.demo-chat__think-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(207, 226, 255, 0.04);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.demo-chat__think-head::-webkit-details-marker { display: none; }
.demo-chat__think-head:hover { background: rgba(207, 226, 255, 0.08); border-color: var(--line-strong); }
.demo-chat__think-icon { display: grid; color: var(--gold-2); }
.demo-chat__think-icon .icon { width: 14px; height: 14px; fill: currentColor; stroke-width: 1; }
.demo-chat__think-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-3); }
.demo-chat__think-count:empty { display: none; }
.demo-chat__think-chev { display: grid; color: var(--text-3); transition: transform var(--dur) var(--ease-out); }
.demo-chat__think-chev .icon { width: 14px; height: 14px; }
.demo-chat__think[open] .demo-chat__think-chev { transform: rotate(180deg); }
.demo-chat__think.is-thinking .demo-chat__think-icon { animation: demo-spin 2.4s linear infinite; }
.demo-chat__think.is-thinking .demo-chat__think-label,
.demo-chat__steps li.is-active {
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 35%, var(--ice-2) 50%, var(--text-3) 65%, var(--text-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: demo-shimmer 1.6s linear infinite;
}
@keyframes demo-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.demo-chat__steps {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 10px 0 2px;
  padding: 2px 0 2px 0;
  padding-inline-start: 20px;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.demo-chat__steps::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 5px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 201, 90, 0.4), var(--line));
}
.demo-chat__steps li { position: relative; }
.demo-chat__steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: -18px;
  inset-block-start: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(207, 226, 255, 0.35);
  background: var(--bg-2);
}
.demo-chat__steps li.is-done::before, .demo-chat:not(.is-live) .demo-chat__steps li::before { background: var(--gold-2); border-color: var(--gold-2); }
.demo-chat__steps li.is-active::before { border-color: var(--ice); background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.demo-chat__steps code { color: var(--ice); font-size: 0.92em; }

/* Typing indicator */
.demo-chat__typing { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.demo-chat__dots { display: inline-flex; gap: 4px; }
.demo-chat__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ice); opacity: 0.4; animation: demo-dot 1s var(--ease-in-out) infinite; }
.demo-chat__dots i:nth-child(2) { animation-delay: 0.15s; }
.demo-chat__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes demo-dot { 30% { opacity: 1; transform: translateY(-3px); } }

/* Answer */
.demo-chat__answer { display: flex; flex-direction: column; gap: 12px; font-size: var(--chat-fs); line-height: 1.6; color: var(--text-2); }
.demo-chat__answer p { text-wrap: pretty; }
.demo-chat .w.is-new { animation: demo-word 420ms var(--ease-out) both; }
@keyframes demo-word { from { opacity: 0; filter: blur(3px); } }
.demo-chat__code {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(3, 6, 13, 0.62);
  overflow: hidden;
  text-align: start;
}
.demo-chat__code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 4px 12px;
  padding-inline: 12px 6px;
  border-block-end: 1px solid var(--line);
  background: rgba(207, 226, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.demo-chat__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 8px;
  border-radius: 7px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-3);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.demo-chat__copy .icon { width: 13px; height: 13px; }
.demo-chat__copy:not(:disabled):hover { color: var(--text); background: rgba(207, 226, 255, 0.07); }
.demo-chat__copy.is-copied { color: var(--demo-mint); }
.demo-chat__copy:disabled { cursor: default; }
.demo-chat__code pre { margin: 0; padding: 11px 14px 12px; font-size: calc(var(--chat-fs) - 2.5px); line-height: 1.65; color: var(--text-2); }
.demo-chat__code code { font-size: 1em; }
.demo-chat__code .cl { display: block; min-height: 1.65em; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Composer */
.demo-chat__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline: 14px;
  padding: 8px 8px 8px 16px;
  padding-inline: 16px 8px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(3, 6, 13, 0.5);
}
.demo-chat__input { flex: 1; min-width: 0; min-height: 22px; font-size: 14px; line-height: 22px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-chat__input.is-typing { display: flex; justify-content: flex-end; text-overflow: clip; }
.demo-chat__input.is-typing .demo-chat__typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 1px; vertical-align: text-bottom; background: var(--gold-2); animation: demo-blink 1s steps(1) infinite; }
.demo-chat__ph { color: var(--text-3); }
.demo-chat__send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-3);
  background: rgba(207, 226, 255, 0.07);
  transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.demo-chat__send .icon { width: 16px; height: 16px; }
.demo-chat__send.is-ready { color: #1c1303; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 20px -6px rgba(240, 169, 30, 0.8); }

/* Language pills */
.demo-chat__langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px 14px;
}
.demo-chat__answer-in { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.demo-chat__pills { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-chat__lang {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding-inline: 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur);
}
.demo-chat__lang:not(:disabled):hover { color: var(--text); border-color: var(--line-strong); }
.demo-chat__lang[aria-pressed="true"] { color: var(--gold-2); border-color: rgba(255, 201, 90, 0.45); background: rgba(240, 169, 30, 0.1); box-shadow: 0 0 18px -8px rgba(240, 169, 30, 0.8); }
.demo-chat__lang-bar { display: none; }

@media (max-width: 640px) {
  .demo-chat { --chat-h: 430px; --chat-fs: 14px; }
  .demo-chat--compact { --chat-h: 360px; }
  .demo-chat__body { padding: 18px 14px 14px; }
  .js .demo-chat__body::before { margin-block: -18px -8px; margin-inline: -14px; }
  .demo-chat__row--omni { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .demo-chat__avatar { width: 28px; height: 28px; }
  .demo-chat__avatar img { width: 19px; height: 19px; }
  .demo-chat__composer { margin-inline: 10px; }
  .demo-chat__langs { justify-content: center; padding-inline: 10px; }
  .demo-chat__answer-in { flex-basis: 100%; text-align: center; }
}

/* ==========================================================================
   4 · POLYGLOT — one sentence, many languages, huge thin type
   ========================================================================== */
.demo-polyglot {
  --poly-fs: clamp(46px, calc(6.6vw + 20px), 128px);
  position: relative;
  isolation: isolate;
  padding-block: clamp(44px, 6.5vw, 104px);
  padding-inline: var(--gutter);
  overflow: hidden;
}
.demo-polyglot--compact { --poly-fs: clamp(34px, calc(3.6vw + 20px), 76px); padding-block: clamp(28px, 4vw, 56px); }
.demo-polyglot::before {
  content: "";
  position: absolute;
  inset: 10% 15%;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 35% 50%, rgba(31, 111, 209, 0.18), transparent 70%),
    radial-gradient(40% 50% at 68% 55%, rgba(240, 169, 30, 0.1), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.demo-polyglot__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container);
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.demo-polyglot__lang { display: inline-flex; align-items: center; gap: 0.6em; color: var(--gold-2); }
.demo-polyglot__lang [lang="ar"], .demo-polyglot__lang [lang="hi"], .demo-polyglot__lang [lang="zh-Hans"], .demo-polyglot__lang [lang="ja"] { letter-spacing: 0; }
.demo-polyglot__br { color: var(--text-3); }
.demo-polyglot__index { font-variant-numeric: tabular-nums; color: var(--text-2); }
.demo-polyglot__of { color: var(--text-3); }

.demo-polyglot__stage {
  display: grid;
  align-items: center;
  margin-block: clamp(28px, 4vw, 56px);
  text-align: center;
}
.demo-polyglot__line {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: calc(var(--poly-fs) * var(--fit, 1)); /* --fit: optical width vs English (partial) */
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--text);
  text-wrap: balance;
  visibility: hidden;
}
.demo-polyglot__line.is-current { visibility: visible; }
.demo-polyglot__a, .demo-polyglot__b { display: block; max-width: 100%; }
.demo-polyglot__b {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding-inline: 0.06em;
  background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 35%, var(--gold) 70%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demo-polyglot__line:is(:lang(ar), :lang(zh), :lang(ja), :lang(hi), :lang(ru)) { letter-spacing: 0; }
.demo-polyglot__line:is(:lang(ar), :lang(zh), :lang(ja), :lang(hi), :lang(ru)) .demo-polyglot__b { font-family: var(--font-sans); font-style: normal; font-weight: 400; letter-spacing: 0; }
.demo-polyglot__line:lang(ar) { line-height: 1.3; font-weight: 300; }
.demo-polyglot__line:is(:lang(zh), :lang(ja)) { font-weight: 300; line-height: 1.18; }
.demo-polyglot__line:lang(hi) { line-height: 1.3; }

.demo-polyglot__rail {
  display: flex;
  gap: 6px;
  max-width: 560px;
  margin-inline: auto;
}
.demo-polyglot__tick {
  position: relative;
  flex: 1;
  height: 26px;
  border-radius: 4px;
}
.demo-polyglot__tick::before,
.demo-polyglot__tick i {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 2px;
  margin-block-start: -1px;
  border-radius: 2px;
}
.demo-polyglot__tick::before { background: rgba(207, 226, 255, 0.14); transition: background-color var(--dur); }
.demo-polyglot__tick:not(:disabled):hover::before { background: rgba(207, 226, 255, 0.35); }
.demo-polyglot__tick i {
  display: block;
  background: var(--grad-gold);
  box-shadow: 0 0 10px rgba(255, 201, 90, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[dir="rtl"] .demo-polyglot__tick i { transform-origin: 100% 50%; }
.demo-polyglot:not(.is-live) .demo-polyglot__tick[aria-pressed="true"] i { transform: scaleX(1); }
.demo-polyglot__tick:focus-visible { outline-offset: 1px; }

@media (max-width: 640px) {
  .demo-polyglot__rail { gap: 4px; }
  .demo-polyglot__tick { height: 30px; }
}

/* ==========================================================================
   5 · STUDIO — Omni Create board (image / video generation)
   Wide widget (≥ 880px): side panel + stage. Narrow / compact: stacked.
   ========================================================================== */
.demo-studio { container: demo-studio / inline-size; }
.demo-studio__board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "prompt" "stage" "steps" "strip";
  gap: 14px;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(31, 111, 209, 0.14), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(240, 169, 30, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(18, 32, 56, 0.72), rgba(6, 12, 24, 0.9));
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.demo-studio__side { display: contents; }

/* top bar: brand + Image / Video tabs */
.demo-studio__top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.demo-studio__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.demo-studio__brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); }
.demo-studio__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(3, 6, 13, 0.45);
}
.demo-studio__tab-ind {
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(207, 226, 255, 0.16), rgba(207, 226, 255, 0.07));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.8);
  transition: inset-inline-start 460ms var(--ease-out);
}
.demo-studio[data-mode="video"] .demo-studio__tab-ind { inset-inline-start: 50%; }
.demo-studio__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-3);
  transition: color var(--dur);
}
.demo-studio__tab .icon { width: 16px; height: 16px; }
.demo-studio__tab[aria-pressed="true"] { color: var(--text); }
.demo-studio__tab[aria-pressed="true"] .icon { color: var(--gold-2); }

/* prompt */
.demo-studio__prompt {
  grid-area: prompt;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "text go";
  align-items: end;
  gap: 8px 14px;
  padding: 14px 14px 14px 16px;
  padding-inline: 16px 12px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(3, 6, 13, 0.5);
  transition: border-color var(--dur), box-shadow var(--dur-slow) var(--ease-out);
}
.demo-studio.is-generating .demo-studio__prompt { border-color: rgba(255, 201, 90, 0.4); box-shadow: 0 0 0 4px rgba(240, 169, 30, 0.08); }
.demo-studio__prompt-label { grid-area: label; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); }
.demo-studio__prompt-label .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 1; }
.demo-studio__prompt-text { grid-area: text; min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.demo-studio__go { grid-area: go; flex-shrink: 0; }

/* steps */
.demo-studio__steps { grid-area: steps; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; padding: 4px 6px; list-style: none; }
.demo-studio__step { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-3); transition: color var(--dur); }
.demo-studio__step-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: transparent;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
.demo-studio__step-mark .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.demo-studio__step.is-done { color: var(--text-2); }
.demo-studio__step.is-done .demo-studio__step-mark { border-color: transparent; background: var(--grad-gold); color: #1c1303; }
.demo-studio__step.is-active { color: var(--text); }
.demo-studio__step.is-active .demo-studio__step-mark { border-color: rgba(255, 201, 90, 0.25); border-block-start-color: var(--gold-2); animation: demo-spin 0.8s linear infinite; }

/* strip of previous generations */
.demo-studio__strip { grid-area: strip; display: grid; gap: 10px; }
.demo-studio__strip-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding-inline: 4px; }
.demo-studio__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.demo-studio__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  transition: border-color var(--dur), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur);
}
.demo-studio__thumb:not(:disabled):hover { border-color: rgba(255, 201, 90, 0.5); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(240, 169, 30, 0.6); }
.demo-studio__thumb:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 10px; }
.demo-studio__thumb .demo-studio__art { border-radius: inherit; }
.demo-studio__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* stage */
.demo-studio__stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur);
}
.demo-studio.is-busy .demo-studio__stage {
  border-color: rgba(255, 201, 90, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 201, 90, 0.35), 0 0 0 5px rgba(240, 169, 30, 0.1), 0 30px 80px -30px rgba(240, 169, 30, 0.5);
}
.demo-studio__canvas { position: absolute; inset: 0; }
.demo-studio__art { position: absolute; inset: 0; background-color: var(--bg-2); transform-origin: 50% 50%; }
.demo-studio__fx { z-index: 1; }
.demo-studio__fx .fx-poster { display: none; }
.demo-studio__fx canvas { opacity: 0; transition: opacity 600ms var(--ease-out); }
.demo-studio__fx.is-live canvas { opacity: 1; }
.demo-studio__noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .8 0 0 0 0 .9 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(27, 36, 64, 0.85), rgba(58, 42, 24, 0.85));
  pointer-events: none;
}
.demo-studio__sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 227, 163, 0.28) 48%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 227, 163, 0.28) 52%, transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.demo-studio__hud {
  position: absolute;
  z-index: 4;
  inset-block-start: 12px;
  inset-inline: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.demo-studio__badge, .demo-studio__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding-inline: 11px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(207, 226, 255, 0.18);
  background: rgba(3, 6, 13, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ice-2);
}
.demo-studio__badge-sep { color: var(--text-3); }
.demo-studio__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--demo-mint); box-shadow: 0 0 8px var(--demo-mint); }
.demo-studio.is-busy .demo-studio__status { color: var(--gold-3); border-color: rgba(255, 201, 90, 0.35); }
.demo-studio.is-busy .demo-studio__status-dot { --ag-rgb: 255, 201, 90; background: var(--gold-2); box-shadow: none; animation: demo-ping 1.1s var(--ease-out) infinite; }

.demo-studio__progress { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 0; height: 3px; background: rgba(3, 6, 13, 0.4); opacity: 0; transition: opacity var(--dur); }
.demo-studio__progress i { display: block; height: 100%; background: var(--grad-gold); box-shadow: 0 0 12px rgba(255, 201, 90, 0.8); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .demo-studio__progress i { transform-origin: 100% 50%; }
.demo-studio.is-busy .demo-studio__progress { opacity: 1; }

/* video player */
.demo-studio__player {
  position: absolute;
  z-index: 4;
  inset-inline: 12px;
  inset-block-end: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(207, 226, 255, 0.18);
  background: rgba(3, 6, 13, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  direction: ltr;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur);
}
.demo-studio[data-mode="video"] .demo-studio__player { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.demo-studio.is-busy .demo-studio__player { opacity: 0.35; }
.demo-studio__play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #1c1303;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold-3) 60%, var(--gold-2));
  box-shadow: 0 0 16px rgba(255, 227, 163, 0.45);
}
.demo-studio__play .icon { width: 15px; height: 15px; }
.demo-studio__i-play { fill: currentColor; margin-inline-start: 2px; }
.demo-studio__i-pause { display: none; stroke-width: 2.4; }
.demo-studio.is-playing .demo-studio__i-play { display: none; }
.demo-studio.is-playing .demo-studio__i-pause { display: block; }
.demo-studio__scrub { --p: 0; position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(207, 226, 255, 0.16); }
.demo-studio__scrub i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-gold); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.demo-studio__scrub b { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--p) * 100%); width: 12px; height: 12px; margin-block-start: -6px; margin-inline-start: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 227, 163, 0.8); transition: scale var(--dur-fast) var(--ease-out); pointer-events: none; }
/* the real control: a range input over the bar (bigger hit area, arrow keys, screen readers) */
.demo-studio__range {
  position: absolute;
  inset-inline: -6px;
  inset-block: -12px;
  width: calc(100% + 12px);
  height: calc(100% + 24px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.demo-studio__scrub:hover b, .demo-studio__scrub:has(.demo-studio__range:active) b { scale: 1.25; }
.demo-studio__scrub:has(.demo-studio__range:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 7px; }
.demo-studio__time { font-family: var(--font-mono); font-size: 11.5px; color: var(--ice-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wide board: side panel + large stage */
@container demo-studio (min-width: 880px) {
  .demo-studio--full .demo-studio__board {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 2.18fr);
    grid-template-areas: "top top" "side stage";
    gap: 16px 18px;
  }
  .demo-studio--full .demo-studio__side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .demo-studio--full .demo-studio__prompt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "text" "go"; align-items: start; padding: 16px; }
  .demo-studio--full .demo-studio__prompt-text { min-height: 3em; font-size: 16px; }
  .demo-studio--full .demo-studio__go { justify-self: start; }
  .demo-studio--full .demo-studio__steps { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 2px 6px; }
  .demo-studio--full .demo-studio__strip { margin-block-start: auto; }
  .demo-studio--full .demo-studio__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.demo-studio--compact .demo-studio__steps { display: none; }
@container demo-studio (max-width: 460px) {
  .demo-studio__prompt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "text" "go"; align-items: start; }
  .demo-studio__prompt-text { font-size: 14.5px; }
  .demo-studio__go { justify-self: start; }
  .demo-studio__tab { padding-inline: 11px; font-size: 12.5px; }
  .demo-studio__hud { inset-block-start: 8px; inset-inline: 8px; }
  .demo-studio__badge, .demo-studio__status { height: 24px; padding-inline: 8px; font-size: 10px; }
  .demo-studio__player { inset-inline: 8px; inset-block-end: 8px; gap: 9px; padding: 4px 10px 4px 4px; }
  .demo-studio__play { width: 28px; height: 28px; }
  .demo-studio__steps { font-size: 12.5px; }
}

/* ---- CSS paintings: static poster, no-WebGL fallback and thumbnail placeholders.
   city / nebula / aurora are seeded SVG paintings generated once by a script (random star fields, no lattice). ---- */
.demo-studio__art--dunes {
  background:
    radial-gradient(9% 14% at 68% 40%, #fff6dc 0%, #ffe0a0 40%, transparent 72%),
    radial-gradient(34% 30% at 68% 42%, rgba(255, 196, 120, 0.55), transparent 70%),
    radial-gradient(150% 60% at 18% 118%, #2a1409 49.6%, transparent 50%),
    radial-gradient(130% 55% at 88% 112%, #57290f 49.6%, transparent 50%),
    radial-gradient(170% 70% at 40% 128%, #8a461b 49.6%, transparent 50%),
    radial-gradient(150% 60% at 95% 130%, #b8652a 49.6%, transparent 50%),
    linear-gradient(180deg, #1d2248 0%, #5b3b6e 26%, #c46a6a 46%, #f0a060 60%, #f7c67e 72%, #f7c67e 100%);
}
.demo-studio__art--glass {
  background:
    radial-gradient(40% 30% at 55% 48%, rgba(207, 226, 255, 0.22), transparent 70%),
    linear-gradient(118deg, transparent 22%, rgba(120, 170, 255, 0.28) 27%, rgba(234, 242, 255, 0.85) 30.5%, rgba(61, 139, 255, 0.4) 33%, transparent 38%),
    linear-gradient(128deg, transparent 44%, rgba(255, 201, 90, 0.25) 48%, rgba(255, 236, 200, 0.8) 50.5%, rgba(240, 169, 30, 0.35) 53%, transparent 58%),
    linear-gradient(106deg, transparent 58%, rgba(207, 226, 255, 0.2) 63%, rgba(234, 242, 255, 0.6) 65.5%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, #1b2c4c, #0a1222 55%, #04070e);
}
.demo-studio__art--nebula {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3Cfilter id='sg' x='-200%25' y='-200%25' width='500%25' height='500%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E %3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .0045' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .72 0 0 0 0 1 0 0 0 1.25 -.52'/%3E%3C/filter%3E %3Cfilter id='e' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .006' numOctaves='5' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .76 0 0 0 0 .38 0 0 0 1.4 -.66'/%3E%3C/filter%3E %3CradialGradient id='m1' cx='.42' cy='.47' r='.46'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='m2' cx='.6' cy='.56' r='.34'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cmask id='k1'%3E%3Crect width='1600' height='1000' fill='url(%23m1)'/%3E%3C/mask%3E %3Cmask id='k2'%3E%3Crect width='1600' height='1000' fill='url(%23m2)'/%3E%3C/mask%3E %3C/defs%3E %3Crect width='1600' height='1000' filter='url(%23d)' mask='url(%23k1)' opacity='.9'/%3E %3Crect width='1600' height='1000' filter='url(%23e)' mask='url(%23k2)' opacity='.8'/%3E %3Cg stroke-linecap='round' fill='none'%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.9' d='M996 741h0M1442 112h0M638 982h0M1233 500h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.4' d='M1475 29h0M1441 113h0M188 668h0M773 779h0M490 137h0M218 236h0M1590 639h0M1031 229h0M1422 898h0M423 571h0M1050 615h0M1054 243h0M1588 330h0M953 221h0M909 896h0M830 743h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.65' d='M918 13h0M58 945h0M853 405h0M729 421h0M561 662h0M1330 373h0M953 563h0M614 854h0M155 33h0M281 208h0M835 132h0M189 317h0M1574 249h0M584 814h0M1598 750h0M652 943h0M310 803h0M1187 116h0M1521 216h0M183 537h0M1016 255h0M213 167h0M780 367h0M389 290h0M1393 356h0M1252 255h0M349 665h0M509 499h0M582 0h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.4' d='M255 797h0M1395 289h0M403 455h0M296 802h0M26 527h0M344 277h0M222 363h0M1299 85h0M872 731h0M818 933h0M334 514h0M590 89h0M471 816h0M173 9h0M1457 515h0M1117 759h0M946 198h0M1284 828h0M1006 478h0M466 713h0M334 234h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.4' d='M2 871h0M532 429h0M86 243h0M1265 86h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.65' d='M290 968h0M1039 580h0M1075 33h0M1306 655h0M969 630h0M784 37h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.9' d='M34 414h0M261 619h0M818 586h0M1226 224h0M299 30h0M314 915h0M1337 293h0M983 796h0M1583 201h0M1176 732h0M330 921h0M193 405h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.65' d='M937 595h0M1240 108h0M1468 339h0M534 207h0M229 23h0M1458 706h0M115 759h0M1153 69h0M614 636h0M1371 163h0M895 605h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.65' d='M769 315h0M1536 688h0M177 967h0M794 415h0M896 243h0M1350 721h0M1111 432h0M810 453h0M1156 358h0M287 508h0M999 441h0M115 769h0M52 576h0M1087 522h0M547 785h0M1547 553h0M957 839h0M675 972h0M1029 374h0M1242 557h0M825 901h0M1411 311h0M1013 708h0M466 95h0M471 292h0M1280 542h0M15 683h0M1509 806h0M1385 278h0M373 313h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.9' d='M1560 22h0M1431 994h0M1109 611h0M946 42h0M1081 339h0M1268 416h0M491 465h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.9' d='M1260 366h0M361 26h0M3 946h0M1234 258h0M380 996h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.4' d='M289 955h0M1578 979h0M867 738h0M989 400h0M439 716h0M1442 355h0M100 301h0M646 710h0M765 119h0M943 699h0M52 475h0M498 112h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.65' d='M1487 942h0M1466 539h0M686 976h0M146 685h0M1207 258h0M212 420h0M1100 838h0M280 719h0M631 979h0M831 755h0M711 162h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.9' d='M489 798h0M494 483h0M858 696h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.65' d='M170 434h0M1499 867h0M433 996h0M1275 77h0M741 189h0M1431 689h0M1064 594h0M978 162h0M230 785h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.65' d='M471 453h0M824 548h0M909 275h0M88 212h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.9' d='M1111 664h0M1038 858h0M1511 429h0M514 324h0M1509 312h0M651 320h0M954 589h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.65' d='M449 485h0M1387 46h0M554 506h0M1438 634h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.65' d='M1074 462h0M1440 199h0M1449 642h0M314 18h0M403 166h0M1364 238h0M966 908h0M1146 277h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.4' d='M556 644h0M670 812h0M829 863h0M742 361h0M786 211h0M463 930h0M243 518h0M291 544h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.9' d='M1391 688h0M1568 198h0M43 312h0M1405 728h0M550 17h0M85 938h0M702 878h0M1502 61h0M452 980h0M281 811h0M1513 756h0M69 895h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.9' d='M126 670h0M1313 661h0M63 136h0M1056 745h0M1463 138h0M1381 453h0M1548 666h0M528 76h0M1075 111h0M624 856h0M767 738h0M1244 244h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.9' d='M826 936h0M1 405h0M1057 348h0M1551 826h0M1071 956h0M235 960h0M241 278h0M524 686h0M364 285h0M196 446h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.4' d='M998 180h0M314 296h0M10 60h0M398 703h0M2 126h0M1380 623h0M1531 318h0M1429 615h0M899 956h0M1265 771h0M1121 466h0M1416 370h0M443 298h0M1225 542h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.4' d='M872 339h0M1084 290h0M29 341h0M172 530h0M827 592h0M101 3h0M658 412h0M1264 896h0M1004 697h0M930 743h0M1162 891h0M344 840h0M1023 567h0M1370 923h0M234 486h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.4' d='M481 533h0M408 407h0M969 561h0M1216 574h0M1368 245h0M13 771h0M480 728h0M1229 941h0M1075 521h0M1062 50h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.9' d='M687 807h0M228 478h0M197 122h0M877 989h0M604 750h0M1176 372h0M1230 699h0M1084 123h0M511 241h0M819 847h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='3.0' opacity='0.9' d='M245 585h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='3.0' opacity='0.4' d='M368 819h0M731 950h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.0' opacity='0.65' d='M189 398h0M1426 999h0M521 810h0M759 319h0M1461 180h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.4' d='M882 254h0M1045 71h0M586 808h0M1072 536h0M661 874h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.4' d='M1474 323h0M107 993h0M1598 756h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='3.0' opacity='0.65' d='M883 110h0M1425 987h0M1308 140h0M629 558h0M1346 619h0M1146 737h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.4' opacity='0.4' d='M1500 687h0M977 862h0M1212 76h0M381 236h0M712 895h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.65' d='M53 714h0M1268 56h0M1018 40h0M474 694h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.65' d='M113 898h0M1447 302h0M1307 373h0M503 611h0M1471 282h0M1441 778h0M1363 605h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.65' d='M858 471h0M1577 271h0M482 166h0M1048 757h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.0' opacity='0.4' d='M1046 759h0M170 805h0M1545 240h0M1464 836h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.9' d='M77 667h0M1539 132h0M774 143h0M1293 676h0M772 68h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.0' opacity='0.9' d='M294 190h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.4' d='M1140 924h0M699 272h0M328 664h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.9' d='M1506 465h0M989 587h0M1103 110h0M455 755h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.4' d='M423 629h0M5 147h0M876 630h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.4' opacity='0.9' d='M538 591h0M1359 850h0M115 462h0M390 515h0'/%3E%3C/g%3E%3Cpath stroke='%23eaf2ff' stroke-width='10' stroke-linecap='round' opacity='.22' filter='url(%23sg)' d='M619 416h0M957 425h0M1310 236h0M314 699h0M1434 351h0M107 760h0M1422 431h0M838 864h0M1061 136h0M1557 377h0M640 559h0M614 325h0'/%3E%3Cpath stroke='%23fff' stroke-width='3.6' stroke-linecap='round' d='M619 416h0M957 425h0M1310 236h0M314 699h0M1434 351h0M107 760h0M1422 431h0M838 864h0M1061 136h0M1557 377h0M640 559h0M614 325h0'/%3E %3C/svg%3E") center / cover no-repeat,
    radial-gradient(28% 34% at 40% 46%, rgba(120, 180, 255, 0.55), transparent 70%),
    radial-gradient(30% 28% at 60% 56%, rgba(255, 196, 90, 0.42), transparent 70%),
    radial-gradient(55% 45% at 50% 50%, rgba(110, 70, 190, 0.4), transparent 75%),
    radial-gradient(90% 70% at 30% 30%, rgba(31, 111, 209, 0.26), transparent 70%),
    #03050c;
}
.demo-studio__art--city {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23040816'/%3E%3Cstop offset='.38' stop-color='%230d1a3a'/%3E%3Cstop offset='.54' stop-color='%232a2440'/%3E%3Cstop offset='.6' stop-color='%236b4630'/%3E%3C/linearGradient%3E %3CradialGradient id='g' cx='.5' cy='1' r='.62'%3E%3Cstop offset='0' stop-color='%23ffc46a' stop-opacity='.75'/%3E%3Cstop offset='.35' stop-color='%23f0a91e' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23f0a91e' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a1622'/%3E%3Cstop offset='.25' stop-color='%230a0d18'/%3E%3Cstop offset='1' stop-color='%2303050b'/%3E%3C/linearGradient%3E %3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E %3Cfilter id='b2' x='-50%25' y='-10%25' width='200%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='3 14'/%3E%3C/filter%3E %3C/defs%3E %3Crect width='1600' height='600' fill='url(%23s)'/%3E %3Crect x='-200' y='180' width='2000' height='420' fill='url(%23g)'/%3E%3Cpath fill='%23232a48' d='M-12 445h80V602H-12zM75 498h49V602H75zM128 536h61V602H128zM192 454h54V602H192zM246 430h42V602H246zM292 467h92V602H292zM395 521h42V602H395zM436 442h74V602H436zM511 466h51V602H511zM570 460h55V602H570zM631 505h58V602H631zM692 401h110V602H692zM809 449h108V602H809zM927 499h54V602H927zM983 500h70V602H983zM1061 411h105V602H1061zM1169 434h79V602H1169zM1257 492h48V602H1257zM1308 452h54V602H1308zM1368 450h76V602H1368zM1447 450h81V602H1447zM1531 540h82V602H1531zM1614 537h96V602H1614z'/%3E%3Cpath fill='%23ffc95a' opacity='0.25' d='M-6 574h5v7h-5zM4 540h5v7h-5zM4 591h5v7h-5zM26 540h5v7h-5zM49 506h5v7h-5zM134 546h5v7h-5zM218 549h5v7h-5zM218 566h5v7h-5zM252 474h5v7h-5zM298 511h5v7h-5zM401 582h5v7h-5zM491 520h5v7h-5zM586 470h5v7h-5zM607 470h5v7h-5zM710 530h5v7h-5zM771 411h5v7h-5zM783 547h5v7h-5zM839 510h5v7h-5zM874 476h5v7h-5zM933 560h5v7h-5zM1012 527h5v7h-5zM1090 591h5v7h-5zM1136 523h5v7h-5zM1148 438h5v7h-5zM1186 580h5v7h-5zM1220 444h5v7h-5zM1231 546h5v7h-5zM1314 564h5v7h-5zM1325 547h5v7h-5zM1346 547h5v7h-5zM1453 494h5v7h-5zM1464 528h5v7h-5zM1475 562h5v7h-5zM1620 581h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.5' d='M4 472h5v7h-5zM455 469h5v7h-5zM576 504h5v7h-5zM747 411h5v7h-5zM850 476h5v7h-5zM1186 444h5v7h-5zM1209 546h5v7h-5zM1275 536h5v7h-5zM1572 550h5v7h-5zM1632 564h5v7h-5z'/%3E%3Cpath fill='%23ffc95a' opacity='0.5' d='M37 472h5v7h-5zM37 540h5v7h-5zM37 574h5v7h-5zM208 583h5v7h-5zM252 542h5v7h-5zM271 542h5v7h-5zM310 545h5v7h-5zM366 545h5v7h-5zM366 562h5v7h-5zM491 469h5v7h-5zM517 578h5v7h-5zM698 564h5v7h-5zM722 513h5v7h-5zM734 462h5v7h-5zM771 428h5v7h-5zM783 496h5v7h-5zM783 564h5v7h-5zM815 510h5v7h-5zM943 560h5v7h-5zM964 543h5v7h-5zM1024 510h5v7h-5zM1024 527h5v7h-5zM1090 455h5v7h-5zM1090 540h5v7h-5zM1090 557h5v7h-5zM1136 591h5v7h-5zM1209 580h5v7h-5zM1263 570h5v7h-5zM1346 462h5v7h-5zM1399 494h5v7h-5zM1510 528h5v7h-5zM1549 567h5v7h-5zM1644 581h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.25' d='M198 583h5v7h-5zM401 548h5v7h-5zM698 479h5v7h-5zM815 527h5v7h-5zM827 476h5v7h-5zM850 493h5v7h-5zM1012 510h5v7h-5zM1220 580h5v7h-5zM1335 462h5v7h-5z'/%3E%3Crect y='400' width='1600' height='200' fill='%232a2440' opacity='.18'/%3E%3Cpath fill='%23141c36' d='M-29 342h112V602H-29zM86 331h82V602H86zM170 403h51V602H170zM221 404h68V602H221zM293 481h54V602H293zM357 413h102V602H357zM470 383h106V602H470zM590 309h78V602H590zM672 367h85V602H672zM760 451h103V602H760zM863 270h90V602H863zM960 288h64V602H960zM1027 480h115V602H1027zM1150 412h80V602H1150zM1243 420h105V602H1243zM1356 459h120V602H1356zM1482 358h72V602H1482zM1556 501h53V602H1556zM1614 366h100V602H1614z'/%3E%3Cpath fill='%23ffc95a' opacity='0.5' d='M-23 352h5v7h-5zM-23 505h5v7h-5zM-23 539h5v7h-5zM-11 556h5v7h-5zM13 420h5v7h-5zM26 420h5v7h-5zM26 590h5v7h-5zM38 505h5v7h-5zM50 369h5v7h-5zM63 539h5v7h-5zM63 573h5v7h-5zM92 375h5v7h-5zM92 443h5v7h-5zM103 358h5v7h-5zM103 426h5v7h-5zM103 460h5v7h-5zM103 494h5v7h-5zM103 545h5v7h-5zM115 426h5v7h-5zM126 392h5v7h-5zM126 409h5v7h-5zM126 460h5v7h-5zM126 477h5v7h-5zM126 494h5v7h-5zM126 562h5v7h-5zM126 579h5v7h-5zM149 494h5v7h-5zM149 562h5v7h-5zM189 532h5v7h-5zM202 498h5v7h-5zM202 515h5v7h-5zM238 584h5v7h-5zM249 482h5v7h-5zM249 533h5v7h-5zM272 431h5v7h-5zM272 499h5v7h-5zM272 533h5v7h-5zM299 525h5v7h-5zM319 576h5v7h-5zM330 491h5v7h-5zM363 559h5v7h-5zM389 423h5v7h-5zM389 457h5v7h-5zM389 508h5v7h-5zM402 559h5v7h-5zM427 491h5v7h-5zM488 478h5v7h-5zM488 529h5v7h-5zM500 461h5v7h-5zM500 478h5v7h-5zM511 529h5v7h-5zM535 478h5v7h-5zM558 461h5v7h-5zM596 370h5v7h-5zM596 574h5v7h-5zM609 353h5v7h-5zM609 387h5v7h-5zM609 421h5v7h-5zM609 438h5v7h-5zM609 506h5v7h-5zM622 472h5v7h-5zM622 540h5v7h-5zM649 387h5v7h-5zM678 394h5v7h-5zM690 411h5v7h-5zM690 530h5v7h-5zM702 377h5v7h-5zM702 530h5v7h-5zM715 377h5v7h-5zM715 428h5v7h-5zM715 547h5v7h-5zM715 581h5v7h-5zM766 580h5v7h-5zM792 546h5v7h-5zM805 461h5v7h-5zM844 580h5v7h-5zM869 348h5v7h-5zM869 416h5v7h-5zM869 450h5v7h-5zM869 501h5v7h-5zM895 331h5v7h-5zM895 467h5v7h-5zM908 314h5v7h-5zM908 416h5v7h-5zM921 365h5v7h-5zM934 280h5v7h-5zM934 297h5v7h-5zM934 314h5v7h-5zM934 399h5v7h-5zM966 315h5v7h-5zM966 332h5v7h-5zM966 366h5v7h-5zM966 451h5v7h-5zM979 485h5v7h-5zM979 536h5v7h-5zM991 332h5v7h-5zM991 400h5v7h-5zM991 485h5v7h-5zM1004 587h5v7h-5zM1045 490h5v7h-5zM1058 490h5v7h-5zM1122 524h5v7h-5zM1122 558h5v7h-5zM1167 456h5v7h-5zM1167 473h5v7h-5zM1178 473h5v7h-5zM1189 439h5v7h-5zM1189 456h5v7h-5zM1189 473h5v7h-5zM1189 575h5v7h-5zM1283 532h5v7h-5zM1295 566h5v7h-5zM1318 532h5v7h-5zM1330 532h5v7h-5zM1374 571h5v7h-5zM1386 503h5v7h-5zM1386 571h5v7h-5zM1433 588h5v7h-5zM1488 555h5v7h-5zM1500 470h5v7h-5zM1500 555h5v7h-5zM1512 436h5v7h-5zM1512 589h5v7h-5zM1524 521h5v7h-5zM1536 385h5v7h-5zM1536 453h5v7h-5zM1536 487h5v7h-5zM1572 511h5v7h-5zM1572 528h5v7h-5zM1572 562h5v7h-5zM1583 511h5v7h-5zM1583 562h5v7h-5zM1620 376h5v7h-5zM1633 495h5v7h-5zM1645 495h5v7h-5zM1645 580h5v7h-5zM1658 580h5v7h-5zM1670 376h5v7h-5zM1670 461h5v7h-5zM1670 580h5v7h-5zM1683 393h5v7h-5zM1695 427h5v7h-5z'/%3E%3Cpath fill='%23ffc95a' opacity='0.75' d='M-23 386h5v7h-5zM-23 471h5v7h-5zM1 352h5v7h-5zM1 437h5v7h-5zM1 505h5v7h-5zM26 369h5v7h-5zM38 471h5v7h-5zM38 590h5v7h-5zM50 352h5v7h-5zM50 403h5v7h-5zM63 369h5v7h-5zM63 386h5v7h-5zM103 443h5v7h-5zM115 562h5v7h-5zM126 511h5v7h-5zM138 426h5v7h-5zM138 494h5v7h-5zM202 549h5v7h-5zM238 499h5v7h-5zM238 533h5v7h-5zM249 499h5v7h-5zM309 525h5v7h-5zM330 559h5v7h-5zM330 576h5v7h-5zM376 576h5v7h-5zM402 474h5v7h-5zM402 491h5v7h-5zM402 542h5v7h-5zM414 423h5v7h-5zM427 559h5v7h-5zM476 512h5v7h-5zM476 529h5v7h-5zM488 495h5v7h-5zM500 563h5v7h-5zM511 393h5v7h-5zM596 438h5v7h-5zM596 455h5v7h-5zM622 421h5v7h-5zM622 489h5v7h-5zM649 472h5v7h-5zM649 489h5v7h-5zM702 462h5v7h-5zM702 479h5v7h-5zM766 495h5v7h-5zM779 461h5v7h-5zM779 478h5v7h-5zM882 314h5v7h-5zM882 399h5v7h-5zM882 416h5v7h-5zM882 450h5v7h-5zM882 552h5v7h-5zM908 433h5v7h-5zM908 535h5v7h-5zM921 467h5v7h-5zM921 484h5v7h-5zM921 586h5v7h-5zM934 484h5v7h-5zM966 468h5v7h-5zM979 451h5v7h-5zM1004 434h5v7h-5zM1045 558h5v7h-5zM1071 558h5v7h-5zM1084 575h5v7h-5zM1156 473h5v7h-5zM1178 439h5v7h-5zM1178 524h5v7h-5zM1260 515h5v7h-5zM1295 481h5v7h-5zM1307 515h5v7h-5zM1318 464h5v7h-5zM1318 481h5v7h-5zM1330 464h5v7h-5zM1330 481h5v7h-5zM1374 469h5v7h-5zM1398 469h5v7h-5zM1410 520h5v7h-5zM1457 571h5v7h-5zM1488 419h5v7h-5zM1488 436h5v7h-5zM1488 521h5v7h-5zM1500 385h5v7h-5zM1500 402h5v7h-5zM1500 538h5v7h-5zM1500 572h5v7h-5zM1512 402h5v7h-5zM1512 504h5v7h-5zM1524 555h5v7h-5zM1536 368h5v7h-5zM1562 545h5v7h-5zM1593 579h5v7h-5zM1620 461h5v7h-5zM1633 478h5v7h-5zM1633 580h5v7h-5zM1658 563h5v7h-5zM1683 427h5v7h-5zM1683 461h5v7h-5zM1695 495h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.5' d='M-11 505h5v7h-5zM38 437h5v7h-5zM38 522h5v7h-5zM92 545h5v7h-5zM103 375h5v7h-5zM299 559h5v7h-5zM363 491h5v7h-5zM389 576h5v7h-5zM402 440h5v7h-5zM440 508h5v7h-5zM500 393h5v7h-5zM547 410h5v7h-5zM547 529h5v7h-5zM596 404h5v7h-5zM609 574h5v7h-5zM622 574h5v7h-5zM635 591h5v7h-5zM715 411h5v7h-5zM739 445h5v7h-5zM818 563h5v7h-5zM844 512h5v7h-5zM844 546h5v7h-5zM921 382h5v7h-5zM979 519h5v7h-5zM1109 575h5v7h-5zM1272 447h5v7h-5zM1362 503h5v7h-5zM1410 554h5v7h-5zM1488 402h5v7h-5zM1536 589h5v7h-5zM1645 444h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.75' d='M1 420h5v7h-5zM26 522h5v7h-5zM202 583h5v7h-5zM414 508h5v7h-5zM476 410h5v7h-5zM511 444h5v7h-5zM678 530h5v7h-5zM690 496h5v7h-5zM766 546h5v7h-5zM805 546h5v7h-5zM844 495h5v7h-5zM921 399h5v7h-5zM1189 490h5v7h-5zM1374 486h5v7h-5zM1445 520h5v7h-5zM1593 511h5v7h-5zM1620 495h5v7h-5z'/%3E%3Cpath fill='%230a1024' d='M8 103h96V602H8zM114 263h128V602H114zM252 428h78V602H252zM353 313h115V602H353zM409 267h4v60h-4zM489 324h76V602H489zM593 288h101V602H593zM706 461h114V602H706zM820 414h103V602H820zM933 302h113V602H933zM988 258h4v60h-4zM1068 423h86V602H1068zM1108 392h4v60h-4zM1174 398h140V602H1174zM1242 366h4v60h-4zM1340 239h130V602H1340zM1482 130h142V602H1482zM1551 74h4v60h-4zM1632 246h75V602H1632z'/%3E%3Cpath fill='%23ffc95a' opacity='0.5' d='M14 181h5v7h-5zM14 402h5v7h-5zM14 538h5v7h-5zM26 181h5v7h-5zM38 317h5v7h-5zM38 521h5v7h-5zM38 589h5v7h-5zM50 283h5v7h-5zM50 589h5v7h-5zM61 232h5v7h-5zM61 504h5v7h-5zM73 402h5v7h-5zM85 317h5v7h-5zM85 487h5v7h-5zM120 528h5v7h-5zM132 443h5v7h-5zM171 528h5v7h-5zM197 324h5v7h-5zM197 511h5v7h-5zM222 307h5v7h-5zM222 392h5v7h-5zM258 489h5v7h-5zM297 438h5v7h-5zM310 455h5v7h-5zM310 591h5v7h-5zM359 391h5v7h-5zM359 544h5v7h-5zM372 408h5v7h-5zM372 476h5v7h-5zM385 340h5v7h-5zM398 323h5v7h-5zM424 510h5v7h-5zM521 521h5v7h-5zM546 368h5v7h-5zM546 521h5v7h-5zM612 298h5v7h-5zM612 315h5v7h-5zM612 400h5v7h-5zM650 400h5v7h-5zM650 468h5v7h-5zM662 502h5v7h-5zM675 332h5v7h-5zM675 417h5v7h-5zM712 505h5v7h-5zM737 539h5v7h-5zM737 573h5v7h-5zM763 590h5v7h-5zM775 522h5v7h-5zM865 475h5v7h-5zM904 492h5v7h-5zM939 465h5v7h-5zM952 448h5v7h-5zM965 312h5v7h-5zM965 567h5v7h-5zM990 346h5v7h-5zM990 363h5v7h-5zM990 465h5v7h-5zM1002 363h5v7h-5zM1110 467h5v7h-5zM1110 535h5v7h-5zM1110 586h5v7h-5zM1135 552h5v7h-5zM1180 510h5v7h-5zM1218 459h5v7h-5zM1231 442h5v7h-5zM1282 561h5v7h-5zM1346 419h5v7h-5zM1359 436h5v7h-5zM1359 470h5v7h-5zM1359 521h5v7h-5zM1424 521h5v7h-5zM1514 412h5v7h-5zM1527 276h5v7h-5zM1527 548h5v7h-5zM1553 514h5v7h-5zM1566 497h5v7h-5zM1579 259h5v7h-5zM1592 344h5v7h-5zM1592 361h5v7h-5zM1651 528h5v7h-5zM1688 426h5v7h-5zM1688 511h5v7h-5z'/%3E%3Cpath fill='%23ffc95a' opacity='0.75' d='M14 215h5v7h-5zM14 334h5v7h-5zM14 419h5v7h-5zM14 470h5v7h-5zM26 249h5v7h-5zM26 351h5v7h-5zM26 470h5v7h-5zM38 402h5v7h-5zM38 504h5v7h-5zM50 147h5v7h-5zM50 181h5v7h-5zM50 317h5v7h-5zM50 470h5v7h-5zM61 181h5v7h-5zM61 334h5v7h-5zM61 368h5v7h-5zM61 538h5v7h-5zM73 266h5v7h-5zM73 300h5v7h-5zM73 351h5v7h-5zM85 147h5v7h-5zM85 215h5v7h-5zM85 402h5v7h-5zM85 470h5v7h-5zM120 443h5v7h-5zM120 494h5v7h-5zM132 341h5v7h-5zM132 392h5v7h-5zM145 290h5v7h-5zM145 392h5v7h-5zM145 443h5v7h-5zM158 273h5v7h-5zM171 307h5v7h-5zM171 341h5v7h-5zM171 358h5v7h-5zM184 375h5v7h-5zM197 273h5v7h-5zM197 375h5v7h-5zM197 443h5v7h-5zM209 341h5v7h-5zM209 409h5v7h-5zM209 426h5v7h-5zM222 460h5v7h-5zM258 557h5v7h-5zM258 574h5v7h-5zM271 523h5v7h-5zM271 557h5v7h-5zM284 540h5v7h-5zM297 540h5v7h-5zM310 438h5v7h-5zM359 323h5v7h-5zM372 578h5v7h-5zM385 357h5v7h-5zM385 476h5v7h-5zM385 544h5v7h-5zM398 357h5v7h-5zM398 425h5v7h-5zM398 544h5v7h-5zM398 561h5v7h-5zM411 527h5v7h-5zM424 425h5v7h-5zM424 476h5v7h-5zM424 527h5v7h-5zM424 544h5v7h-5zM424 561h5v7h-5zM436 357h5v7h-5zM436 374h5v7h-5zM436 459h5v7h-5zM436 578h5v7h-5zM449 493h5v7h-5zM449 561h5v7h-5zM495 436h5v7h-5zM495 470h5v7h-5zM508 368h5v7h-5zM508 436h5v7h-5zM508 521h5v7h-5zM521 470h5v7h-5zM521 487h5v7h-5zM521 538h5v7h-5zM533 385h5v7h-5zM533 453h5v7h-5zM533 504h5v7h-5zM546 351h5v7h-5zM546 538h5v7h-5zM599 417h5v7h-5zM599 434h5v7h-5zM599 468h5v7h-5zM599 553h5v7h-5zM612 383h5v7h-5zM612 502h5v7h-5zM624 468h5v7h-5zM624 485h5v7h-5zM624 536h5v7h-5zM637 587h5v7h-5zM650 485h5v7h-5zM662 315h5v7h-5zM662 400h5v7h-5zM662 451h5v7h-5zM712 590h5v7h-5zM725 556h5v7h-5zM737 505h5v7h-5zM737 590h5v7h-5zM750 573h5v7h-5zM763 556h5v7h-5zM775 505h5v7h-5zM788 488h5v7h-5zM788 573h5v7h-5zM801 471h5v7h-5zM839 475h5v7h-5zM839 492h5v7h-5zM852 509h5v7h-5zM865 560h5v7h-5zM891 424h5v7h-5zM891 509h5v7h-5zM891 526h5v7h-5zM904 458h5v7h-5zM904 509h5v7h-5zM904 543h5v7h-5zM904 577h5v7h-5zM939 312h5v7h-5zM939 482h5v7h-5zM952 397h5v7h-5zM952 533h5v7h-5zM965 465h5v7h-5zM965 516h5v7h-5zM977 312h5v7h-5zM977 346h5v7h-5zM977 397h5v7h-5zM977 465h5v7h-5zM977 482h5v7h-5zM977 499h5v7h-5zM977 567h5v7h-5zM990 431h5v7h-5zM1015 329h5v7h-5zM1015 380h5v7h-5zM1028 380h5v7h-5zM1074 467h5v7h-5zM1086 450h5v7h-5zM1086 484h5v7h-5zM1086 552h5v7h-5zM1086 586h5v7h-5zM1098 467h5v7h-5zM1098 535h5v7h-5zM1110 501h5v7h-5zM1123 450h5v7h-5zM1123 552h5v7h-5zM1123 569h5v7h-5zM1135 535h5v7h-5zM1135 569h5v7h-5zM1180 476h5v7h-5zM1180 544h5v7h-5zM1180 578h5v7h-5zM1192 510h5v7h-5zM1218 442h5v7h-5zM1218 544h5v7h-5zM1218 561h5v7h-5zM1244 510h5v7h-5zM1256 425h5v7h-5zM1256 510h5v7h-5zM1269 476h5v7h-5zM1269 510h5v7h-5zM1282 408h5v7h-5zM1295 493h5v7h-5zM1295 561h5v7h-5zM1295 578h5v7h-5zM1346 334h5v7h-5zM1359 317h5v7h-5zM1359 351h5v7h-5zM1385 266h5v7h-5zM1385 317h5v7h-5zM1385 521h5v7h-5zM1385 572h5v7h-5zM1398 283h5v7h-5zM1398 521h5v7h-5zM1398 555h5v7h-5zM1411 266h5v7h-5zM1411 317h5v7h-5zM1411 453h5v7h-5zM1424 334h5v7h-5zM1424 385h5v7h-5zM1437 266h5v7h-5zM1437 385h5v7h-5zM1437 521h5v7h-5zM1450 249h5v7h-5zM1450 487h5v7h-5zM1488 361h5v7h-5zM1488 395h5v7h-5zM1488 548h5v7h-5zM1488 565h5v7h-5zM1501 276h5v7h-5zM1501 378h5v7h-5zM1501 497h5v7h-5zM1501 582h5v7h-5zM1514 225h5v7h-5zM1514 497h5v7h-5zM1514 582h5v7h-5zM1527 429h5v7h-5zM1527 531h5v7h-5zM1540 191h5v7h-5zM1540 276h5v7h-5zM1540 463h5v7h-5zM1553 293h5v7h-5zM1553 497h5v7h-5zM1553 565h5v7h-5zM1566 191h5v7h-5zM1566 225h5v7h-5zM1566 259h5v7h-5zM1579 208h5v7h-5zM1579 463h5v7h-5zM1579 548h5v7h-5zM1592 157h5v7h-5zM1592 480h5v7h-5zM1592 497h5v7h-5zM1592 548h5v7h-5zM1638 426h5v7h-5zM1651 375h5v7h-5zM1651 409h5v7h-5zM1651 426h5v7h-5zM1651 494h5v7h-5zM1651 562h5v7h-5zM1663 324h5v7h-5zM1675 341h5v7h-5zM1675 409h5v7h-5zM1675 426h5v7h-5zM1675 477h5v7h-5zM1688 341h5v7h-5zM1688 443h5v7h-5z'/%3E%3Cpath fill='%23ffc95a' opacity='1.0' d='M14 283h5v7h-5zM14 317h5v7h-5zM26 266h5v7h-5zM38 436h5v7h-5zM61 266h5v7h-5zM73 385h5v7h-5zM73 436h5v7h-5zM73 453h5v7h-5zM73 555h5v7h-5zM85 300h5v7h-5zM85 572h5v7h-5zM132 307h5v7h-5zM145 494h5v7h-5zM158 426h5v7h-5zM158 443h5v7h-5zM197 460h5v7h-5zM197 545h5v7h-5zM209 290h5v7h-5zM209 579h5v7h-5zM222 562h5v7h-5zM284 455h5v7h-5zM284 506h5v7h-5zM284 523h5v7h-5zM310 506h5v7h-5zM310 574h5v7h-5zM372 340h5v7h-5zM372 510h5v7h-5zM385 425h5v7h-5zM398 340h5v7h-5zM398 578h5v7h-5zM411 340h5v7h-5zM411 510h5v7h-5zM495 589h5v7h-5zM533 419h5v7h-5zM546 402h5v7h-5zM546 419h5v7h-5zM599 315h5v7h-5zM612 417h5v7h-5zM650 332h5v7h-5zM662 519h5v7h-5zM725 539h5v7h-5zM725 590h5v7h-5zM737 556h5v7h-5zM750 590h5v7h-5zM775 539h5v7h-5zM801 488h5v7h-5zM826 492h5v7h-5zM826 560h5v7h-5zM826 577h5v7h-5zM852 492h5v7h-5zM852 577h5v7h-5zM865 424h5v7h-5zM865 441h5v7h-5zM865 492h5v7h-5zM865 509h5v7h-5zM904 424h5v7h-5zM952 312h5v7h-5zM965 380h5v7h-5zM977 448h5v7h-5zM1002 397h5v7h-5zM1015 448h5v7h-5zM1028 431h5v7h-5zM1028 550h5v7h-5zM1028 584h5v7h-5zM1074 501h5v7h-5zM1135 501h5v7h-5zM1205 425h5v7h-5zM1218 527h5v7h-5zM1231 493h5v7h-5zM1244 527h5v7h-5zM1282 510h5v7h-5zM1295 544h5v7h-5zM1346 266h5v7h-5zM1346 504h5v7h-5zM1346 572h5v7h-5zM1359 589h5v7h-5zM1372 249h5v7h-5zM1372 487h5v7h-5zM1372 555h5v7h-5zM1385 283h5v7h-5zM1450 419h5v7h-5zM1488 412h5v7h-5zM1488 514h5v7h-5zM1501 565h5v7h-5zM1540 412h5v7h-5zM1540 480h5v7h-5zM1540 497h5v7h-5zM1566 174h5v7h-5zM1579 140h5v7h-5zM1579 191h5v7h-5zM1579 395h5v7h-5zM1592 191h5v7h-5zM1592 582h5v7h-5zM1605 378h5v7h-5zM1605 480h5v7h-5zM1638 341h5v7h-5zM1638 494h5v7h-5zM1638 511h5v7h-5zM1675 460h5v7h-5zM1675 511h5v7h-5zM1688 290h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.75' d='M14 300h5v7h-5zM14 385h5v7h-5zM26 453h5v7h-5zM50 334h5v7h-5zM61 113h5v7h-5zM85 113h5v7h-5zM85 521h5v7h-5zM132 375h5v7h-5zM158 324h5v7h-5zM171 443h5v7h-5zM184 443h5v7h-5zM209 375h5v7h-5zM209 392h5v7h-5zM297 489h5v7h-5zM359 425h5v7h-5zM385 374h5v7h-5zM398 459h5v7h-5zM449 578h5v7h-5zM508 487h5v7h-5zM508 555h5v7h-5zM533 402h5v7h-5zM546 572h5v7h-5zM599 570h5v7h-5zM650 349h5v7h-5zM662 383h5v7h-5zM662 587h5v7h-5zM675 315h5v7h-5zM750 539h5v7h-5zM839 424h5v7h-5zM839 526h5v7h-5zM904 475h5v7h-5zM952 329h5v7h-5zM952 414h5v7h-5zM977 380h5v7h-5zM977 414h5v7h-5zM990 414h5v7h-5zM1028 499h5v7h-5zM1192 408h5v7h-5zM1205 408h5v7h-5zM1205 476h5v7h-5zM1269 493h5v7h-5zM1346 589h5v7h-5zM1385 589h5v7h-5zM1398 351h5v7h-5zM1398 487h5v7h-5zM1437 572h5v7h-5zM1450 402h5v7h-5zM1488 531h5v7h-5zM1501 310h5v7h-5zM1501 429h5v7h-5zM1514 361h5v7h-5zM1553 327h5v7h-5zM1553 361h5v7h-5zM1553 548h5v7h-5zM1579 327h5v7h-5zM1579 565h5v7h-5zM1605 310h5v7h-5zM1605 531h5v7h-5zM1651 324h5v7h-5zM1688 460h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='1.0' d='M61 419h5v7h-5zM61 436h5v7h-5zM61 521h5v7h-5zM85 198h5v7h-5zM132 409h5v7h-5zM158 341h5v7h-5zM171 273h5v7h-5zM436 510h5v7h-5zM650 315h5v7h-5zM865 526h5v7h-5zM878 577h5v7h-5zM990 516h5v7h-5zM1074 552h5v7h-5zM1385 555h5v7h-5zM1527 259h5v7h-5zM1592 140h5v7h-5zM1675 375h5v7h-5z'/%3E%3Cpath fill='%23cfe2ff' opacity='0.5' d='M209 545h5v7h-5zM495 334h5v7h-5zM521 453h5v7h-5zM965 346h5v7h-5zM1110 518h5v7h-5zM1398 385h5v7h-5zM1501 463h5v7h-5zM1514 293h5v7h-5zM1592 429h5v7h-5zM1688 307h5v7h-5z'/%3E%3Cpath stroke='%23ffe3a3' stroke-width='4' stroke-linecap='round' d='M10 597h0M45 597h0M79 597h0M118 597h0M159 597h0M204 597h0M251 597h0M298 597h0M341 597h0M381 597h0M424 597h0M451 597h0M478 597h0M522 597h0M555 597h0M578 597h0M619 597h0M645 597h0M674 597h0M720 597h0M746 597h0M790 597h0M819 597h0M862 597h0M893 597h0M930 597h0M970 597h0M1011 597h0M1038 597h0M1077 597h0M1104 597h0M1132 597h0M1174 597h0M1200 597h0M1233 597h0M1258 597h0M1295 597h0M1322 597h0M1353 597h0M1401 597h0M1434 597h0M1469 597h0M1492 597h0M1521 597h0M1546 597h0M1584 597h0'/%3E%3Crect y='600' width='1600' height='400' fill='url(%23w)'/%3E%3Cg filter='url(%23b2)'%3E%3Cellipse cx='800.0' cy='610' rx='760' ry='90' fill='%23f0a91e' opacity='.22' filter='url(%23b)'/%3E%3Cpath fill='%23cfe2ff' opacity='.32' d='M59 606h5v114h-6zM130 606h6v143h-6zM1383 606h8v198h-6z'/%3E%3Cpath fill='%23ffc95a' opacity='.32' d='M71 606h7v200h-6zM207 606h6v183h-6zM282 606h7v112h-6zM396 606h5v196h-6zM396 606h6v203h-6zM493 606h5v106h-6zM648 606h5v235h-6zM735 606h7v93h-6zM850 606h6v197h-6zM863 606h5v231h-6zM1013 606h5v179h-6zM1133 606h7v122h-6zM1229 606h8v182h-6zM1357 606h5v218h-6zM1370 606h5v205h-6zM1538 606h5v100h-6zM1538 606h8v233h-6zM1577 606h6v247h-6zM1577 606h8v108h-6zM1603 606h8v92h-6zM1636 606h6v125h-6z'/%3E%3Cpath fill='%23ffd48a' opacity='.32' d='M8 604h5v85h-5zM82 604h5v65h-5zM190 604h5v85h-5zM278 604h5v102h-5zM382 604h5v127h-5zM457 604h5v151h-5zM536 604h5v114h-5zM588 604h5v155h-5zM672 604h5v115h-5zM781 604h5v115h-5zM873 604h5v79h-5zM939 604h5v135h-5zM997 604h5v179h-5zM1106 604h5v137h-5zM1196 604h5v92h-5zM1290 604h5v163h-5zM1362 604h5v127h-5zM1448 604h5v89h-5zM1491 604h5v81h-5zM1568 604h5v136h-5z'/%3E%3C/g%3E%3Cpath fill='%23cfe2ff' opacity='.1' d='M391 712h180v1.5zM219 740h197v1.5zM1079 692h121v1.5zM727 821h122v1.5zM1039 835h311v1.5zM1524 854h101v1.5zM811 744h146v1.5zM74 874h237v1.5zM403 731h318v1.5zM862 876h139v1.5zM1504 882h202v1.5zM134 795h85v1.5zM296 902h106v1.5zM288 765h312v1.5zM221 789h207v1.5zM25 834h96v1.5zM477 759h319v1.5zM672 752h159v1.5z'/%3E%3C/svg%3E") center / cover no-repeat, #060b18;
}
.demo-studio__art--ocean {
  background:
    radial-gradient(10% 7% at 50% 50%, #fff4e0 0%, rgba(255, 220, 190, 0.8) 40%, transparent 75%),
    linear-gradient(180deg, #27305e 0%, #6c5f9e 24%, #d99aa6 42%, #ffd2a8 50%, transparent 50.3%),
    radial-gradient(14% 40% at 50% 60%, rgba(255, 214, 180, 0.55), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 220, 200, 0.14) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #5c5a8e 50%, #283466 72%, #0d1532 100%);
}
.demo-studio__art--aurora {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2302040b'/%3E%3Cstop offset='.45' stop-color='%23051524'/%3E%3Cstop offset='.64' stop-color='%230b2c3a'/%3E%3C/linearGradient%3E %3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d3340'/%3E%3Cstop offset='.4' stop-color='%23071a26'/%3E%3Cstop offset='1' stop-color='%23030a12'/%3E%3C/linearGradient%3E %3ClinearGradient id='a0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236dffc8' stop-opacity='0'/%3E%3Cstop offset='.62' stop-color='%236dffc8' stop-opacity='0.30250000000000005'/%3E%3Cstop offset='.93' stop-color='%236dffc8' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%236dffc8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='a1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235ae6be' stop-opacity='0'/%3E%3Cstop offset='.62' stop-color='%235ae6be' stop-opacity='0.275'/%3E%3Cstop offset='.93' stop-color='%235ae6be' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%235ae6be' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='a2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a88cff' stop-opacity='0'/%3E%3Cstop offset='.62' stop-color='%23a88cff' stop-opacity='0.20900000000000002'/%3E%3Cstop offset='.93' stop-color='%23a88cff' stop-opacity='0.38'/%3E%3Cstop offset='1' stop-color='%23a88cff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='a3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238dffd8' stop-opacity='0'/%3E%3Cstop offset='.62' stop-color='%238dffd8' stop-opacity='0.1925'/%3E%3Cstop offset='.93' stop-color='%238dffd8' stop-opacity='0.35'/%3E%3Cstop offset='1' stop-color='%238dffd8' stop-opacity='0'/%3E%3C/linearGradient%3E %3Cfilter id='sg' x='-200%25' y='-200%25' width='500%25' height='500%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E %3Cfilter id='bl' x='-10%25' y='-20%25' width='120%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='16 26'/%3E%3C/filter%3E %3Cfilter id='ry' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .0009' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 1 0 0 0 0 .85 0 0 0 2.2 -1.15'/%3E%3C/filter%3E %3ClinearGradient id='rm' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.1' stop-color='%23000'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='.35'/%3E%3Cstop offset='.66' stop-color='%23000'/%3E%3C/linearGradient%3E %3Cmask id='rk'%3E%3Crect width='1600' height='1000' fill='url(%23rm)'/%3E%3C/mask%3E %3CclipPath id='sky'%3E%3Crect width='1600' height='640'/%3E%3C/clipPath%3E %3C/defs%3E %3Crect width='1600' height='640' fill='url(%23s)'/%3E %3Cg clip-path='url(%23sky)'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.4' d='M362 22h0M148 491h0M1118 27h0M291 489h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.65' d='M395 50h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.4' d='M725 44h0M170 121h0M826 577h0M718 406h0M1529 168h0M837 9h0M564 124h0M1042 159h0M1018 576h0M542 407h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.4' d='M1121 187h0M1586 288h0M677 464h0M922 394h0M1376 295h0M553 316h0M1004 1h0M1415 0h0M694 73h0M1287 410h0M570 472h0M341 121h0M1074 181h0M495 81h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.4' d='M1106 310h0M1460 112h0M1568 0h0M1190 585h0M1497 553h0M815 189h0M613 357h0M141 398h0M711 26h0M774 525h0M997 88h0M1040 58h0M364 511h0M742 7h0M195 595h0M1285 143h0M106 230h0M385 0h0M31 234h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.9' d='M863 351h0M804 47h0M840 202h0M273 159h0M455 97h0M494 79h0M1474 407h0M1402 38h0M1006 40h0M1072 157h0M1416 402h0M458 383h0M1163 369h0M126 619h0M1130 31h0M854 422h0M290 52h0M893 260h0M820 211h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.9' d='M934 243h0M764 401h0M714 84h0M280 15h0M733 433h0M1158 197h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.4' d='M156 352h0M1175 321h0M1177 256h0M1479 585h0M1467 81h0M747 516h0M1241 384h0M202 69h0M1422 21h0M1499 494h0M135 255h0M1569 5h0M25 273h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.4' opacity='0.9' d='M494 82h0M272 616h0M242 457h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='3.0' opacity='0.65' d='M1492 1h0M313 579h0M462 222h0M170 16h0M43 367h0M97 350h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.2' opacity='0.65' d='M546 164h0M284 167h0M45 543h0M908 473h0M970 465h0M242 123h0M748 57h0M80 502h0M231 606h0M1234 135h0M1383 168h0M664 399h0M1563 208h0M1540 385h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.9' d='M668 84h0M1198 78h0M880 151h0M1292 85h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.4' d='M1400 585h0M1336 25h0M153 192h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.65' d='M1264 17h0M26 353h0M1014 414h0M1411 262h0M258 52h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.4' d='M823 550h0M238 7h0M533 58h0M65 261h0M381 280h0M1537 114h0M246 1h0M146 371h0M1056 2h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.9' d='M81 18h0M249 62h0M582 283h0M623 255h0M1341 200h0M1570 580h0M690 420h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.9' d='M1450 459h0M873 7h0M1099 561h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.65' d='M1035 283h0M154 108h0M709 104h0M1250 570h0M639 150h0M1469 378h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.4' opacity='0.65' d='M357 236h0M596 608h0M1359 23h0M1121 153h0M1101 0h0M972 484h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.4' opacity='0.9' d='M980 337h0M680 28h0M33 122h0M293 89h0M474 58h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.65' d='M936 45h0M1111 18h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.65' d='M261 492h0M832 367h0M270 7h0M198 2h0M1253 262h0M1094 495h0M254 520h0M140 578h0M180 29h0M317 32h0M1281 89h0M527 145h0M885 239h0M780 9h0M465 372h0M168 323h0M1288 381h0M645 325h0M386 30h0M442 214h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.65' d='M1578 456h0M103 306h0M805 514h0M120 201h0M541 512h0M1222 89h0M170 231h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.9' d='M391 66h0M925 121h0M1351 206h0M67 609h0M1123 115h0M257 75h0M386 14h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.9' d='M305 14h0M92 311h0M1025 116h0M720 215h0M1010 483h0M242 22h0M765 407h0M152 373h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.6' opacity='0.4' d='M1159 99h0M1372 0h0M1284 12h0M909 1h0M960 54h0M800 77h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='1.2' opacity='0.4' d='M539 566h0M1506 54h0M592 38h0M719 86h0M660 97h0M498 230h0M1418 72h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.4' opacity='0.9' d='M895 507h0M1303 339h0M1332 79h0M939 217h0M190 497h0M863 95h0M451 388h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='2.0' opacity='0.65' d='M783 472h0M255 545h0M1177 573h0M894 411h0M1174 585h0M1421 354h0M1248 355h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='3.0' opacity='0.9' d='M526 151h0M1393 59h0M740 281h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.4' opacity='0.4' d='M1156 47h0M1157 113h0M708 86h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.65' d='M970 534h0M1575 432h0M1208 563h0M1344 469h0M320 516h0M128 309h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.0' opacity='0.4' d='M701 43h0M557 215h0'/%3E%3Cpath stroke='%23eaf2ff' stroke-width='1.6' opacity='0.9' d='M776 355h0M800 26h0M1552 100h0M1524 37h0M592 603h0M1478 280h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.9' d='M1389 207h0M135 61h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.4' d='M481 24h0M652 127h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='3.0' opacity='0.9' d='M986 352h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='3.0' opacity='0.4' d='M1221 265h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.4' d='M1017 18h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.6' opacity='0.65' d='M402 165h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='1.2' opacity='0.65' d='M745 452h0'/%3E%3Cpath stroke='%23fff3d6' stroke-width='2.0' opacity='0.9' d='M672 560h0'/%3E%3Cpath stroke='%23bcd4ff' stroke-width='2.0' opacity='0.4' d='M1394 26h0M1501 0h0'/%3E%3C/g%3E%3Cpath stroke='%23eaf2ff' stroke-width='10' stroke-linecap='round' opacity='.22' filter='url(%23sg)' d='M1168 84h0M1317 218h0M856 423h0M861 99h0M1162 390h0M253 172h0M435 298h0'/%3E%3Cpath stroke='%23fff' stroke-width='3.6' stroke-linecap='round' d='M1168 84h0M1317 218h0M856 423h0M861 99h0M1162 390h0M253 172h0M435 298h0'/%3E%3C/g%3E %3Cg id='au' filter='url(%23bl)'%3E%3Cpath d='M-100,157.6 L-58.3,181.9 L-16.7,196.7 L25,200.7 L66.7,195.3 L108.3,183.8 L150,170.5 L191.7,159.4 L233.3,153.4 L275,152.8 L316.7,155.8 L358.3,159.1 L400,158.6 L441.7,151.1 L483.3,135 L525,111.5 L566.7,83.8 L608.3,56.6 L650,35 L691.7,23.2 L733.3,23 L775,33.9 L816.7,52.9 L858.3,75.3 L900,96.4 L900,454.3 L858.3,446.3 L816.7,439.4 L775,433.9 L733.3,430.1 L691.7,428.2 L650,428.3 L608.3,430.3 L566.7,434.1 L525,439.6 L483.3,446.6 L441.7,454.6 L400,463.4 L358.3,472.4 L316.7,481.4 L275,489.8 L233.3,497.3 L191.7,503.5 L150,508.2 L108.3,511.1 L66.7,512 L25,511 L-16.7,508 L-58.3,503.3 L-100,497.1 Z' fill='url(%23a0)'/%3E%3Cpath d='M500,111.8 L541.7,94.9 L583.3,81.5 L625,74.1 L666.7,72.9 L708.3,75.8 L750,79.2 L791.7,79.2 L833.3,72.5 L875,58.2 L916.7,37.3 L958.3,13.5 L1000,-8.7 L1041.7,-24.4 L1083.3,-30 L1125,-24.2 L1166.7,-8.3 L1208.3,14.3 L1250,38.7 L1291.7,60.1 L1333.3,75 L1375,82.1 L1416.7,82.4 L1458.3,78.9 L1500,75.6 L1500,450.6 L1458.3,445.8 L1416.7,439.8 L1375,432.9 L1333.3,425.4 L1291.7,417.6 L1250,409.9 L1208.3,402.7 L1166.7,396.4 L1125,391.1 L1083.3,387.1 L1041.7,384.7 L1000,384 L958.3,384.9 L916.7,387.5 L875,391.6 L833.3,397 L791.7,403.5 L750,410.8 L708.3,418.5 L666.7,426.3 L625,433.7 L583.3,440.6 L541.7,446.4 L500,451.1 Z' fill='url(%23a1)'/%3E%3Cpath d='M900,168 L935.4,173 L970.8,177.4 L1006.2,177.4 L1041.7,170.6 L1077.1,156.5 L1112.5,137.4 L1147.9,117.2 L1183.3,100.6 L1218.8,92 L1254.2,93.8 L1289.6,106.2 L1325,126.8 L1360.4,151.3 L1395.8,174.7 L1431.2,192.7 L1466.7,202.6 L1502.1,204.1 L1537.5,199.4 L1572.9,192.2 L1608.3,186.7 L1643.8,186.1 L1679.2,192 L1714.6,203.3 L1750,217 L1750,524 L1714.6,527.3 L1679.2,529.3 L1643.8,530 L1608.3,529.3 L1572.9,527.2 L1537.5,523.8 L1502.1,519.3 L1466.7,513.9 L1431.2,507.9 L1395.8,501.5 L1360.4,495 L1325,488.8 L1289.6,483.1 L1254.2,478.1 L1218.8,474.2 L1183.3,471.5 L1147.9,470.2 L1112.5,470.2 L1077.1,471.6 L1041.7,474.4 L1006.2,478.3 L970.8,483.3 L935.4,489 L900,495.3 Z' fill='url(%23a2)'/%3E%3Cpath d='M200,225.5 L237.5,212 L275,194.9 L312.5,178.3 L350,167 L387.5,164.5 L425,172.1 L462.5,189 L500,211.6 L537.5,235.4 L575,255.4 L612.5,267.9 L650,271.6 L687.5,267.2 L725,257.8 L762.5,247.7 L800,240.9 L837.5,240.2 L875,246.1 L912.5,256.9 L950,269 L987.5,277.9 L1025,279.8 L1062.5,272.5 L1100,256.3 L1100,533.5 L1062.5,538.6 L1025,543.8 L987.5,548.8 L950,553.4 L912.5,557.4 L875,560.5 L837.5,562.7 L800,563.8 L762.5,563.9 L725,562.8 L687.5,560.6 L650,557.5 L612.5,553.6 L575,549 L537.5,544 L500,538.8 L462.5,533.7 L425,528.8 L387.5,524.5 L350,521 L312.5,518.3 L275,516.6 L237.5,516 L200,516.5 Z' fill='url(%23a3)'/%3E%3C/g%3E %3Crect width='1600' height='640' filter='url(%23ry)' mask='url(%23rk)' opacity='.55'/%3E %3Crect y='640' width='1600' height='360' fill='url(%23l)'/%3E %3Cg transform='translate(0 1300) scale(1 -1)' opacity='.34'%3E%3Cuse href='%23au'/%3E%3C/g%3E %3Cpath d='M-10,640 L43.2,606.2 L134,609.9 L191.3,590.4 L295.9,601.7 L376.3,617.4 L416.6,609 L503.4,628 L606.9,620.1 L665.5,631.3 L785.3,605.1 L895.3,617.8 L938,628.1 L1017.8,635.1 L1134,633.1 L1186.4,628 L1236.4,626.9 L1312.6,630.6 L1380.1,629.8 L1435,636.7 L1544.3,629.5 L1646.7,627 L1620,640 Z' fill='%2302060d'/%3E %3Crect y='640' width='1600' height='3' fill='%236dffc8' opacity='.12'/%3E %3Cpath stroke='%23cfe2ff' stroke-width='1.2' opacity='.1' d='M1546 947h346M1196 850h338M108 817h368M241 956h386M596 783h255M555 978h235M-54 698h335M1587 823h267M835 901h186M935 842h306M207 722h224M1476 777h299M421 702h139M1283 910h232M1061 879h389M1529 796h416M1534 853h384M734 786h194M1389 720h140M1268 909h264M1322 686h197M392 800h171'/%3E %3C/svg%3E") center / cover no-repeat, #03070f;
}