:root{
  --bg:#f7f8f8;
  --surface:#ffffff;
  --fg:#1c1e21;
  --dim:#65676b;
  --acc:#51ff0c;
  --acc-ink:#178f00;
  --acc-soft:rgba(81,255,12,.2);
  --card:#f7f9f9;
  --hover:rgba(15,20,25,.05);
  --line:#eff3f4;
  --line-strong:#cfd9de;
  --line-soft:#f0f3f4;
  --quote:#f7f9f9;
  --shadow:0 1px 2px rgba(15,20,25,.04);
  --shadow-hover:0 10px 28px rgba(15,20,25,.08);
  --radius:16px;
  --radius-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:15.5px/1.55 var(--sans);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%}
button{font:inherit;color:inherit}
a{color:var(--acc-ink);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--acc-soft)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button:focus-visible,a:focus-visible{border-radius:999px}
img,video,.feed-lightbox,.feed-lightbox-image{
  outline:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none
}
img:focus,img:focus-visible,video:focus,video:focus-visible,
.feed-lightbox:focus,.feed-lightbox:focus-visible,
.feed-lightbox-image:focus,.feed-lightbox-image:focus-visible,
.feed-lightbox-close:focus,.feed-lightbox-close:focus-visible,
.feed-lightbox-control:focus,.feed-lightbox-control:focus-visible{
  outline:none;box-shadow:none
}
html{scrollbar-width:thin;scrollbar-color:rgba(83,100,113,.5) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(83,100,113,.45);border-radius:99px}
html.is-scroll-locked,html.is-scroll-locked body{overflow:hidden}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:58px;padding:0 20px;
  position:sticky;top:0;z-index:20;
  background:rgba(247,248,248,.82);
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
  will-change:transform;
}
.site-header.is-hidden{transform:translateY(-100%);pointer-events:none}
.logo{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:-6px;padding:6px 12px 6px 6px;
  border-radius:999px;
  color:var(--fg);font-weight:750;font-size:16px;letter-spacing:-.03em;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.logo img{width:22px;height:22px;flex:none;display:block;border-radius:0;transition:transform .22s var(--ease)}
.logo:hover{background:var(--hover);text-decoration:none}
.logo:hover img{transform:scale(1.06)}
.logo:active{transform:scale(.97)}
.site-header nav{display:flex;align-items:center;gap:8px;font-size:14px}
.site-header nav a{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;
  border-radius:999px;color:var(--fg);font-weight:650;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.site-header nav a:hover{background:var(--hover);text-decoration:none}
.site-header nav a:active{transform:scale(.96)}

.arrow{
  width:20px;height:20px;flex:none;color:var(--dim);
  display:inline-block;vertical-align:middle;
  transition:transform .18s var(--ease),color .18s var(--ease)
}
.arrow svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round
}
.post-list a:hover .arrow,.channel-list a:hover .arrow{color:var(--acc);transform:translateX(3px)}

/* ---------- layout ---------- */
main{max-width:680px;margin:0 auto;padding:22px 16px 8px}
h1{font-size:28px;line-height:1.22;margin:0 0 8px;letter-spacing:-.03em;font-weight:750}
.meta{color:var(--dim);font-size:14px;margin:0 0 28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.meta .dot{color:var(--line-strong);font-size:12px}

/* ---------- lists ---------- */
.post-list,.channel-list,.channels-list{list-style:none;padding:0;margin:0}
.post-list li,.channel-list li{border-bottom:1px solid var(--line-soft)}
.post-list li:last-child,.channel-list li:last-child{border-bottom:0}
.post-list a,.channel-list a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:12px 10px;color:var(--fg);
  border-radius:var(--radius-sm);
  transition:background .18s var(--ease),transform .18s var(--ease)
}
.post-list a:hover,.channel-list a:hover{background:var(--hover);text-decoration:none}
.post-list a:active,.channel-list a:active{transform:scale(.985)}

.channel-list .avatar,.channels-list .avatar,.channel-head .avatar,.feed-avatar{
  position:relative;display:block;flex:none;overflow:hidden;border-radius:50%;
  background:var(--card);color:var(--dim);
  box-shadow:0 0 0 1px var(--line)
}
.channel-list .avatar{width:46px;height:46px}
.channels-list .avatar{width:42px;height:42px}
.channel-head .avatar{width:72px;height:72px}
.feed-avatar{width:42px;height:42px}
.channel-list .avatar img,.channels-list .avatar img,.channel-head .avatar img,.feed-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)
}
.channel-list a:hover .avatar img,.channels-list a:hover .avatar img{transform:scale(1.06)}
.avatar img.is-hidden,.avatar.no-avatar img,.feed-avatar.no-avatar img{display:none}
.channel-list .avatar::after,.channels-list .avatar::after,.channel-head .avatar::after,.feed-avatar::after{
  content:attr(data-letter);position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;font-weight:700;text-transform:uppercase
}
.channel-list .avatar::after{font-size:18px}
.channels-list .avatar::after{font-size:16px}
.channel-head .avatar::after{font-size:26px}
.feed-avatar::after{font-size:16px;font-weight:700}
.avatar.no-avatar::after,.feed-avatar.no-avatar::after{display:flex}

