/* Folios, in its logo's colours: a night-blue sky, parchment, a teal quill, gold stars and a plum cover. The landing
   page moves a lot (none for reduced motion); the docs pages stay still. */

/* ---------- Tokens ---------- */
:root {
  --f-teal: #4fd1c5;
  --f-teal-bright: #4fd1c5;       /* (under dark text, in both schemes) */
  --f-gold: #f2c14e;
  --f-teal-deep: #2a9d8f;
  --f-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-title: "Cormorant Garamond", Garamond, Georgia, serif;      /* the hero title: a book face */
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #11141f;
  --md-default-fg-color--light: #b6c0d2;
  --md-primary-fg-color: #171c2b;
  --md-primary-fg-color--light: #26304a;
  --md-primary-fg-color--dark: #0d1018;
  --md-accent-fg-color: var(--f-teal);
  --md-typeset-a-color: var(--f-teal);
  --md-code-bg-color: #1a2033;
  --f-bg: #11141f;
  --f-surface: rgba(230, 235, 242, 0.04);
  --f-surface-2: rgba(230, 235, 242, 0.07);
  --f-line: rgba(242, 193, 78, 0.14);
  --f-text: #f6eedb;
  --f-muted: #9aa8bd;
  --f-paper: #f6eedb;
  --f-ink: #3a2a1c;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #fbf8f0;
  --md-primary-fg-color: #1f273d;
  --md-primary-fg-color--light: #3d4969;
  --md-primary-fg-color--dark: #171c2b;
  --md-accent-fg-color: var(--f-teal-deep);
  --md-typeset-a-color: #1a6f66;
  --md-code-bg-color: #eceef4;      /* (night blue, faintly: the theme's grey vanished on cream) */
  --md-code-fg-color: #26304a;
  --f-teal: #1a6f66;              /* (deeper on paper, to stay readable) */
  --f-teal-deep: #155d55;
  --f-bg: #fbf8f0;
  --f-surface: rgba(255, 255, 255, 0.78);
  --f-surface-2: rgba(38, 48, 74, 0.06);
  --f-line: rgba(38, 48, 74, 0.2);
  --f-text: #17121f;
  --f-muted: #505e83;
  --f-paper: #fffcf5;
  --f-ink: #3a2a1c;
}

/* ---------- The theme around every page ---------- */
/* Quiet on purpose: the docs are for reading, so the bars are solid, nothing moves on hover but colour, and the colour
   is kept for what is open. The landing page brings its own motion. */
.md-header, .md-tabs { background: #171c2b; color: #f6eedb; }
.md-header { box-shadow: none; }
.md-header--shadow { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.8); }
.md-header__inner { padding-block: 0.3rem; }
/* One gilt hairline under the bars, still. */
.md-tabs, body:not(:has(.md-tabs)) .md-header { border-bottom: 1px solid rgba(242, 193, 78, 0.18); }

.md-header__button.md-logo { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; margin: 0.2rem 0.4rem 0.2rem 0.2rem; }
/* The mod logo is pixel art with its own frame: shown whole, its pixels kept sharp. */
.md-header__button.md-logo img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 4px; }
.md-header__title { font-family: var(--f-serif); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; margin-left: 0.3rem; }
.md-header__topic:first-child .md-ellipsis { color: var(--f-gold); }
.md-header__button.md-icon { border-radius: 8px; transition: background 0.2s; }
.md-header__button.md-icon:hover { background: rgba(230, 235, 242, 0.08); opacity: 1; }

/* The search button sits on the night-blue bar in both schemes, so it keeps light text in both. */
.md-search__button { border-radius: 8px; color: rgba(246, 238, 219, 0.8) !important; background: rgba(230, 235, 242, 0.06) !important; box-shadow: inset 0 0 0 1px rgba(230, 235, 242, 0.12); transition: background 0.2s; }
.md-search__button:hover { background: rgba(230, 235, 242, 0.1) !important; }
.md-search__button::before { background-color: currentColor !important; }
.md-search__button::after { color: rgba(246, 238, 219, 0.7) !important; background: rgba(230, 235, 242, 0.1) !important; }

/* The tabs: plain words, the open one in gold with a line under it. */
.md-tabs__list { display: flex; gap: 1.6rem; }
.md-tabs__item { height: auto; padding: 0; border-bottom: 0 !important; }
.md-tabs__link {
  display: block; margin: 0; padding: 0.55rem 0 0.65rem; font-weight: 600; font-size: 0.7rem;
  color: rgba(246, 238, 219, 0.66); opacity: 1; box-shadow: inset 0 -2px 0 transparent; transition: color 0.2s, box-shadow 0.2s;
}
.md-tabs__link:hover { color: #f6eedb; }
.md-tabs__item--active .md-tabs__link { color: var(--f-gold); box-shadow: inset 0 -2px 0 var(--f-gold); }

/* The page keeps at least a screen's height, so the menu beside it always fits above the footer. */
.md-main__inner { min-height: calc(100vh - 7rem); }

/* ----- The menu ----- */
.md-sidebar--primary .md-nav__link { margin-top: 0.15rem; }
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__link { padding: 0.3rem 0.6rem; border-radius: 6px; transition: background 0.15s, color 0.15s; }
  .md-sidebar--primary a.md-nav__link:hover { background: var(--f-surface-2); color: var(--f-text); }
  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--primary .md-nav__link--active:hover { color: var(--f-teal); background: color-mix(in srgb, var(--f-teal) 12%, transparent); font-weight: 600; }
  /* Each section's name: a small label over its pages, not a link-sized heading. */
  .md-sidebar--primary .md-nav__item--section { margin-top: 1.1rem; }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    padding-inline: 0.6rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-muted);
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav > .md-nav__list { margin-left: 0; }
  /* A group inside a section hangs from a thin line. */
  .md-sidebar--primary .md-nav[data-md-level="3"] > .md-nav__list { margin-left: 0.6rem; padding-left: 0.4rem; border-left: 1px solid var(--f-line); }
}

