/* ==========================================================================
   ProjectPy — Professional Design System
   Author: Souhardya Das
   Inspired by: Vercel, Linear, Stripe
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   DESIGN TOKENS — Light Mode
   ========================================================================== */
[data-md-color-scheme="default"] {

  /* Brand */
  --py-brand-primary:           #4f52d3;
  --py-brand-primary-light:     #7b7ef5;
  --py-brand-primary-dark:      #3539b0;
  --py-brand-accent:            #f5a623;
  --py-brand-accent-light:      #fbbf4a;

  /* Surfaces */
  --py-surface-bg:              #ffffff;
  --py-surface-raised:          #f9fafb;
  --py-surface-overlay:         #f3f4f6;
  --py-surface-border:          #e5e7eb;
  --py-surface-border-strong:   #d1d5db;

  /* Text */
  --py-text-primary:            #0f1117;
  --py-text-secondary:          #4b5563;
  --py-text-tertiary:           #9ca3af;
  --py-text-inverse:            #ffffff;

  /* Code */
  --py-code-bg:                 #f8fafc;
  --py-code-border:             #e2e8f0;
  --py-code-header-bg:          #f1f5f9;
  --py-code-inline-bg:          rgba(79, 82, 211, 0.07);
  --py-code-inline-fg:          #3539b0;
  --py-code-inline-bdr:         rgba(79, 82, 211, 0.18);
  --py-dot-r:                   #ff5f57;
  --py-dot-y:                   #febc2e;
  --py-dot-g:                   #28c840;

  /* Cards */
  --py-card-bg:                 #ffffff;
  --py-card-border:             #e5e7eb;
  --py-card-hover-shadow:       0 8px 32px rgba(79, 82, 211, 0.10), 0 1px 3px rgba(0,0,0,0.04);
  --py-card-hover-border:       rgba(79, 82, 211, 0.35);
  --py-icon-bg:                 rgba(79, 82, 211, 0.08);
  --py-icon-color:              #4f52d3;

  /* Hero */
  --py-hero-bg:                 #f0f1ff;
  --py-hero-dot-color:          rgba(79, 82, 211, 0.20);
  --py-hero-glow:               rgba(79, 82, 211, 0.40);

  /* Example box */
  --py-example-border:          #e2e8f0;
  --py-example-header-bg:       #f8fafc;
  --py-example-title:           #334155;
  --py-terminal-bg:             #0f172a;
  --py-terminal-fg:             #e2e8f0;
  --py-terminal-header-bg:      #1e293b;

  /* Badges */
  --py-badge-bg:                rgba(79, 82, 211, 0.09);
  --py-badge-fg:                #3539b0;
  --py-badge-border:            rgba(79, 82, 211, 0.22);

  /* Status colors */
  --py-green-bg:                #ecfdf5;
  --py-green-fg:                #065f46;
  --py-green-border:            #a7f3d0;
  --py-yellow-bg:               #fffbeb;
  --py-yellow-fg:               #92400e;
  --py-yellow-border:           #fde68a;
  --py-red-bg:                  #fef2f2;
  --py-red-fg:                  #991b1b;
  --py-red-border:              #fecaca;
  --py-gray-bg:                 #f8fafc;
  --py-gray-fg:                 #475569;
  --py-gray-border:             #cbd5e1;

  /* MkDocs Material overrides */
  --md-primary-fg-color:        #4f52d3;
  --md-primary-fg-color--light: #7b7ef5;
  --md-primary-fg-color--dark:  #3539b0;
  --md-accent-fg-color:         #f5a623;
}

/* ==========================================================================
   DESIGN TOKENS — Dark Mode
   ========================================================================== */
