/* Element defaults, the night-sky backdrop and small utilities. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--text);
    font: 14px/1.55 var(--font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); transition: background-color var(--t-slow) var(--ease-out), color var(--t) var(--ease-out); }

/* Nebula clouds drift slowly behind everything; stars sit on top of them. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky::before {
    content: ""; position: absolute; inset: -20%;
    background:
        radial-gradient(42% 38% at 84% 6%, rgba(124, 92, 246, .42), transparent 70%),
        radial-gradient(34% 30% at 46% 22%, rgba(79, 110, 255, .16), transparent 70%),
        radial-gradient(38% 36% at 4% 92%, rgba(89, 195, 245, .3), transparent 70%),
        radial-gradient(30% 32% at 64% 104%, rgba(240, 166, 232, .24), transparent 70%),
        radial-gradient(26% 28% at 18% 30%, rgba(45, 212, 191, .1), transparent 70%),
        radial-gradient(60% 50% at 58% 58%, rgba(98, 84, 230, .14), transparent 75%);
    opacity: var(--nebula-glow);
    animation: drift 40s var(--ease-in-out) infinite alternate;
}
.sky::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .7), transparent 50%),
        radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, .55), transparent 50%),
        radial-gradient(1.5px 1.5px at 38% 64%, rgba(255, 255, 255, .5), transparent 50%),
        radial-gradient(1px 1px at 88% 52%, rgba(255, 255, 255, .6), transparent 50%),
        radial-gradient(1px 1px at 22% 86%, rgba(255, 255, 255, .45), transparent 50%),
        radial-gradient(1.5px 1.5px at 58% 34%, rgba(200, 210, 255, .6), transparent 50%),
        radial-gradient(1px 1px at 94% 88%, rgba(255, 255, 255, .5), transparent 50%),
        radial-gradient(1px 1px at 6% 48%, rgba(255, 255, 255, .45), transparent 50%);
    background-size: 640px 640px;
    opacity: var(--stars);
    animation: twinkle 7s ease-in-out infinite alternate;
}

a { color: var(--sky); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-family: var(--display); font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 16px; }
h3 { font-size: 11.5px; font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-top: 6px; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-3); padding: 0 4px; border-radius: 4px; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.cap { text-transform: capitalize; }
.right { text-align: right; margin-left: auto; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.danger-text { color: var(--danger); }
.warn-text { color: var(--warn); }
.clip-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

::selection { background: rgba(var(--accent-rgb), .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.skip-link {
    position: fixed; left: 12px; top: -60px; z-index: 200;
    padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 700;
    transition: top var(--t) var(--ease-out);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.ico { flex: none; display: block; }