/* ----- The article ----- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: var(--f-serif); letter-spacing: -0.01em; }
.md-typeset h1 { font-weight: 800; color: var(--f-text); margin-bottom: 1rem; }
.md-typeset h2 { font-weight: 700; padding-top: 1.2rem; border-top: 1px solid var(--f-line); }
.md-typeset h1 + h2, .md-typeset h1 + p + h2 { border-top: 0; padding-top: 0; }
.md-typeset a { text-underline-offset: 0.2em; }
.md-typeset a:not(.md-button):not(.fh-btn):hover { text-decoration: underline; }

.md-typeset .md-button { border-radius: 8px; transition: background 0.2s, color 0.2s; }
.md-typeset .md-button--primary { background: var(--f-teal-bright); border-color: var(--f-teal-bright); color: #17121f; }
.md-typeset .md-button--primary:hover { background: var(--f-gold); border-color: var(--f-gold); color: #17121f; }

.md-typeset .admonition, .md-typeset details, .md-typeset pre > code { border-radius: 8px; }
.md-typeset pre > code { box-shadow: inset 0 0 0 1px var(--f-line); }
.md-typeset :not(pre) > code { border-radius: 4px; }
.md-typeset table:not([class]) { border-radius: 8px; overflow: hidden; border: 1px solid var(--f-line); box-shadow: none; font-size: 0.72rem; }
.md-typeset table:not([class]) th { background: var(--f-surface-2); font-weight: 700; }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { border-top-color: var(--f-line); }

/* ----- The footer ----- */
/* Over anything that might reach into it (the menu is a sticky layer of its own), and solid all the way down. */
.md-footer { position: relative; z-index: 3; background: var(--f-bg); border-top: 1px solid var(--f-line); }
.md-footer__inner { gap: 1rem; padding-block: 1rem; }
.md-footer__link { flex: 1 1 0; padding: 0.6rem 0.8rem; border: 1px solid var(--f-line); border-radius: 8px; transition: border-color 0.2s, background 0.2s; }
.md-footer__link:hover { border-color: color-mix(in srgb, var(--f-teal) 60%, transparent); background: var(--f-surface); opacity: 1; }
.md-footer__link--next { justify-content: flex-end; text-align: right; }
.md-footer__direction { color: var(--f-muted); }
.md-footer-meta.md-footer-meta { background: #0d1018; }
.md-footer-meta .md-copyright, .md-footer-meta .md-copyright a { color: #9aa8bd; }
.md-footer-meta .md-copyright a:hover { color: #f6eedb; }

/* ---------- Landing page ---------- */
.fh-page .md-main__inner { margin-top: 0; max-width: none; }
.fh-page .md-content { max-width: none; }
.fh-page .md-content__inner { margin: 0; padding: 0; }
.fh-page .md-content__inner::before { display: none; }
/* The landing page has no sidebars beside it; below 76.25em the primary one is the menu drawer, and stays. */
@media screen and (min-width: 76.25em) { .fh-page .md-sidebar { display: none; } }

.fh { color: var(--f-text); overflow: hidden; }
.md-typeset .fh h1, .md-typeset .fh h2, .md-typeset .fh h3 { font-family: var(--f-serif); color: var(--f-text); margin: 0; line-height: 1.15; }
.md-typeset .fh p { margin: 0; }
.md-typeset .fh { font-size: 1rem; line-height: 1.6; }
.md-typeset .fh a.fh-btn, .md-typeset .fh a.fh-btn:hover { text-decoration: none; }

.fh-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--f-teal); padding: 0.35em 0.9em; border-radius: 999px; border: 1px solid var(--f-line);
  background: var(--f-surface);
}

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px);
  transition: opacity 0.9s var(--f-ease), transform 0.9s var(--f-ease), filter 0.9s var(--f-ease);
  transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Hero */
