/* Guided system design study path */
.sd-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.sd-modules,.sd-detail{min-width:0;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.sd-modules{position:sticky;top:86px;display:grid;gap:5px;padding:12px;max-height:calc(100vh - 108px);overflow:auto}
.sd-nav-label{padding:5px 8px 8px;color:var(--muted);font:600 11px var(--mono);letter-spacing:.08em}
.sd-module{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;width:100%;padding:10px 8px;text-align:left;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer}
.sd-module:hover,.sd-module.active{background:color-mix(in srgb,var(--c9) 11%,var(--panel));border-color:color-mix(in srgb,var(--c9) 40%,var(--line))}
.sd-module>b{font:600 11px var(--mono);color:var(--muted)}
.sd-module span{display:grid;gap:3px;min-width:0}
.sd-module strong{font:600 13px var(--display)}
.sd-module small{font-size:11px;color:var(--muted)}
.sd-module em{color:var(--ok);font-style:normal}
.sd-detail{padding:20px}
.sd-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sd-detail-head h2{margin:6px 0;font:700 27px var(--display)}
.sd-detail-head p,.sd-section-head p{margin:0;color:var(--muted);max-width:68ch}
.sd-detail-head .eyebrow{color:var(--c9);font:600 11px var(--mono)}
.sd-brief,.sd-architecture,.sd-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sd-brief h3,.sd-architecture h3,.sd-section h3{margin:0 0 8px;font:700 18px var(--display)}
.sd-brief>p{margin:0;color:var(--muted)}
.sd-requirements{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.sd-requirements>div,.sd-cards>article,.sd-interview{padding:13px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--stage) 60%,var(--panel))}
.sd-requirements b,.sd-interview>b{font:600 12px var(--mono);color:var(--c9)}
.sd-requirements ul,.sd-section ul{margin:8px 0 0;padding-left:20px;color:var(--muted)}
.sd-requirements li,.sd-section li{margin:5px 0}
.sd-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.sd-flow-tabs{display:flex;flex-wrap:wrap}
.sd-flow-tabs button{padding:7px 10px}
.sd-diagram-wrap{margin-top:14px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--stage) 74%,var(--panel))}
.sd-diagram{display:block;width:100%;min-width:650px;height:auto}
.sd-edge line{stroke:var(--line);stroke-width:2.5}
.sd-edge.active line{stroke:var(--c9);stroke-width:4}
.sd-edge marker path{fill:var(--line)}
.sd-edge.active marker path{fill:var(--c9)}
.sd-edge text{fill:var(--muted);font:11px var(--mono);text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:5px;stroke-linejoin:round}
.sd-node rect{fill:var(--panel);stroke:var(--line);stroke-width:2}
.sd-node.active rect{fill:color-mix(in srgb,var(--c9) 18%,var(--panel));stroke:var(--c9)}
.sd-node-title{fill:var(--ink);font:700 13px var(--display);text-anchor:middle}
.sd-node-sub{fill:var(--muted);font:10px var(--mono);text-anchor:middle}
.sd-stepper{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.sd-stepper span{font:12px var(--mono);color:var(--muted);text-align:center}
.sd-step-copy{min-height:45px;margin:10px 0 0;padding:12px;border-left:3px solid var(--c9);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--c9) 8%,var(--panel))}
.sd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sd-cards h4{margin:0 0 7px;font:600 14px var(--display)}
.sd-cards p,.sd-interview p{margin:0;color:var(--muted);font-size:13px}
.sd-two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.sd-interview{align-self:start}
@media(max-width:900px){.sd-layout{grid-template-columns:minmax(0,1fr)}.sd-modules{position:static;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-height:300px}.sd-nav-label{grid-column:1/-1}}
@media(max-width:560px){.sd-detail{padding:14px}.sd-detail-head{flex-direction:column}.sd-requirements,.sd-two-col{grid-template-columns:1fr}.sd-stepper span{font-size:10px}.sd-diagram{min-width:600px}}