.stage-root[data-stage=video],.stage-root[data-stage=robot] { height:100%; min-height:480px; }
@media(min-width:901px) { body:has(.workspace[data-stage=video]) .app-layout,body:has(.workspace[data-stage=robot]) .app-layout { min-height:0; } }
.video-studio { --vd-bg:#211e2b; --vd-panel:#2b2738; --vd-line:#494052; --vd-ink:#eee7ef; --vd-muted:#a99bb2; --vd-accent:#d99bce; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #5c506c; border-radius:0 5px 5px 5px; color:var(--vd-ink); background:var(--vd-bg); font:13px var(--font); }
.video-studio button,.video-studio input,.video-studio select { font:inherit; color:inherit; }.video-studio button { cursor:pointer; }.vd-title { display:flex; align-items:center; gap:11px; min-height:40px; padding:8px 14px; background:#342b40; border-bottom:1px solid var(--vd-line); font-size:12px; }.vd-title > span:first-child { color:var(--vd-accent); font-size:20px; }.vd-title strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }.vd-title > span:last-child { margin-left:auto; white-space:nowrap; color:var(--vd-muted); font:11px monospace; }
.vd-monitor { position:relative; display:flex; justify-content:center; flex:1; min-height:140px; overflow:hidden; background:#121018; }.vd-footage { width:100%; height:100%; position:absolute; inset:0; }.vd-monitor-strip { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:8px 13px; font:11px monospace; color:#e2dbe8; background:#1b152be0; }.vd-monitor-strip > span:first-child { color:#c4a8cf; font:11px var(--font); }
.vd-transport { display:flex; gap:7px; align-items:center; padding:7px 12px; border-block:1px solid var(--vd-line); background:var(--vd-panel); flex:none; }.vd-transport button,.vd-markers button { min-height:36px; padding:7px 12px; border:1px solid #5c4c69; border-radius:3px; background:#342c43; color:#e2cfe7; font-size:12px; }.vd-transport button:hover,.vd-markers button:hover { background:#483953; }.vd-transport button.vd-playing { background:#946b9d; border-color:#c693c6; color:#fff; }.vd-step { display:flex; margin-left:auto; gap:4px; }.vd-step button { min-width:36px; font-size:20px; padding:0 8px; }
.vd-edit { padding:8px 13px; flex:none; }.vd-ruler { display:flex; justify-content:space-between; color:#9e8eaa; font:10px monospace; padding-bottom:6px; }.vd-timeline { position:relative; height:78px; overflow:hidden; cursor:crosshair; touch-action:none; border:1px solid #685470; border-radius:3px; background:#30273b; }.vd-timeline:focus-visible { outline:2px solid #e3afd9; outline-offset:2px; }.vd-source-clip { display:flex; height:42px; background:#56425d; overflow:hidden; }.vd-source-clip span { display:grid; place-items:center; flex:1; min-width:18px; border-right:1px solid #806286; color:#dac1c6; font-size:19px; opacity:.65; }.vd-wave { height:35px; display:flex; align-items:center; justify-content:space-around; gap:1px; padding:0 3px; border-top:1px solid #76617f; background:#26353c; }.vd-wave i { flex:1; max-width:5px; background:#7eaeb4; border-radius:1px; }.vd-trim-window { position:absolute; inset:0; border:2px solid #e5acd4; box-shadow:0 0 0 1200px #100d1980; pointer-events:none; }.vd-trim-window button { position:absolute; width:35px; height:36px; border:0; border-radius:1px; background:#daa6d0; color:#3d2943; font:bold 9px monospace; pointer-events:auto; cursor:ew-resize; touch-action:none; }.vd-trim-window [data-vd-edge=in] { left:0; top:0; }.vd-trim-window [data-vd-edge=out] { right:0; bottom:0; }.vd-playhead { position:absolute; top:0; bottom:0; width:2px; background:#fff3e2; pointer-events:none; box-shadow:0 0 3px #fff; }.vd-markers { display:flex; align-items:center; gap:6px; padding-top:7px; }.vd-markers button { min-height:30px; padding:4px 12px; font-size:11px; }.vd-markers output { margin-left:auto; font:12px monospace; color:#cdb5d7; }
.vd-settings { display:flex; flex-wrap:wrap; gap:8px 12px; padding:10px 13px; border-top:1px solid var(--vd-line); background:var(--vd-panel); flex:none; }.vd-settings label { display:flex; flex-direction:column; gap:5px; flex:1; min-width:90px; color:#ad9bb9; font-size:10px; }.vd-settings input,.vd-settings select { width:100%; min-height:34px; padding:5px 8px; border:1px solid #65516e; border-radius:3px; background:#211b2c; color:#e9deef; font:12px var(--font); color-scheme:dark; }.vd-settings input { width:100%; }.vd-status { min-height:25px; padding:5px 13px; border-top:1px solid #43364c; color:#9d8eab; font-size:10px; flex:none; }
.robot-studio { --rb-ink:#30475c; --rb-line:#a8bacb; --rb-accent:#dfb54b; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #718da9; border-radius:0 5px 5px 5px; color:var(--rb-ink); background:#e4ebf1; font:13px var(--font); }.robot-studio button,.robot-studio select { font:inherit; cursor:pointer; }.rb-title { min-height:42px; padding:9px 15px; display:flex; gap:9px; align-items:center; background:#344e68; color:#ecf1f5; border-bottom:3px solid #dfb54b; }.rb-title strong { font-size:12px; font-weight:500; letter-spacing:.06em; }.rb-title > span:last-child { margin-left:auto; font:10px monospace; color:#b5c7d9; }.rb-lamp { width:8px; height:8px; background:#e3c45a; border-radius:50%; }.rb-main { display:grid; grid-template-columns:minmax(0,1fr) 350px; flex:1; min-height:0; }.rb-room { min-width:0; min-height:0; display:flex; flex-direction:column; }.rb-room-label { display:flex; justify-content:space-between; padding:12px 18px; font-size:11px; color:#718699; border-bottom:1px solid #c1cfda; background:#edf3f7; }.rb-room-label > span { font-size:10px; }.rb-floor { flex:1; min-height:0; position:relative; padding:18px 16px 85px; background:linear-gradient(90deg,#a4b7c22b 1px,transparent 1px) 0 0/32px 32px,linear-gradient(#a4b7c22b 1px,transparent 1px) 0 0/32px 32px,#dce5ea; }.rb-bins { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; height:100%; min-height:0; }.rb-bin { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-width:0; min-height:0; padding:10px 5px; background:#eef3f5bd; border:1px dashed #a1b5c3; border-radius:5px; color:#40586b; text-align:center; }.rb-bin:hover { background:#f6fafc; border-color:#6f8b9e; }.rb-bin > strong { font-size:11px; font-weight:500; line-height:1.5; }.rb-case { display:grid; place-items:center; position:relative; width:70px; height:50px; border:2px solid #52667b; border-radius:5px; background:#91a0ad; color:#fff; box-shadow:0 5px 0 #667c8a40; transition:opacity .2s; }.rb-case-red { background:#b4706b; border-color:#8a575a; }.rb-case-blue { background:#597da5; border-color:#3d5e83; }.rb-case i { position:absolute; inset:5px 8px auto; height:5px; border:1px solid #ffffff66; border-radius:2px; }.rb-case b { font:15px monospace; letter-spacing:.08em; padding-top:7px; }.rb-tags { display:flex; justify-content:center; flex-wrap:wrap; gap:3px; max-width:100%; }.rb-tags > span { display:inline-block; padding:2px 5px; border:1px solid #9cacba; border-radius:2px; background:#fff; color:#556e83; font-size:9px; white-space:nowrap; }.rb-tags .rb-tag-collection { color:#7a6434; border-color:#c6ad66; background:#fff5d1; }.rb-tags .rb-tag-personal { color:#4f5f88; border-color:#9dacc9; background:#e7edf9; }.rb-tags .rb-tag-fragile { color:#99635b; border-color:#c7a19a; background:#fff0e9; }.rb-tags .rb-tag-empty { color:#91a0ad; border-style:dashed; background:transparent; }.rb-item-result { min-height:14px; font-size:9px; color:#7d90a0; }.rb-collected .rb-case { opacity:.22; }.rb-held { border:2px dashed #c09a3e; background:#fff2c459; }.rb-held .rb-item-result { color:#9e7a25; }.rb-dock { position:absolute; left:18px; bottom:12px; width:75px; height:60px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#c7d5de; border:2px solid #8aa1b4; border-radius:7px; color:#5e758a; }.rb-dock > span { font:22px monospace; color:#8e782f; }.rb-dock strong { font-size:9px; font-weight:400; }.rb-bot { position:absolute; width:52px; height:52px; transform:translate(-50%,-50%); z-index:3; pointer-events:none; transition:left .45s ease,top .45s ease; filter:drop-shadow(0 5px 2px #3c526c33); }.rb-bot svg { width:100%; height:100%; }.rb-floor-line { position:absolute; left:110px; right:18px; bottom:18px; height:7px; background:repeating-linear-gradient(120deg,#d9b54b 0 12px,#475c6d 12px 22px); opacity:.65; }
.rb-program { display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px; border-left:1px solid var(--rb-line); background:#d3dfe9; }.rb-program > header { display:flex; gap:9px; align-items:center; padding-bottom:12px; font-size:12px; }.rb-program > header > span { margin-left:auto; font-size:9px; color:#788fa4; }.rb-rules { display:flex; flex-direction:column; gap:11px; flex:1; min-height:0; }.rb-rule { display:flex; flex-direction:column; justify-content:center; gap:10px; flex:1; min-height:90px; padding:12px; border:1px solid #a6b9cc; border-left:4px solid #809ab2; border-radius:4px; background:#f4f7fa; }.rb-rule-head { display:flex; align-items:center; gap:8px; }.rb-rule-index { color:#9aadbc; font:12px monospace; }.rb-rule-head label { flex:1; min-width:0; }.rb-rule select,.rb-finish select { width:100%; min-height:38px; padding:6px; border:1px solid #b0c2d2; border-radius:3px; background:#fff; color:#3d5872; font:12px var(--font); }.rb-move { display:flex; gap:3px; }.rb-move button { width:28px; min-height:35px; padding:0; border:1px solid #b0c2d2; border-radius:3px; background:#e6edf4; color:#698298; }.rb-actions { display:flex; gap:4px; }.rb-actions button { flex:1; min-height:36px; padding:6px 3px; border:1px solid #bccbd9; border-radius:3px; background:#e6edf3; color:#688297; font-size:11px; white-space:nowrap; }.rb-actions button[aria-pressed=true] { border-color:#9b8548; background:#f1d782; color:#5f4b21; font-weight:600; }.rb-rule.rb-active { border-color:#a68d42; border-left-color:#d5a82d; background:#fff5d9; box-shadow:0 0 0 2px #e0bd6240; }.rb-finish { display:flex; align-items:center; gap:12px; padding-top:13px; font-size:12px; }.rb-finish select { flex:1; width:0; }.rb-controls { display:flex; align-items:center; gap:7px; flex:none; min-height:52px; padding:7px 14px; border-top:1px solid var(--rb-line); background:#eef3f7; }.rb-controls button { min-height:37px; padding:7px 18px; border:1px solid #95acc1; border-radius:4px; background:#dbe5ed; color:#3c5d7b; font-size:12px; }.rb-controls [data-rb=run] { background:#3f6689; border-color:#345b7e; color:#fff; }.rb-controls .rb-running { background:#ad8d3b; border-color:#927328; }.rb-run-state { margin-left:auto; font-size:11px; color:#718a9f; }.rb-log { flex:none; min-height:30px; padding:7px 14px; border-top:1px solid #b7c7d5; background:#e0e8f0; color:#52728d; font:11px/1.6 var(--font); }.rb-tabs { display:none; }
.rb-inspect { width:420px; max-width:calc(100vw - 24px); padding:0; border:1px solid #819cb5; border-radius:5px; background:#f1f5f8; color:#3a536a; box-shadow:0 25px 90px #1e385549; }.rb-inspect::backdrop { background:#20354b70; }.rb-inspect > header { display:flex; align-items:center; justify-content:space-between; gap:9px; padding-left:18px; border-bottom:1px solid #9aafc2; background:#3d5974; color:#fff; font-size:13px; }.rb-inspect > header button { width:44px; height:44px; border:0; background:#324d67; color:#fff; font-size:23px; cursor:pointer; }.rb-inspect-body { padding:22px; font-size:14px; line-height:2; }.rb-inspect-body p { margin:0 0 18px; }.rb-inspect-body .rb-tags { justify-content:flex-start; }.rb-inspect-body .rb-tags > span { font-size:12px; padding:3px 8px; }
.rb-rule .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.vd-footage { fill:none; stroke:none; }
.review-record { border:1px solid #c0c9d8; border-radius:5px; overflow:hidden; background:#edf1f6; color:#43546e; }.review-record > header { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-bottom:1px solid #bdc9da; background:#dde5ef; }.review-record > header > strong { font-size:14px; }.review-record > header > span { font-size:10px; color:#8593a7; }.review-record > article { padding:15px 18px; border-bottom:1px solid #d4dce7; }.review-record > article:last-child { border-bottom:0; }.review-record > article > div { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:#6b7f98; }.review-record > article time { color:#95a1b2; }.review-record > article p { margin:7px 0 0; font-size:14px; line-height:1.95; color:#43546e; }.review-attachment { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #cbd5e2; background:#e8e4f0; }.review-attachment > span { display:grid; place-items:center; width:45px; height:35px; border:1px solid #b8a6c7; background:#cfc0dd; color:#6c507c; }.review-attachment strong { display:block; font-size:12px; color:#6f5c83; overflow-wrap:anywhere; }.review-attachment small { font-size:10px; color:#9585a7; }.review-video { border-color:#c6b7d0; }.review-video > header { background:#e8dfed; border-color:#c6b7d0; }
@media(max-width:1200px) and (min-width:901px) { .rb-main { grid-template-columns:minmax(0,1fr) 295px; }.rb-program { padding:10px; }.rb-rule { padding:9px; }.rb-bin { gap:6px; }.rb-tags > span { font-size:8px; padding:2px 3px; }.rb-case { width:56px; height:44px; }.rb-program > header { flex-wrap:wrap; gap:4px; }.rb-program > header > span { margin-left:0; width:100%; } }
@media(max-width:900px) {
 .stage-root[data-stage=video],.stage-root[data-stage=robot] { min-height:440px; }.vd-title { min-height:35px; padding:6px 10px; gap:7px; }.vd-title strong { font-size:11px; }.vd-monitor { min-height:120px; }.vd-monitor-strip { padding:6px 10px; font-size:10px; }.vd-transport { padding:5px 8px; gap:4px; }.vd-transport button { padding:6px 8px; min-height:38px; font-size:11px; }.vd-step { gap:3px; }.vd-step button { min-width:30px; font-size:20px; padding:0 6px; }.vd-edit { padding:7px 10px; }.vd-timeline { height:67px; }.vd-source-clip { height:32px; }.vd-source-clip span { font-size:14px; }.vd-wave { height:33px; }.vd-trim-window button { height:31px; width:31px; }.vd-ruler { font-size:9px; }.vd-markers { padding-top:5px; }.vd-markers button { min-height:32px; font-size:10px; }.vd-markers output { font-size:10px; }.vd-settings { gap:6px 8px; padding:7px 10px; }.vd-settings label { min-width:88px; gap:3px; font-size:9px; }.vd-settings label:nth-child(1),.vd-settings label:nth-child(2),.vd-settings label:nth-child(3) { flex-basis:28%; }.vd-settings input,.vd-settings select { min-height:33px; font-size:12px; }.vd-status { min-height:22px; font-size:9px; padding:4px 10px; }
 .rb-title { min-height:36px; padding:7px 10px; }.rb-title strong { font-size:11px; }.rb-tabs { display:flex; flex:none; padding:5px 8px; gap:5px; border-bottom:1px solid #acbecf; background:#e6edf4; }.rb-tabs button { flex:1; min-height:36px; border:1px solid #afc1d2; border-radius:3px; background:#f1f6fa; color:#647e95; font:12px var(--font); }.rb-tabs button[aria-pressed=true] { border-color:#507595; background:#4c7091; color:#fff; }.rb-main { display:flex; flex-direction:column; }.stage-root[data-rb-view=world] .rb-program { display:none; }.stage-root[data-rb-view=rules] .rb-room { display:none; }.rb-room { flex:1; }.rb-room-label { padding:7px 10px; font-size:10px; }.rb-floor { padding:9px 8px 54px; }.rb-bins { gap:7px; }.rb-bin { padding:6px 3px; gap:5px; }.rb-case { width:48px; height:35px; }.rb-case b { font-size:11px; padding-top:5px; }.rb-case i { height:3px; inset:4px 6px auto; }.rb-bin > strong { font-size:10px; }.rb-tags > span { font-size:8px; padding:1px 3px; }.rb-item-result { min-height:10px; font-size:8px; }.rb-dock { width:58px; height:40px; left:12px; bottom:7px; }.rb-dock > span { font-size:18px; }.rb-dock strong { font-size:8px; }.rb-bot { width:38px; height:38px; }.rb-floor-line { left:84px; bottom:12px; height:5px; }.rb-program { flex:1; padding:8px; border-left:0; }.rb-program > header { padding-bottom:7px; font-size:11px; }.rb-program > header > span { font-size:9px; }.rb-rules { gap:6px; }.rb-rule { min-height:78px; padding:7px 8px; gap:5px; }.rb-rule select { min-height:35px; font-size:12px; }.rb-move button { min-height:35px; width:31px; }.rb-actions button { min-height:34px; font-size:11px; padding:5px; }.rb-finish { padding-top:7px; font-size:11px; }.rb-finish select { min-height:36px; }.rb-controls { min-height:48px; padding:5px 9px; }.rb-controls button { min-height:37px; padding:7px 15px; }.rb-log { padding:6px 10px; font-size:10px; min-height:28px; }
 .review-record > article { padding:13px 14px; }.review-record > article p { font-size:14px; }.review-record > header { padding:14px; }.review-attachment { padding:12px 14px; }
}
@media(prefers-reduced-motion:reduce) { .rb-bot,.rb-case { transition:none; } }
@media(max-width:900px) { .vd-settings input,.vd-settings select,.rb-rule select,.rb-finish select { font-size:16px; } }
@media(max-width:900px) and (max-height:760px) { .vd-edit { padding:4px 10px; }.vd-timeline { height:60px; }.vd-status { display:none; }.stage-root[data-rb-view=rules] .rb-title { display:none; } }