:root {
    --uz-red: #E5312B;
    --uz-red-rgb: 229 49 43;
    --uz-red-strong: #FF7A70;
    --uz-vine: #7E2E26;
    --uz-vine-thin: #5E241E;
    --uz-pod: rgba(197, 62, 52, 0.5);
    --uz-spore: #C96A5E;
    --uz-guide-minor: rgba(229, 49, 43, 0.05);
    --uz-guide-major: rgba(229, 49, 43, 0.11);
    --uz-guide-strong: rgba(229, 49, 43, 0.34);
    --uz-guide-soft: rgba(229, 49, 43, 0.19);
    --uz-flash-wash: rgba(229, 49, 43, 0.14);
    --uz-lamp-1: #FF5A4E;
    --uz-lamp-2: #F0A21B;
    --uz-lamp-3: #5AA9E6;
    --uz-lamp-4: #4FC96A;
    --uz-fleck-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><g fill='rgba(229,49,43,0.26)'><circle cx='390' cy='135' r='1.05'/><circle cx='165' cy='105' r='1.05'/><circle cx='120' cy='105' r='1.05'/><circle cx='405' cy='60' r='1.05'/><circle cx='150' cy='240' r='1.05'/><circle cx='270' cy='300' r='1.05'/><circle cx='120' cy='75' r='1.05'/><circle cx='270' cy='315' r='1.05'/><circle cx='330' cy='255' r='1.05'/><circle cx='15' cy='420' r='1.05'/><circle cx='135' cy='15' r='1.05'/><circle cx='405' cy='240' r='1.05'/><circle cx='90' cy='390' r='1.05'/><circle cx='405' cy='105' r='1.05'/><circle cx='255' cy='405' r='1.05'/><circle cx='195' cy='90' r='1.05'/><circle cx='165' cy='165' r='1.05'/></g><g stroke='rgba(229,49,43,0.16)' stroke-width='1' fill='none'><path d='M60 45l-30 0'/><path d='M240 105l15 -15'/><path d='M45 45l30 -30'/><path d='M270 435l-30 -30'/><path d='M345 270l0 15l15 -15'/><path d='M360 165l0 15'/><path d='M285 225l0 30'/><path d='M60 135l-30 -30'/><path d='M375 450l0 15'/><path d='M435 255l15 0l15 -15'/><path d='M120 285l-15 -15'/><path d='M360 75l-15 15'/></g></svg>");
}

:root[data-theme="dark"][data-theme="dark"] body {
    background-image: var(--uz-fleck-image);
    background-size: 480px 480px;
}

:root[data-theme="dark"][data-theme="dark"] {
    --blue: var(--red);
    --blue-soft: var(--red-soft);
    --blue-hair: var(--red-soft);
    --blue-strong: var(--uz-red-strong);
    --blue-pure: var(--uz-red);
    --blue-rgb: var(--uz-red-rgb);
    --select: var(--red-soft);
    --guide-minor: var(--uz-guide-minor);
    --guide-major: var(--uz-guide-major);
    --guide-strong: var(--uz-guide-strong);
    --guide-soft: var(--uz-guide-soft);
}

body[data-accent='red'] {
    --header-accent: var(--uz-red);
    --header-accent-strong: var(--uz-red-strong);
    --header-accent-hover: rgb(var(--uz-red-rgb) / 0.65);
    --header-accent-tint: rgb(var(--uz-red-rgb) / 0.16);
    --header-accent-tint-strong: rgb(var(--uz-red-rgb) / 0.3);
}

.uz-layer,
.uz-layer * { pointer-events: none; }

.uz-layer {
    position: fixed;
    inset: 0;
    z-index: var(--layer-note);
    overflow: hidden;
}

.uz-vines {
    position: absolute;
    overflow: hidden;
}

.uz-vines--top    { top: 0;    left: 0; width: 100%; height: 92px; }
.uz-vines--bottom { bottom: 0; left: 0; width: 100%; height: 92px; transform: scaleY(-1); }
.uz-vines--left   { top: 0;    left: 0; width: 84px; height: 100%; }
.uz-vines--right  { top: 0;   right: 0; width: 84px; height: 100%; transform: scaleX(-1); }

.uz-vines__art { display: block; }
.uz-vines--top .uz-vines__art,
.uz-vines--bottom .uz-vines__art { width: 1900px; height: 104px; }
.uz-vines--left .uz-vines__art,
.uz-vines--right .uz-vines__art { width: 96px; height: 1900px; }

