/* Noctis Agentic: the futurist theme (branch theme-futurist, a preview).
   Loaded after site.css and console.css. It redraws the site in the Flint Arena v3 language: a measured
   grid on a cool lab white or a near-black, both designed; a glass rail down the left;
   a page head with a quiet field of the agent network in place of the band of pixel city; Home
   opened by the live agent network (assets/js/net.js); thin rules, 3px corners with HUD corner marks,
   pill controls, thin display numbers, Geist for words and Geist Mono for figures, and vector sigils
   for agents (assets/js/futurist.js). html[data-scheme] picks light or dark; without it the system
   decides. */

[data-theme="agentic"] {
  /* grounds */
  --paper:#F1F2F5; --surface:#FFFFFF; --surface-2:#F7F8FA; --hover:#EEF0F4; --desk:#F7F8FA;
  --panel:#FFFFFF; --panel-2:#F5F6F9; --panel-3:#F3F4F7; --panel-rule:#D9DDE4;
  /* rules */
  --rule:#E0E3E9; --rule-2:#E5E8ED; --rule-faint:#ECEEF2; --rule-strong:#C8CED7;
  /* text ramp */
  --ink:#0A0C10; --t2:#2A303B; --t3:#4A5363; --t4:#5F6879; --t5:#6B7485;
  /* primary and status, deepened so they read on white */
  --blue:#D4007A; --blue-h:#B8006A; --blue-d:#C2006F; --blue-t:#C2006F; --on-blue:#FFFFFF;
  --green:#00845B; --green-2:#00845B; --chip:#00845B; --chip-fg:#FFFFFF;
  --amber:#8F6A00; --red:#CC1D47; --chart-up:#00845B; --chart-down:#CC1D47;
  --track:#DDE1E7; --bar-empty:#ECEEF2;
  /* the 5-colour cycle, same order, deepened for white */
  --c1:#D4007A; --c2:#007F98; --c3:#00845B; --c4:#8F6A00; --c5:#CC5200;
  --mark-filter:none;
  /* type: Geist for words and headlines, Geist Mono for figures and labels */
  --pix:'Geist','Inter',system-ui,sans-serif;
  --mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --body:'Geist','Inter',system-ui,sans-serif;
  --pxs:1;
  --drift:var(--ink); --bevel:none;
  /* new in this theme */
  --grid-c:#0A0C10; --glass:rgba(255,255,255,.8);
  /* the heading areas keep the page's own ground: these hold it for them (see "the ground") */
  --h-paper:var(--paper); --h-surface:var(--surface); --h-surface-2:var(--surface-2); --h-hover:var(--hover); --h-desk:var(--desk); --h-panel:var(--panel); --h-panel-2:var(--panel-2); --h-panel-3:var(--panel-3); --h-rule:var(--rule); --h-rule-2:var(--rule-2); --h-rule-faint:var(--rule-faint); --h-rule-strong:var(--rule-strong); --h-glass:var(--glass);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px -20px rgba(16,24,40,.22);
  --shadow-2:0 2px 4px rgba(16,24,40,.06),0 22px 44px -22px rgba(16,24,40,.32);
  --ease:cubic-bezier(.2,0,0,1); --out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"])[data-theme="agentic"], html:not([data-scheme="light"]) [data-theme="agentic"] {
    --paper:#07080A; --surface:#0E1014; --surface-2:#13161B; --hover:#161A20; --desk:#0A0C0F;
    --panel:#0E1014; --panel-2:#0B0D10; --panel-3:#0A0C0F; --panel-rule:#2B3139;
    --rule:#1D2127; --rule-2:#1A1E24; --rule-faint:#15181D; --rule-strong:#2B3139;
    --ink:#ECEFF3; --t2:#C3C9D3; --t3:#9CA5B3; --t4:#828C9C; --t5:#727C8C;
    --blue:#FF2FB0; --blue-h:#FF57C0; --blue-d:#FF8AD8; --blue-t:#FF8AD8; --on-blue:#07080A;
    --green:#00FFA3; --green-2:#00FFA3; --chip:#00FFA3; --chip-fg:#07080A;
    --amber:#FFD400; --red:#FF5C7A; --chart-up:#00FFA3; --chart-down:#FF5C7A;
    --track:#252A32; --bar-empty:#15181D;
    --c1:#FF2FB0; --c2:#00E5FF; --c3:#00FFA3; --c4:#FFD400; --c5:#FF7A1A;
    --mark-filter:invert(1); --grid-c:#FFFFFF; --glass:rgba(9,10,13,.78);
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 26px 50px -30px rgba(0,0,0,.95);
    --shadow-2:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -28px rgba(0,0,0,1);
    color-scheme:dark;
  }
}
html[data-scheme="dark"][data-theme="agentic"], html[data-scheme="dark"] [data-theme="agentic"] {
  --paper:#07080A; --surface:#0E1014; --surface-2:#13161B; --hover:#161A20; --desk:#0A0C0F;
  --panel:#0E1014; --panel-2:#0B0D10; --panel-3:#0A0C0F; --panel-rule:#2B3139;
  --rule:#1D2127; --rule-2:#1A1E24; --rule-faint:#15181D; --rule-strong:#2B3139;
  --ink:#ECEFF3; --t2:#C3C9D3; --t3:#9CA5B3; --t4:#828C9C; --t5:#727C8C;
  --blue:#FF2FB0; --blue-h:#FF57C0; --blue-d:#FF8AD8; --blue-t:#FF8AD8; --on-blue:#07080A;
  --green:#00FFA3; --green-2:#00FFA3; --chip:#00FFA3; --chip-fg:#07080A;
  --amber:#FFD400; --red:#FF5C7A; --chart-up:#00FFA3; --chart-down:#FF5C7A;
  --track:#252A32; --bar-empty:#15181D;
  --c1:#FF2FB0; --c2:#00E5FF; --c3:#00FFA3; --c4:#FFD400; --c5:#FF7A1A;
  --mark-filter:invert(1); --grid-c:#FFFFFF; --glass:rgba(9,10,13,.78);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 26px 50px -30px rgba(0,0,0,.95);
  --shadow-2:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -28px rgba(0,0,0,1);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- ground and type */
html, body { background: var(--paper); color: var(--ink); }
body { -webkit-font-smoothing: antialiased; }
a { color: var(--blue-t); } a:hover { color: var(--ink); }
*:focus-visible { outline-color: var(--blue); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--c1) 22%, transparent); }
input[type=range] { accent-color: var(--blue); }
/* the measured grid, strongest at the top and fading down the page */
.na-scroll, .m-app { background-color: var(--paper); background-image: none; }
/* the ground: the pages' bodies sit a step lighter than the rail, the strip and the heading areas
   (Jinx, 22 Oct) -- a touch whiter by day, a midnight slate by night, the panels lifted with it */
