@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#e9ebe7;background:#111315;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a6c6ad;outline-offset:3px}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:76px;padding:0 42px;border-bottom:1px solid #282c2d;display:flex;align-items:center;gap:40px}.brand{display:flex;align-items:center;gap:12px;font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.04em}.brand-mark{width:32px;height:32px;border:1px solid #9dbca3;border-radius:8px;color:#b4d3b9;display:grid;place-items:center;font-size:21px}.brand-mark span{color:#a8b3aa}.topbar-note{color:#777f7b;font-size:12px}.header-download{margin-left:auto;background:transparent;color:#d9dfd9;border:1px solid #4a544d;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:700}.header-download span{margin-left:18px;color:#adceb4}.workspace{width:min(1520px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 380px;flex:1}.preview-panel{min-width:0;padding:42px 42px 30px;display:flex;flex-direction:column;border-right:1px solid #282c2d}.preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:700;color:#9ebaa3}.preview-head h1,.controls h2{font-family:Space Grotesk,sans-serif;letter-spacing:-.055em;margin:13px 0 6px}.preview-head h1{font-size:clamp(27px,3vw,42px);font-weight:600}.preview-head p,.controls-intro p{color:#858d89;margin:0;font-size:13px}.preview-tag{font-size:10px;letter-spacing:.12em;color:#a4ada7;white-space:nowrap;margin-top:9px}.status-dot,.small-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a8c9ac;margin-left:8px;vertical-align:middle}.drawing-area{position:relative;min-height:450px;flex:1;margin-top:34px;background:#171a1c;border:1px solid #303637;border-radius:12px;overflow:hidden}.drawing-area svg{display:block;width:100%;height:100%;min-height:450px;touch-action:none;cursor:crosshair}.axis{stroke-width:2.5;stroke-linecap:round}.axis-z{stroke:#d1d8d0}.axis-x,.axis-y{stroke:#9ac0a5}.origin-outer{fill:#1b2520;stroke:#b2d0b5;stroke-width:2}.origin-inner{fill:#c5e2c6}.axis-label{fill:#c4d1c6;font-family:Space Grotesk,sans-serif;font-size:16px;font-weight:600}.canvas-hint{position:absolute;left:20px;bottom:19px;color:#69736e;font-size:10px;letter-spacing:.14em;pointer-events:none}.preview-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:#7c8580;font-size:10px;letter-spacing:.13em}.preview-footer .small-dot{margin:0 8px 0 0}.preview-footer button{background:none;border:0;color:#b3beb5;font-size:11px}.controls{padding:42px 28px 30px;overflow-y:auto}.controls h2{font-size:27px;font-weight:600}.controls-intro p{line-height:1.5}.control-group{border-top:1px solid #2e3332;margin-top:30px;padding-top:22px}.section-title{font-size:11px;font-weight:700;color:#8ea994;letter-spacing:.11em;display:flex;gap:13px;text-transform:uppercase;margin-bottom:18px}.section-title span{color:#e3e8e2;letter-spacing:.02em}.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.preset{min-width:0;background:#1b1f20;border:1px solid #303636;color:#dfe4df;border-radius:8px;padding:12px 8px;text-align:left;display:flex;flex-direction:column;gap:7px}.preset.active{background:#25312a;border-color:#8ab394}.preset strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset span{font-size:10px;color:#8f9a92}.angle-control{margin:19px 0 24px}.angle-heading{display:flex;justify-content:space-between;font-size:12px;font-weight:600}.angle-heading span{font-family:Space Grotesk,sans-serif;color:#b1d0b7}.angle-control input[type=range]{width:100%;margin:16px 0 5px;accent-color:#a9c7ae;cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:#69736f;font-size:10px}.lock-row{display:flex;align-items:center;gap:12px;border-top:1px solid #282e2c;padding-top:20px;position:relative;cursor:pointer}.lock-row>span:first-child{flex:1}.lock-row strong,.lock-row small{display:block}.lock-row strong{font-size:11px}.lock-row small{font-size:10px;color:#737e77;margin-top:5px}.lock-row input{position:absolute;opacity:0;right:0}.switch{width:31px;height:18px;background:#3a4140;border-radius:20px;position:relative;flex:none}.switch:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#d5dad5;top:3px;left:3px;transition:transform .15s}.lock-row input:checked+.switch{background:#8eb398}.lock-row input:checked+.switch:after{transform:translate(13px);background:#172019}.lock-row input:focus-visible+.switch{outline:2px solid #a6c6ad;outline-offset:3px}.field-label{display:block;font-size:11px;margin-bottom:9px;color:#a5ada7}select{width:100%;border-radius:7px;border:1px solid #3a4340;background:#1b2020;color:#e5e9e4;padding:11px;font-size:12px}.export-box{background:#202922;border:1px solid #425b48;border-radius:10px;margin-top:30px;padding:22px}.export-box h3{font-family:Space Grotesk,sans-serif;font-size:20px;letter-spacing:-.04em;margin:10px 0 4px}.export-box p{font-size:11px;color:#a4b2a5;line-height:1.5;margin:0 0 20px}.primary-button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#a9c9ae;color:#18211a;border:0;border-radius:7px;font-size:12px;font-weight:700}.primary-button:hover{background:#bed8c1}.primary-button span{font-size:17px}.text-button{background:none;border:0;color:#b3c5b5;padding:11px 0 0;font-size:11px}.xml-preview{white-space:pre;overflow:auto;max-height:230px;background:#111714;border:1px solid #3c5141;border-radius:6px;padding:12px;font-size:10px;color:#bdcbbf}.toast{margin-top:16px;color:#a9c9ae;font-size:11px}.site-footer{height:54px;padding:0 42px;border-top:1px solid #282c2d;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#67716b}@media(max-width:900px){.workspace{grid-template-columns:1fr}.preview-panel{border-right:0;border-bottom:1px solid #282c2d}.drawing-area{min-height:350px}.drawing-area svg{min-height:350px}.controls{max-width:650px;width:100%;margin:auto}.topbar{padding:0 22px}.preview-panel{padding:32px 22px}.site-footer{padding:0 22px}}@media(max-width:560px){.topbar-note{display:none}.topbar{height:64px}.header-download{padding:9px 10px;font-size:10px}.header-download span{margin-left:5px}.preview-head{display:block}.preview-tag{margin-top:17px}.drawing-area{margin-top:24px;min-height:300px}.drawing-area svg{min-height:300px}.controls{padding:32px 22px}.site-footer span:last-child{display:none}}.advanced-export{border-top:1px solid #3a5140;margin-top:18px;padding-top:13px}.advanced-export summary{cursor:pointer;color:#bed1bf;font-size:11px}.advanced-export p{margin:11px 0;color:#92a694}.advanced-export select{background:#19231c;border-color:#4b5e4e}.box-preview .box-left{fill:#91ad98;fill-opacity:.13}.box-preview .box-right{fill:#b1c8b6;fill-opacity:.09}.box-preview .box-top{fill:#b3cdb9;fill-opacity:.2}.box-preview .box-underside{fill:#b3cdb9;fill-opacity:.14}.box-preview .box-edge{stroke:#b8d2bc;stroke-width:1.5;opacity:.78}.below-preview .box-upright{opacity:.48}.preview-tabs{display:flex;gap:4px;align-items:center}.preview-tabs button{padding:7px 11px;border-radius:6px;color:#819086;font-size:11px;letter-spacing:0}.preview-tabs button.selected{background:#26342b;color:#c5dfc9}html,body,#root{height:100%;overflow:hidden}.app-shell{height:100dvh;min-height:0;overflow:hidden}.topbar{height:64px;min-height:64px;padding-inline:24px}.site-footer{height:34px;min-height:34px;padding-inline:24px}.workspace{min-height:0;overflow:hidden;grid-template-columns:minmax(0,1fr) clamp(310px,30vw,380px)}.preview-panel{min-height:0;padding:26px 24px 18px;border-right:1px solid #282c2d;border-bottom:0}.preview-head h1{font-size:clamp(25px,2.5vw,36px)}.drawing-area{min-height:0;margin-top:20px}.drawing-area svg{height:100%;min-height:0}.preview-footer{margin-top:10px}.controls{min-height:0;padding:24px 22px 18px;max-width:none;width:auto;margin:0;overflow-y:auto}.controls h2{font-size:24px}.control-group{margin-top:20px;padding-top:16px}.section-title{margin-bottom:12px}.preset{padding:10px 7px}.angle-control{margin:13px 0 18px}.angle-control input[type=range]{margin:10px 0 3px}.lock-row{padding-top:14px}.export-box{margin-top:20px;padding:16px}.export-box p{margin-bottom:13px}.controls{padding-top:16px;padding-bottom:2px}.controls h2{margin:7px 0 4px}.control-group{margin-top:14px;padding-top:12px}.section-title{margin-bottom:8px}.preset{padding:8px 7px;gap:4px}.angle-control{margin:10px 0 12px}.angle-control input[type=range]{margin:8px 0 2px}.lock-row{padding-top:10px}.export-box{margin-top:14px;padding:13px}.export-box h3{margin:7px 0 3px}.export-box p{margin-bottom:10px}.mobile-view-switch{display:none}@media(max-height:800px){.topbar{height:56px;min-height:56px}.site-footer{display:none}.controls-intro p,.export-box>p,.preview-head p{display:none}.controls h2{margin-bottom:0}.preview-panel{padding-top:18px}.drawing-area{margin-top:14px}}@media(max-width:680px){.topbar-note,.site-footer{display:none}.mobile-view-switch{display:flex;gap:4px;padding:6px 20px;border-bottom:1px solid #282c2d;height:45px;min-height:45px}.mobile-view-switch button{flex:1;background:transparent;border:0;color:#839087;border-radius:6px;font-size:12px}.mobile-view-switch button.selected{background:#26342b;color:#c9dfcc}.workspace{display:block;min-height:0}.workspace .preview-panel,.workspace .controls{display:none;height:100%;max-width:none}.workspace.show-preview .preview-panel,.workspace.show-controls .controls{display:flex}.workspace.show-controls .controls{display:block;overflow-y:auto}.preview-panel{padding:20px 16px 16px}.preview-head h1{font-size:26px}.preview-head p{font-size:12px}.preview-tag{display:none}.drawing-area{margin-top:16px}.controls{padding:18px 20px}.controls-intro p,.export-box>p{display:none}}.topbar{height:56px;min-height:56px}.brand-mark{width:28px;height:28px;font-size:18px}.preview-panel{padding-top:18px}.preview-head h1{font-size:20px;letter-spacing:-.035em;margin:0;font-weight:600}.drawing-area{margin-top:14px}.controls-intro h2{font-size:20px;letter-spacing:-.035em;margin:0}.control-group:first-of-type{margin-top:20px}.section-title{text-transform:none;letter-spacing:0;font-size:12px}.canvas-hint{text-transform:none;letter-spacing:0;font-size:11px}.export-box h3{font-size:17px;margin:0 0 14px}.advanced-export{margin-top:14px}@media(max-width:680px){.topbar{height:56px;min-height:56px}.preview-head h1{font-size:20px}}.preview-panel{position:relative;overflow:hidden;padding:0;border-right:1px solid #282c2d}.drawing-area{position:absolute;inset:0;min-height:0;margin:0;border:0;border-radius:0;background:#171a1c}.drawing-area svg{width:100%;height:100%;min-height:0}.preview-head{position:absolute;z-index:2;top:18px;left:22px;pointer-events:none}.panel-label{color:#dce3dc;font-size:12px;font-weight:700;letter-spacing:.02em}.preview-footer{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;margin:0}.preview-footer button{background:#1b211e;border:1px solid #354239;border-radius:6px;padding:7px 10px}.preview-footer .preview-tabs button{border-color:transparent}.preview-footer .preview-tabs button.selected{background:#314334;border-color:#49664e}.canvas-hint{bottom:60px;left:22px}.drawing-area svg{cursor:default}.origin-drag-handle{cursor:grab;touch-action:none}.origin-drag-handle:active{cursor:grabbing}.axis-handle-dot{fill:#142019;stroke:#b8d4be;stroke-width:2}.axis-drag-handle{cursor:grab;touch-action:none}.axis-drag-handle:active{cursor:grabbing}.drawing-area svg.image-pan-mode{cursor:grab}.drawing-area svg.image-pan-mode:active{cursor:grabbing}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reference-actions{display:flex;gap:14px}.reference-actions button{border:0;border-bottom:1px solid #6e8f76;background:none;color:#c3dcc7;padding:2px 0 6px;font-size:11px}.reference-actions button+button{border-bottom-color:#444e47;color:#89968b}.reference-name{margin-top:10px;color:#849487;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reference-group .angle-control{margin:10px 0 12px}.reference-group .angle-control input[type=range]{margin:7px 0 2px}.angle-control.compact,.reference-group .angle-control.compact{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1fr);align-items:center;gap:12px;margin:12px 0 0}.angle-control.compact .angle-heading{gap:6px;font-size:11px}.angle-control.compact .angle-heading span{white-space:nowrap}.angle-control.compact input[type=range]{margin:0}.angle-control.compact .range-ends{display:none}.angle-value{display:inline-flex;align-items:center;gap:2px;color:#b1d0b7}.angle-value input{width:50px;padding:2px 3px;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:inherit;text-align:right;font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:600;appearance:textfield}.angle-value input:hover,.angle-value input:focus{border-bottom-color:#8eae95;background:transparent;outline:0}.angle-value input::-webkit-inner-spin-button,.angle-value input::-webkit-outer-spin-button{appearance:none;margin:0}@media(max-height:800px){.range-ends{display:none}.control-group{margin-top:10px;padding-top:8px}.angle-control,.reference-group .angle-control{margin:7px 0 8px}.reference-name{margin-top:6px}.advanced-export{margin-top:12px;padding-top:10px}}.controls{border-left:0}.controls-intro{padding-bottom:2px}.view-switch{display:flex;gap:18px;margin-top:12px;border-bottom:1px solid #303735}.view-switch button{background:none;border:0;border-bottom:2px solid transparent;padding:4px 0 10px;color:#89978d;font-size:11px;font-weight:600}.view-switch button.selected{border-bottom-color:#b4d1b9;color:#e2ece3}.view-switch button:hover{color:#e2ece3}.advanced-export{margin-top:20px;padding-top:16px;border-top:1px solid #2e3332}.advanced-export summary{font-size:12px;color:#b9c6bb}.advanced-export p{font-size:11px;color:#89958c}.header-download{margin-left:auto;padding:9px 12px;background:#a9c9ae;border-color:#a9c9ae;color:#17241a}.header-download span{color:#17241a;margin-left:18px}.header-download:hover{background:#bdd9c1}.workspace{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) clamp(320px,25vw,440px)}.topbar{padding-inline:clamp(20px,2vw,40px)}.controls{padding-inline:clamp(20px,2vw,34px)}.preview-head{left:clamp(20px,2vw,38px)}.preview-footer{left:clamp(18px,2vw,36px);right:clamp(18px,2vw,36px)}.canvas-hint{left:clamp(20px,2vw,38px)}@media(min-width:1500px){.controls{padding-top:28px}.controls-intro{padding-bottom:8px}.control-group{margin-top:24px;padding-top:18px}.angle-control{margin:18px 0 22px}.panel-label{font-size:13px}}.presets{gap:16px;border-bottom:1px solid #303735}.preset,.preset.active{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 0 10px;color:#8d9990}.preset.active{border-bottom-color:#b4d1b9;color:#e2ece3}.preset:hover{color:#e2ece3}.preset strong{font-size:11px;font-weight:600}.preset span{font-size:10px;color:#718077}.preset.active span{color:#a7b8aa}@media(max-width:680px){.preview-panel{padding:0}.preview-head{top:15px;left:16px}.preview-footer{left:12px;right:12px;bottom:12px}.canvas-hint{left:16px;bottom:56px}.header-download{font-size:10px;padding:8px 9px}}