silence { display: none; }

/* ===== 全局容器：ai 格子手账底 ===== */
ai {
  display: block;
  background:
    linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px) 0 0/22px 100%,
    linear-gradient(155deg,#fdfaf2 0%,#f7f2e6 45%,#f2ede0 100%);
  padding: 16px 14px 20px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 6px 20px rgba(60,55,50,.16), inset 0 0 50px rgba(120,110,90,.05);
  font-family: "Comic Sans MS","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
}
ai::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><text x="12" y="40" font-size="20" fill="rgba(60,55,50,.05)">💤</text><text x="55" y="75" font-size="16" fill="rgba(230,120,110,.05)">☕</text></svg>') repeat;
  opacity: .7;
  pointer-events: none;
  border-radius: 14px;
}

/* ============================================================
   所有图片标签（按类型分组）
   ============================================================ */

/* ---------- ye 组：20张圆形贴纸（女2表情） ---------- */
ye-01,ye-02,ye-03,ye-04,ye-05,ye-06,ye-07,ye-08,ye-09,ye-10,
ye-11,ye-12,ye-13,ye-14,ye-15,ye-16,ye-17,ye-18,ye-19,ye-20 {
  display: block;
  width: 240px;
  height: 240px;
  margin: 16px auto;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 4px solid #fffdf8;
  box-shadow: 0 0 0 2.5px #2b2622, 3px 4px 0 rgba(60,55,50,.25), 0 6px 16px rgba(60,55,50,.3);
  transition: transform .3s ease;
  animation: wobbleIn .5s cubic-bezier(.34,1.56,.64,1);
}
ye-01:hover,ye-02:hover,ye-03:hover,ye-04:hover,ye-05:hover,ye-06:hover,ye-07:hover,ye-08:hover,ye-09:hover,ye-10:hover,
ye-11:hover,ye-12:hover,ye-13:hover,ye-14:hover,ye-15:hover,ye-16:hover,ye-17:hover,ye-18:hover,ye-19:hover,ye-20:hover {
  transform: scale(1.14) rotate(-6deg);
  box-shadow: 0 0 0 2.5px #2b2622, 3px 4px 0 rgba(60,55,50,.25), 0 10px 24px rgba(255,122,107,.5);
}
ye-01 { background-image: url(https://iili.io/CPBpYf1.png); }
ye-02 { background-image: url(https://iili.io/CPBpcUg.png); }
ye-03 { background-image: url(https://iili.io/CPBp0Ja.png); }
ye-04 { background-image: url(https://iili.io/CPBpa0F.png); }
ye-05 { background-image: url(https://iili.io/CPBpVxp.png); }
ye-06 { background-image: url(https://iili.io/CPBpWWN.png); }
ye-07 { background-image: url(https://iili.io/CPBpXsI.png); }
ye-08 { background-image: url(https://iili.io/CPBpjft.png); }
ye-09 { background-image: url(https://iili.io/CPBpNgn.png); }
ye-10 { background-image: url(https://iili.io/CPBp8b4.png); }
ye-11 { background-image: url(https://iili.io/CPBprsS.png); }
ye-12 { background-image: url(https://iili.io/CPBpgX2.png); }
ye-13 { background-image: url(https://iili.io/CPBp6q7.png); }
ye-14 { background-image: url(https://iili.io/CPBpP19.png); }
ye-15 { background-image: url(https://iili.io/CPBpige.png); }
ye-16 { background-image: url(https://iili.io/CPBpLdu.png); }
ye-17 { background-image: url(https://iili.io/CPBpZej.png); }
ye-18 { background-image: url(https://iili.io/CPBpbzQ.png); }
ye-19 { background-image: url(https://iili.io/CPBptmx.png); }
ye-20 { background-image: url(https://iili.io/CPBppLB.png); }

/* ---------- oe 组：24张圆形贴纸（女1表情） ---------- */
oe-01,oe-02,oe-03,oe-04,oe-05,oe-06,oe-07,oe-08,oe-09,oe-10,
oe-11,oe-12,oe-13,oe-14,oe-15,oe-16,oe-17,oe-18,oe-19,oe-20,
oe-21,oe-22,oe-23,oe-24 {
  display: block;
  width: 240px;
  height: 240px;
  margin: 16px auto;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 4px solid #fffdf8;
  box-shadow: 0 0 0 2.5px #2b2622, 3px 4px 0 rgba(60,55,50,.25), 0 6px 16px rgba(60,55,50,.3);
  transition: transform .3s ease;
  animation: wobbleIn .5s cubic-bezier(.34,1.56,.64,1);
}
oe-01:hover,oe-02:hover,oe-03:hover,oe-04:hover,oe-05:hover,oe-06:hover,oe-07:hover,oe-08:hover,oe-09:hover,oe-10:hover,
oe-11:hover,oe-12:hover,oe-13:hover,oe-14:hover,oe-15:hover,oe-16:hover,oe-17:hover,oe-18:hover,oe-19:hover,oe-20:hover,
oe-21:hover,oe-22:hover,oe-23:hover,oe-24:hover {
  transform: scale(1.14) rotate(-6deg);
  box-shadow: 0 0 0 2.5px #2b2622, 3px 4px 0 rgba(60,55,50,.25), 0 10px 24px rgba(255,122,107,.5);
}
oe-01 { background-image: url(https://iili.io/CPCJxEB.png); }
oe-02 { background-image: url(https://iili.io/CPCJoBV.png); }
oe-03 { background-image: url(https://iili.io/CPCJzrP.png); }
oe-04 { background-image: url(https://iili.io/CPCJCLQ.png); }
oe-05 { background-image: url(https://iili.io/CPCJAkg.png); }
oe-06 { background-image: url(https://iili.io/CPCJ7TJ.png); }
oe-07 { background-image: url(https://iili.io/CPCJRpa.png); }
oe-08 { background-image: url(https://iili.io/CPCJYhv.png); }
oe-09 { background-image: url(https://iili.io/CPCJ0EN.png); }
oe-10 { background-image: url(https://iili.io/CPCJ14I.png); }
oe-11 { background-image: url(https://iili.io/CPCJG2t.png); }
oe-12 { background-image: url(https://iili.io/CPCJMYX.png); }
oe-13 { background-image: url(https://iili.io/CPCJVvn.png); }
oe-14 { background-image: url(https://iili.io/CPCJWps.png); }
oe-15 { background-image: url(https://iili.io/CPCJhTG.png); }
oe-16 { background-image: url(https://iili.io/CPCJOCl.png); }
oe-17 { background-image: url(https://iili.io/CPCeG2.png); }
oe-18 { background-image: url(https://iili.io/CPCJk4S.png); }
oe-19 { background-image: url(https://iili.io/CPCJSa9.png); }
oe-20 { background-image: url(https://iili.io/CPCJUve.png); }
oe-21 { background-image: url(https://iili.io/CPCJ4Tb.png); }
oe-22 { background-image: url(https://iili.io/CPCJ6jj.png); }
oe-23 { background-image: url(https://iili.io/CPCJPZx.png); }
oe-24 { background-image: url(https://iili.io/CPCJsCQ.png); }

/* ---------- os 组：30张拍立得竖版（立绘服装1） ---------- */
os-01,os-02,os-03,os-04,os-05,os-06,os-07,os-08,os-09,os-10,
os-11,os-12,os-13,os-14,os-15,os-16,os-17,os-18,os-19,os-20,
os-21,os-22,os-23,os-24,os-25,os-26,os-27,os-28,os-29,os-30 {
  display: block;
  width: 220px;
  aspect-ratio: 904 / 1280;
  margin: 20px auto;
  background-size: cover;
  background-position: center top;
  border-radius: 4px;
  border: 8px solid #fffdf8;
  border-bottom: 36px solid #fffdf8;
  box-shadow: 0 6px 18px rgba(60,55,50,.28), inset 0 0 0 1px rgba(60,55,50,.12);
  transform: rotate(-1.5deg);
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
os-01::after,os-02::after,os-03::after,os-04::after,os-05::after,os-06::after,os-07::after,os-08::after,os-09::after,os-10::after,
os-11::after,os-12::after,os-13::after,os-14::after,os-15::after,os-16::after,os-17::after,os-18::after,os-19::after,os-20::after,
os-21::after,os-22::after,os-23::after,os-24::after,os-25::after,os-26::after,os-27::after,os-28::after,os-29::after,os-30::after {
  content: "📌";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(60,55,50,.35));
}
os-01:hover,os-02:hover,os-03:hover,os-04:hover,os-05:hover,os-06:hover,os-07:hover,os-08:hover,os-09:hover,os-10:hover,
os-11:hover,os-12:hover,os-13:hover,os-14:hover,os-15:hover,os-16:hover,os-17:hover,os-18:hover,os-19:hover,os-20:hover,
os-21:hover,os-22:hover,os-23:hover,os-24:hover,os-25:hover,os-26:hover,os-27:hover,os-28:hover,os-29:hover,os-30:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 0 12px 26px rgba(60,55,50,.34), inset 0 0 0 1px rgba(60,55,50,.12);
}
os-01 { background-image: url(https://iili.io/CPCKAzu.png); }
os-02 { background-image: url(https://iili.io/CPCKTbe.png); }
os-03 { background-image: url(https://iili.io/CPCKRWb.png); }
os-04 { background-image: url(https://iili.io/CPCKIe9.png); }
os-05 { background-image: url(https://iili.io/CPCK0dB.png); }
os-06 { background-image: url(https://iili.io/CPCKUIn.png); }
os-07 { background-image: url(https://iili.io/CPCKgXs.png); }
os-08 { background-image: url(https://iili.io/CPCKrLG.png); }
os-09 { background-image: url(https://iili.io/CPCKL22.png); }
os-10 { background-image: url(https://iili.io/CPCKQ7S.png); }
os-11 { background-image: url(https://iili.io/CPCKbIe.png); }
os-12 { background-image: url(https://iili.io/CPCf9Bj.png); }
os-13 { background-image: url(https://iili.io/CPCfHEx.png); }
os-14 { background-image: url(https://iili.io/CPCfJrQ.png); }
os-15 { background-image: url(https://iili.io/CPCf22V.png); }
os-16 { background-image: url(https://iili.io/CPCfKp1.png); }
os-17 { background-image: url(https://iili.io/CPCfqTF.png); }
os-18 { background-image: url(https://iili.io/CPCfBhg.png); }
os-19 { background-image: url(https://iili.io/CPCfCQa.png); }
os-20 { background-image: url(https://iili.io/CPCfxEv.png); }
os-21 { background-image: url(https://iili.io/CPCfz4R.png); }
os-22 { background-image: url(https://iili.io/CPCfuYN.png); }
os-23 { background-image: url(https://iili.io/CPCfAvI.png); }
os-24 { background-image: url(https://iili.io/CPCf7TX.png); }
os-25 { background-image: url(https://iili.io/CPCfYjn.png); }
os-26 { background-image: url(https://iili.io/CPCfaQs.png); }
os-27 { background-image: url(https://iili.io/CPCf0Gf.png); }
os-28 { background-image: url(https://iili.io/CPCfMa2.png); }
os-29 { background-image: url(https://iili.io/CPCfVvS.png); }
os-30 { background-image: url(https://iili.io/CPCfWy7.png); }

/* ---------- ss 组：36张拍立得竖版（立绘服装2） ---------- */
ss-01,ss-02,ss-03,ss-04,ss-05,ss-06,ss-07,ss-08,ss-09,ss-10,
ss-11,ss-12,ss-13,ss-14,ss-15,ss-16,ss-17,ss-18,ss-19,ss-20,
ss-21,ss-22,ss-23,ss-24,ss-25,ss-26,ss-27,ss-28,ss-29,ss-30,
ss-31,ss-32,ss-33,ss-34,ss-35,ss-36 {
  display: block;
  width: 220px;
  aspect-ratio: 904 / 1280;
  margin: 20px auto;
  background-size: cover;
  background-position: center top;
  border-radius: 4px;
  border: 8px solid #fffdf8;
  border-bottom: 36px solid #fffdf8;
  box-shadow: 0 6px 18px rgba(60,55,50,.28), inset 0 0 0 1px rgba(60,55,50,.12);
  transform: rotate(-1.5deg);
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
ss-01::after,ss-02::after,ss-03::after,ss-04::after,ss-05::after,ss-06::after,ss-07::after,ss-08::after,ss-09::after,ss-10::after,
ss-11::after,ss-12::after,ss-13::after,ss-14::after,ss-15::after,ss-16::after,ss-17::after,ss-18::after,ss-19::after,ss-20::after,
ss-21::after,ss-22::after,ss-23::after,ss-24::after,ss-25::after,ss-26::after,ss-27::after,ss-28::after,ss-29::after,ss-30::after,
ss-31::after,ss-32::after,ss-33::after,ss-34::after,ss-35::after,ss-36::after {
  content: "📌";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(60,55,50,.35));
}
ss-01:hover,ss-02:hover,ss-03:hover,ss-04:hover,ss-05:hover,ss-06:hover,ss-07:hover,ss-08:hover,ss-09:hover,ss-10:hover,
ss-11:hover,ss-12:hover,ss-13:hover,ss-14:hover,ss-15:hover,ss-16:hover,ss-17:hover,ss-18:hover,ss-19:hover,ss-20:hover,
ss-21:hover,ss-22:hover,ss-23:hover,ss-24:hover,ss-25:hover,ss-26:hover,ss-27:hover,ss-28:hover,ss-29:hover,ss-30:hover,
ss-31:hover,ss-32:hover,ss-33:hover,ss-34:hover,ss-35:hover,ss-36:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 0 12px 26px rgba(60,55,50,.34), inset 0 0 0 1px rgba(60,55,50,.12);
}
ss-01 { background-image: url(https://iili.io/CPCoL2j.png); }
ss-02 { background-image: url(https://iili.io/CPCoirb.png); }
ss-03 { background-image: url(https://iili.io/CPCoPEu.png); }
ss-04 { background-image: url(https://iili.io/CPCo6Be.png); }
ss-05 { background-image: url(https://iili.io/CPCobTB.png); }
ss-06 { background-image: url(https://iili.io/CPComhP.png); }
ss-07 { background-image: url(https://iili.io/CPCopQ1.png); }
ss-08 { background-image: url(https://iili.io/CPCx9CF.png); }
ss-09 { background-image: url(https://iili.io/CPCxJ4a.png); }
ss-10 { background-image: url(https://iili.io/CPCx23J.png); }
ss-11 { background-image: url(https://iili.io/CPCx3Yv.png); }
ss-12 { background-image: url(https://iili.io/CPCxFvR.png); }
ss-13 { background-image: url(https://iili.io/CPCxqTN.png); }
ss-14 { background-image: url(https://iili.io/CPCxBjI.png); }
ss-15 { background-image: url(https://iili.io/CPCxCQt.png); }
ss-16 { background-image: url(https://iili.io/CPCxoCX.png); }
ss-17 { background-image: url(https://iili.io/CPCxz4s.png); }
ss-18 { background-image: url(https://iili.io/CPCxRyl.png); }
ss-19 { background-image: url(https://iili.io/CPCxuaf.png); }
ss-20 { background-image: url(https://iili.io/CPCxAv4.png); }
ss-21 { background-image: url(https://iili.io/CPCxln9.png); }
ss-22 { background-image: url(https://iili.io/CPCx0Ge.png); }
ss-23 { background-image: url(https://iili.io/CPCx16u.png); }
ss-24 { background-image: url(https://iili.io/CPCxG3b.png); }
ss-25 { background-image: url(https://iili.io/CPCxV8x.png); }
ss-26 { background-image: url(https://iili.io/CPCxjwB.png); }
ss-27 { background-image: url(https://iili.io/CPCxhuV.png); }
ss-28 { background-image: url(https://iili.io/CPCxWyQ.png); }
ss-29 { background-image: url(https://iili.io/CPCxOn1.png); }
ss-30 { background-image: url(https://iili.io/CPCx8Fa.png); }
ss-31 { background-image: url(https://iili.io/CPCxScJ.png); }
ss-32 { background-image: url(https://iili.io/CPCxU8v.png); }
ss-33 { background-image: url(https://iili.io/CPCxPtI.png); }
ss-34 { background-image: url(https://iili.io/CPCxLMX.png); }
ss-35 { background-image: url(https://iili.io/CPCxQPn.png); }
ss-36 { background-image: url(https://iili.io/CPCxtFs.png); }

/* ---------- p3 组：9张方版（漫画分镜） ---------- */
p3-01, p3-02, p3-03, p3-04, p3-05, p3-06, p3-07, p3-08, p3-09 {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 18px auto;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 3px solid #2b2622;
  box-shadow: 6px 6px 0 #2b2622, 0 10px 24px rgba(60,55,50,.22);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  position: relative;
}
p3-01::after, p3-02::after, p3-03::after, p3-04::after, p3-05::after, p3-06::after, p3-07::after, p3-08::after, p3-09::after {
  content: "话";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ff7a6b;
  color: #fff;
  border: 2.5px solid #2b2622;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(10deg);
  box-shadow: 2px 2px 0 #2b2622;
}
p3-01:hover, p3-02:hover, p3-03:hover, p3-04:hover, p3-05:hover, p3-06:hover, p3-07:hover, p3-08:hover, p3-09:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #2b2622, 0 14px 30px rgba(60,55,50,.3);
}
p3-01 { background-image: url(https://iili.io/CPCzZzB.png); }
p3-02 { background-image: url(https://iili.io/CPCzmqF.png); }
p3-03 { background-image: url(https://iili.io/CPCzDs1.png); }
p3-04 { background-image: url(https://iili.io/CPCztWP.png); }
p3-05 { background-image: url(https://iili.io/CPCIHdJ.png); }
p3-06 { background-image: url(https://iili.io/CPCIFzN.png); }
p3-07 { background-image: url(https://iili.io/CPCI2bp.png); }
p3-08 { background-image: url(https://iili.io/CPCIJ5v.png); }
p3-09 { background-image: url(https://iili.io/CPCIKXI.png); }

/* ---------- yd 组：31张方版（漫画分镜） ---------- */
yd-01,yd-02,yd-03,yd-04,yd-05,yd-06,yd-07,yd-08,yd-09,yd-10,
yd-11,yd-12,yd-13,yd-14,yd-15,yd-16,yd-17,yd-18,yd-19,yd-20,
yd-21,yd-22,yd-23,yd-24,yd-25,yd-26,yd-27,yd-28,yd-29,yd-30,
yd-31 {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 18px auto;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 3px solid #2b2622;
  box-shadow: 6px 6px 0 #2b2622, 0 10px 24px rgba(60,55,50,.22);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  position: relative;
}
yd-01::after,yd-02::after,yd-03::after,yd-04::after,yd-05::after,yd-06::after,yd-07::after,yd-08::after,yd-09::after,yd-10::after,
yd-11::after,yd-12::after,yd-13::after,yd-14::after,yd-15::after,yd-16::after,yd-17::after,yd-18::after,yd-19::after,yd-20::after,
yd-21::after,yd-22::after,yd-23::after,yd-24::after,yd-25::after,yd-26::after,yd-27::after,yd-28::after,yd-29::after,yd-30::after,
yd-31::after {
  content: "话";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ff7a6b;
  color: #fff;
  border: 2.5px solid #2b2622;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(10deg);
  box-shadow: 2px 2px 0 #2b2622;
}
yd-01:hover,yd-02:hover,yd-03:hover,yd-04:hover,yd-05:hover,yd-06:hover,yd-07:hover,yd-08:hover,yd-09:hover,yd-10:hover,
yd-11:hover,yd-12:hover,yd-13:hover,yd-14:hover,yd-15:hover,yd-16:hover,yd-17:hover,yd-18:hover,yd-19:hover,yd-20:hover,
yd-21:hover,yd-22:hover,yd-23:hover,yd-24:hover,yd-25:hover,yd-26:hover,yd-27:hover,yd-28:hover,yd-29:hover,yd-30:hover,
yd-31:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #2b2622, 0 14px 30px rgba(60,55,50,.3);
}
yd-01 { background-image: url(https://iili.io/CPCcHdP.png); }
yd-02 { background-image: url(https://iili.io/CPCcdkF.png); }
yd-03 { background-image: url(https://iili.io/CPCcJ71.png); }
yd-04 { background-image: url(https://iili.io/CPCayrB.png); }
yd-05 { background-image: url(https://iili.io/CPCc2mg.png); }
yd-06 { background-image: url(https://iili.io/CPCcFIa.png); }
yd-07 { background-image: url(https://iili.io/CPCcKhJ.png); }
yd-08 { background-image: url(https://iili.io/CPCcfLv.png); }
yd-09 { background-image: url(https://iili.io/CPCcx2I.png); }
yd-10 { background-image: url(https://iili.io/CPCcz7t.png); }
yd-11 { background-image: url(https://iili.io/CPCcIkX.png); }
yd-12 { background-image: url(https://iili.io/CPCcTpn.png); }
yd-13 { background-image: url(https://iili.io/CPCcYB4.png); }
yd-14 { background-image: url(https://iili.io/CPCcaEl.png); }
yd-15 { background-image: url(https://iili.io/CPCcEv9.png); }
yd-16 { background-image: url(https://iili.io/CPCcGpe.png); }
yd-17 { background-image: url(https://iili.io/CPCcjCx.png); }
yd-18 { background-image: url(https://iili.io/CPCcXQj.png); }
yd-19 { background-image: url(https://iili.io/CPCcwEQ.png); }
yd-20 { background-image: url(https://iili.io/CPCcN4V.png); }
yd-21 { background-image: url(https://iili.io/CPCckYP.png); }
yd-22 { background-image: url(https://iili.io/CPCcvv1.png); }
yd-23 { background-image: url(https://iili.io/CPCc8yF.png); }
yd-24 { background-image: url(https://iili.io/CPCcUTg.png); }
yd-25 { background-image: url(https://iili.io/CPCc6Cv.png); }
yd-26 { background-image: url(https://iili.io/CPCcPGR.png); }
yd-27 { background-image: url(https://iili.io/CPCci4p.png); }
yd-28 { background-image: url(https://iili.io/CPCcQaI.png); }
yd-29 { background-image: url(https://iili.io/CPCcpZG.png); }
yd-30 { background-image: url(https://iili.io/CPCjoeR.png); }
yd-31 { background-image: url(https://iili.io/CPCjxbp.png); }

/* ---------- od 组：33张方版（漫画分镜） ---------- */
od-01,od-02,od-03,od-04,od-05,od-06,od-07,od-08,od-09,od-10,
od-11,od-12,od-13,od-14,od-15,od-16,od-17,od-18,od-19,od-20,
od-21,od-22,od-23,od-24,od-25,od-26,od-27,od-28,od-29,od-30,
od-31,od-32,od-33 {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 18px auto;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 3px solid #2b2622;
  box-shadow: 6px 6px 0 #2b2622, 0 10px 24px rgba(60,55,50,.22);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  position: relative;
}
od-01::after,od-02::after,od-03::after,od-04::after,od-05::after,od-06::after,od-07::after,od-08::after,od-09::after,od-10::after,
od-11::after,od-12::after,od-13::after,od-14::after,od-15::after,od-16::after,od-17::after,od-18::after,od-19::after,od-20::after,
od-21::after,od-22::after,od-23::after,od-24::after,od-25::after,od-26::after,od-27::after,od-28::after,od-29::after,od-30::after,
od-31::after,od-32::after,od-33::after {
  content: "话";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ff7a6b;
  color: #fff;
  border: 2.5px solid #2b2622;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(10deg);
  box-shadow: 2px 2px 0 #2b2622;
}
od-01:hover,od-02:hover,od-03:hover,od-04:hover,od-05:hover,od-06:hover,od-07:hover,od-08:hover,od-09:hover,od-10:hover,
od-11:hover,od-12:hover,od-13:hover,od-14:hover,od-15:hover,od-16:hover,od-17:hover,od-18:hover,od-19:hover,od-20:hover,
od-21:hover,od-22:hover,od-23:hover,od-24:hover,od-25:hover,od-26:hover,od-27:hover,od-28:hover,od-29:hover,od-30:hover,
od-31:hover,od-32:hover,od-33:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #2b2622, 0 14px 30px rgba(60,55,50,.3);
}
od-01 { background-image: url(https://iili.io/CPCWdxt.png); }
od-02 { background-image: url(https://iili.io/CPCW3sn.png); }
od-03 { background-image: url(https://iili.io/CPCWKfs.png); }
od-04 { background-image: url(https://iili.io/CPCW2WX.png); }
od-05 { background-image: url(https://iili.io/CPCWn5l.png); }
od-06 { background-image: url(https://iili.io/CPCWCJ4.png); }
od-07 { background-image: url(https://iili.io/CPCWoe2.png); }
od-08 { background-image: url(https://iili.io/CPCWxbS.png); }
od-09 { background-image: url(https://iili.io/CPCWuse.png); }
od-10 { background-image: url(https://iili.io/CPCWTX9.png); }
od-11 { background-image: url(https://iili.io/CPCWRqu.png); }
od-12 { background-image: url(https://iili.io/CPCW7gj.png); }
od-13 { background-image: url(https://iili.io/CPCWc5Q.png); }
od-14 { background-image: url(https://iili.io/CPCWleV.png); }
od-15 { background-image: url(https://iili.io/CPCWEzP.png); }
od-16 { background-image: url(https://iili.io/CPCWGX1.png); }
od-17 { background-image: url(https://iili.io/CPCWX1a.png); }
od-18 { background-image: url(https://iili.io/CPCWhrJ.png); }
od-19 { background-image: url(https://iili.io/CPCWwdv.png); }
od-20 { background-image: url(https://iili.io/CPCWN7R.png); }
od-21 { background-image: url(https://iili.io/CPCW8Xt.png); }
od-22 { background-image: url(https://iili.io/CPCWi74.png); }
od-23 { background-image: url(https://iili.io/CPCWskl.png); }
od-24 { background-image: url(https://iili.io/CPCWLp2.png); }
od-25 { background-image: url(https://iili.io/CPCWmBe.png); }
od-26 { background-image: url(https://iili.io/CPCXJYx.png); }
od-27 { background-image: url(https://iili.io/CPCXdkQ.png); }
od-28 { background-image: url(https://iili.io/CPCX2pV.png); }
od-29 { background-image: url(https://iili.io/CPCXfQ1.png); }
od-30 { background-image: url(https://iili.io/CPCXBCF.png); }
od-31 { background-image: url(https://iili.io/CPCXCEg.png); }
od-32 { background-image: url(https://iili.io/CPCXn4a.png); }
od-33 { background-image: url(https://iili.io/CPCXTpp.png); }

/* ===== op 独立标签：3张特殊横版1344×768 ===== */
op-01,op-02,op-03{
  display:block;
  width:100%;
  max-width:400px;
  aspect-ratio:1344/768;
  margin:20px auto;
  background-size:cover;
  background-position:center;
  border-radius:4px;
  border:8px solid #fffdf8;
  border-bottom:36px solid #fffdf8;
  box-shadow:0 6px 18px rgba(60,55,50,.28),inset 0 0 0 1px rgba(60,55,50,.12);
  transform:rotate(1.5deg);
  position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
}

op-01::after,op-02::after,op-03::after{
  content:"📌";
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%) rotate(-5deg);
  font-size:22px;
  filter:drop-shadow(0 2px 3px rgba(60,55,50,.35));
}

op-01:hover,op-02:hover,op-03:hover{
  transform:rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow:0 12px 26px rgba(60,55,50,.34),inset 0 0 0 1px rgba(60,55,50,.12);
}

/* 背景图：一张一个标签 */
op-01{background-image:url(https://iili.io/CPCOc7a.png)}
op-02{background-image:url(https://iili.io/CPCOlkJ.png)}
op-03{background-image:url(https://iili.io/CPCO0mv.png)}

/* ===== 正文 text（完全保留） ===== */
text {
  display: block;
  font-family: "Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: #3c342e;
  letter-spacing: .3px;
  text-align: justify;
}
text p {
  text-indent: 2em;
  margin: .8em 0;
}
text p:first-child::first-letter {
  font-size: 1.9em;
  color: #ff7a6b;
  font-weight: bold;
  float: left;
  line-height: .85;
  margin-right: 5px;
}

/* ===== 状态栏 details（便利贴风） ===== */
ai details {
  font-family: "Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
  background: linear-gradient(155deg,#fffef9 0%,#fdf9ee 100%);
  border: 2.5px solid #2b2622;
  border-radius: 14px;
  margin: 12px 0;
  padding: 3px 12px 6px;
  box-shadow: 4px 4px 0 rgba(43,38,34,.85), 0 6px 14px rgba(60,55,50,.12);
}
ai details > summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: #2b2622;
  letter-spacing: .8px;
  padding: 9px 6px;
  position: relative;
  background: linear-gradient(90deg,rgba(255,122,107,.2),transparent 72%);
  border-radius: 8px;
  transition: all .3s ease;
}
ai details > summary::-webkit-details-marker { display: none; }
ai details > summary::marker { content: ""; }
ai details > summary::before {
  content: "📌";
  margin-right: 8px;
  display: inline-block;
  transition: transform .35s ease;
}
ai details[open] > summary::before {
  transform: rotate(-25deg) scale(1.1);
}
ai details > summary:hover {
  color: #ff7a6b;
  background: linear-gradient(90deg,rgba(255,122,107,.34),transparent 72%);
}
ai details p {
  margin: .4em 0;
  font-size: 14px;
  color: #3c342e;
  line-height: 1.8;
}
ai details strong { color: #e8654f; font-weight: bold; }
ai details em {
  font-style: normal;
  color: #8a7f76;
  font-size: 13.5px;
}
ai details ul {
  margin: .35em 0;
  padding-left: 1.5em;
}
ai details li {
  font-size: 14px;
  color: #3c342e;
  padding: 3px 0;
  border-bottom: 1.5px dashed rgba(43,38,34,.22);
  list-style: none;
  position: relative;
}
ai details li::before {
  content: "▸";
  position: absolute;
  left: -1.1em;
  color: #ff7a6b;
  font-weight: bold;
}
ai details li:last-child { border-bottom: none; }
ai details hr {
  border: none;
  height: 2px;
  margin: .9em 0;
  background: repeating-linear-gradient(90deg,#2b2622 0 6px,transparent 6px 12px);
  opacity: .35;
}
ai details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: .5em 0;
}
ai details th {
  background: #ffe3c4;
  color: #2b2622;
  padding: 6px 5px;
  font-weight: bold;
  border: 2px solid #2b2622;
}
ai details td {
  padding: 5px;
  border: 1.5px solid rgba(43,38,34,.35);
  color: #3c342e;
}

/* ===== 日记特殊样式（格子本手账风） ===== */
ai details[t="日"] {
  font-family: "Yuanti SC","KaiTi","楷体",serif;
  background:
    linear-gradient(transparent 0 25px,rgba(120,150,180,.18) 25px 26px) 0 32px/100% 26px repeat-y,
    linear-gradient(90deg,rgba(255,122,107,.25) 0 2px,transparent 2px) 32px 0/100% 100% no-repeat,
    linear-gradient(152deg,#fdfcf6 0%,#f6f9fc 100%);
  border: 2.5px solid #2b2622;
  border-radius: 4px 14px 14px 4px;
  padding: 8px 16px 14px 40px;
  margin: 18px 3px;
  transform: rotate(-.8deg);
  position: relative;
  box-shadow: 4px 4px 0 rgba(43,38,34,.7), 0 8px 20px rgba(60,55,50,.18);
}
ai details[t="日"]::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 34px;
  width: 52px;
  height: 18px;
  transform: rotate(-4deg);
  background: rgba(255,205,120,.6);
  box-shadow: 0 2px 4px rgba(100,80,40,.2);
}
ai details[t="日"]::after {
  content: "✎";
  position: absolute;
  top: -4px;
  right: 16px;
  font-size: 1.7em;
  color: #ff7a6b;
  transform: rotate(12deg);
  filter: drop-shadow(0 2px 3px rgba(60,55,50,.25));
}
ai details[t="日"] > summary {
  color: #2b2622;
  font-size: 16px;
  letter-spacing: 1.5px;
  background: none;
  border-bottom: 2px dashed rgba(255,122,107,.5);
  border-radius: 0;
}
ai details[t="日"] > summary::before { content: "📔"; }
ai details[t="日"] p {
  font-size: 14.5px;
  color: #443c34;
  line-height: 2.05;
  text-indent: 2em;
  margin: .6em 0;
}
ai details[t="日"] p:first-of-type {
  text-indent: 0;
  color: #e8654f;
  font-size: 13.5px;
  letter-spacing: 1px;
}
ai details[t="日"] strong { color: #e8654f; }

/* ===== 移动端适配 ===== */
@media screen and (max-width: 480px) {
  ye-01,ye-02,ye-03,ye-04,ye-05,ye-06,ye-07,ye-08,ye-09,ye-10,
  ye-11,ye-12,ye-13,ye-14,ye-15,ye-16,ye-17,ye-18,ye-19,ye-20,
  oe-01,oe-02,oe-03,oe-04,oe-05,oe-06,oe-07,oe-08,oe-09,oe-10,
  oe-11,oe-12,oe-13,oe-14,oe-15,oe-16,oe-17,oe-18,oe-19,oe-20,
  oe-21,oe-22,oe-23,oe-24 { width: 150px; height: 150px; }
  os-01,os-02,os-03,os-04,os-05,os-06,os-07,os-08,os-09,os-10,
  os-11,os-12,os-13,os-14,os-15,os-16,os-17,os-18,os-19,os-20,
  os-21,os-22,os-23,os-24,os-25,os-26,os-27,os-28,os-29,os-30,
  ss-01,ss-02,ss-03,ss-04,ss-05,ss-06,ss-07,ss-08,ss-09,ss-10,
  ss-11,ss-12,ss-13,ss-14,ss-15,ss-16,ss-17,ss-18,ss-19,ss-20,
  ss-21,ss-22,ss-23,ss-24,ss-25,ss-26,ss-27,ss-28,ss-29,ss-30,
  ss-31,ss-32,ss-33,ss-34,ss-35,ss-36 { width: 170px; }
  od-01,od-02,od-03,od-04,od-05,od-06,od-07,od-08,od-09,od-10,
  od-11,od-12,od-13,od-14,od-15,od-16,od-17,od-18,od-19,od-20,
  od-21,od-22,od-23,od-24,od-25,od-26,od-27,od-28,od-29,od-30,
  od-31,od-32,od-33,
  yd-01,yd-02,yd-03,yd-04,yd-05,yd-06,yd-07,yd-08,yd-09,yd-10,
  yd-11,yd-12,yd-13,yd-14,yd-15,yd-16,yd-17,yd-18,yd-19,yd-20,
  yd-21,yd-22,yd-23,yd-24,yd-25,yd-26,yd-27,yd-28,yd-29,yd-30,
  yd-31,
  p3-01, p3-02, p3-03, p3-04, p3-05, p3-06, p3-07, p3-08, p3-09 { max-width: 94%; }
  op-01,op-02,op-03 { width: 150px; }
  ai details { padding: 3px 9px 5px; }
  ai details > summary { font-size: 14px; }
  ai details table { font-size: 12px; }
  ai details[t="日"] { transform: none; padding: 7px 12px 11px 34px; }
}

/* 让所有正文和卡片浮到伪元素上面 */
text,
ai details {
  position: relative;
  z-index: 1;
}