:root {
  --octc-color-primary: #159d82;
  --octc-color-primary-hover: #0f8770;
  --octc-color-bg: #ffffff;
  --octc-color-bg-alt: #f5f7fb;
  --octc-color-text: #1a2744;
  --octc-color-text-muted: #2e3f60;
  --octc-color-border: #d2dbea;
  --octc-color-code-bg: #101a31;
  --octc-color-code-bg-top: #18264a;
  --octc-color-code-text: #edf3ff;
}
[data-theme="dark"] {
  --octc-color-primary: #2cc9a8;
  --octc-color-primary-hover: #50d6bd;
  --octc-color-bg: #0f1724;
  --octc-color-bg-alt: #151e2d;
  --octc-color-text: #e2ebf0;
  --octc-color-text-muted: #b8c9d4;
  --octc-color-border: #2a3a50;
  --octc-color-code-bg: #0a1020;
  --octc-color-code-bg-top: #0a1020;
  --octc-color-code-text: #e7f0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-primary: #2cc9a8;
    --octc-color-primary-hover: #50d6bd;
    --octc-color-bg: #0f1724;
    --octc-color-bg-alt: #151e2d;
    --octc-color-text: #e2ebf0;
    --octc-color-text-muted: #b8c9d4;
    --octc-color-border: #2a3a50;
    --octc-color-code-bg: #0a1020;
    --octc-color-code-bg-top: #0a1020;
    --octc-color-code-text: #e7f0ff;
  }
}
:root {
  --octc-sidebar-width: 260px;
  --octc-header-height: 60px;
  --octc-max-content-width: 960px;
}
:root {
  --octc-font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  --octc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
/**
 * chibivue Book theme — layered on top of the Ox Content default theme.
 * Brand: Mint/Turquoise + Navy (see public/og.png).
 * -------------------------------------------------------------------------- */

:root {
  --c-mint-300: #50d6bd;
  --c-mint-400: #2cc9a8;
  --c-mint-500: #1ab394;
  --c-mint-600: #159d82;
  --c-mint-700: #0f8770;
  --c-navy-900: #1a2744;
  --c-navy-700: #2e3f60;
  --c-duck-yellow: #f4d35e;
  --c-danger: #e85d75;

  --chibivue-note-bg-info: rgba(26, 179, 148, 0.06);
  --chibivue-note-bg-tip: rgba(44, 201, 168, 0.08);
  --chibivue-note-bg-success: rgba(26, 179, 148, 0.1);
  --chibivue-note-bg-warning: rgba(244, 211, 94, 0.1);
  --chibivue-note-bg-danger: rgba(232, 93, 117, 0.08);
  --chibivue-figure-border: rgba(154, 170, 196, 0.35);
}

[data-theme="dark"] {
  --chibivue-note-bg-info: rgba(26, 179, 148, 0.08);
  --chibivue-note-bg-tip: rgba(44, 201, 168, 0.1);
  --chibivue-note-bg-success: rgba(26, 179, 148, 0.12);
  --chibivue-note-bg-warning: rgba(244, 211, 94, 0.12);
  --chibivue-note-bg-danger: rgba(232, 93, 117, 0.1);
  --chibivue-figure-border: rgba(139, 228, 211, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chibivue-note-bg-info: rgba(26, 179, 148, 0.08);
    --chibivue-note-bg-tip: rgba(44, 201, 168, 0.1);
    --chibivue-note-bg-success: rgba(26, 179, 148, 0.12);
    --chibivue-note-bg-warning: rgba(244, 211, 94, 0.12);
    --chibivue-note-bg-danger: rgba(232, 93, 117, 0.1);
      --chibivue-figure-border: rgba(139, 228, 211, 0.24);
  }
}

/**
 * Text is shown exactly as written in the book: no CSS case transforms
 * (the base theme uppercases sidebar groups, container titles, the TOC title…).
 * -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  text-transform: none !important;
}

/* Those labels were letter-spaced for capitals; mixed case reads better without. */
.nav-title,
.toc-title,
.mobile-footer-label,
.search-result-scope,
.content .ox-callout-title,
.content .ox-container-title,
.content .ox-container summary {
  letter-spacing: normal;
}

/**
 * Header
 * -------------------------------------------------------------------------- */

.header-title {
  margin-right: 24px;
  white-space: nowrap;
}

/**
 * Code blocks — retro terminal style, ported from the VitePress theme
 * (chibivue-theme.json / chibivue-theme-light.json). No shadow.
 * -------------------------------------------------------------------------- */

:root {
  --octc-font-sans:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --octc-font-mono:
    ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --octc-code-pad-block: 20px;
  --octc-code-pad-inline: 24px;

  --octc-color-code-bg: #f5f5f0;
  --octc-color-code-text: #1a5c4a;
  --octc-color-code-frame-border: #d0d8d5;
  --octc-color-code-line-number: #7a9a8a;
  --octc-color-code-line-add: rgba(26, 138, 110, 0.12);
  --octc-color-code-line-remove: rgba(192, 64, 80, 0.1);
  --octc-color-code-line-highlight: rgba(26, 138, 110, 0.2);
  --octc-syntax-background: #f5f5f0;
  --octc-syntax-foreground: #2a5a4a;
  --octc-syntax-token-keyword: #1a8a6e;
  --octc-syntax-token-punctuation: #2a5a4a;
  --octc-syntax-token-string: #b8860b;
  --octc-syntax-token-string-expression: #1a8a6e;
  --octc-syntax-token-constant: #c06000;
  --octc-syntax-token-function: #0d7d6c;
  --octc-syntax-token-parameter: #2a5a4a;
  --octc-syntax-token-comment: #5a7a6a;
  --chibivue-inline-code-bg: #f0f5f3;
  --chibivue-inline-code-text: #1a5c4a;
  --chibivue-inline-code-border: #d0d8d5;
  --chibivue-diff-add-mark: #1a8a6e;
  --chibivue-diff-remove-mark: #c04050;
}

[data-theme="dark"] {
  --octc-color-code-bg: #0a0f14;
  --octc-color-code-text: #8be4d3;
  --octc-color-code-frame-border: #1a2744;
  --octc-color-code-line-number: #4a5f87;
  --octc-color-code-line-add: rgba(44, 201, 168, 0.14);
  --octc-color-code-line-remove: rgba(232, 93, 117, 0.14);
  --octc-color-code-line-highlight: rgba(44, 201, 168, 0.2);
  --octc-syntax-background: #0a0f14;
  --octc-syntax-foreground: #b8e4d8;
  --octc-syntax-token-keyword: #2cc9a8;
  --octc-syntax-token-punctuation: #6b9e8a;
  --octc-syntax-token-string: #f4d35e;
  --octc-syntax-token-string-expression: #2cc9a8;
  --octc-syntax-token-constant: #e8a545;
  --octc-syntax-token-function: #5dddc2;
  --octc-syntax-token-parameter: #b8e4d8;
  --octc-syntax-token-comment: #4a5f87;
  --chibivue-inline-code-bg: #0a0f14;
  --chibivue-inline-code-text: #8be4d3;
  --chibivue-inline-code-border: #1a2744;
  --chibivue-diff-add-mark: #2cc9a8;
  --chibivue-diff-remove-mark: #e85d75;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-code-bg: #0a0f14;
    --octc-color-code-text: #8be4d3;
    --octc-color-code-frame-border: #1a2744;
    --octc-color-code-line-number: #4a5f87;
    --octc-color-code-line-add: rgba(44, 201, 168, 0.14);
    --octc-color-code-line-remove: rgba(232, 93, 117, 0.14);
    --octc-color-code-line-highlight: rgba(44, 201, 168, 0.2);
    --octc-syntax-background: #0a0f14;
    --octc-syntax-foreground: #b8e4d8;
    --octc-syntax-token-keyword: #2cc9a8;
    --octc-syntax-token-punctuation: #6b9e8a;
    --octc-syntax-token-string: #f4d35e;
    --octc-syntax-token-string-expression: #2cc9a8;
    --octc-syntax-token-constant: #e8a545;
    --octc-syntax-token-function: #5dddc2;
    --octc-syntax-token-parameter: #b8e4d8;
    --octc-syntax-token-comment: #4a5f87;
    --chibivue-inline-code-bg: #0a0f14;
    --chibivue-inline-code-text: #8be4d3;
    --chibivue-inline-code-border: #1a2744;
    --chibivue-diff-add-mark: #2cc9a8;
    --chibivue-diff-remove-mark: #e85d75;
  --chibivue-diff-add-mark: #2cc9a8;
  --chibivue-diff-remove-mark: #e85d75;
  }
}

