.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
/* ============================================================================
 * Studio Dock redesign for the Record page (Phase 1 — Foundation).
 *
 * All selectors are scoped under `.createCapsulePage.studio-dock` so the
 * legacy record UI is completely untouched when the STUDIO_DOCK_RECORD_UI
 * feature flag is off.
 *
 * Design tokens, layout, and component recipes are adapted from the locked
 * target mock at docs/record-page-explorations/04-studio-dock.html.
 *
 * Phases 2-5 will layer additional behaviors (source pills, visual stage,
 * notes panel, settings drawer) on top of this foundation.
 * ========================================================================== */

/* Shared video meter overlay used by both the legacy and studio-dock record UIs.
 * The treatment borrows the restrained Descript-style silhouette the user
 * requested, but keeps Trebble's squared-off edges. */
.createCapsulePage .peak-meter-widget {
    --peak-meter-level: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: currentColor;
}
.createCapsulePage .peak-meter-widget .peak-meter-shell {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0;
}
.createCapsulePage .peak-meter-widget .peak-meter-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}
.createCapsulePage .peak-meter-widget .peak-meter-fill {
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: currentColor;
    transform: scaleX(var(--peak-meter-level, 0));
    transform-origin: left center;
    will-change: transform;
}

.createCapsulePage #video_peak_meter_container {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    width: 18px;
    height: 96px;
    pointer-events: none;
}
.createCapsulePage #video_peak_meter_container .peak-meter-widget,
.createCapsulePage .video-peak-meter {
    color: rgba(255, 255, 255, 0.98);
}
.createCapsulePage #video_peak_meter_container .peak-meter-shell,
.createCapsulePage .video-peak-meter .peak-meter-shell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.createCapsulePage #video_peak_meter_container .peak-meter-track,
.createCapsulePage .video-peak-meter .peak-meter-track {
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.18);
}
.createCapsulePage #video_peak_meter_container .peak-meter-fill,
.createCapsulePage .video-peak-meter .peak-meter-fill {
    background: var(--sd-meter-safe, rgba(255, 255, 255, 0.98));
    transform: scaleY(var(--peak-meter-level, 0));
    transform-origin: bottom center;
}

.createCapsulePage.studio-dock {
    /* ── Design tokens (light theme defaults) ─────────────────────────── */
    --sd-primary:      #EC7F54;
    --sd-primary-dark: #C55528;
    --sd-primary-15:   rgba(236, 127, 84, 0.15);
    --sd-primary-08:   rgba(236, 127, 84, 0.08);
    --sd-ink:          #121212;
    --sd-ink-60:       rgba(18, 18, 18, 0.60);
    --sd-ink-45:       rgba(18, 18, 18, 0.45);
    --sd-ink-30:       rgba(18, 18, 18, 0.30);
    --sd-ink-10:       rgba(18, 18, 18, 0.10);
    --sd-ink-05:       rgba(18, 18, 18, 0.05);
    --sd-rule:         #eeeeee;
    --sd-bg:           #ffffff;
    --sd-bg-page:      #f3f3f3;
    --sd-bg-soft:      #f7f7f7;
    --sd-drawer-rule:  rgba(18, 18, 18, 0.12);
    --sd-segmented-shell: rgba(18, 18, 18, 0.06);
    --sd-segmented-text: #2a2a2a;
    --sd-segmented-active: #ffffff;
    --sd-segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);
    --sd-meter-audio-shell: rgba(18, 18, 18, 0.06);
    --sd-meter-audio-border: rgba(18, 18, 18, 0.12);
    --sd-meter-audio-idle: rgba(18, 18, 18, 0.36);
    --sd-meter-audio-active: rgba(18, 18, 18, 0.84);
    --sd-meter-safe: rgba(255, 255, 255, 0.96);
    --sd-meter-warn: #facc15;
    --sd-meter-hot: #ef4444;

    background: var(--sd-bg-page);
    color: var(--sd-ink);
}

/* ── Dark-theme token overrides ──────────────────────────────────────
 * Trebble flags dark mode on the page via the `.lighttext` class (text
 * is light because the background is dark). We invert ink/bg tokens so
 * every studio-dock surface picks up the dark palette without touching
 * individual rules. Primary/accent colors stay the same. */
.createCapsulePage.studio-dock.lighttext,
body.darkTheme .createCapsulePage.studio-dock,
html.darkTheme .createCapsulePage.studio-dock {
    --sd-ink:          #f5f5f5;
    --sd-ink-60:       rgba(245, 245, 245, 0.72);
    --sd-ink-45:       rgba(245, 245, 245, 0.55);
    --sd-ink-30:       rgba(245, 245, 245, 0.30);
    --sd-ink-10:       rgba(245, 245, 245, 0.12);
    --sd-ink-05:       rgba(245, 245, 245, 0.06);
    --sd-rule:         rgba(255, 255, 255, 0.14);
    --sd-bg:           #1c1c1c;
    --sd-bg-page:      #121212;
    --sd-bg-soft:      #1f1f1f;
    --sd-drawer-rule:  rgba(255, 255, 255, 0.16);
    --sd-primary-08:   rgba(236, 127, 84, 0.18);
    --sd-primary-15:   rgba(236, 127, 84, 0.28);
    --sd-segmented-shell: rgba(255, 255, 255, 0.07);
    --sd-segmented-text: rgba(255, 255, 255, 0.74);
    --sd-segmented-active: rgba(255, 255, 255, 0.14);
    --sd-segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
    --sd-meter-audio-shell: rgba(255, 255, 255, 0.07);
    --sd-meter-audio-border: rgba(255, 255, 255, 0.14);
    --sd-meter-audio-idle: rgba(255, 255, 255, 0.42);
    --sd-meter-audio-active: rgba(255, 255, 255, 0.94);
    --sd-meter-safe: rgba(255, 255, 255, 0.98);
    --sd-meter-warn: #fde047;
    --sd-meter-hot: #fb7185;
}

/* ── Grid shell ──────────────────────────────────────────────────────── */
/* Hide the legacy creation mode selector — our .mode-pill replaces it */
.createCapsulePage.studio-dock #creationModeSelectorWrapper {
    display: none !important;
}

.createCapsulePage.studio-dock .ui-content {
    padding: 0 !important;
    background: var(--sd-bg-page);
}

.createCapsulePage.studio-dock #recordingBlock {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    /* Lock the record page to the viewport (minus the app header) so the
     * visual/audio stage can stretch to fill available space without
     * creating a vertical scrollbar. */
    height: calc(100vh - 57px) !important;
    max-height: calc(100vh - 57px);
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.createCapsulePage.studio-dock #recordingBlock .shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* The legacy background-track flow inserts a spacer below the panel while
 * recording. In studio-dock that spacer steals height from the stage and
 * makes the preview/timer appear to shrink mid-take, so keep it collapsed. */
.createCapsulePage.studio-dock .track_selector_block_spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
}

/* Mode pill wrapper — centered above the panel. Tight padding so the
 * stage inherits as much vertical space as possible. */
.createCapsulePage.studio-dock .mode-pill-wrap {
    display: flex;
    justify-content: center;
    padding: 14px 20px 10px;
    flex: 0 0 auto;
}

