body{margin:0;background:#000;color:#e8e8e8;font-family:Helvetica,Arial,sans-serif}
.top{padding:28px 48px;border-bottom:1px solid #222;letter-spacing:6px;font-size:14px;color:#aaa}
h1{font-weight:300;letter-spacing:10px;font-size:40px;margin:40px 48px 20px}
.bar{margin:0 48px;display:flex;gap:12px;align-items:center}
#q{flex:1;background:#000;color:#fff;border:1px solid #555;padding:16px 20px;font-size:18px;letter-spacing:2px;outline:none}
#q:focus{border-color:#fff}
.spin{width:22px;height:22px;border:2px solid #333;border-top-color:#fff;border-radius:50%;animation:s .8s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
button{background:#000;color:#fff;border:1px solid #fff;padding:16px 28px;letter-spacing:4px;font-size:13px;cursor:pointer}
button:hover,.openbtn:hover{background:#fff;color:#000}
.note{margin:14px 48px;color:#888;font-size:13px;letter-spacing:2px}
.msg{margin:10px 48px;padding:14px 18px;border:1px solid #ff4d4d;color:#ff9c9c;letter-spacing:3px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 48px 60px}
.c{border:1px solid #2a2a2a;padding:18px;background:#0a0a0a;cursor:pointer}.c:hover{border-color:#888}
.tag{font-size:11px;letter-spacing:3px;color:#888}.open{color:#ff4d4d}
.t{font-size:17px;margin:10px 0 8px}.d{font-size:13px;color:#999;line-height:1.5}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center}
.ov[hidden],.msg[hidden],.spin[hidden]{display:none}
.panel{position:relative;background:#050505;border:1px solid #444;padding:28px;width:560px;max-height:90vh;overflow:auto}
.panel img{width:100%;display:block;margin-bottom:16px;border:1px solid #222}
.x{position:absolute;top:6px;right:8px;border:none;font-size:24px;padding:4px 10px}
.openbtn{display:inline-block;margin-top:16px;border:1px solid #fff;color:#fff;padding:14px 32px;letter-spacing:5px;font-size:13px;text-decoration:none}
@media(max-width:800px){.grid{grid-template-columns:1fr}}