@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap);

html,
body,
body * {
    scroll-behavior: smooth
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    body * {
        scroll-behavior: auto!important
    }
}

@keyframes bgPanGradCosmicStars {
    0%{background-position: 0 0
}

to {
    background-position: -420px 260px
}}

@keyframes bgFlashlightSweep {
    0% {
        transform: translate3d(-22%,-10%,0) scale(.9);
        opacity: .42
    }

    30% {
        transform: translate3d(2%,-2%,0) scale(1.02);
        opacity: .86
    }

    60% {
        transform: translate3d(24%,6%,0) scale(1.05);
        opacity: .72
    }

    to {
        transform: translate3d(48%,14%,0) scale(.92);
        opacity: .44
    }
}

@keyframes bgGlassBreath {
    0%,to {
        opacity: .32;
        transform: scale(1)
    }

    50% {
        opacity: .52;
        transform: scale(1.02)
    }
}

@keyframes auroraTonePulse {
    0%,to {
        filter: saturate(1) brightness(1);
        opacity: .62
    }

    50% {
        filter: saturate(1.18) brightness(1.06);
        opacity: .7
    }
}

@keyframes neonToneCycle {
    0%,to {
        filter: hue-rotate(0deg) saturate(1.06)
    }

    50% {
        filter: hue-rotate(14deg) saturate(1.24)
    }
}

@keyframes oceanDepthBreath {
    0%,to {
        opacity: .48;
        transform: translateY(0)
    }

    50% {
        opacity: .62;
        transform: translateY(-1.5%)
    }
}

@keyframes emberGlowBreath {
    0%,to {
        opacity: .28;
        transform: scale(1)
    }

    50% {
        opacity: .46;
        transform: scale(1.03)
    }
}

@keyframes oceanGlassShimmer {
    0%,to {
        opacity: .28;
        transform: translateY(0)
    }

    50% {
        opacity: .48;
        transform: translateY(-2%)
    }
}

@keyframes oceanGradientPulseStrong {
    0%,to {
        opacity: .58;
        filter: saturate(1.04) brightness(.98);
        transform: translateY(0) scale(1)
    }

    50% {
        opacity: .84;
        filter: saturate(1.32) brightness(1.12);
        transform: translateY(-1.2%) scale(1.015)
    }
}

@keyframes oceanGradientShimmerStrong {
    0%,to {
        opacity: .34;
        transform: translateY(0) scale(1);
        filter: saturate(1)
    }

    50% {
        opacity: .68;
        transform: translateY(-3.2%) scale(1.02);
        filter: saturate(1.24) brightness(1.08)
    }
}

@keyframes cosmicHaloDrift {
    0%,to {
        opacity: .22;
        transform: translateY(0)
    }

    50% {
        opacity: .42;
        transform: translateY(2%)
    }
}

@keyframes cosmicDustTwinkle {
    0%,to {
        opacity: .24;
        filter: brightness(1) saturate(1)
    }

    50% {
        opacity: .4;
        filter: brightness(1.15) saturate(1.08)
    }
}

@keyframes cosmicStarTwinkle {
    0%,to {
        opacity: .72;
        filter: brightness(.95) saturate(1)
    }

    50% {
        opacity: .92;
        filter: brightness(1.22) saturate(1.08)
    }
}

@keyframes cosmicDustFloat {
    0%,to {
        transform: translate3d(0,0,0) scale(1)
    }

    50% {
        transform: translate3d(-1.2%,.8%,0) scale(1.015)
    }
}

@keyframes cosmicCometSweep {
    0% {
        transform: translate3d(-16%,-10%,0) scale(.98)
    }

    45% {
        transform: translate3d(4%,2%,0) scale(1.01)
    }

    to {
        transform: translate3d(18%,10%,0) scale(1.02)
    }
}

@keyframes cosmicGradientPulse {
    0%,to {
        filter: hue-rotate(0deg) saturate(1.05)
    }

    50% {
        filter: hue-rotate(8deg) saturate(1.18)
    }
}

@keyframes cosmicSkyBreath {
    0%,to {
        opacity: .7;
        filter: hue-rotate(0deg) saturate(1)
    }

    50% {
        opacity: .82;
        filter: hue-rotate(6deg) saturate(1.12)
    }
}

@keyframes cosmicCanvasDrift {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 100%
    }
}

@keyframes cosmicCanvasHue {
    0%,to {
        filter: hue-rotate(0deg) saturate(1)
    }

    50% {
        filter: hue-rotate(10deg) saturate(1.15)
    }
}

