*{box-sizing:border-box}body{margin:0;background:#173c33;color:#253e30;font-size:20px}button,input{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;min-height:48px;padding:9px 19px;border:2px solid #84623c;border-radius:10px;font-weight:bold}button:disabled{cursor:default}button:focus-visible,[role=button]:focus-visible,input:focus-visible{outline:4px solid #bd6714;outline-offset:3px}.shell{max-width:1280px;margin:auto;padding:14px}header{display:flex;gap:20px;align-items:center;color:#fff2d2;margin-bottom:12px}header a{color:inherit;font-size:18px}header h1{margin:0;font-size:32px}header button{margin-left:auto}main{background:#faf7e9;border:10px solid #62442a;padding:16px 22px;border-radius:10px}.modes{display:flex;gap:12px;align-items:center}.modes button{min-width:180px}.modes span{margin-left:auto;color:#50634b;font-size:18px}.introline{text-align:center;margin:14px 0 0}.introline h2{font-size:29px;margin:0}.introline p{margin:3px 0;font-size:19px}.stage{position:relative;width:100%;aspect-ratio:1000/430;max-width:1000px;margin:0 auto;background:radial-gradient(ellipse at center,#e1ebd5 0,transparent 65%);user-select:none}.stage>svg{position:absolute;inset:0;width:100%;height:100%}#beam{transform-origin:500px 110px;transition:transform .5s cubic-bezier(.2,.8,.3,1.15)}.bucket{position:absolute;top:25.58%;width:32%;height:66.28%;cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.3,1.15);border-radius:12px;outline-offset:0;touch-action:none}.bucket>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bucket.left{left:6%}.bucket.right{left:62%}.bucket.ready{outline:3px dashed #7a9b55;background:#e0f0c450}.bucket.over{outline:5px solid #cc9729;background:#ffe9a355}.contents{position:absolute;left:8%;right:8%;bottom:8%;height:61%;pointer-events:none}.placed{position:absolute;padding:2px;min-height:0;border:0;background:none;pointer-events:auto;touch-action:none;animation:land .25s ease-out}.placed img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 1px #64442830)}.placed.locked{cursor:default}.bucket-label{position:absolute;bottom:-8%;left:0;right:0;text-align:center;font-size:clamp(12px,1.5vw,17px);font-weight:bold;pointer-events:none}.scale-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.scale-tools p{font-size:22px;text-align:center;font-weight:bold;margin:0}.feedback{margin:12px 0;padding:10px 16px;border-radius:10px;text-align:center;background:#e7eddc;min-height:49px}.feedback.error{background:#ffebcb;color:#78380b;border:2px solid #c47a23}.feedback.success{background:#d8edd0;color:#24592d;border:2px solid #75a65e}#answerForm{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}#answerForm[hidden]{display:none}#answer{width:85px;min-height:54px;border:2px solid #8a7b5a;border-radius:8px;background:white;text-align:center;font-size:27px}.shelf{background:#eee6d3;border-radius:12px;padding:12px 15px;border-bottom:8px solid #755132}.shelf-heading{display:flex;align-items:center;gap:15px}.shelf-heading h3{margin:0;font-size:22px}.shelf-heading span{font-size:16px;color:#566044}.shelf-heading button{margin-left:auto}.objects{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}.supply-item{background:#fffdf4;border:2px solid #b7ad8c;border-radius:10px;min-width:0;padding:5px 8px;display:flex;flex-direction:column;align-items:center;touch-action:none;position:relative;color:#263c2c;min-height:110px}.supply-item img{width:100%;height:72px;object-fit:contain;pointer-events:none}.supply-item .name{font-size:18px;line-height:1.1}.stock{position:absolute;top:4px;right:6px;font:14px sans-serif!important;background:#f3ecd6;border-radius:12px;padding:3px 6px}.supply-item[aria-pressed=true]{outline:4px solid #b78624;outline-offset:0;background:#fff1ba}.units{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.units .supply-item{min-height:76px;flex-direction:row;justify-content:center;gap:12px}.unit-block{display:block;border:2px solid #36595b;box-shadow:inset -5px -5px 0 #0002,inset 3px 3px 0 #fff6;border-radius:4px;pointer-events:none}.small .unit-block{background:#5ab8c1}.medium .unit-block{background:#e5b350;border-color:#8b6429}.large .unit-block{background:#b393ce;border-color:#634c82}.supply-item .unit-block{width:25px;height:25px;flex-shrink:0}.supply-item.medium .unit-block{width:44px}.supply-item.large .unit-block{width:44px;height:44px}.placed .unit-block{width:100%;height:100%}.ghost{position:fixed;width:95px;height:85px;z-index:9999;pointer-events:none;transform:translate(-50%,-60%);opacity:.9}.ghost img{width:100%;height:100%;object-fit:contain}.ghost .unit-block{width:65%;height:65%;margin:auto}.ghost.small .unit-block{width:35%;height:35%}.ghost.medium .unit-block{height:35%}details{font-size:17px;color:#516044;margin-top:12px}summary{cursor:pointer;min-height:44px;padding:10px 0}details p{line-height:1.4;margin:8px 0}body.focus{overflow:auto}body.focus .shell{max-width:none;padding:5px}body.focus header a{display:none}body.focus main{min-height:calc(100dvh - 75px)}@keyframes land{from{translate:0 -12px;opacity:.65}to{translate:0 0;opacity:1}}@media(min-width:1000px) and (min-height:850px){.stage{max-width:1080px}}@media(max-width:700px){.shell{padding:5px}main{padding:10px;border-width:5px}header{gap:9px}header h1{font-size:24px}header a{font-size:14px}header button{font-size:15px;padding:8px}.modes{gap:7px;flex-wrap:wrap}.modes button{min-width:0;flex:1;padding:9px;font-size:18px}.modes span{width:100%;text-align:center;font-size:15px}.introline h2{font-size:24px}.introline p{font-size:17px}.scale-tools{gap:4px;margin-top:18px}.scale-tools button{font-size:15px;padding:8px}.scale-tools p{font-size:17px}.feedback{font-size:18px;padding:8px}.shelf{padding:8px}.shelf-heading{flex-wrap:wrap;gap:4px}.shelf-heading h3{font-size:20px}.shelf-heading span{width:65%;font-size:14px;order:3}.shelf-heading button{font-size:15px;padding:8px}.objects{gap:5px}.supply-item{padding:4px;min-height:94px}.supply-item img{height:55px}.supply-item .name{font-size:14px}.stock{font-size:11px!important}.units{gap:5px}.units .supply-item{gap:6px;flex-direction:column;min-height:85px}.units .stock{top:2px;right:2px}.bucket-label{font-size:11px}#answerForm{font-size:18px;gap:8px}}@media(prefers-reduced-motion:reduce){#beam,.bucket{transition:none}.placed{animation:none}}