/* Facthink site styles (header, footer, tokens) and the Trace-a-run page.
   Palette (assets/palette-hf.pdf): sage #CACAAA, sand #EEC584, tan #BD9C6E, teal #4A7A80,
   mauve #6E5260, with darker shades for text and lines and lighter tints for fills. */

:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --card-warm: #FAF9F2;
  --line: #CBCAB4;
  --line-soft: #DEDDCC;
  --ink: #2D2D2F;
  --ink-2: #3A3A3D;
  --muted: #5C5B54;
  --faint: #95947E;
  --brown: #4A7A80;
  --brown-dark: #38616A;
  --brown-tint: #DCE7E9;
  --blue: #4A7A80;
  --blue-tint: #DCE7E9;
  --green: #66663F;
  --green-tint: #E3E3D0;
  --terra: #6E5260;
  --terra-tint: #E8DDE2;
  --rose: #523B44;
  --rose-tint: #E8DDE2;
  --amber: #8F6420;
  --amber-tint: #F7E8C9;
  --tan: #BD9C6E;
  --tan-dark: #73562F;
  --tan-tint: #EEE4D2;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); min-height: 100vh; }
a { text-decoration: none; color: inherit; }
::selection { background: #F7E8C9; }
button { font-family: inherit; }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

/* ---------- header / footer (same as the other pages) ---------- */
header.site { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 24px 56px; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); }
header.site .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
header.site .brand span { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
header.site nav { display: flex; align-items: center; gap: 34px; }
header.site nav a { font-size: 14px; color: var(--muted); transition: color .2s; }
header.site nav a:hover { color: var(--ink); }
header.site nav a.active { font-weight: 600; color: var(--ink); }
header.site nav a.cta { font-weight: 600; color: #fff; background: var(--brown); border-radius: 8px; padding: 10px 18px; white-space: nowrap; transition: background .2s; }
header.site nav a.cta:hover { background: var(--brown-dark); }
footer.site { max-width: 1100px; margin: 80px auto 0; padding: 40px 56px 60px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
footer.site .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
footer.site .brand span { font-family: var(--serif); font-size: 16px; }
footer.site .copy { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------- hero ---------- */
.hero { max-width: 860px; margin: 0 auto; padding: 84px 56px 28px; text-align: center; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.025em; margin: 26px 0 22px; }
.hero p.lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 640px; margin: 0 auto; }
.hero .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; }
.hero .fact { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.hero .fact b { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink); }
.hero .fact span { font-size: 12px; color: var(--muted); }

/* ---------- generic blocks ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 64px -46px rgba(41,37,36,0.3); }
.section-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; }
.section-head .letter { font-family: var(--mono); font-size: 13px; color: var(--brown); }
.section-head h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
.section-sub { font-size: 15px; color: var(--muted); margin: 0 0 18px; max-width: 720px; }

/* ---------- seed card ---------- */
.seed { max-width: 1280px; margin: 26px auto 0; padding: 0 40px; }
.seed .card { background: #fff; border-color: var(--line); padding: 24px 28px; box-shadow: none; }
.seed .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.seed .box { background: #fff; border: 1px solid #C6D8DB; border-radius: 0; padding: 14px 16px; }
.seed .box .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #87866C; margin-bottom: 6px; }
.seed .claim { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); margin: 0; }
.seed .kv { font-size: 14px; color: var(--ink-2); margin: 4px 0; }
.seed .kv b { color: var(--ink); font-weight: 600; }
.seed .prio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seed .prio span { font-family: var(--mono); font-size: 11.5px; color: var(--brown); background: var(--brown-tint); border-radius: 6px; padding: 4px 8px; }
.seed .prio span i { font-style: normal; color: var(--faint); margin-left: 5px; }
.seed details summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 10px; }
.seed details p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }

/* ---------- hypothesis strip ---------- */
.hyps { max-width: 1280px; margin: 34px auto 0; padding: 0 40px; }
.hyps .funnel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.hyps .funnel b { color: var(--ink); font-weight: 500; }
.hyps .funnel .arrow { color: var(--faint); }
.hyps .funnel button { border: none; background: none; padding: 0; font: inherit; color: var(--brown); cursor: pointer; border-bottom: 1px solid #A5C1C6; }
.hyp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hyp-card { position: relative; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 16px 16px 14px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: 10px; min-height: 178px; }
.hyp-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(41,37,36,0.45); }
.hyp-card.active { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(127,99,110,0.14), 0 18px 40px -30px rgba(41,37,36,0.45); }
.hyp-card .top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hyp-card .top .rank { display: inline-flex; align-items: center; gap: 6px; }
.hyp-card .top .rank b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 500; font-size: 11px; }
.hyp-card .headline { font-family: var(--serif); font-size: 16.5px; line-height: 1.32; color: var(--ink); flex: 1; }
.hyp-card .score { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hyp-card .score .bar { flex: 1; }
.hyp-card .chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; border-radius: 6px; padding: 3px 7px; background: var(--brown-tint); color: var(--brown); white-space: nowrap; }
.chip.ok { background: var(--green-tint); color: var(--green); }
.chip.warn { background: var(--amber-tint); color: var(--amber); }
.chip.bad { background: var(--rose-tint); color: var(--rose); }
.chip.blue { background: var(--blue-tint); color: var(--blue); }
.chip.terra { background: var(--terra-tint); color: var(--terra); }
.chip.tan { background: var(--tan-tint); color: var(--tan-dark); }
.chip.grey { background: #E8E7D9; color: var(--muted); }
.chip.ink { background: var(--ink); color: #fff; }

.bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brown); border-radius: 3px; }
.bar.terra > i { background: var(--terra); }
.bar.green > i { background: var(--green); }
.bar.blue > i { background: var(--blue); }
.bar.rose > i { background: var(--rose); }
.bar.grey > i { background: var(--faint); }

