*{box-sizing:border-box}body{margin:0;background:#30343b;color:#fff;font:15px system-ui}header{position:sticky;top:0;z-index:5;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.55rem;background:#17191d}button,input{font:inherit;padding:.45rem;border:1px solid #555;border-radius:.3rem}button{background:#f5f7fa;cursor:pointer}input[type=number]{width:4rem}#search{width:12rem}main{display:flex;min-height:calc(100vh - 54px)}aside{width:170px;padding:.5rem;overflow:auto;background:#24272c}aside canvas{width:100%;margin:.35rem 0;border:2px solid transparent;cursor:pointer}aside canvas.active{border-color:#61a5ff}#stage{flex:1;overflow:auto;text-align:center;padding:1rem}#pdf{background:#fff;box-shadow:0 3px 18px #000;max-width:none}#status{padding:1rem}#text{max-width:800px;margin:1rem auto;text-align:left;color:#ddd}#fallback{display:block;margin:1rem;color:#9cc9ff}@media(max-width:700px){aside{display:none}aside.open{display:block;position:fixed;z-index:4;top:54px;bottom:0}header{font-size:13px}#search{width:8rem}}