.CodePlayground_playground__Dp2Cn{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--opus-shell-bg,#0b1020)}.CodePlayground_playground__Dp2Cn[data-full-width=true]{position:fixed;inset:0;z-index:120;width:100vw;max-width:100vw}.CodePlayground_body__wlxCZ{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.CodePlayground_singlePane__788m0,.CodePlayground_splitter__1UP8P{flex:1 1 auto;height:100%;min-height:0}.CodePlayground_singlePane__788m0{display:block}.CodePlayground_pane__E4Up0{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;height:100%}.CodePlayground_paneHeader__9zkvM{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);background:color-mix(in srgb,var(--opus-panel,rgba(12,18,36,.92)) 88%,transparent)}.CodePlayground_paneTitle__KisXZ{margin:0;color:var(--opus-text,#f5f7ff);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.CodePlayground_paneHint__7wcbK{margin:0;color:var(--opus-muted,rgba(223,226,255,.72));font-size:.74rem}.CodePlayground_paneBody__ytd_s{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.CodePlayground_editorPane__RbKfg .CodePlayground_paneBody__ytd_s{overflow:hidden}.CodePlayground_sourcePaneBody__zteHb{display:flex;flex-direction:column;min-height:0;height:100%}.CodePlayground_sourceChatSplitter__T5_AF{flex:1 1 auto;width:100%;min-height:0;height:100%}.CodePlayground_sourceEditor__4sYb9{min-height:0;height:100%;overflow:hidden}.CodePlayground_previewPane__r6p0Y .CodePlayground_paneBody__ytd_s{display:block;overflow:auto}.CodePlayground_editorPane__RbKfg{min-height:0;background:color-mix(in srgb,var(--opus-input-bg,rgba(10,14,28,.96)) 92%,transparent)}.CodePlayground_editorPane__RbKfg .codeEditor{max-height:none;border:0;border-radius:0;box-shadow:none}.CodePlayground_previewPane__r6p0Y{background:color-mix(in srgb,var(--opus-panel,rgba(12,18,36,.92)) 92%,transparent)}.CodePlayground_previewSurface__liRw9{position:relative;min-height:100%;height:100%;padding:24px;border-radius:0;background:color-mix(in srgb,var(--opus-panel) 92%,transparent);color:var(--opus-text);overflow:hidden;contain:layout paint;isolation:isolate;transform:translateZ(0)}.CodePlayground_previewSurface__liRw9[data-padded=false]{padding:0}.CodePlayground_previewCanvas__PQoTV{width:100%;height:100%;min-height:0}.CodePlayground_previewCanvas__PQoTV[data-align=form]{display:grid;align-items:safe center;justify-items:center;overflow:auto;box-sizing:border-box}.CodePlayground_previewCanvas__PQoTV[data-align=form]>*{width:min(100%,28rem)}.CodePlayground_previewErrorEditor__Vs7in{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;height:100%;overflow:hidden}.CodePlayground_previewErrorEditor__Vs7in .cm-content{color:#ffb4b4}.CodePlayground_externalPreview__FfQTn{width:100vw;height:100dvh;min-height:0;overflow:hidden;background:var(--opus-shell-bg,#0b1020)}.CodePlayground_externalPreview__FfQTn [data-preview-root]{height:100%}.CodePlayground_externalPreviewEmpty__ewHJ_{display:grid;place-content:center;gap:8px;width:100vw;height:100dvh;padding:24px;background:var(--opus-shell-bg,#0b1020);color:var(--opus-text,#f5f7ff);text-align:center}.CodePlayground_externalPreviewEmpty__ewHJ_ h1,.CodePlayground_externalPreviewEmpty__ewHJ_ p{margin:0}.CodePlayground_externalPreviewEmpty__ewHJ_ p{color:var(--opus-muted,rgba(223,226,255,.72))}.CodePlayground_externalPreviewButton__HCcCA{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);background:transparent;color:var(--opus-text,#f5f7ff);font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}.CodePlayground_externalPreviewButton__HCcCA:hover{border-color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 55%,var(--opus-border,rgba(255,255,255,.12)));background:color-mix(in srgb,var(--opus-accent,#6d2bd9) 18%,transparent);color:var(--opus-accent-contrast,#ffffff)}.CodePlayground_previewMenuWrap__klaEW{position:relative;flex:0 0 auto}.CodePlayground_previewMenuButton__GhAUH{display:inline-grid;align-content:center;justify-content:center;gap:4px;width:34px;height:34px;padding:0;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 82%,transparent);border-radius:var(--opus-input-radius,4px);background:color-mix(in srgb,var(--opus-input-bg,rgba(10,14,28,.96)) 78%,transparent);color:var(--opus-text,#f5f7ff);cursor:pointer}.CodePlayground_previewMenuButton__GhAUH span{display:block;width:15px;height:2px;border-radius:999px;background:currentColor}.CodePlayground_previewMenuButton__GhAUH:hover,.CodePlayground_previewMenuButton__GhAUH[aria-expanded=true]{border-color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 58%,var(--opus-border,rgba(255,255,255,.12)));background:color-mix(in srgb,var(--opus-accent,#6d2bd9) 18%,var(--opus-input-bg,rgba(10,14,28,.96)))}.CodePlayground_previewMenuButton__GhAUH:focus-visible{outline:2px solid color-mix(in srgb,var(--opus-accent,#6d2bd9) 74%,transparent);outline-offset:2px}.CodePlayground_previewMenu__hvLUN{position:absolute;top:calc(100% + 8px);right:0;z-index:30;display:grid;gap:10px;min-width:min(300px,calc(100vw - 32px));padding:12px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 86%,transparent);border-radius:var(--opus-radius-lg,6px);background:linear-gradient(135deg,color-mix(in srgb,var(--opus-accent,#6d2bd9) 12%,transparent),transparent 42%),color-mix(in srgb,var(--opus-panel,rgba(12,18,36,.92)) 94%,transparent);box-shadow:0 18px 50px color-mix(in srgb,#000 44%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.CodePlayground_previewMenuRow__9Sr3G,.CodePlayground_previewMenuTheme__AW0w2{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:40px;padding:4px 2px;color:var(--opus-text,#f5f7ff);font-size:.76rem;font-weight:800}.CodePlayground_previewMenuLabel__JXEHD{display:inline-flex;align-items:center;min-width:0;gap:8px;color:var(--opus-muted,rgba(223,226,255,.72));font-size:.76rem;font-weight:900;letter-spacing:.08em;line-height:1.1;text-transform:uppercase}.CodePlayground_previewMenuIcon__LMTwx{display:inline-flex;width:.9rem;height:.9rem;flex:0 0 auto;align-items:center;justify-content:center;color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 78%,var(--opus-text,#f5f7ff));font-size:.72rem;line-height:1}.CodePlayground_previewMenuIcon__LMTwx svg{width:.72rem;height:.72rem}.CodePlayground_previewMenuRow__9Sr3G>:last-child,.CodePlayground_previewMenuTheme__AW0w2>:last-child{justify-self:end}.CodePlayground_previewMenuRow__9Sr3G [data-fit-content=true],.CodePlayground_previewMenuTheme__AW0w2 [data-fit-content=true]{width:fit-content}.CodePlayground_previewMenuDivider__pNgUU{height:1px;margin:2px 0;background:color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 78%,transparent)}.CodePlayground_previewMenuItem__mmTJz{display:flex;align-items:center;justify-content:flex-start;min-height:38px;width:100%;padding:0 10px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 78%,transparent);border-radius:var(--opus-input-radius,4px);background:transparent;color:var(--opus-text,#f5f7ff);font:inherit;font-size:.76rem;font-weight:800;text-align:left;cursor:pointer}.CodePlayground_previewMenuItem__mmTJz .CodePlayground_previewMenuLabel__JXEHD{color:var(--opus-text,#f5f7ff)}.CodePlayground_previewMenuItem__mmTJz:focus-visible,.CodePlayground_previewMenuItem__mmTJz:hover{border-color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 58%,var(--opus-border,rgba(255,255,255,.12)));background:color-mix(in srgb,var(--opus-accent,#6d2bd9) 18%,transparent);outline:none}.CodePlayground_layoutControls__WmfuZ{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);background:color-mix(in srgb,var(--opus-input-bg,rgba(10,14,28,.96)) 74%,transparent)}.CodePlayground_layoutButton__4N8iR{min-height:28px;padding:0 10px;border:0;border-radius:calc(var(--opus-input-radius, 4px) - 1px);background:transparent;color:var(--opus-muted,rgba(223,226,255,.72));font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.CodePlayground_layoutButton__4N8iR:hover,.CodePlayground_layoutButton__4N8iR[data-active=true]{background:var(--opus-accent,#6d2bd9);color:var(--opus-accent-contrast,#ffffff)}.CodePlayground_exitFullWidthButton__2CPsb,.CodePlayground_fullWidthButton__bsr2p{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);background:transparent;color:var(--opus-text,#f5f7ff);font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}.CodePlayground_fullWidthButton__bsr2p:hover{background:color-mix(in srgb,var(--opus-accent-soft,rgba(124,58,237,.12)) 55%,transparent)}.CodePlayground_exitFullWidthButton__2CPsb{border-color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 55%,var(--opus-border,rgba(255,255,255,.12)));background:color-mix(in srgb,var(--opus-accent,#6d2bd9) 18%,transparent);color:var(--opus-accent-contrast,#ffffff)}.CodePlayground_exitFullWidthButton__2CPsb:hover{background:var(--opus-accent,#6d2bd9)}.CodePlayground_chatPanel__NQbPL{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;height:100%;min-height:0;border-top:0;background:radial-gradient(circle at top left,color-mix(in srgb,var(--opus-accent,#6d2bd9) 12%,transparent),transparent 42%),color-mix(in srgb,var(--opus-panel,rgba(12,18,36,.92)) 90%,transparent)}.CodePlayground_chatHeader__ucJWr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 8px}.CodePlayground_chatTitle__QpcGb{margin:0;color:var(--opus-text,#f5f7ff);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.CodePlayground_chatHint__O_Ut1{margin:2px 0 0;color:var(--opus-muted,rgba(223,226,255,.72));font-size:.72rem}.CodePlayground_chatApiKeyRow__2dYE7{display:grid;gap:6px;padding:0 14px 10px}.CodePlayground_chatApiKeyLabel__NyF12{color:var(--opus-muted,rgba(223,226,255,.72));font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.CodePlayground_chatApiKeyControls___681R{display:flex;gap:8px;align-items:center}.CodePlayground_chatApiKeyInput__8t7fg{flex:1 1 auto;min-width:0;min-height:34px;padding:0 10px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);background:color-mix(in srgb,var(--opus-input-bg,rgba(10,14,28,.96)) 88%,transparent);color:var(--opus-text,#f5f7ff);font:inherit;font-size:.78rem}.CodePlayground_chatApiKeyInput__8t7fg:focus-visible{outline:none;border-color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 70%,var(--opus-border,rgba(255,255,255,.12)));box-shadow:0 0 0 3px color-mix(in srgb,var(--opus-accent,#6d2bd9) 18%,transparent)}.CodePlayground_chatApiKeyHint__lbvGU{margin:0;color:var(--opus-muted,rgba(223,226,255,.72));font-size:.68rem;line-height:1.4}.CodePlayground_chatSendButton__vUXT8,.CodePlayground_clearChatButton__Y_5b_,.CodePlayground_fixErrorButton__Vhsdl{display:inline-flex;align-items:center;justify-content:center;min-height:30px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.CodePlayground_clearChatButton__Y_5b_{padding:0 10px;background:transparent;color:var(--opus-muted,rgba(223,226,255,.72))}.CodePlayground_fixErrorButton__Vhsdl{padding:0 10px;background:color-mix(in srgb,var(--opus-danger,#ff4d5d) 18%,transparent);color:color-mix(in srgb,var(--opus-danger,#ff4d5d) 82%,var(--opus-text,#f5f7ff))}.CodePlayground_fixErrorButton__Vhsdl:disabled{cursor:not-allowed;opacity:.55}.CodePlayground_chatSendButton__vUXT8{align-self:stretch;padding:0 14px;background:var(--opus-accent,#6d2bd9);color:var(--opus-accent-contrast,#ffffff)}.CodePlayground_chatSendButton__vUXT8:disabled{cursor:not-allowed;opacity:.55}.CodePlayground_chatMessages__IKXQV{display:flex;min-height:0;flex-direction:column;gap:8px;padding:0 14px 10px;overflow:auto}.CodePlayground_chatMessage__3MMuy{max-width:88%;padding:8px 10px;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 80%,transparent);border-radius:var(--opus-input-radius,4px);background:color-mix(in srgb,var(--opus-input-bg,rgba(10,14,28,.96)) 82%,transparent);color:var(--opus-text,#f5f7ff);white-space:pre-wrap}.CodePlayground_chatMessage__3MMuy p{margin:4px 0 0;font-size:.78rem;line-height:1.45}.CodePlayground_chatMessageUser__gDugc{align-self:flex-end;background:color-mix(in srgb,var(--opus-accent,#6d2bd9) 28%,var(--opus-input-bg,rgba(10,14,28,.96)))}.CodePlayground_chatMessageAssistant__L3Y2q{align-self:flex-start}.CodePlayground_chatRole__Gw99y{display:block;color:color-mix(in srgb,var(--opus-accent,#6d2bd9) 76%,var(--opus-text,#f5f7ff));font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.CodePlayground_chatError__HYjbR{margin:0 14px 8px;color:var(--opus-danger,#ff4d5d);font-size:.76rem;font-weight:700}.CodePlayground_chatComposer__iSEzb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 14px 14px;border-top:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 72%,transparent)}.CodePlayground_chatInput__m2pnt{width:100%;min-width:0;resize:none;border:1px solid color-mix(in srgb,var(--opus-border,rgba(255,255,255,.12)) 85%,transparent);border-radius:var(--opus-input-radius,4px);background:var(--opus-input-bg,rgba(10,14,28,.96));color:var(--opus-text,#f5f7ff);font:inherit;font-size:.78rem;line-height:1.4;padding:8px 10px}.CodePlayground_chatInput__m2pnt:focus-visible{outline:2px solid color-mix(in srgb,var(--opus-accent,#6d2bd9) 70%,transparent);outline-offset:2px}