/* Shift main/dock (but NOT the header) when a side panel is open. */
.createCapsulePage.studio-dock .shell main,
.createCapsulePage.studio-dock .shell .dock {
    transition: padding-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.createCapsulePage.studio-dock .shell.drawer-open main       { padding-right: calc(20px + 340px); }
.createCapsulePage.studio-dock .shell.drawer-open .dock      { padding-right: calc(24px + 340px); }

/* ── Permission banner — shown ONLY when permission is hard-denied ────
 * The view now hides this entirely in the common "prompt / labels not
 * visible" case. When it does appear, it's a quiet inline notice that
 * matches the rest of the page, not a shouting coral slab. */
.createCapsulePage.studio-dock #recordingDevicePermissionBanner.permission-banner {
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 10px 20px 0;
    background: var(--sd-bg);
    border: 1px solid var(--sd-primary);
    box-shadow: none;
    color: var(--sd-ink);
    font-size: var(--text-sm-px);
    font-weight: 500;
    line-height: 1.4;
}
.createCapsulePage.studio-dock #recordingDevicePermissionBanner.permission-banner::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: var(--sd-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27><path d=%27M12 2L1 21h22L12 2zm0 4.5L19.5 19h-15L12 6.5zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z%27/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27><path d=%27M12 2L1 21h22L12 2zm0 4.5L19.5 19h-15L12 6.5zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z%27/></svg>") no-repeat center / contain;
}
.createCapsulePage.studio-dock #recordingDevicePermissionBanner #recordingDevicePermissionText {
    flex: 1 1 auto;
    font-size: var(--text-sm-px);
    font-weight: 500;
    color: var(--sd-ink);
    line-height: 1.45;
}
.createCapsulePage.studio-dock #requestRecordingDevicePermissionButton {
    flex: 0 0 auto;
    display: none !important;
}

/* ── Main panel ──────────────────────────────────────────────────────── */
/* CSS Grid layout: the stage fills row 1 (1fr — it grows to consume all
 * remaining vertical space), the record button sits on row 2 (auto). The
 * 16:9 visual stage uses aspect-ratio + max-w/max-h so it scales to fill
 * the stage cell without ever forcing a vertical scrollbar. */
.createCapsulePage.studio-dock #recordingBlock .panel {
    position: relative;
    display: grid !important;
    /* Row 1 (stage) absorbs all remaining space via 1fr.
     * Row 2 (record controls) and any implicit rows (e.g. #recordingInstruction)
     * are forced to content-size so they cannot steal space from row 1 when the
     * recording state toggles visibility/text on those elements. */
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-auto-rows: auto;
    align-items: center;
    justify-items: center;
    row-gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 8px 20px 12px;
    overflow: hidden;
    /* NOTE: do NOT add `contain: layout` here. It creates a containing block
     * for position:fixed descendants and breaks the full-viewport countdown
     * scrim (#counterAnimationBox), which gets sized to .panel instead of
     * the viewport and is then clipped by this element's own overflow:hidden. */
}
/* Pin each panel child to an explicit grid row so auto-placement cannot
 * shuffle things when elements are shown/hidden during recording. */
.createCapsulePage.studio-dock #recordingBlock .panel > .visual-stage,
.createCapsulePage.studio-dock #recordingBlock .panel > .audio-stage {
    grid-row: 1 !important;
}
.createCapsulePage.studio-dock #recordingBlock .panel > #recordControlsWrapper {
    grid-row: 2 !important;
}
.createCapsulePage.studio-dock #recordingBlock .panel > #recordingInstruction {
    grid-row: 3 !important;
}
.createCapsulePage.studio-dock #recordingBlock .panel > #recordingMediaTypeSelector {
    display: none !important;
}
.createCapsulePage.studio-dock #recordingBlock .panel:not(.has-visual) {
    grid-template-rows: auto auto auto !important;
    align-content: center;
    justify-content: center;
    row-gap: 14px;
}
.createCapsulePage.studio-dock #recordingBlock .panel:not(.has-visual) > .audio-stage {
    height: auto;
}

/* ── Source pills row (inside .dock) ─────────────────────────────────── */
.createCapsulePage.studio-dock .dock .source-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 1 auto;
    margin: 0;
}

.createCapsulePage.studio-dock .source-pill {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 48px;
    background: var(--sd-bg);
    border: none;
    transition: border-color 0.15s ease;
    min-width: 230px;
    padding: 0;
    gap: 0;
    cursor: pointer;
    color: var(--sd-ink-60);
    font-size: var(--text-sm-px);
    font-weight: 600;
}
.createCapsulePage.studio-dock .source-pill:hover { background: var(--sd-ink-05); }
.createCapsulePage.studio-dock .source-pill.on    { color: var(--sd-ink); }
.createCapsulePage.studio-dock .source-pill.is-disabled {
    opacity: 0.48;
    pointer-events: none;
    cursor: not-allowed;
}

/* Hidden device-select elements still fire native change events */
.createCapsulePage.studio-dock .source-pill select {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.createCapsulePage.studio-dock .source-pill[data-kind="screen"] {
    display: flex;
}

/* ── Source pill internals (Phase 2) ─────────────────────────────────── */
.createCapsulePage.studio-dock .source-pill .sp-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 0 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}
.createCapsulePage.studio-dock .source-pill .sp-main:hover {
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock .source-pill .sp-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md-px);
    flex: 0 0 auto;
    color: var(--sd-ink-45);
}
.createCapsulePage.studio-dock .source-pill.is-on .sp-icon {
    color: var(--sd-primary);
}
.createCapsulePage.studio-dock .source-pill .sp-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
}
.createCapsulePage.studio-dock .source-pill .sp-label .sp-kind {
    font-size: var(--text-2xs-px);
    font-weight: 700;
    color: var(--sd-ink-45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.createCapsulePage.studio-dock .source-pill .sp-label .sp-device {
    font-size: var(--text-sm-px);
    font-weight: 600;
    color: var(--sd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.createCapsulePage.studio-dock .source-pill:not(.is-on) .sp-label .sp-device {
    color: var(--sd-ink-60);
}
.createCapsulePage.studio-dock .source-pill .sp-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--sd-ink-45);
    flex: 0 0 auto;
}

.createCapsulePage.studio-dock .source-pill .sp-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.createCapsulePage.studio-dock .source-pill .sp-toggle-wrap:hover {
    background: var(--sd-ink-05);
}
/* Rounded pill switch — toggles are the one exception to Trebble's
 * square-corner rule (matches the exploration mock and the platform
 * convention for on/off state controls). */
.createCapsulePage.studio-dock .source-pill .sp-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    background: var(--sd-ink-30);
    border-radius: 999px;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock .source-pill .sp-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.25);
    transition: transform 0.2s ease;
}
.createCapsulePage.studio-dock .source-pill.is-on .sp-switch {
    background: var(--sd-primary);
}
.createCapsulePage.studio-dock .source-pill.is-on .sp-switch::after {
    transform: translateX(16px);
}

/* Pill menu (device picker) — opens upward because the pill lives in the
 * bottom dock; opening downward would be clipped by the viewport. */
