.learn-app {
  --la-bg: #f4f7f3;
  --la-card: #fff;
  --la-ink: #1c2b22;
  --la-mute: #5d6f64;
  --la-pri: #1f6b43;
  --la-pri2: #e3f1e8;
  --la-line: #d9e3dc;
  --la-warn: #fff4dc;
  --la-warnb: #c98a00;
  --la-bad: #fde8e6;
  --la-badb: #c0392b;
  color-scheme: light;
  background: var(--la-bg);
  color: var(--la-ink);
  border-radius: 18px;
  overflow: hidden;
  line-height: 1.65;
  font-size: 15px;
}
.learn-app *, .learn-app *::before, .learn-app *::after { box-sizing: border-box; }
.learn-app .la-head { background: var(--la-pri); color: #fff; padding: 20px 20px 16px; }
.learn-app .la-head h2 { margin: 0; font-size: 1.25rem; color: #fff; }
.learn-app .la-head p { margin: 4px 0 10px; font-size: .86rem; opacity: .92; color: #fff; }
.learn-app .la-head p:last-child { margin-bottom: 0; }
.learn-app .la-bar { height: 8px; background: rgba(255,255,255,.3); border-radius: 4px; overflow: hidden; }
.learn-app .la-bar i { display: block; height: 100%; background: #fff; width: 0; transition: width .3s; }
.learn-app .la-main { padding: 12px 16px 24px; }
.learn-app .la-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px; }
.learn-app .la-tabs button,
.learn-app .b {
  flex: none;
  border: 1px solid var(--la-line);
  background: var(--la-card);
  color: var(--la-ink);
  border-radius: 20px;
  padding: 7px 13px;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.learn-app .la-tabs button.on,
.learn-app .b.on { background: var(--la-pri); color: #fff; border-color: var(--la-pri); }
.learn-app .la-tabs button.ph { color: var(--la-mute); }
.learn-app .card { background: var(--la-card); border: 1px solid var(--la-line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.learn-app h2 { font-size: 1.12rem; margin: 0 0 8px; color: var(--la-ink); }
.learn-app h3 { font-size: 1rem; margin: 0 0 6px; color: var(--la-pri); }
.learn-app p { margin: 0 0 8px; }
.learn-app ul, .learn-app ol { margin: 6px 0; padding-left: 20px; }
.learn-app .box { border-left: 4px solid; border-radius: 6px; padding: 9px 12px; margin: 10px 0; font-size: .92rem; }
.learn-app .tip { background: var(--la-pri2); border-color: var(--la-pri); }
.learn-app .warn { background: var(--la-warn); border-color: var(--la-warnb); }
.learn-app .la-step { display: flex; gap: 10px; margin: 10px 0; }
.learn-app .la-step > b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--la-pri); color: #fff; text-align: center; line-height: 26px; font-size: .8rem; }
.learn-app .tbl { overflow-x: auto; }
.learn-app table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.learn-app th, .learn-app td { border: 1px solid var(--la-line); padding: 7px 9px; text-align: left; }
.learn-app th { background: var(--la-pri2); }
.learn-app .opt { display: block; width: 100%; text-align: left; border: 1px solid var(--la-line); background: var(--la-card); color: var(--la-ink); border-radius: 8px; padding: 10px 12px; margin: 6px 0; font: inherit; cursor: pointer; }
.learn-app .opt.ok { background: var(--la-pri2); border-color: var(--la-pri); }
.learn-app .opt.no { background: var(--la-bad); border-color: var(--la-badb); }
.learn-app .la-btn,
.learn-app .go { background: var(--la-pri); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font: inherit; cursor: pointer; margin-top: 8px; }
.learn-app .la-btn.sub { background: var(--la-pri2); color: var(--la-ink); }
.learn-app .exp { font-size: .88rem; color: var(--la-mute); margin-top: 6px; }
.learn-app .pill { font-size: .75rem; background: var(--la-pri2); border-radius: 10px; padding: 2px 8px; color: var(--la-pri); }
.learn-app .la-foot { text-align: center; font-size: .78rem; color: var(--la-mute); padding: 0 16px 18px; }
.learn-app svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; border-radius: 10px; }
.learn-app .row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.learn-app .m { color: var(--la-mute); font-size: .85rem; }
.learn-app .hz { display: flex; gap: 8px; align-items: center; font-size: .9rem; padding: 3px 0; }
.learn-app .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.learn-app .fb { margin-top: 8px; padding: 10px; border-radius: 8px; background: var(--la-pri2); font-size: .9rem; }
.learn-app .fb.no { background: var(--la-bad); }
.learn-app button:disabled { opacity: .6; cursor: default; }
.learn-frame { border-radius: 18px; overflow: hidden; background: #f3f6f1; }
.learn-frame iframe { display: block; width: 100%; border: 0; }

.learn-intro { color: var(--muted); margin: 0 0 18px; }
.prose .learn-group-lead { margin: -6px 0 16px; font-size: 15px; }
.learn-card--wide { grid-column: 1 / -1; }
.learn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.learn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid rgba(24,122,75,.16);
  border-radius: 18px;
  background: #f7faf6;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.learn-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,60,38,.12); }
.learn-card .learn-card-tag { font-size: 12px; font-weight: 700; color: var(--green-ink-2, #1f6b43); letter-spacing: .02em; }
.learn-card h3 { margin: 0; font-size: 20px; color: var(--green-ink, #14532d); }
.learn-card p { margin: 0; color: var(--muted); font-size: 15px; }
.learn-card ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 14px; }
.learn-card .learn-card-go { margin-top: auto; font-weight: 700; color: var(--green-ink-2, #1f6b43); }
@media (max-width: 760px) {
  .learn-cards { grid-template-columns: 1fr; }
  .learn-app { border-radius: 14px; margin: 0 -6px; }
  .learn-app .la-main { padding: 10px 10px 20px; }
  .learn-app .la-tabs { flex-wrap: nowrap; overflow-x: auto; }
}