.lh-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 16px 96px;
    color: var(--color-text, #172033);
    box-sizing: border-box;
}

.lh-page *,
.lh-page *::before,
.lh-page *::after {
    box-sizing: border-box;
}

html.lh-autoscroll-active,
html.lh-autoscroll-active body,
html.lh-autoscroll-active #app,
html.lh-autoscroll-active #app-main {
    scroll-behavior: auto !important;
}

.lh-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 4px 0 16px;
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #0055a5) 12%, transparent), rgba(46,125,50,.10));
    border: 1px solid rgba(220, 228, 240, .9);
    box-shadow: 0 18px 44px rgba(20, 40, 80, .1);
}

.lh-eyebrow {
    margin: 0 0 8px;
    color: var(--color-primary, #0055a5);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lh-hero h1 {
    margin: 0;
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: 0;
}

.lh-hero-description {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--color-text-muted, #5f6f86);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 650;
}

.lh-hero-description > :first-child {
    margin-top: 0;
}

.lh-hero-description > :last-child {
    margin-bottom: 0;
}

.lh-date-card {
    min-width: 150px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(210, 220, 235, .9);
    box-shadow: 0 10px 24px rgba(20, 40, 80, .08);
}

.lh-date-card span {
    display: block;
    color: var(--color-text-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.lh-date-card strong {
    font-size: 24px;
    font-weight: 950;
}

.lh-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
}

.lh-day-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(190, 202, 220, .72);
    background: rgba(255,255,255,.86);
    color: var(--color-text, #172033);
    text-decoration: none;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    box-shadow: 0 10px 24px rgba(20,40,80,.08);
}

.lh-day-link:hover {
    text-decoration: none;
}

.lh-day-link--today {
    background: linear-gradient(145deg, var(--color-primary, #0055a5), var(--color-primary-dark, #003a75));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--color-primary, #0055a5) 28%, transparent);
}

.lh-day-link.is-disabled {
    opacity: .45;
    filter: grayscale(.75) saturate(.55);
    cursor: not-allowed;
    pointer-events: none;
    color: #9ca3af;
    background: rgba(255,255,255,.55);
    border-color: rgba(148, 163, 184, .2);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}

.lh-day-link--today.is-disabled {
    color: #9ca3af;
    background: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}

.lh-week-strip {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: center;
    margin: 0 0 16px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(218, 226, 238, .9);
    box-shadow: 0 12px 30px rgba(20,40,80,.08);
}

.lh-week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    gap: 8px;
    min-width: 0;
}

.lh-week-arrow,
.lh-week-day {
    border: 1px solid rgba(99, 111, 135, .13);
    background: rgba(255,255,255,.82);
    color: var(--color-text, #172033);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(20,40,80,.08), inset 0 1px 0 rgba(255,255,255,.92);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lh-week-arrow {
    width: 52px;
    height: 48px;
    border-radius: 999px;
    color: var(--color-primary, #0055a5);
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
}

.lh-week-day {
    min-height: 48px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
}

.lh-week-day:hover {
    background: rgba(255,255,255,.96);
    border-color: color-mix(in srgb, var(--color-primary, #0055a5) 28%, transparent);
    box-shadow: 0 12px 24px rgba(20,40,80,.12), inset 0 1px 0 rgba(255,255,255,.98);
    transform: translateY(-1px);
}

.lh-week-day:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary, #0055a5) 48%, transparent);
    outline-offset: 2px;
}

.lh-week-day span,
.lh-week-day em {
    color: #6b7280;
    font-style: normal;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.lh-week-day em {
    color: var(--color-primary, #0055a5);
    font-size: 7.5px;
}

.lh-week-day strong {
    font-size: 19px;
    font-weight: 950;
    line-height: 1;
}

.lh-week-day.is-active {
    border-color: var(--color-primary, #0055a5);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--color-primary, #0055a5) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #0055a5) 18%, transparent);
    color: var(--color-primary, #0055a5);
}

.lh-week-day.is-today:not(.is-active) strong,
.lh-week-day.is-today:not(.is-active) span {
    color: var(--color-primary, #0055a5);
}

.lh-week-day.is-today:not(.is-active) {
    border-color: color-mix(in srgb, var(--color-primary, #0055a5) 34%, transparent);
}

.lh-week-day.is-checking {
    opacity: .62;
    cursor: progress;
    transform: translateY(2px) scale(.985);
    background: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.lh-week-day.is-disabled {
    opacity: .38;
    filter: grayscale(.75) saturate(.55);
    cursor: not-allowed;
    pointer-events: none;
    transform: translateY(7px) scale(.94);
    background: rgba(255,255,255,.34);
    border-color: rgba(148, 163, 184, .18);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}

.lh-week-day.is-disabled span,
.lh-week-day.is-disabled em,
.lh-week-day.is-disabled strong {
    color: #9ca3af !important;
}

.lh-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.lh-hours {
    position: sticky;
    top: 14px;
    min-width: 0;
}

.lh-hour-strip {
    display: grid;
    gap: 8px;
}

.lh-hour-arrow {
    display: none;
}

.lh-hour-tabs {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(218, 226, 238, .9);
}

.lh-hour-tab {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text, #172033);
    text-align: left;
    font-size: 15px;
    font-weight: 850;
    cursor: pointer;
}

.lh-hour-tab.is-active {
    background: var(--color-primary, #0055a5);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 85, 165, .22);
}

.lh-hour-tabs.is-placeholder .lh-hour-tab {
    opacity: .58;
    cursor: default;
}

.lh-reader {
    min-height: 520px;
    padding: 24px;
    border-radius: 22px;
    background: #fffdf4;
    border: 1px solid rgba(226, 214, 166, .9);
    box-shadow: 0 18px 44px rgba(90, 68, 22, .1);
    min-width: 0;
    overflow: hidden;
}

.lh-reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: -6px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(190, 155, 72, .18);
    max-width: 100%;
}

.lh-font-tools,
.lh-reader-toolbar > button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(190,155,72,.22);
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 20px rgba(90,68,22,.08);
}

.lh-font-tools {
    gap: 4px;
    padding: 4px 5px 4px 12px;
}

.lh-font-tools span {
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    margin-right: 3px;
    white-space: nowrap;
}

.lh-font-tools button,
.lh-reader-toolbar > button {
    min-width: 38px;
    height: 38px;
    border: 1px solid rgba(190,155,72,.18);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-dark, #003a75);
    font-size: 14px;
    font-weight: 950;
}

.lh-reader-toolbar > button {
    padding: 0 15px;
    white-space: nowrap;
}

.lh-reader-toolbar .lh-share-icon {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.lh-reader-toolbar .lh-share-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.lh-reader-toolbar [data-lh-reading-mode] {
    color: var(--color-primary-dark, #003a75);
}

.lh-reader-toolbar [data-lh-share] {
    background: linear-gradient(145deg, var(--color-primary, #0055a5), var(--color-primary-dark, #003a75));
    color: #fff;
    border-color: transparent;
}

.lh-day-meta {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(190, 155, 72, .25);
}

.lh-date-title {
    margin: 0 0 8px;
    color: #8a6424;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.lh-day-meta h2 {
    margin: 0;
    color: #bd2b2b;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
}

.lh-day-meta p:last-child {
    margin: 8px 0 0;
    color: #5f5036;
    font-weight: 750;
}

.lh-sections {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.lh-hour-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.lh-hour-panel[hidden] {
    display: none !important;
}

.lh-source-note {
    margin: 6px 0 0;
    color: rgba(91, 98, 115, 0.62);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
}

.lh-section h3 {
    margin: 0 0 12px;
    color: #c52f2f;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: 0;
}

.lh-section-body {
    color: #242424;
    font-size: var(--lh-reader-font, 18px);
    line-height: 1.72;
    font-weight: 720;
    overflow-wrap: anywhere;
    word-break: normal;
}

.lh-section-body p,
.lh-section-body div {
    margin-top: 0;
}

.lh-section-body .pre {
    display: inline-block;
    min-width: 118px;
    color: #c52f2f;
    font-weight: 950;
}

.lh-section-body .lh-source-block {
    margin: 0 0 1.05em;
}

.lh-section-body .lh-source-prayer-title,
.lh-section-body .lh-source-section-title {
    margin: 1.45em 0 .8em;
    color: #cf1f2d;
    font-family: inherit;
    font-size: clamp(1.08rem, 1.8vw, 1.28rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}

.lh-section-body .lh-source-prayer-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .18rem .02rem .28rem;
    border-bottom: 2px solid color-mix(in srgb, var(--season-accent, #19833a) 38%, transparent);
}

.lh-section-body .lh-source-prayer-title::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--season-accent, #19833a);
    box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--season-accent, #19833a) 15%, transparent);
}

.lh-section-body .lh-source-section-title {
    padding-left: .82rem;
    border-left: 4px solid var(--season-accent, #19833a);
}

.lh-section-body .lh-rubric {
    color: #e00000;
    font-weight: 950;
}

.lh-section-body .lh-align-center {
    text-align: center;
}

.lh-section-body .lh-align-right {
    text-align: right;
}

.lh-section-body .lh-align-justify {
    text-align: justify;
}

.lh-section-body .lh-italic {
    font-style: italic;
}

.lh-section-body .lh-bold {
    font-weight: 950;
}

.lh-section-body sup {
    display: inline-block;
    min-width: 0;
    margin-right: 0;
    color: #e00000;
    font-size: .58em;
    font-weight: 950;
    line-height: 1;
    vertical-align: super;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lh-section-body .lh-verse-num {
    min-width: 1.35em;
    margin-right: .16em;
}

.lh-section-body b,
.lh-section-body strong {
    font-weight: 950;
}

.lh-section-body i,
.lh-section-body em {
    font-weight: 820;
}

.lh-section-body .antiphon {
    margin: 12px 0;
    color: #9a6a19;
}

.lh-section-body .lh-block {
    margin: 0 0 1.28em;
    color: #242424;
    font-weight: 500;
    line-height: 1.58;
}
.lh-hero-description p{margin-bottom:10px;}
.lh-hero-description{color:#444 !important;font-weight:400 !important;}

.lh-section-body .lh-hour-title {
    margin: 1.45em 0 .78em;
    color: var(--season-accent, #b8a22d);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 900;
    line-height: 1.18;
}

.lh-section-body .lh-section-title {
    margin: 1.25em 0 .65em;
    color: var(--season-accent, #b8a22d);
    font-size: clamp(1.05rem, 1.75vw, 1.28rem);
    font-weight: 850;
    line-height: 1.3;
    text-transform: uppercase;
}

.lh-section-body .lh-subtitle {
    margin: .8em 0 1em;
    color: #5d503c;
    font-size: .96em;
    font-weight: 720;
}

.lh-section-body .lh-antiphon,
.lh-section-body .lh-prayer,
.lh-section-body .lh-response,
.lh-section-body .lh-stanza,
.lh-section-body .lh-note {
    color: #2d2821;
}

.lh-section-body .lh-note {
    color: #6f6554;
    font-size: .9em;
}

.lh-section-body .lh-antiphon strong,
.lh-section-body .lh-prayer strong,
.lh-section-body .lh-response strong,
.lh-section-body .lh-stanza strong {
    color: var(--season-accent, #b8a22d);
    font-weight: 900;
}

.lh-section-body .lh-response {
    padding-left: .9em;
    border-left: 3px solid color-mix(in srgb, var(--season-accent, #b8a22d) 55%, transparent);
}

.lh-section-body .gda-office-block {
    display: grid;
    gap: .9em;
}

.lh-section-body .gda-office-title {
    margin: .15em 0 .55em;
    color: #8f1010;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lh-section-body .gda-prayer-section-title {
    margin: 1.1em 0 .45em;
    padding: .65em .85em;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--season-accent, #8f1010), color-mix(in srgb, var(--season-accent, #8f1010) 72%, #111827 28%));
    font-size: clamp(1.02rem, 1.7vw, 1.22rem);
    font-weight: 950;
    line-height: 1.25;
    text-transform: uppercase;
}

.lh-section-body .gda-prayer-subtitle {
    margin: .85em 0 .35em;
    color: #6b3f12;
    font-size: .96em;
    font-weight: 900;
    line-height: 1.38;
}

.lh-section-body .gda-rubric {
    margin: .35em 0;
    padding: .78em 1em;
    border-radius: 12px;
    color: #6f4d16;
    background: color-mix(in srgb, var(--season-accent, #b8a22d) 10%, #fff 90%);
    border: 1px solid color-mix(in srgb, var(--season-accent, #b8a22d) 22%, #fff 78%);
    font-size: .96em;
    font-style: italic;
    font-weight: 760;
}

.lh-section-body .gda-dialogue-line {
    display: grid;
    grid-template-columns: 2.3em minmax(0, 1fr);
    gap: .4em;
    align-items: baseline;
    margin: .2em 0;
    font-weight: 820;
}

.lh-section-body .gda-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    color: #9f1111;
    font-size: 1.08em;
    font-weight: 950;
}

.lh-section-body .gda-antiphon-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7em;
    align-items: baseline;
    margin: .4em 0;
    padding: .85em 1em;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.9), color-mix(in srgb, var(--season-accent, #b8a22d) 9%, #fff 91%));
    border: 1px solid color-mix(in srgb, var(--season-accent, #b8a22d) 24%, #fff 76%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.lh-section-body .gda-antiphon-label {
    color: #9f1111;
    font-weight: 950;
}

.lh-section-body .gda-antiphon-text,
.lh-section-body .gda-prayer-text,
.lh-section-body .gda-doxology,
.lh-section-body .gda-hymn-line {
    margin: 0;
}

.lh-section-body .gda-prayer-text {
    color: #2e2117;
    font-weight: 690;
    line-height: 1.76;
}

.lh-section-body .gda-hymn-line {
    padding-left: 1em;
    color: #3d2a1d;
    font-weight: 720;
    line-height: 1.72;
}

.lh-section-body .gda-doxology {
    color: #3d2a1d;
    font-weight: 820;
}

.lh-section-body .gda-divider {
    width: 100%;
    height: 1px;
    margin: .85em 0;
    border: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--season-accent, #b8a22d) 42%, transparent), transparent);
}

.lh-empty,
.lh-loading,
.lh-empty-small {
    padding: 18px;
    border-radius: 14px;
    background: rgba(0, 85, 165, .08);
    color: var(--color-text-muted, #667085);
    font-weight: 750;
}

[data-theme="dark"] .lh-page {
    color: #f5f7fb;
}

[data-theme="dark"] .lh-hero,
[data-theme="dark"] .lh-hour-tabs,
[data-theme="dark"] .lh-date-card,
[data-theme="dark"] .lh-day-link {
    background: rgba(24, 31, 48, .86);
    border-color: rgba(255,255,255,.12);
    color: #f5f7fb;
}

[data-theme="dark"] .lh-day-link.is-disabled,
[data-theme="dark"] .lh-day-link--today.is-disabled {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(148, 163, 184, .16);
    color: #64748b;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}

[data-theme="dark"] .lh-reader {
    background: #181615;
    border-color: rgba(226, 214, 166, .18);
}

[data-theme="dark"] .lh-section-body {
    color: #f3ead8;
}

[data-theme="dark"] .lh-section-body .lh-rubric {
    color: #ff7373;
}

[data-theme="dark"] .lh-section-body .lh-source-prayer-title,
[data-theme="dark"] .lh-section-body .lh-source-section-title {
    color: #ff777f;
}

[data-theme="dark"] .lh-section-body .gda-office-title,
[data-theme="dark"] .lh-section-body .gda-cue,
[data-theme="dark"] .lh-section-body .gda-antiphon-label {
    color: #ff8b8b;
}

[data-theme="dark"] .lh-section-body .gda-rubric,
[data-theme="dark"] .lh-section-body .gda-antiphon-card {
    background: rgba(15,23,42,.48);
    border-color: rgba(255,255,255,.13);
}

[data-theme="dark"] .lh-section-body .gda-rubric,
[data-theme="dark"] .lh-section-body .gda-prayer-subtitle,
[data-theme="dark"] .lh-section-body .gda-prayer-text,
[data-theme="dark"] .lh-section-body .gda-hymn-line,
[data-theme="dark"] .lh-section-body .gda-doxology {
    color: #f3ead8;
}

[data-theme="dark"] .lh-reader-toolbar {
    border-bottom-color: rgba(255,255,255,.1);
}

[data-theme="dark"] .lh-font-tools,
[data-theme="dark"] .lh-reader-toolbar > button {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .lh-font-tools button {
    background: rgba(255,255,255,.08);
    color: #f5f7fb;
}

body.lh-reading-mode .lh-hero,
body.lh-reading-mode .lh-week-strip,
body.lh-reading-mode .lh-hours,
body.lh-reading-mode #app-header,
body.lh-reading-mode #app-nav,
body.lh-reading-mode .footer-quick-links {
    display: none !important;
}

body.lh-reading-mode .lh-page {
    max-width: 840px;
    padding-top: 16px;
}

body.lh-reading-mode .lh-layout {
    display: block;
}

body.lh-reading-mode .lh-reader {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

[data-theme="dark"] .lh-week-strip {
    background: rgba(24, 31, 48, .78);
    border-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .lh-week-arrow,
[data-theme="dark"] .lh-week-day,
[data-theme="dark"] .lh-hour-arrow {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #f5f7fb;
}

[data-theme="dark"] .lh-week-day:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
}

[data-theme="dark"] .lh-week-day.is-active {
    background: color-mix(in srgb, var(--color-primary, #7ecb82) 24%, rgba(255,255,255,.08));
    border-color: var(--color-primary, #7ecb82);
}

[data-theme="dark"] .lh-week-day.is-checking {
    background: rgba(255,255,255,.055);
    opacity: .56;
}
[data-theme="dark"] .lh-hero-description{color:#d0d0d0 !important;font-weight:400 !important;}
[data-theme="dark"] .lh-week-day.is-disabled {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.06);
    opacity: .3;
}

[data-theme="dark"] .lh-layout {
    color: #f7f3e9;
}

[data-theme="dark"] .lh-hour-tabs {
    background:
        linear-gradient(180deg, rgba(38, 45, 66, .96), rgba(14, 19, 34, .94)),
        radial-gradient(circle at 18% 0, color-mix(in srgb, var(--color-primary, #2e7d32) 22%, transparent), transparent 44%);
    border-color: rgba(255, 255, 255, .2);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(255, 255, 255, .045),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(0, 0, 0, .42);
}

[data-theme="dark"] .lh-hour-tab {
    color: rgba(245, 247, 251, .9);
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .045));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

[data-theme="dark"] .lh-hour-tab:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07));
    border-color: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

[data-theme="dark"] .lh-hour-tab.is-active {
    color: #fff;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #2e7d32) 74%, white 16%), color-mix(in srgb, var(--color-primary-dark, #1b5e20) 82%, black 8%));
    border-color: color-mix(in srgb, var(--color-primary, #2e7d32) 58%, rgba(255,255,255,.28));
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--color-primary, #2e7d32) 36%, transparent),
        0 0 0 1px color-mix(in srgb, var(--color-primary, #2e7d32) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

[data-theme="dark"] .lh-reader {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-primary, #2e7d32) 10%, transparent), transparent 34%),
        linear-gradient(180deg, #171613, #10100e);
    border-color: rgba(226, 214, 166, .24);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

[data-theme="dark"] .lh-section-body .lh-block,
[data-theme="dark"] .lh-section-body .lh-antiphon,
[data-theme="dark"] .lh-section-body .lh-prayer,
[data-theme="dark"] .lh-section-body .lh-response,
[data-theme="dark"] .lh-section-body .lh-stanza {
    color: rgba(250, 247, 239, .92);
}

[data-theme="dark"] .lh-section-body .lh-note,
[data-theme="dark"] .lh-section-body .lh-subtitle {
    color: rgba(235, 224, 199, .68);
}

[data-theme="dark"] .lh-source-note {
    color: rgba(235, 224, 199, .38);
}

[data-theme="dark"] .lh-section-body .lh-hour-title,
[data-theme="dark"] .lh-section-body .lh-section-title,
[data-theme="dark"] .lh-section-body .lh-antiphon strong,
[data-theme="dark"] .lh-section-body .lh-prayer strong,
[data-theme="dark"] .lh-section-body .lh-response strong,
[data-theme="dark"] .lh-section-body .lh-stanza strong {
    color: color-mix(in srgb, var(--color-primary, #81c784) 72%, #f9e7a5);
}

[data-theme="dark"] .lh-reader-toolbar {
    border-bottom-color: rgba(226, 214, 166, .16);
}

[data-theme="dark"] .lh-font-tools,
[data-theme="dark"] .lh-reader-toolbar > button {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .15);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="dark"] .lh-font-tools span {
    color: rgba(235, 239, 247, .72);
}

[data-theme="dark"] .lh-font-tools button,
[data-theme="dark"] .lh-reader-toolbar > button {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: #f8fafc;
}

[data-theme="dark"] .lh-font-tools button:hover,
[data-theme="dark"] .lh-reader-toolbar > button:hover {
    background: color-mix(in srgb, var(--color-primary, #2e7d32) 20%, rgba(255,255,255,.08));
    border-color: color-mix(in srgb, var(--color-primary, #2e7d32) 50%, rgba(255,255,255,.18));
}

[data-theme="dark"] .lh-reader-toolbar [data-lh-reading-mode] {
    color: color-mix(in srgb, var(--color-primary, #2e7d32) 62%, white);
}

[data-theme="dark"] .lh-reader-toolbar [data-lh-share] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #2e7d32) 88%, white 8%), color-mix(in srgb, var(--color-primary-dark, #1b5e20) 88%, black 8%));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-primary, #2e7d32) 30%, transparent);
}

[data-theme="dark"] .lh-date-title {
    color: #b9974d;
}

[data-theme="dark"] .lh-day-meta {
    border-bottom-color: rgba(190, 155, 72, .22);
}

.lh-autoscroll-control {
    position: fixed !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: 50dvh !important;
    z-index: 2147483000;
    display: grid;
    gap: 7px;
    transform: translate3d(0, -50%, 0);
    padding: 8px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #0055a5) 18%, rgba(255,255,255,.76));
    background: rgba(255,255,255,.9);
    box-shadow: 0 16px 36px rgba(15,23,42,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.lh-autoscroll-control button,
.lh-autoscroll-control span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-primary, #0055a5) 14%, transparent);
    background: color-mix(in srgb, var(--color-primary, #0055a5) 7%, white);
    color: var(--color-primary-dark, #003a75);
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}

.lh-autoscroll-control .lh-autoscroll-play {
    background: linear-gradient(145deg, var(--color-primary, #0055a5), var(--color-primary-dark, #003a75));
    color: #fff;
    border-color: transparent;
}

.lh-autoscroll-control.is-running {
    border-color: color-mix(in srgb, var(--color-primary, #0055a5) 38%, white);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--color-primary-dark, #003a75) 24%, transparent);
}

.lh-autoscroll-control span {
    height: 24px;
    background: transparent;
    border-color: transparent;
    color: #64748b;
    font-size: 11px;
    cursor: default;
}

[data-theme="dark"] .lh-autoscroll-control {
    background: rgba(24,31,48,.9);
    border-color: rgba(255,255,255,.12);
}

@media (max-width: 820px) {
    .lh-page {
        width: 100%;
        max-width: 100%;
        padding: 12px 12px 88px;
        overflow-x: hidden;
    }

    .lh-hero {
        grid-template-columns: 1fr;
        padding: 18px;
        margin-top: 0;
        border-radius: 20px;
    }

    .lh-hero h1 {
        font-size: 30px;
    }

    .lh-hero-description {
        font-size: 14px;
    }

    .lh-date-card {
        min-width: 0;
        width: 100%;
    }

    .lh-layout {
        grid-template-columns: 1fr;
    }

    .lh-hours {
        position: static;
    }

    .lh-hour-strip {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
        align-items: center;
        padding: 6px;
        border-radius: 14px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(218,226,238,.9);
    }

    .lh-hour-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--color-primary, #0055a5);
        font-size: 24px;
        font-weight: 950;
        box-shadow: 0 8px 18px rgba(20,40,80,.08);
    }

    .lh-hour-tabs {
        display: flex;
        overflow-x: auto;
        padding: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border: 0;
        background: transparent;
        border-radius: 0;
    }

    .lh-hour-tabs::-webkit-scrollbar {
        display: none;
    }

    .lh-hour-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 118px;
        max-width: 152px;
        min-height: 48px;
        padding: 10px 14px;
        text-align: center;
        scroll-snap-align: start;
        font-size: 13px;
        white-space: nowrap;
    }

    [data-theme="dark"] .lh-hour-strip {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 7px;
        padding: 7px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(34, 40, 61, .96), rgba(12, 17, 31, .92)),
            radial-gradient(circle at 50% 0, color-mix(in srgb, var(--color-primary, #2e7d32) 18%, transparent), transparent 62%);
        border: 1px solid rgba(255,255,255,.2);
        box-shadow:
            0 16px 38px rgba(0,0,0,.4),
            0 0 0 1px rgba(255,255,255,.045),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 -1px 0 rgba(0,0,0,.42);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    [data-theme="dark"] .lh-hour-arrow {
        width: 38px;
        height: 44px;
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
        color: color-mix(in srgb, var(--color-primary, #2e7d32) 54%, white);
        border: 1px solid rgba(255,255,255,.18);
        box-shadow:
            0 8px 16px rgba(0,0,0,.24),
            inset 0 1px 0 rgba(255,255,255,.12);
    }

    [data-theme="dark"] .lh-hour-tabs {
        gap: 6px;
        padding: 2px;
        border-radius: 14px;
        background: rgba(255,255,255,.075);
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    [data-theme="dark"] .lh-hour-tab {
        min-height: 42px;
        min-width: 112px;
        max-width: 150px;
        border-radius: 12px;
        color: rgba(241,245,249,.92);
        font-size: 12px;
        font-weight: 850;
        background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
        border: 1px solid rgba(255,255,255,.13);
        box-shadow:
            0 7px 14px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.08);
    }

    [data-theme="dark"] .lh-hour-tab.is-active {
        color: #fff;
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #2e7d32) 72%, white 12%), color-mix(in srgb, var(--color-primary-dark, #1b5e20) 76%, black 10%));
        border-color: color-mix(in srgb, var(--color-primary, #2e7d32) 58%, rgba(255,255,255,.24));
        box-shadow:
            0 12px 24px color-mix(in srgb, var(--color-primary, #2e7d32) 34%, transparent),
            0 0 0 1px color-mix(in srgb, var(--color-primary, #2e7d32) 18%, transparent),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .lh-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .lh-day-link {
        min-height: 48px;
        padding: 0 8px;
        font-size: 13px;
    }

    .lh-week-strip {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 4px;
        margin-bottom: 12px;
        padding: 6px;
        border-radius: 14px;
        overflow: hidden;
    }

    .lh-week-days {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
        overflow: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lh-week-days::-webkit-scrollbar {
        display: none;
    }

    .lh-week-arrow {
        width: 34px;
        height: 48px;
        font-size: 24px;
    }

    .lh-week-day {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 0 2px;
    }

    .lh-week-day strong {
        font-size: 17px;
    }

    .lh-week-day span {
        font-size: 8.5px;
    }

    .lh-week-day em {
        font-size: 6px;
    }

    .lh-reader {
        padding: 18px 16px;
        border-radius: 18px;
        min-height: 480px;
    }

    .lh-day-meta h2 {
        font-size: 28px;
    }

    .lh-section-body {
        font-size: var(--lh-reader-font, 18px);
        line-height: 1.72;
        font-weight: 720;
    }

    .lh-reader-toolbar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        overflow: visible;
        flex-wrap: nowrap;
        scrollbar-width: auto;
        margin-left: -2px;
        margin-right: -2px;
    }

    .lh-reader-toolbar::-webkit-scrollbar {
        display: none;
    }

    .lh-font-tools {
        min-width: 0;
        justify-content: space-between;
        flex: 1 1 auto;
        max-width: none;
    }

    .lh-font-tools {
        padding-left: 9px;
    }

    .lh-font-tools span {
        font-size: 12px;
    }

    .lh-font-tools button,
    .lh-reader-toolbar > button {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .lh-reader-toolbar > button {
        padding: 0 12px;
    }

    .lh-reader-toolbar [data-lh-reading-mode] {
        flex: 0 1 auto;
    }

    .lh-reader-toolbar [data-lh-share] {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        padding: 0;
        font-size: 17px;
    }

    .lh-reader-toolbar .lh-share-icon svg {
        width: 16px;
        height: 16px;
    }

    .lh-section-body .pre {
        min-width: 0;
        margin-right: 10px;
    }

    .lh-autoscroll-control {
        right: max(8px, env(safe-area-inset-right)) !important;
        padding: 7px 5px;
    }

    .lh-autoscroll-control button,
    .lh-autoscroll-control span {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }
}