.examples-catalog,.examples-viewer{--examples-border:var(--color-border,#d0d7de);--examples-muted:var(--color-muted,#59636e);--examples-accent:var(--color-accent,#0969da);--examples-surface:var(--color-surface,#f6f8fa);--examples-code:var(--color-code,#f6f8fa);max-inline-size:78rem;margin-inline:auto;padding-block:clamp(1.5rem,4vw,3.5rem);padding-inline:clamp(1rem,4vw,2rem)}.examples-eyebrow{color:var(--examples-muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 .5rem;font-size:.8125rem;font-weight:650}.examples-catalog-heading,.examples-viewer-heading{max-inline-size:70ch}.examples-catalog-heading h1,.examples-viewer-heading h1{letter-spacing:-.03em;margin:0;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05}.examples-viewer-heading h2{letter-spacing:.04em;text-transform:uppercase;margin-block:1.25rem 0;font-size:.875rem}.examples-catalog-heading p:not(.examples-eyebrow),.examples-viewer-heading p:not(.examples-eyebrow){max-inline-size:66ch;color:var(--examples-muted);margin-block:1rem 0;font-size:1.0625rem;line-height:1.55}.examples-filter{border-block:1px solid var(--examples-border);grid-template-columns:minmax(12rem,2fr) minmax(10rem,1fr) auto;align-items:end;gap:.75rem 1rem;margin-block:clamp(2rem,5vw,3.5rem) 2rem;padding-block:1rem;display:grid}.examples-filter-field{gap:.35rem;display:grid}.examples-filter label,.examples-control label{font-size:.875rem;font-weight:650}.examples-filter input,.examples-filter select,.examples-control input,.examples-control select{box-sizing:border-box;border:1px solid var(--examples-border);background:var(--color-bg,#fff);min-block-size:2.5rem;inline-size:100%;color:inherit;font:inherit;border-radius:.375rem;padding-inline:.7rem}.examples-filter input:focus-visible,.examples-filter select:focus-visible,.examples-filter button:focus-visible,.examples-control input:focus-visible,.examples-control select:focus-visible,.examples-sequence a:focus-visible,.examples-list a:focus-visible,.examples-breadcrumbs a:focus-visible{outline:3px solid var(--examples-accent);outline-offset:2px}.examples-filter-clear{border:1px solid var(--examples-border);min-block-size:2.5rem;color:inherit;cursor:pointer;font:inherit;white-space:nowrap;background:0 0;border-radius:.375rem;padding-inline:.9rem}.examples-filter-clear:hover{border-color:var(--examples-accent);color:var(--examples-accent)}.examples-filter-status{color:var(--examples-muted);grid-column:1/-1;margin:0;font-size:.875rem}.examples-empty{border-inline-start:.25rem solid var(--examples-accent);background:var(--examples-surface);margin-block:2rem;padding:1rem}.examples-group{margin-block:2.5rem}.examples-group-heading{border-block-end:1px solid var(--examples-border);justify-content:space-between;align-items:baseline;gap:1rem;padding-block-end:.6rem;display:flex}.examples-group-heading h2{letter-spacing:-.015em;margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}.examples-group-heading p{color:var(--examples-muted);margin:0;font-size:.875rem}.examples-list{margin:0;padding:0;list-style:none}.examples-list-item{border-block-end:1px solid var(--examples-border);grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1rem;padding-block:1rem;display:grid}.examples-list-item h3{margin:0;font-size:1.05rem}.examples-list-item h3 a,.examples-list-action,.examples-breadcrumbs a,.examples-sequence a{color:var(--examples-accent);text-underline-offset:.15em;text-decoration-thickness:.08em}.examples-list-item p{max-inline-size:68ch;color:var(--examples-muted);margin:.35rem 0 0;line-height:1.5}.examples-list-action{white-space:nowrap;font-size:.9rem}.examples-breadcrumbs{margin-block-end:clamp(1.5rem,4vw,2.75rem);font-size:.9rem}.examples-breadcrumbs ol{flex-wrap:wrap;gap:.4rem .75rem;margin:0;padding:0;list-style:none;display:flex}.examples-breadcrumbs li+li:before{color:var(--examples-muted);content:"/";margin-inline-end:.75rem}.examples-stage-layout{grid-template-columns:minmax(0,1fr) minmax(14rem,20rem);align-items:start;gap:1rem 1.5rem;margin-block-start:clamp(2rem,5vw,3.5rem);display:grid}.examples-stage-figure{grid-row:span 2;min-inline-size:0;margin:0}.examples-stage{aspect-ratio:16/9;border:1px solid var(--examples-border);background:#101622;min-block-size:8rem;inline-size:100%;max-inline-size:100%;position:relative;overflow:hidden}.examples-stage canvas{aspect-ratio:16/9;background:#101622;block-size:auto;inline-size:100%;max-inline-size:100%;display:block}.examples-stage-message{color:#f0f6fc;text-align:center;margin:0;font-size:.95rem;line-height:1.45;position:absolute;inset:50% 1rem auto;transform:translateY(-50%)}.examples-stage-message[hidden]{display:none}.examples-runtime-status{min-block-size:1.5rem;color:var(--examples-muted);grid-column:2;font-size:.875rem;line-height:1.45}.examples-runtime-status a{color:var(--examples-accent);margin-inline-start:.5rem;display:inline-block}.examples-runtime-status[hidden],.examples-runtime-status a[hidden],.examples-motion-controls[hidden]{display:none}.examples-canvas-controls{border:1px solid var(--examples-border);background:var(--examples-surface);grid-column:2;justify-self:start;gap:.75rem;max-inline-size:100%;padding:.35rem;display:grid}.examples-canvas-controls:not(.examples-canvas-controls-expanded):has(.examples-motion-controls[hidden]){display:none}.examples-canvas-controls-expanded{justify-self:stretch;padding:.85rem 1rem;position:relative}.examples-motion-controls button{border:1px solid var(--examples-border);min-block-size:2rem;color:inherit;font:inherit;cursor:pointer;background:0 0;padding:.3rem .6rem;font-size:.875rem}.examples-motion-controls button:hover{background:var(--examples-code)}.examples-canvas-controls-expanded .examples-motion-controls{position:absolute;inset:.75rem .75rem auto auto}.examples-controls{background:0 0;border:0;min-inline-size:0;margin:0;padding:0}.examples-controls h2{padding-inline-end:8rem}.examples-control+.examples-control{margin-block-start:1rem}.examples-control-input{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-block-start:.35rem;display:grid}.examples-control input[type=range]{padding-inline:0}.examples-control input[type=color]{min-block-size:2.5rem;padding:.2rem}.examples-control output{min-inline-size:4rem;color:var(--examples-muted);font-family:var(--font-code,ui-monospace, monospace);text-align:end;font-size:.8rem}.examples-source{border-block-start:1px solid var(--examples-border);margin-block-start:clamp(2rem,5vw,3.5rem);padding-block-start:1.25rem}.examples-source header p{max-inline-size:62ch;color:var(--examples-muted);margin-block:.4rem 1rem;font-size:.9rem;line-height:1.45}.examples-code-scroll{border:1px solid var(--examples-border);background:var(--examples-code);max-inline-size:100%;overflow-x:auto}.examples-code-scroll pre{min-inline-size:max-content;font-family:var(--font-code,ui-monospace, monospace);white-space:pre;margin:0;padding:1rem;font-size:clamp(.78rem,1.8vw,.9rem);line-height:1.6}.examples-code-scroll pre:focus-visible{outline:3px solid var(--examples-accent);outline-offset:-3px}.examples-code-scroll .line{min-inline-size:100%;display:inline-block}.examples-sequence{border-block-start:1px solid var(--examples-border);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:1rem;margin-block-start:2rem;padding-block-start:1rem;display:grid}.examples-sequence a{gap:.2rem;display:grid}.examples-sequence a span{color:var(--examples-muted);text-transform:uppercase;font-size:.8rem}.examples-sequence-next{text-align:end}.examples-sequence-index{align-self:center;font-size:.9rem}@media (width<=48rem){.examples-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.examples-filter-clear{justify-self:start}.examples-stage-layout{grid-template-columns:minmax(0,1fr)}.examples-stage-figure,.examples-runtime-status,.examples-canvas-controls,.examples-motion-controls,.examples-controls{grid-area:auto/1}}@media (width<=40rem){.examples-catalog,.examples-viewer{padding-inline:1rem}.examples-filter{grid-template-columns:minmax(0,1fr)}.examples-list-item{grid-template-columns:minmax(0,1fr);gap:.65rem}.examples-list-action{justify-self:start}.examples-group-heading{flex-direction:column;align-items:start;gap:.25rem}.examples-sequence{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.examples-sequence-index{grid-area:1/1/auto/-1;justify-self:start}.examples-sequence-next{grid-area:2/2}}@media (prefers-reduced-motion:reduce){.examples-stage-message,.examples-catalog a,.examples-viewer a{transition:none}}