@font-face {
    font-family: "Niconne";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-niconne-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* CRAFT-TI immersive test shell */
body.cti-test-page,
body:has(.cti-test[data-cti-hide-theme-chrome="true"]) {
    overflow: hidden;
    background: #1d160f;
}

body.cti-test-page .shopify-section-group-header-group,
body.cti-test-page .shopify-section-group-overlay-group,
body.cti-test-page .shopify-section-group-footer-group,
body:has(.cti-test[data-cti-hide-theme-chrome="true"]) .shopify-section-group-header-group,
body:has(.cti-test[data-cti-hide-theme-chrome="true"]) .shopify-section-group-overlay-group,
body:has(.cti-test[data-cti-hide-theme-chrome="true"]) .shopify-section-group-footer-group {
    display: none !important;
}

.craft-ti-test-section {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.cti-test {
    position: relative;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: #1d160f;
}

.cti-test>.cti-page-close {
    position: absolute;
    z-index: 150;
    top: max(50px, env(safe-area-inset-top, 0px));
    right: max(50px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.cti-test>.cti-page-close svg {
    display: block;
    width: 15px;
    height: 15px;
}

.cti-test>.cti-page-close:hover {
    background: #f2f2f2;
    transform: scale(1.04);
}

.cti-test>.cti-page-close:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
}

.cti-test.has-open-result-modal>.cti-page-close {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.cti-test .cti-step {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.cti-test .cti-step[hidden] {
    display: none !important;
}

.cti-test .cti-step.cti-is-entering {
    z-index: 2;
    animation: cti-step-enter 180ms ease-out both;
}

.cti-test .cti-live-region {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.cti-test .cti-noscript {
    position: absolute;
    inset: auto 16px 16px;
    z-index: 200;
    margin: 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff;
    color: #24170d;
    font: 600 14px/1.4 Arial, sans-serif;
    text-align: center;
}

@keyframes cti-step-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cti-test .cti-step.cti-is-entering {
        animation: none;
    }
}

/* CRAFT-TI step 1 (scoped from ti-test/1/styles.css) */
.cti-test .cti-step--1 {
    --frame-w: min(100vw, calc(100vh * 16 / 9));
    --frame-w: min(100vw, calc(100dvh * 16 / 9));
    --ground-bottom: 9.8%;
    --letter-x: 68%;
    --letter-y: 32.2%;
    --letter-bob: calc(var(--frame-w) * 10 / 1920);
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.cti-test .cti-step--1 * {
    box-sizing: border-box;
}

.cti-test .cti-step--1,
.cti-test .cti-step--1 {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #1d231f;
}

.cti-test .cti-step--1 {
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.cti-test .cti-step--1 button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.cti-test .cti-step--1 .stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #093a63;
    cursor: pointer;
    touch-action: manipulation;
}

.cti-test .cti-step--1 .stage>.stage-trigger {
    position: absolute;
    inset: 0;
    z-index: 49;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.cti-test .cti-step--1 .stage>.stage-trigger:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: -4px;
}

.cti-test .cti-step--1 .stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    background: #aa994f;
    opacity: 0;
    pointer-events: none;
}

.cti-test .cti-step--1 .stage.is-letter-open::after {
    animation: cti-s1-goldFill 0.18s linear 0.74s forwards;
}

.cti-test .cti-step--1 .stage>* {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.cti-test .cti-step--1 .blue-bg {
    inset: 0;
    background: var(--cti-image-blue-grid) center / cover no-repeat;
    opacity: 0;
    animation: cti-s1-blueIn 0.5s ease-out forwards;
}

.cti-test .cti-step--1 .green-field {
    z-index: 2;
    left: 0;
    bottom: 9.8%;
    width: 100%;
    height: 54.4%;
    object-fit: fill;
    transform: translateX(-105%);
    animation: cti-s1-slideFromLeft 0.82s cubic-bezier(0.2, 0.7, 0.18, 1) 0.42s forwards;
}

.cti-test .cti-step--1 .brown-strip {
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 11%;
    object-fit: fill;
    transform: translateY(115%);
    animation: cti-s1-stripIn 0.62s cubic-bezier(0.2, 0.7, 0.18, 1) 0.72s forwards;
}

.cti-test .cti-step--1 .page-title {
    z-index: 6;
    left: 4.9%;
    top: 8.3%;
    margin: 0;
    color: #fff;
    font-family: "Poppins", "Avenir Next", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 112 / 1920);
    font-weight: 700;
    line-height: calc(var(--frame-w) * 115 / 1920);
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(24px);
    animation: cti-s1-titleIn 0.68s cubic-bezier(0.2, 0.72, 0.2, 1) 0.88s forwards;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.cti-test .cti-step--1 .cloud {
    display: none;
    z-index: 4;
    opacity: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.02));
}

.cti-test .cti-step--1 .cloud-left {
    width: 21.8%;
    left: 10.5%;
    top: 12.2%;
    transform: translateX(-32%);
    animation: cti-s1-cloudInLeft 0.8s cubic-bezier(0.19, 0.72, 0.22, 1) 1.02s forwards;
}

.cti-test .cti-step--1 .cloud-right {
    width: 18.3%;
    right: 8.4%;
    top: 24.6%;
    transform: translateX(32%);
    animation: cti-s1-cloudInRight 0.8s cubic-bezier(0.19, 0.72, 0.22, 1) 1.08s forwards;
}

.cti-test .cti-step--1 .dog {
    z-index: 9;
    width: 12.55%;
    left: 28.95%;
    bottom: 10.89%;
    opacity: 0;
    transform: translateX(-36%) translateY(6%) rotate(-4deg);
    transform-origin: 50% 100%;
    animation:
        cti-s1-dogIn 0.72s cubic-bezier(0.2, 0.72, 0.2, 1) 1.16s forwards,
        cti-s1-dogIdle 4.8s ease-in-out 2.15s infinite;
}

.cti-test .cti-step--1 .grass {
    z-index: 8;
    opacity: 0;
    transform: translateY(60%);
}

.cti-test .cti-step--1 .grass-large {
    width: 7.92%;
    left: 83.65%;
    bottom: 10.89%;
    animation: cti-s1-grassIn 0.58s cubic-bezier(0.2, 0.72, 0.2, 1) 1.24s forwards;
}

.cti-test .cti-step--1 .grass-small {
    width: 6.2%;
    left: 7.66%;
    bottom: 10.89%;
    animation: cti-s1-grassIn 0.58s cubic-bezier(0.2, 0.72, 0.2, 1) 1.34s forwards;
}

.cti-test .cti-step--1 .mailbox-body {
    z-index: 9;
    width: 16.72%;
    left: 56.35%;
    bottom: 10.89%;
    opacity: 0;
    transform: translateY(142%) scaleY(0.96);
    transform-origin: 50% 100%;
    animation: cti-s1-mailboxIn 0.88s cubic-bezier(0.18, 0.78, 0.22, 1) 1.58s forwards;
}

.cti-test .cti-step--1 .mailbox-roof {
    z-index: 22;
    width: 13.6%;
    left: 57.9%;
    top: 20.48%;
    opacity: 0;
    transform: translateY(1580%) scaleY(0.96);
    transform-origin: 50% 100%;
    animation: cti-s1-mailboxRoofIn 0.88s cubic-bezier(0.18, 0.78, 0.22, 1) 1.58s forwards;
}

.cti-test .cti-step--1 .letter-trigger {
    z-index: 16;
    left: var(--letter-x);
    top: var(--letter-y);
    width: 8.1%;
    aspect-ratio: 154 / 106;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 760%) scale(0.98) rotate(43deg);
    transform-origin: 50% 52%;
    animation: cti-s1-letterWithMailboxIn 0.88s cubic-bezier(0.18, 0.78, 0.22, 1) 1.58s forwards;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.cti-test .cti-step--1 .stage.is-letter-ready .letter-trigger {
    pointer-events: auto;
    animation: cti-s1-letterReadyNudge 1.45s ease-in-out infinite alternate;
}

.cti-test .cti-step--1 .letter-trigger::before {
    content: none;
    display: none;
}

.cti-test .cti-step--1 .envelope {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    transform: rotate(-46.05deg) scale(1.45);
    transform-origin: 50% 50%;
}

.cti-test .cti-step--1 .envelope-fly {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    transform: rotate(-46.05deg) scale(1.45);
    transform-origin: 50% 50%;
    opacity: 0;
}

.cti-test .cti-step--1 .click-ring {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 38%;
    width: 52%;
    aspect-ratio: 1;
    border: clamp(1px, 0.07vw, 2px) solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    filter: none;
}

.cti-test .cti-step--1 .click-ring::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: clamp(1px, 0.06vw, 2px) solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
}

.cti-test .cti-step--1 .click-ring::before {
    content: "";
    position: absolute;
    inset: 28%;
    border: clamp(1px, 0.05vw, 2px) solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
}

.cti-test .cti-step--1 .stage.is-letter-ready .click-ring {
    animation: cti-s1-clickRingPulse 1.35s ease-in-out infinite;
}

.cti-test .cti-step--1 .stage:hover .click-ring,
.cti-test .cti-step--1 .stage:has(.stage-trigger:focus-visible) .click-ring {
    border-color: #fff;
    filter: drop-shadow(0 0 0.85vw rgba(255, 255, 255, 0.82));
}

.cti-test .cti-step--1 .stage.is-letter-open {
    cursor: default;
}

.cti-test .cti-step--1 .stage.is-letter-open .stage-trigger {
    pointer-events: none;
    cursor: default;
}

.cti-test .cti-step--1 .stage.is-letter-open .letter-trigger {
    pointer-events: none;
    animation: cti-s1-letterOpenFill 0.92s cubic-bezier(0.18, 0.78, 0.18, 1) forwards;
}

.cti-test .cti-step--1 .stage.is-letter-open .envelope {
    opacity: 0;
}

.cti-test .cti-step--1 .stage.is-letter-open .envelope-fly {
    opacity: 1;
}

.cti-test .cti-step--1 .stage.is-letter-open .letter-trigger::before,
.cti-test .cti-step--1 .stage.is-letter-open .click-ring {
    animation: cti-s1-fadeOut 0.18s ease-out forwards;
}

.cti-test .cti-step--1 .wind {
    display: none;
    z-index: 11;
    opacity: 0;
    transform: translateY(8%);
    animation: cti-s1-windIn 0.42s ease-out 2.26s forwards;
}

.cti-test .cti-step--1 .wind-left {
    z-index: 14;
    width: 7.72%;
    left: 45.78%;
    top: 56.54%;
}

.cti-test .cti-step--1 .wind-right {
    width: 4.6%;
    left: 65.2%;
    top: 43.14%;
}

.cti-test .cti-step--1 .mailbox-ground-mask {
    z-index: 15;
    left: 47%;
    bottom: 0;
    width: 21.2%;
    height: 10.95%;
    background: var(--cti-image-brown-strip) center bottom / 100vw 100% no-repeat;
    opacity: 0;
    animation: cti-s1-slotCoverIn 0.01s linear 1.58s forwards;
}

@keyframes cti-s1-blueIn {
    to {
        opacity: 1;
    }
}

@keyframes cti-s1-slideFromLeft {
    to {
        transform: translateX(0);
    }
}

@keyframes cti-s1-stripIn {
    to {
        transform: translateY(0);
    }
}

@keyframes cti-s1-titleIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes cti-s1-cloudInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s1-cloudInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s1-dogIn {
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes cti-s1-dogIdle {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    45% {
        transform: translateY(-0.8%) rotate(-0.8deg);
    }
}

@keyframes cti-s1-grassIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cti-s1-mailboxIn {
    0% {
        z-index: 9;
        opacity: 1;
        transform: translateY(142%) scaleY(0.96);
    }

    72% {
        z-index: 9;
        opacity: 1;
        transform: translateY(-0.8%) scaleY(1.01);
    }

    100% {
        z-index: 12;
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes cti-s1-mailboxRoofIn {
    0% {
        z-index: 22;
        opacity: 1;
        transform: translateY(1580%) scaleY(0.96);
    }

    72% {
        z-index: 22;
        opacity: 1;
        transform: translateY(-10%) scaleY(1.01);
    }

    100% {
        z-index: 22;
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes cti-s1-slotCoverIn {
    to {
        opacity: 1;
    }
}

@keyframes cti-s1-windIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cti-s1-letterWithMailboxIn {
    0% {
        opacity: 1;
        transform: translate(-50%, 760%) scale(0.98) rotate(43deg);
    }

    72% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(1.01) rotate(43deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(43deg);
    }
}

@keyframes cti-s1-letterShadowIn {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes cti-s1-letterReadyNudge {
    from {
        opacity: 1;
        transform: translate3d(-50%, calc(-50% - var(--letter-bob)), 0) scale(1) rotate(43deg);
    }

    to {
        opacity: 1;
        transform: translate3d(-50%, calc(-50% + var(--letter-bob)), 0) scale(1) rotate(43deg);
    }
}

@keyframes cti-s1-clickRingPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }

    34%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.18);
    }
}

@keyframes cti-s1-letterOpenFill {
    0% {
        z-index: 40;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(43deg);
    }

    34% {
        z-index: 40;
        opacity: 1;
        transform: translate(-50%, 28%) scale(1.35) rotate(22deg);
    }

    100% {
        z-index: 40;
        opacity: 1;
        transform: translate(-50%, -50%) scale(13.3) rotate(0deg);
    }
}

@keyframes cti-s1-fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes cti-s1-goldFill {
    to {
        opacity: 1;
    }
}

@media (max-aspect-ratio: 16 / 9) {
    .cti-test .cti-step--1 {
        --frame-w: 100vw;
    }
}

@media (min-aspect-ratio: 16 / 9) {
    .cti-test .cti-step--1 {
        --frame-w: calc(100vh * 16 / 9);
        --frame-w: calc(100dvh * 16 / 9);
    }
}

@media (max-width: 760px) {
    .cti-test .cti-step--1 {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cti-test .cti-step--1 *,
    .cti-test .cti-step--1 *::before,
    .cti-test .cti-step--1 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .cti-test .cti-step--1 .stage.is-letter-ready:not(.is-letter-open) .click-ring {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.cti-test .cti-step--1 h1,
.cti-test .cti-step--1 h2,
.cti-test .cti-step--1 h3,
.cti-test .cti-step--1 p,
.cti-test .cti-step--1 span,
.cti-test .cti-step--1 strong,
.cti-test .cti-step--1 small,
.cti-test .cti-step--1 a,
.cti-test .cti-step--1 button,
.cti-test .cti-step--1 .page-title,
.cti-test .cti-step--1 .page-title * {
    user-select: text !important;
    -webkit-user-select: text !important;
}


/* CRAFT-TI step 2 (scoped from ti-test/2/styles.css) */
@font-face {
    font-family: "Oregano";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-oregano-regular.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CourierLocal";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-courier.ttc");
    font-style: normal;
    font-display: swap;
}

.cti-test .cti-step--2 {
    --frame-w: 100vw;
    --green-bottom: 10.6%;
}

.cti-test .cti-step--2 * {
    box-sizing: border-box;
}

.cti-test .cti-step--2,
.cti-test .cti-step--2 {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #21160d;
}

.cti-test .cti-step--2 {
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: "Avenir Next", Arial, sans-serif;
}

.cti-test .cti-step--2 .flow-mode,
.flow-mode .cti-test .cti-step--2 {
    background: transparent;
}

.cti-test .cti-step--2 .stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #aa994f;
}

.cti-test .cti-step--2 .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #4b2908 var(--cti-image-brown-paper) center / cover no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms linear;
}

.cti-test .cti-step--2 .stage.is-lamp-open::before {
    opacity: 1;
}

.cti-test .cti-step--2 .flow-mode .stage {
    background: transparent;
}

.cti-test .cti-step--2 .stage>* {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.cti-test .cti-step--2 .board {
    left: 0;
    top: -17.647%;
    width: 100%;
    height: 117.647%;
    object-fit: fill;
}

.cti-test .cti-step--2 .board-five {
    z-index: 1;
    opacity: 1;
}

.cti-test .cti-step--2 .board-seven {
    z-index: 4;
    opacity: 0;
    animation: cti-s2-boardSevenIn .72s cubic-bezier(.2, .7, .18, 1) .84s forwards;
}

.cti-test .cti-step--2 .dark-bg,
.cti-test .cti-step--2 .green-wall,
.cti-test .cti-step--2 .side-wall,
.cti-test .cti-step--2 .books,
.cti-test .cti-step--2 .lamp,
.cti-test .cti-step--2 .chest,
.cti-test .cti-step--2 .hand-key {
    display: none;
}

.cti-test .cti-step--2 .dark-bg {
    inset: 0;
    background: var(--cti-image-brown-paper) center/cover no-repeat;
    opacity: 1;
    transform: translateX(100%);
    animation: cti-s2-floorIn .62s cubic-bezier(.2, .7, .18, 1) forwards;
}

.cti-test .cti-step--2 .green-wall {
    z-index: 2;
    left: 13.55%;
    top: calc(11.1% - 1px);
    width: 86.45%;
    height: 78.3%;
    object-fit: fill;
    transform: translateX(100%);
    animation: cti-s2-wallIn .82s cubic-bezier(.2, .7, .18, 1) .68s forwards;
}

.cti-test .cti-step--2 .side-wall {
    z-index: 3;
    left: 0;
    top: 0;
    height: 100%;
    width: 13.55%;
    object-fit: fill;
    transform: translateX(-105%);
    animation: cti-s2-sideIn .72s cubic-bezier(.2, .7, .18, 1) .78s forwards;
}

.cti-test .cti-step--2 .books {
    z-index: 2;
    left: 17.9%;
    top: 17.2%;
    display: flex;
    gap: 1.05vw;
    opacity: 0;
    transform: translateX(-18vw);
    animation: cti-s2-bookIn .82s linear 1.38s forwards;
}

.cti-test .cti-step--2 .books img {
    width: 1.1vw;
    height: 6.25vw;
    object-fit: fill;
    opacity: 1;
}

.cti-test .cti-step--2 .lamp {
    z-index: 9;
    left: 13.55%;
    bottom: var(--green-bottom);
    width: 17.2%;
    opacity: 0;
    transform: translateY(38%);
    animation: cti-s2-riseIn .72s cubic-bezier(.18, .78, .22, 1) 1.50s forwards;
}

.cti-test .cti-step--2 .chest {
    z-index: 10;
    right: 11.7%;
    bottom: var(--green-bottom);
    width: 9.2%;
    opacity: 0;
    transform: translateY(65%);
    animation: cti-s2-riseIn .62s cubic-bezier(.18, .78, .22, 1) 2.34s forwards;
}

.cti-test .cti-step--2 .hand-key {
    z-index: 14;
    right: 3.8%;
    top: 29%;
    width: 31%;
    height: 31%;
    transform: translateX(44%);
    opacity: 0;
    animation: cti-s2-handIn .74s cubic-bezier(.18, .76, .18, 1) 2.18s forwards;
}

.cti-test .cti-step--2 .hand-key img {
    position: absolute;
    display: block;
}

.cti-test .cti-step--2 .sleeve {
    right: -1%;
    top: 24%;
    width: 20%;
    height: auto;
}

.cti-test .cti-step--2 .hand {
    right: 5%;
    top: 0;
    width: 80%;
}

.cti-test .cti-step--2 .key {
    left: 35%;
    top: 46%;
    width: 10%;
    transform-origin: 45% 18%;
    animation: cti-s2-keyWiggle 2.1s ease-in-out 4.2s infinite;
}

.cti-test .cti-step--2 .letter-card {
    z-index: 12;
    left: 41.7%;
    top: 15.3%;
    width: 30.2%;
    height: 74%;
    opacity: 0;
    transform: translateY(18px);
    animation: cti-s2-letterIn .52s ease-out 3.08s forwards;
}

.cti-test .cti-step--2 .letter-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cti-test .cti-step--2 .letter-copy {
    position: absolute;
    inset: 7.2% 8.6% 6.6% 8.6%;
    width: calc(var(--frame-w) * 480 / 1920);
    color: #050301;
    font-family: "Oregano", "Comic Sans MS", "Bradley Hand", cursive;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);
    pointer-events: auto;
}

.cti-test .cti-step--2 .letter-copy p {
    margin: 0 0 .9em;
}

@keyframes cti-s2-fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes cti-s2-boardSevenIn {
    to {
        opacity: 1;
    }
}

@keyframes cti-s2-floorIn {
    to {
        transform: translateX(0);
    }
}

@keyframes cti-s2-wallIn {
    to {
        transform: translateX(0);
    }
}

@keyframes cti-s2-sideIn {
    to {
        transform: translateX(0);
    }
}

@keyframes cti-s2-bookIn {
    0% {
        opacity: 0;
        transform: translateX(-18vw);
    }

    1% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s2-riseIn {
    72% {
        opacity: 1;
        transform: translateY(-1.5%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cti-s2-handIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s2-letterIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cti-s2-keyWiggle {

    0%,
    100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-8deg)
    }

    50% {
        transform: rotate(7deg)
    }

    75% {
        transform: rotate(-4deg)
    }
}

.cti-test .cti-step--2 .scene-bg {
    left: 0;
    top: -17.647%;
    z-index: 1;
    width: 100%;
    height: 117.647%;
    object-fit: fill;
}

.cti-test .cti-step--2 .scene-empty {
    opacity: 1;
}

.cti-test .cti-step--2 .stage.is-lamp-open .scene-empty {
    animation: none !important;
    opacity: 0;
}

.cti-test .cti-step--2 .scene-open {
    z-index: 40;
    opacity: 0;
}

.cti-test .cti-step--2 .stage.is-lamp-open .scene-open {
    animation: none !important;
    opacity: 0 !important;
}

.cti-test .cti-step--2 .scene-title {
    z-index: 8;
    left: 16.094%;
    top: 19.34%;
    margin: 0;
    color: #fff;
    font-family: "Poppins", "Avenir Next", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 70 / 1920);
    font-weight: 700;
    line-height: calc(var(--frame-w) * 72 / 1920);
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(24px);
    animation: cti-s2-secondTitleIn .62s cubic-bezier(.2, .72, .2, 1) .42s forwards;
}

.cti-test .cti-step--2 .lamp-built {
    z-index: 9;
    left: 21.1%;
    top: 44.227%;
    width: 10.6%;
    height: 44.93%;
    opacity: 0;
    transform: translateY(38%);
    transform-origin: 50% 88%;
    animation: cti-s2-riseIn .66s cubic-bezier(.18, .78, .22, 1) 1.20s forwards;
    pointer-events: none;
}

.cti-test .cti-step--2 .lamp-shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.cti-test .cti-step--2 .lamp-base {
    position: absolute;
    left: .3%;
    bottom: 0;
    width: 99.4%;
    height: auto;
}

.cti-test .cti-step--2 .lamp-new {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.cti-test .cti-step--2 .lamp-static,
.cti-test .cti-step--2 .lamp-fly-top,
.cti-test .cti-step--2 .lamp-top-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform-origin: 48% 17%;
}

.cti-test .cti-step--2 .lamp-static {
    z-index: 2;
    pointer-events: none;
}

.cti-test .cti-step--2 .lamp-top-cover {
    z-index: 6;
    pointer-events: none;
}

.cti-test .cti-step--2 .lamp-fly-top {
    display: none !important;
    z-index: 0;
    opacity: 0 !important;
}

.cti-test .cti-step--2 .stage.is-lamp-open .lamp-built {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}

.cti-test .cti-step--2 .stage.is-lamp-open .lamp-static,
.cti-test .cti-step--2 .stage.is-lamp-open .lamp-top-cover {
    clip-path: inset(24.8% 0 0 0);
    animation: cti-s2-lampStandDropClear 760ms cubic-bezier(.22, .66, .18, 1) both;
}

.cti-test .cti-step--2 .stage.is-lamp-open .lamp-fly-top {
    animation: none;
}

.cti-test .cti-step--2 .transition-lamp {
    z-index: 60;
    left: 22.82%;
    top: 44.227%;
    width: 6.705%;
    height: 11.144%;
    display: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint;
}

.cti-test .cti-step--2 .transition-lamp-shade,
.cti-test .cti-step--2 .transition-lamp-bulb {
    position: absolute;
    display: block;
}

.cti-test .cti-step--2 .transition-lamp-shade {
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 78.72%;
    background: #dedb95;
    clip-path: polygon(28% 0, 72% 0, 97% 100%, 3% 100%);
    transform: scaleX(.96) scaleY(.98);
    transform-origin: 50% 0;
    will-change: transform;
    backface-visibility: hidden;
}

.cti-test .cti-step--2 .transition-lamp-bulb {
    z-index: 1;
    left: 28.5%;
    top: 40.7%;
    width: 43%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d8cfad;
    opacity: 1;
    transform-origin: 50% 50%;
    will-change: opacity;
}

.cti-test .cti-step--2 .stage.is-lamp-open .transition-lamp {
    display: block;
    animation: cti-s2-transitionLampToTop 760ms cubic-bezier(.22, .66, .18, 1) both;
}

.cti-test .cti-step--2 .stage.is-lamp-open .transition-lamp-shade {
    animation: none;
}

.cti-test .cti-step--2 .stage.is-lamp-open .transition-lamp-bulb {
    animation: cti-s2-transitionBulbWhite 760ms cubic-bezier(.22, .66, .18, 1) both;
}

.cti-test .cti-step--2 .stage.is-lamp-open .scene-empty {
    opacity: 0;
    animation: none !important;
}

.cti-test .cti-step--2 .stage.is-lamp-open .scene-title,
.cti-test .cti-step--2 .stage.is-lamp-open .chest,
.cti-test .cti-step--2 .stage.is-lamp-open .hand-key,
.cti-test .cti-step--2 .stage.is-lamp-open .letter-card {
    pointer-events: none;
    animation: cti-s2-sceneDropClear 760ms cubic-bezier(.22, .66, .18, 1) both;
}

.cti-test .cti-step--2 .chest {
    display: block;
    z-index: 10;
    left: 84.583%;
    top: auto;
    right: auto;
    bottom: calc(var(--green-bottom) + 2px);
    width: 9.167%;
    opacity: 0;
    transform: translateY(65%);
    animation: cti-s2-riseIn .56s cubic-bezier(.18, .78, .22, 1) 1.96s forwards;
}

.cti-test .cti-step--2 .hand-key {
    display: block;
    z-index: 28;
    left: auto;
    top: 28.214%;
    right: -3.3%;
    width: 21.198%;
    height: 30.501%;
    transform: translateX(44%);
    opacity: 0;
    animation: cti-s2-handIn .66s cubic-bezier(.18, .76, .18, 1) 1.82s forwards;
}

.cti-test .cti-step--2 .hand-new {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.cti-test .cti-step--2 .hand-key .key {
    left: 20%;
    top: 54%;
    width: 13.3%;
}

.cti-test .cti-step--2 .letter-card {
    z-index: 18;
    left: 42.760%;
    top: 15.686%;
    width: 36.979%;
    height: 73.420%;
    opacity: 0;
    transform: translateY(18px);
    animation: cti-s2-letterIn .46s ease-out 2.68s forwards;
}

.cti-test .cti-step--2 .letter-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cti-test .cti-step--2 .letter-copy {
    position: absolute;
    inset: 0;
    width: auto;
    display: block;
    overflow: visible;
    color: #050301;
    font-family: "CourierLocal", Courier, monospace;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.cti-test .cti-step--2 .letter-scroll {
    position: absolute;
    inset: 11.425% 5.9% 18.8% 9.296%;
    padding-right: calc(var(--frame-w) * 34 / 1920);
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #99611b transparent;
    scrollbar-width: thin;
    pointer-events: auto;
    line-height: 1;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar {
    width: 2px;
    height: 0;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar-track-piece {
    background: transparent;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #99611b;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.cti-test .cti-step--2 .letter-scroll p {
    margin: 0 0 1.02em;
}

.cti-test .cti-step--2 .letter-scroll p:last-child {
    margin-bottom: 0;
}

.cti-test .cti-step--2 .gate-button {
    position: absolute;
    left: 9.3%;
    bottom: 8.7%;
    z-index: 6;
    width: 26.1%;
    height: 7.4%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #805001;
    color: #fff6df;
    font: 400 calc(var(--frame-w) * 20 / 1920) / 1 "EB Garamond", Georgia, serif;
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.cti-test .cti-step--2 .gate-button:hover {
    background: #6f4500;
}

.cti-test .cti-step--2 .gate-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cti-test .cti-step--2 .gate-button:active {
    transform: translateY(1px);
}

.cti-test .cti-step--2 .stage.is-lamp-open .gate-button {
    pointer-events: none;
}

.cti-test .cti-step--2 .scene-title,
.cti-test .cti-step--2 .letter-card,
.cti-test .cti-step--2 .letter-copy,
.cti-test .cti-step--2 .letter-copy * {
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

@keyframes cti-s2-secondTitleIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes cti-s2-sceneDropClear {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    92% {
        opacity: 1;
        transform: translateY(calc(var(--frame-w) * 1180 / 1920));
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--frame-w) * 1180 / 1920));
    }
}

@keyframes cti-s2-lampStandDropClear {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    92% {
        opacity: 1;
        transform: translateY(calc(var(--frame-w) * 1180 / 1920)) scale(.98);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--frame-w) * 1180 / 1920)) scale(.98);
    }
}

@keyframes cti-s2-lampZoomUp {
    to {
        opacity: 1;
        transform: translateY(-15%) scale(1.42);
    }
}

@keyframes cti-s2-lampTopZoomUp {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    22% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translate(calc(var(--frame-w) * 555 / 1920), calc(var(--frame-w) * -510 / 1920)) scale(2.16);
    }
}

@keyframes cti-s2-lampStaticFade {
    to {
        opacity: 0;
    }
}

@keyframes cti-s2-sceneClear {
    to {
        opacity: 0;
    }
}

@keyframes cti-s2-transitionLampToTop {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    100% {
        opacity: 1;
        transform: translate3d(calc(var(--frame-w) * 350 / 1920), -46.847vh, 0) scale3d(2.55, 2.55, 1);
        transform: translate3d(calc(var(--frame-w) * 350 / 1920), -46.847dvh, 0) scale3d(2.55, 2.55, 1);
    }
}

@keyframes cti-s2-transitionShadeContract {
    0% {
        height: 66%;
        transform: scaleX(1) scaleY(1);
        clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
    }

    100% {
        height: calc(64% + (var(--frame-w) * 20 / 1920));
        transform: scaleX(.96) scaleY(.98);
        clip-path: polygon(28% 0, 72% 0, 97% 100%, 3% 100%);
    }
}

@keyframes cti-s2-transitionBulbWhite {
    0% {
        background: #d8cfad;
        opacity: 1;
        box-shadow: none;
    }

    62% {
        background: #e9e2cf;
        opacity: 1;
    }

    100% {
        background: #fff;
        opacity: 1;
    }
}

@keyframes cti-s2-sceneOpenIn {
    to {
        opacity: 1;
    }
}

@media (max-width:760px) {
    .cti-test .cti-step--2 {
        overflow: hidden
    }
}

.cti-test .cti-step--2 h1,
.cti-test .cti-step--2 h2,
.cti-test .cti-step--2 h3,
.cti-test .cti-step--2 p,
.cti-test .cti-step--2 span,
.cti-test .cti-step--2 strong,
.cti-test .cti-step--2 small,
.cti-test .cti-step--2 a,
.cti-test .cti-step--2 button,
.cti-test .cti-step--2 .scene-title,
.cti-test .cti-step--2 .scene-title *,
.cti-test .cti-step--2 .letter-copy,
.cti-test .cti-step--2 .letter-copy * {
    user-select: text !important;
    -webkit-user-select: text !important;
}


/* CRAFT-TI step 3 (scoped from ti-test/3/styles.css) */
.cti-test .cti-step--3 {
    --frame-w: min(100vw, calc(100vh * 16 / 9));
    --frame-w: min(100vw, calc(100dvh * 16 / 9));
    --ink: #281706;
    --muted: #6c655c;
    --choice-bg: #f8f4f1;
}

@font-face {
    font-family: "EB Garamond";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-eb-garamond.ttf") format("truetype");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-regular.ttf") format("truetype");

    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("https://cdn-files.myshopline.com/file/store/1649394707320/craft-ti-poppins-black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.cti-test .cti-step--3 * {
    box-sizing: border-box;
}

.cti-test .cti-step--3,
.cti-test .cti-step--3 {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #23180f;
}

.cti-test .cti-step--3 {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--ink);
    font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.cti-test .cti-step--3 .flow-mode,
.flow-mode .cti-test .cti-step--3 {
    background: transparent;
}

.cti-test .cti-step--3 .stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #4b2908;
}

.cti-test .cti-step--3 .flow-mode .stage {
    background: transparent;
}

.cti-test .cti-step--3 .brown-bg,
.cti-test .cti-step--3 .light-rig,
.cti-test .cti-step--3 .beam-wrap,
.cti-test .cti-step--3 .beam-swing,
.cti-test .cti-step--3 .bottom-strip,
.cti-test .cti-step--3 .bulb,
.cti-test .cti-step--3 .quiz-lamp,
.cti-test .cti-step--3 .quiz-lamp-shade,
.cti-test .cti-step--3 .quiz-lamp-bulb,
.cti-test .cti-step--3 .result-scene,
.cti-test .cti-step--3 .result-scroll,
.cti-test .cti-step--3 .result-stars,
.cti-test .cti-step--3 .star,
.cti-test .cti-step--3 .result-spotlight-img,
.cti-test .cti-step--3 .result-character,
.cti-test .cti-step--3 .result-prop,
.cti-test .cti-step--3 .result-card,
.cti-test .cti-step--3 .result-portrait,
.cti-test .cti-step--3 .result-modal-layer,
.cti-test .cti-step--3 .result-modal,
.cti-test .cti-step--3 .modal-character {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.cti-test .cti-step--3 .brown-bg {
    inset: 0;
    background: var(--cti-image-brown-paper) center / cover no-repeat;
    opacity: 1;
    transform: none;
    animation: none;
}

.cti-test .cti-step--3 .light-rig {
    z-index: 6;
    inset: 0;
    transform-origin: 50% 5.45%;
    backface-visibility: hidden;
    will-change: transform;
    animation: none;
}

.cti-test .cti-step--3 .bulb {
    z-index: 6;
    width: 16.56%;
    left: 41.72%;
    top: -7.2%;
    opacity: 0;
    transform-origin: 50% 100%;
    transform: translateY(-26%);
    animation: cti-s3-bulbPeek 0.65s cubic-bezier(0.2, 0.7, 0.18, 1) 1.45s forwards;
}

.cti-test .cti-step--3 .quiz-lamp {
    z-index: 12;
    left: 41.05%;
    top: calc(-2.62% - (var(--frame-w) * 70 / 1920));
    width: 17.1%;
    height: 28.42%;
    opacity: 1;
    transform: translate3d(0, calc(var(--frame-w) * 70 / 1920), 0);
    transform-origin: 50% 0;
    animation: none;
    will-change: transform;
    backface-visibility: hidden;
}

.cti-test .cti-step--3 .stage.quiz-live .quiz-lamp {
    animation: cti-s3-quizLampSmoothExit 760ms cubic-bezier(.22, .66, .18, 1) forwards;
}

.cti-test .cti-step--3 .quiz-lamp-shade {
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 78.72%;
    background: #ddd994;
    clip-path: polygon(28% 0, 72% 0, 97% 100%, 3% 100%);
    transform: scaleX(.96) scaleY(.98);
    transform-origin: 50% 0;
    backface-visibility: hidden;
}

.cti-test .cti-step--3 .quiz-lamp-bulb {
    z-index: 1;
    left: 28.5%;
    top: 40.7%;
    width: 43%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: 50% 50%;
    animation: none;
    will-change: auto;
}

.cti-test .cti-step--3 .beam-wrap {
    z-index: 5;
    left: -24%;
    right: -24%;
    top: calc(10.9% - (var(--frame-w) * 36 / 1920));
    bottom: -30%;
    transform-origin: 50% 0;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -1px, 0);
    animation: none;
    will-change: clip-path, opacity, transform;
    backface-visibility: hidden;
    contain: paint;
}

.cti-test .cti-step--3 .stage.quiz-live .beam-wrap {
    animation: cti-s3-beamDrop .68s cubic-bezier(0.16, 0.74, 0.2, 1) .76s forwards;
}

.cti-test .cti-step--3 .beam-swing {
    inset: 0;
    transform-origin: 50% 0;
    transform: translate3d(0, 0, 0) scaleX(1.24);
    clip-path: polygon(47.7% 0, 52.3% 0, 134% 100%, -34% 100%);
    animation: cti-s3-lightSwing 5.8s ease-in-out .92s infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.cti-test .cti-step--3 .beam {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
}

.cti-test .cti-step--3 .beam-center {
    opacity: 1;
}

.cti-test .cti-step--3 .bottom-strip {
    z-index: 8;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 11%;
    object-fit: fill;
    display: none;
    opacity: 0;
    transform: translateY(100%);
    animation: cti-s3-stripIn 0.58s cubic-bezier(0.2, 0.7, 0.18, 1) 2.05s forwards;
}

.cti-test .cti-step--3 .quiz-title {
    position: absolute;
    z-index: 13;
    left: 5.104%;
    top: calc(12.33% - (var(--frame-w) * 30 / 1920));
    width: min(30vw, calc(var(--frame-w) * 560 / 1920));
    margin: 0;
    color: #fff;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(28px,
            min(3vw, calc(var(--frame-w) * 58 / 1920)),
            58px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(24px);
    animation: cti-s3-contentIn 0.42s ease-out 1.48s forwards;
}

.cti-test .cti-step--3 .question-panel {
    position: absolute;
    z-index: 12;
    left: 17.1875%;
    right: 17.1875%;
    top: 22.4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(22px);
    animation: cti-s3-contentIn 0.42s ease-out 1.58s forwards;
}

.cti-test .cti-step--3 .progress-row,
.cti-test .cti-step--3 .progress,
.cti-test .cti-step--3 .back-link,
.cti-test .cti-step--3 .next-link {
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
}

.cti-test .cti-step--3 .progress-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--frame-w) * 17 / 1920);
    margin: 0 0 calc(var(--frame-w) * 18 / 1920);
    transform: none;
}

.cti-test .cti-step--3 .progress-icon {
    width: calc(var(--frame-w) * 40.5 / 1920);
    height: calc(var(--frame-w) * 40 / 1920);
    display: block;
    object-fit: contain;
}

.cti-test .cti-step--3 .progress {
    margin: 0;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 30 / 1920);
    font-weight: 500;
}

.cti-test .cti-step--3 .story {
    width: min(100%, calc(var(--frame-w) * 900 / 1920));
    max-height: calc(var(--frame-w) * 180 / 1920);
    margin: 0;
    overflow: auto;
    text-align: center;
    white-space: pre-line;
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 30 / 1920);
    font-weight: 500;
    color: #000;
}

