/* ---------- fonts ---------- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --bg-page: #06080d;
  --bg-terminal: #0d1117;
  --bg-titlebar: #161b22;
  --bg-block: #11151c;
  --fg: #e6edf3;
  --fg-dim: #8b949e;
  --comment: #6e7681;
  --border: #30363d;
  --border-soft: #21262d;
  --teal: #7fd6d2;
  --teal-dim: rgba(127, 214, 210, .15);
  --coral: #ff5b5b;
  --coral-glow: rgba(255, 91, 91, .22);
  --green: #58cc8e;
  --yellow: #e3b341;
  --magenta: #bc8cff;
  --tl-red: #ff5f56;
  --tl-yellow: #ffbd2e;
  --tl-green: #27c93f;
  --shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html { background: var(--bg-page); color-scheme: dark; }

body {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg-page);
  min-height: 100vh;
  padding: 2rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--coral); }

/* ---------- terminal frame ---------- */
.terminal {
  width: 100%;
  max-width: 980px;
  background: var(--bg-terminal);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.titlebar {
  background: var(--bg-titlebar);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: .55rem .9rem;
  gap: 1rem;
}

.dots { display: flex; gap: .45rem; }
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.dot-red { background: var(--tl-red); }
.dot-yellow { background: var(--tl-yellow); }
.dot-green { background: var(--tl-green); }

.title {
  text-align: center;
  font-size: .82rem;
  color: var(--fg-dim);
  letter-spacing: .02em;
}

.titlebar-spacer { width: 52px; }

.content {
  padding: 1.75rem 2rem 2.5rem;
}

@media (max-width: 600px) {
  body { padding: 1rem .5rem; }
  .content { padding: 1.25rem 1.25rem 2rem; }
  .terminal { border-radius: 8px; }
}

/* ---------- prompt + line tokens ---------- */
.prompt {
  color: var(--teal);
  user-select: none;
  margin-right: .35rem;
  font-weight: 700;
}
.arrow { color: var(--magenta); margin-right: .35rem; }
.check { color: var(--green); margin-right: .35rem; font-weight: 700; }
.eye { color: var(--coral); }
.comment { color: var(--comment); }

/* ---------- hero ---------- */
.hero { padding: 1rem 0 1.5rem; }

.prompt-line {
  font-size: .95rem;
  margin-bottom: 1rem;
  color: var(--fg);
}

.ascii-art {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: .5rem 0 1.5rem;
  flex-wrap: wrap;
}

pre.art-robot,
pre.art-wordmark {
  margin: 0;
  font-family: inherit;
  white-space: pre;
  line-height: 1.05;
}
pre.art-robot { color: var(--teal); font-size: 1rem; }
pre.art-wordmark { color: var(--fg); font-size: .92rem; }

@media (max-width: 640px) {
  pre.art-robot { font-size: .82rem; }
  pre.art-wordmark { font-size: .68rem; }
}

.tagline {
  margin: .15rem 0;
  color: var(--fg-dim);
  font-size: .98rem;
}
.tagline + .tagline { margin-bottom: .5rem; }

/* ---------- term block (code-like, the centerpiece) ---------- */
/* Targets both hand-written .term-block and Astro's Shiki output (.astro-code).
 * Shiki sets background-color inline via the theme, so we override here to
 * keep one consistent block style across the page. */
pre.term-block,
pre.astro-code {
  position: relative;
  background-color: var(--bg-block) !important;
  background-image:
    linear-gradient(to right,  var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to right,  var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to bottom, var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to bottom, var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px) !important;
  background-size: 12px 1px, 12px 1px, 1px 12px, 1px 12px !important;
  background-position: 0 0, 0 100%, 0 0, 100% 0 !important;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y !important;
  border: none;
  border-radius: 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  color: var(--fg);
}

.copy-btn {
  position: absolute;
  top: .5rem;
  right: .65rem;
  background: transparent;
  color: var(--fg-dim);
  border: none;
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  padding: .15rem .35rem;
  transition: color .12s ease;
}
.copy-btn:hover { color: var(--teal); }
.copy-btn.copied { color: var(--green); }

/* ---------- buttons ---------- */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  padding: .55rem 1.1rem;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  letter-spacing: .01em;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  color: var(--coral);
  border-color: var(--coral);
}
.btn-primary:hover {
  background: var(--coral-glow);
  color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral), 0 0 18px var(--coral-glow);
}

