*{box-sizing:border-box}body{margin:0;color:#ecf2de;font:15px/1.5 system-ui,sans-serif;background:#0b282b url("workshop.webp") center/cover fixed}body:before{content:"";position:fixed;inset:0;background:linear-gradient(100deg,#08282bf2,#08282bc9 55%,#08282b7a);z-index:-1}main{max-width:1020px;margin:auto;padding:30px 30px 15px}header,footer,.contract,.toolbar,.bottom,.controls{display:flex;align-items:center;justify-content:space-between;gap:14px}header{margin-bottom:23px}h1{font:600 46px/1.1 Georgia,serif;margin:6px 0}h1 span{font:400 18px system-ui;display:block;color:#aec8bc;margin-top:9px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.19em;color:#dfba7a;margin:0}button{font:600 12px system-ui;border:1px solid #688c8066;background:#183c3e;color:#edf6e6;padding:12px 15px;border-radius:8px;cursor:pointer;touch-action:manipulation}button:hover{background:#2c5653}button:focus-visible{outline:3px solid #f6cf86;outline-offset:2px}button.active,.primary{background:#d7ba80;color:#153331;border-color:#f5d9a5}button:disabled{opacity:.45;cursor:default}.contract{background:#103032e8;border:1px solid #7a9f8455;border-radius:12px;padding:18px 24px;margin-bottom:15px}h2{font:500 25px Georgia;margin:5px 0}.contract p{color:#b5c9bc;margin:3px 0;font-size:13px}.target{display:flex;align-items:center;gap:15px;flex-shrink:0}.target svg{width:52px;height:52px}.target strong{font:500 26px Georgia;display:block}.target small{display:block;color:#b5c9bc;font-size:10px}.workshop{padding:14px;background:linear-gradient(#0f3333df,#0a2428eb),url("workshop.webp") center/cover;border-radius:14px;border:1px solid #85ac8a70;box-shadow:0 20px 60px #0005}.toolbar{margin-bottom:12px}#tools{display:flex;gap:6px}#board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border:1px solid #8db29c55;border-radius:7px;overflow:hidden;background:#103638b8;user-select:none;touch-action:none}.cell{padding:0;position:relative;border-radius:0;aspect-ratio:1;border:1px solid #648e7d30;background:#19444899;min-width:0;isolation:isolate}.cell:hover{background:#39716b}.cell.selected{outline:2px solid #f3d8a0;outline-offset:-3px}.cell.rock{background:repeating-linear-gradient(135deg,#193d40,#193d40 6px,#21464a 6px,#21464a 12px);cursor:default}.machine{position:absolute;inset:7%;border-radius:6px;border:1px solid #9fb19b77;background:#396360;display:flex;align-items:center;justify-content:center;font-size:23px;color:#d5e5c7;box-shadow:0 3px 0 #082b2d}.machine.cut{background:#705c3c;color:#f2d493}.machine.rotate{background:#586079;color:#e0dcff}.dir{position:absolute;right:4%;bottom:0;font-size:13px;color:#fff9}.item{position:absolute;width:46%;height:46%;top:27%;left:27%;filter:drop-shadow(0 2px 2px #0008);z-index:3;pointer-events:none}.spring{background:#53795b}.hub{background:#b38c52}.spring .machine,.hub .machine{inset:5%;font-size:26px;color:#153b35;background:#a3caa4}.hub .machine{background:#e8c482}.hint:after{content:attr(data-hint);position:absolute;inset:10%;display:grid;place-items:center;border:1px dashed #efd29688;background:#d5b56822;font-size:21px;color:#ebd096}.bottom{font-size:11px;color:#d8cfb0;padding:13px 2px 0}.muted{color:#8fae9e}.controls{justify-content:flex-start;flex-wrap:wrap;margin-top:18px;gap:8px}#status{min-height:24px;font-size:13px;color:#d6d8b7;margin:13px 0}footer{font-size:11px;color:#98b7a9}footer button{border:0;background:none;padding:6px}dialog{max-width:570px;width:calc(100% - 30px);border:1px solid #789c83;background:#123739;color:#e7eeda;border-radius:16px;padding:30px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#031d22bf;backdrop-filter:blur(6px)}dialog h2{font-size:30px}dialog p,dialog li{font-size:14px;color:#c2d3c2}dialog a{color:#f4d293}#close{float:right;padding:5px 12px;font-size:20px}[hidden]{display:none!important}.badge{color:#f3d79d} @media(max-width:650px){main{padding:18px 10px}h1{font-size:34px}header{gap:5px}header button{padding:10px}h1 span{font-size:14px}.contract{padding:12px;gap:8px}.contract p{font-size:11px;max-width:220px}h2{font-size:21px}.target{gap:5px}.target svg{width:38px}.target strong{font-size:21px}.target small{font-size:8px}.toolbar{gap:6px;flex-wrap:wrap}.toolbar button{font-size:10px;padding:9px 8px}.workshop{padding:8px}.machine{font-size:17px;inset:4%}.dir{font-size:9px}.spring .machine,.hub .machine{font-size:18px}.bottom{font-size:8px}.controls button{padding:11px;font-size:11px}.hint:after{font-size:14px}footer{font-size:9px}}
@media(min-width:651px){main{max-width:920px;padding-top:20px}header{margin-bottom:16px}h1{font-size:39px}#board{height:min(48vw,440px)}.cell{aspect-ratio:auto}.contract{padding:13px 20px}.controls{margin-top:13px}}