:root {
  --wbr-accent: #7652d6;
  --wbr-accent-2: #a27df0;
  --wbr-bg: #ffffff;
  --wbr-surface: #f7f5fb;
  --wbr-text: #242126;
  --wbr-muted: #756f7a;
  --wbr-border: #e8e2ed;
  --wbr-reading-size: 19px;
}

.wbr-library,
.wbr-reader { box-sizing: border-box; color: var(--wbr-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wbr-library *, .wbr-reader * { box-sizing: border-box; }
.wbr-library { --wbr-image-width: 180px; --wbr-card-height: 150px; --wbr-card-radius: 14px; --wbr-padding-v: 20px; --wbr-padding-h: 24px; --wbr-title-size: 21px; --wbr-description-size: 14px; --wbr-number-size: 11px; --wbr-progress-scale: 1; --wbr-progress-top: 12px; --wbr-progress-right: 14px; --wbr-scale-reference-width: 620; --wbr-tab-width: 320px; --wbr-tab-height: 54px; --wbr-tab-radius: 80px; max-width: 1120px; margin: 40px auto; padding: 0 20px; }
.wbr-eyebrow { color: var(--wbr-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wbr-count { color: var(--wbr-muted); font-size: 14px; }
.wbr-grid { display: flex; flex-direction: column; gap: var(--wbr-gap, 14px); }
.wbr-section-tab { position: relative; z-index: 2; display: flex; align-self: center; align-items: center; justify-content: center; width: min(var(--wbr-tab-width), 90%); min-height: var(--wbr-tab-height); margin-bottom: calc(-1px - var(--wbr-gap, 14px)); padding: 8px 24px 5px; color: var(--wbr-tab-text, var(--wbr-text)); background: var(--wbr-tab-bg, var(--wbr-bg)); border: 1px solid var(--wbr-tab-border, var(--wbr-border)); border-bottom: 0; border-radius: var(--wbr-tab-radius) var(--wbr-tab-radius) 0 0; box-shadow: 0 -4px 14px rgba(43, 27, 64, .045); font-size: 17px; font-weight: 800; line-height: 1.15; text-align: center; }
.wbr-section-tab::after { position: absolute; right: 1px; bottom: -2px; left: 1px; height: 3px; background: var(--wbr-tab-bg, var(--wbr-bg)); content: ""; }
.wbr-section-tab span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbr-card { min-width: 0; }
.wbr-card[hidden] { display: none; }
.wbr-card__link { position: relative; display: grid; grid-template-columns: var(--wbr-image-width) minmax(0, 1fr); min-height: var(--wbr-card-height); overflow: hidden; color: inherit !important; background: var(--wbr-bg); border: 1px solid var(--wbr-border); border-radius: var(--wbr-card-radius); box-shadow: 0 5px 18px rgba(43, 27, 64, .06); text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.wbr-card__link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--wbr-accent) 35%, var(--wbr-border)); box-shadow: 0 10px 26px rgba(43, 27, 64, .11); }
.wbr-card__image { position: relative; min-height: var(--wbr-card-height); overflow: hidden; background: linear-gradient(135deg, #382858, #a57be8); border-right: 0 solid var(--wbr-image-separator, var(--wbr-accent)); }
.wbr-card__image picture { display: block; width: 100%; height: 100%; }
.wbr-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.wbr-card__link:hover img { transform: scale(1.035); }
.wbr-card__image--empty { display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 42px; }
.wbr-card__progress-badge { position: absolute; z-index: 3; top: var(--wbr-progress-top); right: var(--wbr-progress-right); display: flex; align-items: center; gap: 7px; min-width: 88px; padding: 7px 9px; color: var(--wbr-text); background: color-mix(in srgb, var(--wbr-bg) 92%, transparent); border: 1px solid var(--wbr-border); border-radius: 999px; box-shadow: 0 4px 12px rgba(43, 27, 64, .08); backdrop-filter: blur(8px); transform: scale(var(--wbr-progress-scale)); transform-origin: top right; }
.wbr-card__progress-track { display: block; width: 48px; height: 5px; overflow: hidden; background: color-mix(in srgb, var(--wbr-muted) 20%, transparent); border-radius: 999px; }
.wbr-card__progress-fill { display: block; width: 0; height: 100%; background: var(--wbr-accent-2); border-radius: inherit; transition: width .3s ease; }
.wbr-card__progress-label { min-width: 25px; color: var(--wbr-muted); font-size: 10px; font-weight: 800; line-height: 1; text-align: right; }
.wbr-card__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--wbr-padding-v) var(--wbr-padding-h); }
.wbr-card__number { color: var(--wbr-accent); font-size: var(--wbr-number-size); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.wbr-card h3 { margin: 6px 0 7px; overflow: hidden; font-size: var(--wbr-title-size); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.wbr-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--wbr-muted); font-size: var(--wbr-description-size); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wbr-countdown-card .wbr-card__link { cursor: default; }
.wbr-countdown { display: grid; grid-template-columns: repeat(4, minmax(36px, 1fr)); gap: 6px; margin-top: 10px; }
.wbr-countdown__unit { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 6px 4px; background: var(--wbr-countdown-unit-bg, color-mix(in srgb, var(--wbr-accent) 8%, var(--wbr-bg))); border: 1px solid color-mix(in srgb, var(--wbr-accent) 22%, var(--wbr-border)); border-radius: 9px; }
.wbr-countdown__unit strong { color: var(--wbr-countdown-number, var(--wbr-accent)); font-size: var(--wbr-scaled-title-size, var(--wbr-title-size)); line-height: 1; }
.wbr-countdown__unit small { margin-top: 4px; color: var(--wbr-muted); font-size: var(--wbr-scaled-number-size, var(--wbr-number-size)); font-weight: 700; line-height: 1; text-transform: uppercase; }
.wbr-countdown__finished { margin-top: 10px !important; color: var(--wbr-accent) !important; font-weight: 800; }
.wbr-auto-text .wbr-card__link { grid-template-columns: var(--wbr-scaled-image-width, var(--wbr-image-width)) minmax(0, 1fr) !important; min-height: var(--wbr-scaled-card-height, var(--wbr-card-height)) !important; border-radius: var(--wbr-scaled-card-radius, var(--wbr-card-radius)) !important; }
.wbr-auto-text .wbr-card__image { min-height: var(--wbr-scaled-card-height, var(--wbr-card-height)) !important; }
.wbr-auto-text .wbr-card__body { padding: var(--wbr-scaled-padding-v, var(--wbr-padding-v)) var(--wbr-scaled-padding-h, var(--wbr-padding-h)) !important; }
.wbr-auto-text .wbr-card h3 { font-size: var(--wbr-scaled-title-size, var(--wbr-title-size)) !important; }
.wbr-auto-text .wbr-card p { font-size: var(--wbr-scaled-description-size, var(--wbr-description-size)) !important; }
.wbr-auto-text .wbr-card__number { font-size: var(--wbr-scaled-number-size, var(--wbr-number-size)) !important; }
.wbr-auto-text .wbr-card__progress-badge { top: var(--wbr-scaled-progress-top, var(--wbr-progress-top)) !important; right: var(--wbr-scaled-progress-right, var(--wbr-progress-right)) !important; transform: scale(var(--wbr-scaled-progress-scale, var(--wbr-progress-scale))) !important; }
.wbr-load-more { display: block; margin: 32px auto 0; padding: 13px 22px; color: #fff; background: var(--wbr-accent); border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 750; }
.wbr-load-more:hover { filter: brightness(.92); }

.wbr-reader { --wbr-reader-bg: #fff; --wbr-reader-text: #28252a; --wbr-reader-muted: #756f7a; position: relative; width: min(100%, 900px); margin: 30px auto 70px; padding: 0 24px 40px; color: var(--wbr-reader-text); background: var(--wbr-reader-bg); }
.wbr-reader.wbr-dark { --wbr-reader-bg: #17151a; --wbr-reader-text: #eeeaf1; --wbr-reader-muted: #aaa3ae; }
.wbr-reader.wbr-sepia { --wbr-reader-bg: #f5eddd; --wbr-reader-text: #3b3328; --wbr-reader-muted: #766b5c; }
.wbr-progress { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 5px; background: rgba(110,90,130,.12); }
.wbr-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--wbr-accent), var(--wbr-accent-2)); transition: width .08s linear; }
.wbr-toolbar { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; background: color-mix(in srgb, var(--wbr-reader-bg) 93%, transparent); border-bottom: 1px solid var(--wbr-border); backdrop-filter: blur(10px); }
.wbr-back { color: var(--wbr-reader-muted) !important; text-decoration: none !important; font-size: 14px; font-weight: 700; white-space: nowrap; }
.wbr-tools { display: flex; align-items: center; gap: 7px; }
.wbr-tools select, .wbr-tools button { min-height: 38px; color: var(--wbr-reader-text); background: var(--wbr-reader-bg); border: 1px solid var(--wbr-border); border-radius: 9px; font: inherit; }
.wbr-tools select { max-width: 255px; padding: 0 30px 0 10px; font-size: 13px; }
.wbr-tools button { min-width: 38px; padding: 0 8px; cursor: pointer; font-weight: 700; }
.wbr-hero { overflow: hidden; width: 100%; height: clamp(220px, 45vw, 430px); margin: 34px 0 38px; border-radius: 18px; }
.wbr-hero picture { display: block; width: 100%; height: 100%; }
.wbr-hero img { width: 100%; height: 100%; object-fit: cover; }
.wbr-reader__header { max-width: 720px; margin: 58px auto 42px; text-align: center; }
.wbr-reader__header h1 { margin: 9px 0 0; color: var(--wbr-reader-text); font-size: clamp(34px, 6vw, 58px); line-height: 1.08; }
.wbr-content { max-width: 720px; margin: 0 auto; color: var(--wbr-reader-text); font-family: Georgia, "Times New Roman", serif; font-size: var(--wbr-reading-size); line-height: 1.9; }
.wbr-content p { margin: 0 0 1.55em; }
.wbr-content img { max-width: 100%; height: auto; border-radius: 12px; }
.wbr-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; margin: 70px auto 0; padding-top: 25px; border-top: 1px solid var(--wbr-border); }
.wbr-navigation a { display: inline-flex; flex-direction: column; gap: 3px; color: var(--wbr-reader-text) !important; text-decoration: none !important; }
.wbr-navigation small { color: var(--wbr-reader-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.wbr-navigation__next { text-align: right; }
.wbr-navigation__next a { align-items: flex-end; }
.wbr-empty { max-width: 760px; margin: 30px auto; padding: 25px; background: #f7f5fb; border: 1px solid #e8e2ed; border-radius: 14px; text-align: center; }

@media (max-width: 1024px) {
  .wbr-toolbar { align-items: flex-start; }
  .wbr-tools { flex-wrap: wrap; justify-content: flex-end; }
  .wbr-tools select { order: 2; max-width: 210px; width: 100%; }
}
@media (max-width: 540px) {
  .wbr-library { --wbr-image-width: 108px; --wbr-card-height: 105px; --wbr-card-radius: 9px; --wbr-padding-v: 10px; --wbr-padding-h: 12px; --wbr-title-size: 17px; --wbr-description-size: 12px; --wbr-number-size: 10px; --wbr-progress-scale: .7; --wbr-progress-top: 6px; --wbr-progress-right: 6px; --wbr-scale-reference-width: 340; --wbr-tab-width: 190px; --wbr-tab-height: 42px; padding: 0 14px; }
  .wbr-section-tab { padding-inline: 18px; font-size: 14px; }
  .wbr-card p { -webkit-line-clamp: 3; }
  .wbr-countdown { gap: 3px; margin-top: 7px; }
  .wbr-countdown__unit { padding: 5px 2px; border-radius: 6px; }
  .wbr-reader { padding-inline: 16px; }
  .wbr-toolbar { position: relative; flex-direction: column; }
  .wbr-tools { justify-content: flex-start; width: 100%; }
  .wbr-tools select { flex: 1; order: 0; max-width: none; }
  .wbr-hero { margin-top: 20px; border-radius: 12px; }
  .wbr-navigation { grid-template-columns: 1fr; }
  .wbr-navigation__next { text-align: left; }
  .wbr-navigation__next a { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .wbr-card__link, .wbr-card__image img, .wbr-card__progress-fill { transition: none; }
}