:root {
      --bg:#0f1217; --surf:#161a21; --surf2:#1c212a; --surf3:#232936;
      --edge:#262d38; --edge2:#1f2530; --edge3:#39424f;
      --ink:#e9edf4; --ink2:#b3bccb; --ink3:#8a94a6; --ink4:#5d6878;
      --acc:#a78bfa; --acc-fg:#17112e; --acc-soft:#2b2350; --acc-soft-fg:#c4b2fd; --acc-edge:#4c4191;
      --ok:#34d399; --ok-soft:#163328; --ok-edge:#1d4635;
      --warn:#fbbf24; --warn-soft:#382b12; --warn-edge:#4d3a17;
      --bad:#fb7185; --bad-soft:#3b1d26; --bad-edge:#532633;
      --info:#38bdf8; --info-soft:#132c40; --info-edge:#1d4a66;
      --scrim:rgb(8 10 14 / 0.66);
      --shadow:0 4px 6px -2px rgb(0 0 0 / 0.4), 0 12px 24px -4px rgb(0 0 0 / 0.5);
      --raised:0 2px 4px rgb(0 0 0 / 0.35), 0 4px 12px rgb(0 0 0 / 0.35);
}
:root[data-theme="light"] {
      --bg:#f9fafb; --surf:#ffffff; --surf2:#f9fafb; --surf3:#f3f4f6;
      --edge:#e5e7eb; --edge2:#f3f4f6; --edge3:#d1d5db;
      --ink:#111827; --ink2:#4b5563; --ink3:#6b7280; --ink4:#9ca3af;
      --acc:#7c3aed; --acc-fg:#ffffff; --acc-soft:#f5f3ff; --acc-soft-fg:#6d28d9; --acc-edge:#ddd6fe;
      --ok:#047857; --ok-soft:#ecfdf5; --ok-edge:#a7f3d0;
      --warn:#d97706; --warn-soft:#fffbeb; --warn-edge:#fde68a;
      --bad:#e11d48; --bad-soft:#fff1f2; --bad-edge:#fecdd3;
      --info:#0284c7; --info-soft:#f0f9ff; --info-edge:#bae6fd;
      --scrim:rgb(17 24 39 / 0.38);
      --shadow:0 4px 6px -2px rgb(16 24 40 / 0.05), 0 12px 24px -4px rgb(16 24 40 / 0.12);
      --raised:0 2px 4px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.06);
}
    *, *::before, *::after { box-sizing: border-box; }
    body { margin:0; font-family:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
    a { color: var(--acc); text-decoration:none; }
    a:hover { color: var(--acc-soft-fg); text-decoration:underline; }
    .c-m { font-family:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric:tabular-nums; }
    .c-th { text-align:left; font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink3); padding:5px 10px; border-bottom:1px solid var(--edge); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .c-td { font-size:12px; color:var(--ink); padding:0 10px; border-bottom:1px solid var(--edge2); white-space:nowrap; height:26px; overflow:hidden; text-overflow:ellipsis; }
    .c-n { text-align:right; font-family:"IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric:tabular-nums; }
    .c-rail { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink3); }
    .c-rail-on { background:var(--acc-soft); color:var(--acc-soft-fg); }
    .c-item { padding:5px 10px; border-radius:5px; font-size:12.5px; color:var(--ink2); }
    .c-item-on { background:var(--surf3); color:var(--ink); font-weight:500; }
    .c-grp { padding:14px 10px 5px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink4); font-weight:600; }
    .c-tab { padding:6px 10px; font-size:12px; color:var(--ink3); border-bottom:2px solid transparent; }
    .c-tab-on { color:var(--ink); border-bottom-color:var(--acc); font-weight:500; }
    .c-key { font-family:"IBM Plex Mono", monospace; font-size:10px; color:var(--ink4); border:1px solid var(--edge); border-radius:4px; padding:1px 5px; }
    .c-btn { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:6px; border:1px solid var(--edge3); background:var(--surf); font-size:12px; color:var(--ink2); }
    .c-btn-p { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:6px; background:var(--acc); color:var(--acc-fg); font-size:12px; font-weight:600; }
    .c-filt { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:5px; background:var(--surf); border:1px solid var(--edge); color:var(--ink2); font-size:11.5px; }
    .c-filt-on { background:var(--acc-soft); border-color:var(--acc-edge); color:var(--acc-soft-fg); }
    .c-band { font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink4); padding:5px 10px; }
    .c-bar { display:block; height:4px; border-radius:99px; }
    .c-pill { display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 7px; border-radius:4px; font-size:10.5px; font-weight:600; letter-spacing:0.02em; }
    .c-cmd { display:flex; align-items:center; gap:11px; padding:8px 14px; font-size:13px; color:var(--ink2); }
    .c-cmd-on { background:var(--acc-soft); color:var(--ink); }
    .c-cmdgrp { padding:11px 14px 5px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink4); font-weight:600; }
html, body { height:100%; }
body { background:var(--bg); color:var(--ink); overflow-x:auto; }
/* navigation that is part of the design, not a link on top of it */
a[data-nav], a[data-nav]:hover { text-decoration:none; }
a.c-item, a.c-tab { color:var(--ink2); cursor:pointer; }
a.c-item:hover { background:var(--surf3); color:var(--ink); }
a.c-item-on, a.c-item-on:hover { background:var(--surf3); color:var(--ink); font-weight:500; }
a.c-tab:hover { color:var(--ink); }
a.c-tab-on, a.c-tab-on:hover { color:var(--ink); border-bottom-color:var(--acc); }
a.c-rail { cursor:pointer; }
a.c-rail:hover { background:var(--surf3); color:var(--ink2); }
a.c-rail-on, a.c-rail-on:hover { background:var(--acc-soft); color:var(--acc-soft-fg); }
.frame { transform-origin:top left; }
/* the only chrome this site adds: one pill, out of the way */
.pill { position:fixed; right:14px; bottom:14px; z-index:60; display:flex; gap:6px;
  padding:6px; border-radius:10px; background:var(--surf); border:1px solid var(--edge3);
  box-shadow:var(--shadow); }
.pill button { height:26px; padding:0 10px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--ink3); font-size:11.5px; font-family:inherit;
  cursor:pointer; }
.pill button:hover { background:var(--surf3); color:var(--ink); }
.scrim { position:fixed; inset:0; z-index:70; background:var(--scrim); display:none;
  align-items:flex-start; justify-content:center; padding-top:9vh; }
.scrim.on { display:flex; }
.pal { width:min(760px, 92vw); max-height:74vh; display:flex; flex-direction:column;
  background:var(--surf); border:1px solid var(--edge3); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden; }
.pal input { height:46px; padding:0 16px; border:0; border-bottom:1px solid var(--edge2);
  background:transparent; color:var(--ink); font-size:14px; font-family:inherit; outline:none; }
.pal .list { overflow:auto; padding:6px; }
.pal a { display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:7px;
  color:var(--ink2); font-size:13px; text-decoration:none; }
.pal a:hover, .pal a.sel { background:var(--acc-soft); color:var(--ink); text-decoration:none; }
.pal .g { margin-left:auto; font-size:10px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--ink4); }
.pal .grp { padding:10px 11px 4px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink4); font-weight:600; }
.hide { display:none !important; }