:root{--paper:#fbf7f4;--card:#fffdfb;--ink:#3e3839;--muted:#8b8080;--line:#e9dfdc;--rose:#a86d79;--rose-dark:#8d5964;--soft:#f3e9e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.page-width{width:min(100% - 48px,1240px);margin-inline:auto}
.topbar{height:75px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:700 20px Georgia,serif;letter-spacing:.015em}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--rose);color:white;font:23px Georgia,serif}
.topbar nav{display:flex;gap:34px;margin-left:auto;font-size:13px;color:#6e6262}
.topbar nav a:hover{color:var(--rose)}
.header-action{border:1px solid var(--rose);color:var(--rose-dark);padding:11px 17px;border-radius:30px;font-size:12px;font-weight:700}
.hero{min-height:520px;display:grid;grid-template-columns:1fr 43%;align-items:center;gap:6%;padding-block:55px 70px}
.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--rose);font-weight:700}
.hero h1,.section-title h2,.next-card strong{font-family:"Songti SC","SimSun",Georgia,serif}
.hero h1{font-size:clamp(45px,5.7vw,78px);line-height:1.28;font-weight:600;letter-spacing:-.04em;margin:23px 0}
.hero h1 em{font-style:normal;color:var(--rose)}
.hero p{max-width:410px;color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 31px}
.button-main,.primary{border:0;background:var(--rose);color:white;border-radius:30px;font-weight:700}
.button-main{display:inline-flex;gap:46px;align-items:center;padding:15px 23px;font-size:13px}
.button-main:hover,.primary:hover{background:var(--rose-dark)}
.hero-display{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#f6e9e6,#eadcd7);border-radius:170px 170px 18px 18px;overflow:hidden}
.hero-display img{width:80%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.hero-display span{font-size:12px;color:#8d7474;padding-bottom:15px}
.models{padding-block:40px 95px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:27px}
.section-title h2{font-size:clamp(32px,3.6vw,47px);font-weight:600;margin:10px 0 0}
.section-title p{font-size:12px;color:var(--muted);margin:0 0 5px}
.model-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}
.model-card,.next-card{border:1px solid var(--line);background:var(--card);border-radius:18px;overflow:hidden}
.model-card{display:grid;grid-template-columns:46% 1fr;min-height:230px}
.model-card:hover{border-color:#c7a3a8}
.model-photo{background:linear-gradient(145deg,#f4e8e4,#e9e0db);display:grid;place-items:center}
.model-photo img{width:80%;height:210px;object-fit:contain;mix-blend-mode:multiply}
.model-caption{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.model-caption div{display:grid;gap:11px}
.model-caption strong{font-size:24px}
.model-caption span,.model-caption b{font-size:12px}
.model-caption span{color:var(--muted)}.model-caption b{color:var(--rose-dark)}
.next-card{padding:29px;background:#f6f1ef;display:flex;flex-direction:column;justify-content:space-between}
.next-card>span{font-size:11px;color:var(--rose)}.next-card strong{font-size:30px;line-height:1.4;font-weight:500}.next-card small{font-size:11px;color:var(--muted)}
.configure-section{background:#f3ece9;padding-block:85px 95px}
.workspace{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:18px;align-items:start}
.controls,.preview{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 12px 34px #5140420b}
.panel-head,.color-heading,.group-title,.preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head{padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:21px}
.panel-head h3{margin:0;font-size:19px}.quiet{border:0;background:none;color:var(--rose-dark);font-size:11px}
.field-grid{display:grid;gap:10px}.field-grid.three{grid-template-columns:repeat(3,1fr)}.field-grid.two{grid-template-columns:repeat(2,1fr)}
.controls label{display:block;font-size:12px;font-weight:650;color:#695d5d}
.controls input{width:100%;height:42px;display:block;margin-top:8px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fcf9f7;color:var(--ink);font-size:16px;font-weight:650;outline:none}
.controls input:focus{border-color:var(--rose);background:white}.controls input:disabled{color:#aaa;background:#f3efed}
.structure{margin-top:19px}
.color-control{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.color-heading h4,.control-group h4{font-size:13px;margin:0 0 12px}.color-heading span{color:var(--rose-dark);font-size:12px;margin-bottom:12px}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.swatch{width:100%;aspect-ratio:1;border:1px solid #b4a5a388;border-radius:50%;padding:0;position:relative;transition:transform .15s}
.swatch:hover{transform:scale(1.12)}.swatch[aria-pressed="true"]{outline:2px solid var(--rose);outline-offset:3px}
.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hint,.fineprint{font-size:10px;color:#9b8b8b;line-height:1.65}.hint{margin:13px 0 0}.fineprint{margin:11px 0 0}
.advanced{margin-top:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.advanced summary{list-style:none;cursor:pointer;padding:16px 0;font-size:13px;font-weight:700;display:flex;justify-content:space-between}
.advanced summary::-webkit-details-marker{display:none}.advanced summary::after{content:"+";color:var(--rose);font-size:18px;margin-left:auto}
.advanced[open] summary::after{content:"−"}.advanced summary span{font-size:10px;font-weight:400;color:var(--muted);margin-left:8px;margin-right:10px}
.advanced-body{padding:0 0 20px}.control-group{padding-top:16px}.control-group h4{margin-bottom:10px}
.segmented{display:flex;background:#f4eeeb;padding:3px;border-radius:8px}.segmented button{flex:1;border:0;background:transparent;padding:10px 4px;border-radius:6px;font-size:11px;color:#847778}.segmented button.selected{background:var(--rose);color:white}
.group-title span{font-size:10px;color:var(--muted)}
.layer-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.layer-fields label{font-size:10px}.layer-fields input{height:36px;font-size:13px}
.calculated{margin-top:6px;padding:9px;border-radius:7px;background:#f5f1ef;font-size:13px}
.error{margin-top:15px;padding:10px;border-radius:8px;background:#fff0ed;color:#ab4b40;font-size:11px}
.primary{width:100%;padding:14px 20px;margin-top:24px;font-size:13px}
.preview{display:flex;flex-direction:column;min-height:620px}
.preview-badge{font-size:11px;color:var(--rose);background:var(--soft);padding:6px 10px;border-radius:20px}
.canvas-wrap{position:relative;flex:1;min-height:475px;background:radial-gradient(circle at 50% 37%,#fffefd,#f7f1ed);border-radius:12px;overflow:hidden}
#scene{display:block;width:100%;height:100%;min-height:475px;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}
.canvas-tip{position:absolute;bottom:13px;left:16px;color:#a39292;font-size:10px;pointer-events:none}
.preview-foot{padding-top:17px;flex-wrap:wrap}.preview-foot>div:first-child{display:grid;gap:5px}
.preview-foot span{font-size:15px;font-weight:700}.preview-foot small{font-size:11px;color:var(--muted)}
.preview-actions{display:flex;gap:6px}.preview-actions button{border:1px solid var(--line);background:white;border-radius:20px;padding:8px 11px;color:#766a6a;font-size:10px}
.preview-actions button:hover{border-color:var(--rose)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:34px}.footer>span,.footer>a:last-child{font-size:11px;color:var(--muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr 42%}.workspace{grid-template-columns:1fr}.preview{min-height:550px}.model-grid{grid-template-columns:1fr}.next-card{min-height:190px}}
@media(max-width:600px){.page-width{width:min(100% - 32px,1240px)}.topbar{height:66px}.topbar nav{display:none}.header-action{margin-left:auto}.brand{font-size:18px}.hero{grid-template-columns:1fr;padding-block:45px 55px;gap:35px}.hero h1{font-size:47px}.hero p{font-size:13px}.hero-display{height:320px;border-radius:130px 130px 14px 14px}.models{padding-bottom:65px}.section-title{display:block}.section-title p{margin-top:12px}.model-card{grid-template-columns:42% 1fr;min-height:180px}.model-photo img{height:160px}.model-caption{padding:15px}.model-caption strong{font-size:18px}.next-card strong{font-size:24px}.configure-section{padding-block:60px}.controls,.preview{padding:18px}.preview{min-height:470px}.canvas-wrap,#scene{min-height:350px}.swatches{grid-template-columns:repeat(7,1fr);gap:7px}.footer>span{display:none}}