@font-face{font-family:'Catamaran';font-weight:400;font-display:swap;src:url(fonts/catamaran-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Catamaran';font-weight:500;font-display:swap;src:url(fonts/catamaran-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Catamaran';font-weight:600;font-display:swap;src:url(fonts/catamaran-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Catamaran';font-weight:700;font-display:swap;src:url(fonts/catamaran-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Catamaran';font-weight:800;font-display:swap;src:url(fonts/catamaran-tamil-800-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-weight:400;font-display:swap;src:url(fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-weight:500;font-display:swap;src:url(fonts/noto-sans-tamil-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-weight:600;font-display:swap;src:url(fonts/noto-sans-tamil-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-weight:700;font-display:swap;src:url(fonts/noto-sans-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Mukta Malar';font-weight:400;font-display:swap;src:url(fonts/mukta-malar-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Mukta Malar';font-weight:500;font-display:swap;src:url(fonts/mukta-malar-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Mukta Malar';font-weight:600;font-display:swap;src:url(fonts/mukta-malar-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Mukta Malar';font-weight:700;font-display:swap;src:url(fonts/mukta-malar-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Mukta Malar';font-weight:800;font-display:swap;src:url(fonts/mukta-malar-tamil-800-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Madurai';font-weight:400;font-display:swap;src:url(fonts/hind-madurai-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Madurai';font-weight:500;font-display:swap;src:url(fonts/hind-madurai-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Madurai';font-weight:600;font-display:swap;src:url(fonts/hind-madurai-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Madurai';font-weight:700;font-display:swap;src:url(fonts/hind-madurai-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Anek Tamil';font-weight:400;font-display:swap;src:url(fonts/anek-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Anek Tamil';font-weight:500;font-display:swap;src:url(fonts/anek-tamil-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Anek Tamil';font-weight:600;font-display:swap;src:url(fonts/anek-tamil-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Anek Tamil';font-weight:700;font-display:swap;src:url(fonts/anek-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Anek Tamil';font-weight:800;font-display:swap;src:url(fonts/anek-tamil-tamil-800-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Baloo Thambi 2';font-weight:400;font-display:swap;src:url(fonts/baloo-thambi-2-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Baloo Thambi 2';font-weight:500;font-display:swap;src:url(fonts/baloo-thambi-2-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Baloo Thambi 2';font-weight:600;font-display:swap;src:url(fonts/baloo-thambi-2-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Baloo Thambi 2';font-weight:700;font-display:swap;src:url(fonts/baloo-thambi-2-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Baloo Thambi 2';font-weight:800;font-display:swap;src:url(fonts/baloo-thambi-2-tamil-800-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Serif Tamil';font-weight:400;font-display:swap;src:url(fonts/noto-serif-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Serif Tamil';font-weight:500;font-display:swap;src:url(fonts/noto-serif-tamil-tamil-500-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Serif Tamil';font-weight:600;font-display:swap;src:url(fonts/noto-serif-tamil-tamil-600-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Serif Tamil';font-weight:700;font-display:swap;src:url(fonts/noto-serif-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Tiro Tamil';font-weight:400;font-display:swap;src:url(fonts/tiro-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:'Catamaran';font-weight:400;font-display:swap;src:url(fonts/catamaran-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20B9}
@font-face{font-family:'Catamaran';font-weight:500;font-display:swap;src:url(fonts/catamaran-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20B9}
@font-face{font-family:'Catamaran';font-weight:600;font-display:swap;src:url(fonts/catamaran-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20B9}
@font-face{font-family:'Catamaran';font-weight:700;font-display:swap;src:url(fonts/catamaran-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20B9}
@font-face{font-family:'Catamaran';font-weight:800;font-display:swap;src:url(fonts/catamaran-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20B9}

:root{
  --sat:0px;--sab:0px;--fs:16px;--rs:1;--rlh:1.95;--wb:400;--wh:600;--ff-ui:Catamaran,'Noto Sans Tamil',sans-serif;--ff-read:'Noto Sans Tamil',Catamaran,sans-serif;
  --bg:#F4F2ED;--surface:#FFFFFF;--raise:#FFFFFF;--ink:#141317;--ink2:#34323A;--muted:#77737D;--faint:#A9A5AE;
  --line:#EAE6DE;--chip:#E9E5DC;--accent:#C8102E;--accent-ink:#A80D26;--accent-soft:rgba(200,16,46,.09);
  --ok:#2F9E44;--warn:#E8890C;--skel:#ECE8E0;--skel2:#F6F3EE;
  --ease:cubic-bezier(.22,.8,.24,1);
  --tabh:62px;
}
[data-theme=dark]{
  --bg:#0B0C0F;--surface:#15171C;--raise:#1B1E24;--ink:#F0EEEA;--ink2:#D2CFD6;--muted:#8E8A95;--faint:#5B5862;
  --line:#23262D;--chip:#1C1F25;--accent:#FF4F65;--accent-ink:#FF6B7E;--accent-soft:rgba(255,79,101,.13);
  --ok:#51CF66;--warn:#FFA94D;--skel:#1B1D23;--skel2:#23262D;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-ui);
  line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;-webkit-user-select:none;user-select:none;
  padding-bottom:calc(var(--tabh) + var(--sab))}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
[hidden]{display:none!important}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#sbar{position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--bg);z-index:40}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}
.vhead{padding:calc(var(--sat) + 18px) 20px 10px}
.vhead h2{margin:0;font-size:1.75rem;font-weight:800;line-height:1.4}
.vbody{padding:4px 14px 24px}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 16px) 16px 6px 18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.brand>div{min-width:0}
.logo{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:1.15rem;flex:none;padding-top:3px}
.masthead h1{margin:0;font-size:1.38rem;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today{margin:2px 0 0;font-size:.8rem;color:var(--muted);font-weight:500}
.livepill{display:flex;align-items:center;gap:7px;height:30px;padding:2px 12px 0 10px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:.74rem;font-weight:700;color:var(--ink2)}
.livepill.off{color:var(--muted)}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none;margin-top:-2px}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:0;animation:pulse 2.4s infinite}
.statusline.off .live{background:var(--warn)}.statusline.off .live::after{display:none}
@keyframes pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* ---------- category chips ---------- */
.chips{position:sticky;top:var(--sat);z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 16px;background:var(--bg);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.stuck{box-shadow:0 1px 0 var(--line)}
.chip{flex:none;height:36px;padding:2px 16px 0;border-radius:999px;background:var(--chip);color:var(--ink2);font-weight:600;font-size:.9rem;white-space:nowrap;transition:background .2s,color .2s}
.chip.on{background:var(--ink);color:var(--bg)}
.statusline{display:flex;align-items:center;gap:8px;padding:0 20px 8px;font-size:.76rem;color:var(--muted);font-weight:500;min-height:24px}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:rot .8s linear infinite;flex:none}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- section labels ---------- */
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:14px 20px 10px}
.sec h4{margin:0;font-size:1.06rem;font-weight:800;}
.sec span{font-size:.74rem;color:var(--muted);font-weight:600}

/* ---------- top stories carousel ---------- */
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
.slide{position:relative;flex:none;width:86%;aspect-ratio:4/4.3;max-height:430px;border-radius:22px;overflow:hidden;scroll-snap-align:center;
  background:var(--skel);color:#fff;transform:translateZ(0)}
.slide:first-child{scroll-snap-align:start}
.slide img,.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.92) 100%)}
.stext{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px}
.spill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:2px 10px 0 8px;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:.72rem;font-weight:700;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.spill i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.stext h3{margin:10px 0 6px;font-size:1.26rem;line-height:1.55;padding-top:2px;font-weight:800;color:#fff;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.smeta{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.82)}
.smeta .msrc{color:#fff}
.dotsnav{display:flex;justify-content:center;gap:6px;margin:10px 0 4px}
.dotsnav i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .25s var(--ease),background .25s}
.dotsnav i.on{width:18px;background:var(--accent)}

/* feature card (first story in a section) */
.feature{position:relative;margin:0 14px 12px;border-radius:22px;overflow:hidden;aspect-ratio:16/12;background:var(--skel);color:#fff}

/* ---------- list rows ---------- */
.group{background:var(--surface);border-radius:22px;margin:0 12px 14px;overflow:hidden}
.row{display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:15px 16px 14px;position:relative;
  content-visibility:auto;contain-intrinsic-size:auto 124px}
.row+.row::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--line)}
.row:active{background:var(--chip)}
.rmain{min-width:0}
.meta{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);font-weight:500;line-height:1.3}
.meta b{color:var(--ink2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta span{white-space:nowrap}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.row h3{margin:6px 0 0;padding-top:1px;font-size:1.03rem;line-height:1.55;font-weight:var(--wh);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.thumb{width:94px;height:94px;border-radius:14px;object-fit:cover;background:var(--skel);grid-column:2;grid-row:1/3}
.multi{display:inline-flex;align-items:center;gap:7px;margin-top:9px;height:26px;padding:2px 10px 0 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:.73rem;white-space:nowrap}
.dots{display:inline-flex;margin-top:-2px}
.dots i{width:13px;height:13px;border-radius:50%;background:var(--c);border:2px solid var(--surface);margin-left:-5px}
.dots i:first-child{margin-left:0}
.multi .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s;margin-top:-2px}
.row.open .multi .chev{transform:rotate(180deg)}
.alts{grid-column:1/-1;margin-top:10px;padding-top:4px;border-top:1px dashed var(--line)}
.alts .ah{font-size:.72rem;color:var(--muted);font-weight:700;margin:8px 0 2px}
.alt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;width:100%;text-align:left}
.alt .sdot{margin-top:7px}
.alt div{min-width:0}
.alt b{display:block;font-size:.73rem;color:var(--ink2);font-weight:700}
.alt span{display:block;font-size:.88rem;line-height:1.45;color:var(--ink);font-weight:500}
.more{height:1px}
.del{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--accent);grid-column:2;justify-self:end}
.del svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.6}

/* ---------- skeleton / empty ---------- */
.sk i{display:block;height:12px;border-radius:6px;margin:9px 0;background:linear-gradient(90deg,var(--skel) 0%,var(--skel2) 50%,var(--skel) 100%);
  background-size:200% 100%;animation:shimmer 1.3s infinite}
.sk .big{height:auto;aspect-ratio:4/4.3;border-radius:22px;margin:0 16px 14px;width:auto}
.sk .rowsk{padding:16px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.empty{text-align:center;padding:56px 24px;color:var(--muted)}
.empty svg{width:46px;height:46px;margin:0 auto 12px;fill:none;stroke:var(--faint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty h4{margin:0 0 4px;color:var(--ink);font-size:1.02rem;font-weight:700}
.empty p{margin:0 0 18px;font-size:.88rem}
.btn{height:44px;padding:2px 22px 0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:.9rem}
.btn.ghost{background:var(--chip);color:var(--ink)}
.btn.accent{background:var(--accent);color:#fff}

/* ---------- bottom tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(var(--tabh) + var(--sab));padding:6px 6px var(--sab);
  background:var(--surface);border-top:1px solid var(--line);transition:transform .28s var(--ease)}
.tabbar.hide{transform:translateY(105%)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted)}
.tabbar .ti{width:58px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background .2s}
.tabbar .ti svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar b{font-size:.7rem;font-weight:600;line-height:1.2}
.tabbar .on{color:var(--ink)}
.tabbar .on .ti{background:var(--accent-soft);color:var(--accent)}
.tabbar .on b{font-weight:800}

/* ---------- search ---------- */
.searchbox{display:flex;align-items:center;gap:10px;height:50px;margin:2px 14px 12px;background:var(--surface);border-radius:16px;padding:0 8px 0 16px;border:1px solid var(--line)}
.searchbox .sicon svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.searchbox input{flex:1;border:0;outline:0;background:none;color:var(--ink);font:500 1rem var(--ff-ui);padding-top:3px;min-width:0;-webkit-user-select:text;user-select:text}
.searchbox input::placeholder{color:var(--faint)}
.searchbox input::-webkit-search-cancel-button{display:none}
.qclear{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.qclear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.recent{display:flex;flex-wrap:wrap;gap:8px;margin:2px 4px 16px}
.recent .chip{height:34px;font-size:.86rem}
.gtitle{font-size:.76rem;font-weight:700;color:var(--muted);margin:16px 8px 8px;}

/* ---------- settings ---------- */
.sgroup{background:var(--surface);border-radius:20px;margin-bottom:14px;overflow:hidden}
.srow{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:58px}
.srow+.srow{border-top:1px solid var(--line)}
.srow .rt{flex:1;min-width:0}
.srow .rt b{display:block;font-weight:600;font-size:.95rem;line-height:1.35}
.srow .rt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35;margin-top:2px}
.srow .rt small.ok{color:var(--ok)}.srow .rt small.warn{color:var(--warn)}
.srow.col{flex-direction:column;align-items:stretch}
.sw{position:relative;width:48px;height:28px;border-radius:999px;background:var(--line);transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw.on{background:var(--accent)}.sw.on::after{transform:translateX(20px)}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:3px;gap:3px;margin-top:10px}
.seg button{flex:1;height:36px;border-radius:9px;font-weight:600;font-size:.86rem;color:var(--ink2);padding-top:2px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.info{padding:14px 16px;font-size:.88rem;line-height:1.6;color:var(--ink2)}
.info p{margin:0 0 10px;display:flex;gap:10px}
.info p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.info .note{color:var(--muted);font-size:.82rem;margin:4px 0 0;display:block}
.ver{text-align:center;color:var(--faint);font-size:.76rem;margin:18px 0 4px}

/* ---------- pull to refresh / pill / toast ---------- */
#ptr{position:fixed;left:50%;top:calc(var(--sat) + 6px);z-index:45;width:40px;height:40px;border-radius:50%;background:var(--surface);
  box-shadow:0 2px 10px rgba(0,0,0,.14);display:grid;place-items:center;transform:translate(-50%,-70px);opacity:0;color:var(--muted)}
#ptr.anim{transition:transform .25s ease,opacity .25s}
#ptr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ptr.ready{color:var(--accent)}
#ptr.spinning svg{animation:rot .8s linear infinite;color:var(--accent)}
.newpill{position:fixed;top:calc(var(--sat) + 62px);left:50%;transform:translateX(-50%);z-index:30;background:var(--accent);color:#fff;
  height:38px;padding:2px 18px 0 14px;border-radius:999px;font-weight:700;font-size:.84rem;box-shadow:0 6px 20px rgba(200,16,46,.35);
  display:flex;align-items:center;gap:6px;animation:drop .35s var(--ease) both}
.newpill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:-2px}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + var(--tabh) + 16px);transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--ink);color:var(--bg);
  padding:10px 18px 8px;border-radius:12px;font-weight:600;font-size:.86rem;transition:all .25s;pointer-events:none;width:max-content;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- reader ---------- */
.reader{position:fixed;inset:0;z-index:60;background:var(--surface);transform:translateX(100%);visibility:hidden;
  transition:transform .32s var(--ease),visibility 0s .32s}
.reader.open{transform:none;visibility:visible;transition:transform .32s var(--ease)}
.r-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:6px;padding:calc(var(--sat) + 8px) 10px 8px;transition:background .2s}
.r-top .rb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(0,0,0,.38);color:#fff;
  font-weight:800;font-size:.95rem;padding-top:2px;transition:background .2s,color .2s}
.r-top .rb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-top .rb.on svg{fill:currentColor}
.r-ttl{flex:1;min-width:0;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s;padding-top:2px}
.reader.solid .r-top,.reader.noimg .r-top{background:var(--surface);box-shadow:0 1px 0 var(--line)}
.reader.solid .r-ttl{opacity:1}
.reader.solid .rb,.reader.noimg .rb{background:transparent;color:var(--ink)}
.reader .rb.on{color:var(--accent)}
.r-prog{position:absolute;left:0;right:0;top:calc(var(--sat) + 56px);height:2px;z-index:4;pointer-events:none}
.r-prog i{display:block;height:100%;width:0;background:var(--accent);transform-origin:left}
.r-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-user-select:text;user-select:text}
.r-hero{position:relative;width:100%;aspect-ratio:4/3.1;max-height:62vh;background:var(--skel);overflow:hidden}
.r-hero img{width:100%;height:100%;object-fit:cover;display:block}
.r-hero::after{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--sat) + 90px);background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.r-sheet{position:relative;background:var(--surface);border-radius:24px 24px 0 0;margin-top:-24px;padding:22px 20px calc(var(--sab) + 40px)}
.reader.noimg .r-sheet{margin-top:0;border-radius:0;padding-top:calc(var(--sat) + 74px)}
.r-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.78rem;color:var(--muted);font-weight:600}
.r-src{display:inline-flex;align-items:center;gap:7px;height:28px;padding:2px 11px 0 9px;border-radius:999px;background:var(--chip);color:var(--ink);font-weight:700}
.r-src i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.r-title{margin:14px 0 10px;font-size:1.55rem;line-height:1.5;font-weight:800;color:var(--ink)}
.r-by{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:6px}
.r-multi{display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:.84rem;width:100%;text-align:left}
.r-multi .dots i{border-color:var(--surface)}
.r-body{margin-top:18px;font-family:var(--ff-read);font-size:calc(17px * var(--rs));line-height:var(--rlh);font-weight:var(--wb);color:var(--ink2);word-wrap:break-word}
.r-body p{margin:0 0 1.05em}
.r-body h2,.r-body h3,.r-body h4{font-family:var(--ff-read);font-weight:800;color:var(--ink);line-height:1.4;margin:1.5em 0 .5em;font-size:1.14em;}
.r-body h3,.r-body h4{font-size:1.04em}
.r-body strong{color:var(--ink);font-weight:700}
.r-body blockquote{margin:1.3em 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);color:var(--ink);font-weight:600}
.r-body ul,.r-body ol{padding-left:1.3em;margin:0 0 1.05em}
.r-body li{margin:.3em 0}
.r-body figure{margin:1.4em -20px}
.r-body figure img{width:100%;height:auto;display:block;background:var(--skel);min-height:120px}
.r-body figcaption{font-family:var(--ff-ui);font-size:.78em;line-height:1.5;color:var(--muted);padding:8px 20px 0}
.r-body table{width:100%;border-collapse:collapse;font-family:var(--ff-ui);font-size:.88em;margin:1em 0;display:block;overflow-x:auto}
.r-body td,.r-body th{border:1px solid var(--line);padding:6px 8px;text-align:left}
.r-body .sk i{height:14px;margin:14px 0}
.r-fail{border-radius:18px;background:var(--bg);padding:18px;font-family:var(--ff-ui);font-size:.95rem;line-height:1.7;color:var(--ink2)}
.r-fail b{display:block;color:var(--ink);font-size:1rem;margin-bottom:4px}
.r-fail p{margin:6px 0 14px}
.r-foot{margin-top:28px;font-family:var(--ff-ui)}
.r-foot h5{margin:0 0 6px;font-size:.92rem;font-weight:800;color:var(--ink)}
.r-foot .alt{border-top:1px solid var(--line);padding:12px 0}
.r-credit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.r-credit button{flex:none;height:38px;padding:2px 16px 0;border-radius:999px;background:var(--chip);color:var(--ink);font-weight:700;font-size:.82rem}

.fade{animation:fadein .32s var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- text settings ---------- */
.mh-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:10px}
.tsbtn{height:36px;min-width:46px;padding:0 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:baseline;justify-content:center;gap:1px;color:var(--ink);font-weight:800}
.tsbtn span{font-size:1.15rem;line-height:1}.tsbtn small{font-size:.78rem;line-height:1}
.tsheet{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .3s}
.tsheet.open{visibility:visible;transition:none}
.ts-back{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .25s}
.tsheet.open .ts-back{opacity:1}
.ts-panel{position:absolute;left:0;right:0;bottom:0;max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:24px 24px 0 0;
  transform:translateY(102%);transition:transform .3s var(--ease);padding-bottom:var(--sab)}
.tsheet.open .ts-panel{transform:none}
.ts-handle{width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 2px}
.ts-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 6px 20px}
.ts-head b{font-size:1.1rem;font-weight:800}
.ts-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.ts-body{overflow-y:auto;padding:4px 16px 22px;overscroll-behavior:contain}
.ts-prev{border-radius:18px;background:var(--bg);padding:14px 16px 4px;margin-bottom:6px}
.ts-prev .pv-h{margin:6px 0 6px;font-size:1.08rem;line-height:1.55;font-weight:var(--wh);color:var(--ink)}
.ts-prev .pv-p{margin:0 0 10px;font-family:var(--ff-read);font-size:calc(17px * var(--rs));line-height:var(--rlh);font-weight:var(--wb);color:var(--ink2)}
.ts-sec{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;font-weight:800;color:var(--ink);margin:18px 2px 8px}
.ts-sec span{color:var(--accent);font-weight:800}
.ts-sec small{display:block;font-weight:600;color:var(--muted);font-size:.74rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fcard{position:relative;text-align:left;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);padding:10px 12px 9px;min-height:72px}
.fcard .fs{display:block;font-size:1.15rem;line-height:1.5;color:var(--ink);font-weight:600}
.fcard small{display:block;font-family:Catamaran,sans-serif;font-size:.72rem;line-height:1.35;color:var(--muted);font-weight:600}
.fcard.on{border-color:var(--accent);background:var(--accent-soft)}
.fcard.on::after{content:"";position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.slider{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:14px;padding:6px 14px}
.slider b{color:var(--ink);font-weight:800;line-height:1}
.slider b:first-child{font-size:.85rem}.slider b:last-child{font-size:1.45rem}
.slider input{flex:1;height:36px;accent-color:var(--accent)}
.ts-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--bg)}
.ts-row .rt{flex:1}.ts-row .rt b{display:block;font-weight:700;font-size:.92rem}.ts-row .rt small{display:block;color:var(--muted);font-size:.76rem}
.ts-reset{display:block;margin:18px auto 0}
.srow.link{width:100%;text-align:left}
.srow .chevr{width:20px;height:20px;color:var(--faint)}
.r-top .rb-a{font-size:1.02rem;gap:0;display:flex;align-items:baseline;justify-content:center;padding-top:6px}.r-top .rb-a small{font-size:.68rem}

/* ---------- car & bike section ---------- */
.subchips{display:flex;gap:8px;overflow-x:auto;padding:0 14px 12px;scrollbar-width:none}
.subchips::-webkit-scrollbar{display:none}
.sub{flex:none;height:36px;padding:2px 10px 0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:.84rem;color:var(--ink2);display:flex;align-items:center;gap:8px}
.sub i{font-style:normal;font-size:.72rem;font-weight:800;color:var(--muted);background:var(--chip);border-radius:8px;padding:2px 7px 0;min-width:22px;text-align:center}
.sub.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.sub.on i{background:var(--accent);color:#fff}
.rtags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}
.rtags .multi{margin-top:0}
.atag{display:inline-flex;align-items:center;height:26px;font-style:normal;font-weight:800;font-size:.72rem;color:#087F5B;background:rgba(12,166,120,.13);padding:2px 10px 0;border-radius:999px;white-space:nowrap}
[data-theme=dark] .atag{color:#63E6BE;background:rgba(99,230,190,.13)}

/* ---------- viral & memes ---------- */
.vnote{margin:-4px 20px 12px;font-size:.76rem;line-height:1.5;color:var(--muted);font-weight:500}
.vlist{padding:0 12px}
.vcard{background:var(--surface);border-radius:22px;overflow:hidden;margin-bottom:12px;content-visibility:auto;contain-intrinsic-size:auto 400px;transition:transform .12s}
.vcard:active{transform:scale(.99)}
.vimg{position:relative;aspect-ratio:4/3.2;background:var(--skel)}
.vimg img{width:100%;height:100%;object-fit:cover;display:block}
.vplat{position:absolute;left:12px;top:12px;height:28px;display:inline-flex;align-items:center;padding:2px 11px 0;border-radius:999px;font-size:.74rem;font-weight:800;color:#fff;background:rgba(0,0,0,.55);font-family:Catamaran,sans-serif}
.rtags .vplat{position:static;height:26px}
.p-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}.p-x{background:#111}.p-fb{background:#1877F2}.p-yt{background:#E00}.p-mm{background:#7048E8}
[data-theme=dark] .p-x{background:#F0EEEA;color:#111}
.vbody{padding:12px 16px 14px}
.vbody h3{margin:6px 0 0;padding-top:1px;font-size:1.06rem;line-height:1.55;font-weight:var(--wh);color:var(--ink)}

/* embedded social posts inside articles */
.r-body .embed{display:block;font-family:var(--ff-ui);margin:1.4em 0;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--bg);overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}
.r-body .embed:active{opacity:.85}
.r-body .embed img{display:block;width:calc(100% + 32px);max-width:none;margin:-14px -16px 12px;aspect-ratio:16/9;object-fit:cover;min-height:0;border-radius:0}
.embed b{display:flex;align-items:center;gap:8px;font-size:.8em;font-weight:800;color:var(--ink)}
.embed b::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--pc,#888);flex:none}
.ek-x{--pc:#111}.ek-instagram{--pc:#DD2A7B}.ek-facebook{--pc:#1877F2}.ek-youtube{--pc:#E00}
[data-theme=dark] .ek-x{--pc:#F0EEEA}
.embed .etext{display:block;margin:8px 0 2px;font-size:.92em;line-height:1.6;color:var(--ink2)}
.embed .eact{display:inline-block;margin-top:8px;font-size:.8em;font-weight:800;color:var(--accent)}