*{box-sizing:border-box}body{margin:0;background:#102826;color:#f3e9cf;font:16px/1.5 system-ui,sans-serif}main{max-width:1080px;margin:auto;padding:28px 28px 16px}header{display:flex;align-items:center;justify-content:space-between;gap:15px}h1{font:clamp(32px,5vw,54px)/1.1 Georgia,serif;margin:4px 0 8px;letter-spacing:-1px}h1 em{color:#efba68;font-weight:400}.eyebrow{font-size:10px;letter-spacing:3px;color:#b1c4af}header p{margin:5px 0 18px;color:#b9c9b8}button,select{font:inherit;border:1px solid #668079;background:#233f3a;color:#f4ead2;border-radius:9px;padding:10px 16px;cursor:pointer}button:hover{background:#38584c}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #ffc568;outline-offset:3px}.primary{background:#edba6c;color:#172f29;font-weight:750}.primary:hover{background:#ffd393}.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:15px 0;background:#1c3631;border:1px solid #3f5b4f;border-radius:12px;padding:13px 18px}.bar small{display:block;color:#a6bda9;font-size:9px;letter-spacing:2px}.bar strong{font-size:23px;font-weight:500}.bar label{font-size:12px;color:#b8cdb8}.bar select{max-width:240px;margin-left:8px;padding:7px}.arena{position:relative;border-radius:16px;overflow:hidden;border:1px solid #70806a;box-shadow:0 18px 70px #0004;background:#162e2a}canvas{display:block;width:100%;aspect-ratio:900/650;touch-action:none;background:url('workshop.webp') center/cover}#result{position:absolute;inset:0;background:#102b25e8;text-align:center;align-content:center;padding:30px}#result[hidden]{display:none}#result h2{font:46px Georgia,serif;color:#ffd18a}#result button{margin:8px}.tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}#status{color:#d2d8bd;min-height:24px}footer{display:flex;justify-content:space-between;gap:20px;color:#90aa9b;font-size:11px;margin-top:24px}a{color:#edc886}dialog{max-width:580px;border:1px solid #7f8b6d;border-radius:18px;background:#18372f;color:#f4ebd5;padding:30px}dialog::backdrop{background:#041c17b9}dialog button{display:block;margin-top:18px}dialog h2{font:30px Georgia,serif}@media(max-width:600px){main{padding:18px 12px}h1{font-size:32px}header{align-items:flex-start}header button{font-size:12px;padding:8px;white-space:nowrap}.eyebrow{font-size:8px;letter-spacing:1px}.bar{padding:10px;gap:6px;flex-wrap:wrap}.bar label{width:100%}.bar select{max-width:80%}.bar strong{font-size:20px}.tools{gap:6px}.tools button{padding:10px;font-size:13px}footer{display:block}#result h2{font-size:32px}#status{font-size:13px}}@media(min-width:700px){.arena{width:min(100%,calc((100svh - 370px)*1.3846));min-width:min(100%,480px);margin:auto}main{padding-top:18px}header p{margin-bottom:10px}.bar{margin:10px 0}.tools{justify-content:center;margin-top:12px}#status{text-align:center;margin:10px 0}footer{margin-top:12px}}
