/* Shared player for 테스트 다모아. Individual pages only choose theme variables. */
body.theme-tests {
  --test-accent: #7546e8;
  --test-accent-deep: #4e2baa;
  --test-soft: #eee7ff;
  --test-pop: #45d8bc;
  --test-ink: #211a3e;
  background:
    radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--test-pop) 18%, transparent), transparent 24rem),
    radial-gradient(circle at 96% 16%, color-mix(in srgb, var(--test-accent) 14%, transparent), transparent 22rem),
    #fbfaff;
}

body.test-theme-axis {
  --test-accent: #7348e8;
  --test-accent-deep: #4d2aa8;
  --test-soft: #eee8ff;
  --test-pop: #b9f15b;
  --test-ink: #221a43;
}

body.test-theme-travel {
  --test-accent: #f06478;
  --test-accent-deep: #a82f4c;
  --test-soft: #fff0f2;
  --test-pop: #65b7f3;
  --test-ink: #342039;
}

body.test-theme-boundary {
  --test-accent: #ef6487;
  --test-accent-deep: #9f2d50;
  --test-soft: #fff0f4;
  --test-pop: #ffd25b;
  --test-ink: #392034;
}

body.test-theme-photo {
  --test-accent: #197a70;
  --test-accent-deep: #0e554d;
  --test-soft: #e3f7f2;
  --test-pop: #ffbe55;
  --test-ink: #183936;
}

body.test-theme-color {
  --test-accent: #ef6c8e;
  --test-accent-deep: #a63257;
  --test-soft: #fff0f4;
  --test-pop: #ffd34f;
  --test-ink: #432133;
}

body.test-theme-fortune {
  --test-accent: #39469a;
  --test-accent-deep: #20285e;
  --test-soft: #e9ebfb;
  --test-pop: #d9ad45;
  --test-ink: #182043;
  background:
    radial-gradient(circle at 12% 5%, rgba(217, 173, 69, 0.16), transparent 21rem),
    radial-gradient(circle at 92% 13%, rgba(57, 70, 154, 0.16), transparent 22rem),
    #f8f7f2;
}

body.test-theme-observation {
  --test-accent: #e96839;
  --test-accent-deep: #9a3418;
  --test-soft: #fff0e9;
  --test-pop: #ffd436;
  --test-ink: #2d2435;
}

body.test-theme-outsider {
  --test-accent: #6750c9;
  --test-accent-deep: #3f2a91;
  --test-soft: #eeeaff;
  --test-pop: #b7f06a;
  --test-ink: #251d3d;
  background:
    radial-gradient(circle at 7% 4%, rgba(183, 240, 106, 0.2), transparent 22rem),
    radial-gradient(circle at 96% 15%, rgba(103, 80, 201, 0.17), transparent 24rem),
    #fbfaff;
}

body.test-theme-monday {
  --test-accent: #4c6fdc;
  --test-accent-deep: #29459f;
  --test-soft: #eaf0ff;
  --test-pop: #ffd35e;
  --test-ink: #1e2948;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 211, 94, 0.22), transparent 22rem),
    radial-gradient(circle at 95% 14%, rgba(76, 111, 220, 0.18), transparent 24rem),
    #f9fbff;
}

.test-experience {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(100vh - var(--header-height));
  overflow-x: clip;
  color: var(--test-ink);
}

.test-back-link {
  display: inline-flex;
  min-height: 2.75rem;
  margin-bottom: var(--space-5);
  padding: 0.55rem 0.9rem;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--test-accent) 24%, white);
  border-radius: var(--radius-pill);
  color: var(--test-accent-deep);
  background: rgba(255, 255, 255, 0.74);
  font-size: var(--step--1);
  font-weight: 850;
}

.test-hero {
  position: relative;
  padding: clamp(2rem, 7vw, 4.8rem) 0 clamp(1.6rem, 5vw, 3rem);
  overflow: hidden;
}

.test-hero__inner {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: clamp(1.6rem, 5vw, 4rem);
}

.test-hero__copy {
  min-width: 0;
}

.test-kicker {
  display: inline-flex;
  margin-bottom: var(--space-4);
  padding: 0.42rem 0.74rem;
  border-radius: var(--radius-pill);
  color: var(--test-accent-deep);
  background: var(--test-soft);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.03em;
}

.test-experience .eyebrow {
  color: var(--test-accent-deep);
  background: var(--test-soft);
}

.test-hero h1 {
  max-width: 13ch;
  margin-bottom: var(--space-4);
  font-size: clamp(2.25rem, 1.65rem + 3.4vw, 4.5rem);
  font-weight: 1000;
  letter-spacing: -0.075em;
}

.test-hero h1 em {
  color: var(--test-accent-deep);
  font-style: normal;
}

.test-hero__lead {
  max-width: 38rem;
  margin-bottom: var(--space-6);
  color: var(--ink-600);
  font-size: var(--step-1);
}

.test-facts {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.test-facts li,
.test-fact {
  display: inline-flex;
  min-height: 2.25rem;
  padding: 0.4rem 0.72rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.78);
  font-size: var(--step--1);
  font-weight: 750;
}

.test-hero__art {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--test-accent) 26%, white);
  border-radius: clamp(1.7rem, 5vw, 3.5rem);
  background:
    radial-gradient(circle at 24% 28%, var(--test-pop) 0 12%, transparent 12.5%),
    radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.68) 0 10%, transparent 10.5%),
    radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.48) 0 18%, transparent 18.5%),
    linear-gradient(145deg, var(--test-accent), color-mix(in srgb, var(--test-accent) 54%, white));
  box-shadow: var(--shadow-md);
}

.test-hero__art::before,
.test-hero__art::after {
  position: absolute;
  content: "";
}

.test-hero__art::before {
  top: 50%;
  left: 50%;
  width: 7.5rem;
  height: 7.5rem;
  border: 1.15rem solid rgba(255, 255, 255, 0.82);
  border-radius: 42% 58% 68% 32%;
  transform: translate(-50%, -50%) rotate(18deg);
}

.test-hero__art::after {
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: -4.3rem 3.4rem 0 -0.45rem rgba(255, 255, 255, 0.78),
    4.2rem -3.3rem 0 -0.5rem rgba(255, 255, 255, 0.78);
  transform: translate(-50%, -50%);
}

