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

:root { --ink:#171713; --paper:#f1efe8; --acid:#d8ff52; --line:#c8c5bb; --muted:#6f6e66; --error:#ad2d1f; }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; min-height:100vh; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:10; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); }
header, footer, main { width:min(1180px, calc(100% - 48px)); margin:auto; }
header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; gap:12px; align-items:center; font:500 13px DM Mono,monospace; letter-spacing:.12em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--ink); color:var(--acid); font-size:16px; }
.status { font:400 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#5fa51f; margin-right:7px; box-shadow:0 0 0 4px #5fa51f1c; }
.hero { padding:82px 0 74px; max-width:980px; }
.eyebrow, label, .hint, .media-author, .duration { font-family:DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.eyebrow { font-size:11px; margin:0 0 25px; }
h1 { margin:0; font-size:clamp(53px,8vw,105px); line-height:.9; letter-spacing:-.065em; font-weight:600; max-width:940px; }
h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.lead { max-width:610px; margin:34px 0 45px; font-size:18px; line-height:1.6; color:#484740; }
form { border-top:1px solid var(--ink); padding-top:17px; }
label { display:block; font-size:10px; font-weight:500; margin-bottom:10px; }
.input-row { display:grid; grid-template-columns:1fr auto; border:1px solid var(--ink); background:#faf9f4; box-shadow:7px 7px 0 var(--ink); }
input { min-width:0; padding:21px 22px; font:500 15px DM Mono,monospace; border:0; outline:0; background:transparent; color:var(--ink); }
input::placeholder { color:#9a988d; }
.input-row:focus-within { outline:3px solid var(--acid); outline-offset:2px; }
button { border:0; cursor:pointer; font:600 14px Manrope,sans-serif; }
.input-row button { display:flex; align-items:center; gap:34px; margin:5px; padding:0 22px; background:var(--acid); border-left:1px solid var(--ink); color:var(--ink); }
.input-row button b { font-size:21px; font-weight:400; }
button:disabled { cursor:wait; opacity:.55; }
.hint { margin:15px 0 0; color:var(--muted); font-size:9px; line-height:1.6; }
.message { margin-top:28px; border:1px solid var(--error); color:var(--error); padding:15px 17px; font:500 12px DM Mono,monospace; }
.result { margin-top:42px; padding:18px; display:grid; grid-template-columns:190px 1fr 210px; align-items:center; gap:24px; background:var(--ink); color:var(--paper); box-shadow:8px 8px 0 var(--acid); }
.thumb { height:118px; overflow:hidden; display:grid; place-items:center; background:#34342e; color:#77766e; font:500 11px DM Mono,monospace; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.media-author, .duration { font-size:9px; color:#a5a39a; margin:0 0 8px; }
.media-copy h2 { font-size:18px; line-height:1.35; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.quality-block { border-left:1px solid #41413a; padding-left:20px; }
.quality-block label { color:#a5a39a; }
select { width:100%; color:var(--paper); background:#292924; border:1px solid #55554d; padding:11px; margin-bottom:8px; font:500 12px DM Mono,monospace; }
.download { width:100%; padding:13px; display:flex; justify-content:space-between; background:var(--acid); color:var(--ink); }
.progress { margin-top:35px; padding:22px; border:1px solid var(--ink); }
.progress-top { display:flex; justify-content:space-between; font:500 12px DM Mono,monospace; text-transform:uppercase; }
.progress-line { height:4px; margin:18px 0; overflow:hidden; background:var(--line); }
.progress-line i { display:block; width:35%; height:100%; background:var(--ink); animation:loading 1.5s infinite ease-in-out; }
.progress p { margin:0; font-size:12px; color:var(--muted); }
@keyframes loading { 0%{transform:translateX(-110%)} 100%{transform:translateX(300%)} }
.facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts article { padding:32px 34px 34px 0; }
.facts article+article { border-left:1px solid var(--line); padding-left:34px; }
.facts span { font:500 10px DM Mono,monospace; color:var(--muted); }
.facts h3 { margin:35px 0 10px; font-size:16px; }
.facts p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
footer { min-height:110px; display:flex; justify-content:space-between; align-items:center; gap:30px; color:var(--muted); font:400 10px DM Mono,monospace; text-transform:uppercase; }
[hidden] { display:none !important; }
@media (max-width:760px) {
  header, footer, main { width:min(100% - 28px, 1180px); }
  header { height:72px; }
  .hero { padding:55px 0 60px; }
  h1 { font-size:clamp(48px,15vw,76px); }
  .lead { font-size:15px; margin:27px 0 35px; }
  .input-row { grid-template-columns:1fr; }
  input { padding:18px 16px; }
  .input-row button { height:52px; justify-content:space-between; border:0; border-top:1px solid var(--ink); }
  .result { grid-template-columns:105px 1fr; gap:16px; }
  .thumb { height:90px; }
  .quality-block { grid-column:1/-1; border:0; border-top:1px solid #41413a; padding:16px 0 0; }
  .facts { grid-template-columns:1fr; }
  .facts article { padding:25px 0; }
  .facts article+article { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .facts h3 { margin:18px 0 8px; }
  footer { align-items:flex-start; flex-direction:column; justify-content:center; padding:30px 0; }
}
@media (prefers-reduced-motion:reduce) { .progress-line i { animation-duration:4s; } }