@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@500&display=swap";@property --r{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --stroke-color{syntax: "<color>"; inherits: true; initial-value: #b8bfdf;}:root{color-scheme:light;--white: #ffffff;--text: #2f2f3a;--muted: #9198ad;--accent: #0066fa;--hover-fill: #ecf0ff;--soft: #ebecf1;--line: #b8bfdf;--surface: #f8f9fc;--panel: #e9eaf1;--drop: #d9e1f0;--checker-light: #efefef;--checker-dark: #d8d8d8;--danger: #ff7a5c;--menu-h: 100px;--motion-duration: .18s;--motion-easing: ease}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}body{margin:0;background:var(--white);color:var(--text);font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,Liberation Mono,monospace;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}.screen{position:relative;width:100%;min-width:0;height:100vh;min-height:0;background:var(--white);display:flex;flex-direction:column;align-items:flex-start;isolation:isolate}.menu{width:100%;height:var(--menu-h);flex:0 0 var(--menu-h);padding:40px;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(40px,59.27vw,1138px)}.primary-nav{width:425px;height:28px;flex:0 0 425px;display:flex;flex-direction:row;align-items:center;gap:53px}.brand{width:115px;height:28px;flex:0 0 115px;color:var(--accent);font-family:Stack Sans Headline,Space Grotesk,Inter,sans-serif;font-size:22px;font-weight:500;line-height:28px;letter-spacing:-1px;display:flex;align-items:center}.primary-nav a:not(.brand){height:16px;color:var(--text);font-size:13px;font-weight:400;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center}.primary-nav a:nth-child(2){width:71px}.primary-nav a:nth-child(3){width:40px}.primary-nav a:nth-child(4){width:40px}.profile{width:119px;height:50px;flex:0 0 119px;padding:0 18px 0 21px;border-radius:20px;display:flex;flex-direction:row;align-items:center;gap:12px}.profile-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:linear-gradient(45.95deg,#007aff4d .8%,#007aff 45.27%,#007aff33 99.2%)}.profile-name{width:40px;height:50px;flex:0 0 35px;color:var(--text);font-size:13px;font-weight:400;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center}.content{width:100%;height:calc(100vh - var(--menu-h));min-height:0;flex:1 1 auto;padding:0;display:flex;flex-direction:row;align-items:stretch}.presets{width:300px;height:100%;flex:0 0 300px;padding:0;border-right:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;align-items:flex-start}.section-head{width:100%;height:80px;flex:0 0 80px;padding:20px 30px;display:flex;flex-direction:row;align-items:center;gap:10px}.section-head h1,.section-head h2{height:39px;color:var(--text);font-family:Stack Sans Headline,Inter,sans-serif;font-size:30px;font-weight:500;line-height:39px;letter-spacing:-.02em;display:flex;align-items:center}.section-head h1{width:106px}.section-head h2{width:222px}.preset-list{width:300px;height:calc(100% - 80px);flex:1 1 auto;padding:0 20px;display:flex;flex-direction:column;align-items:flex-start}.preset{width:260px;height:45px;flex:0 0 45px;position:relative;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--text);display:flex;flex-direction:row;align-items:center;gap:14px;overflow:hidden;text-align:left;transition:background-color var(--motion-duration) var(--motion-easing)}.preset:hover,.preset:focus-visible{outline:0;background:var(--hover-fill)}.preset-icon{width:24px;height:24px;flex:0 0 24px;padding:0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);transform:translate(0);transition:transform var(--motion-duration) var(--motion-easing);will-change:transform}.preset-icon img{width:24px;height:24px;display:block}.preset-label{width:195px;height:16px;color:var(--text);font-size:13px;font-weight:400;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translate(0);transition:color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing);will-change:transform}.preset-arrow{position:absolute;right:10px;top:10px;width:24px;height:24px;transform:translate(34px);transition:transform var(--motion-duration) var(--motion-easing);will-change:transform}.preset-arrow:before{content:"";position:absolute;width:8px;height:8px;left:6px;top:7px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:rotate(45deg);transform-origin:center}.preset:hover .preset-icon,.preset:focus-visible .preset-icon{transform:translate(-38px)}.preset:hover .preset-label,.preset:focus-visible .preset-label{color:var(--accent);transform:translate(-38px)}.preset:hover .preset-arrow,.preset:focus-visible .preset-arrow{transform:translate(0)}.settings{width:calc(100% - 300px);height:100%;flex:1 1 auto;min-width:0;padding:40px 40px 0;gap:20px;background:var(--panel);display:flex;flex-direction:column;align-items:flex-start}.dragndrop{width:100%;height:300px;flex:0 0 300px;padding:40px;border:1px dashed var(--accent);border-radius:20px;background:var(--drop);color:var(--text);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}.dragndrop input{display:none}.drop-empty{width:auto;height:39px;color:var(--text);font-family:Stack Sans Headline,Inter,sans-serif;font-size:30px;font-weight:500;line-height:39px;letter-spacing:-.02em;text-align:center;white-space:nowrap}.file-preview{display:grid;justify-items:center;gap:8px}.file-icon{width:40px;height:40px;display:grid;place-items:center;color:var(--accent)}.file-title{max-width:min(720px,70vw);color:var(--text);font-family:Stack Sans Headline,Inter,sans-serif;font-size:30px;font-weight:500;line-height:34px;letter-spacing:-.34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{color:var(--muted);font-size:13px;line-height:16px;letter-spacing:-.12px}.formats{width:100%;height:454px;flex:1 1 454px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:flex-start}.formats .section-head{padding:20px 40px}.output-stack{width:100%;height:374px;flex:1 1 auto;padding:0;gap:10px;display:flex;flex-direction:column;align-items:flex-start}.output-line{--stroke-color: var(--line);--r: 0px;width:100%;height:70px;flex:0 0 70px;position:relative;padding:15px 50px;border:0;border-radius:var(--r);background:var(--surface);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;isolation:isolate;overflow:visible;transition:--r var(--motion-duration) var(--motion-easing),--stroke-color var(--motion-duration) var(--motion-easing)}.output-line:hover,.output-line.is-selected{--stroke-color: var(--accent);--r: 20px}.output-line:before{content:"";position:absolute;inset:-.5px;border:1px solid var(--stroke-color);border-radius:calc(var(--r) + .5px);pointer-events:none;z-index:1}.selection-corner{position:absolute;width:4px;height:4px;background:var(--white);z-index:10}.selection-corner:before{content:"";position:absolute;inset:-.5px;border:1px solid var(--stroke-color);pointer-events:none}.selection-corner.top-left-x{left:calc(var(--r) - 2px);top:-2px}.selection-corner.top-left-y{left:-2px;top:calc(var(--r) - 2px)}.selection-corner.top-right-x{right:calc(var(--r) - 2px);top:-2px}.selection-corner.top-right-y{right:-2px;top:calc(var(--r) - 2px)}.selection-corner.bottom-left-x{left:calc(var(--r) - 2px);bottom:-2px}.selection-corner.bottom-left-y{left:-2px;bottom:calc(var(--r) - 2px)}.selection-corner.bottom-right-x{right:calc(var(--r) - 2px);bottom:-2px}.selection-corner.bottom-right-y{right:-2px;bottom:calc(var(--r) - 2px)}.radius-guide{position:absolute;width:0;height:0;color:var(--stroke-color);visibility:hidden;pointer-events:none;z-index:9}.output-line:hover .radius-guide,.output-line.is-selected .radius-guide{visibility:visible}.radius-guide.top-left{left:0;top:0}.radius-guide.top-right{right:0;top:0}.radius-guide.bottom-left{left:0;bottom:0}.radius-guide.bottom-right{right:0;bottom:0}.radius-dot{position:absolute;display:block;width:4px;height:4px;background:var(--white);border-radius:50%}.radius-dot:before{content:"";position:absolute;inset:-.5px;border:1px solid var(--stroke-color);border-radius:50%;pointer-events:none}.top-left .radius-dot{left:calc(var(--r) - 2px);top:calc(var(--r) - 2px)}.top-right .radius-dot{right:calc(var(--r) - 2px);top:calc(var(--r) - 2px)}.bottom-left .radius-dot{left:calc(var(--r) - 2px);bottom:calc(var(--r) - 2px)}.bottom-right .radius-dot{right:calc(var(--r) - 2px);bottom:calc(var(--r) - 2px)}.leading-control{position:relative;width:32px;height:28px;margin:-2px -4px;flex:0 0 24px;padding:0;border:0;background:transparent;display:block;overflow:visible;cursor:pointer}.leading-viewport{position:relative;width:28px;height:28px;margin:0 2px;display:block;overflow:visible}.video-icon{position:absolute;left:2px;top:2px;width:24px;height:24px;display:block;transform:scale(1);transform-origin:center;visibility:visible;transition:transform var(--motion-duration) var(--motion-easing),visibility 0s linear 0s}.output-line:hover .video-icon,.output-line.is-selected .video-icon{transform:scale(.9);visibility:hidden}.line-checkbox{position:absolute;left:2px;top:2px;width:24px;height:24px;background:var(--white);border-radius:6px;transform:scale(1.1);transform-origin:center;visibility:hidden;transition:transform var(--motion-duration) var(--motion-easing),visibility 0s linear 0s}.output-line:hover .line-checkbox,.output-line.is-selected .line-checkbox{transform:scale(1);visibility:visible}.line-checkbox:before{content:"";position:absolute;inset:-.5px;border:1px solid var(--line);border-radius:6.5px;pointer-events:none}.line-checkbox:after{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--white);-webkit-mask:var(--check-icon) center / 20px 20px no-repeat;mask:var(--check-icon) center / 20px 20px no-repeat;visibility:hidden}.output-line.is-selected .line-checkbox{background:var(--accent)}.output-line.is-selected .line-checkbox:before{border-color:var(--accent)}.output-line.is-selected .line-checkbox:after{visibility:visible}.output-line.is-pressing .line-checkbox{animation:checkbox-pop var(--motion-duration) var(--motion-easing)}@keyframes checkbox-pop{0%{transform:scale(1)}20%{transform:scale(.9)}to{transform:scale(1)}}.meta-block{height:40px;flex:0 0 auto;padding:0 16px;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer}.meta-block{width:140px;background:transparent;transition:background-color var(--motion-duration) var(--motion-easing)}.meta-block.codec{width:150px}.meta-block:hover,.meta-block:focus-within{background:var(--hover-fill)}.meta-label{height:12px;color:var(--muted);font-size:10px;font-weight:400;line-height:12px;letter-spacing:-.12px;text-transform:uppercase;display:flex;align-items:center}.meta-select{width:100%;height:16px;padding:0;border:0;outline:0;appearance:none;background:transparent;color:var(--text);font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:13px;font-weight:400;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;transition:color var(--motion-duration) var(--motion-easing)}.meta-block:hover .meta-select,.meta-block:focus-within .meta-select{color:var(--accent)}.alpha{width:40px;height:40px;flex:0 0 40px;padding:4px;border:1px solid var(--line);border-radius:30px;background:var(--white);display:flex;justify-content:center;align-items:center;gap:10px;isolation:isolate;cursor:pointer}.alpha-icon{width:32px;height:32px;border-radius:30px;display:block;flex:0 0 32px}.pill{width:130px;height:40px;flex:0 0 130px;padding:9px 20px;border:0;border-radius:45px;background:var(--soft);color:var(--text);display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;cursor:pointer}.pill-text{color:var(--text);font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:13px;font-weight:400;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;transition:color var(--motion-duration) var(--motion-easing)}.quality{position:relative;overflow:hidden;transition:background-color var(--motion-duration) var(--motion-easing)}.quality:hover,.quality:focus-visible{background:var(--hover-fill);outline:0}.quality-label{position:relative;z-index:2;width:55px;flex:0 0 55px;transform:translate(0);transition:transform var(--motion-duration) var(--motion-easing)}.quality:hover .quality-label,.quality:focus-visible .quality-label{transform:translate(-82px)}.quality-value{width:24px;flex:0 0 24px}.quality-slider{--slider-track-left: 2.9px;--slider-track-right: 3.1px;--slider-track-width: calc(55px - var(--slider-track-left) - var(--slider-track-right));--slider-thumb-size: 10px;--slider-thumb-start: calc(var(--slider-track-width) / 2);--slider-thumb-visibility-offset: 32ms;position:absolute;width:55px;height:19px;left:calc(50% - 41.5px);top:calc(50% - 9.5px);z-index:1}.quality-slider-track{position:absolute;height:2px;left:var(--slider-track-left);right:var(--slider-track-right);top:calc(50% - 1px);background:var(--line);border-radius:999px;transform:scaleX(0);transform-origin:right center;transition:background-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}.quality:hover .quality-slider-track,.quality:focus-visible .quality-slider-track{background:var(--accent);transform:scaleX(1)}.quality-slider-thumb{position:absolute;width:var(--slider-thumb-size);height:var(--slider-thumb-size);left:calc(var(--slider-track-left) + var(--slider-track-width) / 2 - var(--slider-thumb-size) / 2);top:50%;background:var(--white);border:1px solid var(--line);border-radius:50%;transform:translate(var(--slider-thumb-start),-50%);visibility:hidden;transition:border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing),visibility 0s linear calc(var(--motion-duration) - var(--slider-thumb-visibility-offset))}.quality:hover .quality-slider-thumb,.quality:focus-visible .quality-slider-thumb{border-color:var(--accent);transform:translateY(-50%);visibility:visible;transition:border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing),visibility 0s linear var(--slider-thumb-visibility-offset)}.quality:hover .pill-text,.quality:focus-visible .pill-text{color:var(--accent)}.advanced-settings{overflow:hidden;transition:background-color var(--motion-duration) var(--motion-easing)}.advanced-settings:hover,.advanced-settings:focus-visible{background:var(--hover-fill);outline:0}.settings-icon{width:16px;height:16px;flex:0 0 16px;display:block;color:var(--text);background:currentColor;-webkit-mask:var(--settings-icon) center / 16px 16px no-repeat;mask:var(--settings-icon) center / 16px 16px no-repeat;transform:scaleX(-1) rotate(0);transition:color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}.advanced-settings:hover .settings-icon,.advanced-settings:focus-visible .settings-icon{color:var(--accent);transform:scaleX(-1) rotate(90deg)}.settings-label-mask{width:66px;height:16px;flex:0 0 66px;overflow:hidden}.settings-label-stack{display:flex;flex-direction:column;transform:translateY(0);transition:transform var(--motion-duration) var(--motion-easing)}.advanced-settings:hover .settings-label-stack,.advanced-settings:focus-visible .settings-label-stack{transform:translateY(-16px)}.advanced-settings:hover .settings-label,.advanced-settings:focus-visible .settings-label{color:var(--accent)}.settings-label{width:66px;height:16px;flex:0 0 16px;display:flex;align-items:center}.format-actions{width:100%;height:80px;flex:0 0 80px;padding:0 20px;border-top:1px solid var(--line);display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:32px}.convert,.primary-action,.secondary-action{min-width:56px;height:50px;padding:10px 40px;border:0;border-radius:6px;color:var(--text);background:var(--white);font-size:13px;font-weight:400;line-height:28px;letter-spacing:-.34px;text-transform:uppercase;text-align:center;display:flex;align-items:center;justify-content:center}.convert,.primary-action{width:172px;background:var(--accent);color:var(--white);font-weight:500}.inline-warning,.inline-error{margin:10px 50px 0;font-size:13px;line-height:16px;letter-spacing:-.12px}.inline-warning{color:#8c6b00}.inline-error{color:var(--danger)}.job-summary{margin:10px 50px 0;width:calc(100% - 100px);border:1px solid var(--line);border-radius:6px;background:var(--white);padding:10px;display:grid;gap:8px;font-size:13px;line-height:16px;letter-spacing:-.12px}.job-line{display:grid;grid-template-columns:minmax(0,1fr) 80px 86px;gap:10px;align-items:center}.job-line a{color:var(--accent)}.job-line small{grid-column:1 / -1;color:var(--danger)}.drawer-backdrop{position:fixed;inset:0;z-index:9;background:#03030329;opacity:0;pointer-events:none;transition:opacity var(--motion-duration) var(--motion-easing)}.drawer-backdrop.is-open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;z-index:10;width:min(800px,100vw);height:100vh;border-left:1px solid var(--line);background:var(--white);transform:translate(100%);transition:transform var(--motion-duration) var(--motion-easing);display:flex;flex-direction:column}.drawer.is-open{transform:translate(0)}.drawer-header,.drawer-footer{padding:24px 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.drawer-header h2{color:var(--text);font-family:Stack Sans Headline,Inter,sans-serif;font-size:30px;font-weight:500;line-height:38px;letter-spacing:-.02em}.drawer-header p{margin-top:6px;color:var(--muted);font-size:13px;line-height:16px;letter-spacing:-.12px}.remove-output{width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);display:flex;justify-content:center;align-items:center}.drawer-footer{border-top:1px solid var(--line);border-bottom:0}.drawer-content{flex:1;overflow:auto;padding:8px 32px 32px}.drawer-section{padding:24px 0;border-bottom:1px solid var(--line);display:grid;gap:14px}.drawer-section h3{color:var(--muted);font-size:10px;font-weight:400;line-height:12px;letter-spacing:-.12px;text-transform:uppercase}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.label{color:var(--muted);font-size:10px;line-height:12px;letter-spacing:-.12px;text-transform:uppercase}.drawer select,.drawer input[type=number],.drawer input[type=text]{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--text);font-size:13px;line-height:16px;letter-spacing:-.12px}.drawer input[type=range]{width:100%;accent-color:var(--accent)}.checkbox-row{min-height:40px;color:var(--text);font-size:13px;line-height:16px;letter-spacing:-.12px;display:flex;align-items:center;gap:10px}.checkbox-row input{width:24px;height:24px;accent-color:var(--accent)}.is-disabled{color:var(--muted)}@media(max-width:1180px){:root{--menu-h: 88px}.menu{padding:28px;gap:24px}.primary-nav{width:auto;flex:1 1 auto;gap:28px}.content{height:calc(100vh - var(--menu-h));min-height:0;flex-direction:column;overflow:auto}.presets{width:100%;height:150px;flex-basis:150px;border-right:0;border-bottom:1px solid var(--line)}.preset-list{width:100%;height:70px;flex-direction:row;overflow-x:auto;scrollbar-width:none}.preset-list::-webkit-scrollbar{display:none}.settings{width:100%;height:auto}.dragndrop{height:244px;flex-basis:244px}.formats{height:auto;min-height:430px}.output-stack{height:auto;min-height:280px}.output-line{min-width:920px}}@media(max-width:720px){.menu{padding:18px 20px}.primary-nav{gap:18px}.primary-nav a:not(.brand){display:none}.profile{width:72px;flex-basis:72px;padding:0;justify-content:flex-end}.profile-name{display:none}.section-head{padding:20px}.preset-list{padding:0 20px}.dragndrop{padding:28px 20px}.output-stack{overflow-x:auto;width:100%}.output-line{min-width:860px;padding:15px 20px}.format-actions{padding:0 20px}.field-grid{grid-template-columns:1fr}}
