/* /synapse/: the line behind axi0 search, live. The house base (palette, font, header) as on the other suite pages,
   then the sky (one inline SVG built by synapse.js: the pool ring, the models in orbit, the trending band, the hosts'
   ring), the feed, the brain's rings and the four addresses. True black in the dark theme, paper in the light one, one
   orange core, Instrument Sans. The motion is CSS only and stops under prefers-reduced-motion. No inline styles in the
   markup (the page runs under style-src 'self'); sizes that depend on the sky's size are set through the CSSOM. */
@font-face {
  font-family: "Instrument Sans";
  src: url(/axi0/fonts/instrument-sans-latin-var.woff2) format("woff2");
  font-weight: 400 700;
  font-display: optional;
}
:root {
  --bg: #000; --panel: #0a0a0c; --panel2: #0d0d10; --field: #050506; --hover: #141418; --raise: #18181d;
  --line: #1c1c21; --line2: #2a2a31; --line3: #3a3a42;
  --head: #fff; --ink: #f5f5f7; --text: #d6d6dc; --text2: #c4c4cc; --lede: #a3a3ad; --mute: #8e8e98; --faint: #868692;
  --core: #f6a04d; --core-ink: #f6a04d; --core-hover: #ffb26a; --on-core: #000; --core-soft: rgba(246, 160, 77, .14);
  --up: #3ddc84; --down: #ff8f78; --veil: rgba(255, 255, 255, .08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
html[data-axi0-theme="light"] {
  --bg: #f6f2ea; --panel: #fffdf9; --panel2: #fffdf9; --field: #fffdf9; --hover: #efe8dc; --raise: #ece5d8;
  --line: #e6dfd3; --line2: #d3cabb; --line3: #8a8174;
  --head: #17140f; --ink: #17140f; --text: #2c2823; --text2: #3d3730; --lede: #4f4940; --mute: #675f54; --faint: #675f54;
  --core-ink: #9a4a0a; --core-soft: rgba(154, 74, 10, .1);
  --up: #1a8a4c; --down: #b3261e; --veil: rgba(60, 40, 20, .07);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) {
    --bg: #f6f2ea; --panel: #fffdf9; --panel2: #fffdf9; --field: #fffdf9; --hover: #efe8dc; --raise: #ece5d8;
    --line: #e6dfd3; --line2: #d3cabb; --line3: #8a8174;
    --head: #17140f; --ink: #17140f; --text: #2c2823; --text2: #3d3730; --lede: #4f4940; --mute: #675f54; --faint: #675f54;
    --core-ink: #9a4a0a; --core-soft: rgba(154, 74, 10, .1);
    --up: #1a8a4c; --down: #b3261e; --veil: rgba(60, 40, 20, .07);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
  font: 15px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--core-ink); text-underline-offset: 3px; }
::selection { background: rgba(246, 160, 77, .35); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 999px; background: var(--core); color: var(--on-core); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--core-ink); outline-offset: 2px; }

/* ---- header (the row's geometry comes from launcher.css) ----------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 22px 20px 8px; }
.mark { display: inline-flex; align-items: baseline; gap: .12em; color: var(--head); text-decoration: none; font-size: 26px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.mark-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--core); box-shadow: 0 0 9px var(--core); transform: translateY(-2px); }
.mark-s { color: var(--mute); font-weight: 500; }
.top-right { display: flex; align-items: center; gap: 14px; }
.me-slot { position: relative; flex: none; width: 36px; height: 36px; }

/* ---- the page -------------------------------------------------------------------------------------------------- */
.syn { max-width: 1240px; margin: 0 auto; padding: 2px 20px 8px; }
.syn .eyebrow { margin: 0; font: 500 10px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.syn h1 { margin: 8px 0 0; font-size: clamp(36px, 4.8vw, 54px); line-height: .96; letter-spacing: -.045em; font-weight: 700; color: var(--head); }
.syn h2 { margin: 10px 0 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; color: var(--head); }
.syn .lead { margin: 0; max-width: 34rem; color: var(--lede); font-size: 15.5px; line-height: 1.5; }

/* ---- the first screen: the sky and the feed ----------------------------------------------------------------- */
.live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); gap: 16px 36px; align-items: stretch; min-height: calc(100vh - 88px); min-height: calc(100dvh - 88px); }
.stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stage-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 28px; }
.stage-head .lead { flex: 1 1 20rem; max-width: 30rem; padding-bottom: 4px; }
.orbit { position: relative; width: min(100%, max(280px, calc(100vh - 330px)), 720px); aspect-ratio: 1; margin: 2px auto 0; }
.sky { display: block; width: 100%; height: 100%; overflow: visible; }

