:root{--bg:#0C161C;--panel:#12222B;--line:#1E3540;--text:#E6EFF2;--muted:#7C97A2;
--amber:#F5B841;--cyan:#57C7B8;--ring-track:#1B303B}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;min-height:100vh;
display:flex;flex-direction:column}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
nav{border-bottom:1px solid var(--line);background:rgba(12,22,28,.92);position:sticky;top:0;
z-index:100;backdrop-filter:blur(8px)}
.nav-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
justify-content:space-between;height:58px}
.brand{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.22em;
text-transform:uppercase;color:var(--amber);font-weight:600}
.brand:hover{text-decoration:none}
.menu{display:flex;list-style:none;gap:4px;align-items:center}
.menu>li{position:relative}
.menu>li>a{display:block;padding:10px 14px;color:var(--text);font-size:14px;font-weight:500;
border-radius:8px}
.menu>li>a:hover{background:var(--panel);text-decoration:none}
.menu>li>a.active{color:var(--amber)}
.caret{font-size:9px;color:var(--muted);margin-left:4px;display:inline-block;transition:transform .2s}
.menu>li:hover .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;min-width:200px;max-height:70vh;overflow:auto;
background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;list-style:none;
opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s;
box-shadow:0 12px 30px rgba(0,0,0,.45)}
.menu>li:hover .dropdown,.menu>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(2px)}
.dropdown a{display:flex;justify-content:space-between;gap:14px;padding:8px 12px;border-radius:7px;
color:var(--text);font-size:13.5px}
.dropdown a:hover{background:var(--line);text-decoration:none}
.dropdown a small{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted)}
#nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;color:var(--text);font-size:22px;padding:8px;user-select:none}
@media(max-width:860px){.hamburger{display:block}
.menu{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;
align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);
padding:8px 16px 16px}
#nav-toggle:checked~.menu{display:flex}
.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
border-left:2px solid var(--line);border-radius:0;margin-left:12px;max-height:none}}
.page-head{padding:48px 0 30px;border-bottom:1px solid var(--line)}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.28em;
text-transform:uppercase;color:var(--amber);margin-bottom:10px}
h1{font-weight:700;font-size:clamp(28px,5vw,42px);letter-spacing:-.01em}
h1 span{font-weight:300;color:var(--muted)}
.lede{color:var(--muted);font-size:16.5px;margin-top:12px;max-width:640px;line-height:1.6}
main{flex:1;padding-bottom:64px}
section{padding:36px 0 8px}
h2{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);margin-bottom:18px}
p{line-height:1.7;margin-bottom:14px;max-width:720px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
position:relative;overflow:hidden;display:block;color:var(--text)}
.card:hover{text-decoration:none;border-color:var(--muted)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 50% -20%,rgba(245,184,65,.05),transparent 60%)}
.card h3{font-size:16px;font-weight:600;margin-bottom:6px}
.card .lvl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
letter-spacing:.08em;display:block;margin-bottom:12px}
.bar{height:7px;background:var(--ring-track);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px}
.bar i.cyan{background:linear-gradient(90deg,#2A6B62,var(--cyan))}
.bar i.amber{background:linear-gradient(90deg,#8a6a1f,var(--amber))}
.pct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text);margin-top:8px;display:block}
/* detail page */
.hero{display:flex;gap:36px;align-items:center;flex-wrap:wrap;padding:44px 0 12px}
.gauge{width:170px;height:170px;flex:none}
.gauge .track{stroke:var(--ring-track);stroke-width:9;fill:none}
.gauge .arc{stroke-width:9;fill:none;stroke-linecap:round}
.gauge .arc.cyan{stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(87,199,184,.5))}
.gauge .arc.amber{stroke:var(--amber);filter:drop-shadow(0 0 6px rgba(245,184,65,.5))}
.gauge .tick{stroke:var(--line);stroke-width:2}
.gauge .num{font-family:'IBM Plex Mono',monospace;font-size:36px;font-weight:600;
fill:var(--text);text-anchor:middle;dominant-baseline:middle}
.gauge .cap{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--muted);
text-anchor:middle;letter-spacing:.1em}
.layers{list-style:none}
.layers li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);
align-items:baseline}
.layers .lnum{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--amber);
letter-spacing:.08em;flex:0 0 140px}
.layers .ldesc{color:var(--muted);font-size:14.5px}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted)}
.pn{display:flex;justify-content:space-between;margin-top:40px;gap:12px;flex-wrap:wrap}
.pn a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
border:1px solid var(--line);border-radius:10px;padding:10px 16px;color:var(--text)}
.pn a:hover{border-color:var(--muted);text-decoration:none}
footer{border-top:1px solid var(--line);padding:20px 0;text-align:center;
font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){
.gauge .arc{transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1)}
.bar i{transition:width 1s cubic-bezier(.22,1,.36,1)}}