.demo-page #demo-main { padding-block: 28px 50px; }
.demo-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.demo-page h1 { font-size: clamp(27px,4vw,44px); margin-bottom: 12px; }
#demo-breadcrumb { display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); }
#demo-breadcrumb a { color: var(--mint); text-decoration: underline; }
.demo-intro { font-size: 13px; color: var(--muted); margin-top: 20px; }
.demo-page-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.demo-page-nav a { padding: 8px 15px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.demo-page-nav [aria-current] { color:var(--mint); border-color:var(--mint); background:#2b3a2f; }
.demo-toolbar { display:flex; align-items:center; gap:20px; min-height:46px; font-size:12px; }
#demo-back { color:var(--mint); padding:8px 0; font-weight:600; }
#demo-loading { color:var(--muted); flex:1; }
#demo-zoom { margin-left:auto; }
.demo-stage { border:1px solid #53604f; border-radius:9px; overflow:hidden; background:#f6f7f4; }
.demo-canvas,.tour-viewport { position:relative; aspect-ratio:8/5; }
.demo-canvas > img,.tour-viewport > img { display:block; width:100%; height:auto; }
.demo-hotspots { position:absolute; inset:0; pointer-events:none; }
.demo-hotspot { position:absolute; display:block; pointer-events:auto; border:2px dashed #147d7280; border-radius:5px; background:#a5e7cb0a; cursor:pointer; }
.demo-hotspot:hover,.demo-hotspot:focus-visible { border-style:solid; border-color:#147d72; background:#8de0c233; outline:3px solid #ffca60; outline-offset:1px; z-index:2; }
.demo-stage.is-zoomed { overflow:auto; max-height:75vh; }
.is-zoomed .demo-canvas { width:1440px; max-width:none; }
.demo-screen-actions { margin-top:20px; padding:20px; border:1px solid var(--line); border-radius:8px; }
.demo-screen-actions > span { display:block; color:var(--muted); font-size:11px; margin-bottom:10px; }
#demo-actions { display:flex; flex-wrap:wrap; gap:8px; }
#demo-actions a { display:inline-flex; align-items:center; padding:9px 13px; min-height:44px; border:1px solid #526551; border-radius:6px; font-size:12px; color:var(--mint); }
#demo-feedback { background:#2b3a2f; border:1px solid #526551; padding:15px; border-radius:6px; color:var(--mint); font-size:13px; margin-top:15px; }
@media(max-width:760px) {
  .demo-page-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .demo-page .header { height:76px; }
  .demo-page .header > .inline-link { font-size:12px; }
  .demo-hotspot { border-width:1px; border-radius:2px; }
  .demo-toolbar { flex-wrap:wrap; gap:8px 15px; }
  .demo-page-nav a { min-height:44px; display:inline-flex; align-items:center; }
}
/* Keep the product UI close to the top of a walkthrough page. */
.demo-page .header { height:64px; }
.demo-page #demo-main { padding-top:10px; }
.demo-page #demo-main > .eyebrow { font-size:9px; margin-bottom:10px; }
.demo-page h1 { font-size:clamp(24px,3vw,32px); margin-bottom:6px; }
#demo-screen-title:focus { outline:none; }
.demo-intro { margin:10px 0; font-size:12px; }
.demo-page-nav { margin:12px 0 4px; }
.demo-toolbar { min-height:38px; }