:root {
    --bg-color: #0f172a;
    --card-bg: rgba(15, 23, 42, 0.75);
    --accent-color: #38bdf8;
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;

    background: var(--bg-color);
    color: var(--text-main);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#pondCanvas {
    position: fixed;
    inset: 0;
}

.overlay {
    position: fixed;
    top: 20px;
    left: 20px;

    z-index: 10;

    padding: 1rem;

    background: var(--card-bg);
    backdrop-filter: blur(12px);

    border-radius: 20px;
    border: 2px solid rgba(56,189,248,0.25);
}

.overlay h1 {
    margin: 0 0 8px 0;
    color: var(--accent-color);
}

.overlay p {
    margin: 0 0 12px 0;
    color: var(--text-dim);
}

.overlay a {
    color: var(--accent-color);
    text-decoration: none;
}

.overlay a:hover {
    text-decoration: underline;
}