.demo-ui.other-workspace { margin: 0; overflow: hidden; background: var(--demo-bg); }
.other-workspace #demo-stage { position: fixed; inset: var(--demo-header-height) 0 0; overflow: hidden; background: #111; }
.other-workspace:has(.other-controls) #demo-stage { right: 336px; }
#demo-stage > canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.demo-ui.other-workspace .other-controls { position: fixed; z-index: 20; top: calc(var(--demo-header-height) + 8px); right: 8px; width: 320px; max-height: calc(100dvh - var(--demo-header-height) - 16px); display: flex; flex-direction: column; padding: 0; }
.other-controls .demo-panel-head { flex: none; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.other-controls .demo-panel-content { overflow: auto; min-height: 0; padding: 12px; }
.other-controls label { display: block; margin: 8px 0; }
.other-controls input[type=range] { display: block; width: 100%; }
.other-controls output { font-variant-numeric: tabular-nums; }
.other-controls p { line-height: 1.5; }
.demo-ui.other-document { margin: 0; padding-top: var(--demo-header-height); overflow: auto; min-height: 100dvh; background: var(--demo-bg); }
.other-document > svg { display: block; width: min(100%, 560px); height: auto; margin: 24px auto; }
.other-document .demo-toolbar { flex-wrap: wrap; }
@media (max-width: 759px) {
  .other-workspace:has(.other-controls) #demo-stage { right: 0; bottom: var(--other-panel-height, 42dvh); }
  .demo-ui.other-workspace .other-controls { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 42dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 759px) and (orientation: landscape) {
  .demo-ui.other-workspace .other-controls { left: auto; top: var(--demo-header-height); width: 44%; max-height: calc(100dvh - var(--demo-header-height)); }
  .other-workspace:has(.other-controls) #demo-stage { right: 44%; bottom: 0; }
}