.content pre,
.content pre.ox-code-block {
  position: relative;
  margin: 16px 0;
  border: 1px solid var(--octc-color-code-frame-border);
  border-radius: 8px;
  box-shadow: none;
  line-height: 1.55;
}

.content pre code {
  font-family: var(--octc-font-mono);
  font-size: 0.875em;
}

.content pre.ox-code-block .ox-code-line--add,
.content pre.ox-code-block .ox-code-line--remove {
  border-left: 0;
}

/* A +/- gutter mark, like VitePress, so diffs read without relying on color. */
.content pre.ox-code-block .ox-code-line--add::before,
.content pre.ox-code-block .ox-code-line--remove::before {
  position: absolute;
  left: 8px;
  font-weight: 600;
}

.content pre.ox-code-block .ox-code-line--add::before {
  content: "+";
  color: var(--chibivue-diff-add-mark);
}

.content pre.ox-code-block .ox-code-line--remove::before {
  content: "-";
  color: var(--chibivue-diff-remove-mark);
}

/* Scanline effect — dark mode only */
[data-theme="dark"] .content pre::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content pre::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 2px
    );
    pointer-events: none;
    z-index: 1;
  }
}

.content :not(pre) > code {
  background-color: var(--chibivue-inline-code-bg);
  color: var(--chibivue-inline-code-text);
  border: 1px solid var(--chibivue-inline-code-border);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/**
 * Custom containers
 * -------------------------------------------------------------------------- */

.content .ox-container--tip,
.content .ox-container--info {
  border-color: var(--c-mint-400);
}

.content .ox-container--warning {
  border-color: var(--c-duck-yellow);
}

.content .ox-container--danger {
  border-color: var(--c-danger);
}

/**
 * Book figures
 * -------------------------------------------------------------------------- */

.content img[src*="/figures/"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border: 1px solid var(--chibivue-figure-border);
  border-radius: 8px;
  background: #0f1724;
}

.content img[src*="/figures/_brand/"],
.content img.author-avatar,
.content img.sponsors-image {
  border: 0;
  background: transparent;
}

.content img.author-avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--chibivue-figure-border);
  border-radius: 8px;
}

