/* phi — tour and playground.
   A geometry treatise in ink on paper: golden proportions (61.8 / 38.2),
   Fibonacci spacing (3 5 8 13 21 34 55 89), hairline rules, gold. */

:root {
  --s1: 3px; --s2: 5px; --s3: 8px; --s4: 13px; --s5: 21px; --s6: 34px; --s7: 55px; --s8: 89px;
  --phi: 1.618;
  --topbar: 55px;
  --radius: 3px;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-prose: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --paper: #f6f1e7;
  --paper-2: #efe8da;
  --paper-3: #e7dfcd;
  --card: #fbf8f1;
  --rule: #ddd2bd;
  --rule-strong: #bfae8f;
  --ink: #1f1c16;
  --ink-2: #4a4337;
  --muted: #7d7361;
  --gold: #a5741a;
  --gold-bright: #c8962c;
  --gold-soft: #f1e2bd;
  --gold-wash: rgba(200, 150, 44, 0.12);
  --good: #2f7d6d;
  --good-wash: rgba(47, 125, 109, 0.1);
  --bad: #a3362a;
  --bad-wash: rgba(163, 54, 42, 0.08);
  --warn: #a8701a;
  --warn-wash: rgba(184, 125, 30, 0.12);
  --shadow: 0 1px 0 rgba(60, 45, 20, 0.05), 0 8px 21px rgba(60, 45, 20, 0.07);

  --syn-keyword: #8b5a10;
  --syn-control: #9c3d2e;
  --syn-type: #2c6e63;
  --syn-fn: #33508f;
  --syn-string: #5f6d18;
  --syn-escape: #b5651d;
  --syn-interp: #1d7a99;
  --syn-tvar: #7048c8;
  --syn-number: #994a78;
  --syn-comment: #958a75;
  --syn-op: #6a6152;
  --syn-punct: #8f8471;
  --syn-label: #7a5b9a;
  --syn-mut: #c0461b;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15130f; --paper-2: #1b1813; --paper-3: #24201a; --card: #1e1b15;
    --rule: #332d23; --rule-strong: #4d4434;
    --ink: #ece4d2; --ink-2: #cbc1aa; --muted: #8f8571;
    --gold: #e0b55a; --gold-bright: #f0c96e; --gold-soft: #3b3020; --gold-wash: rgba(224, 181, 90, 0.1);
    --good: #6cc2ab; --good-wash: rgba(108, 194, 171, 0.1);
    --bad: #ec8a74; --bad-wash: rgba(236, 138, 116, 0.09);
    --warn: #e9b35a; --warn-wash: rgba(233, 179, 90, 0.1);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 21px rgba(0, 0, 0, 0.35);
    --syn-keyword: #e0b55a; --syn-control: #e88d73; --syn-type: #72c4ae; --syn-fn: #93b2ee;
    --syn-string: #bac86f; --syn-escape: #f2a65e; --syn-interp: #6cc8e8; --syn-tvar: #b49cff; --syn-number: #d993c0; --syn-comment: #7f7664;
    --syn-op: #b5aa92; --syn-punct: #8a806c; --syn-label: #bba0e4; --syn-mut: #ff8f62;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15130f; --paper-2: #1b1813; --paper-3: #24201a; --card: #1e1b15;
  --rule: #332d23; --rule-strong: #4d4434;
  --ink: #ece4d2; --ink-2: #cbc1aa; --muted: #8f8571;
  --gold: #e0b55a; --gold-bright: #f0c96e; --gold-soft: #3b3020; --gold-wash: rgba(224, 181, 90, 0.1);
  --good: #6cc2ab; --good-wash: rgba(108, 194, 171, 0.1);
  --bad: #ec8a74; --bad-wash: rgba(236, 138, 116, 0.09);
  --warn: #e9b35a; --warn-wash: rgba(233, 179, 90, 0.1);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 21px rgba(0, 0, 0, 0.35);
  --syn-keyword: #e0b55a; --syn-control: #e88d73; --syn-type: #72c4ae; --syn-fn: #93b2ee;
  --syn-string: #bac86f; --syn-escape: #f2a65e; --syn-interp: #6cc8e8; --syn-tvar: #b49cff; --syn-number: #d993c0; --syn-comment: #7f7664;
  --syn-op: #b5aa92; --syn-punct: #8a806c; --syn-label: #bba0e4; --syn-mut: #ff8f62;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.618 var(--font-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.84em; font-variant-ligatures: none; }
.cm-content { font-variant-ligatures: none; }
kbd {
  border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: var(--radius);
  padding: 0 var(--s2); background: var(--card); font-size: 0.76em;
}
::selection { background: var(--gold-soft); }
.muted { color: var(--muted); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 34px; padding: 0 var(--s4);
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.02em;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--gold); color: var(--ink); background: var(--gold-wash); }
.btn:disabled { opacity: 0.45; cursor: default; background: var(--card); border-color: var(--rule); }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.btn-run { background: var(--gold); border-color: var(--gold); color: #fffaf0; font-weight: 600; }
.btn-run:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #fffaf0; }
:root[data-theme="dark"] .btn-run, :root[data-theme="dark"] .btn-run:hover { color: #1a150c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-run { color: #1a150c; } }
.btn-run.busy .icon { animation: spin 1.2s linear infinite; }
.btn-big { height: 44px; padding: 0 var(--s5); font-size: 14px; }
.icon-btn { width: 34px; padding: 0; justify-content: center; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-run .icon, .btn-stop .icon { fill: currentColor; stroke-width: 1; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.03em;
  padding: var(--s2) var(--s3); border: 1px solid var(--rule); border-radius: 21px;
  background: var(--card); color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip .icon { width: 12px; height: 12px; }
select {
  font: 12.5px var(--font-mono); color: var(--ink); background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); height: 30px; padding: 0 var(--s3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-spiral { width: 34px; height: 21px; }
.brand-phi { font: italic 400 26px/1 var(--font-display); color: var(--gold); margin-left: -2px; }
.brand-name { font: 600 21px/1 var(--font-display); letter-spacing: 0.01em; }
.brand-section {
  font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
  padding-left: var(--s4); border-left: 1px solid var(--rule);
}
.topbar-middle { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s4); min-width: 0; }
.topnav { display: flex; gap: var(--s2); }
.nav-link {
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none;
  padding: var(--s3) var(--s4); border-radius: var(--radius);
}
.nav-link:hover { color: var(--ink); background: var(--gold-wash); }
.nav-link.active { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.tour-position { font: 500 12px var(--font-mono); color: var(--muted); }
.meter { width: 144px; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 0.6s cubic-bezier(.2,.8,.2,1); }

/* the spiral: Fibonacci squares in hairline, the arc in gold */
.spiral-sq { fill: none; stroke: var(--rule-strong); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.spiral-arc { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- tour layout: 38.2 | 61.8 ---------- */

body.tour main, body.playground main {
  height: calc(100vh - var(--topbar));
  height: calc(100dvh - var(--topbar));
}
body.tour main {
  display: grid;
  grid-template-columns: minmax(320px, 38.2fr) minmax(0, 61.8fr);
}
.lesson {
  overflow-y: auto;
  padding: var(--s6) var(--s6) var(--s7) var(--s6);
  border-right: 1px solid var(--rule);
  scroll-behavior: smooth;
}
.lesson > * { max-width: 680px; }
.kicker {
  font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted);
  display: flex; align-items: center; gap: var(--s3);
}
.kicker .numeral, .toc-chapter h3 .numeral {
  font: italic 500 15px/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--gold);
}
.kicker-sep { color: var(--rule-strong); }
.lesson h1 {
  font: 600 34px/1.15 var(--font-display); letter-spacing: -0.01em;
  margin: var(--s4) 0 var(--s5);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.md h2, .md h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.25; margin: var(--s6) 0 var(--s3); }
.md h2 { font-size: 23px; }
.md h3 { font-size: 19px; }
.md p, .md ul, .md ol { margin: 0 0 var(--s4); }
.md li { margin-bottom: var(--s2); }
.md :not(pre) > code {
  background: var(--paper-3); border-radius: var(--radius); padding: 1px 3px;
  font-size: 0.82em; white-space: nowrap;
}
.md table { border-collapse: collapse; margin: 0 0 var(--s5); font-size: 15px; width: 100%; }
.md th, .md td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.md th { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.md blockquote { margin: 0 0 var(--s4); padding: var(--s2) var(--s4); border-left: 2px solid var(--gold); color: var(--ink-2); font-style: italic; }
.md strong { font-weight: 650; }
.code-block {
  position: relative;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s4) var(--s4); margin: 0 0 var(--s5); overflow-x: auto;
  font-size: 14.5px; line-height: 1.55;
  box-shadow: inset 3px 0 0 var(--gold-soft);
}
.code-block code { font-size: 13.5px; }
.snippet-bar { position: absolute; top: var(--s2); right: var(--s2); display: flex; gap: var(--s2); opacity: 0; transition: opacity 0.15s; }
.code-block:hover .snippet-bar, .snippet-bar:focus-within { opacity: 1; }
.callout {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius); padding: var(--s3) var(--s4); font-size: 15px; color: var(--ink-2);
}
.callout .icon { color: var(--warn); margin-top: 4px; }

.exercise {
  position: relative; margin: var(--s5) 0;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--card); padding: var(--s4) var(--s5);
  box-shadow: inset 3px 0 0 var(--gold);
}
.exercise-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.exercise-label { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.exercise-state { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.exercise.solved { box-shadow: inset 3px 0 0 var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.exercise.solved .exercise-state { color: var(--good); }
.exercise-try { margin-top: 10px; }
.exercise.solved-before .exercise-state { color: color-mix(in srgb, var(--good) 60%, var(--muted)); }
.exercise-expect-label { font: 500 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.exercise-expect {
  margin: var(--s2) 0 var(--s3); padding: var(--s3) var(--s4);
  background: var(--paper-2); border-radius: var(--radius); font-size: 13px; white-space: pre-wrap;
}
.exercise-hint { font-size: 14px; margin: 0; }
.exercise-result p { margin: var(--s3) 0; display: flex; align-items: center; gap: var(--s3); font-size: 15px; }
.exercise-result .good { color: var(--good); font-weight: 600; }
.exercise-result .bad { color: var(--bad); }
.diff { font-size: 13px; background: var(--bad-wash); padding: var(--s3) var(--s4); border-radius: var(--radius); }
.diff code { white-space: pre; }
.exercise.celebrate { animation: golden 1.6s ease-out; }
@keyframes golden {
  0% { box-shadow: inset 3px 0 0 var(--good), 0 0 0 0 var(--gold-bright); }
  30% { box-shadow: inset 3px 0 0 var(--good), 0 0 0 8px color-mix(in srgb, var(--gold-bright) 30%, transparent); }
  100% { box-shadow: inset 3px 0 0 var(--good), 0 0 0 21px transparent; }
}
.lesson-nav {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule);
}
.lesson-nav .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

/* table of contents: a drawer */
.toc {
  position: fixed; z-index: 40; top: var(--topbar); left: 0; bottom: 0; width: 344px;
  overflow-y: auto; background: var(--paper); border-right: 1px solid var(--rule);
  padding: var(--s5); transform: translateX(-102%); transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow);
}
body.toc-open .toc { transform: none; }
.scrim { position: fixed; inset: var(--topbar) 0 0 0; z-index: 35; background: rgba(20, 15, 5, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
body.toc-open .scrim { opacity: 1; pointer-events: auto; }
.toc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); font: 500 12px var(--font-mono); }
.toc-title { text-transform: uppercase; letter-spacing: 0.16em; }
.toc-chapter h3 { display: flex; align-items: baseline; gap: var(--s3); font: 600 16px var(--font-display); margin: var(--s5) 0 var(--s3); }
.toc-lessons { list-style: none; margin: 0; padding: 0; }
.toc-item a {
  display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s3);
  color: var(--ink-2); text-decoration: none; border-radius: var(--radius); font-size: 15px; line-height: 1.35;
}
.toc-item a:hover { background: var(--gold-wash); color: var(--ink); }
.toc-item.current a { background: var(--paper-3); color: var(--ink); font-weight: 600; }
.toc-no { font: 500 11px var(--font-mono); color: var(--muted); width: 21px; text-align: right; flex: none; }
.toc-name { flex: 1; }
.toc-check { color: var(--good); width: 14px; height: 14px; align-self: center; }
.toc-item.visited .toc-no { color: var(--gold); }

/* ---------- workbench ---------- */

.bench-host { min-width: 0; min-height: 0; display: flex; }
.bench {
  --editor-frac: 0.618;
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--paper-2);
}
.bench-toolbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); background: var(--paper);
}
.bench-status { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-status.good { color: var(--good); }
.bench-status.bad { color: var(--bad); }
.bench-status.busy::before { content: "◌ "; display: inline-block; animation: spin 1.5s linear infinite; }
.bench-editor { flex: var(--editor-frac) 1 0; min-height: 0; display: flex; background: var(--card); }
.bench-panel { flex: calc(1 - var(--editor-frac)) 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--paper-2); }
.bench-splitter {
  flex: none; height: 8px; cursor: row-resize; background: var(--paper);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1.4px);
  background-size: 8px 8px; background-position: center; background-repeat: repeat-x;
}
.bench-splitter:hover { background-color: var(--gold-wash); }

