*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#f6f4ed;color:#303537;font-family:Arial,sans-serif}header{height:64px;margin:0 24px;display:flex;align-items:center;border-bottom:1px solid #d9d8d2}.brand{display:flex;align-items:center;gap:7px;text-decoration:none}.brand-emblem{width:26px;height:32px;object-fit:contain;filter:brightness(0);opacity:.7}.brand-wordmark{width:124px;height:37px;object-fit:contain;filter:brightness(0);opacity:.7}main{height:calc(100dvh - 64px);padding:16px 24px 20px}.visual{height:100%;display:flex;flex-direction:column;overflow:hidden;background:#edece6;border-radius:4px}.visual-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;flex-shrink:0}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600}.tag{font-size:11px;color:#727570;white-space:nowrap}#stage{position:relative;flex:1;min-height:0;touch-action:none}#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.fallback{position:absolute;height:80%;max-width:80%;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%)}#dimension{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}#dimension path{fill:none;stroke:#f7edcf;stroke-width:1.4}#dimension-leader{opacity:.7}#dimension-label,#pen-label{position:absolute;z-index:3;pointer-events:none;background:#f6f4edf0;color:#303537;padding:6px 9px;border-radius:3px;text-align:center;white-space:nowrap;font-size:13px;font-weight:600}#dimension-label{min-width:112px}#dimension-label span{display:block;font-size:9px;font-weight:400;margin-top:2px}#pen-label{font-size:10px;font-weight:400}.viewer-bottom{flex-shrink:0;padding:8px 18px 10px}.view-controls{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.view-controls button{border:0;border-radius:18px;background:none;color:#676e6e;font:500 11px Arial;padding:8px 12px;cursor:pointer}.view-controls button.active,.view-controls button[aria-pressed=true]{background:#303d45;color:#fff}.thickness-picker{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px}.picker-label{font-size:9px;letter-spacing:1px;margin-right:6px;color:#696f6c}.thickness-picker button{cursor:pointer;border:1px solid #cccfc7;border-radius:5px;background:transparent;color:#3a4243;min-width:92px;padding:7px 16px}.thickness-picker button.active{background:#303d45;color:white;border-color:#303d45}.thickness-picker strong{font-size:13px;font-weight:500;display:block}.thickness-picker button span{font-size:10px;display:block;margin-top:3px}.estimate{margin:7px 0 0;text-align:center;font-size:9px;color:#7a7d77}button:focus-visible,a:focus-visible{outline:2px solid #b7975d;outline-offset:2px}@media(max-width:500px){header{height:54px;margin:0 12px}main{height:calc(100dvh - 54px);padding:10px 12px 12px}.visual-heading{padding:12px}.eyebrow{font-size:9px;letter-spacing:1px}.tag{font-size:9px}.viewer-bottom{padding:6px 8px 9px}.view-controls button{font-size:10px;padding:7px 8px}.thickness-picker{gap:5px}.thickness-picker button{min-width:76px;padding:6px 9px}.picker-label{font-size:8px;margin-right:1px}.estimate{font-size:8px}}
.brand{gap:10px}.brand-emblem{width:38px;height:44px;opacity:.78}.brand-name{font-family:Georgia,serif;font-size:26px;font-weight:400;letter-spacing:.15px;color:#434542;white-space:nowrap}
.brand-emblem{width:46px;height:50px}.brand{gap:5px}
/* Navy leather and antique gold, matching the cover. */
body{background:#101d2c;color:#eee1bf}header{border-bottom-color:#a58a4d45}.brand-name{color:#d6bb7c}.brand-emblem{filter:brightness(0) saturate(100%) invert(80%) sepia(29%) saturate(592%) hue-rotate(358deg) brightness(88%) contrast(91%);opacity:1}.visual{background:#162638;border:1px solid #ad8c4740;box-shadow:0 12px 36px #0002}.visual-heading{background:#162638}.eyebrow{color:#e2cf9e}.tag{color:#b6ae98}.viewer-bottom{background:#142334;border-top:1px solid #a58a4d50}.view-controls button{color:#bcb7a9}.view-controls button.active{background:#ccb175;color:#172333}.view-controls button:hover{color:#f4dfae}.view-controls button.active:hover{color:#172333}.picker-label{color:#c0ad7d}.thickness-picker button{color:#dfd4b9;border-color:#aa8e4e66;background:#1b2c3e}.thickness-picker button.active{background:#d2b97e;border-color:#d2b97e;color:#152335}.thickness-picker button:hover{border-color:#e2c788}.estimate{color:#9a9e9b}#dimension-label,#pen-label{background:#142334eb;color:#ead8a9;border:1px solid #c3a36180}button:focus-visible,a:focus-visible{outline-color:#ead299}
/* The room is the interface: small mark above, buttons below. */
header{position:absolute;left:24px;top:15px;height:48px;margin:0;border:0;z-index:5}.brand{gap:7px;filter:drop-shadow(0 2px 5px #000b)}.brand-name{font-size:23px;color:#ead8a9}.brand-emblem{width:37px;height:43px}main{height:100dvh;padding:0}.visual{height:100%;border:0;border-radius:0;box-shadow:none;position:relative}#stage{position:absolute;inset:0;min-height:0}.viewer-bottom{position:absolute;z-index:4;bottom:18px;left:50%;transform:translateX(-50%);padding:9px 13px 10px;border:1px solid #c6a86935;border-radius:12px;background:#102031bc;backdrop-filter:blur(12px);width:max-content;max-width:calc(100% - 24px)}.thickness-picker{margin-top:5px}.thickness-picker button{min-width:90px}.view-controls{flex-wrap:nowrap}.view-controls button{white-space:nowrap}#dimension-label,#pen-label{background:#142334be;backdrop-filter:blur(4px)}@media(max-width:500px){header{top:10px;left:14px;height:44px;margin:0}main{height:100dvh;padding:0}.brand-name{font-size:21px}.brand-emblem{width:33px;height:38px}.viewer-bottom{bottom:12px}.thickness-picker button{min-width:82px}}
/* Quiet labels and controls leave the scene unobstructed. */
#dimension-label,#pen-label{background:none;border:0;backdrop-filter:none;box-shadow:none;color:#f5dfaa;text-shadow:0 1px 4px #000,0 0 10px #0009;padding:3px 6px}#dimension-label{font-size:13px}#dimension-label span{font-size:8px}.viewer-bottom{background:none;border:0;backdrop-filter:none;box-shadow:none}.visual:after{content:"";position:absolute;inset:auto 0 0;height:145px;background:linear-gradient(transparent,#07121db0);pointer-events:none;z-index:3}.view-controls button{color:#e7dfcb;text-shadow:0 1px 3px #000}.view-controls button.active{text-shadow:none}.thickness-picker button{background:none;border-color:transparent;color:#eadbb8;text-shadow:0 1px 3px #000}.thickness-picker button.active{background:#d2b97e;color:#152335;text-shadow:none}.thickness-picker button:hover{border-color:#e2c78866}
header{right:24px;justify-content:space-between}.site-menu{position:relative;pointer-events:auto;font-size:13px;color:#ecd9aa}.site-menu summary{cursor:pointer;padding:10px 15px;border:1px solid #d2b97e66;border-radius:20px;background:#142335b8;list-style:none}.site-menu nav{position:absolute;right:0;top:44px;width:190px;padding:8px;background:#142335f5;border:1px solid #d2b97e66;border-radius:10px;box-shadow:0 8px 24px #0005}.site-menu a{display:block;padding:11px;color:#ecd9aa;text-decoration:none;border-radius:5px}.site-menu a:hover{background:#d2b97e22}.site-menu summary:focus-visible{outline:2px solid #d2b97e}