/* Public auth/plan shell styles */
#public-auth-overlay {
    --public-g1: #60a5fa;
    --public-g2: #a78bfa;
    --public-g3: #f472b6;
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 44%, rgba(2, 6, 23, 0.9) 56%);
    backdrop-filter: blur(6px);
}

#public-auth-overlay.active {
    display: flex;
    animation: public-auth-fade-in 0.22s ease-out;
}

@keyframes public-auth-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.public-auth-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    width: min(560px, calc(100vw - 28px));
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--bd, #334155) 62%, var(--public-g1) 38%);
    background: var(--modal-surface-bg, linear-gradient(165deg, #141b2a 0%, #0a1020 100%));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 24px 66px rgba(2, 6, 23, 0.64),
        inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
    padding: 22px 22px 18px;
    animation: public-auth-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.public-auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
            color-mix(in srgb, var(--public-g1) 16%, transparent) 0%,
            transparent 36%,
            color-mix(in srgb, var(--public-g3) 14%, transparent) 100%);
    opacity: 0.9;
}

.public-auth-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--public-g3) 22%, transparent) 0%, transparent 42%);
    opacity: 0.5;
}

@keyframes public-auth-card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

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

.public-auth-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(1px);
    opacity: 0.34;
    z-index: 0;
}

.public-auth-orb.orb-a {
    width: 200px;
    height: 200px;
    right: -46px;
    top: -70px;
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--public-g1) 60%, white 40%) 0%, transparent 70%);
    animation: public-auth-float-a 8s ease-in-out infinite;
}

.public-auth-orb.orb-b {
    width: 180px;
    height: 180px;
    left: -54px;
    bottom: -82px;
    background: radial-gradient(circle at 62% 40%, color-mix(in srgb, var(--public-g2) 54%, white 46%) 0%, transparent 72%);
    animation: public-auth-float-b 9s ease-in-out infinite;
}

@keyframes public-auth-float-a {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(10px) scale(1.06);
    }
}

@keyframes public-auth-float-b {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

.public-auth-scanline {
    position: absolute;
    inset: 0 auto 0 -46%;
    width: 46%;
    pointer-events: none;
    background: linear-gradient(104deg, transparent 0%, color-mix(in srgb, var(--public-g1) 28%, transparent) 44%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.25;
    animation: public-auth-scan 4.8s linear infinite;
    z-index: 0;
}

@keyframes public-auth-scan {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(340%);
    }
}

.public-auth-brand-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}

.public-auth-brand-main {
    font-size: clamp(1.9rem, 4vw, 2.45rem);
    font-weight: 900;
    letter-spacing: 0.015em;
    line-height: 1;
    background-image: linear-gradient(94deg, var(--public-g1), color-mix(in srgb, var(--public-g2) 72%, white 28%), var(--public-g1));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: public-auth-brand-shift 6.2s linear infinite;
}

@keyframes public-auth-brand-shift {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 220% 50%;
    }
}

.public-auth-copy {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: var(--text-sub, #94a3b8);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.55;
}

#public-google-login-btn {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-height: 42px;
    margin: 6px 0 8px;
}

.public-auth-status {
    position: relative;
    z-index: 1;
    display: none;
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.7)) 86%, rgba(255, 255, 255, 0.04) 14%);
    color: var(--text-sub, #94a3b8);
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: left;
}

.public-auth-status.active {
    display: block;
    animation: public-auth-status-in 0.2s ease-out;
}

.public-auth-status.is-info {
    border-color: color-mix(in srgb, var(--public-g1) 54%, rgba(255, 255, 255, 0.24));
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 68%, var(--public-g1) 32%);
}

.public-auth-status.is-warning {
    border-color: color-mix(in srgb, #f59e0b 62%, rgba(255, 255, 255, 0.2) 38%);
    color: color-mix(in srgb, #facc15 70%, var(--text-main, #e2e8f0) 30%);
    background: color-mix(in srgb, #f59e0b 12%, var(--card-bg, rgba(15, 23, 42, 0.72)) 88%);
}

.public-auth-status.is-error {
    border-color: color-mix(in srgb, #ef4444 62%, rgba(255, 255, 255, 0.2) 38%);
    color: color-mix(in srgb, #fca5a5 74%, var(--text-main, #e2e8f0) 26%);
    background: color-mix(in srgb, #ef4444 10%, var(--card-bg, rgba(15, 23, 42, 0.72)) 90%);
}

@keyframes public-auth-status-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

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

.public-auth-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}

.public-auth-actions > button {
    min-width: 120px;
}

#public-account-pill {
    position: fixed;
    right: 14px;
    top: 12px;
    z-index: 11000;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bd, #334155) 75%, white 25%);
    background: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.68)) 88%, rgba(2, 6, 23, 0.95) 12%);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
    font-size: 0.78rem;
}

#public-account-pill.active {
    display: inline-flex;
}

#public-account-pill .plan {
    font-weight: 700;
    letter-spacing: 0.02em;
}

#public-account-pill .credits {
    color: var(--text-sub, #94a3b8);
}

#public-account-pill button {
    border: none;
    background: transparent;
    color: var(--btn-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.78rem;
}

#public-account-pill button:hover {
    color: var(--text-main, #e2e8f0);
}

.public-plan-disabled {
    opacity: 0.55 !important;
    filter: saturate(0.75);
    cursor: not-allowed !important;
}

body.public-locked #work-area {
    pointer-events: none;
    user-select: none;
}

#public-tour-widget {
    --public-tour-launcher-height: 38px;
    position: fixed;
    top: var(--welcome-tour-edge, 16px);
    right: calc(var(--welcome-tour-edge, 16px) + var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 10px));
    bottom: auto;
    left: auto;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

body.public-tour-active #public-tour-widget,
body.public-tour-home-open #public-tour-widget,
#public-tour-widget.tour-running {
    z-index: 16030;
}

body.pdf-expanded-mode #public-tour-widget,
body.ai-expl-slide-modal-open #public-tour-widget {
    z-index: 1000;
}

.public-tour-launcher-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

body.welcome-mode {
    --welcome-tour-edge: 16px;
    --welcome-tour-gap: 10px;
}

#public-tour-widget>* {
    pointer-events: auto;
}

body.public-floating-hidden #public-tour-widget {
    top: var(--fullscreen-dock-top, 12px);
    right: auto;
    left: var(--fullscreen-dock-left, 56px);
    bottom: auto;
    align-items: flex-start;
    gap: 0;
    display: flex !important;
}

body.public-floating-hidden .public-tour-launcher-row {
    gap: 0;
}

body.public-floating-hidden #public-tour-launcher,
body.public-floating-hidden #public-tour-card,
body.public-floating-hidden #welcome-theme-toggle-btn {
    display: none !important;
}

body:not(.welcome-mode) #welcome-theme-toggle-btn,
body.public-tour-active #welcome-theme-toggle-btn,
#public-tour-widget.tour-running #welcome-theme-toggle-btn {
    display: none !important;
}

body.quiz-card-expanded-mode #public-tour-launcher,
body.quiz-card-expanded-mode #public-ask-launcher,
body.quiz-card-expanded-mode #public-tour-card,
body.quiz-card-expanded-mode #public-tour-overlay,
body.quiz-card-expanded-mode .public-tour-layer-active,
body.quiz-card-expanded-mode .public-tour-stack-root,
body.quiz-card-expanded-mode .public-tour-target-active,
body.pdf-expanded-mode #public-tour-launcher,
body.pdf-expanded-mode #public-ask-launcher,
body.pdf-expanded-mode #public-tour-card,
body.pdf-expanded-mode #public-tour-overlay,
body.pdf-expanded-mode .public-tour-layer-active,
body.pdf-expanded-mode .public-tour-stack-root,
body.pdf-expanded-mode .public-tour-target-active {
    z-index: 12000 !important;
}

#public-tour-launcher,
#public-ask-launcher,
#welcome-theme-toggle-btn {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 64%, rgba(255, 255, 255, 0.16) 36%);
    border-radius: var(--btn-radius-pill);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--btn-theme-surface-strong, rgba(15, 23, 42, 0.68)) 52%, transparent) 0%,
            color-mix(in srgb, var(--btn-theme-surface, rgba(15, 23, 42, 0.48)) 34%, transparent) 100%);
    color: var(--btn-text);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 16%, transparent 84%),
        0 10px 24px rgba(2, 6, 23, 0.18);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

/* MOBILE-SCOPE: START phone-only — compact workspace Guide launcher */
html.phone-device body:not(.welcome-mode) #public-tour-launcher {
    min-height: 27px;
    padding: 0 9px;
    gap: 5px;
    font-size: 0.6rem;
}

html.phone-device body:not(.welcome-mode) #public-tour-launcher .public-tour-launcher-mark {
    font-size: 0.62rem;
}
/* MOBILE-SCOPE: END phone-only */

#public-ask-launcher {
    animation: welcome-screen-fade-in 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.welcome-mode #public-ask-launcher {
    display: none;
}

#public-tour-launcher::before,
#public-ask-launcher::before {
    content: none;
}

#public-tour-launcher > *,
#public-ask-launcher > *,
#welcome-theme-toggle-btn > * {
    position: relative;
    z-index: 1;
}

#public-tour-launcher:hover,
#public-tour-launcher:focus-visible,
#public-ask-launcher:hover,
#public-ask-launcher:focus-visible,
#welcome-theme-toggle-btn:hover,
#welcome-theme-toggle-btn:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 34%, var(--btn-theme-border, #334155) 66%);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--btn-theme-surface-strong, rgba(15, 23, 42, 0.74)) 60%, transparent) 0%,
            color-mix(in srgb, var(--btn-theme-surface, rgba(15, 23, 42, 0.54)) 40%, transparent) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
        0 14px 28px rgba(2, 6, 23, 0.22);
    outline: none;
}

#public-tour-launcher .public-tour-launcher-mark,
#public-ask-launcher .public-tour-launcher-mark {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.84rem;
    line-height: 1;
    box-shadow: none;
}

#public-tour-launcher .public-tour-launcher-label,
#public-ask-launcher .public-tour-launcher-label {
    font-size: inherit;
    color: inherit;
}

/* MOBILE-SCOPE: START desktop-only — remove Guide and retain the larger Support capsule */
html:not(.phone-device):not(.ipad-like-device) .public-tour-launcher-row {
    display: none !important;
}

html:not(.phone-device):not(.ipad-like-device) body.welcome-mode .welcome-calendar-btn,
html:not(.phone-device):not(.ipad-like-device) body.welcome-mode .welcome-donate-toggle {
    gap: 0.42rem !important;
    min-height: 32.4px !important;
    height: 32.4px !important;
    padding: 0 13.2px !important;
    font-size: 0.696rem !important;
}

html:not(.phone-device):not(.ipad-like-device) body.welcome-mode .welcome-calendar-btn svg,
html:not(.phone-device):not(.ipad-like-device) body.welcome-mode .welcome-donate-toggle svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 4.8px !important;
}

html:not(.phone-device):not(.ipad-like-device) body.welcome-mode .welcome-donate-toggle::after {
    width: 6px;
    height: 6px;
}
/* MOBILE-SCOPE: END desktop-only */

#public-tour-widget.tour-running #public-tour-launcher {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #public-tour-launcher,
    #public-ask-launcher {
        animation: none !important;
    }
}

@keyframes public-tour-launcher-pulse {
    0%,
    100% {
        transform: translateY(0);
        box-shadow:
            0 18px 44px rgba(2, 6, 23, 0.44),
            0 0 0 1px color-mix(in srgb, var(--btn-theme-border) 10%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    50% {
        transform: translateY(-1px);
        box-shadow:
            0 20px 50px rgba(2, 6, 23, 0.5),
            0 0 24px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

#public-tour-card {
    position: absolute;
    top: calc(100% + 10px);
    right: calc(-1 * (var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 10px)));
    bottom: auto;
    z-index: 2;
    width: min(390px, calc(100vw - (var(--welcome-tour-edge, 16px) * 2)));
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 44%, rgba(255, 255, 255, 0.14) 56%);
    background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 86% 84%, color-mix(in srgb, var(--g2, #f472b6) 12%, transparent) 0%, transparent 38%),
        linear-gradient(165deg,
            color-mix(in srgb, var(--g1, #60a5fa) 10%, #182131 90%) 0%,
            color-mix(in srgb, var(--card-bg, #0f172a) 86%, #0c1320 14%) 52%,
            color-mix(in srgb, var(--g2, #f472b6) 8%, #0a1020 92%) 100%);
    box-shadow:
        0 26px 70px rgba(2, 6, 23, 0.56),
        0 0 0 1px color-mix(in srgb, var(--btn-theme-border) 8%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 18px 18px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top right;
    transform: translate3d(0, -8px, 0) scale3d(0.98, 0.98, 1);
    clip-path: inset(0 round 24px);
    filter: saturate(0.92);
    will-change: transform, opacity, clip-path;
}

#public-tour-card.public-tour-card-placement-left {
    right: calc(100% + 14px);
    left: auto;
    transform-origin: top left;
}

#public-tour-card.public-tour-card-placement-below {
    top: calc(100% + clamp(118px, 18vh, 176px));
    right: calc(-1 * (var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 10px)));
    left: auto;
    transform-origin: top right;
}

@media (min-width: 769px) {
    body.public-tour-pdf-demo #work-area.split-view {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    body.public-tour-pdf-demo #work-area.split-view #quiz-pane {
        grid-column: 1 !important;
    }

    body.public-tour-pdf-demo #work-area.split-view #resize-quiz-pdf {
        grid-column: 2 !important;
    }

    body.public-tour-pdf-demo #work-area.split-view #pdf-pane {
        grid-column: 3 !important;
    }

    #public-tour-card.public-tour-card-placement-pdf-left {
        position: fixed;
        top: 64px;
        right: auto;
        left: 18px;
        width: min(390px, calc(50vw - 36px));
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        transform-origin: top left;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #public-tour-card.public-tour-card-placement-pdf-left::-webkit-scrollbar {
        display: none;
    }

    #public-tour-card.public-tour-card-placement-say-more-left {
        position: fixed;
        top: auto;
        right: auto;
        bottom: 18px;
        left: 18px;
        width: min(320px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);
        padding: 14px;
        border-radius: 20px;
        clip-path: inset(0 round 20px);
        overflow-y: auto;
        transform-origin: bottom left;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #public-tour-card.public-tour-card-placement-say-more-left::-webkit-scrollbar {
        display: none;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-progress-meta {
        margin-top: 8px;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-progress-track {
        height: 8px;
        margin-top: 5px;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-title {
        margin: 10px 0 6px;
        font-size: 1.04rem;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-body {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-note {
        margin-top: 8px;
        padding: 8px 9px;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-replay-btn {
        min-height: 34px;
        margin-top: 9px;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-step-actions {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 9px;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-step-actions > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 34px;
    }

    #public-tour-card.public-tour-card-placement-say-more-left .public-tour-close-link {
        margin-top: 7px;
        min-height: 32px;
    }
}

/* MOBILE-SCOPE: START compact-responsive — separate the Say More guide from the full-width Ask sheet */
@media (min-width: 769px) and (max-width: 900px) {
    #public-tour-card.public-tour-card-placement-say-more-left {
        top: 12px;
        bottom: auto;
        max-height: calc(50vh - 18px);
    }

    body.public-tour-active #ask-ai-modal.public-tour-say-more-ask-active .ask-ai-modal-content {
        top: auto !important;
        bottom: 12px !important;
        height: calc(50vh - 18px) !important;
        max-height: calc(50vh - 18px) !important;
        transform: none !important;
    }
}
/* MOBILE-SCOPE: END compact-responsive */

#public-tour-card.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    clip-path: inset(0 round 24px);
    animation: public-tour-card-drop-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes public-tour-card-drop-in {
    0% {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale3d(0.98, 0.98, 1);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}

@keyframes public-tour-card-squeeze-out {
    0% {
        opacity: 0;
        transform: translate3d(0, 52px, 0) scale3d(0.34, 0.12, 1);
        clip-path: inset(calc(100% - var(--public-tour-launcher-height)) 0 0 42% round 999px);
        filter: saturate(0.88);
    }

    58% {
        opacity: 1;
        transform: translate3d(0, 10px, 0) scale3d(1.02, 1.01, 1);
        clip-path: inset(0 round 24px);
        filter: saturate(1);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        clip-path: inset(0 round 24px);
        filter: saturate(1);
    }
}

#public-tour-card[hidden],
#public-tour-overlay[hidden] {
    display: none !important;
}

body.public-tour-home-onboarding .public-tour-launcher-row {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

body.public-tour-home-onboarding #public-tour-launcher {
    display: none !important;
}

body.public-tour-home-onboarding {
    --public-tour-home-panel-scale: 0.92;
}

body.public-tour-home-onboarding #welcome-status-panel {
    display: none !important;
}

body.public-tour-home-onboarding #quiz-pane {
    align-items: flex-start;
    justify-content: center;
    padding: clamp(88px, 12vh, 132px) clamp(32px, 8vw, 150px) 2rem;
}

body.public-tour-home-onboarding #welcome-screen {
    --welcome-scale: 1;
    margin: 0;
    width: min(960px, calc(100vw - 560px));
    max-width: min(960px, calc(100vw - 560px));
}

body.public-tour-home-onboarding #welcome-screen.public-tour-home-locked {
    pointer-events: none;
}

body.public-tour-home-onboarding #welcome-screen.public-tour-home-locked .welcome-btn,
body.public-tour-home-onboarding #welcome-screen.public-tour-home-locked button,
body.public-tour-home-onboarding #welcome-screen.public-tour-home-locked [role="button"] {
    pointer-events: none;
    cursor: default;
}

body.public-tour-home-onboarding #public-home-tip-surface {
    opacity: 0;
    visibility: hidden;
    filter: blur(6px);
    transform: translateY(12px);
    pointer-events: none;
    animation: none;
}

body.public-tour-home-onboarding #welcome-screen .welcome-actions {
    opacity: 0;
    visibility: hidden;
    filter: blur(6px);
    transform: translateY(14px);
    pointer-events: none;
    animation: none !important;
    transition: none;
}

body.public-tour-home-onboarding.public-tour-home-story-playing #public-home-tip-surface {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}

body.public-tour-home-onboarding .welcome-calendar-btn,
body.public-tour-home-onboarding .welcome-donate,
body.public-tour-home-onboarding #global-fullscreen-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: blur(14px) saturate(0.8);
    transform: translateY(10px);
    transition: none;
}

#public-tour-card.public-tour-card-home-onboarding {
    position: fixed;
    top: clamp(210px, 34vh, 280px);
    left: auto;
    right: clamp(34px, 7vw, 118px);
    bottom: auto;
    width: min(420px, calc(100vw - 48px));
    max-height: min(calc(100vh - clamp(210px, 34vh, 280px) - 16px), 620px);
    padding: 0;
    border: 0;
    border-radius: 0;
    transform: translate3d(18px, -10px, 0) scale(0.98);
    transform-origin: top left;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    overflow: visible;
    filter: none;
}

#public-tour-card.public-tour-card-home-onboarding.active {
    transform: translate3d(0, 0, 0) scale(1);
    animation: public-tour-card-drop-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.public-tour-home-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.public-tour-home-shell::before {
    content: "";
    position: absolute;
    inset: -18px -26px;
    z-index: -1;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 52%, rgba(0, 0, 0, 0.54) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, #000 0%, #000 52%, rgba(0, 0, 0, 0.54) 74%, transparent 100%);
    pointer-events: none;
}

html.phone-device .public-tour-home-shell::before {
    background: rgba(4, 7, 14, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* MOBILE-SCOPE: START phone-only — keep the completed onboarding action right-aligned */
html.phone-device .public-tour-home-footer .public-tour-home-actions {
    justify-content: flex-end;
}

html.phone-device .public-tour-story-char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none !important;
}

html.phone-device .public-tour-story-line {
    filter: blur(4px);
}

html.phone-device .public-tour-story-line.is-visible {
    filter: blur(0);
}

@keyframes public-tour-story-line-phone-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
    }

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