@keyframes bgPanAuroraBase {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanAuroraRibbon {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanAuroraStars {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanNeonBase {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanNeonRings {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanNeonSpark {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanOceanBase {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanOceanDepth {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanOceanBubbles {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanSunsetBase {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanSunsetRibbon {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanSunsetGrain {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanGradEmber {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanGradEmberGlow {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanGradOcean {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanGradOceanGlow {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanGradCosmic {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanCosmicDustNear {
    0%,to {
        background-position: 0 0
    }
}

@keyframes bgPanCosmicDustFar {
    0%,to {
        background-position: 0 0,0 0
    }
}

@keyframes bgPanFrostedNoise {
    0%,to {
        background-position: 0 0,0 0
    }
}

@keyframes animSlideBasic {
    0% {
        transform: translateX(24px);
        opacity: .5
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes animFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes animZoomIn {
    0% {
        transform: scale(.92);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes animLiftIn {
    0% {
        transform: translateY(20px) scale(.985);
        opacity: .55
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}

@keyframes animSwipeIn {
    0% {
        transform: translateX(42px);
        opacity: .5
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes animBlurFocusIn {
    0% {
        filter: blur(9px);
        opacity: .4
    }

    to {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes animCurtainCenter {
    0% {
        clip-path: inset(0 50%0 50%);
        opacity: .45
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

@keyframes animCinematicIn {
    0% {
        filter: blur(10px);
        transform: scale(1.05);
        opacity: .3
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes animRotateZoomIn {
    0% {
        transform: rotate(6deg) scale(.93);
        opacity: .4
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1
    }
}

@keyframes animSlideUp {
    0% {
        transform: translateY(12px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes animSlideLeft {
    0% {
        transform: translateX(-16px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes animSlideRight {
    0% {
        transform: translateX(16px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes animPop {
    0% {
        transform: scale(.85);
        opacity: 0
    }

    60% {
        transform: scale(1.03);
        opacity: 1
    }

    to {
        transform: scale(1)
    }
}

@keyframes animFloat {
    0% {
        transform: translateY(10px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes animFlip {
    0% {
        transform: rotateX(-70deg);
        opacity: 0
    }

    to {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes animBlurIn {
    0% {
        filter: blur(8px);
        opacity: 0
    }

    to {
        filter: blur(0);
        opacity: 1
    }
}

@keyframes animElastic {
    0% {
        transform: scale(.72);
        opacity: 0
    }

    65% {
        transform: scale(1.08);
        opacity: 1
    }

    82% {
        transform: scale(.97)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes animGlitch {
    0% {
        transform: translateX(-5px) skewX(-6deg);
        opacity: .2
    }

    35% {
        transform: translateX(5px) skewX(6deg);
        opacity: .9
    }

    70% {
        transform: translateX(-2px) skewX(-3deg);
        opacity: .75
    }

    to {
        transform: translateX(0) skewX(0);
        opacity: 1
    }
}

@keyframes animRevealUp {
    0% {
        clip-path: inset(100%0 0 0);
        transform: translateY(16px);
        opacity: 0
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes animSpiralIn {
    0% {
        transform: rotate(-150deg) scale(.7) translate(18px,-12px);
        opacity: 0
    }

    to {
        transform: rotate(0) scale(1) translate(0,0);
        opacity: 1
    }
}

@keyframes animDriftRight {
    0% {
        transform: translateX(48px) scale(.98);
        opacity: 0
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1
    }
}

@keyframes animFlashIn {
    0% {
        opacity: .15;
        transform: scale(.96)
    }

    40% {
        opacity: 1;
        transform: scale(1.01)
    }

    75% {
        opacity: .78;
        transform: scale(.995)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes animWaveIn {
    0% {
        transform: translateY(18px) rotate(-4deg);
        opacity: .2
    }

    65% {
        transform: translateY(-6px) rotate(2deg);
        opacity: .9
    }

    to {
        transform: translateY(0) rotate(0);
        opacity: 1
    }
}

@keyframes animDropIn {
    0% {
        transform: translateY(-56px) scale(.96);
        opacity: 0
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}

@keyframes animRubberBand {
    0% {
        transform: scaleX(.8) scaleY(1.2);
        opacity: .2
    }

    35% {
        transform: scaleX(1.12) scaleY(.88);
        opacity: 1
    }

    70% {
        transform: scaleX(.96) scaleY(1.04)
    }

    to {
        transform: scaleX(1) scaleY(1)
    }
}

@keyframes animTiltIn {
    0% {
        transform: rotate(-12deg) translateX(-14px);
        opacity: 0
    }

    to {
        transform: rotate(0) translateX(0);
        opacity: 1
    }
}

@keyframes animPulseIn {
    0% {
        opacity: .15;
        transform: scale(.9)
    }

    45% {
        opacity: 1;
        transform: scale(1.04)
    }

    75% {
        transform: scale(.99)
    }

    to {
        transform: scale(1)
    }
}

@keyframes animCurtainDown {
    0% {
        clip-path: inset(0 0 100%0);
        transform: translateY(-10px);
        opacity: 0
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideFade {
    0% {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

@keyframes slideSlide {
    0% {
        transform: translateX(8px);
        opacity: .6
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-shake {
    0%,to {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-6px)
    }

    50% {
        transform: translateX(6px)
    }

    75% {
        transform: translateX(-4px)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes loading {
    0% {
        background-position: 200%0
    }

    to {
        background-position: -200%0
    }
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: none
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes toastSlideIn {
    0% {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes motionLayerFloatA {
    0%,to {
        opacity: .94;
        filter: saturate(1) brightness(1)
    }

    50% {
        opacity: 1;
        filter: saturate(1.08) brightness(1.03)
    }
}

@keyframes motionLayerFloatB {
    0%,to {
        transform: translate3d(1.1%,-1%,0) scale(1.018)
    }

    50% {
        transform: translate3d(-1.2%,.9%,0) scale(1.026)
    }
}

@keyframes motionLayerFloatC {
    0%,to {
        transform: translate3d(-.9%,1.1%,0) scale(1.014)
    }

    50% {
        transform: translate3d(1.1%,-1.2%,0) scale(1.022)
    }
}

@keyframes oceanSunPulse {
    0%,to {
        opacity: .74;
        filter: saturate(.92) brightness(.92);
        transform: translate3d(-1.4%,1.2%,0) scale(1.02)
    }

    50% {
        opacity: 1;
        filter: saturate(1.18) brightness(1.16);
        transform: translate3d(1.6%,-1.3%,0) scale(1.065)
    }
}

@keyframes oceanRaySway {
    0%,to {
        transform: translate3d(-2.2%,.5%,0) scale(1.03);
        opacity: .24
    }

    50% {
        transform: translate3d(2.6%,2.3%,0) scale(1.09);
        opacity: .58
    }
}

@keyframes oceanRayShimmer {
    0%,to {
        background-position: center top,42% 40%,58% 46%,50% 42%;
        filter: blur(.88px) saturate(.98) brightness(.98)
    }

    35% {
        background-position: center top,52% 46%,48% 40%,56% 50%;
        filter: blur(1.06px) saturate(1.18) brightness(1.14)
    }

    70% {
        background-position: center top,36% 49%,62% 52%,44% 45%;
        filter: blur(.94px) saturate(1.12) brightness(1.08)
    }
}

@keyframes oceanDustRise {
    0% {
        transform: translate3d(-1.6%,10%,0) scale(.98);
        opacity: .08
    }

    50% {
        transform: translate3d(1.8%,-5%,0) scale(1.08);
        opacity: .36
    }

    to {
        transform: translate3d(2.4%,-13.5%,0) scale(1.05);
        opacity: .07
    }
}

@keyframes sunsetHazePulse {
    0%,to {
        opacity: .72;
        filter: saturate(.94) brightness(.94);
        transform: translate3d(-1.2%,.8%,0) scale(1.02)
    }

    50% {
        opacity: .98;
        filter: saturate(1.16) brightness(1.14);
        transform: translate3d(1.4%,-1%,0) scale(1.05)
    }
}

@keyframes sunsetCloudDrift {
    0%,to {
        transform: translate3d(-2.2%,.8%,0) scale(1.03);
        background-position: center 78%,46% 40%,44% 52%,58% 60%;
        opacity: .48
    }

    50% {
        transform: translate3d(2.5%,-.9%,0) scale(1.07);
        background-position: center 68%,58% 36%,40% 56%,62% 54%;
        opacity: .86
    }
}

@keyframes sunsetGlowSweep {
    0%,to {
        transform: translate3d(-1.8%,1.4%,0) scale(1.03);
        opacity: .3
    }

    50% {
        transform: translate3d(2.1%,-1.6%,0) scale(1.08);
        opacity: .68
    }
}

@keyframes emberCorePulse {
    0%,to {
        opacity: .76;
        filter: saturate(.95) brightness(.92);
        transform: translate3d(-1.2%,.8%,0) scale(1.015)
    }

    50% {
        opacity: .98;
        filter: saturate(1.18) brightness(1.12);
        transform: translate3d(1.4%,-1%,0) scale(1.05)
    }
}

@keyframes emberVeinFlow {
    0%,to {
        transform: translate3d(-1.6%,.6%,0) scale(1.02);
        background-position: 48% 56%,42% 44%,58% 62%,50% 50%;
        opacity: .52
    }

    50% {
        transform: translate3d(1.8%,-.8%,0) scale(1.07);
        background-position: 54% 50%,38% 48%,62% 58%,52% 46%;
        opacity: .78
    }
}

@keyframes emberSparkDrift {
    0% {
        transform: translate3d(-1.4%,7.5%,0) scale(.98);
        opacity: .1
    }

    50% {
        transform: translate3d(1.5%,-4%,0) scale(1.08);
        opacity: .34
    }

    to {
        transform: translate3d(2.2%,-11.5%,0) scale(1.03);
        opacity: .08
    }
}

@keyframes oceanCurrentPulse {
    0%,to {
        opacity: .76;
        filter: saturate(.95) brightness(.94);
        transform: translate3d(-1.2%,.9%,0) scale(1.02)
    }

    50% {
        opacity: .98;
        filter: saturate(1.14) brightness(1.12);
        transform: translate3d(1.4%,-1.1%,0) scale(1.06)
    }
}

@keyframes oceanCausticsFlow {
    0%,to {
        transform: translate3d(-1.8%,.8%,0) scale(1.03);
        background-position: 42% 36%,58% 50%,48% 62%,52% 44%;
        opacity: .42
    }

    50% {
        transform: translate3d(2.1%,-1.2%,0) scale(1.08);
        background-position: 48% 32%,54% 56%,44% 66%,58% 40%;
        opacity: .72
    }
}

@keyframes oceanPlanktonDrift {
    0% {
        transform: translate3d(-1.6%,8%,0) scale(.98);
        opacity: .08
    }

    50% {
        transform: translate3d(1.9%,-4.6%,0) scale(1.08);
        opacity: .3
    }

    to {
        transform: translate3d(2.6%,-12%,0) scale(1.03);
        opacity: .07
    }
}

@keyframes auroraBorealisPulse {
    0%,to {
        opacity: .74;
        filter: saturate(.94) brightness(.92);
        transform: translate3d(-1.1%,.7%,0) scale(1.02)
    }

    50% {
        opacity: .98;
        filter: saturate(1.18) brightness(1.12);
        transform: translate3d(1.3%,-.9%,0) scale(1.06)
    }
}

@keyframes auroraCurtainDrift {
    0%,to {
        transform: translate3d(-1.8%,.9%,0) scale(1.03);
        background-position: 46% 14%,54% 18%,40% 24%,62% 22%;
        opacity: .42
    }

    50% {
        transform: translate3d(2.2%,-1.1%,0) scale(1.09);
        background-position: 52% 10%,48% 20%,44% 18%,58% 26%;
        opacity: .76
    }
}

@keyframes auroraStarFieldDrift {
    0% {
        transform: translate3d(-1.2%,5%,0) scale(.98);
        opacity: .08
    }

    50% {
        transform: translate3d(1.4%,-2.6%,0) scale(1.06);
        opacity: .26
    }

    to {
        transform: translate3d(2%,-8.5%,0) scale(1.02);
        opacity: .07
    }
}

@keyframes neonCorePulse {
    0%,to {
        opacity: .72;
        filter: saturate(.96) brightness(.94) hue-rotate(0deg);
        transform: translate3d(-1.2%,.8%,0) scale(1.02)
    }

    50% {
        opacity: 1;
        filter: saturate(1.22) brightness(1.18) hue-rotate(8deg);
        transform: translate3d(1.4%,-1.1%,0) scale(1.07)
    }
}

@keyframes neonRingSweep {
    0%,to {
        transform: translate3d(-1.8%,.9%,0) scale(1.03);
        background-position: 50% 50%,42% 42%,58% 58%,50% 50%;
        opacity: .42
    }

    50% {
        transform: translate3d(2.2%,-1.3%,0) scale(1.1);
        background-position: 50% 50%,48% 38%,52% 62%,50% 50%;
        opacity: .78
    }
}

@keyframes neonSparkDrift {
    0% {
        transform: translate3d(-1.6%,7%,0) scale(.98);
        opacity: .09
    }

    50% {
        transform: translate3d(2%,-4.2%,0) scale(1.1);
        opacity: .34
    }

    to {
        transform: translate3d(2.8%,-11%,0) scale(1.04);
        opacity: .08
    }
}

:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --border: #e5e7eb;
    --text: #1f2937;
    --muted: #6b7280;
    --accent: #3273dc
}

body {
    font-family: "Inter","SF Pro Display","Segoe UI",sans-serif;
    background: var(--bg);
    color: var(--text)
}

.slide-thumb {
    background: #f8fafc;
    box-shadow: 0 1px 2px 0#0001;
    cursor: pointer;
    transition: box-shadow .2s;
    border: 1.5px solid #e2e8f0
}

.slide-thumb.selected {
    box-shadow: 0 0 0 2px #2563eb
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #cbd5e1
}

.landing-hero__text .lead {
    font-size: 1rem;
    color: var(--muted);
    max-width: 540px;
    line-height: 1.6
}

.eyebrow {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    font-size: .8rem;
    margin: 0
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 8px
}

.hero-actions .button.is-light {
    background: #f9fafb;
    color: var(--text)
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 10px;
    margin-top: 14px
}

.stat {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid var(--border)
}

.stat__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700
}

.stat__label {
    color: var(--muted);
    font-size: .9rem
}

.landing-hero__card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 8px 20px rgba(17,24,39,.04)
}

.landing-hero__card h3 {
    margin: 8px 0 10px;
    font-size: 1.15rem
}

.landing-hero__card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    color: var(--muted)
}

.landing-hero__card li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9
}

.landing-hero__card li i {
    color: var(--accent);
    font-size: .6rem
}

.card-badge,.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.card-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid #e0e7ff
}

.card-cta {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    margin-top: 4px
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 14px;
    margin-top: 22px
}

.landing-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 8px 18px rgba(17,24,39,.05);
    transition: transform .1s ease,box-shadow .1s ease
}

.landing-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(17,24,39,.08)
}

.tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    margin-bottom: 8px
}

.landing-tile h4 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.05rem
}

.landing-tile p {
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 8px
}

.tile-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none
}

.card-badge,.hero-actions .button,.landing-grid .landing-tile,.landing-hero,.landing-hero__card,.stat {
    backdrop-filter: none
}

.landing-hero.minimal {
    padding: 30px 26px
}

.landing-hero__content.container-flex {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap
}

.landing-hero__text {
    flex: 1 1 480px
}

.landing-hero__text h1 {
    font-size: 2.1rem;
    margin: 8px 0 12px;
    line-height: 1.08;
    color: var(--text)
}

.hero-actions .button.is-primary {
    background: linear-gradient(90deg,#3273dc,#2557c6);
    border: 0;
    color: #fff
}

.hero-actions .button.is-light {
    background: #fff;
    border: 1px solid var(--border)
}

.landing-hero__card {
    flex: 0 0 320px
}

.bullet-list {
    max-width: 640px
}

.hero-artek {
    padding: 64px 24px 12px
}

.landing-hero__content.narrow {
    max-width: 980px;
    margin-left: -4%;
    margin-top: -3%;
    padding-left: 13px;
    border-left: 7px solid #000
}

.landing-hero__crumb {
    margin-bottom: 18px
}

.landing-hero__text .eyebrow.small {
    font-size: .75rem;
    opacity: .85
}

.hero-large {
    font-size: 3.2rem;
    font-weight: 700;
    margin: 8px 0 14px;
    letter-spacing: -.01em
}

.hero-bleed,.hero-bleed img {
    display: block;
    position: relative
}

.hero-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    min-height: 45vh
}

.hero-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.3)0,rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1
}

.hero-bleed img {
    font-size: .95rem;
    padding: 0 18px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    z-index: 0
}

.hero-bleed-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: clamp(20px,4.6vw,44px);
    font-weight: 700;
    text-align: center;
    max-width: 86%;
    line-height: 1.05;
    padding: 8px 16px;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
    z-index: 3;
    pointer-events: none
}

.navbar {
    background: #fff;
    border-bottom: 1px solid #efefef;
    box-shadow: none;
    padding: .45rem 1rem
}

.navbar,.navbar .navbar-brand {
    align-items: center
}

.navbar .navbar-brand .navbar-item {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .01em;
    color: var(--text)
}

.navbar .navbar-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px
}

.navbar .navbar-start {
    gap: 18px
}

.navbar .navbar-start .navbar-item {
    padding: .4rem .6rem;
    color: var(--text);
    font-weight: 600;
    font-size: .98rem;
    display: flex;
    align-items: center
}

.navbar .navbar-end,.navbar .navbar-item,.navbar .navbar-link,.navbar .navbar-start {
    display: flex;
    align-items: center
}

.navbar .navbar-start .navbar-item:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 6px
}

.navbar .navbar-end {
    margin-left: auto;
    gap: 12px
}

.navbar .navbar-end .navbar-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.navbar .navbar-auth-links {
    align-items: center
}

.navbar .navbar-auth-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.navbar .navbar-auth-actions a {
    overflow-wrap: anywhere
}

.navbar .navbar-item.card-badge,.navbar .navbar-item.is-small-badge {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-weight: 700
}

.navbar .navbar-burger {
    margin-left: 8px
}

.admin-page,.admin-shell {
    display: grid;
    gap: 16px
}

.admin-shell__heading {
    display: grid;
    gap: 4px
}

.admin-shell__hint {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.45
}

.admin-title {
    margin-top: 6px;
    margin-bottom: 4px
}

.admin-card {
    background: linear-gradient(145deg,#f9fbff,#fff);
    border: 1px solid #e4e8f1;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(17,24,39,.08)
}

.admin-main,.admin-main__content {
    min-width: 0
}

.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 12px
}

.admin-menu-button {
    justify-content: flex-start;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: 1px solid #dbe2ef;
    background: #f8fbff;
    color: var(--text);
    font-weight: 600;
    gap: 10px;
    transition: transform .1s ease,box-shadow .1s ease,border-color .1s ease
}

.admin-menu-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(17,24,39,.1);
    border-color: #c5d1e6
}

.admin-menu-button.is-primary,.admin-menu-button.is-primary:hover {
    background: linear-gradient(90deg,#3273dc,#2557c6);
    border-color: #2d62c7;
    color: #fff;
    box-shadow: 0 10px 18px rgba(50,115,220,.3)
}

.admin-menu-button.is-light {
    background: #f8fbff;
    color: var(--text)
}

.admin-content {
    display: grid;
    gap: 14px
}

.admin-content__header {
    display: grid;
    gap: 4px
}

.admin-content h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #111827
}

.admin-content__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: .92rem
}

.admin-section-title {
    margin: 16px 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827
}

.admin-panel-box {
    background: linear-gradient(145deg,#f9fbff,#fff);
    border: 1px solid #e4e8f1;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(17,24,39,.08)
}

.admin-filter-box {
    padding: 12px 14px
}

.admin-filter-group {
    align-items: flex-end;
    gap: 8px
}

.admin-filter-label {
    margin-bottom: 4px!important;
    color: #4b5563
}

.admin-content .input,.admin-content .select select,.admin-content textarea {
    border-color: #d7deeb;
    border-radius: 8px
}

.admin-tabs {
    margin: 0
}

.admin-tabs.is-boxed ul {
    border-bottom-color: #dbe3f2
}

.admin-tabs.is-boxed li a {
    border-radius: 10px 10px 0 0;
    border-color: #dbe3f2;
    background: #f8fbff;
    color: #334155;
    font-weight: 600
}

.admin-tabs.is-boxed li.is-active a {
    background: #fff;
    color: #1f2937;
    border-bottom-color: #fff
}

.admin-content .table {
    background: 0 0
}

.admin-content .table thead th {
    background: #f7f9ff;
    border-color: #e5eaf4;
    color: #334155;
    font-weight: 700
}

.admin-content .table td {
    border-color: #e9edf5;
    vertical-align: middle
}

.admin-content .table.is-hoverable tbody tr:hover {
    background: #f8fbff!important
}

.admin-pagination {
    margin-top: 12px
}

.admin-pagination .pagination-list {
    margin-left: 12px
}

.admin-pagination .pagination-link,.admin-pagination .pagination-next,.admin-pagination .pagination-previous {
    border-color: #d9e1ef;
    background: #fff
}

.admin-pagination .pagination-link.is-current {
    background: #3273dc;
    border-color: #3273dc
}

@media (max-width:768px) {
    .navbar .navbar-menu {
        gap: 10px
    }

    .navbar .navbar-start .navbar-item {
        font-size: .95rem
    }

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

    .admin-panel-box {
        padding: 12px
    }

    .admin-filter-group {
        align-items: stretch
    }

    .admin-filter-group .control {
        width: 100%
    }
}

.landing-hero__card.minimal-card {
    max-width: 380px
}

.bullet-list {
    margin: 16px 0 0;
    padding-left: 18px;
    line-height: 1.6
}

.bullet-list li,.topic-content__body li {
    margin-bottom: 6px
}

.bullet-list,.muted {
    color: var(--muted)
}

.editor-table-figure {
    margin: 12px 0;
    padding: 6px 0;
    position: relative
}

.editor-table-figure.selected-table {
    outline: 2px solid #cbd5f5;
    outline-offset: 4px
}

.editor-table-figure .table-caption {
    margin-top: 6px;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.4
}

.editor-chart-figure {
    margin: 14px auto;
    padding: 6px 0
}

.editor-chart-figure.image-resizable {
    display: block;
    width: min(100%,860px)
}

.editor-chart-figure.selected-chart {
    outline: 2px solid #cbd5f5;
    outline-offset: 4px
}

.editor-chart-figure .chart-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto
}

.editor-chart-figure .chart-wrapper svg {
    width: 100%;
    height: 320px;
    display: block
}

.editor-chart-canvas {
    width: 100%!important;
    height: 320px!important;
    display: block
}

.editor-diagram-figure {
    margin: 14px auto;
    width: min(100%,1100px);
    max-width: 1100px;
    padding: 6px 0
}

.editor-diagram-figure.image-resizable {
    display: block
}

.editor-diagram-figure .image-caption {
    margin: 0 0 8px;
    text-align: center
}

.editor-diagram-figure .figure-title {
    display: inline-block;
    min-width: 80px;
    font-weight: 600;
    color: #334155;
    outline: 0
}

.editor-diagram-figure .figure-label {
    display: none
}

.editor-diagram-stage,.image-resizable.editor-diagram-figure .image-box {
    height: auto;
    aspect-ratio: 1080/620;
    min-height: 220px
}

.image-resizable.editor-diagram-figure .image-media-holder {
    height: 100%
}

.editor-diagram-stage {
    width: 100%;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(99,102,241,.16);
    background: linear-gradient(145deg,rgba(251,253,255,.98)0,rgba(240,245,255,.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86),0 14px 28px rgba(37,99,235,.06)
}

.editor-diagram-stage .diagram-svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none
}

.image-resizable.editor-diagram-figure .editor-diagram-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto
}

#chartDataTable td[contenteditable=true],#chartDataTable th[contenteditable=true] {
    min-width: 92px
}

#chartDataTable td[contenteditable=true]:focus,#chartDataTable th[contenteditable=true]:focus {
    outline: 2px solid #3273dc;
    outline-offset: -2px;
    background: #f8fbff
}

.diagram-preview-box {
    width: 100%;
    height: clamp(200px,28vh,280px);
    position: relative;
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 22px;
    padding: 18px;
    box-sizing: border-box;
    background: linear-gradient(145deg,#f8fbff 0,#eff4ff 48%,#e6edff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88),0 18px 40px rgba(37,99,235,.08);
    overflow: hidden
}

.diagram-preview-box::before,.diagram-preview-box::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none
}

.diagram-preview-box::before {
    inset: auto auto -24% -10%;
    width: 46%;
    height: 70%;
    background: radial-gradient(circle,rgba(59,130,246,.18)0,rgba(59,130,246,0) 72%)
}

.diagram-preview-box::after {
    inset: -16% -8% auto auto;
    width: 38%;
    height: 54%;
    background: radial-gradient(circle,rgba(129,140,248,.14)0,rgba(129,140,248,0) 72%)
}

.diagram-preview-box .diagram-stage {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg,rgba(255,255,255,.72)0,rgba(255,255,255,.48) 100%);
    border: 1px solid rgba(99,102,241,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85)
}

.diagram-preview-box .diagram-svg {
    width: 100%;
    height: 100%;
    display: block
}

.diagram-empty-hint {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: .92rem;
    text-align: center;
    padding: 12px
}

.modal-content.diagram-modal__content {
    width: min(1040px,calc(100vw - 32px));
    max-width: min(1040px,calc(100vw - 32px));
    max-height: calc(100vh - 28px);
    display: flex;
    align-items: stretch
}

.diagram-modal {
    width: 100%;
    border-radius: 26px;
    padding: 16px;
    background: linear-gradient(180deg,#fff 0,#f8fbff 100%);
    border: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 24px 80px rgba(15,23,42,.18);
    max-height: calc(100vh - 28px);
    overflow: hidden
}

.diagram-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px
}

.diagram-modal__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg,#eff6ff 0,#dbeafe 100%);
    color: #2563eb;
    border: 1px solid rgba(59,130,246,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72)
}

.diagram-modal__icon i {
    font-size: 1.2rem
}

.diagram-modal__heading {
    min-width: 0
}

.diagram-modal__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a
}

.diagram-modal__subtitle {
    margin: 4px 0 0;
    color: #64748b;
    line-height: 1.35
}

.diagram-modal__layout {
    display: grid;
    grid-template-columns: minmax(320px,420px) minmax(0,1fr);
    gap: 16px;
    align-items: stretch
}

.diagram-modal__controls,.diagram-modal__preview-card {
    min-width: 0
}

.diagram-modal__controls {
    max-width: 420px
}

.diagram-modal__card,.diagram-modal__preview-card {
    height: 100%;
    border-radius: 22px;
    border: 1px solid rgba(226,232,240,.9);
    background: linear-gradient(180deg,#fff 0,#f8fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
    padding: 14px
}

.diagram-modal__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.diagram-modal__grid>.diagram-modal__field--wide {
    grid-column: 1/-1
}

.diagram-modal__section-head,.diagram-modal__preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.diagram-modal__mini-hint {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59,130,246,.08);
    color: #2563eb;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap
}

.diagram-modal__source {
    min-height: 132px;
    max-height: 132px;
    resize: none
}

.diagram-modal__presets {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 2px
}

.diagram-modal__preset-btn {
    justify-content: center;
    min-height: 38px;
    border-radius: 12px
}

.diagram-modal__preview-head {
    margin-bottom: 10px
}

.diagram-modal__preview-head>:first-child {
    min-width: 0;
    flex: 1 1 auto
}

.diagram-modal__preview-card {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.diagram-modal__preview-label {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb
}

.diagram-modal__preview-note {
    margin: 4px 0 0;
    color: #64748b;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.diagram-modal__live-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(16,185,129,.12);
    color: #047857;
    font-size: .78rem;
    font-weight: 800
}

.diagram-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px
}

@media (max-width:1100px) {
    .modal-content.diagram-modal__content {
        width: min(940px,calc(100vw - 24px));
        max-width: min(940px,calc(100vw - 24px))
    }

    .diagram-modal__layout {
        grid-template-columns: 1fr
    }

    .diagram-modal__controls {
        max-width: none
    }
}

@media (max-width:768px) {
    .modal-content.diagram-modal__content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px)
    }

    .editor-chart-canvas,.editor-chart-figure .chart-wrapper svg {
        height: 260px!important
    }

    .diagram-modal {
        padding: 16px;
        max-height: calc(100vh - 16px)
    }
}

.editor-table-figure .table-label {
    font-weight: 600;
    color: var(--text)
}

.editor-table-figure .table-title {
    font-weight: 500
}

.slide-block.table-block {
    background: rgba(255,255,255,.7);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 18px rgba(15,23,42,.08)
}

.slide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    background: #fff
}

.slide-table td,.slide-table th {
    border: var(--editor-table-border-width, 1px) solid var(--editor-table-border-color, #e5e7eb);
    padding: 6px 8px;
    min-width: 40px
}

.slide-table td:focus,.slide-table th:focus {
    outline: 2px solid #93c5fd;
    outline-offset: -2px
}

#editor td.table-cell-selected,#editor th.table-cell-selected,.slide-table td.table-cell-selected,.slide-table th.table-cell-selected {
    background: rgba(59,130,246,.12);
    outline: 2px solid rgba(59,130,246,.35);
    outline-offset: -1px
}

.presentation-table-caption {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 6px;
    text-align: center
}

.presentation-table-label {
    font-weight: 600;
    color: var(--text)
}

.presentation-table-title {
    font-weight: 500
}

.presentation-table-title.table-title-editing {
    opacity: .6
}

.table-corner-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
    cursor: pointer;
    z-index: 5;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.08);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px
}

.image-resizable .img-controls button:hover,.table-corner-delete:hover {
    background: #fff
}

.table-corner-delete i {
    pointer-events: none
}

.table-corner-delete--slide {
    top: 6px;
    right: 6px
}

.table-caption-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: .85rem
}

.inline-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px
}

.inline-links a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 16px;
    margin-top: 22px
}

.photo-card {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(17,24,39,.05)
}

.photo-card img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover
}

.photo-card figcaption {
    padding: 12px 14px;
    color: var(--muted);
    font-size: .95rem
}

.navbar-brand.is-centered {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.footer {
    padding: .5rem 1rem;
    font-size: .9rem;
    max-height: 3rem;
    overflow: hidden
}

#topicsList a.is-active {
    background-color: #3273dc;
    color: #fff;
    border-radius: 4px
}

#topicsList a.is-active:hover {
    background-color: #2759a5
}

#testsList {
    list-style: none;
    padding: 8px;
    margin: 0;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px
}

.pagination-controls .pagination-info {
    font-weight: 600;
    color: #374151
}

#testsList li.test-item {
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s
}

.topic-list {
    min-height: 48px
}

.topic-list__items {
    list-style: none;
    padding: 0;
    margin: 0
}

.topic-item {
    padding: 10px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: background-color .15s ease,border-color .15s ease,box-shadow .15s ease
}

#topicsList .select {
    margin-bottom: 0
}

#topicsList .select select {
    height: 40px;
    padding: 6px 10px;
    font-size: .95rem
}

.topic-item:hover {
    background: #f0f4ff;
    border-color: #d7deeb;
    box-shadow: 0 4px 12px rgba(37,99,235,.08)
}

.topic-item.is-active {
    background: #eef2ff;
    border-color: #c3d2fd;
    box-shadow: 0 6px 14px rgba(37,99,235,.12)
}

.topic-item.is-disabled {
    cursor: not-allowed;
    opacity: .72
}

.topic-item.is-disabled,.topic-item.is-disabled:hover {
    background: #f4f4f5;
    border-color: #e4e4e7;
    box-shadow: none
}

.topic-item__disabled {
    pointer-events: none
}

.topic-content__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700
}

.topic-content__body {
    color: #1f2937;
    line-height: 1.6;
    font-size: 1rem
}

.topic-content__body h2,.topic-content__body h3,.topic-content__body h4 {
    color: inherit;
    margin: 12px 0 8px;
    font-weight: 700
}

.presentation-toolbar {
    margin-bottom: 12px
}

.presentation-toolbar .button,.slides-list {
    background: #fff;
    border: 1px solid var(--border)
}

.presentation-toolbar .button {
    color: var(--text);
    padding: 6px 10px;
    font-size: .9rem
}

.presentation-toolbar .button:hover {
    background: #f7fbff;
    border-color: #dbeafe
}

.presentation-toolbar .button.toolbar-toggle-active {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 6px 14px rgba(37,99,235,.28),inset 0 0 0 1px rgba(255,255,255,.22)
}

.presentation-toolbar .button.toolbar-toggle-active:hover {
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    border-color: #1e40af;
    color: #fff
}

.slides-list {
    border-radius: 8px;
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.slides-list::-webkit-scrollbar {
    height: 0
}

.slide-thumb {
    width: 160px;
    height: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(17,24,39,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.slide-thumb::-webkit-scrollbar {
    display: none
}

.thumb-content {
    transform: scale(.22222222);
    transform-origin: 0 0;
    width: 720px;
    padding: 10px;
    box-sizing: border-box;
    color: var(--text);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden
}

.slide-thumb img.thumb-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #fff;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px
}

.slide-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: #fbfdff;
    transition: background-color .12s ease,transform .08s ease;
    font-size: .95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    cursor: grab
}

.slide-item__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.slide-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0
}

.slide-item__anim-badge,.slide-item__bg-btn {
    border: 1px solid rgba(148,163,184,.35);
    color: #334155;
    display: inline-flex;
    align-items: center
}

.slide-item__anim-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(15,23,42,.08)
}

.slide-item__bg-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #fff;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: border-color .15s ease,background-color .15s ease,color .15s ease,opacity .15s ease
}

.slide-item__bg-btn:hover:not(:disabled) {
    border-color: rgba(37,99,235,.45);
    background: rgba(59,130,246,.08);
    color: #1e40af
}

.slide-item__bg-btn.is-disabled,.slide-item__bg-btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

.slide-item:hover {
    background: #f0f7ff;
    transform: translateY(-1px)
}

.slide-item:active {
    cursor: grabbing
}

.slide-item.dragging {
    opacity: .62;
    transform: scale(.99)
}

.slide-item.drag-over-after::after,.slide-item.drag-over-before::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 0;
    border-top: 2px solid rgba(37,99,235,.85);
    pointer-events: none
}

.slide-item.drag-over-before::before {
    top: -2px
}

.slide-item.drag-over-after::after {
    bottom: -2px
}

.slide-item.active,.slide-item.selected {
    background: linear-gradient(90deg,#e6f0ff,#f8fbff);
    border: 1px solid rgba(50,115,220,.12);
    box-shadow: 0 6px 18px rgba(50,115,220,.06)
}

.slide-item.active .slide-item__anim-badge,.slide-item.selected .slide-item__anim-badge {
    background: rgba(37,99,235,.14);
    border-color: rgba(37,99,235,.35);
    color: #1e40af
}

#slideCanvas {
    min-height: 240px;
    width: 640px;
    max-width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    --slide-bg-color: #ffffff;
    --slide-bg-image: none;
    --slide-pad: 14px;
    background-color: var(--slide-bg-color);
    background-image: var(--slide-bg-image);
    border: 1px solid var(--border);
    padding: var(--slide-pad);
    box-shadow: 0 8px 20px rgba(17,24,39,.04);
    position: relative;
    box-sizing: border-box;
    overflow: visible!important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 auto
}

#slideCanvas::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.presentation-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px
}

.presentation-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px
}

.presentation-subtitle {
    font-size: .9rem;
    color: #64748b
}

.presentation-shortcuts {
    font-size: .78rem;
    color: #64748b;
    margin-top: 4px
}

.presentation-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.presentation-toolbar .toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px
}

.presentation-toolbar .toolbar-label {
    font-size: .75rem;
    color: #64748b;
    margin-right: 4px;
    white-space: nowrap
}

.presentation-toolbar .toolbar-group .button.is-small {
    min-height: 30px;
    padding: 0 10px;
    font-weight: 500
}

.presentation-toolbar .toolbar-nav .button.is-small {
    width: 34px;
    padding: 0;
    justify-content: center
}

.presentation-toolbar.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.presentation-toolbar.editor-toolbar .toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-height: auto;
    min-width: 0;
    box-shadow: none
}

.presentation-toolbar.editor-toolbar .toolbar-label {
    font-size: .75rem;
    color: #64748b;
    margin-right: 4px;
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400
}

.presentation-toolbar.editor-toolbar .button {
    width: auto;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .75rem;
    min-height: 30px;
    padding: 0 10px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: none;
    justify-content: center
}

.presentation-toolbar.editor-toolbar .button .icon.is-small {
    width: 1.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: .78rem
}

.presentation-toolbar.editor-toolbar .button:hover {
    background: #f7fbff;
    border-color: #dbeafe
}

.presentation-toolbar.editor-toolbar .toolbar-group .button.is-small {
    min-height: 30px;
    padding: 0 10px;
    font-weight: 500;
    border-radius: 8px
}

.presentation-toolbar.editor-toolbar .toolbar-group .select.is-small select,
.presentation-toolbar.editor-toolbar .toolbar-group .select select,
.presentation-toolbar.editor-toolbar .toolbar-group .input.is-small,
.presentation-toolbar.editor-toolbar .toolbar-group .input {
    min-height: 30px;
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .75rem;
    border-radius: 8px
}

.presentation-nav {
    display: inline-flex;
    gap: 6px
}

.presentation-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: start
}

.slides-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 18px rgba(15,23,42,.04)
}

.slides-panel__header {
    font-size: .85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.slides-panel__actions {
    display: inline-flex;
    gap: 6px
}

.slides-panel__actions .button.is-small {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.slides-list {
    max-height: 340px;
    overflow: auto;
    padding-right: 4px
}

.slides-list::-webkit-scrollbar {
    width: 6px
}

.slides-list::-webkit-scrollbar-thumb {
    background: #cbd5f5;
    border-radius: 999px
}

.slide-editor {
    min-width: 0;
    position: relative;
    overflow: hidden;
    --notes-panel-height: min(44%, 320px);
    --notes-panel-height-px: 260px;
    --notes-panel-shift-px: 260px
}

.presentation-play-mode .presentation-toolbar .toolbar-group.play-hide {
    display: none!important
}

.presentation-play-mode #slidesContainer,.presentation-play-mode .slides-list,.presentation-play-mode .slides-panel {
    display: none!important;
    visibility: hidden!important;
    width: 0!important;
    height: 0!important;
    overflow: hidden!important
}

.presentation-play-mode .presentation-layout {
    grid-template-columns: 1fr
}

.presentation-play-mode .slide-editor {
    display: flex!important;
    flex-direction: column;
    width: 100%!important;
    min-width: 0
}

.presentation-play-mode .slide-canvas-wrap {
    display: flex!important;
    justify-content: center;
    align-items: center;
    width: 100%!important;
    min-height: 72vh
}

.presentation-play-mode #slideCanvas .drag-handle,.presentation-play-mode #slideCanvas .media-delete-btn,.presentation-play-mode #slideCanvas .resize-handle,.presentation-play-mode #slideCanvas .slide-block.placeholder::before,.presentation-play-mode #slideCanvas .table-corner-delete,.presentation-play-mode #slideCanvas.guides-on::after,.presentation-play-mode #slideCanvas.guides-on::before,.presentation-play-mode .slide-notes,.presentation-play-mode .slide-notes-toggle {
    display: none!important
}

.presentation-play-mode #slideCanvas {
    min-height: 0!important;
    width: min(1200px,100%);
    max-width: 100%;
    aspect-ratio: 16/9;
    height: auto
}

.presentation-play-mode #slideCanvas.grid-on {
    background-image: var(--slide-bg-image)!important;
    background-size: auto!important
}

.presentation-play-mode #slideCanvas .slide-grid-overlay {
    display: none!important
}

.presentation-play-mode #slideCanvas .slide-block,.presentation-play-mode #slideCanvas .slide-block.selected,.presentation-play-mode .slide-transition-ghost .slide-block,.presentation-play-mode .slide-transition-ghost .slide-block.selected {
    border: 0!important;
    border-color: transparent!important;
    outline: 0!important;
    outline-offset: 0!important;
    box-shadow: none!important
}

#presentationSection.presentation-play-mode~.save-btn {
    display: none!important
}

.slide-canvas-wrap {
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    position: relative
}

.slide-transition-ghost {
    position: absolute;
    z-index: 420;
    overflow: hidden;
    pointer-events: none
}

.slide-transition-ghost .slide-block {
    cursor: default!important
}

.presentation-fullscreen {
    position: fixed;
    inset: 12px;
    transform: none;
    width: auto;
    height: auto;
    z-index: 1200;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.presentation-fullscreen .presentation-header {
    position: sticky;
    top: 0;
    z-index: 1201;
    background: #fff;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e7eb
}

.presentation-fullscreen .presentation-layout {
    grid-template-columns: 280px 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto
}

.presentation-fullscreen .slides-panel {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.presentation-fullscreen .slides-list {
    flex: 1 1 auto;
    max-height: none
}

.presentation-fullscreen .slide-editor {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.presentation-fullscreen .slide-canvas-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto
}

.presentation-fullscreen #slideCanvas {
    width: min(1200px,100%);
    max-width: 100%;
    overflow: visible!important
}

.presentation-fullscreen.presentation-play-mode .presentation-layout {
    grid-template-columns: 1fr!important;
    overflow: visible!important
}

.presentation-fullscreen.presentation-play-mode #slidesContainer,.presentation-fullscreen.presentation-play-mode .slides-list,.presentation-fullscreen.presentation-play-mode .slides-panel {
    display: none!important;
    visibility: hidden!important;
    width: 0!important;
    height: 0!important;
    overflow: hidden!important
}

.presentation-fullscreen.presentation-play-mode .slide-editor {
    display: flex!important;
    flex: 1 1 auto;
    min-width: 0
}

.presentation-fullscreen.presentation-play-mode .slide-canvas-wrap {
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: calc(100vh - 220px)
}

.presentation-fullscreen.presentation-play-mode #slideCanvas {
    width: min(1400px,96vw)!important;
    max-width: 96vw!important;
    aspect-ratio: 16/9;
    min-height: 0!important;
    height: auto!important;
    will-change: transform,opacity,filter;
    backface-visibility: hidden;
    transform: translateZ(0);
    width: min(96vw,calc((100vh - 48px)*16/9))!important;
    max-width: min(96vw,calc((100vh - 48px)*16/9))!important;
    max-height: calc(100vh - 48px)!important;
    border: 1px solid rgba(255,255,255,.18)!important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45)!important
}

.presentation-fullscreen.presentation-play-mode {
    inset: 0!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
    background: #080b12!important;
    overflow: hidden!important
}

.presentation-fullscreen.presentation-play-mode .presentation-header,.presentation-fullscreen.presentation-play-mode .presentation-toolbar {
    display: none!important
}

.presentation-fullscreen.presentation-play-mode .slide-editor {
    height: 100vh
}

.presentation-fullscreen.presentation-play-mode .slide-canvas-wrap {
    position: relative;
    min-height: 100vh!important;
    height: 100vh!important;
    padding: 24px!important;
    border: 0!important;
    border-radius: 0!important;
    background: 0 0!important;
    cursor: pointer;
    overflow: hidden!important
}

.presentation-fullscreen.presentation-play-mode #slideCanvas .slide-block {
    pointer-events: none!important;
    user-select: none!important
}

.presentation-playback-hud {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(8,11,18,.72);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    z-index: 1400
}

.presentation-play-mode.presentation-fullscreen .presentation-playback-hud {
    display: inline-flex
}

.presentation-playback-status {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    color: #f8fafc;
    font-size: .82rem
}

.presentation-playback-progress {
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    overflow: hidden
}

#presentationPlaybackProgressBar {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,#60a5fa,#34d399);
    border-radius: 999px;
    transition: width 160ms ease
}

.slide-notes {
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    z-index: 35;
    box-shadow: 0 10px 26px rgba(15,23,42,.2);
    height: var(--notes-panel-height);
    max-height: min(44%,320px);
    display: flex;
    flex-direction: column;
    transform: translateY(var(--notes-panel-shift-px));
    opacity: 0;
    pointer-events: none;
    transition: transform 360ms cubic-bezier(.22,1,.36,1),opacity 300ms ease-out;
    will-change: transform,opacity
}

.slide-notes .label {
    margin-bottom: 8px
}

.slide-notes #slideNotes {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    resize: vertical
}

.slide-notes-toggle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0);
    width: 60px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: rgba(248,250,252,.96);
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(15,23,42,.16);
    transition: transform 360ms cubic-bezier(.22,1,.36,1),background-color 240ms ease,border-color 240ms ease,box-shadow 240ms ease,color 240ms ease
}

.slide-notes-toggle:hover {
    background: #fff;
    border-color: #94a3b8
}

.slide-notes-toggle .icon i {
    transition: transform 220ms ease
}

.slide-editor.notes-open .slide-notes {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto
}

.slide-editor.notes-open .slide-notes-toggle {
    background: #fff;
    border-color: #e2e8f0 #e2e8f0 transparent;
    border-radius: 10px 10px 0 0;
    color: #334155;
    box-shadow: none;
    transform: translate(-50%,calc(1px - var(--notes-panel-shift-px)))
}

.slide-editor.notes-open .slide-notes-toggle .icon i {
    transform: rotate(180deg)
}

#slideCanvas.grid-on {
    background-color: var(--slide-bg-color);
    background-image: linear-gradient(to right,rgba(148,163,184,.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.2) 1px,transparent 1px),var(--slide-bg-image);
    background-size: 20px 20px,20px 20px,auto;
    background-position: 0 0,0 0,0 0
}

