/* ============================================================
   DESIGN TOKENS — single source of truth for colors and spacing
   ============================================================ */
:root {
  --accent:    #2563EB;   /* Blue: badges, buttons, borders, highlights */
  --black:     #111111;   /* Primary text and strong UI elements */
  --white:     #FFFFFF;   /* Page background */
  --gray-bg:   #F5F5F5;   /* Card and code-block backgrounds */
  --gray-mid:  #E0E0E0;   /* Dividers, subtle borders */
  --gray-mute: #777777;   /* Secondary / caption text */
  --max-w:     1100px;    /* Maximum content width for all sections */
  --radius:    8px;       /* Shared border-radius for cards */
}


/* ============================================================
   RESET — remove browser default margin, padding, box model quirks
   ============================================================ */
*,                          /* Every element */
*::before,                  /* And its before pseudo-element */
*::after {                  /* And its after pseudo-element */
  box-sizing: border-box;   /* Padding and border included in element width */
  margin: 0;                /* Remove default margin */
  padding: 0;               /* Remove default padding */
}

ul {
  list-style: none; /* Remove bullet points globally */
}

a {
  text-decoration: none; /* Remove underlines from all links */
  color: inherit;        /* Links inherit surrounding text color */
}

img {
  display: block;   /* Removes inline image gap */
  max-width: 100%;  /* Images never overflow their container */
}


/* ============================================================
   BASE — typography, background, text color
   ============================================================ */
body {
  font-family: 'Inter', sans-serif;        /* Inter from Google Fonts */
  background-color: var(--white);          /* White page background */
  color: var(--black);                     /* Default text color */
  line-height: 1.6;                        /* Comfortable reading line height */
  -webkit-font-smoothing: antialiased;     /* Smoother text on macOS/iOS */
  -moz-osx-font-smoothing: grayscale;      /* Smoother text on Firefox macOS */
}


/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;                      /* Sticks to top of viewport on scroll */
  top: 0;                                /* Sits at the very top */
  z-index: 100;                          /* Above all page content */
  background: var(--white);             /* White fill so content scrolls under it */
  border-bottom: 2px solid var(--accent); /* Orange-red accent line at bottom */
  display: flex;                         /* Logo left, links right */
  align-items: center;                   /* Vertically center both sides */
  justify-content: space-between;        /* Push logo and links to opposite ends */
  padding: 1rem 2.5rem;                  /* Comfortable vertical and horizontal padding */
}

.navbar__logo {
  font-size: 1.2rem;        /* Slightly larger than body text */
  font-weight: 800;         /* Heavy weight for brand feel */
  letter-spacing: -0.03em;  /* Tight tracking for a modern logotype look */
  color: var(--black);      /* Solid black logo */
}

.navbar__links {
  display: flex;  /* Horizontal link row */
  gap: 2.5rem;    /* Generous spacing between links */
}

.navbar__links a {
  font-size: 0.875rem;   /* Slightly smaller than body text */
  font-weight: 500;      /* Medium weight */
  color: var(--black);   /* Black link text */
}

.navbar__links a:hover {
  color: var(--accent); /* Accent color on hover for interactivity cue */
}



/* ============================================================
   BUTTONS — shared base + filled and outlined variants
   ============================================================ */
.btn {
  display: inline-block;          /* Behaves like a block but sits inline */
  padding: 0.8rem 1.85rem;        /* Comfortable click target */
  font-family: 'Inter', sans-serif; /* Override any inherited font */
  font-size: 0.9rem;              /* Slightly smaller than body */
  font-weight: 600;               /* Semi-bold label */
  border-radius: 6px;             /* Softly rounded corners */
  border: 2px solid transparent; /* Reserve border space for consistency */
  cursor: pointer;                /* Pointer cursor for all button-like links */
  letter-spacing: 0.01em;         /* Slight tracking on labels */
  transition: background 0.15s, color 0.15s, border-color 0.15s; /* Smooth state change */
}

.btn--filled {
  background: var(--accent);  /* Solid orange-red fill */
  color: var(--white);        /* White label on orange-red */
  border-color: var(--accent); /* Border matches fill so hover works cleanly */
}

.btn--filled:hover {
  background: #1d4ed8;     /* Slightly darker blue on hover */
  border-color: #1d4ed8;   /* Keep border in sync */
}

