.code-wrapper{background:#0a121eb3;border:1px solid #8fceff1f;border-radius:12px;margin:1.5rem 0;transition:border-color .25s;position:relative;overflow:hidden}.code-wrapper pre{margin:0!important;padding-top:2.8rem!important}.snippet-box .code-wrapper pre{padding-top:.95rem!important}.code-wrapper:hover{border-color:#8fceff40}.code-toolbar{z-index:10;gap:6px;transition:all .22s;display:flex;position:absolute;top:8px;right:8px}@media (hover:hover){.code-toolbar{opacity:0;transform:translateY(-2px)}.code-wrapper:hover .code-toolbar,.code-wrapper:focus-within .code-toolbar{opacity:1;transform:translateY(0)}}.code-btn{color:#def2ffd9;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#101c30f2;border:1px solid #8fceff33;border-radius:6px;align-items:center;gap:6px;padding:5px 10px;font-family:inherit;font-size:.8rem;font-weight:500;transition:all .2s;display:inline-flex}.code-btn:hover{color:#fff;background:#8fceff26;border-color:#8fceff73;transform:translateY(-1px)}.code-btn i{font-size:.85rem}.code-playground{background:#0a121ef2;border:1px solid #00a8ff40;border-radius:12px;flex-direction:column;margin:1.8rem 0;padding:0;animation:.28s cubic-bezier(.16,1,.3,1) playgroundOpen;display:flex;overflow:hidden;box-shadow:0 8px 32px #00000059}.playground-header{background:#122032cc;border-bottom:1px solid #8fceff26;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.playground-title{color:#00a8ff;letter-spacing:.5px;text-transform:uppercase;align-items:center;gap:8px;font-size:.85rem;font-weight:600;display:flex}.playground-title i{filter:drop-shadow(0 0 4px #00a8ff66);font-size:.95rem}.playground-actions{gap:8px;display:flex}.playground-btn{color:#def2ffd9;cursor:pointer;background:0 0;border:1px solid #def2ff26;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:500;transition:all .2s;display:inline-flex}.playground-btn:hover{color:#fff;background:#ffffff0d;border-color:#ffffff59}.playground-btn.btn-close{color:#ff4757;border-color:#ff475740}.playground-btn.btn-close:hover{color:#fff;background:#ff475726;border-color:#ff47578c}.playground-tabs{background:#12203280;border-bottom:1px solid #8fceff26;display:none}.playground-tab{font:inherit;color:#def2ff99;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1 1 0;padding:10px 12px;font-size:.8rem;font-weight:700;transition:color .2s,border-color .2s}.playground-tab.active{color:#00a8ff;border-bottom-color:#00a8ff}.playground-body{background:#0d111a;flex-direction:column;display:flex}.playground-editor-pane{border-bottom:1px solid #8fceff1a;border-right:none;flex-direction:column;height:320px;display:flex;position:relative}.playground-editor{color:#e0e6f0;resize:none;box-sizing:border-box;background:#0f1624;border:none;outline:none;flex:1;width:100%;height:100%;padding:14px;font-family:Consolas,Monaco,Fira Code,monospace;font-size:.92rem;line-height:1.5}@media (width<=768px){.playground-editor{font-size:16px}}.playground-editor:focus{background:#111a2b}.playground-lang-tag{text-transform:uppercase;color:#fff6;pointer-events:none;background:#0000004d;border-radius:4px;padding:2px 6px;font-size:.7rem;font-weight:600;position:absolute;bottom:8px;right:8px}.playground-preview-pane{background:#fff;flex-direction:column;height:120px;display:flex;position:relative}.playground-iframe{background:#fff;border:none;width:100%;height:100%}@media (width<=768px){.playground-tabs{display:flex}.playground-editor-pane,.playground-preview-pane{height:min(62vh,480px);display:none}.code-playground.pane-editor .playground-editor-pane,.code-playground.pane-preview .playground-preview-pane{display:flex}}@keyframes playgroundOpen{0%{opacity:0;transform:scale(.985)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (width<=600px){.playground-btn span{display:none}.playground-btn{gap:0;padding:6px 10px}.playground-header{padding:8px 12px}.playground-title{font-size:.8rem}}@media (prefers-reduced-motion:reduce){.code-playground{animation:none}}