/* One explanation layout for the main screen and the participants. */
.learning-explainer { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,440px); gap:54px; align-items:center; max-width:100%; margin:auto; }
/* Individual rotation composes with the existing arrival/store animations. */
.learning-explainer > .learning-card,.learning-explainer > .screen-learning-card { rotate:-3.5deg; }
.learning-bubble:nth-of-type(1) { --bubble-tilt:-4deg; }
.learning-bubble:nth-of-type(2) { --bubble-tilt:.5deg; }
.learning-bubble:nth-of-type(3) { --bubble-tilt:3.5deg; }
.learning-insights { min-width:0; color:#172033; font-family:var(--sans,Arial,sans-serif); text-align:left; }
.learning-insights-label { margin:0 0 16px 2px; color:var(--card-accent,#66d6a8); font:700 11px/1.3 ui-monospace,monospace; letter-spacing:.2em; }
.learning-bubble { rotate:var(--bubble-tilt,0deg); transform-origin:0 50%; position:relative; display:flex; align-items:flex-start; gap:13px; padding:20px 22px; margin-top:16px; border:1px solid rgba(255,255,255,.65); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); animation:learningBubbleIn .48s cubic-bezier(.2,.8,.25,1.12) both; animation-delay:calc(.55s + var(--bubble-index) * .65s); }
.learning-bubble::before { content:""; position:absolute; left:-12px; top:29px; width:22px; height:22px; border-radius:3px; background:#fff; transform:rotate(45deg); }
.learning-bubble-number { position:relative; flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--card-accent,#66d6a8) 28%,white); color:#172033; font:700 10px/1 ui-monospace,monospace; }
.learning-bubble h3 { margin:2px 0 7px; color:#172033; font-size:18px; line-height:1.2; font-weight:750; letter-spacing:-.025em; }
.learning-bubble p { margin:0; color:#48515e; font-size:15px; line-height:1.5; font-weight:450; }
.learning-reveal,.learning-modal,.screen-learning { overflow-y:auto; }
.learning-reveal-panel { width:100%; margin:auto; }
.learning-modal .learning-explainer { padding-block:30px; }
.screen-learning .learning-explainer { grid-template-columns:auto minmax(0,590px); gap:clamp(42px,5vw,96px); }
.screen-learning .learning-insights-label { font-size:14px; margin-bottom:22px; }
.screen-learning .learning-bubble { padding:26px 30px; gap:18px; margin-top:22px; border-radius:22px; }
.screen-learning .learning-bubble h3 { font-size:clamp(20px,1.55vw,29px); }
.screen-learning .learning-bubble p { font-size:clamp(17px,1.2vw,23px); }
.screen-learning .learning-bubble-number { flex-basis:34px; height:34px; font-size:12px; }
.screen-learning .learning-explainer > .screen-learning-card { width:min(440px,43vw); }
.is-leaving .learning-insights,.is-closing .learning-insights { opacity:0; transition:opacity .2s; }
@keyframes learningBubbleIn { from { opacity:0; transform:translate(-16px,12px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:1050px) {
  .screen-learning .learning-explainer { grid-template-columns:auto minmax(0,440px); gap:34px; }
  .screen-learning .learning-bubble { padding:18px; margin-top:14px; }
  .screen-learning .learning-bubble h3 { font-size:19px; }
  .screen-learning .learning-bubble p { font-size:15px; }
}
@media (max-width:760px) {
  .learning-reveal,.learning-modal,.screen-learning { padding:50px 20px 28px; align-items:flex-start; }
  .learning-explainer,.screen-learning .learning-explainer { display:flex; flex-direction:column; width:100%; gap:32px; }
  .learning-reveal-panel { gap:24px; }
  .learning-explainer > .learning-card,.learning-explainer > .screen-learning-card { rotate:-2deg; }
  .learning-bubble:nth-of-type(1) { --bubble-tilt:-1.5deg; }
  .learning-bubble:nth-of-type(2) { --bubble-tilt:.4deg; }
  .learning-bubble:nth-of-type(3) { --bubble-tilt:1.3deg; }
  .learning-insights { width:min(440px,100%); }
  .learning-bubble { padding:18px; gap:12px; margin-top:14px; }
  .learning-bubble::before { top:-8px; left:27px; width:18px; height:18px; }
  .learning-bubble h3,.screen-learning .learning-bubble h3 { font-size:17px; }
  .learning-bubble p,.screen-learning .learning-bubble p { font-size:14px; line-height:1.55; }
  .learning-insights-label,.screen-learning .learning-insights-label { font-size:11px; margin-bottom:20px; }
  .screen-learning .learning-explainer > .screen-learning-card { width:min(330px,82vw); }
  .learning-modal .learning-explainer { padding-block:0; }
  .learning-dismiss { margin-bottom:12px; }
}
@media (max-height:760px) and (min-width:761px) {
  .screen-learning .learning-explainer > .screen-learning-card { width:350px; }
  .screen-learning .screen-learning-card-inner { padding:24px; }
  .screen-learning .slc-copy { font-size:16px; }
  .screen-learning .slc-orb { width:90px; height:90px; margin:12px auto; font-size:44px; }
  .screen-learning .slc-title { font-size:29px; }
  .screen-learning .learning-bubble { padding:18px 24px; margin-top:14px; }
  .screen-learning .learning-bubble h3 { font-size:22px; }
  .screen-learning .learning-bubble p { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { .learning-bubble { animation:none; } }