*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { width: 100%; min-width: 0; margin: 0; overflow-x: clip; background: radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 38%), var(--bg); color: var(--text); font-family: "Inter", sans-serif; line-height: 1.65; transition: background .25s ease, color .25s ease; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, [role="button"] { cursor: pointer; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--bg); }
.wrap { width: calc(100% - clamp(48px, 8vw, 240px)); max-width: none; min-width: 0; margin: 0 auto; }
.mono { font-family: "JetBrains Mono", monospace; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; background: var(--accent); color: var(--bg); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }