.g6-lesson-animation {
  --la-ink:#25394a; --la-muted:#586b7b; --la-blue:#2b72a7; --la-line:#d7e1e8;
  display:grid; gap:18px; margin:22px 0; padding:22px;
  border:1px solid var(--la-line); border-radius:16px; background:#f8fafb; color:var(--la-ink);
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
.g6-la-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.g6-la-kicker { color:var(--la-blue); font-size:12px; font-weight:750; }
.g6-la-head h3 { margin:6px 0; color:var(--la-ink); font-size:22px; line-height:1.4; }
.g6-la-head p { margin:0; color:var(--la-muted); font-size:14px; line-height:1.7; font-weight:500; }
.g6-la-head [data-la-count] { flex:none; padding-top:4px; color:var(--la-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.g6-la-view { display:flex; align-items:center; gap:12px; color:var(--la-muted); font-size:12px; line-height:1.6; }
.g6-la-view button { flex:none; min-height:44px; padding:9px 14px; border:1px solid var(--la-line); border-radius:8px; background:#fff; color:var(--la-blue); font:650 13px/1.4 system-ui,sans-serif; cursor:pointer; }
.g6-lesson-animation.is-expanded { position:fixed; inset:0; z-index:10000; display:block; overflow:auto; margin:0; padding:24px max(18px,calc((100vw - 1000px)/2)); border:0; border-radius:0; overscroll-behavior:contain; }
.g6-lesson-animation.is-expanded > * + * { margin-top:18px; }
.g6-lesson-animation.is-expanded .g6-la-view { position:sticky; top:-24px; z-index:1; padding:8px 0; background:inherit; }
.g6-lesson-animation.is-expanded .g6-la-scene { overflow:auto; overscroll-behavior-x:contain; }
.g6-lesson-animation.is-expanded .g6-la-scene svg { min-width:640px; }
.g6-la-board { min-width:0; border:1px solid var(--la-line); border-radius:12px; overflow:hidden; background:#fffdf7; }
.g6-la-scene { overflow:hidden; }
.g6-la-scene svg { display:block; width:100%; height:auto; aspect-ratio:16/9; }
.g6-la-scene svg text { font-weight:650; }
.g6-la-parameters { display:flex; flex-wrap:wrap; gap:12px 28px; padding:14px 20px; border-top:1px solid #e8e8dd; background:#fff; }
.g6-la-parameter { display:grid; gap:6px; flex:1 1 180px; min-width:0; color:var(--la-muted); font-size:13px; }
.g6-la-parameter > span { display:flex; justify-content:space-between; gap:12px; }
.g6-la-parameter output { color:var(--la-blue); font-weight:750; }
.g6-lesson-animation input[type=range] { width:100%; min-width:0; height:36px; margin:0; accent-color:var(--la-blue); cursor:pointer; }
.g6-lesson-animation select { min-height:44px; max-width:100%; padding:7px 12px; border:1px solid var(--la-line); border-radius:7px; background:#fff; color:var(--la-ink); font:inherit; }
.g6-la-explain { min-height:120px; padding:0 0 0 16px; border-left:3px solid var(--la-blue); }
.g6-la-explain b { color:var(--la-blue); font-size:16px; }
.g6-la-explain p { margin:7px 0; color:var(--la-ink); font-size:15px; line-height:1.8; font-weight:500; }
.g6-la-explain strong { display:block; color:#28715f; font-size:14px; line-height:1.7; font-weight:700; }
.g6-la-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.g6-la-steps button { display:grid; justify-items:start; align-content:start; gap:8px; min-width:0; min-height:76px; padding:11px; border:1px solid var(--la-line); border-radius:9px; background:#fff; color:var(--la-muted); text-align:left; font:650 13px/1.5 system-ui,sans-serif; cursor:pointer; }
.g6-la-steps button > span { color:var(--la-muted); font-size:12px; }
.g6-la-steps button[aria-pressed=true] { border-color:var(--la-blue); color:var(--la-blue); background:#eaf2f8; }
.g6-la-timeline { display:grid; gap:2px; color:var(--la-muted); font-size:12px; }
.g6-la-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.g6-la-controls button,.g6-la-question button { min-height:44px; padding:10px 14px; border:1px solid var(--la-line); border-radius:8px; background:#fff; color:var(--la-ink); font:650 13px/1.4 system-ui,sans-serif; cursor:pointer; }
.g6-la-controls .primary { border-color:var(--la-blue); background:var(--la-blue); color:#fff; }
.g6-la-controls button:disabled { opacity:.4; cursor:default; }
.g6-la-speed { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--la-muted); font-size:12px; }
.g6-la-speed select { padding:7px; }
.g6-la-question { padding-top:18px; border-top:1px solid var(--la-line); }
.g6-la-question > b { color:var(--la-ink); font-size:15px; }
.g6-la-question > p { margin:8px 0; font-size:14px; line-height:1.75; font-weight:500; }
.g6-la-question > div { display:flex; flex-wrap:wrap; gap:8px; }
.g6-la-question button[aria-pressed=true] { border-color:var(--la-blue); background:#eaf2f8; color:var(--la-blue); }
.g6-la-question .g6-la-feedback { min-height:25px; color:#28715f; }
.g6-lesson-animation :is(button,input,select):focus-visible { outline:3px solid #89b2d1; outline-offset:3px; }
@media(max-width:600px) {
  .g6-lesson-animation { gap:14px; padding:14px; margin:16px 0; border-radius:12px; }
  .g6-la-head h3 { font-size:19px; }
  .g6-la-head p { font-size:13px; }
  .g6-la-parameters { padding:10px 12px; gap:8px; }
  .g6-la-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g6-la-steps button { min-height:60px; display:flex; gap:8px; align-items:center; }
  .g6-la-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g6-la-controls button { min-width:0; padding:9px 5px; font-size:12px; }
  .g6-la-speed { margin:0; flex-wrap:wrap; justify-content:center; }
  .g6-la-explain { padding-left:12px; }
  .g6-la-explain p { font-size:14px; }
  .g6-la-question > div { display:grid; }
}
@media(prefers-color-scheme:dark) {
  .g6-lesson-animation { --la-ink:#e4ebf1; --la-muted:#b5c3ce; --la-blue:#8dc4ed; --la-line:#42576b; background:#1f303e; }
  .g6-la-parameters,.g6-la-controls button,.g6-la-question button,.g6-la-steps button,.g6-la-view button,.g6-lesson-animation select { background:#273e50; }
  .g6-la-controls .primary { background:#8dc4ed; color:#172c3c; }
  .g6-la-steps button[aria-pressed=true],.g6-la-question button[aria-pressed=true] { background:#314e64; }
  .g6-la-explain strong,.g6-la-question .g6-la-feedback { color:#9bd2bd; }
}
@media(prefers-reduced-motion:reduce) {
  .g6-lesson-animation *, .g6-lesson-animation *::before, .g6-lesson-animation *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}