:root{
    /* Electric Shadows Color System */
    --bg-primary:#000000;
    --bg-secondary:#0a0a0a;
    --bg-tertiary:#111111;
    --mint:#00ff9f;
    --magenta:#ff006e;
    --yellow:#ffbe0b;
    --cyan:#00d9ff;
    --txt:#e8e9ed;
    --txt-2:#8892a6;
    --txt-muted:#707d92;
    --hairline:rgba(255,255,255,0.08);
    --hairline-2:rgba(255,255,255,0.06);
    --card-shadow:0 2px 8px -2px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.05);
    --radius:0.75rem;
    /* shared motion language: one decel curve for every transition */
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-smooth:cubic-bezier(.4,0,.2,1);     /* eases in and out - no snap at either end */
    --serif:'Inter',-apple-system,system-ui,sans-serif;
    --mono:'DM Mono',ui-monospace,Consolas,monospace;
    /* semantic tokens (drive both themes) */
    --mint-rgb:0,255,159;
    --magenta-rgb:255,0,110;
    --yellow-rgb:255,190,11;
    --cyan-rgb:0,217,255;
    --pink:#ff5b9c;
    --txt-strong:#ffffff;
    --on-accent:#04160f;
    --ink-rgb:255,255,255;
    --card-rgb:17,17,17;
    --bar-bg:rgba(0,0,0,0.72);
    --float-bg:rgba(10,14,12,0.82);
    --grid-ink:rgba(255,255,255,0.22);
    --fade-rgb:0,0,0;
    --fade-shade:0;
    --code-txt:#c8d2e0;
    --neutral:#3a3f4a;
    --neutral-txt:#cfd6e0;
    --dash:#555;
    --panel-key:rgba(15,28,22,.6);
    --panel-warn:rgba(30,24,8,.6);
    --panel-tip:rgba(10,26,32,.6);
    color-scheme:dark;
    --accent-mono:'Inter',-apple-system,system-ui,sans-serif;
  }

  /* ================= LIGHT THEME =================
     The ground is a neutral white ramp - bright white cards over a slightly
     darker page over darker recessed insets - with black hairlines, shadows
     and grid lines, so no tint fights the content. All the colour lives on
     the components: four hues on Apple's tinted-fill pattern - a
     low-alpha vivid fill, a stronger tinted border, an accessible ink for
     the label. Green is the lead (the menubar pill); amber, rose and sky
     do the rest. No coloured glow - that idiom stays in the dark theme. */
  :root[data-theme="light"]{
    color-scheme:light;
    /* surfaces */
    --bg-primary:#f4f4f4;      /* page  - slightly darker white */
    --bg-secondary:#ececec;    /* recessed inset: pre, th, details, flow */
    --bg-tertiary:#ffffff;     /* raised: sections, cards - bright white */
    --card-rgb:255,255,255;
    /* accents - ink = accessible label, -rgb = vivid fill/border */
    --mint:#007a4c;   --mint-rgb:0,200,126;    /* the menubar green */
    --cyan:#0b6fa8;   --cyan-rgb:14,165,233;   /* sky */
    --magenta:#c81e5b;--magenta-rgb:244,63,94; /* rose */
    --yellow:#9c5a00; --yellow-rgb:249,146,20; /* amber */
    --pink:#c81e5b;
    /* warm label ramp */
    --txt:#1c1c1c;
    --txt-2:#565656;
    --txt-muted:#646464;
    --txt-strong:#111111;
    --on-accent:#ffffff;
    /* warm neutral ink drives every hairline, overlay, grid line and shadow */
    --ink-rgb:0,0,0;
    --hairline:rgba(0,0,0,0.13);
    --hairline-2:rgba(0,0,0,0.08);
    --grid-ink:rgba(0,0,0,0.30);
    --fade-rgb:244,244,244;
    --fade-shade:0.11;
    /* elevation - warm, layered, soft */
    --shadow-1:0 1px 2px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.06);
    --shadow-2:0 2px 4px rgba(0,0,0,.07),0 8px 20px -6px rgba(0,0,0,.14);
    --shadow-3:0 4px 10px rgba(0,0,0,.09),0 20px 50px -14px rgba(0,0,0,.26);
    --card-shadow:0 1px 1px rgba(0,0,0,.04),0 4px 14px -4px rgba(0,0,0,.10);
    /* materials */
    --bar-bg:rgba(255,255,255,0.82);
    --float-bg:rgba(255,255,255,0.82);
    /* misc */
    --code-txt:#333333;
    --neutral:#d4d4d4;
    --neutral-txt:#3d3d3d;
    --dash:#ababab;
    --hit-a:.3;
    --panel-key:rgba(var(--mint-rgb),0.16);
    --panel-warn:rgba(var(--yellow-rgb),0.18);
    --panel-tip:rgba(var(--cyan-rgb),0.16);
  }
  /* --- light: no coloured glow. Decorative halos are simply removed --- */
  :root[data-theme="light"] .tab-hl,
  :root[data-theme="light"] .tab.active,
  :root[data-theme="light"] .lang-pop a.active,
  :root[data-theme="light"] .gate-box.vuln,
  :root[data-theme="light"] .stage-num,
  :root[data-theme="light"] .rez0-stage.report .stage-num,
  :root[data-theme="light"] section h3:before,
  :root[data-theme="light"] #panel-lab .wl-input:focus,
  :root[data-theme="light"] #panel-lab .wl-sel.open .wl-sel-btn,
  :root[data-theme="light"] #panel-lab .wl-sel-list li[aria-selected="true"]{box-shadow:none;text-shadow:none}
  :root[data-theme="light"] #panel-lab .wl-btn{box-shadow:var(--shadow-1)}
  /* mint on a mint tint drops under AA on white, so the light fills are lighter */
  :root[data-theme="light"] #panel-lab .wl-btn{background:rgba(var(--mint-rgb),.09)}
  :root[data-theme="light"] #panel-lab .wl-btn:hover:not(:disabled){background:rgba(var(--mint-rgb),.16)}
  :root[data-theme="light"] #panel-lab .wl-sel-list li[aria-selected="true"]{background:rgba(var(--mint-rgb),.08)}
  /* ...and load-bearing ones become warm elevation */
  :root[data-theme="light"] .search-trigger:hover,
  :root[data-theme="light"] .share-trigger:hover,
  :root[data-theme="light"] .to-top:hover{box-shadow:var(--shadow-1)}
  :root[data-theme="light"] .flow-opt:hover,
  :root[data-theme="light"] .pipe-step:hover,
  :root[data-theme="light"] .pipe-step.report:hover,
  :root[data-theme="light"] .arch-opt.active,
  :root[data-theme="light"] .share-toast{box-shadow:var(--shadow-2)}
  :root[data-theme="light"] #m-rez0{box-shadow:var(--card-shadow)}
  :root[data-theme="light"] .cl-entry::before,
  :root[data-theme="light"] .cl-entry.latest::before{box-shadow:0 0 0 4px var(--bg-primary)}
  /* --- light: materials and elevation --- */
  :root[data-theme="light"] body:after{opacity:.055}
  :root[data-theme="light"] .tabbar{background:rgba(255,255,255,.72);box-shadow:var(--shadow-1)}
  :root[data-theme="light"] .lang-pop{background:rgba(255,255,255,.94);box-shadow:var(--shadow-3)}
  :root[data-theme="light"] .arch-col{background:rgba(255,255,255,.74)}
  :root[data-theme="light"] .tabbar.stuck{box-shadow:var(--shadow-2)}
  :root[data-theme="light"] .to-top,
  :root[data-theme="light"] .zoom-ctl{box-shadow:var(--shadow-1)}
  :root[data-theme="light"] .search-modal{background:rgba(0,0,0,.34)}
  :root[data-theme="light"] .search-box,
  :root[data-theme="light"] .search-results,
  :root[data-theme="light"] .share-menu,
  :root[data-theme="light"] #panel-lab .wl-card,
  :root[data-theme="light"] #panel-lab .wl-sel-list{box-shadow:var(--shadow-3)}
  :root[data-theme="light"] .search-box{border-color:rgba(var(--mint-rgb),.4)}
  /* --- light: colour on the surfaces that carry the page --- */
  :root[data-theme="light"] code{background:rgba(var(--mint-rgb),.15);border-color:rgba(var(--mint-rgb),.30)}
  :root[data-theme="light"] pre code{background:none;border:0}
  :root[data-theme="light"] th{background:rgba(var(--mint-rgb),.13)}
  :root[data-theme="light"] .lever{background:rgba(var(--mint-rgb),.09)}
  :root[data-theme="light"] .pill,
  :root[data-theme="light"] .t-high{background:rgba(var(--mint-rgb),.16)}
  :root[data-theme="light"] .t-mod{background:rgba(var(--yellow-rgb),.20)}
  :root[data-theme="light"] .t-low{background:rgba(var(--magenta-rgb),.16)}
  :root[data-theme="light"] #m-rez0{background:rgba(var(--cyan-rgb),.08)}
  :root[data-theme="light"] .rez0-head{background:rgba(var(--cyan-rgb),.16)}
  :root[data-theme="light"] .stage-num,
  :root[data-theme="light"] .dstep .dn{background:rgba(var(--mint-rgb),.16)}
  :root[data-theme="light"] .rez0-stage.report .stage-num{background:rgba(var(--cyan-rgb),.16)}
  :root[data-theme="light"] nav a:hover{background:rgba(var(--mint-rgb),.15)}
  :root[data-theme="light"] .sm-item:hover,
  :root[data-theme="light"] .sm-item:focus-visible{background:rgba(var(--mint-rgb),.14)}
  :root[data-theme="light"] .search-results a:hover,
  :root[data-theme="light"] .search-results a.sel{background:rgba(var(--mint-rgb),.13)}
  :root[data-theme="light"] .grad{background-image:linear-gradient(90deg,#007a4c,#0b6fa8,#7028d0,#c81e5b,#9c5a00,#007a4c)}
  /* theme toggle icon swap */
  #themeToggle .t-sun{display:none}
  :root[data-theme="light"] #themeToggle .t-sun{display:inline}
  :root[data-theme="light"] #themeToggle .t-moon{display:none}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--bg-primary)}
  body{margin:0;background:var(--bg-primary);color:var(--txt);
    font-family:var(--serif);line-height:1.6;font-size:18.5px;letter-spacing:-0.011em;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative}
  body:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.18;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");}
  /* Dashed grid pattern with center spotlight fade */
  .grid-bg{position:fixed;inset:0;z-index:0;color:var(--grid-ink);width:100%;height:100%;pointer-events:none;overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse at center, black 45%, transparent 100%);
    mask-image:radial-gradient(ellipse at center, black 45%, transparent 100%);}
  .grid-bg svg{display:block;width:100%;height:100%}
  header.top,.wrap,footer{position:relative;z-index:1}

  a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s var(--ease)}
  a:hover{color:var(--mint);border-bottom-color:var(--mint)}

  /* themed scrollbars */
  *{scrollbar-width:thin;scrollbar-color:rgba(var(--ink-rgb),0.16) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),0.14);border-radius:9999px;border:3px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(var(--mint-rgb),0.5);background-clip:padding-box}

  /* ---------- header ---------- */
  header.top{max-width:1280px;margin:0 auto;padding:72px 40px 34px;text-align:center;position:relative;z-index:20}
  header.top h1{margin:0 0 16px;font-family:var(--mono);font-weight:700;
    font-size:48.5px;line-height:1.05;letter-spacing:-0.03em;color:var(--txt-strong);
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
  header.top p{font-family:var(--accent-mono);margin:8px auto;color:var(--txt-2);
    font-size:16px;line-height:1.6;letter-spacing:-0.01em;max-width:720px}
  header.top p.kbd{color:var(--txt-muted);font-size:15px}
  .brand-mark{flex:0 0 auto;display:block}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ---------- tabs ---------- */
  /* segmented translucent menubar (Apple-fluid) with soft mint-glass spring highlight */
  /* the menubar IS the floating bar: it sticks to the top on scroll */
  .tabbar{position:sticky;top:10px;display:flex;gap:2px;width:max-content;max-width:calc(100% - 32px);
    margin:6px auto;padding:5px;border-radius:15px;border:1px solid var(--hairline);
    background:rgba(var(--ink-rgb),.04);
    /* in flow it only needs to clear page content; staying under the header
       (z 20) lets the language popup inside the header open over it */
    z-index:19;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -16px rgba(0,0,0,.8);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    transition:background .55s var(--ease-smooth),box-shadow .55s var(--ease-smooth)}
  /* once it detaches it becomes an opaque material floating over the content */
  .tabbar.stuck{z-index:50;background:var(--bar-bg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px -14px rgba(0,0,0,.9)}
  @media (max-width:760px){.tabbar{top:8px}}
  /* brand rides along only once the bar has detached */
  /* 0fr -> 1fr animates to the exact content width, so the reveal never
     stalls early the way a max-width transition does */
  .tb-brand{display:grid;grid-template-columns:0fr;flex:0 0 auto;cursor:pointer;
    opacity:0;margin-right:0;
    transition:grid-template-columns .68s var(--ease-smooth),
      opacity .5s var(--ease-smooth) .1s,
      margin-right .68s var(--ease-smooth)}
  .tabbar.stuck .tb-brand{grid-template-columns:1fr;opacity:1;margin-right:8px}
  .tb-brand > i{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;
    white-space:nowrap;font-style:normal;padding-left:5px;
    transform:translateX(-12px);
    transition:transform .68s var(--ease-smooth)}
  .tabbar.stuck .tb-brand > i{transform:none}
  .tb-brand svg{flex:0 0 auto;display:block}
  .tb-brand b{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--txt-strong);letter-spacing:-.01em}
  @media (max-width:900px){.tabbar.stuck .tb-brand{grid-template-columns:0fr;opacity:0;margin-right:0}}
  .tabbar::-webkit-scrollbar{display:none}
  .tab-hl{position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:10px;
    background:rgba(var(--mint-rgb),.14);border:1px solid rgba(var(--mint-rgb),.38);
    -webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%);
    pointer-events:none;z-index:0;will-change:transform,width;
    box-shadow:0 0 20px rgba(var(--mint-rgb),.16),inset 0 1px 0 rgba(255,255,255,.12)}
  .tab{position:relative;z-index:1;flex:0 0 auto;font-family:var(--mono);font-size:14px;font-weight:600;
    letter-spacing:.01em;color:var(--txt-2);background:none;border:0;white-space:nowrap;
    padding:8px 13px;border-radius:10px;cursor:pointer;transition:color .2s var(--ease)}
  .tab{text-decoration:none;line-height:normal;-webkit-tap-highlight-color:transparent}
  .tab-panel:focus,.tab-panel:focus-visible{outline:none}
  .tab:hover{color:var(--txt-strong)}
  .tab.active{color:var(--mint);text-shadow:0 0 12px rgba(var(--mint-rgb),.35)}
  /* about page */
  .about-wrap{max-width:780px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  .about-wrap p{margin:0 0 14px}
  .about-wrap p:last-child{margin-bottom:0}
  .about-wrap a.mint{color:var(--mint)}
  .grad{background:linear-gradient(90deg,#13d98e,#00d9ff,#b06bff,#00d9ff,#13d98e);background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:gradmove 5s linear infinite}
  @keyframes gradmove{0%{background-position:0% center}100%{background-position:200% center}}
  @media (prefers-reduced-motion:reduce){.grad{animation:none}}
  @media (max-width:760px){.about-wrap{padding:0 22px 70px}}
  /* fitted sticky header (appears on scroll) */
  /* everything that scrolls past the top edge dissolves into this - the hero
     header included, which is why its opacity is scroll-linked rather than
     toggled: it ramps in over the first 90px so the title fades as it rises.
     Sits above the header (z 20) and below the sticky menubar (z 50). */
  .top-fade{position:fixed;top:0;left:0;right:0;height:120px;z-index:45;pointer-events:none;
    opacity:0;will-change:opacity;
    background:
      linear-gradient(180deg,rgba(0,0,0,var(--fade-shade)) 0%,rgba(0,0,0,0) 74%),
      linear-gradient(180deg,rgba(var(--fade-rgb),1) 0%,rgba(var(--fade-rgb),.97) 52%,rgba(var(--fade-rgb),0) 100%)}
  @media (max-width:760px){.top-fade{height:96px}}
  /* footer credit */
  .site-footer{position:relative;z-index:1;max-width:1280px;margin:56px auto 0;
    padding:22px 40px 30px;border-top:1px solid var(--hairline);text-align:center;
    font-family:var(--accent-mono);font-size:13px;color:var(--txt-muted);letter-spacing:.01em}
  .site-footer .mint{color:var(--mint)}
  .site-footer a.mint{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease)}
  .site-footer a.mint:hover{border-bottom-color:var(--mint)}
  /* back-to-top button */
  .to-top{position:fixed;right:24px;bottom:24px;z-index:50;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:var(--float-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--hairline);border-radius:10px;
    transform:translateY(12px) scale(.92);opacity:0;pointer-events:none;
    transition:transform .24s var(--ease),opacity .24s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
  .to-top.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
  .to-top:hover{border-color:rgba(var(--mint-rgb),0.45);box-shadow:0 0 20px rgba(var(--mint-rgb),0.28)}
  @media (max-width:760px){.to-top{right:16px;bottom:16px}}
  /* in-app text zoom */
  .zoom-ctl{position:fixed;left:24px;bottom:24px;z-index:50;display:flex;align-items:center;gap:1px;
    background:var(--float-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--hairline);border-radius:10px;padding:3px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
  .zoom-ctl:hover{border-color:rgba(var(--mint-rgb),0.3)}
  .zoom-ctl button{background:none;border:0;color:var(--txt-2);cursor:pointer;font-family:var(--mono);
    font-weight:700;font-size:14px;border-radius:7px;padding:6px 9px;transition:all .15s var(--ease)}
  .zoom-ctl button:hover{color:var(--txt-strong);background:rgba(var(--ink-rgb),0.06)}
  .zoom-ctl #zoomVal{font-size:11.5px;font-weight:600;min-width:44px;text-align:center;color:var(--txt-muted)}
  @media (max-width:760px){.zoom-ctl{left:16px;bottom:16px}}
  .zc-sep{width:1px;align-self:stretch;margin:4px 1px;background:var(--hairline)}
  .zoom-ctl button svg{display:block}
  .zoom-ctl button.on{color:var(--mint)}
  /* global search (icon + modal) */
  .search-trigger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    flex:0 0 auto;cursor:pointer;background:none;border:1px solid var(--hairline);border-radius:9px;
    color:var(--txt-2);transition:border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
  .search-trigger:hover{color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.45);box-shadow:0 0 16px rgba(var(--mint-rgb),.2)}
  .hero-actions{position:absolute;top:24px;right:28px;display:flex;align-items:center;gap:8px}
  @media (max-width:760px){.hero-actions{top:14px;right:14px}}
  /* language dropdown (minimal) */
  .lang-menu{position:relative;display:inline-flex;flex:0 0 auto}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;
    background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:9px;cursor:pointer;
    font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--txt-2);
    transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
  .lang-btn:hover{color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.4)}
  .lang-btn .globe{color:var(--mint);flex:0 0 auto}
  .lang-btn .chev{flex:0 0 auto;opacity:.7;transition:transform .2s var(--ease)}
  .lang-menu[data-open] .lang-btn{color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.4)}
  .lang-menu[data-open] .lang-btn .chev{transform:rotate(180deg)}
  .lang-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:150px;max-width:calc(100vw - 20px);
    display:none;flex-direction:column;gap:2px;padding:5px;
    background:rgba(255,255,255,.05);border:1px solid var(--hairline);border-radius:15px;
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);transform-origin:top right}
  .lang-menu[data-open] .lang-pop{display:flex;animation:langPop .16s var(--ease)}
  @keyframes langPop{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}
  /* options mirror the menubar tabs; current = soft mint-glass highlight */
  .lang-pop a{display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:10px;
    font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.01em;
    color:var(--txt-2);text-decoration:none;white-space:nowrap;border:1px solid transparent;
    transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
  .lang-pop a:hover{color:var(--txt-strong)}
  .lang-pop a.active{color:var(--mint);text-shadow:0 0 12px rgba(var(--mint-rgb),.35);pointer-events:none;
    background:rgba(var(--mint-rgb),.14);border-color:rgba(var(--mint-rgb),.38);
    box-shadow:0 0 20px rgba(var(--mint-rgb),.16),inset 0 1px 0 rgba(255,255,255,.12)}

  /* ---------- share (title easter-egg + header button) ---------- */
  .share-trigger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:10px;background:var(--bg-tertiary);border:1px solid var(--hairline);color:var(--txt-2);cursor:pointer;transition:.2s var(--ease)}
  .share-trigger:hover{color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.45);box-shadow:0 0 16px rgba(var(--mint-rgb),.2)}
  .share-menu{position:absolute;z-index:120;min-width:212px;background:var(--bg-secondary);
    border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--card-shadow),0 12px 44px -8px rgba(0,0,0,.72);
    padding:12px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease)}
  .share-menu.show{opacity:1;transform:none;pointer-events:auto}
  .sm-head{font-family:var(--mono);font-size:12.5px;color:var(--txt-2);margin:0 2px 10px;font-weight:600}
  .sm-head span{font-size:14px}
  .sm-row{display:flex;flex-direction:column;gap:4px}
  .sm-item{all:unset;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;box-sizing:border-box;
    font-family:var(--accent-mono);font-size:14.5px;color:var(--txt);cursor:pointer}
  .sm-item:hover,.sm-item:focus-visible{background:rgba(var(--mint-rgb),.08);color:var(--txt-strong)}
  .sm-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;
    background:var(--bg-tertiary);border:1px solid var(--hairline);font-family:var(--mono);font-size:12px;color:var(--mint);flex:0 0 auto}
  .share-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);z-index:200;
    font-family:var(--mono);font-size:13px;color:var(--on-accent);background:var(--mint);padding:9px 16px;border-radius:20px;
    font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:0 6px 24px -6px rgba(var(--mint-rgb),.5)}
  .share-toast.show{opacity:1;transform:translate(-50%,0)}
  .search-modal{position:fixed;inset:0;z-index:100;display:none;background:rgba(0,0,0,.62);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .search-modal.show{display:block;animation:scrimIn .2s var(--ease)}
  .search-modal.show .search-box{animation:popIn .26s var(--ease)}
  @keyframes scrimIn{from{opacity:0}to{opacity:1}}
  @keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
  .search-modal-inner{width:min(680px,92vw);margin:13vh auto 0}
  .search-box{display:flex;align-items:center;gap:10px;background:var(--bg-tertiary);
    border:1px solid rgba(var(--mint-rgb),.35);border-radius:12px;padding:13px 16px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
  .search-box svg{flex:0 0 auto;color:var(--txt-muted)}
  .search-box input{flex:1;background:none;border:none;outline:none;color:var(--txt);
    font-family:var(--accent-mono);font-size:16px;min-width:0}
  .search-box input::placeholder{color:var(--txt-muted)}
  .search-box kbd{font-family:var(--mono);font-size:11px;color:var(--txt-muted);
    border:1px solid var(--hairline);border-radius:4px;padding:1px 6px}
  .search-results{margin-top:10px;background:var(--bg-secondary);border:1px solid var(--hairline);
    border-radius:12px;max-height:60vh;overflow-y:auto;display:none;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .search-results.show{display:block;animation:popIn .24s var(--ease)}
  .search-results li{list-style:none}
  .search-results a{display:flex;flex-direction:column;gap:3px;padding:11px 16px;cursor:pointer;
    border-bottom:1px solid var(--hairline)}
  .search-results a:last-child{border-bottom:none}
  .search-results a:hover,.search-results a.sel{background:var(--bg-tertiary)}
  .search-results .r-tab{font-family:var(--mono);font-size:11px;color:var(--mint);
    text-transform:uppercase;letter-spacing:.08em}
  .search-results .r-title{font-family:var(--accent-mono);font-size:14px;color:var(--txt)}
  .search-results .r-empty{padding:12px 16px;color:var(--txt-muted);font-family:var(--accent-mono);font-size:13px}
  .search-hit{animation:hitflash 1.7s var(--ease)}
  @keyframes hitflash{0%,100%{background:transparent}14%{background:rgba(var(--mint-rgb),var(--hit-a,.16))}}
  /* start here */
  .start-here{border:1px solid rgba(var(--mint-rgb),.28);border-radius:12px;background:var(--panel-key);backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);
    padding:16px 18px;margin:0 0 26px}
  .start-here .sh-tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:7px}
  .start-here p{margin:0;font-family:var(--accent-mono);font-size:14.5px;line-height:1.65;color:var(--txt-2)}
  .start-here b{color:var(--txt)}
  .start-here kbd{font-family:var(--mono);font-size:12px;color:var(--mint);
    border:1px solid var(--hairline);border-radius:4px;padding:1px 6px}
  .tab-panel{display:none;animation:panel-in .34s cubic-bezier(.22,.61,.36,1);zoom:var(--content-zoom,1)}
  .tab-panel.active{display:block}
  .tab-panel.leaving{display:block;animation:panel-out .15s var(--ease) forwards}
  @keyframes panel-in{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
  @keyframes panel-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.995)}}
  @media (prefers-reduced-motion:reduce){.tab-panel,.tab-panel.leaving{animation:none}}

  /* ---------- changelog / news ---------- */
  .cl-wrap{max-width:860px;margin:0 auto;padding:6px 0 40px}
  .cl-lede{color:var(--txt-2);font-size:16.5px;line-height:1.6;margin:0 0 30px}
  .cl-feed{position:relative}
  .cl-entry{position:relative;border-left:2px solid var(--hairline);padding:0 0 30px 26px}
  .cl-entry:last-child{padding-bottom:6px;border-left-color:transparent}
  .cl-entry::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;
    background:var(--mint);box-shadow:0 0 0 4px var(--bg-primary),0 0 10px rgba(var(--mint-rgb),0.45)}
  .cl-entry.latest::before{background:var(--magenta);box-shadow:0 0 0 4px var(--bg-primary),0 0 12px rgba(var(--magenta-rgb),0.55)}
  .cl-date{font-family:var(--mono);font-size:13px;color:var(--mint);font-weight:700;letter-spacing:.03em}
  .cl-entry.latest .cl-date{color:var(--magenta)}
  .cl-new{display:inline-block;margin-left:9px;font-family:var(--mono);font-size:10px;font-weight:700;
    padding:1px 7px;border-radius:20px;background:var(--magenta);color:var(--on-accent);vertical-align:middle;letter-spacing:.06em}
  .cl-title{font-size:18.5px;font-weight:700;margin:5px 0 9px;color:var(--txt)}
  .cl-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
  .cl-list li{position:relative;padding-left:17px;font-size:16px;line-height:1.55;color:var(--txt-2)}
  .cl-list li::before{content:"\25B8";position:absolute;left:0;top:1px;color:var(--mint);font-size:12px}
  .cl-list li b{color:var(--txt);font-weight:600}
  .cl-list a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(var(--cyan-rgb),0.3)}
  .cl-list a:hover{border-bottom-color:var(--cyan)}

  /* ---------- attack flow (decision tree) ---------- */
  .flow-wrap{max-width:880px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  .flow-intro h2{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-.02em;
    color:var(--txt-strong);margin:0 0 8px}
  .flow-path{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:18px 0;font-family:var(--mono)}
  .crumb{font-size:12.5px;padding:3px 10px;border:1px solid var(--hairline);border-radius:20px;
    color:var(--txt-2);background:var(--bg-tertiary);white-space:nowrap}
  .crumb.active{color:var(--on-accent);background:var(--mint);border-color:var(--mint);font-weight:600}
  .crumb-sep{color:var(--txt-muted);font-size:12.5px}
  .flow-card{background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:14px;
    padding:26px 30px;box-shadow:var(--card-shadow);animation:panel-in .25s var(--ease)}
  .flow-meta{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .flow-phase{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--txt-muted);border:1px solid var(--hairline);padding:3px 10px;border-radius:20px}
  .flow-type{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;
    padding:3px 10px;border-radius:20px;text-transform:uppercase}
  .flow-type.t-decision{background:rgba(var(--mint-rgb),.10);color:var(--mint);border:1px solid rgba(var(--mint-rgb),.35)}
  .flow-type.t-action{background:rgba(var(--cyan-rgb),.10);color:var(--cyan);border:1px solid rgba(var(--cyan-rgb),.35)}
  .flow-type.t-phase{background:rgba(var(--yellow-rgb),.10);color:var(--yellow);border:1px solid rgba(var(--yellow-rgb),.35)}
  .flow-q{font-family:var(--mono);font-size:23px;font-weight:700;color:var(--txt-strong);margin:2px 0 14px;
    letter-spacing:-.01em;line-height:1.25}
  .flow-do{color:var(--txt);font-size:17px;line-height:1.6}
  .flow-do ul{margin:8px 0;padding-left:20px}
  .flow-do li{margin:5px 0}
  .flow-do li::marker{color:var(--mint)}
  .flow-do pre{margin:8px 0 12px}
  .flow-do b{color:var(--txt-strong)}
  .flow-do .sh{display:block;margin:14px 0 4px;color:var(--cyan);font-weight:700}
  .flow-do .sh:first-child{margin-top:0}
  .flow-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .flow-opt{font-family:var(--mono);font-size:15.5px;font-weight:600;color:var(--txt);
    background:var(--bg-secondary);border:1px solid var(--hairline);border-radius:6px;
    padding:12px 18px;cursor:pointer;transition:all .16s var(--ease);text-align:left}
  .flow-opt:hover{color:var(--on-accent);background:var(--mint);border-color:var(--mint);
    box-shadow:0 0 20px rgba(var(--mint-rgb),.30);transform:translateY(-1px)}
  .flow-opt.no:hover{background:var(--txt-2);border-color:var(--txt-2);box-shadow:none;color:var(--on-accent)}
  .flow-controls{display:flex;gap:10px;margin-top:18px}
  .flow-controls button{font-family:var(--mono);font-size:14.5px;color:var(--txt-2);
    background:transparent;border:1px solid var(--hairline);border-radius:6px;padding:8px 16px;
    cursor:pointer;transition:all .15s var(--ease)}
  .flow-controls button:hover:not(:disabled){color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.4)}
  .flow-controls button:disabled{opacity:.35;cursor:not-allowed}
  @media(max-width:1000px){.flow-wrap{padding:18px 20px 80px}.flow-q{font-size:20.5px}}

  /* ---------- rez0 visual methodology ---------- */
  .rez0-wrap{max-width:1000px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  /* rez0 block: a visually distinct (cyan) card to mark it as a separate, bonus methodology */
  #m-rez0{max-width:none;margin:34px 0 28px;padding:0 28px 28px;
    background:rgba(var(--cyan-rgb),0.045);border:1px solid rgba(var(--cyan-rgb),0.3);border-radius:14px;
    box-shadow:0 0 36px rgba(var(--cyan-rgb),0.07)}
  .rez0-head{margin:0 -28px 20px;padding:15px 28px;background:rgba(var(--cyan-rgb),0.08);
    border-bottom:1px solid rgba(var(--cyan-rgb),0.25);border-radius:14px 14px 0 0}
  .rez0-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
    border:1px solid rgba(var(--cyan-rgb),0.45);border-radius:5px;padding:2px 8px;margin-bottom:8px}
  .rez0-head p{margin:0;font-family:var(--accent-mono);color:var(--txt-2);font-size:14px;line-height:1.6;max-width:760px}
  #m-rez0 h2{border-bottom:1px solid var(--hairline);padding-bottom:16px;color:var(--cyan)}
  .rez0-wrap h2{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--txt-strong);margin:0 0 8px}
  .rez0-cred{font-family:var(--accent-mono);font-size:14.5px;color:var(--txt-muted);margin:0 0 6px}
  .rez0-cred a{color:var(--cyan)}
  @media(max-width:680px){#m-rez0{padding:0 16px 18px}.rez0-head{margin:0 -16px 14px;padding:12px 16px}}
  /* gate equation */
  .rez0-gate{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:26px 0 6px}
  .gate-box{font-family:var(--mono);font-size:15.5px;font-weight:600;text-align:center;
    border:1px solid var(--hairline);border-radius:10px;padding:14px 20px;background:var(--bg-tertiary);
    color:var(--txt);box-shadow:var(--card-shadow);min-width:150px}
  .gate-box small{display:block;font-family:var(--accent-mono);font-weight:400;font-size:13px;color:var(--txt-muted);margin-top:4px}
  .gate-box.vuln{border-color:var(--mint);color:var(--mint);box-shadow:0 0 26px rgba(var(--mint-rgb),.30)}
  .gate-op{font-family:var(--mono);font-size:27.5px;font-weight:700;color:var(--txt-2)}
  .gate-note{text-align:center;font-family:var(--accent-mono);font-size:14.5px;color:var(--txt-muted);margin:10px 0 30px}
  .gate-note b{color:var(--yellow)}
  /* horizontal pipeline */
  .rez0-pipeline{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 36px}
  .pipe-step{font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--txt);
    background:var(--bg-secondary);border:1px solid var(--hairline);border-radius:6px;
    padding:11px 14px;cursor:pointer;transition:all .16s var(--ease);display:flex;flex-direction:column;gap:2px;min-width:108px;text-align:center}
  .pipe-step small{font-family:var(--accent-mono);font-weight:400;font-size:12.5px;color:var(--txt-muted)}
  .pipe-step:hover{color:var(--on-accent);background:var(--mint);border-color:var(--mint);box-shadow:0 0 18px rgba(var(--mint-rgb),.3)}
  .pipe-step:hover small{color:var(--on-accent)}
  .pipe-step.report{border-color:rgba(var(--cyan-rgb),.35)}
  .pipe-step.report:hover{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(var(--cyan-rgb),.3)}
  .pipe-arrow{display:flex;align-items:center;color:var(--mint);font-size:20.5px;font-weight:700}
  /* vertical stages */
  .rez0-stage{display:flex;gap:18px;background:var(--bg-tertiary);border:1px solid var(--hairline);
    border-radius:14px;padding:22px 24px;box-shadow:var(--card-shadow);scroll-margin-top:20px}
  .stage-num{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;font-size:23px;color:var(--mint);
    background:rgba(var(--mint-rgb),.08);border:1px solid rgba(var(--mint-rgb),.3);box-shadow:0 0 14px rgba(var(--mint-rgb),.2)}
  .rez0-stage.report .stage-num{color:var(--cyan);background:rgba(var(--cyan-rgb),.08);border-color:rgba(var(--cyan-rgb),.3);box-shadow:0 0 14px rgba(var(--cyan-rgb),.2)}
  .stage-body{flex:1;min-width:0}
  .stage-body h3{font-family:var(--serif);font-size:19.5px;font-weight:700;color:var(--txt-strong);margin:4px 0 4px;letter-spacing:-.01em}
  .stage-body .sdesc{font-family:var(--accent-mono);font-size:14.5px;color:var(--txt-2);margin:0 0 12px}
  .stage-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
  .chip{font-family:var(--mono);font-size:14px;color:var(--txt);background:var(--bg-secondary);
    border:1px solid var(--hairline);border-radius:8px;padding:7px 11px}
  .chip b{color:var(--mint);font-weight:700}
  .stage-body pre{margin:10px 0 4px}
  .stage-conn{display:flex;justify-content:center;color:var(--mint);font-size:23px;line-height:1;margin:4px 0}
  .how-head{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cyan);margin:16px 0 2px}
  .how-list{margin:2px 0}
  .how-item{padding:10px 0;border-bottom:1px solid var(--hairline-2)}
  .how-item:last-child{border-bottom:none}
  .how-item .hl{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--mint)}
  .how-item .hx{color:var(--txt);font-size:16px}
  .how-item pre{margin:7px 0 0}
  @media(max-width:1000px){.rez0-wrap{padding:18px 20px 80px}.rez0-stage{flex-direction:column;gap:12px}}

  /* ---------- architecture diagram ---------- */
  .arch-wrap{max-width:1000px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  .arch-wrap h2{font-family:var(--serif);font-weight:700;font-size:27.5px;letter-spacing:-.02em;color:var(--txt-strong);margin:0 0 8px}
  .arch-diagram{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap;margin:24px 0 14px}
  .arch-col{flex:1;min-width:180px;background:rgba(var(--card-rgb),.6);backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);border:1px solid var(--hairline);
    border-radius:12px;padding:15px;box-shadow:var(--card-shadow)}
  .arch-col.big{flex:1.5;border-color:rgba(var(--mint-rgb),.35)}
  .arch-head{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--mint);margin-bottom:3px}
  .arch-col.provider .arch-head{color:var(--cyan)}
  .arch-sub{font-family:var(--accent-mono);font-size:13.5px;color:var(--txt-muted);margin-bottom:8px}
  .arch-layer{font-family:var(--mono);font-size:14px;color:var(--txt);background:var(--bg-secondary);
    border:1px solid var(--hairline);border-radius:7px;padding:8px 11px;margin:6px 0}
  .arch-layer.key{color:var(--on-accent);background:var(--magenta);border-color:var(--magenta);font-weight:700}
  .arch-arrow{display:flex;align-items:center;color:var(--mint);font-size:24px;font-weight:700}
  /* interactive selector + scope states */
  .arch-select{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 6px}
  .arch-opt{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--txt);background:var(--bg-secondary);
    border:1px solid var(--hairline);border-radius:6px;padding:10px 15px;cursor:pointer;transition:all .16s var(--ease)}
  .arch-opt:hover{color:var(--txt-strong);border-color:rgba(var(--mint-rgb),.4)}
  .arch-opt.active{color:var(--on-accent);background:var(--mint);border-color:var(--mint);box-shadow:0 0 18px rgba(var(--mint-rgb),.3)}
  .arch-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;font-family:var(--accent-mono);
    font-size:13px;color:var(--txt-muted);margin:4px 0 16px}
  .arch-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
  .arch-legend b{width:11px;height:11px;border-radius:3px;display:inline-block}
  .lg-in{background:var(--mint)} .lg-out{background:var(--neutral)} .lg-na{background:transparent;border:1px dashed var(--dash)}
  .arch-layer{transition:all .2s var(--ease)}
  .arch-result{background:var(--bg-tertiary);border:1px solid var(--hairline);border-left:3px solid var(--mint);
    border-radius:10px;padding:16px 18px;margin-top:14px;font-size:15px;line-height:1.6}
  .arch-result h4{font-family:var(--mono);font-size:15px;color:var(--txt-strong);margin:0 0 8px}
  .arch-result .verdict{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--mint);letter-spacing:.04em;text-transform:uppercase}
  @media(max-width:1000px){.arch-wrap{padding:18px 20px 80px}.arch-arrow{transform:rotate(90deg);justify-content:center}}

  /* ---------- glossary ---------- */
  .gloss-wrap{max-width:920px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  .gloss-wrap h2{font-family:var(--serif);font-weight:700;font-size:27.5px;letter-spacing:-.02em;color:var(--txt-strong);margin:0 0 8px}
  .gl-search{width:100%;font-family:var(--mono);font-size:15px;color:var(--txt);background:var(--bg-tertiary);
    border:1px solid var(--hairline);border-radius:10px;padding:13px 15px;margin:16px 0 6px;outline:none;transition:all .15s var(--ease)}
  .gl-search::placeholder{color:var(--txt-muted)}
  .gl-search:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.12)}
  .gl-count{font-family:var(--accent-mono);font-size:12.5px;color:var(--txt-muted);margin:0 0 10px}
  .gl-item{padding:13px 2px;border-bottom:1px solid var(--hairline-2)}
  .gl-item:last-child{border-bottom:none}
  .gl-term{font-family:var(--mono);font-weight:700;font-size:15.5px;color:var(--mint);margin-bottom:3px}
  .gl-def{color:var(--txt);font-size:15.5px;line-height:1.55}
  .gl-web{color:var(--cyan);font-size:14px}
  .gl-empty{color:var(--txt-muted);font-family:var(--accent-mono);padding:18px 0;display:none}
  @media(max-width:1000px){.gloss-wrap{padding:18px 20px 80px}}

  /* ---------- foundation (visual intro) ---------- */
  .fnd-wrap{max-width:940px;margin:0 auto;padding:22px 40px 120px;position:relative;z-index:1}
  .fnd-wrap>h2{font-family:var(--serif);font-weight:700;font-size:27.5px;letter-spacing:-.02em;color:var(--txt-strong);margin:0 0 8px}
  .fnd-wrap h3{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--txt-strong);margin:36px 0 6px}
  .fnd-wrap p{font-size:16.5px;line-height:1.6;color:var(--txt);margin:8px 0}
  .diagram{display:flex;flex-direction:column;align-items:center;margin:18px 0;
    content-visibility:auto;contain-intrinsic-size:0 280px}
  .dbox{width:100%;max-width:580px;background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:6px;padding:14px 16px;box-shadow:var(--card-shadow)}
  .dbox .dt{font-family:var(--mono);font-weight:700;font-size:15.5px;color:var(--txt-strong)}
  .dbox .ds{font-size:14px;color:var(--txt-2);margin-top:3px}
  .dbox .dchip{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;vertical-align:middle}
  .dbox.app{border-color:rgba(var(--mint-rgb),.5)}
  .dbox.app .dchip{background:var(--mint);color:var(--on-accent)}
  .dbox.model{opacity:.72}
  .dbox.model .dchip{background:var(--neutral);color:var(--neutral-txt)}
  .darrow{color:var(--mint);font-size:20px;line-height:1;margin:7px 0}
  .dlayers{list-style:none;margin:8px 0 0;padding:0}
  .dlayers li{font-size:14.5px;color:var(--txt);padding:3px 0 3px 16px;position:relative}
  .dlayers li:before{content:"›";position:absolute;left:0;color:var(--mint)}
  .dladder{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;margin:18px 0}
  .drung{flex:1;min-width:150px;background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:6px;padding:13px;box-shadow:var(--card-shadow)}
  .drung .dt{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--mint)}
  .drung .ds{font-size:13.5px;color:var(--txt-2);margin-top:4px;line-height:1.5}
  .dsep{display:flex;align-items:center;color:var(--mint);font-size:18px;font-weight:700}
  .dstep{display:flex;gap:14px;width:100%;max-width:640px;background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:6px;padding:13px 15px;box-shadow:var(--card-shadow)}
  .dstep .dn{flex:0 0 auto;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;color:var(--mint);background:rgba(var(--mint-rgb),.08);border:1px solid rgba(var(--mint-rgb),.3)}
  .dstep .dx{font-size:15.5px;color:var(--txt);line-height:1.5}
  .dmerge{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
  .dpill{font-family:var(--mono);font-size:13.5px;color:var(--txt);background:var(--bg-secondary);border:1px solid var(--hairline);border-radius:6px;padding:8px 12px}
  .dpill.you{border-color:rgba(var(--cyan-rgb),.45);color:var(--cyan)}
  .dplus{color:var(--txt-muted);font-weight:700}
  @media(max-width:1000px){.fnd-wrap{padding:18px 20px 80px}.dsep{transform:rotate(90deg);justify-content:center}}

  /* ---------- layout ---------- */
  .wrap{display:flex;gap:48px;max-width:1280px;margin:0 auto;padding:18px 40px 110px;align-items:flex-start}
  nav{position:sticky;top:24px;flex:0 0 230px;max-height:calc(100vh - 48px);
    overflow:auto;padding:6px 0;font-family:var(--mono);font-size:15px}
  nav h3{color:var(--txt-muted);font-size:12px;letter-spacing:0.22em;font-weight:600;
    text-transform:uppercase;margin:24px 0 8px;padding-left:14px}
  nav h3:first-child{margin-top:0}
  nav h3:before{content:"// "}
  nav a{display:block;color:var(--txt-2);padding:6px 14px;border:0;border-left:2px solid transparent;
    border-radius:0 6px 6px 0;transition:all .18s var(--ease)}
  nav a:hover{background:rgba(var(--mint-rgb),0.06);color:var(--mint);border-left-color:var(--mint)}
  main{flex:1;min-width:0}

  /* ---------- sections / cards ---------- */
  section{margin:0 0 26px;background:var(--bg-tertiary);border:1px solid var(--hairline);
    border-radius:var(--radius);padding:30px 34px;box-shadow:var(--card-shadow);
    content-visibility:auto;contain-intrinsic-size:0 600px}
  section h2{margin:0 0 18px;padding:0 0 16px;font-family:var(--serif);font-weight:700;
    font-size:28.5px;letter-spacing:-0.02em;color:var(--txt-strong);border-bottom:1px solid var(--hairline)}
  section h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:30px 0 8px;color:var(--txt-strong);
    display:flex;align-items:center;flex-wrap:wrap;gap:9px;letter-spacing:-0.01em}
  .h-anchor{opacity:0;margin-left:9px;color:var(--mint);text-decoration:none;font-weight:400;
    font-size:.7em;vertical-align:middle;transition:opacity .15s var(--ease)}
  h2:hover .h-anchor,h3:hover .h-anchor,h4:hover .h-anchor{opacity:.55}
  .h-anchor:hover{opacity:1}
  section h3:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
    flex:0 0 auto;box-shadow:0 0 10px rgba(var(--mint-rgb),0.6)}
  section h4{font-family:var(--serif);color:var(--txt);font-size:16px;font-weight:600;margin:20px 0 6px}
  .lede{font-family:var(--accent-mono);color:var(--txt-2);font-size:16px;margin:-6px 0 16px}
  p{margin:11px 0}
  strong,b{color:var(--txt-strong);font-weight:700}
  em{color:var(--mint);font-style:normal;font-weight:600}

  /* ---------- code ---------- */
  code{background:rgba(var(--ink-rgb),0.05);color:var(--mint);padding:2px 6px;border-radius:5px;
    font-family:var(--mono);font-size:14.5px;border:1px solid var(--hairline)}
  /* terminal window: title bar + traffic lights drawn as pseudo-elements, so
     every block in the page keeps its plain pre + code markup */
  pre{background:var(--bg-secondary);border:1px solid var(--hairline);border-radius:11px;
    padding:44px 16px 15px;overflow:hidden;margin:14px 0;position:relative;
    box-shadow:var(--card-shadow)}
  pre:before{content:"prompt";position:absolute;left:0;right:0;top:0;height:31px;
    display:flex;align-items:center;justify-content:center;padding:0 54px;
    background:rgba(var(--ink-rgb),.05);border-bottom:1px solid var(--hairline);
    font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--txt-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  pre:after{content:"";position:absolute;left:13px;top:11px;width:9px;height:9px;border-radius:50%;
    background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840}
  pre.pwsh:before{content:"bash"}
  pre code{background:none;border:0;padding:0;font-size:14.5px;color:var(--code-txt);
    white-space:pre-wrap;overflow-wrap:break-word;line-height:1.7;display:block;overflow-x:auto}
  /* copy control, injected by script so the markup stays clean */
  .pre-copy{position:absolute;top:5px;right:8px;z-index:2;font-family:var(--mono);
    font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--txt-2);
    background:var(--bg-tertiary);border:1px solid var(--hairline);border-radius:6px;
    padding:3px 8px;cursor:pointer;user-select:none;-webkit-user-select:none;opacity:0;
    transition:opacity .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
  pre:hover .pre-copy,.pre-copy:focus-visible{opacity:1}
  .pre-copy:hover{color:var(--mint);border-color:rgba(var(--mint-rgb),.45)}
  .pre-copy.done{color:var(--mint);border-color:rgba(var(--mint-rgb),.5);opacity:1}
  @media(hover:none){.pre-copy{opacity:1}}

  /* ---------- tables ---------- */
  table{border-collapse:collapse;width:100%;margin:14px 0;font-size:16px;
    font-family:var(--serif);border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
  th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline-2)}
  th{background:var(--bg-secondary);color:var(--mint);font-family:var(--mono);font-size:12px;
    font-weight:600;text-transform:uppercase;letter-spacing:0.1em}
  td{color:var(--txt)}
  tbody tr:last-child td,table tr:last-child td{border-bottom:0}
  .tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
  .tscroll table{margin:0}
  tr:hover td{background:rgba(var(--ink-rgb),0.02)}

  /* ---------- lists ---------- */
  ul,ol{margin:10px 0;padding-left:22px}
  li{margin:6px 0}
  li::marker{color:var(--mint)}

  /* ---------- tags / pills ---------- */
  .tag{display:inline-block;font-family:var(--mono);font-size:12px;padding:2px 10px;border-radius:20px;
    font-weight:600;letter-spacing:.03em;vertical-align:middle;border:1px solid}
  .t-low{background:rgba(var(--magenta-rgb),0.10);color:var(--pink);border-color:rgba(var(--magenta-rgb),0.35)}
  .t-mod{background:rgba(var(--yellow-rgb),0.10);color:var(--yellow);border-color:rgba(var(--yellow-rgb),0.35)}
  .t-high{background:rgba(var(--mint-rgb),0.10);color:var(--mint);border-color:rgba(var(--mint-rgb),0.35)}
  .pill{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--mint);
    background:rgba(var(--mint-rgb),0.06);padding:4px 12px;border-radius:20px;font-weight:600;
    letter-spacing:.03em;border:1px solid rgba(var(--mint-rgb),0.25)}

  /* ---------- checklist ---------- */
  .checklist{list-style:none;padding-left:0;margin:12px 0}
  .checklist li{position:relative;padding:10px 8px 10px 34px;border-bottom:1px solid var(--hairline-2);
    margin:0;color:var(--txt);cursor:pointer;user-select:none;transition:color .15s var(--ease)}
  .checklist li:before{content:"";position:absolute;left:6px;top:13px;width:17px;height:17px;
    border:1.5px solid var(--hairline);border-radius:5px;background:rgba(var(--ink-rgb),0.03);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:11px;font-weight:700;line-height:1;color:var(--on-accent);transition:all .15s var(--ease)}
  .checklist li:hover{color:var(--txt-strong)}
  .checklist li:hover:before{border-color:rgba(var(--ink-rgb),0.22)}
  .checklist li.done{color:var(--txt-muted);text-decoration:line-through;
    text-decoration-color:rgba(var(--ink-rgb),0.25)}
  .checklist li.done:before{content:"✓";background:var(--mint);border-color:var(--mint);color:var(--on-accent)}
  .checklist li:last-child{border-bottom:none}

  /* ---------- callouts ---------- */
  .callout{border-radius:10px;padding:14px 16px;margin:16px 0;font-size:16.5px;border:1px solid;backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1)}
  .callout b{color:var(--txt-strong);font-weight:700}
  .callout:before{display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;
    letter-spacing:.09em;padding:2px 8px;border-radius:5px;margin-right:10px;vertical-align:1.5px}
  .c-key{background:var(--panel-key);border-color:rgba(var(--mint-rgb),0.22)}
  .c-key:before{content:"KEY";color:var(--on-accent);background:var(--mint)}
  .c-warn{background:var(--panel-warn);border-color:rgba(var(--yellow-rgb),0.22)}
  .c-warn:before{content:"NOTE";color:var(--on-accent);background:var(--yellow)}
  .c-tip{background:var(--panel-tip);border-color:rgba(var(--cyan-rgb),0.22)}
  .c-tip:before{content:"TIP";color:var(--on-accent);background:var(--cyan)}
  /* first-principles "lever" note */
  .lever{font-size:15.5px;color:var(--txt-2);border-left:2px solid var(--mint);
    background:rgba(var(--mint-rgb),0.03);padding:7px 0 7px 13px;margin:8px 0 18px;border-radius:0 6px 6px 0}
  .lever b{color:var(--mint)}
  .lever .lv{color:var(--cyan)}
  .why-mech h3{counter-increment:mech}

  /* ---------- grid / flow / misc ---------- */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .grid2>*{min-width:0}
  .flow{background:var(--bg-secondary);border:1px solid var(--hairline);border-radius:10px;padding:18px 20px;
    font-family:var(--mono);font-size:14.5px;color:var(--mint);white-space:pre;overflow:auto;line-height:1.75}
  .kbd{font-family:var(--accent-mono);font-size:14.5px;color:var(--txt-muted)}
  details{margin:8px 0;border:1px solid var(--hairline);border-radius:8px;padding:4px 14px;background:var(--bg-secondary)}
  summary{cursor:pointer;font-family:var(--mono);color:var(--cyan);font-weight:600;font-size:15.5px;padding:7px 0;list-style:none}
  summary::-webkit-details-marker{display:none}
  summary:hover{color:var(--mint)}
  summary:before{content:"▸ ";color:var(--mint)}
  details[open] summary:before{content:"▾ "}

  footer{max-width:1280px;margin:0 auto;font-family:var(--mono);color:var(--txt-muted);font-size:14px;
    text-align:center;padding:30px 40px;border-top:1px solid var(--hairline)}

  @media(max-width:1000px){
    .grid2{grid-template-columns:1fr}
    header.top{padding:44px 22px 22px}
    header.top h1{font-size:37px}
    section{padding:22px 20px}
    /* tab bar scrolls horizontally only (no vertical/diagonal drag) */
    .tabbar{max-width:calc(100% - 24px);touch-action:pan-x}
    .tab{flex:0 0 auto;white-space:nowrap}
    /* sidebar TOC becomes a horizontal scroll strip */
    .wrap{flex-direction:column;gap:0;padding:14px 22px 70px}
    nav{position:static;flex:0 0 auto;align-items:center;width:100%;min-width:0;max-height:none;height:auto;
      display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
      margin:0 -22px 16px;padding:8px 22px;border-bottom:1px solid var(--hairline);scrollbar-width:none}
    nav::-webkit-scrollbar{display:none}
    nav h3{display:none}
    nav a{flex:0 0 auto;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      border:1px solid var(--hairline);border-radius:6px;padding:4px 9px;font-size:11px;line-height:1.5}
    nav a:hover{background:rgba(var(--mint-rgb),0.06);border-color:rgba(var(--mint-rgb),.4)}
    main{width:100%;min-width:0}
  }
  @media(max-width:680px){
    body{font-size:17px}
    /* tab bar becomes a swipeable strip */
    .tabbar{max-width:calc(100% - 16px);gap:2px;touch-action:pan-x}
    .tab{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:8px 11px}
    header.top{padding:38px 16px 16px}
    header.top h1{font-size:30px;gap:10px}
    .brand-mark{width:38px;height:38px}
    header.top p{font-size:15px}
    .hero-actions{top:12px;right:12px}
    section{padding:18px 15px;border-radius:10px}
    section h2{font-size:22px;padding-bottom:13px;margin-bottom:15px}
    section h3{font-size:17px}
    .wrap{padding:12px 16px 60px}
    .fnd-wrap,.gloss-wrap,.flow-wrap,.arch-wrap,.rez0-wrap,.about-wrap{padding:14px 16px 60px}
    .arch-diagram{flex-direction:column;align-items:stretch;gap:10px}
    .arch-col{min-width:0;width:100%;flex:none}
    .arch-arrow{width:100%;justify-content:center}
    .dladder{flex-direction:column;align-items:stretch}
    .dladder .drung{width:100%}
    .dmerge{flex-direction:column}
    table{font-size:14px}
    th,td{padding:8px 10px}
    pre{padding:40px 13px 13px}
    pre code,code{font-size:13px}
    .flow-controls{flex-wrap:wrap}
    .flow-q{font-size:19px}
    .search-modal-inner{margin-top:9vh;width:94vw}
  }
  @media(max-width:400px){
    header.top h1{font-size:25px}
    .tab{font-size:12.5px;padding:7px 10px}
    section h2{font-size:20px}
  }
  /* disclosure content eases open instead of appearing instantly */
  details[open]>*:not(summary){animation:detailsIn .26s var(--ease)}
  @keyframes detailsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  /* glossary rows fade back in as the filter matches them */
  .gl-item.gl-in{animation:glIn .22s var(--ease)}
  @keyframes glIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  /* one place that honours the reduced-motion preference for the whole site */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important}
  }
  /* ===== matrix rain (konami) ===== */
  #matrix{position:fixed;inset:0;z-index:190;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
  #matrix.on{opacity:.85}


  /* the waitlist wears the menubar's material: translucent glass over blur,
     hairline border, 15px on containers, 10px on controls, and the same
     mint-glass highlight for anything focused or selected */
  #panel-lab .wl-wrap{max-width:520px;margin:0 auto;padding:64px 24px 40px;text-align:center;position:relative;z-index:1}
  #panel-lab .wl-eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mint);margin:0 0 14px}
  #panel-lab .wl-title{font-family:var(--mono);font-weight:700;font-size:clamp(26px,5vw,40px);
    line-height:1.12;margin:0 0 16px;color:var(--txt-strong);letter-spacing:-.02em}
  #panel-lab .wl-lede{color:var(--txt-2);font-size:17px;margin:0 0 32px}
  /* the lab bay: one window, two panes. Left is what you can play now, right
     is what is still coming. Chrome matches the code windows elsewhere. */
  #panel-lab .wl-wrap{max-width:940px}
  #panel-lab .wl-lede{max-width:620px;margin-left:auto;margin-right:auto}
  /* No overflow:hidden here. It clipped the waitlist dropdown and, worse, made
     the window a scroll container, so opening that menu scrolled the whole box
     and the Jackpot heading disappeared. The chrome bar rounds its own top
     corners instead, which is the only thing the clipping was for. */
  #panel-lab .lab-win{position:relative;background:var(--bg-secondary);border:1px solid var(--hairline);
    border-radius:11px;box-shadow:var(--card-shadow);
    padding-top:31px;text-align:left;margin:0 0 18px}
  #panel-lab .lab-win::before{content:"labs";position:absolute;left:0;right:0;top:0;height:31px;
    border-radius:10px 10px 0 0;
    display:flex;align-items:center;justify-content:center;padding:0 54px;
    background:rgba(var(--ink-rgb),.05);border-bottom:1px solid var(--hairline);
    font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--txt-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #panel-lab .lab-win::after{content:"";position:absolute;left:13px;top:11px;width:9px;height:9px;
    border-radius:50%;background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840}
  #panel-lab .lab-split{display:grid;grid-template-columns:1fr 1fr}
  #panel-lab .lab-pane{padding:26px 24px;min-width:0}
  #panel-lab .lab-pane + .lab-pane{border-left:1px solid var(--hairline)}
  /* the form is inside the window now, so it gives up its own frame */
  #panel-lab .lab-win .wl-card{background:none;border:0;box-shadow:none;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  #panel-lab .lab-win .wl-fine{text-align:left;margin-top:12px}
  /* the light theme gives .wl-card a lift shadow; inside the window that
     reads as a stray panel edge, so it is cancelled at higher specificity */
  :root[data-theme="light"] #panel-lab .lab-win .wl-card{box-shadow:none;background:none;border:0}
  #panel-lab .jp-kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--mint);margin:0 0 10px}
  #panel-lab .jp-name{font-family:var(--mono);font-weight:700;font-size:clamp(24px,3.4vw,32px);
    letter-spacing:-.02em;color:var(--txt-strong);margin:0 0 12px}
  #panel-lab .jp-copy{color:var(--txt-2);font-size:15.5px;line-height:1.6;margin:0 0 20px}
  #panel-lab .jp-cta{position:relative;display:inline-block;overflow:hidden;isolation:isolate;
    color:#c9bcff;border-radius:11px;font-family:var(--mono);
    font-weight:600;font-size:14px;padding:12px 20px;text-decoration:none;
    /* the lab's own violet, the colour of the spade in the jackpot header */
    background:linear-gradient(118deg,rgba(123,97,255,.24),rgba(123,97,255,.40));
    border:1px solid rgba(123,97,255,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
  #panel-lab .jp-cta::before{content:"\2660";margin-right:9px;color:#b7a6ff;
    text-shadow:0 0 6px rgba(123,97,255,.95),0 0 15px rgba(123,97,255,.55)}
  /* a light travelling across the face, the way the trim on a slot machine
     runs; it is the whole reason this button is not just another pill */
  #panel-lab .jp-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 49%,transparent 64%);
    transform:translateX(-130%);animation:jp-sweep 4.2s var(--ease) infinite}
  @keyframes jp-sweep{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  #panel-lab .jp-cta{transition:box-shadow .2s var(--ease),border-color .2s var(--ease),
    transform .12s var(--ease),color .2s var(--ease)}
  #panel-lab .jp-cta:hover{transform:translateY(-1px);color:#e6dfff;border-color:rgba(123,97,255,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 20px rgba(123,97,255,.45),0 0 40px rgba(123,97,255,.30)}
  #panel-lab .jp-cta:active{transform:translateY(0)}
  :root[data-theme="light"] #panel-lab .jp-cta{color:#4a34b8;
    background:linear-gradient(118deg,rgba(123,97,255,.16),rgba(123,97,255,.30));
    border-color:rgba(123,97,255,.55)}
  :root[data-theme="light"] #panel-lab .jp-cta::before{color:#6b4ee6}
  :root[data-theme="light"] #panel-lab .jp-cta::after{
    background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.75) 49%,transparent 64%)}
  /* the Lab tab wears the lab's colour, active or not, so the way in is
     visible before you get there */
  .tabbar .tab[data-panel="panel-lab"]{color:#9a86ff}
  .tabbar .tab[data-panel="panel-lab"]:hover{color:#c9bcff}
  .tabbar .tab[data-panel="panel-lab"].active{color:#b7a6ff;
    text-shadow:0 0 12px rgba(123,97,255,.55)}
  :root[data-theme="light"] .tabbar .tab[data-panel="panel-lab"]{color:#5b3fd6}
  :root[data-theme="light"] .tabbar .tab[data-panel="panel-lab"].active{color:#4a34b8;
    text-shadow:0 0 10px rgba(123,97,255,.30)}
  /* the highlight takes the lab's colour too, so the pill behind "Lab" does
     not stay mint while the word on it is violet */
  .tabbar:has(.tab[data-panel="panel-lab"].active) .tab-hl{
    background:rgba(123,97,255,.16);border-color:rgba(123,97,255,.45);
    box-shadow:0 0 20px rgba(123,97,255,.22),inset 0 1px 0 rgba(255,255,255,.12)}
  :root[data-theme="light"] .tabbar:has(.tab[data-panel="panel-lab"].active) .tab-hl{
    background:rgba(123,97,255,.14);border-color:rgba(123,97,255,.40)}
  #panel-lab .jp-more{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--txt-muted);margin:0 0 16px}
  @media(max-width:760px){
    #panel-lab .lab-split{grid-template-columns:1fr}
    #panel-lab .lab-pane + .lab-pane{border-left:0;border-top:1px solid var(--hairline)}
  }
  #panel-lab .wl-card{background:rgba(var(--ink-rgb),.04);
    border:1px solid var(--hairline);border-radius:15px;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -16px rgba(0,0,0,.8);
    padding:22px;text-align:left}
  #panel-lab .wl-field{display:block;margin:0 0 14px}
  #panel-lab .wl-label{display:block;font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--txt-muted);margin:0 0 7px;padding-left:2px}
  #panel-lab .wl-input,#panel-lab .wl-sel-btn{width:100%;box-sizing:border-box;
    background:rgba(var(--ink-rgb),.05);border:1px solid var(--hairline);border-radius:10px;
    color:var(--txt-strong);font-family:var(--mono);font-size:14px;font-weight:500;
    letter-spacing:.01em;padding:11px 13px;
    transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  #panel-lab .wl-input::placeholder{color:var(--txt-muted)}
  #panel-lab .wl-input:hover,#panel-lab .wl-sel-btn:hover{border-color:rgba(var(--mint-rgb),.34)}
  #panel-lab .wl-input:focus,#panel-lab .wl-sel-btn:focus-visible,#panel-lab .wl-sel.open .wl-sel-btn{
    outline:none;background:rgba(var(--mint-rgb),.14);border-color:rgba(var(--mint-rgb),.38);
    box-shadow:0 0 20px rgba(var(--mint-rgb),.16),inset 0 1px 0 rgba(255,255,255,.12)}
  /* custom dropdown (native option lists cannot be themed) */
  #panel-lab .wl-sel{position:relative}
  #panel-lab .wl-sel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
    text-align:left;cursor:pointer}
  #panel-lab .wl-sel-arrow{flex:0 0 auto;opacity:.7;transition:transform .2s var(--ease)}
  #panel-lab .wl-sel.open .wl-sel-arrow{transform:rotate(180deg)}
  #panel-lab .wl-sel-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;margin:0;
    padding:5px;list-style:none;
    /* opens over the card, which is itself glass; a translucent material
       here lets the button behind it read through, so this one is solid */
    background:var(--bg-tertiary);
    border:1px solid var(--hairline);border-radius:15px;
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
    max-height:262px;overflow:auto;display:none}
  #panel-lab .wl-sel.open .wl-sel-list{display:block;animation:popIn .2s var(--ease)}
  #panel-lab .wl-sel-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 13px;border-radius:10px;cursor:pointer;border:1px solid transparent;
    font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--txt-2);
    transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
  #panel-lab .wl-sel-list li:hover,#panel-lab .wl-sel-list li.active{color:var(--txt-strong)}
  #panel-lab .wl-sel-list li[aria-selected="true"]{color:var(--mint);
    background:rgba(var(--mint-rgb),.14);border-color:rgba(var(--mint-rgb),.38);
    box-shadow:0 0 20px rgba(var(--mint-rgb),.16),inset 0 1px 0 rgba(255,255,255,.12)}
  #panel-lab .wl-sel-list li[aria-selected="true"]::after{content:"\2713";color:var(--mint);font-size:12px}
  #panel-lab .wl-btn{width:100%;margin-top:16px;cursor:pointer;
    font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.02em;
    padding:12px;border-radius:10px;color:var(--mint);
    background:rgba(var(--mint-rgb),.16);border:1px solid rgba(var(--mint-rgb),.45);
    box-shadow:0 0 20px rgba(var(--mint-rgb),.16),inset 0 1px 0 rgba(255,255,255,.12);
    transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
  #panel-lab .wl-btn:hover:not(:disabled){background:rgba(var(--mint-rgb),.26);
    border-color:rgba(var(--mint-rgb),.6);color:var(--txt-strong)}
  #panel-lab .wl-btn:disabled{opacity:.45;cursor:not-allowed}
  #panel-lab .wl-fine{font-family:var(--mono);font-size:11.5px;color:var(--txt-muted);
    text-align:center;margin:14px 0 0;letter-spacing:.01em}
  #panel-lab .wl-msg{font-family:var(--mono);font-size:13px;margin:12px 0 0;display:none}
  #panel-lab .wl-msg.err{display:block;color:var(--magenta)}
  #panel-lab .wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  #panel-lab .wl-done{display:none;text-align:center}
  #panel-lab .wl-done.show{display:block;animation:panel-in .34s var(--ease)}
  #panel-lab .wl-form.hide{display:none}
  #panel-lab .wl-check{width:52px;height:52px;margin:0 auto 14px;display:block}