:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#293e37;background:#f7f9f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}header{height:98px;max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e4e9e2}.brand{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:700;letter-spacing:2px;color:inherit;text-decoration:none}.logo{display:grid;place-items:center;width:36px;height:36px;background:#3e725e;color:white;border-radius:12px;font-size:29px}.header-note{font-size:12px;color:#879289;letter-spacing:1px}.small-leaf{color:#54836c;margin-left:22px;font-size:22px}.consultation-layout{max-width:1160px;margin:66px auto 58px;display:grid;grid-template-columns:330px 1fr;gap:76px;padding:0 24px}aside{padding:26px 0;position:relative;overflow:hidden}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.5px;color:#78917f}h1{font-size:38px;line-height:1.65;letter-spacing:1px;font-weight:600;margin:19px 0 17px}h1 span{color:#51806a}.intro{font-size:14px;line-height:1.9;color:#879187}ol{list-style:none;padding:0;margin:37px 0 38px}ol li{display:flex;align-items:center;gap:14px;font-size:13px;color:#9ba69e;position:relative;height:55px}ol li:not(:last-child):after{content:"";position:absolute;width:1px;height:23px;background:#dde5dc;left:15px;top:43px}ol .number{width:32px;height:32px;border-radius:50%;border:1px solid #dce5dc;display:grid;place-items:center;font-size:12px;background:#f7f9f6}ol .active{color:#3e725e;font-weight:600}ol .active .number{background:#3e725e;color:#fff;border-color:#3e725e;box-shadow:0 0 0 5px #e9efe7}ol .done .number{color:#4c795f;background:#e8efe7}ol .step-status{margin-left:auto;font-size:10px;font-weight:400;padding-right:25px}.aside-note{display:flex;gap:10px;align-items:center;color:#78917f;font-size:12px;line-height:1.9}.aside-note>span{font-size:27px}.aside-note small{font-size:10px;color:#9aa49b}.botanical{position:absolute;font-size:200px;color:#e9eee4;bottom:-100px;right:10px;z-index:-1}.question-panel{background:white;border:1px solid #e6ebe3;border-radius:24px;padding:32px 38px 24px;box-shadow:0 12px 50px #314e3910}.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:#8c998f;letter-spacing:1px}.progress{height:4px;border-radius:5px;background:#edf1eb;margin-top:13px;overflow:hidden}#bar{height:100%;background:#739780;transition:width .3s}.question-heading{text-align:center;margin:36px 0 28px}.pill{font-size:10px;padding:6px 12px;background:#f1f5ed;color:#7b927a;border-radius:30px;letter-spacing:1px}h2{font-size:26px;font-weight:600;letter-spacing:1px;margin:20px 0 11px}.question-heading p{font-size:12px;color:#99a097;line-height:1.7}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.options.three{grid-template-columns:repeat(3,minmax(0,1fr))}.option{border:1.5px solid #e6eae2;border-radius:15px;background:white;padding:11px 11px 18px;position:relative;color:#364a3f;transition:background .2s,border .2s,transform .2s;min-width:0}.option:hover{border-color:#9ab49e;transform:translateY(-2px)}.option.selected{border-color:#5a856b;background:#f5f9f1}.option img{display:block;width:100%;aspect-ratio:1.27;object-fit:cover;border-radius:9px;margin-bottom:19px}.option strong{display:block;font-weight:500;font-size:17px;letter-spacing:2px}.option small{display:block;color:#9aa397;font-size:10px;margin-top:8px;line-height:1.5}.radio{position:absolute;right:20px;top:20px;width:20px;height:20px;border:1px solid #cdd8cb;border-radius:50%;background:white;color:white;display:grid;place-items:center;font-size:11px}.selected .radio{background:#527d62;border-color:#527d62}.hint{text-align:center;font-size:10px;color:#9ca59b;margin:19px 0 25px}.actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf0e9;padding-top:23px}.back{background:transparent;border:0;padding:12px 0;color:#859181;font-size:12px}.back:disabled{color:#c9cec6;cursor:default}.next{background:#3e725b;color:white;border:0;border-radius:9px;padding:14px 25px;font-size:13px;min-width:150px;display:flex;justify-content:space-between;gap:22px;align-items:center}.next:hover{background:#305e48}.next:disabled{background:#e6ece1;color:#a6b29e;cursor:default}.privacy{text-align:center;font-size:10px;color:#a2aa9d;margin-top:27px}.privacy span{margin-right:5px;font-size:14px}footer{max-width:1160px;margin:0 auto;padding:24px;display:flex;justify-content:space-between;font-size:10px;color:#a4aca0;letter-spacing:1px;border-top:1px solid #e4e9e2}button:focus-visible,a:focus-visible{outline:3px solid #a5c7ae;outline-offset:4px}dialog{border:1px solid #e2e9dc;border-radius:24px;padding:38px;max-width:440px;width:calc(100% - 36px);text-align:center;color:#344c3d;box-shadow:0 20px 80px #162c3620}dialog::backdrop{background:#203d3459;backdrop-filter:blur(5px)}.success{background:#e9f1e3;color:#528261;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:28px;margin:0 auto 22px}dialog #completion-view p{font-size:13px;color:#879580;line-height:1.9}dialog .next{margin:24px auto 8px}#summary{font-size:12px;line-height:2;color:#657d67;background:#f5f8f1;border-radius:10px;padding:12px;margin-top:20px}h2:focus{outline:none}@media(min-width:1400px){.consultation-layout{margin-top:85px;margin-bottom:80px}}@media(max-width:850px){.consultation-layout{gap:30px;grid-template-columns:240px 1fr}.question-panel{padding:26px 22px}h1{font-size:30px}.options.three{gap:8px}.option small{font-size:9px}}@media(max-width:650px){header{height:78px;padding:0 22px}.header-note{display:none}.consultation-layout{display:block;margin:18px auto 30px;padding:0 18px}aside{padding:10px 4px 20px}.eyebrow,.intro,.aside-note,.botanical{display:none}h1{font-size:25px;margin:0 0 12px;line-height:1.5}h1 br{display:none}ol{display:flex;justify-content:space-between;gap:8px;margin:20px 0 0}ol li{height:38px;gap:8px;font-size:11px}ol li:not(:last-child):after,.step-status{display:none}ol .number{width:26px;height:26px}.question-panel{padding:25px 18px;border-radius:19px}.question-heading{margin:30px 0 22px}h2{font-size:23px}.option{padding:8px 8px 15px}.option img{margin-bottom:15px}.option small{font-size:9px}.option strong{font-size:15px}.radio{right:15px;top:15px;width:18px;height:18px}.options.three .option{padding:5px 5px 13px}.options.three .option img{aspect-ratio:.83}.options.three .radio{top:10px;right:10px}footer{margin:0 18px;padding:21px 2px;font-size:9px}footer span:last-child{display:none}dialog .eyebrow{display:block}}


