@font-face{font-family:"Noto Sans JP";src:url("/assets/fonts/NotoSansJP.woff2") format("woff2");font-weight:100 900;font-display:swap;}
/* DOCTOR TYPE 8 — 編集版3.0。基礎レイアウトの後に「医局の編集室」のトークンと画面を定義。
   見出し・本文・毒はNoto Sans JP、コードと数字はシステム等幅。旧SVG用の基礎ルールも保持する。 */
:root {
  --paper: #EEF3F1;
  --sheet: #FFFFFF;
  --ink: #17211E;
  --muted: #56655F;
  --rule: #D3DDD9;
  --grid: #E3EBE8;
  --primary: #15524A;
  --primary-ink: #FFFFFF;
  --primary-soft: #DCEDE9;
  --red: #C8321F;
  --red-soft: #FBE9E5;
  --marker: #FFE45C;
  --focus: #2F6FE0;
  --shadow: 0 1px 0 rgba(23, 33, 30, .06), 0 10px 30px -18px rgba(23, 33, 30, .35);

  --f-display: "Dela Gothic One", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-pen: "Yomogi", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --f-mono: "IBM Plex Mono", "Zen Kaku Gothic New", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-b: 16px;
  --fs-l: 18px;
  --fs-xl: 22px;
  --fs-2xl: clamp(26px, 6.4vw, 34px);
  --fs-3xl: clamp(36px, 10vw, 54px);

  --lh-body: 1.8;
  --lh-tight: 1.35;
  --r: 14px;
  --r-s: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0D1412; --sheet: #141D1A; --ink: #E2EBE7; --muted: #92A39D; --rule: #2A3833; --grid: #1B2522;
    --primary: #5CC3B1; --primary-ink: #04201B; --primary-soft: #16302B;
    --red: #FF7C69; --red-soft: #3A1D18; --marker: #6B5A10; --focus: #7FA8FF;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D1412; --sheet: #141D1A; --ink: #E2EBE7; --muted: #92A39D; --rule: #2A3833; --grid: #1B2522;
  --primary: #5CC3B1; --primary-ink: #04201B; --primary-soft: #16302B;
  --red: #FF7C69; --red-soft: #3A1D18; --marker: #6B5A10; --focus: #7FA8FF;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
}

/* タイプ色（派閥ごとに色相、3文字目で濃淡） */
[data-type="ABX"] { --tc: #E36A2E; } [data-type="ABS"] { --tc: #B4501F; }
[data-type="ACX"] { --tc: #8A5CC2; } [data-type="ACS"] { --tc: #6A3F9E; }
[data-type="TBX"] { --tc: #3A7BD5; } [data-type="TBS"] { --tc: #27579B; }
[data-type="TCX"] { --tc: #2E9E6E; } [data-type="TCS"] { --tc: #1F7453; }
[data-fam="AB"] { --fc: #E36A2E; } [data-fam="AC"] { --fc: #8A5CC2; }
[data-fam="TB"] { --fc: #3A7BD5; } [data-fam="TC"] { --fc: #2E9E6E; }

/* ---------- 土台 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: 100% 28px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-b);
  line-height: var(--lh-body);
  letter-spacing: .02em;
  /* 改行は文節の区切り（<wbr>）だけ。はみ出すときだけ強制改行 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 680px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 64px; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); text-wrap: balance; font-weight: 400; }
p, dl, dd, ul { margin: 0; }
p, li, dd { text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sheet); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
.loading { color: var(--muted); padding-block: 40px; }

/* 共通の文字スタイル */
.display, .section-title, .hero h1, .dx h2.h, .qcard h2, .block > h2, .family > header h3, .axis-card .q {
  font-family: var(--f-display); font-weight: 400; letter-spacing: .02em; font-feature-settings: "palt" 1;
}
.eyebrow, .variant, .plan dt, .facts-list dt, .poles span {
  font-family: var(--f-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--muted); line-height: 1.5;
}
.num, .brand, .code-line, .qno, .count, .axis .lbl, .poles b, .ph .code, .facts span {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.note { font-size: var(--fs-s); color: var(--muted); line-height: 1.7; }

/* レイアウト */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.block { margin-top: 32px; display: grid; gap: 12px; }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }
.pad { padding: 16px; display: grid; gap: 8px; }
.pad h3 { font-size: var(--fs-b); font-weight: 700; }
.section-title { font-size: var(--fs-xl); }
.block > h2 { font-size: var(--fs-xl); }
.eyebrow { color: var(--primary); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--sheet); color: var(--ink); font-size: var(--fs-b); font-weight: 700; line-height: 1.4;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 60%, #000); }
.btn.big { min-height: 60px; font-size: var(--fs-l); padding-inline: 32px; }
.btn.ghost { border-color: var(--rule); }
.btn.line { background: #06C755; border-color: #06C755; color: #FFFFFF; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.linkbtn { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--fs-m); font-weight: 700; }
.linkbtn.small { font-size: var(--fs-s); justify-self: start; }

/* ---------- ヘッダー帯 ---------- */
.brandbar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 24px; }
.brand { font-weight: 600; letter-spacing: .14em; font-size: var(--fs-s); }
.brandbar .meta { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .08em; }

/* ---------- 会話（ホネ先輩・キャラクター共通） ---------- */
/* アイコンと吹き出しを上下中央でそろえ、しっぽは吹き出しの縦中央＝アイコンの中心を指す */
.avatar { display: block; width: 100%; height: 100%; }
.avatar.big { width: 96px; height: 96px; }
.talk { --av: 56px; display: grid; grid-template-columns: var(--av) minmax(0, 1fr); gap: 16px; align-items: center; }
.talk.lg { --av: 72px; }
.talk.sm { --av: 40px; gap: 12px; }
.talk-av { width: var(--av); height: var(--av); border-radius: 16px; overflow: hidden; }
.talk-av .chara { display: block; width: 100%; height: 100%; }
.bubble { position: relative; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px; font-size: var(--fs-b); font-weight: 500; line-height: 1.7; }
.bubble::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: inherit; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.bubble p + p { margin-top: 6px; }
.talk-name { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--muted); line-height: 1.4; margin-bottom: 2px; }
.talk.chara .bubble { border-color: var(--tc); font-weight: 700; }
.talk.chara .bubble::before { border-color: var(--tc); }
.talk.chara .talk-name { color: var(--tc); }
.talk.sm .bubble { padding: 8px 12px; font-size: var(--fs-m); font-weight: 700; }

/* ---------- LP ---------- */
.hero { display: grid; gap: 24px; padding-block: 8px 8px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.hero h1 { font-size: var(--fs-3xl); line-height: 1.15; }
.hero h1 .red { color: var(--ink); background: linear-gradient(transparent 58%, #FF8E7A 58%, #FF8E7A 92%, transparent 92%); padding-inline: 2px; }
.hero .lede { font-size: var(--fs-b); color: var(--muted); }
.hero-cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hero-cast .cast { aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.hero-cast .cast .chara { width: 100%; height: 100%; display: block; }
.hero-cast .cast:nth-child(odd) { transform: rotate(-3deg); }
.hero-cast .cast:nth-child(even) { transform: rotate(3deg) translateY(6px); }
@media (min-width: 640px) { .hero-grid { grid-template-columns: 1.3fr 1fr; } .hero-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts span { font-family: var(--f-body); font-size: var(--fs-s); font-weight: 700; letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; background: var(--sheet); }
.intro { font-size: var(--fs-m); color: var(--muted); border-left: 3px solid var(--primary); padding-left: 12px; }
.resume { padding: 16px; display: grid; gap: 12px; }

.families { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .families { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.family { border: 2px solid var(--fc); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.family > header { background: var(--fc); color: #FFFFFF; padding: 10px 16px; display: grid; gap: 2px; }
.family > header h3 { font-size: var(--fs-l); }
.family > header p { font-size: var(--fs-s); font-weight: 700; opacity: .95; }
.family-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.dexcard { display: grid; gap: 4px; align-content: start; min-width: 0; }
.dexcard .variant { margin-top: 8px; }
.dexcard h4 { font-size: var(--fs-b); font-weight: 900; line-height: var(--lh-tight); }
.dexcard .chara-name { font-size: var(--fs-b); font-weight: 700; color: var(--tc); line-height: 1.5; }
.dexcard .sh { font-size: var(--fs-s); color: var(--muted); line-height: 1.7; }

.axis-cards { display: grid; gap: 12px; }
.axis-card { padding: 16px; display: grid; gap: 12px; }
.axis-card .q { font-size: var(--fs-l); line-height: 1.5; }
.poles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.poles > div { border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 12px; display: grid; gap: 4px; align-content: start; }
.poles b { font-size: var(--fs-xl); font-weight: 600; line-height: 1; }
.poles p { font-size: var(--fs-m); line-height: 1.7; }
.method { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sources { padding-left: 1.2em; font-size: var(--fs-m); display: grid; gap: 4px; }

.footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.footer .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: var(--fs-s); }

/* ---------- キャラクター枠（仕様 §16 の画像枠） ---------- */
.ph { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 16px; overflow: hidden; isolation: isolate; container-type: inline-size; }
.ph .chara { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: var(--sheet); }
.ph .code { position: absolute; left: 8px; bottom: 8px; z-index: 1; font-weight: 600; font-size: max(11px, 7cqw); color: #FFFFFF; background: var(--tc); border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
.ph.hero { box-shadow: 0 0 0 3px var(--tc); }

/* ---------- 任意属性・チップ ---------- */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: var(--fs-m); margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); font-size: var(--fs-m); font-weight: 500; line-height: 1.4; }
.chip input:checked + span { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- 設問 ---------- */
.progress { display: grid; gap: 8px; margin-bottom: 20px; }
.progress .count { font-weight: 600; font-size: var(--fs-m); }
.progress .bar { height: 8px; border-radius: 99px; background: var(--grid); overflow: hidden; border: 1px solid var(--rule); }
.progress .bar i { display: block; height: 100%; background: var(--primary); width: 0; transition: width .25s ease; }
.qcard { padding: 24px 20px; display: grid; gap: 20px; }
.qcard .qno { color: var(--muted); font-size: var(--fs-xs); letter-spacing: .12em; }
.qcard h2 { font-size: var(--fs-2xl); line-height: 1.4; }
.options { display: grid; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 2px solid var(--rule); border-radius: 12px; background: var(--sheet); font-size: var(--fs-b); font-weight: 500; line-height: 1.5; }
.opt span::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); background: var(--sheet); }
.opt input:checked + span { border-color: var(--primary); background: var(--primary-soft); }
.opt input:checked + span::before { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 45%, var(--sheet) 50%); }
.opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.qnav { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 20px; }
.qnav .btn.primary { width: 100%; }
.banner { background: var(--red-soft); border: 1.5px solid var(--red); border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; font-size: var(--fs-m); }

/* ---------- 結果 ---------- */
.result { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 20px; display: grid; gap: 20px; }
.r-hero { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; align-items: center; }
/* キャラの口ぐせは、大きな似顔絵から出る吹き出しにする（デスクトップ：左向き、スマホ：上向き） */
.r-quote { margin-top: 8px; border-color: var(--tc); font-weight: 700; }
.r-quote::before { border-color: var(--tc); }
.r-quote .talk-name { color: var(--tc); }
.r-title { display: grid; gap: 6px; min-width: 0; }
.r-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: var(--fs-s); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.r-meta .num { color: var(--tc); font-weight: 600; }
.r-fam { color: var(--fc); }
.result h1 { font-family: var(--f-display); font-size: var(--fs-2xl); line-height: 1.25; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.r-nick { font-family: var(--f-pen); color: var(--red); font-size: var(--fs-l); line-height: 1.4; }
.r-lead { font-size: var(--fs-b); line-height: 1.9; }
.r-sec { border-top: 1px solid var(--rule); padding-top: 24px; display: grid; gap: 16px; }
.r-sec > h2 { font-family: var(--f-display); font-size: var(--fs-l); letter-spacing: .02em; font-feature-settings: "palt" 1; }
.r-final { gap: 12px; }
.r-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.r-sec-head h2 { font-family: var(--f-display); font-size: var(--fs-l); letter-spacing: .02em; font-feature-settings: "palt" 1; }
.ai-note { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.ai-note.loading::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--tc); animation: spin .8s linear infinite; }
.follow { font-size: var(--fs-b); font-weight: 700; line-height: 1.8; }
.final-msg { font-size: var(--fs-b); font-weight: 700; line-height: 1.9; }
#ai-sec[aria-busy="true"] [data-ai] { opacity: .45; transition: opacity .2s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .ai-in { animation: aiIn .45s ease both; }
  @keyframes aiIn { from { opacity: .2; } to { opacity: 1; } }
}
.r-stamp { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 460px) {
  .r-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .r-art { width: 72%; max-width: 260px; }
  .r-quote { margin-top: 14px; }
  .r-quote::before { left: 40px; top: -9px; margin-top: 0; border-left: 2px solid var(--tc); border-top: 2px solid var(--tc); border-bottom: 0; }
}

.axes { display: grid; gap: 16px; }
.axis { display: grid; gap: 6px; }
.axis .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-s); }
.axis .lbl small { display: block; font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; }
.axis .lbl span:last-child { text-align: right; }
.axis .lbl .win { font-weight: 600; color: var(--ink); }
.axis .lbl .lose { color: var(--muted); }
.axis .track { position: relative; height: 10px; border-radius: 99px; background: var(--grid); overflow: hidden; }
.axis .track i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--tc); border-radius: 99px; }
.axis .track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--sheet); }
.axis .close { font-size: var(--fs-s); color: var(--red); font-weight: 700; }

.praise { font-size: var(--fs-b); font-weight: 700; line-height: 1.8; }
mark { background: linear-gradient(transparent 55%, var(--marker) 55%); color: inherit; padding: 0 2px; }
.roasts { list-style: none; padding: 4px 0 4px 16px; border-left: 3px solid var(--red); display: grid; gap: 12px; }
.roasts li { font-family: var(--f-pen); color: var(--red); font-size: var(--fs-l); line-height: 1.65; }
.convo { display: grid; gap: 16px; }

.plan { display: grid; }
.plan div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); align-items: baseline; }
.plan div:last-child { border-bottom: 0; }
.plan dd { font-size: var(--fs-b); }
@media (max-width: 460px) { .plan div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.next { background: color-mix(in srgb, var(--tc) 10%, var(--sheet)); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.next .k, .mate .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--tc); }
.next p:last-child { font-size: var(--fs-b); font-weight: 700; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mate { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.mate-art { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; }
.mate-art .chara { display: block; width: 100%; height: 100%; }
.mate-name { font-size: var(--fs-m); font-weight: 700; line-height: 1.5; }
.mate-why { font-size: var(--fs-s); color: var(--muted); line-height: 1.6; }
@media (max-width: 520px) { .pair { grid-template-columns: minmax(0, 1fr); } }

.dex-details { display: grid; gap: 8px; }
.dex-details summary { cursor: pointer; font-weight: 700; font-size: var(--fs-m); line-height: 1.6; min-height: 32px; }
.dex-details .item { font-size: var(--fs-s); font-weight: 700; color: var(--tc); }
.zukan { display: grid; }
.zukan div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid); align-items: baseline; }
.zukan div:last-child { border-bottom: 0; }
.zukan dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--tc); }
.zukan dd { font-size: var(--fs-m); line-height: 1.7; }

