*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fffaf3;color:#22223b;line-height:1.6}
a{color:#5b4bdb}header.top{background:#fff;border-bottom:1px solid #f0e6d8;position:sticky;top:0;z-index:5}.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.nav{display:flex;align-items:center;gap:14px;height:58px}.brand{font-weight:900;font-size:20px;text-decoration:none;color:#22223b}.brand span{color:#ff6b6b}.nav .sp{flex:1}.nav a.l{color:#555;text-decoration:none;font-weight:600;font-size:15px}
.prev{background:#22223b;color:#ffd166;text-align:center;font-size:13px;padding:5px}
.hero{padding:42px 0 18px;text-align:center}.hero h1{font-size:clamp(30px,5vw,46px);margin:.1em 0;line-height:1.15}.hero p{color:#5c5f7a;font-size:18px;max-width:640px;margin:8px auto 18px}
#q{width:100%;max-width:560px;font:inherit;font-size:18px;padding:14px 20px;border-radius:999px;border:2px solid #eadfce;outline:none;background:#fff}#q:focus{border-color:#ff9f68}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px}.chip{border:0;background:#fff;border:1.5px solid #eadfce;border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:#444}.chip.on{background:#22223b;color:#fff;border-color:#22223b}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding:18px 0 40px}
.card{background:#fff;border-radius:20px;box-shadow:0 4px 18px rgba(34,34,59,.07);text-decoration:none;color:inherit;display:flex;flex-direction:column;overflow:hidden;transition:transform .12s}.card:hover{transform:translateY(-3px)}
.art{height:110px;display:flex;align-items:center;justify-content:center;font-size:54px}.card .b{padding:12px 16px 16px}.card h3{margin:2px 0 6px;font-size:18px;line-height:1.25}.card p{margin:0;font-size:14px;color:#5c5f7a}
.badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;border-radius:6px;padding:2px 7px;margin-right:6px}.rising{background:#ffe0e0;color:#c0392b}.evergreen{background:#e3f6e8;color:#1e7a43}.k{background:#eef0ff;color:#4b4fb5}
article{max-width:760px;margin:0 auto;padding:22px 18px 50px}.crumb{font-size:14px;color:#888}.crumb a{color:#888}
.head{display:flex;gap:18px;align-items:center;margin:14px 0 6px}.head .art{width:96px;height:96px;border-radius:24px;flex:none;font-size:52px}.head h1{margin:0;font-size:clamp(26px,4.4vw,38px);line-height:1.15}.aka{color:#777;font-size:14px;margin-top:4px}
.tldr{background:#fff;border-left:5px solid #ff9f68;border-radius:12px;padding:14px 18px;font-size:18px;margin:18px 0;box-shadow:0 2px 10px rgba(0,0,0,.04)}
h2{font-size:22px;margin:30px 0 8px}.tl{list-style:none;padding:0;margin:0;border-left:3px solid #ffd6a5}.tl li{padding:4px 0 10px 16px;position:relative}.tl li:before{content:"";position:absolute;left:-8px;top:12px;width:13px;height:13px;border-radius:50%;background:#ff9f68}.tl b{display:block;font-size:13px;color:#c0662b}
.ex{display:flex;flex-direction:column;gap:8px}.ex div{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border:1.5px dashed #eadfce;border-radius:12px;padding:10px 14px}.ex button{border:0;background:#22223b;color:#fff;border-radius:8px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer;flex:none}
details{background:#fff;border-radius:12px;padding:12px 16px;margin:8px 0;box-shadow:0 1px 6px rgba(0,0,0,.04)}summary{font-weight:700;cursor:pointer}
.src{font-size:14px;color:#666}.src li{margin:4px 0}.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.rel .art{height:70px;font-size:36px}
.cta{margin:30px 0;background:linear-gradient(135deg,#22223b,#4a4e8a);color:#fff;border-radius:20px;padding:20px 22px}.cta a{color:#ffd166;font-weight:800}
footer{border-top:1px solid #f0e6d8;color:#888;font-size:14px;padding:22px 0 40px;text-align:center}footer a{color:#888}
.empty{text-align:center;color:#888;display:none;padding:30px}.art img{width:100%;height:100%;object-fit:cover;display:block}.card .art{height:auto;aspect-ratio:5/4;overflow:hidden}.card .art img{object-position:center 25%}
.head .art{width:120px;height:120px;overflow:hidden;padding:0}.upd{font-size:13px;color:#888;margin-top:2px}.heat{padding-left:18px}.heat li{margin:6px 0}.heat span{color:#888;font-size:13px}.heat code{background:#f3eee6;border-radius:4px;padding:0 4px;font-size:14px}
.hero-art{display:block;width:min(560px,100%);margin:6px auto 0;border-radius:22px;box-shadow:0 6px 24px rgba(34,34,59,.12)}.rel .art{height:auto}