.example-progress{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.example-progress button{font:inherit;font-size:12px;padding:11px 13px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--subtle)}.example-progress .on{border-color:#7eaa61;background:#eaf4e1;color:#3e6e2e}.example-step{display:flex;gap:18px;align-items:flex-start;margin-top:18px}.example-step .module-index{flex-shrink:0}.example-step h2{font-size:17px;line-height:1.5}.example-outline{padding-left:24px;color:var(--subtle);line-height:1.8}.example-outline li{padding:9px 0}.example-footer{position:sticky;bottom:0;margin:25px 0 0;border-top:1px solid var(--line);padding:18px 0;background:var(--canvas);display:flex;justify-content:flex-end}.example-footer .btn{min-width:190px}[data-theme=dark] .example-progress .on{background:#293d29;color:#c2dfa7;border-color:#64814b}.box li{line-height:1.8;color:var(--subtle)}
@media(max-width:760px){.example-progress{display:grid;grid-template-columns:1fr 1fr;gap:8px}.example-progress button{font-size:11px;min-height:48px}.example-step{padding:18px 14px;gap:12px}.example-step h2{font-size:15px}.example-step .module-index{width:30px;height:35px}.example-footer{bottom:calc(77px + env(safe-area-inset-bottom));padding:12px 0}.example-footer .btn{width:100%;font-size:12px}}