.btn--outlined {
  background: transparent;  /* Transparent fill */
  color: var(--black);      /* Black label */
  border-color: var(--black); /* Black border outline */
}

.btn--outlined:hover {
  background: var(--black); /* Fill black on hover */
  color: var(--white);      /* White label on black fill */
}


/* ============================================================
   SECTION SHELL — shared spacing for main content sections
   ============================================================ */
.section {
  padding: 5.5rem 2.5rem;       /* Generous vertical breathing room */
  max-width: var(--max-w);      /* Constrain content width */
  margin: 0 auto;               /* Center section horizontally */
}

.section__title {
  font-size: 2rem;              /* Section heading size */
  font-weight: 800;             /* Bold heading */
  letter-spacing: -0.03em;     /* Tight tracking */
  margin-bottom: 0.5rem;       /* Small gap to subtitle */
}

.section__subtitle {
  font-size: 1rem;             /* Normal body size */
  color: #555555;              /* Medium gray — secondary text */
  margin-bottom: 3rem;         /* Space before section content */
}

/* Download section is centered, unlike the rest */
.section--download {
  text-align: center; /* Center text and children */
}


/* ============================================================
   PAGE SWITCHING — show/hide pages
   ============================================================ */
.page {
  display: none;
}

.page--active {
  display: block;
}

/* Active nav link highlight */
.nav-link--active {
  color: var(--accent) !important;
  font-weight: 700;
}

/* Subheadings inside the Dataset section: Modalities, Download */
.dataset-subheading {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--black);
  margin-top: 4rem;
  margin-bottom: 0.4rem;
  border-left: 4px solid var(--accent);
  padding-left: 0.75rem;
}



/* ============================================================
   ABOUT SECTION — compact layout so grid fits in one viewport
   ============================================================ */

/* Tighten vertical padding so the grid has maximum space */
#about.section {
  padding-top: 1.75rem;
  padding-bottom: 0;
}

.about-body {
  max-width: 680px;
}

.about-body__question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.about-body__text {
  font-size: 0.9rem;
  color: #444444;
  line-height: 1.65;
}


/* ============================================================
   EXAMPLE VIDEO GRID — 4×4 viewport-fitted grid
   ============================================================ */
.example-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  margin-top: 1rem;
  /* Fill remaining viewport: subtract navbar (64px) + top padding + text block */
  height: 58vh;
  background: var(--black);
  border-radius: var(--radius);
  overflow: hidden;
}

.example-cell {
  position: relative;
  /* No fixed aspect-ratio — rows stretch to fill the grid height */
  background: #1a1a1a;
  overflow: hidden;
}

.example-cell__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.example-cell__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0.5rem 0.3rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
}

.example-cell--empty {
  background: #111111;
}

@media (max-width: 600px) {
  .example-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    height: auto;
  }
  .example-cell {
    aspect-ratio: 16 / 9;
  }
}


/* ============================================================
   BADGE — orange-red pill label for card tagging
   ============================================================ */
.badge {
  display: inline-block;          /* Shrinks to content size */
  background: var(--accent);      /* Orange-red background */
  color: var(--white);            /* White text on orange-red */
  font-size: 0.68rem;             /* Very small type */
  font-weight: 700;               /* Bold */
  letter-spacing: 0.1em;         /* Wide-spaced all-caps text */
  text-transform: uppercase;      /* Force uppercase */
  padding: 0.3rem 0.75rem;        /* Comfortable horizontal padding */
  border-radius: 4px;             /* Slightly rounded pill */
  margin-bottom: 1.5rem;          /* Space before card content */
}


/* ============================================================
   DATASET CARD — large gray card, two-column inner layout
   ============================================================ */
.dataset-card {
  background: var(--gray-bg);    /* Light gray background distinguishes card */
  border-radius: 12px;           /* Rounded card corners */
  padding: 2.75rem;              /* Internal whitespace */
}

.dataset-card__inner {
  display: grid;                              /* CSS Grid for two columns */
  grid-template-columns: 1fr 1.1fr;          /* Right column slightly wider for images */
  gap: 3rem;                                  /* Generous gutter between columns */
  align-items: start;                         /* Align both columns to their tops */
}

.dataset-card__name {
  font-size: 1.5rem;        /* Card-level heading */
  font-weight: 700;         /* Bold */
  letter-spacing: -0.025em; /* Tight tracking */
  margin-bottom: 0.85rem;   /* Space before description */
}

