/* ======================================================================
   CANVAS AND TYPOGRAPHY
   ====================================================================== */
.canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  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;
}

.sequence-emphasis { opacity: .64; }

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

html[data-layout="u-concept"] .stage-label {
  font-size: 9.8px;
  letter-spacing: .17em;
}

html[data-layout="u-concept"] .zone-label {
  fill: rgba(232,237,247,.72);
  font-size: 9.4px;
  letter-spacing: .11em;
  pointer-events: none;
}

html[data-layout="u-concept"] .node-title,
html[data-layout="u-concept"] .answer-heading { font-size: 13px; }

html[data-layout="u-concept"] .node-note { font-size: 9.5px; }

html[data-layout="u-concept"] .micro-label,
html[data-layout="u-concept"] .final-note { font-size: 8.8px; }

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

.zone-shell {
  fill: rgba(255,255,255,.008);
  stroke-width: .9;
  pointer-events: none;
}

html[data-layout="u-concept"] .zone-shell {
  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: .60; }
.workset-edge { stroke-width: .76; }

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

html[data-layout="u-concept"] .ambient-route {
  stroke: rgba(238,243,252,.088);
  stroke-width: .66;
}

html[data-layout="u-concept"] .active-route {
  opacity: .13;
}

html[data-layout="u-concept"] .canvas.system-active .active-route {
  opacity: .21;
  stroke-width: .74;
}

html[data-layout="u-concept"] .canvas.system-active .activation-route {
  opacity: .17;
}

html[data-layout="u-concept"] .registrar-writeback-route {
  stroke-width: 1;
  opacity: .095;
}

.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: .32;
}

.main-process-route {
  stroke-width: 1.16;
  opacity: .46;
}

.support-route {
  stroke-width: .82;
  opacity: .18;
}

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

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

.answer-writeback-branch {
  stroke-width: .82;
  opacity: .13;
}

.verified-branch {
  stroke-width: .88;
  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 {
  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: default;
  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-ring.middle-ring {
  stroke-width: .82;
}

.processor-orbit,
.processor-scan {
  fill: none;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.processor-orbit {
  stroke-width: .86;
  opacity: .68;
}

.processor-scan {
  stroke-width: 1.32;
  stroke-linecap: round;
  opacity: .82;
}

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

.processor-ambient-node {
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .55s var(--ease);
  filter: url(#particleGlow);
}

.canvas.system-active .processor-ambient-node {
  opacity: .98 !important;
}

html[data-layout="u-concept"] .route-label {
  fill: rgba(232,237,247,.48);
  font-size: 8.4px;
  letter-spacing: .14em;
}

.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-particle .signal-glyph {
  filter: url(#signalGlow);
}

.signal-route-trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  mix-blend-mode: screen;
}

.signal-route-trace.ambient-trace {
  mix-blend-mode: normal;
}

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

.signal-contact-fill,
.signal-contact-ring {
  pointer-events: none;
}

.signal-contact-fill,
.signal-contact-ring {
  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: 1.25;
  stroke-dasharray: 16 84;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: url(#particleGlow);
}

.query-handoff-signal {
  pointer-events: none;
  mix-blend-mode: screen;
  filter: url(#signalGlow);
  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;
}

html[data-layout="u-concept"] .answer-line,
html[data-layout="u-concept"] .answer-accent {
  transform: scaleX(1);
  opacity: .34;
}

html[data-layout="u-concept"] .answer-line { fill: rgba(240,244,251,.52); }
html[data-layout="u-concept"] .answer-line.strong { fill: rgba(248,250,252,.72); }
html[data-layout="u-concept"] .citation-dot { opacity: .36; }
html[data-layout="u-concept"] #answer-layer .sequence-emphasis {
  opacity: .46;
  transition: opacity .52s var(--ease);
}

html[data-layout="u-concept"] .canvas.answer-generating #answer-layer .sequence-emphasis {
  opacity: .96;
}

@media (max-width: 640px) {
  .stage-label,
  .final-note {
    font-size: 12.5px;
    letter-spacing: .12em;
  }

  .zone-label {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .node-title,
  .answer-heading { font-size: 16px; }

  .node-note { font-size: 12px; }

  .micro-label {
    font-size: 11px;
    letter-spacing: .09em;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .stage-label,
  .final-note {
    font-size: 12px;
    letter-spacing: .12em;
  }

  .zone-label {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .node-title,
  .answer-heading { font-size: 16px; }

  .node-note { font-size: 11px; }

  .micro-label {
    font-size: 10px;
    letter-spacing: .09em;
  }
}