*,:before,:after{box-sizing:border-box}:root{--bg:#f7f5f0;--surface:#fffefa;--surface-dim:#f1eee7;--surface-muted:#e9e5dc;--text:#292b26;--text-secondary:#66695f;--text-muted:#77796f;--primary:#9a472f;--primary-hover:#803923;--primary-light:#f3e7de;--green:#4b6850;--red:#b23f36;--amber:#92651f;--radius:22px;--radius-sm:12px;--font:Inter,"Segoe UI",Arial,sans-serif;--font-display:var(--font);--gradient:linear-gradient(100deg,#ad563b,#95422d)}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;line-height:1.55}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}svg{flex-shrink:0}img{max-width:100%}p,h1,h2,h3{margin:0}a{text-decoration:none}:focus-visible{outline-offset:5px;outline:3px solid #9a472f}::selection{color:#292b26;background:#e8b298}#app-header{z-index:100;backdrop-filter:blur(12px);background:#f7f5f0f2;position:sticky;top:0}.nav-inner{justify-content:space-between;align-items:center;gap:24px;max-width:1136px;margin:auto;padding:22px 28px;display:flex}.logo-group{align-items:center;gap:11px;display:inline-flex}.brand-icon{border-radius:22%;flex-shrink:0;display:block}.logo-text{letter-spacing:-.8px;font-size:21px;font-weight:750}.brand-period{color:var(--primary)}.nav-pills{align-items:center;gap:30px;display:flex}.nav-pill{color:var(--text-secondary);font-size:13px;font-weight:550;transition:color .15s}.nav-pill:hover{color:var(--primary)}.nav-github{margin-left:10px}.nav-github span{padding-left:5px}#hero-section{max-width:1136px;margin:auto;padding:64px 28px 60px}.hero-inner{grid-template-columns:1.45fr 1fr;align-items:center;gap:64px;display:grid}.eyebrow{letter-spacing:1.7px;color:var(--text-secondary);align-items:center;gap:9px;margin-bottom:24px;font-size:10px;font-weight:650;display:flex}.status-dot{background:var(--green);border-radius:50%;width:6px;height:6px}.hero-title{letter-spacing:-3.5px;margin-bottom:25px;font-size:clamp(44px,5.6vw,72px);font-weight:650;line-height:1.08}.hero-title span{color:var(--primary)}.hero-subtitle{max-width:430px;color:var(--text-secondary);font-size:17px;line-height:1.75}.hero-assurance{color:var(--text-secondary);align-items:center;gap:8px;margin-top:26px;font-size:12px;display:flex}.hero-art{flex-direction:column;align-items:center;display:flex;position:relative}.hero-art>img{filter:drop-shadow(0 16px 22px #7e462812);width:min(100%,320px);height:auto;transform:rotate(-5deg)}.art-caption{letter-spacing:1.7px;color:var(--text-secondary);margin-top:30px;font-size:8px}#app-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:24px;max-width:1136px;margin:0 auto;padding:0 28px 72px;display:grid}#drop-section{grid-column:1/-1}#drop-zone{background:var(--surface);border-radius:var(--radius);cursor:pointer;border:1.5px dashed #c9c5ba;padding:42px 28px;transition:background .2s,border-color .2s}#drop-zone:hover,#drop-zone.drag-over{border-color:var(--primary);background:#f7ede5}.drop-visual{justify-content:center;align-items:center;gap:20px;display:flex}.drop-icon{width:58px;height:58px;color:var(--primary)}.drop-icon svg{width:100%;height:100%}.drop-title{letter-spacing:-.5px;margin-bottom:4px;font-size:20px;font-weight:600}.drop-subtitle{color:var(--text-secondary);font-size:13px}.drop-link{color:var(--primary);text-underline-offset:3px;text-decoration:underline}.drop-badges{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:25px;display:flex}.drop-badge{color:var(--text-secondary);align-items:center;gap:5px;font-size:10px;display:inline-flex}.format-list{color:var(--text-muted)}#drop-zone.file-loaded{text-align:center;color:var(--green);padding:18px;font-size:13px}#drop-zone.file-loaded .drop-visual,#drop-zone.file-loaded .drop-badges{display:none}#drop-zone.file-loaded:after{content:"✓ Video selected. Choose another file ↗"}.card{background:var(--surface);border-radius:var(--radius);padding:28px}.card-header{margin-bottom:26px}.section-title{letter-spacing:-.45px;align-items:center;gap:10px;font-size:19px;font-weight:650;display:flex}.section-icon{display:none}.section-title-success{color:var(--green)}#file-info-panel,#settings-section,#progress-section,#download-section{display:none}#file-info-panel.visible,#settings-section.visible,#progress-section.visible,#download-section.visible{display:block}#file-info-panel{grid-column:1}#settings-section{grid-column:2}#progress-section,#download-section{grid-column:1/-1}#settings-section.compressing{opacity:.55;pointer-events:none}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:25px;display:grid}.info-item{min-width:0}.info-item:first-child{grid-column:1/-1}.info-label,.result-label,.stat-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:5px;font-size:10px;display:block}.info-value{overflow-wrap:anywhere;font-size:13px;font-weight:500;display:block}.preview-container{border-radius:var(--radius-sm);background:#242822;overflow:hidden}.preview-container video{object-fit:contain;width:100%;max-height:340px;display:block}.preview-label{color:var(--text-secondary);margin:20px 0 10px;font-size:12px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px;display:grid}.setting-full{grid-column:1/-1}.setting-label{font-size:12px;font-weight:600;display:block}.setting-hint{color:var(--text-secondary);margin:6px 0 12px;font-size:11px;line-height:1.65}.radio-group{flex-wrap:wrap;gap:7px;display:flex}.radio-option{background:var(--surface-dim);cursor:pointer;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;min-width:64px;padding:9px 11px;font-size:11px;display:flex;position:relative}.radio-option input{opacity:0;width:1px;height:1px;position:absolute}.radio-option:has(input:checked){background:var(--primary-light);color:var(--primary)}.radio-option:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}.radio-option:has(input:disabled){opacity:.4;cursor:not-allowed}.radio-text{font-weight:600}.radio-badge,.radio-custom{display:none}.styled-select,.styled-input{background:var(--surface);width:100%;color:var(--text);border:1px solid #ded9cf;border-radius:8px;padding:10px 12px;font-size:12px}.styled-select{cursor:pointer}.styled-range{width:100%;accent-color:var(--primary);cursor:pointer;height:20px;margin:15px 0 0}.toggle-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.toggle-row .setting-hint{margin-bottom:0}.toggle-switch{cursor:pointer;flex-shrink:0;width:36px;height:21px;display:block;position:relative}.toggle-switch input{opacity:0;width:1px;height:1px;position:absolute}.toggle-slider{background:#dedbd2;border-radius:20px;transition:background .2s;position:absolute;inset:0}.toggle-slider:before{content:"";background:var(--surface);border-radius:50%;width:15px;height:15px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0002}.toggle-switch input:checked+.toggle-slider{background:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(15px)}.toggle-switch:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:4px;border-radius:20px}.sub-controls{background:var(--surface-dim);border-radius:10px;margin-top:14px;padding:14px;display:none}.sub-controls.visible{display:block}.trim-inputs{align-items:end;gap:10px;display:flex}.trim-field{flex:1;min-width:0}.trim-field label{margin-bottom:5px;font-size:10px;display:block}.trim-separator{width:18px;color:var(--text-muted);padding-bottom:7px}.trim-separator svg{width:18px}.size-estimate{border-radius:var(--radius-sm);background:#f3eee5;margin:26px 0 20px;padding:19px}.estimate-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.estimate-heading>div{flex-direction:column;gap:7px;display:flex}#estimated-size{letter-spacing:-.7px;font-size:24px;font-weight:600}.size-estimate .setting-hint{margin:8px 0 0;font-size:10px}.btn{border:none;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:12px 19px;font-size:12px;font-weight:600;transition:background .15s,transform .15s;display:inline-flex}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:not(:disabled):hover{background:var(--primary-hover)}.btn-secondary{background:var(--surface-muted);color:var(--text)}.btn-danger{color:var(--red);background:#f7e4df}.size-estimate .btn{background:#e7dfd2;padding:9px 12px;font-size:10px}.action-row{gap:10px;display:flex}.action-row .btn-primary{flex:1}.btn-outline{color:var(--text);background:0 0;border:1px solid #ded9cf}.btn-outline:hover{background:var(--surface-muted)}#download-section .action-row{flex-wrap:wrap;margin-top:22px}#cancel-btn{display:none}#cancel-btn.visible{display:inline-flex}.progress-bar-wrapper{align-items:center;gap:16px;margin:24px 0 14px;display:flex}.progress-bar{background:var(--surface-muted);border-radius:8px;flex:1;height:7px;overflow:hidden}.progress-bar-fill{background:var(--primary);border-radius:8px;width:0;height:100%;transition:width .1s linear}.progress-percent{font-variant-numeric:tabular-nums;text-align:right;min-width:62px;font-size:12px}.progress-indeterminate{position:relative}.progress-indeterminate:after{content:"";background:linear-gradient(90deg,transparent,var(--primary),transparent);width:35%;animation:1.2s ease-in-out infinite progress-pending;position:absolute;inset:0 auto 0 0}@keyframes progress-pending{0%{transform:translate(-100%)}to{transform:translate(300%)}}.progress-detail{color:var(--text-secondary);flex-wrap:wrap;gap:8px 20px;margin-bottom:25px;font-size:11px;display:flex}.stats-grid{background:var(--surface-dim);border-radius:var(--radius-sm);grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:19px;display:grid}.stat-value{font-variant-numeric:tabular-nums;font-size:17px;font-weight:600}.result-grid{background:var(--surface-dim);border-radius:var(--radius-sm);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:22px;padding:20px;display:flex}.result-item{flex:1;min-width:90px}.result-value{letter-spacing:-.5px;font-size:18px;font-weight:600}.result-arrow{min-width:20px;color:var(--text-muted);flex:0}.result-green{color:var(--green)}.result-highlight{color:var(--primary)}.download-actions{flex-wrap:wrap;gap:10px;margin-top:22px;display:flex}.cap-warning{background:#faead5;border-radius:12px;max-width:1080px;margin:0 auto 22px;padding:14px 20px;font-size:12px;display:none}.cap-warning.visible{display:block}.information-section{max-width:1136px;margin:0 auto;padding:30px 28px 70px}.information-header{margin-bottom:36px}.information-header .eyebrow{margin-bottom:12px}.information-header h2{letter-spacing:-1.2px;font-size:30px;font-weight:600;line-height:1.3}.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;display:grid}.step-number{color:var(--primary);margin-bottom:20px;font-size:12px;display:block}.step-card h3{letter-spacing:-.3px;margin-bottom:10px;font-size:15px;font-weight:600}.step-card p{color:var(--text-secondary);max-width:280px;font-size:13px;line-height:1.8}.faq-section{grid-template-columns:1fr 1.3fr;gap:65px;padding-top:45px;display:grid}.faq-list details{border-top:1px solid #dedbd2;padding:19px 0}.faq-list summary{cursor:pointer;justify-content:space-between;gap:24px;font-size:13px;font-weight:550;list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:18px;font-weight:400;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{color:var(--text-secondary);max-width:460px;margin-top:15px;font-size:12px;line-height:1.8}#app-footer{max-width:1136px;margin:auto;padding:35px 28px}.footer-inner{border-top:1px solid #dedbd2;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;display:flex}.footer-inner .logo-text{letter-spacing:-.4px;font-size:15px}.footer-inner p,.footer-sub{color:var(--text-secondary);font-size:11px}#toast-container{z-index:200;flex-direction:column;gap:10px;display:flex;position:fixed;top:95px;right:24px}.toast{background:var(--surface);border-radius:12px;align-items:center;gap:10px;max-width:min(380px,100vw - 40px);padding:15px 20px;font-size:12px;transition:transform .25s;display:flex;transform:translate(calc(100% + 40px));box-shadow:0 8px 35px #292b2620}.toast-show{transform:translate(0)}.toast-success .toast-icon{color:var(--green)}.toast-error .toast-icon{color:var(--red)}.toast-info .toast-icon{color:var(--primary)}body:has(#drop-zone.file-loaded) #hero-section{padding-top:20px;padding-bottom:32px}body:has(#drop-zone.file-loaded) .hero-inner{display:block}body:has(#drop-zone.file-loaded) .hero-art,body:has(#drop-zone.file-loaded) .hero-assurance{display:none}body:has(#drop-zone.file-loaded) .hero-title{letter-spacing:-1.8px;margin-bottom:12px;font-size:40px}body:has(#drop-zone.file-loaded) .hero-title br{display:none}body:has(#drop-zone.file-loaded) .hero-title span{margin-left:10px}body:has(#drop-zone.file-loaded) .eyebrow{margin-bottom:12px}body:has(#drop-zone.file-loaded) .hero-subtitle{max-width:none;font-size:14px}@media (width<=900px){.hero-inner{gap:30px}.hero-title{letter-spacing:-2.8px;font-size:54px}#app-main{grid-template-columns:1fr}#file-info-panel,#settings-section{grid-column:1/-1}.faq-section{gap:30px}.settings-grid{gap:24px}.preview-container video{max-height:270px}}@media (width<=600px){.nav-inner{padding:18px 20px}.brand-icon{width:34px;height:34px}.logo-text{font-size:19px}.nav-pills{gap:15px}.nav-pill{font-size:11px}.nav-github{display:none}#hero-section{padding:35px 22px 30px}.hero-inner{grid-template-columns:1fr;gap:32px}.hero-title{letter-spacing:-2.7px;font-size:49px}.hero-subtitle{font-size:15px}.hero-art{flex-direction:row;justify-content:flex-start;gap:25px}.hero-art>img{width:115px}.art-caption{max-width:120px;margin-top:0;font-size:8px;line-height:1.8}.hero-assurance{margin-top:20px}.eyebrow{letter-spacing:1.4px;font-size:9px}#app-main{gap:18px;padding:0 18px 40px}#drop-zone{padding:32px 16px}.drop-visual{text-align:center;flex-direction:column;gap:12px}.drop-title{font-size:19px}.drop-badges{gap:8px 15px;margin-top:22px}.drop-badge{font-size:9px}.drop-badge:nth-child(3){display:none}.card{border-radius:18px;padding:23px 20px}.settings-grid{gap:23px 14px}.section-title{font-size:18px}.size-estimate{padding:16px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{gap:20px}.result-arrow{display:none}.result-item{min-width:100px}.information-section{padding:30px 24px 45px}.information-header h2{font-size:27px}.steps-grid{grid-template-columns:1fr;gap:28px}.step-card{grid-template-columns:32px 1fr;gap:0 12px;display:grid}.step-number{grid-row:1/3;margin-top:2px}.step-card p{max-width:none}.faq-section{grid-template-columns:1fr;gap:0}.faq-section .information-header{margin-bottom:20px}.footer-inner{flex-wrap:wrap;gap:17px}.footer-inner p{order:3;width:100%}#app-footer{padding:20px 24px 35px}.footer-inner .brand-icon{width:28px;height:28px}body:has(#drop-zone.file-loaded) .hero-title{letter-spacing:-1px;font-size:30px}body:has(#drop-zone.file-loaded) .hero-title br{display:block}body:has(#drop-zone.file-loaded) .hero-title span{margin-left:0}.cap-warning{margin:0 18px 18px}.progress-detail{gap:6px 12px;font-size:10px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}
