*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --text: #1a1a1a;
  --text-muted: #555;
  --bg: #fafafa;
  --link: #0055ff;
  --link-hover: #0033cc;
  --border: #e0e0e0;
  --max-width: 640px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 2rem;
  margin-top: 0;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.15rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

ul,
ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}

code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--border);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

pre {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 6px;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Link icons — SVG-based */
a[href*="github.com"]::after,
a[href*="youtube.com"]::after,
a[href$=".pdf"]::after,
a[href*="docs.google.com"]::after,
a[href*="bugzilla.mozilla.org"]::after,
a[href*="slides"]::after,
a[href*="addons.mozilla.org"]::after,
a[href*="chrome.google.com/webstore"]::after,
a[href*="microsoftedge.microsoft.com"]::after,
a[href*="apps.apple.com"]::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.15em;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* GitHub */
a[href*="github.com"]::after {
  background-image: url("https://cdn.simpleicons.org/github/181717");
}

/* YouTube */
a[href*="youtube.com"]::after {
  background-image: url("https://cdn.simpleicons.org/youtube/FF0000");
}

/* PDF */
a[href$=".pdf"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M9 11h6'/%3E%3C/svg%3E");
}

/* Slides (overrides PDF for slide decks) */
a[href*="slides"]::after {
  background-image: url("https://cdn.simpleicons.org/googleslides/FBBC04");
}

/* Google Docs */
a[href*="docs.google.com"]::after {
  background-image: url("https://cdn.simpleicons.org/googledocs/4285F4");
}

/* Bugzilla */
a[href*="bugzilla.mozilla.org"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2l1.88 1.88M14.12 3.88L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1'/%3E%3Cpath d='M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6'/%3E%3Cpath d='M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M6 17l-4 1M17.47 9c1.93-.2 3.53-1.9 3.53-4M18 13h4M18 17l4 1'/%3E%3C/svg%3E");
}

/* Firefox */
a[href*="addons.mozilla.org"]::after {
  background-image: url("https://cdn.simpleicons.org/firefoxbrowser/FF7139");
}

/* Chrome */
a[href*="chrome.google.com/webstore"]::after {
  background-image: url("https://cdn.simpleicons.org/googlechrome/4285F4");
}

/* Edge */
a[href*="microsoftedge.microsoft.com"]::after {
  background-image: url("https://cdn.simpleicons.org/microsoftedge/0078D4");
}

/* Safari */
a[href*="apps.apple.com"]::after {
  background-image: url("https://cdn.simpleicons.org/safari/006CFF");
}