/* ---------- stage: graph + inspector ---------- */
.stage { max-width: 1280px; margin: 26px auto 0; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.graph-card { padding: 0; overflow: hidden; position: relative; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--card-warm); }
.toolbar .tb-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.toolbar input[type=checkbox] { accent-color: var(--brown); }
.toolbar input[type=search] { font-family: var(--sans); font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 170px; outline: none; }
.toolbar input[type=search]:focus { border-color: var(--ink); }
.toolbar .spacer { flex: 1; }
.tbtn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--brown-dark); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; transition: background .15s; }
.tbtn:hover { background: rgba(85,134,140,0.10); }
.tbtn.primary { background: var(--brown); color: #fff; border-color: var(--brown); }
.tbtn.primary:hover { background: var(--brown-dark); }
.tbtn:disabled { opacity: .45; cursor: default; }

.graph-wrap { position: relative; height: 640px; background:
  radial-gradient(circle at 1px 1px, rgba(41,37,36,0.06) 1px, transparent 0) 0 0 / 22px 22px, var(--card); }
.graph-wrap svg { width: 100%; height: 100%; display: block; cursor: grab; }
.graph-wrap svg:active { cursor: grabbing; }
.graph-legend { position: absolute; left: 14px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: rgba(255,255,255,0.86); border: 1px solid var(--line-soft); border-radius: 0; padding: 7px 10px; pointer-events: none; }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid; }
.graph-legend i.claim { background: var(--blue-tint); border-color: var(--blue); }
.graph-legend i.mined { background: var(--tan-tint); border-color: var(--tan); }
.graph-legend i.hypo { background: var(--terra-tint); border-color: var(--terra); }
.graph-legend i.proposed { background: #F3EBDC; border-color: var(--rose); border-style: dashed; }
.graph-legend i.line { width: 18px; height: 0; border-radius: 0; border-width: 0 0 2px 0; }
.graph-legend i.line.green { border-color: var(--green); }
.graph-legend i.line.terra { border-color: var(--terra); border-bottom-style: dashed; }
.graph-legend i.line.rose { border-color: var(--rose); border-bottom-style: dotted; }
.graph-hint { position: absolute; right: 14px; top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: rgba(255,255,255,0.86); border: 1px solid var(--line-soft); border-radius: 0; padding: 6px 10px; pointer-events: none; }
.graph-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }

