:root {
  --ink:#183a62;
  --muted:#5f7896;
  --blue:#4e8cff;
  --cyan:#2fd1cf;
  --green:#42c987;
  --yellow:#ffc857;
  --orange:#ff9c59;
  --purple:#9b72ff;
  --shadow:0 16px 42px rgba(50,98,154,.15);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  padding-bottom:112px;
  color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% 2%,rgba(255,219,91,.35),transparent 22%),
    radial-gradient(circle at 92% 8%,rgba(75,219,214,.28),transparent 24%),
    linear-gradient(180deg,#f9fdff 0%,#eff8ff 46%,#fff8ec 100%);
}
a{color:inherit;-webkit-tap-highlight-color:transparent}
.map-topbar{
  position:sticky;
  top:0;
  z-index:60;
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:10px max(16px,env(safe-area-inset-left));
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(87,142,201,.14);
  box-shadow:0 7px 24px rgba(45,92,145,.08);
  backdrop-filter:blur(18px) saturate(1.2);
}
.brand-mark{display:inline-flex;align-items:center;gap:10px;width:max-content;text-decoration:none;font-weight:900;color:#315a86}
.brand-mark img{width:50px;height:50px;object-fit:contain}
.brand-mark span{font-size:15px}
.map-title{margin:0;text-align:center;font-size:clamp(28px,4vw,44px);line-height:1;font-weight:1000;letter-spacing:.04em}
.letter-theme .map-title{background:linear-gradient(100deg,#4d8dff,#28cfca,#8b73ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.phonics-theme .map-title{background:linear-gradient(100deg,#ff9a55,#ffc84d,#ff719c);-webkit-background-clip:text;background-clip:text;color:transparent}
.park-return{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:0 21px;
  border:3px solid rgba(255,255,255,.95);
  border-radius:999px;
  background:linear-gradient(135deg,#48cf86,#27ad70);
  color:#fff;
  box-shadow:0 10px 24px rgba(38,157,100,.28);
  text-decoration:none;
  font-size:17px;
  font-weight:1000;
  transition:transform .18s ease,box-shadow .18s ease;
}
.park-return:hover,.park-return:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px rgba(38,157,100,.36);outline:none}
.park-return .tree{font-size:25px;line-height:1}
.map-shell{width:min(1160px,calc(100% - 28px));margin:22px auto 0}
.map-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:150px 1fr auto;
  align-items:center;
  gap:24px;
  min-height:190px;
  padding:28px 32px;
  border:5px solid rgba(255,255,255,.94);
  border-radius:34px;
  box-shadow:var(--shadow);
}
.letter-theme .map-hero{background:linear-gradient(135deg,#dbeaff 0%,#eff8ff 52%,#d9faf2 100%)}
.phonics-theme .map-hero{background:linear-gradient(135deg,#fff1d0 0%,#fff9ec 52%,#ffe1ce 100%)}
.map-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-65px;top:-90px;background:rgba(255,255,255,.38)}
.hero-icon{position:relative;z-index:2;display:grid;place-items:center;width:130px;height:130px;border-radius:38px;color:#fff;font-size:64px;font-weight:1000;box-shadow:inset 0 0 0 5px rgba(255,255,255,.65),0 14px 30px rgba(56,106,162,.15)}
.letter-theme .hero-icon{background:linear-gradient(145deg,#75b0ff,#5c74ff)}
.phonics-theme .hero-icon{background:linear-gradient(145deg,#ffc84d,#ff8e5d)}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{margin:0 0 8px;font-size:clamp(30px,4vw,48px)}
.hero-copy p{margin:0;color:var(--muted);font-size:18px;line-height:1.8}
.hero-note{position:relative;z-index:2;align-self:center;max-width:250px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.78);color:#53708f;font-size:14px;font-weight:800;line-height:1.65}
.feature-entry{
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:18px;
  margin-top:22px;
  min-height:128px;
  padding:18px 24px;
  border:4px solid rgba(255,255,255,.94);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.feature-entry:hover,.feature-entry:focus-visible{transform:translateY(-5px);box-shadow:0 22px 48px rgba(50,98,154,.22);outline:none}
.feature-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:25px;background:linear-gradient(145deg,#64a6ff,#6d72ff);color:#fff;font-size:35px;font-weight:1000}
.phonics-theme .feature-icon{background:linear-gradient(145deg,#ffc24c,#ff8e5a)}
.feature-copy strong{display:block;font-size:24px;margin-bottom:5px}
.feature-copy span{display:block;color:var(--muted);font-size:15px;line-height:1.6}
.feature-go{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#edf5ff;color:#3e72b0;font-size:25px;font-weight:1000}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:28px 4px 14px}
.section-heading h2{margin:0;font-size:clamp(24px,3vw,34px)}
.section-heading p{margin:0;color:var(--muted);font-size:15px}
.station-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.letter-theme .station-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.station-card{
  position:relative;
  overflow:hidden;
  min-height:300px;
  padding:22px;
  border:4px solid rgba(255,255,255,.94);
  border-radius:28px;
  background:rgba(255,255,255,.91);
  box-shadow:var(--shadow);
}
.station-card::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-35px;top:-38px;background:var(--bubble,rgba(95,157,255,.14));pointer-events:none}
.station-head{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.station-icon{display:grid;place-items:center;flex:0 0 auto;width:64px;height:64px;border-radius:21px;background:var(--accent,#5b97ff);color:#fff;font-size:32px;box-shadow:0 10px 22px rgba(65,110,164,.16)}
.station-title h3{margin:0 0 5px;font-size:23px}
.station-title p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.station-count{display:inline-flex;margin-top:8px;padding:5px 10px;border-radius:999px;background:#eff6ff;color:#4e6d90;font-size:12px;font-weight:900}
.task-list{position:relative;z-index:2;display:grid;gap:10px;margin-top:16px}
.task-link{
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:8px 12px;
  border:2px solid #e7eef8;
  border-radius:17px;
  background:#fff;
  text-decoration:none;
  color:#244b76;
  font-size:15px;
  font-weight:900;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.task-link:hover,.task-link:focus-visible{transform:translateX(4px);border-color:var(--accent,#5b97ff);box-shadow:0 8px 18px rgba(54,103,162,.11);outline:none}
.task-no{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:color-mix(in srgb,var(--accent,#5b97ff) 14%,white);color:var(--accent,#5b97ff);font-size:13px;font-weight:1000}
.task-arrow{font-size:19px;color:var(--accent,#5b97ff)}
.station-blue{--accent:#5794ff;--bubble:rgba(87,148,255,.14)}
.station-purple{--accent:#946fff;--bubble:rgba(148,111,255,.14)}
.station-green{--accent:#42c487;--bubble:rgba(66,196,135,.14)}
.station-orange{--accent:#ff9b55;--bubble:rgba(255,155,85,.15)}
.station-yellow{--accent:#e7aa27;--bubble:rgba(255,200,75,.18)}
.station-pink{--accent:#ff739e;--bubble:rgba(255,115,158,.14)}
.map-footer-note{margin:22px auto 0;padding:13px 18px;border-radius:18px;background:rgba(255,255,255,.82);color:#5b7693;text-align:center;font-size:14px;font-weight:800;box-shadow:0 8px 20px rgba(50,98,154,.08)}
.global-nav{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:80;display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));width:min(760px,calc(100% - 24px));min-height:76px;padding:8px;border:2px solid rgba(255,255,255,.9);border-radius:26px;background:rgba(255,255,255,.93);box-shadow:0 18px 50px rgba(31,75,124,.22);backdrop-filter:blur(18px) saturate(1.25);transform:translateX(-50%)}
.global-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;border-radius:19px;text-decoration:none;color:#647b98;font-size:13px;font-weight:900}
.global-nav a.is-active{color:#fff;background:linear-gradient(135deg,#4f8cff,#776fff);box-shadow:0 8px 18px rgba(79,140,255,.28)}
.nav-icon{font-size:23px;line-height:1}
@media(max-width:900px){
  .map-topbar{grid-template-columns:auto 1fr auto;padding-inline:12px}.brand-mark span{display:none}.brand-mark img{width:46px;height:46px}.park-return{min-height:50px;padding:0 15px;font-size:15px}
  .map-shell{width:min(100% - 20px,820px);margin-top:14px}.map-hero{grid-template-columns:110px 1fr;padding:22px}.hero-icon{width:96px;height:96px;border-radius:30px;font-size:47px}.hero-note{grid-column:1/-1;max-width:none}.station-grid,.letter-theme .station-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  body{padding-bottom:102px}.map-topbar{grid-template-columns:46px 1fr 112px;gap:6px}.brand-mark{width:44px}.map-title{font-size:clamp(23px,7vw,32px)}.park-return{min-height:46px;padding:0 10px;font-size:13px;gap:5px}.park-return .tree{font-size:20px}
  .map-hero{grid-template-columns:76px 1fr;gap:14px;padding:17px;border-radius:25px}.hero-icon{width:68px;height:68px;border-radius:22px;font-size:34px}.hero-copy h1{font-size:28px}.hero-copy p{font-size:15px}.hero-note{font-size:13px}
  .feature-entry{grid-template-columns:65px 1fr 42px;gap:10px;padding:14px;border-radius:22px}.feature-icon{width:58px;height:58px;border-radius:19px;font-size:27px}.feature-copy strong{font-size:20px}.feature-copy span{font-size:13px}.feature-go{width:40px;height:40px;font-size:20px}
  .section-heading{display:block}.section-heading p{margin-top:6px}.station-grid,.letter-theme .station-grid{grid-template-columns:1fr}.station-card{min-height:0;padding:17px;border-radius:23px}.station-icon{width:54px;height:54px;border-radius:18px;font-size:27px}.station-title h3{font-size:21px}
  .global-nav{grid-template-columns:repeat(5,1fr);min-height:68px;padding:6px;border-radius:22px}.global-nav a{min-width:0;min-height:54px;border-radius:16px;font-size:11px}.nav-icon{font-size:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* V3r1 map readability refinement: larger core labels, cleaner child-facing cards. */
.map-title{
  font-size:clamp(34px,4.8vw,56px);
  letter-spacing:.055em;
}
.map-hero{
  grid-template-columns:150px minmax(0,1fr);
}
.hero-copy h1{
  margin:0;
  font-size:clamp(38px,5vw,58px);
  line-height:1.14;
  letter-spacing:.01em;
}
.feature-copy strong{
  font-size:clamp(27px,3vw,34px);
  line-height:1.25;
}
.section-heading h2{
  font-size:clamp(30px,3.6vw,42px);
  line-height:1.2;
}
.station-head{
  align-items:center;
  margin-bottom:18px;
}
.station-title h3{
  margin:0;
  font-size:clamp(25px,2.8vw,32px);
  line-height:1.2;
}
.task-link{
  grid-template-columns:42px minmax(0,1fr) auto;
  min-height:62px;
  padding:10px 14px;
  font-size:clamp(17px,1.75vw,21px);
  line-height:1.25;
}
.task-no{
  width:38px;
  height:38px;
  border-radius:13px;
  font-size:16px;
}
.task-arrow{
  font-size:23px;
}
.feature-icon{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.phonics-theme .station-card{
  min-height:0;
}
.phonics-theme .station-head{
  margin-bottom:18px;
}
.phonics-theme .map-shell{
  padding-bottom:18px;
}
@media(max-width:900px){
  .map-hero{grid-template-columns:110px minmax(0,1fr)}
  .hero-copy h1{font-size:clamp(34px,5vw,48px)}
  .station-title h3{font-size:clamp(24px,3vw,29px)}
  .task-link{font-size:clamp(17px,2vw,20px)}
}
@media(max-width:650px){
  .map-title{font-size:clamp(28px,8vw,38px)}
  .map-hero{grid-template-columns:76px minmax(0,1fr)}
  .hero-copy h1{font-size:clamp(28px,7vw,38px)}
  .feature-copy strong{font-size:clamp(23px,6vw,29px)}
  .section-heading h2{font-size:clamp(27px,7vw,34px)}
  .station-title h3{font-size:clamp(23px,6vw,28px)}
  .task-link{font-size:clamp(17px,4.7vw,20px)}
}