.na-col, .m-page, .cx-body { --paper:#F7F8FA; --hover:#F0F2F5; background-color: var(--paper); }
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) .na-col, html:not([data-scheme="light"]) .m-page, html:not([data-scheme="light"]) .cx-body { --paper:#0C0F15; --surface:#12161D; --surface-2:#171B23; --hover:#1A1F28; --desk:#0F1218; --panel:#12161D; --panel-2:#0F1319; --panel-3:#0E1117; --rule:#222833; --rule-2:#1F242E; --rule-faint:#1A1E26; --rule-strong:#303744; --glass:rgba(14,17,23,.8); }
}
html[data-scheme="dark"] .na-col, html[data-scheme="dark"] .m-page, html[data-scheme="dark"] .cx-body { --paper:#0C0F15; --surface:#12161D; --surface-2:#171B23; --hover:#1A1F28; --desk:#0F1218; --panel:#12161D; --panel-2:#0F1319; --panel-3:#0E1117; --rule:#222833; --rule-2:#1F242E; --rule-faint:#1A1E26; --rule-strong:#303744; --glass:rgba(14,17,23,.8); }
.phead, .fhero-band, .m-appbar { --paper: var(--h-paper); --surface: var(--h-surface); --surface-2: var(--h-surface-2); --hover: var(--h-hover); --desk: var(--h-desk); --panel: var(--h-panel); --panel-2: var(--h-panel-2); --panel-3: var(--h-panel-3); --rule: var(--h-rule); --rule-2: var(--h-rule-2); --rule-faint: var(--h-rule-faint); --rule-strong: var(--h-rule-strong); --glass: var(--h-glass); }
.na-col, .m-page, .fhero-band, .cx-body {
  background-image: linear-gradient(color-mix(in srgb, var(--grid-c) 5%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--grid-c) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; background-attachment: local;
}
.pix { font-weight: 500; letter-spacing: -.01em; }
.h1, .m-h1, .idle-n { font-weight: 300; letter-spacing: -.045em; }
.h2, .h3 { font-weight: 500; letter-spacing: -.015em; }
.h2 { font-size: 15px; line-height: 1.2; }
.h2.big { font: 300 30px/1.05 var(--body); letter-spacing: -.035em; }
.lbl { font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--t4); }
.kick { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.thead { background: var(--surface-2); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--t4); }
.nm { font-weight: 500; }
.dot { border-radius: 50%; animation: futPulse 1.6s var(--ease) infinite; }
.caret { color: var(--c1); font-weight: 300; }
.caret-block { width: 3px; background: var(--blue); }
.feed-row.in, .m-feed.in { animation: agIn .45s var(--out); }
@keyframes futPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes futPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.eyebrow-sep { width: 1px; height: 11px; background: var(--rule-strong); }
.pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: futPing 2s var(--ease) infinite; }

