.web-artifact-card{margin:20px 0;border:1px solid #333;border-radius:24px;background:#171717;color:#eee;max-width:100%;overflow:visible}.web-artifact-summary{display:flex;align-items:center;gap:12px;padding:16px}.web-artifact-summary>div{flex:1;min-width:0}.web-artifact-summary strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.web-artifact-summary small{display:block;color:#999;font-size:12px;margin-top:4px}.web-artifact-card.is-open{border:0;background:transparent;width:calc(100% + 80px);max-width:calc(100% + 80px);margin:24px -40px}.web-artifact-card.is-open>.web-artifact-summary{display:none}.web-artifact-card button,.web-artifact-panel button{cursor:pointer;border:0;border-radius:9px;padding:6px 10px;background:transparent;color:inherit;font:inherit;font-size:12px;white-space:nowrap}.web-artifact-summary button{border:1px solid #555}.web-artifact-panel button:hover,.web-artifact-summary button:hover{background:#ffffff10}.web-artifact-panel button:disabled{opacity:.35;cursor:default}.web-artifact-panel[hidden]{display:none}.web-artifact-panel{--web-panel-bg:#171717;position:relative;inset:auto;margin:0;padding:0;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:680px;max-height:76dvh;min-height:340px;background:var(--web-panel-bg);color:#eee;border:1px solid #333;border-radius:28px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;box-shadow:0 1px 6px #00000005}.web-artifact-panel header{display:flex;align-items:center;gap:6px;min-height:58px;padding:10px 18px;border-bottom:1px solid #333;flex-shrink:0;box-sizing:border-box}.web-artifact-panel h2{font-size:13px;font-weight:500;line-height:1.5;flex:1;min-width:70px;margin:0 8px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-artifact-tabs{display:flex;order:1;border-radius:20px;background:#262626;padding:3px}.web-artifact-panel .web-artifact-tabs button{padding:4px 10px;border-radius:20px;font-size:12px}.web-artifact-tabs button[aria-selected=true]{background:#444;box-shadow:0 1px 3px #0001}.web-artifact-tools{display:contents}.web-artifact-icon{padding:6px!important;width:28px;height:28px;display:inline-grid;place-items:center;flex:none;color:#aaa!important}.web-artifact-icon.has-warning{color:#dc8e37!important}.web-artifact-panel .web-artifact-export,.web-artifact-tools>.web-artifact-icon:nth-last-child(-n+3){order:2}.web-artifact-panel .web-artifact-export{background:#2b2b2b;border-radius:18px;padding:6px 11px;margin:0 3px}.web-artifact-body{flex:1;min-height:0;position:relative;display:flex;background:#fff;overflow:hidden}.web-artifact-body iframe{width:100%;height:100%;border:0;background:#fff}.web-artifact-editor{position:relative;width:100%;height:100%;overflow:hidden;background:#161616}.web-artifact-panel .web-artifact-editor textarea,.web-artifact-panel .web-artifact-highlight,.web-artifact-panel .web-artifact-lines{box-sizing:border-box;margin:0;border:0;border-radius:0;padding:18px 20px 24px 58px;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace!important;font-variant-ligatures:none;tab-size:2;white-space:pre;letter-spacing:0;max-height:none!important}.web-artifact-panel .web-artifact-editor textarea{position:absolute;inset:0;resize:none;width:100%;height:100%;outline:0;background:transparent;color:transparent;caret-color:#eee;overflow:auto;z-index:2;-webkit-text-fill-color:transparent;overflow-wrap:normal}.web-artifact-panel .web-artifact-editor textarea::selection{background:#4285e84d}.web-artifact-panel .web-artifact-highlight{position:absolute;left:0;top:0;min-width:100%;min-height:100%;width:max-content;background:transparent;color:#ddd;pointer-events:none;overflow:visible}.web-artifact-panel .web-artifact-lines{position:absolute;top:0;left:0;width:45px;padding:18px 10px 24px 0;text-align:right;background:#161616;border-right:1px solid #333;color:#666;z-index:3;pointer-events:none;overflow:visible}.web-artifact-highlight .hljs-tag,.web-artifact-highlight .hljs-name{color:#8fb9ed}.web-artifact-highlight .hljs-attr{color:#d6a378}.web-artifact-highlight .hljs-string{color:#8bbaa8}.web-artifact-highlight .hljs-keyword,.web-artifact-highlight .hljs-selector-tag{color:#a19de0}.web-artifact-highlight .hljs-comment{color:#777}.web-artifact-highlight .hljs-number{color:#c399cc}.web-artifact-loading{position:absolute;inset:0;background:linear-gradient(110deg,#eee 10%,#fafafa 35%,#e6e6e6 65%);display:grid;place-content:center;color:#777;gap:12px;text-align:center;padding:25px;font-size:13px}.web-artifact-loading[hidden],.web-artifact-editor[hidden],.web-artifact-body textarea[hidden],.web-artifact-body iframe[hidden]{display:none}.web-artifact-panel footer{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid #333;min-height:42px;flex-shrink:0;flex-wrap:wrap;box-sizing:border-box}.web-artifact-panel footer[data-compact=true]{height:0;min-height:0;padding:0;border:0;overflow:hidden;visibility:hidden}.web-artifact-status{font-size:11px;color:#999;flex:1;min-width:100px;overflow-wrap:anywhere}.web-artifact-panel .web-artifact-apply{background:#eee;color:#111}.web-artifact-panel select{max-width:110px;background:transparent;color:inherit;border:1px solid #555;border-radius:8px;padding:4px;font-size:11px}.web-artifact-panel option{background:var(--web-panel-bg)}.web-artifact-panel.web-artifact-fullscreen{position:fixed;inset:12px;margin:0;width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;z-index:150}.web-artifact-panel::backdrop{background:#0008;backdrop-filter:blur(4px)}.web-artifact-export-menu{position:absolute;top:49px;right:75px;z-index:8;border:1px solid #444;border-radius:12px;background:var(--web-panel-bg);box-shadow:0 4px 20px #0002;padding:5px;min-width:140px}.web-artifact-export-menu[hidden]{display:none}.web-artifact-export-menu button{display:block;width:100%;text-align:left;padding:9px 12px}@media(max-width:1100px){.web-artifact-card.is-open{width:100%;max-width:100%;margin:18px 0}.web-artifact-panel{height:590px;max-height:72dvh;border-radius:22px}.web-artifact-panel header{padding:9px 10px;gap:3px;flex-wrap:wrap}.web-artifact-panel h2{flex-basis:130px;flex-grow:1}.web-artifact-panel .web-artifact-icon{width:25px;height:25px}.web-artifact-panel .web-artifact-tabs button{padding:4px 8px}.web-artifact-panel footer{padding:7px 10px}.web-artifact-panel.web-artifact-fullscreen{inset:0;width:100vw;height:100dvh;border-radius:0}.web-artifact-panel .web-artifact-editor textarea,.web-artifact-panel .web-artifact-highlight{padding-left:48px;font-size:11px!important}.web-artifact-panel .web-artifact-lines{width:37px;font-size:11px!important}}html[data-theme=light] .web-artifact-card,html[data-theme=light] .web-artifact-panel{--web-panel-bg:#fff;background:#fff;border-color:#e8e8e8;color:#292929}html[data-theme=light] .web-artifact-card.is-open{background:transparent}html[data-theme=light] .web-artifact-panel header,html[data-theme=light] .web-artifact-panel footer{border-color:#eee}html[data-theme=light] .web-artifact-summary button{border-color:#ddd}html[data-theme=light] .web-artifact-tabs{background:#f0f0f0}html[data-theme=light] .web-artifact-tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 3px #0001}html[data-theme=light] .web-artifact-panel button:hover,html[data-theme=light] .web-artifact-panel .web-artifact-export{background:#f0f0f0}html[data-theme=light] .web-artifact-panel .web-artifact-apply{background:#222;color:#fff}html[data-theme=light] .web-artifact-editor,html[data-theme=light] .web-artifact-panel .web-artifact-lines{background:#fff}html[data-theme=light] .web-artifact-panel .web-artifact-highlight{color:#4b5563}html[data-theme=light] .web-artifact-panel .web-artifact-editor textarea{caret-color:#222}html[data-theme=light] .web-artifact-panel .web-artifact-lines{border-color:#eee;color:#aaa}html[data-theme=light] .web-artifact-highlight .hljs-tag,html[data-theme=light] .web-artifact-highlight .hljs-name{color:#5476b9}html[data-theme=light] .web-artifact-highlight .hljs-string{color:#2c928a}html[data-theme=light] .web-artifact-highlight .hljs-attr{color:#a57843}html[data-theme=light] .web-artifact-highlight .hljs-keyword{color:#766ec7}html[data-theme=light] .web-artifact-highlight .hljs-comment{color:#a0a7b2}html[data-theme=light] .web-artifact-export-menu{border-color:#eee}