.content .sponsors-block {
  text-align: center;
}

.content a.sponsors-image-link {
  display: block;
}

.content a.sponsors-image-link .ox-external-icon {
  display: none;
}

.content img.sponsors-image {
  width: min(100%, 560px);
  margin: 1.5rem auto;
}

.content img.sponsors-image--dark {
  display: none;
}

[data-theme="dark"] .content img.sponsors-image--light {
  display: none;
}

[data-theme="dark"] .content img.sponsors-image--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content img.sponsors-image--light {
    display: none;
  }

  :root:not([data-theme="light"]) .content img.sponsors-image--dark {
    display: block;
  }
}

/**
 * Kawaiko notes (rendered by theme/kawaiko-note.ts)
 * -------------------------------------------------------------------------- */

.kawaiko-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 12px;
  border: 1px solid var(--octc-color-border);
  background: var(--octc-color-bg-alt);
}

.kawaiko-note--right {
  flex-direction: row-reverse;
}

.kawaiko-note__mascot {
  flex-shrink: 0;
}

.content .kawaiko-note__image {
  display: block;
  margin: 0;
  border: 0;
  border-radius: 8px;
  object-fit: contain;
  background: transparent;
}

.kawaiko-note--sm .kawaiko-note__image {
  width: 48px;
  height: 48px;
}

.kawaiko-note--md .kawaiko-note__image {
  width: 72px;
  height: 72px;
}

.kawaiko-note--lg .kawaiko-note__image {
  width: 96px;
  height: 96px;
}

.kawaiko-note__content {
  flex: 1;
  min-width: 0;
}

.kawaiko-note__title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--octc-color-text);
}

.kawaiko-note__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--octc-color-text-muted);
  overflow-wrap: anywhere;
}

