.demo-ribbon{z-index:60;height:var(--demo-h);background:var(--ink);color:var(--paper);font-family:var(--sans);letter-spacing:.02em;white-space:nowrap;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0;padding:0 16px;font-size:13px;display:grid;position:fixed;top:0;left:0;right:0;box-shadow:0 6px 18px -10px #00000073}.demo-left{align-items:center;gap:.6rem;min-width:0;display:flex}.demo-text{opacity:.8;text-overflow:ellipsis;overflow:hidden}.demo-ribbon .demo-tag{border:1px solid color-mix(in srgb, var(--paper) 45%, transparent);color:var(--paper);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:4px 10px;font-size:10.5px;text-decoration:none;transition:background .2s}.demo-ribbon .demo-tag:hover,.demo-ribbon .demo-tag:focus-visible{background:color-mix(in srgb, var(--paper) 16%, transparent)}.demo-switch{background:color-mix(in srgb, var(--paper) 13%, transparent);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.demo-switch a{color:var(--paper);letter-spacing:.01em;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s}.demo-switch a.on{background:var(--accent);box-shadow:0 2px 8px -2px #0006}.demo-switch a.other{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent);animation:1.8s ease-in-out 1.2s 3 demo-breathe}.demo-switch a.other:hover{background:color-mix(in srgb, var(--paper) 18%, transparent)}@keyframes demo-breathe{0%,to{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--paper) 55%, transparent)}50%{box-shadow:inset 0 0 0 1px var(--paper), 0 0 0 7px color-mix(in srgb, var(--paper) 0%, transparent)}}@media (prefers-reduced-motion:reduce){.demo-switch a.other{animation:none}}.demo-short{display:none}html.demo .demo-ribbon .demo-go,html.demo .demo-ribbon .demo-switch a{color:var(--paper)}.demo-go{text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--paper) 50%, transparent);text-decoration-color:color-mix(in srgb, var(--paper) 50%, transparent);text-underline-offset:.2em;justify-self:end}html.demo{--demo-h:54px;scroll-padding-top:calc(var(--demo-h) + 4.5rem)}html.demo body{padding-top:var(--demo-h)}html.demo .site-header,html.demo .topbar,html.demo .dash-top,html.demo .sp-editbar{top:var(--demo-h)}@media (max-width:860px){.demo-text{display:none}}@media (max-width:640px){html.demo{--demo-h:50px}.demo-ribbon{gap:6px;padding:0 8px}.demo-long{display:none}.demo-short{display:inline}.demo-switch a{padding:7px 15px;font-size:13.5px}.demo-go{padding:0 5px;font-size:19px;text-decoration:none}}html.demo .sign-out,.demo-only{display:none}html.demo .demo-only{color:var(--accent);display:block}