.ex-learning{margin-block:1.5rem 2rem;border:1px solid var(--sl-color-hairline);border-radius:.8rem;padding:.35rem 1.25rem;background:var(--sl-color-bg-sidebar)}.ex-learning ol{margin:0;padding:0;list-style:none}.ex-learning li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:.9rem;position:relative;padding:1.05rem 0}.ex-learning li+li{border-top:1px solid var(--sl-color-hairline-light)}.ex-learning-index{display:grid;place-items:center;width:2.45rem;height:2.45rem;border:1px solid var(--sl-color-hairline);border-radius:50%;color:var(--sl-color-text-accent);background:var(--sl-color-bg);font-family:var(--__sl-font-mono);font-size:.72rem;font-weight:700}.ex-learning strong,.ex-learning p{display:block;margin:0}.ex-learning strong{font-size:.95rem}.ex-learning p{margin-top:.22rem;color:var(--sl-color-gray-3);font-size:.84rem;line-height:1.55}.ex-learning-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.45rem;font-size:.78rem}.ex-learning a:focus-visible{outline:2px solid var(--sl-color-text-accent);outline-offset:2px}.ex-panel{margin-block:1.5rem 2rem;border:1px solid var(--sl-color-hairline);border-radius:.8rem;background:var(--sl-color-bg-sidebar);display:block;overflow:hidden;padding:1.25rem}.ex-panel-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(10rem,17rem);gap:1rem;align-items:end}.ex-panel-heading h3{margin:.15rem 0 0;font-size:clamp(1.15rem,3vw,1.45rem)}.ex-kicker{color:var(--sl-color-text-accent);font-family:var(--__sl-font-mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ex-panel-hint{color:var(--sl-color-gray-3);font-size:.78rem;line-height:1.5;text-align:right}.ex-choice-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.ex-choice-row button,.ex-step-controls button{min-height:2.65rem;border:1px solid var(--sl-color-hairline);border-radius:.48rem;padding:.55rem .78rem;color:var(--sl-color-text);background:var(--sl-color-bg);font:inherit;font-size:.78rem;font-weight:650;cursor:pointer}.ex-choice-row button:hover:not(:disabled),.ex-step-controls button:hover:not(:disabled){border-color:var(--sl-color-gray-3)}.ex-choice-row button[aria-pressed=true]{border-color:var(--sl-color-text-accent);color:var(--sl-color-text-accent);background:var(--sl-color-accent-low)}.ex-choice-row button:focus-visible,.ex-step-controls button:focus-visible{outline:2px solid var(--sl-color-text-accent);outline-offset:2px}.ex-route-stage{margin:1rem -1.25rem 0;border-block:1px solid var(--sl-color-hairline-light);background:var(--sl-color-bg)}.ex-route{display:flex;gap:1.65rem;margin:0;padding:1.2rem;overflow-x:auto;list-style:none}.ex-route[hidden],.ex-topology-panel[hidden]{display:none}.ex-route li{flex:0 0 9.4rem;position:relative;min-height:6.5rem;border:1px solid var(--sl-color-hairline);border-radius:.62rem;padding:.75rem;background:var(--sl-color-bg-sidebar);opacity:.55;transition:border-color .16s ease,opacity .16s ease,transform .16s ease}.ex-route li:not(:last-child):after{content:"→";position:absolute;top:50%;right:-1.25rem;color:var(--sl-color-gray-4);transform:translateY(-50%)}.ex-route li[data-state=done]{opacity:.82}.ex-route li[data-state=current]{border-color:var(--sl-color-text-accent);opacity:1;transform:translateY(-2px)}.ex-route li[data-state=current][data-tone=failure]{border-color:#dc2626}.ex-route li[data-state=current][data-tone=retry]{border-color:#d97706}.ex-route li span,.ex-route li small{display:block}.ex-route li span{font-family:var(--__sl-font-mono);font-size:.72rem;font-weight:700}.ex-route li small{margin-top:.45rem;color:var(--sl-color-gray-3);font-size:.7rem;line-height:1.45}.ex-step-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:center;margin-top:1rem}.ex-step-controls button:last-child{justify-self:end}.ex-step-controls button:disabled{cursor:not-allowed;opacity:.45}.ex-step-controls span{color:var(--sl-color-gray-3);font-family:var(--__sl-font-mono);font-size:.72rem}.ex-live-status{min-height:2.5em;margin:.8rem 0 0;color:var(--sl-color-gray-3);font-size:.76rem;line-height:1.5}.ex-topology-panel{margin-top:1rem}.ex-topology-visual{display:grid;gap:0;padding:1rem;border:1px solid var(--sl-color-hairline-light);border-radius:.62rem;background:var(--sl-color-bg)}.ex-topology-layer>span{display:block;margin-bottom:.42rem;color:var(--sl-color-gray-3);font-family:var(--__sl-font-mono);font-size:.65rem;letter-spacing:.05em;text-align:center;text-transform:uppercase}.ex-topology-layer>div{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.ex-topology-layer strong{min-width:7rem;border:1px solid var(--sl-color-hairline);border-radius:.5rem;padding:.65rem .8rem;background:var(--sl-color-bg-sidebar);font-size:.76rem;text-align:center}.ex-topology-link{display:grid;justify-items:center;padding:.25rem 0;color:var(--sl-color-gray-3);font-family:var(--__sl-font-mono);font-size:.62rem}.ex-topology-link i{width:1px;height:.7rem;background:var(--sl-color-hairline)}.ex-topology-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:.8rem 0 0}.ex-topology-facts div{border-left:2px solid var(--sl-color-accent-low);padding-left:.7rem}.ex-topology-facts dt{font-size:.72rem;font-weight:700}.ex-topology-facts dd{margin:.2rem 0 0;color:var(--sl-color-gray-3);font-size:.74rem;line-height:1.45}@media(max-width:40rem){.ex-panel-heading,.ex-topology-facts{grid-template-columns:1fr}.ex-panel-hint{text-align:left}.ex-choice-row button{flex:1 1 9rem}.ex-step-controls{grid-template-columns:1fr 1fr}.ex-step-controls span{grid-column:1 / -1;grid-row:1;text-align:center}}@media(prefers-reduced-motion:reduce){.ex-route li{transition:none}}
