:root {
  --ink: #17211d;
  --muted: #68736d;
  --paper: #f5f1e8;
  --paper-deep: #ece6da;
  --card: rgba(255, 255, 255, .76);
  --line: rgba(23, 33, 29, .11);
  --green: #174f43;
  --green-2: #287768;
  --lime: #c6e46c;
  --coral: #f47d61;
  --yellow: #f0c95f;
  --blue: #6ab6c9;
  --shadow: 0 24px 70px rgba(33, 47, 40, .12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --sidebar: 304px;
  --topbar: 76px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 10%, rgba(198, 228, 108, .30), transparent 28rem),
    radial-gradient(circle at 92% 82%, rgba(106, 182, 201, .22), transparent 30rem),
    var(--paper);
  font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(rgba(23,79,67,.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

button, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible {
  outline: 3px solid rgba(40, 119, 104, .34);
  outline-offset: 3px;
}

button { color: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 11px 16px;
  border-radius: 12px;
  color: white;
  background: var(--green);
  transition: top .2s ease;
}

.skip-link:focus { top: 12px; }

.app-shell { min-height: 100vh; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topbar);
  display: grid;
  grid-template-columns: var(--sidebar) 1fr auto;
  align-items: center;
  padding: 0 28px 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 241, 232, .82);
  backdrop-filter: blur(20px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  width: max-content;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--lime);
  background: var(--green);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 18px rgba(23,79,67,.18);
  font: 600 24px/1 Georgia, serif;
  transform: rotate(-4deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 6px;
  top: 6px;
  border-radius: 50%;
  background: var(--coral);
}

.brand-text strong { display: block; font-size: 18px; letter-spacing: .08em; }
.brand-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }

.top-context {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-left: 26px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.top-context b { color: var(--ink); font-weight: 650; }
.top-context a {
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s ease;
}
.top-context .top-context-category { color: var(--ink); font-weight: 650; flex: 0 0 auto; }
.top-context a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.top-context a:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--green);
  outline-offset: 5px;
}

.top-actions { display: flex; align-items: center; gap: 10px; }

.icon-button, .sound-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.58);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.icon-button:hover, .sound-button:hover { transform: translateY(-2px); background: white; }
.menu-button { display: none; }

.progress-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-size: 12px;
}

.progress-ring {
  --progress: 0deg;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(var(--green-2) var(--progress), var(--paper-deep) 0);
}

.progress-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: white; }

.sidebar {
  position: fixed;
  z-index: 40;
  left: 0;
  top: var(--topbar);
  bottom: 0;
  width: var(--sidebar);
  padding: 18px 18px 28px;
  border-right: 1px solid var(--line);
  background: rgba(245, 241, 232, .72);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 13px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.58);
}

.search-box svg { flex: 0 0 auto; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-box input::placeholder { color: #929b96; }

.lesson-nav { height: calc(100% - 58px); overflow: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: rgba(23,79,67,.22) transparent; }

.nav-group { margin: 5px 0 17px; }

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  transition: color .18s ease;
}

.nav-group-title:hover { color: var(--green); }
.nav-group-title small { margin-left: auto; color: var(--green-2); font-size: 9px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .18s ease; }
.nav-group-title:hover small { opacity: 1; }

.group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--group-color, var(--green-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-color, var(--green-2)) 13%, transparent); }

.nav-item {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  margin: 2px 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item:hover { background: rgba(255,255,255,.6); color: var(--ink); transform: translateX(2px); }
.nav-item.active { color: white; background: var(--green); box-shadow: 0 9px 20px rgba(23,79,67,.18); }

.nav-number { font-size: 10px; font-variant-numeric: tabular-nums; opacity: .68; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.nav-check { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; opacity: .36; }
.nav-check.done { opacity: 1; border-color: var(--lime); background: var(--lime); box-shadow: inset 0 0 0 3px var(--green); }
.nav-empty { padding: 28px 10px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.7; }

.sidebar-scrim { display: none; }

.main {
  min-height: 100vh;
  padding: calc(var(--topbar) + 30px) 34px 48px calc(var(--sidebar) + 34px);
}

.lesson-page { max-width: 1480px; margin: 0 auto; animation: page-in .42s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

.lesson-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}

.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--green-2); font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }

.lesson-title { margin: 0; max-width: 800px; font: 500 clamp(34px, 4.2vw, 64px)/1.08 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.lesson-lead { max-width: 760px; margin: 13px 0 0; color: var(--muted); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.8; }

.hero-badge { align-self: center; min-width: 150px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.45); }
.hero-badge small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.hero-badge strong { display: block; margin-top: 7px; color: var(--green); font: 500 25px/1 Georgia, serif; }

.story-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) minmax(250px, .72fr);
  align-items: center;
  gap: 20px;
  min-height: 132px;
  margin: 0 0 20px;
  padding: 10px 19px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 25px;
  background: linear-gradient(105deg, rgba(255,255,255,.78), rgba(247,252,226,.72));
  box-shadow: 0 14px 40px rgba(33,47,40,.08);
}

.story-card::after {
  content: "?";
  position: absolute;
  right: 27%;
  top: -31px;
  color: rgba(40,119,104,.055);
  font: 700 120px/1 Georgia, serif;
  transform: rotate(9deg);
}

.story-toy {
  position: relative;
  z-index: 1;
  display: block;
  width: 122px;
  height: 112px;
  background-image: url("img/math-toys-atlas.png");
  background-position: var(--sprite-x) var(--sprite-y);
  background-size: var(--sprite-size, 400% 300%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 12px rgba(23,79,67,.13));
  animation: toy-float 3.6s ease-in-out infinite;
}
.story-toy.atlas-learning { background-image: url("img/math-learning-atlas.png"); }
.story-toy.trim-right { clip-path: inset(0 7% 0 0); }

@keyframes toy-float { 50% { transform: translateY(-6px) rotate(1.5deg); } }