/* the playground: side by side, 61.8 | 38.2 */
.bench.bench-wide {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--editor-frac) * 100%)) 8px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.bench-wide .bench-toolbar { grid-column: 1 / -1; }
.bench-wide .bench-splitter {
  height: auto; cursor: col-resize; border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  background-repeat: repeat-y;
}
body.playground main { display: flex; }
body.playground .bench-host { flex: 1; }

.tabs { display: flex; gap: 0; padding: 0 var(--s3); border-bottom: 1px solid var(--rule); background: var(--paper); overflow-x: auto; flex: none; }
.tab {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 500 12px var(--font-mono); letter-spacing: 0.04em; color: var(--muted);
  padding: var(--s3) var(--s4); background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.badge { font: 600 10px/1 var(--font-mono); padding: 2px 5px; border-radius: 8px; background: var(--rule); color: var(--ink-2); }
.badge.error { background: var(--bad); color: var(--paper); }
.badge.warning { background: var(--warn); color: var(--paper); }
.tab-body { flex: 1; min-height: 0; position: relative; }
.tab-pane { position: absolute; inset: 0; overflow: auto; }

.output-pane { display: flex; flex-direction: column; }
.page-pane phi-preview { min-height: 100%; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.console {
  flex: 1; margin: 0; padding: var(--s4) var(--s5);
  font: 13.5px/1.55 var(--font-mono); white-space: pre-wrap; word-break: break-word;
  color: var(--ink); overflow: auto;
}
.out-stderr { color: var(--bad); }
.out-note { color: var(--muted); font-style: italic; }
.stdin-wrap { border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s4); font: 12px var(--font-mono); color: var(--muted); }
.stdin-wrap summary { cursor: pointer; }
.stdin { width: 100%; margin: var(--s3) 0; font: 13px var(--font-mono); background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3); resize: vertical; }
.messages { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.msg { white-space: normal; }
.msg-level {
  font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: var(--radius); color: var(--paper);
}
.msg-error .msg-level { background: var(--bad); }
.msg-warning .msg-level { background: var(--warn); }
.msg-loc { color: var(--muted); }
a.msg-loc { color: var(--gold); }
.msg-text { color: var(--ink); }
.msg-src { margin: var(--s2) 0 0; padding: var(--s3) var(--s4); background: var(--card); border-radius: var(--radius); color: var(--ink-2); font-size: 12.5px; overflow-x: auto; white-space: pre; }
.msg-src:empty { display: none; }

.problems, .outline { list-style: none; margin: 0; padding: var(--s3) 0; }
.problems .none, .outline .none { padding: var(--s3) var(--s5); color: var(--muted); font-style: italic; }
.problem { display: grid; grid-template-columns: 70px 55px 1fr; gap: var(--s3); padding: var(--s3) var(--s5); cursor: pointer; font-size: 14.5px; line-height: 1.45; }
.problem:hover { background: var(--gold-wash); }
.problem .sev { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 4px; }
.problem.error .sev { color: var(--bad); }
.problem.warning .sev { color: var(--warn); }
.problem .where { font: 12px var(--font-mono); color: var(--muted); padding-top: 2px; }
.sym { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s5); font-size: 14.5px; }
.sym:hover { background: var(--gold-wash); }
.sym.depth1 { padding-left: calc(var(--s5) + var(--s5)); }
.sym.depth2 { padding-left: calc(var(--s5) + var(--s6)); }
.sym-kind { font: 600 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); width: 44px; flex: none; }
.sym-kind.k-fn, .sym-kind.k-method { color: var(--syn-fn); }
.sym-kind.k-type, .sym-kind.k-ctor { color: var(--syn-type); }
.sym-kind.k-trait, .sym-kind.k-impl { color: var(--syn-keyword); }
.sym-name { font: 600 13.5px var(--font-mono); color: var(--ink); text-decoration: none; }
.sym-detail { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.sym-actions { display: flex; gap: var(--s2); margin-left: auto; flex: none; }

.codeview-pane { display: flex; flex-direction: column; }
.codeview-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); background: var(--paper); flex: none; flex-wrap: wrap; }
.fn-select { max-width: 260px; }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.seg-btn { font: 500 11.5px var(--font-mono); padding: 6px var(--s3); background: var(--card); color: var(--muted); border: 0; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--rule-strong); }
.seg-btn.active { background: var(--ink); color: var(--paper); }
.codeview-note { font-size: 13.5px; color: var(--muted); padding: var(--s3) var(--s5) 0; font-style: italic; }
.codeview-note:empty { display: none; }
.codeview { flex: 1; margin: 0; padding: var(--s4) var(--s5); font: 12.5px/1.6 var(--font-mono); white-space: pre; overflow: auto; tab-size: 2; }
.codeview.loading { opacity: 0.5; transition: opacity 0.3s 0.15s; }

