:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101b1c;color:#f4e7cc}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px;border-bottom:1px solid #705b37;background:linear-gradient(115deg,#342131,#132c30)}h1{font:30px Georgia,serif;margin:3px 0 8px}p{margin:0;line-height:1.5}header p:last-child{color:#cbbf9f;font-size:13px}.eyebrow{font-size:10px;letter-spacing:.15em;color:#d5ad6d}a{color:#efd399}main{padding:18px 24px 28px;max-width:1600px;margin:auto}.tools{display:flex;flex-wrap:wrap;gap:16px;align-items:end}.tools>label{min-width:250px;flex:1}.tools label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#ddd0b0}button,input,select{font:inherit;color:#fff3d9;background:#223638;border:1px solid #846c43;border-radius:5px;min-height:44px;padding:9px 12px}button{cursor:pointer;white-space:nowrap}button:hover{background:#365050}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ebc374;outline-offset:3px}.dimensions{display:flex;gap:7px;align-items:end}.dimensions input{width:88px}.dimensions>span{align-self:center;margin-top:17px}.toggles{display:flex;flex-wrap:wrap;gap:13px;align-items:center;width:100%}.toggles label{display:flex;flex-direction:row;align-items:center;gap:7px;min-height:44px}.toggles input{min-height:24px;width:24px;height:24px;accent-color:#d9b772}.actions{display:flex;gap:8px}.note{font-size:11px;color:#b4b6a5;flex:1;min-width:270px}.measurement{margin:18px 0 14px;padding:13px 15px;border:1px solid #536b66;border-radius:6px;background:#182729}.measurement>strong{font-size:13px;color:#e7d5a8}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:12px 0}.metrics div{display:flex;flex-direction:column;gap:3px}.metrics span{font-size:10px;color:#abbdb5}.metrics b{font-size:20px;font-weight:600}.measurement p{font-size:11px;color:#c5cdbb}.measurement[data-state=warn]{border-color:#b58b47}.measurement[data-state=good]{border-color:#70a394}#previewStage{width:100%;min-height:320px;display:flex;justify-content:center;align-items:flex-start;padding:14px 0;background:repeating-linear-gradient(45deg,#ffffff02 0 10px,transparent 10px 20px);border:1px dashed #38534e;border-radius:8px;overflow:hidden}#scaledBox{position:relative;flex:none}#device{position:absolute;left:0;top:0;transform-origin:0 0;background:#162727;box-shadow:0 0 0 2px #a78650,0 12px 30px #0008;overflow:hidden}iframe{display:block;border:0;width:100%;height:100%;background:#223c36}#inspection{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}footer{font-size:11px;color:#acb8ad;margin-top:16px;line-height:1.5}@media(max-width:650px){header{padding:16px;align-items:start;flex-direction:column;gap:8px}main{padding:14px 12px}.dimensions{flex-wrap:wrap}.metrics{grid-template-columns:1fr 1fr}.note{min-width:100%}.actions{width:100%}h1{font-size:25px}}