*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 345px;height:100vh;overflow:hidden;background:#ede9e0;color:#273731;font:13px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
[hidden]{display:none!important}.floor-controls{background:#edf1e9;padding:14px;border:1px solid #c9d3c5;border-radius:6px}.floor-controls p{margin:0;font-size:10px}
.wide-button{width:100%;margin-bottom:9px}#component-list{display:grid;gap:5px}.component-row{display:grid;grid-template-columns:43px 1fr;gap:8px;align-items:start;font-size:10px}.component-code{background:#fff;border:1px solid #111;border-radius:3px;color:#000;font-weight:750;text-align:center;padding:2px 3px}.component-description{padding-top:2px}
.pan-pad{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:8px}.pan-pad [data-pan=up]{grid-column:2}.pan-pad [data-pan=left]{grid-column:1}.pan-pad [data-pan=down]{grid-column:2}canvas:focus-visible{outline:2px solid #58725e;outline-offset:-3px}
.quick-floors{position:absolute;top:142px;left:34px;right:24px;max-width:max-content;z-index:4;display:flex;flex-wrap:wrap;gap:5px;padding:7px;background:rgba(250,249,245,.97);border:1px solid #c9d0c2;border-radius:6px}.quick-floors button{padding:8px 10px}#garage-door-quick{background:#2b493c;color:#fff}body.capture .quick-floors{display:none}@media(max-width:650px){.quick-floors{top:125px;left:16px;right:16px;justify-content:center}.quick-floors button{font-size:10px;padding:7px}}
#viewport{position:relative;height:100vh;overflow:hidden;min-width:0}canvas{display:block;touch-action:none}header{position:absolute;left:34px;top:28px;pointer-events:none;z-index:2}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px}h1{font-size:36px;font-weight:450;letter-spacing:-1.4px;margin:6px 0}header p{font-size:11px;color:#69776c;margin:0}
#view-label{position:absolute;top:35px;right:30px;font-size:10px;letter-spacing:1.3px;z-index:2}footer{position:absolute;bottom:38px;left:34px;pointer-events:none;max-width:85%}footer strong{font-size:10px;letter-spacing:1.5px}footer p{font-size:10px;color:#6a756d;margin:5px 0}.help{position:absolute;bottom:14px;left:34px;font-size:9px;color:#7c857b}
aside{background:#faf9f5;overflow:auto;border-left:1px solid #d2d8cc;padding:27px 23px}h2{font-size:25px;font-weight:500;line-height:1.2;margin:15px 0 12px;letter-spacing:-.5px}aside p{font-size:11px;color:#677167}section{border-top:1px solid #dedfd6;margin-top:19px;padding-top:15px}h3{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 12px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:15px}button{font:inherit;font-size:11px;border:1px solid #c9d0c2;border-radius:5px;padding:10px 7px;background:transparent;cursor:pointer;color:#294034}button:hover{background:#e6ebe1}button.selected,.primary{background:#2b493c;color:#fff;border-color:#2b493c}label{display:flex;gap:7px;font-size:10px;align-items:center;margin:11px 0}input{accent-color:#4d7259}dt{font-size:11px;font-weight:600;margin-top:10px}dd{font-size:10px;color:#70786e;margin:1px 0 0}.warning{background:#f5efe1;border:1px solid #d9c39e;border-radius:5px;padding:13px}.warning p{font-size:10px;color:#7b6549}.primary{width:100%;margin-top:20px}.small{font-size:9px!important;text-align:center;margin-top:13px}#error{position:absolute;z-index:20;top:150px;left:30px;right:30px;background:#ffe9d8;border:1px solid #a66b3f;padding:18px}
body.capture{display:block}body.capture aside,body.capture .help{display:none}body.capture #viewport{width:100vw}body.capture header{left:42px;top:30px}body.capture footer{bottom:25px;left:42px}
@media(max-width:900px){body{grid-template-columns:minmax(0,1fr) 285px}header{left:18px}h1{font-size:28px}#view-label{top:auto;bottom:105px;right:15px}aside{padding:20px 15px}}
@media(max-width:650px){body{display:block;height:auto;overflow:auto}#viewport{height:65vh;min-height:440px}aside{height:auto}header p{font-size:9px}footer{left:18px}body.capture #viewport{height:100vh}}
body:not(.capture){width:var(--app-width,100vw);height:var(--app-height,100dvh);overflow:hidden}
body:not(.capture) #viewport{height:var(--app-height,100dvh);min-height:0}
body:not(.capture) #controls-panel{min-width:0;min-height:0;height:var(--app-height,100dvh);max-height:100dvh;overscroll-behavior:contain}
body.controls-hidden:not(.capture){grid-template-columns:minmax(0,1fr)}
body.controls-hidden:not(.capture) #controls-panel{display:none}
body.compact-layout:not(.capture){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:55% 45%}
body.compact-layout:not(.capture) #viewport{height:100%;min-height:0}
body.compact-layout:not(.capture) #controls-panel{position:relative;width:100%;height:100%;max-height:none;border-top:1px solid #c9d0c2;padding:14px;overflow:auto}
body.compact-layout header{left:16px}body.compact-layout h1{font-size:27px}
body.compact-layout .quick-floors{left:16px;right:16px;top:125px}
body.compact-layout .quick-floors button{padding:7px;font-size:10px}
body.compact-layout #view-label{top:auto;bottom:105px;right:15px}
#controls-toggle{font-weight:700}
select{width:100%;padding:9px 7px;border:1px solid #c9d0c2;border-radius:5px;background:#faf9f5;color:#294034;font:inherit;font-size:11px;margin:4px 0 10px}
body.lighting-evening #viewport header,body.lighting-evening #view-label,body.lighting-evening #viewport footer{color:#eef2ee;text-shadow:0 1px 5px #000}
body.lighting-evening #viewport header p,body.lighting-evening #viewport footer p,body.lighting-evening .help{color:#d1dad8;text-shadow:0 1px 4px #000}
#lighting-status{font-size:10px;color:#526c59}
#controls-panel>h2{font-size:18px;margin:0 0 12px}#controls-panel>section:first-of-type{margin-top:0}
.credits{margin-top:14px;font-size:10px;color:#687368}.credits summary{cursor:pointer}.credits p{font-size:10px}
#loading-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(232,231,223,.76)}
.loading-card{display:flex;align-items:center;gap:14px;padding:22px 28px;background:#faf9f5;border:1px solid #c9d0c2;border-radius:10px;box-shadow:0 8px 30px #0001;color:#294034;font-size:14px}
.loading-spinner{display:block;width:30px;height:30px;border:3px solid #d5ded3;border-top-color:#2b493c;border-radius:50%;animation:viewer-spin .85s linear infinite;will-change:transform}
@keyframes viewer-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;border-right-color:#2b493c}}
body.lighting-evening #loading-overlay{background:rgba(21,30,41,.68)}