html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #09090b;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

.hero-glow {
  background: radial-gradient(
    circle at center top,
    rgba(34, 197, 94, .14),
    transparent 50%
  );
}

.terminal-shadow {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 100px rgba(0,0,0,.6);
}

.comment-label {
  color: rgba(74, 222, 128, .65);
}
.comment-label::before {
  content: "// ";
  color: rgba(74, 222, 128, .4);
}

.status-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .01em;
}

.code-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.code-scroll pre,
.code-scroll code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.code-scroll::-webkit-scrollbar {
  height: 6px;
}
.code-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.code-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}