.createCapsulePage.studio-dock .source-pill .sp-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--sd-bg);
    border: 1px solid var(--sd-rule);
    box-shadow: 0 -12px 32px -12px rgba(18, 18, 18, 0.28), 0 -2px 6px -2px rgba(18, 18, 18, 0.12);
    max-height: min(320px, 50vh);
    overflow-y: auto;
    padding: 6px 0;
    min-width: 220px;
}
.createCapsulePage.studio-dock .source-pill .sp-menu::after {
    /* small tail pointing down to the pill */
    content: "";
    position: absolute;
    left: 24px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: var(--sd-bg);
    border-right: 1px solid var(--sd-rule);
    border-bottom: 1px solid var(--sd-rule);
    transform: rotate(45deg);
}
.createCapsulePage.studio-dock .source-pill.sp-menu-open .sp-menu {
    display: block;
}
.createCapsulePage.studio-dock .source-pill .sp-menu .sp-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm-px);
    font-weight: 500;
    color: var(--sd-ink);
    text-align: left;
}
.createCapsulePage.studio-dock .source-pill .sp-menu .sp-menu-item:hover {
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock .source-pill .sp-menu .sp-menu-item.selected {
    color: var(--sd-primary);
    font-weight: 700;
}
.createCapsulePage.studio-dock .source-pill .sp-menu .sp-menu-check {
    margin-left: auto;
    font-size: var(--text-sm-px);
    color: var(--sd-primary);
}

/* ── Visual stage ────────────────────────────────────────────────────── */
/* Hidden by default — only shown when camera or screen pill is toggled on
 * (the view adds `.has-visual` on the panel). For audio-only recording
 * the .audio-stage sibling takes over.
 *
 * Sizing: the parent .panel uses CSS grid with a `minmax(0,1fr) auto`
 * row template, so the stage sits in row 1 and can use `max-width` +
 * `max-height: 100%` + `aspect-ratio: 16/9` to fill whichever dimension
 * is smaller while preserving the 16:9 ratio. No scrollbar, ever. */
.createCapsulePage.studio-dock .visual-stage {
    display: none;
    position: relative;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    /* Drive height from the grid cell (which is sized by minmax(0,1fr)),
     * then let aspect-ratio derive width. max-width clamps in case the
     * derived width is wider than the viewport — the browser then
     * re-derives height from the clamped width. */
    height: 100%;
    width: auto;
    max-width: min(1180px, 94vw);
    max-height: 100%;
    aspect-ratio: var(--sd-preview-aspect-ratio, 16 / 9);
    background: #0e0e0e;
    border: 1px solid var(--sd-rule);
    overflow: hidden;
    margin: 0;
    min-height: 0;
    place-items: center;
}
.createCapsulePage.studio-dock .panel.has-visual .visual-stage {
    display: grid !important;
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    max-width: min(1180px, 94vw) !important;
}

/* ── Audio stage (default — centered timer) ──────────────────────────── */
.createCapsulePage.studio-dock .audio-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    grid-row: 1;
    width: min(560px, 86vw);
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0 auto;
}
.createCapsulePage.studio-dock .panel.has-visual .audio-stage {
    display: none;
}

/* Peak meter — lives inside .audio-stage (moved from .visual-stage so it
 * stays visible in audio-only mode). In video mode the .audio-stage is
 * hidden so the meter hides with it. */
.createCapsulePage.studio-dock #recordingBlock .audio-stage #peak_meter_container {
    --sd-audio-peak-guide-height: 3px;
    --sd-audio-peak-active-height: 4px;
    position: relative;
    isolation: isolate;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100% !important;
    max-width: none !important;
    height: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}
.createCapsulePage.studio-dock #peak_meter_container,
body.iosApp .createCapsulePage.studio-dock #peak_meter_container,
body.androidApp .createCapsulePage.studio-dock #peak_meter_container {
    visibility: visible !important;
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--sd-audio-peak-guide-height);
    transform: translateY(-50%);
    background:
        linear-gradient(to right, rgba(18, 18, 18, 0.08), rgba(18, 18, 18, 0.08)),
        repeating-linear-gradient(
            to right,
            var(--sd-meter-audio-idle) 0 8px,
            transparent 8px 12px
        );
    pointer-events: none;
}
.createCapsulePage.studio-dock.lighttext .audio-stage #peak_meter_container::before,
body.darkTheme .createCapsulePage.studio-dock .audio-stage #peak_meter_container::before,
html.darkTheme .createCapsulePage.studio-dock .audio-stage #peak_meter_container::before {
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
        repeating-linear-gradient(
            to right,
            var(--sd-meter-audio-idle) 0 8px,
            transparent 8px 12px
        );
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-widget {
    position: absolute;
    inset: 50% 0 auto 0;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: var(--sd-audio-peak-active-height) !important;
    min-height: var(--sd-audio-peak-active-height);
    color: var(--sd-meter-audio-active);
    opacity: 1;
    transform: translateY(-50%);
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-shell {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--sd-audio-peak-active-height) !important;
    min-height: var(--sd-audio-peak-active-height);
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    background: transparent;
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-track {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: var(--sd-audio-peak-active-height);
    background: transparent;
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-fill {
    z-index: 2;
    background: var(--sd-meter-safe);
    box-shadow: 0 0 12px rgba(18, 18, 18, 0.08);
}
.createCapsulePage.studio-dock.lighttext .audio-stage #peak_meter_container .peak-meter-fill,
body.darkTheme .createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-fill,
html.darkTheme .createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-fill {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-widget.is-warning .peak-meter-fill,
.createCapsulePage #video_peak_meter_container .peak-meter-widget.is-warning .peak-meter-fill,
.createCapsulePage .video-peak-meter.is-warning .peak-meter-fill {
    background: var(--sd-meter-warn);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
}
.createCapsulePage.studio-dock .audio-stage #peak_meter_container .peak-meter-widget.is-danger .peak-meter-fill,
.createCapsulePage #video_peak_meter_container .peak-meter-widget.is-danger .peak-meter-fill,
.createCapsulePage .video-peak-meter.is-danger .peak-meter-fill {
    background: var(--sd-meter-hot);
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.42);
}

/* The legacy JS writes inline width/height on these nodes via
 * _onWindowSizeChanged. We must override them with !important so the new
 * layout uses the grid-driven sizing instead. */
.createCapsulePage.studio-dock #recordingPreviewContainer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
.createCapsulePage.studio-dock #recordingPreviewContainer #recordingPreviewLabel {
    display: none;
}
.createCapsulePage.studio-dock #recordingPreviewContainer #recordingPreviewStage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: none;
    aspect-ratio: var(--sd-preview-aspect-ratio, auto) !important;
    background: #0e0e0e;
}
.createCapsulePage.studio-dock #recordingPreviewContainer #recordingPreviewStage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at 50% 55%, #2a2a2a 0%, #0e0e0e 80%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 8px);
}
.createCapsulePage.studio-dock #recordingPreviewContainer #recordingPreviewStage.is-screen-source::before {
    background:
        linear-gradient(180deg, #1a1f2e 0%, #0e1220 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 6px);
}
.createCapsulePage.studio-dock #recordingPreviewStage #videoRecordingTimerRow {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: var(--text-xs-px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.createCapsulePage.studio-dock #recordingPreviewStage #videoRecordingTimerRow .preview-badge-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(236, 71, 71, 0.92);
}
.createCapsulePage.studio-dock #recordingPreviewStage #videoRecordingTimerRow .preview-badge-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: sd-rec-blink 1.3s ease-in-out infinite;
}
.createCapsulePage.studio-dock #recordingPreviewStage #videoRecordingTimerValue {
    display: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-size: var(--text-xs-px);
    font-weight: 700;
}
.createCapsulePage.studio-dock #recordingPreviewStage #videoRecordingTimerRow.show-timer #videoRecordingTimerValue {
    display: inline-flex;
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-grid {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    z-index: 2;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.32) 1px, transparent 1px),
        linear-gradient(to right, rgba(255,255,255,0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.32) 1px, transparent 1px);
    background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
    background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
    background-repeat: no-repeat;
}
.createCapsulePage.studio-dock #recordingPreviewStage.grid-on .recording-preview-grid {
    display: block;
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tools {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tool {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--sd-ink-10);
    border: none;
    cursor: pointer;
    color: var(--sd-ink-60);
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tool i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: var(--text-base-px);
    line-height: 1;
    transform: translateY(-0.5px);
}

