:root { --bg:#0b0b0c; --fg:#e7e7ea; --accent:#00e5ff; --muted:#7a7a85; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Share Tech Mono',monospace}
.wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}
.logo{letter-spacing:.2rem;display:flex;gap:.4rem;font-size:clamp(2.8rem,8vw,7rem);text-shadow:0 0 6px rgba(0,229,255,.25)}
.logo span{display:inline-block;position:relative;animation:flicker 6s infinite steps(40,end)}
.logo span:nth-child(2){color:var(--accent)}
.tag{color:var(--muted);margin:.25rem 0 1.25rem 0}
.arc{position:relative;width:min(70vmin,640px);height:min(70vmin,640px);opacity:.85}
.arc-stroke{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);filter:drop-shadow(0 0 12px rgba(0,229,255,.35));animation:spin 18s linear infinite}
.arc-slice{position:absolute;inset:0;border-radius:50%;mask:conic-gradient(from 200deg at 50% 50%, transparent 0 82%, #000 82% 100%);background:radial-gradient(60% 60% at 50% 50%, rgba(0,229,255,.35), transparent 60%)}
.hint{color:#555}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flicker{0%,2%,4%,19%,21%,100%{opacity:1}1%,3%,20%{opacity:.7}}