/* The website sample follows the desktop editor's trim / captions / appearance workflow. */
#studio .clip-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:#131715;border-radius:16px;overflow:hidden;isolation:isolate}
#studio .clip-editor::after{pointer-events:none}
.editor-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:17px 24px;border-bottom:1px solid #303831;background:#1a201c;gap:12px}
.editor-project{display:flex;align-items:center;gap:11px}.editor-project>div{display:grid;gap:3px}.editor-project strong{font-size:14px;font-weight:650}.editor-project span{font-size:11px;color:#99a49c}.editor-project i,.editor-view-label i{font-style:normal;padding:0 5px;opacity:.65}
.editor-history{display:flex;gap:8px}
#studio .clip-editor button{font-family:inherit;border:1px solid #364039;color:#dce3db;background:#1b221d;border-radius:7px;cursor:pointer;transition:background .15s,border-color .15s}
#studio .clip-editor button:hover{background:#252f27;border-color:#71836a}
#studio .clip-editor button:disabled{opacity:.35;cursor:default}
.editor-history button{min-height:34px;padding:7px 12px;font-size:11px}
.editor-view{padding:22px 30px 18px;min-width:0;background:#101512;display:flex;flex-direction:column;align-items:center;gap:16px}
.editor-view-label{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#9ba69e;width:100%;max-width:360px}.editor-view-label b{font-weight:500;color:#c2cec2}
#studio .clip-editor .demo-phone{position:relative;display:block;width:236px;max-width:100%;height:auto;aspect-ratio:9/16;margin:0;border:1px solid #4a574d;border-radius:10px;overflow:hidden;transform:none;box-shadow:0 0 0 4px #1d251f,0 12px 28px #0004;flex-shrink:0}
#studio .clip-editor .demo-phone>video{display:block;width:100%;height:100%;object-fit:contain;filter:none;opacity:1}
#studio .clip-editor #preview-caption{display:flex;position:absolute;left:3%;width:94%;padding:4px;justify-content:center;flex-wrap:wrap;gap:0 .16em;line-height:1.18;letter-spacing:-.02em;color:var(--caption-base,#fff);font-family:Arial,Helvetica,sans-serif;font-weight:800;text-shadow:-1px -1px 1px #000,1px 1px 2px #000;transform:translateY(-50%);border-radius:3px;transition:opacity .08s;z-index:2}
#studio .clip-editor #preview-caption[hidden]{display:none}
#studio .clip-editor #preview-caption.in-silence{opacity:0}
#studio .clip-editor #preview-caption.in-silence:focus,#studio .clip-editor #preview-caption.in-silence:hover{opacity:1}
#studio .clip-editor #preview-caption-line>span{padding:0;border:0;border-radius:0;min-width:0;max-width:100%;overflow-wrap:anywhere;background:none;color:inherit;transform:none;text-decoration:none;transition:color .09s,transform .09s}
#studio .clip-editor .demo-phone[data-style=pop] #preview-caption-line>.spoken{color:var(--highlight);transform:scale(1.08);text-shadow:inherit}
#studio .clip-editor #preview-watermark{position:absolute;right:6%;bottom:7%;top:auto;left:auto;max-width:82%;font-family:Arial,sans-serif;font-size:var(--watermark-size,10px)!important;font-weight:650;line-height:1.3;background:none;padding:0;border:0;border-radius:0;text-shadow:0 1px 3px #000;overflow-wrap:anywhere;opacity:.95;z-index:1}
#studio .clip-editor .demo-phone[data-mark=top-left] #preview-watermark{left:6%;top:6%;right:auto;bottom:auto}
#studio .clip-editor .demo-phone[data-mark=top-right] #preview-watermark{right:6%;top:6%;left:auto;bottom:auto}
#studio .clip-editor .demo-phone[data-mark=bottom-left] #preview-watermark{left:6%;bottom:7%;right:auto;top:auto}
#studio .clip-editor .demo-phone[data-mark=center] #preview-watermark{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
.editor-transport{display:flex;align-items:center;gap:8px;width:100%;max-width:360px}
#studio .editor-transport button{display:grid;place-items:center;width:36px;height:36px;flex:none;padding:8px;border-radius:50%;background:transparent}
.editor-transport svg{width:18px;height:18px}.editor-transport #preview-time{flex:1;font-size:12px;font-variant-numeric:tabular-nums;color:#d4ded2;letter-spacing:0}
#studio #preview-play{color:#c1ee9f;border-color:#697e5c}
.editor-timeline{position:relative;width:100%;max-width:360px;padding-bottom:15px}
.editor-filmstrip{height:40px;border-radius:4px;position:relative;overflow:hidden;background:#232b25}
.editor-filmstrip>img{width:100%;height:100%;object-fit:cover;opacity:.52}
.editor-selection{position:absolute;inset:0 calc(100% - var(--trim-end,100%)) 0 var(--trim-start,0%);border:1px solid #bfdf9d;border-left-width:3px;border-right-width:3px;background:#c1ee9f0a;border-radius:3px}
.editor-playhead{position:absolute;top:0;bottom:0;width:2px;left:var(--edit-playhead,0%);background:#f3fbe8;box-shadow:0 0 3px #000}
#studio .editor-timeline #preview-seek{position:absolute;inset:0 0 auto;width:100%;height:40px;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.editor-timeline:focus-within .editor-filmstrip{outline:2px solid #c1ee9f;outline-offset:3px}
.editor-ruler{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;color:#88988a;font-variant-numeric:tabular-nums}
.editor-view-hint{font-size:11px;color:#8b998e;margin:0;line-height:1.5}
.editor-inspector-demo{min-width:0;border-left:1px solid #303831;background:#151b17}
.editor-tabs-demo{display:flex;border-bottom:1px solid #303831;padding:0 20px;gap:21px}
#studio .editor-tabs-demo button{padding:17px 3px 14px;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:12px;color:#9da99e}
#studio .editor-tabs-demo button[aria-selected=true]{border-bottom-color:#bfdba8;color:#e5eee0}
.edit-panel{padding:23px 24px;min-width:0;min-height:525px}.edit-panel[hidden],.clip-editor [role=tabpanel][hidden]{display:none!important}
.edit-panel h3{font-size:20px;letter-spacing:-.6px;font-weight:600;margin:0 0 9px}.edit-help{font-size:12px;color:#9ba79e;line-height:1.7;margin:0 0 20px}
.caption-subtabs{display:flex;gap:6px;padding:4px;background:#101611;border-radius:8px;margin-bottom:23px}
#studio .caption-subtabs button{flex:1;padding:9px 5px;font-size:11px;border-color:transparent;background:none;color:#9eaca1}
#studio .caption-subtabs button[aria-selected=true]{color:#e4eddf;background:#283329;border-color:#354637}
.editor-look-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:23px}
#studio .editor-look-grid button{padding:17px 4px 10px;background:#121813;min-width:0}
#studio .editor-look-grid button[aria-pressed=true]{border-color:#bddc9e;background:#222f21}
.editor-look-grid button>span{display:block;font:700 12px/1.5 Arial,sans-serif;letter-spacing:-.3px}.editor-look-grid b{color:#ffdf45}.editor-look-grid button[data-look=creator] b{color:#bbed97}.editor-look-grid button[data-look=minimal]>span{font-weight:400}.editor-look-grid small{display:block;font-size:10px;color:#a6b49f;margin-top:14px}
.edit-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}.edit-pair label{min-width:0}
#studio .clip-editor input[type=text],#studio .clip-editor input[type=number],#studio .clip-editor select{font-family:inherit;font-size:13px;line-height:1.5;background:#101611;color:#dce8d7;border:1px solid #354237;border-radius:5px;padding:8px 10px;min-width:0;width:100%;min-height:36px;margin-top:6px;outline-offset:2px}
#studio .clip-editor input[type=number]{font-variant-numeric:tabular-nums}
#studio .clip-editor input[type=range]{accent-color:#c1ee9f;width:100%;height:22px;margin:8px 0 0;cursor:pointer}
.edit-custom-color{display:flex;gap:9px;align-items:center;width:max-content;max-width:100%}
#studio .clip-editor input[type=color]{width:24px;height:24px;border:1px solid #53634d;border-radius:4px;background:transparent;padding:2px;cursor:pointer}
.edit-range{margin:0 0 21px}.edit-range>label{display:flex;justify-content:space-between}.edit-range output{font-variant-numeric:tabular-nums;color:#bbed97}
.edit-inline{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #2a352d;padding-top:17px;flex-wrap:wrap}.edit-check{display:flex;gap:7px;align-items:center}.edit-check input{accent-color:#c1ee9f}
.edit-boundary{padding:18px 0;border-bottom:1px solid #2b352c}.edit-boundary>label{display:flex;justify-content:space-between}.edit-boundary>label span{color:#849688}.edit-boundary>div{display:flex;align-items:center;gap:12px;margin:6px 0}
#studio .edit-boundary input[type=number]{font-size:22px;width:120px;margin:0}
#studio .edit-boundary button{padding:10px 12px;font-size:11px;margin-left:auto}
.edit-selection-summary{display:flex;justify-content:space-between;font-size:12px;color:#9fb09d;margin:23px 0}.edit-selection-summary strong{color:#dfedda;font-weight:600;font-variant-numeric:tabular-nums}
#studio .clip-editor .edit-primary{background:#c1ee9f;color:#152110;border-color:#c1ee9f;display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 15px;font-size:12px;font-weight:650}
#studio .clip-editor .edit-text-button{font-size:11px;color:#a8b5a4;background:none;border:0;display:block;margin:13px auto 0;padding:5px}
.edit-word-head{display:grid;grid-template-columns:minmax(0,1fr) 66px 66px 24px;gap:5px;padding:0 0 9px 28px;font-size:10px;color:#91a18f}
.edit-word-list{height:350px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4d5f48 #111812;padding-right:4px}
.edit-word-row{display:grid;grid-template-columns:23px minmax(0,1fr) 66px 66px 24px;align-items:center;gap:5px;border-radius:5px;padding:3px 0}
#studio .edit-word-row input{font-size:12px;margin:0;padding:6px;min-height:34px;border-color:#2b382d}
#studio .edit-word-row.is-current input{border-color:#88a474;background:#1e2d1d}
#studio .edit-word-row button{padding:2px;min-height:32px;background:none;border:0;font-size:11px;color:#90a386}
#studio .edit-word-row .word-delete{font-size:19px;color:#9ba49b}
#studio .edit-word-row input[aria-invalid=true]{border-color:#eab77f}
.edit-word-actions{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:11px;color:#94a18e}
.edit-word-actions button{padding:8px 12px;font-size:11px}.edit-error{font-size:11px;line-height:1.5;color:#e8bd8b;margin:9px 0 0;min-height:16px}
.edit-field{display:block;margin:22px 0}.edit-format-note{margin-top:30px;padding:20px 0;border-top:1px solid #2d382e;display:flex;align-items:center;gap:13px;color:#a9b7a1}.edit-format-note svg{width:25px;height:31px;stroke:currentColor;stroke-width:1.2;flex:none}.edit-format-note strong{font-size:12px;display:block;font-weight:600;color:#dce7d7}.edit-format-note span{font-size:11px;display:block;margin-top:5px;line-height:1.6}
#studio .editor-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:13px 24px;border-top:1px solid #2d372e;font-size:10px;color:#869580;background:#141a15;width:100%;max-width:none}
.editor-footer>span:first-child{display:flex;align-items:center;gap:7px;color:#b5c8a9}.editor-footer i{width:4px;height:4px;background:#bddf9d;border-radius:50%}
@media(max-width:1000px){.editor-view{padding-inline:20px}.edit-panel{padding-inline:18px}.editor-tabs-demo{gap:15px;padding-inline:17px}.editor-look-grid button>span{font-size:11px}.edit-word-head{grid-template-columns:minmax(0,1fr) 58px 58px 21px}.edit-word-row{grid-template-columns:23px minmax(0,1fr) 58px 58px 21px}}
@media(max-width:760px){
 #studio .clip-editor{display:flex;flex-direction:column;overflow:hidden}
 .editor-bar{padding:13px 15px}.editor-history{gap:5px}.editor-history button{padding:7px 9px}.editor-project{gap:8px}.editor-project img{width:19px;height:19px}.editor-project strong{font-size:13px}.editor-project span{font-size:10px}.editor-history #edit-undo span{display:none}
 .editor-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px 19px;padding:20px;align-items:center}
 .editor-view-label{grid-column:1/-1;max-width:none}
 #studio .clip-editor .demo-phone{grid-column:1;grid-row:2/5;width:100%;max-width:200px;justify-self:center}
 .editor-transport{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-self:end;justify-items:center}
 .editor-transport #preview-play{grid-row:2;grid-column:1}.editor-transport #preview-time{grid-column:1/-1;grid-row:1;font-size:12px;margin-bottom:6px}.editor-transport #preview-sound{grid-row:2;grid-column:2}.editor-transport #preview-reset{grid-row:2;grid-column:3}
 #studio .editor-transport button{width:32px;height:32px;padding:7px}
 .editor-timeline{grid-column:2;align-self:center}.editor-filmstrip{height:34px}.editor-view-hint{grid-column:2;font-size:10px;align-self:start;max-width:130px}.editor-ruler{font-size:8px}.editor-ruler span:nth-child(2),.editor-ruler span:nth-child(3){display:none}
 .editor-inspector-demo{border-left:0;border-top:1px solid #303831}.editor-tabs-demo{gap:0;justify-content:space-between}.editor-tabs-demo button{flex:1}
 .edit-panel{padding:21px 18px;min-height:0}.editor-look-grid button>span{font-size:13px}.editor-look-grid small{font-size:11px}.edit-word-head{grid-template-columns:minmax(0,1fr) 64px 64px 23px}.edit-word-row{grid-template-columns:23px minmax(0,1fr) 64px 64px 23px}
 #studio .clip-editor input[type=text],#studio .clip-editor input[type=number],#studio .clip-editor select{font-size:16px}
 #studio .edit-word-row input{padding:5px;font-size:13px}.edit-word-list{height:310px}.editor-look-grid{margin-bottom:20px}.editor-footer{font-size:10px}
}
@media(prefers-reduced-motion:reduce){#studio .clip-editor #preview-caption-line>span{transition:none;transform:none!important}}

@media(max-width:380px){.editor-view{padding:16px 12px;gap:12px}.editor-project span{font-size:9px}.editor-project img{display:none}.editor-history button{font-size:10px}.edit-panel{padding-inline:12px}.editor-look-grid{gap:5px}.editor-look-grid button>span{font-size:11px}.editor-tabs-demo{padding-inline:10px}.edit-pair{gap:10px}.edit-word-head{grid-template-columns:minmax(0,1fr) 55px 55px 20px}.edit-word-row{grid-template-columns:21px minmax(0,1fr) 55px 55px 20px}.edit-word-row input{font-size:11px!important}.editor-bar{padding-inline:12px}}

/* Caption treatments shared with the desktop app. */
.clip-editor label{font-size:11px;color:#bdc9bd;line-height:1.5}
#studio .clip-editor .demo-phone{isolation:isolate}
#studio .clip-editor #preview-caption-line{display:inline-flex;justify-content:center;flex-wrap:wrap;gap:0 .16em;max-width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-shadow:inherit;padding:0;background:none;border:0;transform:none}
#studio .clip-editor .demo-phone[data-style=reverse] #preview-caption{mix-blend-mode:difference;color:white;text-shadow:none;font-weight:900;letter-spacing:.01em}
#studio .clip-editor .demo-phone[data-style=reverse] #preview-caption-line>span{color:white;text-shadow:none;transform:none;transition:none}
#studio .clip-editor #reverse-caption-outline{position:absolute;display:flex;left:3%;width:94%;padding:4px;border:1px solid transparent;justify-content:center;flex-wrap:wrap;gap:0 .16em;line-height:1.18;letter-spacing:.01em;font-family:Arial,Helvetica,sans-serif;font-weight:900;transform:translateY(-50%);color:transparent;-webkit-text-stroke:.09em rgba(5,9,7,.95);text-shadow:none;pointer-events:none;z-index:2;transition:opacity .08s}
#studio .clip-editor #reverse-caption-outline[hidden]{display:none}
#studio .clip-editor #reverse-caption-outline.in-silence{opacity:0}
#studio .clip-editor #reverse-caption-outline-line{display:inline-flex;justify-content:center;flex-wrap:wrap;gap:0 .16em;max-width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;padding:0;border:0;background:none;color:transparent}
#studio .clip-editor #reverse-caption-outline-line>span{padding:0;border:0;min-width:0;max-width:100%;overflow-wrap:anywhere;font:inherit;letter-spacing:inherit;line-height:inherit;background:none;color:transparent;transform:none;text-shadow:none}
#studio .clip-editor .demo-phone[data-style=focus] #preview-caption{font-weight:700;letter-spacing:0;text-shadow:none}
#studio .clip-editor .demo-phone[data-style=focus] #preview-caption-line{padding:.16em .22em;background:rgba(12,16,20,.81);border-radius:2px;text-shadow:none}
#studio .clip-editor .demo-phone[data-style=focus] #preview-caption-line>.spoken{color:var(--highlight);transform:none;transition:none}
.editor-look-grid .look-example{display:flex;align-items:center;justify-content:center;min-height:48px;padding:7px 3px;border-radius:4px;background:#0b110e;isolation:isolate;overflow:hidden}
#studio .editor-look-grid button{padding:7px 7px 12px}
.editor-look-grid small{font-size:11px;margin-top:10px}
.editor-look-grid [data-look=reverse] .look-example{background:linear-gradient(120deg,#c4d7b2 0%,#718e77 44%,#24332d 45%,#19261e 100%)}
.editor-look-grid [data-look=reverse] .look-example{position:relative;font-weight:900;letter-spacing:.01em}
.editor-look-grid [data-look=reverse] .look-example::before{content:'Your moment.';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:transparent;-webkit-text-stroke:1.2px #080d0a}
.editor-look-grid [data-look=reverse] .look-example>span{position:relative;mix-blend-mode:difference;color:white}
.editor-look-grid [data-look=focus] .look-example>span{padding:4px 5px;background:#18221c;border-radius:2px;font-size:11px}
.editor-look-grid [data-look=focus] b{color:#bce79b}
.editor-color-section{margin:0 0 22px;padding-top:17px;border-top:1px solid #2a352d}
.edit-color-title{font-size:12px;font-weight:600;color:#dce6d7;margin:0 0 13px}
.editor-custom-colors{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.editor-custom-colors .edit-custom-color{width:100%;justify-content:space-between;font-size:12px}
#studio .editor-custom-colors input[type=color]{width:40px;height:32px;flex:0 0 40px;padding:3px;border-radius:6px}
#studio .clip-editor .editor-custom-colors[hidden],#studio .clip-editor .reverse-color-note[hidden]{display:none}
.clip-editor .reverse-color-note{margin:0;min-height:32px}
@media(max-width:400px){.editor-custom-colors{gap:14px}.editor-custom-colors .edit-custom-color{font-size:11px;gap:6px}.editor-look-grid .look-example{font-size:11px}.editor-look-grid [data-look=focus] .look-example>span{font-size:10px}}

#studio .clip-editor .demo-phone[data-style=punch] #preview-caption{font-weight:900;letter-spacing:-.025em;line-height:1.12;text-shadow:none;color:var(--highlight);-webkit-text-stroke:.05em #101010;paint-order:stroke fill}
#studio .clip-editor .demo-phone[data-style=punch] #preview-caption-line>span{color:var(--highlight);text-shadow:none;animation:clippsi-punch-in .1s ease-out both;transition:none}
@keyframes clippsi-punch-in{from{transform:scale(.92)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#studio .clip-editor .demo-phone[data-style=punch] #preview-caption-line>span{animation:none}}