:root{--bg:#f5f6f7;--panel-bg:#fff;--panel-border:#dce0e4;--text:#20252b;--text-dim:#626c77;--accent:#305b82;--accent-dim:#305b82;--warn:#945616}
body{font-family:Arial,Helvetica,sans-serif}
.site-header{max-width:1200px;text-align:left;margin:auto;padding:28px 24px 20px}
.site-header h1{font-size:28px;letter-spacing:-.5px}
.tagline{margin:0;max-width:none;font-size:14px}
.layout{max-width:1200px;grid-template-columns:minmax(0,1fr);padding:0 24px}
.viewport-panel{gap:12px;min-width:0}
.canvas-wrap{background:#202524;border-radius:5px;aspect-ratio:16/9;max-height:65vh}
.mode-btn.active,#startCameraBtn{color:white;background:var(--accent)}
.control-group,.hud,.table-wrap{border-radius:5px}
.status{color:#34516b}
.family-label{color:var(--text)}
.drop-zone{color:#d6dde4;background:#20252499}
.drop-zone.drag-over{color:white}
.target-library{max-width:1152px;margin:24px auto 0;padding:20px 0;border-block:1px solid var(--panel-border);font-size:13px}
.target-library>span{font-size:11px;letter-spacing:1px;color:var(--text-dim)}
.target-library .hint{margin-top:12px}
.data-panel{max-width:1200px;padding:0 24px 24px}
.site-footer{font-size:11px}
/* Presentation only: keep every original control in the DOM and active. */
.sidebar,
#cameraPanel .control-row:has(#cameraSelect),
#cameraPanel .control-row:has(#resolutionSelect){display:none!important}
/* Camera-only view; original elements remain available to the original scripts. */
.mode-switch,
.hud,
.target-library,
.data-panel,
.site-footer,
.tagline,
#dropZone,
#imagePanel,
#cameraPanel>h3{display:none!important}
/* Full viewport camera surface, with only the restart control on top. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000}
.site-header,#cameraPanel{display:none!important}
.layout{position:fixed;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0!important;display:block}
.viewport-panel{width:100%;height:100%;display:block}
.canvas-wrap{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:#000}
#displayCanvas{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
#restartCameraBtn{position:fixed;z-index:10;bottom:calc(20px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);border:1px solid #ffffff80;border-radius:6px;background:#111b;color:#fff;padding:12px 24px;font:600 15px Arial,sans-serif;cursor:pointer}
#restartCameraBtn:hover{background:#111e;border-color:#fff}
@media(max-width:1200px){.target-library{margin-inline:24px}}
@media(max-width:550px){.site-header{padding:24px 16px 18px}.site-header h1{font-size:25px}.layout,.data-panel{padding-inline:16px}.target-library{margin-inline:16px}.hud{font-size:11px;gap:10px}.canvas-wrap{aspect-ratio:4/3}.control-row{flex-wrap:wrap}}