/* =========================================================
   首页：清新卡通学习地图
   卡片统一使用 28px 圆角，功能按钮使用 14-16px 圆角，状态标签使用胶囊形。
   ========================================================= */

.screen:not(.screen-home){
  max-width:1000px;
  padding:22px 20px 70px!important;
  background:transparent!important;
}

.screen.screen-home{
  max-width:none;
  padding:0!important;
  background:#F5FBEF!important;
}

.storybook-map{
  --home-ink:#294137;
  --home-muted:#5D7067;
  --home-green:#4D8A57;
  --home-green-soft:#DCEFCF;
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  color:var(--home-ink);
  background:
    radial-gradient(circle at 8% 10%,rgba(255,255,255,.86) 0 72px,transparent 73px),
    radial-gradient(circle at 92% 15%,rgba(255,241,180,.48) 0 118px,transparent 119px),
    linear-gradient(180deg,#E7F8FF 0 390px,#F5FBEF 390px 100%);
  padding:34px 20px max(54px,env(safe-area-inset-bottom));
}

.storybook-map::before,
.storybook-map::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(.2px);
}

.storybook-map::before{
  width:420px;height:220px;left:-150px;top:315px;
  background:#CFE9A7;
  transform:rotate(8deg);
}

.storybook-map::after{
  width:520px;height:250px;right:-220px;top:335px;
  background:#B9D993;
  transform:rotate(-7deg);
}

.storybook-hero,
.storybook-tools,
.journey-intro,
.chapter-route,
.storybook-foot{
  width:min(1160px,100%);
  margin-left:auto;
  margin-right:auto;
}

/* 欢迎区 */
.storybook-hero{
  position:relative;
  z-index:1;
  min-height:350px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  align-items:stretch;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.76);
  border-radius:30px;
  background:linear-gradient(132deg,#E1F5E6 0%,#FFF4CB 55%,#FFE2E9 100%);
  box-shadow:0 24px 58px rgba(73,120,77,.18),inset 0 1px 0 rgba(255,255,255,.8);
}

.storybook-hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:42px 24px 42px 50px;
}

.storybook-kicker{
  margin:0 0 10px;
  color:#397449;
  font-size:14px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.08em;
}

.storybook-hero h1{
  max-width:12em;
  margin:0;
  color:#253F35;
  font-size:clamp(34px,4.2vw,50px);
  line-height:1.16;
  letter-spacing:-.025em;
}

.storybook-hero-copy>p:last-of-type{
  max-width:31em;
  margin:17px 0 0;
  color:#536C61;
  font-size:17px;
  line-height:1.75;
  font-weight:650;
}

.hero-next{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  margin-top:24px;
  padding:8px 16px 8px 10px;
  border:1px solid rgba(70,125,78,.14);
  border-radius:16px;
  background:rgba(255,254,250,.8);
  box-shadow:0 8px 20px rgba(79,121,75,.09);
}

.hero-next span{
  display:grid;
  place-items:center;
  min-width:70px;
  min-height:32px;
  padding:0 10px;
  border-radius:11px;
  color:#356843;
  background:#DDEFCF;
  font-size:13px;
  font-weight:900;
}

.hero-next strong{font-size:16px;color:#2F5440;white-space:nowrap}

.hero-dual-acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  width:100%;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:8px 16px 8px 12px;
  border-radius:16px;
  text-align:left;
  border:2px solid transparent;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s;
}

