.demos{margin:1.5rem 0}.demos__noscript{margin-bottom:18px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);color:var(--secondary)}.demos__tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap}.demos__tab{font-family:inherit;font-size:15px;font-weight:600;padding:10px 16px;border:none;border-bottom:2px solid transparent;background:0 0;color:var(--secondary);cursor:pointer;margin-bottom:-1px}.demos__tab:hover{color:var(--content)}.demos__tab.is-active{color:var(--primary);border-bottom-color:#2dd4bf}.demos__tab--secret.is-revealed{animation:demos-reveal .5s ease}@keyframes demos-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.demos__intro{font-size:16px;line-height:1.6;color:var(--content);margin:0 0 14px}.demos.js-tabs .demos__panel{display:none}.demos.js-tabs .demos__panel.is-active{display:block}.demos__frame-slot{min-height:340px;border-radius:var(--radius);background:var(--demo-surface)}.demos__frame{display:block;width:100%;min-height:540px;border:0;background:0 0}@media(max-width:520px){.demos__tabs{gap:2px}.demos__tab{font-size:13.5px;padding:10px}.demos__frame{min-height:620px}}.workspace-expanded .main{max-width:1680px}.workspace-expanded .demos__intro{max-width:80ch}#demo-workspace{position:static;margin:0;padding:0;width:100%;max-width:none;max-height:none;border:0;color:inherit;background:0 0;overflow:visible}.focus-exit{display:none}.demo-focused{overflow:hidden}.demo-focused #demo-workspace{position:fixed;inset:12px;margin:0;width:calc(100% - 24px);height:calc(100dvh - 24px);padding:12px;background:var(--theme);overflow:auto;border:1px solid var(--border)}.demo-focused #demo-workspace::backdrop{background:var(--theme)}.demo-focused .focus-exit{display:inline-flex;position:sticky;top:0;z-index:2;background:var(--entry)}.demo-focused .demos{margin:12px 0 0}.demo-focused .demos__intro{display:none}.demos__frame{max-height:none}.demo-focused .demos__frame{min-height:0;max-height:none}@media(max-width:560px){.demo-focused #demo-workspace{inset:0;width:100%;height:100dvh;padding:8px}}.demos__frame-slot{position:relative;min-height:620px}.demo-load-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:var(--entry);border:1px solid var(--border);font-size:14px}.demo-load-status button{padding:10px 18px;border:1px solid var(--border);border-radius:4px;min-height:44px}.demo-focused .demos__frame-slot{min-height:300px}