/* svg element classes */
.node { cursor: pointer; }
.node rect { fill: var(--card); stroke-width: 1.5px; transition: opacity .25s; }
.node.claim rect { fill: var(--blue-tint); stroke: var(--blue); }
.node.mined rect { fill: var(--tan-tint); stroke: var(--tan); }
.node.hypothesis rect { fill: var(--terra-tint); stroke: var(--terra); }
.node.proposed rect { fill: #F3EBDC; stroke: var(--rose); stroke-dasharray: 5 3; }
.node.focus rect { stroke-width: 3px; }
.node.hypothesis.focus rect { fill: #D9C8CF; }
.node.proposed.focus rect { fill: var(--rose-tint); }
.node text { font-family: var(--sans); font-size: 11.5px; font-weight: 500; fill: var(--ink); pointer-events: none; }
.node.claim text { fill: var(--blue); }
.node.mined text { fill: #73562F; }
.node.hypothesis text { fill: #523B44; }
.node.proposed text { fill: var(--rose); }
.node .type { font-family: var(--mono); font-size: 8px; font-weight: 400; fill: var(--faint) !important; letter-spacing: 0.05em; text-transform: uppercase; }
.node.selected rect { stroke: var(--ink) !important; stroke-width: 2.5px; }
.node.dim { opacity: 0.16; }
.node.ctx { opacity: 0.5; }
.node.match rect { stroke: var(--amber) !important; stroke-width: 3px; }
.edge { cursor: pointer; }
.edge path.line { fill: none; stroke: var(--green); stroke-width: 1.6px; }
.edge.hypothesis path.line { stroke: var(--terra); stroke-width: 2px; stroke-dasharray: 7 4; }
.edge.proposed path.line { stroke: var(--rose); stroke-width: 1.8px; stroke-dasharray: 2 4; }
.edge path.hit { fill: none; stroke: transparent; stroke-width: 14px; }
.edge.focus path.line { stroke-width: 3px; }
.edge.selected path.line { stroke: var(--ink); stroke-width: 3px; }
.edge.dim { opacity: 0.12; }
.edge.ctx { opacity: 0.45; }
.edge .lbl { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-2); pointer-events: none; }
.edge .lblbg { fill: rgba(255,255,255,0.92); stroke: none; }
.edge.hypothesis .lbl { fill: var(--terra); }
.edge.proposed .lbl { fill: var(--rose); }
.shelf-label { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.shelf-title { font-family: var(--sans); font-size: 10.5px; fill: var(--muted); font-style: italic; }
.shelf-line { stroke: var(--line); stroke-dasharray: 3 3; }
.col-label { font-family: var(--mono); font-size: 9px; fill: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- inspector ---------- */
.inspector { position: sticky; top: 92px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; overflow: hidden; }
.inspector .ins-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: var(--card-warm); border-radius: 0; }
.inspector .ins-head .crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.inspector .ins-body { overflow: auto; padding: 18px 20px 24px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.inspector h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.inspector h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; font-weight: 500; }
.inspector h4:first-child { margin-top: 0; }
.inspector p { margin: 0 0 10px; }
.inspector .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.inspector .kv { display: grid; grid-template-columns: 118px 1fr; gap: 4px 12px; font-size: 13px; margin: 0 0 10px; }
.inspector .kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; padding-top: 2px; }
.inspector .kv dd { margin: 0; color: var(--ink-2); }
.inspector .note { font-size: 12.5px; color: var(--muted); background: var(--brown-tint); border-radius: 0; padding: 9px 12px; margin: 8px 0 12px; }
.inspector .note.rose { background: var(--rose-tint); color: var(--rose); }
.inspector .note.green { background: var(--green-tint); color: var(--green); }
.inspector .note.blue { background: var(--blue-tint); color: var(--blue); }
.inspector .quote { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 6px 0 10px; }
.inspector .quote mark { background: #F2D9A0; color: inherit; padding: 0 2px; border-radius: 2px; }
.inspector .src { font-size: 12.5px; color: var(--muted); }
.inspector .src a { color: var(--brown); border-bottom: 1px solid #A5C1C6; }
.inspector .list { list-style: none; padding: 0; margin: 0 0 10px; }
.inspector .list li { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 0; margin-bottom: 6px; background: var(--card-warm); font-size: 13px; }
.inspector .list li.link { cursor: pointer; transition: border-color .15s; }
.inspector .list li.link:hover { border-color: var(--brown); }
.inspector .list li .mini { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.inspector .step-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.inspector .rel { font-family: var(--mono); font-size: 11px; color: var(--terra); }
.inspector .score-row { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; margin: 5px 0; }
.inspector .score-row .val { font-family: var(--mono); font-size: 11.5px; color: var(--ink); text-align: right; }
.inspector .formula { font-family: var(--serif); font-size: 17px; color: var(--ink); background: var(--brown-tint); border: 1px solid #C6D8DB; border-radius: 0; padding: 10px 14px; margin: 8px 0 10px; }
.inspector .formula small { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 4px; }
.inspector table.judges { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 10px; }
.inspector table.judges th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line-soft); font-weight: 500; }
.inspector table.judges td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
.inspector table.judges td.num { font-family: var(--mono); text-align: right; color: var(--ink); }
.inspector .grade { display: grid; grid-template-columns: 92px 1fr 34px; gap: 6px; align-items: center; font-size: 11.5px; margin: 2px 0; }
.inspector .grade .val { font-family: var(--mono); font-size: 10.5px; text-align: right; color: var(--ink); }
.inspector .verdict { font-family: var(--mono); font-size: 10.5px; border-radius: 5px; padding: 2px 6px; }
.inspector .verdict.sound, .inspector .verdict.consistent { background: var(--green-tint); color: var(--green); }
.inspector .verdict.vague, .inspector .verdict.stretched { background: var(--amber-tint); color: var(--amber); }
.inspector .verdict.false, .inspector .verdict.no_source, .inspector .verdict.contradicted { background: var(--rose-tint); color: var(--rose); }
.inspector .trail-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--terra-tint); border: 1px solid #CDB9C1; border-radius: 0; margin-bottom: 14px; }
.inspector .trail-nav .pos { font-family: var(--mono); font-size: 11px; color: var(--terra); }
.inspector .trail-nav .title { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; text-align: center; }
.inspector .trail-nav button { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--terra); background: #fff; border: 1px solid #CDB9C1; border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.inspector .trail-nav button:disabled { opacity: .4; cursor: default; }
.inspector .trail-dots { display: flex; gap: 4px; margin: 0 0 14px; }
.inspector .trail-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); }
.inspector .trail-dots i.done { background: var(--terra); }
.inspector .ib { display: inline; border: none; background: none; padding: 0; font: inherit; color: var(--brown); cursor: pointer; border-bottom: 1px solid #A5C1C6; }
.inspector .ib:hover { color: var(--ink); border-color: var(--ink); }
.inspector details { margin: 6px 0 10px; }
.inspector details summary { cursor: pointer; font-size: 12.5px; color: var(--brown); }
.inspector details > div { margin-top: 8px; }
.inspector details.tech { margin-top: 22px; padding-top: 10px; border-top: 1px dashed var(--line); }
.inspector details.tech summary { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.inspector details.tech .kv { grid-template-columns: 130px 1fr; }
.inspector details.tech .kv dt { color: var(--faint); }
.inspector details.tech .kv dd { color: var(--muted); }
.inspector .plan-field { margin-bottom: 8px; }
.inspector .plan-field b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.inspector ol.steps { padding-left: 18px; margin: 0 0 10px; }
.inspector ol.steps li { margin-bottom: 5px; font-size: 13px; }
.inspector .timeline { list-style: none; padding: 0; margin: 0 0 10px; position: relative; }
.inspector .timeline li { position: relative; padding: 0 0 12px 22px; font-size: 13px; }
.inspector .timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }
.inspector .timeline li::after { content: ""; position: absolute; left: 9.5px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.inspector .timeline li:last-child::after { display: none; }
.inspector .timeline li.muted::before { background: var(--faint); }
.inspector .timeline li b { color: var(--ink); font-weight: 600; }
.inspector .timeline li .when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); display: block; }

/* ---------- pipeline strip ---------- */
.pipeline { max-width: 1280px; margin: 18px auto 0; padding: 0 40px; }
.pipe-card { padding: 16px 18px 14px; overflow-x: auto; }
.pipe-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 6px; min-width: 900px; }
.pstep { text-align: left; background: var(--card-warm); border: 1px solid var(--line-soft); border-radius: 0; padding: 10px 10px 9px; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 4px; min-height: 96px; font-family: var(--sans); }
.pstep:hover { border-color: var(--brown); }
.pstep.active { border-color: var(--ink); background: #fff; }
.pstep .ph { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; line-height: 1.35; overflow-wrap: anywhere; }
.pstep .ph.p1 { color: var(--blue); } .pstep .ph.p2 { color: var(--green); } .pstep .ph.p3 { color: var(--brown); } .pstep .ph.p4 { color: var(--terra); } .pstep .ph.p5 { color: var(--rose); } .pstep .ph.p6 { color: var(--muted); }
.pstep .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pstep .ct { font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.pstep .dur { margin-top: auto; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.pstep .dur i { display: block; height: 100%; background: var(--faint); }
.pipe-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- tooltip ---------- */
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.4; border-radius: 8px; padding: 7px 10px; max-width: 280px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); opacity: 0; transition: opacity .12s; }
.tip .t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #B5B49C; margin-bottom: 2px; }
.tip.show { opacity: 1; }

/* ---------- misc ---------- */
.loading { text-align: center; color: var(--muted); padding: 60px 0; font-size: 14px; }
.err { max-width: 760px; margin: 40px auto; padding: 20px 24px; border: 1px solid #E9C9C9; background: #FBF1F1; border-radius: 12px; color: #8a3a3a; font-size: 14px; line-height: 1.55; }
.err code { font-family: var(--mono); font-size: 12px; }

@keyframes revealUp { from { opacity: .001; transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-reveal] { animation: revealUp .7s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { animation: none; } }

@media (max-width: 1080px) {
  .stage { grid-template-columns: 1fr; }
  .inspector { position: static; max-height: none; }
  .inspector .ins-body { max-height: 70vh; }
  .hyp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  header.site { padding: 16px 20px; }
  header.site nav { gap: 14px; }
  header.site nav a { font-size: 13px; white-space: nowrap; }
  header.site .brand span { display: none; }
  .hero { padding: 56px 20px 20px; }
  .hero h1 { font-size: clamp(38px, 10vw, 56px); }
  .wrap, .seed, .hyps, .stage, .pipeline { padding-left: 16px; padding-right: 16px; }
  .seed .grid { grid-template-columns: 1fr; }
  .hyp-grid { grid-template-columns: 1fr; }
  .graph-wrap { height: 460px; }
  .graph-legend { position: static; border: none; border-top: 1px solid var(--line-soft); border-radius: 0; background: var(--card-warm); padding: 8px 14px; }
  .graph-hint { display: none; }
  .toolbar input[type=search] { min-width: 120px; }
  footer.site { flex-direction: column; gap: 14px; text-align: center; padding-left: 20px; padding-right: 20px; }
}