/* ---------- CodeMirror ---------- */

.bench-editor .cm-editor { flex: 1; min-width: 0; height: 100%; font-size: 14px; background: var(--card); color: var(--ink); }
.bench-editor .cm-editor.cm-focused { outline: none; }
.cm-scroller { font-family: var(--font-mono) !important; line-height: 1.6 !important; }
.cm-content { padding: var(--s4) 0 !important; caret-color: var(--gold); }
.cm-gutters { background: var(--card) !important; border-right: 1px solid var(--rule) !important; color: var(--muted) !important; }
.cm-lineNumbers .cm-gutterElement { padding: 0 var(--s3) 0 var(--s4) !important; font-size: 12px; }
.cm-activeLine { background: var(--gold-wash) !important; }
.cm-activeLineGutter { background: var(--gold-wash) !important; color: var(--ink) !important; }
.cm-cursor { border-left: 2px solid var(--gold) !important; }
.cm-selectionBackground, .cm-focused .cm-selectionBackground { background: var(--gold-soft) !important; }
.cm-matchingBracket { background: var(--gold-wash) !important; outline: 1px solid var(--gold); color: inherit !important; }
.cm-selectionMatch { background: color-mix(in srgb, var(--gold-soft) 60%, transparent) !important; }
.cm-phi-mut, .cm-phi-mut span { color: var(--syn-mut) !important; }
.cm-phi-mut { text-decoration: underline 1px color-mix(in srgb, var(--syn-mut) 45%, transparent); text-underline-offset: 3px; }
.cm-phi-inout, .cm-phi-inout span { font-style: italic; }
/* type variables: `a` in `Vec(a)`, `where a: Show` */
.cm-phi-tvar, .cm-phi-tvar span { color: var(--syn-tvar) !important; }
.cm-phi-ref { background: color-mix(in srgb, var(--syn-fn) 14%, transparent); border-radius: 2px; }
.cm-phi-ref-write { background: color-mix(in srgb, var(--syn-control) 16%, transparent); }
.cm-lintRange-error { background-image: none !important; text-decoration: underline wavy var(--bad); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.cm-lintRange-warning { background-image: none !important; text-decoration: underline wavy var(--warn); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.cm-lint-marker { width: 0.8em !important; height: 0.8em !important; }
.cm-tooltip { background: var(--card) !important; color: var(--ink); border: 1px solid var(--rule-strong) !important; border-radius: var(--radius); box-shadow: var(--shadow); }
.cm-tooltip-lint { font: 13px/1.5 var(--font-prose); }
.cm-diagnostic { padding: var(--s3) var(--s4) !important; border-left-width: 3px !important; }
.cm-diagnostic-error { border-left-color: var(--bad) !important; }
.cm-diagnostic-warning { border-left-color: var(--warn) !important; }
.cm-tooltip-autocomplete > ul { font: 13px var(--font-mono) !important; max-height: 233px !important; }
.cm-tooltip-autocomplete > ul > li { padding: 3px var(--s3) !important; }
.cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--gold-soft) !important; color: var(--ink) !important; }
.cm-completionDetail { color: var(--muted); font-style: normal !important; margin-left: var(--s4) !important; }
.cm-completionIcon { opacity: 0.7; }
.cm-panels { background: var(--paper) !important; color: var(--ink) !important; }
.cm-searchMatch { background: var(--gold-soft) !important; }
.cm-foldGutter .cm-gutterElement { color: var(--rule-strong); }
.phi-hover { padding: var(--s3) var(--s4); max-width: 560px; font-size: 14px; }
.phi-hover .md p { margin: 0 0 var(--s3); }
.phi-hover .md ul.known { margin: 0 0 var(--s3); padding-left: var(--s4); }
.phi-hover .md ul.known li { margin: 0; }
.phi-hover .code-block { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; font-size: 13px; white-space: pre-wrap; }

