/* Fonts load only when a theme uses them. */
@font-face {
  font-family: Outfit;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: VT323;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Silkscreen;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/silkscreen-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Pixelify Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/pixelify-sans-latin-wght-normal.woff2") format("woff2");
}

/* Themes. Every theme sets the same tokens; the layout below only reads them.
   light is the default, auto follows the system between light and dark. */
:root,
:root[data-theme="light"] {
  --mono:
    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--sans);
  --font-head: var(--mono);
  --font-ui: var(--mono);
  --size: 16px;
  --bg: #fbfbf8;
  --page-bg: var(--bg);
  --fg: #16181d;
  --muted: #5d626b;
  --faint: #6b7079;
  --line: #e5e6e2;
  --accent: #0f7a50;
  --cursor: #1fae73;
  --cursor-height: 0.14em;
  --label-prefix: "## ";
  --link-line: var(--line);
  --card-bg: transparent;
  --card-border: 0 solid transparent;
  --card-pad: 0;
  --card-radius: 0;
  --card-shadow: none;
  --glow: none;
  --logo-light: inline-block;
  --logo-dark: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1116;
  --fg: #f4f6f8;
  --muted: #a3aab4;
  --faint: #848c97;
  --line: #222831;
  --accent: #3ddc97;
  --cursor: #3ddc97;
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e1116;
    --fg: #f4f6f8;
    --muted: #a3aab4;
    --faint: #848c97;
    --line: #222831;
    --accent: #3ddc97;
    --cursor: #3ddc97;
    --logo-light: none;
    --logo-dark: inline-block;
    color-scheme: dark;
  }
}

/* Green phosphor CRT: one color, glow, scanlines. */
:root[data-theme="hacker"] {
  --font-body: VT323, var(--mono);
  --font-head: VT323, var(--mono);
  --font-ui: VT323, var(--mono);
  --size: 21px;
  --bg: #020602;
  --page-bg: radial-gradient(ellipse at center, #06140a 0%, #020602 75%);
  --fg: #5bff8f;
  --muted: #3fd270;
  --faint: #2a9a50;
  --line: #12391f;
  --accent: #b8ffcf;
  --cursor: #5bff8f;
  --cursor-height: 0.85em;
  --label-prefix: "> ";
  --link-line: #2a9a50;
  --glow: 0 0 6px rgb(91 255 143 / 0.45);
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
}

/* 8-bit: pixel fonts, hard borders, hard shadows. */
:root[data-theme="pixel"] {
  --font-body: "Pixelify Sans", var(--sans);
  --font-head: Silkscreen, var(--mono);
  --font-ui: "Pixelify Sans", var(--mono);
  --size: 17px;
  --bg: #f4efe1;
  --fg: #1d1b26;
  --muted: #4a4658;
  --faint: #6d6880;
  --line: #1d1b26;
  --accent: #b8332a;
  --cursor: #d6402f;
  --cursor-height: 0.75em;
  --label-prefix: "\25B6  ";
  --link-line: #b8332a;
  --card-bg: #fffdf6;
  --card-border: 4px solid #1d1b26;
  --card-pad: 18px 20px;
  --card-shadow: 6px 6px 0 #1d1b26;
}

/* Product-site dark: soft glows, glass cards, rounded corners. */
:root[data-theme="modern"] {
  --font-body: Outfit, var(--sans);
  --font-head: Outfit, var(--sans);
  --font-ui: var(--mono);
  --size: 17px;
  --bg: #09090b;
  --page-bg:
    radial-gradient(70% 45% at 50% -8%, rgb(61 220 151 / 0.16), transparent 70%),
    radial-gradient(45% 35% at 105% 10%, rgb(99 102 241 / 0.14), transparent 70%), #09090b;
  --fg: #fafafa;
  --muted: #a1a1aa;
  --faint: #868690;
  --line: rgb(255 255 255 / 0.08);
  --accent: #3ddc97;
  --cursor: #3ddc97;
  --label-prefix: "";
  --link-line: rgb(255 255 255 / 0.2);
  --card-bg: rgb(255 255 255 / 0.03);
  --card-border: 1px solid rgb(255 255 255 / 0.08);
  --card-pad: 22px 24px;
  --card-radius: 16px;
  --card-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.8);
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
}