.uz-wire  { fill: none; stroke: var(--uz-vine); stroke-width: 2.2; stroke-linecap: round; }
.uz-wire--thin { stroke: var(--uz-vine-thin); stroke-width: 1.4; }

.uz-lamp__cap  { fill: none; stroke: var(--uz-vine); stroke-width: 2; }
.uz-lamp--c1 .uz-lamp__bulb { fill: var(--uz-lamp-1); }
.uz-lamp--c2 .uz-lamp__bulb { fill: var(--uz-lamp-2); }
.uz-lamp--c3 .uz-lamp__bulb { fill: var(--uz-lamp-3); }
.uz-lamp--c4 .uz-lamp__bulb { fill: var(--uz-lamp-4); }
.uz-lamp--c1 .uz-lamp__glow { fill: var(--uz-lamp-1); }
.uz-lamp--c2 .uz-lamp__glow { fill: var(--uz-lamp-2); }
.uz-lamp--c3 .uz-lamp__glow { fill: var(--uz-lamp-3); }
.uz-lamp--c4 .uz-lamp__glow { fill: var(--uz-lamp-4); }
.uz-lamp__bulb { fill-opacity: 0.5; }
.uz-lamp__glow { fill-opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .uz-lamp__bulb { animation: uz-blink var(--pe, 3s) ease-in-out var(--dl, 0s) infinite; }
    .uz-lamp__glow { animation: uz-halo var(--pe, 3s) ease-in-out var(--dl, 0s) infinite; }
    @keyframes uz-blink {
        0%, 100% { fill-opacity: 0.32; }
        12%, 30% { fill-opacity: 1; }
        46% { fill-opacity: 0.5; }
    }
    @keyframes uz-halo {
        0%, 100% { fill-opacity: 0; }
        12%, 30% { fill-opacity: 0.28; }
        46% { fill-opacity: 0.05; }
    }
}

.uz-walker {
    position: absolute;
    right: 8px;
    top: 6vh;
    width: 94px;
    height: 122px;
    transform: rotate(-90deg);
}

.uz-walker.is-landed {
    top: auto;
    bottom: 10px;
    right: 60px;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .uz-walker { transition: top 0.25s linear, bottom 0.5s ease, right 0.5s ease, transform 0.5s ease; }
}

.uz-limb  { fill: none; stroke: var(--uz-vine); stroke-width: 2; stroke-linecap: round; }
.uz-limb--body { stroke-width: 2.6; }
.uz-petal { fill: var(--uz-pod); stroke: var(--uz-vine); stroke-width: 1.3; }
.uz-maw   { fill: none; stroke: var(--uz-red); stroke-width: 1.6; }

.uz-walker .uz-limb  { stroke: var(--red); }
.uz-walker .uz-petal { fill: rgb(var(--uz-red-rgb) / 0.42); stroke: var(--red); }

.uz-walker .uz-walker-pose { display: none; }
.uz-walker.is-pose-0 .uz-walker-pose[data-pose="0"] { display: block; }
.uz-walker.is-pose-1 .uz-walker-pose[data-pose="1"] { display: block; }
.uz-walker.is-pose-2 .uz-walker-pose[data-pose="2"] { display: block; }

.uz-ride {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 62px;
}

.uz-cyclist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 86px;
    height: 58px;
}

