@font-face {
  font-family: Fredoka;
  src: url("brand/fredoka.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #2b1949;
  --muted: #645576;
  --purple: #5835a1;
  --purple-dark: #45277f;
  --lavender: #eee2ff;
  --canvas: #f7f1ff;
  --line: #e5d9f2;
  --peach: #ffcf9e;
  --white: #fff;
  --heading: Fredoka, ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --body: "Trebuchet MS", system-ui, sans-serif;
  --shadow: 0 6px 0 #ded0f2, 0 12px 24px #34205a11;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at 4% 34%, #ffdfca90, transparent 22rem),
    radial-gradient(circle at 97% 55%, #e4d3ffac, transparent 29rem),
    radial-gradient(#b395d656 1px, transparent 1px) 0 0 / 25px 25px,
    var(--canvas);
}
button, input { font: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
:focus-visible { outline: 3px solid #8b52d7; outline-offset: 4px; }
.icon-sheet { position: absolute; width: 0; height: 0; overflow: hidden; }
.top { background: #fffcff; border-bottom: 1px solid var(--line); }
.top-inner, .shell, .reader-shell {
  width: min(1216px, calc(100% - 64px));
  margin-inline: auto;
}
.top-inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand, .library-link, .back-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.brand { gap: 10px; line-height: 1; }
.brand strong { display: block; font: 620 1.47rem/1 var(--heading); }
.brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.library-link, .back-link {
  min-height: 43px;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #dfd1f3;
  border-radius: 13px;
  background: #f4ebff;
  color: var(--purple-dark);
  font-size: .84rem;
  font-weight: 800;
}
.library-link svg, .back-link svg { width: 17px; height: 17px; }
.shell { margin-top: 26px; }
.welcome {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  align-items: center;
  min-height: 370px;
  padding: 35px clamp(25px, 4.2vw, 61px);
  overflow: hidden;
  border: 1px solid #46267f;
  border-radius: 31px;
  background:
    radial-gradient(ellipse at 78% 45%, #7544b9 0%, transparent 55%),
    linear-gradient(116deg, #2d1b58 7%, #502d8c 77%);
  color: #fff8ff;
  box-shadow: 0 9px 0 #e3d3f8, 0 14px 35px #422a721b;
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .72;
  background:
    radial-gradient(circle at 40% 11%, #e9d4ff 1.2px, transparent 2px),
    radial-gradient(circle at 6% 82%, #ffd4a6 1.6px, transparent 2.5px),
    radial-gradient(circle at 55% 87%, #f2d6ff 1.5px, transparent 2.2px),
    radial-gradient(circle at 87% 13%, #ffca9d 2px, transparent 3px),
    radial-gradient(#ffffff35 1px, transparent 1.4px) 0 0 / 37px 37px;
  mask-image: linear-gradient(90deg, transparent 2%, #000 53%);
}
.welcome-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0;
  font-size: .66rem;
  line-height: 1.3;
  font-weight: 850;
  letter-spacing: .13em;
}
.welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #d2b8fa58;
  border-radius: 8px;
  background: #f0d8ff14;
  color: #f7e2ff;
}
.welcome-eyebrow span { color: var(--peach); }
.welcome h1 {
  margin: 12px 0;
  font: 620 clamp(2.9rem, 5.65vw, 5.2rem)/.94 var(--heading);
  letter-spacing: -.034em;
}
.welcome h1 span { color: var(--peach); }
.welcome-description { max-width: 335px; margin: 14px 0 20px; color: #f1e7ff; line-height: 1.55; }
.welcome-art { position: relative; isolation: isolate; min-width: 0; }
.welcome-art img {
  position: relative;
  z-index: 1;
  width: 110%;
  max-width: 110%;
  margin-left: -5%;
  height: auto;
  filter: drop-shadow(0 14px 14px #2812446b);
}
.orbit {
  position: absolute;
  z-index: -1;
  inset: 12% 6% 8% 5%;
  border: 1px dashed #e5c5ff62;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d7a1fa6b 0%, #ae70e32b 58%, transparent 72%);
  transform: rotate(-12deg);
}
.hero-sparkle { position: absolute; color: #ffd2a2; font-size: clamp(1.2rem, 3vw, 2.7rem); }
.hero-sparkle-one { top: 8%; left: 7%; }
.hero-sparkle-two { right: 1%; bottom: 19%; color: #ead4ff; }
.mascot-tag {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 4%;
  padding: 7px 11px;
  border-radius: 12px 12px 3px 12px;
  background: #fff1de;
  color: #452b6e;
  font: 600 1.02rem/1 var(--heading);
  box-shadow: 0 3px 0 #cbb1e8;
  transform: rotate(-6deg);
}
.mascot-tag span { color: #9c4d35; }

.shelf { margin: 43px 0 26px; scroll-margin-top: 16px; }
.shelf-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.shelf-eyebrow { color: var(--purple-dark); }
.shelf-eyebrow span { color: #88431f; }
.shelf h2 {
  margin: 5px 0 4px;
  font: 610 clamp(1.9rem, 3.9vw, 3.2rem)/1 var(--heading);
  letter-spacing: -.025em;
}
#book-count { margin: 7px 0 0; color: var(--muted); font-size: .91rem; font-weight: 700; }
.search-box {
  display: flex;
  width: min(100%, 300px);
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 2px solid #e5d7f4;
  border-radius: 15px;
  background: var(--white);
  color: var(--purple-dark);
}
.search-box:focus-within { border-color: #8b52d7; }
.search-box svg { width: 19px; height: 19px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-box input::placeholder { color: #706080; opacity: 1; }

.book-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px; }
.book {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #e1d4ed;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 4px 0 #e0d2ef, 0 9px 15px #3820580e;
  transition: transform .18s ease, box-shadow .18s ease;
}
.book-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.26;
  border-radius: 13px 12px 12px 5px;
  background: var(--book-tint);
}
.book-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 9px solid #21143630;
  background: linear-gradient(90deg, #ffffff5e 9px, #fff0 11px);
  pointer-events: none;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-number {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  min-width: 28px;
  padding: 5px 6px;
  border-radius: 8px;
  background: #fff4e4;
  color: #493262;
  font: 610 .86rem/1 var(--heading);
  text-align: center;
}
.book-details { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 6px; padding: 9px 5px 3px; }
.book-theme {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--book-tint);
  color: #392751;
  font-size: .66rem;
  font-weight: 850;
}
.book h3 {
  margin: 0;
  font: 585 clamp(1.06rem, 1.54vw, 1.45rem)/1.07 var(--heading);
  overflow-wrap: anywhere;
}
.book-meta {
  display: flex;
  width: 100%;
  min-height: 35px;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  padding-top: 5px;
  color: var(--purple-dark);
  font-size: .72rem;
  font-weight: 850;
}
.book-meta svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .book:hover { transform: translateY(-4px); box-shadow: 0 7px 0 #d7c4ef, 0 14px 20px #3820581a; }
}
.empty {
  display: grid;
  justify-items: center;
  padding: 18px 15px 23px;
  border: 1px dashed #c7b3e4;
  border-radius: 18px;
  background: #fff9ff;
  font-weight: 700;
}
.empty p { margin: 4px 0 10px; }
.empty button {
  min-height: 42px;
  padding: 7px 13px;
  border: 0;
  border-radius: 11px;
  background: var(--purple);
  color: white;
  font-weight: 800;
}
.shelf-note {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 17px;
  border: 1px solid #ead2f2;
  border-radius: 17px;
  background: linear-gradient(100deg, #ffe2ce, #fae5f1 69%, #eadbff);
}
.shelf-note-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 12px; color: #fff; background: #643c9d; }
.shelf-note h2 { margin: 0; font: 600 1.2rem/1.1 var(--heading); }
.shelf-note p { margin: 4px 0 0; color: #574364; font-size: .79rem; line-height: 1.35; }
.note-sparkles { margin-left: auto; color: #804ba5; font-size: 1.45rem; white-space: nowrap; }

.reader-shell { width: min(1060px, calc(100% - 64px)); margin-top: 24px; }
.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reader-book { color: var(--purple-dark); text-align: right; }
.reader-shell h1 {
  margin: 13px 0 17px;
  font: 620 clamp(2.15rem, 5vw, 3.7rem)/1 var(--heading);
  letter-spacing: -.022em;
  overflow-wrap: anywhere;
}
.reader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(215px, .45fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "main progress" "main buddy";
  align-items: start;
  gap: 15px 20px;
}
.reader-main { grid-area: main; min-width: 0; }
.reading-card {
  overflow: hidden;
  padding: 8px;
  border: 1px solid #e2d3f3;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.scene { overflow: hidden; aspect-ratio: 1.56; border-radius: 16px; background: var(--book-tint, #e9dafb); }
.scene img { width: 100%; height: 100%; object-fit: cover; }
.text-area { display: grid; min-height: 104px; align-content: center; padding: 15px 14px 10px; text-align: center; }
#sentence { margin: 0; color: var(--ink); font: 550 clamp(1.4rem, 4.1vw, 2.1rem)/1.5 var(--heading); text-wrap: pretty; }
.word { border-radius: .23em; }
.word.current { background: #ffdb84; box-shadow: 0 0 0 2px #ffdb84; color: #321d38; }
#audio-message { margin: 4px 0 0; color: #8b3f39; font-size: .79rem; }

.reading-controls { display: grid; grid-template-columns: 1fr 1.48fr 1fr; gap: 8px; margin-top: 18px; }
.reading-controls button {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border-radius: 13px;
  font-size: .87rem;
  font-weight: 850;
  white-space: nowrap;
}
.reading-controls svg { width: 18px; height: 18px; }
.step { border: 1px solid #d8c4f3; background: #f8efff; color: var(--purple-dark); }
.step:disabled { cursor: default; opacity: .48; }
.listen { border: 1px solid var(--purple-dark); background: var(--purple); color: white; box-shadow: 0 3px 0 #3b216e; }

.progress-panel {
  grid-area: progress;
  padding: 13px 14px 14px;
  border: 1px solid #dfcff0;
  border-radius: 17px;
  background: #fffcff;
}
.progress-panel .eyebrow { color: var(--purple-dark); }
.page-count { display: block; margin: 5px 0 8px; font: 600 1.27rem/1 var(--heading); }
.page-dots { display: flex; gap: 4px; }
.page-dots span { height: 6px; flex: 1; border-radius: 4px; background: #e8dcf5; }
.page-dots .passed { background: #b89ae2; }
.page-dots .selected { background: #7144b3; }
.companion {
  position: relative;
  grid-area: buddy;
  isolation: isolate;
  overflow: hidden;
  padding: 17px 14px 7px;
  border: 1px solid #d9c5ee;
  border-radius: 20px;
  background:
    radial-gradient(#a17bca4d 1px, transparent 1px) 0 0 / 17px 17px,
    radial-gradient(ellipse at 48% 78%, #ffe3c6 0%, #ead6fc 55%, #ecddff 100%);
  text-align: center;
}
.companion .eyebrow { color: var(--purple-dark); }
.companion h2 { margin: 4px 0; font: 600 1.55rem/1.06 var(--heading); }
.companion p:last-child { margin: 5px auto 0; max-width: 210px; color: #514067; font-size: .82rem; line-height: 1.4; }
.companion img { width: min(100%, 255px); height: auto; margin: 6px auto 0; filter: drop-shadow(0 7px 9px #593b7f3c); }

.footer {
  display: flex;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 19px auto 13px;
  padding: 3px 12px;
  color: var(--muted);
  font-size: .77rem;
}
.footer strong { color: var(--ink); }
.footer-separator { padding-inline: 2px; color: #8546a5; }
.noscript { text-align: center; }

@media (max-width: 1030px) {
  .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
  .welcome { min-height: 335px; }
}
@media (max-width: 850px) {
  .top-inner, .shell, .reader-shell { width: calc(100% - 36px); }
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book h3 { font-size: 1.24rem; }
  .welcome { min-height: 280px; padding: 24px; }
  .welcome-description { margin: 11px 0 15px; font-size: .92rem; }
}
@media (max-width: 650px) {
  .top-inner { min-height: 66px; }
  .brand img { width: 39px; height: 39px; }
  .brand strong { font-size: 1.3rem; }
  .library-link { min-height: 40px; padding: 6px 9px; font-size: .77rem; }
  .shell, .reader-shell { margin-top: 15px; }
  .welcome { min-height: 0; padding: 19px 17px; border-radius: 23px; }
  .welcome h1 { font-size: clamp(2.1rem, 7vw, 3.1rem); }
  .welcome-eyebrow { font-size: .51rem; letter-spacing: .08em; }
  .welcome-description { font-size: .8rem; }
  .mascot-tag { right: 0; bottom: 1%; padding: 6px 7px; font-size: .79rem; }
  .shelf { margin-top: 33px; }
  .reader-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "progress" "main" "buddy"; gap: 13px; }
  .progress-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 10px 12px; }
  .progress-panel .eyebrow { grid-column: 1; grid-row: 1; }
  .page-count { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font-size: 1.05rem; }
  .page-dots { grid-column: 1 / -1; }
  .companion { display: grid; grid-template-columns: 1fr 112px; align-items: center; padding: 9px 11px; text-align: left; }
  .companion img { width: 112px; margin: 0; }
  .companion p:last-child { margin-left: 0; }
}
@media (max-width: 480px) {
  .top-inner, .shell, .reader-shell { width: calc(100% - 26px); }
  .welcome { grid-template-columns: 1fr .83fr; column-gap: 7px; padding: 16px 12px 19px; }
  .welcome h1 { margin: 9px 0; font-size: clamp(1.85rem, 7.7vw, 2.55rem); }
  .welcome-description { margin: 8px 0 12px; line-height: 1.34; }
  .welcome-art img { width: 108%; max-width: 108%; margin-left: -1%; }
  .hero-sparkle-one { top: -5%; left: 12%; }
  .mascot-tag { right: 0; bottom: -10%; }
  .shelf-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 13px; }
  .search-box { width: 100%; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
  .book { padding: 5px; border-radius: 15px; }
  .book-cover { border-radius: 10px 10px 9px 4px; }
  .book h3 { font-size: 1.15rem; }
  .book-details { padding: 7px 4px 2px; gap: 5px; }
  .book-meta { min-height: 32px; font-size: .68rem; }
  .note-sparkles { font-size: 1rem; }
  .reader-shell h1 { margin: 11px 0 12px; }
  .reading-card { padding: 6px; border-radius: 19px; }
  .scene { border-radius: 13px; }
  .text-area { min-height: 87px; padding: 9px 9px 6px; }
}
@media (max-width: 345px) {
  .welcome { grid-template-columns: 1fr .69fr; }
  .welcome-eyebrow { padding-inline: 5px; }
  .reading-controls { grid-template-columns: 1fr 1.7fr 1fr; gap: 5px; }
  .reading-controls button { font-size: .77rem; }
  .reading-controls svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Activity chooser */
body[data-activity="home"] {
  background:
    radial-gradient(ellipse at 12% 40%, #ffdfc388, transparent 34rem),
    radial-gradient(ellipse at 92% 47%, #e9d9ff9c, transparent 35rem),
    radial-gradient(#b995b65c 1px, transparent 1.4px) 0 0 / 27px 27px,
    #fff8ee;
}
.activity-home { width: min(1120px, calc(100% - 48px)); }
.club-intro { margin: 38px auto 27px; text-align: center; }
.club-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #e7d5ee;
  border-radius: 100px;
  background: #fffaff;
  color: #593484;
}
.club-label span { color: #9c552a; }
.club-intro h1 {
  margin: 9px 0 8px;
  font: 640 clamp(2.1rem, 6.3vw, 5.2rem)/1 var(--heading);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.club-intro h1 span { color: #8552a4; }
.club-intro > p:last-child { margin: 0; color: var(--muted); font-size: clamp(.94rem, 2vw, 1.1rem); }
.activity-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
.activity-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: 272px;
  padding: clamp(15px, 2.8vw, 31px);
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 27px;
  background:
    radial-gradient(var(--card-dot) 1px, transparent 1.3px) 0 0 / 19px 19px,
    linear-gradient(125deg, var(--card-bg), var(--card-shade));
  box-shadow: 0 6px 0 var(--card-line), 0 11px 20px #40295113;
  color: var(--card-ink);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.activity-card-write {
  --card-bg: #f4ffed; --card-shade: #ccefd7; --card-line: #acd2b8;
  --card-dot: #548f6430; --card-ink: #1b4835; --card-cta: #22674b;
}
.activity-card-read {
  --card-bg: #faf0ff; --card-shade: #e2ccff; --card-line: #ceb6ee;
  --card-dot: #8052a436; --card-ink: #402366; --card-cta: #633d99;
}
.activity-card:focus-visible { outline-offset: 5px; }
.activity-copy { position: relative; z-index: 1; min-width: 0; }
.activity-label, .activity-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 850; }
.activity-label {
  padding: 5px 9px;
  border: 1px solid var(--card-line);
  border-radius: 50px;
  background: #ffffffc9;
  font-size: .67rem;
  letter-spacing: .075em;
  white-space: nowrap;
}
.activity-label svg, .activity-cta svg { width: 16px; height: 16px; }
.activity-copy h2 {
  margin: 9px 0 6px;
  font: 630 clamp(1.82rem, 3.5vw, 3.15rem)/.99 var(--heading);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.activity-copy p { max-width: 24ch; margin: 0 0 15px; font-size: .91rem; line-height: 1.43; }
.activity-cta {
  min-height: 43px;
  padding: 8px 11px;
  border-radius: 11px;
  background: var(--card-cta);
  color: white;
  font-size: .79rem;
  white-space: nowrap;
}
.activity-art { position: relative; min-width: 0; aspect-ratio: 1; pointer-events: none; }
.art-orbit {
  position: absolute;
  inset: 15% 0;
  border: 1px dashed var(--card-line);
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffffffd6, #ffffff2c 64%, transparent 72%);
  transform: rotate(-17deg);
}
.art-star { position: absolute; color: var(--card-cta); font: 600 clamp(.9rem, 2.7vw, 1.8rem)/1 var(--heading); }
.letter-star-one, .story-star-one { top: 9%; right: 12%; }
.letter-star-two, .story-star-two { bottom: 8%; left: 7%; }
.letter-tile {
  position: absolute;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid #fff9;
  border-radius: 20%;
  font: 650 clamp(1.5rem, 4.8vw, 4rem)/1 var(--heading);
}
.letter-tile-back {
  width: 42%; top: 15%; right: 7%;
  background: linear-gradient(135deg, #fcecb5, #f6bb63);
  color: #774f18;
  box-shadow: 1px 5px 0 #c89650, 2px 9px 10px #7b5c3d2b;
  transform: rotate(14deg);
}
.letter-tile-front {
  width: 58%; top: 23%; left: 7%;
  background: linear-gradient(145deg, #fff, #e2f5d8);
  color: #27624a;
  box-shadow: 2px 7px 0 #88b69a, 4px 11px 15px #3d65473a;
  transform: rotate(-12deg);
}
.letter-pencil {
  position: absolute;
  width: 67%; height: 14%; right: 2%; bottom: 20%;
  background: linear-gradient(180deg, #ffde8a, #f2a750);
  clip-path: polygon(0 17%, 10% 5%, 80% 5%, 100% 50%, 80% 95%, 10% 95%, 0 83%);
  transform: rotate(-37deg);
}
.letter-pencil::before, .letter-pencil::after { content: ""; position: absolute; inset-block: 0; }
.letter-pencil::before { width: 24%; left: 0; background: linear-gradient(90deg, #d28dac 69%, #eee6e8 70%); }
.letter-pencil::after { width: 20%; right: 0; background: linear-gradient(90deg, #ffeac0 67%, #534263 68%); }
.story-art img {
  position: absolute;
  top: 50%; left: -3%;
  width: 112%; max-width: none; height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 8px 9px #68349042);
}
.club-tip {
  margin: 22px 0 0;
  padding: 11px;
  border: 1px dashed #dfcee8;
  border-radius: 12px;
  background: #fff9;
  color: #635075;
  font-size: .82rem;
  font-weight: 750;
  text-align: center;
}
.club-tip span { color: #87509b; }
#library .welcome { min-height: 0; padding-block: clamp(16px, 2.7vw, 34px); }
#library .welcome-art img { max-width: min(100%, 350px); margin-inline: auto; }
#library .welcome-art .orbit { inset-inline: 12%; }
#library .welcome-description { margin-bottom: 0; }
#welcome-heading:focus, #club-title:focus { outline: none; }
@media (hover: hover) {
  .activity-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--card-line), 0 14px 20px #4029511a; }
}
@media (max-width: 720px) {
  .activity-home { width: min(530px, calc(100% - 28px)); }
  .club-intro { margin: 21px auto 17px; }
  .activity-choices { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .activity-card { min-height: 0; grid-template-columns: 1.2fr .8fr; padding: 14px 16px; border-radius: 20px; }
  .activity-copy h2 { font-size: clamp(1.65rem, 7.7vw, 2.6rem); }
  .activity-copy p { margin-bottom: 9px; font-size: .82rem; }
  .activity-cta { min-height: 38px; }
  .activity-art { width: min(100%, 165px); justify-self: center; }
  .letter-tile { font-size: clamp(1.4rem, 9vw, 3.1rem); }
  .club-tip { margin-top: 17px; }
}