* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--theme-foreground);
    background: var(--theme-background);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Video and media improvements */
video {
    max-width: 100%;
    height: auto;
}

.media-thumb {
    position: relative;
    overflow: hidden;
}

.media-thumb video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, 0.05);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.media-card.video:hover .video-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.layout-body {
    min-height: 100vh;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 60%), var(--theme-background);
}

.layout-background {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem clamp(1.5rem, 3vw, 4rem);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.brand-icon {
    font-size: 1.6rem;
}

.brand-tag {
    font-size: 0.85rem;
    color: var(--theme-muted);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav a {
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    border-color: var(--theme-accent);
}

.site-nav .admin-link {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero {
    position: relative;
    min-height: clamp(18rem, 48vh, 28rem);
    margin: 2rem clamp(1.5rem, 3vw, 4rem);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(15, 23, 42, 0.95), rgba(15, 118, 110, 0.6));
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 5vw, 4rem);
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.6);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero[style*="background-image"]::after {
    background-image: inherit;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15, 23, 42, 0.85), rgba(15, 118, 110, 0.25));
}

.hero-content {
    position: relative;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1;
    width: 100%;
}

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.1;
    margin: 0;
}

.hero-lede {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    background: var(--theme-accent);
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(244, 63, 94, 0.4);
}

.site-main {
    flex: 1;
    padding: 0 clamp(1.5rem, 3vw, 4rem) 6rem;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.8rem;
    margin: 0;
}

.section-subtitle {
    margin: 0;
    color: var(--theme-muted);
}

.album-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.album-card {
    background: var(--theme-surface);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

.album-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-placeholder {
    font-size: 2.4rem;
    opacity: 0.6;
}

.album-info {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.album-name {
    margin: 0;
    font-size: 1.1rem;
}

.album-meta {
    color: var(--theme-muted);
    font-size: 0.85rem;
}

.album-link {
    margin-top: auto;
    align-self: flex-start;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.empty-state {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--theme-muted);
}

.empty-illustration {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.album-hero {
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(244, 63, 94, 0.12));
}

.album-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.album-pill {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--theme-muted);
}

.album-hero-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.album-hero-back {
    font-size: 0.9rem;
    color: var(--theme-accent-alt);
}

.media-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0 1rem;
    gap: 1rem;
}