/* ---------------------------------------------------------------- buttons, chips, tabs */
.btn-drift {
  height: 38px; padding: 0 18px; border-radius: 999px; clip-path: none; animation: none; box-shadow: none;
  background: var(--ink); color: var(--paper); font: 500 13px/1 var(--body); letter-spacing: 0;
  transition: background .25s, transform .25s var(--out);
}
.btn-drift:hover { color: var(--paper); filter: none; background: color-mix(in srgb, var(--ink) 84%, var(--c1)); }
.btn-drift:active { transform: scale(.97); }
.btn-drift.big { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-out {
  height: 36px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface);
  color: var(--ink); font: 500 12.5px/1 var(--body); letter-spacing: 0; text-transform: none;
  transition: border-color .25s, background .25s, color .25s;
}
.btn-out:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-out.big { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-out.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 9px; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); }
.chip.fill { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.chip.fill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.sm { padding: 3px 7px; font-size: 9.5px; }
.zk, .illus, .tk-concept { border-radius: 999px; }
.numtile { border-radius: 50%; font-weight: 500; background: transparent !important; color: var(--ink); border: 1px solid var(--rule-strong); }
.sw { border-radius: 999px; border-width: 1px; background: var(--surface-2); }
.sw span { border-radius: 50%; transition: background .25s; }
.risk span { border-radius: 1px; }
/* tabs become a segmented pill row, the selected one in ink */
.tabs { gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.tab { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; color: var(--t3); font: 500 12.5px/1 var(--body); transition: background .3s var(--out), color .25s; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab.on { color: var(--paper); background: var(--ink); border: 0; }
.tab.sm { font-size: 12px; }
.tabs.fill .tab { padding: 0 6px; }
.ranges { border-radius: 999px; overflow: hidden; }
.linkbtn, .more { font-weight: 500; }
.more { font: 500 11px/1 var(--mono); letter-spacing: .1em; }

/* ---------------------------------------------------------------- panels: thin, 3px corners, HUD corner marks */
.card { position: relative; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); box-shadow: var(--shadow); }
.card::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: .5;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 9px no-repeat,
              linear-gradient(var(--ink), var(--ink)) 100% 100% / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 9px no-repeat;
}
/* a panel that had a coloured bar along its top keeps the colour as a short tick, as v3's readouts do */
.card[style*="border-top"] { border-top: 1px solid var(--rule) !important; }
.card[style*="border-top"]::before { content: ""; position: absolute; left: 18px; top: -1px; width: 28px; height: 2px; background: var(--tick, var(--ink)); }
.card[style*="--c1)"] { --tick: var(--c1); } .card[style*="--c2)"] { --tick: var(--c2); } .card[style*="--c3)"] { --tick: var(--c3); }
.card[style*="--c4)"] { --tick: var(--c4); } .card[style*="--c5)"] { --tick: var(--c5); } .card[style*="--green)"] { --tick: var(--green); }
.card[style*="--amber)"] { --tick: var(--amber); }
.card-h { padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); }
.card-h .h2 { font: 500 15px/1.2 var(--body); letter-spacing: -.01em; }
.card-h-note { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.sec-h { align-items: baseline; margin-bottom: 14px; }
.sec-note { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--t4); }
.idle { border-radius: 3px; }
.tilt, .tilt.sm, .m-prof > img { transform: none; box-shadow: var(--shadow); }
.tcard { transform: none; box-shadow: var(--shadow); border: 1px solid var(--rule); border-radius: 3px; transition: transform .35s var(--out), box-shadow .35s var(--out), border-color .25s; }
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--rule-strong); }
.pod-b { transform: none; box-shadow: none; }
.m-pod .pod-b { box-shadow: none; }
.ar-lcard:hover { box-shadow: var(--shadow-2); }
img.pixel { image-rendering: auto; border-radius: 50%; }
canvas.pixel, .city { image-rendering: pixelated; }
/* the readouts: label on top, a thin display number, a short colour tick */
.kpis { border-radius: 3px; box-shadow: var(--shadow); }
.kpi { position: relative; display: grid; align-content: start; gap: 8px; border-top: 0; padding: 16px 18px 18px; }
.kpi::before { content: ""; position: absolute; left: 18px; top: 0; width: 28px; height: 2px; background: var(--c); }
.kpi-v { margin: 0; font: 300 30px/1 var(--body); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
/* the strip a mockup page opens with, as v3's prototype strip */
.lv-strip { border-radius: 3px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
.lv-strip > .pix { padding: 5px 9px; border: 1px solid currentColor; border-radius: 999px; font: 600 10.5px/1 var(--mono); letter-spacing: .16em; }
.lv-strip .dot { border-radius: 50%; }

/* ---------------------------------------------------------------- the frame: the rail down the left, the status strip, the column */
.na-rail { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-right: 1px solid var(--rule); }
.na-rail-top { padding: 24px 16px 20px; border-bottom: 1px solid var(--rule); }
.na-rail-sub { margin-top: 16px; font-weight: 500; letter-spacing: .14em; color: var(--t4); }
.na-rail-nav { gap: 1px; padding: 10px; }
.na-rail-row { border-left: 0; border-radius: 999px; padding: 0 12px; color: var(--t3); transition: background .3s var(--out), color .25s; }
.na-rail-row:hover { background: var(--hover); color: var(--ink); }
.na-rail-row.on { background: var(--ink); color: var(--paper); }
.na-rail-row.on .na-rail-num { color: var(--c); }
.na-rail-row.on .na-rail-label { color: var(--paper); }
.na-rail-num { font-weight: 500; letter-spacing: .08em; }
.na-rail-label { font: 500 13px/1 var(--body); letter-spacing: -.005em; }
.na-rail-signin { border-radius: 999px; height: 40px; font-size: 12.5px; }
.na-rail-me { border-radius: 999px; font: 500 13px/1 var(--body); }
.tk { min-height: 32px; padding: 6px 24px; background: transparent; border-bottom: 1px solid var(--rule); }
.tk-live { color: var(--green); font-weight: 500; letter-spacing: .14em; }
.tk-concept { padding: 4px 8px; border: 1px solid var(--amber); font-weight: 600; letter-spacing: .14em; }
.tk-sep { width: 1px; }
.tk-sym { font-weight: 400; }
.tk-btn { height: 26px; padding: 0 12px; border-radius: 999px; font-weight: 500; }
.tk-btn.on { background: color-mix(in srgb, var(--c) 8%, transparent); }
.ft { background: transparent; }
.ft-k { font-weight: 500; letter-spacing: .14em; }
.toast { border-radius: 999px; box-shadow: var(--shadow-2); }

/* the kit's lockup: the file made for dark grounds on the dark theme, NOCTIS in ink on the light one */
.lockup-pair { display: block; }
.lockup-pair .lk-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) .lockup-pair .lk-on-dark { display: block; }
  html:not([data-scheme="light"]) .lockup-pair .lk-on-light { display: none; }
}
html[data-scheme="dark"] .lockup-pair .lk-on-dark { display: block; }
html[data-scheme="dark"] .lockup-pair .lk-on-light { display: none; }

