/* finesse · register=h5+product · morph=app-shell · lesson art leads, audio follows */
#lesson-area .lesson-visual{
  width:min(100%,520px);
  margin:12px 0 14px;
  overflow:hidden;
  border:1px solid var(--site-line);
  border-radius:14px;
  background:var(--site-raised);
}
#lesson-area .lesson-visual>img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:contain;
}
#lesson-area .lesson-media-dock{
  width:100%;
  padding:5px;
  background:#242132;
  color:#f7f5ff;
}
#lesson-area .lesson-audio-actions,
#lesson-area .harmony-actions{
  display:flex;
  gap:4px;
  margin:0;
}
#lesson-area .lesson-media-dock button{
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  padding:5px 7px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
#lesson-area .lesson-media-dock button:hover:not(:disabled),
#lesson-area .lesson-media-dock button:focus-visible{
  border-color:#a698d1;
  background:#38334d;
}
#lesson-area .lesson-media-dock button[aria-pressed=true],
#lesson-area #harmony-menu-toggle[aria-expanded=true]{
  background:#6f55c2;
  color:#fff;
}
#lesson-area #harmony-menu-toggle span{margin-left:2px;font-size:14px}
#lesson-area .harmony-lesson{
  margin:5px 0 0;
  padding:9px 4px 4px;
  border-top:1px solid #625a77;
}
#lesson-area .harmony-lesson h3,
#lesson-area .harmony-lesson p{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
#lesson-area .harmony-lesson .eyebrow{
  margin:0 0 5px;
  color:#c9c1df;
  font-size:10px;
  letter-spacing:0;
}
#lesson-area .harmony-progression{
  display:flex;
  gap:4px;
  padding:0;
  margin:0 0 6px;
  list-style:none;
}
#lesson-area .harmony-progression li{
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 4px;
  border:1px solid #625a77;
  border-radius:6px;
  color:#e4ddf4;
  text-align:center;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
#lesson-area .harmony-progression li.current{border-color:#d5c6ff;background:#524175;color:#fff}
#lesson-area #harmony-status{display:block;min-height:0;margin:5px 2px 0;color:#e4ddf4;font-size:11px;line-height:1.4}
#lesson-area #harmony-status:empty{display:none}
#lesson-area .lesson-visual figcaption{padding:8px 11px 10px;font-size:12px;line-height:1.45}
#lesson-area .lesson-audio-status{display:block;margin:4px 0 0;color:var(--site-muted);font-size:11px}
#lesson-area .lesson-audio-status:empty{display:none}
@media(max-width:760px){
  body.mode-lab-integrated[data-main-view=learn] #explore-view #lesson-area,
  body[data-main-view=learn] #explore-view #lesson-area{
    display:block;
    overflow-y:auto;
    overflow-x:clip;
    overscroll-behavior-y:contain;
    padding:4px 0 calc(18px + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:24px;
  }
  body.mode-lab-integrated[data-main-view=learn] #explore-view .lesson-picker,
  body[data-main-view=learn] #explore-view .lesson-picker{min-height:54px;margin:0 0 6px}
  body.mode-lab-integrated[data-main-view=learn] #explore-view #lesson-area .lesson-card,
  body[data-main-view=learn] #explore-view #lesson-area .lesson-card{
    display:block;
    flex:none;
    min-height:0;
    overflow-x:visible;
    overflow-y:visible;
    align-items:stretch;
    margin:0;
    padding:14px;
  }
  #lesson-area .lesson-visual{width:100%;max-width:none;margin:10px 0 12px}
  #lesson-area .lesson-visual>img{width:100%;height:auto;max-height:none;object-fit:contain}
  body[data-main-view=learn] #explore-view .lesson-next{margin-top:12px}
}