/* ============================================================
   spencerlab.tech — navy console
   A deep-navy ground, slate surfaces with hairline borders, a blue→cyan signal
   and emerald for "healthy". Inter for reading, JetBrains Mono for anything a
   machine would print: labels, metrics, the console. Dark by intent.
   ============================================================ */
:root{
  /* ground — same navy family, raised a few stops so glass has light to bend */
  --void:#0A1222; --bg:#141F39; --bg-2:#1A2848;

  /* surfaces are no longer painted: they are panes. Translucent, blurred, edge-lit. */
  --surface:rgba(214,232,255,.065); --surface-2:rgba(214,232,255,.115); --surface-3:rgba(214,232,255,.185);

  /* the glass system */
  --glass-fx:blur(22px) saturate(180%); --glass-fx-sm:blur(12px) saturate(155%);
  --glass-tint:linear-gradient(147deg,rgba(232,244,255,.115),rgba(210,230,255,.035) 46%,rgba(138,176,230,.065));
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(6,14,30,.30), inset 1px 0 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.07);
  --glass-lift:0 14px 38px -16px rgba(3,9,22,.78), 0 3px 10px -4px rgba(3,9,22,.52);
  /* recessed glass — inputs, tracks, wells: darker pane, light caught on the far lip */
  --glass-in:rgba(6,13,28,.36); --glass-in-shadow:inset 0 1px 3px rgba(2,7,18,.58), inset 0 -1px 0 rgba(255,255,255,.08);

  --ink:#E9F0FA; --ink-hi:#FFFFFF; --ink-2:#AABCD6; --ink-3:#8298B8;
  --line:rgba(190,216,255,.145); --line-2:rgba(190,216,255,.255);
  --blue:#2563EB; --blue-hi:#5B9BFF;
  --accent:#22B3F0; --accent-ink:#6AD3FF; --accent-soft:rgba(34,179,240,.14); --on-accent:#fff;
  --ok:#34D399; --warn:#FBBF24; --fail:#FB7185; --info:#7DB3FF;
  --ok-soft:rgba(16,185,129,.14); --warn-soft:rgba(245,158,11,.14); --fail-soft:rgba(244,63,94,.14); --info-soft:rgba(59,130,246,.16);
  --glow:0 0 22px rgba(34,179,240,.32); --glow-blue:0 0 26px rgba(37,99,235,.42);
  --shadow:var(--glass-lift);
  --term-bg:rgba(6,13,28,.60); --term-ink:#D4E2F2; --term-dim:#8298B8; --term-line:rgba(190,216,255,.16);
  --maxw:1280px; --readw:720px; --pad:32px; --r:12px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:var(--sans);
  --mono:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}

/* ---------------- base ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
  /* isolate: keeps the ambient pseudo-layers inside body's stacking context, so every
     backdrop-filter above them samples the field instead of a flat colour */
  isolation:isolate;
  background:
    radial-gradient(42% 38% at 16% 10%, rgba(37,99,235,.30), transparent 66%),
    radial-gradient(38% 34% at 86% 6%, rgba(34,179,240,.24), transparent 64%),
    radial-gradient(46% 40% at 76% 80%, rgba(56,189,248,.15), transparent 66%),
    radial-gradient(38% 34% at 8% 88%, rgba(16,185,129,.11), transparent 64%),
    var(--bg);
  background-attachment:fixed}
/* the slow drift that makes the field read as liquid rather than wallpaper.
   fixed + pointer-events:none + negative z-index — it is paint only, never a flex item. */
body::before{content:""; position:fixed; inset:-18%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34% 30% at 22% 18%, rgba(37,99,235,.40), transparent 64%),
    radial-gradient(30% 27% at 80% 12%, rgba(34,179,240,.32), transparent 62%),
    radial-gradient(36% 32% at 70% 76%, rgba(99,179,255,.22), transparent 64%),
    radial-gradient(30% 28% at 14% 82%, rgba(16,185,129,.15), transparent 62%);
  animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(1.6%,-2.2%,0) scale(1.07)}
  100%{transform:translate3d(-1.6%,1.8%,0) scale(1.03)}}
/* vignette: pulls the edges down so panes read as lit from the middle */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 0%, transparent 36%, rgba(5,11,24,.60) 100%)}
main{flex:1}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; display:block}
code,kbd,pre,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--blue); color:#fff}
::-webkit-scrollbar{width:6px; height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--surface-3)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--blue); color:#fff; padding:8px 14px; border-radius:6px}
.skip:focus{left:8px}

/* the surface, reused everywhere */
.card,.topic,.skill,.project,.adjacent a,.empty,.callout,.facts,.rung,.tablewrap,.about-hero .card-side,.feature,.result,.toc,.agent,.buildlog,.stat{
  background:var(--glass-tint), var(--surface); border:1px solid var(--line); border-radius:var(--r);
  -webkit-backdrop-filter:var(--glass-fx); backdrop-filter:var(--glass-fx);
  box-shadow:var(--glass-sheen), var(--glass-lift)}

/* the old HUD brackets are retired; the class stays as a hook */
.hud{position:relative}

/* ---------------- icons ---------------- */
.i{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.125em}

/* ---------------- header ---------------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(7,12,24,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.site-head .bar{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:inline-flex; align-items:center; gap:10px; white-space:nowrap}
.brand .mark{width:32px; height:32px; display:grid; place-items:center; flex:none; border-radius:6px; font-family:var(--mono); font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(45deg,var(--blue),var(--accent)); box-shadow:0 4px 12px -4px rgba(37,99,235,.6)}
.brand .name{display:flex; flex-direction:column; line-height:1.2}
.brand .name b{font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink-hi)}
.brand .name small{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-2)}
.status-pill{display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px; background:var(--bg); border:1px solid rgba(16,185,129,.3); font-family:var(--mono); font-size:11px; white-space:nowrap}
.status-pill .ok{color:var(--ok); font-weight:500}
.status-pill .sep{color:var(--ink-3)}
.status-pill .dim{color:var(--ink-2)}
.ping{position:relative; width:8px; height:8px; flex:none}
.ping::before,.ping::after{content:""; position:absolute; inset:0; border-radius:50%; background:#10B981}
.ping::before{background:var(--ok); opacity:.75; animation:ping 1.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.2); opacity:0}}
.mainnav{display:flex; gap:4px; margin-left:auto}
.mainnav a{white-space:nowrap; font-size:14px; font-weight:500; color:#CBD5E1; padding:6px 10px; border-radius:6px; transition:color .15s, background .15s}
.mainnav a:hover{color:var(--accent)}
.mainnav a[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
.head-tools{display:flex; align-items:center; gap:8px}
.searchbox{display:flex; align-items:center; gap:8px; height:32px; padding:0 10px; border:1px solid var(--line-2); border-radius:6px; background:var(--surface-2); color:var(--ink-2); width:190px; transition:.15s}
.searchbox:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.searchbox input{border:0; outline:0; background:transparent; font-family:var(--mono); font-size:12px; color:var(--ink); width:100%}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox svg{flex:none}
.iconbtn{width:32px; height:32px; display:grid; place-items:center; border-radius:6px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); transition:.15s}
.iconbtn:hover{background:var(--surface-3)}
.iconbtn svg{width:16px; height:16px}
.head-btn{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:6px; background:var(--blue); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.4); transition:.15s}
.head-btn:hover{background:var(--blue-hi)}
.only-mobile{display:none}
@media(max-width:1380px){.status-pill{display:none}}
@media(max-width:900px){
  .searchbox{display:none} .only-mobile{display:grid}
  .site-head .bar{flex-wrap:wrap; height:auto; padding-top:12px; row-gap:6px; column-gap:16px}
  .head-tools{margin-left:auto}
  .mainnav{order:3; width:100%; margin:0 -10px; padding:0 0 8px; overflow-x:auto; scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
}
@media(max-width:420px){.brand .name small{display:none} .head-btn span{display:none}}

/* ---------------- buttons, chips, labels ---------------- */
.btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; font-family:var(--sans); font-size:14px; font-weight:600;
  border:1px solid var(--line-2); border-radius:8px; background:var(--surface-2); color:var(--ink); cursor:pointer; transition:.15s; white-space:nowrap}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--glow-blue)}