.story-copy { position: relative; z-index: 1; min-width: 0; }
.story-copy small, .secret-card small, .wonder-card small { color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.story-copy p { margin: 8px 0 0; color: #46544e; font-size: 14px; line-height: 1.75; }

.warmup-bubble {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: 15px 17px;
  border-radius: 18px 18px 18px 5px;
  color: #674a17;
  background: rgba(240,201,95,.3);
  box-shadow: inset 0 0 0 1px rgba(199,154,39,.11);
}
.warmup-bubble b { font-size: 11px; color: #9a6810; }
.warmup-bubble span { font-size: 12px; line-height: 1.65; }

.lesson-map {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -8px 0 16px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(23,79,67,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.38);
  scrollbar-width: none;
}
.lesson-map::-webkit-scrollbar { display: none; }
.lesson-map span { flex: 0 0 auto; padding: 0 9px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.lesson-map a { flex: 0 0 auto; padding: 8px 12px; border-radius: 11px; color: var(--green); background: rgba(40,119,104,.075); text-decoration: none; font-size: 10px; font-weight: 750; transition: transform .18s ease, background .18s ease; }
.lesson-map a:hover { transform: translateY(-1px); background: rgba(198,228,108,.52); }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 21px; }
.section-heading > div { min-width: 0; }
.section-heading small { color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.section-heading h2 { margin: 7px 0 0; color: var(--green); font: 600 clamp(25px, 2.5vw, 37px)/1.18 Georgia, "Songti SC", serif; letter-spacing: -.025em; }
.section-heading p { max-width: 720px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.section-stamp { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(40,119,104,.14); border-radius: 12px; color: var(--green-2); background: rgba(198,228,108,.26); font: 750 9px/1 Georgia, serif; letter-spacing: .13em; transform: rotate(2deg); }
.section-stamp.coral { color: #a44f3c; background: rgba(244,125,97,.15); border-color: rgba(244,125,97,.18); transform: rotate(-2deg); }

.explain-lab {
  margin: 0 0 20px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.64);
  box-shadow: 0 18px 52px rgba(33,47,40,.09);
  backdrop-filter: blur(16px);
}
.explain-tabs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; padding: 6px; border-radius: 17px; background: rgba(23,79,67,.065); }
.explain-tab { min-width: 0; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; border: 0; border-radius: 12px; color: #60706a; background: transparent; font-size: 10px; font-weight: 780; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.explain-tab span { font-size: 17px; }
.explain-tab:hover { color: var(--green); transform: translateY(-1px); }
.explain-tab.active { color: white; background: var(--green); box-shadow: 0 8px 18px rgba(23,79,67,.18); }
.explain-view { display: grid; grid-template-columns: 238px minmax(0,1fr); gap: 26px; min-height: 302px; margin-top: 13px; padding: 16px; border-radius: 23px; background: linear-gradient(135deg, #eef3dc, #f8f4ea 58%, #f7e9e2); }
.explain-visual { position: relative; min-height: 270px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; background: linear-gradient(150deg, #174f43, #0d3931); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.explain-visual::after { content: "换一种角度"; position: absolute; left: 16px; top: 15px; color: rgba(255,255,255,.48); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.explain-visual b { position: absolute; right: 14px; bottom: 13px; color: var(--lime); font: 650 10px/1 Georgia, serif; letter-spacing: .12em; }
.explain-orbit { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(198,228,108,.24); border-radius: 50%; box-shadow: 0 0 0 32px rgba(198,228,108,.03), 0 0 0 64px rgba(198,228,108,.02); animation: orbit-turn 12s linear infinite; }
.explain-orbit::after { content: ""; position: absolute; width: 10px; height: 10px; left: 17px; top: 22px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 7px rgba(244,125,97,.12); }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.explain-toy { width: 190px; height: 176px; z-index: 1; }
.explain-panels { min-width: 0; display: flex; align-items: stretch; }
.explain-panel { width: 100%; align-self: stretch; padding: 22px 24px; animation: explain-in .32s ease both; }
.explain-panel[hidden] { display: none; }
@keyframes explain-in { from { opacity: 0; transform: translateX(9px); } }
.explain-panel > small { color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.explain-panel h3 { margin: 9px 0 13px; color: var(--ink); font: 600 clamp(22px, 2.1vw, 31px)/1.25 Georgia, "Songti SC", serif; }
.explain-panel > p { margin: 0; color: #46544e; font-size: 14px; line-height: 1.9; }
.method-prompt { display: grid; gap: 5px; margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--coral); border-radius: 4px 15px 15px 4px; color: #674a17; background: rgba(240,201,95,.22); }
.method-prompt b { color: #9a6810; font-size: 10px; }
.method-prompt span { font-size: 11px; line-height: 1.65; }

.lesson-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(310px, .72fr); gap: 20px; align-items: stretch; }

.stage-card, .content-card {
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

#math-stage { scroll-margin-top: calc(var(--topbar) + 12px); }
#lesson-game { scroll-margin-top: calc(var(--topbar) + 12px); }

.stage-card { position: relative; min-height: 760px; overflow: hidden; background: linear-gradient(145deg, #184e43 0%, #103c34 67%, #0e302a 100%); color: white; }
.stage-card::before { content: ""; position: absolute; width: 380px; height: 380px; right: -150px; top: -170px; border: 1px solid rgba(198,228,108,.2); border-radius: 50%; box-shadow: 0 0 0 60px rgba(198,228,108,.025), 0 0 0 120px rgba(198,228,108,.018); pointer-events: none; }

.stage-toolbar { position: absolute; z-index: 4; inset: 20px 22px auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.stage-kicker { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(198,228,108,.11); animation: live-pulse 2s ease infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 10px rgba(198,228,108,0); } }

.stage-actions { display: flex; gap: 8px; pointer-events: auto; }
.stage-view-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(5,30,26,.38); backdrop-filter: blur(8px); }
.stage-view-switch button { height: 30px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 9px; color: rgba(255,255,255,.58); background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.stage-view-switch button.active { color: #153e36; background: var(--lime); }
.stage-button { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.stage-button:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.stage-button.active { color: #153e36; background: var(--lime); border-color: var(--lime); }
.stage-button span { font-size: 11px; font-weight: 700; }

.math-canvas { position: absolute; inset: 0 0 248px; width: 100%; height: calc(100% - 248px); touch-action: none; cursor: grab; }
.math-canvas:active { cursor: grabbing; }

.stage-hint { position: absolute; z-index: 3; top: 70px; left: 24px; display: flex; gap: 12px; color: rgba(255,255,255,.48); font-size: 10px; pointer-events: none; }
.stage-hint span { display: flex; align-items: center; gap: 5px; }

.stage-data-bar { position: absolute; z-index: 4; top: 94px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; pointer-events: none; }
.stage-data-bar span { min-width: 0; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(5,30,26,.47); backdrop-filter: blur(9px); }
.stage-data-bar b { color: var(--lime); font-size: 8px; letter-spacing: .1em; }
.stage-data-bar em { overflow: hidden; color: rgba(255,255,255,.72); font-size: 8px; font-style: normal; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }

.stage-timeline { position: absolute; z-index: 5; left: 19px; right: 19px; bottom: 205px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(220px, 2.8fr) auto; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(5,30,26,.7); backdrop-filter: blur(12px); }
.stage-timeline > label:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 700; }
.stage-timeline output { color: var(--lime); font-size: 11px; font-weight: 800; }
.speed-control { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.56); font-size: 9px; }
.speed-control select { height: 30px; padding: 0 27px 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: white; background: #16483e; font: 700 9px/1 "PingFang SC", sans-serif; }

.control-dock { position: absolute; z-index: 4; inset: auto 16px 16px; min-height: 174px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr); gap: 15px; padding: 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 23px; background: rgba(7,35,30,.62); backdrop-filter: blur(18px); }
.sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-content: center; }
.slider-row { min-width: 0; }
.slider-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: rgba(255,255,255,.64); font-size: 10px; }
.slider-label output { color: white; font-size: 12px; font-weight: 750; }
input[type="range"] { width: 100%; height: 5px; margin: 0; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--lime) var(--range, 50%), rgba(255,255,255,.13) var(--range, 50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 19px; height: 19px; border: 4px solid #153e36; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 4px solid #153e36; border-radius: 50%; background: var(--lime); }

.live-result { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; border-radius: 17px; color: var(--ink); background: var(--lime); overflow: hidden; }
.live-result small { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .62; }
.result-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; margin-top: 8px; font: 500 clamp(22px, 2.3vw, 35px)/1.02 Georgia, serif; white-space: normal; }
.result-value span { min-width: 0; overflow-wrap: anywhere; }
.result-value em { margin-left: 4px; font: 650 11px/1.2 inherit; font-family: inherit; font-style: normal; }
.result-working { margin-top: 8px; font-size: 10px; line-height: 1.4; opacity: .66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-validation { display: grid; gap: 2px; margin-top: 9px; padding: 7px 9px; border-radius: 9px; color: #24473f; background: rgba(255,255,255,.34); }
.result-validation b { font-size: 8px; letter-spacing: .09em; }
.result-validation span { font-size: 8px; line-height: 1.4; }
.result-validation.warning { color: #702d1f; background: rgba(244,125,97,.28); }

.lesson-side { display: grid; grid-template-rows: auto auto 1fr; gap: 16px; }
.content-card { padding: 25px; }
.card-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.card-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--green); background: rgba(40,119,104,.09); letter-spacing: 0; }
.formula { color: var(--green); font: 500 clamp(25px, 2.5vw, 38px)/1.32 Georgia, "Songti SC", serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.formula-card .formula { font-size: clamp(23px, 2.15vw, 34px); text-wrap: balance; }
.formula sup { font-size: .55em; }
.formula-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: start; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--green); background: rgba(198,228,108,.5); font: 700 11px/1 Georgia, serif; }
.step p { margin: 3px 0 0; color: #4e5b55; font-size: 12px; line-height: 1.65; }
.step p strong { color: var(--green); font-weight: 800; }

.audit-card { position: relative; overflow: hidden; background: rgba(255,250,239,.78); }
.audit-card::after { content: "✓"; position: absolute; right: 17px; bottom: -12px; color: rgba(244,125,97,.1); font: 700 82px/1 Georgia, serif; transform: rotate(-8deg); }
.audit-text { position: relative; z-index: 1; margin: 0; color: #615b50; font-size: 12px; line-height: 1.75; }
.audit-text b { color: #b14f3b; }

.discovery-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.secret-card, .wonder-card { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 15px; min-height: 164px; padding: 24px; overflow: hidden; border-radius: 24px; box-shadow: 0 16px 42px rgba(33,47,40,.09); }
.secret-card { color: #163c33; background: linear-gradient(135deg, #dff1a1, #c5e66a); }
.wonder-card { color: #54352e; background: linear-gradient(135deg, #ffe4d7, #ffc8b7); }
.secret-card::after, .wonder-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -35px; bottom: -45px; border: 18px solid rgba(255,255,255,.2); border-radius: 50%; }
.discovery-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 17px; background: rgba(255,255,255,.58); font-size: 25px; box-shadow: 0 9px 20px rgba(56,71,31,.08); }
.secret-card h2, .wonder-card h2 { margin: 5px 0 8px; font: 600 21px/1.3 Georgia, "Songti SC", serif; }
.secret-card p, .wonder-card p { position: relative; z-index: 1; margin: 0; font-size: 13px; line-height: 1.78; }

.example-lab {
  margin-top: 20px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.66);
  box-shadow: 0 18px 52px rgba(33,47,40,.09);
}
.example-workbench { display: grid; grid-template-columns: minmax(235px,.48fr) minmax(0,1.52fr); gap: 21px; align-items: stretch; }
.case-file { position: relative; min-width: 0; padding: 28px 24px 24px; overflow: hidden; border-radius: 22px 22px 22px 7px; color: #553a22; background: linear-gradient(145deg, #ffe0a0, #f5c85b); box-shadow: 0 15px 32px rgba(142,99,27,.15); }
.case-file::before { content: ""; position: absolute; width: 120px; height: 120px; right: -52px; bottom: -55px; border: 18px solid rgba(255,255,255,.2); border-radius: 50%; }
.case-pin { position: absolute; right: 16px; top: 15px; padding: 6px 8px; border: 1px solid rgba(100,70,20,.14); border-radius: 8px; background: rgba(255,255,255,.35); font: 750 8px/1 Georgia, serif; letter-spacing: .1em; transform: rotate(3deg); }
.case-file > small { color: #8c5d12; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.case-file h3 { margin: 13px 0 12px; font: 650 25px/1.22 Georgia, "Songti SC", serif; }
.case-file > p { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.8; }
.case-question { margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.48); font-size: 11px; line-height: 1.55; }
.case-question b { display: block; margin-top: 4px; color: #7c4711; font-size: 16px; }
.case-note { display: block; margin-top: 15px; color: rgba(85,58,34,.64); font-size: 9px; line-height: 1.55; }
.reasoning-board { min-width: 0; padding: 22px; border: 1px solid rgba(23,79,67,.09); border-radius: 22px; background: rgba(255,255,255,.78); }
.example-progress { display: grid; grid-template-columns: repeat(4,1fr) auto; align-items: center; gap: 5px; margin-bottom: 17px; }
.example-progress span { height: 5px; border-radius: 99px; background: rgba(23,79,67,.1); transition: background .25s ease, transform .25s ease; }
.example-progress span.active { background: var(--lime); }
.example-progress span.current { transform: scaleY(1.65); background: var(--coral); }
.example-progress b { margin-left: 8px; color: var(--muted); font: 650 9px/1 Georgia, serif; }
.reasoning-steps { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.reasoning-step { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; min-height: 78px; padding: 13px; overflow: hidden; border: 1px solid transparent; border-radius: 16px; transition: opacity .25s ease, border .25s ease, background .25s ease; }
.reasoning-step > span { display: grid; place-items: center; align-self: start; width: 39px; height: 39px; border-radius: 13px; color: var(--green); background: rgba(198,228,108,.47); font: 750 10px/1 Georgia, serif; }
.reasoning-step > div { min-width: 0; transition: filter .25s ease, opacity .25s ease; }
.reasoning-step small { color: var(--green-2); font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.reasoning-step h3 { margin: 4px 0 5px; color: #334039; font: 650 15px/1.35 Georgia, "Songti SC", serif; }
.reasoning-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.reasoning-step.current { border-color: rgba(244,125,97,.22); background: rgba(244,125,97,.075); }
.reasoning-step.current > span { color: white; background: var(--coral); }
.reasoning-step.locked { opacity: .36; }
.reasoning-step.locked > div { filter: blur(4px); user-select: none; }
.mini-formula { margin-top: 8px; color: var(--green); font: 600 15px/1.4 Georgia, serif; }
.example-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.example-actions button { height: 39px; padding: 0 14px; border-radius: 12px; cursor: pointer; font-size: 10px; font-weight: 800; }
.example-reset { border: 1px solid var(--line); color: var(--muted); background: white; }
.example-next { border: 0; color: white; background: var(--green); box-shadow: 0 8px 18px rgba(23,79,67,.15); }

.game-arena {
  position: relative;
  margin-top: 20px;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: white;
  background: radial-gradient(circle at 88% 8%, rgba(198,228,108,.13), transparent 25rem), linear-gradient(145deg, #174f43, #0d352e);
  box-shadow: 0 22px 60px rgba(16,54,46,.2);
}
.game-arena::before { content: ""; position: absolute; width: 300px; height: 300px; right: -150px; bottom: -190px; border: 1px solid rgba(198,228,108,.16); border-radius: 50%; box-shadow: 0 0 0 60px rgba(198,228,108,.025), 0 0 0 120px rgba(198,228,108,.015); }
.game-heading { position: relative; z-index: 1; align-items: center; }
.game-heading small { color: var(--lime); }
.game-heading h2 { color: white; }
.game-heading p { color: rgba(255,255,255,.58); }
.game-score { flex: 0 0 190px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.07); }
.game-score span { display: block; color: rgba(255,255,255,.52); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.game-score b { display: block; margin-top: 5px; color: var(--lime); font: 650 17px/1.2 Georgia, serif; }
.game-score i { display: block; height: 5px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.game-score em { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), var(--lime)); transition: width .45s cubic-bezier(.2,.7,.3,1); }
.game-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px,.82fr) minmax(390px,1.45fr) minmax(220px,.82fr); gap: 13px; align-items: stretch; }
.game-card { position: relative; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; color: var(--ink); background: rgba(255,255,255,.93); box-shadow: 0 14px 36px rgba(4,28,23,.15); transition: transform .25s ease, box-shadow .25s ease, border .25s ease; }
.game-card.passed { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(198,228,108,.18), 0 14px 36px rgba(4,28,23,.15); }
.game-card.passed::after { content: "✓ 过关"; position: absolute; right: 14px; bottom: 12px; color: var(--green-2); font-size: 9px; font-weight: 850; transform: rotate(-4deg); }
.game-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.game-number { color: var(--green-2); font: 750 8px/1 Georgia, serif; letter-spacing: .12em; }
.game-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(198,228,108,.32); font-size: 19px; }
.game-card > small { color: var(--green-2); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.game-card > h3 { margin: 5px 0 12px; color: var(--green); font: 650 19px/1.3 Georgia, "Songti SC", serif; }
.quiz-question { min-height: 62px; margin: 0 0 13px; padding: 12px 13px; border-radius: 14px; color: #594a34; background: rgba(240,201,95,.18); font-size: 12px; font-weight: 650; line-height: 1.65; }
.quiz-options { display: grid; gap: 7px; }
.quiz-options button { min-height: 41px; display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid rgba(23,79,67,.1); border-radius: 12px; color: #4a5751; background: white; text-align: left; font-size: 11px; cursor: pointer; transition: transform .18s ease, border .18s ease, background .18s ease; }
.quiz-options button:hover:not(:disabled) { transform: translateX(2px); border-color: rgba(23,79,67,.3); }
.quiz-options button span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--green); background: rgba(40,119,104,.08); font: 750 9px/1 Georgia, serif; }
.quiz-options button.correct { color: #285d38; border-color: rgba(64,145,81,.35); background: #e6f6cf; }
.quiz-options button.wrong { color: #a24638; border-color: rgba(244,125,97,.38); background: #fff0eb; }
.quiz-feedback { min-height: 38px; margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.quiz-feedback.correct { color: #337140; }
.quiz-feedback.wrong { color: #a44f3c; }
.memory-game { padding-bottom: 18px; }
.memory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--muted); font-size: 8px; }
.memory-toolbar button { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 8px; color: var(--green); background: rgba(40,119,104,.08); font-size: 8px; font-weight: 750; cursor: pointer; }
.memory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.memory-card { position: relative; min-width: 0; height: 116px; padding: 0; border: 0; border-radius: 13px; background: transparent; perspective: 700px; cursor: pointer; }
.memory-card-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .48s cubic-bezier(.2,.7,.3,1); }
.memory-card.flipped .memory-card-inner, .memory-card.matched .memory-card-inner { transform: rotateY(180deg); }
.memory-card-back, .memory-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; overflow: hidden; border: 1px solid rgba(23,79,67,.1); border-radius: 13px; backface-visibility: hidden; }
.memory-card-back { color: white; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.memory-card-back b { font: 650 26px/1 Georgia, serif; }
.memory-card-back small { color: rgba(255,255,255,.48); font-size: 7px; }
.memory-card-face { transform: rotateY(180deg); color: #3f4c46; background: #f6f3e9; text-align: center; }
.memory-card-face small { color: var(--green-2); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.memory-card-face strong { max-height: 82px; overflow: auto; font-size: 9px; line-height: 1.42; scrollbar-width: none; }
.memory-card.label .memory-card-face strong { color: var(--green); font: 650 14px/1.35 Georgia, "Songti SC", serif; }
.memory-card.matched .memory-card-face { border-color: rgba(93,159,73,.5); background: #e6f6cf; box-shadow: inset 0 0 0 2px rgba(198,228,108,.45); }
.mission-game > p { min-height: 128px; margin: 0; color: #4e5b55; font-size: 11px; line-height: 1.75; }
.mission-checklist { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.mission-checklist span { padding: 6px 7px; border-radius: 8px; color: #7b642d; background: rgba(240,201,95,.17); font-size: 8px; }
.mission-button { width: 100%; min-height: 41px; padding: 7px 10px; border: 0; border-radius: 12px; color: white; background: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.mission-button.done { color: var(--green); background: var(--lime); }
.game-celebration { position: relative; z-index: 1; display: none; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; margin-top: 13px; padding: 14px 17px; border: 1px solid rgba(198,228,108,.27); border-radius: 17px; background: rgba(198,228,108,.11); }
.game-celebration.show { display: grid; animation: celebrate-in .45s ease both; }
@keyframes celebrate-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.game-celebration > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: var(--lime); font-size: 23px; }
.game-celebration b { color: var(--lime); font: 650 17px/1.3 Georgia, serif; }
.game-celebration p { margin: 3px 0 0; color: rgba(255,255,255,.58); font-size: 10px; }

.practice-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 15px; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.58); box-shadow: 0 12px 34px rgba(33,47,40,.06); }
.challenge-head { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 18px; min-width: 0; }
.practice-copy small { display: block; color: var(--green-2); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.practice-copy p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.challenge-levels { display: flex; gap: 5px; padding: 4px; border-radius: 13px; background: rgba(23,79,67,.07); }
.challenge-levels button { height: 31px; padding: 0 9px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.challenge-levels button.active { color: white; background: var(--green); box-shadow: 0 5px 12px rgba(23,79,67,.14); }
.answer-chip { min-width: 130px; max-width: 260px; padding: 12px 15px; border-radius: 14px; color: var(--green); background: white; font: 600 12px/1.45 Georgia, "Songti SC", serif; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.answer-chip.hidden { color: transparent; text-shadow: 0 0 9px rgba(23,79,67,.65); user-select: none; }
.reveal-button, .complete-button { height: 42px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer; font-size: 11px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease; }
.reveal-button { color: white; background: var(--green); box-shadow: 0 8px 18px rgba(23,79,67,.14); }
.complete-button { color: var(--green); background: var(--lime); }
.reveal-button:hover, .complete-button:hover { transform: translateY(-2px); }
.complete-button.done { color: white; background: var(--green-2); }

/* 每课专属小游戏：替代旧的例题卡、翻牌与统一分级题。 */
.lesson-game {
  position: relative;
  margin-top: 22px;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: white;
  background: radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--game-accent) 25%, transparent), transparent 28rem), linear-gradient(145deg, var(--game-a), var(--game-b));
  box-shadow: 0 24px 68px color-mix(in srgb, var(--game-a) 25%, transparent);
}
.lesson-game::before { content: ""; position: absolute; width: 380px; height: 380px; right: -235px; bottom: -240px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.017); pointer-events: none; }
.game-intro { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 21px; }
.game-intro > div:first-child { min-width: 0; }
.game-intro small { display: block; color: var(--game-accent); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.game-intro h2 { margin: 7px 0 8px; color: white; font: 650 clamp(28px,3vw,43px)/1.12 Georgia, "Songti SC", serif; }
.game-intro p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.75; }
.game-identity { flex: 0 0 auto; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; min-width: 220px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.game-identity > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--green); background: var(--game-accent); font-size: 29px; box-shadow: 0 10px 23px rgba(0,0,0,.12); }
.game-identity b, .game-identity small { display: block; }
.game-identity b { color: white; font-size: 11px; }
.game-identity small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 8px; line-height: 1.45; letter-spacing: 0; }
.game-console { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(230px,.46fr) minmax(0,1.54fr); gap: 15px; align-items: stretch; }
.game-coach { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(5,29,24,.16); }
.game-round-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.game-round-dots { display: flex; gap: 5px; }
.game-round-dots i { display: block; width: 17px; height: 5px; border-radius: 99px; background: rgba(23,79,67,.12); transition: width .25s ease, background .25s ease; }
.game-round-dots i.active { width: 28px; background: var(--game-a); }
.game-round-dots i.done { background: var(--lime); }
.game-life-picture { position: relative; width: 100%; aspect-ratio: 16 / 10; margin: 14px 0 10px; overflow: hidden; border: 1px solid rgba(23,79,67,.08); border-radius: 21px; background: radial-gradient(circle at 75% 25%, color-mix(in srgb,var(--game-accent) 25%,white),#f5f2e8 68%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7),0 12px 24px rgba(27,66,57,.08); }
.game-scene-art { position: absolute; inset: 7px; display: block; border-radius: 16px; background-repeat: no-repeat; }
.game-scene-art--custom { inset: 0; background-size: 168% auto; background-position: 91% 52%; }
.game-scene-art--craftChild { background-size: 162% auto; background-position: 94% 48%; }
.game-scene-art--cubeChild { background-size: 165% auto; background-position: 94% 51%; }
.game-life-place { position: absolute; left: 10px; bottom: 9px; padding: 5px 9px; border-radius: 999px; color: white; background: rgba(23,60,53,.82); box-shadow: 0 4px 12px rgba(15,49,43,.14); font-size: 8px; font-weight: 850; letter-spacing: .06em; backdrop-filter: blur(7px); }
.game-life-mission { margin-bottom: 12px; padding: 10px 12px; border-left: 4px solid var(--game-accent); border-radius: 0 13px 13px 0; background: color-mix(in srgb,var(--game-accent) 13%,white); }
.game-life-mission small,.game-life-mission b { display: inline; color: var(--green-2); font-size: 8px; }
.game-life-mission b { margin-left: 6px; color: var(--green); font-size: 10px; }
.game-life-mission p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.game-character { position: relative; display: grid; place-items: center; width: 126px; height: 126px; margin: 17px auto 13px; border-radius: 38% 62% 55% 45% / 44% 40% 60% 56%; background: color-mix(in srgb, var(--game-accent) 30%, white); animation: game-character-float 3.2s ease-in-out infinite; }
.game-character span { position: relative; z-index: 1; font-size: 70px; filter: drop-shadow(0 10px 10px rgba(30,56,48,.14)); }
.game-character i { position: absolute; inset: 15px; border: 1px dashed color-mix(in srgb, var(--game-a) 30%, transparent); border-radius: 50%; animation: game-character-spin 12s linear infinite; }
@keyframes game-character-float { 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes game-character-spin { to { transform: rotate(360deg); } }
.game-coach > small { color: var(--green-2); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.game-coach > h3 { margin: 7px 0 14px; color: var(--green); font: 650 20px/1.45 Georgia, "Songti SC", serif; }
.game-live-math { margin-top: auto; padding: 12px 13px; border-radius: 15px; color: #655520; background: color-mix(in srgb, var(--game-accent) 26%, white); }
.game-live-math span { display: block; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.game-live-math b { display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; }
.game-tip { margin-top: 9px; padding: 12px 13px; border: 1px solid rgba(23,79,67,.08); border-radius: 15px; background: #f7f5ee; }
.game-tip b { color: var(--green-2); font-size: 9px; }
.game-tip p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.game-playfield { min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.68); border-radius: 25px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(5,29,24,.16); }
.lesson-game-canvas { display: block; width: 100%; height: auto; border-radius: 19px; outline: 0; background: var(--game-a); touch-action: manipulation; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(23,79,67,.06); }
.lesson-game-canvas:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--game-accent) 60%, white); }
.game-canvas-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 3px; color: var(--muted); font-size: 8px; font-weight: 700; }
.game-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(116px,1fr)); gap: 7px; margin-top: 7px; }
.game-actions button { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(23,79,67,.1); border-radius: 14px; color: var(--green); background: white; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.game-actions button:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--game-a) 45%, transparent); background: color-mix(in srgb, var(--game-accent) 10%, white); }
.game-actions button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.game-actions button:disabled { opacity: .45; cursor: default; }
.game-actions kbd { display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 9px; color: white; background: var(--game-a); box-shadow: 0 3px 0 color-mix(in srgb, var(--game-a) 70%, black); font: 800 10px/1 sans-serif; }
.game-actions span { overflow-wrap: anywhere; font-size: 9px; font-weight: 800; line-height: 1.3; }
.game-feedback { display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; gap: 10px; min-height: 67px; margin-top: 9px; padding: 10px 13px; border-radius: 16px; background: #f5f3ec; }
.game-feedback.success { background: #eaf5d2; box-shadow: inset 0 0 0 1px rgba(105,155,65,.18); }
.game-feedback-face { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: white; font-size: 23px; }
.game-feedback b { color: var(--green); font-size: 10px; }
.game-feedback p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.game-footer-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.game-footer-actions button { min-height: 39px; padding: 7px 13px; border: 0; border-radius: 12px; font-size: 9px; font-weight: 800; cursor: pointer; }
#game-reset { color: var(--muted); background: rgba(23,79,67,.07); }
#game-next { margin-left: auto; color: white; background: var(--game-a); box-shadow: 0 8px 18px color-mix(in srgb, var(--game-a) 22%, transparent); }
.game-finished { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; margin-top: 10px; padding: 13px 15px; border-radius: 17px; color: white; background: linear-gradient(120deg, var(--game-a), var(--game-b)); animation: celebrate-in .4s ease both; }
.game-finished[hidden] { display: none; }
.game-finished > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--game-accent); font-size: 28px; }
.game-finished b { color: var(--game-accent); font: 650 17px/1.3 Georgia, "Songti SC", serif; }
.game-finished p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.5; }
.game-complete-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.07); }
.game-complete-row small { color: var(--game-accent); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.game-complete-row p { margin: 4px 0 0; color: rgba(255,255,255,.58); font-size: 9px; }
.game-light-button { flex: 0 0 auto; min-width: 185px; background: var(--game-accent); }
.game-light-button.done { color: white; background: var(--game-b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.game-light-button:disabled { color: rgba(23,79,67,.68); background: color-mix(in srgb, var(--game-accent) 62%, white); cursor: default; box-shadow: none; }
.round-won .lesson-game-canvas { box-shadow: 0 0 0 4px color-mix(in srgb, var(--game-accent) 48%, transparent); }

.lesson-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 28px; }
.lesson-pager { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.44); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.lesson-pager:hover { background: white; transform: translateY(-2px); }
.lesson-pager.next { justify-content: flex-end; text-align: right; }
.lesson-pager:disabled { visibility: hidden; }
.pager-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: white; background: var(--green); }
.pager-copy { min-width: 0; }
.pager-copy small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.pager-copy strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.page-count { color: var(--muted); font: 500 12px/1 Georgia, serif; white-space: nowrap; }

.standalone .topbar { grid-template-columns: 1fr auto; }
.standalone .top-context { display: none; }
.standalone .sidebar { display: none; }
.standalone .main { padding-left: 34px; }
.standalone .progress-pill { display: none; }
.standalone .back-library { display: inline-flex; }
.back-library { display: none; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.58); text-decoration: none; font-size: 11px; font-weight: 700; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 12px 17px; border-radius: 14px; color: white; background: rgba(19,57,49,.94); box-shadow: 0 14px 36px rgba(19,57,49,.2); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.confetti-piece { position: fixed; z-index: 120; left: var(--x); top: -18px; width: 10px; height: 16px; border-radius: 3px; pointer-events: none; animation: confetti-fall 1.55s cubic-bezier(.2,.7,.3,1) var(--delay) forwards; }
@keyframes confetti-fall { to { transform: translate3d(0, 105vh, 0) rotate(var(--spin)); opacity: .2; } }

@media (max-width: 1180px) {
  :root { --sidebar: 270px; }
  .lesson-grid { grid-template-columns: minmax(0, 1.35fr) minmax(290px, .75fr); }
  .stage-card { min-height: 780px; }
  .stage-view-switch button { min-width: 34px; padding-inline: 6px; }
}

@media (max-width: 980px) {
  .menu-button { display: grid; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 18px; }
  .top-context { display: none; }
  .sidebar { width: min(330px, 88vw); transform: translateX(-105%); box-shadow: 24px 0 70px rgba(23,33,29,.18); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 35; inset: var(--topbar) 0 0 min(330px, 88vw); display: block; border: 0; background: rgba(16,32,27,.34); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
  .sidebar-scrim.open { opacity: 1; visibility: visible; }
  .main, .standalone .main { padding: calc(var(--topbar) + 25px) 22px 42px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .story-card { grid-template-columns: 110px minmax(0,1fr); }
  .warmup-bubble { grid-column: 1 / -1; margin: -4px 5px 7px 14px; }
  .explain-view { grid-template-columns: 190px minmax(0,1fr); }
  .explain-toy { width: 160px; height: 150px; }
  .example-workbench { grid-template-columns: 1fr; }
  .case-file { min-height: 225px; }
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memory-game { grid-column: 1 / -1; grid-row: 2; }
  .mission-game > p { min-height: 72px; }
  .game-console { grid-template-columns: 1fr; }
  .game-coach { display: grid; grid-template-columns: 145px minmax(0,1fr); column-gap: 18px; align-items: start; }
  .game-round-label { grid-column: 1 / -1; }
  .game-character { grid-column: 1; grid-row: 2 / span 4; width: 125px; height: 125px; }
  .game-coach > small, .game-coach > h3, .game-live-math, .game-tip, .game-life-mission { grid-column: 2; }
  .game-life-picture { grid-column: 1; grid-row: 2 / span 5; width: 145px; margin-top: 12px; }
  .game-coach > h3 { margin-bottom: 9px; }
  .game-live-math { margin-top: 0; }
  .lesson-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .audit-card { grid-column: 1 / -1; }
  .stage-card { min-height: 780px; }
}

@media (max-width: 680px) {
  :root { --topbar: 66px; --radius-xl: 25px; }
  .topbar { padding: 0 13px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
  .brand-text strong { font-size: 16px; }
  .brand-text small { display: none; }
  .progress-pill { display: none; }
  .top-actions { gap: 7px; }
  .icon-button, .sound-button { width: 38px; height: 38px; border-radius: 13px; }
  .main, .standalone .main { padding: calc(var(--topbar) + 20px) 13px 32px; }
  .lesson-hero { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .lesson-hero > * { min-width: 0; }
  .lesson-title { font-size: clamp(34px, 11vw, 50px); }
  .lesson-lead { font-size: 14px; line-height: 1.7; }
  .hero-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: fit-content; max-width: 100%; min-width: 0; padding: 10px 14px; }
  .hero-badge strong { min-width: 0; margin: 0; font-size: 20px; overflow-wrap: anywhere; }
  .lesson-map { margin-top: -3px; padding: 5px; }
  .lesson-map span { display: none; }
  .lesson-map a { padding: 8px 10px; }
  .section-heading { display: grid; gap: 10px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 25px; }
  .section-stamp { width: max-content; }
  .stage-card { min-height: 940px; }
  .story-card { grid-template-columns: 82px minmax(0,1fr); gap: 10px; min-height: 0; padding: 10px 12px 12px 5px; border-radius: 21px; }
  .story-toy { width: 84px; height: 82px; }
  .story-copy p { font-size: 12px; line-height: 1.65; }
  .warmup-bubble { margin: 0 3px 2px 8px; padding: 13px 14px; }
  .explain-lab { padding: 14px; border-radius: 23px; }
  .explain-tabs { display: flex; overflow-x: auto; padding: 5px; scrollbar-width: none; }
  .explain-tabs::-webkit-scrollbar { display: none; }
  .explain-tab { flex: 0 0 auto; height: 42px; padding: 0 11px; }
  .explain-tab span { font-size: 15px; }
  .explain-view { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 9px; }
  .explain-visual { min-height: 155px; }
  .explain-orbit { width: 130px; height: 130px; }
  .explain-toy { width: 135px; height: 126px; }
  .explain-panel { padding: 16px 13px 13px; }
  .explain-panel h3 { font-size: 22px; }
  .explain-panel > p { font-size: 12px; line-height: 1.8; }
  .method-prompt { margin-top: 15px; }
  .math-canvas { inset-bottom: 470px; height: calc(100% - 470px); }
  .stage-toolbar { inset: 15px 14px auto; }
  .stage-kicker { max-width: 94px; font-size: 8px; line-height: 1.45; }
  .stage-actions { gap: 5px; }
  .stage-view-switch { padding: 2px; }
  .stage-view-switch button { min-width: 27px; height: 28px; padding: 0 4px; font-size: 8px; }
  .stage-button { width: 38px; padding: 0; justify-content: center; }
  .stage-button span { display: none; }
  .stage-hint { top: 61px; left: 16px; }
  .stage-hint span:nth-child(2) { display: none; }
  .stage-data-bar { top: 94px; left: 10px; right: 10px; gap: 4px; }
  .stage-data-bar span { padding: 6px; }
  .stage-data-bar em { font-size: 7px; }
  .stage-timeline { left: 10px; right: 10px; bottom: 410px; grid-template-columns: 1fr auto; gap: 7px; padding: 8px 10px; }
  .stage-timeline > input { grid-column: 1 / -1; grid-row: 2; }
  .speed-control { grid-column: 2; grid-row: 1; }
  .speed-control > span { display: none; }
  .control-dock { inset: auto 9px 9px; min-height: 330px; grid-template-columns: 1fr; padding: 14px; border-radius: 20px; }
  .sliders { grid-template-columns: 1fr; gap: 11px; }
  .live-result { min-height: 86px; }
  .result-value { font-size: 28px; }
  .lesson-side { grid-template-columns: 1fr; }
  .audit-card { grid-column: auto; }
  .content-card { padding: 21px; }
  .discovery-row { grid-template-columns: 1fr; gap: 12px; }
  .secret-card, .wonder-card { min-height: 0; grid-template-columns: 43px 1fr; padding: 19px; border-radius: 21px; }
  .discovery-icon { width: 42px; height: 42px; border-radius: 14px; font-size: 21px; }
  .secret-card h2, .wonder-card h2 { font-size: 18px; }
  .example-lab { padding: 14px; border-radius: 23px; }
  .case-file { min-height: 0; padding: 24px 19px 19px; }
  .case-file h3 { font-size: 22px; }
  .reasoning-board { padding: 13px; }
  .reasoning-step { grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding: 10px 8px; }
  .reasoning-step > span { width: 32px; height: 32px; border-radius: 10px; }
  .reasoning-step h3 { font-size: 13px; }
  .example-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .game-arena { padding: 14px; border-radius: 23px; }
  .game-heading { align-items: stretch; }
  .game-score { width: 100%; flex-basis: auto; }
  .game-grid { grid-template-columns: 1fr; }
  .memory-game { grid-column: auto; grid-row: auto; }
  .game-card { padding: 17px; }
  .memory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memory-card { height: 126px; }
  .mission-game > p { min-height: 0; }
  .lesson-game { padding: 14px; border-radius: 23px; }
  .game-intro { display: grid; gap: 13px; }
  .game-intro h2 { font-size: 30px; }
  .game-intro p { font-size: 11px; }
  .game-identity { width: 100%; min-width: 0; grid-template-columns: 44px 1fr; padding: 9px 11px; }
  .game-identity > span { width: 44px; height: 44px; border-radius: 14px; font-size: 25px; }
  .game-console { gap: 9px; }
  .game-coach { display: block; padding: 16px; border-radius: 20px; }
  .game-character { width: 96px; height: 96px; margin: 13px auto 10px; }
  .game-character span { font-size: 52px; }
  .game-coach > h3 { font-size: 17px; }
  .game-tip { margin-top: 8px; }
  .game-playfield { padding: 7px; border-radius: 20px; }
  .lesson-game-canvas { border-radius: 15px; }
  .game-canvas-hint { font-size: 7px; }
  .game-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .game-actions button { min-height: 48px; padding: 6px 8px; }
  .game-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .game-feedback { grid-template-columns: 38px minmax(0,1fr); padding: 9px; }
  .game-feedback-face { width: 37px; height: 37px; }
  .game-complete-row { display: grid; gap: 10px; padding: 13px; }
  .game-light-button { width: 100%; min-width: 0; }
  .practice-strip { grid-template-columns: 1fr 1fr; }
  .challenge-head { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 10px; }
  .challenge-levels { width: 100%; }
  .challenge-levels button { flex: 1; padding: 0 5px; }
  .answer-chip { min-width: 0; }
  .complete-button { grid-column: 1 / -1; }
  .lesson-footer { grid-template-columns: 1fr 1fr; }
  .page-count { display: none; }
  .lesson-pager { padding: 9px; }
  .pager-icon { width: 31px; height: 31px; }
  .pager-copy small { display: none; }
  .standalone .back-library span { display: none; }
}

/* 2026-07 跨平台可读性优化：正文不再依赖 7—10 px 微型字号。 */
body { font-size: 16px; }
.brand { min-height: 44px; }
.brand-text strong { font-size: 20px; }
.brand-text small { font-size: 12px; }
.top-context { font-size: 14px; }
.progress-pill { font-size: 13px; }
.icon-button, .sound-button { width: 44px; height: 44px; }
.search-box { min-height: 46px; }
.search-box input { font-size: 14px; }
.nav-group-title { font-size: 13px; }
.nav-item { min-height: 48px; }
.nav-number { font-size: 12px; }
.nav-label { font-size: 14px; }

.eyebrow { font-size: 13px; }
.hero-badge small { font-size: 12px; }
.story-copy small, .secret-card small, .wonder-card small { font-size: 12px; }
.story-copy p { font-size: 16px; line-height: 1.75; }
.warmup-bubble b { font-size: 13px; }
.warmup-bubble span { font-size: 15px; line-height: 1.7; }
.lesson-map span { font-size: 12px; }
.lesson-map a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
.section-heading small { font-size: 12px; }
.section-heading p { font-size: 15px; line-height: 1.75; }
.section-stamp { font-size: 12px; }

.explain-tab { min-height: 48px; font-size: 14px; }
.explain-visual::after { font-size: 11px; color: rgba(255,255,255,.72); }
.explain-visual b { font-size: 12px; }
.explain-panel > small { font-size: 12px; }
.explain-panel > p { font-size: 16px; line-height: 1.85; }
.method-prompt b { font-size: 13px; }
.method-prompt span { font-size: 14px; line-height: 1.7; }

.stage-card { min-height: 820px; }
.stage-kicker { font-size: 12px; color: rgba(255,255,255,.82); }
.stage-view-switch button { min-width: 44px; height: 44px; font-size: 13px; }
.stage-button { min-height: 44px; }
.stage-button span { font-size: 13px; }
.stage-hint { font-size: 12px; color: rgba(255,255,255,.7); }
.stage-data-bar b { font-size: 12px; }
.stage-data-bar em { font-size: 12px; color: rgba(255,255,255,.84); }
.stage-timeline { bottom: 282px; }
.stage-timeline > label:first-child { font-size: 12px; }
.stage-timeline output { font-size: 13px; }
.speed-control { font-size: 12px; }
.speed-control select { min-height: 44px; font-size: 13px; }
.math-canvas { inset-bottom: 286px; height: calc(100% - 286px); }
.control-dock { min-height: 210px; }
.slider-label { font-size: 13px; }
.slider-label output { font-size: 14px; }
input[type="range"] { height: 44px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--lime) var(--range, 50%), rgba(255,255,255,.18) var(--range, 50%)); }
input[type="range"]::-webkit-slider-thumb { width: 23px; height: 23px; margin-top: -8.5px; }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lime); }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; }
.live-result small { font-size: 12px; }
.result-value em { font-size: 13px; }
.result-working { font-size: 13px; line-height: 1.5; }
.result-validation b { font-size: 12px; }
.result-validation span { font-size: 12px; line-height: 1.5; }

.card-label { font-size: 12px; }
.formula-note { font-size: 14px; line-height: 1.75; }
.step-number { font-size: 12px; }
.step p { font-size: 14px; line-height: 1.72; }
.audit-text { font-size: 14px; line-height: 1.8; }
.secret-card p, .wonder-card p { font-size: 15px; line-height: 1.8; }

.game-intro small { font-size: 12px; }
.game-intro p { font-size: 15px; line-height: 1.75; }
.game-identity b { font-size: 14px; }
.game-identity small { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.76); }
.game-round-label { font-size: 12px; }
.game-life-place { font-size: 12px; }
.game-life-mission small, .game-life-mission b { font-size: 12px; }
.game-life-mission b { font-size: 14px; }
.game-life-mission p { font-size: 13px; line-height: 1.65; }
.game-coach > small { font-size: 12px; }
.game-coach > h3 { font-size: 22px; }
.game-live-math span { font-size: 12px; }
.game-live-math b { font-size: 15px; line-height: 1.6; }
.game-tip b { font-size: 13px; }
.game-tip p { font-size: 13px; line-height: 1.7; }
.game-canvas-viewport { width: 100%; overflow: hidden; border-radius: 19px; }
.game-canvas-hint { flex-wrap: wrap; font-size: 12px; line-height: 1.5; }
.game-actions button { min-height: 52px; }
.game-actions kbd { font-size: 12px; }
.game-actions span { font-size: 13px; line-height: 1.4; }
.game-feedback b { font-size: 14px; }
.game-feedback p { font-size: 13px; line-height: 1.65; }
.game-footer-actions button { min-height: 44px; font-size: 13px; }
.game-finished p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); }
.game-complete-row small { font-size: 12px; }
.game-complete-row p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.76); }
.reveal-button, .complete-button { min-height: 46px; font-size: 13px; }

.pager-copy small { font-size: 12px; }
.pager-copy strong { font-size: 14px; }
.page-count { font-size: 13px; }
.back-library { min-height: 44px; font-size: 14px; }
.toast { font-size: 14px; }
.stage-data-bar span { align-content: start; }
.stage-data-bar em { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.5; overflow-wrap: anywhere; }
.result-working { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pager-copy strong { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.standalone .menu-button { display: none; }
.topbar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
.sidebar { padding-left: max(18px, env(safe-area-inset-left)); }
.main { padding-right: max(34px, env(safe-area-inset-right)); }
.standalone .main { padding-left: max(34px, env(safe-area-inset-left)); }
.toast { bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }

.lesson-page { container-name: lesson-page; container-type: inline-size; }

@container lesson-page (max-width: 1100px) {
  .game-console { grid-template-columns: 1fr; }
  .game-coach { display: grid; grid-template-columns: 170px minmax(0,1fr); column-gap: 20px; align-items: start; }
  .game-round-label { grid-column: 1 / -1; }
  .game-life-picture { grid-column: 1; grid-row: 2 / span 5; width: 170px; margin-top: 12px; }
  .game-coach > small, .game-coach > h3, .game-live-math, .game-tip, .game-life-mission { grid-column: 2; }
  .game-coach > h3 { margin-bottom: 9px; }
  .game-live-math { margin-top: 0; }
  .game-canvas-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--game-a) 45%,transparent) transparent; }
  .lesson-game-canvas { width: max(100%, 760px); min-width: 760px; max-width: none; touch-action: pan-x pan-y pinch-zoom; }
}

@container lesson-page (max-width: 960px) {
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson-side { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: auto; }
}

/* 旧式浏览器的视口回退，同时消除 981—1280 px 的双栏断崖。 */
@media (max-width: 1280px) {
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson-side { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: auto; }
  .game-console { grid-template-columns: 1fr; }
  .game-coach { display: grid; grid-template-columns: 170px minmax(0,1fr); column-gap: 20px; align-items: start; }
  .game-round-label { grid-column: 1 / -1; }
  .game-life-picture { grid-column: 1; grid-row: 2 / span 5; width: 170px; margin-top: 12px; }
  .game-coach > small, .game-coach > h3, .game-live-math, .game-tip, .game-life-mission { grid-column: 2; }
  .game-coach > h3 { margin-bottom: 9px; }
  .game-live-math { margin-top: 0; }
  .game-canvas-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--game-a) 45%,transparent) transparent; }
  .lesson-game-canvas { width: max(100%, 760px); min-width: 760px; max-width: none; touch-action: pan-x pan-y pinch-zoom; }
}

@media (max-width: 980px) {
  .topbar { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .main, .standalone .main { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .stage-view-switch button { min-width: 44px; min-height: 42px; }
  .stage-button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .stage-button span { display: none; }
  .game-canvas-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--game-a) 45%,transparent) transparent; }
  .lesson-game-canvas { width: max(100%, 760px); min-width: 760px; max-width: none; touch-action: pan-x pan-y pinch-zoom; }
  .game-canvas-hint::before { content: "小屏提示：可左右滑动画布查看细节"; flex: 1 0 100%; color: var(--green-2); }
}

@media (max-width: 680px) {
  .topbar { padding-left: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); }
  .main, .standalone .main { padding-left: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .brand-text strong { font-size: 18px; }
  .lesson-lead { font-size: 16px; }
  .story-copy p, .explain-panel > p { font-size: 15px; }
  .section-heading p { font-size: 14px; }
  .lesson-map a { min-height: 44px; }
  .stage-card { min-height: 1220px; }
  .stage-toolbar { display: grid; grid-template-columns: 1fr; gap: 9px; align-items: start; }
  .stage-kicker { max-width: none; font-size: 12px; }
  .stage-actions { width: 100%; justify-content: space-between; }
  .stage-view-switch button { min-width: 44px; min-height: 44px; padding: 0 5px; font-size: 13px; }
  .stage-hint { top: 116px; }
  .stage-data-bar { top: 150px; }
  .stage-timeline { bottom: 610px; }
  .math-canvas { inset-bottom: 650px; height: calc(100% - 650px); }
  .control-dock { min-height: 520px; }
  .result-value { font-size: 30px; }
  .game-intro p { font-size: 14px; }
  .game-coach { display: block; }
  .game-life-picture { width: 100%; margin: 14px 0 10px; }
  .game-coach > h3 { font-size: 20px; }
  .game-life-mission p, .game-tip p, .game-feedback p, .game-complete-row p { font-size: 14px; }
  .game-live-math b { font-size: 16px; }
  .game-actions span { font-size: 14px; }
  .game-footer-actions button { min-height: 48px; }
  .lesson-pager { min-height: 54px; }
}

@media (max-width: 360px) {
  .stage-toolbar { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .stage-kicker { max-width: none; }
  .stage-actions { width: 100%; justify-content: space-between; }
  .stage-hint { top: 116px; }
  .stage-data-bar { top: 150px; }
}

@media (min-width: 1600px) {
  .lesson-page { max-width: 1560px; }
  .lesson-lead { font-size: 18px; }
  .story-copy p, .explain-panel > p { font-size: 17px; }
  .game-intro p { font-size: 16px; }
}

/* 第一课专属：把通用 3D 展示收束成“小兔胡萝卜围栏”儿童学习路径。 */
.perimeter-lesson {
  --perimeter-green: #1f6a55;
  --perimeter-deep: #123f36;
  --perimeter-leaf: #dff39c;
  --perimeter-orange: #ef8b3e;
  --perimeter-blue: #4c9fc3;
  --perimeter-cream: #fffaf0;
  color: #173b34;
}

.perimeter-hero { 
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px,.95fr) minmax(0,1.05fr);
  align-items: center;
  gap: 28px;
  min-height: 520px;
  padding: 32px;
  overflow: hidden;
  border-radius: 36px;
  color: white;
  background: radial-gradient(circle at 8% 4%, rgba(223,243,156,.22), transparent 18rem), linear-gradient(145deg,#123f36,#26735a);
  box-shadow: 0 26px 70px rgba(21,70,58,.2);
}
.perimeter-hero::before { content: ""; position: absolute; width: 340px; height: 340px; left: -210px; bottom: -250px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.028),0 0 0 120px rgba(255,255,255,.02); }
.perimeter-hero-copy { position: relative; z-index: 1; min-width: 0; padding: 8px 0 8px 8px; }
.perimeter-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #e8f8b3; font-size: 13px; font-weight: 850; letter-spacing: .08em; }
.perimeter-kicker span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: rgba(255,255,255,.12); font-size: 22px; }
.perimeter-hero h1 { margin: 0; font-family: Georgia,"Songti SC",serif; font-weight: 700; line-height: 1.03; letter-spacing: -.035em; }
.perimeter-hero h1 span { display: block; color: white; font-size: clamp(40px,4vw,58px); white-space: nowrap; }
.perimeter-hero h1 em { display: block; margin-top: 12px; color: #dff39c; font-size: clamp(25px,2.5vw,38px); font-style: normal; letter-spacing: -.02em; }
.perimeter-hero-copy > p { max-width: 590px; margin: 21px 0 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.85; }
.perimeter-hero-copy > p strong { color: #fff0a5; }
.perimeter-goals { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.perimeter-goals span { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 11px 7px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; }
.perimeter-goals b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--perimeter-deep); background: var(--perimeter-leaf); }
.perimeter-start-button { display: inline-flex; align-items: center; gap: 18px; min-height: 50px; margin-top: 23px; padding: 0 8px 0 19px; border: 0; border-radius: 16px; color: var(--perimeter-deep); background: #f2cd58; box-shadow: 0 12px 25px rgba(6,38,31,.2); font-size: 15px; font-weight: 850; cursor: pointer; }
.perimeter-start-button span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.55); }
.perimeter-hero-art { position: relative; z-index: 1; min-width: 0; margin: 0; padding: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: rgba(255,255,255,.1); transform: rotate(1deg); }
.perimeter-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 21px; }
.perimeter-hero-art figcaption { position: absolute; left: 26px; right: 26px; bottom: 25px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; color: white; background: rgba(18,63,54,.82); box-shadow: 0 8px 22px rgba(8,38,32,.18); backdrop-filter: blur(10px); }
.perimeter-hero-art figcaption span { flex: 0 0 auto; color: #e6f8a9; font-size: 12px; font-weight: 850; }
.perimeter-hero-art figcaption b { font-size: 13px; text-align: right; }

.perimeter-route-nav { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px; overflow-x: auto; border: 1px solid rgba(23,79,67,.08); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 10px 30px rgba(31,66,56,.06); scrollbar-width: none; }
.perimeter-route-nav::-webkit-scrollbar { display: none; }
.perimeter-route-nav > span { flex: 0 0 auto; padding: 0 12px; color: var(--perimeter-green); font-size: 13px; font-weight: 850; }
.perimeter-route-nav button { flex: 1 0 auto; min-height: 44px; padding: 0 13px; border: 0; border-radius: 12px; color: #4e6d65; background: rgba(31,106,85,.07); font-size: 13px; font-weight: 750; cursor: pointer; }
.perimeter-route-nav button:hover { color: white; background: var(--perimeter-green); }

.perimeter-section { margin-top: 24px; padding: 30px; scroll-margin-top: 92px; border: 1px solid rgba(23,79,67,.08); border-radius: 32px; background: rgba(255,255,255,.8); box-shadow: 0 20px 55px rgba(35,56,47,.08); }
.perimeter-section-heading { max-width: 900px; margin-bottom: 23px; }
.perimeter-section-heading > span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 10px; color: var(--perimeter-green); background: #eaf4cf; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.perimeter-section-heading h2 { margin: 11px 0 7px; color: var(--perimeter-deep); font: 700 clamp(27px,3.2vw,42px)/1.18 Georgia,"Songti SC",serif; }
.perimeter-section-heading p { margin: 0; color: #62736e; font-size: 15px; line-height: 1.75; }
.perimeter-section-heading p strong { color: var(--perimeter-green); }
.length-key,.width-key { display: inline-block; width: 25px; height: 5px; margin: 0 5px 3px 7px; border-radius: 99px; background: var(--perimeter-orange); }
.width-key { background: repeating-linear-gradient(90deg,var(--perimeter-blue) 0 6px,transparent 6px 9px); }

.perimeter-discover-grid { display: grid; grid-template-columns: minmax(360px,1fr) minmax(320px,.8fr); gap: 22px; }
.boundary-demo { display: grid; align-content: center; min-height: 380px; padding: 30px; border-radius: 25px; background: linear-gradient(145deg,#edf6d3,#d7ecad); }
.boundary-garden { position: relative; display: grid; grid-template-columns: repeat(2,1fr); place-items: center; width: min(100%,510px); aspect-ratio: 1.65; margin: 0 auto; border: 13px solid #f0a04e; border-left-color: var(--perimeter-blue); border-right-color: var(--perimeter-blue); border-radius: 14px; background: #7eb85b; box-shadow: inset 0 0 0 6px rgba(255,255,255,.18),0 16px 34px rgba(49,95,56,.14); }
.boundary-garden > span { font-size: 35px; filter: drop-shadow(0 5px 3px rgba(42,70,40,.12)); }
.boundary-flag,.boundary-rabbit { position: absolute; font-style: normal; }
.boundary-flag { left: -32px; top: -22px; color: #d85f50; font-size: 34px; transform: rotate(-5deg); }
.boundary-rabbit { left: -30px; top: 50%; font-size: 43px; transform: translate(-45%,-50%); }
.boundary-demo > b { margin-top: 24px; color: var(--perimeter-deep); font-size: 15px; line-height: 1.55; text-align: center; }
.boundary-question { padding: 26px; border-radius: 25px; background: #fffaf0; }
.question-badge { color: #b56e28; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.boundary-question h3 { margin: 8px 0 17px; color: var(--perimeter-deep); font: 700 26px/1.25 Georgia,"Songti SC",serif; }
.boundary-choices { display: grid; gap: 10px; }
.boundary-choices button { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; min-height: 62px; padding: 7px 14px 7px 8px; border: 2px solid transparent; border-radius: 17px; color: var(--perimeter-deep); background: white; box-shadow: inset 0 0 0 1px rgba(23,79,67,.1); text-align: left; cursor: pointer; }
.boundary-choices button > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #f4f3eb; font-size: 25px; }
.boundary-choices button b { font-size: 14px; }
.boundary-choices button.correct { border-color: #77ad45; background: #eef8d7; }
.boundary-choices button.wrong { border-color: #e88572; background: #fff0eb; }
.boundary-feedback { min-height: 50px; margin-top: 12px; padding: 13px 14px; border-radius: 14px; color: #6d776f; background: #f1f0e9; font-size: 13px; line-height: 1.65; }
.boundary-feedback.success { color: #286843; background: #e9f5d3; }
.boundary-feedback.wrong { color: #a44e3b; background: #ffebe5; }
.boundary-question blockquote { margin: 13px 0 0; padding: 14px 16px; border-left: 5px solid var(--perimeter-orange); border-radius: 0 15px 15px 0; color: #566761; background: #fff1cf; font-size: 14px; line-height: 1.7; }
.boundary-question blockquote b { display: block; color: #a35f24; font-size: 12px; }
.boundary-question blockquote strong { color: var(--perimeter-deep); font-size: 17px; }

.perimeter-lab { background: linear-gradient(155deg,rgba(255,255,255,.92),rgba(244,249,227,.9)); }
.perimeter-lab-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: 20px; align-items: stretch; }
.perimeter-board { display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; overflow: hidden; border-radius: 25px; color: white; background: var(--perimeter-deep); box-shadow: 0 18px 38px rgba(18,63,54,.16); }
#perimeter-svg { display: block; width: 100%; height: auto; min-height: 390px; }
.perimeter-board-sky { fill: #174c40; }
.perimeter-garden { fill: #75ad50; stroke: rgba(255,255,255,.13); stroke-width: 3; }
#perimeter-carrots text { font-size: 33px; text-anchor: middle; }
.perimeter-side { fill: none; stroke-linecap: round; stroke-width: 12; vector-effect: non-scaling-stroke; }
.length-side { stroke: var(--perimeter-orange); }
.width-side { stroke: var(--perimeter-blue); stroke-dasharray: 10 8; }
.perimeter-walked-route { fill: none; stroke: #fff08b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(255,240,139,.62)); }
.perimeter-side-label { font-size: 18px; font-weight: 850; text-anchor: middle; paint-order: stroke; stroke: #174c40; stroke-width: 5px; stroke-linejoin: round; }
.length-label { fill: #ffb770; }
.width-label { fill: #8dd5ef; }
.perimeter-start-flag { fill: #ff7463; font-size: 31px; text-anchor: middle; }
.perimeter-walker { filter: drop-shadow(0 7px 4px rgba(0,0,0,.22)); }
.perimeter-walker .rabbit-tail { fill: #fff; stroke: #eadfd2; stroke-width: 1.5; }
.perimeter-walker .rabbit-body,.perimeter-walker .rabbit-head,.perimeter-walker .rabbit-ear,.perimeter-walker .rabbit-foot { fill: #fffaf2; stroke: #eadfd2; stroke-width: 1.5; }
.perimeter-walker .rabbit-ear-back { fill: #f7eadf; }
.perimeter-walker .rabbit-eye { fill: #263f3a; }
.perimeter-walker .rabbit-nose { fill: #e78981; }
.perimeter-board-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 14px 12px 20px; background: #0d342d; }
.perimeter-board-status span { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.55; }
.perimeter-board-status button { flex: 0 0 auto; min-height: 46px; padding: 0 16px; border: 0; border-radius: 14px; color: #183f36; background: #e3f56e; font-size: 13px; font-weight: 850; cursor: pointer; }
.perimeter-board-status button:disabled { opacity: .68; cursor: wait; }
.perimeter-math-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 19px; border: 1px solid rgba(23,79,67,.09); border-radius: 25px; background: #fffaf0; }
.perimeter-controls { padding: 14px; border-radius: 17px; background: white; box-shadow: inset 0 0 0 1px rgba(23,79,67,.08); }
.perimeter-controls label { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 7px; color: var(--perimeter-green); font-size: 14px; font-weight: 850; }
.perimeter-controls label:nth-of-type(2) { margin-top: 15px; }
.perimeter-controls output { color: var(--perimeter-deep); font-variant-numeric: tabular-nums; }
.perimeter-controls input { width: 100%; min-height: 28px; accent-color: var(--perimeter-green); }
.four-side-equation { padding: 16px; border-radius: 18px; background: #f1f6df; }
.four-side-equation small { display: block; margin-bottom: 10px; color: #61756c; font-size: 12px; font-weight: 750; }
.four-side-equation > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.four-side-equation span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: white; font-size: 18px; font-weight: 900; }
.four-side-equation b { color: #647169; font-size: 17px; }
.four-side-equation .length-chip { background: var(--perimeter-orange); }
.four-side-equation .width-chip { background: var(--perimeter-blue); }
.four-side-equation p { margin: 10px 0 0; color: var(--perimeter-deep); font-size: 18px; }
.four-side-equation p strong { font-size: 29px; }
.half-lap-formula { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 7px; }
.half-lap-formula > div:not(.formula-arrow) { padding: 13px; border-radius: 16px; background: white; box-shadow: inset 0 0 0 1px rgba(23,79,67,.08); }
.half-lap-formula span { display: block; margin-bottom: 5px; color: #728078; font-size: 12px; font-weight: 800; }
.half-lap-formula b { display: block; color: var(--perimeter-deep); font-size: 13px; line-height: 1.55; }
.half-lap-formula i,.half-lap-formula em { font-style: normal; }
.half-lap-formula em { color: #c96827; }
.formula-arrow { display: grid; place-items: center; min-width: 43px; color: var(--perimeter-green); font-size: 14px; font-weight: 900; }
.formula-cheer { display: grid; grid-template-columns: 45px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px; border-radius: 17px; color: white; background: var(--perimeter-green); }
.formula-cheer > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: rgba(255,255,255,.13); font-size: 24px; }
.formula-cheer small { display: block; color: #dff39c; font-size: 12px; font-weight: 850; }
.formula-cheer strong { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; }
.symbol-secret { padding: 12px 14px; border-radius: 15px; background: #f2eee4; }
.symbol-secret summary { color: var(--perimeter-green); font-size: 13px; font-weight: 850; cursor: pointer; }
.symbol-secret p { margin: 9px 0 0; color: #68736d; font-size: 13px; line-height: 1.7; }

.perimeter-idea-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.perimeter-idea-row article { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 14px; min-height: 220px; padding: 24px; border-radius: 28px; }
.perimeter-idea-row article > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(255,255,255,.65); font-size: 28px; }
.perimeter-idea-row small { color: #48725f; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.perimeter-idea-row h2 { margin: 7px 0 9px; color: var(--perimeter-deep); font: 700 24px/1.25 Georgia,"Songti SC",serif; }
.perimeter-idea-row p { margin: 0; color: #596c64; font-size: 14px; line-height: 1.75; }
.perimeter-why-card { background: #e5f39e; }
.perimeter-unit-card { background: #ffd9ca; }
.unit-compare { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.unit-compare span { padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.66); font-size: 12px; font-weight: 850; }
.unit-boundary { color: var(--perimeter-green); border: 2px solid var(--perimeter-orange); }
.unit-area { color: #8b5b4d; box-shadow: inset 0 0 0 999px rgba(239,139,62,.08); }

.perimeter-life { overflow: hidden; background: radial-gradient(circle at 96% 0,rgba(244,202,91,.16),transparent 22rem),linear-gradient(145deg,#fffdf8,#eef6d8); }
.perimeter-life-translator { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 20px; color: #365d52; background: var(--perimeter-deep); }
.perimeter-life-translator > b { display: flex; align-items: center; padding: 8px 12px; color: #e6f5a5; font-size: 13px; }
.perimeter-life-translator > span { display: flex; flex: 1 1 150px; align-items: center; gap: 8px; min-height: 44px; padding: 8px 11px; border-radius: 13px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.09); font-size: 12px; font-weight: 750; }
.perimeter-life-translator i { flex: 0 0 auto; padding: 4px 7px; border-radius: 8px; color: var(--perimeter-deep); background: #e5f29d; font-style: normal; font-weight: 900; }
.perimeter-life-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 10px; margin-top: 16px; }
.perimeter-life-scenes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; min-width: 0; }
.perimeter-life-scenes button { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 7px 9px; border: 2px solid transparent; border-radius: 16px; color: #587068; background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px rgba(23,79,67,.09); font-size: 13px; text-align: left; cursor: pointer; }
.perimeter-life-scenes button > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f1f4df; font-size: 19px; }
.perimeter-life-scenes button b { min-width: 0; font-size: 12px; line-height: 1.35; }
.perimeter-life-scenes button.active { border-color: var(--perimeter-green); color: var(--perimeter-deep); background: white; box-shadow: 0 9px 22px rgba(30,91,72,.1); }
.perimeter-life-scenes button.solved::after { content: "✓"; position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: white; background: #73a946; font-size: 11px; font-weight: 900; }
.perimeter-life-badge { display: flex; align-items: center; gap: 8px; min-width: 148px; padding: 8px 12px; border-radius: 16px; color: #8e5e24; background: #fff0bd; }
.perimeter-life-badge > span { font-size: 24px; }
.perimeter-life-badge b { font-size: 12px; line-height: 1.35; }
.perimeter-life-badge i { font-style: normal; font-size: 16px; }
.perimeter-life-badge.complete { color: white; background: linear-gradient(135deg,#bd7a2f,#e0a83b); }
.perimeter-life-panel { min-width: 0; margin-top: 12px; }
.perimeter-life-card { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); min-width: 0; overflow: hidden; border: 1px solid rgba(23,79,67,.09); border-radius: 25px; background: white; box-shadow: 0 17px 40px rgba(35,74,61,.09); }
.perimeter-life-visual { display: grid; place-items: center; align-content: center; min-width: 0; min-height: 360px; padding: 35px 28px 24px; background: #dff0c2; }
.perimeter-life-visual > small { max-width: 360px; margin-top: 31px; color: #4c6c60; font-size: 12px; font-weight: 800; line-height: 1.55; text-align: center; }
.perimeter-life-rectangle { position: relative; display: grid; place-items: center; width: min(78%,360px); aspect-ratio: 1.7; border: 12px solid #ed9746; border-left-color: #4a9ebd; border-right-color: #4a9ebd; border-radius: 13px; background: #8ec269; box-shadow: inset 0 0 0 5px rgba(255,255,255,.2),0 14px 30px rgba(45,91,57,.16); }
.perimeter-life-rectangle > span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: rgba(255,255,255,.72); font-size: 38px; }
.perimeter-life-rectangle > b { position: absolute; padding: 5px 8px; border-radius: 8px; color: #31584d; background: rgba(255,255,255,.9); font-size: 12px; white-space: nowrap; }
.life-length-label { left: 50%; top: -35px; transform: translateX(-50%); }
.life-width-label { right: -55px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.life-start-flag { position: absolute; left: -26px; top: -28px; color: #d95e4d; font-size: 26px; font-style: normal; }
.perimeter-life-visual--run .perimeter-life-rectangle { border-width: 15px; border-color: #e98a48; background: repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 55px),#bb7650; box-shadow: inset 0 0 0 7px #f5d4a6,0 14px 30px rgba(96,60,41,.16); }
.perimeter-life-visual--light { background: #d9edf2; }
.perimeter-life-visual--light .perimeter-life-rectangle { border-color: #65d8f1; background: #243c52; box-shadow: 0 0 8px #65d8f1,0 0 24px rgba(71,202,237,.62),inset 0 0 0 5px rgba(255,255,255,.08); }
.perimeter-life-visual--gate { background: #f2e4c9; }
.perimeter-life-visual--gate .perimeter-life-rectangle { border-color: #9c744a; background: #9bc976; }
.life-gate-gap { position: absolute; left: 50%; bottom: -20px; min-width: 78px; padding: 5px 8px; color: #87562b; background: #f2e4c9; font-size: 12px; font-style: normal; font-weight: 900; text-align: center; transform: translateX(-50%); }
.perimeter-life-visual--reverse { background: #d9ecdf; }
.perimeter-life-visual--reverse .perimeter-life-rectangle { border: 10px solid white; outline: 3px solid #4a9c67; background: linear-gradient(90deg,transparent 49.3%,rgba(255,255,255,.7) 49.3% 50.7%,transparent 50.7%),#75b780; }
.perimeter-life-copy { min-width: 0; padding: 28px; }
.perimeter-life-tag { display: inline-flex; min-height: 29px; align-items: center; padding: 0 10px; border-radius: 9px; color: var(--perimeter-green); background: #edf4d4; font-size: 12px; font-weight: 850; letter-spacing: .05em; }
.perimeter-life-copy h3 { margin: 10px 0 8px; color: var(--perimeter-deep); font: 700 25px/1.32 Georgia,"Songti SC",serif; }
.perimeter-life-copy > p { margin: 0; color: #5e716a; font-size: 14px; line-height: 1.75; }
.perimeter-life-question { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; margin-top: 16px; padding: 11px 13px; border-radius: 14px; color: #756037; background: #fff2ca; }
.perimeter-life-question b { padding: 5px 7px; border-radius: 8px; color: white; background: #c9843d; font-size: 12px; }
.perimeter-life-question span { font-size: 13px; line-height: 1.55; }
.perimeter-life-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.perimeter-life-options button { display: grid; grid-template-columns: 33px minmax(0,1fr); align-items: center; gap: 7px; min-width: 0; min-height: 54px; padding: 7px; border: 2px solid transparent; border-radius: 14px; color: var(--perimeter-deep); background: #f3f4ec; font-size: 13px; text-align: left; cursor: pointer; }
.perimeter-life-options button > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: white; background: var(--perimeter-green); font-size: 12px; font-style: normal; font-weight: 900; }
.perimeter-life-options button b { min-width: 0; font-size: 13px; line-height: 1.35; }
.perimeter-life-options button.correct { border-color: #75aa48; background: #e9f5cf; }
.perimeter-life-options button.wrong { border-color: #e4826e; background: #ffebe6; animation: quiz-shake .26s ease; }
.perimeter-life-options button:disabled { cursor: default; opacity: .72; }
.perimeter-life-options button.correct:disabled { opacity: 1; }
.perimeter-life-feedback { min-height: 45px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; color: #66756e; background: #f5f2e9; font-size: 13px; line-height: 1.6; }
.perimeter-life-feedback.success { color: #286a43; background: #e7f4ce; }
.perimeter-life-feedback.wrong { color: #9b4a39; background: #ffebe5; }
.perimeter-life-solution { margin-top: 10px; padding: 12px; border-radius: 15px; background: #edf5dc; }
.perimeter-life-solution[hidden] { display: none; }
.perimeter-life-solution > b { color: var(--perimeter-green); font-size: 12px; }
.perimeter-life-solution ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: life-step; }
.perimeter-life-solution li { display: grid; min-width: 0; padding: 9px 10px; border-radius: 11px; background: white; counter-increment: life-step; }
.perimeter-life-solution li span { color: #718078; font-size: 12px; font-weight: 750; }
.perimeter-life-solution li strong { margin-top: 4px; color: var(--perimeter-deep); font-size: 14px; overflow-wrap: anywhere; }
.perimeter-life-solution li span::before { content: counter(life-step) ". "; color: #c87633; }
.perimeter-life-visual--base { background: #dce9f3; }
.pixel-base-screen { display: grid; place-items: center; width: min(100%,370px); min-height: 245px; padding: 24px; border-radius: 24px; background: linear-gradient(#243750,#1c2d43); box-shadow: inset 0 0 0 5px rgba(255,255,255,.06),0 17px 35px rgba(29,48,68,.2); }
.pixel-base-shape { display: grid; place-items: center; max-width: 100%; border: 8px solid #72e4e7; border-radius: 3px; color: #eaffb0; background-color: #506c79; background-image: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size: 19px 19px; box-shadow: 0 0 6px #72e4e7,0 0 24px rgba(76,224,226,.42); transition: width .25s ease,height .25s ease; }
.pixel-base-shape span { font-size: 13px; font-weight: 900; text-shadow: 0 2px 3px #1c3140; }
.perimeter-base-control { margin-top: 16px; padding: 13px 14px; border: 1px solid rgba(23,79,67,.08); border-radius: 15px; background: #f8f6ef; }
.perimeter-base-control label { display: flex; justify-content: space-between; gap: 12px; color: var(--perimeter-green); font-size: 13px; font-weight: 850; }
.perimeter-base-control output { color: var(--perimeter-deep); font-variant-numeric: tabular-nums; }
.perimeter-base-control input { width: 100%; min-height: 32px; margin-top: 5px; accent-color: var(--perimeter-green); }
.perimeter-base-equation { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.perimeter-base-equation span { padding: 8px 10px; border-radius: 10px; color: #526961; background: #eef2e5; font-size: 12px; }
.perimeter-base-equation span b { color: var(--perimeter-deep); font-size: 18px; }
.perimeter-base-equation > i { color: #819087; font-size: 14px; font-style: normal; font-weight: 900; }
.perimeter-base-equation > strong { flex: 1 0 100%; padding: 10px 12px; border-radius: 12px; color: white; background: var(--perimeter-green); font-size: 15px; }
.perimeter-base-discovery { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 13px; color: #5b6d66; background: #fff0c8; }
.perimeter-base-discovery > span { font-size: 23px; text-align: center; }
.perimeter-base-discovery p { margin: 0; font-size: 13px; line-height: 1.6; }
.perimeter-base-discovery b { color: #a76528; }
.perimeter-base-pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.perimeter-base-pairs span { padding: 6px 9px; border: 2px solid transparent; border-radius: 9px; color: #60736b; background: #eef1e8; font-size: 12px; font-weight: 850; }
.perimeter-base-pairs span.active { border-color: #68a64a; color: var(--perimeter-green); background: #e7f3ce; }

.perimeter-quiz { background: linear-gradient(145deg,#fffdf5,#f0f6d7); }
.perimeter-quiz-shell { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 18px; align-items: stretch; }
.quiz-carrots { display: grid; align-content: center; gap: 12px; padding: 17px; border-radius: 22px; background: var(--perimeter-deep); }
.quiz-carrots i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: rgba(255,255,255,.1); filter: grayscale(1); opacity: .36; font-size: 30px; font-style: normal; transition: transform .3s ease,filter .3s ease,opacity .3s ease; }
.quiz-carrots i.earned { filter: none; opacity: 1; transform: rotate(-6deg) scale(1.06); background: rgba(255,255,255,.18); }
#perimeter-quiz-content { min-width: 0; }
.quiz-question { position: relative; min-height: 280px; padding: 24px; border: 1px solid rgba(23,79,67,.08); border-radius: 22px; background: white; }
.quiz-question > span { color: var(--perimeter-green); font-size: 12px; font-weight: 850; letter-spacing: .07em; }
.quiz-question h3 { max-width: 820px; margin: 9px 0 17px; color: var(--perimeter-deep); font: 700 23px/1.45 Georgia,"Songti SC",serif; }
.quiz-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.quiz-options button { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; min-height: 58px; padding: 8px 11px; border: 2px solid transparent; border-radius: 15px; color: var(--perimeter-deep); background: #f4f4ec; font-size: 14px; text-align: left; cursor: pointer; }
.quiz-options button i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: white; background: var(--perimeter-green); font-size: 13px; font-style: normal; font-weight: 900; }
.quiz-options button b { font-size: 14px; }
.quiz-options button.correct { border-color: #75aa48; background: #e9f5cf; }
.quiz-options button.wrong { border-color: #e4826e; background: #ffebe6; animation: quiz-shake .26s ease; }
@keyframes quiz-shake { 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }
.quiz-feedback { min-height: 45px; margin-top: 12px; padding: 11px 13px; border-radius: 13px; color: #66756e; background: #f5f2e9; font-size: 13px; line-height: 1.65; }
.quiz-feedback.success { color: #286a43; background: #e7f4ce; }
.quiz-feedback.wrong { color: #9b4a39; background: #ffebe5; }
.quiz-next { float: right; min-height: 44px; margin-top: 11px; padding: 0 16px; border: 0; border-radius: 13px; color: white; background: var(--perimeter-green); font-size: 13px; font-weight: 850; cursor: pointer; }
.quiz-next[hidden] { display: none; }
.quiz-finished { display: grid; place-items: center; min-height: 280px; padding: 25px; border-radius: 22px; color: white; background: linear-gradient(145deg,#174f43,#2f8064); text-align: center; }
.quiz-finished > span { font-size: 44px; }
.quiz-finished h3 { margin: 10px 0 7px; color: #e6f6a7; font: 700 27px/1.3 Georgia,"Songti SC",serif; }
.quiz-finished p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.75; }
.quiz-finished button { min-height: 46px; margin-top: 16px; padding: 0 17px; border: 0; border-radius: 14px; color: var(--perimeter-deep); background: #f2d05e; font-size: 13px; font-weight: 850; cursor: pointer; }

.perimeter-home-mission { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 15px; margin-top: 20px; padding: 22px 24px; border: 1px solid rgba(23,79,67,.08); border-radius: 25px; background: rgba(255,255,255,.72); }
.perimeter-home-mission > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: #e8f2c8; font-size: 28px; }
.perimeter-home-mission small { color: var(--perimeter-green); font-size: 12px; font-weight: 850; }
.perimeter-home-mission h2 { margin: 5px 0 4px; color: var(--perimeter-deep); font: 700 21px/1.25 Georgia,"Songti SC",serif; }
.perimeter-home-mission p { margin: 0; color: #66756f; font-size: 13px; line-height: 1.65; }
.perimeter-home-mission > b { padding: 9px 12px; border-radius: 11px; color: #9b622b; background: #fff0c9; font-size: 12px; }

.game-scene-art--rectangleGarden { background-size: cover; background-position: center; }
.perimeter-lesson .lesson-game { scroll-margin-top: 92px; }
.perimeter-lesson .game-canvas-viewport { overflow: hidden; }
.perimeter-lesson .lesson-game-canvas { width: 100%; min-width: 0; max-width: 100%; touch-action: manipulation; }
.perimeter-lesson .game-canvas-hint::before { content: "四条边会一直完整显示在画面里"; flex: 1 0 100%; color: var(--green-2); }

/* 第二课专属：正方形礼盒盖、四条等边和彩带生活任务。 */
.square-perimeter-lesson {
  --perimeter-green: #67509a;
  --perimeter-deep: #3d315b;
  --perimeter-leaf: #ffe37d;
  --perimeter-orange: #f47f6d;
  --perimeter-blue: #8178c8;
  --perimeter-cream: #fff8f2;
  color: #443856;
}
.square-hero { background: radial-gradient(circle at 8% 3%,rgba(255,227,125,.25),transparent 19rem),linear-gradient(145deg,#49376c,#8061ad 64%,#b978a7); box-shadow: 0 26px 70px rgba(83,57,116,.22); }
.square-hero::before { border-color: rgba(255,255,255,.14); }
.square-hero .perimeter-kicker,.square-hero h1 em { color: #ffe98e; }
.square-hero .perimeter-hero-copy > p strong { color: #fff0a7; }
.square-hero .perimeter-start-button { color: #45365f; background: #ffda67; }
.square-hero .perimeter-hero-art img { object-position: center; }
.square-route-nav button:hover { background: #67509a; }

.square-discover { background: linear-gradient(145deg,#fffdf9,#f6edff); }
.square-boundary-demo { display: grid; place-items: center; align-content: center; min-height: 390px; padding: 30px; border-radius: 25px; background: linear-gradient(145deg,#eee6ff,#ffecdf); }
.square-gift-outline { position: relative; display: grid; place-items: center; width: min(72%,310px); aspect-ratio: 1; border: 16px solid #f47f6d; border-radius: 16px; background: #b9dfcc; box-shadow: inset 0 0 0 6px rgba(255,255,255,.5),0 17px 38px rgba(83,64,103,.16); }
.square-gift-icon { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 25px; background: rgba(255,255,255,.72); font-size: 49px; }
.square-equal-mark { position: absolute; color: white; font: 900 21px/1 sans-serif; font-style: normal; text-shadow: 0 2px 4px rgba(99,52,58,.2); }
.mark-top { left: 50%; top: -18px; transform: translateX(-50%); }
.mark-right { right: -18px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.mark-bottom { left: 50%; bottom: -18px; transform: translateX(-50%); }
.mark-left { left: -18px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.square-boundary-flag { position: absolute; left: -34px; top: -30px; color: #d85652; font-size: 34px; font-style: normal; transform: rotate(-6deg); }
.square-boundary-demo > b { max-width: 420px; margin-top: 31px; color: #483b5d; font-size: 15px; line-height: 1.55; text-align: center; }

.square-lab { background: linear-gradient(155deg,rgba(255,255,255,.94),rgba(244,237,255,.92)); }
.square-lab-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(350px,.8fr); gap: 20px; align-items: stretch; }
.square-board { display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; overflow: hidden; border-radius: 25px; color: white; background: #3d315b; box-shadow: 0 18px 40px rgba(61,49,91,.2); }
#square-svg { display: block; width: 100%; height: auto; min-height: 430px; }
.square-board-bg { fill: #44355f; }
.square-gift { fill: #9ed1ba; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.square-gift-stars text { fill: #f9df78; font-size: 29px; text-anchor: middle; opacity: .72; }
.square-side { stroke: #f47f6d; stroke-width: 13; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.square-walked-route { fill: none; stroke: #ffe577; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px rgba(255,229,119,.7)); }
.square-side-label { fill: #fff1b2; font-size: 17px; font-weight: 850; text-anchor: middle; paint-order: stroke; stroke: #44355f; stroke-width: 5px; stroke-linejoin: round; }
.square-start-flag { fill: #ff8273; font-size: 31px; text-anchor: middle; }
.square-walker { font-size: 36px; text-anchor: middle; filter: drop-shadow(0 6px 4px rgba(0,0,0,.22)); }
.square-board-status { background: #2e2545; }
.square-board-status button { color: #44355f; background: #ffe36f; }
.square-math-panel { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 19px; border: 1px solid rgba(89,65,124,.1); border-radius: 25px; background: #fff8f2; }
.square-edge-control { padding: 14px; border-radius: 17px; background: white; box-shadow: inset 0 0 0 1px rgba(87,64,118,.09); }
.square-edge-control label { display: flex; justify-content: space-between; gap: 12px; color: #67509a; font-size: 14px; font-weight: 850; }
.square-edge-control output { color: #3d315b; font-variant-numeric: tabular-nums; }
.square-edge-control input { width: 100%; min-height: 30px; margin-top: 7px; accent-color: #67509a; }
.square-four-equation { padding: 15px; border-radius: 18px; background: #f1eaf9; }
.square-four-equation small { display: block; margin-bottom: 9px; color: #746984; font-size: 12px; font-weight: 750; }
.square-four-equation > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.square-four-equation span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: white; background: #8a68b3; font-size: 18px; font-weight: 900; }
.square-four-equation b { color: #756b7d; font-size: 17px; }
.square-four-equation p { margin: 9px 0 0; color: #3d315b; font-size: 18px; }
.square-four-equation p strong { font-size: 29px; }
.square-formula-bridge { display: grid; grid-template-columns: 1fr; gap: 7px; }
.square-formula-bridge > div { padding: 12px; border-radius: 15px; background: white; box-shadow: inset 0 0 0 1px rgba(87,64,118,.08); }
.square-formula-bridge span { display: block; margin-bottom: 4px; color: #81778b; font-size: 12px; font-weight: 800; }
.square-formula-bridge b { display: block; color: #423653; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.square-formula-bridge i { font-style: normal; }
.square-formula-bridge > em { padding: 2px 8px; color: #67509a; font-size: 12px; font-style: normal; font-weight: 850; text-align: center; }
.square-formula-bridge strong { color: #c7644d; }
.square-formula-cheer { display: grid; grid-template-columns: 45px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px; border-radius: 17px; color: white; background: linear-gradient(135deg,#67509a,#8f67ad); }
.square-formula-cheer > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: rgba(255,255,255,.13); font-size: 24px; }
.square-formula-cheer small { display: block; color: #ffe784; font-size: 12px; font-weight: 850; }
.square-formula-cheer strong { display: block; margin-top: 3px; font-size: 16px; }
.square-reverse-tip { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 9px; padding: 11px; border-radius: 15px; color: #5b4c69; background: #ffe9d4; }
.square-reverse-tip > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: white; background: #ef806e; font-size: 23px; }
.square-reverse-tip small { display: block; color: #9a5b4c; font-size: 12px; font-weight: 850; }
.square-reverse-tip b { display: block; margin-top: 2px; color: #493b59; font-size: 14px; }
.square-reverse-tip p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }

.square-concept-row { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 16px; margin-top: 20px; }
.square-concept-row > article { min-width: 0; min-height: 250px; padding: 24px; border-radius: 28px; }
.square-corner-card { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 14px; background: #ffe5a8; }
.square-corner-card > span,.square-measure-head > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(255,255,255,.66); font-size: 27px; }
.square-concept-row small { color: #755985; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.square-concept-row h2 { margin: 7px 0 9px; color: #3d315b; font: 700 24px/1.28 Georgia,"Songti SC",serif; }
.square-concept-row p { margin: 0; color: #695c6f; font-size: 14px; line-height: 1.75; }
.square-measure-card { background: #e9e1fa; }
.square-measure-head { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 14px; }
.square-measure-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.square-measure-switch button { min-height: 44px; border: 2px solid transparent; border-radius: 12px; color: #604e72; background: rgba(255,255,255,.65); font-size: 13px; font-weight: 850; cursor: pointer; }
.square-measure-switch button[aria-pressed="true"],.square-measure-switch button.active { border-color: #67509a; color: #3d315b; background: white; }
.square-measure-demo { display: grid; grid-template-columns: 126px minmax(0,1fr); align-items: center; gap: 15px; margin-top: 11px; padding: 13px; border-radius: 16px; background: rgba(255,255,255,.65); }
.square-measure-demo > div { display: grid; place-items: center; width: 116px; aspect-ratio: 1; border: 9px solid #f47f6d; background: #b9ddc9; }
.square-measure-demo > div span { font-size: 34px; }
.square-measure-demo.area-mode > div { border-color: #9a8ba9; background-color: #c3dfd0; background-image: linear-gradient(rgba(95,79,110,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(95,79,110,.2) 1px,transparent 1px); background-size: 18px 18px; }
.square-measure-demo p { font-size: 15px; }
.square-measure-demo p b { color: #5b4281; }

.square-life { background: radial-gradient(circle at 96% 0,rgba(249,142,114,.14),transparent 22rem),linear-gradient(145deg,#fffdf8,#f1e9fb); }
.square-life-translator { background: #47365f; }
.square-life-scenes { grid-template-columns: repeat(4,minmax(0,1fr)); }
.square-life-scenes button.active { border-color: #67509a; }
.square-life-visual { background: #eee5fb; }
.square-life-shape { position: relative; display: grid; place-items: center; width: min(72%,230px); aspect-ratio: 1; border: 12px solid #f47f6d; border-radius: 12px; background: #a8d3bd; box-shadow: inset 0 0 0 5px rgba(255,255,255,.28),0 14px 30px rgba(74,57,95,.17); }
.square-life-shape > span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 21px; background: rgba(255,255,255,.74); font-size: 39px; }
.square-life-shape > b { position: absolute; left: 50%; top: -36px; padding: 5px 8px; border-radius: 8px; color: #443653; background: white; font-size: 12px; white-space: nowrap; transform: translateX(-50%); }
.square-life-shape > i { position: absolute; left: 50%; bottom: -35px; min-width: 80px; padding: 5px 8px; border-radius: 8px; color: white; background: #67509a; font-size: 12px; font-style: normal; font-weight: 850; text-align: center; transform: translateX(-50%); }
.square-life-visual--robot { background: #dceaf1; }
.square-life-visual--robot .square-life-shape { border-color: #61d7df; border-radius: 2px; background-color: #456573; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size: 30px 30px; box-shadow: 0 0 8px #61d7df,0 0 24px rgba(82,207,217,.42); }
.square-life-visual--reverse { background: #e3e9f6; }
.square-life-visual--reverse .square-life-shape { border-color: #8e79de; background: #33415e; box-shadow: 0 0 8px #a38ee9,0 0 24px rgba(136,113,215,.35); }
.square-life-visual--gate { background: #f5e7cf; }
.square-life-visual--gate .square-life-shape { border-color: #a77b4c; background: #9dcc7c; }
.square-life-visual--gate .square-life-shape::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 62px; height: 24px; background: #f5e7cf; transform: translateX(-50%); }
.square-quiz-shell { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 18px; }
.square-quiz-stars { display: grid; align-content: center; gap: 12px; padding: 17px; border-radius: 22px; background: #493863; }
.square-quiz-stars i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; color: #8b789d; background: rgba(255,255,255,.1); font-size: 30px; font-style: normal; transition: transform .3s ease,color .3s ease,background .3s ease; }
.square-quiz-stars i.earned { color: #ffe06c; background: rgba(255,255,255,.18); transform: rotate(-7deg) scale(1.08); }
.square-quiz-finished { background: linear-gradient(145deg,#493863,#8665aa); }
.square-home-mission > span { background: #eee3fa; }
.square-home-mission > b { color: #744e83; background: #f5e4ff; }
.square-perimeter-lesson .game-canvas-hint::before { content: "正方形四条边会完整显示，先算再确认"; }

/* 第三课专属：彩虹阅读角、单位方格与长方形面积。 */
.rectangle-area-lesson {
  --perimeter-green: #247b73;
  --perimeter-deep: #174f49;
  --perimeter-leaf: #f6d66b;
  --perimeter-orange: #f47d68;
  --perimeter-blue: #5fb8aa;
  --perimeter-cream: #fff9ef;
  color: #244b47;
}
.area-hero { background: radial-gradient(circle at 7% 3%,rgba(249,219,105,.3),transparent 20rem),linear-gradient(145deg,#14544e,#27877c 62%,#6fb8a2); box-shadow:0 26px 70px rgba(31,105,96,.24); }
.area-hero::before { border-color:rgba(255,255,255,.14); }
.area-hero .perimeter-kicker,.area-hero h1 em { color:#ffe88a; }
.area-hero .perimeter-hero-copy > p strong { color:#fff0a8; }
.area-hero .perimeter-start-button { color:#184f49; background:#ffdb69; }
.area-hero .perimeter-hero-art img { object-position:center; }
.area-route-nav button:hover { background:#247b73; }

.area-discover { background:linear-gradient(145deg,#fffdf7,#e8f6f0); }
.area-boundary-demo { display:grid; place-items:center; align-content:center; min-height:390px; padding:30px; border-radius:25px; background:linear-gradient(145deg,#dff5ee,#fff0d8); }
.area-discover-shape { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:min(78%,390px); aspect-ratio:1.5; padding:13px; border:5px dashed #f47d68; border-radius:18px; background:#fffaf0; box-shadow:0 18px 38px rgba(31,98,88,.16); }
.area-discover-shape > i { border-radius:8px; background:linear-gradient(145deg,#72c9b3,#9cdac8); box-shadow:inset 0 0 0 2px rgba(255,255,255,.42); }
.area-discover-shape > b { position:absolute; inset:50% auto auto 50%; padding:8px 13px; border-radius:12px; color:white; background:rgba(26,91,83,.9); font-size:14px; transform:translate(-50%,-50%); }
.area-roller { position:absolute; right:-24px; top:-29px; font-size:38px; transform:rotate(-18deg); }
.area-boundary-demo > strong { margin-top:27px; color:#235d55; font-size:15px; text-align:center; }
.area-boundary-choices { grid-template-columns:1fr; }

.area-lab { background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(229,246,239,.94)); }
.area-lab-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(370px,.82fr); gap:20px; align-items:stretch; }
.area-board { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; overflow:hidden; border-radius:25px; color:white; background:#164f49; box-shadow:0 18px 42px rgba(21,79,72,.22); }
#area-svg { display:block; width:100%; height:auto; min-height:430px; }
.area-board-bg { fill:#174b47; }
.area-unit-cell { fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.22); stroke-width:2; transition:fill .18s ease,filter .18s ease; }
.area-unit-cell.filled { fill:#69c4ae; stroke:#bff1d8; filter:drop-shadow(0 0 5px rgba(119,231,201,.42)); }
.area-unit-cell.first.filled { fill:#f5d361; stroke:#fff1a7; }
.area-dimension-label { fill:#fff0a5; font-size:18px; font-weight:850; text-anchor:middle; paint-order:stroke; stroke:#174b47; stroke-width:6px; stroke-linejoin:round; }
#area-unit-key rect { fill:#f5d361; stroke:#fff1a7; stroke-width:2; }
#area-unit-key text { fill:#ddf5eb; font-size:14px; font-weight:750; }
.area-board-status { background:#103d39; }
.area-board-status > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.area-board-status button { min-height:44px; padding:0 13px; color:#184f49; background:#ffe06b; }
.area-board-status button:last-child { color:#d9ece7; background:rgba(255,255,255,.1); }
.area-math-panel { display:flex; flex-direction:column; gap:11px; min-width:0; padding:19px; border:1px solid rgba(36,123,115,.1); border-radius:25px; background:#fff9ef; }
.area-size-controls { padding:14px; border-radius:17px; background:white; box-shadow:inset 0 0 0 1px rgba(29,102,94,.1); }
.area-size-controls label { display:flex; justify-content:space-between; gap:12px; color:#247b73; font-size:13px; font-weight:850; }
.area-size-controls label + input + label { margin-top:9px; }
.area-size-controls output { color:#174f49; font-variant-numeric:tabular-nums; }
.area-size-controls input { width:100%; min-height:28px; margin-top:4px; accent-color:#247b73; }
.area-count-story { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:5px; }
.area-count-story > div { min-width:0; padding:11px 7px; border-radius:14px; background:#e6f5ef; text-align:center; }
.area-count-story span { display:block; color:#5a7d76; font-size:12px; font-weight:800; }
.area-count-story b { display:block; margin-top:4px; color:#185a52; font-size:14px; }
.area-count-story em { font-style:normal; }
.area-count-story > i { color:#e07a62; font-size:15px; font-style:normal; font-weight:900; }
.area-repeat-equation { padding:15px; border-radius:18px; background:#fff0c8; }
.area-repeat-equation small { display:block; color:#8b6c33; font-size:12px; font-weight:800; }
.area-repeat-equation > b { display:block; margin-top:7px; color:#56492e; font-size:17px; overflow-wrap:anywhere; }
.area-repeat-equation p { margin:8px 0 0; color:#174f49; font-size:18px; }
.area-repeat-equation strong { font-size:29px; }
.area-formula-bridge { display:grid; grid-template-columns:1fr; gap:7px; }
.area-formula-bridge > div { padding:12px; border-radius:15px; background:white; box-shadow:inset 0 0 0 1px rgba(29,102,94,.09); }
.area-formula-bridge span { display:block; margin-bottom:4px; color:#6f837e; font-size:12px; font-weight:800; }
.area-formula-bridge b { color:#174f49; font-size:14px; line-height:1.55; }
.area-formula-bridge i { color:#d76651; font-style:normal; }
.area-formula-bridge strong { color:#d76651; }
.area-formula-bridge > em { color:#247b73; font-size:12px; font-style:normal; font-weight:850; text-align:center; }
.area-reverse-tip { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; padding:12px; border-radius:16px; color:#5f5646; background:#e7f2ce; }
.area-reverse-tip > span { display:grid; place-items:center; width:41px; height:41px; border-radius:13px; color:white; background:#e57c63; font-size:24px; }
.area-reverse-tip small { display:block; color:#577844; font-size:12px; font-weight:850; }
.area-reverse-tip b { display:block; margin-top:2px; color:#285b4e; font-size:14px; }
.area-reverse-tip p { margin:3px 0 0; font-size:12px; line-height:1.55; }

.area-concept-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr); gap:16px; margin-top:20px; }
.area-concept-grid > article { min-width:0; min-height:315px; padding:23px; border-radius:28px; }
.area-unit-card { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:start; gap:16px; background:#ffe9a8; }
.area-unit-card > div { display:grid; grid-template-columns:1fr; place-items:center; width:76px; aspect-ratio:1; border:4px solid #d56c58; border-radius:15px; color:#174f49; background:#fffdf3; box-shadow:inset 0 0 0 6px #f5d361; }
.area-unit-card > div span { font-size:28px; font-weight:900; }
.area-unit-card > div b { margin-top:-15px; font-size:14px; }
.area-concept-grid small { color:#247b73; font-size:12px; font-weight:850; letter-spacing:.05em; }
.area-concept-grid h2 { margin:7px 0 9px; color:#174f49; font:700 23px/1.3 Georgia,"Songti SC",serif; }
.area-concept-grid p { margin:0; color:#5b6f68; font-size:13px; line-height:1.72; }
.area-unit-card ul { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 0; padding:0; list-style:none; }
.area-unit-card li { padding:6px 8px; border-radius:9px; color:#446c56; background:rgba(255,255,255,.62); font-size:12px; font-weight:800; }
.area-measure-card { background:#dff3ec; }
.area-growth-card { background:#eee7fb; }
.area-card-heading { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; }
.area-card-heading > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; background:rgba(255,255,255,.72); font-size:26px; }
.area-card-heading h2 { margin-bottom:0; }
.area-measure-switch,.area-growth-switch { display:grid; gap:7px; margin-top:14px; }
.area-measure-switch { grid-template-columns:repeat(2,minmax(0,1fr)); }
.area-growth-switch { grid-template-columns:repeat(3,minmax(0,1fr)); }
.area-measure-switch button,.area-growth-switch button { min-height:44px; border:2px solid transparent; border-radius:12px; color:#406e66; background:rgba(255,255,255,.72); font-size:13px; font-weight:850; cursor:pointer; }
.area-measure-switch button[aria-pressed="true"],.area-growth-switch button[aria-pressed="true"] { border-color:#247b73; color:#174f49; background:white; }
.area-measure-demo { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:14px; margin-top:13px; padding:12px; border-radius:16px; background:rgba(255,255,255,.67); }
.area-measure-demo > div { width:126px; aspect-ratio:1.5; border:7px solid #f47d68; background-color:#87d0bc; background-image:linear-gradient(rgba(255,255,255,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.55) 2px,transparent 2px); background-size:calc(100% / 6) calc(100% / 4); }
.area-measure-demo.perimeter-mode > div { border-style:dashed; background:#edf6f1; background-image:none; }
.area-measure-demo p { font-size:14px; }
.area-measure-demo p b { color:#d06451; }
.area-growth-demo { display:grid; grid-template-columns:repeat(var(--area-cols),1fr); grid-template-rows:repeat(var(--area-rows),1fr); gap:3px; width:min(100%,300px); aspect-ratio:calc(var(--area-cols) / var(--area-rows)); margin:14px auto 10px; padding:5px; border:3px solid #6c5b92; border-radius:11px; background:rgba(255,255,255,.62); }
.area-growth-demo i { border-radius:4px; background:#7ac9b4; }
.area-growth-demo i.added { background:#f58a71; }
.area-growth-card > p b { color:#6a478a; }

.area-life { background:radial-gradient(circle at 96% 0,rgba(245,138,113,.13),transparent 22rem),linear-gradient(145deg,#fffdf7,#e7f5ef); }
.area-life-translator { background:#164f49; }
.area-life-scenes { grid-template-columns:repeat(4,minmax(0,1fr)); }
.area-life-scenes button.active { border-color:#247b73; }
.area-life-visual { background:#e5f4ee; }
.area-life-grid { position:relative; display:grid; grid-template-columns:repeat(var(--area-cols),1fr); grid-template-rows:repeat(var(--area-rows),1fr); gap:4px; width:min(76%,360px); aspect-ratio:calc(var(--area-cols) / var(--area-rows)); padding:7px; border:5px solid #247b73; border-radius:15px; background:#fffaf0; box-shadow:0 15px 32px rgba(28,92,83,.16); }
.area-life-grid > i { border-radius:4px; background:#78c9b3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.area-life-grid > i.added { background:#f38a72; }
.area-life-grid > span { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.8); font-size:32px; transform:translate(-50%,-50%); }
.area-quiz-shell { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; }
.area-quiz-stars { display:grid; align-content:center; gap:12px; padding:17px; border-radius:22px; background:#164f49; }
.area-quiz-stars i { display:grid; place-items:center; width:56px; height:56px; border-radius:17px; color:#577a74; background:rgba(255,255,255,.1); font-size:30px; font-style:normal; transition:transform .3s ease,color .3s ease,background .3s ease; }
.area-quiz-stars i.earned { color:#ffe06c; background:rgba(255,255,255,.18); transform:rotate(-7deg) scale(1.08); }
.area-quiz-finished { background:linear-gradient(145deg,#164f49,#33877a); }
.area-home-mission > span { background:#dff3ec; }
.area-home-mission > b { color:#406c5b; background:#e7f2ce; }
.rectangle-area-lesson .game-canvas-hint::before { content:"每个彩色小方格都是面积的一份，先算再提交"; }

/* 第四课专属：方格游戏岛、先猜后铺与正方形面积。 */
.square-area-lesson {
  --perimeter-green:#6653a5;
  --perimeter-deep:#3f356d;
  --perimeter-leaf:#f5d568;
  --perimeter-orange:#f07868;
  --perimeter-blue:#56b7aa;
  --perimeter-cream:#fff9ef;
  color:#403b58;
}
.square-area-hero { background:radial-gradient(circle at 8% 3%,rgba(255,224,105,.29),transparent 20rem),linear-gradient(145deg,#40366d,#6d59a5 58%,#8f79bd); box-shadow:0 26px 70px rgba(70,54,111,.27); }
.square-area-hero::before { border-color:rgba(255,255,255,.14); }
.square-area-hero .perimeter-kicker,.square-area-hero h1 em { color:#ffe97e; }
.square-area-hero .perimeter-hero-copy > p strong { color:#fff0a7; }
.square-area-hero .perimeter-start-button { color:#40366d; background:#ffdc68; }
.square-area-hero .perimeter-hero-art img { object-position:center; }
.square-area-route-nav button:hover { background:#6653a5; }

.square-area-discover { background:linear-gradient(145deg,#fffdf8,#eeeafa); }
.square-area-boundary-demo { display:grid; place-items:center; align-content:center; min-height:390px; padding:30px; border-radius:25px; background:linear-gradient(145deg,#ede8fa,#fff0d5); }
.square-area-discover-shape { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:min(72%,330px); aspect-ratio:1; padding:13px; border:6px solid #f07868; border-radius:20px; background:#fffaf0; box-shadow:0 18px 38px rgba(74,56,119,.16); transition:border-style .2s ease,box-shadow .2s ease; }
.square-area-discover-shape > i { border-radius:8px; background:linear-gradient(145deg,#9a88dd,#b7a7ed); box-shadow:inset 0 0 0 2px rgba(255,255,255,.44); transition:opacity .2s ease,filter .2s ease; }
.square-area-discover-shape > b { position:absolute; inset:50% auto auto 50%; padding:8px 13px; border-radius:12px; color:white; background:rgba(62,51,105,.91); font-size:14px; transform:translate(-50%,-50%); }
.square-area-discover-shape > span { position:absolute; right:-31px; bottom:-28px; font-size:45px; transform:rotate(6deg); }
.square-area-discover-shape.inside-mode > i { filter:drop-shadow(0 0 7px rgba(255,224,104,.7)); }
.square-area-discover-shape.edge-mode { border-style:dashed; box-shadow:0 0 0 7px rgba(240,120,104,.16),0 18px 38px rgba(74,56,119,.16); }
.square-area-discover-shape.edge-mode > i,.square-area-discover-shape.side-mode > i { opacity:.22; }
.square-area-discover-shape.side-mode { border-color:#d9d2e9; border-top-color:#f07868; }
.square-area-boundary-demo > strong { margin-top:28px; color:#554a7b; font-size:15px; text-align:center; }
.square-area-boundary-choices { grid-template-columns:1fr; }

.square-area-lab { background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(238,234,250,.95)); }
.square-area-lab-grid { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(390px,.86fr); gap:20px; align-items:stretch; }
.square-area-board { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; overflow:hidden; border-radius:25px; color:white; background:#3e3568; box-shadow:0 18px 42px rgba(63,51,105,.23); }
#square-area-svg { display:block; width:100%; height:auto; min-height:440px; }
.square-area-board-bg { fill:#3e3568; }
.square-area-unit-cell { fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.21); stroke-width:2; transition:fill .18s ease,filter .18s ease; }
.square-area-unit-cell.filled { fill:#8f7bd5; stroke:#d7cef8; filter:drop-shadow(0 0 5px rgba(180,161,238,.5)); }
.square-area-unit-cell.first.filled { fill:#f5d361; stroke:#fff1a7; }
.square-area-dimension-label { fill:#fff0a5; font-size:18px; font-weight:850; text-anchor:middle; paint-order:stroke; stroke:#3e3568; stroke-width:6px; stroke-linejoin:round; }
#square-area-unit-key rect { fill:#f5d361; stroke:#fff1a7; stroke-width:2; }
#square-area-unit-key text { fill:#eee9ff; font-size:14px; font-weight:750; }
.square-area-board-status { background:#302951; }
.square-area-board-status > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.square-area-board-status button { min-height:44px; padding:0 12px; color:#40366d; background:#ffe06b; font-size:13px; }
.square-area-board-status button:disabled { color:#9c93aa; background:rgba(255,255,255,.13); cursor:not-allowed; }
.square-area-board-status button:last-child { color:#e8e3f7; background:rgba(255,255,255,.1); }
.square-area-math-panel { display:flex; flex-direction:column; gap:11px; min-width:0; padding:19px; border:1px solid rgba(102,83,165,.11); border-radius:25px; background:#fff9ef; }
.square-area-side-control { padding:14px; border-radius:17px; background:white; box-shadow:inset 0 0 0 1px rgba(83,66,139,.1); }
.square-area-side-control label { display:flex; justify-content:space-between; gap:12px; color:#6653a5; font-size:13px; font-weight:850; }
.square-area-side-control output { color:#3f356d; font-variant-numeric:tabular-nums; }
.square-area-side-control input { width:100%; min-height:44px; margin-top:2px; accent-color:#7661b5; }
.square-area-count-story { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:5px; }
.square-area-count-story > div { min-width:0; padding:11px 7px; border-radius:14px; background:#eeeafa; text-align:center; }
.square-area-count-story span { display:block; color:#706688; font-size:12px; font-weight:800; }
.square-area-count-story b { display:block; margin-top:4px; color:#4c3f80; font-size:14px; }
.square-area-count-story em { font-style:normal; }
.square-area-count-story > i { color:#e1715e; font-size:15px; font-style:normal; font-weight:900; }
.square-area-guess-box { padding:14px; border-radius:18px; background:#fff0c8; }
.square-area-guess-box > small { display:block; color:#846836; font-size:12px; font-weight:850; }
#square-area-guess-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }
#square-area-guess-options button { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; min-height:46px; padding:6px; border:2px solid transparent; border-radius:12px; color:#5c4c2f; background:white; font-size:13px; font-weight:850; cursor:pointer; }
#square-area-guess-options button i { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; color:white; background:#a28bcf; font-style:normal; }
#square-area-guess-options button.correct { border-color:#65a63e; background:#e9f6d4; }
#square-area-guess-options button.wrong { border-color:#df6759; background:#fff0ed; }
.square-area-guess-box > p { margin:9px 0 0; min-height:35px; color:#756646; font-size:12px; line-height:1.55; }
.square-area-guess-box > p.success { color:#397338; }
.square-area-guess-box > p.wrong { color:#a64942; }
.square-area-formula-wrap { position:relative; display:grid; gap:8px; min-height:200px; }
.square-area-formula-cover { position:absolute; z-index:3; inset:0; display:grid; place-content:center; place-items:center; gap:8px; border:2px dashed #a897d2; border-radius:17px; color:#62528f; background:rgba(238,234,250,.98); transition:opacity .25s ease,visibility .25s ease; }
.square-area-formula-cover span { font-size:31px; }
.square-area-formula-cover b { font-size:13px; }
.square-area-formula-wrap.revealed .square-area-formula-cover { opacity:0; visibility:hidden; }
.square-area-repeat-equation { padding:14px; border-radius:17px; background:#eeeafa; }
.square-area-repeat-equation small { display:block; color:#6f638c; font-size:12px; font-weight:850; }
.square-area-repeat-equation > b { display:block; margin-top:6px; color:#4a3e79; font-size:17px; overflow-wrap:anywhere; }
.square-area-repeat-equation p { margin:7px 0 0; color:#41356c; font-size:18px; }
.square-area-repeat-equation strong { color:#d66454; font-size:28px; }
.square-area-formula-bridge { display:grid; grid-template-columns:1fr; gap:6px; }
.square-area-formula-bridge > div { padding:11px; border-radius:14px; background:white; box-shadow:inset 0 0 0 1px rgba(83,66,139,.09); }
.square-area-formula-bridge span { display:block; margin-bottom:4px; color:#756b87; font-size:12px; font-weight:800; }
.square-area-formula-bridge b { color:#443773; font-size:14px; line-height:1.5; }
.square-area-formula-bridge i { color:#d76555; font-style:normal; }
.square-area-formula-bridge strong { color:#d76555; }
.square-area-formula-bridge > em { color:#6653a5; font-size:12px; font-style:normal; font-weight:850; text-align:center; }
.square-area-square-secret { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:11px; padding:12px; border-radius:17px; background:#dff2eb; }
.square-area-square-secret > span { display:grid; place-items:center; width:53px; height:53px; border-radius:15px; color:white; background:#5a4a91; font-size:23px; font-weight:900; }
.square-area-square-secret small { display:block; color:#4b7a6d; font-size:12px; font-weight:850; }
.square-area-square-secret b { display:block; margin-top:2px; color:#40366d; font-size:15px; }
.square-area-square-secret p { margin:3px 0 0; color:#5e6e69; font-size:12px; line-height:1.55; }

.square-area-concept-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.square-area-concept-grid > article { min-width:0; min-height:300px; padding:23px; border-radius:28px; }
.square-area-unit-card { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:start; gap:16px; background:#ffe9a8; }
.square-area-unit-card > div { display:grid; grid-template-columns:1fr; place-items:center; width:76px; aspect-ratio:1; border:4px solid #d56c58; border-radius:15px; color:#40366d; background:#fffdf3; box-shadow:inset 0 0 0 6px #f5d361; }
.square-area-unit-card > div span { font-size:28px; font-weight:900; }
.square-area-unit-card > div b { margin-top:-15px; font-size:14px; }
.square-area-concept-grid small { color:#6653a5; font-size:12px; font-weight:850; letter-spacing:.05em; }
.square-area-concept-grid h2 { margin:7px 0 9px; color:#40366d; font:700 23px/1.3 Georgia,"Songti SC",serif; }
.square-area-concept-grid p { margin:0; color:#655f72; font-size:13px; line-height:1.72; }
.square-area-unit-card ul { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 0; padding:0; list-style:none; }
.square-area-unit-card li { padding:6px 8px; border-radius:9px; color:#675c3f; background:rgba(255,255,255,.63); font-size:12px; font-weight:800; }
.square-area-card-heading { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; }
.square-area-card-heading > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; color:#fff; background:rgba(87,69,143,.88); font-size:25px; }
.square-area-card-heading h2 { margin-bottom:0; }
.square-area-measure-card { background:#e3f3ed; }
.square-area-growth-card { background:#eee8fa; }
.square-area-reverse-card { background:#ffe9dc; }
.square-area-measure-switch,.square-area-growth-switch { display:grid; gap:7px; margin-top:14px; }
.square-area-measure-switch { grid-template-columns:repeat(2,minmax(0,1fr)); }
.square-area-growth-switch { grid-template-columns:repeat(3,minmax(0,1fr)); }
.square-area-measure-switch button,.square-area-growth-switch button { min-height:44px; border:2px solid transparent; border-radius:12px; color:#5d527c; background:rgba(255,255,255,.74); font-size:13px; font-weight:850; cursor:pointer; }
.square-area-measure-switch button[aria-pressed="true"],.square-area-growth-switch button[aria-pressed="true"] { border-color:#6653a5; color:#40366d; background:white; }
.square-area-measure-demo { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:14px; margin-top:14px; padding:13px; border-radius:17px; background:rgba(255,255,255,.69); }
.square-area-measure-demo > div { width:122px; aspect-ratio:1; border:7px solid #f07868; background-color:#9482d3; background-image:linear-gradient(rgba(255,255,255,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.55) 2px,transparent 2px); background-size:20% 20%; }
.square-area-measure-demo.perimeter-mode > div { border-style:dashed; background:#f1eef7; background-image:none; }
.square-area-measure-demo p { font-size:14px; }
.square-area-measure-demo p b { color:#d06451; }
.square-area-growth-demo { display:grid; grid-template-columns:repeat(var(--square-area-side),1fr); grid-template-rows:repeat(var(--square-area-side),1fr); gap:3px; width:min(100%,230px); aspect-ratio:1; margin:14px auto 10px; padding:5px; border:3px solid #6653a5; border-radius:12px; background:rgba(255,255,255,.63); }
.square-area-growth-demo i { border-radius:4px; background:#8f7bd1; }
.square-area-growth-demo i.added { background:#f1846f; }
.square-area-growth-card > p b { color:#6546a1; }
.square-area-reverse-card > p { margin-top:14px; }
.square-area-reverse-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.square-area-reverse-options button { min-height:48px; border:2px solid transparent; border-radius:13px; color:#6653a5; background:white; font-size:14px; font-weight:900; cursor:pointer; }
.square-area-reverse-options button.correct { border-color:#70aa43; color:#39703b; background:#eaf6d7; }
.square-area-reverse-options button.wrong { border-color:#dc6658; color:#a64b43; background:#fff0ec; }
.square-area-reverse-feedback { min-height:63px; margin-top:12px; padding:12px; border-radius:13px; color:#6b6178; background:rgba(255,255,255,.7); font-size:13px; line-height:1.55; }
.square-area-reverse-feedback.success { color:#39703b; background:#eaf6d7; }
.square-area-reverse-feedback.wrong { color:#a54a42; background:#fff0ec; }

.square-area-life { background:radial-gradient(circle at 97% 0,rgba(143,123,209,.14),transparent 22rem),linear-gradient(145deg,#fffdf8,#eeeafa); }
.square-area-life-translator { background:#40366d; }
.square-area-life-scenes { grid-template-columns:repeat(4,minmax(0,1fr)); }
.square-area-life-scenes button.active { border-color:#6653a5; }
.square-area-life-visual { background:#ede9f8; }
.square-area-life-grid { position:relative; display:grid; grid-template-columns:repeat(var(--square-area-side),1fr); grid-template-rows:repeat(var(--square-area-side),1fr); gap:4px; width:min(68%,310px); aspect-ratio:1; padding:7px; border:5px solid #6653a5; border-radius:16px; background:#fffaf0; box-shadow:0 15px 32px rgba(75,57,122,.16); }
.square-area-life-grid > i { border-radius:4px; background:#9380d0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.44); }
.square-area-life-grid > span { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.82); font-size:32px; transform:translate(-50%,-50%); }
.square-area-quiz-shell { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; }
.square-area-quiz-stars { display:grid; align-content:center; gap:12px; padding:17px; border-radius:22px; background:#40366d; }
.square-area-quiz-stars i { display:grid; place-items:center; width:56px; height:56px; border-radius:17px; color:#80729c; background:rgba(255,255,255,.1); font-size:30px; font-style:normal; transition:transform .3s ease,color .3s ease,background .3s ease; }
.square-area-quiz-stars i.earned { color:#ffe06c; background:rgba(255,255,255,.18); transform:rotate(-7deg) scale(1.08); }
.square-area-quiz-finished { background:linear-gradient(145deg,#40366d,#7761ae); }
.square-area-home-mission > span { background:#eee8fa; }
.square-area-home-mission > b { color:#5f4b98; background:#f0e6ff; }
.square-area-lesson .game-canvas-hint::before { content:"先选答案，再按提交；正确数值不会自动过关"; }

/* 第五课专属：三角拼片实验营、底高配对与可旋转 3D 双胞胎拼合。 */
.triangle-area-lesson {
  --perimeter-green:#23847f;
  --perimeter-deep:#244c59;
  --perimeter-leaf:#f5d369;
  --perimeter-orange:#f17863;
  --perimeter-blue:#55b9b1;
  --perimeter-cream:#fff9ed;
  color:#314d55;
}
.triangle-area-hero { background:radial-gradient(circle at 8% 4%,rgba(255,222,107,.28),transparent 21rem),linear-gradient(145deg,#214955,#28766f 58%,#62a89b); box-shadow:0 26px 70px rgba(31,77,82,.28); }
.triangle-area-hero::before { border-color:rgba(255,255,255,.15); }
.triangle-area-hero .perimeter-kicker,.triangle-area-hero h1 em { color:#ffe681; }
.triangle-area-hero .perimeter-hero-copy > p strong { color:#fff0a8; }
.triangle-area-hero .perimeter-start-button { color:#244c59; background:#ffda68; }
.triangle-area-hero .perimeter-hero-art img { object-position:center 54%; }
.triangle-area-route-nav button:hover { background:#23847f; }

.triangle-area-discover { background:radial-gradient(circle at 100% 0,rgba(80,185,175,.12),transparent 22rem),linear-gradient(145deg,#fffdf7,#e8f5f1); }
.triangle-area-discover-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; }
.triangle-area-surface-card,.triangle-area-height-card { min-width:0; padding:22px; border-radius:25px; background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1px rgba(36,76,89,.08); }
.triangle-area-surface-demo { position:relative; display:grid; place-content:center; width:min(80%,340px); aspect-ratio:1.35; margin:0 auto 20px; clip-path:polygon(50% 3%,98% 96%,2% 96%); color:#fff; background:linear-gradient(145deg,#f6a072,#ef6e5e); filter:drop-shadow(0 18px 18px rgba(122,73,57,.2)); transition:filter .25s ease,background .25s ease; }
.triangle-area-surface-demo::before { content:""; position:absolute; inset:14% 15% 11%; clip-path:inherit; background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 12px,transparent 12px 24px); }
.triangle-area-surface-demo > span,.triangle-area-surface-demo > b { position:relative; z-index:1; text-align:center; }
.triangle-area-surface-demo > span { font-size:42px; }
.triangle-area-surface-demo > b { margin-top:5px; font-size:14px; }
.triangle-area-surface-demo.inside-mode { background:linear-gradient(145deg,#ff9b70,#ef655e); filter:drop-shadow(0 0 16px rgba(241,120,99,.45)) drop-shadow(0 18px 18px rgba(122,73,57,.16)); }
.triangle-area-surface-demo.edge-mode { background:#f6e4d4; outline:8px dashed #f17863; outline-offset:-15px; }
.triangle-area-surface-demo.edge-mode::before,.triangle-area-surface-demo.side-mode::before { opacity:.18; }
.triangle-area-surface-demo.side-mode { background:linear-gradient(145deg,#f5e7d8 0 92%,#f17863 92%); }
.triangle-area-surface-card h3 { margin:10px 0 13px; color:#244c59; font:700 23px/1.35 Georgia,"Songti SC",serif; }
.triangle-area-boundary-choices { grid-template-columns:1fr; }
.triangle-area-card-title { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; }
.triangle-area-card-title > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; color:white; background:#23847f; font-size:25px; }
.triangle-area-card-title small { color:#23847f; font-size:12px; font-weight:850; letter-spacing:.05em; }
.triangle-area-card-title h2,.triangle-area-card-title h3 { margin:4px 0 0; color:#244c59; font:700 22px/1.3 Georgia,"Songti SC",serif; }
#triangle-area-height-svg { display:block; width:100%; height:auto; margin:8px 0; }
#triangle-area-height-svg polygon { fill:#ffe4b6; stroke:#e3745f; stroke-width:5; stroke-linejoin:round; }
#triangle-area-height-svg .base { stroke:#247d9a; stroke-width:10; stroke-linecap:round; }
#triangle-area-height-svg .candidate { fill:none; stroke:#8f9da1; stroke-width:5; stroke-dasharray:10 9; stroke-linecap:round; transition:stroke .2s ease,stroke-width .2s ease; }
#triangle-area-height-svg .candidate-b { stroke:#d96b59; stroke-dasharray:none; }
#triangle-area-height-svg .right-angle { fill:none; stroke:#55a43f; stroke-width:5; opacity:0; }
#triangle-area-height-svg text { fill:#35616c; font-size:15px; font-weight:850; text-anchor:middle; }
#triangle-area-height-svg[data-choice="perpendicular"] .candidate-a { stroke:#55a43f; stroke-width:7; }
#triangle-area-height-svg[data-choice="perpendicular"] .right-angle { opacity:1; }
#triangle-area-height-svg[data-choice="slant"] .candidate-b,#triangle-area-height-svg[data-choice="tilted"] .candidate-c { stroke:#dc6557; stroke-width:7; }
.triangle-area-height-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.triangle-area-height-options button,.triangle-area-guess-box button,.triangle-area-reverse-options button { min-width:0; min-height:48px; border:2px solid transparent; border-radius:13px; color:#315b63; background:#eef7f4; font-size:13px; font-weight:850; cursor:pointer; }
.triangle-area-height-options button i,.triangle-area-guess-box button i { display:grid; place-items:center; width:27px; height:27px; margin:0 auto 4px; border-radius:9px; color:#fff; background:#58aaa4; font-style:normal; }
.triangle-area-height-options button.correct,.triangle-area-guess-box button.correct,.triangle-area-reverse-options button.correct { border-color:#67a945; color:#39723b; background:#eaf6d8; }
.triangle-area-height-options button.wrong,.triangle-area-guess-box button.wrong,.triangle-area-reverse-options button.wrong { border-color:#dc6557; color:#a44a42; background:#fff0ec; }
.triangle-area-height-feedback { min-height:58px; margin-top:10px; padding:11px 12px; border-radius:13px; color:#536d72; background:#edf5f2; font-size:13px; line-height:1.55; }
.triangle-area-height-feedback.success { color:#39723b; background:#eaf6d8; }
.triangle-area-height-feedback.wrong { color:#a44a42; background:#fff0ec; }
.triangle-area-one-line { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; margin:18px 0 0; padding:16px 18px; border:0; border-radius:18px; color:#315b63; background:#dff2ed; }
.triangle-area-one-line > b { padding:7px 10px; border-radius:10px; color:#fff; background:#23847f; font-size:12px; }
.triangle-area-one-line > span { font-size:14px; line-height:1.65; }

.triangle-area-lab { background:linear-gradient(150deg,#fffdf7,#e8f5f1); }
.triangle-area-lab-grid { display:grid; grid-template-columns:minmax(0,1.24fr) minmax(365px,.76fr); gap:18px; align-items:stretch; }
.triangle-area-stage-wrap { min-width:0; overflow:hidden; border-radius:25px; color:#fff; background:#214955; box-shadow:0 20px 46px rgba(32,73,82,.22); }
.triangle-area-view-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:10px; background:#193c47; }
.triangle-area-view-switch button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; border:1px solid rgba(255,255,255,.15); border-radius:11px; color:#d8eeea; background:rgba(255,255,255,.07); font-size:13px; font-weight:850; cursor:pointer; }
.triangle-area-view-switch button span { font-size:19px; line-height:1; }
.triangle-area-view-switch button b { font:inherit; }
.triangle-area-view-switch button.active,.triangle-area-view-switch button[aria-pressed="true"] { color:#244c59; background:#ffe078; }
.triangle-area-stage { position:relative; min-height:480px; overflow:hidden; background:radial-gradient(circle at 50% 40%,rgba(101,194,180,.24),transparent 45%),linear-gradient(#2d6270,#204b57); }
#triangle-area-prism-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; outline:none; touch-action:pan-y; cursor:grab; }
#triangle-area-prism-canvas:active { cursor:grabbing; }
#triangle-area-prism-canvas:focus-visible { box-shadow:inset 0 0 0 4px #ffe078; }
.triangle-area-geometry-data { display:none !important; }
.triangle-area-view-purpose { position:absolute; z-index:2; top:14px; left:14px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; width:min(430px,calc(100% - 28px)); padding:10px 12px; border:1px solid rgba(255,255,255,.2); border-radius:15px; color:#f7fffc; background:rgba(13,48,57,.86); box-shadow:0 10px 25px rgba(4,25,31,.16); pointer-events:none; backdrop-filter:blur(7px); }
.triangle-area-view-purpose > span { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#244c59; background:#ffe078; font-size:21px; }
.triangle-area-view-purpose b,.triangle-area-view-purpose small { display:block; }
.triangle-area-view-purpose b { color:#fff4bc; font-size:13px; }
.triangle-area-view-purpose small { margin-top:3px; color:#d8eeea; font-size:12px; line-height:1.5; }
.triangle-area-stage[data-view="match"] .triangle-area-view-purpose > span { background:#cdebe5; }
.triangle-area-stage[data-view="top"] .triangle-area-view-purpose > span { background:#dff0a9; }
.triangle-area-drag-hint { position:absolute; z-index:2; left:50%; bottom:14px; max-width:calc(100% - 24px); overflow:hidden; padding:8px 12px; border-radius:11px; color:#d9efeb; background:rgba(17,54,64,.82); font-size:12px; font-weight:800; text-overflow:ellipsis; transform:translateX(-50%); white-space:nowrap; pointer-events:none; }
.triangle-area-stage-status { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-height:86px; padding:12px 14px; background:#193c47; }
.triangle-area-stage-status > span { font-size:13px; line-height:1.55; }
.triangle-area-stage-status > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.triangle-area-stage-status button { min-height:44px; padding:0 11px; border:0; border-radius:11px; color:#244c59; background:#ffe078; font-size:13px; font-weight:900; cursor:pointer; }
.triangle-area-stage-status button:disabled { color:#8ba1a6; background:rgba(255,255,255,.09); cursor:not-allowed; }
.triangle-area-stage-status button:last-child { color:#e0efec; background:rgba(255,255,255,.1); }
.triangle-area-math-panel { display:flex; flex-direction:column; gap:11px; min-width:0; padding:18px; border:1px solid rgba(36,76,89,.09); border-radius:25px; background:#fff9ed; }
.triangle-area-controls { display:grid; gap:8px; padding:13px; border-radius:17px; background:#fff; }
.triangle-area-controls label { display:flex; justify-content:space-between; gap:12px; color:#26736f; font-size:13px; font-weight:850; }
.triangle-area-controls output { color:#244c59; font-variant-numeric:tabular-nums; }
.triangle-area-controls input { width:100%; min-height:37px; accent-color:#23847f; }
.triangle-area-whole-card { padding:14px; border-radius:17px; color:#315b63; background:#e1f2ed; }
.triangle-area-whole-card small { display:block; color:#397c77; font-size:12px; font-weight:850; }
.triangle-area-whole-card > b { display:block; margin-top:5px; color:#244c59; font-size:19px; }
.triangle-area-whole-card i { color:#dd6758; font-style:normal; }
.triangle-area-whole-card strong { color:#dd6758; font-size:28px; }
.triangle-area-whole-card p { margin:5px 0 0; font-size:12px; line-height:1.55; }
.triangle-area-guess-box { padding:13px; border-radius:17px; background:#fff0c8; }
.triangle-area-guess-box > small { display:block; color:#7d6638; font-size:12px; font-weight:850; }
.triangle-area-guess-box > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:9px; }
.triangle-area-guess-box button { padding:7px 5px; color:#5f543f; background:#fff; }
.triangle-area-guess-box > p { min-height:39px; margin:9px 0 0; color:#746749; font-size:12px; line-height:1.55; }
.triangle-area-guess-box > p.success { color:#39723b; }
.triangle-area-guess-box > p.wrong { color:#a44a42; }
.triangle-area-formula { position:relative; min-height:214px; padding:15px; overflow:hidden; border-radius:18px; color:#315b63; background:#e7f3ef; }
.triangle-area-formula-cover { position:absolute; z-index:2; inset:0; display:grid; place-content:center; place-items:center; gap:8px; color:#315f66; background:rgba(231,243,239,.98); border:2px dashed #62aaa3; transition:opacity .25s ease,visibility .25s ease; }
.triangle-area-formula-cover span { font-size:31px; }
.triangle-area-formula-cover b { font-size:13px; }
.triangle-area-formula.revealed .triangle-area-formula-cover { opacity:0; visibility:hidden; }
.triangle-area-formula > small { color:#397c77; font-size:12px; font-weight:850; }
.triangle-area-formula > div { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.triangle-area-formula > div span { font-size:13px; font-weight:850; }
.triangle-area-formula > div b { color:#244c59; font-size:17px; }
.triangle-area-formula > div i { color:#df6657; font-style:normal; }
.triangle-area-formula > div strong { color:#df6657; font-size:27px; }
.triangle-area-formula hr { margin:11px 0; border:0; border-top:1px dashed #96bdb7; }
.triangle-area-formula > p { margin:0; color:#315b63; font-size:13px; font-weight:850; }
.triangle-area-formula > strong { display:block; margin-top:3px; color:#e26959; font-size:23px; }
.triangle-area-formula > em { display:block; margin-top:7px; color:#5e7477; font-size:12px; font-style:normal; line-height:1.55; }

.triangle-area-concepts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; scroll-margin-top:84px; }
.triangle-area-concepts > article { min-width:0; padding:22px; border-radius:27px; }
.triangle-area-apex-card { background:#e5f4ef; }
.triangle-area-scale-card { background:#fff0cf; }
.triangle-area-reverse-card { grid-column:1 / -1; background:#fce6df; }
#triangle-area-apex-svg { display:block; width:100%; height:auto; margin:5px 0; }
#triangle-area-apex-svg .track { stroke:#8b75bd; stroke-width:8; stroke-linecap:round; stroke-dasharray:8 9; }
#triangle-area-apex-shape { fill:rgba(79,183,174,.48); stroke:#23847f; stroke-width:5; stroke-linejoin:round; }
#triangle-area-apex-height { stroke:#df6758; stroke-width:5; stroke-dasharray:9 8; }
#triangle-area-apex-angle { fill:none; stroke:#df6758; stroke-width:4; }
#triangle-area-apex-svg text { fill:#315b63; font-size:15px; font-weight:850; text-anchor:middle; }
.triangle-area-apex-card label { display:flex; justify-content:space-between; gap:12px; color:#26736f; font-size:13px; font-weight:850; }
.triangle-area-apex-card input { width:100%; min-height:42px; accent-color:#23847f; }
.triangle-area-apex-card p,.triangle-area-scale-card p { margin:6px 0 0; color:#526b70; font-size:13px; line-height:1.65; }
.triangle-area-apex-card p b,.triangle-area-scale-card p b { color:#da6456; }
.triangle-area-scale-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:16px; }
.triangle-area-scale-switch button { min-height:45px; border:2px solid transparent; border-radius:12px; color:#61563e; background:rgba(255,255,255,.75); font-size:13px; font-weight:850; cursor:pointer; }
.triangle-area-scale-switch button[aria-pressed="true"] { border-color:#23847f; color:#245b59; background:#fff; }
.triangle-area-scale-visual { display:grid; place-items:end center; min-height:170px; padding:18px; }
.triangle-area-scale-visual i { display:block; width:170px; height:110px; clip-path:polygon(0 100%,100% 100%,38% 0); background:linear-gradient(145deg,#f17863,#f5a36f); box-shadow:0 14px 24px rgba(122,73,57,.18); transition:width .25s ease,height .25s ease; }
.triangle-area-scale-visual.base i { width:300px; }
.triangle-area-scale-visual.both i { width:300px; height:155px; }
.triangle-area-reverse-card { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); align-items:center; gap:17px; }
.triangle-area-reverse-card .triangle-area-card-title { align-self:start; }
.triangle-area-reverse-steps { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.triangle-area-reverse-steps span { padding:9px 11px; border-radius:11px; color:#315b63; background:rgba(255,255,255,.76); font-size:13px; font-weight:900; }
.triangle-area-reverse-steps i { color:#d25f51; font-size:12px; font-style:normal; font-weight:850; }
.triangle-area-reverse-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; grid-column:2; }
.triangle-area-reverse-feedback { grid-column:2; min-height:55px; padding:11px 12px; border-radius:13px; color:#6b5d59; background:rgba(255,255,255,.7); font-size:13px; line-height:1.55; }
.triangle-area-reverse-feedback.success { color:#39723b; background:#eaf6d8; }
.triangle-area-reverse-feedback.wrong { color:#a44a42; background:#fff0ec; }

.triangle-area-life { background:radial-gradient(circle at 97% 0,rgba(80,185,175,.14),transparent 22rem),linear-gradient(145deg,#fffdf7,#e5f4ef); }
.triangle-area-life-translator { background:#244c59; }
.triangle-area-life-scenes { grid-template-columns:repeat(4,minmax(0,1fr)); }
.triangle-area-life-scenes button.active { border-color:#23847f; }
.triangle-area-life-visual { background:#e0f2ed; }
.triangle-area-life-shape { position:relative; width:min(76%,360px); aspect-ratio:1.45; filter:drop-shadow(0 16px 19px rgba(49,91,99,.18)); }
.triangle-area-life-shape > i { position:absolute; inset:0; display:block; clip-path:polygon(2% 96%,98% 96%,40% 3%); background:linear-gradient(145deg,#f49a6e,#ef6b5d); }
.triangle-area-life-shape > i::after { content:""; position:absolute; left:40%; top:3%; bottom:4%; border-left:4px dashed #fff4ca; }
.triangle-area-life-shape > span { position:absolute; z-index:2; left:43%; top:48%; font-size:39px; transform:translate(-50%,-50%); }
.triangle-area-life-shape > b { position:absolute; z-index:2; left:50%; bottom:-30px; color:#315b63; font-size:13px; transform:translateX(-50%); white-space:nowrap; }
.triangle-area-life-shape > em { position:absolute; z-index:2; left:42%; top:48%; padding:5px 7px; border-radius:8px; color:#244c59; background:#fff7d3; font-size:12px; font-style:normal; font-weight:850; transform:translate(8px,-50%); white-space:nowrap; }
.triangle-area-quiz-shell { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; }
.triangle-area-quiz-stars { display:grid; align-content:center; gap:12px; padding:17px; border-radius:22px; background:#244c59; }
.triangle-area-quiz-stars i { display:grid; place-items:center; width:56px; height:56px; border-radius:17px; color:#66868c; background:rgba(255,255,255,.1); font-size:30px; font-style:normal; transition:transform .3s ease,color .3s ease,background .3s ease; }
.triangle-area-quiz-stars i.earned { color:#ffe06c; background:rgba(255,255,255,.18); transform:rotate(-7deg) scale(1.08); }
.triangle-area-quiz-finished { background:linear-gradient(145deg,#244c59,#29837c); }
.triangle-area-home-mission > span { background:#dff2ed; }
.triangle-area-home-mission > b { color:#276963; background:#e5f3cf; }
.triangle-area-lesson .game-canvas-hint::before { content:"完成3D模型、选对答案并主动提交，缺一步都不会过关"; }

@media (max-width: 1080px) {
  .perimeter-hero { grid-template-columns: minmax(0,.9fr) minmax(390px,1.1fr); padding: 26px; }
  .perimeter-discover-grid,.perimeter-lab-grid { grid-template-columns: 1fr; }
  .perimeter-board { max-width: 820px; width: 100%; margin: 0 auto; }
  .perimeter-math-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .perimeter-math-panel .perimeter-controls,.perimeter-math-panel .symbol-secret { grid-column: 1 / -1; }
  .perimeter-life-toolbar { grid-template-columns: 1fr; }
  .perimeter-life-badge { justify-self: start; min-height: 48px; }
  .square-lab-grid { grid-template-columns: 1fr; }
  .square-board { max-width: 820px; width: 100%; margin: 0 auto; }
  .square-math-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .square-math-panel .square-edge-control,.square-math-panel .symbol-secret { grid-column: 1 / -1; }
}

@container lesson-page (max-width: 850px) {
  .perimeter-hero { grid-template-columns: 1fr; }
  .perimeter-hero-copy { padding-inline: 4px; }
  .perimeter-hero-art { width: 100%; max-width: 720px; margin-inline: auto; transform: none; }
}

@media (max-width: 820px) {
  .perimeter-hero { grid-template-columns: 1fr; }
  .perimeter-hero-copy { padding-inline: 4px; }
  .perimeter-hero-art { width: 100%; max-width: 720px; margin-inline: auto; transform: none; }
  .perimeter-idea-row { grid-template-columns: 1fr; }
  .perimeter-idea-row article { min-height: 0; }
  .perimeter-life-scenes { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .perimeter-life-card { grid-template-columns: 1fr; }
  .perimeter-life-visual { min-height: 310px; }
  .perimeter-quiz-shell { grid-template-columns: 1fr; }
  .quiz-carrots { grid-template-columns: repeat(3,56px); justify-content: center; }
  .quiz-options { grid-template-columns: 1fr; }
  .perimeter-home-mission { grid-template-columns: 58px minmax(0,1fr); }
  .perimeter-home-mission > b { grid-column: 2; justify-self: start; }
  .square-concept-row { grid-template-columns: 1fr; }
  .square-concept-row > article { min-height: 0; }
  .square-life-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .square-quiz-shell { grid-template-columns: 1fr; }
  .square-quiz-stars { grid-template-columns: repeat(3,56px); justify-content: center; }
}

@media (max-width: 680px) {
  .perimeter-hero { min-height: 0; padding: 20px 16px 16px; border-radius: 26px; }
  .perimeter-kicker { font-size: 12px; }
  .perimeter-hero h1 span { font-size: clamp(37px,11.5vw,50px); }
  .perimeter-hero h1 em { margin-top: 8px; font-size: 24px; }
  .perimeter-hero-copy > p { margin-top: 15px; font-size: 15px; line-height: 1.75; }
  .perimeter-goals { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 17px; }
  .perimeter-goals span { width: 100%; }
  .perimeter-start-button { width: 100%; justify-content: space-between; }
  .perimeter-hero-art { padding: 7px; border-radius: 21px; }
  .perimeter-hero-art img { border-radius: 16px; }
  .perimeter-hero-art figcaption { position: static; display: grid; margin-top: 7px; padding: 10px 11px; border-radius: 13px; }
  .perimeter-hero-art figcaption b { text-align: left; line-height: 1.5; }
  .perimeter-route-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px; overflow: visible; }
  .perimeter-route-nav > span { display: none; }
  .perimeter-route-nav button { min-width: 0; min-height: 44px; padding-inline: 8px; }
  .perimeter-route-nav button:last-child { grid-column: 1 / -1; }
  .perimeter-section { margin-top: 17px; padding: 17px; border-radius: 25px; scroll-margin-top: 74px; }
  .perimeter-section-heading { margin-bottom: 17px; }
  .perimeter-section-heading h2 { font-size: 28px; }
  .perimeter-section-heading p { font-size: 14px; }
  .boundary-demo { min-height: 265px; padding: 23px 17px; }
  .boundary-garden { border-width: 9px; }
  .boundary-garden > span { font-size: 26px; }
  .boundary-rabbit { font-size: 34px; }
  .boundary-demo > b { margin-top: 18px; font-size: 14px; }
  .boundary-question { padding: 18px; }
  .boundary-question h3 { font-size: 23px; }
  .perimeter-lab { padding-inline: 12px; }
  #perimeter-svg { min-height: 0; }
  .perimeter-board-status { display: grid; min-height: 0; padding: 13px; }
  .perimeter-board-status button { width: 100%; }
  .perimeter-math-panel { display: flex; padding: 13px; }
  .half-lap-formula { grid-template-columns: 1fr; }
  .formula-arrow { min-height: 30px; }
  .perimeter-idea-row { gap: 12px; margin-top: 15px; }
  .perimeter-idea-row article { grid-template-columns: 46px minmax(0,1fr); padding: 19px 16px; border-radius: 23px; }
  .perimeter-idea-row article > span { width: 45px; height: 45px; font-size: 23px; }
  .perimeter-idea-row h2 { font-size: 21px; }
  .perimeter-life-translator { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .perimeter-life-translator > b { grid-column: 1 / -1; }
  .perimeter-life-translator > span { min-height: 46px; }
  .perimeter-life-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .perimeter-life-scenes button:last-child { grid-column: 1 / -1; }
  .perimeter-life-badge { width: 100%; justify-content: center; }
  .perimeter-life-visual { min-height: 255px; padding: 38px 18px 20px; }
  .perimeter-life-rectangle { width: min(72%,310px); }
  .perimeter-life-visual > small { margin-top: 28px; }
  .perimeter-life-copy { padding: 20px 15px; }
  .perimeter-life-copy h3 { font-size: 22px; }
  .perimeter-life-options { grid-template-columns: 1fr; }
  .perimeter-life-options button { min-height: 50px; }
  .perimeter-life-solution ol { grid-template-columns: 1fr; }
  .pixel-base-screen { min-height: 220px; padding: 18px; }
  .square-boundary-demo { min-height: 285px; padding: 24px 17px; }
  .square-gift-outline { width: min(66%,250px); border-width: 11px; }
  .square-gift-icon { width: 64px; height: 64px; font-size: 37px; }
  .square-boundary-demo > b { margin-top: 25px; font-size: 14px; }
  .square-lab { padding-inline: 12px; }
  #square-svg { min-height: 0; }
  .square-side-label { font-size: 29px; stroke-width: 8px; }
  .square-start-flag { font-size: 38px; }
  .square-walker { font-size: 43px; }
  .square-math-panel { display: flex; padding: 13px; }
  .square-formula-bridge { grid-template-columns: 1fr; }
  .square-concept-row { gap: 12px; margin-top: 15px; }
  .square-concept-row > article { padding: 19px 16px; border-radius: 23px; }
  .square-corner-card { grid-template-columns: 46px minmax(0,1fr); }
  .square-corner-card > span,.square-measure-head > span { width: 45px; height: 45px; font-size: 23px; }
  .square-measure-head { grid-template-columns: 46px minmax(0,1fr); }
  .square-concept-row h2 { font-size: 21px; }
  .square-measure-demo { grid-template-columns: 96px minmax(0,1fr); }
  .square-measure-demo > div { width: 88px; border-width: 7px; }
  .square-life-scenes button:last-child { grid-column: auto; }
  .square-life-shape { width: min(64%,215px); }
  .square-quiz-stars { grid-template-columns: repeat(3,49px); gap: 9px; padding: 12px; }
  .square-quiz-stars i { width: 49px; height: 49px; font-size: 26px; }
  .quiz-carrots { grid-template-columns: repeat(3,49px); gap: 9px; padding: 12px; }
  .quiz-carrots i { width: 49px; height: 49px; font-size: 26px; }
  .quiz-question { min-height: 0; padding: 18px 14px 66px; }
  .quiz-question h3 { font-size: 21px; }
  .quiz-next { position: absolute; right: 14px; bottom: 13px; }
  .perimeter-home-mission { grid-template-columns: 46px minmax(0,1fr); padding: 17px; }
  .perimeter-home-mission > span { width: 46px; height: 46px; font-size: 23px; }
  .perimeter-home-mission h2 { font-size: 19px; }
  .perimeter-lesson .lesson-game { margin-top: 17px; padding: 18px 13px; border-radius: 25px; scroll-margin-top: 74px; }
  .perimeter-lesson .game-intro { align-items: flex-start; }
  .perimeter-lesson .game-identity { min-width: 0; }
  .perimeter-lesson .game-playfield { padding: 7px; }
  .perimeter-lesson .game-canvas-hint { padding-inline: 2px; }
  .square-perimeter-lesson .game-coach { padding: 14px; }
  .square-perimeter-lesson .game-life-picture { display: none; }
  .square-perimeter-lesson .game-life-mission { margin-top: 12px; }
  .square-perimeter-lesson .game-canvas-hint { font-size: 12px; }
}

@media (max-width: 390px) {
  .four-side-equation span { width: 34px; height: 34px; font-size: 16px; }
  .four-side-equation b { font-size: 14px; }
  .formula-cheer { grid-template-columns: 1fr; }
  .formula-cheer > span { display: none; }
  .perimeter-life-rectangle { width: min(68%,250px); border-width: 9px; }
  .life-width-label { right: -48px; }
  .perimeter-life-question { grid-template-columns: 1fr; }
  .perimeter-base-equation span { padding-inline: 7px; }
  .square-four-equation span { width: 34px; height: 34px; font-size: 16px; }
  .square-four-equation b { font-size: 14px; }
  .square-formula-cheer { grid-template-columns: 1fr; }
  .square-formula-cheer > span { display: none; }
  .square-measure-demo { grid-template-columns: 1fr; }
  .square-measure-demo > div { width: 110px; }
  .perimeter-lesson .game-intro { display: grid; }
  .perimeter-lesson .game-identity { width: 100%; }
}

@media (max-width:1080px) {
  .area-lab-grid { grid-template-columns:1fr; }
  .area-board { width:100%; max-width:820px; margin-inline:auto; }
  .area-math-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .area-math-panel .area-size-controls,.area-math-panel .area-reverse-tip { grid-column:1 / -1; }
  .area-concept-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .area-unit-card { grid-column:1 / -1; min-height:0; }
}

@media (max-width:820px) {
  .area-concept-grid { grid-template-columns:1fr; }
  .area-concept-grid > article,.area-unit-card { grid-column:auto; min-height:0; }
  .area-life-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .area-quiz-shell { grid-template-columns:1fr; }
  .area-quiz-stars { grid-template-columns:repeat(3,56px); justify-content:center; }
}

@media (max-width:680px) {
  .area-boundary-demo { min-height:275px; padding:23px 17px; }
  .area-discover-shape { width:min(88%,330px); padding:9px; gap:3px; border-width:4px; }
  .area-roller { right:-16px; top:-23px; font-size:31px; }
  .area-boundary-demo > strong { margin-top:22px; font-size:14px; }
  .area-lab { padding-inline:12px; }
  #area-svg { min-height:0; }
  .area-dimension-label { font-size:27px; stroke-width:8px; }
  #area-unit-key text { font-size:19px; }
  .area-board-status > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .area-board-status button { width:100%; padding-inline:7px; }
  .area-math-panel { display:flex; padding:13px; }
  .area-count-story { grid-template-columns:1fr; }
  .area-count-story > i { min-height:17px; text-align:center; transform:rotate(90deg); }
  .area-formula-bridge { grid-template-columns:1fr; }
  .area-concept-grid { gap:12px; margin-top:15px; }
  .area-concept-grid > article { padding:19px 16px; border-radius:23px; }
  .area-unit-card { grid-template-columns:66px minmax(0,1fr); }
  .area-unit-card > div { width:64px; }
  .area-unit-card > div span { font-size:24px; }
  .area-concept-grid h2 { font-size:21px; }
  .area-card-heading { grid-template-columns:46px minmax(0,1fr); }
  .area-card-heading > span { width:45px; height:45px; font-size:23px; }
  .area-growth-switch { grid-template-columns:1fr; }
  .area-measure-demo { grid-template-columns:112px minmax(0,1fr); }
  .area-measure-demo > div { width:108px; }
  .area-life-shape { width:min(70%,280px); }
  .area-quiz-stars { grid-template-columns:repeat(3,49px); gap:9px; padding:12px; }
  .area-quiz-stars i { width:49px; height:49px; font-size:26px; }
  .rectangle-area-lesson .game-coach { padding:14px; }
  .rectangle-area-lesson .game-life-picture { display:none; }
  .rectangle-area-lesson .game-life-mission { margin-top:12px; }
  .rectangle-area-lesson .game-canvas-hint { font-size:12px; }
}

@media (max-width:390px) {
  .area-measure-switch { grid-template-columns:1fr; }
  .area-measure-demo { grid-template-columns:1fr; }
  .area-measure-demo > div { width:132px; }
  .area-unit-card { grid-template-columns:1fr; }
  .area-life-grid { width:min(86%,290px); }
}

@media (max-width:1080px) {
  .square-area-lab-grid { grid-template-columns:1fr; }
  .square-area-board { width:100%; max-width:820px; margin-inline:auto; }
  .square-area-math-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .square-area-side-control,.square-area-formula-wrap,.square-area-square-secret { grid-column:1 / -1; }
}

@media (max-width:820px) {
  .square-area-concept-grid { grid-template-columns:1fr; }
  .square-area-concept-grid > article { min-height:0; }
  .square-area-life-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .square-area-quiz-shell { grid-template-columns:1fr; }
  .square-area-quiz-stars { grid-template-columns:repeat(3,56px); justify-content:center; }
}

@media (max-width:680px) {
  .square-area-boundary-demo { min-height:285px; padding:23px 17px; }
  .square-area-discover-shape { width:min(76%,250px); padding:9px; gap:3px; border-width:5px; }
  .square-area-discover-shape > span { right:-23px; bottom:-24px; font-size:36px; }
  .square-area-boundary-demo > strong { margin-top:23px; font-size:14px; }
  .square-area-lab { padding-inline:12px; }
  #square-area-svg { min-height:0; }
  .square-area-dimension-label { font-size:27px; stroke-width:8px; }
  #square-area-unit-key text { font-size:19px; }
  .square-area-board-status > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .square-area-board-status button { width:100%; padding-inline:6px; }
  .square-area-math-panel { display:flex; padding:13px; }
  .square-area-count-story { grid-template-columns:1fr; }
  .square-area-count-story > i { min-height:17px; text-align:center; transform:rotate(90deg); }
  #square-area-guess-options { grid-template-columns:1fr; }
  .square-area-formula-bridge { grid-template-columns:1fr; }
  .square-area-concept-grid { gap:12px; margin-top:15px; }
  .square-area-concept-grid > article { padding:19px 16px; border-radius:23px; }
  .square-area-unit-card { grid-template-columns:66px minmax(0,1fr); }
  .square-area-unit-card > div { width:64px; }
  .square-area-unit-card > div span { font-size:24px; }
  .square-area-concept-grid h2 { font-size:21px; }
  .square-area-card-heading { grid-template-columns:46px minmax(0,1fr); }
  .square-area-card-heading > span { width:45px; height:45px; font-size:23px; }
  .square-area-growth-switch { grid-template-columns:1fr; }
  .square-area-measure-demo { grid-template-columns:112px minmax(0,1fr); }
  .square-area-measure-demo > div { width:106px; }
  .square-area-reverse-options { grid-template-columns:1fr; }
  .square-area-life-grid { width:min(72%,260px); }
  .square-area-quiz-stars { grid-template-columns:repeat(3,49px); gap:9px; padding:12px; }
  .square-area-quiz-stars i { width:49px; height:49px; font-size:26px; }
  .square-area-lesson .game-coach { padding:14px; }
  .square-area-lesson .game-life-picture { display:none; }
  .square-area-lesson .game-life-mission { margin-top:12px; }
  .square-area-lesson .game-canvas-hint { font-size:12px; }
}

@media (max-width:390px) {
  .square-area-measure-switch { grid-template-columns:1fr; }
  .square-area-measure-demo { grid-template-columns:1fr; }
  .square-area-measure-demo > div { width:126px; }
  .square-area-unit-card { grid-template-columns:1fr; }
  .square-area-life-grid { width:min(82%,240px); }
  .square-area-square-secret { grid-template-columns:46px minmax(0,1fr); }
  .square-area-square-secret > span { width:45px; height:45px; font-size:20px; }
}

@media (max-width:1080px) {
  .triangle-area-lab-grid { grid-template-columns:1fr; }
  .triangle-area-stage-wrap { width:100%; max-width:850px; margin-inline:auto; }
  .triangle-area-math-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .triangle-area-controls,.triangle-area-formula { grid-column:1 / -1; }
}

@media (max-width:820px) {
  .triangle-area-discover-grid,.triangle-area-concepts { grid-template-columns:1fr; }
  .triangle-area-reverse-card { grid-column:auto; grid-template-columns:1fr; }
  .triangle-area-reverse-options,.triangle-area-reverse-feedback { grid-column:auto; }
  .triangle-area-life-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .triangle-area-quiz-shell { grid-template-columns:1fr; }
  .triangle-area-quiz-stars { grid-template-columns:repeat(3,56px); justify-content:center; }
}

@media (max-width:680px) {
  .triangle-area-discover-grid { gap:12px; }
  .triangle-area-surface-card,.triangle-area-height-card { padding:17px 14px; border-radius:21px; }
  .triangle-area-surface-demo { width:min(76%,270px); }
  .triangle-area-height-options { grid-template-columns:1fr; }
  .triangle-area-height-options button { display:grid; grid-template-columns:31px minmax(0,1fr); align-items:center; padding:7px 10px; text-align:left; }
  .triangle-area-height-options button i { margin:0; }
  .triangle-area-one-line { grid-template-columns:1fr; padding:14px; }
  .triangle-area-one-line > b { justify-self:start; }
  .triangle-area-lab { padding-inline:12px; }
  .triangle-area-view-switch { gap:4px; padding:7px; }
  .triangle-area-view-switch button { flex-direction:column; gap:3px; min-height:56px; padding:4px 2px; font-size:13px; }
  .triangle-area-view-switch button span { font-size:17px; }
  .triangle-area-stage { min-height:350px; }
  .triangle-area-view-purpose { top:8px; left:8px; grid-template-columns:37px minmax(0,1fr); width:calc(100% - 16px); padding:8px 9px; }
  .triangle-area-view-purpose > span { width:35px; height:35px; font-size:18px; }
  .triangle-area-view-purpose b { font-size:12px; }
  .triangle-area-view-purpose small { font-size:12px; line-height:1.4; }
  .triangle-area-drag-hint { bottom:8px; max-width:90%; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
  .triangle-area-stage-status { grid-template-columns:1fr; padding:12px; }
  .triangle-area-stage-status > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .triangle-area-stage-status button { width:100%; padding:4px; }
  .triangle-area-math-panel { display:flex; padding:13px; }
  .triangle-area-guess-box > div { grid-template-columns:1fr; }
  .triangle-area-guess-box button { display:grid; grid-template-columns:31px minmax(0,1fr); align-items:center; text-align:left; }
  .triangle-area-guess-box button i { margin:0; }
  .triangle-area-formula { min-height:230px; }
  .triangle-area-concepts { gap:12px; margin-top:15px; }
  .triangle-area-concepts > article { padding:18px 14px; border-radius:23px; }
  .triangle-area-card-title { grid-template-columns:46px minmax(0,1fr); }
  .triangle-area-card-title > span { width:45px; height:45px; font-size:23px; }
  .triangle-area-card-title h2,.triangle-area-card-title h3 { font-size:20px; }
  .triangle-area-scale-switch { grid-template-columns:1fr; }
  .triangle-area-scale-visual.base i,.triangle-area-scale-visual.both i { width:min(100%,280px); }
  .triangle-area-reverse-options { grid-template-columns:1fr; }
  .triangle-area-life-shape { width:min(72%,275px); }
  .triangle-area-quiz-stars { grid-template-columns:repeat(3,49px); gap:9px; padding:12px; }
  .triangle-area-quiz-stars i { width:49px; height:49px; font-size:26px; }
  .triangle-area-lesson .game-coach { padding:14px; }
  .triangle-area-lesson .game-life-picture { display:none; }
  .triangle-area-lesson .game-life-mission { margin-top:12px; }
  .triangle-area-lesson .game-canvas-hint { font-size:12px; }
}

@media (max-width:390px) {
  .triangle-area-view-switch { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .triangle-area-view-switch button { min-height:54px; font-size:13px; }
  .triangle-area-stage { min-height:315px; }
  .triangle-area-stage-status > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .triangle-area-scale-visual i { width:145px; }
  .triangle-area-reverse-steps { display:grid; grid-template-columns:1fr; }
  .triangle-area-life-shape { width:min(78%,245px); }
}

/* Parallelogram area · Parallel Island engineering lesson */
.parallelogram-area-lesson { --para-teal:#23847f; --para-dark:#244c59; --para-coral:#ef745e; --para-yellow:#f2cc61; --para-mint:#e4f4ef; }
.parallelogram-area-hero { background:linear-gradient(145deg,#edf8f3,#fff4d4); }
.parallelogram-area-hero .perimeter-kicker { color:#247b73; }
.parallelogram-area-hero .perimeter-kicker span { background:rgba(35,132,127,.12); }
.parallelogram-area-hero h1 span { color:#173f3b; white-space:normal; }
.parallelogram-area-hero h1 em { color:#2c8a7e; }
.parallelogram-area-hero .perimeter-hero-copy > p { color:#4b6867; }
.parallelogram-area-hero .perimeter-hero-copy > p strong { color:#d65f51; }
.parallelogram-area-hero .perimeter-goals span { border-color:rgba(35,104,99,.13); color:#315d59; background:rgba(255,255,255,.66); }
.parallelogram-area-hero-visual { position:relative; overflow:hidden; aspect-ratio:3/2; border-radius:21px; }
.parallelogram-area-hero .perimeter-hero-art img { width:100%; height:100%; aspect-ratio:3/2; border-radius:inherit; object-fit:cover; }
.parallelogram-area-hero-diagram { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.para-hero-remainder-side { fill:#166e67; stroke:#155b56; stroke-width:7; stroke-linejoin:round; }
.para-hero-remainder { fill:url(#para-hero-teal); stroke:#f27b68; stroke-width:13; stroke-linejoin:round; }
.para-hero-source,.para-hero-target { fill:rgba(255,255,255,.08); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20 15; }
.para-hero-source { stroke:#fff7d1; }
.para-hero-target { stroke:#cde96f; }
.para-hero-base { stroke:#f27b68; stroke-width:14; stroke-linecap:round; }
.para-hero-height { stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-dasharray:18 13; }
.para-hero-right-angle { fill:none; stroke:#fff; stroke-width:10; stroke-linejoin:round; }
.para-hero-vertex,.para-hero-foot { fill:#d5ed72; stroke:#245d57; stroke-width:5; }
.para-hero-motion { fill:none; stroke:#fff7d1; stroke-width:10; stroke-linecap:round; stroke-dasharray:17 14; marker-end:url(#para-hero-arrow); }
.para-hero-piece-side { fill:#a97c26; stroke:#835f1d; stroke-width:6; stroke-linejoin:round; }
.para-hero-piece { fill:url(#para-hero-yellow); stroke:#f27b68; stroke-width:12; stroke-linejoin:round; }
.para-hero-moving-piece { transform-box:view-box; transform-origin:0 0; animation:para-hero-transfer 6.2s cubic-bezier(.55,.08,.34,1) infinite; }
@keyframes para-hero-transfer {
  0%,14% { transform:translate(0,0); }
  42%,58% { transform:translate(430px,-260px); }
  88%,100% { transform:translate(420px,0); }
}
.parallelogram-area-route-nav button { white-space:nowrap; }
.parallelogram-area-card-title { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; }
.parallelogram-area-card-title > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; color:white; background:var(--para-teal); font-size:25px; }
.parallelogram-area-card-title small { color:var(--para-teal); font-size:12px; font-weight:850; letter-spacing:.05em; }
.parallelogram-area-card-title h3 { margin:4px 0 0; color:var(--para-dark); font:700 22px/1.3 Georgia,"Songti SC",serif; }

.parallelogram-area-discover { background:linear-gradient(150deg,#fffdf6,#edf7f3); }
.parallelogram-area-definition-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:16px; }
.parallelogram-area-rail-card,.parallelogram-area-definition-book { min-width:0; padding:22px; border-radius:27px; }
.parallelogram-area-rail-card { background:#fff; box-shadow:inset 0 0 0 1px rgba(36,76,89,.08); }
.parallelogram-area-definition-book { background:#fff1cc; }
#parallelogram-area-definition-svg { display:block; width:100%; height:auto; margin:8px 0; overflow:visible; }
#parallelogram-area-definition-svg polygon { fill:#69bdb0; stroke:#267a75; stroke-width:5; stroke-linejoin:round; }
#parallelogram-area-definition-svg g line { fill:none; stroke-width:8; stroke-linecap:round; stroke-dasharray:14 10; opacity:.12; transition:opacity .25s ease,stroke .25s ease; }
#parallelogram-area-definition-svg .pair-horizontal line { stroke:#247d9a; }
#parallelogram-area-definition-svg .pair-slanted line { stroke:#e16d5b; }
#parallelogram-area-definition-svg g text { fill:var(--para-dark); font-size:15px; font-weight:900; text-anchor:middle; opacity:.22; }
#parallelogram-area-definition-svg[data-horizontal="true"] .pair-horizontal line,#parallelogram-area-definition-svg[data-horizontal="true"] .pair-horizontal text,#parallelogram-area-definition-svg[data-slanted="true"] .pair-slanted line,#parallelogram-area-definition-svg[data-slanted="true"] .pair-slanted text { opacity:1; }
#parallelogram-area-definition-svg .parallel-stamp { fill:#fff; font-size:25px; font-weight:950; text-anchor:middle; paint-order:stroke; stroke:#23847f; stroke-width:12px; opacity:0; transform-origin:center; transform:scale(.6); transition:opacity .25s ease,transform .25s ease; }
#parallelogram-area-definition-svg.complete .parallel-stamp { opacity:1; transform:scale(1); }
.parallelogram-area-pair-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.parallelogram-area-pair-choices button,.parallelogram-area-height-options button,.parallelogram-area-family-options button,.parallelogram-area-reverse-options button { min-height:48px; border:2px solid transparent; border-radius:13px; color:#315b63; background:#edf7f4; font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-pair-choices button.correct,.parallelogram-area-height-options button.correct,.parallelogram-area-family-options button.correct,.parallelogram-area-reverse-options button.correct { border-color:#67a945; color:#39723b; background:#eaf6d8; }
.parallelogram-area-pair-choices button.wrong,.parallelogram-area-height-options button.wrong,.parallelogram-area-family-options button.wrong,.parallelogram-area-reverse-options button.wrong { border-color:#dc6557; color:#a44a42; background:#fff0ec; }
.parallelogram-area-definition-feedback,.parallelogram-area-height-feedback { min-height:56px; margin-top:10px; padding:11px 12px; border-radius:13px; color:#536d72; background:#edf5f2; font-size:13px; line-height:1.55; }
.parallelogram-area-definition-feedback.success,.parallelogram-area-height-feedback.success { color:#39723b; background:#eaf6d8; }
.parallelogram-area-definition-feedback.wrong,.parallelogram-area-height-feedback.wrong { color:#a44a42; background:#fff0ec; }
.parallelogram-area-definition-book ol { display:grid; gap:9px; margin:18px 0; padding:0; list-style:none; }
.parallelogram-area-definition-book li { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border-radius:13px; background:rgba(255,255,255,.72); }
.parallelogram-area-definition-book li b { color:#d66151; font-size:14px; }
.parallelogram-area-definition-book li span { color:#596c6e; font-size:13px; line-height:1.55; }
.parallelogram-area-definition-book blockquote { margin:0; padding:15px; border:0; border-radius:15px; color:#315b63; background:#dff1eb; font-size:14px; line-height:1.7; }
.parallelogram-area-family-note { display:grid; grid-template-columns:40px minmax(0,1fr); gap:9px; margin-top:12px; padding:12px; border-radius:14px; color:#6f633f; background:#ffe39a; }
.parallelogram-area-family-note > span { font-size:26px; }
.parallelogram-area-family-note p { margin:0; font-size:13px; line-height:1.6; }

.parallelogram-area-gallery { background:#fff7e2; }
.parallelogram-area-gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.parallelogram-area-gallery-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; flex:1; }
.parallelogram-area-gallery-tabs button { position:relative; display:grid; place-items:center; gap:4px; min-height:77px; padding:8px; border:2px solid transparent; border-radius:15px; color:#536d72; background:#fff; font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-gallery-tabs button span { font-size:27px; }
.parallelogram-area-gallery-tabs button.active,.parallelogram-area-gallery-tabs button[aria-pressed="true"] { border-color:var(--para-teal); color:#236d69; background:#e7f5f0; }
.parallelogram-area-gallery-tabs button.solved::after { position:absolute; top:5px; right:6px; content:'✓'; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; background:#68a946; font-size:12px; }
.parallelogram-area-gallery-card { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); align-items:center; gap:20px; padding:20px; border-radius:25px; background:#fff; box-shadow:0 17px 35px rgba(119,93,50,.1); }
.parallelogram-area-gallery-visual { display:grid; place-items:center; min-height:290px; padding:20px; border-radius:20px; background:linear-gradient(145deg,#dff3ed,#f8edcf); }
.parallelogram-area-gallery-shape { position:relative; display:grid; place-items:center; width:min(90%,330px); aspect-ratio:1.65; }
.parallelogram-area-gallery-shape::before { position:absolute; inset:18% 10%; content:''; clip-path:polygon(18% 0,100% 0,82% 100%,0 100%); background:linear-gradient(145deg,#58b8aa,#2b8d84); box-shadow:0 13px 24px rgba(41,106,96,.25); }
.parallelogram-area-gallery-shape::after { position:absolute; inset:12% 4%; content:''; border-top:4px dashed #247d9a; border-bottom:4px dashed #247d9a; transform:skewX(-13deg); opacity:.8; }
.parallelogram-area-gallery-shape > span { position:relative; z-index:2; font-size:43px; filter:drop-shadow(0 4px 4px rgba(42,75,72,.15)); }
.parallelogram-area-gallery-shape i { position:absolute; z-index:1; display:none; }
.parallelogram-area-gallery-shape.has-svg { width:min(96%,390px); aspect-ratio:5/3; }
.parallelogram-area-gallery-shape.has-svg::before,.parallelogram-area-gallery-shape.has-svg::after { display:none; }
.parallelogram-area-gallery-svg { display:block; width:100%; height:100%; overflow:visible; }
.parallelogram-area-gallery-svg .gallery-object { fill:#58b8aa; stroke:#247d75; stroke-width:5; stroke-linejoin:round; }
.parallelogram-area-gallery-svg .gate-object { fill:#f1c85d; stroke:#9b7420; }
.parallelogram-area-gallery-svg .roof-object { fill:#ed8065; stroke:#a64b3e; }
.parallelogram-area-gallery-svg .rectangle-object { fill:#62b8aa; stroke:#247d75; }
.parallelogram-area-gallery-svg .ribbon-strip { stroke-width:3; stroke-linejoin:round; opacity:.78; }
.parallelogram-area-gallery-svg .ribbon-strip-a { fill:#ef765f; stroke:#b54e3e; }
.parallelogram-area-gallery-svg .ribbon-strip-b { fill:#58b8aa; stroke:#247d75; }
.parallelogram-area-gallery-svg .ribbon-overlap { fill:#8d75bc; stroke:#604a8b; }
.parallelogram-area-gallery-svg .gallery-scene-icon { fill:#fff; stroke:rgba(36,76,89,.28); stroke-width:8; paint-order:stroke; font-size:42px; text-anchor:middle; dominant-baseline:middle; }
.parallelogram-area-gallery-svg .gallery-evidence { opacity:0; transition:opacity .25s ease; }
.parallelogram-area-gallery-visual.evidence-on .gallery-evidence { opacity:1; }
.parallelogram-area-gallery-svg .gallery-evidence line { fill:none; stroke-width:9; stroke-linecap:round; stroke-dasharray:14 10; }
.parallelogram-area-gallery-svg .pair-one { stroke:#247d9a; }
.parallelogram-area-gallery-svg .pair-two { stroke:#f0a63b; }
.parallelogram-area-gallery-svg .not-parallel { stroke:#dc6557; }
.parallelogram-area-gallery-svg .meet-point { fill:#dc6557; stroke:#fff; stroke-width:3; }
.scene-gate .parallelogram-area-gallery-shape::before { inset:12% 22%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:repeating-linear-gradient(60deg,#f2c85f 0 12px,#2b8d84 12px 24px); }
.scene-ribbon .parallelogram-area-gallery-shape::before { inset:26% 7%; clip-path:none; background:#ef765f; transform:rotate(16deg); }
.scene-ribbon .parallelogram-area-gallery-shape i { display:block; width:84%; height:36%; background:#59b8ad; transform:rotate(-17deg); }
.scene-ribbon .parallelogram-area-gallery-shape::after { inset:28% 18%; border:3px dashed #fff; transform:none; }
.scene-roof .parallelogram-area-gallery-shape::before { inset:15% 12% 18%; clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); background:#ed8166; }
.scene-roof .parallelogram-area-gallery-shape::after { border-top:4px dashed #247d9a; border-bottom:4px dashed #247d9a; transform:none; }
.scene-rectangle .parallelogram-area-gallery-shape::before { inset:16% 12%; clip-path:none; border-radius:5px; background:#62b8aa; }
.scene-rectangle .parallelogram-area-gallery-shape::after { transform:none; }
.parallelogram-area-gallery-visual > small { color:#5b7475; font-size:12px; font-weight:800; text-align:center; }
.parallelogram-area-gallery-copy h3 { margin:8px 0; color:var(--para-dark); font:700 25px/1.3 Georgia,"Songti SC",serif; }
.parallelogram-area-gallery-copy > p { margin:0; color:#586f72; font-size:14px; line-height:1.75; }
.parallelogram-area-gallery-question { margin-top:16px; padding:14px; border-radius:16px; background:#fff0c9; }
.parallelogram-area-gallery-question > b { color:#6d603e; font-size:13px; }
.parallelogram-area-gallery-question > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:9px; }
.parallelogram-area-gallery-question button { min-height:46px; border:2px solid transparent; border-radius:12px; color:#315b63; background:#fff; font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-gallery-question button.correct { border-color:#67a945; color:#39723b; background:#eaf6d8; }
.parallelogram-area-gallery-question button.wrong { border-color:#dc6557; color:#a44a42; background:#fff0ec; }
.parallelogram-area-gallery-feedback { min-height:56px; margin-top:10px; padding:11px 12px; border-radius:13px; color:#536d72; background:#edf5f2; font-size:13px; line-height:1.55; }
.parallelogram-area-gallery-feedback.success { color:#39723b; background:#eaf6d8; }
.parallelogram-area-gallery-feedback.wrong { color:#a44a42; background:#fff0ec; }

.parallelogram-area-height { background:#edf8f4; }
.parallelogram-area-height-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); gap:16px; }
.parallelogram-area-height-card,.parallelogram-area-height-rules { padding:22px; border-radius:27px; }
.parallelogram-area-height-card { background:#fff; }
.parallelogram-area-height-rules { background:#fff0ca; }
#parallelogram-area-height-svg { display:block; width:100%; height:auto; margin:7px 0; }
#parallelogram-area-height-svg polygon { fill:#ffe1a7; stroke:#e2735d; stroke-width:5; stroke-linejoin:round; }
#parallelogram-area-height-svg .base { stroke:#247d9a; stroke-width:10; stroke-linecap:round; }
#parallelogram-area-height-svg .candidate { stroke:#8c999d; stroke-width:5; stroke-linecap:round; stroke-dasharray:10 8; }
#parallelogram-area-height-svg .candidate-b { stroke:#d96b59; stroke-dasharray:none; }
#parallelogram-area-height-svg .right-angle { fill:none; stroke:#62a947; stroke-width:5; opacity:0; }
#parallelogram-area-height-svg text { fill:#35616c; font-size:15px; font-weight:850; text-anchor:middle; }
#parallelogram-area-height-svg[data-choice="perpendicular"] .candidate-a { stroke:#62a947; stroke-width:7; }
#parallelogram-area-height-svg[data-choice="perpendicular"] .right-angle { opacity:1; }
#parallelogram-area-height-svg[data-choice="side"] .candidate-b,#parallelogram-area-height-svg[data-choice="tilted"] .candidate-c { stroke:#dc6557; stroke-width:7; }
.parallelogram-area-height-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.parallelogram-area-height-options button i { display:grid; place-items:center; width:27px; height:27px; margin:0 auto 4px; border-radius:9px; color:#fff; background:#58aaa4; font-style:normal; }
.parallelogram-area-height-rules ul { display:grid; gap:10px; margin:18px 0; padding:0; list-style:none; }
.parallelogram-area-height-rules li { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.75); }
.parallelogram-area-height-rules li > span { display:grid; place-items:center; width:35px; height:35px; border-radius:12px; color:#fff; background:var(--para-teal); font-weight:900; }
.parallelogram-area-height-rules li p { margin:0; color:#5b6868; font-size:13px; line-height:1.5; }
.parallelogram-area-height-rules blockquote { margin:0; padding:14px; border:0; border-radius:15px; color:#315b63; background:#dff1eb; font-size:13px; line-height:1.65; }

.parallelogram-area-lab { background:linear-gradient(145deg,#fffdf7,#e6f4ef); }
.parallelogram-area-lab-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(365px,.75fr); gap:18px; align-items:stretch; }
.parallelogram-area-stage-wrap { min-width:0; overflow:hidden; border-radius:25px; color:#fff; background:#214955; box-shadow:0 20px 46px rgba(32,73,82,.22); }
.parallelogram-area-view-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px; background:#193c47; }
.parallelogram-area-view-switch button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border:1px solid rgba(255,255,255,.15); border-radius:11px; color:#d8eeea; background:rgba(255,255,255,.07); font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-view-switch button span { font-size:20px; }
.parallelogram-area-view-switch button.active,.parallelogram-area-view-switch button[aria-pressed="true"] { color:#244c59; background:#ffe078; }
.parallelogram-area-stage { position:relative; min-height:490px; overflow:hidden; background:radial-gradient(circle at 50% 40%,rgba(101,194,180,.24),transparent 45%),linear-gradient(#2d6270,#204b57); }
#parallelogram-area-prism-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; outline:none; touch-action:pan-y; cursor:grab; }
#parallelogram-area-prism-canvas:active { cursor:grabbing; }
#parallelogram-area-prism-canvas:focus-visible { box-shadow:inset 0 0 0 4px #ffe078; }
.parallelogram-area-view-purpose { position:absolute; z-index:2; top:14px; left:14px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; width:min(430px,calc(100% - 28px)); padding:10px 12px; border:1px solid rgba(255,255,255,.2); border-radius:15px; color:#f7fffc; background:rgba(13,48,57,.86); pointer-events:none; backdrop-filter:blur(7px); }
.parallelogram-area-view-purpose > span { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#244c59; background:#ffe078; font-size:21px; }
.parallelogram-area-view-purpose b,.parallelogram-area-view-purpose small { display:block; }
.parallelogram-area-view-purpose b { color:#fff4bc; font-size:13px; }
.parallelogram-area-view-purpose small { margin-top:3px; color:#d8eeea; font-size:12px; line-height:1.5; }
.parallelogram-area-drag-hint { position:absolute; z-index:2; left:50%; bottom:14px; max-width:calc(100% - 24px); overflow:hidden; padding:8px 12px; border-radius:11px; color:#d9efeb; background:rgba(17,54,64,.82); font-size:12px; font-weight:800; text-overflow:ellipsis; transform:translateX(-50%); white-space:nowrap; pointer-events:none; }
.parallelogram-area-stage-status { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-height:100px; padding:12px 14px; background:#193c47; }
.parallelogram-area-stage-status > span { font-size:13px; line-height:1.55; }
.parallelogram-area-stage-status > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.parallelogram-area-stage-status button { min-height:44px; padding:0 10px; border:0; border-radius:11px; color:#244c59; background:#ffe078; font-size:13px; font-weight:900; cursor:pointer; }
.parallelogram-area-stage-status button:disabled { color:#8ba1a6; background:rgba(255,255,255,.09); cursor:not-allowed; }
.parallelogram-area-stage-status button:last-child { color:#e0efec; background:rgba(255,255,255,.1); }
.parallelogram-area-math-panel { display:flex; flex-direction:column; gap:10px; min-width:0; padding:18px; border:1px solid rgba(36,76,89,.09); border-radius:25px; background:#fff9ed; }
.parallelogram-area-controls,.parallelogram-area-transport { display:grid; gap:7px; padding:13px; border-radius:17px; background:#fff; }
.parallelogram-area-controls label,.parallelogram-area-transport label { display:flex; justify-content:space-between; gap:12px; color:#26736f; font-size:13px; font-weight:850; }
.parallelogram-area-controls input,.parallelogram-area-transport input { width:100%; min-height:34px; accent-color:var(--para-teal); }
.parallelogram-area-whole-card { padding:14px; border-radius:17px; color:#315b63; background:#e1f2ed; }
.parallelogram-area-whole-card small { color:#397c77; font-size:12px; font-weight:850; }
.parallelogram-area-whole-card > b { display:block; margin-top:4px; font-size:18px; }
.parallelogram-area-whole-card i { color:#dd6758; font-style:normal; }
.parallelogram-area-whole-card strong { color:#dd6758; font-size:27px; }
.parallelogram-area-whole-card p { margin:5px 0 0; font-size:12px; line-height:1.5; }
.parallelogram-area-conservation { padding:13px; border-radius:17px; background:#fff0c8; }
.parallelogram-area-conservation > small { color:#75633b; font-size:12px; font-weight:850; }
.parallelogram-area-conservation > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }
.parallelogram-area-conservation button { min-height:45px; border:2px solid transparent; border-radius:11px; color:#665b42; background:#fff; font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-conservation button.correct { border-color:#67a945; color:#39723b; background:#eaf6d8; }
.parallelogram-area-conservation button.wrong { border-color:#dc6557; color:#a44a42; background:#fff0ec; }
.parallelogram-area-conservation p { min-height:38px; margin:8px 0 0; color:#746749; font-size:12px; line-height:1.5; }
.parallelogram-area-conservation p.success { color:#39723b; }
.parallelogram-area-conservation p.wrong { color:#a44a42; }
.parallelogram-area-formula { position:relative; min-height:196px; padding:15px; overflow:hidden; border-radius:18px; color:#315b63; background:#e7f3ef; }
.parallelogram-area-formula-cover { position:absolute; z-index:2; inset:0; display:grid; place-content:center; place-items:center; gap:8px; color:#315f66; background:rgba(231,243,239,.98); border:2px dashed #62aaa3; transition:opacity .25s ease,visibility .25s ease; }
.parallelogram-area-formula-cover span { font-size:31px; }
.parallelogram-area-formula-cover b { font-size:13px; }
.parallelogram-area-formula.revealed .parallelogram-area-formula-cover { opacity:0; visibility:hidden; }
.parallelogram-area-formula > small { color:#397c77; font-size:12px; font-weight:850; }
.parallelogram-area-formula > p { margin:13px 0 4px; font-size:14px; font-weight:850; }
.parallelogram-area-formula > strong { display:block; color:#e26959; font-size:27px; }
.parallelogram-area-formula > em { display:block; margin-top:9px; color:#526e71; font-size:14px; font-style:normal; }
.parallelogram-area-formula > em i { color:#df6657; font-style:normal; }
.parallelogram-area-formula > em b { color:#df6657; font-size:23px; }

.parallelogram-area-deep { background:#fff9e8; }
.parallelogram-area-deep-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.parallelogram-area-deep-grid > article { min-width:0; padding:22px; border-radius:27px; }
.parallelogram-area-shear-card { background:#e4f4ef; }
.parallelogram-area-family-card { background:#e9f1fb; }
.parallelogram-area-reverse-card { background:#fde5de; }
.parallelogram-area-switch-base { background:#fff0c8; }
#parallelogram-area-shear-svg { display:block; width:100%; height:auto; margin:7px 0; }
#parallelogram-area-shear-svg .rail { stroke:#8d75bc; stroke-width:7; stroke-linecap:round; stroke-dasharray:8 8; }
#parallelogram-area-shear-shape { fill:rgba(84,184,170,.62); stroke:#23847f; stroke-width:5; stroke-linejoin:round; transition:all .2s ease; }
#parallelogram-area-shear-height { stroke:#e26959; stroke-width:5; stroke-dasharray:9 7; }
#parallelogram-area-shear-angle { fill:none; stroke:#e26959; stroke-width:4; }
#parallelogram-area-shear-svg text { fill:#315b63; font-size:15px; font-weight:850; text-anchor:middle; }
.parallelogram-area-shear-card label { display:flex; justify-content:space-between; gap:12px; color:#26736f; font-size:13px; font-weight:850; }
.parallelogram-area-shear-card input { width:100%; min-height:40px; accent-color:var(--para-teal); }
.parallelogram-area-shear-result,.parallelogram-area-family-card > p,.parallelogram-area-reverse-card > p,.parallelogram-area-switch-base > p { margin:7px 0 0; color:#526b70; font-size:13px; line-height:1.65; }
.parallelogram-area-shear-result b { color:#d65f51; }
.parallelogram-area-family-card svg { display:block; width:100%; height:auto; margin:8px 0; overflow:hidden; }
.parallelogram-area-family-card .cloud-rail { stroke:#8d75bc; stroke-width:7; stroke-linecap:round; stroke-dasharray:8 8; }
.parallelogram-area-family-card polygon { stroke-width:3; stroke-linejoin:round; }
.parallelogram-area-family-card .family-a { fill:rgba(242,201,95,.72); stroke:#b08529; }
.parallelogram-area-family-card .family-b { fill:rgba(85,185,169,.68); stroke:#247c73; }
.parallelogram-area-family-card .family-c { fill:rgba(239,116,94,.65); stroke:#b44c3d; }
.parallelogram-area-family-card svg text { fill:#315b63; font-size:14px; font-weight:850; text-anchor:middle; }
.parallelogram-area-family-options,.parallelogram-area-reverse-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.parallelogram-area-family-card > p.success,.parallelogram-area-reverse-card > p.success { color:#39723b; }
.parallelogram-area-family-card > p.wrong,.parallelogram-area-reverse-card > p.wrong { color:#a44a42; }
.parallelogram-area-reverse-machine { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; min-height:150px; margin:10px 0; }
.parallelogram-area-reverse-machine span,.parallelogram-area-reverse-machine strong { padding:14px; border-radius:15px; color:#315b63; background:rgba(255,255,255,.8); font-size:18px; }
.parallelogram-area-reverse-machine i { color:#d65f51; font-size:14px; font-style:normal; font-weight:900; }
.parallelogram-area-reverse-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.parallelogram-area-switch-equation { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-height:72px; margin:8px 0; }
.parallelogram-area-switch-equation > span { display:flex; align-items:center; gap:7px; padding:13px; border-radius:15px; background:rgba(255,255,255,.8); }
.parallelogram-area-switch-equation b { color:#315b63; font-size:15px; }
.parallelogram-area-switch-equation i { color:#d65f51; font-style:normal; }
.parallelogram-area-switch-equation > em { color:#d65f51; font-size:18px; font-style:normal; font-weight:900; }
#parallelogram-area-switch-svg { display:block; width:100%; height:auto; max-height:245px; margin:8px auto 4px; overflow:visible; }
#parallelogram-area-switch-svg > polygon { fill:#68b8aa; stroke:#28766f; stroke-width:4; stroke-linejoin:round; }
#parallelogram-area-switch-svg .switch-pair { opacity:.08; transition:opacity .2s ease; }
#parallelogram-area-switch-svg[data-base="bottom"] .switch-pair-bottom,#parallelogram-area-switch-svg[data-base="side"] .switch-pair-side { opacity:1; }
#parallelogram-area-switch-svg .switch-base,#parallelogram-area-switch-svg .switch-height,#parallelogram-area-switch-svg .switch-extension,#parallelogram-area-switch-svg .switch-angle { fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
#parallelogram-area-switch-svg .switch-pair-bottom .switch-base { stroke:#247d9a; }
#parallelogram-area-switch-svg .switch-pair-bottom .switch-height { stroke:#5d9c43; stroke-dasharray:10 8; }
#parallelogram-area-switch-svg .switch-pair-bottom .switch-angle { stroke:#fff; }
#parallelogram-area-switch-svg .switch-pair-side .switch-base { stroke:#e06c50; }
#parallelogram-area-switch-svg .switch-pair-side .switch-height { stroke:#7c61ae; stroke-dasharray:10 8; }
#parallelogram-area-switch-svg .switch-pair-side .switch-extension { stroke:#e06c50; stroke-width:4; stroke-dasharray:8 7; }
#parallelogram-area-switch-svg .switch-pair-side .switch-angle { stroke:#fff; stroke-width:6; }
#parallelogram-area-switch-svg text { fill:#274f58; font-size:13px; font-weight:900; text-anchor:middle; paint-order:stroke; stroke:#fff5d7; stroke-width:5px; stroke-linejoin:round; }
#parallelogram-area-switch-svg .switch-pair text { opacity:0; transition:opacity .2s ease; }
#parallelogram-area-switch-svg[data-base="bottom"] .switch-pair-bottom text,#parallelogram-area-switch-svg[data-base="side"] .switch-pair-side text { opacity:1; }
#parallelogram-area-switch-svg .extension-label { fill:#a05243; font-size:12px; }
.parallelogram-area-switch-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.parallelogram-area-switch-buttons button { min-height:46px; border:2px solid transparent; border-radius:12px; color:#315b63; background:rgba(255,255,255,.8); font-size:13px; font-weight:850; cursor:pointer; }
.parallelogram-area-switch-buttons button[aria-pressed="true"] { border-color:#23847f; color:#236c68; background:#e5f5ef; }
.parallelogram-area-switch-feedback { min-height:58px; margin-top:8px; padding:10px 12px; border-radius:13px; color:#536d72; background:rgba(255,255,255,.74); font-size:12px; line-height:1.55; }

.parallelogram-area-life { background:#e8f5f1; }
.parallelogram-area-life-scenes { grid-template-columns:repeat(4,minmax(0,1fr)); }
.parallelogram-area-life-shape { position:relative; display:grid; place-items:center; width:min(80%,300px); aspect-ratio:1.5; }
.parallelogram-area-life-shape > i { position:absolute; inset:12% 9%; clip-path:polygon(17% 0,100% 0,83% 100%,0 100%); background:linear-gradient(145deg,#57b6a8,#2d8b82); box-shadow:0 14px 25px rgba(46,107,98,.2); }
.parallelogram-area-life-shape.tile > i:nth-child(1) { inset:20% 55% 22% 0; }
.parallelogram-area-life-shape.tile > i:nth-child(2) { inset:20% 28% 22%; clip-path:none; background:#f0ca60; }
.parallelogram-area-life-shape.tile > i:nth-child(3) { inset:20% 0 22% 55%; transform:scaleX(-1); background:#ed7861; }
.parallelogram-area-life-height-line { position:absolute; z-index:2; top:12%; left:23%; width:0; height:76%; border-left:3px dashed #fff; text-decoration:none; filter:drop-shadow(0 1px 1px rgba(25,74,72,.5)); }
.parallelogram-area-life-right-angle { position:absolute; z-index:2; bottom:12%; left:23%; width:14px; height:14px; border-top:3px solid #fff; border-right:3px solid #fff; text-decoration:none; filter:drop-shadow(0 1px 1px rgba(25,74,72,.5)); }
.parallelogram-area-life-shape.tile > .parallelogram-area-life-height-line { top:20%; left:8%; height:58%; }
.parallelogram-area-life-shape.tile > .parallelogram-area-life-right-angle { bottom:22%; left:8%; }
.parallelogram-area-life-shape > span { position:relative; z-index:2; font-size:39px; }
.parallelogram-area-life-shape > b,.parallelogram-area-life-shape > em { position:absolute; z-index:2; padding:5px 8px; border-radius:9px; color:#fff; background:rgba(25,74,72,.78); font-size:12px; font-style:normal; }
.parallelogram-area-life-shape > b { bottom:3px; left:25%; }
.parallelogram-area-life-shape > em { top:25%; left:6%; }
.parallelogram-area-quiz { background:#fff2cf; }
.parallelogram-area-quiz-shell { display:grid; grid-template-columns:180px minmax(0,1fr); gap:17px; }
.parallelogram-area-quiz-stars { display:grid; align-content:center; justify-content:center; gap:12px; padding:19px; border-radius:23px; background:#244c59; }
.parallelogram-area-quiz-stars i { display:grid; place-items:center; width:61px; height:61px; border-radius:50%; color:#7d9a96; background:#183b44; font-size:31px; font-style:normal; transition:color .25s ease,transform .25s ease; }
.parallelogram-area-quiz-stars i.earned { color:#ffe078; transform:rotate(-8deg) scale(1.08); }
#parallelogram-area-quiz-content { min-width:0; }
.parallelogram-area-quiz-finished { min-height:325px; }

@media (max-width:1080px) {
  .parallelogram-area-lab-grid { grid-template-columns:1fr; }
  .parallelogram-area-stage-wrap { width:100%; max-width:880px; margin-inline:auto; }
  .parallelogram-area-math-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .parallelogram-area-controls,.parallelogram-area-formula { grid-column:1 / -1; }
}
@media (max-width:850px) {
  .parallelogram-area-definition-grid,.parallelogram-area-height-grid,.parallelogram-area-deep-grid { grid-template-columns:1fr; }
  .parallelogram-area-gallery-toolbar { align-items:stretch; flex-direction:column; }
  .parallelogram-area-gallery-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .parallelogram-area-gallery-card { grid-template-columns:1fr; }
  .parallelogram-area-gallery-visual { min-height:240px; }
  .parallelogram-area-quiz-shell { grid-template-columns:1fr; }
  .parallelogram-area-quiz-stars { grid-template-columns:repeat(3,56px); justify-content:center; }
  .parallelogram-area-quiz-stars i { width:56px; height:56px; }
}
@media (max-width:680px) {
  .parallelogram-area-hero h1 span { font-size:32px; letter-spacing:-.045em; }
  .parallelogram-area-card-title { grid-template-columns:46px minmax(0,1fr); }
  .parallelogram-area-card-title > span { width:45px; height:45px; font-size:23px; }
  .parallelogram-area-card-title h3 { font-size:20px; }
  .parallelogram-area-rail-card,.parallelogram-area-definition-book,.parallelogram-area-height-card,.parallelogram-area-height-rules,.parallelogram-area-deep-grid > article { padding:17px 14px; border-radius:22px; }
  .parallelogram-area-pair-choices,.parallelogram-area-height-options { grid-template-columns:1fr; }
  .parallelogram-area-pair-choices button,.parallelogram-area-height-options button { min-height:46px; }
  .parallelogram-area-gallery-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .parallelogram-area-gallery-tabs button { min-height:68px; }
  .parallelogram-area-gallery-card { padding:14px; }
  .parallelogram-area-gallery-visual { min-height:210px; padding:12px; }
  .parallelogram-area-gallery-copy h3 { font-size:21px; }
  .parallelogram-area-lab { padding-inline:12px; }
  .parallelogram-area-view-switch { gap:4px; padding:7px; }
  .parallelogram-area-view-switch button { min-height:52px; }
  .parallelogram-area-stage { min-height:355px; }
  .parallelogram-area-view-purpose { top:8px; left:8px; grid-template-columns:37px minmax(0,1fr); width:calc(100% - 16px); padding:8px 9px; }
  .parallelogram-area-view-purpose > span { width:35px; height:35px; font-size:18px; }
  .parallelogram-area-view-purpose b { font-size:12px; }
  .parallelogram-area-view-purpose small { font-size:12px; line-height:1.4; }
  .parallelogram-area-drag-hint { bottom:8px; width:calc(100% - 18px); max-width:none; overflow:visible; text-align:center; text-overflow:clip; white-space:normal; font-size:12px; }
  .parallelogram-area-stage-status { grid-template-columns:1fr; padding:12px; }
  .parallelogram-area-stage-status > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .parallelogram-area-stage-status button { width:100%; padding-inline:5px; }
  .parallelogram-area-math-panel { display:flex; padding:13px; }
  .parallelogram-area-conservation > div { grid-template-columns:1fr; }
  .parallelogram-area-family-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .parallelogram-area-life-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .parallelogram-area-life-shape { width:min(80%,260px); }
  .parallelogram-area-quiz-stars { grid-template-columns:repeat(3,49px); gap:9px; padding:12px; }
  .parallelogram-area-quiz-stars i { width:49px; height:49px; font-size:26px; }
  .parallelogram-area-lesson .game-coach { padding:14px; }
  .parallelogram-area-lesson .game-life-picture { display:none; }
  .parallelogram-area-lesson .game-life-mission { margin-top:12px; }
  .parallelogram-area-lesson .game-canvas-hint { font-size:12px; }
}
@media (max-width:390px) {
  .parallelogram-area-gallery-tabs { grid-template-columns:1fr 1fr; }
  .parallelogram-area-view-switch button { font-size:13px; }
  .parallelogram-area-stage { min-height:320px; }
  .parallelogram-area-stage-status > div { grid-template-columns:1fr 1fr; }
  .parallelogram-area-family-options,.parallelogram-area-reverse-options { grid-template-columns:1fr; }
  .parallelogram-area-life-shape { width:min(88%,235px); }
}

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

@media print {
  .topbar, .sidebar, .sidebar-scrim, .stage-toolbar, .stage-data-bar, .stage-timeline, .control-dock, .practice-strip, .lesson-footer { display: none !important; }
  .main, .standalone .main { padding: 0; }
  .stage-card { min-height: 400px; break-inside: avoid; }
  body { background: white; }
}

/* 第七课专属：梯形面积 · 船帆岛闯关记 */
.trapezoid-area-lesson {
  --trap-navy: #174b59;
  --trap-deep: #123d49;
  --trap-ocean: #247f8d;
  --trap-aqua: #66c5c5;
  --trap-sky: #dff4ef;
  --trap-sun: #f4cf62;
  --trap-coral: #ef755f;
  --trap-cream: #fff9e9;
  --perimeter-green: var(--trap-ocean);
  --perimeter-deep: var(--trap-deep);
  --perimeter-leaf: #dff2a7;
  --perimeter-orange: var(--trap-coral);
  --perimeter-blue: #58abc0;
  color: #244e56;
}

.trapezoid-area-lesson,
.trapezoid-area-lesson * { min-width: 0; }

.trapezoid-area-lesson img,
.trapezoid-area-lesson svg,
.trapezoid-area-lesson canvas { max-width: 100%; }

.trapezoid-area-lesson button,
.trapezoid-area-lesson a,
.trapezoid-area-lesson output,
.trapezoid-area-lesson strong,
.trapezoid-area-lesson b { overflow-wrap: anywhere; }

.trapezoid-area-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 13% 12%, rgba(244,207,98,.3), transparent 17rem),
    radial-gradient(circle at 88% 92%, rgba(102,197,197,.34), transparent 21rem),
    linear-gradient(145deg,#123d49 0%,#176675 54%,#2795a0 100%);
  box-shadow: 0 28px 72px rgba(20,74,86,.24);
}

.trapezoid-area-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: -44px;
  width: 64%;
  height: 150px;
  opacity: .18;
  pointer-events: none;
  background: radial-gradient(70px 24px at 50% 0,transparent 95%,#fff 100%);
  background-size: 136px 48px;
}

.trapezoid-area-hero .perimeter-kicker { color: #e8f9bd; }
.trapezoid-area-hero .perimeter-kicker span { background: rgba(255,255,255,.15); }
.trapezoid-area-hero h1 span { white-space: normal; }
.trapezoid-area-hero h1 em { color: #ffe17c; }
.trapezoid-area-hero .perimeter-hero-copy > p { color: rgba(255,255,255,.88); }
.trapezoid-area-hero .perimeter-hero-copy > p strong { color: #fff0a7; }
.trapezoid-area-hero .perimeter-goals span { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); }
.trapezoid-area-hero .perimeter-goals b { color: var(--trap-deep); background: #e8f7a8; }
.trapezoid-area-hero .perimeter-start-button { color: var(--trap-deep); background: #ffe071; }
.trapezoid-area-hero .perimeter-hero-art { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.13); }
.trapezoid-area-hero .perimeter-hero-art img { object-position: center; }
.trapezoid-area-hero .perimeter-hero-art figcaption { background: rgba(13,62,72,.86); }
.trapezoid-area-hero .perimeter-hero-art figcaption span { color: #e8f7a8; }

.trapezoid-area-route-nav { border-color: rgba(36,127,141,.12); background: rgba(255,255,255,.84); }
.trapezoid-area-route-nav > span { color: var(--trap-ocean); }
.trapezoid-area-route-nav button { color: #3f6870; background: rgba(36,127,141,.08); }
.trapezoid-area-route-nav button:hover { color: #fff; background: var(--trap-ocean); }

.trapezoid-area-lesson .perimeter-section { border-color: rgba(23,75,89,.09); }
.trapezoid-area-lesson .perimeter-section-heading > span { color: #176d77; background: #e4f2c9; }
.trapezoid-area-lesson .perimeter-section-heading h2 { color: var(--trap-deep); }
.trapezoid-area-lesson .perimeter-section-heading p strong { color: #167c82; }

/* 第一关：趣味历史 */
.trapezoid-area-history {
  background:
    radial-gradient(circle at 98% 0,rgba(239,117,95,.11),transparent 22rem),
    linear-gradient(145deg,#fffdf5,#f3eddc);
}

.trapezoid-history-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); gap: 22px; align-items: stretch; }
.trapezoid-history-picture { position: relative; min-width: 0; margin: 0; padding: 9px; overflow: hidden; border: 1px solid rgba(77,81,55,.12); border-radius: 27px; background: #fff; box-shadow: 0 18px 40px rgba(91,73,44,.13); }
.trapezoid-history-picture img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 20px; object-fit: contain; object-position: center; }
.trapezoid-history-picture figcaption { position: absolute; left: 25px; bottom: 24px; max-width: calc(100% - 50px); padding: 10px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 13px; color: #fff; background: rgba(82,61,35,.82); box-shadow: 0 8px 20px rgba(65,46,25,.16); font-size: 13px; font-weight: 850; backdrop-filter: blur(8px); }
.trapezoid-history-story { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 19px; border-radius: 27px; background: #fff9e9; box-shadow: inset 0 0 0 1px rgba(111,80,40,.08); }
.trapezoid-history-steps { display: grid; gap: 8px; }
.trapezoid-history-steps > span { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 2px 11px; min-height: 69px; padding: 9px 12px; border-radius: 16px; background: rgba(255,255,255,.85); }
.trapezoid-history-steps b { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#d98b43,#efb554); font-size: 17px; }
.trapezoid-history-steps i { color: #5a4b36; font-size: 14px; font-style: normal; font-weight: 900; }
.trapezoid-history-steps small { color: #81735f; font-size: 12px; line-height: 1.45; }
.trapezoid-history-question { padding: 15px; border-radius: 19px; color: #604f39; background: #f7e4b8; }
.trapezoid-history-question h3 { margin: 7px 0 11px; color: #4f4536; font: 700 20px/1.35 Georgia,"Songti SC",serif; }
.trapezoid-history-question > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.trapezoid-history-question button { min-height: 54px; padding: 8px 11px; border: 2px solid transparent; border-radius: 14px; color: #5f523f; background: rgba(255,255,255,.88); font-size: 13px; font-weight: 850; cursor: pointer; }
.trapezoid-history-question button.correct { border-color: #6fa848; color: #32683a; background: #edf7d5; }
.trapezoid-history-question button.wrong { border-color: #df7b67; color: #9d493c; background: #ffede8; animation: trapezoid-shake .26s ease; }
#trapezoid-history-feedback { min-height: 48px; margin: 10px 0 0; padding: 10px 11px; border-radius: 12px; color: #74664f; background: rgba(255,255,255,.64); font-size: 13px; line-height: 1.55; }
#trapezoid-history-feedback.success { color: #31683b; background: #eaf5d3; }
#trapezoid-history-feedback.wrong { color: #98483a; background: #ffebe5; }
.trapezoid-history-source { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 7px 11px; border-radius: 12px; color: #526963; background: #ece8dc; font-size: 12px; font-weight: 800; text-decoration: none; }
.trapezoid-history-source:hover { color: #fff; background: var(--trap-ocean); }

/* 第二关：上下底和高 */
.trapezoid-area-basics { background: linear-gradient(145deg,#f8fffc,#e6f4ef); }
.trapezoid-basics-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.trapezoid-edge-card,
.trapezoid-height-card { min-width: 0; padding: 21px; border: 1px solid rgba(30,111,119,.1); border-radius: 25px; background: rgba(255,255,255,.86); box-shadow: 0 14px 34px rgba(41,93,91,.08); }
.trapezoid-card-title { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 12px; }
.trapezoid-card-title > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #dff2ed; font-size: 27px; }
.trapezoid-card-title small { color: #2c8786; font-size: 12px; font-weight: 850; letter-spacing: .05em; }
.trapezoid-card-title h3 { margin: 4px 0 0; color: var(--trap-deep); font: 700 22px/1.3 Georgia,"Songti SC",serif; }
#trapezoid-edge-svg,
#trapezoid-height-svg { display: block; width: 100%; height: auto; max-height: 330px; margin: 8px auto; overflow: visible; }
#trapezoid-edge-svg polygon,
#trapezoid-height-svg polygon { fill: rgba(102,197,197,.3); stroke: #247f8d; stroke-width: 4; stroke-linejoin: round; }
#trapezoid-edge-svg line,
#trapezoid-height-svg line,
#trapezoid-edge-svg path,
#trapezoid-height-svg path { fill: none; stroke: #7e9b9d; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .22s ease,opacity .22s ease,stroke-width .22s ease; }
#trapezoid-edge-svg .edge-arrow { opacity: .16; stroke: #f2b94d; stroke-width: 4; stroke-dasharray: 9 7; }
#trapezoid-edge-svg .edge-label { fill: #6b8586; stroke: #fff; stroke-width: 4px; paint-order: stroke; text-anchor: middle; font-size: 14px; font-weight: 900; opacity: .35; transition: fill .22s ease,opacity .22s ease; }
#trapezoid-edge-svg[data-choice="bases"] .edge-top,
#trapezoid-edge-svg[data-choice="bases"] .edge-bottom { stroke: #ee9b42; stroke-width: 9; }
#trapezoid-edge-svg[data-choice="bases"] .edge-arrow { opacity: 1; stroke: #ee9b42; }
#trapezoid-edge-svg[data-choice="bases"] .edge-label { fill: #b86525; opacity: 1; }
#trapezoid-edge-svg[data-choice="legs"] .edge-left,
#trapezoid-edge-svg[data-choice="legs"] .edge-right,
#trapezoid-edge-svg[data-choice="neighbors"] .edge-top,
#trapezoid-edge-svg[data-choice="neighbors"] .edge-right { stroke: #df6d5b; stroke-width: 9; }
#trapezoid-height-svg .height-base { stroke: #318cab; stroke-width: 8; }
#trapezoid-height-svg .height-a,
#trapezoid-height-svg .height-b,
#trapezoid-height-svg .height-c { stroke-dasharray: 10 8; }
#trapezoid-height-svg .height-angle { opacity: .18; stroke: #66a945; stroke-width: 4; }
#trapezoid-height-svg text { fill: #426c72; stroke: #fff; stroke-width: 4px; paint-order: stroke; text-anchor: middle; font-size: 15px; font-weight: 900; }
#trapezoid-height-svg[data-choice="a"] .height-a { stroke: #62a846; stroke-width: 9; }
#trapezoid-height-svg[data-choice="a"] .height-angle { opacity: 1; stroke: #62a846; }
#trapezoid-height-svg[data-choice="b"] .height-b,
#trapezoid-height-svg[data-choice="c"] .height-c { stroke: #df6d5b; stroke-width: 9; }
.trapezoid-choice-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.trapezoid-choice-row button { min-height: 50px; padding: 7px 9px; border: 2px solid transparent; border-radius: 13px; color: #355e65; background: #edf5f2; font-size: 13px; font-weight: 850; cursor: pointer; }
.trapezoid-choice-row button.correct { border-color: #6aa548; color: #366b3d; background: #eaf6d5; }
.trapezoid-choice-row button.wrong { border-color: #df735f; color: #a24b3e; background: #ffede8; animation: trapezoid-shake .26s ease; }
#trapezoid-edge-feedback,
#trapezoid-height-feedback { min-height: 58px; margin: 10px 0 0; padding: 10px 12px; border-radius: 13px; color: #587077; background: #edf4f1; font-size: 13px; line-height: 1.55; }
#trapezoid-edge-feedback.success,
#trapezoid-height-feedback.success { color: #356a3d; background: #eaf5d4; }
#trapezoid-edge-feedback.wrong,
#trapezoid-height-feedback.wrong { color: #9e493c; background: #ffebe5; }
.trapezoid-one-line { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; margin: 18px 0 0; padding: 15px 17px; border: 0; border-radius: 18px; color: #315f66; background: #dff2ed; }
.trapezoid-one-line > b { padding: 8px 10px; border-radius: 10px; color: #fff; background: var(--trap-ocean); font-size: 12px; }
.trapezoid-one-line > span { font-size: 14px; line-height: 1.65; }

/* 第三关：可旋转、可搬运的 3D 双胞胎积木 */
.trapezoid-area-lab { background: radial-gradient(circle at 96% 0,rgba(244,207,98,.14),transparent 22rem),linear-gradient(150deg,#fffdf5,#e4f3ef); }
.trapezoid-area-lab-grid { grid-template-columns: minmax(0,1.22fr) minmax(365px,.78fr); }
.trapezoid-area-stage-wrap { background: var(--trap-navy); box-shadow: 0 20px 48px rgba(18,61,73,.24); }
.trapezoid-area-view-switch { grid-template-columns: repeat(2,minmax(0,1fr)); background: #113d49; }
.trapezoid-area-view-switch button.active,
.trapezoid-area-view-switch button[aria-pressed="true"] { color: var(--trap-deep); background: #ffe073; }
.trapezoid-area-stage { min-height: 500px; background: radial-gradient(circle at 50% 38%,rgba(116,222,211,.27),transparent 44%),linear-gradient(#266b79,#164a59); }
#trapezoid-area-prism-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: 0; touch-action: pan-y; cursor: grab; }
#trapezoid-area-prism-canvas:active { cursor: grabbing; }
#trapezoid-area-prism-canvas:focus-visible { box-shadow: inset 0 0 0 4px #ffe073; }
.trapezoid-area-view-purpose { background: rgba(9,52,63,.87); }
.trapezoid-area-view-purpose > span { color: var(--trap-deep); background: #ffe073; }
.trapezoid-area-stage[data-view="top"] .trapezoid-area-view-purpose > span { background: #dff2a7; }
.trapezoid-area-stage-status { background: #113d49; }
.trapezoid-area-stage-status button { color: var(--trap-deep); background: #ffe073; }
.trapezoid-area-stage-status button:disabled { color: #88a3a8; background: rgba(255,255,255,.09); }
.trapezoid-area-stage-status button:last-child { color: #dfefec; background: rgba(255,255,255,.11); }
.trapezoid-area-math-panel { background: #fff9e9; }
.trapezoid-area-controls { display: grid; gap: 8px; padding: 13px; border: 1px solid rgba(23,75,89,.08); border-radius: 17px; background: #fff; }
.trapezoid-area-controls label,
.trapezoid-transport label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #257b82; font-size: 13px; font-weight: 850; }
.trapezoid-area-controls output,
.trapezoid-transport output { color: var(--trap-deep); font-variant-numeric: tabular-nums; }
.trapezoid-area-controls input,
.trapezoid-transport input { width: 100%; min-height: 44px; margin: -2px 0 1px; accent-color: var(--trap-ocean); cursor: pointer; }
.trapezoid-area-controls input::-webkit-slider-thumb,
.trapezoid-transport input::-webkit-slider-thumb { width: 22px; height: 22px; }
.trapezoid-area-controls input::-moz-range-thumb,
.trapezoid-transport input::-moz-range-thumb { width: 22px; height: 22px; border: 0; }
.trapezoid-transport { padding: 13px; border-radius: 17px; color: #315f66; background: #e4f4ef; }
.trapezoid-transport input:disabled { cursor: not-allowed; opacity: .48; }
.trapezoid-transport small { display: block; margin-top: -1px; color: #60777a; font-size: 12px; line-height: 1.55; }
.trapezoid-twins-card { padding: 14px; border-radius: 17px; color: #315b63; background: #dff1ec; }
.trapezoid-twins-card > small { display: block; color: #357c7d; font-size: 12px; font-weight: 850; }
.trapezoid-twins-card > b { display: block; margin-top: 6px; color: var(--trap-deep); font-size: 18px; line-height: 1.45; }
.trapezoid-twins-card i { color: #d65f50; font-style: normal; }
.trapezoid-twins-card strong { color: #d65f50; font-size: 27px; }
.trapezoid-twins-card p { margin: 6px 0 0; color: #5e7478; font-size: 12px; line-height: 1.55; }
.trapezoid-half-guess { background: #fff0c4; }
.trapezoid-half-guess button.correct { border-color: #65a442; color: #356a3d; background: #ebf6d7; }
.trapezoid-half-guess button.wrong { border-color: #df735f; color: #a14b3d; background: #ffede8; }
.trapezoid-area-formula { background: #e4f3ef; }
.trapezoid-area-formula .triangle-area-formula-cover { color: #315f66; border-color: #55aaa7; background: rgba(228,243,239,.985); }
.trapezoid-area-formula > strong { color: #d95f4f; font-size: clamp(21px,2vw,28px); }

/* 第四关：公式积木拖放 */
.trapezoid-formula-game { background: radial-gradient(circle at 5% 100%,rgba(102,197,197,.16),transparent 21rem),linear-gradient(145deg,#fffaf0,#eef8f4); }
.trapezoid-formula-board { display: grid; gap: 14px; padding: 22px; overflow: hidden; border-radius: 27px; color: #fff; background: linear-gradient(145deg,#174b59,#216e78); box-shadow: 0 19px 42px rgba(18,61,73,.2); }
.trapezoid-formula-pieces,
.trapezoid-formula-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.trapezoid-formula-pieces button { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 2px 10px; min-height: 102px; padding: 13px; border: 2px solid rgba(255,255,255,.22); border-radius: 18px; color: #31535a; background: #fff9e8; box-shadow: 0 11px 21px rgba(4,35,43,.17); text-align: left; cursor: grab; transition: transform .2s ease,opacity .2s ease,box-shadow .2s ease; }
.trapezoid-formula-pieces button:hover:not(:disabled) { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 16px 25px rgba(4,35,43,.24); }
.trapezoid-formula-pieces button:active { cursor: grabbing; }
.trapezoid-formula-pieces button > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #e5f3ef; font-size: 25px; }
.trapezoid-formula-pieces button > b { color: var(--trap-deep); font-size: 22px; line-height: 1.2; }
.trapezoid-formula-pieces button > small { color: #687a78; font-size: 12px; font-weight: 750; }
.trapezoid-formula-pieces button.used { opacity: .33; transform: scale(.97); cursor: default; }
.trapezoid-formula-pieces button.shake { animation: trapezoid-shake .28s ease; }
.trapezoid-formula-slots > span { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; min-height: 80px; padding: 11px; border: 2px dashed rgba(255,255,255,.38); border-radius: 17px; color: #d9ece9; background: rgba(255,255,255,.07); transition: border .2s ease,background .2s ease,transform .2s ease; }
.trapezoid-formula-slots > span > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--trap-deep); background: #ffe073; font-size: 13px; font-style: normal; font-weight: 900; }
.trapezoid-formula-slots > span > b { font-size: 14px; }
.trapezoid-formula-slots > span.filled { border-style: solid; border-color: #dff2a7; color: #fff; background: rgba(223,242,167,.17); transform: translateY(-2px); }
.trapezoid-formula-slots.complete > span { border-color: #ffe073; box-shadow: inset 0 0 0 1px rgba(255,224,115,.2); }
.trapezoid-formula-feedback { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 11px; border-radius: 17px; color: #d9ece9; background: rgba(4,38,47,.42); }
.trapezoid-formula-feedback > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 13px; background: rgba(255,255,255,.1); font-size: 23px; }
.trapezoid-formula-feedback p { margin: 0; font-size: 13px; line-height: 1.55; }
.trapezoid-formula-feedback button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; color: var(--trap-deep); background: #ffe073; font-size: 13px; font-weight: 850; cursor: pointer; }
.trapezoid-formula-feedback.success { color: #f1ffd4; background: rgba(75,123,57,.48); }
.trapezoid-formula-feedback.wrong { color: #ffe4dd; background: rgba(157,65,54,.47); }
.trapezoid-formula-reward { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 14px; padding: 17px; border: 2px solid rgba(255,224,115,.5); border-radius: 20px; color: var(--trap-deep); background: linear-gradient(135deg,#fff6bc,#ffe073); box-shadow: 0 12px 28px rgba(6,40,46,.18); }
.trapezoid-formula-reward[hidden] { display: none; }
.trapezoid-formula-reward > span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; background: rgba(255,255,255,.56); font-size: 36px; }
.trapezoid-formula-reward small { display: block; color: #856f29; font-size: 12px; font-weight: 850; }
.trapezoid-formula-reward strong { display: block; margin-top: 3px; color: #174b59; font: 900 clamp(24px,3vw,36px)/1.25 Georgia,"Songti SC",serif; }
.trapezoid-formula-reward p { margin: 5px 0 0; color: #675c38; font-size: 13px; line-height: 1.55; }

/* 第五关：日常生活应用 */
.trapezoid-area-life { background: radial-gradient(circle at 98% 0,rgba(244,207,98,.18),transparent 23rem),linear-gradient(145deg,#fffdf6,#e5f4ef); }
.trapezoid-life-banner { position: relative; margin: 0 0 16px; padding: 8px; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 16px 39px rgba(30,86,88,.11); }
.trapezoid-life-banner img { display: block; width: 100%; aspect-ratio: 3 / 1.12; border-radius: 19px; object-fit: cover; object-position: center 52%; }
.trapezoid-life-banner figcaption { position: absolute; left: 24px; bottom: 22px; max-width: calc(100% - 48px); padding: 10px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; color: #fff; background: rgba(13,66,76,.84); font-size: 13px; font-weight: 850; backdrop-filter: blur(8px); }
.trapezoid-life-translator { background: var(--trap-deep); }
.trapezoid-life-translator i { background: #e7f4ad; }
.trapezoid-life-scenes { grid-template-columns: repeat(4,minmax(0,1fr)); }
.trapezoid-life-scenes button:last-child { grid-column: auto; }
.trapezoid-life-scenes button.active { border-color: var(--trap-ocean); }
.trapezoid-life-visual { background: linear-gradient(145deg,#dff4ef,#cae9e5); }
.trapezoid-life-shape { position: relative; display: grid; place-items: center; width: min(80%,340px); aspect-ratio: 1.55; filter: drop-shadow(0 16px 18px rgba(30,89,91,.18)); }
.trapezoid-life-shape > i { position: absolute; inset: 8% 6% 10%; clip-path: polygon(24% 0,76% 0,100% 100%,0 100%); background: linear-gradient(145deg,#f3b553,#ef755f); }
.trapezoid-life-shape > i::after { content: ""; position: absolute; left: 32%; top: 0; bottom: 0; border-left: 4px dashed rgba(255,255,255,.86); }
.trapezoid-life-shape.garden > i { background: linear-gradient(145deg,#8fca69,#58a75e); }
.trapezoid-life-shape.roof > i { background: linear-gradient(145deg,#e58b61,#c95e51); }
.trapezoid-life-shape.lamp > i { background: linear-gradient(145deg,#f2d369,#d79f48); }
.trapezoid-life-shape > span { position: relative; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: rgba(255,255,255,.7); font-size: 34px; }
.trapezoid-life-shape > b,
.trapezoid-life-shape > strong,
.trapezoid-life-shape > em { position: absolute; z-index: 2; padding: 5px 8px; border-radius: 9px; color: #174b59; background: rgba(255,255,255,.93); box-shadow: 0 5px 13px rgba(25,73,75,.1); font-size: 12px; font-style: normal; font-weight: 850; white-space: nowrap; }
.trapezoid-life-shape > b { top: -17px; left: 50%; transform: translateX(-50%); }
.trapezoid-life-shape > strong { left: 50%; bottom: -19px; transform: translateX(-50%); }
.trapezoid-life-shape > em { left: 26%; top: 51%; transform: translate(-100%,-50%); }
.trapezoid-life-card .perimeter-life-question { color: #46656a; background: #e8f4ee; }
.trapezoid-life-card .perimeter-life-question b { background: var(--trap-ocean); }
.trapezoid-life-card .perimeter-life-solution ol { grid-template-columns: repeat(3,minmax(0,1fr)); }

/* 第六关与收尾 */
.trapezoid-area-quiz { background: linear-gradient(145deg,#fffaf0,#eaf5dc); }
.trapezoid-quiz-shell { grid-template-columns: 116px minmax(0,1fr); }
.trapezoid-quiz-stars { align-content: center; justify-items: center; border-radius: 23px; background: linear-gradient(160deg,#174b59,#216f78); }
.trapezoid-quiz-stars i { border-radius: 50%; color: #789da1; background: rgba(255,255,255,.09); }
.trapezoid-quiz-stars i.earned { color: #ffe073; background: rgba(255,255,255,.17); }
#trapezoid-quiz-content { min-width: 0; }
.trapezoid-quiz-finished { background: linear-gradient(145deg,#174b59,#25848c); }
.trapezoid-quiz-finished h3 { color: #fff0a7; }
.trapezoid-home-mission { background: linear-gradient(145deg,rgba(255,255,255,.84),#e5f3ef); }
.trapezoid-home-mission > span { background: #d9f0eb; }
.trapezoid-home-mission > b { color: #87571f; background: #fff0be; }
.trapezoid-area-lesson .game-canvas-hint::before { content: "先旋转、再靠拢、最后平分：每一步都在说明公式"; flex: 1 0 100%; color: var(--trap-ocean); }

@keyframes trapezoid-shake {
  33% { transform: translateX(-4px); }
  66% { transform: translateX(4px); }
}

/* 1024 px：实验室与内容卡改为单栏，保留完整图形。 */
@media (max-width: 1024px) {
  .trapezoid-history-grid { grid-template-columns: 1fr; }
  .trapezoid-history-picture { width: 100%; max-width: 820px; margin-inline: auto; }
  .trapezoid-history-story { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); align-items: start; }
  .trapezoid-history-source { grid-column: 1 / -1; }
  .trapezoid-area-lab-grid { grid-template-columns: 1fr; }
  .trapezoid-area-stage-wrap { width: 100%; max-width: 880px; margin-inline: auto; }
  .trapezoid-area-math-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-area-controls,
  .trapezoid-area-formula { grid-column: 1 / -1; }
  .trapezoid-half-guess { grid-column: 1 / -1; }
}

/* 768 px：所有学习任务转为一列，按钮保持可点。 */
@media (max-width: 768px) {
  .trapezoid-area-hero { grid-template-columns: 1fr; min-height: 0; }
  .trapezoid-area-hero .perimeter-hero-art { width: 100%; max-width: 720px; margin-inline: auto; transform: none; }
  .trapezoid-area-route-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; }
  .trapezoid-area-route-nav > span { grid-column: 1 / -1; text-align: center; }
  .trapezoid-area-route-nav button { min-width: 0; padding-inline: 7px; }
  .trapezoid-history-story { display: flex; }
  .trapezoid-basics-grid { grid-template-columns: 1fr; }
  .trapezoid-edge-card,
  .trapezoid-height-card { max-width: 720px; width: 100%; margin-inline: auto; }
  .trapezoid-area-math-panel { display: flex; }
  .trapezoid-area-stage-status { grid-template-columns: 1fr; }
  .trapezoid-area-stage-status > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .trapezoid-area-stage-status button { width: 100%; min-height: 46px; padding: 5px 7px; }
  .trapezoid-formula-pieces,
  .trapezoid-formula-slots { grid-template-columns: 1fr; }
  .trapezoid-formula-pieces button { min-height: 78px; }
  .trapezoid-formula-slots > span { min-height: 62px; }
  .trapezoid-formula-feedback { grid-template-columns: 43px minmax(0,1fr); }
  .trapezoid-formula-feedback button { grid-column: 1 / -1; width: 100%; }
  .trapezoid-life-banner img { aspect-ratio: 3 / 1.45; }
  .trapezoid-life-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-life-card .perimeter-life-solution ol { grid-template-columns: 1fr; }
  .trapezoid-quiz-shell { grid-template-columns: 1fr; }
  .trapezoid-quiz-stars { grid-template-columns: repeat(3,56px); justify-content: center; }
}

/* 圆的半径与直径：先认识圆，再逐步建立圆心、半径、直径。 */
.circle-rd-lesson { --circle-deep:#164f5b; --circle-blue:#247f8d; --circle-sky:#dff3f3; --circle-yellow:#f2bd49; --circle-coral:#ed705d; container:lesson-page / inline-size; }
.circle-rd-hero { grid-template-columns:minmax(400px,.84fr) minmax(0,1.16fr); min-height:600px; padding:24px 24px 24px 34px; background:radial-gradient(circle at 8% 12%,rgba(255,255,255,.76),transparent 24rem),radial-gradient(circle at 93% 9%,rgba(255,224,115,.52),transparent 17rem),linear-gradient(145deg,#eefbf6,#bce8eb); }
.circle-rd-hero::before { width:190px; height:190px; left:34%; bottom:-130px; border:2px solid rgba(36,127,141,.11); box-shadow:0 0 0 34px rgba(36,127,141,.035),0 0 0 68px rgba(36,127,141,.02); }
.circle-rd-hero::after { content:""; position:absolute; left:40px; top:38px; width:18px; height:18px; border:2px solid rgba(255,255,255,.8); border-radius:50%; box-shadow:110px 35px 0 5px rgba(255,255,255,.25),250px -16px 0 -2px rgba(36,127,141,.12),70px 450px 0 8px rgba(255,255,255,.2); pointer-events:none; animation:circle-rd-bubbles 5s ease-in-out infinite alternate; }
@keyframes circle-rd-bubbles { to { transform:translateY(-12px) rotate(7deg); } }
.circle-rd-hero h1 span { color:var(--circle-deep); }
.circle-rd-hero h1 em { color:#c05b48; }
.circle-rd-hero .perimeter-kicker { color:#287b81; }
.circle-rd-hero .perimeter-kicker span { background:rgba(36,127,141,.12); }
.circle-rd-hero .perimeter-hero-copy > p { color:#486b6e; }
.circle-rd-hero .perimeter-hero-copy > p strong { color:#d45f4f; }
.circle-rd-hero .perimeter-goals span { border-color:rgba(36,127,141,.14); color:#315f66; background:rgba(255,255,255,.62); }
.circle-rd-hero .perimeter-goals b { color:#174f5b; background:#d5ef77; }
.circle-rd-hero-ticket { display:flex; align-items:center; width:max-content; max-width:100%; min-height:31px; margin:0 0 15px; padding:0 12px; border:1px dashed #df7964; border-radius:999px; color:#b45545; background:#fff5d7; font-size:12px; font-weight:900; letter-spacing:.08em; transform:rotate(-2deg); }
.circle-rd-start { background:linear-gradient(135deg,#ffd45f,#ffb84d); box-shadow:0 12px 25px rgba(199,111,38,.2); transition:transform .2s ease,box-shadow .2s ease; }
.circle-rd-start:hover { transform:translateY(-3px) rotate(-1deg); box-shadow:0 17px 30px rgba(199,111,38,.24); }
.circle-rd-hero .perimeter-hero-copy > .circle-rd-hero-hint { margin-top:12px; color:#4e7778; font-size:12px; font-weight:750; line-height:1.5; }
.circle-rd-hero-art { min-height:500px; padding:8px; overflow:hidden; border:3px solid rgba(255,255,255,.76); background:#d7f0ef; box-shadow:0 22px 50px rgba(31,105,112,.2); transform:rotate(1.3deg); }
.circle-rd-hero-art img { width:100%; height:100%; min-height:500px; object-fit:cover; object-position:center; }
.circle-rd-hero-label { position:absolute; z-index:2; display:grid; min-width:112px; padding:8px 11px 8px 31px; border:2px solid rgba(255,255,255,.88); border-radius:14px; color:#174f5b; background:rgba(255,255,255,.88); box-shadow:0 8px 22px rgba(17,75,83,.16); backdrop-filter:blur(9px); pointer-events:none; }
.circle-rd-hero-label i { position:absolute; left:9px; top:13px; width:12px; height:12px; border:4px solid #fff; border-radius:50%; background:#247f8d; box-shadow:0 0 0 3px rgba(36,127,141,.22); }
.circle-rd-hero-label b { font-size:13px; }
.circle-rd-hero-label span { margin-top:2px; color:#667d7d; font-size:12px; font-weight:750; }
.circle-rd-hero-label.label-center { left:53%; top:40%; }
.circle-rd-hero-label.label-radius { right:7%; top:20%; }
.circle-rd-hero-label.label-radius i { background:#f2bd49; box-shadow:0 0 0 3px rgba(242,189,73,.25); }
.circle-rd-hero-label.label-diameter { right:7%; top:51%; }
.circle-rd-hero-label.label-diameter i { background:#ed705d; box-shadow:0 0 0 3px rgba(237,112,93,.23); }
.circle-rd-hero-art figcaption { background:rgba(13,65,73,.82); }
.circle-rd-route-nav { background:#164f5b; }
.circle-rd-route-nav button { min-width:112px; }
.circle-rd-route-nav > span { color:#ffe073; }
.circle-rd-route-nav button { color:#e1f0ed; background:rgba(255,255,255,.09); }
.circle-rd-route-nav button:hover { color:#174f5b; background:#ffe073; }
.circle-rd-lesson .perimeter-section { scroll-margin-top:88px; }
.circle-rd-discover { background:linear-gradient(145deg,#fffdf3,#edf8f4); }
.circle-rd-origin-story { display:grid; grid-template-columns:82px minmax(260px,.9fr) minmax(410px,1.1fr); align-items:center; gap:18px; margin:0 0 18px; padding:20px; overflow:hidden; border-radius:25px; color:#f3fbf9; background:radial-gradient(circle at 8% 20%,rgba(255,221,97,.19),transparent 12rem),linear-gradient(125deg,#164f5b,#247f8d); box-shadow:0 16px 38px rgba(22,79,91,.17); }
.origin-moon { display:grid; place-items:center; width:76px; height:76px; border:1px solid rgba(255,255,255,.17); border-radius:50%; background:rgba(255,255,255,.09); box-shadow:0 0 0 12px rgba(255,255,255,.035); font-size:42px; }
.circle-rd-origin-story small { color:#ffe073; font-size:12px; font-weight:900; letter-spacing:.05em; }
.circle-rd-origin-story h3 { margin:5px 0 7px; color:#fff; font:700 21px/1.35 Georgia,"Songti SC",serif; }
.circle-rd-origin-story p { margin:0; color:#dbeceb; font-size:12px; line-height:1.7; }
.circle-rd-origin-story ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.circle-rd-origin-story li { position:relative; display:grid; gap:4px; min-height:80px; align-content:center; padding:11px; border-radius:16px; background:rgba(255,255,255,.09); }
.circle-rd-origin-story li:not(:last-child)::after { content:"›"; position:absolute; z-index:1; right:-13px; top:28px; display:grid; place-items:center; width:18px; height:24px; color:#ffe073; font-size:24px; font-weight:900; }
.circle-rd-origin-story li b { color:#fff; font-size:13px; }
.circle-rd-origin-story li span { color:#bfe0dd; font-size:12px; }
.circle-rd-discover-grid,.circle-rd-center-grid,.circle-rd-line-grid,.circle-rd-lab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.circle-rd-compass-card,.circle-rd-shape-card,.circle-rd-center-board,.circle-rd-center-rules,.circle-rd-line-board,.circle-rd-concept-card { min-width:0; padding:20px; border:1px solid rgba(36,127,141,.11); border-radius:26px; background:rgba(255,255,255,.9); box-shadow:0 15px 35px rgba(31,91,96,.08); }
.circle-rd-card-title { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; }
.circle-rd-card-title > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; background:#dff2ee; font-size:27px; }
.circle-rd-card-title small,.circle-rd-concept-card > small { color:#2b8788; font-size:12px; font-weight:850; letter-spacing:.05em; }
.circle-rd-card-title h3,.circle-rd-concept-card h3,.circle-rd-center-rules h3 { margin:4px 0 0; color:var(--circle-deep); font:700 22px/1.3 Georgia,"Songti SC",serif; }
.circle-rd-compass-card svg { display:block; width:min(100%,520px); height:auto; margin:4px auto; overflow:visible; }
.circle-rd-compass-orbit { fill:rgba(107,190,194,.13); stroke:#2b8e97; stroke-width:7; stroke-dasharray:10 8; }
.circle-rd-compass-leg { fill:none; stroke-linecap:round; stroke-width:10; }
.circle-rd-compass-leg.fixed { stroke:#315e68; }
.circle-rd-compass-leg.moving { stroke:#ef9f38; transform-origin:270px 190px; animation:circle-rd-compass 6s linear infinite; }
.circle-rd-compass-pencil { fill:#f47d61; stroke:#fff; stroke-width:5; transform-origin:270px 190px; animation:circle-rd-compass 6s linear infinite; }
.circle-rd-compass-center { fill:#174f5b; stroke:#fff; stroke-width:4; }
.circle-rd-compass-card svg text { fill:#315f67; text-anchor:middle; font-size:15px; font-weight:900; }
@keyframes circle-rd-compass { to { transform:rotate(360deg); } }
.circle-rd-compass-card ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.circle-rd-compass-card li { min-height:86px; padding:10px; border-radius:14px; color:#506c70; background:#eef6f3; font-size:13px; line-height:1.5; }
.circle-rd-compass-card li b { display:block; margin-bottom:4px; color:#247f8d; font-size:14px; }
.circle-rd-shape-choices { display:grid; gap:8px; margin-top:18px; }
.circle-rd-shape-choices button,.circle-rd-line-actions button,.circle-rd-center-actions button { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; min-height:66px; padding:8px 12px; border:2px solid transparent; border-radius:16px; color:#315e66; background:#edf6f3; text-align:left; cursor:pointer; }
.circle-rd-shape-choices button b,.circle-rd-line-actions button,.circle-rd-center-actions button { font-size:13px; font-weight:850; }
.circle-rd-shape-choices button.correct,.circle-rd-line-actions button.correct,.circle-rd-center-actions button.correct,.circle-rd-ratio-question button.correct { border-color:#65a848; color:#32673b; background:#eaf6d5; }
.circle-rd-shape-choices button.wrong,.circle-rd-line-actions button.wrong,.circle-rd-center-actions button.wrong,.circle-rd-ratio-question button.wrong { border-color:#df735f; color:#9c493d; background:#ffede8; }
.circle-rd-shape-choices i { display:block; justify-self:center; width:46px; height:46px; border:5px solid #318a95; }
.circle-rd-shape-choices .shape-circle { border-radius:50%; }
.circle-rd-shape-choices .shape-oval { width:56px; height:38px; border-radius:50%; }
.circle-rd-shape-choices .shape-open { border-right-color:transparent; border-radius:50%; transform:rotate(-18deg); }
#circle-rd-shape-feedback,#circle-rd-center-feedback,#circle-rd-radius-feedback,#circle-rd-diameter-feedback { min-height:58px; margin:10px 0 0; padding:10px 12px; border-radius:13px; color:#587077; background:#edf4f1; font-size:13px; line-height:1.55; }
#circle-rd-shape-feedback.success,#circle-rd-center-feedback.success,#circle-rd-radius-feedback.success,#circle-rd-diameter-feedback.success { color:#356a3d; background:#eaf5d4; }
#circle-rd-shape-feedback.wrong,#circle-rd-center-feedback.wrong,#circle-rd-radius-feedback.wrong,#circle-rd-diameter-feedback.wrong { color:#9e493c; background:#ffebe5; }
.circle-rd-zone-book { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; padding:13px; border-radius:17px; background:#fff6d9; }
.circle-rd-zone-book > b { grid-column:1/-1; color:#826217; font-size:13px; }
.circle-rd-zone-book span { display:grid; grid-template-columns:22px 1fr; gap:2px 6px; color:#6d644f; font-size:12px; line-height:1.45; }
.circle-rd-zone-book i { grid-row:1/span 2; align-self:center; width:20px; height:20px; border-radius:50%; }
.circle-rd-zone-book strong { color:#4f5e57; }
.zone-edge { border:4px solid #247f8d; background:transparent; }
.zone-inside { border:2px solid #247f8d; background:#8fd3d0; }
.zone-outside { border:2px dashed #8a9d9b; background:#fff; }

.circle-rd-center { background:linear-gradient(145deg,#e6f5f2,#fffdf4); }
.circle-rd-center-grid { grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); }
.circle-rd-center-board svg,.circle-rd-line-board svg { display:block; width:100%; height:auto; max-height:430px; }
.center-disc,.line-disc { fill:#d8f0ef; stroke:#247f8d; stroke-width:7; }
.center-fold { opacity:0; stroke:#efb43d; stroke-width:5; stroke-dasharray:10 8; transition:opacity .25s ease; }
.center-candidates circle { fill:#fff; stroke:#ef8066; stroke-width:4; }
.center-candidates text { fill:#8d453b; text-anchor:middle; font-size:16px; font-weight:900; pointer-events:none; }
.center-o { opacity:0; fill:#174f5b; font-size:17px; font-weight:900; }
#circle-rd-center-svg[data-choice="a"] .center-fold,#circle-rd-center-svg[data-choice="a"] .center-o { opacity:1; }
#circle-rd-center-svg[data-choice="a"] .center-candidates circle:first-child { fill:#c6e46c; stroke:#397743; }
.circle-rd-center-actions,.circle-rd-line-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.circle-rd-center-actions button,.circle-rd-line-actions button { display:block; min-height:52px; padding:8px; text-align:center; }
.circle-rd-center-rules { display:flex; flex-direction:column; justify-content:center; background:#164f5b; }
.circle-rd-center-rules > span { font-size:48px; }
.circle-rd-center-rules h3 { margin-top:12px; color:#fff; }
.circle-rd-center-rules ul { display:grid; gap:10px; margin:18px 0; padding:0; list-style:none; }
.circle-rd-center-rules li { padding:11px 12px; border-radius:13px; color:#d9ece9; background:rgba(255,255,255,.08); font-size:13px; line-height:1.6; }
.circle-rd-center-rules li b { color:#ffe073; }
.circle-rd-center-rules blockquote { margin:0; padding:13px; border:0; border-radius:14px; color:#435d58; background:#e9f4d2; font-size:13px; line-height:1.65; }

.circle-rd-radius { background:#fffaf0; }
.circle-rd-diameter { background:#e9f6f3; }
.circle-rd-line-grid { grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); }
.line-center { fill:#174f5b; stroke:#fff; stroke-width:4; }
.candidate-line { fill:none; stroke-width:8; stroke-linecap:round; }
.line-a { stroke:#ef9e38; }
.line-b { stroke:#5a9fba; }
.line-c { stroke:#9b78b8; }
.line-labels text { fill:#315f67; stroke:#fff; stroke-width:5; paint-order:stroke; text-anchor:middle; font-size:17px; font-weight:900; }
.extra-radii { opacity:0; transition:opacity .3s ease; }
.extra-radii line { stroke:#efbe49; stroke-width:5; stroke-linecap:round; }
#circle-rd-radius-svg.show-more .extra-radii { opacity:.75; }
#circle-rd-radius-svg[data-choice="a"] .line-a,#circle-rd-diameter-svg[data-choice="a"] .line-a { stroke:#64a648; stroke-width:11; }
#circle-rd-radius-svg[data-choice="b"] .line-b,#circle-rd-radius-svg[data-choice="c"] .line-c,#circle-rd-diameter-svg[data-choice="b"] .line-b,#circle-rd-diameter-svg[data-choice="c"] .line-c { stroke:#df6554; stroke-width:11; }
.circle-rd-concept-card { display:flex; flex-direction:column; justify-content:center; color:#315f67; background:#fff; }
.circle-rd-concept-icon { font-size:52px; }
.circle-rd-concept-card h3 { margin:8px 0 12px; }
.circle-rd-concept-card p { margin:0; font-size:14px; line-height:1.8; }
.circle-rd-concept-card > button { min-height:48px; margin-top:16px; border:0; border-radius:14px; color:#fff; background:#247f8d; font-size:13px; font-weight:850; cursor:pointer; }
.circle-rd-memory { display:grid; gap:4px; margin-top:16px; padding:13px; border-radius:15px; color:#6b5314; background:#fff1bd; }
.circle-rd-memory b { font-size:18px; }
.circle-rd-memory span { font-size:13px; }
.diameter-card { color:#e5f2ef; background:#164f5b; }
.diameter-card h3 { color:#fff; }
.diameter-card > small { color:#ffe073; }
.diameter-card ol { display:grid; gap:7px; margin:15px 0 0; padding:0; list-style:none; }
.diameter-card li { display:flex; align-items:center; gap:9px; min-height:42px; padding:7px 10px; border-radius:11px; background:rgba(255,255,255,.08); font-size:13px; }
.diameter-card li i { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#174f5b; background:#c6e46c; font-style:normal; }

.circle-rd-lab { background:linear-gradient(145deg,#e8f6f3,#fff8dd); }
.circle-rd-lab-grid { grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); }
.circle-rd-lab-board { min-width:0; overflow:hidden; border-radius:27px; color:#fff; background:linear-gradient(145deg,#174f5b,#216f78); box-shadow:0 20px 45px rgba(18,71,80,.22); }
.circle-rd-lab-board > svg { display:block; width:100%; height:auto; min-height:430px; }
.lab-halo { fill:none; stroke:rgba(255,255,255,.08); stroke-width:2; stroke-dasharray:8 9; }
.lab-disc { fill:rgba(120,211,209,.24); stroke:#d8f7f2; stroke-width:7; transition:r .2s ease; }
.lab-diameter { stroke:#f47d61; stroke-width:11; stroke-linecap:round; }
.lab-radius { stroke:#ffe073; stroke-width:8; stroke-linecap:round; }
.lab-endpoint { fill:#fff; stroke:#f47d61; stroke-width:4; }
.lab-center { fill:#153f48; stroke:#fff; stroke-width:5; }
#circle-rd-lab-measure text,.lab-center-label { fill:#fff; stroke:#174f5b; stroke-width:5; paint-order:stroke; text-anchor:middle; font-size:20px; font-weight:900; }
#circle-rd-lab-svg[data-mode="radius"] .lab-diameter,#circle-rd-lab-svg[data-mode="radius"] .lab-endpoint.left,#circle-rd-lab-svg[data-mode="radius"] .lab-left-label { opacity:.14; }
#circle-rd-lab-svg[data-mode="chord"] #circle-rd-lab-measure { opacity:0; }
#circle-rd-lab-svg[data-mode="chord"]::after { content:""; }
#circle-rd-lab-svg[data-mode="chord"] .lab-disc { stroke:#d8f7f2; }
#circle-rd-lab-svg[data-mode="chord"] { background:linear-gradient(27deg,transparent 47.9%,#6ab6c9 48%,#6ab6c9 50%,transparent 50.1%); }
.circle-rd-lab-status { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-height:90px; padding:12px 14px; background:#103d47; }
.circle-rd-lab-status > span { font-size:13px; line-height:1.55; }
.circle-rd-lab-status > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.circle-rd-lab-status button { min-height:44px; padding:7px 10px; border:0; border-radius:11px; color:#dcecea; background:rgba(255,255,255,.09); font-size:13px; font-weight:850; cursor:pointer; }
.circle-rd-lab-status button.active { color:#174f5b; background:#ffe073; }
.circle-rd-math-panel { display:flex; flex-direction:column; gap:13px; min-width:0; padding:17px; border-radius:27px; background:#fff; box-shadow:0 16px 36px rgba(31,91,96,.1); }
.circle-rd-controls { display:grid; gap:9px; padding:13px; border-radius:17px; background:#e8f5f2; }
.circle-rd-controls label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#287d84; font-size:13px; font-weight:850; }
.circle-rd-controls output { color:#174f5b; }
.circle-rd-controls input { min-height:44px; accent-color:#247f8d; }
.circle-rd-formula-machine { padding:15px; border-radius:17px; color:#315e66; background:#fff2c5; }
.circle-rd-formula-machine small { font-size:12px; font-weight:850; }
.circle-rd-formula-machine > div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:9px 0; font-size:24px; font-weight:900; }
.circle-rd-formula-machine span { display:grid; place-items:center; min-width:43px; height:43px; border-radius:12px; color:#174f5b; background:#fff; }
.circle-rd-formula-machine i { color:#876513; font-style:normal; }
.circle-rd-formula-machine strong { color:#d75e4d; }
.circle-rd-formula-machine p { margin:0; font-size:13px; line-height:1.6; }
.circle-rd-ratio-question { padding:14px; border-radius:17px; background:#edf6f3; }
.circle-rd-ratio-question > b { color:#174f5b; font-size:14px; }
.circle-rd-ratio-question > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:10px; }
.circle-rd-ratio-question button { min-height:46px; border:2px solid transparent; border-radius:12px; color:#315f67; background:#fff; font-size:13px; font-weight:850; cursor:pointer; }
#circle-rd-ratio-feedback { min-height:50px; margin:9px 0 0; color:#617477; font-size:13px; line-height:1.55; }
#circle-rd-ratio-feedback.success { color:#39713f; }
#circle-rd-ratio-feedback.wrong { color:#a24b3e; }

.circle-rd-life { background:linear-gradient(145deg,#fffaf0,#e6f4ef); }
.circle-rd-use-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:15px; }
.circle-rd-use-gallery article { position:relative; min-width:0; min-height:168px; padding:15px; overflow:hidden; border:1px solid rgba(36,127,141,.1); border-radius:22px; color:#42676b; background:#fff; box-shadow:0 10px 24px rgba(31,91,96,.06); transition:transform .2s ease,box-shadow .2s ease; }
.circle-rd-use-gallery article:hover { transform:translateY(-5px) rotate(-1deg); box-shadow:0 17px 30px rgba(31,91,96,.11); }
.circle-rd-use-gallery article::after { content:""; position:absolute; right:-24px; bottom:-29px; width:86px; height:86px; border:10px solid rgba(36,127,141,.055); border-radius:50%; }
.circle-rd-use-gallery span { display:grid; place-items:center; width:55px; height:55px; margin-bottom:10px; border-radius:50%; background:#fff1bd; font-size:30px; }
.circle-rd-use-gallery article:nth-child(2n) span { background:#dff2ee; }
.circle-rd-use-gallery article:nth-child(3n) span { background:#ffe5df; }
.circle-rd-use-gallery b { color:#174f5b; font-size:15px; }
.circle-rd-use-gallery p { margin:5px 0 0; font-size:12px; line-height:1.6; }
.circle-rd-life-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.circle-rd-life-grid button { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:3px 12px; min-height:112px; padding:13px; border:2px solid transparent; border-radius:20px; color:#315e66; background:#fff; text-align:left; cursor:pointer; box-shadow:0 12px 27px rgba(31,91,96,.07); }
.circle-rd-life-grid button.active { border-color:#247f8d; background:#e7f5f2; }
.circle-rd-life-grid span { grid-row:1/span 3; display:grid; place-items:center; width:56px; height:56px; border-radius:17px; background:#fff1bd; font-size:31px; }
.circle-rd-life-grid small { color:#31888a; font-size:12px; font-weight:850; }
.circle-rd-life-grid b { font-size:14px; line-height:1.45; }
.circle-rd-life-grid em { color:#7a8986; font-size:12px; font-style:normal; }
.circle-rd-life-panel { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:14px; min-height:130px; margin-top:13px; padding:17px; border-radius:21px; color:#315e66; background:#dff2ee; }
.circle-rd-life-panel > span { display:grid; place-items:center; width:68px; height:68px; border-radius:20px; background:#fff; font-size:38px; }
.circle-rd-life-panel small { color:#2c8587; font-size:12px; font-weight:850; }
.circle-rd-life-panel h3 { margin:5px 0; color:#174f5b; font:700 20px/1.35 Georgia,"Songti SC",serif; }
.circle-rd-life-panel p { margin:0; font-size:13px; line-height:1.65; }

.circle-rd-quiz { background:linear-gradient(145deg,#e6f4ef,#fff8dc); }
.circle-rd-quiz-shell { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:stretch; }
.circle-rd-quiz-stars { display:grid; align-content:center; gap:12px; padding:18px; border-radius:24px; background:#174f5b; }
.circle-rd-quiz-stars i { display:grid; place-items:center; width:64px; height:64px; margin:auto; border-radius:19px; color:#719499; background:rgba(255,255,255,.08); font-size:34px; font-style:normal; transition:transform .25s ease,color .25s ease,background .25s ease; }
.circle-rd-quiz-stars i.earned { color:#174f5b; background:#ffe073; transform:rotate(-6deg) scale(1.06); }
#circle-rd-quiz-content { min-width:0; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 15px 34px rgba(31,91,96,.08); }
.circle-rd-quiz .quiz-question { min-height:330px; }
.circle-rd-quiz-finished { min-height:330px; }
.circle-rd-quiz-finished button { min-height:46px; margin-top:12px; border:0; border-radius:13px; color:#fff; background:#247f8d; font-size:13px; font-weight:850; cursor:pointer; }
.circle-rd-lesson .game-canvas-hint::before { content:"先找圆心，再判断量的是半径还是直径"; flex:1 0 100%; color:var(--green-2); }

@media (prefers-reduced-motion:reduce) {
  .circle-rd-compass-leg.moving,.circle-rd-compass-pencil,.circle-rd-hero::after { animation:none; }
}
@container lesson-page (max-width:900px) {
  .circle-rd-discover-grid,.circle-rd-center-grid,.circle-rd-line-grid,.circle-rd-lab-grid,.circle-rd-quiz-shell { grid-template-columns:1fr; }
  .circle-rd-origin-story { grid-template-columns:72px minmax(0,1fr); }
  .circle-rd-origin-story ol { grid-column:1/-1; }
  .circle-rd-use-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .circle-rd-center-rules { min-height:330px; }
  .circle-rd-quiz-stars { grid-template-columns:repeat(3,64px); justify-content:center; }
}
@media (max-width:760px) {
  .circle-rd-hero { grid-template-columns:1fr; min-height:0; padding:20px 14px 14px; }
  .circle-rd-hero h1 span { font-size:clamp(34px,10vw,47px); white-space:normal; }
  .circle-rd-hero h1 em { font-size:clamp(23px,6.4vw,32px); }
  .circle-rd-hero .perimeter-hero-copy > p { font-size:15px; line-height:1.7; }
  .circle-rd-hero .perimeter-goals { display:grid; grid-template-columns:1fr; }
  .circle-rd-hero .perimeter-goals span { width:100%; }
  .circle-rd-start { width:100%; justify-content:space-between; }
  .circle-rd-hero-art { order:-1; min-height:0; }
  .circle-rd-hero-art img { height:auto; min-height:0; aspect-ratio:3/2; }
  .circle-rd-hero-label { display:none; }
  .circle-rd-hero-art figcaption { position:static; display:grid; margin-top:7px; }
  .circle-rd-hero-art figcaption b { text-align:left; }
  .circle-rd-route-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .circle-rd-route-nav > span { grid-column:1/-1; }
  .circle-rd-discover-grid,.circle-rd-center-grid,.circle-rd-line-grid,.circle-rd-lab-grid,.circle-rd-life-grid,.circle-rd-quiz-shell { grid-template-columns:1fr; }
  .circle-rd-origin-story { grid-template-columns:1fr; padding:17px; text-align:center; }
  .origin-moon { margin:auto; }
  .circle-rd-origin-story ol { grid-column:auto; grid-template-columns:1fr; text-align:left; }
  .circle-rd-origin-story li { min-height:62px; }
  .circle-rd-origin-story li:not(:last-child)::after { right:50%; top:auto; bottom:-18px; transform:rotate(90deg); }
  .circle-rd-use-gallery { display:flex; margin-inline:-1px; padding:1px 1px 8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .circle-rd-use-gallery::-webkit-scrollbar { display:none; }
  .circle-rd-use-gallery article { flex:0 0 190px; min-height:154px; scroll-snap-align:start; }
  .circle-rd-compass-card ol,.circle-rd-zone-book { grid-template-columns:1fr; }
  .circle-rd-zone-book > b { grid-column:auto; }
  .circle-rd-center-actions,.circle-rd-line-actions { grid-template-columns:1fr; }
  .circle-rd-center-actions button,.circle-rd-line-actions button { min-height:48px; }
  .circle-rd-lab-board > svg { min-height:330px; }
  #circle-rd-lab-measure .lab-left-label,#circle-rd-lab-measure .lab-right-label { display:none; }
  .circle-rd-lab-status { grid-template-columns:1fr; }
  .circle-rd-lab-status > div { display:grid; grid-template-columns:1fr; }
  .circle-rd-life-grid { gap:8px; }
  .circle-rd-quiz-stars { grid-template-columns:repeat(3,58px); justify-content:center; }
  .circle-rd-quiz-stars i { width:58px; height:58px; }
  .circle-rd-lesson .lesson-game { padding-inline:13px; }
  .circle-rd-lesson .game-canvas-viewport { overflow:hidden; }
  .circle-rd-lesson .lesson-game-canvas { width:100%; min-width:0; max-width:100%; touch-action:manipulation; }
}
@media (max-width:360px) {
  .circle-rd-lesson .perimeter-section { padding-inline:12px; }
  .circle-rd-route-nav { grid-template-columns:1fr; }
  .circle-rd-route-nav > span { grid-column:auto; }
  .circle-rd-compass-card,.circle-rd-shape-card,.circle-rd-center-board,.circle-rd-center-rules,.circle-rd-line-board,.circle-rd-concept-card { padding:13px; }
  .circle-rd-ratio-question > div { grid-template-columns:1fr; }
  .circle-rd-life-panel { grid-template-columns:1fr; text-align:center; }
  .circle-rd-life-panel > span { margin:auto; }
}

/* 390 px：儿童手机视图，文字、画布与公式全部在视口内。 */
@media (max-width: 390px) {
  .trapezoid-area-hero { padding: 19px 14px 14px; border-radius: 25px; }
  .trapezoid-area-hero .perimeter-hero-copy { padding-inline: 2px; }
  .trapezoid-area-hero h1 span { font-size: 36px; }
  .trapezoid-area-hero h1 em { margin-top: 8px; font-size: 23px; }
  .trapezoid-area-hero .perimeter-hero-copy > p { margin-top: 15px; font-size: 15px; line-height: 1.7; }
  .trapezoid-area-hero .perimeter-goals { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
  .trapezoid-area-hero .perimeter-goals span { width: 100%; min-height: 46px; }
  .trapezoid-area-hero .perimeter-start-button { width: 100%; justify-content: space-between; }
  .trapezoid-area-hero .perimeter-hero-art { padding: 7px; border-radius: 21px; }
  .trapezoid-area-hero .perimeter-hero-art img { border-radius: 15px; }
  .trapezoid-area-hero .perimeter-hero-art figcaption { position: static; display: grid; margin-top: 7px; padding: 10px; }
  .trapezoid-area-hero .perimeter-hero-art figcaption b { text-align: left; line-height: 1.45; }
  .trapezoid-area-route-nav { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px; }
  .trapezoid-area-route-nav > span { display: none; }
  .trapezoid-area-route-nav button:last-child { grid-column: 1 / -1; }
  .trapezoid-area-lesson .perimeter-section { padding-inline: 15px; }
  .trapezoid-history-picture { padding: 6px; border-radius: 21px; }
  .trapezoid-history-picture img { border-radius: 15px; }
  .trapezoid-history-picture figcaption { position: static; max-width: none; margin-top: 6px; color: #5f4a31; background: #f1e1bd; box-shadow: none; }
  .trapezoid-history-story { padding: 13px; border-radius: 21px; }
  .trapezoid-history-steps > span { padding: 8px; }
  .trapezoid-history-question { padding: 12px; }
  .trapezoid-history-question > div { grid-template-columns: 1fr; }
  .trapezoid-history-question button { min-height: 50px; }
  .trapezoid-edge-card,
  .trapezoid-height-card { padding: 15px 11px; border-radius: 21px; }
  .trapezoid-card-title { grid-template-columns: 46px minmax(0,1fr); }
  .trapezoid-card-title > span { width: 44px; height: 44px; border-radius: 14px; font-size: 23px; }
  .trapezoid-card-title h3 { font-size: 19px; }
  .trapezoid-choice-row { grid-template-columns: 1fr; }
  .trapezoid-choice-row button { min-height: 46px; text-align: left; }
  .trapezoid-one-line { grid-template-columns: 1fr; padding: 13px; }
  .trapezoid-one-line > b { justify-self: start; }
  .trapezoid-area-lab { padding-inline: 10px !important; }
  .trapezoid-area-view-switch { gap: 4px; padding: 7px; }
  .trapezoid-area-view-switch button { min-height: 56px; padding-inline: 4px; }
  .trapezoid-area-stage { min-height: 315px; }
  .trapezoid-area-view-purpose { top: 8px; left: 8px; grid-template-columns: 37px minmax(0,1fr); width: calc(100% - 16px); padding: 8px 9px; }
  .trapezoid-area-view-purpose > span { width: 35px; height: 35px; font-size: 18px; }
  .trapezoid-area-view-purpose b,
  .trapezoid-area-view-purpose small { font-size: 12px; line-height: 1.35; }
  #trapezoid-area-drag-hint { bottom: 8px; width: calc(100% - 16px); max-width: none; padding: 7px 8px; overflow: visible; font-size: 12px; line-height: 1.35; text-align: center; text-overflow: clip; white-space: normal; }
  .trapezoid-area-stage-status { padding: 11px; }
  .trapezoid-area-stage-status > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-area-math-panel { padding: 12px; }
  .trapezoid-half-guess > div { grid-template-columns: 1fr; }
  .trapezoid-half-guess button { display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; min-height: 46px; padding: 7px 9px; text-align: left; }
  .trapezoid-half-guess button i { margin: 0; }
  .trapezoid-area-formula { min-height: 238px; }
  .trapezoid-area-formula > div { align-items: flex-start; flex-direction: column; }
  .trapezoid-area-formula > div b { font-size: 16px; }
  .trapezoid-formula-board { padding: 13px; border-radius: 21px; }
  .trapezoid-formula-pieces button { grid-template-columns: 42px minmax(0,1fr); padding: 10px; }
  .trapezoid-formula-pieces button > span { width: 40px; height: 40px; font-size: 22px; }
  .trapezoid-formula-pieces button > b { font-size: 19px; }
  .trapezoid-formula-reward { grid-template-columns: 54px minmax(0,1fr); padding: 13px; }
  .trapezoid-formula-reward > span { width: 52px; height: 52px; border-radius: 16px; font-size: 29px; }
  .trapezoid-formula-reward strong { font-size: 23px; }
  .trapezoid-life-banner { padding: 6px; border-radius: 20px; }
  .trapezoid-life-banner img { aspect-ratio: 3 / 2; border-radius: 15px; }
  .trapezoid-life-banner figcaption { position: static; max-width: none; margin-top: 6px; color: #315b63; background: #dff0eb; }
  .trapezoid-life-translator { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-life-translator > b { grid-column: 1 / -1; }
  .trapezoid-life-translator > span { min-height: 48px; }
  .trapezoid-life-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-life-scenes button { min-height: 62px; padding: 7px; }
  .trapezoid-life-visual { min-height: 285px; padding: 39px 12px 25px; }
  .trapezoid-life-shape { width: min(82%,245px); }
  .trapezoid-life-shape > b,
  .trapezoid-life-shape > strong,
  .trapezoid-life-shape > em { font-size: 12px; }
  .trapezoid-life-card .perimeter-life-question { grid-template-columns: 1fr; }
  .trapezoid-life-card .perimeter-life-question b { justify-self: start; }
  .trapezoid-quiz-stars { grid-template-columns: repeat(3,49px); gap: 9px; padding: 12px; }
  .trapezoid-quiz-stars i { width: 49px; height: 49px; font-size: 26px; }
  .trapezoid-area-quiz .quiz-question { padding: 17px 12px 66px; }
  .trapezoid-area-quiz .quiz-question h3 { font-size: 20px; }
  .trapezoid-area-quiz .quiz-options { grid-template-columns: 1fr; }
  .trapezoid-area-quiz .quiz-options button { min-height: 56px; }
  .trapezoid-home-mission { grid-template-columns: 46px minmax(0,1fr); padding: 16px; }
  .trapezoid-home-mission > b { grid-column: 2; justify-self: start; }
  .trapezoid-area-lesson .game-coach { padding: 14px; }
  .trapezoid-area-lesson .game-life-picture { display: none; }
  .trapezoid-area-lesson .game-life-mission { margin-top: 12px; }
  .trapezoid-area-lesson .game-canvas-hint { font-size: 12px; }
  .trapezoid-area-lesson .game-canvas-viewport { overflow-x: hidden; }
  .trapezoid-area-lesson .lesson-game-canvas { width: 100%; min-width: 0; max-width: 100%; touch-action: manipulation; }
}

/* 320 px：压缩装饰，不压缩可读性和触控区。 */
@media (max-width: 340px) {
  .trapezoid-area-hero h1 span { font-size: 33px; }
  .trapezoid-area-route-nav button { min-height: 46px; padding-inline: 4px; font-size: 13px; }
  .trapezoid-area-lesson .perimeter-section { padding-inline: 12px; }
  .trapezoid-history-steps > span { grid-template-columns: 38px minmax(0,1fr); }
  .trapezoid-history-steps b { width: 36px; height: 36px; }
  .trapezoid-area-stage { min-height: 300px; }
  .trapezoid-area-view-purpose small { display: none; }
  .trapezoid-area-stage-status > div { grid-template-columns: 1fr; }
  .trapezoid-area-stage-status button { min-height: 46px; }
  .trapezoid-twins-card > b { font-size: 16px; }
  .trapezoid-twins-card strong { font-size: 23px; }
  .trapezoid-life-translator { grid-template-columns: 1fr; }
  .trapezoid-life-translator > b { grid-column: auto; }
  .trapezoid-life-scenes { grid-template-columns: 1fr; }
  .trapezoid-life-scenes button { min-height: 54px; }
  .trapezoid-life-shape { width: min(86%,220px); }
  .trapezoid-formula-feedback { grid-template-columns: 1fr; }
  .trapezoid-formula-feedback > span { display: none; }
  .trapezoid-formula-reward { grid-template-columns: 1fr; text-align: center; }
  .trapezoid-formula-reward > span { margin-inline: auto; }
}

/* 侧栏仍显示时，以课程实际可用宽度为准提前折叠。 */
@container lesson-page (max-width: 850px) {
  .trapezoid-history-grid,
  .trapezoid-basics-grid,
  .trapezoid-area-lab-grid,
  .trapezoid-life-card,
  .trapezoid-quiz-shell { grid-template-columns: 1fr; }
  .trapezoid-history-story { display: flex; }
  .trapezoid-area-stage-wrap { width: 100%; max-width: 880px; margin-inline: auto; }
  .trapezoid-life-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trapezoid-quiz-stars { grid-template-columns: repeat(3,56px); justify-content: center; }
}