:root{--paper:#F5F1E8;--ink:#1d1b16;--green:#3EB370;--r:6px}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);
  font:16px/1.6 "Microsoft YaHei","PingFang SC","Noto Sans SC","Hiragino Sans GB",sans-serif;min-height:100dvh}
header{padding:18px 24px 6px;text-align:center}
h1{font-size:clamp(19px,3.2vw,28px);font-weight:700;letter-spacing:.06em}
.sub{opacity:.5;font-size:13px;margin-top:6px}
.hint{opacity:.42;font-size:12px;margin-top:12px}
.nav{display:flex;gap:6px;font-size:12px;justify-content:center;flex-wrap:wrap;padding:16px 16px 0}
.nav a{text-decoration:none;padding:5px 11px;border-radius:999px;background:#0000000d;color:inherit;opacity:.6}
.nav a.on{background:var(--green);color:#08130c;opacity:1;font-weight:700}
dialog{border:0;padding:0;background:none;max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(20,18,14,.85);backdrop-filter:blur(3px)}
.detail{height:100%;display:flex;gap:clamp(20px,5vw,60px);align-items:center;justify-content:center;
  padding:5vh 6vw;flex-wrap:wrap;color:#f6f2e8}
.detail img{max-height:72vh;max-width:min(88vw,400px);box-shadow:0 24px 60px rgba(24,18,8,.55)}
.meta{max-width:330px}
.meta .y{font-size:clamp(38px,8vw,68px);font-weight:700;line-height:1}
.meta p{opacity:.62;font-size:14px;margin-top:10px}
.act{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.act a,.act button{font:inherit;font-size:14px;padding:10px 18px;border-radius:999px;
  border:1px solid #f6f2e855;background:none;color:inherit;cursor:pointer;text-decoration:none}
.act .p{background:var(--green);border-color:var(--green);color:#08130c;font-weight:700}
.act .off{opacity:.62;cursor:not-allowed}
.note{margin-top:16px;font-size:12px;opacity:.42;line-height:1.7}
.x{position:fixed;top:16px;right:20px;font-size:26px;background:none;border:0;color:#f6f2e8;cursor:pointer}

/* 键盘焦点环：原本 .bk3:focus-visible 只有位移，键盘用户看不出焦点在哪 */
.bk3:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.bar2 button:focus-visible,.act a:focus-visible,.act button:focus-visible,.x:focus-visible,
.nav a:focus-visible,.c:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .bk3:hover,.bk3:focus-visible{transform:rotate(var(--lean,0deg))}
}