:root{font-family:monospace;color:#ddd5bf;background:#14171c}body{margin:0}main{max-width:1000px;margin:30px auto;padding:20px}h1{font-size:22px;color:#d8b97a}#viewport{width:min(100%,800px);margin:24px auto;background:#000;border:6px solid #554e44}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}nav{text-align:center}button,input,select{font:inherit;background:#272e36;color:#eee0c8;border:1px solid #6e6a60;padding:7px;margin:5px}label{display:inline-block;margin:4px}input[type=number]{width:70px}#debug{padding:15px;background:#1d232b;margin-top:12px}pre{white-space:pre-wrap}#message{min-height:1.2em;text-align:center}#viewport{position:relative}#reference-overlay,#comparison-guides{position:absolute;inset:0;pointer-events:none}#reference-overlay{background-repeat:no-repeat;image-rendering:pixelated}#calibration{margin-top:18px;border:1px solid #6e6a60}#calibration p{line-height:1.5}.horizon-guide{position:absolute;left:0;right:0;top:50%;border-top:1px dashed #67e4f0}.target-face{position:absolute;border:1px dashed #ffe184;box-sizing:border-box}.near-limit{position:absolute;top:0;bottom:0;border-left:1px dashed #ffab90}#depth-plane-guides{position:absolute;inset:0;pointer-events:none;overflow:hidden}.depth-line{position:absolute;border-left:2px solid}.depth-line.reference-line{border-left:2px dashed;margin-left:4px}.depth-line span{position:absolute;top:0;right:4px;background:#14171c;font:11px monospace;white-space:nowrap}.reference-line span{top:auto;bottom:0}#depth-table{border-collapse:collapse;font-size:12px}#depth-table td,#depth-table th{padding:7px;border:1px solid #6e6a60}