@media (prefers-reduced-motion: no-preference) {
    html.phone-device .public-tour-story-line.is-visible {
        animation: public-tour-story-line-phone-fade-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}
/* MOBILE-SCOPE: END phone-only */

.public-tour-home-shell::after {
    content: none;
}

.public-tour-home-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.public-tour-home-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1.05;
    text-transform: uppercase;
    color: transparent;
    background-image: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.public-tour-home-close {
    appearance: none;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--text-sub, #94a3b8);
    box-shadow: none;
    cursor: pointer;
    font-size: 1.46rem;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

#public-tour-card.public-tour-card-home-onboarding.story-playing .public-tour-home-close {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-scroll {
    max-height: min(34vh, 250px);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-scroll::-webkit-scrollbar {
    display: none;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-output {
    gap: 12px;
    font-size: 0.98rem;
    line-height: 1.46;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.58);
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-home-footer {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-home-footer.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* MOBILE-SCOPE: START phone-only — stage first-run tutorial controls */
html.phone-device #public-tour-card.public-tour-card-home-onboarding .public-tour-home-footer {
    display: flex;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(14px) scale(0.98);
    filter: blur(5px);
    transition:
        max-height 480ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms ease,
        visibility 0ms linear 480ms;
}

html.phone-device #public-tour-card.public-tour-card-home-onboarding .public-tour-home-footer.is-visible {
    max-height: 132px;
    visibility: visible;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0ms;
}
/* MOBILE-SCOPE: END phone-only */

#public-tour-card.public-tour-card-home-onboarding .public-tour-home-learn-more {
    display: none;
}

.public-tour-home-close:hover,
.public-tour-home-close:focus-visible {
    transform: translateY(-1px);
    color: var(--text-main, #f8fafc);
    opacity: 1;
    outline: none;
}

.public-tour-story {
    width: 100%;
}

.public-tour-story-scroll {
    min-height: 176px;
    overflow: visible;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-mask-image: none;
    mask-image: none;
}

.public-tour-story-scroll::-webkit-scrollbar {
    display: none;
}

.public-tour-story-scroll::before,
.public-tour-story-scroll::after {
    content: none;
}

.public-tour-story-output {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: inherit;
    font-size: clamp(1rem, 1.35vw, 1.08rem);
    line-height: 1.62;
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 92%, #ffffff 8%);
}

.public-tour-story-line {
    margin: 0;
    white-space: pre-wrap;
    padding-left: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
    transition:
        opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.public-tour-story-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.public-tour-story-line.is-feature {
    position: relative;
    padding-left: 2rem;
}

.public-tour-story-line.is-feature + .public-tour-story-line.is-closing {
    margin-top: 4.2px;
}

.public-tour-story-bullet {
    position: absolute;
    left: 0.9rem;
    font-weight: 800;
    color: var(--g1, #60a5fa);
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.public-tour-story-emphasis {
    --public-tour-feature-label-color: color-mix(in srgb, var(--text-main, #e2e8f0) 72%, color-mix(in srgb, var(--g1, #60a5fa) 56%, var(--g2, #f472b6) 44%) 28%);
    font-size: 1.08em;
    font-weight: 850;
    color: var(--public-tour-feature-label-color);
}

.public-tour-story-emphasis .public-tour-story-char {
    color: var(--public-tour-feature-label-color);
    background: none;
    -webkit-text-fill-color: var(--public-tour-feature-label-color);
}

.public-tour-story-word {
    display: inline-block;
    white-space: nowrap;
}

.public-tour-story-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.2em);
    filter: blur(2px);
    transition:
        opacity 170ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 170ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--c, 0) * 15ms);
}

.public-tour-story-line.is-visible .public-tour-story-char {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@keyframes public-tour-story-line-top-down-fade-in {
    from {
        opacity: 0;
        transform: translateY(-18px);
        filter: blur(7px);
    }

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

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
    #public-tour-card.public-tour-card-home-onboarding .public-tour-story-line.is-visible {
        animation: public-tour-story-line-top-down-fade-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    #public-tour-card.public-tour-card-home-onboarding .public-tour-story-line.is-visible .public-tour-story-char {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.public-tour-home-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
}

#public-tour-card.public-tour-card-home-onboarding.story-playing .public-tour-home-footer {
    display: none;
}

/* MOBILE-SCOPE: START phone-only — retain footer geometry while controls spawn */
html.phone-device #public-tour-card.public-tour-card-home-onboarding.story-playing .public-tour-home-footer {
    display: flex;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.98);
    filter: blur(5px);
    pointer-events: none;
}
/* MOBILE-SCOPE: END phone-only */

.public-tour-home-footer-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.public-tour-home-pref {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-sub, #94a3b8);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.public-tour-home-pref input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 5px;
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.public-tour-home-pref input::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--g1, #60a5fa) 42%, transparent) 0%,
        color-mix(in srgb, var(--g1, #60a5fa) 34%, transparent) 45%,
        color-mix(in srgb, var(--g2, #f472b6) 40%, transparent) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.public-tour-home-pref input::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 55%, white 45%);
    border-bottom: 2px solid color-mix(in srgb, var(--g2, #f472b6) 45%, white 55%);
    position: relative;
    z-index: 1;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.public-tour-home-pref input:hover,
.public-tour-home-pref input:focus-visible {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
    outline: none;
}

.public-tour-home-pref input:checked {
    background: transparent;
}

.public-tour-home-pref input:checked::after {
    transform: rotate(-45deg) scale(1);
}

.public-tour-home-learn-more {
    display: none;
    align-items: center;
    gap: 0;
    margin-top: 6px;
    margin-left: 28px;
}

.public-tour-home-learn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--g1, #60a5fa) 52%, var(--g2, #f472b6) 48%);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    box-shadow: none;
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

.public-tour-home-learn-btn:hover,
.public-tour-home-learn-btn:focus-visible {
    color: color-mix(in srgb, white 62%, var(--g1, #60a5fa) 38%);
    text-shadow: 0 0 14px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
    outline: none;
    text-decoration: underline;
}

.public-tour-home-footer .public-tour-home-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 420ms ease, transform 420ms ease;
}

.public-tour-home-footer .public-tour-home-actions.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* MOBILE-SCOPE: START phone-only — stagger first-run tutorial controls */
html.phone-device .public-tour-home-footer .public-tour-home-actions.is-visible {
    animation: public-tour-home-control-spawn 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

html.phone-device .public-tour-home-footer.is-visible .public-tour-home-footer-copy {
    animation: public-tour-home-control-spawn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes public-tour-home-control-spawn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(5px);
    }

    68% {
        opacity: 1;
        transform: translateY(-1px) scale(1.015);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* MOBILE-SCOPE: END phone-only */

.public-tour-home-footer .public-tour-home-actions > * {
    flex: 0 0 auto;
    min-width: 168px;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-start-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 194px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 52%, var(--g2, #f472b6) 48%);
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--g1, #60a5fa) 28%, #dbe7ff 72%) 0%,
        color-mix(in srgb, var(--g1, #60a5fa) 64%, #dbe7ff 36%) 43%,
        color-mix(in srgb, var(--g2, #f472b6) 78%, #f8fafc 22%) 100%);
    color: #071019;
    -webkit-text-fill-color: #071019;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 12px 30px rgba(2, 6, 23, 0.24),
        0 0 24px color-mix(in srgb, var(--g1, #60a5fa) 8%, transparent);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: 0.025em;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-start-btn:hover,
#public-tour-card.public-tour-card-home-onboarding .public-tour-start-btn:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, white 24%, var(--g1, #60a5fa) 42%, var(--g2, #f472b6) 34%);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--g1, #60a5fa) 36%, #dbe7ff 64%) 0%,
        color-mix(in srgb, var(--g1, #60a5fa) 70%, #dbe7ff 30%) 43%,
        color-mix(in srgb, var(--g2, #f472b6) 84%, #f8fafc 16%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 16px 36px rgba(2, 6, 23, 0.3),
        0 0 30px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent);
    outline: none;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-start-btn:active {
    transform: translateY(0) scale(0.985);
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-start-btn:disabled {
    cursor: default;
}

#public-home-tip-surface {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: welcome-screen-fade-in 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.public-home-tip-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: clamp(0.8rem, 1.08vw, 0.86rem);
    line-height: 1.62;
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 78%, #94a3b8 22%);
}

.public-home-tip-text {
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
}

.public-home-tip-actions {
    display: none !important;
}

.public-home-tip-open-btn {
    display: none !important;
}

body:not(.welcome-mode) #public-home-tip-surface {
    display: none !important;
}

#public-home-tip-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--modal-backdrop-bg, rgba(2, 6, 23, 0.74));
    backdrop-filter: blur(8px) saturate(94%);
    -webkit-backdrop-filter: blur(8px) saturate(94%);
    z-index: 13110;
}

#public-home-tip-modal.active {
    display: flex;
    animation: popup-overlay-fade-in var(--popup-fade-duration, 0.3s) ease both;
}

.public-home-tip-modal-card {
    width: min(720px, calc(100vw - 32px));
    max-height: min(82vh, 780px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 22px 20px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 34%, rgba(255, 255, 255, 0.14) 66%);
    background: var(--modal-surface-bg);
    box-shadow:
        0 28px 80px rgba(2, 6, 23, 0.5),
        0 0 0 1px color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 8%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: popup-surface-fade-in var(--popup-fade-duration, 0.3s) ease both;
}

.public-home-tip-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.public-home-tip-modal-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--g1, #60a5fa) 14%, rgba(255, 255, 255, 0.03));
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 78%, #bfdbfe 22%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-home-tip-modal-title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    background: var(--g);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
}

.public-home-tip-modal-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.public-home-tip-modal-note {
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 74%, #94a3b8 26%);
    font-size: 0.9rem;
    line-height: 1.55;
}

.public-home-tip-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.public-home-tip-list::-webkit-scrollbar {
    display: none;
}

.public-home-tip-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 18%, rgba(255, 255, 255, 0.08) 82%);
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.7)) 90%, rgba(255, 255, 255, 0.02) 10%),
        color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.6)) 88%, rgba(255, 255, 255, 0.03) 12%));
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 90%, #ffffff 10%);
    line-height: 1.55;
}

.public-home-tip-list-item + .public-home-tip-list-item {
    margin-top: 10px;
}

.public-home-tip-list-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(1px);
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-note {
    margin-top: 0;
    border-color: color-mix(in srgb, var(--btn-theme-border) 24%, rgba(255, 255, 255, 0.1) 76%);
    background: color-mix(in srgb, var(--g1, #60a5fa) 6%, rgba(255, 255, 255, 0.03));
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 84%, #cbd5e1 16%);
}

@media (max-width: 1180px) {
    body.public-tour-home-onboarding #quiz-pane {
        padding: clamp(92px, 12vh, 128px) 1.25rem 1.5rem;
    }

    body.public-tour-home-onboarding #welcome-screen {
        width: min(780px, calc(100vw - 40px));
        max-width: min(780px, calc(100vw - 40px));
    }

    #public-tour-card.public-tour-card-home-onboarding {
        width: min(388px, calc(100vw - 36px));
        max-height: min(calc(100vh - clamp(210px, 34vh, 280px) - 16px), 600px);
    }
}

@media (max-width: 980px) {
    body.public-tour-home-onboarding #quiz-pane {
        justify-content: flex-start;
        align-items: center;
        padding: clamp(56px, 7vh, 88px) 1.25rem clamp(336px, 38vh, 432px);
    }

    body.public-tour-home-onboarding #welcome-screen {
        --welcome-shift-x: 0px;
        margin: 0 auto;
        width: min(720px, calc(100vw - 32px));
        max-width: min(720px, calc(100vw - 32px));
    }

    body.public-tour-home-onboarding .welcome-donate,
    body.public-tour-home-onboarding #global-fullscreen-btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #public-tour-card.public-tour-card-home-onboarding {
        top: auto;
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: auto;
        max-height: min(42vh, 460px);
        transform: none;
        transform-origin: center bottom;
    }

    #public-tour-card.public-tour-card-home-onboarding.active {
        transform: none;
    }

    .public-tour-home-shell {
        padding: 4px 0 0;
        gap: 18px;
    }

    .public-tour-story-scroll {
        min-height: 0;
    }

    .public-tour-home-footer {
        align-items: flex-start;
    }

    .public-tour-home-footer .public-tour-home-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .public-home-tip-modal-card {
        width: min(100%, calc(100vw - 24px));
        max-height: min(86vh, 780px);
        padding: 18px 18px 16px;
    }

    #public-home-tip-surface,
    .public-home-tip-copy {
        width: 100%;
    }
}

@media (max-width: 980px) and (max-height: 760px) {
    /* Short portrait phones need a little more of the bottom sheet for the
       finished story footer. The welcome tip stays suppressed here because
       there is no non-overlapping space for it above the expanded story. */
    #public-tour-card.public-tour-card-home-onboarding {
        max-height: min(50vh, 460px);
    }

    body.public-tour-home-onboarding #public-home-tip-surface {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        animation: none;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (min-width: 768px) and (max-width: 1100px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
        body.public-tour-home-onboarding #quiz-pane {
            padding: clamp(40px, 6vh, 72px) 1rem 1.5rem;
        }

        #public-tour-card.public-tour-card-home-onboarding {
            width: min(560px, calc(100vw - 32px));
            max-height: min(40vh, 400px);
            transform-origin: center top;
        }
    }
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-home-shell {
    padding: 0;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-line {
    padding-left: 0;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-line.is-feature {
    padding-left: 2rem;
}

#public-tour-card.public-tour-card-home-onboarding .public-tour-story-line.is-closing {
    padding-left: 2.7rem;
}

@media (min-width: 1101px) {
    #public-tour-card.public-tour-card-home-onboarding {
        top: clamp(210px, 34vh, 280px);
        left: auto;
        right: clamp(34px, 7vw, 118px);
        bottom: auto;
        width: min(420px, calc(100vw - 48px));
        max-height: min(calc(100vh - clamp(210px, 34vh, 280px) - 16px), 620px);
        transform-origin: top left;
    }

    #public-tour-card.public-tour-card-home-onboarding.active {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* MOBILE-SCOPE: START phone-only — center and reveal first-run landing content */
/* Center the first-run explanation by itself; the landing brand and actions
   reveal only after the user dismisses this card with its close button. */
html.phone-device body.public-tour-home-onboarding #quiz-pane {
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px);
}

html.phone-device body.public-tour-home-onboarding #welcome-screen {
    width: min(1040px, 100%);
    max-width: none;
    margin: 0;
}

html.phone-device body.public-tour-home-onboarding #welcome-screen .welcome-brand-stage,
html.phone-device body.public-tour-home-onboarding #welcome-screen .welcome-actions {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.98);
    filter: blur(6px);
    pointer-events: none;
}

html.phone-device #public-tour-card.public-tour-card-home-onboarding {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(390px, calc(100vw - 48px));
    max-height: min(86dvh, 620px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate(-50%, -50%) scale(0.97);
    transform-origin: center;
}

html.phone-device #public-tour-card.public-tour-card-home-onboarding.active {
    transform: translate(-50%, -50%) scale(1);
    animation: public-tour-home-center-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.phone-device #public-tour-card.public-tour-card-home-onboarding.public-tour-home-leaving {
    pointer-events: none;
    animation: public-tour-home-center-out 260ms cubic-bezier(0.4, 0, 0.6, 1) both;
}

html.phone-device .public-tour-home-shell::before {
    content: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.phone-device body.public-tour-home-revealing #welcome-screen .welcome-brand-stage {
    animation: public-tour-landing-content-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

html.phone-device body.public-tour-home-revealing #welcome-screen .welcome-actions {
    animation: public-tour-landing-content-in 720ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both !important;
}

html.phone-device body.public-tour-home-revealed #welcome-screen .welcome-brand-stage,
html.phone-device body.public-tour-home-revealed #welcome-screen .welcome-actions {
    animation: none !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    pointer-events: auto;
}

@keyframes public-tour-home-center-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
        filter: blur(7px) saturate(0.92);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes public-tour-home-center-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0) saturate(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 8px)) scale(0.975);
        filter: blur(7px) saturate(0.9);
    }
}