/* 図鑑ページのカード */
.chart { overflow: hidden; }
.dx { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 20px; padding: 20px; align-items: center; }
.dx > div { display: grid; gap: 4px; min-width: 0; }
.dx h2.h { font-size: var(--fs-xl); }
.dx .code-line { font-size: var(--fs-m); font-weight: 600; color: var(--tc); }
.dx .chara-line { font-size: var(--fs-m); font-weight: 700; color: var(--tc); }
.dex-body { border-top: 1px solid var(--rule); padding: 20px; display: grid; gap: 16px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px; }
.badge { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.6; border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 10px; background: var(--sheet); }
.badge.fam { background: var(--fc); border-color: var(--fc); color: #FFFFFF; }
@media (max-width: 460px) { .dx { grid-template-columns: minmax(0, 1fr); padding: 16px; } .dx .ph { width: 64%; } .dex-body { padding: 16px; } }

.links-row { display: flex; flex-wrap: wrap; gap: 0 20px; }

/* ---------- CTA・保存 ---------- */
.ctas { display: grid; gap: 12px; }
.ctas.equal { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cta { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 2px solid var(--ink); background: var(--sheet); text-decoration: none; color: var(--ink); min-height: 44px; }
.cta.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.cta b { font-size: var(--fs-l); line-height: 1.5; }
.cta small { font-size: var(--fs-s); opacity: .85; line-height: 1.5; }
.cta.secondary { border: 1.5px solid var(--rule); padding: 12px 16px; }
.cta.secondary b { font-size: var(--fs-b); color: var(--primary); }
.save { padding: 20px; display: grid; gap: 16px; }
.save .opt-row { display: grid; gap: 8px; }
.save .opt-row p { font-size: var(--fs-s); color: var(--muted); line-height: 1.7; }
.save .btn { width: 100%; }
.form { display: grid; gap: 12px; padding: 16px; border: 1.5px solid var(--rule); border-radius: 12px; }
.form label.f { display: grid; gap: 6px; font-weight: 700; font-size: var(--fs-m); }
.form input[type="email"] { min-height: 48px; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--rule); background: var(--paper); font-size: var(--fs-b); }
.form input[aria-invalid="true"] { border-color: var(--red); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-m); min-height: 44px; }
.form .check input { width: 22px; height: 22px; margin-top: 3px; flex: none; }
.err { color: var(--red); font-size: var(--fs-s); font-weight: 700; }
.ok { color: var(--primary); font-size: var(--fs-m); font-weight: 700; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--sheet); padding: 12px 18px; border-radius: 12px; font-size: var(--fs-m); font-weight: 700;
  max-width: calc(100% - 32px); z-index: 20; box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fadeIn .35s ease both; }
  .stamp-in { animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
  @keyframes fadeIn { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes stamp { from { transform: scale(1.12) rotate(-4deg); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- スマホ幅 ---------- */
@media (max-width: 520px) {
  .result { padding: 20px 16px; }
  .talk { --av: 48px; gap: 12px; }
  .talk.lg { --av: 60px; }
  .zukan div { grid-template-columns: 4em minmax(0, 1fr); }
}
@media (max-width: 460px) { .poles { grid-template-columns: minmax(0, 1fr); } }

/* =============================================
   EDITORIAL EDITION 3.0 / 医局の編集室
   Semantic tokens take precedence over legacy layout.
   ============================================= */
:root {
 --paper:#F5F2EA; --sheet:#FFFEFA; --ink:#242822; --muted:#62675D; --rule:#D6D9CD; --grid:#E8E9E1;
 --primary:#304F42; --primary-ink:#FFFFFF; --primary-soft:#E7EEE6; --red:#AD402D; --red-soft:#F5E9E2; --marker:#EBE8C7; --focus:#255EB1;
 --shadow:0 8px 32px -24px #24282255;
 --f-display:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
 --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
 --f-pen:var(--f-body); --f-mono:"IBM Plex Mono",ui-monospace,monospace;
 --fs-xs:12px; --fs-s:13px; --fs-m:14px; --fs-b:16px; --fs-l:18px; --fs-xl:24px; --fs-2xl:clamp(26px,5vw,38px); --fs-3xl:clamp(40px,6vw,70px);
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
 --r:16px; --r-s:8px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --paper:#191F1B;--sheet:#222A24;--ink:#F1F1E8;--muted:#B8C1B4;--rule:#4D5A4D;--grid:#354136;--primary:#CEDBC6;--primary-ink:#1D3027;--primary-soft:#354738;--red:#FFAC91;--red-soft:#392D28;--marker:#4A4C2F;--focus:#92BCFF;
}}
:root[data-theme="dark"]{--paper:#191F1B;--sheet:#222A24;--ink:#F1F1E8;--muted:#B8C1B4;--rule:#4D5A4D;--grid:#354136;--primary:#CEDBC6;--primary-ink:#1D3027;--primary-soft:#354738;--red:#FFAC91;--red-soft:#392D28;--marker:#4A4C2F;--focus:#92BCFF;}
[data-type="ABX"]{--tc:#B64B32}[data-type="ABS"]{--tc:#91652C}[data-type="ACX"]{--tc:#805A91}[data-type="ACS"]{--tc:#68436F}[data-type="TBX"]{--tc:#456F94}[data-type="TBS"]{--tc:#365775}[data-type="TCX"]{--tc:#4D7B65}[data-type="TCS"]{--tc:#365F4B}
[data-fam="AB"]{--fc:#B64B32}[data-fam="AC"]{--fc:#805A91}[data-fam="TB"]{--fc:#456F94}[data-fam="TC"]{--fc:#4D7B65}
body{background-image:none;letter-spacing:.035em;line-height:1.85}
.wrap{max-width:820px;padding:24px 28px 72px}.wrap:has(.hero){max-width:1120px}
h1,h2,h3,h4,.display,.section-title,.hero h1,.dx h2.h,.qcard h2,.block>h2,.family>header h3,.axis-card .q{font-weight:800;letter-spacing:.025em}
button,a,input,summary{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}
button:disabled{cursor:not-allowed} .sheet{box-shadow:none;border:1px solid var(--rule)}
.brandbar{padding:0 0 20px;margin:0;border-bottom:1px solid var(--ink);align-items:center;gap:12px}
.brand{border:0;padding:0;display:flex;align-items:center;gap:10px;min-height:48px;background:none;color:var(--ink);text-align:left;font-family:var(--f-body);font-size:17px;font-weight:900;line-height:1.02;letter-spacing:-.02em;cursor:pointer}
.brand-symbol{font-size:44px;font-weight:400;color:var(--red);line-height:1}.brand-dot{color:var(--red)}
.brandbar nav{display:flex;gap:16px;align-items:center}.nav-link,.theme-btn{background:none;border:0;color:var(--ink);font-size:12px;font-weight:700;padding:10px 0;min-height:44px;cursor:pointer}.theme-btn{border:1px solid var(--rule);border-radius:50%;width:44px;padding:0}
.page-meta{margin:10px 0 32px;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--red)}
.btn{border:1px solid var(--rule);border-radius:8px;padding:13px 22px;min-height:50px;font-size:14px;box-shadow:none;transition:background-color .15s,border-color .15s}
.btn.primary{box-shadow:none;border-color:var(--primary);background:var(--primary);color:var(--primary-ink)}
.btn:hover{transform:none;border-color:var(--ink)}.btn:active{transform:none}.btn.big{font-size:16px;min-height:58px;padding-inline:24px;gap:24px}.btn.big>span{font-size:24px}
.btn.line{background:#117A41;border-color:#117A41;color:white}.btn[aria-disabled="true"]{opacity:.7}
.linkbtn{font-size:14px;line-height:1.6;min-height:44px;padding:10px 0}.linkbtn.small{font-size:13px}
.hero{padding:12px 0 40px;gap:24px}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}.hero-copy{gap:24px}
.hero h1{font-size:var(--fs-3xl);font-weight:900;line-height:1.25;letter-spacing:-.04em}.hero h1 .red{background:none;color:var(--red);padding:0;border-bottom:3px solid var(--red)}
.hero .lede{font-size:14px;line-height:2;color:var(--ink)}.mobile-break{display:none}
.hero .facts{display:flex;gap:0;flex-wrap:wrap;border:0;padding:0;font-size:12px;color:var(--muted)}.hero .facts span{font-family:var(--f-body);padding:0 10px;border-right:1px solid var(--rule);font-weight:500}.hero .facts span:first-child{padding-left:0}.hero .facts span:last-child{border:0}
.hero-footnote{font-size:11px;color:var(--muted)}.hero-copy>.btn{align-self:start}.hero-editorial{position:relative;border:1px solid var(--rule);border-radius:120px 120px 8px 8px;padding:32px 18px 16px;background:var(--sheet)}
.issue-label{display:flex;justify-content:space-between;font:10px var(--f-mono);letter-spacing:.1em;padding:14px 18px}.hero-cast{grid-template-columns:1fr 1fr;gap:4px}.hero-cast .cast{aspect-ratio:1;position:relative;border-radius:60px 60px 6px 6px;box-shadow:none;background:color-mix(in srgb,var(--tc) 9%,var(--paper))}.hero-cast .cast:nth-child(n){transform:none}.hero-cast .cast .ph{width:100%;height:100%;border:0;background:none;border-radius:0}.cast-code{position:absolute;bottom:4px;left:8px;font:9px var(--f-mono);background:var(--sheet);color:var(--ink);padding:1px 5px;border-radius:2px}.editor-note{text-align:center;font-size:12px;line-height:1.6;margin-top:14px;color:var(--muted)}.editor-note strong{font-size:15px;color:var(--ink)}
.ph{background:color-mix(in srgb,var(--tc) 9%,var(--sheet));border:0;overflow:hidden;position:relative;aspect-ratio:1;border-radius:12px}
.ph>svg,.ph>img{width:100%;height:100%;object-fit:contain;display:block}.ph>img{position:absolute;inset:0}.ph.has-image>svg,.ph.has-image>.code{visibility:hidden}.ph>.code{display:none}
.reading-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;padding:20px 0;gap:12px;margin-bottom:64px;font-size:12px}.reading-strip b{font-family:var(--f-mono);color:var(--red);margin-right:12px}
.block{margin-top:48px;gap:16px}.block>h2,.section-title{font-size:26px;line-height:1.5}.families{gap:28px;margin-top:16px}.family{border:0;border-radius:0;background:none}.family>header{padding:14px 0;border-bottom:1px solid var(--rule);background:none;color:var(--ink)}.family>header h3{font-size:18px;color:var(--ink)}.family>header p{color:var(--muted);font-size:12px}.family-pair{gap:16px;padding:20px 0}.dexcard{border:0;background:none;padding:0;display:grid;align-content:start;gap:5px}.dexcard .ph{aspect-ratio:1.1;background:color-mix(in srgb,var(--tc) 10%,var(--sheet));border-radius:72px 72px 8px 8px}.dexcard h4{font-size:17px;line-height:1.6}.dexcard .sh{font-size:12px;color:var(--muted)}.dexcard .chara-name{font-size:12px;color:var(--muted)}.variant{margin-top:10px;color:var(--muted);font-size:11px}.family-pair .linkbtn{justify-self:start}
.axis-card{padding:24px}.axis-card .q{font-size:18px}.poles b{font-size:24px;color:var(--red)}.poles p{font-size:14px}.poles span{color:var(--muted)}
.footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);display:grid;gap:12px}.footer .note{font-size:11px;line-height:1.9}.footer .links{font-size:11px;gap:12px}.footer .linkbtn{font-size:11px}.intro{font-size:14px;line-height:1.9;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:16px;color:var(--muted)}
.progress{margin:12px 0 28px}.progress .bar{height:3px;background:var(--rule)}.progress .bar i{background:var(--primary)}.count{font-size:12px}.qcard{border:0;background:none;padding:24px 0}.qcard h2{font-size:clamp(23px,5vw,30px);line-height:1.7;margin-bottom:28px}.qno{font-size:12px;color:var(--red);margin-bottom:18px}.options{gap:12px}.opt span{min-height:66px;border:1px solid var(--rule);background:var(--sheet);border-radius:9px;padding:18px 18px 18px 48px;font-size:16px;line-height:1.6;position:relative}.opt span::before{content:'';position:absolute;left:18px;top:calc(50% - 8px);width:16px;height:16px;border-radius:50%;border:1px solid var(--muted)}.opt input:checked+span{border-color:var(--primary);background:var(--primary-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--primary)}.opt input:checked+span::before{border:5px solid var(--primary);background:var(--sheet)}.qnav{margin-top:28px;display:grid;grid-template-columns:1fr 2fr;gap:12px}.qnav .btn{width:100%}.chip span{min-height:44px;font-size:13px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet)}.chip input:checked+span{background:var(--primary-soft);color:var(--ink);border-color:var(--primary)}
.result{background:var(--sheet);border:1px solid var(--rule);border-radius:16px;padding:32px;display:grid;gap:28px;box-shadow:none}.r-hero{grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:24px}.r-art{width:100%;max-width:none}.r-art .ph{width:100%;border-radius:90px 90px 8px 8px;background:color-mix(in srgb,var(--tc) 12%,var(--paper))}.r-title{gap:12px}.r-meta{font-size:11px;line-height:1.9;color:var(--muted)}.r-fam{color:var(--muted)}.result h1{font-size:clamp(26px,5vw,34px);font-weight:900;line-height:1.45}.r-nick{font-size:15px;font-weight:700;color:var(--red)}.r-quote{border:0;border-left:2px solid var(--rule);border-radius:0;background:none;padding:0 0 0 12px;margin-top:12px;font-size:13px}.r-quote::before{display:none}.r-lead{font-size:15px;line-height:2}
.result-share{background:var(--paper);border-radius:8px;padding:20px;display:grid;gap:8px}.share-quote{font-size:clamp(20px,4.5vw,26px);font-weight:800;line-height:1.7}.result-share .linkbtn{justify-self:start;padding:0}.result-toc{display:flex;flex-wrap:wrap;gap:20px;font-size:12px}.result-toc a{color:var(--muted);padding-block:6px}.r-sec{padding-top:28px;gap:20px;scroll-margin-top:24px}.r-sec h2{font-size:20px;font-weight:800}.r-sec .note{font-size:12px}.praise{font-size:15px;font-weight:500;line-height:2}.roasts{border-left:2px solid var(--red);gap:22px;padding:4px 0 4px 18px}.roasts li{font-size:17px;font-weight:700;line-height:1.9;color:var(--red)}.follow{font-size:15px;font-weight:500;line-height:2;background:var(--primary-soft);padding:18px;border-radius:8px}.follow mark{background:none}.talk{--av:56px;gap:12px}.talk-av{border-radius:50%;background:var(--paper)}.talk-av .ph{width:100%;height:100%;border-radius:0}.bubble{border:1px solid var(--rule);border-radius:8px;padding:12px;font-size:13px}.bubble::before{border-width:1px;width:10px;height:10px;left:-6px;margin-top:-5px}.talk.chara .bubble{border-color:var(--rule);font-weight:500}.talk.chara .bubble::before{border-color:var(--rule)}.talk.chara .talk-name{color:var(--muted);font-size:11px}.talk-name{font-size:11px;color:var(--muted)}
.plan div{grid-template-columns:8em minmax(0,1fr);padding:14px 0}.plan dt{font-size:12px;letter-spacing:.03em}.plan dd{font-size:14px;line-height:1.9}.advice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.advice-card{padding:20px;border:1px solid var(--rule);border-radius:8px;display:grid;align-content:start;gap:12px}.advice-card p:last-child{font-size:14px;line-height:1.9}.advice-card .eyebrow{color:var(--muted);font-size:11px}.next{padding:22px;background:var(--primary-soft);border-radius:8px;gap:8px}.next .k,.mate .k{color:var(--muted);font-size:11px}.next p:last-child{font-size:16px;font-weight:700;line-height:1.9}.pair{gap:20px;grid-template-columns:1fr}.mate{align-items:start;grid-template-columns:64px minmax(0,1fr);gap:16px}.mate-art{width:64px;height:64px;background:var(--paper);border-radius:50%}.mate-art .ph{width:100%;height:100%;border-radius:0}.mate-name{font-size:15px}.mate-why{font-size:13px;line-height:1.9;color:var(--muted)}
.dex-details summary,.relations summary{min-height:44px;cursor:pointer;padding:8px 0;font-size:14px}.dex-details .item,.zukan dt,.dx .code-line,.dx .chara-line{color:var(--muted)}.zukan dd{font-size:13px}.r-final .final-msg{font-size:17px;line-height:2}.r-stamp{font-size:10px}
.share-preview{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:20px;border:1px solid var(--rule);padding:20px;border-radius:12px;background:var(--sheet)}.share-preview h3{font-size:18px}.share-preview p:last-child{font-size:13px;margin-top:6px}.share-preview .ph{width:100%}
.badge{border:1px solid var(--rule);font-size:10px;font-weight:500;padding:3px 8px}.badge.fam{background:var(--primary-soft);border-color:var(--rule);color:var(--ink)}.dx{padding:28px;grid-template-columns:180px minmax(0,1fr)}.dx h2.h{font-weight:800}.dex-body{padding:28px}.relations dl>div{border-bottom:1px solid var(--rule);padding:12px 0}.relations dt{font-size:12px;font-weight:700}.relations dd{font-size:13px;color:var(--muted);line-height:1.9}.cta{border-width:1px;border-radius:8px}.cta b{font-size:16px}.save{padding:24px;gap:24px}.form{padding:16px}.note{line-height:1.9}.resume{padding:20px;background:var(--sheet)}
/* Only the first reveal after answering animates. No recurring spectacle. */
.fade-in,.stamp-in,.ai-in,.ai-note.loading::before{animation:none!important}.ai-note.loading::before{display:none}#ai-sec[aria-busy="true"] [data-ai]{opacity:1;transition:none}
@media(prefers-reduced-motion:no-preference){.result-reveal .r-hero{animation:editorialReveal .65s cubic-bezier(.2,.7,.2,1) both}@keyframes editorialReveal{from{transform:translateY(14px)}to{transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){.wrap{padding:18px 20px 56px}.brandbar{padding-bottom:14px}.brandbar nav{gap:12px}.hero-grid{grid-template-columns:1fr;gap:28px}.hero h1{font-size:50px;line-height:1.3}.hero{padding-top:4px}.hero-copy{gap:22px}.hero .lede{font-size:14px}.hero-copy>.btn{width:100%;justify-content:space-between}.hero-editorial{border-radius:80px 80px 8px 8px;padding:12px 12px 16px}.hero-cast{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.hero-cast .cast{border-radius:40px 40px 4px 4px;aspect-ratio:.7}.hero-cast .cast .ph>img{object-fit:cover;object-position:50% 0}.issue-label{padding:12px 18px}.editor-note{margin-top:12px}.editor-note br{display:none}.editor-note strong{font-size:13px;margin-left:8px}.reading-strip{font-size:11px;gap:8px;margin-bottom:40px}.reading-strip b{margin-right:4px}.families{grid-template-columns:1fr}.block{margin-top:40px}.block>h2,.section-title{font-size:24px}.r-hero{grid-template-columns:170px minmax(0,1fr);gap:20px}.result{padding:24px}.result h1{font-size:26px}.r-quote{font-size:12px}.advice-grid{grid-template-columns:1fr}}
@media(max-width:480px){.wrap{padding-inline:18px}.page-meta{margin-bottom:22px}.brand{font-size:15px;gap:7px}.brand-symbol{font-size:34px}.brandbar nav{gap:10px}.nav-link{font-size:11px}.theme-btn{font-size:10px;width:40px;border-radius:8px}.hero h1{font-size:clamp(41px,11.5vw,52px)}.hero .eyebrow{font-size:10px}.hero .facts span{font-size:11px;padding-inline:8px}.hero-footnote{font-size:10px}.hero-editorial{padding-top:10px}.hero-cast .cast{aspect-ratio:.63}.cast-code{font-size:8px;left:3px;padding:1px 2px}.family-pair{gap:14px}.dexcard h4{font-size:15px}.dexcard .ph{border-radius:60px 60px 8px 8px}.dexcard .sh{font-size:12px}.dexcard .variant{font-size:10px}.qcard h2{font-size:23px}.opt span{font-size:15px;padding-block:16px}.qnav .btn{padding-inline:12px}.r-hero{grid-template-columns:1fr;gap:20px}.r-art{width:70%;max-width:260px;margin:auto}.r-title{display:grid;gap:8px}.result h1{font-size:28px}.r-quote{font-size:14px;margin-top:4px}.r-nick{font-size:15px}.result{padding:20px 18px;gap:24px}.result-share{padding:16px}.r-sec h2{font-size:19px}.roasts li{font-size:16px}.plan div{grid-template-columns:1fr;gap:5px}.advice-card{padding:16px}.axis .lbl{font-size:12px}.axis .lbl small{font-size:11px}.r-lead{font-size:14px}.dx{grid-template-columns:1fr;padding:22px}.dx .ph{width:75%;margin:auto}.dex-body{padding:22px}.talk{--av:44px;gap:10px}.share-preview{grid-template-columns:80px minmax(0,1fr);padding:16px;gap:12px}.share-preview h3{font-size:16px}.save{padding:18px}.poles{grid-template-columns:1fr 1fr;gap:12px}.poles p{font-size:12px}.poles span{font-size:11px}.axis-card{padding:18px}.reading-strip p{font-size:10px}.reading-strip b{font-size:10px}.badge{font-size:10px}.form{padding:12px}.ctas.equal{grid-template-columns:1fr}.toast{font-size:13px}}
@media(max-width:350px){.wrap{padding-inline:14px}.brandbar nav{gap:8px}.nav-link{font-size:10px}.hero h1{font-size:41px}.hero .lede{font-size:13px}.hero .facts span{font-size:10px;padding-inline:6px}.hero-cast{gap:3px}.result{padding:18px 14px}.r-art{width:80%}.result h1{font-size:25px}.result-toc{gap:16px}.btn.big{font-size:14px}.roasts li{font-size:15px}.reading-strip{gap:3px}.reading-strip b{display:block;margin-bottom:3px}.share-preview{grid-template-columns:64px minmax(0,1fr)}}
[hidden]{display:none!important}

.theme-toggle{min-width:44px;min-height:44px}.mate-art .ph{width:100%;height:100%}

.theme-btn{min-width:44px;min-height:44px}

/* Readable type labels in both palettes; color is decoration, never the sole label. */
.r-fam,.dx .code-line,.dx .chara-line{color:var(--ink)}
.badge.fam{background:var(--primary-soft);border-color:var(--rule);color:var(--ink)}
.opt span,.chip span{border-color:var(--muted)}

.ph img{background:transparent}.mate .k{color:var(--ink)}
.r-meta .num,.r-quote .talk-name{color:var(--ink)}

/* Edition 4 — a clear entrance, distinctive portraits, one-action questions. */
body{word-break:normal;overflow-wrap:break-word;letter-spacing:.025em}
.wrap:has(.dt-hero){max-width:1280px;padding:28px 44px 60px}
.brandbar{align-items:center;border-bottom:1px solid var(--rule);padding:0 0 20px;margin-bottom:0}.brand{line-height:1.05}.brand-symbol{color:var(--primary)}
.page-meta{font-size:11px;margin:18px 0 0;letter-spacing:.06em}
.wrap:has(.dt-hero) .page-meta{display:none}.dt-only-mobile{display:none}
.dt-eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.6;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:9px}
.dt-eyebrow>span{width:7px;height:7px;border-radius:50%;background:#b56847;flex:none}
.dt-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:60px 0 58px}
.dt-hero-copy{position:relative;z-index:2}.dt-hero h1{font-size:clamp(46px,5.3vw,70px);font-weight:800;letter-spacing:-.055em;line-height:1.26;margin:22px 0 25px;text-wrap:initial;font-feature-settings:'palt'}
.dt-hero h1 em{font-style:normal;color:var(--primary);position:relative;white-space:nowrap}.dt-hero h1 em:after{content:'';position:absolute;left:0;bottom:3px;width:100%;height:7px;background:#d7a56e59;z-index:-1;transform:rotate(-1deg)}
.dt-lead{font-size:15px;line-height:2;max-width:460px;color:var(--muted)}.dt-start{margin-top:30px;max-width:370px}
.btn.dt-start-button{width:100%;min-height:62px;display:flex;justify-content:space-between;border-radius:8px;padding:18px 25px;font-size:16px;font-weight:700;box-shadow:none;gap:24px}
.dt-start-button>span{font-size:25px;line-height:1}.dt-start>p{font-size:11px;line-height:1.6;margin-top:12px;text-align:center;color:var(--muted)}.dt-start>p>span{margin:0 7px;color:var(--rule)}
.dt-resume{font-size:12px;color:var(--muted);margin-top:10px}.dt-resume .linkbtn{font-size:12px;display:inline;min-height:44px}
.dt-art-stage{height:560px;position:relative;isolation:isolate;overflow:hidden;border-radius:240px 240px 14px 14px;background:color-mix(in srgb,var(--primary) 8%,var(--paper));border:1px solid var(--rule)}
.dt-eight{position:absolute;font-family:Georgia,serif;font-size:500px;line-height:1;color:color-mix(in srgb,var(--primary) 10%,transparent);left:50%;transform:translateX(-50%);top:-20px;font-weight:400;z-index:-1}
.dt-orbit{position:absolute;inset:34px;border:1px solid color-mix(in srgb,var(--primary) 15%,transparent);border-radius:240px 240px 20px 20px}
.dt-stage-label{position:absolute;left:0;right:0;top:43px;text-align:center;font:10px/1.65 var(--f-mono);letter-spacing:.12em;color:var(--muted)}
.dt-person{position:absolute;bottom:65px}.dt-person .ph,.dt-person .ph.hero{width:100%;height:100%;aspect-ratio:1;border:none;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.dt-person .ph>img{object-fit:contain;object-position:50% 100%;position:absolute;inset:0;width:100%;height:100%}.dt-person .ph .code{display:none}.dt-person .ph svg{display:none}
.dt-person-left{left:-4%;width:68%;height:68%;bottom:110px;z-index:1;transform:rotate(-5deg)}.dt-person-right{right:-6%;width:68%;height:68%;bottom:104px;z-index:1;transform:rotate(4deg)}.dt-person-front{left:17%;width:74%;height:74%;bottom:42px;z-index:2}
.dt-stage-caption{position:absolute;bottom:0;left:0;right:0;z-index:3;background:var(--sheet);padding:17px 18px 20px;text-align:center;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;display:grid;gap:2px}.dt-stage-caption strong{font-weight:700;font-size:16px}
.dt-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0;gap:28px}.dt-benefits>div{display:grid;grid-template-columns:28px 1fr;gap:4px 12px}.dt-benefits>div+div{border-left:1px solid var(--rule);padding-left:28px}.dt-benefits span{font:12px var(--f-mono);color:var(--red);padding-top:3px}.dt-benefits h2{font-size:15px;font-weight:700;line-height:1.6}.dt-benefits p{grid-column:2;font-size:12px;color:var(--muted);line-height:1.8}
.dt-roster{padding:90px 0 80px}.dt-section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}.dt-section-head h2,.dt-method h2{font-size:32px;line-height:1.5;font-weight:750;letter-spacing:-.035em;margin-top:12px}.dt-section-head>p{font-size:13px;color:var(--muted);line-height:1.9}
.dt-roster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.dt-type-card{display:block;text-align:left;border:0;background:transparent;padding:0;cursor:pointer;border-radius:14px;color:var(--ink);min-width:0}.dt-type-art{position:relative;background:color-mix(in srgb,var(--card-accent) 9%,var(--paper));border:1px solid var(--rule);border-radius:14px;overflow:hidden;aspect-ratio:1;transition:background .2s}.dt-type-art .ph{width:100%;height:100%;border:0;border-radius:0;background:none;box-shadow:none}.dt-type-art .ph .code{display:none}.dt-type-art .ph>img{object-fit:contain;padding-top:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.dt-type-num{position:absolute;z-index:2;left:14px;top:12px;font:11px var(--f-mono);color:var(--muted)}.dt-type-card:hover .ph>img{transform:translateY(-4px) scale(1.035)}.dt-type-card:hover .dt-type-art{background:color-mix(in srgb,var(--card-accent) 15%,var(--paper))}
.dt-type-text{padding:17px 1px 16px}.dt-type-text>p{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;line-height:1.7;margin-bottom:7px}.dt-type-text h3{font-size:17px;font-weight:700;line-height:1.5;min-height:52px}.dt-type-text>div{font-size:12px;color:var(--muted);line-height:1.8;margin-top:4px}
.dt-method{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;padding:48px;background:var(--sheet);border:1px solid var(--rule);border-radius:18px}.dt-method>div>p:not(.dt-eyebrow){font-size:14px;line-height:1.9;color:var(--muted);margin:20px 0 12px}.dt-axis-list{display:grid}.dt-axis-list>div{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:25px 1fr;gap:8px 14px}.dt-axis-list>div:last-child{border-bottom:0}.dt-axis-list>div>span{font:11px var(--f-mono);color:var(--red);padding-top:4px}.dt-axis-list h3{font-size:15px;font-weight:700;line-height:1.6}.dt-axis-list p{grid-column:2;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}.dt-axis-list i{font-style:normal;font-size:18px;color:var(--primary)}
.dt-final-cta{text-align:center;margin:90px auto 70px;max-width:580px}.dt-final-cta>.dt-eyebrow{justify-content:center}.dt-final-cta h2{font-size:32px;font-weight:700;line-height:1.65;letter-spacing:-.03em;margin:18px 0 28px}.dt-final-cta .dt-start-button{max-width:360px;margin:auto}.dt-final-cta>p:last-child{font-size:12px;color:var(--muted);margin-top:14px}
/* Compact, readable one-click questionnaire. */
.wrap:has(.dt-question){max-width:1000px;padding-inline:36px}.wrap:has(.dt-question) .brandbar nav{display:none}.wrap:has(.dt-question) .brandbar:after{content:'24 QUESTIONS / YOUR WORK STYLE';font:10px var(--f-mono);color:var(--muted);letter-spacing:.08em}.wrap:has(.dt-question) .page-meta{display:none}
.dt-question{max-width:660px;margin:44px auto 0}.dt-question-progress{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.dt-question-progress b{font-size:22px;color:var(--ink);font-weight:700;margin-left:6px}.dt-question-progress i{font-style:normal;margin-left:6px;font-size:13px}.dt-progress-track{height:4px;border-radius:10px;background:var(--rule);overflow:hidden;margin-top:14px}.dt-progress-track i{height:100%;display:block;background:var(--primary);border-radius:10px}
.dt-question-heading{margin:34px 0 15px}.dt-question-heading p{font-size:12px;color:var(--muted);margin-bottom:12px}.dt-question h1{font-size:30px;line-height:1.65;font-weight:750;letter-spacing:-.025em;text-wrap:initial}.dt-answer-hint{font-size:12px;color:var(--muted);margin-bottom:20px}.dt-answer-list{display:grid;gap:12px}
.dt-answer{display:grid;grid-template-columns:30px 1fr 20px;align-items:center;gap:16px;width:100%;text-align:left;background:var(--sheet);border:1px solid var(--rule);padding:18px 20px;min-height:76px;border-radius:10px;font-size:15px;line-height:1.75;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;color:var(--ink)}
.dt-answer-key{width:28px;height:28px;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;font:11px var(--f-mono);color:var(--muted);background:var(--paper)}.dt-answer-arrow{font-size:20px;color:var(--muted);opacity:.55}.dt-answer:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft);transform:translateX(3px)}.dt-answer.is-previous{border-color:var(--primary)}.dt-answer.is-selected{background:var(--primary-soft);border:2px solid var(--primary);padding:17px 19px}.dt-answer.is-selected .dt-answer-key{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.dt-answer:disabled{cursor:default;opacity:1}.dt-answer:disabled:not(.is-selected){opacity:1}
.dt-question-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}.dt-question-bottom .linkbtn{font-size:12px;text-decoration:none}.dt-question-bottom>span,.dt-question-note{font-size:11px;color:var(--muted)}.dt-question-note{margin-top:16px;line-height:1.9}.dt-question-note br{display:none}
.result-toc{flex-wrap:wrap}.r-meta{flex-wrap:wrap}.r-title h1{line-height:1.55}.roasts li{font-size:16px;line-height:1.9;font-weight:500}.r-lead{line-height:2}.r-art .ph{border-width:1px}.result{box-shadow:none}.plan dd{font-size:14px;line-height:1.95}.zukan{line-height:1.9}
@media(prefers-reduced-motion:no-preference){.dt-hero-copy{animation:dt-enter .65s ease both}.dt-art-stage{animation:dt-enter .85s ease both}.dt-question-heading,.dt-answer-list{animation:dt-question-enter .22s ease both}@keyframes dt-question-enter{from{transform:translateY(6px)}to{transform:translateY(0)}}@keyframes dt-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:1020px){.wrap:has(.dt-hero){padding-inline:30px}.dt-hero{gap:18px}.dt-hero h1{font-size:53px}.dt-art-stage{height:500px}.dt-person-left,.dt-person-right{bottom:100px}.dt-person-front{width:82%;left:9%;bottom:25px}.dt-benefits{gap:18px}.dt-benefits>div+div{padding-left:18px}.dt-roster-grid{gap:18px}.dt-type-text h3{font-size:15px}.dt-method{padding:30px;gap:30px}}
@media(max-width:760px){.wrap:has(.dt-hero){padding:20px 22px 44px}.dt-hero{grid-template-columns:1fr;padding:34px 0 30px;gap:32px}.dt-hero h1{font-size:clamp(44px,8vw,60px);margin:18px 0 20px}.dt-hero h1 br:last-child{display:none}.dt-lead{font-size:14px;line-height:1.9}.dt-start{max-width:none;margin-top:23px}.dt-art-stage{height:440px;max-width:550px;width:100%;margin:auto;border-radius:210px 210px 12px 12px}.dt-person-left,.dt-person-right{height:82%;bottom:73px;width:65%}.dt-person-front{height:94%;width:76%;left:13%;bottom:22px}.dt-stage-label{top:25px;font-size:9px}.dt-eight{font-size:400px}.dt-benefits{gap:12px;padding:22px 0}.dt-benefits>div{grid-template-columns:1fr;gap:5px}.dt-benefits>div+div{padding-left:12px}.dt-benefits p{grid-column:1;font-size:11px}.dt-benefits h2{font-size:13px}.dt-benefits span{font-size:10px}.dt-roster{padding:54px 0 42px}.dt-section-head{display:block}.dt-section-head h2{font-size:27px}.dt-section-head>p{margin-top:14px;font-size:12px}.dt-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}.dt-type-text h3{font-size:16px;min-height:48px}.dt-type-text>div{font-size:12px}.dt-method{grid-template-columns:1fr;padding:28px 24px;gap:12px}.dt-method h2{font-size:27px}.dt-final-cta{margin:55px auto}.dt-final-cta h2{font-size:27px}.dt-axis-list p{font-size:12px}.wrap:has(.dt-question){padding-inline:24px}.dt-question{margin-top:32px}.dt-question h1{font-size:26px}}
@media(max-width:480px){.wrap:has(.dt-hero){padding-inline:20px}.brandbar nav{gap:12px}.brandbar .nav-link{font-size:11px}.brandbar .brand{font-size:14px}.brand-symbol{font-size:31px}.dt-hero{gap:28px;padding-top:26px}.dt-eyebrow{font-size:10px}.dt-hero h1{font-size:43px;line-height:1.32;letter-spacing:-.055em}.dt-hero h1 br:last-child{display:block}.dt-lead{font-size:13px}.btn.dt-start-button{min-height:58px;font-size:15px}.dt-start>p{font-size:10px}.dt-art-stage{height:330px;border-radius:165px 165px 12px 12px}.dt-stage-label{top:18px;font-size:8px;line-height:1.45}.dt-eight{font-size:340px;top:-34px}.dt-person-left,.dt-person-right{height:85%;bottom:63px;width:65%}.dt-person-front{height:96%;bottom:16px;width:80%;left:10%}.dt-stage-caption{padding:11px 12px;font-size:10px;gap:0}.dt-stage-caption strong{font-size:12px}.dt-orbit{inset:22px}.dt-benefits{grid-template-columns:1fr;padding:5px 0;gap:0}.dt-benefits>div{grid-template-columns:28px 1fr;gap:2px 10px;padding:16px 0}.dt-benefits>div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}.dt-benefits h2{font-size:13px}.dt-benefits p{grid-column:2}.dt-benefits span{padding-top:5px}.dt-only-mobile{display:block}.dt-section-head h2{font-size:25px;line-height:1.6}.dt-type-text{padding-top:12px}.dt-type-text>p{font-size:10px}.dt-type-text h3{font-size:14px;min-height:45px}.dt-type-text>div{font-size:11px}.dt-type-num{left:10px;top:10px;font-size:10px}.dt-roster-grid{gap:12px 13px}.dt-type-art{border-radius:10px}.dt-axis-list p{gap:7px;font-size:11px;flex-wrap:wrap}.dt-method{padding:24px 19px}.dt-method h2{font-size:24px}.dt-final-cta h2{font-size:24px}.dt-final-cta>p:last-child{font-size:11px}.wrap:has(.dt-question){padding:18px 20px 35px}.wrap:has(.dt-question) .brandbar:after{font-size:8px;letter-spacing:.02em;max-width:120px;text-align:right;line-height:1.6}.dt-question{margin-top:25px}.dt-question-heading{margin-top:24px}.dt-question h1{font-size:23px;line-height:1.6}.dt-question-heading p,.dt-answer-hint{font-size:11px}.dt-answer{grid-template-columns:25px 1fr 16px;gap:11px;min-height:75px;padding:15px 13px;font-size:14px;border-radius:8px;line-height:1.75}.dt-answer.is-selected{padding:14px 12px}.dt-answer-key{width:25px;height:25px;font-size:10px}.dt-answer-list{gap:10px}.dt-question-bottom>span{font-size:10px}.dt-question-bottom .linkbtn{font-size:11px}.dt-question-note{font-size:10px}.dt-question-note br{display:block}.dt-question-progress b{font-size:20px}}
@media(max-width:350px){.wrap:has(.dt-hero),.wrap:has(.dt-question){padding-inline:16px}.dt-hero h1{font-size:38px}.dt-hero .dt-lead{font-size:12px}.dt-art-stage{height:300px}.brandbar nav{gap:7px}.brandbar .nav-link{font-size:10px}.dt-type-text h3{font-size:13px}.dt-question h1{font-size:21px}.dt-answer{font-size:13px}.dt-question-bottom>span{font-size:9px}.dt-axis-list p{font-size:10px}}

.dt-question h1{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}

/* Keep answer boundaries visible without dimming readable text during transitions. */
.dt-answer{border-color:var(--muted)}
/* DOCTOR PORTRAITS — edition 5. Each person has an independent visual voice. */
:root{--paper:#F7F7F2;--sheet:#FFF;--ink:#222B29;--muted:#64706B;--rule:#D9DEDA;--primary:#264E43;--primary-ink:#fff;--primary-soft:#E5EEE7;--red:#497C70;--marker:#D7E7AC;--focus:#315FCE;--f-mono:ui-monospace,"Cascadia Code",monospace}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#19211F;--sheet:#222D28;--ink:#EFF3EB;--muted:#B3C0B8;--rule:#46584E;--primary:#D7E7AC;--primary-ink:#223429;--primary-soft:#34473D;--red:#A7CCB9;--marker:#466144;--focus:#A5BBFF}}
:root[data-theme="dark"]{--paper:#19211F;--sheet:#222D28;--ink:#EFF3EB;--muted:#B3C0B8;--rule:#46584E;--primary:#D7E7AC;--primary-ink:#223429;--primary-soft:#34473D;--red:#A7CCB9;--marker:#466144;--focus:#A5BBFF}
html{scroll-behavior:smooth;scroll-padding-top:24px}body{letter-spacing:.015em;line-height:1.9}button,a{touch-action:manipulation}button{font-family:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}h1:focus,h2:focus{outline:none}::selection{background:#D7E7AC;color:#223429}
.wrap{max-width:960px;padding:26px 36px 48px}.wrap:has(.portrait-hero),.wrap:has(.directory-intro){max-width:1360px;padding:26px 56px 48px}.brandbar{padding-bottom:24px;border-bottom:1px solid var(--rule)}.brandbar .brand{font-size:18px;letter-spacing:-.035em;gap:12px;font-weight:850}.brand small{display:block;font-size:9px;letter-spacing:.18em;font-weight:500;margin-top:9px}.brand-symbol{display:grid;place-content:center;position:relative;width:41px;height:48px;font:58px/.8 Georgia,serif;letter-spacing:-.15em;padding-right:6px;color:var(--ink)}.brand-symbol>span{position:absolute;width:11px;height:11px;background:var(--marker);border-radius:50%;right:0;bottom:0}.brandbar nav{gap:30px}.brandbar .nav-link{font-size:12px;font-weight:600}.theme-btn{width:36px;min-height:36px;font-size:20px;border:0;background:var(--primary-soft)}.page-meta{font-size:10px;margin:16px 0 30px}.page-meta:empty{display:none}.edition-label{font:10px/1.6 var(--f-mono);letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:10px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}.btn{border-radius:6px}.editorial-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:66px;padding:18px 24px;font-size:15px;font-weight:650;border-radius:5px;box-shadow:none;transition:background .2s,transform .2s}.editorial-cta span{font-size:25px;font-weight:400}.editorial-cta:hover{transform:translateY(-3px);box-shadow:0 8px 16px -10px #22342977}.linkbtn{min-height:40px}.footer{border-top:1px solid var(--rule);padding:30px 0 0;margin-top:36px}.footer .note{font-size:11px;line-height:1.9}.footer .links{font-size:10px;gap:12px 24px}.footer .links .linkbtn{font-size:10px}.footer:after{content:'DOCTOR TYPE 8.  /  DIFFERENT STYLES, EQUALLY YOURS.';display:block;font:9px var(--f-mono);letter-spacing:.07em;color:var(--muted);margin-top:36px}
/* The cover */
.portrait-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5.4%;padding:54px 0 46px}.hero-editorial{padding-bottom:10px;min-width:0}.hero-editorial>.edition-label{font-family:var(--f-body);font-size:10px;letter-spacing:.08em}.hero-editorial>.edition-label>span:last-child{font:9px var(--f-mono);margin-left:10px;color:var(--muted)}.portrait-hero h1{font-size:clamp(38px,4.15vw,60px);line-height:1.55;font-weight:800;letter-spacing:-.065em;margin:30px 0 22px;word-break:keep-all;overflow-wrap:normal;text-wrap:initial}.hero-emphasis{position:relative;white-space:nowrap}.hero-emphasis:after{content:'';position:absolute;left:5%;right:3%;height:13%;bottom:3%;z-index:-1;background:var(--marker);transform:rotate(-2deg)}.hero-period{letter-spacing:-.15em}.hero-intro{font-size:14px;line-height:2.2;color:var(--muted)}.hero-action{max-width:350px;margin-top:30px}.hero-action>p{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:11px}.hero-explore{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;text-decoration:none;margin-top:32px;width:max-content}.hero-explore small{display:block;font:8px/1.7 var(--f-mono);color:var(--muted);letter-spacing:.05em;margin-top:3px}.explore-symbol{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;font-size:16px}.hero-resume{font-size:10px;margin-top:12px;color:var(--muted)}.hero-resume .linkbtn{font-size:10px}
.feature-gallery{min-width:0}.feature-poster{position:relative;height:560px;background:var(--tone);overflow:hidden;border-radius:160px 160px 8px 8px;color:#223429;isolation:isolate}.poster-top{position:absolute;top:39px;left:40px;right:40px;display:flex;justify-content:space-between;font:8px var(--f-mono);letter-spacing:.08em;z-index:3}.poster-word{position:absolute;left:7%;right:7%;top:65px;font-size:clamp(45px,5.8vw,84px);font-weight:850;letter-spacing:-.09em;line-height:1.3;color:var(--accent);opacity:.55;text-align:center;white-space:nowrap}.poster-portrait{position:absolute;width:112%;height:87%;left:-6%;bottom:35px;z-index:2}.poster-portrait .ph,.poster-portrait .ph.hero{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:none;aspect-ratio:auto}.poster-portrait .ph>img{object-fit:contain;object-position:center bottom}.poster-portrait .ph>.code{display:none}.poster-sticker{position:absolute;top:160px;right:18px;z-index:3;background:#F1F3D9;border-radius:50%;width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:9px/1.2 var(--f-mono);transform:rotate(12deg);color:#264638;box-shadow:0 2px 0 #22342912}.poster-sticker b{font-size:21px;font-weight:700}.poster-bottom{position:absolute;bottom:0;left:0;right:0;padding:20px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#F6F8EDF2;z-index:3;backdrop-filter:blur(12px);border-top:1px solid #fff8}.poster-bottom p{font:8px var(--f-mono);letter-spacing:.08em;color:#5C7569}.poster-bottom h2{font-size:20px;line-height:1.6;font-weight:650;letter-spacing:.08em;margin:3px 0}.poster-bottom span{font-size:11px;color:#53635A}.poster-open{width:44px;height:44px;border:1px solid #9FB4A7;border-radius:50%;background:none;font-size:25px;color:#264638;cursor:pointer;flex-shrink:0;transition:background .2s}.poster-open:hover{background:#D7E7AC}.feature-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.feature-controls>p{font-size:10px;color:var(--muted)}.feature-dots{display:flex;gap:7px}.feature-dots button{padding:0;width:30px;height:30px;border:1px solid transparent;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink)}.feature-dots button span{width:21px;height:21px;display:grid;place-items:center;background:var(--dot);border-radius:50%;font:9px var(--f-mono);color:#223429}.feature-dots button[aria-pressed="true"]{border-color:var(--ink)}
.editorial-divider{display:flex;justify-content:space-between;align-items:center;border-block:1px solid var(--rule);padding:17px 0;font:10px/1 var(--f-mono);letter-spacing:.08em;color:var(--muted)}.divider-star{font-size:25px;color:var(--ink)}
/* Eight distinct geometric signatures */
.persona-motif{position:absolute;width:72%;aspect-ratio:1;left:14%;top:16%;opacity:.3;color:var(--accent);pointer-events:none}.persona-motif i{position:absolute;display:block}.motif-link i{width:61%;height:61%;border:1px solid currentColor;border-radius:50%;top:20%}.motif-link i:nth-child(2){left:36%}.motif-link i:nth-child(3){top:3%;left:18%}.motif-link i:nth-child(4){top:38%;left:18%}.motif-grid{background:repeating-linear-gradient(0deg,transparent 0 24%,currentColor 24% calc(24% + 1px),transparent calc(24% + 1px) 25%),repeating-linear-gradient(90deg,transparent 0 24%,currentColor 24% calc(24% + 1px),transparent calc(24% + 1px) 25%);transform:rotate(-9deg);opacity:.22}.motif-rings i{inset:0;border:1px solid currentColor;border-radius:50%}.motif-rings i:nth-child(2){inset:12%}.motif-rings i:nth-child(3){inset:24%}.motif-rings i:nth-child(4){inset:36%}.motif-orbit i{inset:15% 0;border:1px solid currentColor;border-radius:50%;transform:rotate(-35deg)}.motif-orbit i:nth-child(2){transform:rotate(35deg)}.motif-orbit i:nth-child(3){transform:rotate(90deg)}.motif-orbit i:nth-child(4){transform:rotate(0)}.motif-spark{background:currentColor;clip-path:polygon(50% 0,58% 33%,85% 15%,68% 43%,100% 50%,68% 58%,85% 85%,57% 68%,50% 100%,42% 68%,15% 85%,32% 58%,0 50%,33% 42%,15% 15%,42% 32%);opacity:.18;transform:rotate(12deg)}.motif-steps i{width:25%;height:75%;border:1px solid currentColor;top:25%}.motif-steps i:nth-child(2){left:25%;top:10%}.motif-steps i:nth-child(3){left:50%;top:-5%}.motif-steps i:nth-child(4){left:75%;top:-20%}.motif-path{border:1px dashed currentColor;border-radius:50% 20% 70% 30%;transform:rotate(-20deg)}.motif-path i{inset:18%;border:1px dashed currentColor;border-radius:40% 60% 20% 70%}.motif-path i:nth-child(2){inset:36%}.motif-path i:nth-child(3){inset:5%;transform:rotate(65deg)}.motif-path i:nth-child(4){display:none}.motif-petal i{width:57%;height:57%;border:1px solid currentColor;border-radius:50% 50% 0 50%;top:0;left:0}.motif-petal i:nth-child(2){transform:rotate(90deg);left:43%}.motif-petal i:nth-child(3){transform:rotate(180deg);left:43%;top:43%}.motif-petal i:nth-child(4){transform:rotate(270deg);top:43%}
/* The portrait collection */
.portrait-roster{padding:88px 0 80px;scroll-margin-top:30px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:40px}.section-heading h2{font-size:42px;line-height:1.5;letter-spacing:-.05em;font-weight:700;margin-top:20px}.section-heading>p{font-size:13px;color:var(--muted);line-height:2.1;margin-bottom:6px}.portrait-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 22px}.portrait-card{border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;padding:0;min-width:0;display:block}.portrait-image{position:relative;isolation:isolate;aspect-ratio:3/3.6;overflow:hidden;border-radius:7px;background:var(--tone);color:#223429}.portrait-no{position:absolute;top:14px;left:14px;right:10px;font:7px/1.5 var(--f-mono);letter-spacing:.03em;z-index:2}.portrait-verb{position:absolute;left:14px;top:38px;font-size:34px;font-weight:800;letter-spacing:-.065em;color:var(--accent);opacity:.8}.portrait-image .ph{position:absolute;inset:12% -11% 0;width:122%;height:88%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:none;z-index:1;transition:transform .5s cubic-bezier(.2,.75,.2,1)}.portrait-image .ph>img{object-fit:contain;object-position:bottom center}.portrait-image .code{display:none}.portrait-arrow{position:absolute;bottom:12px;right:12px;width:33px;height:33px;border-radius:50%;background:#F7F7F2E8;display:grid;place-items:center;font-size:20px;z-index:2;transition:transform .3s}.portrait-card:hover .ph{transform:scale(1.045) translateY(-3px)}.portrait-card:hover .portrait-arrow{transform:rotate(45deg)}.portrait-copy{padding:17px 0 0}.portrait-copy>p:first-child{font-size:11px;color:var(--muted);margin-bottom:4px}.portrait-copy h3{font-size:16px;font-weight:700;line-height:1.65;min-height:53px;letter-spacing:-.035em}.portrait-tagline{font-size:11px;color:var(--muted);min-height:42px;margin:3px 0 12px;line-height:1.8}.persona-tags{display:flex;flex-wrap:wrap;gap:5px}.persona-tags>span{font-size:9px;line-height:1.6;border:1px solid var(--rule);border-radius:3px;padding:3px 7px;font-weight:500;color:var(--muted);background:var(--sheet)}.roster-note{max-width:660px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:11px}.discovery-section{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;padding:55px;background:var(--primary-soft);border-radius:8px}.discovery-title h2{font-size:31px;line-height:1.6;font-weight:700;letter-spacing:-.03em;margin:18px 0}.discovery-title>p:not(.edition-label){font-size:13px;color:var(--muted)}.discovery-title>.linkbtn{font-size:11px;margin-top:20px;text-decoration:none}.discovery-steps{display:grid}.discovery-steps article{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}.discovery-steps article:first-child{padding-top:0}.discovery-steps article:last-child{border:0;padding-bottom:0}.discovery-steps article>span{font:27px/1.4 Georgia,serif;color:var(--red)}.discovery-steps h3{font-size:15px;font-weight:650;margin-bottom:7px}.discovery-steps p{font-size:12px;line-height:1.95;color:var(--muted)}.closing-section{position:relative;isolation:isolate;text-align:center;margin:70px 0 65px;padding:55px 0;overflow:hidden}.closing-section .edition-label{justify-content:center}.closing-section h2{font-size:38px;line-height:1.65;letter-spacing:-.04em;margin:17px 0 26px}.closing-section .editorial-cta{max-width:350px;margin:auto}.closing-section>p:last-child{font-size:10px;color:var(--muted);margin-top:16px}.closing-eight{position:absolute;z-index:-1;color:var(--primary-soft);font:520px/.8 Georgia,serif;top:-25px;left:50%;transform:translateX(-50%);pointer-events:none}
/* The directory reads like eight individual interviews. */
.directory-intro{padding:62px 0 45px}.directory-intro h1{font-size:48px;line-height:1.55;letter-spacing:-.05em;font-weight:750;margin:20px 0}.directory-intro h1>span{color:var(--red)}.directory-intro>p:last-child{font-size:13px;color:var(--muted)}.persona-index{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-block:1px solid var(--rule);padding:14px 0;gap:8px;margin-bottom:48px}.persona-index a{display:flex;flex-direction:column;align-items:center;text-decoration:none;border-right:1px solid var(--rule);padding:8px 0;transition:background .2s;line-height:1.65}.persona-index a:last-child{border:0}.persona-index a:hover{background:var(--primary-soft)}.persona-index span{font-size:12px;font-weight:650}.persona-index small{font-size:9px;color:var(--muted);margin-top:5px}.directory-list{display:grid;gap:56px}.persona-profile{display:grid;grid-template-columns:0.95fr 1.15fr;gap:48px;padding:0 0 56px;border-bottom:1px solid var(--rule);scroll-margin-top:28px;align-items:start}.profile-visual{position:sticky;top:24px;min-height:490px;background:var(--tone);border-radius:7px;overflow:hidden;isolation:isolate;color:#223429}.profile-visual>p{position:absolute;left:24px;top:24px;font:9px/1.5 var(--f-mono);z-index:3}.profile-word{position:absolute;top:55px;left:24px;font-size:64px;letter-spacing:-.06em;font-weight:800;color:var(--accent);opacity:.7;white-space:nowrap}.profile-visual .ph,.profile-visual .ph.hero{position:absolute;width:113%;height:88%;left:-6.5%;bottom:0;background:none;border:0;border-radius:0;box-shadow:none;z-index:1}.profile-visual .ph>img{object-fit:contain;object-position:bottom}.profile-visual .code{display:none}.profile-visual-foot{position:absolute;bottom:0;left:0;right:0;padding:15px 24px;background:#F6F8EDF2;backdrop-filter:blur(10px);z-index:2;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:650}.profile-visual-foot span{font:9px var(--f-mono)}.profile-story{padding-top:6px;min-width:0}.profile-story h2{font-size:30px;line-height:1.6;letter-spacing:-.04em;margin:12px 0 17px}.profile-story .edition-label{font-family:var(--f-body);font-size:11px}.profile-story blockquote{margin:22px 0 14px;font-size:15px;font-weight:600;color:var(--red)}.profile-bio{font-size:13px;line-height:2.15;color:var(--muted)}.profile-facets{margin:24px 0}.profile-facets>div{padding:14px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:9em 1fr;gap:16px;font-size:12px}.profile-facets dt{font-size:10px;font-weight:650;color:var(--muted);padding-top:2px}.profile-facets dd{margin:0;line-height:1.95}.profile-more{border-top:1px solid var(--rule);font-size:12px}.profile-more>summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;cursor:pointer;font-weight:600;list-style:none}.profile-more summary::-webkit-details-marker{display:none}.profile-more[open]>summary>span{transform:rotate(45deg)}.profile-more>div{padding:4px 0 16px;color:var(--muted);line-height:2}.profile-more h3{font-size:12px;margin:20px 0 7px;color:var(--ink)}.directory-end{text-align:center;padding:60px 0 30px}.directory-end .edition-label{justify-content:center}.directory-end h2{font-size:26px;margin:20px 0 25px}.directory-end .editorial-cta{max-width:380px;margin:auto}.compact{gap:22px 16px}.compact .portrait-verb{font-size:24px}.compact .portrait-no{font-size:6px}.compact .portrait-copy h3{font-size:13px}.compact .portrait-copy .persona-tags{display:none}
/* Questionnaire and report continue the same visual language. */
.profile-onboarding{padding:25px 0}.profile-onboarding>.edition-label{margin-bottom:0}.profile-onboarding .section-title{font-size:31px;margin:10px 0 0;letter-spacing:-.04em}.profile-onboarding .qcard{padding:28px;border-radius:8px;margin:15px 0 10px}.profile-onboarding fieldset+fieldset{padding-top:22px;border-top:1px solid var(--rule);margin-top:22px}.profile-onboarding legend{font-size:13px;font-weight:650;padding:0;margin-bottom:12px}.chip span{font-size:12px;padding:9px 13px}.wrap:has(.dt-question){max-width:1100px}.dt-question{max-width:690px;margin-top:35px}.dt-question-heading{margin-top:30px}.dt-question h1{font-weight:700;font-size:29px;line-height:1.65;letter-spacing:-.03em}.dt-progress-track{height:3px}.dt-answer{border-color:var(--rule);border-radius:6px;min-height:78px;font-size:14px;padding:18px 22px}.dt-answer.is-selected{padding:17px 21px}.dt-answer-key{border-radius:4px;background:transparent;width:28px;height:28px}.dt-answer:hover:not(:disabled){transform:translateX(4px);border-color:var(--primary)}.dt-question-note{line-height:1.9}.wrap:has(.result){max-width:1100px}.result{border-radius:8px;padding:34px;background:var(--sheet);border:1px solid var(--rule)}.r-hero{gap:34px;align-items:center}.r-art{position:relative;background:var(--tone);border-radius:110px 110px 6px 6px;overflow:hidden;isolation:isolate}.r-art .ph,.r-art .ph.hero{border:0;background:none;box-shadow:none;border-radius:0}.r-art .ph>img{object-fit:contain}.r-art .code{display:none}.r-persona-word{font-size:42px;line-height:1.4;letter-spacing:-.06em;color:var(--red);font-weight:750;margin-bottom:10px}.r-title h1{font-size:25px;line-height:1.55}.r-meta{font:9px/1.6 var(--f-mono);gap:7px}.r-meta .r-fam,.r-meta>span:nth-child(2),.r-meta>span:nth-child(4){display:none}.r-title .persona-tags{margin:16px 0}.r-nick{font-size:13px}.r-quote{font-size:12px}.r-lead{font-size:14px;margin-top:26px;line-height:2.1}.result-facets{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--rule);margin:28px 0;gap:28px;padding:25px 0}.result-facets>div+div{border-left:1px solid var(--rule);padding-left:28px}.result-facets h2{font-size:16px;margin:8px 0}.result-facets>div>p:last-child{font-size:12px;color:var(--muted);line-height:1.9}.score-details summary{font-size:15px;font-weight:650;cursor:pointer;padding:10px 0;min-height:44px}.score-details .note{margin:12px 0}.result-share{border-radius:5px}.share-quote{font-size:21px;line-height:1.7}.r-sec{padding-top:34px;margin-top:34px}.r-sec h2{font-size:22px}.r-sec .praise{font-size:14px;line-height:2}.roasts li{font-size:14px;font-weight:500}.r-sec .follow{font-size:13px}.r-sec .bubble{font-size:13px}.result-toc a{font-size:12px}.block h2{font-size:22px}.advice-card{border-radius:5px}.pair .sheet{border-radius:5px}.axis-card .q{font-size:18px}.axis-card{border-radius:6px}.method{gap:16px}.method .sheet{border-radius:6px}.method h3{font-size:16px}.method p{font-size:13px}.section-title{font-size:32px;line-height:1.65;letter-spacing:-.04em}
@media(prefers-reduced-motion:no-preference){.hero-editorial{animation:portrait-enter .6s ease both}.feature-gallery{animation:portrait-enter .8s ease both}.poster-portrait{animation:portrait-enter .5s cubic-bezier(.2,.75,.2,1) both}.feature-poster .poster-bottom{animation:portrait-enter .45s ease both}@keyframes portrait-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(min-width:1280px){.portrait-hero{padding-top:62px}.feature-poster{height:595px}.hero-action{margin-top:38px}.hero-explore{margin-top:42px}.portrait-copy h3{min-height:28px}.portrait-tagline{min-height:40px}.portrait-verb{font-size:39px}}
@media(max-width:1100px){.wrap:has(.portrait-hero),.wrap:has(.directory-intro){padding-inline:36px}.portrait-hero{gap:4%;padding-top:42px}.portrait-hero h1{font-size:42px}.feature-poster{height:530px}.hero-intro{font-size:12px}.poster-top{left:34px;right:34px}.poster-word{font-size:64px}.poster-portrait{height:85%}.poster-sticker{top:150px;right:13px;width:63px;height:63px;font-size:8px}.poster-sticker b{font-size:17px}.portrait-grid{gap:30px 16px}.portrait-copy h3{font-size:14px;min-height:47px}.portrait-verb{font-size:29px}.portrait-no{font-size:6px}.discovery-section{gap:40px;padding:38px}.discovery-title h2{font-size:27px}.feature-controls{gap:5px}.feature-dots{gap:3px}.feature-controls>p{font-size:9px}.persona-profile{gap:30px}.profile-visual{min-height:440px}.profile-word{font-size:53px}.profile-story h2{font-size:25px}.profile-facets>div{grid-template-columns:8em 1fr;gap:12px}}
@media(max-width:800px){.wrap:has(.portrait-hero),.wrap:has(.directory-intro){padding-inline:26px}.portrait-hero{gap:3%;padding-top:34px}.portrait-hero h1{font-size:32px;line-height:1.7}.hero-editorial>.edition-label{font-size:8px;gap:6px}.hero-editorial>.edition-label>span:last-child{font-size:7px;margin-left:2px}.hero-intro{font-size:11px}.feature-poster{height:455px;border-radius:120px 120px 6px 6px}.poster-top{font-size:6px;top:34px;left:29px;right:29px}.poster-word{font-size:51px;top:64px}.poster-portrait{height:83%;width:120%;left:-10%;bottom:43px}.poster-bottom{padding:17px 20px}.poster-bottom h2{font-size:17px}.poster-bottom span{font-size:9px}.poster-sticker{top:133px;width:55px;height:55px;font-size:7px}.poster-sticker b{font-size:16px}.poster-open{width:36px;height:36px;font-size:21px}.feature-controls{display:block}.feature-controls>p{display:none}.feature-dots{justify-content:center;gap:6px}.editorial-cta{font-size:12px;min-height:58px;padding:16px 18px}.hero-action>p{font-size:8px}.hero-explore{font-size:10px}.hero-explore small{font-size:7px}.editorial-divider{font-size:8px}.section-heading h2{font-size:34px}.section-heading>p{font-size:11px}.portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}.portrait-verb{font-size:40px}.portrait-no{font-size:8px}.portrait-image{aspect-ratio:1}.portrait-copy h3{font-size:17px;min-height:28px}.portrait-tagline{min-height:0;font-size:12px}.portrait-copy>p:first-child{font-size:11px}.persona-tags>span{font-size:9px}.portrait-roster{padding:65px 0}.discovery-section{grid-template-columns:1fr;gap:30px}.discovery-title h2{font-size:30px}.discovery-steps article{padding:22px 0}.discovery-steps h3{font-size:16px}.closing-section h2{font-size:32px}.persona-index{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.persona-index a:nth-child(4){border:0}.persona-profile{gap:24px;grid-template-columns:.9fr 1.1fr}.profile-visual{min-height:380px}.profile-word{font-size:40px;left:20px}.profile-visual>p{font-size:7px;left:20px}.profile-visual .ph,.profile-visual .ph.hero{width:130%;left:-15%}.profile-visual-foot{padding:14px 17px;font-size:13px}.profile-story h2{font-size:22px}.profile-story blockquote{font-size:12px}.profile-bio{font-size:12px}.profile-facets>div{display:block}.profile-facets dt{margin-bottom:7px}.profile-more{font-size:11px}.profile-visual-foot span{font-size:7px}.directory-intro h1{font-size:42px}.profile-story .edition-label{font-size:9px}.r-persona-word{font-size:34px}.r-title h1{font-size:22px}.r-hero{gap:25px}.result{padding:25px}}
@media(max-width:600px){.wrap,.wrap:has(.portrait-hero),.wrap:has(.directory-intro),.wrap:has(.dt-question){padding:20px 20px 32px}.brandbar{padding-bottom:19px}.brandbar .brand{font-size:14px;gap:9px}.brand small{font-size:7px;margin-top:6px;letter-spacing:.13em}.brand-symbol{font-size:47px;width:30px;height:36px}.brand-symbol>span{width:8px;height:8px}.brandbar nav{gap:15px}.brandbar .nav-link{font-size:10px}.theme-btn{width:30px;min-height:30px;font-size:18px}.portrait-hero{grid-template-columns:1fr;gap:34px;padding:32px 0 28px}.hero-editorial{padding:0}.hero-editorial>.edition-label{font-size:9px;gap:7px}.hero-editorial>.edition-label>span:last-child{font-size:8px;margin-left:auto}.portrait-hero h1{font-size:clamp(30px,8.2vw,47px);line-height:1.55;margin:22px 0 16px;letter-spacing:-.065em}.hero-intro{font-size:12px;line-height:2.05}.hero-action{max-width:none;margin-top:23px}.hero-action>p{font-size:9px;margin-top:9px}.editorial-cta{font-size:13px;min-height:58px;padding:16px 21px}.hero-explore{display:none}.feature-poster{height:440px;border-radius:130px 130px 6px 6px}.poster-top{top:28px;font-size:7px;left:36px;right:36px}.poster-word{top:48px;font-size:62px}.poster-portrait{height:87%;width:111%;left:-5.5%;bottom:21px}.poster-bottom{padding:14px 20px}.poster-bottom h2{font-size:18px}.poster-bottom span{font-size:10px}.poster-sticker{width:62px;height:62px;top:130px;right:16px;font-size:8px}.poster-sticker b{font-size:18px}.feature-controls{display:flex;margin-top:12px;justify-content:space-between}.feature-controls>p{display:block;font-size:9px}.feature-dots{gap:3px}.feature-dots button{width:27px;height:32px;border-radius:20px}.feature-dots button span{width:20px;height:20px}.editorial-divider{font-size:7px;letter-spacing:.025em;padding:14px 0}.editorial-divider>span:nth-child(3){display:none}.divider-star{font-size:22px}.portrait-roster{padding:48px 0 42px}.section-heading{display:block;margin-bottom:26px}.section-heading h2{font-size:32px;margin-top:14px;line-height:1.55}.section-heading>p{font-size:12px;margin-top:16px}.edition-label{font-size:9px}.portrait-grid{gap:28px 14px}.portrait-no{font-size:6px;top:11px;left:10px;letter-spacing:0}.portrait-verb{font-size:27px;left:10px;top:30px}.portrait-image{aspect-ratio:3/3.6;border-radius:5px}.portrait-image .ph{inset:15% -15% 0;width:130%;height:85%}.portrait-arrow{width:28px;height:28px;bottom:8px;right:8px;font-size:17px}.portrait-copy{padding-top:12px}.portrait-copy>p:first-child{font-size:10px;margin-bottom:3px}.portrait-copy h3{font-size:14px;line-height:1.65;min-height:46px}.portrait-tagline{font-size:10px;min-height:37px;margin:4px 0 9px}.persona-tags{gap:4px}.persona-tags>span{font-size:8px;padding:2px 5px}.roster-note{font-size:10px;text-align:left;margin-top:28px}.discovery-section{padding:29px 23px;border-radius:6px;gap:26px}.discovery-title h2{font-size:26px;line-height:1.6}.discovery-title>p:not(.edition-label){font-size:12px}.discovery-steps article{gap:15px}.discovery-steps article>span{font-size:24px}.discovery-steps h3{font-size:13px}.discovery-steps p{font-size:11px}.closing-section{margin:40px 0 20px;padding:48px 0}.closing-section h2{font-size:28px;margin:16px 0 24px}.closing-section>p:last-child{font-size:9px}.closing-eight{font-size:440px;top:-7px}.footer .note{font-size:10px}.footer .links{gap:9px 14px}.footer .links,.footer .links .linkbtn{font-size:9px}.footer:after{font-size:7px;line-height:1.8}.directory-intro{padding:35px 0 28px}.directory-intro h1{font-size:34px;margin:16px 0}.directory-intro>p:last-child{font-size:12px}.persona-index{margin-bottom:28px;padding:10px 0;gap:4px}.persona-index span{font-size:11px}.persona-index small{font-size:8px}.persona-profile{grid-template-columns:1fr;gap:23px;padding-bottom:34px}.directory-list{gap:34px}.profile-visual{position:relative;top:auto;min-height:390px;border-radius:5px}.profile-visual>p{font-size:8px;left:22px;top:19px}.profile-word{font-size:55px;left:22px;top:46px}.profile-visual .ph,.profile-visual .ph.hero{width:103%;left:-1.5%;height:91%}.profile-visual-foot{font-size:15px;padding:13px 22px}.profile-visual-foot span{font-size:9px}.profile-story h2{font-size:25px;margin:11px 0 15px}.profile-story .edition-label{font-size:10px}.profile-story blockquote{font-size:13px;margin-top:20px}.profile-bio{font-size:12px;line-height:2.05}.profile-facets>div{display:grid;grid-template-columns:8em 1fr;font-size:11px;gap:14px}.profile-facets dt{font-size:9px}.profile-more{font-size:12px}.profile-story .persona-tags>span{font-size:9px;padding:3px 8px}.directory-end{padding:40px 0 20px}.directory-end h2{font-size:22px}.profile-onboarding{padding-top:18px}.profile-onboarding .section-title{font-size:26px}.profile-onboarding .qcard{padding:20px 16px}.chip span{font-size:11px;padding:8px 10px}.profile-onboarding>.row{gap:12px}.profile-onboarding>.row>.btn{width:100%}.profile-onboarding>.row>.linkbtn{margin:auto}.dt-question{margin-top:26px}.dt-question-heading{margin-top:23px}.dt-question h1{font-size:23px;line-height:1.65}.dt-question .dt-answer{font-size:13px;line-height:1.75;min-height:76px;padding:15px 13px;gap:11px}.dt-question .dt-answer.is-selected{padding:14px 12px}.dt-answer-key{width:24px;height:24px}.dt-question-note{font-size:10px}.dt-question-bottom>span{font-size:9px}.dt-question-bottom .linkbtn{font-size:10px}.wrap:has(.dt-question) .brandbar:after{font-size:7px}.result{padding:21px 17px}.r-hero{display:flex;flex-direction:column;gap:22px}.r-art{width:100%;max-width:320px;height:290px;border-radius:100px 100px 5px 5px}.r-art .ph,.r-art .ph.hero{width:100%;height:100%;aspect-ratio:auto}.r-title{width:100%}.r-persona-word{font-size:38px;margin-bottom:5px}.r-title h1{font-size:24px}.r-title .persona-tags>span{font-size:9px}.r-nick{font-size:12px}.r-lead{font-size:12px;line-height:2}.result-facets{grid-template-columns:1fr;gap:20px;margin:23px 0;padding:21px 0}.result-facets>div+div{border-left:0;padding:0}.result-facets h2{font-size:15px}.result-facets>div>p:last-child{font-size:11px}.share-quote{font-size:18px}.result-toc{gap:8px 15px}.result-toc a{font-size:11px}.r-sec h2{font-size:19px}.r-sec .praise{font-size:12px}.r-sec .roasts li{font-size:12px}.r-sec .follow,.r-sec .bubble{font-size:12px}.r-sec{padding-top:26px;margin-top:26px}.score-details summary{font-size:13px}.plan dd{font-size:12px}.block h2{font-size:20px}.section-title{font-size:28px}.r-meta{font-size:8px}.compact .portrait-copy h3{font-size:13px}.compact .portrait-no{font-size:6px}.page-meta{margin-bottom:22px}}
@media(max-width:360px){.wrap,.wrap:has(.portrait-hero),.wrap:has(.directory-intro),.wrap:has(.dt-question){padding-inline:16px}.brandbar nav{gap:10px}.brandbar .brand{font-size:12px}.brandbar .nav-link{font-size:9px}.brand small{font-size:6px}.brand-symbol{font-size:42px;width:26px}.portrait-hero h1{font-size:29px}.hero-intro{font-size:11px}.feature-poster{height:385px}.poster-word{font-size:53px}.poster-top{font-size:6px}.poster-portrait{height:87%;bottom:25px}.poster-bottom{padding-inline:17px}.poster-bottom h2{font-size:16px}.poster-bottom span{font-size:9px}.feature-controls>p{font-size:8px}.feature-dots{gap:1px}.feature-dots button{width:25px}.portrait-verb{font-size:23px}.portrait-no{font-size:5px}.portrait-copy h3{font-size:12px;min-height:40px}.portrait-tagline{font-size:9px}.persona-tags>span{font-size:7px;padding-inline:4px}.directory-intro h1{font-size:29px}.profile-story h2{font-size:23px}.profile-visual{min-height:345px}.profile-word{font-size:49px}.closing-section h2{font-size:25px}.discovery-section{padding-inline:20px}.discovery-title h2{font-size:23px}.dt-question h1{font-size:21px}.dt-question .dt-answer{font-size:12px}.profile-onboarding .section-title{font-size:23px}.hero-action>p{font-size:8px}}
.hero-editorial{border:0;border-radius:0;background:none;padding:0;isolation:isolate}
.poster-top{top:30px;left:21%;right:21%;justify-content:center;gap:18px;font-size:8px}
.poster-word{top:63px;z-index:0}
.feature-poster .poster-portrait{bottom:55px;height:76%}
.feature-poster .poster-bottom{background:#F6F8ED}
.feature-poster .poster-sticker{top:130px}
.feature-poster .poster-word{font-size:clamp(48px,5.1vw,72px)}
@media(max-width:600px){.poster-top{left:17%;right:17%;font-size:7px;gap:14px;top:24px}.feature-poster .poster-word{font-size:51px;top:44px}.feature-poster .poster-portrait{height:77%;bottom:50px}.feature-poster .poster-sticker{top:116px}.feature-poster{height:440px}}
@media(max-width:360px){.feature-poster{height:390px}.feature-poster .poster-word{font-size:44px}.poster-top{font-size:6px}.feature-poster .poster-sticker{top:105px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Static per-character tokens also work under the server Content Security Policy. */
[data-type="ABX"],[data-code="ABX"]{--tone:#F1C3AD;--accent:#B24E39;--tc:#B24E39;--dot:#F1C3AD}
[data-type="ABS"],[data-code="ABS"]{--tone:#E7DAA9;--accent:#8C681F;--tc:#8C681F;--dot:#E7DAA9}
[data-type="ACX"],[data-code="ACX"]{--tone:#D8CCE9;--accent:#7757A6;--tc:#7757A6;--dot:#D8CCE9}
[data-type="ACS"],[data-code="ACS"]{--tone:#D2D0DF;--accent:#6B668D;--tc:#6B668D;--dot:#D2D0DF}
[data-type="TBX"],[data-code="TBX"]{--tone:#BCD6E6;--accent:#376F9C;--tc:#376F9C;--dot:#BCD6E6}
[data-type="TBS"],[data-code="TBS"]{--tone:#C7DDD1;--accent:#497C70;--tc:#497C70;--dot:#C7DDD1}
[data-type="TCX"],[data-code="TCX"]{--tone:#EACFB6;--accent:#A56C3F;--tc:#A56C3F;--dot:#EACFB6}
[data-type="TCS"],[data-code="TCS"]{--tone:#DFDEB6;--accent:#807D39;--tc:#807D39;--dot:#DFDEB6}

/* Refinements after live desktop and mobile inspection. */
.result{display:block}.r-hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:35px}.r-art{height:340px;width:100%;max-width:none}.r-art .ph,.r-art .ph.hero{width:100%;height:100%;aspect-ratio:auto}.r-art .ph>img{object-position:bottom}.r-title{display:block}.r-meta{margin-bottom:15px}.r-persona-word{margin-bottom:10px}.result .r-title h1{font-size:27px;font-weight:750}.r-title .persona-tags{margin:16px 0}.r-nick{margin-top:17px}.r-quote{margin-top:19px}.r-lead{margin-top:30px}.result-facets{margin:28px 0}.result-share{margin:28px 0}.result-toc{margin-top:25px}
.profile-quick{width:max-content;max-width:100%;font-size:12px;color:var(--primary);text-decoration:none;border-bottom:1px solid var(--rule);padding:8px 0}.profile-quick span{margin-left:16px}.profile-onboarding .qcard{margin-top:10px}.profile-onboarding fieldset+fieldset{padding-top:14px;margin-top:14px}
.persona-index{position:sticky;top:0;background:var(--paper);z-index:8;scroll-margin-top:0}.persona-profile{scroll-margin-top:100px}.back-to-index{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:10px;color:var(--muted);min-height:44px;border-top:1px solid var(--rule);margin-top:12px}.back-to-index:hover{color:var(--ink)}
@media(max-width:800px){.r-hero{grid-template-columns:1fr 1.1fr;gap:22px}.r-art{height:290px}.persona-profile{scroll-margin-top:157px}.result .r-title h1{font-size:23px}}
@media(max-width:600px){.r-hero{display:flex;flex-direction:column}.r-art{height:290px;max-width:320px}.r-title{width:100%}.r-meta{margin-bottom:12px}.r-title .persona-tags{margin:12px 0}.r-nick{margin-top:15px}.r-quote{margin-top:15px}.r-lead{margin-top:24px}.result .r-title h1{font-size:24px}.profile-onboarding{padding-top:7px}.profile-quick{font-size:11px}.profile-onboarding .qcard{padding:16px 12px}.persona-index{padding:8px 0}.persona-index a{padding:5px 0}.persona-profile{scroll-margin-top:133px}}

/* Preserve hand silhouettes in the collection thumbnails. */
.portrait-image .ph{inset:14% 0 0;width:100%;height:86%}
@media(max-width:600px){.portrait-image .ph{inset:18% 0 0;width:100%;height:82%}}