/*
 * Liquid Glass system
 * Loaded after the legacy theme layers so this file is the authoritative
 * material, interaction, contrast, and responsive pass.
 */

:root {
    --lg-page: #f4f6f9;
    --lg-page-deep: #e9edf3;
    --lg-content: rgba(252, 253, 255, 0.94);
    --lg-content-strong: #fcfdff;
    --lg-content-soft: rgba(246, 249, 253, 0.88);
    --lg-content-line: rgba(63, 77, 99, 0.12);
    --lg-content-line-strong: rgba(63, 77, 99, 0.18);
    --lg-ink: #151a23;
    --lg-muted: #606b7d;
    --lg-faint: #8993a3;
    --lg-accent: #426996;
    --lg-accent-soft: rgba(66, 105, 150, 0.12);
    --lg-control-top: rgba(255, 255, 255, 0.74);
    --lg-control-bottom: rgba(239, 244, 251, 0.48);
    --lg-panel-top: rgba(255, 255, 255, 0.88);
    --lg-panel-bottom: rgba(241, 246, 253, 0.72);
    --lg-edge-high: rgba(255, 255, 255, 0.98);
    --lg-edge-mid: rgba(255, 255, 255, 0.34);
    --lg-edge-low: rgba(79, 95, 121, 0.22);
    --lg-lens: rgba(255, 255, 255, 0.72);
    --lg-lens-soft: rgba(255, 255, 255, 0.18);
    --lg-control-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(50, 68, 96, 0.08),
        0 1px 2px rgba(28, 39, 57, 0.08),
        0 10px 28px rgba(37, 51, 75, 0.11);
    --lg-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(49, 66, 92, 0.09),
        0 2px 4px rgba(24, 35, 51, 0.07),
        0 24px 64px rgba(33, 47, 70, 0.16);
    --lg-content-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(35, 47, 66, 0.04),
        0 14px 38px rgba(35, 48, 70, 0.07);
    --lg-control-blur: 18px;
    --lg-panel-blur: 28px;
    --lg-saturation: 155%;
    --lg-radius-control: 999px;
    --lg-radius-panel: 24px;
    --lg-radius-content: 22px;
    --lg-pointer-x: 50%;
    --lg-pointer-y: 10%;
    --lg-theme-duration: 360ms;
    --lg-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
    --lg-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] {
    --lg-page: #0c1118;
    --lg-page-deep: #111822;
    --lg-content: rgba(20, 27, 38, 0.94);
    --lg-content-strong: #141b26;
    --lg-content-soft: rgba(25, 33, 45, 0.9);
    --lg-content-line: rgba(199, 211, 229, 0.12);
    --lg-content-line-strong: rgba(199, 211, 229, 0.2);
    --lg-ink: #eef2f8;
    --lg-muted: #b3bdcb;
    --lg-faint: #8792a3;
    --lg-accent: #a9c5e6;
    --lg-accent-soft: rgba(145, 181, 220, 0.15);
    --lg-control-top: rgba(38, 48, 63, 0.76);
    --lg-control-bottom: rgba(18, 25, 36, 0.58);
    --lg-panel-top: rgba(35, 44, 58, 0.9);
    --lg-panel-bottom: rgba(17, 24, 34, 0.84);
    --lg-edge-high: rgba(255, 255, 255, 0.2);
    --lg-edge-mid: rgba(255, 255, 255, 0.07);
    --lg-edge-low: rgba(0, 0, 0, 0.38);
    --lg-lens: rgba(218, 231, 248, 0.22);
    --lg-lens-soft: rgba(203, 221, 244, 0.07);
    --lg-control-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24),
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 12px 32px rgba(0, 0, 0, 0.3);
    --lg-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.22),
        0 28px 72px rgba(0, 0, 0, 0.42);
    --lg-content-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.16),
        0 16px 42px rgba(0, 0, 0, 0.2);
}

html {
    background: var(--lg-page) !important;
    scrollbar-gutter: stable;
}

body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-synthesis: none;
}

body:not(.home) {
    color: var(--lg-ink) !important;
    background:
        linear-gradient(128deg, rgba(218, 226, 238, 0.42), transparent 42%),
        linear-gradient(232deg, rgba(230, 221, 226, 0.28), transparent 46%),
        linear-gradient(180deg, var(--lg-page) 0%, var(--lg-page-deep) 100%) !important;
}

html[data-theme="dark"] body:not(.home) {
    background:
        linear-gradient(132deg, rgba(60, 76, 99, 0.13), transparent 42%),
        linear-gradient(228deg, rgba(79, 64, 76, 0.08), transparent 44%),
        linear-gradient(180deg, var(--lg-page) 0%, var(--lg-page-deep) 100%) !important;
}

body::before,
body::after,
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
    display: none !important;
}

.page-hero h1,
.home-film-copy h1,
.article h1,
.note-card h2,
.note-card h3,
.home-story h3 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "PingFang SC", sans-serif !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

