.demo-stage{position:relative;width:100%;aspect-ratio:900/560;overflow:hidden;isolation:isolate;border-radius:16px;background:#e9ede8;box-shadow:0 20px 65px -24px #223e3840,0 0 0 1px #18352f14;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#353b37;user-select:none}
.demo-canvas{position:absolute;width:900px;height:560px;transform-origin:top left;overflow:hidden;background:linear-gradient(140deg,#dce4dc 0%,#e7e8d9 48%,#c2d1c3 100%);transition:background .65s}
.demo-canvas[data-step="2"]{background:linear-gradient(130deg,#dadfdc,#e2dfd5 52%,#aebfb5)}
.demo-desktop-halo{position:absolute;inset:70px -100px -100px 200px;border-radius:50%;border:80px solid #fff3;transform:rotate(-20deg);filter:blur(20px)}
.demo-desktop-menu{position:relative;z-index:1;height:29px;display:flex;align-items:center;gap:19px;padding:0 19px;background:#f6f8f35c;box-shadow:0 1px #40544908;font-size:10px;font-weight:450;color:#334137}
.demo-desktop-menu strong{font-size:10px;font-weight:650}.demo-menu-apple{font-size:15px}.demo-desktop-menu-right{margin-left:auto;display:flex;align-items:center;gap:15px}
.demo-source-workspace,.demo-target-workspace{position:absolute;left:66px;top:66px;width:670px;height:421px;transition:opacity .75s,transform .75s cubic-bezier(.2,.7,.2,1)}
.demo-source-workspace{opacity:1;transform:translateX(0)}.demo-target-workspace{opacity:0;transform:translateX(80px);left:62px;top:73px;width:690px;height:400px}
.demo-canvas[data-step="2"] .demo-source-workspace{opacity:0;transform:translateX(-70px)}.demo-canvas[data-step="2"] .demo-target-workspace{opacity:1;transform:translateX(0)}
.demo-browser{position:relative;overflow:hidden;width:100%;height:100%;border-radius:10px;background:#fafbf8;box-shadow:0 14px 32px #233d3521,0 0 0 1px #53665b18}
.demo-browser-bar{height:31px;display:flex;align-items:center;background:#e4e7e0;gap:17px;padding:0 12px}.demo-traffic{display:inline-flex;align-items:center;gap:5px;flex:none}.demo-traffic i{width:8px;height:8px;border-radius:50%;background:#ff6a61;box-shadow:inset 0 0 0 .5px #0001}.demo-traffic i:nth-child(2){background:#f6c04e}.demo-traffic i:nth-child(3){background:#61c55b}
.demo-browser-tab{align-self:flex-end;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:8px 8px 0 0;background:#f8faf6;font-size:9px;height:25px;padding:0 12px;min-width:170px}.demo-browser-tab b{font-weight:400;opacity:.5}.demo-browser-plus{font-size:18px;line-height:1;opacity:.6}
.demo-browser-address{height:28px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#f8faf6;color:#859087;font-size:12px}.demo-browser-address>div{flex:1;background:#eaece6;border-radius:5px;height:20px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:8px;color:#7a847b}.demo-browser-page{height:calc(100% - 59px);padding:0 14px 12px}
.demo-video-brand{height:32px;display:flex;align-items:center;gap:6px;font-size:7px;font-weight:750;letter-spacing:1.8px}.demo-video-brand-mark{font-size:16px;letter-spacing:0;font-weight:500}.demo-video-brand-right{margin-left:auto;font-size:6px;font-weight:500;letter-spacing:0;color:#7a857a}
.demo-scenery{position:relative;overflow:hidden;background:#b8c9ba;width:100%;height:calc(100% - 76px);border-radius:4px}.demo-landscape{display:block;width:100%;height:100%}.demo-video-caption{position:absolute;left:22px;bottom:32px;color:#fff6df;text-shadow:0 1px 4px #1d352a15}.demo-video-caption>span{display:block;font-size:6px;letter-spacing:2px;margin-bottom:8px;font-weight:550}.demo-video-caption strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:33px;line-height:1.04;font-weight:400;letter-spacing:-.7px}.demo-video-progress{position:absolute;bottom:14px;left:20px;right:20px;height:2px;background:#ffffff40;border-radius:2px;overflow:hidden}.demo-video-progress span{height:100%;display:block;background:#f8f3dc}.demo-video-time{position:absolute;right:21px;bottom:24px;font-size:7px;letter-spacing:.3px;color:#ffffffb3;font-variant-numeric:tabular-nums}
.demo-video-description{display:flex;position:relative;flex-direction:column;justify-content:center;height:44px;gap:4px}.demo-video-description strong{font-size:10px;font-weight:550;letter-spacing:.2px}.demo-video-description>span{font-size:7px;color:#899086}.demo-video-description>i{position:absolute;right:0;top:13px;font-size:8px;font-style:normal;color:#7d887e}
.demo-notes{width:100%;height:100%;overflow:hidden;border-radius:10px;background:#fbfcf8;box-shadow:0 14px 32px #233d3521,0 0 0 1px #53665b18}.demo-notes-top{height:35px;padding:0 13px;display:flex;align-items:center;gap:19px;background:#f3f4ef;border-bottom:1px solid #43533d0a;font-size:10px;font-weight:550}.demo-notes-top-right{margin-left:auto;font-size:13px;letter-spacing:2px;color:#9aa092}.demo-notes-body{display:flex;height:calc(100% - 35px)}.demo-notes aside{width:152px;flex:none;background:#f0f2eb;padding:22px 10px;display:flex;flex-direction:column;gap:7px;font-size:9px;color:#7c887b}.demo-notes aside>span{padding:9px 10px;border-radius:5px}.demo-notes aside .demo-note-folder{font-size:8px;color:#929a8c;letter-spacing:.3px;margin-bottom:6px}.demo-notes aside .demo-note-selected{background:#e0e6d9;color:#4f6455}.demo-notes aside small{margin-top:auto;padding-left:10px;font-size:7px;color:#9ba294}.demo-note-paper{padding:29px 38px;flex:1;position:relative}.demo-note-date{font-size:6px;letter-spacing:1.4px;color:#9da491}.demo-note-paper h3{font-family:Georgia,"Songti SC",STSong,serif;font-size:33px;line-height:1.35;font-weight:500;margin:12px 0;color:#435245;letter-spacing:.5px}.demo-note-paper p{font-size:9px;margin:0;color:#9a9f92;line-height:1.6}.demo-note-rule{height:1px;background:#53634911;margin:22px 0 15px}.demo-note-todo{display:flex;align-items:center;gap:9px;height:25px;font-size:9px;color:#73806e}.demo-note-todo i{height:10px;width:10px;border:1px solid #b7c0ad;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-style:normal;color:#8f9c81}.demo-note-todo:first-of-type i{background:#e6ebde}.demo-note-writing{margin-top:17px;font-size:9px;color:#6b7b65}.demo-note-writing b{display:inline-block;vertical-align:-2px;width:1px;height:11px;background:#8a9e7f;margin-left:3px}
.demo-selection{position:absolute;z-index:4;left:80px;top:157px;width:642px;height:274px;border:2px solid #4388ff;border-radius:4px;box-shadow:0 0 0 999px #20382615;transition:opacity .35s,transform .5s,left .5s,top .5s,width .5s,height .5s;pointer-events:none}.demo-selection>i{position:absolute;width:8px;height:8px;background:#fff;border:2px solid #4388ff;border-radius:1px}.demo-selection>i:nth-child(1){top:-5px;left:-5px}.demo-selection>i:nth-child(2){top:-5px;right:-5px}.demo-selection>i:nth-child(3){bottom:-5px;left:-5px}.demo-selection>i:nth-child(4){bottom:-5px;right:-5px}.demo-selection>span{position:absolute;top:-29px;left:-2px;padding:6px 9px;background:#377cee;color:#fff;border-radius:4px 4px 4px 0;font-size:9px;white-space:nowrap}
.demo-canvas[data-mode="window"] .demo-selection{left:65px;top:65px;width:672px;height:423px;border-radius:10px}.demo-canvas[data-mode="desktop"] .demo-selection,.demo-canvas[data-mode="display"] .demo-selection{left:12px;top:38px;width:876px;height:483px;border-radius:8px}.demo-canvas[data-mode="desktop"] .demo-selection>span,.demo-canvas[data-mode="display"] .demo-selection>span{left:50%;top:10px;transform:translateX(-50%);border-radius:4px}.demo-canvas:not([data-step="0"]) .demo-selection{opacity:0;transform:scale(.96)}
.demo-pointer{position:absolute;z-index:5;left:688px;top:416px;display:flex;align-items:center;gap:5px;transition:opacity .3s,left .5s,top .5s}.demo-pointer svg{height:25px;width:20px;filter:drop-shadow(0 2px 2px #0003)}.demo-pointer>span{white-space:nowrap;background:#27362ddd;color:#fff;border-radius:4px;font-size:8px;padding:5px 8px;box-shadow:0 4px 10px #0001}.demo-canvas[data-mode="window"] .demo-pointer{left:708px;top:468px}.demo-canvas[data-mode="desktop"] .demo-pointer,.demo-canvas[data-mode="display"] .demo-pointer{left:763px;top:485px}.demo-canvas:not([data-step="0"]) .demo-pointer{opacity:0}
.demo-float{position:absolute;z-index:6;right:24px;top:47px;width:298px;height:179px;border-radius:10px;overflow:hidden;box-shadow:0 16px 35px #18372f3d,0 0 0 1px #fff9;opacity:0;transform:translate(0,65px) scale(.85);transform-origin:top right;transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1),top .65s,right .65s,width .45s,height .45s;background:transparent}.demo-canvas:not([data-step="0"]) .demo-float{opacity:1;transform:translate(0,0) scale(1)}.demo-canvas[data-step="1"] .demo-float{top:306px;right:28px}.demo-canvas[data-mode="window"] .demo-float{height:187px}.demo-canvas[data-mode="desktop"] .demo-float,.demo-canvas[data-mode="display"] .demo-float{height:185px}
.demo-float-capture{position:absolute;inset:0;transition:opacity .15s}.demo-float-capture>.demo-scenery{height:100%;border-radius:0}.demo-float .demo-video-caption{left:15px;bottom:24px}.demo-float .demo-video-caption>span{font-size:4px;letter-spacing:1.3px;margin-bottom:5px}.demo-float .demo-video-caption strong{font-size:24px;letter-spacing:-.5px}.demo-float .demo-video-progress{bottom:10px;left:14px;right:14px;height:1px}.demo-float .demo-video-time{bottom:17px;right:14px;font-size:4px}.demo-float-top,.demo-float-bottom{position:absolute;z-index:2;left:0;right:0;height:26px;display:flex;align-items:center;gap:7px;background:#242c2ae8;color:#f6f8f3;opacity:0;transition:opacity .25s}.demo-float-top{top:0;padding:0 9px;font-size:7px}.demo-float-top>span{font-size:12px;color:#ddd}.demo-float-top i{font-size:11px;font-style:normal;color:#b9c7bc}.demo-float-top strong{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:185px}.demo-float-top b{margin-left:auto;font-size:8px;color:#f7faf7a6;font-weight:550}.demo-float-bottom{bottom:0;padding:0 10px;font-size:6px;gap:5px}.demo-live-dot{width:4px;height:4px;background:#4098ff;border-radius:50%}.demo-float-bottom>div{margin-left:auto;display:flex;gap:11px;align-items:center}.demo-float-bottom svg{width:11px;height:11px;display:block}.demo-float-bottom>div>span{display:block}.demo-float:hover .demo-float-top,.demo-float:hover .demo-float-bottom,.demo-canvas[data-paused="true"] .demo-float-bottom{opacity:1}.demo-canvas[data-paused="true"] .demo-live-dot{background:#f4c86c}.demo-float-resize{position:absolute;right:5px;bottom:5px;width:5px;height:5px;border-right:1px solid #ffffff6b;border-bottom:1px solid #ffffff6b;border-radius:0 0 1px 0;pointer-events:none}
.demo-float-capture>.demo-browser{width:670px;height:421px;transform:scale(.445);transform-origin:top left;border-radius:0;box-shadow:none}.demo-float .demo-browser .demo-video-caption{left:22px;bottom:32px}.demo-float .demo-browser .demo-video-caption>span{font-size:6px;letter-spacing:2px;margin-bottom:8px}.demo-float .demo-browser .demo-video-caption strong{font-size:33px}.demo-float .demo-browser .demo-video-progress{bottom:14px;left:20px;right:20px;height:2px}.demo-float .demo-browser .demo-video-time{font-size:7px;bottom:24px;right:21px}
.demo-captured-desktop{width:900px;height:560px;position:absolute;inset:0;transform:scale(.3312);transform-origin:top left;background:linear-gradient(140deg,#dce4dc,#e7e8d9 48%,#c2d1c3);overflow:hidden}.demo-captured-desktop>.demo-browser{position:absolute;left:66px;top:66px;width:670px;height:421px;transform:none}.demo-captured-desktop>.demo-notes{position:absolute;left:62px;top:73px;width:690px;height:400px}.demo-mini-menu{height:29px;padding:0 19px;background:#f6f8f35c;line-height:29px;font-size:10px;color:#334137}.demo-mini-menu span{float:right}
.demo-dock{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);height:39px;padding:5px 7px;display:flex;align-items:center;gap:6px;border-radius:11px;background:#f7faf580;box-shadow:inset 0 0 0 1px #ffffff47,0 3px 8px #384e3c0c;backdrop-filter:blur(10px)}.demo-dock>i{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:18px;font-style:normal;box-shadow:0 1px 2px #23402a16}.demo-dock-finder{background:linear-gradient(90deg,#82bbdb 50%,#c1e4f1 50%);color:#316780}.demo-dock-safari{background:#f7faf4;color:#468bc4}.demo-dock-notes{background:linear-gradient(#e5c77e 0 30%,#f8f7e9 30%);color:#9da48f}.demo-dock>.demo-dock-calendar{position:relative;flex-direction:column;font-size:15px;background:#fafbf6;color:#61705a;padding-top:5px}.demo-dock-calendar small{position:absolute;top:0;left:0;right:0;background:#d48676;color:#fff;font-size:5px;line-height:8px;text-align:center;border-radius:5px 5px 0 0}.demo-dock>span{width:1px;height:24px;background:#7c8a731f;margin:0 2px}.demo-dock-ifloat{color:#fff;background:linear-gradient(140deg,#8ca7fb,#5478e7);font-weight:600}
.demo-workspace-tag{position:absolute;z-index:1;left:20px;bottom:22px;display:flex;gap:6px;align-items:center;font-size:8px;font-weight:500;color:#6f7d69}.demo-workspace-tag i{width:4px;height:4px;border-radius:50%;background:#859c7b}.demo-step-toast{position:absolute;z-index:7;bottom:70px;left:50%;transform:translateX(-50%);background:#fcfdf9ed;border:1px solid #fff7;box-shadow:0 5px 22px #304e3c10;color:#4d6252;font-size:10px;white-space:nowrap;padding:10px 16px;border-radius:7px;letter-spacing:.2px;transition:bottom .5s,opacity .5s}.demo-canvas[data-step="1"] .demo-step-toast{bottom:62px;left:38%}.demo-canvas[data-step="2"] .demo-step-toast{bottom:70px}
@media(prefers-reduced-motion:reduce){.demo-canvas *{transition:none!important}}

/* A region captures the exact 642 × 274 source rectangle, including its overlays. */
.demo-canvas[data-mode="region"] .demo-float{height:127.183px}
.demo-float-capture>.demo-scenery{width:642px;height:274px;transform:scale(.4641744548);transform-origin:top left}
.demo-float-capture>.demo-scenery .demo-video-caption{left:22px;bottom:32px}
.demo-float-capture>.demo-scenery .demo-video-caption>span{font-size:6px;letter-spacing:2px;margin-bottom:8px}
.demo-float-capture>.demo-scenery .demo-video-caption strong{font-size:33px;letter-spacing:-.7px}
.demo-float-capture>.demo-scenery .demo-video-progress{bottom:14px;left:20px;right:20px;height:2px}
.demo-float-capture>.demo-scenery .demo-video-time{bottom:24px;right:21px;font-size:7px}

/* Font-independent macOS chrome, shared with the hero scenes. */
.demo-desktop-menu,.demo-mini-menu{--menu-knob-color:#e9ede5}.demo-desktop-menu>.ui-icon--apple,.demo-mini-menu>.ui-icon--apple{width:13px;height:15px}.demo-desktop-menu .mac-menu-status,.demo-mini-menu .mac-menu-status{gap:15px}.demo-desktop-menu .mac-menu-status time,.demo-mini-menu .mac-menu-status time{font-size:10px}.demo-mini-menu{display:flex;align-items:center;gap:19px;font-weight:450}.demo-mini-menu strong{font-size:10px;font-weight:650}.demo-mini-menu span{float:none}
.demo-browser-tab>b,.demo-browser-plus,.demo-browser-address>span,.demo-browser-address>div>span{display:flex;align-items:center;justify-content:center}.demo-browser-tab>b .ui-icon{width:9px;height:9px}.demo-browser-plus .ui-icon{width:13px;height:13px}.demo-browser-navigation{gap:12px}.demo-browser-address>span .ui-icon{width:12px;height:12px}.demo-browser-address>div .ui-icon{width:9px;height:9px}.demo-browser-address>span:last-child .ui-icon{transform:rotate(90deg)}
.demo-video-brand-mark{display:flex;align-items:center}.demo-video-brand-mark .ui-icon{width:15px;height:15px}.demo-video-description>i{display:flex;align-items:center;gap:4px}.demo-video-description>i .ui-icon{width:10px;height:10px}
.demo-notes-top-right{display:flex;align-items:center;gap:15px}.demo-notes-top-right .ui-icon{width:13px;height:13px}.demo-notes aside>span{display:flex;align-items:center;gap:6px}.demo-notes aside>span .ui-icon{width:11px;height:11px}.demo-note-todo i .ui-icon{width:8px;height:8px}.demo-float-top>span,.demo-float-top>i{display:flex;align-items:center}.demo-float-top>span>.ui-icon{width:11px;height:11px}.demo-float-top>i>.ui-icon{width:12px;height:12px}
.demo-dock-art{display:block;width:28px;height:28px;flex:none}.demo-dock>.demo-dock-finder,.demo-dock>.demo-dock-safari,.demo-dock>.demo-dock-notes,.demo-dock>.demo-dock-ifloat{background:transparent}.demo-dock>.demo-dock-ifloat{box-shadow:none}.demo-dock-ifloat>img{display:block;width:28px;height:28px;object-fit:contain}