/* =====================================================================
   Dreamsmith Labs — field guide chrome.
   Shared by every guide page: header, depth dial, rail, cards, code,
   glossary, and the interactive board used by the MCP lab.
   ===================================================================== */
:root{
    --bg0:#050510; --bg1:#020208;
    --text:rgba(255,255,255,.95); --muted:rgba(230,235,240,.80); --muted2:rgba(200,210,220,.60);
    --line:rgba(255,255,255,.12); --glass:rgba(10,15,25,.72);
    --a:#2ED0C0; --b:#5EECD0; --d:#34D399; --warn:#FBBF24; --violet:#A78BFA;
    --radius:16px;
    --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --ease:cubic-bezier(.2,.8,.2,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:90px}
  body{
    margin:0; font-family:var(--font); color:var(--text); line-height:1.65;
    background:
      radial-gradient(1000px 600px at 12% -8%, rgba(46,208,192,.10), transparent 60%),
      radial-gradient(900px 500px at 88% 2%, rgba(167,139,250,.07), transparent 60%),
      linear-gradient(180deg,var(--bg0),var(--bg1));
    min-height:100vh;
  }

  /* Any explicit display rule beats the browser's own [hidden] styling, so a
     class like .f{display:block} silently un-hides things. Settle it once. */
  [hidden]{display:none !important}

  /* ---------- guide nav ---------- */
  .guideNav{
    position:sticky; top:0; z-index:60;
    border-bottom:1px solid var(--line);
    background:rgba(4,9,16,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .guideNavInner{
    max-width:1220px; margin:0 auto; padding:9px 24px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  @media (max-width:640px){ .guideNavInner{padding:8px 16px; gap:8px} }

  .gnBrand{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); flex:0 0 auto}
  .gnMark{display:block; width:22px; height:22px}
  .gnMark svg{width:100%; height:100%; display:block}
  .gnBrandTxt{font-size:12.5px; font-weight:700; letter-spacing:-.01em}
  .gnBrand:hover .gnBrandTxt{color:var(--b)}
  @media (max-width:520px){ .gnBrandTxt{display:none} }

  .gnAll{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted2); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
    transition:all .16s var(--ease);
  }
  .gnAll:hover{color:var(--text); border-color:rgba(94,236,208,.45)}
  .gnAll.is-here{color:#04131a; background:var(--b); border-color:var(--b)}

  .gnLinks{
    display:flex; align-items:center; gap:2px; flex:1 1 auto; flex-wrap:wrap;
    justify-content:flex-end; min-width:0;
  }
  .gnLinks a{
    text-decoration:none; color:var(--muted2); font-size:12px;
    padding:6px 11px; border-radius:999px; white-space:nowrap;
    transition:all .16s var(--ease);
  }
  .gnLinks a:hover{color:var(--text); background:rgba(46,208,192,.14)}
  .gnLinks a.is-here{color:#fff; background:rgba(46,208,192,.2); box-shadow:inset 0 0 0 1px rgba(94,236,208,.45)}

  /* progress */
  #progressBar{
    position:fixed; top:0; left:0; height:2px; width:100%; z-index:70;
    background:linear-gradient(90deg,var(--a),var(--b),var(--d));
    transform:scaleX(0); transform-origin:0 50%;
  }

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
  .layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:38px; align-items:start}
  /* minmax(0,1fr) sizes the TRACK; the grid item still has min-width:auto and
     will push past it to fit its widest content. Both are needed. */
  .layout > *{min-width:0}
  @media (max-width:960px){ .layout{grid-template-columns:1fr} .rail{display:none} }

  /* ---------- header ---------- */
  header{padding:54px 0 26px}
  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--a); margin:0 0 12px}
  h1{margin:0 0 14px; font-size:clamp(30px,5.2vw,52px); line-height:1.06; letter-spacing:-.035em; font-weight:830}
  h1 .grad{background:linear-gradient(115deg,var(--b),var(--a) 45%,var(--d)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lede{margin:0; font-size:17px; color:var(--muted); max-width:66ch}
  .revBadge{
    display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:6px 13px;
    border:1px solid var(--line); border-radius:999px; background:rgba(46,208,192,.07);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--muted2);
  }
  .revBadge b{color:var(--b); font-weight:700}

  /* ---------- depth dial ---------- */
  .depthWrap{
    position:sticky; top:var(--gnH,41px); z-index:50; margin:26px 0 0;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    background:linear-gradient(180deg,rgba(5,8,18,.94),rgba(5,8,18,.72));
    border-bottom:1px solid var(--line);
  }
  .depthInner{max-width:1180px; margin:0 auto; padding:13px 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
  .depthLabel{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2)}
  .depthTrack{display:flex; gap:5px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(3,7,12,.7)}
  .depthBtn{
    border:0; background:transparent; color:var(--muted2); cursor:pointer;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    padding:7px 15px; border-radius:999px; transition:all .22s var(--ease); white-space:nowrap;
  }
  .depthBtn:hover{color:var(--text)}
  .depthBtn.is-on{background:linear-gradient(135deg,rgba(46,208,192,.26),rgba(52,211,153,.18)); color:#fff; box-shadow:0 0 0 1px rgba(94,236,208,.4)}
  #depthNote{font-size:12.5px; color:var(--muted2); flex:1 1 240px; min-width:0}

  /* ---------- rail ---------- */
  .rail{position:sticky; top:calc(var(--gnH,0px) + 96px); padding-top:44px}
  .railTitle{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); margin:0 0 12px}
  .railLink{
    display:block; padding:6px 0 6px 13px; font-size:13px; color:var(--muted2);
    text-decoration:none; border-left:2px solid rgba(255,255,255,.09); transition:all .2s var(--ease);
  }
  .railLink:hover{color:var(--text)}
  .railLink.is-on{color:var(--b); border-left-color:var(--a)}

  /* ---------- sections ---------- */
  section{padding:44px 0; scroll-margin-top:90px}
  section + section{border-top:1px solid rgba(255,255,255,.07)}
  h2{margin:0 0 8px; font-size:clamp(21px,3.2vw,30px); letter-spacing:-.028em; font-weight:820; line-height:1.16}
  .secNum{font-family:var(--mono); font-size:11px; color:var(--a); letter-spacing:.16em; display:block; margin-bottom:9px}
  .secLede{margin:0 0 24px; color:var(--muted); max-width:70ch}
  h3{margin:0 0 8px; font-size:16.5px; font-weight:750; letter-spacing:-.012em}
  p{margin:0 0 14px}
  a{color:var(--b)}

  /* ---------- concept cards ---------- */
  .card{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--glass);
    padding:20px 22px; margin-bottom:14px; transition:border-color .25s var(--ease);
  }
  .card.is-open{border-color:rgba(94,236,208,.34)}
  .cardHead{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
  .deeperBtn{
    flex:0 0 auto; border:1px solid var(--line); background:rgba(46,208,192,.08); color:var(--muted);
    border-radius:999px; padding:5px 13px; font-size:11px; cursor:pointer; font-family:var(--mono);
    letter-spacing:.06em; transition:all .2s var(--ease); white-space:nowrap;
  }
  .deeperBtn:hover{color:#fff; border-color:rgba(94,236,208,.55); background:rgba(46,208,192,.17)}
  [data-layer]{animation:fade .34s var(--ease)}
  @keyframes fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
  [data-layer="3"]{
    border-left:2px solid rgba(167,139,250,.4); padding-left:15px; margin-top:14px;
  }
  [data-layer="3"] .deepTag{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--violet); display:block; margin-bottom:6px;
  }

  /* ---------- grids & tables ---------- */
  /* minmax(0,1fr) not 1fr: grid tracks default to min-width:auto, so a wide
     <pre> inside one would force the whole page to scroll horizontally. */
  .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
  .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  /* minmax on the track is not enough — the grid ITEM keeps min-width:auto,
     so a wide <pre> still overflows its (correctly sized) track. */
  .grid2 > *, .grid3 > *{min-width:0}
  @media (max-width:820px){ .grid3,.grid2{grid-template-columns:1fr} }

  table{width:100%; border-collapse:collapse; margin:6px 0 16px; font-size:13.5px}
  th,td{text-align:left; padding:9px 11px; border-bottom:1px solid rgba(255,255,255,.09); vertical-align:top}
  th{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted2); font-weight:700}
  td code{white-space:nowrap}
  .tableScroll{overflow-x:auto}

  code{font-family:var(--mono); font-size:.88em; background:rgba(46,208,192,.11); padding:1.5px 5px; border-radius:4px; color:var(--b)}
  pre{
    margin:0 0 14px; padding:15px 17px; overflow-x:auto; border:1px solid var(--line);
    border-radius:11px; background:rgba(3,7,12,.82); font-family:var(--mono); font-size:12.3px; line-height:1.62;
  }
  pre code{background:none; padding:0; color:inherit; font-size:inherit; white-space:pre}
  .copyBtn{
    float:right; margin:2px 0 -32px; position:relative; z-index:2;
    border:1px solid var(--line); background:rgba(6,14,22,.9); color:var(--muted2);
    border-radius:7px; padding:3px 9px; font-family:var(--mono); font-size:10px; cursor:pointer;
  }
  .copyBtn:hover{color:var(--text); border-color:rgba(94,236,208,.5)}

  .j-key{color:var(--b)} .j-str{color:#9AE6B4} .j-num{color:#F6AD55}
  .j-bool{color:var(--violet)} .j-null{color:var(--muted2)}

  /* ---------- callouts ---------- */
  .note{
    border:1px solid rgba(251,191,36,.32); background:rgba(251,191,36,.08);
    border-radius:11px; padding:13px 16px; margin:0 0 14px; font-size:13.5px; color:#FDE68A;
  }
  .note strong{color:#FCD34D}
  .tip{
    border:1px solid rgba(46,208,192,.3); background:rgba(46,208,192,.07);
    border-radius:11px; padding:13px 16px; margin:0 0 14px; font-size:13.5px; color:var(--muted);
  }
  .pill{
    display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
    text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:9px;
  }
  .pill.model{background:rgba(52,211,153,.16); color:#6EE7B7}
  .pill.app{background:rgba(46,208,192,.16); color:var(--b)}
  .pill.user{background:rgba(167,139,250,.16); color:var(--violet)}
  .pill.dep{background:rgba(248,113,113,.15); color:#FCA5A5}

  /* ---------- architecture diagram ---------- */
  .archWrap{display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:center}
  @media (max-width:820px){ .archWrap{grid-template-columns:1fr} }
  .archStage{
    border:1px solid var(--line); border-radius:var(--radius); padding:20px;
    background:radial-gradient(600px 320px at 50% 40%, rgba(46,208,192,.07), transparent 65%), rgba(3,7,12,.55);
  }
  .archNode{cursor:pointer; outline:none}
  .archNode rect{transition:all .25s var(--ease)}
  .archNode:hover rect, .archNode:focus-visible rect{stroke:var(--b); fill:rgba(46,208,192,.14)}
  .archNode.is-active rect{stroke:var(--b); fill:rgba(46,208,192,.2); filter:drop-shadow(0 0 10px rgba(46,208,192,.4))}
  .archNode text{fill:var(--text); font-family:var(--font); font-size:12px; font-weight:650; pointer-events:none}
  .archNode .sub{fill:var(--muted2); font-size:9.5px; font-weight:400; font-family:var(--mono)}
  #archDetail{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:var(--glass); min-height:150px}
  #archDetail h4{margin:0 0 8px; font-size:15px; color:var(--b)}
  #archDetail p{margin:0; font-size:13.5px; color:var(--muted)}

  /* ---------- inspector ---------- */
  .inspector{border:1px solid var(--line); border-radius:var(--radius); background:rgba(3,7,12,.6); padding:20px; outline:none}
  .inspector:focus-visible{border-color:rgba(94,236,208,.5)}
  .stepPips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px}
  .stepPip{
    border:1px solid var(--line); background:rgba(6,14,22,.7); color:var(--muted2);
    border-radius:999px; padding:6px 13px; font-family:var(--mono); font-size:10px;
    letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:all .2s var(--ease);
  }
  .stepPip:hover{color:var(--text)}
  .stepPip.is-done{color:var(--muted); border-color:rgba(94,236,208,.28)}
  .stepPip.is-on{background:rgba(46,208,192,.2); color:#fff; border-color:rgba(94,236,208,.6)}
  #stepMethod{font-family:var(--mono); font-size:15px; color:var(--b); margin:0 0 8px; font-weight:600}
  #stepNote{font-size:14px; color:var(--muted); margin:0 0 14px}
  .paneLabel{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted2); margin:0 0 6px}
  .stepNav{display:flex; gap:9px; align-items:center; margin-top:16px}
  .navBtn{
    border:1px solid var(--line); background:rgba(46,208,192,.1); color:var(--text);
    border-radius:999px; padding:8px 17px; font-size:12.5px; cursor:pointer; font-weight:600;
  }
  .navBtn:hover:not(:disabled){background:rgba(46,208,192,.22); border-color:rgba(94,236,208,.5)}
  .navBtn:disabled{opacity:.32; cursor:default}
  #stepCounter{font-family:var(--mono); font-size:11px; color:var(--muted2); margin-left:auto}

  /* ---------- language tabs ---------- */
  .langTabs{display:flex; gap:7px; margin-bottom:14px}
  .langTab{
    border:1px solid var(--line); background:rgba(6,14,22,.7); color:var(--muted2);
    border-radius:999px; padding:7px 16px; font-size:12.5px; cursor:pointer; font-weight:600;
    transition:all .2s var(--ease);
  }
  .langTab:hover{color:var(--text)}
  .langTab.is-on{background:rgba(46,208,192,.18); color:#fff; border-color:rgba(94,236,208,.55)}

  .stepBlock{border-left:2px solid rgba(46,208,192,.28); padding-left:18px; margin-bottom:26px}
  .stepBlock .n{
    font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--a);
    text-transform:uppercase; display:block; margin-bottom:5px;
  }

  /* ---------- the lab ---------- */
  .labTop{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
  .scn{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
  .scnLabel{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted2)}
  .scnBtn{
    border:1px solid var(--line); background:rgba(6,14,22,.7); color:var(--muted2);
    border-radius:999px; padding:6px 13px; font-size:12px; cursor:pointer; transition:all .18s var(--ease);
  }
  .scnBtn:hover{color:var(--text)}
  .scnBtn.is-on{background:rgba(46,208,192,.18); color:#fff; border-color:rgba(94,236,208,.55)}
  .labReady{
    font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
    padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted2);
  }
  .labReady.good{background:rgba(52,211,153,.2); color:#6EE7B7}

  .labGrid{display:grid; grid-template-columns:186px minmax(0,1fr) 250px; gap:14px; align-items:start}
  @media (max-width:1080px){ .labGrid{grid-template-columns:1fr} }

  .labSide{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:14px}
  .sideT{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted2); margin:0 0 9px}
  .sideNote{font-size:11px; color:var(--muted2); margin:10px 0 0; line-height:1.45}

  .palette{display:flex; flex-direction:column; gap:5px}
  .pal{
    display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:8px;
    text-align:left; border:1px solid var(--line); border-radius:9px; background:rgba(6,14,22,.75);
    padding:7px 9px; color:var(--text); cursor:grab; touch-action:none; transition:all .16s var(--ease);
  }
  .pal:hover{border-color:rgba(94,236,208,.55); background:rgba(46,208,192,.12)}
  .pal:active{cursor:grabbing}
  .palIcon{grid-row:1/3; align-self:center; font-size:15px; text-align:center; color:var(--b)}
  .palName{font-size:12.5px; font-weight:650}
  .palHint{font-size:9.5px; color:var(--muted2); font-family:var(--mono)}
  .pal-machine .palIcon,.pal-cloud .palIcon{color:#93C5FD}
  .pal-host .palIcon,.pal-client .palIcon{color:var(--b)}
  .pal-server .palIcon{color:#6EE7B7}
  .pal-tool .palIcon{color:#6EE7B7}
  .pal-resource .palIcon{color:var(--b)}
  .pal-prompt .palIcon{color:var(--violet)}
  .pal-model .palIcon{color:#C4B5FD}
  .pal.pulse,.nd.pulse{animation:pulseHi 1.1s var(--ease) 2}
  @keyframes pulseHi{
    0%,100%{box-shadow:0 0 0 0 rgba(94,236,208,0)}
    45%{box-shadow:0 0 0 7px rgba(94,236,208,.32)}
  }

  /* canvas */
  .boardWrap{min-width:0}
  .canvas{
    position:relative; height:580px; overflow:hidden; cursor:grab;
    border:1px solid var(--line); border-radius:var(--radius);
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.075) 1px, transparent 0) 0 0/22px 22px,
      rgba(3,7,12,.62);
    touch-action:none; user-select:none;
  }
  .canvas.grabbing{cursor:grabbing}
  .nodes,.wires{position:absolute; inset:0; transform-origin:0 0}
  /* Both layers are transformed, so both make stacking contexts. The nodes
     must win outright — otherwise a wire lying across a piece steals the
     clicks meant for its port. Boxes are translucent, so wires still read. */
  .wires{overflow:visible; pointer-events:none; z-index:2}
  .nodes{pointer-events:none; z-index:3}
  /* Labels alone ride above the boxes — they have to stay readable where a
     wire passes behind one, but they must never intercept a pointer. */
  .wires.top{z-index:4; pointer-events:none}
  .nodes > *{pointer-events:auto}
  .canvasHint{
    position:absolute; left:12px; bottom:9px; margin:0; z-index:2; pointer-events:none;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--muted2); opacity:.75;
  }

  /* nodes */
  .nd{
    position:absolute; border-radius:12px; padding:8px 10px; cursor:grab;
    border:1px solid var(--line); background:rgba(9,16,26,.9);
    transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .nd:active{cursor:grabbing}
  .nd.is-sel{border-color:var(--b); box-shadow:0 0 0 1px rgba(94,236,208,.4)}
  .nd.is-target{border-color:#6EE7B7; box-shadow:0 0 0 2px rgba(110,231,183,.35); background:rgba(52,211,153,.1)}
  .nd.is-wrong{border-color:#FCA5A5; box-shadow:0 0 0 2px rgba(248,113,113,.3); background:rgba(248,113,113,.08)}
  .ndHead{display:flex; align-items:center; gap:6px}
  .ndIcon{font-size:12px; opacity:.85}
  .ndKind{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2)}
  /* Delete lives in the corner furthest from the port. They used to sit a
     dozen pixels apart, and on a 46px piece a near miss deleted it. */
  .ndX{
    position:absolute; left:5px; top:4px; z-index:4;
    border:0; background:none; color:var(--muted2); font-size:15px;
    line-height:1; cursor:pointer; padding:2px 5px; border-radius:6px;
    opacity:0; pointer-events:none; transition:opacity .15s
  }
  .nd:hover .ndX,.nd.is-sel .ndX{opacity:1; pointer-events:auto}
  .nd:hover .ndIcon,.nd.is-sel .ndIcon{opacity:0}
  .ndX:hover{color:#FCA5A5; background:rgba(248,113,113,.18)}
  .ndName{font-size:12.5px; font-weight:640; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* Resize grip — only on boxes that hold things. Faint but always there;
     an affordance nobody can see is an affordance nobody uses. */
  .ndSize{
    position:absolute; right:0; bottom:0; width:22px; height:22px; z-index:4;
    cursor:nwse-resize; color:var(--muted2); opacity:.5; transition:opacity .15s, color .15s;
  }
  .ndSize::before{
    content:''; position:absolute; right:5px; bottom:5px; width:9px; height:9px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    border-radius:0 0 4px 0;
  }
  .nd:hover .ndSize,.nd.is-sel .ndSize{opacity:1; color:var(--b)}

  .ndEmpty{
    position:absolute; left:0; right:0; bottom:14px; text-align:center; pointer-events:none;
    font-family:var(--mono); font-size:9.5px; color:var(--muted2); opacity:.6;
  }

  .nd-machine,.nd-cloud{background:rgba(147,197,253,.05); border-color:rgba(147,197,253,.3); border-style:dashed}
  .nd-machine .ndIcon,.nd-cloud .ndIcon{color:#93C5FD}
  .nd-host{background:rgba(46,208,192,.08); border-color:rgba(94,236,208,.32)}
  .nd-client{background:rgba(46,208,192,.16); border-color:rgba(94,236,208,.45)}
  .nd-server{background:rgba(52,211,153,.08); border-color:rgba(110,231,183,.34)}
  .nd-tool{background:rgba(52,211,153,.16); border-color:rgba(110,231,183,.4)}
  .nd-resource{background:rgba(46,208,192,.14); border-color:rgba(94,236,208,.36)}
  .nd-prompt{background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.4)}
  .nd-model{background:rgba(196,181,253,.15); border-color:rgba(196,181,253,.5)}
  .nd-model .ndIcon{color:#DDD6FE}
  .nd-tool .ndName,.nd-resource .ndName,.nd-prompt .ndName,.nd-client .ndName,
  .nd-model .ndName{font-family:var(--mono); font-size:11.5px}

  /* Connect is a button you press, not a dot you have to hit. It sits in the
     header, and hovering a piece lifts it clear of anything overlapping it. */
  /* No global lift here. A container hovering above everything would cover its
     own children, and then nothing inside it can be grabbed at all. Stacking is
     set per node in JS, within its own depth band. */
  .ndLink{
    margin-left:auto; display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
    border:1px solid rgba(94,236,208,.42); background:rgba(46,208,192,.14); color:var(--b);
    border-radius:999px; padding:3px 9px; cursor:pointer; line-height:1;
    font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .ndLink:hover{background:rgba(46,208,192,.34); color:#fff}
  .ndLinkIcon{font-size:11px; line-height:1}
  .nd.is-arm .ndLink{background:var(--b); color:#04131a; border-color:var(--b)}
  .nd.is-arm{
    border-color:var(--b); box-shadow:0 0 0 2px rgba(94,236,208,.5);
    animation:armPulse 1.5s var(--ease) infinite;
  }
  @keyframes armPulse{0%,100%{box-shadow:0 0 0 2px rgba(94,236,208,.5)} 50%{box-shadow:0 0 0 7px rgba(94,236,208,.16)}}
  .port-host,.port-model{border-color:#C4B5FD; box-shadow:0 0 0 4px rgba(167,139,250,.14)}
  .port-host:hover,.port-model:hover{background:#C4B5FD; box-shadow:0 0 0 6px rgba(167,139,250,.26)}
  .port-machine,.port-cloud{border-color:#93C5FD; box-shadow:0 0 0 4px rgba(147,197,253,.12)}

  /* full screen */
  .labTopRight{display:flex; align-items:center; gap:9px}
  .fullBtn{
    display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
    background:rgba(6,14,22,.75); color:var(--muted2); border-radius:999px;
    padding:6px 13px; font-size:12px; cursor:pointer; transition:all .18s var(--ease);
  }
  .fullBtn:hover{color:var(--text); border-color:rgba(94,236,208,.5)}
  .fullIcon{font-size:13px; line-height:1}
  .labShell.is-full,
  .labShell:fullscreen{
    background:linear-gradient(180deg,var(--bg0),var(--bg1));
    padding:18px 22px; overflow:auto;
  }
  .labShell.is-full{position:fixed; inset:0; z-index:200}
  .labShell:fullscreen .canvas,
  .labShell.is-full .canvas{height:calc(100vh - 250px); min-height:340px}
  .labShell:fullscreen .logList,
  .labShell.is-full .logList{max-height:190px}

  /* wires */
  .wireG{pointer-events:none}
  .wireHit{
    fill:none; stroke:transparent; stroke-width:18; pointer-events:stroke; cursor:pointer;
  }
  .wireG:hover .wire{stroke-width:3}
  .wireG.is-sel .wire{stroke:#fff; stroke-width:3}
  .wireDel{opacity:0; pointer-events:auto; cursor:pointer; transition:opacity .15s var(--ease)}
  .wireG:hover .wireDel,.wireG.is-sel .wireDel{opacity:1}
  .wireDel circle{fill:rgba(8,16,24,.95); stroke:rgba(248,113,113,.7); stroke-width:1.2}
  .wireDel path{stroke:#FCA5A5; stroke-width:1.8; stroke-linecap:round; fill:none}
  .wireDel:hover circle{fill:rgba(248,113,113,.25)}
  .wire{fill:none; stroke:rgba(94,236,208,.75); stroke-width:2}
  .wire.bad{stroke:rgba(248,113,113,.8); stroke-dasharray:5 4}
  .wire.llm{stroke:rgba(196,181,253,.8)}
  .wire.temp{stroke:var(--b); stroke-dasharray:5 4; opacity:.85}
  .wire.temp.llm{stroke:#C4B5FD}
  .wire.temp.bad{stroke:rgba(248,113,113,.9)}
  .wireG.pulse .wire{animation:wirePulse 1.1s var(--ease) 2}
  @keyframes wirePulse{0%,100%{stroke-width:2} 45%{stroke-width:6}}
  .wireG.llm .wireDot{fill:#C4B5FD}
  .wire.flow{stroke-dasharray:9 7; animation:wireFlow .85s linear}
  @keyframes wireFlow{from{stroke-dashoffset:32} to{stroke-dashoffset:0}}
  .wireDot{fill:var(--b)}
  .wireLabel{
    fill:var(--muted2); font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
    paint-order:stroke; stroke:rgba(3,7,12,.9); stroke-width:4px;
  }
  .wireLabel.bad{fill:#FCA5A5}

  /* status line — the board narrates every connection step */
  .labStatus{
    margin:10px 0 0; padding:9px 13px; border-radius:10px; font-size:12.5px; line-height:1.5;
    border:1px solid var(--line); background:rgba(6,14,22,.75); color:var(--muted);
  }
  .labStatus b{color:#fff}
  .labStatus i{color:var(--muted2); font-style:normal}
  .labStatus.busy{border-color:rgba(94,236,208,.5); background:rgba(46,208,192,.13); color:#CFFAFE}
  .labStatus.good{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.12); color:#A7F3D0}
  .labStatus.warn{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.1); color:#FDE68A}

  /* connections list — removing a wire never depends on hitting a line */
  .conns{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
  .connEmpty{font-size:11.5px; color:var(--muted2); padding:2px 0}
  .conn{
    display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px;
    border:1px solid var(--line); background:rgba(6,14,22,.7); cursor:pointer;
    transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .conn:hover{border-color:rgba(94,236,208,.45); background:rgba(46,208,192,.1)}
  .conn.is-sel{border-color:var(--b); background:rgba(46,208,192,.16)}
  .conn.bad{border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.08)}
  .connBody{min-width:0; flex:1 1 auto}
  .connPair{display:block; font-size:11.5px; color:var(--text); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap}
  .connT{display:block; font-family:var(--mono); font-size:9px; color:var(--muted2); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .conn.bad .connT{color:#FCA5A5}
  .connX{
    flex:0 0 auto; border:0; background:none; color:var(--muted2); font-size:16px; line-height:1;
    cursor:pointer; padding:2px 6px; border-radius:6px;
  }
  .connX:hover{color:#FCA5A5; background:rgba(248,113,113,.18)}

  .insBtns{display:flex; flex-direction:column; gap:6px; margin-top:11px}
  .linkBtn{
    border:1px solid rgba(94,236,208,.45); background:rgba(46,208,192,.14); color:#fff;
    border-radius:8px; padding:6px 10px; font-size:11.5px; cursor:pointer; width:100%;
  }
  .linkBtn:hover{background:rgba(46,208,192,.3)}

  /* hint bar */
  .hintBar{
    display:flex; align-items:flex-start; gap:11px; margin-top:11px; padding:11px 13px;
    border:1px solid rgba(94,236,208,.28); border-radius:11px; background:rgba(46,208,192,.07);
  }
  .hintBar.done{border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.09)}
  .hintIcon{
    flex:0 0 auto; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--b); padding-top:3px;
  }
  .hintBar.done .hintIcon{color:#6EE7B7}
  .hintBar p{margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); flex:1 1 auto; min-width:0}
  .hintBar p b{color:#fff}
  .hintGo{
    flex:0 0 auto; border:1px solid rgba(94,236,208,.45); background:rgba(46,208,192,.16);
    color:#fff; border-radius:999px; padding:5px 13px; font-size:11.5px; cursor:pointer;
    transition:all .16s var(--ease);
  }
  .hintGo:hover{background:rgba(46,208,192,.3)}

  /* right column */
  .goals{list-style:none; margin:0; padding:0; font-size:12px}
  .goals li{display:flex; gap:8px; align-items:flex-start; padding:4px 0; color:var(--muted2); line-height:1.45}
  .goals li span{flex:0 0 auto; width:12px; font-family:var(--mono)}
  .goals li.ok{color:#6EE7B7}
  .goals li.warn{color:#FDE68A; cursor:pointer}
  .goals li.warn:hover{color:#FCD34D}
  .goals b{color:inherit; font-weight:700}

  .inspector{border:1px solid var(--line); border-radius:10px; background:rgba(3,7,12,.6); padding:11px; min-height:96px}
  .inspector .dim{font-size:11.5px; color:var(--muted2); margin:0; line-height:1.45}
  .insWhere{font-size:11.5px; color:var(--muted); margin:0 0 10px; line-height:1.5}
  .insWhere b{color:var(--b)}
  .insWire{margin:0 0 10px; font-family:var(--mono); font-size:11px; color:#6EE7B7}
  .insWire.bad{color:#FCA5A5}
  .warnTxt{color:#FDE68A; font-style:normal}
  .insTip{margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--muted2)}
  .insWire{font-family:var(--mono); font-size:11px; color:var(--b); margin:0 0 10px}
  .insWire.bad{color:#FCA5A5}
  .cutBtn{
    width:100%; border:1px solid rgba(248,113,113,.4); background:rgba(248,113,113,.1);
    color:#FCA5A5; border-radius:8px; padding:7px 10px; font-size:12px; cursor:pointer;
    transition:all .18s var(--ease);
  }
  .cutBtn:hover{background:rgba(248,113,113,.22); color:#fff}
  .f{display:block; margin-bottom:9px}
  .f > span{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted2); margin-bottom:4px}
  .f input,.f textarea{
    width:100%; background:rgba(6,14,22,.85); color:var(--text); border:1px solid var(--line);
    border-radius:7px; padding:6px 8px; font-family:var(--mono); font-size:11px; line-height:1.5; resize:vertical;
  }
  .f input:focus,.f textarea:focus{outline:none; border-color:rgba(94,236,208,.55)}

  /* run */
  .runRow{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap}
  .navBtn.primary{background:linear-gradient(135deg,rgba(46,208,192,.3),rgba(52,211,153,.2)); border-color:rgba(94,236,208,.5)}
  .navBtn:disabled{opacity:.35; cursor:default}
  .runNote{font-size:11.5px; color:var(--muted2)}

  .labVerdict{margin-top:14px; padding:14px 16px; border-radius:12px; font-size:13.5px; line-height:1.6}
  .labVerdict.good{border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.09); color:#A7F3D0}
  .labVerdict.bad{border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.08); color:#FDE68A}
  .labVerdict strong{color:#fff}
  .labVerdict b{color:#fff}

  .logList{
    list-style:none; margin:12px 0 0; padding:12px; max-height:320px; overflow-y:auto;
    border:1px solid var(--line); border-radius:11px; background:rgba(3,7,12,.82);
  }
  .logList:empty{display:none}
  .lg{margin-bottom:9px; animation:fade .3s var(--ease)}
  .lgH{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap}
  .lgD{font-family:var(--mono); font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted2); flex:0 0 auto}
  .lgT{font-size:12.5px; color:var(--text); font-weight:600}
  .lg.good .lgT{color:#6EE7B7}
  .lg.llm .lgT{color:#C4B5FD}
  .lg.llm .lgD{color:#A78BFA}
  .lg.bad .lgT{color:#FCA5A5}
  .lg pre{margin:4px 0 0; padding:8px 10px; font-size:10.5px; line-height:1.5; background:rgba(0,0,0,.35)}

  /* ---------- inline glossary ---------- */
  .term{
    font:inherit; color:inherit; background:none; border:0; padding:0; cursor:help;
    border-bottom:1px dashed rgba(94,236,208,.55); transition:all .18s var(--ease);
  }
  .term:hover, .term:focus-visible{
    color:var(--b); border-bottom-color:var(--b); background:rgba(46,208,192,.10);
    border-radius:3px; outline:none;
  }
  .termPop{
    position:absolute; z-index:80; max-width:340px; width:max-content;
    padding:13px 15px; border-radius:11px; font-size:13.5px; line-height:1.55;
    color:var(--muted); background:rgba(8,14,24,.98); border:1px solid rgba(94,236,208,.34);
    box-shadow:0 18px 44px rgba(0,0,0,.62); animation:popIn .16s var(--ease);
  }
  .termPop strong{display:block; color:var(--b); font-size:12px; margin-bottom:5px;
    font-family:var(--mono); letter-spacing:.05em; text-transform:uppercase; font-weight:700}
  .termPop code{font-size:.86em}
  .termPop::after{
    content:""; position:absolute; left:var(--arrow-x,50%); margin-left:-6px;
    border:6px solid transparent; border-bottom-color:rgba(94,236,208,.34); top:-12px;
  }
  .termPop.is-above::after{top:auto; bottom:-12px; border-bottom-color:transparent; border-top-color:rgba(94,236,208,.34)}
  @keyframes popIn{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ .termPop{animation:none} }

  #glossaryHint{
    display:flex; align-items:center; gap:9px; margin:16px 0 0; padding:9px 14px;
    border:1px solid var(--line); border-radius:999px; background:rgba(46,208,192,.06);
    font-size:12.5px; color:var(--muted2); width:max-content; max-width:100%;
  }
  #glossaryHint b{color:var(--b)}
  #glossaryHint .swatch{border-bottom:1px dashed rgba(94,236,208,.7); color:var(--muted)}

  footer{padding:44px 0 70px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted2); font-size:13px}
  footer a{color:var(--b)}
  .srcList{margin:10px 0 0; padding-left:18px}
  .srcList li{margin-bottom:4px}