/* ---------------------------------------------------------------- a page head: kicker, a big thin title, the network's field */
.phead { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); background-color: var(--paper);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 65%, transparent), transparent),
                    linear-gradient(color-mix(in srgb, var(--grid-c) 5%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--grid-c) 5%, transparent) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px; }
.fhero-band { background-color: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.phead-in { position: relative; max-width: 1400px; margin: 0 auto; padding: 46px 28px 34px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 24px; }
.phead-t { display: grid; gap: 16px; min-width: 0; }
.phead .h1 { margin: 0; max-width: 18ch; font: 300 clamp(40px, 4.6vw, 64px)/1 var(--body); letter-spacing: -.05em; color: var(--ink); text-shadow: none; text-wrap: balance; }
.phead .h1 span[style] { font-weight: 500; }
.phead-x { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.phead-x .big-search { background: var(--surface); }

/* ---------------------------------------------------------------- Home: the thesis and the live agent network */
.fhero-l { display: grid; gap: 20px; align-content: center; min-width: 0; }
.fhero-h { margin: 0; font: 300 clamp(46px, 5.4vw, 80px)/.98 var(--body); letter-spacing: -.055em; text-wrap: balance; }
.fhero-h em { font-style: normal; font-weight: 500; color: var(--c1); }
.fhero-p { margin: 0; max-width: 54ch; font: 400 16px/1.65 var(--body); color: var(--t2); }
.fhero-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crew { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 400 12px/1.4 var(--mono); color: var(--t4); }
.crew-stack { display: flex; }
.crew-stack img { margin-left: -8px; box-shadow: 0 0 0 2px var(--paper); transition: transform .35s var(--out); }
.crew-stack img:first-child { margin-left: 0; }
.crew-stack img:hover { transform: translateY(-3px); }
/* Home's figures: a row of readouts under the hero */
.hero-stats { margin: 0 max(28px, calc((100% - 1344px) / 2)) 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); box-shadow: var(--shadow); }
.hs { position: relative; display: grid; align-content: start; gap: 8px; padding: 16px 18px 18px; border-top: 0; border-right: 1px solid var(--rule); }
.hs::before { content: ""; position: absolute; left: 18px; top: -1px; width: 28px; height: 2px; background: var(--c); }
.hs .lbl { order: -1; margin: 0; }
.hs-v { margin: 0; font: 300 46px/1 var(--body) !important; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink) !important; }
.lv-hs-sub { font: 400 12px/1.4 var(--mono); }

/* ---------------------------------------------------------------- the Guides: a clean board instead of cork and pins */
.gd-board { background-image: none; background-color: var(--surface-2); border-radius: 3px; }
.gd-note { transform: none !important; border-radius: 3px; box-shadow: var(--shadow); transition: transform .35s var(--out), box-shadow .35s var(--out), border-color .25s; }
.gd-note:hover, .gd-note:focus-visible { transform: translateY(-3px) !important; box-shadow: var(--shadow-2); }
.gd-pin { width: 8px; height: 8px; margin-left: -4px; top: -4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.gd-win { border-radius: 4px; box-shadow: var(--shadow-2); }
.gd-sec-h { border-radius: 999px; font-weight: 500; }

/* ---------------------------------------------------------------- phones */
.m-tk, .m-concept { background: var(--surface); }
.m-concept { letter-spacing: .14em; font-weight: 600; }
.m-appbar { position: sticky; top: 0; z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.m-signin { height: 38px; padding: 0 16px; font-size: 12.5px; }
.m-find, .m-me { border-width: 1px; border-radius: 50%; }
.m-tabs { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.m-tab { position: relative; gap: 5px; border-top: 0; margin-top: 0; color: var(--t4); }
.m-tab svg { width: 22px; height: 22px; }
.m-tab .pix { font: 500 11px/1 var(--body); letter-spacing: 0; }
.m-tab.on { color: var(--ink); }
.m-tab.on svg { color: var(--c); }
.m-tab.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 2px; margin-left: -12px; border-radius: 0 0 2px 2px; background: var(--c); }
.phead.m .phead-in { padding: 26px 16px 22px; display: grid; gap: 14px; }
.phead.m .h1 { font-size: 40px; }
.m-head { background: transparent; }
.m-stats { margin: 0 16px; border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); }
.m-stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px; border-top: 0; }
.m-stat::before { content: ""; position: absolute; left: 14px; top: -1px; width: 24px; height: 2px; background: var(--c); }
.m-stat .pix { margin: 0; font: 300 32px/1 var(--body); letter-spacing: -.05em; color: var(--ink) !important; }
.m-stat .lbl { margin: 0; }
.m-sec { border-top: 1px solid var(--rule); }
.m-link .pix { font: 300 22px/1 var(--body); letter-spacing: -.03em; }
.m-seg, .m-ltabs { border-radius: 999px; }

