:root{
    --paper: #FDFCF9;
    --canvas: #FAF8F2;
    --card: #FFFFFF;
    --ink: #221E17;
    --ink-soft: #6E6350;
    --ink-faint: #A69A80;
    --line: #EAE3D3;
    --line-strong: #DACEB2;
    --accent: #2F6F5E;
    --accent-ink: #FFFFFF;
    --accent-soft-bg: #E1EEE8;
    --accent-soft-border: #B7D6C8;
    --status-built: #2F7D4F;
    --status-built-bg: #E4F3E9;
    --status-built-border: #B9DFC6;
    --status-partial: #A3701A;
    --status-partial-bg: #FBEFDA;
    --status-partial-border: #EBCE99;
    --kind-motivation: #3E5C76;
    --kind-motivation-bg: #E8EEF3;
    --kind-motivation-border: #C3D3E0;
    --kind-evidence: #1F6E82;
    --kind-evidence-bg: #E1F0F4;
    --kind-evidence-border: #B7DAE3;
    --kind-context: #6B3FA0;
    --kind-context-bg: #F0E7F9;
    --kind-context-border: #D9C2EF;
    --kind-ask: #A32D6E;
    --kind-ask-bg: #FBE7F1;
    --kind-ask-border: #EFB9D6;
    --shadow-card: 0 1px 2px rgba(40,30,10,.04), 0 10px 22px -16px rgba(40,30,10,.25);
    --shadow-panel: 0 24px 60px -18px rgba(30,20,5,.35);
    --scrim: hsla(30,25%,20%,.4);
    --dot: rgba(34,30,23,.07);

    --stage-s: 50%;
    --stage-l: 36%;
    --stage-bg-l: 92%;
    --stage-border-l: 78%;

    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Source Serif 4', Georgia, serif;
  }

  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  html{ color-scheme: light; }
  body{
    margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans);
    font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  }
  button{ font:inherit; color:inherit; }
  .back-link,.brand-text span,.view-toggle button,.search-box input,.filters-head,.facet-head,.facet-opt,.domain-item,.count,.section-count,.story-kicker,.story-stat span,.spine-step,.kind-badge,.mchip,.tcard-cta,.pipe-step span,.metric span,.panel-section h4,.source-line,footer{ font-family:var(--font-mono); }
  svg{ display:block; }
  ::selection{ background:var(--accent-soft-bg); }
  a{ color:var(--accent); }
  [hidden]{ display:none !important; }

  .app{ display:flex; height:100vh; height:100dvh; }

  /* ---------------- sidebar ---------------- */
  .sidebar{
    flex:0 0 290px; border-right:1px solid var(--line); padding:22px 20px 20px; display:flex; flex-direction:column; gap:18px;
    height:100%; overflow-y:auto;
  }
  .sidebar > *{ flex-shrink:0; }
  .back-link{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-faint); text-decoration:none; padding:2px 6px; flex:none;
  }
  .back-link svg{ width:12px; height:12px; }
  .back-link:hover{ color:var(--accent); }
  .brand{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:14px 8px 18px; border-bottom:1px solid var(--line);
    background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 12px 12px;
    background-position: -4px -4px; margin: -6px -6px 2px; flex:none;
    color:inherit; text-decoration:none;
  }
  .brand-mark{ width:58px; height:58px; object-fit:contain; display:block; }
  .brand-text strong{ display:block; font-size:19px; letter-spacing:.01em; }
  .brand-text span{ display:block; font-size:12px; color:#80745d; margin-top:5px; line-height:1.5; max-width:25ch; }

  .view-toggle{ display:flex !important; flex:0 0 40px; min-height:40px; visibility:visible; opacity:1; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; }
  .view-toggle button{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px;
    background:var(--card); border:none; cursor:pointer; font-size:13px; color:var(--ink-soft);
    border-right:1px solid var(--line-strong);
  }
  .view-toggle button:last-child{ border-right:none; }
  .view-toggle button svg{ width:14px; height:14px; }
  .view-toggle button.is-active{ background:var(--ink); color:var(--paper); }

  .search-box{ position:relative; flex:none; }
  .search-box svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-faint); }
  .search-box input{
    width:100%; padding:9px 10px 9px 30px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--card); color:var(--ink); font-family:var(--font-mono); font-size:13.5px;
  }
  .search-box input::placeholder{ color:var(--ink-faint); }
  .search-box input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

  .filters-head{
    width:100%; display:flex; align-items:center; gap:8px; padding:9px 4px; background:none; border:none;
    cursor:pointer; font-size:13.5px; color:var(--ink); text-align:left;
  }
  .filters-head svg{ width:13px; height:13px; color:var(--ink-faint); }
  .filters-head .chev{ margin-left:auto; transition:transform .15s ease; color:var(--ink-faint); }
  .filters-head.is-open .chev{ transform:rotate(180deg); }
  .filters-body{ display:flex; flex-direction:column; gap:14px; padding:2px 4px 8px; }
  .filters-body .facet:first-child{ display:none; }
  .facet-head{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#80745d; margin-bottom:7px; }
  .facet-options{ display:flex; flex-direction:column; gap:2px; }
  .facet-opt{
    display:flex; align-items:center; gap:7px; padding:5px 6px; border-radius:6px; border:none; background:none;
    cursor:pointer; font-size:13px; color:var(--ink-soft); text-align:left;
  }
  .facet-opt:hover{ background:var(--card); }
  .facet-opt.is-active{ background:var(--accent-soft-bg); color:var(--ink); font-weight:600; }
  .facet-opt svg{ width:13px; height:13px; flex:none; }

  .domain-list{ display:flex; flex-direction:column; gap:1px; margin-top:2px; }
  .domain-item{
    display:flex; align-items:center; gap:9px; padding:8px 8px; border-radius:7px; border:none; background:none;
    cursor:pointer; font-size:13.5px; color:var(--ink-soft); text-align:left; border-left:2px solid transparent;
  }
  .domain-item:hover{ background:var(--card); }
  .domain-item svg{ width:15px; height:15px; flex:none; }
  .domain-item .lbl{ flex:1; }
  .cnt{
    font-size:11.5px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:1px 7px;
    color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none;
  }
  .domain-item.is-active{ background:var(--accent-soft-bg); border-left-color:var(--accent); color:var(--ink); }
  .domain-item.is-active .cnt, .legend-item.is-active .cnt{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

  /* ---------------- stage ---------------- */
  .stage{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
  .topbar{ padding:22px 30px 16px; border-bottom:1px solid var(--line); }
  .topbar h1{ margin:0; font-family:var(--font-display); font-size:25px; font-weight:700; letter-spacing:-.02em; }
  .topbar h1 a{ color:inherit; text-decoration:none; }
  .topbar .count{ margin-top:4px; font-size:13px; color:#80745d; }

  .topbar-cluster{
    padding:14px 30px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .cluster-by{ display:flex; align-items:center; gap:10px; }
  .cluster-by > span{ font-size:12.5px; color:#7d715b; }
  .axis-pill{
    display:flex; gap:2px; background:var(--card); border:1px solid var(--line-strong); border-radius:999px; padding:3px;
  }
  .axis-pill button{
    border:none; background:transparent; padding:7px 15px; border-radius:999px; font-size:13.5px; cursor:pointer; color:var(--ink-soft);
  }
  .axis-pill button.is-active{ background:var(--accent-soft-bg); color:var(--ink); font-weight:600; }
  .canvas-tools{ margin-left:auto; display:flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line-strong); border-radius:8px; padding:4px; }
  .canvas-tools button{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:none; background:none;
    border-radius:5px; cursor:pointer; color:var(--ink-soft); font-size:14px;
  }
  .canvas-tools button:hover{ background:var(--paper); color:var(--ink); }
  .canvas-tools button svg{ width:14px; height:14px; }

  /* ---------------- cluster canvas ---------------- */
  .cluster-view{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; background:var(--canvas);
    background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px; }
  .cluster-view::after{
    content:''; position:absolute; right:-10%; bottom:-15%; width:55%; height:70%; border-radius:50%;
    background: radial-gradient(circle, var(--dot), transparent 70%); pointer-events:none;
  }
  .canvas-viewport{ position:absolute; inset:0; overflow:hidden; cursor:grab; }
  .canvas-viewport.is-panning{ cursor:grabbing; }

  .hover-card{
    position:absolute; left:20px; bottom:20px; max-width:340px; z-index:6;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; box-shadow:var(--shadow-panel); pointer-events:none;
  }
  .hover-card-badge{
    display:inline-flex; align-items:center; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px; background:var(--accent-soft-bg); color:var(--accent); margin-bottom:8px;
  }
  .hover-card-title{ font-size:16px; font-weight:600; margin-bottom:4px; }
  .hover-card-sub{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-bottom:9px; }
  .hover-card-meta{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:#776b53; border-top:1px solid var(--line); padding-top:8px; }
  .hover-card-meta b{ color:var(--ink-soft); font-weight:600; }
  .canvas-box{
    position:absolute; left:50%; top:50%; width:1180px; height:720px; margin:-360px 0 0 -590px;
    transform-origin:center center; transition: transform .12s ease-out;
  }
  .connections{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .connections line{ stroke:var(--accent); stroke-width:1.4; vector-effect:non-scaling-stroke; opacity:.55; transition: opacity .18s ease, stroke .18s ease; }

  .node{
    position:absolute; width:38px; height:38px; padding:0; border:none; background:none; cursor:pointer;
    transform:translate(-50%,-50%); transition: transform .15s ease, opacity .2s ease;
  }
  .node svg{ width:100%; height:100%; }
  .node:hover, .node:focus-visible{ transform:translate(-50%,-50%) scale(1.3); z-index:5; }
  .node:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:50%; }
  .node::after{
    content:attr(data-label); position:absolute; bottom:120%; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--paper); font-size:11.5px; padding:6px 10px; border-radius:5px;
    white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; font-family:var(--font-mono);
    box-shadow:0 6px 16px rgba(0,0,0,.2);
  }
  .node:hover::after, .node:focus-visible::after{ opacity:1; }

  .knode{
    position:absolute; white-space:nowrap; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong);
    background:var(--card); font-size:11.5px; font-weight:500; letter-spacing:.01em; color:#514835; cursor:pointer;
    transform:translate(-50%,-50%); transition: opacity .2s ease, transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
  }
  .knode:hover, .knode:focus-visible{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft-bg); transform:translate(-50%,-50%) scale(1.08); z-index:5; }
  .knode:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .knode.is-pinned{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft-bg); font-weight:600; }

  .pipeline-node,.story-node{ width:142px; min-height:58px; padding:9px 11px; border:1px solid currentColor; border-radius:10px; background:rgba(255,255,255,.97); box-shadow:0 8px 18px -14px rgba(28,22,12,.45); display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px; text-align:left; }
  .pipeline-node,.story-node{ width:154px; min-height:64px; padding:10px 12px; box-shadow:0 3px 8px rgba(35,27,14,.10),0 14px 24px -20px rgba(28,22,12,.5); }
  .pipeline-node svg,.story-node svg{ width:24px; height:24px; }.pipeline-node:hover,.pipeline-node:focus-visible,.story-node:hover,.story-node:focus-visible{ transform:translate(-50%,-50%) scale(1.04); }
  .node-copy{ min-width:0; color:var(--ink); }.node-copy b{ display:block; font:600 12px/1.3 var(--font-sans); }.node-copy small{ display:block; margin-top:3px; font:9.5px/1.3 var(--font-mono); color:#6f624c; text-transform:uppercase; }
  .pipeline-node[data-status="planned"]{ background:var(--status-partial-bg); border-style:dashed; }
  .connections .pipeline-edge,.connections .story-edge{ stroke:var(--line-strong); stroke-width:1.25; opacity:.52; transition:opacity .15s ease,stroke-width .15s ease; }
  .connections .pipeline-edge{ stroke:var(--accent); opacity:.36; marker-end:url(#pipeline-arrow); }.connections .pipeline-edge.is-planned{ stroke:var(--status-partial); stroke-dasharray:4 4; marker-end:url(#pipeline-arrow-planned); }
  .connections .pipeline-edge.is-active,.connections .story-edge.is-active{ stroke:var(--accent); stroke-width:2.3; opacity:.96; }.connections .pipeline-edge.is-muted,.connections .story-edge.is-muted{ opacity:.09; }
  .map-annotation{ position:absolute; z-index:3; pointer-events:none; }.cluster-map-heading{ left:30px; top:18px; max-width:780px; }.cluster-map-heading h2{ margin:0; font-family:var(--font-display); font-size:27px; line-height:1.15; }.cluster-map-heading p{ margin:6px 0 0; font-size:12.5px; line-height:1.55; color:#5f5544; }
  .keyword-core-label{ left:50%; top:50%; transform:translate(-50%,-50%); width:165px; text-align:center; padding:14px; border-radius:50%; color:#625744; font:11.5px/1.5 var(--font-mono); background:rgba(253,252,249,.94); border:1px solid var(--line-strong); }

  /* ---------------- legend (right) ---------------- */
  .legend{ position:relative; flex:0 0 260px; height:100%; border-left:1px solid var(--line); padding:22px 20px; overflow-y:auto; transition:flex-basis .2s ease,padding .2s ease; }
  .legend-toggle{ position:absolute; top:13px; right:12px; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:7px; background:var(--card); color:var(--ink-soft); cursor:pointer; z-index:2; }
  .legend.is-collapsed{ flex-basis:48px; padding:14px 9px; overflow:hidden; }.legend.is-collapsed > :not(.legend-toggle){ display:none; }.legend.is-collapsed .legend-toggle{ right:9px; transform:rotate(180deg); }
  .legend h4{ margin:0 0 14px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:#7d715b; }
  .legend-list{ display:flex; flex-direction:column; gap:2px; }
  .legend-item{
    display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:7px; border:none; background:none;
    cursor:pointer; font-size:13.5px; color:var(--ink-soft); text-align:left; width:100%;
  }
  .legend-item:hover{ background:var(--card); }
  .legend-symbol{ width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:7px; background:color-mix(in srgb,currentColor 11%,white); border:1px solid color-mix(in srgb,currentColor 24%,white); }.legend-symbol svg{ width:16px; height:16px; stroke-width:2; }
  .legend-item > svg{ width:17px; height:17px; flex:none; stroke-width:2; }
  .legend-item.is-active{ background:var(--accent-soft-bg); color:var(--ink); font-weight:600; }
  .legend-hint{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:#80745d; line-height:1.65;
  }

  /* ---------------- story experience ---------------- */
  .tree-list{ flex:1 1 auto; min-height:0; padding:0 30px 88px; overflow-y:auto; scroll-behavior:smooth; }
  .story-intro{
    position:relative; overflow:hidden; margin:24px 0 34px; padding:34px 390px 34px 38px; border-radius:18px;
    color:#fff; background:linear-gradient(125deg,#173b32 0%,#2f6f5e 62%,#72a58d 130%);
    box-shadow:0 24px 55px -35px rgba(20,65,52,.65);
  }
  .story-intro::after{ content:''; position:absolute; z-index:0; width:340px; height:340px; right:-100px; top:-190px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 48px rgba(255,255,255,.04),0 0 0 96px rgba(255,255,255,.03); }
  .story-intro > :not(.hero-cell){ position:relative; z-index:2; }
  .hero-cell{
    position:absolute; z-index:1; right:48px; top:52%; width:min(26vw,310px); height:auto;
    transform:translateY(-50%) rotate(5deg); object-fit:contain; pointer-events:none;
    filter:drop-shadow(0 24px 24px rgba(7,34,28,.28));
  }
  .story-kicker{ margin:0 0 10px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.82; }
  .story-intro h2{ max-width:720px; margin:0; font-family:var(--font-display); font-size:clamp(28px,3.2vw,44px); line-height:1.08; letter-spacing:-.035em; }
  .story-intro > p:last-of-type{ max-width:740px; margin:14px 0 0; font-size:14px; line-height:1.7; opacity:.9; }
  .story-contact{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:18px 0 0; font-size:13.5px; }
  .story-contact a{ display:inline-flex; align-items:center; padding:6px 13px; border-radius:7px; background:#fff; color:#173b32; font-family:var(--font-mono); font-size:12.5px; font-weight:600; text-decoration:none; }
  .story-contact a:hover{ background:#e3efe8; }
  .story-stats{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; }
  .story-stat{ display:grid; gap:1px; }
  .story-stat strong{ font-size:19px; font-weight:600; }
  .story-stat span{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.78; }
  .story-spine{ position:sticky; top:0; z-index:12; display:grid; grid-template-columns:repeat(6,1fr); margin:0 -30px 36px; padding:11px 30px; background:rgba(253,252,249,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  .spine-step{ position:relative; border:0; background:none; padding:22px 6px 5px; cursor:pointer; color:#80745d; font-size:10.5px; white-space:nowrap; }
  .spine-step::before{ content:''; position:absolute; left:50%; top:5px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid currentColor; transform:translateX(-50%); z-index:2; }
  .spine-step::after{ content:''; position:absolute; left:0; right:0; top:10px; height:1px; background:var(--line-strong); }
  .spine-step:first-child::after{ left:50%; }.spine-step:last-child::after{ right:50%; }
  .spine-step:hover,.spine-step.is-active{ color:var(--accent); font-weight:600; }
  .spine-step.is-active::before{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft-bg); }
  .story-section{ --h:160; position:relative; margin:0 0 54px; scroll-margin-top:78px; }
  .story-section-head{ display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:start; gap:14px; margin-bottom:19px; }
  .section-number{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:hsl(var(--h) var(--stage-s) var(--stage-l)); background:hsl(var(--h) var(--stage-s) var(--stage-bg-l)); border:1px solid hsl(var(--h) var(--stage-s) var(--stage-border-l)); font-size:12px; font-weight:700; }
  .story-section-head h2{ margin:0; font-family:var(--font-display); font-size:25px; line-height:1.15; }
  .story-section-head p{ margin:5px 0 0; max-width:800px; font-size:13px; line-height:1.55; color:var(--ink-soft); }
  .section-count{ font-size:11px; color:#80745d; border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
  .chapter-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
  .tcard{
    grid-column:span 4; min-height:210px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px;
    cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow-card); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .tcard:hover{ transform:translateY(-3px); border-color:hsl(var(--h) var(--stage-s) var(--stage-border-l)); box-shadow:0 18px 35px -24px rgba(30,20,5,.45); }
  .tcard:focus-visible,.spine-step:focus-visible{ outline:3px solid var(--accent-soft-border); outline-offset:3px; }
  .tcard.is-feature{ grid-column:span 7; min-height:244px; padding:25px; background:linear-gradient(145deg,#fff 55%,hsl(var(--h) 45% 96%)); }
  .chapter-problem .tcard:only-child{ grid-column:1/-1; min-height:auto; }
  .tcard.is-side{ grid-column:span 5; }
  .chapter-gaps .tcard{ grid-column:span 4; border-top:3px solid hsl(var(--h) var(--stage-s) var(--stage-l)); }
  .chapter-gaps .tcard:first-child{ grid-column:1/-1; min-height:auto; display:grid; grid-template-columns:minmax(230px,.8fr) 1.5fr auto; align-items:center; }
  .gap-index{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:hsl(var(--h) var(--stage-s) var(--stage-bg-l)); color:hsl(var(--h) var(--stage-s) var(--stage-l)); font-weight:700; font-size:11px; }
  .chapter-built .tcard{ grid-column:span 6; }
  .chapter-results .tcard{ grid-column:span 6; background:linear-gradient(180deg,#fff,#f6fbf9); }
  .chapter-landscape .tcard{ grid-column:span 6; }
  .chapter-landscape .tcard:only-child{ grid-column:1/-1; min-height:auto; }
  .chapter-ask .tcard{ grid-column:1/-1; min-height:260px; color:#fff; border:0; background:linear-gradient(120deg,#173b32,#2f6f5e); padding:34px; }
  .chapter-ask .tcard-title{ font-size:27px; }.chapter-ask .tcard-sub,.chapter-ask .tcard-summary{ color:rgba(255,255,255,.75); max-width:820px; }.chapter-ask .mchip{ color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.24); }.chapter-ask .tcard-cta{ color:#173b32; background:#fff; border-color:#fff; }
  .pipeline-visual{ grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:2px; border:1px solid var(--accent-soft-border); border-radius:15px; background:var(--accent-soft-bg); overflow:hidden; }
  .pipe-step{ position:relative; padding:19px 20px; border-right:1px solid var(--accent-soft-border); }
  .pipe-step:last-child{ border-right:0; }.pipe-step b{ display:block; font-size:13px; }.pipe-step span{ display:block; margin-top:3px; font-size:10.5px; color:var(--ink-soft); }
  .pipe-step:not(:last-child)::after{ content:'\2192'; position:absolute; right:-8px; top:19px; z-index:2; color:var(--accent); background:var(--accent-soft-bg); }
  .metric-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:4px 0 2px; }
  .metric{ padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--paper); }
  .metric strong{ display:block; font-size:19px; color:var(--accent); }.metric span{ display:block; font-size:10px; color:#776b53; text-transform:uppercase; }
  .tcard-head{ display:flex; align-items:flex-start; gap:12px; }
  .tcard-head svg{ width:18px; height:18px; flex:none; margin-top:2px; }
  .tcard-title{ font-family:var(--font-display); font-size:20px; font-weight:700; line-height:1.25; }
  .tcard-sub{ font-size:12.5px; line-height:1.5; color:#80745d; margin-top:2px; }
  .kind-badge{ margin-left:auto; font-size:11px; letter-spacing:.04em; text-transform:uppercase; border-radius:5px; padding:4px 8px; flex:none; white-space:nowrap; }
  .kind-badge[data-kind="motivation"]{ color:var(--kind-motivation); background:var(--kind-motivation-bg); border:1px solid var(--kind-motivation-border); }
  .kind-badge[data-kind="gap"]{ color:var(--status-partial); background:var(--status-partial-bg); border:1px solid var(--status-partial-border); }
  .kind-badge[data-kind="built"]{ color:var(--status-built); background:var(--status-built-bg); border:1px solid var(--status-built-border); }
  .kind-badge[data-kind="evidence"]{ color:var(--kind-evidence); background:var(--kind-evidence-bg); border:1px solid var(--kind-evidence-border); }
  .kind-badge[data-kind="context"]{ color:var(--kind-context); background:var(--kind-context-bg); border:1px solid var(--kind-context-border); }
  .kind-badge[data-kind="ask"]{ color:var(--kind-ask); background:var(--kind-ask-bg); border:1px solid var(--kind-ask-border); }
  .tcard-summary{ font-size:13.5px; color:#5f5544; line-height:1.65; margin:2px 0; }
  .tcard-mods{ display:flex; gap:6px; flex-wrap:wrap; }
  .mchip{
    display:flex; align-items:center; gap:4px; font-size:11.5px; color:#776b53;
    border:1px solid var(--line); border-radius:5px; padding:3px 7px;
  }
  .mchip svg{ width:11px; height:11px; }
  .mchip.is-section{ font-weight:600; }
  .tcard-cta{
    align-self:flex-start; margin-top:auto; display:flex; align-items:center; gap:6px; font-size:12.5px;
    border:1px solid var(--ink); border-radius:7px; padding:5px 11px; background:var(--paper);
  }
  .tcard-cta svg{ width:12px; height:12px; }

  /* ---------------- authored cluster maps ---------------- */
  .system-view{ height:100%; overflow:auto; scrollbar-gutter:stable; padding:22px 30px 54px; background:var(--canvas); background-image:radial-gradient(var(--dot) 1px,transparent 1px); background-size:22px 22px; }
  .map-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 auto 18px; max-width:1120px; }
  .map-heading h2{ margin:0; font-family:var(--font-display); font-size:27px; line-height:1.15; }
  .map-heading p{ max-width:680px; margin:5px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.6; }
  .map-key{ flex:none; font:10px var(--font-mono); color:var(--ink-faint); }
  .architecture{ display:grid; gap:7px; max-width:1120px; margin:auto; }
  .arch-layer{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:14px; align-items:stretch; }
  .layer-label{ display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line-strong); padding-right:16px; text-align:right; }
  .layer-label b{ font:600 10px var(--font-mono); letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }
  .layer-label span{ margin-top:3px; font:10px var(--font-mono); color:var(--ink-faint); }
  .layer-content{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .layer-content.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }.layer-content.four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .system-node{ position:relative; min-width:0; padding:12px 14px; border:1px solid #ddd3bd; border-left-width:3px; border-radius:11px; background:#fff; box-shadow:0 2px 5px rgba(40,30,10,.07),0 10px 24px -20px rgba(40,30,10,.32); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,opacity .16s ease; }
  .system-node:hover{ transform:translateY(-2px); border-color:var(--accent); }.system-node:focus-visible{ outline:3px solid var(--accent-soft-border); outline-offset:2px; }
  .system-node[data-status="implemented"]{ border-left-color:#2f7d4f; }.system-node[data-status="experiment"]{ border-left-color:#1f6e82; }.system-node[data-status="planned"]{ border-left-color:#a3701a; background:#fffaf1; }.system-node[data-status="context"]{ border-left-color:#6b3fa0; }.system-node.is-dim{ opacity:.52; filter:saturate(.72); }.system-node.is-static{ cursor:default; }.system-node.is-static:hover{ transform:none; }
  .node-top{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }.node-type{ font:9px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .status-dot{ width:7px; height:7px; border-radius:50%; flex:none; }.status-dot.implemented{ background:#2f7d4f; }.status-dot.experiment{ background:#1f6e82; }.status-dot.planned{ background:#a3701a; }.status-dot.context{ background:#6b3fa0; }
  .system-node strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:17px; line-height:1.2; }.system-node small{ display:block; margin-top:4px; color:#625744; font-size:11px; line-height:1.4; }.flow-arrow{ display:grid; grid-template-columns:132px 1fr; gap:14px; height:16px; color:var(--accent); }.flow-arrow span:last-child{ display:grid; place-items:center; font-size:17px; }
  .fusion-node{ color:#fff; background:linear-gradient(120deg,#215447,#3f806d); border-color:#215447; }.fusion-node small,.fusion-node .node-type{ color:rgba(255,255,255,.72); }.fusion-node .status-dot{ box-shadow:0 0 0 2px rgba(255,255,255,.28); }
  .evidence-map{ display:grid; grid-template-columns:1fr 40px 1.3fr 40px 1.3fr; gap:10px; align-items:stretch; max-width:1120px; margin:auto; }
  .evidence-column{ display:flex; flex-direction:column; gap:10px; }.evidence-column > h3{ margin:0 0 3px; font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
  .evidence-arrow{ display:grid; place-items:center; color:var(--accent); font-size:22px; }.evidence-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:10px; }.evidence-metrics span{ padding:8px; border-radius:7px; background:var(--accent-soft-bg); text-align:center; font:9px var(--font-mono); color:var(--ink-soft); }.evidence-metrics b{ display:block; font-size:16px; color:var(--accent); }
  .map-caution{ max-width:1120px; margin:16px auto 0; padding:12px 15px; border:1px solid var(--status-partial-border); border-radius:9px; background:var(--status-partial-bg); font-size:11px; line-height:1.55; }
  .concept-map{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; max-width:1120px; margin:auto; position:relative; }
  .concept-column{ position:relative; display:flex; flex-direction:column; gap:9px; }.concept-column:not(:last-child)::after{ content:'→'; position:absolute; right:-18px; top:50%; color:var(--accent); font-size:18px; }
  .concept-column h3{ margin:0 0 2px; font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
  .relation-strip{ max-width:1120px; margin:20px auto 0; display:flex; flex-wrap:wrap; gap:7px; }.relation-strip span{ padding:6px 9px; border:1px solid var(--line); border-radius:999px; background:var(--card); font:9.5px var(--font-mono); color:var(--ink-soft); }
  .status-legend{ display:flex; flex-direction:column; gap:9px; }.status-row{ display:flex; align-items:center; gap:8px; font:11px var(--font-mono); color:var(--ink-soft); }.status-note{ margin-top:15px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-faint); line-height:1.55; }

  .empty{ text-align:center; padding:70px 20px; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:12px; }
  .empty button{ margin-top:4px; border:1px solid var(--ink); border-radius:7px; padding:7px 14px; background:var(--paper); cursor:pointer; }

  /* ---------------- overlay ---------------- */
  .scrim{
    position:fixed; inset:0; background:var(--scrim); display:flex; align-items:flex-start; justify-content:center;
    padding:5vh 20px; overflow-y:auto; z-index:100; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .scrim.is-open{ opacity:1; pointer-events:auto; }
  .panel{
    background:var(--card); border-radius:12px; max-width:min(920px, 94vw); width:100%; box-shadow:var(--shadow-panel);
    padding:32px 36px 38px; position:relative; transform:translateY(10px); transition:transform .2s ease;
    border-top:4px solid hsl(var(--h) var(--stage-s) var(--stage-l));
  }
  .scrim.is-open .panel{ transform:none; }
  .icon-btn{
    position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
    background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  }
  .icon-btn svg{ width:14px; height:14px; }
  .icon-btn:hover{ background:var(--accent-soft-bg); color:var(--accent); }
  .panel-tags{ display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
  .stage-pill{
    font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;
    color:hsl(var(--h) var(--stage-s) var(--stage-l)); background:hsl(var(--h) var(--stage-s) var(--stage-bg-l));
    border:1px solid hsl(var(--h) var(--stage-s) var(--stage-border-l)); display:inline-flex; align-items:center; gap:5px;
  }
  .stage-pill svg{ width:11px; height:11px; }
  .panel h2{ margin:0; font-family:var(--font-display); font-size:27px; line-height:1.2; padding-right:36px; font-weight:700; }
  .panel .subtitle{ color:var(--ink-soft); font-size:13px; margin-top:6px; font-style:italic; }
  .panel-section{ margin-top:22px; }
  .panel-section h4{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0 0 9px; font-weight:600; }
  .panel-section p{ margin:0; color:var(--ink); font-size:13px; line-height:1.7; }
  .obj-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .obj-list li{ display:flex; gap:9px; font-size:12.5px; line-height:1.55; }
  .obj-list li::before{ content:''; width:6px; height:6px; margin-top:6px; flex:none; background:hsl(var(--h) var(--stage-s) var(--stage-l)); }
  .evidence-box{ background:var(--accent-soft-bg); border:1px solid var(--accent-soft-border); border-radius:8px; padding:13px 15px; font-size:12.5px; line-height:1.6; color:var(--ink); }
  .caution-box{ background:var(--status-partial-bg); border:1px solid var(--status-partial-border); border-radius:8px; padding:13px 15px; font-size:12.5px; line-height:1.6; color:var(--ink); }
  .source-line{ color:#776b53; font-size:12.5px; line-height:1.65; }

  footer{ border-top:1px solid var(--line); padding:16px 30px; font-size:11.5px; color:#80745d; display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; }
  footer a{ color:inherit; text-underline-offset:2px; }
  footer .copyright{ flex-basis:100%; }

  @media (max-width: 900px){
    html,body{ width:100%; max-width:100%; overflow-x:hidden; }
    .app{ flex-direction:column; height:auto; }
    .sidebar{ flex:none; width:100%; max-width:100vw; height:auto; border-right:none; border-bottom:1px solid var(--line); overflow-x:hidden; gap:12px; padding:16px 18px; }
    .brand{ flex-direction:row; justify-content:center; padding:9px 12px 13px; }.brand-mark{ width:38px; height:38px; }.brand-text{ text-align:left; }
    .domain-list{ display:grid; grid-template-columns:1fr 1fr; gap:3px; }.domain-item{ min-width:0; }.domain-item .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .view-toggle button{ min-width:0; font-size:11px; white-space:nowrap; }
    .legend{ flex:none; width:100%; height:auto; border-left:none; border-top:1px solid var(--line); }
    .legend.is-collapsed{ width:100%; height:48px; flex-basis:48px; }
    .stage{ width:100%; max-width:100vw; min-height:70vh; overflow-x:hidden; }
    .topbar{ padding:18px; }.topbar .count{ white-space:normal; }
    .cluster-view{ height:70vh; }
    .tree-list{ width:100%; max-width:100vw; padding-left:18px; padding-right:18px; overflow-x:hidden; }.story-spine{ display:flex; width:calc(100% + 36px); margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; overflow-x:auto; }.spine-step{ flex:0 0 118px; }
    .story-section-head{ grid-template-columns:42px minmax(0,1fr); }.story-section-head .section-count{ grid-column:2; justify-self:start; }.story-section-head h2,.story-section-head p,.story-intro h2{ overflow-wrap:anywhere; }
    .tcard,.tcard.is-feature,.tcard.is-side,.chapter-gaps .tcard,.chapter-gaps .tcard:first-child,.chapter-built .tcard,.chapter-results .tcard,.chapter-landscape .tcard{ grid-column:1/-1; display:flex; }
    .pipeline-visual{ grid-template-columns:1fr 1fr; }.pipe-step:nth-child(2){ border-right:0; }.story-intro{ padding:28px 230px 28px 24px; }.hero-cell{ right:18px; width:205px; opacity:.82; }
  }
  @media (max-width: 520px){
    .domain-list{ grid-template-columns:1fr 1fr; }.domain-item{ padding:6px; font-size:11px; }.domain-item .cnt{ display:none; }
    .story-intro{ margin-top:18px; padding:28px 24px 190px; }.hero-cell{ width:205px; right:-16px; top:auto; bottom:-33px; transform:rotate(4deg); opacity:.72; }.story-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
    .pipeline-visual{ grid-template-columns:1fr; }.pipe-step{ border-right:0; border-bottom:1px solid var(--accent-soft-border); }.pipe-step:last-child{ border-bottom:0; }.pipe-step:not(:last-child)::after{ content:'\2193'; top:auto; right:18px; bottom:-10px; }
    .metric-row{ grid-template-columns:1fr; }.tcard{ padding:17px; }.kind-badge{ margin-left:0; }.tcard-head{ flex-wrap:wrap; }
    .system-view{ padding:22px 18px 55px; }.arch-layer{ grid-template-columns:1fr; }.layer-label{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 6px; text-align:left; }.flow-arrow{ grid-template-columns:1fr; }.flow-arrow span:first-child{ display:none; }.evidence-map{ grid-template-columns:1fr; }.evidence-arrow{ transform:rotate(90deg); }.concept-map{ grid-template-columns:1fr 1fr; }.concept-column::after{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }