:root{color-scheme:dark;--bg:#030816;--text:#eef5fd;--muted:#97a9bf;--cyan:#08d8f6;--violet:#9753fa;--line:rgba(107,165,220,.16)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 620px at 78% 8%,rgba(49,119,255,.16),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(151,83,250,.14),transparent 60%),var(--bg)}
.sky:after{content:"";position:absolute;inset:0;opacity:.6;background-image:radial-gradient(1px 1px at 12% 18%,#7ed0ff,transparent),radial-gradient(1px 1px at 61% 11%,#a2bbff,transparent),radial-gradient(1px 1px at 79% 83%,#a2bbff,transparent),radial-gradient(1px 1px at 39% 67%,#fff8,transparent),radial-gradient(1px 1px at 90% 40%,#fff6,transparent),radial-gradient(1.5px 1.5px at 25% 85%,#c9f7ff,transparent);background-size:520px 480px;animation:tw 6s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.3}}
.top{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,4vw,48px)}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:.3px}.brand img{border-radius:50%}
.xbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:18px}
.xbtn:hover{border-color:var(--cyan)}
.wrap{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;max-width:1180px;width:100%;margin:0 auto;padding:12px clamp(16px,4vw,48px) 24px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(8,216,246,.35);background:rgba(8,216,246,.08);color:#c9f7ff;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-1.5px;margin:22px 0 16px;font-weight:800}
h1 span{background:linear-gradient(90deg,#08d8f6,#3177ff 55%,#9753fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.copy p{font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin:0 0 30px;max-width:30ch}
.follow{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:14px;font-weight:700;font-size:15px;background:rgba(8,216,246,.1);border:1px solid rgba(8,216,246,.45);color:#c9f7ff}
.follow span{font-size:17px}.follow:hover{background:rgba(8,216,246,.18)}
.stage{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;justify-self:center}
.ring{position:absolute;border-radius:50%;border:1px dashed rgba(8,216,246,.22);pointer-events:none}
.r1{inset:9.5%}.r2{inset:5%;border-color:rgba(49,119,255,.28);animation:spin 120s linear infinite}.r3{inset:1%;border-color:rgba(151,83,250,.22);animation:spin 200s linear infinite reverse}
.glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(8,216,246,.25),transparent 70%);filter:blur(20px)}
.earth{position:absolute;inset:14%;border-radius:50%;overflow:hidden;box-shadow:0 0 46px rgba(8,140,246,.35);isolation:isolate}
.earth:before{content:"";position:absolute;top:-9%;bottom:-9%;left:0;width:400%;background:url(/assets/earth-map-20261105.webp) 0 50%/50% 100% repeat-x;animation:turn 90s linear infinite;will-change:transform}
.earth:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset -28px -18px 60px rgba(0,0,0,.78),inset 14px 10px 36px rgba(120,190,255,.22);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.18),transparent 38%),radial-gradient(circle at 50% 50%,transparent 55%,rgba(2,6,18,.55) 78%,rgba(2,6,18,.9) 100%)}
@keyframes turn{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.sweep{position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 0deg,rgba(8,216,246,0) 0deg,rgba(8,216,246,0) 300deg,rgba(8,216,246,.28) 358deg,rgba(8,216,246,0) 360deg);animation:spin 5s linear infinite;pointer-events:none;mix-blend-mode:screen}
@keyframes spin{to{transform:rotate(360deg)}}
.blips{position:absolute;inset:0}
.blip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;z-index:2;color:var(--cyan);pointer-events:none}
.blip i{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none}
.blip.fresh i:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;animation:ring 1.6s ease-out 2}
.blip.v i{background:var(--violet);box-shadow:0 0 10px var(--violet)}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(4);opacity:0}}
.blip b{font-size:11px;font-weight:700;color:#fff;background:rgba(3,8,22,.78);border:1px solid var(--line);padding:1px 6px;border-radius:6px;white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis;transition:opacity .6s}
.blip.old b{opacity:0}.blip.gone{opacity:0;transition:opacity 1s}
.foot{text-align:center;color:#5e7189;font-size:12.5px;padding:18px 16px 26px}
@media (max-width:860px){.wrap{grid-template-columns:1fr;text-align:center;gap:8px}.copy p{margin-left:auto;margin-right:auto}.stage{max-width:420px;order:-1}h1{margin-top:18px}}
@media (max-width:420px){.blip b{font-size:10px;max-width:70px}.top{padding:14px 16px}}
@media (prefers-reduced-motion:reduce){.earth:before,.sweep,.r2,.r3,.sky:after{animation:none}}
@media (max-width:860px){.stage{width:min(100%,calc(100vw - 72px))}}
/* the contract: a beacon card */
.coord{position:relative;margin:0 0 22px;max-width:520px;padding:14px 14px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(14,24,48,.82),rgba(8,14,30,.82));border:1px solid rgba(8,216,246,.28);box-shadow:0 0 0 1px rgba(151,83,250,.08) inset,0 18px 50px -20px rgba(8,216,246,.35);overflow:hidden;text-align:left}
.coord:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(90deg,transparent,rgba(8,216,246,.9),rgba(151,83,250,.9),transparent);background-size:200% 100%;animation:scan 4.5s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
@keyframes scan{from{background-position:200% 0}to{background-position:-200% 0}}
.coord-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.coord-t{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#c9f7ff}
.coord-t i{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet);animation:pulse 1.4s ease-in-out infinite}
.coord-n{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.coord-a{display:block;width:100%;margin:0;padding:10px 12px;border-radius:12px;border:1px dashed rgba(8,216,246,.3);background:rgba(3,8,22,.6);color:#eef5fd;cursor:pointer;text-align:left;font:inherit}
.coord-a:hover{border-color:rgba(8,216,246,.7)}
.coord-a code{display:block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:clamp(11.5px,1.25vw,14px);letter-spacing:.2px;word-break:break-all;line-height:1.45;user-select:all}
.coord-c{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:14.5px;color:#03111f;background:linear-gradient(90deg,#08d8f6,#3177ff 55%,#9753fa);transition:transform .15s,filter .2s}
.coord-c:hover{filter:brightness(1.1)}.coord-c:active{transform:scale(.98)}
.coord-c .ic{font-size:16px}
.coord.ok .coord-c{background:linear-gradient(90deg,#2fe39a,#08d8f6)}
.coord.ok .coord-a{border-color:#2fe39a;box-shadow:0 0 24px -6px rgba(47,227,154,.6)}
.coord-f{margin:9px 2px 0!important;font-size:12px!important;color:#6f839c!important;max-width:none!important}
@media (max-width:860px){.coord{margin-left:auto;margin-right:auto}}
@media (max-width:600px){.coord{padding:12px 10px 10px}.coord-a{padding:9px 8px}.coord-a code{font-size:min(14px,calc((100vw - 92px) / 26.6));letter-spacing:0;word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:clip}}