/* One clickable surface, with artwork and labels lifted from the card face. */
.learning-section .lesson.depth-panel{
  --depth-roll:-.6deg;--depth-range:.8deg;--depth-sway:1.4deg;--depth-lift:3px;
  min-width:0;filter:none;overflow:visible;isolation:auto;border-radius:11px;
  border-color:#75618e9c;background:linear-gradient(145deg,#211b30,#11151f 72%);
  transform:perspective(1100px) rotateX(-.8deg) rotateY(1.4deg) rotateZ(var(--depth-roll));
  box-shadow:inset 1px 1px 0 #e8d8ff26,0 3px 0 #4a3a5a,0 6px 0 #282132,0 9px 0 #15131e,0 22px 30px -10px #000b,0 28px 50px -20px #8757bd28;
}
.learning-section .lesson.depth-panel:nth-child(2){--depth-roll:.4deg;--depth-sway:1deg}
.learning-section .lesson.depth-panel:nth-child(3){--depth-roll:.7deg;--depth-sway:-1.2deg}
.learning-section .lesson.depth-panel:before{inset:3px -2px -4px 2px;transform:translateZ(-14px);border-color:#7c668a80;background:linear-gradient(145deg,#4a385c,#161923);box-shadow:0 15px 24px #0007}
.learning-section .lesson.depth-panel:after{background:radial-gradient(ellipse at var(--shine-x) var(--shine-y),#e2ccff1c,transparent 65%),linear-gradient(120deg,#ffffff08,transparent 50%)}
.learning-section .lesson.depth-panel:is(:hover,:focus-visible){border-color:#c4a5e7;filter:none}
.learning-section .lesson.depth-panel:focus-visible{outline:2px solid #dfff83;outline-offset:7px}
.lesson.depth-panel>.lesson-art{flex:none;width:100%;border-radius:10px 10px 0 0;transform-style:preserve-3d;transform:translateZ(9px);border-bottom-color:#8f6aae4a;box-shadow:inset 0 1px 0 #e6d0ff14,0 5px 12px -7px #000a}
.lesson.depth-panel>.lesson-meta{transform:translateZ(15px)}
.lesson.depth-panel>strong{transform:translateZ(23px);text-shadow:0 3px 7px #0006}
.lesson.depth-panel>span:not(.lesson-art):not(.lesson-meta):not(.lesson-link){transform:translateZ(12px)}
.lesson.depth-panel>.lesson-link{transform:translateZ(18px);border-top-color:#8e70a63b}
.lesson.depth-panel .art-edit>span{transform:translateZ(12px);text-shadow:0 3px 5px #0008}
.lesson.depth-panel .art-edit>b{transform:translateZ(29px);background:linear-gradient(135deg,#4b3864,#211b32);border-color:#c3a8e9b3;box-shadow:inset 1px 1px 0 #eeddff26,0 3px 0 #644b7b,0 6px 0 #241b33,0 13px 18px #0007;text-shadow:0 2px 4px #0007}
.lesson.depth-panel .art-color>i{transform:translateZ(26px) rotateX(16deg);box-shadow:inset 1px 2px 1px #fff4,inset -2px -3px 1px #0c0e1a80,0 4px 0 #45314e,0 7px 0 #241c32,0 13px 16px #0007}
.lesson.depth-panel .art-color>i:nth-child(2){transform:translateZ(35px) rotateX(16deg)}
.lesson.depth-panel .art-deliver>span{transform:translateZ(25px);background:linear-gradient(135deg,#203e43,#13252d);border-color:#8ed0c8a3;box-shadow:inset 1px 1px 0 #d8fff521,0 3px 0 #345254,0 6px 0 #172a33,0 12px 18px #0007;text-shadow:0 3px 6px #0006}
.lesson.depth-panel .art-deliver>b{transform:translateZ(15px);text-shadow:0 4px 7px #0009}
@media(max-width:760px){
  .learning-section .lesson.depth-panel{--depth-roll:0deg;--depth-range:.4deg;--depth-sway:.65deg;--depth-lift:2px;transform:perspective(1100px) rotateX(-.4deg) rotateY(.65deg)}
  .learning-section .lesson.depth-panel:nth-child(n){--depth-roll:0deg;--depth-sway:.65deg}
  .lesson.depth-panel>strong{transform:translateZ(15px)}
  .lesson.depth-panel>.lesson-link{transform:translateZ(12px)}
}
@media(prefers-reduced-motion:reduce){
  .learning-section .lesson.depth-panel{transform:none}
  .lesson.depth-panel>*,.lesson.depth-panel .lesson-art>*{transform:none}
}