.collab-demo{width:min(100%,620px);background:#0c0c0e;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;isolation:isolate;--friend:#83d7c0}
.collab-head{height:46px;padding:0 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.collab-head>b{font-size:17px;letter-spacing:-.02em}.collab-head>span{font:9px var(--font-mono);letter-spacing:.14em;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}.collab-head button{margin-left:auto;font:11px var(--font-display);background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}.collab-head button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.collab-stage{position:relative;height:438px;overflow:hidden}.collab-lobby,.collab-room{position:absolute;inset:0;transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1);background:#0b0b0d}.collab-lobby{padding:32px 22px}.collab-lobby>h3{font-size:23px;font-weight:500;letter-spacing:-.035em}.collab-lobby>p{font-size:12px;color:var(--muted);margin-top:4px}.collab-lobby-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:23px}.collab-lobby-cards>div{display:flex;flex-direction:column;min-width:0;border:1px solid #333338;border-radius:13px;padding:14px;background:#111113;height:226px}.collab-lobby-cards h4{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;margin-bottom:17px;white-space:nowrap}.collab-lobby-cards h4>i{font-size:19px}.collab-field-label{font-size:10px;color:#d3d3da;display:block;margin-bottom:6px}.collab-input{position:relative;display:flex;align-items:center;min-width:0;border:1px solid #3a3a40;border-radius:7px;padding:10px;font-size:11px;color:var(--faint);min-height:37px;background:#0b0b0d;white-space:nowrap}.collab-input.is-typing{border-color:var(--accent);color:var(--text)}.collab-input.is-filled{color:var(--text)}.collab-caret{height:12px;width:1px;background:currentColor;opacity:0;margin-left:1px;display:inline-block;flex:none}.is-typing>.collab-caret{opacity:1}.collab-password{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted);margin-top:15px}.collab-password b{width:20px;height:11px;border-radius:9px;background:#343439;margin-left:auto;position:relative}.collab-password b::before{content:"";position:absolute;left:2px;top:2px;width:7px;height:7px;border-radius:50%;background:#9999a2}.collab-action{display:flex;align-items:center;justify-content:center;gap:9px;min-height:33px;margin-top:auto;border:1px solid transparent;border-radius:999px;background:var(--text);color:#111114;font-size:11px;font-weight:500;transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s}.collab-action i{font-size:15px}.collab-action-dark{background:#1a1a1d;color:#e5e5ec;border-color:#3c3c42}.collab-action.is-target{background:#e0e3ff}.collab-action.is-pressed{transform:scale(.96)}.collab-lobby-join>.collab-field-label:nth-of-type(2){margin-top:15px}.collab-lobby-join>p{font-size:10px;color:var(--muted)}.collab-lobby-note{display:flex;align-items:center;gap:7px;margin-top:20px;color:var(--muted);font-size:10px}.collab-lobby-note i{font-size:15px;color:var(--accent)}
.collab-room{padding:12px 14px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px)}.collab-demo.is-room .collab-room{opacity:1;visibility:visible;transform:none}.collab-demo.is-room .collab-lobby{opacity:0;visibility:hidden;transform:translateY(-6px)}.collab-room-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px;flex:none}.collab-room-head>span{display:flex;align-items:center;gap:9px}.collab-room-head b{font-size:15px;font-weight:500}.collab-room-head small{font-size:8px;color:#97b9ad;display:flex;align-items:center;gap:4px}.collab-room-head small i{width:4px;height:4px;border-radius:50%;background:var(--friend)}.collab-code{display:flex;align-items:center;gap:9px;border:1px solid #333339;border-radius:6px;background:#131315;padding:6px 8px;color:#dedee6;font:9px var(--font-mono)}.collab-code>i{font-size:13px}.collab-code.is-copied{border-color:var(--accent);color:var(--accent)}
.collab-members{display:flex;align-items:center;gap:11px;height:37px;flex:none}.collab-person{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.collab-person>i{display:grid;place-items:center;font-style:normal;width:20px;height:20px;border-radius:50%;background:#9ba4ff22;color:var(--accent);border:1px solid #9ba4ff55;font-size:8px}.collab-person small{font-size:7px;color:var(--faint)}.collab-friend-person>i{color:var(--friend);background:#83d7c01a;border-color:#83d7c04d}.collab-friend-person{display:none}.collab-demo.is-joined .collab-friend-person{display:flex}.collab-waiting{font-size:9px;color:var(--muted)}.collab-members>b{margin-left:auto;color:var(--faint);font:7px var(--font-mono);font-weight:400}
.collab-workspace{position:relative;height:228px;flex:none;border:1px solid #34343c;border-radius:9px;overflow:hidden;background:#17171b}.collab-shared{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .2s;background:#101012}.collab-shared>i{font-size:29px;color:var(--accent)}.collab-shared h4{font-size:17px;font-weight:500;margin-top:8px}.collab-shared p{text-align:center;font-size:11px;color:var(--muted);margin:5px 0 13px}.collab-shared .collab-action{margin:0;padding:0 17px}.collab-ae{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .25s}.collab-demo.is-editing .collab-ae{opacity:1}.collab-demo.is-editing .collab-shared{opacity:0}
.collab-ae-head{height:25px;display:flex;align-items:center;gap:7px;padding:0 9px;font-size:9px;background:#252529;border-bottom:1px solid #121215;flex:none}.collab-ae-logo{color:#c1a8f0;border:1px solid #726183;padding:0 3px;font-size:8px;border-radius:3px}.collab-ae-head>b{font-weight:500;color:#ceced8}.collab-comp-colour{margin-left:auto;width:12px;height:12px;border:2px solid #252529;outline:1px solid #9ba4ff77;border-radius:3px;background:var(--accent)}.collab-import-button{display:flex;align-items:center;gap:4px;color:#c8c8d0;font-size:8px;margin-left:6px;padding:2px 5px;border:1px solid #404047;border-radius:4px}
.collab-viewer{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#111114;padding:7px}.collab-art{position:relative;height:100%;aspect-ratio:16/9;overflow:hidden;background:#252533;border:1px solid #3c3c4b}.collab-art-label{position:absolute;left:9px;top:8px;font:4px var(--font-mono);letter-spacing:.15em;color:#c5c5d5}.collab-art-title{position:absolute;left:17%;top:32%;font-size:24px;font-weight:700;letter-spacing:-.055em;line-height:.92;color:#f3f3f8;z-index:1;white-space:nowrap}.collab-art-title>span{color:var(--accent)}.collab-art-title>i{position:absolute;inset:-5px;border:1px solid var(--accent);opacity:0}.collab-art-title>i::before,.collab-art-title>i::after{content:"";position:absolute;width:4px;height:4px;background:var(--accent);top:-2px;left:-2px}.collab-art-title>i::after{top:auto;left:auto;right:-2px;bottom:-2px}.collab-art-shape{position:absolute;right:16%;top:20%;width:28px;height:28px;border:6px solid var(--accent);transform:rotate(15deg)}.collab-art-shape>i{position:absolute;inset:-10px;border:1px solid var(--friend);opacity:0}.collab-art-note{position:absolute;left:9px;bottom:7px;font-size:5px;color:#c6c6d4}.collab-imported-footage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.collab-art-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a101acc,#0a101a20);opacity:0}.collab-demo.has-media .collab-imported-footage,.collab-demo.has-media .collab-art-shade{opacity:1}.collab-demo.has-media .collab-art-note{color:#f4f4f8}
.collab-timeline{height:57px;background:#242428;flex:none;border-top:1px solid #37373e}.collab-layer{height:18px;display:grid;grid-template-columns:29% minmax(0,1fr);font-size:7px;border-bottom:1px solid #17171b}.collab-layer>span{display:flex;align-items:center;gap:5px;padding-left:9px;color:#bbbcc8}.collab-layer>span>i{font-size:9px;color:var(--accent)}.collab-layer>div{position:relative;border-left:1px solid #131317;background:repeating-linear-gradient(90deg,transparent 0 calc(33.3% - 1px),#ffffff07 calc(33.3% - 1px) 33.3%)}.collab-layer b{position:absolute;left:2%;width:87%;top:3px;bottom:3px;background:#535781;border:1px solid #a5acf077;border-radius:2px;transform-origin:left}.collab-clip-handle{position:absolute;left:89%;top:3px;bottom:3px;width:4px;background:#c4c9ff;opacity:0}.collab-accent-layer b{background:#4d526e}.collab-media-layer{opacity:0;transform:translateY(5px)}.collab-media-layer b{background:#44796e;border-color:#83d7c080}.collab-media-layer>span>i{color:var(--friend)}
.collab-room-tabs{display:flex;align-items:center;gap:6px;flex:none;height:33px;border-bottom:1px solid var(--line)}.collab-room-tabs>span{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:5px;font-size:10px;color:var(--muted)}.collab-room-tabs>span.is-active{color:var(--text);background:#27272c}.collab-room-tabs>span>i{font-size:13px}.collab-room-tabs>small{margin-left:auto;font:7px var(--font-mono);color:var(--faint)}.collab-feed{position:relative;flex:1;min-height:0;overflow:hidden}.collab-activity{position:absolute;inset:0;overflow:hidden;padding-top:3px}.collab-activity>div{transition:transform .22s cubic-bezier(.23,1,.32,1)}.collab-event{height:24px;display:flex;align-items:center;gap:6px;font-size:9px;color:#a9a9b7;white-space:nowrap}.collab-event>i{color:var(--accent);font-size:11px;flex:none}.collab-event>span{overflow:hidden;text-overflow:ellipsis}.collab-event b{font-weight:500;color:#dfdfea}.collab-event.is-friend>i{color:var(--friend)}.collab-event>small{margin-left:auto;font:6px var(--font-mono);color:var(--faint)}
.collab-chat{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden}.collab-demo.is-chat .collab-chat{opacity:1;visibility:visible}.collab-demo.is-chat .collab-activity{opacity:0;visibility:hidden}.collab-messages{position:relative;flex:1;min-height:0;padding:5px 0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}.collab-message{display:flex;align-items:center;gap:6px;font-size:9px;max-width:95%;padding:5px 8px;border:1px solid #9ba4ff33;border-radius:7px;background:#9ba4ff0e;opacity:0}.collab-message b{font-size:8px;color:var(--accent);font-weight:500}.collab-message-you{align-self:flex-end}.collab-message-friend{align-self:flex-start;border-color:#83d7c033;background:#83d7c00a}.collab-message-friend b{color:var(--friend)}.collab-typing{font-size:8px;color:var(--muted);position:absolute;bottom:8px;left:6px;opacity:0}.collab-composer{position:relative;display:flex;align-items:center;flex:none;height:29px;padding:0 7px;margin-bottom:1px;border:1px solid #3a3a40;border-radius:7px;background:#151518;font-size:9px;color:var(--faint)}.collab-composer.is-typing{color:var(--text);border-color:#9ba4ff77}.collab-composer>b{display:flex;align-items:center;justify-content:center;width:22px;height:20px;margin-left:auto;border-radius:5px;background:#e8e9f3;color:#11121b}.collab-composer>b i{font-size:13px}
.collab-join-overlay{position:absolute;right:18px;top:103px;width:51%;padding:16px;background:#101214;border:1px solid #83d7c066;border-radius:14px;box-shadow:0 18px 70px #000b;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .25s,transform .25s cubic-bezier(.23,1,.32,1),visibility .25s}.collab-demo.is-joining .collab-join-overlay{opacity:1;visibility:visible;transform:none}.collab-friend-view{display:flex;align-items:center;gap:5px;font:8px var(--font-mono);color:var(--friend)}.collab-friend-view>i{display:grid;place-items:center;width:17px;height:17px;font-style:normal;border:1px solid #83d7c066;border-radius:50%;font-size:8px}.collab-join-overlay h4{font-size:19px;font-weight:500;margin:11px 0 14px}.collab-join-overlay .collab-input{font:11px var(--font-mono);color:var(--faint)}.collab-join-overlay .collab-input.is-typing{border-color:var(--friend);color:var(--text)}.collab-join-overlay .collab-input.is-filled{color:var(--text)}.collab-join-overlay .collab-action{margin-top:15px;background:#b6eddd}.collab-join-overlay>small{display:block;font-size:8px;color:var(--muted);margin-top:12px;text-align:center}
.collab-file{position:absolute;left:19px;top:160px;display:flex;align-items:center;gap:8px;border:1px solid #6f7287;border-radius:8px;padding:8px 10px;background:#292b35;box-shadow:0 8px 22px #0008;opacity:0;z-index:3}.collab-file>i{font-size:24px;color:var(--accent)}.collab-file b{font-size:11px;font-weight:500;display:block}.collab-file small{display:block;color:var(--muted);font:6px var(--font-mono);letter-spacing:.07em}
.collab-sync{position:absolute;left:50%;top:50%;width:66%;transform:translate(-50%,-50%);border:1px solid #83d7c05a;border-radius:10px;background:#0d1317f5;box-shadow:0 8px 30px #0006;padding:12px 14px;opacity:0;visibility:hidden}.collab-demo.is-syncing .collab-sync{opacity:1;visibility:visible}.collab-sync>span{display:flex;justify-content:center;align-items:center;gap:6px;font-size:11px}.collab-sync>span i{color:var(--friend);font-size:17px}.collab-sync>div{display:flex;align-items:center;gap:10px;margin-top:13px}.collab-sync b{font-size:9px;font-weight:400;display:flex;align-items:center;gap:4px;white-space:nowrap}.collab-sync b>i{color:var(--friend)}.collab-sync-track{height:3px;flex:1;position:relative;background:#35413f;border-radius:9px;overflow:hidden}.collab-sync-track>i{position:absolute;inset:0;background:var(--friend);transform:scaleX(0);transform-origin:left}.collab-sync>small{display:block;text-align:center;margin-top:10px;font:8px var(--font-mono);color:var(--friend)}
.collab-cursor{position:absolute;left:0;top:0;z-index:5;color:var(--accent);pointer-events:none;opacity:0}.collab-cursor>i{display:block;font-size:22px;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 1px #000)}.collab-cursor>span{position:absolute;left:15px;top:18px;padding:2px 6px;font-size:8px;border-radius:3px;background:var(--accent);color:#0b0d19;white-space:nowrap;font-weight:500}.collab-cursor-friend{color:var(--friend)}.collab-cursor-friend>span{background:var(--friend)}.collab-click-ring{position:absolute;left:-9px;top:-10px;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;opacity:0}.collab-foot{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.collab-foot>span:last-child{font:8px var(--font-mono);color:var(--accent);white-space:nowrap}
.collab-sync{z-index:2}.collab-join-overlay{z-index:4}
.collab-messages{padding:3px 0}.collab-message{padding:4px 8px}
.collab-cursor.is-near-edge>span{left:auto;right:5px}
@media(max-width:900px){
 .collab-head{height:35px;padding:0 11px;gap:8px}.collab-head>b{font-size:14px}.collab-head>span{font-size:8px}.collab-head button{padding:3px 8px;font-size:9px}.collab-stage{height:clamp(278px,35dvh,350px)}.collab-lobby{padding:18px 13px}.collab-lobby>h3{font-size:18px}.collab-lobby>p{font-size:10px}.collab-lobby-cards{margin-top:13px;gap:8px}.collab-lobby-cards>div{height:161px;padding:9px;border-radius:10px}.collab-lobby-cards h4{font-size:11px;gap:4px;margin-bottom:11px}.collab-lobby-cards h4 i{font-size:14px}.collab-field-label{font-size:8px;margin-bottom:4px}.collab-input{min-height:28px;padding:7px;font-size:8px}.collab-password{font-size:6px;margin-top:9px;gap:3px}.collab-password b{width:16px;height:10px}.collab-password b::before{width:6px;height:6px}.collab-action{min-height:25px;font-size:8px;gap:5px}.collab-action i{font-size:11px}.collab-lobby-join>.collab-field-label:nth-of-type(2){margin-top:9px}.collab-lobby-join>p{font-size:7px}.collab-lobby-note{font-size:8px;margin-top:12px;gap:5px}.collab-lobby-note i{font-size:12px}
 .collab-room{padding:8px 9px}.collab-room-head{min-height:23px}.collab-room-head b{font-size:12px}.collab-room-head>span{gap:5px}.collab-room-head small{font-size:6px;gap:3px}.collab-code{font-size:7px;padding:4px 5px;gap:5px}.collab-code>i{font-size:10px}.collab-members{height:28px;gap:8px}.collab-person{font-size:8px;gap:4px}.collab-person>i{width:17px;height:17px;font-size:7px}.collab-person small{font-size:6px}.collab-members>b{font-size:6px}.collab-waiting{font-size:7px}
 .collab-workspace{height:135px;border-radius:7px}.collab-shared>i{font-size:22px}.collab-shared h4{font-size:13px;margin-top:3px}.collab-shared p{font-size:8px;margin:3px 0 7px}.collab-ae-head{height:20px;gap:5px;padding:0 6px;font-size:7px}.collab-ae-logo{font-size:6px}.collab-comp-colour{width:10px;height:10px}.collab-import-button{font-size:6px;gap:2px;margin-left:3px;padding:1px 3px}.collab-viewer{padding:4px}.collab-art-label{left:5px;top:4px;font-size:3px}.collab-art-title{font-size:14px}.collab-art-shape{width:16px;height:16px;border-width:4px}.collab-art-note{left:5px;bottom:4px;font-size:3px}.collab-timeline{height:41px}.collab-layer{height:13px;font-size:5px}.collab-layer>span{padding-left:6px;gap:3px}.collab-layer>span i{font-size:7px}.collab-layer b,.collab-clip-handle{top:2px;bottom:2px}
 .collab-room-tabs{height:25px;gap:4px}.collab-room-tabs>span{font-size:8px;gap:4px;padding:3px 6px}.collab-room-tabs>span i{font-size:10px}.collab-room-tabs>small{font-size:5px}.collab-event{height:18px;font-size:7px;gap:4px}.collab-event>i{font-size:9px}.collab-event>small{font-size:5px}.collab-message{font-size:7px;gap:4px;padding:3px 5px;border-radius:5px}.collab-message b{font-size:6px}.collab-messages{gap:3px;padding:3px 0}.collab-composer{height:22px;font-size:7px;padding:0 5px}.collab-composer>b{width:18px;height:16px}.collab-composer>b i{font-size:10px}.collab-typing{font-size:6px;bottom:4px}
 .collab-join-overlay{top:58px;right:12px;width:53%;padding:11px;border-radius:10px}.collab-friend-view{font-size:6px}.collab-friend-view>i{width:14px;height:14px;font-size:6px}.collab-join-overlay h4{font-size:14px;margin:7px 0 10px}.collab-join-overlay .collab-input{font-size:8px}.collab-join-overlay .collab-action{margin-top:11px}.collab-join-overlay>small{font-size:6px;margin-top:8px}.collab-file{left:12px;top:95px;padding:6px 7px;gap:5px}.collab-file>i{font-size:18px}.collab-file b{font-size:8px}.collab-file small{font-size:5px}.collab-sync{padding:8px 10px;width:73%;border-radius:7px}.collab-sync>span{font-size:8px;gap:4px}.collab-sync>span i{font-size:12px}.collab-sync>div{gap:7px;margin-top:8px}.collab-sync b{font-size:7px;gap:3px}.collab-sync>small{font-size:6px;margin-top:7px}.collab-cursor>i{font-size:18px}.collab-cursor>span{font-size:6px;left:12px;top:15px;padding:1px 4px}.collab-foot{min-height:32px;font-size:9px;padding:7px 9px;gap:5px}.collab-foot>span:last-child{font-size:6px}
}
@media(max-width:900px) and (max-height:760px){.collab-demo{scale:.87}}
@media(max-width:900px) and (max-height:680px){.collab-demo{scale:.8}}
body.flow .collab-demo{scale:1}
@media(prefers-reduced-motion:reduce){.collab-demo *{transition:none!important}.collab-cursor{display:none}}