.module-tutorial {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(280px, 1.28fr);
  gap: 22px;
  align-items: center;
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid rgba(93, 132, 190, .26);
  border-radius: 22px;
  background: linear-gradient(135deg, #f6fbff 0%, #fffaf3 100%);
  box-shadow: 0 18px 44px rgba(27, 54, 93, .1);
}
.module-tutorial-copy .pill { margin-bottom: 10px; }
.module-tutorial-copy h3 { margin: 0 0 9px; color: var(--navy); font-size: clamp(1.25rem, 2vw, 1.65rem); }
.module-tutorial-copy p { margin: 0 0 16px; color: #44546a; line-height: 1.65; }
.module-tutorial-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.module-visual-route { display: flex; align-items: stretch; gap: 7px; margin: 17px 0; }
.module-visual-route > i { align-self: center; color: #7890ac; font-style: normal; font-weight: 900; }
.module-visual-step { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid rgba(87, 121, 166, .2); border-radius: 14px; background: rgba(255,255,255,.74); }
.module-visual-step > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: #e9f7ff; font-size: 1.25rem; }
.module-visual-step div { display: grid; min-width: 0; }
.module-visual-step small { color: #6b7d94; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.module-visual-step strong { color: #17365f; font-size: .84rem; }
.module-visual-step em { color: #53657b; font-size: .73rem; font-style: normal; line-height: 1.25; }
.module-tutorial-m2 .module-visual-step > span { background: #fff2dd; }
.module-tutorial-m3 .module-visual-step > span { background: #e8f9ec; }
.module-practices { margin: 16px 0; border: 1px solid rgba(69, 111, 166, .22); border-radius: 15px; background: rgba(255,255,255,.72); overflow: hidden; }
.module-practices summary { padding: 13px 15px; color: #17365f; font-weight: 850; cursor: pointer; }
.module-practices[open] summary { border-bottom: 1px solid rgba(69, 111, 166, .16); }
.module-practices-grid { display: grid; gap: 9px; padding: 12px; }
.module-practices-grid article { display: flex; gap: 10px; padding: 11px; border-radius: 12px; background: #f7fbff; }
.module-practices-grid article > span { flex: 0 0 34px; font-size: 1.35rem; }
.module-practices-grid article div { display: grid; gap: 3px; }
.module-practices-grid strong { color: #18385f; font-size: .88rem; }
.module-practices-grid p { margin: 0; color: #4c6079; font-size: .78rem; line-height: 1.4; }
.module-practices-grid small { color: #66768b; font-size: .73rem; line-height: 1.35; }
.module-practices-note { margin: 0 13px 13px !important; padding: 10px 12px; border-radius: 10px; background: #fff8df; color: #675624 !important; font-size: .75rem; }
.cpeip-rubric-shell { margin: 0 0 24px; padding: 24px; border: 1px solid rgba(57, 91, 139, .2); border-radius: 24px; background: linear-gradient(145deg,#fbfdff,#f4f8ff 58%,#fffaf0); box-shadow: 0 22px 52px rgba(22,48,84,.1); }
.cpeip-rubric-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.cpeip-rubric-head h3 { margin: 5px 0 7px; color: #102f58; font-size: clamp(1.35rem,2vw,1.8rem); }
.cpeip-rubric-head p { margin: 0; color: #53677f; }
.cpeip-kicker { color: #1d6a68; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cpeip-rubric-head > a { flex: 0 0 auto; padding: 12px 15px; border-radius: 12px; background: #113764; color: #fff !important; font-size: .78rem; font-weight: 850; text-decoration: none; }
.cpeip-format-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr auto 1fr; gap: 8px; align-items: center; margin: 20px 0; padding: 14px; border-radius: 18px; background: #102d53; color: #fff; }
.cpeip-format-map span { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .76rem; font-weight: 800; }
.cpeip-format-map b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #55d8c8; color: #092848; font-size: .68rem; }
.cpeip-format-map i { color: #81a6c9; font-style: normal; }
.cpeip-task-stack { display: grid; gap: 12px; }
.cpeip-task { border: 1px solid #dce7f3; border-radius: 18px; background: #fff; overflow: hidden; }
.cpeip-task > summary { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px; cursor: pointer; list-style: none; }
.cpeip-task > summary::-webkit-details-marker,.cpeip-indicator > summary::-webkit-details-marker { display:none; }
.cpeip-task > summary > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #e5f8f4; color: #17615e; font-weight: 900; }
.cpeip-task > summary div { display: grid; gap: 2px; }
.cpeip-task > summary small { color: #718197; font-size: .69rem; font-weight: 800; text-transform: uppercase; }
.cpeip-task > summary strong { color: #17365f; }
.cpeip-task > summary em { padding: 7px 10px; border-radius: 99px; background: #edf3fb; color: #45617e; font-size: .7rem; font-style: normal; font-weight: 800; }
.cpeip-task[open] > summary { border-bottom: 1px solid #e5edf6; background: #f9fcff; }
.cpeip-indicator-grid { display: grid; gap: 9px; padding: 12px; }
.cpeip-indicator { border: 1px solid #e2eaf3; border-radius: 14px; background: #fcfdff; overflow: hidden; }
.cpeip-indicator > summary { display: flex; align-items: center; gap: 10px; padding: 13px; cursor: pointer; list-style: none; }
.cpeip-indicator > summary span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:10px; background:#eaf0ff; color:#31548b; font-size:.72rem; font-weight:900; }
.cpeip-indicator > summary strong { color:#25415f; font-size:.86rem; }
.cpeip-indicator[open] > summary { background:#f2f7ff; }
.cpeip-indicator-body { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 13px 13px; }
.cpeip-indicator-body > div { padding:12px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px #e7edf4; }
.cpeip-indicator-body small { color:#54708c; font-size:.68rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.cpeip-indicator-body p { margin:5px 0 0; color:#43566d; font-size:.77rem; line-height:1.46; }
.cpeip-indicator-body .cpeip-mbe { grid-column:1/-1; background:#eef9f5; }
.cpeip-official-note { margin-top:14px; padding:13px 15px; border-left:4px solid #e6b94d; border-radius:10px; background:#fff8e6; color:#665728; font-size:.78rem; line-height:1.5; }
@media (max-width: 820px) {
  .cpeip-rubric-head { align-items:flex-start; flex-direction:column; }
  .cpeip-rubric-head > a { width:100%; text-align:center; }
  .cpeip-format-map { grid-template-columns:1fr; }
  .cpeip-format-map i { display:none; }
  .cpeip-indicator-body { grid-template-columns:1fr; }
  .cpeip-task > summary { grid-template-columns:auto 1fr; }
  .cpeip-task > summary em { grid-column:2; justify-self:start; }
}
.module-tutorial-download { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 11px; background: #102b54; color: #fff !important; font-weight: 800; text-decoration: none; }
.module-tutorial-download-social { background: #0e7f73; }
.module-tutorial-note { display: block; margin-top: 10px; color: #64748b; font-size: .82rem; }
.module-tutorial-player { padding: 9px; border-radius: 18px; background: #07152d; box-shadow: 0 18px 34px rgba(7, 21, 45, .22); }
.module-tutorial-player video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #020815; object-fit: contain; }
@media (max-width: 760px) {
  .module-tutorial { grid-template-columns: 1fr; padding: 16px; }
  .module-tutorial-player { order: -1; }
  .module-visual-route { display: grid; grid-template-columns: 1fr; }
  .module-visual-route > i { display: none; }
  .module-tutorial-download { width: 100%; }
  .cpeip-rubric-shell { padding:16px; }
}