#slideCanvas[class*=theme-animated-].grid-on {
    background-image: var(--slide-bg-image)!important;
    background-size: 100% 100%!important;
    background-position: 0 0!important
}

#slideCanvas .slide-grid-overlay {
    position: absolute;
    inset: var(--slide-pad);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(to right,rgba(148,163,184,.24) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.24) 1px,transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    box-shadow: none!important;
    filter: none!important
}

#slideCanvas.guides-on::after,#slideCanvas.guides-on::before {
    content: "";
    position: absolute;
    background: rgba(59,130,246,.35);
    pointer-events: none;
    z-index: 4
}

#slideCanvas.guides-on::before {
    width: 1px;
    height: calc(100% - (var(--slide-pad)*2));
    left: calc(var(--slide-pad) + (100% - (var(--slide-pad)*2))/2);
    top: var(--slide-pad)
}

#slideCanvas.guides-on::after {
    height: 1px;
    width: calc(100% - (var(--slide-pad)*2));
    top: calc(var(--slide-pad) + (100% - (var(--slide-pad)*2))/2);
    left: var(--slide-pad)
}

#slideCanvas.theme-light {
    --slide-bg-color: #f8fbff;
    --slide-bg-image: radial-gradient(120% 95% at -8% -12%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 48%),
		radial-gradient(110% 90% at 112% 112%, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 52%),
		linear-gradient(145deg, #ffffff 0%, #f8fbff 52%, #eef3ff 100%)
}

#slideCanvas.theme-default-white {
    --slide-bg-color: #ffffff;
    --slide-bg-image: none
}

#slideCanvas.theme-dark {
    --slide-bg-color: #070b1f;
    --slide-bg-image: radial-gradient(95% 78% at 14% 14%, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0) 62%),
		radial-gradient(88% 74% at 88% 18%, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0) 60%),
		linear-gradient(148deg, #020617 0%, #0b1126 54%, #162246 100%)
}

#slideCanvas.theme-blue {
    --slide-bg-color: #e6f2ff;
    --slide-bg-image: radial-gradient(120% 88% at 8% 12%, rgba(125, 211, 252, 0.42) 0%, rgba(125, 211, 252, 0) 56%),
		radial-gradient(110% 92% at 96% 88%, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 54%),
		linear-gradient(145deg, #f3f9ff 0%, #e6f2ff 56%, #d7e8ff 100%)
}

#slideCanvas.theme-mint {
    --slide-bg-color: #eafff8;
    --slide-bg-image: radial-gradient(106% 82% at 10% 14%, rgba(52, 211, 153, 0.3) 0%, rgba(52, 211, 153, 0) 56%),
		radial-gradient(92% 78% at 88% 82%, rgba(45, 212, 191, 0.26) 0%, rgba(45, 212, 191, 0) 50%),
		linear-gradient(145deg, #f4fffc 0%, #eafff8 56%, #d6f9ee 100%)
}

#slideCanvas.theme-lavender {
    --slide-bg-color: #f3f0ff;
    --slide-bg-image: radial-gradient(102% 86% at 12% 10%, rgba(196, 181, 253, 0.32) 0%, rgba(196, 181, 253, 0) 58%),
		radial-gradient(98% 80% at 90% 88%, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0) 54%),
		linear-gradient(145deg, #faf7ff 0%, #f3f0ff 56%, #e6e0ff 100%)
}

#slideCanvas.theme-sand {
    --slide-bg-color: #fff7ec;
    --slide-bg-image: radial-gradient(108% 84% at 12% 14%, rgba(253, 186, 116, 0.28) 0%, rgba(253, 186, 116, 0) 58%),
		radial-gradient(92% 76% at 92% 82%, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0) 52%),
		linear-gradient(145deg, #fffdf8 0%, #fff7ec 56%, #ffe9d2 100%)
}

#slideCanvas.theme-sunset {
    --slide-bg-color: #ffe9df;
    --slide-bg-image: radial-gradient(110% 88% at 8% 18%, rgba(251, 113, 133, 0.32) 0%, rgba(251, 113, 133, 0) 58%),
		radial-gradient(96% 78% at 90% 20%, rgba(251, 191, 36, 0.28) 0%, rgba(251, 191, 36, 0) 58%),
		linear-gradient(145deg, #fff3ea 0%, #ffe9df 52%, #ffd7d2 100%)
}

#slideCanvas.theme-midnight {
    --slide-bg-color: #050b1b;
    --slide-bg-image: radial-gradient(108% 84% at 16% 12%, rgba(59, 130, 246, 0.26) 0%, rgba(59, 130, 246, 0) 60%),
		radial-gradient(88% 74% at 88% 84%, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 56%),
		linear-gradient(148deg, #030712 0%, #0a1635 54%, #132a54 100%)
}

#slideCanvas.theme-forest {
    --slide-bg-color: #05271f;
    --slide-bg-image: radial-gradient(110% 86% at 10% 12%, rgba(45, 212, 191, 0.26) 0%, rgba(45, 212, 191, 0) 58%),
		radial-gradient(92% 78% at 92% 86%, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0) 56%),
		linear-gradient(148deg, #02140f 0%, #063326 54%, #0a4a39 100%)
}

#slideCanvas.theme-editorial {
    --slide-bg-color: #f8fafc;
    --slide-bg-image: repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.06) 0 1px, rgba(248, 250, 252, 0) 1px 44px),
		radial-gradient(90% 70% at 88% 12%, rgba(148, 163, 184, 0.22) 0%, rgba(148, 163, 184, 0) 62%),
		linear-gradient(155deg, #ffffff 0%, #f1f5f9 100%)
}

#slideCanvas.theme-noir-luxe {
    --slide-bg-color: #0b0b0e;
    --slide-bg-image: linear-gradient(120deg, rgba(250, 204, 21, 0.12) 0%, rgba(250, 204, 21, 0) 28%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(11, 11, 14, 0) 1px 20px),
		linear-gradient(145deg, #050506 0%, #131318 54%, #1e1e24 100%)
}

#slideCanvas.theme-neon-grid {
    --slide-bg-color: #050816;
    --slide-bg-image: repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.22) 0 1px, rgba(5, 8, 22, 0) 1px 22px),
		repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.18) 0 1px, rgba(5, 8, 22, 0) 1px 22px),
		radial-gradient(70% 60% at 80% 16%, rgba(56, 189, 248, 0.26) 0%, rgba(56, 189, 248, 0) 60%),
		linear-gradient(145deg, #020617 0%, #0b1028 56%, #111c44 100%)
}

#slideCanvas.theme-clay {
    --slide-bg-color: #f4c8b4;
    --slide-bg-image: radial-gradient(120% 90% at 18% 18%, rgba(255, 245, 238, 0.36) 0%, rgba(255, 245, 238, 0) 62%),
		repeating-linear-gradient(165deg, rgba(127, 29, 29, 0.08) 0 2px, rgba(244, 200, 180, 0) 2px 20px),
		linear-gradient(145deg, #f8d8c8 0%, #f4c8b4 56%, #e8a98d 100%)
}

#slideCanvas.theme-botanical {
    --slide-bg-color: #dcfce7;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220' viewBox='0 0 340 220'%3E%3Cg stroke='%23166534' stroke-opacity='0.22' stroke-width='1.4' fill='none'%3E%3Cpath d='M26 184 C52 126 78 96 124 70'/%3E%3Cpath d='M86 194 C112 140 140 108 184 80'/%3E%3Cpath d='M150 204 C172 152 202 118 246 96'/%3E%3C/g%3E%3Cg fill='%2316a34a' fill-opacity='0.16'%3E%3Cellipse cx='132' cy='72' rx='18' ry='8' transform='rotate(-24 132 72)'/%3E%3Cellipse cx='184' cy='82' rx='16' ry='7' transform='rotate(-20 184 82)'/%3E%3Cellipse cx='246' cy='98' rx='14' ry='6' transform='rotate(-18 246 98)'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(145deg, #ecfdf5 0%, #dcfce7 54%, #bbf7d0 100%)
}

#slideCanvas.theme-auric {
    --slide-bg-color: #1f1708;
    --slide-bg-image: radial-gradient(85% 65% at 84% 14%, rgba(251, 191, 36, 0.3) 0%, rgba(251, 191, 36, 0) 60%),
		repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0 1px, rgba(31, 23, 8, 0) 1px 14px),
		linear-gradient(150deg, #120d04 0%, #2c1f09 56%, #3f2e0d 100%)
}

#slideCanvas.theme-paper {
    --slide-bg-color: #ede3d1;
    --slide-bg-image: radial-gradient(120% 95% at 14% 12%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(145deg, rgba(112, 78, 42, 0.16) 0%, rgba(112, 78, 42, 0.08) 48%, rgba(112, 78, 42, 0.22) 100%),
		url('./textures/Texturelabs_Paper_120thumbnail.jpg')
}

#slideCanvas.theme-paper-2 {
    --slide-bg-color: #f2e8d7;
    --slide-bg-image: linear-gradient(155deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.05) 58%, rgba(116, 82, 50, 0.16) 100%),
		url('./textures/Texturelabs_Paper_153thumbnail.jpg')
}

#slideCanvas.theme-paper-3 {
    --slide-bg-color: #dfd0bb;
    --slide-bg-image: radial-gradient(100% 80% at 76% 12%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(148deg, rgba(96, 72, 42, 0.18) 0%, rgba(96, 72, 42, 0.08) 60%, rgba(96, 72, 42, 0.22) 100%),
		url('./textures/Texturelabs_Fabric_155thumbnail.jpg')
}

#slideCanvas.theme-waves {
    --slide-bg-color: #dff0ff;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='220' viewBox='0 0 420 220'%3E%3Cg fill='none' stroke='%239bc7ef' stroke-width='2' opacity='0.7'%3E%3Cpath d='M0 58 C65 18 132 18 198 58 C264 98 331 98 420 58'/%3E%3Cpath d='M0 108 C65 68 132 68 198 108 C264 148 331 148 420 108'/%3E%3Cpath d='M0 158 C65 118 132 118 198 158 C264 198 331 198 420 158'/%3E%3C/g%3E%3C/svg%3E"),
		repeating-linear-gradient(165deg, rgba(59, 130, 246, 0.08) 0 1px, rgba(223, 240, 255, 0) 1px 18px),
		linear-gradient(135deg, #ecf8ff 0%, #cce8ff 100%)
}

#slideCanvas.theme-constellation {
    --slide-bg-color: #071329;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg stroke='%2384a9ff' stroke-opacity='0.34' stroke-width='1.2' fill='none'%3E%3Cpath d='M28 38 L82 62 L122 44 L178 82 L248 56 L320 90'/%3E%3Cpath d='M48 168 L98 140 L166 162 L228 130 L304 156'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.9'%3E%3Ccircle cx='28' cy='38' r='2.1'/%3E%3Ccircle cx='82' cy='62' r='1.8'/%3E%3Ccircle cx='122' cy='44' r='1.9'/%3E%3Ccircle cx='178' cy='82' r='2.2'/%3E%3Ccircle cx='248' cy='56' r='2.1'/%3E%3Ccircle cx='320' cy='90' r='1.8'/%3E%3Ccircle cx='48' cy='168' r='1.9'/%3E%3Ccircle cx='98' cy='140' r='2.2'/%3E%3Ccircle cx='166' cy='162' r='1.9'/%3E%3Ccircle cx='228' cy='130' r='2.1'/%3E%3Ccircle cx='304' cy='156' r='1.8'/%3E%3Ccircle cx='340' cy='34' r='1.4'/%3E%3Ccircle cx='292' cy='26' r='1.2'/%3E%3Ccircle cx='154' cy='26' r='1.3'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(120% 120% at 12% 10%, #132b58 0%, #071329 56%, #040a18 100%)
}

#slideCanvas.theme-nebula {
    --slide-bg-color: #1b1140;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220' viewBox='0 0 340 220'%3E%3Cg fill='%23fff' fill-opacity='0.8'%3E%3Ccircle cx='24' cy='38' r='1.5'/%3E%3Ccircle cx='78' cy='72' r='1.1'/%3E%3Ccircle cx='132' cy='32' r='1.8'/%3E%3Ccircle cx='186' cy='96' r='1.3'/%3E%3Ccircle cx='254' cy='44' r='1.6'/%3E%3Ccircle cx='300' cy='82' r='1.2'/%3E%3Ccircle cx='58' cy='176' r='1.6'/%3E%3Ccircle cx='158' cy='154' r='1.2'/%3E%3Ccircle cx='248' cy='172' r='1.5'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(85% 70% at 20% 25%, rgba(236, 72, 153, 0.42) 0%, rgba(236, 72, 153, 0) 66%),
		radial-gradient(70% 65% at 80% 72%, rgba(129, 140, 248, 0.35) 0%, rgba(129, 140, 248, 0) 70%),
		linear-gradient(135deg, #070a1f 0%, #1c1144 45%, #311253 100%)
}

#slideCanvas.theme-aurora {
    --slide-bg-color: #051a24;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='220' viewBox='0 0 380 220'%3E%3Cg stroke='%23a5f3fc' stroke-opacity='0.45' stroke-width='1.1' fill='none'%3E%3Cpath d='M0 148 C72 90 152 92 236 142 C292 176 338 176 380 152'/%3E%3Cpath d='M0 124 C58 78 136 78 210 118 C276 154 326 156 380 130'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.65'%3E%3Ccircle cx='40' cy='28' r='1.2'/%3E%3Ccircle cx='106' cy='36' r='1.4'/%3E%3Ccircle cx='180' cy='24' r='1.1'/%3E%3Ccircle cx='302' cy='34' r='1.3'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(165deg, rgba(16, 185, 129, 0.34) 0%, rgba(34, 211, 238, 0.22) 30%, rgba(56, 189, 248, 0.12) 50%, rgba(5, 26, 36, 0.88) 75%),
		linear-gradient(135deg, #021018 0%, #052633 52%, #0d3a4a 100%)
}

#slideCanvas.theme-orbit {
    --slide-bg-color: #070b22;
    --slide-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cg fill='none' stroke='%2393c5fd' stroke-opacity='0.4' stroke-width='1.1'%3E%3Cellipse cx='212' cy='122' rx='168' ry='78'/%3E%3Cellipse cx='212' cy='122' rx='132' ry='58'/%3E%3Cellipse cx='212' cy='122' rx='94' ry='40'/%3E%3Cellipse cx='212' cy='122' rx='58' ry='22'/%3E%3C/g%3E%3Cg fill='none' stroke='%2360a5fa' stroke-opacity='0.28' stroke-width='0.8'%3E%3Cpath d='M84 180 C150 130 274 130 340 180'/%3E%3Cpath d='M78 54 C152 102 272 102 346 54'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.84'%3E%3Ccircle cx='44' cy='30' r='1.3'/%3E%3Ccircle cx='112' cy='20' r='1.2'/%3E%3Ccircle cx='292' cy='34' r='1.5'/%3E%3Ccircle cx='360' cy='56' r='1.2'/%3E%3Ccircle cx='324' cy='198' r='1.4'/%3E%3Ccircle cx='146' cy='202' r='1.1'/%3E%3C/g%3E%3Ccircle cx='212' cy='122' r='7.2' fill='%23f8fafc' fill-opacity='0.94'/%3E%3C/svg%3E"),
		radial-gradient(110% 90% at 56% 44%, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 64%),
		radial-gradient(90% 70% at 24% 14%, rgba(125, 211, 252, 0.2) 0%, rgba(125, 211, 252, 0) 58%),
		linear-gradient(140deg, #030714 0%, #0a1a45 46%, #122a62 100%)
}

#slideCanvas.theme-atmosphere,#slideCanvas.theme-atmosphere-2,#slideCanvas.theme-atmosphere-3,#slideCanvas.theme-brick,#slideCanvas.theme-brick-2,#slideCanvas.theme-brick-3,#slideCanvas.theme-film,#slideCanvas.theme-film-2,#slideCanvas.theme-film-3,#slideCanvas.theme-glass,#slideCanvas.theme-glass-2,#slideCanvas.theme-glass-3,#slideCanvas.theme-lens-effect,#slideCanvas.theme-lens-effect-2,#slideCanvas.theme-lens-effect-3,#slideCanvas.theme-metal,#slideCanvas.theme-metal-2,#slideCanvas.theme-metal-3,#slideCanvas.theme-paper,#slideCanvas.theme-paper-2,#slideCanvas.theme-paper-3,#slideCanvas.theme-sky,#slideCanvas.theme-sky-2,#slideCanvas.theme-sky-3,#slideCanvas.theme-soil,#slideCanvas.theme-soil-2,#slideCanvas.theme-soil-3,#slideCanvas.theme-stone,#slideCanvas.theme-stone-2,#slideCanvas.theme-stone-3,#slideCanvas.theme-water,#slideCanvas.theme-water-2,#slideCanvas.theme-water-3,#slideCanvas.theme-wood,#slideCanvas.theme-wood-2,#slideCanvas.theme-wood-3 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

#slideCanvas.theme-atmosphere {
    --slide-bg-color: #111c32;
    --slide-bg-image: radial-gradient(110% 90% at 18% 12%, rgba(173, 191, 214, 0.24) 0%, rgba(173, 191, 214, 0) 56%),
		radial-gradient(95% 80% at 84% 22%, rgba(61, 110, 176, 0.34) 0%, rgba(61, 110, 176, 0) 60%),
		linear-gradient(145deg, rgba(10, 18, 36, 0.82) 0%, rgba(20, 34, 58, 0.84) 54%, rgba(31, 47, 75, 0.9) 100%),
		url('./textures/Texturelabs_Atmosphere_131thumbnail.jpg')
}

#slideCanvas.theme-water {
    --slide-bg-color: #0a3851;
    --slide-bg-image: radial-gradient(110% 85% at 22% 14%, rgba(167, 243, 255, 0.18) 0%, rgba(167, 243, 255, 0) 56%),
		linear-gradient(156deg, rgba(6, 30, 50, 0.76) 0%, rgba(7, 84, 110, 0.68) 56%, rgba(11, 116, 136, 0.74) 100%),
		url('./textures/Texturelabs_Water_121thumbnail.jpg')
}

#slideCanvas.theme-wood {
    --slide-bg-color: #5a311d;
    --slide-bg-image: radial-gradient(100% 82% at 18% 12%, rgba(255, 219, 173, 0.18) 0%, rgba(255, 219, 173, 0) 58%),
		linear-gradient(146deg, rgba(46, 23, 14, 0.62) 0%, rgba(94, 54, 31, 0.44) 56%, rgba(116, 68, 42, 0.62) 100%),
		url('./textures/Texturelabs_Wood_132thumbnail.jpg')
}

#slideCanvas.theme-film {
    --slide-bg-color: #171717;
    --slide-bg-image: radial-gradient(115% 92% at 24% 14%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 56%),
		linear-gradient(145deg, rgba(0, 0, 0, 0.7) 0%, rgba(29, 29, 29, 0.54) 58%, rgba(45, 45, 45, 0.62) 100%),
		url('./textures/Texturelabs_Film_124thumbnail.jpg')
}

#slideCanvas.theme-brick {
    --slide-bg-color: #6c1f1f;
    --slide-bg-image: linear-gradient(145deg, rgba(63, 18, 18, 0.56) 0%, rgba(124, 36, 33, 0.44) 60%, rgba(162, 46, 38, 0.54) 100%),
		url('./textures/Texturelabs_Brick_124thumbnail.jpg')
}

#slideCanvas.theme-glass {
    --slide-bg-color: #d6e6f3;
    --slide-bg-image: radial-gradient(92% 78% at 78% 16%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(150deg, rgba(255, 255, 255, 0.32) 0%, rgba(159, 210, 241, 0.24) 58%, rgba(84, 139, 196, 0.26) 100%),
		url('./textures/Texturelabs_Glass_125thumbnail.jpg')
}

#slideCanvas.theme-lens-effect {
    --slide-bg-color: #0c1226;
    --slide-bg-image: radial-gradient(circle at 38% 42%, rgba(253, 186, 116, 0.34) 0%, rgba(253, 186, 116, 0) 16%),
		radial-gradient(circle at 64% 52%, rgba(125, 211, 252, 0.28) 0%, rgba(125, 211, 252, 0) 26%),
		linear-gradient(146deg, rgba(4, 8, 22, 0.8) 0%, rgba(16, 22, 48, 0.74) 58%, rgba(23, 35, 64, 0.78) 100%),
		url('./textures/Texturelabs_LensFX_174thumbnail.jpg')
}

#slideCanvas.theme-metal {
    --slide-bg-color: #353f4d;
    --slide-bg-image: radial-gradient(100% 72% at 18% 10%, rgba(226, 232, 240, 0.22) 0%, rgba(226, 232, 240, 0) 56%),
		linear-gradient(145deg, rgba(22, 29, 40, 0.66) 0%, rgba(57, 70, 86, 0.52) 58%, rgba(79, 89, 103, 0.62) 100%),
		url('./textures/Texturelabs_Metal_122thumbnail.jpg')
}

#slideCanvas.theme-sky {
    --slide-bg-color: #dfeefe;
    --slide-bg-image: radial-gradient(108% 84% at 16% 10%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(162deg, rgba(255, 255, 255, 0.18) 0%, rgba(183, 216, 250, 0.26) 56%, rgba(115, 172, 228, 0.24) 100%),
		url('./textures/Texturelabs_Sky_158thumbnail.jpg')
}

#slideCanvas.theme-soil {
    --slide-bg-color: #4d311e;
    --slide-bg-image: radial-gradient(110% 90% at 82% 18%, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0) 60%),
		linear-gradient(146deg, rgba(35, 22, 14, 0.62) 0%, rgba(86, 52, 30, 0.56) 56%, rgba(114, 74, 46, 0.64) 100%),
		url('./textures/Texturelabs_Soil_140thumbnail.jpg')
}

#slideCanvas.theme-stone {
    --slide-bg-color: #4b5561;
    --slide-bg-image: radial-gradient(100% 80% at 20% 12%, rgba(226, 232, 240, 0.2) 0%, rgba(226, 232, 240, 0) 58%),
		linear-gradient(145deg, rgba(31, 41, 55, 0.62) 0%, rgba(74, 85, 104, 0.54) 58%, rgba(104, 116, 137, 0.64) 100%),
		url('./textures/Texturelabs_Concrete_176thumbnail.jpg')
}

#slideCanvas.theme-atmosphere-2 {
    --slide-bg-color: #131d2f;
    --slide-bg-image: radial-gradient(90% 72% at 78% 16%, rgba(191, 219, 254, 0.22) 0%, rgba(191, 219, 254, 0) 62%),
		linear-gradient(145deg, rgba(11, 17, 32, 0.8) 0%, rgba(29, 41, 64, 0.72) 56%, rgba(49, 67, 96, 0.82) 100%),
		url('./textures/Texturelabs_Atmosphere_135thumbnail.jpg')
}

#slideCanvas.theme-atmosphere-3 {
    --slide-bg-color: #1e2731;
    --slide-bg-image: radial-gradient(104% 78% at 18% 18%, rgba(167, 243, 208, 0.14) 0%, rgba(167, 243, 208, 0) 56%),
		linear-gradient(145deg, rgba(15, 23, 30, 0.78) 0%, rgba(40, 54, 65, 0.68) 56%, rgba(57, 76, 92, 0.82) 100%),
		url('./textures/Texturelabs_Concrete_127thumbnail.jpg')
}

#slideCanvas.theme-water-2 {
    --slide-bg-color: #0a4f62;
    --slide-bg-image: radial-gradient(94% 72% at 18% 14%, rgba(125, 253, 255, 0.2) 0%, rgba(125, 253, 255, 0) 56%),
		linear-gradient(150deg, rgba(7, 47, 65, 0.72) 0%, rgba(11, 86, 114, 0.62) 56%, rgba(16, 127, 151, 0.72) 100%),
		url('./textures/Texturelabs_Water_130thumbnail.jpg')
}

#slideCanvas.theme-water-3 {
    --slide-bg-color: #113a65;
    --slide-bg-image: radial-gradient(92% 70% at 82% 20%, rgba(147, 197, 253, 0.24) 0%, rgba(147, 197, 253, 0) 58%),
		linear-gradient(148deg, rgba(7, 28, 50, 0.74) 0%, rgba(17, 58, 101, 0.66) 58%, rgba(26, 102, 153, 0.74) 100%),
		url('./textures/Texturelabs_Water_131thumbnail.jpg')
}