body:not(.home) :where(.page-hero h1, .tarot-hero-copy h1, .notes-hero h1),
html[data-theme="dark"] body:not(.home) :where(.page-hero h1, .tarot-hero-copy h1, .notes-hero h1) {
    color: var(--lg-ink) !important;
    -webkit-text-fill-color: var(--lg-ink) !important;
    text-shadow: none !important;
}

/* Floating navigation layer and adaptive scroll edge. */
.site-header {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-height: 70px;
    padding: max(13px, env(safe-area-inset-top)) clamp(16px, 2.7vw, 38px) 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate;
    pointer-events: none;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px 0 -24px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246, 249, 253, 0.78) 0%, rgba(246, 249, 253, 0.35) 56%, transparent 100%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    transition: opacity 260ms var(--lg-ease);
}

html[data-theme="dark"] .site-header::before {
    background: linear-gradient(180deg, rgba(12, 17, 24, 0.82) 0%, rgba(12, 17, 24, 0.4) 56%, transparent 100%);
}

html.has-scrolled .site-header::before {
    opacity: 1;
}

.site-header > * {
    pointer-events: auto;
}

.brand {
    position: relative !important;
    z-index: 1;
    color: var(--lg-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
    transition: color 220ms var(--lg-ease), opacity 220ms var(--lg-ease) !important;
}

body.home .brand {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28) !important;
}

html.has-scrolled body.home .brand {
    color: var(--lg-ink) !important;
    text-shadow: none !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Regular Liquid Glass: compact controls that float over content. */
:where(
    .theme-toggle,
    .lang-toggle,
    .site-dock-toggle,
    .site-dock-menu,
    .lang-menu-list,
    .article-translate-toggle,
    .article-translate-list,
    .music-capsule-toggle,
    .music-capsule-panel,
    .tarot-history-clear,
    .tarot-history-more-toggle
) {
    --lg-pointer-x: 50%;
    --lg-pointer-y: 8%;
    position: relative;
    isolation: isolate;
    border: 1px solid transparent !important;
    background:
        radial-gradient(110px circle at var(--lg-pointer-x) var(--lg-pointer-y), var(--lg-lens), var(--lg-lens-soft) 36%, transparent 72%) padding-box,
        linear-gradient(155deg, var(--lg-control-top), var(--lg-control-bottom)) padding-box,
        linear-gradient(145deg, var(--lg-edge-high), var(--lg-edge-mid) 48%, var(--lg-edge-low)) border-box !important;
    box-shadow: var(--lg-control-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lg-control-blur)) saturate(var(--lg-saturation)) contrast(1.04) !important;
    backdrop-filter: blur(var(--lg-control-blur)) saturate(var(--lg-saturation)) contrast(1.04) !important;
    transform: translate3d(0, 0, 0);
    transition:
        transform 180ms var(--lg-spring),
        box-shadow 240ms var(--lg-ease),
        border-color 240ms var(--lg-ease),
        opacity 200ms var(--lg-ease) !important;
}

:where(.site-dock-menu, .lang-menu-list, .article-translate-list, .music-capsule-panel) {
    background:
        radial-gradient(220px circle at var(--lg-pointer-x) var(--lg-pointer-y), var(--lg-lens), var(--lg-lens-soft) 35%, transparent 74%) padding-box,
        linear-gradient(155deg, var(--lg-panel-top), var(--lg-panel-bottom)) padding-box,
        linear-gradient(145deg, var(--lg-edge-high), var(--lg-edge-mid) 44%, var(--lg-edge-low)) border-box !important;
    box-shadow: var(--lg-panel-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lg-panel-blur)) saturate(165%) contrast(1.045) !important;
    backdrop-filter: blur(var(--lg-panel-blur)) saturate(165%) contrast(1.045) !important;
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .theme-toggle,
        .lang-toggle,
        .site-dock-toggle,
        .article-translate-toggle,
        .music-capsule-toggle,
        .tarot-history-clear,
        .tarot-history-more-toggle
    ):hover {
        transform: translate3d(0, -1px, 0) scale(1.015) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            inset 0 -1px 0 rgba(50, 68, 96, 0.07),
            0 2px 4px rgba(28, 39, 57, 0.08),
            0 16px 38px rgba(37, 51, 75, 0.16) !important;
    }
}

:where(
    .theme-toggle,
    .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle,
    .tarot-history-clear,
    .tarot-history-more-toggle
):active,
:where(
    .theme-toggle,
    .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle,
    .tarot-history-clear,
    .tarot-history-more-toggle
).is-liquid-pressed {
    transform: translate3d(0, 1px, 0) scale(0.965) !important;
    box-shadow:
        inset 0 2px 5px rgba(34, 47, 67, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.58),
        0 5px 14px rgba(31, 45, 66, 0.1) !important;
    transition-duration: 90ms !important;
}

:where(button, a, summary, input, select, textarea):focus-visible {
    outline: 3px solid rgba(73, 122, 181, 0.34) !important;
    outline-offset: 3px !important;
}

/* Compact, single-button appearance control. */
.theme-toggle,
.header-actions .theme-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: var(--lg-ink) !important;
}

