*{box-sizing:border-box}body{margin:0;background:#f1efe9;color:#272820;font-family:Arial,Microsoft YaHei,sans-serif}main{height:100svh;min-height:640px;position:relative;overflow:hidden}header{position:absolute;z-index:2;top:32px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px}.brand{color:inherit;text-decoration:none;font-weight:700}.intro{position:absolute;top:15%;left:8%;pointer-events:none}.intro p{font-size:12px;letter-spacing:4px;color:#77776b}h1{font-family:Georgia,SimSun,serif;font-size:clamp(52px,7.5vw,112px);font-weight:400;margin:24px 0 16px;letter-spacing:-5px}.sub{font-size:9px;letter-spacing:3px;color:#8b8b80}#viewer{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;cursor:grab}canvas:active{cursor:grabbing}aside{position:absolute;right:7%;bottom:23%;width:205px;pointer-events:none}.index{font-size:10px;letter-spacing:3px;color:#88897d}h2{font-size:24px;font-weight:400;margin:18px 0 12px}aside p{font-size:11px;color:#77776b;line-height:1.8}.swatches{display:flex;gap:12px;margin-top:24px;pointer-events:auto}.swatches button{width:29px;height:29px;border-radius:50%;border:3px solid #f1efe9;outline:1px solid transparent;background:#ded2ba;cursor:pointer}.swatches button:nth-child(2){background:linear-gradient(130deg,#6d420b,#fff1ab,#a67116)}.swatches button:nth-child(3){background:linear-gradient(130deg,#293b32,#ba7749,#473528)}.swatches button.active{outline-color:#696b58}footer{position:absolute;bottom:28px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #d5d5ca;padding-top:20px;font-size:10px;color:#7b7c70;letter-spacing:1px}footer button{border:0;background:none;padding:10px 16px;color:#36392b;font-size:11px;cursor:pointer}#status{position:absolute;bottom:85px;right:4%;font-size:12px}@media(max-width:700px){main{min-height:640px}.intro{top:12%;left:7%}h1{font-size:52px;letter-spacing:-2px}.intro p{font-size:10px}.sub{display:none}aside{right:6%;bottom:14%;width:160px}aside h2{font-size:19px;margin:8px 0}aside p,.index{display:none}.swatches{margin-top:12px}footer{bottom:15px;align-items:flex-start}footer>span{max-width:130px;line-height:1.8}footer button{padding:8px}.intro{z-index:1}}