.playground-container{max-width:1200px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:5rem}@media (max-width: 768px){.playground-container{grid-template-columns:1fr}}.editor-pane,.preview-pane{background:#1e1e24;border-radius:8px;border:1px solid #2d2d35;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 25px #00000080}.pane-header{background:#1a1a1e;padding:12px 20px;font-size:.9rem;font-weight:600;color:#a0aec0;border-bottom:1px solid #2d2d35;display:flex;justify-content:space-between;align-items:center}.editor-textarea{width:100%;height:400px;background:transparent;border:none;color:#e2e8f0;font-family:var(--font-mono);font-size:.9rem;padding:20px;resize:vertical;outline:none;line-height:1.5}.preview-content{padding:30px;flex-grow:1;background:#fff;color:#333;overflow-y:auto}.preview-content form{display:flex;flex-direction:column;gap:15px}.preview-content input,.preview-content textarea{width:100%;padding:10px 15px;border:1px solid #cbd5e0;border-radius:4px;font-family:inherit;font-size:1rem}.preview-content button{background:#4facfe;color:#fff;border:none;padding:12px 20px;border-radius:4px;font-weight:600;cursor:pointer;transition:background .2s}.preview-content button:hover{background:#3197f6}