.learning{max-width:1000px;padding-top:70px;padding-bottom:70px;color:#172139}.learning header{max-width:760px;margin-bottom:36px}.learning h1{font-size:clamp(2rem,5vw,3.4rem);margin:16px 0}.learning p{line-height:1.7}.learning-progress{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px}.learning progress{flex:1;min-width:140px;accent-color:#25635f}.learning-steps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.learning-steps button{border:1px solid #cdd5df;background:#fff;border-radius:12px;padding:12px 18px;color:#172139}.learning-steps button[aria-current]{background:#172139;color:white}.learning-card{padding:clamp(20px,4vw,36px);background:#fff;border:1px solid #dce2e9;border-radius:20px;margin-bottom:24px;box-shadow:0 8px 30px #17213908}.learning-example{background:#f0f5f5;padding:20px;border-radius:12px;margin:24px 0}.learning-example p{margin-bottom:0}.learning legend{font-size:1.1rem;font-weight:600}.learning-answers{display:grid;gap:12px}.learning-answers button{text-align:left;white-space:normal;border:1px solid #cdd5df;background:#f8fafc;padding:14px;border-radius:10px;color:#172139}.learning button:focus-visible,.learning a:focus-visible{outline:3px solid #287a77;outline-offset:4px}.learning [data-feedback]{margin-top:20px;font-weight:600}.learning-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:24px 0}.learning-metrics div{background:#f0f5f5;padding:20px;border-radius:12px}.learning-metrics strong,.learning-metrics span{display:block}.learning-metrics strong{font-size:1.6rem}.learning-task{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid #e3e7ed}.learning-task input{width:20px;height:20px;accent-color:#25635f}
.learning--backend{max-width:none;padding:0}.learning--backend header{max-width:none}.learning--backend h1{font-size:clamp(2rem,3.6vw,3rem)}.learning--backend .learning-card{box-shadow:0 16px 48px rgba(11,16,32,.06);border-color:var(--keyl-line);border-radius:24px}.learning--backend .learning-progress{padding:20px 24px}.learning--backend .learning-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.learning--backend .learning-steps button{font:inherit;font-size:.85rem;font-weight:600;min-height:60px;border-radius:16px;border-color:var(--keyl-line);transition:background .15s}.learning--backend .learning-steps button[aria-current]{background:var(--keyl-primary,#50007f);border-color:var(--keyl-primary,#50007f);color:#fff}.learning--backend .learning-example{background:#f5f2fa;border-left:3px solid #50007f}.learning--backend progress{accent-color:#50007f;height:10px}.learning--backend .learning-answers button{font:inherit;line-height:1.6;padding:16px 20px;border-radius:14px;background:#faf9fc}.learning--backend .learning-answers button:hover{border-color:#a78bfa;background:#f5f2fa}.demo-shell .app-topbar{gap:16px;flex-wrap:wrap}.demo-shell .app-nav a{min-height:48px}@media(max-width:991px){.learning--backend .learning-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-shell{display:block}.demo-shell .app-sidebar{position:static;transform:none;width:100%;height:auto;padding:20px}.demo-shell .app-nav{display:flex;flex-wrap:wrap;margin-top:12px}.demo-shell .app-nav__label{width:100%}.demo-shell .app-main{margin-left:0}.demo-shell .app-topbar{padding:16px}}

.learning-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}.learning-directory{display:flex;flex-direction:column;gap:6px;position:sticky;top:100px;max-height:calc(100vh - 130px);overflow:auto}.learning-directory .mini-eyebrow{margin:18px 10px 6px}.learning-directory .mini-eyebrow:first-child{margin-top:0}.learning-directory a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;color:var(--keyl-ink);padding:10px 12px;border-radius:10px;font-size:.85rem;line-height:1.5}.learning-directory a.active,.learning-directory a:hover{background:#f1eafa;color:#50007f}.learning-directory a.active{font-weight:700}.learning--backend h3{font-family:Montserrat,sans-serif;font-size:1.05rem;font-weight:700;margin:26px 0 14px}.learning-procedure{padding-left:26px}.learning-procedure li,.learning-capabilities li{padding:6px 0;line-height:1.75}.learning-procedure li::marker{font-weight:700;color:#50007f}.learning-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.learning-module-link{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--keyl-line,#dce2e9);border-radius:18px;text-decoration:none;background:#faf9fc;color:var(--keyl-ink,#172139)}.learning-module-link:hover{border-color:#a78bfa;background:#f5f2fa;color:#50007f}.learning-module-link>span:last-child{font-size:.85rem;line-height:1.65;color:#667085}.learning-module-link strong{font-size:1rem}.learning-workspace>div{min-width:0}.learning [data-sandbox] th{font-size:.8rem;white-space:nowrap}.learning [data-sandbox] td{font-size:.85rem;min-width:110px}.learning [data-sandbox] td:last-child{min-width:210px}.learning [data-sandbox-feedback]{color:#50007f;font-weight:600}.learning [data-sandbox] .learning-metrics strong{font-size:1.3rem}@media(max-width:1199px){.learning-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:991px){.learning-workspace{grid-template-columns:1fr}.learning-directory{position:static;max-height:300px}.demo-shell .app-nav{max-height:300px;overflow:auto}}@media(max-width:575px){.learning-module-grid{grid-template-columns:1fr}}