#duncan-flow{--df-bg:#f7f7f2;--df-card:#fffefa;--df-ink:#24473d;--df-muted:#687b6d;--df-line:#c3cec1;--df-green:#315f4e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--df-ink);max-width:860px;margin:0 auto}
#duncan-flow *{box-sizing:border-box}
#duncan-flow .scene{background:var(--df-bg);border-radius:24px;padding:38px 40px 20px}
#duncan-flow .diagram{position:relative;display:grid;grid-template-columns:150px 170px 150px;justify-content:space-between;align-items:center;gap:18px 35px;max-width:700px;margin:0 auto}
#duncan-flow .wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#duncan-flow .wire{fill:none;stroke:var(--df-line);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round}
#duncan-flow .packet{fill:var(--df-green)}
#duncan-flow .column{position:relative;z-index:1;display:flex;flex-direction:column;gap:15px;align-self:start}
#duncan-flow .column-label{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--df-muted);margin:0 0 7px}
#duncan-flow .node{display:flex;align-items:center;gap:12px;min-height:44px;font-size:13px;position:relative}
#duncan-flow .icon-tile{width:44px;height:44px;display:grid;place-items:center;flex:none;background:var(--df-card);border:1px solid var(--df-line);border-radius:12px;box-shadow:0 3px 7px #13271b04;transition:transform .45s,box-shadow .45s,border-color .45s}
#duncan-flow .file-icon{width:30px;height:30px;object-fit:contain}
#duncan-flow .icon-tile svg{width:23px;height:23px;stroke-width:1.5}
#duncan-flow .node-copy{line-height:1.4;background:var(--df-bg)}
#duncan-flow .node.active .icon-tile{transform:translateY(-3px);border-color:var(--df-green);box-shadow:0 5px 16px #24473d16}
#duncan-flow .hub{position:relative;z-index:1;text-align:center;align-self:center}
#duncan-flow .hub-brand{display:flex;flex-direction:column;align-items:center}
#duncan-flow .mark{width:94px;height:94px;background:#24473d;color:#fbf8ea;border-radius:27px;display:grid;place-items:center;box-shadow:0 12px 30px #24473d18;position:relative}
#duncan-flow .mark:before{content:'';position:absolute;inset:-12px;border:1px solid var(--df-line);border-radius:37px;opacity:.6}
#duncan-flow .mark span{font-size:59px;font-weight:750;line-height:1;letter-spacing:-4px;margin-left:-4px}
#duncan-flow .name{font-size:25px;letter-spacing:-1px;font-weight:500;margin-top:19px}
#duncan-flow .buddy{font-size:12px;color:var(--df-muted);margin-top:4px}
#duncan-flow .mcp-label{position:absolute;z-index:2;background:var(--df-bg);color:var(--df-muted);font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:5px;pointer-events:none}
#duncan-flow .process{display:flex;gap:10px;justify-content:center;margin-top:9px;color:var(--df-muted);font-size:12px;white-space:nowrap}
#duncan-flow .hub-step{display:flex;align-items:center;gap:4px;transition:color .4s}
#duncan-flow .hub-step svg{width:13px;height:13px;stroke-width:1.6}
#duncan-flow .hub-step.active{color:var(--df-ink)}
#duncan-flow .tools{gap:12px}
#duncan-flow .provider-icon{width:25px;height:25px;object-fit:contain}

#duncan-flow .devices{grid-column:3;position:relative;z-index:1;text-align:center;background:var(--df-bg);padding-top:15px;color:var(--df-muted)}
#duncan-flow .device-icons{display:flex;justify-content:center;gap:10px;align-items:center;margin-bottom:7px}
#duncan-flow .device-icons svg{width:19px;height:19px;stroke-width:1.4}

#duncan-flow .device-label{font-size:11px}
#duncan-flow .story{display:flex;justify-content:center;align-items:center;position:relative;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--df-line);max-width:700px;min-height:55px}
#duncan-flow .story-title{font-size:14px;text-align:center;line-height:1.5;padding:0 38px}
#duncan-flow .play{position:absolute;right:0;bottom:0;width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;color:var(--df-muted);cursor:pointer;border-radius:50%}
#duncan-flow .play:hover{background:var(--df-card)}
#duncan-flow .play svg{width:15px;height:15px}
#duncan-flow .concept-note{font-size:11px;color:var(--df-muted);text-align:center;margin:15px 0 0;line-height:1.5}
@media(max-width:640px){
#duncan-flow .scene{padding:26px 20px 18px}
#duncan-flow .diagram{grid-template-columns:1fr;gap:30px}
#duncan-flow .column{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;justify-items:center}
#duncan-flow .column-label{grid-column:1/-1;margin-bottom:5px}
#duncan-flow .node{flex-direction:column;text-align:center;gap:7px;font-size:11px;min-width:0}
#duncan-flow .icon-tile{width:44px;height:44px}
#duncan-flow .hub{justify-self:center;min-width:150px;padding-top:8px}
#duncan-flow .mark{width:80px;height:80px;border-radius:23px}
#duncan-flow .mark:before{inset:-9px;border-radius:31px}
#duncan-flow .mark span{font-size:50px}
#duncan-flow .name{font-size:23px;margin-top:14px}
#duncan-flow .tools{grid-row:3;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:8px;gap:8px 5px}
#duncan-flow .tools .column-label{background:var(--df-bg);padding:0 8px}
#duncan-flow .devices{grid-column:1;grid-row:4;padding:0;display:flex;align-items:center;justify-content:center;gap:10px}
#duncan-flow .device-icons{margin:0}
#duncan-flow .device-icons svg{width:16px;height:16px}
#duncan-flow .story{margin-top:20px;min-height:63px}
#duncan-flow .play{width:44px;height:44px}
#duncan-flow .story-title{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#duncan-flow .icon-tile,#duncan-flow .hub-step{transition:none}}

#duncan-flow{line-height:1.4;margin:12px auto 0;padding:0 20px}#duncan-flow .scene{border:1px solid #dde2d9;background:#f7f7f2}#duncan-flow .play:focus-visible{outline:2px solid #315f4e;outline-offset:3px}
@media(max-width:640px){#duncan-flow{padding:0 12px}#duncan-flow .scene{padding-left:12px;padding-right:12px}}
#duncan-flow .node-copy small{display:block;font-size:10px;color:var(--df-muted);margin-top:3px}
#duncan-flow .spreadsheet-source.active .icon-tile{border-color:#217346;box-shadow:0 5px 16px #21734624}
#duncan-flow .spreadsheet-packet{fill:#217346}