/* Custom Animations */
        .fade-in { animation: fadeIn 0.5s ease-in forwards; }
        .slide-in { animation: slideIn 0.5s ease-out forwards; }
        .zoom-in { animation: zoomIn 0.5s ease-out forwards; }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes zoomIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .view-section { display: none; }
        .view-section.active { display: block; }

        .scale-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 9999px;
            background: linear-gradient(to right, #334155, #007AE2);
            outline: none;
            cursor: pointer;
        }
        .scale-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #FF5C28;
            border: 3px solid #fff;
            box-shadow: 0 0 20px rgba(255, 92, 40, 0.45);
            cursor: grab;
            transition: transform 0.15s ease;
        }
        .scale-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }
        .scale-slider::-moz-range-thumb {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #FF5C28;
            border: 3px solid #fff;
            box-shadow: 0 0 20px rgba(255, 92, 40, 0.45);
            cursor: grab;
        }
        .scale-slider::-moz-range-track {
            height: 8px;
            border-radius: 9999px;
            background: #334155;
        }

        .maturity-ring {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        .maturity-ring-progress {
            transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .maturity-spectrum-fill {
            transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes countUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .maturity-count {
            animation: countUp 0.6s ease-out both;
        }

        .wedge-segment {
            transition: opacity 0.35s ease, filter 0.35s ease;
            cursor: default;
        }
        .wedge-segment.is-past {
            opacity: 0.45;
        }
        .wedge-segment.is-current {
            filter: drop-shadow(0 0 10px rgba(255, 92, 40, 0.55));
        }
        .wedge-segment.is-ahead {
            opacity: 0.28;
        }
        .target-pillar {
            animation: optionIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .product-tile {
            transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }
        .product-tile:hover {
            transform: translateY(-2px);
        }

        .quiz-option {
            animation: optionIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
            position: relative;
            overflow: hidden;
        }
        .quiz-option::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,122,226,0.12), transparent 55%);
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }
        .quiz-option:hover::before,
        .quiz-option:focus-visible::before {
            opacity: 1;
        }
        .quiz-option.selected {
            border-color: rgba(0, 122, 226, 0.8) !important;
            background: rgba(0, 122, 226, 0.18) !important;
            transform: scale(1.04);
            box-shadow: 0 0 0 2px rgba(0,122,226,0.45), 0 18px 40px rgba(0,122,226,0.28);
            animation: optionBurst 0.55s ease-out;
        }
        .quiz-option.selected .quiz-letter {
            background: #007AE2;
            color: white;
        }
        .quiz-option.dimmed {
            opacity: 0.28;
            transform: scale(0.96);
            filter: grayscale(0.4);
        }
        @keyframes optionIn {
            from { opacity: 0; transform: translateY(36px) scale(0.92); filter: blur(8px); }
            to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes optionBurst {
            0% { box-shadow: 0 0 0 0 rgba(0,122,226,0.7), 0 18px 40px rgba(0,122,226,0.18); }
            60% { box-shadow: 0 0 0 18px rgba(0,122,226,0), 0 22px 50px rgba(255,92,40,0.35); }
            100% { box-shadow: 0 0 0 2px rgba(0,122,226,0.45), 0 18px 40px rgba(0,122,226,0.28); }
        }
        @keyframes questionSwap {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .question-swap {
            animation: questionSwap 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        #view-quiz .max-w-4xl {
            perspective: 1400px;
        }
        .quiz-card-enter {
            animation: quizCardEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes quizCardExit {
            to { opacity: 0; transform: translateX(-7%) scale(0.94) rotateY(8deg); filter: blur(10px); }
        }
        @keyframes quizCardEnter {
            from { opacity: 0; transform: translateX(8%) scale(0.94) rotateY(-8deg); filter: blur(10px); }
            60% { filter: blur(0); }
            to { opacity: 1; transform: none; filter: none; }
        }
        .quiz-progress-flash {
            animation: progressFlash 0.7s ease-out;
        }
        @keyframes progressFlash {
            0% { filter: brightness(1); box-shadow: 0 0 0 rgba(255,92,40,0); }
            40% { filter: brightness(1.6); box-shadow: 0 0 22px rgba(0,122,226,0.7); }
            100% { filter: brightness(1); box-shadow: 0 0 12px rgba(255,92,40,0.45); }
        }
        .quiz-step.pop {
            animation: stepPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes stepPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.35); }
            100% { transform: scale(1.08); }
        }
        #fx-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 80;
            overflow: hidden;
        }
        .fx-flash {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, rgba(0,122,226,0.28), rgba(255,92,40,0.12) 45%, transparent 70%);
            animation: fxFlash 0.55s ease-out forwards;
        }
        @keyframes fxFlash {
            0% { opacity: 0; }
            30% { opacity: 1; }
            100% { opacity: 0; }
        }
        .fx-sweep {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 28vw;
            left: -30vw;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), rgba(0,122,226,0.35), transparent);
            animation: fxSweep 0.7s ease-out forwards;
        }
        @keyframes fxSweep {
            to { left: 110vw; }
        }
        .fx-spark {
            position: fixed;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -4px;
            border-radius: 50%;
            background: #FF5C28;
            box-shadow: 0 0 12px #FF5C28, 0 0 2px #fff;
            animation: fxSpark 0.65s ease-out forwards;
        }
        .fx-spark:nth-child(odd) {
            background: #007AE2;
            box-shadow: 0 0 12px #007AE2, 0 0 2px #fff;
        }
        @keyframes fxSpark {
            0% { opacity: 1; transform: translate(0,0) scale(1); }
            100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
        }
        body.is-calculating main {
            padding: 0;
        }
        #view-calculating.active {
            min-height: calc(100vh - 4rem);
        }
        .calc-stage {
            position: relative;
            min-height: calc(100vh - 4rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 4vh 4vw;
        }
        .calc-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(0,122,226,0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,122,226,0.08) 1px, transparent 1px);
            background-size: 48px 48px;
            animation: calcGrid 8s linear infinite;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
        }
        @keyframes calcGrid {
            to { background-position: 48px 48px; }
        }
        .calc-scan {
            position: absolute;
            left: 10%;
            right: 10%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #007AE2, #FF5C28, #007AE2, transparent);
            box-shadow: 0 0 24px rgba(0,122,226,0.8);
            animation: calcScan 2.2s ease-in-out infinite;
        }
        @keyframes calcScan {
            0% { top: 12%; opacity: 0; }
            15% { opacity: 1; }
            85% { opacity: 1; }
            100% { top: 82%; opacity: 0; }
        }
        .calc-orbs {
            position: relative;
            width: min(42vh, 280px);
            height: min(42vh, 280px);
            margin-bottom: 2rem;
        }
        .calc-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3px solid transparent;
        }
        .calc-ring-1 {
            border-top-color: #FF5C28;
            border-right-color: rgba(255,92,40,0.25);
            animation: calcSpin 1.4s linear infinite;
        }
        .calc-ring-2 {
            inset: 14%;
            border-bottom-color: #007AE2;
            border-left-color: rgba(0,122,226,0.3);
            animation: calcSpinReverse 2s linear infinite;
        }
        .calc-ring-3 {
            inset: 28%;
            border-top-color: #34d399;
            border-left-color: rgba(52,211,153,0.25);
            animation: calcSpin 1.1s linear infinite;
        }
        @keyframes calcSpin {
            to { transform: rotate(360deg); }
        }
        @keyframes calcSpinReverse {
            to { transform: rotate(-360deg); }
        }
        .calc-core {
            position: absolute;
            inset: 36%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,122,226,0.35), rgba(15,23,42,0.9) 70%);
            box-shadow: 0 0 40px rgba(255,92,40,0.35), inset 0 0 20px rgba(0,122,226,0.4);
            animation: calcPulse 1.4s ease-in-out infinite;
        }
        .calc-core img {
            height: 42%;
            width: auto;
        }
        @keyframes calcPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(255,92,40,0.3), inset 0 0 16px rgba(0,122,226,0.3); }
            50% { transform: scale(1.08); box-shadow: 0 0 48px rgba(0,122,226,0.55), inset 0 0 22px rgba(255,92,40,0.35); }
        }
        .calc-title {
            font-size: clamp(1.6rem, 3vw, 2.6rem);
            animation: calcTitleIn 0.6s ease-out both;
        }
        @keyframes calcTitleIn {
            from { opacity: 0; transform: translateY(12px); letter-spacing: 0.2em; }
            to { opacity: 1; transform: none; letter-spacing: normal; }
        }
        .calc-status {
            min-height: 1.75rem;
            animation: calcStatusPulse 0.9s ease-in-out infinite;
        }
        @keyframes calcStatusPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        .calc-bar {
            width: min(28rem, 70vw);
            height: 8px;
            margin-top: 1.5rem;
            border-radius: 9999px;
            background: #1e293b;
            border: 1px solid #334155;
            overflow: hidden;
        }
        .calc-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, #FF5C28, #007AE2, #34d399);
            background-size: 200% 100%;
            animation: calcBarShine 1.2s linear infinite;
            transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 0 16px rgba(0,122,226,0.6);
        }
        @keyframes calcBarShine {
            to { background-position: 200% 0; }
        }
        .calc-percent {
            margin-top: 0.75rem;
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: 0.08em;
        }
        .quiz-step {
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
        }
        .quiz-step.active {
            transform: scale(1.08);
            box-shadow: 0 0 16px rgba(255, 92, 40, 0.45);
        }
        .maturity-dots span {
            transition: background-color 0.2s ease, transform 0.2s ease;
        }
        .quiz-option:hover .maturity-dots span.active,
        .quiz-option:focus-visible .maturity-dots span.active {
            transform: scale(1.15);
        }
        .slider-pulse {
            animation: sliderPulse 0.35s ease;
        }
        @keyframes sliderPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        .splash-cta {
            animation: splashGlow 2.2s ease-in-out infinite;
        }
        @keyframes splashGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 40, 0.45); }
            50% { box-shadow: 0 0 48px 8px rgba(255, 92, 40, 0.4); }
        }
        .yeti-float {
            animation: yetiFloat 3s ease-in-out infinite;
        }
        @keyframes yetiFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-14px); }
        }
        body.is-splash nav#app-nav {
            display: none;
        }
        body.is-splash main {
            padding: 0;
        }
        #view-splash.active {
            min-height: 100vh;
        }
        .splash-stage {
            min-height: 100vh;
            padding: 4vh 6vw;
        }
        .splash-logo {
            height: clamp(4.5rem, 8vh, 7.5rem);
        }
        .splash-badge {
            font-size: clamp(1.35rem, 2.4vw, 2.75rem);
            padding: 0.85rem 2rem;
            gap: 0.85rem;
        }
        .splash-badge i {
            width: 1.15em;
            height: 1.15em;
        }
        .splash-headline {
            font-size: clamp(3.25rem, 6.6vw, 8.75rem);
            line-height: 1.05;
            max-width: 92vw;
            margin-left: auto;
            margin-right: auto;
        }
        .splash-sub {
            font-size: clamp(1.35rem, 2.3vw, 2.6rem);
            max-width: min(90vw, 28em);
        }
        .splash-cta {
            font-size: clamp(1.75rem, 2.8vw, 3.25rem);
            padding: 1.15rem 3.5rem;
            min-width: min(28rem, 80vw);
        }
        .splash-cta i {
            width: 1.1em;
            height: 1.1em;
        }
        #participant-name:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 122, 226, 0.35);
            border-color: #007AE2;
        }
        body.is-results {
            overflow: hidden;
        }
        body.is-results main {
            padding: 0;
        }
        #view-results.active {
            height: calc(100vh - 4rem);
            overflow: hidden;
        }
        .results-stage {
            height: 100%;
            max-width: 96rem;
            margin: 0 auto;
            padding: 1.25vh 2vw 1.5vh;
            display: flex;
            flex-direction: column;
            gap: 1.25vh;
        }
        .results-heading {
            font-size: clamp(1.35rem, 2.4vw, 2.1rem);
        }
        .results-grid {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
            gap: 1.25vw;
        }
        .results-card {
            min-height: 0;
            overflow: hidden;
        }
        .results-ring {
            width: clamp(7.5rem, 16vh, 11rem);
            height: clamp(7.5rem, 16vh, 11rem);
        }
        .results-pitch {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        @media (max-width: 900px) {
            .results-grid {
                grid-template-columns: 1fr;
            }
        }
.quiz-card-exit { animation: quizCardExit 0.38s ease-in forwards; }
body.mode-play #app-nav { display: none; }
body.mode-play main { padding-bottom: 2rem; }
body.mode-play #view-results.active,
body.mode-play .results-stage {
    height: auto;
    overflow: visible;
}
body.mode-play.is-results { overflow: auto; }
body.mode-play .results-grid { grid-template-columns: 1fr; }
.idle-countdown { letter-spacing: 0.12em; }
.result-image-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(2, 6, 23, 0.88);
}
.result-image-sheet[hidden] { display: none; }
.result-image-panel {
    width: min(26rem, 100%);
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 1.5rem;
    padding: 1.25rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.result-image-hint {
    color: #cbd5e1;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 0.85rem;
}
.result-image-preview {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 1rem;
    background: #020617;
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
}