[data-md-color-scheme="slate"] {

  /* Brand */
  --py-brand-primary:           #7b7ef5;
  --py-brand-primary-light:     #a5a8ff;
  --py-brand-primary-dark:      #5a5de8;
  --py-brand-accent:            #f5a623;
  --py-brand-accent-light:      #fbbf4a;

  /* Surfaces */
  --py-surface-bg:              #0d0f1a;
  --py-surface-raised:          #111420;
  --py-surface-overlay:         #161b2e;
  --py-surface-border:          rgba(255, 255, 255, 0.07);
  --py-surface-border-strong:   rgba(255, 255, 255, 0.12);

  /* Text */
  --py-text-primary:            #e8eaf6;
  --py-text-secondary:          #9198b3;
  --py-text-tertiary:           #5a6080;
  --py-text-inverse:            #0d0f1a;

  /* Code */
  --py-code-bg:                 #0b0d16;
  --py-code-border:             rgba(255, 255, 255, 0.07);
  --py-code-header-bg:          #111420;
  --py-code-inline-bg:          rgba(123, 126, 245, 0.12);
  --py-code-inline-fg:          #a5a8ff;
  --py-code-inline-bdr:         rgba(123, 126, 245, 0.22);
  --py-dot-r:                   #ff5f57;
  --py-dot-y:                   #febc2e;
  --py-dot-g:                   #28c840;

  /* Cards */
  --py-card-bg:                 rgba(17, 20, 32, 0.8);
  --py-card-border:             rgba(255, 255, 255, 0.07);
  --py-card-hover-shadow:       0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(123, 126, 245, 0.2);
  --py-card-hover-border:       rgba(123, 126, 245, 0.4);
  --py-icon-bg:                 rgba(123, 126, 245, 0.12);
  --py-icon-color:              #a5a8ff;

  /* Hero */
  --py-hero-bg:                 #0d0f1a;
  --py-hero-dot-color:          rgba(123, 126, 245, 0.10);
  --py-hero-glow:               rgba(123, 126, 245, 0.22);

  /* Example box */
  --py-example-border:          rgba(255, 255, 255, 0.07);
  --py-example-header-bg:       rgba(255, 255, 255, 0.03);
  --py-example-title:           #cdd6f4;
  --py-terminal-bg:             #060810;
  --py-terminal-fg:             #e2e8f0;
  --py-terminal-header-bg:      #0b0d16;

  /* Badges */
  --py-badge-bg:                rgba(123, 126, 245, 0.12);
  --py-badge-fg:                #a5a8ff;
  --py-badge-border:            rgba(123, 126, 245, 0.25);

  /* Status colors */
  --py-green-bg:                rgba(16, 185, 129, 0.10);
  --py-green-fg:                #6ee7b7;
  --py-green-border:            rgba(16, 185, 129, 0.25);
  --py-yellow-bg:               rgba(245, 158, 11, 0.10);
  --py-yellow-fg:               #fcd34d;
  --py-yellow-border:           rgba(245, 158, 11, 0.25);
  --py-red-bg:                  rgba(239, 68, 68, 0.10);
  --py-red-fg:                  #fca5a5;
  --py-red-border:              rgba(239, 68, 68, 0.22);
  --py-gray-bg:                 rgba(148, 163, 184, 0.07);
  --py-gray-fg:                 #94a3b8;
  --py-gray-border:             rgba(148, 163, 184, 0.18);

  /* Coverage stat */
  --py-stat-covered-bg:         rgba(16, 185, 129, 0.08);
  --py-stat-covered-clr:        #6ee7b7;
  --py-stat-partial-bg:         rgba(245, 158, 11, 0.08);
  --py-stat-partial-clr:        #fcd34d;
  --py-stat-notyet-bg:          rgba(148, 163, 184, 0.06);
  --py-stat-notyet-clr:         #94a3b8;

  /* MkDocs Material overrides */
  --md-primary-fg-color:        #7b7ef5;
  --md-primary-fg-color--light: #a5a8ff;
  --md-primary-fg-color--dark:  #5a5de8;
  --md-accent-fg-color:         #f5a623;
  --md-default-bg-color:        #0d0f1a;
}

/* ==========================================================================
   LIGHT MODE — Coverage stat card aliases
   ========================================================================== */
[data-md-color-scheme="default"] {
  --py-stat-covered-bg:   var(--py-green-bg);
  --py-stat-covered-clr:  var(--py-green-fg);
  --py-stat-partial-bg:   var(--py-yellow-bg);
  --py-stat-partial-clr:  var(--py-yellow-fg);
  --py-stat-notyet-bg:    var(--py-gray-bg);
  --py-stat-notyet-clr:   var(--py-gray-fg);
}

/* ==========================================================================
   ANIMATIONS / KEYFRAMES
   ========================================================================== */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 0.80; transform: scale(1.06); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes badge-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   GLOBAL BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page background */