/* Each test keeps the same layout while using a clearly different visual theme. */
.axis-hero-art {
  background:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(145deg, #7147e7, #4d2aa8);
  background-size: 25% 25%, 25% 25%, auto;
}

.axis-hero-art::before {
  width: 8.4rem;
  height: 8.4rem;
  border: 1rem solid rgba(255, 255, 255, 0.88);
  border-radius: 2rem;
  transform: translate(-50%, -50%) rotate(45deg);
}

.axis-hero-art::after {
  width: 1.2rem;
  height: 1.2rem;
  background: var(--test-pop);
  box-shadow: -4.4rem 0 0 rgba(255, 255, 255, 0.9), 4.4rem 0 0 rgba(255, 255, 255, 0.9), 0 -4.4rem 0 rgba(255, 255, 255, 0.9), 0 4.4rem 0 rgba(255, 255, 255, 0.9);
}

.love-hero-art {
  background:
    radial-gradient(circle at 22% 25%, rgba(255, 255, 255, 0.28) 0 8%, transparent 8.5%),
    radial-gradient(circle at 82% 75%, rgba(255, 215, 92, 0.7) 0 13%, transparent 13.5%),
    linear-gradient(145deg, #ef6c8e, #b83f72);
}

.love-hero-art::before {
  width: 9rem;
  height: 6.2rem;
  border: 0.85rem solid rgba(255, 255, 255, 0.9);
  border-radius: 1.25rem;
  transform: translate(-50%, -50%) rotate(-7deg);
}

.love-hero-art::after {
  width: 5.25rem;
  height: 5.25rem;
  border-right: 0.8rem solid rgba(255, 255, 255, 0.9);
  border-bottom: 0.8rem solid rgba(255, 255, 255, 0.9);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -73%) rotate(45deg);
}

.reset-hero-art {
  background:
    radial-gradient(circle at 24% 30%, rgba(255, 201, 80, 0.84) 0 11%, transparent 11.5%),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.24) 0 18%, transparent 18.5%),
    linear-gradient(145deg, #197a70, #0d4f59);
}

.reset-hero-art::before {
  width: 8rem;
  height: 8rem;
  border: 1rem solid rgba(255, 255, 255, 0.9);
  border-top-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -45%) rotate(45deg);
}

.reset-hero-art::after {
  top: calc(50% - 2.4rem);
  width: 1rem;
  height: 5.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
  transform: translateX(-50%);
}

.outsider-hero-art {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(145deg, #725ad2, #39237f);
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto;
}

.outsider-hero-art::before {
  width: 8.6rem;
  height: 6.2rem;
  border: 0.85rem solid rgba(255, 255, 255, 0.9);
  border-radius: 3.2rem 3.2rem 2rem 2rem;
  transform: translate(-50%, -42%);
}

.outsider-hero-art::after {
  width: 0.85rem;
  height: 0.85rem;
  background: #fff;
  box-shadow: 3.2rem 0 0 #fff;
  transform: translate(-2rem, -0.65rem);
}

.outsider-hero-art > span {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  color: var(--test-pop);
  font-size: 2rem;
  font-weight: 1000;
  letter-spacing: 0.2em;
}

.monday-hero-art {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 211, 94, 0.92) 0 8%, transparent 8.5%),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(145deg, #5d7be2, #263f92);
  background-size: auto, 2.5rem 2.5rem, 2.5rem 2.5rem, auto;
}

.monday-hero-art::before {
  width: 9rem;
  height: 9rem;
  border: 0.8rem solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.92) 48% 52%, transparent 52%),
    linear-gradient(25deg, transparent 48%, rgba(255, 255, 255, 0.92) 48% 52%, transparent 52%);
  box-shadow: 0 18px 32px rgba(20, 36, 92, 0.28);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.monday-hero-art::after {
  top: calc(50% - 5.6rem);
  left: 50%;
  width: 3.4rem;
  height: 1.15rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--test-pop);
  box-shadow: none;
  transform: translateX(-50%) rotate(-8deg);
}

.monday-hero-art > span {
  position: relative;
  z-index: 1;
  margin-top: 11.5rem;
  color: var(--test-pop);
  font-size: 1.65rem;
  font-weight: 1000;
  letter-spacing: 0.22em;
}

.know-me-hero-art {
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.32) 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 82% 76%, rgba(185, 241, 91, 0.74) 0 1rem, transparent 1.05rem),
    linear-gradient(145deg, #7147e7, #4d2aa8);
}

.know-me-hero-art::before {
  width: 8.4rem;
  height: 9.8rem;
  border: 0.65rem solid rgba(255, 255, 255, 0.9);
  border-radius: 2.2rem 2.2rem 3.4rem 2rem;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 3.8rem 1.6rem 0 -0.75rem rgba(255, 255, 255, 0.52);
  transform: translate(-62%, -52%) rotate(-7deg);
}

.know-me-hero-art::after {
  width: auto;
  height: auto;
  color: #fff;
  background: transparent;
  box-shadow: none;
  content: "?";
  font-size: 6rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 14px 28px rgba(35, 18, 85, 0.28);
  transform: translate(-18%, -54%) rotate(7deg);
}

.boundary-hero-art {
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(255, 255, 255, 0.92) 48.5% 51.5%, transparent 51.5%),
    linear-gradient(145deg, #ef6487, #c84d76 55%, #ffd25b);
}

.boundary-hero-art::before {
  width: 4.7rem;
  height: 8rem;
  border: 0;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 7.4rem 0 0 rgba(255, 255, 255, 0.55);
  transform: translate(-125%, -50%) rotate(-5deg);
}

.boundary-hero-art::after {
  width: auto;
  height: auto;
  color: #8d2949;
  background: transparent;
  box-shadow: none;
  content: "↔";
  font-size: 4.6rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 12px 25px rgba(80, 25, 52, 0.18);
  transform: translate(-50%, -50%);
}

.chat-hero-art {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.44) 0 0.6rem, transparent 0.65rem),
    linear-gradient(145deg, #45cdb2, #4f9ee9 54%, #f06478);
}

