.zg-play:where(.astro-qtdfgg6h){border:1px solid var(--border);background:var(--surface);border-radius:14px;margin:1.5rem 0;overflow:hidden}.zg-play__tabs:where(.astro-qtdfgg6h){border-bottom:1px solid var(--border-soft);background:var(--surface-2);flex-wrap:wrap;gap:2px;padding:.5rem .9rem;display:flex}.zg-play__tabs:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h){font-family:var(--font-mono);color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;padding:.3rem .7rem;font-size:11px;font-weight:600;transition:color .15s,background .15s,border-color .15s}.zg-play__tabs:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h):hover{color:var(--ink);border-color:var(--border)}.zg-play__tabs:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h)[aria-pressed=true]{color:var(--coral);background:var(--surface);border-color:var(--coral)}.zg-play__bar:where(.astro-qtdfgg6h){border-bottom:1px solid var(--border-soft);background:var(--surface-2);align-items:center;gap:.5rem;padding:.55rem .9rem;display:flex}.zg-seg:where(.astro-qtdfgg6h){background:var(--surface);border:1px solid var(--border);border-radius:9px;gap:2px;padding:2px;display:inline-flex}.zg-seg:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h){font-family:var(--font-mono);color:var(--faint);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:.25rem .6rem;font-size:11px;font-weight:600;transition:color .15s,background .15s}.zg-seg:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h):hover{color:var(--ink)}.zg-seg:where(.astro-qtdfgg6h) button:where(.astro-qtdfgg6h)[aria-pressed=true]{color:#fff;background:var(--coral)}.zg-play__right:where(.astro-qtdfgg6h){align-items:center;gap:.4rem;min-width:0;margin-left:auto;display:flex}.zg-play__status:where(.astro-qtdfgg6h){font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:11px;overflow:hidden}.zg-play__status:where(.astro-qtdfgg6h)[data-state=ok]{color:var(--teal)}.zg-play__status:where(.astro-qtdfgg6h)[data-state=err]{color:var(--coral)}.zg-play__btn:where(.astro-qtdfgg6h){font-family:var(--font-mono);color:var(--muted);border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:8px;padding:.28rem .6rem;font-size:11px;font-weight:600;transition:border-color .15s,color .15s,background .15s}.zg-play__btn:where(.astro-qtdfgg6h):hover{border-color:var(--coral);color:var(--ink)}.zg-play__btn--run:where(.astro-qtdfgg6h){color:#fff;background:var(--coral);border-color:var(--coral);align-items:center;gap:.4rem;display:inline-flex}.zg-play__btn--run:where(.astro-qtdfgg6h):hover{color:#fff;background:var(--coral-sh);border-color:var(--coral-sh)}.zg-play__btn:where(.astro-qtdfgg6h) kbd:where(.astro-qtdfgg6h){font-family:var(--font-mono);background:#ffffff2e;border-radius:4px;padding:.05em .3em;font-size:10px}.zg-play__hint:where(.astro-qtdfgg6h){color:var(--muted);background:var(--surface);border-bottom:1px solid var(--border-soft);margin:0;padding:.5rem .9rem;font-size:12.5px}.zg-play__hint:where(.astro-qtdfgg6h)[hidden]{display:none}.zg-play__body:where(.astro-qtdfgg6h){grid-template-columns:1fr;display:grid}.zg-play__editor:where(.astro-qtdfgg6h){border-right:1px solid var(--border-soft);overflow:hidden}.zg-play__editor:where(.astro-qtdfgg6h) .cm-editor{height:100%}.zg-play__preview:where(.astro-qtdfgg6h){background:var(--surface);flex-direction:column;min-width:0;display:flex;overflow:hidden}.zg-play__controls:where(.astro-qtdfgg6h){border-bottom:1px solid var(--border-soft);background:var(--surface-2);flex-wrap:wrap;gap:.4rem;padding:.5rem .7rem;display:flex}.zg-play__controls:where(.astro-qtdfgg6h)[hidden]{display:none}.zg-play:where(.astro-qtdfgg6h) .zg-play__ctrl{font-family:var(--font-mono);color:var(--muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:.28rem .6rem;font-size:11px;font-weight:600;transition:border-color .15s,color .15s}.zg-play:where(.astro-qtdfgg6h) .zg-play__ctrl:hover{border-color:var(--coral);color:var(--ink)}.zg-play__grid:where(.astro-qtdfgg6h){flex:1;min-height:0}.zg-play:where(.astro-qtdfgg6h)[data-view=demo] .zg-play__editor:where(.astro-qtdfgg6h),.zg-play:where(.astro-qtdfgg6h)[data-view=demo] .zg-play__preview:where(.astro-qtdfgg6h),.zg-play:where(.astro-qtdfgg6h)[data-view=code] .zg-play__editor:where(.astro-qtdfgg6h),.zg-play:where(.astro-qtdfgg6h)[data-view=code] .zg-play__preview:where(.astro-qtdfgg6h){grid-area:1/1}.zg-play:where(.astro-qtdfgg6h)[data-view=demo] .zg-play__editor:where(.astro-qtdfgg6h),.zg-play:where(.astro-qtdfgg6h)[data-view=code] .zg-play__preview:where(.astro-qtdfgg6h){visibility:hidden}.zg-play:where(.astro-qtdfgg6h)[data-view=code] .zg-play__editor:where(.astro-qtdfgg6h){border-right:none}.zg-play:where(.astro-qtdfgg6h)[data-view=split] .zg-play__body:where(.astro-qtdfgg6h){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.zg-play__noscript:where(.astro-qtdfgg6h){font-family:var(--font-mono);margin:0;padding:1rem;font-size:12px;overflow:auto}@media (width<=860px){.zg-play:where(.astro-qtdfgg6h)[data-view=split] .zg-play__body:where(.astro-qtdfgg6h){grid-template-columns:1fr;height:auto!important}.zg-play:where(.astro-qtdfgg6h)[data-view=split] .zg-play__editor:where(.astro-qtdfgg6h){border-right:none;border-bottom:1px solid var(--border-soft);height:320px}.zg-play:where(.astro-qtdfgg6h)[data-view=split] .zg-play__preview:where(.astro-qtdfgg6h){height:360px}}[data-zg-play-v] .zg-viewport{scrollbar-width:thin}[data-zg-play-v] .zg-viewport::-webkit-scrollbar{width:8px;height:8px}