/* The visual stage takes precedence; camera movement stays tied to native scroll. */
.film-world .artifact{z-index:10}
.film-world .pencil,.film-world .camera-object,.film-world .designer-cursor,.film-world .code-token,.film-world .live-stamp{z-index:12}.film-world .notification{z-index:14}
.agreement-surface{position:absolute;inset:0;padding:18% 17%;pointer-events:none;opacity:0}
.agreement-surface>span{display:block;height:2px;background:#baa98b;margin-bottom:10%;width:78%}.agreement-surface>span:nth-child(2){width:90%}.agreement-surface>span:nth-child(3){width:48%}
.agreement-surface svg{position:absolute;right:10%;bottom:10%;width:29%;height:34%;color:#887454}
.brand-thread{position:absolute;z-index:8;font:italic 215px/1 Georgia;color:#292722;transform-origin:center;pointer-events:none;will-change:transform;opacity:0}
.preview-label{position:absolute;right:33px;top:85px;z-index:7;font:7px monospace;letter-spacing:1px;color:#b9ab93;opacity:0}
.programming-layer .code-body{padding-right:268px;font-size:9px}.programming-layer .code-body pre{width:260px}
.layout-layer .web-nav strong,.published-layer .web-nav strong{margin-left:30px}
.story{height:820svh}
.story-pin{padding:20px 4vw 0;background:radial-gradient(ellipse at 76% 48%,rgba(197,176,141,calc(.12 + var(--warmth,0)*.2)),transparent 62%),#f4f2ed}
.story-layout{grid-template-columns:minmax(240px,.52fr) minmax(0,1.48fr);gap:0;height:calc(100% - 104px)}
.story-copy{max-width:325px}
.story-copy h1{font-size:clamp(36px,3.55vw,58px);line-height:1.03;letter-spacing:-.055em;min-height:3.1em;margin:20px 0}
.story-copy p{font-size:12px;line-height:1.8;max-width:280px;min-height:86px}
.story-copy>.button{font-size:11px;padding:12px 14px;margin-top:18px;gap:16px}
.story-copy .chapter-tag{font-size:7px!important;max-width:280px;line-height:1.7}
.chapter-top{gap:12px}.chapter-name{font-size:8px}
.film-stage{height:100%;min-height:0;overflow:visible;margin-left:0;width:100%}
.film-world{rotate:var(--camera-tilt,0deg);animation-fill-mode:backwards}
.coordinate,.scene-note{display:none}
.chapter-buttons{gap:22px}.chapter-buttons button{color:#776d5e}.chapter-buttons .step-name{font-size:8px}
.artifact{box-shadow:18px 48px 48px -20px #3a302c42,2px 7px 12px #3b352622}
.orbital-one{border-color:#9488771c}.orbital-two{opacity:.25}
.meeting-scene{position:absolute;inset:0;z-index:9;visibility:hidden;will-change:transform,opacity;pointer-events:none}
.meeting-halo{position:absolute;left:80px;top:80px;width:600px;height:420px;border-radius:50%;background:radial-gradient(ellipse,#b9a47d30,transparent 70%);box-shadow:0 0 90px #cbbb9a12}
.meeting-figures{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(6px 13px 9px #74654e15)}
.figure-head{transform-box:fill-box;transform-origin:50% 100%}.arm{transform-box:fill-box;transform-origin:0 0}.arm-client{transform-origin:100% 0}
.agreement-check{stroke-dasharray:1;stroke-dashoffset:1}
.meeting-label{position:absolute;text-align:center;color:#7b6b53;top:435px}.meeting-label b{font:15px Georgia;display:block;color:#4e473b}.meeting-label span{display:block;font:7px monospace;letter-spacing:1.3px;margin-top:6px}.label-team{left:170px;width:190px}.label-client{left:485px;width:140px}
.talk-bubble{position:absolute;background:#faf7eff5;border:1px solid #d5c8b1;box-shadow:0 12px 23px #44342012;padding:16px 21px;font-size:14px;line-height:1.4;color:#625848;border-radius:15px}
.talk-bubble em{font-size:19px;color:#97805b;letter-spacing:-.4px}.talk-bubble:after{content:'';position:absolute;bottom:-8px;width:13px;height:13px;background:#faf7ef;border-right:1px solid #d5c8b1;border-bottom:1px solid #d5c8b1;rotate:45deg}
.client-bubble{top:47px;right:90px;rotate:5deg}.client-bubble:after{right:45px}.team-bubble{top:20px;left:120px;rotate:-5deg}.team-bubble:after{left:85px}
.agreement-badge{position:absolute;top:399px;left:230px;display:flex;align-items:center;gap:13px;background:#33302a;color:#f7f2e7;border:1px solid #c2b290;border-radius:5px;padding:17px 22px;box-shadow:0 16px 35px #34271628;font-size:15px}
.agreement-badge>span{font-size:22px;display:grid;place-items:center;width:35px;height:35px;border:1px solid #9f8c67;border-radius:50%;color:#d8c5a1}.agreement-badge small{display:block;font:7px monospace;letter-spacing:1px;color:#bcae94;margin-top:7px}
@media(min-width:1600px){.story-layout{grid-template-columns:.48fr 1.52fr}.story-copy h1{font-size:58px}.story-copy{max-width:350px}}
@media(min-width:701px) and (max-height:760px){.story-copy h1{font-size:clamp(34px,3.3vw,49px);margin:15px 0}.story-copy p{font-size:11px;min-height:70px}.film-stage{height:100%}.story-copy>.button{margin-top:14px}}
@media(min-width:701px) and (max-width:1050px){.story-layout{grid-template-columns:.58fr 1.42fr}.story-copy h1{font-size:35px}.story-copy p{max-width:235px;font-size:11px}.story-copy>.button{font-size:10px;gap:8px}.chapter-buttons{gap:20px}}
@media(max-width:700px){
 .story{height:720svh}.story-pin{padding:12px 20px 0}.story-layout{display:flex;flex-direction:column;padding-top:15px;gap:0;height:calc(100% - 82px)}
 .story-copy{max-width:none;flex-shrink:0}.story-copy h1{font-size:29px;line-height:1.02;margin:10px 0;min-height:2.04em;max-width:100%;letter-spacing:-.055em}.story-copy h1 br{display:none}.story-copy h1 br:after{content:' '}
 .story-copy p{font-size:10px;line-height:1.6;min-height:48px;max-width:100%}.story-copy>.button{margin-top:10px;padding:8px 11px;font-size:10px}.chapter-top{font-size:7px}.chapter-name{font-size:7px}.chapter-number{font-size:8px}
 .film-stage{flex:1;height:auto;min-height:230px;width:calc(100% + 40px);margin-left:-20px}.film-world{animation-duration:1.2s}.story-copy .chapter-tag{display:none}
 .story-footer{height:52px;gap:8px}.chapter-buttons{gap:0}.chapter-buttons button{padding:9px 2px}.chapter-buttons .step-name{display:none}.scroll-hint{display:none}.demo-note{right:20px;font-size:5px}
}
@media(max-width:700px) and (max-height:720px){.story-head{display:none}.story-pin{padding-top:8px}.story-layout{height:calc(100% - 56px);padding-top:4px}.story-copy h1{font-size:24px;margin:7px 0;line-height:1.04}.story-copy p{font-size:9px;min-height:43px;line-height:1.5}.story-copy>.button{font-size:9px;padding:6px 10px;margin-top:6px}.film-stage{min-height:160px}.story-footer{height:44px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.film-world{rotate:0deg!important}.story-pin{min-height:720px}.meeting-scene{will-change:auto}.story-layout{height:calc(100% - 104px)}.film-stage{min-height:300px}}
/* One composition travels from the editor to the published mobile experience. */
.testing-layer .test-title{width:300px;font-size:25px;padding:24px 24px 12px}.testing-layer .test-rows{width:310px;padding:0 24px}.testing-layer .test-rows>div{font-size:8px;gap:5px}.testing-layer .test-console{font-size:8px}
.phone-layer .phone-time,.phone-layer .phone-date,.phone-layer .phone-brand,.phone-layer .phone-app,.phone-layer .phone-bottom{display:none}
.layout-layer{--mobile:0;overflow:hidden}.layout-layer .browser-chrome{height:calc(34px * (1 - var(--mobile)));opacity:calc(1 - var(--mobile));overflow:hidden}
.layout-layer .web-nav{height:calc(53px - var(--mobile)*13px);padding:0 calc(28px - var(--mobile)*16px)}.layout-layer .web-nav>span{opacity:calc(1 - var(--mobile));white-space:nowrap}.layout-layer .web-nav strong{white-space:nowrap}
.layout-layer .web-hero{display:block;position:relative;padding:0;height:calc(220px + var(--mobile)*70px)}
.layout-layer .web-hero>div:first-child{position:absolute;left:calc(28px - var(--mobile)*13px);top:calc(24px - var(--mobile)*10px);width:calc(230px - var(--mobile)*50px)}
.layout-layer .web-hero h2{font-size:calc(28px - var(--mobile)*6px);margin:12px 0 18px}
.layout-layer .web-image{position:absolute;left:calc(52% * (1 - var(--mobile)) + 15px * var(--mobile));top:calc(24px + var(--mobile)*116px);width:calc(43% + var(--mobile)*57% - var(--mobile)*30px);height:calc(180px - var(--mobile)*50px)}
.layout-layer .web-grid{padding:17px calc(28px - var(--mobile)*16px);gap:8px;font-size:7px}