:root{color-scheme:dark;--bg:#0c141a;--surface:#121e27;--border:#283843;--text:#f2f6f7;--muted:#a2b4c1;--accent:#83eed1;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible,video:focus-visible,iframe:focus-visible{outline:3px solid var(--accent);outline-offset:4px}main{padding:28px 32px 32px;max-width:2000px;margin:auto}.camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.camera{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}.camera-screen{position:relative;aspect-ratio:16/9;background:#050a0d;overflow:hidden}.camera-screen video,.camera-screen iframe,.youtube-player{display:block;border:0;width:100%;height:100%;position:absolute;inset:0}.camera-screen video{object-fit:contain}.camera-information{padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.camera h3{font-size:1rem;font-weight:600;line-height:1.35;margin:0}.source-link{font-size:.875rem;color:var(--muted);flex-shrink:0}.status{font-size:.75rem;letter-spacing:.035em;position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:4px;background:#0c141ae6;z-index:2;pointer-events:none;border:1px solid #ffffff1f;color:#c6d5df}.status[data-state="playing"]{color:var(--accent)}.status[data-state="error"]{color:#ffcc95}.screen-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:32px;color:var(--muted);font-size:.9375rem;text-align:center;pointer-events:none}.screen-message[hidden]{display:none}.spinner{height:18px;width:18px;flex-shrink:0;border:2px solid #314753;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{border-top:1px solid var(--border);padding:22px 32px;display:flex;justify-content:space-between;gap:14px 30px;color:var(--muted);font-size:.875rem;line-height:1.6;flex-wrap:wrap}footer a{color:#d7e3e9}@media(min-width:1800px){.camera-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1100px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){main{padding:24px 14px}.camera-grid{grid-template-columns:1fr;gap:18px}.camera-information{padding:14px}footer{padding:20px 18px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.youtube-controls{position:absolute;z-index:3;bottom:12px;left:12px;display:flex;gap:5px;opacity:0;transition:opacity .15s}.camera-screen:hover .youtube-controls,.camera-screen:focus-within .youtube-controls{opacity:1}.youtube-controls button{display:grid;place-items:center;width:38px;height:36px;border:1px solid #ffffff40;border-radius:5px;background:#0c141ad9;color:white;cursor:pointer}.youtube-controls button:hover{background:#22483f}.youtube-controls button:disabled{opacity:.4;cursor:wait}.youtube-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.camera-screen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh}.camera-screen:fullscreen .youtube-controls{bottom:24px;left:24px}@media(hover:none){.youtube-controls{opacity:1}}@media(prefers-reduced-motion:reduce){.youtube-controls{transition:none}}
.camera-distance{font-size:.8125rem;color:var(--muted);margin:6px 0 0}.mjpeg-stream{display:block;width:100%;height:100%;object-fit:contain}.camera[data-type="youtube"] .camera-screen{min-height:200px}

.camera-coasts{display:grid;gap:36px}.coast-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}.coast-heading h2{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.02em}.coast-heading span{font-size:.8125rem;color:var(--muted)}
.youtube-hover-surface{position:absolute;inset:0;z-index:1;background:transparent}
summary.coast-heading{cursor:pointer;list-style:none;align-items:center;min-height:44px}summary.coast-heading::-webkit-details-marker{display:none}summary.coast-heading::after{content:'›';margin-left:auto;font-size:1.5rem;color:var(--muted);transform:rotate(90deg)}details[open]>summary.coast-heading::after{transform:rotate(-90deg)}summary.coast-heading:focus-visible{outline:3px solid var(--accent);outline-offset:4px}details:not([open])>.coast-heading{margin-bottom:0}details:not([open])>.camera-grid{display:none}

.camera[data-type="snapshot"] .status{top:auto;bottom:10px}
.fullscreen-toggle{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:5px;background:#0c141ad9;color:white;cursor:pointer;opacity:0;transition:opacity .15s}.fullscreen-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.fullscreen-toggle:hover{background:#22483f;opacity:1}.camera-screen:hover .fullscreen-toggle,.camera-screen:focus-within .fullscreen-toggle,.camera-screen:is(:fullscreen,:-webkit-full-screen,.is-expanded) .fullscreen-toggle{opacity:1;pointer-events:auto}.camera-screen:is(:fullscreen,:-webkit-full-screen,.is-expanded){aspect-ratio:auto;width:100vw;height:100vh;height:100dvh;background:#050a0d}.camera-screen.is-expanded{position:fixed;inset:0;z-index:1000}.camera-expanded{overflow:hidden}@media(hover:none){.fullscreen-toggle{opacity:1;pointer-events:auto}}@media(prefers-reduced-motion:reduce){.fullscreen-toggle{transition:none}}