.option.text-option { min-height: 150px; padding-top: 48px; }

/* Figma mainPage 1:5 — vanilla HTML/CSS implementation. */
:root { color-scheme: dark; background: #0e0e12; color: #fff; }
body { min-height: 100vh; background: linear-gradient(180deg,#1f101b 0%,#0e0e12 100%); }
.site-shell { width: 100%; max-width: 1440px; min-height: 100vh; margin: 0 auto; }
.home-header { display: block; height: auto; max-width: none; margin: 0; padding: 10px 30px 12px; border: 0; }
.home-brand { margin: 0; color: #d63a6f; font-size: 48px; line-height: 58px; font-weight: 800; letter-spacing: 0; }
.home-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 6px; }
.home-intro h1 { margin: 11px 0 10px; color: #fff; font-size: 32px; line-height: 47px; font-weight: 800; letter-spacing: 0; }
.home-intro p { margin: 0; max-width: 671px; min-height: 47px; font-size: 18px; line-height: 23.5px; color: #fff; font-weight: 500; }
.radius-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 18px; width: 245px; height: 64px; border: 1px solid #1f1f24; background: #22222a; border-radius: 34px; color: white; font-size: 18px; margin-top: 0; }
.radius-button img { display: block; flex-shrink: 0; }
.home-divider { display: block; width: 100%; height: 1px; }
.home-main { display: block; max-width: none; margin: 0; padding: 8px 18px 0 30px; }
.home-main .results { margin: 0 0 7px; font-size: 24px; line-height: 33px; font-weight: 700; letter-spacing: 0; }
.job-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; padding: 7px 6px; }
.job-card { position: relative; min-width: 0; overflow: hidden; background: #17171d; border: 1px solid #1f1f24; border-radius: 24px; cursor: pointer; }
.job-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.job-card:focus-within { outline: 3px solid #a5c7ae; outline-offset: 4px; }
.job-photo { display: block; width: 100%; aspect-ratio: 260 / 312; object-fit: cover; }
.job-name { margin: 10px 5px 12px; height: 23px; line-height: 23px; text-align: center; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-button { display: block; width: calc(100% - 40px); min-height: 42px; margin: 0 auto 19px; padding: 9px 8px; border: 0; border-radius: 24px; background: #d63a6f; color: #fff; font-weight: 700; font-size: 16px; line-height: 22px; }
.job-button:hover { background: #e3487e; }
.home-footer { display: block; max-width: none; margin: 66px 30px 0; padding: 26px 6px 40px; border-top: 1px solid #29232c; color: #b6aeb9; font-size: 13px; line-height: 1.8; letter-spacing: 0; }
.home-footer h2 { color: #fff; font-size: 16px; margin: 0 0 12px; }
.home-footer p { margin: 7px 0; max-width: 1000px; }
.home-footer .footer-copyright { max-width: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid #29232c; text-align: center; font-size: 12px; overflow-wrap: anywhere; }
#load-error { color: #ffc4d6; line-height: 1.8; }
[hidden] { display: none !important; }
#consultation { color-scheme: dark; width: min(680px,calc(100% - 48px)); max-width: 680px; max-height: 82vh; max-height: 82dvh; margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; color: #f7f3f6; background: #19151d; border-color: #42303d; text-align: left; box-shadow: 0 24px 80px #0009; scrollbar-color: #66515f #19151d; }
#consultation::backdrop { background: #08070c80; backdrop-filter: blur(2px); }
#consultation .consultation-layout { display: block; max-width: none; padding: 48px 28px 28px; margin: 0; }
#consultation .dismiss { position: absolute; right: 12px; top: 10px; z-index: 2; border: 0; border-radius: 50%; width: 32px; height: 32px; font-size: 25px; color: #ddd1da; background: #302530; }
#consultation .dismiss:hover { background: #493040; color: #fff; }
#consultation .question-panel { background: #211b25; border-color: #3b2d39; box-shadow: 0 12px 40px #0002; }
#consultation .progress-meta, #consultation .question-heading p, #consultation .option small, #consultation .hint, #consultation .privacy, #consultation #completion-view p { color: #bfb0bd; }
#consultation .progress { background: #3b2d39; }
#consultation #bar { background: #e15083; }
#consultation .pill { background: #3b2432; color: #f5a9c4; }
#consultation .option { background: #29222d; border-color: #786374; color: #f7f3f6; }
#consultation .option:hover { background: #342633; border-color: #ce7596; }
#consultation .option.selected { background: #402536; border-color: #ed73a0; }
#consultation .radio { background: #211b25; border-color: #90788a; color: #fff; }
#consultation .selected .radio { background: #bf2f60; border-color: #ed73a0; }
#consultation .actions { border-color: #3b2d39; }
#consultation .back { color: #ccb9c8; }
#consultation .back:hover:not(:disabled) { color: #ffb5d0; }
#consultation .back:disabled { color: #82717f; }
#consultation .next { background: #bf2f60; color: #fff; }
#consultation .next:hover:not(:disabled) { background: #a92452; }
#consultation .next:disabled { background: #3a2c38; color: #a58fa0; }
#consultation button:focus-visible { outline-color: #ff9cc1; }
#consultation .success { background: #402536; color: #ff9cc1; }
#consultation .eyebrow { color: #ef9bbc; }
#consultation #summary { color: #e5d7e2; background: #29222d; border: 1px solid #493343; }
#consultation .actions .next { margin: 0; }
#completion-view { padding: 52px 28px 32px; max-width: 500px; margin: auto; text-align: center; }
#consultation #completion-view .next { margin: 24px auto 8px; }
#matching-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
.matching-spinner { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid #594050; border-top-color: #ff9cc1; border-radius: 50%; animation: matching-spin 1s linear infinite; }
@keyframes matching-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .matching-spinner { animation: none; } }
@media (max-width: 1100px) {
 .job-grid { gap: 12px; }
 .job-name { font-size: 13px; }
 .job-button { width: calc(100% - 16px); font-size: 12px; }
}
@media (max-width: 850px) {
 .home-intro p { max-width: 470px; }
 .radius-button { width: 190px; font-size: 15px; gap: 10px; }
}
@media (max-width: 767px) {
 .site-shell { min-height: 100vh; }
 .home-header { padding: 14px 18px 18px; }
 .home-brand { font-size: 34px; line-height: 44px; }
 .home-intro { flex-wrap: wrap; gap: 16px; }
 .home-intro h1 { font-size: 25px; line-height: 36px; }
 .home-intro p { font-size: 15px; line-height: 23px; }
 .radius-button { width: 176px; height: 46px; }
 .home-main { padding: 12px 12px 0; }
 .home-main .results { font-size: 20px; margin-left: 6px; }
 .job-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .job-card { height: auto; border-radius: 18px; }
 .job-photo { height: auto; aspect-ratio: 260 / 312; }
 .job-name { font-size: 12px; margin: 9px 4px; }
 .job-button { font-size: 11px; padding: 8px 4px; min-height: 38px; margin-bottom: 13px; }
 .home-footer { margin: 34px 18px 0; padding: 22px 0; }
 .home-footer p { display: block; }
 #consultation { width: calc(100% - 32px); border-radius: 20px; }
 #consultation .consultation-layout { display: block; padding: 40px 12px 12px; }
 #consultation .question-panel { padding: 20px 12px 16px; }
 #consultation .question-heading { margin: 22px 0 18px; }
 #consultation .question-heading h2 { font-size: 20px; }
 #consultation .option.text-option { min-height: 115px; padding-top: 38px; }
 #consultation .hint { margin: 14px 0 18px; }
 #consultation .actions { padding-top: 16px; gap: 12px; }
 #consultation .actions .next { min-width: 125px; padding: 12px 18px; }
 #consultation .privacy { margin-top: 18px; line-height: 1.7; }
}