@font-face { font-family: "Inter"; src: url("Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("IBMPlexMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --bg: #0C0E14; --raised: #151924; --text: #F1F2F6; --muted: #A2A8BC; --accent: #8E9BFF; --warm: #D9A96A;
        --coral: #E0607A; --line: rgba(162, 168, 188, .18);
        --display: "Inter", system-ui, "Segoe UI", sans-serif; --body: "Inter", system-ui, "Segoe UI", sans-serif;
        --mono: "Plex Mono", ui-monospace, Consolas, monospace; }
body { background: radial-gradient(50rem 36rem at 80% 10%, rgba(142, 155, 255, .10), transparent 70%), var(--bg); }
h1 { font-weight: 600; letter-spacing: -.02em; }
.button { color: #0C0E14; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; color: var(--text); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
       display: grid; place-items: center; padding: clamp(1.25rem, 4vw, 3rem); -webkit-font-smoothing: antialiased; }
main { width: min(36rem, 100%); }
figure { margin: 0 0 1.75rem; }
.code { font-family: var(--mono); font-size: .8125rem; color: var(--muted); letter-spacing: .04em; margin: 0 0 .5rem; }
h1 { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.lede { margin: 0 0 .75rem; max-width: 32rem; }
.el { color: var(--muted); font-size: .95rem; margin: 0 0 2rem; max-width: 32rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0 0 2.5rem; }
.button { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
          padding: .7rem 1.4rem; border-radius: 999px; }
.button:hover { filter: brightness(1.08); }
.note { color: var(--muted); font-size: .875rem; }
footer { border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .8125rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.spin { transform-origin: 60px 60px; animation: spin 6s linear infinite; }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(270deg); } }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .spin, .pulse { animation: none; } }