:root{--bg:#101010;--g:#00ff27;--g-dim:rgba(0,255,39,.6);--line:rgba(0,255,39,.2);
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--logo:"Avenir Next","Century Gothic",Futura,Montserrat,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--g)}
body{min-height:100dvh;overflow-x:hidden;font-family:var(--mono)}
a,button{color:inherit}
:focus-visible{outline:1px solid var(--g);outline-offset:3px}

.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;pointer-events:none;
padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left))}
.menu,.status{position:relative;pointer-events:auto}
.icon-btn,.status-btn{background:none;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,color .15s}
.icon-btn:hover,.status-btn:hover,.open>button{border-color:var(--g)}
.icon-btn{width:2.25rem;height:2.25rem;display:grid;place-content:center;gap:4px}
.icon-btn i{display:block;width:14px;height:1px;background:var(--g)}
.status-btn{height:2.25rem;padding:0 .8rem;font:.75rem var(--mono);letter-spacing:.04em}
[data-state=unknown] .status-btn,[data-state=pending] .status-btn{color:var(--g-dim)}
.pop{position:absolute;top:calc(100% + .5rem);padding:.5rem;display:grid;gap:.2rem;list-style:none;font-size:.75rem;
background:rgba(16,16,16,.94);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.menu .pop{left:0;min-width:9rem}
.status .pop{right:0;width:max-content;max-width:calc(100vw - 2rem);padding:.7rem .9rem;color:var(--g-dim)}
.open>.pop{opacity:1;visibility:visible;transform:none}
.pop a{display:block;text-decoration:none;color:var(--g-dim);padding:.45rem .8rem;transition:color .15s}
.status .pop a{padding:.3rem 0 0}
.pop a:hover{color:var(--g)}
.menu .pop a::before{content:"/";opacity:.5;margin-right:.1em}
#status-detail:empty{display:none}

.stage{min-height:100dvh;display:grid;place-items:center;padding:5rem 1rem}
.logo-wrap{position:relative}
.logo{position:relative;font:800 clamp(2.6rem,15vw,13rem)/1 var(--logo);letter-spacing:.06em;padding-left:.06em;user-select:none}
.word,.glow{display:block;white-space:nowrap}
.word{text-shadow:0 0 14px rgba(0,255,39,.3)}
.glow{position:absolute;inset:0;filter:blur(20px);opacity:.28;animation:breathe 7s ease-in-out infinite}
.l{display:inline-block;animation:flick var(--d,9s) linear var(--o,0s) infinite}
.l:nth-child(1){--d:8s;--o:-1s}.l:nth-child(2){--d:11s;--o:-5s}.l:nth-child(3){--d:13s;--o:-3s}
.l:nth-child(4){--d:9s;--o:-7s}.l:nth-child(5){--d:12s;--o:-2s}.l:nth-child(6){--d:10s;--o:-6s}
@keyframes flick{0%,93%,100%{opacity:1}94%{opacity:.8}95%{opacity:1}96.5%{opacity:.9}}
@keyframes breathe{50%{opacity:.4}}
.arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arc{fill:none;stroke:var(--g);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
filter:drop-shadow(0 0 3px var(--g));animation:zap .17s linear forwards}
circle.arc{fill:var(--g);stroke:none}
@keyframes zap{0%{opacity:1}40%{opacity:.3}55%{opacity:.9}100%{opacity:0}}

.surge .glow{opacity:.75;animation:none}
.surge .word{text-shadow:0 0 22px rgba(0,255,39,.6);animation:glitch .22s steps(1) infinite}
@keyframes glitch{0%{transform:none}20%{transform:translate(-2px,0) skewX(-2deg)}40%{transform:translate(2px,1px)}60%{transform:translate(-1px,-1px) skewX(1deg)}80%{transform:translate(1px,0)}}
.msg{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;margin-top:clamp(1rem,3vw,2rem);
font:.75rem/1.7 var(--mono);white-space:pre-wrap;color:var(--g-dim);opacity:0;transition:opacity .5s;pointer-events:none}
.msg.show{opacity:1}

.term{position:fixed;z-index:6;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
width:min(23rem,calc(100vw - 2rem));font:.75rem/1.6 var(--mono);background:rgba(16,16,16,.95);border:1px solid var(--line);animation:rise .3s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.term-head{display:flex;justify-content:space-between;align-items:center;padding:.3rem .3rem .3rem .75rem;color:var(--g-dim);border-bottom:1px solid var(--line)}
.term-head button{background:none;border:0;cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .5rem;color:var(--g-dim)}
.term-head button:hover{color:var(--g)}
.term-log{max-height:9rem;overflow:auto;padding:.5rem .75rem 0}
.term-log p{overflow-wrap:anywhere}
.term-log a{color:var(--g)}
.term-row{display:flex;gap:.5rem;padding:.4rem .75rem .6rem}
.term-row input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--g);font:inherit;caret-color:var(--g)}
@media (pointer:coarse){.term-row input{font-size:16px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .glow{opacity:.2}
}

/* sub-pages (radio, domains, socials) */
.pop a[aria-current]{color:var(--g)}
.page{width:min(40rem,100%);margin:0 auto;padding:6rem 1.25rem 4rem}
.title{font:800 clamp(2rem,8vw,3.25rem)/1 var(--logo);letter-spacing:.06em;text-shadow:0 0 14px rgba(0,255,39,.3);margin-bottom:2.5rem}
.page h2{font:400 .75rem var(--mono);color:var(--g-dim);letter-spacing:.04em;margin-bottom:.4rem}
.block{margin-bottom:2rem}
.big{font:600 clamp(1.1rem,4vw,1.5rem)/1.3 var(--logo);overflow-wrap:anywhere}
.dim{color:var(--g-dim);font-size:.85rem;overflow-wrap:anywhere}
.page a{color:var(--g);text-underline-offset:3px;text-decoration-color:var(--line);transition:text-decoration-color .15s}
.page a:hover{text-decoration-color:var(--g)}
.rows{list-style:none;padding:0}
.rows li{display:flex;justify-content:space-between;gap:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.rows li span:first-child{color:var(--g-dim)}
.rows li span:last-child{text-align:right;overflow-wrap:anywhere}
.domains li{justify-content:flex-start}
.btn{background:none;border:1px solid var(--line);color:var(--g);font:.8rem var(--mono);padding:.55rem 1.1rem;cursor:pointer;transition:border-color .15s}
.btn:hover,.btn[aria-pressed=true]{border-color:var(--g)}
.links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.8rem}
