@font-face {
    font-family: "CairoLocal";
    src: url("../../fonts/cairo-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "CairoLocal";
    src: url("../../fonts/cairo-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "QuizCalibri";
    src: url("../../fonts/calibri-ali.woff2?v=3") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "NotoNaskhArabicLocal";
    src: url("../../fonts/noto-naskh-arabic-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    --stage-w: 430px;
    --stage-h: 932px;
    --ink: #21362a;
    --muted: #6c756b;
    --green: #3f7f4f;
    --green-dark: #2f6c43;
    --gold: #c59b36;
    --gold-soft: #ead79f;
    --sky: #cdeef1;
    --paper: #fbf6e9;
    --paper-2: #f2e5c8;
    --line: rgba(99,76,40,.18);
    --shadow: 0 18px 44px rgba(61,45,23,.20)
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden
}

    body.prophets-page {
        overflow: hidden;
        background: radial-gradient(circle at 18% 12%,rgba(82,137,91,.14),transparent 28%),radial-gradient(circle at 88% 26%,rgba(60,134,147,.13),transparent 30%),linear-gradient(135deg,#efe8d8 0%,#dfeee8 100%);
        color: var(--ink);
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        letter-spacing: 0
    }

        body.prophets-page form {
            width: 100%;
            height: 100%;
            margin: 0
        }

button, a, input {
    font-family: inherit
}

#viewportShell {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: radial-gradient(circle at 18% 12%,rgba(82,137,91,.14),transparent 28%),radial-gradient(circle at 88% 26%,rgba(60,134,147,.13),transparent 30%),linear-gradient(135deg,#efe8d8 0%,#dfeee8 100%)
}

.prophets-stage {
    position: absolute;
    width: var(--stage-w);
    height: var(--stage-h);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: center center;
    overflow: hidden;
    background: radial-gradient(circle at 72px 92px,rgba(255,255,255,.95),transparent 92px),linear-gradient(180deg,#f8f2e5 0%,#eef7f4 52%,#bddba0 100%);
    border-radius: 0;
    box-shadow: none;
    isolation: isolate
}

    .prophets-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg,rgba(255,255,255,.45),transparent 18%,transparent 82%,rgba(70,52,24,.08)),radial-gradient(circle at 95% 0%,rgba(194,151,62,.18),transparent 28%);
        z-index: 0
    }

.screen-home.screen-home-bg {
    background-color: #f5ecd9;
    background-image: linear-gradient(180deg,rgba(255,251,239,.58) 0%,rgba(255,251,239,.18) 42%,rgba(255,251,239,.46) 100%),radial-gradient(circle at 50% 32%,rgba(202,169,94,.20),transparent 34%),linear-gradient(180deg,#fbf4e3 0%,#efe1bf 56%,#f6ecd6 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto,auto,cover
}

    .screen-home.screen-home-bg.home-bg-loaded {
        background-image: linear-gradient(180deg,rgba(255,251,239,.14) 0%,rgba(255,251,239,.02) 42%,rgba(255,251,239,.22) 100%),url("../images/home-bg2.webp"),radial-gradient(circle at 50% 32%,rgba(202,169,94,.20),transparent 34%),linear-gradient(180deg,#fbf4e3 0%,#efe1bf 56%,#f6ecd6 100%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto,100% 100%,auto,cover
    }

.screen-home.screen-home-bg::before {
        background: linear-gradient(180deg,rgba(255,252,244,.38) 0%,rgba(255,252,244,0) 34%,rgba(255,252,244,.18) 100%)
    }

.home-sound-toggle {
    position: absolute;
    top: max(18px,calc(env(safe-area-inset-top,0) + 12px));
    left: 18px;
    right: auto;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(197,155,54,.36);
    border-radius: 17px;
    color: #24543b;
    background: #fbf2de;
    box-shadow: 0 12px 24px rgba(72,52,22,.13),inset 0 1px 0 rgba(255,255,255,.82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease,filter .18s ease,box-shadow .18s ease
}

    .home-sound-toggle:active {
        transform: scale(.96);
        filter: brightness(.96)
    }

    .home-sound-toggle::before {
        content: "";
        width: 21px;
        height: 20px;
        clip-path: polygon(0 34%,34% 34%,72% 5%,72% 95%,34% 66%,0 66%);
        background: currentColor;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.62))
    }

    .home-sound-toggle .sound-wave {
        position: absolute;
        right: 9px;
        width: 16px;
        height: 24px;
        border: 3px solid currentColor;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        opacity: .86
    }

    .home-sound-toggle .sound-wave::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 5px;
        width: 8px;
        height: 12px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        opacity: .76
    }

    .home-sound-toggle .sound-slash {
        position: absolute;
        width: 30px;
        height: 3px;
        border-radius: 999px;
        background: #a54a33;
        box-shadow: 0 1px 0 rgba(255,255,255,.72);
        transform: rotate(-42deg) scaleX(0);
        opacity: 0;
        transition: transform .16s ease,opacity .16s ease
    }

    .home-sound-toggle.is-muted {
        color: #7a6745;
        background: linear-gradient(180deg,rgba(255,250,236,.94),rgba(234,222,190,.88))
    }

        .home-sound-toggle.is-muted .sound-wave {
            opacity: .18
        }

        .home-sound-toggle.is-muted .sound-slash {
            opacity: 1;
            transform: rotate(-42deg) scaleX(1)
        }

.home-falling-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden
}

    .home-falling-particles span {
        position: absolute;
        top: -56px;
        width: 15px;
        height: 22px;
        border-radius: 70% 0 70% 0;
        background: linear-gradient(135deg,rgba(203,165,82,.82),rgba(108,139,84,.58));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 7px 14px rgba(80,60,26,.08);
        opacity: .42;
        transform: rotate(26deg);
        animation: home-leaf-fall 13s linear infinite
    }

        .home-falling-particles span::before {
            content: "";
            position: absolute;
            top: 2px;
            right: 7px;
            width: 1px;
            height: 18px;
            border-radius: 999px;
            background: rgba(83,86,47,.28);
            transform: rotate(18deg)
        }

        .home-falling-particles span:nth-child(2n) {
            width: 9px;
            height: 18px;
            border-radius: 999px 999px 999px 3px;
            background: linear-gradient(180deg,rgba(132,184,185,.36),rgba(233,211,153,.52));
            opacity: .36;
            animation-name: home-drop-fall
        }

        .home-falling-particles span:nth-child(1) { right: 7%; animation-delay: -1s; animation-duration: 14s }
        .home-falling-particles span:nth-child(2) { right: 18%; animation-delay: -6s; animation-duration: 12s }
        .home-falling-particles span:nth-child(3) { right: 29%; animation-delay: -3s; animation-duration: 15s }
        .home-falling-particles span:nth-child(4) { right: 41%; animation-delay: -9s; animation-duration: 13s }
        .home-falling-particles span:nth-child(5) { right: 54%; animation-delay: -4s; animation-duration: 16s }
        .home-falling-particles span:nth-child(6) { right: 66%; animation-delay: -11s; animation-duration: 12.5s }
        .home-falling-particles span:nth-child(7) { right: 79%; animation-delay: -7s; animation-duration: 14.5s }
        .home-falling-particles span:nth-child(8) { right: 90%; animation-delay: -2s; animation-duration: 13.5s }
        .home-falling-particles span:nth-child(9) { right: 12%; animation-delay: -10s; animation-duration: 17s }
        .home-falling-particles span:nth-child(10) { right: 36%; animation-delay: -5s; animation-duration: 15.5s }
        .home-falling-particles span:nth-child(11) { right: 61%; animation-delay: -12s; animation-duration: 14s }
        .home-falling-particles span:nth-child(12) { right: 84%; animation-delay: -8s; animation-duration: 16.5s }
        .home-falling-particles span:nth-child(13) { right: 4%; animation-delay: -13s; animation-duration: 18s }
        .home-falling-particles span:nth-child(14) { right: 23%; animation-delay: -15s; animation-duration: 14.8s }
        .home-falling-particles span:nth-child(15) { right: 33%; animation-delay: -12.5s; animation-duration: 17.5s }
        .home-falling-particles span:nth-child(16) { right: 47%; animation-delay: -16s; animation-duration: 15s }
        .home-falling-particles span:nth-child(17) { right: 57%; animation-delay: -14s; animation-duration: 18.5s }
        .home-falling-particles span:nth-child(18) { right: 72%; animation-delay: -17s; animation-duration: 13.8s }
        .home-falling-particles span:nth-child(19) { right: 93%; animation-delay: -13.5s; animation-duration: 16s }
        .home-falling-particles span:nth-child(20) { right: 15%; animation-delay: -18s; animation-duration: 19s }
        .home-falling-particles span:nth-child(21) { right: 39%; animation-delay: -16.5s; animation-duration: 17s }
        .home-falling-particles span:nth-child(22) { right: 51%; animation-delay: -15.5s; animation-duration: 14.2s }
        .home-falling-particles span:nth-child(23) { right: 69%; animation-delay: -18.5s; animation-duration: 18.2s }
        .home-falling-particles span:nth-child(24) { right: 81%; animation-delay: -14.5s; animation-duration: 15.8s }

    .screen-home.screen-home-bg .home-hero::before, .screen-home.screen-home-bg .home-hero::after {
        content: none
    }

    .screen-home.screen-home-bg .home-crescent, .screen-home.screen-home-bg .home-stars {
        display: none
    }

    .screen-home.screen-home-bg .home-hero {
        position: static;
        padding-top: 0
    }

        .screen-home.screen-home-bg .home-hero p {
            position: absolute;
            z-index: 2;
            top: clamp(134px,18.8%,178px);
            left: 50%;
            width: min(315px,calc(100% - 64px));
            margin: 0;
            padding: 0;
            color: #31513d;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.85;
            transform: translateX(-50%);
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            text-shadow: 0 2px 9px rgba(255,252,241,.96),0 1px 0 rgba(255,252,241,.74)
        }

.home-language-gate {
    position: absolute;
    inset: 0;
    z-index: 72;
    display: none;
    place-items: center;
    padding: max(22px,env(safe-area-inset-top,0)) 26px max(22px,env(safe-area-inset-bottom,0))
}

    .home-language-gate.is-visible {
        display: grid
    }

    .home-language-gate.is-closing {
        pointer-events: none
    }

.home-language-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%,rgba(255,246,214,.28),transparent 182px),linear-gradient(180deg,rgba(45,66,47,.40),rgba(31,42,31,.54));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

