.creation-folio {
  --folio-paper: #fbfcfa;
  --folio-ink: #172a29;
  --folio-muted: #516764;
  --folio-rule: #d1ddda;
  --folio-teal: #17665d;
  --folio-red: #9d3e32;
  --folio-width: 1040px;
  background: var(--folio-paper);
  color: var(--folio-ink);
  min-height: 100vh;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.creation-folio *, .creation-folio *::before, .creation-folio *::after { box-sizing: border-box; }
.creation-folio a { color: inherit; text-decoration: none; }
.creation-folio a:focus-visible, .creation-folio button:focus-visible { outline: 2px solid var(--folio-teal); outline-offset: 3px; }
.folio-hero {
  display: flex;
  align-items: center;
  min-height: 300px;
  color: #fff;
  background: #173c3a var(--folio-landscape) center 54% / cover no-repeat;
  box-shadow: inset 0 0 0 100vmax rgb(11 41 38 / 55%);
}
.folio-hero-inner, .folio-body, .folio-nav {
  width: min(var(--folio-width), calc(100% - 48px));
  margin-inline: auto;
}
.folio-hero-inner { padding-block: 36px; }
.folio-hero .folio-imprint {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 9px;
  background: #a34335;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.folio-hero h1 {
  margin: 0;
  border: 0;
  max-width: 22em;
  color: #fff;
  font: 400 2.3rem/1.45 "FZKai-Z03", "Kaiti SC", STKaiti, KaiTi, serif;
  text-shadow: 0 2px 10px #123531;
  letter-spacing: 0;
}
.folio-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; border-bottom: 1px solid var(--folio-rule); padding-block: 10px; }
.folio-nav a { padding-block: 3px; font-size: 0.8rem; color: var(--folio-muted); }
.folio-nav a:hover { color: var(--folio-red); text-decoration: underline; text-underline-offset: 4px; }
.folio-section { margin-block: 24px; scroll-margin-top: 14px; }
.folio-heading { display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px; }
.folio-heading > span { color: var(--folio-red); font: 650 0.72rem/1 Consolas, monospace; }
.folio-heading h2 { margin: 0; padding: 0; border: 0; color: var(--folio-ink); font-size: 1.15rem; line-height: 1.3; }
.folio-books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.creation-folio .folio-book {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  padding: 9px 10px;
  border-top: 3px solid var(--book-ink);
  background: var(--book-paper);
  color: var(--book-ink);
}
.folio-book--1 { --book-ink: #295561; --book-paper: #e8f2f5; }
.folio-book--2 { --book-ink: #8b4d16; --book-paper: #fbefcf; }
.folio-book--3 { --book-ink: #1d6254; --book-paper: #e4f1e9; }
.folio-book--4 { --book-ink: #8d3b32; --book-paper: #f6e7e3; }
.folio-book-mark { display: block; width: 38px; }
.folio-book-mark svg { display: block; width: 100%; height: auto; }
.folio-book-title { display: grid; gap: 2px; }
.folio-book-title small { font: 0.69rem Consolas, monospace; }
.folio-book-title b { font: 700 1rem/1.35 "Kaiti SC", STKaiti, KaiTi, "Microsoft YaHei", serif; }
.folio-arrow { font: 0.8rem Arial, sans-serif; }
.folio-book:hover b, .folio-link:hover b { text-decoration: underline; text-underline-offset: 4px; }
.folio-groups { display: grid; gap: 0 18px; border-top: 1px solid var(--folio-rule); }
.folio-groups--library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.folio-groups--languages { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #edf5f1; }
.folio-group { min-width: 0; padding: 9px 0 0; }
.folio-group + .folio-group { padding-left: 14px; border-left: 1px solid var(--folio-rule); }
.folio-groups--languages .folio-group { padding: 9px 12px 3px; }
.folio-group h3 { margin: 0 0 4px; color: var(--folio-teal); font-size: 0.75rem; line-height: 1.4; }
.creation-folio .folio-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--folio-rule);
  font-size: 0.81rem;
  line-height: 1.45;
}
.folio-link b { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.folio-link span { color: var(--folio-muted); font-size: 0.62rem; white-space: nowrap; }
.folio-link:last-child { border-bottom: 0; }
.folio-updates-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.folio-updates-head .creation-year-filter { flex-wrap: wrap; }
.creation-folio .folio-update { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; border-top: 1px solid var(--folio-rule); }
.folio-update time { display: flex; align-items: baseline; gap: 5px; color: var(--folio-muted); font: 0.69rem Consolas, monospace; }
.folio-update time strong { color: var(--folio-teal); }
.folio-update > a { display: block; padding: 7px 0; }
.folio-update h3 { margin: 0; color: var(--folio-ink); font-size: 0.81rem; line-height: 1.4; }
.folio-update > a:hover h3 { color: var(--folio-red); }
.creation-folio .creation-pagination[hidden] { display: none; }
.folio-footer { border-top: 1px solid var(--folio-rule); padding: 12px 0 22px; color: var(--folio-muted); font: 0.69rem Consolas, monospace; }

@media (max-width: 760px) {
  .folio-hero { min-height: 205px; }
  .folio-hero h1 { font-size: 1.65rem; }
  .folio-hero-inner, .folio-body, .folio-nav { width: calc(100% - 30px); }
  .folio-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-groups--library { grid-template-columns: minmax(0, 1fr); }
  .folio-groups--library .folio-group + .folio-group { padding-left: 0; border-left: 0; border-top: 1px solid var(--folio-rule); }
}
@media (max-width: 390px) {
  .folio-book-mark { width: 27px; }
  .creation-folio .folio-book { padding-inline: 6px; gap: 5px; }
}