.media-filters {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.filter-button {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.filter-button.is-active {
    background: var(--theme-accent);
    color: #fff;
}

.filter-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.filter-button.is-active:hover {
    background: var(--theme-accent);
}

.media-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.media-card {
    background: var(--theme-surface);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.media-card:focus {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

.media-thumb img,
.media-thumb video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.media-thumb video {
    background: rgba(255, 255, 255, 0.05);
}

.media-title {
    font-weight: 600;
}

.media-description {
    color: var(--theme-muted);
    font-size: 0.9rem;
}

.media-card figcaption {
    padding: 1rem;
}

.media-card.is-hidden {
    display: none;
}

.media-generic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

/* Lightbox improvements */
.media-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.media-lightbox.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    background: var(--theme-surface);
    border-radius: 24px;
    max-width: min(960px, 90vw);
    width: 100%;
    position: relative;
    padding: 2.5rem;
    display: grid;
    gap: 1.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-body img,
.lightbox-body video {
    width: 100%;
    border-radius: 18px;
    max-height: 70vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.lightbox-open {
    overflow: hidden;
}

.site-footer {
    margin-top: auto;
    padding: 2.5rem clamp(1.5rem, 3vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    font-weight: 700;
}

.footer-links {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--theme-muted);
}

/* Admin styles */
.admin-shell {
    padding: 3rem clamp(1.5rem, 3vw, 4rem);
}

.admin-card,
.admin-panel {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 22px;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

.admin-card-header h1 {
    margin: 0;
    font-size: 2rem;
}

.admin-card-header p {
    color: var(--theme-muted);
}

.admin-form,
.admin-inline-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.admin-form input,
.admin-form textarea,
.admin-inline-form input,
.admin-inline-form textarea,
.admin-inline-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
}

.admin-primary {
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    border: none;
    background: var(--theme-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.admin-secondary {
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font-weight: 600;
}

.danger {
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: none;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    cursor: pointer;
}

.admin-footnote {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--theme-muted);
}

.validation {
    color: #f87171;
    font-size: 0.85rem;
}

.admin-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 960px) {
    .admin-grid {
        grid-template-columns: 2fr 1.2fr;
        align-items: flex-start;
    }
}

.admin-panel-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.4rem;
}

.admin-alert {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin: 0.5rem 0 1.5rem;
    font-weight: 600;
}

.admin-alert.success {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}

.admin-alert.danger {
    background: rgba(248, 113, 113, 0.2);
    color: #fecaca;
}

.admin-album-list {
    display: grid;
    gap: 1rem;
}

.admin-album-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem 1.25rem;
    border-radius: 14px;
}

/* Themes were laid out one per row as long horizontal panels, because this grid never declared
   any columns. Match the dashboard's card grid so they read as cards like everywhere else. */
.theme-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.theme-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    /* Flex column + auto-margin on the action row keeps every Activate button on the same
       baseline even when descriptions run to different lengths. */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1.1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.theme-card.is-active {
    border: 1px solid var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25);
}

.theme-cover {
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* "Active" badge so the current theme is obvious at a glance in a grid of cards. */
.theme-card.is-active .theme-cover::after {
    content: '✓ Active';
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--theme-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.theme-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.theme-placeholder {
    font-size: 2rem;
    opacity: 0.6;
}

.theme-body {
    padding: 0 1.25rem;
    color: var(--theme-muted);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.theme-body h3 {
    margin: 0;
    color: var(--theme-foreground);
    font-size: 1.05rem;
}

.theme-body p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.4;
}

.theme-meta {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* margin-top:auto pins the button to the bottom of the card regardless of text length. */
.theme-actions {
    padding: 0 1.25rem;
    margin-top: auto;
}

.theme-actions button {
    width: 100%;
}

.manage-album .admin-panel {
    background: rgba(15, 23, 42, 0.78);
}

.manager-grid-items {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.manager-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: grab;
}

.manager-card.is-dragging {
    opacity: 0.6;
}

.manager-card-header {
    display: flex;
    gap: 0.75rem;
}

.manager-thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
}

.manager-thumb img,
.manager-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.manager-thumb video + .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 1rem;
}

.manager-card-title h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.metadata-form {
    display: grid;
    gap: 0.75rem;
}

.metadata-form label {
    display: grid;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--theme-muted);
}

.metadata-form input,
.metadata-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
}

.metadata-form textarea {
    min-height: 80px;
    resize: vertical;
}

.metadata-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metadata-form.saved {
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.inline-delete {
    margin-top: 0.5rem;
}

.album-drop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.album-drop {
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed transparent;
}

.album-drop.is-hovered {
    border-color: var(--theme-accent);
    background: rgba(244, 63, 94, 0.16);
}

.album-drop.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.manager-hint {
    margin: 1rem 0;
    font-size: 0.85rem;
    color: var(--theme-muted);
}

/* Responsive design */
@media (max-width: 720px) {
    .site-header {
        flex-direction: column;
        gap: 1rem;
    }

    .site-nav {
        width: 100%;
        justify-content: space-around;
    }

    .hero {
        margin: 1.5rem;
    }

    .site-main {
        padding-bottom: 4rem;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .lightbox-content {
        padding: 1.5rem;
        margin: 1rem;
    }
}

/* Force video elements to not show controls by default in thumbnail view */
.media-thumb video::-webkit-media-controls {
    display: none !important;
}

.media-thumb video::-moz-media-controls {
    display: none !important;
}

/* But allow controls in lightbox */
#lightbox-video::-webkit-media-controls,
#lightbox-video::-moz-media-controls {
    display: block !important;
}

/* Admin section breadcrumb — the way back up from a section page to its parent */
.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.admin-breadcrumb a {
    color: var(--theme-accent, #7dd3fc);
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.admin-breadcrumb a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-accent, #7dd3fc);
}

.admin-breadcrumb .crumb-sep {
    color: var(--theme-muted, #94a3b8);
}

/* The version pages (V2-V5) each defined these locally. Promoted here so the classic Album
   Management page can carry the same "jump to another layout" row without duplicating the rules. */
.admin-breadcrumb {
    flex-wrap: wrap;
}

.admin-breadcrumb .crumb-current {
    font-weight: 700;
    opacity: 0.9;
}

.admin-breadcrumb .crumb-spacer {
    flex: 1 1 auto;
}

.admin-breadcrumb .crumb-alt {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ===================================================================================
   Scrollbars

   Leslie could not tell whether a pane scrolled at all (2026-07-25). Two things caused
   that: the default dark-on-dark scrollbar all but disappears against these themes, and
   the Coraline theme restyled the thumb without giving the track any contrast.

   Two mechanisms, and which one runs depends on the browser:

     * scrollbar-color (below) is the standard property. Firefox and Chrome 121+ honour
       it, and — measured, not assumed — once it is set Chrome IGNORES every
       ::-webkit-scrollbar rule on that scroller, both ours and the theme's. That is the
       path essentially every real visitor takes, and it renders a full-width accent
       thumb in a grey channel. It inherits, so setting it on html covers every pane.

     * The ::-webkit-scrollbar block is the fallback for older Chrome/Safari, where
       scrollbar-color is dropped as unparseable. There it does matter that these
       selectors are specific enough (html… / html *…) to outrank the bare
       ::-webkit-scrollbar blocks individual themes declare — verified: a scroller with
       scrollbar-color:auto picks up 14px from here, not Coraline's 12px.

   Widths are generous on purpose — this is a photo manager used on a laptop trackpad,
   not a code editor.
   =================================================================================== */

html {
    scrollbar-width: auto;
    scrollbar-color: var(--theme-accent, #f43f5e) rgba(128, 128, 128, 0.25);
}

html::-webkit-scrollbar,
html *::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

/* A visible channel is what tells you a scrollbar exists before you find the thumb. */
html::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--theme-foreground, #f8fafc) 12%, transparent);
    border-radius: 8px;
}

html::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
    background: var(--theme-accent, #f43f5e);
    border-radius: 8px;
    /* Transparent border + padding-box clip insets the thumb inside the track, so the
       track stays readable either side of it instead of being covered edge to edge. */
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 42px;
}

html::-webkit-scrollbar-thumb:hover,
html *::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-alt, #22d3ee);
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:active,
html *::-webkit-scrollbar-thumb:active {
    background: var(--theme-foreground, #f8fafc);
    background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
html *::-webkit-scrollbar-corner {
    background: transparent;
}