:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#151b25;background:#faf9f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #e76d24;outline-offset:3px}button{touch-action:manipulation}#app{max-width:1100px;margin:auto;padding:20px 24px 12px;height:100dvh;min-height:580px;display:flex;flex-direction:column;gap:12px}header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}.brand{display:flex;align-items:center;gap:12px;font-size:27px;letter-spacing:-1px}.brand svg{width:34px;height:38px}.icon{background:transparent;border:0;min-width:44px;height:44px;font-size:25px;border-radius:12px}#help{border:2px solid #242a33;border-radius:50%;min-width:30px;width:30px;height:30px;font-size:23px;margin:7px}.filebar{display:flex;align-items:center;gap:12px;border:1px solid #e3e1dd;border-radius:15px;padding:12px 14px;background:#ffffff70}.fileicon{background:#efefee;border-radius:11px;padding:9px 15px;font-size:25px}.filetext{min-width:0;flex:1}.filetext strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.filetext span{display:flex;align-items:center;gap:7px;color:#717780;font-size:13px;margin-top:5px}.filetext i{width:7px;height:7px;border-radius:50%;background:#52a16a}#viewport{position:relative;flex:1;min-height:200px;background:radial-gradient(ellipse at 50% 40%,#edf0f1,#dfe3e5);border-radius:16px;overflow:hidden}#canvas{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.viewtools{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:9px}.viewtools button{width:42px;height:42px;background:#ffffffec;border:1px solid #ffffff;border-radius:11px;font-size:19px;box-shadow:0 2px 6px #2633400a}#axis{position:absolute;bottom:15px;left:14px;width:55px;height:60px;font-size:11px;font-weight:600;pointer-events:none}#axis svg{width:55px;height:55px;stroke-width:2}.z{position:absolute;top:-7px;left:22px;color:#3281df}.y{position:absolute;bottom:4px;left:0;color:#459653}.x{position:absolute;bottom:4px;right:0;color:#dd674f}#dimensions{position:absolute;bottom:18px;right:16px;color:#6d7681;font-size:11px;font-variant-numeric:tabular-nums}.gesture{color:#7a8089;text-align:center;font-size:12px;margin:0}.gesture span{margin:0 5px}.controls{padding:14px 16px 9px;border:1px solid #f1f0ed;border-radius:17px;background:#fff;box-shadow:0 3px 15px #20283005}.toolbar{display:flex;gap:12px;margin-bottom:13px;align-items:center}.segmented{display:flex;background:#f7f6f4;border:1px solid #e5e3df;border-radius:11px;padding:3px;flex:1}.segmented button{border:0;background:none;border-radius:8px;padding:10px 14px;flex:1;font-size:13px}.segmented button[aria-pressed=true]{background:#ffdfc9;color:#40230e;box-shadow:0 0 0 1px #ffc99f;font-weight:600}.tool{border:1px solid #e5e3df;background:white;border-radius:11px;padding:12px 14px;font-size:14px;white-space:nowrap}.views{display:flex;align-items:center;padding:0 6px 0 12px}.views select{height:42px;max-width:110px;border:0;background:transparent;font-size:13px}.primary{border:0;background:#f37320;color:white;width:100%;padding:14px;border-radius:12px;font-weight:550;font-size:16px;display:flex;gap:10px;align-items:center;justify-content:center}.primary:hover{background:#e76617}.primary span{font-size:25px;line-height:20px}.privacy{text-align:center;color:#7a8089;font-size:12px;margin:11px 0 1px}#status:empty{display:none}#status{font-size:12px;text-align:center;color:#af3b23;margin:0}#busy,#drop{position:absolute;inset:0;background:#eef0f1ef;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:5}#busy span{font-size:12px;color:#737b83}#busy button{padding:9px 18px;border:1px solid #d5d9dc;border-radius:8px;background:white}[hidden]{display:none!important}.spinner{width:30px;height:30px;border:3px solid #d7dbde;border-top-color:#ed7625;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#drop{border:3px dashed #f37320;font-weight:600}dialog{border:1px solid #ddd;border-radius:20px;padding:28px;max-width:420px;width:90%;line-height:1.6;box-shadow:0 20px 100px #0002}dialog::backdrop{background:#20263066}dialog h2{font-size:23px;letter-spacing:-.6px}dialog p,dialog dd{font-size:14px;color:#646d77}dialog dt{font-weight:600;font-size:14px}dialog dd{margin:0 0 10px}.small,dialog a{font-size:11px!important}dialog a{color:#72523b}.close{position:absolute;right:8px;top:8px}:fullscreen#viewport{border-radius:0;height:100dvh;width:100vw}body.expanded #viewport{position:fixed;inset:0;z-index:20;border-radius:0}button:disabled{opacity:.5;cursor:wait}@media(min-width:700px){#app{padding:25px 40px 20px}.controls{max-width:680px;width:100%;align-self:center}.brand{font-size:29px}.viewtools{top:20px;right:20px}#viewport{min-height:270px}}@media(max-width:480px){#app{padding:16px 12px max(12px,env(safe-area-inset-bottom));gap:10px}.brand{font-size:24px}.toolbar{gap:8px}.segmented button{padding:10px 9px}.controls{padding:12px 10px 8px}.tool{padding:12px 10px}.views{padding:0 4px 0 8px}.views select{width:68px}.gesture{font-size:10px}#dimensions{max-width:60%;text-align:right;font-size:10px}.filebar{padding:10px}.filetext strong{font-size:15px}}

.formats{font-size:10px;color:#7a8089;text-align:center;margin:10px 0 0}.privacy{margin-top:7px}#animate[aria-pressed=true]{background:#ffdfc9}#drop{padding:25px;text-align:center}