@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#171717; --muted:#777571; --line:#d9d7d1; --paper:#f6f5f2; --accent:#ff4d19; --surface:#eeece7; }
[data-theme="dark"] { --ink:#f1f0eb; --muted:#989791; --line:#3a3936; --paper:#151515; --accent:#ff5b2b; --surface:#20201f; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button, input { font:inherit; }
.app { width:min(100% - 40px, 900px); margin:0 auto; padding:28px 0 30px; }
header { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:82px; font:12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }
header p { margin:0; color:var(--muted); }
.header-actions { display:flex; align-items:center; gap:18px; }.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:0; color:var(--muted); border:0; background:none; cursor:pointer; font:10px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.theme-toggle:hover { color:var(--ink); }.theme-icon { font:15px/1 sans-serif; }
.wordmark { color:var(--ink); text-decoration:none; font:600 22px "DM Sans",sans-serif; letter-spacing:-.07em; }.wordmark span { color:var(--accent); }
.intro { margin-bottom:68px; }.intro h1 { margin:0; max-width:600px; font:normal clamp(58px,10vw,110px)/.86 "Instrument Serif",serif; letter-spacing:-.055em; }.intro p { width:min(100%, 350px); margin:26px 0 0; color:var(--muted); line-height:1.5; font-size:15px; }
.maker { border-top:1px solid var(--line); }
.drop-zone { position:relative; min-height:126px; display:grid; align-content:center; gap:10px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s,padding .2s; overflow:hidden; }.drop-zone:hover,.drop-zone.dragging { padding-left:14px; background:var(--surface); }.drop-zone input { position:absolute; opacity:0; inset:0; cursor:pointer; }.drop-label { color:var(--muted); font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.file-name { position:relative; z-index:1; font:500 24px/1 "DM Sans",sans-serif; letter-spacing:-.045em; }.duration { color:var(--muted); font:12px "DM Mono",monospace; }
#image-preview { position:absolute; right:0; top:0; width:135px; height:100%; object-fit:cover; opacity:.95; }
.controls { min-height:126px; display:flex; align-items:center; justify-content:space-between; gap:30px; }.format-control { display:grid; gap:13px; }.format-options { display:flex; gap:6px; }.format { min-width:49px; padding:8px 10px; border:1px solid var(--line); border-radius:99px; background:transparent; cursor:pointer; font:11px "DM Mono",monospace; transition:.15s; }.format:hover,.format.active { border-color:var(--ink); background:var(--ink); color:var(--paper); }.render,.download { display:inline-flex; gap:24px; align-items:center; justify-content:space-between; border:0; border-radius:0; background:var(--accent); color:#fff; padding:16px 18px; min-width:202px; cursor:pointer; font:500 14px "DM Sans",sans-serif; text-decoration:none; transition:transform .15s,opacity .15s; }.render:hover:not(:disabled),.download:hover { transform:translateY(-2px); }.render:disabled { opacity:.35; cursor:not-allowed; }
.result { margin-top:32px; border-top:1px solid var(--line); padding-top:16px; }.result-top { display:flex; justify-content:space-between; margin-bottom:16px; font:12px "DM Mono",monospace; }.result-top button { padding:0; border:0; color:var(--muted); background:none; text-decoration:underline; cursor:pointer; }.result video { display:block; max-width:100%; max-height:510px; margin:0 auto; background:#101010; }.download { margin-top:12px; }
.render-progress { margin-top:24px; padding-top:14px; border-top:1px solid var(--line); }.progress-copy { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.progress-track { height:2px; margin-top:12px; overflow:hidden; background:var(--line); }.progress-track span { display:block; width:0; height:100%; background:var(--accent); transition:width .18s ease; }.render-progress.loading .progress-track span { width:32%; animation:loading 1.1s ease-in-out infinite; }@keyframes loading { 0% { transform:translateX(-110%); } 100% { transform:translateX(340%); } }
.note { margin:88px 0 0; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.03em; text-transform:uppercase; }
@media (max-width:520px) { .app { width:min(100% - 28px,900px); } header { padding-bottom:60px; }.header-actions { gap:12px; }.header-actions p { display:none; }.intro { margin-bottom:54px; }.intro h1 { font-size:62px; }.controls { align-items:flex-start; flex-direction:column; justify-content:center; gap:22px; }.render { width:100%; }.drop-zone { min-height:115px; } }