#slideCanvas.theme-wood-2 {
    --slide-bg-color: #5d3524;
    --slide-bg-image: radial-gradient(92% 72% at 76% 14%, rgba(255, 229, 180, 0.16) 0%, rgba(255, 229, 180, 0) 58%),
		linear-gradient(145deg, rgba(53, 28, 19, 0.68) 0%, rgba(95, 57, 35, 0.56) 56%, rgba(126, 71, 41, 0.68) 100%),
		url('./textures/Texturelabs_Wood_169thumbnail.jpg')
}

#slideCanvas.theme-wood-3 {
    --slide-bg-color: #64382a;
    --slide-bg-image: radial-gradient(96% 76% at 22% 12%, rgba(255, 214, 170, 0.17) 0%, rgba(255, 214, 170, 0) 58%),
		linear-gradient(145deg, rgba(52, 30, 20, 0.66) 0%, rgba(96, 56, 38, 0.54) 56%, rgba(126, 74, 48, 0.66) 100%),
		url('./textures/Texturelabs_Wood_134thumbnail.jpg')
}

#slideCanvas.theme-film-2 {
    --slide-bg-color: #1e1815;
    --slide-bg-image: radial-gradient(94% 70% at 18% 12%, rgba(255, 236, 205, 0.1) 0%, rgba(255, 236, 205, 0) 58%),
		linear-gradient(146deg, rgba(9, 7, 6, 0.72) 0%, rgba(42, 31, 24, 0.58) 56%, rgba(78, 56, 40, 0.68) 100%),
		url('./textures/Texturelabs_Film_194thumbnail.jpg')
}

#slideCanvas.theme-film-3 {
    --slide-bg-color: #1c1f2b;
    --slide-bg-image: radial-gradient(96% 70% at 80% 18%, rgba(186, 214, 255, 0.14) 0%, rgba(186, 214, 255, 0) 58%),
		linear-gradient(145deg, rgba(5, 8, 17, 0.74) 0%, rgba(29, 34, 49, 0.62) 56%, rgba(46, 53, 74, 0.72) 100%),
		url('./textures/Texturelabs_Grunge_322thumbnail.jpg')
}

#slideCanvas.theme-brick-2 {
    --slide-bg-color: #7f2b21;
    --slide-bg-image: linear-gradient(145deg, rgba(68, 22, 17, 0.56) 0%, rgba(132, 45, 33, 0.48) 56%, rgba(171, 66, 48, 0.56) 100%),
		url('./textures/Texturelabs_Brick_141thumbnail.jpg')
}

#slideCanvas.theme-brick-3 {
    --slide-bg-color: #6f2a35;
    --slide-bg-image: linear-gradient(145deg, rgba(55, 19, 28, 0.58) 0%, rgba(106, 37, 56, 0.5) 56%, rgba(137, 54, 74, 0.58) 100%),
		url('./textures/Texturelabs_Brick_159thumbnail.jpg')
}

#slideCanvas.theme-glass-2 {
    --slide-bg-color: #d7eff8;
    --slide-bg-image: radial-gradient(88% 72% at 82% 14%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(150deg, rgba(255, 255, 255, 0.28) 0%, rgba(143, 221, 229, 0.24) 56%, rgba(98, 174, 202, 0.26) 100%),
		url('./textures/Texturelabs_LensFX_214thumbnail.jpg')
}

#slideCanvas.theme-glass-3 {
    --slide-bg-color: #d9e8f4;
    --slide-bg-image: radial-gradient(84% 70% at 20% 14%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, rgba(176, 205, 233, 0.22) 56%, rgba(115, 152, 186, 0.24) 100%),
		url('./textures/Texturelabs_Glass_125thumbnail.jpg')
}

#slideCanvas.theme-lens-effect-2 {
    --slide-bg-color: #101a33;
    --slide-bg-image: radial-gradient(circle at 44% 42%, rgba(253, 224, 71, 0.26) 0%, rgba(253, 224, 71, 0) 16%),
		radial-gradient(circle at 62% 58%, rgba(96, 165, 250, 0.24) 0%, rgba(96, 165, 250, 0) 28%),
		linear-gradient(146deg, rgba(4, 10, 24, 0.78) 0%, rgba(16, 27, 55, 0.72) 58%, rgba(26, 45, 82, 0.8) 100%),
		url('./textures/Texturelabs_LensFX_214thumbnail.jpg')
}

#slideCanvas.theme-lens-effect-3 {
    --slide-bg-color: #151735;
    --slide-bg-image: radial-gradient(circle at 64% 36%, rgba(147, 197, 253, 0.24) 0%, rgba(147, 197, 253, 0) 30%),
		radial-gradient(circle at 34% 64%, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0) 28%),
		linear-gradient(145deg, rgba(7, 10, 29, 0.8) 0%, rgba(20, 23, 55, 0.72) 56%, rgba(35, 46, 106, 0.8) 100%),
		url('./textures/Texturelabs_Details_186thumbnail.jpg')
}

#slideCanvas.theme-metal-2 {
    --slide-bg-color: #505966;
    --slide-bg-image: radial-gradient(90% 72% at 78% 14%, rgba(226, 232, 240, 0.2) 0%, rgba(226, 232, 240, 0) 58%),
		linear-gradient(145deg, rgba(30, 37, 48, 0.66) 0%, rgba(74, 85, 103, 0.54) 56%, rgba(97, 108, 126, 0.66) 100%),
		url('./textures/Texturelabs_Metal_145thumbnail.jpg')
}

#slideCanvas.theme-metal-3 {
    --slide-bg-color: #4b5563;
    --slide-bg-image: radial-gradient(90% 74% at 18% 16%, rgba(224, 231, 255, 0.18) 0%, rgba(224, 231, 255, 0) 58%),
		linear-gradient(145deg, rgba(31, 38, 50, 0.68) 0%, rgba(70, 82, 100, 0.56) 56%, rgba(97, 111, 132, 0.66) 100%),
		url('./textures/Texturelabs_Metal_131thumbnail.jpg')
}

#slideCanvas.theme-sky-2 {
    --slide-bg-color: #d8edff;
    --slide-bg-image: radial-gradient(95% 78% at 22% 14%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(186, 230, 253, 0.26) 56%, rgba(125, 211, 252, 0.24) 100%),
		url('./textures/Texturelabs_Sky_166thumbnail.jpg')
}

#slideCanvas.theme-sky-3 {
    --slide-bg-color: #cfe4fb;
    --slide-bg-image: radial-gradient(88% 72% at 76% 16%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(191, 219, 254, 0.28) 56%, rgba(147, 197, 253, 0.22) 100%),
		url('./textures/Texturelabs_Sky_158thumbnail.jpg')
}

#slideCanvas.theme-soil-2 {
    --slide-bg-color: #6a2f1f;
    --slide-bg-image: radial-gradient(90% 74% at 20% 16%, rgba(254, 215, 170, 0.2) 0%, rgba(254, 215, 170, 0) 58%),
		linear-gradient(145deg, rgba(58, 25, 17, 0.66) 0%, rgba(105, 48, 33, 0.56) 56%, rgba(145, 66, 46, 0.66) 100%),
			url('./textures/Texturelabs_Soil_140thumbnail.jpg')
}

#slideCanvas.theme-soil-3 {
    --slide-bg-color: #77513b;
    --slide-bg-image: radial-gradient(90% 74% at 82% 18%, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 60%),
		linear-gradient(145deg, rgba(58, 40, 30, 0.68) 0%, rgba(117, 80, 57, 0.56) 56%, rgba(146, 100, 71, 0.66) 100%),
		url('./textures/Texturelabs_Grunge_260thumbnail.jpg')
}

#slideCanvas.theme-stone-2 {
    --slide-bg-color: #5a626f;
    --slide-bg-image: radial-gradient(92% 74% at 18% 14%, rgba(226, 232, 240, 0.16) 0%, rgba(226, 232, 240, 0) 58%),
		linear-gradient(145deg, rgba(45, 53, 64, 0.68) 0%, rgba(88, 100, 118, 0.56) 56%, rgba(122, 136, 158, 0.68) 100%),
		url('./textures/Texturelabs_Concrete_127thumbnail.jpg')
}

#slideCanvas.theme-stone-3 {
    --slide-bg-color: #4a505a;
    --slide-bg-image: radial-gradient(90% 72% at 84% 16%, rgba(203, 213, 225, 0.2) 0%, rgba(203, 213, 225, 0) 58%),
		linear-gradient(145deg, rgba(34, 39, 45, 0.72) 0%, rgba(73, 82, 96, 0.58) 56%, rgba(101, 114, 131, 0.7) 100%),
		url('./textures/Texturelabs_Grunge_322thumbnail.jpg')
}

#slideCanvas.theme-pitch-deck {
    --slide-bg-color: #0b1120;
    --slide-bg-image: radial-gradient(95% 80% at 82% 14%, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 60%),
		repeating-linear-gradient(145deg, rgba(96, 165, 250, 0.12) 0 1px, rgba(11, 17, 32, 0) 1px 18px),
		linear-gradient(145deg, #020617 0%, #0b1120 56%, #172554 100%)
}

#slideCanvas.theme-mesh-violet {
    --slide-bg-color: #2e1065;
    --slide-bg-image: radial-gradient(70% 70% at 18% 16%, rgba(244, 114, 182, 0.38) 0%, rgba(244, 114, 182, 0) 64%),
		radial-gradient(70% 70% at 84% 20%, rgba(99, 102, 241, 0.34) 0%, rgba(99, 102, 241, 0) 64%),
		radial-gradient(90% 85% at 52% 82%, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0) 70%),
		linear-gradient(145deg, #1e1b4b 0%, #312e81 52%, #581c87 100%)
}

#slideCanvas.theme-clean-corporate {
    --slide-bg-color: #f8fafc;
    --slide-bg-image: linear-gradient(118deg, rgba(37, 99, 235, 0.1) 0 16%, rgba(37, 99, 235, 0) 16% 100%),
		repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.09) 0 1px, rgba(248, 250, 252, 0) 1px 28px),
		linear-gradient(145deg, #ffffff 0%, #f8fafc 60%, #e2e8f0 100%)
}

#slideCanvas.theme-neo-brutal {
    --slide-bg-color: #fef08a;
    --slide-bg-image: linear-gradient(132deg, rgba(15, 23, 42, 0.16) 0 16%, rgba(15, 23, 42, 0) 16% 100%),
		linear-gradient(225deg, rgba(34, 197, 94, 0.24) 0 12%, rgba(34, 197, 94, 0) 12% 100%),
		linear-gradient(32deg, rgba(37, 99, 235, 0.2) 0 14%, rgba(37, 99, 235, 0) 14% 100%),
		linear-gradient(145deg, #fde047 0%, #fef08a 56%, #fdba74 100%)
}

#slideCanvas.theme-soft-gradient {
    --slide-bg-color: #dbeafe;
    --slide-bg-image: radial-gradient(90% 80% at 20% 18%, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(82% 72% at 84% 24%, rgba(196, 181, 253, 0.48) 0%, rgba(196, 181, 253, 0) 62%),
		linear-gradient(160deg, #ecfeff 0%, #dbeafe 56%, #ddd6fe 100%)
}

#slideCanvas.theme-dark-tech {
    --slide-bg-color: #020617;
    --slide-bg-image: repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0 1px, rgba(2, 6, 23, 0) 1px 24px),
		repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.12) 0 1px, rgba(2, 6, 23, 0) 1px 24px),
		radial-gradient(80% 70% at 82% 18%, rgba(14, 165, 233, 0.26) 0%, rgba(14, 165, 233, 0) 62%),
		linear-gradient(145deg, #020617 0%, #0b1228 54%, #0f1f49 100%)
}

#slideCanvas.theme-photo-dawn,#slideCanvas.theme-photo-ocean {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

#slideCanvas.theme-photo-dawn {
    --slide-bg-color: #2b1f2f;
    --slide-bg-image: radial-gradient(88% 72% at 82% 14%, rgba(251, 191, 36, 0.26) 0%, rgba(251, 191, 36, 0) 60%),
		linear-gradient(145deg, rgba(15, 23, 42, 0.62) 0%, rgba(30, 41, 59, 0.36) 48%, rgba(146, 64, 14, 0.34) 100%),
		url('./theme_photos/dawn.jpg')
}

#slideCanvas.theme-photo-ocean {
    --slide-bg-color: #06253a;
    --slide-bg-image: radial-gradient(84% 68% at 78% 16%, rgba(125, 211, 252, 0.24) 0%, rgba(125, 211, 252, 0) 60%),
		linear-gradient(148deg, rgba(2, 6, 23, 0.64) 0%, rgba(8, 47, 73, 0.36) 58%, rgba(14, 116, 144, 0.3) 100%),
		url('./theme_photos/ocean.jpg')
}

#slideCanvas.theme-photo-mountain {
    --slide-bg-color: #14212f;
    --slide-bg-image: radial-gradient(90% 74% at 18% 12%, rgba(226, 232, 240, 0.2) 0%, rgba(226, 232, 240, 0) 58%),
		linear-gradient(150deg, rgba(15, 23, 42, 0.62) 0%, rgba(30, 41, 59, 0.4) 56%, rgba(12, 74, 110, 0.3) 100%),
		url('./theme_photos/mountain.jpg')
}

#slideCanvas.theme-photo-city,#slideCanvas.theme-photo-mountain,#slideCanvas.theme-photo-sand {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

#slideCanvas.theme-photo-city {
    --slide-bg-color: #090c18;
    --slide-bg-image: radial-gradient(90% 72% at 82% 18%, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 62%),
		linear-gradient(145deg, rgba(2, 6, 23, 0.7) 0%, rgba(15, 23, 42, 0.44) 58%, rgba(30, 64, 175, 0.28) 100%),
		url('./theme_photos/city.jpg')
}

#slideCanvas.theme-photo-sand {
    --slide-bg-color: #d6b28e;
    --slide-bg-image: radial-gradient(86% 68% at 18% 16%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.28) 0%, rgba(251, 191, 36, 0.16) 56%, rgba(120, 53, 15, 0.2) 100%),
		url('./theme_photos/sand.jpg')
}

#slideCanvas.theme-animated-aurora-flow {
    --slide-bg-color: #052730;
    --slide-bg-image: radial-gradient(80% 80% at 10% 15%, rgba(45, 212, 191, 0.3) 0%, rgba(45, 212, 191, 0) 62%),
		radial-gradient(85% 75% at 88% 24%, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0) 64%),
		radial-gradient(82% 70% at 52% 84%, rgba(167, 139, 250, 0.28) 0%, rgba(167, 139, 250, 0) 66%),
		linear-gradient(145deg, #021318 0%, #04252f 56%, #0c3a4a 100%)
}

#slideCanvas.theme-animated-neon-pulse {
    --slide-bg-color: #030712;
    --slide-bg-image: repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.18) 0 1px, rgba(3, 7, 18, 0) 1px 22px),
		repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.14) 0 1px, rgba(3, 7, 18, 0) 1px 22px),
		radial-gradient(68% 60% at 24% 30%, rgba(168, 85, 247, 0.26) 0%, rgba(168, 85, 247, 0) 66%),
		linear-gradient(145deg, #020617 0%, #111827 54%, #1e293b 100%)
}

#slideCanvas.theme-animated-ocean-drift {
    --slide-bg-color: #083344;
    --slide-bg-image: radial-gradient(95% 80% at 18% 24%, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0) 62%),
		radial-gradient(100% 80% at 82% 74%, rgba(14, 165, 233, 0.26) 0%, rgba(14, 165, 233, 0) 65%),
		repeating-linear-gradient(165deg, rgba(125, 211, 252, 0.1) 0 1px, rgba(8, 51, 68, 0) 1px 14px),
		linear-gradient(155deg, #083344 0%, #0c4a6e 52%, #075985 100%)
}

#slideCanvas.theme-animated-sunset-glow {
    --slide-bg-color: #ffedd5;
    --slide-bg-image: radial-gradient(88% 72% at 16% 18%, rgba(251, 113, 133, 0.34) 0%, rgba(251, 113, 133, 0) 62%),
		radial-gradient(86% 72% at 84% 24%, rgba(251, 191, 36, 0.3) 0%, rgba(251, 191, 36, 0) 62%),
		repeating-linear-gradient(155deg, rgba(244, 114, 182, 0.1) 0 2px, rgba(255, 237, 213, 0) 2px 16px),
		linear-gradient(145deg, #fff7ed 0%, #ffedd5 56%, #fecdd3 100%)
}

#slideCanvas.theme-animated-gradient-ember {
    --slide-bg-color: #3b0a0a;
    --slide-bg-image: linear-gradient(140deg, #2b0909 0%, #5b1616 50%, #7a2e13 100%)
}

#slideCanvas.theme-animated-gradient-ocean {
    --slide-bg-color: #04223d;
    --slide-bg-image: linear-gradient(145deg, #031526 0%, #04345f 52%, #0b5a8f 100%)
}

#slideCanvas.theme-animated-gradient-cosmic {
    --slide-bg-color: #020711;
    --slide-bg-image: radial-gradient(120% 90% at 18% 14%, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0) 54%),
		radial-gradient(110% 88% at 84% 18%, rgba(30, 64, 175, 0.12) 0%, rgba(30, 64, 175, 0) 58%),
		linear-gradient(150deg, #01040b 0%, #020a17 48%, #07172d 100%);
    background-size: 180% 180%;
    animation: cosmicCanvasDrift 28s linear infinite,cosmicCanvasHue 14s ease-in-out infinite
}

#slideCanvas.theme-animated-frosted-flashlight {
    --slide-bg-color: #0b1220;
    --slide-bg-image: linear-gradient(150deg, #060b14 0%, #0f172a 52%, #1e293b 100%)
}

.slide-bg-anim,.slide-bg-anim::after,.slide-bg-anim::before {
    position: absolute;
    pointer-events: none;
    will-change: transform,opacity,background-position
}

.slide-bg-anim {
    left: var(--slide-pad);
    top: var(--slide-pad);
    right: var(--slide-pad);
    bottom: var(--slide-pad);
    border-radius: 10px;
    z-index: 1;
    overflow: hidden;
    isolation: isolate
}

.slide-bg-anim::after,.slide-bg-anim::before {
    content: "";
    inset: -24%;
    background-repeat: repeat
}

.slide-bg-anim[class*=theme-animated-] {
    box-shadow: none
}

.slide-bg-anim[class*=theme-animated-],.slide-bg-anim[class*=theme-animated-]::after,.slide-bg-anim[class*=theme-animated-]::before {
    background-repeat: no-repeat!important;
    background-size: 175% 175%!important;
    background-position: center center!important
}

.slide-bg-anim[class*=theme-animated-]:not(.theme-animated-gradient-cosmic),.slide-bg-anim[class*=theme-animated-]:not(.theme-animated-gradient-cosmic)::after,.slide-bg-anim[class*=theme-animated-]:not(.theme-animated-gradient-cosmic)::before {
    background-size: 100% 100%!important;
    background-position: center center!important
}

.slide-bg-anim.theme-animated-frosted-flashlight,.slide-bg-anim.theme-animated-frosted-flashlight::after,.slide-bg-anim.theme-animated-frosted-flashlight::before {
    background-size: 100% 100%!important;
    background-position: center center!important
}

.slide-bg-anim.theme-animated-aurora-flow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='320' viewBox='0 0 540 320'%3E%3Cdefs%3E%3CradialGradient id='g1' cx='18%25' cy='24%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%232dd4bf' stop-opacity='0.42'/%3E%3Cstop offset='100%25' stop-color='%232dd4bf' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2' cx='78%25' cy='26%25' r='56%25'%3E%3Cstop offset='0%25' stop-color='%2338bdf8' stop-opacity='0.38'/%3E%3Cstop offset='100%25' stop-color='%2338bdf8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g3' cx='50%25' cy='82%25' r='58%25'%3E%3Cstop offset='0%25' stop-color='%23a78bfa' stop-opacity='0.32'/%3E%3Cstop offset='100%25' stop-color='%23a78bfa' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='540' height='320' fill='url(%23g1)'/%3E%3Crect width='540' height='320' fill='url(%23g2)'/%3E%3Crect width='540' height='320' fill='url(%23g3)'/%3E%3C/svg%3E");
    background-size: 540px 320px;
    background-repeat: repeat
}

.slide-bg-anim.theme-animated-aurora-flow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Cg fill='none' stroke='%23a5f3fc' stroke-opacity='0.22' stroke-width='2'%3E%3Cpath d='M-20 126 C98 54 214 54 332 124 C432 184 538 184 660 118'/%3E%3Cpath d='M-20 186 C98 114 214 114 332 184 C432 244 538 244 660 178'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .55;
    animation: bgPanAuroraRibbon 18s linear infinite
}

.slide-bg-anim.theme-animated-aurora-flow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='%23ffffff' fill-opacity='0.7'%3E%3Ccircle cx='18' cy='24' r='1.3'/%3E%3Ccircle cx='88' cy='54' r='1.1'/%3E%3Ccircle cx='164' cy='30' r='1.2'/%3E%3Ccircle cx='236' cy='66' r='1.1'/%3E%3Ccircle cx='316' cy='32' r='1.4'/%3E%3Ccircle cx='392' cy='82' r='1.1'/%3E%3Ccircle cx='46' cy='182' r='1.2'/%3E%3Ccircle cx='124' cy='146' r='1.3'/%3E%3Ccircle cx='208' cy='196' r='1.1'/%3E%3Ccircle cx='286' cy='166' r='1.2'/%3E%3Ccircle cx='362' cy='212' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .45;
    animation: bgPanAuroraStars 14s linear infinite
}

.slide-bg-anim.theme-animated-neon-pulse {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cpattern id='grid' width='28' height='28' patternUnits='userSpaceOnUse'%3E%3Cpath d='M28 0H0V28' fill='none' stroke='%2338bdf8' stroke-opacity='0.24' stroke-width='1'/%3E%3C/pattern%3E%3CradialGradient id='n1' cx='28%25' cy='32%25' r='48%25'%3E%3Cstop offset='0%25' stop-color='%23a855f7' stop-opacity='0.36'/%3E%3Cstop offset='100%25' stop-color='%23a855f7' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='n2' cx='74%25' cy='64%25' r='46%25'%3E%3Cstop offset='0%25' stop-color='%2322d3ee' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%2322d3ee' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='420' height='420' fill='url(%23grid)'/%3E%3Crect width='420' height='420' fill='url(%23n1)'/%3E%3Crect width='420' height='420' fill='url(%23n2)'/%3E%3C/svg%3E");
    background-size: 420px 420px;
    background-repeat: repeat
}

.slide-bg-anim.theme-animated-neon-pulse::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%23818cf8' stroke-opacity='0.2' stroke-width='2'%3E%3Ccircle cx='230' cy='230' r='64'/%3E%3Ccircle cx='230' cy='230' r='108'/%3E%3Ccircle cx='230' cy='230' r='152'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .7;
    animation: bgPanNeonRings 22s linear infinite
}

.slide-bg-anim.theme-animated-neon-pulse::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='%2322d3ee' fill-opacity='0.46'%3E%3Ccircle cx='28' cy='34' r='2'/%3E%3Ccircle cx='92' cy='76' r='1.8'/%3E%3Ccircle cx='154' cy='42' r='2.1'/%3E%3Ccircle cx='236' cy='90' r='1.7'/%3E%3Ccircle cx='320' cy='56' r='1.9'/%3E%3Ccircle cx='58' cy='202' r='1.8'/%3E%3Ccircle cx='148' cy='176' r='2.1'/%3E%3Ccircle cx='262' cy='216' r='1.8'/%3E%3Ccircle cx='314' cy='274' r='2'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .42;
    animation: bgPanNeonSpark 10s linear infinite
}

.slide-bg-anim.theme-animated-ocean-drift {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='300' viewBox='0 0 520 300'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2338bdf8' stop-opacity='0.26'/%3E%3Cstop offset='50%25' stop-color='%230ea5e9' stop-opacity='0.18'/%3E%3Cstop offset='100%25' stop-color='%2338bdf8' stop-opacity='0.26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23w)' stroke-width='2.2'%3E%3Cpath d='M0 64 C64 20 130 20 196 64 C262 108 330 108 398 64 C450 30 490 30 520 52'/%3E%3Cpath d='M0 124 C64 80 130 80 196 124 C262 168 330 168 398 124 C450 90 490 90 520 112'/%3E%3Cpath d='M0 184 C64 140 130 140 196 184 C262 228 330 228 398 184 C450 150 490 150 520 172'/%3E%3Cpath d='M0 244 C64 200 130 200 196 244 C262 288 330 288 398 244 C450 210 490 210 520 232'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 520px 300px;
    background-repeat: repeat
}

.slide-bg-anim.theme-animated-ocean-drift::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='300' viewBox='0 0 520 300'%3E%3Cg fill='none' stroke='%23bae6fd' stroke-opacity='0.2' stroke-width='1.6'%3E%3Cpath d='M0 92 C78 52 150 52 230 92 C312 132 386 132 520 88'/%3E%3Cpath d='M0 162 C78 122 150 122 230 162 C312 202 386 202 520 158'/%3E%3Cpath d='M0 232 C78 192 150 192 230 232 C312 272 386 272 520 228'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .54;
    animation: bgPanOceanDepth 20s linear infinite,oceanDepthBreath 9s ease-in-out infinite
}