/* ---------- peek (definitions in lib/) ---------- */

.peek { width: min(900px, 92vw); height: min(640px, 82vh); padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.peek[open] { display: flex; flex-direction: column; }
.peek::backdrop { background: rgba(20, 15, 5, 0.35); }
/* (drawn by phi: an overlay instead of a modal dialog) */
.peek-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(20, 15, 5, 0.35); }
.peek-overlay .peek { display: flex; flex-direction: column; }
.peek-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 13px; }
.peek-code { flex: 1; position: relative; }
.peek-mark { background-image: linear-gradient(var(--gold-wash), var(--gold-wash)); background-size: 100% 1.6em; background-repeat: no-repeat; background-position: 0 calc(var(--s4) + var(--peek-line) * 1.6em); background-attachment: local; }

/* ---------- landing ---------- */

body.home main { min-height: calc(100vh - var(--topbar)); }
.hero {
  display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: var(--s7);
  max-width: 1440px; margin: 0 auto; padding: var(--s8) var(--s6) var(--s7);
  position: relative;
}
.hero::before {
  /* construction lines */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 89px 89px;
  mask-image: radial-gradient(ellipse at 30% 40%, rgba(0,0,0,0.5), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, rgba(0,0,0,0.5), transparent 70%);
}
.hero-text { position: relative; padding-top: var(--s5); }
.hero-spiral { width: 100%; max-width: 377px; height: auto; display: block; margin-bottom: var(--s5); }
.hero-spiral .spiral-arc { vector-effect: none; stroke-width: 0.55; }
.hero-spiral.drawing .spiral-arc { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2.4s 0.2s cubic-bezier(.4,0,.2,1) forwards; }
.hero-spiral .spiral-sq { animation: fade 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .hero-spiral.drawing .spiral-arc { animation: none; stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
.hero h1 { font: 600 89px/0.9 var(--font-display); letter-spacing: -0.02em; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 30; }
.hero-phi { font-style: italic; font-weight: 400; color: var(--gold); margin-right: 0.12em; }
.tagline { font: italic 400 26px/1.3 var(--font-display); color: var(--ink-2); margin: var(--s4) 0 var(--s5); }
.lede { color: var(--ink-2); max-width: 34em; }
.cta { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.hero-demo { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; align-self: start; overflow: hidden; }
.hero-demo-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); background: var(--paper); font: 12px var(--font-mono); }
.dots { display: inline-flex; gap: var(--s2); }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule-strong); }
.hero-code { margin: 0; padding: var(--s5); font: 13.5px/1.6 var(--font-mono); overflow-x: auto; }
.hero-out { flex: none; min-height: 89px; border-top: 1px solid var(--rule); background: var(--paper-2); margin: 0; }
.features { max-width: 1440px; margin: 0 auto; padding: var(--s6); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s5); }
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.feature h3 { font: 600 21px/1.2 var(--font-display); margin: 0; }
.feature p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.feature-code { margin: var(--s2) 0; padding: var(--s4); background: var(--paper-2); border-radius: var(--radius); font-size: 12.5px; line-height: 1.55; overflow-x: auto; flex: 1; }
.feature .chip { align-self: flex-start; }
.how { max-width: 1440px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.how h2 { font: 600 34px var(--font-display); margin: 0 0 var(--s5); }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); padding: 0; list-style: none; counter-reset: step; }
.how-steps li { counter-increment: step; border-top: 2px solid var(--gold); padding-top: var(--s4); color: var(--ink-2); font-size: 15.5px; }
.how-steps li::before { content: counter(step, upper-roman); display: block; font: italic 500 21px var(--font-display); color: var(--gold); margin-bottom: var(--s3); }
.how-steps strong { color: var(--ink); }
.foot { text-align: center; padding: var(--s6); color: var(--muted); font: 12px var(--font-mono); border-top: 1px solid var(--rule); }

