:root {
  color-scheme: dark;
  --bg: #090a0e;
  --surface: #11131a;
  --surface-2: #171a22;
  --line: #292d38;
  --text: #f2f0eb;
  --muted: #9699a6;
  --lime: #c7ff4a;
  --orange: #ff9a4a;
  --red: #ff5e68;
  --blue: #74a9ff;
  --radius: 15px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% -10%, rgba(199,255,74,.12), transparent 32rem), radial-gradient(circle at 90% 24%, rgba(116,169,255,.09), transparent 34rem); }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.shell { position: relative; width: min(1440px, calc(100% - 40px)); margin: 0 auto; }
.topbar { min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(199,255,74,.5); border-radius: 50%; color: var(--lime); font-size: .72rem; font-weight: 850; box-shadow: 0 0 28px rgba(199,255,74,.1); }
.brand small, .brand strong { display: block; }.brand small { color: var(--muted); font-size: .62rem; letter-spacing: .18em; }.brand strong { margin-top: 2px; font-size: .92rem; letter-spacing: .04em; }
nav { display: flex; align-items: center; gap: 24px; } nav a { color: var(--muted); font-size: .8rem; text-decoration: none; } nav a:hover { color: var(--text); }.main-link { padding-left: 24px; border-left: 1px solid var(--line); }
.status { justify-self: end; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; }.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px currentColor; }.status.online i { background: var(--lime); }.status.offline i { background: var(--red); }
h1,h2,p { margin: 0; } h2 { font-size: 1.28rem; letter-spacing: -.025em; }.eyebrow { margin-bottom: 7px; color: var(--lime); font-size: .66rem; font-weight: 780; letter-spacing: .17em; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: end; padding: 58px 0 34px; }
h1 { max-width: 700px; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .9; letter-spacing: -.068em; font-weight: 760; } h1 em { color: var(--lime); font-style: normal; }
.hero-copy { max-width: 600px; margin-top: 28px; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.panel,.live-card,.metrics article { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(23,26,34,.94), rgba(14,16,22,.96)); box-shadow: 0 20px 70px rgba(0,0,0,.22); }
.live-card { min-height: 300px; padding: 24px; border-radius: 24px; background: linear-gradient(145deg, rgba(199,255,74,.08), rgba(16,18,24,.96) 45%); }.live-head { display: flex; justify-content: space-between; color: var(--muted); font-size: .67rem; font-weight: 750; letter-spacing: .14em; }.live-head b { color: var(--lime); }.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 50px 0 18px; }.versus strong { font-size: clamp(1.1rem,2vw,1.65rem); letter-spacing: -.03em; }.versus strong:last-child { text-align: right; }.versus i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lime); color: #111; font-style: normal; font-size: .63rem; font-weight: 900; }.live-meta { color: var(--muted); font-size: .76rem; text-align: center; }.unit-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }.unit-lines div:last-child { text-align: right; }.unit-lines span { display: block; margin: 4px 0; color: #c6c8cf; font-size: .72rem; }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }.metrics article { min-height: 128px; padding: 20px; border-radius: var(--radius); }.metrics span,.metrics small { display: block; color: var(--muted); font-size: .72rem; }.metrics strong { display: block; margin: 14px 0 8px; font-size: clamp(1.55rem,3vw,2.35rem); letter-spacing: -.05em; }.metrics article:first-child strong { color: var(--lime); }
.split-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-bottom: 18px; }.panel { border-radius: var(--radius); overflow: hidden; }.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }.section-head > span,.section-title > p { color: var(--muted); font-size: .72rem; }
.race-bars { display: grid; gap: 19px; padding: 25px; }.race-row { display: grid; grid-template-columns: 84px 1fr 62px; align-items: center; gap: 14px; }.race-name { font-size: .82rem; font-weight: 700; }.bar-track { position: relative; height: 10px; border-radius: 999px; background: #222630; overflow: hidden; }.bar-track i { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #59606f; }.bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; }.bar.positive { left: 50%; background: var(--lime); }.bar.negative { right: 50%; background: var(--red); }.race-value { text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 760; }.positive-text { color: var(--lime); }.negative-text { color: var(--red); }
.method-panel ul { display: grid; gap: 0; margin: 0; padding: 10px 24px 16px; list-style: none; }.method-panel li { display: grid; grid-template-columns: 145px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }.method-panel li:last-child { border-bottom: 0; }.method-panel b { font-size: .78rem; }.method-panel span { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.telemetry-panel { margin-bottom: 18px; }.telemetry-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }.telemetry-metrics article { min-height: 116px; padding: 20px 24px; border-right: 1px solid var(--line); }.telemetry-metrics article:last-child { border-right: 0; }.telemetry-metrics span,.telemetry-metrics small { display: block; color: var(--muted); font-size: .7rem; }.telemetry-metrics strong { display: block; margin: 12px 0 7px; font-size: 1.8rem; letter-spacing: -.04em; }.ability-stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px 22px; }.policy-stats { border-bottom: 1px solid var(--line); }.ability-chip { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #151820; font-size: .72rem; }.ability-chip b { color: var(--lime); margin-left: 6px; }
.target-table-head { display: flex; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .75rem; }.target-table-head span { color: var(--muted); }.target-table-wrap { overflow: auto; padding: 8px 18px 18px; }#target-table { min-width: 650px; }#target-table th:first-child,#target-table td:first-child { min-width: 120px; padding-left: 10px; background: #20232b; }#target-table td { height: 40px; }
.matrix-panel { margin-bottom: 42px; }.legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .68rem; }.legend span { width: 11px; height: 11px; margin-left: 8px; border-radius: 3px; }.legend .good { background: rgba(199,255,74,.65); }.legend .neutral { background: #2b303b; }.legend .bad { background: rgba(255,94,104,.65); }.matrix-wrap { overflow: auto; padding: 8px 12px 18px; } table { width: 100%; min-width: 1040px; border-collapse: separate; border-spacing: 5px; } th { padding: 9px 5px; color: var(--muted); font-size: .61rem; font-weight: 660; text-align: center; vertical-align: bottom; } th:first-child { min-width: 150px; text-align: left; } td { height: 48px; padding: 7px; border-radius: 7px; background: #20232b; font-size: .7rem; text-align: center; font-variant-numeric: tabular-nums; } td:first-child { padding-left: 10px; background: transparent; color: #d8d7d3; text-align: left; font-weight: 650; }.cell-good { background: rgba(124,173,43,var(--strength)); color: #edffd0; }.cell-bad { background: rgba(202,57,68,var(--strength)); color: #ffe0e2; }.cell-neutral { color: #717684; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin: 0 0 16px; }.army-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 42px; }.army-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }.army-heading span { color: var(--lime); font-size: .65rem; letter-spacing: .14em; }.army-heading.enemy span { color: var(--orange); }.army-heading b { color: var(--muted); font-size: .7rem; font-weight: 600; }.army-list { display: grid; grid-template-columns: 1fr 1fr; }.army-item { min-height: 112px; padding: 17px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.army-item:nth-child(2n) { border-right: 0; }.army-item h3 { margin: 0 0 10px; font-size: .87rem; }.army-item p { color: var(--muted); font-size: .7rem; line-height: 1.55; }.policy-tag { display: inline-block; margin-top: 10px; color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }.policy-tag.micro { color: var(--lime); }.race { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 5px; background: #252a34; color: var(--blue); font-size: .62rem; }.race.T { color: var(--orange); }.race.Z { color: #c881ff; }
.recent-panel { margin-bottom: 34px; }.recent-head,.pair-row { display: grid; grid-template-columns: minmax(240px,1.4fr) 190px 190px 80px; gap: 18px; align-items: center; }.recent-head { padding: 12px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }.pair-row { padding: 15px 24px; border-bottom: 1px solid var(--line); }.pair-row:last-child { border-bottom: 0; }.pair-title b { display: block; font-size: .82rem; }.pair-title small,.result-box small { display: block; margin-top: 4px; color: var(--muted); font-size: .66rem; }.result-box strong { font-size: .78rem; text-transform: uppercase; }.result-win { color: var(--lime); }.result-loss { color: var(--red); }.pair-delta { font-size: .85rem; font-weight: 800; text-align: right; }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }.empty { padding: 32px; color: var(--muted); text-align: center; }.toast { position: fixed; right: 24px; bottom: 24px; max-width: 350px; padding: 14px 18px; border: 1px solid rgba(255,94,104,.5); border-radius: 10px; background: #211317; color: #ffd6d9; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; }.toast.visible { opacity: 1; transform: none; }
@media (max-width: 1000px) { .topbar { grid-template-columns: 1fr auto; }.topbar nav { display: none; }.hero,.split-grid,.army-columns { grid-template-columns: 1fr; }.metrics { grid-template-columns: repeat(3,1fr); }.telemetry-metrics { grid-template-columns: repeat(2,1fr); }.telemetry-metrics article:nth-child(2) { border-right: 0; }.live-card { min-height: auto; }.army-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { .shell { width: min(100% - 24px,1440px); }.hero { padding-top: 38px; }.metrics { grid-template-columns: 1fr 1fr; }.metrics article:first-child { grid-column: span 2; }.recent-head { display: none; }.pair-row { grid-template-columns: 1fr 1fr 1fr; }.pair-title { grid-column: 1/-1; }.army-list { grid-template-columns: 1fr; }.army-item { border-right: 0; }.method-panel li { grid-template-columns: 1fr; gap: 6px; } footer { flex-direction: column; } }