html[data-demo] { background: #101e2b; }
.demo-toolbar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  min-height: 60px;
  padding: 10px clamp(14px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #101e2b;
  color: #f1faf7;
  border-bottom: 1px solid #38505d;
}
.demo-toolbar div { display: grid; }
.demo-toolbar strong { font-size: 16px; }
.demo-toolbar span { color: #c0d1d7; font-size: 12px; }
.demo-toolbar button {
  border: 1px solid #7e94ff;
  border-radius: 10px;
  padding: 8px 12px;
  background: #425edb;
  color: #fff;
  white-space: nowrap;
}
html[data-demo] body { padding-top: 60px; }
[data-demo][data-layout="globe"] .app-shell {
  width: min(100vw, (100dvh - 60px) * 1.1);
  height: min(100vw, 100dvh - 60px);
}
[data-demo][data-layout="classic"] .app-shell { height: calc(100dvh - 60px); border-radius: 0; }
[data-demo] :is(.window-controls, #position-button, #protection-reminder, #confirm-performance, #scan-performance-note, .scan-remember, #scan-time-note, #scan-confirm-note) { display: none !important; }
[data-demo] label[for="confirm-performance"] { display: none; }
[data-demo] .scan-dialog-depth:has(#confirm-performance) { display: none; }
[data-demo] .preview-label { display: none; }
[data-demo] .station-foot { display: none; }
@media (max-width: 660px) {
  [data-demo][data-layout="globe"] .app-shell { align-self: start; margin-top: 16px; }
  [data-demo][data-layout="globe"] .titlebar { left: 15%; right: 13%; }
  [data-demo][data-layout="globe"] .brand-wordmark strong { font-size: 17px; }
  [data-demo][data-layout="globe"] .brand-wordmark small { display: none; }
  [data-demo][data-layout="classic"] body { overflow: auto; }
  [data-demo][data-layout="classic"] .app-shell { height: auto; min-height: calc(100dvh - 60px); }
  [data-demo][data-layout="classic"] .titlebar { padding-left: 12px; }
  [data-demo][data-layout="classic"] #navigation { position: static; display: flex; justify-content: center; flex-wrap: wrap; padding: 0 8px; }
  [data-demo][data-layout="classic"] .badge-rail { position: static; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; pointer-events: auto; }
  [data-demo][data-layout="classic"] .nav-item { width: 66px; min-height: 52px; }
  [data-demo][data-layout="classic"] #scan-station { display: none; }
  [data-demo][data-layout="classic"] .workspace { position: static; display: block; padding: 12px; margin: 0; overflow: visible; }
  [data-demo][data-layout="classic"] #content { display: block; height: auto; overflow: visible; }
  [data-demo][data-layout="classic"] :is(#left-pane, #right-pane, .right-workspace) { overflow: visible; max-height: none; }
  [data-demo][data-layout="classic"] #scan-options { display: none; }
  [data-demo][data-layout="classic"] .workspace-footer { position: static; }
}