.cti-test .cti-step--3 .prompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--frame-w) * 5 / 1920);
    width: 100%;
    margin: calc(var(--frame-w) * 22 / 1920) 0 calc(var(--frame-w) * 32 / 1920);
    text-align: center;
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
    letter-spacing: -0.25px;
    transform: none;
}

.cti-test .cti-step--3 .prompt strong {
    display: block;
    color: #000;
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 30 / 1920);
    font-weight: 500;
}

.cti-test .cti-step--3 .prompt span {
    color: #636363;
    font-family: "Poppins", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 16 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);

}

.cti-test .cti-step--3 .choices {
    position: relative;
    z-index: 20;
    width: calc(var(--frame-w) * 1240 / 1920);
    min-height: calc(var(--frame-w) * 270 / 1920);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: calc(var(--frame-w) * 30 / 1920) calc(var(--frame-w) * 20 / 1920);
    pointer-events: auto;
    transform: none;
}

@media (min-width: 761px) {

    /* Four answers form 2 + 2; five answers form 3 + 2. */
    .cti-test .cti-step--3 .choices[data-choice-count="4"] {
        width: calc(var(--frame-w) * 1020 / 1920);
    }

    .cti-test .cti-step--3 .choices[data-choice-count="4"] .choice {
        flex-basis: calc(var(--frame-w) * 500 / 1920);
        width: calc(var(--frame-w) * 500 / 1920);
        min-height: calc(var(--frame-w) * 122 / 1920);
    }

    .cti-test .cti-step--3 .choices[data-choice-count="4"] .choice small {
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .cti-test .cti-step--3 .choices[data-choice-count="5"] {
        width: calc(var(--frame-w) * 1240 / 1920);
    }
}

.cti-test .cti-step--3 .choice {
    --final-opacity: 1;
    --card-opacity: .5;
    position: relative;
    flex: 0 0 calc(var(--frame-w) * 400 / 1920);
    width: calc(var(--frame-w) * 400 / 1920);
    min-height: calc(var(--frame-w) * 120 / 1920);
    display: block;
    padding: calc(var(--frame-w) * 24 / 1920) calc(var(--frame-w) * 30 / 1920);
    border: 1px solid transparent;
    border-radius: calc(var(--frame-w) * 16 / 1920);
    background: transparent;
    font: inherit;
    color: #361f04;
    text-align: left;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(18px);
    animation: cti-s3-choiceIn 0.5s ease-out calc(.08s + (var(--choice-index, 0) * .055s)) forwards;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.cti-test .cti-step--3 .choice::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #f2eeed;
    opacity: var(--card-opacity);
    transition: opacity 180ms ease;
    pointer-events: none;
}

.cti-test .cti-step--3 .choice:focus {
    outline: none;
    box-shadow: none;
}

.cti-test .cti-step--3 .choice:focus-visible {
    outline: none;
    box-shadow: 0 0 0 calc(var(--frame-w) * 3 / 1920) rgba(113, 70, 2, .72);
}

.cti-test .cti-step--3 .choice>span {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.cti-test .cti-step--3 .choice strong {
    display: block;
    margin-bottom: 0.28em;
    font-family: "Poppins", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 20 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);
    font-weight: 500;
    letter-spacing: -0.25px;
}

.cti-test .cti-step--3 .choice-group {
    display: block;
    margin: 0 0 calc(var(--frame-w) * 5 / 1920);
    color: #361f04;
    font-family: "CourierLocal", "Courier New", monospace;
    font-size: calc(var(--frame-w) * 13 / 1920);
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: calc(var(--frame-w) * 16 / 1920);
    text-transform: uppercase;
}

.cti-test .cti-step--3 .choice small {
    display: block;
    font-family: "Poppins", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 16 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);

    letter-spacing: -0.25px;
    color: #361f04;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cti-test .cti-step--3 .radio {
    display: none;
}