.flash {
  position: absolute; transform: translate(-50%, -150%); left: 50%;
  background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); border-radius: var(--radius);
  font: 11px var(--font-mono); pointer-events: none; animation: fade 0.2s;
}
.btn { position: relative; }
.example-select { max-width: 280px; }

/* ---------- narrow screens ---------- */

@media (max-width: 960px) {
  body.tour main { display: block; height: auto; }
  .lesson { border-right: 0; padding: var(--s5) var(--s4) var(--s6); overflow: visible; }
  .bench-host { height: calc(100dvh - var(--topbar)); border-top: 1px solid var(--rule); }
  .hero { grid-template-columns: 1fr; padding: var(--s6) var(--s4); gap: var(--s6); }
  .hero h1 { font-size: 55px; }
  .features, .how { padding: var(--s5) var(--s4); }
  .meter { display: none; }
  .bench.bench-wide { display: flex; flex-direction: column; }
  .bench-wide .bench-splitter { height: 8px; cursor: row-resize; border-left: 0; border-right: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background-repeat: repeat-x; }
  .brand-section, .tour-position { display: none; }
  .topbar { padding: 0 var(--s4); gap: var(--s3); }
}
@media (max-width: 560px) {
  .nav-link { padding: var(--s3) var(--s2); }
  .brand-name { display: none; }
  .bench-toolbar .btn { padding: 0 var(--s3); }
  .bench-status { display: none; }
  .toc { width: 100%; }
}

