:root {
    color-scheme: light;
    --font-sans: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono: 'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --r:14px; --r-sm:9px;
    --bg:#fafaf4; --bg-2:#f2f1e8;
    --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.42);
    --hair:rgba(21,21,36,.10); --hair-2:rgba(21,21,36,.20);
    --text:#151524; --text-2:#56566c; --text-3:#6f6f84;
    --accent:#fa500f; --accent-text:#b75002;
    --wash-1:rgba(255,175,1,.18); --wash-2:rgba(250,80,15,.14);
    --shadow:0 1px 2px rgba(21,21,36,.05), 0 14px 34px -18px rgba(21,21,36,.28);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { 
    color-scheme: dark;
    --bg:#151524; --bg-2:#101019;
    --glass:rgba(36,36,51,.55); --glass-2:rgba(36,36,51,.34);
    --hair:rgba(250,250,244,.11); --hair-2:rgba(250,250,244,.22);
    /* --text-3 sits a step above Mistral's navy-500 so hint text still clears
       AA once it is read through a translucent panel rather than off --bg. */
    --text:#fafaf4; --text-2:#b8b8cc; --text-3:#9a9aae;
    --accent:#ff8204; --accent-text:#ff8204;
    --wash-1:rgba(255,175,1,.10); --wash-2:rgba(250,80,15,.11);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 40px -20px rgba(0,0,0,.75);
 } }
  :root[data-theme=dark] { 
    color-scheme: dark;
    --bg:#151524; --bg-2:#101019;
    --glass:rgba(36,36,51,.55); --glass-2:rgba(36,36,51,.34);
    --hair:rgba(250,250,244,.11); --hair-2:rgba(250,250,244,.22);
    /* --text-3 sits a step above Mistral's navy-500 so hint text still clears
       AA once it is read through a translucent panel rather than off --bg. */
    --text:#fafaf4; --text-2:#b8b8cc; --text-3:#9a9aae;
    --accent:#ff8204; --accent-text:#ff8204;
    --wash-1:rgba(255,175,1,.10); --wash-2:rgba(250,80,15,.11);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 40px -20px rgba(0,0,0,.75);
 }

  * { margin:0; padding:0; box-sizing:border-box; }
  /* The wash gives the frosted surfaces something to actually refract; it is
     painted on body (so it propagates to the canvas) and fixed, so scrolling a
     glass panel over it shifts what shows through. */
  body { font-family:var(--font-sans); color:var(--text); line-height:1.55;
         padding:1.5rem 1rem 5rem; -webkit-font-smoothing:antialiased;
         background:
           radial-gradient(58rem 38rem at 8% -12%, var(--wash-1), transparent 62%),
           radial-gradient(48rem 34rem at 104% 2%, var(--wash-2), transparent 58%),
           var(--bg);
         background-attachment:fixed; }
  .wrap { max-width:900px; margin:0 auto; }

  .ic { width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
        stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.14em; }

  /* ── top bar ─────────────────────────────────────────────────────────── */
  .top { display:flex; align-items:center; gap:.75rem; margin-bottom:1.4rem; }
  .top .spacer { flex:1; }
  /* The mark is the one bit of colour in the chrome, so it carries no plate and
     no border — it reads as a sticker dropped on the page, which is what it is. */
  .mark { display:flex; flex:none; line-height:0; }
  .mark img { width:1.9rem; height:1.9rem; transition:transform .15s; }
  .mark:hover img { transform:rotate(-6deg) scale(1.06); }

  .brand { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
  .brand-mark { width:4.6rem; height:4.6rem; flex:none;
                filter:drop-shadow(0 6px 16px rgba(21,21,36,.28)); }
  .brand .sub { margin:.3rem 0 0; }
  @media (max-width:520px) { .brand-mark { width:3.4rem; height:3.4rem; } }
  .back { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem;
          color:var(--text-2); text-decoration:none; }
  .back:hover { color:var(--text); }
  .seg { display:inline-flex; gap:.15rem; padding:.2rem; border-radius:var(--r-sm);
         background:var(--glass); border:1px solid var(--hair); box-shadow:var(--shadow);
         backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
  .seg button { display:grid; place-items:center; width:1.9rem; height:1.65rem; font-size:.95rem;
                border:0; border-radius:6px; background:transparent; color:var(--text-3); cursor:pointer; }
  .seg button:hover { color:var(--text); }
  .seg button[aria-pressed=true] { background:var(--glass-2); color:var(--text);
                                   box-shadow:inset 0 0 0 1px var(--hair); }

  /* ── type ────────────────────────────────────────────────────────────── */
  h1 { font-size:2.1rem; letter-spacing:-.02em; line-height:1.15;
       background:linear-gradient(100deg,var(--text) 35%,var(--accent));
       -webkit-background-clip:text; background-clip:text;
       -webkit-text-fill-color:transparent; color:transparent; }
  .sub { color:var(--text-2); margin:.45rem 0 1.5rem; }
  h2 { display:flex; align-items:center; gap:.5rem; font-size:.8rem; text-transform:uppercase;
       letter-spacing:.06em; color:var(--text-3); font-weight:600; margin:1.8rem 0 .7rem; }
  h2 .ic { font-size:1.05rem; color:var(--text-2); }

  /* ── surfaces ────────────────────────────────────────────────────────── */
  .glass, .card, .note, .panel, .ep, .searchbar { background:var(--glass);
      border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow); }
  .glass, .note, .panel, .ep, .searchbar { backdrop-filter:blur(16px) saturate(150%);
      -webkit-backdrop-filter:blur(16px) saturate(150%); }
  /* Cards blur lighter: there are forty-odd of them and each frosted layer costs
     the compositor a readback. */
  .card { backdrop-filter:blur(8px) saturate(130%); -webkit-backdrop-filter:blur(8px) saturate(130%); }
  .note { padding:.85rem 1rem; font-size:.9rem; color:var(--text-2); margin-bottom:1.8rem; }
  /* Custom marker rather than list-style: a disc sits too heavy against text at
     this size, and the indent is easier to line up with the panel's padding. */
  .bullets { list-style:none; }
  .bullets li { position:relative; padding-left:1.1rem; margin:.3rem 0; }
  .bullets li::before { content:"›"; position:absolute; left:.15rem; color:var(--text-3); }
  .bullets li:first-child { margin-top:0; }
  .bullets li:last-child { margin-bottom:0; }
  .note code, .hint code { font-family:var(--font-mono); font-size:.92em; color:var(--text); }
  .note a, .hint a { color:var(--accent-text); }
  a { color:var(--accent-text); }

  /* ── search ──────────────────────────────────────────────────────────── */
  .searchbar { position:sticky; top:.75rem; z-index:5; display:flex; align-items:center;
               gap:.6rem; padding:.6rem .85rem; margin-bottom:1.2rem; }
  .searchbar .ic { font-size:1.05rem; color:var(--text-3); }
  .searchbar input { flex:1; min-width:0; font:inherit; font-size:.95rem; border:0;
                     background:transparent; color:var(--text); outline:none; }
  .searchbar input::placeholder { color:var(--text-3); }
  .searchbar:focus-within { border-color:var(--accent); box-shadow:var(--shadow),0 0 0 3px var(--wash-2); }
  .kbd { font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); border:1px solid var(--hair);
         border-radius:5px; padding:.05rem .35rem; }
  .clear { display:none; border:0; background:transparent; color:var(--text-3);
           cursor:pointer; font-size:1rem; line-height:1; padding:.1rem; }
  .clear:hover { color:var(--text); }
  .count { color:var(--text-3); font-size:.85rem; margin:-.5rem 0 1rem; }
  .noresult { padding:2rem 1rem; text-align:center; color:var(--text-3); }

  /* ── scenario cards ──────────────────────────────────────────────────── */
  .card { display:flex; align-items:flex-start; gap:.8rem; padding:.85rem 1rem; margin-bottom:.55rem;
          text-decoration:none; color:inherit;
          transition:transform .15s, border-color .15s, box-shadow .15s; }
  .card:hover { transform:translateY(-1px); border-color:var(--hair-2); }
  .card .badge { display:grid; place-items:center; width:2rem; height:2rem; border-radius:var(--r-sm);
                 background:var(--glass-2); border:1px solid var(--hair); color:var(--text-2);
                 font-size:1rem; flex:none; }
  .card .body { flex:1; min-width:0; }
  .card .id { font-family:var(--font-mono); font-size:.85rem; font-weight:700; color:var(--text); }
  .card .t { color:var(--text); font-weight:600; margin-left:.45rem; }
  .card .sym { display:block; color:var(--text-2); font-size:.85rem; margin-top:.15rem; }
  .card .go { color:var(--text-3); font-size:1rem; opacity:0; transition:opacity .15s; align-self:center; }
  .card:hover .go { opacity:1; }

  /* ── scenario docs ───────────────────────────────────────────────────── */
  .ep { font-family:var(--font-mono); padding:.6rem .8rem; font-size:.85rem;
        color:var(--text); word-break:break-all; margin:.4rem 0; border-radius:var(--r-sm); }
  .eprow { display:flex; align-items:center; gap:.75rem; }
  .eprow span { flex:1; min-width:0; }
  .field { margin:1.6rem 0; }
  .field .label { display:flex; align-items:center; gap:.45rem; font-size:.76rem; text-transform:uppercase;
                  letter-spacing:.07em; color:var(--text-2); font-weight:600; margin-bottom:.15rem; }
  .field .val { color:var(--text-2); margin-top:.25rem; }
  .mono { font-family:var(--font-mono); color:var(--text-2); }

  /* ── symptom / cause / fix ───────────────────────────────────────────── */
  /* These three are what the page is actually for, so they get the room: a
     surface each, a heading you can find while scrolling, and body text at the
     same size as prose rather than at caption size. */
  .fx { padding:1.1rem 1.2rem; margin:.9rem 0; }
  .fx-h { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .65rem; margin-bottom:.55rem; }
  .fx-i { display:grid; place-items:center; width:2.1rem; height:2.1rem; flex:none;
          border-radius:var(--r-sm); background:var(--glass-2); border:1px solid var(--hair);
          color:var(--text-2); font-size:1.1rem; }
  .fx h3 { font-size:1.12rem; font-weight:650; letter-spacing:-.015em; color:var(--text); }
  .fx-hint { font-size:.85rem; color:var(--text-3); }
  .fx-b { font-size:1rem; line-height:1.7; color:var(--text-2); }

  /* ── code blocks ─────────────────────────────────────────────────────── */
  .cb { margin:.5rem 0 0; border:1px solid var(--hair); border-radius:var(--r);
        background:var(--bg-2); overflow:hidden; }
  .cb-top { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem .4rem .9rem;
            border-bottom:1px solid var(--hair); }
  .cb-lang { flex:1; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
             text-transform:uppercase; color:var(--text-3); }
  .cb-copy { display:inline-flex; align-items:center; gap:.35rem; font:inherit; font-size:.75rem;
             color:var(--text-3); background:transparent; border:1px solid var(--hair);
             border-radius:6px; padding:.2rem .5rem; cursor:pointer; transition:color .15s,border-color .15s; }
  .cb-copy:hover { color:var(--text); border-color:var(--hair-2); }
  .cb-copy.ok, .cb-copy.ok .ic { color:var(--accent-text); border-color:var(--accent); }
  .cb pre { margin:0; padding:.9rem 1rem; overflow-x:auto; }
  .cb code { font-family:var(--font-mono); font-size:.82rem; line-height:1.8;
             color:var(--text-2); white-space:pre; }

  /* Syntax colours. Kept monochrome on purpose — weight and value separate the
     tokens, so the accent stays free to mean "this is the broken part". Both
     `fill` and `color` are set: the diagrams paint SVG text with one and the
     code blocks paint HTML text with the other, from the same rule. */
  .jk { color:var(--text); fill:var(--text); font-weight:700; }
  .js { color:var(--text-2); fill:var(--text-2); }
  .jv { color:var(--text); fill:var(--text); }
  .jp { color:var(--text-3); fill:var(--text-3); }
  .sh-cmd { color:var(--text); font-weight:700; }
  .sh-flag { color:var(--text-2); font-weight:600; }
  .sh-url { color:var(--accent-text); }
  .sh-str { color:var(--text-2); }
  .sh-punct { color:var(--text-3); }

  /* ── /help rows ──────────────────────────────────────────────────────── */
  .row { margin:.5rem 0; }
  .row .meta { display:flex; align-items:center; gap:.4rem; font-size:.85rem; margin-bottom:.2rem; }
  .row .meta .ic { color:var(--text-3); }
  .row .id { font-family:var(--font-mono); font-weight:700; color:var(--text); }
  .row .t { color:var(--text-2); }
  .urlrow { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; cursor:pointer;
            font-family:var(--font-mono); font-size:.82rem; color:var(--text-2); padding:.5rem .7rem;
            background:var(--glass); border:1px solid var(--hair); border-radius:var(--r-sm);
            backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
            transition:border-color .15s,color .15s; }
  .urlrow span { flex:1; min-width:0; word-break:break-all; }
  .urlrow .ic { color:var(--text-3); }
  .urlrow:hover { border-color:var(--hair-2); color:var(--text); }
  .urlrow.ok, .urlrow.ok .ic { color:var(--accent-text); border-color:var(--accent); }

  @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

  .dgwrap { overflow-x:auto; padding:.6rem .2rem .3rem; }
  .dg { display:block; width:100%; min-width:620px; height:auto; }
  .dg text { font-family:var(--font-mono); font-size:11px; }
  .dg .t { font-family:var(--font-sans); font-size:12.5px; font-weight:600; fill:var(--text); }
  .dg .idx { font-size:10.5px; fill:var(--text-3); letter-spacing:.04em; }
  .dg .m { fill:var(--text-2); }
  .dg .n { font-family:var(--font-sans); font-size:11.5px; fill:var(--text-3); }
  .dg .more { fill:var(--text-3); font-style:italic; }
  .dg .bad { fill:var(--accent-text); font-weight:600; }
  .dg .ll { stroke:var(--hair-2); stroke-width:1; stroke-dasharray:3 4; }
  .dg .sep { stroke:var(--hair); stroke-width:1; }
  .dg .box { fill:var(--glass-2); stroke:var(--hair); stroke-width:1; }
  .dg .a { stroke:var(--text-3); stroke-width:1.3; }
  .dg .ah { fill:var(--text-3); }
  .dg line.bad { stroke:var(--accent); stroke-width:1.3; }
  .dg .badh { fill:var(--accent); }
  /* The body panel is opaque on purpose: it sits over the lifelines, and the
     page's glass tokens would let them show through the code. */
  .dg .pane { fill:var(--bg-2); stroke:var(--hair); stroke-width:1; }
  .dg .code { font-size:11px; }
  /* .jk/.js/.jv/.jp — the JSON token colours — are shared with the page's code
     blocks and defined there, once, for both `fill` and `color`. */