:root{--maxw: 1120px;--fg: #0f172a;--muted: #475569;--accent: #2563eb}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--fg)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:var(--maxw);margin:0 auto;padding:24px}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.card{border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff;box-shadow:0 1px 2px #0000000a}h1{font-size:2rem;margin:0 0 8px}h2{font-size:1.5rem;margin:24px 0 8px}h3{font-size:1.125rem;margin:16px 0 8px}p{line-height:1.6;color:var(--muted)}.hero{display:grid;gap:16px;align-items:center;grid-template-columns:1.2fr 1fr}.hero img{width:100%;height:auto;border-radius:12px;border:1px solid #e5e7eb}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:600;font-size:.85rem}.small{color:var(--muted);font-size:.925rem}.diagram-wrap{position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}.diagram-wrap svg,.diagram-wrap img{display:block;width:100%;height:auto}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}footer{border-top:1px solid #e5e7eb;padding:16px 0;margin-top:32px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.below-wrap{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}.steps-list .grid{grid-template-columns:1fr}.shell{display:grid;grid-template-columns:280px 1fr;gap:24px}.sidebar{position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);overflow:auto;padding-right:4px}.step-nav{background:#0f172a08;border:1px solid #e5e7eb;border-radius:12px}.step-nav-header{font-weight:800;padding:12px 14px;border-bottom:1px solid #e5e7eb}.step-nav ul{list-style:none;margin:0;padding:8px}.step-nav li{margin:2px 0}.step-nav .item{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;text-decoration:none;color:#0f172a}.step-nav .item:hover{background:#eef2ff}.step-nav .item.active{background:#e0e7ff;font-weight:700}.step-nav .num{font-size:.85rem;padding:2px 6px;border-radius:999px;background:#eef2ff;color:#3730a3}.step-nav .title{line-height:1.3}.content>*{margin-bottom:16px}.info-panel.card{margin-top:12px}.bio p{line-height:1.6}.hotspot{cursor:pointer;transition:stroke .15s}.hotspot:hover,.hotspot:focus-visible{stroke:#2563eb}@media (max-width: 900px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}}.step-list{list-style:none;margin:0;padding:8px}.nav-item{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:#0f172a}.nav-item:hover{background:#eef2ff}.nav-item.active{background:#e0e7ff;font-weight:700}.nav-title{display:block;font-weight:600;line-height:1.3}.nav-desc{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;color:#475569;transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease}.nav-item:hover .nav-desc,.nav-item:focus-visible .nav-desc,.nav-item.active .nav-desc{max-height:140px;opacity:1;margin-top:4px}.step-nav .nav-header{font-weight:700;color:#374151;padding:8px 12px;border-bottom:1px solid #e5e7eb;margin-bottom:4px}.step-nav .nav-item{margin:4px 0;border-radius:10px}.step-nav .nav-item.active .nav-step{background:#eaf0ff;border-color:#c7d2fe}.step-nav .nav-step{width:100%;text-align:left;padding:10px 12px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}.step-nav .nav-step-title{font-weight:600}.step-nav .nav-open-link{padding:6px 12px 0}.step-nav .nav-open-link a{font-size:12px;color:#2563eb}.step-nav .nav-groups{margin:6px 0 12px;padding:0 4px 0 8px}.step-nav .nav-group+.nav-group{margin-top:6px}.step-nav .group-toggle{width:100%;text-align:left;padding:6px 8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.step-nav .group-list{list-style:none;padding-left:8px;margin:6px 0 0}.step-nav .group-list li{margin:4px 0}.step-nav .ref-link{display:inline-block;font-size:13px;color:#1f2937;background:transparent;border:none;padding:4px 2px;cursor:pointer;text-align:left}.step-nav .ref-link:hover{color:#2563eb}.step-nav .chev{opacity:.6}.markdown img{display:block;max-width:700px;width:100%;height:auto;margin:1rem auto;border-radius:8px}.info-panel.card{max-width:800px;max-height:65vh;overflow-y:auto;overflow-x:hidden}.info-panel.card::-webkit-scrollbar{width:8px}.info-panel.card::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}.info-panel.card img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto 1rem}