@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:#f8f9fa;color:#1a1a1a;line-height:1.7}
a{color:#16a34a;text-decoration:none}a:hover{text-decoration:underline}

.w{max-width:820px;margin:0 auto;padding:0 18px}
header{padding:14px 0;border-bottom:2px solid #16a34a;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px}
.logo{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:700;color:#16a34a;text-decoration:none}
.logo small{font-weight:400;color:#999;font-size:.7rem}
header nav a{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#888;margin-left:8px;text-decoration:none}
header nav a:hover{color:#16a34a}

.hero{padding:28px 0 18px}
.hero h1{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800}
.hero h1 span{color:#16a34a}
.hero p{font-size:.84rem;color:#888;margin-top:4px}

.cat-nav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 20px}
.cat-nav a{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;padding:4px 12px;border:1px solid #ddd;border-radius:4px;color:#666;text-decoration:none}
.cat-nav a:hover{border-color:#16a34a;color:#16a34a}

/* Ranking table */
.rank-section{margin-bottom:28px}
.rank-title{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #eee}
.rank-row{background:#fff;border:1px solid #eee;margin-bottom:6px;border-radius:6px;overflow:hidden}
.rank-head{padding:10px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.1s}
.rank-head:hover{background:#f0fdf4}
.rank-num{font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:#16a34a;min-width:28px}
.rank-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1;min-width:0}
.rank-info h3{font-size:.88rem;font-weight:700;margin-bottom:1px}
.rank-info .note{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#16a34a}
.rank-info .blurb{font-size:.74rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-arrow{font-size:.7rem;color:#ccc;transition:transform .2s}
.rank-row.open .rank-arrow{transform:rotate(90deg)}
.rank-detail{display:none;padding:0 14px 14px;border-top:1px solid #f0f0f0}
.rank-row.open .rank-detail{display:block}
.rank-detail .gal{display:flex;gap:5px;overflow-x:auto;padding:8px 0}
.rank-detail .gal img{width:130px;height:86px;border-radius:4px;object-fit:cover;border:1px solid #eee;flex-shrink:0}
.rank-detail>p{font-size:.82rem;color:#555;margin:6px 0}
.rank-detail .pro,.rank-detail .con{display:inline-block;vertical-align:top;width:48%;margin-bottom:6px}
.rank-detail .pro h4{font-size:.64rem;color:#16a34a;text-transform:uppercase;margin-bottom:2px}
.rank-detail .con h4{font-size:.64rem;color:#dc2626;text-transform:uppercase;margin-bottom:2px}
.rank-detail li{font-size:.76rem;color:#666;list-style:none;padding-left:11px;position:relative}
.rank-detail .pro li::before{content:"+";position:absolute;left:0;color:#16a34a;font-weight:700}
.rank-detail .con li::before{content:"-";position:absolute;left:0;color:#dc2626;font-weight:700}
.rank-detail ul{padding:0}
.btn-d{font-family:'JetBrains Mono',monospace;display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;padding:5px 12px;background:#16a34a;color:#fff;border-radius:4px;text-decoration:none;margin-top:4px}
.btn-d:hover{background:#15803d;color:#fff}

footer{border-top:2px solid #16a34a;padding:14px 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#bbb}
footer a{color:#888;margin:0 4px;text-decoration:none}

.lp{max-width:580px;margin:0 auto;padding:28px 18px 44px}
.lp h1{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;margin-bottom:14px;color:#16a34a}
.lp h2{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;margin:12px 0 3px}
.lp p,.lp li{font-size:.8rem;color:#666;margin-bottom:5px}
.lp ul{padding-left:13px}

@media(max-width:600px){.rank-info .blurb{display:none}.rank-detail .pro,.rank-detail .con{width:100%}}