@font-face{font-family:DM Sans;src:url('./fonts/dm-sans-400.ttf')}@font-face{font-family:Manrope;src:url('./fonts/manrope-800.ttf');font-weight:800}
:root{color-scheme:light;--bg:#f4f7fc;--panel:#fff;--soft:#eaf1fc;--ink:#10213a;--muted:#445673;--line:#bdcfe8;--blue:#1d4ed8;--wall:#8299a8;--accent:#1b788b}html[data-theme=dark]{color-scheme:dark;--bg:#0b1426;--panel:#12213b;--soft:#1b2e4b;--ink:#f4f7ff;--muted:#b7c7de;--line:#466382;--blue:#83b0ff;--wall:#9db2c3;--accent:#69c9d2}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 'DM Sans',system-ui,sans-serif}a{color:var(--blue)}button,input,select,textarea{font:inherit;color:var(--ink)}button,input,select{min-height:44px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:var(--panel);min-width:0}button{cursor:pointer}button:hover{border-color:var(--blue);background:var(--soft)}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{color:var(--blue);border-color:var(--blue);background:var(--soft)}:focus-visible{outline:2px solid var(--blue);outline-offset:3px}header,footer{padding:18px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);background:var(--panel)}.brand{font:800 27px Manrope,system-ui;text-decoration:none;color:var(--ink)}.brand span{font:14px 'DM Sans',sans-serif;color:var(--muted)}.badge{font:10px ui-monospace,monospace;letter-spacing:.04em;color:var(--blue);margin-left:auto}main{max-width:1600px;margin:auto;padding:28px}.intro{max-width:880px}.eyebrow{color:var(--blue);font:11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}h1{font:800 clamp(24px,3vw,36px)/1.25 Manrope,system-ui;margin:12px 0}h2{font-size:16px;letter-spacing:-.02em;margin:25px 0 12px}p{color:var(--muted)}.note{font-size:12px;border-left:3px solid var(--line);padding-left:12px}.studio{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;margin-top:30px}.editor,.preview{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px}.editor h2:first-child{margin-top:0}.preview{align-self:start;position:sticky;top:16px}.row{display:flex;gap:10px;align-items:end}.row>*{flex:1;min-width:0}form{display:grid;gap:12px}label{display:grid;gap:5px;font-size:12px;color:var(--muted)}input,select{width:100%}.small{font-size:12px}.dimension{white-space:pre-line;background:var(--soft);border-radius:8px;padding:12px;font:12px/1.7 ui-monospace,monospace;color:var(--ink)}details{border:1px solid var(--line);padding:10px;border-radius:8px}summary{cursor:pointer;min-height:32px;font-size:13px}textarea{display:block;width:100%;height:340px;resize:vertical;font:12px/1.5 ui-monospace,monospace;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:10px;margin:10px 0}.exports{display:grid;gap:8px;margin-top:20px}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.views{display:flex;gap:6px}.check{display:flex;align-items:center}.check input{width:18px;height:18px;min-height:18px;accent-color:var(--blue)}#viewport{position:relative;height:540px;margin:18px -10px 0;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}#plan-svg,#model-canvas{width:100%;height:100%}#plan-svg{display:block}#model-canvas canvas{display:block;touch-action:none}.viewport-caption{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;font:10px ui-monospace,monospace;pointer-events:none;color:var(--muted);background:var(--panel);padding:5px;border-radius:5px}.plan-wall{stroke:var(--wall);stroke-linecap:square}.plan-opening{stroke:var(--bg)}.plan-window{stroke:var(--accent);stroke-dasharray:1 1}.plan-anchor{cursor:pointer}.plan-anchor rect{fill:var(--blue);stroke:var(--panel);stroke-width:.08}.plan-anchor.selected rect{stroke:var(--accent);stroke-width:.25}.plan-anchor text{fill:var(--ink);font-size:var(--plan-font,.42px);paint-order:stroke;stroke:var(--bg);stroke-width:.16px}.plan-dimension{stroke:var(--accent);stroke-width:.055;fill:none;stroke-dasharray:.25 .15}.plan-text{fill:var(--muted);font-size:var(--plan-font,.45px)}.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:12px;height:8px;margin-right:5px;background:var(--wall)}.legend .opening{background:var(--panel);border:1px solid var(--accent)}.legend .anchor{background:var(--blue)}.legend .calibration{background:var(--accent);height:2px}#status{font-size:12px;color:var(--accent);margin-top:14px}#error{font-size:13px;margin-top:14px;padding:12px;background:var(--soft);border:1px solid #b45309;border-radius:7px}footer{border-top:1px solid var(--line);border-bottom:0;justify-content:space-between;font-size:12px;margin-top:30px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:900px){main{padding:20px}.studio{grid-template-columns:minmax(0,1fr);gap:16px}.preview{position:static;grid-row:1}.editor{display:grid;grid-template-columns:minmax(0,1fr)}#viewport{height:430px}.intro{max-width:none}}@media(max-width:420px){header,footer{padding:15px;gap:12px}.brand{font-size:24px}.badge{margin-left:0;font-size:9px;max-width:100%}header button{margin-left:auto}main{padding:15px}.editor,.preview{padding:14px}.toolbar{gap:10px}.views{width:100%;display:grid;grid-template-columns:1fr 1fr}.views button{font-size:13px}#viewport{height:340px;margin-left:0;margin-right:0}.row{gap:8px}input,select{font-size:16px}#preview-hint{font-size:12px}.legend{gap:10px}}