:root { color-scheme: light dark; font: 16px system-ui, sans-serif; }
body { margin: 0; background: light-dark(#f5f5f5, #161616); color: light-dark(#202020, #eee); }
main { max-width: 36rem; padding: 1.25rem; margin: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin-top: 2rem; }
article, form { padding: 1rem; margin: 1rem 0; border: 1px solid light-dark(#ddd, #383838); border-radius: .75rem; }
.filename { overflow-wrap: anywhere; margin-bottom: .75rem; }
label { display: block; margin-bottom: .75rem; } small { opacity: .6; }
button, .button { display: inline-block; border: 1px solid light-dark(#ccc, #484848); border-radius: .5rem; padding: .6rem .9rem; margin: .25rem .25rem .25rem 0; background: light-dark(#fff, #292929); color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
textarea { box-sizing: border-box; display: block; width: 100%; min-height: 5rem; resize: vertical; margin: .5rem 0; padding: .65rem; border: 1px solid light-dark(#ccc, #484848); border-radius: .5rem; background: transparent; color: inherit; font: inherit; }
input { display: block; max-width: 100%; margin-bottom: .75rem; }
:focus-visible { outline: 2px solid #78a9ef; outline-offset: 3px; }
#status { overflow-wrap: anywhere; }
header { display: flex; align-items: center; gap: .65rem; }
header h1 { flex: 1; }
header button { margin: 0; }
video { display: block; width: 100%; max-height: 65vh; border-radius: .75rem; object-fit: cover; }
[hidden] { display: none !important; }
#offline { opacity: .6; }