.cti-test .cti-step--3 .selected .radio {
    display: none;
}

.cti-test .cti-step--3 .selected .radio::after {
    content: none;
}

.cti-test .cti-step--3 .choice.selected {
    --card-opacity: 1;
    border-color: #714602;
    opacity: 1;
}

.cti-test .cti-step--3 .selection-error {
    margin: calc(var(--frame-w) * 8 / 1920) 0 0;
    color: #8b210f;
    font-family: "Poppins", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 14 / 1920);
    font-weight: 500;
    line-height: calc(var(--frame-w) * 18 / 1920);
}

.cti-test .cti-step--3 .selection-error[hidden] {
    display: none;
}

.cti-test .cti-step--3 .question-panel.question-refreshed {
    animation: cti-s3-questionRefresh .28s ease-out both;
}

.cti-test .cti-step--3 .quiz-nav {
    position: absolute;
    z-index: 14;
    left: 50%;
    bottom: 7.05%;
    display: flex;
    gap: calc(var(--frame-w) * 20 / 1920);
    opacity: 0;
    transform: translate(-50%, calc(var(--frame-w) * 14 / 1920));
    animation: cti-s3-navIn .42s ease-out 1.68s forwards;
}

.cti-test .cti-step--3 .back-link,
.cti-test .cti-step--3 .next-link {
    width: calc(var(--frame-w) * 200 / 1920);
    height: calc(var(--frame-w) * 61 / 1920);
    display: grid;
    place-items: center;
    border: 0;
    background: #714602;
    color: #fff;
    text-decoration: none;
    font-size: calc(var(--frame-w) * 20 / 1920);
    line-height: calc(var(--frame-w) * 24 / 1920);
    opacity: 1;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease;
}

