.playground{--pg-keyword:var(--nb-code-keyword);--pg-string:var(--nb-code-string);--pg-number:var(--nb-code-string);--pg-type:var(--nb-code-type);max-width:1600px;margin:0 auto;padding:24px 24px 20px}.pg-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;display:flex}.pg-heading h1{letter-spacing:-.03em;color:var(--nb-foreground);font-size:36px;font-weight:500;line-height:1.1}.pg-heading h1 span{color:var(--nb-danger)}.pg-heading p{color:var(--nb-muted-foreground);margin-top:7px;font-size:15px}.pg-tour{align-items:center;gap:7px;font-size:13px;display:inline-flex}.playground svg{flex-shrink:0;width:16px;height:16px}.playground button,.playground select,.playground input{font:inherit}.playground button{cursor:pointer}.playground button:disabled{opacity:.4;cursor:default}.playground button:focus-visible,.playground a:focus-visible,.playground select:focus-visible,.playground input:focus-visible{outline:2px solid var(--nb-info);outline-offset:3px}.pg-workspace{grid-template-columns:190px minmax(0,1fr);gap:24px;display:grid}.playground[data-examples-collapsed=true] .pg-workspace{grid-template-columns:minmax(0,1fr)}.playground[data-examples-collapsed=true] .pg-examples{display:none}.playground[data-examples-collapsed=true] .pg-mobile-examples{display:flex}.pg-examples{padding-top:4px}.pg-sidebar-label{margin-bottom:24px;font-size:13px;font-weight:500}.pg-example-group{margin-bottom:26px}.pg-example-group h2{font:400 10.5px var(--nb-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nb-muted-foreground);margin:0 0 8px 10px}.pg-example-group button{text-align:left;width:100%;color:var(--nb-muted-foreground);border-radius:5px;justify-content:space-between;align-items:center;gap:8px;margin-block:2px;padding:9px 10px;font-size:13px;display:flex}.pg-example-group button svg{opacity:0;width:13px}.pg-example-group button:hover{background:var(--nb-card);color:var(--nb-foreground)}.pg-example-group button[aria-pressed=true]{background:var(--nb-accent);color:var(--nb-link);font-weight:500}.pg-example-group button[aria-pressed=true] svg{opacity:1}.pg-local{color:var(--nb-muted-foreground);align-items:flex-start;gap:8px;max-width:190px;padding:12px 10px;font-size:11px;line-height:1.6;display:flex}.pg-main{min-width:0}.pg-example-heading{justify-content:space-between;align-items:flex-start;gap:20px;min-height:72px;display:flex}.pg-example-heading h2{letter-spacing:-.3px;font-size:18px;font-weight:500}.pg-example-heading p{color:var(--nb-muted-foreground);max-width:66ch;margin:5px 0 16px;font-size:13px;line-height:1.6}.pg-actions{flex-shrink:0;gap:6px;display:flex}.pg-actions button{border-radius:5px;align-items:center;gap:7px;padding:7px 11px;font-size:12px;display:inline-flex}.pg-actions button:hover:not(:disabled){background:var(--nb-accent)}.pg-actions .pg-share{border:1px solid var(--nb-border-strong)}.pg-toolbar{top:var(--nb-header-height);z-index:10;border:1px solid var(--nb-border-strong);background:var(--nb-background);border-bottom:0;border-radius:7px 7px 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:8px 10px;display:flex;position:sticky}.pg-tool-actions{gap:4px;display:flex}.pg-tool-actions button{border-radius:4px;align-items:center;gap:6px;padding:6px 8px;font-size:12px;display:inline-flex}.pg-tool-actions button:hover:not(:disabled),.pg-tool-actions button[aria-pressed=true]{background:var(--nb-accent)}.pg-preview-status{flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:11px;display:flex}.pg-preview-note{color:var(--nb-muted-foreground)}.pg-preview-status [data-status]{padding:5px 0}.pg-preview-status [data-status]:disabled{opacity:1}.pg-preview-status [data-status]:not(:disabled){text-underline-offset:3px;text-decoration:underline}.pg-editors{grid-template-columns:minmax(0, var(--pg-source-width,1fr)) 9px minmax(0, var(--pg-output-width,1fr));border:1px solid var(--nb-border-strong);border-radius:0 0 7px 7px;display:grid;overflow:hidden}.pg-pane{min-width:0}.pg-splitter{cursor:col-resize;touch-action:none;background:var(--nb-card);border-inline:1px solid var(--nb-border);position:relative}.pg-splitter:after{content:"";background:var(--nb-border-strong);border-radius:2px;width:3px;height:28px;position:absolute;top:calc(50% - 14px);left:2px}.pg-splitter:hover:after,.pg-splitter:focus-visible:after,.playground[data-resizing] .pg-splitter:after{background:var(--nb-info)}.pg-splitter:focus-visible{outline:2px solid var(--nb-info);outline-offset:-2px}.playground[data-resizing]{user-select:none;cursor:col-resize}.pg-filebar{background:var(--nb-card);border-bottom:1px solid var(--nb-border);justify-content:space-between;align-items:center;gap:12px;height:45px;padding:0 15px;display:flex}.pg-filename{font:12px var(--nb-font-mono);align-items:center;gap:10px;display:flex}.pg-language{font:600 9px var(--nb-font-sans);letter-spacing:.3px;color:var(--nb-info)}.pg-language-ts{color:var(--nb-muted-foreground)}.pg-pane-label{color:var(--nb-muted-foreground);font-size:11px}.pg-filebar button{color:var(--nb-muted-foreground);border-radius:4px;padding:6px;display:flex}.pg-filebar button:hover:not(:disabled){background:var(--nb-accent);color:var(--nb-foreground)}.pg-editor{min-width:0;height:clamp(280px,100dvh - 410px,680px)}.pg-editor:focus-within{box-shadow:inset 0 0 0 1px var(--nb-info)}.pg-editor-footer{height:35px;color:var(--nb-muted-foreground);border-top:1px solid var(--nb-border);justify-content:space-between;align-items:center;gap:10px;padding:0 15px;font-size:10px;display:flex}.pg-effect{cursor:pointer;align-items:center;gap:7px;display:flex}.pg-effect[hidden]{display:none}.pg-editor-footer [data-source-size]{margin-left:auto}.pg-effect input{accent-color:var(--nb-info)}.pg-results{z-index:30;border:1px solid var(--nb-border-strong);background:var(--nb-background);border-radius:7px;width:min(520px,100vw - 48px);padding:10px 12px;position:fixed;bottom:24px;right:24px;box-shadow:0 8px 28px #0000001f}.pg-results[hidden]{display:none}.pg-results-header{color:var(--nb-muted-foreground);justify-content:space-between;align-items:center;gap:10px;font-size:11px;display:flex}.pg-results-header button{border-radius:4px;padding:4px;display:flex}.pg-results-header button:hover{background:var(--nb-accent);color:var(--nb-foreground)}[data-status]{align-items:center;gap:7px;font-weight:500;display:flex}[data-status]:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}[data-state=error]{color:var(--nb-danger)}[data-state=pending],[data-state=neutral]{color:var(--nb-muted-foreground)}.pg-diagnostics{color:var(--nb-muted-foreground);max-height:min(160px,25dvh);margin-top:5px;font-size:12px;line-height:1.65;overflow:auto}.pg-diagnostic{text-align:left;width:100%;color:var(--nb-danger);background:var(--nb-danger-muted);border-radius:4px;margin-block:3px;padding:6px 8px;display:block}.pg-diagnostic:hover{text-decoration:underline}.pg-hint{color:var(--nb-muted-foreground);align-items:flex-start;gap:9px;padding:17px 1px 0;font-size:12px;line-height:1.7;display:flex}.pg-hint svg{margin-top:2px}.pg-hint strong{color:var(--nb-foreground);font-weight:500}.pg-hint a{white-space:nowrap;text-underline-offset:3px;margin-left:5px;text-decoration:underline}.pg-feedback{color:var(--nb-muted-foreground);min-height:26px;padding-top:8px;font-size:12px}.pg-share-url{background:var(--nb-card);border:1px solid var(--nb-border);border-radius:4px;width:100%;padding:8px}.pg-footer{border-top:1px solid var(--nb-border);color:var(--nb-muted-foreground);justify-content:space-between;gap:20px;margin-top:14px;padding-top:16px;font-size:11px;line-height:1.7;display:flex}.pg-footer p:first-child{max-width:90ch}.pg-footer p:last-child{white-space:nowrap}.pg-footer a{text-underline-offset:3px;text-decoration:underline}.pg-mobile-examples{align-items:center;gap:12px;margin-bottom:16px;font-size:12px;display:none}.pg-mobile-examples select{border:1px solid var(--nb-border-strong);background:var(--nb-card);border-radius:5px;flex:1;min-width:0;max-width:360px;padding:8px}.pg-loading,.pg-noscript{background:var(--nb-card);padding:15px;font-size:13px}.pg-loading[hidden]{display:none}.playground .twp-keyword,.playground .twp-storage{color:var(--pg-keyword)}.playground .twp-string,.playground .twp-template,.playground .twp-regex{color:var(--pg-string)}.playground .twp-number,.playground .twp-boolean{color:var(--pg-number)}.playground .twp-type,.playground .twp-type_name,.playground .twp-class_name,.playground .twp-type_builtin{color:var(--pg-type)}.playground .twp-comment{color:var(--nb-muted-foreground);font-style:italic}.playground .twp-operator,.playground .twp-punctuation{color:var(--nb-muted-foreground)}.pg-severity-error{--pg-diagnostic-color:var(--nb-danger)}.pg-severity-warning{--pg-diagnostic-color:var(--nb-warning)}.pg-severity-hint{--pg-diagnostic-color:var(--nb-info)}.pg-squiggle{text-decoration:underline wavy var(--pg-diagnostic-color);text-underline-offset:3px}.pg-diagnostic-line{box-shadow:inset 2px 0 var(--pg-diagnostic-color)}.pg-gutter-marker{color:var(--pg-diagnostic-color);cursor:help;font-weight:700}.playground .cm-gutters .pg-diagnostic-gutter{min-width:14px}.playground .pg-diagnostic-gutter .cm-gutterElement{padding:0 3px}@media (width<=1100px){.playground{padding-inline:22px}.pg-workspace{grid-template-columns:180px minmax(0,1fr);gap:18px}.pg-example-heading{flex-wrap:wrap;gap:0;padding-bottom:12px}.pg-example-heading p{margin-bottom:9px}.pg-footer{flex-direction:column;gap:5px}}@media (width<=800px){.playground{padding:24px 16px 20px}.pg-heading{margin-bottom:24px}.pg-heading h1{font-size:28px}.pg-heading p{font-size:13px}.pg-workspace{grid-template-columns:minmax(0,1fr)}.pg-examples{display:none}.pg-mobile-examples{display:flex}.pg-mobile-examples select{max-width:none}.pg-example-heading{justify-content:space-between}.pg-editors{grid-template-columns:minmax(0,1fr)}.pg-splitter,.pg-tool-actions [data-toggle-examples]{display:none}.pg-toolbar{gap:4px}.pg-preview-status{justify-content:space-between;width:100%}.pg-output-pane{border-left:0;border-top:1px solid var(--nb-border-strong)}.pg-editor{height:340px}.pg-output-pane .pg-editor{height:300px}.pg-pane-label{display:none}.pg-results{right:16px;bottom:max(16px, env(safe-area-inset-bottom));width:calc(100vw - 32px)}.pg-actions{margin-top:3px}.pg-footer p:last-child{white-space:normal}}@media (forced-colors:active){.playground [class*=twp-]{color:canvastext}.pg-example-group button[aria-pressed=true]{outline:1px solid highlight}}.playground .cm-line.pg-lit{background:var(--nb-selected);box-shadow:inset 2px 0 0 var(--nb-primary)}.playground .pg-linking .cm-line:not(.pg-lit){opacity:.4}.playground .cm-line{transition:opacity .1s,background-color .1s}