.uz-bike  { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.uz-bike--thin { stroke-width: 1.1; }
.uz-rider { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.uz-rider--thin { stroke-width: 1.4; }

.uz-cyclist .uz-cyc-pose { visibility: hidden; }
.uz-cyclist .uz-cyc-pose[data-pose="0"] { animation: uz-pedal-a 0.46s steps(1) infinite; }
.uz-cyclist .uz-cyc-pose[data-pose="1"] { animation: uz-pedal-b 0.46s steps(1) infinite; }
@keyframes uz-pedal-a { 0%, 100% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes uz-pedal-b { 0% { visibility: hidden; } 50%, 99% { visibility: visible; } }

.uz-cyclist { transform: translateX(105vw); }
@media (prefers-reduced-motion: no-preference) {
    .uz-cyclist { animation-name: uz-ride; animation-timing-function: linear; animation-fill-mode: forwards; }
    .uz-cyclist.is-cyc-0 { animation-duration: 8.5s; animation-delay: 0s; }
    .uz-cyclist.is-cyc-1 { animation-duration: 9.2s; animation-delay: 0.7s; }
    .uz-cyclist.is-cyc-2 { animation-duration: 8.8s; animation-delay: 1.5s; }
    .uz-cyclist.is-cyc-3 { animation-duration: 9.6s; animation-delay: 2.1s; }
    @keyframes uz-ride {
        from { transform: translateX(105vw); }
        to   { transform: translateX(-120px); }
    }
}

.uz-spores {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.uz-flash {
    position: absolute;
    inset: 0;
    background: var(--uz-flash-wash);
    opacity: 0;
}

.uz-bolt-art {
    position: absolute;
    top: 0;
    width: 130px;
    height: 182px;
    opacity: 0;
}

.uz-bolt { fill: none; stroke: var(--uz-red); stroke-width: 2.4; stroke-linecap: round; }
.uz-bolt--thin { stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
    .uz-flash    { animation: uz-flash 0.9s ease-out forwards; }
    .uz-bolt-art { animation: uz-bolt 0.9s ease-out forwards; }
    @keyframes uz-flash {
        0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0.2; }
        24% { opacity: 0.8; } 100% { opacity: 0; }
    }
    @keyframes uz-bolt {
        0% { opacity: 0; } 8% { opacity: 1; }
        60% { opacity: 0.7; } 100% { opacity: 0; }
    }
}

.uz-spider {
    position: absolute;
    top: 0;
    width: 32px;
    height: 34px;
    transform: translateY(-300px);
}

.uz-thread { fill: none; stroke: var(--uz-vine-thin); stroke-width: 1; }
.uz-spider-body { fill: var(--uz-pod); stroke: var(--uz-vine); stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
    .uz-spider { transition: transform 3.8s ease-in-out; }
    .uz-spider.is-down { transform: translateY(120px); }
}

.uz-sound {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--header-accent);
    transition: all 0.3s ease;
}

.uz-sound:hover { background: var(--header-accent-hover); color: var(--on-accent); }
.uz-sound:focus-visible { outline: 2px solid var(--header-accent); outline-offset: -2px; }

.uz-sound svg { width: 24px; height: 24px; }
.uz-sound path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uz-sound .uz-sound__wave { opacity: 0; }
.uz-sound.is-on .uz-sound__wave { opacity: 1; }
.uz-sound.is-on .uz-sound__wave--far { opacity: 0.55; }
.uz-sound.is-on .uz-sound__off { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .uz-sound.is-on .uz-sound__wave {
        animation: uz-wave 1.5s ease-in-out infinite;
        transform-origin: 30% 50%;
    }
    .uz-sound.is-on .uz-sound__wave--far { animation-delay: 0.25s; }
    @keyframes uz-wave {
        0%, 100% { opacity: 0.15; transform: scale(0.82); }
        45%      { opacity: 1;    transform: scale(1.06); }
    }
}

.uz-note {
    position: fixed;
    top: calc(var(--header-offset, 35px) + var(--header-btn, 44px) + 26px + var(--safe-top, 0px));
    right: calc(var(--header-offset, 35px) + var(--header-btn, 44px) * 4 + var(--safe-right, 0px));
    z-index: var(--layer-note, 900);
    max-width: min(260px, calc(100vw - var(--header-offset, 35px) - var(--header-btn, 44px) * 4 - 14px));
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: right;
    color: var(--uz-red);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.uz-note.is-shown { opacity: 1; transform: translateY(0); }

.uz-note__words {
    display: inline-block;
    transform: rotate(-4.5deg);
    transform-origin: right center;
}

.uz-note__arrow {
    position: absolute;
    right: -28px;
    top: -50px;
    height: 46px;
    width: calc(46px * 44 / 50);
    overflow: visible;
}

.uz-note__arrow path {
    fill: none;
    stroke: var(--uz-red);
    stroke-width: 0.10em;
}

@media (max-width: 640px) {
    .uz-note {
        right: calc(var(--header-offset, 35px) + var(--safe-right, 0px));
        top: calc(var(--header-offset, 35px) + var(--header-btn, 44px) + 46px);
        max-width: calc(100vw - var(--header-offset, 35px) * 2 - 8px);
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .uz-note__words {
        display: inline-block;
        padding: 2px 7px 3px;
        border-radius: 5px;
        background: var(--paper);
    }

    .uz-note__arrow {
        right: calc(var(--header-btn, 44px) * 2 + 9px);
        left: auto;
        top: -63px;
        height: 64px;
        width: calc(64px * 44 / 50);
        transform: scaleX(-1);
    }
}

@media (max-width: 640px) {
    .uz-vines--left, .uz-vines--right { width: 48px; }
    .uz-vines--top, .uz-vines--bottom { height: 60px; }
    .uz-walker { width: 54px; height: 70px; right: 2px; }
}