.cti-test .cti-step--3 .back-link {
    border: calc(var(--frame-w) * 1 / 1920) solid #4c2d00;
    background: #4c2d00;
    color: #fff;
}

.cti-test .cti-step--3 .back-link:disabled {
    opacity: 0;
    pointer-events: none;
}

.cti-test .cti-step--3 .back-link[aria-hidden="true"] {
    display: none;
}

.cti-test .cti-step--3 .next-link:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.cti-test .cti-step--3 .back-link:focus-visible,
.cti-test .cti-step--3 .next-link:focus-visible {
    outline: calc(var(--frame-w) * 3 / 1920) solid rgba(255, 246, 223, .92);
    outline-offset: calc(var(--frame-w) * 3 / 1920);
}

.cti-test .cti-step--3 .result-scene {
    --result-accent: #9d6c3f;
    --result-backdrop: #0d3151;
    --result-modal-fill: #9d6c3f;
    --result-modal-text: #fff8ed;
    z-index: 90;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--result-backdrop);
    visibility: hidden;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 420ms ease, transform 420ms ease;
    pointer-events: none;
}

.cti-test .cti-step--3 .stage.show-result .result-scene {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.cti-test .cti-step--3 .stage:not(.show-result) .result-scene,
.cti-test .cti-step--3 .stage:not(.show-result) .result-scene * {
    pointer-events: none !important;
}

.cti-test .cti-step--3 .result-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--cti-image-result-bg-desktop, var(--cti-image-result-bg)) center / cover no-repeat;
    opacity: 0;
}

.cti-test .cti-step--3 .result-scene::after {
    content: none;
}

.cti-test .cti-step--3 .stage.show-result .result-scene::before {
    animation: cti-s3-resultBgIn .42s ease-out forwards;
}

.cti-test .cti-step--3 .result-stars {
    display: none;
}

.cti-test .cti-step--3 .star {
    display: block;
    background: rgba(95, 75, 50, .72);
    clip-path: polygon(50% 0, 62% 35%, 100% 35%, 70% 56%, 82% 96%, 50% 72%, 18% 96%, 30% 56%, 0 35%, 38% 35%);
    transform: rotate(-12deg);
}

.cti-test .cti-step--3 .star-a {
    left: 5%;
    top: 18%;
    width: 32%;
    aspect-ratio: 1;
}

.cti-test .cti-step--3 .star-b {
    left: 28%;
    top: -17%;
    width: 33%;
    aspect-ratio: 1;
    transform: rotate(6deg);
}

.cti-test .cti-step--3 .star-c {
    right: -2%;
    top: 15%;
    width: 28%;
    aspect-ratio: 1;
    transform: rotate(16deg);
}

.cti-test .cti-step--3 .result-spotlight-img {
    --target-opacity: .96;
    z-index: 2;
    left: 64.6%;
    top: 0;
    width: 27.73%;
    height: 94.34%;
    object-fit: fill;
    opacity: 0;
    transform: translateY(calc(var(--frame-w) * 16 / 1920));
    filter: blur(calc(var(--frame-w) * 2 / 1920)) saturate(1.2);
    mix-blend-mode: soft-light;
}

.cti-test .cti-step--3 .result-character {
    --target-opacity: 1;
    z-index: 4;
    right: var(--result-character-right, 11%);
    bottom: var(--result-character-bottom, 5.7%);
    width: auto;
    height: var(--result-character-height, 72%);
    max-width: 32%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    transform: translateY(calc(var(--frame-w) * 24 / 1920));
}

.cti-test .cti-step--3 .result-character-mobile,
.cti-test .cti-step--3 .result-paper-prop,
.cti-test .cti-step--3 .result-match-card {
    display: none;
}

.cti-test .cti-step--3 .result-prop {
    --target-opacity: 1;
    z-index: 5;
    height: var(--result-prop-height, 18%);
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transform: translateY(calc(var(--frame-w) * 14 / 1920));
}

.cti-test .cti-step--3 .result-prop--1 {
    right: var(--result-prop-1-right, 27.9%);
    top: var(--result-prop-1-top, 47.1%);
    width: var(--result-prop-1-width, 7.4%);
}

.cti-test .cti-step--3 .result-prop--2 {
    right: var(--result-prop-2-right, 5%);
    top: var(--result-prop-2-top, 65%);
    width: var(--result-prop-2-width, 6.5%);
}

.cti-test .cti-step--3 .result-prop[hidden] {
    display: none !important;
}

.cti-test[data-cti-result-type="curator"] .result-scene {
    --result-character-right: 10%;
    --result-character-height: 72%;
    --result-prop-1-right: 29%;
    --result-prop-1-top: 45%;
    --result-prop-1-width: 8.5%;
    --result-modal-fill: #9d6c3f;
    --result-modal-text: #fff8ed;
}

.cti-test[data-cti-result-type="virtuoso"] .result-scene {
    --result-character-right: 9%;
    --result-character-height: 71%;
    --result-prop-1-right: 5%;
    --result-prop-1-top: 63%;
    --result-prop-1-width: 6.5%;
    --result-prop-2-right: 28%;
    --result-prop-2-top: 60%;
    --result-prop-2-width: 7.5%;
    --result-modal-fill: #782626;
    --result-modal-text: #fff8ed;
}

.cti-test[data-cti-result-type="stylist"] .result-scene {
    --result-character-right: 9%;
    --result-character-height: 72%;
    --result-prop-1-right: 29%;
    --result-prop-1-top: 43%;
    --result-prop-1-width: 6.5%;
    --result-prop-2-right: 4%;
    --result-prop-2-top: 65%;
    --result-prop-2-width: 8%;
    --result-modal-fill: #c86358;
    --result-modal-text: #291814;
}

.cti-test[data-cti-result-type="storyteller"] .result-scene {
    --result-character-right: 8%;
    --result-character-height: 72%;
    --result-prop-1-right: 29%;
    --result-prop-1-top: 48%;
    --result-prop-1-width: 7%;
    --result-prop-2-right: 5%;
    --result-prop-2-top: 66%;
    --result-prop-2-width: 6%;
    --result-modal-fill: #d05c69;
    --result-modal-text: #2a1117;
}

.cti-test[data-cti-result-type="time-sculptor"] .result-scene {
    --result-character-right: 12%;
    --result-character-height: 72%;
    --result-prop-1-right: 28%;
    --result-prop-1-top: 47%;
    --result-prop-1-width: 7.4%;
    --result-modal-fill: #9d6c3f;
    --result-modal-text: #fff8ed;
}

.cti-test[data-cti-result-type="whatever"] .result-scene {
    --result-character-right: 8%;
    --result-character-height: 72%;
    --result-prop-1-right: 29%;
    --result-prop-1-top: 42%;
    --result-prop-1-width: 5.5%;
    --result-prop-2-right: 5%;
    --result-prop-2-top: 58%;
    --result-prop-2-width: 6%;
    --result-modal-fill: #2f4960;
    --result-modal-text: #fff;
}

.cti-test .cti-step--3 .result-card {
    --target-opacity: 1;
    --result-content-right-margin: calc(var(--frame-w) * -26 / 1920);
    z-index: 6;
    left: 9.1%;
    top: 13.62%;
    width: 52.2%;
    height: 72%;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(calc(var(--frame-w) * 20 / 1920));
}

.cti-test .cti-step--3 .stage.show-result .result-spotlight-img {
    animation: cti-s3-resultLayerIn .46s ease-out .24s forwards;
}

.cti-test .cti-step--3 .stage.show-result .result-character {
    animation: cti-s3-resultLayerIn .5s ease-out .36s forwards;
}

.cti-test .cti-step--3 .stage.show-result .result-prop--1 {
    animation: cti-s3-resultLayerIn .46s ease-out .48s forwards;
}

.cti-test .cti-step--3 .stage.show-result .result-prop--2 {
    animation: cti-s3-resultLayerIn .46s ease-out .56s forwards;
}

