/* 叙页 · 第二轮：产品官网式首屏，真实作品展示，完整模板工作区。 */
:root{--bg:#fafaf8;--card:#fff;--ink:#202427;--sub:#6a6d71;--faint:#7c8084;--line:#e7e8e6;--acc:#d95332;--acc-soft:#fff0e9;--field:#f8f9f7}
body{background:var(--bg)}body:before{display:none}.wrap{max-width:1260px;padding:0 40px 48px}
.top{display:grid;grid-template-columns:auto 1fr auto;gap:24px;min-height:82px;margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{gap:10px}.brand-name{font-size:24px;letter-spacing:.5px}.brand-name>span{font-size:13px;margin-left:3px}.brand small{display:none}.brand-mark{width:34px;height:34px}.top-r{max-width:none;min-width:0}.chip,.code-chip{border-radius:8px;min-height:40px;max-width:220px;font-size:12px;box-shadow:none;background:var(--card);color:var(--sub);border:1px solid var(--line)}
.studio-switch{display:flex;align-items:center;justify-content:center;width:auto;gap:28px;margin:0;padding:0;background:none;border:0;border-radius:0}
.studio-switch .version-link{display:inline-flex;min-height:40px;border:0;padding:6px 0;border-radius:0;background:none;color:var(--sub);box-shadow:none;transform:none;text-decoration:none;position:relative}
.studio-switch .version-link .version-title{font-size:13px;font-weight:500}.studio-switch .version-link[aria-current=page]{color:var(--ink);background:none;box-shadow:none}.studio-switch .version-link[aria-current=page]:after{content:"";position:absolute;height:3px;width:18px;bottom:0;left:calc(50% - 9px);background:var(--acc);border-radius:3px}.version-desc,.version-arrow{display:none}.nav-library{color:var(--sub);font-size:13px;text-decoration:none;white-space:nowrap}.nav-library:hover{color:var(--acc)}
.hero.hero-redesign,.pro-mode .hero.hero-redesign{display:block;max-width:none;min-height:0;padding:48px 0 22px;margin:0;text-align:center;color:var(--ink);background:none}
.hero-copy{padding:0;min-width:0}.hero .eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;letter-spacing:2px;font-size:10px;color:var(--sub);margin:0 0 20px;font-weight:500}.eyebrow-star{color:var(--acc);font-size:17px}
.hero h1{font-size:clamp(38px,4.9vw,64px);line-height:1.18;letter-spacing:-2px;font-weight:750;color:var(--ink);margin:0 0 18px;text-wrap:balance}.hero h1 span{color:var(--acc);display:inline-block}.hero .hero-description{font-size:14px;line-height:1.9;max-width:none;margin:0;color:var(--sub)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:25px}.studio-cta{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:12px 22px;min-height:48px;border-radius:9px;background:var(--ink);color:var(--card);font-size:13px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}.studio-cta span{font-size:18px}.studio-cta:hover{background:var(--acc);transform:translateY(-2px)}.hero-secondary{display:inline-flex;gap:12px;align-items:center;min-height:44px;font-size:13px;color:var(--ink);text-decoration:none}.hero-secondary:hover{color:var(--acc)}
.hero .hero-meta{display:flex;justify-content:center;gap:20px;margin-top:17px;font-size:10px;color:var(--sub)}.hero-meta span+span{border:0;padding:0}
.showcase{position:relative;max-width:100%;height:280px;margin:38px 0 0;isolation:isolate;background:radial-gradient(ellipse at 50% 68%,#f1ded0 0%,#fafaf800 65%)}
.showcase-slide{position:absolute;display:block;width:34%;max-width:420px;text-decoration:none;filter:drop-shadow(0 14px 17px #3b2c2518);transition:transform .2s}.showcase-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:5px solid #fff;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #00000008}.showcase-slide>span{display:block;margin-top:12px;font-size:11px;color:var(--sub);letter-spacing:.5px}.slide-left{left:2%;top:27px;transform:rotate(-7deg);z-index:1}.slide-center{left:31%;top:0;width:38%;z-index:3}.slide-right{right:2%;top:27px;transform:rotate(7deg);z-index:1}.showcase-slide:hover{transform:translateY(-6px);z-index:4}.showcase-caption{position:absolute;bottom:0;left:0;right:0;font-size:11px;color:var(--sub);line-height:1.6}
.workflow{display:flex;justify-content:center;gap:40px;padding:18px 0;margin:0 0 8px;border-top:1px solid var(--line);border-bottom:0;font-size:12px;color:var(--sub)}.workflow li{gap:10px}.workflow li+li:before{display:none}.workflow b{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-size:10px;font-weight:600}
.step{margin-top:18px;padding:30px 32px;border-radius:16px;border:1px solid var(--line);box-shadow:0 6px 24px #252a2703;scroll-margin-top:18px}.step-h h2{font-size:19px}.step-h .hint{font-size:12px;color:var(--sub)}.step-h .num{width:28px;height:28px;border-radius:8px;font-size:12px;background:var(--acc-soft);color:var(--acc)}
textarea#notes{background:var(--field);border-radius:10px;min-height:184px;padding:18px 20px;line-height:1.9}.material-actions .btn-s{gap:7px;border-radius:7px}.ui-icon{width:17px;height:17px;flex:0 0 17px}.material-actions #btnFile{background:var(--ink);border-color:var(--ink);color:var(--card)}
#scene{gap:7px}#scene>button{border-radius:7px;min-height:40px;font-size:12px;padding:8px 14px}#scene>button.on{background:var(--ink);border-color:var(--ink)!important;color:var(--card)}
#themes.themes{gap:24px 17px}#themes .tcover{padding:3px;border-radius:11px;background:transparent}#themes .theme img{border-radius:7px;box-shadow:0 0 0 1px #0000000a}#themes .theme.on .tcover{background:var(--acc-soft);border-color:var(--acc)}#themes .tmeta{padding:9px 5px 0}#themes .theme .nm{font-size:13px}#themes .style-colors{font-size:11px;margin-top:3px}.color-option.on{border-color:var(--acc)}.tpreview{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--field);margin-top:28px}.pv-row{gap:12px}.pv-row img{border-radius:7px}.go{background:var(--ink);color:var(--card);min-height:54px;border-radius:9px}.go:hover{background:var(--acc)}.generation-note{font-size:12px}.site-footer{padding-top:20px}
.pro-mode{--bg:#17191d;--card:#21242a;--ink:#f2f0e9;--sub:#b4b7bd;--faint:#a4aab1;--line:#363940;--acc:#e5a57f;--acc-soft:#3d2f29;--field:#1b1e23}
.pro-mode .studio-switch .version-link,.pro-mode .studio-switch .version-link[aria-current=page]{background:none;color:var(--sub);border:0}.pro-mode .studio-switch .version-link[aria-current=page]{color:var(--ink)}.pro-mode .showcase{background:radial-gradient(ellipse at 50% 68%,#59433544 0%,#17191d00 65%)}.pro-mode .showcase-slide img{border-color:#3a3b3c;background:#3a3b3c}.pro-mode .studio-cta,.pro-mode .material-actions #btnFile,.pro-mode .go{background:var(--acc);border-color:var(--acc);color:#211c19}.pro-mode .studio-cta:hover,.pro-mode .go:hover{background:#f3b999}.pro-mode #scene>button.on{background:var(--acc);border-color:var(--acc)!important;color:#211c19}
@media(max-width:1020px){.wrap{padding:0 26px 36px}.top{gap:18px}.studio-switch{gap:20px}.hero.hero-redesign,.pro-mode .hero.hero-redesign{padding-top:36px}.hero h1{font-size:50px}.showcase{height:245px}.showcase-slide{width:35%}.slide-center{width:40%;left:30%}.step{padding:26px}.brand-name{font-size:22px}}
@media(max-width:800px){.top{gap:14px}.studio-switch{gap:15px}.studio-switch .version-link .version-title,.nav-library{font-size:12px}.chip,.code-chip{font-size:11px;max-width:170px;padding:8px 10px}.hero h1{font-size:44px}.showcase{height:220px;margin-top:30px}.step{padding:24px}.workflow{gap:28px}}
@media(max-width:600px){.wrap{padding:0 16px 28px}.top{grid-template-columns:1fr auto;min-height:0;padding:14px 0 0;gap:13px 10px}.brand-mark{width:30px;height:30px}.brand-name{font-size:21px}.brand-name>span{font-size:12px}.top-r{grid-column:2;grid-row:1;max-width:100%}.top>.code-chip{grid-column:2;grid-row:1}.studio-switch{grid-column:1/-1;grid-row:2;gap:28px;padding:0;justify-content:center;min-height:40px}.studio-switch .version-link{padding:4px 0 11px;min-height:40px}.studio-switch .version-link .version-title,.nav-library{font-size:12px}.nav-library{padding-bottom:7px}.hero.hero-redesign,.pro-mode .hero.hero-redesign{padding:30px 0 18px}.hero .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:15px}.hero h1{font-size:38px;line-height:1.22;letter-spacing:-1.4px;margin-bottom:14px}.hero h1 span{display:block}.hero .hero-description{font-size:13px;max-width:300px;margin:auto;line-height:1.8}.hero-actions{gap:20px;margin-top:20px}.studio-cta{min-height:44px;font-size:12px;padding:11px 18px;gap:18px}.hero-secondary{font-size:12px}.hero .hero-meta{gap:13px;font-size:9px;margin-top:14px}.showcase{height:152px;margin:27px -2px 0}.showcase-slide{width:40%;top:17px}.showcase-slide img{border-width:3px;border-radius:6px}.slide-left{left:0;top:17px;transform:rotate(-8deg)}.slide-center{width:54%;left:23%;top:0}.slide-right{right:0;transform:rotate(8deg)}.showcase-slide>span{display:none}.showcase-caption{bottom:0;font-size:9px;line-height:1.5}.workflow{gap:14px;margin-bottom:0;padding:15px 0 0;font-size:10px}.workflow li{gap:6px}.workflow b{width:21px;height:21px;font-size:9px}.step{padding:21px 16px;border-radius:12px;margin-top:17px}.step-h{gap:9px;margin-bottom:16px}.step-h h2{font-size:17px}.step-h .hint{display:none}textarea#notes{min-height:154px;padding:14px;font-size:16px;line-height:1.7}.material-actions .btn-s{gap:6px;font-size:12px;padding:9px 5px}.ui-icon{width:16px;height:16px;flex-basis:16px}#scene>button{font-size:12px;min-height:44px}#themes.themes{gap:17px 9px}#themes .theme .nm{font-size:12px}#themes .style-colors{font-size:11px}.tpreview{padding:12px;margin-top:21px}.pv-h{display:flex;flex-wrap:wrap;gap:6px;font-size:11px}.pv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pv-row img{width:100%;max-width:100%}.palette{margin:14px 0}.palette-label{font-size:12px}.color-option{width:42px;height:42px}.color-option span{width:27px;height:27px}.go{font-size:15px;min-height:52px}.generation-note{font-size:11px}}
@media(max-width:360px){.wrap{padding-left:12px;padding-right:12px}.hero h1{font-size:34px}.showcase{height:135px}.workflow{gap:9px;font-size:9px}.workflow li{gap:4px}.studio-switch{gap:23px}.hero .hero-meta{gap:9px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.showcase-slide,.studio-cta{transition:none}.showcase-slide:hover,.studio-cta:hover{transform:none}}

/* 用户确认：普通版电脑5列，Pro无模板入口与展示。 */
#themes.themes{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:800px){#themes.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#themes.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pro-mode .hero.hero-redesign{padding-bottom:40px}
@media(max-width:600px){.pro-mode .hero.hero-redesign{padding-bottom:26px}}