.ffrl-library {
  --ffrl-navy-950: #071521;
  --ffrl-navy-900: #0b1e2d;
  --ffrl-navy-800: #123047;
  --ffrl-ink: #17242d;
  --ffrl-slate: #52626d;
  --ffrl-parchment: #f6f1e7;
  --ffrl-paper: #fffdf8;
  --ffrl-line: #d9d0c0;
  --ffrl-gold: #b7944b;
  --ffrl-gold-light: #d6bd82;
  --ffrl-shadow: 0 20px 50px rgba(7, 21, 33, 0.11);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 52px;
  color: var(--ffrl-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--ffrl-parchment);
  border: 1px solid var(--ffrl-line);
  border-radius: 4px;
  box-shadow: var(--ffrl-shadow);
  overflow: hidden;
  isolation: isolate;
}

.ffrl-library *,
.ffrl-library *::before,
.ffrl-library *::after {
  box-sizing: border-box;
}

.ffrl-library h1,
.ffrl-library h2,
.ffrl-library h3,
.ffrl-library p {
  margin-top: 0;
}

.ffrl-library h1,
.ffrl-library h2,
.ffrl-library h3 {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
}

.ffrl-library svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.ffrl-hero {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 76px 42px 68px;
  color: #f8f3e9;
  background:
    radial-gradient(circle at 88% 18%, rgba(183, 148, 75, 0.18), transparent 29%),
    radial-gradient(circle at 9% 90%, rgba(66, 112, 139, 0.23), transparent 32%),
    linear-gradient(135deg, var(--ffrl-navy-950), var(--ffrl-navy-800));
  overflow: hidden;
}

.ffrl-hero::before,
.ffrl-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.ffrl-hero::before {
  inset: 20px;
  border: 1px solid rgba(214, 189, 130, 0.2);
}

.ffrl-hero::after {
  width: 380px;
  height: 380px;
  right: -195px;
  top: -215px;
  border: 1px solid rgba(214, 189, 130, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(214, 189, 130, 0.035), 0 0 0 92px rgba(214, 189, 130, 0.025);
}

.ffrl-hero__rule {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 78px;
  height: 3px;
  background: var(--ffrl-gold);
  transform: translateX(-50%);
}

.ffrl-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.ffrl-kicker {
  margin-bottom: 13px;
  color: var(--ffrl-gold-light);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ffrl-hero h1 {
  max-width: 780px;
  margin: 0 auto 19px;
  color: #fffdf8;
  font-size: clamp(2.4rem, 6vw, 4.65rem);
}

.ffrl-hero__lede {
  max-width: 690px;
  margin: 0 auto 26px;
  color: rgba(247, 243, 234, 0.8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.03rem, 2vw, 1.22rem);
}

.ffrl-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 34px;
  padding: 8px 15px;
  color: #f6e5b9;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(214, 189, 130, 0.45);
  border-radius: 999px;
  background: rgba(183, 148, 75, 0.1);
}

.ffrl-access-badge .ffrl-icon {
  width: 17px;
  height: 17px;
}

.ffrl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 670px;
  margin: 0 auto;
  border-top: 1px solid rgba(214, 189, 130, 0.25);
  border-bottom: 1px solid rgba(214, 189, 130, 0.25);
}

.ffrl-stat {
  padding: 17px 14px 16px;
}

.ffrl-stat + .ffrl-stat {
  border-left: 1px solid rgba(214, 189, 130, 0.25);
}

.ffrl-stat strong,
.ffrl-stat span {
  display: block;
}

.ffrl-stat strong {
  margin-bottom: 1px;
  color: #fffdf8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
}

.ffrl-stat span {
  color: rgba(247, 243, 234, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffrl-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 30px clamp(24px, 5vw, 60px);
  background: #ece3d2;
  border-bottom: 1px solid var(--ffrl-line);
}

.ffrl-note__icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  padding: 10px;
  color: var(--ffrl-gold);
  border: 1px solid rgba(183, 148, 75, 0.42);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.66);
}

.ffrl-note h2 {
  margin-bottom: 5px;
  color: var(--ffrl-navy-900);
  font-size: 1.14rem;
}

.ffrl-note p {
  max-width: 900px;
  margin-bottom: 0;
  color: #59636a;
  font-size: 0.9rem;
}

.ffrl-browser {
  padding: 52px clamp(22px, 5vw, 60px) 64px;
}

.ffrl-browser__heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 27px;
}

.ffrl-kicker--dark {
  margin-bottom: 7px;
  color: #8b7138;
}

.ffrl-browser__heading h2 {
  margin-bottom: 0;
  color: var(--ffrl-navy-900);
  font-size: clamp(1.85rem, 4vw, 2.65rem);
}

.ffrl-search {
  position: relative;
  width: min(100%, 340px);
}

.ffrl-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 19px;
  height: 19px;
  color: #75828a;
  transform: translateY(-50%);
  pointer-events: none;
}

.ffrl-search input[type="search"] {
  width: 100%;
  height: 47px;
  margin: 0;
  padding: 0 15px 0 43px;
  color: var(--ffrl-ink);
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid #cfc5b4;
  border-radius: 3px;
  outline: none;
  background: var(--ffrl-paper);
  box-shadow: none;
}

.ffrl-search input[type="search"]:focus {
  border-color: var(--ffrl-gold);
  box-shadow: 0 0 0 3px rgba(183, 148, 75, 0.15);
}

.ffrl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--ffrl-line);
}