.createCapsulePage.studio-dock .carouselItem.audio_editor_section {
    min-height: calc(100vh - 52px);
    height: calc(100vh - 52px) !important;
}
.createCapsulePage.studio-dock .carouselItem.audio_editor_section .audio_editor_and_transcription_box.is-empty-transcription-state {
    width: 100%;
    min-height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.createCapsulePage.studio-dock .carouselItem.audio_editor_section .audio_editor_and_transcription_box.is-empty-transcription-state .message_to_start_transcription_box_wrapper {
    width: 100%;
}
.createCapsulePage.studio-dock .carouselItem.capsule_info_wrapper .capsuleInfo.capsule-info-form {
    width: 100%;
    min-height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.createCapsulePage.studio-dock .carouselItem.capsule_info_wrapper .capsuleInfo.capsule-info-form > label {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.createCapsulePage.studio-dock .carouselItem.capsule_info_wrapper .capsuleInfo.capsule-info-form #comment {
    min-height: 96px !important;
    max-height: 160px !important;
    overflow-y: auto;
}
.createCapsulePage.studio-dock .carouselItem.capsule_info_wrapper .uploadProgressInfo {
    min-height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tool:hover {
    color: var(--sd-ink);
    background: var(--sd-ink-10);
}
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tool.is-on,
.createCapsulePage.studio-dock #recordingPreviewStage .recording-preview-tool[aria-pressed="true"] {
    color: var(--sd-primary);
    background: var(--sd-primary-08);
}
.createCapsulePage.studio-dock #recordingPreviewContainer video,
.createCapsulePage.studio-dock #recordingPreviewStage video {
    z-index: 1;
}
/* Force any <video> element inside the preview stage to fill the box —
 * legacy CSS leaves the <video> at its intrinsic aspect ratio which
 * creates a black strip at the bottom of the 16:9 visual-stage. */
.createCapsulePage.studio-dock #recordingPreviewContainer video,
.createCapsulePage.studio-dock #recordingPreviewStage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    background: #0e0e0e;
}
.createCapsulePage.studio-dock #recordedPlaybackVideo {
    z-index: 2;
    display: none;
    -o-object-fit: contain;
       object-fit: contain;
    background: rgba(5, 7, 12, 0.96);
}
.createCapsulePage.studio-dock #recordedPlaybackBadge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: rgba(18, 92, 117, 0.92);
    border: none;
    color: #fff;
    font-size: var(--text-xs-px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback #recordedPlaybackVideo {
    display: block;
}
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback #recordedPlaybackBadge {
    display: inline-flex;
}
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback #recordingPreviewStatus,
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback #video_peak_meter_container,
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback #videoRecordingTimerRow,
.createCapsulePage.studio-dock #recordingPreviewStage.is-recorded-playback .recording-preview-tools {
    display: none !important;
}

/* The legacy recording controls panel (inline device pickers) is replaced by
 * the source pills row — hide the raw selectors container. */
.createCapsulePage.studio-dock #recordingDeviceControlsPanel {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    opacity: 0;
}

.createCapsulePage.studio-dock #recordingBlock.upload-mode-shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock #recordingBlock.upload-mode-shell .shell.upload-mode {
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
}
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem {
    display: flex !important;
    display: -moz-flex !important;
    display: -ms-flex !important;
    flex-direction: column !important;
    -moz-flex-direction: column !important;
    -moz-justify-content: flex-start !important;
    -ms-justify-content: flex-start !important;
    justify-content: flex-start !important;
    -moz-align-items: stretch !important;
    -ms-align-items: stretch !important;
    align-items: stretch !important;
    height: calc(100vh - 57px) !important;
    min-height: calc(100vh - 57px) !important;
    padding: 0 !important;
}
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem > #uploadBlock {
    display: flex !important;
    display: -moz-flex !important;
    display: -ms-flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 20px 24px !important;
    box-sizing: border-box;
    flex-direction: column !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center;
    gap: 16px;
    overflow: auto !important;
}
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem > #uploadBlock > .uploadZonePlaceHolder,
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem > #uploadBlock > .orrecordsection {
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem > #uploadBlock > .uploadZonePlaceHolder {
    width: min(100%, 760px);
    min-height: clamp(220px, 34vh, 320px);
    max-width: 760px;
}
.createCapsulePage.studio-dock[creationMode="fromFile"] .carouselItem > #uploadBlock > .orrecordsection {
    width: min(100%, 760px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Counter animation box — fullscreen takeover during countdown (matches
 * production behavior). While `.showCountTimer` is active the counter
 * covers the entire viewport with a translucent scrim so nothing else
 * on the page competes with the 3-2-1 number. */
.createCapsulePage.studio-dock #counterAnimationBox {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 10000;
}

/* ── 3-2-1 countdown fix ──────────────────────────────────────────────
 * Two bugs in the default countdown state inside the studio-dock:
 *
 *   1. Legacy CSS force-hides #recordingPreviewContainer while
 *      `.showCountTimer` is on. For video recording that strips away the
 *      user's camera feed during the countdown, leaving a flat black box.
 *      Keep the preview visible so the user sees themselves with the
 *      number overlaid.
 *
 *   2. #counterNumber inherits the studio-dock ink color and starts at
 *      opacity: 0 (the zoomIn animation class is supposed to fade it in
 *      then back out). Against the near-black .visual-stage background
 *      the number was barely readable. Force a high-contrast white
 *      number with a soft glow so it reads on both the video feed and
 *      the flat audio-only stage, and make it visible immediately so the
 *      user never sees a blank frame if the animate.css class is late to
 *      apply.                                                          */

.createCapsulePage.studio-dock.showCountTimer #recordingPreviewContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* The audio-only stage also needs to stay visible during countdown so
 * the number has something to center on when no camera is active. */
.createCapsulePage.studio-dock.showCountTimer .audio-stage {
    display: flex !important;
}
.createCapsulePage.studio-dock.showCountTimer .panel.has-visual .audio-stage {
    display: none !important;
}
.createCapsulePage.studio-dock.showCountTimer .visual-stage {
    /* Ensure the stage container itself isn't hidden by any legacy rule
     * and that the counter sits above the <video> element. */
    display: grid !important;
}

/* Fullscreen countdown scrim — fully opaque so no stage/preview/controls
 * bleed through behind the number. Theme-aware via --sd-bg-page /
 * --sd-ink tokens (light theme → pale scrim + dark number, dark theme
 * → dark scrim + light number). */
.createCapsulePage.studio-dock.showCountTimer #counterAnimationBox {
    background: var(--sd-bg-page);
}
.createCapsulePage.studio-dock #recordingBlock #counterAnimationBox #counterNumber,
.createCapsulePage.studio-dock #counterAnimationBox #counterNumber {
    color: var(--sd-ink) !important;
    opacity: 1 !important;
    font-size: clamp(200px, 32vw, 420px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 0 120px var(--sd-primary-15);
}

