:root{--ink:#21072e;--cream:#f8eee6;--white:#fffdf9;--lilac:#d88af5;--yellow:#f4ef51;--green:#8acb76;--peach:#f2b49e;--line:rgba(33,7,46,.72);--pad:clamp(22px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans','Noto Sans SC',Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}.cursor-orb{position:fixed;width:18px;height:18px;border:1px solid var(--ink);border-radius:50%;pointer-events:none;z-index:120;transform:translate(-50%,-50%);mix-blend-mode:multiply;transition:width .2s,height .2s,background .2s}@media(max-width:800px){.cursor-orb{display:none}}
a{color:inherit;text-decoration:none}.ticker{height:30px;background:var(--lilac);overflow:hidden;border-bottom:1px solid var(--line);font:11px 'DM Mono','Noto Sans SC',monospace;white-space:nowrap}.ticker-track{height:100%;display:flex;align-items:center;width:max-content;animation:ticker 24s linear infinite;will-change:transform}.ticker span{margin:0 18px}.ticker b{font-size:13px}@keyframes ticker{to{transform:translateX(-50%)}}
.nav{position:absolute;top:30px;left:0;width:100%;height:68px;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);border-bottom:1px solid var(--line);background:rgba(248,238,230,.78);backdrop-filter:blur(12px)}.logo{font:800 27px 'Fraunces','Noto Serif SC',serif;letter-spacing:-1.8px}.logo span{font-style:italic}.nav nav{display:flex;gap:34px;font-size:14px}.nav nav a{text-decoration:underline;text-underline-offset:4px}.nav-start{justify-self:end;border:1px solid var(--ink);border-radius:999px;padding:10px 15px;font-size:13px}.nav-start span{font-size:17px;margin-left:8px}.page-block{position:relative;border-bottom:1px solid var(--line)}
.hero{min-height:calc(100vh - 30px);padding-top:98px;position:relative;display:grid;grid-template-columns:42% 58%;overflow:hidden}.hero-photo{grid-column:2;grid-row:1;position:relative;min-height:calc(100vh - 30px);background:linear-gradient(145deg,#b4e2dc 0%,#8ab8c8 35%,#d69c6c 73%,#f4c98d 100%);overflow:hidden}.hero-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:50px 50px;opacity:.45;transform:skewY(-7deg) scale(1.3)}.hero-glow{position:absolute;width:55vw;height:55vw;right:-15%;top:-10%;border-radius:50%;background:radial-gradient(circle,rgba(255,245,200,.82),rgba(216,138,245,.35) 40%,transparent 70%);filter:blur(10px)}.hero-word{position:absolute;left:-8%;bottom:5%;font:800 clamp(100px,18vw,280px)/.8 'Fraunces','Noto Serif SC',serif;letter-spacing:-10px;color:rgba(33,7,46,.82);white-space:nowrap}.hero-project{position:absolute;background:rgba(255,253,249,.92);border:1px solid var(--ink);box-shadow:8px 8px 0 rgba(33,7,46,.9);padding:18px 20px;display:flex;flex-direction:column;gap:7px;transform:rotate(-5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.hero-project:hover{transform:rotate(0) translateY(-8px)}.hero-project small,.mono{font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em}.hero-project strong{font:700 32px 'Fraunces','Noto Serif SC',serif}.hero-project em{font-style:normal;font-size:12px}.hero-project button{margin-top:8px;border:0;background:var(--ink);color:white;padding:8px 11px;font:11px 'DM Mono','Noto Sans SC',monospace}.project-a{left:8%;top:25%;width:230px}.project-b{right:10%;top:18%;width:190px;transform:rotate(6deg);background:var(--yellow)}.project-c{right:14%;bottom:15%;width:210px;transform:rotate(-3deg);background:var(--green)}.mini-bars{display:flex;gap:4px;height:40px;align-items:end}.mini-bars i{width:25%;background:var(--ink);display:block}.mini-bars i:nth-child(1){height:45%}.mini-bars i:nth-child(2){height:80%}.mini-bars i:nth-child(3){height:60%}.mini-bars i:nth-child(4){height:95%}.hero-sticker{position:absolute;right:5%;top:46%;width:88px;height:88px;border-radius:50%;background:var(--yellow);border:1px solid var(--ink);display:grid;place-items:center;text-align:center;font:700 11px/1.05 'DM Mono','Noto Sans SC',monospace;transform:rotate(12deg)}.hero-sticker span{font-size:8px}.hero-copy{grid-column:1;grid-row:1;align-self:end;padding:0 var(--pad) 76px;z-index:3}.hero-copy .mono{margin:0 0 18px}.hero h1{font:800 clamp(70px,8vw,130px)/.82 'Fraunces','Noto Serif SC',serif;letter-spacing:-5px;margin:0 0 26px;color:var(--ink)}.hero h1 i,.section-head i,.feature-copy i,.editor-head i,.story-copy i,.section-head i,.recipes i,.gallery i{font-style:normal;color:#9c43c8}.lead{font-size:18px;line-height:1.45;margin:0 0 28px;max-width:390px}.yellow-btn{display:inline-flex;align-items:center;gap:28px;background:var(--yellow);border:1px solid var(--ink);border-radius:999px;padding:14px 19px;font-weight:700;font-size:13px;box-shadow:4px 4px 0 var(--ink);transition:.25s}.yellow-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.yellow-btn span{font-size:19px}.hero-bottom{position:absolute;bottom:18px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font:10px 'DM Mono','Noto Sans SC',monospace;z-index:4}
.manifesto{padding:105px var(--pad) 110px;background:var(--cream);position:relative}.top-rule{border-top:1px solid var(--line);position:absolute;left:var(--pad);right:var(--pad);top:0}.manifesto h2{font:800 clamp(55px,7.5vw,125px)/.9 'Fraunces','Noto Serif SC',serif;letter-spacing:-4px;max-width:1150px;margin:0}.manifesto h2 strong{color:#9c43c8}.manifesto-note{max-width:330px;margin:70px 0 0 auto;font-size:17px;line-height:1.45}
.product-section{padding:90px 0 0;background:var(--white)}.section-head{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:30px;align-items:end}.section-head>span,.editor-head>span,.gallery-head>p,.story-copy .mono{font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em}.section-head h2{font:800 clamp(54px,6.5vw,105px)/.86 'Fraunces','Noto Serif SC',serif;letter-spacing:-3px;margin:0}.section-head p{font-size:15px;line-height:1.45;max-width:310px;margin:0 0 8px}.product-rail{display:flex;gap:0;margin-top:70px;overflow:auto;cursor:grab;scrollbar-width:none}.product-rail::-webkit-scrollbar,.gallery-rail::-webkit-scrollbar{display:none}.product-rail:active,.gallery-rail:active{cursor:grabbing}.demo-card{min-width:340px;flex:0 0 25%;border-top:1px solid var(--line);border-right:1px solid var(--line);background:var(--cream)}.demo-card:first-child{border-left:1px solid var(--line)}.card-screen{height:500px;margin:0;padding:28px;position:relative;overflow:hidden}.card-lilac .card-screen{background:var(--lilac)}.card-yellow .card-screen{background:var(--yellow)}.card-green .card-screen{background:var(--green)}.card-peach .card-screen{background:var(--peach)}.screen-top{font:10px 'DM Mono','Noto Sans SC',monospace}.screen-title{font:800 56px/.86 'Fraunces','Noto Serif SC',serif;letter-spacing:-2px;margin-top:120px}.screen-title b{color:#fff}.screen-chip{position:absolute;bottom:28px;left:28px;border:1px solid var(--ink);border-radius:999px;padding:7px 10px;font:10px 'DM Mono','Noto Sans SC',monospace;background:rgba(255,255,255,.4)}.screen-line{position:absolute;width:150px;height:150px;border:2px solid var(--ink);border-radius:50%;right:-30px;top:55px}.data-ring{position:absolute;right:28px;top:70px;width:130px;height:130px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:800 48px 'Fraunces','Noto Serif SC',serif}.data-ring span{font-size:16px}.stack-box{position:absolute;right:35px;top:70px;width:100px;height:210px;display:flex;flex-direction:column;gap:10px}.stack-box i{height:30px;border:2px solid var(--ink);background:rgba(255,255,255,.5);transform:skew(-20deg)}.stack-box i:nth-child(2){width:80%;margin-left:20%}.stack-box i:nth-child(3){width:60%;margin-left:40%}.ui-list{position:absolute;right:24px;top:90px;display:flex;flex-direction:column;gap:8px}.ui-list i{font:11px 'DM Mono','Noto Sans SC',monospace;border-bottom:1px solid var(--ink);padding:10px 0;width:160px;font-style:normal}.card-meta{padding:18px 20px 24px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.card-meta b{font:22px 'Fraunces','Noto Serif SC',serif}.card-meta span{font:10px 'DM Mono','Noto Sans SC',monospace;max-width:100px}
.feature-showcase{display:grid;grid-template-columns:43% 57%;min-height:760px;background:var(--cream)}.feature-copy{padding:110px var(--pad)}.feature-copy h2{font:800 clamp(58px,6vw,100px)/.86 'Fraunces','Noto Serif SC',serif;letter-spacing:-3px;margin:15px 0 65px}.accordion{border-top:1px solid var(--line)}.acc{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:10px;cursor:pointer;color:var(--ink)}.acc span{font:18px 'Fraunces','Noto Serif SC',serif}.acc b{font:22px 'DM Mono','Noto Sans SC',monospace;font-weight:400}.acc p{grid-column:1/-1;max-width:430px;display:none;margin:4px 0 0;font-size:13px;line-height:1.5}.acc.active p{display:block}.feature-visual{position:relative;background:var(--lilac);display:grid;place-items:center;overflow:hidden}.browser-frame{width:min(78%,720px);border:2px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:14px 14px 0 rgba(33,7,46,.9);transform:rotate(-2deg);transition:transform .5s}.browser-frame:hover{transform:rotate(0) translateY(-8px)}.browser-bar{height:36px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 12px}.browser-bar i{width:8px;height:8px;border:1px solid var(--ink);border-radius:50%}.browser-bar span{margin:auto;font:9px 'DM Mono','Noto Sans SC',monospace}.browser-body{padding:25px}.fake-nav{display:flex;justify-content:space-between;font-size:10px}.fake-nav b{font:18px 'Fraunces','Noto Serif SC',serif}.fake-hero{min-height:370px;padding:75px 20px 20px;background:linear-gradient(145deg,var(--yellow),#d88af5);margin-top:20px;position:relative}.fake-hero small{font:9px 'DM Mono','Noto Sans SC',monospace}.fake-hero h3{font:800 64px/.86 'Fraunces','Noto Serif SC',serif;letter-spacing:-3px;margin:30px 0}.fake-button{display:inline-block;border:1px solid var(--ink);padding:10px 14px;background:var(--cream);font:11px 'DM Mono','Noto Sans SC',monospace}.fake-stat{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:12px;align-items:end;padding:18px 0}.fake-stat b{font:800 36px 'Fraunces','Noto Serif SC',serif}.fake-stat span{font:9px 'DM Mono','Noto Sans SC',monospace}.visual-tag{position:absolute;right:25px;bottom:28px;border:1px solid var(--ink);padding:8px 12px;background:var(--yellow);font:10px 'DM Mono','Noto Sans SC',monospace;transform:rotate(5deg)}

.editor-section{background:var(--white);padding:100px var(--pad)}.editor-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.editor-head h2{font:800 clamp(60px,7vw,112px)/.84 'Fraunces','Noto Serif SC',serif;letter-spacing:-4px;margin:0}.editor-stage{margin-top:70px;min-height:620px;border:1px solid var(--line);display:grid;grid-template-columns:190px 1fr 280px;background:#e9e4dc}.editor-sidebar{border-right:1px solid var(--line);background:var(--ink);color:var(--cream);padding:18px;display:flex;flex-direction:column;gap:8px}.side-brand{font:800 28px 'Fraunces','Noto Serif SC',serif;margin-bottom:35px}.side-item{padding:11px 10px;font:11px 'DM Mono','Noto Sans SC',monospace;border:1px solid transparent}.side-item.active{background:var(--yellow);color:var(--ink);border-color:var(--ink)}.side-bottom{margin-top:auto;background:var(--lilac);color:var(--ink);padding:12px;font:11px 'DM Mono','Noto Sans SC',monospace}.editor-canvas{display:grid;place-items:center;position:relative;background:linear-gradient(135deg,#e8e2d9,#f6f2eb)}.canvas-top{position:absolute;top:15px;left:20px;right:20px;display:flex;justify-content:space-between;font:10px 'DM Mono','Noto Sans SC',monospace}.canvas-top b{font-weight:400;background:var(--ink);color:white;padding:6px 9px}.editor-phone{width:280px;height:535px;background:#171717;border:2px solid var(--ink);border-radius:38px;padding:7px;box-shadow:10px 10px 0 rgba(33,7,46,.15);position:relative}.island{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:99px;background:#050505}.phone-content{height:100%;border-radius:31px;background:linear-gradient(150deg,var(--lilac),var(--yellow));padding:60px 20px 20px;overflow:hidden}.phone-content small{font:8px 'DM Mono','Noto Sans SC',monospace}.phone-content h3{font:800 40px/.86 'Fraunces','Noto Serif SC',serif;letter-spacing:-2px;margin:80px 0 24px}.phone-content h3 em{color:#9c43c8;font-style:normal}.phone-card{background:rgba(255,253,249,.82);border:1px solid var(--ink);padding:14px;display:flex;flex-direction:column;gap:6px}.phone-card b{font:18px 'Fraunces','Noto Serif SC',serif}.phone-card span{font:9px 'DM Mono','Noto Sans SC',monospace}.phone-button{margin-top:15px;border:1px solid var(--ink);background:var(--ink);color:white;padding:11px;text-align:center;font:10px 'DM Mono','Noto Sans SC',monospace}.editor-inspector{background:var(--white);border-left:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}.editor-inspector small{font:10px 'DM Mono','Noto Sans SC',monospace;margin-bottom:18px}.editor-inspector label{font:9px 'DM Mono','Noto Sans SC',monospace;opacity:.65;margin-top:8px}.editor-inspector>div{border:1px solid var(--line);padding:11px;font-size:12px;background:var(--cream)}.swatches{display:flex!important;gap:6px;background:transparent!important;border:0!important;padding:0!important}.swatches i{width:30px;height:30px;border:1px solid var(--ink);display:block}.swatches i:nth-child(1){background:var(--lilac)}.swatches i:nth-child(2){background:var(--yellow)}.swatches i:nth-child(3){background:var(--green)}.swatches i:nth-child(4){background:var(--ink)}
.testimonial{min-height:570px;display:grid;place-items:center;text-align:center;padding:100px var(--pad);background:var(--cream);position:relative}.quote-mark{position:absolute;top:55px;left:var(--pad);font:120px/.8 'Fraunces','Noto Serif SC',serif;color:var(--lilac)}.quote{font:800 clamp(48px,6.2vw,94px)/.88 'Fraunces','Noto Serif SC',serif;letter-spacing:-3px;max-width:1050px}.quote-by{margin-top:45px;font:11px 'DM Mono','Noto Sans SC',monospace}.dots{display:flex;justify-content:center;gap:7px;margin-top:18px}.qdot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer}.qdot.active{background:var(--ink)}
.marquee-section{height:115px;display:flex;align-items:center;overflow:hidden;background:var(--yellow);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.marquee-line{white-space:nowrap;font:800 48px 'Fraunces','Noto Serif SC',serif;letter-spacing:-1px;animation:marquee 20s linear infinite}.marquee-line b{color:#9c43c8;font-size:28px;margin:0 25px}@keyframes marquee{to{transform:translateX(-35%)}}
.story-section{display:grid;grid-template-columns:55% 45%;min-height:760px;background:var(--peach)}.story-photo{padding:60px;display:grid;place-items:center}.story-art{width:100%;height:100%;min-height:580px;border:1px solid var(--ink);border-radius:25px;background:radial-gradient(circle at 35% 30%,#fff1a2 0 10%,transparent 11%),linear-gradient(135deg,#c47cf0,#8b42b2 55%,#29102f);position:relative;overflow:hidden;display:grid;place-items:center;transform:rotate(-2deg)}.story-circle{width:min(35vw,300px);height:min(35vw,300px);border-radius:50%;border:3px solid var(--ink);background:var(--yellow);display:grid;place-items:center;font:800 150px 'Fraunces','Noto Serif SC',serif;box-shadow:20px 20px 0 var(--ink);transition:transform .5s}.story-art:hover .story-circle{transform:translateY(-15px) rotate(8deg)}.story-label{position:absolute;left:30px;bottom:28px;background:var(--white);border:1px solid var(--ink);padding:13px;font:11px/1.3 'DM Mono','Noto Sans SC',monospace}.story-spark{position:absolute;right:30px;top:25px;color:var(--yellow);font-size:50px}.story-copy{padding:100px var(--pad);display:flex;flex-direction:column;justify-content:center}.story-copy h2{font:800 clamp(58px,6vw,95px)/.87 'Fraunces','Noto Serif SC',serif;letter-spacing:-3px;margin:20px 0 35px}.story-copy>p:not(.mono){font-size:17px;line-height:1.5;max-width:480px;margin:0 0 35px}.small{align-self:flex-start}
.recipes{padding:100px 0 0;background:var(--white)}.centered{display:block;text-align:center}.centered h2{margin-top:15px}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px}.recipe-grid article{border-top:1px solid var(--line);border-right:1px solid var(--line);padding:0 22px 30px}.recipe-grid article:first-child{border-left:1px solid var(--line)}.recipe-art{height:420px;margin:0 -22px 20px;position:relative;display:flex;align-items:end;padding:22px;background:linear-gradient(145deg,#a8e4ea,#7ab7d8)}.recipe-art>span{position:absolute;top:18px;left:18px;font:10px 'DM Mono','Noto Sans SC',monospace}.recipe-art>b{font:800 70px 'Fraunces','Noto Serif SC',serif;color:var(--white);text-shadow:3px 3px 0 var(--ink)}.ra-b{background:linear-gradient(145deg,#e2a15d,#b35f32)}.ra-c{background:linear-gradient(145deg,#e8a5bc,#bf67ad)}.recipe-grid small{font:9px 'DM Mono','Noto Sans SC',monospace}.recipe-grid h3{font:28px 'Fraunces','Noto Serif SC',serif;margin:8px 0}
.gallery{padding:100px 0 35px;background:var(--cream);overflow:hidden}.gallery-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:0 var(--pad);align-items:end}.gallery-head h2{font:800 clamp(60px,7vw,110px)/.84 'Fraunces','Noto Serif SC',serif;letter-spacing:-4px;margin:0}.gallery-head p{max-width:340px;font-size:14px;line-height:1.5;margin:0}.gallery-rail{display:flex;gap:18px;overflow:auto;padding:70px var(--pad) 30px;cursor:grab;scrollbar-width:none}.gallery-card{min-width:300px;height:410px;border:1px solid var(--ink);border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:end;font:11px 'DM Mono','Noto Sans SC',monospace;transition:transform .35s}.gallery-card:hover{transform:translateY(-10px) rotate(1deg)}.gallery-card>b{font:800 70px 'Fraunces','Noto Serif SC',serif;line-height:.85;margin-top:10px}.ga-a{background:linear-gradient(150deg,#f4ef51,#d9c940)}.ga-b{background:linear-gradient(150deg,#d88af5,#8e49b8)}.ga-c{background:linear-gradient(150deg,#8acb76,#4e8250)}.ga-d{background:linear-gradient(150deg,#8fd7df,#377c89)}.ga-e{background:linear-gradient(150deg,#f2b49e,#bd6d57)}.socials{display:flex;justify-content:center;gap:15px}.socials a{width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}
.footer{background:var(--cream);padding:85px var(--pad) 20px}.footer-top{display:grid;grid-template-columns:0.9fr 1.1fr 1fr;gap:22px 40px}.footer-top h3{grid-column:1/-1;font:800 clamp(52px,6.8vw,105px)/.92 'Fraunces','Noto Serif SC',serif;letter-spacing:-4px;margin:0 0 clamp(26px,5svh,44px)}.footer-top h3 i{font-style:normal;color:#9c43c8}.footer-links{display:flex;align-items:flex-end;gap:clamp(18px,2.2vw,32px);font:13px 'DM Mono','Noto Sans SC',monospace;padding-bottom:clamp(8px,2svh,22px);white-space:nowrap;flex:none;letter-spacing:0}
.footer-links a{transition:.18s}
.footer-links a:hover{color:#e8568f;text-underline-offset:7px}.footer-links a{text-decoration:underline;text-underline-offset:4px}.footer-brand{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3vw,60px);margin-top:clamp(40px,9svh,80px);white-space:nowrap;overflow:hidden}
.footer-big{font:800 clamp(76px,12.5vw,190px)/.82 'Fraunces','Noto Serif SC',serif;letter-spacing:-12px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:45px;font:9px 'DM Mono','Noto Sans SC',monospace}

@media(max-width:1000px){.nav{grid-template-columns:1fr auto}.nav nav{display:none}.hero{grid-template-columns:1fr;min-height:900px}.hero-photo{grid-column:1;grid-row:1;min-height:900px;opacity:.86}.hero-copy{grid-column:1;grid-row:1;align-self:end;padding-bottom:90px;color:var(--ink)}.hero-copy .mono,.hero-copy .lead{max-width:420px}.hero-bottom{color:var(--ink)}.section-head{grid-template-columns:1fr 1fr}.section-head p{grid-column:2}.product-rail{padding-right:var(--pad)}.demo-card{min-width:300px;flex-basis:38%}.feature-showcase,.story-section{grid-template-columns:1fr}.feature-visual{min-height:680px}.editor-stage{grid-template-columns:150px 1fr}.editor-inspector{display:none}.editor-phone{width:250px}.recipe-grid{grid-template-columns:1fr}.recipe-grid article{border-left:1px solid var(--line)}.footer-top{grid-template-columns:1fr}}
@media(max-width:640px){:root{--pad:18px}.nav{padding:0 18px;height:60px}.logo{font-size:23px}.nav-start{font-size:11px;padding:8px 11px}.hero{padding-top:90px;min-height:790px}.hero-photo{min-height:790px}.hero-copy{padding:0 18px 70px}.hero h1{font-size:70px;letter-spacing:-3px}.hero-project{transform:scale(.75);transform-origin:center}.project-a{left:-2%;top:20%}.project-b{right:-2%;top:13%}.project-c{right:3%;bottom:22%}.hero-word{font-size:100px}.hero-bottom{left:18px;right:18px}.manifesto{padding:80px 18px}.manifesto h2{font-size:55px}.manifesto-note{margin-top:50px}.section-head{grid-template-columns:1fr;padding:0 18px}.section-head p{grid-column:auto}.product-section{padding-top:75px}.demo-card{min-width:82vw}.card-screen{height:450px}.feature-copy{padding:75px 18px}.feature-copy h2{font-size:58px}.feature-visual{min-height:520px}.browser-frame{width:88%}.fake-hero{min-height:280px}.fake-hero h3{font-size:45px}.type-break{min-height:400px}.editor-section{padding:75px 18px}.editor-head{display:block}.editor-head h2{margin-top:18px;font-size:58px}.editor-stage{grid-template-columns:80px 1fr;min-height:580px}.editor-sidebar{padding:12px 8px}.side-brand{font-size:22px;margin-bottom:20px}.side-item{font-size:9px;padding:9px 5px;text-align:center}.editor-phone{width:220px;height:465px}.phone-content h3{font-size:34px;margin-top:65px}.testimonial{min-height:500px}.quote{font-size:48px}.story-photo{padding:25px 18px}.story-art{min-height:450px}.story-circle{width:220px;height:220px;font-size:110px}.story-copy{padding:75px 18px}.story-copy h2{font-size:58px}.recipe-art{height:330px}.gallery-head{grid-template-columns:1fr;padding:0 18px}.gallery-rail{padding-left:18px;padding-right:18px}.gallery-card{min-width:260px;height:350px}.footer{padding:75px 18px 18px}.footer-top h3{font-size:54px}.footer-links{grid-template-columns:1fr}.footer-big{font-size:64px;letter-spacing:-5px}.footer-bottom{flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track,.marquee-line{animation:none}.cursor-orb{display:none}}
/* ============================================================
   V4.2 · 整屏粘滞切换布局（参照 vibebevvy 的全屏吸附手感）
   每一屏 = 恰好一个视口高度；切换需要一次明确的滚动手势
   ============================================================ */
html{scroll-behavior:smooth}
.ticker{position:fixed;top:0;left:0;right:0;z-index:90;background:rgba(216,138,245,.94)}
.nav{position:fixed;top:30px;left:0;right:0;z-index:90;background:rgba(248,238,230,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
main{position:relative}
.page-block{height:100vh;height:100svh;min-height:0;overflow:hidden}

/* 01 hero */
.hero{height:100vh;height:100svh;min-height:0;padding-top:98px}
.hero-photo{min-height:0}
.hero-copy{align-self:end;padding-bottom:clamp(60px,8svh,88px)}
.hero-bottom{bottom:clamp(14px,3svh,22px)}

/* 02 problem：痛点屏 */
.problem{display:flex;flex-direction:column;padding:clamp(100px,14svh,118px) var(--pad) clamp(36px,6svh,60px)}
.problem .top-rule{top:98px}
.problem-head span.mono{font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em}
.problem-head h2{font:800 clamp(50px,6.5vw,110px)/.88 'Fraunces','Noto Serif SC',serif;letter-spacing:-4px;margin:18px 0 0;max-width:1150px}
.problem-head h2 strong{color:#9c43c8}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);flex:1;align-content:center;padding:clamp(30px,6svh,60px) 0}
.pain-card{border:1px solid var(--ink);background:var(--white);padding:clamp(24px,3.5svh,36px);display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 rgba(33,7,46,.85);transform:rotate(-1deg);transition:transform .35s}
.pain-card:nth-child(2){background:var(--yellow);transform:rotate(1deg) translateY(12px)}
.pain-card:nth-child(3){transform:rotate(-1.5deg) translateY(22px)}
.pain-card:hover{transform:rotate(0) translateY(0)}
.pain-no{font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em;opacity:.72}
.pain-card h3{font:700 clamp(30px,3.2vw,46px)/1 'Fraunces','Noto Serif SC',serif;margin:6px 0 0}
.pain-card p{font-size:14px;line-height:1.55;margin:0}
.problem-pivot{border-top:1px solid var(--line);padding:clamp(18px,3.5svh,32px) 0 0;font-size:clamp(16px,1.7vw,21px);line-height:1.5;margin:0}
.problem-pivot strong{color:#9c43c8}

/* 03 products：卡片拉伸填满整屏 */
.product-section{display:flex;flex-direction:column;padding-top:clamp(96px,13svh,112px)}
.product-rail{margin-top:clamp(28px,6svh,56px);flex:1;align-items:stretch}
.demo-card{display:flex;flex-direction:column;min-height:0}
.card-screen{flex:1;min-height:0;height:auto}
.card-meta{margin-top:auto}

/* 04 features */
.feature-copy{padding:clamp(100px,13svh,116px) var(--pad) clamp(40px,8svh,80px);display:flex;flex-direction:column;justify-content:center}
.feature-copy h2{margin-bottom:clamp(30px,7svh,60px)}
.browser-frame{width:min(76%,680px)}
.fake-hero{min-height:min(370px,40svh)}
.fake-hero h3{font-size:clamp(42px,4.6vw,64px)}

/* 05 type break（已移除） */

/* 06 editor */
.editor-section{padding:clamp(96px,13svh,112px) var(--pad) clamp(40px,6svh,60px);display:flex;flex-direction:column}
.editor-head{flex:none}
.editor-stage{margin-top:clamp(34px,7svh,64px);min-height:0;flex:1}
.editor-phone{height:min(535px,60svh)}

/* 07 testimonial：引言 + 数据 + 署名填满 */
.testimonial{padding:clamp(90px,12svh,110px) var(--pad);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(32px,7svh,64px)}
.testimonial .quote-mark{top:clamp(90px,12svh,110px);left:var(--pad)}
.quote{max-width:1100px}
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);width:min(880px,88%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,5svh,46px) 0}
.proof-stats b{display:block;font:800 clamp(42px,5vw,78px)/.9 'Fraunces','Noto Serif SC',serif;letter-spacing:-2px}
.proof-stats span{display:block;margin-top:8px;font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.06em;opacity:.75}
.quote-by{margin-top:0}

/* 08 marquee（已移除） */

/* 09 story */
.story-section{height:100vh;height:100svh;min-height:0}
.story-photo{padding:clamp(44px,7svh,64px)}
.story-art{min-height:0;height:100%}
.story-circle{width:min(300px,35vw,36svh);height:min(300px,35vw,36svh);font-size:clamp(90px,10vw,150px)}
.story-copy{padding:clamp(84px,11svh,104px) var(--pad);justify-content:center}
.story-list{list-style:none;margin:0 0 38px;padding:0;border-top:1px solid var(--line);max-width:480px}
.story-list li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.story-list b{font:16px 'Fraunces','Noto Serif SC',serif}
.story-list span{font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.68;text-align:right}

/* 10 recipes：色块拉伸填满 */
.recipes{padding:clamp(96px,13svh,112px) 0 0;display:flex;flex-direction:column}
.recipe-grid{margin-top:clamp(28px,6svh,56px);flex:1}
.recipe-grid article{display:flex;flex-direction:column;min-height:0}
.recipe-art{flex:1;min-height:0;height:auto}

/* 11 gallery：卡片拉伸填满 */
.gallery{padding:clamp(90px,12svh,108px) 0 clamp(20px,4svh,35px);display:flex;flex-direction:column}
.gallery-rail{margin-top:0;padding-top:clamp(30px,6svh,56px);flex:1;align-items:stretch}
.gallery-card{height:auto;min-height:0;flex:1}
.socials{margin-top:clamp(14px,3svh,24px)}

/* 12 footer */
.footer{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(98px,14svh,120px) var(--pad) clamp(16px,3svh,20px)}
.footer-top{flex:1;align-content:center}
.footer-top h3{margin-bottom:clamp(26px,5svh,44px);font-size:clamp(52px,6.8vw,105px);line-height:.92}
.footer-brand{font-size:clamp(90px,16vw,230px);letter-spacing:-10px;margin-top:clamp(20px,4svh,40px);line-height:.8}
.footer-bottom{margin-top:clamp(20px,4svh,40px)}

/* 右侧章节导航 */
.snap-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.snap-dot{position:relative;width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer;transition:background .25s,transform .25s}
.snap-dot:hover{background:rgba(33,7,46,.35)}
.snap-dot.active{background:var(--ink);transform:scale(1.35)}
.snap-dot span{position:absolute;right:16px;top:50%;transform:translateY(-50%) translateX(4px);white-space:nowrap;font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.06em;background:var(--cream);border:1px solid var(--ink);padding:3px 7px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.snap-dot:hover span,.snap-dot.active span{opacity:1;transform:translateY(-50%) translateX(0)}

/* 平板/手机：回到自然滚动，仅保留最小屏高 */
@media(max-width:1000px){
  .page-block{height:auto;min-height:100svh;overflow:visible}
  .hero{height:auto;min-height:100svh}
  .type-break,.marquee-section{height:auto;min-height:60svh}
  .feature-showcase,.story-section{height:auto}
  .story-art{min-height:min(450px,60svh)}
  .editor-stage{min-height:520px}
  .footer-big{font-size:clamp(52px,12vw,96px)}
  .snap-nav{display:none}
}
/* ============================================================
   V4.3 · 多语言 ticker / 跑马带 / 整屏入场动画 / 第二层叙事
   ============================================================ */

/* 多语言顶栏：12 种语言同义短语，无缝无限滚动 */
.ticker-track{animation-duration:38s}

/* 模板页金色跑马带（3 段相同 → -33.333% 无缝循环） */
.marquee-band{flex:none;margin-top:clamp(24px,4svh,44px);height:clamp(46px,6svh,58px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--yellow);overflow:hidden;display:flex;align-items:center}
.marquee-track{display:flex;align-items:center;width:max-content;white-space:nowrap;font:800 clamp(24px,2.4vw,34px)/1 'Fraunces','Noto Serif SC',serif;letter-spacing:-.5px;animation:bandmarquee 26s linear infinite;will-change:transform}
.marquee-track span{margin:0 clamp(20px,2.4vw,40px)}
.marquee-track b{font-size:clamp(14px,1.4vw,22px);color:#9c43c8}
@keyframes bandmarquee{to{transform:translateX(-33.3333%)}}

/* 整屏入场动画：激活屏内容依次淡入上浮（JS 设置错落 delay） */
.js-ready .screen-enter{opacity:0;transform:translateY(30px)}
/* boot 结束前（html:not(.booted)）首屏结构元素（文案/背景板/大字/徽章）保持自然就位状态，
   在有机擦除逐渐露出时就已经可见；不播放 popUp、无过渡——否则 load 时会在遮罩下先播完一遍，
   booted 后动画名变化强制重播。
   五张 drift 项目卡片例外：擦除过程中必须保持隐藏 + 预置 bootPop 的初始位形（opacity 0 + 位移），
   擦除完成的瞬间 bootPop 从同一状态弹入，避免"透过缝隙看到卡片已就位 → 擦除完又消失 → 再弹"的跳变 */
html:not(.booted) .hero .screen-enter{opacity:1;transform:none;animation:none;transition:none}
html:not(.booted) .hero .hero-drift{opacity:0;transform:translateY(44px) scale(.96);animation:none;transition:none}
html:not(.booted) .hero .hero-sticker{opacity:0;transform:translateY(44px) scale(.96);animation:none;transition:none}
html:not(.booted) .hero .hero-word{opacity:0;transform:translateY(52px) scale(.95);animation:none;transition:none}
html:not(.booted) .hero .hero-copy .yellow-btn{opacity:0;transform:translateY(44px) scale(.96);animation:none;transition:none}
html:not(.booted) .hero .hero-bottom{opacity:0;transform:translateY(44px) scale(.96);animation:none;transition:none}
.page-block.active .screen-enter{opacity:1;transform:none}
.page-block.active .hero-copy,.page-block.active .hero-photo,.page-block.active .hero-bottom{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}

/* 第二层叙事：右侧叙事面板 */
.layer-backdrop{position:fixed;inset:0;z-index:94;background:rgba(33,7,46,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .5s ease}
.layer-backdrop.show{opacity:1;pointer-events:auto}
.layer-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(620px,94vw);z-index:95;background:var(--cream);border-left:1px solid var(--ink);transform:translateX(103%);transition:transform .6s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(33,7,46,.22)}
.layer-panel.open{transform:none}
html.layer-open{overflow:hidden}
.layer-head{flex:none;padding:22px clamp(20px,2.4vw,34px) 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px}
.layer-id{display:flex;flex-direction:column;gap:6px}
.layer-id .mono{font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.12em;color:#9c43c8}
.layer-id b{font:700 clamp(20px,2vw,26px) 'Fraunces','Noto Serif SC',serif}
.layer-close{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);background:var(--yellow);font:16px 'DM Mono','Noto Sans SC',monospace;cursor:pointer;display:grid;place-items:center;transition:transform .25s}
.layer-close:hover{transform:rotate(90deg)}
.layer-body{flex:1;overflow-y:auto;padding:clamp(26px,4svh,44px) clamp(20px,2.4vw,34px) 56px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.layer-body h3{font:800 clamp(30px,3.2vw,44px)/1.05 'Fraunces','Noto Serif SC',serif;letter-spacing:-1px;margin:0 0 14px}
.layer-lead{font-size:15.5px;line-height:1.6;margin:0 0 30px;max-width:46ch}
.layer-block{border-top:1px solid var(--line);padding:18px 0}
.layer-block b{display:block;font:16px 'Fraunces','Noto Serif SC',serif;margin-bottom:6px}
.layer-block p{font-size:13.5px;line-height:1.62;margin:0;opacity:.85}
.layer-foot{flex:none;padding:13px clamp(20px,2.4vw,34px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.06em;opacity:.75}
.layer-panel.open .layer-body>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.layer-panel.open .layer-body>*:nth-child(2){animation-delay:.08s}
.layer-panel.open .layer-body>*:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* snap-nav 底部的 L2 入口 */
.snap-nav::after{content:"";width:1px;height:22px;background:var(--line);margin:2px auto 0}
.layer-nav{position:relative;width:22px;height:22px;border:1px solid var(--ink);border-radius:50%;background:var(--yellow);font:800 9px 'DM Mono','Noto Sans SC',monospace;display:grid;place-items:center;cursor:pointer;transition:transform .25s}
.layer-nav:hover{transform:scale(1.25)}
.layer-nav span{position:absolute;right:28px;top:50%;transform:translateY(-50%) translateX(4px);white-space:nowrap;font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.06em;background:var(--cream);border:1px solid var(--ink);padding:3px 7px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.layer-nav:hover span{opacity:1;transform:translateY(-50%) translateX(0)}

@media(max-width:640px){
  .layer-panel{width:100vw;border-left:0}
  .layer-foot span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  .js-ready .screen-enter{opacity:1;transform:none;transition:none}
  .layer-panel,.layer-backdrop{transition:none}
  .layer-panel.open .layer-body>*{animation:none}
  .marquee-track{animation:none}
}
/* ============================================================
   V4.4 · 排版修正：大字行高 / 编辑器工作台充实 / 色块几何 UI
   ============================================================ */

/* 1) 大字行高 1.1：修复 Fraunces 800 两行字行框重叠（1.04 仍显局促，1.1 留出从容字距） */
.hero h1{line-height:1.1}
.section-head h2{line-height:1.1}
.feature-copy h2{line-height:1.1}
.editor-head h2{line-height:1.1}
.problem-head h2{line-height:1.1}
.story-copy h2{line-height:1.1}
.gallery-head h2{line-height:1.1}
.footer-top h3{line-height:1.1}

/* 2) 编辑器头：标签在上、标题通栏左对齐（消除中部空白 + 行重叠） */
.editor-head{display:block}
.editor-head>span{display:inline-block;margin-bottom:16px}
.editor-head h2{margin:0;max-width:1180px}

/* 3) 编辑器工作台：三栏加宽 + 侧栏/属性充实 */
.editor-stage{grid-template-columns:200px 1fr 300px;grid-template-rows:minmax(0,1fr)}
.editor-sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,253,249,.35) transparent;min-height:0}
.editor-inspector{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;min-height:0}
.editor-canvas{min-height:0}
.side-sec{font:8px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.14em;opacity:.55;margin-top:16px;border-top:1px solid rgba(255,253,249,.16);padding-top:12px}
.side-sec:first-of-type{border-top:0;padding-top:0;margin-top:0}
.side-proj{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,253,249,.3);padding:10px;font:11px 'DM Mono','Noto Sans SC',monospace}
.side-proj b{font-weight:400;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-proj em{font-style:normal;font-size:10px;opacity:.7}
.side-item{display:flex;justify-content:space-between;align-items:center;padding:10px;font:11px 'DM Mono','Noto Sans SC',monospace;border:1px solid transparent}
.side-item i{font-style:normal;opacity:.45;font-size:9px}
.side-add{border:1px dashed rgba(255,253,249,.4);padding:10px;font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.85;text-align:center}
.side-pair{display:flex;gap:6px}
.side-pair span{flex:1;border:1px solid rgba(255,253,249,.3);padding:9px 4px;text-align:center;font:9px 'DM Mono','Noto Sans SC',monospace;opacity:.9}
.side-bottom{margin-top:auto;background:var(--lilac);color:var(--ink);padding:12px;font:11px 'DM Mono','Noto Sans SC',monospace;text-align:center}

.insp-tabs{display:flex!important;gap:6px;background:transparent!important;border:0!important;padding:0!important;margin-bottom:14px}
.insp-tabs b{flex:1;border:1px solid var(--line);background:var(--cream);padding:9px;text-align:center;font:10px 'DM Mono','Noto Sans SC',monospace;font-weight:400}
.insp-tabs b.on{background:var(--yellow);border-color:var(--ink)}
.editor-inspector small{font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.6;letter-spacing:.1em;margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.editor-inspector small:first-of-type{border-top:0;padding-top:0;margin-top:0}
.swatch-row{display:flex!important;align-items:center;gap:10px}
.swatch-row i{width:24px;height:24px;border:1px solid var(--ink);background:#171717;flex:none}
.swatch-row span{font:10px 'DM Mono','Noto Sans SC',monospace}
.insp-ops{display:flex!important;gap:6px;background:transparent!important;border:0!important;padding:0!important}
.insp-ops span{flex:1;border:1px solid var(--line);background:var(--cream);padding:9px;text-align:center;font:9px 'DM Mono','Noto Sans SC',monospace}

/* 4) 配方屏：三色块几何 UI */
.rq-geo{position:absolute;right:clamp(18px,2.2vw,32px);top:clamp(44px,9svh,80px);display:flex;flex-direction:column;align-items:flex-end;gap:18px;z-index:2}
.rq-alert{width:86px;height:86px;border:2px solid var(--ink);border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:5px 5px 0 rgba(33,7,46,.55);transform:rotate(-7deg)}
.rq-alert span{font:800 46px 'Fraunces','Noto Serif SC',serif;color:#c23b3b;line-height:1}
.rq-lines{width:150px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rq-lines i{height:9px;border:1px solid var(--ink);background:rgba(255,255,255,.55)}
.rq-lines i:nth-child(1){width:62%}
.rq-lines i:nth-child(2){width:100%}
.rq-lines i:nth-child(3){width:82%;border-style:dashed;background:transparent}
.rq-flow{align-items:flex-start}
.rq-step{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);background:rgba(255,255,255,.55);padding:12px 14px;box-shadow:5px 5px 0 rgba(33,7,46,.55);transform:rotate(2deg)}
.rq-step b{width:34px;height:34px;border:1px solid var(--ink);background:var(--white);display:grid;place-items:center;font:800 15px 'Fraunces','Noto Serif SC',serif;color:var(--ink);text-shadow:none;line-height:1}
.rq-step em{font:15px 'DM Mono','Noto Sans SC',monospace;font-style:normal}
.rq-toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--ink);background:var(--white);padding:9px 12px;box-shadow:4px 4px 0 rgba(33,7,46,.5);font:9px 'DM Mono','Noto Sans SC',monospace;transform:rotate(-2deg)}
.rq-toggle b{width:24px;height:24px;border-radius:50%;background:var(--ink)}
.rq-result{align-items:flex-end}
.rq-bars{display:flex;align-items:end;gap:9px;height:118px;padding:0 14px;border-bottom:2px solid var(--ink)}
.rq-bars i{width:28px;background:var(--white);border:1px solid var(--ink);box-shadow:3px 3px 0 rgba(33,7,46,.5)}
.rq-bars i:nth-child(1){height:34%}
.rq-bars i:nth-child(2){height:54%}
.rq-bars i:nth-child(3){height:74%}
.rq-bars i:nth-child(4){height:100%;background:var(--yellow)}
.rq-check{width:54px;height:54px;border:2px solid var(--ink);border-radius:50%;background:var(--green);display:grid;place-items:center;font:24px 'DM Mono','Noto Sans SC',monospace;box-shadow:4px 4px 0 rgba(33,7,46,.5);transform:rotate(8deg);margin-top:16px}

/* 5) 画廊屏：五张场景卡几何 UI */
.gallery-card{position:relative;min-width:0}
.gallery-card>b{position:relative;z-index:2}
.gc-geo{position:absolute;top:clamp(30px,7svh,64px);right:clamp(16px,2vw,28px);z-index:1}
.gc-podium{display:flex;align-items:end;gap:6px}
.gc-podium b{width:44px;border:2px solid var(--ink);background:rgba(255,255,255,.6);display:grid;place-items:end center;padding-bottom:7px;font:800 17px 'Fraunces','Noto Serif SC',serif;line-height:1;color:var(--ink);box-shadow:3px 3px 0 rgba(33,7,46,.5)}
.gc-podium b:nth-child(1){height:76px;background:var(--yellow)}
.gc-podium b:nth-child(2){height:54px}
.gc-podium b:nth-child(3){height:34px;background:var(--cream)}
.gc-rocket{width:88px;height:118px;position:relative}
.gc-rocket i{position:absolute;left:50%;top:0;transform:translateX(-50%);border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:64px solid var(--white);filter:drop-shadow(3px 3px 0 rgba(33,7,46,.55))}
.gc-rocket b{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:var(--yellow);z-index:2}
.gc-rocket em{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-left:15px solid transparent;border-right:15px solid transparent;border-top:32px solid #f2b49e;filter:drop-shadow(3px 3px 0 rgba(33,7,46,.55))}
.gc-scape{width:150px;height:132px;position:relative}
.gc-scape .sun{position:absolute;right:0;top:4px;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--yellow)}
.gc-scape .m1{position:absolute;left:-14px;bottom:4px;width:104px;height:54px;border:2px solid var(--ink);border-radius:60px 60px 0 0;background:rgba(255,255,255,.55);transform:rotate(14deg)}
.gc-scape .m2{position:absolute;left:36px;bottom:0;width:124px;height:72px;border:2px solid var(--ink);border-radius:74px 74px 0 0;background:rgba(255,255,255,.7);transform:rotate(-7deg)}
.gc-scape .seal{position:absolute;left:0;top:0;width:36px;height:36px;border:2px solid var(--ink);background:#c23b3b;display:grid;place-items:center;color:var(--white);font:700 15px 'DM Mono','Noto Sans SC',monospace;transform:rotate(-8deg)}
.gc-net{width:150px;height:120px}
.gc-list{width:150px;border:2px solid var(--ink);background:rgba(255,255,255,.6);padding:16px;box-shadow:5px 5px 0 rgba(33,7,46,.5);transform:rotate(-3deg)}
.gc-list b{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);background:var(--green);font-size:15px;color:var(--ink);margin-bottom:14px;line-height:1}
.gc-list i{display:block;height:8px;border-bottom:1px solid var(--ink);opacity:.85;margin-bottom:11px}
.gc-list i:nth-child(2){width:100%}
.gc-list i:nth-child(3){width:76%}
.gc-list i:nth-child(4){width:88%;border-bottom-style:dashed}
/* ============================================================
   V4.5 · hero 漂浮卡 / 六痛点 / 标题两列 / 品红区迷你卡 /
           编辑器演示交互 / 价值条 / 紫色卡功能组件
   ============================================================ */

/* 1) hero：右侧卡片增多 + 轻微左右漂浮 */
.hero-drift{position:absolute;animation:driftX 9s ease-in-out infinite}
.hero-drift .hero-project{position:static;width:100%}
.d1{left:8%;top:25%;width:230px;animation-delay:0s}
.d2{right:10%;top:18%;width:190px;animation-delay:-3.2s;animation-duration:11s}
.d3{right:14%;bottom:15%;width:210px;animation-delay:-5s;animation-duration:8s}
.d4{left:38%;top:31%;width:172px;animation-delay:-1.8s;animation-duration:10s}
.d5{left:1%;top:6%;width:182px;animation-delay:-6.4s;animation-duration:12s}
.project-d{background:var(--peach)}
.project-e{background:var(--lilac)}
@keyframes driftX{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}

/* 2) problem：六个痛点两行填满留白 */
.pain-grid{gap:clamp(16px,2vw,26px);padding:clamp(18px,3.6svh,44px) 0}
.pain-card{padding:clamp(20px,3svh,32px)}
.pain-card:nth-child(2){transform:rotate(1deg) translateY(8px)}
.pain-card:nth-child(3){transform:rotate(-1.5deg) translateY(14px)}
.pain-card:nth-child(4){background:var(--lilac);transform:rotate(-1deg) translateY(6px)}
.pain-card:nth-child(5){transform:rotate(1deg) translateY(-4px)}
.pain-card:nth-child(6){background:var(--peach);transform:rotate(-1.5deg) translateY(8px)}
.pain-card:nth-child(n):hover{transform:rotate(0) translateY(0)}

/* 3) products：标题两列并排 */
.head-split{grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);align-items:end;row-gap:16px}
.head-split h2{grid-column:1;grid-row:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(14px,2vw,32px)}
.head-split p{grid-column:2;grid-row:2;margin:0 0 10px;align-self:end;justify-self:start;max-width:280px;text-align:left}

/* 4) features：品红区迷你卡 */
.mini-card{position:absolute;border:1px solid var(--ink);box-shadow:5px 5px 0 rgba(33,7,46,.85);padding:11px 13px;display:flex;flex-direction:column;gap:3px;font:9px 'DM Mono','Noto Sans SC',monospace;z-index:2}
.mini-card b{font:15px 'Fraunces','Noto Serif SC',serif}
.mini-card span{opacity:.8}
.mc-1{top:clamp(44px,7svh,72px);left:clamp(22px,3.4vw,52px);background:var(--cream);transform:rotate(-4deg)}
.mc-2{top:clamp(44px,7svh,72px);right:clamp(22px,3.4vw,52px);background:var(--yellow);transform:rotate(3deg)}
.mc-3{bottom:clamp(64px,11svh,110px);left:clamp(22px,3.4vw,52px);background:var(--white);transform:rotate(2deg)}
.mc-4{bottom:clamp(96px,15svh,150px);right:clamp(22px,3.4vw,52px);background:var(--green);transform:rotate(-3deg)}

/* 5) editor：演示交互反馈 */
.insp-value:focus{outline:2px solid var(--lilac)}
.insp-value{cursor:text}
.insp-ops span,.side-item,.side-add,.side-bottom,.canvas-top b,.insp-tabs b,.swatches i{cursor:pointer}
.phone-content{transition:background .5s}
.ph-anim{animation:phfade .45s cubic-bezier(.2,.8,.2,1)}
@keyframes phfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.editor-phone[data-accent="ink"] .phone-content{background:linear-gradient(150deg,#4a2b57,#29102f)}
.editor-phone[data-accent="ink"] .phone-content h3,.editor-phone[data-accent="ink"] .phone-content small{color:var(--cream)}
.editor-phone[data-accent="ink"] .phone-content em{color:var(--yellow)}
.ed-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);border:1px solid var(--ink);padding:12px 20px;font:11px 'DM Mono','Noto Sans SC',monospace;z-index:130;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:4px 4px 0 var(--lilac)}
.ed-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 6) testimonial：价值条 */
.testimonial{gap:clamp(20px,4.6svh,44px)}
.proof-extra{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px);width:min(1120px,92%);border:1px solid var(--line);background:var(--white);padding:clamp(16px,2.6svh,24px) clamp(18px,2.4vw,34px);box-shadow:8px 8px 0 rgba(33,7,46,.85)}
.proof-extra>div{display:flex;flex-direction:column;gap:6px;text-align:left;position:relative;padding-left:46px}
.proof-extra i{position:absolute;left:0;top:2px;width:32px;height:32px;border:1.5px solid var(--ink);display:grid;place-items:center;font:12px 'DM Mono','Noto Sans SC',monospace;font-style:normal;box-shadow:3px 3px 0 rgba(33,7,46,.6);background:var(--cream)}
.proof-extra i.g-tri{background:var(--yellow)}
.proof-extra i.g-dot{border-radius:50%;background:var(--lilac)}
.proof-extra i.g-star{background:var(--peach)}
.proof-extra b{font:16px 'Fraunces','Noto Serif SC',serif}
.proof-extra span{font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.72}

/* 7) story：紫色渐变卡功能组件 */
.st-comp{position:absolute;z-index:3;border:1.5px solid var(--ink);background:var(--cream);box-shadow:6px 6px 0 rgba(33,7,46,.9);font:10px 'DM Mono','Noto Sans SC',monospace;padding:10px 13px}
.st-input{left:clamp(22px,4vw,48px);top:clamp(20px,6svh,52px);width:clamp(150px,26%,230px);border-style:dashed;display:flex;align-items:center;gap:8px;animation:inpulse 3.4s ease-in-out infinite}
.st-input::before{content:"Aa";border:1px solid var(--ink);padding:3px 6px;font-size:9px;opacity:.7}
.st-input span{opacity:.65}
.st-img{right:clamp(22px,4vw,48px);top:clamp(24px,7svh,60px);width:clamp(120px,20%,180px);height:clamp(90px,15svh,130px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-style:dashed;background:rgba(255,253,249,.6);animation:imgpulse 3.8s ease-in-out infinite 1s}
.st-img b{font:22px 'DM Mono','Noto Sans SC',monospace;font-weight:400}
.st-img span{opacity:.7;font-size:9px}
.st-btn{left:clamp(30px,5vw,60px);bottom:clamp(24px,5svh,46px);background:var(--yellow);animation:btnpulse 4.2s ease-in-out infinite .5s}
@keyframes inpulse{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes imgpulse{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes btnpulse{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(-3deg)}}

/* 移动端：hero 漂移壳位置随卡片缩放 */
@media(max-width:640px){
  .hero-drift{transform:scale(.75);transform-origin:center}
  .d1{left:-2%;top:20%}
  .d2{right:-2%;top:13%}
  .d3{right:3%;bottom:22%}
  .d4{left:16%;top:36%}
  .d5{left:40%;top:6%}
}
@media(max-width:1000px){
  .head-split h2{flex-direction:column;align-items:flex-start;gap:8px;white-space:normal}
  .proof-extra{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   V4.6 · 全平台适配微调：屏3手机端头部 / 屏7紫色卡充实 /
           屏8食谱拆分头部+卡片中部UI / 屏9画廊卡重排 /
           移动端取消 flex 拉伸（修复内容塌陷）
   ============================================================ */

/* 屏8：拆分头部 —— 标签左上、标题居左、右侧叙述文字 */
.split-head{grid-template-columns:1.4fr 1fr;align-items:end;column-gap:clamp(24px,3vw,48px);row-gap:10px}
.split-head>span{grid-column:1;grid-row:1}
.split-head h2{grid-column:1;grid-row:2;font-size:clamp(50px,5.6vw,96px)}
.split-head p{grid-column:2;grid-row:2;margin:0 0 10px;align-self:end;justify-self:end;text-align:right;font-size:14px;line-height:1.55;max-width:300px}

/* 屏8：卡片中部 UI（标题下方 / 底部大字上方） */
.rq-mid{position:absolute;left:clamp(18px,2.2vw,32px);top:clamp(130px,26svh,230px);z-index:2;font:10px 'DM Mono','Noto Sans SC',monospace;color:var(--ink)}
.rm-note{display:flex;flex-direction:column;gap:6px;background:rgba(255,253,249,.75);border:1.5px dashed var(--ink);padding:12px 14px;box-shadow:4px 4px 0 rgba(33,7,46,.4);transform:rotate(-3deg)}
.rm-note em{font-style:normal;font:800 18px 'Fraunces','Noto Serif SC',serif}
.rm-note span{line-height:1.4}
.rm-pill{display:flex;align-items:center;gap:9px;background:var(--white);border:1.5px dashed var(--ink);padding:9px 12px;box-shadow:4px 4px 0 rgba(33,7,46,.4);transform:rotate(2deg)}
.rm-pill i{font-style:normal;width:16px;height:16px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:8px}
.rm-stat{display:flex;align-items:center;gap:7px;background:var(--ink);color:var(--cream);padding:10px 13px;box-shadow:4px 4px 0 rgba(33,7,46,.45);transform:rotate(-2deg)}
.rm-stat b{font:800 26px 'Fraunces','Noto Serif SC',serif;color:var(--yellow)}
.rm-stat small{font:9px 'DM Mono','Noto Sans SC',monospace;opacity:.8}
.rm-stat i{width:22px;height:7px;background:var(--cream);display:block;opacity:.85}
.rm-stat i:last-child{background:var(--peach);width:14px}

/* 屏9：画廊卡 —— 标签在上、名字居中、几何在下 */
.gc-tag{font:10px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.1em;opacity:.82}
.gallery-card{justify-content:space-between;padding:24px 24px 20px}
.gallery-card>b{margin:8px 0 0;font-size:clamp(46px,5vw,70px)}
.gc-geo{position:relative;align-self:flex-end;margin-top:8px}

/* 屏7：紫色卡更多功能组件 */
.st-select{left:clamp(22px,4vw,48px);top:clamp(118px,22svh,200px);display:flex;align-items:center;gap:10px;border-style:dashed;animation:inpulse 3.6s ease-in-out infinite .9s}
.st-select em{font-style:normal;opacity:.55}
.st-swatch{left:clamp(22px,4vw,48px);top:clamp(200px,36svh,320px);display:flex;align-items:center;gap:7px;background:rgba(255,253,249,.7);animation:imgpulse 4s ease-in-out infinite 1.4s}
.st-swatch i{width:20px;height:20px;border:1px solid var(--ink);display:block}
.st-swatch i:nth-child(1){background:var(--lilac)}
.st-swatch i:nth-child(2){background:var(--yellow)}
.st-swatch i:nth-child(3){background:var(--green)}
.st-swatch i:nth-child(4){background:var(--ink)}
.st-swatch span{opacity:.7;font-size:9px}
.st-toggle{right:clamp(22px,4vw,48px);top:clamp(180px,30svh,270px);display:flex;align-items:center;gap:10px;background:rgba(255,253,249,.7);animation:inpulse 3.2s ease-in-out infinite 1.8s}
.st-toggle i{width:34px;height:18px;border:1.5px solid var(--ink);border-radius:99px;position:relative;background:var(--green)}
.st-toggle i::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.st-toggle span{opacity:.75}
.st-link{right:clamp(22px,4vw,48px);bottom:clamp(96px,17svh,150px);display:flex;flex-direction:column;gap:3px;background:var(--white);animation:btnpulse 4.4s ease-in-out infinite 2.2s}
.st-link em{font-style:normal;font-size:9px;opacity:.6}

/* 平板：取消桌面端 flex 拉伸，恢复内容驱动高度 */
@media(max-width:1000px){
  .product-rail{flex:none;align-items:stretch}
  .demo-card{height:auto}
  .card-screen{flex:none;height:clamp(300px,48svh,400px)}
  .recipe-grid{flex:none}
  .recipe-art{flex:none;height:clamp(230px,36svh,300px)}
  .gallery-rail{flex:none;align-items:stretch;padding-bottom:clamp(26px,5svh,40px)}
  .gallery-card{flex:none;height:clamp(320px,50svh,400px)}
  .socials{margin-top:clamp(18px,3.5svh,28px)}
  .split-head{grid-template-columns:1fr;align-items:start}
  .split-head>span{grid-column:1;grid-row:1}
  .split-head h2{grid-column:1;grid-row:2}
  .split-head p{grid-column:1;grid-row:3;justify-self:start;text-align:left;margin-top:6px}
  .st-select{top:clamp(96px,20svh,150px)}
  .st-swatch{top:clamp(168px,34svh,240px)}
  .st-toggle{top:clamp(160px,30svh,220px)}
  .st-link{bottom:clamp(80px,14svh,120px)}
}
/* 手机：进一步收紧 */
@media(max-width:640px){
  .head-split{display:block}
  .head-split h2{flex-direction:column;align-items:flex-start;gap:6px;white-space:normal;font-size:44px;line-height:1.02;margin-top:6px}
  .head-split p{margin:14px 0 0;font-size:13px;max-width:100%;line-height:1.55}
  .card-screen{height:300px;padding:22px}
  .screen-title{font-size:44px;margin-top:74px}
  .data-ring{width:96px;height:96px;font-size:34px;top:56px;right:20px}
  .stack-box{height:150px;width:76px;top:56px;right:22px}
  .stack-box i{height:22px}
  .ui-list{top:64px;right:18px}
  .ui-list i{width:120px;font-size:10px}
  .recipe-art{height:250px}
  .gallery-card{height:340px}
  .pain-grid{grid-template-columns:1fr 1fr;padding:16px 0}
  .st-swatch,.st-link{display:none}
}

/* ============================================================
   V5.0 · 伪载入动画：品红环 + 品牌字 → 自动擦除
   （轻量版：静态 box-shadow 品红环 + transform 缩放，纯 GPU 合成不卡；
     环内透明 → 露出下方已渲染的首屏；多点小环先开，主环随后铺满）
   ============================================================ */
.boot{position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.boot::after{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
.boot-wipe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 6 块紫色有机碎片拼满全屏（普通 SVG 元素，transform 动画可靠渲染）。
   擦除时各自从原点有机缩小消散：不同区域不同速度、边缘不规则连续变化 */
.blob{transform-box:view-box;transform:scale(2.2);will-change:transform}
.blob-1{--d:1.7s;--dl:.05s;transform-origin:500px 450px}
.blob-2{--d:1.5s;--dl:.18s;transform-origin:250px 240px}
.blob-3{--d:1.8s;--dl:.08s;transform-origin:790px 220px}
.blob-4{--d:1.55s;--dl:.24s;transform-origin:220px 790px}
.blob-5{--d:1.75s;--dl:.1s;transform-origin:800px 800px}
.blob-6{--d:1.9s;--dl:.3s;transform-origin:500px 90px}
@keyframes blobWipe{from{transform:scale(2.2)}to{transform:scale(0)}}
.boot-word{position:relative;z-index:2;font:800 clamp(96px,17vw,300px)/.8 'Fraunces','Noto Serif SC',serif;letter-spacing:-12px;color:var(--cream);
  text-shadow:12px 12px 0 rgba(33,7,46,.92);white-space:nowrap;user-select:none;
  animation:bootIn 1s .1s backwards,bootWordPulse 2.6s ease-in-out 1.2s infinite}
.boot-word span{color:var(--yellow)}
@keyframes bootIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bootWordPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

/* 有机液态擦除：6 块紫色有机碎片直接拼满全屏（初始 scale 2.2 重叠覆盖无缝隙），
   擦除时各碎片从各自原点有机缩小消散；DemoCraft. 标题同步做惯性 scale+rotate 离场
   （同一 erasing 触发点 = 同一时间轴） */
.boot.erasing .blob{animation:blobWipe var(--d) cubic-bezier(.62,.02,.26,1) var(--dl) forwards}
.boot.erasing .boot-word{animation:wordSwept 1.7s cubic-bezier(.76,0,.24,1) .12s forwards}
@keyframes wordSwept{
  0%{transform:scale(1) rotate(0deg);opacity:1}
  30%{transform:scale(.92) rotate(-3deg);opacity:1}
  60%{transform:scale(.68) rotate(-10deg);opacity:1}
  82%{transform:scale(.38) rotate(-22deg);opacity:.85}
  100%{transform:scale(0) rotate(-35deg);opacity:0}
}

/* booted：hero 内容在擦除尾声弹入 */
/* 擦除(~2.2s)+遮罩移除(2.25s)后，首屏组件按序列错峰弹出：
   按钮+前两张卡片 0s → 后续卡片 0.02-0.14s → 徽章 .2s → 大字 .26s → 底条 .38s */
html.booted .hero-copy,html.booted .hero-photo,html.booted .hero-drift,html.booted .hero-word,html.booted .hero-sticker,html.booted .hero-bottom{transition:none}
/* 分层呈现：遮罩消失后整个首屏结构（左侧文案 + 右侧渐变背景板/DEMO大字/徽章）
   直接就位；只有右侧五张项目卡片 + 按钮 + 底条随后错峰弹出（0s–0.38s 紧凑登场） */
html.booted .hero h1{animation:none}
html.booted .hero-copy{animation:none}
html.booted .hero-photo{animation:none}
html.booted .hero-sticker{animation:bootPop .7s cubic-bezier(.22,1,.36,1) .2s both}
html.booted .hero-word{animation:bootPopBig .7s cubic-bezier(.22,1,.36,1) .26s both}
html.booted .hero-copy .yellow-btn{animation:bootPop .7s cubic-bezier(.22,1,.36,1) 0s both}
html.booted .hero-drift{animation:bootPop .6s cubic-bezier(.22,1,.36,1) both,driftX 9s ease-in-out 2s infinite}
html.booted .hero-drift.d1{animation-delay:0s,2s}
html.booted .hero-drift.d2{animation-delay:0s,2.1s}
html.booted .hero-drift.d3{animation-delay:.02s,2.2s}
html.booted .hero-drift.d4{animation-delay:.08s,2.3s}
html.booted .hero-drift.d5{animation-delay:.14s,2.4s}
html.booted .hero-bottom{animation:bootPop .7s cubic-bezier(.22,1,.36,1) .38s both}
@keyframes bootPop{0%{opacity:0;transform:translateY(44px) scale(.96)}55%{opacity:1;transform:translateY(-6px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes bootPopBig{0%{opacity:0;transform:translateY(52px) scale(.95)}55%{opacity:1;transform:translateY(-7px) scale(1.02)}100%{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .boot-word{animation:none}
  .boot .blob{animation:none!important}
  .boot.erasing .boot-wipe{transition:opacity .6s linear;opacity:0}
  html.booted .hero-drift{animation:driftX 9s ease-in-out infinite}
}
@media(max-width:1000px){
  .boot-word{font-size:clamp(84px,24vw,150px);letter-spacing:-7px}
}
@media(max-width:640px){
  .boot-word{font-size:clamp(60px,23vw,110px);letter-spacing:-5px;text-shadow:7px 7px 0 rgba(33,7,46,.92)}
}
html.boot-lock,html.boot-lock body{overflow:hidden}


/* ============================================================
   V5.1 · 全屏多样化入场：淡入 + 弹性融合，按模块分方向/缩放/模糊变体，
   组件错峰弹出（几十毫秒级先后，克制不拖沓）
   ============================================================ */
@keyframes popUp{0%{opacity:0;transform:translateY(30px) scale(.95)}55%{opacity:1;transform:translateY(-5px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes popLeft{0%{opacity:0;transform:translateX(-52px)}55%{opacity:1;transform:translateX(8px)}100%{opacity:1;transform:none}}
@keyframes popRight{0%{opacity:0;transform:translateX(52px)}55%{opacity:1;transform:translateX(-8px)}100%{opacity:1;transform:none}}
@keyframes popScale{0%{opacity:0;transform:scale(.55)}55%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes popBlur{0%{opacity:0;filter:blur(12px);transform:translateY(18px)}40%{opacity:.92;filter:blur(3px)}100%{opacity:1;filter:blur(0);transform:none}}


/* V4.6 · 第五屏可编辑体验提示 + 自由画布微体验拖拽 */
.pv-hint{position:absolute;left:26px;top:96px;width:150px;z-index:6;background:var(--yellow);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:12px 13px;transform:rotate(-2deg);animation:pvFloat 3.2s ease-in-out infinite}
.pv-hint::after{content:"";position:absolute;right:-13px;top:38%;width:20px;height:20px;background:var(--yellow);border-right:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg)}
.pv-hint-badge{display:inline-block;background:var(--ink);color:var(--cream);font:800 9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.12em;padding:3px 7px;margin-bottom:7px}
.pv-hint p{margin:0;font-size:11px;line-height:1.5}
.pv-hint p b{display:block;font:800 15px 'Fraunces','Noto Serif SC',serif;letter-spacing:-.3px;margin-bottom:3px}
.pv-hint p i{font-style:normal;color:#9c43c8}
.pv-go{display:inline-block;margin-top:9px;border:1px solid var(--ink);background:var(--lilac);color:var(--ink);padding:5px 9px;font:800 10px 'DM Mono','Noto Sans SC',monospace;text-decoration:none}
.pv-go span{font-size:13px;margin-left:4px}
@keyframes pvFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}
.pv-drag{cursor:grab;touch-action:none;transition:transform .18s ease,box-shadow .18s ease}
.pv-drag:hover{box-shadow:0 4px 14px rgba(33,7,46,.18)}
.pv-drag.dragging{cursor:grabbing;transition:none;outline:1.5px dashed var(--lilac);outline-offset:2px;z-index:5;position:relative;box-shadow:0 8px 22px rgba(33,7,46,.24)}
.pv-xy{position:absolute;z-index:9;background:var(--ink);color:var(--cream);font:9px 'DM Mono','Noto Sans SC',monospace;padding:4px 8px;border-radius:99px;letter-spacing:.05em;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.pv-xy.show{opacity:1}
@media(max-width:1000px){.pv-hint{left:16px;top:84px;width:132px}.pv-hint p{font-size:10px}.pv-hint p b{font-size:13px}}
@media(max-width:640px){.pv-hint{display:none}}

/* Safari 抗频闪：动画元素固定合成层 */
.page-block.active .screen-enter,.page-block.active .pain-card,.page-block.active .demo-card,.page-block.active .mini-card,.page-block.active .section-head,.page-block.active .problem-head,.page-block.active .editor-head,.page-block.active .gallery-head,.page-block.active .feature-copy,.page-block.active .feature-visual,.page-block.active .editor-sidebar,.page-block.active .editor-canvas{will-change:transform,opacity}

/* 兜底：非 hero 的整屏块统一上浮弹出 */
.page-block.active .screen-enter:not(.hero-copy):not(.hero-photo):not(.hero-bottom){animation:popUp .72s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .section-head{animation:popBlur .8s cubic-bezier(.3,1.2,.5,1) both}
.page-block.active .problem-head{animation:popBlur .8s cubic-bezier(.3,1.2,.5,1) both}
.page-block.active .editor-head{animation:popBlur .8s cubic-bezier(.3,1.2,.5,1) both}
.page-block.active .gallery-head{animation:popBlur .8s cubic-bezier(.3,1.2,.5,1) both}

/* 屏2 · 痛点六卡：上浮错峰 */
.page-block.active .pain-card{animation:popUp .58s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .pain-card:nth-child(1){animation-delay:.07s}
.page-block.active .pain-card:nth-child(2){animation-delay:.14s}
.page-block.active .pain-card:nth-child(3){animation-delay:.21s}
.page-block.active .pain-card:nth-child(4){animation-delay:.28s}
.page-block.active .pain-card:nth-child(5){animation-delay:.35s}
.page-block.active .pain-card:nth-child(6){animation-delay:.42s}
.page-block.active .problem-pivot{animation:popUp .7s cubic-bezier(.34,1.56,.64,1) .46s both}

/* 屏3 · 产品四卡：上浮错峰 + 左栏右栏分向 */
.page-block.active .demo-card{animation:popUp .62s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .demo-card:nth-child(1){animation-delay:.08s}
.page-block.active .demo-card:nth-child(2){animation-delay:.16s}
.page-block.active .demo-card:nth-child(3){animation-delay:.24s}
.page-block.active .demo-card:nth-child(4){animation-delay:.32s}

/* 屏4 · 特性：左文案右视觉 + 悬浮卡缩放 */
.page-block.active .feature-copy{animation:popLeft .8s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .feature-visual{animation:popRight .8s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .mini-card{animation:popScale .55s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .mini-card.mc-1{animation-delay:.18s}
.page-block.active .mini-card.mc-2{animation-delay:.25s}
.page-block.active .mini-card.mc-3{animation-delay:.32s}
.page-block.active .mini-card.mc-4{animation-delay:.39s}

/* 屏5 · 编辑器：标题模糊入，工作台左滑，侧栏逐层 */
.page-block.active .editor-sidebar{animation:popLeft .7s cubic-bezier(.34,1.56,.64,1) .08s both}
.page-block.active .editor-canvas{animation:popRight .75s cubic-bezier(.34,1.56,.64,1) .1s both}
.page-block.active .side-brand,.page-block.active .side-sec,.page-block.active .side-pair,.page-block.active .side-add,.page-block.active .side-proj,.page-block.active .side-bottom,.page-block.active .side-item{animation:popLeft .5s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .side-brand{animation-delay:.14s}
.page-block.active .side-sec{animation-delay:.19s}
.page-block.active .side-proj{animation-delay:.23s}
.page-block.active .side-item{animation-delay:.27s}
.page-block.active .side-add{animation-delay:.32s}
.page-block.active .side-pair{animation-delay:.36s}
.page-block.active .side-bottom{animation-delay:.42s}

/* 屏6 · 证言：引文缩放弹、价值条上浮 */
.page-block.active .quote{animation:popScale .9s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .quote-by{animation:popUp .6s cubic-bezier(.34,1.56,.64,1) .25s both}
.page-block.active .proof-stats div{animation:popUp .6s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .proof-stats div:nth-child(1){animation-delay:.3s}
.page-block.active .proof-stats div:nth-child(2){animation-delay:.38s}
.page-block.active .proof-stats div:nth-child(3){animation-delay:.46s}
.page-block.active .proof-extra{animation:popUp .7s cubic-bezier(.34,1.56,.64,1) .55s both}

/* 屏7 · 故事：左文右图分向，组件卡缩放错峰 */
.page-block.active .story-copy{animation:popLeft .85s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .story-photo{animation:popRight .85s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .st-comp{animation:popScale .55s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .st-btn{animation-delay:.3s}
.page-block.active .st-select{animation-delay:.37s}
.page-block.active .st-swatch{animation-delay:.44s}
.page-block.active .st-toggle{animation-delay:.51s}
.page-block.active .st-link{animation-delay:.58s}
.page-block.active .story-list li{animation:popUp .55s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .story-list li:nth-child(1){animation-delay:.32s}
.page-block.active .story-list li:nth-child(2){animation-delay:.4s}
.page-block.active .story-list li:nth-child(3){animation-delay:.48s}

/* 屏8 · 配方三卡：上浮错峰 */
.page-block.active .recipe-grid article{animation:popUp .62s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .recipe-grid article:nth-child(1){animation-delay:.08s}
.page-block.active .recipe-grid article:nth-child(2){animation-delay:.16s}
.page-block.active .recipe-grid article:nth-child(3){animation-delay:.24s}

/* 屏9 · 画廊五卡：上浮错峰 */
.page-block.active .gallery-card{animation:popUp .62s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .gallery-card:nth-child(1){animation-delay:.07s}
.page-block.active .gallery-card:nth-child(2){animation-delay:.14s}
.page-block.active .gallery-card:nth-child(3){animation-delay:.21s}
.page-block.active .gallery-card:nth-child(4){animation-delay:.28s}
.page-block.active .gallery-card:nth-child(5){animation-delay:.35s}
.page-block.active .socials a{animation:popScale .5s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .socials a:nth-child(1){animation-delay:.42s}
.page-block.active .socials a:nth-child(2){animation-delay:.48s}
.page-block.active .socials a:nth-child(3){animation-delay:.54s}

/* 屏10 · 页脚：大字缩放 + 上下错峰 */
.page-block.active .footer-top{animation:popUp .7s cubic-bezier(.34,1.56,.64,1) both}
.page-block.active .footer-brand{animation:popScale 1s cubic-bezier(.34,1.56,.64,1) .1s both}
.page-block.active .footer-bottom{animation:popUp .6s cubic-bezier(.34,1.56,.64,1) .3s both}


/* ============================================================
   V4.7 · 全站互动升级：痛点翻面 / 木魂永生试玩弹窗 / 二维码 / 答辩倒计时 / 滚动提示
   ============================================================ */

/* ---- S1 首屏滚动提示 ---- */
.hero-scroll{display:inline-flex;align-items:center;gap:9px}
.hs-mouse{width:15px;height:24px;border:1.6px solid var(--ink);border-radius:9px;position:relative;display:inline-block}
.hs-mouse i{position:absolute;left:50%;top:4px;width:2.6px;height:6px;margin-left:-1.3px;background:var(--ink);border-radius:2px;animation:hsWheel 1.5s ease-in-out infinite}
@keyframes hsWheel{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

/* ---- S2 痛点卡翻面 ---- */
.pain-card{perspective:1200px;background:transparent;border:0;box-shadow:none;padding:0;display:block;transition:transform .35s;transform:rotate(-1deg)}
.pain-card:nth-child(2){transform:rotate(1deg) translateY(12px)}
.pain-card:nth-child(3){transform:rotate(-1.5deg) translateY(22px)}
.pain-card:hover{transform:rotate(0) translateY(0)}
.pain-inner{position:relative;display:grid;grid-template:1fr/1fr;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,1.1,.5,1)}
.pain-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--ink);background:var(--white);padding:clamp(24px,3.5svh,36px);display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 rgba(33,7,46,.85)}
.pain-card:nth-child(2) .pain-front{background:var(--yellow)}
.pain-back{transform:rotateY(180deg);background:var(--ink);color:var(--cream);justify-content:center;border-color:var(--ink)}
.pain-back .pain-no{color:var(--lilac)}
.pain-back h3{color:var(--yellow);font-size:clamp(22px,2.6vw,34px)}
.pain-back p{opacity:.88;font-size:14px}
.pain-card:hover .pain-inner{transform:rotateY(180deg)}
.pain-card.flipped .pain-inner{transform:rotateY(180deg)}

/* ---- S3 模板卡试玩徽标 ---- */
.card-try{position:absolute;right:10px;bottom:10px;background:var(--ink);color:var(--cream);font:800 10px 'DM Mono','Noto Sans SC',monospace;padding:5px 8px;letter-spacing:.04em;border:1px solid var(--ink)}
.demo-card[data-muhun-tpl]{cursor:pointer}
.demo-card[data-muhun-tpl]:hover .card-try{background:var(--lilac);color:var(--ink)}

/* ---- S4 二维码现场演示 ---- */
.qr-live{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:11px;background:rgba(255,253,249,.94);border:1px solid var(--ink);box-shadow:5px 5px 0 rgba(33,7,46,.85);padding:9px 11px;z-index:3;max-width:230px}
.qr-code{width:62px;height:62px;background:#fff;border:1px solid var(--ink);display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);padding:3px;gap:0;flex:none}
.qr-code i{background:#21072e}
.qr-note{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.35}
.qr-note b{font:800 13px 'Fraunces','Noto Serif SC',serif}
.qr-note span{opacity:.8}

/* ---- S7 答辩倒计时 ---- */
.defense-demo{margin:34px 0 8px;border:1.5px solid var(--ink);background:var(--white);box-shadow:6px 6px 0 rgba(33,7,46,.85);padding:18px 20px;max-width:420px}
.defense-top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.defense-top b{font:800 15px 'Fraunces','Noto Serif SC',serif}
.defense-start{border:1px solid var(--ink);background:var(--yellow);color:var(--ink);padding:9px 13px;font:800 11px 'DM Mono','Noto Sans SC',monospace;cursor:pointer;transition:.2s}
.defense-start:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.defense-run{padding-top:16px}
.defense-clock{font:800 clamp(44px,4vw,60px)/1 'Fraunces','Noto Serif SC',serif;letter-spacing:-2px;color:#9c43c8}
.defense-clock.done{color:var(--yellow)}
.defense-bar{height:9px;border:1px solid var(--ink);background:var(--cream);margin:12px 0;overflow:hidden}
.defense-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#d88af5,#f4c98d);transform-origin:left;transition:width 1s linear}
.defense-tip{font-size:12px;line-height:1.5;opacity:.85;margin-bottom:12px}
.defense-again{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:7px 11px;font:800 10px 'DM Mono','Noto Sans SC',monospace;cursor:pointer}

/* ---- 木魂永生试玩弹窗 ---- */
.muhun-modal{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:clamp(12px,3vw,40px);visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.muhun-modal.open{visibility:visible;opacity:1}
.muhun-backdrop{position:absolute;inset:0;background:rgba(33,7,46,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.muhun-dialog{position:relative;background:var(--cream);border:1.5px solid var(--ink);box-shadow:12px 12px 0 rgba(33,7,46,.9);width:min(430px,100%);display:flex;flex-direction:column;max-height:100%;transform:translateY(26px) scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.muhun-modal.open .muhun-dialog{transform:none}
.muhun-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.muhun-id{display:flex;flex-direction:column;gap:3px}
.muhun-id b{font:800 19px 'Fraunces','Noto Serif SC',serif}
.muhun-id span{font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em;opacity:.65}
.muhun-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);background:var(--yellow);font:16px 'DM Mono','Noto Sans SC',monospace;cursor:pointer;display:grid;place-items:center;transition:transform .25s}
.muhun-close:hover{transform:rotate(90deg)}
.muhun-phone{position:relative;width:min(300px,86%);margin:18px auto 14px;background:#17120e;border-radius:34px;padding:6px;box-shadow:inset 0 0 0 1px #000,0 14px 30px rgba(33,7,46,.3);flex:none}
.muhun-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:21px;border-radius:99px;background:#000;z-index:5}
.muhun-screen{position:relative;height:430px;border-radius:28px;overflow:hidden;background:#20150c;background-image:repeating-linear-gradient(92deg,rgba(255,214,150,.045) 0 2px,transparent 2px 9px);display:grid;place-items:center;padding:48px 22px 24px;text-align:center;color:#f3e6d3}
.muhun-page{position:absolute;inset:0;padding:54px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:0;opacity:0;transform:translateX(26px);transition:opacity .4s,transform .4s;pointer-events:none;overflow-y:auto;scrollbar-width:none;text-align:center}
.muhun-page.active{opacity:1;transform:none;pointer-events:auto}
.muhun-page small{font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.22em;color:#d8a25e;margin-bottom:16px}
.muhun-page h3{font:800 clamp(30px,3.2vw,40px)/1.02 'Fraunces','Noto Serif SC',serif;letter-spacing:-1px;color:#f7ecd9;margin:0 0 14px}
.muhun-page>p{font-size:13px;line-height:1.65;color:#d9c9ab;margin:0 0 20px;max-width:30ch}
.muhun-btn{border:1px solid #d8a25e;background:linear-gradient(120deg,#8a5a2b,#c8903f);color:#fff7ea;padding:11px 22px;font:800 12px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.04em;cursor:pointer;margin:4px 0 18px;transition:.2s}
.muhun-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(216,162,94,.3)}
.muhun-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:2px}
.muhun-cell{border:1px solid #4a3520;background:rgba(74,53,32,.55);padding:13px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:.2s}
.muhun-cell:hover{border-color:#d8a25e;background:rgba(138,90,43,.5)}
.muhun-cell b{font:700 15px 'Fraunces','Noto Serif SC',serif;color:#f3e6d3}
.muhun-cell span{font:9px 'DM Mono','Noto Sans SC',monospace;color:#b99a6f;line-height:1.3}
.muhun-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:6px 0 16px}
.muhun-chip{border:1px solid #4a3520;background:rgba(74,53,32,.55);padding:13px 9px;display:flex;flex-direction:column;gap:4px;text-align:left}
.muhun-chip b{font:700 14px 'Fraunces','Noto Serif SC',serif;color:#f3e6d3}
.muhun-chip span{font:9px 'DM Mono','Noto Sans SC',monospace;color:#b99a6f}
.muhun-quote{border-left:2px solid #d8a25e;background:rgba(74,53,32,.4);padding:14px 15px;text-align:left;width:100%;margin:0 0 16px}
.muhun-quote b{font:800 12px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.14em;color:#d8a25e;display:block;margin-bottom:7px}
.muhun-quote p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#f0e2c9}
.muhun-quote span{font:9px 'DM Mono','Noto Sans SC',monospace;color:#b99a6f}
.muhun-frag{margin:6px 0 16px;width:100%}
.muhun-fragart{height:120px;border:1px solid #4a3520;background:linear-gradient(150deg,#2c1c0e,#150e08 55%,#241607);position:relative;overflow:hidden}
.muhun-fragart::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(216,162,94,.16) 0 1px,transparent 1px 7px),repeating-linear-gradient(12deg,rgba(216,162,94,.1) 0 1px,transparent 1px 9px)}
.muhun-fragart::after{content:"木";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 46px 'Fraunces','Noto Serif SC',serif;color:rgba(216,162,94,.5)}
.muhun-frag>span{display:block;font:9px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.14em;color:#b99a6f;margin-top:7px}
.muhun-tabbar{display:flex;background:#0f0b07;border-radius:0 0 26px 26px;padding:9px 14px 8px;justify-content:space-around}
.muhun-tabbar b{font:10px 'DM Mono','Noto Sans SC',monospace;color:#8f7a58;padding:6px 0;cursor:pointer;position:relative;letter-spacing:.06em}
.muhun-tabbar b.on{color:#f3e6d3;font-weight:700}
.muhun-tabbar b.on::after{content:"";position:absolute;left:50%;bottom:-2px;width:14px;height:2px;margin-left:-7px;background:#d8a25e}
.muhun-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:11px}
.muhun-foot a{background:var(--ink);color:var(--cream);padding:8px 13px;font:800 11px 'DM Mono','Noto Sans SC',monospace;text-decoration:none;border:1px solid var(--ink)}
.muhun-foot a:hover{background:var(--lilac);color:var(--ink)}
@media(max-width:640px){
  .muhun-modal{padding:10px}
  .muhun-screen{height:min(430px,62svh)}
  .qr-live{left:8px;bottom:8px;padding:7px 8px;max-width:196px}
  .qr-code{width:50px;height:50px}
  .defense-demo{margin-top:26px;padding:14px 15px}
}

html.muhun-open{overflow:hidden}


/* ============================================================
   V4.9 · 个性层：墨迹拖尾 / 滚动贴纸 / 标题故障 / 背景漂浮符号
   ============================================================ */

/* ---- 鼠标墨迹拖尾 ---- */
.ink-canvas{position:fixed;inset:0;z-index:80;pointer-events:none}

/* ---- 每屏贴纸（absolute 跟随所属屏，屏激活时弹入） ---- */
.sticker-pop{position:absolute;z-index:5;pointer-events:none;display:grid;place-items:center;font-weight:900;line-height:1;transform-origin:center;box-shadow:0 2px 6px rgba(33,7,46,.18)}
.page-block .sticker-pop{opacity:0;transform:translateY(-14px) rotate(-10deg) scale(.7)}
.page-block.active .sticker-pop{opacity:1;transform:translateY(0) rotate(0) scale(1);transition:transform .5s cubic-bezier(.22,1.4,.4,1),opacity .45s .05s}

/* ---- 大标题故障感（真实副本：进入视口自动播放，无需 hover） ---- */
.glitch{position:relative}
.glitch-a,.glitch-b{position:absolute;inset:0;opacity:0;pointer-events:none;margin:0;padding:0}
.head-split h2 .glitch-a,.head-split h2 .glitch-b{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(14px,2vw,32px)}
.glitch-a i,.glitch-b i{color:inherit;font-style:inherit}
.glitch.playing .glitch-a{opacity:.9;color:#e8568f;transform:translate(3px,-2px);animation:glitchA .5s steps(2,end) 4}
.glitch.playing .glitch-b{opacity:.9;color:#d88af5;transform:translate(-3px,2px);animation:glitchB .6s steps(2,end) 3 .08s}
@keyframes glitchA{0%{clip-path:inset(0 0 62% 0)}25%{clip-path:inset(38% 0 28% 0)}50%{clip-path:inset(12% 0 72% 0)}75%{clip-path:inset(56% 0 12% 0)}100%{clip-path:inset(26% 0 48% 0)}}
@keyframes glitchB{0%{clip-path:inset(52% 0 18% 0)}25%{clip-path:inset(8% 0 64% 0)}50%{clip-path:inset(44% 0 30% 0)}75%{clip-path:inset(70% 0 6% 0)}100%{clip-path:inset(20% 0 58% 0)}}

/* ---- hero 背景漂浮符号 ---- */
.hero-glyph{position:absolute;font:800 'Fraunces','Noto Serif SC',serif;color:rgba(33,7,46,.14);letter-spacing:0;user-select:none;animation:glyphFloat var(--gd,9s) ease-in-out infinite;z-index:-1}
.hero-glyph.c1{color:rgba(232,86,143,.2)}
.hero-glyph.c2{color:rgba(216,138,245,.22)}
@keyframes glyphFloat{0%,100%{transform:translateY(0) rotate(var(--gr,0deg))}50%{transform:translateY(-26px) rotate(calc(var(--gr,0deg) + 5deg))}}

@media(prefers-reduced-motion:reduce){
  .ink-canvas{display:none}
  .sticker-pop{display:none}
  .glitch-a,.glitch-b{display:none}
  .hero-glyph{animation:none}
}

/* ---- 多语言标题 · 翻译气泡 ---- */
.lang-pill{display:inline-flex;align-items:center;gap:8px;margin-left:clamp(14px,1.8vw,30px);vertical-align:middle;background:var(--yellow);color:var(--ink);font:700 clamp(14px,1.5vw,20px)/1.15 'DM Mono','Noto Sans SC',monospace;padding:10px 18px;border-radius:16px;border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(33,7,46,.9);letter-spacing:.4px;position:relative;white-space:nowrap;transform:rotate(-3deg)}
.lang-pill::before{content:'';position:absolute;left:-9px;top:50%;width:16px;height:16px;background:var(--yellow);border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
@media(max-width:640px){.lang-pill{margin-left:0;margin-top:8px;font-size:13px;padding:8px 13px;border-width:1.5px}}

/* ============================================================
   V5.1 · 个性层二：打字机 / 选区品红 / 滚动进度 / 数字计数 /
          答辩通行证 / logo 彩蛋 / 视差网格 / 首屏三维浮层
   ============================================================ */

/* 1) 选中文字品红 */
::selection{background:#e8568f;color:#fffdf9}

/* 2) 滚动进度条 */
.scroll-progress{position:fixed;right:0;top:0;height:100vh;width:5px;z-index:90;pointer-events:none}
.scroll-progress i{display:block;width:100%;height:0;background:linear-gradient(180deg,#e8568f,#d88af5);transition:height .12s linear}

/* 4) 视差网格背景层（每屏淡品红/紫网格，随滚动微移） */
.page-block::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(232,86,143,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(216,138,245,.05) 1px,transparent 1px);background-size:64px 64px;transform:translateY(var(--pg,0px));pointer-events:none}

/* 5) logo 连点彩屑 */
.sticker-pop.burst{position:fixed;left:50%;top:50%;z-index:96;animation:burstPop .9s ease-out forwards}
@keyframes burstPop{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(170deg) scale(1)}}

@media(prefers-reduced-motion:reduce){
  .scroll-progress i{transition:none}
  .page-block::before{transform:none}
  .sticker-pop.burst{animation:none;opacity:0}
}

.editor-section{position:relative}




/* V5.1.3 · 引文切换动画（左右方向键 / 圆点点击共用） */
.quote{transition:opacity .16s ease,transform .16s ease}
.quote.q-out{opacity:0;transform:translateY(12px)}
.quote.q-in{animation:qSwap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes qSwap{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.quote-by span.q-swap{animation:qSwap .42s cubic-bezier(.2,.8,.2,1) .08s backwards}
@media(prefers-reduced-motion:reduce){.quote{transition:none}.quote.q-in,.quote-by span.q-swap{animation:none}}

@media(max-width:1180px){.proof-extra{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.proof-extra{grid-template-columns:repeat(2,1fr)}.proof-extra>div{padding-left:40px}}

/* V5.2 · 六项个性/转化升级：材料即丢即出 / 30min 时间轴 /
          评委视角卡 / Demo 值几分 / 真实标注 / 倒计时归零 CTA */

/* 1) 材料即丢即出（S4 左列底部） */
.instant-demo{margin-top:34px;border-top:1px dashed var(--ink);padding-top:18px}
.id-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.id-head b{font:800 16px 'Fraunces','Noto Serif SC',serif;color:#e8568f}
.id-head span{font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.75}
.id-row{display:flex;gap:8px;margin-top:12px;align-items:stretch}
.id-row textarea{flex:1;resize:none;border:1px solid var(--ink);background:rgba(255,253,249,.72);padding:9px 11px;font:11px/1.4 'DM Mono','Noto Sans SC',monospace;color:var(--ink);min-width:0}
.id-row button{border:0;background:var(--ink);color:#fffdf9;font:10px 'DM Mono','Noto Sans SC',monospace;padding:0 13px;cursor:pointer;box-shadow:3px 3px 0 rgba(33,7,46,.7);transition:.2s;white-space:nowrap}
.id-row button:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(33,7,46,.7)}
.id-out{margin-top:14px;display:flex;gap:14px;align-items:flex-start;animation:idIn .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes idIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.id-phone{width:170px;flex:none;background:#171717;border:1.5px solid var(--ink);border-radius:22px;padding:6px;box-shadow:6px 6px 0 rgba(33,7,46,.18)}
.id-nav{display:flex;justify-content:space-between;font:7px 'DM Mono','Noto Sans SC',monospace;color:#fffdf9;padding:3px 5px 6px}
.id-nav b{color:#f4ef51}
.id-title{background:var(--cream);border:1px solid var(--ink);font:700 13px 'Fraunces','Noto Serif SC',serif;padding:10px 8px;margin:2px 4px}
.id-feats{display:flex;flex-direction:column;gap:4px;margin:6px 4px}
.id-feats i{background:rgba(255,253,249,.85);border:1px solid var(--ink);font:7px 'DM Mono','Noto Sans SC',monospace;font-style:normal;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-btn{background:#e8568f;color:#fffdf9;font:7px 'DM Mono','Noto Sans SC',monospace;text-align:center;padding:5px;margin:6px 4px 4px;border:1px solid var(--ink)}
.id-note{font:9px 'DM Mono','Noto Sans SC',monospace;opacity:.65;max-width:170px;padding-top:4px}

/* 2) 30min 时间轴（S5 右上角，通行证左侧） */
.tl-band{position:absolute;right:var(--pad);top:clamp(150px,19svh,172px);width:min(400px,30vw);background:rgba(255,253,249,.92);border:2px solid var(--ink);box-shadow:9px 9px 0 rgba(33,7,46,.85);padding:20px 24px 22px;transform:rotate(-2deg);z-index:3}
.tl-band::before{content:'✦';position:absolute;top:-15px;right:20px;background:var(--yellow);border:1.5px solid var(--ink);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:13px;box-shadow:3px 3px 0 rgba(33,7,46,.7)}
.tl-head{font:800 17px 'Fraunces','Noto Serif SC',serif;letter-spacing:-.3px;margin-bottom:14px}
.tl-head::after{content:' ⏱';color:#e8568f}
.tl-track{display:flex;align-items:flex-start}
.tl-node{position:relative;text-align:center;flex:none}
.tl-node b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);font:800 13px 'DM Mono','Noto Sans SC',monospace;font-style:normal;background:var(--cream);transition:background .3s}
.tl-node em{font:10px 'DM Mono','Noto Sans SC',monospace;font-style:normal;opacity:.85;display:block;margin-top:6px}
.tl-line{flex:1;height:0;border-top:2px dashed var(--ink);margin-top:20px;margin-left:6px;margin-right:6px}
.tl-node.n1 b{color:#fffdf9;background:#e8568f}
.tl-node.n2 b{color:var(--ink);background:var(--yellow)}
.tl-node.n3 b{color:#fffdf9;background:#9c43c8}
@keyframes tlPulse{0%,55%{box-shadow:0 0 0 0 rgba(232,86,143,0)}60%,95%{box-shadow:0 0 0 6px rgba(232,86,143,.35)}100%{box-shadow:0 0 0 0 rgba(232,86,143,0)}}
.tl-node b{animation:tlPulse 5.4s ease-in-out infinite}
.tl-node.n2 b{animation-delay:1.8s}
.tl-node.n3 b{animation-delay:3.6s}

/* 3) 评委视角卡（S6 第 5 格） */
.proof-extra i.g-eye{background:var(--peach)}

/* 4) 倒计时归零 CTA */
.defense-go{display:inline-block;margin-top:14px;background:var(--yellow);border:1px solid var(--ink);border-radius:999px;padding:9px 16px;font:700 11px 'DM Mono','Noto Sans SC',monospace;color:var(--ink);box-shadow:3px 3px 0 var(--ink);animation:popUp .5s cubic-bezier(.34,1.56,.64,1) backwards}

/* 5) S9 真实项目标注 */
.gc-real{display:inline-block;margin-left:8px;background:#e8568f;color:#fffdf9;font:7px 'DM Mono','Noto Sans SC',monospace;font-style:normal;padding:2px 5px;vertical-align:middle;letter-spacing:.04em}

/* 6) Demo 值几分（footer 右列） */
.footer-top{grid-template-columns:0.9fr 1.1fr 1fr;align-items:center}
.score-game{margin-top:0;background:rgba(255,253,249,.94);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(33,7,46,.8);padding:18px 16px;align-self:start;max-width:100%;box-sizing:border-box}
.score-game>b{font:800 21px 'Fraunces','Noto Serif SC',serif;display:block}
.score-game>span{font:10.5px 'DM Mono','Noto Sans SC',monospace;opacity:.75;display:block;margin:5px 0 12px}
.sg-q{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap}
.sg-q>span{font:10.5px 'DM Mono','Noto Sans SC',monospace;opacity:.85;flex-basis:70px;flex:none}
.sg-q button{border:1.5px solid var(--ink);background:transparent;font:10px 'DM Mono','Noto Sans SC',monospace;padding:6px 9px;cursor:pointer;transition:.18s}
.sg-q button:hover{background:var(--yellow)}
.sg-q button.pick{background:#e8568f;color:#fffdf9;box-shadow:2px 2px 0 rgba(33,7,46,.6)}
.sg-card{margin-top:15px;background:var(--ink);color:var(--cream);padding:18px;animation:popUp .5s cubic-bezier(.34,1.56,.64,1) backwards}
.sg-score{font:800 42px/.9 'Fraunces','Noto Serif SC',serif;color:#f4ef51}
.sg-score span{font:11px 'DM Mono','Noto Sans SC',monospace;color:var(--cream);margin-left:5px}
.sg-line{font:700 13px 'Fraunces','Noto Serif SC',serif;margin-top:10px}
.sg-note{font:10px 'DM Mono','Noto Sans SC',monospace;opacity:.8;margin-top:8px;line-height:1.55}

@media(max-width:1000px){
  .tl-band{position:static;margin:14px auto 0;width:min(360px,90%);transform:none}
  .footer-top{grid-template-columns:1fr}
  .footer-note{order:-1;align-self:start;margin-bottom:26px}
  .score-game{margin-top:30px;width:min(440px,100%);transform:none}
  .footer-brand{flex-direction:column;align-items:center;gap:16px;text-align:center}
  .footer-brand .footer-links{flex-wrap:wrap;justify-content:center;padding-bottom:0;font-size:12px}
}
@media(max-width:640px){
  .instant-demo{margin-top:26px}
  .id-row{flex-direction:column}
  .id-out{flex-direction:column}
  .score-game{padding:14px}
}
@media(prefers-reduced-motion:reduce){.tl-node b,.defense-go,.sg-card{animation:none}}

/* V5.3 · footer 收尾：链接移入品牌区，中列补"为什么是 DemoCraft" */
.footer-note{align-self:center;border-left:3px solid #e8568f;padding-left:18px;max-width:320px}
.footer-note b{font:800 19px 'Fraunces','Noto Serif SC',serif;display:block;margin-bottom:9px}
.footer-note span{font:11px 'DM Mono','Noto Sans SC',monospace;opacity:.88;display:block;line-height:1.75;white-space:normal}
.footer-note em{font:11px 'DM Mono','Noto Sans SC',monospace;font-style:normal;color:#e8568f;display:block;margin-top:12px}

/* footer-cta：按钮在 cta 栏内垂直居中 */
.footer-cta{align-self:center;display:flex}
@media(max-width:1000px){.footer-cta{align-self:start}}

/* hero 大标题：与各区标题统一（popUp 弹出），boot 擦除完成后延迟弹出 */

/* ============================================================
   V5.4 · 移动端适配修复：编辑器不撑宽页面 / 矮屏 hero 高度 /
          小屏字号细节（手机 + iPad 各尺寸）
   ============================================================ */
/* iPad（≤1000）：贴纸 left:92-98% 会把页面撑出 5px 横向滚动条；
   给 page-block 裁剪而非隐藏——贴纸大部分保留，仅裁掉出血边缘 */
@media(max-width:1000px){
  .page-block{overflow:hidden}
}
/* 手机：编辑器舞台防撑宽（editor-phone 曾把页面撑到 439px）；贴纸隐藏（JS 随机
   left:92-98% 会把页面撑出横向滚动条，手机上贴纸点缀意义不大，与 reduced-motion 同处理） */
@media(max-width:640px){
  .sticker-pop{display:none}
  .editor-stage{overflow:hidden}
  .editor-canvas{overflow:hidden;min-width:0}
  .editor-phone{width:200px;height:430px;border-radius:32px}
  .phone-content h3{font-size:30px;margin-top:55px}
  .canvas-top{left:12px;right:12px;font-size:8px}
}
/* 矮屏手机（如 iPhone SE 375x667）：hero 严格贴合视口，底部条不出界 */
@media(max-width:480px) and (max-height:740px){
  .hero{height:100svh;min-height:auto}
  .hero-photo{min-height:100svh}
  .hero-copy{padding-bottom:52px}
  .hero h1{font-size:54px;letter-spacing:-2px;line-height:.92;margin-bottom:14px}
  .hero-word{font-size:72px}
  .hero-bottom{bottom:10px;font-size:9px}
  .lead{font-size:15px;line-height:1.4;margin-bottom:16px}
  .hero-copy .mono{margin-bottom:10px;font-size:9px}
}
/* 超窄屏（≤360）：更克制 */
@media(max-width:360px){
  .hero h1{font-size:48px}
  .hero-word{font-size:64px}
  .lead{font-size:14px}
  .yellow-btn{padding:11px 15px;font-size:12px;gap:18px}
  .hero-sticker{width:72px;height:72px;right:3%;top:44%}
  .ticker{font-size:10px}
}

/* ============================================================
   V5.5 · 手机首屏「单卡聚焦」：隐藏多余漂浮项目/DEMO大字/贴纸，
          只留一张代表卡居中；标题区在上、卡片区在下（App 落地页式）
   ============================================================ */
@media(max-width:640px){
  .hero{display:flex;flex-direction:column;min-height:100svh;padding-top:76px}
  .hero-copy{order:1;position:relative;grid-column:auto;grid-row:auto;align-self:auto;padding:0 18px 0;color:var(--ink)}
  .hero-photo{order:2;position:relative;grid-column:auto;grid-row:auto;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;background:transparent}
  .hero-glow{opacity:.3;width:70vw;height:70vw;right:-20%;top:12%}
  .hero-grid{opacity:.2}
  .hero-word{display:none}
  .hero-sticker{display:none}
  .hero-drift{display:none}
  .hero-drift.d5{display:block;position:static;animation:none;transform:none;width:fit-content;margin:0 auto}
  .hero-drift.d5 .hero-project{transform:rotate(-3deg);width:min(80vw,300px);box-shadow:6px 6px 0 rgba(33,7,46,.9)}
  html.booted .hero-drift.d5{animation:bootPop .6s cubic-bezier(.22,1,.36,1) both}
  .hero-copy .mono{margin-bottom:14px}
  .hero h1{margin-bottom:18px}
  .lead{margin-bottom:24px}
}
/* 矮屏手机：进一步收紧，保证卡片仍完整露出 */
@media(max-width:480px) and (max-height:740px){
  .hero{padding-top:60px}
  .hero h1{font-size:52px;line-height:.95;margin-bottom:14px}
  .lead{font-size:14px;line-height:1.4;margin-bottom:18px}
  .hero-copy .mono{font-size:9px;margin-bottom:10px}
  .yellow-btn{padding:12px 16px}
  .hero-drift.d5 .hero-project{width:min(74vw,270px)}
}

/* ============================================================
   V5.6 · 移动端滚动衔接修复：
   1) 滚动到下一屏中途，上一屏残留内容不再瞬间消失（screen-enter 常显）
   2) 手机端改为单屏单页（page-block 固定一屏高），配合逐页内容压缩
   ============================================================ */
@media(max-width:1000px){
  html.js-ready .page-block .screen-enter{opacity:1;transform:none}
  .page-block.active .screen-enter{opacity:1;transform:none}
}

/* ============================================================
   V5.6 · 移动端滚动衔接修复：
   1) 滚动到下一屏中途，上一屏残留内容不再瞬间消失（screen-enter 常显）
   2) 手机端改为单屏单页（page-block 固定一屏高），配合逐页内容压缩
   ============================================================ */
@media(max-width:1000px){
  html.js-ready .page-block .screen-enter{opacity:1;transform:none}
  .page-block.active .screen-enter{opacity:1;transform:none}
}

/* ---- V5.6 · 手机单屏单页：逐页压缩 ---- */
@media(max-width:640px){
  .page-block{height:100svh;min-height:0;overflow:hidden}

  /* 02 PROBLEM：6 卡改 2 列网格，卡缩小，头部收紧 */
  .problem-section{padding:0 18px}
  .problem{padding:98px 18px 0}
  .problem-head{margin:0 0 12px}
  .problem-head h2{font-size:40px;letter-spacing:-2px;margin:0 0 8px}
  .problem-head p{font-size:12px;line-height:1.4;max-width:none;margin:0}
  .pain-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .pain-card{min-height:0;height:112px}
  .pain-inner{padding:10px 12px;gap:4px}
  .pain-inner b{font-size:15px;line-height:1.1}
  .pain-inner small,.pain-inner em{font-size:9px;line-height:1.3}
  .problem-pivot{margin-top:12px;padding:12px 14px;font-size:14px}
  .problem-pivot small{font-size:9px}
  .top-rule{margin-bottom:10px}

  /* 03 TEMPLATES（product）：标题收紧 + 卡片带高度压缩 */
  .product-section{padding-top:44px}
  .section-head h2{font-size:44px;letter-spacing:-2px;margin:0 0 8px}
  .section-head p{font-size:12px;margin:0}
  .product-rail{margin-top:14px}
  .demo-card{min-width:78vw}
  .card-screen{height:340px}
  .screen-top{font-size:9px}
  .screen-title{font-size:34px}
  .card-meta{font-size:10px;padding:10px 12px}
  .card-try{font-size:10px;padding:8px 10px}

  /* 04 FEATURES：accordion 收紧 + 视觉区压缩（保留，压到最小可读） */
  .feature-copy{padding:34px 18px 22px}
  .feature-copy .mono{margin-bottom:8px}
  .feature-copy h2{font-size:42px;letter-spacing:-2px;margin:0 0 18px}
  .acc{padding:10px 0;gap:6px}
  .acc span{font-size:15px}
  .acc b{font-size:17px}
  .acc p{font-size:11px;line-height:1.4;margin-top:2px}
  .feature-visual{min-height:330px}
  .browser-frame{width:86%;box-shadow:8px 8px 0 rgba(33,7,46,.9)}
  .browser-body{padding:14px}
  .fake-hero{min-height:150px;padding:26px 14px 12px;margin-top:10px}
  .fake-hero h3{font-size:34px;margin:14px 0}
  .fake-hero small{font-size:8px}
  .fake-button{padding:7px 10px;font-size:9px}
  .fake-stat{padding:10px 0;gap:8px}
  .fake-stat b{font-size:26px}
  .visual-tag{right:12px;bottom:12px;padding:5px 8px;font-size:8px}
  .instant-demo{display:none}

  /* 05 EDITOR：head 收紧 + 舞台压高 + 手机框缩小 */
  .editor-section{padding:36px 18px 18px}
  .editor-head{margin:0}
  .editor-head h2{font-size:42px;letter-spacing:-2px;margin:0}
  .editor-head p{font-size:12px;margin:6px 0 0}
  .editor-stage{margin-top:18px;min-height:400px}
  .editor-phone{width:190px;height:340px;border-radius:30px}
  .phone-content h3{font-size:24px;margin-top:34px;margin-bottom:14px}
  .phone-content{padding:44px 14px 14px}
  .phone-card{padding:9px}
  .phone-card b{font-size:14px}
  .phone-card span{font-size:8px}
  .phone-button{margin-top:10px;padding:8px;font-size:9px}
  .canvas-top{top:8px;left:10px;right:10px;font-size:8px}
  .side-brand{font-size:15px;margin-bottom:12px}
  .side-item{font-size:8px;padding:6px 4px}
  .side-bottom{padding:7px;font-size:8px}

  /* 06 PROOF：quote 收紧 */
  .testimonial{padding:52px 18px 40px;min-height:0}
  .quote-mark{top:30px;font-size:70px}
  .quote{font-size:36px;letter-spacing:-1.5px;line-height:1.02}
  .quote-by{margin-top:16px;font-size:10px}
  .dots{margin-top:10px;gap:6px}
  .qdot{width:7px;height:7px}

  /* 07 STORY：圆环缩小 + 文案收紧 */
  .story-photo{padding:18px 18px 0}
  .story-art{min-height:300px}
  .story-circle{width:150px;height:150px;font-size:78px}
  .story-circle b{font-size:24px}
  .st-comp{font-size:10px;padding:7px 10px}
  .story-label{font-size:9px;padding:4px 8px}
  .story-copy{padding:28px 18px 16px}
  .story-copy .mono{margin-bottom:6px;font-size:9px}
  .story-copy h2{font-size:40px;letter-spacing:-2px;margin:0 0 12px}
  .story-copy p{font-size:13px;line-height:1.45;margin:0}

  /* 08 RECIPES：3 卡紧凑竖排（美术区压扁 + 文字收紧） */
  .recipes{padding-top:36px}
  .split-head{margin-bottom:10px}
  .split-head h2{font-size:44px;letter-spacing:-2px;margin:0 0 6px}
  .split-head p{font-size:12px;margin:0}
  .recipe-grid{gap:10px}
  .recipe-art{height:150px}
  .recipe-art+.recipe-art{height:150px}
  .recipe-text{padding:10px 12px}
  .recipe-text h3{font-size:18px;margin:0 0 4px}
  .recipe-text p{font-size:10px;line-height:1.35;margin:0 0 6px}
  .recipe-text b{font-size:9px}
  .rq-geo{font-size:10px}
  .rq-lines{margin:4px 0}
  .rq-mid{font-size:9px}
  .rq-step,.rq-toggle,.rq-alert{font-size:9px;padding:4px 6px}

  /* 09 GALLERY：head 收紧 + 卡片略缩 */
  .gallery-head{padding:34px 18px 0}
  .gallery-head h2{font-size:44px;letter-spacing:-2px;margin:0 0 6px}
  .gallery-head p{font-size:12px;margin:0}
  .gallery-rail{padding-top:12px}
  .gallery-card{min-width:230px;height:300px}
  .gc-tag{font-size:9px}
  .socials{padding:16px 18px}
  .socials a{font-size:11px}

  /* 10 START（footer）：整页压缩 */
  .footer{padding:40px 18px 16px}
  .footer-top h3{font-size:42px;letter-spacing:-2px;margin:0 0 10px}
  .footer-top p{font-size:13px;margin:0 0 12px}
  .footer-links{gap:16px}
  .footer-links a{font-size:11px}
  .footer-big{font-size:46px;letter-spacing:-3px;margin-top:6px}
  .footer-bottom{padding-top:10px;gap:5px}
  .footer-bottom span{font-size:9px}
}

/* ---- V5.6 · 修正 STORY / RECIPES 两页裁切 ---- */
@media(max-width:640px){
  .story-photo{padding:10px 18px 0}
  .story-art{min-height:280px}
  .story-circle{width:130px;height:130px;font-size:64px}
  .story-circle b{font-size:20px}
  .st-comp{padding:5px 8px;font-size:9px}
  .story-copy{padding:22px 18px 10px}
  .story-copy .mono{margin-bottom:4px}
  .story-copy h2{font-size:34px;letter-spacing:-1.5px;line-height:.95;margin:0 0 8px}
  .story-copy p{font-size:11px;line-height:1.4;margin:0 0 6px}
  .story-list{margin:0 0 8px}
  .story-list li{padding:7px 0;gap:12px}
  .story-list b{font-size:13px}
  .story-list span{font-size:9px}
  .defense-demo{margin:6px 0 0;padding:10px 12px;max-width:none;box-shadow:4px 4px 0 rgba(33,7,46,.85)}
  .defense-top b{font-size:12px}
  .defense-start{padding:7px 10px;font-size:10px}

  .recipes{padding-top:26px}
  .split-head{margin-bottom:4px}
  .split-head h2{font-size:36px;letter-spacing:-1.5px;margin:0 0 4px}
  .split-head p{font-size:11px;line-height:1.35;margin:0}
  .split-head .lang-pill{font-size:11px;padding:5px 9px;margin-left:0;margin-top:0;transform:rotate(-2deg)}
  .recipe-grid{margin-top:8px;gap:8px}
  .recipe-grid article{padding:0 12px 12px}
  .recipe-art{height:124px;padding:10px;margin:0 -12px 10px}
  .recipe-art>span{top:10px;left:10px;font-size:8px}
  .recipe-art>b{font-size:36px}
  .recipe-grid h3{font-size:19px;margin:5px 0}
  .recipe-grid small{font-size:8px}
}

/* ---- V5.6 · 矮屏（iPhone SE / Galaxy 等 ≤480x760）第二轮压缩 ---- */
@media(max-width:480px) and (max-height:760px){
  .problem-head h2{font-size:32px;margin-bottom:6px}
  .problem-head p{font-size:11px}
  .pain-card{height:88px}
  .pain-inner{padding:8px 10px}
  .pain-inner b{font-size:13px}
  .pain-inner small,.pain-inner em{font-size:8px}
  .problem-pivot{margin-top:8px;padding:10px 12px;font-size:12px}
  .problem-pivot small{font-size:8px}
  .top-rule{margin-bottom:6px}

  .product-section{padding-top:32px}
  .section-head h2{font-size:36px;margin-bottom:6px}
  .section-head p{font-size:11px}
  .product-rail{margin-top:10px}
  .card-screen{height:270px}
  .screen-title{font-size:28px}
  .screen-top{font-size:8px}

  .feature-copy{padding:24px 18px 14px}
  .feature-copy h2{font-size:34px;margin-bottom:10px}
  .acc{padding:7px 0}
  .acc span{font-size:13px}
  .acc b{font-size:14px}
  .acc p{font-size:10px}
  .feature-visual{min-height:250px}
  .fake-hero{min-height:120px;padding:18px 12px 8px}
  .fake-hero h3{font-size:26px;margin:10px 0}
  .browser-body{padding:10px}
  .fake-stat b{font-size:20px}
  .fake-stat{padding:6px 0;gap:6px}

  .editor-section{padding:26px 18px 12px}
  .editor-head h2{font-size:34px}
  .editor-head p{font-size:11px}
  .editor-stage{margin-top:12px;min-height:310px}
  .editor-phone{width:170px;height:280px;border-radius:26px}
  .phone-content{padding:34px 10px 10px}
  .phone-content h3{font-size:20px;margin-top:24px}
  .side-brand{font-size:12px;margin-bottom:8px}
  .side-item{font-size:7px;padding:4px 2px}

  .testimonial{padding:40px 18px 30px}
  .quote{font-size:28px}
  .quote-by{margin-top:12px}
  .quote-mark{top:22px;font-size:54px}
  .dots{margin-top:6px}

  .story-photo{padding:8px 18px 0}
  .story-art{min-height:230px}
  .story-circle{width:110px;height:110px;font-size:52px}
  .story-copy{padding:16px 18px 8px}
  .story-copy h2{font-size:28px;margin-bottom:6px}
  .story-copy p{font-size:10px;line-height:1.35;margin-bottom:4px}
  .story-list li{padding:5px 0}
  .story-list b{font-size:12px}
  .story-list span{font-size:8px}
  .defense-demo{padding:8px 10px}
  .defense-top b{font-size:11px}
  .defense-start{padding:5px 8px;font-size:9px}

  .recipes{padding-top:20px}
  .split-head h2{font-size:30px;margin-bottom:2px}
  .split-head p{font-size:10px}
  .recipe-grid{margin-top:6px;gap:6px}
  .recipe-grid article{padding:0 10px 10px}
  .recipe-art{height:100px;padding:8px;margin:0 -10px 8px}
  .recipe-art>b{font-size:28px}
  .recipe-grid h3{font-size:16px;margin:4px 0}
  .rq-step,.rq-toggle,.rq-alert{font-size:8px;padding:3px 4px}

  .gallery-head{padding:26px 18px 0}
  .gallery-head h2{font-size:36px}
  .gallery-head p{font-size:11px}
  .gallery-rail{padding-top:8px}
  .gallery-card{min-width:190px;height:250px}
  .socials{padding:10px 18px}

  .footer{padding:28px 18px 12px}
  .footer-top h3{font-size:34px;margin-bottom:6px}
  .footer-top p{font-size:12px;margin-bottom:8px}
  .footer-links{gap:10px}
  .footer-links a{font-size:10px}
  .footer-big{font-size:36px;margin-top:4px}
  .footer-bottom{padding-top:6px;gap:3px}
  .footer-bottom span{font-size:8px}
}

/* ---- V5.6 · 末轮微调：矮屏 RECIPES/GALLERY/START；窄桌面(1001-1150) FEATURES/STORY ---- */
@media(max-width:480px) and (max-height:760px){
  .recipe-grid{gap:4px}
  .recipe-grid article{padding:0 8px 8px}
  .recipe-art{height:92px;padding:7px;margin:0 -8px 6px}
  .recipe-art>b{font-size:24px}
  .recipe-grid h3{font-size:15px;margin:3px 0}
  .recipe-grid small{font-size:7px}
  .socials{padding:6px 18px}
  .gallery-card{min-width:180px;height:240px}
  .gallery-head{padding:22px 18px 0}
  .footer{padding:22px 18px 10px}
  .footer-top h3{font-size:30px;margin-bottom:4px}
  .footer-top p{font-size:11px;margin-bottom:6px}
  .footer-links{gap:8px}
  .footer-links a{font-size:9px}
  .footer-big{font-size:30px;margin-top:2px}
  .footer-bottom{padding-top:4px}
}
/* 窄桌面/大 iPad 竖屏（1001-1150px，走桌面双列版式但纵向偏紧）：压 40-60px */
@media(min-width:1001px) and (max-width:1150px){
  .feature-copy{padding:80px var(--pad)}
  .feature-copy h2{margin:10px 0 40px}
  .acc{padding:14px 0}
  .feature-visual{min-height:620px}
  .story-photo{padding:60px var(--pad)}
  .story-art{min-height:420px}
  .story-copy{padding:60px var(--pad)}
  .story-copy h2{margin:12px 0 30px}
  .story-list{margin-bottom:24px}
  .recipes{padding:70px 0 0}
  .recipe-art{height:360px}
  .footer{padding:70px var(--pad) 16px}
  .footer-top h3{margin-bottom:22px}
}

/* ---- V5.6 · 终修：Galaxy(≤480x800) 与 iPadPro129(1001-1150) 残留裁切 ---- */
@media(max-width:480px) and (max-height:800px){
  .recipe-grid{gap:2px}
  .recipe-grid article{padding:0 6px 6px}
  .recipe-art{height:80px;padding:6px;margin:0 -6px 5px}
  .recipe-art>b{font-size:22px}
  .recipe-grid h3{font-size:14px;margin:2px 0}
  .recipe-grid small{font-size:7px}
  .footer{padding:16px 18px 8px}
  .footer-top h3{font-size:26px;margin-bottom:4px}
  .footer-top p{font-size:11px;margin-bottom:5px}
  .footer-links{gap:5px}
  .footer-links a{font-size:9px}
  .footer-big{font-size:24px;margin-top:2px}
  .footer-bottom{padding-top:2px;gap:2px}
}
@media(min-width:1001px) and (max-width:1150px){
  .sticker-pop{display:none}
  .instant-demo{display:none}
  .feature-copy{padding:56px var(--pad)}
  .feature-copy h2{font-size:50px;margin:8px 0 26px}
  .acc{padding:9px 0}
  .feature-visual{min-height:580px}
  .story-photo{padding:40px var(--pad)}
  .story-art{min-height:360px}
  .story-copy{padding:40px var(--pad)}
  .story-copy h2{margin:8px 0 18px}
  .story-list li{padding:10px 0}
  .recipes{padding:48px 0 0}
  .recipe-art{height:310px}
  .recipe-grid article{padding:0 14px 18px}
  .footer{padding:48px var(--pad) 12px}
  .footer-top h3{margin-bottom:14px}
  .footer-big{margin-top:4px}
}

/* ---- V5.6 修正：pain-card 双面卡压缩选择器重写（实际 DOM 为 .pain-face h3/p，非 b/small）
       并清除窄屏的桌面错落位移（rotate/translateY 导致卡片视觉重叠裁切） ---- */
@media(max-width:640px){
  .pain-face{padding:9px 12px}
  .pain-face h3{font-size:14px;line-height:1.1;margin:2px 0 0}
  .pain-face p{font-size:8.5px;line-height:1.25;margin:0}
  .pain-no{font-size:8px}
  .pain-inner{height:100%}
  .pain-card,.pain-card:nth-child(n){transform:none}
}
@media(min-width:641px) and (max-width:1000px){
  .pain-card,.pain-card:nth-child(n){transform:none}
}
@media(max-width:480px) and (max-height:760px){
  .pain-face{padding:7px 10px}
  .pain-face h3{font-size:12px}
  .pain-face p{font-size:7.5px}
}

/* ---- V5.6 · 超窄屏（≤360px）：翻转背面 p 两行截断，防 3 行文字撑出卡底 ---- */
@media(max-width:360px){
  .pain-back p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- V5.7 · iPad12.9 修复：①problem 屏标题加 98px 顶距避开固定头（原 padding 0 清掉避让，
       标题首行被 ticker+nav 遮挡）；②1001-1150 隐藏 sticker-pop（原仅 ≤1000 隐藏，
       iPad 12.9 右缘贴纸横向溢出） ---- */

/* ---- V5.7 · 桌面低视口（如 1440x900 / 1920x1080）裁切修复：feature/story 内容超高时
       改为自然滚动（min-height:100svh 保底，内容多则撑高、滚动可见，不再被 overflow 裁掉）；
       problem 底部 padding 收紧，避免 pivot 被屏底裁 15px ---- */
@media(min-width:1001px){
  .feature-showcase,.story-section{height:auto;min-height:100svh}
  .problem{padding-bottom:clamp(20px,3svh,40px)}
}

/* ---- V5.7 · 低宽低高桌面（如 1440x900）：hero project-c 卡上移避开屏底裁切；
       problem pivot 收紧，末行文字不再被裁 ---- */
@media(min-width:1001px) and (max-width:1500px) and (max-height:1000px){
  .project-c{bottom:9%}
  .problem{padding-bottom:clamp(4px,.5svh,12px)}
  .problem-pivot{font-size:clamp(13px,1.4vw,16px);line-height:1.4;padding-top:clamp(10px,1.5svh,18px)}
}

/* ---- V5.8 · 测试版提示弹窗（点击进入编辑器时弹出，契合营销页风格：
       cream 卡片 + 硬阴影 + 黄色贴纸印章 + Fraunces 标题 + 品红强调） ---- */
.beta-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:18px;background:rgba(33,7,46,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.beta-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.beta-card{position:relative;max-width:440px;width:100%;background:var(--cream);border:2px solid var(--ink);box-shadow:10px 10px 0 rgba(33,7,46,.9);padding:34px 30px 28px;transform:translateY(14px) scale(.96);transition:transform .35s cubic-bezier(.22,1.4,.4,1)}
.beta-modal.open .beta-card{transform:translateY(0) scale(1)}
.beta-stamp{position:absolute;top:-16px;right:14px;background:var(--yellow);border:2px solid var(--ink);padding:5px 10px;font:700 11px 'DM Mono','Noto Sans SC',monospace;letter-spacing:.08em;transform:rotate(6deg);box-shadow:3px 3px 0 rgba(33,7,46,.9)}
.beta-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;background:transparent;font:700 16px 'DM Mono','Noto Sans SC',monospace;cursor:pointer;line-height:1;color:var(--ink);transition:.2s}
.beta-close:hover{background:var(--ink);color:var(--cream)}
.beta-title{font:800 34px/.95 'Fraunces','Noto Serif SC',serif;letter-spacing:-2px;margin:0 0 14px;color:var(--ink)}
.beta-title i{font-style:normal;color:#9c43c8}
.beta-note,.beta-note2{font-size:14px;line-height:1.5;margin:0 0 8px;color:var(--ink)}
.beta-note2{margin-bottom:22px}
.beta-note2 strong{color:#9c43c8}
.beta-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.beta-go{display:inline-flex;align-items:center;gap:12px;background:var(--yellow);border:1px solid var(--ink);border-radius:999px;padding:12px 18px;font-weight:700;font-size:13px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink);transition:.25s}
.beta-go:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.beta-go span{font-size:17px}
.beta-skip{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:12px 16px;font-size:12px;font-family:'DM Sans','Noto Sans SC',Arial,sans-serif;font-weight:600;cursor:pointer;color:var(--ink);transition:.25s}
.beta-skip:hover{background:rgba(33,7,46,.06)}
@media(max-width:640px){
  .beta-card{padding:28px 22px 24px;box-shadow:6px 6px 0 rgba(33,7,46,.9)}
  .beta-title{font-size:28px}
  .beta-note,.beta-note2{font-size:13px}
}

.beta-note3{margin:10px 0 0;padding:10px 12px;background:rgba(156,67,200,.08);border-left:3px solid #9c43c8;font-size:12.5px;line-height:1.5;color:var(--ink)}
@media(max-width:640px){.beta-note3{font-size:12px}}

/* ===== v471：站内公告条（营销页） ===== */
.mkt-ann{display:flex;align-items:center;gap:10px;background:#101411;color:#f5f6f3;font-size:12px;padding:8px 16px;position:relative;z-index:60}
.mkt-ann[hidden]{display:none}
.mkt-ann .ann-ico{font-size:14px;flex:none}
.mkt-ann .ann-body{display:flex;gap:8px;align-items:baseline;min-width:0;flex:1}
.mkt-ann .ann-body b{font-size:12px;flex:none}
.mkt-ann .ann-body span{color:#c9cdc9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-ann .ann-close{border:0;background:transparent;color:#9aa09a;font-size:16px;padding:0 4px;cursor:pointer;line-height:1;flex:none}
.mkt-ann .ann-close:hover{color:#fff}