/* Camera-only chrome keeps the photo workspace independent. */
:root { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --chalk: #f5f5f7; --chalk-dim: #a1a1a6; --chalk-faint: #919198; --ok: #30d158; }
body { background: #000; font-family: var(--sans); padding-bottom: 2rem; }
.bar { position: sticky; top: 0; z-index: 5; min-height: 5rem; padding: calc(.9rem + env(safe-area-inset-top)) max(1.25rem, calc((100vw - 1320px)/2)) .9rem; background: rgb(22 22 24 / .82); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 0; }
.brand { color: var(--chalk); text-decoration: none; font-size: 1rem; font-weight: 600; letter-spacing: -.025em; margin-right: 1rem; }
.bar__state { font-size: .8rem; } .bar__meta { color: var(--chalk-dim); }
.bar__nav { padding: .25rem; background: #303033; border-radius: .75rem; margin-left: 1rem; }
.bar__nav a { min-height: 2.5rem; display: grid; place-items: center; padding: .4rem 1.1rem; border: 0; border-radius: .55rem; }
.bar__nav a[aria-current="page"] { background: #626267; border: 0; box-shadow: 0 2px 5px #0003; }
main { max-width: 1320px; padding: 2.5rem 1.5rem 1.5rem; }
.camera-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.eyebrow { color: var(--chalk-dim); font-size: .65rem; font-weight: 600; letter-spacing: .12em; margin: 0 0 .7rem; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.045em; margin: 0; font-weight: 650; }
.camera-heading > p { color: var(--chalk-dim); font-size: .9rem; margin: 0; }
.camera-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.viewport { height: min(68svh, 740px); min-height: 360px; aspect-ratio: auto; border: 1px solid #ffffff16; border-radius: 1.75rem; background: #101012; }
.viewport video, .viewport canvas { object-fit: contain; }
.curtain { background: radial-gradient(ellipse at 50% 30%, #252529, #111113 75%); gap: 1.25rem; padding: 2rem; }
.camera-icon { width: 3.5rem; height: 3.5rem; color: #a1a1a6; margin-bottom: .5rem; }
.curtain h2 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.2; margin: 0; font-weight: 600; }
.curtain__text { font-size: .95rem; max-width: 32ch; }
.button { min-height: 44px; border: 0; border-radius: 999px; font: 500 .9rem var(--sans); background: #303033; padding: .8rem 1.3rem; touch-action: manipulation; transition: transform 160ms ease-out, background-color 160ms ease-out; }
.button:active { transform: scale(.97); transition-duration: 60ms; }
.button--primary { color: #fff; background: #007aff; padding: .95rem 1.8rem; }
.button--primary:active { background: #0062cc; }
.camera-results { background: #1c1c1e; border-radius: 1.75rem; padding: 1.5rem; min-width: 0; }
.readout { border: 0; padding: .25rem 0 1.75rem; display: block; }
.readout__value { display: block; font-family: var(--sans); font-size: 5rem; line-height: 1; font-weight: 600; letter-spacing: -.065em; margin-bottom: .5rem; }
.readout__label { font-size: .85rem; }
.section-title { font-size: .8rem; font-weight: 600; color: var(--chalk-dim); margin: 0 0 .75rem; letter-spacing: .01em; }
.classes { padding: 0; } .class { padding: .7rem 0; gap: .35rem .8rem; } .class + .class { border: 0; }
.class__name { font-size: .85rem; } .class__count { font-family: var(--sans); font-weight: 600; }
.class__bar { height: 3px; border-radius: 9px; background: #ffffff09; } .class__bar i { border-radius: inherit; }
.feed { margin-top: 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid #ffffff12; }
.feed__empty { padding: 0; font-size: .8rem; } .feed__item { padding: .5rem 0; gap: .5rem; font-size: .8rem; } .feed__item time { font-size: .65rem; } .feed__list { max-height: 12rem; overflow: auto; }
.controls { z-index: 6; bottom: max(.75rem, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 620px; width: calc(100% - 2rem); gap: 1.5rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid #ffffff18; border-radius: 1.5rem; background: rgb(42 42 45 / .88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 10px 40px #0006; }
.slider { min-width: 0; gap: .4rem; } .slider input { min-height: 24px; accent-color: #0a84ff; touch-action: pan-y; } .slider__label { color: #ddd; } .slider__value { font-family: var(--sans); }
.lamp[data-state="live"] { animation: none; box-shadow: 0 0 0 4px #30d15815; }
@media (max-width: 850px) { .camera-layout { grid-template-columns: 1fr; } main { padding: 1.5rem 1rem; } .camera-heading > p { display: none; } .camera-heading { margin-bottom: 1.5rem; } .viewport { height: 48svh; min-height: 300px; border-radius: 1.5rem; } .camera-results { padding: 1.5rem; } .readout { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1.25rem; } .readout__value { font-size: 3.5rem; } .classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; } .brand { font-size: .85rem; margin: 0 auto 0 0; } .bar { flex-wrap: wrap; gap: .5rem; padding-left: 1rem; padding-right: 1rem; } .bar__nav { margin-left: 0; } .bar__state { order: 5; flex: 1; } .bar__meta { order: 6; } .lamp { order: 4; } .controls { gap: .8rem; padding: .8rem 1rem; } .controls .button { font-size: .8rem; padding: .75rem 1rem; } }
@media (prefers-reduced-transparency: reduce) { .bar, .controls { background: #242426; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .bar, .controls, .camera-results, .viewport { border: 1px solid #aaa; } :root { --chalk-dim: #ddd; --chalk-faint: #ccc; } }
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }

/* Live geometry follows the actual camera, including device rotation. */
.viewport[data-camera-ready] { height: auto; min-height: 0; aspect-ratio: var(--camera-ratio); }
.reconnect { font-size: .8rem; }
.reconnect[hidden] { display: none; }

.camera-status { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.camera-status .reconnect { order: 7; flex: none; }
@media (max-width: 850px) { .camera-status { order: 2; flex-basis: 100%; min-height: 1.5rem; } .camera-status .bar__state { white-space: normal; overflow: visible; } }