/*fern-site-stylesheet*/@font-face {
    font-family: 'FrameGothic';
    src: url('/_fern-files/developer.staging.frame.io/74306710c319c6a89285b5169c6c6365387c61c33fe04b426fb12505430595c1/docs/assets/font1.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FrameGothic';
    src: url('/_fern-files/developer.staging.frame.io/74306710c319c6a89285b5169c6c6365387c61c33fe04b426fb12505430595c1/docs/assets/font1.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FrameGothic';
    src: url('/_fern-files/developer.staging.frame.io/74306710c319c6a89285b5169c6c6365387c61c33fe04b426fb12505430595c1/docs/assets/font1.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 25px;
  --font-body: 'FrameGothic', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'FrameGothic', 'FrameGothic', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


:root {
  --accent-1: #010101;
  --accent-2: #151515;
  --accent-3: #202020;
  --accent-4: #282828;
  --accent-5: #303030;
  --accent-6: #3a3a3a;
  --accent-7: #484848;
  --accent-8: #606060;
  --accent-9: #fff;
  --accent-10: #f6f6f6;
  --accent-11: #b4b4b4;
  --accent-12: #eee;

  --accent-a1: #00000000;
  --accent-a2: #ffffff14;
  --accent-a3: #ffffff1f;
  --accent-a4: #ffffff27;
  --accent-a5: #ffffff2f;
  --accent-a6: #ffffff39;
  --accent-a7: #ffffff47;
  --accent-a8: #ffffff5f;
  --accent-a9: #ffffff;
  --accent-a10: #fffffff6;
  --accent-a11: #ffffffb4;
  --accent-a12: #ffffffee;

  --accent-contrast: #311921;
  --accent-surface: #29292980;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(6.7% 0 none);
      --accent-2: oklch(19.5% 0 none);
      --accent-3: oklch(24.5% 0 none);
      --accent-4: oklch(27.8% 0 none);
      --accent-5: oklch(31% 0 none);
      --accent-6: oklch(34.8% 0 none);
      --accent-7: oklch(40.2% 0 none);
      --accent-8: oklch(48.7% 0 none);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0 none);
      --accent-11: oklch(77% 0 none);
      --accent-12: oklch(94.9% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 1 1 1 / 0.0787);
      --accent-a3: color(display-p3 1 1 1 / 0.122);
      --accent-a4: color(display-p3 1 1 1 / 0.1535);
      --accent-a5: color(display-p3 1 1 1 / 0.185);
      --accent-a6: color(display-p3 1 1 1 / 0.2244);
      --accent-a7: color(display-p3 1 1 1 / 0.2795);
      --accent-a8: color(display-p3 1 1 1 / 0.374);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 1 / 0.9646);
      --accent-a11: color(display-p3 1 1 1 / 0.7047);
      --accent-a12: color(display-p3 1 1 1 / 0.9331);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1569 0.1569 0.1569 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


:root {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6e6e6e;
  --grayscale-track: #6e6e6e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.431 0.431 0.431);
      --grayscale-track: color(display-p3 0.431 0.431 0.431);
    }
  }
}

:root {
  color-scheme: dark;
  --accent: rgba(255, 255, 255, 1);
  --background: rgba(1, 1, 1, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #010101;
}

.dark { color-scheme: dark; --background: rgba(1, 1, 1, 1); }

/* Fern Button Overrides */
.fern-button {
  border-radius: 6px;
}

.fern-page-actions {
  border-radius: 6px;
}

.fern-page-actions .fern-button {
  border-right: none;
}

#fern-footer {
  border-top: 0.5px solid var(--grayscale-a5);
}

/* Ensure main content area has minimum height to push footer down */
main {
  min-height: calc(100vh - 200px);
}

#fern-announcement {
  background: var(--frameio-gradient-announcement);
  color: var(--accent);
  text-decoration: none;
}
#fern-announcement .fern-mdx-link{
  text-decoration: none;
  padding-left: 6px;
}
#fern-announcement .fern-mdx-link svg{
  display: inline !important;
}
#fern-announcement .fern-button svg{
  stroke: var(--accent) !important;
}

#fern-search-button .fern-kbd{
  display: none;
}