.md-main {
  background-color: var(--py-surface-bg);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.md-header {
  background-color: var(--py-surface-bg) !important;
  border-bottom: 1px solid var(--py-surface-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: clip;
}

[data-md-color-scheme="default"] .md-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(13, 15, 26, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.md-header__inner {
  max-width: 100% !important;
  padding: 0 1.5rem !important;
}

.md-header__title {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em;
  color: var(--py-text-primary) !important;
}

[data-md-color-scheme="default"] .md-header__title {
  color: #0f172a !important;
}

/* Logo glow */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  filter: drop-shadow(0 0 6px rgba(123, 126, 245, 0.4));
  transition: filter 0.2s ease;
}

.md-header__button.md-logo:hover img,
.md-header__button.md-logo:hover svg {
  filter: drop-shadow(0 0 10px rgba(123, 126, 245, 0.7));
}

/* All header icon buttons: Theme Toggle, Drawer, Search */
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__button.md-icon,
[data-md-color-scheme="default"] .md-header label.md-header__button,
[data-md-color-scheme="default"] .md-header label[for^="__palette_"],
[data-md-color-scheme="default"] .md-header label[for="__drawer"] {
  color: #1e293b !important;
  opacity: 1 !important;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

[data-md-color-scheme="default"] .md-header__button svg,
[data-md-color-scheme="default"] .md-header__button.md-icon svg,
[data-md-color-scheme="default"] .md-header label.md-header__button svg,
[data-md-color-scheme="default"] .md-header label[for^="__palette_"] svg,
[data-md-color-scheme="default"] .md-header label[for="__drawer"] svg {
  fill: #1e293b !important;
  color: #1e293b !important;
  opacity: 1 !important;
}

[data-md-color-scheme="default"] .md-header__button:hover,
[data-md-color-scheme="default"] .md-header label.md-header__button:hover {
  background-color: rgba(15, 23, 42, 0.07) !important;
}

/* GitHub Source Repo button */
.md-header .md-source {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

[data-md-color-scheme="default"] .md-header .md-source {
  color: #1e293b !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.3rem 0.5rem !important;
}

[data-md-color-scheme="default"] .md-header .md-source:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-md-color-scheme="default"] .md-header .md-source:hover svg {
  fill: var(--py-brand-primary) !important;
}

[data-md-color-scheme="default"] .md-header .md-source:hover .md-source__repository {
  color: var(--py-brand-primary) !important;
}

[data-md-color-scheme="default"] .md-header .md-source svg {
  fill: #1e293b !important;
  transition: fill 0.2s ease;
}

[data-md-color-scheme="default"] .md-header .md-source__repository {
  color: #1e293b !important;
  font-weight: 600 !important;
  transition: color 0.2s ease;
}

/* Search bar styling */
.md-search__form {
  border-radius: 8px !important;
  background-color: var(--py-surface-overlay) !important;
  border: 1px solid var(--py-surface-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-md-color-scheme="default"] .md-search__input {
  color: #0f172a !important;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

[data-md-color-scheme="default"] .md-search__icon svg {
  fill: #64748b !important;
}

.md-search__form:focus-within {
  border-color: var(--py-brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 82, 211, 0.15) !important;
}

[data-md-color-scheme="default"] .md-search__form:focus-within {
  background-color: #ffffff !important;
  border-color: #4f52d3 !important;
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* --------------------------------------------------------------------------
   Navigation Tabs
   -------------------------------------------------------------------------- */
.md-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: var(--py-surface-bg) !important;
  border-bottom: 1px solid var(--py-surface-border);
}

[data-md-color-scheme="default"] .md-tabs {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--py-surface-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.md-tabs::-webkit-scrollbar { display: none; }

.md-tabs .md-grid {
  max-width: 100% !important;
  padding: 0 1.5rem !important;
}

.md-tabs__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem;
  padding: 0.25rem 0 !important;
}

.md-tabs__item { flex-shrink: 0 !important; }

.md-tabs__link {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center;
  opacity: 1 !important;
}

/* Light mode tabs */
[data-md-color-scheme="default"] .md-tabs__link {
  color: #334155 !important;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #4f52d3 !important;
  background-color: rgba(79, 82, 211, 0.08) !important;
}

[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link,
[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #4f52d3 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 #4f52d3 !important;
}

/* Dark mode tabs */
[data-md-color-scheme="slate"] .md-tabs__link {
  color: #94a3b8 !important;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #a5a8ff !important;
  background-color: rgba(123, 126, 245, 0.12) !important;
}

[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #7b7ef5 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 #7b7ef5 !important;
}

/* Kill any Material-injected opacity on nav items */
.md-tabs__link > * {
  opacity: 1 !important;
}
.md-tabs .md-tabs__link {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.md-nav__title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--py-text-tertiary) !important;
  padding: 0.5rem 0.75rem !important;
  margin-top: 0.5rem;
}

.md-nav__link {
  font-size: 0.855rem !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
  color: var(--py-text-secondary) !important;
}

.md-nav__link:hover {
  color: var(--py-brand-primary) !important;
  background-color: var(--py-icon-bg) !important;
}

.md-nav__link--active {
  color: var(--py-brand-primary) !important;
  font-weight: 600 !important;
  background-color: var(--py-icon-bg) !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.md-typeset {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--py-text-primary);
}

.md-typeset h1 {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--py-surface-border);
  color: var(--py-text-primary);
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--py-surface-border);
  color: var(--py-text-primary);
  position: relative;
  padding-left: 0.9rem;
}

/* Accent bar on h2 */
.md-typeset h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  background: linear-gradient(180deg, var(--py-brand-primary), var(--py-brand-accent));
  border-radius: 2px;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-top: 1.8rem;
  color: var(--py-text-primary);
}

.md-typeset h4 {
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--py-text-secondary);
  margin-top: 1.5rem;
}

.md-typeset p {
  color: var(--py-text-secondary);
}

.md-typeset a {
  color: var(--py-brand-primary);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.md-typeset a:hover {
  color: var(--py-brand-primary-light);
}

/* ==========================================================================
   CODE — INLINE
   ========================================================================== */
.md-typeset :not(pre) > code {
  background: var(--py-code-inline-bg);
  color: var(--py-code-inline-fg);
  border: 1px solid var(--py-code-inline-bdr);
  border-radius: 5px;
  padding: 0.12em 0.45em;
  font-size: 0.83em;
  font-weight: 500;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   CODE BLOCKS — macOS-style with traffic-light dots
   ========================================================================== */
.md-typeset .highlight {
  border-radius: 10px !important;
  border: 1px solid var(--py-code-border) !important;
  margin: 1.4rem 0 !important;
  overflow: hidden !important;
  background-color: var(--py-code-bg) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  position: relative;
}

/* macOS traffic-light bar */
.md-typeset .highlight::before {
  content: '';
  display: block;
  height: 36px;
  background: var(--py-code-header-bg);
  border-bottom: 1px solid var(--py-code-border);
  background-image:
    radial-gradient(circle, var(--py-dot-r) 5px, transparent 5px),
    radial-gradient(circle, var(--py-dot-y) 5px, transparent 5px),
    radial-gradient(circle, var(--py-dot-g) 5px, transparent 5px);
  background-size: 12px 12px, 12px 12px, 12px 12px;
  background-position: 14px center, 30px center, 46px center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  flex-shrink: 0;
}

.md-typeset .highlight pre {
  margin: 0 !important;
  padding: 1rem 1.2rem !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--py-surface-border) transparent;
}

.md-typeset .highlight pre > code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.845rem !important;
  line-height: 1.7 !important;
  font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
  background: transparent !important;
  padding: 0 !important;
}

/* Code with filename label */
.md-typeset .highlight .filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--py-text-tertiary);
  padding: 0 1.2rem;
  height: 36px;
  display: flex;
  align-items: center;
  background: var(--py-code-header-bg);
  border-bottom: 1px solid var(--py-code-border);
}

