:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edeaf3;background:#101016;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1250px;margin:auto;padding:26px 32px}header{display:flex;justify-content:space-between;align-items:center;color:#b7abc7;font-size:10px;letter-spacing:1.5px}.badge{border:1px solid #50415d;padding:7px 10px;border-radius:5px;color:#e6cdff;font-size:9px}h1{font-size:35px;font-weight:500;letter-spacing:-1px;margin:22px 0 10px}.intro{font-size:14px;color:#b2aaba;line-height:1.8;margin:0 0 23px}.toolbar{display:flex;gap:9px;flex-wrap:wrap}button{font:inherit;font-size:12px;border:1px solid #4d4357;background:#1d1825;color:#eae4f3;padding:11px 16px;border-radius:7px;cursor:pointer}button#start{background:#dfc5fa;color:#271735;border-color:#dfc5fa;font-weight:600}button:hover:enabled{border-color:#ddbcff}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid white;outline-offset:3px}#status{font-size:12px;color:#b9a9c9;min-height:24px;line-height:1.7;margin:15px 0}.error{color:#f4b891!important}.workspace{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.shape-panel,.camera-panel{border:1px solid #39313f;background:#16131c;border-radius:11px;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 17px;font:9px ui-monospace,monospace;letter-spacing:.8px;color:#a99ab9;border-bottom:1px solid #39313f}.panel-heading b{font-size:8px;font-weight:400;color:#cfb4ea}.stage{height:300px;position:relative;overflow:hidden;background:#131018}.axis{position:absolute;background:#ffffff09}.axis.horizontal{height:1px;left:0;right:0;top:50%}.axis.vertical{width:1px;top:0;bottom:0;left:50%}#shape{width:160px;height:160px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg) scale(1);transform-origin:center}#shape svg{width:100%;height:100%;overflow:visible}#shape rect{fill:#a56ee51a;stroke:#d6aaff;stroke-width:3}#shape .crossbar{stroke:#ac70e5;stroke-width:1.5}#shape .arrow{fill:none;stroke:#f1e4ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}#shape circle{fill:#e7c7ff;stroke:none}.measurements{display:grid;grid-template-columns:repeat(4,1fr);padding:17px;gap:10px;border-top:1px solid #39313f}.measurements span{font-size:9px;color:#a99ab9;display:block;margin-bottom:8px}.measurements strong{font:18px ui-monospace,monospace;font-weight:450}#camera-view{width:min(100%,380px);margin-inline:auto;aspect-ratio:4/3;position:relative;background:#0b0a0e;display:grid;place-items:center;overflow:hidden}#camera-view video,#camera-view img,#camera-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#camera-view.mirrored video,#camera-view.mirrored img,#camera-view.mirrored canvas{transform:scaleX(-1)}#empty{text-align:center;font-size:20px;color:#d4bddf;line-height:1.7}#empty small{font-size:10px;color:#8e829c}.camera-help{font-size:10px;line-height:1.8;color:#a99ab9;padding:0 17px;margin:12px 0}footer{font-size:10px;line-height:1.8;color:#887c94;margin-top:20px}[hidden]{display:none!important}@media(max-width:760px){main{padding:22px 18px}h1{font-size:29px;margin-top:24px}.intro{font-size:12px}.workspace{grid-template-columns:1fr}.stage{height:330px}.camera-panel{order:-1}#camera-view{max-height:330px}.measurements strong{font-size:16px}.panel-heading{font-size:8px}}
a{color:#c7b3ed;text-underline-offset:4px}header a{font-size:11px;letter-spacing:.08em}a:focus-visible{outline:2px solid #d4f5a8;outline-offset:4px}