.fh-hero { position: relative; min-height: calc(100vh - 6rem); display: grid; align-items: center; padding: 4rem 1.5rem 5rem; isolation: isolate; }
.fh-aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -2; filter: blur(70px); opacity: 0.75; }
.fh-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: f-float 18s ease-in-out infinite alternate; }
.fh-aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: 6%; background: radial-gradient(circle, rgba(79, 209, 197, 0.55), transparent 65%); }
.fh-aurora span:nth-child(2) { width: 38vw; height: 38vw; left: 62%; top: 30%; background: radial-gradient(circle, rgba(59, 91, 219, 0.5), transparent 65%); animation-duration: 23s; animation-delay: -6s; }
.fh-aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 6%; top: 40%; background: radial-gradient(circle, rgba(242, 193, 78, 0.28), transparent 65%); animation-duration: 27s; animation-delay: -12s; }
[data-md-color-scheme="default"] .fh-aurora { opacity: 0.55; }
[data-md-color-scheme="default"] .fh-aurora span { mix-blend-mode: multiply; }
@keyframes f-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, 4vh) scale(1.12); }
  100% { transform: translate(4vw, -5vh) scale(0.94); }
}
.fh-hero::after {
  content: ""; position: absolute; inset: -30% -20% -10% 10%; z-index: -1; pointer-events: none; transform-origin: 85% 0;
  background: repeating-conic-gradient(from 198deg at 85% 0, rgba(242, 193, 78, 0.07) 0 3deg, transparent 3deg 9deg, rgba(79, 209, 197, 0.05) 9deg 11deg, transparent 11deg 17deg);
  mask-image: radial-gradient(ellipse 70% 80% at 85% 0, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 0, black 0%, transparent 75%);
  animation: f-beams 26s ease-in-out infinite alternate;
}
@keyframes f-beams { from { transform: rotate(-3deg); opacity: 0.8; } to { transform: rotate(4deg); opacity: 1; } }
[data-md-color-scheme="default"] .fh-hero::after { opacity: 0.6; }
body.fh-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .9 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-md-color-scheme="default"] body.fh-page::before { opacity: 0.1; mix-blend-mode: multiply; filter: invert(1); }
.fh-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.fh-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; max-width: 72rem; margin: 0 auto; width: 100%; }
.fh-hero__text { display: grid; gap: 1.4rem; justify-items: start; }
.md-typeset .fh .fh-title { font-family: var(--f-title); font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1.02; font-weight: 700 !important; letter-spacing: -0.01em; padding-block: 0.08em; overflow: visible; }
.fh-nowrap { white-space: nowrap; }      /* (the italic word and its period on one line) */
.fh-dot { margin-left: 0.04em; }        /* (clear of the slanted word, which is padded out and pulled back to keep its slant) */
.fh-shimmer {
  font-style: italic; display: inline-block; padding: 0.06em 0.16em 0.12em; margin: -0.06em -0.16em -0.12em; background: linear-gradient(110deg, var(--f-gold) 0%, var(--f-teal) 30%, #fbf8f0 50%, var(--f-teal) 70%, var(--f-teal-deep) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: f-shimmer 5s ease-in-out infinite;
}
@keyframes f-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.fh-lead { font-size: 1.12rem; line-height: 1.7; color: var(--f-muted); max-width: 34rem; }
.fh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fh-actions--center { justify-content: center; }
.md-typeset ul.fh-chips { margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 !important; }
.md-typeset ul.fh-chips li { list-style: none; margin: 0 !important; font-size: 0.78rem; font-weight: 600; color: var(--f-muted); padding: 0.3em 0.8em; border-radius: 999px; background: var(--f-surface); border: 1px solid var(--f-line); }

.fh-btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.5em; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; color: var(--f-text) !important; background: var(--f-surface-2); border: 1px solid var(--f-line);
  transform: translate(var(--mx), calc(var(--my) + var(--lift, 0px))); transition: transform 0.45s var(--f-ease), box-shadow 0.35s, background 0.35s, border-color 0.35s;
  overflow: hidden; isolation: isolate;
}
.fh-btn:hover { --lift: -2px; border-color: color-mix(in srgb, var(--f-teal) 60%, transparent); box-shadow: 0 12px 28px -18px var(--f-teal); }
.fh-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(251, 248, 240, 0.13) 46%, rgba(251, 248, 240, 0.2) 50%, rgba(251, 248, 240, 0.13) 54%, transparent 70%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; transition: background-position 0.9s var(--f-ease);
}
.fh-btn:hover::before { background-position: -30% 0; }
.fh-btn--primary { color: #17121f !important; background: linear-gradient(135deg, var(--f-gold), var(--f-teal-bright) 55%, #8be3da); border: 0; background-size: 160% 160%; animation: f-glowpulse 4s ease-in-out infinite; }
@keyframes f-glowpulse { 0%, 100% { background-position: 0 50%; box-shadow: 0 10px 30px -14px var(--f-teal); } 50% { background-position: 100% 50%; box-shadow: 0 14px 44px -12px var(--f-teal); } }
.fh-btn--ghost { background: transparent; }

/* The book: the mod's own, simplified. Leather with a gilt-framed title, a gem in a gilt diamond and a clasp; it opens,
   leaves through its pages, and settles on a spread with a turning preview, a recipe and text, its bar over it. Every
   part runs on one 12s loop, so nothing ever passes through anything else: the cover opens flat, the leaves turn onto
   it one at a time, each a little higher than the last, and go back in reverse before the cover closes. */
.fh-stage { --w: 13.5rem; --h: 18rem; position: relative; display: grid; place-items: center; perspective: 1600px; height: 30rem; }
/* Closed, the book sits in the middle of the stage; open, its spread does: it slides right as the cover opens (a little
   under half a cover's width, as the tilt makes the left page look smaller) and back as it closes, on the same loop. */
.fh-book__mover { transform-style: preserve-3d; animation: f-shift 12s var(--f-ease) infinite; }
@keyframes f-shift { 0%, 3% { transform: translateX(0); } 14%, 93% { transform: translateX(calc(var(--w) * 0.4)); } 100% { transform: translateX(0); } }
.fh-book {
  position: relative; cursor: pointer; width: var(--w); height: var(--h); transform-style: preserve-3d;
  font-size: calc(var(--w) / 13.5);
  transform: rotateX(18deg) rotateY(-24deg) rotateZ(2deg); transition: transform 0.8s var(--f-ease);
  animation: f-bob 6s ease-in-out infinite;
}
@keyframes f-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.fh-book > div { position: absolute; inset: 0; transform-style: preserve-3d; }
.fh-book__back { background: linear-gradient(160deg, #5a2550, #2b1226); border-radius: 4px 12px 12px 4px; transform: translateZ(-18px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.fh-book__block { left: 6px !important; right: 6px !important; top: 6px !important; bottom: 6px !important; background: repeating-linear-gradient(0deg, #e9dcc0 0 2px, #d8c7a4 2px 3px); transform: translateZ(-10px); border-radius: 2px 6px 6px 2px; }

/* A page with things on it: a heading with its icon, lines of text, a spotlit item, a turning preview, a recipe. */
.fh-pg { padding: 1.3em 1.15em 1.1em; display: flex; flex-direction: column; gap: 0.55em; }
.fh-book__page { left: 6px !important; right: 6px !important; top: 6px !important; bottom: 6px !important; background: var(--f-paper); border-radius: 2px 6px 6px 2px;
  transform: translateZ(-4px); box-shadow: inset 12px 0 18px -12px rgba(90, 58, 36, 0.45); }
.fh-pg__head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.2em; }
.fh-pg__head .fh-line--title { flex: 0 1 62%; margin: 0; }
.fh-pg__num { margin-top: auto; align-self: center; font: 700 0.7em var(--f-serif); color: rgba(58, 42, 28, 0.45); }
.fh-line { display: block; height: 0.4em; border-radius: 99px; background: rgba(58, 42, 28, 0.25); }
.fh-line--title { height: 0.7em; width: 62%; background: rgba(58, 42, 28, 0.55); margin-bottom: 0.3em; }
.fh-line--short { width: 58%; }
.fh-ico { display: block; width: 1.2em; height: 1.2em; border-radius: 2px; flex: none; }
.fh-ico--table { background: linear-gradient(180deg, #b07a45 0 30%, #7a4f2a 30% 36%, #9a6a3a 36%); box-shadow: inset 0 0 0 1px rgba(58, 42, 28, 0.5); }
.fh-ico--sapling { background: radial-gradient(circle at 50% 35%, #6fae5c 0 35%, transparent 36%), linear-gradient(90deg, transparent 44%, #7a4f2a 44% 56%, transparent 56%); }
.fh-iso--spot { font-size: 0.85em; filter: drop-shadow(0 0.25em 0.3em rgba(58, 42, 28, 0.35)); animation-duration: 6s; animation-delay: -2s; }
.fh-spot { display: grid; place-items: center; height: 4.2em; margin: 0.2em 0; border-radius: 4px; background: radial-gradient(circle, rgba(242, 193, 78, 0.35), transparent 70%); box-shadow: inset 0 0 0 1px rgba(58, 42, 28, 0.18); }
.fh-preview { display: grid; place-items: center; height: 5.4em; border-radius: 4px; background: linear-gradient(180deg, #d9e8f0, #e8dcc0); box-shadow: inset 0 0 0 1px rgba(58, 42, 28, 0.25), inset 0 -10px 18px -12px rgba(58, 42, 28, 0.4); overflow: hidden; }
.fh-iso { position: relative; width: 3em; height: 3.4em; animation: f-iso 5s ease-in-out infinite; }
/* A grass block drawn isometric: a diamond on top and two sides skewed to its slope (29.25deg is the 2:1 rise of the
   diamond's edges), so the grass lip on each side follows the top edge instead of running level and being cut off. */
.fh-iso i { position: absolute; display: block; }
.fh-iso .t {
  left: 0; top: 0; width: 3em; height: 1.7em; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    radial-gradient(circle at 30% 45%, #8cc66f 0 6%, transparent 7%), radial-gradient(circle at 62% 30%, #5a9447 0 6%, transparent 7%),
    radial-gradient(circle at 55% 70%, #8cc66f 0 5%, transparent 6%), radial-gradient(circle at 78% 52%, #5a9447 0 5%, transparent 6%),
    #74b55c;
}
.fh-iso .l, .fh-iso .r { width: 1.5em; height: 1.71em; transform-origin: 0 0; }
.fh-iso .l {
  left: 0; top: 0.85em; transform: skewY(29.25deg);
  background:
    linear-gradient(180deg, #5d9a4b 0 20%, transparent 20%),
    linear-gradient(90deg, transparent 18%, #5d9a4b 18% 30%, transparent 30% 62%, #5d9a4b 62% 74%, transparent 74%) 0 20% / 100% 9% no-repeat,
    radial-gradient(circle at 30% 60%, #74492a 0 7%, transparent 8%), radial-gradient(circle at 70% 80%, #74492a 0 6%, transparent 7%),
    #8a5a34;
}
.fh-iso .r {
  left: 1.5em; top: 1.69em; transform: skewY(-29.25deg);
  background:
    linear-gradient(180deg, #4e8540 0 20%, transparent 20%),
    linear-gradient(90deg, transparent 10%, #4e8540 10% 22%, transparent 22% 52%, #4e8540 52% 64%, transparent 64%) 0 20% / 100% 9% no-repeat,
    radial-gradient(circle at 40% 55%, #5a3a20 0 7%, transparent 8%), radial-gradient(circle at 75% 78%, #5a3a20 0 6%, transparent 7%),
    #6e4628;
}
@keyframes f-iso { 50% { transform: translateY(-0.25em) rotate(2deg); } }
.fh-craft { display: flex; align-items: center; gap: 0.4em; }
.fh-craft__grid { display: grid; grid-template-columns: repeat(3, 1.15em); gap: 2px; }
.fh-craft__grid i, .fh-craft__out { width: 1.15em; height: 1.15em; border-radius: 2px; background: rgba(58, 42, 28, 0.14); box-shadow: inset 0 0 0 1px rgba(58, 42, 28, 0.28); }
.fh-craft__grid i.w { background: linear-gradient(180deg, #c08a52, #9a6a3a); }
.fh-craft b { width: 1em; height: 0.3em; border-radius: 2px; background: var(--f-teal); }
.fh-craft__out { width: 1.5em; height: 1.5em; background: linear-gradient(180deg, #b07a45 0 30%, #7a4f2a 30% 36%, #9a6a3a 36%); animation: f-pop 3.2s var(--f-spring) infinite; }
@keyframes f-pop { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.2); } }

/* Its ribbon tabs out of the fore-edge, under the leaves. */
.fh-book__flags { position: absolute; left: calc(100% - 2px); top: 9%; display: grid; gap: 3px; justify-items: start; }
.fh-book__flags i { display: block; width: 1.5em; height: 1.05em; background: linear-gradient(180deg, #8a5532, #6a3f24); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); }
.fh-book__flags i.blue { background: linear-gradient(180deg, #4d6a8c, #344b66); }
.fh-book__flags i.green { background: linear-gradient(180deg, #4f6e3e, #37502a); }
.fh-book__flags i.is-open { width: 2em; }

/* The leaves: plain paper with faint writing as they flip; the last one's back is the detailed left page. */
.fh-book__leaf { left: 6px !important; right: 6px !important; top: 6px !important; bottom: 6px !important; transform-origin: 0 50%; animation: 12s var(--f-ease) infinite; }
.fh-leaf__face, .fh-leaf__back { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; backface-visibility: hidden; }
.fh-leaf__face {
  background: repeating-linear-gradient(180deg, transparent 0 1.1em, rgba(58, 42, 28, 0.16) 1.1em 1.5em) 1.1em 1.6em / calc(100% - 2.2em) calc(100% - 3.6em) no-repeat,
    linear-gradient(90deg, #e5d6b6, var(--f-paper) 18%);
}
.fh-leaf__back {
  transform: rotateY(180deg); border-radius: 6px 2px 2px 6px;
  background: repeating-linear-gradient(180deg, transparent 0 1.1em, rgba(58, 42, 28, 0.16) 1.1em 1.5em) 1.1em 1.6em / calc(100% - 2.2em) calc(100% - 3.6em) no-repeat,
    linear-gradient(270deg, #e5d6b6, var(--f-paper) 18%);
}
.fh-leaf__back.fh-pg { background: linear-gradient(270deg, #e5d6b6, var(--f-paper) 18%); }
@keyframes f-leaf-1 {
  0%, 15% { transform: translateZ(-0px) rotateY(0); }
  23%, 91.5% { transform: translateZ(-2px) rotateY(-179deg); }
  97.5%, 100% { transform: translateZ(-0px) rotateY(0); }
}
.fh-book__leaf--1 { animation-name: f-leaf-1; }
@keyframes f-leaf-2 {
  0%, 19% { transform: translateZ(-0.6px) rotateY(0); }
  27%, 90% { transform: translateZ(-1.2px) rotateY(-178.7deg); }
  96%, 100% { transform: translateZ(-0.6px) rotateY(0); }
}
.fh-book__leaf--2 { animation-name: f-leaf-2; }
@keyframes f-leaf-3 {
  0%, 23% { transform: translateZ(-1.2px) rotateY(0); }
  31%, 88.5% { transform: translateZ(-0.4px) rotateY(-178.4deg); }
  94.5%, 100% { transform: translateZ(-1.2px) rotateY(0); }
}
.fh-book__leaf--3 { animation-name: f-leaf-3; }
@keyframes f-leaf-4 {
  0%, 27% { transform: translateZ(-1.8px) rotateY(0); }
  35%, 87% { transform: translateZ(0.4px) rotateY(-178.1deg); }
  93%, 100% { transform: translateZ(-1.8px) rotateY(0); }
}
.fh-book__leaf--4 { animation-name: f-leaf-4; }
@keyframes f-leaf-5 {
  0%, 31% { transform: translateZ(-2.4px) rotateY(0); }
  39%, 85.5% { transform: translateZ(1.2px) rotateY(-177.8deg); }
  91.5%, 100% { transform: translateZ(-2.4px) rotateY(0); }
}
.fh-book__leaf--5 { animation-name: f-leaf-5; }
@keyframes f-leaf-6 {
  0%, 35% { transform: translateZ(-3px) rotateY(0); }
  43%, 84% { transform: translateZ(2px) rotateY(-177.5deg); }
  90%, 100% { transform: translateZ(-3px) rotateY(0); }
}
.fh-book__leaf--6 { animation-name: f-leaf-6; }

/* The cover: plum leather, as in the logo, a gilt-framed title plate, a gem in a gilt diamond with a knob either side, a second plate
   below, gilt studs along the spine and a clasp at the fore-edge. */
.fh-book__cover { transform-origin: 0 50%; animation: f-cover 12s var(--f-ease) infinite; }
@keyframes f-cover {
  0%, 3% { transform: translateZ(3px) rotateY(0); }
  14%, 93% { transform: translateZ(-6px) rotateY(-179.6deg); }
  100% { transform: translateZ(3px) rotateY(0); }
}
.fh-cover__front, .fh-cover__inside { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; backface-visibility: hidden; }
.fh-cover__front {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.08), transparent 45%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #7a3369, #5a2550 55%, #3a1734);
  box-shadow: inset 0 0 0 2px #17121f, inset 0 0 0 4px rgba(140, 70, 120, 0.6), inset 10px 0 14px -6px rgba(0, 0, 0, 0.55);
}
.fh-cover__inside { transform: rotateY(180deg); background: linear-gradient(200deg, #4d2042, #2b1226); box-shadow: inset 0 0 0 6px #3a1734; }
.fh-cover__title, .fh-cover__sub {
  position: absolute; left: 12%; right: 10%; display: grid; place-items: center; background: #2b1226; color: var(--f-gold);
  border: 0.22em solid #e2b24a; box-shadow: inset 0 0 0 0.15em #8a5e1e, 0 0.2em 0 rgba(0, 0, 0, 0.45), 0 0 0 1px #6a4416;
}
.fh-cover__title { top: 9%; height: 17%; font: 800 1.9em var(--f-serif); letter-spacing: 0.02em; text-shadow: 0 0.06em 0 #7a5220; transform: rotate(-2deg); }
.fh-cover__sub { bottom: 12%; height: 11%; font: 600 0.62em var(--f-serif); letter-spacing: 0.04em; color: #e9cf8e; transform: rotate(1.5deg); }
.fh-cover__gem {
  position: absolute; left: 50%; top: 50%; width: 4.4em; height: 4.4em; translate: -45% -55%; rotate: 45deg;
  background: linear-gradient(135deg, #f6d88a, #d7a23e 50%, #a8741f); box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
}
.fh-cover__gem::before, .fh-cover__gem::after {
  content: ""; position: absolute; width: 0.9em; height: 0.9em; border-radius: 50%; rotate: -45deg;
  background: radial-gradient(circle at 35% 35%, #fbe3a0, #c08a2e); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.fh-cover__gem::before { left: -0.55em; bottom: -0.55em; }
.fh-cover__gem::after { right: -0.55em; top: -0.55em; }
.fh-cover__gem i {
  width: 62%; height: 62%; background: linear-gradient(135deg, #7ee0d6, #2a9d8f 55%, #17605a);
  box-shadow: 0 0 0 0.25em #8a5e1e, inset 0.2em 0.2em 0 rgba(220, 255, 250, 0.35); animation: f-gem 3s ease-in-out infinite;
}
@keyframes f-gem { 50% { box-shadow: 0 0 0 0.25em #8a5e1e, inset 0.2em 0.2em 0 rgba(220, 255, 250, 0.35), 0 0 1.6em 0.3em rgba(79, 209, 197, 0.7); } }
.fh-cover__stud { position: absolute; left: -0.35em; width: 0.9em; height: 1.4em; border-radius: 0.3em; background: linear-gradient(90deg, #a8741f, #f2cf7e 50%, #b8822a); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.fh-cover__stud--top { top: 14%; }
.fh-cover__stud--bottom { bottom: 24%; }
.fh-cover__clasp {
  position: absolute; right: -0.45em; bottom: 4%; width: 1.7em; height: 3.6em; border-radius: 0.25em;
  background: linear-gradient(90deg, #b8822a, #f2cf7e 45%, #c8923c); box-shadow: inset 0 0 0 0.25em #e8c068, inset 0 0 0 0.4em #8a5e1e, 0 0.15em 0.4em rgba(0, 0, 0, 0.5);
}

/* Its bar, over the open spread once it has settled. */
.fh-book > .fh-book__bar { inset: auto; left: calc(var(--w) * -1); width: calc(var(--w) * 2); top: -2.4em; transform: translateZ(6px); animation: f-bar 12s var(--f-ease) infinite; }
.fh-book__bar .fh-rbar { height: 1.7em; margin: 0 1.4em; gap: 0.5em; }
.fh-book__bar .fh-rbar__plate { width: 1.05em; height: 1.05em; }
.fh-book__bar .fh-rbar__crumb i, .fh-book__bar .fh-rbar__star { width: 0.85em; height: 0.85em; }
@keyframes f-bar { 0%, 44% { opacity: 0; translate: 0 0.6em; } 49%, 81% { opacity: 1; translate: 0 0; } 85%, 100% { opacity: 0; translate: 0 0.6em; } }

.fh-book__shadow { position: absolute; bottom: 2.2rem; left: 50%; width: 30rem; height: 3rem; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%); filter: blur(6px); animation: f-shadow 6s ease-in-out infinite; }
@keyframes f-shadow { 50% { transform: translateX(-50%) scale(0.9); opacity: 0.7; } }

.fh-scroll { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0; width: 1.6rem; height: 2.6rem; border-radius: 999px; border: 2px solid var(--f-line); }
.fh-scroll span { position: absolute; left: 50%; top: 0.45rem; width: 4px; height: 0.6rem; border-radius: 2px; background: var(--f-teal); translate: -50% 0; animation: f-wheel 1.8s var(--f-ease) infinite; }
@keyframes f-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(0.9rem); } }

/* Sections */
.fh-section { max-width: 72rem; margin: 0 auto; padding: 5.5rem 1.5rem 0; }
.fh-head { display: grid; justify-items: center; gap: 0.9rem; text-align: center; margin-bottom: 2.6rem; }
.md-typeset .fh-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
.fh-head p:not(.fh-eyebrow) { color: var(--f-muted); max-width: 38rem; font-size: 1.05rem; line-height: 1.7; }

/* Cards */
.fh-card {
  --gx: 50%; --gy: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; padding: 1.7rem; border-radius: 22px; background: var(--f-surface); border: 1px solid var(--f-line);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.5s var(--f-ease), border-color 0.4s, box-shadow 0.4s, opacity 0.9s var(--f-ease), filter 0.9s var(--f-ease);
  overflow: hidden; isolation: isolate;
}
.fh-card[data-reveal]:not(.is-in) { transform: translateY(26px) scale(0.985); }
.fh-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(79, 209, 197, 0.16), transparent 45%); opacity: 0; transition: opacity 0.4s; }
.fh-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(300px circle at var(--gx) var(--gy), rgba(242, 193, 78, 0.7), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.fh-card:hover { box-shadow: 0 30px 60px -30px rgba(79, 209, 197, 0.45); }
.fh-card:hover::before, .fh-card:hover::after { opacity: 1; }
.md-typeset .fh-card h3 { font-size: 1.3rem; font-weight: 700; margin: 0.9rem 0 0.5rem; }
.fh-card p { color: var(--f-muted); line-height: 1.65; }
.fh-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: 14px; background: var(--f-surface-2); border: 1px solid var(--f-line); transition: transform 0.5s var(--f-spring); }
.fh-card:hover .fh-card__icon { transform: rotate(-8deg) scale(1.12); }
.fh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.fh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.fh-card--big { padding: 1.6rem 1.6rem 2rem; }
.md-typeset .fh-card--big h3 { font-size: 1.6rem; }

/* Screenshots of the two styles in their cards: framed as a print, leaning in a little closer under the pointer. */
.md-typeset .fh-shot { margin: 0 0 0.4rem; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: #10131d;
  box-shadow: inset 0 0 0 1px var(--f-line), 0 18px 40px -22px rgba(0, 0, 0, 0.8); }
.fh-shot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transition: transform 0.8s var(--f-ease); }
.fh-card:hover .fh-shot img { transform: scale(1.035); }
.fh-shot { cursor: zoom-in; }

/* A screenshot opened large: over the page, dimmed and blurred behind it, growing out of where it was; a click or Esc
   puts it back. */
.f-zoom { position: fixed; inset: 0; z-index: 30; margin: 0; display: grid; place-items: center; padding: 4vmin; cursor: zoom-out;
  background: rgba(10, 12, 20, 0.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s var(--f-ease); }
.f-zoom.is-open { opacity: 1; }
.f-zoom img { max-width: min(100%, 1600px); max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--f-line);
  transform: scale(0.92); transition: transform 0.45s var(--f-ease); image-rendering: auto; }
.f-zoom.is-open img { transform: none; }
.f-zoom figcaption { position: absolute; bottom: 2.4vmin; left: 0; right: 0; text-align: center; color: var(--f-muted); font-size: 0.85rem; }

/* The book's bar, as the mod draws it over both kinds of book: a ribbon of the cover's (plum) leather with swallowtail ends
   folded behind it, gilt stitching along both edges, brass plates for its buttons and a pull in the middle of its foot. */
.fh-rbar {
  position: relative; z-index: 0; display: flex; align-items: center; gap: 4px; height: 1.3rem; margin: 0 10px; padding: 0 8px;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0.07) 2px 3px), linear-gradient(180deg, #7a3369, #6b2d5c 55%, #4d2042);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.18), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
}
.fh-rbar::before { content: ""; position: absolute; inset: 2px 3px; pointer-events: none; border-block: 1px dashed rgba(242, 193, 78, 0.85); }
.fh-rbar__tail { position: absolute; top: 4px; width: 12px; height: 100%; background: #3a1734; z-index: -1; }
.fh-rbar__tail--l { left: -9px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.fh-rbar__tail--r { right: -9px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.fh-rbar__crumb { display: flex; align-items: center; gap: 4px; flex: 0 1 38%; }
.fh-rbar__crumb i { width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(135deg, #8bc06a, #4f7d3a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.fh-rbar__crumb span { flex: 1; height: 4px; border-radius: 2px; background: rgba(246, 238, 219, 0.75); }
.fh-rbar__star { width: 9px; height: 9px; background: var(--f-gold); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 80% 100%, 50% 78%, 20% 100%, 29% 61%, 0 38%, 37% 35%); }
.fh-rbar__plate {
  width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #f2cf7e, #c8923c 60%, #9a6a26);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.7), inset 0 -1px 0 rgba(90, 55, 20, 0.6), 0 1px 0 rgba(0, 0, 0, 0.35);
}
.fh-rbar__plate--search { margin-left: auto; }
.fh-rbar__pull {
  position: absolute; left: 50%; bottom: -5px; width: 16px; height: 6px; translate: -50% 0; border-radius: 0 0 4px 4px;
  background: #4d2042; box-shadow: inset 0 -1px 0 rgba(242, 193, 78, 0.7);
}

/* JSON to page */
.fh-flow__row { display: grid; grid-template-columns: 1.15fr auto 0.85fr; gap: 1.6rem; align-items: center; }
.fh-code { border-radius: 18px; background: #10131d; border: 1px solid var(--f-line); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.fh-code__bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; background: rgba(230, 235, 242, 0.04); border-bottom: 1px solid var(--f-line); }
.fh-code__bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff6b5e; }
.fh-code__bar i:nth-child(2) { background: #ffc145; }
.fh-code__bar i:nth-child(3) { background: #3ccf6e; }
.fh-code__bar span { margin-left: 0.6rem; font-size: 0.75rem; color: #9aa8bd; font-family: var(--md-code-font-family); }
.fh-code pre { margin: 0 !important; padding: 1.2rem 1.4rem !important; min-height: 14.5rem; background: transparent !important; font-size: 0.82rem; line-height: 1.7; color: #f6eedb; }
.fh-code pre code { background: transparent !important; padding: 0 !important; color: inherit; white-space: pre; }
.fh-code .k { color: #f2c14e; } .fh-code .s { color: #4fd1c5; } .fh-code .p { color: #9aa8bd; }
.fh-caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--f-teal); animation: f-blink 1s steps(1) infinite; }
@keyframes f-blink { 50% { opacity: 0; } }
.fh-arrow { width: 4rem; height: 2px; position: relative; background: linear-gradient(90deg, transparent, var(--f-teal)); }
.fh-arrow span { position: absolute; right: -2px; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--f-teal); border-right: 2px solid var(--f-teal); transform: rotate(45deg); }
.fh-arrow::after { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--f-gold); box-shadow: 0 0 12px var(--f-teal); animation: f-travel 2.2s var(--f-ease) infinite; }
@keyframes f-travel { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: 100%; opacity: 0; } }
.fh-paper { padding: 1.8rem; border-radius: 6px 16px 16px 6px; background: var(--f-paper); color: var(--f-ink); box-shadow: inset 14px 0 22px -14px rgba(90, 58, 36, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.6); transform: rotate(1.5deg); }
.fh-paper__title { font-family: var(--f-serif); font-size: 1.5rem; font-weight: 800; margin-bottom: 0.6rem !important; border-bottom: 2px solid rgba(79, 209, 197, 0.6); padding-bottom: 0.3rem; }
.fh-paper__text { line-height: 1.6; margin-bottom: 1rem !important; }
.fh-paper.is-in .fh-paper__text, .fh-paper.is-in .fh-recipe { animation: f-ink 1.4s var(--f-ease) both; }
.fh-paper.is-in .fh-recipe { animation-delay: 0.5s; }
@keyframes f-ink { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.fh-recipe { display: flex; align-items: center; gap: 0.8rem; }
.fh-recipe__grid { display: grid; grid-template-columns: repeat(3, 1.6rem); gap: 3px; }
.fh-recipe__grid i, .fh-recipe__out { width: 1.6rem; height: 1.6rem; border-radius: 3px; background: rgba(58, 42, 28, 0.12); box-shadow: inset 0 0 0 1px rgba(58, 42, 28, 0.25); }
.fh-recipe__grid .p { background: linear-gradient(135deg, #c99a5b, #a3743f); }
.fh-recipe__arrow { width: 1.4rem; height: 0.35rem; background: var(--f-teal); border-radius: 2px; }
.fh-recipe__out { width: 2.2rem; height: 2.2rem; background: linear-gradient(135deg, #b98a50, #7a5230); animation: f-pop 2.6s var(--f-spring) infinite; }
.fh-center { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 2.6rem; }

/* Versions and license */
.fh-glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.2rem; align-items: stretch; }
.fh-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.8rem; border-radius: 22px; background: var(--f-surface); border: 1px solid var(--f-line); }
.md-typeset .fh-panel h3 { font-size: 1.4rem; }
.md-typeset ul.fh-rows { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 0.6rem; }
.md-typeset ul.fh-rows li {
  list-style: none; margin: 0 !important; display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.8rem 1rem; border-radius: 14px; background: var(--f-surface); border: 1px solid var(--f-line);
  transition: border-color 0.3s, transform 0.4s var(--f-ease);
}
.md-typeset ul.fh-rows li:hover { border-color: color-mix(in srgb, var(--f-teal) 55%, transparent); transform: translateX(3px); }
.md-typeset .fh-rows b { font-family: var(--f-serif); font-size: 1.15rem; }
.fh-rows span { color: var(--f-muted); line-height: 1.55; }
.fh-rows--license li { border-left-width: 3px !important; }
.fh-rows--license .yes { border-left-color: #4fd1c5 !important; }
.fh-rows--license .credit { border-left-color: var(--f-gold) !important; }
.fh-rows--license .no { border-left-color: #d64545 !important; }
.fh-panel__note { margin-top: auto !important; color: var(--f-muted); font-size: 0.95rem; }

/* Closing call */
.fh-cta { position: relative; max-width: 60rem; margin: 5.5rem auto 4.5rem; padding: 4rem 1.5rem; text-align: center; border-radius: 32px; display: grid; gap: 1.2rem; justify-items: center; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 90% 140% at 50% 0%, rgba(79, 209, 197, 0.12), transparent 65%), var(--f-surface);
  border: 1px solid var(--f-line); box-shadow: inset 0 1px 0 rgba(242, 193, 78, 0.18); }
/* A soft lamp glow rising from the top of the frame, breathing slowly. */
.fh-cta::before {
  content: ""; position: absolute; left: 50%; top: -35%; width: 80%; height: 110%; z-index: -1; pointer-events: none; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(242, 193, 78, 0.22), rgba(79, 209, 197, 0.08) 55%, transparent);
  filter: blur(18px); animation: f-breathe 7s ease-in-out infinite;
}
@keyframes f-breathe { 50% { opacity: 0.65; transform: scale(1.08); } }
.md-typeset .fh-cta h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; }
.fh-cta p { color: var(--f-muted); font-size: 1.05rem; }

/* ---------- Light pages ---------- */
/* On paper the panels are white sheets lifted off the page by a soft shadow, the top bars are near-solid night blue,
   and the shimmering word and gilt lines take deeper inks so they read on cream. */
[data-md-color-scheme="default"] .fh-card, [data-md-color-scheme="default"] .fh-panel, [data-md-color-scheme="default"] .fh-cta,
[data-md-color-scheme="default"] .fh-btn:not(.fh-btn--primary), [data-md-color-scheme="default"] .fh-eyebrow,
[data-md-color-scheme="default"] .md-typeset ul.fh-chips li {
  box-shadow: 0 1px 2px rgba(23, 28, 43, 0.06), 0 14px 34px -20px rgba(23, 28, 43, 0.3);
}
[data-md-color-scheme="default"] .md-typeset pre > code { box-shadow: inset 0 0 0 1px rgba(38, 48, 74, 0.1); }
[data-md-color-scheme="default"] .md-typeset :not(pre) > code { box-shadow: inset 0 0 0 1px rgba(38, 48, 74, 0.08); }
[data-md-color-scheme="default"] .fh-panel .fh-rows li { background: var(--f-surface-2); }
[data-md-color-scheme="default"] .fh-btn:not(.fh-btn--primary):not(.fh-btn--ghost) { background: #fff; }
[data-md-color-scheme="default"] .fh-btn--ghost { background: transparent; box-shadow: none; }
[data-md-color-scheme="default"] .fh-btn::before { background-image: linear-gradient(120deg, transparent 30%, rgba(79, 209, 197, 0.12) 46%, rgba(79, 209, 197, 0.2) 50%, rgba(79, 209, 197, 0.12) 54%, transparent 70%); }
[data-md-color-scheme="default"] .fh-shimmer { background-image: linear-gradient(110deg, #b0820f 0%, #1a6f66 30%, #3fb3a7 50%, #1a6f66 70%, #155d55 100%); }
[data-md-color-scheme="default"] .fh-paper { box-shadow: inset 14px 0 22px -14px rgba(90, 58, 36, 0.35), 0 0 0 1px rgba(38, 48, 74, 0.12), 0 24px 50px -26px rgba(23, 28, 43, 0.45); }
[data-md-color-scheme="default"] .fh-paper__title { border-bottom-color: rgba(26, 111, 102, 0.55); }
[data-md-color-scheme="default"] .fh-code { box-shadow: 0 24px 50px -26px rgba(23, 28, 43, 0.55); }
[data-md-color-scheme="default"] .fh-card:hover { box-shadow: 0 30px 60px -30px rgba(26, 111, 102, 0.45); }

/* ---------- Small screens ---------- */
@media (max-width: 960px) {
  .fh-hero { min-height: 0; padding-bottom: 4rem; }
  .fh-hero__inner { grid-template-columns: 1fr; gap: 1rem; }
  .fh-stage { height: 19rem; order: -1; }
  .fh-stage { --w: 9.5rem; --h: 13rem; }
  .fh-book__shadow { width: 20rem; bottom: 1rem; }
  .fh-scroll { display: none; }
  .fh-grid { grid-template-columns: 1fr 1fr; }
  .fh-glance { grid-template-columns: minmax(0, 1fr); }
  .fh-flow__row { grid-template-columns: 1fr; }
  .fh-arrow { width: 2px; height: 3rem; margin: 0 auto; background: linear-gradient(180deg, transparent, var(--f-teal)); }
  .fh-arrow span { right: -5px; top: auto; bottom: -2px; transform: rotate(135deg); }
  .fh-arrow::after { display: none; }
}
@media (max-width: 640px) {
  .fh-hero { padding-top: 2rem; }
  .fh-duo, .fh-grid, .fh-glance { grid-template-columns: 1fr; }
  .md-typeset ul.fh-rows li { grid-template-columns: 1fr; gap: 0.2rem; }
  .fh-section { padding-top: 4rem; }
  .fh-book__shadow { width: 16rem; }
}

/* ---------- Less motion when asked ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .fh-book__cover, .fh-book__leaf, .fh-book > .fh-book__bar, .fh-book__mover { animation: none !important; }
  .fh-book__mover { transform: translateX(calc(var(--w) * 0.4)); }
  .fh-book__cover { transform: translateZ(-6px) rotateY(-179.6deg); }
  .fh-book__leaf--1 { transform: translateZ(-2px) rotateY(-179deg); }
  .fh-book__leaf--2 { transform: translateZ(-1.2px) rotateY(-178.7deg); }
  .fh-book__leaf--3 { transform: translateZ(-0.4px) rotateY(-178.4deg); }
  .fh-book__leaf--4 { transform: translateZ(0.4px) rotateY(-178.1deg); }
  .fh-book__leaf--5 { transform: translateZ(1.2px) rotateY(-177.8deg); }
  .fh-book__leaf--6 { transform: translateZ(2px) rotateY(-177.5deg); }
}