:root{--bg:#f2f5f0;--card:#fff;--ink:#0f1f3d;--mut:#5c6b80;--line:#dfe5dc;--pitch:#1f7a4d;--amber:#f2a900;--a:#2c5fd6;--n:#aab4c3;--pill:#fff4d6;--pillink:#7a5200;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0c1626;--card:#13223a;--ink:#edf2fa;--mut:#9fb0c8;--line:#243552;--pitch:#46c98a;--amber:#f5b82e;--a:#6f9bff;--n:#55657f;--pill:#3a2f10;--pillink:#f5d27a}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0c1626;--card:#13223a;--ink:#edf2fa;--mut:#9fb0c8;--line:#243552;--pitch:#46c98a;--amber:#f5b82e;--a:#6f9bff;--n:#55657f;--pill:#3a2f10;--pillink:#f5d27a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Barlow,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 16px 40px}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font:700 26px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amber);margin-left:3px}
.demo{font-size:13px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--card)}
h1{font:700 clamp(34px,8vw,56px)/1.02 "Barlow Condensed","Arial Narrow",Arial,sans-serif;margin:18px 0 10px;max-width:15em}
h2{font:700 30px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;margin:40px 0 12px}
.lead{color:var(--mut);max-width:34em;margin:0 0 16px}
.status{color:var(--mut);margin:0 0 14px}
.status:empty{display:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.chips:empty{display:none}
.chip{flex:none;font:600 15px Barlow,sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.feat{grid-column:1/-1;padding:22px;border-top:4px solid var(--amber)}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mut)}
.teams{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font:700 26px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.teams i{font:400 15px Barlow,sans-serif;color:var(--mut)}
.feat .teams{font-size:clamp(32px,7vw,46px)}
.bar{display:flex;height:14px;border-radius:7px;overflow:hidden;animation:grow .9s ease-out both}
.feat .bar{height:20px}
.bar span{display:block;height:100%}
.bar .a{background:var(--a)}.bar .n{background:var(--n)}.bar .b{background:var(--pitch)}
@keyframes grow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.bar{animation:none}}
.lg{display:flex;justify-content:space-between;font:700 20px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.lg span:nth-child(2){color:var(--mut);font-weight:600}
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg);border-radius:10px;padding:10px 12px}
.pick small{display:block;color:var(--mut);font-size:13px}
.pick strong{font-size:17px;font-weight:600}
.cf{font-size:13px;font-weight:600;background:var(--pill);color:var(--pillink);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tg{align-self:flex-start;font:600 15px Barlow,sans-serif;color:var(--pitch);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.why{margin:0;padding-left:18px;color:var(--mut);font-size:15px}
.why li+li{margin-top:4px}
.grp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 16px 8px;margin-bottom:12px}
.grp h3{font:700 22px/1.2 "Barlow Condensed","Arial Narrow",Arial,sans-serif;margin:10px 0 4px}
.grp ul{list-style:none;margin:0;padding:0}
.grp li{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.grp li:first-child{border-top:0}
.grp .t{flex:none;width:48px;font-weight:600;color:var(--pitch)}
.grp small{display:block;color:var(--mut);font-size:14px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pitch);color:var(--card);font-weight:600;margin-bottom:8px}
.steps b{display:block;font-size:17px}
.steps span{color:var(--mut);font-size:15px}
.note{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:14px}