* {
  box-sizing:border-box
}

html {
  scroll-padding-top:6rem;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}

body {
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  line-height:1.08;
  font-weight:500
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

svg {
  display:block
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--color-accent-ink);
  outline-offset:6px
}

.dark a:focus-visible,.dark button:focus-visible {
  outline-color:var(--color-accent)
}

::selection {
  background:var(--color-accent);
  color:var(--color-ink)
}

.skip-link {
  position:fixed;
  left:1rem;
  top:1rem;
  z-index:100;
  background:white;
  color:black;
  padding:.7rem 1rem;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.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
}

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

.section {
  padding-block:var(--space-6)
}

.section-large {
  padding-block:var(--space-7)
}

.dark {
  color:var(--color-paper);
  background:var(--color-ink);
  --color-line:rgba(255,255,255,.23);
  --color-muted:#b6c1be
}

.meta {
  font-size:var(--text-small);
  line-height:1.6;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase
}

.muted {
  color:var(--color-muted)
}

.accent {
  color:var(--color-accent-ink)
}

.dark .accent {
  color:var(--color-accent)
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem
}

.eyebrow:before {
  content:'';
  width:1.6rem;
  height:1px;
  background:currentColor
}

.prose {
  max-width:39rem
}

.prose p+p {
  margin-top:1rem
}

.prose p {
  color:var(--color-muted);
  font-size:1.05rem;
  line-height:1.95
}

.rule {
  border:0;
  border-top:1px solid var(--color-line);
  margin:2rem 0
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:1.2rem;
  border-bottom:1px solid currentColor;
  padding:.6rem 0;
  font-size:.85rem
}

.text-link svg {
  transition:transform var(--motion-fast)
}

.text-link:hover svg {
  transform:translateX(5px)
}

.symbol-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

code,pre {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}

pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.75rem;
  line-height:1.6
}

footer {
  padding:2rem var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  border-top:1px solid var(--color-line);
  font-size:.8rem
}

footer nav {
  display:flex;
  gap:1.5rem
}

button:disabled {
  opacity:.5;
  cursor:default
}

.prose p.meta {
  font-size:var(--text-small);
  line-height:1.8
}