.theme-toggle-track,
.header-actions .theme-toggle-track {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.theme-toggle-track::before,
.theme-toggle-track::after,
.header-actions .theme-toggle-track::before,
.header-actions .theme-toggle-track::after {
    display: none !important;
}

.theme-toggle__around,
.header-actions .theme-toggle__around {
    position: absolute !important;
    inset: 11px !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    color: #d99719 !important;
    fill: currentColor !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 5px rgba(121, 79, 10, 0.19)) !important;
    transform: rotate(0deg) scale(1) !important;
    transition: opacity 260ms var(--lg-ease), transform 360ms var(--lg-spring), color 260ms ease !important;
}

.theme-toggle__around *,
.header-actions .theme-toggle__around * {
    transition: none !important;
}

.theme-toggle-moon {
    position: absolute !important;
    inset: 9px !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    opacity: 0 !important;
    transform: rotate(-38deg) scale(0.72) !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28)) !important;
    transition: opacity 260ms var(--lg-ease), transform 380ms var(--lg-spring) !important;
}

.theme-toggle-moon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.theme-toggle-moon-earthshine {
    fill: #687384 !important;
}

.theme-toggle-moon-lit {
    fill: #d9d2bd !important;
}

.theme-toggle-moon-craters {
    fill: rgba(70, 78, 91, 0.34) !important;
}

.theme-toggle-moon-edge {
    fill: none !important;
    stroke: rgba(255, 255, 255, 0.28) !important;
    stroke-width: 0.7 !important;
}

html[data-theme="dark"] .theme-toggle__around,
html[data-theme="dark"] .header-actions .theme-toggle__around {
    opacity: 0 !important;
    transform: rotate(112deg) scale(0.58) !important;
}

html[data-theme="dark"] .theme-toggle-moon {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

.theme-toggle.is-clicking {
    animation: lg-control-flex 300ms var(--lg-spring) both !important;
}

@keyframes lg-control-flex {
    0% { transform: scale(1); }
    38% { transform: scale(0.91, 0.95); }
    72% { transform: scale(1.035, 0.99); }
    100% { transform: scale(1); }
}

/* Language and article translation menus morph from their controls. */
.lang-toggle {
    min-width: 106px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    gap: 7px !important;
    border-radius: var(--lg-radius-control) !important;
    color: var(--lg-ink) !important;
}

.lang-toggle .ui-icon,
.lang-caret,
.article-translate-toggle .ui-icon {
    flex: 0 0 auto;
}

.lang-caret {
    transition: transform 220ms var(--lg-spring) !important;
}

.lang-menu[open] .lang-caret {
    transform: rotate(180deg) !important;
}

.lang-menu-list,
.article-translate-list {
    padding: 7px !important;
    border-radius: 20px !important;
    color: var(--lg-ink) !important;
    max-height: min(64vh, 420px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    transform-origin: top right;
    animation: lg-panel-materialize 240ms var(--lg-spring) both;
}

.lang-option,
.article-translate-option {
    min-height: 40px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: var(--lg-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, transform 150ms var(--lg-ease) !important;
}

.lang-option:hover,
.article-translate-option:hover,
.lang-option.is-active,
.article-translate-option.is-active {
    background: var(--lg-accent-soft) !important;
    transform: none !important;
}

@keyframes lg-panel-materialize {
    from { opacity: 0; transform: translate3d(0, -7px, 0) scale(0.92); filter: saturate(0.88); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); }
}

/* Dock uses one glass group; individual links remain quiet content. */
.site-dock {
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: clamp(12px, 1.5vw, 20px) !important;
    width: 48px !important;
    height: 48px !important;
    transform: translateY(-50%) !important;
    z-index: 980 !important;
}

.site-dock-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--lg-ink) !important;
}

.site-dock-menu {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: 150px !important;
    min-height: 150px !important;
    width: 176px !important;
    padding: 7px !important;
    gap: 3px !important;
    border-radius: 23px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(58px, -50%, 0) scale(0.9) !important;
    transform-origin: left center !important;
    transition: opacity 180ms ease, transform 260ms var(--lg-spring), visibility 0s linear 260ms !important;
}

.site-dock.is-open .site-dock-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(62px, -50%, 0) scale(1) !important;
    transition-delay: 0s !important;
}

