/* Shared foundation measured from yuri.ly. Component refinements follow this file. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --site-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  --ground: #f5f5f7;
  --frame: #f5f5f7;
  --card: #fff;
  --card2: #f0f0f2;
  --text: #1d1d1f;
  --muted: #636366;
  --line: rgba(0, 0, 0, .07);
  --accent: #1d1d1f;
  --accent-soft: #e8e8ed;
  --inverse: #1d1d1f;
  --inverse-text: #fff;
  --card-gap: 14px;
  --soft-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 4px 14px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] {
  --ground: #000;
  --frame: #000;
  --card: #161617;
  --card2: #262628;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: rgba(255, 255, 255, .08);
  --accent: #f5f5f7;
  --accent-soft: #303033;
  --inverse: #f5f5f7;
  --inverse-text: #1d1d1f;
  --soft-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}
html { overflow-x: clip; }
body {
  overflow-x: clip;
  padding: max(40px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(80px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  font-family: var(--site-font);
  font-size: 17px;
  line-height: 1.47;
}
body :is(button, input, textarea, select, .mono, .eyebrow, .hint, .domain, .case-badge, .mini-icon, .github-activity-head, .github-activity-head strong, .github-months, .github-detail, .footer) {
  font-family: var(--site-font);
}
.page { max-width: 1080px; gap: 40px; }
.frame { padding: 0; background: transparent; }
.grid { gap: 14px; }
.card { padding: 24px; border-radius: 28px; box-shadow: var(--soft-shadow); }
.skip-link:not(:focus-visible) { transform: translateY(-180%); }
@media (max-width: 900px) {
  :root { --card-gap: 12px; }
  .grid { gap: 12px; }
}
@media (max-width: 640px) {
  .page { gap: 32px; }
}

.page > .footer { align-items: center; flex-direction: row; padding-top: 0; }
.motion-toggle {
  position: relative;
  min-height: 32px;
  padding: 4px 0 4px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color 150ms ease;
}
.motion-toggle::after { content: ''; position: absolute; inset: -6px 0; }
.motion-toggle:hover { color: var(--text); }
.motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
:root[data-motion="off"] .motion-toggle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .motion-toggle { transition: none; }
}