@keyframes public-tour-landing-content-in {
    from {
        opacity: 0;
        visibility: visible;
        transform: translateY(18px) scale(0.98);
        filter: blur(7px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* MOBILE-SCOPE: END phone-only */

/* Home onboarding hero demo */
/* MOBILE-SCOPE: START phone-only — preserve the original onboarding card flow */
html.phone-device .public-tour-home-hero,
html.phone-device .public-tour-home-hero-copy {
    display: contents;
}

html.phone-device .public-tour-home-hero-demo {
    display: none;
}
/* MOBILE-SCOPE: END phone-only */

html:not(.phone-device) .public-tour-home-hero {
    display: block;
}

html:not(.phone-device) .public-tour-home-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

html:not(.phone-device) .public-tour-home-hero-demo {
    display: none;
}

@media (min-width: 981px) {
    html:not(.phone-device) body.public-tour-home-onboarding #quiz-pane {
        align-items: flex-start;
        justify-content: center;
        padding: clamp(68px, 9vh, 96px) clamp(28px, 4vw, 72px) 2rem;
    }

    html:not(.phone-device) body.public-tour-home-onboarding #welcome-screen {
        width: min(960px, calc(100vw - 64px));
        max-width: min(960px, calc(100vw - 64px));
    }

    html:not(.phone-device) body.public-tour-home-onboarding #welcome-screen .welcome-brand-stage {
        display: none !important;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding {
        top: clamp(72px, 10vh, 104px);
        left: max(36px, calc(50% - 660px));
        right: max(36px, calc(50% - 814px));
        bottom: auto;
        width: auto;
        max-height: min(calc(100vh - clamp(72px, 10vh, 104px) - 20px), 864px);
        transform: translate3d(18px, -10px, 0) scale(0.98);
        transform-origin: top center;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding.active {
        transform: translate3d(0, 0, 0) scale(1);
        animation: public-tour-home-hero-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding .public-tour-home-shell::before {
        inset: -30px -44px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 76%, transparent 100%);
        mask-image: radial-gradient(ellipse at center, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 76%, transparent 100%);
    }

    html:not(.phone-device) .public-tour-home-hero {
        display: grid;
        grid-template-columns: minmax(330px, 0.8fr) minmax(605px, 1.87fr);
        gap: clamp(24px, 2.6vw, 36px);
        align-items: center;
    }

    html:not(.phone-device) .public-tour-home-hero-copy {
        align-self: stretch;
        justify-content: flex-start;
        padding: 0 0 10px;
        transform: none;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding .public-tour-home-top {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        min-height: clamp(122px, 17vh, 164px);
        padding-right: 0;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding .public-tour-home-heading {
        width: max-content;
        overflow: visible;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding .public-tour-title {
        width: max-content;
        max-width: none;
        font-size: clamp(2.1rem, 2.45vw, 2.8rem);
        letter-spacing: 0.02em;
        line-height: 0.98;
        opacity: 0;
        transform: translateY(12px);
        filter: blur(6px);
        white-space: nowrap;
        text-wrap: nowrap;
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding.active .public-tour-title {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    @media (prefers-reduced-motion: no-preference) {
        html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding.active .public-tour-title {
            animation: public-tour-home-title-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
    }

    html:not(.phone-device) #public-tour-card.public-tour-card-home-onboarding .public-tour-home-close {
        position: static;
        align-self: flex-end;
        margin: 14px 0 0;
    }

    html:not(.phone-device) .public-tour-home-hero-demo {
        /* Keep every embedded demo surface on the active app palette. The
           preview reuses live component markup, but its root-level composite
           variables can retain the default navy recipe when inherited. */
        --public-home-demo-page-surface: var(--clarity-page-bg, var(--bg, #0b1220));
        --public-home-demo-panel-surface: var(--card-bg, #0f172a);
        --public-home-demo-card-surface: var(--overhaul-card-surface, var(--card-bg, #0f172a));
        --public-home-demo-choice-surface: var(--overhaul-choice-bg, var(--choice-bg, var(--card-bg, #0f172a)));
        --public-home-demo-control-surface: var(--overhaul-btn-bg, var(--public-home-demo-choice-surface));
        --public-home-demo-control-hover-surface: var(--overhaul-btn-hover-bg, var(--public-home-demo-control-surface));
        --public-home-demo-control-border: var(--overhaul-btn-border, var(--public-home-demo-border));
        --public-home-demo-control-border-strong: var(--overhaul-btn-hover-border, var(--public-home-demo-control-border));
        --public-home-demo-ask-border: var(--overhaul-panel-border, var(--public-home-demo-border));
        --public-home-demo-feedback-border: var(--overhaul-card-border, var(--public-home-demo-ask-border));
        --public-home-demo-border: var(--overhaul-panel-border, var(--bd, rgba(148, 163, 184, 0.28)));
        --public-home-demo-surface-soft: color-mix(in srgb,
            var(--public-home-demo-panel-surface) 88%,
            var(--public-home-demo-page-surface) 12%);
        --public-home-demo-modal-background:
            radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--g2, #f472b6) 10%, transparent) 0%, transparent 58%),
            radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--g1, #60a5fa) 9%, transparent) 0%, transparent 56%),
            linear-gradient(165deg,
                color-mix(in srgb, var(--public-home-demo-panel-surface) 92%, var(--g1, #60a5fa) 8%) 0%,
                color-mix(in srgb, var(--public-home-demo-page-surface) 94%, var(--g2, #f472b6) 6%) 100%);
        --public-home-demo-ask-background:
            radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent) 0%, transparent 62%),
            radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--g2, #f472b6) 8%, transparent) 0%, transparent 56%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--public-home-demo-card-surface) 92%, var(--g1, #60a5fa) 8%) 0%,
                color-mix(in srgb, var(--public-home-demo-page-surface) 96%, var(--g2, #f472b6) 4%) 100%);
        --public-home-demo-shared-background:
            radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent), transparent 38%),
            radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--g2, #f472b6) 11%, transparent), transparent 42%),
            linear-gradient(color-mix(in srgb, var(--text-main, #f8fafc) 2.6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(90deg, color-mix(in srgb, var(--text-main, #f8fafc) 2.6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(155deg,
                color-mix(in srgb, var(--public-home-demo-page-surface) 96%, var(--public-home-demo-panel-surface) 4%),
                color-mix(in srgb, var(--public-home-demo-panel-surface) 92%, var(--public-home-demo-page-surface) 8%));
        position: relative;
        display: block;
        aspect-ratio: 10 / 7;
        min-width: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 26%, transparent);
        border-radius: 22px;
        background:
            radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--g1, #60a5fa) 9%, transparent), transparent 46%),
            radial-gradient(circle at 92% 96%, color-mix(in srgb, var(--g2, #f472b6) 6%, transparent), transparent 50%),
            linear-gradient(155deg,
                color-mix(in srgb, var(--public-home-demo-panel-surface) 56%, transparent),
                color-mix(in srgb, var(--public-home-demo-surface-soft) 42%, transparent));
        box-shadow:
            0 24px 64px rgba(2, 6, 23, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        filter: blur(8px);
        transform: translate(16px, 26px) scale(0.985);
        isolation: isolate;
        pointer-events: none;
        transition:
            opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
            filter 520ms ease,
            visibility 0ms linear 680ms;
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-revealed {
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: translate(8px, 12px) scale(1);
        pointer-events: auto;
        transition-delay: 0ms;
    }

    html:not(.phone-device) .public-tour-home-demo-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 72.463768%;
        height: 72.463768%;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 34px;
        color: var(--text-main, #e2e8f0);
        font-family: inherit;
        transform: scale(1.38);
        transform-origin: top left;
        transition:
            opacity 300ms ease,
            filter 300ms ease,
            transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-loop-reset .public-tour-home-demo-frame {
        opacity: 0.08;
        filter: brightness(0.35) blur(2px);
    }

    html:not(.phone-device) .public-tour-home-demo-viewport {
        position: relative;
        min-height: 0;
        overflow: hidden;
        background: var(--public-home-demo-shared-background);
        transition: opacity 300ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-viewport::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background:
            radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--g1, #60a5fa) 44%, transparent) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 88% 67%, color-mix(in srgb, var(--g2, #f472b6) 42%, transparent) 0 2px, transparent 3px),
            radial-gradient(circle at 68% 79%, color-mix(in srgb, var(--text-main, #f8fafc) 32%, transparent) 0 1px, transparent 2px),
            radial-gradient(ellipse at center, transparent 44%, color-mix(in srgb, var(--public-home-demo-page-surface) 38%, transparent) 100%);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-viewport::after {
        content: "";
        position: absolute;
        top: 50%;
        right: clamp(28px, 7vw, 64px);
        z-index: 1;
        width: clamp(132px, 21vw, 196px);
        aspect-ratio: 1;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent);
        border-radius: 50%;
        background:
            radial-gradient(circle at 20% 62%, color-mix(in srgb, var(--g1, #60a5fa) 90%, white 10%) 0 2px, color-mix(in srgb, var(--g1, #60a5fa) 15%, transparent) 3px 8px, transparent 9px),
            radial-gradient(circle at 76% 23%, color-mix(in srgb, var(--g2, #f472b6) 86%, white 14%) 0 2px, color-mix(in srgb, var(--g2, #f472b6) 13%, transparent) 3px 7px, transparent 8px),
            radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--text-main, #f8fafc) 72%, transparent) 0 1.5px, transparent 2.5px),
            linear-gradient(126deg, transparent 49.55%, color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent) 50%, transparent 50.45%),
            linear-gradient(32deg, transparent 49.55%, color-mix(in srgb, var(--g2, #f472b6) 11%, transparent) 50%, transparent 50.45%);
        box-shadow:
            0 0 0 26px color-mix(in srgb, var(--g1, #60a5fa) 3.5%, transparent),
            0 0 0 52px color-mix(in srgb, var(--g2, #f472b6) 2.5%, transparent),
            inset 0 0 54px color-mix(in srgb, var(--g1, #60a5fa) 4%, transparent);
        opacity: 0.78;
        transform: translateY(-50%) rotate(-11deg);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-controls {
        position: relative;
        z-index: 14;
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) 36px;
        gap: 12px;
        align-items: center;
        padding: 0 13px;
        border-top: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.14)) 20%, transparent);
        background:
            linear-gradient(90deg,
                color-mix(in srgb, var(--g1, #60a5fa) 3%, transparent),
                transparent 36%,
                color-mix(in srgb, var(--g2, #f472b6) 3%, transparent)),
            color-mix(in srgb, var(--public-home-demo-panel-surface) 64%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: auto;
    }

    html:not(.phone-device) .public-tour-home-demo-controls button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        min-width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.16)) 58%, transparent);
        border-radius: 50%;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 58%),
            color-mix(in srgb, var(--public-home-demo-control-surface) 70%, transparent);
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, white 12%);
        font: inherit;
        box-shadow:
            0 4px 12px rgba(2, 6, 23, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition:
            transform 160ms ease,
            border-color 160ms ease,
            background-color 160ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-controls button:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 52%, rgba(255, 255, 255, 0.26));
        background-color: color-mix(in srgb, var(--public-home-demo-control-hover-surface) 84%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-controls button:active {
        transform: translateY(0) scale(0.96);
    }

    html:not(.phone-device) .public-tour-home-demo-controls [data-home-demo-toggle-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-pause-icon {
        position: relative;
        display: block;
        width: 7px;
        height: 9px;
        border-left: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 66%, white 34%);
        border-right: 2px solid color-mix(in srgb, var(--g2, #f472b6) 62%, white 38%);
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-paused .public-tour-home-demo-pause-icon {
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-right: 0;
        border-bottom: 4px solid transparent;
        border-left: 7px solid color-mix(in srgb, var(--g1, #60a5fa) 60%, white 40%);
        transform: translateX(1px);
    }

    html:not(.phone-device) .public-tour-home-hero-demo:not(.is-started) .public-tour-home-demo-pause-icon {
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-right: 0;
        border-bottom: 4px solid transparent;
        border-left: 7px solid color-mix(in srgb, var(--g1, #60a5fa) 60%, white 40%);
        transform: translateX(1px);
    }

    html:not(.phone-device) .public-tour-home-demo-slider-shell {
        position: relative;
        width: 100%;
        min-width: 0;
        height: 18px;
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"] {
        --public-home-demo-slider-progress: 0%;
        position: relative;
        z-index: 2;
        width: 100%;
        min-width: 0;
        height: 18px;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        cursor: pointer;
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]::-webkit-slider-runnable-track {
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg,
            var(--g1, #60a5fa) 0%,
            var(--g2, #f472b6) var(--public-home-demo-slider-progress),
            color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent) var(--public-home-demo-slider-progress),
            color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent) 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        margin-top: -4px;
        appearance: none;
        -webkit-appearance: none;
        border: 1.5px solid rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent),
            0 2px 6px rgba(2, 6, 23, 0.28);
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]::-moz-range-track {
        height: 2px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]::-moz-range-progress {
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--g1, #60a5fa), var(--g2, #f472b6));
    }

    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]::-moz-range-thumb {
        width: 10px;
        height: 10px;
        border: 1.5px solid rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent),
            0 2px 6px rgba(2, 6, 23, 0.28);
    }

    html:not(.phone-device) .public-tour-home-demo-slider-stops {
        position: absolute;
        top: 50%;
        left: 5px;
        right: 5px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
        transform: translateY(-50%);
    }

    html:not(.phone-device) .public-tour-home-demo-slider-stops i {
        display: block;
        width: 2px;
        height: 2px;
        flex: 0 0 2px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-main, #e2e8f0) 48%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-controls button:focus-visible,
    html:not(.phone-device) .public-tour-home-demo-controls input[type="range"]:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 78%, white 22%);
        outline-offset: 2px;
    }

    html:not(.phone-device) .public-tour-home-demo-controls output {
        display: grid;
        place-items: center;
        min-width: 36px;
        height: 20px;
        padding: 0 6px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.14)) 30%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--public-home-demo-control-surface) 38%, transparent);
        color: color-mix(in srgb, var(--text-sub, #94a3b8) 86%, white 14%);
        font-size: 6.5px;
        font-variant-numeric: tabular-nums;
        font-weight: 750;
        letter-spacing: 0.035em;
        text-align: center;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-paused .public-tour-home-demo-scene *,
    html:not(.phone-device) .public-tour-home-hero-demo.is-paused .public-tour-home-demo-step-intro,
    html:not(.phone-device) .public-tour-home-hero-demo.is-paused .public-tour-home-demo-step-intro * {
        animation-play-state: paused !important;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro {
        position: absolute;
        inset: 0;
        z-index: 12;
        display: grid;
        place-items: center;
        padding: clamp(28px, 5vw, 58px);
        overflow: hidden;
        background: var(--public-home-demo-shared-background);
        background-color: var(--public-home-demo-page-surface);
        box-shadow: inset 0 0 90px color-mix(in srgb, var(--public-home-demo-page-surface) 24%, transparent);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.018);
        transition:
            opacity 260ms ease,
            transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0ms linear 520ms;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background:
            radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--g1, #60a5fa) 44%, transparent) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 88% 67%, color-mix(in srgb, var(--g2, #f472b6) 42%, transparent) 0 2px, transparent 3px),
            radial-gradient(circle at 68% 79%, color-mix(in srgb, var(--text-main, #f8fafc) 32%, transparent) 0 1px, transparent 2px),
            radial-gradient(ellipse at center, transparent 44%, color-mix(in srgb, var(--public-home-demo-page-surface) 38%, transparent) 100%);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro::after {
        content: "";
        position: absolute;
        top: 50%;
        right: clamp(28px, 7vw, 64px);
        z-index: 1;
        width: clamp(132px, 21vw, 196px);
        aspect-ratio: 1;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent);
        border-radius: 50%;
        background:
            radial-gradient(circle at 20% 62%, color-mix(in srgb, var(--g1, #60a5fa) 90%, white 10%) 0 2px, color-mix(in srgb, var(--g1, #60a5fa) 15%, transparent) 3px 8px, transparent 9px),
            radial-gradient(circle at 76% 23%, color-mix(in srgb, var(--g2, #f472b6) 86%, white 14%) 0 2px, color-mix(in srgb, var(--g2, #f472b6) 13%, transparent) 3px 7px, transparent 8px),
            radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--text-main, #f8fafc) 72%, transparent) 0 1.5px, transparent 2.5px),
            linear-gradient(126deg, transparent 49.55%, color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent) 50%, transparent 50.45%),
            linear-gradient(32deg, transparent 49.55%, color-mix(in srgb, var(--g2, #f472b6) 11%, transparent) 50%, transparent 50.45%);
        box-shadow:
            0 0 0 26px color-mix(in srgb, var(--g1, #60a5fa) 3.5%, transparent),
            0 0 0 52px color-mix(in srgb, var(--g2, #f472b6) 2.5%, transparent),
            inset 0 0 54px color-mix(in srgb, var(--g1, #60a5fa) 4%, transparent);
        opacity: 0.78;
        transform: translateY(-50%) rotate(-11deg);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro.is-visible {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition: none;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro.is-visible.is-leaving {
        opacity: 0;
        visibility: visible;
        transform: scale(0.992);
        transition:
            opacity 260ms ease,
            transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro > p {
        position: relative;
        z-index: 2;
        justify-self: start;
        width: max-content;
        max-width: none;
        min-height: 1.3em;
        margin: 0 0 0 clamp(18px, 6vw, 42px);
        color: color-mix(in srgb, var(--text-main, #f8fafc) 88%, white 12%);
        font-family: var(--font-main, inherit);
        font-size: clamp(14px, 1.4vw, 18px);
        font-weight: 860;
        letter-spacing: -0.025em;
        line-height: 1.18;
        text-align: left;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro > p::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -18px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        box-shadow:
            0 0 0 5px color-mix(in srgb, var(--g1, #60a5fa) 8%, transparent),
            0 0 18px color-mix(in srgb, var(--g2, #f472b6) 36%, transparent);
        transform: translateY(-50%);
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro .public-tour-home-demo-type-letter {
        color: inherit;
        -webkit-text-fill-color: currentColor;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro.is-left-to-right-reveal > p {
        animation: public-tour-home-demo-title-sweep-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro.is-source-title-reveal > p {
        animation-duration: 605ms;
    }

    html:not(.phone-device) .public-tour-home-demo-step-intro > p::after {
        content: none !important;
        display: none !important;
    }

    html:not(.phone-device) .public-tour-home-demo-scene {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: clamp(14px, 2vw, 24px);
        opacity: 0;
        transform: translateY(5px) scale(0.985);
        transform-origin: center;
        transition: opacity 240ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active {
        z-index: 100;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-import-title-zoom {
        transform: translate3d(32%, 22%, 0) scale(1.72);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-source-control-zoom {
        transform-origin: center;
        transform: translate3d(0, 8.5%, 0) scale(1.4);
        transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-source-selection-zoom {
        transform-origin: 75% 50%;
        transform: translate3d(-14%, -2%, 0) scale(1.57);
        transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-source-selection-returning {
        transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-say-more-zoom {
        transform-origin:
            var(--public-home-demo-say-more-origin-x, 62%)
            var(--public-home-demo-say-more-origin-y, 66%);
        transform:
            translate3d(
                var(--public-home-demo-say-more-travel-x, -12%),
                var(--public-home-demo-say-more-travel-y, -10%),
                0
            )
            scale(1.25);
        transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-ask-answer-zoom {
        transform-origin:
            var(--public-home-demo-say-more-origin-x, 62%)
            var(--public-home-demo-say-more-origin-y, 66%);
        transform: translate3d(-6%, 0, 0) scale(1.25);
        transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-scene-outro {
        opacity: 0;
        transition: opacity 360ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-file-open-zoom {
        will-change: transform, filter, opacity;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-preset-zoom {
        transform: translate3d(0, 0, 0) scale(1);
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-import-transition-out {
        opacity: 0;
        filter: brightness(0.54) blur(5px);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-leaving {
        z-index: 1;
        opacity: 0;
        transform: translateY(-4px) scale(0.99);
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 36px;
        overflow: hidden;
        background:
            radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--g1, #60a5fa) 9%, transparent), transparent 38%),
            radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--g2, #f472b6) 7%, transparent), transparent 42%),
            linear-gradient(color-mix(in srgb, var(--text-main, #f8fafc) 4%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(90deg, color-mix(in srgb, var(--text-main, #f8fafc) 4%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(155deg,
                color-mix(in srgb, var(--public-home-demo-page-surface) 96%, var(--public-home-demo-panel-surface) 4%),
                color-mix(in srgb, var(--public-home-demo-panel-surface) 92%, var(--public-home-demo-page-surface) 8%));
        box-shadow: inset 0 0 90px color-mix(in srgb, var(--public-home-demo-page-surface) 24%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 44%, color-mix(in srgb, var(--public-home-demo-page-surface) 22%, transparent) 100%);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen h3 {
        position: relative;
        z-index: 2;
        width: min(94%, 540px);
        margin: 0 0 18px;
        color: transparent;
        background-image: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: var(--font-main, inherit);
        font-size: clamp(18px, 2vw, 24px);
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.08;
        text-align: center;
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-12px);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-more-title-visible .public-tour-home-demo-more-screen h3 {
        animation: public-tour-home-demo-more-title-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen ul {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: min(84%, 470px);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen li {
        position: relative;
        padding-left: 20px;
        color: color-mix(in srgb, var(--text-main, #f8fafc) 84%, var(--text-sub, #94a3b8) 16%);
        font-size: clamp(9.5px, 1.05vw, 12px);
        font-weight: 740;
        line-height: 1.3;
        opacity: 0;
        filter: blur(4px);
        transform: translateX(-10px);
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen li::before {
        content: "";
        position: absolute;
        top: 0.43em;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        box-shadow: 0 0 9px color-mix(in srgb, var(--g1, #60a5fa) 42%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-more-screen li.is-visible {
        animation: public-tour-home-demo-more-item-in 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-more-closing {
        position: relative;
        z-index: 2;
        width: min(84%, 470px);
        margin: 13px 0 0;
        padding-left: 36px;
        color: color-mix(in srgb, var(--text-main, #f8fafc) 62%, var(--g1, #60a5fa) 38%);
        font-family: var(--font-main, inherit);
        font-size: clamp(9px, 0.95vw, 11.5px);
        font-style: italic;
        font-weight: 680;
        letter-spacing: 0.025em;
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-7px);
    }

    html:not(.phone-device) .public-tour-home-demo-more-closing.is-visible {
        animation: public-tour-home-demo-more-closing-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-panel {
        position: relative;
        width: min(90%, 560px);
        padding: clamp(18px, 2vw, 24px);
        overflow: hidden;
        border: 1px solid var(--public-home-demo-border);
        border-radius: 16px;
        background: var(--public-home-demo-modal-background);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    html:not(.phone-device) .public-tour-home-demo-import-panel {
        width: min(91%, 570px);
        opacity: 1;
        visibility: visible;
        transition:
            opacity 220ms ease,
            transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 220ms ease,
            visibility 0ms linear 0ms;
    }

    html:not(.phone-device) .public-tour-home-demo-key-panel {
        width: min(84%, 520px);
    }

    html:not(.phone-device) .public-tour-home-demo-generate-panel {
        width: min(96%, 920px);
        padding: clamp(14px, 1.55vw, 19px);
    }

    html:not(.phone-device) .public-tour-home-demo-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 11px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    html:not(.phone-device) .public-tour-home-demo-modal-header h3 {
        margin: 0;
        color: transparent;
        background: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(12px, 1.25vw, 16px);
        font-weight: 850;
        letter-spacing: -0.015em;
        white-space: nowrap;
    }

    html:not(.phone-device) [data-home-demo-import-title] {
        min-width: 5.5em;
        min-height: 1.2em;
        color: transparent;
        background-image: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    html:not(.phone-device) [data-home-demo-import-title]::after {
        content: none !important;
        display: none !important;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-import-title-revealed [data-home-demo-import-title] {
        animation: public-tour-home-demo-title-sweep-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-type-letter {
        display: inline-block;
        opacity: 0;
        animation: public-tour-home-demo-letter-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-modal-header > span {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border: 1px solid var(--btn-border, rgba(148, 163, 184, 0.28));
        border-radius: 8px;
        background: var(--public-home-demo-control-surface);
        color: var(--text-sub, #94a3b8);
        font-size: 14px;
        font-weight: 500;
    }

    html:not(.phone-device) .public-tour-home-demo-route-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-route-head b {
        color: transparent;
        background: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(10px, 1vw, 13px);
        font-weight: 800;
    }

    html:not(.phone-device) .public-tour-home-demo-route-head span {
        padding: 4px 8px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 34%, rgba(255, 255, 255, 0.12));
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 8%, transparent);
        color: color-mix(in srgb, var(--g1, #60a5fa) 68%, white 32%);
        font-size: 7px;
        font-weight: 780;
    }

    html:not(.phone-device) .public-tour-home-demo-route-copy {
        margin: 6px 0 13px;
        color: var(--text-sub, #94a3b8);
        font-size: clamp(8px, 0.78vw, 10px);
        line-height: 1.45;
    }

    html:not(.phone-device) .public-tour-home-demo-panel-title,
    html:not(.phone-device) .public-tour-home-demo-quiz-meta,
    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    html:not(.phone-device) .public-tour-home-demo-panel-title span,
    html:not(.phone-device) .public-tour-home-demo-quiz-meta span,
    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar b {
        font-size: clamp(9px, 0.9vw, 11px);
        font-weight: 850;
    }

    html:not(.phone-device) .public-tour-home-demo-panel-title i,
    html:not(.phone-device) .public-tour-home-demo-quiz-meta i,
    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar span {
        color: var(--text-sub, #94a3b8);
        font-size: clamp(7px, 0.72vw, 9px);
        font-style: normal;
        font-weight: 700;
    }

    html:not(.phone-device) .public-tour-home-demo-drop-zone {
        position: relative;
        display: grid;
        place-items: center;
        min-height: clamp(104px, 11vw, 126px);
        margin-top: 0;
        padding: 12px 16px;
        border: 2px dashed var(--g1, #60a5fa);
        border-radius: 12px;
        background: linear-gradient(165deg,
            color-mix(in srgb, var(--g1, #60a5fa) 9%, var(--public-home-demo-panel-surface) 91%) 0%,
            color-mix(in srgb, var(--g2, #f472b6) 7%, var(--public-home-demo-page-surface) 93%) 100%);
        text-align: center;
        transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-drop-zone > * {
        transition: opacity 180ms ease, transform 220ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-upload-icon {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: transparent;
        color: transparent;
        background-image: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 24px;
        font-weight: 900;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-drop-zone strong {
        align-self: end;
        font-size: clamp(10px, 0.92vw, 12px);
    }

    html:not(.phone-device) .public-tour-home-demo-drop-zone small {
        align-self: start;
        color: var(--text-sub, #94a3b8);
        font-size: 9px;
    }

    html:not(.phone-device) .public-tour-home-demo-drop-success {
        position: absolute;
        top: 50%;
        left: 50%;
        color: #6ee7b7;
        font-size: 12px;
        font-weight: 850;
        opacity: 0;
        transform: translate(-50%, -42%) scale(0.92);
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 6;
        display: grid;
        grid-template-rows: 34px 31px minmax(0, 1fr) 38px;
        width: min(94%, 620px);
        height: min(90%, 360px);
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 42%, var(--public-home-demo-border) 58%);
        border-radius: 13px;
        background-color: var(--public-home-demo-page-surface);
        background-image: linear-gradient(155deg,
            color-mix(in srgb, var(--public-home-demo-panel-surface) 88%, var(--public-home-demo-page-surface) 12%),
            color-mix(in srgb, var(--public-home-demo-surface-soft) 90%, var(--public-home-demo-page-surface) 10%));
        box-shadow: 0 26px 58px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-title,
    html:not(.phone-device) .public-tour-home-demo-file-picker-path,
    html:not(.phone-device) .public-tour-home-demo-file-picker-footer {
        display: flex;
        align-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-title {
        justify-content: space-between;
        padding: 0 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        background: color-mix(in srgb, var(--public-home-demo-panel-surface) 94%, rgba(255, 255, 255, 0.04));
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-title b {
        font-size: 9px;
        font-weight: 820;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-title span {
        color: var(--text-sub, #94a3b8);
        font-size: 14px;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-path {
        gap: 8px;
        padding: 0 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        color: var(--text-sub, #94a3b8);
        font-size: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-path > span {
        display: grid;
        place-items: center;
        width: 19px;
        height: 19px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        font-size: 13px;
    }

    html:not(.phone-device) .public-tour-home-demo-folder-icon {
        flex: 0 0 auto;
        width: 16px;
        height: 14px;
        color: #fbbf24;
        filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2));
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-path b::after {
        content: "/";
        margin-left: 8px;
        color: color-mix(in srgb, var(--text-sub, #94a3b8) 52%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-path i {
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 86%, white 14%);
        font-style: normal;
        font-weight: 760;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-body {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-sidebar {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 9px 7px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        background: color-mix(in srgb, var(--card-bg, #0f172a) 90%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-sidebar span {
        padding: 6px 8px;
        border-radius: 6px;
        color: var(--text-sub, #94a3b8);
        font-size: 6.5px;
        font-weight: 720;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-sidebar .is-active {
        background: color-mix(in srgb, var(--g1, #60a5fa) 14%, rgba(255, 255, 255, 0.035));
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 90%, white 10%);
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-list {
        min-width: 0;
        padding: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-columns,
    html:not(.phone-device) .public-tour-home-demo-file-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        gap: 7px;
        align-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-columns {
        height: 20px;
        padding: 0 6px 0 31px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        color: var(--text-sub, #94a3b8);
        font-size: 5.5px;
        text-transform: uppercase;
    }

    html:not(.phone-device) .public-tour-home-demo-file-row {
        grid-template-columns: 24px minmax(0, 1fr) 42px 42px;
        min-height: 34px;
        margin-top: 3px;
        padding: 4px 6px;
        border: 1px solid transparent;
        border-radius: 7px;
        transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-file-icon {
        display: grid;
        place-items: center;
        width: 21px;
        height: 25px;
        background: transparent;
        color: #fb7185;
        filter: drop-shadow(0 3px 5px rgba(225, 29, 72, 0.22));
    }

    html:not(.phone-device) .public-tour-home-demo-file-icon.is-text {
        background: transparent;
        color: #60a5fa;
        filter: drop-shadow(0 3px 5px rgba(37, 99, 235, 0.22));
    }

    html:not(.phone-device) .public-tour-home-demo-file-icon svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    html:not(.phone-device) .public-tour-home-demo-file-row b {
        overflow: hidden;
        font-size: 7px;
        font-weight: 760;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-file-row i,
    html:not(.phone-device) .public-tour-home-demo-file-row em {
        color: var(--text-sub, #94a3b8);
        font-size: 6px;
        font-style: normal;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-footer {
        justify-content: flex-end;
        gap: 7px;
        padding: 0 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        background: color-mix(in srgb, var(--card-bg, #0f172a) 92%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-footer > span {
        margin-right: auto;
        color: var(--text-sub, #94a3b8);
        font-size: 6px;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-footer i,
    html:not(.phone-device) .public-tour-home-demo-file-picker-footer b {
        display: grid;
        place-items: center;
        min-width: 54px;
        height: 23px;
        border: 1px solid var(--btn-border, rgba(148, 163, 184, 0.25));
        border-radius: 7px;
        color: var(--text-sub, #94a3b8);
        font-size: 6.5px;
        font-style: normal;
        font-weight: 800;
    }

    html:not(.phone-device) .public-tour-home-demo-file-picker-footer b {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 28%, var(--btn-border, #334155));
        background: color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        opacity: 0.52;
        transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-picker-open .public-tour-home-demo-import-panel {
        opacity: 0;
        visibility: hidden;
        filter: brightness(0.52) saturate(0.72) blur(1px);
        transform: scale(0.97);
        transition-delay: 0ms, 0ms, 0ms, 220ms;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-picker-open .public-tour-home-demo-file-picker {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-file-selected .public-tour-home-demo-file-row.is-target-file {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 54%, rgba(255, 255, 255, 0.12));
        background: color-mix(in srgb, var(--g1, #60a5fa) 18%, rgba(255, 255, 255, 0.035));
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--g1, #60a5fa) 74%, white 12%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-file-selected .public-tour-home-demo-file-picker-footer b {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, rgba(255, 255, 255, 0.14));
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 78%, #1e293b 22%),
            color-mix(in srgb, var(--g2, #f472b6) 68%, var(--g1, #60a5fa) 32%));
        color: white;
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-accepted .public-tour-home-demo-file-picker,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="import"].is-complete .public-tour-home-demo-file-picker {
        opacity: 0;
        transform: translate(-50%, -54%) scale(0.97);
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="import"].is-complete .public-tour-home-demo-import-panel {
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: scale(1);
        transition-delay: 0ms;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-accepted .public-tour-home-demo-drop-zone,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="import"].is-complete .public-tour-home-demo-drop-zone {
        border-color: color-mix(in srgb, #34d399 78%, white 8%);
        background: color-mix(in srgb, #34d399 12%, rgba(255, 255, 255, 0.025));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, #34d399 28%, transparent), 0 0 30px color-mix(in srgb, #34d399 12%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-accepted .public-tour-home-demo-drop-zone > :not(.public-tour-home-demo-drop-success),
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="import"].is-complete .public-tour-home-demo-drop-zone > :not(.public-tour-home-demo-drop-success) {
        opacity: 0;
        transform: translateY(3px) scale(0.97);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-accepted .public-tour-home-demo-drop-success,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="import"].is-complete .public-tour-home-demo-drop-success {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-key-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px 0 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-key-label b {
        color: var(--text-sub, #94a3b8);
        font-size: 9px;
        font-weight: 700;
    }

    html:not(.phone-device) .public-tour-home-demo-key-label span {
        padding: 3px 7px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 7%, transparent);
        color: color-mix(in srgb, var(--g1, #60a5fa) 66%, white 34%);
        font-size: 7px;
        font-weight: 760;
    }

    html:not(.phone-device) .public-tour-home-demo-key-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
    }

    html:not(.phone-device) .public-tour-home-demo-key-field {
        min-width: 0;
        height: 40px;
        padding: 0 13px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.16)) 70%, transparent);
        border-radius: 9px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 88%, transparent);
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-key-value {
        display: block;
        width: 0;
        overflow: hidden;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 78%, white 22%);
        font-size: 11px;
        letter-spacing: 0.17em;
        line-height: 38px;
        white-space: nowrap;
        transition: width 620ms steps(8, end);
    }

    html:not(.phone-device) .public-tour-home-demo-key-row button,
    html:not(.phone-device) .public-tour-home-demo-generate-btn,
    html:not(.phone-device) .public-tour-home-demo-quiz-meta button {
        appearance: none;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 48%, rgba(255, 255, 255, 0.12));
        border-radius: 9px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 82%, #1e293b 18%),
            color-mix(in srgb, var(--g2, #f472b6) 72%, var(--g1, #60a5fa) 28%));
        color: white;
        font: inherit;
        font-size: 8px;
        font-weight: 850;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-key-row button {
        min-width: 72px;
    }

    html:not(.phone-device) .public-tour-home-demo-key-note {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 9px;
        color: var(--text-sub, #94a3b8);
        font-size: 7.5px;
        transition: opacity 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-key-note span {
        color: #6ee7b7;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-success {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        color: #6ee7b7;
        font-size: 9px;
        font-weight: 800;
        opacity: 0;
        transform: translateY(5px);
        transition: opacity 220ms ease, transform 220ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-success span {
        display: grid;
        place-items: center;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: color-mix(in srgb, #34d399 20%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-field-active .public-tour-home-demo-key-field {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 75%, white 10%);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--g1, #60a5fa) 17%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-key-filled .public-tour-home-demo-key-value {
        width: 100%;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-saved .public-tour-home-demo-success {
        opacity: 1;
        transform: translateY(0);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-saved .public-tour-home-demo-key-note {
        opacity: 0.35;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header {
        position: relative;
        margin: -3px 0 9px;
        padding: 8px 10px 9px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 14%, var(--btn-theme-border, #334155) 86%);
        border-radius: 14px;
        background:
            radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent), transparent 62%),
            radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--g2, #f472b6) 14%, transparent), transparent 58%),
            color-mix(in srgb, var(--card-bg, #0f172a) 52%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 16px rgba(2, 6, 23, 0.12);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span {
        display: grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border: 1px solid var(--btn-border, rgba(148, 163, 184, 0.25));
        border-radius: 7px;
        background: transparent;
        color: var(--text-sub, #94a3b8);
        font-size: 6.5px;
        font-weight: 760;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-chip {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        margin: 0 3px 8px;
        padding: 6px 8px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 58%, transparent);
        border-radius: 10px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 72%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-chip > span {
        display: grid;
        place-items: center;
        width: 24px;
        height: 27px;
        border-radius: 6px;
        background: linear-gradient(145deg, #fb7185, #e11d48);
        color: white;
        font-size: 6px;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-chip b {
        overflow: hidden;
        font-size: 7.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-chip i {
        color: #6ee7b7;
        font-size: 7px;
        font-style: normal;
        font-weight: 760;
    }

    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-generator-steps,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-generate-btn,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-progress {
        display: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-pdf-chip,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-config-heading,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-preset-picker,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-generate-actions,
    html:not(.phone-device) .public-tour-home-demo-generate-panel > .public-tour-home-demo-preset-progress {
        display: none;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-generator-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
        gap: clamp(18px, 2.2vw, 34px);
        min-height: clamp(300px, 39vh, 400px);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-source-pane,
    html:not(.phone-device) .public-tour-home-demo-updated-config-pane {
        min-width: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-source-pane {
        display: flex;
        flex-direction: column;
        padding-left: 14px;
        border-left: 2px solid transparent;
        border-image: linear-gradient(180deg, var(--g1, #60a5fa), var(--g2, #f472b6)) 1;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-config-pane {
        display: flex;
        flex-direction: column;
        padding-left: clamp(15px, 1.8vw, 24px);
        border-left: 2px solid transparent;
        border-image: linear-gradient(180deg, var(--g1, #60a5fa), var(--g2, #f472b6)) 1;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-pane-title {
        margin: 0 0 clamp(18px, 2vw, 27px);
        color: transparent;
        background: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(12px, 1.35vw, 18px);
        font-weight: 880;
        letter-spacing: -0.025em;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-list {
        display: grid;
        gap: 6px;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto 24px;
        gap: 8px;
        align-items: center;
        min-height: 42px;
        padding: 6px 8px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 72%, transparent);
        border-radius: 10px;
        background: color-mix(in srgb, #223a62 78%, transparent);
        color: var(--text-main, #e2e8f0);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row.is-selected {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 46%, var(--btn-theme-border, #334155) 54%);
        background: color-mix(in srgb, #294675 82%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-checkbox {
        position: relative;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border: 1px solid color-mix(in srgb, var(--text-sub, #94a3b8) 46%, transparent);
        border-radius: 6px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 44%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row.is-selected .public-tour-home-demo-updated-checkbox {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 70%, white 30%);
        background: color-mix(in srgb, var(--g1, #60a5fa) 25%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row.is-selected .public-tour-home-demo-updated-checkbox::after {
        content: "✓";
        color: white;
        font-size: 11px;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row b {
        overflow: hidden;
        font-size: 8px;
        font-weight: 760;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row i {
        padding: 3px 6px;
        border: 1px solid rgba(52, 211, 153, 0.5);
        border-radius: 999px;
        background: rgba(16, 185, 129, 0.16);
        color: #34d399;
        font-size: 5.5px;
        font-style: normal;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-file-row em {
        display: grid;
        place-items: center;
        width: 24px;
        height: 27px;
        border: 1px solid color-mix(in srgb, var(--text-sub, #94a3b8) 22%, transparent);
        border-radius: 7px;
        color: var(--text-sub, #94a3b8);
        font-size: 14px;
        font-style: normal;
        line-height: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-select-all {
        align-self: center;
        margin-top: 20px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-main, #e2e8f0);
        font: inherit;
        font-size: 7px;
        font-weight: 820;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-picker {
        display: grid;
        gap: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        min-height: 55px;
        padding: 8px 10px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 78%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 35%, transparent);
        color: var(--text-main, #e2e8f0);
        font: inherit;
        text-align: left;
        pointer-events: none;
        transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-option.is-selected {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 60%, var(--g2, #f472b6) 40%);
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent 84%),
            color-mix(in srgb, var(--g2, #f472b6) 16%, transparent 84%));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent 90%);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 29px;
        height: 29px;
        color: var(--g1, #60a5fa);
        font-size: 19px;
        font-weight: 850;
        line-height: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        gap: 3px;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-content b,
    html:not(.phone-device) .public-tour-home-demo-updated-preset-content small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-content b {
        color: var(--text-main, #f8fafc);
        font-size: 10px;
        font-weight: 850;
        line-height: 1.1;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-content small {
        color: var(--text-sub, #94a3b8);
        font-size: 7px;
        line-height: 1.25;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-check {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        color: #f8fafc;
        font-size: 12px;
        font-weight: 950;
        opacity: 0;
        transform: scale(0.65);
        transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-preset-option.is-selected .public-tour-home-demo-updated-preset-check {
        opacity: 1;
        transform: scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-updated-preset-option[data-preset="quick"],
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-preset-option[data-preset="quick"] {
        border-color: color-mix(in srgb, var(--btn-theme-border, #334155) 78%, transparent);
        background: color-mix(in srgb, var(--card-bg, #0f172a) 35%, transparent);
        box-shadow: none;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-updated-preset-option[data-preset="quick"] .public-tour-home-demo-updated-preset-check,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-preset-option[data-preset="quick"] .public-tour-home-demo-updated-preset-check {
        opacity: 0;
        transform: scale(0.65);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-updated-preset-option[data-preset="standard"],
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-preset-option[data-preset="standard"] {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 60%, var(--g2, #f472b6) 40%);
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent 84%),
            color-mix(in srgb, var(--g2, #f472b6) 16%, transparent 84%));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent 90%);
        transform: translateY(-1px);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-updated-preset-option[data-preset="standard"] .public-tour-home-demo-updated-preset-check,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-preset-option[data-preset="standard"] .public-tour-home-demo-updated-preset-check {
        opacity: 1;
        transform: scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-generate-btn {
        width: 100%;
        height: 38px;
        margin: auto 0 0;
        appearance: none;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, #2e4b7d 86%, var(--g1, #60a5fa) 14%);
        color: var(--text-main, #f8fafc);
        font: inherit;
        font-size: 9px;
        font-weight: 850;
        pointer-events: none;
        transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-updated-generate-btn {
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        box-shadow: 0 8px 18px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-updated-progress {
        height: 3px;
        margin-top: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent);
        opacity: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-updated-progress span {
        display: block;
        width: 36%;
        height: 100%;
        border-radius: inherit;
        background: var(--g);
        transform: translateX(-115%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-updated-progress,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-progress {
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-updated-progress span {
        animation: public-tour-home-demo-progress 1050ms ease-in-out infinite;
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-updated-progress span {
        width: 100%;
        transform: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span:first-child {
        min-width: 58px;
        overflow: hidden;
        font-size: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span:first-child::before {
        content: "+ Add More";
        font-size: 6.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span:nth-child(2) {
        min-width: 34px;
        overflow: hidden;
        font-size: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span:nth-child(2)::before {
        content: "Quizzes";
        font-size: 6.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-header > div span:nth-child(3) {
        display: none;
    }

    html:not(.phone-device) .public-tour-home-demo-config-heading {
        margin: 0 3px 6px;
        color: var(--text-sub, #94a3b8);
        font-size: 7px;
        font-weight: 820;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-picker {
        display: grid;
        gap: 5px;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        min-height: 32px;
        padding: 5px 7px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 76%, transparent);
        border-radius: 9px;
        background: color-mix(in srgb, var(--btn-surface-soft, rgba(255, 255, 255, 0.05)) 42%, transparent);
        color: var(--text-main, #e2e8f0);
        font: inherit;
        text-align: left;
        pointer-events: none;
        transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 7px;
        color: var(--g1, #60a5fa);
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-preset-icon svg {
        width: 14px;
        height: 14px;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        gap: 2px;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-content b,
    html:not(.phone-device) .public-tour-home-demo-preset-content small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-content b {
        color: var(--text-main, #f8fafc);
        font-size: 7.5px;
        font-weight: 850;
        line-height: 1.15;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-content small {
        color: var(--text-muted, #94a3b8);
        font-size: 5.8px;
        line-height: 1.2;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-check {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        color: #08111f;
        font-size: 6px;
        font-weight: 950;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-preset-option[data-preset="standard"],
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-preset-option[data-preset="standard"] {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent 87%),
            color-mix(in srgb, var(--g2, #f472b6) 13%, transparent 87%));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 7px 15px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent 90%);
        transform: translateY(-1px);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-preset-option[data-preset="standard"] .public-tour-home-demo-preset-check,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-preset-option[data-preset="standard"] .public-tour-home-demo-preset-check {
        opacity: 1;
        transform: scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-generate-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    html:not(.phone-device) .public-tour-home-demo-generate-actions > span {
        min-width: 0;
        overflow: hidden;
        color: var(--text-sub, #94a3b8);
        font-size: 5.8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-generate-btn {
        flex: 0 0 auto;
        width: 76px;
        height: 27px;
        margin: 0;
        appearance: none;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 48%, rgba(255, 255, 255, 0.12));
        border-radius: 8px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 82%, #1e293b 18%),
            color-mix(in srgb, var(--g2, #f472b6) 72%, var(--g1, #60a5fa) 28%));
        color: white;
        font: inherit;
        font-size: 7px;
        font-weight: 850;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-progress {
        height: 3px;
        margin-top: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent);
        opacity: 0;
        transition: opacity 160ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-preset-progress span {
        display: block;
        width: 36%;
        height: 100%;
        border-radius: inherit;
        background: var(--g);
        transform: translateX(-115%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-preset-progress,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-preset-progress {
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-preset-progress span {
        animation: public-tour-home-demo-progress 1050ms ease-in-out infinite;
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-preset-progress span {
        width: 100%;
        transform: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-steps {
        display: grid;
        gap: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step {
        padding: 9px 11px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 58%, rgba(255, 255, 255, 0.12));
        border-radius: 13px;
        background: transparent;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 14%, transparent);
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step-head {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step-head > span {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.24), rgba(244, 114, 182, 0.24));
        color: #dbeafe;
        font-size: 7px;
        font-weight: 800;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step-head b,
    html:not(.phone-device) .public-tour-home-demo-generator-step-head small {
        display: block;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step-head b {
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 92%, white 8%);
        font-size: 8px;
        font-weight: 780;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-step-head small {
        margin-top: 2px;
        color: var(--text-sub, #94a3b8);
        font-size: 6.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-count-pill {
        padding: 4px 7px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 26%, rgba(255, 255, 255, 0.12));
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 7%, transparent);
        color: color-mix(in srgb, var(--g1, #60a5fa) 70%, white 30%);
        font-size: 6.5px;
        font-style: normal;
        font-weight: 780;
        transition: color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-count-slider {
        position: relative;
        height: 5px;
        margin: 9px 3px 0 32px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-sub, #94a3b8) 22%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-count-slider span {
        display: block;
        width: 22%;
        height: 100%;
        border-radius: inherit;
        background: var(--g);
        transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-count-slider i {
        position: absolute;
        top: 50%;
        left: 22%;
        width: 11px;
        height: 11px;
        border: 2px solid white;
        border-radius: 50%;
        background: var(--g1, #60a5fa);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
        transform: translate(-50%, -50%);
        transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-count-scale {
        display: flex;
        justify-content: space-between;
        margin: 3px 3px 0 32px;
        color: var(--text-sub, #94a3b8);
        font-size: 5.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-difficulties {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 29px;
        margin: 8px 0 0 32px;
        padding: 3px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.15)) 64%, transparent);
        border-radius: 9px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 88%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-difficulties span {
        display: grid;
        place-items: center;
        flex: 1;
        height: 21px;
        border-radius: 6px;
        color: var(--text-sub, #94a3b8);
        font-size: 6.5px;
        font-weight: 750;
        transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-generate-btn {
        display: block;
        width: 48%;
        height: 30px;
        margin: 9px 0 0 auto;
    }

    html:not(.phone-device) .public-tour-home-demo-progress {
        height: 4px;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-sub, #94a3b8) 14%, transparent);
        opacity: 0;
        transition: opacity 160ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-progress span {
        display: block;
        width: 36%;
        height: 100%;
        border-radius: inherit;
        background: var(--g);
        transform: translateX(-115%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-count-ready .public-tour-home-demo-count-pill,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-count-pill {
        color: color-mix(in srgb, var(--g1, #60a5fa) 72%, white 28%);
        transform: scale(1.08);
        box-shadow: 0 0 16px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-count-ready .public-tour-home-demo-count-step,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-count-step {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 34%, var(--btn-theme-border, #334155) 66%);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-count-ready .public-tour-home-demo-count-slider span,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-count-slider span {
        width: 44%;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-count-ready .public-tour-home-demo-count-slider i,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-count-slider i {
        left: 44%;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-difficulty-ready .public-tour-home-demo-difficulties .is-moderate,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-difficulties .is-moderate {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 42%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 28%, transparent));
        color: white;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 35%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-difficulty-ready .public-tour-home-demo-difficulty-step,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-difficulty-step {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 28%, var(--btn-theme-border, #334155) 72%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-progress,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-progress {
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-generating .public-tour-home-demo-progress span {
        animation: public-tour-home-demo-progress 1050ms ease-in-out infinite;
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="generate"].is-complete .public-tour-home-demo-progress span {
        width: 100%;
        transform: none;
    }

    /* The onboarding preview reuses the live quiz-generator markup/classes.
       Only the outer modal shell is adapted to fit the preview viewport. */
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] > .quiz-gen-modal-content {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        --quiz-gen-surface-base: var(--public-home-demo-card-surface) !important;
        --quiz-gen-surface-strong: var(--public-home-demo-surface-soft) !important;
        --quiz-gen-outline: color-mix(in srgb, var(--public-home-demo-border) 78%, var(--g1, #60a5fa) 22%) !important;
        --quiz-gen-outline-strong: color-mix(in srgb, var(--public-home-demo-border) 62%, var(--g1, #60a5fa) 38%) !important;
        background: var(--public-home-demo-modal-background) !important;
        border-color: var(--public-home-demo-border) !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: 0 0 auto;
        padding: 2px 0 12px;
        margin: 0 0 12px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header] > h2 {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        padding-bottom: 7px;
        font-size: clamp(1.08rem, 1.8vw, 1.34rem);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header] > h2::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--g1, #60a5fa) 58%, transparent 42%),
            color-mix(in srgb, var(--g2, #f472b6) 46%, transparent 54%));
        box-shadow: 0 0 6px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent 88%);
        opacity: 0.82;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] > .glass-btn {
        min-width: 0;
        min-height: 32px;
        height: 32px;
        padding: 0 6px;
        border: 0;
        border-radius: var(--btn-radius-pill, 999px);
        background: transparent;
        box-shadow: none;
        color: var(--btn-text-muted, #a8b3c7);
        font-size: 0.7rem !important;
        line-height: 1;
        transform: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] > [data-home-demo-generator-action="close"] {
        width: 28px;
        padding: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] > .glass-btn .gradient-text {
        color: inherit;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: currentColor;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] > .glass-btn:hover,
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-header-actions] > .glass-btn:focus-visible {
        border: 0;
        background: color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent 88%);
        box-shadow: none;
        color: var(--btn-text, #e2e8f0);
        transform: none;
        outline: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-action="close"]:hover,
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-action="close"]:focus-visible {
        background: color-mix(in srgb, var(--g2, #f472b6) 12%, transparent 88%);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] > .quiz-gen-modal-content {
        width: 92% !important;
        max-width: none !important;
        height: 80% !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-landscape {
        height: 100%;
        min-height: 0;
        grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-source-pane,
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-config-pane {
        min-width: 0 !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-config-pane {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100%;
        min-height: 0 !important;
        padding: 4px 0 0 !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-config-pane .quiz-gen-pane-heading {
        margin-bottom: 8px !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pane-title {
        min-width: 0;
        font-size: clamp(0.82rem, 1.15vw, 1rem) !important;
        line-height: 1.1;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-config-pane .quiz-gen-preset-step {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        overflow: visible;
        padding-left: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-config-pane .quiz-gen-options {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-picker {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        height: 100%;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-option {
        min-height: 0;
        padding: 5px 10px;
        gap: 8px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-label {
        min-width: 0;
        overflow: hidden;
        flex: 0 0 auto;
        font-size: 0.68rem;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-detail {
        display: block;
        min-width: 0;
        overflow: hidden;
        flex: 0 0 auto;
        font-size: 0.52rem;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-content {
        align-self: center;
        gap: 1px;
        min-width: 0;
        overflow: hidden;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        gap: 12px;
        margin-top: 8px !important;
        min-height: 40px;
        max-height: 48px;
        padding-top: 8px;
        border-top: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate-wrap] {
        width: min(190px, 100%);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] {
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 42px;
        height: 42px;
        border: 0;
        border-radius: var(--btn-radius-pill, 999px);
        background: color-mix(in srgb, var(--g1, #60a5fa) 22%, var(--public-home-demo-control-surface) 78%) !important;
        color: var(--btn-primary-text, #f8fafc);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent 88%);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] .gradient-text {
        color: var(--btn-primary-text, #f8fafc);
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: currentColor;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions] {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: 4px 0 0 !important;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] {
        min-height: 28px !important;
        height: 28px !important;
        border: 1px solid rgba(7, 12, 25, 0.82) !important;
        background: linear-gradient(108deg, var(--g1, #60a5fa) 0%, var(--g2, #f472b6) 100%) !important;
        color: #ffffff !important;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08),
            0 12px 24px rgba(2, 6, 23, 0.46),
            inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] .gradient-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
        font-size: 1.08rem;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(23, 19, 48, 0.22);
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate-wrap] {
        flex: 0 1 auto;
        width: min(238px, 100%);
        margin-left: auto;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] {
        min-height: 36px;
        height: 36px;
        font-size: 0.82rem;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-source-pane {
        position: relative;
        padding-left: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-item {
        min-height: 0;
        padding: 4px 6px;
        gap: 5px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
        border-radius: 4px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-item .pdf-name {
        min-width: 0;
        font-size: 0.68rem;
        line-height: 1.1;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-existing-badges {
        margin-left: 2px;
        gap: 3px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-existing-badge {
        width: auto;
        min-width: 0;
        height: 14px;
        padding: 0 3px;
        border-radius: 999px;
        font-size: 0.42rem;
        line-height: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-remove-btn {
        width: 18px;
        height: 18px;
        margin-left: 2px;
        padding: 0;
        border-radius: 5px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-remove-btn .remove-btn-icon {
        width: 8px;
        height: 8px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-list {
        padding: 7px 0;
        border: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions] {
        margin-top: auto !important;
        padding-top: 14px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] {
        border-radius: 999px;
        min-height: 48px;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator].is-generating [data-home-demo-generate] {
        background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6)) !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator].is-generating::after {
        content: '';
        position: absolute;
        right: 18px;
        bottom: 8px;
        left: 52%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, var(--g1, #60a5fa), var(--g2, #f472b6));
        opacity: 0.88;
    }

    /* Keep the compact preview action inside its inset modal shell. */
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions] {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: 4px 0 0 !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate] {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.82rem !important;
    }

    /* The live modal enlarges the ready-state action after a preset is
       selected. Keep that behavior compact inside the onboarding preview. */
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator]:has([data-home-demo-preset-picker] .quiz-gen-preset-option.is-selected) [data-home-demo-generator-actions] {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: 4px 0 0 !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator]:has([data-home-demo-preset-picker] .quiz-gen-preset-option.is-selected) [data-home-demo-generate] {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.82rem !important;
    }

    /* The live modal enlarges this action after a preset is chosen. Keep the
       demo geometry compact before and after the Standard click. */
    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions],
    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions]:has([data-home-demo-generate]:not(:disabled)) {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: 4px 0 0 !important;
        transition: none !important;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generate],
    html:not(.phone-device) .public-tour-home-demo-scene.is-standard-selected .public-tour-home-demo-generator-modal[data-home-demo-generator] [data-home-demo-generator-actions] [data-home-demo-generate]:not(:disabled) {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.82rem !important;
        transition: none !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-pdf-list-wrap::before,
    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator].is-generating::after {
        display: none !important;
        content: none !important;
        box-shadow: none !important;
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator] .quiz-gen-preset-option.is-demo-selection-pulse {
        animation: public-tour-home-demo-standard-select 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes public-tour-home-demo-standard-select {
        0% {
            transform: scale(1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(96, 165, 250, 0);
        }
        45% {
            transform: scale(1.012);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 18px rgba(96, 165, 250, 0.28);
        }
        100% {
            transform: scale(1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 9px 20px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent 90%);
        }
    }

    html:not(.phone-device) .public-tour-home-demo-generator-modal[data-home-demo-generator].is-generating [data-home-demo-generate] {
        animation: public-tour-home-demo-generate-pulse 900ms ease-in-out infinite;
        will-change: transform, box-shadow;
    }

    @keyframes public-tour-home-demo-generate-pulse {
        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 8px 20px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent 88%);
        }
        50% {
            transform: scale(1.018);
            box-shadow: 0 10px 26px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent 76%);
        }
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-demo-sweep-out {
        opacity: 0 !important;
        transform: translate3d(-112%, 0, 0) scale(0.96) !important;
        filter: blur(1.5px);
        transition:
            opacity 960ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 960ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 960ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-active.is-demo-sweep-in {
        animation: public-tour-home-demo-sweep-in 960ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes public-tour-home-demo-sweep-in {
        from {
            opacity: 0;
            transform: translate3d(112%, 0, 0) scale(0.96);
            filter: blur(1.5px);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }
    }

    html:not(.phone-device) .public-tour-home-demo-workspace {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-study-workspace {
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        min-width: 0;
        min-height: 0;
        padding: 8px 10px 10px;
        overflow: hidden;
        place-items: stretch;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock {
        position: relative;
        z-index: 6;
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-height: 31px;
        padding: 4px 7px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.15)) 62%, transparent);
        border-radius: 10px;
        background:
            linear-gradient(135deg,
                color-mix(in srgb, var(--public-home-demo-surface-soft) 91%, var(--g1, #60a5fa) 9%),
                color-mix(in srgb, var(--public-home-demo-panel-surface) 94%, var(--g2, #f472b6) 6%));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 7px 18px rgba(2, 6, 23, 0.22);
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > span,
    html:not(.phone-device) .public-tour-home-demo-workspace-dock > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 21px;
        padding: 0 7px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 7px;
        background: color-mix(in srgb, var(--public-home-demo-surface-soft) 88%, transparent);
        color: var(--text-sub, #94a3b8);
        font: inherit;
        font-size: 6.6px;
        font-weight: 850;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > .is-muted {
        opacity: 0.34;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > span i {
        font-size: 10px;
        font-style: normal;
        line-height: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > button {
        cursor: default;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > button svg {
        width: 12px;
        height: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-workspace-dock > .is-demo-control {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 46%, rgba(255, 255, 255, 0.18));
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 30%, var(--public-home-demo-panel-surface) 70%),
            color-mix(in srgb, var(--g2, #f472b6) 22%, var(--public-home-demo-page-surface) 78%));
        box-shadow: 0 0 13px color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent);
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, white 12%);
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-study-stage {
        position: relative;
        display: grid;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        place-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-card {
        --public-home-demo-quiz-surface: transparent;
        --public-home-demo-quiz-border: var(--overhaul-card-border, var(--public-home-demo-border));
        position: relative;
        width: min(92%, 520px);
        padding: clamp(10px, 1.15vw, 15px);
        border: 1px solid var(--public-home-demo-quiz-border);
        border-radius: var(--overhaul-card-radius, 18px);
        background-color: var(--public-home-demo-quiz-surface);
        background-image: none;
        box-shadow:
            0 10px 22px -6px rgba(2, 6, 23, 0.42),
            0 28px 62px -14px rgba(2, 6, 23, 0.56),
            0 70px 128px -26px rgba(2, 6, 23, 0.72),
            0 0 60px -12px color-mix(in srgb, var(--g1, #60a5fa) 11%, transparent),
            0 0 60px -12px color-mix(in srgb, var(--g2, #f472b6) 11%, transparent);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-card::before {
        content: none;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: var(--overhaul-card-trim-shadow, 0 0 0 1px rgba(148, 163, 184, 0.16));
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-visualizer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 17px;
        margin-bottom: 5px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.12);
        border-radius: 7px;
        background:
            radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent), transparent 48%),
            radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--g2, #f472b6) 16%, transparent), transparent 48%),
            color-mix(in srgb, var(--public-home-demo-page-surface) 13%, transparent);
        opacity: 0.72;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-visualizer i {
        display: block;
        width: 2px;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--g1, #60a5fa), var(--g2, #f472b6));
        animation: public-tour-home-demo-quiz-wave 1450ms ease-in-out infinite alternate;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-visualizer i:nth-child(3n + 1) {
        animation-delay: -520ms;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-visualizer i:nth-child(3n + 2) {
        animation-delay: -940ms;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-progress {
        height: 3px;
        margin-bottom: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-progress span {
        display: block;
        width: 4%;
        height: 100%;
        border-radius: inherit;
        background: var(--g);
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta {
        min-width: 0;
        margin-bottom: 8px;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-toolbar {
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        overflow: hidden;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta .public-tour-home-demo-quiz-control,
    html:not(.phone-device) .public-tour-home-demo-quiz-meta .public-tour-home-demo-quiz-jump {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 22px;
        height: 19px;
        padding: 0 5px;
        border: 1px solid var(--public-home-demo-control-border);
        border-radius: 6px;
        background: var(--public-home-demo-control-surface);
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 84%, white 16%);
        font: inherit;
        font-size: 5.7px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta .public-tour-home-demo-quiz-jump {
        min-width: 30px;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta .is-muted,
    html:not(.phone-device) .public-tour-home-demo-quiz-nav span {
        opacity: 0.28;
        filter: grayscale(0.75) saturate(0.5);
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta .is-demo-control {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 48%, var(--public-home-demo-control-border-strong) 52%);
        background: color-mix(in srgb, var(--g1, #60a5fa) 14%, var(--public-home-demo-control-surface));
        box-shadow: 0 0 13px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-meta > i {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 6.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-card h4 {
        display: -webkit-box;
        width: min(100%, 48ch);
        margin: 9px auto 10px;
        overflow: hidden;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 94%, white 6%);
        font-size: clamp(9px, 0.86vw, 12px);
        font-weight: 780;
        line-height: 1.4;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    html:not(.phone-device) .public-tour-home-demo-choices {
        display: grid;
        gap: 6px;
    }

    html:not(.phone-device) .public-tour-home-demo-choice {
        position: relative;
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 6px;
        align-items: center;
        min-height: 29px;
        padding: 6px 22px 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 11px;
        background: var(--public-home-demo-choice-surface);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-choice > span {
        display: grid;
        place-items: center;
        width: 16px;
        height: 18px;
        background: transparent;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 72%, var(--text-sub, #94a3b8) 28%);
        font-size: 7px;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-choice b {
        overflow: hidden;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 80%, var(--text-sub, #94a3b8) 20%);
        font-size: clamp(8px, 0.76vw, 10px);
        font-weight: 620;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 7px;
        margin-top: 9px;
    }

    html:not(.phone-device) .public-tour-home-demo-quiz-nav span {
        display: grid;
        place-items: center;
        min-width: 54px;
        height: 22px;
        padding: 0 8px;
        border: 1px solid var(--public-home-demo-control-border);
        border-radius: 7px;
        background: var(--public-home-demo-control-surface);
        color: color-mix(in srgb, var(--g1, #60a5fa) 55%, var(--g2, #f472b6) 45%);
        font-size: 6px;
        font-weight: 850;
    }

    html:not(.phone-device) .public-tour-home-demo-correct-note {
        margin-top: 7px;
        color: #6ee7b7;
        font-size: 7px;
        font-weight: 800;
        opacity: 0;
        transform: translateY(3px);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-correct .public-tour-home-demo-choice.is-demo-answer {
        border-color: transparent;
        background:
            linear-gradient(135deg,
                color-mix(in srgb, var(--g1, #60a5fa) 46%, transparent),
                color-mix(in srgb, var(--g2, #f472b6) 42%, transparent)) padding-box,
            linear-gradient(color-mix(in srgb, var(--public-home-demo-page-surface) 65%, transparent), color-mix(in srgb, var(--public-home-demo-page-surface) 65%, transparent)) padding-box,
            linear-gradient(135deg,
                color-mix(in srgb, var(--g1, #60a5fa) 50%, transparent),
                color-mix(in srgb, var(--g2, #f472b6) 40%, transparent)) border-box;
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.34),
            0 0 12px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent),
            inset 0 0 10px color-mix(in srgb, var(--g2, #f472b6) 8%, transparent);
        transform: scale(1.006);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-correct .public-tour-home-demo-choice.is-demo-answer > span {
        background: transparent;
        color: white;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-correct .public-tour-home-demo-choice.is-demo-answer::after {
        content: "\2713";
        position: absolute;
        right: 9px;
        top: 50%;
        color: white;
        font-size: 8px;
        font-weight: 900;
        transform: translateY(-50%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-correct .public-tour-home-demo-correct-note {
        opacity: 1;
        transform: translateY(0);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-workspace .public-tour-home-demo-quiz-card {
        width: min(90%, 470px);
        align-self: start;
        justify-self: center;
        min-width: 0;
        margin-top: 8px;
        transform-origin: top center;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
        gap: 0;
        place-items: stretch;
        transition: grid-template-columns 560ms cubic-bezier(0.22, 1, 0.36, 1), gap 560ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-feedback {
        position: absolute;
        top: 34%;
        left: calc(100% - 74px);
        z-index: 7;
        width: min(210px, 38vw);
        max-height: 0;
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 24%, var(--public-home-demo-feedback-border) 76%);
        border-width: 0;
        border-radius: 12px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 93%, #064e3b 7%);
        box-shadow: 0 14px 34px rgba(2, 6, 23, 0.38);
        opacity: 0;
        transform: translate3d(-8px, -50%, 0) scale(0.96);
        transition:
            max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
            padding 300ms ease,
            border-width 0ms linear 80ms,
            opacity 220ms ease,
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-feedback strong {
        font-size: 9px;
    }

    html:not(.phone-device) .public-tour-home-demo-feedback p {
        margin: 4px 0 7px;
        color: var(--text-sub, #94a3b8);
        font-size: 7.5px;
        line-height: 1.35;
    }

    html:not(.phone-device) .public-tour-home-demo-feedback > span {
        display: inline-flex;
        padding: 4px 7px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 34%, rgba(255, 255, 255, 0.12));
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent);
        color: color-mix(in srgb, var(--g1, #60a5fa) 64%, white 36%);
        font-size: 8px;
        font-weight: 850;
        transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-say-more-hover .public-tour-home-demo-feedback > span {
        filter: brightness(1.16) saturate(1.08);
        transform: translateY(-1px) scale(1.06);
        box-shadow: 0 0 16px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-panel {
        position: relative;
        z-index: 4;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 8px;
        overflow: hidden;
        contain: paint;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 24%, var(--public-home-demo-border) 76%);
        border-radius: 13px;
        background: var(--public-home-demo-ask-background);
        box-shadow: -16px 18px 42px color-mix(in srgb, var(--public-home-demo-page-surface) 40%, transparent);
        backdrop-filter: blur(22px) saturate(112%);
        -webkit-backdrop-filter: blur(22px) saturate(112%);
        opacity: 0;
        transform: translateX(18px) scale(0.98);
        transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        flex: 0 0 auto;
        min-width: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-mode,
    html:not(.phone-device) .public-tour-home-demo-ask-window-controls,
    html:not(.phone-device) .public-tour-home-demo-ask-actions {
        display: flex;
        align-items: center;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-mode {
        gap: 4px;
        min-width: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-mode b {
        color: transparent;
        background-image: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 9.5px;
        font-weight: 900;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-mode em {
        padding: 2px 4px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 24%, rgba(148, 163, 184, 0.2));
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        color: color-mix(in srgb, var(--g1, #60a5fa) 62%, white 38%);
        font-size: 5.2px;
        font-style: normal;
        font-weight: 850;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-mode > span {
        color: var(--text-sub, #94a3b8);
        font-size: 6px;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-window-controls {
        justify-content: flex-end;
        gap: 1px;
        min-width: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-window-controls span {
        display: grid;
        place-items: center;
        min-width: 14px;
        height: 14px;
        padding: 0 2px;
        border-radius: 999px;
        color: var(--text-sub, #94a3b8);
        font-size: 5px;
        font-weight: 800;
        opacity: 0.28;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-response {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding: 2px 0;
        border-radius: 7px;
        background: transparent;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-chat {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-message {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        max-width: 90%;
        overflow-wrap: anywhere;
        font-size: 6.6px;
        line-height: 1.38;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-message p {
        margin: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-message.is-user {
        align-self: flex-end;
        padding: 6px 7px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 38%, rgba(203, 213, 225, 0.24) 62%);
        border-radius: 7px;
        background: transparent;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, white 12%);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-message small {
        color: var(--text-sub, #94a3b8);
        font-size: 5.8px;
        font-weight: 800;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-message.is-assistant {
        align-self: flex-start;
        width: auto;
        max-width: 84%;
        margin-left: 4px;
        padding: 6px 7px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 22%, rgba(255, 255, 255, 0.08));
        border-radius: 8px;
        background: color-mix(in srgb, var(--public-home-demo-surface-soft) 76%, transparent);
        box-shadow: 0 7px 18px rgba(2, 6, 23, 0.18);
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 84%, var(--text-sub, #94a3b8) 16%);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-answer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(-4px);
        filter: blur(2px);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-answer strong {
        display: block;
        margin-bottom: 3px;
        color: color-mix(in srgb, var(--ai-bold, #bfdbfe) 88%, white 12%);
        font-size: 8px;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-answer p {
        margin: 0;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 78%, var(--text-sub, #94a3b8) 22%);
        font-size: 6.5px;
        line-height: 1.36;
        overflow-wrap: anywhere;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-source {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        color: var(--text-sub, #94a3b8);
        font-size: 6.2px;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-source b {
        color: color-mix(in srgb, var(--g1, #60a5fa) 68%, white 32%);
        font-size: 6.5px;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-composer {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 0 0 auto;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-input {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 29px;
        padding: 6px 7px;
        border: 1px solid var(--public-home-demo-ask-border);
        border-radius: 7px;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--public-home-demo-card-surface) 72%, transparent 28%),
            color-mix(in srgb, var(--public-home-demo-card-surface) 58%, transparent 42%));
        color: var(--text-sub, #94a3b8);
        font-size: 6.8px;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-actions {
        justify-content: flex-end;
        gap: 4px;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-actions > div {
        display: inline-flex;
        height: 19px;
        margin-right: auto;
        padding: 1px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 24%, var(--public-home-demo-ask-border) 76%);
        border-radius: 6px;
        background: color-mix(in srgb, var(--public-home-demo-panel-surface) 72%, rgba(255, 255, 255, 0.08) 28%);
    }

    html:not(.phone-device) .public-tour-home-demo-ask-actions > div span {
        display: grid;
        place-items: center;
        min-width: 36px;
        padding: 0 4px;
        border-radius: 5px;
        color: var(--text-sub, #94a3b8);
        font-size: 5px;
        font-weight: 850;
        opacity: 0.32;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-actions > div .is-active {
        background: linear-gradient(165deg,
            color-mix(in srgb, var(--g1, #60a5fa) 30%, var(--public-home-demo-panel-surface) 70%),
            color-mix(in srgb, var(--g2, #f472b6) 24%, var(--public-home-demo-page-surface) 76%));
        color: white;
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-ask-actions > i,
    html:not(.phone-device) .public-tour-home-demo-ask-actions > b {
        display: grid;
        place-items: center;
        min-width: 26px;
        height: 19px;
        padding: 0 5px;
        border: 1px solid var(--public-home-demo-control-border);
        border-radius: 6px;
        background: var(--public-home-demo-control-surface);
        color: var(--text-sub, #94a3b8);
        font-size: 5px;
        font-style: normal;
        font-weight: 850;
        opacity: 0.28;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-feedback-open .public-tour-home-demo-feedback {
        max-height: 124px;
        padding: 10px;
        border-width: 1px;
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-feedback,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-feedback {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        opacity: 0;
        transform: translate3d(6px, -50%, 0) scale(0.97);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-panel,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-ask-panel {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-workspace,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-ask-workspace {
        grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
        gap: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-workspace .public-tour-home-demo-quiz-card,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-ask-workspace .public-tour-home-demo-quiz-card {
        width: 100%;
        transform: scale(0.94);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-panel {
        height: 76%;
        align-self: center;
        box-shadow: -16px 18px 42px rgba(2, 6, 23, 0.4), 0 0 34px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        animation: public-tour-home-demo-ask-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-message.is-user {
        animation: public-tour-home-demo-chat-message-in 190ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms both;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-ask-answer {
        animation: public-tour-home-demo-answer-reveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 190ms both;
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-ask-answer {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
        filter: none;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-workspace {
        grid-template-columns: minmax(0, 1fr) 0fr;
        gap: 0;
        place-items: stretch;
        transition: grid-template-columns 580ms cubic-bezier(0.22, 1, 0.36, 1), gap 580ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-workspace .public-tour-home-demo-quiz-card {
        width: min(90%, 470px);
        align-self: center;
        justify-self: center;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-pane {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.14)) 62%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--public-home-demo-panel-surface) 92%, rgba(255, 255, 255, 0.04));
        opacity: 0;
        transform: translateX(12px);
        transition: opacity 260ms ease 220ms, transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar {
        height: 27px;
        padding: 0 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page {
        position: relative;
        width: 76%;
        height: calc(100% - 43px);
        margin: 8px auto;
        padding: 13px 11px;
        overflow: hidden;
        border-radius: 3px;
        background: color-mix(in srgb, #f8fafc 94%, var(--g1, #60a5fa) 6%);
        box-shadow: 0 8px 22px rgba(2, 6, 23, 0.28);
        color: #1e293b;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > strong {
        display: block;
        margin-bottom: 12px;
        font-size: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > span {
        display: block;
        width: 90%;
        height: 4px;
        margin-bottom: 7px;
        border-radius: 999px;
        background: #cbd5e1;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > span:nth-of-type(2) {
        width: 68%;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > span:nth-of-type(3) {
        width: 84%;
        margin-top: 14px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > span:nth-of-type(4) {
        width: 76%;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > span:nth-of-type(5) {
        width: 54%;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split .public-tour-home-demo-pdf-workspace,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split .public-tour-home-demo-pdf-pane,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-pane {
        opacity: 1;
        transform: translateX(0);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split .public-tour-home-demo-pdf-workspace .public-tour-home-demo-quiz-card,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-quiz-card {
        width: 100%;
        transform: scale(0.94);
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar {
        justify-content: flex-start;
        gap: 7px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-toolbar b {
        min-width: 0;
        margin-right: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-close {
        display: grid;
        place-items: center;
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 50%;
        background: color-mix(in srgb, var(--public-home-demo-surface-soft) 78%, transparent);
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 78%, var(--text-sub, #94a3b8) 22%) !important;
        font-size: 10px !important;
        line-height: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page {
        display: grid;
        place-items: center;
        padding: 13px 11px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-page > strong {
        margin: 0;
        font-size: clamp(11px, 1.04vw, 14px);
        font-weight: 780;
        letter-spacing: 0.01em;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-selection-text {
        position: relative;
        z-index: 0;
        display: inline-block;
        padding: 1px 2px;
        isolation: isolate;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-selection-text::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -2px -3px;
        border: 1px solid rgba(37, 99, 235, 0.72);
        border-radius: 2px;
        background: rgba(96, 165, 250, 0.38);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1040ms linear;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-selecting .public-tour-home-demo-pdf-selection-text::after,
    html:not(.phone-device) .public-tour-home-demo-scene.is-selection-complete .public-tour-home-demo-pdf-selection-text::after,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-selection-text::after,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-selection-text::after {
        transform: scaleX(1);
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-card {
        position: absolute;
        right: auto;
        top: 58%;
        bottom: auto;
        left: 50%;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        width: min(72%, 184px);
        padding: 7px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 32%, rgba(255, 255, 255, 0.12));
        border-radius: 9px;
        background: color-mix(in srgb, var(--public-home-demo-card-surface) 96%, var(--public-home-demo-page-surface) 4%);
        box-shadow: 0 14px 30px color-mix(in srgb, var(--public-home-demo-page-surface) 44%, transparent), 0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        opacity: 0;
        transform: translate(-50%, 7px) scale(0.96);
        transform-origin: top center;
        transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-head {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-head b {
        color: transparent;
        background: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 8px;
        font-weight: 900;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-head span {
        color: var(--text-sub, #94a3b8);
        font-size: 5.5px;
        font-weight: 760;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-input {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 24px;
        padding: 5px 6px;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 74%, rgba(255, 255, 255, 0.1));
        border-radius: 6px;
        background: color-mix(in srgb, var(--public-home-demo-surface-soft) 72%, transparent);
        color: var(--text-main, #e2e8f0);
        font-size: 6.4px;
        line-height: 1.25;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-input i {
        color: var(--text-sub, #94a3b8);
        font-style: normal;
        opacity: 0.68;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-send {
        justify-self: end;
        min-width: 36px;
        min-height: 21px;
        padding: 3px 8px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 48%, rgba(255, 255, 255, 0.12));
        border-radius: 6px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 18%, var(--public-home-demo-surface-soft));
        color: color-mix(in srgb, var(--g1, #60a5fa) 58%, white 42%);
        font: inherit;
        font-size: 6px;
        font-weight: 850;
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-thinking,
    html:not(.phone-device) .public-tour-home-demo-pdf-ask-response {
        grid-column: 1 / -1;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-thinking {
        display: none;
        align-items: center;
        gap: 5px;
        color: var(--text-sub, #94a3b8);
        font-size: 5.8px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-thinking i {
        width: 6px;
        height: 6px;
        border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 64%, transparent);
        border-top-color: transparent;
        border-radius: 50%;
        animation: public-tour-home-demo-spin 700ms linear infinite;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-response {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(4px);
        transition: max-height 420ms ease, opacity 280ms ease, transform 340ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-response strong {
        display: block;
        margin-bottom: 2px;
        color: color-mix(in srgb, var(--ai-bold, #bfdbfe) 88%, white 12%);
        font-size: 6.8px;
    }

    html:not(.phone-device) .public-tour-home-demo-pdf-ask-response p {
        margin: 0;
        color: color-mix(in srgb, var(--text-main, #e2e8f0) 80%, var(--text-sub, #94a3b8) 20%);
        font-size: 5.7px;
        line-height: 1.35;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-open .public-tour-home-demo-pdf-ask-card,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-ask-card,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-ask-card {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-sending .public-tour-home-demo-pdf-ask-send {
        transform: scale(0.96);
        box-shadow: 0 0 14px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-sending .public-tour-home-demo-pdf-ask-thinking {
        display: flex;
        animation: public-tour-home-demo-response-text-in 240ms ease both;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-input,
    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-send,
    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-thinking,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-ask-input,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-ask-send,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-ask-thinking,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-ask-input,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-ask-send,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-ask-thinking {
        display: none;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-response,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-pdf-ask-response,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="quiz"].is-complete .public-tour-home-demo-pdf-ask-response {
        max-height: 112px;
        opacity: 1;
        transform: translateY(0);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-response strong {
        animation: public-tour-home-demo-response-text-in 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-ask-answered .public-tour-home-demo-pdf-ask-response p {
        animation: public-tour-home-demo-response-text-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
    }

    html:not(.phone-device) .public-tour-home-demo-continuity-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        place-items: stretch;
        transition: grid-template-columns 620ms cubic-bezier(0.22, 1, 0.36, 1), gap 620ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        grid-column: 1;
        grid-row: 1;
        width: min(92%, 520px);
        align-self: center;
        justify-self: center;
        margin-top: 0;
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(0.82);
    }

    html:not(.phone-device) .public-tour-home-demo-continuity-workspace .public-tour-home-demo-pdf-pane {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        min-height: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-continuity-workspace .public-tour-home-demo-ask-panel {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        min-height: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split .public-tour-home-demo-continuity-workspace,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-continuity-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card,
    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        width: 100%;
        transform: scale(0.82);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-source-open .public-tour-home-demo-continuity-workspace .public-tour-home-demo-pdf-pane {
        opacity: 1;
        transform: translateX(0);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closing .public-tour-home-demo-continuity-workspace,
    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closed .public-tour-home-demo-continuity-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
        gap: 0;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closing .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card,
    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closed .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        width: min(92%, 520px);
        transform: scale(0.82);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-review-ready .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card,
    html:not(.phone-device) .public-tour-home-demo-scene.is-feedback-open:not(.is-ask-open) .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        transform: translateX(-8%) scale(0.82);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closing .public-tour-home-demo-continuity-workspace .public-tour-home-demo-pdf-pane,
    html:not(.phone-device) .public-tour-home-demo-scene.is-pdf-closed .public-tour-home-demo-continuity-workspace .public-tour-home-demo-pdf-pane,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-continuity-workspace .public-tour-home-demo-pdf-pane {
        opacity: 0;
        transform: translateX(14px) scaleX(0.92);
        transform-origin: right center;
        transition-delay: 0ms;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-wrong .public-tour-home-demo-choice.is-demo-wrong-answer,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-choice.is-demo-wrong-answer {
        border-color: color-mix(in srgb, var(--g2, #f472b6) 54%, rgba(255, 255, 255, 0.1));
        background: color-mix(in srgb, var(--g2, #f472b6) 16%, var(--public-home-demo-choice-surface) 84%);
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.32), 0 0 15px color-mix(in srgb, var(--g2, #f472b6) 14%, transparent);
        transform: scale(1.006);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-choice-hover .public-tour-home-demo-choice.is-demo-wrong-answer {
        border-color: color-mix(in srgb, var(--g2, #f472b6) 34%, rgba(255, 255, 255, 0.12));
        filter: brightness(1.08);
        transform: translateY(-1px) scale(1.008);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-answer-wrong .public-tour-home-demo-choice.is-demo-wrong-answer::after,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-choice.is-demo-wrong-answer::after {
        content: "\00d7";
        position: absolute;
        top: 50%;
        right: 9px;
        color: color-mix(in srgb, var(--g2, #f472b6) 64%, white 36%);
        font-size: 11px;
        font-weight: 900;
        transform: translateY(-50%);
    }

    html:not(.phone-device) .public-tour-home-demo-wrong-feedback {
        border-color: color-mix(in srgb, var(--g2, #f472b6) 36%, var(--btn-theme-border, rgba(255, 255, 255, 0.16)));
        background:
            radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--g2, #f472b6) 14%, transparent), transparent 44%),
            color-mix(in srgb, var(--public-home-demo-panel-surface) 94%, var(--g2, #f472b6) 6%);
        box-shadow: 0 14px 34px rgba(2, 6, 23, 0.42), 0 0 18px color-mix(in srgb, var(--g2, #f472b6) 12%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-wrong-feedback > span {
        border-color: color-mix(in srgb, var(--g2, #f472b6) 46%, rgba(255, 255, 255, 0.12));
        background: color-mix(in srgb, var(--g2, #f472b6) 18%, transparent);
        color: color-mix(in srgb, var(--g2, #f472b6) 22%, white 78%);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-continuity-workspace,
    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-continuity-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        transition: grid-template-columns 900ms cubic-bezier(0.22, 1, 0.36, 1), gap 900ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-split:not(.is-pdf-closed):not(.is-ask-open) [data-home-demo-quiz-control="source"],
    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open [data-home-demo-quiz-control="ask"] {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 48%, rgba(255, 255, 255, 0.12));
        background: color-mix(in srgb, var(--g1, #60a5fa) 14%, var(--public-home-demo-surface-soft) 86%);
        box-shadow: 0 0 13px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
        opacity: 1;
        filter: none;
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        height: 76%;
        align-self: center;
        margin-top: 0;
        overflow: hidden;
        box-sizing: border-box;
        transform: translateX(-4%) scale(1);
        transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html:not(.phone-device) .public-tour-home-demo-scene.is-ask-open .public-tour-home-demo-continuity-workspace .public-tour-home-demo-ask-panel {
        animation-duration: 720ms;
    }

    html:not(.phone-device) .public-tour-home-demo-scene[data-home-demo-scene="say-more"].is-complete .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        width: 100%;
        transform: scale(0.82);
    }

    html:not(.phone-device) .public-tour-home-hero-demo[data-home-demo-scene="quiz"] .public-tour-home-demo-scene.is-split .public-tour-home-demo-continuity-workspace .public-tour-home-demo-quiz-card {
        width: 100%;
        height: 100%;
        align-self: stretch;
        transform: none;
    }

    html:not(.phone-device) .public-tour-home-demo-cursor {
        --public-home-demo-cursor-x: 20px;
        --public-home-demo-cursor-y: 20px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12;
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0;
        transform: translate3d(var(--public-home-demo-cursor-x), var(--public-home-demo-cursor-y), 0) translate(-7px, -7px);
        transition: opacity 150ms ease;
        will-change: transform;
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-cursor.is-visible {
        opacity: 1;
    }

    html:not(.phone-device) .public-tour-home-demo-cursor.is-open-scene-punch {
        opacity: 0;
        filter: blur(2px);
        transform:
            translate3d(var(--public-home-demo-cursor-x), var(--public-home-demo-cursor-y), 0)
            translate(-7px, -7px)
            scale(4.8);
        transform-origin: 7px 7px;
        transition:
            transform 220ms cubic-bezier(0.4, 0, 1, 1),
            opacity 180ms ease,
            filter 180ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-cursor::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 7px;
        width: 26px;
        height: 26px;
        border: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 72%, white 28%);
        border-radius: 50%;
        box-shadow: 0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 48%, transparent);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
        pointer-events: none;
    }

    html:not(.phone-device) .public-tour-home-demo-cursor.is-clicking::before {
        animation: public-tour-home-demo-click-ring 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    html:not(.phone-device) .public-tour-home-demo-mouse {
        position: relative;
        display: block;
        width: 17px;
        height: 24px;
        border: 1.5px solid color-mix(in srgb, var(--text-main, #f8fafc) 86%, white 14%);
        border-radius: 9px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 92%, rgba(255, 255, 255, 0.08));
        box-shadow: 0 5px 16px rgba(2, 6, 23, 0.46), 0 0 0 2px rgba(2, 6, 23, 0.16);
        transition: transform 110ms ease, background 110ms ease;
    }

    html:not(.phone-device) .public-tour-home-demo-mouse::before {
        content: "";
        position: absolute;
        top: -1px;
        bottom: 8px;
        left: 50%;
        width: 1px;
        background: color-mix(in srgb, var(--text-main, #f8fafc) 52%, transparent);
    }

    html:not(.phone-device) .public-tour-home-demo-mouse > span {
        position: absolute;
        top: 4px;
        left: 50%;
        width: 2px;
        height: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--g1, #60a5fa) 76%, white 24%);
        transform: translateX(-50%);
    }

    html:not(.phone-device) .public-tour-home-demo-cursor.is-pressing .public-tour-home-demo-mouse {
        background: color-mix(in srgb, var(--g1, #60a5fa) 24%, var(--card-bg, #0f172a));
        transform: scale(0.88);
    }

    html:not(.phone-device) .public-tour-home-demo-cursor-label {
        max-width: 88px;
        padding: 4px 6px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.15)) 68%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--card-bg, #0f172a) 92%, rgba(255, 255, 255, 0.08));
        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.34);
        color: color-mix(in srgb, var(--text-main, #f8fafc) 88%, white 12%);
        font-size: 6.5px;
        font-weight: 850;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-cursor {
        display: none;
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-frame,
    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-scene,
    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-scene *,
    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-step-intro,
    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-step-intro * {
        animation: none !important;
        transition-duration: 160ms !important;
        transition-property: opacity !important;
    }

    html:not(.phone-device) .public-tour-home-hero-demo.is-motion-reduced .public-tour-home-demo-type-letter {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

@media (min-width: 981px) and (max-width: 1040px) {
    html:not(.phone-device) .public-tour-home-demo-panel {
        transform: scale(0.78);
    }
}

@media (min-width: 1041px) and (max-width: 1120px) {
    html:not(.phone-device) .public-tour-home-demo-panel {
        transform: scale(0.92);
    }
}

@keyframes public-tour-home-title-in {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(6px);
    }

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

@keyframes public-tour-home-hero-in {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(0.98);
    }

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

@keyframes public-tour-home-demo-progress {
    from { transform: translateX(-115%); }
    to { transform: translateX(320%); }
}

@keyframes public-tour-home-demo-letter-in {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes public-tour-home-demo-title-sweep-in {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: blur(4px);
        transform: translateX(-7px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes public-tour-home-demo-click-ring {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.22);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
    }
}

@keyframes public-tour-home-demo-more-title-in {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes public-tour-home-demo-more-item-in {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes public-tour-home-demo-more-closing-in {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-7px);
    }
    to {
        opacity: 0.88;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes public-tour-home-demo-response-text-in {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes public-tour-home-demo-spin {
    to { transform: rotate(360deg); }
}

@keyframes public-tour-home-demo-quiz-wave {
    from {
        opacity: 0.45;
        transform: scaleY(0.24);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes public-tour-home-demo-ask-enter {
    from {
        opacity: 0;
        transform: translate(18px, 28px) scale(0.965);
        filter: blur(10px) saturate(0.78) brightness(0.78);
    }
    62% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0) saturate(1) brightness(1);
    }
}

@keyframes public-tour-home-demo-chat-message-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes public-tour-home-demo-answer-reveal {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 8px);
        transform: translateY(-5px);
        filter: blur(3px);
    }
    38% {
        opacity: 0.92;
        filter: blur(1.2px);
    }
    72% {
        clip-path: inset(0 0 8% 0 round 8px);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 8px);
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes public-tour-home-demo-shimmer {
    0%, 100% {
        opacity: 0.42;
        transform: scaleX(0.96);
        transform-origin: left;
    }

    50% {
        opacity: 0.88;
        transform: scaleX(1);
        transform-origin: left;
    }
}

.public-tour-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, #60a5fa 14%, rgba(255, 255, 255, 0.02));
    color: color-mix(in srgb, #bfdbfe 72%, white 28%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-tour-progress-meta {
    margin-top: 12px;
    color: var(--text-sub, #94a3b8);
    font-size: 0.8rem;
    font-weight: 700;
}

.public-tour-progress-track {
    width: 100%;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 34%, rgba(255, 255, 255, 0.08) 66%);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--btn-surface-soft) 92%, rgba(255, 255, 255, 0.04) 8%) 0%,
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.9)) 92%, rgba(255, 255, 255, 0.02) 8%) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.public-tour-progress-fill {
    height: 100%;
    border-radius: inherit;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--g1, #60a5fa) 82%, white 18%) 0%,
            color-mix(in srgb, var(--g1, #60a5fa) 48%, var(--g2, #f472b6) 52%) 55%,
            color-mix(in srgb, var(--g2, #f472b6) 82%, white 18%) 100%);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent),
        0 0 28px color-mix(in srgb, var(--g2, #f472b6) 18%, transparent);
}

.public-tour-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 72%);
    opacity: 0.75;
    pointer-events: none;
}

.public-tour-title {
    margin: 14px 0 8px;
    color: var(--text-main, #f8fafc);
    font-size: 1.2rem;
    line-height: 1.2;
}

.public-tour-body {
    margin: 0;
    color: var(--text-sub, #cbd5e1);
    font-size: 0.94rem;
    line-height: 1.65;
}

.public-tour-note {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #34d399 24%, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, #34d399 9%, rgba(255, 255, 255, 0.02));
    color: color-mix(in srgb, #d1fae5 74%, white 26%);
    font-size: 0.84rem;
    line-height: 1.55;
}

.public-tour-option-group {
    margin-top: 14px;
}

.public-tour-option-label {
    color: var(--text-main, #e2e8f0);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.public-tour-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.public-tour-choice-btn {
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius-pill);
    background: var(--btn-surface);
    color: var(--btn-text-muted);
    min-height: 44px;
    padding: 0 15px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--btn-shadow-soft);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.public-tour-choice-btn:hover,
.public-tour-choice-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--btn-border-strong);
    background: var(--btn-surface-hover);
    color: var(--btn-text);
    box-shadow: var(--btn-shadow-hover);
}

.public-tour-choice-btn.is-selected {
    border-color: var(--btn-theme-border);
    background: var(--btn-theme-surface);
    color: var(--btn-text);
    box-shadow: var(--btn-theme-shadow);
}

.public-tour-home-actions,
.public-tour-step-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.public-tour-home-actions>*,
.public-tour-step-actions>* {
    flex: 1 1 150px;
}

.public-tour-step-actions .gradient-text {
    display: inline-block;
}

#public-tour-card .public-tour-step-actions button:disabled {
    opacity: 0.38;
    filter: grayscale(0.85) saturate(0.45);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

#public-tour-card .public-tour-step-actions button:disabled .gradient-text {
    background: none;
    color: var(--text-sub, #94a3b8);
    -webkit-text-fill-color: currentColor;
}

#public-tour-card .public-tour-replay-btn {
    width: 100%;
    min-height: 40px;
    margin-top: 13px;
}

#public-tour-card .public-tour-replay-btn[hidden] {
    display: none !important;
}

.public-tour-pdf-demo-cursor {
    --public-tour-cursor-x: 0px;
    --public-tour-cursor-y: 0px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-notification-top, 2147483000) + 20);
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: 0;
    transform: translate3d(var(--public-tour-cursor-x), var(--public-tour-cursor-y), 0) translate(-13px, -8px);
    transition: opacity 0.18s ease;
    pointer-events: none;
    will-change: transform;
}

.public-tour-pdf-demo-cursor.is-visible {
    opacity: 1;
}

.public-tour-pdf-demo-mouse {
    position: relative;
    display: block;
    width: 27px;
    height: 41px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card-bg, #0f172a) 86%, black 14%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent),
        0 10px 28px rgba(2, 6, 23, 0.55);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.public-tour-pdf-demo-mouse::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 18px;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.42);
}

.public-tour-pdf-demo-mouse::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.public-tour-pdf-demo-mouse > span {
    position: absolute;
    inset: 2px 50% 18px 2px;
    border-radius: 10px 0 3px 3px;
    background: color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.public-tour-pdf-demo-cursor.is-pressing .public-tour-pdf-demo-mouse {
    transform: scale(0.91);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--g2, #f472b6) 30%, transparent),
        0 8px 22px rgba(2, 6, 23, 0.5);
}

.public-tour-pdf-demo-cursor.is-pressing .public-tour-pdf-demo-mouse > span {
    background: color-mix(in srgb, var(--g2, #f472b6) 72%, white 28%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--g2, #f472b6) 65%, transparent);
}

.public-tour-pdf-demo-label {
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 42%, rgba(255, 255, 255, 0.18));
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg, #0f172a) 88%, black 12%);
    color: var(--text-main, #f8fafc);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.42);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.public-tour-pdf-demo-cursor.is-complete .public-tour-pdf-demo-label {
    border-color: color-mix(in srgb, #34d399 48%, rgba(255, 255, 255, 0.16));
    color: color-mix(in srgb, #d1fae5 76%, white 24%);
}

body.public-tour-pdf-demo .pdf-tutor-focus-ask-card [data-open-memora-ai-settings]:disabled {
    opacity: 0.32;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.public-tour-close-link {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: fit-content;
    padding: 0 14px;
    border-radius: var(--btn-radius-pill);
    border: 1px solid var(--btn-border);
    background: var(--btn-surface-soft);
    color: var(--btn-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--btn-shadow-soft);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.public-tour-close-link .gradient-text {
    display: inline-block;
}

.public-tour-close-link:hover,
.public-tour-close-link:focus-visible {
    color: var(--btn-text);
    border-color: var(--btn-border-strong);
    background: var(--btn-surface-hover);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-1px);
    outline: none;
}

#public-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 16000;
    background: rgba(2, 6, 23, 0.42);
    backdrop-filter: blur(8px) saturate(94%);
    -webkit-backdrop-filter: blur(8px) saturate(94%);
    cursor: not-allowed;
    opacity: 1;
    transition: opacity 240ms ease, backdrop-filter 240ms ease, background 240ms ease;
    will-change: opacity, backdrop-filter;
}

body.public-tour-active #public-tour-overlay {
    animation: public-tour-overlay-fade-in 260ms ease-out;
}

body.public-tour-active.modal-backdrop-active #ask-ai-modal.public-tour-say-more-ask-active {
    z-index: var(--z-ask-memora-modal, 2147483450) !important;
    opacity: 1 !important;
    filter: none !important;
}

body.public-tour-active #ask-ai-modal.public-tour-say-more-ask-active .ask-ai-modal-content {
    opacity: 1 !important;
    filter: none !important;
}

body.public-tour-step-transitioning #public-tour-overlay {
    opacity: 0.82;
    backdrop-filter: blur(5px) saturate(90%);
    -webkit-backdrop-filter: blur(5px) saturate(90%);
}

@keyframes public-tour-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#public-tour-overlay::before,
#public-tour-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

#public-tour-overlay::before {
    background:
        radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--g2, #f472b6) 14%, transparent) 0%, transparent 32%);
    opacity: 0.78;
}

#public-tour-overlay::after {
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.18) 38%, rgba(2, 6, 23, 0.28) 100%);
}

body.public-tour-home-onboarding #public-tour-overlay {
    display: none !important;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

body.public-tour-home-onboarding #public-tour-overlay::before {
    content: none;
}

body.public-tour-home-onboarding #public-tour-overlay::after {
    content: none;
}

.public-tour-layer-active {
    position: relative;
    z-index: 16018 !important;
    isolation: isolate;
}

.public-tour-stack-root {
    position: relative;
    z-index: 16018 !important;
    isolation: isolate;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.public-tour-clear-effects {
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.public-tour-target-active {
    position: relative;
    z-index: 16020 !important;
    isolation: isolate;
    border-radius: 18px;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 36%, transparent),
        0 0 0 8px color-mix(in srgb, #60a5fa 16%, transparent),
        0 0 28px color-mix(in srgb, #60a5fa 26%, transparent),
        0 20px 60px rgba(2, 6, 23, 0.42) !important;
    animation: public-tour-target-pulse 1.5s ease-in-out infinite;
}

/* Every guide step uses the same soft handoff on desktop, tablet, and phone. */
.public-tour-target-active,
.public-tour-target-entering,
.public-tour-target-leaving {
    transition:
        opacity 220ms ease,
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms ease,
        background-color 220ms ease !important;
}

.public-tour-target-entering,
.public-tour-target-active.public-tour-target-leaving {
    opacity: 0.58 !important;
    animation: none !important;
    box-shadow:
        0 0 0 2px transparent,
        0 0 0 8px transparent,
        0 0 0 transparent,
        0 0 0 transparent !important;
}

/* Rendered steps own their entrance animation. Prevent the base .active
   drop-in from restarting when the step-enter class is removed. */
#public-tour-card.active[data-public-tour-step-id]:not(.public-tour-card-home-onboarding) {
    animation: none;
}

body.public-tour-active #public-tour-card.public-tour-step-exit-next:not(.public-tour-card-home-onboarding) {
    pointer-events: none;
    animation: public-tour-step-fade-out-next 180ms ease-in both;
}

body.public-tour-active #public-tour-card.public-tour-step-exit-prev:not(.public-tour-card-home-onboarding) {
    pointer-events: none;
    animation: public-tour-step-fade-out-prev 180ms ease-in both;
}

body.public-tour-active #public-tour-card.public-tour-step-enter-next:not(.public-tour-card-home-onboarding) {
    animation: public-tour-step-fade-in-next 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.public-tour-active #public-tour-card.public-tour-step-enter-prev:not(.public-tour-card-home-onboarding) {
    animation: public-tour-step-fade-in-prev 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Phone efficiency: keep the static highlight ring, drop the infinite pulse. */
html.phone-device .public-tour-target-active {
    animation: none;
}

/* MOBILE-SCOPE: START phone-only — softly hand highlighted controls off between guide steps */
html.phone-device .public-tour-target-active,
html.phone-device .public-tour-target-entering,
html.phone-device .public-tour-target-leaving {
    transition: opacity 220ms ease,
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 200ms ease,
        background-color 200ms ease !important;
}

html.phone-device .public-tour-target-entering,
html.phone-device .public-tour-target-active.public-tour-target-leaving {
    box-shadow:
        0 0 0 2px transparent,
        0 0 0 8px transparent,
        0 0 0 transparent,
        0 0 0 transparent !important;
}
/* MOBILE-SCOPE: END phone-only */

/* MOBILE-SCOPE: START phone-only — allow guide targets to receive scroll gestures */
body.phone-device.public-tour-active #public-tour-overlay {
    pointer-events: none;
}

body.phone-device.public-tour-active .public-tour-layer-active,
body.phone-device.public-tour-active .public-tour-stack-root,
body.phone-device.public-tour-active .public-tour-clear-effects,
body.phone-device.public-tour-active .public-tour-target-active {
    pointer-events: auto !important;
    cursor: default !important;
}
/* MOBILE-SCOPE: END phone-only */

#import-modal .api-route.public-tour-target-active,
#import-modal .api-benefit-panel.public-tour-target-active,
#import-modal .import-drop-zone.public-tour-target-active {
    border-radius: 22px;
}

.api-key-link-btn.api-key-link-pulse.public-tour-target-active::after {
    display: none;
}

body.public-tour-active .public-tour-layer-active,
body.public-tour-active .public-tour-stack-root,
body.public-tour-active .public-tour-clear-effects,
body.public-tour-active .public-tour-target-active {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.public-tour-target-active.glass-btn,
.public-tour-target-active.theme-outline-btn,
.public-tour-target-active.welcome-btn {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 56%, rgba(255, 255, 255, 0.44)) !important;
    background: color-mix(in srgb, var(--btn-theme-surface-strong, rgba(37, 99, 235, 0.18)) 84%, rgba(255, 255, 255, 0.1) 16%) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 40%, transparent),
        0 0 0 9px color-mix(in srgb, #60a5fa 18%, transparent),
        0 0 34px color-mix(in srgb, #60a5fa 30%, transparent),
        0 20px 60px rgba(2, 6, 23, 0.44) !important;
}

#header-import-btn.public-tour-target-active {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, rgba(255, 255, 255, 0.42)) !important;
    background: linear-gradient(165deg,
            color-mix(in srgb, #0a1220 64%, var(--g1, #60a5fa) 36%) 0%,
            color-mix(in srgb, #10192a 62%, var(--g2, #f472b6) 38%) 100%) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 44%, transparent),
        0 0 0 10px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent),
        0 0 42px color-mix(in srgb, var(--g1, #60a5fa) 34%, transparent),
        0 20px 64px rgba(2, 6, 23, 0.5) !important;
    transform: translateY(-1px) scale(1.02);
}

#header-import-btn.public-tour-target-active .gradient-text,
#header-import-btn.public-tour-target-active #header-import-text,
#header-import-btn.public-tour-target-active #header-import-icon {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: none !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 30%, transparent);
}

#quiz-gen-generate-btn.public-tour-target-active {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, rgba(255, 255, 255, 0.42)) !important;
    background: linear-gradient(165deg,
            color-mix(in srgb, #0a1220 60%, var(--g1, #60a5fa) 40%) 0%,
            color-mix(in srgb, #11182a 58%, var(--g2, #f472b6) 42%) 100%) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 44%, transparent),
        0 0 0 10px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent),
        0 0 42px color-mix(in srgb, var(--g1, #60a5fa) 34%, transparent),
        0 20px 64px rgba(2, 6, 23, 0.5) !important;
    transform: translateY(-1px) scale(1.02);
}

#quiz-gen-generate-btn.public-tour-target-active .gradient-text {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: none !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 30%, transparent);
}

#quiz-card.public-tour-target-active {
    background: color-mix(in srgb, var(--quiz-card-bg, var(--card-bg, rgba(15, 23, 42, 0.78))) 92%, rgba(255, 255, 255, 0.06)) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 42%, transparent),
        0 0 0 10px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
        0 0 40px color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent),
        0 24px 72px rgba(2, 6, 23, 0.56) !important;
}

.quiz-top-controls-row.public-tour-target-active {
    border-radius: 18px;
    background: color-mix(in srgb, rgba(10, 16, 30, 0.88) 82%, var(--g1, #60a5fa) 18%) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f8fafc 38%, transparent),
        0 0 0 8px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent),
        0 0 28px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent),
        0 18px 48px rgba(2, 6, 23, 0.42) !important;
}

#controls-bar.public-tour-layer-active,
#quiz-pane.public-tour-layer-active,
#pdf-pane.public-tour-layer-active,
#ai-pane.public-tour-layer-active,
#welcome-screen.public-tour-layer-active,
#flashcard-container.public-tour-layer-active,
#public-account-pill.public-tour-layer-active {
    filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@keyframes public-tour-target-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, #f8fafc 34%, transparent),
            0 0 0 8px color-mix(in srgb, #60a5fa 14%, transparent),
            0 0 24px color-mix(in srgb, #60a5fa 20%, transparent),
            0 20px 50px rgba(2, 6, 23, 0.38);
    }

    50% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, #f8fafc 44%, transparent),
            0 0 0 10px color-mix(in srgb, #34d399 18%, transparent),
            0 0 36px color-mix(in srgb, #60a5fa 32%, transparent),
            0 24px 64px rgba(2, 6, 23, 0.48);
    }
}

@media (max-width: 640px) {
    .public-auth-card {
        width: min(560px, calc(100vw - 20px));
        border-radius: 18px;
        padding: 18px 16px 14px;
    }

    .public-auth-brand-wrap {
        align-items: flex-start;
        gap: 0.46rem;
        flex-direction: column;
        margin-bottom: 0.45rem;
    }

    .public-auth-copy {
        font-size: 0.9rem;
    }

    .public-auth-actions {
        justify-content: stretch;
    }

    #public-retry-auth {
        width: 100%;
    }

    #public-tour-widget {
        top: var(--welcome-tour-edge, 12px);
        right: calc(var(--welcome-tour-edge, 12px) + var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 8px));
        bottom: auto;
        left: auto;
        align-items: flex-end;
    }

    body.welcome-mode {
        --welcome-tour-edge: 12px;
        --welcome-tour-gap: 8px;
    }

    #public-tour-launcher,
    #public-ask-launcher {
        justify-content: center;
    }

    #public-tour-card {
        width: min(390px, calc(100vw - (var(--welcome-tour-edge, 12px) * 2)));
        right: calc(-1 * (var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 8px)));
        border-radius: 20px;
        transform-origin: top right;
    }

    #public-tour-card.public-tour-card-placement-left {
        right: calc(-1 * (var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 8px)));
        transform-origin: top right;
    }

    #public-tour-card.public-tour-card-placement-below {
        top: calc(100% + 10px);
        right: calc(-1 * (var(--welcome-donate-toggle-width, 0px) + var(--welcome-tour-gap, 8px)));
        transform-origin: top right;
    }

}

@media (max-height: 500px) {
    body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) {
        max-height: min(60dvh, 320px);
    }

    /* The home card's portrait cap is too short once the full story and its
       Get me started action are visible in landscape. Keep that action inside
       the reachable card instead of allowing it to spill below the viewport. */
    body.phone-device #public-tour-card.public-tour-card-home-onboarding {
        max-height: min(86dvh, 336px);
        overflow: auto;
        scrollbar-width: none;
    }

    body.phone-device #public-tour-card.public-tour-card-home-onboarding::-webkit-scrollbar {
        display: none;
    }
}

/* A measurement fallback for any viewport where a placement would push the
   active guide outside the visible screen. */
#public-tour-card.public-tour-card-clamped {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(60dvh, 460px);
    overflow: auto;
    transform-origin: center bottom;
}

/* MOBILE-SCOPE: START phone-only — compact, collision-aware walkthrough card */
body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding),
body.phone-device.public-tour-active #public-tour-card.public-tour-card-clamped:not(.public-tour-card-home-onboarding) {
    position: fixed;
    top: auto;
    left: auto;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 20px));
    max-height: 30dvh;
    padding: 10px 12px;
    border: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 40%, color-mix(in srgb, var(--g2, #f472b6) 28%, rgba(255, 255, 255, 0.46)) 60%);
    border-radius: 22px;
    background:
        radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent) 0%, transparent 40%),
        linear-gradient(160deg, rgba(18, 29, 48, 0.985) 0%, rgba(9, 16, 29, 0.99) 58%, rgba(15, 9, 25, 0.985) 100%);
    box-shadow:
        0 22px 58px rgba(2, 6, 23, 0.68),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 30px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    clip-path: inset(0 round 22px);
    contain: paint;
    overflow-x: hidden;
    overflow-y: auto;
    transform-origin: right bottom;
}

body.phone-device.public-tour-active #public-tour-card.public-tour-step-exit-next:not(.public-tour-card-home-onboarding) {
    pointer-events: none;
    animation: public-tour-step-fade-out-next 180ms ease-in both;
}

body.phone-device.public-tour-active #public-tour-card.public-tour-step-exit-prev:not(.public-tour-card-home-onboarding) {
    pointer-events: none;
    animation: public-tour-step-fade-out-prev 180ms ease-in both;
}

body.phone-device.public-tour-active #public-tour-card.public-tour-step-enter-next:not(.public-tour-card-home-onboarding) {
    animation: public-tour-step-fade-in-next 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.phone-device.public-tour-active #public-tour-card.public-tour-step-enter-prev:not(.public-tour-card-home-onboarding) {
    animation: public-tour-step-fade-in-prev 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes public-tour-step-fade-out-next {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(-8px) scale(0.985); filter: blur(3px); }
}

@keyframes public-tour-step-fade-out-prev {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(8px) scale(0.985); filter: blur(3px); }
}

@keyframes public-tour-step-fade-in-next {
    from { opacity: 0; transform: translateX(8px) scale(0.985); filter: blur(3px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes public-tour-step-fade-in-prev {
    from { opacity: 0; transform: translateX(-8px) scale(0.985); filter: blur(3px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

body.phone-device.public-tour-active #public-tour-card.active.public-tour-card-anchor-top:not(.public-tour-card-home-onboarding),
body.phone-device.public-tour-active #public-tour-card.public-tour-card-clamped.public-tour-card-anchor-top:not(.public-tour-card-home-onboarding) {
    top: max(10px, env(safe-area-inset-top));
    bottom: auto;
    transform-origin: right top;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-kicker {
    display: none;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-progress-meta {
    margin: 0 0 3px;
    font-size: 0.65rem;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-progress-track {
    height: 4px;
    margin-bottom: 4px;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-title {
    margin: 4px 0;
    font-size: 0.9rem;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-note {
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.3;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-step-actions {
    gap: 7px;
    margin-top: 7px;
    flex-wrap: nowrap;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-step-actions > * {
    flex: 1 1 0;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.75rem;
}

body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding) .public-tour-close-link {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 28px;
    margin-top: 5px;
    padding: 2px 9px;
    font-size: 0.7rem;
    box-shadow: none;
}

/* MOBILE-SCOPE: START phone-only — step 6 needs 15% more room and opens at the top */
body.phone-device.public-tour-active #public-tour-card.active[data-public-tour-step-id="generator"] {
    max-height: 34.5dvh;
    transform-origin: right top;
}
/* MOBILE-SCOPE: END phone-only */

/* MOBILE-SCOPE: START phone-only — keep the Tools callout clear of its dropdown */
body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] {
    padding: 7px 10px;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-progress-track {
    display: none;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-title {
    margin: 2px 0;
    font-size: 0.82rem;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-body {
    font-size: 0.7rem;
    line-height: 1.25;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-step-actions {
    margin-top: 4px;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-step-actions > * {
    min-height: 28px;
}

body.phone-device.public-tour-active #public-tour-card[data-public-tour-step-id="tools"] .public-tour-close-link {
    min-height: 24px;
    margin-top: 3px;
}
/* MOBILE-SCOPE: END phone-only */

@media (max-height: 500px) {
    body.phone-device.public-tour-active #public-tour-card.active:not(.public-tour-card-home-onboarding),
    body.phone-device.public-tour-active #public-tour-card.public-tour-card-clamped:not(.public-tour-card-home-onboarding) {
        max-height: min(55dvh, 214px);
    }

    body.phone-device.public-tour-active #public-tour-card.active[data-public-tour-step-id="generator"] {
        max-height: min(63.25dvh, 246px);
    }
}
/* MOBILE-SCOPE: END phone-only */

@keyframes public-tour-card-attention {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    70% { transform: translateY(3px); }
}

#public-tour-card.public-tour-card-attention {
    animation: public-tour-card-attention 480ms ease both;
}

@media (prefers-reduced-motion: reduce) {
    #public-auth-overlay.active,
    .public-auth-card,
    .public-auth-orb,
    .public-auth-scanline,
    .public-auth-brand-main,
    .public-auth-status.active,
    body.public-tour-active #public-tour-overlay,
    #public-tour-launcher,
    .public-tour-target-active,
    .public-tour-home-shell,
    #public-tour-card.public-tour-card-home-onboarding.active,
    #public-tour-card.public-tour-card-home-onboarding.public-tour-home-leaving,
    #public-tour-card.public-tour-step-exit-next,
    #public-tour-card.public-tour-step-exit-prev,
    #public-tour-card.public-tour-step-enter-next,
    #public-tour-card.public-tour-step-enter-prev,
    body.public-tour-home-revealing #welcome-screen .welcome-brand-stage,
    body.public-tour-home-revealing #welcome-screen .welcome-actions,
    .public-tour-home-footer.is-visible .public-tour-home-footer-copy,
    .public-tour-home-footer .public-tour-home-actions.is-visible,
    #public-home-tip-surface {
        animation: none !important;
    }

    .public-tour-story-line,
    .public-tour-story-char,
    #public-tour-overlay,
    .public-tour-target-active,
    .public-tour-target-entering,
    .public-tour-target-leaving,
    #public-tour-card.public-tour-card-home-onboarding .public-tour-home-footer,
    .public-tour-home-footer .public-tour-home-actions {
        transition: none !important;
    }
}

/* ==========================================================================
   Editorial First-Run Choice Landing
   ========================================================================== */

/* Sync the full-viewport choice canvas with the active app theme. The landing
   layout stays editorial, but its palette follows the same tokens as the app. */
html:not(.phone-device) body.public-tour-home-choice {
    --landing-page-bg: var(--bg, #0b1220);
    --landing-bg-center: var(--card-bg, var(--bg, #0b1220));
    --landing-bg-edge: var(--bg, #0b1220);
    --landing-accent: var(--g1, #60a5fa);
    --landing-accent-2: var(--g2, #f472b6);
    --landing-heading: var(--text-q, var(--text-main, #f8fafc));
    --landing-subheading: var(--text-main, #e2e8f0);
    --landing-surface: var(--choice-bg, var(--card-bg, rgba(15, 23, 42, 0.6)));
    --landing-surface-hover: var(--card-bg, rgba(15, 23, 42, 0.86));
    --landing-border: var(--bd, rgba(148, 163, 184, 0.28));
    --landing-primary-bg: var(--overhaul-btn-active-bg, var(--btn-theme-surface));
    --landing-primary-border: var(--overhaul-btn-hover-border, var(--btn-theme-border));
    --landing-primary-shadow: var(--overhaul-btn-hover-shadow, var(--btn-theme-shadow));
    --landing-secondary-bg: var(--overhaul-btn-bg, var(--btn-surface));
    --landing-secondary-border: var(--overhaul-btn-border, var(--btn-border));
    --landing-secondary-text: var(--overhaul-control-color, var(--btn-text));
    --landing-secondary-shadow: var(--overhaul-btn-shadow, var(--btn-shadow-soft));
    --landing-button-hover-bg: var(--overhaul-btn-hover-bg, var(--btn-surface-hover));
    --landing-button-hover-border: var(--overhaul-btn-hover-border, var(--btn-border-strong));
    --landing-button-hover-shadow: var(--overhaul-btn-hover-shadow, var(--btn-shadow-hover));

    background-color: var(--landing-page-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 55% at 50% 16%, color-mix(in srgb, var(--landing-accent) 40%, transparent) 0%, color-mix(in srgb, var(--landing-accent-2) 15%, transparent) 40%, rgba(30, 30, 30, 0) 75%),
        radial-gradient(ellipse 85% 65% at 50% 50%, var(--landing-bg-center) 0%, var(--landing-bg-edge) 100%) !important;
    background-attachment: fixed !important;
    color: var(--landing-heading) !important;
}

html:not(.phone-device) body.public-tour-home-choice::before,
html:not(.phone-device) body.public-tour-home-choice::after {
    content: none !important;
    display: none !important;
}

/* Hide all background overlays and welcome screen so choice screen has exclusive focus */
html:not(.phone-device) body.public-tour-home-choice #welcome-screen,
html:not(.phone-device) body.public-tour-home-choice #welcome-neural-canvas,
html:not(.phone-device) body.public-tour-home-choice #theme-canvas-wrapper,
html:not(.phone-device) body.public-tour-home-choice #theme-canvas,
html:not(.phone-device) body.public-tour-home-choice #app-ambient-glow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html:not(.phone-device) #public-tour-card.public-tour-card-home-choice {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
    z-index: 12010;
}

html:not(.phone-device) #public-tour-card.public-tour-card-home-choice.active {
    opacity: 1;
}

.editorial-choice-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.ambient-glow-ring {
    position: absolute;
    width: min(880px, 92vw);
    height: min(560px, 64vh);
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--landing-accent, #d97757) 32%, transparent) 0%, color-mix(in srgb, var(--landing-accent-2, #e7a74f) 12%, transparent) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    filter: blur(60px);
    z-index: 1;
}

.hero-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1050px;
    padding: 0 24px;
    z-index: 5;
    pointer-events: auto;
    perspective: 1400px;
    perspective-origin: center center;
}

.brand-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(80px, 9.5vw, 138px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--landing-heading, #f6f4ed);
    text-shadow: 0 8px 38px rgba(0, 0, 0, 0.45);
    margin-bottom: 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    transform-style: preserve-3d;
}

/* The nested hero letters supply the only visible word. Reset the shared
   gradient-text treatment on the wrapper so it cannot paint a second, static
   copy behind the animated letters. */
.editorial-choice-shell .brand-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--landing-heading, #f6f4ed) !important;
}

.brand-hero-word {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    overflow: visible;
    transform-style: preserve-3d;
}

/* 3D Initial Hero "M" - Graceful subtle scale & soft dimensional settle */
.brand-hero-m {
    display: inline-block;
    transform-origin: 50% 55%;
    animation: brand-hero-m-dock 950ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, filter, opacity;
    color: var(--landing-heading, #f6f4ed);
}

@keyframes brand-hero-m-dock {
    0% {
        opacity: 0;
        transform: perspective(1200px) translate3d(0, -6px, 40px) scale(1.35);
        filter:
            blur(6px)
            drop-shadow(0 8px 24px color-mix(in srgb, var(--landing-accent, #d97757) 45%, transparent))
            drop-shadow(0 0 32px color-mix(in srgb, var(--landing-accent-2, #e7a74f) 30%, transparent));
    }
    40% {
        opacity: 1;
        filter:
            blur(0)
            drop-shadow(0 4px 18px color-mix(in srgb, var(--landing-accent, #d97757) 50%, transparent))
            drop-shadow(0 0 24px color-mix(in srgb, var(--landing-accent-2, #e7a74f) 30%, transparent));
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 0, 0) scale(1);
        filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--landing-accent, #d97757) 40%, transparent));
    }
}

/* Remaining letters "emora" slide & reveal as M lands */
.brand-hero-rest {
    display: inline-flex;
    align-items: baseline;
    opacity: 0;
    transform: translateX(10px);
    animation: brand-hero-rest-reveal 500ms cubic-bezier(0.16, 1, 0.3, 1) 650ms forwards;
    color: var(--landing-heading, #f6f4ed);
    will-change: transform, opacity, filter;
}

@keyframes brand-hero-rest-reveal {
    0% {
        opacity: 0;
        transform: translateX(10px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.letter-o-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inner-dot {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(10px, 1.2vw, 18px);
    height: clamp(10px, 1.2vw, 18px);
    background: var(--landing-accent, #d97757);
    border-radius: 50%;
    box-shadow: 0 0 18px color-mix(in srgb, var(--landing-accent, #d97757) 90%, transparent), 0 0 8px color-mix(in srgb, var(--landing-accent, #d97757) 95%, transparent);
    pointer-events: none;
    animation: inner-dot-pulse 3s ease-in-out infinite alternate;
}

@keyframes inner-dot-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; box-shadow: 0 0 24px var(--landing-accent, #d97757), 0 0 12px var(--landing-accent-2, #e7a74f); }
}

.subheading {
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 400;
    color: var(--landing-subheading, #e5e3db);
    letter-spacing: -0.01em;
    margin-top: -8px;
    margin-bottom: 18px;
    line-height: 1.4;
    opacity: 0;
    animation: editorial-subheading-in 500ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards;
}

@keyframes editorial-subheading-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 0.94;
        transform: translateY(0);
    }
}

.btn-group {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: editorial-btn-group-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 920ms forwards;
    flex-wrap: wrap;
}

@keyframes editorial-btn-group-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shared uniform geometry for both buttons */
#public-tour-card.public-tour-card-home-choice .btn-primary,
#public-tour-card.public-tour-card-home-choice .btn-secondary,
.editorial-choice-shell .btn-primary,
.editorial-choice-shell .btn-secondary {
    appearance: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    min-width: 210px !important;
    height: 56px !important;
    padding: 0 34px !important;
    border-radius: 9999px !important;
    font-size: 17px !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

/* Primary button: use the active theme's emphasized button treatment. */
#public-tour-card.public-tour-card-home-choice .btn-primary,
.editorial-choice-shell .btn-primary {
    background: var(--landing-primary-bg) !important;
    color: var(--overhaul-control-color, var(--btn-primary-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--overhaul-control-color, var(--btn-primary-text, #ffffff)) !important;
    border: 1.5px solid var(--landing-primary-border) !important;
    box-shadow: var(--landing-primary-shadow) !important;
}

#public-tour-card.public-tour-card-home-choice .btn-primary:hover,
.editorial-choice-shell .btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    background: var(--landing-button-hover-bg) !important;
    border-color: var(--landing-button-hover-border) !important;
    box-shadow: var(--landing-button-hover-shadow) !important;
    filter: brightness(1.05);
}

#public-tour-card.public-tour-card-home-choice .btn-primary:active,
.editorial-choice-shell .btn-primary:active {
    transform: translateY(0) scale(0.98);
}

#public-tour-card.public-tour-card-home-choice .btn-primary.drag-over,
.editorial-choice-shell .btn-primary.drag-over {
    transform: scale(1.05);
    box-shadow: 0 0 54px color-mix(in srgb, var(--landing-accent, #d97757) 95%, transparent), 0 0 0 3px rgba(255, 255, 255, 0.6) !important;
}

/* Secondary button: use the active theme's standard button surface. */
#public-tour-card.public-tour-card-home-choice .btn-secondary,
.editorial-choice-shell .btn-secondary {
    background: var(--landing-secondary-bg) !important;
    color: var(--landing-secondary-text) !important;
    -webkit-text-fill-color: var(--landing-secondary-text) !important;
    border: 1.5px solid var(--landing-secondary-border) !important;
    box-shadow: var(--landing-secondary-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#public-tour-card.public-tour-card-home-choice .btn-secondary:hover,
.editorial-choice-shell .btn-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    background: var(--landing-button-hover-bg) !important;
    border-color: var(--landing-button-hover-border) !important;
    box-shadow: var(--landing-button-hover-shadow) !important;
}

#public-tour-card.public-tour-card-home-choice .btn-secondary:active,
.editorial-choice-shell .btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    #public-tour-card.public-tour-card-home-choice.active,
    .brand-hero-m,
    .brand-hero-rest,
    .subheading,
    .btn-group,
    .inner-dot {
        animation: none !important;
    }
}

/* Keep demo overlays above the active generator scene after shared preview rules cascade. */
html:not(.phone-device) .public-tour-home-demo-cursor {
    z-index: 101;
}

html:not(.phone-device) .public-tour-home-demo-step-intro {
    z-index: 102;
}