.chat-hero-art::before {
  width: 9.6rem;
  height: 5.8rem;
  border: 0;
  border-radius: 2rem 2rem 2rem 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 4.4rem 4rem 0 -0.55rem rgba(255, 255, 255, 0.62);
  transform: translate(-70%, -72%) rotate(-5deg);
}

.chat-hero-art::after {
  width: auto;
  height: auto;
  color: #2a6e83;
  background: transparent;
  box-shadow: none;
  content: "•••";
  font-size: 3.5rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  line-height: 1;
  transform: translate(-69%, -72%);
}

.travel-hero-art {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.38) 0 0.5rem, transparent 0.55rem),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.34) 0 0.65rem, transparent 0.7rem),
    linear-gradient(145deg, #65b7f3, #f06478);
}

.travel-hero-art::before {
  width: 10rem;
  height: 6.8rem;
  border: 0.3rem dashed rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.travel-hero-art::after {
  width: auto;
  height: auto;
  color: #fff;
  background: transparent;
  box-shadow: none;
  content: "✈";
  font-size: 4.8rem;
  line-height: 1;
  text-shadow: 0 12px 22px rgba(78, 38, 78, 0.22);
  transform: translate(-50%, -50%) rotate(-10deg);
}

.photo-mood-hero-art {
  background: linear-gradient(145deg, #197a70, #ffbe55);
}

.photo-mood-hero-art::before,
.photo-mood-hero-art::after {
  width: 7.8rem;
  height: 9.6rem;
  border: 0.7rem solid rgba(255, 255, 255, 0.92);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 68% 27%, #ffcf69 0 0.75rem, transparent 0.8rem),
    linear-gradient(155deg, transparent 48%, rgba(255, 255, 255, 0.5) 49% 62%, transparent 63%);
  box-shadow: 0 16px 28px rgba(17, 71, 66, 0.2);
}

.photo-mood-hero-art::before {
  transform: translate(-68%, -48%) rotate(-9deg);
}

.photo-mood-hero-art::after {
  top: 52%;
  left: 58%;
  transform: translate(-35%, -48%) rotate(8deg);
}

.color-passport-hero-art {
  background: linear-gradient(145deg, #ef6c8e, #ffd34f);
}

.color-passport-hero-art::before {
  width: 10.5rem;
  height: 7.2rem;
  border: 0.75rem solid rgba(255, 255, 255, 0.92);
  border-radius: 1.25rem;
  background: linear-gradient(90deg, #ff6f91 0 33.333%, #ffd34f 33.333% 66.666%, #54d2bc 66.666%);
  box-shadow: 0 18px 30px rgba(108, 44, 72, 0.18);
  transform: translate(-50%, -50%) rotate(-7deg);
}

.color-passport-hero-art::after {
  width: 3.6rem;
  height: 3.6rem;
  border: 0.35rem solid rgba(255, 255, 255, 0.9);
  background: transparent;
  box-shadow: none;
  transform: translate(70%, 40%) rotate(10deg);
}

.fortune-hero-art {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.5) 0 0.12rem, transparent 0.16rem),
    radial-gradient(circle at 80% 26%, rgba(255, 255, 255, 0.42) 0 0.16rem, transparent 0.2rem),
    linear-gradient(145deg, #20285e, #39469a);
}

.fortune-hero-art::before {
  width: 8.2rem;
  height: 8.2rem;
  border: 0;
  border-radius: 50%;
  background: #e4bb58;
  box-shadow: 0 0 0 1.15rem rgba(228, 187, 88, 0.16), 0 20px 40px rgba(10, 15, 50, 0.25);
  transform: translate(-50%, -50%);
}

.fortune-hero-art::after {
  width: 1.05rem;
  height: 1.05rem;
  background: #fff;
  box-shadow: -3.3rem -1.2rem 0 #6cb58c, 3.3rem -1.2rem 0 #ef786c, -2.1rem 3.1rem 0 #8ab8de, 2.1rem 3.1rem 0 #d4d7df;
}

.observation-hero-art {
  background: linear-gradient(145deg, #e96839, #ffb62e);
}

.observation-hero-art::before {
  width: 9rem;
  height: 9rem;
  border: 0;
  border-radius: 1.5rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 46%, transparent 46% 54%, rgba(255, 255, 255, 0.88) 54%),
    linear-gradient(rgba(255, 255, 255, 0.88) 46%, transparent 46% 54%, rgba(255, 255, 255, 0.88) 54%);
  box-shadow: 0 16px 30px rgba(107, 47, 27, 0.2);
  transform: translate(-50%, -50%) rotate(6deg);
}

.observation-hero-art::after {
  width: 1.65rem;
  height: 1.65rem;
  background: #20263f;
  box-shadow: none;
  transform: translate(80%, -85%);
}

.test-stage {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  scroll-margin-top: calc(var(--header-height) + 1rem);
  padding: 0 0 clamp(3rem, 9vw, 6rem);
  overflow-x: clip;
}

.test-stage__inner,
.test-panel {
  width: min(100%, 48rem);
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

.test-panel {
  padding: clamp(1.25rem, 4vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--line));
  border-radius: clamp(1.4rem, 4vw, 2.25rem);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md);
}

.test-panel:not([hidden]) {
  animation: test-panel-in 380ms var(--ease-out);
}

.test-panel--wide {
  width: min(100%, 64rem);
}

.test-panel h2 {
  margin-bottom: var(--space-3);
  font-size: var(--step-3);
  font-weight: 950;
}

.test-panel__step {
  display: inline-flex;
  margin-bottom: var(--space-3);
  color: var(--test-accent-deep);
  font-size: var(--step--1);
  font-weight: 950;
  letter-spacing: 0.06em;
}

.test-panel__lead {
  margin-bottom: var(--space-6);
  color: var(--ink-600);
}

.test-progress {
  display: grid;
  margin-bottom: var(--space-7);
  gap: var(--space-2);
}

.test-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-600);
  font-size: var(--step--1);
  font-weight: 800;
}

.test-progress__track {
  height: 0.58rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--test-accent) 11%, white);
}

.test-progress__bar {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--test-accent), var(--test-pop));
  transition: none;
}

