@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(/fonts/PlusJakartaSans-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --paper:#EDF1F8;
  --card:#FFFFFF;
  --ink:#1E293B;
  --muted:#55647A;
  --primary:#4F46E5;
  --primary-soft:#EEF2FF;
  --teal:#0F766E;
  --teal-soft:#E7F8F5;
  --rose:#FB7185;
  --rule:#C7D2E5;      /* 练习本格线蓝 */
  --rule-soft:#E8EEF7;
  --line:#E2E8F0;
  --radius:12px;
  --shadow:0 1px 2px rgba(30,41,59,.06), 0 10px 30px -12px rgba(30,41,59,.18);
  --disp:"Plus Jakarta Sans", "Segoe UI", sans-serif;
  --body:"Plus Jakarta Sans", "Segoe UI", sans-serif;
}
*{box-sizing:border-box; margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* 纸张颗粒感（极淡） */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(51,65,85,.03) 1px, transparent 1.2px);
  background-size:22px 22px;
}
h1,h2,h3{font-family:var(--disp); line-height:1.15; color:var(--ink); letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:1}

/* ---------- 吸顶顶栏 ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(237,241,248,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:28px; height:56px}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--disp); font-weight:700; font-size:19px; flex-shrink:0}
.logo svg{display:block}
.logo b{color:var(--primary)}
nav.main{display:flex; align-items:center; gap:2px; margin-left:auto}
nav.main .item{position:relative}
nav.main .top{
  display:flex; align-items:center; gap:5px; padding:8px 11px; border-radius:8px;
  text-decoration:none; font-size:14.5px; font-weight:700; color:var(--ink); cursor:pointer;
  background:none; border:0; font-family:var(--body);
}
nav.main .top:hover{background:var(--rule-soft)}
nav.main .top .car{font-size:9px; color:var(--muted); transition:transform .18s}
nav.main .item:hover .car, nav.main .item:focus-within .car{transform:rotate(180deg)}
.drop{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(-4px);
  min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:6px; opacity:0; visibility:hidden; transition:.18s;
}
nav.main .item:hover .drop, nav.main .item:focus-within .drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.drop a{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 11px; border-radius:7px; text-decoration:none; font-size:14px;
}
.drop a:hover{background:var(--paper)}
.drop a .tag{font-size:10.5px; color:var(--primary); font-weight:700}
.drop a .soon{font-size:10.5px; color:var(--muted)}
.burger{display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:8px; padding:7px 10px; font-size:16px; cursor:pointer; color:var(--ink)}
.m-menu{display:none}

/* ---------- Hero / 生成器 ---------- */
.hero{padding:34px 0 6px}
.hero-grid{display:grid; grid-template-columns:45fr 55fr; gap:40px; align-items:center}
.hero-left h1{font-size:clamp(32px,3.6vw,44px)}
.hero-cta{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.hero-cta .btn{flex:0 0 auto; padding:12px 22px; text-decoration:none}
.desk-scene{position:relative; min-height:430px}
.paper{position:absolute; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.p-back{width:52%; right:1%; top:50%; transform:translateY(-50%) rotate(2.5deg); aspect-ratio:1; box-shadow:0 14px 30px -18px rgba(30,41,59,.35)}
.p-back img{width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block}
.p-front{height:80%; left:1.5%; top:50%; transform:translateY(-50%) rotate(-2.5deg); aspect-ratio:2028/2868; box-shadow:0 18px 40px -20px rgba(30,41,59,.4)}
.p-front img{width:100%; height:100%; object-fit:cover; display:block; background:#fff}
.pencil-deco{position:absolute; bottom:2%; right:6%; filter:drop-shadow(0 4px 6px rgba(30,41,59,.25)); z-index:2}
.gen-section{padding:8px 0 8px}
.faq{scroll-margin-top:66px}
.kicker{
  align-self:flex-start; margin-top:16px;
  display:flex; align-items:center; gap:12px;
}
.kicker .avstack{display:flex; flex-shrink:0}
.kicker .av{
  width:30px; height:30px; border-radius:50%; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 2px 6px -2px rgba(30,41,59,.25);
}
.kicker .av + .av{margin-left:-8px}
.kicker .av:nth-child(1){background:#E7F8F5}
.kicker .av:nth-child(2){background:#E8EDFF}
.kicker .av:nth-child(3){background:#FEF3C7}
.kicker .av svg{width:78%; height:78%}
.kicker .ktext{display:flex; flex-direction:column; gap:2px}
.kicker .ktext b{font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.35}
.kicker .ktext i{font-style:normal; font-size:12px; color:var(--muted)}
/* 批量生成模态框 */
.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:14px; width:min(520px,100%); padding:22px; box-shadow:0 24px 60px -20px rgba(15,23,42,.4)}
.mhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.mhead h3{font-size:17px; font-weight:800; color:var(--ink)}
.mclose{border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:2px 6px}
.mclose:hover{color:var(--ink)}
.msub{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:10px}
.msettings{font-size:12px; color:var(--ink); background:var(--paper); border-radius:8px; padding:7px 10px; margin-bottom:10px; line-height:1.5}
.msettings b{font-weight:700}
#batchnames{width:100%; box-sizing:border-box; border:2px solid var(--line); border-radius:10px; padding:10px 12px; font-family:var(--body); font-size:13.5px; color:var(--ink); resize:vertical; min-height:120px; outline:none}
#batchnames:focus{border-color:var(--primary)}
.mtools{display:flex; align-items:center; gap:10px; margin-top:10px}
.filebtn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--primary); border:2px solid var(--primary); border-radius:9px; padding:5px 10px; cursor:pointer}
.filebtn:hover{background:var(--primary); color:#fff}
.mcount{font-size:12.5px; font-weight:700; color:var(--muted); margin-left:auto}
.mwarn{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px}
.mwarn li{font-size:12px; color:#B91C1C; background:#FEF2F2; border-radius:7px; padding:5px 9px}
.mfoot{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
.mprogress{margin-top:12px}
.mpbar{height:8px; border-radius:99px; background:var(--paper); border:1px solid var(--line); overflow:hidden}
.mpbar i{display:block; height:100%; width:0; background:var(--primary); border-radius:99px; transition:width .15s}
.mprogress span{font-size:12px; color:var(--muted); margin-top:5px; display:block}
.hero h1{font-size:clamp(34px,4.6vw,46px); font-weight:700; max-width:640px}
.hero h1 em{font-style:normal; color:var(--primary); position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:2px; right:2px; bottom:.02em; height:.14em;
  background:repeating-linear-gradient(90deg, var(--primary) 0 7px, transparent 7px 12px);
  opacity:.5; border-radius:2px;
}
.tagline{font-size:18px; color:var(--muted); max-width:560px; margin:14px 0 26px}

.gen-card{
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--line); padding:22px;
  display:grid; grid-template-columns:minmax(300px,1fr) minmax(380px,480px); gap:20px;
  position:relative;
}
.flabel{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 7px}
.metalink{color:var(--muted); text-decoration:underline; cursor:pointer; font-weight:600}
#papers{display:inline-flex}
#papers button{flex:0 0 auto; padding:7px 22px}
.dualrow{display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start; margin-top:14px}
.dualrow .flabel{margin-top:0}
.dualcol{min-width:0}
.batchbtn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--body); font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, #14B8A6, #0F766E);
  padding:6px 14px; border-radius:99px; text-decoration:none;
  box-shadow:0 3px 10px -3px rgba(13,148,136,.55);
  transition:transform .15s, box-shadow .15s;
}
.batchbtn:hover{transform:translateY(-1px); box-shadow:0 5px 14px -4px rgba(13,148,136,.65)}
.metalink:hover{color:var(--ink)}
.resetbtn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--body); font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, #818CF8, #4F46E5);
  padding:6px 14px; border-radius:99px; text-decoration:none;
  box-shadow:0 3px 10px -3px rgba(79,70,229,.55);
  transition:transform .15s, box-shadow .15s;
}
.resetbtn:hover{transform:translateY(-1px); box-shadow:0 5px 14px -4px rgba(79,70,229,.65)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{
  font-family:var(--body); font-size:14px; font-weight:700; padding:7px 14px;
  border-radius:99px; border:1.5px solid var(--line); background:var(--paper);
  cursor:pointer; transition:.15s; color:var(--ink);
}
.chip:hover{border-color:var(--primary); color:var(--primary)}
.chip.on{background:var(--primary); border-color:var(--primary); color:#fff}
.namewrap{position:relative; margin-bottom:18px}
.namewrap input{
  width:100%; font-family:var(--body); font-size:19px; font-weight:700; padding:12px 48px 12px 14px;
  border:2px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); outline:none;
  transition:border-color .15s;
}
.namewrap input:focus{border-color:var(--ink)}
.namewrap .hint{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--muted)}
.optrow{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.optgroup{flex:1; min-width:200px}
.fonts{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.fontopt{
  flex:0 0 calc((100% - 24px)/4); border:2px solid var(--line); border-radius:10px; background:var(--paper);
  padding:6px 4px 4px; cursor:pointer; text-align:center; transition:.15s;
}
.fontopt svg{display:block; width:100%; height:44px}
.fontopt span{display:block; font-size:10.5px; font-weight:700; color:var(--muted); padding:2px 0 3px}
.fontopt:hover{border-color:#B9C4DE}
.fontopt.on{border-color:var(--primary); background:var(--primary-soft)}
.fontopt.on span{color:var(--primary)}
.fontopt.dis{opacity:.35; cursor:not-allowed}
.fontopt.dis:hover{border-color:var(--line)}
.seg{display:flex; background:var(--paper); border:2px solid var(--line); border-radius:10px; padding:3px; gap:3px}
.seg button{
  flex:1; border:0; background:none; font-family:var(--body); font-weight:700; font-size:13px;
  padding:7px 4px; border-radius:7px; cursor:pointer; color:var(--muted); transition:.15s; white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--primary); color:#fff}
.seg.dis{opacity:.45; pointer-events:none}
.sheet-wrap{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
}
.sheet-wrap svg{width:100%; height:auto; display:block; margin:0 auto}
.gen-actions{display:flex; gap:10px; margin-top:14px}
.btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:15px; padding:12px 10px;
  border-radius:10px; cursor:pointer; border:2px solid var(--ink); transition:.15s;
}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.primary:hover{background:#4338CA; border-color:#4338CA}
.btn.secondary{background:var(--teal); border-color:var(--teal); color:#fff}
.btn.secondary:hover{background:#115E59; border-color:#115E59}
.btn.ghost{background:#fff; color:var(--ink)}
.btn.ghost:hover{background:var(--paper)}
.gen-preview{background:var(--primary-soft); border-radius:12px; padding:10px}
.lrow{display:flex; justify-content:space-between; align-items:baseline}
.lrow .flabel{margin-bottom:0}
#batchlink{margin-bottom:10px}

.geo-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:15px}
.geocard{text-align:left; border:2px solid var(--line); background:var(--paper); border-radius:10px; padding:9px 11px; cursor:pointer; font-family:var(--body); transition:.15s; position:relative}
.geocard b{display:block; font-size:13px; color:var(--ink)}
.geocard i{display:block; font-style:normal; font-size:10.5px; color:var(--muted); margin-top:2px}
.geocard .geoicon{position:absolute; top:8px; right:10px; font-size:13px; color:var(--muted)}
.geocard:hover{border-color:#B9C4DE}
.geocard.on{background:var(--primary-soft); border-color:var(--primary)}
.geocard.on b{color:var(--primary)}
.geocard.dis{opacity:.4; cursor:not-allowed}
.scriptchips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px}
.schip{font-family:var(--body); font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:99px; border:1.5px solid var(--line); background:var(--paper); cursor:pointer; color:var(--ink); transition:.15s}
.schip:hover{border-color:#B9C4DE}
.schip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.schip.dis{opacity:.4; cursor:not-allowed}
.gradesize{font-size:11px; font-weight:700; color:var(--primary)}
.stickerrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stickerrow select{
  font-family:var(--body); font-size:13px; font-weight:700; color:#fff;
  appearance:none; -webkit-appearance:none;
  border:2px solid var(--primary); border-radius:9px;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  padding:7px 28px 7px 10px; cursor:pointer; outline:none; transition:background .15s, border-color .15s;
}
.stickerrow select:hover{border-color:#4F46E5; background-color:#4F46E5}
.stickerrow select:focus{border-color:#4F46E5}
.stickerprev{width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.stickerprev svg{width:100%; height:100%}
#stickerpos{flex:0 0 auto; margin-left:auto}
.optchecks{display:flex; flex-direction:column; gap:7px; margin-top:14px}
.optchecks label{font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:8px; cursor:pointer}
.optchecks input{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; border:2px solid var(--teal); border-radius:4px;
  background:#fff; cursor:pointer; position:relative; flex-shrink:0; margin:0;
}
.optchecks input:checked{background:var(--teal)}
.optchecks input:checked::after{
  content:""; position:absolute; left:3.5px; top:0.5px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.pvbar{display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; color:var(--muted); margin-bottom:8px}
.trust{margin-top:9px; font-size:11px; color:var(--muted); text-align:center}
.clearx{position:absolute; right:26px; top:50%; transform:translateY(-50%); border:0; background:none; font-size:16px; color:var(--muted); cursor:pointer; padding:7px 9px; line-height:1; min-width:24px; min-height:24px}
.clearx:hover{color:var(--ink)}

/* ---------- 引言（左文右图） ---------- */
.intro{padding:34px 0 10px}
.intro-grid{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:52px; align-items:center}
.intro-text{max-width:600px}
.intro-text h2{margin:0 0 14px}
.intro-bar{position:relative; padding-left:26px}
.intro-bar::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; background:var(--primary); opacity:.45; border-radius:2px}
.intro-bar > p{color:var(--ink)}
.intro-text > p + .stats{margin-top:20px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 8px; text-align:center}
.stat .v{display:block; font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.01em}
.stat .v.indigo{color:#4F46E5}
.stat .v.teal{color:#0F766E}
.stat .v.rose{color:#B91C1C}
.stat .v.green{color:#0369A1}
.stat span{display:block; font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.35}
.intro-photo{justify-self:end}
.intro-photo img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:53% 30%;
  display:block; background:#fff; padding:6px; border-radius:10px;
  transform:rotate(2deg);
  box-shadow:0 14px 32px -18px rgba(30,41,59,.4);
}

/* ---------- 教学法（横幅） ---------- */
.pedagogy{padding:44px 0 6px}
.ped-banner{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 16px 36px -22px rgba(30,41,59,.3); min-height:500px; display:flex; align-items:center}
.ped-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 72%}
.ped-banner::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(93deg, #fff 0%, rgba(255,255,255,.97) 32%, rgba(255,255,255,.78) 48%, rgba(255,255,255,0) 64%)}
.ped-text{position:relative; z-index:2; max-width:47%; padding:46px 0 46px 42px}
.ped-text h2{font-size:clamp(26px,3vw,34px); margin:14px 0 12px}
.ped-text > p{color:var(--ink)}
.pkick{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--teal-soft); color:#0F766E; font-size:11.5px; font-weight:700;
  padding:5px 12px; border-radius:99px;
}
.pkick svg{width:13px; height:13px}
.ped-text h2{font-size:clamp(26px,3vw,32px); margin:14px 0 12px; max-width:520px}
.ped-text > p{color:var(--ink); max-width:560px}
.psteps{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:9px; counter-reset:pstep}
.psteps li{counter-increment:pstep; display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--ink)}
.psteps li::before{
  content:counter(pstep); width:20px; height:20px; border-radius:99px; flex-shrink:0;
  background:#0F766E; color:#fff; font-size:10.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.psteps li:nth-child(2)::before{background:#4F46E5}
.psteps li:nth-child(3)::before{background:#B45309}

/* ---------- 学习路径（四卡枢纽） ---------- */
.pathways{padding:44px 0 8px}
.pway-k{text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#0F766E; margin:0 0 6px}
.pathways h2, .action h2{text-align:center; font-size:clamp(26px,3vw,32px); margin:0 0 30px}
.pway-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.pcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px 14px; display:flex; flex-direction:column;
}
.pcico{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.pcico svg{width:17px; height:17px}
.pcico svg.pstick{width:24px; height:24px}
.pcard h3{font-size:17px; margin:0 0 8px}
.pcard > p{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0 0 16px}
.pcard ul{list-style:none; margin:auto 0 0; padding:12px 0 0; border-top:1px solid var(--rule-soft); display:flex; flex-direction:column; gap:7px}
.pcard ul a{font-size:12.5px; font-weight:700; text-decoration:none}
.pcard[data-accent="indigo"] .pcico{background:#E8EDFF; color:#4F46E5}
.pcard[data-accent="teal"]   .pcico{background:#E7F8F5; color:#0F766E}
.pcard[data-accent="rose"]   .pcico{background:#FCE7F3; color:#DB2777}
.pcard[data-accent="sky"]    .pcico{background:#E0F2FE; color:#0369A1}
.pcard[data-accent="indigo"] ul a{color:#4F46E5}
.pcard[data-accent="teal"]   ul a{color:#0F766E}
.pcard[data-accent="rose"]   ul a{color:#DB2777}
.pcard[data-accent="amber"] ul a{color:#B45309}

/* ---------- 真实学习场景（三卡） ---------- */
.action{padding:44px 0 8px}
.action-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.acard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 10px 18px}
.aph{border-radius:calc(var(--radius) - 4px); overflow:hidden; aspect-ratio:16/10; margin-bottom:14px}
.aph img{width:100%; height:100%; object-fit:cover; display:block}
.acard h3{font-size:17px; margin:0 10px 8px}
.acard p{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0 10px}

/* ---------- 卡片枢纽 ---------- */
.hub{padding:30px 0 6px}
.hub h2, .faq h2{font-size:clamp(26px,3vw,32px); margin-bottom:8px}
.faq-sub{color:var(--muted); font-size:14px; margin:-2px 0 18px; text-align:center}
.faq h2{text-align:center}
.hub .sub{color:var(--muted); max-width:640px; margin-bottom:24px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; text-decoration:none; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s, box-shadow .18s, border-color .18s; position:relative;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#C3CEE3}
.card .thumb{
  background:var(--paper); border:1px solid var(--rule-soft); border-radius:8px; padding:8px;
  display:flex; align-items:center; justify-content:center; height:96px;
}
.card .thumb svg{height:100%; width:auto; max-width:100%}
.card h3{font-size:18.5px}
.card p{font-size:13.5px; color:var(--muted); line-height:1.55; flex:1}
.card .go{font-size:13px; font-weight:700; color:var(--primary)}
.card .here{
  position:absolute; top:12px; right:12px; z-index:2; font-size:10.5px; font-weight:700;
  color:var(--teal); background:var(--teal-soft); padding:3px 9px; border-radius:99px;
}
.card .thumb{position:relative}
.cico{
  position:absolute; top:10px; left:10px; width:28px; height:28px; border-radius:8px;
  background:#fff; border:1px solid var(--rule-soft);
  display:flex; align-items:center; justify-content:center;
}
.cico svg{width:14px; height:14px}
.card[data-accent="indigo"] .thumb{background:#E8EDFF}
.card[data-accent="teal"]   .thumb{background:#E7F8F5}
.card[data-accent="amber"]  .thumb{background:#FEF3C7}
.card[data-accent="violet"] .thumb{background:#EDE9FE}
.card[data-accent="rose"]   .thumb{background:#FCE7F3}
.card[data-accent="sky"]    .thumb{background:#E0F2FE}
.cico{color:var(--primary)}
.card[data-accent="indigo"] .cico{color:#4F46E5}
.card[data-accent="teal"]   .cico{color:#0F766E}
.card[data-accent="amber"]  .cico{color:#B45309}
.card[data-accent="violet"] .cico{color:#7C3AED}
.card[data-accent="rose"]   .cico{color:#DB2777}
.card[data-accent="sky"]    .cico{color:#0369A1}
.card[data-accent="teal"]   .go{color:#0F766E}
.card[data-accent="amber"]  .go{color:#B45309}
.card[data-accent="violet"] .go{color:#7C3AED}
.card[data-accent="rose"]   .go{color:#DB2777}
.card[data-accent="sky"]    .go{color:#0369A1}

/* ---------- 内容区 ---------- */
/* ---------- FAQ ---------- */
.faq{padding:36px 0 8px}
.faq details{
  max-width:760px; background:var(--card); border:1px solid var(--line); border-radius:10px;
  margin:0 auto 10px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:14px 18px; font-weight:700; font-family:var(--disp); font-size:16.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:20px; color:var(--primary); transition:.18s; flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 15px; color:#3A4552; font-size:15px}

/* ---------- 底部内链 / 页脚 ---------- */
footer{border-top:1px solid var(--line); background:#EEF2F9}
footer .wrap{padding:30px 24px 36px; display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between}
footer .fcol b{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
footer .fcol a{display:block; font-size:13.5px; text-decoration:none; padding:3px 0; color:var(--ink)}
footer .fcol a:hover{color:var(--primary)}
footer .fnote{font-size:12px; color:var(--muted); margin-top:18px; max-width:520px}

/* ---------- 打印 & 其他 ---------- */
#print-area{display:none}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-size:14px; font-weight:700;
  padding:11px 20px; border-radius:10px; opacity:0; pointer-events:none; transition:.25s; z-index:99;
  max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media print{
  body > *:not(#print-area){display:none !important}
  #print-area{display:block !important}
  #print-area svg{width:100%; height:auto}
}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.hero h1{animation:rise .5s .05s both}
.tagline{animation:rise .5s .15s both}
.gen-card{animation:rise .55s .25s both}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  .gen-card{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr; gap:26px}
  .desk-scene{min-height:320px; max-width:440px; width:100%; margin:4px auto 0}
  .intro-grid{grid-template-columns:1fr; gap:24px}
  .intro-photo{justify-self:center; max-width:380px}
  .ped-banner{display:block; background:#fff}
  .ped-bg{position:static; display:block; width:100%; height:300px; object-position:68% 30%}
  .ped-banner::before{display:none}
  .ped-text{max-width:100%; padding:22px 20px 10px}
  .pway-grid{grid-template-columns:repeat(2,1fr)}
  .action-grid{grid-template-columns:1fr}
  .acard{max-width:480px; margin:0 auto}
}
@media (max-width:820px){
  nav.main{display:none}
  .burger{display:block}
  .m-menu{
    display:none; position:absolute; top:56px; left:0; right:0; background:var(--card);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:10px 20px 16px;
  }
  .m-menu.open{display:block}
  .m-menu a{display:block; padding:11px 4px; text-decoration:none; font-weight:700; font-size:16px; border-bottom:1px solid var(--rule-soft)}
  .m-menu a:last-child{border:0}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .hero-cta .btn{flex:1}
  .desk-scene{min-height:280px}
  .gen-actions{flex-direction:column}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pway-grid{grid-template-columns:1fr}
  .dualrow{gap:16px}
}
.f-bottom{border-top:1px solid var(--line); margin-top:26px; padding-top:14px; font-size:12px; color:var(--muted)}

/* ---------- SEO 内容区卡片（index/cursive 共用） ---------- */
.ins-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; max-width:960px; margin:18px auto 0}
.ins-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start}
.ins-card .ico{flex:0 0 38px; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center}
.ins-card .ico svg{width:20px; height:20px}
.ins-card b{display:block; font-size:14px; color:var(--ink); margin-bottom:3px}
.ins-card span{font-size:12.5px; color:var(--muted); line-height:1.5}
.seo-sub{max-width:600px; margin:8px auto 0; text-align:center; color:var(--muted); font-size:14.5px}
/* cursive 页教学步骤与字体卡（teach/font） */
.teach-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 28px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 24px; max-width:960px; margin:18px auto 0}
.teach-step{position:relative; font-size:13px; color:#334155; line-height:1.55; padding-left:40px}
.teach-step b.n{position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:12.5px}
.teach-step strong{color:var(--ink)}
.font-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; max-width:960px; margin:18px auto 0}
.font-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center}
.font-card .fw{font-size:26px; color:var(--ink); margin-bottom:6px}
.font-card b{display:block; font-size:14px; color:var(--ink); margin-bottom:4px}
.font-card span{font-size:12.5px; color:var(--muted); line-height:1.5; display:block}