body {

margin:0;

background:#111;

color:#eee;

font-family:Arial, Helvetica, sans-serif;

}



.container {

max-width:1200px;

margin:auto;

padding:20px;

}



header {

text-align:center;

margin-bottom:20px;

}


h1 {

font-size:34px;

margin:0;

}



.subtitle {

color:#aaa;

margin-top:8px;

}



/* VIDEO */


.video-box {

position:relative;

aspect-ratio:16 / 9;

background:black;

border-radius:12px;

overflow:hidden;

box-shadow:
0 0 25px rgba(0,0,0,.6);

}



#video {

position:absolute;

width:1px;

height:1px;

opacity:0;

pointer-events:none;

}



#privacyCanvas {

width:100%;

height:100%;

display:block;

position:relative;

z-index:1;

}



.video-controls {

position:absolute;

right:12px;

bottom:12px;

display:flex;

gap:8px;

z-index:12;

}



.video-controls button {

border:1px solid rgba(255,255,255,.45);

border-radius:5px;

background:rgba(0,0,0,.55);

color:white;

padding:6px 10px;

font:inherit;

cursor:pointer;

}



.video-controls button:hover,
.video-controls button:focus-visible {

background:rgba(0,0,0,.8);

}



.video-box:fullscreen {

width:100vw;

height:100vh;

border-radius:0;

}



.video-box:fullscreen #privacyCanvas {

object-fit:contain;

}



.video-box.is-fullscreen .marker,
.video-box:fullscreen .marker,
.video-box:-webkit-full-screen .marker {

display:none !important;

}



.video-box.is-fullscreen .video-controls,
.video-box:fullscreen .video-controls,
.video-box:-webkit-full-screen .video-controls {

display:none !important;

}



@media (orientation:portrait) and (max-width:900px) {

    .video-box.is-fullscreen,
    .video-box:fullscreen,
    .video-box:-webkit-full-screen {

        position:fixed;

        left:50%;

        top:50%;

        width:100vh;

        height:100vw;

        transform:translate(-50%, -50%) rotate(90deg);

    }

}



#streamEnded {

position:absolute;

left:50%;

top:50%;

width:calc(100% - 40px);

transform:translate(-50%, -50%);

box-sizing:border-box;

color:#eee;

text-align:center;

font-size:clamp(16px, 2vw, 26px);

font-weight:bold;

line-height:1.5;

z-index:20;

}



#streamEnded span {

color:#aaa;

font-size:0.75em;

font-weight:normal;

}



.timestamp {

    position:absolute;

    bottom:40px;

    left:20px;

    background:rgba(0,0,0,0.45);

    color:white;

    padding:clamp(1px, 0.3vw, 3px) clamp(2px, 0.5vw, 6px);

    border-radius:4px;

    font-size:clamp(7px, 1vw, 14px);

    font-weight:bold;

    z-index:10;

    text-shadow:
    1px 1px 3px black;

}

@keyframes pulse {

0% {
    opacity:1;
}

50% {
    opacity:.3;
}

100% {
    opacity:1;
}

}


/* PANORAMA MARKER */


.marker {

    position:absolute;

    z-index:3;

}


.marker .dot {

    position:absolute;

    left:0;
    bottom:0;

    width:6px;
    height:6px;

    background:white;

    border-radius:50%;

    transform:translateX(-50%);

    box-shadow:
    0 0 3px black;

    display:none;
}


.marker .line-box {

    position:absolute;

    bottom:2px;

    left:0;

    height:var(--line-height);

}


.marker .line {

    width:1px;

    height:100%;

    background:rgba(255,255,255,0.7);

    box-shadow:
    0 0 3px black;

}


.marker .label {

    position:absolute;

    left:4px;

    top:-4px;

    background:rgba(0,0,0,0.45);

    padding:clamp(1px, 0.3vw, 3px) clamp(2px, 0.5vw, 6px);

    border-radius:5px;

    color:white;

    font-size:clamp(7px, 1vw, 14px);

    font-weight:bold;

    white-space:nowrap;

}

.label-left .label {

    left:auto;

    right:4px;

    top:-4px;

}

.label-top .label {
    left:50%;
    top:-4px;
    transform:translateX(-50%) translateY(-100%);
}

.marker .label a,
.marker .label a:visited,
.marker .label a:active {
    color: white !important;
    text-decoration: none !important;
}

.marker .label a:hover {
    text-decoration: none !important;
}



.controls {

display:flex;

justify-content:flex-end;

margin-top:10px;

}



.location-toggle {

display:inline-flex;

align-items:center;

gap:9px;

padding:7px 11px 7px 8px;

border:1px solid rgba(255,255,255,.12);

border-radius:999px;

background:#1c1c1c;

color:#ddd;

font-size:14px;

cursor:pointer;

user-select:none;

}



.location-toggle:hover {

border-color:rgba(255,255,255,.3);

background:#232323;

}



.location-toggle input {

position:absolute;

width:1px;

height:1px;

opacity:0;

}



.toggle-track {

position:relative;

width:36px;

height:20px;

flex:0 0 auto;

border:1px solid #666;

border-radius:999px;

background:#3b3b3b;

transition:background .18s ease, border-color .18s ease;

}



.toggle-track::after {

content:"";

position:absolute;

left:2px;

top:2px;

width:16px;

height:16px;

border-radius:50%;

background:white;

box-shadow:0 1px 4px rgba(0,0,0,.5);

transition:transform .18s ease;

}



.location-toggle input:checked + .toggle-track {

border-color:#5794d0;

background:#367fbd;

}



.location-toggle input:checked + .toggle-track::after {

transform:translateX(16px);

}



.location-toggle input:focus-visible + .toggle-track {

outline:2px solid white;

outline-offset:2px;

}



.toggle-text {

line-height:1;

}

.card {

margin-top:20px;

background:#1c1c1c;

padding:20px;

border-radius:10px;

line-height:1.5;

}


#map {

height:350px;

margin-top:20px;

border-radius:10px;

}



footer {

text-align:center;

color:#777;

font-size:13px;

margin-top:25px;

}