/* 80s neon: purple night, pink and cyan, a grid on the horizon. */
:root[data-theme="synthwave"] {
  --bg: #1a0f2e;
  --page-bg: linear-gradient(180deg, #120a24 0%, #241040 55%, #3a1150 100%);
  --fg: #fbeaff;
  --muted: #d3b3ea;
  --faint: #a98bc9;
  --line: #3f2766;
  --accent: #ff5fd2;
  --cursor: #36f9f6;
  --label-prefix: "// ";
  --link-line: #ff5fd2;
  --glow: 0 0 10px rgb(255 95 210 / 0.55);
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  margin: 0;
  color: var(--fg);
  background: var(--page-bg);
  background-color: var(--bg);
  background-attachment: fixed;
  font: var(--size) / 1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection {
  color: var(--bg);
  background: var(--accent);
}
h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color 0.15s,
    text-decoration-color 0.15s;
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
button,
select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
code {
  font-family: var(--font-ui);
  font-size: 0.92em;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  text-shadow: var(--glow);
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 13px/1 var(--font-ui);
  color: var(--faint);
}
.home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.avatar {
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--line);
}
.theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme__field {
  position: relative;
  display: inline-flex;
}
.theme__field::after {
  content: "\25BE";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.theme select {
  appearance: none;
  padding: 6px 24px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.theme select:hover {
  border-color: var(--accent);
}

.intro {
  padding: clamp(56px, 12vw, 104px) 0 clamp(40px, 8vw, 64px);
}
h1 {
  font: 600 clamp(34px, 7vw, 44px) / 1.1 var(--font-head);
  letter-spacing: -0.02em;
}
.cursor {
  display: inline-block;
  width: 0.55em;
  height: var(--cursor-height);
  margin-left: 0.08em;
  background: var(--cursor);
  box-shadow: var(--glow);
  vertical-align: baseline;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.lead {
  max-width: 34em;
  margin-top: 20px;
  font-size: 1.125em;
  color: var(--muted);
}
.lead a {
  color: var(--fg);
}

.block {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.label {
  margin-bottom: 20px;
  font: 500 13px/1 var(--font-ui);
  color: var(--faint);
}
.label::before {
  content: var(--label-prefix);
  color: var(--accent);
}

.flow {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.flow li {
  display: grid;
  grid-template-columns: 2.5em 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 0;
  counter-increment: step;
}
.flow li + li {
  border-top: 1px dashed var(--line);
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  font: 13px/1 var(--font-ui);
  color: var(--accent);
}
.flow__text {
  min-width: 0;
}
.flow__tool {
  font: 13px/1.4 var(--font-ui);
  color: var(--muted);
  white-space: nowrap;
}
.flow__tool::before {
  content: "\2192  ";
  color: var(--faint);
}
@media (max-width: 560px) {
  .flow li {
    grid-template-columns: 2.5em 1fr;
  }
  .flow__tool {
    grid-column: 2;
  }
}
.flow-note {
  margin-top: 16px;
  font-size: 0.95em;
  color: var(--muted);
}
.intro-line {
  margin: -8px 0 24px;
  color: var(--muted);
}

.item {
  scroll-margin-top: 24px;
  padding: var(--card-pad);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.item + .item {
  margin-top: 28px;
}
.item__logo a {
  display: inline-block;
}
.item__logo img {
  height: 40px;
  width: auto;
}
.logo-light {
  display: var(--logo-light);
}
.logo-dark {
  display: var(--logo-dark);
}
.item__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 17px/1.3 var(--font-head);
}
.item__icon {
  flex: none;
  border-radius: 7px;
}
.item__icon--pixel {
  border-radius: 0;
  image-rendering: pixelated;
}
.item__title {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 1.06em;
  font-weight: 600;
}
.item__text {
  margin-top: 8px;
  color: var(--muted);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  list-style: none;
  font: 12px/1.5 var(--font-ui);
  color: var(--faint);
}
.meta a {
  color: var(--muted);
}

.more {
  margin-top: 28px;
  font: 13px/1 var(--font-ui);
}
.more a {
  color: var(--muted);
}

.links div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 6px 0;
  align-items: baseline;
}
.links dt {
  font: 13px/1.6 var(--font-ui);
  color: var(--faint);
}
.links dd {
  min-width: 0;
  font: 15px/1.6 var(--font-ui);
  overflow-wrap: anywhere;
}
.reveal,
.copy {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
}
.reveal:hover,
.copy:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.copy {
  margin-left: 12px;
  font-size: 13px;
  color: var(--faint);
}


/* Theme details that tokens alone cannot express. */
:root[data-theme="hacker"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgb(0 0 0 / 0.28) 2px 3px
  );
}
:root[data-theme="hacker"] h1,
:root[data-theme="hacker"] .item__name,
:root[data-theme="hacker"] .item__title {
  font-weight: 400;
  letter-spacing: 0;
}
:root[data-theme="hacker"] body {
  line-height: 1.4;
}
:root[data-theme="hacker"] h1 {
  font-size: clamp(48px, 10vw, 64px);
}
:root[data-theme="hacker"] .item__name {
  font-size: 24px;
}
:root[data-theme="hacker"] .label,
:root[data-theme="hacker"] .top,
:root[data-theme="hacker"] .more,
:root[data-theme="hacker"] .links dt,
:root[data-theme="hacker"] .copy {
  font-size: 18px;
}
:root[data-theme="hacker"] .flow li::before,
:root[data-theme="hacker"] .flow__tool,
:root[data-theme="hacker"] .meta {
  font-size: 17px;
}
:root[data-theme="hacker"] .links dd {
  font-size: 20px;
}
:root[data-theme="hacker"] .item__icon,
:root[data-theme="hacker"] .avatar {
  border-radius: 0;
}
:root[data-theme="hacker"] .theme select {
  border-radius: 0;
}

:root[data-theme="pixel"] h1 {
  font-weight: 400;
  letter-spacing: 0;
}
:root[data-theme="pixel"] .item__name,
:root[data-theme="pixel"] .item__title {
  font-family: Silkscreen, var(--mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
:root[data-theme="pixel"] .label {
  font-family: Silkscreen, var(--mono);
  font-size: 16px;
  color: var(--fg);
}
:root[data-theme="pixel"] .block {
  border-top: 4px dashed var(--line);
}
:root[data-theme="pixel"] .flow li::before {
  font: 16px/1 Silkscreen, var(--mono);
}
:root[data-theme="pixel"] .flow li + li {
  border-top: 2px dashed var(--line);
}
:root[data-theme="pixel"] .item + .item {
  margin-top: 32px;
}
:root[data-theme="pixel"] .item__icon,
:root[data-theme="pixel"] .avatar,
:root[data-theme="pixel"] .theme select {
  border-radius: 0;
}
:root[data-theme="pixel"] .theme select {
  border: 3px solid var(--line);
  box-shadow: 3px 3px 0 var(--line);
}
:root[data-theme="pixel"] a {
  text-decoration-thickness: 2px;
}
:root[data-theme="pixel"] .meta,
:root[data-theme="pixel"] .flow__tool,
:root[data-theme="pixel"] .top {
  font-size: 14px;
}
:root[data-theme="pixel"] .item__icon {
  image-rendering: pixelated;
}

:root[data-theme="modern"] h1 {
  font-weight: 700;
  font-size: clamp(42px, 9vw, 60px);
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #fff 30%, #9a9aa3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="modern"] .cursor {
  border-radius: 99px;
}
:root[data-theme="modern"] .item__name,
:root[data-theme="modern"] .item__title {
  letter-spacing: -0.01em;
}
:root[data-theme="modern"] .item + .item {
  margin-top: 16px;
}
:root[data-theme="modern"] .block {
  border-top: 0;
}
:root[data-theme="modern"] .label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
:root[data-theme="modern"] .theme select {
  border-radius: 99px;
  padding-left: 14px;
}

:root[data-theme="synthwave"] body::after {
  content: "";
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 42vh;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(to right, rgb(255 95 210 / 0.5) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(to bottom, rgb(255 95 210 / 0.5) 0 2px, transparent 2px 48px);
  transform: perspective(320px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
  opacity: 0.55;
}
:root[data-theme="synthwave"] h1 {
  color: #fff;
  text-shadow:
    0 0 8px #ff5fd2,
    0 0 24px rgb(255 95 210 / 0.6),
    3px 3px 0 #36f9f6;
}
:root[data-theme="synthwave"] .item__name,
:root[data-theme="synthwave"] .item__title,
:root[data-theme="synthwave"] .lead,
:root[data-theme="synthwave"] .item__text {
  text-shadow: none;
}
:root[data-theme="synthwave"] .label::before {
  color: #36f9f6;
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
  a {
    transition: none;
  }
}