/* Public demonstration: the same readable hierarchy as the website. */
body.public-demo .app-main :is(h1,h2,h3){font-family:var(--sans);font-weight:600;font-style:normal;letter-spacing:-.025em}
body.public-demo .app-main h1{font-size:36px;line-height:1.2}
body.public-demo .app-main h2{font-size:24px;line-height:1.3}
body.public-demo .app-main h3{font-size:20px;line-height:1.4}
body.public-demo .app-main h2 em{font-style:normal;font-weight:inherit}
body.public-demo .demo-notice{font-size:13px;line-height:1.6;gap:12px;align-items:center}
body.public-demo .demo-options>div{width:min(260px,calc(100vw - 32px))}
body.public-demo .app-context{font-size:13px;flex-wrap:wrap;gap:14px}
body.public-demo .app-context select{font-size:14px;min-height:44px;max-width:340px}
body.public-demo .app-eyebrow{font-size:12px;line-height:1.6}
body.public-demo .app-button:hover{box-shadow:none;transform:none}
@media(max-width:760px){
 body.public-demo .demo-options>div{left:0;right:auto}
 body.public-demo .app-main h1{font-size:30px}
 body.public-demo .app-main h2{font-size:22px}
 body.public-demo .app-main h3{font-size:18px}
 body.public-demo .app-context{align-items:flex-start}
 body.public-demo .app-context label{display:grid;gap:6px;width:100%}
 body.public-demo .app-context select{width:100%;max-width:100%;font-size:16px}
}