:root{color:#294d45;font-synthesis:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#f5efdf;font-family:Yu Gothic UI,Meiryo,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 50% 25%,#fffaf0 0%,#f5efdf 70%);min-width:280px;margin:0}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;background:#fff9eb;border:1px solid #b5bba8;border-radius:8px;min-height:44px;padding:11px 17px;font-weight:700}button:hover{background:#e8ecda}button:focus-visible,.drag-target:focus-visible{outline-offset:4px;outline:3px solid #bd643f}button:disabled{opacity:.5;cursor:default}.primary{color:#fff7e8;background:#315b4c;border-color:#315b4c}.primary:hover{background:#24493c}main{width:min(100% - 36px,760px);margin:0 auto;padding:20px 0 12px}.heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.eyebrow{letter-spacing:.22em;color:#7a886e;margin:0 0 8px;font:700 10px/1.2 sans-serif}h1{letter-spacing:.04em;margin:0;font-family:Yu Mincho,Meiryo,serif;font-size:clamp(25px,4vw,35px);font-weight:700}.edition{color:#a9ad96;font:italic 32px Georgia,serif}.edition span{vertical-align:middle;font-size:14px}.stats{text-align:center;border-top:1px solid #d3d5c0;border-bottom:1px solid #d3d5c0;grid-template-columns:1.1fr 1fr 1fr;gap:12px;margin-top:13px;padding:15px 0 13px;display:grid}.stat-label{color:#778570;letter-spacing:.08em;margin-bottom:4px;font-size:10px;font-weight:700;display:block}.stats strong{font-variant-numeric:tabular-nums;font:500 clamp(21px,3vw,28px)/1.1 Georgia,serif}.stats strong span{margin-left:3px;font:600 12px sans-serif}.time-stat strong{color:#ad5a38}.workbench{isolation:isolate;aspect-ratio:640/580;width:min(100%,640px,110.345svh - 353.103px);margin:7px auto 0;position:relative}canvas{width:100%;height:100%;display:block}.step{color:#60765e;pointer-events:none;font-size:clamp(10px,1.5vw,12px);font-weight:700;position:absolute;top:3%}.step b{background:#e0e4cd;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin-right:4px;display:inline-flex}.step-one{left:3%}.step-two{right:3%}.drag-target{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.drag-target:active{cursor:grabbing}.can-target:focus-visible{outline-offset:-7px}.opener-target{border-radius:14px;min-width:44px;min-height:44px}.drag-target[aria-disabled=true]{pointer-events:none}.feedback{text-align:center;color:#6b744f;min-height:20px;margin:2px 0 11px;font-size:13px;font-weight:700;line-height:1.5}.record{text-align:center;color:#ad5a38;margin:2px 0 11px;font-size:13px;font-weight:700}.actions{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}.small-actions{justify-content:center;gap:7px;display:flex}.small-actions button{padding:10px 12px;font-size:11px}.footer-note{letter-spacing:.12em;color:#97a089;text-align:center;margin:13px 0 0;font-size:10px}[hidden]{display:none!important}.pause-layer{z-index:5;background:#f5efdfeb;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:7% 0 0}.pause-layer p{margin:0 0 8px;font-family:serif;font-size:32px}.pause-layer span{margin-bottom:24px;font-size:13px}dialog{color:#294d45;background:#fff9eb;border:1px solid #b0b89c;border-radius:15px;width:min(100% - 32px,480px);max-height:85svh;padding:25px;overflow:auto}dialog::backdrop{background:#243e3970}dialog h2{margin:0 0 22px;font-size:20px}dialog p{font-size:14px;line-height:1.8}dialog .help-small{color:#738064;font-size:12px}dialog button{width:100%;margin-top:12px}@media (max-width:560px){main{width:calc(100% - 24px);padding-top:15px}.edition{font-size:25px}.stats{margin-top:12px;padding:12px 0}.actions>.primary,.actions>#new-can{flex:40%;padding:10px 8px;font-size:12px}.small-actions{flex:100%}.small-actions button{min-width:78px}.feedback{font-size:11px}.workbench{width:100%}.step{font-size:10px}}@media (max-width:360px){h1{letter-spacing:.02em;white-space:nowrap;font-size:21px}.heading{gap:8px}.edition{font-size:22px}.edition span{font-size:11px}.eyebrow{letter-spacing:.16em;font-size:8px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
