:root {
  --paper: #fffefa;
  --warm-white: #fbf9f5;
  --beige: #f3eee6;
  --beige-strong: #e7ddd0;
  --blush: #ead8d6;
  --rose: #9b686d;
  --rose-dark: #704b50;
  --gold: #a98b5d;
  --ink: #292526;
  --body: #5f5857;
  --muted: #807776;
  --line: rgba(76, 61, 58, .14);
  --danger: #9a4f57;
  --bsti-d: #b99a52;
  --bsti-s: #bd777f;
  --bsti-p: #8f82ad;
  --bsti-w: #77947b;
  --bsti-o: #9c5d26;
  --bsti-r: #863d48;
  --bsti-n: #4f4a78;
  --bsti-t: #34634d;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 13px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; background: var(--warm-white); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--warm-white); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(243,238,230,.58), transparent 260px); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 8px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; color: white; background: var(--ink); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid rgba(169,139,93,.45); outline-offset: 3px; }

.topbar { width: min(calc(100% - 28px), 760px); min-height: 70px; margin: 0 auto; padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { position: relative; display: block; flex: 0 0 auto; color: var(--gold); font: 600 10px Georgia, serif; }
.brand-mark > span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.brand-mark img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.brand-mark-small { width: 42px; height: 42px; }
.brand-words { min-width: 0; }
.brand-words strong, .brand-words small { display: block; white-space: nowrap; }
.brand-words strong { font: 500 14px Georgia, "Times New Roman", serif; letter-spacing: .11em; }
.brand-words small { margin-top: 3px; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.topbar-note { flex: 0 0 auto; color: var(--gold); font: 9px Georgia, serif; letter-spacing: .15em; }

.page-shell { width: min(calc(100% - 28px), 720px); margin: 8px auto 40px; }
.page-enter { animation: pageIn .36s ease-out both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.flash-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.flash { padding: 13px 15px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; line-height: 1.6; }
.flash-error { color: #7b3f47; border-color: #eccfd2; background: #fff0f1; }
.flash-warning { color: #73592f; border-color: #e8d7b8; background: #fff8eb; }
.flash-success { color: #45624e; border-color: #d2e2d6; background: #f0f7f2; }

.site-footer { width: min(calc(100% - 36px), 720px); margin: 0 auto; padding: 22px 0 calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.footer-lockup { display: flex; align-items: center; justify-content: center; gap: 9px; }
.brand-mark-footer { width: 34px; height: 34px; border-radius: 9px; }
.footer-lockup b, .footer-lockup small { display: block; text-align: left; }
.footer-lockup b { color: #554d4c; font: 500 11px Georgia, serif; letter-spacing: .1em; }
.footer-lockup small { margin-top: 2px; font-size: 8px; }
.site-footer > p { margin: 13px 0 0; font-size: 9px; line-height: 1.7; }

.eyebrow { margin: 0 0 10px; color: var(--gold); font: 600 9px Georgia, serif; letter-spacing: .2em; }
.back-link { min-height: 44px; margin-bottom: 18px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--rose-dark); font-size: 12px; font-weight: 600; }
.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 600; letter-spacing: .03em; transition: transform .15s ease, background-color .15s ease, opacity .15s ease; }
.button:active { transform: scale(.985); }
.button:disabled { cursor: wait; opacity: .55; }
.button-primary { color: #fff; background: var(--rose-dark); }
.button-primary:hover { background: #5e3e43; }
.button-secondary { color: var(--rose-dark); border-color: #d9c6c6; background: #fffafa; }
.button-wide { width: 100%; }

/* Homepage */
.home-hero { position: relative; min-height: 570px; padding: 44px 44px 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); text-align: center; }
.analysis-rings { position: absolute; width: 330px; height: 330px; right: -180px; top: -170px; color: rgba(169,139,93,.26); }
.analysis-rings i { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; }
.analysis-rings i:nth-child(2) { inset: 38px; }.analysis-rings i:nth-child(3) { inset: 76px; }
.analysis-rings span { position: absolute; left: 50%; bottom: 28px; font: 9px Georgia,serif; letter-spacing: .3em; }
.hero-brand { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
.brand-mark-hero { width: 86px; height: 86px; border-radius: 22px; }
.hero-brand p { margin: 0; color: var(--gold); font: 8px Georgia, serif; letter-spacing: .2em; }
.home-hero h1 { max-width: 520px; margin: 32px auto 0; font-family: "Songti SC", SimSun, serif; font-size: clamp(34px, 8vw, 52px); font-weight: 400; letter-spacing: .04em; line-height: 1.25; }
.hero-lead { max-width: 470px; margin: 18px auto 0; color: var(--body); font-size: 14px; line-height: 1.9; }
.hero-actions { max-width: 390px; margin: 28px auto 0; display: grid; gap: 7px; }
.hero-facts { max-width: 390px; margin: 26px auto 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); list-style: none; }
.hero-facts li + li { border-left: 1px solid var(--line); }
.hero-facts b,.hero-facts span { display: block; }.hero-facts b { color: var(--gold); font: 20px Georgia,serif; }.hero-facts span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.method-section { margin-top: 16px; padding: 34px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; scroll-margin-top: 20px; }
.section-heading > p { margin: 0; color: var(--gold); font: 9px Georgia,serif; letter-spacing: .2em; }.section-heading h2 { margin: 9px 0 8px; font: 400 25px "Songti SC",SimSun,serif; }.section-heading > span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.method-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.method-grid article { padding-top: 16px; border-top: 1px solid var(--beige-strong); }.method-grid article > span { color: var(--gold); font: 10px Georgia,serif; }.method-grid h3 { margin: 10px 0 7px; font-size: 14px; }.method-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.brand-story { margin-top: 16px; padding: 28px; border-radius: var(--radius-lg); color: #f8f4ee; background: #312d2d; }.brand-story > p { margin: 0; color: #c7aa79; font: 8px Georgia,serif; letter-spacing: .2em; }.brand-story h2 { margin: 11px 0 2px; font: 500 24px Georgia,serif; letter-spacing: .08em; }.brand-story strong { display: block; color: #cfc5c0; font-size: 10px; letter-spacing: .1em; }.brand-story > span { max-width: 500px; margin-top: 18px; display: block; color: #cfc8c4; font-size: 12px; line-height: 1.9; }

/* Selection and forms */
.page-heading { padding: 18px 4px 24px; }.page-heading h1 { margin: 0; font: 400 31px "Songti SC",SimSun,serif; }.page-heading > p:last-child { max-width: 530px; margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.project-list { display: grid; gap: 13px; }.project-card { padding: 24px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }.project-number { align-self: start; color: #c4a878; font: 25px Georgia,serif; }.availability { color: #6f7b6f; font-size: 9px; }.availability i { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #718072; }.project-copy h2 { margin: 9px 0 6px; font-size: 20px; }.project-copy > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.project-meta { margin: 18px 0 0; display: flex; gap: 26px; }.project-meta div { display: grid; gap: 4px; }.project-meta dt { color: var(--gold); font: 8px Georgia,serif; letter-spacing: .12em; }.project-meta dd { margin: 0; color: var(--body); font-size: 11px; }
.form-card { max-width: 610px; margin: 0 auto; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; }.form-card h1 { margin: 0; font: 400 30px "Songti SC",SimSun,serif; }.section-lead { margin: 13px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.step-indicator { margin-bottom: 31px; display: grid; grid-template-columns: 46px 1fr 46px 1fr 46px; align-items: center; }.step-indicator > span { width: 46px; height: 46px; display: grid; place-items: center; align-content: center; border: 1px solid var(--beige-strong); border-radius: 50%; color: var(--muted); background: var(--warm-white); font: 12px Georgia,serif; }.step-indicator small { margin-top: 2px; font: 7px "PingFang SC","Microsoft YaHei",sans-serif; }.step-indicator > span.active { color: #fff; border-color: var(--rose-dark); background: var(--rose-dark); }.step-indicator > span.done { color: var(--rose-dark); border-color: #dcc8c8; background: #f7ecec; }.step-indicator > i { height: 1px; background: var(--beige-strong); }.step-indicator > i.done { background: #cba9ab; }
.stack-form { display: grid; gap: 16px; }.field-group { min-width: 0; }.field-row { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; }.field-label { margin-bottom: 7px; display: block; color: #554e4d; font-size: 12px; font-weight: 600; }.text-input,.short-answer { width: 100%; border: 1px solid #ddd5cf; outline: 0; color: var(--ink); background: var(--paper); }.text-input { min-height: 52px; padding: 0 14px; border-radius: 12px; }.text-input:focus,.short-answer:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(169,139,93,.12); }.text-input::placeholder,.short-answer::placeholder { color: #aaa09d; }.code-input { min-height: 62px; text-align: center; text-transform: uppercase; font: 600 19px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .08em; }.field-help { margin: -7px 0 4px; color: var(--muted); font-size: 10px; line-height: 1.7; }.field-error,.question-error { margin: 7px 0 0; color: var(--danger); font-size: 11px; line-height: 1.5; }.has-error .text-input { border-color: #c97880; }.consent-row { min-height: 52px; padding: 12px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--warm-white); font-size: 10px; line-height: 1.7; cursor: pointer; }.consent-row input { position: absolute; opacity: 0; }.checkmark { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cfc4bd; border-radius: 5px; background: #fff; }.consent-row input:checked + .checkmark { border-color: var(--rose-dark); background: var(--rose-dark); }.consent-row input:checked + .checkmark::after { content: "✓"; color: #fff; font-size: 11px; }.consent-row input:focus-visible + .checkmark { outline: 3px solid rgba(169,139,93,.4); outline-offset: 2px; }.privacy-note { margin-top: 22px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; border-top: 1px solid var(--line); color: var(--muted); }.privacy-note > span { color: var(--gold); }.privacy-note p { margin: 0; font-size: 10px; line-height: 1.75; }.privacy-note b { display: block; margin-bottom: 2px; color: var(--body); }
.profile-choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }.field-label small { margin-left: 5px; color: var(--muted); font-size: 9px; font-weight: 400; }.choice-grid { display: grid; gap: 8px; }.gender-grid { grid-template-columns: repeat(3,1fr); }.concern-grid { grid-template-columns: repeat(5,1fr); }.routine-choice-group { padding-top: 3px; }.routine-step-grid { grid-template-columns: repeat(4,1fr); }.cleansing-grid { grid-template-columns: repeat(3,1fr); }.evening-cleansing-grid { grid-template-columns: repeat(2,1fr); }.routine-choice-card .choice-content { min-height: 50px; padding-inline: 10px; line-height: 1.45; }.choice-card { position: relative; min-width: 0; cursor: pointer; }.choice-card input { position: absolute; opacity: 0; pointer-events: none; }.choice-content { min-height: 44px; padding: 8px 7px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e1d8d1; border-radius: 11px; color: var(--body); background: var(--paper); font-size: 11px; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }.choice-content i { width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid #baa9a2; border-radius: 50%; }.choice-card input:checked + .choice-content { color: var(--rose-dark); border-color: #bb8c90; background: #fbefef; font-weight: 600; }.choice-card input:checked + .choice-content i { border-color: var(--rose-dark); background: var(--rose-dark); }.choice-card input:focus-visible + .choice-content { outline: 3px solid rgba(169,139,93,.4); outline-offset: 2px; }.profile-choice-group.has-error .choice-content { border-color: #d9a1a6; }

/* Questionnaire */
.questionnaire-page { padding-bottom: 96px; }.questionnaire-shell { max-width: 680px; margin: 0 auto; }.questionnaire-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }.questionnaire-head h1 { margin: 0; font-size: 20px; }.question-count { color: var(--rose-dark); font: 28px Georgia,serif; }.question-count small { color: var(--muted); font-size: 12px; }.progress-wrap { margin-top: 18px; }.progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: var(--beige-strong); }.progress-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--gold); transition: width .22s ease; }.progress-wrap p { margin: 8px 0 0; color: var(--muted); font-size: 9px; text-align: right; }.questionnaire-instruction { margin: 18px 0 14px; padding: 14px 16px; display: grid; gap: 5px; border-left: 2px solid var(--gold); color: var(--muted); background: #faf7f2; font-size: 10px; line-height: 1.7; }.questionnaire-instruction strong { margin-bottom: 2px; color: var(--body); font-size: 12px; }.questionnaire-instruction span { display: block; }.error-summary { margin-bottom: 14px; padding: 14px; border: 1px solid #eccfd2; border-radius: 12px; color: #7b3f47; background: #fff0f1; }.error-summary p { margin: 5px 0 0; font-size: 11px; }
.question-stack { padding-bottom: 92px; }
.question-card { min-width: 0; min-height: 440px; margin: 0 0 14px; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; }.js .question-card { display: none; margin-bottom: 0; }.js .question-card.is-active { display: block; animation: questionIn .25s ease-out both; }@keyframes questionIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }.question-card legend { width: 100%; padding: 0; }.dimension-tag,.question-text,.question-guidance { display: block; }.dimension-tag { color: var(--gold); font: 9px Georgia,serif; letter-spacing: .16em; }.question-text { margin-top: 12px; font-size: clamp(20px,5vw,27px); font-weight: 600; line-height: 1.5; }.question-guidance { margin-top: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); background: #faf7f2; font-size: 11px; line-height: 1.7; }.question-guidance b { margin-right: 7px; color: var(--rose-dark); }.option-list { clear: both; padding-top: 18px; display: grid; gap: 10px; }.option-card { position: relative; min-height: 64px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; border: 1px solid #e5ddd7; border-radius: 14px; color: var(--body); background: var(--paper); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }.option-card:hover { border-color: #cbb9ad; }.option-card.is-selected,.option-card:has(input:checked) { border-color: #b9898d; background: #fcf4f3; }.option-card input { position: absolute; opacity: 0; }.option-letter { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--rose-dark); background: #f2e8e5; font: 13px Georgia,serif; }.option-card input:checked ~ .option-letter { color: #fff; background: var(--rose-dark); }.option-card input:focus-visible ~ .option-letter { outline: 3px solid rgba(169,139,93,.4); outline-offset: 2px; }.option-text { flex: 1; font-size: 13px; line-height: 1.65; }.option-check { opacity: 0; color: var(--rose-dark); }.option-card input:checked ~ .option-check { opacity: 1; }.question-error { display: none; }.question-card.show-error .question-error { display: block; }.short-answer-wrap { clear: both; padding-top: 24px; }.short-answer { min-height: 170px; padding: 15px; resize: vertical; border-radius: 14px; line-height: 1.7; }
.question-actions { position: fixed; z-index: 20; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); width: min(calc(100% - 28px),680px); padding: 9px; display: flex; gap: 9px; transform: translateX(-50%); border: 1px solid rgba(76,61,58,.15); border-radius: 999px; background: rgba(255,254,250,.95); box-shadow: 0 10px 30px rgba(50,38,37,.12); backdrop-filter: blur(12px); }.question-actions .button { min-height: 48px; flex: 1; }.js [data-finish] { display: none; }.js .is-last-step [data-next] { display: none; }.js .is-last-step [data-finish] { display: inline-flex; }
html:not(.js) [data-prev],html:not(.js) [data-next]{display:none}

/* Report */
.report-page .page-shell { max-width: 760px; }.report-header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }.report-brand { display: flex; align-items: center; gap: 11px; }.brand-mark-report { width: 50px; height: 50px; }.report-brand b,.report-brand small { display: block; }.report-brand b { font: 500 16px Georgia,serif; letter-spacing: .08em; }.report-brand small { margin-top: 4px; color: var(--gold); font-size: 9px; letter-spacing: .08em; }.report-header dl { margin: 0; display: flex; gap: 24px; }.report-header dt { color: var(--gold); font: 7px Georgia,serif; letter-spacing: .12em; }.report-header dd { margin: 4px 0 0; color: var(--body); font-size: 10px; }
.result-card { margin-top: 12px; padding: 45px 28px 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; text-align: center; }.result-code { color: var(--rose-dark); font: clamp(52px,15vw,78px)/1 Georgia,serif; letter-spacing: .08em; }.result-card h1 { margin: 12px 0 0; font: 400 24px "Songti SC",SimSun,serif; }.result-summary { max-width: 540px; margin: 15px auto 0; color: var(--muted); font-size: 11px; line-height: 1.8; }.result-token-row { margin-top: 20px; display: flex; justify-content: center; gap: 8px; }.result-token-row span { min-width: 32px; padding: 5px 9px; border: 1px solid #d7c19d; border-radius: 99px; color: #806740; font: 11px Georgia,serif; }.non-medical-note { margin: 20px -28px -30px; padding: 11px; color: var(--muted); background: #f8f5f0; font-size: 9px; }.report-section { margin-top: 12px; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }.section-title { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }.section-title > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #decdb2; border-radius: 50%; color: var(--gold); font: 10px Georgia,serif; }.section-title p { margin: 0 0 3px; color: var(--gold); font: 7px Georgia,serif; letter-spacing: .16em; }.section-title h2 { margin: 0; font-size: 17px; }.dimension-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.dimension-card { min-width: 0; padding: 15px; display: grid; grid-template-columns: 46px 1fr auto; align-items: start; gap: 11px; border-radius: 13px; background: #f9f6f1; }.dimension-symbol { text-align: center; }.dimension-symbol small,.dimension-symbol b { display: block; }.dimension-symbol small { color: var(--muted); font: 7px Georgia,serif; }.dimension-symbol b { margin-top: 5px; color: var(--rose-dark); font: 25px Georgia,serif; }.dimension-copy h3 { margin: 0; font-size: 12px; }.dimension-copy p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.dimension-card em { color: var(--gold); font: normal 11px Georgia,serif; }.manual-profile { margin: 0; color: var(--body); font-size: 12px; line-height: 2; text-align: justify; overflow-wrap: anywhere; }.report-list { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }.report-list li { padding: 12px 13px; display: flex; align-items: flex-start; gap: 10px; border-radius: 11px; background: #faf8f4; }.report-list li > span { color: var(--gold); }.report-list p { margin: 0; color: var(--body); font-size: 11px; line-height: 1.75; }.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }.tag-list span { max-width: 100%; padding: 8px 11px; overflow-wrap: anywhere; border: 1px solid #dfd4c7; border-radius: 99px; color: #5c544e; background: #faf7f1; font-size: 10px; }.caution-section { border-color: #e4d2cf; }.caution-tags span { border-color: #e6cfcd; color: #78565a; background: #fdf5f4; }.management-list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; counter-reset: none; }.management-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }.management-list li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: #f4eee4; font: 9px Georgia,serif; }.management-list p { margin: 4px 0 0; color: var(--body); font-size: 11px; line-height: 1.75; }.treatment-section { background: #fcfaf6; }.warm-note { border-color: #dfcfb7; background: #faf6ed; }.warm-note > p { margin: 0; color: #6d6255; font-size: 11px; line-height: 1.85; }.warm-note > p + p { margin-top: 8px; }.report-meta { margin-top: 12px; padding: 18px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }.report-meta div { display: flex; align-items: baseline; justify-content: center; gap: 10px; }.report-meta b { color: var(--body); font: 500 12px Georgia,serif; letter-spacing: .08em; }.report-meta span { font-size: 9px; }.report-meta p { margin: 8px 0 0; font-size: 9px; line-height: 1.7; }.report-actions { margin: 12px 0; }.completion-mark { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; border: 1px solid #cfb98f; border-radius: 50%; color: var(--gold); font-size: 22px; }

.empty-card { padding: 50px 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; text-align: center; }.empty-card > span { color: var(--gold); font: 25px Georgia,serif; }.empty-card h1,.empty-card h2 { margin: 12px 0 8px; }.empty-card > p { max-width: 440px; margin: 0 auto 22px; color: var(--muted); font-size: 12px; line-height: 1.8; }.error-page-card { margin-top: 30px; }.error-code { color: #d6c6af; font: 70px/1 Georgia,serif; }.error-page-card small { margin-top: 20px; display: block; color: var(--muted); font-size: 9px; }

.report-access-card { margin-top: 12px; padding: 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; border: 1px solid #dfceb2; border-radius: var(--radius-lg); background: #fbf7ef; }.report-access-card p,.report-access-card h2 { margin: 0; }.report-access-card > div:first-child p { color: var(--gold); font: 8px Georgia,serif; letter-spacing: .16em; }.report-access-card h2 { margin-top: 6px; font-size: 16px; }.report-access-card span { margin-top: 6px; display: block; color: var(--muted); font-size: 10px; line-height: 1.7; }.report-access-actions { display: flex; gap: 8px; }.report-access-actions .button { min-height: 42px; padding-inline: 16px; font-size: 11px; }.copy-feedback { grid-column: 1 / -1; color: #5f765f; font-size: 10px; }
.result-code { color: inherit; }.result-code span { display: inline-block; }.tone-d { color: var(--bsti-d)!important; }.tone-s { color: var(--bsti-s)!important; }.tone-p { color: var(--bsti-p)!important; }.tone-w { color: var(--bsti-w)!important; }.tone-o { color: var(--bsti-o)!important; }.tone-r { color: var(--bsti-r)!important; }.tone-n { color: var(--bsti-n)!important; }.tone-t { color: var(--bsti-t)!important; }.result-token-row i,.dimension-symbol i { font-style: normal; }.result-token-row span { background: #fffdf9; }.report-customer-context { margin-top: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }.report-customer-context dl { margin: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.report-customer-context dt { color: var(--gold); font-size: 8px; }.report-customer-context dd { margin: 5px 0 0; color: var(--body); font-size: 10px; line-height: 1.55; }.dimension-card { border: 1px solid transparent; }.dimension-o,.dimension-r,.dimension-n,.dimension-t { border-color: rgba(91,65,62,.16); background: #f7f2ef; }.dimension-d,.dimension-s,.dimension-p,.dimension-w { border-color: rgba(169,139,93,.13); background: #fbf9f5; }.dimension-symbol b { color: inherit; }

@media (max-width: 640px) {
  .page-shell { margin-top: 2px; }.home-hero { padding: 35px 24px 28px; }.method-section { padding: 27px 21px; }.method-grid { grid-template-columns: 1fr; gap: 13px; }.method-grid article { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; }.method-grid h3 { margin: 0 0 6px; }.method-grid p { grid-column: 2; }.project-card { grid-template-columns: 38px 1fr; padding: 20px; gap: 12px; }.project-card .button { grid-column: 1 / -1; width: 100%; }.form-card { padding: 25px 20px; }.question-card { min-height: 420px; padding: 25px 20px; }.dimension-grid { grid-template-columns: 1fr; }.report-header { align-items: flex-start; }.report-header dl { gap: 12px; flex-direction: column; }.report-section { padding: 23px 18px; }
}
@media (max-width: 640px) {
  .concern-grid,.routine-step-grid { grid-template-columns: repeat(2,1fr); }.cleansing-grid,.evening-cleansing-grid { grid-template-columns: 1fr; }.report-access-card { grid-template-columns: 1fr; }.report-access-actions { display: grid; grid-template-columns: 1fr 1fr; }.report-customer-context dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
  .topbar { width: calc(100% - 24px); }.topbar-note { display: none; }.page-shell { width: calc(100% - 24px); }.home-hero { padding-inline: 18px; }.home-hero h1 { font-size: 32px; }.hero-lead { font-size: 13px; }.hero-facts { margin-top: 20px; }.brand-story { padding: 24px 20px; }.form-card { padding: 23px 17px; }.field-row { grid-template-columns: 1fr; }.step-indicator { grid-template-columns: 42px 1fr 42px 1fr 42px; }.step-indicator > span { width: 42px; height: 42px; }.question-card { padding-inline: 17px; }.option-card { padding-inline: 11px; }.option-letter { width: 34px; height: 34px; }.question-actions { width: calc(100% - 20px); }.report-header { padding: 15px; }.brand-mark-report { width: 44px; height: 44px; }.report-brand b { font-size: 13px; }.result-card { padding-inline: 18px; }.non-medical-note { margin-inline: -18px; }.report-meta div { align-items: center; flex-direction: column; gap: 4px; }.site-footer { width: calc(100% - 32px); }
}
@media (max-width: 340px) {
  .brand-words small { display: none; }.brand-words strong { font-size: 12px; }.home-hero { padding-inline: 15px; }.hero-facts span { font-size: 8px; }.project-meta { gap: 16px; }.question-card { padding: 22px 14px; }.option-text { font-size: 12px; }.report-header dl { display: none; }
}
@media (max-height: 700px) {
  .questionnaire-page { padding-bottom: 0; }
  .question-stack { padding-bottom: 0; }
  .question-card { min-height: 0; padding-block: 20px; }
  .question-text { margin-top: 7px; font-size: 22px; line-height: 1.35; }
  .option-list { padding-top: 14px; gap: 8px; }
  .option-card { min-height: 56px; padding-block: 8px; }
  .question-actions { position: static; width: 100%; margin-top: 12px; transform: none; }
}
.reference-list,.snapshot-reference-list { margin: 0; display: grid; gap: 8px; }
.reference-list > div,.snapshot-reference-list > div { min-width: 0; padding: 12px 13px; display: grid; grid-template-columns: minmax(92px,.7fr) minmax(0,1.8fr); gap: 14px; border: 1px solid #e6ddd2; border-radius: 11px; background: #faf8f4; }
.reference-list dt,.snapshot-reference-list dt { color: var(--rose-dark); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.reference-list dd,.snapshot-reference-list dd { min-width: 0; margin: 0; color: var(--body); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.caution-reference-list > div { border-color: #ead9d7; background: #fdf7f6; }
.snapshot-reference-list { gap: 6px; }
.snapshot-reference-list > div { padding: 9px 10px; border-radius: 8px; }
@media (max-width: 520px) { .reference-list > div,.snapshot-reference-list > div { grid-template-columns: 1fr; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; } }