@media(max-width:600px){body{min-height:100svh}main{width:min(92vw,560px);min-height:100svh;padding:18px 0 14px}.receiver-heading h1{margin:0 0 4px;font-size:22px}.receiver-heading #status{margin:0;font-size:15px}#setup{margin:18px auto}body[data-receiver-mode=scanning] main{display:grid;grid-template-rows:auto 1fr;align-content:start;padding-top:14px}body[data-receiver-mode=scanning] .receiver-heading{padding-bottom:10px}#capture{display:grid;justify-items:center;gap:12px;margin:0 auto}.scan-frame{position:relative;display:grid;place-items:center;width:min(68vw,300px);height:min(68vw,300px);max-height:34svh;overflow:hidden;border:2px solid var(--optical-primary);border-radius:18px;background:#000;box-shadow:0 0 0 5px color-mix(in srgb,var(--optical-primary) 16%,transparent)}#capture video{width:100%;height:100%;object-fit:cover;object-position:center}.scan-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);padding:5px 10px;border:1px solid color-mix(in srgb,var(--optical-text) 25%,transparent);border-radius:999px;color:var(--optical-text);background:color-mix(in srgb,var(--optical-bg) 76%,transparent);font-size:12px;white-space:nowrap}.receive-progress{width:min(88vw,430px);padding:10px 12px;border:1px solid var(--optical-border);border-radius:12px;background:color-mix(in srgb,var(--optical-surface) 88%,transparent)}#capture .progress{margin:0}#metrics{margin:8px 0 0;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}}