:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #05090d; color: #e7f5ff; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #123a48 0, transparent 32rem), linear-gradient(135deg, #05090d, #09151b 55%, #040709); }
main { max-width: 620px; margin: auto; padding: 2rem 1.1rem 4rem; }
h1 { font: 900 clamp(2.35rem, 10vw, 4.4rem)/.85 system-ui, sans-serif; letter-spacing: -.07em; margin: .45rem 0 .8rem; }
h1 span { color: #38e4ff; }
.eyebrow { color: #6ef5bf; letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; font-weight: 800; }
.build-label { display:block; width:max-content; max-width:100%; color:#80bfc9; font-size:.65rem; letter-spacing:.12em; margin:.5rem 0 1rem; }
.build-label input { display:inline-block; width:15rem; max-width:100%; padding:.25rem .45rem; margin:0 0 0 .4rem; color:#6ef5bf; font-size:.7rem; }
.lede, #status { color: #a7bac5; line-height: 1.55; }
.camera-controls { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.camera, button { display: block; width: 100%; box-sizing: border-box; padding: .95rem; border-radius: .35rem; font: inherit; font-weight: 800; letter-spacing: .02em; }
.camera { background: rgba(17,38,48,.8); border: 1px dashed #397082; margin: 1.5rem 0 1rem; text-align: center; cursor: pointer; }
.camera input { display: none; }
button { border: 1px solid #38e4ff; background: linear-gradient(135deg, #42d9f4, #72f2b5); color: #031116; cursor: pointer; margin: .75rem 0; box-shadow: 0 0 18px rgba(56,228,255,.16); }
button.secondary { width: auto; background: #10232b; color: #b9f6ff; border-color: #397082; box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
img, video { width: 100%; max-height: 440px; object-fit: cover; border-radius: .35rem; border: 1px solid #2c7182; }
#camera-stage { position: relative; margin-top: 1rem; box-shadow: 0 0 35px rgba(56,228,255,.12); }
#live-label { position: absolute; bottom: .6rem; left: .6rem; right: .6rem; padding: .6rem .75rem; background: rgba(1,9,13,.82); border-left: 2px solid #6ef5bf; color: #d8fbff; font-size: .75rem; }
#boxes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hud-corners::before, .hud-corners::after { content:""; position:absolute; inset:.4rem; pointer-events:none; border:2px solid transparent; }
.hud-corners::before { border-left-color:#38e4ff; border-top-color:#38e4ff; }
.hud-corners::after { border-right-color:#6ef5bf; border-bottom-color:#6ef5bf; }
.watch-label { display:block; margin-top: 1.35rem; color:#bfe8ef; }
section { border-top: 1px solid #28505c; margin-top: 1.5rem; padding-top: 1rem; }
li { margin: .45rem 0; color: #cbdce3; }
details { margin-top: 2rem; }
.reference-lab { border:1px solid #28505c; padding:.2rem .8rem .8rem; margin-top:1.25rem; color:#a7bac5; }
input, select { width: 100%; box-sizing: border-box; padding: .8rem; margin-top: .5rem; border-radius: .25rem; border: 1px solid #397082; background: #071116; color: white; font: inherit; }