:root{
--bg:#f8f7f4;
--ink:#252621;
--muted:#666a61;
--line:#e5e5dd;
--orange:#df4a26;
--green:#427659;
--subtle:#62695d;
--white:#fff;
--soft:#efeee8;
--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font:14px var(--sans);
-webkit-font-smoothing:antialiased}
button,
input{
font:inherit}
button,
a,
input{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer;
color:inherit}
a{
color:inherit;
text-decoration:none}
button{
border:0;
background:none}
button:focus-visible,
a:focus-visible,
input:focus-visible{
outline:3px solid #e99566;
outline-offset:4px}
button:disabled{
opacity:.5;
cursor:not-allowed}
svg{
display:block}
button{
transition:background .15s,transform .15s,color .15s}
@media(hover:hover){
button:hover{
color:var(--orange)}
}
.topbar{
height:76px;
max-width:1600px;
margin:auto;
padding:0 4.2%;
display:flex;
align-items:center;
gap:22px;
border-bottom:1px solid var(--line)}
.brand{
font-weight:760;
font-size:24px;
letter-spacing:-1px;
display:flex;
align-items:center;
white-space:nowrap}
.brand-mark{
width:35px;
height:35px;
background:var(--orange);
color:white;
display:grid;
place-items:center;
border-radius:9px;
margin-right:10px;
transform:rotate(-7deg)}
.brand-mark svg{
width:25px}
.brand-tv{
color:var(--orange);
font-weight:500}
.topbar nav{
display:flex;
align-items:center;
gap:30px;
margin-left:auto;
height:100%}
.nav-button{
font-size:13px;
font-weight:550;
height:100%;
padding:0 1px;
position:relative;
color:var(--muted)}
.nav-button.active{
color:var(--ink)}
.nav-button.active:after{
content:'';
height:2px;
position:absolute;
bottom:0;
left:0;
right:0;
background:var(--orange)}
#saved-count{
font-size:10px;
background:#eae9e2;
padding:2px 6px;
border-radius:4px;
margin-left:5px}
.external-tiny{
font-size:15px;
margin-left:4px}
main{
max-width:1600px;
margin:auto;
padding:0 4.2%}
.eyebrow{
font-size:9px;
font-weight:750;
letter-spacing:1.8px;
display:flex;
align-items:center;
gap:7px}
.search-row{
display:flex;
gap:12px;
flex:1;
max-width:680px;
margin-left:34px;
min-width:0}
.search-box{
display:flex;
align-items:center;
gap:12px;
background:#fff;
border:1px solid #ddded5;
border-radius:9px;
padding:0 17px;
height:44px;
flex:1;
box-shadow:0 2px 4px #32322103}
.search-box svg{
width:19px;
color:#898c80;
flex-shrink:0}
.search-box input{
outline:none!important;
border:0;
min-width:0;
flex:1;
background:none;
font-size:12px;
height:100%;
color:var(--ink)}
.search-box:focus-within{
border-color:#e28e6a;
box-shadow:0 0 0 3px #ec5c2712}
.search-box input::placeholder{
color:#8d9088}
.search-box kbd{
border:1px solid var(--line);
border-radius:4px;
background:var(--bg);
color:#94988b;
padding:1px 6px;
font:11px var(--sans)}
.surprise{
background:var(--orange);
border:1px solid var(--orange);
color:#fff;
border-radius:8px;
display:flex;
align-items:center;
gap:15px;
padding:0 19px;
font-size:12px;
font-weight:600}
.surprise span:first-child{
font-size:21px;
font-weight:400}
.surprise:hover{
background:#be391a;
color:white}
.topic-strip{
display:flex;
align-items:center;
gap:8px;
overflow:auto;
padding:19px 0 25px;
scrollbar-width:none;
border-bottom:1px solid var(--line)}
.topic-strip button{
font-size:11px;
color:#74776c;
border:1px solid #e2e3da;
border-radius:20px;
padding:7px 13px;
white-space:nowrap}
.topic-strip button:hover{
background:#eeeee5}
.topic-strip button.active{
background:#2d352d;
color:#fff;
border-color:#2d352d}
.explorer-layout{
display:grid;
grid-template-columns:213px minmax(0,1fr);
gap:32px;
padding-top:30px}
.filters{
padding-right:23px;
border-right:1px solid var(--line)}
.filter-heading{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:28px}
.filter-heading h2{
font-size:12px;
font-weight:650;
margin:0}
.text-button{
color:var(--subtle);
font-size:11px;
padding:0}
.filter-group{
border-bottom:1px solid var(--line);
padding-bottom:20px;
margin-bottom:22px}
.filter-group h3{
font-size:10px;
letter-spacing:1.5px;
color:var(--subtle);
margin:0 0 13px;
font-weight:650}
.filter-group>label{
display:block;
font-size:11px;
font-weight:600;
color:#5f6457;
margin-bottom:9px;
margin-top:20px}
input[type=range]{
accent-color:var(--orange);
width:100%;
height:4px;
margin:5px 0 10px;
cursor:pointer}
.diversity label{
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
line-height:1.3}
.diversity input{
accent-color:var(--orange);
margin:0;
width:14px;
height:14px;
cursor:pointer}
.diversity small{
display:block;
color:var(--subtle);
font-size:10px;
margin-top:5px;
font-weight:400}
.modes{
display:grid;
gap:4px;
margin:0 -6px}
.mode{
display:flex;
align-items:center;
gap:13px;
width:100%;
padding:11px 12px;
border-radius:11px;
text-align:left;
color:var(--ink)}
.mode-icon{
display:grid;
place-items:center;
flex:none;
width:22px;
height:22px;
color:#8c8f83}
.mode-icon svg{
width:20px;
height:20px}
.mode-text{
min-width:0}
.mode strong{
display:block;
font-size:13px;
font-weight:600;
line-height:1.3}
.mode small{
display:block;
margin-top:3px;
font-size:11px;
line-height:1.35;
color:#8a8e80;
font-weight:400}
.mode.active{
background:#f5e9e1;
color:#a83a22}
.mode.active .mode-icon{
color:var(--orange)}
.mode.active small{
color:#b58978}
@media(hover:hover){
.mode:not(.active):hover{
background:#efeee6}
}
.sidebar-note{
display:flex;
gap:10px;
color:var(--subtle);
font-size:11px;
line-height:1.7;
padding:0 4px}
.sidebar-note>span{
color:#bbac8e;
font-size:25px}
.sidebar-note p{
margin:0}
.feed-heading{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:0;
margin-bottom:22px}
.section-kicker{
font-size:10px;
letter-spacing:1.6px;
color:var(--subtle);
font-weight:600;
margin-bottom:9px}
.feed-heading h2{
font-size:25px;
letter-spacing:-.6px;
font-weight:570;
margin:0}
.feed-heading h2 span{
color:var(--orange);
font-size:24px;
display:inline-block;
margin-left:4px}
.feed-controls{
display:none;
justify-content:space-between;
align-items:center;
gap:10px;
border-bottom:1px solid var(--line);
min-height:35px}
.sort-label{
display:flex;
align-items:center;
font-size:10px;
color:var(--subtle);
padding-bottom:10px}
.result-meta{
display:flex;
justify-content:space-between;
align-items:center;
font-size:10px;
color:var(--subtle);
gap:12px;
padding:17px 0 19px}
.pool-size{
color:#8a8e80;
text-align:right}
.active-filters{
display:flex;
gap:6px;
flex-wrap:wrap}
.active-filters:empty{
display:none}
.filter-chip{
font-size:10px;
background:#efeee5;
padding:6px 9px;
border-radius:4px;
margin-bottom:15px;
color:#737664}
.video-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:27px 19px}
.video-card{
min-width:0;
position:relative}
.thumb-button{
padding:0;
width:100%;
display:block;
position:relative;
border-radius:8px;
overflow:hidden;
background:#d9d8cb}
.thumb-button img{
width:100%;
height:auto;
aspect-ratio:16/9;
display:block;
object-fit:cover;
transition:transform .35s}
.thumbnail-placeholder{
display:grid;
place-items:center;
width:100%;
aspect-ratio:16/9;
background:linear-gradient(135deg,#dfe5d9,#c9d2c1);
color:#65745e;
font-size:42px}
@media(hover:hover){
.thumb-button:hover img{
transform:scale(1.035)}
}
.play-hover{
position:absolute;
inset:0;
display:grid;
place-items:center;
background:#0002;
opacity:0;
transition:opacity .2s}
.play-hover span{
width:40px;
height:40px;
border-radius:50%;
background:#ffffffef;
display:grid;
place-items:center;
color:#222;
font-size:17px;
padding-left:2px}
@media(hover:hover){
.thumb-button:hover .play-hover{
opacity:1}
}
.duration-badge{
position:absolute;
right:8px;
bottom:8px;
background:#171f22cc;
color:white;
font-size:9px;
padding:3px 5px;
border-radius:3px;
letter-spacing:.2px}
.save-button{
position:absolute;
right:9px;
top:10px;
z-index:1;
border-radius:5px;
background:#f7f6f1ed;
width:32px;
height:32px;
display:grid;
place-items:center;
opacity:0;
transition:opacity .15s}
.video-card:hover .save-button,
.save-button:focus-visible,
.save-button.saved{
opacity:1}
.save-button svg{
width:13px;
height:13px}
.save-button.saved{
color:var(--orange);
background:#fff4e9}
.card-title{
display:block;
font-size:12px;
font-weight:640;
line-height:1.5;
text-align:left;
margin:12px 0 7px;
padding:0;
min-height:36px;
letter-spacing:-.08px}
.channel-row{
display:flex;
gap:6px;
align-items:center;
font-size:10px;
color:var(--subtle)}
.channel-avatar{
background:#e3e5d9;
color:#6e7762;
font-size:7px;
width:16px;
height:16px;
display:grid;
place-items:center;
border-radius:50%;
font-weight:600}
.channel-name{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.views-meta{
font-size:10px;
color:var(--subtle);
margin-top:7px;
display:flex;
gap:6px}
.views-meta strong{
font-weight:550;
color:#5d6653}
/* Why a video is listed in Breaking out or Hidden gems. */
.reason-row{
margin-top:7px;
display:flex}
.reason-pill{
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
padding:2px 8px;
border-radius:999px;
background:#edefe4;
color:#5d6653;
font-size:10px;
font-weight:550}
.scroll-sentinel{
height:1px}
/* Placeholder cards while videos load: the shape of a video card, with a soft moving highlight. The
   highlight stops for people who ask for reduced motion (see the prefers-reduced-motion rule below). */
.skeleton-card{
min-width:0}
.skeleton-block{
background:linear-gradient(90deg,#e6e5dc 25%,#f2f1ea 40%,#e6e5dc 60%);
background-size:300% 100%;
animation:skeleton-shimmer 1.5s ease-in-out infinite;
border-radius:5px}
.skeleton-thumb{
width:100%;
aspect-ratio:16/9;
border-radius:8px}
.skeleton-line{
height:12px;
margin-top:13px;
width:100%}
.skeleton-line.short{
width:64%;
margin-top:8px}
.skeleton-row{
display:flex;
align-items:center;
gap:7px;
margin-top:13px}
.skeleton-avatar{
width:16px;
height:16px;
border-radius:50%;
flex:none}
.skeleton-line.channel{
width:38%;
height:10px;
margin-top:0}
.skeleton-line.meta{
width:46%;
height:10px;
margin-top:9px}
@keyframes skeleton-shimmer{
0%{background-position:100% 50%}
100%{background-position:0 50%}}
.more-row{
display:flex;
align-items:center;
flex-direction:column;
gap:12px;
margin:34px 0 24px}
.load-more{
font-size:11px;
border:1px solid #d8dbcf;
border-radius:6px;
padding:10px 24px;
background:#fafbf7}
.load-more span{
margin-left:18px;
color:#7b856d}
#shown-count{
font-size:10px;
color:var(--subtle)}
.empty-state{
grid-column:1/-1;
text-align:center;
padding:70px 15px;
background:#f1f1e9;
border-radius:10px}
.empty-state>span{
font-size:40px;
color:#b2bba3}
.empty-state h3{
font-size:20px;
font-weight:500;
margin:18px 0 8px}
.empty-state p{
color:#818877;
font-size:12px;
line-height:1.7}
.empty-state button{
margin-top:12px;
border:1px solid #cad1bf;
border-radius:6px;
padding:10px 15px;
font-size:11px;
background:#fafbf6}
footer{
display:flex;
align-items:center;
gap:25px;
border-top:1px solid var(--line);
padding:28px 0;
margin-top:25px;
color:var(--subtle);
font-size:11px}
.footer-brand{
font-size:17px;
opacity:.8}
footer button{
margin-left:auto;
font-size:10px;
color:#7f8973}
.mobile-filters{
display:none}
.sheet-close,
.sheet-footer,
.sheet-backdrop{
display:none}
.filter-heading-actions{
display:flex;
align-items:center;
gap:10px}
body.sheet-open{
overflow:hidden}
.skip{
position:fixed;
top:-70px;
left:10px;
background:white;
padding:10px;
z-index:30}
.skip:focus{
top:10px}
dialog{
border:1px solid #dcded2;
background:var(--bg);
padding:0;
border-radius:15px;
max-width:760px;
width:calc(100% - 32px);
max-height:90dvh;
color:var(--ink);
box-shadow:0 20px 100px #101b1740}
dialog::backdrop{
background:#17211980;
backdrop-filter:blur(4px)}
body:has(dialog[open]){
overflow:hidden}
.dialog-close{
position:sticky;
float:right;
margin:14px 14px -46px 0;
top:14px;
z-index:3;
display:grid;
place-items:center;
background:#fffffff0;
color:#333b2d;
border:1px solid #ffffff80;
width:32px;
height:32px;
border-radius:50%;
font-size:23px;
line-height:1}
.primary-button{
display:inline-flex;
align-items:center;
gap:22px;
background:var(--orange);
color:white;
padding:12px 17px;
border-radius:6px;
font-size:11px;
font-weight:550}
.primary-button:hover{
background:#b83b1d;
color:white}
.info-content{
padding:40px}
.orange{
color:#a83a22}
.info-content>h2{
font-size:34px;
letter-spacing:-1px;
font-weight:550;
margin:16px 0 12px}
.info-lead{
color:var(--subtle);
font-size:13px;
line-height:1.7}
.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin:30px 0}
.info-grid article>span{
font-size:10px;
color:var(--orange)}
.info-grid h3{
font-size:14px;
font-weight:600}
.info-grid p{
font-size:12px;
line-height:1.8;
color:var(--subtle)}
.toast{
position:fixed;
z-index:10;
left:50%;
bottom:24px;
transform:translateX(-50%);
padding:13px 17px;
background:#2b3528;
color:white;
border-radius:8px;
box-shadow:0 5px 30px #0002;
font-size:12px;
display:flex;
align-items:center;
gap:20px;
max-width:calc(100% - 30px)}
.toast[hidden]{
display:none}
.toast button{
color:#f0bb99;
font-size:11px;
white-space:nowrap}
/* With the Sort row gone from wider screens, the result count sits right under the heading and the
   divider that row used to draw moves below the count. */
@media(min-width:651px){
.feed-heading{
margin-bottom:10px}
.result-meta{
padding:0 0 14px;
margin-bottom:18px;
border-bottom:1px solid var(--line)}
}
@media(min-width:1600px){
.video-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
.explorer-layout{
grid-template-columns:224px minmax(0,1fr);
gap:38px}
}
@media(max-width:1150px){
.modes{
margin:0 -8px}
.mode{
gap:10px;
padding:10px}
.mode-icon,
.mode-icon svg{
width:18px;
height:18px}
.topbar nav{
gap:25px}
.search-row{
margin-left:8px}
.explorer-layout{
grid-template-columns:180px minmax(0,1fr);
gap:23px}
.filters{
padding-right:18px}
.video-grid{
gap:24px 14px}
.card-title{
font-size:11px}
.sort-label>span{
display:none}
}
@media(max-width:900px){
.topbar{
height:auto;
flex-wrap:wrap;
padding-top:8px;
padding-bottom:12px;
gap:8px 22px}
.topbar nav{
height:40px}
.search-row{
order:3;
flex:1 1 100%;
max-width:none;
margin-left:0}
.video-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.explorer-layout{
grid-template-columns:170px minmax(0,1fr)}
.card-title{
font-size:12px}
}
@media(max-width:650px){
.topbar{
padding:8px 5% 12px;
gap:6px 10px}
.brand{
font-size:20px}
.brand-mark{
width:29px;
height:29px;
border-radius:7px;
margin-right:8px}
.brand-mark svg{
width:22px}
.topbar nav{
margin-left:auto;
gap:20px}
.nav-button{
font-size:13px}
.nav-button#how-button{
display:none}
main{
padding:0 5%}
.eyebrow{
font-size:8px;
letter-spacing:1.4px}
.search-row{
gap:8px}
.search-box{
height:46px;
padding:0 6px 0 14px;
gap:6px}
.search-box input{
font-size:16px}
.search-box kbd{
display:none}
.search-box>svg{
display:none}
.surprise{
font-size:0;
padding:0 14px;
gap:0}
.surprise span:first-child{
font-size:20px}
.surprise span:last-child{
display:none}
.surprise:after{
content:'Surprise';
font-size:13px;
margin-left:6px}
.topic-strip{
padding:14px 5.5% 16px;
gap:8px;
margin:0 -5.5%;
-webkit-overflow-scrolling:touch}
.topic-strip button{
font-size:13px;
padding:0 15px;
min-height:38px}
.explorer-layout{
display:flex;
flex-direction:column;
gap:0;
padding-top:18px}
.filters{
display:none;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:40;
max-height:88dvh;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
margin:0;
padding:18px 5% 0;
border:0;
border-top:1px solid var(--line);
border-radius:18px 18px 0 0;
background:#f4f4ec;
box-shadow:0 -12px 40px #17211933}
.filters.open{
display:block}
.filter-heading{
margin-bottom:8px}
.filter-heading h2{
font-size:15px}
.text-button{
font-size:13px;
padding:8px}
.sheet-close{
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:50%;
background:#e9e9df;
font-size:24px;
line-height:1}
.sheet-footer{
display:block;
position:sticky;
bottom:0;
margin:0 -5%;
padding:12px 5%;
background:#f4f4ec;
border-top:1px solid var(--line)}
.sheet-done{
width:100%;
min-height:48px;
border-radius:10px;
background:var(--orange);
color:#fff;
font-size:15px;
font-weight:600}
.sheet-done:hover{
background:#be391a;
color:#fff}
.sheet-backdrop{
display:block;
position:fixed;
inset:0;
z-index:39;
background:#17211966}
.sheet-backdrop[hidden]{
display:none}
.filters .filter-group{
margin-bottom:16px;
padding-bottom:16px}
.filter-group h3{
font-size:11px}
.filter-group>label{
font-size:13px;
margin-top:16px;
margin-bottom:8px}
.diversity label{
font-size:14px;
gap:12px;
min-height:44px;
align-items:center}
.diversity input{
width:22px;
height:22px;
flex:none}
.diversity small{
font-size:12px}
.sidebar-note,
.modes-group{
display:none}
.feed{
display:contents}
.feed-heading{
order:0;
margin-bottom:12px}
.feed-controls,
.result-meta,
.active-filters,
#results,
.scroll-sentinel,
.more-row{
order:2}
.feed-heading h2{
font-size:24px}
.section-kicker{
font-size:10px}
.mobile-filters{
display:flex;
align-items:center;
gap:8px;
min-height:44px;
padding:0 16px;
border:1px solid #d9ddcf;
border-radius:10px;
background:#fff;
font-size:14px}
.mobile-filters span{
color:#a83a22;
font-weight:600}
.feed-controls{
display:flex;
min-height:44px}
.sort-label{
font-size:13px;
padding-bottom:0}
.sort-label>span{
display:inline}
.result-meta{
font-size:12px;
padding:12px 0 14px;
flex-wrap:wrap}
.filter-chip{
font-size:12px;
padding:9px 12px;
border-radius:8px;
margin-bottom:10px}
.video-grid{
gap:26px 12px}
.card-title{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
font-size:14px;
margin:10px 0 6px;
min-height:0;
line-height:1.4}
.channel-row{
font-size:12px;
gap:6px}
.channel-avatar{
width:22px;
height:22px;
font-size:9px}
.views-meta{
font-size:12px;
gap:6px;
margin-top:6px}
.reason-pill{
font-size:11px}
.save-button{
opacity:1;
width:40px;
height:40px;
top:8px;
right:8px;
border-radius:8px}
.save-button svg{
width:16px;
height:16px}
.duration-badge{
font-size:11px;
padding:3px 6px;
right:8px;
bottom:8px}
.more-row{
margin-top:26px}
.skeleton-line{
height:14px}
.skeleton-line.channel,
.skeleton-line.meta{
height:12px}
.skeleton-avatar{
width:22px;
height:22px}
.load-more{
width:100%;
max-width:340px;
min-height:48px;
padding:14px 28px;
font-size:14px}
#shown-count{
font-size:12px}
.empty-state{
padding:48px 18px}
.empty-state p{
font-size:14px}
.empty-state button{
min-height:44px;
padding:12px 18px;
font-size:13px}
.thumb-button{
border-radius:8px}
footer{
margin-top:20px;
gap:15px;
padding:22px 0}
footer>span{
display:none}
.footer-brand{
font-size:15px}
footer button{
font-size:12px;
padding:10px 0}
dialog{
width:calc(100% - 20px);
max-height:92dvh}
.dialog-close{
width:40px;
height:40px}
.info-content{
padding:50px 20px 28px}
.info-grid{
grid-template-columns:1fr;
gap:18px}
.info-content>h2{
font-size:29px}
.info-lead{
font-size:14px}
.info-grid h3{
font-size:15px}
.info-grid p{
font-size:13px}
.primary-button{
width:100%;
justify-content:space-between;
padding:14px 18px;
font-size:14px}
.toast{
bottom:16px;
font-size:13px}
.toast button{
font-size:13px}
}
@media(max-width:560px){
.video-grid{
grid-template-columns:1fr;
gap:28px}
/* One column: four placeholders fill the screen. */
.skeleton-card:nth-of-type(n+5){
display:none}
.thumb-button{
border-radius:10px}
.card-title{
-webkit-line-clamp:2;
font-size:16px;
margin-top:12px}
.channel-row{
font-size:13px}
.views-meta{
font-size:13px}
.reason-pill{
font-size:12px}
}
@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto!important;
transition:none!important;
animation:none!important}
}
/* Saved view shows only the viewer's own list,
so the discovery controls are hidden. */
.workspace.saved-view .search-row,
body.saved-view .search-row,
.workspace.saved-view .topic-strip,
.workspace.saved-view .filters,
.workspace.saved-view .feed-controls,
.workspace.saved-view .active-filters,
.workspace.saved-view .mobile-filters{display:none}
.workspace.saved-view .explorer-layout{display:block}
/* Themed dropdown (single and multi-select) that replaces the native <select>. */
.dropdown{position:relative}
.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:34px;padding:0 9px;border:1px solid #dfe0d6;border-radius:6px;background:#fbfbf8;color:#565e4e;font:inherit;font-size:11px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dropdown-trigger:hover{background:#f4f4ec}
.dropdown-trigger:focus-visible{outline:3px solid #e99566;outline-offset:4px}
.dropdown.is-open .dropdown-trigger{background:#fff;border-color:#c9cbbf}
.dropdown-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-value.is-placeholder{color:#747a69}
.dropdown-chevron{display:block;width:11px;height:11px;flex:none;color:#8a8e80;transition:transform .15s ease}
.dropdown.is-open .dropdown-chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;z-index:25;top:calc(100% + 6px);left:0;min-width:100%;background:#fff;border:1px solid #dfe0d6;border-radius:8px;box-shadow:0 14px 32px #2526211a,0 2px 6px #2526210f;overflow:hidden}
.dropdown-panel[hidden]{display:none}
.dropdown-search{display:block;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #ecece4;background:#fbfbf8;color:var(--ink);font:inherit;font-size:11px;outline:none;-webkit-appearance:none;appearance:none}
.dropdown-search::placeholder{color:#8a8e80}
.dropdown-search:focus-visible{background:#fff;box-shadow:inset 0 -2px 0 #e99566}
.dropdown-list{list-style:none;margin:0;padding:4px;max-height:264px;overflow:auto;outline:none;overscroll-behavior:contain}
.dropdown-option{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:5px;font-size:11px;color:#565e4e;cursor:pointer;-webkit-user-select:none;user-select:none}
.dropdown-option.is-active{background:#eeeee5}
.dropdown-option.is-selected{color:var(--ink);font-weight:600}
.dropdown-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-check{display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:4px;color:transparent}
.dropdown-check svg{width:10px;height:10px}
.dropdown[data-mode="multi"] .dropdown-check{border:1px solid #cfd1c6;background:#fff}
.dropdown[data-mode="multi"] .dropdown-option.is-selected .dropdown-check{background:#2d352d;border-color:#2d352d;color:#fff}
.dropdown[data-mode="single"] .dropdown-option.is-selected .dropdown-check{color:var(--orange)}
.dropdown-empty{padding:12px 10px;font-size:11px;color:#747a69;text-align:center}
.dropdown-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid #ecece4;font-size:10px;color:var(--subtle)}
.dropdown-clear{padding:0;font-size:10px;color:var(--subtle);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dropdown-clear:hover:not(:disabled){color:var(--ink)}
.dropdown-clear:disabled{opacity:.45;cursor:default;text-decoration:none}
/* The sort control reads as plain text next to its "Sort:" label. */
.dropdown-inline{display:inline-block}
.dropdown-inline .dropdown-trigger{width:auto;height:auto;padding:0 0 0 5px;gap:5px;border:0;background:none;font-size:10px;color:#565e4e}
.dropdown-inline .dropdown-trigger:hover{background:none;color:var(--ink)}
.dropdown-inline .dropdown-panel{min-width:150px}
@media(prefers-reduced-motion:reduce){
.dropdown-chevron{transition:none}
}
/* Cards are links that open the video on YouTube in a new tab. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.card-title:hover,a.channel-name:hover{color:var(--orange)}
/* Channel avatar: the channel's own image, or its initials when there is none. */
.channel-avatar{flex:none}
img.channel-avatar{display:block;object-fit:cover;background:#e3e5d9}
/* Search clear button: our own, larger and themed, instead of the browser's tiny native one. */
.search-box input::-webkit-search-cancel-button,.search-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-box input::-ms-clear{display:none}
.search-clear{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-right:-6px;border-radius:50%;background:var(--soft);color:#6c7064;cursor:pointer;-webkit-tap-highlight-color:transparent}
.search-clear[hidden]{display:none}
.search-clear svg,.search-box .search-clear svg{width:12px;height:12px;color:inherit}
.search-clear:hover{background:#e3e3d9;color:var(--ink)}
.search-clear:active{transform:scale(.94)}
.search-clear:focus-visible{outline:3px solid #e99566;outline-offset:2px}
.search-box.has-text kbd{display:none}
@media(max-width:650px){.search-clear{width:36px;height:36px;margin-right:-8px}}
/* Phones: larger dropdowns and options, and 16px search text so iOS does not zoom the page on focus. */
@media(max-width:650px){
.dropdown-trigger{height:46px;padding:0 12px;font-size:14px}
.dropdown-chevron{width:13px;height:13px}
.dropdown-option{gap:12px;padding:12px 10px;font-size:15px}
.dropdown-check{width:20px;height:20px}
.dropdown-check svg{width:12px;height:12px}
.dropdown-search{padding:13px 14px;font-size:16px}
.dropdown-list{max-height:min(320px,45dvh)}
.dropdown-empty{font-size:14px}
.dropdown-footer{padding:12px 14px;font-size:13px}
.dropdown-clear{padding:6px 0;font-size:13px}
.dropdown-inline .dropdown-trigger{height:44px;padding:0 4px 0 6px;font-size:13px}
.dropdown-inline .dropdown-panel{min-width:200px}
}
/* Touch screens have no hover, so the save button is always shown. */
@media(hover:none){
.save-button{opacity:1}
}
/* Larger tap targets on touch screens wider than a phone (tablets). */
@media(pointer:coarse) and (min-width:651px){
.dropdown-trigger{height:42px}
.dropdown-option{padding:11px 9px}
.topic-strip button{padding:10px 14px}
.nav-button{padding:0 6px}
}