/* Ghost node — ProgressBar.Circle still mounts here. It must be visually
 * hidden but it MUST keep a real 200×200 size so the SVG path geometry
 * remains valid. If the container is 0/1px, the SVG radius computes to
 * 0 → strokeDashoffset = NaN → the step callback never fires → the
 * timer text stays at 0:00 and .stop() may throw. */
.createCapsulePage.studio-dock #recordProgressContainer {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ── Dock (horizontal, bottom) ───────────────────────────────────────── */
.createCapsulePage.studio-dock #recordingBlock .dock {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 24px 20px;
    background: transparent;
    border-top: none;
    flex: 0 0 auto;
    width: 100%;
}
.createCapsulePage.studio-dock .dock-divider {
    width: 1px;
    height: 28px;
    background: var(--sd-rule);
    margin: 0 4px;
    flex: 0 0 auto;
}

/* Flat timer display — lives inside .audio-stage now.
 * Use !important on font-size to defeat any legacy/ProgressBar inline font-size
 * that could leak onto the detached .timer-progress span during recording. */
.createCapsulePage.studio-dock .audio-stage .timer-area {
    font-size: clamp(40px, 5.2vw, 64px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: var(--sd-ink);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    text-align: center;
}
.createCapsulePage.studio-dock .audio-stage .timer-area .live-timer-slot,
.createCapsulePage.studio-dock .audio-stage .timer-area .live-timer-slot .timer-progress,
.createCapsulePage.studio-dock .audio-stage .timer-area .live-timer-slot .progressbar-text {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    color: var(--sd-ink) !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}
.createCapsulePage.studio-dock .audio-stage .timer-area #time_played,
.createCapsulePage.studio-dock .audio-stage .timer-area #total_recording_time {
    color: inherit;
    font: inherit;
}

/* Record controls — circular primary button with pulsing rings.
 * Lives inside .panel as a sibling below the visual/audio stage. */
.createCapsulePage.studio-dock #recordControlsWrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: auto !important;
    height: auto !important;
    min-height: 99px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock #recordControlsWrapper [data-role="controlgroup"] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: auto !important;
    height: auto !important;
}

.createCapsulePage.studio-dock #recordButton {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 0;
    background: var(--sd-primary);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -8px rgba(236, 127, 84, 0.4);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, width 0.2s ease, height 0.2s ease;
    color: #fff;
}
/* Decorative pulsing rings removed — they read as noisy around the button. */
.createCapsulePage.studio-dock #recordButton::before,
.createCapsulePage.studio-dock #recordButton::after {
    content: none;
}
.createCapsulePage.studio-dock #recordButton:hover  { background: var(--sd-primary-dark); transform: scale(1.04); }
.createCapsulePage.studio-dock #recordButton:active { transform: scale(0.96); }
.createCapsulePage.studio-dock #recordButton t      { font-size: var(--text-3xl-px); color: #fff; }

/* Keep the primary record control the same size across audio/video states */
.createCapsulePage.studio-dock .panel.has-visual #recordButton {
    width: 84px;
    height: 84px;
    min-width: 84px !important;
    min-height: 84px !important;
}
.createCapsulePage.studio-dock .panel.has-visual #recordButton::before,
.createCapsulePage.studio-dock .panel.has-visual #recordButton::after {
    display: none;
}
.createCapsulePage.studio-dock .panel.has-visual #recordButton t {
    font-size: var(--text-3xl-px);
}

/* Secondary clip tools */
.createCapsulePage.studio-dock #deleteButton,
.createCapsulePage.studio-dock #playButton,
.createCapsulePage.studio-dock #stopRecordingButton {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--sd-bg);
    border: 1px solid var(--sd-rule);
    cursor: pointer;
    color: var(--sd-ink-60);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.createCapsulePage.studio-dock #deleteButton:hover,
.createCapsulePage.studio-dock #playButton:hover,
.createCapsulePage.studio-dock #stopRecordingButton:hover {
    color: var(--sd-ink);
    border-color: var(--sd-ink-30);
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock #deleteButton.trebble_disabled,
.createCapsulePage.studio-dock #playButton.trebble_disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Recording instruction hint — keep legacy, just re-style */
.createCapsulePage.studio-dock #recordingInstruction {
    display: none !important;
}
.createCapsulePage.studio-dock #recordingInstruction .arrowDownIconBox { display: none; }

/* Media-type selector pills (Audio / Video) */
.createCapsulePage.studio-dock #recordingMediaTypeSelector {
    display: inline-flex;
    padding: 3px;
    background: var(--sd-bg);
    border: 1px solid var(--sd-rule);
    box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
    margin-bottom: 8px;
}
.createCapsulePage.studio-dock #recordingMediaTypeSelector .recordingMediaTypeButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm-px);
    font-weight: 700;
    color: var(--sd-ink-45);
    transition: color 0.2s ease, background 0.2s ease;
}
.createCapsulePage.studio-dock #recordingMediaTypeSelector .recordingMediaTypeButton.selected {
    color: var(--sd-primary);
    background: var(--sd-primary-08);
    border: 1px solid var(--sd-primary);
}

/* ── Notes panel ─────────────────────────────────────────────────────── */
.createCapsulePage.studio-dock #showNotesToggleBox {
    display: none; /* Phase 4 — replaced by dock toggle button */
}
.createCapsulePage.studio-dock #recordingBlock .shell #noteSection,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"],
body > [data-studio-dock-floating-drawer="notes"] {
    background: var(--sd-bg);
}
.createCapsulePage.studio-dock #noteFieldDecorator,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"] #noteFieldDecorator,
body > [data-studio-dock-floating-drawer="notes"] #noteFieldDecorator {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    background: var(--sd-bg-soft);
    border: none;
    box-shadow: inset 0 0 0 1px var(--sd-ink-05);
    padding: 12px 16px;
    display: flex;
    min-height: 0;
}
.createCapsulePage.studio-dock #noteField,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"] #noteField,
body > [data-studio-dock-floating-drawer="notes"] #noteField {
    width: 100%;
    display: block;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: var(--text-sm-px);
    line-height: 1.5;
    color: var(--sd-ink);
    min-height: 200px;
    max-height: none;
    flex: 1 1 auto;
}
.createCapsulePage.studio-dock #noteField::-moz-placeholder, .createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"] #noteField::-moz-placeholder, body > [data-studio-dock-floating-drawer="notes"] #noteField::-moz-placeholder { color: var(--sd-ink-45); }
.createCapsulePage.studio-dock #noteField::placeholder,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"] #noteField::placeholder,
body > [data-studio-dock-floating-drawer="notes"] #noteField::placeholder { color: var(--sd-ink-45); }

.createCapsulePage.studio-dock #recording_time_left_box,
.createCapsulePage.studio-dock #recording_playback_box {
    max-width: 720px;
    margin: 8px auto 0;
    color: var(--sd-ink-60);
    font-size: var(--text-xs-px);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ============================================================================
 * Phase 3 — Flat timer, visual stage polish, record button pulses
 * ========================================================================== */

/* The live .timer-progress span is detached from #recordProgressContainer at
 * runtime and re-parented into .timer-area .live-timer-slot. ProgressBar.Circle
 * keeps its reference to the same DOM node so the text keeps ticking. */
