.isolation-demo{position:relative;width:100%;max-width:570px;margin:auto;color:#dce0e7;font:11px/1.45 Inter,'Segoe UI',sans-serif;text-align:left}.isolation-demo *,.connection-demo *{box-sizing:border-box}.isolation-computer{border:1px solid #3a414d;border-radius:11px;overflow:hidden;background:#111720;box-shadow:0 18px 40px #0002}.isolation-computer-heading{display:flex;align-items:center;gap:8px;height:42px;padding:0 15px;background:#191e27;border-bottom:1px solid #303744}.isolation-computer-heading strong{font-size:11px;font-weight:550}.isolation-computer-icon{font-size:20px;color:#95a7c0;line-height:1}.isolation-local{margin-left:auto;font-size:7px;letter-spacing:1px;color:#7c8ca3}.isolation-desktop{position:relative;height:345px;background:radial-gradient(ellipse at 80% 20%,#223654 0%,#182435 42%,#141d2b 100%)}.isolation-window{position:absolute;border-radius:6px;overflow:hidden;background:#fff;border:1px solid #444c58;box-shadow:0 10px 26px #0004}.isolation-personal{top:25px;left:15px;width:53%;height:252px}.isolation-window-heading{display:flex;align-items:center;gap:6px;height:30px;padding:0 9px;background:#242a34;color:#d2d9e6;font-size:9px}.isolation-window-heading strong{font-size:9px;font-weight:550}.isolation-personal-icon{font-size:13px;color:#95a3b9}.isolation-private-label{margin-left:auto;color:#abb7ca;background:#353d4c;border-radius:3px;padding:2px 5px;font-size:7px}.isolation-url{display:flex;align-items:center;gap:9px;padding:0 8px;height:27px;background:#eef0f3;color:#8b93a1;font-size:8px;border-bottom:1px solid #dee2e7}.isolation-url>span:last-child{display:block;flex:1;background:#fff;border:1px solid #dbe0e6;border-radius:3px;padding:2px 6px;color:#667283}.isolation-mail{background:#f9fafb;color:#323e4c;padding:9px 10px}.isolation-mail-heading{display:flex;gap:5px;font-size:10px;font-weight:600;margin-bottom:7px}.isolation-mail-heading>span{color:#97a2b2;font-weight:400;font-size:8px;align-self:center}.isolation-mail-row{display:flex;align-items:center;gap:6px;border-top:1px solid #e6e9ee;padding:7px 0;font-size:7px}.isolation-mail-row i{width:5px;height:5px;border-radius:50%;background:#8199c2}.isolation-mail-row strong{display:block;font-weight:550;font-size:7px}.isolation-mail-row small{display:block;color:#8a95a4;font-size:6px;margin-top:1px}.isolation-mail-row>small{margin-left:auto;align-self:flex-start}.isolation-draft{margin-top:4px;background:#fff;border:1px solid #dce1e8;border-radius:4px;padding:7px;color:#526078;font-size:7px}.isolation-draft>div{font-size:7px;color:#8b96a7;display:flex;gap:12px}.isolation-draft p{margin:10px 0 11px;max-width:165px;line-height:1.55}.isolation-send{display:inline-block;border-radius:3px;background:#e4eaf3;padding:3px 8px;color:#4c6385;font-size:6px}.isolation-text{position:relative;display:block;min-height:1.45em}.isolation-ghost{display:block}.isolation-live{position:absolute;inset:0;display:block}.isolation-shared{width:54%;right:15px;top:74px;height:235px;border:1.5px solid #4f7bff;box-shadow:0 10px 26px #0006,0 0 0 3px #2457ff17;z-index:2}.isolation-shared .isolation-window-heading{background:#1e3157;height:29px}.isolation-shared-label{margin-left:auto;font-size:6px;letter-spacing:.8px;color:#b8ceff}.isolation-shared-tab{height:21px;padding:4px 10px;background:#273249;font-size:7px;color:#b9c5da}.isolation-shared-tab span{float:right;color:#8291aa}.isolation-shared .isolation-url{height:24px;font-size:7px}.isolation-studio{padding:10px 12px;background:#faf9f3;color:#324c3b;height:160px}.isolation-studio-brand{display:flex;justify-content:space-between;font-size:7px;font-weight:650;letter-spacing:.5px}.isolation-studio-brand span{font-size:5px;font-weight:400;color:#929a8b;letter-spacing:0}.isolation-shared-plan{background:#edf0eb;margin:7px 0 6px;color:#54745d;height:61px}.isolation-plan{width:100%;height:100%;display:block}.isolation-note-label{font-size:7px;font-weight:550;margin-bottom:3px}.isolation-note{font-size:7px;background:#fff;border:1px solid #d8e0d3;border-radius:3px;padding:5px 6px;min-height:22px;color:#66775f}.isolation-project-cards{display:flex;gap:6px;margin-top:6px;font-size:5px;color:#8a9381}.isolation-project-cards>span{flex:1;background:#e8eadd;border:1px solid #dde1d3;padding:3px 5px}.isolation-taskbar{display:flex;align-items:center;gap:13px;position:absolute;inset:auto 0 0;height:30px;padding:0 15px;background:#1b2435dc;border-top:1px solid #40506a80;backdrop-filter:blur(10px)}.isolation-windows-icon{display:grid;grid-template-columns:repeat(2,5px);gap:1px}.isolation-windows-icon i{width:5px;height:5px;background:#8da9e9}.isolation-taskbar-search{font-size:7px;background:#27334a;color:#8294b1;border:1px solid #3d4b62;border-radius:3px;padding:3px 8px;width:80px}.isolation-taskbar-browser{font-size:17px;color:#8fa3ca}.isolation-taskbar-app{position:relative;display:grid;place-items:center;height:27px;width:26px;border-radius:3px;background:#3d4c6744}.isolation-taskbar-app:after{content:'';position:absolute;width:12px;height:2px;background:#83a5ff;bottom:1px;border-radius:2px}.isolation-taskbar-clock{margin-left:auto;color:#9eacc5;font-size:7px}.isolation-guest-connector{position:relative;height:39px;width:1px;margin-left:72%;background:#517bf6;opacity:.8}.isolation-flow-dot{position:absolute;top:calc(var(--flow, .65)*100%);left:-2px;width:5px;height:5px;background:#8fabff;border-radius:50%;box-shadow:0 0 7px #779aff}.isolation-flow-dot-two{top:calc((1 - var(--flow, .65))*100%)}.isolation-guests{display:flex;align-items:center;gap:10px;width:230px;padding:10px 13px;margin-left:auto;margin-right:24px;border:1px solid #3b4c6b;border-radius:7px;background:#172031}.isolation-guests strong{display:block;font-size:10px;font-weight:550;color:#c7d7ef}.isolation-guests>div>span{display:block;font-size:7px;color:#8194b4;margin-top:2px}.isolation-device{width:32px;flex-shrink:0}.isolation-device .isolation-device-screen{display:block;width:25px;height:17px;border:1px solid #7796ca;border-radius:2px;margin:0 auto;background:#223554}.isolation-device .isolation-device-base{display:block;height:2px;width:32px;margin-top:2px;border-radius:1px;background:#6c84ad}.isolation-guests-status{margin-left:auto;font-size:7px;color:#93a8ca;white-space:nowrap}.isolation-guests-status i{display:inline-block;width:4px;height:4px;background:#80bd9b;border-radius:50%;margin-right:3px}.isolation-cursors{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.connection-demo{position:relative;display:grid;grid-template-columns:1fr .25fr 1fr;align-items:center;gap:0;width:100%;color:#dce0e7;font:11px/1.45 Inter,'Segoe UI',sans-serif;text-align:left;--packet-forward:.4;--packet-back:.75}.connection-device{position:relative;min-width:0;border:1px solid #344051;border-radius:9px;background:#141a23;padding:0 10px 11px;overflow:hidden;box-shadow:0 12px 28px #0002}.connection-device-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 2px}.connection-device-heading strong{font-size:11px;font-weight:550;white-space:nowrap}.connection-device-status{font-size:8px;color:#8ab3a1;padding:3px 6px;border:1px solid #385249;border-radius:4px;background:#233b3122}.connection-browser{border:1px solid #374255;border-radius:5px;overflow:hidden}.connection-chrome{display:flex;justify-content:space-between;align-items:center;height:26px;padding:5px 7px 0;background:#242c3a;color:#c2cce0;font-size:8px;gap:5px}.connection-tab{display:block;background:#303b4d;padding:4px 6px;align-self:stretch;border-radius:3px 3px 0 0;white-space:nowrap;min-width:90px}.connection-chrome-close{color:#8191ab;font-size:7px;white-space:nowrap;align-self:flex-start}.connection-url{display:flex;align-items:center;gap:8px;height:29px;padding:0 7px;background:#303b4d;color:#8697b3;font-size:8px}.connection-url>span:last-child{flex:1;background:#1f293a;border:1px solid #414e64;border-radius:3px;padding:3px 6px;color:#a9b9d3;font-size:8px}.connection-page{padding:16px 14px;background:#faf9f3;color:#344b3b;min-height:239px}.connection-page-brand{display:flex;align-items:center;justify-content:space-between;font-size:8px;font-weight:600;letter-spacing:.4px}.connection-page-brand>span{font-size:5px;color:#929b88;font-weight:400}.connection-art{height:103px;margin:13px 0 15px;background:#e9ede4;color:#617d60}.connection-plan{width:100%;height:100%;display:block}.connection-note-heading{font-size:9px;font-weight:550;margin-bottom:6px}.connection-note{position:relative;background:#fff;border:1px solid #d5dece;border-radius:3px;padding:7px 8px;min-height:30px;font-size:9px;color:#66775e;line-height:1.45}.connection-ghost{display:block}.connection-live{display:block;position:absolute;inset:7px 8px}.connection-check-row{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:7px;color:#718167}.connection-check{display:grid;place-items:center;width:10px;height:10px;border-radius:2px;border:1px solid #698a63;background:#698a63;color:#fff;font-size:7px}.connection-note-saved{margin-left:auto;color:#8d9a83;font-size:6px}.connection-invite{position:absolute;z-index:4;left:14px;right:14px;top:57px;display:flex;align-items:center;gap:8px;padding:10px;background:#1d2a3d;border:1px solid #4c6896;border-radius:6px;box-shadow:0 8px 24px #0005}.connection-invite-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:5px;color:#b8c9ef;background:#345078;font-size:10px}.connection-invite strong{display:block;font-size:9px;font-weight:550;color:#d9e4f7}.connection-invite small{display:block;margin-top:3px;font-size:7px;color:#8ca1c2}.connection-approve{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:4px 9px;margin-left:auto;color:#fff;background:#2457ff;border:1px solid #648aff7a;border-radius:4px;font-size:8px;white-space:nowrap}.connection-waiting{position:absolute;z-index:4;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #4a5a73;border-radius:5px;padding:8px 11px;background:#1c293c;color:#acbdd8;font-size:8px;box-shadow:0 4px 14px #0003}.connection-waiting-dot{width:5px;height:5px;border-radius:50%;background:#839bc5}.connection-cursors{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden}.connection-connector{position:relative;height:30px;margin:0 1px;color:#496489}.connection-line{position:absolute;top:50%;left:0;right:0;height:1px;background:#496489}.connection-connector.is-connected .connection-line{background:#5b83e4}.connection-packet{position:absolute;top:calc(50% - 2px);width:5px;height:5px;background:#89a9ff;border-radius:50%;box-shadow:0 0 8px #6791ff66}.connection-packet-forward{left:calc(var(--packet-forward)*100% - 2px)}.connection-packet-back{left:calc(var(--packet-back)*100% - 2px);background:#7fbea4;box-shadow:0 0 8px #7fbea466}
@media(max-width:900px){.connection-demo{grid-template-columns:1fr .16fr 1fr}.connection-device{padding-left:8px;padding-right:8px}.connection-device-heading strong{font-size:10px}.connection-device-status{font-size:7px}.connection-page{padding:13px 11px}.connection-invite{left:10px;right:10px;gap:6px;padding:9px}.connection-invite strong{font-size:8px}.connection-invite-avatar{width:22px;height:22px}.connection-approve{font-size:7px;padding:4px 6px}.connection-chrome-close{display:none}.connection-page-brand{font-size:7px}.connection-note{font-size:8px}}
@media(max-width:650px){.connection-demo{grid-template-columns:minmax(0,1fr);max-width:360px;margin:auto}.connection-device{padding:0 11px 12px}.connection-device-heading{height:43px}.connection-device-heading strong{font-size:11px}.connection-device-status{font-size:8px}.connection-page{min-height:210px;padding:12px 16px}.connection-art{height:76px;margin:10px 0}.connection-note{font-size:9px}.connection-page-brand{font-size:8px}.connection-connector{height:46px;width:30px;justify-self:center;margin:0}.connection-line{top:0;bottom:0;left:50%;right:auto;width:1px;height:auto}.connection-packet-forward{left:calc(50% - 2px);top:calc(var(--packet-forward)*100% - 2px)}.connection-packet-back{left:calc(50% - 2px);top:calc(var(--packet-back)*100% - 2px)}.connection-invite{top:51px;left:16px;right:16px;padding:10px;gap:9px}.connection-invite strong{font-size:10px}.connection-invite small{font-size:8px}.connection-invite-avatar{width:27px;height:27px}.connection-approve{font-size:9px;padding:5px 10px}.connection-waiting{bottom:21px;font-size:9px}.isolation-demo{max-width:570px}}
@media(max-width:450px){.isolation-computer-heading{height:37px;padding:0 11px}.isolation-local{font-size:6px;letter-spacing:.7px}.isolation-desktop{height:368px}.isolation-personal{left:10px;top:20px;width:64%;height:251px}.isolation-shared{right:10px;top:111px;width:66%;height:224px}.isolation-window-heading{gap:4px;padding:0 7px}.isolation-window-heading strong{font-size:8px}.isolation-private-label{font-size:6px;padding:2px 4px}.isolation-shared-label{font-size:5px;letter-spacing:.4px}.isolation-url{font-size:7px;gap:6px;padding:0 6px}.isolation-url>span:last-child{padding-left:4px;padding-right:4px}.isolation-mail{padding:8px}.isolation-draft p{max-width:145px}.isolation-studio{padding:9px}.isolation-shared-plan{height:53px;margin-top:6px}.isolation-studio-brand{font-size:6px}.isolation-studio-brand span{font-size:4px}.isolation-note{font-size:6px;padding:5px}.isolation-project-cards{font-size:4px}.isolation-taskbar{padding:0 12px}.isolation-guest-connector{height:32px;margin-left:69%}.isolation-guests{margin-right:10px;width:217px;padding:9px 11px}.isolation-guests strong{font-size:9px}.isolation-guest-status{font-size:6px}}

.connection-demo{margin-top:45px}.connection-demo .connection-device{display:block;align-items:normal;flex-direction:initial;padding:0 10px 11px}.connection-demo .connection-device strong{letter-spacing:0}.connection-invite[hidden],.connection-waiting[hidden],.permission-menu[hidden]{display:none!important}.connection-demo:not(.is-connected) .connection-packet{opacity:0}.connection-demo:not(.is-connected) [data-connection-guest] .connection-page{opacity:.2}.isolation-live.is-writing:after,.connection-live.is-writing:after{content:"";display:inline-block;width:1px;height:1em;background:#4776ff;margin-left:1px;vertical-align:baseline}.isolation-draft.is-editing{border-color:#8aabbd}.isolation-note.is-editing{border-color:#4776ff;box-shadow:0 0 0 1px #4776ff22}.isolation-shared-plan .isolation-plan{clip-path:inset(0 calc((1 - var(--plan-progress,1))*100%) 0 0)}.isolation-demo .story-cursor svg,.connection-demo .story-cursor svg{width:17px;height:20px}.isolation-demo .story-cursor i,.connection-demo .story-cursor i{font-size:8px;left:12px;top:17px;padding:3px 5px}.access-document .is-held [data-access-status]{color:#d0ac7c}.access-document .takeover-example{margin-bottom:0}@media(max-width:450px){.isolation-desktop{height:480px}.isolation-shared{top:205px;width:80%}.isolation-personal{width:90%}.isolation-guests{margin-right:10px}.isolation-taskbar{height:30px}}@media(prefers-reduced-motion:reduce){.isolation-cursors,.connection-cursors{display:none}.isolation-flow-dot,.connection-packet{display:none}}

@media(max-width:450px){.isolation-desktop{height:530px}.isolation-shared{top:255px}}