/* CueTube (/tube): a video-app layout modelled on YouTube's current desktop
   and mobile web layout — fixed 56px top bar with a centred search, a 240px
   guide that collapses to a 72px mini guide or a drawer, sticky topic chips,
   a 16:9 thumbnail grid, and a watch page with the player, title, actions,
   description and comments on the left and a compact related list on the
   right. Name, mark and icons are CueTube's own: a lapis tile with Cue's gold
   comet and a serif wordmark, the same Star Atlas language as Packs; lapis is
   the accent, and each source family has its own dot colour. Light and dark
   follow the device setting. */
:root{
  --ct-bg:#fff;--ct-fg:#0f0f0f;--ct-fg2:#606060;--ct-line:rgba(0,0,0,.1);--ct-soft:rgba(0,0,0,.05);--ct-soft2:rgba(0,0,0,.1);
  --ct-input:#fff;--ct-input-line:#ccc;--ct-btn:#f8f8f8;--ct-chip-on-bg:#0f0f0f;--ct-chip-on-fg:#fff;
  --ct-accent:#2442b8;--ct-accent-soft:#eef2ff;
  --ct-brand:#14257a;--ct-brand2:#2442b8;--ct-gold:#c8901e;
  --ct-fam-hn:#e8743b;--ct-fam-bluesky:#3a8ee6;--ct-fam-creator:#1f9d6b;--ct-fam-editor:#c8901e;
  --ct-chip-brand-bg:#14257a;--ct-chip-brand-fg:#fff;--ct-warn:#9f1c1c;--ct-warn-soft:#fdecea;--ct-scrim:rgba(0,0,0,.5);
  --ct-top:56px;--ct-guide:240px;--ct-mini:72px;--ct-pad:24px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --ct-bg:#0f0f0f;--ct-fg:#f1f1f1;--ct-fg2:#aaa;--ct-line:rgba(255,255,255,.2);--ct-soft:rgba(255,255,255,.1);--ct-soft2:rgba(255,255,255,.2);
  --ct-input:#121212;--ct-input-line:#303030;--ct-btn:#222;--ct-chip-on-bg:#f1f1f1;--ct-chip-on-fg:#0f0f0f;
  --ct-accent:#9fb6ff;--ct-accent-soft:rgba(159,182,255,.16);
  --ct-brand:#dfe6ff;--ct-brand2:#9fb6ff;
  --ct-chip-brand-bg:#dfe6ff;--ct-chip-brand-fg:#14257a;--ct-warn:#ffb4ab;--ct-warn-soft:rgba(255,180,171,.14);
}}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--ct-top) + 56px)}
body.ct{margin:0;background:var(--ct-bg);color:var(--ct-fg);font:400 14px/20px Roboto,Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}
.ct a{color:inherit;text-decoration:none}
.ct button{font:inherit;color:inherit}
.ct :is(a,button,input,select,summary):focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px;border-radius:8px}
.ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct-skip{position:fixed;left:8px;top:-60px;z-index:100;padding:8px 12px;border-radius:8px;background:var(--ct-fg);color:var(--ct-bg)!important}
.ct-skip:focus{top:8px}
.ct-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;flex:none}
.ct-iconbtn:hover{background:var(--ct-soft)}
.ct-iconbtn:active{background:var(--ct-soft2)}

