:root{--ink:#172326;--muted:#617074;--paper:#f7f8f8;--line:#e2e7e7;--accent:#cda47e;--accent-pale:#f6eee7;--canvas:#192326;--radius:12px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none;font-size:16px;background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,label,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}button{color:inherit}button:focus-visible,a:focus-visible,label:focus-within{outline:3px solid #b57b45;outline-offset:4px}input:focus-visible{outline:3px solid #b57b45;outline-offset:4px}button svg,[data-icon] svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[data-icon]{display:inline-flex;flex-shrink:0}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--line);background:#fff;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{width:38px;height:42px;display:grid;place-items:center}.brand-mark svg{width:34px;stroke:var(--ink);fill:none;stroke-width:1.7}.brand-type{font-size:25px;font-weight:780;letter-spacing:-.07em;display:flex;align-items:center;gap:20px}.brand-type>span{font-size:12px;letter-spacing:.21em;font-weight:650;border-left:1px solid #cad2d3;padding-left:20px}.header-actions{display:flex;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid transparent;border-radius:8px;padding:11px 17px;font-size:14px;font-weight:600;line-height:1.25;transition:background .15s,box-shadow .15s}.button-primary{background:var(--accent);color:#201c18}.button-primary:hover:not(:disabled){background:#dbb48f;box-shadow:0 2px 8px #a0795833}.button-dark{background:var(--ink);color:#fff}.button-dark:hover:not(:disabled){background:#2f4247}.button-outline{background:#fff;border-color:#dce2e3}.button-outline:hover:not(:disabled){background:#f3f6f6}.button-quiet{background:transparent;color:var(--muted)}.button-quiet:hover{background:#edf1f1}.button-light-text{background:transparent;color:#dde5e5;font-weight:500}.full-width{width:100%}
main{max-width:1680px;margin:auto;padding:31px 42px 18px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:.13em;margin:0 0 8px;color:var(--muted)}h1{font-size:30px;font-weight:530;letter-spacing:-.045em;line-height:1.2;margin:0}.project-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:550;padding:8px 12px;background:#e8eded;border-radius:5px;color:#5a696d;white-space:nowrap}
.workspace{display:grid;grid-template-columns:302px minmax(0,1fr);gap:24px;align-items:start}.controls{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}.step-section{padding:22px 21px;border-bottom:1px solid var(--line)}.section-heading{display:flex;gap:10px;align-items:center;margin-bottom:16px}.step-number{color:#7e8d90;font-size:12px;letter-spacing:.02em;border:1px solid var(--line);border-radius:5px;padding:5px 6px;font-weight:550}h2{font-size:16px;line-height:1.3;margin:0;font-weight:620;letter-spacing:-.02em}.step-check{margin-left:auto;color:#517062}.step-check svg{width:17px;height:17px}.upload-tile{display:flex;align-items:center;gap:11px;border:1px solid var(--line);padding:9px;border-radius:8px;cursor:pointer;min-height:77px;transition:border .15s,background .15s}.upload-tile:hover,.upload-tile.drag-over{border-color:var(--accent);background:#fcf8f4}.upload-thumb{flex:0 0 52px;height:56px;border-radius:4px;overflow:hidden;display:grid;place-items:center;background:#eef2f2;color:#798b90}.upload-thumb>img{width:100%;height:100%;object-fit:cover}.door-thumb{background:#edecea}.door-thumb>img{object-fit:contain}.upload-copy{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}.upload-copy strong{font-size:14px;font-weight:580;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.upload-copy>span{font-size:12px;color:var(--muted);line-height:1.4}.upload-action{color:#708084}.upload-action svg{width:16px;height:16px}.field-note{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 0 0}.step-section>.button-outline{margin-top:10px;font-size:14px;min-height:38px;padding:9px 10px}.step-section>.button-outline svg{width:16px;height:16px}.section-description{font-size:14px;color:var(--muted);line-height:1.55;margin:-3px 0 14px}.fit-section{padding-bottom:23px}.corner-keys{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:13px 0 7px}.corner-keys button{display:flex;align-items:center;gap:7px;background:transparent;border:0;padding:6px 0;font-size:12px;color:var(--muted);text-align:left}.corner-keys b{font-weight:600;color:#577075;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef2f2;font-size:12px}.corner-keys button.active b{background:var(--accent);color:var(--ink)}.corner-keys button.active{color:var(--ink)}.keyboard-tip{display:flex;align-items:center;gap:6px;color:#849093;font-size:12px;line-height:1.4;margin:4px 0 20px}.keyboard-tip svg{width:14px;height:14px}.adjustment+.adjustment{margin-top:15px}.adjustment label{display:flex;justify-content:space-between;font-size:14px;font-weight:550;margin-bottom:8px}.adjustment output{color:var(--muted);font-size:12px;font-weight:450;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:18px;margin:0;accent-color:#b68962;cursor:pointer;touch-action:pan-y}.privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;color:#718085;font-size:12px;margin:0;padding:17px 12px}.privacy-note svg{width:13px;height:13px}
.editor{border:1px solid #dfe5e5;border-radius:var(--radius);overflow:hidden;min-width:0;background:#fff}.editor-toolbar{height:65px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;gap:12px}.view-tabs{display:flex;background:#f0f3f3;border-radius:7px;padding:4px;gap:3px}.view-tabs button{background:transparent;border:0;padding:9px 13px;border-radius:5px;color:#68777b;font-size:14px;font-weight:550;white-space:nowrap}.view-tabs button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #192d3512}.edit-actions{display:flex;gap:2px;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:5px;padding:8px;min-width:36px;min-height:36px}.icon-button:hover:not(:disabled){background:#ecf0f0}.icon-button svg{width:18px;height:18px}.toolbar-divider{height:18px;width:1px;background:var(--line);margin:0 8px}.viewport{position:relative;isolation:isolate;background:var(--canvas);height:clamp(460px,51vw,654px);overflow:hidden;touch-action:none;user-select:none}.viewport.is-panning{cursor:grabbing}.viewport.is-placing{cursor:crosshair}.scene{position:absolute;transform-origin:center center;touch-action:none}.scene canvas{display:block;width:100%;height:100%;box-shadow:0 14px 60px #0005}.stage-label{position:absolute;left:22px;top:20px;color:#d6dfe0;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;z-index:2;background:#192326b8;padding:7px 9px;border-radius:4px;pointer-events:none}.stage-label svg{width:14px;height:14px}.guide-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.guide-lines polygon{fill:transparent;stroke:#edbd8d;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:6 4}.corner-handle{position:absolute;width:34px;height:34px;display:grid;place-items:center;background:#f3d3b0;border:3px solid #fff;border-radius:50%;font-size:12px;font-weight:750;color:#3b2b20;transform:translate(-50%,-50%);box-shadow:0 1px 7px #0006;cursor:grab;padding:0;touch-action:none;z-index:4}.corner-handle:before{content:"";position:absolute;inset:-8px;border-radius:50%}.corner-handle.selected{outline:2px solid #edb273;outline-offset:4px}.corner-handle:active{cursor:grabbing}.zoom-control{position:absolute;left:20px;bottom:20px;z-index:6;background:#fff;border:1px solid #ffffff20;border-radius:7px;display:flex;align-items:center;box-shadow:0 2px 10px #0002}.zoom-control .icon-button{min-height:35px;min-width:34px}.zoom-control output{font-size:12px;font-weight:560;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}.canvas-hint{position:absolute;bottom:26px;right:22px;color:#d4dfdf;font-size:12px;display:flex;align-items:center;gap:8px;pointer-events:none}.hint-point{width:8px;height:8px;background:#e8bd96;border:2px solid #fff;border-radius:50%}.editor-footer{min-height:48px;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#738286;gap:12px}.editor-footer>span:first-child{display:flex;align-items:center;gap:7px}.editor-footer svg{width:15px;height:15px}.editor-footer>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}.bottom-note{margin:15px 0 0 326px;font-size:12px;color:#849195;text-align:center;line-height:1.5}.compare-line{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);background:#fff;z-index:5;pointer-events:none;box-shadow:0 0 4px #0005}.compare-knob{position:absolute;top:50%;left:1px;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);box-shadow:0 2px 8px #0003;pointer-events:auto;cursor:ew-resize;touch-action:none}.compare-labels{position:absolute;left:18px;right:18px;bottom:17px;display:flex;justify-content:space-between;pointer-events:none}.compare-labels span{background:#172326c9;color:#fff;font-size:12px;letter-spacing:.12em;padding:6px 8px;border-radius:4px}.compare-control{display:flex;gap:14px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.compare-control input{flex:1}.placement-note{position:absolute;top:66px;left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);padding:11px 13px 11px 16px;border-radius:8px;z-index:6;box-shadow:0 3px 15px #0003;display:flex;gap:18px;align-items:center;font-size:14px;max-width:calc(100% - 30px);width:max-content;line-height:1.4}.placement-note button{border:0;border-left:1px solid var(--line);background:transparent;padding:3px 2px 3px 13px;font-size:12px;color:var(--muted)}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;color:#fff}.empty-icon{color:#d6b18e;background:#ffffff0b;padding:17px;border:1px solid #ffffff15;border-radius:14px;margin-bottom:22px}.empty-icon svg{width:35px;height:35px}.empty-state h2{font-size:25px;font-weight:500}.empty-state p{font-size:14px;line-height:1.7;color:#aebec2;max-width:270px;margin:11px 0 24px}.empty-state>.button+.button{margin-top:9px}.loading-state{position:absolute;inset:0;background:#172326dd;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:14px;z-index:9}.spinner{width:20px;height:20px;border:2px solid #ffffff40;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 100px #0003;padding:25px;max-height:92dvh;max-width:calc(100vw - 28px)}dialog::backdrop{background:#0c171ccc;backdrop-filter:blur(4px)}.crop-dialog{width:700px}.dialog-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.dialog-heading h2{font-size:26px;font-weight:550}.dialog-description{font-size:14px;color:var(--muted);line-height:1.65;margin:15px 0 20px;max-width:570px}.crop-workspace{height:min(49dvh,480px);background:#e5e9e9;border-radius:9px;position:relative;overflow:hidden;touch-action:none}.crop-scene{position:absolute}.crop-scene img{display:block;width:100%;height:100%;object-fit:contain}.crop-scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}#crop-shade{fill:#0b1c2bbb}#crop-polygon{stroke:#f1bb83;stroke-width:2;vector-effect:non-scaling-stroke;fill:none;stroke-dasharray:6 3}.crop-tip{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 17px}.dialog-footer{display:flex;justify-content:space-between;gap:12px;align-items:center}.reset-dialog{width:440px;padding:28px}.reset-dialog h2{font-size:23px}.reset-dialog p{font-size:14px;color:var(--muted);line-height:1.65;margin:14px 0 25px}.toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:14px 20px;border-radius:9px;background:#fff;box-shadow:0 5px 35px #10242c30;border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.5;z-index:30;max-width:calc(100vw - 30px);width:max-content}.toast.error{border-color:#d89c8e}
@media(min-width:1550px){.viewport{height:700px}.controls .step-section{padding-top:26px;padding-bottom:26px}}
@media(max-width:1100px){.app-header{padding:0 24px}main{padding:27px 24px 18px}.workspace{grid-template-columns:275px minmax(0,1fr);gap:18px}.step-section{padding:19px 17px}.bottom-note{margin-left:293px}.view-tabs button{padding:9px 10px}.editor-toolbar{padding:0 11px}.canvas-hint{right:15px;bottom:70px;font-size:12px}.viewport{height:590px}.edit-actions{gap:0}.toolbar-divider{margin:0 3px}}
@media(max-width:800px){.app-header{height:73px;padding:0 20px}.brand-type>span{font-size:12px;letter-spacing:.12em;padding-left:13px}.brand-type{gap:13px;font-size:23px}.brand{gap:6px}.header-actions>.button-quiet{padding:9px;min-width:40px}.header-actions>.button-quiet>span:last-child{display:none}.header-actions{gap:6px}.header-actions .button-primary{padding:11px 13px;font-size:14px}main{padding:23px 20px 18px}.page-heading{margin-bottom:22px}h1{font-size:26px}.eyebrow{font-size:12px}.workspace{display:flex;flex-direction:column;gap:17px}.editor{order:-1;width:100%}.controls{display:grid;grid-template-columns:1fr 1fr;width:100%}.controls .step-section{padding:19px}.controls .step-section:first-child{border-right:1px solid var(--line)}.fit-section{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.fit-section .section-heading,.fit-section .section-description{grid-column:1/-1}.fit-section .section-description{margin-bottom:15px}.fit-section>.button{align-self:center}.corner-keys{margin:0}.keyboard-tip{grid-column:1/-1;margin:12px 0 16px}.adjustment+.adjustment{margin-top:0}.privacy-note{grid-column:1/-1}.viewport{height:clamp(365px,66vw,535px)}.canvas-hint{bottom:26px;font-size:12px;right:20px}.bottom-note{margin-left:0}.editor-toolbar{padding:0 14px;height:60px}.project-badge{font-size:12px}.upload-copy strong{font-size:14px}.upload-thumb{flex-basis:46px;height:50px}.upload-action{display:none}}
@media(max-width:520px){.app-header{padding:0 14px;gap:8px;height:68px}.brand-type>span{display:none}.brand-mark{width:30px}.brand-type{font-size:23px}.header-actions>.button-primary{font-size:12px;padding:10px 11px;min-height:41px}.header-actions svg{width:17px;height:17px}main{padding:22px 12px 15px}.page-heading{margin:0 4px 19px;align-items:end;gap:10px}.page-heading h1{font-size:24px;max-width:245px}.page-heading .eyebrow{font-size:12px;letter-spacing:.1em}.project-badge{padding:6px 8px;font-size:12px;margin-bottom:2px}.editor-toolbar{padding:0 9px;gap:5px;height:57px}.view-tabs{padding:3px;gap:1px}.view-tabs button{font-size:12px;padding:9px 10px}.edit-actions .icon-button{min-width:30px;padding:6px}.toolbar-divider{margin:0 3px}.viewport{height:380px}.stage-label{top:12px;left:12px;font-size:12px}.zoom-control{bottom:13px;left:12px}.canvas-hint{font-size:12px;right:12px;bottom:26px;max-width:150px;line-height:1.4}.corner-handle{width:30px;height:30px;border-width:2px;font-size:12px}.editor-footer{padding:11px 12px;font-size:12px;gap:7px;min-height:44px}.editor-footer svg{width:12px;height:12px}.controls .step-section{padding:16px 13px}.section-heading{gap:7px;margin-bottom:13px}.section-heading h2{font-size:14px}.step-number{font-size:12px;padding:4px 5px}.upload-tile{flex-direction:column;align-items:stretch;padding:7px;gap:8px}.upload-thumb{height:86px;flex-basis:auto;width:100%}.upload-thumb>img{object-fit:cover}.door-thumb>img{object-fit:contain}.upload-copy{gap:4px;padding:0 2px 3px}.upload-copy strong{font-size:12px}.upload-copy>span{font-size:12px}.field-note{font-size:12px;line-height:1.5}.step-section>.button-outline{font-size:12px;gap:6px;min-height:36px}.fit-section{gap:0 14px}.fit-section>.button{font-size:12px;padding:11px 10px;gap:6px}.fit-section>.button svg{width:17px;height:17px}.corner-keys{gap:4px 5px}.corner-keys button{font-size:12px;gap:5px}.corner-keys b{width:17px;height:17px;font-size:12px}.section-description{font-size:14px}.keyboard-tip{font-size:12px}.adjustment label{font-size:12px}.privacy-note{font-size:12px}.bottom-note{font-size:12px;padding:0 13px}.crop-dialog{padding:18px}.dialog-heading h2{font-size:23px}.dialog-description{font-size:14px;margin:13px 0 17px}.dialog-footer .button{font-size:14px;padding:11px 13px}.crop-workspace{height:45dvh}.placement-note{font-size:12px;gap:12px;padding:10px 11px;top:53px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}