/* after every `font` shorthand (which resets it): no ligatures in code */
pre, code, .console, .codeview, .hero-code, .feature-code, .cm-content, .msg-src, .exercise-expect { font-variant-ligatures: none; }

/* ---------- pages drawn by phi (web/app/) ---------- */

/* the mount and the page's root: their children lay out as the body's */
#app, .app { display: contents; }
phi-editor { display: flex; flex: 1; min-width: 0; min-height: 0; }
phi-editor .cm-editor { flex: 1; min-width: 0; }
phi-splitter { display: block; }

/* highlighted code (web/app/highlight.phi) */
.hl-com { color: var(--syn-comment); font-style: italic; }
.hl-todo { color: var(--syn-keyword); font-weight: 600; }
.hl-str { color: var(--syn-string); }
.hl-esc { color: var(--syn-escape); }
.hl-interp { color: var(--syn-interp); font-weight: 600; }
.hl-num { color: var(--syn-number); }
.hl-kw { color: var(--syn-keyword); font-weight: 600; }
.hl-ctl, .hl-op { color: var(--syn-control); font-weight: 600; }
.hl-type { color: var(--syn-type); }
.hl-def { color: var(--syn-fn); font-weight: 600; }
.hl-fn { color: var(--syn-fn); }
.hl-var { color: var(--ink); }
.hl-label, .hl-attr { color: var(--syn-label); }
.hl-name { color: var(--ink); }
.hl-punct { color: var(--syn-punct); }
.hl-oper { color: var(--syn-op); }
.hl-mut { color: var(--syn-mut); }
.hl-tvar { color: var(--syn-tvar); }