.dataset-card__desc {
  font-size: 0.95rem;    /* Slightly smaller than body */
  color: #444444;        /* Dark gray for body text */
  line-height: 1.75;     /* Loose for readability */
  margin-bottom: 2rem;   /* Space before stats grid */
}

/* ---- Stats Mini-Grid (3 columns × 2 rows) ---- */
.stats-grid {
  display: grid;                          /* Grid for even alignment */
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 1.1rem 1.5rem;                    /* Row gap / column gap */
}

.stats-grid__item {
  display: flex;            /* Stack value above key */
  flex-direction: column;  /* Vertical stack */
  gap: 0.15rem;             /* Tight gap */
}

.stats-grid__value {
  font-size: 1.35rem;      /* Big readable number */
  font-weight: 800;         /* Extra-bold */
  color: var(--accent);    /* Orange-red numbers */
  line-height: 1;           /* No extra gap */
}

.stats-grid__key {
  font-size: 0.72rem;        /* Very small label */
  font-weight: 500;          /* Medium */
  color: var(--gray-mute);  /* Muted gray */
}

/* ---- Frame Image Grid (3 columns) ---- */
.dataset-card__right {
  display: grid;                          /* Grid for frame thumbnails */
  grid-template-columns: repeat(3, 1fr); /* Three per row */
  gap: 0.75rem;                           /* Gap between frames */
}

.frame-item {
  display: flex;            /* Stack image above caption */
  flex-direction: column;  /* Vertical stack */
  gap: 0.35rem;             /* Gap between image and label */
}

.frame-item__img {
  width: 100%;              /* Fill grid column width */
  aspect-ratio: 4 / 3;     /* Consistent image proportion */
  object-fit: cover;        /* Crop to fill aspect ratio cleanly */
  border-radius: 4px;       /* Softly rounded corners */
  border: 1px solid var(--gray-mid); /* Thin border to frame the image */
}

.frame-item__label {
  font-size: 0.68rem;       /* Very small caption */
  font-weight: 500;          /* Medium weight */
  color: var(--gray-mute);  /* Muted gray caption */
  text-align: center;        /* Center below the image */
}

/* "View All →" — fills the 6th grid slot */
.frame-item--more {
  border: 1px dashed var(--gray-mid); /* Dashed border signals an action */
  border-radius: 4px;                  /* Match image corner radius */
  display: flex;                        /* Center the text */
  align-items: center;                 /* Vertical center */
  justify-content: center;             /* Horizontal center */
  aspect-ratio: 4 / 3;               /* Same proportion as images */
  color: var(--accent);               /* Accent color text */
  font-size: 0.8rem;                   /* Small label */
  font-weight: 600;                    /* Semi-bold */
}

.frame-item--more:hover {
  background: #fff3ee;      /* Very faint orange tint on hover */
  border-color: var(--accent); /* Accent border on hover */
}


/* ============================================================
   MODALITY CARDS — redesigned three-card row
   ============================================================ */

/* Three equal columns */
.mod-row {
  display: grid;                          /* CSS Grid */
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  gap: 1.5rem;                            /* Gap between cards */
  margin-bottom: 1.25rem;                /* Space before the legend row */
}

/* Individual card: white bg, light #EEEEEE border */
.mod-card {
  background: var(--white);   /* White card background */
  border: 1px solid #EEEEEE; /* Light gray border — much softer than black */
  border-radius: var(--radius); /* Rounded corners */
  overflow: hidden;             /* Top strip clips to border-radius */
}

/* 3px orange-red top strip */
.mod-card__border {
  height: 3px;               /* Thin accent strip */
  background: var(--accent); /* Orange-red */
}

/* Padded content area */
.mod-card__body {
  padding: 1.75rem; /* Internal whitespace */
}

/* Emoji icon */
.mod-card__icon {
  font-size: 1.85rem;     /* Large enough to read clearly */
  display: block;          /* Sits on its own line */
  margin-bottom: 0.85rem; /* Space before card title */
  line-height: 1;          /* No extra line-height for emoji */
}

/* Card heading */
.mod-card__title {
  font-size: 1.05rem;    /* Slightly larger than body */
  font-weight: 700;       /* Bold */
  color: var(--black);   /* Black */
  margin-bottom: 0.5rem; /* Space before description */
}

