@font-face { font-display: swap; font-family: "Mitr"; font-style: normal; font-weight: 400; src: url("assets/fonts/Mitr-Regular.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Mitr"; font-style: normal; font-weight: 500; src: url("assets/fonts/Mitr-Medium.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Mitr"; font-style: normal; font-weight: 600; src: url("assets/fonts/Mitr-SemiBold.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Mitr"; font-style: normal; font-weight: 700; src: url("assets/fonts/Mitr-Bold.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Chakra Petch"; font-style: normal; font-weight: 400; src: url("assets/fonts/ChakraPetch-Regular.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Chakra Petch"; font-style: normal; font-weight: 500; src: url("assets/fonts/ChakraPetch-Medium.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Chakra Petch"; font-style: normal; font-weight: 600; src: url("assets/fonts/ChakraPetch-SemiBold.ttf") format("truetype"); }
@font-face { font-display: swap; font-family: "Chakra Petch"; font-style: normal; font-weight: 700; src: url("assets/fonts/ChakraPetch-Bold.ttf") format("truetype"); }

:root {
  --paper: #f4eee4;
  --paper-deep: #e8ddcc;
  --ink: #171516;
  --muted: #746b63;
  --line: rgba(23, 21, 22, .16);
  --line-strong: rgba(23, 21, 22, .4);
  --red: #d63c31;
  --red-dark: #a92520;
  --gold: #d4a64b;
  --cream: #fff9ef;
  --panel: #1b1819;
  --panel-soft: #262123;
  --shadow: 0 22px 60px rgba(35, 26, 21, .16);
  --shadow-deep: 0 30px 80px rgba(11, 10, 11, .3);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #171516;
  --paper-deep: #272124;
  --ink: #f5ecdf;
  --muted: #b8a99a;
  --line: rgba(245, 236, 223, .18);
  --line-strong: rgba(245, 236, 223, .44);
  --red: #f0604e;
  --red-dark: #ff8b72;
  --gold: #e5bd66;
  --cream: #2a2423;
  --panel: #0f0e0f;
  --panel-soft: #242022;
  --shadow: 0 22px 60px rgba(0, 0, 0, .28);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: "Mitr", "Leelawadee UI", Tahoma, sans-serif; line-height: 1.55; margin: 0; min-width: 0; }
body::before { background-image: radial-gradient(rgba(26, 21, 18, .34) .45px, transparent .45px); background-size: 5px 5px; content: ""; inset: 0; mix-blend-mode: multiply; opacity: .11; pointer-events: none; position: fixed; z-index: 50; }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .06; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.04; }
[hidden] { display: none !important; }

.masthead { align-items: center; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--paper) 89%, transparent); border-bottom: 1px solid var(--line); display: flex; gap: 28px; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 18px clamp(18px, 4vw, 62px); position: sticky; top: 0; z-index: 40; }
.wordmark { align-items: baseline; display: inline-flex; gap: 7px; letter-spacing: -.06em; }
.wordmark-main { font-size: 1.42rem; font-weight: 950; }
.wordmark-dot { color: var(--red); }
.wordmark-sub { color: var(--muted); font-size: .67rem; font-weight: 900; letter-spacing: .16em; }
.masthead-nav { align-items: center; display: flex; gap: 26px; margin-left: auto; }
.masthead-nav a { color: var(--muted); font-size: .69rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.masthead-nav a:hover { color: var(--red); }
.masthead-tools { align-items: center; display: flex; gap: 17px; }
.availability { align-items: center; color: var(--muted); display: inline-flex; font-size: .62rem; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.availability i { background: var(--red); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent); display: inline-block; height: 6px; margin-right: 8px; width: 6px; }
.icon-button { background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 1rem; height: 31px; line-height: 1; padding: 2px; transition: background .2s ease, color .2s ease, transform .2s ease; width: 31px; }
.icon-button:hover { background: var(--red); border-color: var(--red); color: #fff8ed; transform: rotate(12deg); }

.view { margin: 0 auto; max-width: 1440px; padding: 0 clamp(18px, 4vw, 62px); }
.landing-view { overflow: hidden; }
.hero-shell { background: var(--panel); border-radius: 0 0 32px 32px; color: var(--cream); display: grid; gap: clamp(30px, 5vw, 90px); grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr); margin: 0 -1px; min-height: 700px; overflow: hidden; padding: clamp(42px, 6vw, 84px) clamp(26px, 5vw, 78px) 60px; position: relative; }
.hero-shell::before { background: radial-gradient(circle, rgba(214, 60, 49, .42), transparent 62%); content: ""; height: 520px; left: -180px; position: absolute; top: -220px; width: 520px; }
.hero-shell::after { border: 1px solid rgba(255, 249, 239, .13); border-radius: 50%; content: ""; height: 740px; position: absolute; right: -275px; top: -170px; width: 740px; }
.hero-copy, .hero-stage { position: relative; z-index: 1; }
.hero-copy { align-self: center; max-width: 620px; padding: 15px 0 20px; }
.hero-topline { align-items: center; display: flex; justify-content: space-between; margin-bottom: 34px; }
.hero-copy .kicker { color: #ff7667; margin: 0; }
.hero-code, .hero-signals span, .stage-coordinate, .hero-index { color: rgba(255, 249, 239, .54); font-size: .6rem; font-weight: 900; letter-spacing: .13em; }
.kicker { align-items: center; color: var(--red); display: flex; font-size: .64rem; font-weight: 950; gap: 9px; letter-spacing: .13em; margin: 0 0 21px; text-transform: uppercase; }
.kicker-mark { background: var(--red); display: inline-block; height: 9px; transform: rotate(-8deg); width: 18px; }
.hero-copy h1 { font-size: clamp(3.5rem, 6.7vw, 7rem); font-weight: 950; letter-spacing: -.075em; line-height: .92; margin: 0; }
.hero-copy h1 em { color: #ff6c59; font-style: normal; }
.hero-deck { color: rgba(255, 249, 239, .72); font-size: clamp(.95rem, 1.25vw, 1.1rem); line-height: 1.85; margin: 33px 0 30px; max-width: 520px; }
.landing-actions, .result-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 15px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-weight: 950; justify-content: center; min-height: 49px; padding: 12px 18px; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button--primary { background: var(--red); border-color: var(--red); color: #fff8ed; gap: 30px; min-width: 205px; }
.button--primary:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 0 9px 24px color-mix(in srgb, var(--red) 27%, transparent); transform: translateY(-3px); }
.button--quiet { background: transparent; border-color: transparent; color: var(--ink); gap: 9px; padding-left: 0; padding-right: 0; }
.hero-copy .button--quiet { color: var(--cream); }
.hero-copy .button--quiet:hover { color: #ff8578; }
.button--quiet:hover { color: var(--red); }
.privacy-line { align-items: center; color: rgba(255, 249, 239, .58); display: flex; font-size: .72rem; gap: 9px; margin-top: 24px; }
.privacy-line strong { color: var(--cream); }
.privacy-check { align-items: center; border: 1px solid rgba(255, 249, 239, .45); border-radius: 50%; color: #ff7667; display: inline-flex; font-size: .65rem; height: 20px; justify-content: center; width: 20px; }
.hero-signals { border-top: 1px solid rgba(255, 249, 239, .18); display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 48px; max-width: 540px; }
.hero-signals div { display: flex; flex-direction: column; gap: 4px; padding: 17px 18px 5px 0; }
.hero-signals div + div { border-left: 1px solid rgba(255, 249, 239, .18); padding-left: 18px; }
.hero-signals b { color: var(--cream); font-family: Georgia, serif; font-size: 2rem; font-weight: 500; line-height: 1; }

.hero-stage { align-self: stretch; min-height: 590px; }
.stage-grid { background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 54px 54px; height: 90%; inset: 5% 3% 5% 2%; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); opacity: .35; position: absolute; transform: perspective(500px) rotateX(8deg) rotateY(-10deg); }
.stage-orbit { border: 1px solid rgba(255, 249, 239, .27); border-radius: 50%; pointer-events: none; position: absolute; }
.stage-orbit--one { height: 530px; right: 7%; top: 7%; transform: rotate(30deg); width: 340px; }
.stage-orbit--two { border-color: rgba(214, 60, 49, .75); height: 680px; right: -8%; top: -3%; transform: rotate(-29deg); width: 430px; }
.stage-coordinate { bottom: 4%; left: 4%; position: absolute; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.hero-portrait { background: #151316; border: 8px solid var(--cream); box-shadow: var(--shadow-deep); height: min(615px, 44vw); margin: 0; min-height: 530px; overflow: hidden; position: absolute; right: 20%; top: 1%; transform: rotate(2deg); width: min(355px, 27vw); z-index: 3; }
.hero-portrait::after { background: linear-gradient(140deg, transparent 44%, rgba(255,255,255,.17)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hero-portrait img { height: 100%; object-fit: cover; object-position: center 24%; width: 100%; }
.photo-label { color: var(--cream); font-size: .59rem; font-weight: 950; left: 15px; letter-spacing: .11em; position: absolute; text-shadow: 0 1px 4px rgba(0,0,0,.65); top: 14px; z-index: 3; }
.hero-portrait figcaption { background: var(--cream); bottom: 0; color: var(--ink); display: flex; flex-direction: column; gap: 1px; left: 0; padding: 12px 15px 14px; position: absolute; right: 0; z-index: 3; }
.hero-portrait figcaption strong { font-size: .82rem; }
.hero-portrait figcaption span { color: var(--muted); font-size: .65rem; }
.orbit-card { background: var(--cream); box-shadow: var(--shadow-deep); margin: 0; overflow: hidden; position: absolute; width: 146px; z-index: 4; }
.orbit-card img { aspect-ratio: 1 / 1.16; object-fit: cover; object-position: center; width: 100%; }
.orbit-card figcaption { color: var(--ink); display: flex; flex-direction: column; gap: 0; padding: 8px 10px 10px; }
.orbit-card figcaption b { font-size: .72rem; }
.orbit-card figcaption span { color: var(--muted); font-size: .6rem; }
.orbit-card--one { animation: floatCard 5s ease-in-out infinite; left: 0; top: 14%; transform: rotate(-8deg); }
.orbit-card--two { bottom: 9%; right: 1%; transform: rotate(8deg); }
.orbit-card--one { --house-color: #3F7D5A; --house-color-light: #D9F0E0; }
.orbit-card--two { --house-color: #7B4AB8; --house-color-light: #EADDF7; }
.hero-badge { align-items: center; animation: glow 3.4s ease-in-out infinite; background: var(--red); border: 7px solid var(--panel); border-radius: 50%; bottom: 25%; color: #fff8ed; display: flex; height: 106px; justify-content: center; position: absolute; right: 3%; transform: rotate(-9deg); width: 106px; z-index: 5; }
.hero-badge strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 500; line-height: 1; }
.hero-badge span { font-size: .48rem; font-weight: 900; letter-spacing: .07em; line-height: 1.12; margin-left: 3px; text-transform: uppercase; }
.hero-index { bottom: 0; position: absolute; right: 4%; }

.type-ticker { align-items: center; background: var(--red); color: #fff8ed; display: flex; font-size: .68rem; font-weight: 950; gap: clamp(14px, 2.5vw, 36px); letter-spacing: .17em; margin: 0 -1px; overflow: hidden; padding: 15px 20px; text-transform: uppercase; white-space: nowrap; }
.type-ticker i { color: var(--gold); font-style: normal; }
.fact-row { background: color-mix(in srgb, var(--paper-deep) 72%, transparent); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); }
.fact, .fact-intro { min-height: 137px; padding: 23px 24px; }
.fact + .fact, .fact--last, .fact-intro + .fact { border-left: 1px solid var(--line); }
.fact-intro { display: flex; flex-direction: column; justify-content: space-between; }
.fact-intro span, .fact-intro em { color: var(--red); font-size: .6rem; font-style: normal; font-weight: 950; letter-spacing: .15em; }
.fact-intro strong { font-size: 1rem; line-height: 1.3; }
.fact-intro em { color: var(--muted); font-size: .53rem; letter-spacing: .09em; }
.fact { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; justify-content: center; position: relative; }
.fact b { font-family: Georgia, serif; font-size: 2.5rem; font-weight: 500; line-height: 1; }
.fact span { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.fact i { color: var(--red); font-size: .56rem; font-style: normal; font-weight: 950; position: absolute; right: 18px; top: 20px; }

.field-notes { align-items: center; display: grid; gap: clamp(44px, 8vw, 130px); grid-template-columns: .9fr 1.1fr; padding: clamp(94px, 12vw, 170px) 0 140px; }
.method-visual { height: 560px; position: relative; }
.method-photo { background: var(--paper-deep); box-shadow: var(--shadow); margin: 0; overflow: hidden; position: absolute; }
.method-photo img { height: 100%; object-fit: cover; width: 100%; }
.method-photo figcaption { background: var(--cream); bottom: 0; color: var(--ink); font-size: .67rem; left: 0; padding: 9px 12px; position: absolute; right: 0; }
.method-photo--main { border: 8px solid var(--cream); height: 480px; left: 8%; transform: rotate(-4deg); width: 62%; z-index: 2; }
.method-photo--main img { object-position: center 18%; }
.method-photo--small { border: 7px solid var(--cream); bottom: 3%; height: 215px; right: 3%; transform: rotate(8deg); width: 40%; z-index: 3; }
.method-photo--small img { object-position: center 25%; }
.method-sticker { align-items: center; background: var(--red); border-radius: 50%; color: #fff8ed; display: flex; flex-direction: column; font-size: .52rem; font-weight: 950; height: 112px; justify-content: center; letter-spacing: .07em; line-height: 1.25; position: absolute; right: 1%; text-align: center; top: 1%; transform: rotate(12deg); width: 112px; z-index: 5; }
.method-sticker strong { font-size: .78rem; }
.method-ruler { bottom: -5px; color: var(--muted); font-size: .53rem; font-weight: 900; left: 0; letter-spacing: .13em; position: absolute; transform: rotate(-90deg) translateX(-100%); transform-origin: left bottom; }
.method-content { max-width: 650px; }
.method-content h2, .character-index h2, .visual-break h2 { font-size: clamp(2.9rem, 5vw, 5.2rem); margin: 0 0 25px; }
.method-lead { color: var(--muted); font-size: 1rem; line-height: 1.9; margin-bottom: 36px; max-width: 460px; }
.note-list { border-top: 1px solid var(--line-strong); }
.note-item { border-bottom: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 38px 1fr; padding: 22px 0 21px; }
.note-number { color: var(--red); font-family: Georgia, serif; font-size: 1rem; }
.note-item h3 { font-size: 1.05rem; margin: 0 0 6px; }
.note-item p { color: var(--muted); font-size: .83rem; line-height: 1.7; margin: 0; max-width: 500px; }

.visual-break { align-items: center; background: var(--panel); border-radius: 26px; color: var(--cream); display: grid; gap: clamp(30px, 7vw, 100px); grid-template-columns: .72fr 1.28fr; margin: 0 -1px 130px; overflow: hidden; padding: clamp(30px, 5vw, 70px); position: relative; }
.visual-break::before { border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; height: 420px; position: absolute; right: -150px; top: -170px; width: 420px; }
.visual-break-copy, .visual-break-gallery { position: relative; z-index: 1; }
.visual-break .kicker { color: #ff7667; }
.visual-break h2 { font-size: clamp(2.7rem, 4.5vw, 4.8rem); }
.visual-break h2 em { color: #ff6c59; }
.visual-break-copy p { color: rgba(255,249,239,.65); line-height: 1.85; max-width: 330px; }
.visual-break-gallery { align-items: end; display: grid; gap: 13px; grid-template-columns: 1fr .78fr 1fr; }
.visual-break-gallery figure { background: var(--cream); color: var(--ink); margin: 0; overflow: hidden; transform: rotate(-3deg); }
.visual-break-gallery figure:nth-child(2) { transform: translateY(-30px) rotate(4deg); }
.visual-break-gallery figure:nth-child(3) { transform: rotate(-1deg); }
.visual-break-gallery img { aspect-ratio: 3 / 3.9; filter: saturate(.9); object-fit: cover; object-position: center 22%; width: 100%; }
.visual-break-gallery figcaption { font-size: .7rem; font-weight: 950; padding: 9px 11px 11px; }

.character-index { border-top: 1px solid var(--line); padding: 100px 0 128px; }
.character-index-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 47px; }
.character-index-head h2 { margin-bottom: 0; }
.atlas-side-note { max-width: 310px; }
.atlas-side-note span { color: var(--red); font-size: .59rem; font-weight: 950; letter-spacing: .13em; }
.atlas-side-note p { color: var(--muted); font-size: .85rem; line-height: 1.8; margin: 10px 0 0; }
.character-strip { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.character-strip figure { background: var(--cream); border: 1px solid var(--line); box-shadow: 0 9px 20px rgba(40,27,19,.06); margin: 0; min-width: 0; overflow: hidden; position: relative; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.character-strip figure:nth-child(4n + 2) { transform: translateY(18px); }
.character-strip figure:nth-child(4n + 4) { transform: translateY(-10px); }
.character-strip figure:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-7px) rotate(-1deg); }
.character-strip figure:nth-child(4n + 2):hover { transform: translateY(8px) rotate(1deg); }
.character-strip img { aspect-ratio: 3 / 2; background: #eee0cb; object-fit: contain; transition: filter .25s ease, transform .35s ease; width: 100%; }
.character-strip figure:hover img { filter: saturate(1.12); transform: scale(1.035); }
.character-strip figcaption { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; padding: 11px 13px 13px; }
.character-strip figcaption b { font-size: .77rem; }
.character-strip figcaption span { color: var(--muted); font-size: .59rem; }

.method-panel { background: var(--panel); border-radius: 22px; color: var(--cream); display: grid; gap: 60px; grid-template-columns: 1fr 1fr; margin: 0 -1px; padding: 50px clamp(22px, 5vw, 70px) 62px; }
.method-panel h2 { font-size: 2.3rem; margin: 0; }
.method-panel .kicker { color: #ff7667; }
.method-copy { color: rgba(255,249,239,.68); max-width: 460px; }
.method-copy p { line-height: 1.85; margin: 0 0 20px; }
.method-panel .button--quiet { color: var(--cream); }

.test-view, .result-view { min-height: calc(100vh - 74px); padding-bottom: 92px; padding-top: 28px; }
.test-header { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: auto auto 1fr; padding-bottom: 17px; }
.text-button { background: none; border: 0; color: var(--muted); font-size: .78rem; font-weight: 900; padding: 5px 0; }
.text-button:hover { color: var(--red); }
.test-progress-copy { display: flex; font-size: .7rem; font-weight: 950; gap: 17px; justify-content: center; white-space: nowrap; }
.test-progress-copy span:last-child { color: var(--muted); font-weight: 500; }
.progress-track { background: var(--paper-deep); border-radius: 20px; height: 6px; overflow: hidden; }
.progress-track span { background: var(--red); border-radius: inherit; display: block; height: 100%; transition: width .35s ease; width: 2%; }
.test-layout { display: grid; gap: clamp(35px, 8vw, 120px); grid-template-columns: minmax(0, 1fr) minmax(275px, 360px); margin: 0 auto; max-width: 1160px; padding: clamp(55px, 7vw, 105px) 0 0; }
.question-panel { max-width: 710px; }
.question-meta { color: var(--muted); display: flex; font-size: .68rem; justify-content: space-between; letter-spacing: .04em; text-transform: uppercase; }
.question-meta span:first-child { color: var(--red); font-weight: 950; }
.question-number { color: var(--red); font-family: Georgia, serif; font-size: clamp(4rem, 8vw, 7.2rem); font-weight: 400; line-height: .86; margin: 38px 0 24px; opacity: .9; }
.question-panel h2 { font-size: clamp(2.05rem, 4vw, 4rem); max-width: 720px; }
.question-context { color: var(--muted); font-size: .88rem; line-height: 1.7; margin: 18px 0 29px; }
.listen-control { align-items: center; background: var(--cream); border: 1px solid var(--line-strong); color: var(--ink); display: inline-flex; gap: 10px; min-height: 45px; padding: 9px 13px; }
.listen-control:hover, .listen-control.is-speaking { border-color: var(--red); color: var(--red); }
.listen-icon { color: var(--red); font-size: 1.25rem; transform: rotate(180deg); }
.listen-control small { color: var(--muted); font-size: .62rem; margin-left: 4px; }
.listen-control.is-speaking .listen-icon { animation: pulse .9s ease-in-out infinite alternate; }
.answer-heading { align-items: baseline; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 49px; padding-top: 21px; }
.answer-heading span { font-size: 1.04rem; font-weight: 950; }
.answer-heading small { color: var(--muted); font-size: .67rem; }
.choice-scale { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); margin-top: 20px; }
.choice { align-items: center; background: var(--cream); border: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 94px; padding: 12px 8px; transition: background .2s ease, border .2s ease, color .2s ease, transform .2s ease; }
.choice:hover { border-color: var(--red); color: var(--ink); transform: translateY(-3px); }
.choice.selected { background: var(--red); border-color: var(--red); color: #fff8ed; }
.choice-dot { border: 2px solid currentColor; border-radius: 50%; display: block; height: 20px; position: relative; width: 20px; }
.choice.selected .choice-dot::after { background: currentColor; border-radius: 50%; content: ""; inset: 4px; position: absolute; }
.choice-copy { font-size: .65rem; font-weight: 900; text-align: center; }
.answer-extremes { color: var(--muted); display: grid; font-size: .68rem; gap: 12px; grid-template-columns: 1fr auto 1fr; line-height: 1.4; margin-top: 12px; }
.answer-extremes span:last-child { text-align: right; }
.answer-middle { color: var(--red); text-align: center; }
.truth-reminder { align-items: flex-start; border-left: 2px solid var(--red); display: flex; gap: 12px; margin-top: 38px; padding: 2px 0 2px 14px; }
.truth-reminder span { color: var(--red); font-size: .8rem; }
.truth-reminder p { color: var(--muted); font-size: .75rem; margin: 0; }
.question-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 54px; }
.question-actions .button:disabled { cursor: not-allowed; opacity: .38; transform: none; }
.question-art { align-self: start; position: sticky; top: 104px; }
.art-frame { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); height: 500px; overflow: hidden; position: relative; }
.art-frame::after { border: 1px solid rgba(255,255,255,.42); content: ""; inset: 12px; pointer-events: none; position: absolute; }
.art-frame img { height: 100%; object-fit: cover; object-position: center 22%; transition: opacity .18s ease, transform .45s ease; width: 100%; }
.art-frame img.character-changing { opacity: .05; transform: scale(1.05); }
.art-tag { background: var(--red); color: #fff8ed; font-size: .58rem; font-weight: 950; left: 18px; letter-spacing: .1em; padding: 6px 9px; position: absolute; top: 18px; z-index: 2; }
.art-caption { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; padding: 15px 0; }
.art-caption strong { font-size: .85rem; }
.art-caption span { color: var(--muted); font-size: .71rem; }

.result-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 17px; }
.result-hero { background: var(--panel); border-radius: 0 0 26px 26px; color: var(--cream); display: grid; gap: 80px; grid-template-columns: 1fr 340px; margin: 0 -1px; max-width: none; padding: clamp(55px, 8vw, 105px) clamp(22px, 8vw, 120px) 90px; }
.result-copy { align-self: center; max-width: 650px; }
.result-overline { color: rgba(255,249,239,.55); font-size: .75rem; margin-bottom: 10px; }
.result-type { color: #ff6c59; font-family: Georgia, serif; font-size: clamp(5rem, 12vw, 10rem); line-height: .85; }
.result-copy h1 { font-size: clamp(2.3rem, 4vw, 4.4rem); margin: 26px 0 20px; }
.result-copy > p:not(.result-overline) { color: rgba(255,249,239,.68); font-size: 1rem; line-height: 1.9; max-width: 580px; }
.result-note { border-left: 2px solid #ff6c59; display: flex; flex-direction: column; gap: 3px; margin: 31px 0; padding-left: 15px; }
.result-note span, .result-art-label { color: #ff7667; font-size: .6rem; font-weight: 950; letter-spacing: .13em; }
.result-note strong { font-size: .9rem; }
.result-copy .button--quiet { color: var(--cream); }
.result-art { background: #151316; border: 8px solid var(--cream); box-shadow: var(--shadow-deep); min-height: 470px; overflow: hidden; position: relative; transform: rotate(2deg); }
.result-art img { height: 100%; object-fit: cover; object-position: center 18%; width: 100%; }
.result-art-label { background: var(--red); color: #fff8ed; left: 15px; padding: 6px 8px; position: absolute; top: 15px; }
.result-initials { align-items: center; background: var(--cream); border: 1px solid var(--red); border-radius: 50%; bottom: 18px; color: var(--red); display: flex; font-family: Georgia, serif; font-size: 2rem; height: 64px; justify-content: center; position: absolute; right: 18px; width: 64px; }
.result-details { border-top: 1px solid var(--line); display: grid; gap: 80px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1080px; padding: 78px 0 80px; }
.detail-heading h2 { font-size: 2rem; margin: 0 0 10px; }
.detail-heading > p:last-child { color: var(--muted); font-size: .8rem; }
.axis-results { border-top: 1px solid var(--line); margin-top: 32px; }
.axis-row { border-bottom: 1px solid var(--line); padding: 19px 0; }
.axis-row__head, .axis-row__labels { display: flex; justify-content: space-between; }
.axis-row__title { font-size: .86rem; font-weight: 950; }
.axis-row__score { color: var(--red); font-size: .72rem; }
.axis-row__labels { color: var(--muted); font-size: .67rem; margin: 8px 0; }
.axis-bar { background: var(--paper-deep); height: 7px; position: relative; }
.axis-bar::before { background: var(--line-strong); content: ""; height: 100%; left: 50%; position: absolute; width: 1px; }
.axis-bar span { background: var(--red); border: 2px solid var(--paper); border-radius: 50%; height: 14px; position: absolute; top: -4px; transform: translateX(-50%); width: 14px; }
.best-fit-options { display: grid; gap: 14px; margin-top: 32px; }
.best-fit-group { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 15px; justify-content: space-between; padding-bottom: 14px; }
.best-fit-group__label { color: var(--muted); font-size: .72rem; }
.best-fit-group__buttons { display: flex; gap: 5px; }
.best-fit-option { align-items: center; background: var(--cream); border: 1px solid var(--line); display: flex; gap: 7px; padding: 6px 9px; }
.best-fit-option strong { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 500; }
.best-fit-option span { color: var(--muted); font-size: .6rem; }
.best-fit-option.is-selected { background: var(--red); border-color: var(--red); color: #fff8ed; }
.best-fit-option.is-selected span { color: #fff8ed; }
.best-fit-result { background: var(--paper-deep); display: flex; flex-direction: column; gap: 2px; margin-top: 28px; padding: 18px; }
.best-fit-result span { color: var(--red); font-size: .63rem; font-weight: 950; letter-spacing: .1em; }
.best-fit-result strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 500; }
.best-fit-result b { font-size: .85rem; }
.result-disclaimer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .74rem; gap: 25px; justify-content: space-between; margin: 0 auto; max-width: 1080px; padding: 20px 0; }
.result-disclaimer strong { color: var(--ink); white-space: nowrap; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .59rem; font-weight: 900; justify-content: space-between; letter-spacing: .1em; margin: 0 auto; max-width: 1440px; padding: 24px clamp(18px, 4vw, 62px); }
#confettiCanvas { height: 100vh; inset: 0; pointer-events: none; position: fixed; width: 100vw; z-index: 60; }
.toast { background: var(--ink); bottom: 26px; color: var(--paper); font-size: .82rem; left: 50%; max-width: calc(100% - 40px); opacity: 0; padding: 12px 18px; pointer-events: none; position: fixed; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; z-index: 70; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes pulse { from { transform: scale(.8) rotate(180deg); } to { transform: scale(1.2) rotate(180deg); } }
@keyframes floatCard { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes glow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

@media (max-width: 1100px) {
  .hero-shell { gap: 30px; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); padding-left: 46px; padding-right: 46px; }
  .hero-portrait { right: 17%; width: 300px; }
  .orbit-card--one { left: -3%; }
}
@media (max-width: 880px) {
  .masthead-nav { display: none; }
  .hero-shell { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; }
  .hero-copy { max-width: 700px; }
  .hero-stage { height: 570px; margin: 0 auto; max-width: 650px; width: 100%; }
  .hero-portrait { height: 535px; right: 19%; width: 315px; }
  .field-notes { gap: 55px; grid-template-columns: 1fr; }
  .method-visual { max-width: 560px; width: 100%; }
  .visual-break { grid-template-columns: 1fr; }
  .visual-break-copy p { max-width: 540px; }
  .visual-break-gallery { max-width: 650px; }
  .test-layout { gap: 42px; grid-template-columns: minmax(0, 1fr) 285px; }
  .result-hero { gap: 45px; grid-template-columns: 1fr 285px; }
}
@media (max-width: 700px) {
  body::before { display: none; }
  .masthead { padding: 15px 18px; }
  .availability { font-size: .48rem; letter-spacing: .07em; }
  .masthead-tools { gap: 9px; }
  .view { padding-left: 15px; padding-right: 15px; }
  .hero-shell { border-radius: 0 0 23px 23px; gap: 0; margin: 0; padding: 38px 21px 34px; }
  .hero-topline { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 27px; }
  .hero-copy h1 { font-size: clamp(3.2rem, 15vw, 5.4rem); }
  .hero-deck { font-size: .91rem; line-height: 1.8; margin: 25px 0; }
  .landing-actions { align-items: stretch; flex-direction: column; }
  .button--primary { justify-content: space-between; width: 100%; }
  .button--quiet { align-self: flex-start; }
  .privacy-line { align-items: flex-start; font-size: .68rem; line-height: 1.5; }
  .hero-signals { margin-top: 37px; }
  .hero-signals div { padding-right: 8px; }
  .hero-signals div + div { padding-left: 9px; }
  .hero-signals b { font-size: 1.55rem; }
  .hero-signals span { font-size: .5rem; letter-spacing: .04em; line-height: 1.35; }
  .hero-stage { height: 425px; margin-top: 28px; min-height: 0; }
  .stage-orbit--one { height: 360px; right: 0; width: 245px; }
  .stage-orbit--two { height: 450px; right: -15%; width: 290px; }
  .hero-portrait { border-width: 6px; height: 386px; min-height: 0; right: 16%; top: 15px; width: 224px; }
  .hero-portrait figcaption { padding: 8px 10px 10px; }
  .hero-portrait figcaption strong { font-size: .7rem; }
  .hero-portrait figcaption span { font-size: .56rem; }
  .orbit-card { width: 106px; }
  .orbit-card--one { left: -1%; top: 12%; }
  .orbit-card--two { bottom: 2%; right: -2%; }
  .orbit-card figcaption { padding: 6px 8px 8px; }
  .orbit-card figcaption b { font-size: .6rem; }
  .orbit-card figcaption span { font-size: .52rem; }
  .hero-badge { border-width: 5px; bottom: 26%; height: 76px; right: 2%; width: 76px; }
  .hero-badge strong { font-size: 1.45rem; }
  .hero-badge span { font-size: .36rem; }
  .stage-coordinate { display: none; }
  .type-ticker { font-size: .56rem; gap: 15px; overflow: hidden; padding: 12px 10px; }
  .fact-row { grid-template-columns: 1fr 1fr; }
  .fact-intro { grid-column: 1 / -1; min-height: 103px; }
  .fact, .fact-intro { min-height: 108px; padding: 17px; }
  .fact b { font-size: 1.9rem; }
  .fact i { right: 13px; top: 15px; }
  .field-notes { padding: 84px 0 93px; }
  .method-visual { height: 410px; }
  .method-photo--main { height: 350px; left: 8%; width: 65%; }
  .method-photo--small { height: 160px; width: 41%; }
  .method-sticker { font-size: .42rem; height: 86px; width: 86px; }
  .method-sticker strong { font-size: .6rem; }
  .method-ruler { font-size: .43rem; }
  .method-content h2, .character-index h2, .visual-break h2 { font-size: 3rem; }
  .note-item { gap: 14px; grid-template-columns: 31px 1fr; }
  .visual-break { border-radius: 20px; margin-bottom: 85px; padding: 32px 22px 40px; }
  .visual-break-gallery { gap: 7px; }
  .visual-break-gallery figure:nth-child(2) { transform: translateY(-18px) rotate(4deg); }
  .visual-break-gallery figcaption { font-size: .58rem; padding: 7px 7px 8px; }
  .character-index { padding: 75px 0 88px; }
  .character-index-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .atlas-side-note { max-width: 380px; }
  .character-strip { gap: 9px; grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .character-strip figure:nth-child(4n + 2), .character-strip figure:nth-child(4n + 4) { transform: none; }
  .character-strip figure:nth-child(4n + 2):hover { transform: translateY(-7px) rotate(1deg); }
  .character-strip figcaption { padding: 8px 9px 10px; }
  .character-strip figcaption b { font-size: .65rem; }
  .character-strip figcaption span { font-size: .5rem; }
  .method-panel { gap: 28px; grid-template-columns: 1fr; margin: 0; padding: 34px 22px 48px; }
  .test-view, .result-view { padding-bottom: 70px; padding-top: 20px; }
  .test-header { gap: 10px; grid-template-columns: auto 1fr; }
  .test-progress-copy { gap: 10px; justify-content: flex-end; }
  .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .test-layout { display: block; padding-top: 50px; }
  .question-meta { font-size: .6rem; }
  .question-number { font-size: 5.2rem; margin: 31px 0 19px; }
  .question-panel h2 { font-size: 2.15rem; line-height: 1.15; }
  .question-context { font-size: .79rem; }
  .listen-control { align-items: flex-start; flex-wrap: wrap; font-size: .77rem; }
  .listen-control small { flex-basis: 100%; margin-left: 33px; }
  .answer-heading { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 38px; }
  .choice-scale { gap: 5px; }
  .choice { min-height: 75px; padding: 8px 3px; }
  .choice-dot { height: 16px; width: 16px; }
  .choice.selected .choice-dot::after { inset: 3px; }
  .choice-copy { font-size: .55rem; }
  .answer-extremes { font-size: .6rem; gap: 7px; }
  .question-art { display: none; }
  .question-actions { margin-top: 43px; }
  .question-actions .button { min-width: 145px; }
  .result-header { padding-bottom: 14px; }
  .result-hero { display: flex; flex-direction: column-reverse; gap: 36px; margin: 0; padding: 49px 22px 70px; }
  .result-art { height: 360px; min-height: 0; width: 100%; }
  .result-copy h1 { font-size: 2.8rem; }
  .result-type { font-size: 6.5rem; }
  .result-copy > p:not(.result-overline) { font-size: .87rem; line-height: 1.8; }
  .result-details { display: block; padding: 60px 0 56px; }
  .best-fit { border-top: 1px solid var(--line); margin-top: 65px; padding-top: 58px; }
  .best-fit-group { align-items: flex-start; flex-direction: column; gap: 8px; }
  .best-fit-group__buttons { width: 100%; }
  .best-fit-option { flex: 1; justify-content: center; }
  .result-disclaimer { align-items: flex-start; flex-direction: column; gap: 7px; line-height: 1.6; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 6px; padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 360px) {
  .masthead { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .masthead-tools { gap: 6px; }
  .availability { display: none; }
  .wordmark-sub { font-size: .58rem; }
}

/* JKK COLORWAY V1 — Gen Z color system with editorial trust cues */
:root {
  --paper: #f8f6f0;
  --paper-deep: #e9e8ff;
  --ink: #17213d;
  --muted: #66718a;
  --line: rgba(23, 33, 61, .15);
  --line-strong: rgba(23, 33, 61, .38);
  --red: #ff5d57;
  --red-dark: #d83d61;
  --gold: #ffbd59;
  --cream: #fffdf8;
  --panel: #17213d;
  --panel-soft: #2b3767;
  --blue: #3478ee;
  --violet: #7650e9;
  --lime: #baf04a;
  --cyan: #43cbd0;
  --pink: #ff73b6;
  --shadow: 0 24px 60px rgba(29, 38, 82, .15);
  --shadow-deep: 0 30px 80px rgba(10, 15, 35, .34);
}
:root[data-theme="dark"] {
  --paper: #11162b;
  --paper-deep: #1d2852;
  --ink: #f7f8ff;
  --muted: #aeb8d1;
  --line: rgba(247, 248, 255, .17);
  --line-strong: rgba(247, 248, 255, .42);
  --red: #ff7067;
  --red-dark: #ff9b78;
  --gold: #ffca61;
  --cream: #19223f;
  --panel: #0d1430;
  --panel-soft: #222d5a;
  --blue: #6ea3ff;
  --violet: #987bff;
  --lime: #c8ff5b;
  --cyan: #6de3e2;
  --pink: #ff8ac5;
  --shadow: 0 24px 60px rgba(0, 0, 0, .28);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, .5);
}
body {
  background:
    radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 26rem),
    radial-gradient(circle at 94% 20%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 24rem),
    var(--paper);
}
body::before {
  background-image:
    radial-gradient(color-mix(in srgb, var(--violet) 38%, transparent) .55px, transparent .55px),
    radial-gradient(color-mix(in srgb, var(--cyan) 30%, transparent) .45px, transparent .45px);
  background-size: 13px 13px, 19px 19px;
  opacity: .16;
}
.masthead {
  background: color-mix(in srgb, var(--paper) 87%, transparent);
  border-bottom-color: color-mix(in srgb, var(--cyan) 34%, var(--line));
}
.wordmark-dot { color: var(--cyan); text-shadow: 2px 2px 0 var(--pink); }
.masthead-nav a:hover { color: var(--violet); }
.availability i {
  background: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent);
}
.icon-button:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.hero-shell {
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 93, 87, .72), transparent 27%),
    radial-gradient(circle at 86% 14%, rgba(67, 203, 208, .47), transparent 25%),
    linear-gradient(132deg, #121a38 0%, #293574 54%, #6342ae 100%);
  box-shadow: 0 26px 70px rgba(33, 37, 90, .22);
}
.hero-shell::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 115, 182, .7), transparent 24%),
    radial-gradient(circle at 70% 70%, rgba(186, 240, 74, .42), transparent 25%);
  filter: blur(5px);
  opacity: .92;
}
.hero-shell::after {
  border-color: rgba(186, 240, 74, .3);
  box-shadow: inset 0 0 0 18px rgba(67, 203, 208, .035);
}
.hero-copy .kicker,
.visual-break .kicker,
.method-panel .kicker { color: var(--cyan); }
.hero-copy h1 em,
.visual-break h2 em { color: var(--lime); text-shadow: 3px 3px 0 rgba(255, 115, 182, .5); }
.hero-deck { color: rgba(255, 253, 248, .78); }
.button { border-radius: 14px; }
.button--primary {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 6px 6px 0 rgba(255, 115, 182, .6);
  color: var(--ink);
}
.button--primary:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 3px 3px 0 rgba(186, 240, 74, .7);
  color: var(--ink);
}
.hero-copy .button--quiet {
  border-bottom: 2px solid var(--pink);
  color: #fff;
}
.hero-copy .button--quiet:hover { color: var(--lime); }
.privacy-check {
  border-color: var(--cyan);
  color: var(--lime);
}
.hero-signals { border-top-color: rgba(186, 240, 74, .35); }
.hero-signals div + div { border-left-color: rgba(67, 203, 208, .28); }
.hero-signals b { color: var(--lime); }
.hero-portrait {
  border-color: #fffdf8;
  box-shadow: 12px 14px 0 rgba(186, 240, 74, .85), var(--shadow-deep);
}
.orbit-card {
  border: 2px solid var(--ink);
  border-radius: 18px;
}
.orbit-card--one { outline: 5px solid var(--pink); }
.orbit-card--two { outline: 5px solid var(--cyan); }
.hero-badge {
  background: var(--lime);
  border-color: var(--panel);
  box-shadow: 0 0 0 5px var(--pink);
  color: var(--ink);
}
.type-ticker {
  background: linear-gradient(90deg, var(--red) 0%, #ff825b 25%, var(--violet) 58%, var(--cyan) 100%);
  color: var(--ink);
}
.type-ticker i { color: var(--ink); }
.fact-row {
  background: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--violet) 25%, var(--line));
  border-top-color: color-mix(in srgb, var(--cyan) 25%, var(--line));
}
.fact-intro { background: color-mix(in srgb, var(--violet) 13%, var(--paper)); }
.fact:nth-child(2) { background: color-mix(in srgb, var(--cyan) 13%, var(--paper)); }
.fact:nth-child(3) { background: color-mix(in srgb, var(--gold) 18%, var(--paper)); }
.fact:nth-child(4) { background: color-mix(in srgb, var(--violet) 11%, var(--paper)); }
.fact:nth-child(5) { background: color-mix(in srgb, var(--pink) 10%, var(--paper)); }
.fact-intro span, .fact-intro em,
.fact i { color: var(--violet); }
.fact b { color: var(--ink); }
.field-notes { position: relative; }
.field-notes::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 60%);
  border-radius: 50%;
  content: "";
  height: 320px;
  left: -170px;
  pointer-events: none;
  position: absolute;
  top: 100px;
  width: 320px;
}
.method-photo { border-radius: 20px; }
.method-photo--main { outline: 4px solid var(--cyan); }
.method-photo--small { outline: 4px solid var(--pink); }
.method-sticker {
  background: var(--violet);
  border: 6px solid var(--lime);
  box-shadow: 7px 7px 0 var(--pink);
}
.note-number { color: var(--violet); }
.visual-break {
  background:
    radial-gradient(circle at 90% 10%, rgba(67, 203, 208, .46), transparent 22%),
    linear-gradient(135deg, #17213d 0%, #3d2c86 68%, #a43c78 120%);
  box-shadow: 0 24px 55px rgba(60, 40, 130, .18);
}
.visual-break::before { border-color: rgba(186, 240, 74, .42); }
.visual-break-gallery figure {
  border: 3px solid var(--lime);
  border-radius: 16px;
}
.visual-break-gallery figure:nth-child(2) { border-color: var(--pink); }
.visual-break-gallery figure:nth-child(3) { border-color: var(--cyan); }
.character-index {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 4%, transparent));
}
.character-strip figure {
  border: 2px solid color-mix(in srgb, var(--violet) 38%, var(--line));
  border-radius: 18px;
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--cyan) 20%, transparent);
}
.character-strip figure:nth-child(4n + 1) { border-color: var(--cyan); }
.character-strip figure:nth-child(4n + 2) { border-color: var(--pink); }
.character-strip figure:nth-child(4n + 3) { border-color: var(--gold); }
.character-strip figure:nth-child(4n + 4) { border-color: var(--violet); }
.character-strip img { background: color-mix(in srgb, var(--paper-deep) 68%, var(--cream)); }
.character-strip figure:hover {
  border-color: var(--lime);
  box-shadow: 7px 7px 0 var(--pink);
}
.method-panel {
  background:
    radial-gradient(circle at 87% 15%, rgba(186, 240, 74, .22), transparent 22%),
    linear-gradient(135deg, #17213d, #4a318e);
  box-shadow: 0 20px 50px rgba(52, 40, 126, .17);
}
.test-header { border-bottom-color: color-mix(in srgb, var(--cyan) 35%, var(--line)); }
.question-meta span:first-child,
.question-number { color: var(--violet); }
.listen-control {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--line-strong));
}
.listen-control:hover, .listen-control.is-speaking {
  border-color: var(--cyan);
  color: var(--violet);
}
.listen-icon { color: var(--cyan); }
.choice {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--violet) 25%, var(--line));
}
.choice:hover { border-color: var(--cyan); }
.choice.selected {
  background: linear-gradient(135deg, var(--violet), var(--blue));
  border-color: var(--violet);
  color: #fff;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--pink) 60%, transparent);
}
.answer-middle { color: var(--violet); }
.truth-reminder { border-left-color: var(--cyan); }
.truth-reminder span { color: var(--pink); }
.question-actions .button--primary {
  background: var(--ink);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 5px 5px 0 var(--pink);
}
.result-hero {
  background:
    radial-gradient(circle at 84% 16%, rgba(67, 203, 208, .4), transparent 24%),
    linear-gradient(135deg, #17213d 0%, #3d2c86 68%, #a43c78 120%);
}
.result-type { color: var(--lime); text-shadow: 4px 4px 0 rgba(255, 115, 182, .45); }
.result-note { border-left-color: var(--cyan); }
.result-art {
  border-radius: 18px;
  box-shadow: 12px 14px 0 var(--lime), var(--shadow-deep);
}
.result-art-label { background: var(--pink); color: var(--ink); }
.result-initials { border-color: var(--cyan); color: var(--violet); }
.axis-row__score,
.best-fit-result span { color: var(--violet); }
.axis-bar span { background: var(--pink); }
.best-fit-option { border-radius: 10px; }
.best-fit-option.is-selected {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.best-fit-result { background: color-mix(in srgb, var(--lime) 14%, var(--paper-deep)); border-left: 4px solid var(--cyan); }
.site-footer { border-top-color: var(--cyan); }
@media (max-width: 700px) {
  .hero-portrait { border-width: 6px; box-shadow: 7px 8px 0 rgba(186, 240, 74, .85), var(--shadow-deep); }
  .orbit-card--one { outline-width: 3px; }
  .orbit-card--two { outline-width: 3px; }
  .visual-break-gallery figure { border-radius: 10px; }
  .character-strip figure { border-radius: 13px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--cyan) 20%, transparent); }
  .result-art { box-shadow: 7px 8px 0 var(--lime), var(--shadow-deep); }
}

/* JKK HUMAN EDITORIAL V2 — flat color blocks, paper texture, deliberate composition */
:root {
  --paper: #f5f1e8;
  --paper-deep: #e7e5f6;
  --ink: #15233b;
  --muted: #627089;
  --line: rgba(21, 35, 59, .16);
  --line-strong: rgba(21, 35, 59, .42);
  --red: #f25f5c;
  --red-dark: #c9415b;
  --gold: #f2b84b;
  --cream: #fffdf7;
  --panel: #15233b;
  --panel-soft: #26385d;
  --blue: #3c72d6;
  --violet: #6255c7;
  --lime: #d1ed58;
  --cyan: #4cbfc1;
  --pink: #ef9bbb;
  --shadow: 8px 10px 0 rgba(21, 35, 59, .12);
  --shadow-deep: 12px 14px 0 rgba(8, 16, 34, .28);
}
:root[data-theme="dark"] {
  --paper: #101a2f;
  --paper-deep: #1e2b4b;
  --ink: #f8f7f0;
  --muted: #abb7ce;
  --line: rgba(248, 247, 240, .18);
  --line-strong: rgba(248, 247, 240, .42);
  --red: #ff7267;
  --red-dark: #ff9b7b;
  --gold: #ffca5a;
  --cream: #1b2947;
  --panel: #0c162d;
  --panel-soft: #223456;
  --blue: #75a4ff;
  --violet: #9183f1;
  --lime: #d7f56a;
  --cyan: #71d8d7;
  --pink: #ffafd0;
  --shadow: 8px 10px 0 rgba(0, 0, 0, .24);
  --shadow-deep: 12px 14px 0 rgba(0, 0, 0, .45);
}
body {
  background: var(--paper);
}
body::before {
  background-image: radial-gradient(rgba(21, 35, 59, .2) .45px, transparent .45px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  opacity: .12;
}
:root[data-theme="dark"] body::before {
  background-image: radial-gradient(rgba(248, 247, 240, .18) .45px, transparent .45px);
  mix-blend-mode: screen;
  opacity: .08;
}
.masthead {
  backdrop-filter: none;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.wordmark-dot { text-shadow: none; }
.icon-button { border-radius: 6px; }
.icon-button:hover { background: var(--pink); border-color: var(--ink); color: var(--ink); transform: rotate(-4deg); }
.hero-shell {
  background: var(--panel);
  border-radius: 0 0 24px 24px;
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--cyan) 40%, transparent);
}
.hero-shell::before {
  background: var(--pink);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--lime);
  filter: none;
  height: 170px;
  left: -105px;
  opacity: 1;
  top: 52px;
  transform: rotate(-7deg);
  width: 360px;
}
.hero-shell::after {
  background: var(--cyan);
  border: 0;
  border-radius: 0;
  box-shadow: 9px 9px 0 var(--lime);
  height: 20px;
  right: 52px;
  top: 57px;
  transform: rotate(4deg);
  width: 225px;
}
.hero-copy h1 em,
.visual-break h2 em {
  text-shadow: none;
}
.hero-copy .kicker,
.visual-break .kicker,
.method-panel .kicker { color: var(--cyan); }
.button { border-radius: 6px; }
.button--primary {
  background: var(--lime);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  color: var(--ink);
}
.button--primary:hover {
  background: var(--cyan);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--ink);
  transform: translate(2px, 2px);
}
.hero-copy .button--quiet {
  border-bottom: 2px solid var(--pink);
  color: #fff;
}
.hero-portrait {
  border: 8px solid var(--cream);
  border-radius: 3px;
  box-shadow: var(--shadow-deep);
}
.hero-portrait::after { background: none; }
.photo-label {
  background: var(--pink);
  color: var(--ink);
  padding: 4px 7px;
  text-shadow: none;
}
.orbit-card {
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 8px 8px 0 var(--cyan);
}
.orbit-card--one { outline: 0; }
.orbit-card--two { outline: 0; box-shadow: 8px 8px 0 var(--pink); }
.hero-badge {
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 5px;
  box-shadow: 7px 7px 0 var(--pink);
  color: var(--ink);
  height: 78px;
  width: 102px;
}
.stage-orbit {
  border-radius: 8px;
  border-style: dashed;
}
.stage-orbit--one {
  border-color: var(--lime);
  height: 470px;
  right: 11%;
  top: 12%;
  transform: rotate(7deg);
  width: 302px;
}
.stage-orbit--two {
  border-color: var(--pink);
  height: 520px;
  right: 2%;
  top: 4%;
  transform: rotate(-7deg);
  width: 330px;
}
.type-ticker {
  background: var(--violet);
  border-bottom: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  color: #fff;
}
.type-ticker i { color: var(--lime); }
.fact-row {
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  border-top: 0;
}
.fact-intro,
.fact:nth-child(2),
.fact:nth-child(3),
.fact:nth-child(4),
.fact:nth-child(5) {
  background: var(--cream);
}
.fact-intro { box-shadow: inset 0 6px 0 var(--violet); }
.fact:nth-child(2) { box-shadow: inset 0 6px 0 var(--cyan); }
.fact:nth-child(3) { box-shadow: inset 0 6px 0 var(--gold); }
.fact:nth-child(4) { box-shadow: inset 0 6px 0 var(--pink); }
.fact:nth-child(5) { box-shadow: inset 0 6px 0 var(--lime); }
.fact-intro span, .fact-intro em, .fact i { color: var(--violet); }
.field-notes::before { display: none; }
.method-photo {
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.method-photo--main { outline: 4px solid var(--cyan); }
.method-photo--small { outline: 4px solid var(--pink); }
.method-sticker {
  background: var(--violet);
  border: 4px solid var(--ink);
  border-radius: 6px;
  box-shadow: 7px 7px 0 var(--lime);
  transform: rotate(-7deg);
}
.note-number { color: var(--violet); }
.visual-break {
  background: var(--violet);
  border-radius: 16px;
  box-shadow: 9px 11px 0 color-mix(in srgb, var(--pink) 55%, transparent);
}
.visual-break::before {
  background: var(--lime);
  border: 0;
  border-radius: 0;
  height: 155px;
  right: 58px;
  top: -68px;
  transform: rotate(14deg);
  width: 190px;
}
.visual-break-gallery figure {
  border: 3px solid var(--lime);
  border-radius: 4px;
  box-shadow: 6px 7px 0 var(--ink);
}
.visual-break-gallery figure:nth-child(2) { border-color: var(--pink); }
.visual-break-gallery figure:nth-child(3) { border-color: var(--cyan); }
.character-index {
  background: transparent;
}
.character-strip figure {
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 6px 7px 0 var(--cyan);
}
.character-strip figure:nth-child(4n + 1) { border-color: var(--cyan); }
.character-strip figure:nth-child(4n + 2) { border-color: var(--pink); box-shadow: 6px 7px 0 var(--pink); }
.character-strip figure:nth-child(4n + 3) { border-color: var(--gold); box-shadow: 6px 7px 0 var(--gold); }
.character-strip figure:nth-child(4n + 4) { border-color: var(--violet); box-shadow: 6px 7px 0 var(--violet); }
.character-strip img { background: var(--paper-deep); }
.character-strip figure:hover {
  border-color: var(--ink);
  box-shadow: 3px 4px 0 var(--lime);
  transform: translate(-2px, -4px);
}
.method-panel {
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.test-header { border-bottom: 2px solid var(--ink); }
.question-meta span:first-child,
.question-number,
.axis-row__score,
.best-fit-result span { color: var(--violet); }
.listen-control {
  border-radius: 6px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--cyan);
}
.listen-control:hover, .listen-control.is-speaking {
  border-color: var(--ink);
  color: var(--violet);
  transform: translate(1px, 1px);
}
.listen-icon { color: var(--cyan); }
.choice {
  border-radius: 5px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--violet) 28%, transparent);
}
.choice:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--cyan); }
.choice.selected {
  background: var(--violet);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--pink);
}
.truth-reminder { border-left-color: var(--cyan); }
.question-actions .button--primary {
  background: var(--ink);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 5px 5px 0 var(--pink);
}
.result-hero {
  background: var(--panel);
  border-radius: 0 0 16px 16px;
}
.result-type { color: var(--lime); text-shadow: none; }
.result-note { border-left-color: var(--cyan); }
.result-art {
  border-radius: 4px;
  box-shadow: var(--shadow-deep);
}
.result-art-label { background: var(--pink); color: var(--ink); }
.result-initials { border-color: var(--cyan); color: var(--violet); }
.axis-bar span { background: var(--pink); }
.best-fit-option { border-radius: 5px; }
.best-fit-option.is-selected {
  background: var(--violet);
  border-color: var(--ink);
}
.best-fit-result {
  background: var(--paper-deep);
  border-left: 5px solid var(--cyan);
}
.site-footer { border-top: 2px solid var(--ink); }
@media (max-width: 700px) {
  .hero-portrait {
    border-width: 6px;
    box-shadow: 7px 8px 0 var(--lime), var(--shadow-deep);
  }
  .hero-shell::before { height: 92px; left: -75px; top: 34px; width: 220px; }
  .hero-shell::after { height: 14px; right: 18px; top: 36px; width: 140px; }
  .stage-orbit--one { height: 350px; right: 1%; top: 12%; width: 235px; }
  .stage-orbit--two { height: 420px; right: -10%; top: 5%; width: 270px; }
  .orbit-card { box-shadow: 4px 4px 0 var(--cyan); }
  .orbit-card--two { box-shadow: 4px 4px 0 var(--pink); }
  .visual-break { box-shadow: 5px 6px 0 color-mix(in srgb, var(--pink) 55%, transparent); }
  .visual-break::before { height: 95px; right: 28px; top: -42px; width: 120px; }
}

/* JKK DARK CONTRAST FIX */
:root[data-theme="dark"] {
  --cream: #f8f7f0;
}

/* JKK CLEAN LAB V3 — reference-led clean product editorial */
:root {
  --paper: #eef2f6;
  --paper-deep: #e1e8f1;
  --ink: #101828;
  --muted: #5f6d81;
  --line: rgba(16, 24, 40, .15);
  --line-strong: rgba(16, 24, 40, .38);
  --red: #f1635e;
  --red-dark: #c9475b;
  --gold: #f3b84d;
  --cream: #ffffff;
  --panel: #101828;
  --panel-soft: #253451;
  --blue: #435bd5;
  --violet: #6757c9;
  --lime: #cbe75a;
  --cyan: #55c6ca;
  --pink: #efa6c5;
  --shadow: 0 18px 46px rgba(43, 57, 82, .14);
  --shadow-deep: 0 24px 58px rgba(16, 24, 40, .25);
}
:root[data-theme="dark"] {
  --paper: #0f182d;
  --paper-deep: #1d2b47;
  --ink: #f8f9fb;
  --muted: #acb8cd;
  --line: rgba(248, 249, 251, .18);
  --line-strong: rgba(248, 249, 251, .42);
  --cream: #f8f9fb;
  --panel: #0b1427;
  --panel-soft: #223553;
  --shadow: 0 18px 46px rgba(0, 0, 0, .28);
  --shadow-deep: 0 24px 58px rgba(0, 0, 0, .46);
}
body { background: var(--paper); }
body::before {
  background-image: radial-gradient(rgba(16, 24, 40, .16) .4px, transparent .4px);
  background-size: 8px 8px;
  opacity: .1;
}
:root[data-theme="dark"] body::before {
  background-image: radial-gradient(rgba(248, 249, 251, .16) .4px, transparent .4px);
  mix-blend-mode: screen;
  opacity: .08;
}
.masthead {
  background: var(--cream);
  border-bottom: 1px solid var(--ink);
}
.wordmark-dot { color: var(--red); }
.icon-button { border-radius: 7px; }
.icon-button:hover {
  background: var(--pink);
  border-color: var(--ink);
  color: var(--ink);
  transform: rotate(-3deg);
}
.hero-shell {
  background: #e7edf4;
  border: 1px solid var(--line);
  border-radius: 0 0 28px 28px;
  box-shadow: none;
  color: var(--ink);
}
.hero-shell::before {
  background: #d4ddff;
  box-shadow: none;
  height: 186px;
  left: -112px;
  opacity: 1;
  top: 46px;
  transform: rotate(-5deg);
  width: 350px;
}
.hero-shell::after {
  background: var(--gold);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 18px;
  right: 72px;
  top: 56px;
  transform: rotate(4deg);
  width: 190px;
}
.hero-copy .kicker { color: var(--red); }
.hero-copy h1 { color: var(--ink); }
.hero-copy h1 em { color: var(--red); text-shadow: none; }
.hero-deck { color: var(--muted); }
.hero-code, .hero-signals span, .stage-coordinate, .hero-index { color: var(--muted); }
.hero-copy .button--quiet {
  border-bottom: 2px solid var(--blue);
  color: var(--ink);
}
.hero-copy .button--quiet:hover { color: var(--blue); }
.button--primary {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--cyan);
  color: #fff;
}
.button--primary:hover {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 3px 3px 0 var(--pink);
  color: #fff;
}
.privacy-line { color: var(--muted); }
.privacy-line strong { color: var(--ink); }
.privacy-check {
  border-color: var(--blue);
  color: var(--blue);
}
.hero-signals { border-top-color: var(--line-strong); }
.hero-signals div + div { border-left-color: var(--line); }
.hero-signals b { color: var(--blue); }
.hero-stage {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin-top: 10px;
}
.hero-stage::before {
  color: var(--muted);
  content: "MBTI-JKK / ค้นหาตัวเอง";
  font-size: .58rem;
  font-weight: 950;
  left: 22px;
  letter-spacing: .12em;
  position: absolute;
  top: 19px;
  z-index: 2;
}
.stage-grid {
  background-image:
    linear-gradient(rgba(67, 91, 213, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 91, 213, .1) 1px, transparent 1px);
  opacity: .6;
}
.stage-orbit {
  border-color: rgba(16, 24, 40, .18);
  border-radius: 8px;
}
.hero-portrait {
  border-color: #fff;
  box-shadow: var(--shadow-deep);
}
.photo-label {
  background: var(--red);
  color: #fff;
  text-shadow: none;
}
.orbit-card {
  border-color: var(--ink);
  box-shadow: 7px 7px 0 var(--cyan);
}
.orbit-card--two { box-shadow: 7px 7px 0 var(--pink); }
.hero-badge {
  background: var(--lime);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  color: var(--ink);
}
.type-ticker {
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  color: #fff;
}
.type-ticker i { color: var(--lime); }
.fact-row {
  background: var(--cream);
  border-bottom: 1px solid var(--ink);
}
.fact-intro,
.fact:nth-child(2),
.fact:nth-child(3),
.fact:nth-child(4),
.fact:nth-child(5) {
  background: var(--cream);
}
.fact-intro { box-shadow: inset 0 5px 0 var(--violet); }
.fact:nth-child(2) { box-shadow: inset 0 5px 0 var(--cyan); }
.fact:nth-child(3) { box-shadow: inset 0 5px 0 var(--gold); }
.fact:nth-child(4) { box-shadow: inset 0 5px 0 var(--pink); }
.fact:nth-child(5) { box-shadow: inset 0 5px 0 var(--lime); }
.fact-intro span, .fact-intro em, .fact i { color: var(--violet); }
.field-notes::before { display: none; }
.method-photo {
  border-radius: 5px;
  box-shadow: var(--shadow);
}
.method-photo--main { outline-color: var(--cyan); }
.method-photo--small { outline-color: var(--pink); }
.method-sticker {
  background: var(--red);
  border-color: var(--ink);
  border-radius: 6px;
  box-shadow: 6px 7px 0 var(--lime);
}
.visual-break {
  background: var(--panel);
  box-shadow: var(--shadow);
}
.visual-break::before {
  background: var(--cyan);
  border: 0;
  border-radius: 0;
  height: 145px;
  right: 58px;
  top: -64px;
  transform: rotate(14deg);
  width: 180px;
}
.visual-break h2 em { color: var(--lime); }
.visual-break-gallery figure {
  border-color: var(--lime);
  border-radius: 5px;
  box-shadow: 5px 6px 0 var(--ink);
}
.character-strip figure {
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: 5px 6px 0 var(--cyan);
}
.character-strip figure:nth-child(4n + 1) { border-color: var(--cyan); }
.character-strip figure:nth-child(4n + 2) { border-color: var(--pink); box-shadow: 5px 6px 0 var(--pink); }
.character-strip figure:nth-child(4n + 3) { border-color: var(--gold); box-shadow: 5px 6px 0 var(--gold); }
.character-strip figure:nth-child(4n + 4) { border-color: var(--violet); box-shadow: 5px 6px 0 var(--violet); }
.character-strip figure:hover { box-shadow: 2px 3px 0 var(--lime); }
.method-panel {
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: 8px;
}
.test-header { border-bottom-color: var(--ink); }
.question-meta span:first-child,
.question-number,
.axis-row__score,
.best-fit-result span { color: var(--violet); }
.listen-control {
  border: 1px solid var(--ink);
  border-radius: 7px;
  box-shadow: 4px 4px 0 var(--cyan);
}
.choice {
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(67, 91, 213, .22);
}
.choice:hover { border-color: var(--blue); box-shadow: 4px 4px 0 var(--cyan); }
.choice.selected {
  background: var(--blue);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
}
.result-hero {
  background: var(--panel);
  border-radius: 0 0 20px 20px;
}
.result-type { color: var(--lime); text-shadow: none; }
.result-art {
  border-radius: 5px;
  box-shadow: var(--shadow-deep);
}
.result-art-label { background: var(--red); color: #fff; }
.best-fit-option { border-radius: 5px; }
.best-fit-option.is-selected { background: var(--blue); border-color: var(--ink); }
.best-fit-result {
  background: var(--paper-deep);
  border-left-color: var(--cyan);
}
.site-footer { border-top-color: var(--ink); }
:root[data-theme="dark"] .hero-shell {
  background: #1b2944;
  color: var(--ink);
}
:root[data-theme="dark"] .hero-stage { background: #15233b; }
:root[data-theme="dark"] .hero-copy h1 { color: #f8f9fb; }
:root[data-theme="dark"] .hero-deck,
:root[data-theme="dark"] .hero-copy .button--quiet { color: #c9d4e6; }
@media (max-width: 700px) {
  .hero-stage { border-radius: 12px; }
  .hero-shell::before { height: 96px; left: -78px; top: 34px; width: 220px; }
  .hero-shell::after { height: 13px; right: 17px; top: 36px; width: 135px; }
  .hero-portrait { box-shadow: 7px 8px 0 rgba(67, 91, 213, .45), var(--shadow-deep); }
  .visual-break::before { height: 92px; right: 28px; top: -40px; width: 118px; }
}

/* JKK DARK BUTTON FIX V3 */
:root[data-theme="dark"] .button--primary {
  background: #0b1427;
  border-color: var(--lime);
  color: var(--lime);
}
:root[data-theme="dark"] .button--primary:hover {
  background: #223553;
  border-color: var(--cyan);
  color: #fff;
}

/* MBTI-JKK HUMAN READABILITY V4 — clear Thai copy, larger labels, and character viewer */
.wordmark { align-items: baseline; gap: 10px; }
.wordmark-main { font-size: 1.32rem; letter-spacing: -.045em; }
.wordmark-sub { font-size: .64rem; letter-spacing: .06em; }

.type-ticker {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  padding: 0;
  text-transform: none;
  white-space: normal;
}
.type-ticker i { display: none; }
.axis-guide-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-height: 102px;
  padding: 17px 22px;
}
.axis-guide-item + .axis-guide-item { border-left: 1px solid rgba(255,255,255,.2); }
.axis-guide-item strong { color: var(--lime); font-size: 1.02rem; letter-spacing: .04em; }
.axis-guide-item span { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: 0; line-height: 1.55; }

.fact-intro span { font-size: .72rem; }
.fact-intro em { font-size: .66rem; }
.fact-intro strong { font-size: 1.12rem; }
.fact b { font-size: 2.8rem; }
.fact span { color: var(--ink); font-size: .86rem; font-weight: 700; line-height: 1.55; }
.answer-extremes { font-size: .88rem; line-height: 1.55; }
.choice-copy { font-size: .78rem; line-height: 1.3; }
.question-context { font-size: .95rem; }
.answer-extremes { align-items: stretch; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(92px, .32fr) minmax(0, 1fr); }
.answer-extreme, .answer-middle { background: var(--cream); border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 5px; justify-content: center; min-height: 74px; padding: 11px 13px; }
.answer-extreme strong, .answer-middle strong { color: var(--violet); font-size: .76rem; font-weight: 950; }
.answer-extreme span, .answer-middle span { color: var(--ink); font-size: .83rem; font-weight: 700; line-height: 1.5; }
.answer-extreme--right { text-align: right; }
.answer-middle { align-items: center; border-color: var(--cyan); text-align: center; }
.answer-middle strong { color: var(--red); }

.method-sticker { font-size: .68rem; height: 136px; width: 136px; }
.method-sticker strong { font-size: .95rem; line-height: 1.25; }

.question-art__label { align-items: center; display: flex; min-height: 34px; margin-bottom: 12px; }
.art-tag { display: inline-block; font-size: .72rem; left: auto; letter-spacing: .06em; padding: 8px 11px; position: static; top: auto; }
.question-art .art-frame { height: 500px; }

.character-strip figure { cursor: zoom-in; }
.character-strip figure:focus-visible { outline: 4px solid var(--red); outline-offset: 4px; }

.character-lightbox[hidden] { display: none !important; }
.character-lightbox { align-items: center; display: grid; inset: 0; justify-items: center; padding: 24px; position: fixed; z-index: 100; }
.character-lightbox__backdrop { background: rgba(16,24,40,.74); inset: 0; position: absolute; }
.character-lightbox__panel { background: var(--paper); border: 2px solid var(--ink); box-shadow: 12px 14px 0 rgba(16,24,40,.25); max-height: calc(100vh - 48px); max-width: 1120px; overflow: auto; padding: 30px; position: relative; width: min(100%, 1120px); z-index: 1; }
.character-lightbox__close { background: var(--ink); border: 2px solid var(--ink); color: var(--cream); cursor: pointer; font-size: .82rem; font-weight: 900; padding: 9px 13px; position: absolute; right: 22px; top: 22px; }
.character-lightbox__close:hover { background: var(--red); border-color: var(--red); }
.character-lightbox__panel h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); margin: 0 90px 8px 0; }
.character-lightbox__intro { color: var(--muted); font-size: .95rem; line-height: 1.7; margin-bottom: 24px; }
.character-lightbox__pair { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.character-lightbox__pair figure { background: var(--cream); border: 1px solid var(--ink); margin: 0; padding: 12px; }
.character-lightbox__pair img { background: var(--paper-deep); display: block; height: min(68vh, 760px); object-fit: contain; width: 100%; }
.character-lightbox__pair figcaption { color: var(--ink); font-size: 1rem; font-weight: 950; padding: 12px 5px 4px; text-align: center; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 700px) {
  .wordmark-main { font-size: 1.12rem; }
  .wordmark-sub { font-size: .55rem; }
  .type-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axis-guide-item { min-height: 92px; padding: 13px 14px; }
  .axis-guide-item:nth-child(odd) { border-left: 0; }
  .axis-guide-item:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,.2); }
  .axis-guide-item strong { font-size: .9rem; }
  .axis-guide-item span { font-size: .72rem; line-height: 1.45; }
  .fact span { font-size: .78rem; }
  .answer-extremes { font-size: .78rem; grid-template-columns: 1fr; line-height: 1.55; }
  .answer-extreme, .answer-middle { min-height: 0; padding: 10px 12px; }
  .answer-extreme--right { text-align: left; }
  .answer-middle { order: 3; }
  .answer-extreme strong, .answer-middle strong { font-size: .72rem; }
  .answer-extreme span, .answer-middle span { font-size: .78rem; }
  .choice-copy { font-size: .7rem; }
  .method-sticker { font-size: .58rem; height: 104px; width: 104px; }
  .method-sticker strong { font-size: .76rem; }
  .question-art__label { margin-bottom: 8px; }
  .art-tag { font-size: .62rem; padding: 7px 9px; }
  .question-art .art-frame { height: 425px; }
  .character-lightbox { padding: 12px; }
  .character-lightbox__panel { padding: 23px 15px 16px; }
  .character-lightbox__close { right: 14px; top: 14px; }
  .character-lightbox__panel h2 { font-size: 2.1rem; margin-right: 72px; }
  .character-lightbox__pair { gap: 8px; }
  .character-lightbox__pair figure { padding: 7px; }
  .character-lightbox__pair img { height: 56vh; }
  .character-lightbox__pair figcaption { font-size: .82rem; padding-top: 8px; }
}

/* REACT BITS INSPIRED MOTION V1 — BlurText, ScrollReveal, TiltedCard */
.hero-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
  animation: rb-blur-text .85s cubic-bezier(.2,.72,.2,1) forwards;
}

