:root{
  --paper:#f5f2e9;--panel:#fffdf7;--ink:#1d2a2c;--muted:#5d6a69;--line:#dcd6c6;
  --accent:#0d6455;--accent-soft:#dcebe3;--amber:#8a5a10;--amber-soft:#f4e7cd;--toolbar:rgba(245,242,233,.94);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#13191a;--panel:#1a2223;--ink:#e8e4d9;--muted:#9eaaa7;--line:#2f3a3b;
    --accent:#62c7b1;--accent-soft:#1d3531;--amber:#e3b868;--amber-soft:#3a2f1a;--toolbar:rgba(19,25,26,.94)}
}
*{box-sizing:border-box}
html{scroll-padding-top:140px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans)}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:5;padding:8px 14px;background:var(--ink);color:var(--paper)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

.masthead{padding:72px 0 44px;border-bottom:1px solid var(--line)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
h1{margin-top:18px;font:700 clamp(36px,6vw,64px)/1.15 var(--serif);letter-spacing:.01em}
.lede{margin-top:18px;max-width:40em;font-size:18px;color:var(--muted)}
.stats{display:flex;gap:40px;margin-top:32px}
.stats div{display:flex;flex-direction:column-reverse}
.stats dd{font:600 32px/1.1 var(--serif)}
.stats dt{margin-top:4px;font-size:13px;color:var(--muted)}

.toolbar{position:sticky;top:0;z-index:3;padding:14px 0 10px;background:var(--toolbar);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.controls{display:flex;gap:10px}
.search{flex:1;min-width:0}
input,select{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:15px var(--sans)}
input::placeholder{color:var(--muted)}
.select{flex:0 0 128px}
.chips{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:17px;background:transparent;color:var(--muted);font:14px var(--sans);cursor:pointer;transition:color .15s,background-color .15s,border-color .15s}
.chip span{font:12px var(--mono);opacity:.7}
.chip:hover{color:var(--ink);border-color:var(--muted)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.result{margin-top:8px;min-height:20px;font-size:13px;color:var(--muted)}

.shelf{padding:52px 0 8px}
.shelf-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.shelf-no{font:500 15px var(--mono);color:var(--accent)}
.shelf h2{font:700 26px/1.3 var(--serif)}
.shelf-head p{margin-top:2px;color:var(--muted)}
.shelf-count{font:13px var(--mono);color:var(--muted);white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:18px}
.card{position:relative;display:flex;flex-direction:column;padding:18px 18px 16px;border:1px solid var(--line);border-radius:4px;background:var(--panel);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card:focus-within{border-color:var(--accent)}
.card-kind{font:12px/1 var(--mono);color:var(--accent)}
.card h3{margin-top:10px;font:600 18px/1.4 var(--serif)}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:4px}
.card h3 a:focus-visible{outline:none}
.card h3 a:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.card-desc{flex:1;margin-top:6px;font-size:14.5px;color:var(--muted)}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.level{padding:1px 8px;border-radius:3px;background:var(--accent-soft);color:var(--accent)}
.level-1{background:var(--amber-soft);color:var(--amber)}
.level-2{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.card-host{margin-left:auto;font-family:var(--mono);font-size:11.5px}
.card-note{margin-top:8px;font-size:12px;color:var(--amber)}

.empty{padding:72px 0;text-align:center;color:var(--muted)}
.empty .lede{margin-inline:auto}
.reset{margin-top:14px;min-height:38px;padding:0 18px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font:14px var(--sans);cursor:pointer}
.colophon{margin-top:64px;padding:28px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.beian{margin-top:6px}

@media (max-width:640px){
  html{scroll-padding-top:20px}
  .wrap{width:calc(100% - 32px)}
  .masthead{padding:44px 0 32px}
  .lede{font-size:16px}
  .stats{gap:28px}
  .toolbar{position:static}
  .controls{flex-wrap:wrap}
  .search{flex:1 0 100%}
  .select{flex:1 1 0}
  .shelf{padding-top:40px}
  .shelf-head{grid-template-columns:1fr auto;gap:2px 12px}
  .shelf-no{grid-column:1 / -1}
  .shelf h2{font-size:22px}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}