/* ── Multi-Claude field guide ──────────────────────────────────────────────
     Every rule is scoped under .mx so it can never touch the shared site nav,
     footer, or other pages. Design tokens are declared on .mx (not :root) for
     the same reason, they override the site tokens only inside this guide. */
  .mx{
    /* Gold-led palette aligned with the main site (see site.css tokens) */
    --brand:#C9A227; --brand-deep:#8A6D14; --brand2:#7A5E12; --ink0:#7A5E12; --link:#7A5E12;
    --green:#1A7F37; --green-ink:#157a2b; --purple:#6b34c9; --purple-ink:#5c34a6;
    --amber:#B5540A; --amber-ink:#9A4200; --red:#CF222E; --red-ink:#B81C21;
    --card:#ffffff; --surface2:#FBF9F5; --text:#16202c; --muted:#5a6675;
    --border:#E7E1D4; --code:#0f1b2b; --codetext:#d6e6ff; --shadow:0 6px 22px rgba(28,22,8,.08);
    --radius:14px;
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text);
    line-height:1.62;font-size:16px;
  }
  @media (prefers-color-scheme: dark){
    .mx{
      --brand:#E3C05A; --brand-deep:#B89221; --brand2:#E3C05A; --ink0:#E3C05A; --link:#E3C05A;
      --green:#3FB950; --green-ink:#3FB950; --purple:#c4a6ff; --purple-ink:#c4a6ff;
      --amber:#E0894A; --amber-ink:#E0894A; --red:#FF6B5E; --red-ink:#FF6B5E;
      --card:#14181E; --surface2:#191E26; --text:#ECEFF3; --muted:#9BA4AF;
      --border:#262C34; --shadow:0 6px 22px rgba(0,0,0,.45);
    }
  }
  .mx *{box-sizing:border-box}
  .mx a{color:var(--link);text-decoration:none}.mx a:hover{text-decoration:underline}
  .mx .wrap{max-width:940px;margin-inline:auto;padding:0 22px}
  .mx code,.mx pre{font-family:"Cascadia Code","Consolas",ui-monospace,monospace}

  .mx .mx-hero{background:linear-gradient(150deg,#0B0F14 0%,#12171F 55%,#0A0E13 100%);color:#fff;padding:56px 22px 62px;text-align:center;position:relative;overflow:hidden}
  .mx .mx-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 560px 320px at 50% -10%,rgba(201,162,39,.20),transparent 70%);pointer-events:none}
  .mx .mx-hero>*{position:relative;z-index:1}
  .mx .mx-hero .eyebrow{display:inline-block;background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.4);border-radius:20px;padding:5px 16px;font-size:.74rem;font-weight:700;letter-spacing:1.5px;margin-bottom:20px;color:#F0D98C}
  .mx .mx-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:800;letter-spacing:-1px;line-height:1.12;max-width:19ch;margin-inline:auto;color:#fff}
  .mx .mx-hero p{font-size:1.12rem;color:rgba(255,255,255,.9);margin:18px auto 0;max-width:62ch}
  .mx .hero-badges{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
  .mx .hb{background:rgba(255,255,255,.92);border-radius:20px;padding:4px 13px;font-size:.78rem;font-weight:700;color:#5a4300}

  .mx section{padding:50px 0}
  .mx section+section{border-top:1px solid var(--border)}
  .mx .kicker{font-size:.76rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand2)}
  .mx h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-.4px;margin:8px 0 14px}
  .mx h2+p.lead{font-size:1.06rem;color:var(--muted);max-width:66ch}
  .mx p{margin-bottom:14px;max-width:68ch}.mx strong{color:var(--text)}

  .mx .partbar{background:linear-gradient(100deg,#0B0F14,#1b2330);color:#fff;border-radius:16px;padding:20px 24px;margin:6px 0 8px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .mx .partbar::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 420px 200px at 82% 30%,rgba(201,162,39,.22),transparent 72%);pointer-events:none}
  .mx .partbar>*{position:relative;z-index:1}
  .mx .partbar .pn{font-size:.72rem;font-weight:800;letter-spacing:2px;background:rgba(201,162,39,.18);border:1px solid rgba(201,162,39,.4);border-radius:8px;padding:6px 11px;white-space:nowrap;color:#F0D98C}
  .mx .partbar h2{margin:0;color:#fff}
  .mx .partbar p{margin:2px 0 0;color:rgba(255,255,255,.85);font-size:.95rem;max-width:none}

  .mx .inchapter{background:color-mix(in srgb,var(--brand) 9%,var(--card));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));border-left:4px solid var(--brand);border-radius:0 12px 12px 0;padding:15px 18px;margin:14px 0}
  .mx .inchapter b{display:block;font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--brand2);margin-bottom:7px}
  .mx .inchapter ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
  .mx .inchapter li{font-size:.92rem;color:var(--text);padding-left:24px;position:relative}
  .mx .inchapter li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800}

  .mx .machine{margin-top:24px;border:2px solid var(--border);border-radius:20px;background:var(--surface2);padding:18px 18px 22px;box-shadow:var(--shadow)}
  .mx .machine-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--brand2);background:color-mix(in srgb,var(--brand) 12%,var(--card));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));border-radius:999px;padding:6px 14px;margin-bottom:16px}
  .mx .workspaces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:680px){.mx .workspaces{grid-template-columns:1fr}}
  .mx .ws{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 15px;position:relative;display:flex;flex-direction:column;gap:9px}
  .mx .ws::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:12px 0 0 12px;background:var(--accent,var(--brand))}
  .mx .ws.w1{--accent:var(--brand)}.mx .ws.w2{--accent:var(--green)}.mx .ws.w3{--accent:#b6c2d2}
  .mx .ws.add{background:var(--surface2);border-style:dashed;justify-content:center;align-items:center;text-align:center;color:var(--muted)}
  .mx .ws .fname{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.98rem}
  .mx .ws .fname .ic{width:22px;height:22px;flex:0 0 22px}
  .mx .ws small{color:var(--muted);font-size:.78rem;margin-top:-4px;font-family:"Cascadia Code","Consolas",monospace}
  .mx .ws .kv{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;border-top:1px dashed var(--border);padding-top:7px}
  .mx .ws .kv:first-of-type{border-top:none;padding-top:0}.mx .ws .k{color:var(--muted)}
  .mx .pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px}
  .mx .pill.acct{background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand2)}.mx .pill.cmd{background:color-mix(in srgb,var(--green) 14%,var(--card));color:var(--green-ink);font-family:"Cascadia Code","Consolas",monospace}
  .mx .seal{margin-top:2px;display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)}
  .mx .machine-foot{margin-top:16px;text-align:center;font-size:.82rem;color:var(--muted)}.mx .machine-foot b{color:var(--brand2)}

  .mx .parts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
  @media(max-width:640px){.mx .parts{grid-template-columns:1fr}}
  .mx .part{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
  .mx .part h3{font-size:1.02rem;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .mx .part .num{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand2);font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center}
  .mx .part p{font-size:.92rem;color:var(--muted);margin:0}

  .mx .legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
  .mx .legend .lg{display:flex;gap:9px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
  .mx .legend .lg .em{font-size:1.15rem;line-height:1.3;flex:0 0 auto}
  .mx .legend .lg b{font-size:.82rem}
  .mx .legend .lg span{display:block;font-size:.76rem;color:var(--muted)}

  .mx .bstep{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px 24px;margin-top:22px}
  .mx .bstep-h{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
  .mx .bstep-h .n{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#241a00;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;box-shadow:0 3px 10px rgba(201,162,39,.35)}
  .mx .bstep-h h3{font-size:1.18rem;font-weight:800;margin:0}
  .mx .bstep-h .sub{font-size:.92rem;color:var(--muted);margin:2px 0 0;max-width:none}
  .mx .bstep-h .scriptref{font-size:.72rem;font-weight:700;background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand2);border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));border-radius:8px;padding:5px 10px;white-space:nowrap;align-self:start}
  .mx a.scriptref{cursor:pointer;transition:background .15s,color .15s}
  .mx a.scriptref:hover{background:var(--brand);color:#241a00;border-color:var(--brand);text-decoration:none}
  @media(max-width:640px){
    .mx .bstep{padding:20px 18px}
    .mx .bstep-h{grid-template-columns:auto 1fr;row-gap:12px}
    .mx .bstep-h .scriptref{grid-column:1 / -1;justify-self:start}
  }

  .mx .runpanel{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:16px}
  .mx .rp-head{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:.78rem;font-weight:800;letter-spacing:.4px;color:#fff}
  .mx .rp-head .where{margin-left:auto;font-weight:600;letter-spacing:0;font-size:.72rem;opacity:.92}
  .mx .runpanel.interactive .rp-head{background:linear-gradient(90deg,#B5540A,#8f3f06)}
  .mx .runpanel.ps .rp-head{background:linear-gradient(90deg,#8A6D14,#6b5410)}
  .mx .runpanel.bash .rp-head{background:linear-gradient(90deg,#3a4756,#222d3a)}
  .mx .rp-body{padding:14px 16px;background:var(--surface2)}
  .mx .rp-body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
  .mx .rp-body ol li{font-size:.92rem}
  .mx .rp-body ol li b{color:var(--brand2)}
  .mx .rp-body .inlinedl{display:inline-block;margin-top:10px;font-size:.76rem;font-weight:700;color:var(--link)}
  .mx .codelabel{font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
  .mx .codelabel:first-child{margin-top:0}
  .mx .codelabel .num{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#241a00;font-size:.68rem;align-items:center;justify-content:center;margin-right:6px;font-weight:800}

  .mx pre{background:var(--code);color:var(--codetext);border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:.8rem;line-height:1.6;margin:0;border:1px solid #21344a;white-space:pre}
  .mx pre.vars{background:#10233c;border:1px solid #2c4a6e}
  .mx pre .c{color:#8fb7e6}.mx pre .k{color:#7fe0a8}.mx pre .v{color:#ffd479}.mx pre .fn{color:#f9a8c8}
  .mx p code,.mx li code{background:color-mix(in srgb,var(--brand) 10%,var(--card));border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:.82em;color:var(--ink0)}

  .mx .iconnote{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-top:12px;background:var(--card)}
  .mx .iconnote .badge{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;border:2px solid;background:transparent}
  .mx .iconnote .body h4{font-weight:800;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px;font-size:.74rem}
  .mx .iconnote .body p{font-size:.9rem;color:var(--muted);margin:0}
  .mx .iconnote .body p+p{margin-top:6px}
  .mx .iconnote code{font-size:.8em}
  .mx .iconnote.tip{background:color-mix(in srgb,var(--brand) 8%,var(--card))}.mx .iconnote.tip .badge{border-color:var(--brand);color:var(--brand2)}.mx .iconnote.tip h4{color:var(--brand2)}
  .mx .iconnote.warn{background:color-mix(in srgb,var(--amber) 9%,var(--card))}.mx .iconnote.warn .badge{border-color:var(--amber);color:var(--amber)}.mx .iconnote.warn h4{color:var(--amber-ink)}
  .mx .iconnote.remember{background:color-mix(in srgb,var(--green) 9%,var(--card))}.mx .iconnote.remember .badge{border-color:var(--green);color:var(--green)}.mx .iconnote.remember h4{color:var(--green-ink)}
  .mx .iconnote.tech{background:color-mix(in srgb,var(--purple) 9%,var(--card))}.mx .iconnote.tech .badge{border-color:var(--purple);color:var(--purple)}.mx .iconnote.tech h4{color:var(--purple-ink)}
  .mx .iconnote.bit{background:color-mix(in srgb,var(--red) 8%,var(--card));border-color:color-mix(in srgb,var(--red) 30%,var(--border))}.mx .iconnote.bit .badge{border-color:var(--red);color:var(--red);background:var(--card)}.mx .iconnote.bit h4{color:var(--red-ink)}
  .mx .iconnote.cost{background:color-mix(in srgb,var(--brand) 10%,var(--card));border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}.mx .iconnote.cost .badge{border-color:var(--brand);color:var(--brand2);background:var(--card)}.mx .iconnote.cost h4{color:var(--brand2)}

  .mx .callout{border-left:4px solid var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--card));border-radius:0 10px 10px 0;padding:15px 18px;margin-top:14px;font-size:.93rem;color:var(--muted)}
  .mx .callout.green{border-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--card))}
  .mx .callout.amber{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,var(--card))}
  .mx .callout b{display:block;color:var(--text);margin-bottom:3px}

  .mx .cheat{margin-top:20px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .mx .cheat-h{background:#132433;color:#fff;padding:13px 20px;font-weight:800;display:flex;align-items:center;gap:10px;font-size:1rem}
  .mx .cheat table{width:100%;border-collapse:collapse;font-size:.88rem}
  .mx .cheat td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top}
  .mx .cheat tr:last-child td{border-bottom:none}
  .mx .cheat td:first-child{width:44%;color:var(--amber);font-weight:600}
  .mx .cheat td:first-child code{color:var(--amber)}
  .mx .cheat td:last-child{color:var(--text)}
  .mx .cheat td:last-child code{background:color-mix(in srgb,var(--brand) 10%,var(--card));border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--ink0);font-size:.85em}

  .mx table.cost{width:100%;border-collapse:collapse;margin-top:20px;font-size:.9rem;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .mx table.cost th,.mx table.cost td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border)}
  .mx table.cost th{background:color-mix(in srgb,var(--brand) 10%,var(--card));font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
  .mx table.cost td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink0)}
  .mx table.cost tr:last-child td{border-bottom:none}
  .mx table.cost tr.total td{background:color-mix(in srgb,var(--brand) 12%,var(--card));font-weight:800}

  .mx .tools{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
  @media(max-width:640px){.mx .tools{grid-template-columns:1fr}}
  .mx .tool{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
  .mx .tool h4{font-size:.98rem;font-weight:800;margin-bottom:3px}
  .mx .tool .role{font-size:.74rem;font-weight:700;color:var(--green-ink);text-transform:uppercase;letter-spacing:.4px}
  .mx .tool p{font-size:.88rem;color:var(--muted);margin:6px 0 0}

  .mx .safe{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
  @media(max-width:640px){.mx .safe{grid-template-columns:1fr}}
  .mx .safe .s{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
  .mx .safe .s h4{font-size:.96rem;font-weight:800;margin-bottom:4px;display:flex;gap:8px;align-items:center}
  .mx .safe .s p{font-size:.88rem;color:var(--muted);margin:0}
  .mx .dotmark{width:9px;height:9px;border-radius:50%;background:var(--green);flex:0 0 9px}

  .mx .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .mx .chip{background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand2);border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:600}
  .mx :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}

.article.pd section,.article.mx section{padding:28px 0}.article [data-guide-panel]{padding-top:0;border-top:0}.article.mx{background:var(--card)}.article.pd .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}.article [data-guide-panel][hidden]{display:none!important}