@font-face{font-family:Space Mono;src:url('/static/fonts/SpaceMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Space Mono;src:url('/static/fonts/SpaceMono-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:dark;--black:#0a0a0a;--white:#f4f4f4;--line:#222222;--muted:#999;--font:'Space Mono','Cascadia Code',Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--font);font-size:14px;line-height:1.6}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit;border-radius:0}
button{cursor:pointer;border:1px solid var(--white);background:var(--white);color:var(--black);font-size:13px;font-weight:700;letter-spacing:.035em}
button:hover:not(:disabled){background:var(--black);color:var(--white)}
button:disabled{cursor:wait;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--white);outline-offset:4px}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0}
::selection{background:var(--white);color:var(--black)}
.workspace{max-width:1440px;padding:0 64px;margin:auto;min-height:100svh;display:flex;flex-direction:column}
.masthead{display:flex;align-items:center;justify-content:space-between;height:100px;flex-shrink:0;border-bottom:1px solid var(--line)}
.wordmark{font-size:23px;letter-spacing:-1.3px;font-weight:700;line-height:1}
.wordmark span{padding:0 2px}.wordmark .wordmark-dot{padding:0}
.masthead-note{font-size:12px;letter-spacing:.12em;color:var(--muted)}
main{width:100%;max-width:1080px;margin:0 auto;flex:1;padding:52px 0 28px}
.title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:42px;gap:24px}
.section-label{font-size:11px;letter-spacing:.15em;color:var(--muted);margin-bottom:13px}
h1{font-size:clamp(36px,4.5vw,62px);font-weight:400;line-height:1.18;letter-spacing:-3.5px}
h1 span{color:var(--muted)}
.intro{font-size:12px;color:var(--muted);line-height:1.9;padding-bottom:3px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;font-size:11px;letter-spacing:.06em}
.section-heading h2{font-size:inherit;font-weight:400}.section-heading span:not(#output-state){color:var(--muted)}
.section-heading label>span,.section-heading h2>span{padding:0 10px}
.shortcut,#output-state{color:var(--muted);font-size:10px}
.input-row{display:flex;align-items:stretch;border:1px solid var(--line);height:70px}
.input-row:focus-within{border-color:var(--white)}
.input-prompt{display:flex;align-items:center;padding-left:22px;font-size:24px;color:var(--muted)}
input{background:var(--black);color:var(--white);border:0;outline:0;min-width:0;flex:1;padding:0 20px;font-size:14px}
input::placeholder{color:#777;opacity:1}input[aria-invalid=true]{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:6px}
#inspect-button{width:170px;margin:-1px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}
#inspect-button span{font-size:23px;font-weight:400}
.source-foot{display:flex;justify-content:space-between;margin-top:12px;gap:8px;font-size:10px;color:var(--muted)}
.status-line{display:flex;align-items:center;gap:13px;min-height:59px;padding:14px 0;margin:12px 0 20px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
#status-marker{white-space:nowrap;min-width:36px;color:var(--white)}
#status{overflow-wrap:anywhere}
.status-line[data-error=true]{color:var(--white)}
.status-line[data-error=true] #status-marker{background:var(--white);color:var(--black);padding:0 3px}
#cancel-button{background:transparent;color:var(--white);margin-left:auto;flex-shrink:0;font-size:10px;padding:5px 8px;border-color:var(--line)}
#cancel-button:hover{color:var(--black);background:var(--white)}
.output{border-bottom:1px solid var(--line);padding-bottom:22px}
.empty-state{min-height:198px;display:flex;align-items:center;gap:29px;border:1px solid var(--line);padding:30px;color:var(--muted)}
.empty-art{width:90px;height:114px;position:relative;display:grid;place-items:center;flex-shrink:0}
.empty-art>span{font-size:45px;color:#777;font-weight:400;line-height:1}
.frame-corner{position:absolute;width:17px;height:17px;border-color:#555;border-style:solid}
.tl{top:0;left:0;border-width:1px 0 0 1px}.tr{top:0;right:0;border-width:1px 1px 0 0}.bl{bottom:0;left:0;border-width:0 0 1px 1px}.br{bottom:0;right:0;border-width:0 1px 1px 0}
.empty-title{font-size:14px;color:#bdbdbd;margin-bottom:9px}
.empty-state p:not(.empty-title){font-size:11px;line-height:1.9}
.empty-index{margin-left:auto;align-self:flex-end;font-size:10px;color:#777}
.metadata-drawer{display:flex;border:1px solid var(--line);min-height:218px}
.preview{width:146px;flex-shrink:0;background:#111;border-right:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.preview img{width:100%;height:100%;position:absolute;object-fit:cover}
#preview-placeholder{font-size:10px;color:var(--muted)}
.media-details{padding:21px 24px;width:100%;min-width:0}
.media-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.media-heading h3{font-size:15px;font-weight:400;overflow-wrap:anywhere}
#reel-id{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.metadata{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:18px 0 13px}
dt{font-size:9px;letter-spacing:.08em;color:var(--muted)}
dd{font-size:13px;margin:5px 0 0;white-space:nowrap}
.quality-note{color:var(--muted);font-size:10px;margin-bottom:15px}
.download-row{display:flex;gap:20px;align-items:center}
#download-button{height:42px;padding:0 16px;min-width:210px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px}
#download-button span{font-size:20px;font-weight:400}
#download-note{font-size:9px;color:var(--muted);line-height:1.8}
.use-note{font-size:10px;margin-top:16px;color:var(--muted)}
footer{border-top:1px solid var(--line);min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.04em;color:var(--muted)}
.server-state{display:flex;align-items:center;gap:9px;text-align:right}.square{display:inline-block;width:6px;height:6px;background:var(--white);flex-shrink:0}
@media(min-width:1500px){main{padding-top:70px}.title-row{margin-bottom:50px}.empty-state{min-height:250px}}
@media(min-width:901px) and (max-height:850px){.masthead{height:72px}main{padding:28px 0 16px}.title-row{margin-bottom:24px}h1{font-size:48px}.section-label{margin-bottom:8px}.input-row{height:60px}.status-line{min-height:44px;margin:8px 0 10px;padding:10px 0}.empty-state{min-height:150px;padding:18px 26px}.empty-art{height:96px;width:74px}.output{padding-bottom:14px}.use-note{margin-top:12px}footer{min-height:50px}.metadata-drawer{min-height:174px}.media-details{padding:14px 20px}.metadata{margin:10px 0}.quality-note{margin-bottom:10px}#download-button{height:36px}}
@media(max-width:900px){.workspace{padding:0 32px}.intro{display:none}main{padding-top:35px}.masthead{height:80px}.source-foot{font-size:10px}.source-foot p:last-child{display:none}.media-details{padding:18px}.metadata{gap:12px;grid-template-columns:repeat(2,1fr)}.preview{width:140px}}
@media(max-width:560px){.workspace{padding:0 20px}.masthead{height:73px}.wordmark{font-size:21px}.masthead-note{font-size:9px}.title-row{margin-bottom:30px}h1{font-size:36px;letter-spacing:-2px}.section-label{font-size:9px}.shortcut{display:none}.input-row{height:62px}.input-prompt{display:none}input{font-size:12px;padding:0 12px}#inspect-button{width:96px;padding:0 12px;font-size:10px}#inspect-button span{font-size:18px}.status-line{font-size:10px;gap:8px}.empty-state{padding:22px 18px;min-height:200px;gap:20px}.empty-art{width:56px;height:83px}.empty-index{display:none}.empty-title{font-size:12px}.empty-state p:not(.empty-title){font-size:10px}.metadata-drawer{display:grid;grid-template-columns:78px 1fr}.preview{width:78px}.media-details{padding:14px 12px}.media-heading{align-items:flex-start;flex-direction:column;gap:2px}.media-heading h3{font-size:12px}.metadata{gap:10px}.metadata dd{font-size:11px}dt{font-size:8px}.download-row{display:block}#download-button{width:100%;min-width:0;font-size:10px}#download-note{display:none}footer{padding:18px 0;align-items:flex-start;flex-direction:column;gap:8px;font-size:9px}.use-note{font-size:9px}}