*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#292a2d;color:#eee;font:13px Arial,sans-serif;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#121212;border-bottom:2px solid #f28a17;gap:12px}.brand{font-size:23px;letter-spacing:1px;font-weight:bold}.brand span{color:#f28a17}.brand small{display:block;font-size:8px;color:#aaa;letter-spacing:2px;margin-top:5px}.back{border:1px solid #555;padding:12px;border-radius:5px}.download{background:#f28a17;color:#171717;padding:12px;border-radius:5px;font-weight:bold}.toolbar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;background:#1d1e20;box-shadow:0 3px 8px #0003;z-index:2}.tools{display:flex;align-items:center;gap:6px;padding-right:10px;border-right:1px solid #444}button,select{font:inherit;background:#303236;border:1px solid #555;color:#fff;border-radius:5px;min-height:38px;padding:8px 12px}button{cursor:pointer}button:hover{border-color:#f28a17;background:#3a3b3f}button:disabled{opacity:.35;cursor:default}output{min-width:48px;text-align:center}.workspace{display:flex;flex:1;min-height:0}aside{width:210px;flex-shrink:0;overflow:auto;background:#1e1f21;border-right:1px solid #444;padding:16px}.side-title{font-size:10px;letter-spacing:2px;color:#bbb;margin-bottom:16px}#thumbs{display:grid;gap:15px}#thumbs button{width:100%;padding:8px;background:#292a2d;text-align:left}#thumbs button[aria-current=page]{border:2px solid #f28a17;background:#422e1b}#thumbs img{display:block;width:100%;height:auto;margin-bottom:8px}#thumbs span{display:block;line-height:1.4;font-size:11px}#viewport{flex:1;min-width:0;overflow:auto;position:relative;overscroll-behavior:contain}#canvas{padding:24px;min-width:100%;min-height:100%;width:max-content;display:flex;justify-content:center;align-items:flex-start}#catalog-page{display:block;background:white;box-shadow:0 4px 24px #0008;max-width:none;height:auto}footer{display:flex;justify-content:space-between;gap:12px;padding:10px 20px;background:#151515;font-size:11px;color:#bbb}:focus-visible{outline:2px solid #f28a17;outline-offset:3px}[hidden]{display:none!important}@media(max-width:700px){header{padding:10px;gap:8px}.brand{font-size:16px}.brand small{display:none}.back,.download{padding:10px 8px;font-size:11px}.toolbar{gap:6px;padding:8px}button,select{padding:8px;min-height:40px;font-size:11px}.tools{gap:4px;padding-right:5px}aside{width:145px;padding:10px}#canvas{padding:12px}footer{padding:8px 10px}footer span:last-child{display:none}#fullscreen{display:none}}
