/* Shared geometry and motion for the online canvas and repaint shells. */
:root { --platform-rail:98px; --platform-header:82px; --platform-inset:54px; --platform-bg:#101017; --platform-line:#292633; --platform-accent:#bca0f5; }
.workbench-route-progress { position:fixed; z-index:90; left:var(--platform-rail); right:0; top:calc(var(--platform-header) - 2px); height:2px; overflow:hidden; pointer-events:none; }
.workbench-route-progress::after { content:""; display:block; width:28%; height:100%; background:var(--platform-accent); animation:workbench-loading 1.2s ease-in-out infinite; }
.workbench-route-status { position:fixed; z-index:90; top:calc(var(--platform-header) + 14px); right:24px; padding:6px 12px; border:1px solid var(--platform-line); border-radius:8px; background:var(--platform-bg); color:#c7bed7; font:12px/1.5 system-ui,sans-serif; pointer-events:none; }
.workbench-content-enter { animation:workbench-enter .16s ease-out; }
@keyframes workbench-loading { from { transform:translateX(-100%); } to { transform:translateX(460%); } }
@keyframes workbench-enter { from { opacity:.7; } to { opacity:1; } }
@media(max-width:1100px) { :root { --platform-rail:68px; --platform-header:72px; --platform-inset:26px; } }
@media(max-width:767px) { :root { --platform-rail:54px; --platform-header:62px; --platform-inset:14px; } }
@media(prefers-reduced-motion:reduce) { .workbench-route-progress::after { animation:none; width:100%; opacity:.65; } .workbench-content-enter { animation:none; } }