*{box-sizing:border-box}body{margin:0;background:#f5f3ed;color:#252922;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}header{height:86px;margin:0 6%;border-bottom:1px solid #dcded3;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:17px;font-weight:700}.mark{background:#c7f36a;border-radius:50%;width:34px;height:34px;text-align:center;line-height:32px;font-size:27px}.edition{font:10px monospace;letter-spacing:2px;color:#8b9080;margin-left:10px}.header-note{font-size:12px;color:#777d6d}main{width:min(100% - 40px,980px);margin:54px auto 0}.eyebrow{font-size:12px;letter-spacing:2px;color:#6c7561;display:flex;align-items:center;gap:9px}.eyebrow span{width:7px;height:7px;background:#63913b;border-radius:50%}h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2px;line-height:1.25;margin:22px 0 18px;font-weight:650}h1 span{color:#648342}.description{font-size:14px;line-height:1.9;color:#757a6d;margin-bottom:30px}.mobile-break{display:none}.drawing{position:relative;background:#fffef9;border:1px solid #d9ddce;border-radius:20px;overflow:hidden;box-shadow:0 12px 36px #4b5d3010}.canvas-top,.canvas-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#858d79;pointer-events:none}.canvas-top{top:21px}.canvas-top span:first-child{color:#5e6855;font-weight:600}.canvas-top i{display:inline-block;width:6px;height:6px;background:#a1b18b;border-radius:50%;margin-right:7px}.canvas-bottom{bottom:19px}#count{font:11px monospace}canvas{width:100%;height:350px;display:block;cursor:crosshair;touch-action:none;background-image:radial-gradient(#cad0bf 1px,transparent 1px);background-size:24px 24px}#placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;color:#8c9780}.scribble{font-size:76px;line-height:1;transform:rotate(-18deg);color:#b6c7a4}#placeholder p{font-size:15px;margin:16px 0 8px}#placeholder small{font-size:11px;color:#a0a695}.controls{display:flex;justify-content:space-between;margin-top:18px;gap:12px}button{font:600 13px inherit;font-family:inherit;font-size:13px;border-radius:12px;cursor:pointer;padding:16px 24px;border:1px solid transparent;transition:background .2s,transform .2s}button:focus-visible{outline:3px solid #7a9f48;outline-offset:3px}button:active{transform:translateY(1px)}.secondary{background:transparent;border-color:#d5d9cc;color:#6c755f}.secondary:hover{background:#eaeedf}.primary{background:#c7f36a;color:#2b3a1e;font-weight:700;min-width:204px}.primary:hover{background:#b9e857}.primary span{margin-left:24px;font-size:20px}.primary:disabled{background:#e4e8db;color:#9ca38f;cursor:default}.footnote{display:flex;justify-content:center;gap:20px;font-size:11px;color:#8a927e;margin:26px 0 38px}.footnote b{font-weight:400;color:#b5bbaa}footer{margin:0 6%;border-top:1px solid #dcded3;padding:24px 0;display:flex;justify-content:space-between;font-size:10px;color:#929989}@media(max-width:600px){header{height:70px}.edition,.header-note{display:none}main{margin-top:32px}h1{letter-spacing:-1px}.mobile-break{display:block}.description{font-size:12px}canvas{height:320px}.canvas-top,.canvas-bottom{left:16px;right:16px;font-size:10px}.controls button{padding:14px 16px}.primary{min-width:0;flex:1}.primary span{margin-left:10px}.footnote{gap:11px;font-size:10px}footer{gap:12px;flex-direction:column}}