/* ---------- the inspector (web/app/inspector.phi; ?inspect, Alt+Shift+I) ---------- */

#phi-inspector[hidden] { display: none; }
.inspector {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 60;
  width: min(640px, calc(100vw - 2 * var(--s4))); height: min(46vh, 520px);
  display: flex; flex-direction: column;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); font: 12px/1.45 var(--font-mono);
}
.inspector-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); background: var(--paper); }
.inspector-head strong { color: var(--gold); letter-spacing: 0.04em; }
.inspector-head .seg-btn { padding: 3px var(--s3); font-size: 11px; }
.inspector-empty { padding: var(--s5); font-style: italic; }
.inspector-log { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.inspector-row { padding: var(--s2) var(--s4); border-bottom: 1px solid var(--rule); cursor: pointer; }
.inspector-row:hover, .inspector-row.open { background: var(--gold-wash); }
.inspector-line { display: flex; gap: var(--s3); align-items: baseline; min-width: 0; }
.inspector-n { width: 3em; text-align: right; flex: none; }
.inspector-kind { flex: none; width: 7.5em; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.inspector-kind.k-h { color: var(--syn-fn); }
.inspector-kind.k-r, .inspector-kind.k-e { color: var(--syn-type); }
.inspector-kind.k-start { color: var(--gold); }
.inspector-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--ink); font-size: 12px; }
.inspector-row.open .inspector-msg { white-space: normal; word-break: break-all; }
.inspector-times { padding-left: calc(3em + 7.5em + 2 * var(--s3)); font-size: 11px; }
.inspector-detail { margin: var(--s2) 0 var(--s2) calc(3em + var(--s3)); padding: var(--s3); background: var(--paper-2); border-radius: var(--radius); white-space: pre-wrap; word-break: break-all; font-size: 11.5px; }