.btn.primary:hover{background:var(--blue-hi); border-color:var(--blue-hi)}
.btn svg{width:16px; height:16px}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink);
  background:rgba(37,99,235,.2); padding:2px 8px; border-radius:4px; white-space:nowrap}
.chip.video{color:var(--fail); background:var(--fail-soft)}
.kicker{display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:4px 12px; border-radius:999px; background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.3);
  font-family:var(--mono); font-size:12px; color:var(--accent)}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.meta .sep{width:3px; height:3px; border-radius:50%; background:var(--ink-3)}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags a{font-family:var(--mono); font-size:12px; color:#CBD5E1; padding:4px 10px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px; transition:.15s}
.tags a:hover{border-color:var(--accent); color:var(--accent)}

/* ---------------- section heads ---------------- */
.section{padding-top:32px; padding-bottom:32px}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.sec-head h2{margin:0; display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; letter-spacing:-.015em; color:var(--ink-hi)}
.sec-head h2 .i{color:var(--accent); font-size:20px}
.sec-head p{margin:4px 0 0; font-size:14px; color:var(--ink-2)}
.sec-head a{font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--void); transition:.15s}
.sec-head a:hover{color:var(--accent); border-color:var(--line-2)}
@media(max-width:620px){.sec-head{flex-direction:column; align-items:start; gap:12px} .sec-head p{font-size:13px}}