/* When a filename is present, remove the ::before pseudo-element dots */
.md-typeset .highlight:has(.filename)::before {
  display: none;
}

/* Line numbers */
.md-typeset .linenodiv pre {
  color: var(--py-text-tertiary) !important;
  user-select: none;
  padding-right: 1rem !important;
  border-right: 1px solid var(--py-code-border) !important;
}

/* Copy button */
.md-typeset .highlight .md-clipboard {
  top: 40px;
  color: var(--py-text-tertiary) !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.md-typeset .highlight .md-clipboard:hover {
  color: var(--py-brand-primary) !important;
}

/* --------------------------------------------------------------------------
   Tabbed Code Blocks
   -------------------------------------------------------------------------- */
.md-typeset .tabbed-set {
  border-radius: 10px;
  border: 1px solid var(--py-code-border);
  overflow: hidden;
  margin: 1.4rem 0;
}

.md-typeset .tabbed-labels {
  background: var(--py-code-header-bg);
  border-bottom: 1px solid var(--py-code-border);
  padding: 0 0.5rem;
  display: flex;
  gap: 0;
}

.md-typeset .tabbed-labels > label {
  font-size: 0.80rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  color: var(--py-text-tertiary);
  transition: color 0.15s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--py-brand-primary);
}

.md-typeset .tabbed-set > input:checked + .tabbed-labels > label {
  color: var(--py-brand-primary);
  border-bottom-color: var(--py-brand-primary);
}

.md-typeset .tabbed-content .highlight {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Remove ::before dots inside tabbed sets */
.md-typeset .tabbed-content .highlight::before {
  display: none;
}

/* ==========================================================================
   HOMEPAGE HERO — full-bleed modern developer section
   ========================================================================== */
.py-hero-section {
  position: relative;
  overflow: hidden;
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
  border-bottom: 1px solid var(--py-surface-border);
}

/* Light mode hero: vibrant multi-stop mesh gradient */
[data-md-color-scheme="default"] .py-hero-section {
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(79, 82, 211, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 20%, rgba(245, 166, 35, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 25%, rgba(56, 189, 248, 0.12), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 55%, #eef2ff 100%);
  border-bottom: 1px solid #e2e8f0;
}

/* Dark mode hero: deep navy solid with ambient glow */
[data-md-color-scheme="slate"] .py-hero-section {
  background-color: var(--py-hero-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dot-grid texture */
.py-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--py-hero-dot-color) 1.2px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

[data-md-color-scheme="default"] .py-hero-section::before {
  background-image: radial-gradient(rgba(79, 82, 211, 0.16) 1.2px, transparent 0);
}

/* Primary Ambient Glow Orb */
.py-hero-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 540px;
  background: radial-gradient(ellipse at center, var(--py-hero-glow), transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: glow-pulse 6s ease-in-out infinite;
}

[data-md-color-scheme="default"] .py-hero-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(79, 82, 211, 0.38) 0%,
    rgba(124, 58, 237, 0.16) 45%,
    transparent 70%
  );
}

/* Secondary warm accent glow */
.py-hero-glow-secondary {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 400px;
  height: 350px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Accent line at bottom of hero */
.py-hero-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f52d3, #f5a623, transparent);
  border-radius: 2px;
}

.py-hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  animation: fade-up 0.6s ease both;
}

/* --------------------------------------------------------------------------
   Hero Top Pill Badge
   -------------------------------------------------------------------------- */
.py-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none !important;
  margin-bottom: 1.25rem;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-md-color-scheme="default"] .py-hero-badge {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(79, 82, 211, 0.25);
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(79, 82, 211, 0.08);
}

