:root{
  --bg:#0C1014; --panel:#141A20; --line:#25303A; --ink:#E4EBEF;
  --ink-2:#93A5B0; --ink-3:#61727C; --accent:#5AC8E8; --err:#E8887A;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100svh; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  display:grid; place-items:center; padding:40px 20px; line-height:1.6;
}
main{width:min(460px,100%); display:flex; flex-direction:column; gap:26px}
header{display:flex; flex-direction:column; gap:6px}
.eyebrow{
  font-family:ui-monospace,"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0;
}
h1{font-size:clamp(28px,7vw,38px); line-height:1.1; margin:0; letter-spacing:-.02em}
h2{font-size:13px; margin:0 0 4px; letter-spacing:.04em}
.sub{color:var(--ink-2); font-size:14.5px; margin:0}
a{color:var(--accent)}

form{display:flex; gap:8px}
input{
  flex:1; background:#0A1014; border:1px solid var(--line); border-radius:3px;
  color:var(--ink); padding:13px 15px; font-family:ui-monospace,monospace;
  font-size:17px; letter-spacing:.16em; text-transform:uppercase;
}
input:focus{outline:none; border-color:var(--accent)}
button{
  background:var(--accent); color:#04121A; border:0; border-radius:3px;
  padding:13px 20px; font:inherit; font-weight:600; cursor:pointer;
}
button:hover{filter:brightness(1.1)}
.error{color:var(--err); font-size:14px; margin:0}

.preview{border-radius:4px; overflow:hidden; border:1px solid var(--line); background:#000}
.preview video{width:100%; display:block; aspect-ratio:9/16; object-fit:cover}

.files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.files a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:3px;
  background:var(--panel); text-decoration:none; color:var(--ink);
  transition:border-color .18s, transform .18s;
}
.files a:hover{border-color:var(--accent); transform:translateY(-1px)}
.files .name{font-weight:500; font-size:15px}
.files .meta{
  font-family:ui-monospace,monospace; font-size:11px; color:var(--ink-3); white-space:nowrap;
}
.note{color:var(--ink-3); font-size:12.5px; margin:5px 0 0 2px}

.licence{border-top:1px solid var(--line); padding-top:16px}
.licence p{color:var(--ink-2); font-size:13px; margin:0}
footer{
  border-top:1px solid var(--line); padding-top:16px; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
footer a{color:inherit}