/* Interactive HTML/CSS/JS playground */
.kt-lab{--lab-bg:#101115;--lab-panel:#17191f;--lab-border:#30333b;--lab-text:#f5f5f7;background:var(--lab-bg);color:var(--lab-text);border:1px solid var(--lab-border);border-radius:20px;overflow:hidden;margin:2rem 0;box-shadow:0 18px 55px rgba(0,0,0,.13)}
.kt-lab-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px 18px}.kt-lab-heading h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:.35rem 0;color:#fff}.kt-lab-heading p{margin:0;color:#a8abb5;font-size:.94rem}.kt-live-pill{white-space:nowrap;border:1px solid #3d3e45;border-radius:99px;padding:8px 11px;color:#ff7d84;font-size:.66rem;letter-spacing:.09em;font-weight:800}
.kt-lab-tabs{display:flex;gap:5px;padding:0 22px;border-bottom:1px solid var(--lab-border);background:#14151a}.kt-lab-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#a6a8b2;padding:14px 17px;font:700 .83rem/1 inherit;cursor:pointer}.kt-lab-tabs button.is-active{color:#fff;border-bottom-color:#ff2837}
.kt-lab-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:320px}.kt-editor-pane,.kt-preview-pane{min-width:0;display:flex;flex-direction:column}.kt-editor-pane{border-right:1px solid var(--lab-border);background:#0d0e12}.kt-editor-toolbar,.kt-preview-toolbar{height:42px;display:flex;align-items:center;gap:12px;padding:0 15px;background:#1a1c22;border-bottom:1px solid #2b2d35;color:#b5b7c0;font-size:.76rem}.kt-editor-toolbar>span{display:flex;gap:5px}.kt-editor-toolbar i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.kt-editor-toolbar i:nth-child(2){background:#febc2e}.kt-editor-toolbar i:nth-child(3){background:#28c840}.kt-editor-toolbar strong{flex:1;color:#e3e4e8;font-weight:600}.kt-editor-toolbar button{border:1px solid #393c46;background:#22252d;color:#e8e8ec;border-radius:6px;padding:5px 10px;font-size:.72rem;cursor:pointer}
.kt-lab textarea{display:block;resize:vertical;flex:1;min-height:276px;width:100%;border:0;outline:0;border-radius:0;background:#0d0e12;color:#e7e9f0;padding:20px;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}.kt-lab textarea[hidden]{display:none}.kt-preview-toolbar strong{color:#f0f0f3}.kt-preview-toolbar span{margin-left:auto;color:#7d818d}.kt-preview-pane iframe{width:100%;height:100%;min-height:318px;border:0;background:#fff}.kt-lab-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 22px;border-top:1px solid var(--lab-border);background:#14151a}.kt-lab-actions>span{color:#9da0aa;font-size:.8rem}.kt-lab-actions>div{display:flex;gap:9px}.kt-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:11px;padding:13px 19px;text-decoration:none;font:750 .91rem/1.2 inherit;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}.kt-button:hover{transform:translateY(-2px)}.kt-button-primary{background:#f10e20;color:white!important;border-color:#f10e20}.kt-button-quiet{background:#252831;color:#f0f1f5;border-color:#3a3d47}.kt-button-quiet:hover{background:#30333d}.kt-code-wrap{position:relative;margin:1.4rem 0}.kt-code-wrap pre{padding:22px 18px 18px!important;border:1px solid var(--kt-border,#ddd);border-radius:12px;background:#111318!important;color:#e9eaf0!important;overflow:auto;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.kt-copy-code{position:absolute;z-index:2;top:10px;right:10px;border:1px solid #4a4d57;border-radius:7px;background:#242730;color:#fff;padding:6px 10px;font-size:.72rem;font-weight:700;cursor:pointer}.kt-copy-code:hover{background:#e50919;border-color:#e50919}
@media(max-width:760px){.kt-lab-heading{align-items:flex-start;flex-direction:column;padding:20px}.kt-live-pill{display:none}.kt-lab-workspace{grid-template-columns:1fr}.kt-editor-pane{border-right:0;border-bottom:1px solid var(--lab-border)}.kt-lab textarea{min-height:240px}.kt-preview-pane iframe{min-height:260px}.kt-lab-actions{align-items:flex-start;flex-direction:column}.kt-lab-actions>div{width:100%}.kt-lab-actions .kt-button{flex:1}.kt-lab-tabs{padding:0 10px}.kt-lab-tabs button{padding:13px 11px}}