@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#10172c; --muted:#6f778c; --paper:#f5f4ef; --card:#fffefa; --line:#deded8; --accent:#ff5a44; --accent-dark:#e84231; --navy:#152346; --success:#24a87a; --shadow:0 16px 40px rgba(21,35,70,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, system-ui, sans-serif; font-size:14px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,84px); border-bottom:1px solid rgba(222,222,216,.75); background:rgba(245,244,239,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.04em; font-size:18px; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#fff; background:var(--navy); font-family:'Playfair Display',serif; font-size:19px; }
.top-actions { display:flex; gap:18px; align-items:center; }
.module-status { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:6px; white-space:nowrap; }.module-status i { width:7px; height:7px; border-radius:999px; background:#e2a837; }.module-status.ok i { background:var(--success); }.module-status.bad i { background:var(--accent); }
.button { border:0; border-radius:10px; min-height:40px; padding:0 16px; font-weight:700; display:inline-flex; gap:10px; justify-content:center; align-items:center; transition:.2s transform,.2s background,.2s opacity; }.button:hover { transform:translateY(-1px); }.button:disabled { opacity:.5; cursor:not-allowed; transform:none; }.button.primary { background:var(--accent); color:white; box-shadow:0 6px 15px rgba(255,90,68,.25); }.button.primary:hover { background:var(--accent-dark); }.button.primary b { font-size:19px; line-height:0; }.button.quiet { background:transparent; border:1px solid var(--line); color:var(--ink); }.button.danger { color:#c83227; background:#fff0ee; border:1px solid #ffc7c0; }
main { max-width:1240px; padding:0 clamp(20px,5vw,84px) 70px; margin:auto; }.hero { padding:clamp(62px,11vw,132px) 0 68px; max-width:825px; }.eyebrow,.section-label { color:var(--accent); letter-spacing:.14em; font-family:'DM Mono',monospace; font-size:10px; font-weight:500; }.hero h1 { margin:15px 0 17px; font-size:clamp(42px,6.2vw,78px); letter-spacing:-.065em; line-height:1.04; font-weight:800; }.hero h1 em { font-family:'Playfair Display', serif; font-weight:600; }.hero>p { max-width:575px; line-height:1.8; color:var(--muted); font-size:15px; }.url-box { display:flex; gap:9px; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:7px; max-width:700px; margin-top:30px; box-shadow:var(--shadow); }.url-box input { flex:1; border:0; outline:0; background:transparent; padding:0 12px; min-width:0; color:var(--ink); }.url-box input::placeholder { color:#9ea4b2; }.url-box .button { min-width:150px; }.legal { margin-top:14px; font-size:11px!important; line-height:1.55!important; color:#9298a5!important; }
.download-panel,.tasks { background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:clamp(20px,3.4vw,38px); margin-bottom:84px; }.video-overview { display:flex; gap:22px; align-items:center; position:relative; }.thumb-wrap { position:relative; width:176px; flex:0 0 176px; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#d6d6d0; }.thumb-wrap img { display:block; width:100%; height:100%; object-fit:cover; }.thumb-wrap span { position:absolute; bottom:7px; right:7px; padding:2px 5px; background:rgba(0,0,0,.76); color:#fff; font:10px 'DM Mono',monospace; border-radius:3px; }.video-overview h2,.section-heading h2 { font-size:25px; letter-spacing:-.05em; margin:6px 0 5px; line-height:1.25; }.video-overview p { color:var(--muted); margin:0; }.icon-button,.dialog-close { border:0; color:var(--muted); background:transparent; font-size:28px; line-height:1; }.video-overview .icon-button { position:absolute; top:-8px; right:-8px; }.download-options { display:grid; grid-template-columns:minmax(280px,1.8fr) minmax(160px,1fr) minmax(150px,.8fr) auto; gap:16px; align-items:end; padding-top:28px; margin-top:26px; border-top:1px solid var(--line); }.download-options fieldset { margin:0; padding:0; border:0; min-width:0; }.download-options legend { font-size:11px; letter-spacing:.07em; color:var(--muted); font-weight:800; margin-bottom:9px; }.segmented { display:flex; gap:4px; padding:4px; background:#f0f0ea; border-radius:10px; }.segmented label { flex:1; position:relative; cursor:pointer; }.segmented input { opacity:0; position:absolute; }.segmented span { display:block; text-align:center; border-radius:7px; padding:9px 6px; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }.segmented input:checked+span { background:#fff; color:var(--ink); box-shadow:0 1px 5px rgba(20,25,40,.1); }.download-options select,.library-tools select { width:100%; border:1px solid var(--line); color:var(--ink); background:#fff; min-height:40px; border-radius:9px; padding:0 11px; outline-color:var(--accent); }.save-button { white-space:nowrap; }.requirement { color:#a36c19; background:#fff6db; border-radius:8px; padding:10px 12px; margin:18px 0 0; font-size:12px; }
.library { padding-top:8px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:23px; }.storage { width:220px; color:var(--muted); font-size:11px; text-align:right; }.storage-bar { height:5px; background:#e1e1dc; overflow:hidden; border-radius:99px; margin-top:8px; }.storage-bar i { display:block; height:100%; width:0%; background:var(--accent); border-radius:inherit; transition:width .4s; }.library-tools { display:flex; align-items:center; gap:9px; padding-bottom:18px; border-bottom:1px solid var(--line); }.search { height:40px; min-width:170px; max-width:350px; flex:1; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:#8c94a5; }.search span { font-size:21px; line-height:1; transform:rotate(-20deg); }.search input { border:0; outline:0; background:transparent; width:100%; color:var(--ink); }.library-tools select { width:120px; }.library-tools .button { min-width:40px; padding:0 11px; }.selection-line { display:flex; align-items:center; justify-content:space-between; padding:12px 0; color:var(--muted); font-size:12px; }.selection-line button,.text-button { background:none; color:var(--accent-dark); border:0; padding:0; font-weight:700; }
.file-list { display:grid; gap:13px; padding-top:18px; }.file-list.grid { grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); }.file-list.list { grid-template-columns:1fr; }.file-card { background:var(--card); border:1px solid var(--line); border-radius:12px; min-width:0; overflow:hidden; transition:.2s box-shadow,.2s transform,.2s border-color; }.file-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }.file-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,90,68,.15); }.file-preview { position:relative; height:115px; display:grid; place-items:center; background:linear-gradient(135deg,#202d50,#48537a); color:#fff; font-size:37px; cursor:pointer; }.file-preview.audio { background:linear-gradient(135deg,#774b5f,#c07b62); }.file-preview.unknown { background:linear-gradient(135deg,#4f6671,#9caaa0); }.file-preview:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(8,11,20,.3)); }.file-preview span { position:relative; z-index:1; }.file-select { position:absolute; z-index:2; top:9px; left:9px; appearance:none; width:18px; height:18px; border:1px solid rgba(255,255,255,.85); border-radius:5px; background:rgba(255,255,255,.3); cursor:pointer; }.file-select:checked { border-color:#fff; background:var(--accent); box-shadow:inset 0 0 0 4px var(--accent); }.file-body { padding:12px; }.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; letter-spacing:-.02em; }.file-meta { margin-top:5px; color:var(--muted); font:10px 'DM Mono',monospace; }.file-actions { display:flex; gap:5px; margin-top:12px; }.file-actions a,.file-actions button { flex:1; min-height:31px; background:#f2f2ee; color:var(--ink); border:0; border-radius:6px; text-decoration:none; display:grid; place-items:center; font-size:11px; font-weight:700; }.file-actions button.delete { color:#c6382c; }.file-list.list .file-card { display:grid; grid-template-columns:48px minmax(0,1fr) 260px; align-items:center; padding:10px 12px; }.file-list.list .file-preview { height:42px; border-radius:8px; font-size:18px; }.file-list.list .file-body { padding:0 13px; }.file-list.list .file-actions { margin:0; }.file-list.list .file-select { top:12px; left:12px; }.empty-state { text-align:center; padding:70px 15px; color:var(--muted); }.empty-state>div { margin:auto; display:grid; place-items:center; width:48px; height:48px; background:#e5e5df; border-radius:50%; color:var(--navy); font-size:24px; }.empty-state h3 { color:var(--ink); margin:17px 0 7px; }.empty-state p { margin:0; font-size:12px; }.tasks { margin-top:65px; margin-bottom:0; }.tasks .section-heading { margin-bottom:16px; }.task-row { border-top:1px solid var(--line); padding:13px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }.task-row:first-child { border-top:0; }.task-row h3 { font-size:13px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.task-row p { margin:4px 0 0; color:var(--muted); font:10px 'DM Mono',monospace; }.task-status { align-self:center; font-size:11px; color:var(--muted); font-weight:700; }.task-status.running { color:#b06f0b; }.task-status.completed { color:var(--success); }.task-status.failed { color:var(--accent-dark); }
.toast-region { position:fixed; z-index:20; right:20px; bottom:20px; display:grid; gap:8px; max-width:min(390px,calc(100vw - 40px)); }.toast { background:var(--navy); color:#fff; padding:13px 16px; border-radius:10px; box-shadow:var(--shadow); font-size:13px; animation:in .22s ease-out; }.toast.error { background:#a92f28; }.toast.success { background:#13805b; }@keyframes in { from { opacity:0; transform:translateY(8px) } }
dialog { width:min(780px,calc(100% - 30px)); max-height:80vh; border:0; border-radius:14px; background:#111829; color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.45); padding:20px; }.dialog-close { color:#fff; position:absolute; right:10px; top:8px; z-index:1; }dialog::backdrop { background:rgba(10,14,26,.68); backdrop-filter:blur(3px); }#previewContent video,#previewContent audio { width:100%; max-height:70vh; display:block; margin-top:12px; }.is-hidden,[hidden] { display:none!important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) { .topbar { height:62px; }.module-status { display:none; }.hero { padding-top:62px; }.hero h1 { font-size:46px; }.download-options { grid-template-columns:1fr 1fr; }.download-options fieldset:first-child { grid-column:1/-1; }.save-button { grid-column:1/-1; }.file-list.list .file-card { grid-template-columns:42px minmax(0,1fr) 150px; }.file-list.list .file-actions a:nth-child(2) { display:none; } }
@media (max-width:540px) { .topbar { padding:0 16px; }.top-actions .button { font-size:11px; min-height:35px; padding:0 10px; }.brand { font-size:16px; }.brand-mark { width:25px; height:25px; }.hero { padding:48px 0 50px; }.hero h1 { font-size:37px; }.url-box { padding:5px; flex-direction:column; }.url-box input { height:42px; }.url-box .button { width:100%; }.download-panel { margin-inline:-4px; }.video-overview { align-items:flex-start; padding-right:24px; }.thumb-wrap { width:120px; flex-basis:120px; }.video-overview h2 { font-size:17px; }.download-options { grid-template-columns:1fr; }.download-options fieldset:first-child,.save-button { grid-column:auto; }.segmented span { padding:8px 4px; font-size:10px; }.section-heading { align-items:flex-start; }.storage { width:145px; }.library-tools { flex-wrap:wrap; }.search { flex-basis:100%; max-width:none; }.library-tools select { flex:1; }.file-list.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.file-preview { height:90px; }.file-body { padding:9px; }.file-actions { gap:3px; }.file-list.list .file-card { grid-template-columns:35px minmax(0,1fr) 80px; padding:8px; }.file-list.list .file-actions a:nth-child(1) { font-size:10px; }.file-list.list .file-actions button { display:none; }.tasks { padding:20px; } }