@font-face{font-family:"Bodoni Moda";src:url(fonts/bodonimoda-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibmplexsans.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibmplexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--ink:#151515;--oxblood:#6B1F26;--bone:#EDE8DF;--bone-2:#F6F3EE;--smoke:#6E6A64;--chalk:#CBC3B6;--ox-tint:#F2E6E5;
--serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;--sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",Menlo,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bone);color:var(--ink);font:400 15px/1.55 var(--sans)}
.bar{display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,48px);border-bottom:1px solid var(--chalk)}
.mark{display:flex;align-items:center;gap:14px;color:var(--ink)}
.mark svg{width:22px;height:36px;flex:none}
.mark .word{display:flex;flex-direction:column;gap:5px;font:500 1.15rem/1 var(--serif);letter-spacing:.2em;text-transform:uppercase}
.mark .word small{font:400 .62rem/1 var(--mono);letter-spacing:.18em;color:var(--oxblood)}
.grow{flex:1}
.label{font:400 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
h1{font:500 clamp(2.6rem,6vw,4.2rem)/1.1 var(--serif);margin:.2em 0 .4em}
.btn{font:500 .9rem/1 var(--sans);background:var(--oxblood);color:var(--bone-2);border:0;border-radius:2px;padding:12px 18px;cursor:pointer}
.btn:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--oxblood);border:1px solid var(--oxblood)}
.link{background:none;border:0;padding:0;color:var(--oxblood);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
input{width:100%;font:400 15px/1.4 var(--sans);color:var(--ink);background:var(--bone-2);border:1px solid var(--chalk);border-radius:2px;padding:9px 10px;margin-top:4px}
input:focus,button:focus-visible,.zone:focus-visible{outline:2px solid var(--oxblood);outline-offset:1px}
label{display:block;font:400 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin:10px 0}
.wrap{max-width:720px;margin:6vh auto;padding:0 20px}
.lead{color:var(--smoke);margin-bottom:28px}
details{margin-top:36px;border-top:1px solid var(--chalk);padding-top:16px}
summary{cursor:pointer;color:var(--oxblood)}
.zone{display:block;border:1px dashed var(--oxblood);background:var(--bone-2);padding:48px 20px;text-align:center;cursor:pointer;border-radius:2px;transition:background .15s}
.zone.over{background:var(--ox-tint)}
.zone strong{display:block;font:500 1.5rem/1.2 var(--serif);margin-bottom:6px}
.zone input{display:none}
.jobs{list-style:none;margin:28px 0 0;padding:0}
.job{border-top:1px solid var(--chalk);padding:14px 0}
.job .row{display:flex;gap:12px;align-items:baseline}
.job .name{flex:1;overflow-wrap:anywhere}
.job .meta{font:400 .78rem/1.4 var(--mono);color:var(--smoke);white-space:nowrap}
.bar-p{height:3px;background:var(--chalk);margin-top:8px}
.bar-p i{display:block;height:100%;width:0;background:var(--oxblood);transition:width .2s}
.job.done .bar-p i{background:var(--ink)}
.job.bad .meta{color:var(--oxblood)}
h2{font:400 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin:44px 0 6px}
.recent{list-style:none;margin:0;padding:0}
.recent li{display:flex;gap:12px;border-top:1px solid var(--chalk);padding:8px 0}
.recent li span:first-child{flex:1;overflow-wrap:anywhere}
.recent .meta{font:400 .78rem/1.4 var(--mono);color:var(--smoke);white-space:nowrap}
.empty{color:var(--smoke)}
.flash{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bone-2);padding:10px 16px;border-radius:2px;font-size:.9rem;max-width:90vw}
.flash.bad{background:var(--oxblood)}