:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  background: #fafafa;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fafafa; }
button, input { font: inherit; }

.page-shell { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 2.25rem; }
.header { display: grid; grid-template-columns: auto auto minmax(220px, 1fr); align-items: end; gap: .3rem .75rem; border-bottom: 1px solid #dedede; padding-bottom: .6rem; }
.eyebrow { margin: 0 0 .15rem; color: #686868; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.match-count { margin: 0; color: #555; font-size: .78rem; white-space: nowrap; }
.header-search { min-width: 0; }
.header-search .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.controls { padding: .55rem 0 .7rem; border-bottom: 1px solid #dedede; }
.search-label, .tag-label { display: block; margin-bottom: .4rem; font-size: .84rem; font-weight: 700; }
.search-row { display: flex; gap: .5rem; }
input[type="search"] { min-width: 0; flex: 1; padding: .62rem .72rem; border: 1px solid #b8b8b8; border-radius: .35rem; background: white; color: inherit; }
input[type="search"]:focus { outline: 3px solid #d7e8ff; border-color: #2774c7; }
button { padding: .6rem .78rem; border: 1px solid #a9a9a9; border-radius: .35rem; color: #252525; background: #fff; cursor: pointer; }
button:hover:not(:disabled) { background: #f0f0f0; }
button:disabled { cursor: default; opacity: .45; }
.tag-area { margin-top: .45rem; }
.tag-heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tag-help { color: #6a6a6a; font-size: .8rem; }
.tag-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem; padding: .25rem 0 .1rem; }
.tag-category { min-width: 0; }
.tag-category-title { width: 100%; margin: 0 0 .25rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: #555; font-size: .7rem; font-weight: 700; letter-spacing: .035em; text-align: left; text-transform: uppercase; }
.tag-category-title:not(:disabled) { cursor: pointer; }
.tag-category-title:not(:disabled):hover { background: transparent; color: #2774c7; }
.tag-category-options.is-collapsed { overflow: hidden; }
.tag-category-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .12rem .5rem; }
.tag-option { display: inline-flex; min-width: 0; align-items: baseline; justify-content: flex-start; gap: .22rem; padding: .04rem 0; border: 0; border-radius: 0; background: transparent; color: #3d3d3d; font-size: 11px; line-height: 1.25; text-align: left; }
.tag-option:hover, .tag-option:focus-visible { background: transparent; color: #2774c7; outline: 0; text-decoration: underline; }
.tag-option.is-selected { color: #164f88; font-weight: 700; }
.tag-count { color: #777; font-size: .78em; font-weight: 400; }
.tag-option.is-selected .tag-count { color: #47769f; }
.status-message { min-height: 1.2rem; margin: .8rem 0 .25rem; color: #a12622; }
.channel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; }
.channel-card { display: flex; flex-direction: column; min-width: 0; padding: .7rem .72rem .62rem; border: 1px solid #dedede; border-radius: .4rem; background: #fff; transition: border-color .12s, box-shadow .12s; }
.channel-card:hover, .channel-card:focus-within { border-color: #2774c7; box-shadow: 0 1px 5px #00000012; }
.channel-link { color: inherit; text-decoration: none; }
.channel-link:focus-visible { outline: 2px solid #2774c7; outline-offset: 2px; }
.channel-card h2 { margin: 0 0 .32rem; font-size: .91rem; line-height: 1.25; }
.channel-card p { display: -webkit-box; margin: 0; overflow: hidden; color: #555; font-size: .78rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .58rem; }
.card-tag { padding: .16rem .36rem; border: 0; border-radius: 99px; background: #eeeeee; color: #454545; font-size: 11px; font-weight: 600; line-height: 1.2; }
.card-tag:hover, .card-tag:focus-visible { background: #dcecff; color: #164f88; outline: 0; }
.empty-state { grid-column: 1 / -1; padding: 2rem 0; color: #5d5d5d; text-align: center; }
@media (max-width: 520px) { .page-shell { padding: .8rem .8rem 2rem; } .header { grid-template-columns: 1fr; align-items: start; } .header-search { width: 100%; } .search-row { flex-direction: column; } .search-row button { width: 100%; } .tag-heading-row { align-items: start; flex-direction: column; gap: .15rem; } .tag-filters { grid-template-columns: 1fr; } .tag-category-options { grid-template-columns: 1fr; } .channel-list { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .45rem; } }