.hero-cta:hover{transform:translateY(-2px)}
.hero-cta:active{transform:translateY(1px) scale(.99)}
.hero-cta:focus-visible{outline:3px solid #7C5CE8;outline-offset:3px}

.hero-cta-ico{
  flex:0 0 36px;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:11px;
  font-size:20px;
  background:rgba(255,255,255,.72);
}

.hero-cta>span:last-child{display:flex;flex-direction:column;min-width:0}
.hero-cta b{font-size:15px;line-height:1.25;font-weight:900;white-space:nowrap}
.hero-cta small{font-size:11.5px;line-height:1.25;font-weight:800;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hero-cta.is-book{
  background:#FFFDF8;
  border-color:#BFE0B6;
  color:#275237;
  box-shadow:0 4px 0 #CBE4C2,0 10px 20px rgba(64,108,68,.1);
}
.hero-cta.is-book .hero-cta-ico{background:#E3F4DC}

.hero-cta.is-siwei{
  background:linear-gradient(135deg,#7C5CE8 0%,#5B42C7 100%);
  border-color:#5339BC;
  color:#fff;
  box-shadow:0 4px 0 #432CA3,0 12px 24px rgba(92,66,200,.28);
}
.hero-cta.is-siwei .hero-cta-ico{background:rgba(255,255,255,.2)}
.hero-cta.is-siwei small{color:rgba(255,255,255,.9)}

.hero-cta.is-lab{
  background:linear-gradient(135deg,#FFF4D9 0%,#FFE6F1 100%);
  border-color:#F3C677;
  color:#6E3B16;
  box-shadow:0 4px 0 #E9BE72,0 10px 20px rgba(158,104,35,.13);
}
.hero-cta.is-lab .hero-cta-ico{background:rgba(255,255,255,.78)}

.hero-siwei-float{
  position:absolute;
  z-index:4;
  left:20px;
  top:26px;
  padding:8px 13px;
  border-radius:15px;
  border:2px solid rgba(124,92,232,.35);
  background:rgba(255,255,255,.9);
  color:#4B359E;
  box-shadow:0 10px 22px rgba(84,62,168,.16);
  transform:rotate(-3deg);
}
.hero-siwei-float span{display:block;font-size:11.5px;font-weight:900;color:#6A4FD8}
.hero-siwei-float b{display:block;font-size:15px;line-height:1.25;font-weight:900}

.storybook-hero-art{
  position:relative;
  min-height:350px;
  overflow:hidden;
  isolation:isolate;
}

.hero-sun{
  position:absolute;
  top:34px;right:58px;
  width:104px;height:104px;
  border-radius:50%;
  background:#FFD95E;
  box-shadow:inset -10px -10px 0 rgba(244,174,35,.13),0 0 0 14px rgba(255,246,177,.42);
}

.hero-cloud{
  position:absolute;
  width:108px;height:32px;
  border-radius:30px;
  background:rgba(255,254,250,.88);
  box-shadow:28px -18px 0 3px rgba(255,254,250,.88),62px -6px 0 -1px rgba(255,254,250,.88);
}

.hero-cloud-one{top:76px;left:14px;transform:scale(.72)}
.hero-cloud-two{top:136px;right:12px;transform:scale(.48)}

.hero-hill{
  position:absolute;
  left:-8%;right:-12%;bottom:-35%;
  height:68%;
  border-radius:50% 50% 0 0;
  transform:rotate(-4deg);
}

.hero-hill-back{bottom:-22%;background:#A9D889;transform:rotate(8deg)}
.hero-hill-front{background:#71B86F}

.storybook-hero .hero-pal{
  position:absolute;
  z-index:3;
  left:18%;
  bottom:26px;
  width:180px;
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 12px 12px rgba(54,101,61,.16));
}

.storybook-hero .hero-pal .pal-fig{width:142px}
.storybook-hero .hero-pal .pal-bub{top:-12px;right:auto;left:76%;font-size:13px}
.hero-fallback-pal{display:block;width:142px;filter:drop-shadow(0 9px 7px rgba(54,101,61,.14))}
.hero-fallback-pal svg{display:block;width:100%;height:auto}

.hero-road-sign{
  position:absolute;
  z-index:4;
  right:28px;
  bottom:45px;
  width:170px;
  padding:13px 14px 12px;
  text-align:center;
  border:3px solid #A96C2E;
  border-radius:16px;
  color:#603C1C;
  background:#F8C979;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 9px 18px rgba(93,76,42,.16);
  transform:rotate(2deg);
}

.hero-road-sign::after{
  content:"";
  position:absolute;
  left:50%;top:100%;
  width:15px;height:66px;
  transform:translateX(-50%);
  border-left:3px solid #9B622B;
  border-right:3px solid #9B622B;
  background:#C78643;
}

.hero-road-sign span{display:block;font-size:12px;font-weight:850}
.hero-road-sign b{display:block;margin-top:1px;font-size:25px;line-height:1.2}

/* 教材同步说明 */
.textbook-feature{
  position:relative;
  z-index:2;
  width:min(1160px,100%);
  min-height:358px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:minmax(245px,.44fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(34px,4.5vw,58px);
  overflow:hidden;
  padding:30px 96px 30px 34px;
  border:2px solid rgba(207,229,198,.9);
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 48%,rgba(214,239,196,.78) 0 128px,transparent 129px),
    linear-gradient(120deg,rgba(248,253,242,.98),rgba(255,253,242,.96) 58%,rgba(255,246,211,.92));
  box-shadow:0 20px 42px rgba(69,106,65,.13),inset 0 1px 0 rgba(255,255,255,.9);
}
.textbook-feature::before{
  content:"";
  position:absolute;
  right:-94px;
  bottom:-154px;
  width:290px;
  height:290px;
  border-radius:50%;
  background:rgba(199,226,157,.34);
  pointer-events:none;
}
.textbook-cover-wrap{
  position:relative;
  isolation:isolate;
  justify-self:center;
  width:clamp(210px,18.5vw,236px);
  aspect-ratio:1128/1571;
  border-radius:19px;
  transform:rotate(-2.4deg);
}
.textbook-cover-wrap::before,
.textbook-cover-wrap::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.textbook-cover-wrap::before{
  z-index:-2;
  inset:-22px -31px;
  border-radius:42% 58% 54% 46% / 47% 44% 56% 53%;
  background:linear-gradient(145deg,#E4F4D5,#CBE8B7);
  transform:rotate(4deg);
}
.textbook-cover-wrap::after{
  z-index:-1;
  inset:11px -12px -13px 12px;
  border-radius:19px;
  background:#B9DDA4;
  box-shadow:0 18px 30px rgba(57,94,54,.2);
  transform:rotate(4deg);
}
.textbook-cover-wrap img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:3px solid #FFF;
  border-radius:19px;
  box-shadow:0 16px 30px rgba(55,91,52,.2);
}
.textbook-feature-copy{position:relative;z-index:1;min-width:0;text-align:left}
.textbook-label{margin:0 0 7px;color:#4D8A57;font-size:13px;line-height:1.3;font-weight:950;letter-spacing:.1em}
.textbook-feature-copy h2{max-width:15em;margin:0;color:#294137;font-size:clamp(30px,3.1vw,36px);line-height:1.2;letter-spacing:-.02em}
.textbook-feature-copy>p:not(.textbook-label){max-width:43em;margin:13px 0 0;color:#566D62;font-size:16px;line-height:1.72;font-weight:650}
.textbook-proof-list{display:flex;flex-wrap:wrap;gap:8px 9px;margin-top:18px}
.textbook-proof-list span{padding:7px 12px;border-radius:999px;color:#3F6F49;background:#E6F3DD;font-size:12.5px;line-height:1.3;font-weight:900}
.textbook-sync-mark{
  position:absolute;
  z-index:2;
  right:24px;
  top:24px;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  border:2px solid #DDBD4A;
  border-radius:50%;
  color:#765A13;
  background:#FFF1B9;
  box-shadow:0 8px 18px rgba(177,139,37,.17),inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotate(5deg)
}
.textbook-sync-mark b{font-size:19px;line-height:1;font-weight:950}
.textbook-sync-mark span{font-size:11px;line-height:1.2;font-weight:900}
/* 学习工具 */
.storybook-tools{
  position:relative;
  z-index:2;
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-top:16px;
  padding:2px;
  overflow-x:auto;
  scrollbar-width:none;
}

.storybook-tools::-webkit-scrollbar{display:none}

.story-tool{
  flex:1 0 148px;
  min-width:0;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  text-align:left;
  border:1px solid #E0EED8;
  border-radius:16px;
  color:#314D40;
  background:rgba(255,254,250,.94);
  box-shadow:0 7px 18px rgba(78,116,73,.08);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s;
}

button.story-tool:hover{transform:translateY(-2px);border-color:#A9CF9B;box-shadow:0 11px 24px rgba(78,116,73,.13)}
button.story-tool:active{transform:translateY(0) scale(.98)}
button.story-tool:focus-visible{outline:3px solid #4D8A57;outline-offset:3px}

.story-tool-icon{
  flex:0 0 38px;
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#EDF6E7;
  font-size:22px;
}

.story-tool>span:last-child{min-width:0;display:flex;flex-direction:column}
.story-tool small{color:#5F7169;font-size:11px;line-height:1.25;font-weight:800}
.story-tool b{overflow:hidden;color:#314D40;font-size:14px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.story-tool.is-gold .story-tool-icon{background:#FFF1B9}
.story-tool.is-alert .story-tool-icon{background:#FFE2E7}
.story-tool.is-siwei{border-color:#D2C4FF;background:linear-gradient(135deg,#F6F2FF 0%,#EEF3FF 100%)}
.story-tool.is-siwei .story-tool-icon{background:#E8DFFF}
.story-tool.is-siwei b{color:#5237B8}
.story-tool.can-spin{border-color:#E6C65A;background:#FFFCED}

/* 路线标题 */
.journey-intro{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  padding:54px 10px 24px 116px;
}

.journey-intro h2{
  margin:0;
  color:#294137;
  font-size:clamp(27px,3vw,38px);
  line-height:1.22;
  letter-spacing:-.02em;
}

.journey-intro p{
  max-width:36em;
  margin:10px 0 0;
  color:#60736A;
  font-size:15px;
  line-height:1.7;
  font-weight:650;
}

.journey-summary{
  min-width:128px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:1px 7px;
  padding:13px 16px;
  border:1px solid #DCEBD5;
  border-radius:18px;
  background:#FFFDF7;
  box-shadow:0 8px 20px rgba(69,105,65,.08);
}

.journey-summary strong{grid-row:1/3;color:#3D7849;font-size:36px;line-height:1}
.journey-summary span{color:#3F554B;font-size:13px;font-weight:900;white-space:nowrap}
.journey-summary small{color:#5F7169;font-size:11px;font-weight:750}

/* 连续学习路线 */
.chapter-route{
  position:relative;
  z-index:1;
  list-style:none;
  padding:8px 8px 14px 116px;
  margin-top:0;
  margin-bottom:0;
}

.chapter-route::before{
  content:"";
  position:absolute;
  top:38px;bottom:62px;left:52px;
  width:17px;
  border:4px solid #FFF9DD;
  border-radius:999px;
  background:repeating-linear-gradient(180deg,#7EBE6B 0 20px,#A5D78A 20px 38px);
  box-shadow:0 0 0 2px #75A962,0 7px 18px rgba(71,118,69,.13);
}

.chapter-stop{
  position:relative;
  margin:0 0 34px;
  scroll-margin-top:92px;
}

.chapter-stop::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-55px;
  top:86px;
  width:58px;
  height:13px;
  border-top:4px solid #FFF9DD;
  border-bottom:4px solid #FFF9DD;
  background:#8CC577;
  box-shadow:0 0 0 2px #75A962;
}

.chapter-marker{
  position:absolute;
  z-index:3;
  left:-103px;
  top:48px;
  width:82px;height:82px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;
  align-items:center;
  justify-items:center;
  padding:10px 8px 8px;
  border:4px solid #FFFDF5;
  border-radius:50%;
  color:var(--chapter);
  background:var(--chapter-soft);
  box-shadow:0 0 0 3px var(--chapter),0 10px 19px rgba(66,103,63,.15);
}

.chapter-marker small{
  grid-column:1/3;
  align-self:end;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}

.chapter-marker b{align-self:start;font-size:26px;line-height:1;font-weight:950}
.chapter-marker>span{align-self:start;font-size:21px;line-height:1}
.chapter-marker i{position:absolute;right:-8px;top:-14px;font-size:22px;font-style:normal;transform:rotate(11deg)}

.chapter-entry{
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:minmax(330px,.96fr) minmax(0,1.04fr);
  align-items:stretch;
  overflow:hidden;
  padding:0;
  text-align:left;
  border:2px solid var(--chapter-soft);
  border-radius:28px;
  color:var(--home-ink);
  background:#FFFEFA;
  box-shadow:0 18px 38px rgba(72,109,68,.12),0 3px 8px rgba(72,109,68,.07);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s;
}

.chapter-entry:hover,
.chapter-entry.is-open{
  transform:translateY(-4px);
  border-color:var(--chapter);
  box-shadow:0 24px 44px rgba(72,109,68,.17),0 4px 10px rgba(72,109,68,.08);
}

.chapter-entry:active{transform:translateY(-1px) scale(.992)}
.chapter-entry:focus-visible{outline:4px solid var(--chapter);outline-offset:4px}

.chapter-media{
  position:relative;
  min-width:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  aspect-ratio:3/2;
  background:var(--chapter-soft);
}

.chapter-media img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
}

.chapter-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  padding:25px 28px 24px;
  background:linear-gradient(145deg,#FFFEFA 0%,var(--chapter-tint) 100%);
}

.chapter-reverse .chapter-media{order:2}
.chapter-reverse .chapter-copy{order:1}
.chapter-compact .chapter-entry{grid-template-columns:minmax(285px,.78fr) minmax(0,1.22fr)}
.chapter-wide .chapter-entry{grid-template-columns:minmax(390px,1.13fr) minmax(0,.87fr)}

.chapter-meta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:1px;
}

.chapter-book{
  color:var(--chapter);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.chapter-state{
  flex:0 0 auto;
  padding:3px 10px;
  border:1px solid color-mix(in srgb,var(--chapter) 24%,transparent);
  border-radius:999px;
  color:var(--chapter);
  background:var(--chapter-soft);
  font-size:11px;
  line-height:1.4;
  font-weight:900;
}

.chapter-copy>strong{
  margin-top:1px;
  color:#273E35;
  font-size:clamp(24px,2.5vw,31px);
  line-height:1.22;
  letter-spacing:-.02em;
}

.chapter-title{color:#4D6258;font-size:16px;line-height:1.35;font-weight:900}
.chapter-lesson{color:var(--chapter);font-size:14px;line-height:1.45;font-weight:900}
.chapter-topics{color:#5F7169;font-size:13px;line-height:1.62;font-weight:650}

.chapter-games-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-top:2px;
  color:#4E6359;
  font-size:12px;
  line-height:1.4;
  font-weight:800;
}

.chapter-games-list>span+span{
  padding-left:10px;
  border-left:1px solid #D8E4D3;
}

.chapter-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  margin-top:3px;
  color:var(--chapter);
  font-size:14px;
  font-weight:950;
}

.chapter-action>span{
  width:25px;height:25px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#FFFEFA;
  background:var(--chapter);
  transition:transform .18s;
}

.chapter-action i{font-size:15px;font-style:normal}
.chapter-entry:hover .chapter-action>span{transform:translateX(3px)}

.chapter-stop.is-next .chapter-entry{border-color:var(--chapter);box-shadow:0 21px 44px rgba(72,109,68,.17)}
.chapter-stop.is-next .chapter-state{color:#704F00;background:#FFF0B5;border-color:#D5AF32}
.chapter-stop.is-done .chapter-state{color:#246B45;background:#DDF4E5;border-color:#89C7A1}

/* 就地展开的关卡 */
.chapter-panel-item{
  position:relative;
  z-index:2;
  list-style:none;
  margin:-13px 0 35px;
}

.chapter-panel-item[hidden]{display:none}

.chapter-panel{
  overflow:hidden;
  border:2px solid var(--chapter-soft);
  border-radius:28px;
  background:var(--chapter-tint);
  box-shadow:0 18px 38px rgba(72,109,68,.13);
}

.chapter-panel-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 18px 15px;
  border-bottom:1px solid #E2EADDEB;
  background:linear-gradient(120deg,var(--chapter-soft),#FFFEFA 72%);
}

.chapter-panel-icon{
  flex:0 0 56px;
  width:56px;height:56px;
  display:grid;
  place-items:center;
  border:3px solid #FFFEFA;
  border-radius:18px;
  background:var(--chapter-soft);
  box-shadow:0 5px 13px rgba(64,97,60,.11);
  font-size:30px;
}

.chapter-panel-info{flex:1;min-width:0}
.chapter-panel-info h2{margin:0;color:#283F35;font-size:22px;line-height:1.25}
.chapter-panel-info p{margin:3px 0 0;color:#5A6D63;font-size:13px;line-height:1.45;font-weight:700}

.chapter-panel-close{
  flex:0 0 44px;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border:1px solid #D7E4D1;
  border-radius:14px;
  color:#40584C;
  background:#FFFEFA;
  font-size:16px;
  transition:transform .16s,background .16s;
}

.chapter-panel-close:hover{background:var(--chapter-soft);transform:rotate(4deg)}
.chapter-panel-close:active{transform:scale(.96)}
.chapter-panel-close:focus-visible{outline:3px solid var(--chapter);outline-offset:3px}

.chapter-game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  gap:12px;
  padding:16px;
}

.chapter-game-grid .gcard{
  min-height:154px;
  border:1px solid #E5ECDFFF;
  background:#FFFEFA;
  box-shadow:0 8px 20px rgba(73,106,68,.09);
}

.chapter-game-grid .gcard:hover{box-shadow:0 13px 27px rgba(73,106,68,.14)}
.chapter-game-grid .gcard:focus-visible{outline:3px solid var(--chapter);outline-offset:3px}
.chapter-game-grid .gcard .gn{color:#30483D}
.chapter-game-grid .gcard .gd{color:#5E7067}

.storybook-foot{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  padding:14px 0 0;
}

.storybook-foot .btn.ghost{
  border:2px solid #CFE1C8;
  color:#3B5C49;
  background:#FFFEFA;
  box-shadow:0 5px 0 #CADDBFFF,0 9px 18px rgba(69,104,64,.1);
}

.storybook-foot .btn.ghost:focus-visible{outline:3px solid #4D8A57;outline-offset:4px}

@media (prefers-reduced-motion:no-preference){
  .storybook-hero{animation:storybook-enter .55s cubic-bezier(.16,1,.3,1) both}
  .hero-cloud-one{animation:cloud-drift 5.8s ease-in-out infinite alternate}
  .hero-cloud-two{animation:cloud-drift 7.2s ease-in-out -2s infinite alternate-reverse}
  .chapter-stop.is-next .chapter-marker{animation:chapter-ready 2.2s ease-in-out infinite}
  .chapter-panel{animation:chapter-panel-in .26s cubic-bezier(.16,1,.3,1) both}
}

@keyframes storybook-enter{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@keyframes cloud-drift{
  from{translate:0 0}
  to{translate:12px 2px}
}

@keyframes chapter-ready{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 3px var(--chapter),0 10px 19px rgba(66,103,63,.15)}
  50%{transform:translateY(-5px);box-shadow:0 0 0 7px var(--chapter-soft),0 13px 23px rgba(66,103,63,.19)}
}

@keyframes chapter-panel-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .storybook-map *,
  .storybook-map *::before,
  .storybook-map *::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition-duration:.01ms!important;
  }
}

@media (max-width:900px){
  .storybook-map{padding-left:16px;padding-right:16px}
  .storybook-hero{grid-template-columns:minmax(0,1fr) 320px}
  .storybook-hero-copy{padding-left:34px}
  .storybook-hero h1{font-size:38px}
  .storybook-hero .hero-pal{left:10%;width:155px}
  .hero-road-sign{right:18px;width:150px}
  .journey-intro{padding-left:99px}
  .chapter-route{padding-left:99px}
  .chapter-route::before{left:43px}
  .chapter-marker{left:-91px}
  .chapter-stop::before{left:-48px;width:51px}
  .chapter-entry,
  .chapter-compact .chapter-entry,
  .chapter-wide .chapter-entry{grid-template-columns:minmax(285px,.9fr) minmax(0,1.1fr)}
  .chapter-copy{padding:22px}
  .textbook-feature{min-height:330px;grid-template-columns:210px minmax(0,1fr);gap:30px;padding:28px 82px 28px 28px}
  .textbook-cover-wrap{width:190px}
  .textbook-feature-copy h2{font-size:30px}
  .textbook-feature-copy>p:not(.textbook-label){font-size:15px}
  .textbook-sync-mark{right:20px;top:20px;width:66px;height:66px}
}

@media (max-width:720px){
  .storybook-map{
    padding:18px 12px max(42px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#E7F8FF 0 520px,#F5FBEF 520px 100%);
  }
  .storybook-hero{
    min-height:0;
    grid-template-columns:1fr;
    border-radius:26px;
  }
  .storybook-hero-copy{padding:28px 24px 22px}
  .storybook-hero h1{max-width:11em;font-size:clamp(31px,9.5vw,42px)}
  .storybook-hero-copy>p:last-of-type{font-size:15px;line-height:1.68}
  .hero-next{margin-top:18px}
  .storybook-hero-art{min-height:224px}
  .hero-sun{width:82px;height:82px;top:22px;right:46px}
  .storybook-hero .hero-pal{left:13%;bottom:10px;width:140px}
  .storybook-hero .hero-pal .pal-fig{width:112px}
  .hero-fallback-pal{width:112px}
  .hero-road-sign{right:20px;bottom:34px;width:142px;padding:10px 10px 9px}
  .hero-road-sign::after{height:46px}
  .hero-road-sign b{font-size:22px}
  .storybook-tools{margin-top:12px;padding-bottom:7px}
  .story-tool{flex-basis:142px}
  .journey-intro{
    grid-template-columns:1fr auto;
    align-items:end;
    padding:37px 4px 20px 70px;
  }
  .journey-intro h2{font-size:27px}
  .journey-intro p{font-size:13px}
  .journey-summary{min-width:102px;padding:11px 12px}
  .journey-summary strong{font-size:30px}
  .journey-summary span{font-size:11px}
  .chapter-route{padding:4px 0 10px 70px}
  .chapter-route::before{left:27px;width:13px;border-width:3px}
  .chapter-stop{margin-bottom:24px}
  .chapter-stop::before{left:-37px;top:54px;width:40px;height:10px;border-top-width:3px;border-bottom-width:3px}
  .chapter-marker{
    left:-67px;top:28px;
    width:58px;height:58px;
    padding:7px 5px 5px;
    border-width:3px;
  }
  .chapter-marker small{font-size:7px}
  .chapter-marker b{font-size:19px}
  .chapter-marker>span{font-size:16px}
  .chapter-marker i{right:-7px;top:-12px;font-size:18px}
  .chapter-entry,
  .chapter-compact .chapter-entry,
  .chapter-wide .chapter-entry{
    grid-template-columns:1fr;
    border-radius:23px;
  }
  .chapter-media,
  .chapter-reverse .chapter-media{order:1}
  .chapter-copy,
  .chapter-reverse .chapter-copy{order:2}
  .chapter-copy{padding:19px 18px 18px}
  .chapter-copy>strong{font-size:24px}
  .chapter-topics{font-size:12.5px}
  .chapter-panel-item{margin:-7px 0 25px}
  .chapter-panel{border-radius:23px}
  .chapter-panel-header{padding:14px 13px;gap:10px}
  .chapter-panel-icon{flex-basis:48px;width:48px;height:48px;border-radius:15px;font-size:25px}
  .chapter-panel-info h2{font-size:19px}
  .chapter-panel-info p{font-size:11.5px}
  .chapter-game-grid{grid-template-columns:1fr;padding:12px}
}

@media (max-width:460px){
  .storybook-map{padding-left:9px;padding-right:9px}
  .storybook-hero-copy{padding:24px 19px 19px}
  .storybook-kicker{font-size:12px}
  .storybook-hero h1{font-size:31px}
  .hero-next{width:100%;justify-content:flex-start;padding-right:10px}
  .hero-next strong{overflow:hidden;font-size:14px;text-overflow:ellipsis}
  .hero-dual-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .hero-cta.is-siwei{grid-column:1/-1}
  .hero-cta{min-height:48px;padding:7px 10px;gap:8px}
  .hero-cta-ico{flex-basis:32px;width:32px;height:32px;font-size:18px}
  .hero-cta b{font-size:13.5px}
  .hero-cta small{font-size:11px}
  .hero-siwei-float{left:12px;top:14px;padding:6px 10px}
  .hero-siwei-float b{font-size:13px}
  .storybook-hero-art{min-height:198px}
  .storybook-hero .hero-pal{left:5%;width:125px}
  .storybook-hero .hero-pal .pal-fig{width:100px}
  .hero-fallback-pal{width:100px}
  .hero-road-sign{right:12px;bottom:28px;width:130px}
  .journey-intro{display:block;padding:34px 3px 17px 61px}
  .journey-summary{width:max-content;margin-top:13px}
  .chapter-route{padding-left:61px}
  .chapter-route::before{left:24px}
  .chapter-marker{left:-59px;width:52px;height:52px;top:25px}
  .chapter-marker b{font-size:17px}
  .chapter-marker>span{font-size:14px}
  .chapter-stop::before{left:-30px;top:49px;width:33px}
  .chapter-copy{padding:17px 15px 16px;gap:6px}
  .chapter-meta{align-items:flex-start}
  .chapter-book{font-size:10.5px}
  .chapter-state{font-size:10px;padding:2px 7px}
  .chapter-copy>strong{font-size:22px}
  .chapter-title{font-size:14px}
  .chapter-lesson{font-size:13px}
  .chapter-games-list{display:block}
  .chapter-games-list>span{display:block}
  .chapter-games-list>span+span{margin-top:3px;padding-left:0;border-left:0}
  .chapter-panel-close{flex-basis:44px;width:44px;height:44px}
}

/* 教材同步说明：窄屏覆盖 */
@media (max-width:720px){
  .textbook-feature{min-height:244px;grid-template-columns:148px minmax(0,1fr);gap:22px;padding:23px 20px;border-radius:24px}
  .textbook-cover-wrap{width:142px;border-radius:14px}
  .textbook-cover-wrap::before{inset:-13px -17px}
  .textbook-cover-wrap::after{inset:8px -8px -9px 8px;border-radius:14px}
  .textbook-cover-wrap img{border-width:2px;border-radius:14px;box-shadow:0 11px 22px rgba(55,91,52,.18)}
  .textbook-label{margin-bottom:5px;font-size:10.5px}
  .textbook-feature-copy h2{font-size:24px}
  .textbook-feature-copy>p:not(.textbook-label){font-size:13px;line-height:1.58;margin-top:8px}
  .textbook-proof-list{gap:5px;margin-top:10px}
  .textbook-proof-list span{padding:4px 7px;font-size:10px}
  .textbook-sync-mark{left:128px;right:auto;top:14px;width:50px;height:50px;border-width:1.5px}
  .textbook-sync-mark b{font-size:13px}
  .textbook-sync-mark span{font-size:8.5px}
}

@media (max-width:460px){
  .textbook-feature{min-height:220px;grid-template-columns:126px minmax(0,1fr);gap:14px;padding:19px 14px;border-radius:21px}
  .textbook-cover-wrap{width:120px}
  .textbook-feature-copy h2{font-size:20px}
  .textbook-feature-copy>p:not(.textbook-label){font-size:12px;line-height:1.52;margin-top:7px}
  .textbook-proof-list{display:none}
  .textbook-sync-mark{left:103px;top:11px;width:44px;height:44px}
  .textbook-sync-mark b{font-size:11px}
  .textbook-sync-mark span{font-size:7.5px}
}

@media (max-width:360px){
  .textbook-feature{grid-template-columns:1fr;gap:25px;padding:25px 18px 23px}
  .textbook-cover-wrap{width:150px}
  .textbook-feature-copy{text-align:center}
  .textbook-feature-copy h2{max-width:none}
  .textbook-proof-list{justify-content:center}
  .textbook-sync-mark{left:calc(50% + 42px);top:15px;width:48px;height:48px}
}

/* ===========================================================
   首页整理（两扇门）：课本是每天必学的基础，智慧岛是学有余力的拔高
   顺序：今日学习打卡 → 欢迎区两扇门 → 我的收获 → 课本学习路线 → 更多学习 → 家长入口
   =========================================================== */
.home-hero{min-height:0}
.home-hero .storybook-hero-copy{padding-top:32px;padding-bottom:32px}
.home-hero h1{font-size:clamp(30px,3.6vw,42px)}
.home-roles{margin:12px 0 0;max-width:34em}
.home-roles b{color:#2E5E3E}

.home-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;margin-top:20px}
.home-door{
  display:grid;gap:4px;align-content:start;justify-items:start;text-align:left;
  min-height:150px;padding:16px 18px 14px;border-radius:22px;cursor:pointer;
  font:inherit;color:#253F35;
  transition:transform .18s ease,box-shadow .18s ease;
}
.home-door:hover{transform:translateY(-2px)}
.home-door:active{transform:translateY(1px) scale(.99)}
.home-door:focus-visible{outline:3px solid #2E5E3E;outline-offset:3px}
.home-door.is-book{border:2px solid #BFE0B5;background:#FFFEF8;box-shadow:0 6px 0 #CFE6C6,0 12px 24px rgba(69,104,64,.12)}
.home-door.is-siwei{border:2px solid #D8CCFF;background:#F8F4FF;box-shadow:0 6px 0 #DED3FF,0 12px 24px rgba(108,80,200,.12)}
.home-door-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.02em}
.is-book .home-door-tag{background:#E3F4DC;color:#2E6B3E}
.is-siwei .home-door-tag{background:#EAE2FF;color:#5B3FC4}
.home-door-title{font-size:22px;font-weight:900;line-height:1.25}
.home-door-now{font-size:14px;font-weight:800;color:#4D6458;line-height:1.45}
.is-siwei .home-door-now{color:#5A4E7A}
.home-door-meta{font-size:12.5px;font-weight:750;color:#71837A}
.home-door-go{margin-top:6px;font-size:15px;font-weight:900}
.is-book .home-door-go{color:#2E7D46}
.is-siwei .home-door-go{color:#6A48E0}

/* 课本路线标题里的小封面 */
.journey-intro{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.journey-cover.textbook-cover-wrap{width:84px;padding:0;border-radius:10px;transform:none;border:0;background:none;cursor:pointer}
.journey-cover::before,.journey-cover::after{display:none}
.journey-cover:focus-visible{outline:3px solid #4D8A57;outline-offset:3px}
.journey-cover img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 8px 18px rgba(60,80,50,.18)}
.journey-intro .textbook-open-btn{margin-top:10px;padding:6px 12px;border:2px solid #CFE1C8;border-radius:999px;background:#FFFEFA;color:#3B5C49;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.journey-intro .textbook-open-btn:focus-visible{outline:3px solid #4D8A57;outline-offset:3px}

/* 更多学习（别的板块的入口） */
.home-more{width:min(1160px,100%);margin:28px auto 0;display:grid;gap:10px}
.home-more h2{margin:0;font-size:18px;font-weight:900;color:#3B5C49}

@media (max-width:720px){
  .home-hero .storybook-hero-copy{padding:24px 18px 18px}
  .home-hero .storybook-hero-art{min-height:150px}
  .home-hero .hero-sun{width:60px;height:60px;top:14px}
  .home-doors{gap:10px;margin-top:16px}
  .home-door{min-height:0;padding:12px 13px 11px;border-radius:18px}
  .home-door-title{font-size:19px}
  .home-door-now{font-size:13px}
  .journey-intro{grid-template-columns:auto minmax(0,1fr)}
  .journey-cover.textbook-cover-wrap{width:64px}
  .journey-intro .journey-summary{grid-column:1/-1;width:max-content}
}
@media (max-width:460px){
  .home-doors{grid-template-columns:1fr}
  .journey-intro{display:grid}
}

/* 二年级上册 / 下册切换（课本路线上方） */
.book-switch{
  position:relative;z-index:1;
  width:min(1160px,100%);margin:34px auto -30px;padding:0 10px 0 116px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.book-tab{
  display:grid;gap:2px;justify-items:start;min-width:168px;min-height:56px;padding:9px 18px;
  border:2px solid #CFE1C8;border-radius:16px;background:#FFFEFA;color:#3B5C49;
  font:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 14px rgba(69,105,65,.08);
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
.book-tab:hover{transform:translateY(-2px);border-color:#9FC79A}
.book-tab:focus-visible{outline:3px solid #4D8A57;outline-offset:3px}
.book-tab-name{font-size:16px;font-weight:900;line-height:1.3}
.book-tab small{color:#5F7169;font-size:12px;font-weight:750}
.book-tab.is-on{border-color:#3D7849;background:#3D7849;color:#fff;box-shadow:0 8px 18px rgba(61,120,73,.24);cursor:default}
.book-tab.is-on:hover{transform:none}
.book-tab.is-on small{color:#E4F3E2}
@media (prefers-reduced-motion:reduce){.book-tab{transition:none}.book-tab:hover{transform:none}}
@media (max-width:900px){.book-switch{padding-left:99px}}
@media (max-width:720px){.book-switch{padding-left:70px}}
@media (max-width:460px){
  .book-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:26px auto -22px;padding:0 3px 0 61px}
  .book-tab{min-width:0;padding:8px 10px}
  .book-tab-name{font-size:14.5px}
  .book-tab small{font-size:11px}
}
.book-tab:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.book-tab:disabled:hover{transform:none;border-color:#CFE1C8}

/* 下册纯净模式：默认收起上册切换条，保留主动展开入口与学习阶段向导 */
.book-bar.is-g2b{
  position:relative;z-index:2;
  width:min(1160px,100%);margin:30px auto -28px;padding:0 10px 0 116px;
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
}
.book-drawer{
  flex:1 1 360px;min-width:0;
  border:2px solid #BCE2C6;border-radius:18px;background:linear-gradient(135deg,#F2FBF4 0%,#FFFEFA 100%);
  box-shadow:0 6px 16px rgba(46,125,70,.08);overflow:hidden;
}
.book-drawer-sum{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;cursor:pointer;user-select:none;color:#275837;font-size:14.5px;font-weight:800;
}
.book-drawer-sum::-webkit-details-marker{display:none}
.book-drawer-cur{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.book-drawer-cur b{color:#1E4E2E;font-size:15.5px;font-weight:950}
.book-drawer-cur small{color:#557961;font-size:12.5px;font-weight:750}
.book-drawer-toggle{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;background:#E2F4E7;color:#26653B;
  font-size:12.5px;font-weight:900;white-space:nowrap;
}
.book-drawer[open] .book-drawer-toggle{background:#2E7D46;color:#FFF}
.book-drawer .book-switch{width:auto;margin:0;padding:4px 14px 14px;border-top:1px dashed #CFE6D5}
.stage-guide-trigger,.stage-guide-pill{
  display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:9px 15px;
  border:2px solid #BCE0C8;border-radius:16px;background:linear-gradient(135deg,#ECFDF3 0%,#F7FEE7 100%);
  color:#1E5B37;font:inherit;font-size:13.5px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 14px rgba(45,122,74,.1);
}
.stage-guide-pill{min-height:56px}
.stage-guide-trigger:hover,.stage-guide-pill:hover{border-color:#68B884;background:#E4FAEE}
.stage-guide-trigger:focus-visible,.stage-guide-pill:focus-visible,.book-drawer-sum:focus-visible{outline:3px solid #4D8A57;outline-offset:3px}
@media (max-width:900px){.book-bar.is-g2b{padding-left:99px}}
@media (max-width:720px){.book-bar.is-g2b{padding-left:70px}}
@media (max-width:460px){
  .book-bar.is-g2b{margin:24px auto -20px;padding:0 3px 0 61px}
  .book-drawer .book-switch{padding:8px 10px 10px}
  .stage-guide-pill{grid-column:1/-1;justify-content:center;min-height:44px}
}