@media (max-width: 900px) {
  body { overflow: hidden; }
  .host-toolbar { height: 64px; flex-basis: 64px; padding: 0 10px 0 13px; }
  .host-brand strong { font-size: 12px; }.host-brand span:not(.host-logo){display:none}.host-logo{width:32px;height:32px}
  .viewport-controls { gap: 4px; }.host-button{padding:0 9px;min-height:36px;font-size:11px}.host-icon-button{width:35px;height:35px;min-height:35px}.zoom-readout{min-width:44px;font-size:10px}.host-button[data-default-view]{display:none}
  .playground-layout { display:block; position:relative; }
  .viewport-shell { position:absolute; inset:0; }
  .viewport-hint { justify-content:flex-start; overflow:auto; gap:14px; font-size:9px; white-space:nowrap; }
  .design-lab { position:absolute; z-index:100; right:8px; top:8px; bottom:42px; width:min(300px,calc(100vw - 16px)); border:1px solid var(--host-border); border-radius:16px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55); }
  .design-lab.is-collapsed { transform:translateX(calc(100% + 14px)); opacity:0; pointer-events:none; }
  .lab-toggle { display:inline-flex; }
  .lab-header { height:58px; flex-basis:58px; }
}
@media (max-width: 560px) {
  .lab-toggle { max-width:82px; overflow:hidden; white-space:nowrap; }
  .viewport-controls { margin-left:auto; }
  .host-brand div { display:none; }
}