/* The desktop is the capture space; the playground lives in its own sidebar. */
/* Clip without making a scroll container: focus must never pan the capture canvas. */
html:has(.desktop[data-surface="recording"]),body:has(.desktop[data-surface="recording"]),.desktop[data-surface="recording"]{overflow:clip}
/* The closed sidebar translates beyond the viewport; keep it out of scroll bounds. */
body:has(.desktop[data-surface="recording"]){contain:paint}
/* Figma border/overlay/{default,hover,active}; alpha lives in the shared color. */
.recording-scene{--rb-camera-border-color:rgba(0,0,0,.45);--rb-camera-border-hover-color:rgba(0,0,0,.65);--rb-camera-border-active-color:#000;--rb-camera-border-edge-color:transparent;position:absolute;inset:0;overflow:clip;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:0;min-height:0}
.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)}
/* The hit surface stays below controls; border and handles paint above the notch. */
.rb-capture-region{position:absolute;pointer-events:none;border-radius:3px;--capture-border:3px solid #ff3b30;--capture-outline:none;--capture-fill:transparent}
.rb-capture-region::before,.rb-capture-region::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.rb-capture-region::before{z-index:6;background:var(--capture-fill)}
.rb-capture-region::after{z-index:36;border:var(--capture-border);outline:var(--capture-outline);outline-offset:-2px}
.recording-scene[data-mode="screen"] .rb-capture-region{border-radius:0}
.rb-capture-region.is-area{border-radius:0;--capture-border:1px solid var(--rb-camera-border-color);--capture-outline:none;--capture-fill:#0000000a}
.recording-scene[data-stage="idle"] .rb-capture-region.is-area{cursor:move;touch-action:none}
.recording-scene[data-stage="idle"] .rb-capture-region.is-area::before{pointer-events:auto}
/* Sizing guides use the same default alpha and contrast edge as the handles. */
.recording-scene[data-stage="idle"] .rb-capture-region.is-area::after{filter:drop-shadow(0 0 .75px var(--rb-camera-border-edge-color))}
.rb-area-center{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;max-width:calc(100% - 12px);max-height:calc(100% - 12px);z-index:7;pointer-events:none;overflow:visible}
.rb-area-center path{fill:none;stroke:var(--rb-camera-border-color);stroke-width:1;stroke-linecap:round;filter:drop-shadow(0 0 .75px var(--rb-camera-border-edge-color))}

.recording-scene:not([data-stage="idle"]) .rb-capture-region.is-area{--capture-fill:transparent;--capture-border:3px solid #ff3b30;--capture-outline:none}
.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-handle{position:absolute;width:20px;height:20px;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;z-index:37}
.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-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 .5px #00000030;pointer-events:none}
/* Shared state colors also drive rulers and placement borders. */
.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:-18px;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::before{content:'';position:absolute;inset:-4px;background:transparent}
.rb-camera-resize svg{width:40px;height:40px;overflow:visible;pointer-events:none;transform:translateX(18px)}
.rb-camera-resize path{stroke:var(--rb-camera-border-color);stroke-opacity:1;stroke-width:3}
.rb-camera-resize path,.rb-camera-slot-border circle{stroke-linecap:round;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-resize path,.rb-camera-slot-border.has-pin-contrast circle{filter:drop-shadow(0 0 .75px var(--rb-camera-border-edge-color))}
.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{stroke:var(--rb-camera-border-hover-color);stroke-width:4}
.rb-camera.is-resizing .rb-camera-resize path{stroke:var(--rb-camera-border-active-color);stroke-width:4}
.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-belt-idle{padding:8px;gap:4px}
.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}}
@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{--capture-border:3px solid #a7f374}



.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-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-slot{position:absolute;display:block;border:0;border-radius:50%;background:transparent;box-shadow:none;transform:scale(.96);transition:transform 180ms cubic-bezier(.23,1,.32,1),scale 180ms cubic-bezier(.23,1,.32,1),opacity 140ms cubic-bezier(.23,1,.32,1)}
.rb-camera-slots.is-visible i{transform:scale(1)}
.rb-camera-slot-border{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rb-camera-drag-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;opacity:0;transition:opacity 160ms cubic-bezier(.2,0,0,1)}
.rb-camera-drag-overlay.is-visible{opacity:1}
.recording-scene.is-camera-dragging .rb-capture-region.is-area{--capture-fill:transparent}
.rb-camera-pin{z-index:31;padding:0;opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;touch-action:none;transition:opacity 140ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1),visibility 0s 140ms}
/* Keep the pin target easy to press without enlarging its shared placement border. */
.rb-camera-pin::before{content:'';position:absolute;inset:min(0px,calc((100% - 40px)/2));border-radius:50%}
.rb-camera-pin.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition-delay:0s}
.rb-camera-pin.is-holding{transform:scale(.96)}
.rb-camera-pin-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);width:max-content;padding:5px 8px;border-radius:6px;background:#252429e6;box-shadow:0 1px 3px #0002;color:#fff;font:400 11px/16px -apple-system,BlinkMacSystemFont,sans-serif;pointer-events:none}
.rb-camera-pin[data-corner$="e"] .rb-camera-pin-label{left:auto;right:calc(100% + 10px)}
.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') 4 3,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;overflow:hidden;border-radius:inherit;background:#e4e1db;box-shadow: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}
.rb-camera.is-following.is-sizing-area .rb-camera-preview{transform:scale(.65);opacity:0;transition-duration:160ms,120ms}
@media(prefers-reduced-motion:reduce){.rb-camera-preview{transition:none}.rb-camera.is-following.is-sizing-area .rb-camera-preview{transform:none}}