.site-dock-link,
.site-dock.is-open .site-dock-link {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 11px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: var(--lg-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: background-color 160ms ease, color 160ms ease !important;
}

.site-dock-link:hover,
.site-dock-link.is-current {
    color: var(--lg-ink) !important;
    background: var(--lg-accent-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

.site-dock-link .site-dock-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--lg-accent) !important;
}

.site-dock-link span {
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Each dock is one piece of glass; its links stay on the content layer. */
.site-dock-link,
.site-dock-link:hover,
.site-dock-link:focus-visible,
.site-dock-link.is-current {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Clear glass, only above the media-rich home hero. */
.home-scroll-cue,
.home-video-toggle {
    --lg-pointer-x: 50%;
    --lg-pointer-y: 5%;
    position: absolute !important;
    isolation: isolate;
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: var(--lg-radius-control) !important;
    color: #fff !important;
    background:
        radial-gradient(100px circle at var(--lg-pointer-x) var(--lg-pointer-y), rgba(255, 255, 255, 0.32), transparent 68%) padding-box,
        linear-gradient(150deg, rgba(255, 255, 255, 0.18), rgba(14, 22, 34, 0.24)) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.13) 52%, rgba(0, 0, 0, 0.24)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.43),
        inset 0 -1px 0 rgba(0, 0, 0, 0.17),
        0 8px 24px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(148%) brightness(0.86) !important;
    backdrop-filter: blur(12px) saturate(148%) brightness(0.86) !important;
    transition: transform 180ms var(--lg-spring), box-shadow 220ms var(--lg-ease) !important;
}

.home-video-toggle::before {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .home-scroll-cue:hover,
    .home-video-toggle:hover {
        transform: translate3d(0, -1px, 0) scale(1.015) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.54),
            inset 0 -1px 0 rgba(0, 0, 0, 0.14),
            0 12px 30px rgba(0, 0, 0, 0.27) !important;
    }
}

.home-film,
.article-video-feature video {
    transform: scale(1.015) !important;
    will-change: opacity;
}

.home-film-hero.is-video-paused .home-film,
.article-video-feature.is-video-paused video {
    will-change: auto;
}

