:root{--ink:#202523;--paper:#f5f6f5;--muted:#69716b;--line:#dce1dc;--orange:#bd7134;--green:#47734d}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.shell{max-width:1260px;padding:24px 48px 0;margin:auto}
h1,h2,p{margin:0}
.live-panel{position:relative;aspect-ratio:640/464;min-height:395px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e7ebe7}
.status-panel{position:absolute;top:20px;left:20px;z-index:1;width:min(400px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;padding:22px 24px;display:flex;flex-direction:column;background:#ffffffeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #ffffffa6;border-radius:10px;box-shadow:0 3px 18px #17221c14}
.status-panel h1{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:600}
.food-description{font-size:17px;line-height:1.5}
.amount-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:25px}
.amount-title strong{font-size:22px;color:var(--green);font-weight:600}
.amount-track{height:7px;background:#e7ece7;border-radius:6px;margin-top:10px;overflow:hidden}
.amount-track>div{height:100%;background:var(--green);transition:width .5s}
.explanation{font-size:12px;color:var(--muted);line-height:1.6;margin:16px 0 0}
.frame-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* Hide the embedded 16-pixel banner in the 640×480 camera image. */
.frame-panel>img{width:100%;height:103.45%;top:-3.45%;position:absolute;object-fit:cover;cursor:zoom-in}
.frame-empty{text-align:center;color:var(--muted);padding:40px;display:flex;align-items:center;flex-direction:column;gap:14px}
.frame-empty span{font-size:14px}
.frame-empty small{font-size:11px;line-height:1.5;max-width:220px}
.notice{font-size:12px;background:#f5eee3;border:1px solid #e6d9bc;color:#776447;padding:13px 17px;border-radius:8px;margin-top:16px;line-height:1.5}
.history{padding:32px 0 40px}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}
.section-heading h2{font-size:24px;font-weight:600}
.history-actions{font-size:11px;color:var(--muted);display:flex;gap:14px;align-items:center}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
#return-live{background:none;border:0;color:var(--green);text-decoration:underline;font-size:11px}
.timeline-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:10px 0 14px}
.empty-history{padding:30px 0 25px;text-align:center;font-size:14px;color:var(--muted)}
dialog{border:0;border-radius:12px;padding:16px;background:#fff;color:var(--ink);max-width:min(860px,94vw)}
dialog::backdrop{background:#17221cbb;backdrop-filter:blur(5px)}
.viewer-frame{width:fit-content;max-width:100%;overflow:hidden;border-radius:8px}
dialog img{display:block;max-height:75vh;max-width:100%;margin-top:-2.5%}
dialog .close{position:absolute;right:22px;top:22px;background:#fff9;border:0;border-radius:50%;width:32px;height:32px}
#viewer-caption{padding:14px 0 0;font-size:12px}
[hidden]{display:none!important}
@media(max-width:850px){.shell{padding:24px 24px 0}}
@media(max-width:600px){.shell{padding:16px 16px 0}.live-panel{min-height:420px}.status-panel{top:66px;left:12px;width:calc(100% - 24px);max-height:calc(100% - 78px);padding:18px 20px}.status-panel h1{font-size:28px}.section-heading h2{font-size:22px}.history-actions{white-space:nowrap}.food-description{font-size:16px}}
.status-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.status-title h1{margin:0;min-width:0}
.notify-button{position:absolute;top:20px;right:20px;z-index:2;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:11px 13px;font-size:12px;font-weight:500}
.notify-button:hover{background:#f5f6f5}
.notify-button[aria-pressed="true"]{color:var(--green);border-color:#b3c8b5;background:#f1f6f1}
.notify-button:disabled{opacity:.65;cursor:wait}
.push-feedback{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px}
@media(max-width:600px){.status-title{gap:12px}.status-title h1{margin-top:0}.notify-button{top:12px;right:12px;padding:10px 12px}}

.timeline{height:38px;background:#e8ede8;border-radius:7px;overflow:hidden;position:relative}
.state-span{position:absolute;top:0;height:100%;border:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:11px;font-weight:500;background:#e8ede8;color:var(--muted)}
.state-span[data-state="idle"]{background:#cbd3cd;color:var(--ink)}
.state-span[data-state="food available"]{background:var(--green);color:#fff}
.state-span[data-state="food being placed"]{background:#a45c27;color:#fff}
.state-span[aria-current="true"]{box-shadow:inset -3px 0 var(--ink)}
.state-span.selected,.state-span:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.state-span:hover:not(:disabled){filter:brightness(.95)}
.state-span:disabled{cursor:default;opacity:1}
.timeline-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.timeline-legend>span{display:flex;align-items:center;gap:6px}
.timeline-legend>span::before{content:"";width:9px;height:9px;border-radius:2px;background:#cbd3cd}
.timeline-legend>span[data-state="food available"]::before{background:var(--green)}
.timeline-legend>span[data-state="food being placed"]::before{background:#a45c27}


.view-indicator{display:flex;flex-direction:row-reverse;align-items:center;gap:15.36px;flex-shrink:0;color:var(--green)}
.view-dot{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 18%,transparent);flex-shrink:0}
.view-lines{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;font-size:11px;white-space:nowrap}
.view-label{font-weight:600}
#capture-age{color:var(--muted)}
.view-indicator:has([data-mode="historical"]){color:var(--orange)}