:root {
  --ink: #101a20;
  --paper: #f4f0e6;
  --lime: #e6cf82;
  --purple: #24485a;
  --pink: #c64c3d;
  --muted: #6d706d;
  --line: rgba(16, 26, 32, .14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(circle at 7% 12%, rgba(230,207,130,.25), transparent 28rem), radial-gradient(circle at 90% 80%, rgba(198,76,61,.12), transparent 34rem), repeating-radial-gradient(circle at 0 100%, transparent 0 1.3rem, rgba(36,72,90,.025) 1.35rem 1.42rem, transparent 1.47rem 2.75rem), var(--paper); content: ""; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .7rem 1rem; border-radius: 999px; background: var(--lime); transform: translateY(-180%); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.test-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: min(100% - 2rem, 74rem); min-height: 5.2rem; margin: 0 auto; }
.test-brand { display: inline-flex; align-items: center; gap: .62rem; font-weight: 850; letter-spacing: -.04em; }
.test-brand img { width: 2rem; height: 2rem; border-radius: .6rem; }
.test-badge { padding: .5rem .72rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }

.test-shell { width: min(100% - 2rem, 74rem); min-height: calc(100vh - 10rem); margin: 0 auto; }
.view { animation: view-in .42s cubic-bezier(.2,.75,.2,1) both; }
.eyebrow, .panel-kicker, .question-kicker { margin: 0 0 .9rem; color: var(--purple); font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.intro-view { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); gap: clamp(1.5rem, 4.5vw, 4.5rem); align-items: center; padding: clamp(1rem, 3vh, 2.5rem) 0 3rem; }
.intro-copy { grid-column: 1; }
.intro-copy h1 { max-width: 13.5ch; margin: 0; font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: .94; letter-spacing: -.068em; }
.intro-copy h1 span { background: linear-gradient(100deg, #183d50, #366879 46%, #c64c3d 78%, #bd8d3f); background-clip: text; color: transparent; }
.intro-lede { max-width: 35rem; margin: 1rem 0 0; color: #5f5c64; font-size: clamp(.95rem, 1.3vw, 1.12rem); line-height: 1.62; }
.intro-preview { position: relative; grid-column: 2; grid-row: 1 / span 2; min-height: 31rem; }
.showcase-heading { position: absolute; z-index: 3; top: 0; left: 1.1rem; display: grid; gap: .16rem; }
.showcase-heading span { color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .13em; }
.showcase-heading strong { font-size: .9rem; letter-spacing: -.025em; }
.character-stage { position: absolute; inset: 2.75rem 0 6.45rem; overflow: hidden; border: .45rem solid rgba(255,255,255,.88); border-radius: 2.2rem; background: #10242d; box-shadow: 0 2rem 4.6rem rgba(22,43,53,.22); }
.teaser-character { position: absolute; inset: 0; overflow: hidden; padding: clamp(1.4rem, 3vw, 2.2rem); opacity: 0; color: white; transform: translateX(8%) scale(.97); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.75,.2,1); pointer-events: none; }
.teaser-character::before { position: absolute; right: -18%; bottom: -38%; width: 22rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.17); border-radius: 44% 56% 64% 36%; content: ""; rotate: 18deg; }
.teaser-character.is-active { z-index: 1; opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.teaser-character.mcdv { background: radial-gradient(circle at 85% 18%, rgba(242,200,121,.3), transparent 11rem), linear-gradient(145deg, #3b1720, #10090b 70%); }
.teaser-character.prdv { background: radial-gradient(circle at 85% 18%, rgba(255,224,97,.36), transparent 12rem), linear-gradient(145deg, #712c41, #24101b 72%); }
.teaser-character.mcbv { background: radial-gradient(circle at 82% 18%, rgba(202,255,35,.4), transparent 12rem), linear-gradient(145deg, #163a2b, #0a1713 72%); }
.teaser-character.mrds { background: radial-gradient(circle at 84% 18%, rgba(119,174,255,.34), transparent 12rem), linear-gradient(145deg, #26304f, #121423 72%); }
.teaser-character.tone-0 { background: radial-gradient(circle at 84% 18%, rgba(230,207,130,.3), transparent 11rem), linear-gradient(145deg, #264957, #0d1b21 72%); }
.teaser-character.tone-1 { background: radial-gradient(circle at 84% 18%, rgba(198,76,61,.3), transparent 11rem), linear-gradient(145deg, #5b2e2a, #1b1010 72%); }
.teaser-character.tone-2 { background: radial-gradient(circle at 84% 18%, rgba(178,199,204,.25), transparent 11rem), linear-gradient(145deg, #32454a, #10171a 72%); }
.teaser-character.tone-3 { background: radial-gradient(circle at 84% 18%, rgba(206,164,83,.28), transparent 11rem), linear-gradient(145deg, #56462f, #17130e 72%); }
.teaser-character img { position: absolute; z-index: 1; right: -2%; bottom: -5%; width: 59%; height: 105%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 1.1rem 1.2rem rgba(0,0,0,.26)); }
.teaser-copy { position: relative; z-index: 2; display: flex; justify-content: center; width: 47%; height: 100%; flex-direction: column; }
.teaser-copy small { color: var(--lime); font-size: .7rem; font-weight: 950; letter-spacing: .15em; }
.teaser-copy h2 { max-width: 8ch; margin: .6rem 0 .7rem; font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.02; letter-spacing: -.055em; }
.teaser-copy p { max-width: 14rem; margin: 0; color: rgba(255,255,255,.72); font-size: .76rem; line-height: 1.6; }
.character-picker { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3rem; }
.character-picker button { position: relative; display: grid; place-items: center; min-width: 0; width: 100%; height: 2.7rem; overflow: hidden; padding: .08rem; border: 1px solid rgba(9,9,13,.11); border-radius: .7rem; background: rgba(255,255,255,.74); box-shadow: 0 .45rem 1rem rgba(32,21,59,.09); backdrop-filter: blur(16px); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.character-picker button:hover, .character-picker button.is-active { border-color: var(--purple); background: white; transform: translateY(-3px); }
.character-picker button:focus-visible { outline: 3px solid rgba(113,60,255,.22); outline-offset: 2px; }
.character-picker img { width: 100%; height: 100%; object-fit: contain; }
.character-picker span { position: absolute; right: .08rem; bottom: .08rem; padding: .12rem .18rem; border-radius: .24rem; background: rgba(9,9,13,.88); color: white; font-size: .34rem; font-weight: 900; letter-spacing: .035em; }

.nickname-card { grid-column: 1; width: min(100%, 36rem); padding: 1.35rem; border: 1px solid rgba(255,255,255,.64); border-radius: 1.55rem; background: rgba(255,255,255,.72); box-shadow: 0 1.8rem 4rem rgba(27,16,59,.11); backdrop-filter: blur(20px); }
.nickname-card > label:first-child { display: block; margin-bottom: .68rem; font-size: .78rem; font-weight: 820; }
.nickname-control { position: relative; }
.nickname-control input { width: 100%; height: 3.8rem; padding: 0 4.3rem 0 1rem; border: 1px solid var(--line); border-radius: 1rem; outline: none; background: white; font-size: 1.05rem; font-weight: 720; transition: border-color .2s, box-shadow .2s; }
.nickname-control input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(113,60,255,.1); }
.nickname-control span { position: absolute; top: 50%; right: 1rem; color: #918e95; font-size: .7rem; transform: translateY(-50%); }
.field-note, .field-error { margin: .55rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.field-error { min-height: 1rem; color: #c6294a; font-weight: 700; }
.consent-check { display: grid !important; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; margin: .8rem 0 1rem !important; color: #68656d; font-size: .72rem !important; font-weight: 560 !important; line-height: 1.55; }
.consent-check input { width: 1.05rem; height: 1.05rem; margin: .12rem 0 0; accent-color: var(--purple); }
.consent-check a { color: var(--purple); font-weight: 780; text-decoration: underline; text-underline-offset: 2px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.9rem; padding: 0 1.2rem; border: 0; border-radius: 1rem; background: var(--ink); color: white; cursor: pointer; font-weight: 850; box-shadow: 0 .9rem 2rem rgba(9,9,13,.18); transition: transform .18s, background .18s; }
.primary-button:hover { background: var(--purple); transform: translateY(-2px); }
.primary-button:disabled { cursor: wait; opacity: .55; transform: none; }
.primary-button span { color: var(--lime); font-size: 1.3rem; }
.intro-footnote { grid-column: 1; margin: -1rem 0 0; color: #8a878e; font-size: .7rem; }

.question-view { max-width: 68rem; margin: 0 auto; padding: clamp(1rem, 4vh, 3rem) 0 4rem; }
.question-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.question-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: .95; letter-spacing: -.06em; }
.question-counter { color: #96929b; font-size: .8rem; font-weight: 800; }
.question-counter b { color: var(--ink); font-size: 1.7rem; }
.progress-track { height: .42rem; margin: 1.3rem 0 1rem; overflow: hidden; border-radius: 999px; background: rgba(9,9,13,.09); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink), var(--lime)); transition: width .35s ease; }
.question-guide { margin: 0 0 1.2rem; color: var(--muted); font-size: .85rem; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.4rem); }
.choice-card { position: relative; display: flex; min-width: 0; padding: 0; overflow: hidden; flex-direction: column; border: 0; border-radius: clamp(1rem, 2vw, 1.7rem); background: var(--ink); cursor: pointer; box-shadow: 0 1.5rem 3.5rem rgba(31,18,64,.13); transition: transform .18s, box-shadow .18s; }
.choice-card:hover { transform: translateY(-5px); box-shadow: 0 2rem 4rem rgba(31,18,64,.2); }
.choice-card:focus-visible { outline: 4px solid var(--lime); outline-offset: 4px; }
.choice-media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; }
.choice-grid[data-aspect="portrait"] .choice-media { aspect-ratio: 4/5; }
.choice-media img { width: 200%; max-width: none; height: 200%; object-fit: cover; transform: translate(0, var(--sheet-y, 0%)); pointer-events: none; }
.choice-card[data-choice="b"] img { transform: translate(-50%, var(--sheet-y, 0%)); }
.choice-label { position: static; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3.8rem; padding: .75rem 1rem; border-top: 1px solid rgba(255,255,255,.12); background: var(--ink); color: white; text-align: left; }
.choice-label span { font-size: clamp(.76rem, 1.5vw, .93rem); font-weight: 780; line-height: 1.35; }
.choice-label b { display: grid; flex: 0 0 auto; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: .76rem; }
.choice-card.is-selected::after { position: absolute; inset: 0; border: .42rem solid var(--lime); border-radius: inherit; content: ""; pointer-events: none; }
.back-button { margin-top: 1rem; padding: .7rem 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; font-weight: 730; }

.loading-view, .error-view { display: grid; place-items: center; align-content: center; min-height: 65vh; text-align: center; }
.loading-view h2, .error-view h2 { max-width: 14ch; margin: 0; font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: .94; letter-spacing: -.07em; }
.loading-view > p:last-child, .error-view > p { max-width: 34rem; margin: 1.3rem auto 0; color: var(--muted); line-height: 1.7; }
.loading-mark { display: flex; gap: .45rem; margin-bottom: 1.8rem; }
.loading-mark span { width: .8rem; height: .8rem; border-radius: 50%; background: var(--purple); animation: loading-bounce 1s infinite alternate; }
.loading-mark span:nth-child(2) { background: var(--pink); animation-delay: .18s; }
.loading-mark span:nth-child(3) { background: var(--lime); animation-delay: .36s; }
.error-view .primary-button { width: auto; margin-top: 1.4rem; padding: 0 1.5rem; }

.result-view { max-width: 64rem; margin: 0 auto; padding: 1rem 0 5rem; }
.result-hero { position: relative; isolation: isolate; min-height: 34rem; overflow: hidden; padding: clamp(2rem, 6vw, 4.5rem); border-radius: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(circle at 80% 20%, rgba(230,207,130,.2), transparent 18rem), radial-gradient(circle at 10% 90%, rgba(198,76,61,.22), transparent 22rem), linear-gradient(145deg, #23414e, #0c171c 56%, #4e2a22); color: white; box-shadow: 0 2.6rem 5.5rem rgba(25,45,53,.25); }
.result-hero::after { position: absolute; z-index: 0; right: -8%; bottom: -35%; width: 30rem; height: 30rem; border: 1px solid rgba(255,255,255,.12); border-radius: 44% 56% 63% 37%; content: ""; pointer-events: none; rotate: 20deg; }
.result-character { position: absolute; z-index: 1; top: 1.5rem; right: .5rem; width: min(44%, 28rem); height: calc(100% - 4rem); object-fit: contain; object-position: center top; filter: drop-shadow(0 1.4rem 1.8rem rgba(0,0,0,.28)); pointer-events: none; user-select: none; }
.result-owner, .result-code, .result-hero h1, .result-alias, .result-description { position: relative; z-index: 2; max-width: 57%; }
.result-owner { margin: 0 0 3rem; color: rgba(255,255,255,.62); font-size: .78rem; font-weight: 720; }
.result-owner span { color: var(--lime); }
.result-code { margin: 0; color: var(--lime); font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 950; letter-spacing: -.075em; line-height: .8; }
.result-hero h1 { max-width: 14ch; margin: 1rem 0 .5rem; font-size: clamp(2.3rem, 6vw, 5rem); line-height: .98; letter-spacing: -.065em; word-break: keep-all; }
.result-alias { margin: 0; color: #e6cf82; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.result-description { max-width: 34rem; margin: 1.5rem 0 0; color: rgba(255,255,255,.72); font-size: clamp(.92rem, 1.5vw, 1.08rem); line-height: 1.7; }
.score-orbit { position: absolute; z-index: 3; right: clamp(2rem, 6vw, 5rem); bottom: clamp(2rem, 5vw, 4rem); display: grid; place-items: center; width: clamp(8rem, 16vw, 11rem); aspect-ratio: 1; border: 1px solid rgba(202,255,35,.5); border-radius: 50%; background: rgba(9,9,13,.68); backdrop-filter: blur(18px); }
.score-orbit span { align-self: end; color: rgba(255,255,255,.6); font-size: .62rem; font-weight: 750; }
.score-orbit strong { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: .8; letter-spacing: -.08em; }
.score-orbit small { align-self: start; color: var(--lime); font-weight: 800; }
.percentile-note { position: absolute; right: clamp(2rem, 6vw, 5rem); bottom: 1rem; margin: 0; color: rgba(255,255,255,.55); font-size: .66rem; }

.result-panel, .share-panel, .app-cta { margin-top: 1.2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.7); border-radius: clamp(1.3rem, 3vw, 2.2rem); background: rgba(255,255,255,.72); box-shadow: 0 1.5rem 4rem rgba(31,18,64,.08); backdrop-filter: blur(20px); }
.result-panel h2, .share-panel h2, .app-cta h2 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.06em; }
.trait-list { --trait-1: #315e72; --trait-2: #c64c3d; --trait-3: #c69a43; --trait-4: #4f8176; --trait-5: #7293a0; display: grid; grid-template-columns: minmax(9rem, 10.75rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; max-width: 44rem; }
.trait-donut { position: relative; display: grid; place-items: center; width: 100%; max-width: 10.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--trait-segments); box-shadow: 0 .9rem 2.2rem rgba(31,18,64,.14); }
.trait-donut::after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: inset 0 0 0 1px rgba(9,9,13,.06); }
.trait-donut-center { position: relative; z-index: 1; display: grid; gap: .16rem; text-align: center; }
.trait-donut-center small { color: var(--muted); font-size: .58rem; font-weight: 780; }
.trait-donut-center strong { color: var(--ink); font-size: .72rem; font-weight: 920; }
.trait-slice-label { position: absolute; z-index: 2; display: grid; justify-items: center; min-width: 2.5rem; padding: .12rem .24rem; border-radius: .34rem; background: rgba(9,9,13,.62); color: white; line-height: 1.05; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.trait-slice-label span { font-size: .48rem; font-weight: 820; white-space: nowrap; }
.trait-slice-label b { margin-top: .08rem; font-size: .52rem; font-weight: 950; white-space: nowrap; }
.trait-slice-label.is-small { background: rgba(9,9,13,.76); }
.trait-legend { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.trait-row { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; min-width: 0; padding: .55rem .7rem; border: 1px solid rgba(9,9,13,.055); border-radius: .82rem; background: rgba(255,255,255,.58); }
.trait-row.is-primary { border-color: rgba(115,87,255,.22); background: rgba(255,255,255,.92); box-shadow: 0 .35rem 1rem rgba(31,18,64,.07); }
.trait-swatch { width: .72rem; aspect-ratio: 1; border-radius: 50%; background: var(--trait-color); }
.trait-row span { overflow: hidden; font-size: .76rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.trait-row b { color: var(--ink); text-align: right; font-size: .78rem; }

.code-panel { background: linear-gradient(140deg, rgba(202,255,35,.12), rgba(255,255,255,.82) 44%, rgba(113,60,255,.1)); }
.code-panel-intro { max-width: 40rem; margin: -.45rem 0 1.5rem; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.axis-explanation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.axis-explanation-card { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; min-width: 0; padding: 1rem; border: 1px solid rgba(9,9,13,.08); border-radius: 1.25rem; background: rgba(255,255,255,.78); }
.axis-letter { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--ink); color: var(--lime); font-size: 1.45rem; font-weight: 950; line-height: 1; }
.axis-explanation-card h3 { margin: .08rem 0 .35rem; font-size: .88rem; line-height: 1.3; }
.axis-explanation-card p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.axis-opposite { display: grid; gap: .22rem; margin-top: .65rem; padding: .52rem .58rem 0; border-top: 1px dashed rgba(9,9,13,.12); color: var(--muted); }
.axis-opposite small { color: rgba(88,84,101,.72); font-size: .5rem; font-weight: 850; letter-spacing: .045em; }
.axis-opposite-line { display: flex; gap: .35rem; align-items: center; min-width: 0; font-size: .61rem; font-weight: 680; line-height: 1.35; }
.axis-opposite-line b { display: grid; flex: none; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: .38rem; background: rgba(9,9,13,.07); color: rgba(9,9,13,.58); font-size: .55rem; }

.match-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.match-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: 1.3rem; background: var(--ink); color: white; }
.match-character-wrap { display: grid; place-items: center; height: 11rem; margin: .38rem .38rem 0; overflow: hidden; border-radius: 1rem; background: radial-gradient(circle at 50% 42%, rgba(189,90,67,.42), transparent 62%), linear-gradient(145deg, #3b1720, #110c0e); }
.match-character { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .7rem .8rem rgba(0,0,0,.28)); }
.match-copy { min-width: 0; padding: .9rem 1.1rem 1.1rem; }
.match-card small { color: var(--lime); font-size: .62rem; font-weight: 850; letter-spacing: .08em; }
.match-card strong { display: block; margin: .55rem 0 .45rem; font-size: .95rem; line-height: 1.35; }
.match-card p { margin: 0; color: rgba(255,255,255,.56); font-size: .68rem; line-height: 1.5; }

.share-panel { background: linear-gradient(135deg, rgba(113,60,255,.1), rgba(255,255,255,.78) 42%, rgba(202,255,35,.13)); }
.share-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.share-button { min-height: 3.2rem; padding: .65rem; border: 1px solid var(--line); border-radius: 1rem; background: white; cursor: pointer; font-size: .72rem; font-weight: 830; transition: transform .18s, box-shadow .18s; }
.share-button:hover { transform: translateY(-3px); box-shadow: 0 .8rem 1.8rem rgba(22,15,43,.12); }
.share-button:disabled { cursor: wait; filter: saturate(.45); opacity: .56; transform: none; }
.share-button.kakao { background: #fee500; border-color: transparent; color: #191600; }
.share-button.naver { background: #03c75a; border-color: transparent; color: white; }
.share-button.instagram { background: linear-gradient(120deg, #ffb13b, #ef2777, #713cff); border-color: transparent; color: white; }
.share-button.story { background: #17131e; border-color: transparent; color: white; }
.share-status { min-height: 1rem; margin: .75rem 0 0; color: var(--purple); font-size: .7rem; font-weight: 700; }

body.share-fallback-open { overflow: hidden; }
.share-fallback { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; }
.share-fallback-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5,5,7,.76); backdrop-filter: blur(14px); cursor: default; }
.share-fallback-card { position: relative; width: min(100%, 30rem); max-height: calc(100vh - 2rem); padding: 1.7rem; overflow-y: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 1.5rem; background: linear-gradient(155deg,#27212f,#111116 70%); color: white; box-shadow: 0 2rem 6rem rgba(0,0,0,.5); }
.share-fallback-card .panel-kicker { color: var(--lime); }
.share-fallback-card h2 { max-width: 14ch; margin: 0 2.3rem .75rem 0; font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.05; letter-spacing: -.055em; }
.share-fallback-description { margin: 0; color: rgba(255,255,255,.68); font-size: .82rem; line-height: 1.65; }
.share-fallback-close { position: absolute; top: 1rem; right: 1rem; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.08); color: white; cursor: pointer; font-size: 1.25rem; }
.share-fallback-preview { width: min(100%, 18rem); max-height: 26rem; margin: 1.1rem auto 0; object-fit: contain; border-radius: 1rem; background: #09090d; box-shadow: 0 1.2rem 2.5rem rgba(0,0,0,.3); }
.share-fallback-steps { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid rgba(202,255,35,.3); border-radius: 1rem; background: rgba(202,255,35,.08); color: white; font-size: .76rem; font-weight: 760; line-height: 1.55; }
.share-fallback-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.share-fallback-primary, .share-fallback-secondary { display: grid; place-items: center; min-height: 3.25rem; padding: .7rem 1rem; border-radius: .9rem; cursor: pointer; font-size: .78rem; font-weight: 850; text-align: center; }
.share-fallback-primary { border: 0; background: var(--lime); color: var(--ink); }
.share-fallback-secondary { border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.08); color: white; }
.share-fallback-status { min-height: 1.2rem; margin: .65rem 0 0; color: var(--lime); font-size: .72rem; font-weight: 700; text-align: center; }

.app-cta { position: relative; overflow: hidden; background: var(--ink); color: white; }
.app-cta::after { position: absolute; right: -7rem; bottom: -10rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(113,60,255,.65), transparent 68%); content: ""; }
.app-cta .panel-kicker { color: var(--lime); }
.app-cta h2 { max-width: 17ch; }
.app-cta > p:not(.panel-kicker) { max-width: 36rem; color: rgba(255,255,255,.6); line-height: 1.65; }
.store-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.store-button { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; min-width: 12rem; padding: .72rem 1rem; border: 1px solid rgba(255,255,255,.17); border-radius: 1rem; background: rgba(255,255,255,.08); }
.store-button > span:first-child { color: var(--lime); }
.store-button small, .store-button strong { display: block; }
.store-button small { color: rgba(255,255,255,.52); font-size: .55rem; }
.store-button strong { margin-top: .12rem; font-size: .82rem; }
.test-recommendations { position: relative; overflow: hidden; margin-top: 1.2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid color-mix(in srgb, var(--purple) 24%, white); border-radius: clamp(1.3rem, 3vw, 2.2rem); background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 9%, white), rgba(255,255,255,.86) 50%, color-mix(in srgb, var(--lime) 11%, white)); box-shadow: 0 1.5rem 4rem rgba(31,18,64,.09); }
.test-recommendations::before { position: absolute; top: -9rem; right: -5rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 24%, transparent), transparent 68%); content: ""; pointer-events: none; }
.recommendation-heading { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.test-recommendations .panel-kicker { margin-bottom: .65rem; color: var(--purple); }
.test-recommendations h2 { max-width: 16ch; margin: 0; font-size: clamp(2rem, 4.8vw, 3.8rem); line-height: .94; letter-spacing: -.07em; }
.recommendation-all { flex: 0 0 auto; padding: .7rem .9rem; border: 1px solid rgba(17,16,24,.13); border-radius: 999px; background: rgba(255,255,255,.64); color: var(--ink); font-size: .68rem; font-weight: 850; }
.recommendation-all span { color: var(--purple); }
.recommendation-lede { position: relative; z-index: 1; max-width: 38rem; margin: 1rem 0 1.4rem; color: color-mix(in srgb, var(--ink) 58%, transparent); font-size: .78rem; line-height: 1.6; }
.recommendation-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .72rem; }
.recommendation-card { position: relative; display: flex; min-height: 15rem; padding: 1.25rem; overflow: hidden; flex-direction: column; border: 1px solid rgba(255,255,255,.13); border-radius: 1.25rem; background: var(--ink); color: white; box-shadow: 0 .9rem 2.2rem rgba(17,16,24,.12); transition: transform .2s ease, box-shadow .2s ease; }
.recommendation-card::after { position: absolute; right: -3.5rem; bottom: -4rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--purple) 72%, transparent), transparent 70%); content: ""; pointer-events: none; }
.recommendation-card.tone-2 { background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 68%, #111018), #111018); }
.recommendation-card.tone-3 { background: linear-gradient(145deg, color-mix(in srgb, var(--pink) 56%, #111018), #111018); }
.recommendation-card:hover, .recommendation-card:focus-visible { box-shadow: 0 1.25rem 2.7rem rgba(17,16,24,.2); transform: translateY(-4px); }
.recommendation-card:focus-visible { outline: 4px solid color-mix(in srgb, var(--purple) 24%, transparent); outline-offset: 3px; }
.recommendation-card small { position: relative; z-index: 1; color: var(--lime); font-size: .56rem; font-weight: 850; letter-spacing: .06em; }
.recommendation-card strong { position: relative; z-index: 1; margin-top: auto; padding-top: 2rem; font-size: clamp(1.2rem, 2.5vw, 1.75rem); line-height: 1.05; letter-spacing: -.05em; }
.recommendation-card > span { position: relative; z-index: 1; display: -webkit-box; margin-top: .55rem; overflow: hidden; color: rgba(255,255,255,.62); font-size: .66rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recommendation-card b { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; color: white; font-size: .68rem; }
.recommendation-card b i { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: .85rem; font-style: normal; }
.restart-button { display: flex; align-items: center; justify-content: center; gap: .55rem; width: min(100%, 28rem); min-height: 3.8rem; margin: 1.35rem auto 0; padding: .75rem 1.2rem; border: 2px solid var(--ink); border-radius: 1.1rem; background: rgba(255,255,255,.78); color: var(--ink); cursor: pointer; box-shadow: 0 .9rem 2rem rgba(31,18,64,.1); font-size: .82rem; font-weight: 860; transition: transform .18s, background .18s, color .18s, box-shadow .18s; }
.restart-button span { color: var(--purple); font-size: 1.2rem; line-height: 1; }
.restart-button:hover { background: var(--ink); color: white; box-shadow: 0 1.2rem 2.6rem rgba(31,18,64,.2); transform: translateY(-2px); }
.restart-button:hover span { color: var(--lime); }
.restart-button:focus-visible { outline: 4px solid rgba(113,60,255,.2); outline-offset: 3px; }

.test-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, 74rem); min-height: 6rem; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.12); color: #8c8992; font-size: .67rem; }
.test-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; }
.test-footer a:hover { color: var(--lime); }

@keyframes view-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes loading-bounce { to { transform: translateY(-.8rem); } }

@media (max-width: 860px) {
  .intro-view { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1rem; }
  .intro-copy { grid-row: 1; }
  .intro-copy h1 { font-size: clamp(2.6rem, 8vw, 4.1rem); }
  .nickname-card { grid-column: 1; grid-row: 2; }
  .intro-footnote { grid-column: 1; grid-row: 3; margin-top: -.45rem; }
  .intro-preview { grid-column: 1; grid-row: 4; min-height: 23.5rem; }
  .result-character { top: 3.5rem; right: -.5rem; width: min(46%, 23rem); height: calc(100% - 7rem); }
  .score-orbit { position: relative; right: auto; bottom: auto; margin: 2rem 0 0 auto; }
  .percentile-note { position: static; margin-top: .8rem; }
  .match-list { grid-template-columns: 1fr; }
  .match-card { grid-template-columns: minmax(8rem, 9.5rem) 1fr; grid-template-rows: none; align-items: center; }
  .match-character-wrap { width: calc(100% - .38rem); height: 9rem; margin: .38rem; }
  .match-copy { padding: 1rem 1rem 1rem .55rem; }
  .share-grid { grid-template-columns: repeat(2, 1fr); }
  .recommendation-grid { grid-template-columns: 1fr; }
  .recommendation-card { min-height: 10.5rem; }
}

@media (max-width: 600px) {
  .test-header, .test-shell, .test-footer { width: min(100% - 1.25rem, 74rem); }
  .test-header { min-height: 4.5rem; }
  .test-badge { font-size: .55rem; }
  .intro-view { gap: .9rem; padding-top: .45rem; }
  .intro-copy h1 { max-width: none; font-size: clamp(2rem, 8.6vw, 2.45rem); line-height: .96; word-break: keep-all; }
  .intro-lede { margin-top: .75rem; font-size: .92rem; line-height: 1.55; }
  .nickname-card { padding: 1.05rem; border-radius: 1.3rem; }
  .intro-preview { min-height: 20.5rem; margin-top: .4rem; }
  .showcase-heading { left: .6rem; }
  .character-stage { inset: 2.5rem 0 5.25rem; border-width: .3rem; border-radius: 1.45rem; }
  .teaser-character { padding: 1.05rem; }
  .teaser-character img { right: -5%; width: 57%; height: 104%; }
  .teaser-copy { width: 51%; }
  .teaser-copy small { font-size: .55rem; }
  .teaser-copy h2 { margin: .4rem 0 .45rem; font-size: clamp(1.15rem, 5vw, 1.55rem); }
  .teaser-copy p { font-size: .65rem; line-height: 1.45; }
  .character-picker { gap: .2rem; }
  .character-picker button { width: 100%; height: 2.25rem; border-radius: .55rem; }
  .character-picker span { font-size: .3rem; }
  .choice-grid { gap: .55rem; }
  .choice-card { border-radius: 1rem; }
  .choice-label { min-height: 3.3rem; padding: .55rem .65rem; }
  .choice-label span { font-size: .68rem; }
  .choice-label b { width: 1.65rem; height: 1.65rem; }
  /* Compact mobile results: keep every insight while fitting more into one capture. */
  .result-view { padding: .15rem 0 2.5rem; }
  .result-hero { min-height: 19rem; padding: 1.15rem; border-radius: 1.35rem; box-shadow: 0 1.4rem 3rem rgba(28,14,63,.2); }
  .result-hero::after { right: -28%; bottom: -45%; width: 18rem; height: 18rem; }
  .result-owner { max-width: 100%; margin: 0 0 1rem; font-size: .65rem; }
  .result-code, .result-hero h1, .result-alias, .result-description { max-width: 56%; }
  .result-code { font-size: clamp(3rem, 15vw, 3.75rem); line-height: .78; }
  .result-hero h1 { margin: .55rem 0 .32rem; font-size: clamp(1.45rem, 7vw, 1.85rem); line-height: 1; }
  .result-alias { font-size: .56rem; line-height: 1.3; }
  .result-description { margin-top: .7rem; font-size: .68rem; line-height: 1.45; }
  .result-character { position: absolute; top: 2.6rem; right: -.75rem; width: 52%; height: calc(100% - 3.1rem); margin: 0; object-position: center bottom; }
  .score-orbit { position: absolute; right: .8rem; bottom: .7rem; width: 4.65rem; margin: 0; border-color: rgba(202,255,35,.7); }
  .score-orbit span { font-size: .48rem; }
  .score-orbit strong { font-size: 2rem; }
  .score-orbit small { font-size: .58rem; }
  .percentile-note { position: absolute; right: auto; bottom: .7rem; left: 1.15rem; max-width: 53%; margin: 0; font-size: .52rem; line-height: 1.35; }

  .result-panel, .share-panel, .app-cta, .test-recommendations { margin-top: .58rem; padding: .95rem; border-radius: 1.15rem; box-shadow: 0 .8rem 2rem rgba(31,18,64,.065); }
  .result-panel h2, .share-panel h2, .app-cta h2, .test-recommendations h2 { margin: 0 0 .72rem; font-size: 1.38rem; line-height: 1.04; }
  .result-panel .panel-kicker, .share-panel .panel-kicker, .app-cta .panel-kicker, .test-recommendations .panel-kicker { margin-bottom: .42rem; font-size: .55rem; }

  .trait-list { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .7rem; }
  .trait-donut { max-width: 6.75rem; }
  .trait-donut-center { gap: .08rem; }
  .trait-donut-center small { font-size: .5rem; }
  .trait-donut-center strong { font-size: .6rem; }
  .trait-slice-label { min-width: 1.6rem; padding: .07rem .1rem; border-radius: .22rem; }
  .trait-slice-label span { font-size: .35rem; }
  .trait-slice-label b { margin-top: .03rem; font-size: .38rem; }
  .trait-legend { gap: .28rem; }
  .trait-row { grid-template-columns: .58rem minmax(0, 1fr) auto; gap: .4rem; padding: .36rem .42rem; border-radius: .65rem; }
  .trait-swatch { width: .56rem; }
  .trait-row span, .trait-row b { font-size: .64rem; }

  .code-panel-intro { margin: -.22rem 0 .68rem; font-size: .65rem; line-height: 1.4; }
  .axis-explanation-grid { grid-template-columns: 1fr; gap: .5rem; }
  .axis-explanation-card { gap: .62rem; padding: .72rem; border-radius: .82rem; }
  .axis-letter { width: 1.9rem; height: 1.9rem; border-radius: .62rem; font-size: .92rem; }
  .axis-explanation-card h3 { margin: .02rem 0 .22rem; font-size: .72rem; line-height: 1.3; }
  .axis-explanation-card p { display: block; overflow: visible; font-size: .61rem; line-height: 1.5; }
  .axis-opposite { gap: .12rem; margin-top: .38rem; padding: .32rem .18rem 0; }
  .axis-opposite small { font-size: .42rem; }
  .axis-opposite-line { gap: .22rem; align-items: flex-start; font-size: .48rem; }
  .axis-opposite-line b { width: .88rem; height: .88rem; border-radius: .28rem; font-size: .43rem; }

  .match-list { grid-template-columns: 1fr; gap: .55rem; }
  .match-card { display: grid; grid-template-columns: minmax(7.6rem, 36%) minmax(0, 1fr); grid-template-rows: none; align-items: stretch; min-height: 10rem; border-radius: .95rem; }
  .match-character-wrap { width: auto; height: auto; min-height: 9.55rem; margin: .22rem; border-radius: .75rem; }
  .match-character { padding: .22rem; }
  .match-copy { align-self: center; padding: .85rem .9rem .85rem .55rem; }
  .match-card small { font-size: .54rem; }
  .match-card strong { margin: .38rem 0 .32rem; font-size: .78rem; line-height: 1.35; word-break: keep-all; }
  .match-card p { display: block; overflow: visible; font-size: .61rem; line-height: 1.55; word-break: keep-all; }

  .share-grid { grid-template-columns: repeat(3, 1fr); gap: .38rem; }
  .share-button { min-height: 2.6rem; padding: .45rem .3rem; border-radius: .72rem; font-size: .61rem; }
  .share-button.copy { grid-column: auto; }
  .share-status { min-height: .55rem; margin-top: .42rem; font-size: .58rem; }

  .app-cta > p:not(.panel-kicker) { margin: -.1rem 0 0; font-size: .67rem; line-height: 1.45; }
  .store-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .42rem; margin-top: .72rem; }
  .store-button { min-width: 0; gap: .4rem; padding: .55rem .62rem; border-radius: .75rem; }
  .store-button small { font-size: .48rem; }
  .store-button strong { font-size: .68rem; }
  .recommendation-heading { align-items: flex-start; }
  .recommendation-all { padding: .48rem .6rem; font-size: .55rem; }
  .recommendation-lede { margin: -.1rem 0 .72rem; font-size: .62rem; line-height: 1.45; }
  .recommendation-grid { gap: .42rem; }
  .recommendation-card { min-height: 8.6rem; padding: .82rem; border-radius: .9rem; }
  .recommendation-card strong { padding-top: 1rem; font-size: 1.05rem; }
  .recommendation-card > span { margin-top: .35rem; font-size: .56rem; }
  .recommendation-card b { margin-top: .62rem; font-size: .58rem; }
  .recommendation-card b i { width: 1.45rem; height: 1.45rem; font-size: .7rem; }
  .restart-button { min-height: 3rem; margin-top: .72rem; border-radius: .85rem; font-size: .72rem; }
  .test-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 1.2rem 0; }
  .test-footer nav { justify-content: flex-start; }
}

.mytest-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: clamp(2rem, 6vw, 5rem) 0; }
.mytest-hub-card { display: grid; min-height: 14rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(255,255,255,.1); border-radius: 1.6rem; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--ink); color: white; text-decoration: none; box-shadow: 0 1.2rem 3rem rgba(14,10,23,.12); transition: transform .2s ease, border-color .2s ease; }
.mytest-hub-card:nth-child(3n + 2) { background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 72%, #111018), #111018); }
.mytest-hub-card:nth-child(3n) { background: linear-gradient(145deg, color-mix(in srgb, var(--pink) 62%, #111018), #111018); }
.mytest-hub-card:hover, .mytest-hub-card:focus-visible { transform: translateY(-4px); border-color: var(--lime); }
.mytest-hub-card small { color: var(--lime); font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.mytest-hub-card strong { align-self: end; margin-top: 2rem; font-size: clamp(1.55rem, 4vw, 2.5rem); letter-spacing: -.06em; }
.mytest-hub-card span { margin-top: .8rem; color: rgba(255,255,255,.66); font-size: .82rem; line-height: 1.65; }
.mytest-hub-card b { align-self: end; margin-top: 1.2rem; color: var(--lime); font-size: .76rem; }
@media (max-width: 600px) { .mytest-hub-grid { grid-template-columns: 1fr; } .mytest-hub-card { min-height: 11rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}