.home-language-card {
    position: relative;
    z-index: 2;
    width: min(342px,100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px 22px 22px;
    overflow: hidden;
    color: #284637;
    text-align: center;
    border-radius: 28px;
    border: 1px solid rgba(197,155,54,.38);
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 36%),repeating-linear-gradient(0deg,rgba(145,104,42,.028) 0 1px,transparent 1px 12px),rgba(255,250,235,.98);
    box-shadow: 0 28px 62px rgba(35,31,20,.30),inset 0 1px 0 rgba(255,255,255,.78);
    animation: language-card-in .34s ease-out both
}

    .home-language-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(155,110,52,.16);
        border-radius: 22px;
        pointer-events: none
    }

    .home-language-card::after {
        content: "";
        position: absolute;
        top: -92px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(197,155,54,.20),transparent 66%);
        pointer-events: none
    }

.home-language-mark {
    position: relative;
    width: min(292px,100%);
    height: 86px;
    display: grid;
    place-items: center;
    margin: -2px auto 0
}

    .home-language-mark img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 86px;
        object-fit: contain;
        filter: drop-shadow(0 12px 18px rgba(99,67,20,.18));
        user-select: none;
        -webkit-user-drag: none
    }

.home-language-card h1, .home-language-actions {
    position: relative;
    z-index: 1
}

