.playground:where(.astro-6ghyjmta){--dxp-pg-bg:var(--tng-color-surface-neutral-subtle);--dxp-pg-fg:var(--tng-color-foreground-neutral-default);--dxp-pg-gutter:var(--tng-color-foreground-neutral-subtle);--dxp-pg-selection:var(--tng-color-fill-neutral-soft);--dxp-pg-font-size:var(--sl-text-sm);--dxp-pg-tag:#be2f2c;--dxp-pg-attribute:#9039c9;--dxp-pg-punctuation:#256f74;--dxp-pg-literal:#566d35;inset:calc(var(--sl-nav-height) + var(--tng-spacing-xl)) var(--tng-spacing-xl) var(--tng-spacing-xl);font-family:var(--sl-font-system);background:var(--tng-color-background-neutral-default);border:var(--tng-stroke-sm) solid var(--tng-color-border-neutral-subtle);border-radius:var(--tng-radius-md);grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:minmax(320px,2fr) minmax(0,3fr);display:grid;position:fixed;overflow:hidden}.tabs:where(.astro-6ghyjmta),.toolbar:where(.astro-6ghyjmta){border-block-end:var(--tng-stroke-sm) solid var(--tng-color-border-neutral-subtle);grid-row:1}.tabs:where(.astro-6ghyjmta){padding-inline:var(--tng-spacing-lg);border-inline-end:var(--tng-stroke-sm) solid var(--tng-color-border-neutral-subtle);grid-column:1}.toolbar:where(.astro-6ghyjmta){gap:var(--tng-spacing-sm);padding:var(--tng-spacing-sm) var(--tng-spacing-lg);flex-wrap:wrap;grid-column:2;align-items:center;display:flex}.actions:where(.astro-6ghyjmta){gap:var(--tng-spacing-xs);margin-inline-start:auto;display:flex}.panes:where(.astro-6ghyjmta){display:none}.notice:where(.astro-6ghyjmta){padding:var(--tng-spacing-sm) var(--tng-spacing-lg);font-size:var(--sl-text-sm);color:var(--tng-color-foreground-neutral-default);background:var(--tng-color-fill-warning-subtle);border-block-end:var(--tng-stroke-sm) solid var(--tng-color-border-warning-default);grid-area:2/1/auto/-1;margin:0;&[hidden]{display:none}}.editor:where(.astro-6ghyjmta){background:var(--dxp-pg-bg);border-inline-end:var(--tng-stroke-sm) solid var(--tng-color-border-neutral-subtle);grid-area:3/1;min-block-size:0;overflow:auto}.source:where(.astro-6ghyjmta){block-size:100%}.playground:where(.astro-6ghyjmta)[data-lang=html] .is-css:where(.astro-6ghyjmta),.playground:where(.astro-6ghyjmta)[data-lang=css] .is-html:where(.astro-6ghyjmta){display:none}.preview:where(.astro-6ghyjmta){background:repeating-conic-gradient(var(--tng-color-surface-neutral-subtle) 0 25%, var(--tng-color-background-neutral-default) 0 50%) 0 0 / 16px 16px;grid-area:3/2;min-block-size:0;position:relative;overflow:auto hidden}.frame:where(.astro-6ghyjmta){background:var(--tng-color-background-neutral-default);block-size:100%;position:relative;& iframe{border:0;block-size:100%;inline-size:100%;display:block}}.playground:where(.astro-6ghyjmta)[data-width=fixed] .frame:where(.astro-6ghyjmta){border-inline-end:var(--tng-stroke-sm) solid var(--tng-color-border-neutral-subtle)}.grip:where(.astro-6ghyjmta){touch-action:none;cursor:ew-resize;inline-size:12px;position:absolute;inset-block:0;inset-inline-end:0;&:after{content:"";background:var(--tng-color-border-neutral-default);border-radius:var(--tng-radius-sm);block-size:40px;inline-size:4px;position:absolute;inset-block-start:50%;inset-inline-start:4px;translate:0 -50%}&:hover:after,&:focus-visible:after{background:var(--tng-color-foreground-neutral-default)}}.readout:where(.astro-6ghyjmta){font-variant-numeric:tabular-nums;position:absolute;inset-block-start:var(--tng-spacing-sm);inset-inline-end:var(--tng-spacing-xl)}.playground:where(.astro-6ghyjmta)[data-width=full] .readout:where(.astro-6ghyjmta){display:none}@media (width<760px){.playground:where(.astro-6ghyjmta){inset-inline:var(--tng-spacing-lg);grid-template-rows:auto auto auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.toolbar:where(.astro-6ghyjmta){grid-column:1}.panes:where(.astro-6ghyjmta){padding-inline:var(--tng-spacing-lg);grid-row:2;display:flex}.notice:where(.astro-6ghyjmta){grid-row:3}.tabs:where(.astro-6ghyjmta){border-inline-end:0;grid-row:4}.editor:where(.astro-6ghyjmta),.preview:where(.astro-6ghyjmta){border:0;grid-area:5/1}.playground:where(.astro-6ghyjmta)[data-view=code] .preview:where(.astro-6ghyjmta),.playground:where(.astro-6ghyjmta)[data-view=preview] .editor:where(.astro-6ghyjmta),.playground:where(.astro-6ghyjmta)[data-view=preview] .tabs:where(.astro-6ghyjmta){display:none}}:is(html,body):has([data-playground]){scrollbar-gutter:auto}main footer{display:none}