/* A result pulled onto the demo surface. The live player keeps its geometry. */
#stage,.result-sheet { --result-bar-size: 46px; }
#surfslot { position: relative; }
.result-anchor { position: fixed; left: var(--result-left); top: var(--result-top); width: var(--result-width); height: var(--result-height); z-index: 24; overflow: hidden; pointer-events: none; }
.result-anchor[data-expanded=true] { inset: 72px 24px 24px; width: auto; height: auto; z-index: 120; }
.result-sheet { position: absolute; inset: 10px; z-index: 24; background: var(--card,#292929); color: var(--foreground,#f4f4f4); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px #0005; opacity: 0; transform: translateY(calc(100% - 46px)); visibility: hidden; pointer-events: none; transition: transform 240ms cubic-bezier(.4,0,.7,1),opacity 200ms,visibility 0s 240ms; }
.result-sheet[data-open=true] { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 560ms cubic-bezier(.22,.65,.22,1),opacity 280ms ease-out,visibility 0s; }
.result-sheet[data-expanded=true] { inset: 0; }
.result-sheet[data-instant=true] { transition: none; transform: none; }
.result-opening { position: absolute; right: 14px; bottom: 14px; z-index: 25; max-width: calc(100% - 28px); padding: 12px 16px; border-radius: 8px 8px 0 0; background: var(--card,#292929); color: var(--foreground,#f4f4f4); font: 500 14px/1.4 var(--sans,sans-serif); box-shadow: 0 4px 18px #0004; }
.result-opening[hidden] { display: none; }
.result-opening { pointer-events: auto; }
.result-opening button { font: inherit; color: inherit; cursor: pointer; background: transparent; border: 0; padding: 8px; text-decoration: underline; }
.result-toolbar { position: absolute; inset: 0 0 auto; height: var(--result-bar-size); z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; box-sizing: border-box; background: var(--card,#292929); color: var(--foreground,#f4f4f4); border-bottom: 1px solid var(--border,#454545); }
.result-toolbar[hidden],.result-toolbar button[hidden] { display: none; }
.result-toolbar__views,.result-toolbar__actions { display: flex; align-items: center; align-self: stretch; gap: 10px; min-width: 0; }
.result-toolbar button { font: 500 12px var(--sans,sans-serif); color: inherit; background: transparent; border: 0; border-radius: 0; cursor: pointer; min-height: 44px; padding: 0 3px; white-space: nowrap; }
.result-toolbar__views button { border-bottom: 2px solid transparent; }
.result-toolbar__views button[aria-pressed=true] { border-bottom-color: var(--action,#21ad8f); }
.result-toolbar button:hover { background: var(--surface-hover,#333); }
.result-toolbar button:focus-visible,.result-overlay__viewport:focus-visible { outline: 2px solid var(--action,#21ad8f); outline-offset: -3px; }
.result-overlay { position: absolute; inset: var(--result-bar-size) 0 0; display: flex; flex-direction: column; overflow: hidden; background: var(--background,#212121); color: var(--foreground,#f4f4f4); }
.result-overlay__head { height: 56px; flex: 0 0 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 16px; background: var(--card,#292929); border-bottom: 1px solid var(--border,#454545); }
.result-overlay__title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-overlay__label { margin: 0; color: var(--muted-foreground,#b5b5b5); font-size: 11px; line-height: 1.3; }
.result-overlay__viewport { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-color: #888 var(--background,#212121); }
.result-overlay__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.result-overlay__image[hidden],.result-document[hidden] { display: none; }
.result-overlay__viewport[data-zoomed=true] .result-overlay__image { width: var(--result-natural-width); height: auto; max-width: none; }
.result-document { position: absolute; inset: 0; display: block; border: 0; width: 100%; height: 100%; }
.result-overlay__caption { height: 88px; flex: 0 0 88px; padding: 12px 18px; border-top: 1px solid var(--border,#454545); background: var(--card,#292929); box-sizing: border-box; }
.result-overlay__caption[hidden] { display: none; }
.result-caption-words { position: relative; height: 100%; overflow: auto; font: 400 14.5px/21px var(--sans,sans-serif); overflow-wrap: anywhere; }
/* A speaking pause or an active word must never resize the underlying stage. */
.capbar { height: 88px; min-height: 88px; max-height: 88px; }
#capslot { min-height: 0; height: 100%; }
#cap { position: relative; max-height: 100%; overflow: auto; }
@media(max-width:600px) {
  #surfslot[data-example-visible=true] { aspect-ratio: auto; height: min(52svh, 480px); flex: 0 0 auto; }
  #stage,.result-sheet { --result-bar-size: 88px; }
  .result-sheet { inset: 6px; }
  .result-anchor[data-expanded=true] { inset: 60px 6px 10px; }
  .result-toolbar { padding: 0 10px; display: grid; grid-template-rows: 44px 44px; justify-content: stretch; gap: 0; }
  .result-toolbar__actions { justify-content: flex-end; }
  .result-overlay__head { padding-inline: 12px; }
  .result-overlay__caption,.capbar { height: 110px; min-height: 110px; max-height: 110px; }
  .result-overlay__caption { flex-basis: 110px; }
}
@media(prefers-reduced-motion:reduce) { .result-sheet,.result-sheet[data-open=true] { transition: none; transform: none; } }