.playground-container{position:relative;display:flex;flex-direction:row;width:100%;height:500px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:2rem 0;transition:border-color var(--transition)}.playground-editor-pane{flex:0 0 0%;opacity:0;visibility:hidden;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid var(--border);background:rgba(0,0,0,.2);transition:flex-basis .4s cubic-bezier(.25,1,.5,1),opacity .3s ease,visibility .3s ease}[data-theme=light] .playground-editor-pane{background:rgba(0,0,0,.02)}.playground-container.is-editing .playground-editor-pane{flex-basis:50%;opacity:1;visibility:visible}.playground-preview-pane{flex:1;position:relative;display:flex;flex-direction:column;height:100%;min-width:0}.playground-toggle-btn{position:absolute;top:12px;right:12px;z-index:10;display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(var(--bg-rgb),.7);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:6px;color:var(--fg);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.1)}.playground-toggle-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}.playground-toggle-btn svg{width:14px;height:14px;fill:currentColor;transition:transform .3s ease}.playground-container.is-editing .playground-toggle-btn{background:var(--accent);color:#fff;border-color:var(--accent)}.playground-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(0,0,0,.1);border-bottom:1px solid var(--border);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--muted)}[data-theme=light] .playground-header{background:rgba(0,0,0,.03)}.playground-status{display:flex;align-items:center;gap:6px}.playground-status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;transition:background .3s ease,box-shadow .3s ease}.playground-status-dot.compiling{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.playground-code-editor{flex:1;position:relative;overflow:hidden}.playground-code-editor .CodeMirror{height:100%!important;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.85rem;background:transparent!important}.playground-iframe{width:100%;height:100%;border:none;background:#fff}.playground-container .CodeMirror-gutters{background:transparent!important;border-right:1px solid var(--border)!important}.playground-container .CodeMirror-linenumber{color:var(--muted)!important;opacity:.6}@media (max-width:768px){.playground-container{flex-direction:column-reverse;height:600px}.playground-container.is-editing .playground-editor-pane{flex-basis:50%}.playground-editor-pane{border-right:none;border-top:1px solid var(--border)}}