:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#254656;background:#fff;--blue:#048acb;--pale:#e9f6fc;--line:#b7d4e1;--ink:#254656;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:8px 14px;font-weight:600;cursor:pointer;white-space:nowrap}button:hover{background:#edf8fc;border-color:#58a3c4}button:active{transform:translateY(1px)}button:disabled{opacity:.38;cursor:default;transform:none}.active,button[aria-pressed="true"],button.accent{background:var(--blue);color:white;border-color:var(--blue)}.danger{color:#a44343}.plain{border-color:transparent;background:transparent}.small{font-size:14px;min-height:36px;padding:6px 10px}:focus-visible{outline:3px solid #eaad38;outline-offset:3px}::selection{background:#fbd86c;color:#254656}input{accent-color:var(--blue)}input[type=range]{cursor:pointer;min-height:30px}select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}[hidden]{display:none!important}.topbar{height:68px;padding:0 22px;display:flex;align-items:center;gap:18px;border-bottom:1px solid #dce9ef;background:#fff}.topbar h1{font-size:22px;margin:0 20px 0 0;letter-spacing:.02em}.back{color:#427489;text-decoration:none;font-size:14px;white-space:nowrap}.back:hover{text-decoration:underline}.topbar nav{display:flex;gap:6px;margin-right:auto}.topbar nav button{border:0;background:transparent}.topbar nav button.active{background:var(--pale);color:#0075b0}#app{display:flex;height:calc(100dvh - 68px);min-height:580px}#palette{width:96px;flex:0 0 96px;background:#f0f9fd;border-right:1px solid #d9eaf2;padding:10px 10px;overflow:auto;scrollbar-width:thin;scrollbar-color:#a0c9da #f0f9fd}#basic-shapes,#custom-shapes{display:grid;gap:7px}#custom-shapes:not(:empty){border-top:1px solid #c9dfea;padding-top:9px;margin-top:10px}.shape-button{height:68px;min-height:68px;width:74px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;border-radius:9px;position:relative}.shape-button svg{width:33px;height:31px;overflow:visible}.shape-button.active{background:#daf1fd;color:#254656;border-color:#158ac1}.palette-actions{display:grid;gap:7px;margin-top:13px}.palette-actions button{background:#048acb;color:#fff;border:0;font-size:11px;padding:5px 2px}.workspace{display:flex;flex-direction:column;min-width:0;flex:1;background:#fff;position:relative}.optionbar{min-height:60px;border-bottom:1px solid #e6eff3;display:flex;gap:14px;align-items:center;padding:8px 20px;font-size:15px;flex-wrap:wrap}.segmented{display:flex;background:#e7f3fa;border-radius:10px;padding:3px}.segmented button{border:0;min-height:38px;background:transparent}.segmented button.active{background:white;color:#0077b4;box-shadow:0 2px 4px #497b9122}.phase{font-size:13px;color:#447a68;margin-left:auto}.canvas-wrap{position:relative;flex:1;min-height:300px;overflow:hidden}#canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:default}.canvas-hint{position:absolute;top:8px;left:0;right:0;text-align:center;color:#527486;font-size:15px;pointer-events:none;line-height:1.6;margin:0;padding:6px 20px}.toolstrip{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;width:max-content;max-width:calc(100% - 32px);margin:0 auto 12px;background:#e3f3fc;border:1px solid #bdd9e8;border-radius:15px;padding:8px;box-shadow:0 4px 10px #4c768a16}.toolstrip button{min-height:42px;padding:7px 13px;font-size:14px}.separator{height:26px;border-left:1px solid #bcd7e5;margin:0 2px}.zoom-label{font-size:13px;display:flex;align-items:center;gap:6px}.zoom-label input{width:85px}.statusbar{height:36px;min-height:36px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #edf3f6;font-size:12px;color:#426779}#object-count{white-space:nowrap}.floating-panel{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:#edf8fe;border:1px solid #afcfdf;display:flex;gap:12px;align-items:center;padding:9px 15px;border-radius:12px;white-space:nowrap;font-size:14px}.floating-panel label{display:flex;align-items:center;gap:8px}.floating-panel input{width:120px}#node-actions{position:absolute;display:flex;gap:4px;background:white;padding:4px;border-radius:9px;border:1px solid #bcd6e3;box-shadow:0 4px 9px #31627b22}#node-actions button{font-size:12px;min-height:34px;padding:4px 8px}.demo-progress{display:flex;align-items:center;gap:12px;font-size:14px}.demo-progress input{width:min(44vw,400px)}#demo-percent{min-width:42px;font-variant-numeric:tabular-nums}dialog{border:1px solid #c8dbe5;border-radius:18px;max-width:650px;width:calc(100% - 40px);padding:28px 34px;color:#254656;box-shadow:0 18px 60px #1c3c5933}dialog::backdrop{background:#25465655}dialog h2{margin-top:0;font-size:24px}dialog h3{font-size:17px;margin-bottom:5px}dialog p{font-size:15px;line-height:1.8;color:#456877}.dialog-close{float:right}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.tile{cursor:grab}.tile:active{cursor:grabbing}.shape-path{stroke:#50738c;stroke-width:1.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}.selected-shape{stroke:#147faf;stroke-width:2.5}.rotate-handle,.edit-node{cursor:grab}.rotate-handle circle{fill:#fff;stroke:#468d73;stroke-width:2;vector-effect:non-scaling-stroke}.edit-node{fill:white;stroke:#177aad;stroke-width:2;vector-effect:non-scaling-stroke}.node-selected{fill:#ffdb67;stroke:#647548}.edge-hit{fill:none;stroke:transparent;stroke-width:28;cursor:crosshair}.angle-mark{pointer-events:none}.cut-paper{cursor:grab}.cut-guide{fill:none;stroke:#245a7d;stroke-width:2;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}.annotation{font-size:17px;fill:#45667a;paint-order:stroke;stroke:#fff;stroke-width:5;stroke-linejoin:round}.demo-cut{fill:none;stroke:#367b92;stroke-width:1.8;stroke-dasharray:6 5}.toast-error{color:#a34e27!important}@media(min-width:1500px){.shape-button{height:76px;font-size:12px}.shape-button svg{height:38px;width:38px}.toolstrip button{font-size:16px}.canvas-hint{font-size:17px}}@media(max-height:780px) and (min-width:701px){.shape-button{height:54px;min-height:54px;font-size:10px;gap:1px}.shape-button svg{width:27px;height:25px}#basic-shapes{gap:4px}.palette-actions{margin-top:8px}.palette-actions button{min-height:32px}#app{min-height:520px}}@media(max-width:1050px){.topbar{gap:8px;padding:0 12px}.topbar h1{font-size:19px;margin-right:6px}.topbar nav button{padding:8px 10px}.toolstrip{gap:5px}.toolstrip button{padding:6px 10px}.zoom-label{display:none}.phase{width:100%;margin:0}.topbar>.plain{font-size:12px;padding:5px}.optionbar{gap:8px;padding:8px 12px}}@media(max-width:700px){.topbar{height:96px;flex-wrap:wrap;gap:4px 10px;padding:9px 12px}.topbar h1{font-size:19px;margin-right:auto}.topbar nav{order:3;width:100%;justify-content:center}.topbar nav button{font-size:14px;min-height:36px;flex:1}.topbar>.plain{font-size:12px;min-height:32px}.back{font-size:12px}#app{height:calc(100dvh - 96px);min-height:580px}#palette{width:64px;flex-basis:64px;padding:8px 5px}.shape-button{width:53px;height:60px;min-height:60px;font-size:9px}.shape-button svg{width:27px;height:29px}#basic-shapes{gap:5px}.palette-actions button{font-size:10px;min-height:40px}#palette .shape-button.active{border-width:2px}.toolstrip{margin-bottom:8px;max-width:calc(100% - 10px);padding:6px;gap:4px;border-radius:10px}.toolstrip button{min-height:38px;font-size:11px;padding:6px 8px}.separator{display:none}.canvas-hint{font-size:12px;padding:3px 10px;top:4px}.statusbar{height:auto;min-height:40px;font-size:10px;line-height:1.5;padding:5px 9px;gap:6px}.optionbar{font-size:12px;gap:6px;padding:7px}.optionbar .segmented{width:100%;justify-content:center}.segmented button{font-size:12px;flex:1}.small{font-size:11px;min-height:33px;padding:5px 8px}.phase{font-size:11px}.floating-panel{white-space:normal;flex-wrap:wrap;justify-content:center;width:94%;gap:6px;padding:7px;bottom:8px;font-size:11px}.floating-panel button{font-size:11px;min-height:34px;padding:5px 8px}.floating-panel input{width:90px}.demo-progress{font-size:11px;gap:6px}.demo-progress input{width:95px}#demo-options span{font-size:12px}.canvas-wrap{min-height:260px}dialog{padding:20px}dialog p{font-size:14px}}
.custom-entry{position:relative}.remove-custom{position:absolute;right:-5px;top:-5px;width:25px;height:25px;min-height:25px;padding:0;border-radius:50%;font-size:18px;color:#51788c;background:white}.remove-custom:hover{color:#a44343;background:#fff1ed}
.rotate-handle circle:first-of-type{fill:transparent;stroke:none}
:root{--blue:#007bb5}.palette-actions button{background:var(--blue)}.shape-button{font-size:12px}.palette-actions button{font-size:12px}.statusbar{font-size:12px}@media(max-height:780px) and (min-width:701px){.shape-button{font-size:11px}}@media(max-width:700px){#palette{width:72px;flex-basis:72px}.shape-button{width:61px;font-size:11px}.palette-actions button{font-size:11px}.statusbar{font-size:11px}}
#canvas:focus{outline:none}