:root {
  color-scheme: light dark;
  --ink: #242330;
  --muted: #686578;
  --paper: #fffdf8;
  --panel: #f4f1e8;
  --line: #ded9ca;
  --indigo: #24245c;
  --orange: #8250df;
  --code: #1f1f29;
  --code-ink: #f7f2e8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgb(130 80 223 / 9%), transparent 28rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: #3e3aa7;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--orange);
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.55rem max(1.25rem, calc((100vw - 980px) / 2));
  border-bottom: 1px solid rgb(222 217 202 / 80%);
  background: rgb(255 253 248 / 88%);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--indigo);
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img {
  width: 2.85rem;
  height: 2.85rem;
  object-fit: contain;
}

.repo-link {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--indigo);
  border-radius: 999px;
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.readme {
  width: min(100% - 2.5rem, 980px);
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.readme > p:first-child {
  margin: 0 auto 1rem;
  text-align: center;
}

.readme > p:first-child img {
  width: min(280px, 58vw);
  filter: drop-shadow(0 18px 24px rgb(36 36 92 / 18%));
}

h1,
h2,
h3 {
  color: var(--indigo);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(3rem, 10vw, 5.5rem);
  text-align: center;
}

h1 + p {
  margin: 0 auto 2.8rem;
  max-width: 48rem;
  color: var(--muted);
  font-size: 1.18rem;
  text-align: center;
}

h2 {
  margin-top: 3.4rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--line);
  font-size: 1.85rem;
}

h3 {
  margin-top: 2.2rem;
}

blockquote {
  margin: 1.6rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 4px solid var(--orange);
  border-radius: 0 0.55rem 0.55rem 0;
  background: #f5eefc;
}

blockquote p {
  margin: 0;
}