/* ---- top bar */
.ct-top{position:fixed;inset:0 0 auto;z-index:30;height:var(--ct-top);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;background:var(--ct-bg)}
.ct-start{display:flex;align-items:center;gap:8px;min-width:0}
.ct-logo{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px;white-space:nowrap}
.ct-mark{display:block;flex:none;filter:drop-shadow(0 1px 2px rgba(20,37,122,.28))}
.ct-word{font:700 22px/1 Georgia,'Times New Roman','Songti SC','Noto Serif SC',serif;letter-spacing:-.4px;color:var(--ct-brand2)}
.ct-word b{font-weight:700;color:var(--ct-fg)}
.ct-search{flex:0 1 600px;display:flex;align-items:center;min-width:0;margin:0 auto}
.ct-search-box{position:relative;flex:1;display:flex;min-width:0}
.ct-search-box input{width:100%;height:40px;padding:0 44px 0 16px;border:1px solid var(--ct-input-line);border-right:0;border-radius:40px 0 0 40px;background:var(--ct-input);color:var(--ct-fg);font:400 16px/24px Roboto,Arial,'PingFang SC','Noto Sans SC',sans-serif;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.ct-search-box input:focus{outline:none;border-color:var(--ct-accent);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.ct-search-box kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:0 6px;border:1px solid var(--ct-input-line);border-radius:4px;font:12px/18px ui-monospace,monospace;color:var(--ct-fg2)}
.ct-search-box input:focus+kbd,.ct-search-box input:not(:placeholder-shown)+kbd{display:none}
.ct-search-btn{width:64px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ct-input-line);border-radius:0 40px 40px 0;background:var(--ct-btn);cursor:pointer;flex:none}
.ct-search-btn:hover{background:var(--ct-soft2)}
.ct-search-back,.ct-search-open{display:none!important}
.ct-end{display:flex;align-items:center;gap:8px}
.ct .ct-lang{flex:none;min-width:40px;height:32px;padding:0 10px;border:1px solid var(--ct-line);border-radius:16px;background:none;color:var(--ct-fg);font:500 13px/1 Roboto,Arial,'PingFang SC','Noto Sans SC',sans-serif;cursor:pointer}
.ct .ct-lang:hover{background:var(--ct-soft)}
.ct-home{display:inline-flex;align-items:center;height:36px;padding:0 15px;border:1px solid var(--ct-line);border-radius:18px;font-size:14px;font-weight:500;color:var(--ct-accent)!important}
.ct-home:hover{background:var(--ct-accent-soft);border-color:transparent}

/* ---- guide (expanded), mini guide (collapsed), drawer */
.ct-guide{position:fixed;top:var(--ct-top);bottom:0;left:0;z-index:20;width:var(--ct-guide);padding:0 12px 16px;overflow-y:auto;overscroll-behavior:contain;background:var(--ct-bg);scrollbar-width:thin;scrollbar-color:transparent transparent}
.ct-guide:hover{scrollbar-color:var(--ct-soft2) transparent}
.ct-guide-head{display:none}
.ct-guide-section{padding:12px 0;border-bottom:1px solid var(--ct-line)}
.ct-guide-h{margin:0;padding:6px 12px 4px;font-size:16px;line-height:22px;font-weight:700}
.ct-entry{display:flex;align-items:center;gap:24px;height:40px;padding:0 12px;border-radius:10px;font-size:14px;white-space:nowrap}
.ct-entry .ct-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.ct-entry:hover{background:var(--ct-soft)}
.ct-entry[hidden]{display:none}
.ct-entry[aria-current]{background:var(--ct-soft);font-weight:500}
.ct-entry[aria-current]:hover{background:var(--ct-soft2)}
.ct-dot{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:500}
.ct-count:not(:empty){font-size:12px;color:var(--ct-fg2)}
.ct-guide-more{width:100%;border:0;background:none;cursor:pointer}
.ct-guide-foot{margin:0;padding:16px 12px 0;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-guide-foot a{font-weight:500;color:var(--ct-fg2)}
.ct-guide-foot a:hover{color:var(--ct-fg)}
.ct-mini{position:fixed;top:var(--ct-top);left:0;bottom:0;z-index:20;width:var(--ct-mini);padding:4px;display:none;background:var(--ct-bg)}
.ct-mini-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:74px;padding:16px 0 14px;border-radius:10px;font-size:10px;line-height:14px;text-align:center}
.ct-mini-entry:hover{background:var(--ct-soft)}
.ct-mini-entry .ct-count{display:none}
.ct-mini-entry[aria-current]{font-weight:500}
.ct-scrim{position:fixed;inset:0;z-index:40;background:var(--ct-scrim)}
.ct-scrim[hidden]{display:none}
.ct-tabbar{display:none}

