.visual { display:grid; gap:14px; }
    .visual :where(ol,ul) { margin:0; padding:0; list-style:none; }
    .visual code { font-weight:700; }
    .eyebrow { color:var(--track-strong); font-size:12px; font-weight:850; letter-spacing:.02em; }
    .step-no { display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--track); color:var(--paper); font-size:12px; font-weight:900; }
    .flow { display:flex; align-items:stretch; gap:9px; }
    .flow > li { display:flex; flex:1 1 0; min-width:0; }
    .flow article { grid-template-columns:auto minmax(0,1fr); align-items:start; width:100%; }
    .flow article > div { display:grid; gap:5px; }
    .connector { display:grid; place-items:center; align-self:center; flex:0 0 28px; width:28px; height:28px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--track-strong); font-size:17px; font-weight:900; }
    .hub { display:grid; grid-template-columns:minmax(180px,.72fr) 38px minmax(0,1.5fr); gap:12px; align-items:stretch; }
    .hub-core { display:grid; place-items:center; align-content:center; gap:7px; padding:20px; border:2px solid var(--track); border-radius:8px; background:var(--track-soft); text-align:center; }
    .hub-core strong { color:var(--track-strong); font-size:19px; }
    .hub-core span { color:var(--muted); font-size:12px; }
    .hub-link { display:grid; place-items:center; color:var(--track-strong); font-size:25px; font-weight:900; }
    .hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .hub-grid article { border-left:3px solid color-mix(in srgb,var(--track) 70%,var(--line))!important; }
    .compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .compare article { position:relative; border-top:3px solid var(--track)!important; background:var(--paper)!important; }
    .compare article[data-tone="danger"] { border-top-color:var(--red)!important; }
    .compare article[data-tone="success"] { border-top-color:var(--green)!important; }
    .facts { display:grid; gap:7px; }
    .facts li { display:grid; grid-template-columns:minmax(90px,.42fr) minmax(0,1fr); gap:10px; padding-top:7px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
    .facts li:first-child { padding-top:0; border-top:0; }
    .facts b { color:var(--text); }
    .hierarchy { display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
    .level { display:grid; grid-template-columns:minmax(108px,.32fr) minmax(0,1fr); gap:12px; align-items:center; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
    .level:nth-child(2) { margin-inline:28px; }
    .level:nth-child(3) { margin-inline:56px; }
    .level:nth-child(4) { margin-inline:84px; }
    .level strong { color:var(--track-strong); }
    .level span { color:var(--muted); font-size:12px; }
    .command { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--head); }
    .token { display:grid; gap:3px; min-width:110px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
    .token code { color:var(--track-strong); font-size:14px; }
    .token small { color:var(--muted); font-size:11px; }
    .token-arrow { color:var(--track-strong); font-weight:900; }
    .anatomy { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:10px; }
    .anatomy article { border-bottom:3px solid color-mix(in srgb,var(--track) 68%,var(--line))!important; }
    .fanout { display:grid; grid-template-columns:minmax(170px,.72fr) 42px minmax(0,1.5fr); gap:10px; align-items:stretch; }
    .source { display:grid; place-items:center; align-content:center; gap:7px; padding:18px; border:2px solid var(--track); border-radius:8px; background:var(--track-soft); text-align:center; }
    .source strong { color:var(--track-strong); font-size:17px; }
    .fanout-arrow { display:grid; place-items:center; color:var(--track-strong); font-size:25px; font-weight:900; }
    .targets { display:grid; gap:8px; }
    .targets article { grid-template-columns:minmax(105px,.38fr) minmax(0,1fr); align-items:center; }
    .state-line { display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow:hidden; }
    .state { position:relative; display:grid; gap:6px; min-height:108px; padding:14px; border-left:1px solid var(--line); }
    .state:first-child { border-left:0; }
    .state::before { content:attr(data-index); color:var(--track-strong); font-size:12px; font-weight:900; }
    .state strong { color:var(--text); }
    .state span { color:var(--muted); font-size:12px; }
    .state[data-tone="danger"] { background:var(--red-bg); }
    .state[data-tone="success"] { background:var(--green-bg); }
    .decision { display:grid; gap:12px; }
    .question { display:grid; place-items:center; gap:5px; padding:16px; border:2px solid var(--track); border-radius:8px; background:var(--track-soft); text-align:center; }
    .question strong { color:var(--track-strong); font-size:17px; }
    .branches { display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:10px; }
    .branches article { position:relative; border-top:3px solid var(--line)!important; background:var(--paper)!important; }
    .branches article[data-tone="success"] { border-top-color:var(--green)!important; }
    .branches article[data-tone="danger"] { border-top-color:var(--red)!important; }
    .branches article[data-tone="warning"] { border-top-color:var(--amber)!important; }
    .range { display:flex; min-height:112px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); }
    .segment { display:grid; place-items:center; align-content:center; flex:1 1 0; gap:5px; padding:12px 8px; border-left:1px solid var(--line); text-align:center; }
    .segment:first-child { border-left:0; }
    .segment strong { color:var(--text); }
    .segment span { color:var(--muted); font-size:12px; }
    .segment[data-tone="success"] { background:var(--green-bg); }
    .segment[data-tone="danger"] { background:var(--red-bg); }
    .segment[data-tone="warning"] { background:var(--amber-bg); }
    .formula { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.1fr); gap:10px; align-items:stretch; }
    .formula article { display:grid!important; place-items:center; align-content:center!important; text-align:center; }
    .operator { display:grid; place-items:center; color:var(--track-strong); font-size:22px; font-weight:900; }
    .formula-result { border:2px solid var(--track)!important; background:var(--track-soft)!important; }
    .error-lane { display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:10px; }
    .error-lane article { border-top:3px solid var(--line)!important; }
    .error-lane article[data-state="failed"] { border-top-color:var(--red)!important; background:var(--red-bg)!important; }
    .error-lane article[data-state="passed"] { border-top-color:var(--green)!important; }
    .loop { display:grid; grid-template-columns:repeat(var(--count,4),minmax(0,1fr)); gap:10px; }
    .loop article { position:relative; }
    .loop article:not(:last-of-type)::after { content:"→"; position:absolute; right:-19px; top:50%; z-index:2; color:var(--track-strong); font-size:18px; font-weight:900; transform:translateY(-50%); }
    .loop-back { grid-column:1/-1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:var(--track-strong); font-size:12px; font-weight:800; }
    .loop-back::before,.loop-back::after { content:""; height:1px; background:var(--track); }
    @media(max-width:720px){
      .flow{display:grid}.flow>li{display:grid}.connector{justify-self:center;transform:rotate(90deg)}
      .hub,.fanout,.formula{grid-template-columns:1fr}.hub-link,.fanout-arrow,.operator{transform:rotate(90deg)}
      .hub-grid,.compare,.branches,.error-lane,.loop{grid-template-columns:1fr!important}
      .level:nth-child(n){margin-inline:0}.level{grid-template-columns:1fr}
      .state-line{grid-template-columns:1fr}.state{border-left:0;border-top:1px solid var(--line)}.state:first-child{border-top:0}
      .range{display:grid}.segment{border-left:0;border-top:1px solid var(--line)}.segment:first-child{border-top:0}
      .loop article::after{display:none}
    }
    @media(max-width:460px){.hub-grid{grid-template-columns:1fr}.targets article{grid-template-columns:1fr}.command{display:grid}.token{min-width:0}}