:root {
    color-scheme: light;
    --bg: #F1EFFA;
    --mark: #463C9E;
    --leaf: #3AA56A;
    --glow: #FFC93E;
    --caption: #6A6685;
}

:root[data-theme="DARK"] {
    color-scheme: dark;
    --bg: #1F1E24;
    --mark: #F7F6FD;
    --leaf: #6FD49C;
    --caption: #A4A3A8;
}

:root[data-theme="NEWSPAPER"] {
    --bg: #F3EFE6;
    --mark: #1F1D1A;
    --leaf: #1F1D1A;
    --glow: #1F1D1A;
    --caption: #6B655B;
}

:root[data-theme="GLASS"] {
    color-scheme: dark;
    --bg: #0C1033;
    --mark: #F7F6FD;
    --leaf: #6FD49C;
    --caption: #A2A7D4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #1F1E24;
        --mark: #F7F6FD;
        --leaf: #6FD49C;
        --caption: #A4A3A8;
    }
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg);
}

#app {
    position: fixed;
    inset: 0;
}

#splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--bg);
}

:root[data-theme="GLASS"] #splash {
    background:
        radial-gradient(circle calc(max(100vw, 100vh) * 0.28) at 12% 6%, rgba(107, 92, 255, 0.36), transparent),
        radial-gradient(circle calc(max(100vw, 100vh) * 0.22) at 88% 18%, rgba(34, 195, 214, 0.22), transparent),
        radial-gradient(circle calc(max(100vw, 100vh) * 0.3) at 62% 100%, rgba(255, 111, 168, 0.18), transparent),
        var(--bg);
}

#splash .logo {
    width: min(300px, 76vw);
    height: auto;
    overflow: visible;
}

#splash .caption {
    min-height: 1.4em;
    margin: 0;
    font: 15px/1.4 Roboto, "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.01em;
    color: var(--caption);
    opacity: 0;
    transition: opacity 0.6s ease;
}

#splash .caption.visible {
    opacity: 1;
}

#splash.leaving {
    pointer-events: none;
    animation: fade-out 0.45s ease-in forwards;
}

#splash.leaving .logo {
    animation: lift 0.45s ease-in forwards;
}

.ring-only,
.word-en {
    display: none;
}

:root[data-theme="DARK"] .ring-only,
:root[data-theme="NEWSPAPER"] .ring-only,
:root[data-theme="GLASS"] .ring-only,
:root[data-wordmark="en"] .word-en {
    display: inline;
}

:root[data-theme="DARK"] .solid-only,
:root[data-theme="NEWSPAPER"] .solid-only,
:root[data-theme="GLASS"] .solid-only,
:root[data-wordmark="en"] .word-ru {
    display: none;
}

:root[data-wordmark="ru"] .lockup {
    transform: translateX(6.82px);
}

.mark > * {
    transform-box: fill-box;
    transform-origin: center;
}

.trunk {
    fill: var(--mark);
    stroke: var(--mark);
    stroke-width: 6;
    stroke-linejoin: round;
    animation: rise 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.crown {
    fill: var(--mark);
    transform-origin: 50% 100%;
    animation: bloom 0.56s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.node {
    fill: var(--bg);
    animation: pop 0.36s 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.node-right {
    animation-delay: 0.54s;
}

.line {
    fill: none;
    stroke: var(--bg);
    stroke-width: 8;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.3s 0.7s ease-in-out both;
}

.stem {
    animation-duration: 0.26s;
    animation-delay: 0.98s;
}

.ring {
    fill: var(--bg);
    animation: pop 0.3s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.glow {
    fill: var(--glow);
    animation: ignite 0.42s 1.16s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               heartbeat 2.4s 2.4s ease-in-out infinite;
}

.halo {
    fill: none;
    stroke: var(--glow);
    stroke-width: 2;
    opacity: 0;
    animation: burst 0.8s 1.26s ease-out forwards,
               ripple 2.4s 2.4s ease-out infinite;
}

.leaf {
    fill: var(--leaf);
    transform-origin: 0 90%;
    animation: unfurl 0.56s 1.24s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.word path {
    fill: none;
    stroke: var(--mark);
    stroke-width: 6.82;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: write 0.42s ease-in-out both;
}

.word path:nth-child(1) { animation-delay: 1.3s; }
.word path:nth-child(2) { animation-delay: 1.46s; }
.word path:nth-child(3) { animation-delay: 1.66s; animation-duration: 0.2s; }
.word path:nth-child(4) { animation-delay: 1.78s; }
.word path:nth-child(5) { animation-delay: 1.96s; }
.word path:nth-child(6) { animation-delay: 2.14s; }
.word path:nth-child(7) { animation-delay: 2.34s; animation-duration: 0.2s; }

.spark {
    fill: none;
    stroke: var(--glow);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 18 100;
    stroke-dashoffset: 18;
    opacity: 0;
    animation: flow 2.4s 2.4s ease-in infinite;
}

.spark-late {
    animation-delay: 2.52s;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
}

@keyframes bloom {
    from { opacity: 0; transform: scale(0.5); }
}

@keyframes pop {
    from { transform: scale(0); }
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ignite {
    from { opacity: 0; transform: scale(0); }
}

@keyframes burst {
    from { opacity: 0.8; transform: scale(1); }
    to { opacity: 0; transform: scale(2.4); }
}

@keyframes unfurl {
    from { opacity: 0; transform: rotate(-40deg) scale(0.2); }
}

@keyframes write {
    0% { opacity: 0; stroke-dashoffset: 1; }
    1% { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes flow {
    0% { opacity: 0; stroke-dashoffset: 18; }
    8% { opacity: 1; }
    50% { opacity: 1; }
    58%, 100% { opacity: 0; stroke-dashoffset: -88; }
}

@keyframes heartbeat {
    0%, 52%, 100% { transform: scale(1); }
    60% { transform: scale(1.22); }
    70% { transform: scale(0.96); }
}

@keyframes ripple {
    0%, 54% { opacity: 0; transform: scale(1); }
    58% { opacity: 0.7; }
    100% { opacity: 0; transform: scale(2.6); }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes lift {
    to { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    #splash,
    #splash * {
        animation: none !important;
        transition: none !important;
    }

    .line,
    .word path {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    .spark,
    .halo {
        display: none;
    }
}

#saga-print {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    @page landscape {
        size: A4 landscape;
        margin: 0;
    }

    html,
    body {
        height: auto;
        overflow: visible;
        background: #FFFFFF;
    }

    body > *:not(#saga-print) {
        display: none !important;
    }

    #saga-print {
        display: block;
    }

    #saga-print img {
        display: block;
        width: 210mm;
        height: 296.9mm;
        object-fit: contain;
        break-after: page;
    }

    #saga-print img:last-child {
        break-after: auto;
    }

    #saga-print.landscape {
        page: landscape;
    }

    #saga-print.landscape img {
        width: 297mm;
        height: 209.9mm;
    }
}

.textLayer {
    position: absolute;
    inset: 0;
    overflow: clip;
    text-align: initial;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    caret-color: CanvasText;
    z-index: 0;
    --min-font-size: 1;
    --min-font-size-inv: calc(1 / var(--min-font-size));
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
}

.textLayer :is(span, br) {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    user-select: text;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    --scale-x: 1;
    --rotate: 0deg;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.textLayer .markedContent {
    display: contents;
}

.textLayer span[role="img"] {
    cursor: default;
    user-select: none;
}

.textLayer ::selection {
    background: color-mix(in srgb, AccentColor, transparent 50%);
    color: transparent;
}