.test-progress__bar[data-progress="0"] { width: 0%; }
.test-progress__bar[data-progress="1"] { width: 1%; }
.test-progress__bar[data-progress="2"] { width: 2%; }
.test-progress__bar[data-progress="3"] { width: 3%; }
.test-progress__bar[data-progress="4"] { width: 4%; }
.test-progress__bar[data-progress="5"] { width: 5%; }
.test-progress__bar[data-progress="6"] { width: 6%; }
.test-progress__bar[data-progress="7"] { width: 7%; }
.test-progress__bar[data-progress="8"] { width: 8%; }
.test-progress__bar[data-progress="9"] { width: 9%; }
.test-progress__bar[data-progress="10"] { width: 10%; }
.test-progress__bar[data-progress="11"] { width: 11%; }
.test-progress__bar[data-progress="12"] { width: 12%; }
.test-progress__bar[data-progress="13"] { width: 13%; }
.test-progress__bar[data-progress="14"] { width: 14%; }
.test-progress__bar[data-progress="15"] { width: 15%; }
.test-progress__bar[data-progress="16"] { width: 16%; }
.test-progress__bar[data-progress="17"] { width: 17%; }
.test-progress__bar[data-progress="18"] { width: 18%; }
.test-progress__bar[data-progress="19"] { width: 19%; }
.test-progress__bar[data-progress="20"] { width: 20%; }
.test-progress__bar[data-progress="21"] { width: 21%; }
.test-progress__bar[data-progress="22"] { width: 22%; }
.test-progress__bar[data-progress="23"] { width: 23%; }
.test-progress__bar[data-progress="24"] { width: 24%; }
.test-progress__bar[data-progress="25"] { width: 25%; }
.test-progress__bar[data-progress="26"] { width: 26%; }
.test-progress__bar[data-progress="27"] { width: 27%; }
.test-progress__bar[data-progress="28"] { width: 28%; }
.test-progress__bar[data-progress="29"] { width: 29%; }
.test-progress__bar[data-progress="30"] { width: 30%; }
.test-progress__bar[data-progress="31"] { width: 31%; }
.test-progress__bar[data-progress="32"] { width: 32%; }
.test-progress__bar[data-progress="33"] { width: 33%; }
.test-progress__bar[data-progress="34"] { width: 34%; }
.test-progress__bar[data-progress="35"] { width: 35%; }
.test-progress__bar[data-progress="36"] { width: 36%; }
.test-progress__bar[data-progress="37"] { width: 37%; }
.test-progress__bar[data-progress="38"] { width: 38%; }
.test-progress__bar[data-progress="39"] { width: 39%; }
.test-progress__bar[data-progress="40"] { width: 40%; }
.test-progress__bar[data-progress="41"] { width: 41%; }
.test-progress__bar[data-progress="42"] { width: 42%; }
.test-progress__bar[data-progress="43"] { width: 43%; }
.test-progress__bar[data-progress="44"] { width: 44%; }
.test-progress__bar[data-progress="45"] { width: 45%; }
.test-progress__bar[data-progress="46"] { width: 46%; }
.test-progress__bar[data-progress="47"] { width: 47%; }
.test-progress__bar[data-progress="48"] { width: 48%; }
.test-progress__bar[data-progress="49"] { width: 49%; }
.test-progress__bar[data-progress="50"] { width: 50%; }
.test-progress__bar[data-progress="51"] { width: 51%; }
.test-progress__bar[data-progress="52"] { width: 52%; }
.test-progress__bar[data-progress="53"] { width: 53%; }
.test-progress__bar[data-progress="54"] { width: 54%; }
.test-progress__bar[data-progress="55"] { width: 55%; }
.test-progress__bar[data-progress="56"] { width: 56%; }
.test-progress__bar[data-progress="57"] { width: 57%; }
.test-progress__bar[data-progress="58"] { width: 58%; }
.test-progress__bar[data-progress="59"] { width: 59%; }
.test-progress__bar[data-progress="60"] { width: 60%; }
.test-progress__bar[data-progress="61"] { width: 61%; }
.test-progress__bar[data-progress="62"] { width: 62%; }
.test-progress__bar[data-progress="63"] { width: 63%; }
.test-progress__bar[data-progress="64"] { width: 64%; }
.test-progress__bar[data-progress="65"] { width: 65%; }
.test-progress__bar[data-progress="66"] { width: 66%; }
.test-progress__bar[data-progress="67"] { width: 67%; }
.test-progress__bar[data-progress="68"] { width: 68%; }
.test-progress__bar[data-progress="69"] { width: 69%; }
.test-progress__bar[data-progress="70"] { width: 70%; }
.test-progress__bar[data-progress="71"] { width: 71%; }
.test-progress__bar[data-progress="72"] { width: 72%; }
.test-progress__bar[data-progress="73"] { width: 73%; }
.test-progress__bar[data-progress="74"] { width: 74%; }
.test-progress__bar[data-progress="75"] { width: 75%; }
.test-progress__bar[data-progress="76"] { width: 76%; }
.test-progress__bar[data-progress="77"] { width: 77%; }
.test-progress__bar[data-progress="78"] { width: 78%; }
.test-progress__bar[data-progress="79"] { width: 79%; }
.test-progress__bar[data-progress="80"] { width: 80%; }
.test-progress__bar[data-progress="81"] { width: 81%; }
.test-progress__bar[data-progress="82"] { width: 82%; }
.test-progress__bar[data-progress="83"] { width: 83%; }
.test-progress__bar[data-progress="84"] { width: 84%; }
.test-progress__bar[data-progress="85"] { width: 85%; }
.test-progress__bar[data-progress="86"] { width: 86%; }
.test-progress__bar[data-progress="87"] { width: 87%; }
.test-progress__bar[data-progress="88"] { width: 88%; }
.test-progress__bar[data-progress="89"] { width: 89%; }
.test-progress__bar[data-progress="90"] { width: 90%; }
.test-progress__bar[data-progress="91"] { width: 91%; }
.test-progress__bar[data-progress="92"] { width: 92%; }
.test-progress__bar[data-progress="93"] { width: 93%; }
.test-progress__bar[data-progress="94"] { width: 94%; }
.test-progress__bar[data-progress="95"] { width: 95%; }
.test-progress__bar[data-progress="96"] { width: 96%; }
.test-progress__bar[data-progress="97"] { width: 97%; }
.test-progress__bar[data-progress="98"] { width: 98%; }
.test-progress__bar[data-progress="99"] { width: 99%; }
.test-progress__bar[data-progress="100"] { width: 100%; }

