/* The product owns the panels, typography, buttons, editor, and mobile layout.
   These rules only fit that interface into the landing page's tour frame. */
.lp-tour-frame.cue-product-tour { padding: 0; container: cue-tour / inline-size; }
.cue-tour-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; padding: 9px 20px; color: var(--aktive-text-secondary); font: 10px var(--font-mono); }
.cue-tour-wrapper.lp-demo { display: block; --studio-mobile-height: 640px; }
.cue-tour-studio.studio-shell { height: 720px; padding: 0; background: var(--aktive-bg-canvas); color-scheme: dark; }
.cue-tour-studio .studio-header { border-radius: 0; border-inline: 0; }
.cue-tour-studio .studio-body { border-inline: 0; border-radius: 0; }
.cue-tour-recording-layout { height: 100%; min-height: 0; }
.cue-tour-studio [hidden] { display: none !important; }
.cue-tour-studio .preview-pane { position: relative; background: #181818; }
.cue-tour-still.remote-video { padding-bottom: 46px; object-fit: contain; }
.cue-tour-studio .lp-mini-brand { --cue-logo-width: 138px; }
.cue-tour-studio.studio-shell .studio-header .wordmark { font-size: 0; }
.cue-product-tour .lp-tour-controls { margin: 0; }
.cue-tour-nav { position: relative; }
.cue-tour-wrapper[data-mobile-studio] .cue-tour-nav:not([hidden]) { position: relative; bottom: auto; }
.cue-tour-wrapper[data-mobile-studio] .studio-shell { padding: 0; height: calc(var(--studio-mobile-height) - 72px); }
.cue-tour-wrapper[data-mobile-studio][data-mobile-editor] .studio-shell { height: var(--studio-mobile-height); }
.cue-tour-wrapper[data-mobile-studio] .studio-header { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.cue-tour-wrapper[data-mobile-studio] .lp-mini-brand { --cue-logo-width: 122px; }
.cue-tour-wrapper[data-mobile-studio] .cue-tour-nav button { position: relative; }
.cue-tour-studio .teleprompter-card { min-width: 0; }
.cue-tour-wrapper[data-mobile-editor] .cue-tour-recording-layout { display: none; }
.cue-tour-wrapper[data-mobile-editor] .clip-editor { grid-template-rows: auto minmax(300px, 350px) auto auto; }
.cue-tour-wrapper[data-mobile-editor] .clip-editor__stage { grid-row: 2; }
.cue-tour-wrapper[data-mobile-editor] .clip-editor__tools { grid-row: 3; }
.cue-tour-wrapper[data-mobile-editor] .clip-editor__output { grid-row: 4; }
.cue-tour-wrapper .cue-language-panel { color-scheme: dark; }
@container cue-tour (max-width: 980px) {
  .cue-tour-studio .clip-editor__toolbar { flex-wrap: wrap; }
  .cue-tour-intro { padding-inline: 16px; }
}