.createCapsulePage.studio-dock .timer-area .live-timer-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1em;
    line-height: 1;
}
.createCapsulePage.studio-dock .timer-area .live-timer-slot .progressbar-text {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    /* Override the hidden state inherited from #recordProgressContainer's
     * previous parent — the span is a child of .live-timer-slot now. */
    visibility: visible !important;
}
.createCapsulePage.studio-dock .timer-area .live-timer-slot .timer-progress {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sd-ink);
}
.createCapsulePage.studio-dock .timer-area .live-timer-slot .red_recording_circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock[is-recording="true"] .timer-area .live-timer-slot .red_recording_circle {
    background: #e53935;
    animation: sd-rec-blink 1.3s ease-in-out infinite;
}
@keyframes sd-rec-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Belt-and-braces override of the legacy `_onWindowSizeChanged` inline styles.
 * The imperative code writes width/height/margin on these IDs — our
 * !important rules on position/inset/size in Phase 1 already defeat those
 * writes; these extra rules tighten a few edge cases. */
.createCapsulePage.studio-dock .flexContentCenteringBox {
    display: contents !important;
}
.createCapsulePage.studio-dock #recordingBlock #recordProgressContainer,
.createCapsulePage.studio-dock #recordingBlock.carouselItem #recordProgressContainer {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: -9999px !important;
    left: -9999px !important;
}
/* ...but the relocated live timer span must stay visible */
.createCapsulePage.studio-dock .timer-area .live-timer-slot,
.createCapsulePage.studio-dock .timer-area .live-timer-slot * {
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
}

/* Record button icon — override global trebble140_browser_font.css */
.createCapsulePage.studio-dock #recordButton {
    min-width: 84px !important;
    min-height: 84px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: var(--sd-primary) !important;
    background-color: var(--sd-primary) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: 0 10px 24px -8px rgba(236, 127, 84, 0.4) !important;
}
.createCapsulePage.studio-dock #recordButton > t {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: var(--text-4xl-px) !important;
    color: #fff !important;
    line-height: 1 !important;
}
.createCapsulePage.studio-dock[is-recording="true"] #recordButton {
    background: var(--sd-primary-dark);
}
/* Pulsing rings are disabled globally — no-op stub kept for clarity. */

/* Flanking clip tools — upgrade to 56px secondary icon buttons */
.createCapsulePage.studio-dock #deleteButton,
.createCapsulePage.studio-dock #playButton,
.createCapsulePage.studio-dock #stopRecordingButton {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 0 !important;
}
.createCapsulePage.studio-dock #deleteButton > t,
.createCapsulePage.studio-dock #playButton > t,
.createCapsulePage.studio-dock #stopRecordingButton > t {
    font-size: var(--text-lg-px) !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

/* Record/Stop button swap during recording.
 * The view toggles `.hidden` on each button via _showPauseRecordingButton().
 * Legacy CSS hides .hidden o elements via display:none, but several legacy
 * `.uploadAvailable o { display:flex }` rules can override that with equal
 * specificity depending on cascade order. We force the swap with !important
 * here so the studio-dock state is deterministic. */
.createCapsulePage.studio-dock #recordButton.hidden,
.createCapsulePage.studio-dock #stopRecordingButton.hidden {
    display: none !important;
}
.createCapsulePage.studio-dock #stopRecordingButton:not(.hidden) {
    display: grid !important;
    place-items: center !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    background: var(--sd-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -8px rgba(236, 127, 84, 0.4) !important;
}
.createCapsulePage.studio-dock #stopRecordingButton:not(.hidden) > t {
    color: #fff !important;
    font-size: var(--text-3xl-px) !important;
}
.createCapsulePage.studio-dock #stopRecordingButton:not(.hidden):hover {
    background: var(--sd-primary-dark) !important;
}
/* Belt-and-braces: when is-recording, force the wrapper to remain visible
 * regardless of what the legacy layout calc inline-styles do. */
.createCapsulePage.studio-dock[is-recording="true"] #recordControlsWrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.createCapsulePage.studio-dock[is-recording="true"] #deleteButton,
.createCapsulePage.studio-dock[is-recording="true"] #playButton {
    opacity: 0.35;
    pointer-events: none;
}

/* Recording status replaces the "click to start" hint while recording.
 * The legacy view calls recordingInstruction$el.hide() inline; we restyle
 * an alternate hint via the [is-recording] attribute on .panel and use a
 * pseudo-element so we don't need to touch the JS. */
.createCapsulePage.studio-dock[is-recording="true"] #recordingInstruction {
    display: none !important;
}
.createCapsulePage.studio-dock[is-recording="true"] #recordingInstruction .instructionText {
    display: none;
}
.createCapsulePage.studio-dock[is-recording="true"] #recordingInstruction::before {
    content: none;
}

/* Mode selector sits above the visual stage in studio-dock */
.createCapsulePage.studio-dock #recordingMediaTypeSelector {
    align-self: center;
    margin-top: 4px;
}

/* ============================================================================
 * Phase 4 — Mode pill, Notes button/panel, Settings drawer
 * ========================================================================== */

/* ── Mode pill (Record / Upload a file) ──────────────────────────────────
 * Segmented control, same visual pattern as the old .tag_button_list_wrapper
 * Audio/Video selector: single bordered container with two equal-width
 * segments, each centered content, and the active segment painted in the
 * brand primary colors. Equal widths are critical so short labels like
 * "Record" don't look shoved against the icon. */
.createCapsulePage.studio-dock .mode-pill {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(164px, 1fr);
    align-self: center;
    gap: 0;
    padding: 3px;
    margin: 0 auto;
    background: var(--sd-bg);
    border: none;
    box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
    flex: 0 0 auto;
    overflow: hidden;
    min-width: 332px;
}
.createCapsulePage.studio-dock .mode-pill .mode-pill-slide { display: none; }
.createCapsulePage.studio-dock .mode-pill .mode-segment {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 22px;
    min-height: 36px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm-px);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--sd-ink-45);
    transition: color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    white-space: nowrap;
    line-height: 1;
    border: none;
}
.createCapsulePage.studio-dock .mode-pill .mode-segment i {
    font-size: var(--text-md-px);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.createCapsulePage.studio-dock .mode-pill .mode-segment span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.createCapsulePage.studio-dock .mode-pill .mode-segment:hover:not(.is-active) {
    color: var(--sd-ink);
}
.createCapsulePage.studio-dock .mode-pill .mode-segment.is-active {
    color: var(--sd-primary);
    background: var(--sd-primary-08);
    box-shadow: none;
    font-weight: 700;
}
.createCapsulePage.studio-dock .mode-pill .mode-segment.is-active i {
    color: var(--sd-primary);
}
.createCapsulePage.studio-dock .mode-pill .mode-segment:focus-visible {
    outline: 2px solid var(--sd-primary);
    outline-offset: -1px;
}

/* ── Studio dock: hide teleprompter (script) + participants for now ──── */
.createCapsulePage.studio-dock #studioDockScriptBtn,
.createCapsulePage.studio-dock #studioDockParticipantsBtn { display: none !important; }
.createCapsulePage.studio-dock #showRecordingSettingsButton { display: none !important; }

/* ── Upload mode: keep mode pill visible, hide the rest of the shell ──
 * When the user switches to Upload mode we keep #recordingBlock visible
 * so the mode pill stays at the top, but hide the record-specific chrome
 * (stage/panel, notes, dock, drawer). #uploadBlock is a sibling and shows
 * below. */
.createCapsulePage.studio-dock #recordingBlock .shell.upload-mode > main,
.createCapsulePage.studio-dock #recordingBlock .shell.upload-mode > #noteSection,
.createCapsulePage.studio-dock #recordingBlock .shell.upload-mode > .dock,
.createCapsulePage.studio-dock #recordingBlock .shell.upload-mode > .drawer {
    display: none !important;
}
.createCapsulePage.studio-dock #recordingBlock .shell.upload-mode {
    min-height: 0;
}

