:root{--bg:#07080f;--ink:#efe6cf;--muted:#a49db3;--gold:#e8c98a;--line:#ffffff1f;--tile:#ffffff0a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(1200px 800px at 50% -20%,#231d4f 0,#0d0c22 45%,var(--bg) 100%);color:var(--ink);
  font:16px/1.7 "Noto Serif SC","Songti SC","STSong",serif;-webkit-font-smoothing:antialiased}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:max(48px,env(safe-area-inset-top)) 16px 40px}
.hero{text-align:center;margin:24px 0 36px}
.kicker{color:var(--gold);letter-spacing:.3em;font-size:13px;margin:0}
h1{font-size:clamp(48px,12vw,88px);margin:8px 0 4px;letter-spacing:.2em;font-weight:600;
  background:linear-gradient(180deg,#fff6de 0,#e8c98a 60%,#b98d4a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px #ffd98f33}
.lead{color:var(--muted);margin:0 auto;max-width:34em;text-wrap:balance}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:170px;padding:22px 20px;border-radius:18px;
  background:linear-gradient(160deg,#ffffff12,#ffffff04);border:1px solid var(--line);color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1),border-color .3s,box-shadow .3s}
.tile::before{content:attr(data-glyph);position:absolute;right:-6px;bottom:-26px;font-size:120px;line-height:1;color:#ffffff0c;
  transition:color .4s,transform .6s}
.tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,#e8c98a 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:#e8c98a66;box-shadow:0 14px 40px #0009,0 0 30px #ffd98f1f;outline:none}
.tile:hover::before{color:#e8c98a26;transform:scale(1.06) rotate(-4deg)}
.tile:hover::after{opacity:1;animation:spin 3s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.t{font-size:22px;letter-spacing:.12em;color:var(--gold)}
.d{color:var(--muted);font-size:14px}
footer{margin-top:40px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--gold)}
.doc{background:#ffffff08;border:1px solid var(--line);border-radius:16px;padding:20px}
.doc h2{color:var(--gold);font-size:18px;margin:1.4em 0 .4em}.doc h2:first-child{margin-top:0}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:12px}.tile{min-height:150px;padding:16px 14px}.t{font-size:19px;letter-spacing:.06em}.d{font-size:13px;line-height:1.55}.tile::before{font-size:92px;bottom:-18px}.lead br{display:none}}
@media (prefers-reduced-motion:reduce){.tile,.tile::before{transition:none}.tile:hover::after{animation:none}}
.notice{margin:0 auto 20px;max-width:40em;padding:10px 16px;border-radius:12px;border:1px solid #e8c98a55;background:#e8c98a14;color:var(--ink);text-align:center}
.tile.closed{opacity:.45;pointer-events:none}.tile.closed .d::after{content:"（暂时关闭）";color:var(--gold)}