[data-md-color-scheme="default"] .py-hero-badge:hover {
  border-color: #4f52d3;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 82, 211, 0.18);
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .py-hero-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(123, 126, 245, 0.25);
  color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .py-hero-badge:hover {
  border-color: #7b7ef5;
  background: rgba(123, 126, 245, 0.12);
  transform: translateY(-1px);
}

.py-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: badge-dot-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.py-badge-highlight {
  font-weight: 700;
  color: #4f52d3;
}

[data-md-color-scheme="slate"] .py-badge-highlight {
  color: #a5a8ff;
}

.py-badge-sep {
  color: #94a3b8;
}

.py-badge-text {
  font-weight: 500;
}

.py-badge-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-weight: 700;
}

.py-hero-badge:hover .py-badge-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Hero Titles & Typography
   -------------------------------------------------------------------------- */
.py-hero-title,
.py-hero h1,
.py-hero-section h1 {
  font-size: clamp(2.4rem, 6vw, 3.8rem) !important;
  font-weight: 900 !important;
  border: none !important;
  letter-spacing: -0.045em;
  margin-bottom: 0.5rem !important;
  line-height: 1.08 !important;
  padding: 0 !important;
}

[data-md-color-scheme="default"] .py-hero-title,
[data-md-color-scheme="default"] .py-hero-section h1 {
  background: linear-gradient(125deg, #1e1b4b 0%, #4338ca 35%, #7c3aed 65%, #c2410c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(79, 82, 211, 0.18));
}

[data-md-color-scheme="slate"] .py-hero-title,
[data-md-color-scheme="slate"] .py-hero-section h1 {
  background: linear-gradient(135deg, #ffffff 0%, #a5a8ff 50%, #f5a623 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
  filter: drop-shadow(0 2px 14px rgba(123, 126, 245, 0.35));
}

.py-hero-title::before,
.py-hero-section h1::before { display: none !important; }

/* Hide auto-generated duplicate H1 on homepage */
[data-md-component="content"] .md-content__inner > h1:first-child {
  display: none;
}

.py-hero-tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem) !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="default"] .py-hero-tagline {
  color: #374151 !important;
}

[data-md-color-scheme="slate"] .py-hero-tagline {
  color: #e2e8f0 !important;
}

.py-hero-desc {
  font-size: 1.08rem !important;
  max-width: 680px;
  margin: 0 auto 1.8rem !important;
  line-height: 1.65;
}

[data-md-color-scheme="default"] .py-hero-desc {
  color: #475569 !important;
}

[data-md-color-scheme="slate"] .py-hero-desc {
  color: #94a3b8 !important;
}

.py-hero-desc code {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

[data-md-color-scheme="default"] .py-hero-desc code {
  background: rgba(79, 82, 211, 0.08);
  color: #3730a3;
  border: 1px solid rgba(79, 82, 211, 0.2);
}

[data-md-color-scheme="slate"] .py-hero-desc code {
  background: rgba(123, 126, 245, 0.12);
  color: #c7d2fe;
  border: 1px solid rgba(123, 126, 245, 0.25);
}

/* --------------------------------------------------------------------------
   Hero Actions / Buttons
   -------------------------------------------------------------------------- */
.py-hero-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.py-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.90rem;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.2;
  white-space: nowrap;
}