/* Card description */
.mod-card__desc {
  font-size: 0.855rem;    /* Slightly smaller than body */
  color: #555555;          /* Medium gray */
  line-height: 1.65;       /* Comfortable multi-line */
  margin-bottom: 1.35rem; /* Space before stat rows */
}

/* Stat list container */
.mod-stats {
  list-style: none;        /* No bullet points */
  display: flex;            /* Vertical stack of rows */
  flex-direction: column;  /* Column direction */
}

/* Individual stat row: key left, value right */
.mod-stats li {
  display: flex;                      /* Flex row */
  justify-content: space-between;    /* Key and value at opposite ends */
  align-items: center;               /* Vertically centered */
  font-size: 0.8rem;                  /* Small type */
  padding: 0.45rem 0;                /* Row vertical padding */
  border-bottom: 1px solid #F0F0F0; /* Very light row divider */
}

/* Remove divider after the last stat row */
.mod-stats li:last-child {
  border-bottom: none;
}

/* Stat key: left side, muted gray label */
.mod-stat__key {
  color: #666666;    /* Muted gray */
  font-weight: 500;  /* Medium weight */
}

/* Stat value: right side, bold black */
.mod-stat__val {
  font-weight: 700;    /* Bold */
  color: var(--black); /* Full black */
  font-style: normal;  /* Reset any inherited italic */
}


/* ============================================================
   SEGMENTATION LEGEND — color class label row
   ============================================================ */

/* Horizontal pill row sitting below the cards */
.seg-legend {
  display: flex;                      /* Side-by-side items */
  align-items: center;               /* Vertically centered */
  gap: 2.25rem;                       /* Space between each class item */
  flex-wrap: wrap;                    /* Wrap on narrow screens */
  padding: 0.9rem 1.5rem;            /* Internal padding */
  background: #FAFAFA;               /* Very faint gray background */
  border: 1px solid #EEEEEE;        /* Matching light border */
  border-radius: var(--radius);     /* Rounded corners */
}

/* Each emoji + label pair */
.seg-legend__item {
  display: flex;         /* Emoji and text side by side */
  align-items: center;  /* Vertically center */
  gap: 0.45rem;          /* Gap between emoji and label text */
}

/* Emoji colored circle */
.seg-legend__emoji {
  font-size: 0.95rem;  /* Slightly smaller than body */
  line-height: 1;       /* No extra line-height for emoji */
}

/* Text label beside the emoji */
.seg-legend__label {
  font-size: 0.82rem;   /* Small label */
  font-weight: 500;      /* Medium weight */
  color: var(--black);  /* Black text */
}


/* ============================================================
   DOWNLOAD SECTION — centered buttons + code snippet
   ============================================================ */
.download-buttons {
  display: flex;            /* Side-by-side download buttons */
  justify-content: center;  /* Center the group */
  gap: 1rem;                /* Gap between buttons */
  flex-wrap: wrap;          /* Wrap on narrow screens */
  margin-bottom: 3rem;      /* Space before code block */
}

/* ---- Code Block ---- */
.code-block {
  max-width: 660px;                    /* Constrain code block width */
  margin: 0 auto;                      /* Horizontally center below buttons */
  border: 1px solid var(--gray-mid); /* Outer border around block */
  border-radius: var(--radius);       /* Rounded corners */
  overflow: hidden;                    /* Clips header and pre to border-radius */
  text-align: left;                    /* Code is left-aligned inside centered section */
}

.code-block__header {
  background: var(--gray-bg);          /* Light gray header bar */
  border-bottom: 1px solid var(--gray-mid); /* Separator between header and code */
  padding: 0.6rem 1rem;                /* Header padding */
  display: flex;                        /* Language label left, copy button right */
  justify-content: space-between;       /* Push them apart */
  align-items: center;                  /* Vertically center both */
}

.code-block__lang {
  font-size: 0.72rem;          /* Small label */
  font-weight: 700;             /* Bold */
  letter-spacing: 0.08em;      /* Wide-spaced */
  text-transform: uppercase;   /* ALL CAPS */
  color: var(--gray-mute);     /* Muted gray */
}

.code-block__copy {
  font-family: 'Inter', sans-serif; /* Match page font */
  font-size: 0.72rem;               /* Small button label */
  font-weight: 600;                  /* Semi-bold */
  color: var(--accent);             /* Orange-red text */
  background: transparent;          /* No fill */
  border: 1px solid var(--accent);  /* Orange-red border */
  border-radius: 4px;               /* Rounded corners */
  padding: 0.2rem 0.65rem;          /* Small padding */
  cursor: pointer;                   /* Pointer cursor */
  transition: background 0.15s, color 0.15s; /* Smooth hover */
}

