body{margin:0;color:#fff;font-family:"Times New Roman",serif;background:#000;
background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 120px,#fff,transparent),radial-gradient(1px 1px at 160px 60px,#ddd,transparent),radial-gradient(2px 2px at 200px 180px,#fff,transparent),radial-gradient(1px 1px at 50px 200px,#ccc,transparent),radial-gradient(1.5px 1.5px at 130px 10px,#fff,transparent);background-size:230px 230px}
.wrap{max-width:680px;margin:0 auto;padding:12px}
a{color:#ffd400}a:visited{color:#ff9d00}
hr{border:0;border-top:1px solid #444;margin:18px 0}
h1{font:28px Impact,"Arial Black",sans-serif;color:#ffd400;letter-spacing:1px;display:flex;align-items:center;gap:8px;text-shadow:2px 2px 0 #c00}
.center{text-align:center}
.logo{border-radius:50%;background:#fff;border:2px solid #ffd400;box-shadow:0 0 18px #ffb000}
address{font-style:normal;color:#ff3b3b;text-align:center;font-size:14px}
address a{color:#ff3b3b}
.system{position:relative;width:min(640px,96vw);aspect-ratio:1;margin:10px auto 0}
.orbit{position:absolute;inset:0;animation:spin 240s linear infinite}
.planet{position:absolute;left:50%;top:50%;width:0;height:0;text-decoration:none;
transform:rotate(calc(360deg*var(--i)/var(--n))) translateY(calc(-1*min(270px,40vw))) rotate(calc(-360deg*var(--i)/var(--n)))}
.planet>*{animation:spin 240s linear infinite reverse}
.orb{position:absolute;width:var(--sz);height:var(--sz);left:calc(var(--sz)/-2);top:calc(var(--sz)/-2);border-radius:50%;
background:radial-gradient(circle at 32% 30%,#fff 0,var(--c) 22%,#000 100%);box-shadow:0 0 10px var(--c);transition:transform .2s}
.ringed .orb::after{content:"";position:absolute;inset:38% -35%;border:3px solid #ff4040;border-radius:50%;transform:rotate(-18deg)}
.pl{position:absolute;left:-60px;width:120px;top:calc(var(--sz)/-2 - 18px);text-align:center;font:12px Impact,"Arial Black",sans-serif;color:#ffd400;text-transform:uppercase;text-shadow:1px 1px 0 #000;white-space:nowrap}
.planet:hover .orb{transform:scale(1.25)}
.planet:hover .pl{color:#fff}
.sun{position:absolute;left:50%;top:50%;width:38%;transform:translate(-50%,-50%)}
.sun img{width:100%;border-radius:50%;background:#fff;box-shadow:0 0 40px #ffb000,0 0 90px #ff6a00;display:block}
.tag{text-align:center;font:22px Impact,"Arial Black",sans-serif;color:#ffd400;text-shadow:2px 2px 0 #c00;letter-spacing:1px}
@keyframes spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.orbit,.planet>*{animation:none}}
@media(max-width:520px){.pl{font-size:9px}}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-size:13px}
.thumb img{border:2px solid #ffd400}
.codebox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;padding:10px;border:1px solid #c00;background:#0a0a0a}
.codebox label{color:#ff3b3b}
.codebox input{font:16px "Courier New",monospace;text-transform:uppercase;width:150px;background:#000;color:#0f0;border:1px solid #0f0;padding:3px 5px}
.codebox button{font:14px Impact,sans-serif;background:#c00;color:#ffd400;border:2px outset #f44;padding:3px 12px;cursor:pointer}
#codemsg{width:100%;text-align:center;color:#ff3b3b;font:bold 13px "Courier New",monospace;min-height:1em}
.classified{color:#ff3b3b}
@media(max-width:480px){.thumbs{grid-template-columns:repeat(2,1fr)}}
