/* ======================================================================
   CANVAS AND TYPOGRAPHY
   ====================================================================== */
.canvas {
  position: relative;
  flex: 1;
  min-height: min(1420px, calc(100vh - 165px));
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.stage-label {
  fill: rgba(244,247,252,.62);
  font-size: 8.6px;
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.final-note {
  fill: rgba(232,237,247,.32);
  font-size: 8.6px;
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.zone-label {
  fill: rgba(232,237,247,.29);
  font-size: 8.2px;
  font-weight: 620;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.node-title {
  fill: #f8fafc;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.node-note {
  fill: rgba(232,237,247,.42);
  font-size: 8.9px;
}

.micro-label {
  fill: rgba(232,237,247,.30);
  font-size: 8px;
  font-weight: 620;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.divider {
  stroke: rgba(255,255,255,.045);
  stroke-width: 1;
}

/* ======================================================================
   VISUAL PRIMITIVES
   ====================================================================== */
.screen-light {
  mix-blend-mode: screen;
  filter: url(#softGlow);
}

.zone-shell {
  stroke-width: .9;
  pointer-events: none;
}

.memory-edge,
.workset-edge,
.ambient-route,
.active-route,
.agent-route,
.answer-route,
.writeback-route {
  fill: none;
  stroke-linecap: round;
}

.memory-edge { stroke-width: .55; }
.workset-edge { stroke-width: .7; }

.ambient-route {
  stroke: rgba(238,243,252,.055);
  stroke-width: .7;
}

.active-route {
  stroke-width: .72;
  opacity: .12;
  transition: opacity .8s var(--ease), stroke-width .8s var(--ease);
}

.agent-route {
  stroke-width: 1;
  stroke-dasharray: .1 6.4;
  opacity: .24;
}

.answer-route {
  stroke: rgba(154,239,194,.48);
  stroke-width: 1.05;
  stroke-dasharray: .1 6.8;
  opacity: .20;
}

.writeback-route {
  stroke-width: .85;
  stroke-dasharray: .1 7.2;
  opacity: .20;
}

.registrar-writeback-route {
  stroke-width: .8;
  stroke-dasharray: .1 7.2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .8s var(--ease);
}

.memory-node,
.workset-node,
.processor-ring,
.processor-core,
.arrival-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.memory-node {
  transition: opacity .8s var(--ease);
}

.physics-node {
  transform-origin: center;
}

.physics-node .memory-node,
.physics-node .workset-node {
  cursor: pointer;
  pointer-events: all;
}

.workset-node-halo {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.workset-node { mix-blend-mode: screen; }

.workset-shell {
  fill: rgba(255,255,255,.020);
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
}

.workset-shell-inner {
  fill: none;
  stroke: rgba(255,255,255,.052);
  stroke-width: .8;
  stroke-dasharray: .1 7;
}

.workset-drifter { transform-origin: center; }

.processor-ring {
  fill: rgba(255,255,255,.018);
  stroke-width: 1.1;
  transition: opacity .45s var(--ease), transform .45s var(--ease), stroke-width .45s var(--ease);
}

.processor-core {
  filter: url(#nodeGlow);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.processor:hover .processor-ring,
.processor:focus-visible .processor-ring {
  transform: scale(1.16);
  stroke-width: 1.4;
}

.processor:hover .processor-core,
.processor:focus-visible .processor-core { transform: scale(1.14); }

.signal-particle {
  pointer-events: none;
}

.signal-glyph,
.signal-halo,
.signal-core { pointer-events: none; }

.arrival-glow {
  pointer-events: none;
  opacity: 0;
}

.memory-interaction-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 1.3;
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ======================================================================
   QUERY INPUT
   ====================================================================== */
.query-foreign { overflow: visible; }

.query-editor {
  display: flex;
  color: var(--query);
  line-height: 1.34;
  font-weight: 620;
  letter-spacing: -.018em;
}

.query-box-frame {
  fill: rgba(247,251,255,.018);
  stroke: rgba(247,251,255,.24);
  stroke-width: 1;
}

.query-box-pulse {
  fill: none;
  stroke: var(--query);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 19 81;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: url(#particleGlowStrong);
}

.query-box-merge {
  pointer-events: none;
  mix-blend-mode: screen;
  filter: url(#particleGlowStrong);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.typed-copy::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.14em;
  background: rgba(247,251,255,.88);
  box-shadow: 0 0 7px rgba(247,251,255,.62);
}

.query-baseline {
  stroke: rgba(247,251,255,.16);
  stroke-width: 1;
}

.query-progress {
  stroke: rgba(247,251,255,.62);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .55s var(--ease);
}

.query-submit-point {
  fill: var(--query);
  opacity: .42;
  filter: url(#nodeGlow);
}

.click-ring {
  fill: none;
  stroke: rgba(247,251,255,.88);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.query-label,
#resolver .node-title {
  fill: var(--query);
}

#resolver .node-note {
  fill: rgba(247,251,255,.58);
}

.query-resolver-link,
.query-resolver-trail {
  fill: none;
  stroke: var(--query);
  stroke-linecap: round;
  pointer-events: none;
}

.query-resolver-link {
  stroke-width: .8;
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.query-resolver-trail {
  stroke-width: 2.1;
  stroke-dasharray: 28 72;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: url(#particleGlowStrong);
}

.query-handoff-signal {
  pointer-events: none;
  mix-blend-mode: screen;
  filter: url(#particleGlowStrong);
  opacity: 0;
}

/* ======================================================================
   ABSTRACT RESPONSE
   ====================================================================== */
.answer-heading {
  fill: rgba(248,250,252,.88);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.answer-line,
.answer-accent {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.answer-line { fill: rgba(240,244,251,.22); }
.answer-line.strong { fill: rgba(248,250,252,.48); }
.answer-accent { fill: rgba(154,239,194,.38); }

.citation-dot {
  opacity: 0;
  filter: url(#particleGlow);
  transform-box: fill-box;
  transform-origin: center;
}