*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#101b2b;color:#bedee9;font:14px Arial,sans-serif}[hidden]{display:none!important}
#workspace{display:flex;height:100dvh}#sidebar{flex:0 0 min(330px,55vw);padding:20px;background:#0b1622;border-right:1px solid #293c4f;overflow:auto}details{border-bottom:1px solid #293c4f;padding:16px 0}summary{cursor:pointer}label{display:block;margin-top:14px}input,select{width:100%;margin-top:6px;padding:9px;background:#101b2b;color:inherit;border:1px solid #507386;border-radius:4px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #507386;border-radius:5px;background:#0b1929;padding:8px}button:hover{background:#1b3c4a}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #83eeed;outline-offset:2px}button:disabled{opacity:.5;cursor:wait}
#stage{position:relative;flex:1;min-width:0}#canvas{position:absolute;inset:0}canvas{width:100%;height:100%;display:block;touch-action:none}#badges{position:absolute;left:25px;right:64px;top:24px;pointer-events:none;display:flex;align-items:flex-start;flex-direction:column;gap:10px}#number{margin:0;padding:8px 10px;background:#101b2be8;border-radius:5px;font:11px monospace;letter-spacing:1.8px}#number:before{content:'●';color:#68e5e4;margin-right:10px}#disclaimer{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ec686840;border-left:3px solid #ff737399;border-radius:5px;background:#30141b26;color:#ffaaaa;font-size:12px;font-weight:600;line-height:1.5;text-shadow:0 1px 3px #101b2bcc}#dismiss{pointer-events:auto;flex-shrink:0;background:transparent;border:0;width:24px;height:24px}
.side-control{position:absolute;left:8px;top:50%;transform:translateY(-50%)}#toggle{font-size:26px;padding:0;width:36px;height:36px}.help-control{position:absolute;top:20px;right:20px}.round{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;font-size:20px}.tooltip{position:absolute;right:0;top:40px;white-space:nowrap;visibility:hidden;pointer-events:none;background:#132735f5;color:#e1f3f6;border:1px solid #385466;padding:8px 12px;border-radius:7px;box-shadow:0 4px 16px #0005;font-size:12px}.side-control .tooltip{top:0;left:46px;right:auto}.help-control:hover .tooltip,.side-control:hover .tooltip,.help-control:has(button:focus-visible) .tooltip,.side-control:has(button:focus-visible) .tooltip{visibility:visible}
#equipment{list-style:none;padding:0;max-height:45vh;overflow:auto}#equipment button{width:100%;text-align:left;background:transparent;border-color:transparent;overflow-wrap:anywhere}#equipment button[aria-pressed=true]{border-color:#79eee4;background:#1b3c4a;color:#a8eef0}#equipment button:hover{background:#1b3c4a}
#loading,#error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#101b2bf0;padding:24px;text-align:center;z-index:8}.spinner{width:44px;height:44px;border:4px solid #294457;border-top-color:#79eee4;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
dialog{position:relative;max-width:480px;width:calc(100% - 40px);max-height:90dvh;overflow:auto;padding:24px;border:1px solid #507386;border-radius:12px;background:#101b2b;color:#bedee9;line-height:1.6}dialog::backdrop{background:#0008}dialog h2{margin:0 28px 16px 0;color:#e3edf7}dialog li{margin:10px 0}#close-help{position:absolute;right:12px;top:12px;border:0;background:transparent}
@media(max-width:600px){#badges{left:12px;top:12px}#disclaimer{font-size:11px}}