:root { --trail-ink:#17603b; --trail-accent:#17603b; --trail-border:#d7e6df; }
body { background:#faf5e7; color:#203731; }
aside, .compact-menu { background:#fffaf0; border-color:var(--trail-border); }
.nav-group { border-color:var(--trail-border); }
.nav-group > summary, .compact-menu > summary, header #pageName { color:var(--trail-ink); }
.grouped-nav a.active { background:#d9eee4; color:#174b3c; box-shadow:inset 3px 0 #2b866a; }
main #app :is(h1,h2,h3) { color:var(--trail-ink); }
.card, .stat { background:#fff; border-color:var(--trail-border); box-shadow:0 5px 20px #173b2e0b; }
.trail-hero.hero { background:radial-gradient(ellipse at 85% 40%,#fff0cb,transparent 60%),#dbeed5; border:1px solid #cfe2d6; }
main #app .trail-hero h1 { font-size:clamp(2.25rem,5vw,4.1rem); line-height:1.05; letter-spacing:-.045em; margin-block:14px; }
.trail-hero .eyebrow { background:#fff9; color:var(--trail-accent); }
.trail-hero .btn { background:var(--trail-accent); }
.trail-garden { display:flex; align-items:center; gap:16px; padding:16px 22px; margin:18px 0 26px; border:1px solid var(--trail-border); border-radius:20px; background:#fff; }
.trail-garden h2,.trail-garden p { margin:0; }
.trail-garden a { margin-inline-start:auto; font-weight:700; color:var(--trail-accent); }
.trail-pot,.trail-icon { display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:15px; background:#e0f2e6; font-size:24px; }
.trail-courses { margin-bottom:24px; }
.trail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.trail-course { display:flex; flex-direction:column; align-items:flex-start; padding:20px; border:1px solid var(--trail-border); border-radius:20px; background:#fff; color:var(--trail-accent); text-decoration:none; }
.trail-course:hover { border-color:#419378; background:#fafffc; }
.trail-course:focus-visible,.trail-garden a:focus-visible { outline:3px solid var(--trail-accent); outline-offset:3px; }
.trail-course h3 { margin:12px 0 4px; }
.trail-course p { margin:0 0 12px; }
.trail-course strong { margin-top:auto; }
.trail-icon { width:auto; min-width:52px; padding-inline:10px; font-size:18px; font-weight:700; }
.trail-course:nth-child(2) .trail-icon { background:#f7ebd2; }
.trail-course:nth-child(3) .trail-icon { background:#e2f0da; }
@media (max-width:700px) {
  .trail-grid { grid-template-columns:1fr; }
  .trail-garden { flex-wrap:wrap; padding:14px; gap:12px; }
  .trail-garden a { margin-inline-start:0; }
}

main #app :is(.study-banner,.pron-hero,.social-hero,.garden-hero), .companion {
  background:linear-gradient(115deg,#e1f0d9,#fff3d9);
}
main #app :is(h1,h2,h3) { color:#17603b; }

.flip-study {
  display:block; width:100%; padding:0; margin:16px 0; border:0; border-radius:22px;
  background:transparent; color:#17603b; cursor:pointer; perspective:1000px;
}
.flip-study:focus-visible { outline:3px solid #17603b; outline-offset:4px; }
.flip-study-inner { display:grid; transform-style:preserve-3d; transition:transform .35s ease; }
.flip-study.is-flipped .flip-study-inner { transform:rotateY(180deg); }
.flip-study-face {
  grid-area:1/1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:12px; min-height:220px; padding:24px 16px; border:1px solid #b6d4ba;
  border-radius:22px; background:#e2f0da; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; overflow-wrap:anywhere;
}
.flip-study-back { transform:rotateY(180deg); background:#fff3d9; border-color:#e2cc9c; }
.flip-study-face strong { font-size:clamp(1.55rem,5vw,2.75rem); line-height:1.2; }
.flip-study-face > span { font-size:1rem; font-weight:400; }
.flip-study-face .flip-study-label { font-size:.78rem; letter-spacing:.08em; font-weight:700; }
@media (prefers-reduced-motion:reduce) { .flip-study-inner { transition:none; } }
.trail-course.trail-tile { display:block; padding:0; border:0; background:transparent; perspective:1000px; }
.trail-tile-inner { display:grid; height:100%; transform-style:preserve-3d; transition:transform .35s ease; }
.trail-tile.is-flipped .trail-tile-inner { transform:rotateY(180deg); }
.trail-tile-face {
  grid-area:1/1; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-width:0; padding:18px; border:1px solid var(--trail-border); border-radius:20px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
button.trail-tile-front { min-height:175px; text-align:left; background:#e2f0da; color:var(--trail-ink); }
.trail-tile-face strong { font-size:1.2rem; margin:0; }
.trail-tile-back { transform:rotateY(180deg); background:#fff3d9; color:var(--trail-ink); }
.trail-tile-back p { margin:0; }
.trail-tile-back a { color:var(--trail-accent); font-weight:700; }
.trail-tile-return { padding:4px 0; color:var(--trail-accent); background:transparent; }
.trail-tile :is(a,button):focus-visible { outline:3px solid var(--trail-accent); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce) { .trail-tile-inner { transition:none; } }

/* The home dashboard uses a full-width layout. Lesson navigation stays on its own pages. */
.trail-top { display:none; }
body.trail-home > aside {
  position:static; width:auto; max-width:1360px; margin:auto; padding:18px clamp(18px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:12px 24px;
  flex-wrap:wrap; background:transparent; border:0;
}
.trail-home > aside > :not(.brand,.trail-top),
.trail-home main > :is(header,#companionRoot) { display:none!important; }
.trail-home .trail-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px clamp(6px,2vw,24px); margin:0; }
.trail-top a { padding:9px 6px; font-weight:700; color:#24583e; text-decoration:none; }
.trail-top a[aria-current] { border-bottom:3px solid #368259; }
.trail-top a:last-child { border:1px solid #b9ceba; border-radius:30px; padding-inline:14px; }
body.trail-home > main { margin:auto; max-width:1360px; padding:8px clamp(18px,4vw,52px) 0; }
.trail-home .trail-hero.hero { background:radial-gradient(ellipse at 86% 55%,#286846,transparent 55%),#103e32; border:0; }
main #app .trail-hero h1 { color:#fffaf0; }
main #app .trail-hero p { color:#e6f2e8; }
.trail-metrics { display:flex; flex-wrap:wrap; gap:12px 24px; color:#f6f2de; margin-top:22px; }
.trail-metrics span { display:grid; font-size:.82rem; }
.trail-metrics b { color:#d1f0ba; font-size:1.35rem; }
.trail-home .trail-garden { background:#fffaf0; padding:clamp(16px,3vw,34px); }
.trail-home .trail-pot { width:64px; height:64px; font-size:32px; }
.trail-streak { margin-top:6px!important; color:#17603b!important; }
.trail-home .trail-tile-front { border-radius:20px; }
.trail-home .trail-tile-front .trail-icon { width:100%; height:72px; background:#d3e8ca; }
@media(max-width:700px) {
  .trail-home .trail-top { width:100%; }
  .trail-home .trail-garden a { margin-inline-start:auto; }
  .trail-home .trail-tile-front { min-height:148px; }
  .trail-home .trail-tile-front .trail-icon { height:48px; }
}

.trail-home .trail-hero.hero {
  background:radial-gradient(circle at 79% 44%,#fff8cf 0 13%,transparent 13.2%),
    radial-gradient(circle at 91% 21%,#f9ffe9 0 2%,transparent 2.3%),
    linear-gradient(115deg,#e8f6d5,#cdeaa9);
}
main #app .trail-hero h1,.trail-metrics b { color:#195537; }
main #app .trail-hero p,.trail-metrics { color:#31533b; }
.trail-home .trail-hero img { filter:drop-shadow(0 10px 12px #335c2730); }
.trail-home .trail-garden { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; }
.trail-garden-details progress { width:100%; accent-color:#398054; margin-top:14px; }
.trail-milestones { display:grid; grid-template-columns:repeat(4,1fr); padding:0; gap:4px; list-style:none; text-align:center; }
.trail-milestones li { display:grid; justify-items:center; gap:4px; font-size:.82rem; color:#465c4e; }
.trail-milestones b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e9ede1; }
.trail-milestones .reached b { color:#fff; background:#28724a; }
.trail-milestones [aria-current] b { outline:3px solid #b7d9a9; }
.trail-garden-details a { display:inline-block; margin-top:10px; }
.trail-plant-art { min-height:185px; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:24px; background:linear-gradient(#e8f5d7,#fff5da); }
.trail-sun { position:absolute; top:16%; right:16%; width:48px; height:48px; border-radius:50%; background:#ffe3a2; box-shadow:0 0 24px #ffe3a2; }
.trail-plant { position:relative; z-index:1; font-size:clamp(60px,9vw,100px); }
.trail-soil { position:absolute; bottom:17%; width:65%; height:15%; border-radius:50%; background:#bcd69c; }
@media(max-width:700px) { .trail-home .trail-garden { grid-template-columns:1fr; gap:14px; } .trail-plant-art { min-height:130px; } }
body.trail-home main > #account { display:none; }

.trail-week { list-style:none; padding:0; margin:10px 0 14px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; max-width:390px; }
.trail-week li { display:grid; justify-items:center; gap:3px; font-size:.75rem; font-weight:700; }
.trail-day { display:grid; place-items:center; width:clamp(24px,6vw,34px); aspect-ratio:1; border-radius:50%; background:#edf1e5; color:#31533b; }
.trail-week .learned .trail-day { background:#28724a; color:#fff; }
.trail-week [aria-current] .trail-day { outline:2px solid #28724a; outline-offset:2px; }
.trail-day-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.trail-language { padding:8px 10px; border:1px solid #b9ceba; border-radius:30px; color:#24583e; background:#fffaf0; }

.road-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; border-radius:20px; background:#e3f0d6; }
.road-heading img { width:clamp(68px,14vw,140px); }
.road-heading a { color:#17603b; font-weight:700; }
.road-tabs { margin-block:18px; }
.road-tabs [aria-pressed=true], .road-levels [aria-pressed=true] { background:#17603b; color:white; }
.road-layout { display:grid; grid-template-columns:minmax(190px,1fr) minmax(0,2.6fr); gap:20px; align-items:start; }
.road-layout section { padding:clamp(12px,2vw,24px); border:1px solid #d7e6df; border-radius:20px; background:#fffaf0; }
.road-levels button { display:flex; align-items:center; gap:12px; width:100%; margin:7px 0; text-align:left; background:#e4efde; color:#17603b; }
.road-levels small,.road-content small { display:block; }
.road-content progress { width:100%; accent-color:#17603b; }
.road-content ol { display:grid; gap:12px; list-style:none; padding:0; }
.road-content li { display:flex; align-items:center; gap:12px; }
.road-content li > span { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:#d9edcd; color:#17603b; font-weight:700; }
.road-content li button { width:100%; text-align:left; background:#fff; border:1px solid #d7e6df; color:#17603b; }
@media(max-width:800px) {
  .road-layout { grid-template-columns:minmax(0,1fr); }
  .road-levels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .road-levels h2 { grid-column:1/-1; }
  .road-levels button { margin:0; gap:6px; padding:8px; }
}

body > aside {
  position:relative; inset:auto; width:auto; max-width:1360px; margin:auto;
  padding:14px clamp(16px,4vw,52px); display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px 20px; border:0; background:transparent;
}
body > aside > :not(.brand,.trail-top) { display:none!important; }
body > main { margin:auto; max-width:1360px; padding-inline:clamp(16px,4vw,52px); }
body > aside .trail-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; overflow:visible; }
main > header > div > small { display:none; }
.trail-more { position:relative; }
.trail-more summary { cursor:pointer; color:#24583e; font-weight:700; }
.trail-more > div { position:absolute; z-index:20; right:0; top:100%; width:min(240px,80vw); max-height:55vh; overflow:auto; padding:8px; background:#fffaf0; border:1px solid #b9ceba; border-radius:12px; }
.trail-more a,.trail-more a:last-child { display:block; border:0; border-radius:0; padding:7px; }
.road-layout { grid-template-columns:minmax(0,1fr); }
.road-levels { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; }
.road-levels h2 { grid-column:1/-1; margin:0; }
.road-levels button { margin:0; }

.road-topics { display:grid; grid-template-columns:minmax(165px,1fr) minmax(0,2.5fr); gap:12px; }
.road-topics > section:first-child button { display:block; width:100%; text-align:left; margin-bottom:6px; }
.road-topics [aria-pressed=true] { background:#17603b; color:white; }
.road-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-block:12px; }
@media(max-width:700px) { .road-topics { grid-template-columns:minmax(0,1fr); } }

.road-modes { grid-template-columns:1fr; max-width:440px; }
.road-modes button { text-align:left; }
.road-modes button:nth-child(2) { margin-inline-start:10px; }
.road-modes button:nth-child(3) { margin-inline-start:20px; }
.road-modes button:nth-child(4) { margin-inline-start:30px; }
.road-modes b { display:inline-grid; place-items:center; width:24px; height:24px; margin-inline-end:6px; border-radius:50%; background:#cce7c4; color:#17603b; }
#roadWord { width:100%; }
body:has(.road-layout) main > :is(header,#account,#companionRoot) { display:none!important; }

.road-layout > .road-content:has(.road-topics) { background:transparent; border:0; padding:0; }
.road-topic-heading { padding:6px 0 20px; }
main #app .road-topic-heading h1 { font-size:clamp(2rem,5vw,3.4rem); margin:0; }
.road-topic-heading p { margin:6px 0 0; }
.road-topics { grid-template-columns:minmax(215px,1fr) minmax(0,2.5fr); gap:clamp(12px,2vw,24px); align-items:start; }
.road-layout .road-topic-sidebar { padding:0; overflow:hidden; background:#fffdf6; }
.road-topic-cap { padding:18px; background:#195537; color:#fff; }
main #app .road-topic-cap :is(h2,p) { color:#fff; margin:0; }
.road-topic-list { padding:10px; max-height:460px; overflow:auto; }
.road-topic-list button { display:flex!important; align-items:center; gap:10px; background:#f7f4e8; }
.road-topic-list button[aria-pressed=true] { background:#e0efd8; color:#195537; border-color:#6b9a71; }
.road-topic-list button > b { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; background:#cce7c4; color:#195537; }
.road-topic-list button > span { min-width:0; flex:1; overflow-wrap:anywhere; }
.road-topic-list progress { display:block; height:7px; }
.road-layout .road-topic-work { background:#fffdf7; }
.road-topic-summary { display:grid; gap:4px; margin-bottom:12px; color:#195537; }
.road-topic-summary span { font-size:.78rem; font-weight:700; }
.road-topic-guide { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; margin-bottom:16px; border-radius:14px; background:#dcefd4; }
.road-topic-guide :is(h2,p) { margin:0; }
.road-topic-guide a { color:#195537; font-weight:700; }
@media(max-width:800px) {
  .road-topics { grid-template-columns:minmax(0,1fr); }
  .road-topic-list { max-height:230px; }
  .road-topic-guide { flex-wrap:wrap; }
}

/* English Adventure, scoped to the topic practice panel. */
.road-layout .word-adventure { min-width:0; background:linear-gradient(155deg,#edf5ff,#f1eaff 50%,#fff1f1); border-color:#dcd0ec; }
.word-adventure .road-topic-guide { background:radial-gradient(circle at 5% 20%,#fffdf5 0 4%,transparent 4.5%),linear-gradient(105deg,#ffe4aa,#fff4d6); border:1px solid #ead1a0; }
.word-adventure .road-topic-guide img { width:clamp(50px,7vw,84px); height:auto; object-fit:contain; }
.word-adventure .road-topic-guide > div { flex:1 1 175px; }
.word-adventure .adventure-picker { display:grid; gap:5px; margin-bottom:15px; }
.word-adventure select,.word-adventure button { min-height:44px; }
.adventure-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:14px; }
.word-adventure .road-modes { margin:0; gap:9px; max-width:none; }
.word-adventure .road-modes button { display:flex; align-items:center; gap:8px; margin:0; padding:10px; color:#302354; background:#eee1ff; border:2px solid transparent; }
.word-adventure .road-modes button:nth-child(1) { background:#ffedb7; }
.word-adventure .road-modes button:nth-child(2) { background:#e0e7ff; }
.word-adventure .road-modes button:nth-child(3) { background:#d6f4f3; }
.word-adventure .road-modes button[aria-pressed=true] { border-color:#6a49a5; box-shadow:0 3px 0 #6a49a540; }
.word-adventure .road-modes b { flex:none; margin:0; background:#fff9; color:#4b347a; }
.word-adventure .road-modes strong { display:block; }
.word-adventure .road-modes small { font-weight:400; }
.word-adventure .adventure-notebook { margin:0; min-width:0; padding:16px; border:2px solid #ead29e; border-top:8px solid #f0cd82; border-radius:18px; background:#fffaf0; overflow-wrap:anywhere; }
.adventure-notebook .adventure-position { margin:0; font-size:.82rem; }
.adventure-notebook progress { height:8px; }
.adventure-flash { padding:12px 0; }
.adventure-flash summary { cursor:pointer; color:#372458; }
.adventure-flash strong { font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.15; }
.adventure-notebook .row { margin-top:12px; }
.adventure-stats { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.adventure-stats > * { flex:1 1 110px; border:1px solid #dfd5ef; border-radius:12px; padding:9px; background:#fffaf7; color:#392657; font-size:.86rem; }
.adventure-stats b { display:block; }
@media(max-width:850px) { .adventure-grid { grid-template-columns:minmax(0,1fr); } }