@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ChakraPetch-Regular.woff2") format("woff2"),url("../fonts/ChakraPetch-Regular.ttf") format("truetype")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ChakraPetch-Bold.woff2") format("woff2"),url("../fonts/ChakraPetch-Bold.ttf") format("truetype")}
:root{--bg:#04101a;--panel:#08202b;--ink:#e4f6ff;--mute:#7fa0ad;--cyan:#00e5ff;--lime:#b6ff00;--yellow:#ffb000;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 "Chakra Petch",ui-sans-serif,system-ui,sans-serif;min-height:100vh;
background-image:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(182,255,0,.05) 1px,transparent 1px);background-size:44px 44px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);z-index:5}
main{max-width:1100px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.25rem 3rem}
header{margin-bottom:2.5rem}
.status{color:var(--yellow);font-size:.85rem;margin:0 0 1rem;letter-spacing:.04em}
.status::before{content:"";display:inline-block;width:.6rem;height:.6rem;background:var(--yellow);margin-right:.6rem;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
h1{font-size:clamp(2.2rem,11vw,6.5rem);line-height:.9;margin:0;font-weight:700;letter-spacing:-.02em;position:relative;display:inline-block;text-shadow:0 0 24px rgba(0,240,255,.5)}
h1::before,h1::after{content:attr(data-t);position:absolute;inset:0;clip-path:inset(0 0 100% 0)}
h1::before{color:var(--lime);transform:translate(4px,0);animation:glitch 5s infinite steps(1)}
h1::after{color:var(--cyan);transform:translate(-4px,0);animation:glitch 5s infinite steps(1) .15s}
@keyframes glitch{0%,90%,100%{clip-path:inset(0 0 100% 0)}91%{clip-path:inset(10% 0 60% 0)}93%{clip-path:inset(55% 0 20% 0)}95%{clip-path:inset(30% 0 45% 0)}97%{clip-path:inset(75% 0 5% 0)}}
.lead{max-width:52ch;color:var(--mute);margin:1.5rem 0 1.5rem;font-size:1.1rem}
#q{width:100%;max-width:420px;padding:.7rem 1rem;background:var(--panel);color:var(--ink);border:1px solid var(--cyan);font:inherit;border-radius:0}
#q:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
#q::placeholder{color:var(--mute)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-width:640px;margin:0 0 1.5rem}
.info div{padding:.7rem 1rem;background:var(--panel);border-left:3px solid var(--lime)}
.info dt{color:var(--mute);font-size:.8rem}
.info dd{margin:0;color:var(--cyan);font-size:1.15rem;word-break:break-all}
section{margin-top:2.5rem}
h2{margin:0 0 1rem;font-size:1.4rem;color:var(--lime);display:flex;align-items:baseline;gap:.8rem;border-bottom:1px solid rgba(182,255,0,.4);padding-bottom:.4rem}
h2 small{font-size:.85rem;color:var(--mute);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1rem;list-style:none;margin:0;padding:0}
.grid a{display:block;height:100%;padding:1rem 1.1rem;color:inherit;text-decoration:none;background:var(--panel);
border:1px solid rgba(0,240,255,.35);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));transition:background .2s,border-color .2s,transform .2s}
.grid a:hover,.grid a:focus-visible{background:#0d2f3b;border-color:var(--lime);transform:translateY(-3px);outline:none}
.grid a:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
h3{margin:0;font-size:1.2rem;color:var(--cyan)}
.grid a:hover h3{text-shadow:0 0 12px var(--cyan)}
.url{display:block;margin-top:.4rem;font-size:.78rem;color:var(--ink);opacity:.6;word-break:break-all}
#none{display:none;margin-top:2rem;color:var(--yellow)}
footer{margin-top:3rem;color:var(--mute);font-size:.85rem;border-top:1px solid rgba(182,255,0,.4);padding-top:1rem}
@media (prefers-reduced-motion:reduce){h1::before,h1::after,.status::before{animation:none}.grid a{transition:none}}
