/* Shared gallery controls and video workspace. */ #cvV3App .workspace.media-workspace { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) clamp(322px,29vw,390px); gap:18px; height:100dvh; min-height:0; padding:16px 18px 18px; background:#111110; } #cvV3App .media-board {padding:0 6px 32px 2px;scrollbar-width:thin;} #cvV3App .media-showcase { position:relative;display:flex;align-items:end;isolation:isolate;overflow:hidden; min-height:clamp(342px,53vh,490px);border-radius:15px; background:#1e221e; } #cvV3App .media-showcase-art {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;} #cvV3App .media-showcase::after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,#0a0b0a08 15%,#0b0a0860 48%,#080706f0 100%); } #cvV3App .media-showcase-copy {padding:26px 28px 36px;} #cvV3App .media-showcase h1 {font-size:clamp(36px,4vw,56px);line-height:1.04;font-weight:600;letter-spacing:-.035em;color:#fff7ea;} #cvV3App .media-showcase p {max-width:43ch;margin:12px 0 19px;color:#f1ece2;font-size:14px;line-height:1.55;} #cvV3App .video-feature { min-height:clamp(278px,49dvh,480px); border:1px solid #3c352a; background:#171513; } #cvV3App .video-feature .media-showcase-copy {padding:24px 25px 28px;} #cvV3App .video-feature p {margin:8px 0 14px;} #cvV3App .video-feature .subtle-button { display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 13px; background:#191714eb;border:1px solid #8b7653;color:#fff2d8;font-size:13px; } #cvV3App .video-feature .subtle-button:hover {background:#3a2f1c;border-color:#e4c782;} #cvV3App .video-feature-nav { position:absolute;right:18px;bottom:26px;display:flex;align-items:center;gap:2px; } #cvV3App .video-feature-nav button { display:grid;place-items:center;width:24px;height:26px;border-radius:8px; } #cvV3App .video-feature-nav button::before { content:"";width:7px;height:7px;border-radius:5px;background:#f9eed0a3; box-shadow:0 1px 6px #0008;transition:width 160ms ease,background-color 160ms ease; } #cvV3App .video-feature-nav button[aria-pressed="true"]::before {width:17px;background:#f0d392;} #cvV3App .video-collection {margin-top:24px;min-width:0;} #cvV3App .video-collection-head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} #cvV3App .video-collection h2 { margin:0;color:#f0e9dd;font-size:20px;line-height:1.25;font-weight:550;letter-spacing:-.02em; } .video-row-controls {display:flex;align-items:center;gap:6px;flex:none;} #cvV3App .video-icon-button,#cvV3Dialog .video-icon-button { display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px; border:1px solid #484032;background:#211e19;color:#e8d4a8; transition:border-color 150ms ease,background-color 150ms ease; } #cvV3App .video-icon-button .icon,#cvV3Dialog .video-icon-button .icon {width:16px;height:16px;} #cvV3App .video-icon-button:disabled {opacity:.36;cursor:default;} #cvV3App .video-icon-button:not(:disabled):hover,#cvV3Dialog .video-icon-button:hover {background:#34291b;border-color:#9b7d48;} #cvV3App .video-example-rail { --video-card-height:clamp(110px,24cqw,190px); display:flex;gap:10px; padding:3px 3px 8px;margin:-3px -3px 0;overflow:auto hidden; overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#5b5140 transparent; user-select:none; } #cvV3App .video-example-rail.is-dragging,#cvV3App .video-example-rail.is-dragging button {cursor:grabbing;} #cvV3App .video-example { align-self:start;flex:0 0 calc(var(--video-card-height) * 1.6);min-width:0;padding:0; text-align:left;color:#f2ece2; } #cvV3App .video-example-portrait {flex-basis:calc(var(--video-card-height) * .74);} #cvV3App .video-example-portrait video {object-fit:contain;background:#111;} #cvV3App .media-workspace[data-kind="video"] .media-board {container-type:inline-size;} #cvV3App .video-example-media { position:relative;display:block;overflow:hidden;height:var(--video-card-height); border:1px solid #ffffff18;border-radius:12px;background:#28241f; transition:border-color 180ms ease; } #cvV3App .video-example:hover .video-example-media {border-color:#b19a65;} #cvV3App .video-example-media :is(img,video) { display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover; pointer-events:none; } #cvV3App .video-example-media video {opacity:0;transition:opacity 230ms ease;} #cvV3App .video-example-media video.is-playing {opacity:1;} #cvV3App .video-example-play { position:absolute;bottom:9px;right:9px;display:grid;place-items:center;width:31px;height:31px; border:1px solid #e7c88759;border-radius:50%;background:#16130fdd;color:#f0dcae; } #cvV3App .video-example-play .icon {width:15px;height:15px;} @media (max-width:740px){ #cvV3App .video-feature .media-showcase-copy {padding:20px 16px 46px;} #cvV3App .video-feature-nav {bottom:10px;right:13px;} } #cvV3Dialog[data-kind="media-example"] { width:min(820px,calc(100vw - 40px));border-radius:16px;border-color:#4a4033;background:#191714; } #cvV3Dialog[data-kind="media-example"] .dialog-head { align-items:center;padding:16px 20px;background:#191714;border-bottom:1px solid #363029; } #cvV3Dialog[data-kind="media-example"] .dialog-head .icon-button { flex:none;width:36px;height:36px;border:1px solid #464036;background:#24211c;color:#ded4c3; } #cvV3Dialog[data-kind="media-example"] .dialog-head .icon-button:hover {background:#302a21;color:#fff5df;} #cvV3Dialog[data-kind="media-example"] .dialog-body {padding:16px 20px 20px;} #cvV3Dialog[data-kind="media-example"] .detail-media, #cvV3Dialog[data-kind="media-example"] .detail-media :is(img,video) {max-height:53dvh;border-radius:10px;} #cvV3Dialog .example-actions { display:flex;align-items:center;flex-wrap:wrap;gap:10px; margin-top:16px;padding-top:14px;border-top:1px solid #3b342a; } #cvV3Dialog .example-action { display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:42px;padding:9px 13px;border:1px solid #584c3a;border-radius:8px; background:#22201b;color:#e7decd;font-size:13px;font-weight:550; transition:background-color 150ms ease,border-color 150ms ease; } #cvV3Dialog .example-action .icon {width:16px;height:16px;} #cvV3Dialog .example-action:hover {background:#322a20;border-color:#8d744c;} #cvV3Dialog .example-action[aria-pressed="true"] {border-color:#987b49;color:#edcf8f;} #cvV3Dialog .example-action-primary {margin-inline-start:auto;background:#e4c782;border-color:#e4c782;color:#21190c;} #cvV3Dialog .example-action-primary:hover {background:#f0d79b;border-color:#f0d79b;color:#21190c;} @media (prefers-reduced-motion:no-preference) { #cvV3Dialog[open][data-kind="media-example"] {animation:media-example-open 210ms cubic-bezier(.2,.75,.25,1);} #cvV3Dialog[open][data-kind="media-example"]::backdrop {animation:media-example-backdrop 180ms ease-out;} } @keyframes media-example-open {from {opacity:.5;transform:translateY(8px) scale(.99);} to {opacity:1;transform:none;}} @keyframes media-example-backdrop {from {opacity:0;} to {opacity:1;}} #cvV3App .media-editor {min-width:0;min-height:0;overflow:hidden;border:1px solid #39332b;border-radius:15px;background:#191816;} #cvV3App .media-editor-scroll {height:100%;overflow:auto;scrollbar-width:thin;scrollbar-gutter:stable;} #cvV3App .media-model-toolbar { display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5; padding:12px;border-bottom:1px solid #342e26;background:#191816; } #cvV3App .media-model-toolbar>span {font-size:12px;color:#c8bfaf;} #cvV3App .media-model-toolbar .model-menu {flex:1;} #cvV3App .media-model-toolbar .model-select {min-height:38px;padding:8px 10px;} #cvV3App .media-editor #live-model-host {padding:12px;min-height:0;} #cvV3App .media-editor #live-model-host .settings-sections {gap:14px!important;} #cvV3App .media-editor #live-model-host :is(.desktop-model-primary,.desktop-model-options,.desktop-model-sources,.desktop-parameter-fields) {display:grid;gap:12px;} #cvV3App .media-editor #live-model-host .desktop-model-options {padding-top:12px;} #cvV3App .media-editor #live-model-host .desktop-model-mode :is(.sd-choice,.cv-photo-mode-option) { min-height:35px!important;padding:7px 5px!important;font-size:12px!important; } #cvV3App .media-editor #live-model-host .cv-photo-mode-switch.is-three .cv-photo-mode-option svg {display:none;} #cvV3App .media-editor #live-model-host textarea.ai-prompt-box {height:132px!important;min-height:112px!important;} #cvV3App .media-editor #live-model-host :is(.sd-upload-area,.kp-upload) {min-height:74px!important;padding:9px!important;} #cvV3App .media-workspace[data-kind="video"] .sd-files:has(>.sd-file-image) { grid-template-columns:minmax(0,1fr); } #cvV3App .media-workspace[data-kind="video"] .sd-file-image { display:grid;grid-template-columns:56px minmax(0,1fr);gap:9px;padding:6px; } #cvV3App .media-workspace[data-kind="video"] .sd-file-image .sd-file-preview { width:56px;height:56px;border-radius:5px; } #cvV3App .media-workspace[data-kind="video"] .sd-file-image .sd-file-info { grid-template-columns:minmax(0,1fr) 32px;gap:6px;padding:0; } #cvV3App .media-workspace[data-kind="video"] .sd-file-image .sd-file-copy {padding:0;} #cvV3App .media-workspace[data-kind="video"] .sd-file-image .sd-file-copy small { margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #cvV3App .media-workspace[data-kind="video"] .sd-file-image .sd-file-remove {width:32px;height:36px;} #cvV3App .media-editor #live-model-host .media-source-entry { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; width:100%;min-height:92px;padding:10px;border:1px dashed #6c5a3c;border-radius:10px; background:#211d17;color:#e9d7ad;font-size:13px; } #cvV3App .media-editor #live-model-host .media-source-entry::before { content:"";width:24px;height:24px;background:currentColor; mask:url('/studio-v3/assets/icons/upload.svg') center/contain no-repeat; } #cvV3App .media-editor #live-model-host .media-source-entry:hover {border-color:#bfa56e;background:#2b2318;} #cvV3App .media-editor #live-model-host .launch-dock { position:sticky!important;bottom:0!important;z-index:3; padding:12px 0 0!important;background:#191816!important; } /* Keep both creation screens inside the viewport. */ html.cv-studio-v3:has(:is(.media-workspace,.photo-tool-workspace)), html.cv-studio-v3:has(:is(.media-workspace,.photo-tool-workspace)) body {min-width:0;} html.cv-studio-v3:has(:is(.media-workspace,.photo-tool-workspace)) #cvV3App {position:fixed!important;inset:0;} /* In Images the examples fill the canvas and the editor floats below them. */ #cvV3App .workspace.photo-workspace { grid-template-columns:minmax(0,1fr);gap:0;padding:0;background:#090909; } #cvV3App .photo-workspace .media-board {padding:0 0 190px;overscroll-behavior:contain;} #cvV3App .photo-showcase { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:14px;padding:12px 20px 24px;min-width:0; } #cvV3App .photo-showcase[data-interactive] { display:block;position:relative;height:100dvh;min-height:250px; overflow:clip;padding:0;contain:layout paint;touch-action:none;user-select:none;cursor:grab; } #cvV3App .photo-workspace .media-board:has(.photo-showcase[data-interactive]) {padding:0;overflow:hidden;} #cvV3App .photo-showcase[data-dragging], #cvV3App .photo-showcase[data-dragging] .photo-example {cursor:grabbing;} #cvV3App .photo-example { position:relative;display:block;overflow:hidden;text-align:left;aspect-ratio:3/2; min-width:0;border:1px solid #ffffff18;border-radius:14px;padding:0;background:#25211c; } #cvV3App .photo-showcase[data-interactive] .photo-example { position:absolute;top:0;left:0;width:var(--photo-tile-width); } #cvV3App .photo-showcase[data-interactive] .photo-example[hidden] {display:none;} #cvV3App .photo-example img {display:block;width:100%;height:100%;object-fit:cover;transition:scale 250ms ease-out;} #cvV3App .photo-showcase[data-interactive] .photo-example img {transform:scale(var(--photo-cover-x,1),var(--photo-cover-y,1));} #cvV3App .photo-showcase:not([data-dragging]) .photo-example:hover img {scale:1.04;} #cvV3App .photo-example:focus-visible {outline-offset:-3px;z-index:1;} #cvV3App .photo-example-caption { position:absolute;inset:auto 0 0;padding:32px 12px 11px; display:flex;justify-content:space-between;align-items:end;gap:6px; color:#fff8e9;background:linear-gradient(transparent,#130e0ae8);line-height:1.2; } #cvV3App .photo-example-caption strong {font-size:clamp(12px,1.1vw,15px);font-weight:600;overflow-wrap:anywhere;} #cvV3App .photo-example-arrow { display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #d8bc7c50; border-radius:6px;background:#201811c9;color:#f1d797;opacity:0;transition:opacity 160ms ease; } #cvV3App .photo-example-arrow .icon {width:13px;height:13px;} #cvV3App .photo-example:is(:hover,:focus-visible) .photo-example-arrow {opacity:1;} #cvV3App .photo-example[data-compressed] .photo-example-caption {visibility:hidden;} @media (prefers-reduced-motion:reduce) { #cvV3App .photo-example img {transition:none;} } #cvV3App .photo-workspace::after { content:"";position:absolute;inset:auto 0 0;height:min(35%,290px);z-index:2; background:linear-gradient(transparent,#090909 87%);pointer-events:none; } #cvV3App .photo-workspace .media-editor { position:absolute;inset:auto 0 14px;z-index:3;overflow:visible;container-type:inline-size; width:min(720px,calc(100% - 32px));margin-inline:auto; border-color:#4c4233;border-radius:16px;background:#1b1916; box-shadow:0 14px 36px #000a; } #cvV3App .photo-workspace .media-editor-scroll {height:auto;overflow:visible;scrollbar-gutter:auto;} #cvV3App .photo-workspace .media-model-toolbar { position:relative;display:flex;padding:10px 168px 0 12px;border:0;background:transparent;pointer-events:none; } #cvV3App .photo-workspace .media-model-toolbar .model-menu {flex:none;width:max-content;max-width:100%;pointer-events:auto;} #cvV3App .photo-workspace .media-model-toolbar .model-select { min-height:32px;padding:4px 7px;gap:7px;border-color:#494034;background:#242018; } #cvV3App .photo-workspace .model-title strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; } #cvV3App .photo-workspace .model-select>.icon {width:12px;height:12px;} #cvV3App .photo-model-icon { display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:5px; color:#e6cb8e;background:#e2c47d16; } #cvV3App .photo-model-icon .icon {width:13px;height:13px;} #cvV3App .photo-workspace .model-menu-popover { top:auto;right:auto;bottom:calc(100% + 9px);width:min(248px,65vw);padding:5px; } #cvV3App .photo-workspace .model-menu .search-input {margin-bottom:4px;padding:5px 7px;min-height:30px;} #cvV3App .photo-workspace .model-menu .search-input input {font-size:12px;} #cvV3App .photo-workspace .model-list { max-height:min(258px,36dvh,max(60px,calc(var(--photo-space-above,290px) - 84px))); scrollbar-width:thin; } #cvV3App .photo-workspace .model-option {justify-content:flex-start;gap:7px;min-height:32px;padding:4px 6px;font-size:12px;} #cvV3App .photo-workspace .model-option-name {flex:1;min-width:0;overflow-wrap:anywhere;} #cvV3App .photo-model-price {flex:none;white-space:nowrap;color:#ddc596;font-size:11px;font-variant-numeric:tabular-nums;} #cvV3App .photo-workspace .model-option>.icon {width:13px;height:13px;flex:none;} #cvV3App .photo-workspace #live-model-host {overflow:visible;padding:9px 12px 11px;} #cvV3App .photo-workspace #live-model-host .settings-sections {gap:0!important;} #cvV3App .photo-workspace #live-model-host .desktop-model-primary {gap:8px;} #cvV3App .photo-composer-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px; } #cvV3App .photo-composer-row>.settings-card {grid-column:1;grid-row:1;min-width:0;} #cvV3App .photo-workspace #live-model-host [data-kind="prompt"]>.settings-card-head { position:absolute;width:1px!important;height:1px!important;margin:-1px!important; overflow:hidden;clip-path:inset(50%);white-space:nowrap; } #cvV3App .photo-workspace #live-model-host textarea.ai-prompt-box { box-sizing:border-box!important;height:44px!important;min-height:44px!important;max-height:min(108px,18dvh)!important; padding:10px 11px!important;border-color:#3d352a!important;background:#141210!important; line-height:22px!important;font-size:14px!important;resize:none!important; } #cvV3App .photo-workspace #live-model-host textarea.ai-prompt-box:focus { outline:none;border-color:#9b8053!important; } @supports (field-sizing:content) { #cvV3App .photo-workspace #live-model-host textarea.ai-prompt-box:not(:placeholder-shown) {height:auto!important;field-sizing:content;} } #cvV3App .photo-workspace #live-model-host .prompt-tools {display:none!important;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources { display:flex;flex-wrap:wrap;gap:6px;max-height:min(72px,13dvh);overflow:auto;scrollbar-width:thin; } #cvV3App .photo-workspace #live-model-host .photo-inline-sources:not(:has(.kp-file)), #cvV3App .photo-workspace #live-model-host .photo-inline-sources :is(.settings-card-head,.upload-grid,.kp-hint,.kp-file small) { display:none!important; } #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-files {display:flex;flex-wrap:wrap;gap:6px;margin:0;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-file { position:relative;display:block;flex:none;width:50px;height:42px;min-width:0;padding:0;border-radius:6px;overflow:hidden; } #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-file img {width:100%;height:100%;object-fit:cover;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-file button { position:absolute;top:2px;right:2px;display:grid;place-items:center; width:18px;height:18px;min-width:0;min-height:0;padding:0;border-radius:4px;background:#16130fe8;color:#fff4dd; } #cvV3App .photo-workspace #live-model-host .desktop-model-options {gap:0;padding:0;border:0;} #cvV3App .photo-workspace #live-model-host .desktop-model-options>.kp-hint:empty {display:none!important;} #cvV3App .photo-workspace #live-model-host .desktop-model-options>.kp-error:not(:empty) {margin-top:7px;} #cvV3App .photo-dock-tools {position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;} #cvV3App :is(.photo-upload-control,.photo-dock-settings>summary) { display:inline-flex;align-items:center;justify-content:center;gap:6px;list-style:none;cursor:pointer; min-height:32px;padding:5px 7px;border:1px solid #4c4234;border-radius:7px; color:#e9dcc3;background:#24201a;font-size:12px;white-space:nowrap; } #cvV3App :is(.photo-upload-control,.photo-dock-settings>summary):hover {border-color:#9d8252;background:#30271a;} #cvV3App .photo-upload-control {font-variant-numeric:tabular-nums;} #cvV3App .photo-upload-control:disabled {cursor:default;opacity:.6;} #cvV3App .photo-upload-control .icon {width:14px;height:14px;color:#e3c477;} #cvV3App .photo-dock-settings>summary::before { content:"";width:14px;height:14px;background:#e3c477; mask:url('/studio-v3/assets/icons/adjustments-horizontal.svg') center/contain no-repeat; } #cvV3App .photo-dock-settings>summary::-webkit-details-marker {display:none;} #cvV3App .photo-dock-settings[open]>summary {border-color:#987b49;background:#2a2319;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel { position:absolute;right:0;bottom:calc(100% + 18px);z-index:2; display:flex;flex-direction:column;width:min(344px,calc(100cqw - 24px)); max-height:min(560px,max(80px,calc(var(--photo-space-above,320px) - 25px))); box-sizing:border-box;min-width:0;overflow:hidden; border:1px solid #594a36;border-radius:12px;background:#1b1916;box-shadow:0 12px 30px #0009; } #cvV3App .photo-settings-head { display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px; padding:6px 9px 6px 12px;border-bottom:1px solid #3b332a; } #cvV3App .photo-settings-head h2 {margin:0;color:#f3eee4;font-size:13px;font-weight:600;} #cvV3App .photo-settings-head button {display:grid;place-items:center;width:29px;height:29px;border-radius:6px;color:#d9c7a8;} #cvV3App .photo-settings-head button:hover {background:#30281d;} #cvV3App .photo-settings-head svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel>.photo-settings-scroll { min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable; scrollbar-color:#9d8453 #27221b;scroll-padding-block:12px 20px; } #cvV3App .photo-workspace #live-model-host .photo-settings-panel .desktop-parameter-fields { min-width:0;grid-template-columns:minmax(0,1fr);padding:11px 12px 20px; } #cvV3App .photo-workspace #live-model-host .photo-settings-panel .cv-photo-mode-switch.is-three {grid-template-columns:repeat(2,minmax(0,1fr))!important;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel .cv-photo-mode-switch.is-three>button:last-child {grid-column:1/-1;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel .cv-photo-mode-switch.is-three svg {display:block;width:14px;height:14px;flex:none;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel :is(.control-grid,.cv-photo-mode-switch,.settings-card-body) { box-sizing:border-box!important;min-inline-size:0!important;max-inline-size:100%!important; } #cvV3App .photo-workspace #live-model-host .photo-settings-panel :is(.choice-button,.cv-photo-mode-option) { box-sizing:border-box!important;min-inline-size:0!important;max-inline-size:100%!important; min-height:32px!important;padding:5px 6px!important;overflow-wrap:anywhere!important; } #cvV3App .photo-workspace #live-model-host .photo-settings-panel .kp-choice-grid {grid-auto-rows:minmax(32px,auto)!important;} #cvV3App .photo-workspace #live-model-host .photo-settings-panel :is(.choice-button,.cv-photo-mode-option) :is(span,strong) { overflow-wrap:anywhere!important; } #cvV3App .photo-dock-settings:not([open]) .photo-settings-panel {display:none!important;} #cvV3App .photo-workspace #live-model-host .launch-dock { position:static!important;grid-column:2;grid-row:1;align-items:center;justify-content:flex-end; border:0!important;padding:0!important;background:none!important; } #cvV3App .photo-workspace #live-model-host .launch-button { display:flex!important;align-items:center;justify-content:center; width:auto!important;min-width:0;height:44px!important;min-height:44px!important;padding:7px 11px!important;gap:8px; border-radius:8px!important;white-space:nowrap; } #cvV3App .photo-workspace #live-model-host .launch-button .photo-run-price { padding-inline-start:8px;border-inline-start:1px solid #45351d52; font-size:12px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums; } #cvV3App .photo-workspace #live-model-host .launch-button svg {width:16px;height:16px;flex:none;} @media (max-width:700px) { #cvV3App .photo-workspace .media-editor {width:calc(100% - 20px);} #cvV3App .photo-workspace #live-model-host .launch-button svg {display:none;} } #cvV3Dialog[data-kind="photo-example"] { width:min(1100px,calc(100vw - 40px));max-height:calc(100dvh - 40px);max-width:none; border-color:#4b4134;border-radius:15px;background:#1b1916; } #cvV3Dialog[data-kind="photo-example"] .dialog-head { padding:10px 16px;align-items:center;border-bottom:1px solid #3c342a;background:#1b1916; } #cvV3Dialog[data-kind="photo-example"] .dialog-head h2 {font-size:16px;} #cvV3Dialog[data-kind="photo-example"] .dialog-body {padding:0;} #cvV3Dialog .photo-example-view { display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,29%); min-height:0; } #cvV3Dialog .photo-example-stage { display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0; } #cvV3Dialog .photo-example-stage .detail-media { margin:0;border:0;border-radius:0;background:#100f0e; height:clamp(230px,56dvh,680px); } #cvV3Dialog .photo-example-stage .detail-media img { display:block;width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0; } #cvV3Dialog .photo-example-details { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 16px;padding:14px 16px 16px; } #cvV3Dialog .photo-example-details h3,#cvV3Dialog .photo-example-library h3 {margin:0;color:#f5ecde;font-size:14px;} #cvV3Dialog .photo-example-details .detail-prompt { grid-column:1;max-height:106px;overflow:auto;scrollbar-width:thin;margin:0; color:#cfc4b2;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere; } #cvV3Dialog .photo-example-details .example-actions {grid-column:2;grid-row:1/3;gap:6px;margin:0;padding:0;border:0;} #cvV3Dialog .photo-example-details .example-actions button {min-height:36px;padding:7px 9px;white-space:nowrap;} #cvV3Dialog .photo-example-library {display:flex;flex-direction:column;min-width:0;min-height:0;border-inline-start:1px solid #3c342a;} #cvV3Dialog .photo-example-library>header {display:grid;gap:8px;padding:12px;border-bottom:1px solid #3c342a;} #cvV3Dialog .photo-example-categories {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;} #cvV3Dialog .photo-example-categories button { min-width:0;min-height:30px;padding:5px 7px;border:1px solid #4c4133;border-radius:6px; color:#e7dccc;background:#242018;font-size:12px; } #cvV3Dialog .photo-example-categories button[aria-pressed="true"] {border-color:#b09153;background:#3b2f1a;color:#f4d590;} #cvV3Dialog .photo-example-browser {min-height:0;max-height:58dvh;overflow:auto;scrollbar-width:thin;padding:10px;} #cvV3Dialog .photo-example-thumbs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;} #cvV3Dialog .photo-example-thumbs button { display:block;min-width:0;padding:0;overflow:hidden;aspect-ratio:1;border:1px solid transparent;border-radius:6px;background:#15130f; } #cvV3Dialog .photo-example-thumbs button[aria-pressed="true"] {border-color:#f0cd87;box-shadow:0 0 0 1px #f0cd87;} #cvV3Dialog .photo-example-thumbs img {display:block;width:100%;height:100%;object-fit:cover;} #cvV3Dialog [data-photo-example-more] {display:flex;margin:10px 0 0;width:100%;} @media (max-width:740px) { #cvV3Dialog .photo-example-view {grid-template-columns:minmax(0,1fr);} #cvV3Dialog .photo-example-library {border-inline-start:0;border-top:1px solid #3c342a;} #cvV3Dialog .photo-example-browser {max-height:32dvh;} #cvV3Dialog .photo-example-thumbs {grid-template-columns:repeat(auto-fill,minmax(72px,1fr));} } @media (max-width:480px) { #cvV3Dialog .photo-example-details {grid-template-columns:minmax(0,1fr);} #cvV3Dialog .photo-example-details .example-actions {grid-column:1;grid-row:auto;justify-content:flex-end;} } /* Video example viewer and model picker. */ #cvV3Dialog[data-kind="video-example"] { width:min(1120px,calc(100vw - 32px));border-color:#4a4033;background:#191714; } #cvV3Dialog[data-kind="video-example"] .dialog-head { align-items:center;padding:14px 17px;background:#191714;border-color:#383229; } #cvV3Dialog[data-kind="video-example"] .dialog-head .icon-button { flex:none;width:34px;height:34px;border:1px solid #464036;background:#24211c; } #cvV3Dialog[data-kind="video-example"] .dialog-body {padding:14px;} #cvV3Dialog .video-detail { display:grid;grid-template-columns:minmax(0,1fr) minmax(268px,33%);gap:14px; min-width:0;min-height:0; } #cvV3Dialog .video-detail-player { position:relative;display:grid;place-items:center; height:clamp(190px,65dvh,640px);overflow:hidden;border-radius:11px;background:#080808; } #cvV3Dialog .video-detail-player :is(video,img) {width:100%;height:100%;min-height:0;object-fit:contain;} #cvV3Dialog .video-detail-error { position:absolute;left:12px;right:12px;bottom:54px;padding:10px;border-radius:8px; background:#191714e8;color:#f5e6cc;font-size:13px;text-align:center; } #cvV3Dialog .video-detail-side { display:flex;flex-direction:column;gap:13px;min-width:0; max-height:clamp(190px,65dvh,640px);padding:12px;border:1px solid #373127; border-radius:11px;background:#1f1c17; } #cvV3Dialog .video-detail-browser { display:flex;align-items:center;justify-content:space-between;gap:8px; padding-bottom:11px;border-bottom:1px solid #42382b; } #cvV3Dialog .video-detail-browser span {display:block;font-size:14px;font-weight:600;} #cvV3Dialog .video-detail-browser small {display:block;margin-top:3px;color:#c2b69e;font-size:11px;font-variant-numeric:tabular-nums;} #cvV3Dialog .video-detail-copy { min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:5px; } #cvV3Dialog .video-detail-copy h3 {margin:0 0 8px;color:#edcf8f;font-size:12px;font-weight:600;} #cvV3Dialog .video-detail-prompt { color:#eee5d5;font-size:14px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap; } #cvV3Dialog .video-detail-references {margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #42382b;} #cvV3Dialog .video-detail-references header {display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;} #cvV3Dialog .video-detail-references h3 {margin:0;} #cvV3Dialog .video-detail-references header button { border:1px solid #4e4130;border-radius:6px;padding:4px 7px;color:#e3c99a;font-size:11px; } #cvV3Dialog .video-reference-strip {display:flex;gap:6px;} #cvV3Dialog .video-reference-strip button { flex:0 1 108px;min-width:0;padding:3px;border:1px solid #4e4130;border-radius:8px; background:#171510;text-align:left; } #cvV3Dialog .video-detail-references button:hover {border-color:#b5955b;} #cvV3Dialog .video-detail-references button[aria-pressed="true"] {border-color:#b5955b;background:#3c301c;} #cvV3Dialog .video-reference-strip :is(img,video) { display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;background:#272219;pointer-events:none; } #cvV3Dialog .video-reference-strip span {display:block;padding:4px 2px 1px;color:#e8dbc3;font-size:10px;line-height:1.3;} #cvV3Dialog .video-detail-note {margin-top:8px;color:#c1b49c;font-size:12px;line-height:1.55;} #cvV3Dialog .video-detail-footer {margin-top:auto;padding-top:10px;border-top:1px solid #42382b;} #cvV3Dialog .video-detail-status:not(:empty) {margin-bottom:9px;color:#d4c5a8;font-size:12px;line-height:1.45;} #cvV3Dialog .video-detail-footer button {width:100%;} #cvV3App .video-model-select {width:100%;text-align:left;} #cvV3App .video-model-select .model-title {flex:1;min-width:0;} .video-model-icon { flex:none;display:grid;place-items:center;width:28px;height:28px; border:1px solid #524634;border-radius:8px;background:#2b251b;color:#e9cc90; } .video-model-icon .icon {width:15px;height:15px;} .video-model-icon:is([data-family="kling"],[data-family="veo"],[data-family="wan"]) {background:#31271b;color:#f0dbab;} .video-model-icon:is([data-family="gemini"],[data-family="grok"],[data-family="pixverse"]) {background:#22201e;color:#efe3cc;} #cvV3App .media-workspace[data-kind="video"] .media-editor {container-type:size;} #cvV3App .video-model-panel { position:absolute;inset:calc(100% + 7px) 0 auto;z-index:10; display:flex;flex-direction:column;max-height:min(470px,calc(100cqh - 76px));overflow:hidden; border:1px solid #655437;border-radius:12px;background:#191714;box-shadow:0 14px 26px #0008; } #cvV3App .video-model-menu:not([open]) .video-model-panel {display:none;} #cvV3App .video-model-panel .video-model-controls {flex:none;display:grid;gap:10px;padding:12px 13px;border-bottom:1px solid #353026;} #cvV3App .video-model-menu .video-model-controls .search-input { min-height:38px;margin:0;border-color:#494034;padding:7px 9px;color:#d0c3ae; } #cvV3App .video-model-panel .video-model-controls input {font-size:13px;} #cvV3App .model-sort-controls { display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:5px; } #cvV3App .model-sort-controls button { padding:5px 4px;min-height:32px;border:1px solid #40382b;border-radius:7px; color:#c9bea9;font-size:11px;background:#221e18; } #cvV3App .model-sort-controls button[aria-pressed="true"] {background:#3d301b;border-color:#8c7247;color:#f3d698;} #cvV3App .model-sort-controls button:hover {border-color:#a88b55;} #cvV3App .photo-workspace .model-sort-controls {grid-template-columns:1.5fr 1fr 1fr;margin-bottom:4px;} #cvV3App .photo-workspace .model-sort-controls button {min-height:28px;padding:3px 4px;} #cvV3App .video-model-panel .video-model-list { overflow:auto;min-height:0;padding:8px 11px 12px;overscroll-behavior:contain;scrollbar-width:thin; } #cvV3App .video-model-panel .video-model-option { width:100%;display:grid;align-items:center;grid-template-columns:auto minmax(0,1fr) auto 14px; gap:9px;min-height:49px;margin:2px 0;padding:7px 8px;border:1px solid transparent; border-radius:9px;text-align:left; } #cvV3App .video-model-panel .video-model-option:hover {background:#28231b;} #cvV3App .video-model-panel .video-model-option[aria-pressed="true"] {border-color:#9d824c;background:#352b1d;} #cvV3App .video-model-panel .video-model-name {display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;font-weight:560;overflow-wrap:anywhere;} #cvV3App .video-model-panel .video-model-popular { padding:2px 5px;border:1px solid #9676405e;border-radius:5px;background:#59401e80; color:#f5d695;font-size:10px;font-weight:500;line-height:1.15; } #cvV3App .video-model-panel .video-model-price {color:#ddc596;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;} #cvV3App .video-model-panel .video-model-check .icon {width:14px;height:14px;color:#eed18b;} @media (max-width:680px) { #cvV3Dialog .video-detail {grid-template-columns:minmax(0,1fr);} #cvV3Dialog .video-detail-player {height:clamp(190px,48dvh,460px);} #cvV3Dialog .video-detail-side {max-height:none;} } @media (prefers-reduced-motion:no-preference) { #cvV3Dialog[open][data-kind="video-example"] {animation:media-example-open 210ms cubic-bezier(.2,.75,.25,1);} #cvV3App .video-model-menu[open] .video-model-panel { animation:video-model-picker-open 250ms cubic-bezier(.16,1,.3,1); } } @keyframes video-model-picker-open { from {opacity:0;clip-path:inset(0 0 80% round 12px);transform:translateY(-5px);} to {opacity:1;clip-path:inset(0 0 0 round 12px);transform:translateY(0);} } /* Image composer: prompt on top; model, uploads, parameters and price below. */ #cvV3App .photo-workspace .media-editor {width:min(800px,calc(100% - 32px));border:1px solid #45413a;border-radius:22px;background:#202020;box-shadow:0 12px 36px #0008;} #cvV3App .photo-workspace .media-editor-scroll {position:relative;} #cvV3App .photo-workspace .media-model-toolbar {position:absolute;inset:auto auto 12px 12px;height:34px;align-items:center;max-width:calc(100% - 370px);padding:0;z-index:4;} #cvV3App .photo-workspace .media-model-toolbar .model-select {background:transparent;border:0;min-height:34px;} #cvV3App .photo-workspace #live-model-host {padding:13px 14px 12px;} #cvV3App .photo-composer-row {display:block;padding-bottom:48px;} #cvV3App .photo-workspace #live-model-host .photo-composer-row .launch-dock {position:absolute!important;inset:auto 14px 12px auto!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;} #cvV3App .photo-workspace #live-model-host textarea.ai-prompt-box, #cvV3App .photo-workspace #live-model-host textarea.ai-prompt-box:focus {height:48px!important;min-height:48px!important;padding:8px 7px!important;line-height:26px!important;background:transparent!important;border:0!important;border-radius:0!important;font-size:16px!important;outline:none!important;box-shadow:none!important;} #cvV3App .photo-dock-tools {top:auto;right:194px;bottom:12px;gap:4px;z-index:4;} #cvV3App :is(.photo-upload-control,.photo-dock-settings>summary) {min-height:34px;padding:6px 8px;border:0;border-radius:8px;background:transparent;font-size:12px;} #cvV3App .photo-upload-control .icon {width:18px;height:18px;} #cvV3App .photo-workspace #live-model-host .photo-composer-row .launch-button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px!important;height:36px!important;width:168px!important;padding:8px 12px!important;border:0!important;border-radius:18px!important;font-size:12px!important;} #cvV3App .photo-workspace #live-model-host .photo-run-price {font-size:12px;white-space:nowrap;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources {max-height:164px;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-file {width:68px;height:68px;border-radius:10px;} #cvV3App .photo-workspace #live-model-host .photo-inline-sources .kp-file button {width:22px;height:22px;border-radius:50%;} #cvV3App .photo-workspace #live-model-host .desktop-model-options>.kp-hint {display:none!important;} @media(max-width:1080px){ #cvV3App .photo-workspace .media-model-toolbar {max-width:calc(100% - 300px);} #cvV3App .photo-dock-tools {right:158px;} #cvV3App .photo-workspace #live-model-host .photo-composer-row .launch-button {width:132px!important;gap:5px;} #cvV3App .photo-dock-settings>summary {font-size:0;gap:0;} }