/* ======================
铃音书房 · 工具集
独立于课程平台，统一存放各类互动小工具
====================== */

@import url('fonts/source-han-sans/font.css');

@font-face{
  font-family: 'PingFangSaTuoTi';
  src: url('fonts/handwriting/PingFangSaTuoTi-2.ttf') format('truetype');
  font-display: swap;
}

:root{
  --bg: #eceef0;
  --bg-panel: #f9faf9;
  --paper-shadow: 0 1px 3px rgba(60,66,74,0.06), 0 1px 2px rgba(60,66,74,0.04);

  --ink: #3a3f47;
  --ink-soft: #7a828c;
  --line: #dcdfe2;
  --line-soft: #e6e8ea;

  --ember: #b8734a;
  --ember-soft: #d9a479;
  --ember-dim: #eadcd0;

  --font-main: 'Source Han Sans SC VF', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: 'PingFangSaTuoTi', var(--font-main);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 工具集首页 ---------- */

#hubHeader{
  padding: 60px 44px 30px;
  text-align: center;
}

#hubHeader h1{
  font-size: 20px;
  letter-spacing: 3px;
  margin: 0 0 10px;
}

#hubHeader p{
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

#toolGrid{
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 44px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.toolCard{
  background: var(--bg-panel);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: var(--paper-shadow);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform .25s ease, box-shadow .25s ease;
}

.toolCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(60,66,74,0.1);
}

.toolCard .tag{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ember);
  background: var(--ember-dim);
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.toolCard .toolTitle{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.toolCard .toolDesc{
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.emptyHint{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 40px 0;
}


/* =================
互动体验引擎（生成器产出的所有互动课件共用这套样式）
================= */

.stepStage{
  max-width: 600px;
  width: 90%;
  margin: 60px auto;
  padding: 60px 50px;
  background: var(--bg-panel);
  border-radius: 16px;
  box-shadow: var(--paper-shadow);
  text-align: center;
  position: relative;
}

.stepCard{ display:none; animation: seFadeIn .5s ease; }
.stepCard.active{ display:block; }

@keyframes seFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.seLabel{
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.seBigText{
  font-size: 44px;
  font-weight: 700;
  color: var(--ember);
  margin: 16px 0 26px;
}

.seBody{
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 26px;
  white-space: pre-wrap;
}

.seEquation{
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0;
}

.seImage{
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: var(--paper-shadow);
}

.seInput{
  width: 110px;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-main);
  margin-right: 8px;
}
.seInput:focus{ outline:none; border-color: var(--ember-soft); box-shadow: 0 0 0 3px var(--ember-dim); }

.seBtn{
  padding: 11px 26px;
  border-radius: 22px;
  border: 1px solid var(--ember-soft);
  background: #fff;
  color: var(--ember);
  font-size: 14px;
  cursor: pointer;
  transition: all .25s ease;
  font-family: var(--font-main);
}
.seBtn:hover{ background: var(--ember); color:#fff; }
.seBtn.primary{ background: var(--ink); border-color: var(--ink); color:#fff; }
.seBtn.primary:hover{ background: var(--ember); border-color: var(--ember); }

.seChoiceRow{ display:flex; flex-direction:column; gap:10px; margin: 20px 0; }
.seChoiceBtn{
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all .2s ease;
  font-family: var(--font-main);
}
.seChoiceBtn:hover{ border-color: var(--ember-soft); }
.seChoiceBtn.correct{ background:#e9f2e9; border-color:#8ab98a; color:#3d6b3d; }
.seChoiceBtn.wrong{ background: var(--ember-dim); border-color: var(--ember-soft); color: var(--ember); }

.seFeedback{ margin-top: 14px; font-size: 14px; min-height: 20px; color: var(--ember); }
.seFeedback.correct{ color: #4a7a4a; }

.seInsight{
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--ember-dim);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
  text-align: left;
  display: none;
}
.seInsight.show{ display:block; animation: seFadeIn .5s ease; }

.seDots{ display:flex; justify-content:center; gap:8px; margin-top: 36px; }
.seDot{ width:6px; height:6px; border-radius:50%; background: var(--line); }
.seDot.active{ background: var(--ember); width:18px; border-radius:3px; }

.seFinal{
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 2;
  color: var(--ink);
}