/* the sky's parts (SVG, user units in a 1000 x 1000 box) */
.sky .track { fill: none; stroke: var(--line3); stroke-width: 1.4; stroke-dasharray: 5 8; opacity: .8; }
.sky .track.spin { animation: sky-dash 22s linear infinite; }
.sky .track.spin.rev { animation-direction: reverse; animation-duration: 34s; }
.sky .ring-hosts { fill: none; stroke: var(--line2); stroke-width: 1.2; }
.sky .pool-glow { opacity: .9; transform-box: fill-box; transform-origin: center; animation: sky-pulse 5.2s ease-in-out infinite; }
.sky .g-pool .s1 { stop-color: var(--core); stop-opacity: .26; }
.sky .g-pool .s2 { stop-color: var(--core); stop-opacity: .05; }
.sky .g-pool .s3 { stop-color: var(--core); stop-opacity: 0; }
.sky .pool-track { fill: none; stroke: var(--line2); stroke-width: 28; }
.sky .pool-arc { fill: none; stroke: var(--core); stroke-width: 28; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(246, 160, 77, .55)); transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.sky .pool-arc.is-tick { filter: drop-shadow(0 0 18px rgba(246, 160, 77, .95)); }
.sky .core-n { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: -.04em; fill: var(--head); font-variant-numeric: tabular-nums; }
.sky .core-l { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 500; letter-spacing: .02em; fill: var(--mute); }
.sky .core-l.hot { fill: var(--text); }
.sky .rlabel { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; fill: var(--mute); paint-order: stroke; stroke: var(--bg); stroke-width: 8; stroke-linejoin: round; }
.sky .blabel { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; fill: var(--core-ink); }
.sky .moons { transform-box: view-box; transform-origin: center; animation: sky-spin 150s linear infinite; }
.sky .moons:hover, .sky .moons:focus-within { animation-play-state: paused; }
.sky .moon { cursor: pointer; outline: none; }
.sky .moon .halo { fill: var(--core); opacity: 0; transition: opacity .25s; }
.sky .moon .dot { fill: var(--bg); stroke: var(--text); stroke-width: 2.4; transition: fill .25s, stroke .25s; }
.sky .moon.is-default .dot { fill: var(--core); stroke: var(--core); filter: drop-shadow(0 0 9px var(--core)); }
.sky .moon.is-default .halo { opacity: .18; }
.sky .moon:hover .dot, .sky .moon:focus-visible .dot { fill: var(--core); stroke: var(--core); }
.sky .moon:hover .halo, .sky .moon:focus-visible .halo { opacity: .3; }
.sky .band { transition: opacity .7s ease; }
.sky .band.is-in, .sky .band.is-out { opacity: 0; }
.sky .band text { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 500; letter-spacing: .01em; }
.sky .band a { fill: var(--text); text-decoration: none; cursor: pointer; outline: none; }
.sky .band a:hover, .sky .band a:focus-visible { fill: var(--core-ink); }
.sky .band a:focus-visible text { text-decoration: underline; }
.sky .band .sep { fill: var(--core); }
.sky .host { stroke: none; transition: fill .4s; }
.sky .host.up { fill: var(--up); }
.sky .host.down { fill: var(--down); filter: drop-shadow(0 0 6px var(--down)); }
.sky .host.pending, .sky .host.maintenance { fill: var(--mute); }
.sky .host.is-new { animation: host-pop .8s ease-out; }

/* the tip over a moon or a host (positioned by synapse.js inside .orbit) */
.tip { position: absolute; z-index: 4; left: 0; top: 0; max-width: 260px; padding: 8px 11px; pointer-events: none; color: var(--text); background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); font-size: 12.5px; line-height: 1.45; }
.tip b { display: block; color: var(--head); font-weight: 600; }
.tip span { display: block; color: var(--mute); }