.kawaiko-note__body p {
  margin: 0;
}

.kawaiko-note__body p + p {
  margin-top: 8px;
}

.kawaiko-note--info {
  border-color: var(--c-mint-300);
  background: var(--chibivue-note-bg-info);
}

.kawaiko-note--tip {
  border-color: var(--c-mint-400);
  background: var(--chibivue-note-bg-tip);
}

.kawaiko-note--success {
  border-color: var(--c-mint-500);
  background: var(--chibivue-note-bg-success);
}

.kawaiko-note--warning {
  border-color: var(--c-duck-yellow);
  background: var(--chibivue-note-bg-warning);
}

.kawaiko-note--danger {
  border-color: var(--c-danger);
  background: var(--chibivue-note-bg-danger);
}

@media (max-width: 640px) {
  .kawaiko-note {
    padding: 12px 16px;
    gap: 12px;
  }

  .kawaiko-note--md .kawaiko-note__image,
  .kawaiko-note--lg .kawaiko-note__image {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .kawaiko-note,
  .kawaiko-note--right {
    flex-direction: column;
    align-items: stretch;
  }

  .kawaiko-note__body {
    font-size: 0.92rem;
  }

  .kawaiko-note--sm .kawaiko-note__image,
  .kawaiko-note--md .kawaiko-note__image,
  .kawaiko-note--lg .kawaiko-note__image {
    width: 48px;
    height: 48px;
  }
}

/**
 * Entry page
 * -------------------------------------------------------------------------- */

.hero-image img,
.content .hero-image img[src*="/figures/"] {
  width: auto;
  height: 220px;
  margin: 0 auto;
  border: 0;
  background: transparent;
}

/**
 * Landing page (rendered by theme/home.ts), ported from the VitePress
 * HeroSection / FeaturesSection / FeatureCard components.
 * -------------------------------------------------------------------------- */

:root {
  --home-tagline: #3d4f5f;
  --home-btn-secondary-bg: #ffffff;
  --home-btn-secondary-border: #2cc9a8;
  --home-btn-secondary-text: #1a2744;
  --home-btn-secondary-hover-bg: #e8f7f4;
  --home-btn-secondary-hover-text: #1a2744;
  --home-snippet-bg: rgba(255, 255, 255, 0.95);
  --home-snippet-border: rgba(26, 179, 148, 0.35);
  --home-snippet-text: #1ab394;
  --home-badge-bg: rgba(26, 179, 148, 0.1);
  --home-badge-border: rgba(26, 179, 148, 0.5);
  --home-badge-text: #1ab394;
  --home-features-bg: linear-gradient(180deg, #f0f5f3 0%, #e8f0ed 100%);
  --home-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 252, 250, 0.98) 100%);
  --home-card-border: rgba(26, 179, 148, 0.25);
  --home-card-hover-border: rgba(26, 179, 148, 0.4);
  --home-card-title: #1a2744;
  --home-card-text: #3d4f5f;
}

[data-theme="dark"] {
  --home-tagline: #b8c9d4;
  --home-btn-secondary-bg: transparent;
  --home-btn-secondary-border: #2a3a50;
  --home-btn-secondary-text: #e2ebf0;
  --home-btn-secondary-hover-bg: transparent;
  --home-btn-secondary-hover-text: #1ab394;
  --home-snippet-bg: rgba(26, 39, 68, 0.8);
  --home-snippet-border: rgba(26, 179, 148, 0.3);
  --home-snippet-text: #2cc9a8;
  --home-badge-bg: rgba(26, 179, 148, 0.15);
  --home-badge-border: rgba(26, 179, 148, 0.4);
  --home-badge-text: #2cc9a8;
  --home-features-bg: #0f1724;
  --home-card-bg: linear-gradient(145deg, rgba(26, 39, 68, 0.6) 0%, rgba(15, 26, 46, 0.8) 100%);
  --home-card-border: rgba(26, 179, 148, 0.15);
  --home-card-hover-border: rgba(26, 179, 148, 0.4);
  --home-card-title: #e2ebf0;
  --home-card-text: #b8c9d4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --home-tagline: #b8c9d4;
    --home-btn-secondary-bg: transparent;
    --home-btn-secondary-border: #2a3a50;
    --home-btn-secondary-text: #e2ebf0;
    --home-btn-secondary-hover-bg: transparent;
    --home-btn-secondary-hover-text: #1ab394;
    --home-snippet-bg: rgba(26, 39, 68, 0.8);
    --home-snippet-border: rgba(26, 179, 148, 0.3);
    --home-snippet-text: #2cc9a8;
    --home-badge-bg: rgba(26, 179, 148, 0.15);
    --home-badge-border: rgba(26, 179, 148, 0.4);
    --home-badge-text: #2cc9a8;
    --home-features-bg: #0f1724;
    --home-card-bg: linear-gradient(145deg, rgba(26, 39, 68, 0.6) 0%, rgba(15, 26, 46, 0.8) 100%);
    --home-card-border: rgba(26, 179, 148, 0.15);
    --home-card-hover-border: rgba(26, 179, 148, 0.4);
    --home-card-title: #e2ebf0;
    --home-card-text: #b8c9d4;
  }
}