.channel-list .info,.channels-list .info,.channel-head .info,.feed-author{
  min-width:0;display:flex;flex-direction:column;gap:1px
}
.channel-list .name,.channels-list .name{
  font-weight:700;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.channels-list .name{font-size:15px}
.channel-list .handle,.channels-list .handle,.channel-head .handle{
  color:var(--dim);font-size:13.5px;min-width:0;
  display:flex;align-items:center;gap:6px
}
.channel-list .handle .u,.channels-list .handle .u,.channel-head .handle .u{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.channel-list .handle .count,.channels-list .handle .count,.channel-head .handle .count{
  flex:none;font-variant-numeric:tabular-nums;color:var(--dim);
  font-size:13px;padding:0;background:none;border:0;line-height:1.4
}
.channel-list .handle .count::before,.channels-list .handle .count::before,.channel-head .handle .count::before{
  content:"·";margin-right:6px
}

.channel > .channel-head{
  display:flex;align-items:center;gap:14px;
  margin:0 0 14px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.post-header .channel-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.channel-head .name{
  font-size:18px;font-weight:750;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.channel-head .feed-subscribe{margin-left:auto;align-self:center}

.cat{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty,.feed-empty{color:var(--dim);padding:28px 4px;font-size:14px}

/* ---------- post ---------- */
main.post > article{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:18px 18px 6px
}
.post-header{margin-bottom:16px}
.post-header .cat{display:inline-block;min-width:0;margin-bottom:10px}
.post-header h1{margin:0 0 6px;font-size:23px}
.post-header time{color:var(--dim);font-size:13px}
.post-media{display:grid;gap:4px;margin:16px 0 18px;grid-template-columns:1fr}
.post-media.n-2,.post-media.n-3,.post-media.n-4{grid-template-columns:1fr 1fr}
.post-media img,.post-media > video,.post-media .feed-video-player{
  width:auto;max-width:100%;height:auto;max-height:min(68vh,480px);margin-inline:auto;
  object-fit:contain;border-radius:14px;background:var(--bg);display:block;overflow:hidden
}
.post-media.n-2>:not(a),.post-media.n-3>:not(a),.post-media.n-4>:not(a){
  width:100%;height:auto;aspect-ratio:1;max-height:none;margin:0;object-fit:cover
}
.post-media .file,.feed-post-media > a{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;
  margin:4px 0;padding:10px 14px;border-radius:999px;
  background:var(--card);color:var(--fg);font-size:14px;font-weight:650;
  transition:background .18s var(--ease),transform .18s var(--ease)
}
.post-media .file:hover,.feed-post-media > a:hover{background:var(--hover);text-decoration:none;transform:translateY(-1px)}
.post-media .file:active,.feed-post-media > a:active{transform:scale(.98)}

.post-body{font-size:16.5px;line-height:1.65;word-wrap:break-word;overflow-wrap:anywhere}
.post-body>*:first-child{margin-top:0}
.post-body>*:last-child{margin-bottom:0}
.post-body a{word-break:break-word}
.post-body br+br{display:block;content:""}
.post-body blockquote,.post-body pre,.post-body ul,.post-body ol{margin:14px 0}
.post-body b,.post-body strong,.feed-post-text b,.feed-post-text strong{font-weight:720}
.post-body i,.post-body em,.feed-post-text i,.feed-post-text em{font-style:italic}
.post-body u,.post-body ins,.feed-post-text u,.feed-post-text ins{text-decoration:underline;text-underline-offset:3px}
.post-body s,.post-body strike,.post-body del,.feed-post-text s,.feed-post-text strike,.feed-post-text del{
  text-decoration:line-through;color:var(--dim)
}
.post-body tg-spoiler,.post-body .spoiler,.feed-post-text .spoiler{
  background:var(--line-strong);color:transparent;border-radius:6px;padding:0 5px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease)
}
.post-body tg-spoiler:hover,.post-body tg-spoiler:focus,
.post-body .spoiler:hover,.post-body .spoiler:focus,
.feed-post-text .spoiler:hover,.feed-post-text .spoiler:focus{color:inherit;background:var(--card)}
.post-body code,.feed-post-text code{
  background:var(--card);padding:2px 6px;border-radius:6px;
  font-family:var(--mono);font-size:.9em
}
.post-body pre,.feed-post-text pre{
  background:var(--card);padding:14px 16px;border-radius:var(--radius-sm);
  overflow:auto;margin:14px 0;font-family:var(--mono);font-size:.9em;line-height:1.55
}
.feed-post-text pre{white-space:pre-wrap}
.post-body pre code,.feed-post-text pre code{background:none;padding:0;font-size:1em}
.post-body blockquote,.feed-post-text blockquote{
  margin:14px 0;padding:10px 14px;background:var(--quote);
  border-left:3px solid var(--acc);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--dim)
}
.post-body ul,.post-body ol{padding-left:22px}
.post-body li{margin:4px 0}
.post-body .tgme_widget_message_text,.post-body .js-message_text{white-space:pre-wrap}
.post-body .hashtag,.post-body a[href^="/hashtag/"]{color:var(--acc);font-weight:650}

.post-footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.post-footer a{color:var(--dim);font-size:14px;font-weight:650}
.post-footer a:hover{color:var(--acc);text-decoration:none}

.related-list{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:12px 0 0;padding:0;border:0;list-style:none
}
.related-list .nav-link,.related-list>li>a{
  min-width:0;display:flex;align-items:center;gap:10px;
  padding:12px 14px;color:var(--fg);border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:14.5px;line-height:1.4;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)
}
.related-list .nav-link:hover,.related-list>li>a:hover{
  background:var(--surface);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-hover)
}
.related-list .nav-link:active,.related-list>li>a:active{transform:scale(.985)}
.related-list .nav-next,.related-list>li>a:last-child{flex-direction:row-reverse;text-align:right}
.related-list .nav-next .nav-text{align-items:flex-end}
.related-list .nav-prev{grid-column:1}
.related-list .nav-next{grid-column:2}
.related-list .nav-arrow{
  width:32px;height:32px;flex:none;color:var(--dim);
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--card);
  transition:transform .18s var(--ease),color .18s var(--ease),background .18s var(--ease)
}
.related-list .nav-arrow svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.related-list .nav-link:hover .nav-arrow{color:var(--fg);background:var(--hover)}
.related-list .nav-prev:hover .nav-arrow{transform:translateX(-2px)}
.related-list .nav-next:hover .nav-arrow{transform:translateX(2px)}
.related-list .nav-text{min-width:0;flex:1 1 0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.related-list .nav-hint{font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.04em}
.related-list .nav-title{
  display:block;max-width:100%;font-size:14px;font-weight:650;line-height:1.35;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.related-list .nav-spacer{display:none}
.related-list>li{min-width:0;display:flex}
.related-list>li>a{width:100%}

.channels-list a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:center;color:var(--fg);padding:10px;border-radius:14px;
  transition:background .18s var(--ease),transform .18s var(--ease)
}
.channels-list a:hover{background:var(--hover);text-decoration:none}
.channels-list a:active{transform:scale(.985)}
.channels-list li{border-bottom:0}

.other-channels{
  max-width:680px;margin:14px auto 0;padding:8px 8px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.other-channels h3{
  font-size:13px;color:var(--fg);font-weight:750;margin:8px 10px 4px;letter-spacing:-.01em
}

/* ---------- feed ---------- */
.home{max-width:680px}
.feed-list{display:flex;flex-direction:column;gap:16px}
.feed-item{
  overflow:hidden;padding:12px 16px 14px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  animation:feed-in .42s var(--ease) both
}
.feed-item.is-targeted{border-color:var(--acc)}
@keyframes feed-in{
  from{opacity:0}
  to{opacity:1}
}
.feed-post-head{display:flex;align-items:center;gap:10px;min-height:42px}
.feed-channel{
  width:fit-content;max-width:100%;overflow:hidden;color:var(--fg);
  font-size:15px;font-weight:750;letter-spacing:-.015em;
  text-overflow:ellipsis;white-space:nowrap
}
.feed-channel:hover{text-decoration:underline}
.feed-author time,.feed-post-time{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums;line-height:1.35}
.feed-post-time:hover{text-decoration:underline}

.feed-share,.feed-subscribe,.feed-more,.feed-expand{
  -webkit-tap-highlight-color:transparent;cursor:pointer
}
.feed-share,.feed-subscribe{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:30px;padding:0;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:var(--dim);
  font-size:12px;font-weight:400;line-height:1;
  transition:background-color .08s ease
}
.feed-post-head .feed-subscribe,.feed-post-head .feed-share{margin-left:auto}
.feed-post-head .feed-share + .feed-subscribe{margin-left:6px}
.feed-share{width:30px}
.feed-subscribe{gap:5px;padding:0 9px;white-space:nowrap}
.feed-share:hover,.feed-subscribe:hover{background:var(--hover);color:var(--fg)}
.feed-share:active,.feed-subscribe:active{background:var(--card)}
.feed-subscribe[aria-pressed="true"]{color:var(--fg)}
.feed-subscribe[aria-pressed="true"]:hover{background:var(--hover)}
.feed-share svg,.feed-subscribe svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.feed-share svg{width:16px;height:16px;stroke-width:1.7}
.feed-subscribe svg{width:14px;height:14px;stroke-width:1.8}

.feed-post-text{
  margin:12px 0;font-size:15.5px;line-height:1.55;
  overflow-wrap:anywhere;white-space:pre-line
}
.feed-post-text a{word-break:break-word}
.feed-post-text br+br{display:block;content:""}
.feed-post-text.is-collapsed{
  position:relative;max-height:8.8em;overflow:hidden;margin-bottom:0
}
.feed-post-text.is-collapsed::after{
  position:absolute;right:0;bottom:0;left:0;height:2.8em;
  background:linear-gradient(to bottom, transparent, var(--surface) 68%);
  content:"";pointer-events:none
}
.feed-expand{
  display:flex;justify-content:flex-end;align-items:center;width:100%;
  margin:0 0 8px;padding:0;border:0;background:var(--surface);
  color:var(--dim);font-size:13.5px;font-weight:500;letter-spacing:-.011em;line-height:1.35;
  text-align:right;
  transition:color .18s var(--ease)
}
.feed-expand span{background:var(--surface)}
.feed-expand:hover{color:var(--fg);text-decoration:none}

.feed-post-media{display:grid;gap:0;margin:0}
.feed-post-media.has-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--bg)}
.feed-post-media:empty{display:none}
.feed-post-media:not(:empty){margin:12px -16px -14px}
.feed-post-media img{
  display:block;width:auto;max-width:100%;height:auto;max-height:min(68vh,480px);
  margin-inline:auto;object-fit:contain;
  background:var(--bg);cursor:zoom-in
}
.feed-post-media.has-grid img,.feed-post-media.has-grid .feed-video-player{
  width:100%;height:auto;aspect-ratio:1;max-width:none;max-height:none;margin:0;object-fit:cover
}
.feed-post-media.has-grid .feed-video-player.is-wide,
.post-media.n-2 .feed-video-player.is-wide,
.post-media.n-3 .feed-video-player.is-wide,
.post-media.n-4 .feed-video-player.is-wide{
  grid-column:1/-1;width:100%;max-width:none;height:auto;max-height:min(68vh,420px);margin:0;object-fit:contain
}
.feed-post-media.has-grid .feed-video,.post-media.n-2 .feed-video,.post-media.n-3 .feed-video,.post-media.n-4 .feed-video{object-fit:cover;max-height:none}
.feed-post-media.has-grid .is-wide .feed-video,
.post-media.n-2 .is-wide .feed-video,.post-media.n-3 .is-wide .feed-video,.post-media.n-4 .is-wide .feed-video{object-fit:contain}
.feed-post-media>a{margin:12px 16px}

