@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { --ink:#1e2b24; --muted:#718078; --line:#dce7df; --paper:#f7faf7; --green:#74b69a; --green-dark:#2f8060; --peach:#ffb38b; }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,'Noto Sans SC',sans-serif; overflow-x:hidden; }
body:before { content:''; position:fixed; width:560px; height:560px; border-radius:50%; top:-240px; right:-130px; background:#d8eee2; filter:blur(2px); opacity:.8; pointer-events:none; }
body:after { content:''; position:fixed; width:440px; height:440px; border-radius:50%; bottom:-270px; left:-130px; background:#ffeadb; opacity:.72; pointer-events:none; }
.grain { position:fixed; inset:0; opacity:.045; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.shell { width:min(1120px, calc(100% - 64px)); margin:0 auto; position:relative; z-index:1; }
.topbar { height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(116,145,130,.18); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-size:22px; font-weight:800; text-decoration:none; letter-spacing:-1px; }
.brand > span:last-child span { color:var(--green-dark); }
.brand-mark { display:flex; align-items:end; gap:3px; width:26px; height:25px; padding:3px; border:2px solid var(--ink); border-radius:8px 8px 8px 3px; transform:rotate(-8deg); }
.brand-mark i { display:block; width:4px; border-radius:5px; background:var(--green-dark); }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:18px}
.header-note { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#6ec094; box-shadow:0 0 0 4px #ddefe4; margin-right:9px; }
.hero { padding:90px 0 72px; max-width:900px; }.eyebrow,.section-label { color:var(--green-dark); font:500 11px 'DM Mono',monospace; letter-spacing:.16em; }.eyebrow { display:flex; align-items:center; gap:12px; }.eyebrow-line { display:inline-block; height:1px; width:38px; background:var(--green-dark); }
h1 { max-width:700px; margin:23px 0 16px; font-size:clamp(48px, 7vw, 82px); line-height:1.08; letter-spacing:-.075em; font-weight:800; }.hero h1 em { color:#ef956b; font-style:normal; position:relative; }.hero h1 em:after { content:''; position:absolute; left:3px; bottom:-5px; width:92%; height:5px; background:#f6c3a8; border-radius:50%; transform:rotate(-2deg); z-index:-1; }.hero-copy { max-width:590px; margin:0 0 42px; color:var(--muted); font-size:16px; line-height:1.9; }
.input-card { background:rgba(255,255,255,.83); border:1px solid rgba(187,210,196,.9); border-radius:16px; padding:9px 11px 10px; max-width:820px; box-shadow:0 18px 55px rgba(81,117,96,.1); backdrop-filter:blur(12px); }.url-row { display:flex; align-items:center; gap:11px; min-height:54px; }.link-icon { display:grid; place-items:center; width:37px; height:37px; border-radius:10px; background:#e4f2e9; color:var(--green-dark); flex:0 0 auto; }.link-icon svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }.url-row input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:500 15px Manrope,'Noto Sans SC',sans-serif; }.url-row input::placeholder { color:#a2afa8; }.clear-button { border:0; background:transparent; color:#9aaba1; cursor:pointer; font-size:23px; line-height:1; }.primary-button,.download-button { border:0; color:#fff; background:var(--ink); cursor:pointer; font-weight:700; transition:transform .2s,background .2s,box-shadow .2s; }.primary-button { padding:13px 16px 13px 19px; border-radius:10px; display:flex; gap:20px; align-items:center; font-size:13px; white-space:nowrap; }.primary-button:hover,.download-button:hover { background:#34604d; transform:translateY(-2px); box-shadow:0 8px 18px rgba(35,73,57,.18); }.arrow { color:#9ee0ba; font-size:20px; line-height:10px; }.supported-sites { display:flex; align-items:center; gap:10px; padding:9px 3px 0 49px; color:#9ba9a1; font:10px 'DM Mono',monospace; }.platform { padding:4px 8px; border-radius:5px; font-size:9px; letter-spacing:.02em; }.bili { color:#dc696e; background:#fff0ee; }.youtube { color:#c96461; background:#fff0ee; font-family:Manrope,sans-serif; }.privacy { margin-left:auto; }.lock { color:var(--green-dark); font-size:15px; }.example-line { color:#9ba9a1; font:11px 'DM Mono',monospace; margin:18px 0 0 4px; display:flex; gap:10px; align-items:center; }.example-link { border:0; border-bottom:1px dashed #aabbb1; padding:0 0 2px; color:#60776a; background:transparent; font:inherit; cursor:pointer; }
.result-section { padding:0 0 82px; }.section-label { display:flex; gap:15px; align-items:center; margin-bottom:18px; }.section-label span { color:#f29a70; }.result-card { display:grid; grid-template-columns:230px 1fr 220px; gap:25px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 12px 35px rgba(81,117,96,.07); }.thumbnail-wrap { height:137px; border-radius:10px; overflow:hidden; position:relative; background:#dfeee4; }.thumbnail-wrap img { width:100%; height:100%; display:block; object-fit:cover; }.duration { position:absolute; right:8px; bottom:8px; background:rgba(17,28,22,.82); border-radius:4px; padding:4px 6px; color:white; font:10px 'DM Mono',monospace; }.site-pill { display:inline-block; padding:5px 7px; border-radius:5px; color:#cf766b; background:#fff0ec; font:9px 'DM Mono',monospace; letter-spacing:.1em; }.video-meta h2 { margin:11px 0 7px; font-size:17px; line-height:1.4; }.video-meta p { margin:0 0 10px; color:var(--muted); font-size:12px; }.meta-line { color:#9ba9a1; font:10px 'DM Mono',monospace; }.meta-sep { margin:0 8px; color:#d1dcd4; }.download-panel { padding-left:23px; border-left:1px solid var(--line); }.download-panel label { display:block; margin-bottom:8px; color:var(--muted); font:10px 'DM Mono',monospace; }.download-panel select { width:100%; appearance:none; border:1px solid #dbe7de; border-radius:8px; padding:11px 12px; color:var(--ink); background:#f7faf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23718078' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 12px center; font:12px Manrope,'Noto Sans SC',sans-serif; outline:0; }.download-button { width:100%; margin-top:10px; padding:12px; border-radius:8px; font-size:12px; }.download-icon { margin-right:5px; color:#a5dfbb; font-size:17px; }.download-status { min-height:22px; margin-top:12px; color:var(--green-dark); font-size:12px; }.download-status.error { color:#c96760; }.download-status.loading { color:#b57b45; }
.how-section { padding:0 0 92px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.step { display:flex; gap:17px; padding:23px 0 0; border-top:1px solid var(--line); }.step-number { color:#ee9c76; font:12px 'DM Mono',monospace; }.step h3 { margin:0 0 8px; font-size:14px; }.step p { max-width:220px; margin:0; color:var(--muted); font-size:12px; line-height:1.8; }.footer { border-top:1px solid rgba(116,145,130,.18); padding:23px 0 30px; display:flex; justify-content:space-between; color:#9aa9a0; font:10px 'DM Mono',monospace; }
[hidden] { display:none !important; }.is-busy { opacity:.72; pointer-events:none; }.shake { animation:shake .35s ease; } @keyframes shake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
@media (max-width:760px) { .shell { width:min(100% - 36px, 560px); }.topbar{height:75px}.header-note{display:none}.hero{padding:60px 0 55px} h1{font-size:52px}.hero-copy{font-size:14px;line-height:1.8}.url-row{flex-wrap:wrap}.url-row input{width:calc(100% - 60px); flex:auto}.primary-button{width:100%; justify-content:center}.supported-sites{padding-left:3px; flex-wrap:wrap}.privacy{width:100%; margin:4px 0 0}.result-card{grid-template-columns:120px 1fr; gap:15px}.thumbnail-wrap{height:88px}.video-meta h2{font-size:14px}.download-panel{grid-column:1/-1; border-left:0; border-top:1px solid var(--line); padding:16px 0 0}.steps{grid-template-columns:1fr;gap:28px}.footer{display:block;line-height:2}.footer span{display:block}.footer span+span{margin-top:4px}.example-line{flex-wrap:wrap} }