.visibility-demo{background:linear-gradient(145deg,#101c29,#080d14);border-bottom:1px solid var(--line)}
.visibility-heading{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:26px}.visibility-heading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:8px 0}.visibility-heading p{margin:12px 0 0;max-width:620px}
.light-switch{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;border:1px solid #50718b;background:#172b3b;padding:12px 16px;border-radius:40px;color:var(--white);font:inherit;font-weight:800;min-height:48px;cursor:pointer}
.light-switch:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.light-switch:hover{border-color:var(--cyan)}.light-switch-track{display:inline-block;width:46px;height:26px;background:#506779;border-radius:20px;padding:3px}.light-switch-dot{display:block;width:20px;height:20px;border-radius:50%;background:#eef7ff;transition:transform .35s ease}.light-switch[aria-checked="true"]{background:#0b263f;border-color:var(--cyan)}.light-switch[aria-checked="true"] .light-switch-track{background:#1676b8}.light-switch[aria-checked="true"] .light-switch-dot{transform:translateX(20px)}
.visibility-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.visibility-card{margin:0;overflow:hidden;border:1px solid #35516a;border-radius:15px;background:#0b121d}.visibility-card svg{display:block;width:100%;height:auto}.visibility-card figcaption{padding:18px 20px}.visibility-card h3{font-size:1.15rem;margin:0 0 4px}.visibility-card p{margin:0;font-size:.9rem}.visibility-card.cloudy h3{color:#e7ca85}.visibility-card.restored h3{color:#9edbff}
.road-night{opacity:0;transition:opacity .6s ease}.visibility-demo[data-night="true"] .road-night{opacity:1}.visibility-status{color:var(--white);font-size:.95rem;margin:22px 0 5px;min-height:1.6em}.visibility-note{font-size:.78rem;margin:0;color:var(--muted)}
@media(max-width:760px){.visibility-heading{align-items:flex-start;flex-direction:column;gap:22px}.visibility-grid{gap:12px}.visibility-card figcaption{padding:14px}.visibility-card h3{font-size:1rem}.visibility-card p{font-size:.82rem}}
@media(max-width:520px){.visibility-grid{grid-template-columns:1fr}.visibility-card svg{max-height:270px}.light-switch{width:100%;max-width:250px}}
@media(prefers-reduced-motion:reduce){.road-night,.light-switch-dot{transition:none}}