@keyframes header-background-fade {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: var(--header-background);
  }
}

[data-theme=default]#fern-header {
  animation: header-background-fade linear;
  animation-timeline: scroll();
  animation-range: normal;
}

.fern-header-tabs div[role="tablist"] a{
  color: var(--accent);
}

.prose p{
  color: var(--grayscale-a11);
}
.fern-callout {
  background: var(--grayscale-a2) !important;
  border-color: var(--grayscale-a2) !important;
}

.fern-mdx-link svg{
  display: none;
}

.fern-button:not([disabled]).filled.primary{
  background-color: rgba(46, 102, 132, 0.2);
  color: var(--accent);
}

body .fern-header-tabs{
  justify-content: center;
}
#fern-header [data-radix-collection-item]{
  padding-inline: calc(var(--spacing)*6) !important
}
#fern-header [data-radix-collection-item][data-state=active] {
  font-weight: var(--font-weight-medium);
}

/* Frame.io Brand Colors */
:root {
  --frameio-cobalt: #5B53FF;
  --frameio-electric: #47EBEB;
  --frameio-iris: #8952FD;
  --frameio-coral: #FC856D;

  --frameio-gradient-announcement: linear-gradient(90deg, rgba(73, 121, 250, 0.1) 0%, rgba(73, 121, 250, 0.3) 53.05%, rgba(73, 121, 250, 0.1) 100%);
  --frameio-gradient-primary: linear-gradient(135deg, var(--frameio-cobalt) 0%, var(--frameio-iris) 100%);
  --frameio-gradient-electric: linear-gradient(135deg, var(--frameio-electric) 0%, var(--frameio-cobalt) 100%);
  --frameio-gradient-dramatic: linear-gradient(135deg, var(--frameio-cobalt) 0%, var(--frameio-iris) 50%, var(--frameio-coral) 100%);
  --frameio-gradient-hero-light: linear-gradient(135deg, rgba(91, 83, 255, 0.35) 0%, rgba(137, 82, 253, 0.3) 35%, rgba(71, 235, 235, 0.25) 70%, rgba(252, 133, 109, 0.2) 100%);
  --frameio-gradient-hero-dark: linear-gradient(135deg, rgba(91, 83, 255, 0.5) 0%, rgba(137, 82, 253, 0.45) 35%, rgba(71, 235, 235, 0.35) 70%, rgba(252, 133, 109, 0.3) 100%);

  /* Changelog pill colors */
  --frameio-pill-added: #10b981;
  --frameio-pill-removed: #ef4444;
  --frameio-pill-moved: #6b7280;
  --frameio-pill-modified: #3b82f6;
  --frameio-pill-fixed: #f59e0b;
}

/* Hero Section */
.frameio-hero-gradient {
  display: flex;
  padding: 64px 0px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  position: relative;
  overflow: visible;
  background: transparent;
}

/* Hero Content */
.frameio-hero-content-simple {
  display: flex;
  width: 1200px;
  max-width: 1200px;
  padding: 0px 32px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 10;
  flex-direction: column;
}
.frameio-hero-text {
  text-align: center;
}

/* Text Sizes */
.frameio-hero-text h1 {
  font-size: 5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  background-clip: text;
  line-height: 1.1;
}