.slide-bg-anim.theme-animated-ocean-drift::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Cg fill='%23e0f2fe' fill-opacity='0.34'%3E%3Ccircle cx='22' cy='242' r='2.3'/%3E%3Ccircle cx='78' cy='228' r='2'/%3E%3Ccircle cx='136' cy='246' r='2.2'/%3E%3Ccircle cx='204' cy='234' r='2.1'/%3E%3Ccircle cx='268' cy='248' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .38;
    animation: bgPanOceanBubbles 9s linear infinite
}

.slide-bg-anim.theme-animated-sunset-glow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320'%3E%3Cdefs%3E%3CradialGradient id='s1' cx='20%25' cy='20%25' r='58%25'%3E%3Cstop offset='0%25' stop-color='%23fb7185' stop-opacity='0.34'/%3E%3Cstop offset='100%25' stop-color='%23fb7185' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='s2' cx='82%25' cy='24%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23fbbf24' stop-opacity='0.32'/%3E%3Cstop offset='100%25' stop-color='%23fbbf24' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='520' height='320' fill='url(%23s1)'/%3E%3Crect width='520' height='320' fill='url(%23s2)'/%3E%3C/svg%3E");
    background-size: 520px 320px;
    background-repeat: repeat
}

.slide-bg-anim.theme-animated-sunset-glow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320'%3E%3Cg fill='none' stroke='%23fda4af' stroke-opacity='0.24' stroke-width='2'%3E%3Cpath d='M0 84 C90 46 172 46 252 84 C334 122 418 122 520 82'/%3E%3Cpath d='M0 156 C90 118 172 118 252 156 C334 194 418 194 520 154'/%3E%3Cpath d='M0 230 C90 192 172 192 252 230 C334 268 418 268 520 228'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .5;
    animation: bgPanSunsetRibbon 22s linear infinite
}

.slide-bg-anim.theme-animated-sunset-glow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='%23ffffff' fill-opacity='0.18'%3E%3Ccircle cx='24' cy='30' r='1.2'/%3E%3Ccircle cx='82' cy='42' r='1'/%3E%3Ccircle cx='142' cy='28' r='1.1'/%3E%3Ccircle cx='204' cy='46' r='1'/%3E%3Ccircle cx='274' cy='34' r='1.2'/%3E%3Ccircle cx='332' cy='52' r='1'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .35;
    animation: bgPanSunsetGrain 12s linear infinite
}

.slide-bg-anim.theme-animated-gradient-ember {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='420' viewBox='0 0 700 420'%3E%3Cdefs%3E%3ClinearGradient id='e1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fb7185' stop-opacity='0.52'/%3E%3Cstop offset='50%25' stop-color='%23f97316' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23f59e0b' stop-opacity='0.45'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='700' height='420' fill='url(%23e1)'/%3E%3C/svg%3E");
    background-size: 700px 420px;
    background-repeat: repeat
}

.slide-bg-anim.theme-animated-gradient-ember::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320'%3E%3Cdefs%3E%3CradialGradient id='e2' cx='20%25' cy='24%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%23fb7185' stop-opacity='0.28'/%3E%3Cstop offset='100%25' stop-color='%23fb7185' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='520' height='320' fill='url(%23e2)'/%3E%3C/svg%3E");
    opacity: .45;
    animation: bgPanGradEmberGlow 14s linear infinite
}

.slide-bg-anim.theme-animated-gradient-ember::after {
    opacity: .36;
    animation: emberGlowBreath 6.5s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-ocean {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='420' viewBox='0 0 700 420'%3E%3Cdefs%3E%3ClinearGradient id='o1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2314b8a6' stop-opacity='0.44'/%3E%3Cstop offset='50%25' stop-color='%230ea5e9' stop-opacity='0.46'/%3E%3Cstop offset='100%25' stop-color='%233b82f6' stop-opacity='0.42'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='700' height='420' fill='url(%23o1)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.slide-bg-anim.theme-animated-gradient-ocean::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='340' viewBox='0 0 560 340'%3E%3Cdefs%3E%3CradialGradient id='o2' cx='76%25' cy='20%25' r='62%25'%3E%3Cstop offset='0%25' stop-color='%2360a5fa' stop-opacity='0.24'/%3E%3Cstop offset='100%25' stop-color='%2360a5fa' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='560' height='340' fill='url(%23o2)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: .52;
    animation: oceanGradientShimmerStrong 5.8s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-ocean::after {
    background-image: linear-gradient(180deg,rgba(224,242,254,.16)0,rgba(224,242,254,0) 44%,rgba(2,132,199,.1) 100%);
    opacity: .5;
    animation: oceanGradientShimmerStrong 4.8s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-cosmic,.slide-bg-anim.theme-animated-gradient-cosmic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'%3E%3Cdefs%3E%3CradialGradient id='hazeA' cx='26%25' cy='26%25' r='42%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5' stop-opacity='0.16'/%3E%3Cstop offset='100%25' stop-color='%234f46e5' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='hazeB' cx='76%25' cy='18%25' r='38%25'%3E%3Cstop offset='0%25' stop-color='%233b82f6' stop-opacity='0.14'/%3E%3Cstop offset='100%25' stop-color='%233b82f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='hazeC' cx='52%25' cy='78%25' r='46%25'%3E%3Cstop offset='0%25' stop-color='%232563eb' stop-opacity='0.12'/%3E%3Cstop offset='100%25' stop-color='%232563eb' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1280' height='720' fill='url(%23hazeA)'/%3E%3Crect width='1280' height='720' fill='url(%23hazeB)'/%3E%3Crect width='1280' height='720' fill='url(%23hazeC)'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .76;
    mix-blend-mode: screen;
    animation: cosmicSkyBreath 12s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-cosmic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='42' cy='36' r='0.7' fill-opacity='0.44'/%3E%3Ccircle cx='108' cy='62' r='1.3' fill-opacity='0.84'/%3E%3Ccircle cx='176' cy='28' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='248' cy='84' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='332' cy='42' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='406' cy='96' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='488' cy='54' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='562' cy='102' r='1.5' fill-opacity='0.88'/%3E%3Ccircle cx='648' cy='38' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='724' cy='92' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='802' cy='48' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='876' cy='112' r='1.9' fill-opacity='0.96'/%3E%3Ccircle cx='964' cy='64' r='1.2' fill-opacity='0.76'/%3E%3Ccircle cx='1036' cy='118' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='1118' cy='44' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='1196' cy='98' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='78' cy='210' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='156' cy='246' r='1.5' fill-opacity='0.88'/%3E%3Ccircle cx='244' cy='196' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='326' cy='254' r='1.9' fill-opacity='0.96'/%3E%3Ccircle cx='418' cy='218' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='496' cy='262' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='592' cy='206' r='0.9' fill-opacity='0.6'/%3E%3Ccircle cx='670' cy='270' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='756' cy='224' r='1.1' fill-opacity='0.7'/%3E%3Ccircle cx='834' cy='282' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='926' cy='236' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='1002' cy='294' r='1.9' fill-opacity='0.96'/%3E%3Ccircle cx='1094' cy='248' r='1.0' fill-opacity='0.68'/%3E%3Ccircle cx='1176' cy='304' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='136' cy='396' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='226' cy='438' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='318' cy='388' r='1.0' fill-opacity='0.68'/%3E%3Ccircle cx='402' cy='446' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='498' cy='404' r='0.9' fill-opacity='0.6'/%3E%3Ccircle cx='582' cy='454' r='1.5' fill-opacity='0.88'/%3E%3Ccircle cx='676' cy='414' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='762' cy='466' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='858' cy='422' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='944' cy='478' r='1.9' fill-opacity='0.96'/%3E%3Ccircle cx='1038' cy='432' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='1126' cy='486' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='1220' cy='444' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='94' cy='572' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='188' cy='624' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='282' cy='582' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='370' cy='636' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='466' cy='592' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='556' cy='646' r='1.9' fill-opacity='0.96'/%3E%3Ccircle cx='650' cy='606' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='742' cy='660' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='840' cy='616' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='930' cy='668' r='1.8' fill-opacity='0.94'/%3E%3Ccircle cx='1026' cy='626' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='1118' cy='678' r='1.6' fill-opacity='0.9'/%3E%3Ccircle cx='1212' cy='636' r='1.0' fill-opacity='0.66'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .82;
    filter: blur(.1px);
    animation: cosmicStarTwinkle 4.6s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-cosmic::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'%3E%3Cdefs%3E%3CradialGradient id='dust1' cx='22%25' cy='30%25' r='44%25'%3E%3Cstop offset='0%25' stop-color='%23c4b5fd' stop-opacity='0.22'/%3E%3Cstop offset='100%25' stop-color='%23c4b5fd' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='dust2' cx='72%25' cy='46%25' r='40%25'%3E%3Cstop offset='0%25' stop-color='%2393c5fd' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%2393c5fd' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='dust3' cx='48%25' cy='72%25' r='36%25'%3E%3Cstop offset='0%25' stop-color='%23bfdbfe' stop-opacity='0.16'/%3E%3Cstop offset='100%25' stop-color='%23bfdbfe' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1280' height='720' fill='url(%23dust1)'/%3E%3Crect width='1280' height='720' fill='url(%23dust2)'/%3E%3Crect width='1280' height='720' fill='url(%23dust3)'/%3E%3C/svg%3E"),radial-gradient(120% 78%at 50% 14%,rgba(186,220,255,.2)0,rgba(186,220,255,0) 64%);
    background-size: 100% 100%,100% 100%;
    background-repeat: no-repeat,no-repeat;
    opacity: .58;
    mix-blend-mode: screen;
    animation: cosmicDustFloat 10s ease-in-out infinite,cosmicDustTwinkle 7s ease-in-out infinite
}

.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-dust-cluster {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(18px);
    will-change: transform,opacity;
    z-index: 4
}

.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-depth-vignette,.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-starfield-far,.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-starfield-near {
    position: absolute;
    inset: -24%;
    pointer-events: none;
    will-change: transform,opacity
}

.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-starfield-far {
    z-index: 1;
    mix-blend-mode: screen;
    opacity: .34;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle at center,#000 46%,rgba(0,0,0,.78) 68%,transparent 100%);
    mask-image: radial-gradient(circle at center,#000 46%,rgba(0,0,0,.78) 68%,transparent 100%);
    background-size: 160% 160%;
    background-position: center center;
    background: radial-gradient(circle at 8% 14%,rgba(255,255,255,.35)0 1px,transparent 1.8px),radial-gradient(circle at 18% 32%,rgba(186,220,255,.3)0 1px,transparent 1.9px),radial-gradient(circle at 30% 16%,rgba(255,255,255,.33)0 1px,transparent 1.8px),radial-gradient(circle at 42% 36%,rgba(186,220,255,.3)0 1px,transparent 1.9px),radial-gradient(circle at 54% 18%,rgba(255,255,255,.34)0 1px,transparent 1.8px),radial-gradient(circle at 66% 32%,rgba(186,220,255,.3)0 1px,transparent 1.9px),radial-gradient(circle at 78% 14%,rgba(255,255,255,.33)0 1px,transparent 1.8px),radial-gradient(circle at 90% 34%,rgba(186,220,255,.29)0 1px,transparent 1.9px),radial-gradient(circle at 12% 66%,rgba(255,255,255,.34)0 1px,transparent 1.8px),radial-gradient(circle at 26% 78%,rgba(186,220,255,.29)0 1px,transparent 1.9px),radial-gradient(circle at 38% 62%,rgba(255,255,255,.33)0 1px,transparent 1.8px),radial-gradient(circle at 52% 80%,rgba(186,220,255,.3)0 1px,transparent 1.9px),radial-gradient(circle at 66% 64%,rgba(255,255,255,.33)0 1px,transparent 1.8px),radial-gradient(circle at 82% 82%,rgba(186,220,255,.3)0 1px,transparent 1.9px)
}

.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-starfield-near {
    z-index: 3;
    mix-blend-mode: screen;
    opacity: .42;
    filter: blur(.2px);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle at center,#000 44%,rgba(0,0,0,.75) 66%,transparent 100%);
    mask-image: radial-gradient(circle at center,#000 44%,rgba(0,0,0,.75) 66%,transparent 100%);
    background-size: 165% 165%;
    background-position: center center;
    background: radial-gradient(circle at 10% 22%,rgba(255,255,255,.55)0 1.4px,transparent 2.3px),radial-gradient(circle at 24% 10%,rgba(211,229,255,.5)0 1.3px,transparent 2.2px),radial-gradient(circle at 36% 28%,rgba(255,255,255,.56)0 1.5px,transparent 2.4px),radial-gradient(circle at 52% 12%,rgba(211,229,255,.48)0 1.3px,transparent 2.2px),radial-gradient(circle at 68% 24%,rgba(255,255,255,.54)0 1.4px,transparent 2.3px),radial-gradient(circle at 84% 10%,rgba(211,229,255,.5)0 1.3px,transparent 2.2px),radial-gradient(circle at 16% 54%,rgba(255,255,255,.54)0 1.4px,transparent 2.3px),radial-gradient(circle at 34% 66%,rgba(211,229,255,.49)0 1.3px,transparent 2.2px),radial-gradient(circle at 50% 56%,rgba(255,255,255,.55)0 1.4px,transparent 2.3px),radial-gradient(circle at 72% 70%,rgba(211,229,255,.5)0 1.3px,transparent 2.2px),radial-gradient(circle at 88% 58%,rgba(255,255,255,.54)0 1.4px,transparent 2.3px),radial-gradient(circle at 22% 88%,rgba(211,229,255,.5)0 1.3px,transparent 2.2px),radial-gradient(circle at 44% 82%,rgba(255,255,255,.55)0 1.4px,transparent 2.3px),radial-gradient(circle at 64% 92%,rgba(211,229,255,.5)0 1.3px,transparent 2.2px),radial-gradient(circle at 86% 86%,rgba(255,255,255,.54)0 1.4px,transparent 2.3px)
}

.slide-bg-anim.theme-animated-gradient-cosmic .cosmic-depth-vignette {
    z-index: 5;
    opacity: .42;
    background-size: 140% 140%;
    background-position: center center;
    background: radial-gradient(130% 95%at 50% 50%,rgba(2,8,22,0) 48%,rgba(2,8,22,.5) 78%,rgba(1,4,12,.78) 100%)
}

.slide-bg-anim.theme-animated-frosted-flashlight {
    background-image: radial-gradient(circle at 50% 50%,rgba(255,255,255,.1)0,rgba(203,213,225,.04) 42%,rgba(15,23,42,0) 72%),repeating-linear-gradient(115deg,rgba(255,255,255,.035)0 1px,rgba(2,6,23,0) 1px 15px);
    opacity: .62;
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    animation: bgPanFrostedNoise 18s linear infinite
}

.slide-bg-anim.theme-animated-frosted-flashlight::before {
    background-image: radial-gradient(circle at 30% 38%,rgba(255,255,255,.88)0,rgba(254,240,138,.54) 12%,rgba(250,204,21,.24) 22%,rgba(250,204,21,.06) 34%,rgba(250,204,21,0) 48%);
    background-repeat: no-repeat;
    filter: blur(2px);
    mix-blend-mode: screen;
    opacity: .85;
    animation: bgFlashlightSweep 7.8s ease-in-out infinite alternate
}

.slide-bg-anim.theme-animated-frosted-flashlight::after {
    background-image: radial-gradient(circle at 58% 52%,rgba(255,255,255,.18)0,rgba(255,255,255,0) 26%),linear-gradient(160deg,rgba(255,255,255,.08)0,rgba(255,255,255,.02) 48%,rgba(148,163,184,.03) 100%);
    background-repeat: no-repeat;
    filter: blur(1px);
    opacity: .45;
    animation: bgGlassBreath 6.5s ease-in-out infinite
}

.slide-bg-anim.theme-animated-aurora-flow {
    animation-duration: 9.6s,3.2s!important
}

.slide-bg-anim.theme-animated-aurora-flow::before {
    animation-duration: 7.2s!important
}

.slide-bg-anim.theme-animated-aurora-flow::after {
    animation-duration: 5.6s!important
}

.slide-bg-anim.theme-animated-neon-pulse {
    animation-duration: 6.4s,2.8s!important
}

.slide-bg-anim.theme-animated-neon-pulse::before {
    animation-duration: 8.8s!important
}

.slide-bg-anim.theme-animated-neon-pulse::after {
    animation-duration: 4s!important
}

.slide-bg-anim.theme-animated-ocean-drift {
    animation-duration: 4.8s!important
}

.slide-bg-anim.theme-animated-ocean-drift::before {
    animation-duration: 8s,3.6s!important
}

.slide-bg-anim.theme-animated-ocean-drift::after {
    animation-duration: 3.6s!important
}

.slide-bg-anim.theme-animated-sunset-glow {
    animation-duration: 6.4s!important
}

.slide-bg-anim.theme-animated-sunset-glow::before {
    animation-duration: 8.8s!important
}

.slide-bg-anim.theme-animated-sunset-glow::after {
    animation-duration: 4.8s!important
}

.slide-bg-anim.theme-animated-gradient-ember {
    animation-duration: 8s!important
}

.slide-bg-anim.theme-animated-gradient-ember::before {
    animation-duration: 5.6s!important
}

.slide-bg-anim.theme-animated-gradient-ember::after {
    animation-duration: 2.6s!important
}

.slide-bg-anim.theme-animated-gradient-ocean {
    animation-duration: 3s!important
}

.slide-bg-anim.theme-animated-gradient-ocean::before {
    animation-duration: 2.32s!important
}

.slide-bg-anim.theme-animated-gradient-ocean::after {
    animation-duration: 1.92s!important
}

.slide-bg-anim.theme-animated-gradient-cosmic {
    animation-duration: 4.8s!important
}

.slide-bg-anim.theme-animated-gradient-cosmic::before {
    animation-duration: 1.84s!important
}

.slide-bg-anim.theme-animated-gradient-cosmic::after {
    animation-duration: 4s,2.8s!important
}

.slide-bg-anim.theme-animated-frosted-flashlight {
    animation-duration: 7.2s!important
}

.slide-bg-anim.theme-animated-frosted-flashlight::before {
    animation-duration: 3.12s!important
}

.slide-bg-anim.theme-animated-frosted-flashlight::after {
    animation-duration: 2.6s!important
}

@media (prefers-reduced-motion:reduce) {
    .slide-bg-anim.theme-animated-aurora-flow,.slide-bg-anim.theme-animated-frosted-flashlight,.slide-bg-anim.theme-animated-gradient-cosmic,.slide-bg-anim.theme-animated-gradient-ember,.slide-bg-anim.theme-animated-gradient-ocean,.slide-bg-anim.theme-animated-neon-pulse,.slide-bg-anim.theme-animated-ocean-drift,.slide-bg-anim.theme-animated-sunset-glow {
        animation-duration: 24s!important;
        animation-timing-function: linear!important
    }

    .slide-bg-anim.theme-animated-aurora-flow::after,.slide-bg-anim.theme-animated-aurora-flow::before,.slide-bg-anim.theme-animated-frosted-flashlight::after,.slide-bg-anim.theme-animated-frosted-flashlight::before,.slide-bg-anim.theme-animated-gradient-cosmic::after,.slide-bg-anim.theme-animated-gradient-cosmic::before,.slide-bg-anim.theme-animated-gradient-ember::after,.slide-bg-anim.theme-animated-gradient-ember::before,.slide-bg-anim.theme-animated-gradient-ocean::after,.slide-bg-anim.theme-animated-gradient-ocean::before,.slide-bg-anim.theme-animated-neon-pulse::after,.slide-bg-anim.theme-animated-neon-pulse::before,.slide-bg-anim.theme-animated-ocean-drift::after,.slide-bg-anim.theme-animated-ocean-drift::before,.slide-bg-anim.theme-animated-sunset-glow::after,.slide-bg-anim.theme-animated-sunset-glow::before {
        animation-duration: 28s!important;
        animation-timing-function: linear!important
    }

    #slideCanvas.theme-animated-gradient-cosmic {
        animation-duration: 28s!important
    }
}

.anim-slide {
    animation: animSlideBasic 420ms ease
}

.anim-fade {
    animation: animFadeIn 420ms ease
}

.anim-zoom {
    animation: animZoomIn 420ms ease
}

.anim-lift {
    animation: animLiftIn 460ms ease
}

.anim-swipe {
    animation: animSwipeIn 460ms ease
}

.anim-blur-in {
    animation: animBlurFocusIn 520ms ease
}

.anim-curtain {
    animation: animCurtainCenter 520ms ease
}

.anim-cinematic {
    animation: animCinematicIn 560ms ease
}

.anim-rotate-zoom {
    animation: animRotateZoomIn 520ms ease
}

.anim-slide-up {
    animation: animSlideUp 420ms ease
}

.anim-slide-left {
    animation: animSlideLeft 420ms ease
}

.anim-slide-right {
    animation: animSlideRight 420ms ease
}

.anim-pop {
    animation: animPop 420ms ease
}

.anim-float {
    animation: animFloat 800ms ease
}

.anim-flip {
    animation: animFlip 520ms ease;
    transform-style: preserve-3d
}

.anim-blur {
    animation: animBlurIn 520ms ease
}

.anim-elastic {
    animation: animElastic 620ms cubic-bezier(.22,1.2,.36,1)
}

.anim-glitch {
    animation: animGlitch 420ms steps(2,end)
}

.anim-reveal-up {
    animation: animRevealUp 520ms ease
}

.anim-spiral-in {
    animation: animSpiralIn 540ms ease
}

.anim-drift-right {
    animation: animDriftRight 520ms ease
}

.anim-flash {
    animation: animFlashIn 420ms ease
}

.anim-wave-in {
    animation: animWaveIn 520ms ease
}

.anim-drop-in {
    animation: animDropIn 520ms ease
}

.anim-rubber-band {
    animation: animRubberBand 540ms ease
}

.anim-tilt-in {
    animation: animTiltIn 520ms ease
}

.anim-pulse-in {
    animation: animPulseIn 500ms ease
}

.anim-curtain-down {
    animation: animCurtainDown 520ms ease
}

#slideCanvas.transition-fade {
    animation: slideFade 260ms ease
}

#slideCanvas.transition-slide {
    animation: slideSlide 260ms ease
}

.slide-block {
    position: absolute;
    box-sizing: border-box;
    overflow: visible;
    cursor: default;
    writing-mode: horizontal-tb!important;
    text-orientation: mixed!important;
    border: 1px dashed rgba(148,163,184,.55);
    border-radius: 4px;
    transition: box-shadow .12s ease,transform .12s
}

.slide-block:not(.selected):hover {
    border-color: rgba(148,163,184,.85)
}

.slide-block[contenteditable=true] {
    cursor: text;
    writing-mode: horizontal-tb!important;
    text-orientation: mixed!important
}

.slide-block .block-content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    outline: 0;
    border: 0;
    background: 0 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word
}

.slide-block *,.slide-block[contenteditable=true] * {
    writing-mode: horizontal-tb!important;
    text-orientation: mixed!important
}

.slide-block.draggable {
    cursor: move
}

.slide-block.selected {
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    border-style: solid;
    border-color: rgba(37,99,235,.45);
    outline: 2px solid rgba(59,130,246,.85);
    outline-offset: 1px
}

.slide-block.has-animation-badge::after {
    position: absolute;
    top: 18px;
    left: 8px;
    display: inline-flex!important;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(15,23,42,.9);
    color: #fff;
    border: 1px solid rgba(15,23,42,.35);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    z-index: 260;
    pointer-events: none;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    content: "Anim: "attr(data-anim-label)
}

.slide-block.table-block.has-animation-badge::after {
    left: 36px;
    top: 18px
}

.slide-block.media-block.has-animation-badge::after {
    left: 10px;
    top: 18px
}

.slide-block.placeholder {
    caret-color: #333
}

.slide-block.placeholder::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    white-space: pre-wrap;
    overflow: hidden;
    padding: inherit
}

.slide-block.media-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248,250,252,.9);
    overflow: visible
}

.slide-block.media-block.media-block-image {
    position: relative;
    display: block
}

.slide-block.media-block.media-block-audio {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 8px 10px;
    box-sizing: border-box
}

.slide-block.media-block.media-block-audio .audio-wrapper {
    margin: 0;
    height: 100%;
    gap: 6px;
    justify-content: center
}

.slide-block.media-block.media-block-audio .audio-caption {
    width: min(92%,720px);
    max-width: 100%;
    background: 0 0
}

.slide-block.media-block.media-block-image .image-caption {
    max-width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    flex: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(2px);
    z-index: 2
}

.slide-bg-custom-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 0
}

#slideCanvas.grid-on .slide-bg-custom-image {
    background-image: linear-gradient(to right,rgba(148,163,184,.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.2) 1px,transparent 1px),var(--slide-custom-bg-image)!important;
    background-size: 20px 20px,20px 20px,cover;
    background-position: 0 0,0 0,center
}