.test-game-tip {
  display: inline-flex;
  min-height: 2.15rem;
  margin: calc(var(--space-3) * -1) 0 var(--space-5);
  padding: 0.38rem 0.68rem;
  align-items: center;
  border-radius: var(--radius-pill);
  color: var(--test-accent-deep);
  background: var(--test-soft);
  font-size: var(--step--1);
  font-weight: 900;
}

.test-question {
  margin-bottom: var(--space-6);
}

.test-question__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--test-accent-deep);
  font-size: var(--step--1);
  font-weight: 900;
}

.test-question h2,
.test-question legend {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 950;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.test-choice-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-3);
  border: 0;
}

.test-choice {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 4.4rem;
  padding: 1rem 1.08rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  text-align: left;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast),
    box-shadow var(--duration-fast), transform var(--duration-fast);
}

/* iOS Safari keeps :hover on the last tapped reusable button. Only mouse-like
   pointers get the hover treatment so a new question always starts neutral. */
@media (hover: hover) and (pointer: fine) {
  .test-choice:hover {
    border-color: var(--test-accent);
    background: var(--test-soft);
    transform: translateY(-1px);
  }
}

.test-choice:active {
  transform: scale(0.985);
}

.test-choice[aria-pressed="true"],
.test-choice.is-selected,
.test-choice:has(input:checked) {
  border-color: var(--test-accent);
  background: var(--test-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--test-accent) 15%, transparent);
}

.test-choice.is-correct {
  border-color: #16825d;
  color: #0d6749;
  background: #e8fbf3;
  box-shadow: 0 0 0 3px rgba(22, 130, 93, 0.13);
}

.test-choice.is-wrong {
  border-color: #c63f57;
  color: #963044;
  background: #fff0f3;
}

.test-choice:disabled {
  cursor: default;
  opacity: 1;
}

.test-choice__mark {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 0.72rem;
  color: var(--test-accent-deep);
  background: var(--test-soft);
  font-weight: 950;
}

.test-choice__copy {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.test-choice__copy strong {
  font-size: 1rem;
}

.test-choice__copy span {
  color: var(--ink-600);
  font-size: var(--step--1);
}

.test-choice__arrow {
  color: var(--test-accent);
  font-size: 1.2rem;
  font-weight: 900;
}

.test-actions,
.test-result-actions {
  display: flex;
  margin-top: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.test-actions .button,
.test-result-actions .button {
  min-height: 3rem;
}

.test-actions > span {
  color: var(--ink-600);
  font-size: var(--step--1);
  line-height: 1.55;
}

.test-actions .button:disabled,
.test-result-actions .button:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.52;
}

.test-experience .button--primary,
.test-actions .button--primary,
.test-result-actions .button--primary,
.test-primary {
  color: #fff;
  background: var(--test-accent-deep);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--test-accent-deep) 28%, transparent);
}

.test-experience .button--primary:hover,
.test-actions .button--primary:hover,
.test-result-actions .button--primary:hover,
.test-primary:hover {
  background: color-mix(in srgb, var(--test-accent-deep) 88%, #000);
}

.test-field-grid,
.test-upload-grid,
.test-result-grid {
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.test-result-grid {
  margin-top: var(--space-6);
}

.test-panel > *,
.test-field-grid > *,
.test-upload-grid > *,
.test-result-grid > * {
  min-width: 0;
  max-width: 100%;
}

.test-panel :where(form, fieldset, section, article, div, ul, ol, li, label),
.test-actions > *,
.test-result-actions > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.test-field {
  display: grid;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  gap: var(--space-2);
}

.test-field label,
.test-field__label {
  font-weight: 850;
}

.test-field input,
.test-field select,
.test-field textarea {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-height: 3.2rem;
  padding: 0.72rem 0.86rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 1rem;
}

.test-field input[type="date"],
.test-field input[type="time"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  -webkit-min-logical-width: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.test-field input[type="date"]::-webkit-date-and-time-value,
.test-field input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}

.test-field select {
  text-overflow: ellipsis;
}

.test-quick-play {
  display: grid;
  min-width: 0;
  margin-bottom: var(--space-5);
  padding: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--test-pop) 42%, var(--line));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--test-pop) 30%, transparent), transparent 5rem),
    color-mix(in srgb, var(--test-soft) 58%, white);
}

.test-quick-play strong,
.test-quick-play span {
  display: block;
}

.test-quick-play strong {
  margin-bottom: 0.15rem;
  color: var(--test-ink);
  font-size: 1rem;
}

.test-quick-play span {
  color: var(--ink-600);
  font-size: var(--step--1);
  line-height: 1.55;
}

.test-divider {
  display: flex;
  margin: var(--space-5) 0;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-500);
  font-size: var(--step--1);
  font-weight: 800;
}

.test-divider::before,
.test-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.test-notice,
.test-privacy-note {
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--test-accent) 20%, var(--line));
  border-radius: var(--radius-md);
  color: var(--ink-700);
  background: color-mix(in srgb, var(--test-soft) 64%, white);
  font-size: var(--step--1);
}

.test-notice strong,
.test-privacy-note strong {
  color: var(--test-accent-deep);
}

.test-notice + .test-notice {
  margin-top: var(--space-4);
}

.test-field-grid + .test-notice,
.test-upload-grid + .test-notice,
.test-result__summary + .test-notice {
  margin-top: var(--space-5);
}

.test-result-grid + .test-notice,
.test-result-list + .test-notice {
  margin-top: var(--space-6);
}

.test-notice p {
  margin: 0;
  line-height: 1.75;
}

.test-notice label + p,
.test-notice p + p {
  margin-top: var(--space-2);
}

.test-privacy-note {
  margin-top: var(--space-4);
  padding: 0;
  overflow: hidden;
}

