.demo-surface{font-family:system-ui,sans-serif;color:#22322d;background:#f3f5f2;font-synthesis:none;line-height:1.55}.demo-surface *{box-sizing:border-box}.demo-surface{margin:0}.demo-surface :is(main,.demo-content){max-width:1160px;margin:auto;padding:40px 28px 80px}.demo-surface header{max-width:800px;margin-bottom:28px}.demo-surface .eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700;color:#536c60}.demo-surface h1{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:12px 0}.demo-surface h2{font-size:19px}.demo-surface h3{font-size:13px;margin:8px 0}.demo-surface p{margin:12px 0}.demo-surface .controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.demo-surface .controls label{font-weight:650}.demo-surface .controls p{flex-basis:100%;margin:0;font-size:14px}.demo-surface button,.demo-surface select{font:inherit;border:1px solid #8b9c92;border-radius:6px;background:#fff;color:inherit;padding:8px 12px}.demo-surface button{cursor:pointer}.demo-surface button:disabled{opacity:.5;cursor:default}.demo-surface button[aria-pressed=true]{background:#254f40;color:#fff}.demo-surface button:focus-visible,.demo-surface select:focus-visible,.demo-surface a:focus-visible{outline:3px solid #b56d10;outline-offset:3px}.demo-surface .scope{font-size:14px;border-left:3px solid #8a9f91;padding:8px 14px;margin:24px 0}.demo-surface #error{background:#fff0dc;border:1px solid #a55a00;padding:14px}.demo-surface .selected-scope{background:#fff0dc;border:2px solid #a55a00;font-weight:650}.demo-surface .documents{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.demo-surface .documents>section{min-width:0}.demo-surface .document{background:#fff;border:1px solid #c9d4cd;border-radius:8px;min-height:250px;min-width:0;padding:24px;overflow:auto;overflow-wrap:anywhere}.demo-surface .document p{margin:0 0 20px}.demo-surface .document a{color:#245ca3;text-decoration:underline}.demo-surface .document figure{margin:0}.demo-surface .document img{display:block;max-width:100%;height:auto}.demo-surface .document figcaption{font-size:13px;margin-top:10px}.demo-surface .selected-change{outline:2px solid #99600c;outline-offset:3px;background:#fff0c5;border-radius:2px}.demo-surface ol{list-style:none;padding:0}.demo-surface li{background:#fff;border:1px solid #c9d4cd;border-radius:8px;margin:14px 0;padding:18px}.demo-surface li>p{font-family:monospace;font-size:13px}.demo-surface .values{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}.demo-surface .values>div{min-width:0}.demo-surface pre{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;background:#f3f5f2;padding:12px;margin:0}@media(max-width:650px){.demo-surface :is(main,.demo-content){padding:24px 16px 48px}.demo-surface .values{grid-template-columns:1fr}.demo-surface .documents{gap:8px}.demo-surface .document{min-height:120px;padding:8px}.demo-surface .controls select{max-width:100%}}