:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#f0f0f0e6;background-color:#121212;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,#root{background:transparent}body{background:transparent;margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#e0e0e0;background-color:#121212}a:hover{color:#747bff}button{background-color:#333}}@font-face{font-family:Monaco;src:url(/CodePlaygroundAssets/MONACO-Dq6LcbtS.TTF)}*,html,body,#root{font-family:Monaco}.code-background{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}.app{width:100vw;height:100vh;display:flex;flex-direction:column;background:transparent;color:#333;font-size:14px;line-height:20px;overflow:hidden}.header{padding:12px 20px;background:transparent;display:flex;gap:20px;align-items:center;border-bottom:1px solid rgba(79,172,254,.2);box-shadow:0 4px 15px #0000001a;z-index:10}.cursor-info{color:#fff}.header select{position:relative;padding:10px 35px 10px 16px;background:#1212121a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;border:1px solid #cccccc;border-radius:8px;font-size:14px;cursor:pointer;appearance:none;transition:all .3s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.header select:hover{background-color:#f0f0f0;border-color:#007acc;color:#000;box-shadow:0 0 8px #007acc33}.header select:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px #007acc4d}.header select option{background:#fff;color:#333}.header button{padding:.6em 1.6em;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4facfe4d;position:relative;overflow:hidden;outline:none}.header button:focus{border-color:#4facfe;box-shadow:0 0 0 3px #4facfe33}.header button:active{border-color:#00edfe;box-shadow:0 4px 15px #4facfe4d}.header button:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:shine 3s infinite}@keyframes shine{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}.header button:hover{background:linear-gradient(135deg,#00f2fe,#4facfe);box-shadow:0 6px 20px #4facfe66}.header button:active{box-shadow:0 4px 15px #4facfe4d}.header button:disabled{background:linear-gradient(135deg,#ccc,#e0e0e0);cursor:not-allowed;transform:none;box-shadow:none}.header button:disabled:before{display:none}.header button.running{background:linear-gradient(135deg,#fa709a,#fee140);cursor:wait;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.container{flex:1;display:grid;grid-template-columns:1fr 1fr}.editor-panel{position:relative;background:#1212121a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;border-right:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0003}.line-numbers{position:absolute;left:0;top:0;bottom:0;width:65px;padding:10px;text-align:right;color:#888;background:#121212b3;border-right:1px solid rgba(255,255,255,.1);line-height:20px;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:3;overflow:hidden;font-size:13px}textarea{position:absolute;left:65px;top:0;width:calc(100% - 65px);height:100%;padding:10px;background:transparent;color:transparent;caret-color:#fff;border:none;outline:none;font-size:14px;line-height:20px;resize:none;z-index:2;overflow:auto;white-space:pre;tab-size:2}.highlighter{position:absolute;left:65px;top:0;width:calc(100% - 65px);height:100%;padding:10px;pointer-events:none;line-height:20px;font-size:14px;color:#a09d5f;background:transparent;z-index:1;overflow:auto;white-space:pre!important;letter-spacing:0!important;word-spacing:0!important;tab-size:2!important}.output-panel{background:transparent;padding:20px;overflow:auto;transition:opacity .4s ease;opacity:0;pointer-events:none}.output-panel.visible{opacity:1;pointer-events:auto}.output-panel h3{margin-bottom:15px;color:#fff;font-size:18px;font-weight:600;padding-bottom:12px;position:relative}.output-panel h3:after{content:"";position:absolute;left:0;bottom:0;width:80px;height:3px;background:linear-gradient(90deg,#4facfe,#00f2fe,#7a5af8);border-radius:2px}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#888;font-size:16px;font-style:italic}textarea::-webkit-scrollbar,.highlighter::-webkit-scrollbar,.output-panel::-webkit-scrollbar{width:8px;height:8px}textarea::-webkit-scrollbar-track,.highlighter::-webkit-scrollbar-track,.output-panel::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}textarea::-webkit-scrollbar-thumb,.highlighter::-webkit-scrollbar-thumb,.output-panel::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:4px;transition:all .2s ease}textarea::-webkit-scrollbar-thumb:hover,.highlighter::-webkit-scrollbar-thumb:hover,.output-panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#00f2fe,#4facfe);transform:scale(1.05)}.output-content{background:#121212b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px;border-radius:10px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 4px 20px #0000004d;border:1px solid rgba(79,172,254,.2);height:calc(100vh - 150px);overflow:auto;font-family:Consolas,Monaco,monospace;line-height:1.5;background-image:linear-gradient(90deg,#4facfe,#00f2fe,#7a5af8);-webkit-background-clip:text;background-clip:text;color:transparent}.output-content .key{color:#4facfe!important}.output-content .string{color:#067d17!important}.output-content .number{color:#1750eb!important}.output-content .boolean{color:#ff6b6b!important}.output-content .null{color:#7d5bbf!important}.error-message{color:#ff6b6b;font-weight:700}.loading-animation{color:#4facfe;animation:pulse 1.5s infinite}textarea::selection{background:#0078d74d}.highlighter .keyword{color:#00a0fc}.highlighter .builtin{color:#7d5bbf}.highlighter .string{color:#067d17}.highlighter .comment{color:green}.highlighter .function{color:#795e26}.highlighter .type{color:#cd3131}.highlighter .decorator{color:#fe01b1}.highlighter .number{color:#1750eb}.highlighter .variable{color:#001080}.highlighter .operator,.highlighter .punctuation{color:#d4d4d4}.highlighter .variable{color:#9cdcfe}.highlighter .bracket{color:#569cd6}.highlighter .brace{color:#4ec9b0}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.output-actions{display:flex;gap:8px}.copy-button,.export-button{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease}.copy-button{background-color:#4caf50;color:#fff}.export-button{background-color:#2196f3;color:#fff}.copy-button:hover:not(:disabled),.export-button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.copy-button:disabled,.export-button:disabled{background-color:#ccc;color:#666;cursor:not-allowed;transform:none}