/* developers.xcr9.online — violet skin over ui/xcr9.css plus the page's own components.
   Loaded after xcr9.css; only tokens and new classes, no overrides of shared layout. */

:root {
  --bg: #f6f5fa;
  --surface-2: #eeecf5;
  --accent: #6d28d9;
  --accent-ink: #f6f1ff;
  --accent-soft: rgba(109, 40, 217, 0.1);
  --dot: rgba(30, 20, 60, 0.11);
  --glow: rgba(124, 58, 237, 0.16);
  --c-trace: rgba(40, 24, 90, .10);
  --c-node: rgba(40, 24, 90, .2);
  --c-ctrl: rgba(40, 24, 90, .3);
  --c-ctrl-fill: rgba(40, 24, 90, .02);
  --c-lit: rgba(109, 40, 217, .8);
  --c-pulse: #7c3aed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0a11;
    --surface: #13111b;
    --surface-2: #1a1825;
    --accent: #b394ff;
    --accent-ink: #130a2e;
    --accent-soft: rgba(179, 148, 255, 0.12);
    --dot: rgba(255, 255, 255, 0.07);
    --glow: rgba(150, 105, 255, 0.17);
    --c-trace: rgba(170, 155, 230, .14);
    --c-node: rgba(180, 165, 240, .32);
    --c-ctrl: rgba(195, 180, 250, .44);
    --c-ctrl-fill: rgba(140, 120, 220, .05);
    --c-lit: rgba(179, 148, 255, .9);
    --c-pulse: #b394ff;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0a11;
  --surface: #13111b;
  --surface-2: #1a1825;
  --accent: #b394ff;
  --accent-ink: #130a2e;
  --accent-soft: rgba(179, 148, 255, 0.12);
  --dot: rgba(255, 255, 255, 0.07);
  --glow: rgba(150, 105, 255, 0.17);
  --c-trace: rgba(170, 155, 230, .14);
  --c-node: rgba(180, 165, 240, .32);
  --c-ctrl: rgba(195, 180, 250, .44);
  --c-ctrl-fill: rgba(140, 120, 220, .05);
  --c-lit: rgba(179, 148, 255, .9);
  --c-pulse: #b394ff;
}

/* brand mark */
.mark-glyph { background: var(--accent); color: var(--accent-ink); }
.mark-sub { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 500; padding-inline-start: 10px; border-inline-start: 1px solid var(--line-strong); direction: ltr; unicode-bidi: isolate; }
@media (max-width: 420px) { .mark-sub { display: none; } }
.nav a.out { color: var(--faint); }
[id] { scroll-margin-top: 76px; }

/* hero art: same circuit classes as the main site, drawn by ui/dev.js into #devBase / #devLit */
#devLit .c-trace, #devLit .c-ctrl { stroke: var(--c-lit); }
#devLit .c-node { stroke: var(--c-lit); }
#devLit .c-via { fill: var(--c-lit); }
#devLit {
  -webkit-mask-image: radial-gradient(circle 230px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.45) 42%, transparent 72%);
          mask-image: radial-gradient(circle 230px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.45) 42%, transparent 72%);
}
.c-caret { fill: var(--c-pulse); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hero h1 .h1-big { font-size: clamp(40px, 8.2vw, 84px); }

/* live terminal layer (ui/dev.js). Same box and viewBox as the board, but not edge-masked. */
.term-layer { display: none; -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1100px) {
  .term-layer { display: block; }
  #devBase .c-term-outline { display: none; }
}
#devTerm { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); }
.t-win { fill: #0d0b14; stroke: rgba(179, 148, 255, .3); stroke-width: 1; }
.t-rule { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.t-dot { fill: rgba(255, 255, 255, .15); }
.t-title, .t-status, .t-text { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; white-space: pre; }
.t-title { font-size: 11px; fill: #7f7a93; }
.t-status { font-size: 11px; fill: #7f7a93; }
.t-text { font-size: 12.5px; fill: #d9d4ea; }
.t-w { fill: #d9d4ea; }
.t-c { fill: #7a7591; }
.t-p { fill: #b394ff; }
.t-k { fill: #cbb8ff; }
.t-ok { fill: #8be0b0; }
.t-err { fill: #ff8f8f; }
.t-caret { fill: #b394ff; animation: caret 1.1s steps(1) infinite; }


/* gateway status under the route diagram */
.gw-grid { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gw-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .gw-grid { grid-template-columns: repeat(3, 1fr); } }
.gw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; transition: border-color .15s; }
.gw:hover { border-color: var(--line-strong); }
.gw b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw .ms { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); direction: ltr; white-space: nowrap; }
.gw-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.cover-3 { display: grid; gap: 14px; }
@media (min-width: 880px) { .cover-3 { grid-template-columns: repeat(3, 1fr); } }
.cover-3 .card { padding: 22px; }
.cover-3 h3 { margin: 0 0 14px; font-size: 16px; color: var(--muted); font-weight: 500; }

.cta-band { padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; font-size: 22px; }
.cta-band p { margin: 6px 0 0; color: var(--muted); }