*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--bg:#f5f5f5;
--text:#1f2937;
--dim:#667085;
--faint:#98a2b3;
--line:rgba(31,41,55,.16);
--surface:rgba(255,255,255,.56);
--glass:rgba(255,255,255,.68);
--shadow:rgba(15,23,42,.12);
--accent:#3b82f6}
html[data-theme=dark]{--bg:#000;
--text:#f0f2f5;
--dim:#b0b6c0;
--faint:#727986;
--line:rgba(255,255,255,.17);
--surface:rgba(255,255,255,.08);
--glass:rgba(255,255,255,.1);
--shadow:rgba(0,0,0,.38)}
body{margin:0;
background:var(--bg);
color:var(--text);
font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
line-height:1.55;
transition:background .6s,color .6s}
body.js-loading{overflow:hidden}
a{color:inherit}
button{font:inherit}
.nav{position:fixed;
z-index:30;
inset:0 0 auto;
padding:24px 0;
transition:.5s cubic-bezier(.23,1,.32,1)}
.nav.scrolled{padding:16px 0}
.nav-glass{max-width:1100px;
margin:auto;
padding:0 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap:32px}
.nav.scrolled .nav-glass{width:max-content;
max-width:calc(100vw - 32px);
justify-content:center;
margin-top:12px;
padding:14px 28px;
border:1px solid var(--line);
border-radius:20px;
background:var(--surface);
backdrop-filter:blur(20px) saturate(1.2);
box-shadow:0 4px 30px var(--shadow)}
.nav-brand{font-family:'Playfair Display',Georgia,serif;
font-size:22px;
font-weight:500;
text-decoration:none}
.nav-links{display:flex;
align-items:center;
gap:32px}
.nav-link{position:relative;
text-decoration:none;
color:var(--dim);
font-size:13px;
padding:6px 0}
.nav-link:after{content:"";
position:absolute;
width:4px;
height:4px;
left:50%;
bottom:0;
border-radius:100%;
background:var(--accent);
transform:translateX(-50%) scale(0);
transition:.3s}
.nav-link.active:after{transform:translateX(-50%) scale(1)}
.theme-toggle,.lang-toggle{position:fixed;
z-index:40;
width:44px;
height:44px;
border:1px solid var(--line);
background:var(--surface);
color:var(--text);
backdrop-filter:blur(16px);
border-radius:50%;
cursor:pointer;
transition:.25s}
.theme-toggle{right:40px;
top:40px}
.lang-toggle{right:40px;
top:94px;
font-size:11px;
font-weight:700}
.theme-toggle:hover,.lang-toggle:hover{transform:scale(1.08)}
.theme-toggle svg{width:20px;
fill:none;
stroke:currentColor;
stroke-width:1.6}
.sun{opacity:0;
transform:scale(.5);
transform-origin:center}
.moon,.sun{transition:.3s}
html[data-theme=dark] .moon{opacity:0;
transform:scale(.5)}
html[data-theme=dark] .sun{opacity:1;
transform:scale(1)}
.cursor{position:fixed;
z-index:99;
width:12px;
height:12px;
transform:translate(-50%,-50%);
pointer-events:none;
background:var(--accent);
border-radius:50%;
opacity:.9;
transition:width .3s,height .3s,border-radius .3s,opacity .3s}
.cursor.hover{width:48px;
height:48px;
background:transparent;
border:1.5px solid var(--accent)}
.hero{min-height:74vh;
padding:clamp(170px,22vh,250px) 24px 90px;
text-align:center;
display:grid;
place-content:center}
.eyebrow,.chapter>span,.scene-caption>span,.summary-kicker{text-transform:uppercase;
letter-spacing:.15em;
font-size:11px;
color:var(--dim);
font-weight:700}
.hero h1{font:500 clamp(58px,11vw,150px)/.95 'Playfair Display',Georgia,serif;
letter-spacing:-.07em;
margin:16px 0 18px}
.hero-sub{font-size:clamp(18px,2.2vw,28px);
margin:0}
.hero-sub.zh{font-size:15px;
color:var(--dim);
margin-top:9px}
.summary{max-width:720px;
border:1px solid var(--line);
background:var(--surface);
backdrop-filter:blur(12px);
border-radius:16px;
padding:26px 32px;
margin:0 auto 19vh;
font-size:16px}
.summary p{margin:12px 0}
.summary .cn{color:var(--dim);
font-size:14px}
.chapter{max-width:760px;
margin:0 auto;
padding:12vh 24px 6vh}
.chapter h2{font:500 clamp(35px,5.5vw,70px)/1.03 'Playfair Display',Georgia,serif;
letter-spacing:-.055em;
margin:14px 0 18px}
.chapter p{max-width:500px;
color:var(--dim);
font-size:17px;
margin:0}
.scroll-scene{height:calc(250vh + 380px)}
.scene-sticky{position:sticky;
top:0;
min-height:100vh;
overflow:hidden;
display:grid;
place-items:center;
padding:100px 24px 40px}
.scene-caption{position:absolute;
left:max(5vw,32px);
top:calc(50% - 90px);
z-index:5;
width:180px}
.scene-caption strong{display:block;
font:500 28px/1 Georgia,serif;
margin:7px 0}
.scene-caption p{font-size:12px;
color:var(--dim);
margin:0}
.progress{position:absolute;
right:max(5vw,32px);
top:50%;
display:grid;
gap:9px}
.progress i{height:5px;
width:5px;
border:1px solid var(--faint);
border-radius:50%;
transition:.3s}
.scroll-scene.is-active .progress i:first-child{background:var(--accent);
border-color:var(--accent)}
.collect-space{position:relative;
width:min(65vw,830px);
height:min(58vw,620px)}
.depth{position:absolute;
width:clamp(72px,10vw,130px);
height:clamp(105px,15vw,180px);
object-fit:cover;
opacity:var(--depthop,.38);
filter:saturate(.45);
box-shadow:0 13px 30px rgba(0,0,0,.18);
transform:translate3d(var(--depthx,0),var(--depthy,0),0) rotate(var(--depthr,0deg));
transition:transform .1s,opacity .1s}
.d1{left:8%;
top:33%;
--depthr:-21deg}
.d2{right:9%;
top:8%;
--depthr:17deg}
.d3{right:11%;
bottom:28%;
--depthr:-7deg}
.d4{left:21%;
bottom:4%;
--depthr:10deg}
.d5{left:42%;
top:4%;
--depthr:-5deg}
.d6{right:32%;
bottom:0;
--depthr:22deg}
.ref-card{position:absolute;
margin:0;
width:clamp(160px,23vw,285px);
padding:8px;
background:#151515;
box-shadow:0 22px 45px rgba(0,0,0,.26);
transition:transform .1s linear,opacity .2s}
.ref-card img{width:100%;
height:clamp(210px,31vw,345px);
object-fit:cover;
display:block}
.ref-card figcaption{color:#fff;
font-size:10px;
letter-spacing:.08em;
padding:8px 3px 2px;
text-transform:uppercase}
.r1{left:-2%;
top:8%;
transform:translate3d(var(--r1x,0),var(--r1y,0),0) rotate(-13deg)}
.r2{right:-2%;
bottom:4%;
transform:translate3d(var(--r2x,0),var(--r2y,0),0) rotate(11deg)}
.r3{left:33%;
top:20%;
transform:translate3d(var(--r3x,0),var(--r3y,0),0) scale(var(--r3s,1)) rotate(4deg);
z-index:2}
.note-card{position:absolute;
z-index:3;
width:220px;
background:var(--glass);
border:1px solid var(--line);
border-radius:12px;
backdrop-filter:blur(12px);
padding:17px;
left:39%;
top:40%;
opacity:var(--note,0);
transform:translateY(var(--notey,30px));
transition:transform .1s,opacity .1s}
.note-card small,.prompt small,.brief small{font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--dim)}
.note-card p{font:500 18px/1.25 Georgia,serif;
margin:7px 0 0}
.extract-board{width:min(72vw,970px);
height:min(52vw,580px);
position:relative}
.analysis-card{position:absolute;
width:clamp(230px,21vw,310px);
left:0;
top:9%;
background:#111;
padding:10px;
box-shadow:0 25px 45px rgba(0,0,0,.24);
transform:translateX(var(--anx,-10vw));
transition:transform .1s}
.analysis-image{position:relative;aspect-ratio:506/900;background:#111}
.analysis-image>img{width:100%;
height:100%;
object-fit:contain;
display:block}
.pin{position:absolute;
color:#fff;
font-size:10px;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase}
.pin:before{content:"";
display:inline-block;
width:42px;
border-top:1px solid #fff;
margin:0 7px 3px 0}
.p1{top:25%;
left:10%}
.p2{top:54%;
right:-18%}
.p3{bottom:22%;
left:-17%}
.prompt{margin-top:10px;
padding:12px;
background:#1e1e1e;
color:#fff}
.prompt p{font-size:11px;
margin:5px 0}
.desktop-shot{position:absolute;
margin:0;
right:0;
bottom:8%;
width:68%;
border-radius:12px;
overflow:hidden;
box-shadow:0 24px 55px rgba(0,0,0,.35);
transform:translateX(var(--dex,17vw));
transition:transform .1s}
.desktop-shot img{display:block;
width:100%}
.brief{position:absolute;
top:16%;
left:27%;
max-width:355px;
border:1px solid var(--line);
background:var(--glass);
padding:17px;
border-radius:12px;
transform:translateY(var(--briefy,-11vh));
transition:transform .1s}
.brief p{font:500 20px/1.2 Georgia,serif;
margin:7px 0 0}
.directions{width:min(64vw,900px);
height:clamp(280px,32vw,420px);
position:relative;
margin-left:170px;
perspective:1300px;
transform-style:preserve-3d;
transform:translateY(36px)}
.directions article{height:clamp(260px,29vw,380px);
background:var(--surface);
border:1px solid var(--line);
overflow:hidden;
padding:14px;
position:relative;
transform:translateY(var(--diry,12vh));
transition:transform .1s}
.directions article:nth-child(1){position:absolute;left:0;top:12%;width:35%;height:78%;transform:translateY(var(--diry,12vh)) rotateY(20deg) rotateZ(-4deg);transform-origin:right center;z-index:1}
.directions article:nth-child(2){position:absolute;left:29%;top:0;width:43%;height:100%;transform:translateY(var(--diry,12vh)) translateZ(36px);z-index:3;box-shadow:0 28px 60px rgba(0,0,0,.28)}
.directions article:nth-child(3){position:absolute;right:0;top:15%;width:34%;height:74%;transform:translateY(var(--diry,12vh)) rotateY(-22deg) rotateZ(4deg);transform-origin:left center;z-index:2}
.directions img{position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.64;
filter:saturate(.75)}
.directions h3,.directions p,.directions span{position:relative;
margin:0;
text-shadow:0 1px 10px #000;
color:#fff}
.directions p{font-size:11px}
.directions h3{font:500 clamp(18px,2vw,28px)/1.02 Georgia,serif;
position:absolute;
bottom:18px;
left:14px;
right:14px}
.directions .minimal{background:linear-gradient(145deg,#222,#665a4d)}
.directions .minimal span{position:absolute;
bottom:19px;
left:14px;
font-size:11px}
.agent-line{position:absolute;
bottom:15%;
right:15%;
background:#101010;
color:#fff;
padding:12px 17px;
border-radius:10px;
font-size:12px;
max-width:285px;
transform:translateX(var(--agentx,16vw));
transition:transform .1s}
.agent-line span{height:6px;
width:6px;
background:#a4ff0e;
border-radius:50%;
display:inline-block}
.agent-line p{margin:5px 0 0}
.final-devices{width:min(70vw,1010px);
position:relative;
min-height:min(48vw,630px);
transform:translateY(20px)}
.final-desktop{position:absolute;
margin:0;
width:89%;
top:0;
left:0;
border-radius:14px;
overflow:hidden;
box-shadow:0 30px 70px rgba(0,0,0,.38);
transform:translateX(var(--finalx,-11vw));
transition:transform .1s}
.final-desktop img{display:block;
width:100%}
.phone{position:absolute;
margin:0;
right:0;
bottom:0;
width:18%;
padding:5px;
background:#111;
border:4px solid #242424;
border-radius:22px;
box-shadow:0 25px 45px rgba(0,0,0,.4);
transform:translateX(var(--phonex,15vw)) rotate(4deg);
transition:transform .1s}
.phone img{display:block;
width:100%;
border-radius:13px}
.final-copy{position:absolute;
text-align:center;
bottom:5%;
opacity:var(--endop,0);
transform:translateY(var(--endy,24px));
transition:.1s}
.final-copy h2{font:500 clamp(44px,7vw,88px)/1 Georgia,serif;
letter-spacing:-.06em;
margin:0}
.final-copy p{margin:11px 0;
color:var(--dim)}
footer{text-align:center;
padding:40px 24px 60px;
color:var(--faint);
font-size:12px;
letter-spacing:.08em}
.js-loading .reveal{opacity:0;
transform:translateY(24px);
transition:.8s cubic-bezier(.23,1,.32,1)}
.reveal.visible{opacity:1;
transform:none}
#loader{position:fixed;
inset:0;
z-index:999;
background:var(--bg);
display:grid;
place-content:center;
gap:22px;
transition:.6s}
.loader-word{font:500 clamp(32px,5vw,72px)/1 Georgia,serif;
letter-spacing:-.02em}
.loader-progress{display:flex;
gap:12px;
align-items:center}
.loader-progress i{display:block;
width:240px;
height:6px;
border-radius:3px;
background:var(--line);
overflow:hidden}
.loader-progress b{height:100%;
display:block;
background:var(--accent);
width:0}
.loader-progress span{font-size:12px;
color:var(--accent);
font-variant-numeric:tabular-nums}
.done{opacity:0;
visibility:hidden;
pointer-events:none}
@media(max-width:768px){.nav{padding:18px 0}
.nav-glass{padding:0 20px;
padding-right:74px}
.nav-links{gap:18px}
.nav-link{font-size:12px}
.theme-toggle{top:18px;
right:14px;
width:44px;
height:44px}
.lang-toggle{top:68px;
right:14px;
width:44px;
height:44px}
.cursor{display:none}
.hero{min-height:68vh;
padding-top:160px}
.summary{margin:0 20px 10vh;
padding:23px}
.scroll-scene{height:170vh}
.scene-sticky{padding:105px 16px 30px;
align-items:end}
.scene-caption{left:24px;
top:106px;
width:calc(100% - 48px)}
.scene-caption strong{font-size:24px}
.scene-caption p{max-width:245px}
.progress{display:none}
.chapter{padding:14vh 24px 7vh}
.chapter p{font-size:16px}
.collect-space{width:100%;
height:68vh}
.ref-card{width:42vw}
.ref-card img{height:48vw}
.r1{left:3%;
top:10%}
.r2{right:0;
bottom:9%}
.r3{left:30%;
top:29%}
.note-card{left:12%;
top:48%;
width:196px}
.extract-board{width:100%;
height:59vh}
.analysis-card{width:49vw;
top:10%;
left:0}
.analysis-card>img{height:59vw}
.desktop-shot{width:67%;
right:0;
bottom:8%}
.pin{font-size:7px}
.pin:before{width:25px}
.brief{left:0;
top:23%;
max-width:250px}
.brief p{font-size:17px}
.directions{width:100%;
margin:0;
gap:7px;
transform:translateY(0)}
.directions article{height:44vw;
padding:8px}
.directions h3{left:8px;
bottom:10px;
font-size:15px}
.directions .minimal span{left:8px;
bottom:10px;
font-size:8px}
.agent-line{bottom:8%;
right:4%;
font-size:11px}
.final-devices{width:100%;
min-height:64vw}
.final-desktop{width:91%}
.phone{width:23%;
border-radius:14px}
.final-copy{bottom:6%}
.final-copy p{font-size:13px;
padding:0 25px}
html[lang=zh] [data-i18n]{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important}
.scroll-scene{height:auto;
min-height:650px}
.depth{transform:none!important;
opacity:.38!important}
.scene-sticky{position:relative}
.ref-card,.analysis-card,.desktop-shot,.brief,.directions article,.agent-line,.final-desktop,.phone,.final-copy{transform:none!important;
opacity:1!important}
.note-card{--note:1;
--notey:0}
.final-copy{--endop:1;
--endy:0}
.reveal{opacity:1;
transform:none}
}

/* Creative OS content uses the shared sans-serif interface voice. */
.hero h1,.chapter h2,.scene-caption strong,.note-card p,.brief p,
.directions h3,.final-copy h2,.loader-word{
  font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:600;
}
.directions .minimal h3{bottom:52px}
.brief{top:max(130px,16%)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (max-width:390px){
  .nav-glass{padding-left:14px;padding-right:64px;gap:12px}
  .nav-brand{font-size:20px}
  .nav-links{gap:9px;white-space:nowrap}
  .nav-link{font-size:10px;white-space:nowrap}
  .nav.scrolled .nav-glass{padding:12px 16px}
}
@media (max-width:768px){
  .hero{min-height:unset;padding:150px 24px 34px}
  .summary{margin-bottom:7vh}
  .depth{display:none}
  .brief{top:130px}
  .directions .minimal h3{bottom:36px}
}

/* Each pinned scene reveals its beats in order; static reading keeps all visible. */
.desktop-shot{opacity:var(--uiop,0)}
.p1{opacity:var(--pin1,0)}.p2{opacity:var(--pin2,0)}.p3{opacity:var(--pin3,0)}
.prompt{opacity:var(--promptop,0)}
.brief{opacity:var(--briefop,0)}
.directions article{opacity:var(--dirop,0)}
.agent-line{opacity:var(--agentop,0)}
.phone{opacity:var(--phoneop,0)}
body:not(.js) .desktop-shot,body:not(.js) .p1,body:not(.js) .p2,
body:not(.js) .p3,body:not(.js) .prompt,body:not(.js) .brief,
body:not(.js) .directions article,body:not(.js) .agent-line,
body:not(.js) .phone{opacity:1}
@media(prefers-reduced-motion:reduce){.desktop-shot,.p1,.p2,.p3,.prompt,.brief,.directions article,.agent-line,.phone{opacity:1!important}}

/* The language switch supplies the complete alternate introduction. */
.summary .cn{display:none}

/* Final review: compact introduction and robust static reading. */
.hero{min-height:unset;padding:160px 24px 40px}
.hero h1{font-size:clamp(52px,8.4vw,110px);letter-spacing:-.055em}
.summary{margin-bottom:9vh;background:transparent;backdrop-filter:none}
.nav-link{white-space:nowrap}
.cursor{opacity:0}
.cursor.seen{opacity:.9}
body:not(.js) .scroll-scene{height:auto}
body:not(.js) .scene-sticky{position:relative;min-height:800px}
body:not(.js) .note-card,body:not(.js) .final-copy{opacity:1;transform:none}
body:not(.js) .cursor{display:none}
body:not(.js) .ref-card,body:not(.js) .analysis-card,body:not(.js) .desktop-shot,
body:not(.js) .brief,body:not(.js) .directions article,body:not(.js) .agent-line,
body:not(.js) .final-desktop,body:not(.js) .phone{transform:none}
::view-transition-old(root){animation:cos-shrink .6s ease-in-out forwards}
::view-transition-new(root){animation:cos-expand .6s ease-in-out forwards}
@keyframes cos-expand{from{clip-path:circle(0% at var(--x,50%) var(--y,50%))}to{clip-path:circle(150% at var(--x,50%) var(--y,50%))}}
@keyframes cos-shrink{from{clip-path:circle(150% at var(--x,50%) var(--y,50%))}to{clip-path:circle(0% at var(--x,50%) var(--y,50%))}}
@media(max-width:768px){
  .hero{padding:145px 24px 34px}
  .hero h1{font-size:clamp(44px,12vw,72px)}
  .summary{margin-bottom:6vh}
  body:not(.js) .scene-sticky{min-height:680px}
  .brief{top:185px;left:24px;max-width:calc(100% - 48px)}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none}}
@media(max-width:768px){
  .nav.scrolled .nav-glass{margin-left:14px;margin-right:72px;max-width:calc(100% - 86px);padding:10px 12px;gap:12px}
  .nav.scrolled .nav-links{gap:10px}
  .nav-link{min-height:36px;display:inline-flex;align-items:center}
}
@media(max-width:390px){.nav-link{font-size:11px}.nav-links{gap:8px}}
/* Device reveal reserves a separate line for the closing slogan. */
.scene-reveal .scene-sticky{display:flex;flex-direction:column;justify-content:center;gap:32px;height:100vh}
.final-devices{width:min(70vw,1000px,80vh);height:46vh;min-height:0;flex:none;transform:none}
.final-copy{position:relative;bottom:auto;max-width:760px;flex:none}
.final-copy h2{font-size:clamp(40px,6vw,76px)}
@media(max-width:768px){
  .scene-reveal .scene-sticky{gap:24px;padding-top:190px;padding-bottom:40px}
  .final-devices{width:100%;height:75vw;max-height:330px}
  .final-copy h2{font-size:42px}
  .final-copy p{font-size:14px;line-height:1.6;padding:0 12px}
}
@media(max-width:768px){
  .scene-create .directions{position:absolute;top:44%;left:16px;width:calc(100% - 32px);transform:none}
  .scene-create .agent-line{bottom:10%;left:24px;right:24px;max-width:none}
}

/* Annotation pass: a fixed left reading lane remains clear while the work stages. */
@media(min-width:769px){
  .scene-caption{width:190px;left:max(5vw,42px)}
  .scene-extract .extract-board{width:min(64vw,900px);margin-left:350px}
  .scene-reveal .scene-caption{top:22%;opacity:clamp(0,calc(1 - var(--scene-progress, 0) * 4),1)}
  html[lang=zh] .chapter h2[data-i18n="c2"]{white-space:nowrap;font-size:clamp(31px,4.25vw,60px)}
  html[lang=zh] .chapter h2[data-i18n="c4"]{font-size:clamp(30px,3.8vw,56px)}
  .scene-reveal .final-devices{width:min(84vw,1200px,96vh);height:55vh;margin-left:260px}
  .scene-reveal .final-copy{margin-left:260px}
}

/* Pins are located on the displayed photograph: bottle at centre-right, amber low on bottle. */
.analysis-image .pin{z-index:2;right:auto;bottom:auto;color:#fff;text-shadow:none;background-color:rgba(12,12,12,.78);border:1px solid rgba(255,255,255,.46);border-radius:3px;padding-top:3px;padding-bottom:3px;font-size:9px;line-height:1.1;white-space:nowrap}
.analysis-image .pin:before{display:none}
.analysis-image .pin:after{content:"";position:absolute;width:5px;height:5px;border:1px solid #fff;border-radius:50%;background:#111;box-shadow:0 0 0 2px rgba(0,0,0,.22)}
.analysis-image .p1{top:58%;left:76%;padding-left:31px;background:linear-gradient(#fff,#fff) 6px 10px/21px 1px no-repeat}
.analysis-image .p1:after{left:-4px;top:7px}
.analysis-image .p2{top:16%;left:47%;padding-left:30px;background:linear-gradient(#fff,#fff) 6px 10px/20px 1px no-repeat}
.analysis-image .p2:after{left:-4px;top:7px}
.analysis-image .p3{top:54%;left:75%;padding-left:32px;background:linear-gradient(#fff,#fff) 6px 10px/22px 1px no-repeat}
.analysis-image .p3:after{left:-4px;top:7px}

/* Chinese headings keep intentional phrase breaks; English remains naturally typeset. */
html[lang=zh] .chapter h2[data-i18n="c1"],html[lang=zh] .chapter h2[data-i18n="c3"],html[lang=zh] .chapter h2[data-i18n="c4"]{white-space:pre-line}

@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .scroll-scene{height:calc(170vh + 380px)}
}
@media(max-width:768px){
  .scene-extract .extract-board{margin-left:0}
  .scene-create .directions{height:44vw;display:block}
  .scene-create .directions article:nth-child(1){left:0;top:8%;width:35%;height:84%;transform:none}
  .scene-create .directions article:nth-child(2){left:29%;top:0;width:43%;height:100%;transform:none}
  .scene-create .directions article:nth-child(3){right:0;top:12%;width:34%;height:78%;transform:none}
  .scene-reveal .final-devices{width:100%;height:75vw;max-height:360px;margin-left:0}
  .scene-reveal .final-copy{margin-left:0}
}

/* Review 2: collect observation grows from its anchor; directions resolve into one layered stack. */
.note-card{transform:translateY(var(--notey,32px)) scale(var(--notescale,.58));transform-origin:26% 58%;will-change:transform,opacity}
@media(min-width:769px){
  .scene-reveal .scene-caption{top:22%;opacity:clamp(0,calc(var(--scene-progress, 0) * 4),1)}
  .scene-create .directions{width:min(64vw,980px);height:clamp(300px,31vw,430px);margin-left:220px;perspective:1500px;transform-style:preserve-3d}
  .scene-create .directions article{width:38%;height:88%;top:6%;transform-origin:left center;box-shadow:0 22px 48px rgba(0,0,0,.24)}
  .scene-create .directions article:nth-child(1){left:0;z-index:3;transform:translate3d(var(--dirx1,0),var(--diry,0),32px) rotateY(-32deg)}
  .scene-create .directions article:nth-child(2){left:30.4%;top:8%;z-index:2;transform:translate3d(var(--dirx2,0),var(--diry,0),12px) rotateY(-32deg)}
  .scene-create .directions article:nth-child(3){right:auto;left:60.8%;top:10%;z-index:1;transform:translate3d(var(--dirx3,0),var(--diry,0),0) rotateY(-32deg)}
  .scene-create .directions article:nth-child(2) p,.scene-create .directions article:nth-child(3) p{left:24%}
  .scene-create .directions article:nth-child(2) h3,.scene-create .directions article:nth-child(3) h3{left:24%;right:8px}
  .scene-create .directions article:nth-child(3) span{left:24%}
  .scene-create .brief{top:calc(50% - 290px);left:calc(50% - 245px)}
  .scene-create .agent-line{top:calc(50% + 240px);bottom:auto;right:auto;left:calc(50% + 50px)}
}
@media(max-width:768px){
  .scene-create .directions article:nth-child(1),.scene-create .directions article:nth-child(2),.scene-create .directions article:nth-child(3){transform:none}
}
@media(prefers-reduced-motion:reduce){.note-card{--notescale:1}}

/* Reference image placed within the mobile demo result card. */
.phone-screen{position:relative;overflow:hidden;border-radius:13px}
.phone .phone-reference{position:absolute;left:3.85%;top:40.2%;width:92.3%;height:26.8%;object-fit:cover;object-position:center 52%;border-radius:10px 10px 0 0}

/* Final perspective review: overlap survives foreshortening; suggestion stays below titles. */
@media(min-width:769px){
.scene-create .directions article:nth-child(2){left:24%}
.scene-create .directions article:nth-child(3){left:48%}
.scene-create .agent-line{top:calc(50% + 320px);bottom:auto;left:calc(50% - 50px)}
}
.scene-create .directions article{background-color:#171717}
.scene-create .directions article img{opacity:1;filter:none}
@media(min-width:769px){
.scene-create .directions article:nth-child(2) h3,.scene-create .directions article:nth-child(3) h3,.scene-create .directions article:nth-child(2) p,.scene-create .directions article:nth-child(3) p,.scene-create .directions article:nth-child(3) span{left:32%}
}

/* Review 3: soft image corners and translucent overlapping reference planes. */
.ref-card,.analysis-card{border-radius:12px}
.ref-card{overflow:hidden}
.ref-card img,.analysis-image,.analysis-image>img,.depth{border-radius:8px}
.prompt{border-radius:8px}
.scene-create .directions article{border:0;border-radius:12px;opacity:calc(var(--dirop,0) * .84)}
.scene-create .directions article img{border-radius:12px}
body.js .depth{opacity:var(--depthop,0)}
body:not(.js) .scene-create .directions article{opacity:.84}
@media(prefers-reduced-motion:reduce){body.js .depth{opacity:.43}.scene-create .directions article{opacity:.84!important}}

/* Review 4: background references stay below the hero images throughout the flight. */
.collect-space{isolation:isolate}
.collect-space .depth{z-index:0}
.collect-space .r1,.collect-space .r2{z-index:1}
.collect-space .r3{z-index:2}
.collect-space .note-card{z-index:3}
.collect-space .d6{right:5%;bottom:-5%}
.scene-create .agent-line{font-size:16px;line-height:1.55;padding:18px 24px;width:340px;max-width:calc(100% - 48px)}
.final-desktop{opacity:var(--desktopop,0)}
body:not(.js) .final-desktop{opacity:1}
@media(prefers-reduced-motion:reduce){.final-desktop{opacity:1!important}}
@media(max-width:768px){.scene-create .agent-line{font-size:14px;width:auto;padding:16px 20px}}

/* Review 5: move the observation bubble down without changing its pop animation. */
.collect-space .note-card{top:calc(40% + 100px)}
@media(max-width:768px){.collect-space .note-card{top:calc(48% + 100px)}}

/* Brief and response spring out from the reference group. */
.scene-create .brief{transform:translateY(var(--briefpopY,150px)) scale(var(--briefscale,.25));transform-origin:50% 100%;z-index:5}
.scene-create .agent-line{transform:translateY(var(--agentpopY,-130px)) scale(var(--agentscale,.25));transform-origin:50% 0;z-index:5}
body:not(.js) .scene-create .brief,body:not(.js) .scene-create .agent-line{transform:none}
@media(prefers-reduced-motion:reduce){.scene-create .brief,.scene-create .agent-line{transform:none!important}}

/* ================================================================
   Kimi polish pass (2026-09-22) — site consistency + composition.
   不改 script.js 的滚动动画逻辑，仅覆盖视觉变量与版式尺寸。
   ================================================================ */

/* ---- 1. 全站标准 CSS 变量（对齐 DESIGN.md 二、色彩） ---- */
:root{
  --dim:#6B7280;
  --faint:#9CA3AF;
  --line:rgba(0,0,0,.08);
  --line-hover:rgba(0,0,0,.15);
  --surface:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.68);
  --glass-border:rgba(255,255,255,.4);
  --shadow:rgba(31,41,55,.04);
}
html[data-theme=dark]{
  --dim:#A0A5B0;
  --faint:#6B7280;
  --line:rgba(255,255,255,.08);
  --line-hover:rgba(255,255,255,.15);
  --glass-border:rgba(255,255,255,.1);
  --shadow:rgba(0,0,0,.2);
}

/* ---- 2. 导航 Docker（对齐 5.1 标准） ---- */
.nav{z-index:100}
.nav-glass{padding:0 32px}
.nav.scrolled .nav-glass{border-color:var(--glass-border);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
.nav-brand{letter-spacing:-.01em}
.nav-link{font-weight:500;letter-spacing:.02em}
.nav-link:after{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.nav-link:hover{color:var(--text)}

/* ---- 3. 主题/语言按钮（对齐 5.2，lang 按钮同款降级排列） ---- */
.theme-toggle,.lang-toggle{border-color:var(--glass-border);box-shadow:0 4px 24px var(--shadow);-webkit-backdrop-filter:blur(16px)}
.theme-toggle:hover,.lang-toggle:hover{transform:scale(1.1)}

/* ---- 4. 自定义光标层级（对齐 5.3） ---- */
.cursor{z-index:9999}

/* ---- 5. Hero 节奏收紧 + eyebrow 对齐 5.5 ---- */
.hero{padding:clamp(150px,20vh,220px) 24px 70px}
.eyebrow{letter-spacing:.2em;color:var(--faint)}
.hero-sub.zh{color:var(--dim)}
.summary{margin-bottom:11vh;font-size:17px;border-radius:20px}
.summary-kicker{color:var(--faint)}

/* ---- 6. Chapter 间距收紧（消除大空档） ---- */
.chapter{padding:8vh 24px 3vh}
.chapter>span{color:var(--faint)}

/* ---- 7. 场景通用：顶部留白收紧 + caption 精致化 ---- */
.scene-sticky{padding:92px 40px 48px}
.scene-caption>span{display:inline-block;color:var(--faint)}
.scene-caption>span:after{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-top:8px;border-radius:1px}
.scene-caption strong{font-size:32px;margin:10px 0 8px}
.scene-caption p{font-size:13px;line-height:1.65}

/* ---- 8. 01 Collect：画面放大 ---- */
.collect-space{width:min(74vw,1040px);height:min(56vw,660px)}
.ref-card{width:clamp(200px,24vw,330px);box-shadow:0 28px 60px rgba(0,0,0,.28)}
.ref-card img{height:clamp(250px,32vw,410px)}
.depth{width:clamp(84px,11vw,150px);height:clamp(120px,16vw,205px)}
.note-card{width:240px;border-radius:14px}

/* ---- 9. 02 Extract：版面放大、构图更饱满 ---- */
.extract-board{width:min(72vw,1000px);height:min(52vw,640px)}
.analysis-card{width:clamp(260px,23vw,360px);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.desktop-shot{width:70%;border-radius:14px}
.analysis-image .pin{font-size:10px;padding-top:4px;padding-bottom:4px}
.prompt p{font-size:12px}
@media(min-width:769px){
  .scene-extract .extract-board{width:min(70vw,1040px);margin-left:330px}
}

/* ---- 10. 03 Recombine：卡片更大更挺 ---- */
@media(min-width:769px){
  .scene-create .directions{width:min(70vw,1100px);height:clamp(340px,34vw,490px);margin-left:230px}
  .scene-create .brief{max-width:380px;padding:20px;border-radius:14px;top:calc(50% - 310px);left:calc(50% - 265px)}
  .scene-create .brief p{font-size:22px}
  .scene-create .agent-line{top:calc(50% + 300px);left:calc(50% - 60px)}
}
.directions h3{font-size:clamp(20px,2.2vw,30px)}
.brief{border-radius:14px}
.agent-line{border-radius:12px}
.agent-line span{animation:cos-dot-pulse 2.2s ease-in-out infinite}
@keyframes cos-dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(164,255,14,.5)}50%{box-shadow:0 0 0 6px rgba(164,255,14,0)}}

/* ---- 11. 04 Return：设备画面放大 ---- */
@media(min-width:769px){
  .scene-reveal .final-devices{width:min(88vw,1300px,100vh);height:58vh;margin-left:240px}
  .scene-reveal .final-copy{margin-left:240px}
}
.final-desktop{border-radius:16px}
.phone{border-radius:24px}

/* ---- 12. 背景参考图缓慢漂浮（纯 CSS 氛围层，不影响滚动驱动） ---- */
@media(prefers-reduced-motion:no-preference){
  .scene-collect .depth{animation:cos-drift 9s ease-in-out infinite alternate}
  .scene-collect .d2,.scene-collect .d5{animation-duration:11s;animation-delay:-3s}
  .scene-collect .d3,.scene-collect .d6{animation-duration:13s;animation-delay:-6s}
  @keyframes cos-drift{from{margin-top:0}to{margin-top:-14px}}
}

/* ---- 13. footer 对齐标准（已有，仅确认字距） ---- */
footer{letter-spacing:.08em}

/* polish fix: 窄屏 nav 避让主题按钮 */
@media(max-width:390px){.nav-glass{padding-right:76px}}
/* polish fix: 移动端 chapter 间距同步收紧 */
@media(max-width:768px){.chapter{padding:9vh 24px 4vh}}

/* polish fix: 移动端 scrolled 胶囊居中（覆盖旧的左偏规则） */
@media(max-width:768px){
  .nav.scrolled .nav-glass{margin-left:auto;margin-right:auto;max-width:calc(100vw - 32px)}
}

/* polish fix: 结尾两行相对页面居中（去掉跟随设备区的左偏移） */
@media(min-width:769px){
  .scene-reveal .final-copy{margin-left:0;left:0;right:0;width:100%;max-width:none}
}
.final-copy{text-align:center}

/* polish: 主题按钮对齐全站标准（soho3q 同款图标 + 旋转交叉动效） */
.theme-toggle{display:flex;align-items:center;justify-content:center;padding:0;transition:all .4s cubic-bezier(.23,1,.32,1)}
.theme-toggle:hover{transform:scale(1.1);box-shadow:0 8px 32px var(--shadow)}
.theme-toggle svg{width:20px;height:20px;color:var(--text);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon,.theme-toggle .icon-sun{position:absolute;display:flex;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
:root[data-theme="light"] .theme-toggle .icon-moon,html[data-theme="light"] .theme-toggle .icon-moon{opacity:1;transform:scale(1) rotate(0)}
:root[data-theme="light"] .theme-toggle .icon-sun,html[data-theme="light"] .theme-toggle .icon-sun{opacity:0;transform:scale(0) rotate(90deg)}
html[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:scale(0) rotate(-90deg)}
html[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:scale(1) rotate(0)}

/* polish fix: 固定按钮层级须高于 nav(100)，对齐标准 200 */
.theme-toggle,.lang-toggle{z-index:200}

/* polish: 英文版字体贴全站衬线标准；中文版保持 Inter/苹方产品声音 */
.hero h1,.chapter h2,.final-copy h2,.loader-word{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;
}
.scene-caption strong,.note-card p,.brief p,.directions h3{
  font-family:'DM Serif Text','Playfair Display',Georgia,serif;font-weight:400;
}
html[lang=zh] .hero h1,html[lang=zh] .chapter h2,html[lang=zh] .scene-caption strong,
html[lang=zh] .note-card p,html[lang=zh] .brief p,html[lang=zh] .directions h3,
html[lang=zh] .final-copy h2,html[lang=zh] .loader-word{
  font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:600;
}

/* polish: 衬线标题的字距按英文排版收紧；中文保持原字距 */
.hero h1{letter-spacing:-.045em}
.chapter h2{letter-spacing:-.03em}
.final-copy h2{letter-spacing:-.04em}
html[lang=zh] .hero h1{letter-spacing:-.055em}
html[lang=zh] .chapter h2{letter-spacing:-.055em}
html[lang=zh] .final-copy h2{letter-spacing:-.06em}

/* polish: loader 全站统一 Playfair Display，不随语言切换 */
html[lang=zh] .loader-word{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.02em}

/* ================================================================
   Kimi mobile redesign (2026-09-23)
   手机端放弃 pinned 滚动舞台，改为静态分区顺序排版（平板的桌面动画保留）
   ================================================================ */

/* ---- 平板 769–1100px：保留滚动动画，收窄版心避让左栏 ---- */
@media (min-width:769px) and (max-width:1100px){
  .scene-caption{left:20px;width:130px}
  .scene-caption strong{font-size:24px}
  .scene-extract .extract-board{margin-left:170px;width:min(72vw,880px)}
  .scene-extract .desktop-shot{width:64%}
  .scene-create .directions{margin-left:140px;width:min(76vw,900px)}
  .scene-create .brief{left:calc(50% - 200px)}
  .scene-reveal .final-devices{margin-left:135px;width:min(80vw,1000px)}
  .scene-reveal .final-copy{margin-left:135px}
  .scene-reveal .scene-caption{top:18%}
  .hero h1{font-size:clamp(52px,10vw,110px)}
}

/* ---- 手机 ≤768px：zoom 等比缩放舞台，完整保留 PC 滚动动画（2026-09-23 v2） ---- */
@media (max-width:768px){
  .scroll-scene{height:230vh!important}
  .scene-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:0;overflow:hidden}
  /* 文字上移贴近画面 */
  .scene-caption{position:relative;left:auto;top:auto;width:100%;padding:96px 22px 0;margin:0;z-index:5}
  .scene-caption strong{font-size:26px;margin:6px 0 4px}
  .scene-caption p{font-size:13px;max-width:340px;line-height:1.6}
  .scene-caption>span:after{margin-top:6px}
  /* 舞台：1100px 设计稿整体 zoom 等比缩小（圆角/阴影随布局一起缩） */
  .mstage{position:relative;flex:none;width:1100px;height:640px;margin-top:6px}

  /* 01 Collect：固定设计稿尺寸，内部动画全部沿用 PC */
  .scene-collect .collect-space{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:1040px;height:640px}
  .scene-collect .ref-card{width:330px;padding:8px}
  .scene-collect .ref-card img{height:410px}
  .scene-collect .depth{display:block;width:130px;height:180px}
  .scene-collect .note-card{width:250px;left:39%;top:calc(40% + 100px);padding:17px}

  /* 02 Extract */
  .scene-extract .extract-board{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:1040px;height:640px;margin-left:0}
  .scene-extract .analysis-card{position:absolute;width:340px;left:0;top:6%}
  .scene-extract .desktop-shot{position:absolute;width:66%;right:0;bottom:6%;margin-top:0}
  .scene-extract .pin{font-size:10px}

  /* 03 Recombine：恢复 PC 的 3D 卡片编排与弹出动画 */
  .scene-create .mstage{height:720px}
  .scene-create .brief{position:absolute;top:calc(46% - 300px);left:calc(50% - 260px);max-width:380px;padding:20px;z-index:5;transform:translateY(var(--briefpopY,150px)) scale(var(--briefscale,.25));transform-origin:50% 100%}
  .scene-create .directions{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:980px;height:430px;margin:0;perspective:1500px;transform-style:preserve-3d;display:block}
  .scene-create .directions article{position:absolute;width:38%;height:88%;top:6%;padding:14px;transform-origin:left center;box-shadow:0 22px 48px rgba(0,0,0,.24)}
  .scene-create .directions article:nth-child(1){left:0;z-index:3;transform:translate3d(var(--dirx1,0),var(--diry,0),32px) rotateY(-32deg)}
  .scene-create .directions article:nth-child(2){left:24%;top:8%;z-index:2;transform:translate3d(var(--dirx2,0),var(--diry,0),12px) rotateY(-32deg)}
  .scene-create .directions article:nth-child(3){left:48%;right:auto;top:10%;z-index:1;transform:translate3d(var(--dirx3,0),var(--diry,0),0) rotateY(-32deg)}
  .scene-create .directions article:nth-child(2) h3,.scene-create .directions article:nth-child(3) h3,
  .scene-create .directions article:nth-child(2) p,.scene-create .directions article:nth-child(3) p,
  .scene-create .directions article:nth-child(3) span{left:32%}
  .scene-create .directions h3{font-size:26px;bottom:18px}
  .scene-create .directions .minimal span{bottom:19px;font-size:11px}
  .scene-create .agent-line{position:absolute;top:calc(46% + 330px);left:calc(50% - 60px);bottom:auto;right:auto;width:340px;max-width:none;margin:0;z-index:5;transform:translateY(var(--agentpopY,-130px)) scale(var(--agentscale,.25));transform-origin:50% 0}

  /* 04 Return */
  .scene-reveal .mstage{height:640px}
  .scene-reveal .final-copy{bottom:0}
  .scene-reveal .final-devices{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:1200px;height:620px;margin-left:0}
  .scene-reveal .final-desktop{position:absolute;width:89%;top:0;left:0;margin:0}
  .scene-reveal .phone{position:absolute;width:19%;right:0;bottom:0;margin:0;z-index:2}
  .scene-reveal .final-copy{position:absolute;left:0;right:0;bottom:-4%;margin:0;text-align:center;max-width:none}
  .scene-reveal .final-copy h2{font-size:76px}
  .scene-reveal .final-copy p{font-size:15px;padding:0}
}

/* zoom 阶梯：圆角/阴影随布局等比缩 */
@media (max-width:768px){ .mstage{zoom:.68} .scene-reveal .mstage{zoom:.6} }
@media (max-width:600px){ .mstage{zoom:.55} .scene-reveal .mstage{zoom:.48} }
@media (max-width:460px){ .mstage{zoom:.46} .scene-reveal .mstage{zoom:.37} }
.scene-collect .note-card{width:280px}


/* ---- 手机端微调 v3（2026-09-23，真机反馈） ---- */
@media (max-width:768px){
  /* 垂直居中：解决动画靠上、下方大空白 */
  .scene-sticky{justify-content:center}
  .scene-caption{padding-top:0}
  /* 章节大标题缩小 2 档 + 加行距，避免单字落行 */
  .chapter h2{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.3!important;letter-spacing:-.03em!important}
  /* 对话泡泡反向放大 + 移到角落不遮画面 */
  .scene-collect .note-card{zoom:2.2;left:5%;top:auto;bottom:4%;width:240px}
  .scene-create .brief{zoom:1.7;left:5%;top:6%;max-width:330px}
  .scene-create .agent-line{zoom:1.7;top:auto;left:auto;bottom:5%;right:4%}
  /* 结尾文字不再压设备画面：舞台加高，结语落在画面下方 */
  .scene-reveal .mstage{height:800px}
  .scene-reveal .final-devices{top:0;transform:translateX(-50%)}
  .scene-reveal .final-copy{bottom:0}
}
/* 舞台再缩一档，确保整幅显示 */
@media (max-width:768px){ .mstage{zoom:.62} .scene-reveal .mstage{zoom:.52} }
@media (max-width:600px){ .mstage{zoom:.5} .scene-reveal .mstage{zoom:.43} }
@media (max-width:460px){ .mstage{zoom:.36} .scene-reveal .mstage{zoom:.32} }

/* ---- Responsive stage fit v4 (2026-09-23) -----------------------
   Preserve the desktop composition and motion. On phones the complete
   animation stage scales as one unit and stays centered in the viewport. */
@media (max-width:768px){
  .scene-sticky{
    height:100vh;
    height:100svh;
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:0;
    overflow:hidden;
  }
  .scene-caption{
    position:absolute;
    left:22px;
    right:22px;
    top:max(76px,calc(env(safe-area-inset-top) + 64px));
    width:auto;
    padding:0;
    margin:0;
  }
  .mstage{margin:0;zoom:.67}

  /* Cancel the earlier per-element enlargement: copy, cards and bubbles now
     inherit the same scale as the stage, so animation geometry stays intact. */
  .scene-collect .note-card{
    zoom:1;
    left:39%;
    top:calc(40% + 100px);
    bottom:auto;
    width:250px;
  }
  .scene-create .brief{
    zoom:1;
    left:calc(50% - 260px);
    top:calc(46% - 300px);
    max-width:380px;
  }
  .scene-create .agent-line{
    zoom:1;
    left:calc(50% - 60px);
    right:auto;
    top:calc(46% + 330px);
    bottom:auto;
  }
  .scene-reveal .final-devices{
    top:44%;
    transform:translate(-50%,-50%);
  }
  .scene-reveal .final-copy{bottom:0}
  .scene-reveal .mstage{zoom:.61}
}

/* Width-safe scale steps, including compact 320px phones. */
@media (max-width:680px){.mstage{zoom:.59}.scene-reveal .mstage{zoom:.54}}
@media (max-width:600px){.mstage{zoom:.52}.scene-reveal .mstage{zoom:.47}}
@media (max-width:520px){.mstage{zoom:.45}.scene-reveal .mstage{zoom:.41}}
@media (max-width:460px){.mstage{zoom:.39}.scene-reveal .mstage{zoom:.36}}
@media (max-width:400px){.mstage{zoom:.34}.scene-reveal .mstage{zoom:.31}}
@media (max-width:360px){.mstage{zoom:.30}.scene-reveal .mstage{zoom:.28}}
@media (max-width:330px){.mstage{zoom:.27}.scene-reveal .mstage{zoom:.25}}

/* Mobile captions and closing copy: legible bubbles outside the artwork. */
@media (max-width:768px){
  .scene-collect .mstage,
  .scene-create .mstage{height:1100px}

  .scene-collect .collect-space{top:40%}
  .scene-collect .note-card{
    zoom:2.2;
    width:280px;
    left:50%;
    top:calc(100% + 18px);
    right:auto;
    bottom:auto;
    translate:-50% 0;
  }

  .scene-create .directions{top:47%}
  .scene-create .brief,
  .scene-create .agent-line{zoom:2.1;left:50%;right:auto;translate:-50% 0}
  .scene-create .brief{top:0;bottom:auto;max-width:380px}
  .scene-create .agent-line{top:auto;bottom:0;width:340px;max-width:none}

  .scene-reveal .mstage{height:1100px}
  .scene-reveal .final-devices{top:60px;transform:translateX(-50%)}
  .scene-reveal .final-copy{bottom:40px}
}
@media (max-width:400px){
  .scene-collect .note-card{zoom:2.7}
  .scene-create .brief,.scene-create .agent-line{zoom:2.5}
  .scene-create .agent-line{font-size:18px}
}
@media (max-width:400px) and (max-height:720px){
  .scene-create .scene-sticky{padding-top:104px}
}

/* The three perspective cards occupy 86% of their centered board. Center
   their visible group while keeping the card spacing and motion unchanged. */
@media (max-width:768px){
  .scene-create .directions article:nth-child(1){left:10%}
  .scene-create .directions article:nth-child(2){left:34%}
  .scene-create .directions article:nth-child(3){left:58%}
}