*{box-sizing:border-box}body{margin:0;background:#f5f2ed;font:17px Arial;color:#27231e}header{padding:22px 4vw;background:#24211b;color:white}header h1{font-size:27px;margin:16px 0 5px}header a{color:#f0d49a}header p{margin:6px 0}main{max-width:1250px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:28px;padding:25px}canvas{width:100%;height:auto;background:white;border-radius:16px}section,aside{min-width:0}fieldset{border:1px solid #d5c8b7;border-radius:12px;padding:16px;margin:0 0 16px;background:white}label{display:block;margin:12px 0 4px}input[type=text],input[type=file]{max-width:100%;font:inherit;padding:10px}input[type=range]{width:100%}button{font:inherit;padding:13px 17px;background:#755722;color:white;border:0;border-radius:8px;cursor:pointer;margin:5px 4px 5px 0}button:disabled{opacity:.5;cursor:default}small{line-height:1.4;display:block}#message{padding:12px;font-weight:bold}#result{width:100%}.quality{padding-top:8px;font-size:14px}.quality[data-level=warn]{color:#8c5200}.quality[data-level=error]{color:#a20e16}[hidden]{display:none!important}details{margin-top:16px}@media(max-width:800px){main{grid-template-columns:1fr;padding:15px}header{padding:16px}input[type=text]{width:100%}}