:root{--bg:#141414;--panel:#1e1e1e;--raise:#2a2a2a;--line:#383838;--text:#f2f2f2;--mute:#b4b4b4;
--orange:#ff9800;--green:#107c41;--steam:#66c0f4;--steam-bg:#1b2838;--x:#1da1f2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
html[data-theme=steam]{--bg:#0f1724;--panel:#162134;--raise:#1b2a40;--line:#27384f;--text:#f4f8fd;--mute:#a3b3c8;--orange:#4da3ff;--steam:#7fb8ff}
html[data-theme=steam] .btn.main,html[data-theme=steam] .tag,html[data-theme=steam] .demo-tabs button[aria-selected=true]{color:#04101f}
html[data-theme=steam] .card.steam{border-color:rgba(77,163,255,.35);background:linear-gradient(135deg,rgba(77,163,255,.12),rgba(124,108,255,.12))}
body,header.top,section,.card,details,.btn{transition:background-color .4s,border-color .4s,color .4s}
@media(prefers-reduced-motion:reduce){body,header.top,section,.card,details,.btn{transition:none}}
a{color:var(--orange)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--steam);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;flex-wrap:wrap;gap:6px 16px}
.brand{font-weight:700;font-size:18px;color:var(--text);text-decoration:none}
nav a{color:var(--mute);text-decoration:none;margin-left:22px;font-size:15px}
nav a:hover{color:var(--text)}
nav a.xlink{color:var(--steam)}nav a.xlink:hover{color:#fff}
h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:0 0 18px;letter-spacing:-.02em}
h2{font-size:28px;margin:0 0 10px;letter-spacing:-.01em}
h3{font-size:19px;margin:0 0 6px}
p{margin:0 0 14px;color:var(--mute);max-width:62ch}
section{padding:64px 0;border-top:1px solid var(--line)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;font-weight:700;text-decoration:none;font-size:15px}
.btn.main{background:var(--orange);color:#000}
.btn.alt{background:var(--raise);color:var(--text)}
.btn:hover{opacity:.9}
.note{font-size:14px;margin-top:14px}
code{background:var(--raise);padding:2px 6px;border-radius:5px;font:14px Consolas,monospace;color:var(--text)}

/* Live replica of the extension panel */
.fg{width:100%;max-width:300px;margin:0 auto;background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.fg-head{width:100%;border:0;background:var(--orange);color:#000;padding:13px;font:700 16px inherit;font-family:inherit;cursor:pointer}
.fg-head span{display:inline-block}
.fg.closed .fg-head span{animation:fade 2.8s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:1}50%{opacity:.25}}
.fg-body{padding:10px}
.fg.closed .fg-body{display:none}
.fg-stat{background:var(--raise);padding:8px 12px;border-radius:8px;margin-bottom:6px;text-align:center;font-size:13px;color:#ddd}
.fg button.b{width:100%;padding:10px;margin-bottom:8px;border:0;border-radius:6px;font:700 14px inherit;font-family:inherit;cursor:pointer;color:#fff}
.b.exp{background:var(--orange);color:#000!important}.b.rev{background:#444}.b.red{background:var(--steam-bg);color:var(--steam)!important}
.menu{display:none;margin:-2px 0 8px;background:var(--raise);border-radius:6px;overflow:hidden}
.menu.open{display:block}
.menu button{display:block;width:100%;background:none;border:0;border-bottom:1px solid #333;color:#eee;text-align:left;padding:9px 12px;font:600 14px inherit;font-family:inherit;cursor:pointer}
.menu button:hover{background:#3a3a3a}
.menu .parent{color:#ffb74d}
.menu .sub{display:none;background:#202020}.menu .sub.open{display:block}.menu .sub button{padding-left:26px;font-weight:500}
.menu button:last-child{border-bottom:0}
.fg-x{display:block;text-align:center;background:var(--x);color:#fff;padding:10px;border-radius:6px;font-weight:700;font-size:14px;margin-bottom:10px}
.fg-foot{text-align:center;font-size:11px;color:#bbb}
.demo-tabs{display:flex;gap:6px;justify-content:center;margin:0 auto 16px}
.demo-tabs button{border:1px solid var(--line);background:var(--panel);color:var(--mute);padding:7px 16px;border-radius:99px;font:600 14px inherit;font-family:inherit;cursor:pointer}
.demo-tabs button[aria-selected=true]{background:var(--orange);border-color:var(--orange);color:#000}
.sg{width:100%;max-width:400px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(3,8,18,.6);background:#162134;border:1px solid rgba(148,176,214,.16);color:#cdd9e8;text-align:left}
.sg-bar{display:block;width:100%;border:0;padding:13px;color:#fff;font:700 16px inherit;font-family:inherit;cursor:pointer;background:linear-gradient(90deg,#4da3ff,#7c6cff);text-align:center}
.sg.closed .sg-bar span{display:inline-block;animation:fade 2.8s ease-in-out infinite}
.sg:not(.closed) .sg-bar{display:none}
.sg.closed .sg-panel{display:none}
.sg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:0;border-bottom:1px solid rgba(148,176,214,.16);width:100%;background:none;cursor:pointer;color:#8396ad;font:650 12px inherit;font-family:inherit;letter-spacing:.09em;text-transform:uppercase}
.sg-head small{letter-spacing:0;text-transform:none;font-weight:400;opacity:.8;margin-left:8px}
.sg-body{padding:16px 18px 18px}
.sg-banner{padding:10px 13px;font-size:13px;line-height:1.45;margin-bottom:10px;border-radius:10px;border:1px solid rgba(61,220,151,.3);background:rgba(61,220,151,.1);color:#a8f0cf}
.sg-banner.info{border-color:rgba(77,163,255,.28);background:rgba(77,163,255,.1);color:#bcdcff}
.sg textarea{width:100%;height:84px;resize:vertical;padding:10px 12px;color:#f4f8fd;font:12.5px Consolas,monospace;background:#0d1522;border:1px solid rgba(148,176,214,.16);border-radius:9px}
.sg textarea:focus{outline:0;border-color:#4da3ff;box-shadow:0 0 0 3px rgba(77,163,255,.2)}
.sg-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.sg-row button{height:34px;padding:0 16px;border:0;border-radius:99px;font:600 13px inherit;font-family:inherit;cursor:pointer;color:#cdd9e8;background:rgba(255,255,255,.12)}
.sg-row button.go{color:#04150d;background:linear-gradient(90deg,#3ddc97,#5fe9b0)}
.sg-row button:disabled{opacity:.5;cursor:default}
.sg-count{margin-left:auto;font-size:12px;color:#8396ad}
.sg-bar2{height:6px;margin-top:12px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.sg-bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4da3ff,#3ddc97);border-radius:99px;transition:width .3s}
.sg-list{margin-top:10px;border:1px solid rgba(148,176,214,.16);border-radius:10px;background:#1b2a40;overflow:hidden}
.sg-list div{display:flex;justify-content:space-between;gap:8px;padding:7px 12px;font-size:12px;border-bottom:1px solid rgba(148,176,214,.16)}
.sg-list div:last-child{border-bottom:0}
.sg-list code{background:none;padding:0;color:#8396ad;font-size:12px}
.sg-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px}
.sg-chip.redeemed{background:rgba(61,220,151,.2);color:#3ddc97}.sg-chip.owned{background:rgba(77,163,255,.2);color:#4da3ff}.sg-chip.used,.sg-chip.invalid{background:rgba(255,107,107,.2);color:#ff6b6b}
.sg-chk{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12px;color:#8396ad;line-height:1.4}
.sg-chk input{margin-top:2px;accent-color:#4da3ff}
.sg-foot{margin-top:12px;font-size:11px;color:#8396ad;line-height:1.45}
.sg-chip.skipped{background:rgba(255,255,255,.1);color:#a3b3c8}
.sg-sum{margin-top:10px;font-size:13px;color:#f4f8fd}
.hint{text-align:center;font-size:13px;margin:14px 0 0;color:var(--mute);max-width:none}

.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.card.steam{border-color:#2c4a63;background:var(--steam-bg)}
.card.steam h3{color:var(--steam)}
.tag{display:inline-block;background:var(--orange);color:#000;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;vertical-align:middle;margin-left:6px}
ul.tick{margin:12px 0 0;padding-left:20px;color:var(--mute)}
ul.tick li{margin-bottom:6px}
.fmts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fmts span{background:var(--raise);padding:6px 12px;border-radius:6px;font-size:14px}
ol.steps{padding-left:22px;color:var(--mute);max-width:70ch}
ol.steps li{margin-bottom:10px}
ol.steps b{color:var(--text)}
details{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:0 18px}
summary{cursor:pointer;font-weight:600;padding:14px 0}
details p{padding-bottom:6px}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.policy{padding:48px 0}
.policy h2{margin-top:32px;font-size:21px}
.policy ul{color:var(--mute);padding-left:22px}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:36px}.cols{grid-template-columns:1fr}nav a{margin-left:14px}}
@media(max-width:560px){header.top .wrap{padding-top:10px;padding-bottom:10px}nav{display:flex;flex-wrap:wrap;gap:2px 16px;width:100%}nav a{margin-left:0;font-size:14px;padding:6px 0}.hero{padding-top:36px;padding-bottom:40px;gap:28px}section{padding:44px 0}.btns .btn{flex:1 1 auto;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fg.closed .fg-head span,.sg.closed .sg-bar span{animation:none}}

.wide{grid-column:1/-1}
.mt14{margin-top:14px}
.visit-dot{color:#3ddc97}