:root {
  --bg:#fff;
  --surface:#f6f8fa;
  --surface-strong:#eef3f1;
  --ink:#202833;
  --muted:#7c858f;
  --line:#e9edf0;
  --green:#15745a;
  --green-soft:#eaf4ef;
  --shadow:0 16px 55px #142d2514;
  color-scheme:light;
  font-family:'DM Sans','Noto Sans Arabic',sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  color:inherit;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #52b39a;
  outline-offset:4px;
}
button {
  border:0;
  background:none;
}
img {
  display:block;
  max-width:100%;
}
h1,h2,h3,p {
  margin:0;
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
}
h1,h2,h3,.brand-word {
  font-family:'Manrope','Noto Sans Arabic',sans-serif;
}
button,.nav-link,a,select {
  transition:background-color .16s,color .16s,box-shadow .16s;
}
::selection {
  background:#cce9de;
}
input[type=search]::-webkit-search-cancel-button {
  cursor:pointer;
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:236px;
  background:var(--bg);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:33px 18px 20px;
  z-index:30;
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  padding:0 12px;
  margin-bottom:40px;
}
.brand-mark {
  width:37px;
  height:37px;
  border-radius:12px;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  transform:rotate(-7deg);
  box-shadow:0 4px 0 #0b543d14;
}
.brand-mark .icon {
  width:24px;
  height:24px;
  fill:currentColor;
  stroke:none;
  transform:rotate(7deg) translateX(-2px);
}
.brand-word {
  font-weight:800;
  font-size:29px;
  line-height:1;
  letter-spacing:-1.6px;
}
.brand-dot {
  color:var(--green);
}
.brand-word small {
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:.05px;
  line-height:1.8;
  color:var(--muted);
  margin-top:5px;
}
.main-nav {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.nav-link {
  height:46px;
  padding:0 17px;
  border-radius:9px;
  display:flex;
  gap:14px;
  align-items:center;
  font-size:13px;
  font-weight:500;
  color:#64717c;
}
.nav-link .icon {
  width:20px;
  height:20px;
  stroke-width:1.65;
}
.nav-link:hover {
  background:var(--surface);
}
.nav-link.selected {
  background:var(--green-soft);
  color:var(--green);
  font-weight:650;
}
.nav-count {
  margin-left:auto;
  background:#d7eade;
  border-radius:5px;
  padding:2px 6px;
  font-size:11px;
}
.sidebar-topics {
  border-top:1px solid var(--line);
  margin:24px 12px 0;
  padding-top:23px;
}
.sidebar-topics>p {
  font-size:11px;
  color:var(--muted);
  margin-bottom:12px;
}
.side-topic {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  font-size:12px;
  color:#63717c;
}
.side-topic:hover {
  color:var(--green);
}
.topic-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#82a495;
}
.dot-courts {
  background:#8c91b8;
}
.dot-elections {
  background:#d6ab6c;
}
.dot-economy {
  background:#7da9ba;
}
.dot-provinces {
  background:#c38e91;
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:35px;
}
.local-note {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 12px;
  margin:0 6px 13px;
  font-size:11px;
  font-weight:600;
  line-height:1.7;
}
.local-note>.icon {
  color:#719381;
  width:19px;
  height:19px;
}
.local-note small {
  display:block;
  font-weight:400;
  font-size:10px;
  color:var(--muted);
}
.about-link {
  display:block;
  margin:14px 17px 0;
  font-size:11px;
  color:#62706e;
}
.about-link span {
  display:block;
  color:#9ba3a7;
  font-size:9px;
  margin-top:5px;
}
.main-shell {
  margin-left:236px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar {
  height:91px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 38px;
  gap:24px;
  background:var(--bg);
}
.search-form {
  max-width:523px;
  width:100%;
  height:42px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  display:flex;
  align-items:center;
  padding:0 13px;
  gap:10px;
}
.search-form>.icon {
  width:18px;
  height:18px;
  color:#84908f;
}
.search-form input {
  border:0;
  background:none;
  outline:0!important;
  min-width:0;
  flex:1;
  color:var(--ink);
  font-size:12px;
  letter-spacing:.05px;
}
.search-form:focus-within {
  border-color:#83b7a6;
  box-shadow:0 0 0 3px #15745a0d;
}
.search-form input::placeholder {
  color:#939ba3;
}
.search-form kbd {
  border:1px solid #dfe5e7;
  border-radius:4px;
  color:#a0a8ab;
  font:11px 'DM Sans',sans-serif;
  line-height:20px;
  width:20px;
  text-align:center;
  background:var(--bg);
}
.topbar-right {
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center;
}
.edition {
  white-space:nowrap;
  display:flex;
  gap:7px;
  align-items:center;
  font-size:11px;
  color:#6e7a7a;
}
.edition>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#489b73;
}
.icon-button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:4px;
  color:#7c898e;
  border-radius:7px;
}
.icon-button:hover {
  background:var(--surface);
}
.help-button .icon {
  width:20px;
}
.device-avatar {
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--surface);
}
.device-avatar .icon {
  width:16px;
  height:16px;
  color:#527d6c;
}
.mobile-menu,.mobile-brand {
  display:none;
}
.content {
  padding:36px 38px 28px;
  flex:1;
  max-width:1850px;
  width:100%;
  margin:auto;
}
.page-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-bottom:27px;
}
.page-kicker {
  font-size:11px;
  color:#80918b;
  margin-bottom:10px;
  letter-spacing:.1px;
}
.page-intro h1 {
  font-size:32px;
  letter-spacing:-1.3px;
  line-height:1.3;
  font-weight:750;
}
.page-intro h1>span {
  color:var(--green);
}
.page-intro h1+p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:10px;
  max-width:560px;
}
.collection-date {
  font-size:10px;
  color:#98a1a5;
  line-height:1.8;
  white-space:nowrap;
  text-align:right;
  padding-top:15px;
}
.collection-date small {
  display:block;
  font-size:11px;
  color:#64746e;
  margin-top:1px;
  font-weight:500;
}
.date-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#719b89;
  display:inline-block;
  vertical-align:2px;
  margin-right:5px;
}
.discovery-bar {
  padding:0 0 22px;
}
.topic-chips {
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.topic-chips::-webkit-scrollbar {
  display:none;
}
.topic-chip {
  font-size:11px;
  white-space:nowrap;
  background:var(--surface);
  color:#68737a;
  border:1px solid transparent;
  padding:9px 15px;
  line-height:1.3;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topic-chip:hover {
  background:var(--surface-strong);
}
.topic-chip.active {
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.feed-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  margin-bottom:25px;
  min-height:43px;
  gap:15px;
}
.feed-tabs {
  display:flex;
  gap:24px;
  height:43px;
  align-items:stretch;
}
.feed-tabs a {
  padding:5px 0 14px;
  position:relative;
  font-size:12px;
  color:#94a0a5;
  font-weight:500;
  display:flex;
  align-items:center;
}
.feed-tabs a.active {
  color:var(--green);
  font-weight:650;
}
.feed-tabs a.active:after {
  content:'';
  position:absolute;
  bottom:-1px;
  height:2px;
  left:0;
  right:0;
  background:var(--green);
  border-radius:2px;
}
.feed-toolbar-right {
  display:flex;
  align-items:center;
  gap:19px;
  padding-bottom:10px;
}
.sort-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:#8a9499;
}
.sort-label>.icon {
  width:16px;
  height:16px;
}
.sort-label select {
  font-size:11px;
  color:#758087;
  border:0;
  background:transparent;
  outline:0;
  max-width:110px;
}
.filter-button {
  display:flex;
  align-items:center;
  gap:7px;
  border-left:1px solid var(--line);
  padding:3px 0 3px 17px;
  font-size:11px;
  color:#64717b;
}
.filter-button .icon {
  width:17px;
  height:17px;
}
.filter-button.active {
  color:var(--green);
}
.filter-button>span {
  font-size:10px;
  background:var(--green-soft);
  border-radius:4px;
  padding:1px 4px;
}
.filters-panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  display:flex;
  gap:15px;
  align-items:end;
  margin-top:-10px;
  margin-bottom:24px;
}
.filters-panel label {
  font-size:10px;
  color:var(--muted);
  flex:1;
  min-width:0;
}
.filters-panel select {
  display:block;
  width:100%;
  font-size:11px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  padding:9px 8px;
  border-radius:6px;
  margin-top:6px;
}
.text-button {
  color:var(--green);
  font-size:11px;
  padding:5px 0;
  font-weight:600;
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.text-button>.icon {
  width:14px;
  height:14px;
}
.filters-panel>.text-button {
  padding:10px;
}
.active-filter-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:-5px 0 20px;
  font-size:12px;
  color:var(--muted);
}
.video-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:31px 21px;
}
.video-card {
  min-width:0;
}
.thumbnail-wrap {
  position:relative;
}
.thumbnail-link {
  display:block;
  aspect-ratio:16/9;
  background:#e8eeeb;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.thumbnail-link img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s;
  position:relative;
  z-index:-1;
}
.thumbnail-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 65%,#0004);
}
.video-card:hover .thumbnail-link img {
  transform:scale(1.025);
}
.thumbnail-play {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity .2s;
  background:#09231b19;
}
.thumbnail-play .icon {
  width:43px;
  height:43px;
  padding:11px;
  background:#fff;
  color:var(--green);
  fill:currentColor;
  stroke:none;
  border-radius:50%;
  box-shadow:0 2px 18px #0002;
}
.video-card:hover .thumbnail-play {
  opacity:1;
}
.duration {
  position:absolute;
  bottom:8px;
  right:8px;
  background:#14201be6;
  color:white;
  border-radius:4px;
  font-size:10px;
  padding:3px 5px;
  line-height:1.2;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.save-video {
  position:absolute;
  right:8px;
  top:8px;
  background:#fffef9f0;
  color:#45534c;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  box-shadow:0 1px 6px #0001;
  opacity:0;
  transition:opacity .2s,background .2s;
}
.save-video .icon {
  width:16px;
  height:16px;
}
.save-video:hover,.save-video.saved {
  background:var(--green);
  color:#fff;
}
.video-card:hover .save-video,.save-video:focus-visible,.save-video.saved {
  opacity:1;
}
.watched-label {
  position:absolute;
  top:8px;
  left:8px;
  background:#182b26d9;
  color:#fff;
  display:flex;
  gap:4px;
  align-items:center;
  font-size:9px;
  border-radius:4px;
  padding:4px 6px;
}
.watched-label>.icon {
  width:12px;
  height:12px;
}
.video-card-body {
  display:flex;
  gap:9px;
  padding:13px 1px 0;
}
.source-avatar {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  flex-shrink:0;
  background:color-mix(in srgb,var(--source-color) 10%,var(--bg));
  color:var(--source-color);
  font-size:9px;
  font-weight:700;
  border:1px solid color-mix(in srgb,var(--source-color) 8%,var(--line));
  font-family:'Manrope',sans-serif;
  letter-spacing:-.3px;
  line-height:1;
}
.video-card-body>.source-avatar {
  margin-top:2px;
}
.video-card-text {
  min-width:0;
  flex:1;
}
.video-type-row {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  min-height:13px;
}
.type-label {
  font-size:8px;
  line-height:1.3;
  white-space:nowrap;
  font-weight:600;
  padding:2px 5px;
  border-radius:3px;
  color:#698278;
  background:#eff5f2;
}
.type-news {
  color:#587791;
  background:#edf3f8;
}
.type-explainer {
  color:#8a6e93;
  background:#f5eff7;
}
.card-topic {
  font-size:8px;
  color:#9ba5a9;
}
.video-title {
  font-family:'DM Sans','Noto Sans Arabic',sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:39px;
  color:#303c45;
  unicode-bidi:plaintext;
}
.video-title:hover {
  color:var(--green);
}
.video-title:dir(rtl) {
  font-size:13px;
  line-height:1.85;
}
.video-source {
  display:flex;
  align-items:center;
  gap:4px;
  width:fit-content;
  font-size:10px;
  color:#7c8990;
  margin-top:7px;
  line-height:1.5;
}
.video-source>.icon {
  width:10px;
  height:10px;
  stroke-width:2.4;
  background:#a1ada6;
  color:var(--bg);
  border-radius:50%;
  padding:1px;
}
.video-time {
  font-size:9px;
  color:#a0a8ac;
  margin-top:2px;
  line-height:1.5;
}
.load-more {
  text-align:center;
  padding:43px 0 16px;
}
.pill-button {
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 15px;
  display:inline-flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  font-size:11px;
  background:var(--bg);
  font-weight:500;
  white-space:nowrap;
}
.pill-button>.icon {
  width:15px;
  height:15px;
}
.pill-button:hover {
  background:var(--surface);
}
.pill-button.is-active {
  background:var(--green-soft);
  color:var(--green);
  border-color:#bed8cc;
}
.load-more>p {
  color:var(--muted);
  font-size:10px;
  margin-top:12px;
}
.feed-end {
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:#a5aeae;
  margin-top:48px;
  margin-bottom:15px;
}
.feed-end>span {
  height:1px;
  width:45px;
  background:var(--line);
}
.site-footer {
  padding:24px 38px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:17px;
  font-size:10px;
  color:#9aa5a2;
}
.site-footer>span {
  font-family:'Manrope',sans-serif;
  color:#7f9689;
  letter-spacing:-.6px;
  font-weight:800;
  font-size:16px;
}
.site-footer>a {
  display:flex;
  gap:5px;
  align-items:center;
  margin-left:auto;
  font-size:9px;
}
.site-footer .icon {
  width:11px;
  height:11px;
}
.builder-credit {
  color:var(--ink);
  font-weight:600;
}
.builder-credit:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}
.visitor-activity {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:12px 20px;
  color:var(--muted);
  font-size:12px;
}
.visitor-activity>span { display:inline-flex; align-items:center; gap:5px; }
.visitor-activity strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.online-dot { width:6px; height:6px; border-radius:50%; background:#278252; }
.primary-button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--green);
  color:white;
  padding:13px 21px;
  border-radius:8px;
  font-size:12px;
  font-weight:500;
}
.primary-button:hover {
  background:#0f6049;
}
.primary-button>.icon {
  width:15px;
  height:15px;
}
.empty-state {
  text-align:center;
  padding:65px 20px;
  min-height:400px;
}
.empty-state>span {
  width:65px;
  height:65px;
  border-radius:23px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  background:var(--green-soft);
  color:#739b87;
}
.empty-state>span>.icon {
  width:32px;
  height:32px;
}
.empty-state h2 {
  font-size:22px;
  letter-spacing:-.6px;
}
.empty-state p {
  font-size:12px;
  color:var(--muted);
  max-width:400px;
  margin:14px auto 25px;
  line-height:1.9;
}
.result-count {
  font-size:12px;
  color:var(--muted);
  padding-bottom:15px;
}
.catalog-pill {
  font-size:11px;
  border:1px solid var(--line);
  padding:8px 13px;
  border-radius:6px;
  color:#7c8f86;
  white-space:nowrap;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.section-heading h2 {
  font-size:17px;
  letter-spacing:-.4px;
  font-weight:650;
}
.section-heading>span {
  font-size:10px;
  color:#91a099;
}
.source-groups {
  margin-top:36px;
}
.sources-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
}
.source-card {
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px 17px 15px;
  background:var(--bg);
  min-width:0;
}
.source-card:hover {
  border-color:#bad0c5;
  box-shadow:0 4px 20px #173e2f08;
}
.source-avatar.large {
  width:45px;
  height:45px;
  font-size:14px;
  margin-bottom:14px;
}
.source-card h3 {
  font-size:12px;
  font-weight:700;
  line-height:1.6;
}
.source-card>p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.source-card-bottom {
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-top:19px;
  font-size:9px;
  color:#82968b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.source-card-bottom>.icon {
  width:13px;
  height:13px;
}
.state-label {
  font-size:9px;
  color:#8b9298;
  display:block;
  margin-top:9px;
}
.topics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  padding-top:15px;
}
.topic-tile {
  border:1px solid var(--line);
  border-radius:13px;
  padding:26px;
  background:var(--surface);
  --tile:#588b77;
}
.topic-tile:hover {
  border-color:var(--tile);
  background:var(--bg);
}
.topic-illustration {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  background:color-mix(in srgb,var(--tile) 9%,var(--bg));
  border-radius:22px;
  color:var(--tile);
  margin:5px 0 30px;
}
.topic-illustration>.icon {
  width:31px;
  height:31px;
  stroke-width:1.3;
}
.topic-tile h2 {
  font-size:21px;
  letter-spacing:-.6px;
}
.topic-tile p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin-top:11px;
  min-height:46px;
}
.topic-tile-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:26px;
  font-size:11px;
  color:var(--tile);
}
.topic-tile-bottom>.icon {
  width:16px;
  height:16px;
}
.tile-courts {
  --tile:#8084ae;
}
.tile-elections {
  --tile:#b99058;
}
.tile-economy {
  --tile:#6598ac;
}
.tile-provinces {
  --tile:#b87e84;
}
.tile-foreign {
  --tile:#778eab;
}
.back-link {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:21px;
}
.back-link>.icon {
  width:15px;
  height:15px;
}
.watch-content {
  padding-top:25px;
}
.watch-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
}
.watch-main {
  min-width:0;
}
.player {
  aspect-ratio:16/9;
  background:#131c19;
  border-radius:12px;
  overflow:hidden;
}
.player iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.watch-tags {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  font-size:10px;
  color:var(--muted);
}
.watch-tags .type-label {
  font-size:9px;
  padding:4px 7px;
}
.watch-title {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.45px;
  line-height:1.65;
  margin-top:10px;
  unicode-bidi:plaintext;
}
.watch-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:20px 0 22px;
  flex-wrap:wrap;
}
.watch-source {
  display:flex;
  align-items:center;
  gap:9px;
}
.watch-source .source-avatar {
  width:36px;
  height:36px;
  font-size:11px;
}
.watch-source strong {
  font-size:11px;
}
.watch-source small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px;
}
.watch-source>.icon {
  width:11px;
  height:11px;
  color:var(--green);
}
.action-buttons {
  display:flex;
  gap:6px;
}
.action-buttons .pill-button {
  font-size:10px;
  padding:8px 11px;
}
.video-description {
  background:var(--surface);
  border-radius:10px;
  padding:17px 19px;
  margin-top:22px;
}
.description-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  gap:10px;
}
.description-head strong {
  color:#6c7a72;
  font-size:11px;
  font-weight:500;
}
.description-text {
  font-size:11px;
  color:#87928c;
  line-height:1.9;
  white-space:pre-line;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:12px 0 7px;
  overflow-wrap:anywhere;
}
.description-text.expanded {
  display:block;
}
.watch-topics {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:17px;
}
.watch-topics .topic-chip {
  font-size:10px;
  padding:7px 10px;
}
.watch-topics>span {
  color:#a3aca7;
  font-size:9px;
  width:100%;
  margin-top:6px;
}
.related .section-heading {
  margin-bottom:9px;
}
.related .section-heading h2 {
  font-size:15px;
}
.related-note {
  font-size:10px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:20px;
}
.compact {
  display:flex;
  gap:11px;
  margin-bottom:20px;
}
.compact>.thumbnail-wrap {
  width:125px;
  flex-shrink:0;
}
.compact .thumbnail-link {
  border-radius:7px;
}
.compact .video-card-body {
  padding:0;
  gap:0;
}
.compact .video-card-body>.source-avatar {
  display:none;
}
.compact .video-type-row {
  margin-bottom:3px;
}
.compact .card-topic {
  display:none;
}
.compact .video-title {
  font-size:10px;
  min-height:0;
  -webkit-line-clamp:3;
  line-height:1.55;
}
.compact .video-source {
  font-size:9px;
  margin-top:5px;
}
.compact .video-time {
  font-size:8px;
}
.compact .duration {
  font-size:8px;
  bottom:5px;
  right:5px;
  padding:2px 4px;
}
.compact .save-video {
  width:22px;
  height:22px;
  right:5px;
  top:5px;
}
.compact .save-video>.icon {
  width:12px;
  height:12px;
}
.compact .watched-label {
  display:none;
}
.player-unavailable {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  gap:15px;
}
.player-unavailable h2 {
  font-size:17px;
}
.player-unavailable a {
  font-size:12px;
  text-decoration:underline;
}
.settings-panel {
  max-width:760px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 25px;
  margin-top:35px;
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.setting-row:last-child {
  border-bottom:0;
}
.setting-row h3 {
  font-size:13px;
  font-weight:600;
}
.setting-row p {
  font-size:11px;
  line-height:1.9;
  color:var(--muted);
  margin-top:5px;
}
.switch {
  width:38px;
  height:22px;
  flex-shrink:0;
  border-radius:15px;
  background:#d9e1dd;
  padding:3px;
  transition:background .2s;
}
.switch>span {
  display:block;
  width:16px;
  height:16px;
  background:white;
  border-radius:50%;
  box-shadow:0 1px 4px #0002;
  transition:transform .2s;
}
.switch.on {
  background:var(--green);
}
.switch.on>span {
  transform:translateX(16px);
}
.about-panel {
  max-width:640px;
  margin:35px auto 50px;
}
.about-panel>.brand-mark {
  width:49px;
  height:49px;
  margin-bottom:30px;
}
.about-panel h1 {
  font-size:43px;
  font-weight:750;
  letter-spacing:-1.8px;
  line-height:1.3;
  margin-bottom:25px;
}
.about-panel p {
  font-size:13px;
  line-height:2;
  color:var(--muted);
}
.about-panel h2 {
  font-size:19px;
  letter-spacing:-.5px;
  margin:30px 0 12px;
}
.about-panel p>a {
  color:var(--green);
  text-decoration:underline;
}
.about-panel .primary-button {
  margin-top:30px;
}
.toast {
  position:fixed;
  bottom:28px;
  left:calc(50% + 118px);
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#243b31;
  color:#fff;
  box-shadow:var(--shadow);
  font-size:12px;
  border-radius:10px;
  animation:toast-in .18s ease-out;
  white-space:nowrap;
}
.toast>.icon {
  width:17px;
  height:17px;
  color:#9fd6b6;
}
.toast>button {
  color:#c3d2ca;
  display:grid;
  place-items:center;
  margin-left:12px;
  padding:2px;
}
.toast>button>.icon {
  width:14px;
  height:14px;
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#10271c66;
  backdrop-filter:blur(5px);
  z-index:60;
  display:grid;
  place-items:center;
  padding:24px;
}
.help-dialog {
  position:relative;
  border-radius:17px;
  background:var(--bg);
  box-shadow:var(--shadow);
  padding:35px;
  width:390px;
  max-width:100%;
}
.close-dialog {
  position:absolute;
  top:12px;
  right:12px;
}
.help-dialog h2 {
  font-size:21px;
  letter-spacing:-.6px;
  margin:5px 0 10px;
}
.help-dialog>p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:25px;
}
.help-dialog>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:15px 0;
  font-size:12px;
  color:var(--muted);
}
.help-dialog kbd {
  min-width:32px;
  text-align:center;
  padding:4px 8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  font:12px 'DM Sans';
}
.help-dialog>.primary-button {
  margin-top:19px;
  width:100%;
  justify-content:center;
}
.connection-status {
  display:none;
  position:fixed;
  top:0;
  left:236px;
  right:0;
  text-align:center;
  background:#f4e0b8;
  color:#71551e;
  font-size:11px;
  padding:7px;
  z-index:70;
}
.phx-disconnected.phx-error .connection-status {
  display:block;
}
.menu-scrim {
  display:none;
}
@keyframes toast-in {
  from {
    opacity:0;
    bottom:20px;
  }
  to {
    opacity:1;
    bottom:28px;
  }
}
html[data-theme=dark] {
  --bg:#19231f;
  --surface:#212e28;
  --surface-strong:#293d32;
  --ink:#e0ebe4;
  --muted:#96a69d;
  --line:#304037;
  --green:#83c4a3;
  --green-soft:#2a4435;
  color-scheme:dark;
}
.video-title:where(html[data-theme=dark] *) {
  color:var(--ink);
}
html[data-theme=dark] .topic-chip.active {
  background:#83c4a3;
  color:#17251c;
  border-color:#83c4a3;
}
html[data-theme=dark] .brand-mark {
  background:#3f9069;
  color:#fff;
}
html[data-theme=dark] .primary-button {
  background:#3f9069;
  color:#fff;
}
html[data-theme=dark] .type-label {
  background:#2b4035;
  color:#a4c3b1;
}
html[data-theme=dark] .type-news {
  background:#2a3943;
  color:#9eb6c9;
}
html[data-theme=dark] .type-explainer {
  background:#3a3040;
  color:#bca5c3;
}
html[data-theme=dark] .source-avatar {
  background:color-mix(in srgb,var(--source-color) 15%,#d1dfd4);
}
html[data-theme=dark] .thumbnail-shade {
  background:linear-gradient(transparent 65%,#0006);
}
@media(min-width:1600px) {
  .video-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .content {
    padding:42px 46px;
  }
  .topbar {
    padding:0 46px;
  }
  .video-title {
    font-size:14px;
    min-height:46px;
  }
  .video-source {
    font-size:11px;
  }
  .video-time {
    font-size:10px;
  }
  .type-label {
    font-size:9px;
  }
  .card-topic {
    font-size:9px;
  }
  .watch-layout {
    grid-template-columns:minmax(0,1fr) 350px;
  }
  .compact>.thumbnail-wrap {
    width:145px;
  }
  .compact .video-title {
    font-size:12px;
    min-height:0;
  }
  .compact .video-source {
    font-size:10px;
  }
  .page-intro h1 {
    font-size:37px;
  }
}
@media(max-width:1190px) {
  .sidebar {
    width:208px;
    padding-left:12px;
    padding-right:12px;
  }
  .main-shell {
    margin-left:208px;
  }
  .brand {
    gap:9px;
    padding:0 9px;
  }
  .brand-word {
    font-size:27px;
  }
  .topbar {
    padding:0 27px;
    gap:15px;
  }
  .content {
    padding:30px 27px;
  }
  .topbar-right {
    gap:12px;
  }
  .edition {
    font-size:10px;
  }
  .help-button {
    display:none;
  }
  .page-intro h1 {
    font-size:29px;
  }
  .page-intro h1+p {
    font-size:11px;
    max-width:430px;
  }
  .video-grid {
    gap:28px 17px;
  }
  .video-title {
    font-size:11px;
  }
  .video-type-row {
    gap:4px;
  }
  .card-topic {
    font-size:7px;
  }
  .source-avatar {
    width:27px;
    height:27px;
    font-size:8px;
  }
  .video-card-body {
    gap:7px;
  }
  .feed-tabs {
    gap:20px;
  }
  .feed-toolbar-right {
    gap:11px;
  }
  .sources-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .topics-grid {
    gap:16px;
  }
  .topic-tile {
    padding:21px;
  }
  .topic-tile h2 {
    font-size:18px;
  }
  .watch-layout {
    grid-template-columns:minmax(0,1fr) 245px;
    gap:21px;
  }
  .compact>.thumbnail-wrap {
    width:100px;
  }
  .compact .video-source {
    font-size:8px;
  }
  .compact .type-label {
    font-size:7px;
  }
  .watch-title {
    font-size:18px;
  }
  .watch-actions {
    gap:18px;
  }
  .toast {
    left:calc(50% + 104px);
  }
  .site-footer {
    padding:22px 27px;
  }
  .connection-status {
    left:208px;
  }
}
@media(max-width:960px) {
  .video-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 20px;
  }
  .collection-date {
    display:none;
  }
  .page-intro h1 {
    font-size:30px;
  }
  .card-topic {
    font-size:8px;
  }
  .video-title {
    font-size:12px;
  }
  .video-source {
    font-size:10px;
  }
  .topbar {
    height:79px;
  }
  .edition {
    display:none;
  }
  .feed-tabs {
    gap:19px;
  }
  .sort-label>.icon {
    display:none;
  }
  .sort-label select {
    max-width:100px;
    font-size:10px;
  }
  .filter-button {
    padding-left:12px;
  }
  .sources-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .topics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .watch-layout {
    display:block;
  }
  .related {
    margin-top:35px;
  }
  .related {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
  }
  .related>.section-heading,.related>.related-note {
    grid-column:1/-1;
    margin-bottom:0;
  }
  .compact {
    display:block;
  }
  .compact>.thumbnail-wrap {
    width:100%;
    margin-bottom:9px;
  }
  .compact .video-title {
    font-size:12px;
  }
  .compact .video-source {
    font-size:10px;
  }
  .compact .type-label {
    font-size:8px;
  }
  .filters-panel {
    flex-wrap:wrap;
  }
  .filters-panel>label {
    min-width:40%;
  }
}
@media(max-width:700px) {
  .sidebar {
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .22s;
    width:236px;
    padding-top:29px;
  }
  .menu-open .sidebar {
    transform:translateX(0);
    visibility:visible;
  }
  .menu-open .menu-scrim {
    display:block;
    position:fixed;
    inset:0;
    background:#132b225c;
    z-index:25;
    backdrop-filter:blur(2px);
  }
  .main-shell {
    margin-left:0;
  }
  .topbar {
    height:auto;
    min-height:73px;
    padding:18px 20px;
    gap:12px;
    flex-wrap:wrap;
  }
  .mobile-menu {
    display:grid;
    width:24px;
    margin-right:2px;
  }
  .mobile-brand {
    display:block;
    font-family:'Manrope',sans-serif;
    font-size:24px;
    letter-spacing:-1.5px;
    font-weight:800;
  }
  .mobile-brand>span {
    color:var(--green);
  }
  .search-form {
    order:4;
    max-width:none;
    flex-basis:100%;
    margin-top:6px;
    height:40px;
  }
  .topbar-right {
    margin-left:auto;
  }
  .topbar-right .edition {
    display:flex;
    font-size:9px;
  }
  .device-avatar {
    width:28px;
    height:28px;
  }
  .content {
    padding:26px 20px;
  }
  .page-intro {
    margin-bottom:23px;
    gap:12px;
    align-items:flex-start;
  }
  .page-kicker {
    font-size:10px;
    margin-bottom:9px;
  }
  .page-intro h1 {
    font-size:29px;
    letter-spacing:-1.2px;
  }
  .page-intro h1+p {
    font-size:11px;
    line-height:1.9;
    margin-top:8px;
    max-width:330px;
  }
  .topic-chips {
    margin-right:-20px;
    padding-right:20px;
  }
  .topic-chip {
    font-size:10px;
    padding:8px 12px;
  }
  .discovery-bar {
    padding-bottom:17px;
  }
  .feed-toolbar {
    margin-bottom:21px;
    gap:8px;
  }
  .feed-tabs {
    gap:20px;
  }
  .feed-tabs a {
    font-size:11px;
  }
  .sort-label {
    display:none;
  }
  .feed-toolbar-right {
    gap:0;
  }
  .filter-button {
    border-left:none;
    padding-left:3px;
    font-size:10px;
  }
  .video-grid {
    gap:25px 15px;
  }
  .video-card-body {
    padding-top:10px;
    gap:6px;
  }
  .video-card-body>.source-avatar {
    display:none;
  }
  .video-title {
    font-size:11px;
    min-height:36px;
    line-height:1.6;
  }
  .video-title:dir(rtl) {
    font-size:12px;
  }
  .video-source {
    font-size:9px;
    margin-top:5px;
  }
  .video-time {
    font-size:8px;
  }
  .card-topic {
    font-size:7px;
  }
  .type-label {
    font-size:7px;
  }
  .thumbnail-link {
    border-radius:8px;
  }
  .duration {
    font-size:8px;
    right:6px;
    bottom:6px;
  }
  .save-video {
    opacity:1;
    top:6px;
    right:6px;
    width:24px;
    height:24px;
    border-radius:5px;
  }
  .save-video>.icon {
    width:14px;
    height:14px;
  }
  .site-footer {
    padding:20px;
    gap:13px;
    flex-wrap:wrap;
  }
  .site-footer p {
    font-size:9px;
  }
  .site-footer>a {
    margin-left:0;
    font-size:8px;
  }
  .toast {
    left:50%;
    max-width:calc(100% - 30px);
    font-size:11px;
    bottom:20px;
  }
  .topics-grid {
    gap:13px;
    padding-top:0;
  }
  .topic-tile {
    padding:19px;
  }
  .topic-tile h2 {
    font-size:18px;
  }
  .topic-tile p {
    font-size:10px;
    min-height:57px;
  }
  .topic-illustration {
    margin-bottom:25px;
    width:51px;
    height:51px;
    border-radius:17px;
  }
  .topic-illustration>.icon {
    width:27px;
    height:27px;
  }
  .source-card {
    padding:18px 14px 14px;
  }
  .source-card h3 {
    font-size:12px;
  }
  .source-card>p {
    font-size:9px;
  }
  .source-card-bottom {
    font-size:8px;
    gap:5px;
  }
  .sources-grid {
    gap:13px;
  }
  .catalog-pill {
    display:none;
  }
  .source-groups {
    margin-top:28px;
  }
  .section-heading h2 {
    font-size:16px;
  }
  .watch-title {
    font-size:19px;
    line-height:1.65;
  }
  .watch-actions {
    padding:18px 0;
    gap:18px;
  }
  .action-buttons {
    gap:6px;
  }
  .action-buttons .pill-button {
    padding:8px 12px;
  }
  .watch-layout {
    margin:0;
  }
  .player {
    border-radius:9px;
  }
  .watch-content {
    padding-top:20px;
  }
  .watch-topics>.topic-chip {
    font-size:9px;
  }
  .description-head {
    font-size:9px;
  }
  .video-description {
    padding:15px;
  }
  .settings-panel {
    padding:0 17px;
    margin-top:25px;
  }
  .setting-row {
    gap:15px;
    padding:22px 0;
  }
  .setting-row p {
    font-size:10px;
  }
  .setting-row h3 {
    font-size:12px;
  }
  .setting-row>.pill-button {
    font-size:10px;
    padding:8px 10px;
  }
  .about-panel {
    margin-top:15px;
  }
  .about-panel h1 {
    font-size:36px;
    letter-spacing:-1.3px;
  }
  .about-panel p {
    font-size:12px;
  }
  .about-panel h2 {
    font-size:18px;
  }
  .connection-status {
    left:0;
  }
  .feed-end {
    font-size:9px;
    gap:9px;
  }
  .feed-end>span {
    width:25px;
  }
}
@media(max-width:560px) {
  .topic-chips {
    margin-right:-16px;
    padding-right:16px;
  }
  .content {
    padding-left:16px;
    padding-right:16px;
  }
  .topbar {
    padding-left:16px;
    padding-right:16px;
  }
  .page-intro h1 {
    font-size:26px;
  }
  .video-grid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .video-card-body>.source-avatar {
    display:grid;
    width:30px;
    height:30px;
  }
  .video-title {
    font-size:13px;
    min-height:42px;
  }
  .video-source {
    font-size:10px;
  }
  .video-time {
    font-size:9px;
  }
  .type-label {
    font-size:8px;
  }
  .card-topic {
    font-size:8px;
  }
  .save-video {
    width:28px;
    height:28px;
  }
  .duration {
    font-size:10px;
  }
  .topbar-right .edition {
    display:none;
  }
  .topics-grid {
    grid-template-columns:1fr;
  }
  .topic-tile p {
    min-height:0;
  }
  .sources-grid {
    grid-template-columns:1fr 1fr;
  }
  .feed-tabs {
    gap:15px;
  }
  .feed-tabs a {
    font-size:10px;
  }
  .related {
    grid-template-columns:1fr;
  }
  .compact {
    display:flex;
  }
  .compact>.thumbnail-wrap {
    width:135px;
  }
  .toast {
    white-space:normal;
  }
  .site-footer p {
    max-width:220px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Public YouTube counters and discussion. */
.video-statistics { display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 4px; color:var(--muted); font-size:11px; line-height:1.7; }
.video-statistics small { width:100%; font-size:10px; color:var(--muted); }
.comments-section { margin-top:34px; border-top:1px solid var(--line); padding-top:27px; }
.comments-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:24px; }
.comments-heading h2 { font-size:18px; letter-spacing:-.4px; }
.comments-heading p { color:var(--muted); font-size:11px; margin-top:6px; }
.comments-heading select { border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font-size:11px; padding:9px; max-width:150px; }
.comments-prompt { padding:23px; background:var(--surface); border:1px solid var(--line); border-radius:10px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.comments-prompt p { font-size:12px; color:var(--muted); line-height:1.8; }
.comments-message { font-size:12px; line-height:1.8; color:var(--muted); padding:12px 0; }
.comment { display:flex; align-items:flex-start; gap:12px; padding:19px 0; border-bottom:1px solid var(--line); }
.comment-avatar { flex-shrink:0; display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:12px; font-weight:600; }
.comment-body { min-width:0; flex:1; }
.comment-byline { display:flex; flex-wrap:wrap; gap:5px 10px; align-items:baseline; margin-bottom:9px; }
.comment-byline strong { font-size:12px; overflow-wrap:anywhere; }
.comment-byline time { font-size:10px; color:var(--muted); }
.comment-body>p { font-size:13px; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; }
.comment-meta { display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center; color:var(--muted); font-size:10px; margin-top:12px; }
.comment-meta a { display:flex; gap:5px; align-items:center; color:var(--green); }
.comment-meta .icon { width:11px; height:11px; }
.comments-more { margin-top:20px; }
.comments-footnote { color:var(--muted); font-size:10px; margin-top:17px; line-height:1.8; }
@media(max-width:560px) {
  .comments-prompt { align-items:flex-start; flex-direction:column; padding:18px; }
  .comment { gap:9px; }
  .comment-body>p { font-size:12px; }
  .comments-heading select { font-size:10px; max-width:125px; }
  .video-statistics { gap:5px 14px; font-size:10px; }
}

.collection-switcher {
  padding:0 12px;
  margin:-18px 0 22px;
}
.sidebar { overflow-y:auto; }
.primary-button:hover { background:var(--green); filter:brightness(.9); }
.app {
  --green:var(--collection-accent,#15745a);
  --green-soft:color-mix(in srgb,var(--green) 10%,var(--bg));
}
html[data-theme=dark] .app {
  --green:color-mix(in srgb,var(--collection-accent,#15745a) 50%,white);
}
html[data-theme=dark] .primary-button,
html[data-theme=dark] .brand-mark,
html[data-theme=dark] .save-video.saved {
  color:var(--bg);
}

.series-card { display:block; text-decoration:none; color:var(--ink); min-width:0; }
.series-card .thumbnail-wrap { aspect-ratio:16/9; overflow:hidden; position:relative; border-radius:12px; background:var(--surface); }
.series-card img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.series-card:hover img { transform:scale(1.025); }
.series-card h2 { font-size:18px; line-height:1.4; margin:12px 0 5px; }
.series-card p,.series-card small,.series-note { color:var(--muted); line-height:1.7; }
.series-card p { margin:0 0 5px; font-size:13px; }
.series-card small { display:flex; align-items:center; gap:6px; }
.series-card .duration { position:absolute; bottom:10px; right:10px; background:#17221de6; color:white; padding:4px 8px; border-radius:5px; font-size:12px; }
.series-note { margin:0 0 25px; font-size:14px; }
.episode-label { margin:0 0 10px; color:var(--green); font-size:13px; font-weight:600; }
.episode-navigation { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; border-block:1px solid var(--line); padding:20px 0; margin-bottom:20px; }
.episode-navigation > a { color:var(--green); font-weight:600; }

/* Jellyware's collection home shares the viewing app's typography and tokens. */
.collection-home { max-width:1440px; margin:auto; padding:0 5vw; }
.collection-home-header { height:106px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.home-wordmark { font-family:Manrope,sans-serif; font-size:30px; font-weight:800; letter-spacing:-1.6px; }
.home-wordmark span { color:#15745a; }
.home-explore { font-size:14px; }
.collection-home-intro { padding:85px 0 75px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.collection-home-intro h1 { margin:0; font-family:Manrope,sans-serif; font-size:clamp(56px,7vw,100px); font-weight:750; letter-spacing:-6px; line-height:1.04; }
.collection-home-intro p { color:var(--muted); font-size:17px; line-height:1.8; margin:0 0 25px; }
.collection-home-intro a { font-size:15px; font-weight:600; display:flex; justify-content:space-between; max-width:270px; padding-bottom:8px; border-bottom:1px solid var(--ink); }
.collection-home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; scroll-margin-top:30px; }
.home-collection { min-width:0; }
.home-collection-art { height:280px; position:relative; overflow:hidden; border-radius:15px; background:var(--collection-color); }
.home-collection-art img { width:72%; height:72%; position:absolute; object-fit:cover; border-radius:8px; box-shadow:0 8px 20px #0003; }
.home-collection-art .art-0 { left:10%; top:17%; transform:rotate(-5deg); z-index:3; }
.home-collection-art .art-1 { right:-6%; top:-4%; transform:rotate(13deg); z-index:2; }
.home-collection-art .art-2 { left:-16%; bottom:-35%; transform:rotate(-15deg); }
.home-collection-open { position:absolute; right:15px; bottom:15px; z-index:4; background:var(--bg); color:var(--ink); border-radius:50%; width:40px; height:40px; display:grid; place-items:center; font-size:23px; }
.home-collection-detail { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:21px; }
.home-collection-detail h2 { font-size:23px; line-height:1.25; letter-spacing:-.8px; margin:0 0 8px; }
.home-collection-detail span { color:var(--muted); font-size:13px; }
.home-collection-detail .home-collection-count { white-space:nowrap; padding-top:4px; color:var(--collection-color); }
.home-collection > p { font-size:14px; line-height:1.7; color:var(--muted); max-width:42ch; margin:18px 0; }
.home-attribution { font-size:13px; color:var(--muted); margin:65px 0 35px; }
.collection-home-footer { display:flex; justify-content:space-between; padding:25px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.home-empty { padding:30px 0; }
@media(max-width:900px) { .collection-home-grid { grid-template-columns:1fr; gap:35px; } .home-collection { display:grid; grid-template-columns:45% 1fr; column-gap:25px; } .home-collection-art { grid-row:1/3; height:260px; } .home-collection-detail { margin-top:12px; } .collection-home-intro h1 { letter-spacing:-3px; } }
@media(max-width:600px) { .collection-home-header { height:80px; } .home-wordmark { font-size:26px; } .home-explore { font-size:12px; } .collection-home-intro { display:block; padding:50px 0; } .collection-home-intro h1 { font-size:65px; margin-bottom:30px; } .collection-home-intro p { font-size:15px; } .home-collection { display:block; } .home-collection-art { height:290px; } .home-collection-detail { margin-top:20px; } .home-attribution { margin-top:35px; } }

/* Collection and language pickers share a quiet, tactile disclosure style. */
.picker { position:relative; color:var(--ink); }
.picker summary { list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.picker summary::-webkit-details-marker { display:none; }
.picker summary:focus-visible,.picker [data-picker-option]:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.picker-current { min-width:0; flex:1; font-size:12px; font-weight:600; }
.picker-current small { display:block; font-size:9px; color:var(--muted); font-weight:450; margin-bottom:2px; }
.picker-current strong { font-size:12px; font-weight:600; }
.picker-chevron { width:6px; height:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); margin:-3px 3px 0 4px; flex-shrink:0; }
.picker[open]>summary .picker-chevron { transform:rotate(225deg); margin-top:3px; }
.picker-menu { position:absolute; top:calc(100% + 9px); z-index:60; border:1px solid var(--line); border-radius:14px; background:var(--bg); box-shadow:var(--shadow); padding:8px; }
.picker-menu-heading { color:var(--muted); font-size:10px; font-weight:500; padding:5px 7px 10px; margin:0; }
.picker-caption { display:block; font-size:10px; color:var(--muted); margin-bottom:9px; }
.collection-picker>summary { border:1px solid var(--line); background:var(--surface); padding:11px 9px; border-radius:10px; }
.collection-picker>summary:hover { border-color:color-mix(in srgb,var(--green) 35%,var(--line)); }
.collection-emblem { width:29px; height:29px; flex-shrink:0; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--picker-accent,var(--green)) 10%,var(--bg)); color:var(--picker-accent,var(--green)); }
.collection-emblem .icon { width:15px; height:15px; }
.collection-menu { left:0; width:100%; min-width:190px; }
.collection-choice { display:flex; align-items:center; gap:9px; padding:10px 7px; border-radius:8px; }
.collection-choice>span:nth-child(2) { flex:1; min-width:0; }
.collection-choice strong { display:block; font-size:11px; font-weight:600; line-height:1.4; }
.collection-choice small { display:block; font-size:9px; color:var(--muted); line-height:1.5; margin-top:3px; }
.collection-choice>.icon { width:13px; height:13px; color:var(--green); flex-shrink:0; }
.collection-choice:hover,.language-choice:hover { background:var(--surface); }
.collection-choice.is-selected,.language-choice.is-selected { background:var(--green-soft); }
.language-picker>summary { padding:6px 10px; border:1px solid var(--line); border-radius:9px; min-width:135px; background:var(--bg); }
.language-picker[open]>summary { border-color:var(--green); }
.language-symbol { font-family:'Noto Sans Arabic',sans-serif; font-size:22px; color:var(--green); width:18px; text-align:center; }
.language-menu { right:0; width:300px; max-width:calc(100vw - 40px); }
.language-options { display:grid; grid-template-columns:1fr 1fr; gap:3px; max-height:min(280px,var(--picker-space,280px)); overflow-y:auto; overscroll-behavior:contain; padding:2px; scrollbar-width:thin; }
.language-choice { appearance:none; display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; min-height:45px; padding:9px 10px; border:0; border-radius:7px; background:transparent; text-align:left; color:var(--ink); }
.language-choice strong { display:block; font-size:11px; font-weight:550; }
.language-choice small { display:block; font-family:'Noto Sans Arabic',sans-serif; font-size:11px; color:var(--muted); margin-top:3px; }
.picker-check { opacity:0; color:var(--green); font-size:13px; }
.language-choice.is-selected .picker-check { opacity:1; }
.picker-footnote { border-top:1px solid var(--line); margin:8px 2px 0; padding:10px 5px 3px; font-size:9px; color:var(--muted); line-height:1.5; }
.drama-tools { display:flex; justify-content:flex-end; margin:-3px 0 20px; }
.feed-toolbar { flex-wrap:wrap; }
.feed-tabs { flex:1 1 300px; min-width:0; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.feed-toolbar-right { flex-shrink:0; gap:13px; }
@media(max-width:700px) {
  .feed-tabs { flex-basis:100%; }
  .feed-toolbar-right { width:100%; justify-content:space-between; padding:1px 0 12px; }
  .language-menu { left:0; right:auto; }
  .drama-tools { justify-content:flex-start; }
}

.picker[data-placement="above"]>.picker-menu { top:auto; bottom:calc(100% + 9px); }
.collection-menu { max-height:calc(100dvh - 230px); overflow-y:auto; }

/* A compact horizontal year rail, aligned to the browsing controls. */
.year-rail { display:flex; align-items:center; gap:8px; width:min(100%,640px); margin:10px 0 22px auto; min-width:0; }
.year-rail-label { color:var(--muted); font-size:12px; white-space:nowrap; margin-right:6px; }
.year-options { display:flex; gap:5px; overflow-x:auto; min-width:0; padding:5px 2px; scrollbar-width:thin; overscroll-behavior-x:contain; }
.year-chip { flex-shrink:0; padding:7px 12px; border-radius:8px; color:var(--muted); font-size:12px; font-weight:550; text-decoration:none; white-space:nowrap; }
.year-chip:hover { background:var(--surface); color:var(--ink); }
.year-chip.active { background:color-mix(in srgb,var(--green) 10%,var(--bg)); color:var(--green); }
.year-scroll { flex-shrink:0; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); width:27px; height:27px; font-size:19px; line-height:1; cursor:pointer; }
.year-chip:focus-visible,.year-scroll:focus-visible,.year-options:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.filters-panel[hidden] { display:none; }
@media(max-width:640px) { .year-rail { width:100%; gap:4px; } .year-chip { padding:7px 10px; } .year-rail-label { margin-right:2px; } }