.code-sandbox{margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--muted);border-top:2px solid var(--iris)}.code-sandbox.is-preview-only{border:0;background:transparent}.code-sandbox.is-preview-only .code-sandbox-preview-wrap{background:transparent;border:0}.code-sandbox.is-preview-only .code-sandbox-preview{min-height:0;padding:0;align-items:center;justify-content:center;background:transparent;overflow:visible}.code-sandbox-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .85rem;color:var(--text);background:var(--surface);border-bottom:1px solid var(--muted)}.code-sandbox-header strong{display:inline-flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700}.code-sandbox-header strong:before{content:">_";font-size:.8rem;font-weight:700;color:var(--foam);background:color-mix(in srgb,var(--foam) 15%,transparent);padding:.1rem .4rem;border-radius:4px;border:1px solid color-mix(in srgb,var(--foam) 30%,transparent)}.code-sandbox-actions{display:flex;align-items:center;gap:.45rem}.code-sandbox-actions button{padding:.35rem .75rem;font-size:.9rem;line-height:1.3;border-radius:4px;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease}.code-sandbox-actions .code-sandbox-run{color:var(--base);background:var(--foam);border:1px solid var(--muted)}.code-sandbox-actions .code-sandbox-reset{color:var(--base);background:var(--love);border:1px solid var(--muted)}@media(hover:hover){.code-sandbox-actions .code-sandbox-run:hover{color:var(--text);background:var(--overlay);border-color:var(--foam)}.code-sandbox-actions .code-sandbox-reset:hover{color:var(--text);background:var(--overlay);border-color:var(--love)}}@media(hover:none){.code-sandbox-actions .code-sandbox-run:active,.code-sandbox-actions .code-sandbox-reset:active{color:var(--text);background:var(--overlay);border-color:var(--subtle);transition:none!important}}.code-sandbox-workspace{display:flex;flex-direction:column}.code-sandbox-preview-wrap{display:flex;flex-direction:column;min-width:0;background:var(--surface);border-bottom:1px solid var(--muted)}.code-sandbox-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:7.5rem;max-height:20rem;padding:1.25rem;overflow:auto;color:var(--text);background:var(--surface);scrollbar-color:var(--muted) transparent;scrollbar-width:thin}.code-sandbox-error{margin:0;padding:.65rem .85rem;color:var(--love);background:color-mix(in srgb,var(--love) 10%,var(--surface));border-top:1px solid color-mix(in srgb,var(--love) 30%,transparent);white-space:pre-wrap}.code-sandbox-editor{display:flex;flex-direction:column;min-width:0;background:var(--base)}.code-sandbox-editor[hidden]{display:none}.code-sandbox-tabs{display:flex;align-items:center;gap:.35rem;padding:.45rem .6rem;background:color-mix(in srgb,var(--base) 70%,var(--surface));border-bottom:1px solid var(--muted);overflow-x:auto;scrollbar-width:none}.code-sandbox-tabs::-webkit-scrollbar{display:none}.code-sandbox-tab{font-size:.9rem;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem;color:var(--subtle);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease}.code-sandbox-tab:before{content:"";width:.4rem;height:.4rem;border-radius:50%;opacity:.5;transition:opacity .2s ease}.code-sandbox-tab[data-sandbox-tab=html]:before{background:var(--gold)}.code-sandbox-tab[data-sandbox-tab=css]:before{background:var(--pine)}.code-sandbox-tab[data-sandbox-tab=js]:before{background:var(--rose)}@media(hover:hover){.code-sandbox-tab:hover{color:var(--text);background:var(--overlay)}.code-sandbox-tab:hover:before{opacity:1}}@media(hover:none){.code-sandbox-tab:active{color:var(--text);background:var(--overlay);transition:none!important}}.code-sandbox-tab.is-active{color:var(--text);background:var(--surface);border-color:var(--muted)}.code-sandbox-tab.is-active:before{opacity:1}.code-sandbox-fields{display:block;position:relative;flex:1;min-height:11rem;overflow:hidden;background:var(--base)}.code-sandbox-fields:after{position:absolute;right:0;bottom:0;width:.65rem;height:.65rem;content:"";background:var(--muted);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none;opacity:.9}.code-sandbox-highlight{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;min-height:11rem;box-sizing:border-box;margin:0;padding:.9rem;color:var(--text);background:var(--base);border:0;font-size:.85rem;line-height:1.5;font-variant-ligatures:none;letter-spacing:normal;tab-size:2;white-space:pre;overflow:hidden;pointer-events:none}.code-sandbox-highlight:not(.is-active){display:none}.code-sandbox-highlight code{font:inherit}.code-sandbox-source{position:relative;z-index:1;display:block;width:100%;height:11rem;min-height:11rem;box-sizing:border-box;margin:0;padding:.9rem;resize:vertical;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text);background:transparent;border:0;outline:0;font-size:.85rem;line-height:1.5;font-variant-ligatures:none;letter-spacing:normal;tab-size:2;white-space:pre;overflow:auto;scrollbar-color:var(--muted) transparent;scrollbar-width:thin}.code-sandbox-source::-webkit-resizer{background:var(--muted)}.code-sandbox-source:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--iris) 50%,transparent)}.code-sandbox-source:not(.is-active){display:none}.code-sandbox-highlight .syntax-comment{color:var(--muted)}.code-sandbox-highlight .syntax-string{color:var(--gold)}.code-sandbox-highlight .syntax-keyword{color:var(--iris)}.code-sandbox-highlight .syntax-number{color:var(--foam)}.code-sandbox-highlight .syntax-property{color:var(--pine)}.code-sandbox-highlight .syntax-tag{color:var(--rose)}.code-sandbox-highlight .syntax-attribute{color:var(--iris)}.code-sandbox-highlight .syntax-function{color:var(--foam)}.code-sandbox-highlight .syntax-constant{color:var(--gold)}