/* Ausschließlich Rahmenbedingungen der eingebetteten Abbildung.
   Keine App-Farben, -Abstände oder Komponentenregeln duplizieren. */
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; }
html { font-size: 16px; }
/* Dasselbe Farbschema wie die Seite: sonst malt der Browser unter dem
   durchsichtigen Dokument eine weisse Flaeche (im Dunkelmodus sichtbar). */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* Das App-Fenster ist ein Bild; nur die Kapseln lassen sich bedienen. */
.preview-app { pointer-events: none; }
.preview-shell { display: flex; flex-direction: column; height: 100%; }
/* Die Abbildung hat keinen Beta-Chip. Den alleinstehenden Schriftzug auf
   die gesamte Fensterbreite zentrieren, unabhängig vom linken Innenrand. */
.preview-shell .titlebar { position: relative; }
.preview-shell .titlebar-title-group { position: absolute; left: 50%; transform: translateX(-50%); }
.preview-shell .titlebar-title-group .titlebar-title { padding-inline: 0; }
.preview-shell .titlebar-trailing { grid-column: 3; }
.preview-canvas { width: calc(var(--preview-width) * 1px); height: calc(var(--preview-height) * 1px); transform: scale(var(--preview-scale, 1)); transform-origin: top left; }
.preview-shell .typing-doc-text { height: auto; min-height: 0; white-space: normal; }
.preview-shell .typing-feed { overflow: hidden; }
.preview-pill { background: transparent !important; }
.preview-pill .preview-canvas { padding: 8px; }
.preview-pill .recording-pill { height: 100%; }
/* Im App-Fenster keine App-Animationen. Einzige Bewegung ist die Welle, die
   typing-preview.js als Beispiel bewegt; ihr Übergang ist derselbe wie in der App.
   Die Kapseln behalten ihre Übergänge: Aufklappen, Chips und Aufnahmeknopf
   sollen sich anfühlen wie in der App. */
.preview-app *, .preview-app *::before, .preview-app *::after { animation: none !important; transition: none !important; }
.typing-wave-bar { transition: height 80ms linear !important; }
/* Nach Stopp oder Abbrechen versteckt die App das Kapselfenster. Hier blendet
   die Fläche kurz aus, bis typing-preview.js das nächste Beispiel beginnt. */
.recording-pill[data-demo-hidden="true"] .pill-surface { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms !important; }