:root {
  --page: #000;
  --panel: #000;
  --panel-header: #1d1d1d;
  --border: #303030;
  --terminal-border: #4d4d4d;
  --status-border: #827564;
  --green: #5ef054;
  --green-bright: #83ff7a;
  --green-muted: #49ad42;
  --terminal-text: #eee0c5;
  --mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--green);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.45;
  /* macOS thins light-on-dark text; grayscale AA keeps the stems even and
     drops the colour fringing that reads as "washed out" on black. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--green-bright);
  text-decoration-color: #388532;
  text-underline-offset: 3px;
}

a:hover {
  color: #a0ff99;
}

.site-shell {
  width: min(840px, calc(100% - 48px));
  margin: 0 auto;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: var(--border);
  color: var(--green-muted);
}

.site-header {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-bright);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  width: 18px;
  height: 18px;
}

.site-nav a {
  color: var(--green-muted);
  text-decoration: none;
}

.hero {
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 64px) 0 80px;
}

.hero h1 {
  margin: 0;
  color: var(--green);
  font-size: clamp(14px, 2.7vw, 34px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.96;
  white-space: nowrap;
}

.install {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 13px 16px;
  border: 1px solid #388532;
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
}

.copy-button {
  padding: 2px 0 2px 15px;
  border: 0;
  border-left: 1px solid #2b6127;
  background: none;
  color: var(--green-muted);
  cursor: pointer;
  font: 12px var(--mono);
}

.copy-button:hover {
  color: var(--green-bright);
}

.scenario-terminal {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(24px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid var(--terminal-border);
  border-radius: 22px;
  background: var(--panel);
  color: var(--terminal-text);
  font: clamp(11px, 1.55vw, 18px) / 1.42 var(--mono);
}

.terminal-header {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-bottom: 1px solid #343434;
  background: var(--panel-header);
  color: #989898;
  font-size: 0.78em;
}

.terminal-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f57;
}

.terminal-dot.yellow {
  background: #febc2e;
}

.terminal-dot.green {
  background: #28c840;
}

.terminal-title {
  margin-left: 6px;
}

/* Inset the recording so the terminal text clears the window border. The
   padding lives on this wrapper rather than on the video itself, so the
   video keeps its intrinsic sizing and needs no explicit aspect-ratio. */
.scenario-screen {
  padding: clamp(6px, 0.9vw, 12px);
  background: var(--panel);
}

.scenario-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
}

.site-footer {
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 14.4px;
}

@media (max-width: 650px) {
  .site-shell {
    width: min(840px, calc(100% - 32px));
  }

  .scenario-terminal {
    border-radius: 12px;
  }
}