*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#23352e;background:#f5f6f2;font-synthesis:none;--accent:#75ab3c;--line:#e3e7e0}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #679b5980;outline-offset:4px}header{height:83px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);background:#fafbf8}.brand{display:flex;gap:13px;align-items:center}.brand strong{font-size:23px;letter-spacing:3px}.brand-sub{font-size:10px;letter-spacing:2px;color:#849088;margin-left:5px}.brand-mark{width:29px;height:29px;border-radius:50%;background:conic-gradient(#79b638 0 20%,#217aba 20% 40%,#249fd1 40% 60%,#ffba0d 60% 80%,#ef442b 80%);position:relative;transform:rotate(-12deg)}.brand-mark:after{content:"";position:absolute;inset:9px;background:#fafbf8;border-radius:50%}.header-right{display:flex;gap:25px;align-items:center;font-size:11px}.status{color:#7d887d}.status.ready:before{content:"";display:inline-block;width:6px;height:6px;background:#68a267;border-radius:50%;margin-right:7px}.local-tag{border-left:1px solid var(--line);padding-left:25px;color:#869084;letter-spacing:1px}main{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:22px;max-width:1680px;margin:25px auto 0;padding:0 28px}.stage{min-height:790px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 48%,#fff 5%,#f7f9f4 78%);border-radius:20px;position:relative;overflow:hidden}.stage-heading{position:absolute;top:32px;left:34px;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#8a9589}.stage-heading h1{font-size:27px;font-weight:550;letter-spacing:1px;margin:14px 0 10px}.stage-heading p{font-size:12px;color:#849084;letter-spacing:.4px;margin:0}#viewport{position:absolute;inset:130px 0 62px;touch-action:none}#viewport canvas{display:block;width:100%;height:100%;outline:none}.stage-bottom{position:absolute;bottom:22px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:10px}.gesture{font-size:10px;color:#8a958a;display:flex;gap:9px;align-items:center}.gesture>span{font-size:16px;color:#65786a}i{display:inline-block;width:3px;height:3px;border-radius:50%;background:#b9c0b6}.view-switch{display:flex;padding:3px;border:1px solid #dfe5da;border-radius:8px;background:#eef2ea}.view-switch button{border:0;background:transparent;padding:7px 15px;border-radius:5px;font-size:11px;color:#84917f}.view-switch button[aria-pressed=true]{background:white;box-shadow:0 1px 5px #28321e0c;color:#34532b}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:27px 24px 0;align-self:start}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.panel-heading h2{font-size:20px;font-weight:600;margin:8px 0 0;letter-spacing:.4px}.live-dot{width:8px;height:8px;background:#88b36d;border-radius:50%;box-shadow:0 0 0 5px #f0f5eb}fieldset{border:0;padding:0;margin:0;min-width:0}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.7px;color:#68776b}.muted{color:#a6aea2;font-size:9px;font-weight:400}.step-tabs{display:flex;gap:9px;margin:17px 0 19px}.step-tabs button{flex:1;height:41px;border:1px solid transparent;background:color-mix(in srgb,var(--color),white 92%);border-radius:9px;color:var(--color);font-size:12px;font-weight:650;position:relative}.step-tabs button[aria-pressed=true]{background:var(--color);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--color),transparent 80%)}.step-tabs button[aria-pressed=true]:after{content:"";position:absolute;bottom:-6px;left:calc(50% - 3px);height:5px;width:5px;background:var(--color);transform:rotate(45deg)}.selected-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 22px}.selected-title h3{font-size:16px;font-weight:550;margin:0;display:flex;align-items:center;gap:8px}.selected-title h3:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}.selected-title>span{font-size:10px;color:#91a08d;font-variant-numeric:tabular-nums}.field{margin-top:18px}.field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.field-head label{font-size:12px;color:#536653}.number-box{border:1px solid #e4e9df;border-radius:6px;height:30px;display:flex;align-items:center;padding:0 8px;background:#fcfdfb;gap:2px}.number-box input{font-size:12px;font-variant-numeric:tabular-nums;border:0;outline:0;width:53px;background:transparent;text-align:right;color:#40563e;padding:0;appearance:textfield}.number-box input::-webkit-inner-spin-button{appearance:none}.number-box:focus-within{border-color:var(--accent)}.number-box span{font-size:9px;color:#a1ad99;width:13px;text-align:right}input[type=range]{display:block;width:100%;margin:0;appearance:none;height:4px;border-radius:5px;background:linear-gradient(to right,var(--accent) 0 var(--fill,50%),#e9eee5 var(--fill,50%) 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid white;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #8da58050,0 1px 4px #29391c20}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:3px solid white;border-radius:50%;background:var(--accent)}.range-limits{display:flex;justify-content:space-between;font-size:9px;color:#a4ae9d;margin-top:10px}.field-note{font-size:10px;color:#a0aa98;line-height:1.6;margin:14px 0 0}.control-section{padding-bottom:23px;border-bottom:1px solid #eef1ea}.center-section{padding-top:22px;--accent:#70836a}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:11px;color:#74806f;cursor:pointer;position:relative}.toggle-row input{position:absolute;right:0;opacity:0}.switch{height:18px;width:31px;border-radius:20px;background:#d5ddcf;position:relative}.switch:after{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .16s}.toggle-row input:checked+.switch{background:#78996d}.toggle-row input:checked+.switch:after{transform:translateX(13px)}.toggle-row input:focus-visible+.switch{outline:3px solid #679b5980;outline-offset:3px}.share-section{padding-top:20px}.text-button{padding:0;border:0;background:none;font-size:10px;color:#819274}.share-bar{display:flex;gap:3px;height:7px;border-radius:8px;overflow:hidden;margin:14px 0 10px}.share-bar span{transition:flex .1s;background:var(--color)}.share-values{display:flex;justify-content:space-between;font-size:9px;color:#8e9987;font-variant-numeric:tabular-nums}.share-values span:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--color);margin-right:4px}.error{font-size:10px;color:#b55745;line-height:1.6;min-height:16px;margin:10px 0 6px}.actions{display:flex;gap:9px}.actions button{height:41px;border-radius:8px;font-size:11px}.primary{background:#314e38;color:white;border:1px solid #314e38;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.primary:hover{background:#42634a}.primary span{font-size:18px}.secondary{background:#fff;color:#6a7c64;border:1px solid #dfe6d8;padding:0 11px}.secondary:hover{background:#f5f8f1}.panel-footnote{font-size:9px;line-height:1.6;text-align:center;color:#a3ad9c;margin:11px 0 20px}.source-row{border-top:1px solid #eef1e9;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:17px 0;font-size:9px;color:#a0ab99}.source-row a{color:#74876a}footer{max-width:1680px;margin:18px auto;padding:0 39px 10px;display:flex;justify-content:space-between;font-size:10px;color:#929e8d}footer>span{display:flex;align-items:center;gap:8px}footer b{font-weight:500;color:#6f8466}footer a{color:#809477}.loading{position:absolute;inset:0;z-index:5;background:#fafcf7eF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.loading[hidden]{display:none}.loading strong{font-size:15px;font-weight:500}.loading>span:last-child{font-size:11px;color:#8d9c84}.spinner{height:29px;width:29px;border:2px solid #e0e9d9;border-top-color:#78a858;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1500px){.stage{min-height:840px}}@media(max-width:1050px){main{grid-template-columns:minmax(0,1fr) 320px;gap:14px;padding:0 18px}.panel{padding-left:19px;padding-right:19px}.stage-heading{left:25px}.stage-heading h1{font-size:23px}.gesture{font-size:9px;gap:6px}.gesture i:last-of-type,.gesture i:last-of-type+span{display:none}.stage-bottom{left:19px;right:19px}}@media(max-width:760px){header{height:66px;padding:0 20px}.brand-sub,.local-tag{display:none}.header-right{font-size:10px}main{grid-template-columns:1fr;margin-top:15px;padding:0 14px;gap:15px}.stage{min-height:570px}.stage-heading{top:25px;left:23px}.stage-heading h1{font-size:23px}.stage-heading p{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1.5px}#viewport{inset:122px 0 63px}.gesture{font-size:9px;max-width:190px;line-height:1.8}.stage-bottom{left:19px;right:19px}.view-switch button{padding:7px 12px}.panel{padding:25px 24px 0}.panel-heading{margin-bottom:22px}.control-section{padding-bottom:22px}.step-tabs{gap:12px}.step-tabs button{height:45px}.field{margin-top:23px}.number-box input{width:60px}.actions button{height:46px}footer{padding:0 22px;gap:15px;font-size:9px}.loading strong{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.spinner{animation-duration:2s}}