.test-privacy-note > summary {
  display: grid;
  min-height: 3.2rem;
  padding: 0.78rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  color: var(--test-accent-deep);
  font-weight: 850;
  line-height: 1.48;
  list-style: none;
  cursor: pointer;
}

.test-privacy-note > summary::-webkit-details-marker {
  display: none;
}

.test-privacy-note > summary::after {
  min-width: 2.8rem;
  color: var(--ink-600);
  content: "자세히";
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.test-privacy-note[open] > summary::after {
  content: "접기";
}

.test-privacy-note__body {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--test-accent) 14%, var(--line));
  background: rgba(255, 255, 255, 0.46);
}

.test-privacy-note__body p {
  margin: 0;
}

.test-result {
  position: relative;
  overflow: hidden;
}

.test-result::before {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 43% 57% 70% 30%;
  background: var(--test-pop);
  content: "";
  opacity: 0.16;
  rotate: 22deg;
}

.test-result__eyebrow {
  display: inline-flex;
  margin-bottom: var(--space-3);
  color: var(--test-accent-deep);
  font-size: var(--step--1);
  font-weight: 950;
}

.test-result__title {
  position: relative;
  max-width: 16ch;
  margin-bottom: var(--space-3);
  font-size: var(--step-4);
  font-weight: 1000;
}

.test-result__summary {
  position: relative;
  max-width: 42rem;
  color: var(--ink-600);
  font-size: var(--step-1);
}

.test-result__note {
  margin-top: var(--space-4);
  color: var(--ink-600);
  font-size: var(--step--1);
}

.test-office-promo {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(0.9rem, 2.5vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--office) 22%, var(--line));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 8% 18%, rgba(18, 102, 214, 0.1), transparent 28%),
    linear-gradient(135deg, #f5f9ff, #fff 68%);
  box-shadow: 0 10px 28px rgba(29, 74, 145, 0.08);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem 1rem;
}

.test-office-promo__mark {
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(145deg, var(--office), #2448a8);
  box-shadow: 0 8px 18px rgba(18, 102, 214, 0.2);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.test-office-promo__copy {
  min-width: 0;
}

.test-office-promo__eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--office);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.test-office-promo h3 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(0.96rem, 0.91rem + 0.22vw, 1.08rem);
  line-height: 1.42;
  word-break: keep-all;
}

.test-office-promo p {
  margin: 0.24rem 0 0;
  color: var(--ink-600);
  font-size: 0.82rem;
  line-height: 1.58;
  word-break: keep-all;
}

.test-office-promo__link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--office) 26%, var(--line));
  border-radius: 999px;
  color: #0e55b5;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.test-office-promo__link:hover {
  border-color: var(--office);
  color: #fff;
  background: var(--office);
}

.test-office-promo__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(18, 102, 214, 0.18);
}

.test-result-depth {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 6vw, 3.5rem);
  padding-top: clamp(1.4rem, 4vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--test-accent) 22%, var(--line));
}

.test-result-depth__eyebrow {
  display: inline-flex;
  margin-bottom: 0.45rem;
  color: var(--test-accent-deep);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}

.test-result-depth > h3 {
  margin: 0;
  color: var(--test-ink);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.9rem);
  font-weight: 950;
  letter-spacing: -0.035em;
}

.test-result-depth__lead {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: var(--ink-700);
  font-size: 1rem;
  line-height: 1.85;
}

.test-result-depth__grid {
  display: grid;
  min-width: 0;
  margin-top: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.test-result-depth__card {
  min-width: 0;
  padding: clamp(1rem, 3.4vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--test-accent) 16%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--test-accent-deep) 5%, transparent);
}

.test-result-depth__card--emphasis {
  background: color-mix(in srgb, var(--test-soft) 52%, white);
}

.test-result-depth__card h4 {
  margin: 0 0 0.55rem;
  color: var(--test-ink);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.test-result-depth__card p {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.92rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

.test-result-depth__card p + p {
  margin-top: 0.65rem;
}

.test-result-depth__basis {
  margin: var(--space-4) 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--test-accent) 15%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--test-soft) 28%, white);
}

.test-result-depth__basis > summary {
  display: grid;
  min-height: 3.1rem;
  padding: 0.78rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  color: var(--test-accent-deep);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.test-result-depth__basis > summary::-webkit-details-marker {
  display: none;
}

.test-result-depth__basis > summary::after {
  content: "＋";
  font-size: 1rem;
  line-height: 1;
}

.test-result-depth__basis[open] > summary::after {
  content: "－";
}

.test-result-depth__basis-body {
  padding: 0.95rem 1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--test-accent) 13%, var(--line));
  color: var(--ink-600);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.86rem;
  line-height: 1.7;
}

.test-result-depth__basis-body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.test-result-depth__basis-body p + p {
  margin-top: 0.7rem;
}

.test-result-depth__basis-note {
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--test-accent) 18%, var(--line));
  font-size: 0.76rem;
}

.test-result__score {
  display: inline-flex;
  margin: var(--space-6) 0;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--test-accent-deep);
}

.test-result__score strong {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 1000;
  line-height: 0.85;
}

.test-result__score span {
  font-weight: 850;
}

.outsider-score {
  display: flex;
  position: relative;
  max-width: 34rem;
  margin: var(--space-4) 0 var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  color: var(--test-accent-deep);
}

.outsider-score > strong {
  font-size: clamp(4.5rem, 18vw, 8rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.85;
}

.outsider-score > span {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 1000;
}

.outsider-score__track {
  width: 100%;
  height: 0.9rem;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--test-soft);
}

.outsider-score__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--test-pop), var(--test-accent));
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.outsider-score__range {
  margin-bottom: var(--space-5);
  color: var(--test-accent-deep);
  font-size: var(--step--1);
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  .outsider-score__track i { transition: none; }
}

.test-result-list,
.test-insights {
  display: grid;
  margin: var(--space-6) 0 0;
  padding: 0;
  gap: var(--space-3);
  list-style: none;
}

.test-result-grid h3 {
  margin-bottom: 0;
}

.test-result-grid h3 + .test-insights,
.test-result-grid h3 + .test-result-list,
.test-result-grid h3 + .axis-list,
.test-result-grid h3 + .metric-list,
.test-result-grid h3 + .palette {
  margin-top: var(--space-4);
}

