*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
:root{--bg:#f3f1f1;--panel:rgba(255,255,255,.92);--ink:#111;--muted:#858282;--line:#e6e3e3;--soft:#f6f4f4;
--red:#e3171b;--red2:#ff4a4a;--dark:#9e0d0f;
--pink:var(--red);--orange:var(--red2);--cyan:var(--red);--gold:var(--red);--violet:var(--red);
--grad:linear-gradient(135deg,#ff4a4a 0%,#e3171b 55%,#b50f12 100%);
--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
html,body{height:100%;margin:0}
body{background:radial-gradient(90% 75% at 60% 45%,#ffffff 0%,#f6f4f4 45%,var(--bg) 100%) no-repeat,var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;overflow:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit}
#stars{display:none}
#globe{position:fixed;inset:0;z-index:1;cursor:grab}
#globe:active{cursor:grabbing}

/* loader */
#loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:radial-gradient(70% 60% at 50% 45%,#ffffff 0%,#f1eeee 75%);transition:opacity .6s ease,visibility .6s}
#loader.out{opacity:0;visibility:hidden}
.ld-orb{position:relative;width:150px;height:150px;display:grid;place-items:center}
.ld-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent}
.ld-ring.r1{border-top-color:var(--pink);border-right-color:var(--pink);animation:spin 1.4s linear infinite}
.ld-ring.r2{inset:14px;border-bottom-color:#111;border-left-color:#111;animation:spin 2.1s linear infinite reverse}
.ld-ring.r3{inset:28px;border-top-color:#d6d2d2;animation:spin 3s linear infinite}
.ld-logo{width:70px;height:70px;animation:bob 1.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ld-title{font-weight:800;font-size:30px;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-steps{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;color:var(--muted);display:grid;gap:6px}
.ld-steps li{display:flex;align-items:center;gap:10px;transition:color .3s}
.ld-steps li i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--muted);position:relative}
.ld-steps li.ok{color:var(--ink)}
.ld-steps li.ok i{border-color:var(--red);background:var(--red);box-shadow:0 0 8px rgba(227,23,27,.5)}
.ld-bar{width:200px;height:3px;border-radius:3px;background:#e6e3e3;overflow:hidden}
.ld-bar span{display:block;height:100%;width:6%;background:var(--grad);transition:width .45s ease}

/* header + ticker */
.top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;pointer-events:none;z-index:4}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;text-decoration:none}
.brand img{width:34px;height:34px}
.live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.85);border:1px solid var(--line);padding:6px 11px;border-radius:99px;backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:#c9c5c5}
.dot.on{background:var(--pink);animation:pulse 1.8s infinite}
.dot.wait{background:#111;animation:pulseG 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,23,27,.5)}70%{box-shadow:0 0 0 9px rgba(227,23,27,0)}100%{box-shadow:0 0 0 0 rgba(227,23,27,0)}}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(0,0,0,.3)}70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.ticker{position:fixed;z-index:3;top:64px;left:0;right:0;overflow:hidden;height:30px;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:inline-flex;gap:28px;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:30px;padding-left:100%;animation:tick 40s linear infinite}
.ticker-track b{color:var(--ink);font-weight:600}
@keyframes tick{to{transform:translateX(-100%)}}

/* panel */
.panel{position:fixed;z-index:4;left:18px;bottom:18px;width:390px;max-height:calc(100% - 118px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 20px 16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px -24px rgba(0,0,0,.28);scrollbar-width:thin;scrollbar-color:#ddd transparent}
.grip{display:none}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.count{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.count span{font-size:58px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.count span.bump{animation:bump .5s ease}
@keyframes bump{40%{transform:scale(1.06)}}
.count small{font-size:14px;color:var(--muted);font-weight:600}
.sub{color:var(--muted);font-size:13.5px;margin-top:2px;min-height:1.5em}

.btn{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;padding:16px 18px;font:800 17px var(--sans);color:#fff;cursor:pointer;position:relative;overflow:hidden;
background:var(--grad);box-shadow:0 5px 0 #8a0b0d,0 14px 28px -10px rgba(227,23,27,.6);transition:transform .08s,box-shadow .2s}
.btn:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}
.btn:hover:not(:disabled){filter:brightness(1.05)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #8a0b0d,0 8px 16px -8px rgba(227,23,27,.6)}
.btn:disabled{cursor:default;background:#ebe8e8;color:var(--muted);box-shadow:0 5px 0 #d6d2d2}
.btn.done{background:#111;color:#fff;box-shadow:0 5px 0 #000}
.pinico{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:currentColor;position:relative;flex:none}
.pinico::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#e3171b}
.btn:disabled .pinico::after{background:#ebe8e8}.btn.done .pinico::after{background:#111}
.note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

.mine{margin-top:14px;border:1px solid #f3c9ca;border-radius:18px;padding:14px;background:linear-gradient(160deg,#fff 0%,#fff3f3 100%);text-align:center}
.mine-n{font-size:15px}.mine-n b{font-size:24px;color:var(--red)}
.mine-where{color:var(--muted);font-size:13.5px}
.badge{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--grad);color:#fff;border-radius:99px;padding:4px 10px}
.mine-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.mine-stats div{background:var(--soft);border-radius:10px;padding:7px 4px;font-size:11px;color:var(--muted);line-height:1.25}
.mine-stats b{display:block;font-size:17px;color:var(--ink)}
.share{display:block;margin-top:12px;background:#111;color:#fff;text-decoration:none;font-weight:800;border-radius:12px;padding:11px}
.share:hover{background:#000}

.details{margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:9px 6px;text-align:center}
.stat b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.stat:nth-child(odd) b{color:var(--ink)}.stat:nth-child(even) b{color:var(--red)}
.spark{margin-top:10px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px 12px 8px;position:relative}
.spark-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#stPeak{color:var(--red)}
#sparkSvg{display:block;width:100%;height:54px;margin-top:6px}
.spark-empty{position:absolute;inset:28px 0 0;display:grid;place-items:center;font-size:12px;color:var(--muted)}

.tabs{display:flex;gap:4px;margin-top:12px;background:var(--soft);border-radius:12px;padding:3px}
.tab{flex:1;border:0;background:none;color:var(--muted);font:600 12.5px var(--sans);padding:7px 0;border-radius:9px;cursor:pointer}
.tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.list{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px;min-height:40px}
.list li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line);position:relative}
.list li .rk{font-family:var(--mono);font-size:11px;color:var(--muted)}
.list li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list li .vl{font-variant-numeric:tabular-nums;font-weight:700}
.list li .vl small{font-family:var(--mono);font-weight:500;color:var(--muted);font-size:11px}
.list li .barbg{position:absolute;left:0;bottom:-1px;height:2px;background:var(--grad);border-radius:2px;opacity:.8}
.list li.new{animation:flashIn 1.2s ease}
@keyframes flashIn{0%{background:rgba(227,23,27,.15)}100%{background:transparent}}
.list .empty{display:block;color:var(--muted);border:0;text-align:center;padding:12px 0}

.ca{display:flex;align-items:center;gap:8px;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 10px;background:#fff}
.ca-lbl{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--red)}
.ca code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--ink)}
.ca button{border:0;background:#111;color:#fff;font:700 12px var(--sans);border-radius:8px;padding:7px 11px;cursor:pointer}

.toast{position:fixed;z-index:6;top:104px;left:50%;transform:translateX(-50%);background:#111;border:1px solid #111;color:#fff;font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:99px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);max-width:calc(100% - 32px);text-align:center;backdrop-filter:blur(10px);animation:toastIn .35s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}}

@media (max-width:640px){
  .top{padding:12px 16px}
  .ticker{top:56px}
  .panel{left:10px;right:10px;bottom:10px;width:auto;max-height:62%;padding:8px 16px 14px;border-radius:22px;transition:max-height .35s ease}
  .grip{display:block;width:100%;border:0;background:none;padding:4px 0 8px;cursor:pointer}
  .grip span{display:block;width:40px;height:4px;border-radius:4px;background:#d6d2d2;margin:0 auto}
  .panel.min .details,.panel.min .note{display:none}
  .count span{font-size:44px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .toast{top:94px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.legend{position:fixed;z-index:3;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:99px;padding:6px 12px;backdrop-filter:blur(8px)}
.legend i{display:inline-block;width:46px;height:8px;border-radius:4px;background:linear-gradient(90deg,#dcd8d7,#f7c4c4,#e3171b)}
@media (max-width:640px){.legend{display:none}}