:root{--bg:#fff7ee;--card:#fff;--ink:#2b2321;--mute:#7a6a62;--line:#f0e3d6;--coral:#ff6f5e;--sun:#f2b632;--teal:#16a394;--violet:#7c5cf0;--r:18px;
 --spring:cubic-bezier(.34,1.56,.64,1);font-family:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-size:15px;line-height:1.45;background:var(--bg);color:var(--ink)}
a{color:inherit}h1,h2,h3{font-weight:800;letter-spacing:-.02em}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .35s var(--spring),background .2s}
.pill:active,button:active{transform:scale(.92)}.pop{animation:pop .4s var(--spring)}@keyframes pop{40%{transform:scale(.9)}100%{transform:scale(1)}}
.pill.play{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 3px 0 #e2513f}
.chip{display:inline-flex;align-items:center;font-weight:800;font-size:.7rem;letter-spacing:.03em;padding:3px 10px;border-radius:999px;text-transform:uppercase}
.m-hot{background:#ffe1dc;color:#c43b2b}.m-rising{background:#dff5f1;color:#0e7a6e}.m-steady{background:#ece7fb;color:#5b45b8}.badge{background:#fff0c9;color:#8a6200}
.live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--teal);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 #16a39466;animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px #16a39400}100%{box-shadow:0 0 0 0 #16a39400}}
.tile{display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;font-weight:800;letter-spacing:-.03em;background-image:radial-gradient(circle at 30% 25%,#ffffff40 0 18%,transparent 19%),radial-gradient(circle at 80% 85%,#ffffff26 0 26%,transparent 27%)}
.who{color:var(--mute);font-size:.75rem}.note{font-size:.85rem;color:var(--mute)}.warn{background:#fff0c9;color:#6b4c00;padding:10px 14px;border-radius:14px}
/* Home */
.hero{max-width:1040px;margin:0 auto;padding:22px 16px 10px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{margin:0;font-size:clamp(2.3rem,11vw,4.2rem);line-height:.95;letter-spacing:-.04em}h1 span{color:var(--coral)}

.sub{margin:8px 0 14px;color:var(--mute);font-weight:600}
.stats{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}.stats div{background:var(--card);border-radius:16px;padding:10px 12px;font-size:.72rem;color:var(--mute);font-weight:600}
.stats div:nth-child(1){background:#ffe8e3}.stats div:nth-child(2){background:#dff5f1}.stats div:nth-child(3){background:#fff1cf}
.stats b{display:block;font-size:1.2rem;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:12px;background:#f3e6d8;border-radius:999px;padding:4px}
.seg button{position:relative;z-index:1;min-height:40px;min-width:92px;border:0;background:none;font:inherit;font-weight:800;color:var(--mute);border-radius:999px;cursor:pointer;transition:color .2s}
.seg button[aria-pressed=true]{color:var(--ink)}.knob{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:#fff;border-radius:999px;box-shadow:0 2px 6px #0001;transition:transform .45s var(--spring)}
.mode-cards .knob{transform:translateX(100%)}
header{position:sticky;top:0;z-index:5;background:var(--bg);max-width:1040px;margin:0 auto;padding:0 12px}
nav[role=tablist]{position:relative;display:grid;grid-template-columns:repeat(4,1fr);--i:0}nav[role=tablist] button{min-height:46px;border:0;background:none;font:inherit;font-weight:700;color:var(--mute);cursor:pointer;position:relative;z-index:1}
nav[role=tablist] button.on{color:var(--ink)}.bar{position:absolute;bottom:4px;left:0;width:25%;height:4px;border-radius:4px;background:var(--coral);transform:translateX(calc(var(--i)*100%));transition:transform .45s var(--spring)}
main{max-width:1040px;margin:0 auto;padding:4px 12px 90px}.mode-list main{max-width:760px}
.view.in{animation:fade .35s ease}@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.card{display:grid;grid-template-columns:44px 1fr;gap:12px;background:var(--card);border-radius:var(--r);padding:14px;margin:0 0 10px;border:1px solid var(--line)}
.thumb{width:44px;height:44px;border-radius:12px;object-fit:cover;object-position:top;background:#f3e6d8;font-size:1rem}
.body{display:grid;gap:4px;min-width:0}.card h3{margin:0;font-size:1.05rem}.meta{color:var(--mute);font-size:.82rem}.desc{margin:2px 0}.tick{font-size:.82rem}.tick b{color:var(--coral)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.mom{font-size:.8rem}
.claims{margin:4px 0 0;padding:0;list-style:none;font-size:.85rem;font-variant-numeric:tabular-nums}.claims li{padding:4px 0;border-top:1px dashed var(--line)}
ol#poplist{padding:0;list-style:none;counter-reset:r;margin:0}ol#poplist>li{counter-increment:r}ol#poplist>li>.card>.body>h3:before{content:counter(r);display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;margin-right:8px;border-radius:999px;background:var(--sun);color:var(--ink);font-size:.8rem}
.unv{opacity:.85;border-style:dashed}.unv .tile{filter:saturate(.3)}
h2{font-size:.85rem;color:var(--mute);margin:20px 4px 8px}
.day{display:grid;grid-template-columns:64px 1fr;gap:10px;background:var(--card);border-radius:16px;padding:12px;margin-bottom:8px;font-size:.85rem;border:1px solid var(--line)}
.day time{font-weight:800;color:var(--violet)}.day ul{margin:0;padding:0;list-style:none}.day li{padding:2px 0}
.mode-cards .card{grid-template-columns:1fr;padding:0;overflow:hidden}.mode-cards .thumb{width:100%;height:190px;border-radius:0;font-size:3rem}.mode-cards .body{padding:14px 16px 16px}
.mode-cards .card h3{font-size:1.3rem}.mode-cards .acts .play{flex:1;font-size:1rem}
.mode-cards #feed,.mode-cards #poplist,.mode-cards #nodata,.mode-cards #unvlist,.mode-cards #agg{display:grid;gap:14px}.mode-cards .card{margin:0}
@media(min-width:760px){.mode-cards #feed,.mode-cards #poplist,.mode-cards #nodata,.mode-cards #unvlist,.mode-cards #agg{grid-template-columns:1fr 1fr}.mode-cards #feed h2{grid-column:1/-1}}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;background:var(--violet);border-color:var(--violet);color:#fff;min-height:56px;padding:0 22px;font-size:1rem;box-shadow:0 6px 18px #7c5cf055}
footer{font-size:.75rem;color:var(--mute);padding:16px 16px 100px;max-width:760px;margin:0 auto}
/* Swipe */
body.swipe{height:100dvh;overflow:hidden;background:linear-gradient(#fde9dc,#efe6ff)}
.swipe #feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior:contain}
.s{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;padding:62px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.stage{flex:1;min-height:0;border-radius:24px;overflow:hidden;background:#f6e6d8 linear-gradient(110deg,#f6e6d8 30%,#fff3e8 50%,#f6e6d8 70%) 0 0/300% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-150% 0}}
.pv{display:flex;width:100%;height:100%;object-fit:cover;object-position:top;font-size:5rem}
.info{position:relative;z-index:4;margin:-26px 8px 0;background:#fffdf9;border-radius:20px;padding:6px 12px 10px;box-shadow:0 6px 20px #2b23211f;cursor:pointer;transition:margin .4s var(--spring)}
.grab{display:block;width:36px;height:4px;border-radius:4px;background:#e6d8ca;margin:0 auto 6px}
.row{display:flex;align-items:center;gap:10px}.ttl{flex:1;min-width:0}.info h2{margin:0;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.info .row .play{min-height:48px;padding:0 20px;font-size:1rem}
.more{max-height:0;overflow:hidden}.info.open .more{max-height:55vh;overflow:auto;margin-top:8px}.info.open{margin-top:-46vh}
.bgblur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.2);transform:scale(1.15);opacity:.55}
.stage{position:relative}.is-land .pv{position:relative;object-fit:contain;object-position:center;padding:0 6px}
.chip.land{position:absolute;top:12px;left:12px;background:#fffdf9e6;color:var(--violet);box-shadow:0 2px 8px #0002}
.s .rail{position:absolute;right:22px;top:76px;display:flex;flex-direction:column;gap:10px}
.rail button,.rail a{width:48px;height:48px;border-radius:999px;border:0;background:#fffdf9e6;color:var(--ink);font:800 1.05rem/1 inherit;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;box-shadow:0 3px 10px #0002;transition:transform .35s var(--spring)}
.rail button:first-child{background:var(--coral);color:#fff}
.home{position:fixed;top:calc(10px + env(safe-area-inset-top));left:12px;z-index:9;box-shadow:0 3px 10px #0001}
.fr{position:absolute;inset:62px 12px 12px;width:calc(100% - 24px);height:calc(100% - 74px);border:0;border-radius:24px;background:#fff;z-index:7}.x{position:absolute;top:72px;right:22px;z-index:8}
.msg{padding:80px 16px;text-align:center}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sorts{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}.sorts .pill{min-height:40px;padding:0 14px;font-size:.85rem}.sorts .pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.blow{background:#ffe1dc;color:#c43b2b;margin-right:6px}.rx{font-size:.8rem;margin-top:4px}
.rail .react{flex-direction:column;gap:0;font-size:1.3rem}.rail .react small{font-size:.62rem;font-weight:800;line-height:1}.rail .react.on{background:#fff0c9;box-shadow:0 0 0 2px var(--sun)}
.burst{animation:burst .5s var(--spring)}@keyframes burst{30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.vid{background:#f6e6d8}.is-land .vid{object-fit:contain}.credit{position:absolute;right:12px;bottom:34px;z-index:2;font-size:.7rem;font-weight:700;background:#fffdf9d9;border-radius:999px;padding:3px 9px}.credit a{text-decoration:none}
.dside{display:none}
@media(min-width:1024px){
 body.swipe{display:grid;grid-template-columns:minmax(300px,420px) 400px;justify-content:center;align-items:center;gap:32px;padding:0 24px;height:100vh}
 .swipe #feed{scrollbar-width:none;height:780px;max-height:calc(100vh - 32px);width:400px;border-radius:36px;background:#fffaf4;box-shadow:0 20px 60px #7c5cf030,0 0 0 10px #fff;order:2}
 .swipe .s{height:min(780px,calc(100vh - 32px));max-width:none;padding-top:14px}
 .swipe .home{top:20px;left:24px}
 #dlist{display:block;order:1;height:780px;max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border-radius:24px;border:1px solid var(--line);padding:8px}
 #dlist h2{margin:8px 10px 10px;font-size:1rem;color:var(--ink)}#dlist h2 small{color:var(--mute);font-weight:700}
 .drow{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;font:inherit;color:var(--ink);padding:8px 10px;border-radius:16px;cursor:pointer;transition:background .2s,transform .35s var(--spring)}
 .drow:hover{background:#fff4ea}.drow.on{background:#ffe8e3;box-shadow:inset 3px 0 0 var(--coral)}.drow .tick{display:block;font-size:.85rem}.drow .chip{margin-top:4px}
}
@media(min-width:1280px){
 body.swipe{grid-template-columns:minmax(320px,420px) 400px 260px}
 #dstats{display:block;order:3;align-self:center}.stat{background:var(--card);border-radius:18px;padding:12px 14px;margin-bottom:10px;font-size:.75rem;color:var(--mute);font-weight:600}
 .stat:nth-child(1){background:#ffe8e3}.stat:nth-child(2){background:#dff5f1}.stat:nth-child(3){background:#fff1cf}.stat b{display:block;font-size:1.3rem;color:var(--ink);font-weight:800}
 #dstats h3{font-size:.9rem;margin:16px 4px 6px}#dstats ol{padding-left:20px;margin:0;font-size:.85rem}#dstats li{margin-bottom:6px}#dstats li a{font-weight:700;text-decoration:none}#dstats .who{display:block}
}
