:root{box-sizing:border-box}body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one column page, max 1180px; demo bar on top, real UI below. Single dark look by choice. */
:root{
  --bg:#0b0b0b; --s1:#161616; --s2:#0b0b0b; --line:#2a2a2a; --line2:#333333;
  --text:#f5f5f5; --t2:#bdbdbd; --muted:#8a8a8a; --ok:#4ade80; --warn:#ffd60a; --warnfg:#0b0b0b;
  --acc:#0070d1; --accfg:#ffffff; --acchi:#4aa3ff; --accdim:#0f2a45;
  --f-display:'Unbounded',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
[data-p="ps"]{--acc:#0070d1;--accfg:#ffffff;--acchi:#4aa3ff;--accdim:#0f2a45}
[data-p="xb"]{--acc:#107c10;--accfg:#ffffff;--acchi:#5bd65b;--accdim:#0f2e0f}
[data-p="ns"]{--acc:#e60012;--accfg:#ffffff;--acchi:#ff6b75;--accdim:#3a0a0e}
[data-p="st"]{--acc:#66c0f4;--accfg:#0b1a26;--acchi:#66c0f4;--accdim:#12303f}
[data-p="ep"]{--acc:#f4f4f5;--accfg:#0b0b0b;--acchi:#f4f4f5;--accdim:#2a2a2a}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{font-family:var(--f-body);font-size:16px;line-height:1.5}
a{color:var(--text)}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.tr{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
@media (prefers-reduced-motion:reduce){.tr{transition:none}.pulse,.slide{animation:none!important}}

/* demo bar */
.demo{border-bottom:1px dashed var(--line2);background:#121212}
.demo .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:10px}
.demo-label{font:600 11px var(--f-mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{height:34px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;color:var(--t2);font-size:13px;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

.bar{height:6px;background:var(--acc)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-block:18px}
.logo{font:800 18px var(--f-display);flex:1 1 auto;letter-spacing:.01em}
.logo span{color:var(--acchi)}
.online{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--t2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pill-btn{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--text);text-decoration:none;font-weight:700;font-size:14px}
.meta{font:500 14px var(--f-mono);color:var(--muted)}

main{padding-block:24px 64px;display:flex;flex-direction:column;gap:18px}
h1.big{margin:0;font:800 clamp(34px,6.4vw,68px)/1.02 var(--f-display);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.hl{background:var(--acc);color:var(--accfg);padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl.ok{background:var(--ok);color:#0b0b0b}
.lead{margin:0;font-size:clamp(16px,2vw,19px);color:var(--t2);max-width:62ch}
.panel{background:var(--s1);border-radius:24px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:16px}
.outline{border:2px solid #1f1f1f;border-radius:20px;padding:clamp(18px,3vw,24px)}
.label{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}

/* platforms */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.plat{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 14px;border-radius:16px;border:2px solid var(--line2);background:transparent;color:var(--text);text-align:left}
.plat[aria-pressed="true"]{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
.slot{flex:none;width:40px;height:40px;border-radius:12px;background:#1f1f1f;color:#ffffff;display:flex;align-items:center;justify-content:center}
.slot svg{width:22px;height:22px;fill:currentColor}
.plat[aria-pressed="true"] .slot{background:rgba(0,0,0,.22);color:var(--accfg)}
.chip .lg{display:inline-flex;width:18px;height:18px;margin-right:8px}
.chip .lg svg{width:18px;height:18px;fill:currentColor}
.platline{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:40px;padding:0 16px 0 8px;border-radius:999px;background:var(--acc);color:var(--accfg);font-weight:800;font-size:15px}
.platline .lg{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
.platline .lg svg{width:16px;height:16px;fill:currentColor}
.plat b{display:block;font-size:15px}
.plat small{display:block;font-size:12px;font-weight:600;opacity:.8}

.fields{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.field{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}
.field .hint{font-size:13px;color:var(--muted)}
input.inp{height:60px;padding:0 18px;border-radius:14px;border:2px solid #2e2e2e;background:var(--s2);color:var(--text);font-size:18px;min-width:0;width:100%}
input.inp.mono{font-family:var(--f-mono);font-weight:500}
input.inp:focus{outline:none;border-color:var(--acchi)}
input.inp::placeholder{color:#5a5a5a}
.cta{height:60px;padding:0 28px;border:0;border-radius:14px;background:var(--acc);color:var(--accfg);font:800 15px var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.cta.dark{background:var(--bg);color:#ffffff}
.cta.light{background:var(--text);color:var(--bg)}
.ghost{height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--text);font-weight:700;font-size:14px}
.err{display:none;margin:0;font-size:14px;color:#ff8a8a}
.err.on{display:block}

/* tracker */
.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px}
.track li{padding:16px 18px;border-radius:18px;display:flex;flex-direction:column;gap:6px;border:2px solid transparent;background:var(--s1)}
.track li.now{border-color:var(--acc)}
.track li.next{background:transparent;border-color:#1f1f1f}
.track .tag{font:600 13px var(--f-mono)}
.track .done .tag{color:var(--ok)}
.track .now .tag{color:var(--acchi)}
.track .next .tag{color:#6b6b6b}
.track b{font-size:16px}
.track .next b{color:var(--t2)}
.track span.s{font-size:13px;color:var(--muted)}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.slide{animation:slide 1.8s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.prog{position:relative;height:4px;background:var(--accdim);overflow:hidden;border-radius:2px}
.prog i{position:absolute;inset:0;width:40%;background:var(--acc);border-radius:2px}

/* credentials */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.cred{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;border-radius:16px;background:var(--s2);border:2px solid var(--line)}
.cred .v{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cred .k{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.cred .val{font:600 18px var(--f-mono);overflow-wrap:anywhere}
.copy{height:46px;padding:0 18px;border-radius:999px;border:0;background:var(--text);color:var(--bg);font-weight:800;font-size:14px}
.eye{height:46px;width:46px;border-radius:50%;border:2px solid var(--line2);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--warn);color:var(--warnfg);font-size:15px}
.note svg{flex:none;margin-top:2px}

/* code exchange */
.nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.node{padding:16px;border-radius:18px;display:flex;flex-direction:column;gap:8px;border:2px dashed #2a2a2a}
.node.now{border:2px solid var(--acc);background:var(--s2)}
.node.done{border:2px solid #1f3d27;background:var(--s2)}
.node .h{display:flex;align-items:center;gap:10px}
.badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px var(--f-mono);background:#262626;color:var(--muted)}
.now .badge{background:var(--acc);color:var(--accfg)}
.done .badge{background:var(--ok);color:#0b0b0b}
.who{font:600 12px var(--f-mono);letter-spacing:.06em;color:#a3a3a3}
.node b{font-size:16px}
.node p{margin:0;font-size:14px;color:var(--t2)}
.action{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;padding:clamp(16px,3vw,24px);border-radius:20px;background:var(--acc);color:var(--accfg)}
.action.wait{background:transparent;border:2px solid var(--acc);color:var(--text);position:relative;overflow:hidden;align-items:center}
.action.ok{background:var(--ok);color:#0b0b0b;align-items:center}
.action .col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.action .t{margin:0;font:800 clamp(19px,2.6vw,25px)/1.15 var(--f-display)}
.action p{margin:0;font-size:15px;opacity:.9}
.action label{font-size:14px;font-weight:700}
.action input.inp{border-color:#0b0b0b;background:#0b0b0b;color:#ffffff;font:700 26px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;text-align:center;height:66px}
.chars{display:flex;flex-wrap:wrap;gap:8px}
.chars span{width:56px;height:72px;border-radius:14px;background:#0b0b0b;color:#ffffff;display:flex;align-items:center;justify-content:center;font:700 34px var(--f-mono)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn-out{height:56px;padding:0 22px;border-radius:16px;border:2px solid currentColor;background:transparent;color:inherit;font-weight:700;font-size:15px}
.demo-btn{height:44px;padding:0 16px;border-radius:999px;border:0;background:#262626;color:var(--t2);font-weight:700;font-size:13px}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;font-size:15px;color:var(--t2)}
.steps em{display:block;font:600 13px var(--f-mono);font-style:normal;color:var(--acchi)}
.inst{display:flex;flex-wrap:wrap;gap:16px 40px}
.inst h2{margin:0;flex:1 1 200px;font-size:17px;font-weight:800}
.inst ol{flex:999 1 560px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:2px solid #2e2e2e;font-size:14px;color:var(--t2)}
.chip.acc{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:700}
/* first-page facts row */
.facts{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;font-weight:600;color:var(--t2)}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{color:var(--acchi)}

/* real console screenshot with highlight */
.shot{margin:0;flex:0 1 380px;max-width:380px;min-width:0;display:flex;flex-direction:column;gap:8px}
.shot-img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #0b0b0b,0 14px 26px -16px rgba(0,0,0,.8)}
.shot-img img{display:block;width:100%;height:100%;object-fit:cover}
.hlbox{position:absolute;border:3px solid #ffd60a;border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);animation:codeglow2 1.6s ease-in-out infinite}
.hlbox em{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font:800 11px/1.2 var(--f-body);font-style:normal;color:#0b0b0b;background:#ffd60a;padding:3px 8px;border-radius:999px}
.hlbox em.lab-left{right:calc(100% + 6px)}
.hlbox em.lab-right{left:calc(100% + 6px)}
.hlbox{box-sizing:border-box}
@keyframes codeglow2{50%{border-color:rgba(255,214,10,.45)}}
.shot figcaption{font-size:13px;font-weight:700;opacity:.85}
.action.send .col{flex:1 1 300px}
@media (prefers-reduced-motion:reduce){.hlbox{animation:none}}

/* "which code" helper */
.action.send{align-items:center;gap:20px 32px}
.tvwrap{margin:0;flex:0 1 340px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.tv{position:relative;width:100%;max-width:340px;aspect-ratio:16/10;background:#050505;border:8px solid #1c1c1c;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}
.tv::after{content:"";position:absolute;bottom:-22px;left:50%;width:90px;height:12px;transform:translateX(-50%);background:#1c1c1c;border-radius:0 0 8px 8px}
.tv-top{width:46%;height:6px;border-radius:3px;background:#2a2a2a}
.qr{display:grid;grid-template-columns:repeat(21,1fr);width:38%;max-width:110px;aspect-ratio:1;background:#ffffff;padding:5px;border-radius:4px;opacity:.55}
.qr i{background:#ffffff}.qr i.b{background:#000000}
.tv-code{font:700 clamp(16px,2.4vw,22px) var(--f-mono);color:#ffffff;letter-spacing:.22em;padding:4px 12px;border-radius:8px;outline:3px solid #ffd60a;outline-offset:2px;animation:codeglow 1.6s ease-in-out infinite}
@keyframes codeglow{50%{outline-color:rgba(255,214,10,.35)}}
.tv-tag{font:800 12px var(--f-body);color:#0b0b0b;background:#ffd60a;padding:3px 8px;border-radius:999px;white-space:nowrap}
.tvwrap figcaption{margin-top:14px;font-size:13px;font-weight:700;opacity:.85}
.dodont{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.dodont li{display:flex;align-items:center;gap:10px}
.dodont svg{flex:none;width:22px;height:22px;padding:3px;border-radius:50%}
.dodont .do svg{background:#4ade80;color:#0b0b0b}
.dodont .dont svg{background:#0b0b0b;color:#ff8a8a}
.action.send .cta{align-self:flex-start;margin-top:4px}
@media (prefers-reduced-motion:reduce){.tv-code{animation:none}}

.tl-neutral li i{border-color:var(--text)}
.tl-neutral li b{color:var(--text)}

.vr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:12px;background:var(--s2);border:1px dashed var(--line2)}
.vr.got{border-style:solid;border-color:var(--acc)}
.vr-t{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--t2)}
.vr-t b{font-size:14px;color:var(--text)}
.vr-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--acc);color:var(--accfg);font:800 14px var(--f-body);cursor:pointer;white-space:nowrap}
.vr-btn.ghostish{background:transparent;color:var(--text);border:2px solid var(--line2)}
.vr-code{font:700 26px var(--f-mono);letter-spacing:.25em;color:var(--text);padding:4px 12px;border-radius:10px;background:var(--bg)}

/* where is my order number */
.where{background:var(--s1);border-radius:24px;padding:clamp(16px,2.6vw,24px);display:flex;flex-direction:column;gap:14px}
.where-h{margin:0;display:flex;align-items:center;gap:10px;font:800 15px var(--f-body);letter-spacing:.02em}
.where-q{width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--accfg);display:flex;align-items:center;justify-content:center;font:800 14px var(--f-display);flex:none}
.where-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:760px){.where-grid{grid-template-columns:minmax(0,1fr)}}
.wcard{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.wimg{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #2a2a2a}
.wimg img{display:block;width:100%;height:auto}
.wimg.wide{overflow-x:auto}
.whl{position:absolute;border:3px solid #ffd60a;border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.42);animation:codeglow2 1.6s ease-in-out infinite}
.wcard figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--t2)}
.wcard figcaption b{display:flex;align-items:center;gap:8px;color:var(--text);font-size:15px}
.wcard figcaption em{font-style:normal;color:var(--text);font-weight:700}
.wlink{color:var(--acchi);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.wlink:hover{color:var(--text)}
.wn{width:22px;height:22px;border-radius:50%;border:2px solid var(--acc);color:var(--acchi);display:flex;align-items:center;justify-content:center;font:800 12px var(--f-mono);flex:none}
@media (prefers-reduced-motion:reduce){.whl{animation:none}}

.helpline{margin:0;font-size:14px;color:var(--muted)}
.helpline a,.helplink{color:var(--acchi);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.helpline a:hover,.helplink:hover{color:var(--text)}
.tl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.tl .tl-head h2{margin:0}
.helplink{font-size:14px}
@media (max-width:560px){.online .hrs{display:none}header.top .pill-btn{height:40px;padding:0 14px;font-size:13px}}
.pill-btn.ghostlink{border-color:transparent;color:var(--t2)}
.pill-btn.ghostlink:hover{color:var(--text);border-color:var(--line2)}

.langsel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 8px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--text);font:800 13px var(--f-body);letter-spacing:.04em;cursor:pointer;transition:border-color .15s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--text)}
.lang-btn .chev{transition:transform .15s;color:var(--t2)}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.flag{flex:none;width:22px;height:22px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
.flag svg{display:block;width:100%;height:100%}
.flag.txt{background:#2a2a2a;font:800 8px var(--f-mono);letter-spacing:0;color:#f5f5f5}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:232px;margin:0;padding:6px;list-style:none;background:#161616;border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.6);animation:langin .14s ease-out}
.lang-menu[hidden]{display:none}
@keyframes langin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-menu button{width:100%;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px 0 10px;border:0;border-radius:12px;background:transparent;color:var(--t2);font:700 15px var(--f-body);text-align:left;cursor:pointer}
.lang-menu button .flag{width:26px;height:26px}
.lang-menu button .flag.txt{font-size:9px}
.lang-menu button .nm{flex:1}
.lang-menu button .cd{font:600 11px var(--f-mono);color:var(--muted);letter-spacing:.06em}
.lang-menu button:hover,.lang-menu button:focus-visible{background:#222;color:var(--text);outline:none}
.lang-menu button[aria-checked="true"]{color:var(--text);background:#1d1d1d}
.lang-menu button .ck{width:16px;color:var(--acchi,var(--text));visibility:hidden}
.lang-menu button[aria-checked="true"] .ck{visibility:visible}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){.lang-btn{height:40px}.lang-menu{right:auto;left:0}}
@media (prefers-reduced-motion:reduce){.lang-menu{animation:none}.lang-btn .chev{transition:none}}

/* compact credentials */
.cc{background:var(--s1);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.cc-h{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}
.cc-row{display:flex;flex-wrap:wrap;gap:8px}
.cc-f{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 14px;border-radius:12px;background:var(--s2);border:1px solid var(--line)}
.cc-k{flex:none;font-size:12px;font-weight:700;color:var(--muted)}
.cc-v{flex:1;min-width:0;font:600 15px var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-b{flex:none;width:36px;height:36px;border-radius:10px;border:0;background:#262626;color:var(--text);display:flex;align-items:center;justify-content:center}
.cc-b:hover{background:#333}
.cc-w{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--warn)}
.cc-w svg{width:16px;height:16px;flex:none}
/* compact page 3 */
.ready h1.big{font-size:clamp(28px,4.4vw,46px)}
.ready .track li{padding:10px 14px;gap:2px;border-radius:14px}
.ready .track span.s{display:none}
.ready .track b{font-size:14px}
.ready .panel{padding:clamp(16px,2.4vw,22px);gap:12px}
.ready .node{padding:12px 14px}
.ready .node p{display:none}
.ready .action{padding:clamp(14px,2.4vw,20px)}

/* D: timeline */
.tl{padding-top:6px}
.tl h2{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}
.tl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:0}
.tl li{position:relative;padding:28px 16px 0 0;font-size:15px;color:var(--t2)}
.tl li::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#2a2a2a}
.tl li:first-child::before{left:9px}
.tl li i{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:3px solid var(--acc)}
.tl li b{display:block;color:var(--text);font:800 13px var(--f-mono);margin-bottom:4px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px}
footer{border-top:1px solid #1a1a1a}
footer .wrap{padding-block:20px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}

/* ===== Help center (scoped) ===== */
#help{padding-block:28px 72px;display:flex;flex-direction:column;gap:56px}
#help .eyebrow{margin:0 0 10px;font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#help h1.big{margin:0;font:800 clamp(38px,7vw,84px)/1 var(--f-display);letter-spacing:-.03em;text-transform:uppercase}
#help .hl{background:var(--acc);color:var(--accfg);padding:0 .18em}
#help .lead{margin:16px 0 0;font-size:clamp(16px,2vw,19px);color:var(--t2);max-width:60ch}
#help h2.sec{color:var(--text);letter-spacing:-.02em;margin:0 0 18px;font:800 clamp(22px,3vw,30px)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:-.02em}
#help h2.sec small{display:block;margin-top:8px;font:500 15px/1.5 var(--f-body);text-transform:none;letter-spacing:0;color:var(--t2)}
#help .search{margin-top:24px;display:flex;align-items:center;gap:12px;max-width:640px;height:62px;padding:0 8px 0 20px;border-radius:16px;background:var(--s1);border:2px solid var(--line)}
#help .search:focus-within{border-color:var(--acchi)}
#help .search svg{flex:none;color:var(--muted)}
#help .search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font-size:17px;outline:none}
#help .search input::placeholder{color:#6b6b6b}
#help .search kbd{font:600 12px var(--f-mono);color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:2px 6px}
#help .topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
#help .topic{display:flex;flex-direction:column;gap:10px;min-height:150px;padding:18px;border-radius:20px;background:var(--s1);border:2px solid transparent;text-decoration:none;color:var(--text)}
#help .topic:hover{border-color:var(--line2)}
#help .topic .ic{width:40px;height:40px;border-radius:12px;background:#222;display:flex;align-items:center;justify-content:center;color:var(--acchi)}
#help .topic b{font-size:17px;line-height:1.25}
#help .topic span{font-size:14px;color:var(--muted);margin-top:auto}
#help .tl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
#help .tl li{position:relative;padding:30px 18px 0 0;font-size:15px;color:var(--t2)}
#help .tl li::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#2a2a2a}
#help .tl li:first-child::before{left:9px}
#help .tl li i{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:3px solid var(--acc)}
#help .tl li b{display:block;color:var(--text);font:800 13px var(--f-mono);margin-bottom:4px;letter-spacing:.04em}
#help .tl li strong{display:block;color:var(--text);font-size:16px;margin-bottom:2px}
#help .ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
#help .ptab{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--text);font-weight:800;font-size:15px}
#help .ptab .lg{width:36px;height:36px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center}
#help .ptab .lg svg{width:18px;height:18px;fill:currentColor}
#help .ptab[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
#help .ptab[aria-selected="true"] .lg{background:rgba(0,0,0,.22)}
#help .ppanel{background:var(--s1);border-radius:24px;padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:22px}
#help .ptop{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:flex-start}
#help .ptop .txt{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px}
#help .ptop h3{margin:0;font:800 clamp(24px,3.4vw,36px)/1.05 var(--f-display);text-transform:uppercase;letter-spacing:-.02em}
#help .ptop p{margin:0;color:var(--t2)}
#help .gets{display:flex;flex-wrap:wrap;gap:8px}
#help .get{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:#222;font-size:13px;font-weight:700}
#help .get svg{color:var(--ok)}
#help .shot{margin:0;flex:0 1 380px;max-width:380px;min-width:0;display:flex;flex-direction:column;gap:8px}
#help .shot-img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #000,0 14px 26px -16px rgba(0,0,0,.8)}
#help .shot-img img{display:block;width:100%;height:100%;object-fit:cover}
#help .hlbox{position:absolute;border:3px solid var(--warn);border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);animation:hcglow 1.6s ease-in-out infinite}
@keyframes hcglow{50%{border-color:rgba(255,214,10,.45)}}
#help .shot figcaption{font-size:13px;color:var(--muted)}
#help .note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,214,10,.08);border:1px solid rgba(255,214,10,.35);color:#f5dfae;font-size:14px}
#help .note svg{flex:none;color:var(--warn);margin-top:2px}
#help .note b{color:var(--warn)}
#help .where-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){#help .where-grid{grid-template-columns:minmax(0,1fr)}
}
#help .wcard{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:20px;background:var(--s1)}
#help .wimg{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #2a2a2a}
#help .wimg img{display:block;width:100%;height:auto}
#help .whl{position:absolute;border:3px solid var(--warn);border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.42);animation:hcglow 1.6s ease-in-out infinite}
#help .wcard figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--t2)}
#help .wcard figcaption b{display:flex;align-items:center;gap:8px;color:var(--text);font-size:15px}
#help .wn{width:22px;height:22px;border-radius:50%;border:2px solid var(--acc);color:var(--acchi);display:flex;align-items:center;justify-content:center;font:800 12px var(--f-mono);flex:none}
#help .alink{color:var(--acchi);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
#help .alink:hover{color:var(--text)}
#help .faq{display:flex;flex-direction:column;gap:8px}
#help .faq{gap:14px}
#help .fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
#help .fchips button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 8px 0 16px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--t2);font-weight:800;font-size:14px;cursor:pointer}
#help .fchips button .n{min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:#222;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--f-mono);color:var(--text)}
#help .fchips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
#help .fchips button[aria-pressed="true"] .n{background:rgba(0,0,0,.22);color:var(--accfg)}
#help .fchips button:disabled{opacity:.35;cursor:default}
#help .fgrp{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:16px 28px;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(22,22,22,.5);border:1px solid rgba(255,255,255,.06)}
#help .fmeta{position:relative;display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:96px}
#help .fic{width:44px;height:44px;border-radius:14px;background:var(--acc);color:var(--accfg);display:flex;align-items:center;justify-content:center}
#help .fno{position:absolute;right:0;top:-6px;font:800 44px/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px #333}
#help .fmeta h3{margin:4px 0 0;font:800 20px/1.15 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
#help .fmeta p{margin:0;color:var(--muted);font-size:14px}
#help .fitems{display:flex;flex-direction:column;gap:8px;min-width:0}
#help .fitems details{background:var(--bg);border:2px solid #202020}
#help .fitems details[open]{border-color:var(--line2)}
@media (max-width:860px){#help .fgrp{grid-template-columns:minmax(0,1fr);padding:16px}#help .fmeta{position:relative;top:auto}#help .fno{font-size:34px}}

#help .faq details{border-radius:16px;background:var(--s1);border:2px solid transparent}
#help .faq details[open]{border-color:var(--line2)}
#help .faq summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;cursor:pointer;font-weight:800;font-size:16px}
#help .faq summary::-webkit-details-marker{display:none}
#help .faq summary .q{flex:1}
#help .faq summary .tag{flex:none;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:3px 8px}
#help .faq summary .pm{flex:none;width:28px;height:28px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
#help .faq details[open] .pm{transform:rotate(45deg);background:var(--acc);color:var(--accfg)}
#help .faq .a{padding:0 18px 18px 18px;color:var(--t2);max-width:72ch}
#help .faq .a p{margin:0 0 8px}
#help .empty{padding:22px;border-radius:16px;border:2px dashed var(--line2);color:var(--t2)}
@media (max-width:560px){#help .faq summary .tag{display:none}
}
#help .band{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--acc);color:var(--accfg)}
#help .band .t{flex:1 1 380px;min-width:0}
#help .band h2{margin:0 0 8px;font:800 clamp(22px,3vw,32px)/1.1 var(--f-display);text-transform:uppercase}
#help .band p{margin:0;opacity:.92}
#help .cta{display:inline-flex;align-items:center;height:58px;padding:0 26px;border-radius:14px;background:#0b0b0b;color:#ffffff;font:800 15px var(--f-display);text-transform:uppercase;text-decoration:none;letter-spacing:.02em}
#help .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
#help .contact a,#help .contact div{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:20px;background:var(--s1);text-decoration:none;color:var(--text)}
#help .contact b{font-size:16px}
#help .contact span{font-size:14px;color:var(--muted)}
#help .qa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
#help .qa-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:132px;padding:18px;border-radius:20px;background:var(--s1);border:2px solid transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
#help .qa-card:hover{border-color:var(--line2)}
#help .qa-card[aria-expanded="true"]{border-color:var(--acchi)}
#help .qa-card .ic{width:40px;height:40px;border-radius:12px;background:#222;display:flex;align-items:center;justify-content:center;color:var(--acchi)}
#help .qa-card b{font-size:17px;line-height:1.25}
#help .qa-card span.d{font-size:14px;color:var(--muted);margin-top:auto}
#help .qa-panel{margin-top:12px;background:var(--s1);border-radius:24px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:16px;border:2px solid var(--line2)}
#help .qa-panel h3{margin:0;font:800 clamp(20px,2.6vw,26px)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
#help .qa-panel .sub{margin:-8px 0 0;color:var(--t2)}
#help .qa-plats{display:flex;flex-wrap:wrap;gap:8px}
#help .qa-plats button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 8px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--t2);font-weight:800;font-size:14px;cursor:pointer}
#help .qa-plats button .lg{width:26px;height:26px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center}
#help .qa-plats button .lg svg{width:14px;height:14px;fill:currentColor}
#help .qa-plats button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
#help .qa-plats button[aria-pressed="true"] .lg{background:rgba(0,0,0,.12)}
#help .qa-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#help .qa-go{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 24px;border:0;border-radius:14px;background:var(--acc);color:var(--accfg);font:800 15px var(--f-display);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;text-decoration:none}
#help .qa-ghost{display:inline-flex;align-items:center;height:56px;padding:0 20px;border-radius:14px;border:2px solid var(--line2);background:transparent;color:var(--text);font-weight:800;font-size:15px;cursor:pointer;text-decoration:none}
#help .qa-hint{font-size:13px;color:var(--muted)}
#help .qa-done{display:flex;gap:14px;align-items:flex-start}
#help .qa-done .okc{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(74,222,128,.14);color:var(--ok);display:flex;align-items:center;justify-content:center}
#help .qa-done p{margin:6px 0 0;color:var(--t2);max-width:60ch}
#help .qa-code{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#help .qa-code .v{font:700 clamp(30px,6vw,44px)/1 var(--f-mono);letter-spacing:.18em;padding:14px 18px;border-radius:14px;background:var(--bg);border:2px solid var(--line2)}
#help .pvar{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid #262626}
#help .pvar button{height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--t2);font:800 14px var(--f-body);cursor:pointer}
#help .pvar button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
#help .gwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px;align-items:start}
#help .gmain{min-width:0;display:flex;flex-direction:column;gap:12px}
#help .gh{margin:0;font:800 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#help .gs{display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:20px;background:var(--bg);border:1px solid #232323;outline:none}
#help .gs:focus-visible{border-color:var(--acchi)}
#help .gs-media{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:#000;touch-action:pan-y;user-select:none}
#help .gs-media img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
#help .gs-count{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.72);font:700 12px var(--f-mono);color:#fff}
#help .gs-body{display:flex;flex-direction:column;gap:6px;padding-inline:4px;min-height:96px}
#help .gs-body .k,#help .gs-item .k{font:800 12px var(--f-mono);letter-spacing:.08em;color:var(--acchi)}
#help .gs-body h5{margin:0;font-size:20px;line-height:1.25}
#help .gs-body p{margin:0;color:var(--t2);max-width:62ch}
#help .gs-nav{display:flex;align-items:center;gap:10px}
#help .gs-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line2);background:transparent;color:var(--text);font:800 14px var(--f-body);cursor:pointer}
#help .gs-btn.pri{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
#help .gs-btn:disabled{opacity:.3;cursor:default}
#help .gs-dots{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#help .gs-dots button{width:30px;height:30px;border-radius:50%;border:2px solid #2e2e2e;background:transparent;color:var(--muted);font:700 12px var(--f-mono);cursor:pointer;padding:0}
#help .gs-dots button.done{border-color:var(--acc);color:var(--text)}
#help .gs-dots button[aria-current="step"]{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
#help .gs-toggle{align-self:flex-start;border-color:transparent;color:var(--t2);padding:0 6px}
#help .gs-toggle:hover{color:var(--text)}
#help .gs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
#help .gs-item{margin:0;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--bg);border:1px solid #232323}
#help .gs-item figcaption{display:flex;flex-direction:column;gap:4px;padding:0 4px 4px;font-size:14px;color:var(--t2)}
#help .gs-item figcaption b{color:var(--text);font-size:15px}
#help .gaside{display:flex;flex-direction:column;gap:12px;min-width:0}
#help .vcard{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:20px;background:var(--bg);border:1px solid #232323;color:var(--text);text-decoration:none}
#help .vcard:hover{border-color:var(--line2)}
#help .vthumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:#000}
#help .vthumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:.82}
#help .vthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#help .vthumb .play span{width:58px;height:58px;border-radius:50%;background:var(--acc);color:var(--accfg);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.55);transition:transform .15s}
#help .vcard:hover .play span{transform:scale(1.08)}
#help .vcard .vt{display:flex;flex-direction:column;gap:2px;padding:2px 6px 4px}
#help .vcard .vt b{font-size:15px}
#help .vcard .vt small{font-size:13px;color:var(--muted)}
#help .rules{padding:16px;border-radius:20px;background:var(--bg);border:1px solid #232323}
#help .rules h4{margin:0 0 12px;font:800 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#help .rules ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#help .rules li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--t2)}
#help .rules li .x{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,107,107,.14);color:#ff8a8a;display:flex;align-items:center;justify-content:center;margin-top:1px}
#help .qa-panel .fields{align-items:flex-start}
.vgcnote{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:18px 0 0;padding:12px 14px;border-radius:14px;background:rgba(255,214,10,.08);border:1px solid rgba(255,214,10,.3);color:#f5dfae;font-size:14px}
@media (max-width:860px){#help .gwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){#help .qa-card{min-height:0;gap:6px;padding:14px 16px}#help .qa-card .ic{width:34px;height:34px}}
@media (max-width:560px){#help .gs-dots{display:none}#help .gs-nav{justify-content:space-between}#help .gs-nav .pri{flex:1}}
@media (prefers-reduced-motion:reduce){#help .vthumb .play span{transition:none}}
#help [data-hide]{display:none!important}

#help[hidden]{display:none!important}
.pill-btn.ghostlink.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ===== FX: A aurora + grain, G liquid glass, B spotlight tiles, F living tracker, H view transitions ===== */
#app{position:relative;isolation:isolate}
.aura{position:absolute;left:0;right:0;top:0;height:820px;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.aura .bl{position:absolute;inset:-25% -10% 0;filter:blur(90px) saturate(1.25)}
.aura i{position:absolute;border-radius:50%;opacity:.42;animation:fxdrift 18s ease-in-out infinite alternate;transition:background-color .6s ease}
.aura i:nth-child(1){width:44%;height:62%;left:4%;top:18%;background:var(--acc)}
.aura i:nth-child(2){width:36%;height:52%;left:44%;top:30%;background:var(--acchi);opacity:.3;animation-duration:22s;animation-delay:-7s}
.aura i:nth-child(3){width:28%;height:40%;left:68%;top:8%;background:#ffffff;opacity:.07;animation-duration:26s;animation-delay:-3s}
@keyframes fxdrift{0%{translate:0 0;scale:1}50%{translate:5% -7%;scale:1.12}100%{translate:-7% 5%;scale:.94}}
.aura .gr{position:absolute;inset:-50%;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:fxgrain 1s steps(6) infinite}
@keyframes fxgrain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}

/* G liquid glass */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(11,11,11,.38);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
.glass,.panel,#view .chip:not(.acc),.track li.done,.track li.now,#help .topic,#help .qa-card,#help .search,.pill-btn,.lang-btn{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(22,22,22,.5);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.panel{border:1px solid rgba(255,255,255,.07)}
.pill-btn.ghostlink{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.lang-menu{background:rgba(22,22,22,.78);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}

/* B spotlight + tilt */
.spot{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out,background-color .3s,color .3s,border-color .3s;--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:radial-gradient(200px circle at var(--mx) var(--my),var(--acchi),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--acchi) 15%,transparent),transparent 62%);opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover){.spot:hover::before,.spot:hover::after{opacity:1}}
.plat.spot .slot{transform:translateZ(22px)}
.plat.spot b,#help .topic.spot b,#help .qa-card.spot b{transform:translateZ(12px)}

/* F living tracker */
.track{position:relative;padding-top:22px}
.track .tline{position:absolute;left:4px;right:4px;top:6px;height:2px;border-radius:2px;background:#262626;grid-column:1/-1}
.track .tfill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--acchi));width:var(--to);animation:fxfill 1.1s cubic-bezier(.6,0,.2,1) both}
.track .tfill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:fxrun 2.2s linear infinite}
.track .tdot{position:absolute;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--acchi) 35%,transparent),0 0 18px 4px var(--acchi);left:var(--to);animation:fxdot 1.1s cubic-bezier(.6,0,.2,1) both}
@keyframes fxfill{from{width:var(--from)}to{width:var(--to)}}
@keyframes fxdot{from{left:var(--from)}to{left:var(--to)}}
@keyframes fxrun{from{background-position:-60% 0}to{background-position:160% 0}}
.track li.now{position:relative;animation:fxnow 2s ease-in-out infinite}
@keyframes fxnow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 0 color-mix(in srgb,var(--acc) 0%,transparent)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 6px color-mix(in srgb,var(--acc) 18%,transparent)}}
@media (max-width:640px){.track .tline{display:none}.track{padding-top:0}}
@media (max-width:720px){header.top{position:relative;top:auto}}
#view .prog{display:none}

/* H view transitions */
#view > h1.big,#help h1.big{view-transition-name:fx-hero}
.platline{view-transition-name:fx-chip}
#view > .chips{view-transition-name:fx-chips}
.track{view-transition-name:fx-track}
header.top{view-transition-name:fx-header}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

@media (prefers-reduced-motion:reduce){
  .aura i,.aura .gr,.track .tfill,.track .tfill::after,.track .tdot,.track li.now{animation:none!important}
  .spot{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}


/* Help center navigation: Xbox-style guide drawer (I) + minimal section pill (K) */
#help section[id]{scroll-margin-top:96px}
.gd-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border-radius:12px;border:2px solid var(--line2);background:transparent;color:var(--text);font-weight:800;font-size:14px;order:-1;cursor:pointer;transition:border-color .15s,background-color .15s}
.gd-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
.gd-burger i{display:block;height:2px;border-radius:2px;background:currentColor}
.gd-burger i:nth-child(3){width:70%}
.gd-btn[aria-expanded="true"],.gd-btn:hover{border-color:var(--text);background:#1a1a1a}
.gd-btn[hidden]{display:none}

.gd-ic{width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--accfg);display:inline-flex;align-items:center;justify-content:center;flex:none}
.gd{position:fixed;inset:0;z-index:80;visibility:hidden}
.gd.open{visibility:visible}
.gd-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.gd.open .gd-scrim{opacity:1}
.gd-panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,88vw);display:flex;flex-direction:column;gap:6px;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) 18px;background:#121212;border-left:1px solid #262626;box-shadow:-24px 0 60px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .32s cubic-bezier(.3,.8,.2,1);overflow-y:auto}
.gd.open .gd-panel{transform:none}
.gd-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid #222;font:800 15px var(--f-display);text-transform:uppercase}
.gd-head .gd-ic{width:38px;height:38px}
.gd-x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid #333;background:transparent;color:var(--text);font-size:16px}
.gd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gd-list a{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 14px;border-radius:14px;border:2px solid transparent;color:var(--t2);text-decoration:none;font-weight:800;font-size:16px}
.gd-list a svg{flex:none;color:#8a8a8a}
.gd-list a:hover{background:#1b1b1b;color:var(--text)}
.gd-list a[aria-current="true"]{border-color:#fff;background:#1b1b1b;color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--acchi) 22%,transparent)}
.gd-list a[aria-current="true"] svg{color:var(--acchi)}
.gd-foot{margin-top:auto;padding-top:16px;border-top:1px solid #222;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13px;color:var(--muted)}
.sn{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:999px;background:#f5f5f5;color:#0b0b0b;box-shadow:0 16px 36px rgba(0,0,0,.55);animation:snin .25s ease-out}
.sn[hidden]{display:none}
@keyframes snin{from{opacity:0;transform:translate(10px,-50%)}to{opacity:1;transform:translateY(-50%)}}
.sn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sn a,.sn-top{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#555;text-decoration:none;font:700 12px var(--f-mono);cursor:pointer}
.sn a:hover,.sn-top:hover{background:#e3e3e3;color:#0b0b0b}
.sn a.past{color:#0b0b0b}
.sn a[aria-current="true"]{background:#0b0b0b;color:#fff}
.sn a[aria-current="true"] .sn-n{color:var(--acchi)}
.sn-top{border-top:1px solid #d4d4d4;border-radius:0 0 999px 999px;height:42px;font:800 16px var(--f-body);margin-top:2px}
.sn .sn-l{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);padding:7px 12px;border-radius:999px;background:#f5f5f5;color:#0b0b0b;font:800 13px var(--f-body);white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.sn a:hover .sn-l,.sn a:focus-visible .sn-l,.sn-top:hover .sn-l,.sn-top:focus-visible .sn-l{opacity:1}
@media (min-width:1560px){.sn a[aria-current="true"] .sn-l{opacity:1;background:#0b0b0b;color:#fff;box-shadow:none}}
.sn.flash a[aria-current="true"] .sn-l{opacity:1}
@media (max-width:640px){.sn{right:max(8px,env(safe-area-inset-right,0px));gap:2px;padding:4px}.sn a,.sn-top{width:34px;height:34px;font-size:11px}.sn-top{height:36px}}

@media (prefers-reduced-motion:reduce){.gd-panel,.gd-scrim,.sn,.sn .sn-l{transition:none;animation:none}}

/* PlayStation sign-in warning before showing the password */
.psg{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:psgin .2s ease-out}
.psg[hidden]{display:none}
@keyframes psgin{from{opacity:0}to{opacity:1}}
.psg-card{width:100%;max-width:520px;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:24px;background:#141414;border:1px solid #2a2a2a;border-top:4px solid var(--warn);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.psg-ic{width:52px;height:52px;border-radius:16px;background:rgba(255,214,10,.12);color:var(--warn);display:flex;align-items:center;justify-content:center}
.psg-card h2{margin:0;font:800 clamp(20px,3vw,26px)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
.psg-card p{margin:0;color:var(--t2)}
.psg-where{display:flex;flex-wrap:wrap;gap:8px}
.psg-where span{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:800}
.psg-ok{background:rgba(74,222,128,.14);color:var(--ok)}
.psg-no{background:rgba(255,107,107,.12);color:#ff8a8a;text-decoration:line-through;text-decoration-thickness:2px}
.psg-chk{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#0b0b0b;border:2px solid #2a2a2a;cursor:pointer;font-weight:700}
.psg-chk:has(input:checked){border-color:var(--acchi)}
.psg-chk input{width:22px;height:22px;accent-color:var(--acc);flex:none}
.psg-btns{display:flex;flex-wrap:wrap;gap:10px}
.psg-btns .cta:disabled{opacity:.4;cursor:not-allowed}
.psg-cancel{height:60px;padding:0 22px;border-radius:14px;border:2px solid var(--line2);background:transparent;color:var(--text);font-weight:800}
@media (prefers-reduced-motion:reduce){.psg{animation:none}}

/* Header: one row everywhere; Guide pinned to the far left */
.hb{gap:8px}
.hb .hb-ic{display:none;flex:none}
header.top .logo{flex:0 0 auto;margin-right:auto}
@media (max-width:860px){
  header.top .wrap{flex-wrap:nowrap;gap:8px;padding-block:12px}
  header.top .online,#hdrMeta{display:none!important}
  header.top .logo{font-size:15px;min-width:0;overflow:hidden;white-space:nowrap}
  .hb{width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%}
  .hb .hb-ic{display:block}
  .hb .hb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pill-btn.ghostlink.hb{border-color:var(--line2)}
  .gd-btn{width:44px;padding:0;justify-content:center;flex:none}
  .gd-btn .gd-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lang-btn{padding:0 8px 0 6px;flex:none}
  .lang-btn > span:not(.flag){display:none}
}
@media (max-width:860px){.lang-menu{left:auto!important;right:0!important}}
@media (max-width:380px){header.top .wrap{gap:6px}.hb,.gd-btn{width:40px;height:40px}.lang-btn{height:40px}header.top .logo{font-size:14px}}

/* Seller chat: icon-only button on every screen; Sections menu button at the far right */
.hb.hb-only{width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%}
.hb.hb-only .hb-ic{display:block}
.hb.hb-only .hb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gd-btn{order:99}

/* Sections menu button: icon only on every screen */
.gd-btn{width:44px;padding:0;justify-content:center}
.gd-btn .gd-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Help center button: white "?" in a platform-colour circle (option D) */
#hdrHelp .qd{display:inline-flex!important;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--accfg);font:800 13px/1 var(--f-display);flex:none;transition:background-color .3s}
#hdrHelp{gap:8px;padding-left:10px}
@media (max-width:860px){#hdrHelp .qd{width:26px;height:26px;font-size:15px}}

/* Header: fixed set of icons on every screen (no jumping), always one row */
header.top .wrap{flex-wrap:nowrap}
header.top .wrap > *{flex-shrink:0}
header.top .logo{flex-shrink:1}
#hdrMeta,header.top .online{white-space:nowrap}
@media (min-width:861px) and (max-width:1100px){
  #hdrHelp{width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%}
  #hdrHelp .hb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:861px) and (max-width:980px){#hdrMeta{display:none!important}}
@media (min-width:861px) and (max-width:1100px){#hdrHelp.pill-btn.ghostlink{border-color:var(--line2)}}
@media (max-width:440px){
  header.top .wrap{gap:6px!important}
  header.top .hb,header.top .gd-btn{width:40px!important;height:40px!important}
  header.top .lang-btn{height:40px;padding:0 6px 0 5px}
  header.top .lang-btn > .chev{display:none}
  header.top .lang-btn{width:40px;padding:0;justify-content:center}
  header.top .logo{font-size:14px!important;letter-spacing:-.01em}
}
@media (max-width:350px){header.top .logo{font-size:11.5px!important}header.top .wrap{gap:4px!important}header.top .hb,header.top .gd-btn,header.top .lang-btn{width:38px!important;height:38px!important}}

.gd-list[hidden],.gd-head [hidden]{display:none!important}
.gd-site .gd-sep{height:1px;background:var(--line2);margin:10px 14px}
#view > form,#view > section,#view > ol.track{scroll-margin-top:96px}

/* Several games in one order */
.og{display:flex;flex-direction:column;gap:12px}
.og-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.og-n{font:600 13px var(--f-mono);color:var(--muted)}
.og-note{margin:0;color:var(--t2);font-size:15px;max-width:68ch}
.og-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.og-g{width:100%;display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 16px;border-radius:18px;border:2px solid var(--line2);background:var(--s1);color:var(--text);text-align:left;font:inherit;position:relative;transition:border-color .2s,background .2s,transform .2s}
button.og-g{cursor:pointer}
button.og-g:hover{border-color:var(--acchi)}
button.og-g[aria-current="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,var(--s1));box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.og-i{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:var(--accfg);font:800 13px var(--f-mono)}
.og-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.og-c b{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-c small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden}
.og-lg{display:inline-flex;width:15px;height:15px;color:var(--acchi)}.og-lg svg{width:100%;height:100%}
.og-s{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.og-s i{font-style:normal}
.og-s.st-done{background:rgba(52,211,153,.14);color:#4ade80}
.og-s.st-now{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acchi)}
.og-s.st-now i,.og-s.st-prep i{animation:ogp 1.4s ease-in-out infinite}
.og-s.st-todo{background:#1c1c1c;color:#a3a3a3}
.og-s.st-prep{background:#1c1c1c;color:#e5e5e5}
@keyframes ogp{50%{opacity:.25}}
.og-lead{margin-top:-4px;font-weight:800;color:var(--text)}
.cc-for{margin:4px 0 0;font-size:14px;color:var(--t2)}.cc-for b{color:var(--text)}
.og-next{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:18px 20px;border-radius:22px;border:2px dashed color-mix(in srgb,var(--acc) 60%,var(--line2));background:color-mix(in srgb,var(--acc) 8%,var(--s1))}
.og-next > span{display:flex;flex-direction:column;gap:4px}
.og-next small{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.og-next b{font-size:18px}
.og-next .cta{width:auto;padding:0 24px}
.og-next.all{border-style:solid;border-color:rgba(74,222,128,.45);background:rgba(52,211,153,.07);justify-content:flex-start}
.og-next.all small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--t2);font-size:14px}
.og-ok{flex:none;width:44px;height:44px;border-radius:50%;background:#22c55e;color:#04140a;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px}
@media (max-width:640px){.og-s{height:26px;padding:0 8px;font-size:11px}.pl-ord.m{display:none}.platline{white-space:nowrap}.og-list{grid-template-columns:minmax(0,1fr)}.og-list > li{min-width:0}.og-g{min-height:68px;padding:10px 12px;gap:12px}.og-next .cta{width:100%}}
@media (prefers-reduced-motion:reduce){.og-s i{animation:none!important}}

/* "Don't see the game?" — open the store, else ask the operator to add it */
.ms{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:22px;background:var(--s1);border:1px solid rgba(255,255,255,.07)}
.ms-ic{flex:none;width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 20%,transparent);color:var(--acchi)}
.ms-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ms-h{margin:0;font-size:17px;font-weight:800}.ms-t{align-self:flex-start;margin-top:-4px;padding:3px 10px;border-radius:999px;background:var(--s2);font-size:13px;font-weight:800;color:var(--acchi)}
.ms-b > p{margin:0;color:var(--t2);font-size:15px;line-height:1.5}.ms-b > p b{color:var(--text)}.ms-b > p + p{margin-top:-6px}.ms-where{font-size:14px!important}.ms-where span:last-child{color:var(--text);font-family:var(--f-mono);font-size:13px}
.ms-btn{align-self:flex-start;height:44px}
.ms-st{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--s2);border:1px dashed var(--line2)}
.ms-st > b{color:var(--acchi)}.ms-st > span{color:var(--t2);font-size:14px}.ms-st .demo-btn{align-self:flex-start}
.ms-st.ok{flex-direction:row;align-items:flex-start;gap:10px;border-style:solid;border-color:rgba(74,222,128,.45);background:rgba(52,211,153,.07);color:#4ade80}
.ms-st.ok > span{display:flex;flex-direction:column;gap:2px}.ms-st.ok b{color:var(--text)}.ms-st.ok span span{color:var(--t2);font-size:14px}
@media (max-width:640px){.ms{padding:14px;gap:12px}.ms-ic{width:38px;height:38px}.ms-btn{width:100%}}

/* "Don't see the game?" — highlighted */
.ms{position:relative;overflow:hidden;border:2px solid var(--acc);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,var(--s1)) 0%,var(--s1) 70%);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent),0 18px 40px -20px color-mix(in srgb,var(--acc) 70%,transparent)}
.ms::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acchi)}
.ms-ic{width:52px;height:52px;border-radius:16px;background:var(--acc);color:var(--accfg);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 25%,transparent)}
.ms-ic svg{width:26px;height:26px}
.ms-h{font-family:var(--f-head,inherit);font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.ms-b > p{color:#d4d4d4}
.ms-btn{height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--acc);color:var(--accfg);font-weight:800;cursor:pointer}
.ms-btn:hover{background:var(--acchi);color:#0b0b0b}
@media (max-width:640px){.ms{flex-direction:column;gap:12px;padding:16px 16px 16px 20px}.ms-ic{width:44px;height:44px}.ms-h{font-size:17px}.ms-btn{height:auto;min-height:48px;padding:10px 18px;line-height:1.25}}

/* QR sign-in only as a fallback */
.qo{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:18px 20px;border-radius:22px;border:2px dashed var(--line2);background:var(--s1)}
.qo-t{flex:1 1 320px;min-width:0}
.qo-h{margin:0 0 4px;font-size:17px;font-weight:800}
.qo-t p{margin:0;color:var(--t2);font-size:15px}
.qo-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;border:2px solid var(--text);background:transparent;color:var(--text);font:800 15px var(--f-body);cursor:pointer;white-space:nowrap}
.qo-btn:hover{background:var(--text);color:var(--bg)}
.qr-head{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.qr-back{border:0;background:none;padding:6px 0;color:var(--acchi);font:700 14px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){.qo{padding:16px}.qo-btn{width:100%;justify-content:center}}

/* View transitions: no double-exposure. Old content fades out first, new fades in after it. */
::view-transition-old(*),::view-transition-new(*){mix-blend-mode:normal}
::view-transition-old(root),::view-transition-old(fx-hero),::view-transition-old(fx-chip),::view-transition-old(fx-chips),::view-transition-old(fx-track){animation:vtOut .12s ease-in both}
::view-transition-new(root),::view-transition-new(fx-hero),::view-transition-new(fx-chip),::view-transition-new(fx-chips),::view-transition-new(fx-track){animation:vtIn .26s cubic-bezier(.2,.7,.2,1) .12s both}
::view-transition-old(fx-header),::view-transition-new(fx-header){animation:none}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
/* Phones: blocks change height a lot, so don't morph them — the whole page just fades */
@media (max-width:640px){
  /* Phones: no size-morphing (looked crooked) — each part gets its own entrance instead */
  ::view-transition-group(fx-hero),::view-transition-group(fx-chip),::view-transition-group(fx-chips),::view-transition-group(fx-track){animation:none}
  ::view-transition-old(fx-hero),::view-transition-old(fx-chip),::view-transition-old(fx-chips),::view-transition-old(fx-track){display:none}
  ::view-transition-old(root){animation:mOut .16s ease-in both}
  ::view-transition-new(root){animation:mIn .42s cubic-bezier(.2,.8,.2,1) .14s both}
  ::view-transition-new(fx-chip),::view-transition-new(fx-chips){animation:mPop .46s cubic-bezier(.3,1.5,.5,1) .1s both;transform-origin:left center}
  ::view-transition-new(fx-hero){animation:mHero .55s cubic-bezier(.2,.8,.2,1) .16s both}
  ::view-transition-new(fx-track){animation:none}
}
@keyframes mOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes mIn{from{opacity:0;transform:translateY(22px)}}
@keyframes mPop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes mHero{from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes mSlide{from{opacity:0;transform:translateY(24px)}}
/* Tracker cards on phones: cascade in after a screen/platform change */
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  #view.anim-in .track li{animation:mCard .45s cubic-bezier(.2,.8,.2,1) .24s both}
  #view.anim-in .track li:nth-child(2){animation-delay:.32s}
  #view.anim-in .track li:nth-child(3){animation-delay:.40s}
  #view.anim-in .track li:nth-child(4){animation-delay:.48s}
  #view.anim-in .track li:nth-child(5){animation-delay:.56s}
  #view.anim-in .track li:nth-child(6){animation-delay:.64s}
  #view.anim-in > .panel,#view.anim-in > .cc,#view.anim-in > .og,#view.anim-in > .qo{animation:mIn .5s cubic-bezier(.2,.8,.2,1) .5s both}
}
@keyframes mCard{from{opacity:0;transform:translateY(18px) scale(.97)}}

/* Phones: slim section rail that never covers content */
@media (max-width:640px){
  .sn{right:max(4px,env(safe-area-inset-right,0px));gap:0;padding:3px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
  .sn-list{gap:1px}
  .sn a,.sn-top{width:26px!important;height:26px!important;font-size:10px!important}
  .sn-top{height:28px!important;font-size:13px!important}
  .sn .sn-l{right:calc(100% + 8px);padding:5px 10px;font-size:12px}
  #help{padding-right:20px}
}

/* Header never travels during view transitions: show the new header in place, no slide, no double image */
::view-transition-group(fx-header){animation:none!important}
::view-transition-old(fx-header){display:none}
::view-transition-new(fx-header){animation:none!important}

/* Never let anything widen the page sideways (on phones that resizes the viewport and cancels view transitions) */
html{overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
/* Header stays pinned at the top while scrolling — on every screen size */
@media (max-width:720px){header.top{position:sticky!important;top:env(safe-area-inset-top,0px)!important}}

/* "Can't connect? Try again in 5 minutes" */
.rt{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:22px;background:var(--s1);border:1px solid rgba(250,204,21,.35);background:linear-gradient(135deg,rgba(250,204,21,.09),var(--s1) 60%)}
.rt-ic{flex:none;width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(250,204,21,.16);color:#facc15}
.rt-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.rt-h{margin:0;font-size:17px;font-weight:800}
.rt-b > p{margin:0;color:var(--t2);font-size:15px;line-height:1.5}
.rt-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:46px;border-color:#facc15;color:#facc15}
.rt-btn:hover{background:#facc15;color:#0b0b0b}
.rt-run{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px 16px;border-radius:14px;background:var(--s2);overflow:hidden}
.rt-time{font:800 28px var(--f-mono);color:#facc15;letter-spacing:.02em;min-width:5ch}
.rt-txt{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}.rt-txt span{color:var(--t2);font-size:14px}
.rt-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#262626}.rt-bar i{display:block;height:100%;background:#facc15;transition:width 1s linear}
.rt-run.done{border:1px solid rgba(74,222,128,.45);background:rgba(52,211,153,.07);padding-bottom:12px}
.rt-ok{flex:none;width:36px;height:36px;border-radius:50%;background:#22c55e;color:#04140a;display:inline-flex;align-items:center;justify-content:center}
.rt-again{height:42px}
@media (max-width:640px){.rt{flex-direction:column;gap:12px;padding:16px}.rt-btn,.rt-again{width:100%;justify-content:center}}

.online .dot.off{background:#ef4444}
#orderForm .err{white-space:normal}
.vr .vc-err{display:block;color:#ff8a8a;font-size:13px;margin-top:4px}.vr .vc-cd{display:block;color:var(--muted);font:600 13px var(--f-mono);margin-top:4px}
/* Owner, 22.10.2026: 5-minute pause before the 3rd console code (from the customer artifact) */
.fail-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:12px;background:#1c0b0b;border:1.5px solid #ef4444;color:#f87171}
.fail-note svg{flex:none;margin-top:1px}.fail-note > span{display:flex;flex-direction:column;gap:2px}.fail-note b{color:#fff}.fail-note span span{color:#fecaca;font-size:14px}
/* 5-minute lock over the send-code window after the 2nd failed attempt */
.action.send{position:relative}
.action.send.locked > :not(.cl-ov){filter:blur(3px);opacity:.35;pointer-events:none;user-select:none}
.cl-ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;border-radius:inherit;background:rgba(10,10,10,.88);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:2px solid #facc15;animation:clIn .35s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.cl-ic{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(250,204,21,.16);color:#facc15}
.cl-time{font:800 clamp(44px,9vw,64px)/1 var(--f-mono);color:#facc15;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cl-h{font-size:18px;color:#fff}
.cl-p{margin:0;max-width:44ch;color:#d4d4d4;font-size:14px;line-height:1.5}
.cl-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:#262626}.cl-bar i{display:block;height:100%;background:#facc15;transition:width 1s linear}
@keyframes clIn{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.cl-ov{animation:none}}
@media (max-width:640px){.action.send.locked{min-height:360px}}
/* Nintendo: "needs the other console nearby" — clear fix with screenshots + button to the full guide */
.vgc{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:22px;border:2px solid #facc15;background:linear-gradient(135deg,rgba(250,204,21,.12),var(--s1) 55%);box-shadow:0 0 0 4px rgba(250,204,21,.1)}
.vgc-top{display:flex;gap:14px;align-items:flex-start}
.vgc-ic{flex:none;width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#facc15;color:#0b0b0b}
.vgc-h{margin:0 0 6px;font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.vgc-lead{margin:0;color:#e5e5e5;font-size:15px;line-height:1.5}.vgc-lead b{color:#facc15}
.vgc-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vgc-shots figure{margin:0;display:flex;flex-direction:column;gap:8px}
.vgc-img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000}
.vgc-img img{width:100%;height:100%;object-fit:cover;display:block}
.vgc-shots figcaption{font-size:13px;color:var(--t2)}.vgc-shots figcaption b{color:#facc15}
.vgc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vgc-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#e5e5e5}
.vgc-steps li > b{flex:none;width:24px;height:24px;border-radius:50%;background:#262626;color:#facc15;display:inline-flex;align-items:center;justify-content:center;font:800 12px var(--f-mono)}
.vgc-steps li span b{color:#facc15}
.vgc-btns{display:flex;flex-wrap:wrap;gap:10px}
.vgc-go{width:auto;padding:0 22px;background:#facc15!important;color:#0b0b0b!important}
.vgc-yt{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:640px){.vgc{padding:16px}.vgc-shots{grid-template-columns:minmax(0,1fr)}.vgc-go,.vgc-yt{width:100%;justify-content:center}.vgc-h{font-size:17px}}

/* Nintendo second-console help: collapsed by default, opens on request */
.vgc{gap:0!important;padding:0!important;border:1px solid rgba(250,204,21,.35)!important;background:var(--s1)!important;box-shadow:none!important;overflow:hidden}
.vgc[open]{border-color:#facc15!important;background:linear-gradient(135deg,rgba(250,204,21,.1),var(--s1) 55%)!important}
.vgc-sum{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;user-select:none}
.vgc-sum::-webkit-details-marker{display:none}
.vgc-sum:hover .vgc-chev{background:#facc15;color:#0b0b0b}
.vgc-sum:focus-visible{outline:2px solid #facc15;outline-offset:-2px;border-radius:20px}
.vgc .vgc-ic{width:40px;height:40px;border-radius:12px;background:rgba(250,204,21,.16);color:#facc15}
.vgc[open] .vgc-ic{background:#facc15;color:#0b0b0b}
.vgc-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vgc-st .vgc-h{margin:0;font-size:16px;text-transform:none;letter-spacing:0}
.vgc-hint{font-size:13px;color:#facc15}
.vgc-chev{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#262626;color:#facc15;font-size:14px;transition:transform .25s,background .2s}
.vgc[open] .vgc-chev{transform:rotate(180deg)}
.vgc-body{display:flex;flex-direction:column;gap:16px;padding:0 18px 18px}
.vgc[open] .vgc-body{animation:vgcIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes vgcIn{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.vgc[open] .vgc-body{animation:none}.vgc-chev{transition:none}}
@media (max-width:640px){.vgc-sum{padding:12px 14px;gap:12px}.vgc-body{padding:0 14px 14px}.vgc-st .vgc-h{font-size:15px}}

/* collapsed state: noticeable, not loud */
.vgc{position:relative;border:2px solid rgba(250,204,21,.75)!important;background:linear-gradient(90deg,rgba(250,204,21,.14),rgba(250,204,21,.04) 60%),var(--s1)!important;box-shadow:0 0 0 4px rgba(250,204,21,.08)!important}
.vgc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#facc15}
.vgc-sum{padding-left:22px}
.vgc .vgc-ic{background:#facc15!important;color:#0b0b0b!important}
.vgc-st .vgc-h{font-size:17px}
.vgc-more{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;border-radius:999px;background:#facc15;color:#0b0b0b;font-weight:800;font-size:14px}
.vgc-more .vgc-chev{width:26px;height:26px;background:#0b0b0b;color:#facc15}
.vgc-sum:hover .vgc-more{background:#fde047}
.vgc-sum:hover .vgc-chev{background:#0b0b0b;color:#facc15}
.vgc[open] .vgc-mt{display:none}
.vgc[open] .vgc-more{padding:0 6px}
.vgc-body{padding-left:22px}
@media (max-width:640px){.vgc-sum{padding-left:18px;flex-wrap:wrap}.vgc-st{flex:1 1 calc(100% - 60px)}.vgc-more{margin-left:54px}.vgc[open] .vgc-more{margin-left:auto}.vgc-body{padding-left:18px}}
/* PlayStation sign-in warning (owner, 22.10.2026): no focus square around the checkbox; keyboard focus shows on the
   whole rounded row instead, the dialog itself takes the initial focus without an outline. */
.psg-card:focus,.psg-card:focus-visible{outline:none}
.psg-chk input{margin:0}
.psg-chk input:focus,.psg-chk input:focus-visible{outline:none}
.psg-chk:has(input:focus-visible){outline:2px solid var(--text);outline-offset:3px}