@media(prefers-reduced-motion:reduce){.rb-camera-resize-orbit,.rb-camera-resize,.rb-camera-resize path,.rb-camera-slot-border circle{transition:none}}
@media(prefers-reduced-motion:reduce){.rb-camera-pin{transition:opacity 140ms}.rb-camera-pin.is-holding{transform:none}}
@media(prefers-reduced-motion:reduce){.rb-camera-drag-overlay,.rb-camera-slot{transition:opacity 140ms}.rb-camera-slots i.is-nearest{transform:scale(1)}}

/* Match cutout emphasis to its placeholder without changing the docking target. */
.rb-camera-drag-overlay mask circle{transform-box:fill-box;transform-origin:center;transition:scale 180ms cubic-bezier(.23,1,.32,1),opacity 140ms cubic-bezier(.23,1,.32,1)}
@media(prefers-reduced-motion:reduce){.rb-camera-slot,.rb-camera-drag-overlay mask circle{scale:1!important;transition:opacity 140ms}}

/* One-click start: hovering a window or the screen tints it, and the record card centred on the target starts recording. */
.rb-window-picker{display:none;position:absolute;inset:0;z-index:5;cursor:pointer;border-radius:inherit;outline:none}
.recording-scene[data-picking="true"][data-one-click="true"] .rb-window-picker{display:block}
.recording-scene[data-one-click="true"] .rb-window-selector,.recording-scene[data-one-click="true"] .rb-record{display:none!important}
.recording-scene[data-picker-start="button"] .rb-window-picker,.recording-scene[data-picker-start="button"] .rb-screen-picker,.recording-scene[data-picker-start="button"] .rb-picker-app{cursor:default}
.rb-mock-window.is-hovered .rb-window-picker,.rb-screen-picker{background:#ff3b3066;box-shadow:inset 0 0 0 3px #ff3b30}
.rb-screen-picker{display:none;position:absolute;inset:0;z-index:11;cursor:pointer}
.recording-scene[data-screen-hover="true"] .rb-screen-picker{display:block}
.rb-record-card{position:absolute;z-index:39;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.rb-record-card[hidden]{display:none}
.rb-picker-app{display:flex;flex-direction:column;align-items:center;gap:4px}.rb-picker-app[hidden]{display:none}
.rb-dock-icon{display:block;width:70px;height:70px;margin:-2px -7px -12px}
.rb-dock-icon.is-finder,.rb-dock-icon.is-display{width:56px;height:56px;margin:0;display:grid;place-items:center;border-radius:12.5px;color:#fff;box-shadow:0 2px 4px #00000017,0 4px 6px #00000017,0 0 1px #00000044}.rb-dock-icon .rb-sf{width:32px;height:32px}
.rb-dock-icon.is-finder{background:linear-gradient(#6fd2ff,#1d8bf1)}.rb-dock-icon.is-display{background:linear-gradient(#48484a,#1c1c1e)}
.rb-picker-name{padding:4px 9px;color:#fff;font-size:17px;line-height:22px;font-weight:700;white-space:nowrap;text-shadow:0 2px 4px #00000017,0 4px 6px #00000017,0 0 1px #00000044}
.rb-picker-controls{display:flex;flex-direction:column;gap:8px;width:230px;padding:8px 8px 0;border-radius:24px;cursor:default}
.rb-record-card[data-target="screen"] .rb-picker-controls{padding-bottom:8px;background:#1e1e1e;box-shadow:0 0 1px #00000087,0 20px 25px -5px #0000003d,0 10px 10px -5px #0000001f,inset 0 .5px #ffffff14,inset 0 0 .5px #ffffff59}
.rb-picker-start{position:relative;z-index:2;height:36px;display:flex;align-items:center;justify-content:center;padding:0 16px;border-radius:18px;background:linear-gradient(#f83b3e,#ff4d50);color:#fff;font-size:13px;line-height:16px;font-weight:510;white-space:nowrap;cursor:pointer}
.rb-picker-notch{display:flex;justify-content:center}
.rb-picker-notch[hidden]{display:none}
.rb-picker-logs{display:flex;align-items:center;gap:4px;height:24px;padding:0 16px;color:#ffffffd9;font-size:13px;line-height:16px;font-weight:510;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){.rb-picker-start:hover{filter:brightness(1.08)}}