.btn-ghost {
  color: var(--fg);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--fg);
  background: rgba(230, 237, 243, .04);
}

/* ---------- section rule ---------- */
.section-rule {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--fg-dim);
  margin: 2.75rem 0 1.25rem;
  font-size: .9rem;
  letter-spacing: .03em;
}
.section-rule .dashes { color: var(--fg-dim); }
.section-rule .label {
  color: var(--teal);
  text-decoration: none;
}
.section-rule a.label:hover { text-decoration: underline; }
.section-rule [id]:target,
:target > .section-rule { scroll-margin-top: 1rem; }
.section-rule .dashes-grow {
  flex: 1;
  border-top: 1px dashed var(--border);
  opacity: .7;
}

/* ---------- bullet list (features, lockfile) ---------- */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullet-list li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .35rem 0;
}
.bullet-list .bullet { color: var(--teal); font-weight: 700; }
.bullet-list .key {
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
}
.bullet-list .val { color: var(--fg-dim); }
.bullet-list code {
  color: var(--fg);
  background: rgba(127, 214, 210, .08);
  padding: 0 .25em;
  border-radius: 2px;
}

/* lockfile-specific accents (override .key color when combined) */
.lock-name { color: var(--teal); }
.lock-sha { color: var(--magenta); }
.lock-auto { color: var(--green); }
.lock-pin { color: var(--yellow); }
.bullet-list .lock-auto { color: var(--green); }
.bullet-list .lock-pin { color: var(--yellow); }

.lockfile-intro {
  margin: 0 0 1rem;
  color: var(--fg-dim);
}

.sub-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
  margin: 1.5rem 0 .5rem;
}
.sub-label::before { content: "# "; color: var(--comment); }
.lockfile-intro code {
  color: var(--fg);
  background: rgba(127, 214, 210, .08);
  padding: 0 .25em;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .bullet-list li {
    grid-template-columns: auto 1fr;
    row-gap: .15rem;
  }
  .bullet-list .val { grid-column: 2; }
}

/* ---------- docs-table ---------- */
.docs-table {
  border-collapse: collapse;
  margin: 0 0 1rem;
  width: 100%;
}
.docs-table th,
.docs-table td {
  text-align: left;
  vertical-align: top;
  padding: .35rem 0;
}
.docs-table th {
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
  padding-right: 1.5rem;
}
.docs-table td { color: var(--fg-dim); }
.docs-table code {
  color: var(--fg);
  background: rgba(127, 214, 210, .08);
  padding: 0 .25em;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .docs-table,
  .docs-table tbody,
  .docs-table tr,
  .docs-table th,
  .docs-table td { display: block; }
  .docs-table th { padding: .35rem 0 .15rem; }
  .docs-table td { padding: 0 0 .5rem; }
}

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.tab {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid transparent;
  padding: .35rem .75rem;
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  border-radius: 4px;
  transition: color .12s ease, border-color .12s ease;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--coral);
  border-color: var(--coral);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-note {
  margin: 0 0 .5rem;
  font-size: .9rem;
}

/* ---------- demo ---------- */
.demo-frame {
  background-color: var(--bg-block);
  background-image:
    linear-gradient(to right,  var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to right,  var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to bottom, var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px),
    linear-gradient(to bottom, var(--border) 0, var(--border) 8px, transparent 8px, transparent 12px);
  background-size: 12px 1px, 12px 1px, 1px 12px, 1px 12px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  border: none;
  border-radius: 0;
  padding: 1rem;
  margin-top: .25rem;
}
.demo-frame object { width: 100%; height: auto; display: block; }

/* ---------- footer ---------- */
.page-footer {
  margin-top: 1.5rem;
  color: var(--fg-dim);
  font-size: .9rem;
}
.page-footer p { margin: .25rem 0; }
.page-footer .cursor {
  color: var(--teal);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.blink {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  background: var(--teal);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(2, jump-none) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- a11y ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  * { transition: none !important; }
}

/* selection — accent */
::selection { background: var(--teal); color: var(--bg-terminal); }