/* The landing page has no sidebar, pager or outbound-link icons. */
.main:has(.chibivue-home) {
  margin-left: 0;
  padding: 0;
  max-width: none;
}

.content:has(.chibivue-home) {
  max-width: none;
  padding: 0;
}

.main:has(.chibivue-home) .pager,
.chibivue-home .ox-external-icon {
  display: none;
}

.chibivue-home {
  width: 100%;
}

.chibivue-home a {
  text-decoration: none;
}

/* Hero
 * -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3rem 1.25rem 4rem;
}

@media (min-width: 960px) {
  .hero-section {
    min-height: 80vh;
    padding: 4rem 2rem;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 960px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

@media (min-width: 960px) {
  .hero-text {
    text-align: left;
  }
}

.content .hero-title {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.1;
}

.gradient-text {
  background: linear-gradient(135deg, #1ab394 0%, #2cc9a8 50%, #5dddc2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: 0;
}

@media (min-width: 640px) {
  .gradient-text {
    font-size: 4rem;
  }
}

@media (min-width: 960px) {
  .gradient-text {
    font-size: 5rem;
  }
}

.version-badge {
  display: inline-block;
  vertical-align: super;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  margin-left: 0.5rem;
  background: var(--home-badge-bg);
  border: 1px solid var(--home-badge-border);
  border-radius: 6px;
  color: var(--home-badge-text);
}

@media (min-width: 640px) {
  .version-badge {
    font-size: 0.875rem;
  }
}

@media (min-width: 960px) {
  .version-badge {
    font-size: 1rem;
  }
}

.content .hero-tagline {
  font-size: 1rem;
  color: var(--home-tagline);
  margin: 1.5rem 0 2rem;
  line-height: 1.7;
  max-width: 500px;
}

@media (min-width: 640px) {
  .content .hero-tagline {
    font-size: 1.125rem;
  }
}

@media (min-width: 960px) {
  .content .hero-tagline {
    font-size: 1.25rem;
    margin: 1.5rem 0 2.5rem;
  }
}

@media (max-width: 959px) {
  .content .hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 960px) {
  .hero-actions {
    justify-content: flex-start;
  }
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.content .btn-primary {
  background: #1ab394;
  color: #ffffff;
  border: 2px solid transparent;
}

.content .btn-primary:hover {
  background: #159d82;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-primary .arrow {
  transition: transform 0.2s ease;
}

.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.content .btn-secondary {
  background: var(--home-btn-secondary-bg);
  color: var(--home-btn-secondary-text);
  border: 2px solid var(--home-btn-secondary-border);
}

.content .btn-secondary:hover {
  background: var(--home-btn-secondary-hover-bg);
  border-color: #2cc9a8;
  color: var(--home-btn-secondary-hover-text);
}

/* Hero visual: stairs + mascot */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  order: 1;
  margin-top: 1rem;
}

@media (min-width: 960px) {
  .hero-visual {
    order: 0;
    margin-top: 0;
  }
}

.stairs-container {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 240px;
}

@media (min-width: 640px) {
  .stairs-container {
    max-width: 400px;
    height: 350px;
  }
}

