:root{
  --bg:#0c0f17; --bg2:#11151f; --panel:#161b27; --panel2:#1b2230;
  --ink:#eef1f7; --muted:#9aa6bd; --line:#283246;
  --ember:#ff7a3a; --ember2:#ffb23e; --storm:#6bb8ff; --storm2:#9ad0ff;
  --good:#46e08a; --bad:#ff5d6c; --gold:#ffce5a;
  --soldier:#ff6b6b; --constructor:#ffc14d; --ninja:#6bd0ff;
  --radius:16px; --maxw:1080px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 520px at 78% -8%, rgba(255,122,58,.20), transparent 60%),
    radial-gradient(900px 460px at 10% 8%, rgba(107,184,255,.14), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--storm2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.pixel{font-family:"Trebuchet MS","Segoe UI",sans-serif;letter-spacing:.5px}

/* header */
header.bar{position:sticky;top:0;z-index:20;background:rgba(12,15,23,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800}
.brand img{width:34px;height:34px;border-radius:8px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;letter-spacing:.4px}
.bar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bar nav a{color:var(--muted);font-size:14px;padding:7px 11px;border-radius:9px}
.bar nav a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);padding:11px 16px;border-radius:11px;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);text-decoration:none;border-color:#3a475f}
.btn.ember{background:linear-gradient(180deg,var(--ember2),var(--ember));color:#211204;border:none;box-shadow:0 8px 22px rgba(255,122,58,.35)}
.btn.ghost{background:transparent}

/* hero */
.hero{padding:70px 0 34px;text-align:center}
.kicker{display:inline-flex;gap:8px;align-items:center;color:var(--ember2);font-weight:700;letter-spacing:1.6px;font-size:12.5px;text-transform:uppercase;border:1px solid var(--line);background:var(--panel);padding:6px 13px;border-radius:999px}
.hero h1{font-size:clamp(38px,7vw,76px);margin:18px 0 6px;line-height:1.02;font-weight:900;
  background:linear-gradient(180deg,#fff,#ffd9b8 60%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(17px,2.4vw,21px);color:var(--muted);max-width:720px;margin:0 auto}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.loopline{margin-top:24px;color:var(--muted);font-size:14px}
.loopline b{color:var(--ink)}
.tag{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:3px 9px;margin:0 3px;font-size:13px}

/* sections */
section{padding:46px 0}
section h2{font-size:clamp(26px,4vw,36px);margin:0 0 6px;font-weight:800}
section .lead{color:var(--muted);max-width:760px;margin:0 0 26px}
.eyebrow{color:var(--ember2);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin-bottom:6px}

.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g4,.g2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g3,.g4,.g2{grid-template-columns:1fr}.bar nav{display:none}}

.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card .ico{font-size:26px;line-height:1;margin-bottom:10px}
.step .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ember);color:#231204;font-weight:900;margin-bottom:10px}

/* table */
.tablecard{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--panel)}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
th{background:var(--panel2);color:var(--ember2);font-size:12.5px;letter-spacing:.6px;text-transform:uppercase}
td.web{color:var(--muted)}
tr:last-child td{border-bottom:none}

/* enemies */
.foe{display:flex;gap:14px;align-items:center}
.dot{width:42px;height:42px;border-radius:50%;flex:0 0 auto;border:3px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:18px}
.foe b{display:block}
.foe small{color:var(--muted)}

/* branches */
.branch{border-top:4px solid var(--c)}
.branch h3{display:flex;align-items:center;gap:8px}
.node{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.node:last-child{border-bottom:none}
.node small{color:var(--muted)}

/* mods */
.mod{display:flex;gap:12px;align-items:flex-start}
.mod .pic{width:38px;height:38px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.mod b{font-size:14.5px}
.mod small{display:block;color:var(--muted);font-size:13px}
.mod .req{color:var(--ember2);font-size:12px;font-weight:700}

/* download */
.dl{background:linear-gradient(180deg,#1a2233,#12151f);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.dl .files{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.cmd{font-family:"SF Mono",Consolas,Menlo,monospace;background:#0a0d14;border:1px solid var(--line);color:#cfe3ff;padding:2px 8px;border-radius:7px;font-size:13.5px;white-space:nowrap}
ol.steps{margin:0;padding-left:20px}
ol.steps li{margin:9px 0}
.note{font-size:13px;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:30px 0 60px;color:var(--muted);font-size:14px;text-align:center}
.badge{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:4px;font-size:13px}
.hr{height:1px;background:var(--line);margin:8px 0 0}