/* Animated lesson preview (home page, Training section) - js/lesson-preview.js. 13 Oct 2026.
   Same tokens as css/app-theme.css so it reads as the real control app. */
.lp{position:relative;width:100%;max-width:360px;margin:0 auto;user-select:none;pointer-events:none}
.lp-stage{position:absolute;left:0;top:0;width:360px;height:574px;transform-origin:0 0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#eef1f4}
.lp-stage::before{content:"";position:absolute;left:0;top:0;width:360px;height:382px;border-radius:26px;
  background:#121418;box-shadow:0 0 0 1px #262a31,0 24px 60px rgba(0,0,0,.45)}
.lp-top{position:absolute;left:0;top:0;width:360px;height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid #2a2e36;font-size:14px}
.lp-top b{font-weight:650}
.lp-side{color:#3ea6dd;width:58px}.lp-r{text-align:right;font-size:16px}
.lp-pane{position:absolute;left:0;top:56px;width:360px;height:270px;padding:8px 20px;transition:opacity .35s}
.lp-hide{opacity:0}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
.lp-tile{display:flex;flex-direction:column;align-items:center;gap:6px}
.lp-disc{width:64px;height:64px;border-radius:20px;background:#22262d;display:flex;align-items:center;justify-content:center;
  border:2px solid transparent;transition:border-color .3s,box-shadow .3s,transform .15s;color:#eef1f4}
.lp-tile.sel .lp-disc{border-color:#3ea6dd;box-shadow:0 0 0 3px rgba(62,166,221,.2)}
.lp-acc{color:#3ea6dd;display:flex}
.lp-mini{display:grid;grid-template-columns:1fr 1fr;gap:3px 5px}
.lp-lvl{width:46px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.lp-lvl i{display:block;height:100%;background:#3ea6dd;transition:width .2s}
.lp-lbl{font-size:11px;color:#9aa3ae;text-align:center;line-height:1.2}
.lp-sc{font-size:20px;color:rgba(0,0,0,.55)}
.lp-new{opacity:0;transform:scale(.6);transition:opacity .45s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.lp-new.in{opacity:1;transform:none}
.lp-sheet{position:absolute;left:0;width:360px;top:120px;height:210px;background:#1d2026;border-top:1px solid #2a2e36;
  border-radius:18px 18px 0 0;padding:14px 18px;transform:translateY(240px);opacity:0;
  transition:transform .45s cubic-bezier(.3,.9,.3,1),opacity .3s}
.lp-sheet.show{transform:none;opacity:1}
.lp-shh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:15px}
.lp-acctext{color:#3ea6dd;font-size:14px}
.lp-modes{display:flex;gap:8px;margin-bottom:12px}
.lp-modes span{flex:1;text-align:center;padding:7px;border-radius:9px;background:#23272e;color:#c9d0d8;font-size:12.5px;font-weight:600;transition:background .25s,color .25s}
.lp-modes span.on{background:#3ea6dd;color:#04263c}
.lp-row{margin:8px 0}
.lp-cl{display:flex;justify-content:space-between;font-size:11.5px;color:#9aa3ae;margin-bottom:6px}
.lp-track{position:relative;height:20px;border-radius:10px}
.lp-cct{background:linear-gradient(90deg,#ff9b3c,#fff7ea,#bcd8ff)}
.lp-dim{background:linear-gradient(90deg,#222,#fff)}
.lp-track i{position:absolute;top:1px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.lp-dlg{position:absolute;left:0;top:48px;width:360px;height:282px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,14,.55);opacity:0;transition:opacity .3s}
.lp-dlg.show{opacity:1}
.lp-dlgc{width:250px;background:#1d2026;border:1px solid #2a2e36;border-radius:16px;padding:16px}
.lp-dlgc b{display:block;font-size:14px;margin-bottom:10px}
.lp-field{height:34px;border-radius:9px;background:#23272e;padding:8px 10px;font-size:13px;display:flex;align-items:center}
.lp-caret{display:inline-block;width:1.5px;height:15px;background:#3ea6dd;margin-left:1px;animation:lpblink 1s steps(1) infinite}
@keyframes lpblink{50%{opacity:0}}
.lp-btn{margin-top:12px;padding:9px;border-radius:10px;background:#3ea6dd;color:#04263c;text-align:center;font-weight:650;font-size:13px}
.lp-tabs{position:absolute;left:0;top:330px;width:360px;height:52px;display:flex;border-top:1px solid #2a2e36;background:#16181d;border-radius:0 0 26px 26px}
.lp-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#6f7884;font-size:9.5px;position:relative;transition:color .25s}
.lp-tab.on{color:#3ea6dd}
.lp-tab.on::before{content:"";position:absolute;top:0;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:#3ea6dd}
.lp-ring{position:absolute;border:2.5px solid #3ea6dd;box-shadow:0 0 0 5px rgba(62,166,221,.18),0 0 24px rgba(62,166,221,.35);
  opacity:0;transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1),width .7s cubic-bezier(.45,0,.2,1),
  height .7s cubic-bezier(.45,0,.2,1),border-radius .7s,opacity .4s;z-index:5}
.lp-tap{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;z-index:6}
.lp-tap.go{animation:lptap .55s ease-out}
@keyframes lptap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
.lp-card{position:absolute;left:0;top:396px;width:360px;height:178px;background:#fff;color:#141416;border-radius:20px;padding:14px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.lp-eb{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#3ea6dd}
.lp-eb i{width:7px;height:7px;border-radius:50%;background:#3ea6dd}
.lp-eb span{margin-left:auto;color:#9aa3ae;letter-spacing:.04em}
.lp-card b{display:block;font-size:17px;margin:6px 0 4px;letter-spacing:-.01em}
.lp-card p{font-size:12px;line-height:1.45;color:#4a4f57;margin:0 0 8px}
.lp-wait{font-size:11.5px;color:#0b5c8c;background:#eef7fd;border:1px solid #c9e4f5;border-radius:8px;padding:6px 9px}
.lp-prog{position:absolute;left:18px;right:18px;bottom:12px;height:3px;border-radius:2px;background:#eceef1}
.lp-prog i{display:block;height:100%;border-radius:2px;background:#3ea6dd;transition:width .6s}