@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--canvas:#f8f7f3;--white:#fff;--ink:#191b18;--body:#5c6059;--muted:#70746b;--line:#e5e5dc;--yellow:#ffda00;--focus:#635600}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.65 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button,input{border:0}svg,img{display:block}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.skip-link{position:fixed;top:-80px;left:20px;background:var(--ink);color:white;padding:12px 20px;z-index:10;border-radius:8px}.skip-link:focus{top:12px}
.header-inner{max-width:1180px;margin:auto;height:100px;padding:0 28px;display:flex;align-items:center;gap:40px}.brand{display:inline-flex;align-items:center;gap:10px;font:700 27px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-1.2px}.brand-icon{width:41px;height:41px;object-fit:contain}.header-inner nav{display:flex;gap:32px;margin-left:auto;color:var(--body);font-size:13px;font-weight:500}.header-inner nav a{padding:12px 0}.header-inner nav a:hover{color:var(--ink)}.header-cta{display:flex;align-items:center;gap:18px;background:#eeeee6;border-radius:8px;padding:11px 16px;font-size:12px;font-weight:600}.header-cta .icon{width:16px;height:16px}.header-cta:hover{background:#e5e5d9}
.hero{padding:28px 28px 0}.hero-inner{max-width:1124px;margin:auto}.hero-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center;min-height:345px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:1.8px;margin:0 0 19px;color:var(--body)}.eyebrow>span{height:7px;width:7px;background:var(--yellow);border:1px solid #c6aa00;border-radius:50%}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif}.hero h1{position:relative;display:inline-block;font-weight:700;font-size:68px;letter-spacing:-4px;line-height:1.06;margin:0}.hero h1>span{position:relative;z-index:1;display:inline-block}.hero h1>span:before{content:'';position:absolute;bottom:2px;left:-4px;right:-10px;background:var(--yellow);height:18px;z-index:-1;transform:rotate(-2deg)}.title-spark{width:30px;height:30px;position:absolute;right:-49px;top:69px;color:var(--ink);transform:rotate(10deg)}.intro{font-size:14px;line-height:1.9;margin:23px 0 0;color:var(--body)}.hero-tags{display:flex;gap:17px;margin-top:22px}.hero-tags span{font-size:10px;display:flex;align-items:center;gap:7px;font-weight:500;color:#62665c}.hero-tags span:before{content:'';width:4px;height:4px;border-radius:50%;background:#aaa994}.hero-art img{width:100%;height:auto;max-width:500px;margin-left:auto}
.converter{background:var(--white);border:1px solid #e1e2d9;border-radius:17px;margin:31px auto 0;padding:22px 26px 20px;box-shadow:0 12px 40px #20261706;position:relative}.converter-caption{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;font-weight:700;color:#797d70;margin-bottom:15px}.converter-caption-right{font-weight:400;letter-spacing:0;font-size:11px;color:#797d70}.mode-switch{display:flex;gap:22px;border-bottom:1px solid #eeeFe8;margin-bottom:18px}.mode{display:flex;align-items:center;gap:8px;background:transparent;color:#7c8075;border-bottom:2px solid transparent;padding:0 0 12px;font-size:12px;font-weight:600}.mode .icon{height:17px;width:17px}.mode.active{color:var(--ink);border-color:var(--ink)}.mode:hover{color:var(--ink)}.url-box{display:flex;align-items:center;gap:12px;border:1px solid #dedfd5;background:#fafbf7;border-radius:9px;padding:6px;transition:border-color .15s,box-shadow .15s}.url-box:focus-within{border-color:#9c9673;box-shadow:0 0 0 3px #ffda0024}.url-box.has-error{border-color:#ae6653}.input-icon{margin-left:12px;color:#858b7b;height:21px;width:21px}#url{min-width:0;width:100%;flex:1;background:transparent;color:var(--ink);padding:12px 0;font-size:13px;line-height:1.6}#url:focus{outline:none}#url::placeholder{color:#888d81;opacity:1}.clear-url{background:transparent;color:#73796b;height:32px;width:30px;font-size:23px;flex-shrink:0;border-radius:6px}.clear-url:hover{background:#eeeee4}.submit{display:flex;justify-content:center;align-items:center;gap:26px;background:var(--yellow);color:#222415;font-size:12px;font-weight:700;padding:15px 25px;border-radius:6px;flex-shrink:0;min-height:49px;transition:background .15s,transform .15s}.submit:hover{background:#edcd00;transform:translateY(-1px)}.submit .icon{height:18px;width:18px}.input-help{font-size:10px;color:var(--muted);margin:10px 0 0}.form-status{margin:12px 0 0;padding:12px 15px;border:1px solid #e3deba;border-radius:7px;font-size:12px;color:#59532d;background:#fbf9e9}.form-status.error{background:#fbefea;color:#8c4735;border-color:#edd6cf}.platforms{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:27px;border-top:1px solid #eeeee6;padding-top:17px;margin-top:18px;color:#777d6d}.platforms>span{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500}.platforms .icon{height:17px;width:17px}.preview-notice{display:flex;justify-content:center;align-items:center;gap:7px;font-size:9px;color:#72776a;margin:15px 0 0}.preview-notice>span{width:5px;height:5px;border-radius:50%;background:#ada788}
.benefits{max-width:1124px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);padding:40px 0 37px;border-bottom:1px solid var(--line)}.benefit{display:flex;gap:14px;align-items:center;justify-content:center;padding:0 22px}.benefit+.benefit{border-left:1px solid var(--line)}.benefit>.icon{height:37px;width:37px;padding:9px;border-radius:10px;background:#efefe6;color:#4e5443;stroke-width:1.6}.benefit h2{font-size:12px;font-weight:600;letter-spacing:-.2px;margin:0 0 3px}.benefit p{font-size:10px;color:var(--muted);margin:0}.section-container{max-width:1124px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.how{background:#20231e;color:#fff;border-radius:20px;margin:49px auto 0;padding:45px 48px;position:relative;overflow:hidden}.how:after{content:'ϟ';font:bold 340px/1 Arial,sans-serif;position:absolute;left:170px;bottom:-130px;color:#ffffff03;pointer-events:none}.section-heading .eyebrow{font-size:9px;margin-bottom:18px;color:#797f71}.section-heading h2{font-size:35px;letter-spacing:-1.8px;line-height:1.15;margin:0;font-weight:600}.section-heading>p:last-child:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.9;margin:20px 0 0}.how .eyebrow{color:#b2baa4}.how h2 span{color:var(--yellow)}.how .section-heading>p:last-child{color:#aeb6a4}.steps{margin:0;padding:0;list-style:none}.steps li{display:flex;gap:18px;padding:0 0 23px;position:relative}.steps li:last-child{padding-bottom:0}.step-number{width:32px;height:32px;display:grid;place-items:center;border:1px solid #565f4b;border-radius:50%;color:#d6ddca;font-size:10px;flex-shrink:0}.steps li:first-child .step-number{background:var(--yellow);border-color:var(--yellow);color:#252819}.steps li:not(:last-child):before{content:'';position:absolute;top:36px;left:16px;height:calc(100% - 40px);border-left:1px solid #42493b}.steps h3{font-size:13px;font-weight:500;margin:4px 0 5px}.steps p{font-size:11px;color:#aeb6a4;line-height:1.8;margin:0;max-width:350px}.faq{padding:65px 30px 70px;gap:85px}.faq .section-heading{padding-left:18px}.questions details{border-bottom:1px solid var(--line)}.questions summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:17px 0;font-size:12px;font-weight:500}.questions details:first-child summary{padding-top:2px}.questions summary::-webkit-details-marker{display:none}.questions summary .icon{height:16px;width:16px;transition:transform .2s;color:#848c77}.questions details[open] .icon{transform:rotate(180deg)}.questions details p{margin:0;padding:0 20px 18px 0;color:var(--body);font-size:12px;line-height:1.9}.questions summary:hover{color:#747054}.site-footer{border-top:1px solid var(--line)}.footer-inner{max-width:1180px;margin:auto;padding:25px 28px;display:flex;gap:24px;align-items:center}.brand.small{font-size:22px}.brand.small .brand-icon{height:29px;width:29px}.footer-inner>p{font-size:10px;color:var(--muted);margin:0}.footer-inner>span{margin-left:auto;color:var(--muted);font-size:10px}.footer-divider{color:#c6cabe;margin:0 8px}
@media(min-width:1550px){.header-inner{height:110px}.hero{padding-top:40px}.hero-layout{min-height:385px}.hero h1{font-size:76px}.hero-art img{max-width:530px}.converter{margin-top:38px}}
@media(max-width:1000px){.hero h1{font-size:58px;letter-spacing:-3px}.title-spark{width:25px;right:-35px;top:60px}.hero-layout{gap:8px}.intro{font-size:13px}.header-inner{height:88px}.benefits{margin:0 28px}.benefit{padding:0 13px;gap:10px}.benefit h2{font-size:11px}.how{margin:38px 28px 0;padding:37px;gap:45px}.section-heading h2{font-size:30px}.faq{margin:0 28px;gap:45px}.faq .section-heading{padding-left:7px}}
@media(max-width:700px){.header-inner{height:78px;padding:0 22px;gap:20px}.brand{font-size:24px}.brand-icon{width:36px;height:36px}.header-inner nav{font-size:11px;gap:20px}.header-cta{display:none}.hero{padding:25px 22px 0}.hero-layout{grid-template-columns:1fr;gap:5px;min-height:0}.hero-copy{position:relative;z-index:1}.hero .eyebrow{font-size:9px;margin-bottom:17px}.hero h1{font-size:57px;letter-spacing:-3px}.title-spark{top:56px;right:-39px;width:26px}.hero h1>span:before{height:15px;bottom:1px}.intro{font-size:13px;margin-top:19px}.hero-tags{margin-top:17px;gap:15px}.hero-tags span{font-size:9px}.hero-art{width:100%;max-width:360px;margin:-8px auto -20px}.hero-art img{max-height:246px;width:100%;object-fit:contain}.converter{margin-top:24px;padding:19px 17px 17px;border-radius:13px}.converter-caption{font-size:8px;letter-spacing:1.2px;margin-bottom:17px}.converter-caption-right{display:none}.mode-switch{gap:20px;margin-bottom:15px}.mode{font-size:11px;padding-bottom:11px}.url-box{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:0 8px;padding:7px}.input-icon{margin-left:3px;width:19px;height:19px}#url{padding:12px 0 14px;font-size:11px}.clear-url{width:24px}.submit{grid-column:1/-1;justify-content:space-between;width:100%;padding:13px 15px;min-height:47px;font-size:12px}.input-help{font-size:9px;line-height:1.8;margin-top:11px}.platforms{gap:14px 22px;padding-top:15px;margin-top:16px}.platforms>span{font-size:9px;gap:6px}.platforms .icon{width:16px;height:16px}.preview-notice{font-size:8px;margin-top:14px;gap:5px}.benefits{grid-template-columns:1fr;gap:20px;margin:0 28px;padding:29px 0}.benefit{justify-content:flex-start;padding:0;gap:13px}.benefit+.benefit{border:0}.benefit h2{font-size:12px}.benefit p{font-size:11px}.benefit>.icon{height:36px;width:36px}.section-container{grid-template-columns:1fr;gap:28px}.how{padding:30px 25px;margin:31px 22px 0;border-radius:16px}.section-heading h2{font-size:32px;letter-spacing:-1.5px}.section-heading .eyebrow{font-size:8px;margin-bottom:15px}.section-heading>p:last-child:not(.eyebrow){font-size:12px;margin-top:16px}.steps li{gap:17px;padding-bottom:22px}.steps h3{font-size:13px}.steps p{font-size:11px}.faq{margin:0 28px;padding:42px 0 45px;gap:27px}.faq .section-heading{padding-left:0}.questions summary{min-height:53px;font-size:12px}.footer-inner{padding:24px;gap:12px;flex-wrap:wrap}.footer-inner>p{margin-left:auto;font-size:9px}.footer-inner>span{width:100%;margin:4px 0 0;font-size:9px}.brand.small{font-size:20px}}
@media(max-width:700px){.hero-inner{display:flex;flex-direction:column}.hero-layout{display:contents}.hero-copy{order:0}.converter{order:1;width:100%}.preview-notice{order:2}.hero-art{order:3;max-width:270px;margin:10px auto -5px}.hero-art img{max-height:194px}}
@media(max-width:370px){.hero h1{font-size:49px}.title-spark{top:49px;right:-30px;width:22px}.header-inner nav{gap:12px;font-size:10px}.intro{font-size:12px}}
.media-panel{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.media-header{display:flex;gap:18px;align-items:center}.media-picture{width:130px;height:78px;background:#efefe6;border-radius:8px;position:relative;overflow:hidden;flex-shrink:0;display:grid;place-items:center}.media-picture>img{position:absolute;width:100%;height:100%;object-fit:cover;z-index:1}.media-picture>.icon{width:30px;height:30px;color:#8d917e}.media-description{min-width:0}.media-source{font-size:10px;color:var(--muted);margin:0 0 5px}.media-description h2{font-size:18px;line-height:1.4;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}.media-author{font-size:11px;color:var(--body);margin:5px 0 0}.media-controls{display:flex;align-items:center;gap:30px;margin-top:23px}.quality-control{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500}.quality-control select{background:#f8f8f3;border:1px solid #dddfd2;border-radius:6px;padding:9px 30px 9px 12px;font:inherit;color:var(--ink)}.trim-toggle{display:flex;align-items:center;gap:8px;font-size:12px}.trim-toggle input{accent-color:#8c7900;width:16px;height:16px}.clip-controls{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}.clip-controls label{font-size:11px;color:var(--body);display:flex;align-items:center;gap:10px}.clip-controls input{width:94px;padding:9px 10px;background:#f8f8f3;border:1px solid #dddfd2;border-radius:6px;color:var(--ink)}.clip-controls>p{font-size:10px;color:var(--muted);margin:0}.prepare-row{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:22px}.prepare-row>p{font-size:11px;color:var(--body)}button:disabled{opacity:.55;cursor:wait;transform:none}.job-panel{background:#f8f8f2;border:1px solid #e5e5d8;border-radius:9px;margin-top:18px;padding:16px}.job-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;font-weight:600}.job-panel progress{display:block;width:100%;height:7px;appearance:none;border:0;border-radius:6px;overflow:hidden;background:#e6e8dc;margin:13px 0}.job-panel progress::-webkit-progress-bar{background:#e6e8dc}.job-panel progress::-webkit-progress-value{background:#c9ad00;border-radius:6px;transition:width .5s}.job-panel progress::-moz-progress-bar{background:#c9ad00}.job-panel>p{font-size:10px;color:var(--muted);margin:0}.file-link{display:inline-flex;align-items:center;gap:12px;margin-top:16px;border-radius:6px;background:var(--ink);color:white;font-size:12px;font-weight:600;padding:13px 18px}.file-link .icon{width:18px;height:18px}.file-link:hover{background:#353b29}@media(max-width:700px){.media-header{gap:12px}.media-picture{width:85px;height:70px}.media-description h2{font-size:14px}.media-source{font-size:9px}.media-author{font-size:10px}.media-controls{flex-wrap:wrap;gap:17px}.prepare-row{align-items:stretch;flex-direction:column;gap:5px}.prepare-row>p{font-size:10px;margin:0 0 8px}.prepare-row .submit{display:flex}.clip-controls{gap:10px}.clip-controls label{gap:7px;font-size:10px}.clip-controls input{width:70px;font-size:11px}.clip-controls>p{width:100%;font-size:9px}.job-caption{font-size:11px}.file-link{width:100%;justify-content:center;font-size:11px}.preview-notice{flex-wrap:wrap;line-height:1.7}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}