:root{--bg:#fff;--text:#000;--text-muted:#666;--border:#000;--accent:#000;--accent-text:#fff;--error:#e00000;--font:"JetBrains Mono", system-ui, -apple-system, sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#121212;--text:#fff;--text-muted:#999;--border:#fff;--accent:#fff;--accent-text:#000;--error:#f55}}*{box-sizing:border-box;border-radius:0!important}body{font-family:var(--font);background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}h1,h2,h3,h4,p{margin:0}#root{flex-direction:column;min-height:100vh;display:flex}input,button{font-family:var(--font);appearance:none;background:0 0;border:none}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.container{width:100%;max-width:800px;margin:0 auto;padding:40px 20px}.header{margin-bottom:40px}.title{text-transform:uppercase;letter-spacing:-.05em;text-align:center;margin-bottom:10px;font-size:3rem;font-weight:800;animation:.55s cubic-bezier(.22,1,.36,1) both title-in}@keyframes title-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.subtitle{color:var(--text-muted);text-align:center;font-size:1.1rem;animation:.55s cubic-bezier(.22,1,.36,1) .1s both subtitle-in}@keyframes subtitle-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.input-group{flex-direction:column;gap:15px;margin-bottom:40px;animation:.55s cubic-bezier(.22,1,.36,1) .2s both subtitle-in;display:flex}@media (width>=600px){.input-group{flex-direction:row;gap:0}}.input-wrapper{flex:1;display:flex;position:relative}.url-input{border:2px solid var(--border);background-color:var(--bg);color:var(--text);outline:none;flex:1;padding:16px 20px;font-size:1.1rem;transition:border-color .2s}.url-input::placeholder{color:var(--text-muted);transition:opacity .35s}.url-input[data-placeholder-fading=true]::placeholder{opacity:0}.url-input:focus{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent);transition:border-color .15s,box-shadow .15s}@media (width>=600px){.url-input{border-right:none}.url-input:focus{box-shadow:none;border-left-width:4px;border-right:none;outline:none}}.fetch-btn{text-transform:uppercase;background-color:var(--accent);color:var(--accent-text);border:2px solid var(--border);justify-content:center;align-items:center;gap:10px;padding:16px 32px;font-size:1.1rem;font-weight:700;transition:background-color .2s,color .2s,transform .1s,box-shadow .1s;display:flex;position:relative;overflow:hidden}.fetch-btn:not(:disabled):hover{background-color:var(--bg);color:var(--text)}.fetch-btn:not(:disabled):active{box-shadow:none;transform:translate(2px,2px)}.fetch-btn--success{animation:.4s cubic-bezier(.22,1,.36,1) btn-success-pulse;background-color:var(--accent)!important;color:var(--accent-text)!important}@keyframes btn-success-pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}.icon-pop{animation:.4s cubic-bezier(.22,1,.36,1) icon-pop}@keyframes icon-pop{0%{opacity:0;transform:scale(.5)rotate(-15deg)}60%{opacity:1;transform:scale(1.2)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.error-message{background-color:var(--error);color:#fff;border:2px solid var(--border);margin-bottom:30px;padding:15px;font-weight:600;animation:.3s cubic-bezier(.22,1,.36,1) error-in}@keyframes error-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.error-message--shake{animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-3px)}20%,80%{transform:translate(5px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}to{transform:translate(0)}}.download-card{border:2px solid var(--border);opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);transform:translateY(20px)}.download-card--visible{opacity:1;transform:translateY(0)}.card-top{flex-direction:column;gap:0;display:flex}@media (width>=600px){.card-top{flex-direction:row}}.thumbnail-wrap{border-bottom:2px solid var(--border);flex:0 0 260px;position:relative;overflow:hidden}@media (width>=600px){.thumbnail-wrap{border-bottom:none;border-right:2px solid var(--border)}}.thumbnail{object-fit:cover;width:100%;height:100%;animation:.6s cubic-bezier(.22,1,.36,1) both thumb-in;display:block}@keyframes thumb-in{0%{filter:blur(4px);transform:scale(1.05)}to{filter:blur();transform:scale(1)}}.thumbnail-shimmer{pointer-events:none;background:linear-gradient(105deg,#0000 40%,#ffffff2e 50%,#0000 60%);width:60%;height:100%;animation:.9s .2s forwards shimmer-once;position:absolute;top:0;left:-100%}@keyframes shimmer-once{0%{left:-100%}to{left:160%}}.card-meta{flex-direction:column;flex:1;justify-content:center;gap:8px;padding:20px 24px;display:flex}.video-title{font-size:1.25rem;font-weight:700;line-height:1.35;animation:.45s cubic-bezier(.22,1,.36,1) .1s both text-in}.video-author{color:var(--text-muted);font-size:.9rem;animation:.45s cubic-bezier(.22,1,.36,1) .2s both text-in}@keyframes text-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.card-divider{background-color:var(--border);height:2px}.quality-section{padding:18px 20px}.section-label{letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;margin-bottom:12px;font-size:.7rem;font-weight:700}.quality-pills{flex-wrap:wrap;gap:8px;display:flex}.quality-pill{border:2px solid var(--border);background-color:var(--bg);color:var(--text);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;animation:pill-in .35s calc(.25s + var(--pill-index,0) * 50ms) cubic-bezier(.22, 1, .36, 1) both;align-items:center;gap:6px;padding:7px 14px;font-size:.85rem;font-weight:700;transition:background-color .15s,color .15s,transform .12s cubic-bezier(.22,1,.36,1),box-shadow .12s cubic-bezier(.22,1,.36,1);display:inline-flex}@keyframes pill-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.quality-pill:not(:disabled):hover{background-color:var(--text-muted);color:var(--bg);box-shadow:2px 4px 0 var(--border);transform:translateY(-2px)}.quality-pill:not(:disabled):active{box-shadow:none;transform:translateY(0)scale(.96)}.quality-pill--active{animation:.3s cubic-bezier(.22,1,.36,1) both pill-select;background-color:var(--accent)!important;color:var(--accent-text)!important}@keyframes pill-select{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(1)}}.pill-badges{align-items:center;gap:3px;display:flex}.track-on{opacity:1}.track-off{opacity:.2}.card-action{justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.selected-info{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.selected-quality-label{text-transform:uppercase;letter-spacing:-.02em;font-size:1.1rem;font-weight:800}.selected-format{letter-spacing:.08em;color:var(--text-muted);border:1px solid var(--border);padding:2px 7px;font-size:.75rem;font-weight:700}.selected-tracks{color:var(--text-muted);align-items:center;gap:5px;display:flex}.text-muted{color:var(--text-muted);font-size:.9rem}.download-btn{text-transform:uppercase;letter-spacing:.06em;background-color:var(--accent);color:var(--accent-text);border:2px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:1rem;font-weight:700;transition:background-color .15s,color .15s,transform .1s;display:flex;position:relative;overflow:hidden}.download-btn:not(:disabled):hover{background-color:var(--bg);color:var(--text)}.download-btn:not(:disabled):active{transform:translate(2px,2px)}.spinner{animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card-action--downloading{height:60px;padding:0;position:relative;overflow:hidden}.progress-container{background-color:var(--bg);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0;overflow:hidden}.progress-container--done{animation:.4s cubic-bezier(.22,1,.36,1) done-flash}@keyframes done-flash{0%{background-color:var(--bg)}30%{background-color:var(--accent)}to{background-color:var(--bg)}}.progress-bar-fill{background-color:var(--accent);z-index:1;height:100%;transition:width .3s ease-out;position:absolute;top:0;left:0}.progress-shimmer{z-index:2;pointer-events:none;background:repeating-linear-gradient(-60deg,#0000,#0000 20px,#ffffff12 20px 40px) 0 0/200% 100%;width:100%;height:100%;animation:1.2s linear infinite progress-stripe;position:absolute;top:0;left:0}@keyframes progress-stripe{0%{background-position:0 0}to{background-position:200% 0}}.progress-text{z-index:3;letter-spacing:.05em;color:#fff;mix-blend-mode:difference;align-items:center;font-size:1.1rem;font-weight:800;display:flex;position:relative}.done-text{align-items:center;animation:.4s cubic-bezier(.22,1,.36,1) icon-pop;display:flex}.toast-stack{z-index:1000;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{letter-spacing:.04em;border:2px solid var(--border);background-color:var(--bg);color:var(--text);pointer-events:all;justify-content:space-between;align-items:center;gap:12px;max-width:320px;padding:10px 16px;font-size:.85rem;font-weight:700;animation:.35s cubic-bezier(.22,1,.36,1) both toast-in;display:flex}@keyframes toast-in{0%{opacity:0;transform:translate(30px)translateY(8px)}to{opacity:1;transform:translate(0)translateY(0)}}.toast--success{border-color:var(--border);background-color:var(--accent);color:var(--accent-text)}.toast--error{background-color:var(--error);color:#fff;border-color:var(--error)}.toast--info{background-color:var(--bg);color:var(--text)}.toast-close{cursor:pointer;opacity:.7;color:inherit;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;transition:opacity .15s;display:flex}.toast-close:hover{opacity:1}