.webcam-player-container *{box-sizing:border-box}@media (max-width:1600px){.webcam-modal-player{--gutter:200px}}@media (max-width:1440px){.webcam-modal-player{--gutter:180px}}@media (max-width:1280px){.webcam-modal-player{--gutter:160px}}@media (max-width:1140px){.webcam-modal-player{--gutter:140px}}@media (max-width:1024px){.webcam-modal-player{--gutter:120px;--gap:12px}}@media (max-width:900px){.webcam-modal-player{--gutter:96px;--gap:10px}}@media (max-width:800px){.webcam-modal-player{--gutter:72px;--gap:8px}}.webcam-player-container{max-width:100%;overflow-x:hidden}.webcam-header{display:flex;justify-content:left;align-items:center;margin-bottom:16px;gap:1rem}.webcam-header h2{font-size:28px;font-weight:700;margin:0;letter-spacing:0.5px;color:#1a1a1a;text-transform:uppercase}.timestamp{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;white-space:nowrap;width:fit-content}.timestamp.smaller{font-size:12px;padding:4px 8px}.timestamp .green-dot{display:inline-block;width:10px;height:10px;background-color:#3ccf78;border-radius:50%;box-shadow:0 0 0 0 rgba(60,207,120,0.6);animation:pulse-live 1.4s ease-in-out infinite}@keyframes pulse-live{0%{box-shadow:0 0 0 0 rgba(60,207,120,0.6);transform:scale(1)}70%{box-shadow:0 0 0 8px rgba(60,207,120,0);transform:scale(1.12)}100%{box-shadow:0 0 0 0 rgba(60,207,120,0);transform:scale(1)}}.webcam-thumbs-container{position:relative;margin:12px 0 0}.webcam-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.webcam-thumbs::-webkit-scrollbar{display:none}.webcam-thumb{cursor:pointer;border-radius:0}.webcam-thumb-image:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.15);transition:transform 0.2s ease,box-shadow 0.2s ease}.webcam-thumb-image:active{transform:translateY(-2px)}.webcam-thumb-image{position:relative;width:100%;aspect-ratio:16 / 9;background:#e9ecef;overflow:hidden}.webcam-thumb-img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.3s ease}.webcam-loading-skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#e9ecef 25%,#f8f9fa 50%,#e9ecef 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite;display:flex;align-items:center;justify-content:center;color:#6c757d;font-size:14px}@keyframes loading-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.error-state{color:#dc3545;text-align:center;font-size:12px}.webcam-play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;align-items:center;justify-content:center;pointer-events:none}.play-button{width:56px;height:40px;background:rgba(107,114,128,0.85);border-radius:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;transform:scale(1)}.webcam-thumb:hover .play-button{transform:scale(1)}.webcam-thumb-info{padding-top:28px;background:#fff}.webcam-thumb-info h3{margin:0;font-size:14px;font-weight:800;color:#111827;text-align:left;letter-spacing:0.5px;text-transform:uppercase}.webcam-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center}.webcam-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;overflow-x:hidden}.webcam-modal-content{position:relative;width:100vw;max-width:none;min-height:360px;border-radius:0;overflow-x:hidden}.webcam-modal-content:fullscreen{width:100vw;height:100vh;height:100svh;border-radius:0}.webcam-modal-content:fullscreen .webcam-modal-player{--gutter:0;--gap:0}.webcam-modal-content:fullscreen .webcam-angle-preview{display:none !important}.webcam-modal-content:fullscreen .webcam-modal-image-container{width:100%;margin:0;min-width:0;min-height:0;max-height:100vh;max-height:100svh;box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}.webcam-modal-content:fullscreen .webcam-slide-track{width:100%;height:100%}.webcam-modal-content:fullscreen .webcam-modal-close{top:16px;right:16px;z-index:100}.webcam-modal-content.force-landscape{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;background:#000}.webcam-modal-content.force-landscape .webcam-modal-player{position:absolute;top:50%;left:50%;width:100vh;width:100svh;height:100vw;height:100svw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;--gutter:0;--gap:0}.webcam-modal-content.force-landscape .webcam-modal-close{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.webcam-modal-content.force-landscape .webcam-angle-preview{display:none !important}.webcam-modal-content.force-landscape .webcam-side-arrow{display:none !important}.webcam-modal-content.force-landscape .webcam-modal-image-container{width:100%;height:100%;margin:0;min-width:0;min-height:0;max-height:none;box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}.webcam-modal-content.force-landscape .webcam-slide-track{width:100%;height:100%}.webcam-modal-content.force-landscape .webcam-modal-close{top:16px;right:16px;z-index:100}.webcam-modal.simulated-fs .webcam-modal-content{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;border-radius:0}.webcam-modal.simulated-fs .webcam-modal-player{--gutter:0;--gap:0}.webcam-modal.simulated-fs .webcam-angle-preview{display:none !important}.webcam-modal.simulated-fs .webcam-modal-image-container{width:100%;margin:0;min-width:0;min-height:0;max-height:100vh;max-height:100svh;box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}.webcam-modal.simulated-fs .webcam-slide-track{width:100%;height:100%}.webcam-modal.simulated-fs .webcam-modal-close{top:16px;right:16px;z-index:100}.webcam-modal-close{position:absolute;top:14px;right:14px;cursor:pointer;transition:background-color 0.2s ease,transform 0.1s ease;z-index:50}.webcam-modal-header{padding:20px 24px 16px;border-bottom:1px solid #333}.webcam-modal-header h2{margin:0;color:#e5e7eb;font-size:16px;font-weight:500}.webcam-modal-player{position:relative;width:100%;height:100%;--gutter:220px;--gap:16px;display:flex;align-items:center;justify-content:center}.webcam-modal-image-container{position:relative;width:calc(100% - (var(--gutter) * 2.15));height:auto;aspect-ratio:16 / 9;max-height:96vh;max-width:100%;min-height:360px;min-width:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#000;z-index:10;margin:0 calc(var(--gutter) + var(--gap))}.webcam-modal-image-container::after{content:'';position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgb(0 0 0 / 0%) 0%,rgb(0 0 0 / 37%) 55%,rgb(0 0 0 / 65%) 100%);z-index:9;pointer-events:none;opacity:1;transition:opacity 200ms ease}.webcam-modal.controls-hidden .webcam-modal-image-container::after{opacity:0}.webcam-loading-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,0.18);opacity:0;visibility:hidden;transition:opacity 150ms ease;z-index:12;pointer-events:none}.webcam-loading-spinner.active{opacity:1;visibility:visible}.webcam-loading-spinner::after{content:'';display:block;width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,0.35);border-top-color:#ffffff;animation:webcam-spin 0.8s linear infinite}@keyframes webcam-spin{to{transform:rotate(360deg)}}.webcam-slide-track{position:relative;width:100%;height:100%}.webcam-modal-image{width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 300ms ease;z-index:1}.webcam-modal-image.on-top{z-index:2}.webcam-modal-image.visible{opacity:1}.webcam-modal-image-container.scrubbing .webcam-modal-image.visible{filter:blur(2px)}.webcam-modal-image-container.scrubbing .webcam-modal-image{transition:opacity 120ms ease}.webcam-brand{position:absolute;top:24px;left:24px;display:flex;flex-direction:column;gap:12px;z-index:15;pointer-events:none}.webcam-brand-title-row{display:inline-flex;align-items:center;gap:8px;pointer-events:auto}.webcam-logo{width:100px;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6))}.webcam-caption-title-fixed{color:#ffffff;font-weight:700;letter-spacing:0.5px;font-size:16px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,0.5);max-width:min(60vw,420px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.frame-rate-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:4px;background:#ffffff;color:#111827;font-size:12px;font-weight:800;letter-spacing:0.2px;box-shadow:0 1px 2px rgba(0,0,0,0.4)}.frame-rate-chip.low{background:#fff7ed;color:#7c2d12;box-shadow:0 1px 2px rgba(0,0,0,0.35);width:fit-content}.frame-rate-chip::before{content:'\23F1';font-size:12px;opacity:0.9}@media (max-width:480px){.webcam-logo{width:64px}.webcam-caption-title-fixed{font-size:14px}.frame-rate-chip{font-size:11px;padding:2px 6px}}.webcam-modal-content:fullscreen .webcam-logo,.webcam-modal.simulated-fs .webcam-logo,.webcam-modal-content.force-landscape .webcam-logo{width:96px}.webcam-modal-content:fullscreen .webcam-caption-title-fixed,.webcam-modal.simulated-fs .webcam-caption-title-fixed,.webcam-modal-content.force-landscape .webcam-caption-title-fixed{font-size:18px}.webcam-modal-content:fullscreen .frame-rate-chip,.webcam-modal.simulated-fs .frame-rate-chip,.webcam-modal-content.force-landscape .frame-rate-chip{font-size:12px;padding:3px 10px}.webcam-side-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;pointer-events:all}.webcam-side-arrow.left{}.webcam-side-arrow.right{}.webcam-side-arrow .webcam-control-btn,.webcam-side-arrow .button{cursor:pointer}.slide-left .webcam-modal-image.visible{transform:translate(calc(-50% - 40%),-50%)}.slide-right .webcam-modal-image.visible{transform:translate(calc(-50% + 40%),-50%)}.webcam-caption{position:absolute;left:24px;bottom:24px;right:24px;display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:80}.webcam-caption-title{color:#ffffff;font-weight:700;letter-spacing:0.5px;font-size:18px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,0.5);z-index:16;transition:opacity 200ms ease}.webcam-progress-row{display:flex;align-items:center;gap:12px;pointer-events:auto;width:100%}.webcam-controls-row{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto;flex-wrap:wrap}.webcam-controls-row .controls-left,.webcam-controls-row .controls-right{min-width:0}.webcam-timeline{width:100%}.webcam-timeline-track{width:100%}.webcam-timeline-times{min-width:0;flex:0 1 auto}.frame-rate.timestamp{flex:0 0 auto}.webcam-controls-row .controls-left,.webcam-controls-row .controls-right{display:inline-flex;align-items:center;gap:10px}.webcam-controls-row .mode-toggle{white-space:nowrap}.webcam-timeline-times{display:inline-flex;align-items:center;color:#ffffff;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.5);cursor:default}.mode-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(17,24,39,0.55);border:1px solid rgba(255,255,255,0.28);border-radius:4px;padding:2px}.mode-toggle .mode-btn{color:#e5e7eb;font-size:11px;font-weight:700;padding:4px 8px;border-radius:3px;text-decoration:none;cursor:pointer}.mode-toggle .mode-btn.active{background:rgba(255,255,255,0.22);color:#fff}.webcam-play-pause-pill{width:40px;height:40px;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28);border-radius:4px;cursor:pointer;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.35)}.webcam-play-pause-pill:hover{background:rgba(255,255,255,0.26)}.webcam-play-pause-pill::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-45%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}.webcam-play-pause-pill[data-state="playing"]::after{content:'';width:14px;height:14px;background:none;border:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 0 #fff}.webcam-play-pause-pill[data-state="playing"]::before{content:'';position:absolute;width:4px;height:16px;background:#fff;left:13px;top:12px;border-radius:1px}.webcam-play-pause-pill[data-state="playing"]::after{position:absolute;width:4px;height:16px;background:#fff;left:23px;top:12px;transform:none;border:none}.webcam-timeline{flex:1;position:relative;left:0;right:0;bottom:0;padding:16px 0 0;background:transparent;pointer-events:auto;overflow:visible}.webcam-timeline-times{display:inline-flex;align-items:center;gap:8px;left:72px;bottom:18px;padding:0;margin:0;pointer-events:none;margin-left:10px}.webcam-timeline-times .webcam-caption-time-left,.webcam-timeline-times .webcam-caption-time-right{background:transparent;padding:0}.webcam-offline-notice{position:absolute;top:-36px;left:0;right:0;text-align:center;color:#e5e7eb;font-size:12px;font-weight:700}.webcam-offline-notice::before{content:'\26A0\FE0F';margin-right:6px}.webcam-brand .webcam-offline-notice{position:static;top:auto;left:auto;right:auto;text-align:left;font-size:12px;font-weight:700;margin-top:4px;max-width:70vw;text-wrap:balance}.webcam-modal-content:fullscreen .webcam-brand .webcam-offline-notice,.webcam-modal.simulated-fs .webcam-brand .webcam-offline-notice,.webcam-modal-content.force-landscape .webcam-brand .webcam-offline-notice{font-size:12px}@media (max-width:480px){.webcam-brand .webcam-offline-notice{font-size:11px;margin-top:0}}.webcam-timeline-segments{position:absolute;top:0;left:0;right:0;height:6px;pointer-events:none}.webcam-timeline-segments .segment{position:absolute;top:0;height:100%;border-radius:3px;opacity:0.9;display:none}.webcam-timeline-segments .segment.offline{background:repeating-linear-gradient(45deg,rgba(255,255,255,0.35),rgba(255,255,255,0.35) 6px,rgba(255,255,255,0.18) 6px,rgba(255,255,255,0.18) 12px);opacity:0.8}.webcam-timeline-segments .now-marker{position:absolute;top:-3px;width:12px;height:12px;background:#ffffff;box-shadow:0 0 0 2px rgba(0,0,0,0.25);border-radius:50%;transform:translate(-50%,0);cursor:pointer;pointer-events:auto;transition:left 320ms linear}.webcam-timeline-segments .now-marker.no-anim{transition:none !important}.webcam-timeline-segments .segment-label{padding:1px 3px;border-radius:4px;position:absolute;left:-5px;top:-24px;color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.5);white-space:nowrap;pointer-events:auto;cursor:pointer}.webcam-timeline-segments .segment-label{max-width:30vw;overflow:hidden;text-overflow:ellipsis}.webcam-timeline-segments .segment-label::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(255,255,255,0.95);filter:drop-shadow(0 1px 1px rgba(0,0,0,0.35))}.webcam-timeline-segments .segment-label.yesterday{background:var(--base-color-brand--night);left:0 !important}.webcam-timeline-segments .segment-label.yesterday::after{left:0 !important;display:none}.webcam-timeline-segments .segment-label.today{background:var(--base-color-brand--brand)}.webcam-timeline-segments .segment-label.last-hour{background:var(--base-color-brand--green-darker)}.webcam-timeline-segments .segment-label.stack-1{top:-38px}.webcam-timeline-segments .segment-label.stack-2{top:-52px}.webcam-modal.mode-live .webcam-timeline-segments .segment-label.last-hour{display:none !important}.webcam-timeline-track{position:relative;height:6px;background:rgba(255,255,255,0.25);overflow:visible;cursor:pointer}.webcam-timeline-segments{z-index:1}.webcam-timeline-segments .segment{z-index:1}.webcam-timeline-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:#BFD6E7;transition:width 320ms linear}.webcam-timeline-progress.no-anim{transition:none}.webcam-timeline-segments .now-marker{z-index:3}.webcam-timeline-segments .segment-label{z-index:2}.webcam-timeline-thumb{display:none}.webcam-modal.controls-hidden .webcam-progress-row,.webcam-modal.controls-hidden .webcam-controls-row,.webcam-modal.controls-hidden .webcam-timeline,.webcam-modal.controls-hidden .webcam-timeline-times,.webcam-modal.controls-hidden .webcam-side-arrow,.webcam-modal.controls-hidden .webcam-modal-close{opacity:0;pointer-events:none;transition:opacity 200ms ease}.webcam-modal .webcam-progress-row,.webcam-modal .webcam-controls-row,.webcam-modal .webcam-timeline,.webcam-modal .webcam-timeline-times,.webcam-modal .webcam-side-arrow,.webcam-modal .webcam-modal-close{transition:opacity 200ms ease}.webcam-modal.controls-hidden .webcam-caption-title{opacity:0}.webcam-modal-controls{display:none}.webcam-angle-preview{position:absolute;top:50%;transform:translateY(-50%);width:var(--gutter);opacity:0.6;background-size:cover;background-position:center;filter:grayscale(25%);z-index:5;pointer-events:auto;cursor:pointer;transition:opacity 150ms ease;cursor:pointer}.webcam-angle-preview:hover{opacity:0.95}.webcam-angle-preview.left{left:0}.webcam-angle-preview.right{right:0}.webcam-time-display{display:none}.webcam-modal.mini-pip{pointer-events:none}.webcam-modal.mini-pip .webcam-timeline{padding:0px 0px 10px;bottom:0}.webcam-modal.mini-pip .webcam-timeline-times{font-size:10px;margin-left:0}.webcam-modal.mini-pip .webcam-modal-overlay{background:transparent;pointer-events:none}.webcam-modal.mini-pip .webcam-modal-content{position:fixed;right:12px;bottom:12px;width:350px;height:197px;min-height:unset;box-shadow:0 10px 28px rgba(0,0,0,0.45);pointer-events:auto;overflow:hidden}.webcam-modal.mini-pip .webcam-modal-player{--gutter:0;--gap:0}.webcam-modal.mini-pip .webcam-modal-player{position:relative;width:100%;height:100%}.webcam-modal.mini-pip .webcam-angle-preview,.webcam-modal.mini-pip .webcam-side-arrow{display:none !important}.webcam-modal.mini-pip .webcam-modal-image-container{position:absolute;inset:0;margin:0;width:100%;height:100%;min-width:0 !important;min-height:197px !important;aspect-ratio:auto;max-height:none;box-shadow:none}.webcam-modal.mini-pip .webcam-modal-image{position:absolute;top:0;left:0;width:100%;height:100%;transform:none;object-fit:cover}.webcam-modal.mini-pip .webcam-modal-image-container::after{height:64px}.webcam-modal.mini-pip .webcam-brand .webcam-logo{width:70px}.webcam-modal.mini-pip .webcam-brand .webcam-caption-title-fixed{font-size:10px}.webcam-modal.mini-pip .frame-rate.timestamp{display:none !important}.webcam-modal.mini-pip .webcam-timeline-segments{display:none !important}.webcam-modal.mini-pip .webcam-caption{left:12px;right:12px;bottom:4px;gap:6px;z-index:20;padding:0;margin-top:0}.webcam-modal.mini-pip .webcam-progress-row{padding:0 2px;align-items:center}.webcam-modal.mini-pip .webcam-progress-row .button{width:28px;height:28px}.webcam-modal.mini-pip .webcam-timeline-track{height:4px}.webcam-modal.mini-pip .webcam-scrub-preview{width:120px;height:68px;bottom:48px}.webcam-modal.mini-pip .webcam-progress-row{gap:6px}.webcam-modal.mini-pip .webcam-caption-time-left,.webcam-modal.mini-pip .webcam-modal-close{top:6px;right:6px}.webcam-modal.mini-pip .mode-toggle .mode-btn{font-size:10px;padding:3px 6px}.webcam-modal.mini-pip .webcam-mini-drag-handle{position:absolute;top:0;left:50%;transform:translate(-50%,0);width:64px;height:26px;cursor:move;z-index:30;display:flex;align-items:center;justify-content:center}.webcam-modal.mini-pip .webcam-mini-drag-handle::after{content:'';width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,0.6);box-shadow:0 1px 2px rgba(0,0,0,0.4)}.webcam-modal.mini-pip .webcam-modal-content.dragging{transition:none !important}.theme-night .webcam-caption-time-left{background:rgba(3,7,18,0.85)}.theme-night .webcam-timeline-track{background:rgba(255,255,255,0.18)}.theme-night .webcam-timeline-progress{background:rgba(229,231,235,0.82)}.webcam-error{text-align:center;padding:40px 20px;color:#dc3545}.webcam-error button{margin-top:16px;padding:8px 16px;background:#dc3545;color:white;border:none;border-radius:4px;cursor:pointer}.button.is-icon-only{padding:0.5rem}@media (max-width:768px){.timestamp.smaller{font-size:10px}.button.is-icon-only{padding:0.25rem}.button.is-icon-only.webcam-next .icon-embed-xsmall svg,.button.is-icon-only.webcam-prev .icon-embed-xsmall svg{width:1rem;height:1rem}.webcam-timeline-times{margin-left:0;white-space:nowrap;gap:5px;font-size:10px}.webcam-side-arrow{pointer-events:all}.webcam-thumbs{padding:0}.webcam-header h2{font-size:20px}.timestamp{font-size:12px;padding:3px 8px}.webcam-caption{gap:0}.webcam-brand{gap:6px}.webcam-brand .timestamp{display:none}.webcam-thumbs{display:flex;overflow-x:auto;padding:0 12px}.webcam-thumb{flex:0 0 240px}.webcam-thumb-image{aspect-ratio:16 / 9}.webcam-thumb-info{padding:12px}.webcam-thumb-info h3{font-size:14px}.play-button{width:48px;height:36px;font-size:18px}.webcam-modal-content{width:100vw;height:auto;border-radius:0}.webcam-modal-header{padding:16px 20px 12px}.webcam-modal-header h2{font-size:20px}.webcam-modal-player{--gutter:0 !important;--gap:0 !important;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'image image' 'left right';align-items:center;justify-items:center;height:auto}.webcam-modal-image-container{grid-area:image;min-width:0}.webcam-angle-preview{display:none !important}.webcam-side-arrow{position:static;transform:none;margin-top:8px}.webcam-side-arrow.left{grid-area:left;left:auto}.webcam-side-arrow.right{grid-area:right;right:auto}.webcam-modal-image-container{display:block;width:100%;height:auto;min-height:0;min-width:0;aspect-ratio:16 / 9;margin:0}.webcam-caption{position:absolute;left:12px;right:12px;bottom:16px;padding:0;margin-top:0}.webcam-caption-title{font-size:14px}.webcam-progress-row{gap:8px}.mode-toggle{gap:4px;padding:2px}.mode-toggle .mode-btn{font-size:10px;padding:3px 6px}.webcam-play-pause-pill{width:36px;height:36px}.webcam-timeline-segments{height:6px}.webcam-timeline-segments .now-marker{top:-3px;height:12px;width:12px}.webcam-timeline-segments .segment-label{top:-24px;font-size:11px}.webcam-timeline-track{height:6px}.webcam-modal-image-container::after{height:96px}.webcam-loading-spinner::after{width:28px;height:28px;border-width:3px}.webcam-side-arrow.left{left:8px}.webcam-side-arrow.right{right:8px}.webcam-side-arrow .webcam-control-btn{width:36px;height:36px}.webcam-modal-controls{gap:16px;padding:20px}.webcam-control-btn{width:44px;height:44px}.webcam-play-pause{width:52px;height:52px}.control-icon{font-size:18px}.webcam-timeline{bottom:12px}.webcam-time-display{font-size:12px}}@media (max-width:480px){.button.is-icon-only{padding:0.1rem}.webcam-thumbs-container{margin:0 -12px}.webcam-thumbs{padding:0 12px}.webcam-thumb{flex:0 0 200px}.webcam-thumb-image{height:120px}.webcam-modal-overlay{padding:0}.webcam-modal-image-container{height:auto;min-height:200px;aspect-ratio:16 / 9}.webcam-modal-image-container::after{height:80px}.webcam-loading-spinner::after{width:24px;height:24px;border-width:2.5px}.webcam-side-arrow .webcam-control-btn{width:32px;height:32px}.webcam-side-arrow.left{}.webcam-side-arrow.right{}.webcam-caption-title{font-size:13px}.webcam-timeline-segments{height:6px}.webcam-timeline-segments .now-marker{top:-3px;height:12px;width:12px}.webcam-timeline-segments .segment-label{font-size:11px;padding:1px 3px}.webcam-timeline-track{height:6px}.webcam-modal-close{top:max(8px,env(safe-area-inset-top) + 8px);right:max(8px,env(safe-area-inset-right) + 8px)}.webcam-modal-controls{gap:12px;padding:16px}.webcam-control-btn{width:40px;height:40px}.webcam-play-pause{width:48px;height:48px}.control-icon{font-size:16px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.webcam-thumb-img,.webcam-modal-image{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion:reduce){.webcam-thumb,.webcam-control-btn,.webcam-timeline-progress,.webcam-timeline-thumb,.webcam-loading-skeleton{transition:none;animation:none}}@media print{.webcam-modal{display:none}}