.test-result-list li,
.test-insight {
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
}

.observation-scoreboard {
  display: flex;
  margin: calc(var(--space-4) * -1) 0 var(--space-5);
  justify-content: center;
  gap: var(--space-2);
}

.observation-scoreboard span {
  display: inline-flex;
  min-height: 2.25rem;
  padding: 0.38rem 0.72rem;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--line));
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  background: var(--paper);
  font-size: var(--step--1);
  font-weight: 800;
}

.observation-scoreboard strong {
  color: var(--test-accent-deep);
  font-size: 1rem;
}

.is-popping {
  animation: test-pop 280ms var(--ease-out);
}

.test-celebration {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.test-celebration i {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 0.62rem;
  height: 1rem;
  border-radius: 0.18rem;
  background: var(--test-accent, #7546e8);
  animation: confetti-fall 820ms var(--ease-out) forwards;
  rotate: 15deg;
}

.test-celebration i:nth-child(2n) { background: var(--test-pop, #45d8bc); }
.test-celebration i:nth-child(3n) { background: #ffd34f; }
.test-celebration i:nth-child(1) { --confetti-x: -9rem; --confetti-r: -210deg; }
.test-celebration i:nth-child(2) { --confetti-x: -7rem; --confetti-r: 180deg; animation-delay: 35ms; }
.test-celebration i:nth-child(3) { --confetti-x: -5rem; --confetti-r: -140deg; animation-delay: 70ms; }
.test-celebration i:nth-child(4) { --confetti-x: -3rem; --confetti-r: 250deg; animation-delay: 15ms; }
.test-celebration i:nth-child(5) { --confetti-x: -1rem; --confetti-r: -260deg; animation-delay: 85ms; }
.test-celebration i:nth-child(6) { --confetti-x: 1rem; --confetti-r: 190deg; animation-delay: 45ms; }
.test-celebration i:nth-child(7) { --confetti-x: 3rem; --confetti-r: -190deg; animation-delay: 95ms; }
.test-celebration i:nth-child(8) { --confetti-x: 5rem; --confetti-r: 280deg; animation-delay: 25ms; }
.test-celebration i:nth-child(9) { --confetti-x: 7rem; --confetti-r: -220deg; animation-delay: 75ms; }
.test-celebration i:nth-child(10) { --confetti-x: 9rem; --confetti-r: 200deg; animation-delay: 50ms; }
.test-celebration i:nth-child(11) { --confetti-x: -11rem; --confetti-r: 260deg; animation-delay: 105ms; }
.test-celebration i:nth-child(12) { --confetti-x: 11rem; --confetti-r: -260deg; animation-delay: 110ms; }

@keyframes test-pop {
  45% { transform: scale(1.035) rotate(-0.5deg); }
}

@keyframes test-panel-in {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -2rem, 0) rotate(0); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--confetti-x), 34rem, 0) rotate(var(--confetti-r)); }
}

.test-insight strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--test-ink);
}

.test-insight span,
.test-insight p {
  color: var(--ink-600);
  font-size: var(--step--1);
}

.test-inline-check {
  display: flex;
  margin-top: var(--space-4);
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-700);
  font-weight: 800;
}

.test-inline-check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--test-accent-deep);
}

.saju-pillars {
  display: grid;
  margin: var(--space-4) 0;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.saju-pillar {
  display: grid;
  min-width: 0;
  min-height: 7rem;
  padding: 0.85rem;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--test-accent) 20%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--test-soft) 55%, #fff);
  text-align: center;
}

.saju-pillar span {
  color: var(--ink-600);
  font-size: 0.75rem;
  font-weight: 800;
}

.saju-pillar strong {
  color: var(--test-ink);
  font-size: 1.15rem;
  font-weight: 950;
}

.saju-pillar b {
  color: var(--test-accent-deep);
  font-size: 1.8rem;
  line-height: 1.1;
}

.saju-pillar--missing {
  background: var(--surface-muted);
}

.saju-pillar--missing strong {
  font-size: 0.9rem;
}

.saju-element-bars {
  display: grid;
  margin: var(--space-4) 0 var(--space-6);
  min-width: 0;
  gap: 0.75rem;
}

.saju-element-bar {
  display: grid;
  min-width: 0;
  gap: 0.38rem;
}

.saju-element-bar > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.saju-element-bar strong {
  color: var(--test-ink);
  font-size: 0.86rem;
}

.saju-element-bar span {
  color: var(--ink-600);
  font-size: 0.75rem;
  text-align: right;
}

.saju-element-bar__track {
  height: 0.66rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--test-accent) 10%, var(--surface-muted));
}

.saju-element-bar__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--test-accent), var(--test-pop));
}

.axis-list,
.metric-list {
  display: grid;
  margin-top: var(--space-6);
  gap: var(--space-4);
}

.axis-row,
.metric-row {
  display: grid;
  gap: var(--space-2);
}

.axis-row__labels,
.metric-row__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-700);
  font-size: var(--step--1);
  font-weight: 800;
}

.axis-row__track,
.metric-row__track {
  position: relative;
  height: 0.72rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--test-accent) 12%, white);
}

.axis-row__bar,
.metric-row__bar {
  width: var(--value, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--test-accent), var(--test-pop));
}

.test-upload {
  position: relative;
  display: grid;
  min-height: 12rem;
  padding: 1rem;
  place-items: center;
  overflow: hidden;
  border: 2px dashed color-mix(in srgb, var(--test-accent) 36%, var(--line));
  border-radius: var(--radius-lg);
  text-align: center;
  background: color-mix(in srgb, var(--test-soft) 54%, white);
}

.test-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.test-upload:focus-within {
  outline: 3px solid color-mix(in srgb, var(--test-accent) 42%, transparent);
  outline-offset: 3px;
}

