*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overflow:hidden}.app{color:#e6e8eb;background:#14171c;flex-direction:column;height:100vh;font:14px/1.4 system-ui,Noto Sans TC,sans-serif;display:flex}.bar,.status{background:#1c2027;align-items:center;gap:8px;padding:8px 12px;display:flex}.bar{border-bottom:1px solid #2a2f38}.status{color:#9aa3ad;border-top:1px solid #2a2f38;font-size:12px}.brand{letter-spacing:.04em;margin-right:8px}.sep{background:#2f3641;width:1px;height:18px}.spacer{flex:1}button{color:#d7dbe0;font:inherit;cursor:pointer;background:#232830;border:1px solid #333a45;border-radius:6px;padding:5px 11px}button:hover:not(:disabled){background:#2c323c}button:disabled{opacity:.4;cursor:not-allowed}button.on{color:#fff;background:#2b6cb0;border-color:#3d84cc}.toggle{gap:4px;display:flex}.stage{flex:1;min-height:0;position:relative}.stage2d{width:100%;height:100%;position:relative}.canvas2d{cursor:crosshair;touch-action:none;background:#0f1216;width:100%;height:100%;display:block}.magnifier{pointer-events:none;background:#0f1216;border:2px solid #48bb78;border-radius:50%;position:absolute;box-shadow:0 6px 20px #0009}.touch-readout{color:#fff;font-variant-numeric:tabular-nums;pointer-events:none;background:#e53e3ee6;border-radius:999px;padding:6px 14px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.hint{color:#6b747f;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.panel{background:#1c2027f5;border:1px solid #2f3641;border-radius:10px;flex-direction:column;gap:10px;width:210px;padding:12px;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 8px 24px #00000080}.panel-head{justify-content:space-between;align-items:center;display:flex}.panel label{color:#9aa3ad;flex-direction:column;gap:4px;font-size:12px;display:flex}.panel input{color:#e6e8eb;font:inherit;font-variant-numeric:tabular-nums;background:#14171c;border:1px solid #333a45;border-radius:6px;padding:7px 9px}.panel input:focus{border-color:#48bb78;outline:none}.row3{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}select{color:#d7dbe0;font:inherit;background:#232830;border:1px solid #333a45;border-radius:6px;padding:5px 8px}.panel .note{color:#6b747f;margin:-4px 0 0;font-size:11px;line-height:1.4}.panel .icon{color:#9aa3ad;background:0 0;border:none;padding:2px 7px}.panel .danger{color:#fc8181;border-color:#7b3030}.area{color:#90cdf4}.warn{color:#e0a33e}.tip{color:#6b747f}@media (width<=720px){.bar,.status{flex-wrap:wrap}button{min-height:40px;padding:9px 13px}.brand,.sep,.spacer,.tip{display:none}}