.story-library-page {
  --library-ink: #19234b;
  --library-muted: #64708b;
  --library-paper: #fbfaf8;
  --library-lavender: #f1effb;
  --library-line: #e5e3ef;
  --library-gold: #e6bc70;
  color: var(--library-ink);
  background: var(--library-paper);
}

.story-library-page .library-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: clamp(30px, 4vw, 54px) 0;
  color: #fffaf0;
  background:
    radial-gradient(ellipse at 76% 44%, rgba(87, 111, 190, .48), transparent 34%),
    radial-gradient(ellipse at 12% 100%, rgba(138, 104, 189, .3), transparent 42%),
    linear-gradient(117deg, #101a3d 3%, #172a58 58%, #282454 100%);
}

.story-library-page .library-hero::before,
.story-library-page .library-hero::after {
  position: absolute;
  border: 1px solid rgba(237, 219, 174, .14);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.story-library-page .library-hero::before {
  width: 430px;
  height: 430px;
  right: 8%;
  top: -230px;
}

.story-library-page .library-hero::after {
  width: 560px;
  height: 560px;
  right: -1%;
  bottom: -430px;
}

.story-library-page .library-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, .75fr);
  align-items: center;
  gap: clamp(20px, 4vw, 54px);
}

.story-library-page .library-hero-copy { max-width: 760px; }
.story-library-page .library-back-link { display: flex; width: fit-content; margin-bottom: 16px; color: #e9e5ff; font-weight: 700; text-decoration: none; }
.story-library-page .library-back-link:hover { color: #fff; }
.story-library-page .library-hero .eyebrow { color: #e8c984; }
.story-library-page .library-hero h1 { max-width: 760px; margin: 12px 0 13px; color: #fffaf0; font-family: Nunito, Manrope, sans-serif; font-size: clamp(2.25rem, 4.3vw, 3.85rem); line-height: 1.02; letter-spacing: -.045em; }
.story-library-page .library-hero h1 em { color: #e7c57f; font-style: normal; }
.story-library-page .library-hero-copy > p { max-width: 640px; margin: 0; color: rgba(255, 250, 240, .83); font-size: clamp(.97rem, 1.15vw, 1.08rem); line-height: 1.55; }
.story-library-page .library-hero-points { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 18px; color: #f4ecd8; font-size: .88rem; }
.story-library-page .library-hero-points span { display: inline-flex; align-items: center; gap: 8px; }
.story-library-page .library-hero-points i { color: var(--library-gold); font-style: normal; }

.story-library-page .library-hero-art { position: relative; display: grid; min-height: 230px; place-items: center; isolation: isolate; }
.story-library-page .library-hero-art::before { position: absolute; z-index: -1; width: min(26vw, 300px); aspect-ratio: 1; border: 1px solid rgba(238, 214, 161, .3); border-radius: 50%; background: radial-gradient(circle, rgba(238, 214, 161, .09), rgba(198, 185, 255, .035) 48%, transparent 74%); box-shadow: 0 0 0 22px rgba(221, 205, 255, .03), 0 0 0 48px rgba(221, 205, 255, .018); content: ""; }
.story-library-page .library-hero-illustration { position: relative; z-index: 1; display: block; width: min(100%, 360px); max-height: 300px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(35, 24, 60, .18)); }

.story-library-page .library-catalog { padding-top: clamp(30px, 4vw, 50px); }
.story-library-page .library-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.story-library-page .library-section-heading h2 { margin: 9px 0; color: var(--library-ink); font-family: Nunito, Manrope, sans-serif; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: -.035em; }
.story-library-page .library-section-heading h2 em { color: #876bb6; font-style: normal; }
.story-library-page .library-section-heading p { max-width: 650px; margin: 0; color: var(--library-muted); font-size: 1.03rem; line-height: 1.65; }
.story-library-page .library-create-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 12px 16px; border: 1px solid var(--library-line); border-radius: 999px; color: #4b5480; background: #fff; font-weight: 800; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.story-library-page .library-create-link:hover { border-color: #b9abd9; transform: translateY(-2px); }

.story-library-page .library-filters { display: grid; grid-template-columns: minmax(230px, 1.6fr) minmax(150px, .85fr) minmax(130px, .7fr) auto; align-items: end; gap: 14px; margin: 0 0 24px; padding: 18px; border: 1px solid var(--library-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(34, 43, 83, .045); }
.story-library-page .library-filter { display: grid; gap: 7px; min-width: 0; color: #414d73; font-size: .86rem; font-weight: 800; }
.story-library-page .library-filter input,
.story-library-page .library-filter select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #dcd9e8; border-radius: 13px; color: #202a4d; background: #fcfbfe; font: inherit; font-size: .96rem; }
.story-library-page .library-filter input::placeholder { color: #8189a0; opacity: 1; }
.story-library-page .library-filter input:focus-visible,
.story-library-page .library-filter select:focus-visible,
.story-library-page .library-reset:focus-visible,
.story-library-page .library-card-button:focus-visible,
.story-library-page .library-empty button:focus-visible { outline: 3px solid rgba(118, 91, 179, .35); outline-offset: 2px; }
.story-library-page .library-reset { min-height: 46px; padding: 0 15px; border: 0; border-radius: 13px; color: #596382; background: #f0eff6; font: inherit; font-weight: 800; cursor: pointer; transition: background .18s ease; }
.story-library-page .library-reset:hover { background: #e6e3f0; }

.story-library-page .library-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 2px 17px; color: var(--library-muted); font-size: .93rem; }
.story-library-page .library-results-bar p { margin: 0; color: #364267; font-weight: 800; }
.story-library-page .library-results-bar span { text-align: right; }
.story-library-page .library-category-context { margin: -4px 2px 16px; padding: 10px 14px; border: 1px solid #e7e0f1; border-radius: 13px; color: #51446f; background: linear-gradient(110deg, #f5f0fb, #fffaf0); font-size: .92rem; font-weight: 700; }
.story-library-page .library-category-context[hidden] { display: none; }
.story-library-page .library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.story-library-page .library-card { --card-accent: #7258b4; --card-tint: #f3f0fb; display: flex; min-height: 318px; flex-direction: column; padding: 22px; border: 1px solid var(--library-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 26px rgba(35, 43, 83, .045); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.story-library-page .library-card:hover { border-color: color-mix(in srgb, var(--card-accent) 35%, white); box-shadow: 0 18px 42px rgba(35, 43, 83, .1); transform: translateY(-3px); }
.story-library-page .library-card[data-theme="steps"] { --card-accent: #4b70bd; --card-tint: #edf3ff; }
.story-library-page .library-card[data-theme="friendship"] { --card-accent: #a65085; --card-tint: #fbf0f6; }
.story-library-page .library-card[data-theme="calm"] { --card-accent: #6876b7; --card-tint: #f0f2fc; }
.story-library-page .library-card[data-theme="adventure"] { --card-accent: #a96e38; --card-tint: #fbf2e9; }
.story-library-page .library-card[data-theme="animals"] { --card-accent: #4d846b; --card-tint: #edf6f0; }
.story-library-page .library-card[data-theme="space"] { --card-accent: #5864a0; --card-tint: #eff0fb; }
.story-library-page .library-card[data-theme="magic"] { --card-accent: #7658b2; --card-tint: #f3effb; }
.story-library-page .library-card[data-theme="family"] { --card-accent: #bd7653; --card-tint: #fff3ee; }
.story-library-page .library-card[data-theme="nature"] { --card-accent: #588565; --card-tint: #eff6ef; }
.story-library-page .library-card[data-theme="creativity"] { --card-accent: #936fa4; --card-tint: #f6f0f8; }
.story-library-page .library-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.story-library-page .library-card-symbol { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 15px; color: var(--card-accent); background: var(--card-tint); font-size: 1.35rem; }
.story-library-page .library-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.story-library-page .library-card-category { color: var(--card-accent); font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.story-library-page .library-card-age { color: #66708a; font-size: .82rem; font-weight: 700; }
.story-library-page .library-card h3 { margin: 0 0 10px; color: #202a4e; font-family: Nunito, Manrope, sans-serif; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; }
.story-library-page .library-card-teaser { margin: 0 0 14px; color: #59637d; font-size: .94rem; line-height: 1.55; }
.story-library-page .library-card details { margin: 0 0 14px; border-top: 1px solid #eeedf4; }
.story-library-page .library-card details summary { padding: 12px 0 7px; color: #5a5487; font-size: .85rem; font-weight: 800; cursor: pointer; }
.story-library-page .library-card details p { margin: 2px 0 11px; color: #59637d; font-size: .88rem; line-height: 1.55; }
.story-library-page .library-card-skill { display: grid; gap: 4px; margin: auto 0 17px; padding: 12px 14px; border-radius: 14px; color: #59637d; background: var(--card-tint); font-size: .82rem; line-height: 1.45; }
.story-library-page .library-card-skill strong { color: #344064; font-size: .87rem; }
.story-library-page .library-card-button { display: inline-flex; width: 100%; min-height: 47px; align-items: center; justify-content: center; padding: 11px 14px; border: 0; border-radius: 14px; color: #fffaf0; background: linear-gradient(105deg, #202d59, #493f7c); font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.story-library-page .library-card-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.story-library-page .library-empty { padding: 45px 20px; border: 1px dashed #c9c4da; border-radius: 22px; text-align: center; background: #fff; }
.story-library-page .library-empty[hidden] { display: none; }
.story-library-page .library-empty > span { color: #8a70bb; font-size: 2.2rem; }
.story-library-page .library-empty h3 { margin: 8px 0; font-family: Nunito, Manrope, sans-serif; font-size: 1.5rem; }
.story-library-page .library-empty p { margin: 0 0 20px; color: var(--library-muted); }
.story-library-page .library-note { display: flex; align-items: flex-start; gap: 13px; margin-top: 27px; padding: 17px 19px; border: 1px solid #e8dfc8; border-radius: 17px; color: #5c5b64; background: #fffaf0; }
.story-library-page .library-note-mark { color: #b18a42; font-size: 1.2rem; }
.story-library-page .library-note p { margin: 0; font-size: .92rem; line-height: 1.6; }
.story-library-page .library-note strong { color: #493e2b; }

.story-library-page .library-next-step { padding: clamp(43px, 6vw, 68px) 0; color: #fffaf0; background: linear-gradient(110deg, #151f46, #28214f); }
.story-library-page .library-next-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.story-library-page .library-next-inner .eyebrow { color: #e8c984; }
.story-library-page .library-next-inner h2 { margin: 9px 0 7px; font-family: Nunito, Manrope, sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.1; }
.story-library-page .library-next-inner h2 em { color: #e7c57f; font-style: normal; }
.story-library-page .library-next-inner p { max-width: 650px; margin: 0; color: rgba(255, 250, 240, .8); line-height: 1.6; }
.story-library-page .library-next-inner .button { flex: 0 0 auto; }
.story-library-page .site-footer { margin-top: 0; }

@media (max-width: 980px) {
  .story-library-page .library-hero { min-height: 0; padding: 40px 0; }
  .story-library-page .library-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 24px; }
  .story-library-page .library-hero-art { min-height: 200px; }
  .story-library-page .library-hero-illustration { max-height: 240px; }
  .story-library-page .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-library-page .library-filters { grid-template-columns: minmax(0, 1.4fr) minmax(150px, .8fr) minmax(120px, .7fr); }
  .story-library-page .library-reset { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 680px) {
  .story-library-page .library-hero { min-height: 0; padding: 28px 0 24px; }
  .story-library-page .library-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .story-library-page .library-back-link { margin-bottom: 14px; }
  .story-library-page .library-hero h1 { margin: 10px 0 11px; font-size: clamp(2.2rem, 9vw, 2.8rem); line-height: 1.04; }
  .story-library-page .library-hero-copy > p { font-size: .97rem; line-height: 1.55; }
  .story-library-page .library-hero-art { min-height: 112px; margin-top: 3px; }
  .story-library-page .library-hero-art::before { width: 120px; }
  .story-library-page .library-hero-illustration { width: min(72vw, 190px); max-height: 138px; }
  .story-library-page .library-hero-points { gap: 8px 14px; margin-top: 14px; font-size: .84rem; }
  .story-library-page .library-catalog { padding-top: 30px; }
  .story-library-page .library-section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .story-library-page .library-create-link { align-self: flex-start; }
  .story-library-page .library-filters { grid-template-columns: 1fr; gap: 12px; padding: 15px; border-radius: 18px; }
  .story-library-page .library-reset { width: 100%; grid-column: auto; }
  .story-library-page .library-results-bar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .story-library-page .library-results-bar span { text-align: left; }
  .story-library-page .library-grid { grid-template-columns: 1fr; gap: 13px; }
  .story-library-page .library-card { min-height: 0; padding: 18px; border-radius: 19px; }
  .story-library-page .library-card h3 { font-size: 1.22rem; }
  .story-library-page .library-next-inner { align-items: flex-start; flex-direction: column; }
  .story-library-page .library-next-inner .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .story-library-page *, .story-library-page *::before, .story-library-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Compact rhythm: keep the full illustration and catalogue controls while bringing stories upward. */
.story-library-page .library-hero { padding: clamp(16px, 2vw, 26px) 0; }
.story-library-page .library-back-link { margin-bottom: 8px; }
.story-library-page .library-hero h1 { margin: 6px 0 8px; }
.story-library-page .library-hero-copy > p { line-height: 1.48; }
.story-library-page .library-hero-points { gap: 7px 12px; margin-top: 9px; }
.story-library-page .library-hero-art { min-height: 185px; }
.story-library-page .library-hero-art::before { width: min(23vw, 245px); }
.story-library-page .library-hero-illustration { width: min(100%, 310px); max-height: 220px; }
.story-library-page .library-catalog { padding-top: clamp(14px, 2vw, 24px); }
.story-library-page .library-section-heading { margin-bottom: 12px; }
.story-library-page .library-section-heading h2 { margin: 4px 0; }
.story-library-page .library-section-heading p { line-height: 1.5; }
.story-library-page .library-create-link { padding: 10px 14px; }
.story-library-page .library-filters { gap: 10px; margin-bottom: 12px; padding: 11px; }
.story-library-page .library-filter { gap: 5px; }
.story-library-page .library-filter input,
.story-library-page .library-filter select { min-height: 44px; padding-inline: 12px; }
.story-library-page .library-reset { min-height: 42px; }
.story-library-page .library-results-bar { margin-bottom: 9px; }
.story-library-page .library-grid { gap: 13px; }
.story-library-page .library-card { min-height: 286px; padding: 18px; }
.story-library-page .library-card-top { margin-bottom: 11px; }
.story-library-page .library-card-teaser { margin-bottom: 8px; }
.story-library-page .library-card details { margin-bottom: 8px; }
.story-library-page .library-card-skill { margin-bottom: 10px; padding: 9px 11px; }

@media (max-width: 980px) {
  .story-library-page .library-hero { padding: 18px 0; }
  .story-library-page .library-hero-art { min-height: 145px; }
  .story-library-page .library-hero-art::before { width: min(40vw, 220px); }
  .story-library-page .library-hero-illustration { width: min(100%, 250px); max-height: 190px; }
  .story-library-page .library-catalog { padding-top: 18px; }
  .story-library-page .library-filters { padding: 11px; }
}

@media (max-width: 680px) {
  .story-library-page .library-hero { padding: 14px 0 10px; }
  .story-library-page .library-back-link { margin-bottom: 7px; }
  .story-library-page .library-hero h1 { margin: 5px 0 7px; }
  .story-library-page .library-hero-points { gap: 6px 10px; margin-top: 8px; }
  .story-library-page .library-hero-art { min-height: 140px; margin-top: 4px; }
  .story-library-page .library-hero-art::before { width: clamp(132px, 38vw, 160px); }
  .story-library-page .library-hero-illustration { width: min(68vw, 180px); max-height: 135px; }
  .story-library-page .library-catalog { padding-top: 12px; }
  .story-library-page .library-section-heading { gap: 9px; margin-bottom: 10px; }
  .story-library-page .library-filters { gap: 8px; margin-bottom: 11px; padding: 10px; }
  .story-library-page .library-results-bar { margin-bottom: 8px; }
  .story-library-page .library-grid { gap: 10px; }
  .story-library-page .library-card { padding: 15px; }
  .story-library-page .library-card-skill { margin-bottom: 9px; padding: 9px 10px; }
}

/* A brighter, storybook finish for the library, scoped to this page and both themes. */
html[data-theme="day"] body.story-library-page {
  --library-ink: #41344f;
  --library-muted: #70677b;
  --library-paper: #fffaf5;
  --library-line: #e9ddec;
  color: var(--library-ink) !important;
  background: radial-gradient(ellipse at 12% 8%, rgba(226, 207, 246, .19), transparent 30%), #fffaf5 !important;
}

html[data-theme="day"] body.story-library-page .library-hero {
  color: #46374f !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .94), transparent 27%),
    radial-gradient(circle at 79% 72%, rgba(215, 193, 244, .46), transparent 30%),
    radial-gradient(circle at 91% 14%, rgba(255, 218, 211, .64), transparent 23%),
    linear-gradient(118deg, #fff4e4 0%, #f1e9fa 54%, #ffedf0 100%) !important;
}

html[data-theme="day"] body.story-library-page .library-hero :is(h1, p, .library-back-link, .library-hero-points) {
  color: #51445f !important;
}

html[data-theme="day"] body.story-library-page .library-hero h1 em,
html[data-theme="day"] body.story-library-page .library-hero .eyebrow,
html[data-theme="day"] body.story-library-page .library-hero-points i {
  color: #815a9a !important;
}

html[data-theme="day"] body.story-library-page .library-hero .eyebrow {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid rgba(131, 91, 156, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

html[data-theme="day"] body.story-library-page .library-hero-points span {
  padding: 3px 8px;
  border: 1px solid rgba(143, 116, 162, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

html[data-theme="day"] body.story-library-page .library-hero::before { border-color: rgba(126, 94, 151, .18); }
html[data-theme="day"] body.story-library-page .library-hero::after { border-color: rgba(201, 131, 156, .16); }
html[data-theme="day"] body.story-library-page .library-hero-art::before {
  border-color: rgba(148, 109, 169, .3);
  background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(227, 209, 247, .26) 50%, transparent 74%);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .23), 0 0 0 40px rgba(223, 201, 241, .16), 0 0 50px rgba(211, 176, 223, .26);
}
html[data-theme="day"] body.story-library-page .library-hero-art::after {
  position: absolute;
  top: 11%;
  right: 14%;
  color: #a678b4;
  content: "✦";
  font-size: 1.7rem;
  text-shadow: 0 0 18px rgba(255, 255, 255, .95);
}

html[data-theme="day"] body.story-library-page .library-catalog {
  background: radial-gradient(ellipse at 93% 5%, rgba(226, 211, 244, .22), transparent 29%), linear-gradient(180deg, #fffaf5, #fffdf9 56%, #fff8f4) !important;
}

html[data-theme="day"] body.story-library-page .library-section-heading .eyebrow { color: #79568e !important; }
html[data-theme="day"] body.story-library-page .library-section-heading h2 { color: #493953 !important; }
html[data-theme="day"] body.story-library-page .library-section-heading h2 em { color: #9468a6 !important; }
html[data-theme="day"] body.story-library-page .library-section-heading p { color: #6b6276 !important; }

html[data-theme="day"] body.story-library-page .library-create-link {
  border-color: #e5d7eb !important;
  color: #674d7c !important;
  background: linear-gradient(135deg, #fff, #faf3fc) !important;
  box-shadow: 0 7px 20px rgba(111, 75, 135, .08);
}

html[data-theme="day"] body.story-library-page .library-filters {
  border-color: #e6dcec !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(250, 245, 252, .98)) !important;
  box-shadow: 0 12px 28px rgba(95, 70, 112, .08);
}
html[data-theme="day"] body.story-library-page .library-filter { color: #564a63 !important; }
html[data-theme="day"] body.story-library-page .library-filter :is(input, select) {
  border-color: #ddd1e5 !important;
  color: #40364c !important;
  background: #fffefd !important;
}
html[data-theme="day"] body.story-library-page .library-reset {
  color: #644d78 !important;
  background: #f1eaf6 !important;
}
html[data-theme="day"] body.story-library-page .library-reset:hover { background: #e9def1 !important; }
html[data-theme="day"] body.story-library-page .library-results-bar { color: #71687b !important; }
html[data-theme="day"] body.story-library-page .library-results-bar p { color: #51445f !important; }

html[data-theme="day"] body.story-library-page .library-card {
  border-color: color-mix(in srgb, var(--card-accent) 19%, #fff) !important;
  background: linear-gradient(145deg, #fffefd 8%, var(--card-tint) 150%) !important;
  box-shadow: 0 10px 26px rgba(86, 66, 106, .075);
}
html[data-theme="day"] body.story-library-page .library-card:hover {
  box-shadow: 0 18px 36px rgba(105, 74, 130, .14);
}
html[data-theme="day"] body.story-library-page .library-card-symbol {
  border: 1px solid color-mix(in srgb, var(--card-accent) 15%, white);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--card-accent) 13%, transparent);
}
html[data-theme="day"] body.story-library-page .library-card-category { color: #594665 !important; }
html[data-theme="day"] body.story-library-page .library-card-age { color: #6c6477 !important; }
html[data-theme="day"] body.story-library-page .library-card h3 { color: #41364e !important; }
html[data-theme="day"] body.story-library-page .library-card-teaser,
html[data-theme="day"] body.story-library-page .library-card details p { color: #5d5669 !important; }
html[data-theme="day"] body.story-library-page .library-card-skill {
  border: 1px solid color-mix(in srgb, var(--card-accent) 13%, white);
  color: #5a5265 !important;
  background: linear-gradient(120deg, var(--card-tint), #fff9fb) !important;
}
html[data-theme="day"] body.story-library-page .library-card-skill strong { color: #473b56 !important; }
html[data-theme="day"] body.story-library-page .library-card-button {
  color: #fff !important;
  background: linear-gradient(105deg, #7252aa, #95609f) !important;
  box-shadow: 0 7px 16px rgba(105, 72, 143, .2);
}
html[data-theme="day"] body.story-library-page .library-card-button:hover { filter: brightness(1.08); }

html[data-theme="night"] body.story-library-page {
  --library-ink: #f3efff;
  --library-muted: #d0cada;
  --library-paper: #11182d;
  background: radial-gradient(ellipse at 12% 12%, rgba(127, 94, 158, .12), transparent 30%), #11182d !important;
}
html[data-theme="night"] body.story-library-page .library-hero {
  background:
    radial-gradient(circle at 76% 40%, rgba(134, 105, 184, .3), transparent 32%),
    radial-gradient(circle at 12% 96%, rgba(193, 122, 159, .16), transparent 38%),
    linear-gradient(118deg, #151d39, #282344 58%, #27395a) !important;
}
html[data-theme="night"] body.story-library-page .library-hero :is(h1, p, .library-back-link, .library-hero-points) { color: #f1edf7 !important; }
html[data-theme="night"] body.story-library-page .library-hero h1 em,
html[data-theme="night"] body.story-library-page .library-hero .eyebrow { color: #f0c9df !important; }
html[data-theme="night"] body.story-library-page .library-hero .eyebrow,
html[data-theme="night"] body.story-library-page .library-hero-points span {
  border: 1px solid rgba(230, 214, 247, .18);
  border-radius: 999px;
  background: rgba(37, 39, 68, .48);
}
html[data-theme="night"] body.story-library-page .library-hero-art::after {
  position: absolute;
  top: 11%;
  right: 14%;
  color: #e6c989;
  content: "✦";
  font-size: 1.7rem;
  text-shadow: 0 0 18px rgba(230, 201, 137, .58);
}
html[data-theme="night"] body.story-library-page .library-catalog {
  background: radial-gradient(ellipse at 93% 5%, rgba(124, 98, 159, .12), transparent 30%), #11182d !important;
}
html[data-theme="night"] body.story-library-page .library-section-heading h2 { color: #f3efff !important; }
html[data-theme="night"] body.story-library-page .library-section-heading h2 em { color: #e4c6f1 !important; }
html[data-theme="night"] body.story-library-page .library-section-heading .eyebrow { color: #e6c989 !important; }
html[data-theme="night"] body.story-library-page .library-create-link {
  border-color: #695984 !important;
  color: #f3efff !important;
  background: linear-gradient(135deg, #2c2947, #30334e) !important;
}
html[data-theme="night"] body.story-library-page .library-filters {
  border-color: #514b6a !important;
  background: linear-gradient(135deg, #1b2440, #242541) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
html[data-theme="night"] body.story-library-page .library-filter { color: #e4deef !important; }
html[data-theme="night"] body.story-library-page .library-filter :is(input, select) {
  border-color: #5c5677 !important;
  color: #f4f0ff !important;
  background: #202a47 !important;
}
html[data-theme="night"] body.story-library-page .library-reset { color: #eee7f7 !important; background: #39334f !important; }
html[data-theme="night"] body.story-library-page .library-card {
  border-color: color-mix(in srgb, var(--card-accent) 40%, #49506c) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 15%, #1b2440), #1b2440 78%) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .19);
}
html[data-theme="night"] body.story-library-page .library-card h3 { color: #f5f0ff !important; }
html[data-theme="night"] body.story-library-page .library-card-skill {
  border: 1px solid rgba(230, 220, 245, .12);
  color: #ded8e8 !important;
  background: color-mix(in srgb, var(--card-accent) 18%, #202a47) !important;
}
html[data-theme="night"] body.story-library-page .library-card-skill strong { color: #f2eafb !important; }
html[data-theme="night"] body.story-library-page .library-card-button {
  color: #fff !important;
  background: linear-gradient(105deg, #604b91, #79538e) !important;
  box-shadow: 0 7px 17px rgba(0, 0, 0, .24);
}

@media (max-width: 680px) {
  html[data-theme="day"] body.story-library-page .library-hero .eyebrow { padding: 2px 7px; }
  html[data-theme="day"] body.story-library-page .library-hero-points span { padding: 2px 7px; }
}


/* Cosmic-light adaptation: keep the reference's indigo/cobalt identity in the optional day theme. */
html[data-theme="day"] body.story-library-page {
  --library-ink: #302d5d;
  --library-muted: #5d6081;
  --library-paper: #f4f5ff;
  --library-line: #d9daf1;
  color: var(--library-ink) !important;
  background: radial-gradient(ellipse at 12% 8%, rgba(120, 102, 230, .12), transparent 32%), linear-gradient(135deg, #f4f5ff, #f0f2ff 55%, #fff3f8) !important;
}

html[data-theme="day"] body.story-library-page .library-hero {
  color: #29264f !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .96), transparent 27%),
    radial-gradient(circle at 79% 72%, rgba(99, 115, 220, .16), transparent 32%),
    radial-gradient(circle at 91% 14%, rgba(232, 139, 196, .2), transparent 24%),
    linear-gradient(118deg, #e8eaff 0%, #e9efff 54%, #f7eafb 100%) !important;
}
html[data-theme="day"] body.story-library-page .library-hero :is(h1, p, .library-back-link, .library-hero-points) { color: #343157 !important; }
html[data-theme="day"] body.story-library-page .library-hero h1 em,
html[data-theme="day"] body.story-library-page .library-hero .eyebrow,
html[data-theme="day"] body.story-library-page .library-hero-points i { color: #6249c5 !important; }
html[data-theme="day"] body.story-library-page .library-hero .eyebrow {
  border-color: rgba(91, 73, 190, .2);
  background: rgba(255, 255, 255, .7);
}
html[data-theme="day"] body.story-library-page .library-hero-points span {
  border-color: rgba(91, 73, 190, .17);
  background: rgba(255, 255, 255, .62);
}
html[data-theme="day"] body.story-library-page .library-hero::before,
html[data-theme="day"] body.story-library-page .library-hero::after { border-color: rgba(92, 77, 183, .17); }
html[data-theme="day"] body.story-library-page .library-hero-art::before {
  border-color: rgba(89, 76, 183, .25);
  background: radial-gradient(circle, rgba(255, 255, 255, .88), rgba(131, 142, 225, .16) 50%, transparent 74%);
  box-shadow: 0 0 0 18px rgba(124, 132, 220, .08), 0 0 0 40px rgba(221, 164, 227, .1), 0 0 50px rgba(116, 101, 200, .17);
}
html[data-theme="day"] body.story-library-page .library-hero-art::after { color: #7555cf; }

html[data-theme="day"] body.story-library-page .library-catalog {
  background: radial-gradient(ellipse at 93% 5%, rgba(117, 116, 218, .12), transparent 29%), linear-gradient(180deg, #f4f5ff, #f8f8ff 56%, #fff4fb) !important;
}
html[data-theme="day"] body.story-library-page .library-section-heading h2 { color: #302d5d !important; }
html[data-theme="day"] body.story-library-page .library-section-heading h2 em,
html[data-theme="day"] body.story-library-page .library-section-heading .eyebrow { color: #6249c5 !important; }
html[data-theme="day"] body.story-library-page .library-section-heading p { color: #5d6081 !important; }
html[data-theme="day"] body.story-library-page .library-create-link {
  border-color: #d6d7f1 !important;
  color: #5143a8 !important;
  background: linear-gradient(135deg, #fff, #f0f1ff) !important;
  box-shadow: 0 7px 20px rgba(74, 71, 155, .1);
}
html[data-theme="day"] body.story-library-page .library-filters,
html[data-theme="day"] body.story-library-page .library-empty {
  border-color: #d9daf1 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,242,255,.98)) !important;
  box-shadow: 0 12px 28px rgba(55, 61, 130, .08);
}
html[data-theme="day"] body.story-library-page .library-filter { color: #45426f !important; }
html[data-theme="day"] body.story-library-page .library-filter input,
html[data-theme="day"] body.story-library-page .library-filter select {
  border-color: #cfd2ee !important;
  color: #302d5d !important;
  background: #fbfbff !important;
}
html[data-theme="day"] body.story-library-page .library-results-bar,
html[data-theme="day"] body.story-library-page .library-results-bar p { color: #4e4b76 !important; }
html[data-theme="day"] body.story-library-page .library-card {
  border-color: #dcdcf2 !important;
  color: #302d5d !important;
  background: linear-gradient(145deg, #fff, #f3f4ff 58%, #faf3ff) !important;
  box-shadow: 0 10px 26px rgba(55, 61, 130, .08);
}
html[data-theme="day"] body.story-library-page .library-card h3,
html[data-theme="day"] body.story-library-page .library-card-skill strong { color: #302d5d !important; }
html[data-theme="day"] body.story-library-page .library-card-teaser,
html[data-theme="day"] body.story-library-page .library-card-age,
html[data-theme="day"] body.story-library-page .library-card details p { color: #5d6081 !important; }
html[data-theme="day"] body.story-library-page .library-card details { border-color: #e1e2f4 !important; }
html[data-theme="day"] body.story-library-page .library-card-skill { color: #54547c !important; background: #eff0ff !important; }
html[data-theme="day"] body.story-library-page .library-note {
  border-color: #d8d5ef !important;
  color: #4b4c72 !important;
  background: linear-gradient(120deg, #f1efff, #f1f6ff) !important;
}
html[data-theme="day"] body.story-library-page .library-note strong { color: #393562 !important; }


/* Keep all rotating card tints within the same cool lavender/blue day palette. */
html[data-theme="day"] body.story-library-page .library-card:nth-child(n) {
  border-color: #d9daf1 !important;
  background: linear-gradient(145deg, #fff 0%, #f1f3ff 62%, #f8f0ff 100%) !important;
}


/* Match the supplied bright sky-blue reference across the library page in day mode. */
html[data-theme="day"] body.story-library-page {
  background: radial-gradient(ellipse at 8% 5%, rgba(83, 187, 255, .17), transparent 34rem), radial-gradient(ellipse at 94% 22%, rgba(168, 145, 255, .15), transparent 33rem), linear-gradient(135deg, #e9f7ff, #f1f5ff 58%, #fff) !important;
}
html[data-theme="day"] body.story-library-page .library-hero {
  background: radial-gradient(ellipse at 88% 8%, rgba(255, 255, 255, .78), transparent 40%), linear-gradient(120deg, #dff4ff, #eaf4ff 58%, #f3eeff) !important;
}
html[data-theme="day"] body.story-library-page .library-catalog {
  background: linear-gradient(135deg, #eaf7ff, #f4f6ff 56%, #fff) !important;
}


/* Latest supplied sky-blue reference: white paper, clear blue accents, colorful story imagery. */
html[data-theme="day"] body.story-library-page {
  --library-ink: #17335f;
  --library-muted: #4b6682;
  --library-paper: #f7fbff;
  --library-line: #c6e4f5;
  color: var(--library-ink) !important;
  background: radial-gradient(ellipse at 8% 4%, rgba(105, 198, 253, .2), transparent 34rem), linear-gradient(135deg, #f1f9ff, #ffffff 58%, #eaf6ff) !important;
}
html[data-theme="day"] body.story-library-page .library-hero {
  color: #17335f !important;
  background: radial-gradient(ellipse at 84% 12%, rgba(255, 255, 255, .35), transparent 38%), linear-gradient(118deg, #69c6fd 0%, #bfe9ff 55%, #f3faff 100%) !important;
}
html[data-theme="day"] body.story-library-page .library-hero :is(h1, p, .library-back-link, .library-hero-points) { color: #17335f !important; }
html[data-theme="day"] body.story-library-page .library-hero :is(h1 em, .eyebrow, .library-hero-points i) { color: #126db8 !important; }
html[data-theme="day"] body.story-library-page .library-hero .eyebrow,
html[data-theme="day"] body.story-library-page .library-hero-points span {
  border-color: rgba(22, 119, 200, .18) !important;
  color: #185282 !important;
  background: rgba(255, 255, 255, .72) !important;
}
html[data-theme="day"] body.story-library-page .library-hero-art::before {
  border-color: rgba(22, 119, 200, .22) !important;
  background: radial-gradient(circle, rgba(105, 198, 253, .36), rgba(105, 198, 253, .1) 52%, transparent 74%) !important;
  box-shadow: 0 0 0 18px rgba(105, 198, 253, .12), 0 0 0 40px rgba(105, 198, 253, .07), 0 0 50px rgba(22, 119, 200, .14) !important;
}
html[data-theme="day"] body.story-library-page .library-hero-art::after { color: #1677c8 !important; }
html[data-theme="day"] body.story-library-page .library-catalog { background: linear-gradient(180deg, #edf7ff, #f7fbff 48%, #ffffff 100%) !important; }
html[data-theme="day"] body.story-library-page .library-section-heading h2 { color: #17335f !important; }
html[data-theme="day"] body.story-library-page .library-section-heading :is(h2 em, .eyebrow) { color: #1677c8 !important; }
html[data-theme="day"] body.story-library-page .library-section-heading p { color: #4b6682 !important; }
html[data-theme="day"] body.story-library-page .library-create-link {
  border-color: #9bd7f4 !important;
  color: #126db8 !important;
  background: linear-gradient(135deg, #ffffff, #eaf6ff) !important;
  box-shadow: 0 7px 20px rgba(34, 107, 159, .1) !important;
}
html[data-theme="day"] body.story-library-page :is(.library-filters, .library-empty) {
  border-color: #c6e4f5 !important;
  background: linear-gradient(135deg, #ffffff, #f0f8ff) !important;
  box-shadow: 0 12px 28px rgba(34, 107, 159, .08) !important;
}
html[data-theme="day"] body.story-library-page .library-filter { color: #315475 !important; }
html[data-theme="day"] body.story-library-page .library-filter :is(input, select) {
  border-color: #acd8ef !important;
  color: #17335f !important;
  background: #ffffff !important;
}
html[data-theme="day"] body.story-library-page .library-results-bar,
html[data-theme="day"] body.story-library-page .library-results-bar p { color: #365b7b !important; }
html[data-theme="day"] body.story-library-page .library-card,
html[data-theme="day"] body.story-library-page .library-card:nth-child(n) {
  border-color: color-mix(in srgb, var(--card-accent, #69c6fd) 36%, #c6e4f5) !important;
  color: #17335f !important;
  background: linear-gradient(145deg, #ffffff 0%, #f3faff 66%, color-mix(in srgb, var(--card-accent, #69c6fd) 10%, #ffffff) 100%) !important;
  box-shadow: 0 10px 26px rgba(34, 107, 159, .09) !important;
}
html[data-theme="day"] body.story-library-page .library-card h3,
html[data-theme="day"] body.story-library-page .library-card-skill strong { color: #17335f !important; }
html[data-theme="day"] body.story-library-page :is(.library-card-teaser, .library-card-age, .library-card details p) { color: #4b6682 !important; }
html[data-theme="day"] body.story-library-page .library-card details { border-color: #d5ebf8 !important; }
html[data-theme="day"] body.story-library-page .library-card-skill {
  border-color: rgba(22, 119, 200, .12) !important;
  color: #315475 !important;
  background: #e8f6ff !important;
}
html[data-theme="day"] body.story-library-page .library-card-button {
  color: #ffffff !important;
  background: linear-gradient(105deg, #1677c8, #38a5e8) !important;
  box-shadow: 0 7px 16px rgba(22, 119, 200, .2) !important;
}
html[data-theme="day"] body.story-library-page .library-note {
  border-color: #b9e1f5 !important;
  color: #315475 !important;
  background: linear-gradient(120deg, #e5f5ff, #f7fbff) !important;
}
html[data-theme="day"] body.story-library-page .library-note strong { color: #17335f !important; }