.moving-diagram{border:1px solid #303038;border-radius:9px;background:#101014;padding:24px;margin:28px 0;min-width:0}.diagram-viewport{overflow-x:auto}.diagram-viewport svg{display:block;width:100%;max-width:800px;min-width:570px;margin:auto}.diagram-viewport rect{fill:#16161d;stroke:#373740;transition:fill .2s,stroke .2s}.diagram-title{font:13px sans-serif;fill:#dedee8}.diagram-detail{font:10px monospace;fill:#9393a4}.diagram-wire{fill:none;stroke:#575763;stroke-width:1.5}.diagram-packet{fill:#d5daf7;opacity:0}.is-active rect{fill:#272938;stroke:#b3b8d5}.is-playing .is-active .diagram-packet{animation:diagram-travel 1.8s ease-in-out infinite}.diagram-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;border-top:1px solid #2a2a32;padding-top:20px}.diagram-count{margin-left:auto;color:#8d8d9e;font:11px monospace}.diagram-steps{padding:0;list-style:none;counter-reset:steps;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.diagram-steps li{counter-increment:steps;min-width:0}.diagram-steps button{display:block;position:relative;width:100%;height:100%;border:1px solid transparent;border-radius:5px;text-align:left;background:transparent;color:#9999a8;font-family:inherit;font-size:13px;line-height:1.7;padding:12px 14px 12px 40px;cursor:pointer}.diagram-steps button:before{content:counter(steps,decimal-leading-zero);position:absolute;left:12px;top:15px;font:10px monospace;color:#77778b}.diagram-steps button[aria-current=step]{border-color:#454553;background:#1b1c25;color:#eeeeF4}.diagram-status{color:#bbc0d3;font:11px/1.7 monospace;margin:20px 0 0}.literature-section{scroll-margin-top:100px;padding-top:70px;padding-bottom:35px;border-top:1px solid #292930}.literature-section h2{font-size:36px;letter-spacing:-1px;margin:14px 0}.literature-section>p{max-width:760px;color:#a2a2ae;font-size:15px;line-height:1.8}.publication{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:16px 0;color:#9999aa;font-size:12px}.publication a{color:#d0d4ec;text-decoration:underline;text-underline-offset:4px}.research-note{font-size:12px!important;color:#8b8b99!important}.literature-jump{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 40px}.literature-jump a{padding:10px 14px;border:1px solid #33333d;border-radius:5px;font-size:12px}.research-columns{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:24px 0}.research-columns h3{font-size:17px}.research-columns p{font-size:13px;line-height:1.8;color:#a0a0ad}.foundation-steps{display:flex;gap:14px;flex-wrap:wrap;padding:20px 0;color:#c0c3d5;font:12px/1.8 monospace}.foundation-steps span{border-bottom:1px solid #454550;padding:10px}.hero .moving-diagram{text-align:left}.hero .diagram-steps button{font-family:inherit}.source-identity{font-size:12px;color:#9595a3;line-height:1.8}.meta-cases{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:45px 0}.meta-cases article{padding:28px;border:1px solid #303038;border-radius:7px}.meta-cases h3{font-size:22px;margin:12px 0}.meta-cases p{font-size:14px;line-height:1.8;color:#a0a0ac}.meta-cases a{font-size:13px;color:#d3d6eb}.pattern-options{grid-template-columns:repeat(2,minmax(0,1fr))}
@keyframes diagram-travel{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media(max-width:700px){.moving-diagram{padding:14px}.diagram-steps,.research-columns,.meta-cases{grid-template-columns:1fr}.diagram-steps button{font-size:12px}.diagram-controls{gap:7px}.diagram-controls button{padding:9px 12px}.literature-section h2{font-size:28px}.literature-section>p{font-size:13px}.literature-section{padding-top:45px}.nav-links{flex-wrap:wrap}.nav-links a{white-space:nowrap}.pattern-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.diagram-packet{display:none}.diagram-viewport rect{transition:none}}
.database-source{max-height:650px;overflow:auto}.database-source code{font-size:12px;line-height:1.8}#database-example{scroll-margin-top:90px}
.diagram-scroll-hint{display:none;font-size:12px;color:#b1b1c4}.has-mobile-layout .diagram-viewport svg{min-width:0}.has-mobile-layout .diagram-scroll-hint{display:none}.database-source code{font-size:13px;color:#c8ccdc}@media(max-width:700px){.diagram-scroll-hint{display:block}.has-mobile-layout .diagram-scroll-hint{display:none}}
@media(min-width:701px) and (max-width:1050px){header nav>.button.small{display:none}.nav-links{gap:18px;font-size:12px}}