#slideCanvas.has-custom-bg-image {
    background-image: none!important
}

.slide-block.media-block.media-block-chart,.slide-block.media-block.media-block-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px;
    box-sizing: border-box;
    min-height: 0
}

.slide-block.media-block.media-block-chart .image-caption,.slide-block.media-block.media-block-diagram .image-caption {
    position: static;
    background: 0 0;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.slide-block.media-block.media-block-chart .image-caption {
    margin: 0 0 8px
}

.slide-block.media-block.media-block-chart .figure-title,.slide-block.media-block.media-block-diagram .figure-title {
    display: block;
    text-align: center;
    width: auto;
    font-style: italic
}

.slide-block.media-block.media-block-chart .figure-title {
    color: #4a4a4a
}

.chart-color-input,.image-caption .chart-color-input {
    display: none!important;
    margin-left: 8px;
    border: 0;
    width: 28px;
    height: 20px;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none
}

.slide-block.media-block.media-block-chart .editor-chart-canvas,.slide-block.media-block.media-block-chart canvas {
    width: 100%!important;
    height: 100%!important;
    flex: 1 1 auto;
    min-height: 120px;
    display: block
}

.slide-block.media-block.media-block-diagram {
    padding: 4px;
    background: rgba(248,250,252,.72);
    border: 1px solid rgba(148,163,184,.32);
    box-shadow: 0 10px 22px rgba(15,23,42,.12)
}

.slide-block.media-block.media-block-diagram .image-caption {
    margin: 0 0 4px;
    font-size: 1.02rem
}

.slide-block.media-block.media-block-diagram .figure-title {
    color: #334155;
    font-weight: 600
}

.slide-block.media-block.media-block-diagram .diagram-stage {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 110px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.3)
}

.slide-block.media-block.media-block-diagram .diagram-svg {
    width: 100%;
    height: 100%;
    display: block
}

.slide-block.media-block.media-block-image .figure-title {
    max-width: 100%;
    word-break: break-word
}

.slide-block.media-block:not(.media-block-image) iframe,.slide-block.media-block:not(.media-block-image) img,.slide-block.media-block:not(.media-block-image) video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(148,163,184,.5);
    border-radius: 8px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 1px 2px rgba(15,23,42,.08)
}

.slide-block.media-block.media-block-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: 0 0;
    display: block;
    pointer-events: none;
    z-index: 1
}

.media-select-overlay {
    position: absolute;
    inset: 0;
    background: 0 0;
    pointer-events: auto;
    cursor: pointer
}

.slide-rotate-handle {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: grab;
    user-select: none;
    z-index: 400;
    pointer-events: auto
}

.slide-block .image-resizable--presentation {
    background: 0 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform-origin: center center
}

.slide-block .image-resizable--presentation .image-box {
    background: 0 0;
    border-radius: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0
}

.slide-block .image-resizable--presentation .image-media-holder {
    height: 100%
}

.media-delete-btn,.media-image-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    align-items: center
}

.media-delete-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,.9);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    user-select: none;
    pointer-events: auto;
    z-index: 6
}

.media-delete-btn:hover,.media-image-action-btn.media-image-delete-btn:hover {
    background: #dc2626
}

.media-image-actions {
    display: inline-flex;
    gap: 6px;
    z-index: 8
}

.media-image-actions .media-delete-btn {
    position: static;
    top: auto;
    right: auto
}

.media-image-action-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0;
    background: rgba(30,41,59,.9)
}

.media-image-action-btn:hover {
    background: rgba(51,65,85,.98)
}

.media-image-action-btn.is-active {
    box-shadow: 0 0 0 2px rgba(56,189,248,.7),0 2px 6px rgba(0,0,0,.2)
}

.media-image-action-btn.media-image-delete-btn {
    font-size: 14px;
    background: rgba(239,68,68,.92)
}

.drag-handle,.slide-bg-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 12
}

.drag-handle {
    top: -10px;
    left: 0;
    right: 0;
    height: 14px;
    cursor: move;
    background: 0 0;
    z-index: 210
}

.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    z-index: 200
}

.handle-nw {
    left: -5px;
    top: -5px;
    cursor: nwse-resize
}

.handle-ne {
    right: -5px;
    top: -5px;
    cursor: nesw-resize
}

.handle-sw {
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize
}

.handle-se {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize
}

#blockProps input[type=color],#blockProps input[type=number],#blockProps select {
    margin: 6px 0 8px;
    width: 100%
}

#blockProps label {
    display: block;
    font-size: .9rem;
    margin-bottom: 6px
}

.slide-grid {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    display: none
}

.slide-grid.enabled {
    display: block;
    background-image: linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px)
}

#slideCanvas>.slide-grid {
    z-index: 2
}

#slideCanvas>.slide-block {
    z-index: 300
}

@media (max-width:880px) {
    #presentationSection>div {
        flex-direction: column!important;
        gap: 12px
    }

    .slides-list {
        width: 100%!important;
        max-height: 180px
    }
}

.editor-highlight-block {
    background-color: #fff8c6;
    padding: 10px 12px;
    border-radius: 6px;
    margin: 6px 0;
    overflow: auto
}

.editor-highlight-block .highlight-title,.editor-highlight-block figcaption.highlight-title {
    font-weight: 700;
    margin-bottom: 8px;
    outline: 0
}

.editor-highlight-block .highlight-title[contenteditable]:empty:before,.editor-highlight-block figcaption.highlight-title[contenteditable]:empty:before {
    content: "Заголовок";
    color: #6b7280
}

.editor-highlight-block .highlight-body {
    overflow: visible
}

#editor,#editor * {
    -webkit-user-select: text!important;
    -moz-user-select: text!important;
    -ms-user-select: text!important;
    user-select: text!important
}

#editor img,#topicContentInner .topic-content__body,#topicContentInner .topic-content__body *,.image-resizable img {
    -webkit-user-select: none!important;
    user-select: none!important
}

.topic-content__body h2 {
    font-size: 1.35rem
}

.topic-content__body h3 {
    font-size: 1.2rem
}

.topic-content__body h4 {
    font-size: 1.05rem
}

.topic-content__body p {
    margin: 8px 0
}

.topic-content__body ol,.topic-content__body ul {
    margin: 10px 0 10px 18px;
    padding: 0
}

.topic-content__body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0
}

.topic-content__body blockquote {
    border-left: 3px solid #d7deeb;
    margin: 10px 0;
    padding: 6px 10px;
    background: #f8fafc;
    color: #334155
}

.topic-content__body code,.topic-content__body pre {
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    font-size: .95em
}

.topic-content__body code {
    background: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px
}

.topic-content__body pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto
}

.topic-content__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: .98em
}

.topic-content__body td,.topic-content__body th {
    border: var(--editor-table-border-width, 1px) solid var(--editor-table-border-color, #e5e7eb);
    padding: 8px;
    text-align: left
}

#editor tr:nth-child(even),.topic-content__body tr:nth-child(even) {
    background: #f8fafc
}

#editor table,.editor-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: .98em
}

#editor table.editor-table--resizing,.editor-table.editor-table--resizing {
    user-select: none;
    -webkit-user-select: none;
    cursor: col-resize
}

#editor td,#editor th {
    border: var(--editor-table-border-width, 1px) solid var(--editor-table-border-color, #e5e7eb);
    padding: 8px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0
}

.table-inline-menu {
    position: absolute;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
    z-index: 1400
}

.table-inline-menu.is-active {
    display: inline-flex
}

.table-inline-btn,.table-inline-color {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    width: 34px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.table-inline-btn {
    color: #334155;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background-color .12s ease,border-color .12s ease
}

.table-inline-btn:hover,.table-inline-color:hover {
    background: #eef2ff
}

.table-inline-color {
    overflow: hidden
}

.table-inline-color-input {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    width: 22px;
    height: 18px;
    background: 0 0;
    cursor: pointer
}

.table-inline-color-input::-webkit-color-swatch-wrapper {
    padding: 0
}

.table-inline-color-input::-webkit-color-swatch {
    border: 1px solid #cbd5e1;
    border-radius: 4px
}

.table-inline-sep {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 2px
}

.editor-inline-menu {
    position: absolute;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
    z-index: 1401
}

.editor-inline-menu.is-active {
    display: inline-flex
}

.editor-inline-btn,.editor-inline-color {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    width: 28px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.editor-inline-btn {
    color: #334155;
    font-size: 12px;
    line-height: 1;
    padding: 0
}

.editor-inline-btn:hover,.editor-inline-color:hover {
    background: #eef2ff
}

.editor-inline-color {
    overflow: hidden
}

.editor-inline-color-input {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 18px;
    background: 0 0;
    cursor: pointer
}

.editor-inline-fontfamily {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px
}

.editor-inline-fontfamily-select {
    border: 0;
    background: 0 0;
    height: 22px;
    outline: 0;
    color: #334155;
    font-size: 12px;
    min-width: 108px
}

.editor-inline-fontsize-select {
    min-width: 56px
}

.editor-inline-color-input::-webkit-color-swatch-wrapper {
    padding: 0
}

.editor-inline-color-input::-webkit-color-swatch {
    border: 1px solid #cbd5e1;
    border-radius: 4px
}

.editor-inline-fontsize {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px
}

.editor-inline-fontsize-select {
    border: 0;
    background: 0 0;
    color: #334155;
    font-size: 12px;
    height: 24px;
    outline: 0;
    cursor: pointer
}

.editor-inline-sep {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 2px
}

.editor-table--striped tr:nth-child(even) {
    background: #f1f5f9
}

.editor-table--borderless td,.editor-table--borderless th {
    border: 0
}

.editor-table--compact td,.editor-table--compact th {
    padding: 4px 6px;
    font-size: .92em
}

.topic-content__body hr {
    border: 0;
    border-top: 2px solid #cbd5e1;
    height: 0;
    display: block;
    margin: 14px 0
}

.topic-content__body .image-resize-handle,.topic-content__body .image-rotate-handle,.topic-content__body .img-controls,.topic-content__body .resize-handle {
    display: none!important
}

#testsList li.test-item:hover {
    background-color: #f0f0f0
}

#testsList li.test-item span {
    flex: 1;
    cursor: pointer
}

#testsList li.test-item button.item-delete {
    margin-left: 8px;
    flex-shrink: 0
}

.sidebar-inner {
    max-width: 100%;
    overflow-x: hidden;
    z-index: 2
}

.sidebar-inner .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.sidebar-inner .buttons button {
    flex: 1 1 auto
}

.sidebar-inner .button,.sidebar-inner .buttons button {
    max-width: 100%;
    white-space: nowrap
}

.sidebar-entity-buttons {
    align-items: center;
    justify-content: space-between
}

.sidebar-entity-actions {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto
}

.sidebar-entity-actions .button.sidebar-icon-btn {
    width: 36px;
    min-width: 36px;
    height: 32px;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.sidebar-entity-actions .button.sidebar-icon-btn .icon {
    margin: 0
}

#editor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,.05)
}

#editor .image-box {
    margin: 12px 0;
    padding: 6px;
    border-radius: 6px;
    background-color: #f5f5f5
}

#editor .image-box img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px
}

#editor iframe {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box
}

#editor h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #243b6b;
    border-bottom: 2px solid rgba(36,59,107,.25);
    padding-bottom: 6px
}

#editor h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #374151;
    margin: 16px 0 10px;
    text-transform: uppercase;
    letter-spacing: .05em
}

#editor ol,#editor ul {
    margin: 12px 0;
    padding-left: 1.5rem;
    list-style-position: inside
}

#editor ul {
    list-style-type: disc
}

#editor ol {
    list-style-type: decimal
}

#editor ol li,#editor ul li {
    margin-bottom: 8px;
    line-height: 1.6
}

#editor ol li::marker,#editor ul li::marker {
    color: #3273dc;
    font-weight: 700
}

#themeSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

#contentForm.content-form-tests-mode,main.column.content-main-tests-mode,main.column.content-main-tests-mode>.admin-panel-box.content-panel-tests-mode {
    flex: 0 0 auto!important;
    min-height: 0!important
}

#contentForm.content-form-tests-mode .content-type-tabs {
    margin-bottom: 12px!important
}

#contentForm.content-form-tests-mode #testSection,#contentForm.content-form-tests-mode #testsListSection {
    margin-top: 0!important
}

#contentForm.content-form-tests-mode .test-card {
    background: 0 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-height: 0!important
}

#contentForm.content-form-tests-mode #testsList {
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-height: none
}

#contentForm.content-form-tests-mode #testsList li.test-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    padding: 10px 12px
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.editor-toolbar .toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px
}

.editor-toolbar .toolbar-label {
    font-size: .75rem;
    color: #64748b;
    margin-right: 4px;
    white-space: nowrap
}

.editor-toolbar .button {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    min-height: 30px;
    padding: 0 10px;
    font-weight: 500;
    border-radius: 8px
}

.editor-toolbar .button:hover {
    background: #f7fbff;
    border-color: #dbeafe
}

.content-type-tabs .button.is-disabled,.content-type-tabs .button[disabled] {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.12);
    box-shadow: none
}

.tab-btn-mobile-lecture {
    display: none
}

#mobileEditorBlockedNotice {
    border-radius: 12px
}

.editor-toolbar .editor-color-btn {
    position: relative;
    overflow: hidden
}

.editor-toolbar .editor-color-btn input[type=color] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0
}

.editor-toolbar .toolbar-icon {
    width: 14px;
    height: 14px;
    fill: currentColor
}

#testSection {
    margin-top: 16px
}

#testSection .test-card {
    min-height: 420px
}

.login-container {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15,23,42,.08)
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.login-form button,.login-form input {
    padding: 10px 12px;
    border: 1px solid #d7dce3;
    border-radius: 8px
}

.login-form button {
    margin-top: 8px;
    border: 0;
    background: #3273dc;
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

.oauth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: #6b7280;
    font-size: .9rem
}

.oauth-divider::after,.oauth-divider::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    font-weight: 600;
    transition: transform .1s ease,box-shadow .12s ease
}

.oauth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15,23,42,.1)
}

.oauth-google {
    background: #fff;
    color: #1f2937
}

.oauth-telegram-widget {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 50px
}

.oauth-telegram-widget iframe,
.oauth-telegram-widget > span,
.oauth-telegram-widget > div {
    max-width: 100%
}

.oauth-apple {
    background: #111827;
    color: #fff;
    border-color: #111827
}

.test-card {
    background: linear-gradient(145deg,#f9fbff,#fff);
    border: 1px solid #e4e8f1;
    border-radius: 12px;
    padding: 18px 18px 20px;
    box-shadow: 0 6px 18px rgba(17,24,39,.08)
}

.test-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.test-card__eyebrow {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 4px
}

.test-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 2px
}

.test-card__hint {
    font-size: 13px;
    color: #4b5563;
    margin: 0
}

.test-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.test-title-input {
    border-radius: 10px;
    border: 1px solid #d7deeb;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    padding: 10px 12px
}

.test-questions {
    border: 1px dashed #c7d2fe;
    background: #f8f9ff;
    border-radius: 10px;
    padding: 12px;
    min-height: 80px;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden
}

.add-question-btn {
    align-self: flex-start;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(37,99,235,.18);
    font-weight: 600
}

.question-block {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    box-shadow: none;
    margin-bottom: 14px
}

.question-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px
}

.question-block__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #0f172a
}

.question-block__input {
    margin: 6px 0 10px
}

#testRunQuestion .exam-question-input,.question-block .exam-question-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d7deeb;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
    padding: 9px 12px;
    color: #111827;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .15s ease,box-shadow .15s ease,background-color .15s ease
}

#testRunQuestion .exam-question-input::placeholder,.question-block .exam-question-input::placeholder {
    color: #94a3b8
}

#testRunQuestion .exam-question-input:focus,.question-block .exam-question-input:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15)
}

.question-block .exam-question-input--inline {
    flex: 1 1 0;
    min-width: 0
}

#testRunQuestion .exam-question-checkbox,.question-block .exam-question-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #3b82f6;
    cursor: pointer
}

#testRunBox {
    position: relative;
}

.test-run-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#testRunQuestion.test-run-question-root,
#testRunQuestion.test-run-question-root .test-run-protected,
#testRunQuestion.test-run-question-root .test-run-protected *:not(textarea):not(input):not(audio):not(button):not(label) {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#testRunQuestion.test-run-question-root textarea,
#testRunQuestion.test-run-question-root input,
#testRunQuestion.test-run-question-root audio {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

#testRunQuestion.test-run-question-root img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.test-run-shield {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 12px;
    background: rgba(15, 23, 42, .45);
    pointer-events: none;
}

.test-run-shield[hidden] {
    display: none !important;
}

.question-block__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0
}

.question-block__section {
    margin-bottom: 8px
}

.question-block .answer-remove-btn,.question-block .remove-answer-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

.question-block .answer-remove-btn .icon,.question-block .remove-answer-btn .icon {
    margin: 0
}

.question-block__preview {
    margin: 6px 0
}

.question-block__manual-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.4
}

.manual-answers-box {
    max-width: 340px
}

.manual-answers-box summary {
    cursor: pointer;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600
}

.manual-answers-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.manual-answer-item {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc
}

.manual-review-list {
    display: grid;
    gap: 10px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px
}

.manual-review-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc
}

.manual-review-item__header {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px
}

.manual-review-item__answer {
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
    white-space: pre-wrap;
    margin-bottom: 8px
}

.manual-review-item__score-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.manual-review-item__score-label {
    min-width: 96px;
    font-size: 12px;
    color: #1f2937
}

.manual-review-item__score-row .manual-review-score {
    max-width: 120px
}

body.has-editor-fullscreen::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1190
}

.editor-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 480px;
    min-height: 480px;
    max-height: 480px;
    overflow: hidden!important;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.editor-area::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.editor-fullscreen {
    position: fixed;
    inset: 12px;
    transform: none;
    width: auto;
    height: auto;
    z-index: 1200;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.editor-fullscreen .editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 1201;
    background: #fff;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e7eb
}

.editor-fullscreen .editor-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0!important;
    height: auto!important;
    max-height: none!important;
    overflow: auto!important;
    font-size: inherit;
    line-height: inherit
}

.editor-fullscreen .editor-scale-wrap {
    min-height: 0;
    flex: 1 1 auto;
    display: inline-block;
    overflow: auto;
    max-height: 100%
}

.editor-fullscreen.editor-mobile-fit .editor-scale-wrap {
    display: block;
    width: 100%!important;
    max-width: 100%!important
}

.editor-fullscreen.editor-mobile-fit #editor {
    width: 100%!important;
    max-width: 100%!important;
    box-sizing: border-box
}

.editor-fullscreen.editor-mobile-fit #editor .image-resizable,
.editor-fullscreen.editor-mobile-fit #editor .editor-chart-figure,
.editor-fullscreen.editor-mobile-fit #editor .editor-diagram-figure,
.editor-fullscreen.editor-mobile-fit #editor iframe {
    width: 100%!important;
    max-width: 100%!important;
    box-sizing: border-box
}

body.has-editor-fullscreen {
    overflow: auto
}

.slide-overflow-shake {
    animation: slide-shake .35s ease-in-out
}

.image-resizable {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: default
}

.image-resizable img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none
}

.image-box,.image-media-holder {
    position: relative;
    display: block;
    width: 100%
}

.image-media-holder canvas,.image-media-holder iframe,.image-media-holder img,.image-media-holder video {
    width: 100%;
    height: 100%;
    display: block
}

.image-media-holder iframe,.image-media-holder img,.image-media-holder video {
    object-fit: contain
}

.image-resizable.editor-chart-figure .image-box {
    height: 320px;
    min-height: 120px
}

.image-resizable.editor-chart-figure .image-media-holder {
    height: 100%
}

.image-resizable.editor-chart-figure .image-box .editor-chart-canvas,.image-resizable.editor-chart-figure .image-box canvas {
    width: 100%!important;
    height: 100%!important
}

.image-resizable.editor-chart-figure>.editor-chart-canvas,.image-resizable.editor-chart-figure>canvas {
    height: 320px!important
}

@media (max-width:768px) {
    .image-resizable.editor-chart-figure .image-box {
        height: 260px
    }
}

.image-resizable .image-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    background: #3273dc;
    border-radius: 50%;
    user-select: none;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    border: 2px solid #fff;
    transform: translate(-50%,-50%)
}

.image-resizable .handle-nw {
    left: 0;
    top: 0;
    cursor: nwse-resize
}

.image-resizable .handle-ne {
    left: 100%;
    top: 0;
    cursor: nesw-resize
}

.image-resizable .handle-sw {
    left: 0;
    top: 100%;
    cursor: nesw-resize
}

.image-resizable .handle-se {
    left: 100%;
    top: 100%;
    cursor: nwse-resize
}

.image-resizable .image-rotate-handle {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: grab;
    user-select: none;
    pointer-events: auto
}

.slide-block .resize-handle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    z-index: 400;
    pointer-events: auto
}

.slide-block .handle-nw {
    left: -6px;
    top: -6px
}

.slide-block .handle-ne {
    right: -6px;
    top: -6px
}

.slide-block .handle-sw {
    left: -6px;
    bottom: -6px
}

.slide-block .handle-se {
    right: -6px;
    bottom: -6px
}

.slide-block .resize-handle:hover {
    background: #1d4ed8
}

.image-resizable .img-controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
    z-index: 5
}

.image-resizable .img-controls button {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.08);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px
}

.image-caption {
    margin-top: 8px;
    font-size: .95rem;
    font-style: italic;
    text-align: center;
    color: #4a4a4a;
    line-height: 1.4;
    width: 100%;
    display: block
}

.image-caption .figure-title {
    display: inline-block;
    min-width: 120px;
    outline: 0;
    border-bottom: 1px dashed transparent;
    cursor: pointer;
    transition: border-color .15s ease;
    max-width: 100%;
    word-break: break-word
}

.image-caption .image-caption-input {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
    text-align: center
}

.image-caption .figure-title:hover {
    border-bottom-color: #b5b5b5
}

.image-caption .figure-title-editing,.image-caption .figure-title[contenteditable=true] {
    border-bottom-color: #b5b5b5;
    cursor: text
}

#editor *,.image-side-para {
    overflow-wrap: break-word;
    word-break: break-word
}

.image-side-para {
    display: block;
    overflow: hidden
}

#editor .image-side-para ol,#editor .image-side-para ul {
    list-style-position: inside!important;
    padding-left: 0!important;
    margin-left: 0!important
}

#editor .image-side-para li {
    padding-left: 0!important;
    margin-left: 0!important;
    text-indent: 0!important
}

#editor .media-left,#editor .media-right {
    max-width: 40%
}

#editor .media-left img,#editor .media-right img {
    width: 100%;
    height: auto;
    border-radius: 4px
}

#editor * {
    max-width: 100%;
    box-sizing: border-box
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px
}

.avatar-sq img {
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06)
}

.user-meta {
    line-height: 1
}

.table.is-hoverable tbody tr:hover {
    background: #fbfbfd
}

.progress {
    height: 14px;
    border-radius: 6px
}

.muted {
    color: #6b7280
}

a:focus,button:focus,input:focus,select:focus,textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(50,115,220,.1)
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s ease-in-out infinite
}

.skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite
}

.skeleton-text {
    height: 1em;
    border-radius: 4px;
    margin: .5em 0
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    border-radius: 4px;
    margin-bottom: 1em
}

.form-group {
    margin-bottom: 1.5rem
}

.form-group label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
    color: var(--text)
}

.form-group input,.form-group select,.form-group textarea {
    width: 100%;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color .2s,box-shadow .2s
}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(50,115,220,.1)
}

.form-group.error input,.form-group.error select,.form-group.error textarea {
    border-color: #e74c3c
}

.error-message {
    color: #e74c3c;
    font-size: .875rem;
    margin-top: .25rem;
    display: block
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1)
}

