/*
 * Final visual layer
 * One predictable surface system loaded after the legacy stylesheet.  It owns
 * colour, transparency and contrast only; the original file still owns layout.
 */

:root {
  --final-blue: #0a84ff;
  --final-light-text: #1d1d1f;
  --final-light-muted: #62656b;
  --final-dark-text: #f5f5f7;
  --final-dark-muted: #aeb4be;
}

html body.theme-light.has-ambient-video .sidebar,
html body.theme-light .sidebar {
  background: rgba(239, 244, 245, .72) !important;
  border-color: rgba(255,255,255,.68) !important;
  box-shadow: 0 10px 28px rgba(20,30,36,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(20px) saturate(112%) !important;
  backdrop-filter: blur(20px) saturate(112%) !important;
}

html body.theme-light.has-ambient-video .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block, .pan-search-results, .notice, .resource-card, .overview-card),
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block, .pan-search-results, .notice, .resource-card, .overview-card) {
  background: rgba(237, 243, 244, .58) !important;
  border-color: rgba(255,255,255,.66) !important;
  box-shadow: 0 14px 34px rgba(22,35,42,.14), inset 0 1px 0 rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter: blur(22px) saturate(116%) !important;
  backdrop-filter: blur(22px) saturate(116%) !important;
  color: var(--final-light-text) !important;
}

