:root{
  --bg:#070b16; --bg2:#0b1222; --bg3:#0c1526;
  --panel:rgba(20,28,48,.62); --panel2:rgba(28,38,64,.55); --panel3:rgba(14,20,36,.85);
  --line:rgba(120,150,210,.16); --line2:rgba(120,150,210,.30); --line3:rgba(120,150,210,.45);
  --text:#e7ecf7; --muted:#9aa7c4; --dim:#6c7896;
  --accent:#46e3ff; --accent2:#9b8cff; --accent3:#ffcf5c; --accent4:#54d6a0;
  /* tiers */
  --s:#ff5d73; --a:#c08bff; --b:#5ea1ff; --c:#54d6a0; --d:#8794ad;
  /* rarities */
  --r-common:#9fb0c9; --r-rare:#5ea1ff; --r-epic:#c08bff; --r-legendary:#ffcf5c; --r-mythical:#ff5d73;
  /* elements */
  --e-fire:#FD8F1A; --e-ice:#26D2FF; --e-electric:#F34EFF; --e-toxic:#96D94B; --e-radiant:#FFFF00; --e-void:#FF0000;
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --font:'Segoe UI',Roboto,Helvetica,Arial,system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,'Roboto Mono',monospace;
  --shadow:0 14px 40px -18px rgba(70,227,255,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* themed scrollbars (dark, consistent everywhere — scrollboxes, doc TOC, code blocks, page) */
*{scrollbar-width:thin;scrollbar-color:var(--line3) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(10,16,30,.5);border-radius:10px}
::-webkit-scrollbar-thumb{background:var(--line3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--accent2),var(--accent))}
::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0;font-family:var(--font);color:var(--text);line-height:1.6;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(70,227,255,.10), transparent 60%),
    radial-gradient(1000px 600px at 0% 10%, rgba(155,140,255,.12), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #cfe5ff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1px 1px at 85% 20%, #e7d9ff, transparent),
    radial-gradient(1px 1px at 55% 15%, #fff, transparent),
    radial-gradient(1px 1px at 10% 65%, #bfe0ff, transparent),
    radial-gradient(1px 1px at 90% 75%, #fff, transparent);
  background-size:600px 600px;animation:drift 120s linear infinite;
}
@keyframes drift{from{background-position:0 0}to{background-position:600px 1200px}}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px}
.wrap.wide{max-width:1320px}

/* ---- header / nav ---- */
header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(7,11,22,.92),rgba(7,11,22,.66));
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.5px;text-decoration:none;color:var(--text)}
.brand .logo{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101e;font-weight:800;box-shadow:0 0 22px rgba(70,227,255,.45)}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:2px}
.nav nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 13px;border-radius:8px;transition:.18s}
.nav nav a:hover{color:var(--text);background:var(--panel)}
.nav nav a.active{color:#fff;background:var(--panel)}
.modeswitch{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;margin-left:8px}
.modeswitch a{padding:7px 12px;font-size:12.5px;color:var(--muted);text-decoration:none}
.modeswitch a.on{background:linear-gradient(135deg,rgba(70,227,255,.22),rgba(155,140,255,.22));color:#fff}

/* ---- hero ---- */
.hero{padding:60px 0 30px;text-align:center}
.kicker{font-size:12.5px;letter-spacing:4px;color:var(--accent);text-transform:uppercase;font-weight:600}
.hero h1{font-size:clamp(34px,6vw,60px);margin:14px 0 8px;line-height:1.04;font-weight:800;
  background:linear-gradient(120deg,#fff 10%,var(--accent) 55%,var(--accent2) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{max-width:700px;margin:0 auto;color:var(--muted);font-size:16.5px}
.metrics{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:30px 0 6px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 22px;min-width:120px;text-align:center}
.metric .n{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--text)}
.metric .l{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-top:3px}

/* ---- sections ---- */
section{padding:44px 0;scroll-margin-top:72px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.sec-head h2{font-size:27px;margin:0;font-weight:700}
.sec-head .tag{font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid var(--line2);padding:3px 9px;border-radius:20px}
.sec-sub{color:var(--muted);max-width:820px;margin:0 0 22px;font-size:15px}

/* ---- controls ---- */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 14px}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14.5px;font-family:var(--font)}
.search input::placeholder{color:var(--dim)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{cursor:pointer;user-select:none;font-size:13px;padding:8px 14px;border-radius:20px;border:1px solid var(--line2);
  background:transparent;color:var(--muted);transition:.16s}
.chip:hover{color:var(--text);border-color:var(--accent)}
.chip.active{background:linear-gradient(135deg,rgba(70,227,255,.20),rgba(155,140,255,.20));color:#fff;border-color:var(--accent)}

/* ---- ship grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:transform .18s, border-color .18s, box-shadow .18s;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tierc,var(--accent))}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.card .row1{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card .shipicon{width:58px;height:58px;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(70,227,255,.35));background:radial-gradient(circle at 50% 40%, rgba(70,227,255,.12), transparent 70%);border-radius:10px}
.card .titlewrap{flex:1;min-width:0}
.card .num{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:7px;padding:2px 6px}
.card h3{font-size:18px;margin:4px 0 0;font-weight:700}
.tierbadge{font-family:var(--mono);font-weight:800;font-size:13px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#06101e;flex-shrink:0}
.card .arch{color:var(--accent);font-size:13px;font-weight:600;margin-bottom:8px}
.card .sig{color:var(--muted);font-size:13.5px;min-height:38px}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{font-size:11.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.pill b{color:var(--text);font-weight:600}
.pill.sys{color:var(--accent2)}
.detail{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease, opacity .3s, margin .3s;margin-top:0}
.card.open .detail{max-height:1400px;opacity:1;margin-top:15px;border-top:1px dashed var(--line2);padding-top:14px}
.detail h4{margin:12px 0 6px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent3)}
.detail h4:first-child{margin-top:0}
.detail p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.detail .ld{display:grid;gap:7px;margin-bottom:12px}
.detail .ld div{font-size:13px}
.detail .ld span{color:var(--dim);display:inline-block;min-width:64px}
.detail a.doc{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--accent);text-decoration:none;
  border:1px solid var(--line2);border-radius:9px;padding:8px 13px;transition:.16s}
.detail a.doc:hover{background:var(--panel2);border-color:var(--accent)}
.hint{font-size:12px;color:var(--dim);text-align:center;margin-top:14px}

/* ---- skin / icon gallery ---- */
.skinrow{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.thumb{width:54px;height:54px;border-radius:9px;border:1px solid var(--line);background:var(--panel3);
  display:grid;place-items:center;position:relative;overflow:hidden;transition:.15s}
.thumb img{width:46px;height:46px;object-fit:contain}
.thumb:hover{border-color:var(--accent);transform:translateY(-2px)}
.thumb .lbl{position:absolute;bottom:0;left:0;right:0;font-size:9px;text-align:center;color:var(--dim);background:rgba(7,11,22,.7);padding:1px 0}
.thumb.gold{border-color:rgba(255,207,92,.5);box-shadow:0 0 12px rgba(255,207,92,.2)}

/* ---- equipment / generic panels ---- */
.eqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.panel h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:9px}
.panel .lead{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.panel .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;color:#06101e;font-weight:800}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--dim);font-weight:600;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase}
td b{color:var(--text)}
.iconcell{display:flex;align-items:center;gap:10px}
.iconchip{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--panel3);display:grid;place-items:center;flex-shrink:0}
.iconchip img{width:34px;height:34px;object-fit:contain}
.iconchip.dark{background:linear-gradient(135deg,#141c30,#0c1424)}

/* rarity / element tags */
.tag-c{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;background:rgba(84,214,160,.14);color:#7fe7c0;border:1px solid rgba(84,214,160,.3)}
.tag-i{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;background:rgba(255,207,92,.13);color:var(--accent3);border:1px solid rgba(255,207,92,.3)}
.rar{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rar.common{background:rgba(159,176,201,.15);color:var(--r-common);border:1px solid rgba(159,176,201,.4)}
.rar.rare{background:rgba(94,161,255,.15);color:var(--r-rare);border:1px solid rgba(94,161,255,.4)}
.rar.epic{background:rgba(192,139,255,.15);color:var(--r-epic);border:1px solid rgba(192,139,255,.4)}
.rar.legendary{background:rgba(255,207,92,.15);color:var(--r-legendary);border:1px solid rgba(255,207,92,.4)}
.rar.mythical{background:rgba(255,93,115,.15);color:var(--r-mythical);border:1px solid rgba(255,93,115,.4)}

.wingtable-wrap,.scrollbox{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:11px}
.wingtable-wrap table,.scrollbox table{font-size:12.5px}
.wingtable-wrap th,.scrollbox th{position:sticky;top:0;background:#0c1424;z-index:1}
details.more{margin-top:10px}
details.more summary{cursor:pointer;color:var(--accent);font-size:13px;list-style:none}
details.more summary::-webkit-details-marker{display:none}

/* set bonuses */
.setbonus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px;margin-top:8px}
.sb{background:linear-gradient(135deg,rgba(155,140,255,.12),rgba(70,227,255,.08));border:1px solid var(--line2);border-radius:12px;padding:15px}
.sb .pair{font-weight:700;font-size:14.5px;margin-bottom:5px}
.sb .eff{font-size:13px;color:var(--muted)}
.sb .code{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:7px}

/* per-item effect lists */
.fxlist{list-style:none;margin:4px 0 12px;padding:0;display:grid;gap:6px}
.fxlist li{font-size:12.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;line-height:1.5}
.fxlist li b{color:var(--accent3);font-weight:600}
.fxlist li .pvp{font-size:10px;color:#ffc9d1;border:1px solid rgba(255,93,115,.3);border-radius:10px;padding:0 6px;margin-left:5px}
.gcard .fx{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.45;max-height:60px;overflow:hidden}
.skinwrap{margin:0}

/* costume gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;transition:.16s}
.gcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.gcard img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.gcard .nm{font-size:12px;font-weight:600;margin-top:7px}
.gcard .sub{font-size:10.5px;color:var(--dim);margin-top:2px}
.gcard .gp{display:inline-block;font-size:9px;margin-top:5px;padding:1px 6px;border-radius:10px;background:rgba(84,214,160,.14);color:#7fe7c0;border:1px solid rgba(84,214,160,.3)}

/* guides */
.guidegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.guide{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:inherit;display:block;transition:.16s}
.guide:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.guide .gi{font-size:24px;margin-bottom:8px}
.guide h3{margin:0 0 6px;font-size:17px}
.guide p{margin:0;color:var(--muted);font-size:13.5px}

/* tier list */
.tierlist{display:grid;gap:10px;margin-bottom:26px}
.tierrow{display:flex;align-items:stretch;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tierlabel{width:62px;flex-shrink:0;display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:24px;color:#06101e}
.tierships{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px}
.tchip{display:flex;align-items:center;gap:7px;font-size:13px;padding:5px 10px 5px 5px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--text);cursor:pointer;transition:.15s}
.tchip:hover{border-color:var(--accent);color:#fff}
.tchip img{width:28px;height:28px;object-fit:contain}
.tchip span{color:var(--dim);font-family:var(--mono);font-size:11px}

/* charts */
.chart{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.bar{display:grid;grid-template-columns:148px 1fr 54px;align-items:center;gap:12px;margin-bottom:8px;font-size:13px}
.bar .track{height:14px;background:var(--panel2);border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.bar .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.bar .v{font-family:var(--mono);color:var(--accent);text-align:right}
.bar .lbl{color:var(--muted)}

/* levers / info cards */
.levers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:24px}
.lever{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px}
.lever h4{margin:0 0 6px;font-size:15px;color:var(--accent)}
.lever p{margin:0;font-size:13.5px;color:var(--muted)}

/* callouts */
.note{background:rgba(255,207,92,.07);border:1px solid rgba(255,207,92,.25);border-radius:11px;padding:13px 16px;color:#e9d9ad;font-size:13px;margin:18px 0}
.note.info{background:rgba(70,227,255,.07);border-color:rgba(70,227,255,.25);color:#bfeeff}
.note.dev{background:rgba(155,140,255,.08);border-color:rgba(155,140,255,.28);color:#d8d0ff}
.note.warn{background:rgba(255,93,115,.08);border-color:rgba(255,93,115,.3);color:#ffc9d1}
a.inline{color:var(--accent);text-decoration:none}a.inline:hover{text-decoration:underline}
code,.mono{font-family:var(--mono)}
.codeword{font-family:var(--mono);font-size:.9em;color:var(--muted);background:var(--panel);padding:2px 6px;border-radius:5px}

footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 50px;color:var(--dim);font-size:13px}
footer code{font-family:var(--mono);color:var(--muted);background:var(--panel);padding:2px 6px;border-radius:5px}

/* ============================================================================
   doc.html — rendered markdown viewer
   ============================================================================ */
.docwrap{display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:start;max-width:1180px;margin:24px auto;padding:0 22px;position:relative;z-index:1}
.docnav{position:sticky;top:80px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;max-height:calc(100vh - 110px);overflow:auto}
.docnav h4{margin:0 0 10px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent3)}
.docnav a{display:block;color:var(--muted);text-decoration:none;font-size:13px;padding:4px 8px;border-radius:6px;margin-bottom:1px}
.docnav a:hover{color:var(--text);background:var(--panel2)}
.docnav a.h3{padding-left:18px;font-size:12px}
.docnav a.active{color:#fff;background:linear-gradient(135deg,rgba(70,227,255,.18),rgba(155,140,255,.18))}
.markdown{background:var(--panel3);border:1px solid var(--line);border-radius:var(--radius);padding:34px 40px;min-width:0}
.markdown h1{font-size:32px;margin:0 0 6px;font-weight:800;
  background:linear-gradient(120deg,#fff,var(--accent) 70%,var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.markdown h2{font-size:23px;margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.markdown h3{font-size:18px;margin:26px 0 10px;color:var(--accent)}
.markdown h4{font-size:14px;margin:20px 0 8px;color:var(--accent3);text-transform:uppercase;letter-spacing:.5px}
.markdown p,.markdown li{font-size:14.5px;color:#cdd6ea}
.markdown a{color:var(--accent);text-decoration:none}.markdown a:hover{text-decoration:underline}
.markdown strong{color:#fff}
.markdown blockquote{margin:16px 0;padding:12px 18px;border-left:3px solid var(--accent2);background:rgba(155,140,255,.07);border-radius:0 10px 10px 0;color:var(--muted)}
.markdown code{font-family:var(--mono);font-size:.88em;background:rgba(70,227,255,.1);color:#bfeeff;padding:2px 6px;border-radius:5px}
.markdown pre{background:#070d1a;border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow:auto}
.markdown pre code{background:none;color:#cdd6ea;padding:0;font-size:13px;line-height:1.55}
.markdown table{margin:16px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.markdown th{background:#0c1424;color:var(--accent3)}
.markdown tr:hover td{background:rgba(70,227,255,.04)}
.markdown img{max-width:100%;border-radius:8px}
.markdown img.icon{width:48px;height:48px;display:inline-block;vertical-align:middle;margin:0 4px;object-fit:contain}
.markdown hr{border:none;border-top:1px solid var(--line2);margin:28px 0}
.docback{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:14px}
.docback:hover{color:var(--accent)}

@media(max-width:860px){.docwrap{grid-template-columns:1fr}.docnav{display:none}.markdown{padding:24px 20px}}
@media(max-width:560px){.nav nav{gap:2px}.nav nav a{padding:7px 8px;font-size:12.5px}.metric{min-width:104px;padding:12px 14px}}