.frameio-hero-text p {
  font-size: 1.375rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* Landing Page Card Styles - Only apply to landing page */
.frameio-hero-gradient div .fern-card {
  display: flex;
  width: 100%;
  max-width: 408px;
  min-height: 156px;
  padding: 30px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 1;
  border-radius: 10px;
  border: 1px solid rgba(157, 157, 255, 0.10);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Light mode landing page cards - shadows */
.frameio-hero-gradient div .fern-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

/* Dark mode landing page cards - shadows */
.dark .frameio-hero-gradient div .fern-card {
  background: rgba(16, 16, 23, 0.50);
  backdrop-filter: blur(37.5px);
}

.frameio-hero-gradient div .fern-card:has(a):hover,
.frameio-hero-gradient div .fern-card[href]:hover {
  transform: translateY(-2px);
  border: 1px solid var(--accent-a11);
}
.frameio-hero-gradient div .fern-card:has(a):focus-visible,
.frameio-hero-gradient div .fern-card[href]:focus-visible {
  transform: translateY(-2px);
  border: 1px solid var(--accent-a11); outline: none;
}

/* Landing Page Card Typography - Target actual Fern classes */
.frameio-hero-gradient div .fern-card .text-body.text-base.font-semibold,
.frameio-hero-gradient div .fern-card div[class*="jsx-"][class*="text-body"][class*="text-base"][class*="font-semibold"] {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Card Arrow Styles */
.frameio-hero-gradient div .fern-card .card-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-1px);
}

.frameio-hero-gradient div .fern-card:hover .card-arrow {
  transform: translate(1px, -1px);
}
.frameio-hero-gradient div .fern-card:focus-within .card-arrow {
  transform: translate(1px, -1px); outline: none;
}

/* Target card description text */
.frameio-hero-gradient div .fern-card p,
.frameio-hero-gradient div .fern-card div[class*="jsx-"]:not([class*="font-semibold"]) {
  color: inherit !important;
  text-shadow: none !important;
  position: relative !important;
}
.frameio-hero-gradient div .fern-card div[class*="jsx-"][class*="text-(color:--grayscale-a11)"] {
  opacity: 0.6;
}

/* Card Grid Container - Only target the CardGroup, not other divs */
.frameio-hero-gradient + div > div:has(.fern-card) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
}

/* Product and Version Selector Styles */
.fern-product-selector-radio-group {
  max-width: 340px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

  .frameio-hero-gradient {
    padding: 48px 0 32px 0;
  }
  
  .frameio-hero-content-simple {
    flex-direction: column;
    gap: 32px;
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
  }
  
  .frameio-hero-left {
    text-align: center;
    align-items: center;
  }
  
  .frameio-hero-text h1 {
    font-size: 2.75rem ! important;
  }
  .help-section h3 {
    font-size: 1.25rem ! important;
  }
  .frameio-hero-text p {
    font-size: 1.125rem;
  }
  
  .frameio-video-container {
    max-width: 100%;
  }

  .frameio-hero-gradient div .fern-card {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 1.5rem;
  }
  .frameio-hero-gradient div .fern-card .text-body.text-base.font-semibold,
  .frameio-hero-gradient div .fern-card div[class*="jsx-"][class*="text-body"][class*="text-base"][class*="font-semibold"] {
    font-size: 1.25rem !important;
  }
  .frameio-hero-gradient div .fern-card p,
  .frameio-hero-gradient div .fern-card div[class*="jsx-"]:not([class*="font-semibold"]) {
    font-size: 1rem !important;
  }

}
/* Moving logo to footer */
#builtwithfern, #builtwithfern *{
  display: none !important;
}

@media (max-width: 480px) {

  .frameio-hero-gradient {
    padding: 32px 0 24px 0;
  }
  
  .frameio-hero-content-simple {
    padding: 0 16px;
    gap: 24px;
  }
  
  .frameio-hero-text h1 {
    font-size: 2.5rem;
  }
  
  .frameio-hero-text p {
    font-size: 1rem;
  }
  
  .frameio-hero-gradient div .fern-card {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 1.25rem;
  }
  
  .frameio-hero-gradient + div > div:has(.fern-card) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}

/* Change log pills */
.frameio-pill {
  display: inline-block;
  padding: 0px 6px;
  border-radius: 12px;
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 8px;
  color: white;
  text-transform: lowercase;
  position: relative;
  top: -2px;
}

.frameio-pill-added {
  background-color: var(--frameio-pill-added);
}

.frameio-pill-removed {
  background-color: var(--frameio-pill-removed);
}

.frameio-pill-moved {
  background-color: var(--frameio-pill-moved);
}

.frameio-pill-modified {
  background-color: var(--frameio-pill-modified);
}

.frameio-pill-fixed {
  background-color: var(--frameio-pill-fixed);
}

/* Help Section Styles */
.help-section {
  max-width: 840px;
  margin: 0 auto;
  padding: 16px 16px;
}

.help-section-content {
  text-align: center;
}

.help-section h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.help-section p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  opacity: 0.8;
}

.help-section a {
  text-decoration: none;
  color: var(--frameio-cobalt);
}