.captions-demo{width:min(100%,600px);background:#0c0c0e;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;isolation:isolate;--caption-color:#fff}
.captions-head{height:47px;padding:0 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.captions-head>b{font-size:17px;letter-spacing:-.02em}.captions-head>span:not(.captions-local){font:9px var(--font-mono);letter-spacing:.15em;color:var(--muted);border-left:1px solid var(--line);padding-left:11px}
.captions-local{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)}.captions-local i{color:var(--accent)}
.captions-head button{font:11px var(--font-display);background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}.captions-head button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.captions-stage{position:relative;height:408px;overflow:hidden}.captions-ae{position:absolute;inset:0;display:flex;flex-direction:column;background:#19191d}
.captions-ae-tabs{height:29px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#202023;border-bottom:1px solid #080809;color:#acacb4;font-size:10px;flex:none}.captions-ae-tabs b{font-weight:500;color:#dedee4;margin-left:5px}.captions-ae-tabs small{margin-left:auto;font:8px var(--font-mono);color:#898992}
.captions-ae-logo{color:#c1a8f0;border:1px solid #726183;padding:0 3px;font-size:10px;border-radius:3px}
.captions-viewer{position:relative;flex:1;min-height:0;padding:12px;background:#111113;overflow:hidden;display:flex;align-items:center}
.captions-footage{position:relative;width:auto;height:100%;aspect-ratio:16/9;max-width:100%;max-height:100%;margin:0 auto;flex:none;overflow:hidden;border:1px solid #34343d;background:#0b0b10;transform-origin:center;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.captions-footage>img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.captions-image-shade{position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#0009)}
.captions-sample-label{position:absolute;top:9px;left:9px;padding:3px 5px;background:#0b0b14b8;color:#dddde6;font:6px var(--font-mono);letter-spacing:.12em;border:1px solid #ffffff20;border-radius:3px}
.captions-viewer-note{position:absolute;left:16px;bottom:22px;display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted);opacity:0;transition:opacity .2s}
.captions-demo.is-editor .captions-footage{transform:translateX(-30%) scale(.68)}.captions-demo.is-editor .captions-viewer-note{opacity:1}
.captions-output{position:absolute;bottom:12%;left:2%;right:2%;display:flex;align-items:center;justify-content:center;gap:.23em;font-size:clamp(17px,2.2vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.035em;color:var(--caption-color);text-shadow:0 2px 1px #000,0 3px 10px #000a;white-space:nowrap;opacity:0}
.captions-output>span{display:inline-block;transform-origin:center bottom}
.captions-timeline{position:relative;flex:none;height:123px;background:#202024;border-top:1px solid #38383e}
.captions-ruler,.captions-layer{display:grid;grid-template-columns:34% minmax(0,1fr)}
.captions-ruler{height:26px;font:8px var(--font-mono);color:#9494a2;border-bottom:1px solid #111115}.captions-ruler>span{padding:7px 12px;color:var(--accent)}.captions-ruler>div{display:flex;justify-content:space-between;padding:7px 9px 0;background:#161619}
.captions-layer{height:22px;font-size:9px;border-bottom:1px solid #151519}.captions-layer>span{display:flex;align-items:center;gap:6px;padding-left:12px;color:#c4c4cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.captions-layer i{color:var(--accent);font-size:11px;flex:none}.captions-layer>div{position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(33.333% - 1px),#ffffff06 calc(33.333% - 1px) 33.333%);border-left:1px solid #141417}
.captions-layer b{position:absolute;top:3px;bottom:3px;left:var(--clip-start,2%);width:var(--clip-width,94%);padding:1px 5px;overflow:hidden;white-space:nowrap;border:1px solid #a4abf477;background:#535781;color:#e6e7ff;font-size:7px;font-weight:400;border-radius:2px}
.captions-text-layer{opacity:0;transform:translateY(7px)}.captions-text-layer.is-active b{background:#929be1;color:#10111d;border-color:#d3d6ff}
.captions-video-layer i{color:#84aaa8}.captions-video-layer b{background:#36595a;border-color:#7db0ad77}
.captions-timehead{position:absolute;left:35.32%;top:19px;bottom:0;width:1px;background:#9ba4ff;z-index:1;opacity:.7}.captions-timehead::before{content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;background:#9ba4ff;clip-path:polygon(0 0,100% 0,50% 100%)}
.captions-controls{position:absolute;right:12px;top:44px;width:51%;height:326px;padding:12px;background:#0b0b0e;border:1px solid #3b3b45;border-radius:13px;box-shadow:0 12px 36px #0008;opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1),visibility .25s}
.captions-demo.is-editor .captions-controls{opacity:1;visibility:visible;transform:none}
.captions-controls-title{display:flex;justify-content:space-between;align-items:center;gap:6px}.captions-controls-title>b{font-size:17px;letter-spacing:-.025em;font-weight:500}.captions-controls-title small{font-size:8px;color:var(--muted)}.captions-controls-title i{color:var(--accent)}
.captions-tabs{display:flex;border-bottom:1px solid var(--line);gap:4px;margin-top:10px}.captions-tabs>span{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;flex:1;padding:7px 2px;font-size:10px;color:var(--muted);border-radius:5px 5px 0 0}.captions-tabs>span.is-active{background:#18181e;color:var(--text)}.captions-tabs>span.is-active::after{content:"";position:absolute;bottom:-1px;left:10px;right:10px;height:2px;background:var(--accent)}
.captions-transcribe-pane,.captions-text-pane{position:absolute;left:12px;right:12px;top:91px;bottom:12px;display:flex;flex-direction:column;transition:opacity .18s;opacity:1}.captions-text-pane{opacity:0;visibility:hidden}.captions-demo.is-text .captions-text-pane{opacity:1;visibility:visible}.captions-demo.is-text .captions-transcribe-pane{opacity:0;visibility:hidden}
.captions-source{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:7px;background:#151518}.captions-source>i{font-size:18px;color:var(--muted)}.captions-source b{display:block;font-size:10px;font-weight:500}.captions-source small{display:block;font-size:8px;color:var(--muted);margin-top:2px}
.captions-analysis{margin-top:10px}.captions-waveform{position:relative;display:flex;align-items:center;gap:3px;height:35px;overflow:hidden}.captions-waveform>span{background:#414354;border-radius:1px;flex:1;min-width:1px;transform-origin:center;transition:background .16s}.captions-waveform>span.is-read{background:var(--accent)}.captions-wave-scan{position:absolute;left:0;top:0;bottom:0;width:1px;background:#c4c9ff;box-shadow:0 0 10px #9ba4ff;opacity:0}
.captions-analysis-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;font-size:8px;color:var(--muted)}.captions-analysis-meta b{color:var(--accent);font:8px var(--font-mono);font-weight:400}
.captions-transcript{margin-top:12px;padding-top:9px;border-top:1px solid var(--line)}.captions-transcript>span{display:block;font:7px var(--font-mono);letter-spacing:.05em;color:var(--faint);text-transform:uppercase}.captions-transcript p{font-size:11px;line-height:1.6;color:#d8d8e0;margin-top:5px}
.captions-action{margin-top:auto;flex:none;min-height:32px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--text);color:#111114;border-radius:8px;font-size:11px;font-weight:500;transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s}.captions-action.is-target{background:#dfe2ff}.captions-action.is-pressed{transform:scale(.96)}
.captions-style-preview{position:relative;height:58px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#17171e;border:1px solid #2c2c36;border-radius:7px}.captions-style-preview>span{display:block;font-size:13px;line-height:1.2;letter-spacing:-.04em;font-weight:700;color:var(--caption-color);white-space:nowrap;padding-bottom:7px}.captions-style-preview b{display:inline-block;font-weight:700}.captions-style-preview>small{position:absolute;bottom:5px;font:5px var(--font-mono);letter-spacing:.13em;color:var(--faint)}
.captions-size-label{display:flex;justify-content:space-between;margin-top:10px;font-size:9px;color:var(--muted)}.captions-size-label>b{color:var(--text);font:9px var(--font-mono)}.captions-size-track{height:4px;position:relative;margin:10px 5px 0;background:#383840;border-radius:9px;flex:none}.captions-size-track>span{position:absolute;inset:0;background:var(--accent);transform:scaleX(.25);transform-origin:left;border-radius:9px}.captions-size-track>i{position:absolute;left:0;top:50%;height:10px;width:10px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%)}
.captions-color-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px;font-size:9px;color:var(--muted)}.captions-swatches{display:flex;gap:8px}.captions-swatches>i{display:block;width:14px;height:14px;border-radius:50%;background:var(--swatch);border:2px solid #0b0b0e;outline:1px solid transparent}.captions-swatches>i.is-selected{outline-color:var(--swatch)}
.captions-animation-label{margin-top:12px;color:var(--muted);font-size:9px}.captions-animation-options{display:flex;gap:5px;margin-top:5px}.captions-animation-options>span{flex:1;display:flex;justify-content:center;align-items:center;gap:3px;padding:5px 0;border:1px solid var(--line);border-radius:6px;font-size:9px;color:var(--muted);white-space:nowrap}.captions-animation-options>span.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.captions-cursor{position:absolute;left:0;top:0;z-index:4;pointer-events:none;color:#fff;opacity:0}.captions-cursor>i{display:block;font-size:23px;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 1px #000)}.captions-cursor.is-dragging>i{color:#c3c8ff}.captions-click-ring{position:absolute;left:-9px;top:-10px;width:27px;height:27px;border:1.5px solid #ffffffb0;border-radius:50%;opacity:0}
.captions-foot{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.captions-foot>span:last-child{font:8px var(--font-mono);color:var(--accent);white-space:nowrap}
@media(max-width:900px){
  .captions-head{height:35px;padding:0 12px;gap:8px}.captions-head>b{font-size:14px}.captions-head>span:not(.captions-local){font-size:8px}.captions-local{font-size:8px}.captions-head button{padding:3px 8px;font-size:9px}
  .captions-stage{height:clamp(268px,35dvh,350px)}.captions-ae-tabs{height:24px;font-size:8px;padding:0 9px}.captions-ae-tabs small{font-size:6px}.captions-ae-logo{font-size:8px}.captions-viewer{padding:8px}.captions-viewer-note{font-size:7px;left:10px;bottom:11px}.captions-sample-label{font-size:4px;top:5px;left:5px}
  .captions-timeline{height:99px}.captions-ruler{height:22px;font-size:6px}.captions-ruler>span{padding:6px 9px}.captions-ruler>div{padding:6px 7px 0}.captions-layer{height:18px;font-size:7px}.captions-layer>span{padding-left:7px;gap:4px}.captions-layer i{font-size:9px}.captions-layer b{font-size:5px;top:2px;bottom:2px;padding:1px 3px}
  .captions-controls{right:8px;top:32px;width:53%;height:calc(100% - 44px);padding:8px;border-radius:10px}.captions-controls-title>b{font-size:13px}.captions-controls-title small{font-size:6px}.captions-tabs{margin-top:5px}.captions-tabs>span{font-size:8px;padding:5px 0;gap:3px}
  .captions-transcribe-pane,.captions-text-pane{left:8px;right:8px;top:66px;bottom:8px}.captions-source{padding:5px;gap:5px}.captions-source>i{font-size:14px}.captions-source b{font-size:8px}.captions-source small{font-size:6px;margin-top:1px}.captions-analysis{margin-top:7px}.captions-waveform{height:25px;gap:2px}.captions-analysis-meta{font-size:6px;margin-top:3px}.captions-analysis-meta b{font-size:6px}.captions-transcript{margin-top:7px;padding-top:5px}.captions-transcript>span{font-size:5px}.captions-transcript p{font-size:8px;line-height:1.45;margin-top:3px}.captions-action{min-height:25px;font-size:8px;border-radius:6px;gap:4px}
  .captions-style-preview{height:36px}.captions-style-preview>span{font-size:9px;padding-bottom:4px}.captions-style-preview>small{font-size:4px;bottom:3px}.captions-size-label{font-size:7px;margin-top:6px}.captions-size-label>b{font-size:7px}.captions-size-track{height:3px;margin-top:7px}.captions-size-track>i{width:8px;height:8px}.captions-color-row{margin-top:9px;font-size:7px}.captions-swatches{gap:6px}.captions-swatches>i{width:11px;height:11px}.captions-animation-label{margin-top:7px;font-size:7px}.captions-animation-options{gap:3px;margin-top:3px}.captions-animation-options>span{font-size:7px;padding:3px 0}
  .captions-foot{min-height:32px;font-size:9px;padding:7px 9px;gap:5px}.captions-foot>span:last-child{font-size:6px}.captions-output{font-size:clamp(16px,3.8vw,24px)}.captions-cursor>i{font-size:19px}
}
@media(max-width:900px) and (max-height:760px){.captions-demo{scale:.9}}
@media(max-width:900px) and (max-height:680px){.captions-demo{scale:.82}}
body.flow .captions-demo{scale:1}
@media(prefers-reduced-motion:reduce){.captions-demo *{transition:none!important}.captions-cursor{display:none}}