:root{
  color-scheme:dark;
  --cy:#29f0ff; --mg:#ff2bd6; --am:#ffb21a; --ink:#e9f6ff; --dim:#7f8aa8;
  --bg:#05030b; --card:rgba(14,10,30,.62); --line:rgba(41,240,255,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;min-height:100%}
body{overflow-x:hidden}
#fx{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0}
.scan{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}
.app{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding:max(14px,env(safe-area-inset-top)) clamp(14px,3vw,40px) max(12px,env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{position:relative;font-family:Orbitron,sans-serif;font-weight:900;letter-spacing:.14em;font-size:clamp(22px,3.2vw,34px);
  color:#fff;text-shadow:0 0 12px rgba(41,240,255,.55),0 0 28px rgba(255,43,214,.35)}
.logo::before,.logo::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.logo::before{color:var(--cy);transform:translate(-2px,0);opacity:.7;mix-blend-mode:screen;animation:gl1 5.5s infinite steps(1)}
.logo::after{color:var(--mg);transform:translate(2px,0);opacity:.7;mix-blend-mode:screen;animation:gl2 5.5s infinite steps(1)}
@keyframes gl1{0%,92%,100%{clip-path:inset(0 0 0 0);transform:translate(-1.5px,0)}93%{clip-path:inset(20% 0 55% 0);transform:translate(-7px,0)}95%{clip-path:inset(62% 0 8% 0);transform:translate(5px,0)}97%{clip-path:inset(0 0 80% 0);transform:translate(-3px,0)}}
@keyframes gl2{0%,92%,100%{clip-path:inset(0 0 0 0);transform:translate(1.5px,0)}93%{clip-path:inset(58% 0 12% 0);transform:translate(6px,0)}95%{clip-path:inset(10% 0 70% 0);transform:translate(-6px,0)}97%{clip-path:inset(40% 0 30% 0);transform:translate(3px,0)}}
.ticker{font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--am);border:1px solid rgba(255,178,26,.45);padding:5px 9px;border-radius:999px;background:rgba(255,178,26,.07)}
.status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;color:var(--dim);border:1px solid var(--line);padding:7px 12px;border-radius:999px;background:rgba(5,3,11,.5);backdrop-filter:blur(6px)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--mg);box-shadow:0 0 10px var(--mg);animation:pulse 1.6s infinite}
.status.live i{background:#3dff9a;box-shadow:0 0 10px #3dff9a}
.status.live{color:#bfffe0}
@keyframes pulse{50%{opacity:.35}}

.main{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(12px,3vw,40px);align-items:center;min-height:0}
.stage{min-height:min(76vh,760px);height:100%}
.panel{display:flex;flex-direction:column;gap:12px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 40px rgba(0,0,0,.35)}
.card::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--cy),var(--mg));border-radius:2px;box-shadow:0 0 10px var(--cy)}
.lbl{font-size:10px;letter-spacing:.22em;color:var(--dim)}
.big{font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(30px,4vw,44px);margin:4px 0 12px;color:#fff;text-shadow:0 0 18px rgba(255,178,26,.45);font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.val{font-size:14px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.up{color:#3dff9a}.down{color:#ff5c7a}
.next{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
.next span{font-family:Orbitron,sans-serif;font-weight:700;font-size:22px;color:var(--cy);text-shadow:0 0 12px rgba(41,240,255,.5)}
.next em{font-style:normal;font-size:12px;color:var(--ink);opacity:.8;letter-spacing:.08em}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--am),#ffe27a);box-shadow:0 0 12px var(--am);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.sub{font-size:12px;color:var(--dim);margin-top:8px}
.buy{display:flex;align-items:center;justify-content:center;height:58px;border-radius:14px;text-decoration:none;font-family:Orbitron,sans-serif;font-weight:900;letter-spacing:.16em;font-size:16px;color:#1a0d00;
  background:linear-gradient(180deg,#ffd45a,#ff9d00);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 26px rgba(255,170,0,.45),0 0 60px rgba(255,43,214,.15);transition:transform .15s,box-shadow .15s}
.buy:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 36px rgba(255,170,0,.65),0 0 80px rgba(255,43,214,.25)}
.buy.off{background:rgba(255,255,255,.04);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.ca{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;color:var(--ink);font:inherit;cursor:pointer;backdrop-filter:blur(10px)}
.ca .addr{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca .copy{font-size:10px;letter-spacing:.2em;color:var(--cy)}
.ca:disabled{cursor:default;opacity:.7}
.ca:disabled .copy{display:none}
.links{display:flex;gap:10px}
.links a{flex:1;display:grid;place-items:center;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);transition:border-color .15s,box-shadow .15s}
.links a:hover{border-color:var(--mg);box-shadow:0 0 18px rgba(255,43,214,.3)}
.links svg{width:18px;height:18px;fill:var(--ink)}
.links a[hidden]{display:none}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10.5px;color:#5d6684;letter-spacing:.05em;padding-top:12px}
.cheers{position:fixed;left:50%;top:9%;transform:translate(-50%,-10px) scale(.9);opacity:0;pointer-events:none;z-index:3;text-align:center;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.cheers div{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(24px,4.4vw,48px);letter-spacing:.14em;color:#fff;text-shadow:0 0 18px var(--am),0 0 40px var(--mg),-3px 0 var(--cy),3px 0 var(--mg)}
.cheers small{display:block;margin-top:6px;letter-spacing:.3em;color:var(--am);font-size:14px}
.cheers.on{opacity:1;transform:translate(-50%,0) scale(1)}

@media (max-width:860px){
  .main{grid-template-columns:1fr}
  .stage{min-height:0;height:min(62vh,560px)}
  .row .val{font-size:13px}
}
/* capture mode: mug only */
body.cap .app,body.cap .scan{display:none}

.wm{display:flex;flex-direction:column;gap:2px}
.tag{font-size:clamp(10px,1.2vw,12.5px);letter-spacing:.2em;text-transform:uppercase;color:#ffd36a;text-shadow:0 0 10px rgba(255,178,26,.5)}
.status.flood i{background:var(--am);box-shadow:0 0 10px var(--am)}
.status.flood{color:#ffe2a0}
.panel,.top,.foot{position:relative;z-index:4}
@media (max-width:520px){.ticker{display:none}}

.status{white-space:nowrap}
@media (max-width:520px){.tag{font-size:8.5px;letter-spacing:.1em}.status{font-size:9.5px;padding:6px 10px;letter-spacing:.12em}.stage{height:min(58vh,480px)}}