@import url('data:text/css,');
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#243047;background:#f4f6fa;font-synthesis:none;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}.topbar{height:78px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e7ef;background:#ffffffb3}.brand{font-size:15px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:9px}.brand-light{font-weight:400;color:#78849a}.brand-icon{background:#355edc;color:white;border-radius:9px;font-size:25px;line-height:32px;width:34px;text-align:center;margin-right:4px;letter-spacing:0}.status{font-size:12px;color:#6d7c8c;display:flex;align-items:center;gap:8px}.status i{width:7px;height:7px;border-radius:50%;background:#91a0b5}.status.ready i{background:#36aa80;box-shadow:0 0 0 4px #36aa8015}.status.failed i{background:#cf4c52}main{max-width:1540px;margin:30px auto 0;padding:0 3%;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.stage{position:relative;min-height:720px;background:radial-gradient(ellipse at 40% 40%,#f7f9fd 0,#e7edf6 80%);border:1px solid #dfe6f0;border-radius:22px;overflow:hidden}.stage-heading{position:absolute;z-index:1;left:32px;top:30px;pointer-events:none}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#8390a6}h1{font-size:29px;letter-spacing:-1px;margin:12px 0 8px;font-weight:650}.stage-heading p{font-size:13px;color:#7a879b;margin:0}#viewport{position:absolute;inset:132px 0 52px}canvas{display:block;width:100%;height:100%;touch-action:none}.stage-footer{position:absolute;bottom:20px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7f8b9e}.mouse-icon{font-size:18px;vertical-align:middle;margin-right:7px}.quiet{background:#ffffffaa;border:1px solid #dbe2eb;border-radius:8px;padding:8px 12px;color:#66738b;font-size:11px}.quiet:hover{background:#fff}.panel{background:#fff;border:1px solid #e2e7ef;border-radius:22px;padding:28px 25px 22px;box-shadow:0 8px 32px #253b6004}.panel-title{display:flex;align-items:center;justify-content:space-between}h2{font-size:22px;margin:9px 0 0;font-weight:650}.tag{font-size:10px;color:#8590a3;background:#f5f7fa;padding:7px 9px;border-radius:6px}.intro{font-size:12px;line-height:1.8;color:#8b94a5;margin:14px 0 22px}fieldset{padding:0;border:0;margin:0;min-width:0}.control-row{padding:13px 0 15px;border-bottom:1px solid #f0f2f6}.control-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.bar-label{display:flex;align-items:center;gap:9px;font-size:12px;color:#5a677c}.swatch{width:9px;height:9px;border-radius:3px;background:var(--bar-color)}.number-wrap{display:flex;align-items:center;border:1px solid #dfe5ee;border-radius:7px;padding:6px 8px;background:#fcfdff;gap:4px}.number-wrap:focus-within{border-color:#6889ed;box-shadow:0 0 0 3px #6488ff12}.number-wrap input{border:0;background:transparent;width:61px;outline:0;font-size:13px;color:#2f3c52;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.number-wrap input::-webkit-inner-spin-button{opacity:.4}.number-wrap span{font-size:10px;color:#9aa4b5}.control-row input[type=range]{width:100%;height:4px;margin:5px 0;accent-color:var(--bar-color);cursor:pointer}.error{font-size:11px;color:#bb3d4b;line-height:1.6;margin:8px 0 0;min-height:0}.error:empty{display:none}.actions{display:grid;gap:9px;margin-top:22px}button.primary{border:0;background:#335dd8;color:#fff;border-radius:9px;padding:12px 14px;font-size:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 9px #335dd819}.primary:hover{background:#284fc4}.secondary{border:1px solid #e3e8f0;background:#fff;padding:10px;border-radius:9px;font-size:12px;color:#778397}.secondary:hover{background:#f6f8fc}.settings{display:flex;flex-direction:column;gap:12px;font-size:11px;color:#7b8698;margin:22px 0}.settings label{display:flex;align-items:center;gap:6px;cursor:pointer}.settings input{accent-color:#446ade}.note{display:flex;gap:11px;background:#f5f7fb;border:1px solid #ecf0f6;border-radius:10px;padding:13px}.note-icon{font-size:25px;color:#809ac6}.note strong{font-size:11px;font-weight:600;color:#66768e}.note p{font-size:10px;line-height:1.8;color:#8a96a8;margin:5px 0 0}.source{display:flex;justify-content:space-between;font-size:10px;color:#a0a9b8;margin-top:19px}.source a{color:#7184a2}.source a:hover{text-decoration:underline}.page-footer{max-width:1540px;margin:18px auto 24px;padding:0 3.5%;display:flex;justify-content:space-between;font-size:10px;color:#9aa5b7;letter-spacing:.3px}.loading{position:absolute;inset:40% 0 auto;text-align:center;font-size:13px;color:#71809a;pointer-events:none}.loading.error-state{margin:0 25px;background:#fff9f8;color:#a93e46;padding:20px;border-radius:12px;line-height:1.8}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:2px solid #5f82e6;outline-offset:3px}@media(min-width:1450px){.stage{min-height:790px}}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.panel{padding:24px 20px}.stage-heading{left:24px}h1{font-size:25px}}@media(max-width:760px){.topbar{height:64px;padding:0 5%}.brand{font-size:12px;letter-spacing:1px}.status{font-size:10px}main{grid-template-columns:1fr;margin-top:16px;padding:0 4%}.stage{min-height:460px}.stage-heading{top:22px;left:22px}h1{font-size:24px}#viewport{inset:110px 0 46px}.panel{padding:25px}.intro{margin-bottom:9px}.page-footer{padding:0 5%;font-size:9px;gap:16px}.stage-footer{left:20px;right:20px}.control-row{padding:13px 0}.brand-icon{width:28px;font-size:22px;line-height:28px}}