:root{--bg:#0b0d12;--card:#141821;--fg:#e8ecf3;--mut:#9aa3b2;--ac:#7c5cff}
@media(prefers-color-scheme:light){:root{--bg:#f7f8fb;--card:#fff;--fg:#111;--mut:#555}}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--ac)}header,main,footer{max-width:1000px;margin:auto;padding:16px}nav a{margin-right:14px;text-decoration:none}
.logo{font-weight:800;font-size:20px;color:var(--fg)}.hero h1{font-size:44px;line-height:1.1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:16px;border:1px solid #ffffff14}.card h3{margin:0 0 6px}.badge{display:inline-block;padding:2px 8px;border-radius:6px;background:#f5a62333;color:#f5a623;font-size:13px}
.tier{display:flex;gap:12px;margin:14px 0}.tl{flex:0 0 56px;height:56px;border-radius:10px;display:grid;place-items:center;font:800 28px system-ui;color:#111}
.S{background:#ff7f7f}.A{background:#ffbf7f}.B{background:#ffdf7f}.C{background:#bfff7f}.tools{flex:1;display:grid;gap:10px}
.why{border-left:4px solid var(--ac);padding:10px 14px;background:var(--card)}small,.mut{color:var(--mut)}input,button{padding:10px;border-radius:8px;border:1px solid #444;font:inherit}button{background:var(--ac);color:#fff;border:0}