:root{--bg:#0d1117;--panel:#151b23;--line:#232c37;--ink:#e6edf3;--mut:#8b98a5;
 --acc:#3fb950;--acc2:#58a6ff;--warn:#d29922;--bad:#f85149}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
.navbar{background:rgba(13,17,23,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navbar-brand{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.navbar-brand:hover{color:var(--ink)}
.brand-dot{color:var(--acc)}
/* Bootstrap 5.3 paints a navbar for a LIGHT background unless the theme says
   otherwise, so the links came out near-black on our dark bar and could not be
   read. Setting the colours here fixes every page at once. */
.navbar .nav-link{color:var(--mut)}
.navbar .nav-link:hover,.navbar .nav-link:focus,.navbar .nav-link.active{color:var(--ink)}
.navbar .btn-acc{color:#06210f}
.navbar-toggler{border-color:var(--line)}
.navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(2.2)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.hero{padding:4.5rem 0 3rem;background:
 radial-gradient(1100px 420px at 12% -10%,rgba(63,185,80,.14),transparent 60%),
 radial-gradient(900px 380px at 88% 0%,rgba(88,166,255,.12),transparent 60%)}
.hero h1{font-weight:800;letter-spacing:-.03em;line-height:1.05}
.lead-mut{color:var(--mut);font-size:1.06rem}
.gifwrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0b0f14;
 box-shadow:0 24px 60px rgba(0,0,0,.45)}
.gifwrap img{display:block;width:100%;height:auto;image-rendering:pixelated}
.badge-soft{background:rgba(63,185,80,.13);color:var(--acc);border:1px solid rgba(63,185,80,.3);
 border-radius:999px;padding:.3rem .8rem;font-size:.8rem;font-weight:600}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.stat-card .k{color:var(--mut);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.stat-card .v{font-size:1.5rem;font-weight:700}
.feed-item{border:1px solid var(--line);border-radius:12px;background:var(--panel);
 padding:.75rem .9rem;margin-bottom:.6rem;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chip{font-size:.72rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;
 padding:.12rem .55rem;margin-right:.3rem;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.45rem;background:#555}
.dot.live{background:var(--acc);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
 font-weight:600;padding:.6rem .7rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.62rem .7rem;border-bottom:1px solid var(--line);font-size:.92rem}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.prog{height:6px;background:#0b0f14;border-radius:999px;overflow:hidden;min-width:110px}
.prog>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .6s ease}
.st{font-size:.74rem;font-weight:600;border-radius:999px;padding:.16rem .58rem;border:1px solid}
.st.done{color:var(--acc);border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.1)}
.st.failed{color:var(--bad);border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.1)}
.st.queued{color:var(--mut);border-color:var(--line)}
.st.placing,.st.routing,.st.verifying{color:var(--warn);border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.1)}
.yes{color:var(--acc);font-weight:700}.no{color:var(--bad);font-weight:700}
.layerbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:.34rem .7rem;font-size:.85rem}
.layerbtn.on{border-color:var(--acc);color:var(--acc);background:rgba(63,185,80,.1)}
.btn-acc{background:var(--acc);border:none;color:#06210f;font-weight:700}
.btn-acc:hover{background:#4ad264;color:#06210f}
footer{border-top:1px solid var(--line);color:var(--mut);padding:2.2rem 0;margin-top:3rem}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pre{background:#0b0f14;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;
 font-size:.84rem;overflow-x:auto;color:#cbd5e1;white-space:pre}
.drop{border:2px dashed var(--line);border-radius:14px;padding:2rem;text-align:center;transition:.2s}
.drop.hot{border-color:var(--acc);background:rgba(63,185,80,.06)}