.code-block__copy:hover {
  background: var(--accent); /* Fill orange-red on hover */
  color: var(--white);       /* White text on fill */
}

.code-block__pre {
  background: var(--white);              /* White code background */
  padding: 1.4rem 1.25rem;              /* Inner padding around code */
  overflow-x: auto;                      /* Horizontal scroll if code is long */
  font-family: 'Courier New', monospace; /* Monospace font for code */
  font-size: 0.82rem;                    /* Slightly smaller than body */
  line-height: 1.75;                     /* Loose line height for code readability */
  color: var(--black);                   /* Black code text */
  tab-size: 4;                           /* 4-space tabs */
}


/* ============================================================
   FOOTER — black bar, tagline left, links right
   ============================================================ */
.footer {
  background: var(--black);     /* Solid black footer */
  color: var(--white);          /* White text */
  padding: 1.5rem 2.5rem;       /* Comfortable padding */
  display: flex;                 /* Tagline left, links right */
  justify-content: space-between; /* Push them to opposite ends */
  align-items: center;           /* Vertically center */
}

.footer__text {
  font-size: 0.875rem;  /* Small print */
  color: #AAAAAA;       /* Muted light gray on black */
}

.footer__links {
  display: flex;  /* Side-by-side links */
  gap: 1.75rem;   /* Gap between footer links */
}

.footer__link {
  font-size: 0.875rem;  /* Match tagline text size */
  font-weight: 500;      /* Medium weight */
  color: #AAAAAA;        /* Muted gray to start */
}

.footer__link:hover {
  color: var(--accent); /* Accent color highlight on hover */
}


/* ============================================================
   SECTION TITLE — accent left-border variant
   ============================================================ */
.section__title--accent {
  border-left: 4px solid var(--accent); /* Orange-red vertical rule left of title */
  padding-left: 0.75rem;                /* Space text away from the border */
}


/* ============================================================
   CORE DATASET CARD (cd-card)
   ============================================================ */

/* Outer card: light gray, rounded, padded */
.cd-card {
  background: var(--gray-bg); /* #F5F5F5 card background */
  border-radius: 12px;         /* Rounded corners */
  padding: 2.75rem;            /* Internal whitespace */
}

/* Two-column inner layout: left info, right frame grid */
.cd-card__inner {
  display: grid;                     /* CSS Grid */
  grid-template-columns: 1fr 1fr;   /* Left and right columns are equal width */
  gap: 3rem;                          /* Gutter between the two columns */
  align-items: start;                /* Both columns start at the top */
}

/* Dataset name heading inside the card */
.cd-card__title {
  font-size: 1.6rem;        /* Prominent display heading */
  font-weight: 800;          /* Extra-bold */
  letter-spacing: -0.03em;  /* Tight tracking for large text */
  color: var(--black);       /* Solid black */
  margin-top: 0.5rem;        /* Breathing room below the badge */
  margin-bottom: 0.85rem;   /* Space before the description */
}

/* Description paragraph */
.cd-card__desc {
  font-size: 0.95rem;     /* Slightly smaller than body */
  color: #444444;          /* Dark gray — secondary to the heading */
  line-height: 1.75;       /* Loose line height for readability */
  margin-bottom: 1.85rem; /* Space before the stats grid */
}


/* ============================================================
   CORE DATASET STATS GRID — 2 columns × 3 rows
   ============================================================ */

/* Grid wrapper: two equal columns */
.cd-stats {
  display: grid;                          /* CSS Grid */
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 1.1rem 2rem;                      /* Row gap / column gap */
  margin-bottom: 2rem;                   /* Space before the tag chips */
}

/* Individual stat block: value stacked above key */
.cd-stat {
  display: flex;            /* Flex column to stack vertically */
  flex-direction: column;  /* Vertical stack */
  gap: 0.15rem;             /* Tight gap between number and label */
}

/* Large orange-red stat number */
.cd-stat__value {
  font-size: 1.4rem;       /* Large and readable */
  font-weight: 800;         /* Extra-bold */
  color: var(--accent);    /* Orange-red accent color */
  line-height: 1;           /* No extra spacing needed */
}

