.occupancy-demo{margin:27px 0 32px;padding:24px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink)}
.occupancy-heading h3{font-size:25px;line-height:1.25;margin:9px 0 11px}.occupancy-heading>p{font-size:13px;line-height:1.75;color:var(--muted);max-width:660px;margin-bottom:22px}
.occupancy-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(230px,.85fr);gap:24px;align-items:start}
.occupancy-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;padding:8px;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.occupancy-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:3px;border:1px solid var(--line);font-size:clamp(11px,1.1vw,16px);font-family:ui-monospace,SFMono-Regular,monospace;line-height:1;min-width:0}
.occupancy-demo .occ-unknown{background:var(--surface-alt);color:var(--muted)}
.occupancy-demo .occ-free{background:var(--surface);color:var(--green);border-color:var(--accent-line)}
.occupancy-demo .occ-occupied{background:var(--strong-surface);color:var(--on-strong);border-color:var(--strong-surface)}
.occupancy-demo .occ-truth{outline:2px dashed var(--status-warn);outline-offset:-3px}
.occ-camera{position:absolute;inset:2px;display:grid;place-items:center;border:2px solid var(--green);border-radius:50%;background:var(--accent-soft);color:var(--green);font-size:12px;font-family:inherit}
.occupancy-legend{display:flex;flex-wrap:wrap;gap:12px;margin:13px 0 8px;font-size:11px;color:var(--muted)}
.occupancy-legend>span{display:flex;align-items:center;gap:5px}.occupancy-legend i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:3px;font-family:ui-monospace,monospace}.occupancy-legend .occ-camera-key{color:var(--green);border-color:var(--green);border-radius:50%;background:var(--accent-soft)}
.occupancy-demo .occupancy-map-note,.occupancy-demo .occupancy-hint{font-size:11px;line-height:1.65;color:var(--muted);margin:8px 0 15px}
.occupancy-controls fieldset{border:0;padding:0;margin:0;min-width:0}.occupancy-controls legend{font-size:12px;font-weight:600;margin-bottom:10px}
.occupancy-cameras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.occupancy-cameras button{border:1px solid var(--line);border-radius:8px;padding:10px 4px;background:var(--surface-soft);color:var(--ink);font:inherit;min-height:57px}
.occupancy-cameras button:hover{border-color:var(--accent-line)}.occupancy-cameras button[aria-pressed="true"]{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.occupancy-cameras b{display:block;font-size:14px}.occupancy-cameras span{display:block;font-size:9px;margin-top:5px;line-height:1.3}
.occupancy-controls .occupancy-capture{width:100%;justify-content:center;min-height:42px;font-size:12px;padding:11px 10px}
.occupancy-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 8px}.occupancy-counts>div{padding:10px 6px;background:var(--surface-soft);border-radius:7px;text-align:center}.occupancy-counts dt{font-size:10px;color:var(--muted)}.occupancy-counts dd{margin:5px 0 0;font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums;font-weight:600}
.occupancy-demo .occupancy-captures{font-size:11px;color:var(--muted);margin:0 0 17px}.occupancy-truth{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.6;cursor:pointer}.occupancy-truth input{accent-color:var(--green);margin:2px 0 0;flex-shrink:0}
.occupancy-reset{padding:5px 0;border:0;background:transparent;color:var(--green);font:inherit;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.occupancy-demo .occupancy-status{font-size:12px;line-height:1.75;background:var(--accent-soft);border-left:3px solid var(--green);padding:11px 14px;margin:19px 0 0;min-height:64px;color:var(--ink)}
.occupancy-explanation{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.occupancy-explanation summary{font-size:12px;font-weight:600;cursor:pointer}.occupancy-demo .occupancy-explanation p{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0 0}
.occupancy-demo :is(button,input,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:900px){.occupancy-layout{grid-template-columns:1fr;gap:19px}.occupancy-controls{max-width:500px}.occupancy-cameras span{font-size:11px}.occupancy-cell{font-size:15px}.occ-camera{font-size:13px}}
@media(max-width:500px){.occupancy-demo{padding:17px}.occupancy-heading h3{font-size:22px}.occupancy-grid{gap:2px;padding:5px}.occupancy-cell{font-size:11px}.occ-camera{inset:0;font-size:10px;border-width:1px}.occupancy-demo .occ-truth{outline-width:1px;outline-offset:-2px}.occupancy-legend{gap:9px;font-size:10px}.occupancy-legend i{width:15px;height:15px}}