/* The study room is deliberately neutral silver. No old blue gradient can win. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(243,248,249,.72), rgba(182,199,202,.64)) !important;
  background-image: linear-gradient(145deg, rgba(243,248,249,.72), rgba(182,199,202,.64)) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 16px 38px rgba(30,39,42,.16), inset 0 1px 0 rgba(255,255,255,.76) !important;
  color: var(--final-light-text) !important;
  -webkit-backdrop-filter: blur(22px) saturate(108%) !important;
  backdrop-filter: blur(22px) saturate(108%) !important;
}

html body.theme-light .main :is(.study-room-teaser-head h2, .study-room-preview-seats b) { color: #1d1d1f !important; }
html body.theme-light .main :is(.study-room-teaser-head span, .study-room-teaser-lead, .study-room-preview-seats small, .study-room-teaser-bottom > span) { color: #5f6368 !important; }
html body.theme-light .main :is(.study-room-preview-seats > span, .study-room-teaser-head > b) {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(60,60,67,.14) !important;
  box-shadow: none !important;
}

html body.theme-light .main .overview-samples {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(60,60,67,.09) !important;
  box-shadow: none !important;
}
html body.theme-light .main .overview-samples span {
  background: transparent !important;
  color: #415061 !important;
  border-bottom-color: rgba(60,60,67,.09) !important;
  box-shadow: none !important;
}

/* macOS dark: cards and their nested rows use adjacent graphite elevations. */
html body:not(.theme-light) .sidebar {
  background: rgba(28,28,30,.94) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html body:not(.theme-light) .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block, .pan-search-results, .notice, .resource-card, .overview-card) {
  background: linear-gradient(145deg, rgba(42,43,48,.95), rgba(28,29,33,.97)) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055) !important;
  color: var(--final-dark-text) !important;
  -webkit-backdrop-filter: blur(16px) saturate(102%) !important;
  backdrop-filter: blur(16px) saturate(102%) !important;
}
html body:not(.theme-light) .main .overview-samples {
  background: #2c2c2e !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html body:not(.theme-light) .main .overview-samples span {
  background: transparent !important;
  color: #ebebf5 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
html body:not(.theme-light) .main .overview-samples span::after { color: #8e8e93 !important; }
html body:not(.theme-light) .main .overview-samples span:hover { background: rgba(10,132,255,.16) !important; color: #fff !important; }
html body:not(.theme-light) .main .overview-card .section-open-button {
  background: rgba(10,132,255,.18) !important;
  border: 1px solid rgba(10,132,255,.30) !important;
  box-shadow: none !important;
  color: #64b5ff !important;
}
html body:not(.theme-light) .main .overview-card .section-open-button:hover { background: rgba(10,132,255,.30) !important; color: #fff !important; }
html body:not(.theme-light) :is(.nav-link, .nav-link span:last-child, .overview-card h3, .overview-card p, .featured-item h3, .featured-item p) { color: var(--final-dark-text) !important; text-shadow: none !important; }

/* Homepage dark-mode completion: every foreground level gets a deliberate
   graphite counterpart instead of inheriting a colour from the light theme. */
html body:not(.theme-light).has-ambient-video .sidebar,
html body:not(.theme-light) .sidebar {
  background: rgba(28,28,30,.96) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html body:not(.theme-light).has-ambient-video .sidebar :is(.brand strong, .nav-link, .nav-link span:last-child),
html body:not(.theme-light) .sidebar :is(.brand strong, .nav-link, .nav-link span:last-child) {
  color: #f5f5f7 !important;
  text-shadow: none !important;
}
html body:not(.theme-light).has-ambient-video .sidebar .nav-link.active,
html body:not(.theme-light) .sidebar .nav-link.active {
  background: rgba(10,132,255,.24) !important;
  color: #fff !important;
}

html body:not(.theme-light).has-ambient-video .main .hero-copy,
html body:not(.theme-light) .main .hero-copy {
  background: linear-gradient(145deg, rgba(42,43,48,.97), rgba(28,29,33,.98)) !important;
  color: #f5f5f7 !important;
}
html body:not(.theme-light).has-ambient-video .main .hero-copy h1,
html body:not(.theme-light) .main .hero-copy h1 { color: #f5f5f7 !important; text-shadow: none !important; }
html body:not(.theme-light).has-ambient-video .main .hero-copy > p:not(.hero-blessing),
html body:not(.theme-light) .main .hero-copy > p:not(.hero-blessing) { color: #c7cbd1 !important; text-shadow: none !important; }
html body:not(.theme-light).has-ambient-video .main .hero-copy .eyebrow span,
html body:not(.theme-light) .main .hero-copy .eyebrow span { color: #d6d9df !important; }
html body:not(.theme-light).has-ambient-video .main .hero-copy .hero-blessing,
html body:not(.theme-light) .main .hero-copy .hero-blessing { color: #ffd60a !important; text-shadow: none !important; }

html body:not(.theme-light).has-ambient-video .main .search-panel-head :is(span, strong),
html body:not(.theme-light) .main .search-panel-head :is(span, strong) { color: #e7e9ed !important; }
html body:not(.theme-light).has-ambient-video .main .search-box,
html body:not(.theme-light) .main .search-box {
  background: #2c2c2e !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html body:not(.theme-light).has-ambient-video .main .search-box input,
html body:not(.theme-light) .main .search-box input { color: #f5f5f7 !important; }
html body:not(.theme-light).has-ambient-video .main .search-box input::placeholder,
html body:not(.theme-light) .main .search-box input::placeholder { color: #9a9ca2 !important; }
html body:not(.theme-light).has-ambient-video .main .hot-searches button,
html body:not(.theme-light) .main .hot-searches button {
  background: #2c2c2e !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #e7e9ed !important;
  box-shadow: none !important;
}
html body:not(.theme-light).has-ambient-video .main .hero-stats span,
html body:not(.theme-light) .main .hero-stats span {
  background: #2c2c2e !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f5f5f7 !important;
}
html body:not(.theme-light).has-ambient-video .main .hero-stats :is(strong, small),
html body:not(.theme-light) .main .hero-stats :is(strong, small) { color: #f5f5f7 !important; }

html body:not(.theme-light).has-ambient-video .main .hero-live-panel,
html body:not(.theme-light) .main .hero-live-panel {
  background: linear-gradient(145deg, rgba(42,43,48,.97), rgba(28,29,33,.98)) !important;
  color: #f5f5f7 !important;
}
html body:not(.theme-light).has-ambient-video .main .hero-live-panel :is(p, strong, b, small, time),
html body:not(.theme-light) .main .hero-live-panel :is(p, strong, b, small, time) { color: #e8e9ed !important; text-shadow: none !important; }
html body:not(.theme-light).has-ambient-video .main .hero-live-services > span,
html body:not(.theme-light) .main .hero-live-services > span { border-color: rgba(255,255,255,.12) !important; }

html body:not(.theme-light).has-ambient-video .main .hero-art.study-room-teaser,
html body:not(.theme-light) .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(42,43,48,.97), rgba(28,29,33,.98)) !important;
  background-image: linear-gradient(145deg, rgba(42,43,48,.97), rgba(28,29,33,.98)) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: #f5f5f7 !important;
}
html body:not(.theme-light).has-ambient-video .main .study-room-teaser-head :is(h2, strong),
html body:not(.theme-light) .main .study-room-teaser-head :is(h2, strong) { color: #f5f5f7 !important; }
html body:not(.theme-light).has-ambient-video .main :is(.study-room-teaser-head span, .study-room-teaser-lead, .study-room-preview-seats small, .study-room-teaser-bottom > span),
html body:not(.theme-light) .main :is(.study-room-teaser-head span, .study-room-teaser-lead, .study-room-preview-seats small, .study-room-teaser-bottom > span) { color: #aeb4be !important; text-shadow: none !important; }
html body:not(.theme-light).has-ambient-video .main .study-room-preview-seats > span,
html body:not(.theme-light) .main .study-room-preview-seats > span {
  background: #2c2c2e !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
html body:not(.theme-light).has-ambient-video .main .study-room-preview-seats b,
html body:not(.theme-light) .main .study-room-preview-seats b { color: #f5f5f7 !important; }

/* Compact iOS-style clock widget for the live panel. */
.ios-clock-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 154px;
  min-height: 58px;
  padding: 8px 10px 8px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  color: #f5f5f7;
  background: linear-gradient(145deg, #2c2c2e, #171719);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
}
.ios-clock-copy { display: grid; gap: 3px; min-width: 72px; }
.ios-clock-copy time { color: #fff; font-size: 25px; font-weight: 750; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ios-clock-copy small { color: #c7c7cc; font-size: 11px; font-weight: 560; line-height: 1; white-space: nowrap; }
.ios-clock-face {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: radial-gradient(circle, #252527 0 59%, transparent 60%), repeating-conic-gradient(from -2deg, rgba(255,255,255,.92) 0deg 2deg, transparent 2deg 30deg);
  box-shadow: inset 0 0 0 3px #202022;
}
.ios-clock-face::before,
.ios-clock-face::after { position: absolute; color: #fff; font-size: 7px; font-weight: 800; line-height: 1; }
.ios-clock-face::before { content: "12"; top: 3px; left: 50%; transform: translateX(-50%); }
.ios-clock-face::after { content: "6"; bottom: 3px; left: 50%; transform: translateX(-50%); }
.ios-clock-face i { position: absolute; left: 50%; bottom: 50%; z-index: 1; width: 2px; border-radius: 2px; transform-origin: 50% 100%; transition: transform .35s linear; }
.ios-clock-hour { height: 11px; background: #fff; }
.ios-clock-minute { height: 15px; background: #b58cff; }
.ios-clock-face b { position: absolute; z-index: 2; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
@media (max-width: 680px) { .ios-clock-card { min-width: 0; padding: 7px 9px; } .ios-clock-copy small { display: none; } }

/* Refined status clock: legible at a glance and visually part of the card. */
.ios-clock-card {
  min-width: 112px;
  min-height: 38px;
  gap: 7px;
  padding: 7px 11px;
  border-color: rgba(60,60,67,.12);
  border-radius: 13px;
  color: #566371;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums;
}
.ios-clock-card > span { color: #6e7781; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ios-clock-card > time { color: #26384d; font-size: 19px; font-weight: 720; letter-spacing: -.03em; line-height: 1; }
.ios-clock-card :is(.ios-clock-copy, .ios-clock-face) { display: none; }
html body:not(.theme-light) .ios-clock-card { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
html body:not(.theme-light) .ios-clock-card > span { color: #b6bcc6; }
html body:not(.theme-light) .ios-clock-card > time { color: #f5f5f7; }

/* A readable live analog face, paired with the digital time rather than replacing it. */
.ios-clock-card { min-width: 166px; }
.ios-clock-face {
  display: block !important;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-color: rgba(48,68,89,.22);
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 61%, transparent 62%), repeating-conic-gradient(from -1deg, #5e7184 0deg 2deg, transparent 2deg 30deg);
  box-shadow: inset 0 0 0 3px rgba(239,244,247,.9), 0 2px 6px rgba(35,58,76,.10);
}
.ios-clock-face::before,
.ios-clock-face::after { color: #40546a; font-size: 7px; }
.ios-clock-face i { width: 2px; }
.ios-clock-hour { height: 13px; background: #263e55; }
.ios-clock-minute { height: 18px; background: #0a84ff; }
.ios-clock-face b { width: 6px; height: 6px; background: #0a84ff; }
html body:not(.theme-light) .ios-clock-face {
  border-color: rgba(255,255,255,.20);
  background: radial-gradient(circle, #303136 0 61%, transparent 62%), repeating-conic-gradient(from -1deg, #c8ccd4 0deg 2deg, transparent 2deg 30deg);
  box-shadow: inset 0 0 0 3px #26272b;
}
html body:not(.theme-light) .ios-clock-face::before,
html body:not(.theme-light) .ios-clock-face::after { color: #e7e9ed; }
html body:not(.theme-light) .ios-clock-hour { background: #f5f5f7; }

/* Light silver room: supporting copy must stay dark enough against the card. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser .study-room-teaser-lead,
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser .study-room-teaser-bottom > span,
html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-lead,
html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-bottom > span {
  color: #44515f !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Catalogue cards: a quiet illustrated index instead of nine repeated blank panels. */
.section-modal-grid .catalogue-resource-card {
  --catalogue-accent: #0a84ff;
  --catalogue-accent-rgb: 10,132,255;
  position: relative !important;
  isolation: isolate;
  min-height: 212px !important;
  padding: 22px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,248,250,.90)) !important;
  border: 1px solid rgba(48,68,89,.14) !important;
  box-shadow: 0 12px 25px rgba(34,52,66,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.section-modal-grid .catalogue-resource-card::before {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--catalogue-accent), rgba(var(--catalogue-accent-rgb),.25)) !important;
}
.section-modal-grid .catalogue-resource-card:nth-child(4n + 2) { --catalogue-accent: #34a56f; --catalogue-accent-rgb: 52,165,111; }
.section-modal-grid .catalogue-resource-card:nth-child(4n + 3) { --catalogue-accent: #d88a21; --catalogue-accent-rgb: 216,138,33; }
.section-modal-grid .catalogue-resource-card:nth-child(4n) { --catalogue-accent: #8b5cc7; --catalogue-accent-rgb: 139,92,199; }
.catalogue-resource-index {
  position: absolute;
  z-index: 0;
  top: 11px;
  right: 16px;
  color: rgba(var(--catalogue-accent-rgb),.12);
  font-size: 72px;
  font-weight: 760;
  letter-spacing: -.09em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.catalogue-resource-art {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 74%;
  height: 100%;
  opacity: .68;
  background-image: url("assets/catalogue-study-comic-characters-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 24%, #000 54%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 24%, #000 54%);
  filter: saturate(.93) contrast(.99);
  pointer-events: none;
}
.catalogue-illustration-2 .catalogue-resource-art { background-position: 50% 0; }
.catalogue-illustration-3 .catalogue-resource-art { background-position: 100% 0; }
.catalogue-illustration-4 .catalogue-resource-art { background-position: 0 50%; }
.catalogue-illustration-5 .catalogue-resource-art { background-position: 50% 50%; }
.catalogue-illustration-6 .catalogue-resource-art { background-position: 100% 50%; }
.catalogue-illustration-7 .catalogue-resource-art { background-position: 0 100%; }
.catalogue-illustration-8 .catalogue-resource-art { background-position: 50% 100%; }
.catalogue-illustration-9 .catalogue-resource-art { background-position: 100% 100%; }
.section-modal-grid .catalogue-resource-card .modal-resource-copy {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 90px);
}
.section-modal-grid .catalogue-resource-card h3 {
  color: #202a35 !important;
  font-size: 19px !important;
  font-weight: 730 !important;
  letter-spacing: -.02em;
}
.section-modal-grid .catalogue-resource-card p {
  color: #697787 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.section-modal-grid .catalogue-resource-card .modal-resource-actions {
  position: relative;
  z-index: 2;
  margin-top: auto !important;
}
.section-modal-grid .catalogue-resource-card .tag {
  min-height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(var(--catalogue-accent-rgb),.28) !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--catalogue-accent) 82%, #27384a) !important;
  background: rgba(var(--catalogue-accent-rgb),.12) !important;
  box-shadow: none !important;
}
.section-modal-grid .catalogue-resource-card .open-link {
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(var(--catalogue-accent-rgb),.24) !important;
  border-radius: 11px !important;
  color: var(--catalogue-accent) !important;
  background: rgba(255,255,255,.64) !important;
  box-shadow: none !important;
}
.section-modal-grid .catalogue-resource-card .open-link:hover {
  color: #fff !important;
  background: var(--catalogue-accent) !important;
  box-shadow: 0 7px 15px rgba(var(--catalogue-accent-rgb),.24) !important;
}
html body:not(.theme-light) .section-modal-grid .catalogue-resource-card {
  background: linear-gradient(145deg, rgba(47,49,55,.98), rgba(33,34,39,.98)) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html body:not(.theme-light) .section-modal-grid .catalogue-resource-card h3 { color: #f5f5f7 !important; }
html body:not(.theme-light) .section-modal-grid .catalogue-resource-card p { color: #b6bdc7 !important; }
html body:not(.theme-light) .section-modal-grid .catalogue-resource-card .open-link { background: rgba(255,255,255,.07) !important; }
html body:not(.theme-light) .catalogue-resource-art { opacity: .48; filter: saturate(.70) brightness(.86); }
@media (max-width: 680px) {
  .section-modal-grid .catalogue-resource-card { min-height: 196px !important; padding: 18px !important; }
  .catalogue-resource-art { width: 76%; height: 100%; opacity: .52; }
  .catalogue-resource-index { font-size: 62px; }
}

/* Overview: a clearer, more transparent single glass surface. */
html body.theme-light.has-ambient-video .main .overview-block,
html body.theme-light .main .overview-block {
  background: rgba(202, 220, 224, .43) !important;
  border-color: rgba(255,255,255,.68) !important;
  box-shadow: 0 18px 42px rgba(20,39,48,.16), inset 0 1px 0 rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(122%) !important;
  backdrop-filter: blur(24px) saturate(122%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-header,
html body.theme-light .main .overview-block .overview-header { background: transparent !important; }
html body.theme-light.has-ambient-video .main .overview-block .overview-card,
html body.theme-light .main .overview-block .overview-card {
  background: rgba(248, 252, 253, .52) !important;
  border-color: rgba(255,255,255,.67) !important;
  box-shadow: 0 10px 24px rgba(27,51,61,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;
  -webkit-backdrop-filter: blur(18px) saturate(116%) !important;
  backdrop-filter: blur(18px) saturate(116%) !important;
}
html body.theme-light .main .overview-block .overview-samples {
  background: rgba(235, 247, 249, .35) !important;
  border-color: rgba(85,110,121,.10) !important;
}
html body.theme-light .main .overview-block .overview-samples span {
  border-bottom-color: rgba(85,110,121,.12) !important;
}
html body:not(.theme-light) .main .overview-block {
  background: rgba(28,29,34,.70) !important;
  -webkit-backdrop-filter: blur(24px) saturate(106%) !important;
  backdrop-filter: blur(24px) saturate(106%) !important;
}
html body:not(.theme-light) .main .overview-block .overview-card { background: rgba(42,43,48,.70) !important; }

/* Overview cards: nine quiet comic scenes add a visual cue without hiding the directory. */
.overview-card.overview-comic-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.overview-comic-art {
  position: absolute;
  z-index: 0;
  right: -7%;
  bottom: -9%;
  width: 61%;
  height: 83%;
  opacity: .35;
  background-image: url("assets/catalogue-study-comic-characters-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 30%, #000 65%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 30%, #000 65%);
  filter: saturate(.82) contrast(.98);
  pointer-events: none;
}
.overview-comic-2 .overview-comic-art { background-position: 50% 0; }
.overview-comic-3 .overview-comic-art { background-position: 100% 0; }
.overview-comic-4 .overview-comic-art { background-position: 0 50%; }
.overview-comic-5 .overview-comic-art { background-position: 50% 50%; }
.overview-comic-6 .overview-comic-art { background-position: 100% 50%; }
.overview-comic-7 .overview-comic-art { background-position: 0 100%; }
.overview-comic-8 .overview-comic-art { background-position: 50% 100%; }
.overview-comic-9 .overview-comic-art { background-position: 100% 100%; }
.overview-card.overview-comic-card > :not(.overview-comic-art) { position: relative; z-index: 1; }
html body.theme-light .overview-card.overview-comic-card .overview-samples { background: rgba(241,249,250,.29) !important; }
html body:not(.theme-light) .overview-comic-art { opacity: .19; filter: saturate(.63) brightness(.83); }
@media (max-width: 680px) {
  .overview-comic-art { right: -4%; width: 58%; height: 86%; opacity: .28; }
}

/* Shared comic glass: large surfaces receive a restrained scene, controls stay plain. */
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .featured-item, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card) {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .featured-item, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card)::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6%;
  bottom: -10%;
  width: 62%;
  height: 86%;
  opacity: .22;
  background-image: url("assets/catalogue-study-comic-characters-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.20) 26%, #000 67%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.20) 26%, #000 67%);
  filter: saturate(.72) contrast(.98);
  pointer-events: none;
}
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .featured-item, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card) > * { position: relative; z-index: 1; }
html body.theme-light .main .hero-copy::after { background-position: 0 0; opacity: .18; width: 54%; }
html body.theme-light .main .hero-live-panel::after { background-position: 50% 0; opacity: .16; width: 48%; }
html body.theme-light .main .hero-art.study-room-teaser::after { background-position: 100% 0; opacity: .18; width: 46%; }
html body.theme-light .main .countdown-wall::after { background-position: 0 50%; opacity: .16; width: 48%; }
html body.theme-light .main .daily-learning-sign::after { background-position: 50% 50%; opacity: .18; }
html body.theme-light .main .drift-bottle-board::after { background-position: 100% 50%; opacity: .17; }
html body.theme-light .main .featured-panel::after { background-position: 0 100%; opacity: .14; width: 34%; }
html body.theme-light .main .featured-item:nth-child(4n + 1)::after { background-position: 0 100%; }
html body.theme-light .main .featured-item:nth-child(4n + 2)::after { background-position: 50% 100%; }
html body.theme-light .main .featured-item:nth-child(4n + 3)::after { background-position: 100% 100%; }
html body.theme-light .main .featured-item:nth-child(4n)::after { background-position: 0 0; }
html body.theme-light .main .quick-panel::after { background-position: 50% 100%; opacity: .13; width: 36%; }
html body.theme-light .main .section-block:not(.overview-block)::after { background-position: 100% 100%; opacity: .13; width: 36%; }
html body.theme-light .main .resource-card:nth-child(3n + 1)::after { background-position: 0 50%; }
html body.theme-light .main .resource-card:nth-child(3n + 2)::after { background-position: 50% 50%; }
html body.theme-light .main .resource-card:nth-child(3n)::after { background-position: 100% 50%; }
html body:not(.theme-light) .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .featured-item, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card)::after { opacity: .10; filter: saturate(.55) brightness(.78); }
@media (max-width: 680px) {
  html body.theme-light .main :is(.hero-copy, .hero-live-panel, .hero-art.study-room-teaser, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .featured-item, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card)::after { width: 72%; height: 78%; opacity: .14; }
}

/* The overview directory stays on one glass plane: no opaque inner list tiles. */
html body.theme-light.has-ambient-video .main .overview-block .overview-card .overview-samples,
html body.theme-light .main .overview-block .overview-card .overview-samples {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .overview-samples span,
html body.theme-light .main .overview-block .overview-card .overview-samples span {
  background: transparent !important;
  border-bottom-color: rgba(68,95,108,.18) !important;
  color: #40586a !important;
  box-shadow: none !important;
}
html body:not(.theme-light) .main .overview-block .overview-card .overview-samples { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Study room: turn the classroom scene into the card's soft atmosphere, not a crowded inline banner. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(241,248,249,.73), rgba(183,204,207,.61)) !important;
  overflow: hidden !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser::before,
html body.theme-light .main .hero-art.study-room-teaser::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: -16px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(243,249,250,.66) 0%, rgba(237,246,247,.44) 43%, rgba(223,237,239,.22) 100%), url("assets/study-room-authorized-reference-clean.png") center / cover no-repeat !important;
  box-shadow: none !important;
  filter: blur(8px) saturate(.72) contrast(.92) !important;
  opacity: .63 !important;
  transform: scale(1.03) !important;
  pointer-events: none !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser::after,
html body.theme-light .main .hero-art.study-room-teaser::after { display: none !important; content: none !important; }
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser > .study-room-teaser-classroom,
html body.theme-light .main .hero-art.study-room-teaser > .study-room-teaser-classroom { display: none !important; }
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser > :not(.study-room-teaser-classroom),
html body.theme-light .main .hero-art.study-room-teaser > :not(.study-room-teaser-classroom) { position: relative !important; z-index: 2 !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: -16px !important;
  background: linear-gradient(90deg, rgba(28,29,33,.86), rgba(28,29,33,.60)), url("assets/study-room-authorized-reference-clean.png") center / cover no-repeat !important;
  filter: blur(8px) saturate(.50) brightness(.64) !important;
  opacity: .56 !important;
  transform: scale(1.03) !important;
  pointer-events: none !important;
}
html body:not(.theme-light) .main .hero-art.study-room-teaser::after,
html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-teaser-classroom { display: none !important; }
@media (max-width: 700px), (orientation: portrait) {
  html body.theme-light .main .hero-art.study-room-teaser::before { inset: -10px !important; filter: blur(6px) saturate(.72) contrast(.92) !important; }
}

/* v30 — override the legacy theme selectors themselves: desktop room must end
   on the same baseline as the main hero, with a deliberately quieter title. */
@media (min-width: 701px) and (orientation: landscape) {
  html body.theme-light .main .hero-art.study-room-teaser,
  html body.theme-dark .main .hero-art.study-room-teaser,
  html body:not(.theme-light) .main .hero-art.study-room-teaser {
    box-sizing: border-box !important;
    height: 530px !important;
    min-height: 530px !important;
    max-height: 530px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }
  html body.theme-light .main .hero-art.study-room-teaser > .study-room-preview-seats,
  html body.theme-dark .main .hero-art.study-room-teaser > .study-room-preview-seats,
  html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-preview-seats {
    min-height: 0 !important;
    height: 100% !important;
  }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-head h2,
  html body.theme-dark .main .hero-art.study-room-teaser .study-room-teaser-head h2,
  html body:not(.theme-light) .main .hero-art.study-room-teaser .study-room-teaser-head h2 {
    font-size: clamp(27px, 1.85vw, 34px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }
}

/* v29 — contained, usable study-room entry in both appearance modes.
   These are real links into the timer, seat desk and anonymous matching controls. */
html body .main .hero-art.study-room-teaser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  row-gap: 12px !important;
  box-sizing: border-box !important;
  height: clamp(440px, 31vw, 520px) !important;
  min-height: 0 !important;
  max-height: 520px !important;
  padding: clamp(22px, 2vw, 30px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
html body .main .hero-art.study-room-teaser > .study-room-teaser-classroom { display: none !important; }
html body .main .hero-art.study-room-teaser > :not(.study-room-teaser-classroom) { position: relative !important; z-index: 2 !important; }
html body .main .hero-art.study-room-teaser > .study-room-teaser-head {
  grid-row: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(65, 79, 82, .18) !important;
}
html body .main .hero-art.study-room-teaser .study-room-teaser-head h2 {
  font-size: clamp(27px, 2.15vw, 38px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
html body .main .hero-art.study-room-teaser .study-room-teaser-head span { font-size: 11px !important; letter-spacing: .14em !important; }
html body .main .hero-art.study-room-teaser > .study-room-teaser-lead {
  grid-row: 2 !important;
  margin: 0 !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.35 !important;
}
html body .main .hero-art.study-room-teaser > .study-room-preview-seats {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(210px, .9fr) !important;
  grid-template-rows: minmax(58px, .82fr) minmax(58px, .82fr) minmax(94px, 1.2fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
}
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 160ms ease, filter 160ms ease !important;
}
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:hover { transform: translateY(-2px) !important; filter: brightness(1.035) !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-content: center !important;
  column-gap: 14px !important;
  padding: 20px !important;
}
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1) i { grid-row: 1 / 3 !important; width: 52px !important; height: 52px !important; font-size: 25px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1) b { font-size: clamp(22px, 1.75vw, 29px) !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1) small { font-size: 13px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2),
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) {
  grid-column: 2 !important;
  grid-template-columns: 42px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 11px 14px !important;
}
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2) { grid-row: 1 !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) { grid-row: 2 !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2)::after,
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3)::after { content: "›" !important; font-size: 28px !important; font-weight: 300 !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2) i,
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) i { width: 40px !important; height: 40px !important; font-size: 19px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2) b,
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) b { font-size: 15px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2) small,
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) small { font-size: 11px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  gap: 3px 9px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border-radius: 18px !important;
}
html body .main .hero-art.study-room-teaser .study-room-clock-copy { display: grid !important; align-content: center !important; gap: 1px !important; min-width: 0 !important; }
html body .main .hero-art.study-room-teaser .study-room-clock-copy > span { font-size: 10px !important; }
html body .main .hero-art.study-room-teaser .study-room-clock-copy > time { font-size: clamp(24px, 2vw, 32px) !important; line-height: 1 !important; }
html body .main .hero-art.study-room-teaser .study-room-clock-copy > small { font-size: 10px !important; white-space: nowrap !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face { width: 62px !important; height: 62px !important; flex-basis: 62px !important; align-self: center !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-hour { width: 2px !important; height: 17px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-minute { width: 2px !important; height: 23px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face b { width: 6px !important; height: 6px !important; }
html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget > a {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
html body .main .hero-art.study-room-teaser > .study-room-teaser-bottom { position: static !important; grid-row: 4 !important; padding: 0 !important; align-self: end !important; }
html body .main .hero-art.study-room-teaser > .study-room-teaser-bottom > span { font-size: 12px !important; }

html body.theme-light .main .hero-art.study-room-teaser {
  color: #163535 !important;
  background: url("assets/study-room-sunlit-v2.png") center / cover no-repeat !important;
  border-color: rgba(255, 255, 255, .74) !important;
}
html body.theme-light .main .hero-art.study-room-teaser::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(249,252,250,.76), rgba(247,251,248,.38)) !important; }
html body.theme-light .main .hero-art.study-room-teaser :is(.study-room-teaser-head h2, .study-room-preview-seats b) { color: #163535 !important; }
html body.theme-light .main .hero-art.study-room-teaser :is(.study-room-teaser-head span, .study-room-teaser-lead, .study-room-preview-seats small, .study-room-teaser-bottom > span) { color: #6a787d !important; }
html body.theme-light .main .hero-art.study-room-teaser :is(.study-room-feature-card, .study-room-clock-widget) { border: 1px solid rgba(255,255,255,.72) !important; background: rgba(255,255,255,.66) !important; box-shadow: 0 10px 22px rgba(34,55,52,.10), inset 0 1px 0 rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(16px) saturate(120%) !important; backdrop-filter: blur(16px) saturate(120%) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-feature-card i { color: #1f5b54 !important; background: rgba(220,239,232,.84) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-clock-widget > a { color:#fff !important; background:#1b4c47 !important; }

html body:not(.theme-light) .main .hero-art.study-room-teaser {
  color: #edf5f0 !important;
  background: linear-gradient(105deg, rgba(10,22,23,.84), rgba(18,46,41,.56)), url("assets/study-room-sunlit-v2.png") center / cover no-repeat !important;
  border-color: rgba(228,244,236,.22) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html body:not(.theme-light) .main .hero-art.study-room-teaser::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(8,20,20,.48), rgba(10,30,26,.20)) !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-teaser-head { border-bottom-color: rgba(231,245,238,.20) !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser :is(.study-room-teaser-head h2, .study-room-preview-seats b) { color:#f3f8f5 !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser :is(.study-room-teaser-head span, .study-room-teaser-lead, .study-room-preview-seats small, .study-room-teaser-bottom > span) { color:#c6d7cf !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser :is(.study-room-feature-card, .study-room-clock-widget) { border:1px solid rgba(235,249,242,.18) !important; background:rgba(9,27,25,.66) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; -webkit-backdrop-filter:blur(16px) saturate(115%) !important; backdrop-filter:blur(16px) saturate(115%) !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser .study-room-feature-card i { color:#d7f0e3 !important; background:rgba(47,118,96,.28) !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser .study-room-clock-widget > a { color:#0c2825 !important; background:#cce6d9 !important; }

@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-teaser { height: auto !important; max-height: none !important; grid-template-rows:auto auto auto auto !important; padding: 20px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-preview-seats { height:auto !important; grid-template-columns:1fr !important; grid-template-rows:150px auto auto 125px !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1),
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2),
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3),
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget { grid-column:1 !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(1) { grid-row:1 !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(2) { grid-row:2 !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-feature-card:nth-child(3) { grid-row:3 !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget { grid-row:4 !important; }
}

/* Refine the room image: clear glass first, a quiet lower-corner atmosphere second. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(244,249,250,.83), rgba(198,215,217,.73)) !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser::before,
html body.theme-light .main .hero-art.study-room-teaser::before {
  inset: auto -6% -12% auto !important;
  width: 72% !important;
  height: 58% !important;
  background: linear-gradient(90deg, rgba(238,247,248,.92) 0%, rgba(238,247,248,.48) 42%, rgba(238,247,248,.10) 100%), url("assets/study-room-authorized-reference-clean.png") center / cover no-repeat !important;
  filter: blur(2px) saturate(.62) contrast(.88) !important;
  opacity: .34 !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 29%, #000 67%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 29%, #000 67%);
}
html body:not(.theme-light) .main .hero-art.study-room-teaser::before {
  inset: auto -6% -12% auto !important;
  width: 72% !important;
  height: 58% !important;
  background: linear-gradient(90deg, rgba(28,29,33,.92) 0%, rgba(28,29,33,.46) 46%, rgba(28,29,33,.12) 100%), url("assets/study-room-authorized-reference-clean.png") center / cover no-repeat !important;
  filter: blur(2px) saturate(.42) brightness(.72) !important;
  opacity: .24 !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 29%, #000 67%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 29%, #000 67%);
}
@media (max-width: 700px), (orientation: portrait) {
  html body.theme-light .main .hero-art.study-room-teaser::before,
  html body:not(.theme-light) .main .hero-art.study-room-teaser::before {
    inset: auto -10% -8% auto !important;
    width: 100% !important;
    height: 44% !important;
    opacity: .20 !important;
    filter: blur(2px) saturate(.55) contrast(.88) !important;
  }
}

/* Restore the room card's bottom anchor after the shared comic layer, and let the scene carry the lower half. */
html body .main .hero-art.study-room-teaser > .study-room-teaser-bottom {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(22px, 2vw, 31px) !important;
  right: clamp(22px, 2vw, 31px) !important;
  bottom: clamp(20px, 1.8vw, 28px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser::before,
html body.theme-light .main .hero-art.study-room-teaser::before {
  right: -5% !important;
  bottom: -8% !important;
  width: 78% !important;
  height: 64% !important;
  opacity: .43 !important;
  filter: blur(1.5px) saturate(.66) contrast(.90) !important;
}
html body:not(.theme-light) .main .hero-art.study-room-teaser::before {
  right: -5% !important;
  bottom: -8% !important;
  width: 78% !important;
  height: 64% !important;
  opacity: .28 !important;
  filter: blur(1.5px) saturate(.46) brightness(.72) !important;
}
@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-teaser > .study-room-teaser-bottom { left: 18px !important; right: 18px !important; bottom: 18px !important; }
  html body.theme-light .main .hero-art.study-room-teaser::before,
  html body:not(.theme-light) .main .hero-art.study-room-teaser::before { width: 110% !important; height: 54% !important; opacity: .30 !important; }
}

/* Study room rhythm: content is deliberately separated from its bottom action. */
html body .main .hero-art.study-room-teaser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(72px, 1fr) auto !important;
  align-content: stretch !important;
  row-gap: 17px !important;
}
html body .main .hero-art.study-room-teaser > .study-room-teaser-head {
  grid-row: 1 !important;
  padding-bottom: 17px !important;
}
html body .main .hero-art.study-room-teaser > .study-room-teaser-lead {
  grid-row: 2 !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}
html body .main .hero-art.study-room-teaser > .study-room-preview-seats {
  grid-row: 3 !important;
  gap: 12px !important;
}
html body .main .hero-art.study-room-teaser .study-room-preview-seats > span {
  min-height: 68px !important;
  padding: 12px !important;
}
html body .main .hero-art.study-room-teaser > .study-room-teaser-bottom {
  position: static !important;
  grid-row: 5 !important;
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-teaser { grid-template-rows: auto auto auto minmax(38px, 1fr) auto !important; row-gap: 14px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-preview-seats { gap: 9px !important; }
  html body .main .hero-art.study-room-teaser .study-room-preview-seats > span { min-height: 0 !important; padding: 10px !important; }
}

/* Native macOS vibrancy: a neutral, low-opacity material that borrows its colour from the scene.
   It replaces the former white veil while keeping text and controls comfortably legible. */
html body.theme-light.has-ambient-video .sidebar,
html body.theme-light .sidebar {
  background: linear-gradient(145deg, rgba(192, 204, 207, .40), rgba(131, 151, 157, .32)) !important;
  border-color: rgba(255, 255, 255, .48) !important;
  box-shadow: 0 16px 38px rgba(20, 37, 43, .16), inset 0 1px 0 rgba(255, 255, 255, .46) !important;
  -webkit-backdrop-filter: blur(30px) saturate(132%) !important;
  backdrop-filter: blur(30px) saturate(132%) !important;
}
html body.theme-light.has-ambient-video .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card),
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card) {
  background: linear-gradient(145deg, rgba(197, 210, 213, .38), rgba(132, 153, 159, .28)) !important;
  border-color: rgba(255, 255, 255, .46) !important;
  box-shadow: 0 16px 36px rgba(20, 37, 43, .15), inset 0 1px 0 rgba(255, 255, 255, .43) !important;
  -webkit-backdrop-filter: blur(30px) saturate(132%) !important;
  backdrop-filter: blur(30px) saturate(132%) !important;
}

/* The category directory is a single darker material plane, rather than nine white cards. */
html body.theme-light.has-ambient-video .main .overview-block,
html body.theme-light .main .overview-block {
  background: linear-gradient(145deg, rgba(150, 171, 176, .40), rgba(97, 122, 130, .29)) !important;
  border-color: rgba(255, 255, 255, .45) !important;
  box-shadow: 0 20px 44px rgba(15, 31, 37, .18), inset 0 1px 0 rgba(255, 255, 255, .40) !important;
  -webkit-backdrop-filter: blur(32px) saturate(138%) !important;
  backdrop-filter: blur(32px) saturate(138%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card,
html body.theme-light .main .overview-block .overview-card {
  background: linear-gradient(145deg, rgba(195, 210, 213, .34), rgba(124, 149, 155, .28)) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow: 0 12px 26px rgba(18, 35, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  -webkit-backdrop-filter: blur(26px) saturate(132%) !important;
  backdrop-filter: blur(26px) saturate(132%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-icon,
html body.theme-light .main .overview-block .overview-card .section-icon {
  background: rgba(236, 244, 245, .22) !important;
  border-color: rgba(255, 255, 255, .31) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .overview-samples span,
html body.theme-light .main .overview-block .overview-card .overview-samples span {
  background: transparent !important;
  border-bottom-color: rgba(32, 56, 65, .16) !important;
  color: #314652 !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-open-button,
html body.theme-light .main .overview-block .overview-card .section-open-button {
  background: rgba(10, 132, 255, .18) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-comic-art,
html body.theme-light .main .overview-block .overview-comic-art {
  opacity: .30 !important;
  filter: saturate(.72) contrast(.96) !important;
}

/* Keep the study-room material in the same quiet, neutral family. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(197, 211, 214, .43), rgba(127, 151, 157, .32)) !important;
  border-color: rgba(255, 255, 255, .48) !important;
  box-shadow: 0 16px 36px rgba(20, 37, 43, .16), inset 0 1px 0 rgba(255, 255, 255, .44) !important;
  -webkit-backdrop-filter: blur(30px) saturate(132%) !important;
  backdrop-filter: blur(30px) saturate(132%) !important;
}

/* Bright macOS material correction: no charcoal tint, no chalk-white mask.
   The scene supplies the colour; this is only a thin luminous vibrancy layer. */
html body.theme-light.has-ambient-video .sidebar,
html body.theme-light .sidebar {
  background: linear-gradient(145deg, rgba(244, 248, 248, .34), rgba(205, 222, 224, .24)) !important;
  border-color: rgba(255, 255, 255, .64) !important;
  box-shadow: 0 16px 38px rgba(20, 37, 43, .13), inset 0 1px 0 rgba(255, 255, 255, .60) !important;
  -webkit-backdrop-filter: blur(30px) saturate(122%) !important;
  backdrop-filter: blur(30px) saturate(122%) !important;
}
html body.theme-light.has-ambient-video .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card),
html body.theme-light .main :is(.hero-copy, .hero-live-panel, .countdown-wall, .daily-learning-sign, .drift-bottle-board, .featured-panel, .quick-panel, .section-block:not(.overview-block), .pan-search-results, .notice, .resource-card) {
  background: linear-gradient(145deg, rgba(245, 249, 249, .31), rgba(204, 223, 225, .22)) !important;
  border-color: rgba(255, 255, 255, .61) !important;
  box-shadow: 0 16px 36px rgba(20, 37, 43, .12), inset 0 1px 0 rgba(255, 255, 255, .57) !important;
  -webkit-backdrop-filter: blur(30px) saturate(122%) !important;
  backdrop-filter: blur(30px) saturate(122%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block,
html body.theme-light .main .overview-block {
  background: linear-gradient(145deg, rgba(236, 244, 245, .26), rgba(185, 207, 210, .18)) !important;
  border-color: rgba(255, 255, 255, .59) !important;
  box-shadow: 0 20px 44px rgba(15, 31, 37, .14), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(32px) saturate(126%) !important;
  backdrop-filter: blur(32px) saturate(126%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card,
html body.theme-light .main .overview-block .overview-card {
  background: linear-gradient(145deg, rgba(246, 250, 250, .31), rgba(205, 223, 225, .23)) !important;
  border-color: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 12px 26px rgba(18, 35, 42, .11), inset 0 1px 0 rgba(255, 255, 255, .54) !important;
  -webkit-backdrop-filter: blur(26px) saturate(122%) !important;
  backdrop-filter: blur(26px) saturate(122%) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-icon,
html body.theme-light .main .overview-block .overview-card .section-icon {
  background: rgba(255, 255, 255, .26) !important;
  border-color: rgba(255, 255, 255, .43) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .overview-samples span,
html body.theme-light .main .overview-block .overview-card .overview-samples span {
  border-bottom-color: rgba(42, 69, 78, .14) !important;
  color: #38505c !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-open-button,
html body.theme-light .main .overview-block .overview-card .section-open-button {
  background: rgba(10, 132, 255, .16) !important;
  border-color: rgba(255, 255, 255, .46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-comic-art,
html body.theme-light .main .overview-block .overview-comic-art {
  opacity: .24 !important;
  filter: saturate(.70) contrast(.98) !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  background: linear-gradient(145deg, rgba(245, 249, 249, .35), rgba(203, 221, 223, .24)) !important;
  border-color: rgba(255, 255, 255, .64) !important;
  box-shadow: 0 16px 36px rgba(20, 37, 43, .13), inset 0 1px 0 rgba(255, 255, 255, .60) !important;
  -webkit-backdrop-filter: blur(30px) saturate(122%) !important;
  backdrop-filter: blur(30px) saturate(122%) !important;
}

/* Luminous macOS directory material: raise lightness without returning to an opaque white card. */
html body.theme-light.has-ambient-video .main .overview-block,
html body.theme-light .main .overview-block {
  background: linear-gradient(145deg, rgba(247, 250, 250, .46) 0%, rgba(220, 235, 236, .35) 54%, rgba(188, 211, 214, .27) 100%) !important;
  border-color: rgba(255, 255, 255, .70) !important;
  box-shadow: 0 20px 44px rgba(19, 35, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .67) !important;
  -webkit-backdrop-filter: blur(34px) saturate(122%) brightness(1.08) !important;
  backdrop-filter: blur(34px) saturate(122%) brightness(1.08) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card,
html body.theme-light .main .overview-block .overview-card {
  background: linear-gradient(145deg, rgba(251, 253, 253, .49) 0%, rgba(224, 237, 238, .36) 62%, rgba(202, 222, 224, .29) 100%) !important;
  border-color: rgba(255, 255, 255, .70) !important;
  box-shadow: 0 12px 25px rgba(20, 36, 41, .10), inset 0 1px 0 rgba(255, 255, 255, .66) !important;
  -webkit-backdrop-filter: blur(27px) saturate(119%) brightness(1.06) !important;
  backdrop-filter: blur(27px) saturate(119%) brightness(1.06) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-icon,
html body.theme-light .main .overview-block .overview-card .section-icon {
  background: rgba(255, 255, 255, .36) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .overview-samples span,
html body.theme-light .main .overview-block .overview-card .overview-samples span {
  color: #344a55 !important;
  border-bottom-color: rgba(38, 64, 74, .14) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-card .section-open-button,
html body.theme-light .main .overview-block .overview-card .section-open-button {
  background: rgba(10, 132, 255, .20) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52), 0 5px 12px rgba(35, 104, 152, .10) !important;
}
html body.theme-light.has-ambient-video .main .overview-block .overview-comic-art,
html body.theme-light .main .overview-block .overview-comic-art {
  opacity: .22 !important;
  filter: saturate(.76) contrast(.98) !important;
}

/* The live time belongs in the study-room's quiet fourth row, as a clear iOS-style widget. */
html body .main .hero-art.study-room-teaser > .study-room-clock-widget {
  display: inline-flex !important;
  grid-row: 4 !important;
  justify-self: start !important;
  align-self: end !important;
  min-width: 210px !important;
  min-height: 88px !important;
  gap: 15px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, .60) !important;
  border-radius: 22px !important;
  color: #263640 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .54), rgba(213, 230, 232, .34)) !important;
  box-shadow: 0 12px 26px rgba(28, 47, 55, .14), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
  backdrop-filter: blur(24px) saturate(128%) !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget > span {
  color: #64727b !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget > time {
  color: #18242c !important;
  font-size: 31px !important;
  font-weight: 760 !important;
  letter-spacing: -.055em !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face {
  width: 60px !important;
  height: 60px !important;
  flex-basis: 60px !important;
  border-color: rgba(50, 73, 90, .20) !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .94) 0 61%, transparent 62%), repeating-conic-gradient(from -1deg, #60758a 0deg 2deg, transparent 2deg 30deg) !important;
  box-shadow: inset 0 0 0 3px rgba(240, 246, 247, .95), 0 3px 8px rgba(35, 58, 76, .10) !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::before,
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::after { font-size: 8px !important; color: #40546a !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-hour { height: 16px !important; background: #263e55 !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-minute { height: 22px !important; background: #0a84ff !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face b { width: 7px !important; height: 7px !important; background: #0a84ff !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-clock-widget {
  color: #f5f5f7 !important;
  background: linear-gradient(145deg, rgba(49, 53, 60, .72), rgba(27, 31, 36, .64)) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-clock-widget > span { color: #bcc2ca !important; }
html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-clock-widget > time { color: #f5f5f7 !important; }
@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget {
    min-width: 178px !important;
    min-height: 68px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget > time { font-size: 25px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-hour { height: 13px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-minute { height: 18px !important; }
}

/* A real iOS-inspired clock tile: anchored in the open lower-left space, never beside the CTA. */
html body .main .hero-art.study-room-teaser > .study-room-clock-widget {
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(28px, 2.1vw, 36px) !important;
  bottom: clamp(88px, 8.4vw, 112px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 274px !important;
  min-width: 274px !important;
  height: 118px !important;
  min-height: 118px !important;
  margin: 0 !important;
  padding: 16px 17px 16px 19px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 28px !important;
  color: #f5f5f7 !important;
  background: linear-gradient(145deg, rgba(48, 50, 56, .92), rgba(24, 26, 30, .88)) !important;
  box-shadow: 0 16px 32px rgba(11, 18, 23, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(28px) saturate(138%) !important;
  backdrop-filter: blur(28px) saturate(138%) !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .study-room-clock-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 116px !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .study-room-clock-copy > span {
  color: #c7c7cc !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  letter-spacing: .01em !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .study-room-clock-copy > time {
  color: #ffffff !important;
  font-size: 37px !important;
  font-weight: 780 !important;
  letter-spacing: -.065em !important;
  line-height: .92 !important;
  text-shadow: none !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .study-room-clock-copy > small {
  color: #aeb2bc !important;
  font-size: 11px !important;
  font-weight: 570 !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face {
  display: block !important;
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #23252a 0 61%, transparent 62%), repeating-conic-gradient(from -1deg, rgba(255, 255, 255, .94) 0deg 2deg, transparent 2deg 30deg) !important;
  box-shadow: inset 0 0 0 4px #1b1d21, 0 3px 9px rgba(0, 0, 0, .24) !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::before,
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::after {
  color: #f5f5f7 !important;
  font-size: 9px !important;
}
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::before { top: 6px !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face::after { bottom: 6px !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-hour { height: 21px !important; width: 3px !important; background: #f5f5f7 !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-minute { height: 29px !important; width: 3px !important; background: #0a84ff !important; }
html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face b { width: 8px !important; height: 8px !important; background: #0a84ff !important; }
@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget {
    left: 18px !important;
    bottom: 76px !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 12px 13px 12px 15px !important;
    border-radius: 23px !important;
  }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .study-room-clock-copy > time { font-size: 30px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-face { width: 60px !important; height: 60px !important; flex-basis: 60px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-hour { height: 17px !important; }
  html body .main .hero-art.study-room-teaser > .study-room-clock-widget .ios-clock-minute { height: 23px !important; }
}

/* Sunlit study-room redesign — a calm focus space, not a generic information card. */
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser,
html body.theme-light .main .hero-art.study-room-teaser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(282px, 1fr) auto !important;
  row-gap: 18px !important;
  min-height: 560px !important;
  padding: clamp(28px, 2.4vw, 38px) !important;
  background: url("assets/study-room-sunlit-v2.png") center / cover no-repeat !important;
  border-color: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 22px 46px rgba(30, 48, 50, .17), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  overflow: hidden !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser::before,
html body.theme-light .main .hero-art.study-room-teaser::before {
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  background: linear-gradient(90deg, rgba(248, 252, 249, .73) 0%, rgba(246, 251, 248, .51) 47%, rgba(245, 250, 247, .20) 100%) !important;
}
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser > :not(.study-room-teaser-classroom),
html body.theme-light .main .hero-art.study-room-teaser > :not(.study-room-teaser-classroom) { position: relative !important; z-index: 2 !important; }
html body.theme-light.has-ambient-video .main .hero-art.study-room-teaser > .study-room-teaser-head,
html body.theme-light .main .hero-art.study-room-teaser > .study-room-teaser-head {
  grid-row: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 0 0 14px !important;
  border-bottom-color: rgba(29, 55, 55, .18) !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-head span { color: #66737b !important; font-size: 12px !important; letter-spacing: .16em !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-head h2 { color: #102b2d !important; font-size: clamp(34px, 3vw, 52px) !important; line-height: 1 !important; letter-spacing: -.055em !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-head > b { background: rgba(255, 255, 255, .70) !important; border-color: rgba(255, 255, 255, .68) !important; color: #304b4d !important; box-shadow: 0 5px 13px rgba(34, 52, 53, .08) !important; }
html body.theme-light .main .hero-art.study-room-teaser > .study-room-teaser-lead {
  grid-row: 2 !important;
  max-width: none !important;
  margin: 0 !important;
  color: #677983 !important;
  font-size: clamp(17px, 1.35vw, 22px) !important;
  line-height: 1.45 !important;
}
html body.theme-light .main .hero-art.study-room-teaser > .study-room-preview-seats {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(250px, .88fr) !important;
  grid-template-rows: minmax(76px, .75fr) minmax(76px, .75fr) minmax(120px, 1.3fr) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  min-height: 282px !important;
  margin: 0 !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span {
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .77), rgba(247, 251, 248, .57)) !important;
  box-shadow: 0 12px 25px rgba(37, 55, 54, .09), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-content: center !important;
  column-gap: 16px !important;
  padding: 28px !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1) i {
  grid-row: 1 / 3 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  color: #174345 !important;
  background: rgba(218, 235, 229, .78) !important;
  font-size: 30px !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1) b { color: #15393b !important; font-size: clamp(24px, 2.1vw, 34px) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1) small { color: #75818a !important; font-size: clamp(14px, 1.1vw, 17px) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2),
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 15px 18px !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2) { grid-row: 1 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) { grid-row: 2 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2)::after,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3)::after { content: "›"; color: #5d6b73; font-size: 32px; font-weight: 350; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2) i,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) i { width: 46px !important; height: 46px !important; border-radius: 50% !important; color: #174345 !important; background: rgba(218, 235, 229, .78) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2) b,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) b { color: #183b3d !important; font-size: clamp(16px, 1.25vw, 20px) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2) small,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) small { color: #79848c !important; font-size: 13px !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  grid-template-rows: minmax(0, 1fr) 48px !important;
  gap: 6px 12px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 120px !important;
  margin: 0 !important;
  padding: 16px 17px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 20px !important;
  color: #173d3f !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(242, 249, 246, .64)) !important;
  box-shadow: 0 12px 25px rgba(37, 55, 54, .10), inset 0 1px 0 rgba(255, 255, 255, .76) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body.theme-light .main .hero-art.study-room-teaser .study-room-clock-copy { display: grid !important; align-content: center !important; gap: 3px !important; min-width: 0 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-clock-copy > span { color: #738088 !important; font-size: 12px !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-clock-copy > time { color: #15393b !important; font-size: clamp(32px, 3vw, 44px) !important; font-weight: 760 !important; letter-spacing: -.065em !important; line-height: .95 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-clock-copy > small { color: #78838b !important; font-size: 11px !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face { width: 78px !important; height: 78px !important; flex-basis: 78px !important; align-self: center !important; background: radial-gradient(circle, rgba(255, 255, 255, .96) 0 61%, transparent 62%), repeating-conic-gradient(from -1deg, #5d7271 0deg 2deg, transparent 2deg 30deg) !important; box-shadow: inset 0 0 0 3px rgba(235, 243, 241, .94), 0 3px 8px rgba(35, 58, 55, .10) !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face::before,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face::after { color: #4d6463 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-hour { background: #1d4645 !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-minute,
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget .ios-clock-face b { background: #285f5a !important; }
html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget > a {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #214f4d, #173d3c) !important;
  box-shadow: 0 7px 14px rgba(21, 61, 60, .16) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body.theme-light .main .hero-art.study-room-teaser > .study-room-teaser-bottom { position: static !important; grid-row: 4 !important; align-self: end !important; justify-content: center !important; padding: 0 !important; }
html body.theme-light .main .hero-art.study-room-teaser > .study-room-teaser-bottom > span { color: #68767d !important; font-size: 13px !important; }
@media (max-width: 700px), (orientation: portrait) {
  html body.theme-light .main .hero-art.study-room-teaser { grid-template-rows: auto auto auto auto !important; min-height: 0 !important; padding: 22px !important; }
  html body.theme-light .main .hero-art.study-room-teaser > .study-room-preview-seats { grid-template-columns: 1fr !important; grid-template-rows: 180px auto auto 150px !important; min-height: 0 !important; }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1),
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2),
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3),
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget { grid-column: 1 !important; }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(1) { grid-row: 1 !important; }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(2) { grid-row: 2 !important; }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > span:nth-child(3) { grid-row: 3 !important; }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-preview-seats > .study-room-clock-widget { grid-row: 4 !important; }
}

/* v32 — final cascade guard: the legacy file has several conflicting room
   revisions, so these rules intentionally live last and share its specificity. */
@media (min-width: 701px) and (orientation: landscape) {
  html body.theme-light .main .hero-art.study-room-teaser,
  html body.theme-dark .main .hero-art.study-room-teaser,
  html body:not(.theme-light) .main .hero-art.study-room-teaser {
    box-sizing: border-box !important;
    height: 530px !important;
    min-height: 530px !important;
    max-height: 530px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }
  html body.theme-light .main .hero-art.study-room-teaser > .study-room-preview-seats,
  html body.theme-dark .main .hero-art.study-room-teaser > .study-room-preview-seats,
  html body:not(.theme-light) .main .hero-art.study-room-teaser > .study-room-preview-seats {
    min-height: 0 !important;
    height: 100% !important;
  }
  html body.theme-light .main .hero-art.study-room-teaser .study-room-teaser-head h2,
  html body.theme-dark .main .hero-art.study-room-teaser .study-room-teaser-head h2,
  html body:not(.theme-light) .main .hero-art.study-room-teaser .study-room-teaser-head h2 {
    font-size: 32px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }
}

/* v33 — rebuilt study-room surface.  A contained layout replaces every former
   teaser/card variation; all three actions lead to the working room controls. */
html body .main .hero-art.study-room-rebuilt,
html body.theme-light .main .hero-art.study-room-rebuilt,
html body.theme-dark .main .hero-art.study-room-rebuilt,
html body:not(.theme-light) .main .hero-art.study-room-rebuilt {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  height: 465px !important;
  min-height: 465px !important;
  max-height: 465px !important;
  margin: 0 !important;
  padding: 24px !important;
  overflow: hidden !important;
  color: #edf4ef !important;
  background: linear-gradient(135deg, rgba(15,29,29,.96), rgba(14,49,43,.92)) !important;
  border: 1px solid rgba(222,239,229,.18) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  isolation: isolate !important;
}
html body .main .hero-art.study-room-rebuilt::before,
html body .main .hero-art.study-room-rebuilt::after { display: none !important; content: none !important; }
html body .main .study-room-rebuilt > * { position: relative !important; z-index: 1 !important; min-width: 0 !important; }
html body .main .study-room-rebuilt .study-room-teaser-head {
  grid-row: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(224,240,232,.16) !important;
}
html body .main .study-room-rebuilt .study-room-teaser-head > div:first-child > span { color: #aabcb3 !important; font-size: 10px !important; font-weight: 650 !important; letter-spacing: .16em !important; }
html body .main .study-room-rebuilt .study-room-teaser-head h2 { margin: 4px 0 0 !important; color: #f3f8f4 !important; font-size: 32px !important; font-weight: 680 !important; line-height: 1.05 !important; letter-spacing: -.04em !important; }
html body .main .study-room-rebuilt .study-room-head-meta { display: flex !important; align-items: center !important; gap: 10px !important; }
html body .main .study-room-rebuilt .study-room-head-meta > b { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 8px 10px !important; border: 1px solid rgba(226,244,235,.14) !important; border-radius: 999px !important; color: #d8e5de !important; background: rgba(5,19,18,.45) !important; font-size: 12px !important; font-weight: 550 !important; white-space: nowrap !important; }
html body .main .study-room-rebuilt .study-room-head-meta > b i { width: 8px !important; height: 8px !important; margin: 0 !important; border-radius: 50% !important; background: #32d583 !important; box-shadow: 0 0 9px rgba(50,213,131,.52) !important; }
html body .main .study-room-rebuilt .study-room-head-meta > b strong { color: #f4faf6 !important; font-size: inherit !important; }
html body .main .study-room-rebuilt .study-room-mini-clock { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 5px 7px 5px 10px !important; border: 1px solid rgba(226,244,235,.14) !important; border-radius: 999px !important; background: rgba(5,19,18,.36) !important; }
html body .main .study-room-rebuilt .study-room-mini-clock time { color: #dce9e2 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13px !important; font-variant-numeric: tabular-nums !important; }
html body .main .study-room-rebuilt .ios-clock-face { position: relative !important; display: block !important; width: 28px !important; height: 28px !important; border: 1px solid rgba(231,245,237,.58) !important; border-radius: 50% !important; background: radial-gradient(circle, #173a35 0 63%, transparent 64%), repeating-conic-gradient(from 0deg, rgba(231,245,237,.85) 0deg 1deg, transparent 1deg 30deg) !important; box-shadow: none !important; overflow: hidden !important; }
html body .main .study-room-rebuilt .ios-clock-face::before,
html body .main .study-room-rebuilt .ios-clock-face::after { display: none !important; }
html body .main .study-room-rebuilt .ios-clock-face i { position: absolute !important; left: calc(50% - 1px) !important; bottom: 50% !important; display: block !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; transform-origin: 50% 100% !important; }
html body .main .study-room-rebuilt .ios-clock-hour { width: 2px !important; height: 8px !important; background: #f0f6f2 !important; }
html body .main .study-room-rebuilt .ios-clock-minute { width: 2px !important; height: 11px !important; background: #61d4ad !important; }
html body .main .study-room-rebuilt .ios-clock-face b { position: absolute !important; left: 50% !important; top: 50% !important; width: 4px !important; height: 4px !important; transform: translate(-50%,-50%) !important; border-radius: 50% !important; background: #61d4ad !important; }
html body .main .study-room-rebuilt .study-room-teaser-lead { grid-row: 2 !important; margin: 0 !important; color: #c3d2ca !important; font-size: 15px !important; line-height: 1.4 !important; }
html body .main .study-room-rebuilt .study-room-action-grid { grid-row: 3 !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(240px, .95fr) !important; gap: 12px !important; min-height: 0 !important; overflow: hidden !important; }
html body .main .study-room-rebuilt :is(.study-room-timer-action, .study-room-utility-action) { min-width: 0 !important; border: 1px solid rgba(230,245,236,.13) !important; border-radius: 18px !important; color: inherit !important; text-decoration: none !important; background: rgba(6,23,21,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important; transition: transform 160ms ease, background 160ms ease !important; }
html body .main .study-room-rebuilt :is(.study-room-timer-action, .study-room-utility-action):hover { transform: translateY(-2px) !important; background: rgba(17,59,50,.72) !important; }
html body .main .study-room-rebuilt .study-room-timer-action { display: grid !important; align-content: center !important; justify-items: start !important; gap: 4px !important; padding: 20px !important; }
html body .main .study-room-rebuilt .study-room-timer-action .room-action-kicker { color: #87cbb2 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important; }
html body .main .study-room-rebuilt .study-room-timer-action > strong { color: #f4f8f5 !important; font-size: 20px !important; }
html body .main .study-room-rebuilt .study-room-timer-action > time { color: #e9f7ef !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: clamp(36px, 3.1vw, 48px) !important; font-weight: 700 !important; letter-spacing: -.08em !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
html body .main .study-room-rebuilt .study-room-timer-action > small { color: #abc0b5 !important; font-size: 12px !important; line-height: 1.4 !important; }
html body .main .study-room-rebuilt .study-room-timer-action > em { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 8px !important; padding: 8px 12px !important; border-radius: 10px !important; color: #0c2a24 !important; background: #cde7da !important; font-size: 13px !important; font-style: normal !important; font-weight: 750 !important; }
html body .main .study-room-rebuilt .study-room-side-actions { display: grid !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; min-height: 0 !important; }
html body .main .study-room-rebuilt .study-room-utility-action { display: grid !important; grid-template-columns: 38px minmax(0,1fr) auto !important; align-items: center !important; column-gap: 10px !important; padding: 13px !important; }
html body .main .study-room-rebuilt .study-room-utility-action > i { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; color: #bdebd7 !important; background: rgba(43,132,103,.22) !important; font-size: 18px !important; font-style: normal !important; }
html body .main .study-room-rebuilt .study-room-utility-action span { display: grid !important; gap: 3px !important; min-width: 0 !important; }
html body .main .study-room-rebuilt .study-room-utility-action b { color: #f0f7f2 !important; font-size: 15px !important; }
html body .main .study-room-rebuilt .study-room-utility-action small { overflow: hidden !important; color: #adc1b7 !important; font-size: 11px !important; line-height: 1.25 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body .main .study-room-rebuilt .study-room-utility-action em { color: #87d6b7 !important; font-size: 11px !important; font-style: normal !important; white-space: nowrap !important; }
html body .main .study-room-rebuilt .study-room-teaser-bottom { position: static !important; inset: auto !important; transform: none !important; grid-row: 4 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 22px !important; margin: 0 !important; padding: 0 !important; }
html body .main .study-room-rebuilt .study-room-teaser-bottom > span { color: #9bb1a6 !important; font-size: 11px !important; }
html body .main .study-room-rebuilt .study-room-teaser-bottom > a { display: inline-flex !important; align-items: center !important; gap: 7px !important; color: #bce9d5 !important; font-size: 12px !important; font-weight: 650 !important; text-decoration: none !important; }
html body.theme-light .main .hero-art.study-room-rebuilt { color: #193d38 !important; background: linear-gradient(135deg, rgba(244,250,247,.94), rgba(207,229,220,.88)) !important; border-color: rgba(255,255,255,.78) !important; box-shadow: 0 16px 34px rgba(29,59,50,.13), inset 0 1px 0 rgba(255,255,255,.8) !important; }
html body.theme-light .main .study-room-rebuilt .study-room-teaser-head { border-bottom-color: rgba(30,69,60,.15) !important; }
html body.theme-light .main .study-room-rebuilt :is(.study-room-teaser-head h2, .study-room-timer-action > strong, .study-room-utility-action b) { color:#173d37 !important; }
html body.theme-light .main .study-room-rebuilt :is(.study-room-teaser-head > div:first-child > span, .study-room-teaser-lead, .study-room-utility-action small, .study-room-teaser-bottom > span) { color:#627c72 !important; }
html body.theme-light .main .study-room-rebuilt :is(.study-room-timer-action, .study-room-utility-action) { border-color:rgba(255,255,255,.74) !important; background:rgba(255,255,255,.64) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 8px 18px rgba(42,78,65,.08) !important; }
html body.theme-light .main .study-room-rebuilt .study-room-timer-action > time { color:#24564d !important; }
html body.theme-light .main .study-room-rebuilt .study-room-timer-action > small { color:#6d847b !important; }
html body.theme-light .main .study-room-rebuilt .study-room-mini-clock { background:rgba(255,255,255,.5) !important; border-color:rgba(48,90,78,.14) !important; }
@media (max-width: 700px), (orientation: portrait) {
  html body .main .hero-art.study-room-rebuilt { height:auto !important; min-height:0 !important; max-height:none !important; padding:20px !important; }
  html body .main .study-room-rebuilt .study-room-action-grid { grid-template-columns:1fr !important; grid-template-rows:230px auto !important; }
  html body .main .study-room-rebuilt .study-room-side-actions { grid-template-rows:repeat(2,86px) !important; }
  html body .main .study-room-rebuilt .study-room-mini-clock { display:none !important; }
}

/* v36 — preserve the original blue room composition, rendered as glass. */
html body .main .hero-art.study-room-rebuilt,
html body.theme-light .main .hero-art.study-room-rebuilt,
html body.theme-dark .main .hero-art.study-room-rebuilt,
html body:not(.theme-light) .main .hero-art.study-room-rebuilt {
  color: #edf7ff !important;
  background: linear-gradient(135deg, rgba(7,113,177,.68), rgba(31,163,213,.47)) !important;
  border-color: rgba(218,244,255,.48) !important;
  box-shadow: 0 16px 36px rgba(1,42,67,.25), inset 0 1px 0 rgba(255,255,255,.25) !important;
  -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
  backdrop-filter: blur(24px) saturate(128%) !important;
}
html body .main .study-room-rebuilt .study-room-teaser-head { border-bottom-color: rgba(227,246,255,.36) !important; }
html body .main .study-room-rebuilt :is(.study-room-teaser-head h2, .study-room-timer-action > strong, .study-room-utility-action b) { color:#f4fbff !important; }
html body .main .study-room-rebuilt :is(.study-room-teaser-head > div:first-child > span, .study-room-teaser-lead, .study-room-utility-action small, .study-room-teaser-bottom > span) { color:rgba(231,247,255,.82) !important; }
html body .main .study-room-rebuilt :is(.study-room-timer-action, .study-room-utility-action) { background:rgba(5,49,76,.52) !important; border-color:rgba(222,244,255,.24) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,40,68,.12) !important; -webkit-backdrop-filter:blur(18px) saturate(126%) !important; backdrop-filter:blur(18px) saturate(126%) !important; }
html body .main .study-room-rebuilt .study-room-timer-action > time { color:#bcecf0 !important; }
html body .main .study-room-rebuilt .study-room-timer-action > small { color:rgba(226,245,255,.77) !important; }
html body .main .study-room-rebuilt .study-room-timer-action > em { color:#f2fbff !important; background:rgba(20,103,80,.86) !important; }
html body .main .study-room-rebuilt .study-room-utility-action > i { color:#d3f8eb !important; background:rgba(22,127,113,.32) !important; }
html body .main .study-room-rebuilt .study-room-utility-action em,
html body .main .study-room-rebuilt .study-room-teaser-bottom > a { color:#d7f7ff !important; }
html body .main .study-room-rebuilt .study-room-mini-clock,
html body .main .study-room-rebuilt .study-room-head-meta > b { color:#eefaff !important; background:rgba(2,38,59,.48) !important; border-color:rgba(226,247,255,.18) !important; }

/* v37 — the chosen original blue page; identical before and after full CSS load. */
html body .main .hero-art.study-room-rebuilt,
html body.theme-light .main .hero-art.study-room-rebuilt,
html body.theme-dark .main .hero-art.study-room-rebuilt,
html body:not(.theme-light) .main .hero-art.study-room-rebuilt {
  color: #edf7ff !important;
  background: linear-gradient(135deg, #0a6fae 0%, #177eb6 58%, #298fbd 100%) !important;
  border-color: #83c8ed !important;
  box-shadow: 0 15px 32px rgba(0,54,93,.24), inset 0 1px 0 rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .main .study-room-rebuilt .study-room-teaser-head { border-bottom-color: rgba(228,247,255,.36) !important; }
html body .main .study-room-rebuilt :is(.study-room-timer-action, .study-room-utility-action) { background:#123f59 !important; border-color:#0c3148 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html body .main .study-room-rebuilt :is(.study-room-teaser-head h2, .study-room-timer-action > strong, .study-room-utility-action b) { color:#f2fbff !important; }
html body .main .study-room-rebuilt :is(.study-room-teaser-head > div:first-child > span, .study-room-teaser-lead, .study-room-utility-action small, .study-room-teaser-bottom > span, .study-room-timer-action > small) { color:rgba(229,247,255,.80) !important; }
html body .main .study-room-rebuilt .study-room-timer-action > time { color:#b8edf0 !important; }

/* 2026-10-09: let resource headings share their parent panel surface. */
html body .main #featuredResources > .featured-copy,
html body .main #overview .overview-header > .section-title {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
html body .main #featuredResources > .featured-copy { margin: 0 0 20px !important; padding: 22px 24px 0 !important; }
html body .main #overview .overview-header > .section-title { margin: 0 !important; }
html body .main #overview .overview-header > .section-title > .section-icon { display: none !important; }
html body .main #featuredResources > .featured-copy h2,
html body .main #overview .overview-header > .section-title h2 {
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(23px, 1.8vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  color: #294b43 !important;
  text-shadow: none !important;
}
html body .main #featuredResources > .featured-copy p,
html body .main #overview .overview-header > .section-title p {
  margin: 8px 0 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #526a63 !important;
  text-shadow: none !important;
}
html body:not(.theme-light) .main #featuredResources > .featured-copy h2,
html body:not(.theme-light) .main #overview .overview-header > .section-title h2 { color: #e2eee8 !important; }
html body:not(.theme-light) .main #featuredResources > .featured-copy p,
html body:not(.theme-light) .main #overview .overview-header > .section-title p { color: #b5c8bf !important; }

@media (max-width: 700px) {
  html body .main #featuredResources > .featured-copy { padding: 18px 20px 0 !important; }
}

/* Bright study-note and bottle text, with a woodland glass backing for contrast. */
html body #top .hero #studyCompanion :is(.daily-learning-sign, .drift-bottle-board) {
  color: #fff9e9 !important;
  background: linear-gradient(135deg, rgba(23, 44, 32, .84), rgba(42, 56, 33, .80)) !important;
  border-color: rgba(248, 243, 210, .52) !important;
}
html body #top .hero #studyCompanion :is(.daily-learning-sign, .drift-bottle-board)::after { opacity: .12 !important; }
html body #top .hero #studyCompanion :is(.daily-learning-sign, .drift-bottle-board) :is(h2, p, small, span, button) {
  color: #fff9e9 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(9, 24, 15, .65) !important;
}
html body #top .hero #studyCompanion :is(.daily-learning-sign, .drift-bottle-board) .companion-kicker { color: #ffe2a0 !important; }
html body #top .hero #studyCompanion #dailyLearningSignMeta,
html body #top .hero #studyCompanion .drift-bottle-hint { color: #f1f4d9 !important; }
html body #top .hero #studyCompanion :is(.drift-bottle-button, .drift-bottle-message) {
  color: #fff9e9 !important;
  background: rgba(18, 48, 35, .86) !important;
  border-color: rgba(236, 244, 209, .42) !important;
}
html body #top .hero #studyCompanion .drift-bottle-button:hover { background: #456548 !important; }
html body #top .hero #studyCompanion .drift-bottle-track { border-color: rgba(237, 245, 214, .3) !important; }

/* Let the daily quote use the card's full reading area. */
html body #top .hero #studyCompanion .daily-learning-sign { display: flex !important; flex-direction: column !important; }
html body #top .hero #studyCompanion #dailyLearningSign {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 18px 0 16px !important;
  font-size: clamp(28px, 2.25vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: .025em !important;
  overflow-wrap: anywhere;
}
html body #top .hero #studyCompanion #dailyLearningSignMeta {
  margin-top: auto !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
@media (max-width: 600px) {
  html body #top .hero #studyCompanion #dailyLearningSign { font-size: 28px !important; margin: 16px 0 14px !important; }
}

/* Frosted homepage search and notice panels match the woodland companion. */
html body #top .hero :is(.hero-copy, .hero-live-panel) {
  background: rgba(242, 248, 238, .64) !important;
  border-color: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 16px 36px rgba(10, 28, 22, .13), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  -webkit-backdrop-filter: blur(24px) saturate(115%) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
}
html body:not(.theme-light) #top .hero :is(.hero-copy, .hero-live-panel) {
  background: rgba(18, 37, 29, .64) !important;
  border-color: rgba(217, 233, 204, .28) !important;
  box-shadow: 0 16px 36px rgba(7, 21, 16, .2), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
html body #top .hero :is(.hero-copy, .hero-live-panel)::before,
html body #top .hero :is(.hero-copy, .hero-live-panel)::after { opacity: 0 !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #top .hero :is(.hero-copy, .hero-live-panel) { background: rgba(242, 248, 238, .94) !important; }
  html body:not(.theme-light) #top .hero :is(.hero-copy, .hero-live-panel) { background: rgba(18, 37, 29, .94) !important; }
}