:root { --storybook-ink:#30204f; --storybook-purple:#6841a8; --storybook-border:#ded2ee; }
body { background:#faf5ec; color:var(--storybook-ink); }
body > aside { background:#faf1ff; border-bottom:1px solid var(--storybook-border); border-radius:0 0 20px 20px; }
body > aside .trail-top a, .trail-more summary { color:#402967; }
body > aside .trail-top a[aria-current] { background:#eee1ff; border-bottom-color:#8155c5; border-radius:10px; }
main #app :is(h1,h2,h3), header #pageName { color:var(--storybook-ink); }
main #app :is(.card,.stat) { border-color:var(--storybook-border); }
main #app :is(.hero,.study-banner,.pron-hero,.social-hero,.garden-hero) { background:linear-gradient(120deg,#e5efff,#f4e6fb 55%,#fff1d7); border-color:var(--storybook-border); }
main #app .storybook-banner {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center;
  gap:12px; position:relative; overflow:hidden; padding:clamp(16px,4vw,38px);
  border:1px solid var(--storybook-border); border-radius:26px;
  background:radial-gradient(ellipse at 72% 100%,#dcefcf,transparent 60%),linear-gradient(140deg,#f5e8ff,#e4f2ff 57%,#fff1d1);
}
main #app .storybook-banner h1 {
  color:#40225b; border:1px solid #e8c88c; background:linear-gradient(#fff4d8,#ffe7b7);
  border-radius:17px; padding:.35em .45em; margin:.25em 0; width:fit-content;
}
main #app .storybook-banner p,.storybook-banner .trail-metrics { color:#463759; }
main #app .storybook-banner img { width:100%; max-width:440px; max-height:285px; object-fit:contain; position:static; opacity:1; margin:0 auto; }
.storybook-start { margin-top:15px; }
main #app :is(.storybook-start,button.primary,.storybook-review .btn) { background:#6940a9; color:#fff; }
.storybook-portals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; overflow:visible; }
.storybook-portals a { display:grid; justify-items:center; align-content:center; gap:4px; min-height:108px; padding:10px; border:1px solid #e8c986; border-radius:18px; background:#fff0bc; color:#40225b; text-align:center; font-weight:700; text-decoration:none; }
.storybook-portals a:nth-child(2) { background:#efddff; border-color:#d9bee9; }
.storybook-portals a:nth-child(3) { background:#dff3ff; border-color:#b7dbeb; }
.storybook-portals a:nth-child(4) { background:#e4f3ce; border-color:#c3dca9; }
.storybook-portals a span { font-size:2rem; }
.storybook-portals a:hover { outline:2px solid var(--storybook-purple); }
.trail-home .trail-garden { background:#f5eaff; border-color:var(--storybook-border); }
.storybook-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.storybook-review > .card { min-width:0; background:#fff7e1; border-radius:20px; margin:0; overflow-wrap:anywhere; }
.storybook-review h2 span { margin-right:4px; }
.road-tabs [aria-pressed=true] { background:#6841a8; color:#fff; }
.road-topic-cap { background:#63429a; }
.road-topic-list button[aria-pressed=true] { background:#f0e3ff; border-color:#a184c4; color:#40225b; }
main #app :is(button,.btn,a):focus-visible { outline:3px solid #6b42a7; outline-offset:3px; }
@media(max-width:700px) {
  main #app .storybook-banner,.storybook-review { grid-template-columns:minmax(0,1fr); }
  main #app .storybook-banner img { grid-row:1; max-height:170px; }
  .storybook-portals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .storybook-portals a { min-height:82px; }
}

.word-adventure .road-topic-guide img { width:clamp(74px,11vw,126px); }
.road-topic-list button:disabled { opacity:.7; }
.road-topic-work [data-road-course] { background:#f8eeff; border-color:#dfc8ed; }


/* Brighter storybook colors with dark text on the study surfaces. */
body { background:linear-gradient(155deg,#fff2d8,#f9e4ff 60%,#d9f4ff); }
body > aside { background:linear-gradient(105deg,#fff4fc,#e5dcff); border-color:#c4a7ec; }
body > aside .trail-top a[aria-current] { color:#fff; background:#743bc3; border-bottom-color:#542c99; }
main #app .storybook-banner {
  background:radial-gradient(ellipse at 80% 112%,#8fda66 0 29%,transparent 30%),
    radial-gradient(ellipse at 13% 14%,#fff8 0 8%,transparent 9%),
    linear-gradient(158deg,#72c9ff,#b9ddff 48%,#ead1ff 78%,#b5ed90);
  border:2px solid #ba8ce6; box-shadow:0 6px 0 #b88ada36;
}
main #app .storybook-banner h1 { background:linear-gradient(#fff4c3,#ffd585); border:2px solid #d3954d; box-shadow:0 4px 0 #9c603839; }
main #app :is(.storybook-start,button.primary,.storybook-review .btn) { background:linear-gradient(#914bd9,#672eb0); color:#fff; }
.storybook-portals a { border:2px solid #e9b64a; background:linear-gradient(#fff3a7,#ffcd67); box-shadow:0 4px 0 #e9b64a55; }
.storybook-portals a:nth-child(2) { background:linear-gradient(#f5d5ff,#daa9fb); border-color:#ba79e5; }
.storybook-portals a:nth-child(3) { background:linear-gradient(#c8f6ff,#8fd5ff); border-color:#68b7ec; }
.storybook-portals a:nth-child(4) { background:linear-gradient(#e7ffbb,#b6ea79); border-color:#8dc653; }
.trail-home .trail-garden { background:linear-gradient(120deg,#f4dbff,#e5e0ff); border-color:#bf9ce8; }
.storybook-review > .card { background:linear-gradient(#fff0bc,#fffaf0); border:2px solid #efca7b; }
.storybook-review > .card:nth-child(2) { background:linear-gradient(#f2ddff,#fff7fc); border-color:#d4afe9; }
.road-topic-cap,.road-tabs [aria-pressed=true] { background:linear-gradient(#854bd1,#6333a9); }
.road-layout .word-adventure { background:linear-gradient(140deg,#bfe9ff,#eed3ff 55%,#fff0bd); }
.word-adventure .road-topic-guide { background:linear-gradient(105deg,#ffd782,#fff0ba); border-color:#dda853; }
.word-adventure .road-modes button:nth-child(1) { background:#ffe48a; }
.word-adventure .road-modes button:nth-child(2) { background:#d8c1ff; }
.word-adventure .road-modes button:nth-child(3) { background:#aee9ff; }
.word-adventure .road-modes button:nth-child(4) { background:#d8f8a9; }

/* The homepage follows the approved illustrated layout. */
main #app .storybook-banner {
  background:#bce9ff url("adventure-garden.svg") center/cover no-repeat;
}
main #app .trail-hero.storybook-banner { grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); }
main #app .trail-hero.storybook-banner img { grid-column:1; grid-row:1; max-height:330px; }
main #app .trail-hero.storybook-banner > div { grid-column:2; grid-row:1; text-align:center; }
main #app .trail-hero.storybook-banner h1 { margin:.2em auto; padding:.34em .52em; border-radius:22px; text-wrap:balance; }
main #app .trail-hero.storybook-banner p { max-width:460px; margin:10px auto; background:#fff9; border-radius:12px; padding:5px 9px; }
.trail-hero.storybook-banner .trail-metrics { justify-content:center; background:#fff9; border-radius:12px; margin:8px auto 0; padding:6px 12px; width:fit-content; }
.storybook-start { border:2px solid #fff; border-radius:30px; min-height:46px; box-shadow:0 4px 0 #532b9080; }
.storybook-portals a { border-radius:23px; min-height:122px; font-size:1.15rem; }
.storybook-portals a span { font-size:2.55rem; line-height:1.2; }
.trail-home .trail-garden { background:linear-gradient(135deg,#faf0ff,#eee0ff); border:2px solid #cbb0ee; }
@media(max-width:700px) {
  main #app .trail-hero.storybook-banner { grid-template-columns:minmax(0,1fr); }
  main #app .trail-hero.storybook-banner img { grid-column:1; grid-row:1; max-height:190px; }
  main #app .trail-hero.storybook-banner > div { grid-column:1; grid-row:2; }
  .storybook-portals a { min-height:92px; }
}

/* Compact roadmap scenery and lesson cards. */
.word-adventure .road-topic-guide { background:#c9ebff url("adventure-garden.svg") center/cover no-repeat; padding:16px; }
.word-adventure .road-topic-guide > div { background:linear-gradient(#fff7d3,#ffdea0); border:1px solid #dea55c; border-radius:15px; padding:8px 12px; }
.word-adventure .road-topic-guide #roadChooseWord { background:#733dc1; color:#fff; border:2px solid #fff; border-radius:24px; }
.road-topic-list button:disabled { background:#f1edf3; color:#554d60; }
.road-topic-list button:disabled > b { background:#e5deeb; color:#554d60; }
.road-content .storybook-lessons {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));
  padding:12px; border-radius:18px; background:linear-gradient(125deg,#e2f5bf,#fff1d3);
}
.storybook-lessons li { min-width:0; align-items:stretch; }
.road-topic-work .storybook-lessons button {
  display:grid; align-content:start; gap:8px; min-height:110px; border:2px solid #c89deb;
  border-radius:15px; padding:12px; background:#f8ebff; overflow-wrap:anywhere;
}
.road-topic-work .storybook-lessons button.is-complete { background:#effacb; border-color:#9abd5f; }
.storybook-lesson-number { color:#59358b; font-size:.78rem; font-weight:700; }
.storybook-lessons small { color:#563866; }
@media(max-width:700px) { .road-content .storybook-lessons { grid-template-columns:1fr; } }

.storybook-review > .card { position:relative; padding:clamp(16px,3vw,28px); box-shadow:0 4px 0 #c5a0eb42; }
.storybook-review h2 { display:flex; align-items:center; gap:10px; margin:0; }
.storybook-review-icon { display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:15px; background:#fff9; }
main #app .storybook-review-count { display:inline-block; margin:10px 0; padding:4px 10px; border-radius:20px; background:#fff9; color:#563579; font-weight:700; }
.storybook-review .mistake-item { padding:12px; margin-bottom:10px; background:#fffaf9; border:1px solid #dcc6eb; border-radius:14px; }
.storybook-review :is(button,.btn) { min-height:44px; }
.storybook-review .btn { margin-top:8px; border-radius:24px; }

main #app .storybook-review-banner {
  display:flex; justify-content:flex-end; min-height:clamp(220px,29vw,370px);
  background:#bfe9ff url("review-fairytale.webp") center/cover no-repeat;
}
.storybook-review-banner > div { width:min(46%,520px); }
main #app .storybook-review-banner h1 {
  border:3px solid #c38b50; box-shadow:0 5px 0 #8d592b66;
  background:repeating-linear-gradient(3deg,transparent 0 22px,#e9b97640 23px 24px),linear-gradient(#fff3cc,#ffda96);
  font-size:clamp(1.75rem,4vw,3.4rem); text-align:center; text-wrap:balance;
}
main #app .storybook-review-banner p { background:#fff7e8ee; padding:6px 10px; border-radius:12px; }
.storybook-review-banner .eyebrow { display:none; }
.storybook-review .storybook-review-icon { width:76px; height:68px; background:transparent; }
.storybook-review > .card { border-width:2px; border-radius:24px; }
@media(max-width:700px) {
  main #app .storybook-review-banner { display:flex; align-items:flex-end; justify-content:center; min-height:280px; background-position:35% center; }
  .storybook-review-banner > div { width:100%; }
  main #app .storybook-review-banner h1 { font-size:1.55rem; }
  main #app .storybook-review-banner p { font-size:.85rem; margin-bottom:0; }
}
@media(max-width:700px){ main #app .storybook-review-banner { background-position:8% center; } }

/* Shared garden scenery and compact grouped navigation. */
body[data-adventure-page] {
  background:#f9e9ff url("review-fairytale.webp") center top / auto min(48vw,480px) no-repeat;
}
body[data-adventure-page] > aside { background:linear-gradient(100deg,#fff3fe,#e5d5ff); }
body[data-adventure-page] > main {
  background:linear-gradient(150deg,#fff9f0f5,#f7ecfff4 64%,#e8f7fcf5);
  border-radius:0 0 24px 24px;
}
body[data-adventure-page="review"] main > :is(header,#account,#companionRoot) { display:none!important; }
.trail-more > div { width:min(270px,calc(100vw - 40px)); padding:8px; background:#fff8ff; border-color:#d3b9ee; }
.trail-more > div > details { padding:4px; border-bottom:1px solid #ecdff7; }
.trail-more > div > details:last-child { border-bottom:0; }
.trail-more > div summary { padding:8px; color:#513376; }
.trail-more > div a { padding:8px 12px; color:#442862; }
.trail-more > div a span { display:inline-block; min-width:1.5em; }
.trail-more > div a[aria-current] { background:#7040b2; color:#fff; }
body[data-adventure-page]:not([data-adventure-page="home"],[data-adventure-page="review"]) #app {
  background: url("adventure-mascots.webp") right bottom / min(160px,32vw) auto no-repeat,
              url("adventure-garden.svg") center bottom / 100% 125px no-repeat;
  padding-bottom:128px;
}
body[data-adventure-page] #app > .card:first-child { border-top:4px solid #bd83e2; }
@media(max-width:700px) {
  .trail-more > div { right:auto; left:0; }
}
@media(max-width:700px) { .trail-more { position:static; } .trail-more > div { inset:100% 16px auto; width:auto; } }

body[data-adventure-page] main > :is(header,#companionRoot,#account) { display:none!important; }
body[data-adventure-page="profile"] main > #account { display:flex!important; }
.trail-level { display:flex; align-items:center; gap:5px; font-size:.85rem; color:#442862; }
.trail-level select { padding:5px 7px; min-height:36px; }

/* Illustrated surfaces keep the scenery visible behind readable study content. */
body[data-adventure-page] > main {
  background:linear-gradient(#faf0ffb8,#fff5e2de),url("adventure-garden.svg") center top / 100% auto repeat-y;
}
body[data-adventure-page] main #app :is(.card,.stat,.course-card,.road-content,.road-topic-work,.road-topic-sidebar,.learning-meter) {
  background:linear-gradient(125deg,#fff4dcf7,#f4e4fff2),
    url("adventure-garden.svg") right bottom / cover no-repeat;
}
body[data-adventure-page] main #app :is(.card,.course-card):nth-child(even) {
  background:linear-gradient(125deg,#e7f6fff7,#f3e4fff2),
    url("adventure-garden.svg") right bottom / cover no-repeat;
}
body[data-adventure-page] main #app > .card:first-child {
  background:linear-gradient(95deg,#fff4dffb 30%,#f2dbfff0 65%,#e5dcff69),
    url("adventure-mascots.webp") right 14px center / min(160px,35vw) auto no-repeat,
    #f0deff;
}
body[data-adventure-page] main #app :is(.map-scroll,.radial-map) {
  background:linear-gradient(#f4e6ffa8,#e7f9d6c9),
    url("adventure-garden.svg") center / cover no-repeat;
  border-radius:20px;
}
body[data-adventure-page] main #app :is(input:not([type=radio],[type=checkbox]),select,textarea,.option,.passage) {
  background-color:#fff7e7;
  color:#30204f;
}
body[data-adventure-page] main #app .option:has(input:checked) { background-color:#e6d5fb; }
body[data-adventure-page] main #app .adventure-notebook {
  background:linear-gradient(#fff6dbf7,#f7e7fff0),url("adventure-garden.svg") center / cover;
}
body[data-adventure-page] main #app .road-content:has(.road-topics) { background:transparent; }
body[data-adventure-page] main #app .word-adventure {
  background:linear-gradient(150deg,#d6eeffdf,#f1d9fff0 60%,#fff0bfdc),
    url("adventure-garden.svg") center / cover;
}
body[data-adventure-page] main #app :is(.storybook-banner,.road-topic-guide) { isolation:isolate; }
#cefrNavLevel { padding:5px 8px; min-height:36px; color:#442862; background:#fff4ff; }