html,body,#root{height:100%;margin:0;padding:0;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}body.dark{background-color:#121212;color:#fff}body.light{background-color:#fff;color:#000}.app{display:flex;flex-direction:column;height:100%}.ide-body{flex:1;min-height:0;display:flex;flex-direction:column}.split-vertical{flex:1;display:flex;flex-direction:column;min-height:0}.split-vertical>div{min-height:0;height:100%;overflow:auto}.split-vertical .gutter{background-color:#444;height:8px;cursor:row-resize;flex-shrink:0}.tab-bar{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 12px;font-size:.9rem;font-weight:500;background-color:#1e1e1e;color:#fff;border-bottom:1px solid #333}body.light .tab-bar{background-color:#f3f3f3;color:#000;border-bottom:1px solid #ccc}.tab-bar.bottom-tab{border-top:1px solid #333;border-bottom:none}body.light .tab-bar.bottom-tab{border-top:1px solid #ccc}.tab-label{padding:0 4px}.tab-controls{display:flex;gap:8px}.icon-button{background:none;border:none;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;padding:0}.icon-button:hover{opacity:.7}.editor-pane,.output-pane{flex:1;display:flex;flex-direction:column;overflow:auto}.code-only{padding:0!important}body.dark .editor-pane{background-color:#2e2e2e}body.light .editor-pane{background-color:#fff}.output-pane-wrapper{display:flex;flex-direction:column;height:100%}body.dark .output-pane{background-color:#1b1b1b;color:#00ff90;border-left:2px solid #444}body.light .output-pane{background-color:#f9f9f9;color:#222;border-left:2px solid #ccc}pre{white-space:pre-wrap;word-wrap:break-word;font-family:monospace;font-size:.9rem}.cm-editor,.cm-editor *{padding:0!important;margin:0!important;border:none!important;box-sizing:border-box!important}.cm-editor{height:100%!important;width:100%!important;background-color:transparent!important}.cm-scroller{height:100%!important;overflow:auto!important}.cm-content{min-height:100%!important}.cm-lineNumbers{padding-left:4px!important}body.light .cm-editor{background-color:#fff!important;color:#000!important}body.light .cm-content,body.light .cm-line,body.light .cm-line span{color:#000!important}body.light .cm-keyword{color:#00c!important}body.light .cm-string{color:#a31515!important}body.light .cm-variableName{color:#000!important}body.light .cm-comment{color:green!important;font-style:italic}body.light .cm-gutters{background-color:#f0f0f0!important;color:#000!important;border-right:1px solid #ccc}@media (max-width: 768px){.main{flex-direction:column}.editor-pane,.output-pane{height:50%;flex:unset}.output-pane{border-left:none;border-top:2px solid #444}body.light .output-pane{border-top:2px solid #ccc}}.url-input{font-size:.9rem;background-color:transparent;border:none;outline:none;color:inherit;font-family:inherit;width:100%}.cm-cursor{border-left:2px solid #ffffff!important}body.light .cm-cursor{border-left:2px solid #000000!important}#root{max-width:100%;margin:0;padding:0;height:100vh}.app-container{height:100vh;font-family:sans-serif;display:flex;flex-direction:column}.top-bar{display:flex;align-items:center;justify-content:space-between;background-color:#1e1e1e;color:#fff;padding:8px 12px}.title{font-size:16px;font-weight:700}.url-area{flex:1;margin:0 16px;cursor:pointer;color:#bbb;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.url-input{width:100%;padding:4px;font-size:14px;background-color:#2a2a2a;color:#fff;border:1px solid #555;border-radius:4px}.tooltip-container{position:relative;display:inline-block}.run-button{background:#61dafb;border:none;border-radius:4px;padding:6px 12px;display:flex;align-items:center;cursor:pointer;font-size:14px;transition:background .2s ease-in-out}.run-button:hover{background:#4ec7e8}.play-icon{margin-right:6px}.tooltip-text{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:4px;padding:4px 8px;font-size:12px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s;white-space:nowrap}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.split-horizontal{height:calc(100% - 40px);display:flex;flex-direction:row}.editor-pane{background:#1e1e1e;padding:12px;height:100%;overflow:auto}.output-pane{background-color:#1e1e1e;color:#dcdcdc;padding:12px;height:100%;overflow-y:auto}.output-pane h3{margin-top:0;margin-bottom:12px;font-size:18px;font-weight:700;color:#fff}.output-section{margin-bottom:16px}.output-pane pre{background:#1e1e1e;color:#dcdcdc;padding:8px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;border-radius:4px;font-size:14px;line-height:1.5}.output-loading{color:#999}.output-error{color:#ff6b6b;font-weight:700}.url-display{display:flex;align-items:center;gap:6px;color:#bbb;font-size:14px}.pencil-icon{opacity:.6;transition:opacity .2s}.url-area:hover .pencil-icon{opacity:1}.shortcut-hint{font-size:12px;margin-left:8px;color:#333;background:#fff;padding:2px 4px;border-radius:4px;font-family:monospace;-webkit-user-select:none;user-select:none}.split-horizontal>.gutter{background-color:#333;cursor:col-resize;width:6px}.editor-pane,.output-pane{height:100%;overflow:auto;padding:12px}.run-button{background:#3ea2cc;color:#fff;border:none;border-radius:4px;padding:6px 12px;display:flex;align-items:center;cursor:pointer;font-size:14px;transition:background .2s ease-in-out}.run-button:hover{background:#3293bd}.shortcut-hint{font-size:12px;margin-left:8px;color:#eee;background:#222;padding:2px 4px;border-radius:4px;font-family:monospace;-webkit-user-select:none;user-select:none}.output-error{color:#ff6b6b;font-weight:700;margin-top:16px}.error-details{color:#ff9f9f;font-weight:400;margin-top:8px}.error-trace{color:#fa8;margin-top:8px;font-size:13px;white-space:pre-wrap;background-color:#2e2e2e;padding:8px;border-radius:4px}