:root{
    --ink:#0E1B2E; --ink-2:#3F506A; --ink-3:#6B7A90;
    --paper:#EEF1F6; --surface:#FFFFFF; --surface-2:#F7F9FC;
    --line:#DCE2EC; --line-2:#E8ECF3;
    --spine:#4338CA;
    --s-f8:#7C3AED; --s-finance:#0E9F6E; --s-deskload:#E8820C;
    --s-prod:#0891B2; --s-crt:#E11D64; --s-tasky:#2563EB; --s-snippy:#64748B;
    --milestone:#C08A00;
    --r:14px; --r-sm:9px;
    --shadow:0 1px 2px rgba(14,27,46,.05), 0 8px 26px -14px rgba(14,27,46,.22);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px; margin:0 auto; padding:34px 22px 80px}
  h1,h2,h3{font-family:"Space Grotesk",sans-serif; letter-spacing:-.01em; margin:0}
  .mono{font-family:"IBM Plex Mono",monospace}

  header.top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 26px; margin-bottom:26px}
  .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--spine); font-weight:600; margin-bottom:9px}
  header.top h1{font-size:clamp(26px,4.4vw,40px); font-weight:600; line-height:1.02}
  header.top h1 span{color:var(--spine)}
  .subline{color:var(--ink-2); font-size:14.5px; margin-top:10px; max-width:56ch}
  .rangebox{margin-left:auto; text-align:right; border-left:2px solid var(--line); padding-left:20px; min-width:180px}
  .rangebox .lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
  .rangebox .val{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink); font-weight:500; margin-top:4px}

  nav.tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--line)}
  .tab{appearance:none; border:0; background:transparent; cursor:pointer; font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:500; color:var(--ink-2); padding:11px 15px 13px; border-radius:9px 9px 0 0; position:relative; letter-spacing:-.005em; transition:color .15s, background .15s}
  .tab:hover{color:var(--ink); background:var(--surface-2)}
  .tab[aria-selected="true"]{color:var(--spine)}
  .tab[aria-selected="true"]::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--spine); border-radius:2px}
  .tab .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); margin-right:7px}
  .tab[aria-selected="true"] .n{color:var(--spine)}

  .panel{display:none; animation:fade .35s ease both}
  .panel.on{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

  .shead{font-family:"Space Grotesk",sans-serif; font-size:15px; font-weight:600; color:var(--ink); margin:34px 0 15px; display:flex; align-items:center; gap:11px}
  .shead .mk{width:22px; height:3px; border-radius:2px; background:var(--spine); flex:none}
  .shead .sub{font-family:"Inter",sans-serif; font-weight:400; font-size:12.5px; color:var(--ink-3); margin-left:2px}

  /* ---------- gantt ---------- */
  .gantt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r)}
  .gantt{position:relative; min-width:900px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
  .g-head{display:grid; grid-template-columns:220px repeat(8,1fr); background:var(--surface-2); border-bottom:1px solid var(--line)}
  .g-head .corner{padding:13px 16px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; align-self:center}
  .wk{padding:11px 8px 12px; text-align:center; border-left:1px solid var(--line-2)}
  .wk .num{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px}
  .wk .dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); margin-top:3px; white-space:nowrap}
  .g-mile{display:grid; grid-template-columns:220px repeat(8,1fr); background:#FBFAF4; border-bottom:1px solid var(--line)}
  .g-mile .ml{padding:8px 16px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--milestone); font-weight:600; align-self:center}
  .mcell{border-left:1px solid var(--line-2); position:relative}
  .diamond{position:absolute; top:50%; right:-7px; width:14px; height:14px; transform:translateY(-50%) rotate(45deg); background:var(--milestone); border:2px solid #fff; box-shadow:0 0 0 1px var(--milestone); z-index:4}
  .lane{display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid var(--line-2)}
  .lane:last-child{border-bottom:0}
  .lane-label{padding:14px 14px 14px 16px; display:flex; align-items:flex-start; gap:10px}
  .dot{width:11px; height:11px; border-radius:3px; margin-top:3px; flex:none}
  .lane-label .nm{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px; line-height:1.2}
  .lane-label .ct{font-size:11px; color:var(--ink-3); margin-top:2px}
  .track{display:grid; grid-template-columns:repeat(8,1fr); grid-auto-rows:38px; gap:6px 0; padding:9px 0; align-content:center}
  .bar{margin:0 4px; border-radius:8px; padding:0 9px; display:flex; align-items:center; font-size:11px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; box-shadow:0 1px 3px rgba(14,27,46,.16); transform-origin:left center}
  .bar.ghost{background:transparent!important; color:var(--ink-2); border:1.5px dashed currentColor; box-shadow:none}
  .bar.mut{background:transparent!important; color:var(--ink-3); border:1.5px dashed var(--ink-3); box-shadow:none; font-style:italic}
  .bar.soft{opacity:.82}
  .anim .bar{animation:grow .55s cubic-bezier(.2,.7,.2,1) both}
  @keyframes grow{from{transform:scaleX(.4); opacity:0} to{transform:scaleX(1); opacity:1}}

  .legend{display:flex; flex-wrap:wrap; gap:14px 20px; margin:16px 2px 0; font-size:12.5px; color:var(--ink-2)}
  .legend .li{display:flex; align-items:center; gap:7px}
  .legend .sw{width:12px; height:12px; border-radius:3px}
  .legend .sw.mi{background:var(--milestone); border-radius:0; transform:rotate(45deg); width:10px; height:10px}
  .legend .sw.gh{background:transparent; border:1.5px dashed var(--ink-3)}
  .testnote{margin:13px 2px 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); max-width:86ch}
  .testnote b{color:var(--ink-2); font-weight:600}

  .mstones{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
  .mstone{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:15px 16px; box-shadow:var(--shadow); position:relative}
  .mstone::before{content:""; position:absolute; top:15px; right:15px; width:11px; height:11px; background:var(--milestone); transform:rotate(45deg)}
  .mstone .wkm{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--milestone); font-weight:600; letter-spacing:.06em}
  .mstone .dtm{font-size:11px; color:var(--ink-3); margin:2px 0 9px}
  .mstone ul{margin:0; padding-left:16px}
  .mstone li{font-size:13px; color:var(--ink); margin:4px 0}

  .tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
  .tool{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; border-top:4px solid var(--tc); display:flex; flex-direction:column}
  .tool h3{font-size:17px; display:flex; align-items:center; justify-content:space-between; gap:10px}
  .tool .badge{font-size:10px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:20px; border:1px solid; white-space:nowrap}
  .badge.proto{color:#0E9F6E; border-color:#9FE3C8; background:#EAFAF3}
  .badge.noproto{color:#B4530A; border-color:#F0C79B; background:#FDF3E8}
  .badge.neutral{color:#4338CA; border-color:#CFC8F4; background:#F1EFFC}
  .tool .aud{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); margin:9px 0 12px; letter-spacing:.02em}
  .tool p.desc{font-size:13.5px; color:var(--ink-2); margin:0 0 14px}
  .tool .plan{margin-top:auto; border-top:1px dashed var(--line); padding-top:12px}
  .tool .plan .pl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:6px}
  .tool .plan .pv{font-size:13px; color:var(--ink)}
  .tool .plan .pv .wtag{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tc); font-weight:600}

  .wtl{display:grid}
  .wrow2{display:grid; grid-template-columns:46px 1fr}
  .rail{position:relative; display:flex; justify-content:center}
  .rail::before{content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--line)}
  .wrow2:first-child .rail::before{top:22px}
  .wrow2:last-child .rail::before{bottom:calc(100% - 30px)}
  .knob{position:relative; z-index:1; margin-top:19px; width:15px; height:15px; border-radius:50%; background:var(--surface); border:3px solid var(--spine); box-shadow:0 0 0 4px var(--paper)}
  .wrow2.mile .knob{background:var(--milestone); border-color:var(--milestone); border-radius:2px; transform:rotate(45deg)}
  .wcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:15px 18px; margin-bottom:14px}
  .wrow2.mile .wcard{border-color:#EAD9A6; box-shadow:0 1px 2px rgba(192,138,0,.07), 0 10px 26px -15px rgba(192,138,0,.4)}
  .wch{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
  .wch .wn{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:16.5px}
  .wch .wd{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
  .wch .mb{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.05em; color:var(--milestone); background:#FBF3DC; border:1px solid #EAD9A6; padding:2px 8px; border-radius:20px}
  .witems{margin-top:12px; display:grid; gap:8px}
  .witem{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink)}
  .witem .tag{flex:none; font-size:10.5px; font-weight:600; color:#fff; padding:2px 9px; border-radius:20px; margin-top:1px; min-width:88px; text-align:center}

  .flow{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:22px; margin-bottom:16px}
  .flow h3{font-size:16px; margin-bottom:4px}
  .flow .sub{font-size:13px; color:var(--ink-3); margin-bottom:18px}
  .chain{display:flex; flex-wrap:wrap; align-items:stretch; gap:0}
  .node{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px; min-width:130px}
  .node.spine{background:#F1EFFC; border-color:#CFC8F4}
  .node .nt{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px}
  .node .nw{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); margin-top:3px}
  .arrow{align-self:center; padding:0 10px; color:var(--spine); font-size:18px; font-weight:700}
  .depnote{font-size:13px; color:var(--ink-2); margin-top:14px; padding-left:14px; border-left:2px solid var(--line)}

  .foot{margin-top:34px; font-size:12px; color:var(--ink-3); text-align:center; line-height:1.6}
  .foot .mono{color:var(--ink-2)}

  @media (max-width:640px){
    .wrap{padding:24px 14px 60px}
    .rangebox{margin-left:0; border-left:0; padding-left:0; text-align:left}
    .wrow2{grid-template-columns:34px 1fr}
    .witem .tag{min-width:78px}
  }
  @media (prefers-reduced-motion:reduce){ .panel,.anim .bar{animation:none!important} }
  :focus-visible{outline:2.5px solid var(--spine); outline-offset:2px; border-radius:4px}