:root {
  --fg: #e9edee;
  --muted2: #707777;
  --brand2: #46e6e2;
  --mint: #2ed6a4;
  --sky: #5cc8ff
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.navlinks.open { transform: none; }
.code-card pre[hidden] { display: none; }

.tabs button {
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 5px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  color: var(--muted2);
}
.tabs button.active { background: rgb(255 255 255 / .06); color: var(--fg); }

.c-comment { color: var(--muted2); }
.c-cmd { color: #e9edee; }
.c-flag { color: var(--brand2); }
.c-str { color: var(--mint); }
.c-key { color: var(--sky); }

::selection { background: rgba(9, 195, 194, .35); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cursor { animation: none !important; }
}