/* Base styles + accessibility defaults */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh);
  background: radial-gradient(1400px 900px at 10% -10%, rgba(14,165,233,.18), transparent 60%),
              radial-gradient(1000px 800px at 90% 0%, rgba(168,85,247,.12), transparent 55%),
              radial-gradient(900px 700px at 60% 110%, rgba(34,197,94,.12), transparent 55%),
              var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

img{ max-width: 100%; height: auto; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }

::selection{ background: rgba(14,165,233,.35); }

.container{
  width: min(var(--container), calc(100% - 2*var(--s-6)));
  margin-inline: auto;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute;
  left: var(--s-6);
  top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transform: translateY(-200%);
  transition: transform .2s ease;
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); outline:none; box-shadow: var(--shadow-1), var(--focus); }

:focus-visible{ outline:none; box-shadow: var(--focus); border-radius: 8px; }

.hr{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: var(--s-7) 0;
}

kbd{
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-color: rgba(0,0,0,.35);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}