.video-frames-page{margin:0;background:#f5f7f8;color:#20303b;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.7}.video-frames-page *{box-sizing:border-box}.video-frames-page [hidden]{display:none!important}.vf-main{max-width:1040px;margin:auto;padding:40px 24px 64px}.vf-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:6px 0 20px}.vf-eyebrow{font-size:12px;letter-spacing:.16em;color:#15756f;font-weight:800;margin:0 0 12px}.vf-hero h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.04em;margin:0 0 10px}.vf-hero p:last-child{font-size:18px;color:#61717c;margin:0}.vf-mobile-break{display:none}.vf-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}.vf-badges span{font-size:12px;background:#e4efec;color:#24594f;padding:5px 12px;border-radius:20px;font-weight:700}.vf-panel{background:#fff;border:1px solid #dfe6e8;border-radius:24px;padding:28px;margin:22px 0;box-shadow:0 3px 18px #243b4a04}.vf-section-heading{display:flex;gap:13px;align-items:center;margin-bottom:20px}.vf-section-heading>span{display:grid;place-items:center;border-radius:10px;width:34px;height:34px;background:#e9f4f1;color:#17645b;font-weight:800;font-size:13px}.vf-section-heading h2{font-size:20px;margin:0}.vf-drop{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:150px;border:2px dashed #9abbb7;background:#f7fbfa;border-radius:16px;padding:24px;text-align:center;cursor:pointer;color:#245f5a}.vf-drop:focus-within,.vf-drop.dragover{outline:3px solid #448b80;outline-offset:3px;background:#e8f5ef}.vf-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.vf-drop span{font-size:13px;color:#607674}.vf-hint{font-size:13px;color:#61717c;margin:12px 0}.vf-notice{padding:12px 16px;background:#eaf3f1;border:1px solid #cbded9;border-radius:12px;font-size:14px}.vf-notice.error{background:#fff0eb;color:#923c27;border-color:#f0c7ba}.vf-file-info{overflow-wrap:anywhere;font-size:14px;font-weight:650}.vf-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}.vf-main button,.vf-main select,.vf-main input{font:inherit}.vf-main button{min-height:44px;padding:10px 18px;border-radius:11px;font-size:14px;font-weight:750;cursor:pointer;line-height:1.5}.vf-main button:disabled{opacity:.45;cursor:not-allowed}.vf-main :focus-visible{outline:3px solid #d99735;outline-offset:3px}.vf-primary{background:#206c63;border:1px solid #206c63;color:white}.vf-primary:hover:enabled{background:#15564f}.vf-secondary{background:#f5f8f8;border:1px solid #d2dfdf;color:#2c5352}.vf-text{border:0;background:transparent;color:#1a655c;text-decoration:underline;text-underline-offset:4px}.vf-preview{display:flex;justify-content:center;align-items:center;background:#172b35;border-radius:14px;overflow:hidden;min-height:180px}.vf-preview canvas{display:block;max-width:100%;max-height:480px;width:auto;height:auto}.vf-scrub-label{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#506874;margin-top:15px;font-variant-numeric:tabular-nums}.vf-main input[type=range]{width:100%;min-height:36px;accent-color:#206c63}.vf-transport{justify-content:center}.vf-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.vf-settings-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:650}.vf-settings-grid input,.vf-settings-grid select{border:1px solid #bbcdd0;background:#fff;border-radius:9px;padding:10px 12px;min-width:0;width:100%;height:46px;color:#20303b}.vf-main fieldset{border:0;padding:0;margin:0;min-width:0}.vf-plan{background:#f1f6f6;border-left:3px solid #4c8c82;padding:14px 16px;margin-top:20px;font-size:14px;white-space:pre-line}.vf-progress-wrap{margin:20px 4px}.vf-progress-wrap progress{width:100%;height:10px;accent-color:#206c63}.vf-progress-wrap p{overflow-wrap:anywhere;font-size:14px}.vf-progress-wrap .error{color:#a13c24}.vf-gallery{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:8px 4px 16px;min-width:0;max-width:100%;scrollbar-color:#7ba79e #edf3f1}.vf-gallery figure{flex:0 0 180px;scroll-snap-align:start}.vf-gallery figure{margin:0;min-width:0;border:1px solid #e1e8e9;border-radius:10px;overflow:hidden;background:#fafcfc}.vf-gallery img{width:100%;height:90px;object-fit:contain;background:#eaf0f1;display:block}.vf-gallery figcaption{padding:8px;font-size:11px;font-variant-numeric:tabular-nums}.vf-gallery a{display:inline-block;color:#17685f;font-weight:700;padding:6px 0;font-size:12px}.vf-guide{padding:24px 4px}.vf-guide h2{font-size:25px;margin:0 0 26px}.vf-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:28px}.vf-guide h3{font-size:16px;margin:0 0 8px}.vf-guide p{font-size:14px;color:#536773}.vf-guide details{border-top:1px solid #d3dfe1;padding:18px 0}.vf-guide summary{cursor:pointer;font-weight:700}.vf-guide a{color:#17685f;text-underline-offset:3px}.vf-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.vf-main{padding:25px 16px 48px}.vf-panel{padding:20px 16px;border-radius:18px}.vf-hero img{width:70px;height:70px}.vf-hero p:last-child{font-size:16px}.vf-gallery{gap:10px}.vf-gallery figure{flex-basis:160px}.vf-filmstrip-heading{align-items:flex-end}.vf-guide-grid{grid-template-columns:1fr;gap:16px}.vf-settings-grid{gap:15px 12px}.vf-scrub-label{flex-direction:column;gap:0}.vf-transport button{flex:1;padding:10px 7px;white-space:nowrap}.vf-transport #saveFrameBtn{flex-basis:100%}.vf-row button{max-width:100%}.vf-mobile-break{display:block}.vf-guide h2{font-size:22px}}
@media(prefers-reduced-motion:no-preference){.vf-main button{transition:background .15s}}

.vf-selection-toolbar{padding:16px;background:#eef6f3;border:1px solid #d2e6df;border-radius:14px;margin:18px 0 8px}.vf-selection-toolbar strong{font-size:15px;color:#206c63}.vf-selection-toolbar .vf-row{margin-top:10px}.vf-filmstrip-heading{display:flex;gap:16px;justify-content:space-between;align-items:center}.vf-gallery-nav{display:flex;gap:8px;flex-shrink:0}.vf-gallery-nav button{padding:8px 14px}.vf-frame-select{display:block;position:relative;cursor:pointer;padding-bottom:32px;background:#f1f6f5}.vf-frame-select input{position:absolute;bottom:6px;left:10px;width:20px;height:20px;margin:0;accent-color:#206c63;cursor:pointer}.vf-select-badge{position:absolute;bottom:4px;left:38px;font-size:12px;font-weight:750;color:#3e6862}.vf-gallery figure.is-selected{border:2px solid #206c63;background:#eff8f3;box-shadow:0 0 0 2px #d7ece3}.vf-gallery figure:focus-within{outline:3px solid #d99735;outline-offset:1px}.vf-frame-select:has(input:disabled){cursor:wait}

.vf-intro{max-width:760px;color:#536773;font-size:15px}.vf-guide-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 22px;font-size:14px}.vf-guide-links a{color:#206c63;text-underline-offset:4px}.vf-article-section{margin:34px 0;padding-top:28px;border-top:1px solid #d3dfe1;scroll-margin-top:100px}.vf-article-section h2,.vf-article-section h3{scroll-margin-top:100px}.vf-article-section h3{margin:24px 0 10px}.vf-howto{padding-left:24px}.vf-howto li{padding-left:7px;margin:20px 0}.vf-howto li::marker{color:#206c63;font-weight:800}.vf-howto p{margin:8px 0}.vf-worked-example{background:#fff;border:1px solid #dbe6e2;border-radius:20px;padding:26px}.vf-example-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.vf-example-frames figure{margin:0;border:1px solid #dbe6e2;border-radius:12px;overflow:hidden;background:#f8fbfa}.vf-example-frames img{display:block;width:100%;height:auto}.vf-example-frames figcaption{display:flex;flex-direction:column;gap:5px;padding:13px;font-size:12px}.vf-example-frames figcaption strong{font-size:14px}.vf-recipes{display:grid;gap:15px}.vf-recipes>div{border-left:3px solid #8fb9ad;padding:2px 0 2px 15px}.vf-recipes dt{font-size:15px;font-weight:750}.vf-recipes dd{margin:6px 0 0;color:#536773;font-size:14px}.vf-example-download{display:inline-block;padding:12px 16px;background:#eef6f1;border:1px solid #c5ded3;border-radius:10px;font-weight:700}.vf-format-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;table-layout:fixed}.vf-format-table caption{text-align:left;font-weight:700;margin-bottom:8px}.vf-format-table th,.vf-format-table td{padding:12px 10px;border:1px solid #d2dfdf;text-align:left;vertical-align:top;overflow-wrap:anywhere}.vf-format-table thead{background:#e9f3ef}.vf-format-table th:first-child{width:19%}
@media(max-width:700px){.vf-worked-example{padding:20px 15px}.vf-example-frames{grid-template-columns:1fr;gap:16px}.vf-example-frames figcaption{padding:12px}.vf-format-table th,.vf-format-table td{padding:9px 6px}.vf-format-table{font-size:12px}.vf-article-section h2{font-size:22px}.vf-guide-links{gap:10px 18px}}