/* Shared product palette. See docs/brand-visual-style.md. */
:root {
  color-scheme: dark;
  --bg: #07051b;
  --card: #15102c;
  --text: #f5f1ff;
  --muted: #bcb4d2;
  --line: #44355f;
  --accent: #d1bbff;
  --mint: var(--accent); /* Compatibility with the original page components. */
  --brand-gradient: linear-gradient(115deg, #7135ec, #bc168f 65%, #ce245f);
  --panel-gradient: linear-gradient(135deg, #1b1533, #110d24);
}

html { background: var(--bg); }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse 850px 650px at 80% 180px, #70239b24, transparent 75%),
    radial-gradient(ellipse 800px 650px at 10% 400px, #3423a32a, transparent 75%),
    var(--bg);
}
::selection { color: #fff; background: #7841b4; }
:focus-visible { outline: 3px solid #e3b8ff; outline-offset: 4px; }
button, .button, .nav-account, input, select, textarea {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
button { color: var(--text); background: #241c38; border-color: #514266; }
button:hover, .nav-account:hover { border-color: #ac87ed; background: #302345; }
button.primary, .button.primary, .relay-site .button {
  color: #fff;
  border: 1px solid #cf9aff66;
  background: var(--brand-gradient);
  box-shadow: 0 6px 24px #8a2ba72b, inset 0 1px 0 #ffffff24;
}
button.primary:hover, .button.primary:hover, .relay-site .button:hover {
  background: linear-gradient(115deg, #8654f1, #be34a2 65%, #d33f78);
  border-color: #e7c4ff;
  box-shadow: 0 8px 30px #b537a841;
}
.nav { border-bottom: 1px solid #ad82ed1c; }
.nav-account { background: #22192e80; border-color: #655079; }
.nav nav a:hover, .text-link:hover, .footer a:hover { color: #e6beff; }
.logo {
  color: #d68dff;
  background: linear-gradient(135deg, #ad9bff, #f081d8 65%, #ffc799);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 span {
  color: #d0a4ff;
  background: linear-gradient(100deg, #bca1ff 5%, #ee92dc 70%, #ffc2b0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p, .hero-highlights { color: #c2bbd4; }
.hero .hero-lead { color: #f3eaff; }
.hero .hero-description { color: #bdb5d1; }
.hero .hero-network, .hero-copy .highlights-heading { color: #d1b7ff; }
.platform-note, .hero-footnote, .muted, .footer { color: #aaa0bd; }
.eyebrow, .scene-bottom b, .price, .checkout-amount { color: var(--accent); }
.dot { background: #df9eff; box-shadow: 0 0 12px #b25bff66; }

/* The luminous sphere carries the reference image's blue / violet / rose. */
.promo-scene {
  isolation: isolate;
  border-color: #75529c80;
  background:
    radial-gradient(ellipse at 87% 80%, #c3276a33, transparent 55%),
    radial-gradient(ellipse at 25% 25%, #3a16b54d, transparent 60%),
    linear-gradient(145deg, #0e0927, #170a23 75%, #240b20);
  box-shadow: 0 28px 90px #03010a80, inset 0 1px 0 #ead0ff1a;
}
.promo-scene::before {
  z-index: -1;
  background-image: linear-gradient(#c6a1ff08 1px, transparent 1px), linear-gradient(90deg, #c6a1ff08 1px, transparent 1px);
}
.promo-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 88%;
  aspect-ratio: 1;
  left: 6%;
  top: 10%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 105%, #fff0ae 0, #ffb4d5 10%, #ee4bc94d 23%, transparent 45%),
    radial-gradient(ellipse at 78% 70%, #db1376b3, transparent 60%),
    radial-gradient(ellipse at 37% 66%, #7c20dfcc, #25125c80 60%, #0c082b 90%);
  box-shadow: inset 0 -3px 4px #ffe2ba, inset 3px -8px 18px #ed4297, 0 20px 65px #ab1a7b55;
}
.scene-top, .scene-bottom { color: #d6bfea; }
.scene-pill { border-color: #af7cce80; background: #160d2a99; }
.radar-orbit { border-color: #d1b4ff24; }
.radar-sweep {
  background: conic-gradient(from 50deg, transparent 280deg, #d59cff18 350deg, transparent 360deg);
  animation: brand-orbit 28s linear infinite;
}
@keyframes brand-orbit {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.ai-nucleus {
  border-color: #e7baff80;
  background: linear-gradient(145deg, #452260ed, #1e1234f5);
  box-shadow: 0 0 50px #bc47d633, inset 0 1px 0 #fff0ff38;
}
.ai-nucleus > span { color: #ffc3ee; }
.ai-nucleus strong { color: #fff5ff; }
.ai-nucleus small { color: #dab9f0; }
.scene-node, .node-radar { background: #20142ff2; border-color: #9b70bf80; }
.scene-node > i { color: #e4b3ff; }
.scene-node small { color: #c8b4d9; }
.preview { border-color: #72518a; background: var(--panel-gradient); }
.preview-bar { border-color: #4b355e; color: #bfabcf; }
.preview-bar i { background: #8d62ad; }
.bubble { border-color: #705080; background: #32213f; }
.preview-label, .work, .answer p, .preview-input { color: #bda8ce; }
.file-chip, .preview-input { border-color: #705080; }
.preview-input span { background: #b893e8; color: #170d24; }

.download-card, .price-card, .account-card, .download-check, .pricing-table, .contact-grid article {
  background: var(--panel-gradient);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #f3d6ff08;
}
.download-card .github, .download-card details { color: #b7a8d0; }
.download-card details code { color: #ded0f3; }
.features article > span { color: #bd9ce4; }
.price-card:last-child { border-color: #9b64bf; background: linear-gradient(140deg, #2f1d43, #21162e); }
.price-card small, .price-card p, .referral-banner p { color: #c8b9dc; }
.invite { background: linear-gradient(120deg, #291946, #31172d); border-color: #8d5aad; }
.invite p, .invite span { color: #d2b8e2; }
.contact-grid a, .contact-grid code { color: #d7b6ff; }
.contact-grid details { color: #c6b7d6; }
.account-card label { color: #cbbcdc; }
.account-card input, .account-card select, .support-panel textarea {
  background: #100c1d;
  color: var(--text);
  border-color: #61506e;
}
input::placeholder, textarea::placeholder { color: #a49ab4; }
.notice { background: #2a1b3e; border-color: #8f60b6; }
.notice.error { background: #3c152c; border-color: #bc5b7a; color: #ffd6e1; }
.download-check pre { background: #0b0917; }
.support-panel { background: #191124; border-color: #a16ec4; }
.support-heading button { background: transparent; color: #e9ceff; }
.support-panel p, .checkout-page p { color: #c8bcd6; }
.checkout-order, .checkout-page #notice { border-color: #5e446e; }
.tutorial-player, #tutorial video { background: #090613; }

/* Independent network pages use the same brand without changing their flows. */
.network-page .hero-copy:last-child {
  padding: 42px;
  border: 1px solid #82539d80;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 92% 95%, #c02a833d, transparent 65%),
    radial-gradient(ellipse at 0 10%, #6137c345, transparent 70%), #171026;
}
.network-page .hero-copy:last-child h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.5; }
.relay-site { font-family: system-ui, "Microsoft YaHei", sans-serif; }
.relay-site main > a, .relay-site section > p > a, .relay-site details a { color: #d5b9ff; }
.relay-site p, .relay-site li { color: #c4b8d5; }
.relay-site section {
  background: var(--panel-gradient);
  border-color: #473254;
  box-shadow: inset 0 1px 0 #f3d6ff0c;
}
.relay-site .chain span { background: #2c1b3e; border: 1px solid #73518a; }
.relay-site .chain b { color: #e2a0de; }
.relay-site .price { color: #e5adf1; }

@media (max-width: 700px) {
  .network-page .hero-copy:last-child { padding: 26px; border-radius: 22px; }
  .support-toggle { right: 18px; bottom: 18px; }
}
@media (max-width: 650px) {
  .nav { flex-wrap: wrap; }
  .nav .brand { flex-shrink: 0; }
  .nav nav { width: 100%; justify-content: flex-start; }
  .promo-scene { min-height: 540px; }
  .ai-nucleus { width: 142px; height: 142px; border-radius: 32px; }
  .node-gpt { top: 83px; left: 14px; }
  .node-radar { top: 133px; right: 14px; }
  .node-network { bottom: 130px; left: 14px; }
  .node-models { bottom: 62px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-sweep { animation: none; }
  html { scroll-behavior: auto; }
  button, .button, .nav-account, input, select, textarea { transition: none; }
}

/* 2026-10-13: electric violet, hot rose and a warm planetary rim. */
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: -20vh -15vw 0;
  background:
    radial-gradient(ellipse 40% 38% at 76% 20%, #e6008c36, transparent 72%),
    radial-gradient(ellipse 44% 48% at 30% 28%, #5323ed44, transparent 72%),
    radial-gradient(ellipse 25% 35% at 88% 54%, #ff5b1820, transparent 80%);
  animation: brand-aurora 24s ease-in-out infinite alternate;
}
.nav { position: relative; border-bottom-color: #b18bff36; }
.nav .brand { color: #fbf6ff; }
.hero h1 span {
  background-image: linear-gradient(110deg, #b6a0ff 5%, #e891ff 45%, #ff77c0 72%, #ffc98b);
  text-shadow: 0 0 42px #be37ff14;
}
.hero .hero-lead { color: #f9f2ff; }
.hero-highlights { color: #c8bfdc; }
.hero-highlights strong { color: #f2eaff; }
.eyebrow { color: #dcc5ff; }
.dot { background: #f193ff; box-shadow: 0 0 14px #d932fb88; }
button.primary, .button.primary, .relay-site .button {
  box-shadow: 0 8px 30px #ae179e3b, inset 0 1px 0 #ffd6ff38;
}
button.primary:hover, .button.primary:hover, .relay-site .button:hover {
  background: linear-gradient(115deg, #7e3bee, #c21799 65%, #d72b6a);
  box-shadow: 0 10px 34px #d326a857, inset 0 1px 0 #ffe8ff44;
}
.promo-scene {
  background: radial-gradient(ellipse at 75% 88%, #fc07522b, transparent 62%),
    radial-gradient(ellipse at 10% 10%, #6822fa38, transparent 62%), #09051f;
  border-color: #b47aff80;
  box-shadow: 0 28px 90px #03010a80, 0 0 60px #a623e512, inset 0 1px 0 #ead0ff30;
}
.promo-scene::before { z-index: 0; }
.promo-scene::after {
  z-index: 0;
  width: 90%;
  left: 5%;
  top: 10%;
  background:
    radial-gradient(ellipse 63% 18% at 50% 102%, #fff6c4 0, #ffe5b9 24%, #ff95dd88 55%, transparent 90%),
    radial-gradient(ellipse at 90% 78%, #ff3d0fba, transparent 62%),
    radial-gradient(ellipse at 62% 65%, #f000ae, #ca00bc99 32%, transparent 66%),
    radial-gradient(ellipse at 22% 74%, #7510ed, #290b6d 55%, #09051e 94%);
  box-shadow: inset 0 -3px 3px #fff9b5, inset 0 -9px 16px #ffad6e,
    inset 4px -18px 35px #ff2674ad, 0 15px 60px #fb17a12b;
  animation: brand-planet 20s ease-in-out infinite alternate;
}
.scene-aura {
  position: absolute;
  pointer-events: none;
  width: 87%;
  aspect-ratio: 1;
  top: 10%;
  left: 6%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 20% 70%, #4715ff9c, transparent 60%),
    radial-gradient(ellipse at 75% 65%, #ff006f88, transparent 65%);
  opacity: .48;
  animation: brand-chroma 17s ease-in-out infinite alternate;
}
.radar-orbit { z-index: 1; border-color: #ebbdff2d; }
.radar-sweep { z-index: 1; }
.ai-nucleus {
  background: linear-gradient(145deg, #38195ceb, #1e1038f5);
  border-color: #f1b8ff9c;
  box-shadow: 0 0 45px #d02aff29, inset 0 1px 0 #fff0ff50;
}
.scene-node { border-color: #bb84e27d; background: #1b102cf2; box-shadow: 0 8px 25px #05000b70; }
.scene-node > i { color: #f0a5ff; }
.scene-node small { color: #dbc3ee; }
.download-card:hover, .contact-grid article:hover {
  border-color: #a778d4;
  box-shadow: 0 10px 34px #7135ec16, inset 0 1px 0 #f3d6ff15;
}
.download-card, .contact-grid article { transition: border-color .2s, box-shadow .2s; }
.network-page .hero-copy:last-child {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #b47aff70;
  background: radial-gradient(ellipse at 90% 100%, #ed0a8633, transparent 65%),
    radial-gradient(ellipse at 8% 10%, #6322ee38, transparent 70%), #100b26;
}
.network-orb, .relay-orb {
  position: relative;
  isolation: isolate;
  width: 180px;
  aspect-ratio: 1;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 105%, #fff5b5, #ff96e16b 18%, transparent 43%),
    radial-gradient(ellipse at 82% 70%, #ff136fc9, transparent 60%),
    radial-gradient(ellipse at 30% 70%, #8c19ed, #2d0a64 65%, #0a051e 95%);
  box-shadow: inset 0 -3px 4px #ffefb8, inset 3px -9px 17px #f13a9d, 0 20px 65px #b923b53b;
  animation: brand-planet 20s ease-in-out infinite alternate;
}
.network-orb::before, .relay-orb::before {
  content: ""; position: absolute; inset: -12px;
  border: 1px solid #d5b0ff40; border-radius: 50%;
}
.network-orb span, .relay-orb span { color: #fff2fc; font-size: 62px; line-height: 1; text-shadow: 0 0 24px #f290ffc9; }
.relay-orb { float: right; width: 200px; margin: 25px 25px 40px 45px; }
.relay-site .eyebrow { color: #dac1ff; }
.relay-site h1 { color: #fff3ff; }
.relay-site .chain span { background: #23123b; border-color: #965bcf; }
.relay-site .chain b { color: #f78ad4; }
.relay-site section { clear: both; }

/* Compact, keyboard-accessible controls. Audio is opt-in and never loops. */
.brand-controls {
  position: fixed; left: 18px; bottom: 22px; z-index: 30;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px;
  font: 13px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}
.brand-controls .brand-controls-launcher {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 1px solid #b487e9; border-radius: 50%; cursor: pointer;
  color: #fff0ff; background: linear-gradient(145deg, #39206b, #79184f);
  box-shadow: 0 5px 22px #16002f80; font-size: 24px; line-height: 1;
}
.brand-controls .brand-controls-launcher:hover { border-color: #f3b2ff; background: #4e246e; }
.brand-controls .brand-controls-panel {
  width: 200px; margin: 0; padding: 15px; border-radius: 15px;
  border: 1px solid #9464bd; color: #f5f1ff; background: #151025fa;
  box-shadow: 0 12px 40px #03000bb3; display: flex; flex-direction: column; gap: 9px;
}
.brand-controls-panel[hidden] { display: none !important; }
.brand-controls .brand-controls-panel button {
  text-align: left; justify-content: flex-start; border: 1px solid #655079;
  border-radius: 8px; padding: 8px 10px; background: #241735; color: #eee0ff; cursor: pointer;
  font: inherit;
}
.brand-controls .brand-controls-panel button[aria-pressed="true"] { border-color: #bb89f7; background: #38234d; }
.brand-controls .brand-controls-panel button:disabled { opacity: .7; cursor: default; }
.brand-controls .brand-controls-panel small { color: #bcb0cd; font-size: 11px; }
.brand-controls-status { color: #ffd8a8; font-size: 11px; }
.brand-controls-status:empty { display: none; }
@keyframes brand-aurora { from { transform: translate3d(-2%, 0, 0); opacity: .65; } to { transform: translate3d(3%, 2%, 0); opacity: 1; } }
@keyframes brand-planet { from { transform: translate3d(0, 0, 0) scale(.98); } to { transform: translate3d(0, -4px, 0) scale(1.015); } }
@keyframes brand-chroma { from { transform: translate3d(-2%, 0, 0); opacity: .25; } to { transform: translate3d(2%, -2%, 0); opacity: .75; } }
html[data-brand-motion="off"] body::before, html[data-brand-motion="off"] .promo-scene::after,
html[data-brand-motion="off"] .scene-aura, html[data-brand-motion="off"] .radar-sweep,
html[data-brand-motion="off"] .network-orb, html[data-brand-motion="off"] .relay-orb { animation: none; }
html[data-brand-visible="false"] body::before, html[data-brand-visible="false"] .promo-scene::after,
html[data-brand-visible="false"] .scene-aura, html[data-brand-visible="false"] .radar-sweep,
html[data-brand-visible="false"] .network-orb, html[data-brand-visible="false"] .relay-orb { animation-play-state: paused; }
@media (max-width: 650px) {
  .relay-orb { width: 150px; margin: 15px 8px 35px 28px; }
  .network-orb { width: 150px; margin-bottom: 24px; }
  .brand-controls { left: 14px; bottom: 18px; }
}
@media (max-width: 420px) { .relay-orb { float: none; margin: 30px auto; } }
@media (prefers-reduced-motion: reduce) {
  body::before, .promo-scene::after, .scene-aura, .radar-sweep, .network-orb, .relay-orb { animation: none; }
  .download-card, .contact-grid article { transition: none; }
}

/* Use the owner's exact reference artwork instead of approximating its sphere. */
.twin-page .promo-scene::after {
  background: #08051b url('/assets/codex-twin-sphere-reference-20261014.png?v=20261014') center bottom / 153.68% 100% no-repeat;
  box-shadow: none;
  animation: none;
}
.twin-page .promo-scene::before,
.twin-page .scene-aura,
.twin-page .radar-orbit,
.twin-page .radar-sweep {
  display: none;
}