/* Quiz-scoped styles: an illustrated fleet counter, route progress, and
       postcard-like answer cards. Everything remains usable without motion. */
    .quiz-ocean-world {
        position: relative; isolation: isolate; overflow: hidden;
        background: linear-gradient(165deg, #2b6380 0%, #27405c 48%, #328b9a 100%);
    }
    .quiz-ocean-world > #cs-sea {
        position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
        pointer-events: none;
    }
    .quiz-ocean-world .map_holder, .quiz-ocean-world .quiz-experience { position: relative; z-index: 1; }
    .quiz-ocean-world .map_holder { overflow: visible !important; }
    .quiz-ocean-world .map_holder > div:first-child { background: transparent !important; }
    .quiz-ocean-world .map_holder > div:first-child > div { display: none !important; }
    .quiz-ocean-world .map_holder::after { display: none !important; }
    .quiz-experience {
        position: relative; overflow: hidden; padding: 22px 16px 88px;
        background: transparent;
    }
    .quiz-taking-experience { margin-top: -70px; }
    .quiz-experience::before, .quiz-experience::after {
        content: ''; position: absolute; border: 1px dashed rgba(255, 255, 255, .16);
        border-radius: 50%; pointer-events: none;
    }
    .quiz-experience::before { width: 320px; height: 180px; left: -170px; top: 330px; transform: rotate(16deg); }
    .quiz-experience::after { width: 420px; height: 230px; right: -260px; bottom: 100px; transform: rotate(-12deg); }
    .quiz-shell {
        position: relative; z-index: 1; width: 100%; max-width: 850px; margin: 0 auto;
        overflow: hidden; background: #fff; border: 1px solid rgba(0, 98, 121, .14);
        border-radius: 24px; box-shadow: 0 20px 55px rgba(16, 35, 58, .14);
    }
    .quiz-counter-card {
        display: grid; grid-template-columns: minmax(245px, .82fr) 1.18fr;
        overflow: hidden; background: #fff; border-bottom: 1px solid #e2e8f0;
    }
    .quiz-counter-copy { position: relative; z-index: 4; padding: 27px 30px 25px; }
    .quiz-eyebrow {
        display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px;
        color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .10em;
        text-transform: uppercase;
    }
    .quiz-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: #f16279; }
    #quiz-count {
        font-family: 'Gabarito', sans-serif; font-weight: 800;
        font-size: clamp(50px, 8vw, 72px); line-height: .92;
        letter-spacing: -.045em; color: #006279; font-variant-numeric: tabular-nums;
        transform-origin: left center;
    }
    #quiz-count.is-counting { animation: quizCountPulse .7s cubic-bezier(.2,.8,.2,1); }
    @keyframes quizCountPulse { 35% { color: #f16279; transform: scale(1.035); } }
    #quiz-count-label { margin-top: 6px; color: #64748b; font-size: 13px; }
    .quiz-annotation {
        font-family: 'Permanent Marker', cursive; color: #f16279;
        font-size: 16px; line-height: 1.25; transform: rotate(-1.5deg); display: inline-block;
        min-height: 1.4em; margin-top: 10px;
    }
    .quiz-sea {
        position: relative; isolation: isolate; min-height: 195px; overflow: hidden;
        background: linear-gradient(180deg, #e8f7f8 0%, #c9ebee 46%, #61aeb9 47%, #006279 100%);
    }
    .quiz-sun {
        position: absolute; width: 58px; height: 58px; right: 34px; top: 24px;
        border-radius: 50%; background: #fed470; box-shadow: 0 0 0 12px rgba(254, 212, 112, .18);
    }
    .quiz-cloud { position: absolute; width: 55px; height: 13px; border-radius: 999px; background: rgba(255,255,255,.78); }
    .quiz-cloud::before, .quiz-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
    .quiz-cloud::before { width: 22px; height: 22px; left: 10px; bottom: 2px; }
    .quiz-cloud::after { width: 29px; height: 29px; left: 24px; bottom: 1px; }
    .quiz-cloud-a { left: 36px; top: 31px; transform: scale(.75); opacity: .8; }
    .quiz-cloud-b { right: 105px; top: 70px; transform: scale(.46); opacity: .62; }
    .quiz-sea::before, .quiz-sea::after {
        content: ''; position: absolute; z-index: 1; left: -10%; width: 120%; height: 62px;
        border-radius: 45% 55% 0 0 / 30% 30% 0 0; pointer-events: none;
    }
    .quiz-sea::before {
        bottom: 34px; background: rgba(255,255,255,.15); transform: rotate(-1deg);
        animation: quizWaveDrift 8s ease-in-out infinite alternate;
    }
    .quiz-sea::after {
        bottom: -28px; background: rgba(19,25,67,.13); transform: rotate(1.5deg);
        animation: quizWaveDrift 10s ease-in-out -4s infinite alternate-reverse;
    }
    @keyframes quizWaveDrift { to { transform: translateX(4%) rotate(1deg); } }
    #quiz-fleet {
        position: absolute; z-index: 3; left: 27px; right: 27px; bottom: 30px;
        display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px 9px;
        min-height: 68px; align-content: end;
    }
    .quiz-boat {
        width: 19px; height: 19px; color: #fff; justify-self: center;
        filter: drop-shadow(0 2px 1px rgba(16,35,58,.22));
        transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1);
        animation: quizBoatBob 2.8s ease-in-out calc(var(--boat-i) * -.11s) infinite;
    }
    .quiz-boat:nth-child(5n) { color: #fed470; }
    .quiz-boat:nth-child(7n) { color: #ffd8df; }
    .quiz-boat.sailed { opacity: 0; transform: translate(28px, -10px) rotate(12deg) scale(.35); animation-play-state: paused; }
    @keyframes quizBoatBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
    .quiz-sea-caption {
        position: absolute; z-index: 4; left: 17px; bottom: 9px; color: rgba(255,255,255,.78);
        font-size: 10px; font-weight: 700; letter-spacing: .04em;
    }
    .quiz-card-stage {
        padding: 28px 30px 30px; overflow: hidden; background: #fff; min-height: 430px;
    }
    .quiz-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .quiz-leg { color: #006279; font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
    .quiz-qnum { color: #64748b; font-size: 12px; font-weight: 700; }
    .quiz-progress { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 0 4px 26px; }
    .quiz-progress::before, .quiz-progress-fill {
        content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
        border-radius: 999px; transform: translateY(-50%);
    }
    .quiz-progress::before { background: #dbe4e8; }
    .quiz-progress-fill { right: auto; max-width: calc(100% - 12px); background: linear-gradient(90deg, #006279, #f16279); transition: width .45s ease; }
    .quiz-dot {
        position: relative; z-index: 2; display: grid; place-items: center; width: 13px; height: 13px;
        border: 2px solid #b7c7cf; border-radius: 50%; background: #fff; color: #10233a;
        transition: transform .3s, background .3s, border-color .3s;
    }
    .quiz-dot.done { border-color: #fed470; background: #fed470; }
    .quiz-dot.done::after { content: '✓'; font-size: 8px; font-weight: 900; line-height: 1; }
    .quiz-dot.now { width: 18px; height: 18px; margin: -3px; border: 4px solid #ffd9df; background: #f16279; box-shadow: 0 0 0 5px rgba(241,98,121,.08); }
    .quiz-dot.now::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
    .quiz-question { font-size: clamp(28px, 4.6vw, 38px); line-height: 1.08; letter-spacing: -.035em; color: #10233a; margin: 0 0 7px; }
    .quiz-question:focus { outline: none; }
    .quiz-hint { font-size: 14.5px; color: #64748b; margin: 0 0 20px; }
    .quiz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .quiz-card {
        --art-a: #e8f7f8; --art-b: #b7e2e6; --art-ink: #006279;
        position: relative; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 15px;
        width: 100%; min-height: 126px; padding: 16px; overflow: hidden; cursor: pointer;
        text-align: left; font: inherit; color: inherit; background: #f8fafb;
        border: 1.5px solid #e2e8ec; border-radius: 17px;
        animation: quizCardIn .42s cubic-bezier(.2,.8,.2,1) backwards;
        transition: opacity .24s, transform .24s, border-color .18s, box-shadow .18s, background .18s;
    }
    .quiz-card::before {
        content: ''; position: absolute; inset: 0; opacity: 0;
        background: linear-gradient(115deg, var(--art-a), transparent 52%); transition: opacity .2s;
    }
    .quiz-tone-1 { --art-a: #fff0dc; --art-b: #fed470; --art-ink: #8a5b00; }
    .quiz-tone-2 { --art-a: #fff0f3; --art-b: #ffc3ce; --art-ink: #b33450; }
    .quiz-tone-3 { --art-a: #eff0ff; --art-b: #cdd2ff; --art-ink: #343a82; }
    .quiz-tone-4 { --art-a: #edf6e9; --art-b: #c7e3bc; --art-ink: #3d6c34; }
    .quiz-tone-5 { --art-a: #f1edff; --art-b: #d8ccff; --art-ink: #6248a1; }
    .quiz-card:nth-child(2) { animation-delay: .055s; }
    .quiz-card:nth-child(3) { animation-delay: .11s; }
    .quiz-card:nth-child(4) { animation-delay: .165s; }
    .quiz-card:nth-child(5) { animation-delay: .22s; }
    .quiz-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    @keyframes quizCardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
    .quiz-card-art {
        position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px;
        border-radius: 20px 20px 28px 20px; color: var(--art-ink);
        background: linear-gradient(145deg, var(--art-a), var(--art-b));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 7px 16px rgba(16,35,58,.08);
        transform: rotate(-2deg); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    }
    .quiz-card-art::before, .quiz-card-art::after {
        content: ''; position: absolute; border: 1px solid currentColor; border-radius: 50%; opacity: .16;
    }
    .quiz-card-art::before { width: 53px; height: 53px; }
    .quiz-card-art::after { width: 31px; height: 31px; }
    .quiz-emoji { position: relative; z-index: 2; display: block; font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 1px rgba(16,35,58,.12)); }
    .quiz-card-copy { position: relative; z-index: 1; min-width: 0; }
    .quiz-label { display: block; color: #10233a; font-family: 'Gabarito', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.15; }
    .quiz-sub { display: block; color: #64748b; font-size: 12.8px; line-height: 1.35; margin-top: 4px; }
    .quiz-key {
        position: absolute; z-index: 2; top: 10px; right: 10px; min-width: 19px; padding: 2px 5px;
        color: #94a3b8; background: rgba(255,255,255,.8); border: 1px solid #e2e8f0;
        border-radius: 6px; font-size: 10px; text-align: center;
    }
    .quiz-card:hover:not(:disabled) { transform: translateY(-3px) rotate(-.25deg); border-color: rgba(0,98,121,.55); box-shadow: 0 12px 26px rgba(0,77,95,.12); }
    .quiz-card:hover:not(:disabled)::before { opacity: .64; }
    .quiz-card:hover:not(:disabled) .quiz-card-art { transform: rotate(3deg) scale(1.055); }
    .quiz-card:focus-visible { outline: 3px solid #fed470; outline-offset: 3px; }
    .quiz-card:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.5); }
    .quiz-card.is-picked { z-index: 3; border-color: #006279; background: #f2fafb; transform: scale(.975); box-shadow: 0 0 0 4px rgba(0,98,121,.10); }
    .quiz-card.is-picked .quiz-card-art { animation: quizChoicePop .3s cubic-bezier(.2,.9,.2,1); }
    .quiz-card.is-skipped { opacity: 0; transform: scale(.94) translateY(5px); pointer-events: none; }
    @keyframes quizChoicePop { 55% { transform: rotate(5deg) scale(1.16); } }
    .quiz-undo {
        margin-top: 19px; padding: 7px 9px; border: 0; border-radius: 9px; cursor: pointer;
        color: #64748b; background: transparent; font: inherit; font-size: 13.5px;
    }
    .quiz-undo:hover { color: #10233a; background: #eef3f5; }
    .quiz-screen-forward { animation: quizScreenForward .38s cubic-bezier(.2,.8,.2,1) both; }
    .quiz-screen-back { animation: quizScreenBack .32s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes quizScreenForward { from { opacity: 0; transform: translateX(18px); } }
    @keyframes quizScreenBack { from { opacity: 0; transform: translateX(-18px); } }
    .quiz-finale { position: relative; text-align: center; padding: 0 6px 4px; }
    .quiz-final-scene {
        position: relative; max-width: 520px; height: 125px; margin: -4px auto 14px; overflow: hidden;
        border-radius: 18px; background: linear-gradient(180deg, #e7f7f8 0 54%, #4da1ae 55%, #006279 100%);
    }
    .quiz-final-sun { position: absolute; width: 42px; height: 42px; top: 16px; right: 44px; border-radius: 50%; background: #fed470; }
    .quiz-final-route { position: absolute; inset: 0; width: 100%; height: 100%; }
    .quiz-route-line { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 8; animation: quizRouteDraw 1.1s linear both; }
    @keyframes quizRouteDraw { from { stroke-dashoffset: 110; } }
    .quiz-final-ship { color: #fff; transform-origin: center; animation: quizShipArrive 1s cubic-bezier(.2,.8,.2,1) both, quizBoatBob 2.8s 1s ease-in-out infinite; }
    @keyframes quizShipArrive { from { opacity: 0; transform: translate(-130px, 12px) rotate(-8deg); } }
    .quiz-confetti { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 2px; background: #f16279; animation: quizConfetti 1.2s ease-out both; }
    .quiz-confetti.c1 { left: 17%; top: 18px; transform: rotate(25deg); }
    .quiz-confetti.c2 { left: 28%; top: 32px; background: #fed470; animation-delay: .12s; }
    .quiz-confetti.c3 { right: 26%; top: 21px; background: #006279; animation-delay: .2s; }
    .quiz-confetti.c4 { right: 13%; top: 40px; background: #f16279; animation-delay: .08s; }
    @keyframes quizConfetti { from { opacity: 0; transform: translateY(-18px) rotate(0); } 60% { opacity: 1; } to { transform: translateY(15px) rotate(160deg); } }
    .quiz-finale-title { margin: 0 0 7px; color: #10233a; font-size: clamp(28px, 5vw, 39px); letter-spacing: -.035em; }
    .quiz-journey { color: #64748b; font-size: 14px; margin-bottom: 19px; }
    .quiz-journey strong { color: #006279; font-family: 'Gabarito', sans-serif; font-size: 22px; }
    .quiz-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 0 0 24px; }
    .quiz-chip { padding: 6px 11px; color: #10233a; background: rgba(255,255,255,.90); border: 1px solid rgba(255,255,255,.72); border-radius: 999px; font-size: 12.5px; font-weight: 600; }
    .quiz-chip::before { content: '✓'; margin-right: 5px; color: #006279; font-weight: 900; }
    .quiz-cta {
        display: inline-flex; align-items: center; gap: 14px; padding: 15px 18px 15px 28px;
        color: #fff; background: #f16279; border-radius: 14px; text-decoration: none;
        font-family: 'Gabarito', sans-serif; font-weight: 700; font-size: 19px;
        box-shadow: 0 10px 25px rgba(241,98,121,.30); transition: transform .16s, box-shadow .16s;
    }
    .quiz-cta-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.18); transition: transform .16s; }
    .quiz-cta:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(241,98,121,.36); }
    .quiz-cta:hover .quiz-cta-arrow { transform: translateX(3px); }
    .quiz-cta:focus-visible { outline: 3px solid #fed470; outline-offset: 3px; }
    .quiz-cta-sub { margin-top: 10px; color: #64748b; font-size: 12.5px; }
    .quiz-match-loading { padding: 36px 18px; color: #64748b; font-size: 14px; }
    .quiz-match-loading::before {
        content: ''; display: block; width: 30px; height: 30px; margin: 0 auto 11px;
        border: 3px solid #dbe7ea; border-top-color: #006279; border-radius: 50%;
        animation: quizMatchSpin .75s linear infinite;
    }
    @keyframes quizMatchSpin { to { transform: rotate(360deg); } }
    .quiz-match-card { margin: 20px 0 17px; text-align: left; }
    .quiz-match-card .cruise-card { background-color: #fff; }
    .quiz-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
    .quiz-share[hidden] { display: none; }
    .quiz-share-label {
        margin-right: 2px; color: #64748b; font-size: 12.5px; font-weight: 700;
        letter-spacing: .08em; line-height: 1; text-transform: uppercase;
    }
    .quiz-share button {
        display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
        padding: 0; border: 1.5px solid #d6dee7; border-radius: 999px;
        background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease;
    }
    .quiz-share button[hidden] { display: none; }
    .quiz-share button:hover { border-color: #006279; background: #f0f7f9; }
    .quiz-share svg { width: 17px; height: 17px; fill: #34495e; }
    .quiz-share button:hover svg { fill: #006279; }
    .quiz-share-status { color: #006279; font-size: 12.5px; font-weight: 700; }
    .quiz-other-matches { display: inline-block; margin-top: 5px; color: #006279; font-size: 13px; font-weight: 700; }
    .quiz-final-actions { margin-top: 12px; }
    .quiz-newsletter {
        margin: 22px auto 2px; padding: 20px 22px; max-width: 650px; text-align: left;
        border: 1px solid #cfe4e9; border-radius: 18px;
        background: linear-gradient(135deg, #f0f8f9 0%, #fffaf0 100%);
    }
    .quiz-newsletter-kicker {
        margin-bottom: 4px; color: #006279; font-size: 10.5px; font-weight: 800;
        letter-spacing: .1em; text-transform: uppercase;
    }
    .quiz-newsletter h3 { margin: 0 0 5px; color: #10233a; font-size: 20px; letter-spacing: -.02em; }
    .quiz-newsletter p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
    .quiz-newsletter-form { display: flex; gap: 9px; margin-top: 14px; }
    .quiz-newsletter-form input {
        min-width: 0; flex: 1; height: 44px; padding: 0 13px; color: #10233a; background: #fff;
        border: 1px solid #cbd5e1; border-radius: 11px; font-size: 15px; outline: none;
    }
    .quiz-newsletter-form input:focus { border-color: #006279; box-shadow: 0 0 0 3px rgba(0, 98, 121, .11); }
    .quiz-newsletter-form button {
        min-height: 44px; padding: 0 17px; border: 0; border-radius: 11px; color: #fff;
        background: #006279; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
    }
    .quiz-newsletter-form button:hover { background: #004f62; }
    .quiz-newsletter-form button:disabled { opacity: .65; cursor: wait; }
    .quiz-newsletter-note { margin-top: 8px !important; color: #94a3b8 !important; font-size: 11px !important; }
    .quiz-newsletter-thanks { padding: 9px 0 2px; color: #006279 !important; font-weight: 750; }
    .quiz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .quiz-shared-shell { max-width: 920px; padding: clamp(24px, 5vw, 44px); text-align: center; }
    .quiz-shared-title { margin: 0 0 24px; color: #10233a; font-size: clamp(31px, 5vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
    .quiz-shared-shell .quiz-match-card { margin-bottom: 0; }
    .quiz-shared-invite { margin-top: 24px; padding-top: 26px; }
    .quiz-shared-invite h2 { margin: 0 0 18px; color: #10233a; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.025em; }

    @media (max-width: 680px) {
        .quiz-experience { padding: 12px 12px 60px; }
        .quiz-taking-experience { margin-top: -28px; }
        .quiz-shell { border-radius: 20px; }
        .quiz-counter-card { grid-template-columns: 1fr; }
        .quiz-counter-copy { padding: 22px 22px 18px; text-align: center; }
        .quiz-eyebrow { justify-content: center; }
        #quiz-count { font-size: clamp(49px, 17vw, 68px); transform-origin: center; }
        .quiz-sea { min-height: 132px; }
        .quiz-sun { width: 42px; height: 42px; right: 24px; top: 17px; }
        .quiz-cloud-a { left: 20px; top: 20px; }
        .quiz-cloud-b { display: none; }
        #quiz-fleet { left: 18px; right: 18px; bottom: 26px; grid-template-columns: repeat(12, 1fr); gap: 4px 3px; }
        .quiz-boat { width: 14px; height: 14px; }
        .quiz-card-stage { min-height: 0; padding: 21px 17px 24px; }
        .quiz-progress { margin-bottom: 21px; }
        .quiz-question { font-size: 28px; }
        .quiz-hint { font-size: 13.5px; margin-bottom: 16px; }
        .quiz-cards { grid-template-columns: 1fr; gap: 10px; }
        .quiz-card:last-child:nth-child(odd) { grid-column: auto; }
        .quiz-card { grid-template-columns: 61px 1fr; min-height: 101px; padding: 13px; gap: 13px; border-radius: 15px; }
        .quiz-card-art { width: 59px; height: 59px; border-radius: 16px 16px 22px 16px; }
        .quiz-card-art::before { width: 44px; height: 44px; }
        .quiz-card-art::after { width: 25px; height: 25px; }
        .quiz-emoji { font-size: 29px; }
        .quiz-label { font-size: 17px; padding-right: 16px; }
        .quiz-sub { font-size: 12.3px; }
        .quiz-key { top: 8px; right: 8px; }
        .quiz-final-scene { height: 105px; }
        .quiz-newsletter { padding: 18px 16px; }
        .quiz-newsletter-form { align-items: stretch; flex-direction: column; }
        .quiz-newsletter-form button { height: 44px; }
    }