:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#303129;background:#f6f5f0;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b69637;outline-offset:5px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 38px;font-size:12px;color:#84867b}header{position:relative;z-index:2}.back{font-size:14px;color:#484b40}header>span{font-size:10px;letter-spacing:1.8px}main{position:relative;min-height:550px;height:calc(100svh - 132px);max-height:1080px;display:flex;flex-direction:column;align-items:center}.intro{position:relative;z-index:1;text-align:center;pointer-events:none}.eyebrow{font-size:13px;letter-spacing:2px;color:#7d806f;margin:10px 0 16px}h1{font-size:clamp(30px,3.5vw,49px);font-weight:600;letter-spacing:-2px;margin:0;line-height:1.2}#caption{font-size:14px;color:#939589;margin:15px 0 0}.mobile-break{display:none}#viewport{position:absolute;inset:120px 0 125px;touch-action:none}#viewport canvas{display:block;width:100%;height:100%;outline-offset:-5px;cursor:grab}#viewport canvas:active{cursor:grabbing}.dock{position:relative;z-index:1;margin-top:auto;width:min(340px,calc(100% - 48px));padding-top:16px}.fold-label{display:flex;justify-content:space-between;font-size:12px;color:#848779}#angle-output{font-variant-numeric:tabular-nums}input[type=range]{display:block;appearance:none;width:100%;height:4px;border-radius:5px;background:linear-gradient(to right,#b8a964 var(--progress,0%),#dedfd5 var(--progress,0%));margin:17px 0 22px;cursor:ew-resize}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #d9dacd;box-shadow:0 1px 4px #454c3722}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #d9dacd}.actions{display:flex;gap:10px}button{border:1px solid #dddfd4;background:transparent;border-radius:16px;height:50px;color:#646b53}.primary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 21px;flex:1;background:#e5e9d8;border-color:#e5e9d8;font-size:14px;font-weight:500;transition:background .2s}.primary:hover{background:#dae0c9}#reset{width:50px;font-size:24px}#reset:hover{background:#ecede5}.hint{text-align:center;font-size:11px;color:#9ca08f;margin:16px 0 0;letter-spacing:.3px}footer{font-size:10px;padding-top:18px;padding-bottom:18px}#loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:10px;font-size:13px;color:#81846e;background:#f6f5f0;z-index:2}#loading[hidden]{display:none}.loader{width:26px;height:26px;border:2px solid #e0e2d5;border-top-color:#a7ae8c;border-radius:50%;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){header,footer{padding-left:22px;padding-right:22px}header{padding-top:max(22px,env(safe-area-inset-top));padding-bottom:20px}header>span{font-size:8px;letter-spacing:1px}main{height:calc(100svh - 125px);min-height:520px;max-height:none}.eyebrow{margin:6px 0 13px;font-size:12px}h1{font-size:32px;letter-spacing:-1.3px}.mobile-break{display:block}#caption{font-size:12px;margin-top:12px}#viewport{inset:124px 0 155px}.dock{padding-top:8px}.hint{margin:14px 0 0}footer{padding-bottom:max(18px,env(safe-area-inset-bottom));font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}