.btn:active {
    transform: translateY(0)
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.modal {
    z-index: 1200
}

.modal.is-active {
    animation: modalFadeIn .2s ease-out
}

.modal-background {
    background: radial-gradient(1200px 520px at 12% -10%,rgba(50,115,220,.18),transparent 55%),radial-gradient(900px 460px at 110% 120%,rgba(30,64,175,.14),transparent 60%),rgba(15,23,42,.44);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.modal-content {
    width: min(740px,calc(100vw - 32px));
    margin: 0 auto
}

.modal-content>.box {
    position: relative;
    margin: 0;
    border-radius: 16px;
    border: 1px solid #dbe4f2;
    background: linear-gradient(165deg,#f8fbff 0,#fff 100%);
    box-shadow: 0 28px 60px rgba(15,23,42,.22),0 8px 24px rgba(15,23,42,.12);
    padding: 20px 22px 18px;
    transform: translateY(10px) scale(.985);
    opacity: 0;
    transition: transform .2s ease,opacity .2s ease
}

.modal.is-active .modal-content>.box {
    transform: translateY(0) scale(1);
    opacity: 1
}

.modal-content .title.is-5 {
    margin: 0 28px 12px 0;
    font-size: 1.1rem;
    letter-spacing: .01em;
    color: #0f172a
}

.modal-content .subtitle.is-6 {
    margin-top: -4px;
    margin-bottom: 12px;
    color: #64748b
}

.modal-content .label {
    color: #334155;
    font-weight: 600;
    margin-bottom: .38rem
}

.modal-content .input,.modal-content .select select,.modal-content .textarea {
    border: 1px solid #d4deed;
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgba(15,23,42,.02);
    transition: border-color .14s ease,box-shadow .14s ease
}

.modal-content .input:focus,.modal-content .select select:focus,.modal-content .textarea:focus {
    border-color: #3273dc;
    box-shadow: 0 0 0 3px rgba(50,115,220,.16)
}

.modal-content .help {
    color: #6b7280
}

.modal-content .field.is-grouped.is-grouped-right {
    margin-top: 14px
}

.modal-content .button {
    border-radius: 10px
}

.modal-content .button.is-link,.modal-content .button.is-primary {
    background: linear-gradient(90deg,#3273dc,#2557c6);
    border-color: #285dc8;
    color: #fff
}

.modal-content .button.is-link:hover,.modal-content .button.is-primary:hover {
    background: linear-gradient(90deg,#2e68c4,#234fb3)
}

.modal-content .table-container {
    border: 1px solid #e3e8f3;
    border-radius: 10px;
    background: #fff
}

.modal-content .table {
    margin-bottom: 0
}

.modal .modal-close.is-large {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    border: 1px solid #dbe4f2;
    box-shadow: 0 4px 10px rgba(15,23,42,.14)
}

.modal .modal-close.is-large::after,.modal .modal-close.is-large::before {
    background-color: #334155
}

.import-examples-modal__content {
    width: min(980px,calc(100vw - 32px))
}

.import-examples-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px
}

.import-examples-head__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    background: linear-gradient(145deg,rgba(191,219,254,.55),rgba(224,231,255,.85));
    border: 1px solid rgba(148,163,184,.35)
}

.import-examples-tabs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    margin-bottom: 12px;
    padding: 5px;
    border: 1px solid #d5dfef;
    border-radius: 12px;
    background: linear-gradient(165deg,#eef3fb 0,#e8eef8 100%)
}

.import-examples-tabs .import-examples-tab-btn {
    margin: 0!important;
    border-radius: 8px!important;
    border: 1px solid transparent!important;
    background: transparent!important;
    color: #40548f!important;
    font-weight: 700;
    min-height: 40px
}

.import-examples-tabs .import-examples-tab-btn:hover {
    background: rgba(255,255,255,.72)!important;
    color: #2b3d75!important
}

.import-examples-tabs .import-examples-tab-btn.active {
    color: #fff!important;
    background: linear-gradient(90deg,#3273dc,#2557c6)!important;
    border-color: #285dc8!important;
    box-shadow: 0 8px 18px rgba(37,87,198,.28)
}

.import-examples-pane-wrap {
    position: relative;
    min-height: 430px
}

.import-example-card {
    display: flex;
    flex-direction: column;
    min-height: 430px;
    border: 1px solid #dde6f3;
    border-radius: 12px;
    background: linear-gradient(165deg,#f8fbff 0,#fff 100%);
    padding: 12px
}

.import-example-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px
}

.import-example-card__title-wrap {
    min-width: 0
}

.import-example-card__title {
    margin: 0;
    color: #1e293b;
    font-size: .95rem;
    font-weight: 700
}

.import-example-card__meta {
    margin: 2px 0 0;
    color: #64748b;
    font-size: .74rem
}

.import-example-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0
}

.import-example-code {
    margin: 0;
    padding: 12px;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    border: 1px solid #dbe4f2;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
    font-size: .82rem;
    line-height: 1.45;
    overflow: auto;
    white-space: pre
}

.import-example-table-wrap {
    border: 1px solid #dbe4f2;
    border-radius: 10px;
    background: #fff;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0
}

.import-example-table {
    margin: 0;
    min-width: 620px
}

.import-example-table th {
    background: #f4f7fe;
    color: #334155;
    font-weight: 700;
    font-size: .82rem
}

.import-example-table td {
    color: #334155;
    font-size: .8rem;
    vertical-align: top
}

.exam-settings-modal__content {
    width: min(860px,calc(100vw - 32px))
}

.exam-settings-box {
    border-radius: 18px;
    padding: 22px 22px 20px
}

.exam-settings-modal .modal-content>.box {
    transform: none;
    opacity: 1;
    transition: none
}

.exam-settings-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.exam-settings-header__icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    background: linear-gradient(145deg,rgba(191,219,254,.55),rgba(224,231,255,.85));
    border: 1px solid rgba(148,163,184,.35)
}

.exam-settings-header__text {
    min-width: 0
}

.exam-settings-main-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.95rem;
    line-height: 1.2;
    letter-spacing: .005em;
    text-shadow: none;
    font-weight: 800
}

.exam-settings-test-title {
    margin-top: 4px;
    margin-bottom: 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.3;
    text-shadow: none
}

.exam-settings-mode-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px
}

.exam-settings-mode-line__label {
    font-size: .78rem;
    color: #64748b;
    font-weight: 600
}

.exam-settings-mode-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    background: linear-gradient(135deg,#e8f0ff 0,#e0edff 100%);
    border: 1px solid #c8daf8;
    color: #1e3a8a;
    font-size: .76rem;
    font-weight: 700
}

.exam-settings-mode-help {
    margin-top: 4px;
    margin-bottom: 10px!important
}

.exam-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.exam-settings-card {
    border: 1px solid #dde6f3;
    border-radius: 12px;
    background: linear-gradient(165deg,#f8fbff 0,#fdfefe 100%);
    padding: 12px
}

.exam-settings-toggle {
    margin-top: 8px
}

.exam-settings-toggle .checkbox {
    color: #334155;
    font-weight: 600
}

.exam-settings-toggle .help {
    margin-top: 6px;
    margin-bottom: 0
}

.exam-settings-times {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    align-items: start
}

.exam-settings-time-item {
    min-width: 0
}

.exam-settings-time-item .label {
    margin-bottom: 7px;
    display: block;
    min-height: 2.5em;
    white-space: normal;
    line-height: 1.25;
    word-break: break-word
}

.exam-settings-time-item .input {
    width: 100%;
    min-width: 0
}

.exam-settings-written-time .help {
    margin-top: 6px;
    margin-bottom: 0
}

.exam-settings-media-times {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d9e4f5
}

.exam-settings-times--media {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.exam-settings-time-item--wide {
    max-width: 260px
}

.exam-settings-actions {
    margin-top: 16px!important
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    animation: toastSlideIn .3s ease-out;
    max-width: 400px
}

.toast.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb
}

.toast.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb
}

.toast.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb
}

@media (max-width:768px) {
    .landing-hero__content {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .hero-actions .button {
        width: 100%
    }

    .navbar-menu {
        background: #fff;
        box-shadow: 0 8px 16px rgba(0,0,0,.1)
    }

    .modal-content {
        width: calc(100vw - 20px);
        margin: 0 auto;
        max-height: calc(100vh - 2rem);
        overflow-y: auto
    }

    .modal-content>.box {
        border-radius: 13px;
        padding: 16px 14px 14px
    }

    .import-example-code {
        min-height: 180px;
        height: auto
    }

    .import-example-table {
        min-width: 520px
    }

    .import-examples-tabs {
        grid-template-columns: 1fr
    }

    .import-examples-pane-wrap,.import-example-card {
        min-height: 360px
    }

    .exam-settings-grid {
        gap: 10px
    }

    .exam-settings-grid,.exam-settings-times {
        grid-template-columns: 1fr
    }

    .table-container {
        overflow-x: auto
    }

    .table {
        min-width: 600px
    }
}

@media (prefers-contrast:high) {
    :root {
        --accent: #0000ff;
        --border: #000000
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important
    }

    #slideCanvas.theme-animated-gradient-cosmic {
        animation-duration: 28s!important;
        animation-iteration-count: infinite!important
    }

    #slideCanvas .slide-bg-anim[class*=theme-animated-],.slide-bg-anim.theme-animated-gradient-cosmic {
        animation-duration: 28s!important;
        animation-iteration-count: infinite!important;
        animation-timing-function: linear!important
    }

    #slideCanvas .slide-bg-anim[class*=theme-animated-]::after,#slideCanvas .slide-bg-anim[class*=theme-animated-]::before,.slide-bg-anim[class*=theme-animated-]::after,.slide-bg-anim[class*=theme-animated-]::before {
        animation-duration: 32s!important;
        animation-iteration-count: infinite!important;
        animation-timing-function: linear!important
    }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-weight: 600
}

.skip-link:focus {
    top: 6px
}

.audio-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0
}

.audio-wrapper audio {
    width: min(72%,720px);
    max-width: 100%;
    pointer-events: auto
}

.audio-caption,.audio-delete-btn-new {
    display: flex;
    justify-content: center;
    pointer-events: auto
}

.audio-delete-btn-new {
    position: absolute;
    top: -10px;
    right: calc(14% - 8px);
    background: rgba(142,137,137,.8);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    align-items: center;
    z-index: 10;
    user-select: none;
    outline: 0;
    caret-color: transparent
}

.audio-delete-btn-new:hover {
    background: red
}

.audio-caption {
    align-items: baseline;
    gap: 6px;
    width: min(92%,720px);
    max-width: 100%;
    font-size: 14px;
    line-height: 1.35;
    color: #5f6f86
}

.audio-label {
    font-weight: 600;
    color: #4f607a;
    white-space: nowrap;
    user-select: none
}

.audio-title {
    display: inline-block;
    min-width: 120px;
    max-width: 100%;
    color: #1f2d45;
    border-bottom: 1px dashed transparent;
    outline: 0;
    cursor: text;
    overflow-wrap: anywhere
}

.audio-title:empty::before {
    content: "Название";
    color: #8ea0bb
}

.audio-title:focus {
    border-bottom-color: rgba(55,90,150,.45)
}

@media (max-width:960px) {
    .audio-wrapper audio {
        width: min(92%,720px)
    }

    .audio-delete-btn-new {
        right: 4%
    }
}

:root {
    --motion-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.33, 1, 0.68, 1)
}

#slideCanvas[class*=theme-animated-],#slideCanvas[class*=theme-animated-] .slide-bg-anim,#slideCanvas[class*=theme-animated-] .slide-bg-anim::after,#slideCanvas[class*=theme-animated-] .slide-bg-anim::before {
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important
}

#slideCanvas[class*=theme-animated-] {
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-position: center center!important;
    overflow: hidden!important
}

#slideCanvas.theme-animated-ocean-drift {
    --slide-bg-color: #03192d;
    --slide-bg-image: radial-gradient(84% 44% at 50% -12%, rgba(243, 242, 216, 0.46) 0%, rgba(175, 222, 246, 0.2) 24%, rgba(55, 128, 178, 0.06) 52%, rgba(5, 26, 46, 0) 72%),
    radial-gradient(140% 115% at 50% 118%, rgba(1, 9, 20, 0.96) 0%, rgba(2, 12, 27, 0.92) 44%, rgba(3, 25, 49, 0.78) 72%, rgba(6, 53, 84, 0.52) 100%),
    linear-gradient(180deg, #0b5277 0%, #0a3e62 26%, #072b48 52%, #031d36 74%, #021224 100%)!important
}

#slideCanvas.theme-animated-sunset-glow {
    --slide-bg-color: #1c1831;
    --slide-bg-image: radial-gradient(92% 54% at 50% 80%, rgba(255, 192, 122, 0.44) 0%, rgba(255, 156, 106, 0.28) 24%, rgba(205, 108, 130, 0.2) 46%, rgba(74, 63, 104, 0.14) 66%, rgba(24, 20, 43, 0) 84%),
    radial-gradient(148% 120% at 50% -16%, rgba(100, 126, 200, 0.42) 0%, rgba(80, 93, 160, 0.34) 28%, rgba(54, 55, 108, 0.44) 54%, rgba(26, 22, 49, 0.76) 78%, rgba(18, 14, 34, 0.94) 100%),
    linear-gradient(180deg, #3b4f8b 0%, #655189 22%, #b06075 44%, #e08c66 62%, #f2b47a 72%, #3a2d4f 88%, #1d1833 100%)!important
}

#slideCanvas.theme-animated-gradient-ember {
    --slide-bg-color: #180805;
    --slide-bg-image: radial-gradient(86% 58% at 52% 84%, rgba(255, 141, 77, 0.44) 0%, rgba(255, 89, 43, 0.3) 28%, rgba(184, 44, 22, 0.2) 52%, rgba(55, 16, 11, 0.1) 72%, rgba(22, 8, 6, 0) 90%),
    radial-gradient(140% 120% at 50% -14%, rgba(122, 28, 19, 0.62) 0%, rgba(88, 22, 17, 0.54) 30%, rgba(53, 14, 12, 0.64) 58%, rgba(29, 10, 9, 0.84) 78%, rgba(15, 7, 6, 0.96) 100%),
    linear-gradient(170deg, #200a07 0%, #3b100d 22%, #611713 44%, #8a2016 58%, #4f140f 76%, #240b09 100%)!important
}

#slideCanvas.theme-animated-gradient-ocean {
    --slide-bg-color: #031a2f;
    --slide-bg-image: radial-gradient(84% 56% at 52% -8%, rgba(195, 237, 255, 0.34) 0%, rgba(122, 206, 240, 0.2) 24%, rgba(53, 136, 192, 0.12) 48%, rgba(16, 59, 104, 0.06) 68%, rgba(6, 25, 48, 0) 88%),
    radial-gradient(140% 118% at 50% 116%, rgba(2, 11, 23, 0.92) 0%, rgba(3, 18, 37, 0.86) 42%, rgba(4, 34, 65, 0.72) 68%, rgba(8, 71, 118, 0.44) 100%),
    linear-gradient(175deg, #06213b 0%, #073257 20%, #0a4a78 42%, #0b628f 56%, #0a4b76 72%, #072e4f 86%, #041c34 100%)!important
}

#slideCanvas.theme-animated-neon-pulse {
    --slide-bg-color: #08061a;
    --slide-bg-image: radial-gradient(76% 52% at 50% 22%, rgba(184, 86, 255, 0.28) 0%, rgba(184, 86, 255, 0.1) 32%, rgba(184, 86, 255, 0) 62%),
    radial-gradient(88% 62% at 76% 72%, rgba(56, 189, 248, 0.24) 0%, rgba(56, 189, 248, 0.1) 30%, rgba(56, 189, 248, 0) 60%),
    radial-gradient(84% 58% at 20% 68%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0.08) 28%, rgba(34, 211, 238, 0) 58%),
    linear-gradient(170deg, #08061a 0%, #110d2b 24%, #1a1240 46%, #111633 66%, #09081d 100%)!important
}

#slideCanvas.theme-animated-aurora-flow {
    --slide-bg-color: #081126;
    --slide-bg-image: radial-gradient(82% 48% at 50% -10%, rgba(178, 233, 255, 0.26) 0%, rgba(123, 201, 255, 0.14) 26%, rgba(74, 131, 212, 0.08) 48%, rgba(17, 35, 76, 0.06) 68%, rgba(8, 16, 37, 0) 88%),
    radial-gradient(124% 108% at 24% 24%, rgba(74, 222, 188, 0.2) 0%, rgba(74, 222, 188, 0.08) 28%, rgba(74, 222, 188, 0) 60%),
    radial-gradient(132% 112% at 76% 18%, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0.08) 32%, rgba(129, 140, 248, 0) 62%),
    linear-gradient(170deg, #081126 0%, #0b1732 22%, #102248 46%, #122c55 62%, #0c1c3b 80%, #070f23 100%)!important
}

.slide-bg-anim[class*=theme-animated-],.slide-bg-anim[class*=theme-animated-]::after,.slide-bg-anim[class*=theme-animated-]::before {
    backface-visibility: hidden;
    transform: translateZ(0);
    animation-fill-mode: both!important;
    animation-timing-function: var(--motion-ease-soft)!important
}

.slide-bg-anim[class*=theme-animated-] {
    transform: none!important;
    overflow: hidden!important;
    contain: paint;
    clip-path: inset(0 round 10px);
    -webkit-clip-path: inset(0 round 10px)
}

#presentationSection .slide-canvas-wrap.animated-theme-active {
    border-color: transparent!important;
    box-shadow: none!important;
    background: 0 0!important
}

.presentation-fullscreen.presentation-play-mode #slideCanvas,.presentation-fullscreen.presentation-play-mode #slideCanvas[class*=theme-animated-] {
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important
}

