@font-face{font-family:Harmony;src:local('HarmonyOS Sans SC'),url('assets/fonts/HarmonyOS_Sans_SC_Regular-subset.woff2') format('woff2'),url('assets/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Harmony;src:url('assets/fonts/HarmonyOS_Sans_SC_Medium-subset.woff2') format('woff2'),url('assets/fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/fonts/InstrumentSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#000;--surface:#0c0c0c;--raised:#171717;--selected:#242424;--text:#f5f5f5;--secondary:#b8b8b8;--muted:#949494;--line:#262626;--page-pad:clamp(24px,6.8vw,132px);--scene-scale:1;--scene-progress:0;font-family:Harmony,system-ui,sans-serif;font-synthesis:none;scroll-padding-top:0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,summary{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}img{max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #f5f5f5;outline-offset:5px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}::selection{background:#f5f5f5;color:#000}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:white;color:black;padding:12px 20px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.desktop-plane{position:absolute;left:150px;top:334px;width:1640px;height:720px;background:linear-gradient(180deg,#171717,#0b0b0b 25%,#020202 69%,#000 90%);transform:perspective(2100px) rotateX(42deg) rotateY(-10deg) rotateZ(-9deg);transform-origin:50% 0%;border-top:1px solid #464646;box-shadow:0 -1px 0 #191919;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 91%,transparent);pointer-events:auto}
.desktop-plane:after{content:'';position:absolute;inset:0 0 auto;height:160px;background:radial-gradient(ellipse 650px 180px at 62% 0,#ffffff06,transparent);pointer-events:none}
.native-island{position:absolute;left:560px;top:-1px;width:320px;height:56px;transform:scale(2.55);transform-origin:top left;filter:drop-shadow(0 7px 8px #000a);padding:0;z-index:2;text-align:left}
.native-island:focus-visible{outline:none}
.native-island:focus-visible .island-shape path,.native-island:hover .island-shape path{stroke:#b8b8b8;stroke-width:.6}
.island-shape{position:absolute;inset:0;width:320px;height:56px;stroke:none}
.island-shape path{fill:#000;stroke:#323232;stroke-width:.28;transition:stroke .3s}
.island-content{position:absolute;inset:0;display:flex;align-items:center;padding:0 25px 0 28px;gap:14px}
.island-content strong{font-size:11px;font-weight:500;white-space:nowrap}
.island-content .ecg{width:56px;height:18px;stroke-width:1.2}
.island-close{width:11px;height:11px;stroke:#777;stroke-width:1.5;margin-left:auto}
.island-hint{position:absolute;top:67px;left:0;right:0;text-align:center;font-size:7px;color:#949494;opacity:0;transition:opacity .2s}
.native-island:hover .island-hint,.native-island:focus-visible .island-hint{opacity:1}
.panel-title{height:78px;display:flex;align-items:center;padding:0 28px;font-size:22px;font-weight:500;gap:14px}
.panel-title small{font-size:12px;color:#858585;font-weight:400}
.panel-dots{margin-left:auto;font-weight:400;color:#949494}
.panel-tabs{height:62px;padding:8px 20px;display:flex;gap:8px;background:#0c0c0c;font-size:15px;color:#949494}
.panel-tabs span{flex:1;display:grid;place-items:center}
.panel-tabs .selected{background:#303030;color:#f5f5f5}
.panel-body{padding:24px}
.panel-modes{height:49px;display:flex;gap:6px;padding:4px;background:#171717;font-size:15px;color:#949494}
.panel-modes span{flex:1;display:grid;place-items:center}
.panel-modes .selected{background:#303030;color:#f5f5f5}
.panel-search{height:48px;margin-top:20px;background:#121212;display:flex;align-items:center;gap:12px;padding:0 16px;font-size:14px;color:#858585}
.panel-search svg{width:18px;height:18px}
.property-tabs{display:flex;gap:6px;height:44px;margin:18px 0;font-size:13px;color:#949494}
.property-tabs span{flex:1;display:grid;place-items:center}
.property-tabs .selected{background:#242424;color:#f5f5f5}
.effects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.effect-card{height:154px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#0c0c0c;font-size:16px;color:#949494;transition:background .2s,color .2s;min-width:0}
.effect-card svg{width:80%;height:75px;stroke:#858585;stroke-width:1.3}
.effect-card.is-selected{background:#242424;color:#f5f5f5;outline:1px solid #8a8a8a;outline-offset:-1px}
.effect-card.is-selected svg{stroke:#f5f5f5}
.effect-card:hover{background:#212121;color:#fff}
.effect-card:focus-visible{outline:2px solid white;outline-offset:2px}
.panel-hint{color:#858585;font-size:11px;line-height:1.6;margin:20px 0 0}
/* The viewport is a continuous stage. The document remains native-scrollable. */
:root{--fit:1;--page-pad:clamp(24px,6.875vw,132px)}
.site-header{position:fixed;z-index:40;inset:0 0 auto;height:100px;padding:0 clamp(24px,5.83vw,112px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#000d,transparent)}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:Instrument,Harmony,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.7px}.brand img{flex-shrink:0}
.site-header nav{display:flex;align-items:center;gap:36px;font-size:13px;color:var(--muted)}.site-header nav a,.site-header nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0}.site-header nav svg{width:12px;height:12px}.site-header nav a:hover,.site-header nav button:hover{color:var(--text)}
.icon-button{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;color:var(--secondary)}.mobile-menu{display:none}
.scroll-track{position:relative;height:750svh;outline:none}.scroll-anchor{position:absolute;width:1px;height:1px;pointer-events:none}.sticky-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden;background:#000;isolation:isolate}
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;--camera-x:0px;--camera-y:0px;--camera-scale:1;--camera-angle:0deg;--foreground-x:0px;--foreground-y:0px;--caption-y:0px;--copy-opacity:1}.scene.is-active{pointer-events:auto}.scene:first-child{opacity:1}.scene.is-visible .parallax-shell,.scene.is-visible .foreground{will-change:transform}.scene.is-visible{will-change:opacity}
.frame-fit{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--fit));pointer-events:none}.parallax-shell{position:absolute;inset:0;transform:translate3d(var(--camera-x),var(--camera-y),0) scale(var(--camera-scale)) rotate(var(--camera-angle));transform-origin:65% 43%;pointer-events:none}.scene.is-active .software-plane,.scene.is-active .native-island{pointer-events:auto}.scene:not(.is-active) .desktop-plane{pointer-events:none}
.foreground{transform:translate3d(var(--foreground-x),var(--foreground-y),0);pointer-events:none}.scene-veil{position:absolute;inset:0;background:linear-gradient(transparent 51%,#0009 70%,#000 96%);pointer-events:none}
.scene-copy{position:absolute;left:var(--page-pad);top:44%;z-index:4;transform:translate3d(0,var(--caption-y),0);opacity:var(--copy-opacity);max-width:48%;pointer-events:none}.scene-copy button,.scene-copy a{pointer-events:auto}.scene-copy h1,.scene-copy h2{font-weight:500;font-size:clamp(44px,3.75vw,72px);line-height:1.28;letter-spacing:-2.6px;margin:0}.scene-copy h2 span{color:#969696}.eyebrow{color:#999;font-size:12px;letter-spacing:2px;margin:0 0 24px}.scene-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#949494;margin:22px 0 0}.scene-copy.hero-copy{top:auto;bottom:15.3%;max-width:75%}.hero-copy h1{font-size:clamp(54px,4vw,76px)}.hero-copy>p:not(.eyebrow){margin-top:18px;font-size:18px}
.actions{display:flex;align-items:center;gap:30px;margin-top:30px;flex-wrap:wrap}.button{min-height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:34px;font-size:14px;border-radius:3px;transition:background .2s}.button svg{width:16px;height:16px}.primary{background:#f5f5f5;color:#111}.primary:hover{background:#d3d3d3}.subtle-action{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;font-size:13px;color:#a2a2a2}.subtle-action:hover{color:#fff}.subtle-action svg{width:15px;height:15px}.compat{display:block;color:#808080;font-size:10px;margin-top:17px}.compat span{padding:0 8px}
.software-plane{position:absolute;background:#171717;border:1px solid #414141;box-shadow:0 35px 100px #000b;transform-origin:center;overflow:hidden}.expression-plane{left:1010px;top:80px;width:755px;transform:perspective(2200px) rotateY(-20deg) rotateX(9deg) rotateZ(-13deg) scale(1.18)}.expression-plane:after,.graphic-plane:after,.workflow-plane:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,#fff03,transparent 35%,#0003)}
.motion-result{position:absolute;left:655px;top:545px;font-size:345px;line-height:1;font-weight:700;letter-spacing:-30px;filter:drop-shadow(0 22px 32px #000)}#demo-glyph{display:block;transform-origin:50% 70%;background:linear-gradient(155deg,#fff 30%,#949494);background-clip:text;color:transparent}
.window-heading{height:72px;padding:0 29px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2a2a2a;font-size:18px}.window-heading small{font-size:12px;color:#777}.graphic-plane{left:875px;top:165px;width:1030px;transform:perspective(2200px) rotateY(-19deg) rotateX(8deg) rotateZ(-8deg)}.drawing-toolbar{display:flex;align-items:center;gap:25px;height:64px;padding:0 29px;background:#111;color:#aaa;font-size:14px}.drawing-toolbar button{margin-left:auto;border:1px solid #3b3b3b;padding:10px 18px;font-size:13px}.drawing-toolbar b{margin-left:18px;color:#fff;font-weight:400}.toolbar-divider{height:19px;width:1px;background:#333}.stroke-swatch{display:inline-block;width:17px;height:17px;border:2px solid #ddd}.drawing-canvas{height:585px;position:relative;background:radial-gradient(#333 1px,transparent 1px) 0 0 / 24px 24px,#0d0d0d}.path-art{width:100%;height:100%;overflow:visible;stroke-width:2;fill:none;color:#ddd}.array-copy{stroke:#888;opacity:0}.path-handles{stroke:#b8b8b8;stroke-width:1;fill:#111}.canvas-label{position:absolute;left:28px;bottom:20px;font-size:12px;color:#777}.drawing-bottom{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 29px;font-size:12px;color:#777}
.audio-plane{left:860px;top:210px;width:1120px;overflow:visible;background:transparent;border:0;box-shadow:none;transform:perspective(2300px) rotateY(-18deg) rotateX(15deg) rotateZ(-9deg)}.audio-plane .window-heading{border:0;color:#aaa}.audio-source{display:flex;gap:16px;align-items:center;padding:10px 29px 32px;font-size:15px;color:#aaa}.audio-dot{width:7px;height:7px;background:#e0e0e0;border-radius:50%}.wave-space{position:relative;height:400px;perspective:1800px}.wave-layer{position:absolute;inset:0 0 auto;height:132px;border:1px solid #454545;background:linear-gradient(120deg,#242424,#111);box-shadow:0 25px 50px #0007;padding:20px 27px;transform-origin:left center}.wave-layer span{font-size:12px;color:#aaa}.wave-layer svg{display:block;width:100%;height:73px;stroke:none;fill:#bababa}.wave-vocal{top:0;background:linear-gradient(120deg,#1c1c1c,#0b0b0b)}.wave-music{top:0;background:#0b0b0b}.wave-original{z-index:3}.wave-vocal{z-index:2}.wave-music{z-index:1}.audio-playhead{position:absolute;z-index:4;left:50%;top:0;height:375px;width:1px;background:linear-gradient(#fff9,#fff0);pointer-events:none}.audio-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 28px;font-size:12px;color:#777}.audio-bottom button{border:1px solid #444;padding:12px 18px;color:#ccc}.chapter-subline{max-width:360px;font-size:13px!important}
.workflow-plane{left:820px;top:230px;width:1230px;transform:perspective(2300px) rotateY(-23deg) rotateX(12deg) rotateZ(7deg)}.rename-control{display:flex;align-items:center;gap:20px;padding:24px 29px;background:#111;font-size:14px;color:#aaa}.rename-template{background:#242424;padding:12px 30px;color:#eee;font-family:Instrument,Harmony,sans-serif}.rename-control button{margin-left:auto;padding:12px 23px;background:#ddd;color:#111}.layer-head{display:flex;justify-content:space-between;padding:15px 29px;background:#101010;color:#707070;font-size:12px}.layer-row{display:grid;grid-template-columns:46px 35px 240px 1fr;align-items:center;height:57px;padding:0 29px;border-bottom:1px solid #292929;gap:12px;font-size:15px}.layer-number{color:#666;font-size:11px}.layer-type{color:#aaa}.layer-name{color:#aaa}.layer-row.renamed .layer-name{color:#fff}.layer-row.renamed{background:#ffffff04}.layer-timeline{height:100%;position:relative;border-left:1px solid #393939;background:repeating-linear-gradient(90deg,transparent 0,transparent 99px,#262626 100px)}.layer-timeline i{position:absolute;top:19px;height:20px;background:#747474}.layer-row.renamed .layer-timeline i{background:#c0c0c0}.workflow-bottom{display:flex;justify-content:space-between;padding:20px 29px;font-size:12px;color:#777}
.final-glyph{position:absolute;left:950px;top:85px;font-size:970px;font-weight:700;line-height:1.05;letter-spacing:-80px;color:#eee;text-shadow:0 20px 80px #ffffff08}.outro-copy{top:32%}.outro-copy>img{display:block;margin-bottom:32px;width:62px;height:62px}.outro-copy h2{font-family:Instrument,Harmony,sans-serif;font-size:clamp(55px,4.7vw,90px);font-weight:700;letter-spacing:-4px}.outro-copy>p:not(.eyebrow){font-size:22px}
.stage-controls{position:absolute;bottom:30px;left:var(--page-pad);right:var(--page-pad);display:flex;align-items:end;justify-content:space-between;gap:28px;z-index:12}.chapter-rail{display:flex;gap:22px;width:min(790px,70%)}.chapter-rail a{flex:1;min-width:0;border-top:1px solid #292929;padding-top:16px;min-height:44px;display:flex;gap:12px;align-items:center;font-size:10px;color:#808080;position:relative;white-space:nowrap}.chapter-rail a:before{content:'';position:absolute;top:-1px;left:0;height:1px;width:100%;background:#ccc;transform:scaleX(0);transform-origin:left;transition:transform .4s}.chapter-rail a[aria-current]{color:#e9e9e9}.chapter-rail a[aria-current]:before{transform:scaleX(1)}.chapter-rail small{font-size:9px;color:#777}.stage-tools{display:flex;align-items:center;gap:27px}.stage-tools button{font-size:10px;color:#999;display:flex;gap:13px;align-items:center;min-height:44px;padding:0;white-space:nowrap}.stage-tools svg{height:17px;width:17px}#motion-toggle i{width:21px;height:11px;background:#424242;border-radius:10px;position:relative}#motion-toggle i:after{content:'';position:absolute;width:7px;height:7px;background:#ddd;border-radius:50%;top:2px;right:2px}#motion-toggle[aria-pressed=true] i:after{right:12px;background:#777}.quiet-footer{padding:25px var(--page-pad);display:flex;justify-content:space-between;gap:20px;border-top:1px solid #171717;color:#707070;font-size:10px}.quiet-footer button{padding:0;font-size:10px;color:#999}.no-script{position:fixed;bottom:0;background:#111;z-index:60;padding:16px;font-size:12px}
@media(min-width:2100px){.scene-copy{max-width:40%}}
@media(max-width:1100px){.site-header{height:80px}.site-header nav{gap:24px}.scene-copy h2{font-size:46px}.scene-copy{top:43%}.scene-copy.hero-copy{bottom:20%}.hero-copy>p:not(.eyebrow){font-size:14px}.chapter-rail{width:76%;gap:13px}.stage-tools{gap:15px}#next-shot{font-size:0;gap:0}.stage-controls{bottom:22px}.actions{gap:20px}.subtle-action{font-size:12px}.motion-scene .scene-copy{max-width:44%}.chapter-rail a{gap:7px;font-size:9px}}
@media(max-width:700px){
 .site-header{height:76px;padding:0 24px}.brand{font-size:19px}.brand img{width:26px;height:26px}.mobile-menu{display:inline-grid}.site-header nav{display:none;position:absolute;top:66px;left:14px;right:14px;padding:18px 24px;background:#111;border:1px solid #333;flex-direction:column;align-items:stretch;gap:5px}.site-header.menu-open nav{display:flex}
 .frame-fit{left:50%;top:9%;transform:translateX(-50%) scale(var(--fit));transform-origin:top center}.desktop-plane{left:170px;top:310px;transform:perspective(2100px) rotateX(34deg) rotateY(-10deg) rotateZ(-11deg)}.native-island{left:350px;transform:scale(2.05)}.scene-veil{background:linear-gradient(transparent 40%,#000b 72%,#000)}
 .scene-copy,.motion-scene .scene-copy{left:24px;right:24px;top:auto;bottom:145px;max-width:none}.scene-copy.hero-copy{bottom:148px;max-width:none}.scene-copy h1,.scene-copy h2{font-size:43px;letter-spacing:-1.5px;line-height:1.22}.hero-copy h1{font-size:49px}.eyebrow{font-size:10px;margin-bottom:17px;letter-spacing:1.5px}.scene-copy>p:not(.eyebrow){font-size:12px;margin-top:15px}.hero-copy>p:not(.eyebrow){font-size:12px;max-width:300px}.actions{margin-top:21px;gap:24px}.button{min-height:44px;padding:0 19px;font-size:12px;gap:26px}.compat{font-size:8px;margin-top:15px}.subtle-action{font-size:11px}.scene-copy .chapter-subline{display:none}
 .expression-plane{left:625px;top:80px;width:755px;transform:perspective(2000px) rotateY(-17deg) rotateX(6deg) rotateZ(9deg)}.motion-result{left:370px;top:435px;font-size:340px}.graphic-plane{left:485px;top:80px;width:1030px}.audio-plane{left:510px;top:150px;width:1120px}.workflow-plane{left:500px;top:150px;width:1150px}.final-glyph{left:655px;top:-70px;font-size:960px}.outro-copy>img{width:38px;height:38px;margin-bottom:20px}.outro-copy h2{font-size:49px;letter-spacing:-2px}.outro-copy>p:not(.eyebrow){font-size:15px}
 .stage-controls{left:24px;right:24px;bottom:17px;display:block}.chapter-rail{width:100%;gap:11px}.chapter-rail a{display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding-top:12px;font-size:9px;min-height:45px}.chapter-rail small{font-size:8px}.chapter-rail a:nth-child(4) span{font-size:8px}.stage-tools{margin-top:8px;justify-content:space-between}.stage-tools button{min-height:27px;font-size:9px}#next-shot{font-size:9px;gap:9px}.quiet-footer{flex-wrap:wrap;padding:20px 24px;line-height:1.8;font-size:9px}.quiet-footer span:nth-child(2){display:none}
}
@media(max-height:680px) and (max-width:700px){.frame-fit{top:3%;--fit:.34!important}.scene-copy,.scene-copy.hero-copy,.motion-scene .scene-copy{bottom:127px}.scene-copy h1,.scene-copy h2{font-size:36px}.scene-copy>p:not(.eyebrow){margin-top:10px}.actions{margin-top:15px}.compat{margin-top:10px}.eyebrow{margin-bottom:9px}.outro-copy>img{display:none}}
@media(max-height:600px) and (min-width:701px){.site-header{height:65px}.scene-copy.hero-copy{bottom:110px}.hero-copy h1,.scene-copy h2{font-size:44px}.actions{margin-top:16px}.scene-copy{top:32%}.outro-copy>img{width:38px;height:38px;margin-bottom:18px}.stage-controls{bottom:15px}.compat{margin-top:10px}}
.reduced-motion *, .reduced-motion *:before,.reduced-motion *:after{scroll-behavior:auto!important;transition:none!important}.reduced-motion .scene.is-visible,.reduced-motion .scene.is-visible .parallax-shell,.reduced-motion .scene.is-visible .foreground{will-change:auto}
@media(prefers-reduced-motion:reduce){html:not(.motion-ready) *,html:not(.motion-ready) *:before{scroll-behavior:auto!important;transition:none!important}}
/* Keep preview actions within the camera crop, including the narrow framing. */
.drawing-toolbar button{margin-left:12px}.rename-control button{margin-left:18px}.audio-bottom{justify-content:flex-start;gap:34px}.audio-bottom button{order:-1}
@media(max-width:700px){.drawing-toolbar button,.rename-control button,.audio-bottom button{position:relative}.drawing-toolbar button:before,.rename-control button:before,.audio-bottom button:before{content:'';position:absolute;inset:-28px -12px}}