.stair {
  position: absolute;
  width: 90px;
  height: 22px;
  background: linear-gradient(180deg, #2cc9a8 0%, #1ab394 100%);
  border-radius: 4px;
  animation: stairAppear 0.6s ease-out forwards;
  opacity: 0;
}

@media (min-width: 640px) {
  .stair {
    width: 120px;
    height: 30px;
  }
}

.stair-1 {
  bottom: 20px;
  left: 4%;
  animation-delay: 0.1s;
}

.stair-2 {
  bottom: 55px;
  left: 17%;
  animation-delay: 0.2s;
}

.stair-3 {
  bottom: 90px;
  left: 30%;
  animation-delay: 0.3s;
}

.stair-4 {
  bottom: 125px;
  left: 40%;
  animation-delay: 0.4s;
}

.stair-5 {
  bottom: 160px;
  left: 50%;
  animation-delay: 0.5s;
}

@media (min-width: 640px) {
  .stair-1 {
    bottom: 20px;
    left: 0;
  }

  .stair-2 {
    bottom: 70px;
    left: 40px;
  }

  .stair-3 {
    bottom: 120px;
    left: 80px;
  }

  .stair-4 {
    bottom: 170px;
    left: 120px;
  }

  .stair-5 {
    bottom: 220px;
    left: 160px;
  }
}

@keyframes stairAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateX(-20deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.mascot-container {
  position: absolute;
  bottom: 170px;
  left: 50%;
  transform: translateX(-50%);
  animation: mascotBounce 2s ease-in-out infinite;
  animation-delay: 0.6s;
}

@media (min-width: 640px) {
  .mascot-container {
    bottom: 230px;
    left: 140px;
    transform: none;
    animation-name: mascotBounceWide;
  }
}

.content img.mascot {
  width: 80px;
  height: auto;
  margin: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

@media (min-width: 640px) {
  .content img.mascot {
    width: 100px;
  }
}

.content img.mascot:hover {
  transform: scale(1.05) rotate(-5deg);
}

@keyframes mascotBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

@keyframes mascotBounceWide {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.code-snippets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.snippet {
  position: absolute;
  padding: 0.5rem 1rem;
  background: var(--home-snippet-bg);
  border: 1px solid var(--home-snippet-border);
  border-radius: 6px;
  font-size: 0.75rem;
  animation: float 4s ease-in-out infinite;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  display: none;
}

.content .snippet code {
  font-family: "Fira Code", "Consolas", monospace;
  font-size: inherit;
  color: var(--home-snippet-text);
  background: none;
  border: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .snippet {
    display: block;
    font-size: 0.85rem;
  }
}

.snippet-1 {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.snippet-2 {
  top: 30%;
  right: 0;
  animation-delay: 1.3s;
}

.snippet-3 {
  bottom: 10%;
  left: 0;
  animation-delay: 2.6s;
}

@media (min-width: 640px) {
  .snippet-1 {
    top: 5%;
    left: auto;
    right: 0;
  }

  .snippet-2 {
    top: 35%;
    right: -5%;
  }

  .snippet-3 {
    bottom: 25%;
    left: auto;
    right: 5%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

/* Features
 * -------------------------------------------------------------------------- */

.features-section {
  padding: 3rem 1.25rem 4rem;
  background: var(--home-features-bg);
}

@media (min-width: 640px) {
  .features-section {
    padding: 4rem 2rem 6rem;
  }
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 960px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.feature-card {
  position: relative;
  padding: 1.75rem;
  background: var(--home-card-bg);
  border: 1px solid var(--home-card-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--home-card-hover-border);
}

.feature-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #1ab394;
  background: rgba(26, 179, 148, 0.12);
  border-radius: 12px;
}

.icon-content {
  position: relative;
  font-size: 1.75rem;
  z-index: 1;
}

.content .feature-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--home-card-title);
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.content .feature-description {
  font-size: 0.9rem;
  color: var(--home-card-text);
  line-height: 1.7;
  margin: 0;
}

.feature-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1ab394 0%, #2cc9a8 50%, #5dddc2 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.feature-card:hover .feature-hover-effect {
  transform: scaleX(1);
}

@media (max-width: 639px) {
  .feature-card {
    padding: 1.25rem;
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
  }

  .content .feature-title {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stair {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .mascot-container,
  .snippet {
    animation: none;
  }
}