/* ── Notes dock button ───────────────────────────────────────────────── */
.createCapsulePage.studio-dock .btn-notes,
.createCapsulePage.studio-dock #studioDockSettingsBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 0;
    flex: 0 0 auto;
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    margin-left: 0;
    background: var(--sd-bg);
    border: none;
    cursor: pointer;
    color: var(--sd-ink);
    font-size: var(--text-sm-px);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.createCapsulePage.studio-dock.lighttext .btn-notes,
.createCapsulePage.studio-dock.lighttext #studioDockSettingsBtn,
body.darkTheme .createCapsulePage.studio-dock .btn-notes,
body.darkTheme .createCapsulePage.studio-dock #studioDockSettingsBtn,
html.darkTheme .createCapsulePage.studio-dock .btn-notes,
html.darkTheme .createCapsulePage.studio-dock #studioDockSettingsBtn {
    background: var(--sd-bg);
    color: var(--sd-ink);
}
/* Settings is an icon-only button — keep it square-ish at the same height. */
.createCapsulePage.studio-dock #studioDockSettingsBtn {
    width: 44px;
    padding: 0;
}
.createCapsulePage.studio-dock #studioDockSettingsBtn i {
    font-size: 1.4em;
    line-height: 1;
}
.createCapsulePage.studio-dock .btn-notes i {
    font-size: 1.3em;
    line-height: 1;
}
.createCapsulePage.studio-dock .btn-notes:hover {
    color: var(--sd-ink);
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock #studioDockSettingsBtn:hover {
    color: var(--sd-ink);
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock .btn-notes.is-active,
.createCapsulePage.studio-dock #studioDockSettingsBtn.is-active {
    color: #fff;
    background: var(--sd-primary);
}
.createCapsulePage.studio-dock #studioDockSettingsBtn.trebble_disabled {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
    background: var(--sd-bg);
    color: var(--sd-ink-45);
}
.createCapsulePage.studio-dock[is-recording="true"] #studioDockSettingsBtn,
.createCapsulePage.studio-dock[is-recording-finalizing="true"] #studioDockSettingsBtn {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
    background: var(--sd-bg);
    color: var(--sd-ink-45);
}
.createCapsulePage.studio-dock #studioDockSettingsBtn.is-active i,
.createCapsulePage.studio-dock .btn-notes.is-active i {
    color: inherit;
}

/* ── Settings drawer ─────────────────────────────────────────────────── */
.createCapsulePage.studio-dock .drawer,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer],
body > [data-studio-dock-floating-drawer],
.createCapsulePage.studio-dock aside#noteSection.drawer,
.createCapsulePage.studio-dock aside#studioDockDrawer.drawer {
    position: fixed !important;
    top: 56px !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 340px !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--sd-bg);
    border-left: 1px solid var(--sd-rule);
    box-shadow: -6px 0 18px -14px rgba(18, 18, 18, 0.14);
    z-index: 40;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    text-align: left;
}
body > [data-studio-dock-floating-drawer] {
    --sd-primary:      #EC7F54;
    --sd-primary-dark: #C55528;
    --sd-primary-15:   rgba(236, 127, 84, 0.15);
    --sd-primary-08:   rgba(236, 127, 84, 0.08);
    --sd-ink:          #121212;
    --sd-ink-60:       rgba(18, 18, 18, 0.60);
    --sd-ink-45:       rgba(18, 18, 18, 0.45);
    --sd-ink-30:       rgba(18, 18, 18, 0.30);
    --sd-ink-10:       rgba(18, 18, 18, 0.10);
    --sd-ink-05:       rgba(18, 18, 18, 0.05);
    --sd-rule:         #eeeeee;
    --sd-bg:           #ffffff;
    --sd-bg-page:      #f3f3f3;
    --sd-bg-soft:      #f7f7f7;
}
body > [data-studio-dock-floating-drawer][data-studio-dock-theme="dark"] {
    --sd-primary:      #EC7F54;
    --sd-primary-dark: #C55528;
    --sd-primary-15:   rgba(236, 127, 84, 0.28);
    --sd-primary-08:   rgba(236, 127, 84, 0.18);
    --sd-ink:          #f5f5f5;
    --sd-ink-60:       rgba(245, 245, 245, 0.72);
    --sd-ink-45:       rgba(245, 245, 245, 0.55);
    --sd-ink-30:       rgba(245, 245, 245, 0.30);
    --sd-ink-10:       rgba(245, 245, 245, 0.12);
    --sd-ink-05:       rgba(245, 245, 245, 0.06);
    --sd-rule:         rgba(255, 255, 255, 0.14);
    --sd-bg:           #1c1c1c;
    --sd-bg-page:      #121212;
    --sd-bg-soft:      #1f1f1f;
}
.createCapsulePage.studio-dock.lighttext [data-studio-dock-floating-drawer],
body.darkTheme .createCapsulePage.studio-dock [data-studio-dock-floating-drawer],
html.darkTheme .createCapsulePage.studio-dock [data-studio-dock-floating-drawer],
body > [data-studio-dock-floating-drawer][data-studio-dock-theme="dark"] {
    background: var(--sd-bg) !important;
    color: var(--sd-ink) !important;
    border-left-color: var(--sd-rule) !important;
}
.createCapsulePage.studio-dock .shell.drawer-open .drawer {
    pointer-events: auto;
}
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer][aria-hidden="false"],
body > [data-studio-dock-floating-drawer][aria-hidden="false"] {
    pointer-events: auto;
}
.createCapsulePage.studio-dock aside#noteSection.drawer[aria-hidden="true"],
.createCapsulePage.studio-dock aside#studioDockDrawer.drawer[aria-hidden="true"],
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer][aria-hidden="true"],
body > [data-studio-dock-floating-drawer][aria-hidden="true"] {
    transform: translateX(100%) !important;
    pointer-events: none !important;
}
.createCapsulePage.studio-dock aside#noteSection.drawer[aria-hidden="false"],
.createCapsulePage.studio-dock aside#studioDockDrawer.drawer[aria-hidden="false"],
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer][aria-hidden="false"],
body > [data-studio-dock-floating-drawer][aria-hidden="false"] {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}
.createCapsulePage.studio-dock .shell.settings-open #studioDockDrawer,
.createCapsulePage.studio-dock .shell.notes-open #noteSection.drawer {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}
.createCapsulePage.studio-dock aside#noteSection.drawer,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer="notes"],
body > [data-studio-dock-floating-drawer="notes"] {
    justify-content: flex-start;
    align-items: stretch;
}
.createCapsulePage.studio-dock .drawer .drawer-header,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-header,
body > [data-studio-dock-floating-drawer] .drawer-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sd-rule);
    flex: 0 0 auto;
    text-align: left;
}
.createCapsulePage.studio-dock .drawer .drawer-title,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-title,
body > [data-studio-dock-floating-drawer] .drawer-title {
    flex: 1 1 auto;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    text-align: left;
}
.createCapsulePage.studio-dock .drawer .drawer-close,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-close,
body > [data-studio-dock-floating-drawer] .drawer-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--sd-ink-60);
    font-size: 0;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.createCapsulePage.studio-dock .drawer .drawer-close i,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-close i,