/* Content layer: standard material, never glass-on-glass. */
:where(
    .glass-card,
    .note-card,
    .article,
    .tarot-form,
    .tarot-table,
    .reading-box,
    .comment-card,
    .comment-form-wrap-v4,
    .comments-compose-panel,
    .ai-chat-panel
) {
    border: 1px solid var(--lg-content-line) !important;
    border-radius: var(--lg-radius-content) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content) !important;
    background-image: none !important;
    box-shadow: var(--lg-content-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

/* Legacy selectors were more specific than :where(); keep content opaque. */
.glass-card,
.note-card,
.article,
.tarot-form,
.tarot-table,
.reading-box,
.comment-card,
.comment-form-wrap-v4,
.comments-compose-panel,
.ai-chat-panel {
    border: 1px solid var(--lg-content-line) !important;
    border-radius: var(--lg-radius-content) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content) !important;
    background-image: none !important;
    box-shadow: var(--lg-content-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

html[data-theme="dark"] :where(
    .glass-card,
    .note-card,
    .article,
    .tarot-form,
    .tarot-table,
    .reading-box,
    .comment-card,
    .comment-form-wrap-v4,
    .comments-compose-panel,
    .ai-chat-panel
) {
    border-color: var(--lg-content-line) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content) !important;
    background-image: none !important;
    box-shadow: var(--lg-content-shadow) !important;
}

html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .note-card,
html[data-theme="dark"] .article,
html[data-theme="dark"] .tarot-form,
html[data-theme="dark"] .tarot-table,
html[data-theme="dark"] .reading-box,
html[data-theme="dark"] .comment-card,
html[data-theme="dark"] .comment-form-wrap-v4,
html[data-theme="dark"] .comments-compose-panel,
html[data-theme="dark"] .ai-chat-panel {
    background: var(--lg-content) !important;
    background-image: none !important;
}

:where(
    .glass-card,
    .note-card,
    .article,
    .tarot-form,
    .tarot-table,
    .reading-box,
    .comment-card,
    .comment-form-wrap-v4,
    .comments-compose-panel,
    .ai-chat-panel
)::before,
:where(
    .glass-card,
    .note-card,
    .article,
    .tarot-form,
    .tarot-table,
    .reading-box,
    .comment-card,
    .comment-form-wrap-v4,
    .comments-compose-panel,
    .ai-chat-panel
)::after {
    display: none !important;
}

.glass-card:hover,
.note-card:hover,
.comment-card:hover {
    box-shadow: var(--lg-content-shadow) !important;
}

@media (hover: hover) and (pointer: fine) {
    .note-card:hover {
        border-color: var(--lg-content-line-strong) !important;
        transform: translate3d(0, -3px, 0) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 2px 5px rgba(32, 45, 65, 0.05),
            0 20px 46px rgba(35, 48, 70, 0.11) !important;
    }
}

.page-hero p,
.note-card p,
.article-meta-row,
.article-content,
.comments-topbar p,
.tarot-hero-copy p,
.tarot-selection-copy,
.tarot-form-helper,
.music-note {
    color: var(--lg-muted) !important;
}

.hero-kicker,
.section-kicker,
.article-kicker,
.note-card-date,
.content-origin-note {
    border-color: var(--lg-content-line) !important;
    color: var(--lg-muted) !important;
    background: var(--lg-content-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.tarot-stage,
.page-hero,
.notes-page-grid,
.comments-shell {
    background-image: none !important;
}

.tarot-layout {
    align-items: start !important;
    grid-template-columns: minmax(280px, 350px) minmax(0, 1fr) !important;
    gap: clamp(16px, 2.3vw, 28px) !important;
}

.tarot-form {
    position: sticky !important;
    top: 92px !important;
    padding: clamp(18px, 2vw, 24px) !important;
}

.tarot-form textarea,
.tarot-form select,
.comment-form textarea,
.ai-chat-compose,
.music-search input {
    border: 1px solid var(--lg-content-line) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content-strong) !important;
    box-shadow: inset 0 1px 2px rgba(28, 39, 57, 0.045) !important;
}

.tarot-form textarea::placeholder,
.comment-form textarea::placeholder,
.ai-chat-compose textarea::placeholder,
.music-search input::placeholder {
    color: var(--lg-faint) !important;
    opacity: 1 !important;
}

.tarot-table {
    min-width: 0 !important;
    min-height: 520px !important;
    overflow: clip !important;
}

.tarot-table::before,
.tarot-table::after,
.tarot-table-wrap::before,
.tarot-deck-fan::after {
    display: none !important;
}

.tarot-deck-fan {
    max-width: 100% !important;
    overflow: visible !important;
}

.spread-slot {
    border-color: var(--lg-content-line) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

.button.primary,
.music-search-button,
.ai-chat-send {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f7f9fc !important;
    background:
        radial-gradient(110px circle at var(--lg-pointer-x, 50%) var(--lg-pointer-y, 0%), rgba(255, 255, 255, 0.2), transparent 72%),
        linear-gradient(155deg, rgba(66, 83, 111, 0.96), rgba(32, 43, 61, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 24px rgba(23, 34, 50, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.button.secondary {
    border-color: var(--lg-content-line) !important;
    color: var(--lg-ink) !important;
    background: var(--lg-content-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tarot-history,
.tarot-history-item,
.tarot-history-entry,
.tarot-history-item:hover,
.tarot-history-item:focus-within {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tarot-history-entry {
    border: 0 !important;
    border-top: 1px solid var(--lg-content-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tarot-history {
    border: 0 !important;
    border-top: 1px solid var(--lg-content-line) !important;
}

.tarot-history-item {
    border: 0 !important;
    border-top: 1px solid var(--lg-content-line) !important;
}

.tarot-history-clear,
.tarot-history-more-toggle {
    border: 0 !important;
    color: var(--lg-accent) !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tarot-history :where(h2, h3, strong),
.comment-form :where(label, legend),
.comments-shell :where(h2, h3, strong) {
    color: var(--lg-ink) !important;
    -webkit-text-fill-color: var(--lg-ink) !important;
}

html[data-theme="dark"] :where(
    .tarot-history h2,
    .tarot-history h3,
    .comments-shell h2,
    .comments-shell h3,
    .comment-form label,
    .comment-form legend
) {
    color: var(--lg-ink) !important;
    -webkit-text-fill-color: var(--lg-ink) !important;
}

.comments-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    gap: clamp(20px, 3vw, 38px) !important;
}

.comments-compose-panel,
.comment-form-wrap-v4 {
    background: var(--lg-content) !important;
}

.comment-card {
    padding: 16px 18px !important;
    border-radius: 17px !important;
}

/* Music remains compact and never lets its icon overlap artwork or copy. */
.music-capsule {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    z-index: 970 !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
}

.music-capsule-toggle {
    display: flex !important;
    align-items: center !important;
    width: min(248px, calc(100vw - 36px)) !important;
    min-height: 58px !important;
    padding: 7px 10px 7px 8px !important;
    gap: 10px !important;
    overflow: hidden !important;
    border-radius: 29px !important;
    color: var(--lg-ink) !important;
}

.music-capsule-art {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background-color: var(--lg-accent-soft) !important;
    background-position: center !important;
    background-size: cover !important;
}

.music-capsule-art .music-icon {
    position: absolute !important;
    inset: 12px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--lg-accent) !important;
}

.music-capsule-art.has-artwork .music-icon {
    opacity: 0 !important;
}

.music-capsule-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.music-capsule-copy strong,
.music-capsule-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.music-capsule-action {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
}

.music-capsule-panel {
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    left: auto !important;
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: min(68vh, 590px) !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: var(--lg-radius-panel) !important;
    color: var(--lg-ink) !important;
    overscroll-behavior: contain;
    animation: lg-panel-materialize 260ms var(--lg-spring) both;
}

.music-native-audio {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Rendering wins: defer below-fold repeated content without changing layout. */
@supports (content-visibility: auto) {
    .home-story,
    .note-card,
    .comment-card,
    .tarot-history-group {
        content-visibility: auto;
        contain-intrinsic-size: auto 260px;
    }
}

/* Theme snapshots crossfade on the compositor instead of repainting every rule per frame. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--lg-theme-duration);
    animation-timing-function: var(--lg-ease);
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation-name: lg-theme-out;
}

::view-transition-new(root) {
    animation-name: lg-theme-in;
}

@keyframes lg-theme-out {
    from { opacity: 1; filter: brightness(1); }
    to { opacity: 0; filter: brightness(0.96); }
}

@keyframes lg-theme-in {
    from { opacity: 0; filter: brightness(1.025); }
    to { opacity: 1; filter: brightness(1); }
}

/* A graceful fallback for older engines and lower-power devices. */
html.lg-lite {
    --lg-control-blur: 10px;
    --lg-panel-blur: 15px;
    --lg-saturation: 125%;
}

html.lg-lite .site-header::before {
    -webkit-backdrop-filter: blur(9px) saturate(118%);
    backdrop-filter: blur(9px) saturate(118%);
}

html.lg-lite .glass-card,
html.lg-lite .music-capsule-panel,
html.lg-lite .site-dock-menu,
html.lg-lite .tarot-history {
    -webkit-backdrop-filter: blur(8px) saturate(116%) !important;
    backdrop-filter: blur(8px) saturate(116%) !important;
}

html.lg-lite .motion-reveal {
    transition-duration: 180ms !important;
}

.home-story:nth-of-type(n + 4),
.notes-grid .note-card:nth-child(n + 5),
.tarot-history-item:nth-child(n + 4) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 240px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :where(
        .theme-toggle,
        .lang-toggle,
        .site-dock-toggle,
        .site-dock-menu,
        .lang-menu-list,
        .article-translate-toggle,
        .article-translate-list,
        .music-capsule-toggle,
        .music-capsule-panel,
        .home-scroll-cue,
        .home-video-toggle
    ) {
        background: var(--lg-content-strong) !important;
    }

    body.home :where(.home-scroll-cue, .home-video-toggle) {
        color: #fff !important;
        background: rgba(15, 22, 33, 0.78) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :where(
        .theme-toggle,
        .lang-toggle,
        .site-dock-toggle,
        .site-dock-menu,
        .lang-menu-list,
        .article-translate-toggle,
        .article-translate-list,
        .music-capsule-toggle,
        .music-capsule-panel
    ) {
        background: var(--lg-content-strong) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 900px) {
    .tarot-layout {
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .comments-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 310px) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --lg-control-blur: 14px;
        --lg-panel-blur: 20px;
        --lg-radius-content: 19px;
        --lg-radius-panel: 21px;
    }

    .site-header {
        min-height: 62px !important;
        padding: max(9px, env(safe-area-inset-top)) 10px 8px !important;
    }

    .site-header::before {
        bottom: -18px !important;
    }

    .brand {
        max-width: calc(100vw - 174px);
        overflow: hidden;
        font-size: 0.78rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        gap: 6px !important;
    }

    .theme-toggle,
    .header-actions .theme-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .theme-toggle__around,
    .header-actions .theme-toggle__around {
        inset: 10px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .theme-toggle-moon {
        inset: 8px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .lang-toggle {
        min-width: 96px !important;
        min-height: 40px !important;
        padding: 0 11px !important;
        font-size: 0.84rem !important;
    }

    .lang-menu-list {
        right: 0 !important;
        width: min(190px, calc(100vw - 20px)) !important;
    }

    .site-dock {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        transform: none !important;
    }

    .site-dock-toggle {
        width: 48px !important;
        height: 48px !important;
    }

    .site-dock-menu {
        top: auto !important;
        bottom: calc(100% + 9px) !important;
        left: 0 !important;
        width: min(190px, calc(100vw - 24px)) !important;
        transform: translate3d(0, 9px, 0) scale(0.91) !important;
        transform-origin: left bottom !important;
    }

    .site-dock.is-open .site-dock-menu {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    .page-hero h1,
    .tarot-hero-copy h1 {
        max-width: 100% !important;
        font-size: clamp(2.25rem, 13vw, 3.5rem) !important;
        line-height: 0.98 !important;
        overflow-wrap: anywhere;
    }

    .tarot-layout,
    .comments-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .tarot-form {
        position: relative !important;
        top: auto !important;
        padding: 16px !important;
    }

    .tarot-table {
        min-height: 0 !important;
        padding: 14px 10px 5px !important;
        overflow: clip !important;
    }

    .tarot-deck-fan {
        min-height: clamp(24rem, 128vw, 31rem) !important;
    }

    .tarot-deck-fan :is(.deck-card, .tarot-card),
    .tarot-cards .tarot-card {
        contain: layout paint;
    }

    html.lg-lite .tarot-deck-fan :is(.deck-card, .deck-card-inner),
    html.lg-lite .tarot-cards :is(.tarot-card, .tarot-card-inner) {
        will-change: auto !important;
        filter: none !important;
    }

    .comments-compose-panel {
        position: static !important;
    }

    .music-capsule {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        max-width: calc(100vw - 84px) !important;
    }

    .music-capsule-toggle {
        width: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        padding: 6px !important;
    }

    .music-capsule.has-track .music-capsule-toggle,
    .music-capsule.is-open .music-capsule-toggle {
        width: min(230px, calc(100vw - 84px)) !important;
    }

    .music-capsule:not(.has-track):not(.is-open) .music-capsule-copy,
    .music-capsule:not(.has-track):not(.is-open) .music-capsule-action {
        display: none !important;
    }

    .music-capsule-panel {
        position: fixed !important;
        right: 12px !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        width: auto !important;
        max-height: min(70vh, 560px) !important;
    }

    .home-film,
    .article-video-feature video {
        transform: scale(1.01) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .motion-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Apple-aligned optical pass: glass is a floating control material, not a card fill. */
:root {
    --lg-control-top: rgba(255, 255, 255, 0.46);
    --lg-control-bottom: rgba(232, 239, 248, 0.27);
    --lg-panel-top: rgba(255, 255, 255, 0.72);
    --lg-panel-bottom: rgba(235, 242, 250, 0.57);
    --lg-edge-high: rgba(255, 255, 255, 0.82);
    --lg-edge-mid: rgba(255, 255, 255, 0.22);
    --lg-edge-low: rgba(61, 75, 96, 0.16);
    --lg-lens: rgba(255, 255, 255, 0.44);
    --lg-lens-soft: rgba(255, 255, 255, 0.08);
    --lg-control-shadow:
        inset 0 0.75px 0 rgba(255, 255, 255, 0.66),
        inset 0 -0.75px 0 rgba(45, 59, 80, 0.07),
        0 1px 2px rgba(25, 37, 55, 0.07),
        0 8px 22px rgba(34, 48, 70, 0.09);
    --lg-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        inset 0 -1px 0 rgba(45, 59, 80, 0.08),
        0 2px 4px rgba(25, 37, 55, 0.07),
        0 20px 54px rgba(34, 48, 70, 0.13);
    --lg-control-blur: 22px;
    --lg-panel-blur: 30px;
    --lg-saturation: 132%;
}

html[data-theme="dark"] {
    --lg-control-top: rgba(47, 56, 69, 0.49);
    --lg-control-bottom: rgba(20, 27, 38, 0.31);
    --lg-panel-top: rgba(43, 52, 65, 0.71);
    --lg-panel-bottom: rgba(17, 24, 34, 0.62);
    --lg-edge-high: rgba(255, 255, 255, 0.18);
    --lg-edge-mid: rgba(255, 255, 255, 0.055);
    --lg-edge-low: rgba(0, 0, 0, 0.28);
    --lg-lens: rgba(215, 229, 247, 0.16);
    --lg-lens-soft: rgba(213, 228, 247, 0.035);
    --lg-control-shadow:
        inset 0 0.75px 0 rgba(255, 255, 255, 0.12),
        inset 0 -0.75px 0 rgba(0, 0, 0, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.19),
        0 10px 26px rgba(0, 0, 0, 0.23);
    --lg-panel-shadow:
        inset 0 0.75px 0 rgba(255, 255, 255, 0.1),
        inset 0 -0.75px 0 rgba(0, 0, 0, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 20px 54px rgba(0, 0, 0, 0.32);
}

html :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .site-dock-menu,
    .lang-menu-list,
    .article-translate-toggle,
    .article-translate-list,
    .music-capsule-toggle,
    .music-capsule-panel
) {
    background:
        radial-gradient(140px circle at var(--lg-pointer-x) var(--lg-pointer-y), var(--lg-lens) 0%, var(--lg-lens-soft) 34%, transparent 70%) padding-box,
        linear-gradient(155deg, var(--lg-control-top), var(--lg-control-bottom)) padding-box,
        linear-gradient(148deg, var(--lg-edge-high), var(--lg-edge-mid) 42%, transparent 63%, var(--lg-edge-low)) border-box !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: var(--lg-control-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lg-control-blur)) saturate(var(--lg-saturation)) !important;
    backdrop-filter: blur(var(--lg-control-blur)) saturate(var(--lg-saturation)) !important;
}

html :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
) {
    overflow: hidden;
}

html :is(.site-dock-menu, .lang-menu-list, .article-translate-list, .music-capsule-panel) {
    background:
        radial-gradient(230px circle at var(--lg-pointer-x) var(--lg-pointer-y), var(--lg-lens), var(--lg-lens-soft) 38%, transparent 73%) padding-box,
        linear-gradient(155deg, var(--lg-panel-top), var(--lg-panel-bottom)) padding-box,
        linear-gradient(148deg, var(--lg-edge-high), var(--lg-edge-mid) 43%, transparent 64%, var(--lg-edge-low)) border-box !important;
    box-shadow: var(--lg-panel-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lg-panel-blur)) saturate(138%) !important;
    backdrop-filter: blur(var(--lg-panel-blur)) saturate(138%) !important;
}

.lang-menu-list,
.article-translate-list,
.music-capsule-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.62;
    background:
        radial-gradient(80px circle at var(--lg-pointer-x) var(--lg-pointer-y), rgba(255, 255, 255, 0.42), transparent 62%),
        linear-gradient(112deg, rgba(255, 255, 255, 0.13), transparent 38% 70%, rgba(255, 255, 255, 0.08));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.035);
    transition: opacity 160ms ease, background-position 180ms var(--lg-ease);
}

html :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
) > * {
    position: relative;
    z-index: 1;
}

:where(
    .theme-toggle,
    .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
).is-liquid-pressed::after,
html :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
):active::after {
    opacity: 1;
    background:
        radial-gradient(110px circle at var(--lg-pointer-x) var(--lg-pointer-y), rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.16) 38%, transparent 70%);
}

html[data-theme="dark"] :is(
    .header-actions .theme-toggle,
    .header-actions .lang-toggle,
    .site-dock-toggle,
    .article-translate-toggle,
    .music-capsule-toggle
)::after {
    opacity: 0.48;
    background:
        radial-gradient(80px circle at var(--lg-pointer-x) var(--lg-pointer-y), rgba(205, 222, 244, 0.18), transparent 64%),
        linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 40% 72%, rgba(255, 255, 255, 0.025));
    box-shadow:
        inset 0 0.75px 0 rgba(255, 255, 255, 0.075),
        inset 0 -0.75px 0 rgba(0, 0, 0, 0.12);
}

/* Clear glass is reserved for controls floating over the home movie. */
.home-scroll-cue,
.home-video-toggle {
    overflow: hidden !important;
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background:
        radial-gradient(120px circle at var(--lg-pointer-x) var(--lg-pointer-y), rgba(255, 255, 255, 0.25), transparent 66%) padding-box,
        linear-gradient(155deg, rgba(255, 255, 255, 0.105), rgba(5, 12, 22, 0.14)) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1) 48%, rgba(0, 0, 0, 0.18)) border-box !important;
    box-shadow:
        inset 0 0.75px 0 rgba(255, 255, 255, 0.32),
        inset 0 -0.75px 0 rgba(0, 0, 0, 0.1),
        0 7px 20px rgba(0, 0, 0, 0.16) !important;
    -webkit-backdrop-filter: blur(16px) saturate(118%) brightness(0.82) !important;
    backdrop-filter: blur(16px) saturate(118%) brightness(0.82) !important;
}

.home-scroll-cue {
    transform: translateX(-50%) !important;
}

.home-scroll-cue:hover,
.home-scroll-cue:focus-visible {
    transform: translateX(-50%) !important;
}

.home-scroll-cue:active {
    transform: translateX(-50%) scale(0.975) !important;
}

.home-video-toggle,
.home-video-toggle:hover,
.home-video-toggle:focus-visible {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    transform: none !important;
}

.home-video-toggle:active {
    transform: scale(0.955) !important;
}

@media (min-width: 761px) {
    body.home .home-video-toggle {
        bottom: 6.25rem !important;
    }
}

.home-video-toggle::before,
.home-video-toggle span {
    display: none !important;
}

.home-video-toggle .video-toggle-icon {
    position: absolute !important;
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    color: currentColor !important;
    opacity: 0.86 !important;
    stroke-width: 1.45 !important;
    filter: none !important;
    transition: opacity 180ms ease, transform 240ms var(--lg-spring) !important;
}

.home-video-toggle .video-toggle-icon-play,
.home-film-hero.is-video-paused .video-toggle-icon-pause {
    opacity: 0 !important;
    transform: scale(0.72) rotate(-14deg) !important;
}

.home-film-hero.is-video-paused .video-toggle-icon-play {
    opacity: 0.9 !important;
    transform: scale(1) rotate(0deg) !important;
}

.home-scroll-cue .ui-icon {
    color: currentColor !important;
    opacity: 0.72 !important;
    stroke-width: 1.45 !important;
    filter: none !important;
}

/* Symbols should be quieter than the content, with selective tint only for primary meaning. */
.ui-icon,
img.ui-icon {
    stroke-width: 1.45 !important;
    opacity: 0.7 !important;
    filter: none !important;
}

.lang-toggle .ui-icon,
.article-translate-toggle .ui-icon,
.site-dock-toggle .ui-icon,
    .music-capsule-toggle .ui-icon {
    color: currentColor !important;
    opacity: 0.66 !important;
}

.site-dock-link .site-dock-icon,
.badge-icon,
.button-icon {
    color: var(--lg-accent) !important;
    color: color-mix(in srgb, var(--lg-accent) 76%, var(--lg-muted)) !important;
    opacity: 0.82 !important;
}

@media (max-width: 760px) {
    .home-scroll-cue,
    .home-scroll-cue:hover,
    .home-scroll-cue:focus-visible {
        transform: none !important;
    }

    .home-scroll-cue:active {
        transform: scale(0.975) !important;
    }

    .home-video-toggle,
    .home-video-toggle:hover,
    .home-video-toggle:focus-visible {
        width: 44px !important;
        min-width: 44px !important;
    }
}

@media (prefers-contrast: more) {
    html :is(.header-actions .theme-toggle, .header-actions .lang-toggle, .site-dock-toggle, .article-translate-toggle, .music-capsule-toggle) {
        border-color: currentColor !important;
    }

    .ui-icon,
    img.ui-icon {
        opacity: 1 !important;
    }
}