.code-playground{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin:20px 0;overflow:hidden;box-shadow:0 2px 8px #0000001a}.playground-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex}.playground-header h2{margin:0;font-size:1.5rem;font-weight:600}.playground-controls{flex-wrap:wrap;gap:8px;display:flex}.control-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.control-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.control-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.run-btn{background:#28a745}.run-btn:hover{background:#218838}.reset-btn{background:#dc3545}.reset-btn:hover{background:#c82333}.playground-content{grid-template-columns:1fr 1fr;gap:0;min-height:500px;display:grid}.editor-section{border-right:1px solid #e1e4e8}.editor-tabs{background:#f6f8fa;border-bottom:1px solid #e1e4e8;display:flex}.tab-btn{cursor:pointer;color:#586069;background:0 0;border:none;border-bottom:2px solid #0000;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s}.tab-btn:hover{color:#24292e;background:#f1f3f4}.tab-btn.active{color:#0366d6;background:#fff;border-bottom-color:#0366d6}.editor-container{height:400px}.preview-section{flex-direction:column;display:flex}.preview-header{background:#f6f8fa;border-bottom:1px solid #e1e4e8;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.preview-header h3{color:#24292e;margin:0;font-size:16px;font-weight:600}.preview-run-btn{color:#24292e;cursor:pointer;background:#fff;border:1px solid #d1d5da;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.preview-run-btn:hover{background:#f6f8fa;border-color:#0366d6}.preview-run-btn:disabled{opacity:.6;cursor:not-allowed}.preview-container{background:#fff;flex:1;position:relative}.preview-frame{background:#fff;border:none;width:100%;height:100%}@media (max-width:768px){.playground-content{grid-template-columns:1fr}.editor-section{border-bottom:1px solid #e1e4e8;border-right:none}.playground-header{flex-direction:column;align-items:stretch}.playground-controls{justify-content:center}.editor-container{height:300px}}@media (prefers-color-scheme:dark){.code-playground{background:#1a1a1a;border-color:#404040}.editor-tabs{background:#2d2d2d;border-color:#404040}.tab-btn{color:#c9d1d9}.tab-btn:hover{color:#fff;background:#3c3c3c}.tab-btn.active{color:#58a6ff;background:#1a1a1a;border-bottom-color:#58a6ff}.preview-header{background:#2d2d2d;border-color:#404040}.preview-header h3{color:#c9d1d9}.preview-run-btn{color:#c9d1d9;background:#2d2d2d;border-color:#404040}.preview-run-btn:hover{background:#3c3c3c;border-color:#58a6ff}.preview-container{background:#1a1a1a}}