:root{--primary-color: #20638f;--secondary-color: #1E1E1E;--dark-color: #123850;--light-color: #e8f4fc;--lighter-blue: #f0f8ff;--accent-blue: #5dade2;--text-color: #2c3e50;--code-bg: #eef7fd}body{margin:0}.playground-container{display:flex;flex-direction:column;height:100vh;background-color:#f0f4f8;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.playground-header{justify-content:space-between;background-color:var(--secondary-color);color:#fff;padding:2px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center}.playground-header h1{margin:0;font-size:1rem;font-weight:700}.playground-content{display:flex;flex:1;overflow:hidden}.left-panel{display:flex;flex-direction:column;width:50%}.right-panel{width:50%}.editor-container{display:flex;flex-direction:column;height:50%}.editor{height:100%}.right-panel{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;height:32px;background-color:var(--secondary-color);color:var(--light-color);padding:4px;gap:8px}.editor-actions{display:flex;justify-content:space-between;align-items:center;background:transparent;color:var(--light-color);padding:4px;gap:4px}.editor-header h2{font-size:.8rem;font-weight:500;margin:0 0 0 4px;padding:4px}.editor-content{flex:1;overflow:hidden}.button{background-color:transparent;color:#3182ce;border:none;padding:4px 12px;font-size:.875rem;cursor:pointer;transition:background-color .2s;font-weight:600}.run-button{padding:4px 16px}.button:hover{color:#88acd2;font-weight:600}.format-button:disabled,.run-button:disabled{background-color:#a0aec0;cursor:not-allowed}.result-container{height:100%}.loading-message,.empty-message{padding:16px;color:#718096;background-color:var(--secondary-color);height:100%}:root{color-scheme:light dark;--accent-blue: light-dark(#4299e1, #5dade2);--primary-color: light-dark(#3182ce, #3a8ec5);--secondary-color: light-dark(#f7fafc, #2a2a2a);--dark-color: light-dark(#2c5282, #1a4c6b);--light-color: light-dark(#ffffff, #e8f4fc);--lighter-blue: light-dark(#ebf8ff, #1e2a38);--text-color: light-dark(#2d3748, #e2e8f0);--code-bg: light-dark(#f7fafc, #2d3748);--select-fg: light-dark(#333, #d4d4d4);--select-bg: light-dark(#f5f5f5, #2d2d30);--border: light-dark(#ccc, #3e3e42)}.playground-header{background-color:light-dark(var(--dark-color),var(--secondary-color));color:#fff}.editor-header{background-color:light-dark(#edf2f7,var(--secondary-color));color:light-dark(var(--text-color),var(--light-color))}.loading-message,.empty-message{color:light-dark(#718096,#a0aec0);background-color:light-dark(#f7fafc,var(--secondary-color))}.logo-icon{width:32px;height:32px;background-color:transparent}@media (max-width: 1024px) and (min-width: 769px){.editor-header{height:auto;min-height:32px;padding:4px 2px}.editor-actions{flex-wrap:wrap;gap:2px;padding:2px}.dropdown{padding:4px 8px;font-size:12px;margin-right:4px}.button{padding:4px 8px;font-size:.75rem;white-space:nowrap}.run-button{padding:4px 12px;font-weight:700}.label{font-size:12px;margin-left:2px}.label div{white-space:nowrap}.editor-header h2{font-size:.75rem}.editor-header.code,.editor-header.output{height:auto;min-height:40px}}@media (max-width: 768px){.left-panel,.right-panel{width:100%}.playground-content{flex-direction:column}.editor-container{height:auto;min-height:250px}.editor-content{min-height:150px}.editor-header{flex-wrap:wrap}.editor-header.code,.editor-header.output{height:auto}.editor-header h2{font-size:.75rem}.editor-actions{justify-content:flex-start;flex-wrap:wrap;padding:2px}.format-button,.run-button{padding:3px 8px;font-size:.75rem}}.dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:4px;padding:6px 12px;font-size:13px;cursor:pointer;margin-right:8px;background-color:var(--select-bg);border:1px solid var(--border);color:var(--select-fg)}.label{margin-left:4px;display:flex;align-items:center;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.tab-container{display:flex;gap:0}.tab{background-color:transparent;border:none;padding:8px 16px;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--light-color);border-bottom:2px solid transparent;transition:all .2s}.tab:hover{background-color:#ffffff1a}.tab.active{color:var(--accent-blue);border-bottom-color:var(--accent-blue);background-color:#ffffff0d}