/* ---- the Observe tab (web/app/observe.phi) ---- */
.observe { padding: var(--s4) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s5); container-type: inline-size; }
.observe > * { flex-shrink: 0; }
.obs-empty { color: var(--muted); font-style: italic; font-size: 13.5px; }
.obs-empty code { font-style: normal; }
.obs-summary { display: flex; flex-wrap: wrap; gap: var(--s3); }
.obs-chip { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); font: 12px var(--font-mono); color: var(--muted); }
.obs-chip .n { font-size: 15px; font-weight: 600; color: var(--ink); }
.obs-chip.bad, .obs-chip.bad .n, .obs-bad { color: var(--bad); }
.obs-graph { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.obs-graph svg { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 720px; font-family: var(--font-mono); }
.obs-node .box { fill: var(--card); stroke: var(--rule-strong); stroke-width: 1; }
.obs-node .stripe { fill: var(--kind); }
.obs-node .name { font-size: 13px; font-weight: 600; fill: var(--ink); }
.obs-node .detail { font-size: 10.5px; fill: var(--muted); }
.obs-node .cpu-track { fill: var(--paper-3); }
.obs-node .cpu { fill: var(--kind); }
.obs-node.lit .box { stroke: var(--gold); stroke-width: 2; }



.obs-edge-label { font-size: 10.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; }
.obs-edge.lit .obs-edge-label { fill: var(--gold); font-weight: 600; }
.obs-arrowhead { fill: var(--rule-strong); }
.obs-arrowhead.lit { fill: var(--gold); }
.obs-badge rect { fill: var(--warn); }
.obs-badge.bad rect { fill: var(--bad); }
.obs-badge text { font-size: 10px; font-weight: 600; fill: var(--paper); }
.obs-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@container (max-width: 820px) { .obs-grid { grid-template-columns: minmax(0, 1fr); } }
.obs-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.obs-section h3 { margin: 0 0 var(--s3); font: 600 13px var(--font-mono); color: var(--ink); display: flex; align-items: baseline; gap: var(--s3); }
.obs-section h3 .chip { margin-left: auto; font-weight: 400; }
.obs-section h3 .chip + .chip { margin-left: 0; }
.obs-note { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.obs-traces { display: flex; flex-direction: column; max-height: 168px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: var(--s3); }
.obs-trace { display: grid; grid-template-columns: minmax(8em, 1fr) auto 5em; gap: var(--s3); align-items: baseline; padding: 3px var(--s3); border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; font: 12px var(--font-mono); color: var(--ink-2); cursor: pointer; }
.obs-trace:last-child { border-bottom: 0; }
.obs-trace:hover { background: var(--gold-wash); }
.obs-trace.active { background: var(--gold-soft); color: var(--ink); }
.obs-trace.failed .t-name { color: var(--bad); }
.obs-trace .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-trace .t-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.obs-trace .t-ns { text-align: right; }
.obs-waterfall { display: flex; flex-direction: column; gap: 2px; font: 11.5px var(--font-mono); }
.obs-span { display: grid; grid-template-columns: minmax(11em, 40%) minmax(0, 1fr) 4.5em; gap: var(--s3); align-items: center; min-height: 20px; }
.obs-span .s-label { display: flex; gap: var(--s2); align-items: baseline; overflow: hidden; white-space: nowrap; }
.obs-span .s-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.obs-span .s-kind { color: var(--kind); font-size: 10.5px; }
.obs-span .s-track { position: relative; height: 14px; background: var(--paper-2); border-radius: 2px; }
.obs-span .s-bar { position: absolute; top: 2px; bottom: 2px; min-width: 2px; background: var(--kind); border-radius: 2px; }
.obs-span .s-ns { font-size: 10.5px; color: var(--muted); white-space: nowrap; text-align: right; }
.obs-span.failed .s-name { color: var(--bad); }
.obs-span.failed .s-bar { background: var(--bad); }
.obs-table-wrap { overflow-x: auto; }
.obs-table { border-collapse: collapse; width: 100%; font: 12px var(--font-mono); }
.obs-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; padding: 2px var(--s3); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.obs-table td { padding: 3px var(--s3); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.obs-table td:first-child { white-space: nowrap; }
.obs-table td.num { text-align: right; white-space: nowrap; }
.obs-table td.kind { color: var(--muted); }
.k-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kind); margin-right: var(--s2); }
.obs-hist { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; margin-left: var(--s3); vertical-align: middle; }
.obs-hist span { width: 4px; background: var(--gold); border-radius: 1px 1px 0 0; }
.obs-export-bar { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip.active { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.obs-export-text { margin: var(--s3) 0 0; max-height: 320px; overflow: auto; padding: var(--s3); background: var(--paper-2); border-radius: var(--radius); font: 11.5px/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-all; }

/* the graph, interactive */
.obs-graph { position: relative; }
.obs-graph svg { touch-action: none; cursor: grab; user-select: none; }
.obs-graph.dragging svg { cursor: grabbing; }
.obs-graph-tools { position: absolute; top: var(--s2); right: var(--s2); left: var(--s2); display: flex; gap: var(--s2); align-items: center; justify-content: flex-end; pointer-events: none; }
.obs-graph-tools > * { pointer-events: auto; }
.obs-graph-tools .obs-note { margin-right: auto; pointer-events: none; }
.obs-graph-tools .chip { min-width: 2em; justify-content: center; background: var(--card); }
.obs-node { cursor: pointer; }
.obs-graph.dragging .obs-node { cursor: grabbing; }
.obs-node:hover .box { stroke: var(--ink-2); }
.obs-node.picked .box { stroke: var(--kind); stroke-width: 3; }
.obs-node, .obs-edge { transition: opacity 0.15s; }
.obs-node.dim, .obs-edge.dim { opacity: 0.22; }
.obs-edge { cursor: pointer; }
.obs-edge .hit { fill: none; stroke: transparent; stroke-width: 14; }
.obs-edge .line { fill: none; stroke: var(--rule-strong); opacity: 0.75; }
.obs-edge:hover .line { stroke: var(--ink-2); opacity: 1; }
.obs-edge.sel .line { stroke: var(--ink); opacity: 1; }
.obs-edge.lit .line { stroke: var(--gold); opacity: 1; }
.obs-edge.sel .obs-edge-label { fill: var(--ink); font-weight: 600; }
.obs-arrowhead.sel { fill: var(--ink); }
.obs-details { border: 1px solid var(--rule); border-left: 4px solid var(--kind, var(--gold)); border-radius: var(--radius); background: var(--card); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); font-size: 13px; }
.obs-details-head { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-mono); }
.obs-details-head .obs-close { margin-left: auto; }
.obs-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.obs-stat { display: flex; flex-direction: column; font-family: var(--font-mono); }
.obs-stat .n { font-size: 14px; font-weight: 600; color: var(--ink); }
.obs-stat .l { font-size: 10.5px; color: var(--muted); }
.obs-details-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.obs-details-cols h4 { margin: 0 0 var(--s2); font: 500 11px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.obs-flow-link { display: flex; align-items: baseline; gap: var(--s2); border: 0; background: none; padding: 1px 0; font: 12px var(--font-mono); color: var(--ink-2); cursor: pointer; text-align: left; }
.obs-flow-link:hover { color: var(--gold); }
.obs-flow-link .k-dot { margin-right: 0; }
.obs-procs { display: flex; flex-direction: column; gap: 2px; font: 11.5px var(--font-mono); }
.obs-proc .obs-note { font-family: var(--font-mono); font-size: 11px; }
.obs-proc { display: flex; gap: var(--s2); align-items: baseline; white-space: nowrap; overflow: hidden; }
.obs-spawn path { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.7; }