:root{font-family:Avenir Next,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#17352f;background:#f2eee4;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #17352f;--muted: #6d766f;--cream: #f2eee4;--paper: #fffdf8;--green: #174f42;--green-soft: #dbe6dc;--orange: #ec8b58;--orange-soft: #f6dfcf;--line: rgba(23, 53, 47, .14);--shadow: 0 22px 60px rgba(37, 49, 41, .09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 10%,rgba(232,172,125,.2),transparent 28rem),radial-gradient(circle at 90% 4%,rgba(129,163,142,.18),transparent 30rem),var(--cream)}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(236,139,88,.55);outline-offset:3px}h1,h2,h3,p{margin-top:0}button{cursor:pointer}.app-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;min-height:100vh}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:11px;border:0;background:transparent;padding:0;text-align:left}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:50% 50% 46% 54%;background:var(--green);color:#fff8ed;font-family:Georgia,serif;font-size:22px;font-style:italic}.brand>span:last-child{display:grid}.brand strong{letter-spacing:.04em;font-size:15px}.brand small{color:var(--muted);font-size:11px;letter-spacing:.18em}.privacy-pill{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12px;color:var(--muted);background:#fffdf885}.muted{color:var(--muted);line-height:1.75}.section-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--orange);text-transform:uppercase;margin-bottom:14px}.hero-section{min-height:calc(100vh - 142px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;padding:30px 0 90px}.eyebrow{display:inline-block;padding:7px 10px;border:1px solid rgba(23,79,66,.2);border-radius:999px;font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--green)}.hero-copy h1{font-family:Songti SC,STSong,Georgia,serif;font-size:clamp(48px,6vw,82px);line-height:1.06;letter-spacing:-.055em;margin:24px 0;font-weight:600}.hero-copy h1 em{color:var(--orange);font-style:normal}.hero-copy>p{max-width:640px;color:var(--muted);line-height:1.85;font-size:16px}.hero-points{display:flex;flex-wrap:wrap;gap:18px;margin:30px 0;color:#344c45;font-size:13px}.hero-points span{display:flex;align-items:center;gap:8px}.hero-points i{font-style:normal;color:var(--orange);font-size:10px;border-bottom:1px solid currentColor}.primary-button,.secondary-button,.text-button{border:0;border-radius:999px;transition:transform .2s,background .2s,opacity .2s}.primary-button{padding:14px 24px;background:var(--green);color:#fffaf1;font-weight:700;box-shadow:0 10px 28px #174f4233}.primary-button:hover:not(:disabled){transform:translateY(-2px);background:#103e34}.primary-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.primary-button.full{width:100%;margin-top:22px}.hero-button{padding:16px 28px}.hero-button span{margin-left:25px}.secondary-button{padding:11px 18px;border:1px solid var(--line);background:#fffdf8b3}.text-button{background:transparent;text-decoration:underline;color:var(--green);padding:8px}.hero-visual{height:570px;position:relative}.hero-visual:before{content:"";position:absolute;inset:9% 5% 6% 9%;border:1px solid rgba(23,79,66,.16);border-radius:48% 48% 44% 56%;transform:rotate(-5deg)}.portrait-card{position:absolute;overflow:hidden;border-radius:999px 999px 22px 22px;box-shadow:var(--shadow);background:#dce5dd;border:8px solid rgba(255,253,248,.78)}.portrait-card span{position:absolute;z-index:2;top:15px;left:50%;transform:translate(-50%);color:#fff;font-size:10px;letter-spacing:.16em}.portrait-card i{position:absolute;width:52%;aspect-ratio:.82;border-radius:50% 50% 45% 45%;background:#d5a078;left:24%;bottom:-5%;box-shadow:0 -22px 0 -5px #2e2922,0 -45px 0 -15px #40392f}.portrait-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(23,53,47,.2))}.portrait-a{width:240px;height:390px;left:4%;bottom:20px;transform:rotate(-7deg)}.portrait-b{width:270px;height:440px;left:32%;bottom:72px;z-index:2;background:#e7d2bd}.portrait-c{width:230px;height:370px;right:2%;bottom:16px;transform:rotate(8deg);background:#c9d7cf}.portrait-b i{width:50%;left:25%;box-shadow:0 -34px 0 -3px #50382a,0 -70px 0 -20px #704b34}.portrait-c i{background:#e0b08a;box-shadow:0 -18px 0 -5px #1f2423,0 -35px 0 -13px #2d3432}.visual-note{position:absolute;right:-2%;top:9%;padding:16px 18px;border-radius:16px;background:#fffdf8e0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);font-family:Songti SC,serif;font-size:15px;line-height:1.6}.step-bar{display:flex;justify-content:center;gap:7px;padding:4px 0 28px}.step-bar>div{display:flex;align-items:center;gap:7px}.step-bar span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:10px;border:1px solid var(--line);color:var(--muted);background:#ffffff59}.step-bar i{width:48px;height:1px;background:var(--line)}.step-bar>div:last-child i{display:none}.step-bar .active span{background:var(--green);color:#fff;border-color:var(--green)}.step-bar .active i{background:var(--green)}.card,.wide-card{background:#fffdf8e0;border:1px solid rgba(255,255,255,.75);border-radius:26px;padding:clamp(24px,4vw,42px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.card h2,.wide-card h2,.recommendation-head h2{font-family:Songti SC,STSong,Georgia,serif;font-size:clamp(27px,3.5vw,42px);line-height:1.2;letter-spacing:-.035em;font-weight:600}.flow-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;padding:10px 0 80px}.gender-options{display:grid;gap:12px;margin-top:28px}.gender-options button{border:1px solid var(--line);border-radius:18px;background:#faf7f0;padding:18px;display:grid;grid-template-columns:44px 1fr;text-align:left;align-items:center;transition:.2s}.gender-options button>span{grid-row:1 / 3;font-size:30px;color:var(--orange)}.gender-options button strong{font-size:16px}.gender-options button small{color:var(--muted);margin-top:4px}.gender-options button.active{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green)}.upload-card{display:flex;flex-direction:column}.drop-zone{flex:1;min-height:310px;border:1.5px dashed rgba(23,79,66,.35);border-radius:22px;background:#dbe6dc47;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:24px;padding:26px;transition:.2s}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--orange);background:#f6dfcf85;transform:translateY(-2px)}.drop-zone strong{font-size:18px}.drop-zone>span:last-child{color:var(--muted);font-size:12px}.upload-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--white);box-shadow:0 10px 30px #2531291a;color:var(--orange);font-size:28px}.privacy-strip{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.privacy-strip span:first-child{color:var(--green)}.progress-note{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;color:var(--green);font-size:13px}.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(23,79,66,.18);border-top-color:var(--green);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.error-box,.warning-box{border-radius:15px;padding:14px 16px;margin-top:16px;font-size:13px;line-height:1.6}.error-box{color:#8c3c2f;background:#f8e2d8}.warning-box{display:grid;gap:5px;color:#725326;background:#f7edd8}.analysis-photo{display:grid;grid-template-columns:minmax(280px,.75fr) 1.25fr;gap:22px;align-items:start;padding:10px 0 90px}.photo-panel{position:sticky;top:18px;background:var(--green);color:#fff;border-radius:26px;padding:20px;box-shadow:var(--shadow)}.photo-panel .section-kicker{color:#f2b28e}.landmark-canvas{display:block;width:100%;max-height:65vh;object-fit:contain;border-radius:17px;background:#102c26}.photo-caption{color:#ffffffa6;font-size:11px;margin-top:13px;line-height:1.6}.analysis-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:start;padding:10px 0 90px}.shape-list{display:grid;gap:12px;margin:26px 0}.shape-row{display:grid;grid-template-columns:22px 72px 1fr 43px;gap:10px;align-items:center;font-size:13px}.shape-row>span{color:var(--muted);font-size:10px}.shape-bar{height:6px;background:#e8e5dc;border-radius:99px;overflow:hidden}.shape-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),#72a98d)}.shape-row b{font-size:12px;text-align:right}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.metric-grid>div{background:#f5f1e8;border-radius:14px;padding:13px;display:grid;gap:5px}.metric-grid span{color:var(--muted);font-size:11px}.metric-grid strong{font-size:18px}fieldset{border:0;padding:0;margin:26px 0}legend{font-size:13px;font-weight:700;margin-bottom:11px}.chip-row{display:flex;gap:8px}.chip-row.wrap{flex-wrap:wrap}.chip-row button{border:1px solid var(--line);background:#faf7f0;border-radius:999px;padding:9px 13px;font-size:12px;white-space:nowrap}.chip-row button.active{color:#fff;background:var(--green);border-color:var(--green)}.range-field{display:grid;gap:12px;font-size:13px;margin-top:26px}input[type=range]{accent-color:var(--green);width:100%}.recommendation-section,.tryon-section{padding:10px 0 120px}.recommendation-head,.tryon-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.recommendation-head>div{max-width:720px}.hair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hair-card{background:#fffdf8e6;border:1px solid rgba(255,255,255,.8);border-radius:22px;padding:20px;box-shadow:0 12px 34px #2531290f;transition:transform .2s,box-shadow .2s,border .2s}.hair-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.hair-card.is-selected{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),var(--shadow)}.hair-card-top{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:start}.style-orb{width:72px;height:88px;border-radius:38px 38px 18px 18px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:#fff;font-size:10px;letter-spacing:.12em;position:relative;overflow:hidden}.style-orb:before{content:"";position:absolute;width:44px;height:55px;border-radius:50% 50% 44% 44%;bottom:-10px;left:14px;background:#d7a07c;box-shadow:0 -19px 0 -3px #2a2723}.style-orb span{position:relative;z-index:1;text-shadow:0 1px 4px #000}.style-1{background:linear-gradient(145deg,#759d88,#244c40)}.style-2{background:linear-gradient(145deg,#d39a6f,#8e5541)}.style-3{background:linear-gradient(145deg,#b9a5ac,#62525c)}.style-4{background:linear-gradient(145deg,#c2a77c,#61573e)}.fit-label{color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.08em}.hair-card h3{font-family:Songti SC,serif;font-size:23px;margin:5px 0 8px}.tag-list{display:flex;flex-wrap:wrap;gap:5px}.tag-list span{font-size:10px;color:var(--muted);background:#f1eee6;border-radius:99px;padding:4px 7px}.score{font-family:Georgia,serif;color:var(--orange);font-size:24px}.reason-list{display:grid;gap:7px;margin:18px 0 14px}.reason-list p{margin:0;font-size:12px;color:var(--muted);line-height:1.55}.reason-list p span{color:var(--green);font-weight:800;margin-right:6px}.risk-note{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px;font-size:11px;color:#7a6246;line-height:1.5}.risk-note strong{color:var(--orange);flex:none}.hair-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.hair-card-footer>span{font-size:11px;color:var(--muted)}.hair-card-footer button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-size:12px}.hair-card-footer button.selected-button{background:var(--orange);border-color:var(--orange);color:#fff}.sticky-action{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px auto 0;max-width:760px;padding:13px 14px 13px 22px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:#17352feb;color:#fff;box-shadow:0 20px 50px #17352f42;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.sticky-action>div{display:grid}.sticky-action strong{font-size:13px}.sticky-action span{font-size:10px;color:#ffffff94;margin-top:3px}.sticky-action .primary-button{background:var(--orange);box-shadow:none}.tryon-header>div{max-width:760px}.tryon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}.tryon-card{background:#f8f5ed;border-radius:20px;overflow:hidden;border:1px solid var(--line)}.tryon-image-wrap{aspect-ratio:4 / 5;background:#ddd7ca;display:grid;place-items:center;overflow:hidden}.tryon-image-wrap img{width:100%;height:100%;object-fit:cover}.generation-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:var(--muted);font-size:12px;height:100%}.error-copy strong{color:#8c3c2f;font-size:14px}.tryon-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}.tryon-meta span{color:var(--muted);font-size:10px}.tryon-meta h3{margin:3px 0 0;font-family:Songti SC,serif;font-size:20px}.tryon-meta button,.tryon-meta a{border:0;background:transparent;color:var(--green);font-size:12px;text-decoration:underline}.tryon-card details{border-top:1px solid var(--line);padding:13px 16px;font-size:12px;color:var(--muted)}.tryon-card summary{cursor:pointer;color:var(--green);font-weight:700}.tryon-card details p{line-height:1.6;margin:12px 0 8px}.tryon-card details small{line-height:1.5}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:24px 0 34px;color:var(--muted);font-size:11px}footer button{border:0;background:transparent;color:var(--green);text-decoration:underline}@media(max-width:900px){.app-shell{width:min(100% - 22px,720px)}.hero-section{grid-template-columns:1fr;min-height:auto;padding-top:26px;gap:30px}.hero-visual{height:430px;max-width:560px;width:100%;margin:0 auto}.portrait-a{width:190px;height:310px}.portrait-b{width:215px;height:350px;left:32%}.portrait-c{width:180px;height:290px}.visual-note{right:0}.flow-layout,.analysis-photo,.analysis-layout{grid-template-columns:1fr}.photo-panel{position:static}.landmark-canvas{max-height:56vh}.hair-grid,.tryon-grid{grid-template-columns:1fr}}@media(max-width:600px){.site-header{height:68px}.privacy-pill{font-size:10px;padding:7px 9px}.hero-section{padding-bottom:56px}.hero-copy h1{font-size:43px}.hero-visual{height:350px}.portrait-a{width:150px;height:250px;left:1%}.portrait-b{width:170px;height:285px;left:30%;bottom:48px}.portrait-c{width:145px;height:235px;right:0}.visual-note{top:0;font-size:12px;padding:12px}.step-bar i{width:24px}.step-bar span{width:21px;height:21px}.flow-layout{padding-bottom:55px}.card,.wide-card{border-radius:22px;padding:23px 18px}.drop-zone{min-height:240px}.shape-row{grid-template-columns:18px 64px 1fr 38px;gap:7px}.metric-grid{grid-template-columns:1fr 1fr}.recommendation-head,.tryon-header{display:grid}.hair-card{padding:16px}.hair-card-top{grid-template-columns:60px 1fr auto;gap:10px}.style-orb{width:60px;height:74px}.style-orb:before{left:10px}.hair-card h3{font-size:20px}.sticky-action{border-radius:20px;padding:12px}.sticky-action>div span{display:none}.sticky-action .primary-button{padding:12px 15px;font-size:12px}footer{display:grid;gap:10px}}.feature-insights{display:grid;gap:8px;margin:24px 0;padding:17px 18px;border-radius:16px;background:linear-gradient(145deg,#dbe6dca6,#f6dfcf7a)}.feature-insights strong{font-size:12px;letter-spacing:.08em;color:var(--green)}.feature-insights span{color:#4d625b;font-size:12px;line-height:1.65}.view-result-card{margin-top:28px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#f8f5ed}.view-result-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.view-result-head h3{margin:4px 0 0;font-family:Songti SC,serif;font-size:26px}.view-result-head button{border:0;background:transparent;color:var(--green);text-decoration:underline}.generation-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;text-align:right}.view-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.view-card{margin:0;overflow:hidden;border-radius:16px;background:#e8e3d8;border:1px solid rgba(23,53,47,.08)}.view-image{aspect-ratio:1 / 1;background:#ded8cb}.view-image img{display:block;width:100%;height:100%;object-fit:cover}.view-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#fffdf8;font-size:12px}.view-card a{color:var(--green);font-size:11px}.generation-placeholder.compact{min-height:120px;border-radius:16px}@media(max-width:900px){.view-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.view-result-card{padding:16px}.view-result-head{align-items:flex-start}.view-grid{gap:8px}}.license-gate{margin:22px 0;padding:18px;border-radius:18px;background:#f7f3ea;border:1px solid var(--line)}.license-gate.is-active{background:linear-gradient(145deg,#e6efe7,#f8f1e8)}.license-active{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.license-active>div{display:grid;gap:4px}.license-active span,.license-active small{color:var(--muted);font-size:10px}.license-active strong{font-size:19px}.license-form{display:grid;gap:15px}.license-form h3{margin:3px 0 6px;font-family:Songti SC,serif;font-size:22px}.license-form p,.license-form small{margin:0;color:var(--muted);font-size:12px}.license-input-row{display:grid;grid-template-columns:1fr auto;gap:10px}.license-input-row input{min-width:0;border:1px solid var(--line);border-radius:999px;background:#fff;padding:13px 16px;letter-spacing:.05em}@media(max-width:600px){.license-active,.license-input-row{grid-template-columns:1fr}}.change-license-button{grid-column:1 / -1;justify-self:start;border:1px solid var(--line);background:#ffffffa8;color:var(--green);border-radius:999px;padding:8px 13px;font-size:11px}.score-note{margin:14px 0 0;font-size:11px;color:var(--muted);line-height:1.6}.shape-certainty{display:inline-flex;margin:-4px 0 12px;padding:6px 10px;border-radius:999px;background:#e2ece4;color:#2b6a50;font-size:11px;font-weight:700}.shape-certainty.mixed{background:#f7ead7;color:#8a6534}.rule-details{margin:18px 0;padding:14px 15px;border-radius:15px;background:#f6f3eb;border:1px solid var(--line)}.rule-details summary{cursor:pointer;color:var(--green);font-size:12px;font-weight:700}.rule-list{display:grid;gap:9px;margin-top:13px}.rule-list>div{display:grid;grid-template-columns:48px 1fr;gap:4px 8px;align-items:baseline}.rule-list span{font-size:10px;font-weight:800}.rule-list strong{font-size:12px}.rule-list small{grid-column:2;color:var(--muted);font-size:10px}.rule-pass span{color:#2b7657}.rule-fail span{color:#a45d48}.service-options{grid-template-columns:repeat(2,minmax(0,1fr))}.service-options button{grid-template-columns:38px 1fr}.service-options button span{font-size:25px}.color-reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}.color-reading-grid>div{display:grid;gap:6px;padding:14px;border-radius:14px;background:#f5f1e8}.color-reading-grid span,.color-reading-grid small{color:var(--muted);font-size:10px}.color-reading-grid i{display:block;width:100%;height:34px;border-radius:9px;border:1px solid rgba(23,53,47,.12)}.color-reading-grid strong{font-size:15px}.color-orb{width:72px;height:88px;border-radius:22px;display:grid;place-items:end center;padding-bottom:9px;color:#fff;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 4px rgba(0,0,0,.6)}.color-hex{font-size:11px;color:var(--muted);letter-spacing:.06em}@media(max-width:600px){.color-reading-grid{grid-template-columns:1fr 1fr}.service-options{grid-template-columns:1fr}}