.home-language-card h1 {
    margin: -2px 0 0;
    color: #25533b;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35
}

.home-language-actions {
    width: 100%;
    display: grid;
    gap: 12px;
    margin-top: 6px
}

.home-language-btn {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease,filter .16s ease,box-shadow .16s ease
}

    .home-language-btn:active {
        transform: scale(.97);
        filter: brightness(.96)
    }

    .home-language-btn.primary {
        color: #fff;
        background: linear-gradient(90deg,#2f6c43,#3f8b55);
        box-shadow: 0 14px 24px rgba(47,108,67,.26)
    }

    .home-language-btn.secondary {
        color: #36523f;
        background: linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,234,207,.92));
        border: 1px solid rgba(197,155,54,.30);
        box-shadow: 0 12px 20px rgba(96,70,32,.10)
    }

    .home-language-btn small {
        min-width: 48px;
        padding: 4px 9px;
        border-radius: 999px;
        color: #8a6a24;
        background: rgba(197,155,54,.14);
        font-size: 11px;
        font-weight: 700
    }

.home-language-gate.is-closing .home-language-card {
    animation: language-card-out .18s ease-in both
}

.home-language-gate.is-closing .home-language-backdrop {
    opacity: 0;
    transition: opacity .18s ease
}

.home-hero {
    position: relative;
    z-index: 1;
    height: 650px;
    padding: 98px 42px 0;
    text-align: center
}

    .home-hero::before, .home-hero::after {
        content: "";
        position: absolute;
        bottom: 8px;
        width: 170px;
        height: 128px;
        background: linear-gradient(135deg,rgba(190,155,93,.75),rgba(229,204,145,.76));
        clip-path: polygon(0 100%,28% 30%,46% 58%,68% 10%,100% 100%);
        z-index: -1
    }

    .home-hero::before {
        right: -18px
    }

    .home-hero::after {
        left: -18px;
        transform: scaleX(-1)
    }