.slide-bg-anim.theme-animated-aurora-flow,.slide-bg-anim.theme-animated-neon-pulse {
    background-image: radial-gradient(84% 50%at 50% -10%,rgba(186,238,255,.28)0,rgba(132,207,255,.16) 26%,rgba(80,138,218,.09) 48%,rgba(18,38,79,.06) 68%,rgba(8,16,37,0) 88%),radial-gradient(126% 110%at 24% 24%,rgba(74,222,188,.22)0,rgba(74,222,188,.1) 30%,rgba(74,222,188,0) 60%),radial-gradient(132% 112%at 76% 18%,rgba(129,140,248,.22)0,rgba(129,140,248,.1) 34%,rgba(129,140,248,0) 62%),linear-gradient(170deg,#081127 0,#0b1834 22%,#10234b 46%,#132d58 62%,#0d1d3e 80%,#070f24 100%)!important;
    opacity: 1!important;
    mix-blend-mode: normal!important;
    animation: auroraBorealisPulse 10.4s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-aurora-flow::before {
    inset: -16%!important;
    background-image: linear-gradient(98deg,rgba(74,222,188,0) 18%,rgba(74,222,188,.28) 36%,rgba(74,222,188,0) 58%),linear-gradient(84deg,rgba(129,140,248,0) 16%,rgba(129,140,248,.24) 38%,rgba(129,140,248,0) 62%),linear-gradient(112deg,rgba(56,189,248,0) 22%,rgba(56,189,248,.2) 44%,rgba(56,189,248,0) 66%),radial-gradient(90% 46%at 50% 34%,rgba(199,247,255,.14)0,rgba(199,247,255,0) 72%)!important;
    background-size: 162% 168%,156% 162%,170% 174%,128% 118%!important;
    background-position: 46% 14%,54% 18%,40% 24%,62% 22%!important;
    mix-blend-mode: screen!important;
    filter: blur(1.1px)!important;
    animation: auroraCurtainDrift 8.8s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-aurora-flow::after {
    inset: -12%!important;
    background-image: radial-gradient(circle at 8% 86%,rgba(212,242,255,.32)0 1px,transparent 2.3px),radial-gradient(circle at 18% 78%,rgba(187,222,247,.24)0 1.3px,transparent 2.9px),radial-gradient(circle at 30% 90%,rgba(205,236,255,.28)0 1px,transparent 2.4px),radial-gradient(circle at 44% 74%,rgba(176,215,244,.2)0 1.4px,transparent 3px),radial-gradient(circle at 58% 88%,rgba(199,231,251,.26)0 1.1px,transparent 2.5px),radial-gradient(circle at 72% 80%,rgba(173,210,241,.22)0 1.3px,transparent 2.9px),radial-gradient(circle at 86% 92%,rgba(197,230,251,.25)0 1px,transparent 2.4px),radial-gradient(120% 82%at 50% 100%,rgba(6,12,26,.72)0,rgba(6,12,26,0) 58%)!important;
    background-size: 124% 122%,118% 118%,126% 126%,116% 116%,124% 124%,118% 118%,122% 122%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: screen!important;
    filter: blur(.45px)!important;
    animation: auroraStarFieldDrift 10.2s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-neon-pulse {
    background-image: radial-gradient(78% 54%at 50% 24%,rgba(192,96,255,.32)0,rgba(192,96,255,.12) 32%,rgba(192,96,255,0) 62%),radial-gradient(92% 64%at 76% 74%,rgba(67,198,255,.28)0,rgba(67,198,255,.12) 30%,rgba(67,198,255,0) 60%),radial-gradient(86% 60%at 20% 70%,rgba(52,228,247,.24)0,rgba(52,228,247,.1) 28%,rgba(52,228,247,0) 58%),linear-gradient(170deg,#08061b 0,#120e2e 24%,#1b1344 46%,#121736 66%,#09081f 100%)!important;
    animation: neonCorePulse 8.8s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-neon-pulse::before {
    inset: -16%!important;
    background-image: radial-gradient(circle at 50% 50%,rgba(216,143,255,.14)0 18%,rgba(216,143,255,0) 30%),radial-gradient(circle at 50% 50%,rgba(128,236,255,.12)0 34%,rgba(128,236,255,0) 48%),radial-gradient(circle at 50% 50%,rgba(106,150,255,.1)0 48%,rgba(106,150,255,0) 64%),linear-gradient(90deg,rgba(138,113,255,0) 16%,rgba(138,113,255,.1) 38%,rgba(138,113,255,0) 62%)!important;
    background-size: 126% 126%,148% 148%,168% 168%,170% 156%!important;
    background-position: 50% 50%,42% 42%,58% 58%,50% 50%!important;
    mix-blend-mode: screen!important;
    filter: blur(1px)!important;
    animation: neonRingSweep 7.8s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-neon-pulse::after {
    inset: -12%!important;
    background-image: radial-gradient(circle at 8% 84%,rgba(199,240,255,.32)0 1px,transparent 2.3px),radial-gradient(circle at 18% 76%,rgba(177,215,247,.24)0 1.3px,transparent 2.9px),radial-gradient(circle at 30% 90%,rgba(190,232,255,.28)0 1px,transparent 2.4px),radial-gradient(circle at 44% 74%,rgba(167,205,240,.2)0 1.4px,transparent 3px),radial-gradient(circle at 58% 88%,rgba(184,224,252,.26)0 1.1px,transparent 2.5px),radial-gradient(circle at 72% 80%,rgba(161,200,238,.22)0 1.3px,transparent 2.9px),radial-gradient(circle at 86% 92%,rgba(188,226,252,.25)0 1px,transparent 2.4px),radial-gradient(120% 82%at 50% 100%,rgba(8,8,24,.72)0,rgba(8,8,24,0) 58%)!important;
    background-size: 124% 122%,118% 118%,126% 126%,116% 116%,124% 124%,118% 118%,122% 122%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: screen!important;
    filter: blur(.42px)!important;
    animation: neonSparkDrift 6.8s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-ocean-drift,.slide-bg-anim.theme-animated-sunset-glow {
    background-image: radial-gradient(76% 48%at 50% -10%,rgba(250,245,216,.58)0,rgba(190,231,249,.22) 22%,rgba(67,145,194,.07) 44%,rgba(4,25,44,0) 68%),radial-gradient(140% 112%at 50% 120%,rgba(1,8,20,.95)0,rgba(2,12,26,.91) 42%,rgba(4,27,52,.76) 70%,rgba(7,59,92,.46) 100%),linear-gradient(180deg,#0c5379 0,#0a3f63 25%,#082b48 52%,#041e37 74%,#021326 100%)!important;
    opacity: 1!important;
    mix-blend-mode: normal!important;
    animation: oceanSunPulse 8.2s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-ocean-drift::before {
    inset: -14%!important;
    background-image: radial-gradient(78% 50%at 50% -14%,rgba(248,244,220,.34)0,rgba(199,233,249,.16) 24%,rgba(72,147,198,.04) 52%,rgba(8,36,62,0) 74%),linear-gradient(102deg,rgba(189,228,247,0) 18%,rgba(189,228,247,.17) 38%,rgba(189,228,247,0) 58%),linear-gradient(76deg,rgba(169,216,241,0) 22%,rgba(169,216,241,.13) 42%,rgba(169,216,241,0) 63%),linear-gradient(88deg,rgba(205,236,251,0) 14%,rgba(205,236,251,.09) 46%,rgba(205,236,251,0) 72%)!important;
    background-size: 100% 100%,146% 146%,152% 152%,138% 138%!important;
    background-position: center top,42% 40%,58% 46%,50% 42%!important;
    mix-blend-mode: screen!important;
    filter: blur(.75px)!important;
    animation: oceanRaySway 9.2s var(--motion-ease-smooth) infinite,oceanRayShimmer 5.6s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-ocean-drift::after {
    inset: -10%!important;
    background-image: radial-gradient(circle at 9% 84%,rgba(212,236,248,.42)0 .9px,transparent 2.2px),radial-gradient(circle at 17% 76%,rgba(195,223,240,.32)0 1.2px,transparent 2.8px),radial-gradient(circle at 28% 90%,rgba(209,233,246,.38)0 1px,transparent 2.4px),radial-gradient(circle at 41% 72%,rgba(188,219,238,.28)0 1.4px,transparent 3px),radial-gradient(circle at 54% 88%,rgba(210,234,246,.35)0 1.1px,transparent 2.5px),radial-gradient(circle at 67% 79%,rgba(192,222,239,.3)0 1.3px,transparent 2.9px),radial-gradient(circle at 82% 92%,rgba(210,235,247,.33)0 1px,transparent 2.4px),radial-gradient(circle at 90% 74%,rgba(192,220,238,.26)0 1.4px,transparent 3px),radial-gradient(120% 82%at 50% 118%,rgba(1,10,22,.66)0,rgba(1,10,22,0) 56%)!important;
    background-size: 122% 122%,118% 118%,126% 126%,116% 116%,124% 124%,118% 118%,122% 122%,114% 114%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: screen!important;
    filter: blur(.35px)!important;
    animation: oceanDustRise 7.8s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-sunset-glow {
    background-image: radial-gradient(82% 52%at 50% 82%,rgba(255,199,132,.54)0,rgba(255,163,110,.34) 24%,rgba(214,113,135,.2) 48%,rgba(78,66,108,.14) 68%,rgba(22,18,40,0) 86%),radial-gradient(148% 124%at 50% -20%,rgba(99,126,198,.42)0,rgba(78,92,158,.34) 28%,rgba(53,53,102,.42) 54%,rgba(24,20,44,.76) 78%,rgba(16,13,31,.94) 100%),linear-gradient(180deg,#405392 0,#6b548d 23%,#b36378 44%,#e4956b 61%,#f0b67a 70%,#4c3558 86%,#1f1835 100%)!important;
    animation: sunsetHazePulse 9.6s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-sunset-glow::before {
    inset: -16%!important;
    background-image: radial-gradient(46% 34%at 50% 74%,rgba(255,223,174,.56)0,rgba(255,184,128,.32) 26%,rgba(255,150,118,.16) 44%,rgba(255,140,116,0) 66%),linear-gradient(182deg,rgba(255,228,184,.12)0,rgba(255,228,184,0) 22%),radial-gradient(82% 34%at 46% 50%,rgba(255,170,126,.16)0,rgba(255,170,126,0) 62%),radial-gradient(88% 30%at 56% 58%,rgba(255,145,128,.14)0,rgba(255,145,128,0) 66%)!important;
    background-size: 100% 100%,110% 90%,140% 100%,144% 102%!important;
    background-position: center 74%,50% 42%,46% 50%,56% 58%!important;
    mix-blend-mode: screen!important;
    filter: blur(1.2px)!important;
    animation: sunsetCloudDrift 11.8s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-sunset-glow::after {
    inset: -12%!important;
    background-image: radial-gradient(70% 30%at 52% 72%,rgba(255,206,156,.22)0,rgba(255,206,156,0) 72%),radial-gradient(88% 36%at 44% 66%,rgba(255,174,134,.18)0,rgba(255,174,134,0) 74%),radial-gradient(92% 40%at 60% 62%,rgba(232,136,131,.16)0,rgba(232,136,131,0) 78%),radial-gradient(120% 78%at 50% 100%,rgba(22,16,33,.72)0,rgba(22,16,33,0) 58%)!important;
    background-size: 124% 110%,132% 112%,136% 116%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: soft-light!important;
    filter: blur(.95px)!important;
    animation: sunsetGlowSweep 10.4s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-gradient-ember,.slide-bg-anim.theme-animated-gradient-ocean {
    background-image: radial-gradient(84% 56%at 52% 84%,rgba(255,144,80,.56)0,rgba(255,94,48,.34) 28%,rgba(186,45,24,.22) 52%,rgba(58,17,12,.1) 72%,rgba(24,9,7,0) 90%),radial-gradient(140% 122%at 50% -16%,rgba(122,30,20,.64)0,rgba(90,23,17,.55) 30%,rgba(54,14,12,.66) 58%,rgba(28,10,9,.86) 78%,rgba(14,7,6,.96) 100%),linear-gradient(170deg,#220b08 0,#3d110d 22%,#651915 44%,#8d2117 58%,#53150f 76%,#260c09 100%)!important;
    opacity: 1!important;
    mix-blend-mode: normal!important;
    animation: emberCorePulse 9.6s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-gradient-ember::before {
    inset: -15%!important;
    background-image: radial-gradient(54% 30%at 48% 56%,rgba(255,177,115,.4)0,rgba(255,123,80,.22) 30%,rgba(255,95,71,.12) 48%,rgba(255,95,71,0) 68%),linear-gradient(122deg,rgba(255,188,128,0) 14%,rgba(255,188,128,.16) 36%,rgba(255,188,128,0) 58%),linear-gradient(70deg,rgba(255,141,96,0) 16%,rgba(255,141,96,.13) 42%,rgba(255,141,96,0) 66%),radial-gradient(92% 44%at 50% 50%,rgba(255,209,150,.1)0,rgba(255,209,150,0) 72%)!important;
    background-size: 132% 118%,148% 146%,156% 152%,126% 118%!important;
    background-position: 48% 56%,42% 44%,58% 62%,50% 50%!important;
    mix-blend-mode: screen!important;
    filter: blur(.95px)!important;
    animation: emberVeinFlow 8.8s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-gradient-ember::after {
    inset: -12%!important;
    background-image: radial-gradient(circle at 8% 86%,rgba(255,215,167,.36)0 1px,transparent 2.3px),radial-gradient(circle at 18% 78%,rgba(255,186,132,.3)0 1.2px,transparent 2.8px),radial-gradient(circle at 30% 90%,rgba(255,204,156,.34)0 1px,transparent 2.4px),radial-gradient(circle at 44% 76%,rgba(255,170,120,.26)0 1.4px,transparent 3px),radial-gradient(circle at 58% 88%,rgba(255,196,145,.32)0 1.1px,transparent 2.5px),radial-gradient(circle at 72% 80%,rgba(255,168,118,.28)0 1.3px,transparent 2.9px),radial-gradient(circle at 86% 92%,rgba(255,201,152,.3)0 1px,transparent 2.4px),radial-gradient(120% 82%at 50% 100%,rgba(17,8,7,.72)0,rgba(17,8,7,0) 58%)!important;
    background-size: 124% 122%,118% 118%,126% 126%,116% 116%,124% 124%,118% 118%,122% 122%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: screen!important;
    filter: blur(.52px)!important;
    animation: emberSparkDrift 7.4s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-gradient-ocean {
    background-image: radial-gradient(86% 58%at 52% -8%,rgba(200,240,255,.38)0,rgba(128,210,242,.22) 24%,rgba(56,142,197,.12) 48%,rgba(17,64,108,.06) 68%,rgba(6,25,48,0) 88%),radial-gradient(140% 118%at 50% 116%,rgba(2,11,23,.94)0,rgba(3,18,37,.88) 42%,rgba(4,34,65,.74) 68%,rgba(8,71,118,.46) 100%),linear-gradient(175deg,#06233d 0,#08355c 20%,#0b4f7f 42%,#0d6999 56%,#0b4f7f 72%,#07325a 86%,#041e37 100%)!important;
    animation: oceanCurrentPulse 9.2s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-gradient-ocean::before {
    inset: -15%!important;
    background-image: linear-gradient(116deg,rgba(186,236,255,0) 12%,rgba(186,236,255,.2) 34%,rgba(186,236,255,0) 56%),linear-gradient(72deg,rgba(145,217,248,0) 18%,rgba(145,217,248,.16) 42%,rgba(145,217,248,0) 66%),radial-gradient(96% 42%at 48% 62%,rgba(174,230,252,.14)0,rgba(174,230,252,0) 70%),radial-gradient(86% 36%at 52% 44%,rgba(151,219,248,.12)0,rgba(151,219,248,0) 72%)!important;
    background-size: 152% 148%,164% 156%,138% 122%,132% 116%!important;
    background-position: 42% 36%,58% 50%,48% 62%,52% 44%!important;
    mix-blend-mode: screen!important;
    filter: blur(.9px)!important;
    animation: oceanCausticsFlow 8.2s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-gradient-ocean::after {
    inset: -12%!important;
    background-image: radial-gradient(circle at 8% 84%,rgba(203,236,251,.34)0 1px,transparent 2.3px),radial-gradient(circle at 18% 76%,rgba(177,220,241,.27)0 1.3px,transparent 2.9px),radial-gradient(circle at 30% 90%,rgba(195,230,248,.3)0 1px,transparent 2.4px),radial-gradient(circle at 44% 74%,rgba(167,214,238,.22)0 1.4px,transparent 3px),radial-gradient(circle at 58% 88%,rgba(191,228,247,.28)0 1.1px,transparent 2.5px),radial-gradient(circle at 72% 80%,rgba(166,212,236,.24)0 1.3px,transparent 2.9px),radial-gradient(circle at 86% 92%,rgba(189,227,246,.27)0 1px,transparent 2.4px),radial-gradient(120% 82%at 50% 100%,rgba(3,13,27,.64)0,rgba(3,13,27,0) 58%)!important;
    background-size: 124% 122%,118% 118%,126% 126%,116% 116%,124% 124%,118% 118%,122% 122%,100% 100%!important;
    background-repeat: no-repeat!important;
    mix-blend-mode: screen!important;
    filter: blur(.45px)!important;
    animation: oceanPlanktonDrift 7s var(--motion-ease-soft) infinite!important
}

.slide-bg-anim.theme-animated-gradient-cosmic {
    animation: motionLayerFloatA 24s var(--motion-ease-smooth) infinite,cosmicSkyBreath 12.5s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-gradient-cosmic::before {
    animation: motionLayerFloatB 18s var(--motion-ease-soft) infinite,cosmicStarTwinkle 6.4s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-gradient-cosmic::after {
    animation: motionLayerFloatC 14s var(--motion-ease-soft) infinite,cosmicDustFloat 11.5s ease-in-out infinite,cosmicDustTwinkle 8.4s ease-in-out infinite!important
}

.slide-bg-anim.theme-animated-frosted-flashlight {
    animation: motionLayerFloatA 19s var(--motion-ease-smooth) infinite!important
}

.slide-bg-anim.theme-animated-frosted-flashlight::before {
    animation: motionLayerFloatB 12s var(--motion-ease-soft) infinite,bgFlashlightSweep 7.8s ease-in-out infinite alternate!important
}

.slide-bg-anim.theme-animated-frosted-flashlight::after {
    animation: motionLayerFloatC 10.5s var(--motion-ease-soft) infinite,bgGlassBreath 7.2s ease-in-out infinite!important
}

#slideCanvas.theme-animated-gradient-cosmic {
    animation-duration: 20s,11s!important;
    animation-timing-function: linear,ease-in-out!important
}

.slide-block[class*=anim-] {
    animation-timing-function: var(--motion-ease-smooth)!important;
    animation-duration: 620ms!important;
    animation-fill-mode: both!important;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.anim-glitch,.anim-rubber-band {
    animation-timing-function: var(--motion-ease-soft)!important;
    animation-duration: 680ms!important
}

#slideCanvas.transition-fade,#slideCanvas.transition-slide {
    animation-duration: 420ms!important;
    animation-timing-function: var(--motion-ease-smooth)!important
}

#slideCanvas.editor-lite-motion .slide-bg-anim[class*=theme-animated-],#slideCanvas.editor-lite-motion .slide-bg-anim[class*=theme-animated-]::after,#slideCanvas.editor-lite-motion .slide-bg-anim[class*=theme-animated-]::before,#slideCanvas.editor-lite-motion.theme-animated-gradient-cosmic,#slideCanvas.editor-lite-motion[class*=theme-animated-] {
    animation-play-state: paused!important
}

@media (prefers-reduced-motion:reduce) {
    #slideCanvas.theme-animated-gradient-cosmic,.slide-bg-anim[class*=theme-animated-],.slide-bg-anim[class*=theme-animated-]::after,.slide-bg-anim[class*=theme-animated-]::before {
        animation-duration: 30s!important;
        animation-iteration-count: infinite!important;
        animation-timing-function: linear!important
    }

    #slideCanvas.transition-fade,#slideCanvas.transition-slide,.slide-block[class*=anim-] {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important
    }
}

@media (max-width:1023px) {
    #main-content.section {
        padding: .75rem .75rem 1.25rem!important
    }

    #main-content>.container {
        max-width: 100%!important;
        padding: 0!important
    }

    body.is-compact-nav .navbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: .45rem .75rem!important
    }

    body.is-compact-nav .navbar .navbar-brand {
        min-height: 3rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    body.is-compact-nav .navbar .navbar-menu {
        display: none!important;
        width: 100%;
        flex-basis: 100%!important;
        flex-direction: column!important;
        align-items: stretch!important;
        justify-content: flex-start!important;
        gap: .5rem!important;
        border-top: 1px solid #edf1f7;
        margin-top: .45rem;
        padding: .65rem 0 .2rem!important;
        background: #fff;
        box-shadow: none!important
    }

    body.is-compact-nav .navbar .navbar-menu.is-active {
        display: flex!important
    }

    body.is-compact-nav .navbar .navbar-start,body.is-compact-nav .navbar .navbar-end {
        width: 100%;
        display: flex!important;
        flex-direction: column!important;
        align-items: stretch!important;
        margin-left: 0!important;
        gap: .15rem!important
    }

    body.is-compact-nav .navbar .navbar-start .navbar-item,body.is-compact-nav .navbar .navbar-end .navbar-item,body.is-compact-nav .navbar .navbar-dropdown .navbar-item {
        width: 100%;
        padding: .58rem .2rem!important;
        justify-content: flex-start;
        white-space: normal;
        overflow-wrap: anywhere
    }

    body.is-compact-nav .navbar .navbar-end .navbar-item,
    body.is-compact-nav .navbar .navbar-auth-links,
    body.is-compact-nav .navbar .navbar-auth-actions {
        gap: .45rem;
        flex-wrap: wrap;
        width: 100%
    }

    body.is-compact-nav .navbar .navbar-auth-links,
    body.is-compact-nav .navbar .navbar-auth-actions {
        flex-direction: column!important;
        align-items: flex-start!important
    }

    body.is-compact-nav .navbar .navbar-auth-divider {
        display: none
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown {
        width: 100%
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown .navbar-dropdown {
        position: static!important;
        width: 100%;
        display: none!important;
        box-shadow: none!important;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-top: 6px;
        background: #f8fbff
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block!important
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown .navbar-link {
        display: flex!important;
        justify-content: space-between;
        align-items: center;
        min-height: 42px;
        width: 100%
    }

    .admin-editor-page .columns.add-content-layout,
    .admin-editor-page .add-content-layout {
        margin: 0!important;
        display: block!important
    }

    .admin-editor-page .columns.add-content-layout>.column,
    .admin-editor-page .add-content-layout>.column,
    .admin-editor-page .add-content-sidebar,
    .admin-editor-page .add-content-main {
        display: block!important;
        flex: none!important;
        width: 100%!important;
        max-width: 100%!important;
        padding: 0!important
    }

    .admin-editor-page .add-content-layout>.add-content-sidebar,
    .admin-editor-page .add-content-sidebar {
        margin-bottom: 12px
    }

    .admin-editor-page .add-content-main,
    .admin-editor-page .add-content-main>.admin-panel-box,
    .admin-editor-page #contentForm,
    .admin-editor-page #themeSection {
        min-width: 0
    }

    .test-card,.admin-card,.admin-panel-box {
        padding: 12px!important
    }
}

@media (max-width:768px) {
    body {
        overflow-x: hidden
    }

    .admin-editor-page,.admin-editor-page .container,.admin-editor-page .columns,.admin-editor-page .column,.admin-editor-page .box,.admin-editor-page .field,.admin-editor-page .control,.admin-editor-page form {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box
    }

    body.is-compact-nav .navbar .navbar-menu {
        display: none!important;
        flex-direction: column!important;
        align-items: stretch!important;
        justify-content: flex-start!important;
        gap: .5rem!important;
        border-top: 1px solid #edf1f7;
        margin-top: .45rem;
        padding: .65rem 0 .2rem!important;
        box-shadow: none!important
    }

    body.is-compact-nav .navbar .navbar-menu.is-active {
        display: flex!important
    }

    body.is-compact-nav .navbar .navbar-start,body.is-compact-nav .navbar .navbar-end {
        width: 100%;
        display: flex!important;
        flex-direction: column!important;
        align-items: stretch!important;
        margin-left: 0!important;
        gap: .15rem!important
    }

    body.is-compact-nav .navbar .navbar-start .navbar-item,body.is-compact-nav .navbar .navbar-end .navbar-item,body.is-compact-nav .navbar .navbar-dropdown .navbar-item {
        width: 100%;
        padding: .58rem .2rem!important;
        justify-content: flex-start
    }

    body.is-compact-nav .navbar .navbar-end .navbar-item,
    body.is-compact-nav .navbar .navbar-auth-links,
    body.is-compact-nav .navbar .navbar-auth-actions {
        gap: .45rem;
        flex-wrap: wrap;
        width: 100%
    }

    body.is-compact-nav .navbar .navbar-auth-links,
    body.is-compact-nav .navbar .navbar-auth-actions {
        flex-direction: column!important;
        align-items: flex-start!important
    }

    body.is-compact-nav .navbar .navbar-auth-divider {
        display: none
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown {
        width: 100%
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown .navbar-dropdown {
        position: static!important;
        width: 100%;
        display: none!important;
        box-shadow: none!important;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-top: 6px;
        background: #f8fbff
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block!important
    }

    body.is-compact-nav .navbar .navbar-item.has-dropdown .navbar-link {
        display: flex!important;
        justify-content: space-between;
        align-items: center;
        min-height: 42px;
        width: 100%
    }

    .admin-page,.admin-shell,.admin-content {
        gap: 12px
    }

    .admin-title {
        font-size: 1.35rem!important
    }

    .admin-shell__hint {
        font-size: .85rem
    }

    .admin-tabs ul {
        display: flex;
        flex-wrap: nowrap!important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px
    }

    .admin-tabs li {
        flex: 0 0 auto
    }

    .admin-tabs li a {
        white-space: nowrap
    }

    .admin-filter-group,.admin-content .field.is-grouped {
        display: flex;
        flex-direction: column;
        align-items: stretch!important;
        gap: 8px
    }

    .admin-filter-group .control,.admin-content .field.is-grouped .control {
        width: 100%
    }

    .admin-content .admin-panel-box {
        overflow-x: auto
    }

    .admin-content .admin-panel-box>.table-container>.table,.admin-content .admin-panel-box>table.table {
        min-width: 680px
    }

    .admin-pagination {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center
    }

    .admin-pagination .pagination-list {
        width: 100%;
        margin-left: 0;
        justify-content: center
    }

    .table {
        min-width: 0!important
    }

    .table-container .table {
        min-width: 640px!important
    }

    .add-content-layout,
    .add-content-layout.columns {
        margin: 0!important;
        display: flex!important;
        flex-direction: column
    }

    .add-content-layout>.column {
        flex: 0 0 100%!important;
        width: 100%!important;
        max-width: 100%!important;
        padding: 0!important
    }

    .add-content-layout>.add-content-sidebar {
        margin-bottom: 12px
    }

    .admin-editor-page .add-content-main,.admin-editor-page .add-content-main>.admin-panel-box,.admin-editor-page #contentForm,.admin-editor-page #themeSection {
        min-width: 0
    }

    .admin-editor-page .admin-panel-box,.admin-editor-page #contentForm,.admin-editor-page #themeSection {
        overflow-x: hidden
    }

    .admin-editor-page .sidebar-inner {
        padding: 10px!important
    }

    .admin-editor-page .sidebar-inner .select,.admin-editor-page .sidebar-inner .select select,.admin-editor-page .sidebar-inner .input,.admin-editor-page .sidebar-inner textarea {
        width: 100%!important;
        max-width: 100%!important;
        min-width: 0!important;
        box-sizing: border-box
    }

    .sidebar-inner .buttons {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        margin-left: 0!important;
        margin-right: 0!important
    }

    .sidebar-inner .button,.sidebar-inner .buttons button {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere
    }

    .sidebar-entity-buttons {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        margin-left: 0!important;
        margin-right: 0!important
    }

    .sidebar-entity-buttons>.button {
        width: 100%!important;
        max-width: 100%!important;
        min-width: 0!important;
        margin-right: 0!important;
        justify-content: center
    }

    .sidebar-entity-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap
    }

    .sidebar-entity-actions .button.sidebar-icon-btn {
        margin-right: 0!important
    }

    .content-type-tabs {
        display: grid!important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 6px
    }

    .content-type-tabs .button {
        width: 100%;
        margin: 0!important;
        border-radius: 8px!important;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere
    }

    .content-type-tabs .tab-btn[data-type="presentation"] {
        display: none!important
    }

    .content-type-tabs .tab-btn-mobile-lecture {
        display: inline-flex!important;
        align-items: center;
        justify-content: center;
        gap: 6px
    }

    .publish-controls-row {
        flex-direction: column!important;
        align-items: stretch!important;
        gap: 10px!important
    }

    .publish-controls-row>* {
        min-width: 0;
        max-width: 100%
    }

    #publishControls .checkbox {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        line-height: 1.35
    }

    #publishControls .button {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere
    }

    #publishControls .button span:last-child,.sidebar-entity-buttons .button span:last-child {
        white-space: normal;
        overflow-wrap: anywhere
    }

    .editor-toolbar,.presentation-toolbar {
        gap: 6px
    }

    .editor-toolbar .toolbar-group,.presentation-toolbar .toolbar-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0
    }

    .editor-toolbar .toolbar-label,.presentation-toolbar .toolbar-label {
        flex: 0 0 100%;
        margin-right: 0;
        margin-bottom: 2px
    }

    .editor-toolbar .button,.presentation-toolbar .button {
        min-height: 32px
    }

    .editor-toolbar .toolbar-group .button {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        max-width: 100%;
        justify-content: center
    }

    .editor-toolbar .toolbar-group .select,.presentation-toolbar .toolbar-group .input,.presentation-toolbar .toolbar-group .select {
        width: 100%;
        max-width: 100%;
        min-width: 0
    }

    .admin-editor-page .editor-area {
        height: min(56vh,420px)!important;
        min-height: 260px!important;
        max-height: min(56vh,420px)!important
    }

    .admin-editor-page #editor {
        font-size: 15px
    }

    .admin-editor-page #editor .image-resizable,.admin-editor-page #editor .editor-chart-figure,.admin-editor-page #editor .editor-diagram-figure {
        display: block!important;
        width: 100%!important;
        max-width: 100%!important;
        box-sizing: border-box
    }

    .admin-editor-page #editor .image-resizable .image-box,.admin-editor-page #editor .image-resizable .image-media-holder,.admin-editor-page #editor .editor-diagram-stage {
        width: 100%!important;
        max-width: 100%!important;
        box-sizing: border-box
    }

    .admin-editor-page #editor canvas,.admin-editor-page #editor iframe,.admin-editor-page #editor img,.admin-editor-page #editor svg,.admin-editor-page #editor video {
        max-width: 100%!important
    }

    .admin-editor-page #testSection .test-card {
        min-height: 0!important
    }

    .editor-fullscreen {
        inset: 6px!important;
        padding: 8px!important;
        border-radius: 10px!important
    }

    .editor-fullscreen .editor-scale-wrap {
        overflow: auto!important;
        -webkit-overflow-scrolling: touch
    }

    .presentation-layout {
        grid-template-columns: 1fr!important;
        gap: 10px!important
    }

    .slides-list {
        max-height: 200px!important
    }

    .slide-canvas-wrap {
        padding: 8px!important;
        border-radius: 10px
    }

    #slideCanvas {
        width: 100%!important;
        min-height: 180px;
        --slide-pad: 10px
    }

    .test-card__header,.question-block__header {
        flex-direction: column;
        align-items: stretch
    }

    .modal-content .columns.is-mobile {
        flex-wrap: wrap
    }

    .modal-content .columns.is-mobile>.column {
        flex: 0 0 100%;
        width: 100%
    }

    .diagram-modal {
        padding: 18px
    }

    .diagram-modal__header {
        align-items: flex-start
    }

    .diagram-modal__layout {
        grid-template-columns: 1fr
    }

    .diagram-modal__grid,.diagram-modal__presets {
        grid-template-columns: 1fr
    }

    .diagram-modal__mini-hint,.diagram-modal__live-pill {
        white-space: normal
    }

    .diagram-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch
    }

    .diagram-modal__actions .button {
        width: 100%
    }

    .question-block__actions {
        width: 100%
    }

    .question-block__actions .button {
        flex: 1 1 auto
    }

    .import-examples-pane-wrap,.import-example-card {
        min-height: 280px!important
    }
}

@media (max-width:480px) {
    .content-type-tabs {
        grid-template-columns: 1fr!important
    }

    .navbar .navbar-brand .navbar-item.logo {
        font-size: 1.1rem!important
    }

    .slide-item__anim-badge {
        display: none
    }

    .editor-toolbar .toolbar-group .button {
        flex: 1 1 100%
    }

    #slideCanvas {
        --slide-pad: 8px
    }
}

.navbar-inline-button,
.navbar-dropdown-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.navbar-inline-button:hover,
.navbar-dropdown-button:hover,
.navbar-inline-button:focus-visible,
.navbar-dropdown-button:focus-visible {
  background: transparent;
  color: inherit;
}

.navbar-dropdown form {
  margin: 0;
}

.navbar-dropdown-button {
  display: block;
  text-align: left;
  width: 100%;
}