/* Same cards, table icons and connector shapes as the homepage diagrams. */
.circular-references{border-top:1px solid var(--line);padding-top:58px}
.circular-references h2{max-width:900px;text-wrap:balance}
.circular-references .trace-example-intro{margin-bottom:24px}
.cycle-demo{--cycle-wire-color:#a6b2c1;max-width:1020px;margin:24px auto 0;text-align:left}
.cycle-demo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.cycle-map{position:relative;aspect-ratio:540/330;border-radius:26px;background:radial-gradient(ellipse at 18% 52%,#528af010,transparent 55%),radial-gradient(ellipse at 88% 52%,#ff790012,transparent 50%)}
.cycle-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cycle-wire{fill:none;stroke-width:2;stroke-linecap:round}
.cycle-gradient stop{stop-color:var(--cycle-wire-color)}
.cycle-gradient.is-active .cycle-stop-soft{stop-color:#91b2de}
.cycle-gradient.is-active .cycle-stop-bright{stop-color:#528af0}
.cycle-cell{position:absolute;isolation:isolate;overflow:hidden;left:4%;top:5%;width:40%;height:35%;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 9px 25px #172b4910}
.cycle-cell:nth-of-type(2){left:56%}
.cycle-cell:nth-of-type(3){left:56%;top:60%}
.cycle-cell:nth-of-type(4){top:60%}
.cycle-cell-fill{position:absolute;z-index:-1;inset:0;background:var(--blue)}
.cycle-cell.is-active{border-color:#91b2de}
.cycle-cell-title{display:flex;align-items:center;gap:8px;min-height:19px;margin-bottom:9px}
.cycle-cell-title svg{width:17px;height:17px;flex:0 0 17px;color:#218458}
.cycle-cell strong{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.cycle-cell code{display:flex;align-items:center;min-height:38px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--bg) 75%,transparent);font:11px/1.5 Consolas,"Courier New",monospace;color:var(--text);overflow-wrap:anywhere}
.cycle-inspector{min-width:0;width:80%;justify-self:start;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 9px 25px #172b4910;overflow:hidden}
.cycle-window-title{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.cycle-window-title img{width:18px;height:18px}
.cycle-formula-panel{margin:11px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);min-height:68px}
.cycle-formula-address{display:block;margin-bottom:5px;font-size:10px;color:var(--muted)}
.cycle-formula{font:12px/1.5 Consolas,"Courier New",monospace;overflow-wrap:anywhere}
.cycle-formula mark{padding:1px 2px;background:var(--blue);color:#246ac1;border-radius:2px;text-decoration:underline;text-underline-offset:3px}
.cycle-tree-heading{padding:6px 12px;background:var(--bg);border-block:1px solid var(--line);font-size:11px;font-weight:600}
.cycle-tree{padding:8px 11px 12px;font-size:11px;line-height:1.5}
.cycle-tree-root{display:flex;gap:7px;align-items:center;padding:4px 0 7px;font-weight:600}
.cycle-tree-root svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.5}
.cycle-tree-rows{position:relative;margin-left:7px;overflow:hidden}
.cycle-tree-rows:before{content:"";position:absolute;z-index:1;top:0;bottom:16px;left:0;border-left:1px solid var(--line)}
.cycle-tree-selection,.cycle-tree-selection-wrap{position:absolute;top:0;left:0;right:0;height:32.5px;border-radius:4px;background:var(--blue);pointer-events:none}
.cycle-tree-selection-wrap{opacity:0}
.cycle-row{position:relative;display:block;padding:8px 6px 8px 20px;overflow-wrap:anywhere}
.cycle-row:before{content:"";position:absolute;left:0;top:50%;width:13px;border-top:1px solid var(--line)}
:root[data-theme="dark"] .cycle-demo{--cycle-wire-color:#617188}
:root[data-theme="dark"] .cycle-formula mark{color:#9bc2ff}
@media(max-width:900px){.cycle-demo-layout{grid-template-columns:minmax(0,1fr);gap:20px;max-width:500px;margin:auto}.cycle-inspector{width:100%}}
@media(max-width:480px){.circular-references{padding-top:45px}.cycle-map{aspect-ratio:540/520}.cycle-cell{padding:10px;border-radius:12px}.cycle-cell-title{gap:5px;margin-bottom:7px}.cycle-cell-title svg{width:15px;height:15px;flex-basis:15px}.cycle-cell strong{font-size:11px}.cycle-cell code{font-size:10px;padding:6px;min-height:36px}.cycle-demo-layout{gap:18px}.cycle-tree{font-size:10px}.cycle-formula{font-size:11px}}
@media(max-width:360px){.cycle-map{aspect-ratio:540/580}}