.learning-catalog{margin-bottom:32px;color:#303238}.learning-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}.learning-kicker{font-size:var(--font-caption);letter-spacing:.12em;color:#68756e;font-weight:600}.learning-intro h2{font-size:28px;line-height:1.25;margin:10px 0}.learning-intro p{font-size:14px;color:#616a65;margin:0 0 12px}.learning-progress-label{font-size:12px;color:#00504e}.learning-catalog button,.learning-dialog button{font:inherit;cursor:pointer;clip-path:none}.learning-catalog button:focus-visible,.learning-dialog button:focus-visible{outline:3px solid #b94320;outline-offset:3px}.learn-primary{background:#00504e!important;color:white!important;border:1px solid #00504e!important;border-radius:10px;min-height:44px;padding:10px 18px}.learning-intro>button{flex-shrink:0;display:flex;gap:24px;align-items:center}.learning-course-track,.learning-play-track{height:4px;background:#edf0ee;border-radius:9px;overflow:hidden}.learning-course-track i,.learning-play-track i{display:block;height:100%;background:#00504e;border-radius:9px}.learning-group{margin-top:28px}.learning-group h3{font-size:17px;margin:0 0 16px}.learning-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.learning-card{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;text-align:left;border:1px solid #e0e5e2;background:#fff;border-radius:14px;padding:24px;min-height:195px;color:#303238;transition:border-color .18s,box-shadow .18s}.learning-card:hover{border-color:#789d92;box-shadow:0 5px 16px #183d3010}.learning-card-number{font-size:13px;color:#b94320;font-weight:600}.learning-card strong{font-size:17px}.learning-card>span:not(.learning-card-number){font-size:13px;line-height:1.65;color:#657069}.learning-card small{font-size:12px;color:#527166;display:flex;justify-content:space-between;align-items:center}.learning-card small b{font-size:19px;font-weight:400}.learning-storage-note{font-size:12px;color:#707a74;margin:24px 0 0}
.learning-dialog{border:0;padding:0;border-radius:18px;width:min(1220px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 32px);height:min(850px,calc(100dvh - 32px));background:white;color:#303238;box-shadow:0 24px 90px #16362f30;overflow:hidden}.learning-dialog[open]{display:flex;flex-direction:column}.learning-dialog::backdrop{background:#283a3560;backdrop-filter:blur(5px)}.learning-dialog.is-wide{width:calc(100vw - 32px);height:calc(100dvh - 32px)}.learning-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px;flex-shrink:0}.learning-head>div:first-child{display:flex;align-items:center;gap:16px;min-width:0}.learning-head span{font-size:12px;color:#697770;white-space:nowrap}.learning-head h2{font-size:20px;line-height:1.35;margin:0}.learning-icon-actions{display:flex;gap:8px}.learning-icon-actions button{width:36px;height:36px;border:1px solid #e3e7e4;background:#fff;border-radius:9px;color:#596960;font-size:23px;padding:0;flex-shrink:0}.learning-layout{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:0;flex:1}.learning-outline{padding:16px;overflow:auto;background:#f7f9f8;display:flex;flex-direction:column;gap:8px}.learning-outline button{display:flex;gap:12px;align-items:center;min-height:44px;flex-shrink:0;padding:12px;border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;font-size:12px;line-height:1.5;color:#53645b}.learning-outline button span{font-size:var(--font-caption);min-width:20px}.learning-outline button[aria-current]{background:white;border-color:#d6e3dd;color:#00504e}.learning-main{padding:16px 24px 24px;overflow:auto;min-width:0}.learning-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}.learning-steps button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px;border:1px solid #e2e7e3;border-radius:9px;background:#fff;color:#607368;font-size:12px}.learning-steps button[aria-current]{border-color:#00504e;background:#f0f6f3;color:#00504e}.learning-steps span{font-size:var(--font-caption)}.learning-stage{border:1px solid #e3e9e5;border-radius:14px;overflow:hidden;background:#f6f8f7}.learning-stage svg{display:block;width:100%;height:auto;font-family:Geologica,'Segoe UI',sans-serif}.learning-caption{padding:20px 0 16px;min-height:130px}.learning-caption>span{font-size:var(--font-caption);letter-spacing:.1em;color:#b94320;font-weight:600}.learning-caption h3{font-size:19px;margin:8px 0}.learning-caption p{font-size:14px;line-height:1.7;margin:0;max-width:760px}.learning-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 0}.learning-control-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.learning-controls button,.learning-actions button{border:1px solid #d6dfd9;background:white;border-radius:9px;min-height:44px;padding:10px 14px;color:#405d4e;font-size:12px}.learning-controls button[aria-pressed=true]{background:#edf5f0;border-color:#b1c9bd}.learning-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.learning-dialog button:disabled{opacity:.45;cursor:default}.learning-practice{display:block;margin:16px 0;border:0;background:transparent;padding:12px 0;color:#00504e;min-height:44px;font-size:13px!important}.learning-transcript{font-size:13px;line-height:1.7;color:#626d65}.learning-transcript summary{cursor:pointer;padding:12px 0}.learning-transcript h4{font-size:14px;color:#303238}.learning-error{font-size:12px;color:#975222;margin:0 0 12px}.learning-error:empty{display:none}.learning-quiz{padding:40px 24px;background:#f7faf8;border-radius:14px;margin-bottom:24px}.learning-quiz h3{font-size:24px;line-height:1.4;max-width:700px;margin:16px 0 24px}.learning-answers{display:grid;gap:12px}.learning-answers button{border:1px solid #dae4dd;background:#fff;border-radius:10px;min-height:56px;padding:16px;text-align:left;color:#303238;font-size:14px}.learning-answers button[aria-pressed=true]{border-color:#00504e;background:#eaf4ed}.learning-feedback{min-height:48px;font-size:14px;line-height:1.65;color:#4d6657;margin:24px 0 0}
.lesson-pointer{transform:translate(var(--pointer-x),var(--pointer-y))}.has-started .lesson-pointer{animation:lesson-pointer 2.5s ease-out both}.has-started .lesson-click{animation:lesson-click 2.5s ease-out both}.has-started .lesson-bar{transform-box:fill-box;transform-origin:left;animation:lesson-bar 1.4s ease-out both}.has-started .lesson-move{animation:lesson-move 3s ease-in-out both}.has-started .lesson-scene-content{animation:lesson-reveal .5s ease-out both}.learning-dialog:not(.is-playing) svg *{animation-play-state:paused!important}@keyframes lesson-pointer{from{transform:translate(calc(var(--pointer-x) + 55px),calc(var(--pointer-y) + 40px));opacity:0}35%,100%{transform:translate(var(--pointer-x),var(--pointer-y));opacity:1}}@keyframes lesson-click{0%,35%{opacity:0;transform:scale(.4)}55%{opacity:.35;transform:scale(1.2)}100%{opacity:.12;transform:scale(1)}}@keyframes lesson-bar{from{transform:scaleX(.05)}to{transform:scaleX(1)}}@keyframes lesson-move{0%,20%{transform:translate(0,0);opacity:1}65%,100%{transform:translate(15px,-12px);opacity:.65}}@keyframes lesson-reveal{from{opacity:.3}to{opacity:1}}
@media(max-width:1050px){.learning-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-layout{grid-template-columns:190px minmax(0,1fr)}.learning-steps span{display:none}.learning-controls{flex-wrap:wrap}}@media(max-width:760px){.learning-intro{align-items:flex-start;flex-direction:column}.learning-intro h2{font-size:24px}.learning-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}.learning-layout{display:block;overflow:auto}.learning-outline{display:none}.learning-main{overflow:visible;padding:16px}.learning-head{padding:16px;gap:12px}.learning-head h2{font-size:17px}.learning-head>div:first-child{gap:8px}.learning-head span{display:none}.learning-stage{overflow-x:auto}.learning-stage svg{min-width:660px}.learning-controls,.learning-control-pair{width:100%}.learning-controls>button{width:100%}.learning-caption{min-height:0}.learning-quiz{padding:24px 16px}.learning-quiz h3{font-size:20px}.learning-cards{grid-template-columns:1fr}}
.learning-main{display:flex;flex-direction:column;overflow:auto}.learning-steps,.learning-caption,.learning-controls,.learning-actions{flex-shrink:0}.learning-stage{flex:1;min-height:180px}.learning-stage svg{height:100%;max-height:100%}.learning-caption{min-height:0;padding:12px 0}.learning-caption h3{font-size:17px;margin:6px 0}.learning-caption p{font-size:13px;line-height:1.6}.learning-controls{padding:12px 0}.learning-control-pair{width:320px;max-width:100%}.learning-quiz{flex:1}.learning-narration{display:none}
@media(max-width:760px){.learning-main{display:block}.learning-stage{height:340px}.learning-controls{display:flex}.learning-control-pair{width:100%}}
@media(prefers-reduced-motion:reduce){.learning-dialog svg *,.learning-card{animation:none!important;transition:none!important}}
/* Real interface lessons: large stage, optional course outline and native-size inspection. */
.learning-dialog{width:min(1480px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
.learning-head{padding:12px 24px}.learning-layout{display:block;position:relative;overflow:hidden}.learning-main{height:100%;padding:8px 24px 16px}.learning-outline{display:none}.show-outline .learning-outline{display:flex;position:absolute;left:0;top:0;bottom:0;width:260px;z-index:4;box-shadow:8px 0 30px #203b2520}.learning-steps{display:flex;gap:8px;margin-bottom:8px}.learning-steps button{flex:1;min-width:0;min-height:36px;padding:6px}.learning-steps span{display:none}.learning-stage{position:relative;min-height:220px;background:#f3f5f4}.learning-stage svg{width:100%;height:100%;min-width:0;object-fit:contain}.learning-zoom-button{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border:1px solid #cbd7d0;border-radius:9px;background:#fff;color:#00504e;font-size:24px!important;box-shadow:0 2px 8px #183c2420}.learning-caption{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:10px 0}.learning-caption>span{grid-row:1;align-self:center;font-size:var(--font-caption)}.learning-caption h3{margin:0;font-size:15px}.learning-caption p{grid-column:1/-1;max-width:none;font-size:13px;line-height:1.5}.learning-controls{padding:8px 0}.learning-controls button,.learning-actions button{min-height:36px;padding:7px 12px}.learning-control-pair{width:320px;gap:12px}.learning-actions{flex-shrink:0}.learning-image-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-width:none;max-height:none;border:0;border-radius:12px;padding:8px;background:#f4f6f5;overflow:hidden}.learning-image-dialog::backdrop{background:#152e28a0}.learning-image-dialog>button{position:absolute;right:16px;top:16px;width:40px;height:40px;z-index:2;border:1px solid #d5ded8;background:white;border-radius:10px;font-size:26px;box-shadow:0 3px 14px #16352a30}.learning-image-dialog>div{width:100%;height:100%;overflow:auto}.learning-image-dialog img{display:block;max-width:none;width:1280px;height:720px;margin:auto}.has-started .lesson-highlight{animation:lesson-focus 1.8s ease-in-out 2}@keyframes lesson-focus{50%{stroke-width:5;opacity:.6}}
@media(max-width:760px){.learning-main{display:flex;padding:8px 16px 16px}.learning-layout{overflow:hidden}.learning-stage{height:auto;min-height:180px}.learning-caption{display:block}.learning-caption>span{display:none}.learning-caption h3{margin-bottom:4px}.learning-controls{flex-wrap:nowrap;gap:8px}.learning-control-pair{width:auto;flex:1;gap:8px}.learning-controls>button{width:auto}.learning-head{padding:12px 16px}.learning-caption p{font-size:12px}.learning-actions{gap:12px}}
.learning-image-dialog img{width:auto;height:auto}