/* the numbers under the sky, each a link to its address */
.facts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.facts a { display: inline-flex; align-items: baseline; gap: 7px; min-height: 30px; padding: 4px 11px; color: var(--text); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.facts a:hover { border-color: var(--line3); background: var(--hover); }
.facts .f-l { font: 500 9.5px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--core-ink); }
.facts b { font-weight: 500; color: var(--ink); }

/* the feed */
.feed { position: sticky; top: 8px; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); padding: 14px 16px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; }
.feed-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; border-bottom: 1px solid var(--line); }
.feed-head .eyebrow { white-space: nowrap; }
.feed-note { margin-left: auto; letter-spacing: .12em; }
.syn .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--core); box-shadow: 0 0 10px var(--core); animation: blink 2.6s ease-in-out infinite; }
.feed-list { flex: 1; min-height: 12rem; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.feed-list li { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; animation: feed-in .5s ease; }
.feed-list li:last-child { border-bottom: 0; }
.feed-list time { padding-top: 2px; font: 500 11px/1.5 var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.feed-list .k { color: var(--core-ink); font-weight: 600; }
.feed-list .t { color: var(--text); overflow-wrap: anywhere; }
.feed-list .empty { color: var(--mute); }

/* ---- the brain ------------------------------------------------------------------------------------------------- */
.brain { margin: 44px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); }
.brain-grid { display: grid; gap: 18px 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.brain-art { width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; }
.brain-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brain-text .lead { max-width: 32rem; }
.b-ring { fill: none; stroke: var(--line2); stroke-width: 1.2; }
.b-mask { fill: var(--bg); }
.b-dots circle { fill: var(--text2); opacity: .85; }
.b-link { stroke: var(--core); stroke-linecap: round; opacity: .8; }
.b-end { fill: var(--core); }
.b-n { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; fill: var(--head); paint-order: stroke; stroke: var(--bg); stroke-width: 10; stroke-linejoin: round; }
.b-label { font-family: var(--mono); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; fill: var(--mute); paint-order: stroke; stroke: var(--bg); stroke-width: 12; stroke-linejoin: round; }
.b-glow { fill: var(--core); opacity: .16; }
.b-core { fill: var(--core); filter: drop-shadow(0 0 14px var(--core)); }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 4px 18px; margin: 18px 0 0; }
.kinds div { padding: 8px 0 6px; border-top: 1px solid var(--line); }
.kinds dt { font: 500 9.5px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.kinds dd { margin: 2px 0 0; font-size: 22px; line-height: 1.1; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; }
.kinds dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--mute); }

/* ---- the four addresses ------------------------------------------------------------------------------------- */
.foot { max-width: 1240px; margin: 40px auto 0; padding: 18px 20px 44px; border-top: 1px solid var(--line); }
.foot .eyebrow { margin: 0; font: 500 10px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.addresses { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; font: 500 12.5px/1.7 var(--mono); }
.addresses a { color: var(--text); text-decoration-color: var(--line3); overflow-wrap: anywhere; }
.addresses a:hover { color: var(--core-ink); }
.more { margin: 14px 0 0; font-size: 13px; color: var(--mute); }

/* ---- motion ---------------------------------------------------------------------------------------------------- */
@keyframes sky-spin { to { transform: rotate(360deg); } }
@keyframes sky-dash { to { stroke-dashoffset: -260; } }
@keyframes sky-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes feed-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes host-pop { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sky .moons, .sky .track.spin, .sky .pool-glow, .syn .dot, .feed-list li, .sky .host.is-new { animation: none; }
  .sky .pool-arc, .sky .band, .sky .moon .dot, .sky .moon .halo, .sky .host, .facts a { transition: none; }
}

/* ---- narrower screens ---------------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .live { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .orbit { width: min(100%, max(280px, calc(100vh - 250px)), 720px); }
  .feed { position: static; max-height: 26rem; }
  .brain-grid { grid-template-columns: minmax(0, 1fr); }
  .brain-art { width: min(100%, 480px); }
}
@media (max-width: 600px) {
  .syn { padding: 0 14px 8px; }
  .stage-head { gap: 4px; }
  .feed { padding: 12px 14px 8px; border-radius: 18px; max-height: 22rem; }
  .feed-list li { grid-template-columns: 7.5ch minmax(0, 1fr); font-size: 13px; }
  .facts a { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
  .foot { padding: 16px 14px 36px; }
}