.cti-test .cti-step--3 .stage.show-result .result-card {
    animation: cti-s3-resultLayerIn .52s ease-out .52s forwards;
}

.cti-test .cti-step--3 .result-paper {
    position: absolute;
    left: 0;
    top: 12.1%;
    width: 100%;
    height: 80%;
    padding: calc(var(--frame-w) * 44 / 1920) calc(var(--frame-w) * 68 / 1920) calc(var(--frame-w) * 56 / 1920) calc(var(--frame-w) * 296 / 1920);
    border-radius: calc(var(--frame-w) * 15 / 1920);
    background: var(--cti-image-result-paper) center / 100% 100% no-repeat;
    box-shadow: none;
    color: #17120c;
    pointer-events: auto;
}

.cti-test .cti-step--3 .result-paper::before {
    content: none;
}

.cti-test .cti-step--3 .result-heading {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 0;
    margin: 0;
    transform: translate(-50%, 30%);
    width: max-content;
    max-width: none;
    padding: calc(var(--frame-w) * 16 / 1920) calc(var(--frame-w) * 52 / 1920) calc(var(--frame-w) * 18 / 1920);
    border-radius: calc(var(--frame-w) * 13 / 1920);
    background: var(--result-accent);
    color: #fff;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(28px,
            min(3.2vw, calc(var(--frame-w) * 56 / 1920)),
            56px);
    line-height: 1.08;
    letter-spacing: 0;
    white-space: nowrap !important;
    pointer-events: auto;
    user-select: text;
}

.cti-test .cti-step--3 .result-portrait {
    z-index: 5;
    left: -7.2%;
    top: 2.8%;
    width: 28.2%;
    height: auto;
    max-height: 45%;
    object-fit: contain;
    object-position: center top;
    transform: rotate(-8deg);
}

.cti-test .cti-step--3 .result-card h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 calc(var(--frame-w) * 18 / 1920);
    font-family: "Niconne", "EB Garamond", Georgia, serif;
    font-style: normal;

    font-size: calc(var(--frame-w) * 70 / 1920);
    line-height: calc(var(--frame-w) * 78 / 1920);
}

.cti-test .cti-step--3 .type-section,
.cti-test .cti-step--3 .rule,
.cti-test .cti-step--3 .dashed {
    position: relative;
    z-index: 2;
}

.cti-test .cti-step--3 .rule-top {
    width: auto;
    height: calc(var(--frame-w) * 10 / 1920);
    border-top: calc(var(--frame-w) * 3 / 1920) solid #111;
    border-bottom: calc(var(--frame-w) * 3 / 1920) solid #111;
    margin-left: calc(var(--frame-w) * -245 / 1920);
    margin-right: var(--result-content-right-margin);
    margin-bottom: calc(var(--frame-w) * 20 / 1920);
}

.cti-test .cti-step--3 .dashed {
    width: auto;
    border-top: calc(var(--frame-w) * 1 / 1920) dashed rgba(0, 0, 0, .35);
    margin:
        calc(var(--frame-w) * 22 / 1920) var(--result-content-right-margin) calc(var(--frame-w) * 18 / 1920) calc(var(--frame-w) * -245 / 1920);
}

.cti-test .cti-step--3 .type-section.core+.dashed {
    margin-top: calc(var(--frame-w) * 44 / 1920);
}

.cti-test .cti-step--3 .type-section h3 {
    margin: 0 0 calc(var(--frame-w) * 8 / 1920);
    font-family: "CourierLocal", "Courier New", monospace;
    font-weight: 700;
}

.cti-test .cti-step--3 .type-section p {
    margin: 0;
    max-width: none;
    font-family: "Poppins", Arial, sans-serif;
    color: #65605c;
}

.cti-test .cti-step--3 .type-section.core {
    margin-right: var(--result-content-right-margin);
}

.cti-test .cti-step--3 .type-section.hidden-type {
    margin-left: calc(var(--frame-w) * -242 / 1920);
    margin-right: var(--result-content-right-margin);
}

.cti-test .cti-step--3 .type-section.hidden-type p {
    max-width: none;
}

.cti-test .cti-step--3 .download-button,
.cti-test .cti-step--3 .share-button {
    position: static;
    width: calc(var(--frame-w) * 59 / 1920);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    user-select: text;
    display: grid;
    place-items: center;
    padding: 0;
    pointer-events: auto;
}

.cti-test .cti-step--3 .result-actions {
    position: absolute;
    z-index: 8;
    right: calc(var(--frame-w) * 42 / 1920);
    bottom: calc(var(--frame-w) * 95 / 1920);
    display: flex;
    align-items: center;
    gap: calc(var(--frame-w) * 21 / 1920);
    pointer-events: auto;
}

.cti-test .cti-step--3 .new-test-button {
    position: static;
    width: clamp(78px, calc(var(--frame-w) * 108 / 1920), 108px);
    height: clamp(44px, calc(var(--frame-w) * 59 / 1920), 59px);
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    display: grid;
    place-items: center;
    padding: 0 14px;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(12px, calc(var(--frame-w) * 15 / 1920), 15px);
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

.cti-test .cti-step--3 .new-test-button:focus-visible {
    outline: calc(var(--frame-w) * 3 / 1920) solid var(--result-accent);
    outline-offset: calc(var(--frame-w) * 3 / 1920);
}

.cti-test .cti-step--3 .type-section h3 span {
    color: var(--result-accent);
}

.cti-test .cti-step--3 .download-button {
    right: auto;
}

.cti-test .cti-step--3 .share-button {
    right: auto;
}

.cti-test .cti-step--3 .download-button img,
.cti-test .cti-step--3 .share-button img {
    width: 100%;
    height: 100%;
    display: block;
}

.cti-test .cti-step--3 .result-modal-layer {
    z-index: 30;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, .8);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
    pointer-events: none;
}

.cti-test .cti-step--3 .result-scroll {
    z-index: 1;
    inset: 0;
    overflow: hidden;
}

.cti-test .cti-step--3 .result-scene.modal-open .result-modal-layer {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

.cti-test .cti-step--3 .result-modal {
    position: relative;
    width: clamp(520px, calc(var(--frame-w) * 600 / 1920), 600px);
    min-height: clamp(300px, calc(var(--frame-w) * 300 / 1920), 360px);
    display: none;
    grid-template-columns:
        minmax(300px, 1fr) clamp(100px, calc(var(--frame-w) * 125 / 1920), 125px);
    gap: calc(var(--frame-w) * 28 / 1920);
    padding: calc(var(--frame-w) * 44 / 1920) calc(var(--frame-w) * 38 / 1920) calc(var(--frame-w) * 38 / 1920) calc(var(--frame-w) * 50 / 1920);
    border-radius: calc(var(--frame-w) * 14 / 1920);
    background: #fff;
    color: #171717;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.cti-test .cti-step--3 .result-scene.show-share-modal .share-modal,
.cti-test .cti-step--3 .result-scene.show-save-modal .save-modal {
    display: grid;
}

.cti-test .cti-step--3 .modal-close {
    position: absolute;
    right: calc(var(--frame-w) * -12 / 1920);
    top: calc(var(--frame-w) * -14 / 1920);
    width: calc(var(--frame-w) * 44 / 1920);
    height: calc(var(--frame-w) * 44 / 1920);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #555;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    padding: 0;
}

.cti-test .cti-step--3 .modal-close::before,
.cti-test .cti-step--3 .modal-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--frame-w) * 20 / 1920);
    height: calc(var(--frame-w) * 2.6 / 1920);
    border-radius: 999px;
    background: #fff;
    transform-origin: 50% 50%;
}

.cti-test .cti-step--3 .modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cti-test .cti-step--3 .modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cti-test .cti-step--3 .modal-copy,
.cti-test .cti-step--3 .modal-copy * {
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.cti-test .cti-step--3 .modal-copy h2 {
    margin: 0 0 calc(var(--frame-w) * 24 / 1920);
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
}

.cti-test .cti-step--3 .modal-copy p {
    margin: 0 0 calc(var(--frame-w) * 20 / 1920);
    font-family: "Poppins", Arial, sans-serif;
}

.cti-test .cti-step--3 .save-modal .modal-copy p {}

.cti-test .cti-step--3 .modal-strong {
    font-weight: 500;
}

.cti-test .cti-step--3 .community-link {
    display: inline;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: .07em;
    text-underline-offset: .18em;
    text-decoration-skip-ink: none;
}

@media (hover: hover) and (pointer: fine) {
    .cti-test .cti-step--3 .community-link {
        text-decoration-line: none;
    }

    .cti-test .cti-step--3 .community-link:hover,
    .cti-test .cti-step--3 .community-link:focus-visible {
        text-decoration-line: underline;
    }
}

.cti-test .cti-step--3 .community-link:focus-visible {
    outline: calc(var(--frame-w) * 2 / 1920) solid var(--result-accent);
    outline-offset: calc(var(--frame-w) * 3 / 1920);
}

.cti-test .cti-step--3 .social-icons {
    display: flex;
    gap: calc(var(--frame-w) * 16 / 1920);
    margin-bottom: calc(var(--frame-w) * 18 / 1920);
}

.cti-test .cti-step--3 .social-icons a,
.cti-test .cti-step--3 .social-icons button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.cti-test .cti-step--3 .social-icons a:focus-visible,
.cti-test .cti-step--3 .social-icons button:focus-visible {
    outline: calc(var(--frame-w) * 2 / 1920) solid var(--result-accent);
    outline-offset: calc(var(--frame-w) * 3 / 1920);
}

.cti-test .cti-step--3 .social-icons button:disabled {
    cursor: progress;
    opacity: .48;
}

.cti-test .cti-step--3 .social-icons img,
.cti-test .cti-step--3 .social-icons .social-icon,
.cti-test .cti-step--3 .social-icons svg,
.cti-test .cti-step--3 .copy-field img {
    width: 32px;
    height: 32px;
    display: block;
}

.cti-test .cti-step--3 .social-icons .social-icon {
    display: grid;
    place-items: center;
}

.cti-test .cti-step--3 .social-icons [data-cti-share-channel="x"] .social-icon svg,
.cti-test .cti-step--3 .social-icons [data-cti-share-channel="pinterest"] .social-icon svg {
    width: 20px;
    height: 20px;
}

.cti-test .cti-step--3 .copy-field button {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--frame-w) * 20 / 1920);
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.cti-test .cti-step--3 .copy-field button::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #2f6b45;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.65);
    transition: opacity 160ms ease, transform 160ms ease;
}

.cti-test .cti-step--3 .copy-field button img {
    width: 18px;
    transition: opacity 140ms ease, transform 140ms ease;
}

.cti-test .cti-step--3 .copy-field button.is-copied img {
    opacity: 0;
    transform: scale(.65);
}

.cti-test .cti-step--3 .copy-field button.is-copied::after {
    opacity: 1;
    transform: scale(1);
}

.cti-test .cti-step--3 .copy-field,
.cti-test .cti-step--3 .email-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--frame-w) * 12 / 1920);
    padding: .5rem calc(var(--frame-w) * 11 / 1920);
    border: calc(var(--frame-w) * 1 / 1920) solid currentColor;
    border-radius: calc(var(--frame-w) * 5 / 1920);
    background: rgba(255, 255, 255, .82);
    color: #23170a;
    font-family: "Poppins", Arial, sans-serif;
}

.cti-test .cti-step--3 .copy-field {
    transition: border-color 160ms ease, background-color 160ms ease;
}

.cti-test .cti-step--3 .copy-field>span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cti-test .cti-step--3 .copy-field[data-copy-state="success"] {
    border-color: #3f7955;
    background: rgba(255, 250, 242, .98);
}

.cti-test .cti-step--3 .copy-field[data-copy-state="error"] {
    border-color: #a33a2b;
    background: rgba(255, 250, 242, .98);
}

.cti-test .cti-step--3 .modal-copy .copy-feedback {
    min-height: calc(var(--frame-w) * 18 / 1920);
    margin: calc(var(--frame-w) * 7 / 1920) 0 0;
    color: inherit;
    font-size: clamp(11px, calc(var(--frame-w) * 12 / 1920), 12px);
    line-height: clamp(15px, calc(var(--frame-w) * 16 / 1920), 16px);
}

.cti-test .cti-step--3 .modal-copy .copy-feedback:empty {
    display: none;
}

.cti-test .cti-step--3 .modal-copy .copy-feedback:not(:empty) {
    padding: calc(var(--frame-w) * 7 / 1920) calc(var(--frame-w) * 9 / 1920);
    border-left: calc(var(--frame-w) * 3 / 1920) solid #3f7955;
    border-radius: calc(var(--frame-w) * 4 / 1920);
    background: rgba(255, 250, 242, .98);
    color: #245536;
    font-weight: 600;
}

.cti-test .cti-step--3 .modal-copy .copy-feedback[data-state="error"] {
    border-left-color: #a33a2b;
    color: #7b241b;
}

.cti-test .cti-step--3 .email-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
}

.cti-test .cti-step--3 .save-modal .email-field {}

.cti-test .cti-step--3 .save-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.cti-test .cti-step--3 .save-form .email-field {
    flex: 0 0 100%;
}

