@font-face{font-family:Plex;src:url('../src/IBM-Plex-Mono-Medium.ttf')}*{box-sizing:border-box}body{margin:0;background:#141619;color:#e1e4de;font:12px Plex,monospace}header{height:65px;border-bottom:1px solid #414747;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;font-size:19px;letter-spacing:1px}small{font-size:10px;color:#9da6a4;margin-left:16px}button,input{font:inherit}button{border:1px solid #56605c;background:#242a2a;color:inherit;padding:10px 12px;cursor:pointer}button:hover,button.active{border-color:#d4ed81;color:#d4ed81}button:disabled{opacity:.4;cursor:default}nav{display:flex;gap:8px}main{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 65px)}aside{border-right:1px solid #414747;padding:8px 18px}section{padding:13px 0;border-bottom:1px solid #353c3b}h2{font-size:11px;color:#b8c4bd;letter-spacing:1px;margin:0 0 13px}label{display:block;margin:13px 0;color:#b7c0bb}input[type=range]{display:block;width:100%;accent-color:#d4ed81;margin-top:8px}input[type=number]{width:100%;display:block;background:#111516;border:1px solid #48504d;color:#e1e4de;padding:8px;margin-top:6px}output{float:right;color:#d4ed81}.buttons{display:flex;gap:6px;flex-wrap:wrap}p{line-height:1.7;color:#a1ada6;font-size:10px}progress{width:100%;accent-color:#d4ed81;margin-top:12px}#videoList{margin:10px 0;max-height:220px;overflow:auto}.video{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;font-size:10px}.video span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video button{padding:5px 8px}article{padding:26px;min-width:0}.instructions{font-size:10px;letter-spacing:1px;color:#a9b4ae;margin-bottom:20px}#stage{position:relative;width:100%;max-width:1100px;background:#0b0d0e;box-shadow:0 0 0 1px #414747;line-height:0}#canvas{width:100%;height:auto;display:block}#overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:12px;color:#8c9791;line-height:1.5}#empty[hidden]{display:none}footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}footer label{display:flex;align-items:center;gap:8px;margin:0;font-size:10px}footer input[type=number]{width:90px;margin:0}#metrics{font-size:10px;color:#d4ed81}#status{font-size:11px;max-width:900px}#generate{width:100%;border-color:#a1bc67;color:#d4ed81}@media(max-width:760px){main{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-right:0}header{height:auto;gap:10px;flex-wrap:wrap}small{display:block;margin:6px 0}article{padding:18px}}
select{font:inherit;width:100%;display:block;background:#111516;border:1px solid #48504d;color:#e1e4de;padding:8px;margin-top:6px}header{position:sticky;top:0;z-index:3}aside{position:sticky;top:65px;align-self:start;max-height:calc(100vh - 65px);overflow-y:auto}#stopRecording:not(:disabled){border-color:#e59b75;color:#e59b75}@media(max-width:760px){aside{position:static;max-height:none;overflow:visible}}