.ffrl-filter {
  min-height: 38px;
  margin: 0;
  padding: 8px 14px;
  color: #52616b;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid #cec4b3;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.ffrl-filter:hover,
.ffrl-filter:focus-visible {
  color: var(--ffrl-navy-900);
  border-color: var(--ffrl-gold);
  outline: none;
}

.ffrl-filter.is-active {
  color: #fffdf8;
  border-color: var(--ffrl-navy-900);
  background: var(--ffrl-navy-900);
}

.ffrl-results {
  margin-bottom: 34px;
  color: #768088;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ffrl-category + .ffrl-category {
  margin-top: 59px;
  padding-top: 55px;
  border-top: 1px solid var(--ffrl-line);
}

.ffrl-category__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 17px;
  max-width: 840px;
  margin-bottom: 23px;
}

.ffrl-category__mark {
  width: 42px;
  height: 42px;
  padding: 9px;
  color: var(--ffrl-gold);
  border: 1px solid rgba(183, 148, 75, 0.45);
  border-radius: 2px;
  background: rgba(255, 253, 248, 0.6);
}

.ffrl-category__header p {
  margin-bottom: 2px;
  color: #8b7138;
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ffrl-category__header h2 {
  margin-bottom: 5px;
  color: var(--ffrl-navy-900);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.ffrl-category__header span {
  display: block;
  color: var(--ffrl-slate);
  font-size: 0.9rem;
}

.ffrl-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ffrl-work-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--ffrl-line);
  border-top: 3px solid var(--ffrl-gold);
  border-radius: 2px;
  background: var(--ffrl-paper);
  box-shadow: 0 8px 24px rgba(7, 21, 33, 0.045);
}

.ffrl-work-card[hidden],
.ffrl-category[hidden] {
  display: none !important;
}

.ffrl-work-card__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.ffrl-work-card__icon {
  width: 39px;
  height: 45px;
  padding: 8px;
  color: #95783a;
  border: 1px solid #dacba9;
  background: #f5ecd9;
}

.ffrl-work-card__titles p {
  margin: 0 0 3px;
  color: #8b7138;
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ffrl-work-card__titles h3 {
  margin-bottom: 0;
  color: var(--ffrl-navy-900);
  font-size: clamp(1.17rem, 2.4vw, 1.42rem);
}

.ffrl-work-card__description {
  margin-bottom: 20px;
  color: var(--ffrl-slate);
  font-size: 0.84rem;
}

.ffrl-files {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.ffrl-files--many {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.ffrl-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--ffrl-ink);
  text-decoration: none !important;
  border: 1px solid #ded6c8;
  border-radius: 2px;
  background: #fbf8f1;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ffrl-file:hover,
.ffrl-file:focus-visible {
  color: var(--ffrl-navy-900);
  text-decoration: none;
  border-color: var(--ffrl-gold);
  outline: none;
  background: #fffefb;
  transform: translateY(-1px);
}

.ffrl-file__icon {
  width: 22px;
  height: 25px;
  color: #9a7c3b;
}

.ffrl-file__text {
  min-width: 0;
}

.ffrl-file__text strong,
.ffrl-file__text small {
  display: block;
}

.ffrl-file__text strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ffrl-file__text small {
  margin-top: 2px;
  color: #78838a;
  font-size: 0.66rem;
  font-weight: 600;
}

.ffrl-file__arrow {
  width: 16px;
  height: 16px;
  color: #9a7c3b;
}

.ffrl-empty {
  padding: 70px 20px;
  text-align: center;
  border: 1px dashed #c7baa6;
  background: rgba(255, 253, 248, 0.55);
}

.ffrl-empty > svg {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  color: var(--ffrl-gold);
}

.ffrl-empty h3 {
  margin-bottom: 5px;
  color: var(--ffrl-navy-900);
  font-size: 1.25rem;
}

.ffrl-empty p {
  margin-bottom: 0;
  color: var(--ffrl-slate);
  font-size: 0.88rem;
}

.ffrl-footer-note {
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: center;
  padding: 24px clamp(22px, 5vw, 60px);
  color: rgba(247, 243, 234, 0.74);
  text-align: center;
  background: var(--ffrl-navy-900);
}

.ffrl-footer-note > span {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--ffrl-gold-light);
}

.ffrl-footer-note p {
  margin-bottom: 0;
  font-size: 0.78rem;
}

.ffrl-footer-note strong {
  color: #fffdf8;
}

@media (max-width: 900px) {
  .ffrl-library {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .ffrl-work-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ffrl-hero {
    min-height: auto;
    padding: 66px 25px 54px;
  }

  .ffrl-hero::before {
    inset: 13px;
  }

  .ffrl-hero__rule {
    top: 13px;
  }

  .ffrl-stats {
    grid-template-columns: 1fr;
    max-width: 280px;
  }

  .ffrl-stat + .ffrl-stat {
    border-top: 1px solid rgba(214, 189, 130, 0.25);
    border-left: 0;
  }

  .ffrl-note {
    grid-template-columns: 1fr;
    padding: 27px 23px;
  }

  .ffrl-browser {
    padding: 42px 18px 48px;
  }

  .ffrl-browser__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .ffrl-search {
    width: 100%;
  }

  .ffrl-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ffrl-filter {
    width: 100%;
  }

  .ffrl-category__header {
    grid-template-columns: 1fr;
  }

  .ffrl-work-card {
    padding: 20px 17px;
  }

  .ffrl-files--many {
    grid-template-columns: 1fr;
  }

  .ffrl-footer-note {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffrl-library *,
  .ffrl-library *::before,
  .ffrl-library *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .ffrl-library {
    box-shadow: none;
  }

  .ffrl-search,
  .ffrl-filters,
  .ffrl-footer-note {
    display: none !important;
  }
}