.home-crescent {
    position: absolute;
    top: 120px;
    right: 88px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gold)
}

    .home-crescent::after {
        content: "";
        position: absolute;
        top: -5px;
        right: -16px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #fbf7ed
    }

.home-stars span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .75
}

    .home-stars span:nth-child(1) {
        top: 182px;
        left: 82px
    }

    .home-stars span:nth-child(2) {
        top: 144px;
        left: 188px
    }

    .home-stars span:nth-child(3) {
        top: 246px;
        right: 80px
    }

    .home-stars span:nth-child(4) {
        top: 306px;
        left: 112px
    }

.home-hero p {
    width: 270px;
    margin: 24px auto 0;
    color: #49624f;
    font-size: 18px;
    line-height: 1.8
}

.home-actions, .stage-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
    width: 300px;
    margin: 0 auto
}

.screen-home.screen-home-bg .home-actions {
    position: absolute;
    right: auto;
    bottom: clamp(98px,12.8%,128px);
    left: 50%;
    margin: 0;
    transform: translateX(-50%)
}

.home-credit {
    position: absolute;
    right: 24px;
    bottom: clamp(38px,5.2%,52px);
    left: 24px;
    z-index: 2;
    margin: 0;
    color: rgba(63,74,55,.82);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,252,241,.88),0 3px 10px rgba(255,252,241,.60)
}

.primary-btn, .secondary-btn {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 28px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer
}

.primary-btn {
    color: #fff;
    background: linear-gradient(90deg,var(--green-dark),var(--green));
    box-shadow: 0 12px 24px rgba(41,98,59,.24)
}

.secondary-btn {
    color: #2f3d33;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(82,99,72,.18)
}

.home-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #31513d;
    background: linear-gradient(180deg,rgba(255,253,246,.94),rgba(244,233,205,.88)),linear-gradient(90deg,rgba(197,155,54,.18),rgba(47,108,67,.14));
    border: 1px solid rgba(197,155,54,.36);
    box-shadow: 0 12px 24px rgba(70,47,20,.12),inset 0 1px 0 rgba(255,255,255,.78)
}

    .home-back-btn::before {
        content: "";
        width: 10px;
        height: 10px;
        margin-left: 9px;
        border-top: 3px solid currentColor;
        border-right: 3px solid currentColor;
        transform: rotate(45deg)
    }

.top-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 12px;
    padding: 28px 22px 12px
}

    .top-bar h1 {
        margin: 0;
        color: var(--ink);
        font-size: 22px;
        font-weight: 700;
        text-align: center
    }

.round-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: var(--green-dark);
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    border: 1px solid rgba(77,93,67,.12)
}

    .round-btn.muted {
        color: #9a875f
    }

.summary-card {
    position: relative;
    z-index: 2;
    width: 366px;
    margin: 18px auto 0;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,253,247,.94);
    box-shadow: 0 16px 34px rgba(60,47,26,.16);
    border: 1px solid rgba(120,93,45,.11)
}

    .complete-wrap h2 {
        margin: 0;
        color: var(--ink);
        font-size: 25px;
        font-weight: 700;
        line-height: 1.45
    }

    .complete-wrap p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8
    }

.screen-end .stage-actions {
    position: absolute;
    right: 65px;
    bottom: 42px
}


@keyframes home-leaf-fall {
    0% {
        transform: translate3d(0,-60px,0) rotate(18deg);
        opacity: 0
    }

    12% {
        opacity: .42
    }

    50% {
        transform: translate3d(-20px,470px,0) rotate(164deg)
    }

    100% {
        transform: translate3d(24px,990px,0) rotate(318deg);
        opacity: 0
    }
}

