/* The camera on + (camera.js): the live view full screen, the shutter with its ring, Library and Words at the foot. */
html.pk-camera-open, html.pk-camera-open body { overflow: hidden; }
.pk-cam { position: fixed; inset: 0; z-index: 2147483200; display: grid; grid-template-rows: 1fr auto; background: #050506; color: #f7f1e9; touch-action: none; }
.pk-cam-view { grid-row: 1 / -1; grid-column: 1; width: 100%; height: 100%; object-fit: cover; background: #050506; }
.pk-cam-close { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(5, 5, 6, .45); color: #f7f1e9; font: inherit; font-size: 28px; line-height: 1; }
.pk-cam-note { position: absolute; left: 20px; right: 20px; top: 40%; z-index: 2; display: grid; justify-items: center; margin: 0; }
.pk-cam-note[hidden] { display: none; }
.pk-cam-foot { grid-row: 2; grid-column: 1; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 20px max(24px, env(safe-area-inset-bottom)); }
.pk-cam-word { justify-self: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: #f7f1e9; font: inherit; font-size: 15px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.pk-cam-shutter { position: relative; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.pk-cam-shutter::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #f7f1e9; }
.pk-cam.is-recording .pk-cam-shutter::after { inset: 24px; border-radius: 12px; background: #ff4b3a; }
.pk-cam-shutter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-cam-ring, .pk-cam-ring-fill { fill: none; stroke-width: 6; }
.pk-cam-ring { stroke: rgba(247, 241, 233, .55); }
.pk-cam-ring-fill { stroke: #ffb43f; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pk-cam-close:focus-visible, .pk-cam-word:focus-visible, .pk-cam-shutter:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
@media (min-width: 760px) { .pk-cam { display: none; } }