.ct-main{min-height:100vh;padding-top:var(--ct-top);margin-left:var(--ct-guide);container-type:inline-size}

/* Wide: the guide is part of the page; collapsing it shows the mini guide. */
body[data-guide="mini"] .ct-guide{display:none}
body[data-guide="mini"] .ct-mini{display:block}
body[data-guide="mini"] .ct-main{margin-left:var(--ct-mini)}
/* Drawer: the guide floats over the page with a scrim (narrower screens and the watch page). */
body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-guide{top:0;z-index:50;transform:translateX(-100%);visibility:hidden}
body.ct-animate:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-guide{transition:transform .2s ease,visibility .2s}
/* Before the script has chosen a layout, keep the page still. */
body:not([data-guide]) .ct-guide{visibility:hidden}
body[data-guide="drawer-open"] .ct-guide{transform:none;visibility:visible}
body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-guide-head{display:flex;align-items:center;gap:8px;height:var(--ct-top);padding:0 4px}
body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-main{margin-left:var(--ct-mini)}
body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-mini{display:block}
body[data-state="watch"] .ct-main{margin-left:0!important}
body[data-state="watch"] .ct-mini{display:none!important}
@media (max-width:791px){
  body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-main{margin-left:0}
  body:is([data-guide="drawer"],[data-guide="drawer-open"]) .ct-mini{display:none}
}

/* ---- chips */
.ct-chips-bar{position:sticky;top:var(--ct-top);z-index:10;display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--ct-pad);background:var(--ct-bg)}
.ct-chips{flex:1;min-width:0;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.ct-chips::-webkit-scrollbar{display:none}
.ct-chip,.ct-filters-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--ct-soft);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;cursor:pointer}
.ct-chip:hover,.ct-filters-btn:hover{background:var(--ct-soft2)}
.ct-chip[aria-pressed="true"]{background:var(--ct-chip-brand-bg);color:var(--ct-chip-brand-fg)}
.ct-filters-btn .ct-icon{width:20px;height:20px}
.ct-filters-btn[aria-expanded="true"]{background:var(--ct-chip-on-bg);color:var(--ct-chip-on-fg)}
.ct-filters{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 var(--ct-pad) 8px;padding:16px;border-radius:12px;background:var(--ct-soft)}
.ct-filters[hidden]{display:none}
.ct-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--ct-fg2)}
.ct-filters select{min-width:180px;height:36px;padding:0 8px;border:1px solid var(--ct-input-line);border-radius:8px;background:var(--ct-input);color:var(--ct-fg);font:inherit;font-size:14px}
.ct-filters select:disabled{opacity:.5}
.ct-filters .ct-check{flex-direction:row;align-items:center;gap:8px;align-self:flex-end;height:36px;font-size:14px;color:var(--ct-fg)}

.ct-view{padding:8px var(--ct-pad) 48px}
.ct-status{margin:48px auto;max-width:640px;padding:24px;border-radius:12px;background:var(--ct-soft);text-align:center;color:var(--ct-fg2);font-size:14px}
.ct-status strong{display:block;margin-bottom:8px;font-size:20px;line-height:28px;color:var(--ct-fg)}
.ct-link{padding:0;border:0;background:none;color:var(--ct-accent)!important;font:inherit;font-weight:500;cursor:pointer}
.ct-link:hover{text-decoration:underline}
.ct-view-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:8px 0 20px}
.ct-view-head h1{margin:0;font-size:20px;line-height:28px;font-weight:700}
.ct-view-head p{margin:0;font-size:14px;color:var(--ct-fg2)}