.cti-test .cti-step--3 .email-field:focus-within {
    outline: calc(var(--frame-w) * 2 / 1920) solid var(--result-accent);
    outline-offset: calc(var(--frame-w) * 2 / 1920);
}

.cti-test .cti-step--3 .save-submit {
    margin-top: calc(var(--frame-w) * 15 / 1920);
    border: 0;
    background: #000;
    color: #fff;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-width: clamp(132px, calc(var(--frame-w) * 210 / 1920), 210px);
    min-height: clamp(42px, calc(var(--frame-w) * 50 / 1920), 50px);
    padding: 0 clamp(22px, calc(var(--frame-w) * 30 / 1920), 30px);
    line-height: 1;
    font-family: "Poppins", Arial, sans-serif;

    cursor: pointer;
}

.cti-test .cti-step--3 .save-submit[aria-disabled="true"] {
    cursor: default;
    opacity: .72;
}

.cti-test .cti-step--3 .save-form[data-state="sending"] .save-submit {
    cursor: wait;
}

.cti-test .cti-step--3 .save-form[data-state="success"] .save-submit {
    background: #2f6c47;
    opacity: 1;
}

.cti-test .cti-step--3 .save-form[data-state="success"] .email-field,
.cti-test .cti-step--3 .save-form[data-state="success"] .save-submit {
    display: none;
}

.cti-test .cti-step--3 .save-form[data-state="error"] .email-field {
    border-color: #a52218;
}

.cti-test .cti-step--3 .save-email-feedback {
    min-height: 0;
    margin: calc(var(--frame-w) * 15 / 1920) 0 0 calc(var(--frame-w) * 12 / 1920);
    color: #245536;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(11px, calc(var(--frame-w) * 12 / 1920), 13px);
    font-weight: 600;
    line-height: 1.4;
}

.cti-test .cti-step--3 .save-email-feedback:empty {
    display: none;
}

.cti-test .cti-step--3 .save-email-feedback[data-state] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cti-test .cti-step--3 .save-email-feedback[data-state="success"] {
    display: block;
    flex: 0 0 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2f6b45;
    font-size: inherit;
    font-weight: 500;
    padding: 0;
}

.cti-test .cti-step--3 .save-email-feedback[data-state="sending"] {
    border-left-color: #8a641d;
    color: #6f4c0d;
}

.cti-test .cti-step--3 .save-email-feedback[data-state="error"] {
    color: #a52218;
    font-weight: 500;
}

.cti-test .cti-step--3 .modal-character {
    position: relative;
    width: calc(var(--frame-w) * 118 / 1920);
    max-width: 100%;
    height: auto;
    max-height: calc(var(--frame-w) * 230 / 1920);
    align-self: end;
    justify-self: center;
    object-fit: contain;
    object-position: center bottom;
}

@media (min-width: 901px) {
    .cti-test .cti-step--3 .result-modal {
        width: clamp(620px, calc(var(--frame-w) * 700 / 1920), 700px);
        height: auto;
        min-height: 0;
        gap: 0;
        grid-template-columns:
            minmax(300px, 1fr) clamp(220px, calc(var(--frame-w) * 210 / 1920), 210px);
        align-items: center;
    }

    .cti-test .cti-step--3 .result-modal .modal-character {
        width: auto;
        max-width: none;
        height: 100%;
        max-height: none;
        min-width: 0;
        min-height: 0;
        align-self: center;
        justify-self: stretch;
        object-fit: contain;
        object-position: center bottom;
    }

    .cti-test[data-cti-result-type="storyteller"] .cti-step--3 .result-modal .modal-character {
        width: 100%;
        height: clamp(300px, calc(var(--frame-w) * 330 / 1920), 330px);
        max-height: 330px;
    }
}

.cti-test .cti-step--3 .result-tags {
    position: absolute;
    z-index: 7;
    left: 8.6%;
    right: 23.5%;
    bottom: -1.8%;
    display: flex;
    justify-content: center;
    gap: calc(var(--frame-w) * 22 / 1920);
    transform: translateX(calc(var(--frame-w) * -50 / 1920));
    pointer-events: auto;
}

.cti-test .cti-step--3 .result-tags span {
    min-width: calc(var(--frame-w) * 162 / 1920);
    padding: calc(var(--frame-w) * 12 / 1920) calc(var(--frame-w) * 28 / 1920);
    border-radius: 999px;
    background: var(--result-accent);
    color: #fff;
    text-align: center;
    font-family: "CourierLocal", "Courier New", monospace;
    font-weight: 700;
    font-size: calc(var(--frame-w) * 24 / 1920);
    line-height: calc(var(--frame-w) * 30 / 1920);
    transform: rotate(-9deg);
    user-select: text;
}

.cti-test .cti-step--3 .result-tags span:nth-child(2) {
    transform: rotate(0deg);
}

.cti-test .cti-step--3 .result-tags span:nth-child(3) {
    transform: rotate(0deg);
}

