.examples-content{--example-surface:color-mix(in srgb, var(--color-fd-muted) 72%, var(--color-fd-background));--example-surface-strong:color-mix(in srgb, var(--color-fd-muted) 94%, var(--color-fd-background));--example-code:#eef4f1;--example-code-ink:#16362e;--example-code-muted:#62766f;gap:1.5rem;margin-top:2.5rem;display:grid}.dark .examples-content{--example-code:#080b0a;--example-code-ink:#e1f1ea;--example-code-muted:#8da198}.examples-content button{font:inherit}.lab-controls,.framework-tabs,.version-row{flex-wrap:wrap;gap:.5rem;display:flex}.lab-controls{margin-bottom:1rem}.lab-controls button,.approval-card button,.framework-tabs button{background:var(--example-surface-strong);min-height:44px;color:var(--color-fd-foreground);cursor:pointer;border:0;border-radius:.6rem;padding:.55rem .85rem;font-size:.8rem;font-weight:650}.lab-controls button:hover:not(:disabled),.approval-card button:hover,.framework-tabs button[aria-selected=true]{background:var(--color-fd-primary);color:var(--color-fd-primary-foreground)}.lab-controls button:disabled{cursor:not-allowed;opacity:.45}.lab-controls .quiet-control{margin-left:auto}.lab-grid,.framework-panel,.real-example-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.host-surface,.a11y-surface,.timeline,.framework-showcase,.framework-input,.framework-output,.product-window,.adapter-trace{background:var(--example-surface);border:0;border-radius:.9rem;min-width:0}.host-surface,.a11y-surface,.timeline,.framework-showcase{padding:1.35rem}.a11y-surface,.framework-output,.adapter-trace{background:var(--example-code);color:var(--example-code-ink)}.surface-heading{grid-template-columns:1.5rem 1fr;align-items:start;gap:.65rem;margin-bottom:1.25rem;display:grid}.surface-heading>span,.surface-heading p,.timeline-head p,.framework-heading p,.framework-input>span,.framework-output>span{color:var(--color-fd-muted-foreground);font:.67rem var(--font-home-mono), monospace;letter-spacing:.06em;text-transform:uppercase;margin:0}.surface-heading h2,.timeline-head h2,.framework-heading h2{font-family:var(--font-home-sans), sans-serif;letter-spacing:-.03em;margin:.15rem 0 0;font-size:1.15rem;font-weight:650}.existing-ui,.announcement-list{min-height:19rem}.user-message{background:var(--color-fd-accent);border-radius:.8rem .8rem .2rem;width:fit-content;max-width:82%;margin-left:auto;padding:.7rem .85rem;font-size:.8rem}.assistant-message{grid-template-columns:1.8rem 1fr;align-items:start;gap:.7rem;margin-top:1.2rem;display:grid}.assistant-message>span,.product-answer>span{background:var(--color-fd-primary);width:1.8rem;height:1.8rem;color:var(--color-fd-primary-foreground);font:.6rem var(--font-home-mono), monospace;border-radius:50%;place-items:center;display:grid}.assistant-message p,.product-answer p{margin:.1rem 0 0;font-size:.82rem;line-height:1.65}.tool-row,.approval-card,.delivery-summary,.announcement-preview{background:var(--color-fd-background);border-radius:.65rem;margin-top:1rem;padding:.8rem;font-size:.72rem}.tool-row,.delivery-summary{justify-content:space-between;gap:1rem;display:flex}.approval-card p{gap:.2rem;margin:0 0 .7rem;display:grid}.approval-card>div{gap:.5rem;display:flex}.surface-caption,.trace-help{color:var(--color-fd-muted-foreground);margin:1rem 0 0;font-size:.72rem;line-height:1.55}.announcement-list{margin:0;padding:0;list-style:none}.announcement-list li{grid-template-columns:2.8rem 1fr auto;align-items:start;gap:.6rem;padding:.7rem 0;display:grid}.announcement-list time,.announcement-list b,.announcement-list>li>span,.delivery-summary{font-family:var(--font-home-mono), monospace;font-size:.62rem}.announcement-list p{font:.68rem/1.55 var(--font-home-mono), monospace;margin:.25rem 0 0}.announcement-list>li>span{background:var(--color-fd-accent);border-radius:.3rem;padding:.15rem .35rem}.timeline{margin-top:.75rem}.timeline-head{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem;display:flex}.timeline-scroll{overflow-x:auto}.timeline table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.72rem}.timeline th,.timeline td{text-align:left;padding:.65rem}.timeline tbody tr:nth-child(odd){background:color-mix(in srgb, var(--color-fd-muted) 55%, transparent)}.diagnostics{color:var(--color-fd-muted-foreground);margin-top:1rem;font-size:.72rem}.framework-showcase{gap:1rem;display:grid}.framework-heading{gap:.75rem;display:grid}.framework-heading>p{text-transform:none;max-width:46rem}.version-row span{background:var(--color-fd-background);font:.62rem var(--font-home-mono), monospace;border-radius:99rem;padding:.35rem .55rem}.framework-input,.framework-output{padding:1rem}.framework-input h3{margin:.5rem 0 1rem;font-size:.9rem}.framework-input pre{background:var(--example-code);max-width:100%;color:var(--example-code-ink);border:0;border-radius:.65rem;padding:1rem;font-size:.72rem;overflow:auto}.framework-input button,.example-picker button{cursor:pointer;border:0}.framework-input button{background:var(--color-fd-primary);color:var(--color-fd-primary-foreground);border-radius:.55rem;padding:.55rem .75rem;font-size:.78rem;font-weight:650}.framework-output ol,.adapter-trace ol{margin:.75rem 0;padding:0;list-style:none}.framework-output li{justify-content:space-between;gap:1rem;padding:.55rem;font-size:.72rem;display:flex}.framework-metrics{gap:.75rem;display:flex}.framework-metrics span{background:var(--color-fd-background);border-radius:.5rem;padding:.55rem;font-size:.7rem}.real-example-panel{grid-template-columns:minmax(10rem,.7fr) minmax(0,1.3fr)}.example-picker{align-content:start;gap:.4rem;display:grid}.example-picker button{color:inherit;text-align:left;background:0 0;border-radius:.65rem;gap:.2rem;padding:.75rem;display:grid}.example-picker button[aria-current=true]{background:var(--color-fd-accent)}.example-picker span{font-size:.8rem;font-weight:650}.example-picker small{color:var(--color-fd-muted-foreground);font-size:.68rem}.product-window,.adapter-trace{padding:1rem}.product-bar,.adapter-trace>header,.product-window footer{justify-content:space-between;align-items:center;gap:.75rem;font-size:.68rem;display:flex}.product-bar b{color:var(--color-fd-muted-foreground);font-weight:500}.product-conversation{min-height:15rem;padding:1.25rem 0}.product-user{background:var(--color-fd-accent);border-radius:.7rem .7rem .2rem;width:fit-content;max-width:80%;margin:0 0 1rem auto;padding:.65rem .75rem;font-size:.75rem}.product-answer{grid-template-columns:1.8rem 1fr;gap:.65rem;display:grid}.adapter-trace{grid-column:1/-1}.trace-guide{grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:.5rem;margin-top:1rem;font-size:.68rem;display:grid}.trace-guide span{align-items:center;gap:.4rem;display:flex}.trace-guide span b{background:var(--color-fd-accent);border-radius:50%;place-items:center;width:1.35rem;height:1.35rem;display:grid}.trace-guide>i{background:color-mix(in srgb, var(--color-fd-muted-foreground) 35%, transparent);height:1px}.adapter-trace details{padding:.25rem 0}.adapter-trace summary{cursor:pointer;align-items:center;gap:.55rem;padding:.55rem;list-style:none;display:flex}.adapter-trace summary span{flex:1;display:grid}.adapter-trace summary small,.event-explanation,.announcement-preview span{color:var(--example-code-muted);font-size:.68rem}.event-explanation{padding:0 .55rem .7rem 2rem}.event-explanation p,.event-explanation dl{margin:.5rem 0 0}.event-explanation dl div{justify-content:space-between;gap:1rem;display:flex}.announcement-preview p{margin:.25rem 0 0}.empty-trace{color:var(--color-fd-muted-foreground);font-size:.72rem}@media (max-width:800px){.lab-grid,.framework-panel,.real-example-panel{grid-template-columns:1fr}.adapter-trace{grid-column:auto}}@media (max-width:520px){.host-surface,.a11y-surface,.timeline,.framework-showcase{padding:1rem}.lab-controls .quiet-control{margin-left:0}.announcement-list li{grid-template-columns:2.5rem minmax(0,1fr)}.announcement-list>li>span{grid-column:2}.trace-guide{grid-template-columns:1fr}.trace-guide>i{display:none}}