/* Illustrative module workflows. All controls inside the scene are decorative. */
.module-demo{--scene-accent:#8edbe8;--scene-tint:#18313b;--scene-ease:cubic-bezier(.22,1,.36,1)}
.demo-whatsapp{--scene-accent:#8ad8b8;--scene-tint:#193d34}
.demo-telegram{--scene-accent:#8bc8ed;--scene-tint:#1b3448}
.demo-instagram{--scene-accent:#d6b6dc;--scene-tint:#382c40}
.demo-spotify{--scene-accent:#b3d7a3;--scene-tint:#293d2a}
.module-demo .flow-header{padding:15px 24px;background:#151d26}
.module-demo .flow-header img{width:19px;height:19px;flex-shrink:0}
.module-demo .flow-header>div{font-size:12px}
.module-demo .flow-header .demo-label{font-size:9px}
.scene-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,.85fr);align-items:center;gap:64px;padding:34px 56px;min-height:468px;background:#0f1720}
.scene-editor{min-width:0;align-self:center}
.scene-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:19px;border-bottom:1px solid #2a3744;margin-bottom:23px}
.scene-editor-heading>strong{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px}
.scene-editor-heading .icon{width:17px;height:17px;color:var(--scene-accent)}
.scene-status{display:grid;max-width:44%;font-size:9px;color:#91a5b7;text-align:right;line-height:1.4}
.scene-status>span{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s}
[data-step="0"] .scene-status>.phase-0,[data-step="1"] .scene-status>.phase-1,[data-step="2"] .scene-status>.phase-2{visibility:visible;opacity:1}
[data-step="1"] .scene-status,[data-step="2"] .scene-status{color:var(--scene-accent)}
.scene-field-label{font-size:10px;color:#8c9eae;margin:18px 0 8px}
.scene-field-label:first-child{margin-top:0}
.scene-person{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #2b3d4b;border-radius:5px;background:#14202b;transition:background .5s,border-color .5s;min-width:0}
.scene-person+.scene-person{margin-top:7px}
.scene-person strong{font-size:11px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.scene-avatar{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:#304453;color:#cddce6;font-size:10px;font-weight:500}
.person-second .scene-avatar{background:#4a3c4b;color:#e5d3e5}
.scene-tick{margin-left:auto;display:grid;place-items:center;width:17px;height:17px;border-radius:4px;background:var(--scene-tint);color:var(--scene-accent);border:1px solid #496271;flex-shrink:0}
.scene-tick .icon{width:12px;height:12px}
.module-demo[data-step="0"] .scene-person{animation:scene-select .7s var(--scene-ease) .4s both}
.module-demo[data-step="0"] .person-second{animation-delay:.9s}
.scene-message,.scene-caption{border:1px solid #364b5d;border-radius:5px;background:#101b26;color:#d6e0e7;font-size:12px;line-height:1.7;padding:14px;min-height:70px}
.scene-caption{min-height:48px;padding:10px 12px;font-size:11px}
.text-caret{display:inline-block;width:1px;height:12px;background:var(--scene-accent);vertical-align:middle;margin-left:3px}
[data-step="0"] .text-caret{animation:scene-caret 1s steps(1,end) 4}
.scene-progress{height:3px;margin-top:21px;border-radius:2px;background:#243442;overflow:hidden}
.scene-progress>i{display:block;height:100%;width:100%;background:var(--scene-accent);transform:scaleX(0);transform-origin:left;opacity:.9}
.module-demo[data-step="1"] .scene-progress>i{animation:scene-progress 4.9s cubic-bezier(.18,.65,.3,1) .2s forwards}
.module-demo[data-step="2"] .scene-progress>i{transform:scaleX(1)}
.scene-action{position:relative;margin-top:18px;display:inline-flex;max-width:100%}
.scene-action>span{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--scene-tint);border:1px solid #476474;color:var(--scene-accent);padding:10px 16px;border-radius:5px;font-size:11px;min-height:39px;line-height:1.4}
.scene-action .icon{width:15px;height:15px}
.scene-action .scene-status{font-size:inherit;max-width:none;text-align:left;color:inherit}
.action-icon{display:grid;flex-shrink:0}
.action-icon>.icon{grid-area:1/1}
.action-icon>.icon:last-child{opacity:0}
[data-step="2"] .action-icon>.icon:first-child{opacity:0}
[data-step="2"] .action-icon>.icon:last-child{opacity:1}
.action-ripple{position:absolute;right:18px;top:50%;width:22px;height:22px;border:1px solid var(--scene-accent);border-radius:50%;opacity:0;transform:translate(50%,-50%);pointer-events:none}
[data-step="0"] .scene-action>span{animation:scene-press .55s ease 5.3s}
[data-step="0"] .action-ripple{animation:scene-ripple .8s ease 5.2s}
.scene-preview{position:relative;min-width:0;min-height:390px;display:flex;align-items:center;justify-content:center}
.scene-phone{width:218px;height:386px;border:1px solid #577083;border-radius:25px;background:#080f16;padding:6px;position:relative;box-shadow:0 18px 35px -28px #000;overflow:hidden;flex-shrink:0}
.scene-phone-top{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#a5b5c2;font:7px var(--font)}
.scene-phone-top>i{width:36px;height:7px;background:#04090e;border-radius:5px}
.scene-phone-content{height:calc(100% - 39px);overflow:hidden;background:#15212c;border-radius:6px 6px 13px 13px;position:relative}
.scene-phone-home{position:absolute;bottom:8px;height:3px;width:53px;left:calc(50% - 26px);background:#8e9ba6;border-radius:3px}
.phone-app-heading{display:flex;align-items:center;gap:7px;padding:12px 10px;border-bottom:1px solid #2b3e4b;font-size:9px;min-height:49px;background:#172733}
.phone-app-heading>strong{font-size:9px;font-weight:500}
.phone-app-heading>.icon,.phone-app-heading>span:last-child:not(.scene-avatar){margin-left:auto}
.phone-app-heading .icon{width:14px;height:14px;color:#9bb3c4}
.phone-app-heading .scene-avatar{width:24px;height:24px;flex-basis:24px;font-size:8px}
.scene-toast{position:absolute;bottom:13px;left:50%;transform:translate(-50%,10px);z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 14px);padding:10px 15px;border:1px solid #557b77;border-radius:7px;background:#1c3633;color:#c7ece0;box-shadow:0 10px 24px #050c1566;font-size:10px;line-height:1.4;white-space:nowrap;opacity:0;visibility:hidden}
.scene-toast .icon{width:15px;height:15px;flex-shrink:0}
[data-step="2"] .scene-toast{visibility:visible;animation:scene-toast 5.45s var(--scene-ease) .55s both}
.module-demo .demo-steps li{font-size:10px;padding:15px 20px;line-height:1.5}
.module-demo .demo-steps li.active{color:var(--scene-accent)}

/* Message creation, send, delivery. */
.phone-whatsapp .scene-phone-content{background:#10221f}
.phone-whatsapp .phone-app-heading{background:#203b34;border-color:#304f43}
.chat-canvas{padding:11px 10px;height:calc(100% - 91px);background-image:radial-gradient(#b2c8b30d 1px,transparent 1px);background-size:15px 15px}
.chat-day{font-size:7px;color:#7e9d91;text-align:center;margin:4px auto 17px}
.chat-bubble{font-size:10px;line-height:1.7;border-radius:7px;padding:9px 11px;max-width:87%;position:relative}
.incoming{background:#263c35;color:#c4d8ce;border-top-left-radius:0;width:max-content}
.outgoing{background:#315849;color:#e5f3e9;border-top-right-radius:0;margin:17px 0 0 auto;padding-bottom:20px;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--scene-ease)}
[data-step="1"] .outgoing{animation:scene-arrive .55s var(--scene-ease) 1.9s forwards}
[data-step="2"] .outgoing{opacity:1;transform:none}
.message-receipt{position:absolute;right:9px;bottom:6px;display:flex;color:#a3baad}
.message-receipt .icon{width:10px;height:10px;margin-left:-5px}
.message-receipt .icon:last-child{opacity:0}
[data-step="2"] .message-receipt{color:#94d8dd}
[data-step="2"] .message-receipt .icon:last-child{opacity:1}
.chat-typing{display:flex;gap:3px;justify-content:flex-end;height:0;padding-right:6px;opacity:0}
.chat-typing>i{width:4px;height:4px;background:#87b4a2;border-radius:50%;margin-top:12px}
[data-step="1"] .chat-typing{animation:scene-typing 1.7s ease both}
[data-step="1"] .chat-typing>i{animation:scene-dot .5s ease infinite alternate}
[data-step="1"] .chat-typing>i:nth-child(2){animation-delay:.15s}
[data-step="1"] .chat-typing>i:nth-child(3){animation-delay:.3s}
.chat-input{margin:5px 8px;display:flex;align-items:center;gap:12px;padding:9px;border-radius:18px;background:#1c352d}
.chat-input>i{width:65%;height:4px;border-radius:3px;background:#355247}
.chat-input>.icon{width:13px;height:13px;color:#8eb6a5;margin-left:auto}

/* Session transfer and restored chats. */
.session-route{display:flex;align-items:center;justify-content:center;padding:29px 5px 15px;gap:14px;font-size:9px;color:#afc5d6}
.session-origin,.session-destination{display:flex;flex-direction:column;align-items:center;gap:10px}
.session-origin .icon,.session-destination .icon{width:27px;height:27px;color:#81aac5}
.session-line{height:1px;background:#314856;flex:1;position:relative;margin-bottom:21px}
.session-line>i{position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:2px;background:var(--scene-accent);opacity:0}
[data-step="1"] .session-line>i{animation:scene-transfer 1.8s cubic-bezier(.4,0,.2,1) infinite}
[data-step="1"] .session-line>i:nth-child(2){animation-delay:.35s}
[data-step="1"] .session-line>i:nth-child(3){animation-delay:.7s}
.scene-target{display:flex;align-items:center;gap:10px;border:1px solid #344e60;background:#192e3e;padding:12px;border-radius:6px;font-size:11px}
.scene-target>.icon{width:18px;height:18px;color:#a5cfe5}
.scene-target>strong{font-weight:500}
.phone-launch{position:absolute;inset:0;background:#162c3b;display:grid;place-items:center;transition:opacity .7s var(--scene-ease),visibility .7s}
.phone-launch>img{width:52px;height:52px;object-fit:contain}
[data-step="1"] .phone-launch{opacity:0;visibility:hidden;transition-delay:2.5s}
[data-step="2"] .phone-launch{opacity:0;visibility:hidden}
.restored-profile{display:flex;align-items:center;gap:7px;padding:17px 10px 13px;font-size:9px;background:#1c3546}
.restored-profile>strong{font-size:9px;font-weight:500}
.restored-profile>.icon{width:12px;height:12px;color:#98d0e5;margin-left:auto}
.restored-chat{display:flex;gap:9px;align-items:center;padding:15px 11px;border-bottom:1px solid #283c4d}
.restored-chat>div{flex:1}
.restored-chat strong{font-size:9px;font-weight:500;display:block}
.restored-chat>div>i{display:block;width:80%;height:4px;border-radius:3px;background:#3d5261;margin-top:8px}
.chat-unread{width:5px;height:5px;background:#8fcbe1;border-radius:50%}
[data-step="1"] .restored-chat{animation:scene-arrive .65s var(--scene-ease) calc(2.6s + var(--order)*.2s) both}

/* Publishing: one asset carries through the editor and device. */
.demo-film{position:relative;overflow:hidden;background:#98ada3;isolation:isolate}
.demo-film>img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);max-width:none}
.film-word{position:absolute;bottom:14%;left:8%;color:#f9f7e9;font-size:9px;font-weight:600;letter-spacing:.18em;text-shadow:0 1px 5px #34514755}
.scene-asset{display:flex;align-items:center;gap:13px;border:1px solid #334553;background:#182630;padding:10px;border-radius:6px}
.scene-asset .demo-film{width:65px;height:76px;border-radius:3px;flex-shrink:0}
.scene-asset .film-word{display:none}
.scene-asset>div:not(.demo-film){min-width:0;flex:1}
.scene-asset strong{font-size:12px;font-weight:500;display:block}
.scene-asset>div>span{display:block;font-size:8px;color:#8ea5b5;margin-top:5px}
.scene-asset>.icon{width:17px;height:17px;color:#7794a7;flex-shrink:0}
.scene-publish-list{margin-top:15px}
.scene-publish-list .scene-person{padding:8px 10px}
.scene-publish-list .scene-avatar{width:23px;height:23px;flex-basis:23px;font-size:9px}
.scene-publish-list .scene-person strong{font-size:10px}
.demo-tiktok.module-demo .scene-progress{margin-top:15px}
.social-post{opacity:.3;transform:translateY(10px);transition:opacity .7s,transform .8s var(--scene-ease)}
[data-step="1"] .social-post{opacity:.55;transform:none}
[data-step="2"] .social-post{opacity:1;transform:none}
.social-post .demo-film{aspect-ratio:1/1}
.social-post .film-word{font-size:9px}
.social-actions{display:flex;gap:12px;padding:11px 12px}
.social-actions .icon{width:15px;height:15px;color:#d0dbe4}
.post-caption{display:flex;flex-direction:column;gap:3px;font-size:9px;padding:0 12px}
.post-caption strong{font-size:9px;font-weight:500}
.post-caption>span{color:#a7bac9}
.short-video{height:100%;position:relative}
.short-video>.demo-film{height:100%;opacity:.4;transition:opacity .8s}
.short-video>.demo-film::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#071214ba)}
.short-video .demo-film>img{object-position:53% center}
.short-video .film-word{font-size:10px;left:10%;bottom:45%;z-index:1}
.short-actions{position:absolute;right:10px;bottom:92px;display:flex;flex-direction:column;gap:19px;color:#f5f7f2}
.short-actions .icon{width:19px;height:19px;filter:drop-shadow(0 1px 2px #223a3655)}
.short-caption{position:absolute;bottom:21px;left:13px;right:32px;font-size:9px;color:#eff5e9;display:flex;flex-direction:column;gap:7px}
.short-caption strong{font-size:10px;font-weight:600}
.short-music{font-size:7px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.short-music>.icon{width:10px;height:10px}
[data-step="1"] .short-video>.demo-film{opacity:.75}
[data-step="2"] .short-video>.demo-film{opacity:1}
[data-step="1"] .short-video img{animation:scene-camera 6s ease-out forwards}
[data-step="2"] .short-video img{animation:scene-camera-end 6s linear forwards}
.demo-youtube .scene-workspace{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
.scene-watch{width:100%;border:1px solid #3b5061;border-radius:10px;overflow:hidden;background:#131e28}
.watch-top{display:flex;align-items:center;gap:7px;padding:13px 14px;font-size:11px}
.watch-top>img{width:19px;height:19px;object-fit:contain}
.watch-top>strong{font-weight:500}
.watch-top>i{margin-left:auto;width:50px;height:6px;background:#2b3c4b;border-radius:5px}
.scene-watch>.demo-film{aspect-ratio:16/10;opacity:.4;transition:opacity 1s}
[data-step="1"] .scene-watch>.demo-film{opacity:.7}
[data-step="2"] .scene-watch>.demo-film{opacity:1}
.scene-watch .film-word{font-size:12px}
.watch-scrubber{height:2px;background:#3c4b52}
.watch-scrubber>i{display:block;width:0;height:100%;background:#d69e9d}
[data-step="2"] .watch-scrubber>i{animation:watch-progress 6s linear forwards}
.watch-caption{padding:16px}
.watch-caption>strong{font-size:14px;font-weight:500}
.watch-caption .phone-app-heading{padding:12px 0;background:none;border:0}
.watch-description>i{display:block;height:4px;background:#2b3d4d;width:88%;border-radius:3px}
.watch-description>i+i{width:64%;margin-top:7px}

/* Playlist selection, queue and a living playback state. */
.playlist-heading{display:flex;gap:15px;align-items:center;margin-bottom:20px}
.album-thumb{width:55px;height:55px;border-radius:4px;background:linear-gradient(150deg,#adbd92,#4e7058 53%,#182e2b);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.album-thumb .icon{width:24px;height:24px;color:#dfedcf}
.playlist-heading small{font-size:9px;color:#8da297;display:block;margin-bottom:4px}
.playlist-heading strong{font-size:16px;font-weight:500}
.scene-track{display:flex;align-items:center;gap:11px;padding:13px 10px;border-bottom:1px solid #2d3d38;transition:background .6s,color .6s}
.scene-track>span:first-child{font-size:9px;font-family:Consolas,monospace;color:#768e80}
.scene-track .album-thumb{width:33px;height:33px}
.album-1{background:linear-gradient(140deg,#bec5ae,#838b90 45%,#2d3d50)}
.album-2{background:linear-gradient(140deg,#c7ab9c,#896475 45%,#3b394f)}
.scene-track>strong{font-size:11px;font-weight:500}
.track-eq{display:flex;gap:2px;align-items:center;height:12px;margin-left:auto;opacity:0}
.track-eq>i{width:2px;height:7px;background:var(--scene-accent)}
[data-step="1"] .scene-track:first-child,[data-step="2"] .scene-track:first-child{background:#24382b;color:#c1dfae}
[data-step="2"] .scene-track:first-child .track-eq{opacity:1}
[data-step="2"] .track-eq>i{animation:scene-equalizer .6s ease-in-out infinite alternate}
[data-step="2"] .track-eq>i:nth-child(2){animation-delay:-.4s}
[data-step="2"] .track-eq>i:nth-child(3){animation-delay:-.8s}
.phone-spotify .scene-phone-content{background:linear-gradient(#2e4336,#14211e)}
.player-heading{text-align:center;font-size:8px;color:#bdd0bc;padding:15px 10px 19px}
.player-art{height:154px;margin:0 16px;background:linear-gradient(145deg,#c0c9a9,#6b8c70 50%,#36594b);position:relative;overflow:hidden;border-radius:3px}
.player-art>span{position:absolute;left:12px;bottom:13px;font-size:15px;line-height:1.2;letter-spacing:-.05em;color:#eff0d9;font-weight:600}
.album-orbit{position:absolute;width:210px;height:210px;border-radius:50%;border:1px solid #e6eed080;left:43px;top:-95px;box-shadow:0 0 0 15px #d5e4c718,0 0 0 30px #d5e4c718,0 0 0 45px #d5e4c718}
.orbit-two{width:90px;height:90px;left:-56px;top:65px;opacity:.4}
[data-step="2"] .album-orbit{animation:scene-orbit 6s ease-in-out infinite alternate}
.player-track{padding:16px 17px 0}
.player-track>strong{display:block;font-size:17px;font-weight:500;letter-spacing:-.03em}
.player-track>span{font-size:9px;color:#9fbaa8}
.player-progress{height:2px;margin:15px 17px 0;background:#577460}
.player-progress>i{display:block;width:0;height:100%;background:#d1e4bb}
[data-step="1"] .player-progress>i{animation:player-start 6s linear forwards}
[data-step="2"] .player-progress>i{animation:player-end 6s linear forwards}
.player-equalizer{height:37px;margin:12px 17px 0;display:flex;justify-content:center;align-items:center;gap:4px;color:#bad9a4}
.player-equalizer>i{display:block;width:3px;height:5px;background:currentColor;border-radius:2px;opacity:.4}
[data-step="2"] .player-equalizer>i{height:22px;opacity:.9;animation:scene-equalizer calc(.45s + var(--order)*.03s) ease-in-out calc(var(--order)*-.18s) infinite alternate}

/* Video editing: crop, moving playhead and staggered output clips. */
.demo-videoforge .scene-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:36px}
.demo-videoforge .scene-editor-heading{margin-bottom:18px}
.editor-monitor{position:relative;border:1px solid #395363;border-radius:6px;overflow:hidden}
.editor-monitor>.demo-film{aspect-ratio:16/9}
.editor-monitor .film-word{font-size:10px}
.crop-guide{position:absolute;inset:8px 33%;border:1px solid #e5f5e9;box-shadow:0 0 0 200px #09182055;opacity:0;transform:translateX(28px);transition:opacity .6s}
.crop-guide>i{position:absolute;width:9px;height:9px;border:2px solid #daf1df}
.crop-guide>i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}
.crop-guide>i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
.crop-guide>i:nth-child(3){right:-2px;bottom:-2px;border-left:0;border-top:0}
.crop-guide>i:nth-child(4){left:-2px;bottom:-2px;border-right:0;border-top:0}
[data-step="1"] .crop-guide{opacity:1;animation:scene-crop 4.8s var(--scene-ease) forwards}
[data-step="2"] .crop-guide{opacity:1;transform:translateX(-8px)}
.edit-timeline{position:relative;margin-top:12px;padding:10px 8px;border:1px solid #2a3c49;border-radius:5px;overflow:hidden;background:#14212b}
.timeline-ruler{display:flex;justify-content:space-between;font:7px Consolas,monospace;color:#7c98a9;padding:0 2px 8px}
.edit-cuts{display:flex;gap:3px;height:20px}
.edit-cuts>i{flex:1;background:#3c6872;border:1px solid #57838c;border-radius:2px;opacity:.45;transition:opacity .5s,background .5s}
.edit-cuts>i:nth-child(2){background:#557565;border-color:#729581}
.edit-cuts>i:nth-child(3){background:#6a626e;border-color:#927a92}
[data-step="1"] .edit-cuts>i,[data-step="2"] .edit-cuts>i{opacity:1}
.edit-wave{height:25px;display:flex;align-items:center;gap:3px;padding:4px 0 0}
.edit-wave>i{flex:1;height:var(--bar);background:#638b85;border-radius:1px}
.edit-playhead{position:absolute;top:26px;bottom:7px;width:1px;background:#d3efe5;left:9px;opacity:0}
.edit-playhead::before{content:"";position:absolute;width:5px;height:5px;background:#d3efe5;left:-2px;top:-4px;transform:rotate(45deg)}
[data-step="1"] .edit-playhead{opacity:1;animation:edit-scan 5.5s linear forwards}
[data-step="2"] .edit-playhead{left:calc(100% - 9px);opacity:1}
.finished-clips{display:flex;gap:11px;align-items:center;width:100%;padding-bottom:20px}
.finished-clip{position:relative;flex:1;min-width:0;aspect-ratio:9/17;border:1px solid #3b5260;border-radius:7px;overflow:hidden;background:#15232d;transform:translateY(0);transition:transform .6s var(--scene-ease),border-color .6s}
.finished-clip .demo-film{height:100%;opacity:.08;transition:opacity .5s}
.finished-clip .demo-film img{object-position:45% center}
.finished-clip .film-word{display:none}
.finished-clip.clip-1 .demo-film img{object-position:62% center;filter:hue-rotate(12deg)}
.finished-clip.clip-2 .demo-film img{object-position:80% center;filter:hue-rotate(-15deg)}
.clip-number{position:absolute;left:10px;top:10px;font:9px Consolas,monospace;color:#d6e7e4;opacity:.5}
.clip-subtitle{position:absolute;left:8px;right:8px;bottom:25%;text-align:center;font-size:9px;font-weight:600;line-height:1.5;color:#fff9e9;text-shadow:0 1px 5px #1e3b32;opacity:0}
.clip-check{position:absolute;right:8px;bottom:8px;width:19px;height:19px;display:grid;place-items:center;background:#284b3e;border:1px solid #82a99a;border-radius:50%;color:#c1e9d3;opacity:0}
.clip-check .icon{width:11px;height:11px}
[data-step="1"] .finished-clip .demo-film{animation:clip-render .8s var(--scene-ease) calc(.9s + var(--order)*1.2s) forwards}
[data-step="1"] .clip-subtitle{animation:scene-arrive .6s var(--scene-ease) calc(1.5s + var(--order)*1.2s) forwards}
[data-step="2"] .finished-clip{transform:translateY(-5px);border-color:#6c928c}
[data-step="2"] .finished-clip .demo-film,[data-step="2"] .clip-subtitle{opacity:1}
[data-step="2"] .clip-check{animation:scene-arrive .5s var(--scene-ease) calc(var(--order)*.17s) both}

/* Base keeps the large opaque remote workspace and gains a clearer action sequence. */
.demo-base .device{transition:transform .55s var(--scene-ease),border-color .55s,background .55s}
.demo-base[data-step="0"] .device-grid{animation:scene-arrive .55s ease both}
.demo-base[data-step="1"] .device:nth-child(-n+3){transform:translateY(-5px)}
.demo-base[data-step="1"] .device:nth-child(2){transition-delay:.14s}
.demo-base[data-step="1"] .device:nth-child(3){transition-delay:.28s}
.demo-base[data-step="2"] .remote-stage{animation:scene-panel .65s var(--scene-ease) both}
.demo-base[data-step="2"] .remote-tool-card:nth-of-type(3){animation:scene-select .7s ease 1.3s both}
.remote-feedback{display:flex;align-items:center;gap:8px;color:#b8e4d7;font-size:11px;margin-top:19px;opacity:0}
.remote-feedback>.icon{width:15px;height:15px}
.demo-base[data-step="2"] .remote-feedback{animation:scene-arrive .45s ease 2.6s forwards}
.demo-base[data-step="2"] .sent-check{animation:scene-arrive .4s ease 2.6s both}
.demo-base[data-step="2"] .typed-text{animation:type-text 1.7s steps(16,end) .7s forwards}

@keyframes scene-select{from{border-color:#2b3d4b;background:#14202b}to{border-color:#536f77;background:var(--scene-tint,#233d47)}}
@keyframes scene-progress{0%{transform:scaleX(0)}30%{transform:scaleX(.4)}65%{transform:scaleX(.67)}100%{transform:scaleX(1)}}
@keyframes scene-press{50%{transform:scale(.98);filter:brightness(1.3)}}
@keyframes scene-ripple{0%{opacity:.65;transform:translate(50%,-50%) scale(.3)}100%{opacity:0;transform:translate(50%,-50%) scale(2)}}
@keyframes scene-toast{0%,100%{opacity:0;transform:translate(-50%,8px)}15%,87%{opacity:1;transform:translate(-50%,0)}}
@keyframes scene-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-panel{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes scene-caret{50%{opacity:0}}
@keyframes scene-typing{0%,90%{opacity:1}100%{opacity:0}}
@keyframes scene-dot{to{transform:translateY(-3px)}}
@keyframes scene-transfer{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scene-camera{from{transform:scale(1.08)}to{transform:scale(1.15) translateX(-2%)}}
@keyframes scene-camera-end{from{transform:scale(1.15) translateX(-2%)}to{transform:scale(1.2) translateX(-3%)}}
@keyframes watch-progress{to{width:34%}}
@keyframes player-start{to{width:28%}}
@keyframes player-end{from{width:28%}to{width:62%}}
@keyframes scene-equalizer{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@keyframes scene-orbit{to{transform:translate(-8px,13px)}}
@keyframes scene-crop{0%{transform:translateX(28px)}55%,100%{transform:translateX(-8px)}}
@keyframes edit-scan{to{left:calc(100% - 9px)}}
@keyframes clip-render{from{opacity:.08;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}

@media(max-width:1100px){
  .scene-workspace{padding:30px;gap:36px}
  .scene-editor-heading>strong{font-size:12px}
  .scene-watch .film-word{font-size:10px}
}
@media(max-width:800px){
  .scene-workspace{padding:25px;gap:26px;grid-template-columns:minmax(0,1fr) 208px}
  .scene-phone{width:200px;height:365px}
  .scene-preview{min-height:373px}
  .scene-editor-heading{gap:10px}
  .scene-editor-heading>strong{font-size:11px;gap:7px}
  .scene-status{font-size:8px}
  .scene-person{padding:10px 9px}
  .scene-person strong{font-size:10px}
  .scene-message{font-size:11px}
  .scene-asset{gap:10px}
  .scene-asset .demo-film{width:50px;height:64px}
  .scene-asset strong{font-size:10px}
  .scene-asset>.icon{display:none}
  .scene-track{gap:8px;padding-inline:6px}
  .scene-track>strong{font-size:10px}
  .scene-watch .watch-caption{padding:12px}
  .scene-watch .watch-caption>strong{font-size:12px}
  .demo-youtube .scene-workspace,.demo-videoforge .scene-workspace{gap:25px}
  .finished-clips{gap:7px}
  .clip-subtitle{font-size:8px;left:5px;right:5px}
  .module-demo .demo-steps li{font-size:9px;padding:13px 12px}
}
@media(max-width:600px){
  .module-demo .flow-header{padding:12px 15px;gap:12px;align-items:center}
  .module-demo .flow-header>div{font-size:10px;gap:7px}
  .module-demo .flow-header img{width:17px;height:17px}
  .module-demo .flow-header .demo-label{font-size:7px;max-width:135px;text-align:right}
  .scene-workspace,.demo-youtube .scene-workspace,.demo-videoforge .scene-workspace{grid-template-columns:minmax(0,1fr);padding:20px;gap:27px}
  .scene-editor-heading{padding-bottom:13px;margin-bottom:15px}
  .scene-editor-heading>strong{font-size:12px}
  .scene-status{font-size:8px}
  .scene-field-label{display:none}
  .scene-message,.scene-caption{margin-top:12px}
  .scene-person{padding:8px 10px;gap:8px}
  .scene-person strong{font-size:10px}
  .scene-avatar{width:23px;height:23px;flex-basis:23px;font-size:9px}
  .scene-people{display:flex;gap:7px}
  .scene-people .scene-person{flex:1;min-width:0;padding:8px}
  .scene-people .scene-person+.scene-person{margin:0}
  .scene-people .scene-avatar{display:none}
  .scene-people .scene-person strong{font-size:9px}
  .scene-people .scene-tick{width:14px;height:14px}
  .scene-message{padding:11px;min-height:54px;font-size:11px}
  .scene-caption{font-size:10px;min-height:41px}
  .scene-progress{margin-top:14px}
  .scene-action{margin-top:13px}
  .scene-action>span{font-size:10px;min-height:34px;padding:8px 12px}
  .scene-action .icon{width:13px;height:13px}
  .scene-preview{min-height:334px}
  .scene-phone{width:186px;height:330px;border-radius:22px;padding:5px}
  .scene-phone-top{height:21px;font-size:6px}
  .scene-phone-content{height:calc(100% - 35px)}
  .scene-phone-home{bottom:7px;height:2px}
  .scene-toast{font-size:9px;padding:8px 12px;bottom:7px}
  .phone-app-heading{min-height:43px;padding:9px}
  .phone-app-heading>strong{font-size:8px}
  .chat-bubble{font-size:9px;padding:8px 10px}
  .outgoing{padding-bottom:19px}
  .chat-canvas{height:calc(100% - 80px)}
  .chat-input{padding:8px}
  .session-route{padding:19px 5px 5px;gap:10px}
  .session-route .icon{width:22px;height:22px}
  .session-origin,.session-destination{font-size:8px;gap:6px}
  .scene-target{padding:9px 11px;font-size:10px}
  .restored-profile{padding:13px 9px;font-size:8px}
  .restored-profile>strong{font-size:8px}
  .restored-chat{padding:12px 9px}
  .restored-chat strong{font-size:8px}
  .scene-asset .demo-film{width:46px;height:54px}
  .scene-asset strong{font-size:11px}
  .scene-asset{padding:8px}
  .scene-publish-list{margin-top:11px;display:flex;gap:7px}
  .scene-publish-list .scene-person{flex:1;min-width:0;padding:7px}
  .scene-publish-list .scene-person+.scene-person{margin:0}
  .scene-publish-list .person-second .scene-avatar{display:none}
  .scene-publish-list .scene-person strong{font-size:9px}
  .demo-tiktok .scene-publish-list .scene-avatar{display:none}
  .demo-tiktok .scene-publish-list .scene-tick{width:13px;height:13px}
  .social-actions{padding:10px}
  .social-actions .icon{width:13px;height:13px}
  .post-caption{font-size:8px;padding:0 10px;gap:1px}
  .post-caption strong{font-size:8px}
  .short-actions{bottom:84px;gap:16px}
  .short-actions .icon{width:17px;height:17px}
  .short-caption{bottom:17px;font-size:8px;gap:6px;left:10px}
  .short-caption strong{font-size:9px}
  .demo-youtube .scene-preview{min-height:0;padding-bottom:15px}
  .scene-watch>.demo-film{aspect-ratio:16/9}
  .scene-watch .watch-caption{padding:12px}
  .watch-caption .phone-app-heading{padding-bottom:0}
  .watch-description{display:none}
  .playlist-heading{gap:11px;margin-bottom:10px}
  .playlist-heading .album-thumb{width:43px;height:43px}
  .playlist-heading strong{font-size:14px}
  .playlist-heading small{font-size:8px}
  .scene-track{padding:9px 5px}
  .scene-track .album-thumb{width:28px;height:28px}
  .player-heading{font-size:7px;padding:12px 10px 14px}
  .player-art{height:131px;margin:0 13px}
  .player-art>span{font-size:14px}
  .player-track{padding:12px 14px 0}
  .player-track>strong{font-size:15px}
  .player-track>span{font-size:8px}
  .player-progress{margin:11px 14px 0}
  .player-equalizer{height:29px;margin-top:10px;gap:3px}
  .player-equalizer>i{width:2px}
  .demo-videoforge .scene-preview{min-height:0;padding:10px 0 35px}
  .finished-clips{gap:9px;padding-bottom:0}
  .clip-subtitle{font-size:7px}
  .clip-number{font-size:8px;left:7px;top:7px}
  .clip-check{width:16px;height:16px;right:5px;bottom:5px}
  .module-demo .demo-steps li{font-size:8px;padding:12px 9px;gap:6px;align-items:flex-start}
  .module-demo .demo-steps .step-no{font-size:8px;line-height:1.5}
  .remote-feedback{grid-column:1/-1;justify-content:center;margin-top:0;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .module-demo *, .module-demo *::before,.module-demo *::after,.demo-base *{animation:none!important;transition:none!important}
  [data-step="1"] .scene-progress>i{transform:scaleX(.65)}
  [data-step="1"] .outgoing,[data-step="2"] .scene-toast,[data-step="2"] .clip-check,[data-step="2"] .remote-feedback,[data-step="2"] .sent-check{opacity:1;transform:none}
  [data-step="2"] .scene-toast{transform:translateX(-50%)}
  [data-step="1"] .chat-typing{opacity:0}
  [data-step="1"] .crop-guide{transform:translateX(-8px)}
  [data-step="1"] .finished-clip .demo-film,[data-step="1"] .clip-subtitle{opacity:.7}
  [data-step="2"] .player-progress>i{width:62%}
  [data-step="2"] .watch-scrubber>i{width:34%}
  .demo-base[data-step="2"] .typed-text{max-width:130px}
}