#workspace-demo { position:relative; margin-block:0; scroll-margin-top:26px; }
.ws-window { position:relative; width:100%; aspect-ratio:16 / 10; isolation:isolate; container-type:inline-size; }
.ws-window [data-dock] { position:absolute; inset:0; }
.ws-window :is([data-dock="links"],[data-dock="ask"]) { left:75%; display:none; pointer-events:none; }
.scroll-story .ws-window :is([data-dock="links"],[data-dock="ask"]) { display:block; }
.dock-surface {
  position:relative; width:100%; height:100%;
  opacity:var(--panel-alpha,1);
}
.scroll-story .dock-surface {
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:var(--frame-w,100%); height:var(--frame-h,100%); transform:var(--flight,none);
}
/* Stretch the straight edges while the four molded corners retain their proportions. */
.scroll-story .dock-surface::before,
html:not(.scroll-story) :is(.ws-window,.miniature)::before {
  content:""; position:absolute; inset:0; pointer-events:none; box-sizing:border-box;
  border:var(--bezel) solid transparent;
  border-image:url("assets/window-rim.webp") 72 fill / 1 / 0 stretch;
}
.scroll-story .dock-surface::before { opacity:var(--rim-alpha,1); }
html:not(.scroll-story) .ws-window::before {
  --bezel:3.15cqw;
  inset:calc(-20 / 72 * var(--bezel)) calc(-.25 * var(--bezel)) calc(-.25 * var(--bezel));
}
html:not(.scroll-story) .miniature::before { --bezel:10cqw; }
html:not(.scroll-story) .miniature .mini-surface {
  position:absolute; inset:2.78cqw 2.5cqw 2.5cqw; height:auto;
  border:0; border-radius:6.67cqw; box-shadow:none;
}
.dock-screen {
  position:absolute; inset:var(--screen-top,0px) var(--screen-side,0px) var(--screen-side,0px);
  overflow:hidden; isolation:isolate; background:#fcfcfc;
  border-radius:var(--radius-left,2.1cqw) var(--radius-right,2.1cqw) var(--radius-right,2.1cqw) var(--radius-left,2.1cqw);
}
.capture-plane { position:absolute; inset:0; }
.capture-plane img {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 0; pointer-events:none;
}
.workspace-film {
  display:none; position:absolute; left:0; top:0; width:2560px; height:1600px;
  max-width:none; transform-origin:0 0; pointer-events:none;
}
.scroll-story .workspace-film { display:block; }
.scroll-story .native-current { z-index:1; opacity:var(--manual-alpha,0); }
.scroll-story #workspace-demo:is([data-view="write"],[data-view="links"],[data-view="answer"]) .native-current { visibility:hidden; }
.qa-closeup {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center top;
  pointer-events:none;
}
.qa-closeup[data-composing] { object-position:center bottom; }
/* In the compact inspector, keep the native header and empty-state prompt
   visible above the live composer. At full height the regions coincide. */
.qa-prompt {
  display:none; position:absolute; inset:0; pointer-events:none;
  background:url("assets/native/page-qa-panel-start.webp") center / 100% auto no-repeat;
  clip-path:inset(0 0 calc(var(--picture-w,100cqw) * 90 / 640));
}
.qa-prompt::before {
  content:""; display:block; height:calc(var(--picture-w,100cqw) * 100 / 640);
  background:inherit; background-position:center top;
}
.scroll-story .qa-closeup[data-composing] + .qa-prompt,
.mini-ask .qa-prompt { display:block; }
@media(max-height:560px) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not(.scroll-story) .opening #workspace-demo { width:min(100%,1024px,calc((100svh - var(--nav-height) - 80px) * 1.6)); }
  #workspace-demo:is([data-view="write"],[data-view="answer"]) [data-dock="write"] video,
  #workspace-demo[data-view="links"] [data-dock="links"] video { display:block; width:100%; height:100%; object-fit:contain; }
  #workspace-demo[data-view="links"] [data-dock="links"] { display:block; inset:0; }
  #workspace-demo[data-view="answer"] [data-dock="ask"] { display:block; }
  #workspace-demo[data-view="answer"] [data-dock="ask"] .dock-screen { border-radius:0 2.1cqw 2.1cqw 0; }
}
.native-controls {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px;
  margin-top:calc(10px + .8%); width:max-content; max-width:100%;
  color:#595959; font:500 13px/1.2 var(--sans);
}
.native-controls button {
  appearance:none; white-space:nowrap; padding:8px 12px; border:0;
  background:transparent; border-radius:8px; color:inherit;
}
.native-controls button[aria-pressed="true"] { background:#e8e8e8; color:#151515; }
.scroll-story .native-controls { opacity:var(--controls-alpha,0); }
.native-targets { position:absolute; inset:0; pointer-events:none; }
.native-targets button { position:absolute; border:0; padding:0; background:transparent; pointer-events:auto; border-radius:4px; }
.native-targets button:hover,.native-targets button:focus-visible { background:#7772; }
#workspace-demo[inert] .native-targets button { pointer-events:none; }
.mini-surface :is(img,video) { width:100%; height:100%; object-fit:cover; object-position:center top; }
/* The initial posters and the moving camera use the same native pane bounds. */
.mini-write { --editor-left:480; --editor-top:0; --editor-width:1184; }
.mini-links { --editor-left:532; --editor-top:426; --editor-width:1256; }
.mini-surface [data-static-film] {
  display:block; max-width:none; width:calc(100% * 2560 / var(--editor-width)); height:auto;
  aspect-ratio:16 / 10;
  transform:translate(calc(-100% * var(--editor-left) / 2560),calc(-100% * var(--editor-top) / 1600));
}
.mini-ask .mini-surface img { object-position:center bottom; }
.mini-ask .mini-surface { position:relative; }
@media(max-width:767px) {
  .native-controls button { padding:10px; }
}