/* ---------------------------------------------------------------- the owner console, in the same language */
.cx-top { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.cx-brand-t { padding: 5px 9px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--t3); }
.cx-navs { align-self: center; align-items: center; gap: 2px; height: auto; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--hover); }
#cx .cx-nav { height: 30px; padding: 0 13px; border-bottom: 0; border-radius: 999px; font: 500 12.5px/1 var(--body); transition: background .35s var(--out), color .25s; }
#cx .cx-nav.on { background: var(--ink); color: var(--paper); }
.cx-venue { padding: 7px 10px; border-radius: 999px; font-weight: 500; letter-spacing: .1em; }
.cx-wallet { height: 36px; border-radius: 999px; font-weight: 500; }
.cx-mock { background: transparent; border-bottom: 1px solid var(--rule); }
.cx-mock .pix { padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font: 600 10.5px/1 var(--mono); letter-spacing: .16em; }
.cx-primary { border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: none; font: 500 13px/1 var(--body); transition: background .25s, transform .25s var(--out); }
.cx-primary:hover { filter: none; background: color-mix(in srgb, var(--ink) 84%, var(--c1)); }
.cx-primary:active { transform: scale(.97); }
.cx-primary.big { font-size: 14px; }
.cx-danger { border-radius: 999px; font: 500 12.5px/1 var(--body); }
.cx-seg { padding: 3px; gap: 2px; border-color: var(--rule); border-radius: 999px; background: var(--hover); }
.cx-seg button { height: 30px; border-radius: 999px; font-weight: 500; transition: background .35s var(--out), color .25s; }
.cx-seg button.on { background: var(--ink); color: var(--paper); }
.cx-chains { gap: 2px; padding: 3px; border-color: var(--rule); border-radius: 999px; background: var(--hover); }
.cx-chains button { height: 32px; border-radius: 999px; background: transparent; font-weight: 500; }
.cx-chains button.on { background: var(--ink); color: var(--paper); }
.cx-path { border-top-width: 1px; border-top-color: var(--rule); border-radius: 3px; }
.cx-path.on { box-shadow: inset 0 2px 0 var(--c); }
.cx-side-b { border-radius: 999px; font-weight: 600; }
.cx-side-b.l { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.cx-side-b.s { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }

/* ---------------------------------------------------------------- the Marketplace: every sample listing carries a rubber stamp */
.ar-lcard, .ar-sample { position: relative; overflow: hidden; }
.stamp {
  position: absolute; z-index: 3; top: 50%; left: 50%; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-13deg);
  padding: 7px 18px 6px; border: 3px solid currentColor; border-radius: 5px;
  outline: 1.5px solid currentColor; outline-offset: 3px;
  color: var(--red); font: 800 28px/1 var(--body); letter-spacing: .24em; text-indent: .24em; text-transform: uppercase;
  opacity: .82; white-space: nowrap;
  /* worn ink: a grain of fractal noise cuts small holes in the print */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.4'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.4'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  -webkit-mask-size: 160px; mask-size: 160px;
}
.stamp.big { top: 46%; left: 62%; font-size: 40px; padding: 9px 24px 8px; border-width: 4px; outline-width: 2px; outline-offset: 4px; }
.ar-lcard:hover .stamp { opacity: .9; }
/* FLINT: the featured prototype, with a live preview of it at a third of its size */
.ar-flint { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 26px; align-items: center; margin-top: 20px; padding: 22px; border-color: color-mix(in srgb, var(--c1) 45%, var(--rule)); }
.ar-flint::before { content: ""; position: absolute; left: 18px; top: -1px; width: 28px; height: 2px; background: var(--c1); }
.ar-flint-t { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ar-flint-h { margin: 0; font: 300 56px/1 var(--body); letter-spacing: -.05em; color: var(--ink); }
.ar-flint-go { justify-self: start; margin-top: 6px; }
.ar-flint-thumb { position: relative; width: 480px; height: 300px; overflow: hidden; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface-2); }
.ar-flint-thumb iframe { display: block; width: 1440px; height: 900px; border: 0; transform: scale(.33334); transform-origin: 0 0; pointer-events: none; }
.ar-flint-cover { position: absolute; inset: 0; }
.ar-flint-thumb:hover { border-color: var(--ink); }
@media (max-width: 1240px) { .ar-flint { grid-template-columns: minmax(0, 1fr); } .ar-flint-thumb { display: none; } }
/* FLINT's page: the prototype fills the content column, as tall as the column shows */
.mn:has(> .ar-flint-page) { height: 100%; }
.ar-flint-page { height: 100%; }
.ar-flint-page iframe { display: block; width: 100%; height: 100%; border: 0; }
.m-app .ar-flint-page { height: calc(100svh - 64px - env(safe-area-inset-bottom)); }
.m-app .ar-flint { margin: 14px 0 0; }
.m-app .ar-flint-h { font-size: 44px; }
/* a page head's kicker wraps as one line of words, the dot staying beside its first line */
.phead .eyebrow { flex-wrap: nowrap; align-items: flex-start; }
.phead .eyebrow .pulse { margin-top: 4px; }

