:root{
  --void:#030304;--panel:rgba(8,8,10,.82);--line:#2c2c33;--steel:#8a8a93;--bone:#ecebe6;--soft:#c9c8c3;--red:#ff2d40;--redd:#7a0f1a;
  --mono:'Share Tech Mono',ui-monospace,Menlo,Consolas,monospace;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;background:var(--void);color:var(--bone);font:16px/1.5 var(--mono);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input{font:inherit;color:inherit}
a{color:var(--bone)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}

#globe{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:none;display:block}
#map{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .7s;background:#060607}
#map.on{opacity:1}
#map .maplibregl-ctrl-top-right{top:calc(var(--st) + 110px)}
#map .maplibregl-ctrl-attrib{background:rgba(3,3,4,.75);color:#8a8a93;font:11px var(--mono)}
#map .maplibregl-ctrl-attrib a{color:#8a8a93}
#map .maplibregl-ctrl-attrib-button{filter:invert(1)}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(0,0,0,.55))}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:calc(var(--st) + 10px) 12px 10px;pointer-events:none}
.bar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--bone);font-size:15px;letter-spacing:.04em;white-space:nowrap}
.brand b{font-weight:400;color:var(--red)}
.grow{flex:1}
.chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 4px;border:1px solid var(--line);border-radius:19px;background:var(--panel);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip b{font-weight:400;color:var(--red);font-size:15px}
.chip.bump b{animation:bump .6s}
@keyframes bump{30%{color:var(--bone);text-shadow:0 0 14px var(--red)}}
.av,.avbig{display:grid;place-items:center;flex:none;border-radius:50%;background:#1c1c22 center/cover no-repeat;color:var(--bone);overflow:hidden}
.av{width:28px;height:28px;font-size:13px}
.ibtn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--panel);cursor:pointer;color:var(--bone);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ibtn .x{display:none}
.ibtn[aria-pressed=false] .x{display:block}.ibtn[aria-pressed=false] .w1{display:none}.ibtn[aria-pressed=false]{color:var(--steel)}
@media (max-width:400px){.brand span{display:none!important}}

.hud{position:fixed;left:0;right:0;top:calc(var(--st) + 58px);z-index:2;display:flex;justify-content:space-between;padding:0 14px;font-size:12px;color:var(--steel);pointer-events:none;transition:opacity .3s}
.h-st{color:var(--red);letter-spacing:.1em;text-transform:uppercase}
.h-st.lk{color:var(--bone);text-shadow:0 0 10px var(--red)}
.h-r{display:flex;flex-direction:column;align-items:flex-end}
#h-lt{color:var(--bone)}

