:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#333049;background:#f5f4f9;font-synthesis:none;--accent:#7554cf;--line:#e8e4ef}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ad92ee;outline-offset:4px}header{height:83px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fdfcff}.brand{display:flex;align-items:center;gap:13px}.brand strong{font-size:23px;letter-spacing:3px}.brand>span:last-child{color:#9790a8;font-size:10px;letter-spacing:2px;margin-left:7px}.brand-mark,.mini-ring{width:29px;height:29px;border:8px solid #7554cf;border-right-color:#c8a4ef;border-bottom-color:#dfb6e8;border-radius:50%;display:block}#status{font-size:11px;color:#8b829a}#status.ready:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8ca789;margin-right:8px}main{max-width:1680px;margin:25px auto 0;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:22px}.stage{align-self:start;min-height:clamp(520px,calc(100vh - 235px),780px);position:relative;background:#587ed2;border-radius:20px;overflow:hidden;color:white}.stage-heading{position:absolute;top:32px;left:34px;right:20px;z-index:1;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#aaa0bc}.stage .eyebrow{color:#d0dcff}.stage h1{font-size:28px;letter-spacing:1px;font-weight:550;margin:13px 0 10px}.stage-heading p{font-size:12px;color:#dce5ff;margin:0}#viewport{position:absolute;inset:126px 0 62px;touch-action:none}canvas{display:block;width:100%;height:100%}.stage-bottom{position:absolute;bottom:21px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#e0e8ff}.stage-bottom button{border:1px solid #ffffff40;border-radius:7px;padding:9px 13px;color:white;background:#ffffff10;font-size:11px}.panel{border:1px solid var(--line);border-radius:20px;background:#fff;padding:28px 24px;align-self:start}.panel-heading h2{font-size:21px;font-weight:600;margin:10px 0}.panel-heading p{font-size:11px;color:#948b9f;line-height:1.8;margin-bottom:27px}fieldset{border:0;padding:0;margin:0;min-width:0}section+section{border-top:1px solid var(--line)}fieldset section{padding:0 0 22px;margin-bottom:21px}fieldset section+section{padding-top:22px}.section-label{display:flex;justify-content:space-between;font-size:10px;color:#7d728d;letter-spacing:.5px;align-items:center}.section-label>span+span{font-size:9px;color:#aca3b5}#segment-tabs{display:flex;gap:10px;margin:18px 0}#segment-tabs button{height:42px;flex:1;background:var(--color);color:white;border:3px solid white;outline:1px solid transparent;border-radius:11px;font-size:11px}#segment-tabs button[aria-pressed=true]{outline-color:#9273cc;box-shadow:0 3px 8px #7554cf25}.selected{display:flex;justify-content:space-between;align-items:center}.selected h3{font-size:15px;font-weight:550;margin:0}.selected>span{font-size:11px;color:#9c90aa}.toggle{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:11px;color:#7d728d}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}input[type=range]{width:100%;margin:22px 0 12px;accent-color:var(--accent);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#a59aae}.hint{font-size:10px;line-height:1.8;color:#aaa0b5;margin:16px 0 0}.views{display:flex;gap:8px;margin-top:18px}.views button{flex:1;padding:10px;border:1px solid var(--line);background:#faf9fc;border-radius:7px;color:#9a8caa;font-size:11px}.views button[aria-pressed=true]{color:#7854bb;background:#f0eaf9;border-color:#d7c7ec}.reset{width:100%;padding:12px;background:#f6f2fb;border:1px solid #e6dced;border-radius:8px;color:#826299;font-size:11px}.download{display:flex;justify-content:space-between;align-items:center;background:#7554bf;color:white;padding:14px 16px;border-radius:8px;font-size:12px;margin-top:12px}.download>span{font-size:10px;opacity:.7}.detail-note{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);margin-top:24px;padding-top:19px}.mini-ring{width:26px;height:26px;border-width:7px;flex-shrink:0}.detail-note p{font-size:11px;line-height:1.9;color:#877b94;margin:0}.detail-note p span{font-size:9px;color:#b0a6ba}#error{font-size:11px;color:#b34d66}#error:empty{display:none}footer{max-width:1680px;padding:0 35px;margin:24px auto 30px;display:flex;justify-content:space-between;font-size:10px;color:#a198ac}footer i{font-style:normal;margin:0 8px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:#587ed2;z-index:3;font-size:11px}#loading[hidden]{display:none}#loading strong{font-size:14px;font-weight:500}.spinner{height:28px;width:28px;border:2px solid #ffffff40;border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 295px;gap:16px;padding:0 18px}.panel{padding:24px 20px}.stage{min-height:620px}.stage-heading{left:25px}.stage h1{font-size:24px}.stage-bottom{left:20px;right:20px;flex-wrap:wrap}}@media(max-width:720px){header{height:72px;padding:0 20px}.brand>span:last-child{display:none}main{grid-template-columns:1fr;margin-top:16px;padding:0 14px}.stage{min-height:550px}.stage-heading{top:26px;left:24px}.stage h1{font-size:24px}#viewport{inset:120px 0 64px}.stage-bottom{font-size:9px}.panel{padding:28px}.panel-heading p{margin-bottom:25px}.stage-bottom button{font-size:10px}footer{padding:0 22px;font-size:9px;gap:12px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}