.tw-demo{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}.tw-demo-tabs{scrollbar-width:none;background:var(--tabs-bg);border:1px solid var(--tabs-border);border-radius:10px;justify-content:center;gap:2px;width:max-content;max-width:100%;margin:0 auto 20px;padding:3px;display:flex;overflow-x:auto}.tw-demo-tab{font:inherit;color:var(--muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:7px;flex:none;padding:6px 12px;font-size:14px;transition:color .14s,background .14s}.tw-demo-tab:hover{color:var(--fg)}.tw-demo-tab[aria-selected=true]{color:var(--fg);background:var(--tab-active-bg);box-shadow:0 0 0 1px var(--tabs-border), 0 1px 2px #0000000d}.tw-demo-tab:focus-visible{outline:2px solid var(--fg);outline-offset:1px}.tw-demo-window{background:#0d0b0a;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000008c,inset 0 0 0 1px #ffffff14,0 30px 80px -20px #00000073,0 12px 28px -12px #0000004d}.tw-demo-caption{text-align:center;max-width:640px;min-height:3em;color:var(--text);margin:18px auto 0;font-size:14px;line-height:1.5}.tw-demo-caption-text{animation:.42s tw-demo-caption-in}@keyframes tw-demo-caption-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.tw-demo-caption-text{animation:none}}.tw-demo-hint{color:var(--fg)}.tw-demo-window{aspect-ratio:1200/760;container-type:inline-size}.tw-demo-window>.tw-app{transform:scale(calc(tan(atan2(100cqw, 1200px))))}.demo-still{width:100%}.demo-still img{border-radius:8px;width:100%;height:auto;display:block;box-shadow:0 0 0 1px #0000008c,0 16px 40px -12px #0006}.demo-still figcaption{text-align:center;color:var(--text);margin-top:12px;font-size:14px}@media (min-width:640px){.demo-still{display:none}}@media (max-width:639px){.tw-demo-wide{display:none}}