/* ---------- video ---------- */
.feed-video-player{
  position:relative;width:100%;max-height:min(68vh,480px);aspect-ratio:16/9;overflow:hidden;
  container-type:inline-size;
  background:var(--bg);color:var(--fg);color-scheme:dark
}
.feed-video-player.is-tall{
  width:auto;max-width:100%;height:min(68vh,480px);max-height:none;margin-inline:auto
}
.feed-video-player.is-expanded{
  position:fixed;inset:0;z-index:50;width:100%;height:100%;
  max-height:none;aspect-ratio:auto;margin:0;background:#000
}
.feed-video-player.is-expanded .feed-video{width:100%;height:100%;max-height:none;background:#000}
video:fullscreen,video:-webkit-full-screen{
  background:#000;object-fit:contain
}
video:fullscreen::backdrop,video:-webkit-full-screen::backdrop{background:#000}
.feed-video-player.is-expanded .feed-video-controls{opacity:1;pointer-events:auto;transform:none}
.feed-video{
  display:block;width:100%;height:100%;max-height:none;
  object-fit:contain;background:var(--bg);cursor:pointer
}
.feed-video-big-play{
  position:absolute;top:50%;left:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease)
}
.feed-video-big-play svg{width:28px;height:28px;margin-left:3px;display:block}
.feed-video-big-play:hover{transform:translate(-50%,-50%) scale(1.05);background:rgba(0,0,0,.62)}
.feed-video-big-play:active{transform:translate(-50%,-50%) scale(.96)}
.feed-video-big-play[hidden]{display:none}
.feed-video-controls{
  position:absolute;right:0;bottom:0;left:0;z-index:2;
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:36px 12px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:#fff;
  opacity:1;transform:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)
}
.feed-video-player.is-playing:not(.is-active):not(.is-scrubbing):not(:has(.is-open)) .feed-video-controls{
  opacity:0;transform:translateY(6px);pointer-events:none
}
.feed-video-volume{position:relative;display:flex;flex:none}
.feed-video-volume-pop{
  position:absolute;left:50%;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:128px;box-sizing:border-box;padding-bottom:34px;
  transform:translateX(-50%);
  opacity:0;pointer-events:none
}
.feed-video-volume:hover .feed-video-volume-pop,
.feed-video-volume.is-open .feed-video-volume-pop{opacity:1;pointer-events:auto}
.feed-video-mute{position:relative;z-index:4}
.feed-video-volume-slider{
  --v:100%;
  width:84px;height:16px;margin:0;padding:0;border:0;outline:none;
  background:transparent;cursor:pointer;
  transform:rotate(-90deg);
  -webkit-appearance:none;appearance:none
}
.feed-video-volume-slider:focus,.feed-video-volume-slider:focus-visible{outline:none}
.feed-video-volume-slider::-webkit-slider-runnable-track{
  height:3px;border-radius:99px;
  background:linear-gradient(#fff,#fff) 0/var(--v,100%) 100% no-repeat,rgba(255,255,255,.35)
}
.feed-video-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:8px;height:8px;margin-top:-2.5px;
  border:0;border-radius:50%;background:#fff
}
.feed-video-volume-slider::-moz-range-track{height:3px;border:0;border-radius:99px;background:rgba(255,255,255,.35)}
.feed-video-volume-slider::-moz-range-progress{height:3px;border-radius:99px;background:#fff}
.feed-video-volume-slider::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.feed-video-controls button{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;padding:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  transition:background .15s var(--ease),transform .15s var(--ease)
}
.feed-video-controls button:hover{background:rgba(255,255,255,.16)}
.feed-video-controls button:active{transform:scale(.9)}
.feed-video-controls svg{width:18px;height:18px;display:block}
.feed-video-time{
  flex:0 1 auto;min-width:0;text-align:right;white-space:nowrap;
  font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.feed-video-seek{
  flex:1 1 0;width:0;min-width:0;height:14px;margin:0;padding:0;border:0;
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none
}
.feed-video-seek::-webkit-slider-runnable-track{
  height:3px;border-radius:99px;
  background:
    linear-gradient(#fff,#fff) 0/var(--p,0%) 100% no-repeat,
    linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 0/var(--b,0%) 100% no-repeat,
    rgba(255,255,255,.25)
}
.feed-video-seek::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;margin-top:-3.5px;
  border:0;border-radius:50%;background:#fff;
  opacity:0;transition:opacity .15s var(--ease),transform .15s var(--ease)
}
.feed-video-player:hover .feed-video-seek::-webkit-slider-thumb,
.feed-video-player.is-scrubbing .feed-video-seek::-webkit-slider-thumb,
.feed-video-seek:focus-visible::-webkit-slider-thumb{opacity:1}
.feed-video-seek::-moz-range-track{height:3px;border:0;border-radius:99px;background:rgba(255,255,255,.25)}
.feed-video-seek::-moz-range-progress{height:3px;border-radius:99px;background:#fff}
.feed-video-seek::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}
.feed-video-fullscreen{flex:none}
@container (max-width:260px){
  .feed-video-time{display:none}
}

.feed-post-foot{
  display:flex;justify-content:flex-start;margin-top:2px;padding:10px 0;
  border-top:1px solid var(--line-soft)
}
.feed-post-foot a{color:var(--dim);font-size:13px;font-weight:700}
.feed-post-foot a:hover{color:var(--acc);text-decoration:none}

.feed-more-wrap{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:48px;padding:8px 0 4px
}
.feed-more{
  height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--fg);font-size:13px;font-weight:750;
  box-shadow:var(--shadow);
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)
}
.feed-more:hover{background:var(--hover);transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.feed-more:active{transform:scale(.96)}
.feed-more[hidden],.feed-sentinel[hidden],.feed-video-big-play[hidden],.feed-lightbox-control[hidden]{display:none}
.feed-status{margin:0;color:var(--dim);font-size:12px}
.feed-status:empty{display:none}
.feed-sentinel{width:100%;height:1px}

.feed-toast{
  position:fixed;left:50%;bottom:24px;z-index:80;
  max-width:min(80vw,320px);padding:10px 16px;border-radius:999px;
  background:#3a3b3c;color:#fff;text-align:center;
  font-size:14px;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  opacity:0;transform:translateX(-50%) translateY(8px);
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)
}
.feed-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- lightbox ---------- */
.feed-lightbox{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:52px 56px 40px;border:0;box-sizing:border-box;
  background:#000;color:#fff
}
.feed-lightbox::backdrop{background:#000}
.feed-lightbox-stage{background:#000}
.feed-lightbox[open]{
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:8px;
  animation:lb-fade .22s var(--ease)
}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
.feed-lightbox-stage{
  grid-column:2;grid-row:1;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center
}
.feed-lightbox-image{
  width:100%;height:100%;
  max-height:calc(100vh - 140px);object-fit:contain;
  border-radius:8px;outline:none;box-shadow:none
}
.feed-lightbox-image.is-shown{animation:lb-image .28s var(--ease)}
@keyframes lb-image{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.feed-lightbox-control,.feed-lightbox-close{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;
  transition:background .15s var(--ease),opacity .18s var(--ease)
}
.feed-lightbox-control:hover,.feed-lightbox-close:hover{background:rgba(255,255,255,.14);transform:none}
.feed-lightbox-control:active,.feed-lightbox-close:active{transform:scale(.94)}
.feed-lightbox-control svg,.feed-lightbox-close svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.feed-lightbox-prev{grid-column:1;grid-row:1}
.feed-lightbox-next{grid-column:3;grid-row:1}
.feed-lightbox-close{position:absolute;top:10px;right:10px;z-index:3;background:rgba(255,255,255,.12)}
.feed-lightbox-close:hover{background:rgba(255,255,255,.2)}
.feed-lightbox-count{
  grid-column:2;grid-row:2;justify-self:center;width:fit-content;margin:0;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);
  color:#fff;text-align:center;font-size:12px;font-weight:700;letter-spacing:.04em;
  transition:opacity .18s var(--ease)
}
.feed-lightbox.is-ui-hidden .feed-lightbox-close,
.feed-lightbox.is-ui-hidden .feed-lightbox-count{
  opacity:0;pointer-events:none
}

.site-footer{
  max-width:680px;margin:28px auto 24px;padding:8px 16px 0;
  color:var(--dim);font-size:13px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.site-footer a{color:var(--dim);font-weight:650;white-space:nowrap}
.site-footer a:hover{color:var(--fg);text-decoration:none}
.legal{max-width:680px;margin:0 auto;padding:6px 16px 8px}
.legal h1{font-size:26px;margin-bottom:6px}
.legal h2{font-size:17px;margin:22px 0 8px;letter-spacing:-.02em}
.legal p,.legal li{font-size:15.5px;line-height:1.65}
.legal ul{margin:8px 0 0;padding-left:18px}
.legal .legal-date{color:var(--dim);font-size:13px;margin:0 0 16px}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#18191a;--surface:#242526;--fg:#e4e6eb;--dim:#b0b3b8;--acc:#51ff0c;--acc-ink:#51ff0c;
    --acc-soft:rgba(81,255,12,.18);--card:#3a3b3c;--hover:rgba(255,255,255,.08);
    --line:#3e4042;--line-strong:#5a5d61;--line-soft:#3a3b3c;--quote:#3a3b3c;
    --shadow:none;--shadow-hover:none
  }
  .site-header{background:rgba(24,25,26,.82)}
  .feed-item,.channel > .channel-head,main.post > article,.other-channels,
  .related-list .nav-link,.related-list>li>a,.feed-more{
    background:#242526;border-color:#3e4042;box-shadow:none
  }
  .related-list .nav-link:hover,.related-list>li>a:hover,.feed-more:hover{background:#2c2e31}
  html{scrollbar-color:rgba(255,255,255,.35) transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
  .feed-post-media img{background:var(--bg)}
  .feed-post-media.has-grid{background:#18191a}
  .feed-toast{background:#3a3b3c;color:#e4e6eb}
  .feed-video-big-play{background:rgba(0,0,0,.5);color:#fff}
}

@media (max-width:600px){
  .site-header{height:52px;padding:0 12px}
  main{padding:12px 0 8px}
  .home,.channel,.post{padding-left:12px;padding-right:12px}
  h1,.post-header h1{font-size:22px}
  .feed-list{gap:14px}
  .feed-item{
    border:1px solid var(--line);border-radius:16px;
    padding:12px 12px 14px
  }
  .feed-post-media:not(:empty){margin:12px -12px -14px}
  .channel > .channel-head,.other-channels,main.post > article{
    margin-left:0;margin-right:0;border-radius:16px
  }
  .channel > .channel-head{gap:12px;padding:14px}
  .channel-head .avatar{width:58px;height:58px}
  .channel-head .name{font-size:17px}
  .feed-subscribe{gap:4px;padding:0 7px;font-size:12px;font-weight:400}
  .related-list{grid-template-columns:1fr;margin-left:10px;margin-right:10px}
  .related-list .nav-next,.related-list>li>a:last-child{flex-direction:row;text-align:left}
  .related-list .nav-next .nav-text{align-items:flex-start}
  .feed-lightbox{padding:56px 8px 40px}
  .feed-lightbox[open]{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}
  .feed-lightbox-control{width:36px;height:36px}
  .feed-lightbox-close{top:10px;right:10px;width:36px;height:36px}
  .feed-lightbox-image{max-height:calc(100vh - 112px);border-radius:0}
  .feed-video-controls{gap:2px;padding:28px 6px 6px}
  .feed-video-time{font-size:11px}
  .feed-video-controls button{width:30px;height:30px}
  .feed-video-big-play{width:58px;height:58px}
  .other-channels{padding:6px}
  .site-footer{padding:8px 16px 0;margin-top:20px}
}

.feed-lightbox.is-touch,
.feed-lightbox.is-touch::backdrop{background:#000}
.feed-lightbox.is-touch,
.feed-lightbox.is-touch *{-webkit-tap-highlight-color:transparent}
.feed-lightbox.is-touch{padding:0}
.feed-lightbox.is-touch[open]{display:block}
.feed-lightbox.is-touch .feed-lightbox-control{display:none}
.feed-lightbox.is-touch .feed-lightbox-stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#000;touch-action:none
}
.feed-lightbox.is-touch .feed-lightbox-image{
  width:100%;height:auto;max-width:100%;max-height:none;
  border-radius:0;object-fit:contain;touch-action:none
}
.feed-lightbox.is-touch .feed-lightbox-image.is-shown{animation:none}
.feed-lightbox.is-touch .feed-lightbox-close{
  top:max(12px,env(safe-area-inset-top));
  right:max(8px,env(safe-area-inset-right));
  outline:none;-webkit-tap-highlight-color:transparent
}
.feed-lightbox.is-touch .feed-lightbox-count{
  position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%)
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}