:root { --vf-ink:#242321; --vf-paper:#fffdf9; --vf-line:#d5cdc1; --vf-muted:#766f66; --vf-coral:#f06445; --vf-purple:#6554d9; --vf-teal:#4eb7a1; }
.video-frame-main [hidden] { display:none !important; }
.video-frame-main { min-height:100vh; padding:18px max(24px,calc((100vw - 1260px)/2)) 96px; }
.video-frame-hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:50px; align-items:center; padding:52px 0 44px; }
.video-frame-hero h1 { max-width:800px; margin:12px 0 18px; color:var(--vf-ink); font-size:clamp(48px,7vw,84px); line-height:.94; letter-spacing:-.064em; }
.video-frame-hero h1 em { color:var(--vf-purple); font-family:Georgia,serif; font-weight:500; }
.video-frame-hero p { max-width:720px; margin:0; color:var(--vf-muted); font-size:16px; line-height:1.75; }
.video-frame-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.video-frame-tags span { border:1px solid #d4cdc2; border-radius:999px; padding:7px 10px; color:#5f5951; background:rgba(255,255,255,.6); font-size:10px; font-weight:780; }
.video-frame-hero-art { min-height:264px; position:relative; overflow:hidden; border:1px solid #171614; border-radius:31px; background:#23221e; box-shadow:0 22px 55px rgba(44,38,30,.18); }
.video-frame-hero-art>b { position:absolute; left:24px; top:22px; z-index:4; color:#fff; font:750 11px ui-monospace,monospace; letter-spacing:.12em; }
.video-frame-hero-art>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:calc(100% - 52px); position:absolute; left:26px; top:66px; }
.video-frame-hero-art i { display:block; height:128px; position:relative; overflow:hidden; border:3px solid #eee8de; border-radius:11px; background:linear-gradient(145deg,#f8d65a,#ec684c 55%,#6754db); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.video-frame-hero-art i::after { content:''; position:absolute; width:52px; height:52px; right:-10px; bottom:11px; border:11px solid rgba(255,255,255,.78); border-radius:50%; }
.video-frame-hero-art i:nth-child(2) { transform:translateY(-7px); filter:hue-rotate(22deg); }
.video-frame-hero-art i:nth-child(3) { filter:hue-rotate(44deg); }
.video-frame-hero-art>span { position:absolute; right:25px; bottom:20px; border-radius:7px; padding:7px 9px; color:#fff; background:var(--vf-coral); font:800 10px ui-monospace,monospace; }
.video-frame-workbench { overflow:hidden; border:1px solid var(--vf-line); border-radius:28px; background:var(--vf-paper); box-shadow:0 24px 70px rgba(47,39,29,.1); }
.video-frame-workbench-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 27px; border-bottom:1px solid #e2dcd2; }
.video-frame-kicker { color:var(--vf-purple); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.video-frame-workbench-heading h2 { margin:4px 0 0; font-size:24px; letter-spacing:-.035em; }
.video-frame-local-note { color:#676158; font-size:11px; }
.video-frame-local-note i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#62a987; box-shadow:0 0 0 4px rgba(98,169,135,.12); }
.video-frame-layout { display:grid; grid-template-columns:340px minmax(0,1fr); min-height:740px; }
.video-frame-controls { padding:21px; border-right:1px solid #e1dad0; background:#f7f2ea; }
.video-frame-panel-heading { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.video-frame-panel-heading span { color:var(--vf-coral); font:800 10px ui-monospace,monospace; }
.video-frame-panel-heading h3 { margin:0; font-size:15px; }
.video-frame-dropzone { display:grid; place-items:center; min-height:115px; border:1px dashed #bbb2a5; border-radius:15px; padding:15px; text-align:center; background:rgba(255,255,255,.58); transition:.2s ease; }
.video-frame-dropzone.dragging { border-color:var(--vf-purple); background:#efedff; transform:translateY(-2px); }
.video-frame-controls button { border:1px solid #cac2b6; border-radius:9px; padding:8px 10px; color:#4f4942; background:#fff; font-family:inherit; font-size:10px; font-weight:780; cursor:pointer; }
.video-frame-dropzone p { margin:9px 0 0; color:#827a70; font-size:10px; line-height:1.5; }
.video-frame-empty { margin-top:13px; padding:20px 12px; border-radius:13px; color:#81796f; background:#ebe5dc; text-align:center; }
.video-frame-empty strong { display:block; color:#49443e; font-size:11px; }
.video-frame-empty p { margin:6px 0 0; font-size:9px; line-height:1.55; }
.video-frame-source { margin-top:13px; }
.video-frame-source video { display:block; width:100%; max-height:190px; border-radius:12px; background:#171614; }
.video-frame-source small { display:block; overflow:hidden; margin-top:7px; color:#716a61; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
#videoFrameClear { width:100%; margin-top:8px; }
.video-frame-settings { margin-top:18px; padding-top:18px; border-top:1px solid #ddd5ca; }
.video-frame-mode { margin:0 0 11px; border:0; padding:0; }
.video-frame-mode legend { margin-bottom:6px; color:#625c54; font-size:10px; font-weight:760; }
.video-frame-mode>div { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.video-frame-mode label { position:relative; }
.video-frame-mode input { position:absolute; opacity:0; pointer-events:none; }
.video-frame-mode span { display:grid; place-items:center; min-height:38px; border:1px solid #cbc3b7; border-radius:9px; color:#665f57; background:#fff; font-size:9px; font-weight:780; cursor:pointer; }
.video-frame-mode input:checked+span { border-color:var(--vf-purple); color:#fff; background:var(--vf-purple); box-shadow:0 6px 16px rgba(101,84,217,.18); }
.video-frame-fields,.video-frame-single-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.video-frame-fields label,.video-frame-single-fields label { display:grid; gap:6px; color:#625c54; font-size:10px; font-weight:760; }
.video-frame-fields label.wide,.video-frame-single-fields label.wide { grid-column:1/-1; }
.video-frame-fields label>span,.video-frame-single-fields label>span { display:flex; justify-content:space-between; gap:8px; }
.video-frame-fields input,.video-frame-fields select,.video-frame-single-fields input { width:100%; min-width:0; height:39px; border:1px solid #cbc3b7; border-radius:9px; padding:0 9px; color:#2e2b27; background:#fff; font:inherit; }
.video-frame-single-fields input[type="range"],.video-frame-quality-label input { padding:0; accent-color:var(--vf-purple); }
.video-frame-plan { display:grid; gap:4px; margin:11px 0; border-radius:10px; padding:10px 11px; color:#6c655c; background:#eae3da; font-size:9px; line-height:1.45; }
.video-frame-plan strong { color:#393530; font-size:10px; }
.video-frame-output-fields { padding-top:12px; border-top:1px solid #ddd5ca; }
#videoFrameExport { width:100%; min-height:50px; margin-top:15px; border:0; border-radius:12px; color:#fff; background:var(--vf-purple); font-size:12px; font-weight:850; box-shadow:0 10px 26px rgba(101,84,217,.22); }
#videoFrameExport:disabled { cursor:not-allowed; opacity:.42; box-shadow:none; }
.video-frame-status { display:block; margin-top:9px; color:#817a71; font-size:9px; line-height:1.5; }
.video-frame-error { margin:11px 0 0; border:1px solid #e5b2a6; border-radius:9px; padding:9px 10px; color:#963b29; background:#fff0ec; font-size:10px; line-height:1.5; }
.video-frame-preview-panel { min-width:0; padding:21px; background:#e9e3d9; }
.video-frame-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.video-frame-preview-heading output { color:#6c655d; font-size:10px; font-weight:700; }
.video-frame-canvas-shell { display:grid; place-items:center; min-height:540px; overflow:hidden; border:1px solid #cfc7bb; border-radius:19px; padding:20px; background:#dcd5ca; }
#videoFrameCanvas { display:block; max-width:100%; max-height:660px; width:auto; height:auto; border-radius:7px; box-shadow:0 13px 40px rgba(43,36,28,.22); background:#171614; }
.video-frame-preview-empty { display:grid; justify-items:center; color:#736c63; text-align:center; }
.video-frame-preview-empty span { display:grid; place-items:center; width:68px; height:68px; margin-bottom:16px; border:1px solid #c0b7aa; border-radius:50%; color:#fff; background:#282621; font-size:22px; text-indent:4px; box-shadow:0 12px 30px rgba(39,34,28,.18); }
.video-frame-preview-empty strong { color:#4f4942; font-size:14px; }
.video-frame-preview-empty small { margin-top:7px; font-size:10px; }
.video-frame-results { margin-top:16px; border-top:1px solid #d3cbbf; padding-top:16px; }
.video-frame-results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.video-frame-results-head strong { font-size:14px; }
.video-frame-results-head a { border-radius:9px; padding:10px 13px; color:#fff; background:#25231f; text-decoration:none; font-size:10px; font-weight:800; }
.video-frame-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.video-frame-links a { min-width:0; overflow:hidden; border:1px solid #d4ccc0; border-radius:11px; padding:6px; color:#514b44; background:#faf7f1; text-decoration:none; }
.video-frame-links img { display:block; width:100%; aspect-ratio:16/9; border-radius:7px; object-fit:cover; background:#1c1b18; }
.video-frame-links span { display:block; min-width:0; margin-top:6px; }
.video-frame-links strong,.video-frame-links small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-frame-links strong { font-size:9px; }.video-frame-links small { margin-top:2px; color:#847c72; font-size:7px; }
.video-frame-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.video-frame-benefits article { min-height:165px; border:1px solid #d7d0c5; border-radius:18px; padding:22px; background:rgba(255,255,255,.5); }
.video-frame-benefits span { color:var(--vf-purple); font:italic 15px Georgia,serif; }
.video-frame-benefits strong { display:block; margin:22px 0 8px; font-size:15px; }
.video-frame-benefits p { margin:0; color:var(--vf-muted); font-size:11px; line-height:1.7; }
@media(max-width:940px){.video-frame-layout{grid-template-columns:1fr}.video-frame-controls{border-right:0;border-bottom:1px solid #e1dad0}.video-frame-fields,.video-frame-single-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.video-frame-fields label.wide,.video-frame-single-fields label.wide{grid-column:auto}.video-frame-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.video-frame-hero{grid-template-columns:1fr;gap:28px;padding-top:34px}.video-frame-hero h1{font-size:50px}.video-frame-hero-art{min-height:225px}.video-frame-fields,.video-frame-single-fields{grid-template-columns:1fr 1fr}.video-frame-fields label.wide,.video-frame-single-fields label.wide{grid-column:1/-1}.video-frame-canvas-shell{min-height:390px}.video-frame-benefits{grid-template-columns:1fr}}
@media(max-width:520px){.video-frame-main{padding-inline:14px}.video-frame-workbench-heading{align-items:flex-start;flex-direction:column}.video-frame-controls,.video-frame-preview-panel{padding:16px}.video-frame-preview-heading{align-items:flex-start;flex-direction:column}.video-frame-fields,.video-frame-single-fields{grid-template-columns:1fr}.video-frame-fields label.wide,.video-frame-single-fields label.wide{grid-column:1}.video-frame-canvas-shell{min-height:295px;padding:9px}.video-frame-links{grid-template-columns:repeat(2,minmax(0,1fr))}.video-frame-results-head{align-items:flex-start;flex-direction:column}}