.hero-line--accent { animation-delay: .12s; }

@keyframes rb-blur-text {
  0% { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.hero-stage {
  --rb-tilt-x: 0deg;
  --rb-tilt-y: 0deg;
  --rb-spot-x: 50%;
  --rb-spot-y: 50%;
  perspective: 1100px;
}

.hero-stage::after {
  background: radial-gradient(circle at var(--rb-spot-x) var(--rb-spot-y), rgba(255,255,255,.2), transparent 28%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.hero-portrait {
  transform: rotate(2deg) perspective(900px) rotateX(var(--rb-tilt-y)) rotateY(var(--rb-tilt-x));
  transition: transform .18s cubic-bezier(.2,.72,.2,1), box-shadow .25s ease;
  will-change: transform;
}

.hero-portrait img { object-position: center 28%; }

.orbit-card--one { animation: rb-float-one 5.5s ease-in-out infinite; }
.orbit-card--two { animation: rb-float-two 6.2s ease-in-out .4s infinite; }

@keyframes rb-float-one {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes rb-float-two {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(10px) rotate(-2deg); }
}

body.rb-motion-ready .rb-reveal-target {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.72,.2,1);
}

body.rb-motion-ready .rb-reveal-target.rb-reveal-in {
  opacity: 1;
  transform: none;
}

body.rb-motion-ready .character-index.rb-reveal-in .character-strip figure {
  animation: rb-card-rise .65s cubic-bezier(.2,.72,.2,1) both;
  animation-delay: calc(var(--rb-card-index, 0) * 35ms);
}

@keyframes rb-card-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

.character-strip figure:nth-child(1) { --rb-card-index: 1; }
.character-strip figure:nth-child(2) { --rb-card-index: 2; }
.character-strip figure:nth-child(3) { --rb-card-index: 3; }
.character-strip figure:nth-child(4) { --rb-card-index: 4; }
.character-strip figure:nth-child(5) { --rb-card-index: 5; }
.character-strip figure:nth-child(6) { --rb-card-index: 6; }
.character-strip figure:nth-child(7) { --rb-card-index: 7; }
.character-strip figure:nth-child(8) { --rb-card-index: 8; }
.character-strip figure:nth-child(9) { --rb-card-index: 9; }
.character-strip figure:nth-child(10) { --rb-card-index: 10; }
.character-strip figure:nth-child(11) { --rb-card-index: 11; }
.character-strip figure:nth-child(12) { --rb-card-index: 12; }
.character-strip figure:nth-child(13) { --rb-card-index: 13; }
.character-strip figure:nth-child(14) { --rb-card-index: 14; }
.character-strip figure:nth-child(15) { --rb-card-index: 15; }
.character-strip figure:nth-child(16) { --rb-card-index: 16; }

@media (prefers-reduced-motion: reduce) {
  .hero-line { animation: none; filter: none; opacity: 1; transform: none; }
  .orbit-card--one, .orbit-card--two { animation: none; }
  body.rb-motion-ready .rb-reveal-target { opacity: 1; transform: none; transition: none; }
  body.rb-motion-ready .character-index.rb-reveal-in .character-strip figure { animation: none; }
  .hero-portrait { transform: rotate(2deg); transition: none; }
}

/* FULL VISUAL REFRESH V2 — all website type/support art is newly generated */
.orbit-card img { aspect-ratio: 2 / 3; object-position: center 18%; }
.character-strip img { aspect-ratio: 2 / 3; object-fit: cover; object-position: center 18%; }
 
/* MBTI CHARACTER REGISTRY V5 — new website pair pack with house colors */
.character-pair-card[data-house="sentinel"] { --house-color: #2F5DA8; --house-color-light: #DCE8FF; }
.character-pair-card[data-house="diplomat"] { --house-color: #3F7D5A; --house-color-light: #D9F0E0; }
.character-pair-card[data-house="analyst"] { --house-color: #7B4AB8; --house-color-light: #EADDF7; }
.character-pair-card[data-house="explorer"] { --house-color: #D69E2E; --house-color-light: #FFF1BE; }
.character-pair-card {
  background: var(--cream);
  border-color: var(--house-color, var(--ink));
  box-shadow: 6px 7px 0 var(--house-color, var(--cyan));
}
.character-pair-card .character-pair {
  background: var(--ink);
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character-pair__portrait {
  background: var(--paper-deep);
  min-width: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2 / 3;
}
.character-pair__portrait img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
}
.character-pair__portrait span {
  background: var(--ink);
  bottom: 6px;
  color: #fff;
  font-size: .52rem;
  font-weight: 950;
  left: 6px;
  letter-spacing: .08em;
  padding: 4px 6px;
  position: absolute;
}
.character-pair-card figcaption {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.character-pair-card figcaption b {
  color: var(--house-color, var(--ink));
}
.house-badge {
  background: var(--house-color-light, var(--cream));
  border: 1px solid var(--house-color, var(--ink));
  color: var(--house-color, var(--ink));
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .06em;
  padding: 3px 5px;
  text-transform: uppercase;
}
.result-art--pair {
  padding: 14px;
  border-color: var(--house-color, var(--ink));
  box-shadow: 8px 9px 0 var(--house-color, var(--cyan));
}
.result-character-pair {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
}
.result-character-pair figure {
  background: var(--paper-deep);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.result-character-pair img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
}
.result-character-pair figcaption {
  background: var(--ink);
  bottom: 8px;
  color: #fff;
  font-size: .56rem;
  font-weight: 950;
  left: 8px;
  padding: 5px 7px;
  position: absolute;
}
.result-art--pair .result-art-label {
  left: 22px;
  top: 22px;
  background: var(--house-color-light, var(--ink));
  color: var(--house-color, var(--ink));
}
@media (max-width: 620px) {
  .character-pair__portrait {
    aspect-ratio: 3 / 4;
  }
  .character-pair__portrait span {
    bottom: 4px;
    font-size: .46rem;
    left: 4px;
    padding: 3px 4px;
  }
  .result-art--pair {
    padding: 10px;
  }
  .result-character-pair {
    gap: 5px;
  }
  .result-art--pair .result-art-label {
    left: 16px;
    top: 16px;
  }
}
/* Keyboard focus stays visible in both light and dark themes. */
:where(a, button):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

/* MBTI-JKK CHANNEL CTA V1 — direct route back to the current channel. */
.channel-nav-link {
  color: var(--ink) !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.channel-nav-link:hover { color: var(--violet) !important; }
.channel-button {
  border: 1px solid currentColor;
  gap: 9px;
  padding: 11px 15px;
  text-decoration: none;
}
.channel-button:hover {
  border-color: var(--cyan);
  color: var(--cyan) !important;
  transform: translateY(-2px);
}
.channel-button--result { color: var(--ink); }
@media (max-width: 700px) {
  .channel-button { align-self: stretch; justify-content: center; }
}
.choice:focus-visible,
.best-fit-option:focus-visible {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--red);
}

/* MBTI-JKK MOTION PROTOTYPE V1 — two generated pose frames plus the canonical frame. */
.motion-portrait {
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.motion-portrait .motion-frame {
  animation: mbtiMotionFrame 6.6s ease-in-out infinite;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center 24%;
  opacity: 0;
  position: absolute;
  width: 100%;
  will-change: opacity, transform;
}
.motion-portrait .motion-frame--base {
  animation: mbtiMotionBase 6.6s ease-in-out infinite;
  animation-delay: -0.15s;
  opacity: 1;
  z-index: 0;
}
.motion-portrait .motion-frame:nth-child(2) { animation-delay: -2.35s; }
.motion-portrait .motion-frame:nth-child(3) { animation-delay: -4.55s; }
/* The canonical frame stays underneath every generated pose so a cross-fade can never leave a blank stage. */
@keyframes mbtiMotionBase {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -0.25%, 0); }
}
@keyframes mbtiMotionFrame {
  0%, 26% { opacity: 1; transform: translate3d(0, 0, 0); }
  32%, 60% { opacity: 0; transform: translate3d(0, -0.35%, 0); }
  66%, 92% { opacity: 0; transform: translate3d(0, 0.35%, 0); }
  98%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.motion-portrait .motion-frame:nth-child(2) { animation-name: mbtiMotionFrameTwo; }
.motion-portrait .motion-frame:nth-child(3) { animation-name: mbtiMotionFrameThree; }
@keyframes mbtiMotionFrameTwo {
  0%, 26% { opacity: 0; transform: translate3d(0, 0.35%, 0); }
  32%, 60% { opacity: 1; transform: translate3d(0, 0, 0); }
  66%, 100% { opacity: 0; transform: translate3d(0, -0.35%, 0); }
}
@keyframes mbtiMotionFrameThree {
  0%, 60% { opacity: 0; transform: translate3d(0, -0.35%, 0); }
  66%, 92% { opacity: 1; transform: translate3d(0, 0, 0); }
  98%, 100% { opacity: 0; transform: translate3d(0, 0.35%, 0); }
}

/* All existing character cards receive a low-cost idle motion; pose assets are added only after identity QC. */
@media (prefers-reduced-motion: no-preference) {
  .character-pair__portrait img,
  .character-pair-card img,
  .visual-break-gallery img,
  .method-photo img,
  .question-art .art-frame img,
  .result-character-pair img {
    animation: mbtiCharacterIdle 6.8s ease-in-out infinite;
    transform-origin: center 88%;
    will-change: transform;
  }
  .character-pair__portrait:nth-child(2n) img,
  .character-pair-card:nth-child(2n) img,
  .visual-break-gallery figure:nth-child(2n) img,
  .method-photo--small img,
  .result-character-pair figure:nth-child(2n) img { animation-delay: -2.2s; }
  .character-pair__portrait:nth-child(3n) img,
  .character-pair-card:nth-child(3n) img,
  .visual-break-gallery figure:nth-child(3n) img,
  .result-character-pair figure:nth-child(3n) img { animation-delay: -4.1s; }
}
@keyframes mbtiCharacterIdle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -4px, 0) rotate(.25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-portrait .motion-frame { animation: none; opacity: 0; }
  .motion-portrait .motion-frame--base { opacity: 1; }
}

/* MBTI-JKK TYPOGRAPHY V1 — sharp, youthful Thai type with readable minimums. */
html,
body,
button,
a,
input,
textarea,
select {
  font-family: "Mitr", "Leelawadee UI", Tahoma, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: "Chakra Petch", "Mitr", "Leelawadee UI", Tahoma, sans-serif;
  letter-spacing: .01em;
  line-height: 1.2;
}
p, button, a, label, figcaption, span {
  letter-spacing: normal;
}
.wordmark { letter-spacing: normal; }
.wordmark-main { font-weight: 800; letter-spacing: .015em; }
.wordmark-sub { font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.masthead-nav a { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.availability { font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.kicker { font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.hero-code, .hero-signals span, .stage-coordinate, .hero-index { font-size: .68rem; letter-spacing: .03em; }
.hero-deck, .method-lead, .visual-break-copy p, .atlas-side-note p { font-weight: 500; }
.privacy-line { font-size: .8rem; font-weight: 500; }
.type-ticker { font-size: .74rem; letter-spacing: .03em; }
.fact-intro span, .fact-intro em, .atlas-side-note span { letter-spacing: .03em; }
.question-meta, .question-context, .answer-heading, .truth-reminder, .question-art figcaption { font-weight: 500; }
.hero-copy h1 { font-family: "Chakra Petch", "Mitr", "Leelawadee UI", Tahoma, sans-serif; letter-spacing: .01em; line-height: 1.08; }
.question-panel h2 { font-weight: 700; letter-spacing: .01em; line-height: 1.3; margin-bottom: .22em; }
.answer-heading { align-items: flex-start; gap: 18px; line-height: 1.55; }
.answer-heading span { font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5; }
.answer-heading small { font-size: .78rem; line-height: 1.5; }
.choice-copy { font-size: .82rem; font-weight: 600; }
.answer-extreme strong, .answer-middle strong { font-size: .82rem; }
.answer-extreme span, .answer-middle span { font-size: .9rem; font-weight: 600; }
.method-sticker { font-weight: 800; letter-spacing: .02em; }
.site-footer { font-size: .68rem; letter-spacing: .03em; }

@media (max-width: 700px) {
  .wordmark-sub { font-size: .62rem; }
  .masthead-nav a { font-size: .72rem; }
  .privacy-line { font-size: .74rem; }
  .type-ticker { font-size: .66rem; }
  .axis-guide-item span { font-size: .78rem; }
  .hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 3.8rem); line-height: 1.12; }
  .method-content h2, .character-index h2, .visual-break h2 { font-size: clamp(2.15rem, 9vw, 2.8rem); line-height: 1.16; }
  .question-panel h2 { font-size: clamp(1.7rem, 6.5vw, 2.35rem); line-height: 1.32; }
  .result-copy h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
  .answer-heading { gap: 7px; }
  .answer-heading span { font-size: .98rem; line-height: 1.5; }
  .answer-heading small { font-size: .76rem; }
  .answer-extreme strong, .answer-middle strong { font-size: .78rem; }
  .answer-extreme span, .answer-middle span { font-size: .86rem; }
  .choice-copy { font-size: .74rem; }
  .site-footer { font-size: .62rem; }
}