#playground-root{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}#playground-root .pg-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}#playground-root .pg-btn{padding:.4rem 1rem;border:1px solid var(--sl-color-gray-4);border-radius:.375rem;background:var(--sl-color-gray-6);color:var(--sl-color-white);cursor:pointer;font-size:.875rem;font-family:inherit}#playground-root .pg-btn-primary{background:var(--sl-color-accent);color:var(--sl-color-black);border-color:var(--sl-color-accent);font-weight:600}#playground-root .pg-btn-primary:hover{opacity:.9}#playground-root .pg-status{font-size:.8rem;color:var(--sl-color-gray-2)}#playground-root .pg-library{display:flex;flex-direction:column;gap:.4rem}#playground-root .pg-categories{display:flex;gap:.25rem;flex-wrap:wrap}#playground-root .pg-cat-btn{padding:.3rem .7rem;border:1px solid var(--sl-color-gray-4);border-radius:999px;background:var(--sl-color-gray-6);color:var(--sl-color-gray-2);cursor:pointer;font-size:.75rem;font-family:inherit;transition:all .15s}#playground-root .pg-cat-btn:hover{color:var(--sl-color-white);border-color:var(--sl-color-gray-3)}#playground-root .pg-cat-btn.active{background:var(--sl-color-accent);color:var(--sl-color-black);border-color:var(--sl-color-accent);font-weight:600}#playground-root .pg-examples-grid{min-height:2rem}#playground-root .pg-cat-panel{display:none;gap:.25rem;flex-wrap:wrap}#playground-root .pg-cat-panel.active{display:flex}#playground-root .pg-example-btn{padding:.25rem .6rem;border:1px solid var(--sl-color-gray-5);border-radius:.25rem;background:transparent;color:var(--sl-color-gray-2);cursor:pointer;font-size:.75rem;font-family:inherit;transition:all .15s}#playground-root .pg-example-btn:hover{background:var(--sl-color-gray-5);color:var(--sl-color-white)}#playground-root .pg-example-btn.active{background:var(--sl-color-gray-5);color:var(--sl-color-white);border-color:var(--sl-color-accent)}#playground-root .pg-editors{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}@media(max-width:768px){#playground-root .pg-editors{grid-template-columns:1fr}}#playground-root .pg-panel{display:flex;flex-direction:column;min-width:0}#playground-root .pg-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--sl-color-gray-2);padding:.25rem 0;margin:0}#playground-root .pg-editor{height:350px;border:1px solid var(--sl-color-gray-4);border-radius:.375rem;overflow:hidden}#playground-root .pg-io{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}@media(max-width:768px){#playground-root .pg-io{grid-template-columns:1fr}}#playground-root .pg-io-panel{min-height:100px}#playground-root .pg-textarea{width:100%;min-height:80px;padding:.5rem;border:1px solid var(--sl-color-gray-4);border-radius:.375rem;background:var(--sl-color-gray-6);color:var(--sl-color-white);font-family:var(--sl-font-mono);font-size:.8125rem;resize:vertical;box-sizing:border-box}#playground-root .pg-pre{width:100%;min-height:80px;padding:.5rem;border:1px solid var(--sl-color-gray-4);border-radius:.375rem;background:var(--sl-color-gray-6);color:var(--sl-color-white);font-family:var(--sl-font-mono);font-size:.8125rem;margin:0;overflow-x:auto;white-space:pre-wrap;box-sizing:border-box}#playground-root .pg-error{color:#f87171}.sl-markdown-content #playground-root,.sl-markdown-content #playground-root *{margin-top:0;margin-bottom:0}.sl-markdown-content #playground-root .pg-editors,.sl-markdown-content #playground-root .pg-io,.sl-markdown-content #playground-root .pg-toolbar,.sl-markdown-content #playground-root .pg-panel,.sl-markdown-content #playground-root .pg-editor,.sl-markdown-content #playground-root .pg-io-panel{display:revert}.sl-markdown-content #playground-root .pg-editors,.sl-markdown-content #playground-root .pg-io{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important}.sl-markdown-content #playground-root .pg-toolbar{display:flex!important}.sl-markdown-content #playground-root .pg-library{display:flex!important;flex-direction:column!important}.sl-markdown-content #playground-root .pg-categories,.sl-markdown-content #playground-root .pg-cat-panel.active{display:flex!important;flex-wrap:wrap!important}.sl-markdown-content #playground-root .pg-panel{display:flex!important;flex-direction:column!important;min-width:0!important}@media(max-width:768px){.sl-markdown-content #playground-root .pg-editors,.sl-markdown-content #playground-root .pg-io{grid-template-columns:1fr!important}}