:root{--paper:#f4ecdc;--card:#fbf6ec;--ink:#3b3121;--mute:#7d705c;--line:rgba(59,49,33,.14);--acc:#8a5a2b;
--serif:"EB Garamond","Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Noto Serif CJK JP",Georgia,serif;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--paper:#16141a;--card:#211e25;--ink:#dad4ca;--mute:#968c7e;--line:rgba(255,255,255,.13);--acc:#d0a46e}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.45}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{padding:12px 16px calc(150px + env(safe-area-inset-bottom));max-width:820px;margin:0 auto}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.top h1{font-size:24px;font-weight:500;margin:0;letter-spacing:.02em}
.btn{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:24px}
.row{margin:18px 0 6px}.row h2{font-size:19px;font-weight:500;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.row h2 a{min-height:48px;display:flex;align-items:center}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.tile{flex:0 0 132px;scroll-snap-align:start;display:block}
.cov{width:100%;aspect-ratio:1;border-radius:6px;background:var(--card) center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--mute);overflow:hidden}
.cov img{width:100%;height:100%;object-fit:cover;filter:sepia(.25)}
.tt{font-size:15px;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.det .cov{max-width:340px;margin:8px auto 0;border-radius:10px;font-size:90px}
.det h1{font-size:25px;font-weight:500;text-align:center;margin:16px 0 4px}
.det .who{text-align:center;color:var(--mute);min-height:48px;display:flex;justify-content:center;align-items:center}
.play{width:76px;height:76px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;margin:12px auto}
.play .ic{width:34px;height:34px;fill:currentColor;stroke:none}
.meta{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;font-size:16px}
.meta dt{color:var(--mute);font-size:14px}.meta dd{margin:0 0 10px}.meta a{text-decoration:underline;text-decoration-color:var(--line)}
.list a{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--line)}
.list .cov{width:48px;flex:0 0 48px;font-size:20px}
.pl{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);display:none;align-items:center;gap:4px;padding:0 8px;height:64px;z-index:5}
.pl.on{display:flex}.pl .t{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .bar{position:absolute;left:0;right:0;top:-10px;height:20px;margin:0;width:100%;opacity:.9;accent-color:var(--acc)}
.pl .ic{fill:currentColor;stroke:none}
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:6}
.tabs a{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;color:var(--mute)}.tabs a.cur{color:var(--ink)}
input.q{width:100%;min-height:48px;font:inherit;padding:0 14px;border-radius:24px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.small{font-size:13px;color:var(--mute)}
#ssr{display:none}
.fade{animation:f .22s ease}@keyframes f{from{opacity:0;transform:translateY(4px)}}
.cov.card{background:linear-gradient(160deg,var(--card),var(--paper));font-size:20px;color:var(--mute);font-style:italic;padding:10px;text-align:center}
.cov.card span{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 4px}
.cov{position:relative}
.cov.card img{position:absolute;inset:0;filter:sepia(.35) brightness(.92)}
.cov.card .ov{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;border:0;font-size:14px;line-height:1.2;font-style:normal;text-align:left;color:#fbf6ec;background:linear-gradient(transparent,rgba(30,24,16,.82));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cov.card{padding:0}
.det .perf{text-align:center;font-size:15px;color:var(--mute);margin-top:-8px}
.tt{color:var(--mute);font-size:13px}
.top span{display:flex}