:root{--bg:#0f1722;--bg2:#16202e;--panel:#1b2738;--gold:#d4af37;--ink:#e9e4d4;--mute:#9aa7b8;--line:#2c3b52}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 Georgia,'Times New Roman',serif}
a{color:var(--gold)}a:hover{color:#f0d77a}
header.nav{display:flex;gap:22px;align-items:center;padding:14px max(16px,4vw);border-bottom:1px solid var(--line);background:rgba(15,23,34,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
header.nav .brand{font-weight:700;letter-spacing:.14em;color:var(--gold);text-decoration:none;font-size:18px}
header.nav a.l{color:var(--ink);text-decoration:none;font-size:15px;opacity:.85}header.nav a.l:hover{opacity:1;color:var(--gold)}
main{max-width:1180px;margin:0 auto;padding:28px max(16px,4vw) 70px}
h1,h2,h3{font-weight:700;line-height:1.2}
.hero{min-height:78vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;padding:40px 16px}
.hero svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero .in{position:relative;z-index:2}
.hero h1{font-size:clamp(54px,11vw,140px);letter-spacing:.1em;margin:0;color:var(--gold);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero .by{font-size:clamp(18px,2.6vw,26px);letter-spacing:.22em;text-transform:uppercase;margin-top:10px;color:var(--ink)}
.hero .tag{max-width:640px;margin:26px auto 0;color:var(--mute);font-size:19px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;border:2px solid var(--gold);color:var(--gold);text-decoration:none;font-weight:700;letter-spacing:.04em}
.btn.fill{background:var(--gold);color:#101820}.btn:hover{background:#f0d77a;color:#101820}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{margin:.1em 0 .4em;color:var(--gold)}.card p{margin:.3em 0;color:var(--mute);font-size:16px}
.note{border-left:4px solid var(--gold);background:var(--bg2);padding:12px 16px;border-radius:0 10px 10px 0;color:var(--mute);font-size:15px}
/* explorer */
.stage{position:relative;width:100%;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;user-select:none}
.stage img{display:block;width:100%;height:auto}
.hb{position:absolute;border:2px solid rgba(212,175,55,.0);border-radius:3px;cursor:pointer;transition:background .12s,border-color .12s}
.hb:hover,.hb.on{border-color:var(--gold);background:rgba(212,175,55,.22);box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.pop{position:fixed;z-index:50;width:260px;background:var(--panel);border:2px solid var(--gold);border-radius:12px;padding:10px;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none}
.pop .pic{height:170px;border-radius:8px;background-color:#222;background-repeat:no-repeat;border:1px solid var(--line)}
.pop b{display:block;margin-top:8px;color:var(--gold)}.pop span{color:var(--mute);font-size:14px}
.bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:14px;cursor:pointer}
.chip.on{border-color:var(--gold);color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:18px}
.grid a{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;text-decoration:none;color:var(--ink);font-size:13px}
.grid a:hover{border-color:var(--gold)}.grid img{width:100%;height:70px;object-fit:contain;background:#222;border-radius:6px}
/* glyph */
.gl{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:28px;align-items:start}
@media(max-width:760px){.gl{grid-template-columns:1fr}}
.gl .big{background:#000;border:1px solid var(--line);border-radius:12px;padding:10px}.gl .big img{width:100%;height:auto;display:block;border-radius:6px}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:0 0 16px}
.sec h3{margin:.1em 0 .5em;color:var(--gold);font-size:18px}
.pager{display:flex;justify-content:space-between;margin-top:14px;gap:10px}
form.f{display:grid;gap:8px}form.f input,form.f textarea,form.f select{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font:inherit}
form.f button{justify-self:start}
footer{border-top:1px solid var(--line);color:var(--mute);font-size:14px;padding:22px max(16px,4vw)}