/* Small uppercase stat key label */
.cd-stat__key {
  font-size: 0.72rem;        /* Very small */
  font-weight: 500;          /* Medium weight */
  color: var(--gray-mute);  /* Muted gray */
  text-transform: uppercase; /* ALL CAPS styling */
  letter-spacing: 0.04em;    /* Slight wide-spacing for caps */
}


/* ============================================================
   CORE DATASET TAG CHIPS — outlined keyword pills
   ============================================================ */

/* Horizontal row of chips */
.cd-tags {
  display: flex;    /* Side-by-side chips */
  gap: 0.5rem;      /* Gap between each chip */
  flex-wrap: wrap;  /* Wrap if container is too narrow */
}

/* Individual chip: no fill, black outline */
.cd-tag {
  display: inline-block;              /* Shrinks to content */
  font-size: 0.68rem;                 /* Very small label */
  font-weight: 700;                   /* Bold */
  letter-spacing: 0.07em;            /* Wide-spaced uppercase feel */
  text-transform: uppercase;         /* ALL CAPS */
  padding: 0.3rem 0.75rem;           /* Horizontal padding for pill shape */
  border: 1.5px solid var(--black);  /* Thin solid black border */
  border-radius: 4px;                 /* Softly rounded corners */
  color: var(--black);               /* Black text */
}


/* ============================================================
   CORE DATASET FRAME GRID — 2 columns, auto rows (2×3)
   ============================================================ */

/* Grid wrapper: 2 columns so 6 images make 3 rows */
.cd-frames {
  display: grid;                          /* CSS Grid */
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 0.85rem;                           /* Gap between frame cells */
}

/* Individual frame figure: image stacked above caption */
.cd-frame {
  display: flex;            /* Flex column */
  flex-direction: column;  /* Vertical stack */
  gap: 0.4rem;              /* Space between image and label */
}

/* Frame thumbnail image */
.cd-frame__img {
  width: 100%;               /* Fill its grid column completely */
  aspect-ratio: 4 / 3;     /* Consistent 4:3 ratio across all frames */
  object-fit: cover;         /* Crop to fill — no letterboxing */
  border-radius: 6px;        /* Slight rounding as requested */
  border: 1px solid var(--gray-mid); /* Subtle gray border around each frame */
}

/* Small black label below each frame */
.cd-frame__label {
  font-size: 0.72rem;   /* Small caption text */
  font-weight: 500;      /* Medium weight */
  color: var(--black);  /* Black label as requested */
  text-align: center;    /* Center below the image */
}


/* ============================================================
   HH1 CORE DATASET CARD — HomeHands-1 card at top of Dataset page
   ============================================================ */

/* Outer card: light gray background, generous padding */
.hh1-card {
  background: var(--gray-bg);
  border-radius: 12px;
  padding: 2.5rem 2.5rem 0 2.5rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

/* Two equal columns with a hairline divider between them */
.hh1-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

/* Left column: content + right border acts as divider */
.hh1-card__left {
  padding-right: 2.5rem;
  padding-bottom: 2.5rem;
  border-right: 1px solid var(--gray-mid);
}

/* Right column */
.hh1-card__right {
  padding-left: 2.5rem;
}

/* Dataset name — large bold heading */
.hh1-card__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--black);
  margin-top: 0.6rem;
  margin-bottom: 0.85rem;
}

/* Description paragraph */
.hh1-card__desc {
  font-size: 0.92rem;
  color: #444444;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

/* ── Stats grid: 2 columns × 4 rows ── */
.hh1-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-bottom: 1.75rem;
}

/* Individual stat box: dark border, centered content */
.hh1-stat {
  border: 1.5px solid #222222;
  border-radius: 5px;
  padding: 0.55rem 0.5rem 0.45rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Bold "--" placeholder number */
.hh1-stat__num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Small uppercase gray label below the number */
.hh1-stat__label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Task tag chips ── */
.hh1-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Each tag: gray border, black text, rounded */
.hh1-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border: 1.5px solid #cccccc;
  border-radius: 4px;
  color: var(--black);
}

/* ── RGB Videos badge on right side ── */
.hh1-rgb-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* ── 3×2 video grid ── */
.hh1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  border-radius: 8px;
  overflow: hidden;
}

/* Individual cell: fixed aspect ratio, clips content */
.hh1-cell {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #1a1a1a;
  overflow: hidden;
  border-radius: 4px;
}