@keyframes home-drop-fall {
    0% {
        transform: translate3d(0,-52px,0) rotate(12deg);
        opacity: 0
    }

    16% {
        opacity: .34
    }

    100% {
        transform: translate3d(-12px,990px,0) rotate(28deg);
        opacity: 0
    }
}



.screen-end {
    background: radial-gradient(circle at 50% 12%,rgba(197,155,54,.18),transparent 110px),linear-gradient(180deg,#fff8e9 0%,#f4ead1 58%,#d8eadc 100%)
}

.complete-wrap {
    position: relative;
    z-index: 2;
    width: 360px;
    margin: 80px auto 0;
    text-align: center
}

.complete-mark {
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    margin: 0 auto 28px;
    border-radius: 50%;
    color: #fff7d7;
    background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.65),transparent 18px),linear-gradient(145deg,#dcb85a,#8e641d);
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 18px 30px rgba(117,83,29,.26)
}

.summary-card {
    display: grid;
    gap: 12px;
    margin-top: 38px
}

    .summary-card div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 46px;
        padding: 0 8px;
        border-bottom: 1px solid var(--line)
    }

        .summary-card div:last-child {
            border-bottom: 0
        }

    .summary-card span {
        color: var(--muted);
        font-size: 16px
    }

    .summary-card strong {
        color: var(--green-dark);
        font-size: 22px
    }

.busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 38%,rgba(255,241,198,.28),transparent 168px),linear-gradient(180deg,rgba(35,48,37,.58),rgba(25,33,27,.66));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

    .busy-overlay.is-visible {
        display: grid
    }

.busy-card {
    position: relative;
    width: min(286px,100%);
    min-height: 226px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 24px 22px 22px;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.82),transparent 86px),linear-gradient(135deg,rgba(255,255,255,.58),transparent 42%),linear-gradient(180deg,rgba(255,251,238,.98),rgba(246,235,205,.98));
    border: 1px solid rgba(197,155,54,.42);
    color: var(--green-dark);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 24px 54px rgba(27,31,22,.34),inset 0 1px 0 rgba(255,255,255,.78);
    animation: loader-card-in .18s ease-out both
}

    .busy-card::before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(155,110,52,.14);
        border-radius: 19px;
        pointer-events: none
    }

.loader-heritage-scene {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center
}

    .loader-heritage-scene::before {
        content: "";
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(197,155,54,.20),transparent 66%)
    }

.loader-ring {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 3px solid rgba(210,183,112,.34);
    border-top-color: #2f7a4a;
    border-left-color: rgba(47,122,74,.58);
    animation: loader-spin 1s linear infinite
}

.loader-emblem {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(167,123,44,.46);
    background: radial-gradient(circle at 38% 24%,rgba(255,255,255,.88),transparent 28px),linear-gradient(145deg,#fff7dc 0%,#e8cf83 52%,#b9872d 100%);
    box-shadow: 0 12px 22px rgba(112,82,31,.22),inset 0 1px 0 rgba(255,255,255,.82);
    animation: loader-breathe 1.35s ease-in-out infinite
}

    .loader-emblem::before {
        content: "";
        position: absolute;
        inset: 16px 22px 20px;
        border: 4px solid #2f6c43;
        border-bottom: 0;
        border-radius: 28px 28px 6px 6px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.48)
    }

    .loader-emblem::after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: 19px;
        width: 30px;
        height: 5px;
        border-radius: 999px;
        background: rgba(47,108,67,.78)
    }

.loader-spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c59b36;
    box-shadow: 0 0 0 4px rgba(197,155,54,.10);
    animation: loader-spark 1.45s ease-in-out infinite
}

    .loader-spark.spark-one {
        top: 13px;
        right: 17px
    }

    .loader-spark.spark-two {
        bottom: 24px;
        right: 6px;
        animation-delay: .2s
    }

    .loader-spark.spark-three {
        bottom: 17px;
        left: 14px;
        animation-delay: .4s
    }

.loader-steps {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 78px;
    height: 18px;
    margin: 1px 0 0
}

    .loader-steps span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2f7a4a;
        opacity: .36;
        animation: loader-step 1.05s ease-in-out infinite
    }

        .loader-steps span:nth-child(2) {
            animation-delay: .16s
        }

        .loader-steps span:nth-child(3) {
            animation-delay: .32s
        }

