/* v44 personality atlas: shared across Chinese and English. */
.mbti-page { --m-ink:#101411; --m-panel:#151b17; --m-gold:#dfca91; --m-text:#eee9dc; --m-muted:#b7bbae; --m-line:rgba(198,211,185,.17); --m-teal:#a9cdbd; --m-lilac:#c6b6dc; color:var(--m-text); background:#0d110f; background-image:radial-gradient(ellipse at 85% 10%,rgba(114,163,133,.06),transparent 50%); }
.mbti-page [hidden] { display:none!important; }
.mbti-page .container { width:min(100% - 3rem,1120px); }
.mbti-page main { overflow-wrap:anywhere; }
.mbti-page button, .mbti-page select { font:inherit; }
.mbti-page button { cursor:pointer; }
.mbti-page button:disabled { cursor:not-allowed; opacity:.45; }
.mbti-page button:focus-visible, .mbti-page a:focus-visible, .mbti-page select:focus-visible, .mbti-page summary:focus-visible { outline:2px solid var(--m-teal); outline-offset:5px; }
.mbti-page .site-header { background:rgba(13,17,15,.97); border-bottom-color:var(--m-line); }
.m-skip { position:fixed; top:8px; left:8px; z-index:1000; transform:translateY(-160%); padding:.7rem 1rem; background:var(--m-gold); color:#101411; border-radius:8px; }
.m-skip:focus { transform:translateY(0); }
.m-hero { position:relative; border-bottom:1px solid var(--m-line); }
.m-hero-grid { display:grid; grid-template-columns:1.13fr 1fr; align-items:center; gap:3rem; padding-block:4.5rem 3.5rem; }
.m-eyebrow { color:var(--m-teal); font-size:.71rem; font-weight:600; letter-spacing:.15em; line-height:1.7; text-transform:uppercase; margin:0 0 1rem; }
.m-tiny-star { display:inline-block; color:var(--m-gold); margin-right:.5rem; }
.m-hero h1 { font-family:var(--font-serif); font-size:clamp(2.7rem,5.8vw,4.65rem); font-weight:500; line-height:1.2; letter-spacing:.025em; margin:1.3rem 0 1.45rem; }
.mbti-page em { color:var(--m-teal); font-style:normal; }
.m-hero-description { color:var(--m-muted); font-size:1rem; line-height:1.95; max-width:29rem; }
.m-hero-actions { display:flex; align-items:center; gap:1.45rem; flex-wrap:wrap; margin-top:2rem; }
.m-btn { display:inline-flex; align-items:center; justify-content:center; gap:1.2rem; min-height:48px; padding:.83rem 1.25rem; border:1px solid transparent; border-radius:9px; font-size:.92rem!important; font-weight:600!important; line-height:1.4; text-decoration:none; text-align:center; transition:background .2s,transform .2s,border-color .2s; }
.m-btn-primary { background:var(--m-gold); color:#191a12; box-shadow:0 3px 0 rgba(0,0,0,.1); }
.m-btn-primary:hover:not(:disabled) { background:#ebd9ac; color:#191a12; transform:translateY(-2px); }
.m-btn-secondary { background:transparent; border-color:var(--m-line); color:var(--m-text); }
.m-btn-secondary:hover:not(:disabled) { border-color:var(--m-teal); background:rgba(169,205,189,.06); }
.m-text-link { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; color:var(--m-text); font-size:.88rem; }
.m-text-link:hover { color:var(--m-teal); }
.m-hero-micro { margin-top:1.15rem; font-size:.76rem; color:#929f91; }
.m-compass-art { max-width:450px; width:100%; padding:0 .35rem; justify-self:end; }
.m-art-top, .m-art-bottom { display:flex; align-items:center; justify-content:space-between; color:#8f9b8e; font-size:.58rem; letter-spacing:.19em; }
.m-art-top { padding-bottom:.65rem; border-bottom:1px solid var(--m-line); }
.m-art-bottom { padding-top:.65rem; border-top:1px solid var(--m-line); }
.m-compass { width:100%; display:block; overflow:visible; margin-block:.7rem; }
.m-compass-grid { fill:none; stroke:#9ab18c; stroke-opacity:.24; stroke-width:.75; }
.m-compass-grid path { stroke-opacity:.15; stroke-dasharray:2 6; }
.m-orbit-petals { fill:none; stroke-width:1.05; stroke-opacity:.75; transform-origin:220px 220px; animation:m-compass-arrive 1.4s ease-out both; }
.m-compass-points { fill:#0d110f; stroke:#b5c4a1; stroke-width:1; }
.m-compass-needle { fill:#e0cb93; }
.m-compass-labels { font-family:Georgia,serif; font-size:12px; fill:#b8c7b0; text-anchor:middle; }
.m-intro-strip { display:grid; grid-template-columns:repeat(3,1fr) 1.45fr; gap:1.5rem; padding-block:1.5rem; border-top:1px solid var(--m-line); align-items:center; }
.m-intro-strip > span { display:flex; align-items:baseline; gap:.65rem; color:var(--m-muted); font-size:.75rem; }
.m-intro-strip b { font-family:Georgia,serif; font-size:1.7rem; font-weight:400; color:var(--m-gold); }
.m-intro-strip p { color:#98aa98; font-family:var(--font-serif); font-size:.93rem; text-align:right; }
.m-workspace { padding-block:2rem 1rem; scroll-margin-top:100px; }
.m-workspace :is([tabindex="-1"],#m-start) { scroll-margin-top:100px; }
.m-tabs { display:flex; border-bottom:1px solid var(--m-line); margin-bottom:2.25rem; gap:1.6rem; }
.m-tabs button { position:relative; flex:1; min-height:64px; padding:1rem .5rem; border:0; border-bottom:2px solid transparent; background:none; color:var(--m-muted); font-size:.98rem; text-align:left; transition:color .2s,border-color .2s; }
.m-tabs button span { color:#7f917d; display:inline-block; font:italic .75rem Georgia,serif; margin-right:.7rem; }
.m-tabs button[aria-selected="true"] { color:var(--m-gold); border-color:var(--m-gold); }
.m-tabs button[aria-selected="true"] span { color:var(--m-gold); }
.m-tabs button:hover { color:var(--m-text); }
.m-start-layout { display:grid; grid-template-columns:1.35fr 1fr; border:1px solid var(--m-line); border-radius:16px; overflow:hidden; background:var(--m-panel); }
.m-start-main { padding:2.5rem 2.5rem 2rem; }
.m-start-main h2, .m-section-heading h2 { font-family:var(--font-serif); font-weight:500; font-size:clamp(1.7rem,2.6vw,2.25rem); line-height:1.45; margin:0 0 1rem; }
.m-start-main > p:not(.m-eyebrow):not(.m-small) { color:var(--m-muted); line-height:1.9; font-size:.92rem; max-width:32rem; }
.m-start-main > .m-btn { margin-top:1.7rem; }
.m-small { color:var(--m-muted); font-size:.77rem; line-height:1.8; margin-top:.8rem; }
.m-start-aside { background:#19221c; border-left:1px solid var(--m-line); padding:2rem; position:relative; }
.m-aside-number { position:absolute; right:1.5rem; top:.3rem; color:rgba(172,207,177,.12); font:6rem Georgia,serif; }
.m-start-aside h3 { position:relative; font-family:var(--font-serif); font-weight:400; line-height:1.7; color:var(--m-teal); font-size:1.25rem; margin:0 0 1.4rem; }
.m-start-aside ol { list-style:none; display:grid; gap:1.1rem; }
.m-start-aside li { display:flex; gap:1rem; color:var(--m-muted); font-size:.8rem; line-height:1.8; }
.m-start-aside li span { color:var(--m-teal); font:.83rem Georgia,serif; margin-top:.35rem; }
.m-draft-banner { display:flex; flex-wrap:wrap; gap:.35rem .8rem; align-items:center; padding:.8rem 1rem; margin-top:1.4rem; border-left:2px solid var(--m-teal); background:rgba(169,205,189,.07); color:var(--m-teal); font-size:.82rem; }
.m-inline { display:inline-block; border:0; background:none; padding:.45rem .15rem; color:var(--m-gold); font-size:.8rem!important; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.m-status { background:#1f2922; border:1px solid #52634d; padding:.9rem 1.1rem; border-radius:10px; margin:0 0 1.35rem; color:#d3e2ca; font-size:.87rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.m-status[data-kind="error"] { background:#2a211b; border-color:#8b6a4f; color:#ebcab2; }
.m-status[data-kind="loading"]:before { content:""; display:block; width:14px; height:14px; border:1px solid var(--m-teal); border-radius:50%; background:rgba(169,205,189,.12); flex:none; }
.m-status[data-kind="loading"] > span { flex:1; }
.m-quiz-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.m-quiz-header .m-eyebrow { margin-bottom:.3rem; }
.m-quiz-header h2 { font:500 1.6rem/1.4 var(--font-serif); }
.m-progress-copy { text-align:right; display:grid; }
.m-progress-copy strong { font:400 1.45rem/1.4 Georgia,serif; color:var(--m-teal); white-space:nowrap; }
.m-progress-copy > span { font-size:.7rem; color:var(--m-muted); }
.m-progress-track { height:3px; background:#283029; overflow:hidden; border-radius:3px; }
.m-progress-track > span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--m-gold),var(--m-teal)); transition:width .32s ease; }
.m-page-description { color:var(--m-muted); font-size:.83rem; padding:1rem 0 1.5rem; }
.m-questions { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.m-question { min-width:0; border:1px solid var(--m-line); padding:1.65rem 1.45rem 1.15rem; background:var(--m-panel); border-radius:12px; position:relative; transition:border-color .2s,background .2s; animation:m-panel-arrive .35s ease-out both; }
.m-question:nth-child(2) { animation-delay:.025s; }
.m-question:nth-child(3) { animation-delay:.05s; }
.m-question:nth-child(4) { animation-delay:.075s; }
.m-question[data-answered="true"] { border-color:rgba(169,205,189,.37); }
.m-question[data-missing="true"] { border-color:#d4a77d; }
.m-question legend { float:left; width:100%; display:flex; align-items:flex-start; gap:.8rem; font-size:1rem; font-weight:500; line-height:1.7; min-height:4.4rem; margin-bottom:1.15rem; }
.m-question legend + * { clear:both; }
.m-question-number { color:var(--m-gold); font:italic 1.15rem/1.7 Georgia,serif; flex:0 0 1.6rem; }
.m-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.35rem; }
.m-option { display:flex; align-items:center; justify-content:flex-start; flex-direction:column; min-height:90px; padding:.35rem .1rem; border-radius:8px; cursor:pointer; position:relative; font-size:.63rem; color:var(--m-muted); line-height:1.4; text-align:center; }
.m-option input { position:absolute; opacity:0; width:100%; height:100%; inset:0; margin:0; cursor:pointer; }
.m-choice-dot { flex:none; border:1px solid #718274; border-radius:50%; display:grid; place-items:center; height:33px; width:33px; color:transparent; margin-bottom:.7rem; font:500 .9rem/1 var(--font-sans); transition:background .2s,color .2s,transform .2s; }
.m-option:nth-child(1) .m-choice-dot,.m-option:nth-child(5) .m-choice-dot { height:39px; width:39px; margin-top:-3px; margin-bottom:.52rem; }
.m-option:nth-child(1) .m-choice-dot,.m-option:nth-child(2) .m-choice-dot { border-color:#b7a1c9; }
.m-option:nth-child(4) .m-choice-dot,.m-option:nth-child(5) .m-choice-dot { border-color:#a2c9b4; }
.m-option input:checked + .m-choice-dot { background:var(--m-teal); border-color:var(--m-teal); color:#17211b; animation:m-choice-pop .25s ease-out; }
.m-option:nth-child(1) input:checked + .m-choice-dot,.m-option:nth-child(2) input:checked + .m-choice-dot { background:var(--m-lilac); border-color:var(--m-lilac); }
.m-option input:checked ~ .m-choice-label { color:var(--m-text); }
.m-option:has(input:focus-visible) { outline:2px solid var(--m-teal); outline-offset:2px; }
.m-option:hover { background:rgba(255,255,255,.025); }
.m-quiz-footer { padding-top:1.5rem; }
.m-quiz-actions { display:flex; justify-content:space-between; gap:1rem; }
#m-next { min-width:180px; }
.m-draft-actions { display:flex; align-items:center; gap:.6rem 1.1rem; flex-wrap:wrap; border-top:1px solid var(--m-line); margin-top:1.2rem; padding-top:.7rem; font-size:.75rem; color:var(--m-muted); }
.m-draft-actions > span { flex:1 1 20rem; }
.m-review { padding:1.3rem; border:1px solid var(--m-line); border-radius:12px; margin-top:1.3rem; background:var(--m-panel); }
.m-review h3 { color:var(--m-teal); font-weight:500; font-size:1rem; margin-bottom:.4rem; }
.m-review p { color:var(--m-muted); font-size:.8rem; }
.m-review-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.45rem; margin-top:1rem; }
.m-review-grid button { background:#101612; border:1px solid #65715e; color:var(--m-muted); border-radius:5px; font-size:.75rem; min-height:44px; position:relative; }
.m-review-grid button[data-answered="true"] { color:var(--m-teal); border-color:rgba(169,205,189,.6); background:#26392d; }
.m-review-grid button[data-answered="true"]:after { content:""; position:absolute; height:3px; width:9px; border-radius:2px; bottom:5px; left:calc(50% - 4px); background:var(--m-teal); }
.m-section-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:2.5rem; margin-bottom:2rem; }
.m-section-heading h2 { margin:0; }
.m-section-heading > p { color:var(--m-muted); font-size:.88rem; line-height:1.85; }
.m-type-family { display:grid; grid-template-columns:155px 1fr; border-top:1px solid var(--m-line); padding:1.65rem 0; gap:1.5rem; --family:var(--m-lilac); }
.m-type-family[data-family="diplomats"] { --family:var(--m-teal); }
.m-type-family[data-family="sentinels"] { --family:#afc7d9; }
.m-type-family[data-family="explorers"] { --family:var(--m-gold); }
.m-family-heading { padding-top:.6rem; }
.m-family-heading h3 { color:var(--family); font:500 1.2rem/1.5 var(--font-serif); }
.m-family-heading p { font-size:.75rem; color:var(--m-muted); margin-top:.4rem; }
.m-family-heading span { display:inline-block; color:var(--family); font-size:1.4rem; margin-bottom:.35rem; }
.m-type-family-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.m-type-button { text-align:left; border:1px solid transparent; padding:1.05rem .85rem; background:rgba(206,210,184,.025); border-radius:9px; color:var(--m-text); min-width:0; transition:border-color .2s,transform .2s,background .2s; }
.m-type-button:hover,.m-type-button[aria-pressed="true"] { border-color:var(--family); background:rgba(206,210,184,.055); transform:translateY(-3px); }
.m-type-button strong { display:flex; justify-content:space-between; align-items:center; font:400 1.65rem/1.4 Georgia,serif; letter-spacing:.06em; color:var(--family); }
.m-type-button strong span { font:1rem/1 var(--font-sans); opacity:.6; }
.m-type-button b { display:block; font-size:.85rem; font-weight:500; margin-top:.6rem; }
.m-type-button small { display:block; color:var(--m-muted); font-size:.73rem; line-height:1.65; margin-top:.4rem; }
.m-pair-form { border:1px solid var(--m-line); border-radius:15px; background:var(--m-panel); padding:2rem; }
.m-pair-selectors { display:grid; grid-template-columns:1fr 50px 1fr; align-items:end; gap:1rem; }
.m-pair-selectors label { min-width:0; color:var(--m-teal); font-size:.83rem; }
.m-pair-selectors label > span { display:block; margin-bottom:.6rem; }
.m-pair-selectors select { display:block; width:100%; min-width:0; max-width:100%; padding:.8rem 2rem .8rem .85rem; background:#101611; border:1px solid #566552; color:var(--m-text); min-height:50px; font-size:16px; border-radius:8px; }
.m-pair-link { color:var(--m-gold); font:italic 2.25rem/1.5 Georgia,serif; text-align:center; }
.m-pair-preview { min-height:60px; margin:1.15rem 0; display:flex; align-items:center; gap:1.25rem; padding:1rem 0; border-bottom:1px solid var(--m-line); color:var(--m-muted); font-size:.87rem; }
.m-pair-preview strong { color:var(--m-teal); font-weight:500; }
.m-pair-emblem { position:relative; flex:0 0 68px; height:44px; }
.m-pair-emblem:before,.m-pair-emblem:after { content:""; position:absolute; top:1px; left:0; width:41px; height:41px; border:1px solid var(--m-teal); border-radius:50%; }
.m-pair-emblem:after { left:26px; border-color:var(--m-lilac); }
.m-context { border:0; min-width:0; margin:0 0 1.5rem; }
.m-context legend { color:var(--m-text); font-size:.88rem; margin-bottom:.8rem; }
.m-context > div { display:flex; flex-wrap:wrap; gap:.6rem; }
.m-context label { cursor:pointer; display:inline-flex; align-items:center; min-height:48px; gap:.5rem; padding:.65rem .95rem; border:1px solid var(--m-line); border-radius:7px; color:var(--m-muted); font-size:.85rem; }
.m-context label:has(:checked) { border-color:var(--m-teal); color:var(--m-teal); background:rgba(169,205,189,.07); }
.m-context input { accent-color:var(--m-teal); width:17px; height:17px; margin:0; }
.m-data-note { display:flex; gap:.7rem; color:#a0ac9c; font-size:.72rem; line-height:1.85; margin:1.3rem 0 2rem; padding:0 .1rem; }
.m-data-note > span { font-size:1.2rem; color:var(--m-teal); }
.m-result-wrap { margin:2.6rem 0; scroll-margin-top:100px; }
.m-result-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid var(--m-line); padding-bottom:1rem; margin-bottom:1.8rem; }
.m-result-header .m-eyebrow { margin:0; }
.m-result-header > span { color:var(--m-muted); font-size:.72rem; }
.m-archive-language { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .85rem; margin:0 0 1rem; padding:.85rem 1rem; background:#1a2920; border-left:2px solid var(--m-teal); color:var(--m-muted); font-size:.78rem; line-height:1.8; }
.m-archive-language strong { color:var(--m-teal); font-weight:500; }
.m-result-card { border:1px solid var(--m-line); border-radius:16px; background:var(--m-panel); overflow:hidden; }
.m-result-lead { padding:2.5rem; background:radial-gradient(ellipse at 10% 0%,rgba(143,190,161,.12),transparent 75%); }
.m-result-letters { display:flex; gap:.4rem; margin:0 0 1rem; }
.m-result-letters > span { font:400 clamp(2.5rem,5vw,4rem)/1.2 Georgia,serif; color:var(--m-teal); display:inline-block; animation:m-letter-arrive .6s ease both; }
.m-result-letters > span:nth-child(2) { animation-delay:.08s; }
.m-result-letters > span:nth-child(3) { animation-delay:.16s; }
.m-result-letters > span:nth-child(4) { animation-delay:.24s; }
.m-result-letters > span[data-balanced="true"] { color:var(--m-lilac); }
.m-result-lead h2 { font:500 clamp(1.6rem,3vw,2.2rem)/1.45 var(--font-serif); margin-bottom:.6rem; }
.m-result-subtitle { color:var(--m-gold); font-size:.95rem; margin-bottom:.8rem; }
.m-result-summary { color:var(--m-muted); font-size:.92rem; line-height:1.95; max-width:54rem; }
.m-keywords { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem; }
.m-keywords span { border:1px solid var(--m-line); border-radius:4px; padding:.25rem .55rem; font-size:.75rem; color:var(--m-teal); }
.m-axis-section { padding:0 2.5rem 2rem; }
.m-axis-section h3 { font-weight:500; font-size:1.03rem; margin-bottom:.3rem; }
.m-axis-section > p { font-size:.75rem; color:var(--m-muted); }
.m-axes { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; margin-top:1.5rem; }
.m-axis-labels { display:flex; justify-content:space-between; align-items:start; gap:1rem; font-size:.81rem; margin-bottom:.5rem; color:var(--m-teal); }
.m-axis-labels > span:last-child { text-align:right; color:var(--m-lilac); }
.m-axis-labels b { display:block; color:var(--m-text); font-weight:500; }
.m-axis-bar { position:relative; height:7px; border-radius:7px; background:var(--m-lilac); overflow:hidden; }
.m-axis-bar > span { display:block; background:var(--m-teal); height:100%; width:var(--value); transform-origin:left; animation:m-axis-grow .65s ease-out both; }
.m-axis-bar:after { content:""; width:2px; position:absolute; left:50%; top:0; height:100%; background:#19211b; }
.m-axis-note { font-size:.73rem; color:var(--m-muted); margin-top:.5rem; line-height:1.65; }
.m-balanced { color:var(--m-gold); display:inline; margin-right:.4rem; }
.m-candidates { border-top:1px solid var(--m-line); padding:1.5rem 2.5rem; }
.m-candidates h3 { font-size:1rem; font-weight:500; color:var(--m-teal); }
.m-candidates p { color:var(--m-muted); font-size:.82rem; margin-block:.4rem .7rem; }
.m-candidates > div { display:flex; gap:.5rem; flex-wrap:wrap; }
.m-candidates button { min-height:44px; border:1px solid var(--m-line); border-radius:6px; padding:.4rem .7rem; background:#19251d; color:var(--m-teal); font-size:.85rem; }
.m-report-chapters { padding:0 2.5rem 1rem; }
.m-chapter { border-top:1px solid var(--m-line); }
.m-chapter summary { padding:1.2rem 0; min-height:56px; font-size:1rem; color:var(--m-text); cursor:pointer; list-style:none; display:flex; gap:1rem; align-items:center; }
.m-chapter summary::-webkit-details-marker { display:none; }
.m-chapter summary > small { color:var(--m-teal); font:italic .85rem Georgia,serif; }
.m-chapter summary > span:last-child { margin-left:auto; color:var(--m-muted); font-size:1.2rem; transition:transform .2s; }
.m-chapter[open] summary > span:last-child { transform:rotate(45deg); }
.m-chapter-content { padding:0 0 1.5rem 2.05rem; max-width:62rem; }
.m-chapter p { color:var(--m-muted); font-size:.9rem; line-height:1.95; margin-bottom:.8rem; }
.m-chapter ul,.m-actions ul { padding-left:1.2rem; color:#d0d7c8; font-size:.88rem; line-height:1.9; }
.m-chapter li + li,.m-actions li + li { margin-top:.55rem; }
.m-actions { padding:1.7rem 2rem; margin:0 2.5rem 2rem; background:#1b2a20; border-left:2px solid var(--m-teal); }
.m-actions h3 { font-family:var(--font-serif); font-size:1.15rem; font-weight:500; color:var(--m-teal); margin-bottom:.75rem; }
.m-gate { margin:0 2.5rem 2rem; border:1px solid #777050; padding:1.7rem; background:linear-gradient(125deg,rgba(219,197,137,.09),transparent); border-radius:10px; }
.m-gate h3 { font:500 1.35rem/1.5 var(--font-serif); color:var(--m-gold); margin-bottom:.6rem; }
.m-gate p { font-size:.84rem; color:var(--m-muted); line-height:1.8; }
.m-gate ul { display:flex; flex-wrap:wrap; gap:.4rem .8rem; list-style:none; padding:1rem 0; color:#d2c5a0; font-size:.78rem; }
.m-gate li:before { content:"＋ "; }
.m-gate-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.m-result-note { padding:1.25rem 2.5rem; border-top:1px solid var(--m-line); color:var(--m-muted); font-size:.75rem; line-height:1.85; }
.m-result-note p + p { margin-top:.6rem; }
.m-result-tools { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.m-result-tools .m-btn { font-size:.82rem!important; min-height:44px; padding:.65rem 1rem; }
.m-copy-fallback { display:block; width:100%; min-height:200px; background:var(--m-panel); color:var(--m-text); border:1px solid var(--m-line); padding:1rem; font:16px/1.6 var(--font-sans); border-radius:8px; margin-top:.75rem; }
.m-method { border-top:1px solid var(--m-line); border-bottom:1px solid var(--m-line); margin-top:2.5rem; }
.m-method summary { min-height:62px; padding:1.2rem .1rem; font-size:.88rem; color:var(--m-teal); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.m-method summary::-webkit-details-marker { display:none; }
.m-method[open] summary > span { transform:rotate(45deg); }
.m-method > div { padding:0 .1rem 1.4rem; max-width:60rem; }
.m-method h3 { font-size:.9rem; font-weight:500; color:var(--m-text); margin:1rem 0 .4rem; }
.m-method p { color:var(--m-muted); font-size:.82rem; line-height:1.95; }
.m-endnote { text-align:center; color:#a7b5a0; font-family:var(--font-serif); font-size:.9rem; padding:2.2rem .3rem 1.5rem; }
.mbti-page .site-footer { background:#0b0f0d; padding-bottom:max(1rem,env(safe-area-inset-bottom)); }
@keyframes m-compass-arrive { from { opacity:0; transform:rotate(-15deg) scale(.92); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes m-panel-arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes m-choice-pop { 0% { transform:scale(.85); } 65% { transform:scale(1.1); } 100% { transform:scale(1); } }
@keyframes m-letter-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes m-axis-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(min-width:1400px) { .m-hero-grid { padding-top:5.4rem; padding-bottom:4.4rem; } }
@media(max-width:900px) {
 .m-hero-grid { gap:1.5rem; padding-block:3rem 2.3rem; }
 .m-hero h1 { font-size:clamp(2.5rem,6vw,4rem); }
 .m-hero-description { font-size:.9rem; }
 .m-hero-actions { gap:.6rem 1.2rem; }
 .m-intro-strip { gap:.8rem; grid-template-columns:repeat(3,1fr); }
 .m-intro-strip p { display:none; }
 .m-start-main,.m-start-aside { padding:1.75rem; }
 .m-start-layout { grid-template-columns:1.2fr 1fr; }
 .m-type-family { grid-template-columns:120px 1fr; gap:.6rem; }
 .m-type-family-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m-question { padding:1.3rem 1rem 1rem; }
 .m-question legend { font-size:.94rem; }
 .m-review-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media(max-width:640px) {
 .mbti-page .container { width:calc(100% - 2rem); }
 .m-hero-grid { grid-template-columns:1fr; padding-block:2.7rem 1.5rem; gap:1rem; }
 .m-hero-copy { position:relative; z-index:1; }
 .m-hero h1 { font-size:3rem; line-height:1.24; margin-top:.9rem; }
 .m-hero-description { max-width:32rem; }
 .m-hero-actions { margin-top:1.5rem; gap:.4rem 1.2rem; }
 .m-hero-micro { font-size:.71rem; }
 .m-compass-art { max-width:260px; justify-self:center; padding:0; margin-top:1rem; }
 .m-art-top,.m-art-bottom { font-size:.49rem; }
 .m-compass { margin-block:.4rem; }
 .m-intro-strip { padding-block:1rem; gap:.5rem; }
 .m-intro-strip > span { flex-direction:column; gap:0; font-size:.63rem; }
 .m-intro-strip b { font-size:1.45rem; }
 .m-workspace { padding-top:1rem; scroll-margin-top:88px; }
 .m-workspace :is([tabindex="-1"],#m-start) { scroll-margin-top:88px; }
 .m-tabs { gap:.25rem; margin-bottom:1.5rem; }
 .m-tabs button { font-size:.78rem; padding:.85rem .3rem; text-align:center; min-height:64px; line-height:1.5; }
 .m-tabs button span { display:block; margin:0 0 .1rem; font-size:.65rem; }
 .m-start-layout { grid-template-columns:1fr; }
 .m-start-main { padding:1.7rem 1.35rem; }
 .m-start-main h2 { font-size:1.6rem; }
 .m-start-main > p:not(.m-eyebrow):not(.m-small) { font-size:.87rem; }
 .m-start-aside { padding:1.4rem 1.35rem; border-left:0; border-top:1px solid var(--m-line); }
 .m-start-aside h3 { font-size:1.16rem; }
 .m-start-aside h3 br { display:none; }
 .m-start-aside ol { gap:.7rem; }
 .m-start-main > .m-btn { width:100%; }
 .m-small { font-size:.73rem; }
 .m-eyebrow { font-size:.65rem; }
 .m-quiz-header h2 { font-size:1.35rem; }
 .m-progress-copy strong { font-size:1.15rem; }
 .m-page-description { font-size:.77rem; padding-bottom:1.2rem; }
 .m-questions { grid-template-columns:1fr; gap:.8rem; }
 .m-question { padding:1.25rem .8rem .8rem; }
 .m-question legend { font-size:.95rem; min-height:0; margin-bottom:1.25rem; gap:.5rem; }
 .m-question-number { font-size:1rem; flex-basis:1.5rem; }
 .m-option { min-height:84px; font-size:.6rem; padding-inline:0; }
 .m-options { gap:.15rem; }
 .m-choice-dot { width:31px; height:31px; }
 .m-option:nth-child(1) .m-choice-dot,.m-option:nth-child(5) .m-choice-dot { width:37px; height:37px; }
 .m-quiz-actions { gap:.7rem; }
 .m-quiz-actions .m-btn { padding:.8rem .8rem; }
 #m-next { min-width:0; flex:1; }
 .m-quiz-actions #m-back { flex:0 1 34%; }
 .m-draft-actions { gap:0 .9rem; }
 .m-draft-actions > span { flex-basis:100%; }
 .m-review { padding:1rem .8rem; }
 .m-review-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:.35rem; }
 .m-section-heading { grid-template-columns:1fr; gap:.8rem; margin-bottom:1.5rem; }
 .m-section-heading h2 { font-size:1.7rem; }
 .m-section-heading > p { font-size:.83rem; }
 .m-type-family { grid-template-columns:1fr; padding:1rem 0; gap:1rem; }
 .m-family-heading { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-top:0; }
 .m-family-heading span { margin:0 .25rem 0 0; font-size:1.2rem; }
 .m-family-heading h3 { font-size:1.1rem; }
 .m-family-heading p { margin:0 0 0 auto; font-size:.7rem; }
 .m-type-family-list { gap:.6rem; }
 .m-type-button { padding:.9rem .85rem; border-color:var(--m-line); }
 .m-type-button strong { font-size:1.5rem; }
 .m-type-button small { font-size:.71rem; }
 .m-pair-form { padding:1.3rem 1rem; }
 .m-pair-selectors { grid-template-columns:1fr; gap:.55rem; }
 .m-pair-selectors label > span { margin-bottom:.4rem; }
 .m-pair-link { font-size:1.45rem; line-height:1; }
 .m-pair-preview { gap:.75rem; font-size:.8rem; }
 .m-pair-emblem { transform:scale(.85); transform-origin:left; flex-basis:57px; }
 .m-context > div { display:grid; grid-template-columns:1fr; }
 .m-context label { font-size:.85rem; }
 #m-pair-submit { width:100%; }
 .m-data-note { font-size:.68rem; gap:.5rem; margin-top:1rem; }
 .m-result-wrap { scroll-margin-top:88px; }
 .m-result-header { align-items:start; margin-bottom:1.2rem; }
 .m-result-header > span { font-size:.66rem; max-width:50%; text-align:right; }
 .m-result-lead { padding:1.6rem 1.2rem; }
 .m-result-letters { gap:.35rem; }
 .m-result-lead h2 { font-size:1.55rem; }
 .m-result-summary { font-size:.85rem; }
 .m-result-subtitle { font-size:.87rem; }
 .m-axis-section { padding:0 1.2rem 1.5rem; }
 .m-axes { grid-template-columns:1fr; gap:1.1rem; }
 .m-report-chapters { padding:0 1.2rem .8rem; }
 .m-chapter summary { font-size:.94rem; gap:.65rem; }
 .m-chapter-content { padding-left:0; }
 .m-chapter p { font-size:.86rem; }
 .m-chapter ul,.m-actions ul { font-size:.83rem; }
 .m-candidates { padding:1.3rem 1.2rem; }
 .m-actions { margin:0 1.2rem 1.4rem; padding:1.2rem 1rem; }
 .m-gate { margin:0 1.2rem 1.4rem; padding:1.2rem 1rem; }
 .m-gate h3 { font-size:1.2rem; }
 .m-gate-actions { flex-direction:column; align-items:stretch; }
 .m-gate-actions .m-btn { font-size:.82rem!important; gap:.4rem; }
 .m-result-note { padding:1.2rem; }
 .m-result-tools { display:grid; grid-template-columns:1fr 1fr; }
 .m-result-tools .m-btn { padding:.65rem .6rem; }
 .m-result-tools .m-btn-primary { grid-column:1/-1; }
 .m-endnote { font-size:.82rem; }
}
@media(max-width:360px) {
 .mbti-page .container { width:calc(100% - 1.5rem); }
 .m-hero h1 { font-size:2.7rem; }
 .m-hero-actions { gap:.5rem; }
 .m-hero-actions .m-btn { padding:.75rem 1rem; }
 .m-tabs button { font-size:.73rem; }
 .m-start-main,.m-start-aside { padding:1.3rem 1rem; }
 .m-review-grid { gap:.25rem; }
 .m-option { font-size:.57rem; }
 .m-result-tools { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
 .mbti-page *, .mbti-page *:before, .mbti-page *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 html:has(.mbti-page) { scroll-behavior:auto!important; }
}