/* Video fills the cell completely */
.hh1-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Label: white text over gradient at the bottom */
.hh1-cell__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0.5rem 0.35rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Empty placeholder cell: center the "+" icon */
.hh1-cell--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

/* "+" icon in placeholder cells */
.hh1-cell__plus {
  font-size: 1.4rem;
  color: #444444;
  line-height: 1;
}

/* Override label alignment for empty cells — center it */
.hh1-cell--empty .hh1-cell__label {
  position: static;
  background: none;
  padding: 0;
  color: #555555;
  font-size: 0.65rem;
}

/* Responsive: stack the two halves on tablet */
@media (max-width: 860px) {
  .hh1-card__inner {
    grid-template-columns: 1fr;
  }
  .hh1-card__left {
    border-right: none;
    border-bottom: 1px solid var(--gray-mid);
    padding-right: 0;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
  .hh1-card__right {
    padding-left: 0;
  }
}


/* ============================================================
   RESPONSIVE — tablet and mobile adjustments
   ============================================================ */
@media (max-width: 860px) {
  /* Stack core dataset card columns vertically */
  .cd-card__inner {
    grid-template-columns: 1fr; /* Single column layout */
  }

  /* When stacked, switch frames to 3-col to use the wider single column */
  .cd-frames {
    grid-template-columns: repeat(3, 1fr); /* 3 across on mobile single-col */
  }

  /* Stack modality cards vertically */
  .mod-row {
    grid-template-columns: 1fr; /* Single column on tablet/mobile */
  }
}

/* ============================================================
   PIPELINE PAGE — orange-red theme override (#FF4500)
   ============================================================ */

/* Override accent to orange-red on pipeline page */
[data-theme="pipeline"] {
  --accent: #FF4500;
}
[data-theme="pipeline"] .btn--filled:hover {
  background: #cc3700;
  border-color: #cc3700;
}

/* ── Pipeline hero ─────────────────────────────────────── */
.pl-hero {
  text-align: center;
  padding: 3.5rem 0 4.5rem;
  max-width: 680px;
  margin: 0 auto;
}
.pl-badge {
  display: inline-block;
  background: #FF4500;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}
.pl-hero__title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--black);
  margin: 0 0 1rem;
}
.pl-hero__sub {
  font-size: 1rem;
  color: #555;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.pl-btn {
  background: #FF4500;
  color: #fff !important;
  border-color: #FF4500;
  text-decoration: none;
}
.pl-btn:hover {
  background: #cc3700;
  border-color: #cc3700;
}

/* ── Pipeline section wrapper + heading ────────────────── */
.pl-section {
  margin-bottom: 4.5rem;
}
.pl-section__title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--black);
  border-left: 4px solid #FF4500;
  padding-left: 0.85rem;
  margin-bottom: 2rem;
}

/* ── Flow diagram ──────────────────────────────────────── */
.pl-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.pl-flow__source-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.pl-flow__steps {
  display: flex;
  align-items: flex-start;
}
.pl-flow__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}
.pl-flow__box {
  background: var(--white);
  border: 1.5px solid #222;
  border-top: 3px solid #FF4500;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.pl-flow__box--source {
  background: #111;
  color: var(--white);
  border-color: #111;
  border-top-color: #FF4500;
  font-size: 0.85rem;
  padding: 0.65rem 1.75rem;
}
.pl-flow__box--out {
  background: var(--gray-bg);
  border-color: #ccc;
  border-top-color: #FF4500;
  font-size: 0.72rem;
  color: #555;
}
.pl-flow__box--combined {
  background: #FF4500;
  color: var(--white);
  border-color: #FF4500;
  border-top-color: #cc3700;
  font-size: 0.72rem;
  font-weight: 700;
}
.pl-flow__v {
  color: #FF4500;
  font-size: 1.1rem;
  line-height: 2;
  font-weight: 700;
}
.pl-flow__h {
  color: #FF4500;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0 0.35rem;
  margin-top: 0.55rem;
  align-self: flex-start;
  line-height: 1.8;
}

