/* Mediatavio navigation and the focused YouTube converter workspace. */
.hub-header{width:100%;max-width:none;margin:0;padding-left:max(26px,calc((100vw - 1160px)/2));padding-right:max(26px,calc((100vw - 1160px)/2))}
.hub-header .mobile-menu{width:40px;height:38px;padding:0;border:1px solid #e4e9ec;background:#fff;color:#17202b}
.hub-header nav .home-tools-toggle,.hub-header nav .home-tools-panel a{width:auto}
.home-youtube-link[aria-current="page"],.mobile-nav .mobile-youtube-link[aria-current="page"]{background:#f1effc;color:#5141b8}
body{background:#fafbfc;color:#17202b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
main.youtube-main{max-width:1080px;margin:58px auto 76px;padding:0 28px;text-align:center;overflow:visible}
.youtube-heading h1{margin:0 0 18px;font-size:clamp(30px,4vw,49px);line-height:1.18;letter-spacing:-.045em;color:#17202b}
.youtube-heading .intro{max-width:720px;margin:0 auto 36px;font-size:16px;line-height:1.8;color:#77808e}
.youtube-main .youtube-converter{padding:42px 48px 26px;border:1px solid #ded8ec;border-radius:24px;background:linear-gradient(160deg,#f5f0ff,#fcfbff 62%,#fff);box-shadow:0 16px 48px #5c438309;text-align:center}
.youtube-main .url-label{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 24px;font-size:18px;font-weight:700;color:#303247}
.url-label svg{color:#7d55cc;flex-shrink:0}
.youtube-main .input-wrap{min-height:59px;gap:15px;padding:0 20px;border:1px solid #d7c5f7;border-radius:14px;background:#fff}
.youtube-main .input-wrap:focus-within{outline:3px solid #dcd0f875;outline-offset:2px;border-color:#9871d9}
.youtube-main .input-wrap>span{color:#8b61ce;font-size:23px}
.youtube-main input{padding:18px 0;color:#303247;font-size:14px}
.youtube-main input::placeholder{color:#a2a6b3}
.youtube-main .options{justify-content:center;gap:12px;margin:22px 0 18px}
.youtube-main .options label{margin:0;color:#727389;font-size:12px;font-weight:500}
.youtube-main select{min-width:117px;padding:9px 30px 9px 12px;border:1px solid #ded5ec;border-radius:10px;background:#fff;color:#66508e;font-size:13px}
.youtube-main #submit,.youtube-main .download{display:flex;align-items:center;justify-content:center;gap:20px;width:min(100%,310px);min-height:52px;margin:0 auto;padding:14px 24px;border:0;border-radius:13px;background:linear-gradient(110deg,#7158d5,#9766d9);color:#fff;font:inherit;font-size:15px;font-weight:700;box-shadow:0 6px 16px #7956c623;transition:transform .18s,box-shadow .18s}
.youtube-main #submit:hover,.youtube-main .download:hover{transform:translateY(-2px);box-shadow:0 9px 22px #7956c639}
.youtube-main #submit:disabled{transform:none;opacity:.65;cursor:wait}
.youtube-main .hint{margin:16px 0 0;font-size:11px;color:#8b859a;line-height:1.7}
.youtube-main .usage-note{margin:25px 0 0;font-size:11px;color:#8b859a;line-height:1.7}
.youtube-main .status{max-width:680px;margin:24px auto 0;padding-top:22px;border-top:1px solid #e8e0f1;text-align:left}
.youtube-main .status-line{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#6a528e;font-size:13px}
.youtube-main #percent{font-variant-numeric:tabular-nums;font-weight:700}
.youtube-main progress{appearance:none;display:block;width:100%;height:9px;overflow:hidden;margin:13px 0;border:0;border-radius:20px;background:#e9e1f3;color:#8b61ce;accent-color:#8b61ce}
.youtube-main progress::-webkit-progress-bar{background:#e9e1f3;border-radius:20px}
.youtube-main progress::-webkit-progress-value{background:linear-gradient(90deg,#9b7be5,#7654cb);border-radius:20px;transition:width .4s}
.youtube-main progress::-moz-progress-bar{background:#8962d2;border-radius:20px}
.youtube-main #result-title{margin:12px 0;font-size:13px;color:#565166;text-align:center;overflow-wrap:anywhere}
.youtube-main #result-title:empty{display:none}
.youtube-main .download{margin-top:16px}
.youtube-main .retry{display:table;width:auto;min-height:36px;margin:10px auto 0;padding:7px 15px;border:1px solid #e2d8f0;border-radius:9px;background:#f2ecfb;color:#7855ae;box-shadow:none;text-align:center;font-size:12px;font-weight:500}
.youtube-main .status.error .status-line{color:#a24f64}
.youtube-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:42px 0 52px;text-align:left}
.youtube-steps>div{position:relative;padding:0 8px}
.youtube-steps>div>span{display:inline-grid;place-items:center;width:32px;height:32px;margin:0 0 12px;border:1px solid #e4dbf3;border-radius:11px;background:#f2ecfb;color:#8660bd;font-size:11px;font-weight:700}
.youtube-steps h2{margin:0 0 8px;font-size:15px;font-weight:650;color:#343343;letter-spacing:-.01em}
.youtube-steps p{margin:0;font-size:12px;line-height:1.8;color:#898393}
.youtube-faq{max-width:760px;margin:0 auto;text-align:left}
.youtube-faq h2{margin:0 0 16px;font-size:22px;letter-spacing:-.025em}
.youtube-faq details{padding:16px 0;border-bottom:1px solid #e8e4ee;font-size:13px;color:#554f64}
.youtube-faq summary{cursor:pointer;font-weight:550}
.youtube-faq details p{margin:12px 0 0;color:#85808e;line-height:1.8}
footer.hub-footer{max-width:1160px;margin:0 auto;padding:25px 24px 32px;border-top:1px solid #e4e9ec;color:#65717d;font-size:12px}
.youtube-main :focus-visible{outline:3px solid #bba5e4;outline-offset:3px}
@media(max-width:800px){.hub-header{padding-left:20px;padding-right:20px}.hub-header .mobile-menu{flex:0 0 40px}main.youtube-main{margin-top:38px;padding:0 20px}.youtube-heading .intro{font-size:14px}.youtube-main .youtube-converter{padding:30px 25px 23px}.youtube-steps{gap:16px}}
@media(max-width:520px){main.youtube-main{padding:0 15px;margin-top:32px}.youtube-heading h1{font-size:31px}.youtube-heading .intro{margin-bottom:25px}.youtube-main .youtube-converter{padding:28px 17px 20px;border-radius:20px}.youtube-main .url-label{font-size:16px}.youtube-main .input-wrap{padding:0 13px;gap:9px}.youtube-main input{font-size:12px}.youtube-main #submit{width:100%}.youtube-steps{grid-template-columns:1fr;gap:22px;margin:32px 0 40px}.youtube-steps>div{padding-left:50px}.youtube-steps>div>span{position:absolute;left:0;top:2px}.youtube-faq h2{font-size:21px}.youtube-main .hint,.youtube-main .usage-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.youtube-main #submit,.youtube-main .download,.youtube-main progress::-webkit-progress-value{transition:none}}

.youtube-main .options{flex-wrap:wrap;gap:18px 26px}.youtube-main .options .output-option{gap:10px}.youtube-main .format-info{margin:-4px 0 20px;text-align:center;color:#8b859a;font-size:11px;line-height:1.7}@media(max-width:420px){.youtube-main .options .output-option{flex:1 1 100%;justify-content:space-between}.youtube-main .options select{min-width:145px}}

.youtube-main .keep-page-notice{display:flex;align-items:flex-start;gap:12px;margin:6px 0 20px;padding:16px 17px;border:1px solid #d8c6f0;border-left:4px solid #a484d0;border-radius:12px;background:#f7f1fd;color:#82649c}.youtube-main .keep-page-notice>svg{flex:none;margin-top:1px}.youtube-main .keep-page-notice strong{display:block;color:#785590;font-size:13px;line-height:1.55}.youtube-main .keep-page-notice p{margin:6px 0 0;color:#9b83ad;font-size:12px;line-height:1.8}.youtube-main .status .keep-page-active{padding:10px 13px;border-radius:9px;background:#f6effd;color:#9875b2;font-size:12px;line-height:1.7}.youtube-main .status.error .keep-page-active,.youtube-main .status:has(progress[hidden]) .keep-page-active,.youtube-main .status:has(.download:not([hidden])) .keep-page-active{display:none}@media(max-width:480px){.youtube-main .keep-page-notice{padding:14px 12px;gap:9px}.youtube-main .keep-page-notice strong{font-size:12px}.youtube-main .keep-page-notice p{font-size:11px}}