/* Colony design-system site — shared skin extracted from the canonical sheet.
   Tokens + all organism CSS; every page loads this + dl-components.css. */
*{box-sizing:border-box}
body{ margin:0; background:#0c0d0f; color:#e6ebf2; font:14px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
      font-variant-numeric:tabular-nums slashed-zero; padding:36px 26px 120px; }
.pagehead{ max-width:1180px; margin:0 auto 24px; }
.pagehead h1{ font-size:24px; margin:0 0 4px; letter-spacing:-0.02em; }
.pagehead p{ color:#9aa6b5; margin:0; max-width:86ch; }
.pagehead code{ font-family:"JetBrains Mono",monospace; font-size:12px; color:#c9d2dc; }

.theme{ border-radius:12px; padding:28px 26px 40px; margin:0 auto 34px; max-width:1180px;
  background:var(--background); color:var(--foreground); border:1px solid #26282c; }
.theme>h1{ font-size:20px; margin:0 0 2px; }
.theme .sub{ color:var(--muted-foreground); margin:0 0 8px; font-size:13px; }
.theme h2{ font-size:11px; letter-spacing:.14em; color:var(--muted-foreground); margin:34px 0 12px; font-weight:600;
  border-top:1px solid var(--border); padding-top:16px; }
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cols{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.hint{ font-size:11px; color:var(--muted-foreground); margin-top:6px; max-width:80ch; }

.theme.night{
  --background:#0b0b0c; --foreground:#f2f2f2; --card:#151516; --muted:#1c1c1e; --muted-foreground:#98989b;
  --border:#242426; --input:#2e2e31; --primary:#f2f2f2; --primary-foreground:#0b0b0c;
  --secondary:#1c1c1e; --secondary-foreground:#f2f2f2; --destructive:#e5484d; --destructive-foreground:#fff;
  --ring:#f2f2f2; --radius:0.5rem; --quiet:#c9c9cb;
  --t-worker:#6da4f0; --t-reviewer:#a583f5; --t-planner:#eaaa35; --t-navigator:#45c9a5;
  --t-scout:#55c964; --t-designer:#f78fb8; --t-external:#ef8752; --t-captain:#f0ddaa;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* porthole tokens */
  --pb-tile:#f2f2f2; --pb-signal:#0b0b0c; --pb-ink:#0b0b0c; --pb-face-border:rgba(0,0,0,.28);
  --pb-ghost-border:rgba(242,242,242,.45); --pb-ghost-ink:#f2f2f2;
  --pb-gd-border:#ff4a3c; --pb-gd-signal:#ff4a3c; --pb-gd-label:#ff5a52;
}
.theme.day{
  --background:#fafafa; --foreground:#111; --card:#fff; --muted:#efefef; --muted-foreground:#666;
  --border:#e0e0e0; --input:#d4d4d4; --primary:#111; --primary-foreground:#fff;
  --secondary:#efefef; --secondary-foreground:#111; --destructive:#d43d42; --destructive-foreground:#fff;
  --ring:#111; --radius:0.5rem; --quiet:#3d3d3d;
  --t-worker:#28549c; --t-reviewer:#6340b3; --t-planner:#7a5a10; --t-navigator:#196852;
  --t-scout:#256a33; --t-designer:#ad3268; --t-external:#94481f; --t-captain:#5c5128;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* porthole tokens */
  --pb-tile:#0e1116; --pb-signal:#f2f2f2; --pb-ink:#f2f2f2; --pb-face-border:rgba(242,242,242,.3);
  --pb-ghost-border:rgba(14,17,22,.5); --pb-ghost-ink:#0e1116;
  --pb-gd-border:#c22f24; --pb-gd-signal:#c22f24; --pb-gd-label:#a8271d;
}

/* watch toggle */
.watchbar{ position:sticky; top:10px; z-index:60; display:flex; justify-content:flex-end; max-width:1180px; margin:0 auto 12px; }
.watchbar button{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; font:inherit; font-size:12px;
  font-weight:550; cursor:pointer; border-radius:6px; border:1px solid #2e2e31; background:#151516; color:#f2f2f2; }
.watchbar button:hover{ border-color:#4a4a4e; }

/* ambient banner motion — slow, instrument-grade; stilled under reduced-motion */
@keyframes bnr-spin{ to{ transform:rotate(360deg); } }
@keyframes bnr-spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes bnr-drift{ from{ transform:translateX(0); } to{ transform:translateX(-46.6px); } }
@keyframes bnr-drift-rev{ from{ transform:translateX(-46.6px); } to{ transform:translateX(0); } }
@keyframes bnr-breathe{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.06); opacity:.45; } }
@keyframes bnr-shimmer{ 0%,100%{ opacity:.25; } 50%{ opacity:.8; } }
@keyframes bnr-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@keyframes bnr-glow{ 0%,100%{ opacity:.22; } 50%{ opacity:1; } }
@keyframes bnr-sway{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2.4px); } }
.bnrwrap{ opacity:0; animation:bnr-in .4s ease-out .05s forwards; }
@keyframes bnr-in{ to{ opacity:1; } }
.bnr g{ transform-box:view-box; }
@media (prefers-reduced-motion: reduce){ .bnr *{ animation:none !important; } .bnrwrap{ opacity:1; animation:none; } }
/* icons (tabler geometry: 24 grid, stroke 2) */
.i{ width:15px; height:15px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; vertical-align:-2px; }
.i.sm{ width:13px; height:13px; }
.i .f{ fill:currentColor; stroke:none; }

/* shadcn primitives */
/* porthole button component: drawn bg (tile + live signal) + transparent face.
   variants: solid (default) · ghost (border-only glass)
   kinds: primary (captain's colorway) · destructive (EMBER RIM: black tile, ember signal, red rim)
   behaviors: deep (22px silent strip, wakes on hover) · low (16px low idle, always faintly alive) */
.pbtn{ position:relative; display:inline-flex; border-radius:calc(var(--radius) - 2px); overflow:hidden; vertical-align:middle; }
.pbtn .pb-bg{ position:absolute; inset:0; top:auto; bottom:0; }
.pb-svg{ width:100%; height:100%; display:block; }
.pbtn .pb-face{ position:relative; z-index:1; background:transparent; border-radius:inherit;
  height:34px; padding:0 15px; font:inherit; font-size:13px; font-weight:550; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; }
.pb-amp{ transform-box:view-box; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.pb-band,.pb-edge{ transition:stroke-width .45s ease; }
.pbtn:hover .pb-edge{ stroke-width:0.55px; }
.pbtn:hover .pb-band{ stroke-width:1.1px; }
/* behaviors */
.pbtn.deep .pb-bg{ height:22px; }
.pbtn.deep .pb-amp{ opacity:0; transform:scaleY(0.04); }
.pbtn.deep:hover .pb-amp{ opacity:1; transform:scaleY(2.6); }
.pbtn.deep.destructive:hover .pb-amp{ transform:scaleY(1.5); }
.pbtn.low .pb-bg{ height:16px; }
.pbtn.low .pb-amp{ opacity:.3; transform:scaleY(.55); }
.pbtn.low:hover .pb-amp{ opacity:1; transform:scaleY(3.6); }
.pbtn.low.destructive:hover .pb-amp{ transform:scaleY(1.7); }
/* storm discipline: danger idles calm; hover reveals the storm */
.pbtn .pb-amp.pb-storm{ opacity:0; }
.pbtn.destructive:hover .pb-amp.pb-storm{ opacity:1; }
.pbtn.destructive:hover .pb-amp.pb-calm{ opacity:0; }
/* solid · primary — captain's colorway */
.pbtn.primary{ background:var(--pb-tile); }
.pbtn.primary .pb-bg{ color:var(--pb-signal); }
.pbtn.primary .pb-face{ color:var(--pb-ink); border-color:var(--pb-face-border); }
/* solid · destructive — EMBER RIM · RED LABEL (constant across watches) */
.pbtn.destructive{ background:#101012; box-shadow:inset 0 0 0 1px rgba(255,74,60,.55); }
.pbtn.destructive .pb-bg{ color:#ff4a3c; }
.pbtn.destructive .pb-face{ color:#ff5a52; }
/* ghost — clear glass, border only; the signal swims inside */
.pbtn.pghost{ background:transparent; box-shadow:inset 0 0 0 1px var(--pb-ghost-border); }
.pbtn.pghost .pb-bg{ color:var(--pb-ghost-ink); }
.pbtn.pghost .pb-face{ color:var(--pb-ghost-ink); border-color:transparent; }
.pbtn.pghost.destructive{ background:transparent; box-shadow:inset 0 0 0 1.2px var(--pb-gd-border); }
.pbtn.pghost.destructive .pb-bg{ color:var(--pb-gd-signal); }
.pbtn.pghost.destructive .pb-face{ color:var(--pb-gd-label); }
/* sizes & states */
.pbtn.sm .pb-face{ height:28px; padding:0 11px; font-size:12px; }
.pbtn.sm.low .pb-bg{ height:12px; }
.pbtn.sm.deep .pb-bg{ height:16px; }
.pbtn.disabled{ opacity:.5; pointer-events:none; }
.pbtn.faux-focus{ outline:2px solid var(--ring); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .pb-svg *{ animation:none } .pb-svg animate{ display:none } }






















.btn{ display:inline-flex; align-items:center; gap:7px; justify-content:center; white-space:nowrap; height:34px; padding:0 15px;
  border-radius:calc(var(--radius) - 2px); font:inherit; font-size:13px; font-weight:550; border:1px solid transparent; cursor:pointer;
  background:var(--primary); color:var(--primary-foreground); }
.btn.secondary{ background:var(--secondary); color:var(--secondary-foreground); }
.btn.outline{ background:var(--card); color:var(--foreground); border-color:var(--input); }
.btn.ghost{ background:none; color:var(--foreground); }
.btn.destructive{ background:var(--destructive); color:var(--destructive-foreground); }
.btn.sm{ height:28px; padding:0 11px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.faux-focus,.input.faux-focus{ outline:2px solid var(--ring); outline-offset:2px; }
.badge{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:1px 10px; font-size:11px; font-weight:600; border:1px solid transparent; }
.badge.default{ background:var(--primary); color:var(--primary-foreground); }
.badge.secondary{ background:var(--secondary); color:var(--secondary-foreground); }
.badge.outline{ background:none; color:var(--foreground); border-color:var(--border); }
.badge.destructive{ background:var(--destructive); color:var(--destructive-foreground); }
.tabs{ display:inline-flex; background:var(--muted); border-radius:var(--radius); padding:3px; gap:2px; }
.tabs button{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--muted-foreground); font:inherit;
  font-size:13px; font-weight:550; padding:5px 13px; border-radius:calc(var(--radius) - 2px); cursor:pointer; }
.tabs button.on{ background:var(--card); color:var(--foreground); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.tabs .mgr{ font-size:10px; color:var(--muted-foreground); }
.card{ background:var(--card); color:var(--foreground); border:1px solid var(--border); border-radius:calc(var(--radius) + 4px); padding:13px 15px; }
.card.dashed{ border-style:dashed; }
.input{ height:34px; width:250px; background:var(--card); border:1px solid var(--input); color:var(--foreground);
  border-radius:calc(var(--radius) - 2px); padding:0 12px; font:inherit; font-size:13px; }
.input::placeholder{ color:var(--muted-foreground); }
.cmd{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-radius:calc(var(--radius) - 2px); max-width:430px; font-size:13px; }
.cmd.on{ background:color-mix(in srgb, var(--foreground) 8%, var(--card)); font-weight:600; }
.cmd .sec{ margin-left:auto; font-size:10px; color:var(--muted-foreground); font-family:var(--mono); }
.table{ width:100%; max-width:680px; border-collapse:collapse; font-size:13px; }
.table th{ text-align:left; color:var(--muted-foreground); font-weight:500; font-size:12px; padding:6px 10px; border-bottom:1px solid var(--border); }
.table td{ padding:7px 10px; border-bottom:1px solid var(--border); }
.seg{ display:inline-flex; border:1px solid var(--input); border-radius:calc(var(--radius) - 2px); overflow:hidden; }
.seg i{ font-style:normal; padding:3px 12px; font-size:12px; color:var(--muted-foreground); cursor:pointer; }
.seg i.on{ background:var(--primary); color:var(--primary-foreground); font-weight:650; }

/* colony extensions */
.rtag{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; font-size:9.5px; font-weight:700;
  margin-right:6px; vertical-align:-3px; font-family:var(--mono);
  background:color-mix(in srgb, var(--rt) 30%, var(--card)); color:var(--rt); }
.mono{ font-family:var(--mono); }
.dim{ color:var(--muted-foreground); }
.quiet{ color:var(--quiet); }
.av{ border-radius:8px; overflow:hidden; flex:0 0 auto; display:inline-block; vertical-align:middle; }
.acard{ display:flex; gap:12px; max-width:330px; position:relative; }
.acard.live{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--foreground) 25%, transparent); }
.grp{ font-size:10px; letter-spacing:.12em; color:var(--muted-foreground); font-weight:600; margin:10px 0 6px; }
.rollup{ font-size:12px; color:var(--muted-foreground); border:1px dashed var(--border); border-radius:6px; padding:4px 10px; display:inline-block; }
.env{ font-size:12px; }
.env .eh{ font-size:10px; letter-spacing:.1em; color:var(--muted-foreground); margin-bottom:3px; }
.pinrow{ border-left:1px solid var(--input); padding:2px 9px; margin-top:4px; color:var(--muted-foreground); }
.msg{ border-left:1px solid var(--input); padding:5px 12px; margin:8px 0; max-width:560px; }
.msg .who{ font-weight:650; font-size:13px; }
.msg .who .ts{ color:var(--muted-foreground); font-weight:400; margin-left:8px; font-size:11px; font-family:var(--mono); }
.msg.life{ border-left-color:var(--border); color:var(--muted-foreground); font-family:var(--mono); font-size:12px; }
.wl{ margin-top:6px; border:1px solid var(--border); border-radius:6px; padding:6px 11px; background:var(--card); font-family:var(--mono); font-size:11px; color:var(--muted-foreground); max-width:420px; }
.wl b{ color:var(--quiet); font-weight:400; }
.wl .bad{ color:var(--destructive); }
.ckpt{ display:inline-flex; gap:9px; align-items:center; border:1px solid var(--input); border-radius:6px; padding:4px 11px; font-family:var(--mono); font-size:11px; color:var(--muted-foreground); }
.confirm{ font-size:12px; } .confirm b{ font-family:var(--mono); }
.confirm .yes{ font-weight:700; cursor:pointer; margin:0 4px; text-decoration:underline; }
.confirm .no{ color:var(--muted-foreground); cursor:pointer; }
.lane{ width:225px; }
.lane h5{ margin:0 0 6px; font-size:10px; letter-spacing:.12em; color:var(--muted-foreground); font-weight:600; }
.lane h5 .wip{ float:right; font-family:var(--mono); }
.lane h5 .wip.max{ color:var(--foreground); font-weight:700; }
.kcard{ border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--card); margin-bottom:8px; font-size:12px; }
.kcard .kid{ font-family:var(--mono); font-size:10px; color:var(--muted-foreground); }
.kcard b{ font-size:12px; }
.kcard .chips{ display:flex; gap:6px; margin-top:5px; font-family:var(--mono); font-size:10px; color:var(--muted-foreground); flex-wrap:wrap; }
.kcard .step{ margin-top:4px; font-family:var(--mono); font-size:10px; color:var(--foreground); }
.kcard.blk{ opacity:.55; }
.kcard.cxl{ opacity:.55; } .kcard.cxl b{ text-decoration:line-through; }
.peek{ max-width:330px; }
.kprop{ display:flex; gap:10px; font-size:12px; padding:2px 0; }
.kprop span:first-child{ color:var(--muted-foreground); width:64px; flex:0 0 auto; }
.gates{ font-family:var(--mono); font-size:12px; max-width:560px; }
.gates div{ display:flex; gap:10px; padding:3px 0; border-bottom:1px solid var(--border); }
.gates .r{ margin-left:auto; color:var(--muted-foreground); }
.mrun{ display:flex; align-items:center; max-width:640px; }
.mrun .box{ border:1px solid var(--border); border-radius:5px; padding:1px 8px; font-size:10px; color:var(--muted-foreground); white-space:nowrap; font-family:var(--mono); }
.mrun .box.past{ color:var(--quiet); }
.mrun .box.now{ color:var(--foreground); border-color:var(--foreground); font-weight:650; }
.mrun .box.ghost{ opacity:.45; }
.mrun .ln{ flex:1 0 8px; height:1px; background:var(--input); margin:0 2px; }
.rrow{ display:grid; grid-template-columns:44px 20px 1fr auto; gap:8px; align-items:center; border:1px solid var(--border); border-radius:8px;
  padding:6px 12px; background:var(--card); max-width:560px; font-size:12px; margin-bottom:6px; }
.rrow .mono{ font-size:11px; }
.rnote{ margin:3px 0 0 18px; font-size:11px; color:var(--muted-foreground); max-width:440px; border-left:1px solid var(--input); padding:2px 0 2px 8px; font-family:var(--mono); }
.rnote.now{ color:var(--foreground); border-left-color:var(--foreground); }
.rnote.fail{ color:var(--destructive); border-left-color:var(--destructive); }
/* run-view pair skin (.rstrip + .runl) single-sourced in dl-components.css  @prd COL-0131 COL-0130 */
.fnode{ border:1px solid var(--border); border-left-width:2px; border-radius:6px; background:var(--card); padding:5px 10px; font-size:12px; max-width:400px; position:relative; }
.fnode .fwho{ display:block; color:var(--muted-foreground); font-size:10px; font-family:var(--mono); }
.fnode.gate{ border-color:var(--foreground); }
.fnode.receipt{ border-style:dotted; color:var(--muted-foreground); font-family:var(--mono); font-size:11px; }
.farr{ color:var(--input); padding:1px 0 1px 16px; font-size:12px; line-height:1; }
.floop{ color:var(--muted-foreground); font-size:11px; border:1px dashed var(--input); border-radius:5px; padding:3px 10px; max-width:380px; }
.fsplit{ display:flex; gap:10px; max-width:520px; }
.fsplit .fb{ flex:1; min-width:0; }
.fsplit .fbl{ color:var(--muted-foreground); font-size:10px; padding-bottom:3px; }
.fverbs{ position:absolute; top:4px; right:7px; display:flex; gap:5px; color:var(--muted-foreground); font-size:12px; }
.fverbs span{ cursor:pointer; }
.fpal{ display:flex; flex-wrap:wrap; gap:5px; border:1px dashed var(--input); border-radius:6px; padding:6px 9px; max-width:420px; }
.fpal span{ border:1px solid var(--border); border-radius:5px; padding:2px 9px; cursor:pointer; font-size:11px; color:var(--muted-foreground); }
.lint{ border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:11px; max-width:420px; }
.lint .e{ color:var(--destructive); } .lint .w{ color:var(--foreground); font-weight:600; }
.mode-row{ border:1px solid var(--border); border-radius:8px; padding:8px 12px; max-width:430px; margin-bottom:6px; cursor:pointer; background:var(--card); font-size:12px; }
.mode-row.on{ border-color:var(--foreground); }
.mode-row .mg{ float:right; color:var(--muted-foreground); font-size:10px; font-family:var(--mono); }
.mode-row .mp{ color:var(--muted-foreground); margin-top:3px; }
.nrow{ display:flex; gap:9px; align-items:center; border:1px solid var(--border); border-radius:7px; padding:6px 11px; background:var(--card); max-width:430px; margin-bottom:6px; font-size:12px; }
.nrow .np{ color:var(--muted-foreground); font-size:10px; font-family:var(--mono); }
.nrow .nr{ margin-left:auto; color:var(--muted-foreground); font-size:11px; }
.fbar{ width:150px; height:9px; border:1px solid var(--input); border-radius:4px; position:relative; background:var(--card); display:inline-block; vertical-align:-1px; }
.fbar i{ position:absolute; left:0; top:0; bottom:0; background:var(--foreground); border-radius:3px 0 0 3px; }
.fbar u{ position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--input); }
.dstat{ display:inline-block; border:1px solid var(--input); border-radius:5px; padding:0 8px; font-size:11px; color:var(--muted-foreground); letter-spacing:.06em; }
.dstat.rev{ background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); font-weight:650; }
.dstat.app{ color:var(--foreground); font-weight:650; }
.dstat.chg{ color:var(--destructive); border-color:var(--destructive); }
.dvar{ border:1px solid var(--border); border-radius:7px; padding:6px; width:86px; text-align:center; font-size:11px; color:var(--muted-foreground); cursor:pointer; }
.dvar.on{ border:2px solid var(--foreground); color:var(--foreground); font-weight:650; }
.dvar .th{ height:34px; border-radius:4px; background:var(--muted); margin-bottom:4px; }
.story{ font-family:var(--mono); font-size:11.5px; line-height:1.6; background:var(--background); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-top:6px; max-width:520px; }
.story .sh{ display:flex; gap:8px; align-items:baseline; font-family:Inter,sans-serif; font-size:12.5px; margin-bottom:4px; }
.story .sh b{ font-weight:600; color:var(--foreground); }
.story .sh .prdtag{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--muted-foreground); border:1px dashed var(--input); border-radius:5px; padding:0 6px; }
.story .sl{ display:flex; gap:10px; }
.story .skw{ flex:none; width:44px; text-align:right; color:var(--foreground); font-weight:600; }
.story .sl.and .skw{ color:var(--muted-foreground); font-weight:400; }
.story .sx{ color:var(--muted-foreground); }
.gnode{ border:1px solid var(--input); border-radius:6px; padding:3px 10px; font-family:var(--mono); font-size:11px; color:var(--muted-foreground); background:var(--card); }
.gnode.crit{ border:2px solid var(--foreground); color:var(--foreground); font-weight:650; }
.gnode.done{ border:none; padding:0 6px; color:var(--muted-foreground); }
.gedge{ width:22px; height:1px; background:var(--input); }
.gedge.crit{ height:3px; background:var(--foreground); }
.srow{ display:flex; align-items:center; gap:6px; padding:3px 8px; border-radius:5px; font-size:12px; max-width:240px; }
.srow.sel{ background:color-mix(in srgb, var(--foreground) 8%, transparent); font-weight:600; }
.srow .hash{ color:var(--muted-foreground); }
.srow .bdg{ margin-left:auto; }
.sbar{ display:flex; gap:16px; align-items:center; border:1px solid var(--border); border-radius:8px; padding:7px 14px; background:var(--card);
  font-size:11px; color:var(--muted-foreground); font-family:var(--mono); max-width:760px; flex-wrap:wrap; }
.sbar .keys{ margin-left:auto; }
.spark{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.spark i{ width:4px; background:var(--muted-foreground); border-radius:1px; }
.type td{ padding:3px 16px 3px 0; }
.type .lbl{ color:var(--muted-foreground); font-family:var(--mono); font-size:10px; }
.sw{ width:104px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.sw i{ display:block; height:40px; }
.sw span{ display:block; padding:3px 8px; font-family:var(--mono); font-size:10px; color:var(--muted-foreground); }
.pal{ display:grid; grid-template-columns:repeat(12,1fr); gap:7px; max-width:920px; }
.pcol{ display:flex; flex-direction:column; gap:3px; }
.psw{ height:24px; border-radius:4px; }
.pname{ font-size:10px; color:var(--foreground); font-family:var(--mono); }
.prole{ font-size:9px; color:var(--muted-foreground); font-family:var(--mono); height:12px; margin-bottom:2px; }
.phex{ font-size:9px; color:var(--muted-foreground); font-family:var(--mono); margin-top:2px; }
.statetab{ border-collapse:collapse; font-size:12px; }
.statetab td{ padding:4px 14px 4px 0; border-bottom:1px solid var(--border); }
.statetab .g{ font-family:var(--mono); }

/* site nav */
.sitenav{ max-width:1180px; margin:0 auto 18px; display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; }
.sitenav a{ color:#98989b; text-decoration:none; padding:4px 11px; border-radius:6px; }
.sitenav a:hover{ color:#f2f2f2; background:#1c1c1e; }
.sitenav a.on{ color:#f2f2f2; background:#1c1c1e; font-weight:600; }
.sitenav .ext{ margin-left:auto; }
.sitenav a.mockl{ border:1px solid #2e2e31; }
.prdchip{ font-family:"JetBrains Mono",monospace; font-size:9.5px; color:#66676b; letter-spacing:.05em; margin-left:8px; font-weight:400; }
/* index cards */
.ixgrid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ixcard{ display:block; border:1px solid #242426; border-radius:12px; background:#151516; padding:16px 18px; color:inherit; text-decoration:none; }
.ixcard:hover{ border-color:#4a4a4e; }
.ixcard h3{ margin:0 0 4px; font-size:15px; }
.ixcard p{ margin:0; font-size:12px; color:#98989b; }
.ixcard .prd{ display:block; margin-top:10px; font-family:"JetBrains Mono",monospace; font-size:9.5px; color:#66676b; }
.ixsec{ max-width:1180px; margin:26px auto 10px; font-size:11px; letter-spacing:.14em; color:#98989b; font-family:"JetBrains Mono",monospace; }

/* scrollbars — themed, hairline discipline.
   :root fallbacks: site chrome outside .theme (body scroll) is night-fixed. */
:root{ --input:#2e2e31; --muted-foreground:#98989b; --background:#0c0d0f; }
*{ scrollbar-width:thin; scrollbar-color:var(--input) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--input); border-radius:5px; border:2px solid var(--background); }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-foreground); }
::-webkit-scrollbar-corner{ background:transparent; }