/* ── Tool cards grid ────────────────────────────────────── */
.pl-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.pl-tool {
  background: var(--white);
  border: 1.5px solid #ddd;
  border-top: 3px solid #FF4500;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s;
}
.pl-tool:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
}
.pl-tool__badge {
  display: inline-block;
  background: #FF4500;
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  align-self: flex-start;
}
.pl-tool__name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0;
}
.pl-tool__desc {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.65;
  flex: 1;
}
.pl-tool__meta {
  border-top: 1px solid var(--gray-mid);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pl-tool__row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.78rem;
  align-items: baseline;
}
.pl-tool__key {
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  min-width: 52px;
}
.pl-tool__val {
  color: var(--black);
}
.pl-tool__cmd {
  background: #111;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.73rem;
  padding: 0.55rem 0.85rem;
  border-radius: 5px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}
.pl-tool__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.1rem;
}
.pl-tool__link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #FF4500;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.pl-tool__link:hover {
  text-decoration: underline;
}

/* ── Quick Start code block ─────────────────────────────── */
.pl-quickstart {
  position: relative;
  background: #111;
  border-radius: 10px;
  padding: 2rem 2rem 2rem;
  overflow-x: auto;
}
.pl-quickstart__copy {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 1px solid #444;
  color: #aaa;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
  transition: border-color 0.15s, color 0.15s;
}
.pl-quickstart__copy:hover {
  border-color: #FF4500;
  color: #FF4500;
}
.pl-quickstart pre {
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  margin: 0;
  white-space: pre;
}
.pl-comment {
  color: #FF4500;
}

/* ── Models table ───────────────────────────────────────── */
.pl-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1.5px solid #ddd;
}
.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.pl-table thead tr {
  background: #111;
  color: var(--white);
}
.pl-table th {
  padding: 0.85rem 1.1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pl-table td {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #eee;
  color: var(--black);
}
.pl-table tbody tr:nth-child(even) {
  background: var(--gray-bg);
}
.pl-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Output format JSON block ──────────────────────────── */
.pl-json {
  background: #111;
  border-radius: 10px;
  padding: 2rem;
  overflow-x: auto;
}
.pl-json pre {
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  line-height: 1.8;
  margin: 0;
  white-space: pre;
}
.pl-json-key  { color: #7dd3fc; }
.pl-json-str  { color: #86efac; }
.pl-json-num  { color: #fbbf24; }
.pl-json-null { color: #aaa; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .pl-hero__title { font-size: 2.2rem; }
  .pl-tools { grid-template-columns: 1fr; }
  .pl-flow__steps {
    flex-direction: column;
    align-items: center;
  }
  .pl-flow__h {
    transform: rotate(90deg);
    margin-top: 0;
    padding: 0;
  }
}

/* ── Derived Datasets divider ──────────────────────────── */
.derived-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1.5rem;
}
.derived-divider__line {
  flex: 1;
  height: 1px;
  background: var(--gray-mid);
}
.derived-divider__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mute);
  border: 1px solid var(--gray-mid);
  border-radius: 4px;
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
}

/* ── Derived dataset 3-column grid ─────────────────────── */
.derived-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.derived-card {
  background: var(--gray-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.derived-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.derived-card__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.derived-card__thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

/* Closed-caption indicator — bottom-right of derived card thumbnail */
.derived-cc {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
}

.voice-mute-btn {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.60);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background 0.15s;
}

.voice-mute-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.voice-icon {
  width: 1rem;
  height: 1rem;
}

.derived-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
}

.derived-card__body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.derived-card__name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.025em;
}

.derived-card__desc {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.6;
}

/* Compact 2×2 stats for derived cards */
.hh1-stats--sm {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  margin-bottom: 0;
}
.hh1-stats--sm .hh1-stat {
  padding: 0.4rem 0.4rem 0.35rem;
}
.hh1-stats--sm .hh1-stat__num {
  font-size: 0.88rem;
}

@media (max-width: 860px) {
  .derived-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  /* Tighten navbar on very small screens */
  .navbar {
    padding: 1rem 1.25rem; /* Reduce horizontal padding */
  }

  /* Stack nav links if they don't fit */
  .navbar__links {
    gap: 1.25rem; /* Reduce gap between links */
  }

  /* Stack footer vertically */
  .footer {
    flex-direction: column; /* Stack text above links */
    gap: 0.75rem;            /* Gap between rows */
    text-align: center;      /* Center both */
  }

  /* Tighter section padding on mobile */
  .section {
    padding: 3.5rem 1.25rem; /* Reduce padding */
  }

  /* Frames go back to 2-col on very narrow mobile */
  .cd-frames {
    grid-template-columns: repeat(2, 1fr); /* 2-col on narrow screens */
  }
}