.cti-test .cti-step--3 .stage.show-result> :not(.result-scene) {
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes cti-s3-brownIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s3-bulbPeek {
    0% {
        opacity: 0;
        transform: translateY(-32%) scaleX(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

@keyframes cti-s3-beamDrop {
    0% {
        opacity: 1;
        clip-path: inset(0 0 92% 0);
        transform: translate3d(0, -1px, 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes cti-s3-bulbDropFromShade {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--frame-w) * -82 / 1920)) scale(.96);
    }

    18% {
        opacity: 1;
    }

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

@keyframes cti-s3-stripIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cti-s3-contentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cti-s3-navIn {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes cti-s3-resultBgIn {
    to {
        opacity: 1;
    }
}

@keyframes cti-s3-resultLayerIn {
    to {
        opacity: var(--target-opacity, 1);
        transform: translateY(0);
    }
}

@keyframes cti-s3-quizLampSmoothExit {
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes cti-s3-lightSwing {

    0%,
    100% {
        transform: rotate(-2.1deg) translate3d(-0.55%, 0, 0) scaleX(1.24);
    }

    50% {
        transform: rotate(2.1deg) translate3d(0.55%, 0, 0) scaleX(1.24);
    }
}

@keyframes cti-s3-choiceIn {
    to {
        opacity: var(--final-opacity);
        transform: translateY(0);
    }
}

@keyframes cti-s3-questionRefresh {
    from {
        opacity: .55;
        transform: translateY(calc(var(--frame-w) * 10 / 1920));
    }

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

@media (max-aspect-ratio: 16 / 9) {
    .cti-test .cti-step--3 {
        --frame-w: 100vw;
    }
}

@media (min-aspect-ratio: 16 / 9) {
    .cti-test .cti-step--3 {
        --frame-w: calc(100vh * 16 / 9);
        --frame-w: calc(100dvh * 16 / 9);
    }
}

@media (max-width: 760px) {
    .cti-test .cti-step--3 {
        overflow: hidden;
    }

    .cti-test .cti-step--3 .bulb {
        width: 34%;
        left: 33%;
    }

    .cti-test .cti-step--3 .question-panel {
        left: 6%;
        right: 6%;
        top: 13%;
        bottom: 12%;
        overflow-y: auto;
        justify-content: flex-start;
    }

    .cti-test .cti-step--3 .quiz-title {
        left: 5%;
        top: 3.5%;
        width: 34%;
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.12;
    }

    .cti-test .cti-step--3 .progress-row {
        gap: 8px;
        margin-bottom: 8px;
        transform: none;
    }

    .cti-test .cti-step--3 .progress-icon {
        width: 24px;
        height: 24px;
    }

    .cti-test .cti-step--3 .progress {
        font-size: 16px;
        line-height: 20px;
    }

    .cti-test .cti-step--3 .story {
        width: 100%;
        max-height: none;
        overflow: visible;
        font-size: 15px;
        line-height: 20px;
    }

    .cti-test .cti-step--3 .prompt {
        flex-direction: column;
        gap: 3px;
        margin: 12px 0;
    }

    .cti-test .cti-step--3 .prompt strong {
        font-size: 16px;
        line-height: 20px;
    }

    .cti-test .cti-step--3 .prompt span {
        font-size: 12px;
        line-height: 16px;
    }

    .cti-test .cti-step--3 .choices {
        width: 100%;
        min-height: 0;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 10px;
    }

    .cti-test .cti-step--3 .choice {
        box-sizing: border-box;
        flex: 0 0 100%;
        width: 100%;
        min-height: 72px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .cti-test .cti-step--3 .choices[data-choice-count="4"] .choice,
    .cti-test .cti-step--3 .choices[data-choice-count="5"] .choice,
    .cti-test .cti-step--3 .choices[data-choice-count="6"] .choice {
        flex-basis: calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        min-height: 96px;
        padding: 12px 14px;
    }

    .cti-test .cti-step--3 .choice strong {
        font-size: 15px;
        line-height: 19px;
    }

    .cti-test .cti-step--3 .choice small {
        font-size: 13px;
        line-height: 17px;
    }

    .cti-test .cti-step--3 .choice-group {
        margin-bottom: 3px;
        font-size: 11px;
        line-height: 14px;
    }

    .cti-test .cti-step--3 .quiz-nav {
        bottom: 2.5%;
        gap: 10px;
    }

    .cti-test .cti-step--3 .back-link,
    .cti-test .cti-step--3 .next-link {
        width: 132px;
        height: 42px;
        font-size: 15px;
        line-height: 18px;
    }

    .cti-test .cti-step--3 .save-modal {
        width: min(90vw, 520px);
        max-height: 88vh;
        max-height: 88dvh;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 28px 24px 24px;
        border-radius: 12px;
        overflow-y: auto;
    }

    .cti-test .cti-step--3 .save-modal .modal-copy {
        min-width: 0;
    }

    .cti-test .cti-step--3 .save-modal .modal-copy h2 {
        margin-bottom: 14px;
        font-size: 24px;
        line-height: 29px;
    }

    .cti-test .cti-step--3 .save-modal .modal-copy>p {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 19px;
    }

    .cti-test .cti-step--3 .save-modal .email-field {
        width: 100%;
    }

    .cti-test .cti-step--3 .save-modal .email-field {
        min-height: 44px;
        padding: 0 12px;
        border-width: 1px;
        border-radius: 6px;
    }

    .cti-test .cti-step--3 .save-modal .save-submit {
        width: 176px;
        height: 44px;
        margin-top: 14px;
    }

    .cti-test .cti-step--3 .save-modal .save-character {
        display: none;
    }

    .cti-test .cti-step--3 .save-modal .modal-close {
        right: -8px;
        top: -12px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 900px),
(orientation: portrait) and (max-width: 1024px) {
    .cti-test>.cti-page-close {
        top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
        right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px));
    }

    .cti-test .cti-step--3 .result-scene::before {
        background:
            var(--cti-image-result-bg-mobile,
                var(--cti-image-result-bg-desktop, var(--cti-image-result-bg))) center / cover no-repeat;
    }

    .cti-test .cti-step--3 .result-scroll {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 16px calc(132px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .55) transparent;
    }

    .cti-test .cti-step--3 .result-scroll::-webkit-scrollbar {
        width: 2px;
    }

    .cti-test .cti-step--3 .result-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .cti-test .cti-step--3 .result-scroll::-webkit-scrollbar-thumb {
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .55);
    }

    .cti-test .cti-step--3 .result-scroll::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    .cti-test .cti-step--3 .result-spotlight-img {
        display: none;
    }

    .cti-test .cti-step--3 .result-scroll>.result-character,
    .cti-test .cti-step--3 .result-scroll>.result-prop {
        display: none;
    }

    .cti-test .cti-step--3 .result-card {
        position: relative;
        left: auto;
        top: auto;
        width: min(calc(100vw - 32px), 560px);
        height: auto;
        margin: 138px auto 0;
    }

    .cti-test .cti-step--3 .result-paper {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(86px, 30%);
        grid-template-areas:
            "rule rule"
            "name name"
            "tags tags"
            "core character"
            "hidden hidden";
        column-gap: 12px;
        align-items: start;
        padding: 24px 22px 26px;
        border-radius: 10px;
        background:
            var(--cti-image-result-paper-mobile, var(--cti-image-result-paper)) center / 100% 100% no-repeat;
        box-shadow: none;
        overflow: visible;
    }

    .cti-test .cti-step--3 .result-heading {
        z-index: 6;
        left: 2px;
        top: -70px;
        width: auto;
        max-width: calc(100vw - 36px);
        padding: 0;
        border-radius: 0;
        background: transparent;
        font-size: clamp(29px, 8.4vw, 38px);
        line-height: 1.08;
        white-space: nowrap;
        transform: none;
        text-shadow: 0 2px 2px rgba(0, 0, 0, .18);
    }

    .cti-test .cti-step--3 .result-portrait {
        z-index: 8;
        left: -14px;
        top: -27px;
        width: clamp(116px, 33vw, 148px);
        height: auto;
        max-height: none;
        transform: rotate(-8deg);
    }

    .cti-test .cti-step--3 .result-card h2 {
        grid-area: name;
        margin: 4px 0 0;
        padding-left: 35%;
        min-width: 0;
        max-width: 100%;
        font-family: "Niconne", cursive;
        font-size: clamp(34px, 9vw, 46px);
        line-height: 1;
        white-space: normal;
    }

    .cti-test .cti-step--3 .rule-top {
        grid-area: rule;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: 8px;
        margin-bottom: 8px;
        border-top-width: 2px;
        border-bottom-width: 2px;
    }

    .cti-test .cti-step--3 .dashed {
        display: none;
    }

    .cti-test .cti-step--3 .result-character-mobile {
        grid-area: character;
        display: block;
        width: 100%;
        height: clamp(210px, 61vw, 255px);
        align-self: end;
        object-fit: contain;
        object-position: center bottom;
        transform: scale(1.5);
        transform-origin: center bottom;
    }

    .cti-test .cti-step--3 .type-section.core {
        grid-area: core;
        margin-right: 0;
    }

    .cti-test .cti-step--3 .type-section.hidden-type {
        grid-area: hidden;
        margin-top: 16px;
        margin-left: 0;
        margin-right: 0;
        padding-top: 15px;
        padding-right: 0px;
        border-top: 1px dashed rgba(0, 0, 0, .24);
    }

    .cti-test .cti-step--3 .type-section.hidden-type h3 {
        width: calc(100% + 58px);
    }

    .cti-test .cti-step--3 .type-section p,
    .cti-test .cti-step--3 .type-section.hidden-type p {
        max-width: none;
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.34;
    }

    .cti-test .cti-step--3 .type-section h3 {
        margin-bottom: 6px;
        font-size: clamp(15px, 4.2vw, 18px);
        line-height: 1.25;
    }

    .cti-test .cti-step--3 .result-paper-prop {
        position: absolute;
        z-index: 4;
        display: block;
        width: auto;
        height: 68px;
        max-width: 24%;
        object-fit: contain;
    }

    .cti-test .cti-step--3 .result-paper-prop--1 {
        z-index: 12;
        right: -8px;
        bottom: -28px;
    }

    .cti-test .cti-step--3 .result-paper-prop--2 {
        display: none !important;
    }

    .cti-test .cti-step--3 .result-paper-prop[hidden] {
        display: none !important;
    }

    .cti-test .cti-step--3 .result-actions {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 44px;
        justify-content: flex-end;
        gap: 8px;
        margin: 14px 0 0;
        padding: 0 8px;
    }

    .cti-test .cti-step--3 .download-button,
    .cti-test .cti-step--3 .share-button {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .cti-test .cti-step--3 .new-test-button {
        width: 88px;
        height: 44px;
        padding: 0 12px;
        font-size: 13px;
    }

    .cti-test .cti-step--3 .result-tags {
        grid-area: tags;
        position: relative;
        z-index: 9;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        justify-content: flex-start;
        margin: 10px 0 28px 35%;
        padding: 0;
        flex-wrap: wrap;
        gap: 7px;
        transform: none;
    }

    .cti-test .cti-step--3 .result-tags span {
        min-width: 0;
        padding: 5px 11px;
        font-size: clamp(11px, 3.2vw, 13px);
        line-height: 16px;
        transform: none;
    }

    .cti-test .cti-step--3 .result-tags span:nth-child(1),
    .cti-test .cti-step--3 .result-tags span:nth-child(2),
    .cti-test .cti-step--3 .result-tags span:nth-child(3) {
        transform: none;
    }

    .cti-test .cti-step--3 .result-match-card {
        position: relative;
        width: 100%;
        min-height: 166px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        margin-top: 10px;
        padding: 18px 72px 18px 115px;
        border-radius: 10px;
        background:
            var(--cti-image-hidden-match-bg, none) center / cover no-repeat,
            var(--hidden-result-accent, #8b5546);
        color: #fffaf1;
        overflow: hidden;
    }

    .cti-test .cti-step--3 .result-match-card[hidden] {
        display: none !important;
    }

    .cti-test .cti-step--3 .result-match-avatar {
        position: absolute;
        z-index: 2;
        left: 8px;
        bottom: -4px;
        width: 104px;
        height: 154px;
        object-fit: contain;
        object-position: center bottom;
        transform: scale(1.1);
        transform-origin: left bottom;
    }

    .cti-test .cti-step--3 .result-match-copy {
        position: relative;
        z-index: 3;
        grid-column: 1;
        min-width: 0;
        text-align: center;
    }

    .cti-test .cti-step--3 .result-match-copy h3 {
        margin: 0 0 2px;
        color: inherit;
        font-family: "CourierLocal", "Courier New", monospace;
        font-size: 15px;
        line-height: 20px;
    }

    .cti-test .cti-step--3 .result-match-copy>p {
        margin: 0 0 10px;
        color: inherit;
        font-family: "Niconne", cursive;
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1;
    }

    .cti-test .cti-step--3 .result-match-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 7px;
    }

    .cti-test .cti-step--3 .result-match-tags span {
        min-width: 0;
        padding: 5px 10px;
        border-radius: 999px;
        background: #f8dca2;
        color: #21160d;
        font-family: "CourierLocal", "Courier New", monospace;
        font-size: 11px;
        line-height: 15px;
        font-weight: 700;
    }

    .cti-test .cti-step--3 .result-match-prop {
        display: none !important;
    }

    .cti-test .cti-step--3 .result-modal {
        width: min(90vw, 520px);
        height: auto;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 56px 24px 24px;
        border-radius: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        background-size: cover;
    }

    .cti-test .cti-step--3 .result-modal .modal-copy {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    .cti-test .cti-step--3 .result-modal .modal-copy h2 {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 29px;
    }

    .cti-test .cti-step--3 .result-modal .modal-copy p,
    .cti-test .cti-step--3 .save-modal .modal-copy p {
        margin-bottom: 16px;
    }

    .cti-test .cti-step--3 .social-icons {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 18px;
    }

    .cti-test .cti-step--3 .social-icons a,
    .cti-test .cti-step--3 .social-icons button {
        width: 40px;
        height: 40px;
        min-height: 40px;
        flex-basis: 40px;
        padding: 0;
    }

    .cti-test .cti-step--3 .modal-copy .copy-feedback:not(:empty) {
        padding: 7px 9px;
        border-radius: 5px;
    }

    .cti-test .cti-step--3 .modal-copy .copy-feedback:not(:empty) {
        border-left-width: 3px;
    }

    .cti-test .cti-step--3 .copy-field,
    .cti-test .cti-step--3 .email-field,
    .cti-test .cti-step--3 .save-modal .email-field {
        width: 100%;
        max-width: none;
    }

    .cti-test .cti-step--3 .copy-field,
    .cti-test .cti-step--3 .email-field,
    .cti-test .cti-step--3 .save-modal .email-field {
        min-height: 44px;
        padding: 0 12px;
        border-width: 1px;
        border-radius: 6px;
    }

    .cti-test .cti-step--3 .copy-field>span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cti-test .cti-step--3 .copy-field button {
        width: 24px;
    }

    .cti-test .cti-step--3 .modal-copy .copy-feedback {
        min-height: 18px;
        margin-top: 8px;
        font-size: 12px;
        line-height: 16px;
    }

    .cti-test .cti-step--3 .save-modal .save-submit {
        width: 176px;
        height: 44px;
        margin-top: 14px;
        font-size: 14px;
        line-height: 18px;
    }

    .cti-test .cti-step--3 .result-modal .modal-close,
    .cti-test .cti-step--3 .save-modal .modal-close {
        z-index: 4;
        right: 8px;
        top: 8px;
        width: 40px;
        height: 40px;
    }

    .cti-test .cti-step--3 .modal-close::before,
    .cti-test .cti-step--3 .modal-close::after {
        width: 20px;
        height: 2.5px;
    }

    .cti-test .cti-step--3 .result-modal .modal-character,
    .cti-test .cti-step--3 .save-modal .save-character {
        position: absolute;
        z-index: 0;
        right: 8px;
        bottom: 8px;
        display: none;
        width: 78px;
        max-width: 24vw;
        height: 132px;
        opacity: .2;
        object-fit: contain;
        object-position: right bottom;
    }
}

@media (max-width: 480px) {

    .cti-test .cti-step--3 .choices[data-choice-count="4"] .choice,
    .cti-test .cti-step--3 .choices[data-choice-count="5"] .choice,
    .cti-test .cti-step--3 .choices[data-choice-count="6"] .choice {
        flex-basis: 100%;
        width: 100%;
        min-height: 72px;
        padding: 12px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cti-test .cti-step--3 *,
    .cti-test .cti-step--3 *::before,
    .cti-test .cti-step--3 *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

.cti-test .cti-step--3 h1,
.cti-test .cti-step--3 h2,
.cti-test .cti-step--3 h3,
.cti-test .cti-step--3 p,
.cti-test .cti-step--3 span,
.cti-test .cti-step--3 strong,
.cti-test .cti-step--3 small,
.cti-test .cti-step--3 a,
.cti-test .cti-step--3 button,
.cti-test .cti-step--3 .question-panel,
.cti-test .cti-step--3 .question-panel *,
.cti-test .cti-step--3 .choice,
.cti-test .cti-step--3 .choice *,
.cti-test .cti-step--3 .next-link,
.cti-test .cti-step--3 .quiz-title,
.cti-test .cti-step--3 .quiz-title *,
.cti-test .cti-step--3 .result-scene,
.cti-test .cti-step--3 .result-scene *,
.cti-test .cti-step--3 .result-card,
.cti-test .cti-step--3 .result-card * {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* CRAFT-TI mobile pre-result layout */
@media (max-width: 760px) {
    .cti-test .cti-step--2 .hand-key .key {
        top: 27%
    }

    .cti-test .cti-step--1 {
        --mobile-ground-height: 11.5%;
        --mobile-mailbox-width: min(64vw, 30dvh, 260px);
        --mobile-mailbox-height: min(135.4vw, 63.5dvh, 550px);
        --letter-bob: 7px;
    }

    .cti-test .cti-step--1 .stage {
        min-height: 100%;
    }

    .cti-test .cti-step--1 .blue-bg {
        background-position: center top;
    }

    .cti-test .cti-step--1 .green-field {
        bottom: var(--mobile-ground-height);
        height: 49.5%;
        object-fit: cover;
        object-position: center;
    }

    .cti-test .cti-step--1 .brown-strip {
        height: calc(var(--mobile-ground-height) + 1px);
        object-fit: cover;
    }

    .cti-test .cti-step--1 .page-title {
        left: 10%;
        top: max(34px, calc(env(safe-area-inset-top, 0px) + 28px));
        width: min(78vw, 340px);
        font-size: clamp(40px, 12.2vw, 52px);
        line-height: .94;
        letter-spacing: -.035em;
    }

    .cti-test .cti-step--1 .mailbox-body {
        left: 50%;
        bottom: var(--mobile-ground-height);
        width: var(--mobile-mailbox-width);
        translate: -50% 0;
    }

    .cti-test .cti-step--1 .mailbox-roof {
        left: 50%;
        top: auto;
        bottom: calc(var(--mobile-ground-height) + var(--mobile-mailbox-height) - min(15vw, 8dvh, 62px));
        width: min(50vw, 24dvh, 205px);
        translate: -50% 0;
    }

    .cti-test .cti-step--1 .letter-trigger {
        z-index: 24;
        left: 62.5%;
        top: auto;
        bottom: calc(var(--mobile-ground-height) + var(--mobile-mailbox-height) - min(22vw, 12dvh, 92px));
        width: min(27vw, 14dvh, 110px);
    }

    .cti-test .cti-step--1 .dog {
        display: none;
    }

    .cti-test .cti-step--1 .grass-large {
        left: auto;
        right: 3%;
        bottom: var(--mobile-ground-height);
        width: min(16vw, 9dvh, 68px);
    }

    .cti-test .cti-step--1 .grass-small {
        left: 2%;
        bottom: var(--mobile-ground-height);
        width: min(14vw, 7dvh, 58px);
    }

    .cti-test .cti-step--1 .mailbox-ground-mask {
        left: 28%;
        bottom: 0;
        width: 44%;
        height: calc(var(--mobile-ground-height) + 1px);
        background-size: auto 100%;
    }

    .cti-test .cti-step--2 .scene-bg {
        left: 0;
        top: -17.647%;
        width: 100%;
        height: 117.647%;
        object-fit: cover;
        object-position: center top;
    }

    .cti-test .cti-step--2 .stage::before {
        inset: 0 0 auto;
        z-index: 2;
        height: 17.5%;
        background: #4b2908 var(--cti-image-brown-paper) center / cover no-repeat;
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 68%);
    }

    .cti-test .cti-step--2 .stage::after {
        content: "";
        position: absolute;
        z-index: 6;
        left: 0;
        right: 0;
        bottom: 0;
        height: 13%;
        background: #4b2908 var(--cti-image-brown-paper) center / cover no-repeat;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
        pointer-events: none;
    }

    .cti-test .cti-step--2 .scene-title {
        left: 7%;
        top: max(30px, calc(env(safe-area-inset-top, 0px) + 24px));
        width: min(80vw, 340px);
        font-size: clamp(40px, 12vw, 52px);
        line-height: .98;
        letter-spacing: -.025em;
    }

    .cti-test .cti-step--2 .lamp-built {
        z-index: 19;
        left: 61%;
        top: auto;
        bottom: 2.8%;
        width: min(24vw, 104px);
        height: min(41dvh, 320px);
    }

    .cti-test .cti-step--2 .chest {
        left: 22%;
        right: auto;
        bottom: 13%;
        width: min(20vw, 88px);
    }

    .cti-test .cti-step--2 .hand-key {
        z-index: 28;
        left: auto;
        right: 0;
        top: 11%;
        width: min(36vw, 160px);
        height: min(21dvh, 188px);
    }

    .cti-test .cti-step--2 .letter-card {
        left: 20%;
        right: 10.5%;
        top: 24%;
        bottom: auto;
        width: auto;
        height: 45.5%;
        transform: translateY(18px);
        animation-name: cti-s2-letterMobileIn;
    }

    .cti-test .cti-step--2 .letter-copy {
        font-size: var(--text-xs);
    }

    .cti-test .cti-step--2 .letter-scroll {
        inset: 7% 7.5% 18% 8.5%;
        padding-right: 8px;
        scrollbar-gutter: auto;
    }

    .cti-test .cti-step--2 .letter-scroll::-webkit-scrollbar {
        width: 3px;
    }

    .cti-test .cti-step--2 .gate-button {
        left: 8%;
        bottom: 7%;
        width: 88px;
        height: 28px;
        border-radius: 2px;
        font-size: var(--text-xs);
        line-height: 1;
    }

    .cti-test .cti-step--2 .gate-button::after {
        content: "";
        position: absolute;
        inset: -8px -6px;
    }

    .cti-test .cti-step--2 .transition-lamp {
        left: 61%;
        top: 56%;
        width: min(24vw, 104px);
        height: min(10dvh, 78px);
    }

    .cti-test .cti-step--2 .stage.is-lamp-open .transition-lamp {
        display: block;
        animation-name: cti-s2-transitionLampMobileToTop;
    }

    .cti-test .cti-step--2 .stage.is-lamp-open .scene-title,
    .cti-test .cti-step--2 .stage.is-lamp-open .chest,
    .cti-test .cti-step--2 .stage.is-lamp-open .hand-key,
    .cti-test .cti-step--2 .stage.is-lamp-open .letter-card {
        animation-name: cti-s2-sceneMobileDropClear;
    }

    .cti-test .cti-step--2 .stage.is-lamp-open .lamp-static,
    .cti-test .cti-step--2 .stage.is-lamp-open .lamp-top-cover {
        animation-name: cti-s2-lampStandMobileDropClear;
    }

    .cti-test .cti-step--3 .quiz-lamp {
        left: calc(50% - min(21vw, 88px));
        top: -10px;
        width: min(42vw, 176px);
        height: 140px;
    }

    .cti-test .cti-step--3 .quiz-lamp-shade {
        height: 40px;
    }

    .cti-test .cti-step--3 .quiz-lamp-bulb {
        top: 0px;
    }

    .cti-test .cti-step--3 .beam-wrap {
        left: -72%;
        right: -72%;
        top: 0%;
        bottom: -12%;
    }

    .cti-test .cti-step--3 .beam-swing {
        clip-path: polygon(46.7% 0, 53.3% 0, 134% 100%, -34% 100%)
    }

    .cti-test .cti-step--3 .quiz-title {
        display: none;
    }

    .cti-test .cti-step--3 .question-panel {
        left: max(16px, calc((100% - 680px) / 2));
        right: max(16px, calc((100% - 680px) / 2));
        top: 92px;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        justify-content: flex-start;
        align-items: stretch;
        padding: 0 2px 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: 18px;
        scrollbar-width: thin;
        scrollbar-color: rgba(113, 70, 2, .58) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .cti-test .cti-step--3 .question-panel::-webkit-scrollbar {
        width: 3px;
    }

    .cti-test .cti-step--3 .question-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .cti-test .cti-step--3 .question-panel::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(113, 70, 2, .58);
    }

    .cti-test .cti-step--3 .progress-row {
        align-self: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .cti-test .cti-step--3 .progress-icon {
        width: 18px;
        height: 18px;
    }

    .cti-test .cti-step--3 .progress {
        font-size: 15px;
        line-height: 18px;
    }

    .cti-test .cti-step--3 .story {
        width: min(75%, 290px);
        max-height: none;
        align-self: center;
        overflow: visible;
        line-height: 1.16;
        text-wrap: pretty;
    }

    .cti-test .cti-step--3 .prompt {
        gap: 3px;
        margin: 10px 0 28px;
    }

    .cti-test .cti-step--3 .prompt strong {
        font-size: 14px;
        line-height: 18px;
    }

    .cti-test .cti-step--3 .prompt span {
        font-size: 13px;
        line-height: 16px;
    }

    .cti-test .cti-step--3 .choices {
        width: min(88%, 560px);
        min-height: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: stretch;
        justify-content: center;
        align-self: center;
        gap: 9px;
        padding: 0 0 10px;
        transform: none;
    }

    .cti-test .cti-step--3 .choice,
    .cti-test .cti-step--3 .choices[data-choice-count] .choice {
        position: relative;
        left: auto;
        top: auto;
        flex: 0 0 100%;
        width: 100%;
        min-height: 60px;
        padding: 10px 13px;
        border-radius: 9px;
    }

    .cti-test .cti-step--3 .choice strong {
        font-weight: 600;
    }

    .cti-test .cti-step--3 .choice small {
        display: block;
        overflow: visible;
        font-size: var(--text-xs);
        -webkit-line-clamp: unset;
    }

    .cti-test .cti-step--3 .choice-group {
        display: none;
    }

    .cti-test .cti-step--3 .selection-error {
        margin-top: 10px;
        font-size: var(--text-xs);
        text-align: center;
    }

    .cti-test .cti-step--3 .quiz-nav {
        left: max(16px, calc((100% - 680px) / 2));
        right: max(16px, calc((100% - 680px) / 2));
        bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 12px));
        width: auto;
        justify-content: center;
        gap: 12px;
        transform: translateY(14px);
        animation-name: cti-s3-mobileNavIn;
    }

    .cti-test .cti-step--3 .back-link,
    .cti-test .cti-step--3 .next-link {
        width: min(29vw, 112px);
        height: 40px;
        flex: 0 1 112px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 18px;
    }
}

@media (min-width: 600px) and (max-width: 760px) {

    .cti-test .cti-step--3 .choice,
    .cti-test .cti-step--3 .choices[data-choice-count] .choice {
        flex-basis: calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
    }
}

@media (max-width: 760px) and (max-height: 700px) {

    .cti-test .cti-step--1 .page-title,
    .cti-test .cti-step--2 .scene-title {
        top: max(30px, calc(env(safe-area-inset-top, 0px) + 24px));
    }

    .cti-test .cti-step--2 .letter-card {
        top: 24%;
        bottom: auto;
        height: 45.5%;
    }

    .cti-test .cti-step--2 .letter-scroll {
        inset: 7% 7.5% 18% 8.5%;
    }

    .cti-test .cti-step--3 .question-panel {
        top: 88px;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .cti-test .cti-step--3 .progress-row {
        margin-bottom: 8px;
    }

    .cti-test .cti-step--3 .story {}

    .cti-test .cti-step--3 .prompt {
        margin: 8px 0 20px;
    }

    .cti-test .cti-step--3 .choice,
    .cti-test .cti-step--3 .choices[data-choice-count] .choice {
        min-height: 58px;
        padding: 9px 12px;
    }

    .cti-test .cti-step--3 .back-link,
    .cti-test .cti-step--3 .next-link {
        height: 38px;
    }

    .cti-test .cti-step--3 .beam-swing {
        clip-path: polygon(46.7% 0, 53.3% 0, 134% 100%, -34% 100%)
    }
}

@keyframes cti-s2-letterMobileIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes cti-s2-sceneMobileDropClear {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    92% {
        opacity: 1;
        transform: translateY(105dvh);
    }

    100% {
        opacity: 0;
        transform: translateY(105dvh);
    }
}

@keyframes cti-s2-lampStandMobileDropClear {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    92% {
        opacity: 1;
        transform: translateY(105dvh) scale(.98);
    }

    100% {
        opacity: 0;
        transform: translateY(105dvh) scale(.98);
    }
}

@keyframes cti-s2-transitionLampMobileToTop {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    100% {
        opacity: 1;
        transform: translate3d(-32vw, calc(-56dvh - 10px), 0) scale3d(1.75, 1.75, 1);
    }
}

@keyframes cti-s3-mobileNavIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CRAFT-TI fixed question copy with a dedicated option scroller. */
.cti-test .cti-step--3 .question-panel {
    bottom: 15%;
    overflow: hidden;
}

.cti-test .cti-step--3 .progress-row,
.cti-test .cti-step--3 .story,
.cti-test .cti-step--3 .prompt {
    flex: 0 0 auto;
}

.cti-test .cti-step--3 .progress-icon {
    width: auto;
    max-width: calc(var(--frame-w) * 52 / 1920);
    height: calc(var(--frame-w) * 30 / 1920);
}

.cti-test .cti-step--3 .story {
    max-height: none;
    overflow: visible;
}

.cti-test .cti-step--3 .choices-scroll {
    width: calc(var(--frame-w) * 1240 / 1920);
    max-width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 8px calc(var(--frame-w) * 14 / 1920);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 70, 2, .58) transparent;
    -webkit-overflow-scrolling: touch;
}

.cti-test .cti-step--3 .choices-scroll::-webkit-scrollbar {
    width: 3px;
}

.cti-test .cti-step--3 .choices-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cti-test .cti-step--3 .choices-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(113, 70, 2, .58);
}

.cti-test .cti-step--3 .choices[data-choice-layout="grouped"] {
    width: min(100%, calc(var(--frame-w) * 920 / 1920));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--frame-w) * 18 / 1920);
}

.cti-test .cti-step--3 .choice-type {
    width: 100%;
}

.cti-test .cti-step--3 .choice-type-title {
    display: flex;
    align-items: baseline;
    gap: calc(var(--frame-w) * 10 / 1920);
    margin: 0 0 calc(var(--frame-w) * 8 / 1920);
    color: #361f04;
    font-family: "CourierLocal", "Courier New", monospace;
    font-size: calc(var(--frame-w) * 17 / 1920);
    font-weight: 700;
    line-height: calc(var(--frame-w) * 22 / 1920);
}

.cti-test .cti-step--3 .choice-type-title small {
    color: #636363;
    font-family: "Poppins", Arial, sans-serif;
    font-size: calc(var(--frame-w) * 12 / 1920);
    font-weight: 400;
    line-height: calc(var(--frame-w) * 18 / 1920);
}

.cti-test .cti-step--3 .choice-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--frame-w) * 20 / 1920);
}

.cti-test .cti-step--3 .choice-type-options .choice {
    width: 100%;
    min-height: calc(var(--frame-w) * 104 / 1920);
    flex: none;
}

@media (max-width: 760px) {
    .cti-test .cti-step--3 .question-panel {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .cti-test .cti-step--3 .progress-icon {
        width: auto;
        max-width: 34px;
        height: 20px;
    }

    .cti-test .cti-step--3 .choices-scroll {
        width: min(94%, 620px);
        max-width: none;
        padding: 2px 2px 12px;
    }

    .cti-test .cti-step--3 .choices {
        width: 100%;
        max-width: none;
    }

    .cti-test .cti-step--3 .choices[data-choice-layout="grouped"] {
        width: 100%;
        gap: 14px;
    }

    .cti-test .cti-step--3 .choice-type-title {
        gap: 7px;
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 18px;
    }

    .cti-test .cti-step--3 .choice-type-title small {
        font-size: 10px;
        line-height: 14px;
    }

    .cti-test .cti-step--3 .choice-type-options {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .cti-test .cti-step--3 .choice-type-options .choice,
    .cti-test .cti-step--3 .choices[data-choice-count] .choice-type-options .choice {
        width: 100%;
        min-height: 60px;
        flex-basis: auto;
    }
}

/* CRAFT-TI reference-aligned invitation paper and custom scrollbar. */
.cti-test .cti-step--2 .letter-copy {
    position: absolute;
    inset: 11.425% 5.9% 18.8% 9.296%;
    width: auto;
    display: block;
    padding-right: calc(var(--frame-w) * 34 / 1920);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    line-height: 1;
}

.cti-test .cti-step--2 .letter-copy::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.cti-test .cti-step--2 .letter-scrollbar {
    position: absolute;
    z-index: 7;
    right: 7.45%;
    top: 11%;
    bottom: 14.8%;
    width: 2px;
    border-radius: 999px;
    background: #c9c4c0;
    pointer-events: none;
}

.cti-test .cti-step--2 .letter-scrollbar span {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    min-height: 48px;
    border-radius: 999px;
    background: #805001;
    transform: translateY(0);
    will-change: transform, height;
}

.cti-test .cti-step--2 .letter-copy p {
    margin: 0 0 1.02em;
}

.cti-test .cti-step--2 .letter-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .cti-test .cti-step--2 .letter-copy {
        inset: 7% 7.5% 18% 8.5%;
        padding-right: 12px;
    }

    .cti-test .cti-step--2 .letter-scrollbar {
        right: 6.2%;
        top: 7%;
        bottom: 14%;
    }
}