html, body { margin: 0; }
body {
  background: #282828;
  color: #EBDBB2;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
main {
  max-width: 920px;
  margin: 0 auto;
  padding: 80px 32px 32px;
  text-align: center;
}
img.icon {
  width: 168px;
  height: 168px;
  display: block;
  margin: 0 auto 28px;
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #EBDBB2;
  line-height: 1.1;
}
.tag {
  margin: 0 0 32px;
  color: #BDAE93;
  font-size: clamp(1rem, 3.5vw, 1.1875rem);
  letter-spacing: -0.005em;
}
a.download {
  display: inline-block;
  padding: 14px 28px;
  background: #FABD2F;
  color: #282828;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 10px;
  transition: background 120ms ease, transform 120ms ease;
}
a.download:hover { background: #FFD866; transform: translateY(-1px); }
a.download:active { transform: translateY(0); }
a.download:focus-visible {
  outline: 3px solid #282828;
  outline-offset: 2px;
}
.reqs { margin-top: 12px; color: #A89984; font-size: 0.8125rem; }

/* Terminal window mockup — chrome matches MainWindowController.swift
   (fullSizeContentView, titlebarAppearsTransparent, no separator,
   centered title, traffic-light overlay). Palette pulled from the
   Gruvbox theme in Theme.swift. */
/* Window sizing scales with the viewport so the longest sample line
   ("Finished `release` profile [optimized] in 4.21s" — 53 chars) fits
   without horizontal overflow at any width down to ~320px. The
   `clamp()` floor on font-size keeps text legible; the floor on
   titlebar/light dimensions keeps macOS chrome recognisable. */
.bb-window {
  width: 100%;
  max-width: 640px;
  margin: 64px auto 0;
  background: #282828;
  border-radius: clamp(10px, 2.5vw, 14px);
  overflow: hidden;
  text-align: left;
  font-family: "Hack Nerd Font Mono", "Hack", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  box-shadow:
    0 50px 100px -20px rgba(0, 0, 0, 0.7),
    0 22px 38px -10px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.7);
}
.bb-titlebar {
  height: clamp(20px, 5.5vw, 28px);
  position: relative;
  display: flex;
  align-items: center;
}
.bb-traffic {
  position: absolute;
  left: clamp(8px, 2.5vw, 13px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: clamp(5px, 1.5vw, 8px);
}
.bb-traffic .light {
  width: clamp(8px, 2.4vw, 12px);
  height: clamp(8px, 2.4vw, 12px);
  border-radius: 50%;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
.bb-traffic .close { background: linear-gradient(180deg, #FF6E62 0%, #ED4D44 100%); }
.bb-traffic .min   { background: linear-gradient(180deg, #FEC042 0%, #E0A529 100%); }
.bb-traffic .max   { background: linear-gradient(180deg, #43D964 0%, #1FAA3A 100%); }
.bb-title {
  width: 100%;
  text-align: center;
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(0.625rem, 2.4vw, 0.8125rem);
  font-weight: 500;
  color: rgba(235, 219, 178, 0.55);
}
.bb-body {
  padding: clamp(2px, 0.6vw, 4px) clamp(8px, 2vw, 12px) clamp(6px, 1.5vw, 10px);
  font-size: clamp(0.5rem, 2.5vw, 0.8125rem);
  line-height: 1.4;
  white-space: pre;
  color: #EBDBB2;
}
.bb-body .row { white-space: pre; }
.bb-body .path   { color: #83A598; font-weight: 600; }
.bb-body .prompt { color: #B8BB26; }
.bb-body .ok     { color: #B8BB26; font-weight: 700; }
.bb-body .num    { color: #FABD2F; }
.bb-body .dim    { color: #928374; }
.bb-cursor {
  display: inline-block;
  /* em-relative so the cursor block scales with .bb-body's font-size */
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.18em;
  background: #EBDBB2;
  animation: bb-blink 1s steps(2) infinite;
}
@keyframes bb-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bb-cursor { animation: none; }
}

/* Features grid */
.features {
  margin: 64px auto 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
  text-align: left;
}
.feat h2 {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #EBDBB2;
}
.feat p {
  margin: 0;
  color: #BDAE93;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.feat code {
  color: #83A598;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
}

.bench-line {
  margin: 56px auto 0;
  max-width: 760px;
  text-align: center;
  color: #A89984;
  font-size: 0.875rem;
}
.bench-line a {
  color: #FABD2F;
  text-decoration: none;
  border-bottom: 1px dotted rgba(250, 189, 47, 0.4);
}
.bench-line a:hover { border-bottom-color: #FABD2F; }

footer {
  margin: 64px auto 0;
  max-width: 760px;
  padding: 24px 0 0;
  border-top: 1px solid #3c3836;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: #A89984;
}
footer a {
  color: #BDAE93;
  text-decoration: none;
}
footer a:hover { color: #EBDBB2; }
footer .links { display: flex; gap: 18px; }

/* 404 page reuses the splash palette + layout. */
.notfound {
  margin-top: 80px;
}
.notfound h1 {
  font-size: clamp(3rem, 14vw, 6rem);
  margin-bottom: 4px;
}
.notfound .tag {
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  main { padding: 48px 20px 24px; }
  img.icon { width: clamp(108px, 32vw, 128px); height: auto; }
  .bb-window { margin-top: 48px; }
  .features { grid-template-columns: 1fr; gap: 28px; }
  .bench-line { margin-top: 40px; }
  footer { flex-direction: column; gap: 10px; margin-top: 48px; }
}
@media (max-width: 360px) {
  main { padding: 40px 16px 20px; }
}