:root {
    color-scheme: dark;
    --bg: #06101a;
    --bg-deep: #02070f;
    --text: #edf6ff;
    --text-soft: rgba(237, 246, 255, 0.9);
    --star-bright: #65c5ff;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; }

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    background: radial-gradient(circle at top, rgba(50, 109, 180, 0.1), transparent 34%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    color: var(--text);
    font-family: "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", sans-serif;
    caret-color: transparent;
}

canvas { position: fixed; inset: 0; pointer-events: none; width: 100%; height: 100%; opacity: 0.78; }
main { position: relative; z-index: 1; padding: 28px 36px; }
h1 { margin: 0; font-size: clamp(2.8rem, 9vw, 7.2rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; color: var(--text-soft); cursor: default; text-shadow: 0 0 22px rgba(101, 172, 255, 0.1), 0 12px 46px rgba(0, 0, 0, 0.42); }
#destinations { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.destination {
    position: fixed;
    z-index: 2;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(166, 213, 255, 0.72);
    box-shadow: 0 0 0 6px rgba(101, 197, 255, 0.045), 0 0 14px rgba(101, 197, 255, 0.18);
    cursor: pointer;
    outline: none;
    pointer-events: auto;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.destination::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: #e6f6ff; }
.destination__url { position: absolute; top: -3px; left: 19px; color: rgba(237, 246, 255, 0.58); font-size: clamp(0.72rem, 1.1vw, 0.88rem); font-weight: 450; letter-spacing: 0.01em; line-height: 1.25; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8); transition: color 160ms ease; }
.destination--left .destination__url { right: 19px; left: auto; }
.destination:hover, .destination:focus-visible { background: var(--star-bright); box-shadow: 0 0 0 9px rgba(101, 197, 255, 0.12), 0 0 24px rgba(101, 197, 255, 0.6); }
.destination:hover .destination__url, .destination:focus-visible .destination__url { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; }

@media (max-width: 640px) { .destination__url { font-size: 0.72rem; } }