body > [data-studio-dock-floating-drawer] .drawer-close i {
    display: block;
    font-size: var(--text-2xl-px);
    line-height: 1;
}
.createCapsulePage.studio-dock .drawer .drawer-close:hover,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-close:hover,
body > [data-studio-dock-floating-drawer] .drawer-close:hover {
    color: var(--sd-ink);
    background: var(--sd-ink-05);
}
.createCapsulePage.studio-dock .drawer .drawer-body,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-body,
body > [data-studio-dock-floating-drawer] .drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    text-align: left;
}
.createCapsulePage.studio-dock .drawer .drawer-body-notes,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-body-notes,
body > [data-studio-dock-floating-drawer] .drawer-body-notes {
    display: flex;
    flex-direction: column;
}
/* Neutralize the jQuery-Mobile popup chrome when RecordingSettingsPopupView
 * is rendered inline inside the drawer body. We want its inner template,
 * not the full popup overlay. */
.createCapsulePage.studio-dock .drawer .drawer-body .ui-popup-container,
.createCapsulePage.studio-dock .drawer .drawer-body .ui-popup-screen,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-body .ui-popup-container,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-body .ui-popup-screen,
body > [data-studio-dock-floating-drawer] .drawer-body .ui-popup-container,
body > [data-studio-dock-floating-drawer] .drawer-body .ui-popup-screen {
    display: none !important;
}
.createCapsulePage.studio-dock .drawer .drawer-body > *,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .drawer-body > *,
body > [data-studio-dock-floating-drawer] .drawer-body > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.createCapsulePage.studio-dock .studio-dock-settings,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-settings,
body > [data-studio-dock-floating-drawer] .studio-dock-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-field,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field {
    position: relative;
    margin-bottom: 18px;
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-field label,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field label,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-xs-px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-45) !important;
    text-align: left !important;
}
.createCapsulePage.studio-dock .studio-dock-setting-field select,
.createCapsulePage.studio-dock .studio-dock-setting-field .ui-select,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field select,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field select,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select {
    width: 100%;
}
.createCapsulePage.studio-dock .studio-dock-setting-field select.browser-default,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0 36px 0 12px;
    border: none;
    border-radius: 0;
    background-color: var(--sd-bg-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27><path d=%27M1 1L5 5L9 1%27 stroke=%27%23909090%27 stroke-width=%271.4%27 stroke-linecap=%27square%27/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    color: var(--sd-ink);
    font-family: inherit;
    font-size: var(--text-sm-px);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    -moz-text-align-last: left;
         text-align-last: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.createCapsulePage.studio-dock.lighttext .studio-dock-setting-field select.browser-default,
body.darkTheme .createCapsulePage.studio-dock .studio-dock-setting-field select.browser-default,
html.darkTheme .createCapsulePage.studio-dock .studio-dock-setting-field select.browser-default,
.createCapsulePage.studio-dock [data-studio-dock-theme="dark"] .studio-dock-setting-field select.browser-default,
body > [data-studio-dock-floating-drawer][data-studio-dock-theme="dark"] .studio-dock-setting-field select.browser-default {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27><path d=%27M1 1L5 5L9 1%27 stroke=%27%23b8b8b8%27 stroke-width=%271.4%27 stroke-linecap=%27square%27/></svg>");
}
.createCapsulePage.studio-dock .studio-dock-setting-field select.browser-default:hover,
.createCapsulePage.studio-dock .studio-dock-setting-field select.browser-default:focus,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default:hover,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default:focus,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default:hover,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field select.browser-default:focus {
    background-color: var(--sd-ink-05);
    box-shadow: inset 0 0 0 1px var(--sd-primary-15);
}
.createCapsulePage.studio-dock .studio-dock-setting-field .ui-select .ui-btn,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn {
    min-height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--text-sm-px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    border: none;
    background: var(--sd-bg-soft);
    color: var(--sd-ink);
    box-shadow: none;
    border-radius: 0;
    text-align: left;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.createCapsulePage.studio-dock .studio-dock-setting-field .ui-select .ui-btn:hover,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn:hover,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn:hover {
    background-color: var(--sd-ink-05);
    box-shadow: inset 0 0 0 1px var(--sd-primary-15);
}
.createCapsulePage.studio-dock .studio-dock-setting-field .ui-select .ui-btn > span,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn > span,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-field .ui-select .ui-btn > span {
    color: inherit;
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-toggle,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-toggle,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--sd-rule);
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-toggle.studio-dock-setting-toggle-first,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-toggle.studio-dock-setting-toggle-first,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-toggle.studio-dock-setting-toggle-first {
    padding-top: 0;
    border-top: none;
}
.createCapsulePage.studio-dock .studio-dock-setting-copy,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-copy,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-copy {
    min-width: 0;
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-title,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-title,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-title {
    font-size: var(--text-sm-px);
    font-weight: 600;
    color: var(--sd-ink);
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-setting-hint,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-hint,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-hint {
    margin-top: 2px;
    font-size: var(--text-xs-px);
    line-height: 1.45;
    color: var(--sd-ink-60);
    text-align: left;
}
.createCapsulePage.studio-dock .studio-dock-switch,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch,
body > [data-studio-dock-floating-drawer] .studio-dock-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 0;
    border: none;
    border-radius: 999px;
    background: var(--sd-ink-10);
    box-shadow: inset 0 0 0 1px var(--sd-ink-05);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.createCapsulePage.studio-dock .studio-dock-switch::after,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch::after,
body > [data-studio-dock-floating-drawer] .studio-dock-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.25);
    transition: transform 0.2s ease;
}
.createCapsulePage.studio-dock .studio-dock-switch.is-on,
.createCapsulePage.studio-dock .studio-dock-switch[aria-pressed="true"],
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch.is-on,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch[aria-pressed="true"],
body > [data-studio-dock-floating-drawer] .studio-dock-switch.is-on,
body > [data-studio-dock-floating-drawer] .studio-dock-switch[aria-pressed="true"] {
    background: var(--sd-primary);
    box-shadow: none;
}
.createCapsulePage.studio-dock .studio-dock-switch.is-on::after,
.createCapsulePage.studio-dock .studio-dock-switch[aria-pressed="true"]::after,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch.is-on::after,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-switch[aria-pressed="true"]::after,
body > [data-studio-dock-floating-drawer] .studio-dock-switch.is-on::after,
body > [data-studio-dock-floating-drawer] .studio-dock-switch[aria-pressed="true"]::after {
    transform: translateX(16px);
}
.createCapsulePage.studio-dock .studio-dock-setting-note,
.createCapsulePage.studio-dock [data-studio-dock-floating-drawer] .studio-dock-setting-note,
body > [data-studio-dock-floating-drawer] .studio-dock-setting-note {
    padding: 14px 16px;
    background: var(--sd-bg-soft);
    border: none;
    box-shadow: inset 0 0 0 1px var(--sd-ink-05);
    font-size: var(--text-xs-px);
    line-height: 1.5;
    color: var(--sd-ink-60);
    text-align: left;
}

.full-width-upload .ant-upload-wrapper {
    width: 100%;
}

.full-width-upload .ant-upload {
    width: 100%;
} 

/*# sourceMappingURL=common.css.map*/