/* ---------------------------------------------------------------- the owner console beside the site's rail */
.cx-shell { display: flex; align-items: stretch; min-height: 100vh; }
.cx-shell > .na-rail { position: sticky; top: 0; height: 100vh; flex: none; }
.cx-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-col > .cx-body { flex: 1; }
@media (min-width: 1000px) { #cx .cx-top .cx-brand, #cx .cx-top .cx-navs { display: none; } }
.cx-where { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.cx-where b { font: 500 15px/1 var(--body); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
@media (max-width: 999px) { .cx-where { display: none; } }
/* the console's views, open under its name at the rail's foot, where the site keeps the button to it */
.na-rail-cx { display: contents; }
.na-rail-cx-h { flex: none; margin: 10px 4px 4px; padding: 12px 8px 0; border-top: 1px solid var(--rule); font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--t4); }
#cx .na-rail-row { color: var(--t3); }
#cx .na-rail-row:hover { color: var(--ink); }
#cx .na-rail-row.on { color: var(--paper); }
#cx .na-rail-mark { color: var(--ink); }
/* the Marketplace's products on the console: the site's card, the owner's say under it */
.cx-prods { margin-top: 0; }
.ar-lcard.cx-prod { color: var(--t2); }
.ar-lcard.cx-prod:hover { background: var(--surface); box-shadow: var(--shadow); }
.cx-prod-act { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding-top: 12px; border-top: 1px solid var(--rule-faint); }
.cx-prod-who { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font: 400 11px/1.3 var(--mono); color: var(--t3); }
.cx-prod-who span { margin-left: 4px; }
.cx-prod-go { display: inline-flex; align-items: center; gap: 6px; }
.cx-prod-go select { height: 32px; }
/* FLINT, open as a view of the console */
.cx-flint iframe { display: block; width: 100%; height: calc(100vh - 140px); min-height: 640px; border: 0; }
/* the footer has no list of the pages (Jinx, 22 Oct): the rail carries them */
.ft-in { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
/* FLINT's chains by their marks: one-colour ring marks in the theme's ink, each in its own colour on hover */
.ar-flint-chains { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.chain-ic { display: block; flex: none; width: 30px; height: 30px; background: var(--ink); transition: background .25s; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.chain-ic--midnight { -webkit-mask-image: url("/assets/img/chains/midnight.png"); mask-image: url("/assets/img/chains/midnight.png"); }
.chain-ic--cardano { -webkit-mask-image: url("/assets/img/chains/cardano.png"); mask-image: url("/assets/img/chains/cardano.png"); }
.chain-ic--bitcoin { -webkit-mask-image: url("/assets/img/chains/bitcoin.png"); mask-image: url("/assets/img/chains/bitcoin.png"); }
.chain-ic--strike { -webkit-mask-image: url("/assets/img/chains/strike.svg"); mask-image: url("/assets/img/chains/strike.svg"); }
.ar-flint-chains .chain-ic--midnight:hover { background: var(--c2); }
.ar-flint-chains .chain-ic--strike:hover { background: #26FAB0; }
/* NIGHT and ADA by their chains' marks, Midnight's in the text's colour and Cardano's in its blue: on rule cards,
   the rules' coin filter and the builder's coin (Jinx, 2 Nov) */
.chain-ic.coin-ic { display: inline-block; width: 16px; height: 16px; background: currentColor; vertical-align: -3px; }
.coin-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); white-space: nowrap; }
.coin-tag .t4 { margin: 0 1px; }
.rc-mk { display: inline-flex; align-items: center; gap: 6px; }
/* The rules' filters (Jinx, 2 Nov): what they trade and the coin as pill groups, the style as chips under them */
.rc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 2px; }
.rf-styles { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.rf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--t3); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: background .3s var(--out), color .25s, border-color .25s; }
.rf-chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.rf-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rf-chip .n { font-weight: 500; opacity: .6; }
.rc-tags .rc-fut { color: var(--c4); border-color: currentColor; }
.coin-filter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--hover); }
.coin-filter button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: none; color: var(--t3); font: 600 12px/1 var(--mono); letter-spacing: .06em; transition: background .3s var(--out), color .25s; }
.coin-filter button:hover { color: var(--ink); }
.coin-filter button.on { background: var(--ink); color: var(--paper); }
.coin-filter .coin-ic { width: 18px; height: 18px; vertical-align: 0; }
.coin-filter .n { font-weight: 500; opacity: .6; }
.rb-seg .coin-ic { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
@media (max-width: 999px) { .coin-filter button { height: 44px; padding: 0 18px 0 14px; } .rf-chip { height: 44px; padding: 0 15px; } }
.ar-flint-chains .chain-ic--cardano:hover, .chain-ic--cardano.coin-ic { background: #2A71D0; }
.ar-flint-chains .chain-ic--bitcoin:hover { background: #F7931A; }

/* ---------------------------------------------------------------- the pages fill the screen (Jinx, 22 Oct)
   No cap on a page's width; and on a wider screen everything on it scales up a step, as FLINT's page does.
   The rail and the status strip keep their size; FLINT keeps its own sizing (it fills its frame itself). */
.mn-in, .phead-in { max-width: none; }
.hero-stats { margin: 0 28px 6px; }
:root { --fill: 1; }
@media (min-width: 1560px) { :root { --fill: 1.08; } }
@media (min-width: 1720px) { :root { --fill: 1.16; } }
@media (min-width: 1900px) { :root { --fill: 1.25; } }
@media (min-width: 2200px) { :root { --fill: 1.38; } }
@media (min-width: 2500px) { :root { --fill: 1.5; } }
html.na-desk #main > :not(.ar-flint-page), html.na-desk .ft { zoom: var(--fill); }
/* the column's grid scales with them, so it meets the heads' grid square for square */
html.na-desk .na-col { background-size: calc(48px * var(--fill)) calc(48px * var(--fill)); }
/* the owner console's content the same (its top bar and the rail keep their size) */
@media (min-width: 1000px) {
  #cx .cx-body:not(:has(.cx-flint)) { zoom: var(--fill); }
  #cx .cx-body { background-size: calc(48px * var(--fill)) calc(48px * var(--fill)); }
  #cx .cx-body:not(:has(.cx-flint)) { background-size: 48px 48px; }
}
/* FLINT leads the Strategies page, in a slot of its own above the market's results */
.mn-in.ar-flint-slot { padding-bottom: 0; }
.ar-flint-slot .ar-flint { margin-top: 24px; }

/* ---------------------------------------------------------------- the Quineling banners (branch theme-quineling)
   Every page head and Home's hero carry a scene from assets/js/quine.js (mounted by quines.js): each agent a
   creature made of code in its own colour, its words a stream of characters, orders through the gateway's
   hexagon, a typed log in the bottom-left corner. An illustration: scripted unless the page feeds it real
   lines, and labelled so. The banners stay dark in both schemes; the page body under them follows the theme. */
html[data-scheme="light"] .phead, html[data-scheme="light"] .fhero-band, html[data-scheme="light"] .qlegend,
html:not([data-scheme]) .phead, html:not([data-scheme]) .fhero-band, html:not([data-scheme]) .qlegend {
  --h-paper:#07080A; --h-surface:#0E1014; --h-surface-2:#13161B; --h-hover:#161A20; --h-desk:#0A0C0F;
  --h-panel:#0E1014; --h-panel-2:#0B0D10; --h-panel-3:#0A0C0F; --h-rule:#1D2127; --h-rule-2:#1A1E24;
  --h-rule-faint:#15181D; --h-rule-strong:#2B3139; --h-glass:rgba(9,10,13,.78);
  --ink:#ECEFF3; --t2:#C3C9D3; --t3:#9CA5B3; --t4:#828C9C;
  color: #ECEFF3;
}
/* the legend sits outside the heading area, so it maps its own rule */
.qlegend { --rule: var(--h-rule); }

/* a page head: the scene behind, the kicker, the title and its one line on the left, the controls under them */
.phead { min-height: 340px; background-color: #07080A; }
.phead .quine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* no mask on the canvas: the engine draws its own dark wash behind the title */
.phead-in { position: relative; padding: 46px 28px 84px; flex-direction: column; align-items: flex-start;
            gap: 14px; max-width: 600px; margin: 0; pointer-events: none; }
.phead-in a, .phead-in button, .phead-in input, .phead-in label, .phead-in select, .phead-in textarea { pointer-events: auto; }
.phead .h1 { font: 400 clamp(42px, 5vw, 64px)/1 var(--body); letter-spacing: -.035em; }
.phead-dek { margin: 0; max-width: 400px; font: 400 14px/1.5 var(--body); color: var(--t3); }
.phead-x { margin-left: 0; }
.phead.m { min-height: 300px; }
.phead.m .phead-dek { display: none; }

/* Home: one full-bleed scene with the thesis over its left side, then the legend, the paragraph, the figures */
.fhero-band.qhero { margin-bottom: 0; }
.qhero { position: relative; min-height: 600px; overflow: hidden; background: #07080A; }
.qhero .quine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qhero .fhero-l { position: relative; max-width: 680px; padding: 52px 40px 96px; pointer-events: none; }
.qhero .fhero-l a, .qhero .fhero-l button { pointer-events: auto; }
.qlegend { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 40px; border-bottom: 1px solid var(--rule);
           background: #0A0C0F; font: 400 11px/1.3 var(--mono); color: var(--t2); }
.qlegend span { display: inline-flex; align-items: center; gap: 8px; }
.qlegend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.qlegend-note { margin-left: auto; color: var(--t4); letter-spacing: .12em; }
.qhero-p { max-width: 780px; margin: 32px 40px 0; font-size: 18px; }
.qhero-p + .hero-stats { margin-top: 28px; }
/* a phone: the thesis on its own ground, the scene under it rather than behind it */
.qhero.m { min-height: 0; display: flex; flex-direction: column; }
.qhero.m .fhero-l { max-width: none; padding: 26px 16px 18px; pointer-events: auto; }
.qhero.m .fhero-h { font-size: clamp(44px, 13vw, 58px); }
.qhero.m .fhero-p { font-size: 15px; }
.qhero.m .quine { position: relative; inset: auto; height: 360px; }
.m-app .qlegend { gap: 8px 14px; padding: 12px 16px; margin-bottom: 16px; }
.m-app .qlegend-note { margin-left: 0; flex-basis: 100%; }

/* an agent's own page: its creature, alone, in the card */
.ag-solo { position: relative; flex: 0 0 240px; width: 240px; height: 240px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #07080A; }
.ag-solo .quine { display: block; width: 100%; height: 100%; }
.m-prof { flex-wrap: wrap; }
.m-prof .ag-solo { flex-basis: 180px; width: 180px; height: 180px; }
.m-prof .grow { flex: 1 1 200px; min-width: 0; }

/* the column under the banners: on the dark ground, the measured grid at 96px, 1px lines at 2.8% white,
   scaling with the page on a wide screen as the 48px grid did */
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) .na-col, html:not([data-scheme="light"]) .m-page {
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 96px 96px; }
  html.na-desk:not([data-scheme="light"]) .na-col { background-size: calc(96px * var(--fill)) calc(96px * var(--fill)); }
}
html[data-scheme="dark"] .na-col, html[data-scheme="dark"] .m-page {
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 96px 96px; }
html.na-desk[data-scheme="dark"] .na-col { background-size: calc(96px * var(--fill)) calc(96px * var(--fill)); }

/* ---------------------------------------------------------------- components, brought into line with the Quineling spec */
/* card: the header row 16px by 20px, a rule under it */
.card-h { padding: 16px 20px; }
/* corner marks on featured cards only (FLINT on Strategies, the three ways in on Connect an agent): a 12px L in
   the card's accent at the top left and the bottom right */
.card::after { content: none; }
.card.ar-way::after, .card.ar-flint::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 1;
  background: linear-gradient(var(--c, var(--c3)), var(--c, var(--c3))) 0 0 / 12px 2px no-repeat,
              linear-gradient(var(--c, var(--c3)), var(--c, var(--c3))) 0 0 / 2px 12px no-repeat,
              linear-gradient(var(--c, var(--c3)), var(--c, var(--c3))) 100% 100% / 12px 2px no-repeat,
              linear-gradient(var(--c, var(--c3)), var(--c, var(--c3))) 100% 100% / 2px 12px no-repeat;
}
/* a stat tile: a mono label, a thin figure, the 28x2 tick in its accent along the top */
.hs .lbl, .kpi .lbl, .m-stat .lbl { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; color: var(--t3); }
.hs-v { font: 300 34px/1 var(--body) !important; }
.kpi-v { font-size: 32px; }
/* pills: primary in ink, ghost with a thin border, at least 44px tall, fully round (the small ones keep their size) */
.btn-drift, .btn-out { min-height: 44px; border-radius: 999px; }
.btn-drift.sm, .btn-out.sm, .m-signin { min-height: 0; }
/* a chip: mono 10px, .12em, upper case, a 1px border in its colour, fully round */
.chip { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--c, var(--rule-strong)); border-radius: 999px; }
.chip.fill { border-color: var(--c, var(--rule-strong)); }
/* notices: MOCKUP in cyan, WAITING FOR THE FEED in amber */
.lv-strip.lv-demo { border-color: var(--c2); }
.lv-strip.lv-demo > .pix { color: var(--c2); }
.lv-strip.lv-offline { border-color: var(--c4); }
.lv-strip.lv-offline > .pix { color: var(--c4); }
/* the eyebrow: mono 11px, .16em, upper case, after a 7px dot in the third colour */
.eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; color: var(--t2); }
.pulse { background: var(--c3); }
/* what the agents say (Home's feed): the sender's badge on the left; a mono line of the time, SENDER → where
   it went (the sender in its own colour) and the kind; the message in Geist; and how it ended, after an arrow
   (green filled, grey simulated or no order, red refused) */
.lv-hfeed { display: block; position: relative; padding: 12px 20px 12px 66px; }
.lv-hfeed-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 11px/1.4 var(--mono); }
.lv-hfeed .lv-who img { position: absolute; left: 20px; top: 12px; width: 32px; height: 32px; }
.lv-hfeed .lv-who { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; }
.lv-hfeed-to { color: var(--t3); letter-spacing: .04em; }
.lv-hfeed-x { margin-top: 5px; font: 400 14.5px/1.45 var(--body); color: var(--ink); }
.lv-hfeed-o { margin-top: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--t3); }
.lv-hfeed-o.ok { color: var(--green); } .lv-hfeed-o.bad { color: var(--red); }
.m-app .lv-hfeed { padding: 12px 16px 12px 58px; }
.m-app .lv-hfeed .lv-who img { left: 16px; width: 30px; height: 30px; }
/* the agents' own cards on a phone (live.js and arena.js draw them for both): the creature at 180px */
.m-app .profile .ag-solo { flex-basis: 180px; width: 180px; height: 180px; }