.py-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Primary Button */
[data-md-color-scheme="default"] .py-btn-primary {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-md-color-scheme="default"] .py-btn-primary:hover {
  background: linear-gradient(135deg, #3730a3 0%, #4f52d3 100%) !important;
  box-shadow: 0 6px 20px rgba(67, 56, 202, 0.45) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

[data-md-color-scheme="slate"] .py-btn-primary {
  background: linear-gradient(135deg, #7b7ef5 0%, #5a5de8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(123, 126, 245, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-md-color-scheme="slate"] .py-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(123, 126, 245, 0.5) !important;
  color: #ffffff !important;
}

/* Outline Buttons */
[data-md-color-scheme="default"] .py-btn-outline {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-md-color-scheme="default"] .py-btn-outline:hover {
  background: #f8fafc !important;
  color: #4338ca !important;
  border-color: #818cf8 !important;
  box-shadow: 0 4px 12px rgba(79, 82, 211, 0.12) !important;
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .py-btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-md-color-scheme="slate"] .py-btn-outline:hover {
  background: rgba(123, 126, 245, 0.1) !important;
  border-color: #7b7ef5 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero Code Window Showcase
   -------------------------------------------------------------------------- */
.py-hero-showcase {
  margin: 0 auto 2rem;
  max-width: 680px;
  border-radius: 12px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-md-color-scheme="default"] .py-hero-showcase {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(79, 82, 211, 0.06);
}

[data-md-color-scheme="slate"] .py-hero-showcase {
  background: #101322;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(123, 126, 245, 0.15);
}

.py-hero-showcase:hover {
  transform: translateY(-3px);
}

[data-md-color-scheme="default"] .py-hero-showcase:hover {
  box-shadow: 0 25px 55px -12px rgba(79, 82, 211, 0.18), 0 0 0 1px rgba(79, 82, 211, 0.15);
}

.py-hero-showcase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
}

[data-md-color-scheme="default"] .py-hero-showcase-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

[data-md-color-scheme="slate"] .py-hero-showcase-bar {
  background: rgba(13, 15, 26, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.py-hero-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.py-hero-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.py-hero-dots .dot-r { background: #ff5f56; }
.py-hero-dots .dot-y { background: #ffbd2e; }
.py-hero-dots .dot-g { background: #27c93f; }

.py-hero-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-md-color-scheme="default"] .py-hero-tab {
  color: #475569;
}

[data-md-color-scheme="slate"] .py-hero-tab {
  color: #94a3b8;
}

.py-hero-badge-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

[data-md-color-scheme="default"] .py-hero-badge-tag {
  background: rgba(79, 82, 211, 0.1);
  color: #4f52d3;
}

[data-md-color-scheme="slate"] .py-hero-badge-tag {
  background: rgba(123, 126, 245, 0.15);
  color: #a5a8ff;
}

.py-hero-code {
  padding: 1.1rem 1.25rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  overflow-x: auto;
  border: none !important;
  border-radius: 0 !important;
}

[data-md-color-scheme="default"] .py-hero-code {
  background: #ffffff !important;
  color: #1e293b !important;
}

[data-md-color-scheme="slate"] .py-hero-code {
  background: #101322 !important;
  color: #e2e8f0 !important;
}

/* Code Syntax Highlighting in Showcase */
.syn-comment { color: #94a3b8; font-style: italic; }
.syn-keyword { color: #d946ef; font-weight: 600; }
.syn-decorator { color: #f59e0b; }
.syn-class { color: #3b82f6; font-weight: 600; }
.syn-builtin { color: #06b6d4; }
.syn-string { color: #10b981; }
.syn-number { color: #f97316; }

[data-md-color-scheme="default"] .syn-keyword { color: #c026d3; }
[data-md-color-scheme="default"] .syn-class { color: #2563eb; }
[data-md-color-scheme="default"] .syn-builtin { color: #0891b2; }
[data-md-color-scheme="default"] .syn-string { color: #059669; }

.py-hero-showcase-output {
  padding: 0.65rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-md-color-scheme="default"] .py-hero-showcase-output {
  background: #f8fafc;
  border-top: 1px dashed #e2e8f0;
  color: #059669;
}

[data-md-color-scheme="slate"] .py-hero-showcase-output {
  background: rgba(13, 15, 26, 0.85);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  color: #34d399;
}

.py-output-prompt {
  font-weight: 700;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Hero Feature Chips
   -------------------------------------------------------------------------- */
.py-hero-chips {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem;
}

.py-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

[data-md-color-scheme="default"] .py-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="default"] .py-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #1e293b;
}

[data-md-color-scheme="slate"] .py-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

[data-md-color-scheme="slate"] .py-chip:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.py-chip svg {
  color: var(--py-brand-primary);
  flex-shrink: 0;
}

.py-hero-meta {
  margin-top: 1.5rem;
  font-size: 0.80rem;
  color: var(--py-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.py-hero-meta::before,
.py-hero-meta::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--py-surface-border);
}

.py-hero-meta a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.py-hero-meta a:hover {
  color: var(--py-brand-primary);
}

/* ==========================================================================
   HOMEPAGE CARDS (Material grid cards overrides)
   ========================================================================== */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid.cards > :not(ol, ul) {
  background: var(--py-card-bg) !important;
  border: 1px solid var(--py-card-border) !important;
  border-radius: 12px !important;
  padding: 1.4rem !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* Gradient top-border strip on cards */
.md-typeset .grid.cards > :is(ul, ol) > li::before,
.md-typeset .grid.cards > :not(ol, ul)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--py-brand-primary), var(--py-brand-accent));
  opacity: 0;
  transition: opacity 0.22s ease;
  border-radius: 12px 12px 0 0;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid.cards > :not(ol, ul):hover {
  box-shadow: var(--py-card-hover-shadow) !important;
  border-color: var(--py-card-hover-border) !important;
  transform: translateY(-3px);
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover::before,
.md-typeset .grid.cards > :not(ol, ul):hover::before {
  opacity: 1;
}

/* Card icon badge */
.md-typeset .grid.cards .lg.middle {
  padding: 8px;
  border-radius: 8px;
  background: var(--py-icon-bg);
  color: var(--py-icon-color);
}

/* ==========================================================================
   CUSTOM CARD GRID (for non-grid-cards usage)
   ========================================================================== */
.py-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  margin: 1.5rem 0;
}

.py-card {
  background: var(--py-card-bg);
  border: 1px solid var(--py-card-border);
  border-radius: 12px;
  padding: 1.4rem;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  color: var(--py-text-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.py-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--py-brand-primary), var(--py-brand-accent));
  opacity: 0;
  transition: opacity 0.22s ease;
  border-radius: 12px 12px 0 0;
}

.py-card:hover {
  box-shadow: var(--py-card-hover-shadow);
  border-color: var(--py-card-hover-border);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--py-text-primary);
}

.py-card:hover::before { opacity: 1; }

.py-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--py-icon-bg);
  color: var(--py-icon-color);
  margin-bottom: 0.9rem;
  flex-shrink: 0;
}

.py-card-icon .twemoji,
.py-card-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.py-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--py-text-primary);
  transition: color 0.15s ease;
  padding-left: 0 !important;
}

/* Disable h2 accent bar inside cards */
.py-card h3::before { display: none !important; }

.py-card:hover h3 { color: var(--py-brand-primary); }

.py-card p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--py-text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   EXAMPLE SHOWCASE BOX + TERMINAL OUTPUT
   ========================================================================== */
.example-box {
  background: var(--py-card-bg);
  border: 1px solid var(--py-example-border);
  border-radius: 10px;
  margin: 1.75rem 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.example-box .example-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.80rem;
  letter-spacing: 0.02em;
  color: var(--py-example-title);
  padding: 0.65rem 1.1rem;
  background: var(--py-example-header-bg);
  border-bottom: 1px solid var(--py-example-border);
}

.example-box .example-title svg,
.example-box .example-title .twemoji {
  width: 15px; height: 15px; fill: currentColor;
}

.example-box .highlight {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* No traffic light inside example box or terminal */
.example-box .highlight::before { display: none; }
.example-box .highlight pre { padding-top: 0.85rem !important; }

.terminal-output-label {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--py-text-tertiary);
  padding: 0.45rem 1.1rem 0.25rem;
  background: var(--py-terminal-header-bg);
  border-top: 1px solid var(--py-example-border);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.terminal-output-label svg,
.terminal-output-label .twemoji {
  width: 13px; height: 13px; fill: currentColor;
}

.terminal-output {
  background-color: var(--py-terminal-bg);
  color: var(--py-terminal-fg);
  padding: 0.85rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.835rem;
  line-height: 1.65;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.py-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--py-badge-bg);
  color: var(--py-badge-fg);
  border: 1px solid var(--py-badge-border);
  border-radius: 20px;
  padding: 0.12em 0.65em;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  vertical-align: middle;
  margin-left: 0.4em;
}

.py-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 20px;
  padding: 0.15em 0.65em;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}

.py-badge svg, .py-badge .twemoji {
  width: 13px; height: 13px; fill: currentColor;
}

.py-badge--success {
  background: var(--py-green-bg);
  color: var(--py-green-fg);
  border-color: var(--py-green-border);
}
.py-badge--warning {
  background: var(--py-yellow-bg);
  color: var(--py-yellow-fg);
  border-color: var(--py-yellow-border);
}
.py-badge--danger {
  background: var(--py-red-bg);
  color: var(--py-red-fg);
  border-color: var(--py-red-border);
}
.py-badge--neutral {
  background: var(--py-gray-bg);
  color: var(--py-gray-fg);
  border-color: var(--py-gray-border);
}

/* ==========================================================================
   COVERAGE STATUS PAGE
   ========================================================================== */
.cov-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 20px;
  padding: 0.2em 0.7em;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}

.cov-badge .twemoji, .cov-badge svg {
  width: 13px; height: 13px; fill: currentColor; flex-shrink: 0;
}

.cov-badge.covered { background: var(--py-green-bg); color: var(--py-green-fg); border-color: var(--py-green-border); }
.cov-badge.partial  { background: var(--py-yellow-bg); color: var(--py-yellow-fg); border-color: var(--py-yellow-border); }
.cov-badge.notyet   { background: var(--py-gray-bg); color: var(--py-gray-fg); border-color: var(--py-gray-border); }
.cov-badge.removed  { background: var(--py-red-bg); color: var(--py-red-fg); border-color: var(--py-red-border); }

/* Coverage summary stat cards — glassmorphism variant */
.coverage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 1.5rem 0 2.5rem;
}

.coverage-stat {
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coverage-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.coverage-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
}

.coverage-stat.covered {
  background: var(--py-stat-covered-bg);
  border-color: var(--py-green-border);
}
.coverage-stat.covered::before { background: var(--py-green-fg); }

.coverage-stat.partial {
  background: var(--py-stat-partial-bg);
  border-color: var(--py-yellow-border);
}
.coverage-stat.partial::before { background: var(--py-yellow-fg); }

.coverage-stat.notyet {
  background: var(--py-stat-notyet-bg);
  border-color: var(--py-gray-border);
}
.coverage-stat.notyet::before { background: var(--py-gray-fg); }

.coverage-stat .stat-icon { margin-bottom: 0.2rem; }
.coverage-stat .stat-icon svg,
.coverage-stat .stat-icon .twemoji { width: 28px; height: 28px; fill: currentColor; }

.coverage-stat.covered .stat-icon { color: var(--py-stat-covered-clr); }
.coverage-stat.partial .stat-icon { color: var(--py-stat-partial-clr); }
.coverage-stat.notyet  .stat-icon { color: var(--py-stat-notyet-clr); }

.coverage-stat .stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.coverage-stat.covered .stat-number { color: var(--py-stat-covered-clr); }
.coverage-stat.partial .stat-number { color: var(--py-stat-partial-clr); }
.coverage-stat.notyet  .stat-number { color: var(--py-stat-notyet-clr); }

.coverage-stat .stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coverage-stat.covered .stat-label { color: var(--py-stat-covered-clr); }
.coverage-stat.partial .stat-label { color: var(--py-stat-partial-clr); }
.coverage-stat.notyet  .stat-label { color: var(--py-stat-notyet-clr); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.md-typeset table:not([class]) {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  margin: 1.4rem 0 2rem;
  border-radius: 10px;
  border: 1px solid var(--py-surface-border);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.md-typeset table:not([class]) th {
  background-color: var(--py-surface-raised);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--py-text-secondary);
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--py-surface-border);
  border-right: 1px solid var(--py-surface-border);
  text-align: left;
}

.md-typeset table:not([class]) th:last-child { border-right: none; }

.md-typeset table:not([class]) td {
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--py-surface-border);
  border-right: 1px solid var(--py-surface-border);
  vertical-align: middle;
  color: var(--py-text-secondary);
}

.md-typeset table:not([class]) td:last-child { border-right: none; }
.md-typeset table:not([class]) tr:last-child td { border-bottom: none; }

/* Striped rows */
.md-typeset table:not([class]) tbody tr:nth-child(even) td {
  background-color: var(--py-surface-raised);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: var(--py-icon-bg) !important;
  transition: background-color 0.12s ease;
}

.md-typeset table:not([class]) td:first-child code {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500;
}

/* ==========================================================================
   ADMONITIONS — polished
   ========================================================================== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px !important;
  font-size: 0.9rem;
  border-width: 0 0 0 3px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 5px 5px 0 0 !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.md-footer {
  background: var(--py-surface-raised) !important;
  border-top: 1px solid var(--py-surface-border);
}

.md-footer-meta {
  background: var(--py-surface-overlay) !important;
}

/* ==========================================================================
   TOC (Table of Contents)
   ========================================================================== */
.md-nav--secondary .md-nav__link {
  font-size: 0.82rem !important;
  color: var(--py-text-tertiary) !important;
  transition: color 0.15s ease;
  padding: 0.2rem 0 !important;
}

.md-nav--secondary .md-nav__link:hover { color: var(--py-brand-primary) !important; }

.md-nav--secondary .md-nav__link--active {
  color: var(--py-brand-primary) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   SCROLL REVEAL — Page Load Animation
   ========================================================================== */
.md-content__inner {
  animation: fade-up 0.4s ease both;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 960px) {
  .py-hero { padding: 3.5rem 1rem 3rem; }
  .py-hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .py-hero p { font-size: 1rem; }
  .coverage-summary-grid { gap: 0.75rem; }
  .coverage-stat .stat-number { font-size: 2rem; }
}

@media screen and (max-width: 600px) {
  .py-hero { padding: 2.5rem 0.75rem 2rem; }
  .py-hero h1 { font-size: 1.8rem; }
  .py-hero p { font-size: 0.94rem; }
  .py-hero-actions { flex-direction: column; align-items: center; gap: 0.5rem; }
  .py-btn { width: 100%; max-width: 280px; justify-content: center; }
  .py-card-grid { grid-template-columns: 1fr; }
  .coverage-summary-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .coverage-stat { flex-direction: row; justify-content: space-between; padding: 0.9rem 1.1rem; }
  .coverage-stat .stat-number { font-size: 1.7rem; }
  .terminal-output { font-size: 0.80rem; padding: 0.65rem 0.9rem; }
  .md-typeset .highlight::before { height: 28px; background-size: 10px 10px, 10px 10px, 10px 10px; background-position: 12px center, 26px center, 40px center; }
}

/* ==========================================================================
   UTILITY — Hide h2 accent bar in specific contexts
   ========================================================================== */
/* No accent bar on very first h2 right after hero */
.py-hero + * + h2::before,
.py-hero + h2::before { display: none; }

/* No accent bar inside admonitions */
.md-typeset .admonition h2::before,
.md-typeset details h2::before { display: none; }

/* No padding-left on h2 inside cards */
.md-typeset .grid h2 { padding-left: 0 !important; }
.md-typeset .grid h2::before { display: none !important; }