.loader-title {
    position: relative;
    z-index: 1;
    color: var(--green-dark);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700
}

.loader-text {
    position: relative;
    z-index: 1;
    color: #6a604c;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 700
}

.busy-spinner {
    display: none
}

@keyframes loader-card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

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

@keyframes loader-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes loader-breathe {
    0%,100% {
        transform: scale(.96)
    }

    50% {
        transform: scale(1)
    }
}

@keyframes loader-step {
    0%,100% {
        opacity: .32;
        transform: translateY(0)
    }

    45% {
        opacity: 1;
        transform: translateY(-4px)
    }
}

@keyframes loader-spark {
    0%,100% {
        opacity: .28;
        transform: scale(.82)
    }

    50% {
        opacity: .92;
        transform: scale(1.08)
    }
}

@keyframes language-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96)
    }

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

@keyframes language-card-out {
    to {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }
}

.stage-phone-fill {
    border-radius: 0;
    box-shadow: none
}

    .stage-phone-fill .home-hero {
        height: max(460px,calc(var(--stage-runtime-h) - 282px))
    }

.stage-phone-fill.screen-end .stage-actions {
        bottom: max(24px,calc(env(safe-area-inset-bottom,0) + 24px))
    }

.stage-condensed-screen .top-bar {
    padding-top: 20px;
    padding-bottom: 8px
}





.stage-condensed-screen .summary-card {
    margin-top: 14px;
    padding: 20px
}



.stage-tiny-screen .home-hero {
    height: max(390px,calc(var(--stage-runtime-h) - 230px));
    padding-top: 70px
}

.stage-tiny-screen .home-hero p {
    margin-top: 16px;
    font-size: 16px
}

.stage-tiny-screen .home-actions, .stage-tiny-screen .stage-actions {
    gap: 10px
}


.stage-tiny-screen .primary-btn, .stage-tiny-screen .secondary-btn {
    min-height: 50px;
    font-size: 16px
}






.stage-tiny-screen .summary-card {
    padding: 18px
}

.stage-tiny-screen.screen-end .complete-wrap {
    margin-top: 42px
}

.stage-tiny-screen.screen-end .complete-mark {
    width: 112px;
    height: 112px;
    margin-bottom: 18px;
    font-size: 28px
}

.stage-tiny-screen.screen-end .summary-card {
    margin-top: 20px
}

.stage-tiny-screen.screen-end .stage-actions {
    gap: 8px
}

@media (prefers-reduced-motion:reduce) {
    .busy-spinner, .busy-card, .loader-ring, .loader-emblem, .loader-spark, .loader-steps span, .home-falling-particles span {
        animation: none
    }
}

.home-about-toggle {
    position: absolute;
    top: max(18px, calc(env(safe-area-inset-top,0) + 12px));
    right: 18px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(197,155,54,.36);
    border-radius: 17px;
    color: #24543b;
    background: linear-gradient(180deg,rgba(255,253,246,.98),rgba(240,228,196,.94));
    box-shadow: 0 12px 24px rgba(72,52,22,.13), 0 0 0 4px rgba(255,250,232,.30), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -3px 0 rgba(197,155,54,.10);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, filter .18s ease, box-shadow .18s ease;
}

    .home-about-toggle::before {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(255,255,255,.68);
        border-radius: 12px;
        pointer-events: none;
    }

    .home-about-toggle:active {
        transform: scale(.96);
        filter: brightness(.97);
    }

    .home-about-toggle:focus-visible {
        outline: 3px solid rgba(197,155,54,.40);
        outline-offset: 3px;
    }

    .home-about-toggle span {
        position: relative;
        z-index: 1;
        width: 25px;
        height: 25px;
        display: block;
        border: 3px solid currentColor;
        border-radius: 50%;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.62));
    }

    .home-about-toggle span::before,
    .home-about-toggle span::after {
        content: "";
        position: absolute;
        left: 50%;
        border-radius: 999px;
        background: currentColor;
        transform: translateX(-50%);
    }

    .home-about-toggle span::before {
        top: 4px;
        width: 4px;
        height: 4px;
    }

    .home-about-toggle span::after {
        bottom: 4px;
        width: 4px;
        height: 10px;
    }