/* ---------------------------------------------------------------- the Guides board in the banners' language (Jinx, 23 Oct)
   A faint Milky Way across the board, and no lines joining the notes (Jinx, 23 Oct); each note pinned by an
   agent, its creature where the pin was; each section's heading carries its keeper; a guide opens with its
   agent drawn live in the window. Decoration: no agent wrote a guide. */
.gd-board {
  background-image:
    radial-gradient(ellipse 42% 30% at 74% 26%, rgba(164,92,255,.07), transparent 70%),
    radial-gradient(ellipse 36% 26% at 24% 78%, rgba(77,125,255,.06), transparent 70%),
    linear-gradient(160deg, transparent 26%, rgba(110,120,215,.05) 45%, rgba(200,185,255,.05) 50%, rgba(110,120,215,.05) 55%, transparent 74%);
}
/* the pin is the agent that pinned the note: its creature, in a ring of the note's colour */
.gd-pin.gd-pin-ag { top: -15px; width: 30px; height: 30px; margin-left: -15px; background: none; border-radius: 50%; box-shadow: none; }
.gd-pin-ag .gd-badge { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.gd-note { padding-top: 26px; }
.gd-by { position: absolute; top: 10px; right: 14px; font: 500 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--c); opacity: .8; }
/* a section's keeper, on its heading */
.gd-sec-h { display: inline-flex; align-items: center; gap: 8px; }
.gd-keeper { flex: none; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(7,8,10,.5); }
/* a guide's window: its agent, live, beside the title */
.gd-win-h { align-items: center; }
.gd-win-ht { flex: 1; }
.gd-win-ag { flex: none; width: 76px; height: 76px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #07080A; }
.gd-win-ag .quine { display: block; width: 100%; height: 100%; }
.na-mobile .gd-win-ag { width: 56px; height: 56px; }
/* a phone's list: the agent's badge on each row */
.gd-mbadge { flex: none; width: 32px; height: 32px; border-radius: 50%; }