:root {
  --ink: #080808;
  --muted: #686868;
  --paper: #f7f7f4;
  --line: rgba(0, 0, 0, .16);
  --acid: #ffffff;
  --green: #0a0a0a;
  --coral: #666666;
  --blue: #b5b5b5;
  --shadow: 0 24px 70px rgba(0, 0, 0, .09);
}

body {
  background:
    radial-gradient(circle at 80% 8%, rgba(0, 0, 0, .055) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(120deg, #ffffff, transparent 48%),
    var(--paper);
}

.brand {
  gap: 13px;
  font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
  font-size: 17px;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.wordmark { display: flex; align-items: baseline; }
.wordmark span { display: inline-block; }
.wordmark span:first-child { transform: translate(-1px, -1px); }
.wordmark span:last-child {
  color: transparent;
  -webkit-text-stroke: 1.25px var(--ink);
  transform: translate(2px, 2px);
}

.mark { width: 34px; height: 30px; }
.mark::before, .mark::after {
  width: 18px;
  height: 18px;
  top: 3px;
  border-width: 3px;
  border-color: var(--ink);
  background: var(--paper);
}
.mark::before {
  left: 0;
  border-right-color: transparent;
  transform: translate(-2px, 2px) rotate(-28deg);
  box-shadow: -4px 4px 0 -2px var(--ink);
}
.mark::after {
  right: 0;
  border-left-color: transparent;
  transform: translate(3px, -2px) rotate(28deg);
  box-shadow: 4px -4px 0 -2px var(--ink);
}

h1 {
  max-width: 820px;
  font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(43px, 5.3vw, 76px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.eyebrow { color: var(--ink); letter-spacing: .19em; }
.workspace { border-color: #111; border-radius: 20px; background: rgba(255,255,255,.6); }
.rail { background: rgba(244,244,240,.88); }
.mini-card { background: #090909; }
.pulse { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.13); }
.mini-card button { color: #fff; }
.canvas { background-image: radial-gradient(rgba(0,0,0,.16) .7px, transparent .7px); }
.dna-card { background: rgba(255,255,255,.86); box-shadow: 5px 5px 0 rgba(0,0,0,.05); }
.trait { background: #ececea; color: #111; }
.filter .grow-btn { border-color: #111; background: #111; color: #fff; }
.filter .grow-btn:hover { background: #fff; color: #111; }
.branch { stroke: rgba(0,0,0,.25); }
.branch.strong { stroke: #090909; }
.branch.new { stroke: #6f6f6f; }
.node circle { filter: grayscale(1) contrast(1.15) drop-shadow(0 8px 9px rgba(0,0,0,.16)); }
.node:hover circle, .node.selected circle { stroke: #080808; stroke-width: 6; }
.you-ring { stroke: #080808; }
.root-label { fill: #080808; }
.match { background: #0a0a0a; color: #fff; }
.reason span:first-child { color: #111; }
.agent-block { background: #eeeeeb; }
.status-dot { background: #111; }
.portrait { filter: grayscale(1) contrast(1.1); border: 1px solid #111; }
.legend span:nth-child(1) i { background: #080808 !important; }
.legend span:nth-child(2) i { background: #969696 !important; }
.legend span:nth-child(3) i { background: #d7d7d7 !important; border: 1px solid #777; }
.toast b { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.mobile-tabs button.active { background: #fff; }

@media (max-width: 520px) {
  h1 { font-size: 41px; }
  .brand { font-size: 15px; }
}