.alert {
  margin: 1.6rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 4px solid var(--alert-color, var(--orange));
  border-radius: 0 0.55rem 0.55rem 0;
  background: var(--alert-bg, #f5eefc);
}

.alert p {
  margin: 0;
}

.alert p + p {
  margin-top: 0.5rem;
}

.alert-title {
  margin: 0 0 0.3rem !important;
  color: var(--alert-color, var(--orange));
  font-weight: 800;
}

.alert-note { --alert-color: #0969da; --alert-bg: #ddf4ff; }
.alert-tip { --alert-color: #1a7f37; --alert-bg: #dafbe1; }
.alert-important { --alert-color: #8250df; --alert-bg: #fbefff; }
.alert-warning { --alert-color: #9a6700; --alert-bg: #fff8c5; }
.alert-caution { --alert-color: #cf222e; --alert-bg: #ffebe9; }

@media (prefers-color-scheme: dark) {
  .alert-note { --alert-bg: rgb(9 105 218 / 15%); }
  .alert-tip { --alert-bg: rgb(26 127 55 / 15%); }
  .alert-important { --alert-bg: rgb(130 80 223 / 15%); }
  .alert-warning { --alert-bg: rgb(154 103 0 / 15%); }
  .alert-caution { --alert-bg: rgb(207 34 46 / 15%); }
}

code {
  padding: 0.15em 0.34em;
  border-radius: 0.3rem;
  background: var(--panel);
  font-size: 0.88em;
}

pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border-radius: 0.7rem;
  background: var(--code);
  box-shadow: 0 10px 24px rgb(31 31 41 / 12%);
}

pre code {
  padding: 0;
  color: var(--code-ink);
  background: transparent;
  font-size: 0.9rem;
}

table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--indigo);
  background: var(--panel);
}

li + li {
  margin-top: 0.28rem;
}

footer {
  padding: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .9rem 1.1rem; font-size: .88rem; font-weight: 700; }
.site-nav > a:not(.repo-link):not(.nav-skill):not(.nav-install) { color: var(--muted); text-decoration: none; }
.site-nav > a:not(.repo-link):not(.nav-skill):not(.nav-install):hover { color: var(--indigo); }
.site-nav > a.nav-skill { display: inline-flex; align-items: center; padding: .4rem .75rem; border: 1px solid rgb(130 80 223 / 35%); border-radius: 999px; color: var(--orange); font-family: ui-monospace, monospace; font-size: .8rem; font-weight: 800; text-decoration: none; background: rgb(130 80 223 / 10%); }
.site-nav > a.nav-skill:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
.site-nav > a.nav-install { padding: .45rem .9rem; border: 1px solid var(--indigo); border-radius: 999px; color: var(--indigo); text-decoration: none; }
.site-nav > a.nav-install:hover { color: var(--paper); background: var(--indigo); }
.skill-index { margin-top: 4.5rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: linear-gradient(125deg, rgb(36 36 92 / 7%), rgb(130 80 223 / 8%)); }
.skill-index h2 { margin: .2rem 0 1.5rem; padding: 0; border: 0; }
.eyebrow { margin: 0; color: var(--orange); font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.skill-index-grid, .install-grid, .callout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.skill-index-card { display: grid; gap: .25rem; min-height: 10rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: .9rem; color: var(--ink); text-decoration: none; background: var(--paper); box-shadow: 0 10px 22px rgb(36 36 92 / 7%); }
.skill-index-card:hover { transform: translateY(-3px); color: var(--ink); border-color: var(--orange); }.skill-index-card strong { color: var(--indigo); font-size: 1.35rem; }.skill-index-card > span:last-child { color: var(--muted); font-size: .92rem; }.skill-command { color: var(--orange); font-family: ui-monospace, monospace; font-weight: 800; }
.skill-doc { width: min(100% - 2.5rem, 1080px); margin: 0 auto; padding: 3rem 0 5rem; }.skill-hero { max-width: 49rem; padding: 4.4rem 0 3rem; }.skill-hero h1 { margin: .3rem 0 1.2rem; color: var(--indigo); font-size: clamp(3.35rem, 9vw, 6.7rem); text-align: left; line-height: .91; }.skill-hero h1 em { color: var(--orange); font-style: normal; }.hero-copy { max-width: 42rem; color: var(--muted); font-size: 1.16rem; }.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }.button { padding: .68rem 1rem; border-radius: .5rem; font-weight: 800; text-decoration: none; }.button.primary { color: white; background: var(--indigo); box-shadow: 5px 5px 0 var(--orange); }.button.ghost { border: 1px solid var(--line); color: var(--ink); }
.process-strip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: var(--code); color: var(--code-ink); }.process-strip div { min-height: 9.5rem; padding: 1.1rem; border-right: 1px solid rgb(255 255 255 / 15%); }.process-strip div:last-child { border-right: 0; }.process-strip b { display: block; margin-bottom: 1.7rem; color: #b8b5ff; font-family: ui-monospace, monospace; font-size: .75rem; }.process-strip span { font-weight: 750; line-height: 1.3; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; padding: 6rem 0; }.split-section h2, .workflow-section h2, .install-section h2 { margin: .25rem 0 1.15rem; padding: 0; border: 0; font-size: clamp(2.1rem, 5vw, 3.7rem); }.split-section p { color: var(--muted); }
.github-mock { overflow: hidden; border: 1px solid #d0d7de; border-radius: .75rem; color: #24292f; background: #fff; box-shadow: 15px 17px 0 rgb(36 36 92 / 12%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }.mock-top { display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; border-bottom: 1px solid #d8dee4; color: #57606a; font-size: .76rem; font-weight: 650; background: #f6f8fa; }.mock-dots { margin-left: auto; letter-spacing: .14em; }.mock-body { padding: 1.25rem; }.mock-body h3 { margin: .65rem 0 .3rem; color: #24292f; font-size: 1.18rem; }.mock-body p { margin: 0; color: #57606a; font-size: .8rem; }.open-pill, .answer-pill, .merged-pill { display: inline-block; padding: .2rem .55rem; border-radius: 2rem; color: white; font-size: .7rem; font-weight: 800; background: #1a7f37; }.answer-pill, .merged-pill { background: #8250df; }.mock-comment { display: grid; gap: .3rem; margin-top: 1rem; padding: .7rem; border: 1px solid #d8dee4; border-radius: .4rem; font-size: .78rem; }.mock-comment b { color: #0969da; }.check-row { display: flex; gap: .45rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid #d8dee4; font-size: .79rem; }.check-row span, .check-row b { color: #1a7f37; }.check-row b { margin-left: auto; }
.workflow-section { padding: 2.5rem 0; }.workflow-loop { position: relative; width: 100%; max-width: 720px; margin: 1.2rem auto 0; aspect-ratio: 1 / 1; }.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; }.loop-line { stroke: var(--orange); stroke-width: 2.5; fill: none; }.loop-line-spin { stroke: #8250df; stroke-dasharray: 7 6; }.node { position: absolute; display: grid; align-content: start; gap: .4rem; width: 12.5rem; min-height: 8.25rem; padding: 1.1rem; border: 1px solid var(--line); border-top: 4px solid var(--indigo); border-radius: .85rem; background: var(--paper); box-shadow: 0 8px 20px rgb(36 36 92 / 6%); transition: transform .15s ease; transform: translate(-50%, -50%); }.node:hover { transform: translate(-50%, -50%) translateY(-4px); }.node .step-num { color: var(--muted); font-family: ui-monospace, monospace; font-size: .74rem; font-weight: 800; font-style: normal; letter-spacing: .1em; }.node b { color: var(--indigo); font-size: 1.1rem; }.node span { color: var(--muted); font-size: .88rem; line-height: 1.3; }.node.accent { border-top-color: var(--orange); }.node.accent .step-num { color: var(--orange); }.node.done { color: white; border-color: #1a7f37; border-top-color: #1a7f37; background: #1a7f37; box-shadow: 0 8px 22px rgb(26 127 55 / 25%); }.node.done b, .node.done span, .node.done .step-num { color: white; }.node.spinoff { border-style: dashed; border-top-style: solid; border-top-color: #8250df; background: rgb(130 80 223 / 6%); }.node.spinoff .step-num { color: #8250df; }.node.spinoff b { color: #8250df; }.callout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.callout-grid article, .install-grid article { padding: 1.1rem; border-top: 2px solid var(--indigo); background: rgb(244 241 232 / 68%); }.callout-grid p, .install-grid p { margin-bottom: 0; color: var(--muted); font-size: .91rem; }.reverse { padding-top: 3rem; }.install-section { padding: 5rem 0 1rem; }.install-grid article { border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: .7rem; }.install-grid h3 { margin-top: 0; }.install-grid pre { margin-bottom: 0; white-space: pre-wrap; }.run-example { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.5rem; font-weight: 750; }.run-example span { color: var(--orange); font-family: ui-monospace, monospace; font-size: .8rem; text-transform: uppercase; }
.decision-map { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 1rem; align-items: center; margin: 2.4rem 0; padding: 1.5rem; border: 1px dashed var(--line); }.decision-map > div { padding: 1rem; border-radius: .55rem; }.decision-start { color: white; background: var(--indigo); }.decision-answer { color: white; background: #1a7f37; }.decision-stop { grid-column: 2; color: var(--muted); border: 1px solid var(--line); }.decision-map span { display: block; margin-top: .3rem; font-size: .8rem; }.decision-lines { text-align: center; font-size: .83rem; font-weight: 700; }.decision-lines div { display: flex; justify-content: space-around; margin-top: .8rem; }.yes { color: #1a7f37; }.no { color: var(--orange); }.discuss-strip b { color: #b8b5ff; }.discuss-install .install-grid article { border-top-color: #8250df; }

/* — home landing — */
.home main { width: min(100% - 2.5rem, 1180px); margin: 0 auto; }
.hero-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; align-items: center; padding: 4.8rem 0 5.8rem; }
.hero-section h1 { margin: 0; max-width: none; font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: 1.02; text-align: left; }
.hero-lede { margin: 1.75rem 0 0; max-width: 30em; color: var(--ink); font-size: 1.25rem; line-height: 1.5; }
.hero-sub { margin: 1.1rem 0 0; max-width: 32em; color: var(--muted); font-size: 1.03rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.1rem; }
.hero-command { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--panel); font-family: ui-monospace, monospace; font-size: .85rem; }
.hero-mock { font-size: .9rem; }
.hero-mock .mock-top { gap: .5rem; }
.mock-dot { color: #8c959f; }
.hero-mock .mock-body h3 { margin: .75rem 0 .25rem; font-size: 1.3rem; }
.mock-meta-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mock-byline { color: #57606a; font-size: .78rem; }
.mock-byline b { color: #0969da; font-weight: 650; }
.mock-issue-num { color: #8c959f; font-weight: 400; }
.mock-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0 0; }
.tag-blue, .tag-purple { padding: .14rem .55rem; border-radius: 2rem; font-size: .7rem; font-weight: 650; }
.tag-blue { color: #0969da; background: #ddf4ff; }
.tag-purple { color: #8250df; background: #fbefff; }
.hero-mock .mock-comment { margin-top: .6rem; }
.hero-mock .mock-comment b { color: var(--orange); font-family: ui-monospace, monospace; }
.hero-mock .mock-comment span { margin-left: .4rem; color: #57606a; font-size: .72rem; }
.hero-mock .mock-comment p { margin: .3rem 0 0; color: #1f2328; font-size: .8rem; line-height: 1.45; }
.hero-mock .check-row { margin-top: .9rem; }
.pulse-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: #1a7f37; animation: glorp-pulse 2.2s ease-in-out infinite; }
.check-ok { margin-left: .3rem; color: #1a7f37; }
.check-merged { margin-left: auto; color: var(--orange); }
@keyframes glorp-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes glorp-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cursor-blink { animation: glorp-blink 1.1s step-end infinite; }

.muted { color: var(--muted); }
.loop-section { padding: 6rem 0; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.loop-wrap { width: min(100% - 2.5rem, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.loop-wrap h2 { margin: .2rem 0 1.1rem; padding: 0; border: 0; font-size: clamp(2rem, 4vw, 2.8rem); }
.loop-wrap > div:first-child p { font-size: 1.05rem; color: var(--ink); }
.loop-circle { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 4.5rem auto 0; }
.loop-circle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-ring { fill: none; stroke: var(--line); stroke-width: 2; }
.loop-ring-spin { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 90 1015; animation: glorp-dash 7s linear infinite; }
.loop-ring-dashed { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; }
@keyframes glorp-dash { to { stroke-dashoffset: -1000; } }
.loop-node { position: absolute; transform: translate(-50%, -50%); width: 9.5rem; display: grid; gap: .3rem; justify-items: center; text-align: center; padding: .85rem .7rem; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--indigo); border-radius: .4rem; box-shadow: 0 8px 20px rgb(36 36 92 / 8%); }
.loop-node i { font-style: normal; color: var(--orange); font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.loop-node b { font-size: .95rem; color: var(--indigo); }
.loop-node span { font-size: .76rem; line-height: 1.3; color: var(--muted); }
.loop-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3rem; }
.loop-center img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.loop-center span { font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.dashboard-section { padding: 6.5rem 0; }
.dashboard-wrap { width: min(100% - 2.5rem, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; align-items: center; }
.dashboard-wrap h2 { margin: .2rem 0 1.1rem; padding: 0; border: 0; font-size: clamp(2rem, 4vw, 2.8rem); }
.dashboard-wrap > div:last-child p { font-size: 1.05rem; color: var(--ink); }
.terminal-mock { border-radius: .7rem; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; background: radial-gradient(circle at 50% -40%, #27272a 0, #09090b 46%); color: #fafafa; box-shadow: 0 22px 50px rgb(9 9 11 / 34%); }
.terminal-top { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; padding: .15rem .15rem .9rem; border-bottom: 1px solid #27272a; }
.terminal-kicker { margin: 0 0 .3rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #a1a1aa; }
.terminal-top h3 { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; font-weight: 600; color: #fafafa; }
.terminal-top h3 span { color: #a1a1aa; font-weight: 400; }
.terminal-top h3 small { margin-left: .4rem; font-size: .68rem; font-family: ui-monospace, monospace; color: #a1a1aa; }
.terminal-live { display: flex; align-items: center; gap: .45rem; border: 1px solid #27272a; border-radius: 999px; background: rgb(24 24 27 / 80%); padding: .3rem .6rem; font-size: .72rem; color: #a1a1aa; }
.terminal-live .pulse-dot { background: #4ade80; box-shadow: 0 0 10px rgb(74 222 128 / 53%); }
.terminal-bar { display: flex; flex-wrap: wrap; border-radius: .4rem; overflow: hidden; font-family: ui-monospace, monospace; font-size: .68rem; line-height: 1.25rem; }
.terminal-chip { display: flex; align-items: center; gap: .25rem; min-height: 1.75rem; padding: .25rem .6rem; }
.terminal-chip span { color: inherit; }
.chip-blue { background: #075985; }
.chip-purple { background: #701a75; }
.chip-green { background: #047857; }
.chip-dark { flex: 1; min-width: 12rem; background: #27272a; color: #a1a1aa; }
.job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.job-card { border: 1px solid #27272a; border-radius: .6rem; background: rgb(24 24 27 / 90%); box-shadow: 0 12px 32px rgb(0 0 0 / 20%); padding: .8rem; display: grid; gap: .4rem; min-width: 0; }
.job-title { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-line { font-family: ui-monospace, monospace; font-size: .64rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-log-head { padding: .25rem .6rem; border-radius: .35rem .35rem 0 0; background: #18181b; color: #a1a1aa; font-family: ui-monospace, monospace; font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-log pre { margin: 0; padding: .55rem .65rem; border-radius: 0 0 .35rem .35rem; background: #09090b; color: #d4d4d8; font-family: ui-monospace, monospace; font-size: .64rem; line-height: 1.05rem; white-space: pre-wrap; box-shadow: none; }
.terminal-logs { border: 1px solid #27272a; border-radius: .6rem; background: rgb(24 24 27 / 90%); padding: .75rem .85rem .85rem; display: grid; gap: .5rem; }
.terminal-logs-head { color: #a1a1aa; font-size: .72rem; font-weight: 600; }
.terminal-logs pre { margin: 0; padding: .55rem .65rem; border-radius: .4rem; background: #09090b; color: #d4d4d8; font-family: ui-monospace, monospace; font-size: .64rem; line-height: 1.05rem; white-space: pre-wrap; box-shadow: none; }

.section-lede { margin: -.6rem 0 2rem; max-width: 44em; color: var(--muted); font-size: 1.02rem; }
.home-install { background: var(--panel); border-top: 1px solid var(--line); padding: 6rem 0; }
.install-wrap { width: min(100% - 2.5rem, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.install-wrap h2 { margin: .2rem 0 1rem; padding: 0; border: 0; font-size: clamp(2rem, 4vw, 2.8rem); }
.install-label { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; color: var(--indigo); }
.install-wrap pre { margin: 0 0 1.4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.upgrade-note { margin: 1.2rem 0 0; color: var(--muted); }
.upgrade-note code { color: var(--orange); }
.prereq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.prereq-list li { display: grid; gap: .25rem; border-left: 2px solid var(--line); padding-left: 1rem; }
.prereq-list strong { color: var(--indigo); font-size: .98rem; }
.prereq-list span { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.install-wrap .alert { margin-top: 1.6rem; }
.home-footer { width: min(100% - 2.5rem, 1180px); margin: 0 auto; padding: 1.75rem 0 3.25rem; display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: space-between; border-top: 0; text-align: left; }
.home-footer a { color: var(--indigo); text-decoration: none; }

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .site-header {
    padding-inline: 1rem;
  }

  .readme {
    width: min(100% - 1.5rem, 980px);
    padding-top: 2rem;
  }

  th,
  td {
    min-width: 9rem;
  }

  .site-nav { gap: .6rem; }.site-nav > a:not(.repo-link) { display: none; }.repo-link { padding: .4rem .6rem; }.skill-index-grid, .install-grid, .split-section { grid-template-columns: 1fr; }.skill-doc { width: min(100% - 1.5rem, 1080px); }.skill-hero { padding-top: 2.5rem; }.process-strip { grid-template-columns: repeat(2, 1fr); }.process-strip div:nth-child(2) { border-right: 0; }.process-strip div { min-height: 7rem; }.workflow-loop { max-width: 100%; aspect-ratio: auto; display: grid; gap: .75rem; margin: 2rem 0 1rem; }.loop-svg { display: none; }.node { position: static; transform: none; width: 100%; min-height: 0; }.node:hover { transform: none; }.callout-grid { grid-template-columns: 1fr; }.split-section { gap: 2rem; padding: 3.5rem 0; }.reverse .github-mock { order: 2; }.decision-map { grid-template-columns: 1fr; }.decision-stop { grid-column: auto; }.decision-lines div { display: none; }

  .home main { width: min(100% - 1.5rem, 1180px); }
  .hero-section { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0 4rem; }
  .loop-wrap, .dashboard-wrap, .install-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .loop-circle { max-width: 100%; margin-top: 2.5rem; }
  .loop-node { width: 100%; position: static; transform: none; margin-bottom: .6rem; }
  .loop-circle svg, .loop-center { display: none; }
  .loop-circle { display: grid; aspect-ratio: auto; }
  .job-grid { grid-template-columns: 1fr; }
  .home-footer { text-align: left; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e0;
    --muted: #b4afc3;
    --paper: #171720;
    --panel: #272631;
    --line: #3b3948;
    --indigo: #b8b5ff;
    --code: #0f0f15;
  }

  body {
    background:
      radial-gradient(circle at top left, rgb(130 80 223 / 12%), transparent 28rem),
      var(--paper);
  }

  a {
    color: #bbb8ff;
  }

  .site-header {
    border-bottom-color: rgb(59 57 72 / 85%);
    background: rgb(23 23 32 / 88%);
  }

  blockquote {
    background: #2a2038;
  }
}