/* ---------- dock ---------- */
.dock{position:fixed;z-index:4;left:12px;right:12px;bottom:calc(var(--sb) + 34px);max-width:460px;margin:0 auto;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.dock.away{transform:translateY(calc(100% + 60px));opacity:0;pointer-events:none}
.dst{animation:pop .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.intro{margin:0 0 12px;color:var(--soft);font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 16px;border:1px solid var(--red);border-radius:4px;background:rgba(255,45,64,.1);color:var(--red);font:16px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .1s,background .2s,box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--red);color:var(--void)}
.btn.pri:hover{box-shadow:0 0 26px rgba(255,45,64,.5)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn.wide{display:flex;width:100%}
.btn.sm{min-height:44px;font-size:13px;padding:8px 6px;letter-spacing:.04em;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:default}
#addbtn{min-height:56px;font-size:17px;box-shadow:0 0 0 rgba(255,45,64,0);animation:glow 2.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 24px rgba(255,45,64,.45)}}
#addbtn.over{background:var(--bone)}
.sub{display:flex;justify-content:space-between;gap:10px;margin-top:8px;min-height:22px}
.sub .lnk:only-child,.sub #demo{margin-left:auto}
.lnk{background:none;border:0;padding:2px 0;color:var(--steel);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--bone)}
.ev{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.evt{position:relative;width:64px;height:64px;flex:none;border:1px solid var(--red);border-radius:4px;overflow:hidden;background:#000}
.evt img,.evt video{width:100%;height:100%;object-fit:cover;display:block}
.evt img[hidden],.evt video[hidden]{display:none}
.evi{flex:1;min-width:0}
.evi b{display:block;font-weight:400;color:var(--red);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.evi span{display:block;font-size:14px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbtn{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;background:none;color:var(--steel);font-size:20px;line-height:1;cursor:pointer}
input[type=text]{display:block;width:100%;margin:0 0 10px;padding:12px 13px;border:1px solid var(--line);border-radius:4px;background:rgba(3,3,4,.7);font-size:16px}
input::placeholder{color:#6d6d75}
.gsi-row{display:flex;justify-content:center;min-height:44px}
.gsi{min-height:44px}

.trim{margin:0 0 10px}
.tl{position:relative;height:46px;border-radius:4px;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.tthumbs{display:flex;height:100%}
.tthumbs img{flex:1;min-width:0;height:100%;object-fit:cover;filter:grayscale(.3)}
.tshade{position:absolute;top:0;bottom:0;background:rgba(3,3,4,.72);pointer-events:none}
.tshade.l{left:0}.tshade.r{right:0}
.win{position:absolute;top:0;bottom:0;border:2px solid var(--red);border-radius:4px;box-shadow:0 0 14px rgba(255,45,64,.5);cursor:grab}
.hd{position:absolute;top:-2px;bottom:-2px;width:20px;background:var(--red);cursor:ew-resize;display:grid;place-items:center}
.hd::after{content:"";width:2px;height:14px;background:var(--void)}
.hd.l{left:-10px;border-radius:4px 0 0 4px}.hd.r{right:-10px;border-radius:0 4px 4px 0}
.phd{position:absolute;top:0;bottom:0;width:2px;background:var(--bone);pointer-events:none}
.trow{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;color:var(--soft)}
.trow b{font-weight:400;color:var(--red)}

.runline{margin:2px 0 10px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runline::before{content:"> ";color:var(--red)}
.runline::after{content:"_";color:var(--red);animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.prog{height:3px;background:var(--line);overflow:hidden;border-radius:2px}
.prog i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 10px var(--red);transition:width .6s}

.rh{display:flex;align-items:flex-start;gap:10px}
.place{flex:1;margin:0;font:400 clamp(24px,7vw,30px)/1.12 var(--mono);word-break:break-word}
.stamp{flex:none;margin-top:4px;padding:4px 8px 3px;border:2px solid var(--red);border-radius:3px;color:var(--red);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-8deg)}
.stamp.in{animation:stamp .42s cubic-bezier(.3,1.7,.5,1) both}
@keyframes stamp{0%{transform:rotate(-8deg) scale(3);opacity:0}60%{opacity:1}100%{transform:rotate(-8deg) scale(1)}}
.rm{display:flex;align-items:center;gap:10px;margin:8px 0 12px;font-size:13px;color:var(--steel)}
.sig{display:flex;gap:3px;flex:none}
.sig i{width:14px;height:6px;background:var(--line)}
.sig i.on{background:var(--red);box-shadow:0 0 8px rgba(255,45,64,.6);animation:sigon .3s both}
@keyframes sigon{from{opacity:0;transform:scaleY(.2)}}
.ra{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.rb{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.tagd{display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid var(--red);color:var(--red);font-size:11px;letter-spacing:.1em}

.foot{position:fixed;z-index:4;left:0;right:0;bottom:calc(var(--sb) + 8px);display:flex;justify-content:center;gap:16px;font-size:12px;color:var(--steel);transition:opacity .3s}
.foot a{color:var(--steel);text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot .tt{display:flex;align-items:center;gap:5px;color:var(--soft)}
.foot.away{opacity:0;pointer-events:none}

/* ---------- drawer ---------- */
.drawer{position:fixed;z-index:7;left:0;right:0;bottom:0;max-height:56vh;display:flex;flex-direction:column;border-top:1px solid var(--red);border-radius:14px 14px 0 0;background:rgba(6,6,8,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -14px 50px rgba(0,0,0,.6);transform:translateY(0);transition:transform .38s cubic-bezier(.2,.85,.2,1)}
.drawer.closing{transform:translateY(105%)}
.drawer.opening{animation:dup .42s cubic-bezier(.2,.85,.2,1)}
@keyframes dup{from{transform:translateY(100%)}}
.dhead{position:relative;display:flex;align-items:center;gap:10px;padding:16px 16px 10px;touch-action:none;cursor:grab}
.grab{position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#3a3a42}
.dhead h2{flex:1;margin:0;font:400 15px/1 var(--mono);color:var(--red);letter-spacing:.14em;text-transform:uppercase}
.dbody{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 16px calc(var(--sb) + 20px);scroll-behavior:smooth}
.dbody section{animation:pop .35s ease-out}
.dbody h3{margin:18px 0 8px;font:400 13px/1 var(--mono);color:var(--red);letter-spacing:.14em;text-transform:uppercase}
.lead{margin:0 0 12px;font-size:16px;color:var(--soft)}
.lead b{font-weight:400;color:var(--red)}
.note{margin:6px 0 0;font-size:13px;color:var(--steel)}
.fine{margin:16px 0 0;font-size:13px}
.fine a{color:var(--steel);margin-right:14px}
.mlist button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.mlist b{font-weight:400;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.mlist span{font-size:13px;color:var(--steel)}
.mlist button:active b{color:var(--red)}
.ttbig{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:linear-gradient(90deg,rgba(255,45,64,.12),transparent)}
.ttbig b{display:block;font-weight:400}
.ttbig span{font-size:13px;color:var(--soft)}
.who{display:flex;align-items:center;gap:12px}
.avbig{width:52px;height:52px;font-size:22px;border:1px solid var(--red)}
.who b{display:block;font-weight:400;font-size:18px}
.who span span{display:block;font-size:13px;color:var(--steel)}
.crbig{display:flex;align-items:baseline;gap:8px;margin:14px 0 10px}
.crbig b{font-weight:400;font-size:44px;line-height:1;color:var(--red);text-shadow:0 0 22px rgba(255,45,64,.4)}
.crbig span{color:var(--steel)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stats div{padding:10px;background:#0a0a0d}
.stats b{display:block;font-weight:400;font-size:18px}
.stats span{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.packs{display:grid;gap:8px;margin-top:10px}
.pk{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px;border:1px solid var(--line);border-radius:6px;background:#0a0a0d;text-align:left;cursor:pointer;transition:border-color .2s,transform .1s}
.pk:active{transform:scale(.98)}
.pk.best{border-color:var(--red);box-shadow:0 0 22px rgba(255,45,64,.15)}
.pk b{display:block;font-weight:400;font-size:17px}
.pk small{display:block;font-size:12px;color:var(--steel)}
.pk .pp{font-size:20px;color:var(--red)}
.sw{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sw input{appearance:none;-webkit-appearance:none;position:relative;width:46px;height:26px;margin:0;border:1px solid var(--line);border-radius:13px;background:#141418;cursor:pointer;transition:background .2s}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--steel);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .2s}
.sw input:checked{background:var(--redd);border-color:var(--red)}
.sw input:checked::after{transform:translateX(20px);background:var(--red)}
#so{margin-top:16px}
.rank{padding:12px;border:1px solid var(--line);border-radius:6px;background:#0a0a0d;margin-bottom:10px}
.rank b{display:block;font-weight:400;font-size:20px;color:var(--red)}
.rank span{font-size:13px;color:var(--steel)}
.rbar{height:4px;margin-top:8px;background:var(--line);border-radius:2px;overflow:hidden}
.rbar i{display:block;height:100%;background:var(--red)}
.case{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 6px;padding:8px;border:1px solid var(--line);border-radius:6px;background:#0a0a0d;text-align:left;cursor:pointer}
.case:active{border-color:var(--red)}
.case img,.case .ni{width:46px;height:46px;flex:none;object-fit:cover;border-radius:3px;background:#000;filter:grayscale(.4)}
.case .cn{flex:1;min-width:0}
.case .cn b{display:block;font-weight:400;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case .cn span{display:block;font-size:12px;color:var(--steel)}
.case .cid{font-size:12px;color:var(--red)}
.empty{padding:18px;border:1px dashed var(--line);border-radius:6px;color:var(--steel);text-align:center}
.steps{margin:0 0 10px;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--line);color:var(--soft);font-size:15px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:8px;font-size:22px;color:var(--red)}
.steps b{display:block;font-weight:400;color:var(--bone)}
details{border-bottom:1px solid var(--line)}
summary{padding:12px 24px 12px 0;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:2px;top:10px;color:var(--red);font-size:18px}
details[open] summary::after{content:"\2212"}
details p{margin:0 0 12px;color:var(--soft);font-size:14px}
/* details panel */
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:14px}
.kv dt{color:var(--steel);font-size:12px;padding-top:2px}
.kv dd{margin:0}
.cl{margin:0;padding:0;list-style:none}
.cl li{position:relative;padding:6px 0 6px 18px;border-bottom:1px solid rgba(44,44,51,.6);font-size:14px}
.cl li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border:1px solid var(--red)}
ol.cl{counter-reset:r}
ol.cl li::before{counter-increment:r;content:counter(r);border:0;width:auto;height:auto;top:6px;left:0;color:var(--red);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:4px 8px;border:1px solid var(--line);border-radius:3px;font-size:13px;background:#0a0a0d}
.leads li button{margin-left:8px;background:none;border:0;padding:0;color:var(--red);font-size:13px;text-decoration:underline;cursor:pointer}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.strip div{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#000}
.strip img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.45)}
.strip span{position:absolute;left:3px;top:0;font-size:10px;text-shadow:0 0 3px #000}
.strip div.key{border-color:var(--red);box-shadow:0 0 12px rgba(255,45,64,.6)}
.strip div.key img{filter:none}
.gpsbox{padding:10px 12px;border:1px solid var(--red);border-radius:4px;background:rgba(255,45,64,.07);font-size:14px}
.gpsbox b{display:block;font-weight:400;color:var(--red);font-size:13px}
.fbb{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fbb button{padding:10px 4px;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer;font-size:14px}
.fbb button[aria-pressed=true]{border-color:var(--red);color:var(--red);background:rgba(255,45,64,.08)}
.cp{margin-top:12px}
.svgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.svgrid a{display:grid;place-items:center;min-height:52px;padding:6px;border:1px solid var(--line);border-radius:4px;font-size:12px;text-align:center;text-decoration:none;line-height:1.25}
.svgrid a.c{border-color:var(--red);color:var(--red)}

.toast{position:fixed;left:50%;top:calc(var(--st) + 60px);z-index:9;transform:translate(-50%,-14px);max-width:calc(100% - 28px);padding:10px 16px;border:1px solid var(--red);border-radius:4px;background:rgba(3,3,4,.95);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* wide screens: dock bottom-left, drawer on the right, globe stays centred between */
@media (min-width:900px){
  .dock{left:24px;right:auto;bottom:44px;width:420px;margin:0}
  .foot{left:24px;right:auto;justify-content:flex-start;bottom:14px;width:420px}
  .drawer{left:auto;right:20px;top:calc(var(--st) + 70px);bottom:20px;width:400px;max-height:none;border:1px solid var(--red);border-radius:10px}
  .drawer.closing{transform:translateX(110%)}
  @keyframes dup{from{transform:translateX(100%)}}
  .grab{display:none}
}
@media (prefers-reduced-motion:reduce){.dst,.dbody section,.stamp.in,.sig i.on,.drawer.opening,#addbtn{animation:none}}
.bankbox{margin:12px 0 0;padding:14px;border:1px solid var(--red);border-radius:4px;background:rgba(255,45,64,.05)}
.bankbox .bh{margin:0 0 10px;color:var(--bone)}
.brow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.brow span{display:flex;flex-direction:column;min-width:0}
.brow small{color:var(--steel);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.brow b{font-weight:400;overflow-wrap:anywhere}
.brow.key b{color:var(--red);font-size:20px;letter-spacing:.14em}
.brow .lnk{flex:none;min-height:44px}
.bankbox .btn{margin:12px 0 4px}
.bankbox .bt{margin-top:8px}
.bankbox>.lnk{display:block;min-height:44px}

/* ---------- extra atmosphere: radar sweep, screen brackets, glitchy logo, shiny buttons ---------- */
.sweep{position:fixed;z-index:1;pointer-events:none;left:50%;top:40%;width:min(118vw,118vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,45,64,0) 0deg,rgba(255,45,64,0) 300deg,rgba(255,45,64,.07) 345deg,rgba(255,45,64,.28) 359.5deg,rgba(255,45,64,0) 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 48%,transparent 70%);mask:radial-gradient(circle,#000 0 48%,transparent 70%);
  animation:sweep 6s linear infinite;transition:opacity .6s;mix-blend-mode:screen}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
body[data-st=run] .sweep{animation-duration:1.6s}
body[data-st=res] .sweep{opacity:0}
@media (min-width:900px){.sweep{left:58%;top:50%}}
.frame{position:fixed;inset:calc(var(--st) + 54px) 10px calc(var(--sb) + 10px);z-index:1;pointer-events:none}
.frame i{position:absolute;width:22px;height:22px;border:0 solid rgba(255,45,64,.55)}
.frame i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.frame i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.frame i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.frame i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.rec{position:absolute;right:30px;top:-3px;font-size:10px;letter-spacing:.2em;color:var(--red);display:flex;align-items:center;gap:5px}
.rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:bl 1.2s steps(1) infinite}
body[data-st=res] .frame{opacity:.5}
/* scanlines drift slowly, plus a bright line that rolls down the screen now and then */
.scan{animation:drift 9s linear infinite}
@keyframes drift{to{background-position:0 90px}}
.scan::after{content:"";position:absolute;left:0;right:0;top:-10%;height:90px;background:linear-gradient(transparent,rgba(255,45,64,.06) 70%,rgba(255,255,255,.08) 98%,transparent);animation:roll 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes roll{0%{transform:translateY(0)}60%,100%{transform:translateY(120vh)}}
/* logo glitches every few seconds */
.brand span{position:relative;display:inline-block}
.brand span::before,.brand span::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;opacity:0}
.brand span::before{color:#00e5ff;animation:gl1 5s steps(1) infinite}
.brand span::after{color:var(--red);animation:gl2 5s steps(1) infinite}
@keyframes gl1{0%,93%,100%{opacity:0;transform:none;clip-path:none}94%{opacity:.8;transform:translate(-2px,0);clip-path:inset(10% 0 55% 0)}96%{opacity:.8;transform:translate(2px,0);clip-path:inset(60% 0 5% 0)}}
@keyframes gl2{0%,93%,100%{opacity:0;transform:none;clip-path:none}95%{opacity:.8;transform:translate(2px,-1px);clip-path:inset(40% 0 30% 0)}97%{opacity:.8;transform:translate(-2px,1px);clip-path:inset(5% 0 75% 0)}}
.brand svg{filter:drop-shadow(0 0 6px rgba(255,45,64,.6))}
/* dock gets HUD corner brackets and a red top edge */
.dock::before,.dock::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:0 solid var(--red)}
.dock::before{left:-1px;top:-1px;border-width:2px 0 0 2px;border-radius:8px 0 0 0}
.dock::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0;border-radius:0 0 8px 0}
.dock{background:linear-gradient(180deg,rgba(255,45,64,.07),transparent 40%),var(--panel)}
/* main buttons: a light sweeps across them */
.btn.pri{position:relative;overflow:hidden;text-shadow:none}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
/* the pay button: bigger, pulsing */
.paybtn{min-height:60px;font-size:22px;letter-spacing:.2em;animation:glow 1.8s ease-in-out infinite}
.paybtn span{position:relative;z-index:1}
.pk:hover{border-color:var(--red)}
.pk .pp{text-shadow:0 0 12px rgba(255,45,64,.45)}
@media (prefers-reduced-motion:reduce){.sweep,.scan,.scan::after,.brand span::before,.brand span::after,.btn.pri::after,.paybtn,.rec::before{animation:none}.sweep{display:none}}

/* ---------- reviews ---------- */
.rvsum{display:flex;align-items:center;gap:12px;margin:4px 0 6px}
.rvsum b{font-weight:400;font-size:44px;line-height:1;color:var(--red);text-shadow:0 0 22px rgba(255,45,64,.4)}
.rvsum span{font-size:13px;color:var(--steel)}
.rvsum .st{display:block;font-size:18px;color:var(--red);letter-spacing:.1em}
.stars{display:flex;gap:4px;margin:0 0 10px}
.stars button{width:48px;height:48px;border:0;background:none;padding:0;cursor:pointer;color:var(--line);font-size:36px;line-height:1;transition:transform .1s,color .15s}
.stars button.on{color:var(--red);text-shadow:0 0 12px rgba(255,45,64,.5)}
.stars button:active{transform:scale(.88)}
textarea{display:block;width:100%;margin:0 0 10px;padding:12px 13px;border:1px solid var(--line);border-radius:4px;background:rgba(3,3,4,.7);color:var(--bone);font:16px/1.4 var(--mono);resize:vertical}
.rv{padding:12px 0;border-bottom:1px solid var(--line)}
.rvh{display:flex;align-items:center;gap:10px;font-size:14px}
.rvh .av{width:28px;height:28px;font-size:13px}
.rvh small{margin-left:auto;color:var(--steel);font-size:12px}
.rvs{color:var(--red);letter-spacing:.08em}
.rv p{margin:6px 0 0;font-size:14px;color:var(--soft);word-break:break-word}
.rvcta{display:block;width:100%;margin:12px 0 0;text-align:left}

/* ===================== upgrade: livelier chrome, clearer credits ===================== */
/* a red light that runs along the top edge of the dock */
.dock{background:linear-gradient(90deg,transparent,rgba(255,45,64,.9),transparent) -60% 0/45% 1px no-repeat,linear-gradient(180deg,rgba(255,45,64,.08),transparent 45%),var(--panel);animation:edge 4.5s linear infinite;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,45,64,.06),0 0 40px rgba(255,45,64,.07)}
@keyframes edge{to{background-position:160% 0,0 0,0 0}}
/* primary buttons get a moving shine */
.btn.pri{position:relative;overflow:hidden;background:linear-gradient(180deg,#ff4657,#e81f33);text-shadow:none;box-shadow:0 6px 22px rgba(255,45,64,.28),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
.btn.pri:disabled::after{display:none}
/* credits chip: a + to show you can top up; pulses when you're out */
.chip .plus{display:grid;place-items:center;width:18px;height:18px;margin-left:2px;border-radius:50%;background:var(--red);color:var(--void);font-style:normal;font-size:14px;line-height:1}
.chip.low{border-color:var(--red);animation:lowp 1.8s ease-in-out infinite}
@keyframes lowp{50%{box-shadow:0 0 0 4px rgba(255,45,64,.18),0 0 22px rgba(255,45,64,.35)}}
/* proof line above the intro */
.proof{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:-2px 0 10px;font-size:13px;color:var(--steel)}
.proof .pt{display:flex;align-items:center;gap:7px}
.proof .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}
.proof .pr{background:none;border:0;padding:0;color:var(--steel);cursor:pointer;font-size:13px}
.proof .pr b{font-weight:400;color:#ffcc33}
/* out of credits card */
.topup{margin:0 0 10px;padding:12px;border:1px dashed var(--red);border-radius:6px;background:rgba(255,45,64,.06)}
.topup p{margin:0 0 10px;font-size:14px;color:var(--soft)}
.topup:not([hidden])+#addbtn{animation:none;background:transparent;color:var(--red);box-shadow:none}
.topup:not([hidden])+#addbtn::after{display:none}
/* credits left after a trace */
.left{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0;font-size:13px;color:var(--steel)}
.lnk.hot{color:var(--red);font-size:13px}
/* credit packs */
.packs{gap:12px}
.pk{position:relative;padding:16px 14px;border-radius:10px;background:linear-gradient(180deg,#101014,#0a0a0d);overflow:visible}
.pk .pl{flex:1;min-width:0}
.pk b{font-size:19px}
.pk .pr2{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.pk .pr2 small{color:var(--steel)}
.pk .pp{font-size:22px}
.pk .tag{position:absolute;top:-10px;left:12px;padding:2px 8px;border-radius:4px;background:var(--bone);color:var(--void);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pk.best{border-color:var(--red);background:linear-gradient(180deg,rgba(255,45,64,.14),#0a0a0d 70%)}
.pk.best .tag{background:var(--red);color:var(--void)}
.pk.top{border-color:#ffcc33;box-shadow:0 0 26px rgba(255,204,51,.12)}
.pk.top .tag{background:#ffcc33}
.pk.top .pp{color:#ffcc33;text-shadow:0 0 12px rgba(255,204,51,.4)}
.trust{margin:10px 0 0;font-size:12px;color:var(--steel);line-height:1.5}
/* drawer header gets a glowing red rule */
.dhead::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
@media (prefers-reduced-motion:reduce){.dock,.btn.pri::after,.chip.low,.proof .dot{animation:none}}

/* ===================== game layer: guesses, challenges, agent file, invites ===================== */
.gq{margin:10px 0 0;padding:9px 11px;border:1px dashed rgba(255,204,51,.6);border-radius:6px;font-size:13px;line-height:1.45;color:var(--soft);background:rgba(255,204,51,.05)}
.gq b{font-weight:400;color:#ffcc33}
.kick{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ffcc33}
.kick::before{content:"● ";animation:blink 1.4s steps(1) infinite}
#ch-go:disabled{opacity:.55}
.duel #r-dv{white-space:nowrap}
.duel{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;border:1px solid rgba(255,204,51,.45);border-radius:6px;background:rgba(255,204,51,.06);font-size:13px;color:#ffcc33}
.cta{margin-top:10px}
/* floating XP, confetti and badge banners */
.fx{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.xpf{position:absolute;transform:translate(-50%,0);font:20px var(--mono);color:#ffcc33;text-shadow:0 0 12px rgba(255,204,51,.7);animation:xpf 1.8s ease-out forwards;white-space:nowrap}
@keyframes xpf{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}30%{transform:translate(-50%,-6px) scale(1)}100%{opacity:0;transform:translate(-50%,-80px)}}
.cf{position:absolute;width:9px;height:6px;border-radius:1px;animation:cf 1.3s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes cf{to{transform:translate(var(--dx),calc(var(--dy) + 420px)) rotate(var(--r));opacity:0}}
.bnr{position:absolute;left:50%;top:calc(var(--st) + 118px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(92vw,400px);padding:12px 14px;border:1px solid #ffcc33;border-radius:10px;background:rgba(10,9,6,.94);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 30px rgba(255,204,51,.18);animation:bnr .5s cubic-bezier(.2,.9,.3,1.25)}
.bnr.out{animation:bnrout .4s forwards}
@keyframes bnr{from{opacity:0;transform:translate(-50%,-30px) scale(.9)}}
@keyframes bnrout{to{opacity:0;transform:translate(-50%,-20px)}}
.bnr .bi{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#ffcc33;color:#030304;font-size:22px}
.bnr b{display:block;font-weight:400;color:#ffcc33;font-size:15px}
.bnr small{display:block;color:var(--soft);font-size:12px}
/* agent file */
.lvl{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.lring{--p:0;position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p) * 1%),#1d1d23 0)}
.lring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#0a0a0d}
.lring b,.lring span{position:relative}
.lring b{font-weight:400;font-size:34px;line-height:1;color:var(--bone);margin-top:6px}
.lring span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:-18px}
.lmeta{flex:1;min-width:0}
.lmeta b{display:block;font-weight:400;font-size:20px;color:var(--red)}
.lmeta>span{display:block;font-size:13px;color:var(--steel)}
.lmeta .rbar{margin:6px 0 4px}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bdg{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border:1px solid var(--line);border-radius:8px;background:#0a0a0d;text-align:center;opacity:.45;filter:grayscale(1)}
.bdg i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);font-style:normal;font-size:18px;color:var(--steel)}
.bdg b{font-weight:400;font-size:12px;line-height:1.2}
.bdg span{font-size:10px;line-height:1.3;color:var(--steel)}
.bdg.got{opacity:1;filter:none;border-color:rgba(255,204,51,.5);background:linear-gradient(180deg,rgba(255,204,51,.08),#0a0a0d)}
.bdg.got i{background:#ffcc33;border-color:#ffcc33;color:#030304;box-shadow:0 0 16px rgba(255,204,51,.35)}
/* invites and share sheet */
.invbox{margin:4px 0 10px;padding:12px;border:1px dashed var(--red);border-radius:6px;background:rgba(255,45,64,.06);font-size:14px;word-break:break-all;color:var(--bone)}
.sharebig{display:block;width:100%;margin:0 0 10px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#0a0a0d;text-align:left;cursor:pointer}
.sharebig:first-child{border-color:#ffcc33;background:linear-gradient(180deg,rgba(255,204,51,.08),#0a0a0d)}
.sharebig b{display:block;font-weight:400;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--bone)}
.sharebig span{display:block;margin-top:4px;font-size:13px;color:var(--steel)}
/* first pack bonus */
.fbanner{padding:10px 12px;border-radius:8px;background:linear-gradient(90deg,rgba(255,204,51,.16),rgba(255,45,64,.12));border:1px solid rgba(255,204,51,.5)}
.fbanner b{display:block;font-weight:400;color:#ffcc33}
.fbanner span{font-size:12px;color:var(--soft)}
.pk .fbon{display:block;margin-top:2px;font-style:normal;font-size:12px;color:#ffcc33}
@media (prefers-reduced-motion:reduce){.xpf,.cf,.bnr,.kick::before{animation:none}}

/* ===================== payments: the "did you pay?" check, steps, and a big clear I've paid ===================== */
.paychk{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:calc(var(--st) + 16px) 16px calc(var(--sb) + 16px);background:rgba(2,2,3,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.paychk.on{animation:pcfade .25s ease-out}
.paychk.off{opacity:0;transition:opacity .25s}
@keyframes pcfade{from{opacity:0}}
.pcard{position:relative;width:min(100%,400px);padding:26px 20px 18px;border:1px solid rgba(61,220,132,.55);border-radius:18px;background:radial-gradient(120% 70% at 50% 0,rgba(61,220,132,.13),transparent 60%),linear-gradient(180deg,#0f1012,#08080a);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset,0 0 60px rgba(61,220,132,.12);text-align:center}
.paychk.on .pcard{animation:pcpop .42s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pcpop{from{opacity:0;transform:translateY(24px) scale(.94)}}
.pcx{position:absolute;right:12px;top:12px;width:40px;height:40px;font-size:24px;color:var(--bone);background:rgba(255,255,255,.04)}
.pcico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;color:#3ddc84;background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.45);box-shadow:0 0 30px rgba(61,220,132,.2)}
.pcico.ok{background:#3ddc84;color:#04140b;animation:pcok .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pcok{from{transform:scale(.3);opacity:0}}
.pck{margin:0 0 2px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.pch{margin:0 0 8px;font:400 clamp(26px,7.4vw,32px)/1.1 var(--mono);color:var(--bone)}
.pct{margin:0 auto 18px;max-width:320px;font-size:15px;line-height:1.5;color:var(--soft)}
.pct b{font-weight:400;color:var(--red);letter-spacing:.1em;white-space:nowrap}
.pcyes{min-height:66px;border:0;border-radius:12px;background:linear-gradient(180deg,#4ff29a,#2bc46f);color:#04140b;font-size:20px;letter-spacing:.06em;box-shadow:0 10px 30px rgba(61,220,132,.35),inset 0 1px 0 rgba(255,255,255,.4);animation:pcglow 2s ease-in-out infinite}
.pcyes:hover{box-shadow:0 10px 40px rgba(61,220,132,.55),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes pcglow{50%{box-shadow:0 10px 44px rgba(61,220,132,.6),inset 0 1px 0 rgba(255,255,255,.4)}}
.pcno{margin-top:10px;min-height:54px;border-radius:12px;font-size:16px}
.pcl{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.pcl .lnk{min-height:32px;display:inline-flex;align-items:center}
#pc-done .pct{margin-bottom:18px}
#pc-ok{border-radius:12px}
/* steps inside the payment box */
.paysteps{margin:2px 0 4px;padding:0;list-style:none;counter-reset:ps;display:grid;gap:6px}
.paysteps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.paysteps li::before{counter-increment:ps;content:counter(ps);display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--red);color:var(--red);font-size:13px}
.paysteps li:last-child::before{border-color:#3ddc84;color:#3ddc84}
/* the I've paid button: big, green, impossible to miss */
.bankbox .paidbtn{min-height:58px;margin-top:14px;border:2px solid #3ddc84;border-radius:8px;background:rgba(61,220,132,.12);color:#3ddc84;font-size:18px;letter-spacing:.08em}
.paidbtn:not(:disabled):hover{background:#3ddc84;color:#04140b}
.paidbtn.wait{opacity:1;border-style:dashed;font-size:14px}
.spin{display:inline-block;flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.paywait{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:9px 11px;border:1px solid rgba(61,220,132,.45);border-radius:8px;background:rgba(61,220,132,.07);font-size:13px;line-height:1.4;color:#9df2c3}
.paywait .spin{color:#3ddc84}
@media (prefers-reduced-motion:reduce){.paychk.on,.paychk.on .pcard,.pcico.ok,.pcyes,.spin{animation:none}}
.paychk :focus-visible{outline-color:rgba(255,255,255,.85)}

/* the radar sweep is drawn on the globe itself now */
.sweep{display:none}

/* ===================== polish: headline, feature chips, softer corners, live clock ===================== */
.hero{margin:0 0 12px}
.hero b{display:block;font-weight:400;font-size:clamp(21px,6vw,24px);line-height:1.15;color:var(--bone);letter-spacing:.01em}
.hero em{font-style:normal;color:var(--red);text-shadow:0 0 18px rgba(255,45,64,.55)}
.hero span{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--steel)}
.intro:empty{display:none}
.proof{gap:4px 12px;font-size:12px}
.proof .pr{font-size:12px}
.feats{display:flex;justify-content:space-between;gap:6px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(44,44,51,.8);list-style:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.feats li{display:flex;align-items:center;gap:5px;white-space:nowrap}
.feats i{font-style:normal;color:var(--red);font-size:12px}
@media (max-width:360px){.feats{font-size:10px;letter-spacing:.02em}}
/* softer, more modern corners */
.dock{border-radius:14px;padding:16px}
.dock::before{border-radius:14px 0 0 0}.dock::after{border-radius:0 0 14px 0}
.btn{border-radius:9px}
.btn.sm{border-radius:8px}
.chip,.ibtn{box-shadow:0 4px 16px rgba(0,0,0,.35)}
input[type=text],textarea{border-radius:9px}
.topup{border-radius:10px}
.evt{border-radius:8px}
.bankbox{border-radius:12px}
.drawer{border-radius:18px 18px 0 0}
@media (min-width:900px){.drawer{border-radius:16px}}
.toast{border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.case,.rank,.stats,.sharebig,.invbox,.fbanner,.bdg{border-radius:10px}
/* the screen frame's REC tag doubles as a live UTC clock */
.rec b{font-weight:400;color:var(--steel);letter-spacing:.12em;margin-left:4px}
@media (max-width:600px){.hero span{display:none}.hero{margin-bottom:12px}}
.feats{font-size:10.5px}

/* ===================== v3: roomier, globe-first, satisfying ===================== */
/* the dock never grows over the top bar; if it ever has to, it scrolls inside */
.dock{padding:18px 18px 16px;max-height:calc(100vh - var(--st) - var(--sb) - 112px);max-height:calc(100dvh - var(--st) - var(--sb) - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.hero{margin:2px 0 16px;font:400 clamp(21px,6.2vw,25px)/1.18 var(--mono);color:var(--bone);letter-spacing:.01em}
.hero em{font-style:normal;color:var(--red);text-shadow:0 0 18px rgba(255,45,64,.55)}
.proof{margin:0 0 10px}
.intro{margin:0 0 14px}
#addbtn{gap:10px;min-height:58px}
#addbtn svg{flex:none}
.sub{margin-top:12px}
/* low credits: one slim line instead of a big box */
.topup{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 10px 10px 14px;border:1px solid rgba(255,45,64,.45);border-style:solid;border-radius:12px;background:rgba(255,45,64,.07)}
.topup span{font-size:13px;line-height:1.35;color:var(--soft)}
.topup .btn{flex:none;min-height:40px;padding:8px 14px;font-size:12px}
.topup:not([hidden])+#addbtn{animation:none;background:transparent;color:var(--red);box-shadow:none}
/* result: small kicker, short title, one row of buttons, quiet links */
.rk{display:flex;align-items:center;gap:10px;min-height:22px;margin:0 0 8px;font-size:12px;color:var(--steel);letter-spacing:.04em}
.rk .rmeta{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .stamp{margin:0;padding:3px 7px 2px;font-size:10px;letter-spacing:.14em;border-width:1.5px;transform:rotate(-6deg)}
.rk .sig i{width:11px;height:5px}
.place{margin:0;font:400 clamp(23px,6.6vw,29px)/1.12 var(--mono);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:anywhere}
.psub{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--steel);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;margin-top:16px}
.r3 .btn{min-height:48px}
.rl{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.rlk{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;color:var(--soft);font:13px var(--mono);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:color .15s}
.rlk svg{color:var(--red)}
.rlk:hover,.rlk:active{color:var(--bone)}
.rlk[hidden]{display:none}
.duel{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:12px;white-space:nowrap}
.duel #r-dk{min-width:0;overflow:hidden;text-overflow:ellipsis}
.left{margin-top:12px}
/* payment status: quiet; the I've paid button pops in only after Pay is tapped */
.paystat{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:10px 12px;border:1px solid rgba(61,220,132,.4);border-radius:10px;background:rgba(61,220,132,.06);font-size:13px;color:#9df2c3}
.paystat .spin{color:#3ddc84}
.paidbtn.pop{animation:paidpop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes paidpop{from{transform:scale(.85);opacity:0}}
.chip.paying{border-color:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.16),0 4px 16px rgba(0,0,0,.35)}
.chip.paying .plus{background:#3ddc84;animation:spin 1.6s linear infinite}
/* more room in the drawer */
.dbody{padding:2px 20px calc(var(--sb) + 28px)}
.dhead{padding:18px 20px 12px}
.dbody h3{margin:28px 0 12px}
.mlist button{padding:16px 0;gap:3px}
.packs{gap:14px;margin-top:14px}
.pk{padding:18px 16px}
.steps li{padding:14px 0 14px 36px}
.note{margin-top:10px;line-height:1.55}
.sw{padding:15px 0}
.stats div{padding:14px 12px}
.badges{gap:10px}
.bdg{padding:12px 6px}
.kv{gap:8px 16px}
.cl li{padding:9px 0 9px 20px}
.cl li::before{top:17px}
ol.cl li::before{top:9px}
.bankbox{padding:18px 16px}
.bankbox .btn{margin:14px 0 6px}
.paysteps{gap:10px;margin:14px 0 6px}
@media (prefers-reduced-motion:reduce){.paidbtn.pop,.chip.paying .plus{animation:none}}
/* springy presses and ripples */
.btn,.pk,.sharebig,.ibtn,.chip,.xbtn,.fsur,.gbtn,.fit,.mlist button{transition:transform .38s cubic-bezier(.3,1.9,.45,1),background .2s,box-shadow .25s,border-color .2s,color .15s}
.btn:active,.pk:active,.sharebig:active,.ibtn:active,.chip:active,.xbtn:active,.fsur:active,.gbtn:active,.fit:active{transform:scale(.95);transition-duration:.07s}
.mlist button:active{transform:scale(.985);transition-duration:.07s}
.btn,.sharebig,.mlist button,.ibtn,.chip,.fit,.fsur,.gbtn{position:relative;overflow:hidden;isolation:isolate}
.rip{position:absolute;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);transform:scale(0);animation:rip .6s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* zoomed in: one tap back to the whole globe */
.gbtn{position:fixed;z-index:5;right:14px;top:calc(var(--st) + 66px);display:flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border:1px solid var(--line);border-radius:19px;background:var(--panel);color:var(--bone);font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.4);animation:gin .35s cubic-bezier(.3,1.6,.5,1)}
.gbtn svg{color:var(--red)}
@keyframes gin{from{opacity:0;transform:translateY(-8px) scale(.9)}}
@media (min-width:900px){.gbtn{right:auto;left:calc(58% - 80px);top:calc(var(--st) + 70px)}}
/* search the globe */
body:not([data-st=idle]) #find{display:none}
.finder{position:fixed;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 14px) 14px 20px;background:linear-gradient(180deg,rgba(3,3,4,.86),rgba(3,3,4,.55) 60%,rgba(3,3,4,.2));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.finder.on{animation:pcfade .2s ease-out}
.finder>*{width:min(100%,460px)}
.fbox{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--red);border-radius:14px;background:rgba(10,10,13,.95);box-shadow:0 0 0 4px rgba(255,45,64,.12),0 14px 40px rgba(0,0,0,.6)}
.finder.on .fbox{animation:pcpop .35s cubic-bezier(.2,.9,.3,1.2)}
.fbox svg{flex:none;color:var(--red)}
.fbox input{flex:1;min-width:0;height:44px;border:0;background:none;color:var(--bone);font:17px var(--mono);outline:none}
.fbox input::-webkit-search-cancel-button{display:none}
.fres{display:grid;gap:6px;margin-top:12px}
.fhead{margin:4px 2px 2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.fnone{margin:6px 2px;font-size:14px;color:var(--steel)}
.fit{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(10,10,13,.92);text-align:left;cursor:pointer}
.fit i{font-style:normal;color:var(--red);font-size:16px}
.fit span{min-width:0}
.fit b{display:block;font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fit small{display:block;font-size:12px;color:var(--steel)}
.fit.on,.fit:hover{border-color:var(--red);background:linear-gradient(90deg,rgba(255,45,64,.12),rgba(10,10,13,.92))}
.fsur{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;min-height:48px;border:1px dashed rgba(255,204,51,.6);border-radius:12px;background:rgba(255,204,51,.06);color:#ffcc33;font:14px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media (max-width:400px){.bar{gap:6px}}
@media (prefers-reduced-motion:reduce){.rip,.gbtn,.finder.on,.finder.on .fbox{animation:none}}
.sub:not(:has(> :not([hidden]))){display:none}

/* ===================== v4: premium checkout sheet, Maps first on results, taller panels ===================== */
.paychk{align-items:end;padding:0;background:rgba(2,2,3,.66);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
.pcard{width:100%;max-width:480px;margin:0 auto;max-height:calc(100vh - var(--st) - 12px);max-height:calc(100dvh - var(--st) - 12px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:14px 22px calc(var(--sb) + 22px);border:1px solid rgba(255,255,255,.08);border-bottom:0;border-radius:26px 26px 0 0;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,45,64,.16),transparent 55%),linear-gradient(180deg,#141418,#0a0a0d 60%,#08080a);
  box-shadow:0 -24px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);text-align:left}
.pcard::-webkit-scrollbar{display:none}
.pcard::before{content:"";position:absolute;left:22%;right:22%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,90,105,.9),transparent)}
.paychk.on .pcard{animation:pcup .5s cubic-bezier(.2,.9,.25,1)}
@keyframes pcup{from{transform:translateY(100%)}}
.paychk.off .pcard{transform:translateY(100%);transition:transform .28s ease-in}
.pgrab{display:block;width:42px;height:5px;margin:0 auto 14px;border-radius:3px;background:rgba(255,255,255,.16)}
.pcx{top:16px;right:16px}
.pcs.in{animation:pcin .38s cubic-bezier(.2,.9,.3,1)}
@keyframes pcin{from{opacity:0;transform:translateY(10px)}}
.pck{display:flex;align-items:center;gap:7px;margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.pck svg{color:#3ddc84}
.pcprice{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-right:44px}
.pcprice span{display:flex;align-items:baseline;gap:8px;min-width:0}
.pcprice b{font-weight:400;font-size:clamp(34px,10vw,44px);line-height:1;color:var(--bone);letter-spacing:-.01em}
.pcprice small{font-size:15px;color:var(--steel)}
.pcprice em{font-style:normal;font-size:clamp(24px,7vw,30px);line-height:1;color:var(--red);text-shadow:0 0 22px rgba(255,45,64,.45);white-space:nowrap}
.pcsub{margin:8px 0 18px;font-size:13px;color:var(--steel)}
.pccode{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border:1px solid rgba(255,45,64,.35);border-radius:14px;background:linear-gradient(90deg,rgba(255,45,64,.1),rgba(255,45,64,.02))}
.pccode span{display:flex;flex-direction:column;gap:2px}
.pccode small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.pccode b{font-weight:400;font-size:24px;letter-spacing:.24em;color:var(--bone)}
.pccode .btn{min-height:40px;padding:6px 16px;border-radius:10px;font-size:12px}
.pccode .btn.ok{border-color:#3ddc84;color:#3ddc84}
.pcnote{margin:8px 2px 18px;font-size:12px;color:var(--steel)}
.pcard .paybtn{min-height:62px;margin:0;border-radius:16px;font-size:21px;letter-spacing:.16em;animation:none;box-shadow:0 14px 34px rgba(255,45,64,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.pctrust{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.pctrust i{width:3px;height:3px;border-radius:50%;background:#3a3a42}
.pcard .pcl{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
#pc-ask,#pc-done{text-align:center}
#pc-ask .pck{justify-content:center}
.pcard .pcyes{min-height:70px;border-radius:18px;font-size:21px}
.pcard .pcno{min-height:52px;border-radius:14px}
#pc-ask .pcl{justify-content:center}
.pcico.ok .draw{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .15s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#pc-ok{border-radius:16px;min-height:56px}
@media (min-width:600px){
  .paychk{align-items:center;padding:20px}
  .pcard{border-radius:24px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:24px;max-width:440px}
  .paychk.on .pcard{animation:pcpop .42s cubic-bezier(.2,.9,.3,1.2)}
  .paychk.off .pcard{transform:scale(.96);opacity:0;transition:transform .25s,opacity .25s}
  .pgrab{display:none}
}
/* account: open orders as one tidy line each */
.bankbox{padding:0;border:0;background:none}
.bankbox .bh{margin:18px 0 8px;font:400 13px/1 var(--mono);color:var(--red);letter-spacing:.14em;text-transform:uppercase}
.bord{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 8px;padding:14px 14px 14px 16px;border:1px solid rgba(255,45,64,.45);border-radius:14px;background:linear-gradient(90deg,rgba(255,45,64,.1),#0a0a0d);text-align:left;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.9,.45,1)}
.bord:active{transform:scale(.97);transition-duration:.07s}
.bord span{min-width:0}
.bord b{display:block;font-weight:400;font-size:16px}
.bord small{display:block;margin-top:2px;font-size:12px;color:var(--steel)}
.bord em{display:grid;place-items:center;flex:none;min-width:64px;height:38px;padding:0 14px;border-radius:10px;background:var(--red);color:var(--void);font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.bord.wait{border-color:rgba(61,220,132,.45);background:linear-gradient(90deg,rgba(61,220,132,.08),#0a0a0d)}
.bord.wait em{min-width:38px;padding:0;background:none;color:#3ddc84}
/* chip while a payment is checked: a calm green halo, no spinning */
.chip.paying .plus{animation:none}
.chip.paying{animation:payh 2.4s ease-in-out infinite}
@keyframes payh{50%{box-shadow:0 0 0 5px rgba(61,220,132,.12),0 4px 16px rgba(0,0,0,.35)}}
/* panels show more at a time on phones */
.drawer{max-height:76vh}
/* results: Maps and Street View come first, big and clear */
.rgo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.rgo:not(:has(> :not([hidden]))){display:none}
.rmap{min-height:56px;padding:8px 10px;border-radius:12px;font-size:15px;letter-spacing:.06em;gap:9px}
#r-om{background:linear-gradient(180deg,#ff4657,#e81f33);color:var(--void);border-color:transparent;box-shadow:0 8px 24px rgba(255,45,64,.3),inset 0 1px 0 rgba(255,255,255,.25)}
#r-sv{border-width:1.5px;background:rgba(255,45,64,.1)}
.rgo .rmap:only-child{grid-column:1/-1}
.r3{margin-top:8px;grid-template-columns:1fr 1fr 1fr}
.r3 .btn{min-height:44px;font-size:12px}
.rl{margin-top:10px}
@media (prefers-reduced-motion:reduce){.paychk.on .pcard,.pcs.in,.pcico.ok .draw,.chip.paying{animation:none}.pcico.ok .draw{stroke-dashoffset:0}}
.rmap{font-size:16px;letter-spacing:.05em;white-space:nowrap}
.rmap span{overflow:hidden;text-overflow:ellipsis}
.rmap{font-size:16px;letter-spacing:.05em;white-space:nowrap}
.rmap span{overflow:hidden;text-overflow:ellipsis}
.rmap{letter-spacing:0;gap:7px;padding:8px 6px}
.gsi-row.nudge{animation:nudge .9s ease-out}
@keyframes nudge{0%,100%{transform:none}20%{transform:scale(1.06)}40%{transform:scale(.98)}60%{transform:scale(1.03)}}

/* ---------- buying: deals, any amount, buy sheet, walkthrough, deep trace ---------- */
.buysheet{z-index:31}
.buysheet .pcard{border-color:rgba(255,45,64,.55);background:radial-gradient(120% 70% at 50% 0,rgba(255,45,64,.14),transparent 60%),linear-gradient(180deg,#0f1012,#08080a);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(255,45,64,.14);text-align:left;display:flex;flex-direction:column;gap:12px}
.bs-k{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.bs-h{margin:0;font-size:24px;line-height:1.15;font-weight:400;color:var(--bone)}
.bs-t{margin:0;color:var(--soft);font-size:14px;line-height:1.45}
.bs-f{margin:4px 0 0;color:var(--steel);font-size:12px;line-height:1.4}
.buysheet .lnk{align-self:center}
.deals{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deal{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 12px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#121216,#0a0a0d);color:var(--bone);text-align:left;cursor:pointer;font:inherit;transition:transform .1s,border-color .2s}
.deal:active{transform:scale(.97)}.deal:hover{border-color:var(--red)}
.deal .dn{font-weight:400;font-size:17px}
.deal .dp{font-size:24px;color:var(--red);text-shadow:0 0 12px rgba(255,45,64,.4)}
.deal small{color:var(--steel);font-size:12px}
.deal .dsave{font-style:normal;font-size:11px;color:#ffcc33}
.deal .dtag{position:absolute;top:-9px;left:10px;padding:2px 7px;border-radius:4px;background:var(--bone);color:var(--void);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.deal.hot{border-color:var(--red);background:linear-gradient(180deg,rgba(255,45,64,.16),#0a0a0d 70%)}.deal.hot .dtag{background:var(--red)}
.deal.top{border-color:#ffcc33}.deal.top .dtag{background:#ffcc33}.deal.top .dp{color:#ffcc33;text-shadow:0 0 12px rgba(255,204,51,.4)}
.anyamt{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px dashed var(--line);border-radius:12px;margin-top:4px}
.aa-h{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.aa-l{font-size:15px;color:var(--bone)}
.anyamt input[type=range]{width:100%;height:28px;-webkit-appearance:none;appearance:none;background:transparent}
.anyamt input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red) var(--p,4%),#2a2a30 var(--p,4%))}
.anyamt input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--bone);box-shadow:0 0 0 4px rgba(255,45,64,.35)}
.anyamt input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#2a2a30}.anyamt input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--red)}
.anyamt input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--bone)}
.coach{position:fixed;z-index:40;width:280px;padding:14px;border-radius:12px;background:#111115;border:1px solid var(--red);box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 30px rgba(255,45,64,.2);color:var(--bone);animation:pcfade .3s ease-out}
.coach p{margin:0 0 10px;font-size:14px;line-height:1.45}
.coach::after{content:"";position:absolute;left:calc(var(--ax,50%) - 8px);width:14px;height:14px;background:#111115;border:1px solid var(--red);transform:rotate(45deg)}
.coach.dn::after{top:-8px;border-right:0;border-bottom:0}.coach.up::after{bottom:-8px;border-left:0;border-top:0}
.glowme{box-shadow:0 0 0 3px rgba(255,45,64,.6),0 0 30px rgba(255,45,64,.5)!important;animation:glowme 1.6s ease-in-out infinite}
@keyframes glowme{50%{box-shadow:0 0 0 6px rgba(255,45,64,.25),0 0 40px rgba(255,45,64,.6)}}
.deeprow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--soft);font-size:13px}
.deeprow[hidden]{display:none}
.deeprow input{width:20px;height:20px;accent-color:var(--red)}
.deeprow b{font-weight:400;color:var(--bone)}

/* welcome deal (one time) */
.welcome{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:18px 16px;border:2px solid #ffcc33;border-radius:14px;background:radial-gradient(120% 90% at 0 0,rgba(255,204,51,.22),transparent 60%),linear-gradient(180deg,#17140a,#0a0a0d);color:var(--bone);text-align:left;cursor:pointer;font:inherit;box-shadow:0 0 34px rgba(255,204,51,.18);animation:wglow 2.4s ease-in-out infinite}
@keyframes wglow{50%{box-shadow:0 0 50px rgba(255,204,51,.35)}}
.welcome:active{transform:scale(.98)}
.welcome .wk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ffcc33}
.welcome .wbig{display:flex;align-items:baseline;gap:12px}
.welcome .wbig b{font-weight:400;font-size:30px;color:#fff}
.welcome .wbig i{font-style:normal;font-size:30px;color:#ffcc33;text-shadow:0 0 14px rgba(255,204,51,.5)}
.welcome .ws{font-size:13px;color:var(--soft);line-height:1.4}
.welcome .wgo{margin-top:6px;font-size:13px;color:#ffcc33;letter-spacing:.06em}
/* see how the AI found it */
.btn.how{margin-top:10px;border-color:var(--red);background:rgba(255,45,64,.12);color:var(--bone)}
.howplay{position:fixed;inset:0;z-index:50;background:#030304}
.howplay canvas{display:block}
.howcap{position:absolute;left:0;right:0;bottom:0;padding:18px 18px calc(22px + var(--sb,0px));background:linear-gradient(transparent,rgba(3,3,4,.92) 30%);pointer-events:none}
.howcap .hk{margin:0 0 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.howcap .hs{margin:0;font-size:18px;line-height:1.4;color:var(--bone);min-height:3em}
.howx{position:absolute;top:calc(var(--st,0px) + 12px);right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(3,3,4,.7);color:var(--bone);font-size:24px;cursor:pointer}
.howagain{position:absolute;top:calc(var(--st,0px) + 12px);left:12px}

.svview{margin-top:10px}
.svview iframe{display:block;width:100%;height:min(62vh,520px);border:0;border-radius:6px;background:#111}
.svview .svopen{display:block;margin-top:8px;font-size:13px;text-align:center}

/* result card: compact, see-through, and can tuck away so the map shows */
body[data-st=res] .dock{padding:12px 14px 10px;background:linear-gradient(180deg,rgba(255,45,64,.07),transparent 45%),rgba(12,10,12,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body[data-st=res] .rk{margin-bottom:4px}
body[data-st=res] .place{font-size:clamp(20px,5.6vw,25px);-webkit-line-clamp:1}
body[data-st=res] .psub{margin-top:3px;font-size:12px;-webkit-line-clamp:1}
body[data-st=res] .rgo{margin-top:10px;gap:6px}
body[data-st=res] .rmap{min-height:44px;font-size:14px;border-radius:10px}
body[data-st=res] .r3{margin-top:6px;gap:6px}
body[data-st=res] .r3 .btn{min-height:36px;font-size:11px}
body[data-st=res] .btn.how{margin-top:6px;min-height:38px;padding:6px 10px;font-size:11px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-st=res] .rl{margin-top:6px;font-size:12px}
.rmin{flex:none;display:grid;place-items:center;width:32px;height:28px;margin-left:auto;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);color:var(--bone);cursor:pointer}
.rmin svg{transition:transform .25s}
.dock.mini .rmin svg{transform:rotate(180deg)}
.dock.mini #d-res > :not(.rk):not(.place){display:none!important}
.dock.mini .place{cursor:pointer}

/* how buying works */
.howbuy{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--bone);text-align:left;cursor:pointer}
.howbuy:hover{border-color:var(--red)}
.hb-th{flex:none;position:relative;display:grid;place-items:center;width:44px;height:64px;border-radius:8px;background:#111 center/cover}
.hb-th i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:11px;box-shadow:0 0 14px rgba(255,45,64,.6)}
.hb-tx{display:flex;flex-direction:column;gap:3px}
.hb-tx b{font-size:14px;letter-spacing:.04em}
.hb-tx small{font-size:12px;color:var(--steel)}
.pchow{display:block;margin:2px auto 10px;font-size:12px}
.hbplay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hbplay video{max-width:100%;max-height:calc(100dvh - 32px);aspect-ratio:9/16;border-radius:14px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.hbx{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer}

/* honest savings vs buying one trace at a time */
.welcome .wbig s.was,.deal s.was{color:var(--steel);text-decoration:line-through;text-decoration-color:rgba(255,45,64,.8);text-decoration-thickness:2px}
.welcome .wbig s.was{font-size:20px}
.deal s.was{font-size:13px;margin-top:2px}
.welcome .woff{display:inline-block;margin-top:2px;font-size:12px;color:#ffcc33;letter-spacing:.02em}
.welcome .wbig{flex-wrap:wrap;gap:4px 12px}.welcome .wbig b{white-space:nowrap;font-size:27px}.welcome .wbig i{font-size:28px}

.mlist .mdonate b{color:var(--red)}
.dncode{display:flex;justify-content:space-between;align-items:center;margin:12px 0 4px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px}
.dncode small{color:var(--steel);font-size:12px;letter-spacing:.1em;text-transform:uppercase}.dncode b{font-size:22px;letter-spacing:.2em;font-weight:400}

/* live scanner over the globe while a trace runs */
.tscan{position:fixed;z-index:3;left:50%;top:44%;pointer-events:none;border:1px solid rgba(255,45,64,.55);border-radius:4px;background:#050506;box-shadow:0 0 0 4px rgba(5,5,6,.6),0 18px 50px rgba(0,0,0,.65),0 0 34px rgba(255,45,64,.18);opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.tscan.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tscan.off{opacity:0;transform:translate(-50%,-50%) scale(.97);transition:opacity .35s ease,transform .35s ease}
.tscan canvas{display:block;border-radius:3px}
.ts-tag{position:absolute;left:-1px;top:-24px;margin:0;max-width:min(88vw,360px);padding:3px 8px;background:#ff2d40;color:#050506;font:12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px}
@media (prefers-reduced-motion:reduce){.tscan,.tscan.on,.tscan.off{transition:opacity .2s}}