/* ---- avatar fallback (the data has no channel images: a neutral initial) */
.ct-avatar{position:relative;overflow:hidden;width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ct-soft2);color:var(--ct-fg);font-size:15px;font-weight:500;text-transform:uppercase}
.ct-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--ct-bg)}
.ct-avatar.has-img{box-shadow:0 0 0 1px var(--ct-line)}
.ct-avatar[data-tone="1"]{background:#e8eefc;color:#1e40af}.ct-avatar[data-tone="2"]{background:#e7f6ec;color:#166534}
.ct-avatar[data-tone="3"]{background:#fdf0e6;color:#9a3412}.ct-avatar[data-tone="4"]{background:#f3e8fd;color:#6b21a8}
.ct-avatar[data-tone="5"]{background:#e6f6f8;color:#155e75}.ct-avatar[data-tone="6"]{background:#fbe9ef;color:#9d174d}
@media (prefers-color-scheme:dark){.ct-avatar[data-tone]{background:var(--ct-soft2);color:var(--ct-fg)}}

/* ---- home grid */
.ct-grid{display:grid;grid-template-columns:repeat(var(--ct-cols,3),minmax(0,1fr));gap:40px 16px}
@container (max-width:499px){.ct-grid{--ct-cols:1}}
@container (min-width:500px) and (max-width:879px){.ct-grid{--ct-cols:2}}
@container (min-width:880px) and (max-width:1499px){.ct-grid{--ct-cols:3}}
@container (min-width:1500px) and (max-width:1999px){.ct-grid{--ct-cols:4}}
@container (min-width:2000px){.ct-grid{--ct-cols:5}}
.ct-card{position:relative;min-width:0;display:flex;flex-direction:column}
.ct-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--ct-soft)}
.ct-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ct-badge{position:absolute;right:8px;bottom:8px;padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:18px;font-weight:500}
.ct-badge.is-unavailable{background:rgba(159,28,28,.88)}
.ct-missing{display:none}
[data-thumb="missing"] .ct-missing{position:absolute;inset:auto 8px 8px;display:block;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;line-height:16px}
.ct-details{position:relative;display:flex;gap:12px;margin-top:12px;padding-right:24px}
.ct-avatar-link{flex:none;height:36px}
.ct-meta{min-width:0;flex:1}
.ct-title{margin:0 0 4px;font-size:16px;line-height:22px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ct-byline,.ct-stats{display:block;font-size:14px;line-height:20px;color:var(--ct-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-byline:hover{color:var(--ct-fg)}
.ct-stats .ct-sep::before{content:"•";margin:0 4px}
.ct-tag{display:inline-block;margin-top:4px;padding:0 4px;border-radius:4px;background:var(--ct-soft);font-size:12px;line-height:18px;font-weight:500;color:var(--ct-fg2)}
.ct-tag.is-unavailable{background:var(--ct-warn-soft);color:var(--ct-warn)}
.ct-tag.is-embed_disabled{background:var(--ct-accent-soft);color:var(--ct-accent)}
.ct-tag.is-fresh{background:var(--ct-accent-soft);color:var(--ct-accent)}
.ct-tag+.ct-tag{margin-left:4px}
.ct-tag.ct-host{background:var(--ct-soft2);color:var(--ct-fg)}
.ct-thumb-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--ct-fg2)}
.ct-stance.is-story{background:var(--ct-soft2);color:var(--ct-fg)}
.ct-more{position:absolute;right:-12px;top:-6px;opacity:0}
/* Watch later on the thumbnail, shown on hover like YouTube's quick action. */
.ct-later{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;opacity:0}
.ct-later .ct-icon{width:20px;height:20px}
.ct-card:hover .ct-later,.ct-row:hover .ct-later,.ct-later:focus-visible,.ct-later[aria-pressed="true"]{opacity:1}
@media (hover:none){.ct-later{opacity:1}}
.ct-row .ct-later{left:calc(min(500px,40%) - 36px);right:auto}
.ct-card:hover .ct-more,.ct-more:focus-visible,.ct-more[aria-expanded="true"]{opacity:1}
@media (hover:none){.ct-more{opacity:1}}
.ct-menu{position:absolute;z-index:25;right:0;min-width:236px;padding:8px 0;border-radius:12px;background:var(--ct-bg);box-shadow:0 4px 32px rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){.ct-menu{background:#282828}}
.ct-menu button,.ct-menu a{display:flex;align-items:center;gap:16px;width:100%;height:36px;padding:0 16px;border:0;background:none;font-size:14px;text-align:left;cursor:pointer;white-space:nowrap}
.ct-menu button:hover,.ct-menu a:hover{background:var(--ct-soft)}
.ct-menu .ct-icon{width:22px;height:22px}
.ct-loadmore{display:block;margin:32px auto 0;height:36px;padding:0 16px;border:1px solid var(--ct-line);border-radius:18px;background:none;font-size:14px;font-weight:500;cursor:pointer}
.ct-loadmore:hover{background:var(--ct-soft)}
.ct-loadmore[hidden]{display:none}

/* ---- search results and personal lists: thumbnail left, text right */
.ct-list{display:flex;flex-direction:column;gap:16px;max-width:1096px}
.ct-row{position:relative;display:flex;gap:16px;min-width:0}
.ct-row .ct-thumb{width:min(500px,40%);min-width:240px;flex:none}
.ct-row .ct-meta{padding-right:32px}
.ct-row .ct-title{font-size:18px;line-height:26px;font-weight:400}
.ct-row .ct-stats{font-size:12px;line-height:18px}
.ct-row .ct-chan{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-row .ct-chan .ct-avatar{width:24px;height:24px;font-size:11px}
.ct-row .ct-snippet{margin:0;font-size:12px;line-height:18px;color:var(--ct-fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-row .ct-more{right:0;top:0}
.ct-row:hover .ct-more{opacity:1}

/* ---- watch page */
/* Measured against YouTube's watch page at 1280×720: player at x=16 y=68, 880px wide; related column ≈352px with ≈240px thumbnails. */
.ct-watch{display:flex;gap:16px;max-width:1754px;margin:0 auto;padding:12px 16px 48px}
.ct-primary{flex:1;min-width:0}
.ct-secondary{width:clamp(300px,27.5vw,402px);flex:none}
.ct-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
.ct-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-play{position:absolute;inset:0;padding:0;border:0;background:#000;cursor:pointer}
.ct-play img{width:100%;height:100%;object-fit:cover}
.ct-play-icon{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:rgba(15,15,15,.82);transition:background .1s}
.ct-play-icon::after{content:"";position:absolute;left:28px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.ct-play:hover .ct-play-icon,.ct-play:focus-visible .ct-play-icon{background:var(--ct-accent)}
.ct-player[data-avail="unavailable"] img,.ct-player[data-avail="embed_disabled"] img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:grayscale(1)}
.ct-player-note{position:absolute;left:16px;right:16px;bottom:16px;margin:0;padding:12px 14px;border-radius:12px;background:rgba(15,15,15,.88);color:#fff;font-size:14px;line-height:20px}
.ct-player-note a{font-weight:500;text-decoration:underline!important}
.ct-watch-title{margin:12px 0 0;font-size:20px;line-height:28px;font-weight:700;overflow-wrap:anywhere}
.ct-watch-title:focus{outline:none}
.ct-owner-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.ct-owner{display:flex;align-items:center;gap:12px;min-width:0}
.ct-owner .ct-avatar{width:40px;height:40px;font-size:17px}
.ct-owner-name{display:block;font-size:16px;line-height:22px;font-weight:500}
.ct-owner-sub{display:block;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-owner-row>*{min-width:0}
.ct-actions{display:flex;gap:8px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ct-actions::-webkit-scrollbar{display:none}
.ct-pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:0;border-radius:18px;background:var(--ct-soft);font-size:14px;line-height:36px;font-weight:500;white-space:nowrap;cursor:pointer}
.ct-pill:hover{background:var(--ct-soft2)}
.ct-pill .ct-icon{width:20px;height:20px}
.ct-pill[aria-pressed="true"]{background:var(--ct-chip-on-bg);color:var(--ct-chip-on-fg)}
.ct-desc{position:relative;margin-top:12px;padding:12px;border-radius:12px;background:var(--ct-soft);font-size:14px;line-height:20px}
.ct-desc:not(.is-open){cursor:pointer}
.ct-desc:not(.is-open):hover{background:var(--ct-soft2)}
.ct-desc-meta{margin:0;font-weight:500}
.ct-desc-body{margin-top:4px}
.ct-desc:not(.is-open) .ct-desc-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-desc:not(.is-open) .ct-desc-full{display:none}
.ct-desc-body p,.ct-desc-full p{margin:0 0 12px}
.ct-desc-k{display:block;font-weight:500}
.ct-desc-toggle{margin-top:4px;padding:0;border:0;background:none;font-weight:500;cursor:pointer}
.ct-desc .ct-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ct-desc a:not(.ct-pill){color:var(--ct-accent)!important}
.ct-desc a:not(.ct-pill):hover{text-decoration:underline}

.ct-comments{margin-top:24px}
.ct-comments-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;margin-bottom:24px}
.ct-comments-head h2{margin:0;font-size:20px;line-height:28px;font-weight:700}
.ct-comments-head p{margin:0;flex-basis:100%;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-comment-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.ct-comment{display:flex;gap:16px}
.ct-comment .ct-avatar{width:40px;height:40px;font-size:16px}
.ct-comment-body{min-width:0;flex:1}
.ct-comment-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:2px;font-size:13px;line-height:18px}
.ct-comment-author{font-weight:500}
.ct-comment-time{font-size:12px;color:var(--ct-fg2)}
.ct-stance{display:inline-block;padding:0 6px;border-radius:4px;font-size:12px;line-height:18px;font-weight:500;background:var(--ct-soft);color:var(--ct-fg2)}
.ct-stance.is-strong_rec,.ct-stance.is-rec{background:var(--ct-accent-soft);color:var(--ct-accent)}
.ct-stance.is-critical{background:var(--ct-warn-soft);color:var(--ct-warn)}
.ct-comment-text{margin:0;font-size:14px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere}
.ct-comment-text.is-quote::before{content:"“"}.ct-comment-text.is-quote::after{content:"”"}
.ct-comment-ai{margin:4px 0 0;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-comment-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-comment-foot a{font-weight:500;color:var(--ct-fg)!important}
.ct-comment-foot a:hover{text-decoration:underline}
.ct-comments-all{display:none}
.ct-replies{margin-top:16px}
.ct-replies summary{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;color:var(--ct-accent);font-weight:500;cursor:pointer;list-style:none}
.ct-replies summary::-webkit-details-marker{display:none}
.ct-replies summary:hover{background:var(--ct-accent-soft)}
.ct-replies[open] summary{margin-bottom:16px}
.ct-replies .ct-note{margin:0 0 16px;font-size:12px;line-height:18px;color:var(--ct-fg2)}

.ct-related-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.ct-related-chips::-webkit-scrollbar{display:none}
.ct-related-note{margin:0 0 12px;font-size:12px;line-height:18px;color:var(--ct-fg2)}
.ct-compact-list{display:flex;flex-direction:column;gap:8px}
.ct-compact{position:relative;display:flex;gap:8px;min-width:0}
.ct-compact .ct-thumb{width:min(240px,68%);min-width:0;flex:none;border-radius:8px}
.ct-compact .ct-meta{padding-right:24px}
.ct-compact .ct-title{margin-bottom:4px;font-size:14px;line-height:20px;-webkit-line-clamp:3}
.ct-compact .ct-byline,.ct-compact .ct-stats{font-size:12px;line-height:18px}
.ct-compact .ct-more{right:-8px;top:-4px}
.ct-compact:hover .ct-more{opacity:1}

/* ---- about view */
.ct-about{max-width:860px;padding:24px var(--ct-pad) 64px}
.ct-about[hidden]{display:none}
.ct-about h1{margin:0 0 8px;font-size:24px;line-height:32px;font-weight:700}
.ct-about h2{margin:28px 0 8px;font-size:18px;line-height:26px;font-weight:700}
.ct-about p{margin:0 0 12px;font-size:14px;line-height:22px;color:var(--ct-fg2)}
.ct-about .ct-about-lede{font-size:16px;line-height:24px;color:var(--ct-fg)}
.ct-about a{color:var(--ct-accent)!important}
.ct-about a:hover{text-decoration:underline}
.ct-sources{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ct-sources li{padding:12px 16px;border-radius:12px;background:var(--ct-soft);font-size:14px;line-height:20px;color:var(--ct-fg2)}
.ct-sources strong{color:var(--ct-fg);font-weight:500}
.ct-sources .is-connected{color:#16a34a}
.ct-sources .is-not_connected,.ct-sources .is-not_run{color:#ea580c}
body[data-state="about"] :is(.ct-chips-bar,.ct-filters,.ct-view){display:none}
body[data-state="watch"] .ct-chips-bar,body[data-state="watch"] .ct-filters{display:none}
body[data-state="watch"] .ct-view{padding:0}

/* ---- watch page stacks under 1016px, like YouTube */
@media (max-width:1015px){
  .ct-watch{flex-direction:column}
  .ct-secondary{width:auto;min-width:0}
}

/* ---- phone: compact header, search as an overlay, bottom tab bar, single column */
@media (max-width:655px){
  :root{--ct-top:48px;--ct-pad:12px}
  .ct-top{padding:0 4px 0 8px;gap:4px}
  #ct-menu,.ct-home,.ct-search-box kbd{display:none}
  .ct-logo{font-size:18px}
  .ct-search{display:none;position:absolute;inset:0;z-index:2;padding:0 8px 0 4px;background:var(--ct-bg);gap:4px}
  body.is-searching .ct-search{display:flex}
  .ct-search-back{display:inline-flex!important}
  .ct-search-box input{height:36px;border-radius:18px;border:0;padding-right:12px;background:var(--ct-soft);font-size:16px;box-shadow:none}
  .ct-search-btn{display:none}
  .ct-search-open{display:inline-flex!important}
  .ct-guide,.ct-mini{display:none!important}
  .ct-main{margin-left:0!important;padding-bottom:56px}
  .ct-chips-bar{height:48px;gap:8px}
  .ct-chips{gap:8px}
  .ct-filters{margin:0 0 8px;border-radius:0}
  .ct-filters select{min-width:0;width:100%}
  .ct-filters label{flex:1 1 40%}
  .ct-view{padding:0 0 32px}
  .ct-view-head{padding:0 12px}
  .ct-grid{--ct-cols:1!important;gap:24px}
  .ct-grid .ct-thumb,.ct-list .ct-thumb{border-radius:0}
  .ct-details{padding:0 36px 0 12px}
  .ct-card .ct-more{right:0}
  .ct-row .ct-more{top:calc(56.25vw + 6px);right:0}
  .ct-row .ct-later{left:auto;right:8px}
  .ct-list{gap:24px}
  .ct-row{flex-direction:column;gap:0}
  .ct-row .ct-thumb{width:100%;min-width:0}
  .ct-row .ct-meta{padding:12px 40px 0 12px}
  .ct-row .ct-title{font-size:16px;line-height:22px;font-weight:500}
  .ct-row .ct-chan{margin:4px 0}
  .ct-status{margin:24px 12px}
  .ct-watch{padding:0 0 32px;gap:16px}
  .ct-player{position:sticky;top:var(--ct-top);z-index:9;border-radius:0}
  /* Portrait videos (Bilibili and others) get a taller frame on phones. */
  .ct-player[data-orientation="portrait"]{aspect-ratio:4/5}
  .ct-primary>:not(.ct-player){margin-left:12px;margin-right:12px}
  .ct-watch-title{font-size:18px;line-height:26px}
  .ct-owner-row{flex-direction:column;align-items:stretch}
  .ct-actions{margin:0 -12px;padding:0 12px}
  .ct-secondary{padding:0 12px}
  .ct-comments:not(.is-all) :is(.ct-comment-list>li:nth-child(n+3),.ct-replies,.ct-sort){display:none}
  .ct-comments:not(.is-all) .ct-comments-all{display:inline-flex;margin-top:16px}
  .ct-compact .ct-thumb{width:min(168px,42vw);min-width:0}
  .ct-about{padding:16px 12px 48px}
  .ct-tabbar{position:fixed;inset:auto 0 0;z-index:30;display:flex;height:56px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--ct-line);background:var(--ct-bg)}
  .ct-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;line-height:14px}
  .ct-tab .ct-count{display:none}
  .ct-tab[aria-current]{font-weight:500}
  .ct-tab[aria-current] .ct-icon{stroke-width:2.4}
}
@media (prefers-reduced-motion:reduce){.ct-guide,.ct-play-icon{transition:none!important}}

/* plain Home: today's batch, as a small star-chart band */
.ct-batch{display:flex;align-items:center;gap:16px;margin:4px 0 20px;padding:14px 16px 14px 18px;border-radius:16px;color:var(--ct-fg);
  background:radial-gradient(50% 160% at 0% 100%,rgba(255,217,120,.38),transparent 62%),linear-gradient(100deg,#e4ebff,#f3efff 55%,#fff4e6);box-shadow:inset 0 0 0 1px rgba(36,66,184,.1)}
.ct-batch-glyph{flex:none;width:64px;height:40px;color:var(--ct-brand2)}
.ct-batch-glyph svg{width:100%;height:100%;display:block}
.ct-batch-text{flex:1;min-width:0}
.ct-batch h2{margin:0;font:700 19px/24px Georgia,'Times New Roman','Songti SC','Noto Serif SC',serif;letter-spacing:-.2px}
.ct-batch p{margin:2px 0 0;font-size:13px;line-height:19px;color:var(--ct-fg2)}
.ct-fam{white-space:nowrap}
.ct .ct-batch-next{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border:0;border-radius:18px;background:var(--ct-brand);color:#fff;font-weight:500;cursor:pointer;box-shadow:0 2px 8px rgba(20,37,122,.25)}
.ct .ct-batch-next:hover{background:var(--ct-brand2)}
.ct-batch-next .ct-icon{width:20px;height:20px}
@media (prefers-color-scheme:dark){
  .ct-batch{background:radial-gradient(50% 160% at 0% 100%,rgba(255,217,120,.14),transparent 62%),linear-gradient(100deg,#1a2350,#1b1d3c 55%,#26203a);box-shadow:inset 0 0 0 1px rgba(159,182,255,.18)}
  .ct .ct-batch-next{background:#dfe6ff;color:#14257a;box-shadow:none}
  .ct .ct-batch-next:hover{background:#fff}
}
@media (max-width:655px){
  .ct-batch{margin:0 12px 14px;padding:12px;gap:10px;flex-wrap:wrap}
  .ct-batch-glyph{width:44px;height:28px}
  .ct-batch-text{flex-basis:calc(100% - 60px)}
  .ct .ct-batch-next{margin-left:54px}
}
/* where a video was found: one dot per source family */
.ct-src{display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:var(--ct-fam-hn);vertical-align:middle;flex:none}
.ct-src[data-family="bluesky"]{background:var(--ct-fam-bluesky)}
.ct-src[data-family="creator_official"]{background:var(--ct-fam-creator)}
.ct-src[data-family="editorial"]{background:var(--ct-fam-editor)}