/* The desktop is the capture space; the playground lives in its own sidebar. */
.recording-scene{position:absolute;inset:0;overflow:hidden;color:#202020;user-select:none;touch-action:none}
.desktop[data-surface="recording"] .desktop-caption{display:none}
.rb-desktop-windows{position:absolute;inset:0;z-index:1}
.rb-mock-window{position:absolute;background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 0 0 .5px #0006,0 16px 36px #0004;min-width:min(320px,100%);min-height:min(220px,100%)}
.rb-browser{z-index:2}.rb-finder{z-index:1}
.rb-window-titlebar{height:43px;display:flex;align-items:center;background:#f3f1f4;box-shadow:0 .5px 0 #0002;position:relative;cursor:grab;padding:0 14px;gap:16px;touch-action:none}
.rb-window-titlebar:active{cursor:grabbing}.rb-window-titlebar .traffic-lights{padding:0;gap:8px;flex:none}.rb-window-titlebar .traffic{width:12px;height:12px}
.rb-window-titlebar strong{font-size:12px;font-weight:600;flex:1;text-align:center;margin-right:52px}.rb-window-drag-icon{position:absolute;right:14px;color:#aaa;font-size:17px;opacity:0}.rb-window-titlebar:hover .rb-window-drag-icon{opacity:1}
.rb-browser-address{height:25px;display:grid;place-items:center;flex:1;margin:0 67px 0 45px;border-radius:5px;background:#e7e5e9;color:#67646c;font-size:11px;box-shadow:inset 0 0 0 .5px #00000008}
.rb-browser-content{height:calc(100% - 43px);overflow:auto;background:#fbfaf7}
.rb-browser-nav{height:51px;display:flex;align-items:center;gap:24px;padding:0 26px;border-bottom:1px solid #00000009;font-size:11px;color:#777}
.rb-browser-nav img{height:23px;width:21px}.rb-browser-nav strong{margin-right:auto;color:#333;font-size:12px}
.rb-design-document{padding:28px 34px 22px}.rb-eyebrow{font-size:8px;letter-spacing:1.6px;color:#939089}.rb-design-document h2{font-size:32px;font-weight:650;letter-spacing:-1.2px;line-height:1.08;margin:11px 0}.rb-design-document p{color:#78756f;font-size:11px;margin:10px 0 24px}
.rb-design-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rb-design-cards>div{background:#eeeae2;border-radius:8px;height:109px;display:flex;flex-direction:column;align-items:flex-start;padding:14px;gap:12px;font-size:10px;color:#57534c}.rb-design-cards>div:nth-child(2){background:#e8e5f1}.rb-design-cards>div:nth-child(3){background:#e8eddf}.rb-design-cards img{height:43px;width:44px;object-fit:contain}
.rb-finder-body{display:flex;height:calc(100% - 43px)}.rb-finder-body aside{flex:0 0 135px;display:flex;flex-direction:column;padding:15px 9px;background:#ebe9eed9;gap:3px;font-size:11px}.rb-finder-body aside span{font-size:9px;color:#99949f;margin:8px 9px 3px}.rb-finder-body aside b{font-weight:400;padding:7px 10px;border-radius:5px}.rb-finder-body aside b.selected{background:#d3d0d9}.rb-files{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:25px 18px;padding:30px 25px;flex:1}.rb-files>div{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;white-space:nowrap}.rb-files small{font-size:9px;color:#aaa}.rb-file-folder{width:52px;height:38px;border-radius:3px;background:linear-gradient(#88d9fa,#52b7ed);box-shadow:inset 0 1px #fff6,0 1px 2px #0002;position:relative}.rb-file-folder::before{content:'';position:absolute;left:0;top:-5px;width:24px;height:8px;border-radius:3px 5px 0 0;background:#73c9ed;z-index:-1}
.rb-window-resizer{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;background:transparent;z-index:3}.rb-window-resizer::after{content:'';position:absolute;right:5px;bottom:5px;width:6px;height:6px;border-right:1px solid #0003;border-bottom:1px solid #0003;opacity:0}.rb-mock-window:hover .rb-window-resizer::after{opacity:1}
.rb-window-selector{display:none;position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:transparent;cursor:pointer;z-index:5;transition:background-color 100ms var(--ease)}
.recording-scene[data-picking="true"] .rb-window-selector{display:block}.rb-selection-callout{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:22px;padding:10px 16px;white-space:nowrap;font-size:12px;background:white;box-shadow:0 2px 5px #0002}.rb-window-selector:hover,.rb-window-selector:focus-visible{background:#ff383c66}.rb-window-selector:hover .rb-selection-callout,.rb-window-selector:focus-visible .rb-selection-callout{display:block}.rb-window-selector:active{scale:1}
.rb-selection-mask{position:absolute;inset:0;z-index:4;pointer-events:none}.rb-selection-mask i{position:absolute;background:rgba(0,0,0,.7)}
.rb-capture-region{position:absolute;z-index:6;pointer-events:none;border:3px solid #ff3b30;border-radius:3px}
.recording-scene[data-mode="screen"] .rb-capture-region{border-radius:0;border-width:3px}
.rb-capture-region.is-area{border:1px solid white;background:#0000001b;border-radius:0;outline:1px dashed #000;outline-offset:-2px}
.recording-scene[data-stage="idle"] .rb-capture-region.is-area{pointer-events:auto;cursor:move;touch-action:none}
.recording-scene:not([data-stage="idle"]) .rb-capture-region.is-area{background:transparent;border:3px solid #ff3b30;outline:0}
.rb-area-draw{position:absolute;inset:0;z-index:5;cursor:crosshair;background:transparent;border-radius:0;touch-action:none}.rb-area-draw:active{scale:1}
.rb-area-dimensions{position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%);padding:5px 9px;background:#222d;border-radius:5px;font-size:11px;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;display:none}
.recording-scene[data-stage="idle"] .is-area .rb-area-dimensions{display:block}
.rb-area-handle{position:absolute;width:20px;height:20px;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;z-index:2}
.rb-area-handle::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#999;box-shadow:inset 0 0 0 1px white,0 0 0 1px #0005}
.rb-area-handle:active{scale:1}.rb-handle-nw{left:-10px;top:-10px;cursor:nwse-resize}.rb-handle-n{left:calc(50% - 10px);top:-10px;cursor:ns-resize}.rb-handle-ne{right:-10px;top:-10px;cursor:nesw-resize}.rb-handle-e{right:-10px;top:calc(50% - 10px);cursor:ew-resize}.rb-handle-se{right:-10px;bottom:-10px;cursor:nwse-resize}.rb-handle-s{left:calc(50% - 10px);bottom:-10px;cursor:ns-resize}.rb-handle-sw{left:-10px;bottom:-10px;cursor:nesw-resize}.rb-handle-w{left:-10px;top:calc(50% - 10px);cursor:ew-resize}
.rb-window-notch{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;height:24px;background:#29282b;color:#aaa;box-shadow:0 1px 3px #0003;border-radius:0 0 6px 6px;white-space:nowrap;font-size:10px;pointer-events:auto}.rb-window-notch button{background:transparent;color:#fff;padding:0 10px;height:24px;border-radius:0;font-size:10px}.rb-window-notch span{border-left:1px solid #666;padding:0 10px}
.rb-bounds-guide{position:absolute;z-index:8;border:1px dashed #a7f374;box-shadow:inset 0 0 0 4px #a7f37415;pointer-events:none}
.rb-camera{position:absolute;left:0;top:0;z-index:32;overflow:visible;border-radius:50%;cursor:grab;touch-action:none}
.rb-camera:active{cursor:grabbing}.rb-camera img{width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none;display:block}.rb-camera-preview::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #00000020;pointer-events:none}
/* Neutral gray with a light edge keeps the curved handle visible over desktop and window backgrounds. */
.rb-camera-resize-orbit{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;transition:transform 260ms cubic-bezier(.2,0,0,1);pointer-events:none}
.rb-camera-resize{position:absolute;left:0;top:0;right:auto;bottom:auto;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:translateX(var(--resize-radius,64px)) translateY(-50%);opacity:0;visibility:hidden;pointer-events:auto;transition:opacity 140ms cubic-bezier(.2,0,0,1),visibility 0s 160ms}
.rb-camera-resize svg{width:40px;height:40px;overflow:visible;pointer-events:none}
.rb-camera-resize path{stroke:#666;stroke-opacity:.85;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 .75px #ffffffe6);transition:stroke 160ms cubic-bezier(.2,0,0,1),stroke-width 160ms cubic-bezier(.2,0,0,1),stroke-opacity 160ms cubic-bezier(.2,0,0,1)}
.rb-camera:hover .rb-camera-resize,.rb-camera:focus-within .rb-camera-resize,.rb-camera.is-resizing .rb-camera-resize{opacity:1;visibility:visible;transition-delay:0s}
.rb-camera-resize:hover path,.rb-camera-resize:focus-visible path,.rb-camera.is-resizing .rb-camera-resize path{stroke:#333;stroke-width:4;stroke-opacity:1}
.rb-camera-resize:active{scale:1}.rb-camera.is-resizing .rb-camera-resize-orbit{transition:none}
.rb-camera.is-following{pointer-events:none}.rb-camera.is-following .rb-camera-resize{display:none}
.rb-belt{position:absolute;top:0;left:0;transform-origin:top left;height:52px;z-index:12;border-radius:26px;background:rgba(246,246,246,.85);backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2);box-shadow:0 0 1px #00000045,0 0 0 1px #00000003,0 20px 25px -5px #0000001f,0 10px 10px -5px #0000000f;cursor:grab}
.rb-belt-idle,.rb-belt-active{height:52px;display:flex;align-items:center;padding:8px 8px 8px 12px;gap:12px;position:absolute;inset:0;overflow:hidden;border-radius:inherit;white-space:nowrap}
.rb-inputs{display:flex;align-items:center;gap:4px;flex:none}.rb-modes{width:120px;height:36px;display:flex;border-radius:18px;padding:2px;background:#00000014;flex:none}
.rb-mode{flex:1;display:grid;place-items:center;background:transparent;border-radius:16px;color:#333;padding:0}
.rb-mode[aria-pressed="true"]{background:linear-gradient(#fff,#f7f7f7);box-shadow:0 1px 2px #0000000d,inset 0 0 0 .5px #fff7}
.rb-belt svg,.rb-belt img{width:15px;height:15px;display:block;flex:none;object-fit:contain}.rb-belt .rb-mode img{width:16px;height:16px}
.rb-icon-button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;background:transparent;border-radius:18px;color:#555;padding:0}
.rb-device{width:123px;height:36px;display:flex;align-items:center;justify-content:flex-start;gap:4px;padding:0 10px;background:#00000014;border-radius:18px;color:#222;flex:none;font-size:10px;position:relative;overflow:hidden}
.rb-device span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1}.rb-device img{width:13px;height:13px;z-index:1}.rb-device.is-off img{opacity:.55}.rb-device.is-off::after{content:'';position:absolute;left:10px;top:16px;width:15px;height:1px;background:#555;transform:rotate(-45deg);z-index:2;box-shadow:0 -1px 0 #f3f3f3}
.rb-device[aria-expanded="true"]{background:#00000024}.rb-microphone{width:128px}.rb-microphone:not(.is-off)::before{content:'';position:absolute;inset:20px 0 0;background:#00000008}
.rb-record{height:36px;width:148px;display:flex;align-items:center;justify-content:center;gap:4px;flex:none;background:#ff383c;color:#fff;border-radius:18px;font-size:11px;font-weight:500;padding:0 11px}
.rb-belt-active{width:185px;left:50%;right:auto;transform:translateX(-50%)}.rb-active-controls{display:flex;gap:4px;align-items:center}.rb-pause{background:#0000000d}.rb-stop{height:36px;width:77px;display:flex;align-items:center;justify-content:center;gap:2px;flex:none;border-radius:18px;background:#ff383c;color:#fff;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;padding:0 8px}
.rb-belt[data-stage="paused"] .rb-pause{background:#a7f374;color:#30531e}.rb-belt[data-stage="paused"] .rb-stop{background:#00000014;color:#333}.rb-belt[data-stage="limit"] .rb-stop{background:#ff8d28}.rb-belt[data-stage="paused"] .rb-pause svg{transform:translateX(1px)}
.rb-device-menu.native-menu{position:absolute;z-index:45;min-width:230px;width:230px;max-width:none;max-height:none;border-radius:12px;font-size:11px;padding:5px;background:#e7e7e7eb;backdrop-filter:blur(36px) saturate(1.1);-webkit-backdrop-filter:blur(36px) saturate(1.1)}
.rb-device-menu .native-menu-item{font-size:11px;line-height:16px;height:24px;min-height:24px;padding:3px 9px 3px 24px;text-overflow:ellipsis;overflow:hidden}
.rb-capture-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.rb-icon-button:hover{background:#0000000c}.rb-device:hover{background:#0000001e}.rb-record:hover,.rb-stop:hover{filter:brightness(.96)}.rb-mode:not([aria-pressed="true"]):hover{background:#ffffff70}.rb-window-notch button:hover{background:#ffffff12}}
@media(prefers-reduced-motion:reduce){.recording-scene button,.rb-camera-resize{transition:none}}

/* Edge hit zones span each edge; the visible dots stay eight pixels. */
.rb-area-handle::after{inset:auto;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px}
.rb-handle-n,.rb-handle-s{left:10px;width:calc(100% - 20px)}
.rb-handle-e,.rb-handle-w{top:10px;height:calc(100% - 20px)}

.recording-scene[data-stage="paused"] .rb-capture-region{border-color:#a7f374}

.rb-window-notch{bottom:-38px;width:341px;height:36px;justify-content:center;border-radius:0 0 18px 18px;font-size:13px}.rb-window-notch button{height:36px;font-size:13px;padding:0 16px}.rb-window-notch span{padding:0 16px}

.rb-selection-app{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;gap:8px}.rb-selection-app>img{width:49px;height:64px;object-fit:contain}.rb-selection-app .rb-selection-callout{position:static;transform:none;height:22px;padding:4px 18px;font-size:11px;line-height:14px}.rb-window-selector:hover .rb-selection-app,.rb-window-selector:focus-visible .rb-selection-app{display:flex}

/* SF Symbols exported from the host's AppKit catalog, tinted as template images. */
.rb-sf{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;mask:var(--sf-image) center/contain no-repeat;-webkit-mask:var(--sf-image) center/contain no-repeat;vertical-align:middle}
.rb-belt .rb-sf{width:18px;height:18px}.rb-device .rb-sf{width:16px;height:16px;z-index:1}
.rb-device.is-off::after,.rb-file-folder::before,.rb-window-resizer::after,.rb-camera-resize::after{content:none}
.rb-window-titlebar .traffic{display:grid;place-items:center;color:#0009}.traffic .rb-sf{width:10px;height:10px;opacity:0}.rb-window-titlebar:hover .traffic .rb-sf{opacity:1}
.rb-window-drag-icon{display:flex}.rb-window-drag-icon .rb-sf{width:18px;height:18px}
.rb-finder-body aside b{display:flex;align-items:center;gap:6px;padding-inline:6px}.rb-finder-body aside .rb-sf{width:16px;height:16px;color:#78757d}
.rb-file-folder{width:56px;height:43px;background:none;box-shadow:none;border-radius:0;color:#61bde9}.rb-file-folder .rb-sf{width:100%;height:100%}
.rb-window-resizer{color:#777;display:grid;place-items:center;opacity:0}.rb-mock-window:hover .rb-window-resizer,.rb-window-resizer:focus-visible{opacity:1}.rb-window-resizer .rb-sf{width:12px;height:12px}
.rb-window-notch button,.rb-window-notch>span{display:flex;align-items:center;gap:5px}.rb-window-notch .rb-sf{width:16px;height:16px;padding:0;border:0}
.rb-camera video{width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none;display:block}
.rb-camera-placeholder{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#d9d7dc;color:#85818d}.rb-camera-placeholder .rb-sf{width:45%;height:45%}
.rb-camera-connect{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#ddd9e3;color:#66616d}.rb-camera-connect .rb-sf{width:40%;height:40%}
.rb-camera::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%);border-radius:50%}
.rb-camera-error{padding:8px 10px;color:#65616a;font-size:11px;line-height:1.45}
.rb-camera-slots{position:absolute;inset:0;z-index:31;pointer-events:none;opacity:0;transition:opacity 140ms cubic-bezier(.23,1,.32,1)}
.rb-camera-slots.is-visible{opacity:1}.rb-camera-slots i{position:absolute;display:block;border:1.5px dashed #ffffffa0;border-radius:50%;background:#ffffff0c;box-shadow:0 0 0 1px #00000018;transform:scale(.96);transition:transform 180ms cubic-bezier(.23,1,.32,1),background-color 140ms,border-color 140ms}
.rb-camera-slots.is-visible i{transform:scale(1)}.rb-camera-slots i.is-nearest{border-color:#fff;background:#ffffff28;box-shadow:0 0 0 3px #ffffff12}
.rb-stop{position:relative;overflow:visible;transform-origin:center}.rb-urgency-ring{position:absolute;inset:-2px;border:2px solid #ff8d28;border-radius:inherit;pointer-events:none;opacity:0}
.desktop[data-surface="recording"] .rb-custom-pointer{cursor:url('assets/recording/cursor.svg') 0 0,default!important}
@media(prefers-reduced-motion:reduce){.rb-camera-slots,.rb-camera-slots i{transition:none}}

.rb-pause{position:relative}.rb-pause-icon,.rb-resume-icon{position:absolute;inset:0;display:grid;place-items:center;transition:opacity 200ms cubic-bezier(.2,0,0,1),scale 200ms cubic-bezier(.2,0,0,1),filter 200ms cubic-bezier(.2,0,0,1)}.rb-resume-icon,.rb-pause.is-paused .rb-pause-icon{opacity:0;scale:.25;filter:blur(4px)}.rb-pause.is-paused .rb-resume-icon{opacity:1;scale:1;filter:blur(0)}

/* Keep follower placement live while its video waits; reveal only after play(). */
.rb-camera-preview{position:absolute;inset:0;border-radius:inherit;background:#e4e1db;box-shadow:0 0 0 1px #0002,0 4px 14px #0003;transform:scale(1);opacity:1;transition:transform 300ms cubic-bezier(.2,0,0,1),opacity 180ms cubic-bezier(.2,0,0,1)}
.rb-camera.is-following:not([data-media="live"]){visibility:hidden}
.rb-camera.is-following:not([data-media="live"]) .rb-camera-preview{transform:scale(.25);opacity:0}
@media(prefers-reduced-motion:reduce){.rb-camera-preview{transition:none}}

@media(prefers-reduced-motion:reduce){.rb-camera-resize-orbit,.rb-camera-resize,.rb-camera-resize path{transition:none}}