.playground{max-width:950px;margin:2rem auto}.playground-interactive .playground-header{gap:.25rem;width:100%;height:3rem;display:flex}.playground-interactive .playground-header .spacer{flex-grow:1}.playground-interactive .playground-content{border-radius:2rem;gap:.25rem;height:600px;margin-top:.25rem;display:flex;overflow:hidden}.playground-button{--theme:var(--background-lighter);box-sizing:border-box;background:var(--theme);text-wrap:nowrap;cursor:pointer;border-radius:2rem;justify-content:center;align-items:center;gap:.5rem;height:100%;padding:.5rem 1rem;display:flex}.playground-button[data-active=true]{--theme:var(--color)}.playground-button:hover{background:hsl(from var(--theme) h s calc(l + 7))}.playground-button:active{background:hsl(from var(--theme) h s calc(l + 14))}.playground-placeholder{background:var(--background-lighter);max-width:950px;height:600px;color:var(--foreground-secondary);text-align:center;border-radius:2rem;justify-content:center;align-items:center;margin:2rem auto;padding:2rem;display:flex}@media (max-width:880px){.playground-interactive{display:none}}@media (min-width:881px){.playground-placeholder{display:none}}
.text-editor-wrap{font-family:var(--font-mono);width:100%;height:100%;font-size:14px;line-height:1.6;position:relative}.text-editor-wrap ::-webkit-scrollbar{display:none}.text-editor-highlight{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;font:inherit;box-sizing:border-box;color:#fff;tab-size:4;margin:0;padding:2rem;position:absolute;inset:0;overflow:hidden}.text-editor{caret-color:#fff;width:100%;height:100%;font:inherit;box-sizing:border-box;resize:none;color:#0000;tab-size:4;background:0 0;border:none;outline:none;padding:2rem;position:absolute;inset:0}.tok-key{color:#d46262}.tok-str{color:#9ab669}.tok-num{color:#dd893a}.tok-bool,.tok-null{color:#965ad8}.tok-punct{color:#ccc}
section#playground h1{letter-spacing:-.025rem}section#playground .playground{max-width:100%}section#playground .info{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}section#playground .info h2{letter-spacing:-.025rem;font-size:1.75rem}section#playground .info h2:not(:first-child){margin-top:2rem}section#playground .info p{margin:.5rem 0}section#playground .info .part{border-radius:2rem;flex:1;padding:1.5rem 2rem}section#playground .info .about{background:var(--red)}section#playground .info .features{background:var(--background-lighter);grid-row:span 2/span 2}section#playground .info .newsletter{background:var(--background-lighter);grid-row-start:2}section#playground .info .newsletter form{margin-top:1rem}section#playground[data-valid-json=false] .playground-content{background:#471414;outline:1px solid #db0808b0}section#playground .playground-content{background:var(--background-lighter);transition:background .3s}section#playground .playground-content .playground-part.left{flex:1}section#playground .playground-content .playground-part.right{--RPP-BACKGROUND:#303030;--RPP-INPUT-BG:#3a3a3a;--RPP-INPUT-HOVER:#444;--RPP-INPUT-ACTIVE:#4e4e4e;--RPP-INPUT-FG:#e0e0e0;--RPP-INPUT-BORDER:#ffffff14;--RPP-BUTTON-BG:#444;--RPP-BUTTON-HOVER:#4e4e4e;--RPP-BUTTON-ACTIVE:#5a5a5a;--RPP-BUTTON-FG:#e0e0e0;--RPP-BUTTON-BORDER:#ffffff1c;--RPP-BORDER-RADIUS-S:7px;--RPP-BORDER-RADIUS-M:10px;--RPP-BORDER-RADIUS-L:16px;--RPP-BORDER:#3d3d3d;border-radius:1rem;width:325px;margin:1rem;overflow:hidden;box-shadow:0 0 1rem #00000008}section#playground .footnote{text-align:center}@media (min-width:768px){section#playground h1{margin-top:3rem;font-size:4rem}}@media (max-width:768px){section#playground .info{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(1,1fr)}section#playground .info .features{grid-row:span 2/span 2}section#playground .info .newsletter{grid-row-start:4}}