
:root{--bg:#070b12;--panel:#0d1522;--panel2:#111c2c;--line:#1e2d44;--text:#cfdaea;
--dim:#7f90a8;--accent:#5ac8f5;--accent2:#7ef0a8;--warn:#ff8f6b;--title:#e6f7ff;
--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--sans:"IBM Plex Sans",system-ui,sans-serif;
--pix:"Silkscreen",var(--mono)}
:root[data-theme="light"]{--bg:#eef2f7;--panel:#fff;--panel2:#f4f7fb;--line:#d3dce8;
--text:#1a2433;--dim:#56657a;--accent:#0b6fa4;--accent2:#12824a;--title:#0a1422}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans)}
a{color:var(--accent)}
code,kbd{font-family:var(--mono);font-size:.9em}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;
border-radius:4px;padding:1px 6px;white-space:nowrap}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;
padding:10px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font:20px var(--pix);color:var(--title);text-decoration:none;letter-spacing:2px}
.top nav{display:flex;gap:18px;margin-left:auto}
.top nav a{color:var(--dim);text-decoration:none;font-family:var(--mono);font-size:14px}
.top nav a:hover{color:var(--accent)}
.hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;
border-bottom:1px solid var(--line)}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%;
image-rendering:pixelated;filter:saturate(1.1) brightness(.6)}
.hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,var(--bg) 4%,transparent 60%),
linear-gradient(to right,rgba(7,11,18,.85) 0,rgba(7,11,18,.35) 55%,transparent 80%)}
.herotext{position:relative;z-index:1;max-width:760px;padding:0 24px 56px 6vw}
.logo{font:clamp(44px,9vw,104px)/1 var(--pix);margin:0 0 16px;color:var(--title);
letter-spacing:4px;text-shadow:0 0 24px rgba(90,200,245,.55)}
.tag{font-size:clamp(17px,2.2vw,21px);color:#dbe7f5;margin:0 0 26px}
:root[data-theme="light"] .tag{color:#e8f0fa}
.cta,.dl{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:flex;flex-direction:column;padding:12px 20px;border:1px solid var(--line);
border-radius:8px;background:var(--panel);color:var(--text);text-decoration:none;min-width:190px}
.btn b{font-family:var(--mono)}
.btn span{font-size:13px;color:var(--dim)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04121c}
.btn.primary span{color:#0b3550}
.btn:hover{filter:brightness(1.12)}
.land{max-width:1120px;margin:0 auto;padding:24px 20px 60px}
.land h2,.doc h2{font:22px var(--pix);color:var(--title);letter-spacing:1px;margin:52px 0 18px}
.feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.feat,.how>div,.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.feat h3,.how h3,.card h3{margin:0 0 6px;font:600 16px var(--mono);color:var(--accent2)}
.feat p,.how p,.card p{margin:0;color:var(--dim)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.gallery figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gallery img{display:block;width:100%;height:auto;image-rendering:pixelated}
.gallery figcaption{padding:10px 14px;font-size:14px;color:var(--dim)}
.small{color:var(--dim);font-size:14px;margin-top:16px}
.more a{font-family:var(--mono)}
.wiki{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1280px;margin:0 auto}
.side{position:sticky;top:52px;align-self:start;height:calc(100vh - 52px);overflow:auto;
padding:22px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.side a{color:var(--dim);text-decoration:none;padding:6px 10px;border-radius:6px;font-size:15px}
.side a:hover{background:var(--panel)}
.side a[aria-current]{background:var(--panel2);color:var(--title);border-left:3px solid var(--accent)}
.side input{margin-bottom:12px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);
background:var(--panel);color:var(--text);font:14px var(--mono)}
.doc{padding:28px 32px 60px;min-width:0}
.doc h1{font:30px var(--pix);color:var(--title);margin:0 0 12px;letter-spacing:1px}
.lead{font-size:18px;color:var(--dim);max-width:820px}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:14px 0 8px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{position:sticky;top:0;background:var(--panel2);text-align:left;font:600 13px var(--mono);
color:var(--dim);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--panel)}
td:first-child{width:1%}
td b,td a{white-space:nowrap}
.spr{width:48px;height:48px;image-rendering:pixelated;display:block}
.spr.big{width:120px;height:120px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{padding:4px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;
font:13px var(--mono);color:var(--text);background:var(--panel)}
.badge{font:11px var(--mono);color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:0 4px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:22px}
.card{text-decoration:none;color:var(--text)}
.card:hover{border-color:var(--accent)}
.boss{display:grid;grid-template-columns:140px 1fr;gap:18px;background:var(--panel);
border:1px solid var(--line);border-radius:10px;padding:16px;margin:14px 0}
.bimg{display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:8px}
.boss h3{margin:0;font:600 18px var(--mono);color:var(--title)}
.boss .deck{font:13px var(--pix);color:var(--warn);margin-right:8px}
.boss p{margin:6px 0}
.meta{color:var(--dim);font:13px var(--mono)}
.how{margin-top:4px}
p.how{color:var(--accent2)}
.steps li{margin:6px 0}
.foot{border-top:1px solid var(--line);padding:22px;text-align:center;color:var(--dim);font-size:13px}
.hidden{display:none!important}
@media (max-width:820px){.wiki{grid-template-columns:1fr}
.side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
flex-direction:row;flex-wrap:wrap}.side input{width:100%}.doc{padding:20px 16px}
.boss{grid-template-columns:1fr}.top{gap:12px;padding:10px 16px}.herotext{padding:0 16px 40px}}
