/* Diagrams are HTML and local vector symbols, so labels stay readable at any size. */
.visual,.visual-catalog{container-type:inline-size;margin:28px 0 32px}
.visual{padding:24px;border-radius:var(--radius-lg);background:var(--background-subtle)}
.visual-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.visual-heading-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.visual-kicker{font-size:var(--font-size-caption);color:var(--text-secondary)}
.visual-heading-copy>strong{font-size:var(--font-size-h3);line-height:1.4;font-weight:500}
.brick-accent{width:52px;height:40px;flex:none;--face-base:var(--gb-navy-400)}
.brick-accent .brick-top{fill:var(--face-top)}
.brick-accent .brick-left{fill:var(--face-left)}
.brick-accent .brick-right{fill:var(--face-right)}
.brick-accent .brick-soft{opacity:.35}
.brick-accent .brick-pixels{fill:var(--brick-accent);opacity:.45;shape-rendering:crispEdges}
.visual-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visual-icon.pixel-icon{fill:currentColor;stroke:none;shape-rendering:crispEdges}
.tone-workspace{--visual-ink:var(--entity-account);--visual-tint:var(--entity-account-subtle)}
.tone-agent{--visual-ink:var(--entity-agent);--visual-tint:var(--entity-agent-subtle)}
.tone-play{--visual-ink:var(--entity-play);--visual-tint:var(--entity-play-subtle)}
.tone-run{--visual-ink:var(--entity-run);--visual-tint:var(--entity-run-subtle)}
.tone-person{--visual-ink:var(--gb-ink);--visual-tint:var(--gb-n-100)}
.tone-neutral{--visual-ink:var(--text-secondary);--visual-tint:var(--gb-n-100)}
.visual-symbol{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-sm);background:var(--visual-tint);color:var(--visual-ink);flex:none}
.visual-symbol>.visual-icon{width:28px;height:28px}
.visual-symbol>.pixel-icon{width:32px;height:32px}
.visual-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-width:0;padding:20px 16px;background:var(--background-surface);border-radius:var(--radius-md)}
.visual-node>strong{font-size:15px;line-height:1.4;font-weight:500}
.visual-note{display:block;color:var(--text-secondary);font-size:13px;line-height:1.5}
.visual-location{display:block;font-size:11px;line-height:1.4;color:var(--text-secondary);font-weight:500;letter-spacing:.025em}
.visual-number{position:absolute;top:15px;right:14px;font-size:12px;color:var(--text-tertiary)}
.visual .visual-caption{margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--text-secondary)}
.visual-arrow{display:flex;align-items:center;justify-content:center;color:var(--gb-navy-400)}
.visual-arrow .visual-icon{width:22px;height:22px}
.visual .visual-flow{display:grid;grid-template-columns:repeat(var(--nodes),minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}
.visual-flow-2{--nodes:2}.visual-flow-3{--nodes:3}.visual-flow-4{--nodes:4}.visual-flow-5{--nodes:5}
.visual-flow>li{position:relative;min-width:0;margin:0;padding:0}
.visual-flow .visual-node{height:100%;justify-content:flex-start}
.visual-flow .visual-arrow{position:absolute;top:50%;left:100%;width:28px;transform:translateY(-50%)}
.visual-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.visual-split .visual-node{padding:24px}
.visual-fork{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,2fr);gap:0;align-items:center}
.visual-origin .visual-node{min-height:210px;align-items:center;text-align:center;background:var(--entity-play-subtle)}
.visual-origin .visual-symbol{height:64px;width:64px;background:var(--background-surface)}
.visual-origin .visual-icon{height:38px;width:38px}
.visual-branches{display:grid;gap:16px}
.visual-branch{display:grid;grid-template-columns:32px minmax(0,1fr) 32px minmax(0,1fr);align-items:stretch;position:relative}
.visual-branch>.visual-node{min-height:150px}
.visual-branch>.tone-run{background:var(--entity-run-subtle)}
.visual-network{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1.1fr) 32px minmax(0,1fr);align-items:center}
.visual-inputs{display:grid;gap:12px}
.visual-inputs .visual-node{display:grid;grid-template-columns:40px 1fr;padding:14px;gap:4px 10px}
.visual-inputs .visual-symbol{grid-row:span 2;width:40px;height:40px;border-radius:var(--radius-sm)}
.visual-inputs .visual-icon{width:24px;height:24px}
.visual-hub .visual-node{min-height:224px;align-items:center;text-align:center;background:var(--visual-tint)}
.visual-hub .visual-symbol{width:80px;height:80px;background:var(--background-surface);border-radius:var(--radius-md)}
.visual-hub .visual-icon{width:48px;height:48px}
.visual-output .visual-node{min-height:175px}
.visual .visual-timeline{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.visual-timeline>li{padding:0 20px 0 0;margin:0;position:relative;display:flex;flex-direction:column;gap:10px}
.visual-timeline>li::before{content:"";height:2px;background:var(--gb-n-300);position:absolute;top:24px;left:40px;right:-2px}
.visual-timeline>li:last-child::before{display:none}
.timeline-pin{display:flex;align-items:center;justify-content:center;z-index:1;width:48px;height:48px;border:2px solid var(--gb-n-300);border-radius:50%;background:var(--background-subtle);color:var(--text-secondary)}
.visual-timeline>li>strong{font-size:15px;line-height:1.4}
.clock-start .timeline-pin{background:var(--entity-run-subtle);border-color:var(--entity-run);color:var(--entity-run)}
.clock-label{align-self:start;background:var(--entity-run-subtle);color:var(--entity-run);font-weight:500;padding:4px 8px;border-radius:var(--radius-xs);font-size:12px}
.visual-document{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,.9fr) 28px minmax(0,1.4fr);align-items:center;gap:6px}
.visual-request,.visual-method{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 8px}
.visual-request>strong,.visual-method>strong{font-size:15px;line-height:1.4}
.visual-method .visual-symbol{width:72px;height:72px;border-radius:var(--radius-md)}
.visual-method .visual-symbol svg{width:48px;height:48px}
.paper-sheet{position:relative;padding:24px 20px;background:var(--background-surface);border-radius:3px 20px 3px 3px;box-shadow:0 3px 0 var(--gb-n-200),0 7px 0 var(--gb-n-100);min-width:0}
.paper-fold{position:absolute;right:0;top:0;width:20px;height:20px;background:var(--gb-navy-50);clip-path:polygon(0 0,100% 100%,0 100%)}
.paper-sheet>strong{display:block;margin:8px 0 20px;font-size:17px;font-weight:500}
.paper-sheet>ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.paper-sheet li{margin:0;padding:0;display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5}
.paper-sheet li .visual-icon{width:17px;height:17px;color:var(--entity-agent);margin-top:2px}
.visual-decision{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);gap:32px;align-items:center}
.decision-question{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px;background:var(--background-surface);border-radius:var(--radius-md);font-size:16px}
.visual .decision-options{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.decision-options li{position:relative;background:var(--background-surface);padding:14px 16px;margin:0;border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:4px}
.decision-line{position:absolute;width:32px;height:1px;background:var(--gb-n-300);right:100%;top:50%}
.decision-options li>strong{font-size:13px;font-weight:500;color:var(--text-secondary)}
.decision-options li>a{font-size:14px;line-height:1.5;display:inline-flex;align-items:center;gap:8px}
.decision-options .visual-icon{width:16px;height:16px}
.visual-catalog-group{margin:0 0 28px}
.visual-catalog-group h2{margin:0 0 16px!important}
.prose .play-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.prose .play-card{position:relative;margin:0;padding:18px;background:var(--background-subtle);border-radius:var(--radius-md);display:grid;grid-template-columns:40px 1fr;gap:10px 12px;align-content:start;min-width:0}
.play-card .visual-symbol{width:40px;height:40px;border-radius:var(--radius-sm)}
.play-card-title{align-self:center;font-size:15px;line-height:1.35;min-width:0}
.play-input,.play-output,.play-example{grid-column:1/-1;font-size:13px;line-height:1.5}
.play-input{margin-top:4px;color:var(--text-secondary)}
.play-output{display:flex;gap:8px;align-items:flex-start}
.play-output .visual-icon{width:17px;height:17px;color:var(--entity-play);margin-top:1px}
.play-example{display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.play-example .visual-icon{width:15px;height:15px}
.home .home-visual{margin-top:32px}
.home .home-visual .visual{margin:0}
.step-symbol{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--background-surface);border-radius:12px;flex:none;color:var(--text-accent)}
.step-symbol .step-number{position:absolute;right:-4px;bottom:-4px;display:flex;align-items:center;justify-content:center;width:19px;height:19px;background:var(--gb-ink);color:white;border-radius:50%;font-size:10px;padding:0}
.setup-steps a:hover .step-symbol{background:var(--accent-subtle)}
@container(max-width:760px){
  .prose .play-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container(max-width:620px){
  .visual .visual-flow{grid-template-columns:1fr;gap:28px}
  .visual-flow .visual-node{display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-content:center;padding:16px 28px 16px 16px}
  .visual-flow .visual-symbol{grid-column:1;grid-row:1/4}
  .visual-flow .visual-location,.visual-flow .visual-note,.visual-flow .visual-node>strong{grid-column:2}
  .visual-flow .visual-arrow{left:24px;top:100%;width:32px;height:28px;transform:rotate(90deg)}
  .visual-number{top:10px;right:10px;font-size:11px}
  .visual-split{grid-template-columns:1fr}
  .visual-split .visual-node{padding:18px}
  .visual-network{grid-template-columns:1fr;gap:10px}
  .visual-network>.visual-arrow{transform:rotate(90deg)}
  .visual-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .visual-inputs .visual-node{display:flex;gap:7px;padding:14px}
  .visual-hub .visual-node{min-height:0;display:grid;grid-template-columns:64px 1fr;gap:6px 16px;text-align:left;padding:18px}
  .visual-hub .visual-symbol{grid-row:span 2;width:64px;height:64px;border-radius:var(--radius-md)}
  .visual-hub .visual-icon{width:32px;height:32px}
  .visual-output .visual-node{min-height:0;display:grid;grid-template-columns:48px 1fr;gap:4px 14px}
  .visual-output .visual-symbol{grid-row:span 2}
  .visual-fork{grid-template-columns:1fr;gap:20px}
  .visual-origin .visual-node{min-height:0;padding:18px}
  .visual-branch{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
  .visual-branch>.visual-arrow:first-child{display:none}
  .visual-branch .visual-node{padding:14px 12px;min-height:0}
  .visual-branches{position:relative;padding-top:16px}
  .visual-branches::before{content:"";position:absolute;width:2px;height:32px;top:-20px;left:50%;background:var(--gb-n-300)}
  .visual-document{grid-template-columns:1fr;gap:14px}
  .visual-document>.visual-arrow{transform:rotate(90deg)}
  .visual-request,.visual-method{padding:8px;display:grid;grid-template-columns:56px 1fr;text-align:left;gap:6px 16px}
  .visual-request>.visual-symbol,.visual-method>.visual-symbol{grid-row:span 3;width:56px;height:56px;border-radius:var(--radius-sm)}
  .visual-method>.visual-symbol{grid-row:span 2}
  .visual-method .visual-symbol svg{width:32px;height:32px}
  .visual .visual-timeline{grid-template-columns:1fr;gap:0}
  .visual-timeline>li{padding:0 0 26px 68px;min-height:100px;gap:6px}
  .visual-timeline>li:last-child{padding-bottom:0;min-height:60px}
  .timeline-pin{position:absolute;left:0;top:0}
  .visual-timeline>li::before{width:2px;height:auto;top:40px;bottom:0;left:23px;right:auto}
  .visual-decision{grid-template-columns:1fr;gap:20px}
  .decision-question{padding:18px}
  .decision-options{padding-left:20px!important;border-left:1px solid var(--gb-n-300)}
  .decision-line{width:20px}
}
@container(max-width:460px){.prose .play-catalog{grid-template-columns:1fr}.play-card-title{font-size:16px}}
@container(max-width:280px){
  .visual-inputs{grid-template-columns:1fr}
  .visual-flow .visual-node{grid-template-columns:32px minmax(0,1fr);gap:4px 10px;padding:14px 20px 14px 10px}
  .visual-flow .visual-symbol{width:32px;height:32px}
  .visual-flow .visual-symbol>.visual-icon{width:24px;height:24px}
  .visual-flow .visual-arrow{left:10px}
  .visual-branch{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;background:var(--background-surface);border-radius:var(--radius-md)}
  .visual-branch>.visual-arrow{transform:rotate(90deg)}
  .visual-branch>.visual-node{padding:12px}
  .visual .visual-branch>.tone-neutral{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 10px}
  .visual-branch>.tone-neutral .visual-symbol{grid-row:span 2;width:32px;height:32px}
  .visual-hub .visual-node,.visual-output .visual-node{grid-template-columns:40px minmax(0,1fr);gap:6px 10px;padding:14px 10px}
  .visual-hub .visual-symbol,.visual-output .visual-symbol{width:40px;height:40px}
  .visual-hub .visual-icon{width:32px;height:32px}
  .visual-request,.visual-method{grid-template-columns:40px minmax(0,1fr);gap:6px 10px;padding:8px 0}
  .visual-request>.visual-symbol,.visual-method>.visual-symbol{width:40px;height:40px}
  .paper-sheet{padding:18px 12px}
  .visual-timeline>li{padding-left:52px}
  .timeline-pin{width:36px;height:36px}
  .visual-timeline>li::before{left:17px;top:32px}
  .prose .play-card{padding:14px 12px;gap:10px}
}
@media(max-width:700px){.visual{padding:18px 14px}.visual-heading{margin-bottom:20px}.brick-accent{width:39px;height:30px}.visual-node>strong{font-size:14px}.visual-fork .visual-node>.visual-note{font-size:12px}}
@media print{.visual,.play-card{break-inside:avoid}.visual-icon{color:var(--text-primary)}.visual,.visual-symbol,.play-card{-webkit-print-color-adjust:exact;print-color-adjust:exact}}