.demo-block{margin-block:var(--space-8)}.demo-win{border:1px solid var(--border-subtle);border-radius:var(--radius-lg,.75rem);background:var(--surface-page,#121213);overflow:hidden}.demo-win__bar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-block-end:1px solid var(--border-subtle);background:var(--surface-raised);display:flex}.win-dots{flex:none;align-items:center;gap:.4rem;display:inline-flex}.win-dots>span{border-radius:var(--radius-full);width:.6rem;height:.6rem}.win-dots>span:first-child{background:var(--accent-light,color-mix(in oklch, var(--accent) 55%, white))}.win-dots>span:nth-child(2){background:var(--accent)}.win-dots>span:nth-child(3){background:var(--accent-dark,color-mix(in oklch, var(--accent) 65%, var(--colour-void-0)))}.demo-win__tag{font-family:var(--font-mono,monospace);letter-spacing:.04em;color:var(--colour-void-50,#838385);align-items:center;gap:.4rem;font-size:.75rem;display:inline-flex}.demo-win__tagdot{border-radius:var(--radius-full);background:var(--accent);width:.45rem;height:.45rem;animation:2s ease-in-out infinite demo-pulse}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.3}}@media (prefers-reduced-motion:reduce){.demo-win__tagdot{animation:none}}.demo-win__body{padding:var(--body-pad,var(--space-6))}.demo-wrap{--note-x:.25rem;--note-y:0;--note-w:15rem;--arrow-x:8.5rem;--arrow-y:1.7rem;--arrow-w:3.5rem;--note2-x:.25rem;--note2-y:0;--note2-w:15rem;--arrow2-x:8.5rem;--arrow2-y:1.7rem;--arrow2-w:3.5rem;position:relative}.demo-wrap--noted{padding-block-start:3.25rem}.demo-wrap--bl.demo-wrap--noted,.demo-wrap--br.demo-wrap--noted{padding-block:0 3.25rem}.demo-note{z-index:3;top:var(--note-y);left:var(--note-x);font-family:var(--font-annotation);text-transform:lowercase;color:var(--accent);pointer-events:none;font-size:1.25rem;line-height:1.1;position:absolute}.demo-note__arrow{z-index:3;top:var(--arrow-y);left:var(--arrow-x);width:var(--arrow-w);pointer-events:none;height:auto;position:absolute}.demo-note--2{left:auto;right:var(--note2-x);top:var(--note2-y);max-width:var(--note2-w);text-align:right}.demo-note__arrow--2{left:auto;right:var(--arrow2-x);top:var(--arrow2-y);width:var(--arrow2-w)}.demo-wrap--tr .demo-note,.demo-wrap--br .demo-note{left:auto;right:var(--note-x);text-align:right}.demo-wrap--tr .demo-note__arrow,.demo-wrap--br .demo-note__arrow{left:auto;right:var(--arrow-x)}.demo-wrap--bl .demo-note,.demo-wrap--br .demo-note{top:auto;bottom:var(--note-y)}.demo-wrap--bl .demo-note__arrow,.demo-wrap--br .demo-note__arrow{top:auto;bottom:var(--arrow-y)}.demo-foot{justify-content:center;align-items:flex-start;gap:var(--foot-gap,var(--space-3));padding-inline:var(--space-6);margin-block-start:var(--space-4);display:flex}.demo-foot--arrow-first{flex-direction:row-reverse}.demo-foot__arrow{flex:none;width:5.75rem;height:auto;margin-block-start:-.9rem}.demo-foot__text{font-family:var(--font-annotation);text-transform:lowercase;color:var(--accent);max-width:var(--foot-w,24rem);font-size:1.25rem;line-height:1.2}@media (max-width:40rem){.demo-wrap--noted{padding-block-start:2.5rem}.demo-note__arrow{display:none}.demo-note,.demo-note--2{text-align:left;max-width:none;margin-block-end:var(--space-3);display:block;position:static}}
.cs{--dg-title:14px;--dg-sub:var(--text-detail);--dg-wlabel:15px;--dg-callout:12px;--dg-stroke:1.1;--dg-stroke-em:2}.dg{width:100%;height:auto}.dg-card{fill:var(--surface-raised);transition:stroke .3s}.dg-label{fill:var(--ink-primary);font-family:var(--font-sans);font-size:var(--dg-title);text-anchor:middle;font-weight:600}.dg-sub{fill:var(--ink-secondary);font-family:var(--font-sans);font-size:var(--dg-sub);text-anchor:middle}.dg-sub--code{font-family:var(--font-mono)}.dg-sub--start{text-anchor:start}.dg-callout{fill:var(--accent);font-family:var(--font-sans);font-size:var(--dg-callout);text-anchor:middle;font-weight:600}.dg-wire{fill:none;stroke:var(--accent);stroke-width:var(--dg-stroke)}.dg-arrowhead{fill:none;stroke:var(--accent);stroke-width:var(--dg-stroke);stroke-linecap:round;stroke-linejoin:round}.dg-wire--em{stroke-width:var(--dg-stroke-em)}.dg-wlabel{fill:var(--accent);font-family:var(--font-annotation-sc);font-size:var(--dg-wlabel);text-anchor:middle}.dg-hand path{fill:var(--accent)}.dg-narrow{display:none}@media (max-width:48rem){.dg-wide{display:none}.dg-narrow{display:block}}@media (forced-colors:active){.dg-card{fill:canvas;stroke:canvastext;stroke-width:1px}.dg-wire,.dg-arrowhead{stroke:highlight}.dg-label{fill:canvastext}.dg-sub,.dg-wlabel{fill:graytext}.dg-callout{fill:highlight}}
.ct{gap:var(--space-3)}.ct__svg{width:100%;height:auto}@media (max-width:40rem){.ct__caption{min-height:4.8em}.ct__col--req{width:26%}.ct__col--id{width:50%}.ct__col--match{width:24%}.ct__table th,.ct__table td{padding:var(--space-2)}}.ct__wire{fill:none;stroke:var(--border-default);stroke-width:var(--dg-stroke);opacity:.5;transition:opacity .3s,stroke .3s}.ct__wire.is-on{stroke:var(--accent);opacity:1;stroke-dasharray:6 5;animation:2.4s linear infinite ct-flow}@keyframes ct-flow{to{stroke-dashoffset:-22px}}.ct__node{opacity:.4;transition:opacity .3s}.ct__node.is-on{opacity:1}.ct__node rect{fill:var(--surface-raised);transition:fill .4s}.ct__node.is-on rect{fill:color-mix(in oklab, var(--accent) 9%, var(--surface-raised))}.ct__label{fill:var(--ink-primary);font-family:var(--font-sans);font-size:var(--dg-title);text-anchor:middle;font-weight:600}.ct__ep{fill:var(--ink-secondary);font-family:var(--font-sans);font-size:var(--dg-sub);text-anchor:middle}.ct__ep--code{font-family:var(--font-mono)}.ct__match{fill:var(--accent);font-family:var(--font-sans);font-size:var(--dg-callout);text-anchor:middle;font-weight:600}.ct__idtext{fill:var(--accent);font-family:var(--font-annotation-sc);font-size:var(--dg-wlabel);text-anchor:middle}.ct__panel{gap:var(--space-4);flex-direction:column;display:flex}.ct__table{border-collapse:collapse;table-layout:fixed;width:100%;font-family:var(--font-sans);font-size:var(--text-code)}.ct__col--req{width:30%}.ct__col--id{width:45%}.ct__col--match{width:25%}.ct__table th{text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-tertiary);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-default);font-size:.7rem;font-weight:500}.ct__table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--ink-secondary)}.ct__mono{font-family:var(--font-annotation-sc);letter-spacing:.03em;font-size:1.1em}.ct__caption{color:var(--ink-secondary);text-align:center;min-height:2.4em}@media (prefers-reduced-motion:reduce){.ct__wire.is-on{animation:none}}@media (forced-colors:active){.ct__node>rect,.ct__node rect{fill:canvas;stroke:canvastext;stroke-width:1px}.ct__wire{stroke:graytext}.ct__wire.is-on{stroke:highlight}.ct__label{fill:canvastext}.ct__ep{fill:graytext}.ct__match,.ct__idtext{fill:highlight}}