@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap');
.hero .portrait img{object-position:50% 12%}
.hero-copy p{display:none}
:root{--paper:#f7f5ef;--ink:#202d28;--green:#173e34;--sage:#e9eee6;--sub:#747b75;--line:#e3e4dc;--gold:#91642e;--white:#fffefb;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #abbd9b;outline-offset:4px}button{border:0}button:disabled{opacity:.45;cursor:not-allowed}h1,h2,h3,.serif,.brand{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500}h2{font-size:28px;line-height:1.5;letter-spacing:-.7px;margin:0 0 10px}h3{font-size:19px;margin:0 0 12px}p{line-height:1.8}small{font-size:12px;color:var(--sub)}.desktop-header{height:100px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:23px}.brand small{display:block;font:9px/2 sans-serif;letter-spacing:2px}.brand-mark{border:1px solid var(--green);width:40px;height:44px;display:grid;place-items:center;color:var(--green);font-size:26px}.desktop-header nav{display:flex;gap:38px;font-size:14px}.desktop-header nav a:hover{color:var(--gold)}.demo-pill{font-size:11px;padding:8px 12px;border:1px solid var(--line);border-radius:30px;color:var(--sub)}.layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 470px;gap:70px;padding:48px 32px 70px;align-items:start}.editorial{padding-top:60px;position:sticky;top:60px}.eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--gold)}.editorial h1{font-size:58px;line-height:1.45;letter-spacing:-2px;margin:22px 0}.editorial em{font-style:normal;color:var(--green)}.intro{font-size:14px;color:var(--sub);line-height:2.1}.editorial-rule{width:54px;height:1px;background:var(--gold);margin:36px 0}.editorial-bottom span{display:block;font-size:12px;letter-spacing:3px}.editorial-bottom small{display:block;margin-top:12px;letter-spacing:1px}#app{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 45px #20372a08;overflow:hidden;min-height:760px;position:relative}.page{padding:24px 24px 30px;animation:appear .18s ease}.page.has-nav{padding-bottom:96px}.topbar{display:flex;justify-content:space-between;align-items:center;min-height:32px;margin-bottom:24px}.topbar .serif{font-size:18px}.icon-btn{background:transparent;color:var(--green);padding:8px;font-size:20px;min-width:40px;min-height:40px}.back{font-size:25px}.kicker{color:var(--gold);font-size:11px;letter-spacing:1.6px;margin:0 0 10px}.muted{color:var(--sub);font-size:13px;line-height:1.8}.primary,.secondary{padding:15px 18px;min-height:49px;border-radius:7px;font-size:14px;transition:background .15s}.primary{background:var(--green);color:#fff}.primary:hover{background:#255548}.secondary{background:transparent;border:1px solid var(--green);color:var(--green)}.full{width:100%}.actions{display:flex;gap:10px;margin-top:20px}.actions>*{flex:1}.text-btn{background:none;color:var(--green);font-size:12px;padding:10px 0}.section{margin-top:26px}.section-heading{display:flex;align-items:center;justify-content:space-between}.portrait{background-color:#ddd8cf;background-image:url('assets/design-reference.webp');background-size:467% 280%;background-position:66% 34.2%;background-repeat:no-repeat;position:relative;border-radius:6px;overflow:hidden}.portrait img{width:100%;height:100%;object-fit:cover;display:block}.portrait.cream img{filter:sepia(.08)}.portrait.social img{filter:sepia(.18);object-position:50% 35%}.portrait.art img{filter:grayscale(1);object-position:55% 40%}.hero{height:440px;border-radius:0;position:relative}.hero .portrait{position:absolute;inset:0;border-radius:0}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f7f5efc9 0%,#f7f5ef22 35%,transparent 60%,#182f2d29 100%)}.hero-copy{position:absolute;z-index:1;left:26px;top:25px;width:80%}.hero-copy .brand{font-size:23px}.hero-copy h2{font-size:27px;margin-top:28px}.hero-copy p{font-size:12px;color:#465447;margin-top:8px}.hero-cta{position:absolute;bottom:22px;left:24px;right:24px;z-index:2}.home-body{padding:22px 22px 98px}.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.scene-card{text-align:left;background:transparent;padding:0;border:1px solid var(--line);border-radius:7px;overflow:hidden}.scene-card .portrait{height:116px;border-radius:0}.scene-label{padding:10px 8px}.scene-label strong{font-family:"Noto Serif SC",serif;font-size:14px;font-weight:500;display:block}.scene-label small{font-size:10px;display:block;margin-top:5px}.welcome{display:flex;gap:16px;align-items:center;background:var(--sage);padding:17px;border-radius:7px;margin-top:23px}.welcome strong{font-size:13px;font-weight:500}.welcome p{font-size:11px;color:var(--sub);margin:4px 0 0}.welcome .symbol{font-size:25px;color:var(--green)}.nav-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;background:#fffefbf5;border-top:1px solid var(--line);padding:14px 12px;gap:4px}.nav-bottom a{flex:1;text-align:center;color:var(--sub);font-size:11px;min-height:42px;display:flex;flex-direction:column;gap:6px;align-items:center}.nav-bottom a.active{color:var(--green)}.nav-bottom svg{width:20px;height:20px}.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 26px;font-size:11px;color:var(--sub)}.steps span{display:flex;align-items:center;gap:6px}.steps b{width:20px;height:20px;background:#c5c9c1;color:white;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:400}.steps .active{color:var(--green)}.steps .active b{background:var(--green)}.steps i{height:1px;width:25px;background:var(--line)}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice{background:transparent;border:1px solid var(--line);border-radius:6px;padding:14px 6px;min-height:65px;color:var(--ink);text-align:center}.choice strong{font-size:13px;font-weight:500;display:block}.choice small{font-size:10px;display:block;margin-top:6px}.choice.selected{border-color:var(--green);background:var(--sage)}.choice .glyph{font-size:22px;margin-bottom:9px;display:block;color:var(--green)}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-card{padding:0;text-align:left;background:transparent;border:1px solid var(--line);border-radius:7px;overflow:hidden}.style-card.selected{border:1px solid var(--green)}.style-card .portrait{height:190px;border-radius:0}.style-card .caption{padding:11px;font-size:13px;display:flex;justify-content:space-between}.selected .check{color:var(--green)}.summary{display:flex;justify-content:space-between;align-items:center;background:#f2f1ec;padding:14px;border-radius:6px;font-size:12px;margin-top:22px}.price{color:var(--gold);font-size:19px;font-family:Georgia,serif}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 12px}.photo-tile{aspect-ratio:1;background:#eeeae2;border-radius:6px;position:relative;overflow:hidden;border:1px solid var(--line)}.photo-tile img{width:100%;height:100%;object-fit:cover}.photo-tile .remove{position:absolute;top:4px;right:4px;border-radius:50%;width:23px;height:23px;background:#fffdfbdd;color:var(--ink);font-size:17px}.photo-tile .badge{position:absolute;bottom:6px;left:6px;font-size:10px;background:#fffdfbe6;border-radius:15px;padding:4px 7px;color:var(--green)}.upload-box{border:1px dashed #a8b3a8;background:transparent;min-height:120px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--green);font-size:12px;width:100%;cursor:pointer}.upload-box span{font-size:30px}.tips{display:flex;background:var(--sage);border-radius:7px;padding:16px 8px;margin-top:20px}.tips div{flex:1;text-align:center;border-right:1px solid #d8dfd4;font-size:12px}.tips div:last-child{border:0}.tips small{display:block;font-size:10px;margin-top:6px}.notice{padding:16px;background:var(--sage);border-radius:6px;font-size:12px;line-height:1.8;margin-top:20px}.notice strong{font-weight:500;display:block;color:var(--green)}.checkbox{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.8;margin-top:16px}.checkbox input{accent-color:var(--green);width:17px;height:17px;flex-shrink:0}.help{font-size:11px;color:var(--sub);line-height:1.8}.demo-notice{background:#f4eddf;color:#846331;font-size:11px;padding:10px 14px;border-radius:6px;line-height:1.8;margin:15px 0}.progress-image{height:315px;margin-top:22px}.image-label{position:absolute;top:12px;right:12px;border:1px solid #fff9;color:white;background:#173e3466;padding:5px 9px;border-radius:5px;font-size:10px;z-index:2}.progress-label{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:12px}.track{height:9px;border-radius:8px;background:#e4e4dd;flex:1;overflow:hidden}.fill{height:100%;background:var(--green);transition:width .4s}.stage{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:13px}.stage .dot{width:22px;height:22px;background:#e3e5dd;border-radius:50%;display:grid;place-items:center;font-size:11px}.stage.done .dot,.stage.working .dot{background:var(--green);color:white}.stage small{display:block;margin-top:5px}.result-image{height:385px;margin-top:18px}.thumbnails{display:flex;gap:9px;margin:12px 0 25px}.thumb{flex:1;height:98px;border:2px solid transparent;padding:3px;border-radius:6px;background:#eeeee7}.thumb.active{border-color:var(--green)}.thumb .portrait{height:100%}.adjust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.adjust-grid button{padding:13px 5px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:12px}.adjust-grid button.active{background:var(--sage);border-color:var(--green)}.adjust-panel{padding:16px;background:var(--sage);border-radius:7px;margin-top:12px}.adjust-panel .choices{grid-template-columns:repeat(2,1fr)}.adjust-panel .choice{background:#fffefb}.result-actions{margin-top:20px;display:grid;gap:10px}.profile{display:flex;gap:18px;align-items:center;margin:8px 0 23px}.avatar{height:82px;width:82px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}.profile h2{font-size:23px;margin:0}.profile p{margin:4px 0;font-size:11px;color:var(--sub)}.preference{display:flex;width:100%;justify-content:space-between;align-items:center;background:var(--sage);padding:16px;border-radius:6px;text-align:left;font-size:13px;color:var(--green)}.preference small{display:block;margin-top:4px}.filter-row{display:flex;gap:8px;margin:12px 0 24px}.filter-row button{flex:1;padding:9px;border-radius:22px;background:#f1f0eb;color:var(--sub);font-size:12px}.filter-row button.active{background:var(--green);color:white}.archive-group{border-left:1px solid var(--line);padding:0 0 24px 16px;position:relative}.archive-group:before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--green)}.archive-group strong{font-size:13px;font-weight:500}.archive-group .muted{font-size:11px;margin:5px 0 10px}.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.archive-photo{padding:0;text-align:left;background:transparent}.archive-photo .portrait{height:160px}.archive-photo small{display:block;margin-top:6px}.membership-strip{display:flex;justify-content:space-between;align-items:center;padding:14px;background:#f4eee3;color:var(--gold);font-size:12px;border-radius:6px;width:100%;margin-top:12px}.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:20px 0}.triptych .portrait{height:160px}.triptych span{position:absolute;bottom:12px;left:8px;color:white;font-size:12px;text-shadow:0 1px 8px #000a}.plan{border:1px solid var(--green);border-radius:7px;overflow:hidden}.plan-head{background:var(--sage);padding:19px;display:flex;justify-content:space-between;align-items:center}.plan-head h3{margin:0}.plan-head .price{font-size:30px}.benefit{padding:17px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;font-size:12px}.benefit:last-child{border:0}.benefit span:first-child{color:var(--green);font-size:18px}.account-list{margin:25px 0}.account-list button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;background:transparent;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}.empty{text-align:center;padding:36px 12px;color:var(--sub);font-size:13px}.empty p{margin:12px 0 22px}.status-chip{display:inline-block;border-radius:20px;background:var(--sage);padding:5px 10px;color:var(--green);font-size:10px}.purchase{padding:18px;background:var(--sage);border-radius:7px}.purchase .price{font-size:29px}.order-row{border-bottom:1px solid var(--line);padding:16px 0;font-size:13px}.order-row small{display:block;margin-top:6px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:12px 20px;border-radius:7px;box-shadow:0 4px 20px #0002;z-index:20;font-size:13px;max-width:90%;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}dialog{border:1px solid var(--line);border-radius:13px;background:var(--white);color:var(--ink);padding:24px;max-width:420px;width:calc(100% - 32px)}dialog::backdrop{background:#172d2566}dialog p,dialog li{font-size:13px;line-height:1.9}dialog .secondary{margin-top:20px}dialog .portrait{height:340px;margin:15px 0}.error{color:#a64039;font-size:12px;line-height:1.7}.upload-count{font-size:12px;color:var(--sub)}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn-row .secondary{font-size:12px;padding:10px 12px}.lead{font-size:13px;color:var(--sub);line-height:1.9;margin-top:0}@keyframes appear{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}@media(min-width:1000px){.hero{height:475px}}@media(max-width:900px){.layout{gap:35px;padding:30px 24px;grid-template-columns:1fr 430px}.editorial h1{font-size:43px}.intro{font-size:12px}.desktop-header{padding:0 24px}.demo-pill{display:none}}@media(max-width:720px){.desktop-header{display:none}.editorial{display:none}.layout{display:block;margin:0 auto;padding:0;max-width:480px}#app{border:0;border-radius:0;box-shadow:none;min-height:100dvh}.hero{height:480px}.page{padding:20px 22px 30px}.page.has-nav{padding-bottom:100px}.nav-bottom{position:fixed;left:50%;transform:translateX(-50%);width:min(100%,480px);padding-bottom:max(14px,env(safe-area-inset-bottom));z-index:10}.home-body{padding-bottom:110px}.result-image{height:400px}}@media(max-width:360px){.page{padding-left:16px;padding-right:16px}h2{font-size:24px}.hero-copy h2{font-size:25px}.choices{gap:5px}.choice strong{font-size:12px}.style-card .portrait{height:165px}.result-image{height:330px}.scene-card .portrait{height:95px}.scene-label small{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hero{height:570px}.hero .portrait{inset:185px 0 0}.hero:after{background:linear-gradient(180deg,#f7f5ef 0%,#f7f5ef 29%,#f7f5ef00 43%,transparent 100%)}.hero-copy{width:calc(100% - 48px)}.hero-copy h2{font-size:25px;margin-top:22px}

.comparison-image{width:100%;border-radius:6px;overflow:hidden;background:#eeeae2}.comparison-image img{display:block;width:100%;height:auto}

/* Scene images keep their full composition; labels sit below, outside the face. */
.scene-card .scene-portrait{width:100%;aspect-ratio:3/2;height:auto;overflow:hidden;background:#e8eee6}
.scene-card .scene-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.scene-card .scene-label{position:static;min-height:64px;background:var(--white);padding:12px 10px}
.scene-card .scene-label strong{line-height:1.5}
.scene-card .scene-label small{line-height:1.5}
