/* Shared by all six demos: the demo ribbon, the closing note and the photo lightbox. */
.demo-ribbon{position:relative;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;padding:.55rem 1rem;background:#111;color:#f4f4f4;font:600 .86rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
.demo-ribbon b{color:#ffb547;font-weight:700}
.demo-ribbon a{color:#111;background:#ffb547;padding:.28rem .7rem;border-radius:999px;text-decoration:none;font-weight:700;white-space:nowrap}
.demo-ribbon a.ghost{background:transparent;color:#f4f4f4;border:1px solid #555}
.demo-ribbon a:hover{filter:brightness(1.08)}
.demo-note{background:#111;color:#e8e8e8;padding:3rem 1.25rem;font:400 1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.demo-note .in{max-width:760px;margin:0 auto}
.demo-note h2{font:700 1.5rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;margin:0 0 .75rem}
.demo-note ul{margin:.75rem 0 1.25rem;padding-left:1.2rem}
.demo-note li{margin:.25rem 0}
.demo-note a{color:#ffb547}
.demo-note .btn{display:inline-block;background:#ffb547;color:#111;text-decoration:none;font-weight:700;padding:.75rem 1.2rem;border-radius:8px;margin-right:.6rem}
.demo-note small{display:block;margin-top:1.5rem;color:#9a9a9a}
dialog.lb{padding:0;border:0;background:transparent;max-width:min(96vw,1400px);max-height:92vh}
dialog.lb::backdrop{background:rgba(0,0,0,.86)}
dialog.lb img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:6px}
dialog.lb p{color:#eee;font:500 .95rem/1.4 system-ui,sans-serif;margin:.6rem 0 0;text-align:center}
dialog.lb button{position:fixed;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:1.4rem;cursor:pointer}
[data-lb]{cursor:zoom-in}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}