:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#19342e;background:#f4f6f2;font-synthesis:none;line-height:1.5;color-scheme:light}*{box-sizing:border-box}body{margin:0;padding:32px 20px}main{max-width:540px;margin:6vh auto}header{display:flex;align-items:center;gap:12px;margin-bottom:34px}.brand{font-size:19px;font-weight:750;letter-spacing:-.6px}.icon{display:grid;place-items:center;width:38px;height:38px;background:#164d40;color:white;border-radius:11px;font-size:22px}h1{font-size:clamp(30px,6vw,40px);letter-spacing:-1.5px;line-height:1.12;margin:12px 0 18px}h2{font-size:22px;letter-spacing:-.5px}.eyebrow{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:#577669}.muted{color:#62756a}.card{background:white;border:1px solid #dce3da;border-radius:22px;padding:26px;margin:24px 0;box-shadow:0 8px 32px #173b2510}.steps{display:flex;gap:8px;margin:24px 0}.steps span{height:4px;flex:1;background:#dce3da;border-radius:6px}.steps .active{background:#24715c}button,.button{font:inherit;font-weight:650;display:block;width:100%;padding:14px 20px;border:0;border-radius:12px;background:#164d40;color:white;cursor:pointer;text-align:center;text-decoration:none;margin:12px 0}button:hover,.button:hover{background:#246c58}button:focus-visible,.button:focus-visible,summary:focus-visible{outline:3px solid #7dba9d;outline-offset:4px}button.secondary,.button.secondary{background:#edf2ec;color:#204c3f}button:disabled{opacity:.5;cursor:wait}.hint{font-size:13px;color:#65766b}.status{min-height:28px;font-size:15px;font-weight:550}.status.error{color:#a23a27}video,img.preview{display:block;width:100%;max-height:380px;object-fit:contain;border-radius:12px;background:#e8ede6}video[hidden],img[hidden],[hidden]{display:none!important}.scene{height:170px;position:relative;margin:10px auto 24px;max-width:320px}.monitor{width:200px;height:105px;border:3px solid #426759;border-radius:7px;position:absolute;left:90px;top:0;background:#e7efe9}.monitor:after{content:"";position:absolute;height:20px;width:3px;background:#426759;top:102px;left:97px}.laptop{position:absolute;top:100px;left:25px;border:3px solid #426759;background:#d9e9df;width:132px;height:74px;border-radius:5px}.laptop:after{content:"";position:absolute;bottom:-8px;left:-13px;width:152px;height:5px;background:#426759;border-radius:0 0 8px 8px}details{border-top:1px solid #e4e8e0;padding-top:16px;margin-top:22px}summary{cursor:pointer}.success{font-size:48px;line-height:1.1;color:#24715c}.row{display:flex;gap:12px}.row>*{flex:1}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.tag{display:inline-block;font-size:12px;padding:5px 10px;border-radius:20px;background:#e5ede3;color:#4c6958}footer{font-size:12px;color:#718071;margin-top:30px}input[type=file]{position:fixed;top:-10000px}a{color:#1b6651} @media(max-width:480px){body{padding:22px 16px}main{margin:2vh auto}.card{padding:20px}.row{display:block}}
@media(max-width:480px){.scene .monitor{left:25%;width:70%;max-width:200px}.scene .monitor:after{left:50%}}
input[type=text]{display:block;width:100%;font:inherit;padding:12px;border:1px solid #9eafa3;border-radius:10px;margin:8px 0}input[type=text]:focus-visible{outline:3px solid #7dba9d;outline-offset:2px}
input#pair-code{text-transform:uppercase;font:24px ui-monospace,monospace;letter-spacing:4px}

/* Proposed logical coordinates share one scale, including negative origins. */
.layout-screen{stroke:#356552;stroke-width:3;vector-effect:non-scaling-stroke}.layout-screen.builtin{fill:#164d40}.layout-screen.external{fill:#dcecdf}
.layout-name{font-weight:700;fill:#193e32}.layout-size{fill:#486b59}.builtin~text{fill:white}
.flow-body{padding:0}.flow-page{width:min(1100px,100%);max-width:none;min-height:100dvh;height:100dvh;margin:0 auto;padding:24px 32px;display:flex;flex-direction:column;gap:12px}.flow-header{margin:0;min-height:38px;flex-shrink:0}.flow-header .tag{margin-left:auto}.flow-page h1{font-size:clamp(26px,4vh,38px);margin:4px 0;flex-shrink:0}.flow-page p{margin:4px 0}.flow-page .status:empty{display:none}.flow-page button,.flow-page .button{margin:6px 0;padding:10px 16px}.flow-page>section,.flow-page>form{flex-shrink:0}.flow-page>.flow-capture{display:flex;flex:1;min-height:360px;flex-direction:column;gap:8px}.flow-qr{flex:1;min-height:220px;display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:12px}.flow-qr canvas{display:block;max-width:100%;max-height:100%}.display-bar{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;padding:3px}.display-chip{display:flex;align-items:center;gap:8px;border:1px solid #9fb5a5;border-radius:10px;padding:8px;white-space:nowrap;font-size:13px}.flow-page .chip-action{width:auto;display:inline-block;padding:3px 7px;margin:0;background:#e5ede3;color:#164d40}.flow-options{display:flex;gap:12px;flex-shrink:0}.flow-options button{width:auto}.flow-footer{margin-top:auto!important;padding-top:8px}.flow-page details{margin:0;padding-top:6px}.flow-layout{display:block;width:100%;height:clamp(220px,43vh,500px);background:#edf2ec;border-radius:14px;touch-action:none;margin:10px 0}.flow-layout text{pointer-events:none}.flow-layout g{cursor:grab}.flow-layout g:focus{outline:none}.flow-layout g:focus>.layout-screen{stroke:#dc8c2c;stroke-width:4}.resize-handle{fill:white;stroke:#164d40;stroke-width:1.5;vector-effect:non-scaling-stroke}.handle-nw,.handle-se{cursor:nwse-resize}.handle-ne,.handle-sw{cursor:nesw-resize}.handle-n,.handle-s{cursor:ns-resize}.handle-w,.handle-e{cursor:ew-resize}.current-screen{stroke:#db8e25;stroke-width:5}.placement-select{align-self:flex-start;font:inherit;max-width:100%;padding:8px;border-radius:8px}.phone-flow{max-width:650px}.phone-flow video{width:100%;max-height:40vh;object-fit:contain;border-radius:12px}.host-form{max-width:600px}.download-view{max-width:720px}#skip-photo{font-size:13px;background:transparent;border:1px solid #b0c4b7;color:#315c48}.flow-page select{font:inherit}.flow-page #start-over{font-size:13px;align-self:flex-start;width:auto}
@media(max-height:700px){.flow-page{padding:14px 24px;gap:6px}.flow-page h1{font-size:26px}.flow-page>.flow-capture{min-height:380px}.flow-page .hint{font-size:12px}.flow-page button{padding:8px 12px}}
@media(max-width:480px){.flow-page{padding:18px 16px;gap:8px}.flow-page>.flow-capture{min-height:420px}.flow-options{flex-wrap:wrap}.flow-options button{flex:1}.display-chip{max-width:85vw;white-space:normal}.flow-header .brand{font-size:17px}}

/* Photo evidence is shown before the editable geometry. */
#detected-photo { display:block; width:100%; height:auto; max-height:65dvh; object-fit:contain; background:#18382f; border-radius:16px; }
#photo-legend { padding-left:1.5em; }
#photo-review { min-width:0; }
.layout-screen.resolution-unknown { fill:transparent; stroke-dasharray:12 8; }
#screen-selection { border:1px solid #b0c4b7; border-radius:12px; padding:12px; min-width:0; }
#screen-selection legend { font-weight:650; }
.screen-choice { display:flex; align-items:center; gap:10px; min-height:44px; padding:9px; margin:6px 0; border:1px solid #b0c4b7; border-radius:8px; cursor:pointer; }
.screen-choice input { width:22px; height:22px; flex-shrink:0; accent-color:#164d40; }
.screen-choice input:focus-visible { outline:3px solid #7dba9d; outline-offset:3px; }