.test-upload__copy {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.test-upload__preview {
  width: 100%;
  max-height: 14rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.palette,
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.swatch {
  position: relative;
  min-height: 5.5rem;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--swatch, #ddd);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.swatch[aria-pressed="true"],
.swatch.is-selected {
  border-color: var(--test-ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--test-accent);
}

.swatch span {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  left: 0.4rem;
  padding: 0.3rem 0.42rem;
  border-radius: 0.55rem;
  color: #171724;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 850;
}

.palette .swatch {
  cursor: default;
}

.palette .swatch span {
  overflow: hidden;
  padding-inline: 0.28rem;
  font-size: 0.62rem;
  letter-spacing: -0.02em;
  line-height: 1.35;
  overflow-wrap: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.travel-handoff__curtain {
  display: grid;
  min-height: 9rem;
  margin: var(--space-5) 0;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--test-accent) 24%, var(--line));
  border-radius: var(--radius-lg);
  color: var(--test-accent-deep);
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--test-pop) 44%, transparent), transparent 8rem),
    linear-gradient(135deg, var(--test-soft), #fff);
}

.travel-handoff__curtain span {
  font-size: var(--step--1);
  font-weight: 850;
}

.travel-handoff__curtain strong {
  font-size: var(--step-4);
  font-weight: 1000;
  letter-spacing: -0.05em;
}

.observation-board {
  display: grid;
  min-height: 18rem;
  padding: clamp(0.8rem, 3vw, 1.4rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  gap: clamp(0.45rem, 2vw, 0.9rem);
  border-radius: var(--radius-lg);
  background: #20263f;
}

.observation-tile {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: clamp(0.55rem, 2vw, 1rem);
  color: #20263f;
  background: var(--tile, #ffd436);
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 1000;
}

.test-countdown {
  display: grid;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-5);
  place-items: center;
  border: 0.55rem solid var(--test-soft);
  border-top-color: var(--test-accent);
  border-radius: 50%;
  color: var(--test-accent-deep);
  font-size: var(--step-2);
  font-weight: 1000;
}

.test-status {
  min-height: 1.6em;
  margin-top: var(--space-3);
  color: var(--ink-600);
  font-size: var(--step--1);
}

.test-name-preference {
  max-width: 38rem;
  margin: var(--space-5) 0;
  color: var(--ink-700);
}

.test-name-preference--editor {
  padding: clamp(0.9rem, 3vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--test-accent) 22%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--test-soft) 62%, #fff);
}

.test-name-preference__label {
  display: grid;
  gap: 0.55rem;
}

.test-name-preference__label strong {
  color: var(--ink-900);
  font-size: var(--step--1);
}

.test-name-preference__label input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  color: var(--ink-900);
  background: #fff;
  font: inherit;
}

.test-name-preference__label input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--test-accent) 26%, transparent);
  outline-offset: 2px;
}

.test-name-preference__note {
  margin: 0.55rem 0 0;
  color: var(--ink-600);
  font-size: 0.78rem;
  line-height: 1.65;
}

.test-name-preference--compact,
.test-name-preference__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}

.test-name-preference--compact {
  margin-block: var(--space-4);
  font-size: var(--step--1);
}

.test-name-preference__controls {
  margin-top: 0.7rem;
}

.test-name-preference__button {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--test-accent) 24%, var(--line));
  border-radius: 999px;
  color: var(--test-accent-deep);
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.test-result__personal-name {
  margin: 0 0 0.35rem;
  color: var(--ink-700);
  font-size: var(--step-0);
}

.test-result__personal-name strong {
  color: var(--test-accent-deep);
}

@media (max-width: 40rem) {
  .test-office-promo {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .test-office-promo__link {
    width: 100%;
    grid-column: 1 / -1;
  }
}

@media (min-width: 44rem) {
  .test-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  }

  .test-upload-grid,
  .test-field-grid,
  .test-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .test-result-depth__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saju-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .palette,
  .swatch-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 43.99rem) {
  body.theme-tests .d24-vip-benefits {
    position: absolute;
    top: calc(var(--header-height) + 0.5rem);
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
  }

  body.theme-tests .d24-vip-benefits__panel {
    top: calc(100% + 0.6rem);
    right: 0;
    bottom: auto;
    left: auto;
    transform-origin: right top;
  }

  .test-hero {
    padding: 1.25rem 0 1.35rem;
  }

  .test-back-link {
    min-height: 2.45rem;
    margin-bottom: 0.9rem;
    padding: 0.42rem 0.72rem;
  }

  .test-kicker,
  .test-experience .eyebrow {
    margin-bottom: 0.75rem;
  }

  .test-hero h1 {
    margin-bottom: 0.85rem;
    font-size: clamp(2rem, 10.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.058em;
  }

  .test-hero__lead {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.72;
  }

  .test-hero__inner {
    gap: 1.1rem;
  }

  .test-hero__art {
    display: none;
  }

  .test-hero .test-facts {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
    padding: 0 1rem 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .test-hero .test-facts::-webkit-scrollbar {
    display: none;
  }

  .test-hero .test-facts li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .test-hero .test-facts + .button {
    margin-top: 1rem;
  }

  .test-stage {
    padding-bottom: 3rem;
  }

  .test-panel h2,
  .test-question h2 {
    line-height: 1.3;
    letter-spacing: -0.035em;
  }

  .test-progress {
    margin-bottom: var(--space-6);
  }

  .test-question {
    margin-bottom: var(--space-5);
  }

  .test-upload {
    min-height: 9rem;
  }
}

@media (max-width: 30rem) {
  .test-panel {
    padding: 1.1rem;
    border-radius: 1.25rem;
  }

  .test-panel__lead {
    margin-bottom: var(--space-5);
    line-height: 1.72;
  }

  .test-facts {
    gap: 0.38rem;
  }

  .test-facts li,
  .test-fact {
    min-height: 2.05rem;
    padding: 0.33rem 0.58rem;
    font-size: 0.75rem;
  }

  .test-quick-play {
    grid-template-columns: minmax(0, 1fr);
  }

  .test-quick-play .button {
    width: 100%;
  }

  .test-actions,
  .test-result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .test-actions .button,
  .test-result-actions .button {
    width: 100%;
  }

  .test-choice {
    min-height: 4rem;
    padding: 0.86rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.72rem;
  }

  .test-choice__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .test-progress__bar,
  .test-choice {
    transition: none;
  }

  .is-popping,
  .test-celebration i,
  .test-panel:not([hidden]) {
    animation: none;
  }
}