/* The app gets real layout space. Never scale a larger viewport down into a thumbnail. */
.demo-section.wrap { width:calc(100% - clamp(32px,4vw,96px)); max-width:none; }
.demo-heading { flex-wrap:wrap; }
.demo-tools { flex-wrap:wrap; }
.frame-viewport { height:clamp(640px,75vh,1500px); }
#expand-workspace { border-color:#d9ae6960; color:#f3d49d; }
#workspace-notice { font-size:12px; color:#d3b784; line-height:1.5; }
#workspace-notice:not(:empty) { padding:8px 0; }

html.workspace-open,html.workspace-open body { overflow:hidden; }
.demo-section.workspace-expanded,
.demo-section:fullscreen {
  position:fixed; inset:0; z-index:100; width:100%; max-width:none;
  height:100vh; height:100dvh; margin:0; padding:0 10px 8px;
  background:#100f0d; display:flex; flex-direction:column; gap:0;
  overflow:hidden; isolation:isolate; scroll-margin:0;
}
.workspace-expanded .demo-heading { flex:none; padding:9px 2px 7px; border:0; gap:10px; }
.workspace-expanded .demo-heading .eyebrow { display:none; }
.workspace-expanded .demo-heading h2 { font-size:13px; letter-spacing:.2px; margin:0; color:#d5c6b2; }
.workspace-expanded .demo-tools { font-size:11px; gap:6px; }
.workspace-expanded .demo-tools button { padding:7px 10px; }
.workspace-expanded .chapter-nav,
.workspace-expanded .edition-caption,
.workspace-expanded .window-chrome,
.workspace-expanded .demo-footnote { display:none; }
.workspace-expanded .edition-bar { flex:none; margin:0 0 7px; gap:14px; flex-wrap:nowrap; }
.workspace-expanded .edition-toggle { border-radius:6px; padding:2px; }
.workspace-expanded .edition-toggle button { font-size:11px; padding:5px 10px; }
.workspace-expanded .edition-bar p { font-size:11px; min-width:0; }
.workspace-expanded .app-window { flex:1; min-height:0; display:flex; flex-direction:column; border-radius:6px; box-shadow:none; }
.workspace-expanded .frame-viewport { flex:1; height:auto; min-height:0; }
.workspace-expanded .window-status { flex:none; min-height:25px; padding:5px 10px; }
.workspace-expanded .window-status a { white-space:nowrap; }
.workspace-expanded .tour-player { flex:none; margin:7px 0 0; padding:10px 14px; gap:18px; border-radius:6px; }
.workspace-expanded .tour-player[hidden] { display:none; }
.workspace-expanded .tour-caption strong { font-size:13px; }
.workspace-expanded .tour-caption p { font-size:11px; margin-top:2px; }
.workspace-expanded .tour-controls button { padding:6px 9px; }
.workspace-expanded #demo-notice:empty { display:none; }
.workspace-expanded #demo-notice:not(:empty) { flex:none; padding:5px 2px 0; font-size:11px; }
.workspace-expanded #workspace-notice:not(:empty) { flex:none; padding:5px 2px; font-size:11px; }
.demo-section::backdrop { background:#100f0d; }

@media(min-width:2400px) {
  .demo-section.wrap:not(.workspace-expanded) { width:calc(100% - 120px); }
}
@media(max-width:860px) {
  .frame-viewport { height:620px; }
  .workspace-expanded .demo-heading { align-items:center; flex-direction:row; }
  .workspace-expanded .demo-heading>div:first-child { display:none; }
  .workspace-expanded .edition-bar p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .workspace-expanded .tour-player { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
  .workspace-expanded .tour-caption { min-width:180px; }
  .workspace-expanded .tour-controls { margin-left:auto; }
  .workspace-expanded .tour-caption p { display:none; }
}
@media(max-height:560px) {
  .workspace-expanded .edition-bar { margin-bottom:4px; }
  .workspace-expanded .edition-bar p { display:none; }
  .workspace-expanded .demo-tools button { padding:5px 7px; }
  .workspace-expanded #reset-demo { display:none; }
  .workspace-expanded .tour-caption p { display:none; }
}