/* Distinct diagrams for distinct subjects. Shared palette, individual compositions. */
.reference-visual.ref-dispatch{display:block;background:linear-gradient(145deg,#132320,#14151c);padding:36px}.ref-visual-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 25px;margin-bottom:28px}.ref-visual-heading>span{width:100%;color:#b8ead7}.ref-visual-heading strong{font-size:32px;margin:0}.ref-visual-heading>small{font:8px monospace;letter-spacing:.1em;color:#8daba3}.ref-dispatch-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ref-dispatch-lanes>div{border-top:2px solid #b8ead759;padding-top:15px}.ref-dispatch-lanes>div:nth-child(2){border-color:#c6afff70}.ref-dispatch-lanes>div:nth-child(3){border-color:#f0b9a070}.ref-dispatch-lanes>div>span{font:9px monospace;color:#91a49e}.ref-dispatch article{background:#ffffff06;border:1px solid #ffffff18;border-radius:8px;padding:20px;margin-top:14px}.ref-dispatch article i{font:8px monospace;color:#b8ead7}.ref-dispatch article b{font:500 23px/1.3 'DM Sans',sans-serif;display:block;margin:18px 0 12px;color:#e6eee8;letter-spacing:-.03em}.ref-dispatch article p{font-size:10px;margin:0;color:#95a49e}.ref-dispatch-lanes>div:nth-child(2) article i{color:#c6afff}.ref-dispatch-lanes>div:nth-child(3) article i{color:#f0b9a0}
.reference-visual.ref-api{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;background:#10131b;padding:40px}.ref-terminal{align-self:stretch;border:1px solid #92b4e144;background:#0b1018;border-radius:12px;padding:24px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 20px 40px #0003;min-width:0}.ref-terminal>div{display:flex;align-items:center;gap:6px;margin-bottom:35px}.ref-terminal>div>i{width:6px;height:6px;background:#405577;border-radius:50%}.ref-terminal>div>span{margin-left:8px;font:8px monospace;color:#7d97b5}.ref-terminal code{font:15px/2 monospace;color:#cbdef7;overflow-wrap:anywhere}.ref-terminal code b{color:#b8ead7;font-weight:400}.ref-terminal p{font:10px/1.8 monospace;color:#8195b0;margin:18px 0 30px;overflow-wrap:anywhere}.ref-terminal em{color:#d9c4ef;font-style:normal}.ref-terminal small{font:9px/1.7 monospace;color:#657b98}.ref-contract>span{color:#91aed4}.ref-contract strong{font-size:31px;margin:18px 0 25px}.ref-contract dl{margin:0}.ref-contract dl>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-top:1px solid #92b4e120;font-size:10px}.ref-contract dt{color:#71849f}.ref-contract dd{margin:0;color:#bac9dc;text-align:right}
.reference-visual.ref-conversation{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;background:radial-gradient(ellipse at 75% 40%,#b59adf14,transparent 65%),#16121e;padding:45px}.ref-conversation-intro>small{display:block;font:8px/1.8 monospace;color:#96869e;margin-top:30px;max-width:220px}.ref-conversation-intro strong{font-size:34px}.ref-messages{display:flex;flex-direction:column;gap:16px;min-width:0}.ref-human{align-self:flex-end;border:1px solid #c6afff44;border-radius:14px 14px 0 14px;padding:20px 23px;width:85%;background:#39294c}.ref-human p{font:500 20px/1.5 'DM Sans',sans-serif;color:#e7dcf2;margin:12px 0 0;letter-spacing:-.02em}.ref-tool{display:flex;align-items:center;gap:17px;margin:2px 20px}.ref-tool>i{font:25px monospace;color:#a695ba}.ref-tool b{display:block;font-size:11px;font-weight:500;color:#d5c4e8;margin:5px 0}.ref-tool small{font:8px/1.6 monospace;color:#927fa4}.ref-assistant{align-self:flex-start;border-left:2px solid #b8ead7;padding:5px 0 5px 20px;width:85%}.ref-assistant>span{color:#b8ead7}.ref-assistant p{font-size:14px;color:#b6a7c3;line-height:1.7;margin:12px 0}.ref-assistant a{font-size:9px}
.reference-visual.ref-event-stream{display:grid;grid-template-columns:1fr 1.35fr;gap:25px 45px;background:linear-gradient(110deg,#21151e,#13111b);padding:40px}.ref-event-stream .ref-visual-heading{display:block;margin:0}.ref-event-stream .ref-visual-heading>span{color:#f0b9d7}.ref-event-stream .ref-visual-heading strong{font-size:33px;margin:20px 0}.ref-event-stream .ref-visual-heading small{color:#a8889d}.ref-event-lanes{border-right:1px solid #f0b9d740;padding-right:22px}.ref-event-lanes>div{display:grid;grid-template-columns:22px 1fr 20px;align-items:center;gap:7px 12px;border-bottom:1px solid #ffffff10;padding:18px 0}.ref-event-lanes>div:last-child{border-bottom:0}.ref-event-lanes>div>span{border:1px solid #b8ead755;border-radius:50%;height:22px;text-align:center;color:#b8ead7;font-size:12px;letter-spacing:0}.ref-event-lanes>div:nth-child(2)>span{color:#f0b9a0;border-color:#f0b9a055}.ref-event-lanes>div:nth-child(3)>span{color:#c6afff;border-color:#c6afff55}.ref-event-lanes code{font:12px monospace;color:#dec3d4;overflow-wrap:anywhere}.ref-event-lanes i{font-style:normal;color:#b48caa}.ref-event-lanes b{grid-column:2;font-size:10px;font-weight:400;color:#a4899b}.ref-event-endpoint{grid-column:1/-1;display:flex;align-items:center;gap:25px;border-top:1px solid #f0b9d725;padding-top:22px}.ref-event-endpoint>span{font-size:8px;color:#f0b9d7;white-space:nowrap}.ref-event-endpoint p{font-size:12px;margin:0;color:#bd9eb3}.ref-event-endpoint small{margin-left:auto;font:8px/1.8 monospace;color:#8f7186;max-width:220px}
.ref-scene-inspector{margin:32px 0;background:#171c21;border:1px solid #b8ead726;border-radius:14px;padding:28px}.ref-scene-inspector figcaption>span{font:8px monospace;color:#8ca7a2;letter-spacing:.12em}.ref-scene-inspector figcaption>b{display:block;font:500 22px/1.4 'DM Sans',sans-serif;letter-spacing:-.03em;margin:12px 0 25px;color:#dceae7}.ref-inspector-layout{display:grid;grid-template-columns:1.3fr .8fr;align-items:center;gap:30px}.ref-inspector-frame{position:relative;aspect-ratio:1.1;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,#dae3cf,#8ba8a0);padding:23px;color:#193c33;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}.ref-inspector-frame>span{font:8px monospace;letter-spacing:.15em;z-index:1}.ref-inspector-frame>strong{font:500 32px/1.05 'DM Sans',sans-serif;letter-spacing:-.05em;position:relative;margin-top:auto;padding-bottom:18px;max-width:190px}.ref-inspector-frame>small{font:6px monospace;letter-spacing:.1em;z-index:1}.ref-inspector-sculpture{position:absolute;top:18%;right:6%;width:58%;height:75%;z-index:-1}.ref-inspector-sculpture>i{position:absolute;width:80%;aspect-ratio:1;border:1px solid #f2f7e780;border-radius:50%;background:linear-gradient(120deg,#f7f6db,#93b3a4);box-shadow:7px 15px 22px #264b3835;right:0;top:0}.ref-inspector-sculpture>i:nth-child(2){width:60%;top:30%;right:20%;background:linear-gradient(130deg,#b8cab0,#567a6a)}.ref-inspector-sculpture>i:nth-child(3){width:40%;top:60%;right:10%}.ref-inspector-layout dl{margin:0}.ref-inspector-layout dl>div{padding:14px 0;border-bottom:1px solid #ffffff15}.ref-inspector-layout dt{font:8px monospace;color:#7e9b91;margin-bottom:8px}.ref-inspector-layout dd{font-size:12px;color:#c3d4cc;margin:0}.ref-scene-inspector>.caption{margin:20px 0 0;font-size:9px!important}
.ref-delivery-ticket{margin:32px 0;border:1px solid #d7c3a833;background:#1e1a17;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr}.ref-delivery-ticket>div{padding:30px;border-right:1px dashed #d7c3a844}.ref-delivery-ticket>div>span{font:7px/1.8 monospace;color:#ad9680;letter-spacing:.08em}.ref-delivery-ticket strong{display:block;font:500 25px/1.25 'DM Sans',sans-serif;letter-spacing:-.03em;margin-top:25px;color:#e2d2bd}.ref-delivery-ticket ol{list-style:none;margin:0;padding:18px 28px;counter-reset:milestone}.ref-delivery-ticket li{counter-increment:milestone;position:relative;padding:13px 0 13px 30px;border-bottom:1px solid #d7c3a81a}.ref-delivery-ticket li:last-child{border:0}.ref-delivery-ticket li:before{content:counter(milestone);position:absolute;left:0;top:16px;font:9px monospace;color:#ad9680}.ref-delivery-ticket li>span{display:block;font-size:9px;color:#a18e7e}.ref-delivery-ticket li>b{display:block;font-size:12px;font-weight:500;color:#d8c5b4;margin-top:4px}.ref-delivery-ticket figcaption{grid-column:1/-1;padding:13px 25px;border-top:1px solid #d7c3a833;font:8px/1.8 monospace;color:#9b8674}
@media(max-width:900px){.reference-visual.ref-api{gap:25px;padding:30px}.reference-visual.ref-conversation{gap:30px;padding:30px}.reference-visual.ref-event-stream{padding:30px;gap:25px}.ref-event-endpoint{flex-wrap:wrap;gap:12px 25px}.ref-event-endpoint small{max-width:100%;margin:0}.ref-dispatch article{padding:17px}.ref-dispatch article b{font-size:21px}}
@media(max-width:600px){.reference-visual.ref-dispatch,.reference-visual.ref-api,.reference-visual.ref-conversation,.reference-visual.ref-event-stream{display:block;padding:25px 20px}.ref-visual-heading strong{font-size:28px}.ref-dispatch-lanes{grid-template-columns:1fr;gap:23px}.ref-dispatch article{margin-top:10px}.ref-dispatch article b{margin:10px 0 8px}.ref-terminal{padding:20px}.ref-terminal code{font-size:11px}.ref-terminal>div>span{font-size:6px;letter-spacing:0}.ref-terminal>div{margin-bottom:23px}.ref-terminal p{font-size:9px}.ref-contract{margin-top:30px}.ref-contract strong{font-size:29px}.ref-conversation-intro strong{font-size:30px}.ref-conversation-intro>small{margin:20px 0 28px;max-width:none}.ref-human{width:95%;padding:17px}.ref-human p{font-size:19px}.ref-tool{gap:12px;margin:3px 5px}.ref-tool b{font-size:10px}.ref-tool small{font-size:7px}.ref-assistant{width:95%}.ref-event-stream .ref-visual-heading strong{font-size:29px}.ref-event-lanes{margin-top:22px;padding-right:0;border:0}.ref-event-lanes code{font-size:10px}.ref-event-lanes>div{gap:6px 10px;grid-template-columns:22px minmax(0,1fr) 15px}.ref-event-endpoint{margin-top:20px}.ref-event-endpoint p{font-size:11px}.ref-scene-inspector{padding:23px 18px}.ref-inspector-layout{grid-template-columns:1fr;gap:10px}.ref-inspector-layout dl{display:grid;grid-template-columns:1fr 1fr;gap:5px 17px}.ref-inspector-layout dd{font-size:11px}.ref-inspector-frame{aspect-ratio:1.1}.ref-delivery-ticket{grid-template-columns:1fr}.ref-delivery-ticket>div{padding:25px;border-right:0;border-bottom:1px dashed #d7c3a844}.ref-delivery-ticket strong{margin-top:16px;font-size:25px}.ref-delivery-ticket ol{padding:14px 25px}.ref-delivery-ticket figcaption{padding:15px 25px}}