/* ---------------- hero (home): intro + console ---------------- */
.hero{padding-top:40px; padding-bottom:32px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:stretch}
@media(max-width:1020px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-lead{display:flex; flex-direction:column; gap:20px}
.hero-lead .kicker{align-self:start; margin:0}
.hero h1{font-size:clamp(32px,4.4vw,48px); line-height:1.12; letter-spacing:-.025em; font-weight:800; color:var(--ink-hi); margin:0; text-wrap:balance}
.hero h1 em{font-style:normal; background:linear-gradient(90deg,var(--blue-hi),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.sub{font-size:16px; line-height:1.65; color:var(--ink-2); margin:0; text-wrap:pretty}
.hero .actions{display:flex; flex-wrap:wrap; gap:10px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(min-width:640px) and (max-width:1020px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:12px 14px}
.stat b{display:block; font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink-hi)}
.stat b.c-cyan{color:var(--accent)} .stat b.c-ok{color:var(--ok)}
.stat span{display:block; font-size:12px; color:var(--ink-2); margin-top:2px}
.tech{display:flex; flex-wrap:wrap; gap:8px}
.tech span{font-family:var(--mono); font-size:12px; color:#CBD5E1; padding:4px 10px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line-2)}

/* the console */
.console{display:flex; flex-direction:column; min-height:440px; contain:size; background:var(--void); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.console-bar{display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; user-select:none}
.lights{display:flex; gap:8px}
.lights i{width:12px; height:12px; border-radius:50%; display:block}
.lights i:nth-child(1){background:rgba(244,63,94,.8)} .lights i:nth-child(2){background:rgba(245,158,11,.8)} .lights i:nth-child(3){background:rgba(16,185,129,.8)}
.console-bar .who{color:var(--ink-2); margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.console-bar .tls{margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--ink-3); white-space:nowrap}
.console-bar .tls .i{color:var(--ok)}
.console-body{flex:1 1 0; min-height:0; padding:16px; overflow-y:auto; font-family:var(--mono); font-size:13px; line-height:1.65; color:#CBD5E1; cursor:text;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(0,0,0,.2) 50%); background-size:100% 4px}
.console-intro{margin:0 0 12px; color:var(--ink-3)}
.console-intro b,.console .hl{color:var(--accent); font-weight:400}
.console-history{display:flex; flex-direction:column; gap:6px}
.console .echo{display:flex; gap:8px; flex-wrap:wrap}
.console .echo .cmd{color:#fff; word-break:break-all}
.console .out{margin:0 0 4px; padding-left:14px; border-left:2px solid rgba(37,99,235,.4); white-space:pre-wrap; word-break:break-word}
.console .out a{color:var(--accent); text-decoration:underline; text-decoration-color:rgba(14,165,233,.35); text-underline-offset:3px}
.console .out a:hover{text-decoration-color:var(--accent)}
.console .dim{color:var(--ink-3)} .console .good{color:var(--ok)} .console .bad{color:var(--fail)} .console .warnc{color:var(--warn)}
.console .prompt{color:var(--ok); font-weight:700; white-space:nowrap}
.console-line{display:flex; align-items:center; gap:8px; padding-top:4px}
.console-line input{flex:1; min-width:0; background:transparent; border:0; outline:0; padding:0; font:inherit; color:var(--accent); caret-color:var(--accent)}
.console-line input::placeholder{color:var(--ink-3)}
.console-foot{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 12px; background:var(--bg); border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.console-foot .dim{color:var(--ink-3)}
.console-foot button{font:inherit; color:inherit; background:none; border:0; padding:2px 0; cursor:pointer}
.console-foot button:hover{color:var(--accent); text-decoration:underline}
@media(max-width:520px){.console{min-height:380px} .console-body{font-size:12px} .console-bar .tls{display:none}}

/* ---------------- thumbnails ---------------- */
.thumb{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--void); isolation:isolate; border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.thumb.gen{--c:#0EA5E9; background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 60%),
    radial-gradient(80% 80% at 0% 100%, color-mix(in srgb, var(--c) 8%, transparent), transparent 70%),
    linear-gradient(160deg,#1B2842,#0A1222)}
.thumb.gen::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size:24px 24px; mask-image:linear-gradient(210deg,#000 5%,transparent 80%); -webkit-mask-image:linear-gradient(210deg,#000 5%,transparent 80%)}
.thumb.gen .glyph{position:absolute; right:8%; bottom:12%; width:30%; max-width:110px; color:var(--c)}
.thumb.gen .glyph svg{width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.thumb.gen .word{position:absolute; left:6%; bottom:11%; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--c);
  padding:2px 8px; border-radius:4px; background:color-mix(in srgb, var(--c) 14%, transparent)}
/* Logos fill the thumbnail: sized off the thumb's own box (container units), so one logo
   takes most of the height and two or three share the width without shrinking to icons. */
.thumb{container-type:size}
.thumb .logos{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5cqw; padding:0 7cqw}
.thumb .plate{--w:min(84cqh, 62cqw); flex:none; width:var(--w); height:var(--w); display:grid; place-items:center; border-radius:18%; background:#F8FAFC;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 32px color-mix(in srgb, var(--c) 30%, transparent), 0 14px 30px -12px rgba(0,0,0,.9)}
.thumb .logos[data-n="2"] .plate{--w:min(76cqh, 40cqw)}
.thumb .logos[data-n="3"] .plate{--w:min(64cqh, 26cqw)}
.thumb .plate img{width:78%; height:78%; object-fit:contain}
.thumb.gen:has(.logos) .word{top:7%; bottom:auto; z-index:1}
.thumb[data-cat="built"],.topic[data-cat="built"]{--c:#3B82F6}
.thumb[data-cat="repaired"],.topic[data-cat="repaired"]{--c:#F59E0B}
.thumb[data-cat="pentested"],.topic[data-cat="pentested"]{--c:#F43F5E}
.thumb[data-cat="assessed"],.topic[data-cat="assessed"]{--c:#10B981}
.thumb[data-cat="administered"],.topic[data-cat="administered"]{--c:#0EA5E9}
.thumb .play{position:absolute; inset:0; display:grid; place-items:center}
.thumb .play span{width:54px; height:54px; display:grid; place-items:center; background:rgba(7,12,24,.7); border:1px solid rgba(255,255,255,.2); border-radius:50%;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .2s}
.thumb .play svg{width:20px; height:20px; fill:#fff; margin-left:3px}
.thumb .dur{position:absolute; right:8px; bottom:8px; font-family:var(--mono); font-size:11px; color:#fff; background:rgba(7,12,24,.85); padding:2px 6px; border-radius:4px}

/* ---------------- cards ---------------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr; gap:16px}}
.card{display:flex; flex-direction:column; gap:12px; padding:12px 12px 18px; transition:transform .2s, border-color .2s}
.card > :not(.thumb){margin-left:4px; margin-right:4px}
.card h3{font-size:17px; line-height:1.35; letter-spacing:-.01em; font-weight:700; color:var(--ink-hi); margin:0; text-wrap:balance; transition:color .15s}
.card p{margin:0; color:var(--ink-2); font-size:14px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card .top{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.card .meta{margin-top:auto}
.card:hover{transform:translateY(-2px); border-color:rgba(37,99,235,.5)}
.card:hover h3{color:var(--accent-ink)}
.card:hover .thumb img{transform:scale(1.03)}
.card:hover .thumb .play span{transform:scale(1.08)}

.feature{display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; padding:14px 32px 14px 14px; transition:border-color .2s}
.feature .thumb{aspect-ratio:16/10; border-radius:8px}
.feature h2{font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.02em; font-weight:800; color:var(--ink-hi); margin:14px 0 12px; text-wrap:balance; transition:color .15s}
.feature p{font-size:15.5px; color:var(--ink-2); margin:0 0 18px}
.feature:hover{border-color:rgba(37,99,235,.5)}
.feature:hover h2{color:var(--accent-ink)}
.feature:hover .thumb img{transform:scale(1.02)}
@media(max-width:860px){.feature{grid-template-columns:1fr; gap:18px; padding:12px 12px 22px} .feature > div:last-child{padding:0 6px}}

.topic-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media(max-width:1080px){.topic-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.topic-grid{grid-template-columns:1fr}}
.topic{display:flex; flex-direction:column; gap:8px; padding:18px; transition:.2s}
.topic:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent); transform:translateY(-2px)}
.topic .ic{width:36px; height:36px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 15%, transparent); border-radius:8px}
.topic .ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.topic h3{margin:4px 0 0; font-size:16px; font-weight:700; color:var(--ink-hi)}
.topic p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}
.topic .n{font-family:var(--mono); font-size:11px; color:var(--c); margin-top:auto; padding-top:6px}

.empty{border-style:dashed; border-color:var(--line-2); padding:32px 24px; text-align:center; color:var(--ink-2); font-size:15px}
.empty b{color:var(--ink-hi)}
.empty a{color:var(--accent)}

/* ---------------- listing pages ---------------- */
.pagehead{padding-top:48px; padding-bottom:28px}
.pagehead h1{font-size:clamp(30px,4.4vw,46px); letter-spacing:-.025em; line-height:1.1; font-weight:800; color:var(--ink-hi); margin:0 0 12px; text-wrap:balance}
.pagehead p{margin:0; font-size:16px; color:var(--ink-2); max-width:64ch}
.pagehead p a{color:var(--accent)}
.filterbar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.filterbar a{display:inline-flex; align-items:center; font-family:var(--mono); font-size:12px; font-weight:600; padding:8px 14px; border-radius:8px; color:var(--ink-2); transition:.15s}
.filterbar a:hover{color:#fff; background:var(--surface-2)}
.filterbar a[aria-current="page"]{background:var(--blue); color:#fff}
.filterbar .n{opacity:.6; margin-left:6px}
.pager{display:flex; justify-content:center; align-items:center; gap:6px; margin:48px 0 0}
.pager a,.pager span{min-width:38px; height:38px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:13px; color:var(--ink-2); background:var(--surface)}
.pager a:hover{border-color:var(--line-2); color:#fff}
.pager [aria-current="page"]{background:var(--blue); color:#fff; border-color:var(--blue)}
.pager .off{opacity:.35}

/* search */
.searchpage form{display:flex; gap:10px; max-width:640px; margin-top:20px}
.searchpage input{flex:1; min-width:0; height:46px; padding:0 14px; font-family:var(--sans); font-size:15px; color:#fff; background:var(--void); border:1px solid var(--line-2); border-radius:8px; outline:0}
.searchpage input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.searchpage .btn{height:46px}
.results{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.result{display:grid; grid-template-columns:220px 1fr; gap:22px; padding:12px; transition:.2s}
.result h3{margin:6px 0; font-size:18px; font-weight:700; color:var(--ink-hi)}
.result p{margin:0; color:var(--ink-2); font-size:14px}
.result:hover{border-color:rgba(37,99,235,.5)} .result:hover h3{color:var(--accent-ink)}
@media(max-width:620px){.result{grid-template-columns:1fr; gap:12px}}

/* ---------------- post page ---------------- */
.post-head{padding-top:40px; padding-bottom:28px}
.post-head > *{max-width:880px}
.crumbs{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:20px}
.crumbs a:hover{color:var(--accent)}
.post-head h1{font-size:clamp(30px,4.6vw,48px); line-height:1.12; letter-spacing:-.025em; font-weight:800; color:var(--ink-hi); margin:14px 0 16px; text-wrap:balance}
.post-head .lede{font-size:clamp(16px,1.8vw,18.5px); line-height:1.6; color:var(--ink-2); margin:0 0 22px; text-wrap:pretty}
.byline{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.byline b{color:var(--accent); font-weight:500; margin-right:6px}
.post-media{margin:0 0 40px}
.post-media .thumb{aspect-ratio:32/7; border-radius:var(--r)}
.post-media .thumb .plate{--w:min(76cqh, 30cqw)}
.post-media video{width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--r); border:1px solid var(--line)}
.post-body{display:grid; grid-template-columns:minmax(0,var(--readw)) 240px; gap:56px; justify-content:space-between}
.post-body.no-toc{grid-template-columns:minmax(0,var(--readw))}
@media(max-width:1060px){.post-body{grid-template-columns:minmax(0,1fr)} .toc{display:none}}
.toc{position:sticky; top:88px; align-self:start; font-size:13px; padding:16px}
.toc h4{margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:t}
.toc li{counter-increment:t; display:flex; gap:8px}
.toc li::before{content:counter(t,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--ink-3); padding-top:2px}
.toc a{color:var(--ink-2); display:block; line-height:1.4; transition:.15s}
.toc a:hover,.toc a.on{color:var(--accent)}
.post-foot{max-width:var(--readw); margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
.share{display:flex; gap:8px}
.share .btn{height:34px; font-family:var(--mono); font-size:12px; font-weight:500; padding:0 12px}
.adjacent{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px}
.adjacent a{display:flex; flex-direction:column; gap:4px; padding:16px 18px; transition:border-color .2s}
.adjacent a:hover{border-color:rgba(37,99,235,.5)}
.adjacent small{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--ink-3)}
.adjacent b{font-weight:600; font-size:15.5px; line-height:1.35; color:var(--ink-hi)}
.adjacent a:hover b{color:var(--accent-ink)}
.adjacent .next{text-align:right; grid-column:2}
@media(max-width:620px){.adjacent{grid-template-columns:1fr} .adjacent .next{grid-column:auto; text-align:left}}

/* ---------------- prose: the entry body + its components ---------------- */
.prose{font-size:16.5px; line-height:1.75; color:#CBD5E1; min-width:0}
.prose .readwrap{max-width:none; padding:0; margin:0}
.prose .masthead{display:none}
.prose section{padding:0}
.prose section + section{margin-top:2.6em}
.prose h2{font-size:clamp(22px,2.6vw,27px); line-height:1.25; letter-spacing:-.02em; font-weight:700; color:var(--ink-hi); margin:1.8em 0 .6em; padding-bottom:.35em; border-bottom:1px solid var(--line); text-wrap:balance}
.prose h2::before{content:"# "; font-family:var(--mono); font-weight:500; color:var(--accent)}
.prose section > h2:first-child,.prose section > .part-tag:first-child,.prose > h2:first-child{margin-top:0}
.prose h3{font-size:19px; line-height:1.35; letter-spacing:-.01em; font-weight:700; color:var(--ink-hi); margin:1.7em 0 .5em}
.prose h4{font-size:16.5px; font-weight:700; margin:1.5em 0 .4em; color:var(--ink-hi)}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--accent-ink); text-decoration:underline; text-decoration-color:rgba(14,165,233,.4); text-underline-offset:3px}
.prose a:hover{color:var(--accent); text-decoration-color:var(--accent)}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.35em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent)}
.prose ul.tight li{margin:.2em 0}
.prose strong,.prose b{font-weight:650; color:var(--ink-hi)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
.prose blockquote{margin:1.5em 0; padding:2px 0 2px 18px; border-left:2px solid var(--blue); color:var(--ink-2); font-style:italic}
.prose .small{font-size:14px; color:var(--ink-2)}
.prose :not(pre) > code{font-size:.84em; color:var(--accent-ink); background:var(--surface-2); border:1px solid var(--line-2); padding:.1em .4em; border-radius:4px; word-break:break-word}
.prose pre{background:var(--term-bg); color:var(--term-ink); border:1px solid var(--term-line); border-radius:8px; padding:16px 18px; overflow-x:auto; font-size:13px; line-height:1.7; margin:1.5em 0}
.prose img{border-radius:8px; border:1px solid var(--line); height:auto}
.prose figure{margin:2em 0}
.prose figure svg{display:block; width:100%; height:auto; background:var(--void); color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.prose figcaption{font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:center; margin-top:10px}
.prose .part-tag{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; display:flex; gap:8px}
.prose .part-tag + h2{margin-top:0}
.prose .part-tag .num{color:var(--ink-3)}

.prose .tablewrap{overflow-x:auto; margin:1.6em 0}
.prose table{border-collapse:collapse; width:100%; font-size:14px; line-height:1.5}
.prose th,.prose td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.prose thead th{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); background:var(--void)}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody tr:hover td{background:rgba(30,41,59,.5)}
.prose td.mono,.prose th.mono{font-size:12.5px; white-space:nowrap; color:var(--ink-2)}
.prose > table,.prose section > table{display:block; overflow-x:auto}

.callout{margin:1.7em 0; padding:14px 18px; border-left:3px solid var(--accent); border-radius:8px; font-size:15px; line-height:1.65}
.callout p:last-child{margin-bottom:0}
.callout .ctag,.callout .label{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; color:var(--accent)}
.callout.win{border-left-color:var(--ok); background:linear-gradient(90deg,var(--ok-soft),transparent 70%), var(--surface)} .callout.win .ctag{color:var(--ok)}
.callout.gotcha{border-left-color:var(--warn); background:linear-gradient(90deg,var(--warn-soft),transparent 70%), var(--surface)} .callout.gotcha .ctag{color:var(--warn)}
.callout.fail{border-left-color:var(--fail); background:linear-gradient(90deg,var(--fail-soft),transparent 70%), var(--surface)} .callout.fail .ctag{color:var(--fail)}
.callout.inference{border-left-color:var(--info); background:linear-gradient(90deg,var(--info-soft),transparent 70%), var(--surface)} .callout.inference .label{color:var(--info)}
.callout.recommendation{border-left-color:var(--ok); background:linear-gradient(90deg,var(--ok-soft),transparent 70%), var(--surface)} .callout.recommendation .label{color:var(--ok)}

.term{margin:1.6em 0; background:var(--term-bg); border:1px solid var(--term-line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.term-bar{display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--term-line); background:var(--surface)}
.term-bar .lights{gap:6px}
.term-bar .lights i{width:10px; height:10px}
.term-bar .who{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-left:6px}
.prose .term pre{margin:0; border:0; border-radius:0; font-size:13px; line-height:1.75;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(0,0,0,.18) 50%); background-size:100% 4px}
.term pre .p,.term pre .cmd{color:var(--ok); font-weight:700}
.term pre .c{color:var(--term-dim)} .term pre .v{color:#fff} .term pre .g,.term pre .good{color:var(--ok)}
.term pre .k{color:var(--accent)}

.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; margin:1.6em 0; background:var(--line); overflow:hidden}
.facts > div{background:var(--surface); padding:12px 16px}
.facts dt{font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px}
.facts dd{margin:0; font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--accent); word-break:break-word}

.ladder{display:flex; flex-direction:column; gap:10px; margin:1.7em 0}
.rung{display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:center; padding:14px 16px; border-left:3px solid var(--line-2)}
.rung .code{font-family:var(--mono); font-weight:700; font-size:24px; text-align:center}
.rung .desc{font-size:14.5px; color:var(--ink-2); line-height:1.55} .rung .desc b{color:var(--ink-hi)}
.rung.r522{border-left-color:var(--fail)} .rung.r522 .code{color:var(--fail)}
.rung.r502{border-left-color:var(--warn)} .rung.r502 .code{color:var(--warn)}
.rung.r200{border-left-color:var(--ok)} .rung.r200 .code{color:var(--ok)}

.pillrow{display:flex; flex-wrap:wrap; gap:8px; margin:1.4em 0}
.pill{font-family:var(--mono); font-size:12px; padding:4px 10px; border-radius:4px; border:1px solid var(--line-2); color:#CBD5E1; background:var(--surface-2)}
.pill.ok{color:var(--ok); border-color:rgba(16,185,129,.35); background:var(--ok-soft)}

/* ---------------- about page ---------------- */
.about-hero{padding-top:48px; padding-bottom:32px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:end}
.about-hero h1{font-size:clamp(32px,4.8vw,50px); line-height:1.1; letter-spacing:-.025em; font-weight:800; color:var(--ink-hi); margin:0 0 16px}
.about-hero p{font-size:16px; color:var(--ink-2); margin:0 0 14px; max-width:62ch}
.about-hero p b{color:var(--ink-hi)}
.about-hero .card-side{padding:20px; font-size:14px}
.about-hero .card-side dl{margin:0; display:grid; gap:14px}
.about-hero .card-side dt{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; color:var(--ink-2)}
.about-hero .card-side dd{margin:2px 0 0; color:var(--ink-hi); font-weight:500}
.about-hero .card-side a{color:var(--accent)}
@media(max-width:860px){.about-hero{grid-template-columns:1fr; gap:24px}}
.skills{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.skill{padding:20px; transition:border-color .2s}
.skill:hover{border-color:rgba(37,99,235,.5)}
.skill .ic{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:rgba(37,99,235,.2); color:var(--accent); margin-bottom:12px}
.skill .ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.skill h3{margin:0 0 6px; font-size:16px; font-weight:700; color:var(--ink-hi)}
.skill p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.projects{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:980px){.projects{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.projects{grid-template-columns:1fr}}
.project{display:flex; flex-direction:column; overflow:hidden; transition:.2s}
a.project:hover{transform:translateY(-2px); border-color:rgba(37,99,235,.5)}
.project .logo{height:190px; display:grid; place-items:center; border-bottom:1px solid var(--line); background:radial-gradient(60% 80% at 50% 40%, rgba(37,99,235,.18), transparent 70%), var(--void)}
.project .logo img{width:150px; height:150px; object-fit:contain; padding:14px; border-radius:26px; background:#F8FAFC; box-shadow:0 0 0 1px rgba(14,165,233,.35), 0 0 28px rgba(37,99,235,.3)}
.project .logo.lab{color:var(--accent)}
.project .logo.lab svg{width:120px; height:120px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.project .pb{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.project h3{margin:0; font-size:18px; font-weight:700; color:var(--ink-hi)}
.project p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.55}
.project .tags span{font-family:var(--mono); font-size:11px; color:#CBD5E1; padding:3px 8px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px}
.project .go{margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--accent)}
.project .top{display:flex; gap:6px; flex-wrap:wrap}
.project .tags{display:flex; gap:6px; flex-wrap:wrap}
.project .go{display:flex; flex-wrap:wrap; gap:6px 16px}
.project .go a:hover{color:var(--accent-ink); text-decoration:underline}
.mc-live{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--glass-in); box-shadow:var(--glass-in-shadow); font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.mc-live .row{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px}
.mc-live .ed{min-width:58px; color:var(--ink-3); text-transform:uppercase; font-size:11px}
.mc-live b{color:var(--ink-hi); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.stack{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px}
.stack a{display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  font-family:var(--mono); font-size:12px; color:var(--ink-2); text-align:center; transition:.18s}
.stack a:hover{border-color:rgba(37,99,235,.5); color:#fff; transform:translateY(-2px)}
.stack .lg{display:grid; place-items:center; width:76px; height:76px; border-radius:16px; background:#F8FAFC}
.stack img{width:58px; height:58px; object-fit:contain}
.contact-band{margin:16px 0 0; padding:32px; border-radius:var(--r); display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg,rgba(37,99,235,.18),rgba(14,165,233,.04) 60%), var(--surface); border:1px solid var(--line)}
.contact-band h2{margin:0 0 6px; font-size:clamp(22px,2.8vw,28px); font-weight:800; letter-spacing:-.02em; color:var(--ink-hi)}
.contact-band p{margin:0; color:var(--ink-2)}
.contact-band .btn{background:var(--blue); border-color:var(--blue); color:#fff}
.contact-band .btn:hover{background:var(--blue-hi)}

/* ---------------- footer ---------------- */
.site-foot{margin-top:64px; border-top:1px solid var(--line); background:var(--void)}
.site-foot .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding:44px 0 32px}
.site-foot h4{margin:0 0 12px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.site-foot li a{color:var(--ink-2)} .site-foot li a:hover{color:var(--accent)}
.site-foot p{margin:14px 0 0; font-size:14px; color:var(--ink-2); max-width:38ch}
.site-foot .fine{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; padding:20px 0 28px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.site-foot .fine .badges{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px}
.site-foot .fine .ok{color:var(--ok); display:inline-flex; align-items:center; gap:6px}
@media(max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr} .site-foot .cols > :first-child{grid-column:1 / -1}}

@media(max-width:520px){
  :root{--pad:16px}
  .hero{padding-top:28px} .section{padding-top:24px; padding-bottom:24px}
  .prose{font-size:16px}
  .contact-band{padding:24px 20px}
  .rung{grid-template-columns:64px 1fr; gap:12px} .rung .code{font-size:20px}
  .post-media .thumb{aspect-ratio:16/9}
}

/* ---------------- live lab telemetry ---------------- */
.labpanel{display:flex; flex-direction:column; gap:16px}
.lp-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:12px}
.live{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:6px; background:var(--void); border:1px solid var(--line); color:var(--ok)}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--ok); animation:blinkp 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes blinkp{50%{opacity:.4}}
.lp-at{color:var(--ink-3)}
.lp-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.labpanel.full .lp-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.labpanel.full .lp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lp-grid,.labpanel.full .lp-grid{grid-template-columns:1fr}}
.lp-m{--c:var(--accent); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px}
.lp-m:nth-child(1){--c:#34D399} .lp-m:nth-child(2){--c:#3B82F6} .lp-m:nth-child(3){--c:#0EA5E9} .lp-m:nth-child(4){--c:#FBBF24}
.lp-m .k{font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--ink-2)}
.lp-m b{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--c); text-align:right}
.spark{grid-column:1 / -1; width:100%; height:88px; overflow:visible; background:linear-gradient(var(--line),var(--line)) 0 50% / 100% 1px no-repeat}
.spark .line{fill:none; stroke:var(--c); stroke-width:2; vector-effect:non-scaling-stroke}
.spark .fill{fill:color-mix(in srgb, var(--c) 16%, transparent); stroke:none}
.meter{grid-column:1 / -1; display:block; height:8px; background:var(--void); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.lp-m .meter{align-self:end; margin-top:auto}
.lp-m:has(.meter){grid-template-rows:auto 1fr}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--accent))}
.lp-m .meter i{background:var(--c)}
.lp-svc{display:flex; flex-wrap:wrap; gap:8px 20px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.lp-svc span{display:inline-flex; align-items:center; gap:7px}
.lp-svc b{color:#fff; font-weight:500}
.lp-up{margin-left:auto}
.dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; background:var(--ink-3)}
.dot.up{background:var(--ok)} .dot.down{background:var(--fail)} .dot.warn{background:var(--warn)}
.lp-agents{display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:6px 12px; padding:12px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--void); transition:.15s; font-family:var(--mono); font-size:12px}
.lp-agents:hover{border-color:rgba(37,99,235,.5)}
.lp-agents .k{text-transform:uppercase; color:var(--ink-2); font-weight:700}
.lp-agents .st{font-weight:700; color:#fff}
.lp-agents .st.ok{color:var(--ok)} .lp-agents .st.warn{color:var(--warn)} .lp-agents .st.off{color:var(--ink-3)}
.lp-agents .why{color:var(--ink-3); text-align:right}
@media(max-width:620px){.lp-agents{grid-template-columns:auto 1fr} .lp-agents .why{grid-column:1 / -1; text-align:left} .lp-up{margin-left:0}}

/* ---------------- agent sweep ---------------- */
.agents{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.agent{padding:16px; border-left:3px solid var(--ok); display:flex; flex-direction:column; gap:8px}
.agent.attention{border-left-color:var(--warn)} .agent.error{border-left-color:var(--fail)}
.a-top{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px}
.a-top b{color:#fff; font-weight:700}
.a-st{margin-left:auto; font-size:10px; text-transform:uppercase; padding:2px 8px; border-radius:4px; color:var(--ok); background:var(--ok-soft)}
.agent.attention .a-st{color:var(--warn); background:var(--warn-soft)} .agent.error .a-st{color:var(--fail); background:var(--fail-soft)}
.agent p{margin:0; font-size:13.5px; line-height:1.5}
.a-feed{color:var(--ink-3)} .a-ok{color:var(--ink-2)} .a-find{color:var(--ink)}
.a-rec{color:var(--ink-2)} .a-rec code{font-size:12px; color:var(--warn); background:var(--warn-soft); padding:1px 5px; border-radius:3px}
.a-meta{margin-top:auto; padding-top:8px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* ---------------- activity feed ---------------- */
.activity{list-style:none; margin:0; padding:4px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.ev{display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev-k{justify-self:start; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; color:var(--accent-ink); background:rgba(37,99,235,.2)}
.ev.update .ev-k{color:var(--info); background:var(--info-soft)} .ev.deploy .ev-k{color:var(--ink-2); background:var(--surface-2)} .ev.agents .ev-k{color:var(--warn); background:var(--warn-soft)}
.ev.video .ev-k{color:var(--fail); background:var(--fail-soft)}
.ev-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.ev-b a,.ev-b span{color:var(--ink-hi); font-size:14.5px}
.ev-b a:hover{color:var(--accent)}
.ev-b small{color:var(--ink-3); font-size:13px}
.ev time{font-family:var(--mono); font-size:12px; color:var(--ink-3); white-space:nowrap}
@media(max-width:620px){.ev{grid-template-columns:1fr auto; gap:6px 14px} .ev-k{grid-column:1 / -1}}

/* ---------------- build logs ---------------- */
.chip.status{color:var(--warn); background:var(--warn-soft)}
.chip.status.planned{color:var(--info); background:var(--info-soft)}
.chip.status.complete{color:var(--ok); background:var(--ok-soft)}
.buildlog{margin-top:18px; padding:16px 18px}
.bl-top{display:flex; align-items:center; gap:10px}
.bl-top .k{font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; color:var(--ink-2)}
.bl-pct{margin-left:auto; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--accent)}
.buildlog .meter{margin-top:12px}
.bl-updates{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.bl-updates li{display:grid; grid-template-columns:100px 1fr; gap:12px; color:var(--ink-2)}
.bl-updates time{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding-top:2px}

/* ---------------- click-to-launch embeds (games, demos) ---------------- */
.playframe{position:relative; margin:1.6em 0; aspect-ratio:980/892; max-height:80vh; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#000}
.playframe img{width:100%; height:100%; object-fit:contain; border:0; border-radius:0; filter:brightness(.55) saturate(.8)}
.playframe .btn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--glow-blue)}
.playframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#111}
.playframe.launched{max-height:none}

/* ---------------- visitor dashboard (/stats) ---------------- */
.st-gate{max-width:520px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.st-gate label{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px}
.st-gate-row{display:flex; gap:10px}
.st-gate input{flex:1; min-width:0; height:40px; padding:0 12px; font-family:var(--mono); font-size:13px; color:#fff; background:var(--void); border:1px solid var(--line-2); border-radius:8px; outline:0}
.st-gate input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.st-gate-msg{margin:10px 0 0; font-size:13px; color:var(--ink-3)}
.st-gate-msg.bad{color:var(--fail)}
.st-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:20px}
.st-range{display:flex; gap:2px; padding:2px; background:var(--void); border:1px solid var(--line); border-radius:8px}
.st-range button{font-family:var(--mono); font-size:12px; font-weight:600; padding:6px 12px; border:0; border-radius:6px; background:none; color:var(--ink-2); cursor:pointer}
.st-range button:hover{color:#fff}
.st-range button[aria-pressed="true"]{background:var(--blue); color:#fff}
.st-updated{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.st-link{font-family:var(--mono); font-size:12px; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer}
.st-link:hover{color:var(--accent); border-color:var(--line-2)}
.st-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:760px){.st-kpis{grid-template-columns:1fr 1fr}}
.st-label{font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px}
.st-none{font-size:13px; color:var(--ink-3); padding:6px 0}

/* the world map: same silhouette, grid, projection and bubbles as the Aegis CloudOps Cloud Map */
.wm{position:relative; width:100%; aspect-ratio:2/1; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:radial-gradient(120% 130% at 50% -10%, rgba(6,182,212,.08), transparent 55%), var(--surface)}
.wm-base{position:absolute; inset:0; width:100%; height:100%}
.wm-grid line{stroke:var(--line-2); stroke-width:.4; opacity:.35}
.wm-land{fill:var(--line-2); fill-opacity:.5; stroke:var(--line-2); stroke-width:.25; stroke-linejoin:round}
.wm-layer{position:absolute; inset:0}
.wm-pin{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center}
.wm-dot{display:grid; place-items:center; border-radius:50%; padding:0; cursor:pointer; font-family:var(--sans); font-size:10px; font-weight:700; color:#fff;
  background:rgba(6,182,212,.8); border:1px solid #06b6d4; box-shadow:0 0 14px rgba(6,182,212,.47); transition:transform .15s}
.wm-dot:hover{transform:scale(1.1)}
.wm-dot.on{box-shadow:0 0 0 3px rgba(6,182,212,.4)}
.wm-tag{margin-top:2px; font-family:var(--mono); font-size:10px; font-weight:500; color:var(--ink); white-space:nowrap; pointer-events:none;
  background:rgba(15,23,42,.8); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:0 4px; border-radius:3px}
.wm-empty{position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:var(--ink-2)}
.wm-empty[hidden],.st-dash[hidden],.st-gate[hidden]{display:none}
.st-loc{display:grid; grid-template-columns:1fr 2fr; gap:20px; margin-top:20px}
@media(max-width:860px){.st-loc{grid-template-columns:1fr}}
.st-loclist{display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto}
.st-locrow{display:flex; justify-content:space-between; gap:12px; width:100%; padding:8px 12px; text-align:left; cursor:pointer; font-family:var(--sans); font-size:14px;
  color:var(--ink-hi); background:var(--surface); border:1px solid var(--line); border-radius:8px; transition:border-color .15s}
.st-locrow:hover{border-color:rgba(6,182,212,.4)}
.st-locrow.on{border-color:#06b6d4; background:rgba(6,182,212,.1)}
.st-locrow .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-locrow .v{font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap}
.st-visits{display:flex; flex-direction:column; max-height:420px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.st-visit{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 14px; border-bottom:1px solid var(--line)}
.st-visit:last-child{border-bottom:0}
.st-visit .p{font-family:var(--mono); font-size:13px; color:var(--ink-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-visit time{font-family:var(--mono); font-size:12px; color:var(--ink-3); white-space:nowrap}
.st-visit .m{grid-column:1 / -1; font-size:12.5px; color:var(--ink-2)}

/* views per day */
.st-chart{position:relative; padding:16px 16px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.st-chart svg{display:block; overflow:visible}
.st-gridline{stroke:var(--line); stroke-width:1}
.st-axis{font-family:var(--mono); font-size:11px; fill:var(--ink-3)}
.st-barmark{fill:#06b6d4}
.st-hit{fill:transparent}
.st-hit:hover{fill:rgba(148,163,184,.06)}
.st-tip{position:absolute; top:6px; transform:translateX(-50%); display:flex; flex-direction:column; gap:2px; padding:6px 10px; pointer-events:none; white-space:nowrap;
  font-family:var(--mono); font-size:12px; color:var(--ink); background:rgba(7,12,24,.92); border:1px solid var(--line-2); border-radius:6px}
.st-tip b{color:#fff}
.st-tip[hidden]{display:none}

/* top lists */
.st-tops{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:980px){.st-tops{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.st-tops{grid-template-columns:1fr}}
.st-top{padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.st-top h3{margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-2)}
.st-row{display:grid; grid-template-columns:minmax(0,1fr) 72px 44px; align-items:center; gap:10px; padding:4px 0; font-size:13px}
.st-row .n{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-row .b{height:6px; background:var(--void); border-radius:3px; overflow:hidden}
.st-row .b i{display:block; height:100%; background:#06b6d4; border-radius:3px}
.st-row .v{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink-hi); text-align:right}

/* recent visits */
.st-tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.st-table{width:100%; border-collapse:collapse; font-size:13px}
.st-table th{text-align:left; padding:10px 14px; font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-2); background:var(--void); border-bottom:1px solid var(--line); white-space:nowrap}
.st-table td{padding:9px 14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top}
.st-table tr:last-child td{border-bottom:0}
.st-table td.mono{font-family:var(--mono); font-size:12px; white-space:nowrap}
.st-table td time{font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap}
.st-table tr.bot td{color:var(--ink-3)}
.st-code{margin-left:8px; font-size:11px; color:var(--warn)}

/* ---------------- about: how this site runs + privacy ---------------- */
.flow{list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:f}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.flow li{counter-increment:f; position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.flow li::before{content:"0" counter(f); font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent)}
.flow li:not(:last-child)::after{content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); font-family:var(--mono); color:var(--ink-3)}
@media(max-width:860px){.flow li::after{display:none}}
.flow b{font-size:15px; color:var(--ink-hi)}
.flow span{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.host-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.host-grid{grid-template-columns:1fr}}
.host-grid .skill p a{color:var(--accent)}
.privacy{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:760px){.privacy{grid-template-columns:1fr}}
.privacy > div{padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.privacy > div:last-child{border-left:3px solid var(--ok)}
.privacy h3{margin:0 0 10px; font-size:15px; font-weight:700; color:var(--ink-hi)}
.privacy ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--ink-2); line-height:1.55}
.privacy li::marker{color:var(--accent)}
.privacy code{font-size:.9em; color:var(--accent-ink)}
.privacy-note{margin:14px 0 0; font-size:14px; color:var(--ink-2); max-width:80ch}
.privacy-note a{color:var(--accent)}

/* live mode */
.st-live{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; cursor:pointer; font-family:var(--mono); font-size:12px;
  color:var(--ok); background:var(--bg); border:1px solid rgba(16,185,129,.3)}
.st-live-dot{width:8px; height:8px; border-radius:50%; background:var(--ok); animation:blinkp 2s cubic-bezier(.4,0,.6,1) infinite}
.st-live[aria-pressed="false"]{color:var(--ink-3); border-color:var(--line)}
.st-live[aria-pressed="false"] .st-live-dot{background:var(--ink-3); animation:none}
.wm-pings{position:absolute; inset:0; pointer-events:none}
.wm-ping{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid #34D399; background:rgba(52,211,153,.35);
  animation:wmping 2.4s ease-out forwards}
@keyframes wmping{0%{transform:scale(.6); opacity:1} 100%{transform:scale(5); opacity:0}}
.st-table tr.new td{animation:rownew 5s ease-out}
@keyframes rownew{0%,30%{background:rgba(52,211,153,.14)} 100%{background:transparent}}

/* who's on the site right now: pinned where they are, above the totals bubbles */
.wm-active{position:absolute; inset:0; pointer-events:none; z-index:40}
.wm-live{position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; padding:0; border-radius:50%; cursor:pointer; pointer-events:auto;
  background:#34D399; border:2px solid var(--void); box-shadow:0 0 0 1px #34D399, 0 0 12px rgba(52,211,153,.8)}
.wm-live-ring{position:absolute; inset:-2px; border-radius:50%; border:2px solid #34D399; animation:liveRing 1.8s ease-out infinite}
@keyframes liveRing{0%{transform:scale(1); opacity:.9} 100%{transform:scale(3.2); opacity:0}}
.wm-live b{position:absolute; left:16px; top:-18px; min-width:18px; padding:0 5px; border-radius:9px; font-family:var(--mono); font-size:11px; font-weight:700; line-height:18px; box-shadow:0 0 0 2px var(--void);
  color:var(--void); background:#34D399; text-align:center}
.wm-live:hover,.wm-live:focus-visible{transform:scale(1.25)}
.wm-legend{position:absolute; left:10px; bottom:8px; display:flex; gap:12px; padding:3px 8px; border-radius:4px; font-family:var(--mono); font-size:10.5px;
  color:var(--ink-2); background:rgba(7,12,24,.75); pointer-events:none; z-index:45}
.wm-legend span{display:inline-flex; align-items:center; gap:5px}
.wm-legend i{width:8px; height:8px; border-radius:50%; display:inline-block}
.wm-legend .lg-live{background:#34D399} .wm-legend .lg-views{background:#06b6d4}
.wm-legend .lg-unplaced{color:var(--warn)}
.wm-legend .lg-unplaced[hidden]{display:none}

/* ============================================================
   LIQUID GLASS
   Every surface on the site is a pane, not a fill. Three materials only:
     raised   — lighter pane, light caught on the top lip, shadow underneath
     recessed — darker pane, light caught on the far lip (inputs, tracks, wells)
     overlay  — chips and tags floating on artwork or the map
   Paint only. Nothing below touches a box, a grid, a gap or a breakpoint.
   ============================================================ */
:root{
  --glass-ov:rgba(10,20,42,.42);          /* overlay chips on art */
  --glass-ov-edge:rgba(255,255,255,.18);
  --glass-plate:rgba(248,251,255,.93);    /* the frosted plate brand logos sit on */
  --glass-hover:rgba(214,232,255,.115);
  --glass-hover-edge:rgba(107,163,255,.55);
}

/* ---- raised: panels, chrome, anything that floats above the field ---- */
.site-head,.site-foot,.activity,.flow li,.privacy > div,.lp-m,.lp-svc,.live,.lp-agents,
.contact-band,.stack a,.facts > div,.pager a,.pager span,
.st-gate,.st-top,.st-chart,.st-tablewrap,.st-visits,.st-locrow,.wm,.project .logo{
  background:var(--glass-tint), var(--surface);
  -webkit-backdrop-filter:var(--glass-fx); backdrop-filter:var(--glass-fx);
  box-shadow:var(--glass-sheen), var(--glass-lift)}

/* the header floats over scrolling content, so it leans darker and blurs harder */
.site-head{background:linear-gradient(180deg,rgba(226,240,255,.10),rgba(226,240,255,.045)), rgba(10,18,36,.58);
  -webkit-backdrop-filter:blur(28px) saturate(185%); backdrop-filter:blur(28px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 28px -16px rgba(3,9,22,.9)}
.site-foot{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.contact-band{background:linear-gradient(120deg,rgba(37,99,235,.30),rgba(34,179,240,.10) 62%), var(--glass-tint), var(--surface)}
.project .logo{background:radial-gradient(60% 80% at 50% 40%, rgba(37,99,235,.26), transparent 70%), var(--glass-tint), var(--surface)}
.wm{background:radial-gradient(120% 130% at 50% -10%, rgba(34,179,240,.14), transparent 55%), var(--glass-tint), var(--surface)}

/* ---- raised: controls ---- */
.btn,.head-btn,.iconbtn,.status-pill,.st-live,.chip,.kicker,.tags a,.tech span,.pill,
.project .tags span,.a-st,.ev-k,.st-gate .btn{
  -webkit-backdrop-filter:var(--glass-fx-sm); backdrop-filter:var(--glass-fx-sm)}
.btn,.head-btn,.iconbtn,.status-pill,.st-live,.pager a,.pager span{
  background:var(--glass-tint), var(--surface-2);
  box-shadow:var(--glass-sheen), 0 6px 18px -10px rgba(3,9,22,.7)}
.btn.primary,.head-btn,.playframe .btn,.contact-band .btn{
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 48%,rgba(0,0,0,.10)), var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.22), var(--glow-blue), 0 8px 20px -10px rgba(3,9,22,.8)}
.brand .mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -6px rgba(37,99,235,.75)}
.chip,.kicker,.tags a,.tech span,.pill,.project .tags span{box-shadow:var(--glass-sheen)}
.meter i,.lp-m .meter i,.st-row .b i{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(34,179,240,.45)}

/* ---- recessed: inputs, wells, tracks, table heads ---- */
.searchbox,.searchpage input,.st-gate input,.st-range,.sec-head a,.st-link,
.meter,.st-row .b,.prose thead th,.st-table th,.console-foot,.toc{
  background:var(--glass-in);
  -webkit-backdrop-filter:var(--glass-fx-sm); backdrop-filter:var(--glass-fx-sm);
  box-shadow:var(--glass-in-shadow)}
.console-bar,.term-bar{background:linear-gradient(180deg,rgba(226,240,255,.10),rgba(226,240,255,.03));
  -webkit-backdrop-filter:var(--glass-fx-sm); backdrop-filter:var(--glass-fx-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}

/* ---- dark glass: terminals, code, embeds. Readability wins over translucency here. ---- */
.console,.term,.prose pre,.prose figure svg,.playframe{
  background:var(--term-bg);
  -webkit-backdrop-filter:var(--glass-fx); backdrop-filter:var(--glass-fx)}
.console,.term,.playframe{box-shadow:var(--glass-sheen), 0 22px 50px -20px rgba(3,9,22,.85)}
.prose pre,.prose figure svg{box-shadow:var(--glass-sheen), 0 8px 22px -14px rgba(3,9,22,.7)}
.playframe{background:rgba(4,9,20,.72)}

/* ---- thumbnails: the frame is glass, the artwork underneath is not ---- */
.thumb{box-shadow:var(--glass-sheen), 0 8px 22px -14px rgba(3,9,22,.7)}
.thumb .play span,.thumb .dur,.st-tip,.wm-tag,.wm-legend{
  background:var(--glass-ov); border-color:var(--glass-ov-edge);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 4px 14px -6px rgba(3,9,22,.7)}
.thumb .play span{border:1px solid var(--glass-ov-edge)}
.thumb .plate,.stack .lg,.project .logo img{background:var(--glass-plate)}

/* ---- the map keeps legible continents: --line-2 alone is too faint through glass ---- */
.wm-land{fill:rgba(168,200,245,.30); stroke:rgba(168,200,245,.42)}
.wm-grid line{stroke:rgba(190,216,255,.28)}
.st-hit:hover{fill:rgba(214,232,255,.09)}
.prose tbody tr:hover td{background:rgba(190,216,255,.07)}

/* ---- hover: the pane brightens and lifts toward the light ---- */
.card:hover,.feature:hover,.result:hover,.topic:hover,.skill:hover,.project:hover,
.adjacent a:hover,.stack a:hover,.lp-agents:hover,.st-locrow:hover{
  background:var(--glass-tint), var(--glass-hover);
  border-color:var(--glass-hover-edge);
  box-shadow:var(--glass-sheen), 0 18px 44px -16px rgba(3,9,22,.85), 0 0 22px -6px rgba(37,99,235,.35)}
.btn:hover,.iconbtn:hover,.pager a:hover{background:var(--glass-tint), var(--surface-3)}
.btn.primary:hover,.head-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 48%,rgba(0,0,0,.10)), var(--blue-hi)}
.searchbox:focus-within,.searchpage input:focus,.st-gate input:focus{
  border-color:var(--accent); box-shadow:var(--glass-in-shadow), 0 0 0 3px rgba(34,179,240,.28)}

/* ---- fallbacks: no backdrop-filter, or transparency turned down for legibility ---- */
@media (prefers-reduced-transparency:reduce){
  :root{
    --surface:#1B2842; --surface-2:#26365A; --surface-3:#374B75;
    --glass-fx:none; --glass-fx-sm:none;
    --glass-tint:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
    --glass-in:#0E1729; --glass-ov:#0E1729; --glass-hover:#26365A;
    --glass-plate:#F8FAFC; --term-bg:#0A1222;
    --line:rgba(190,216,255,.26); --line-2:rgba(190,216,255,.40)}
  body{background:var(--bg)}
  body::before,body::after{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{
    --surface:#1B2842; --surface-2:#26365A; --surface-3:#374B75;
    --glass-tint:linear-gradient(147deg,rgba(232,244,255,.07),rgba(0,0,0,0) 60%);
    --glass-in:#0E1729; --glass-ov:rgba(10,18,36,.92); --glass-hover:#26365A;
    --glass-plate:#F8FAFC; --term-bg:#0A1222}
}