@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";.compiler-wrapper{--bg-app: #ffffff;--bg-card: #ffffff;--bg-header: #ffffff;--bg-editor: #ffffff;--text-primary: #18181b;--text-secondary: #71717a;--text-inverse: #ffffff;--accent: #000000;--border: #e4e4e7;--shadow-card: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);margin:0;font-family:Inter,sans-serif;background-color:var(--bg-app);color:var(--text-primary)}.code-editor,.code-editor textarea,.code-editor pre{margin:0!important;border:0!important;background:#1e1e1e!important;font-family:Fira Code,Cascadia Code,Source Code Pro,monospace!important;font-size:15px!important;line-height:inherit!important;-moz-tab-size:4!important;tab-size:4!important;white-space:pre!important;word-spacing:0!important;letter-spacing:0!important;text-rendering:optimizeSpeed!important;-webkit-font-smoothing:antialiased!important;font-variant-ligatures:none!important;font-kerning:none!important}.code-editor textarea{outline:none!important;padding:12px!important;box-sizing:content-box!important;color:inherit!important;resize:none!important;caret-color:#fff!important}.code-editor pre{padding:12px!important;margin:0!important;pointer-events:none!important;box-sizing:content-box!important;color:inherit!important}.token{background:none!important;font-family:inherit!important;font-size:inherit!important;font-weight:400!important;font-style:normal!important;text-decoration:none!important;letter-spacing:inherit!important}.token.tag,.token.selector,.token.constant,.token.boolean{color:#ff79c6!important}.token.keyword,.token.atrule{color:#50fa7b!important}.token.string,.token.char,.token.attr-value{color:#f1fa8c!important}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6272a4!important;font-style:italic!important}.token.function,.token.class-name{color:#8be9fd!important}.token.property,.token.attr-name{color:#ffb86c!important}.token.number{color:#bd93f9!important}.token.operator,.token.entity,.token.url,.token.punctuation{color:#f8f8f2!important}.compiler-wrapper ::-webkit-scrollbar{display:auto;width:8px;height:8px}.compiler-wrapper{scrollbar-width:auto}.lang-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020617b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px 16px;overflow-y:auto}.lang-picker-modal{position:relative;width:min(880px,100%);background:#eef2f6;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #ffffff0f,0 32px 64px -16px #00000073;animation:langPickerPop .28s cubic-bezier(.34,1.4,.64,1);font-family:Inter,system-ui,sans-serif}@keyframes langPickerPop{0%{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.lang-picker-header{background:#fff;padding:20px 24px 18px;border-bottom:1px solid #e2e8f0}.lang-picker-header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.lang-picker-heading{text-align:left;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.lang-picker-heading h2{margin:0;font-size:1.15rem;font-weight:700;color:#0f172a;letter-spacing:-.02em;line-height:1.2;font-family:inherit}.lang-picker-subtitle{margin:0;font-size:.78rem;color:#64748b;font-weight:500;font-family:inherit}.lang-picker-close{flex-shrink:0;width:34px;height:34px;border:none;border-radius:8px;background:#f1f5f9;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s,color .2s}.lang-picker-close:hover{background:#e2e8f0;color:#334155}.lang-picker-search-wrap{position:relative}.lang-picker-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#64748b;font-size:.85rem;pointer-events:none}.lang-picker-search{width:100%;box-sizing:border-box;padding:11px 14px 11px 40px;border:1px solid #e2e8f0;border-radius:10px;font-size:.88rem;font-family:inherit;color:#0f172a;background:#f8fafc;outline:none;transition:border-color .2s,background .2s}.lang-picker-search::placeholder{color:#94a3b8}.lang-picker-search:focus{border-color:#cbd5e1;background:#fff}.lang-picker-body{display:flex;flex-direction:column;gap:22px;max-height:min(58vh,520px);overflow-y:auto;padding:22px 24px 26px}.lang-picker-section{background:#fff;border-radius:14px;padding:16px 18px 14px;box-shadow:0 1px 3px #0f172a0f}.lang-picker-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #eef2f6}.lang-picker-section-title{margin:0;font-size:.72rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.1em}.lang-picker-section-count{font-size:.7rem;font-weight:700;color:#64748b;background:#f1f5f9;padding:3px 8px;border-radius:999px}.lang-picker-chips{display:flex;flex-wrap:wrap;gap:10px}.lang-picker-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border:1px solid #e2e8f0;border-radius:999px;background:#fafbfc;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;border-left:4px solid var(--chip-accent, #64748b)}.lang-picker-chip:hover{transform:translateY(-1px);background:#fff;border-color:#cbd5e1;box-shadow:0 6px 16px #0f172a1a}.lang-picker-chip-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--chip-accent, #64748b) 14%,white);color:var(--chip-accent, #64748b);flex-shrink:0}.lang-picker-chip-label{font-size:.82rem;font-weight:600;color:#1e293b;white-space:nowrap}.lang-picker-show-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 14px;border:1px dashed #cbd5e1;border-radius:999px;background:transparent;color:#475569;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.lang-picker-show-more:hover{background:#f8fafc;border-color:#34d399;color:#0f172a}.lang-picker-empty{text-align:center;color:#64748b;padding:40px 16px;margin:0;font-size:.95rem}@media(max-width:640px){.lang-picker-overlay{align-items:flex-end;padding:0}.lang-picker-modal{width:100%;border-radius:20px 20px 0 0;max-height:92vh;animation:langPickerSlideUp .3s ease-out}@keyframes langPickerSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.lang-picker-header{padding:20px 18px 18px}.lang-picker-body{padding:16px 14px 24px}.lang-picker-chip{padding:8px 12px 8px 8px}.lang-picker-chip-label{font-size:.78rem}}.compiler-navbar{display:flex;justify-content:space-between;align-items:center;padding:0 32px;height:72px;flex-shrink:0;background-color:#fff;border-bottom:1px solid #e2e8f0;color:#0f172a;position:sticky;top:var(--site-header-height, 0px);z-index:1000;font-family:Inter,sans-serif;box-shadow:0 1px 2px #0f172a0a}.compiler-navbar-brand{display:flex;align-items:center;gap:12px}.brand-logo{width:36px;height:36px;background:linear-gradient(135deg,#8b8a8a,#6b7280);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 4px 12px #8b8a8a4d}.compiler-navbar-brand h1{margin:0;font-size:1.25rem;font-weight:800;color:#0f172a;letter-spacing:-.02em}.compiler-navbar-brand h1 span{color:#64748b;font-weight:400;margin-left:2px}.compiler-navbar-nav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:min(78vw,980px);scrollbar-width:thin;padding-bottom:2px}.nav-link-lang{padding:8px 10px;font-size:.72rem;text-transform:none;letter-spacing:0;white-space:nowrap}.nav-link{color:#787880;text-decoration:none;font-size:.85rem;font-weight:600;padding:8px 16px;border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.05em}.nav-link:hover{color:#18181b;background-color:#f4f4f5}.nav-link.active{color:#000;background-color:#e7e7f1;box-shadow:0 1px 2px #0000000d}.nav-link svg{opacity:.7}.nav-link.active svg{opacity:1;color:#8b8a8a}.nav-link-compiler-action,.nav-link-languages{border:none;cursor:pointer;font-family:inherit}.nav-link-languages{background:#f4f4f5;color:#18181b}.nav-link-languages:hover{background:#e7e7f1}.nav-current-lang{font-weight:500;opacity:.75;text-transform:none;letter-spacing:0;font-size:.75rem}@media(max-width:768px){.compiler-navbar{padding:0 16px;height:64px}.compiler-navbar-brand h1{font-size:1.1rem}.compiler-navbar-nav{gap:4px}.nav-link span{display:none}.nav-link{padding:10px}}.compiler-wrapper{width:100%;min-height:100vh;padding-top:var(--site-header-height, 71px);box-sizing:border-box;background-color:#f8fafc;position:relative;z-index:10}html,body,#root{height:100%;margin:0;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;width:100%;padding-top:0;overflow:hidden;background-color:var(--bg-app);color:var(--text-primary)}.content-area{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background-color:var(--bg-app);position:relative}.route-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}.route-content>*{flex:1;min-height:0;display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.sandbox-page{padding:0;background:#f8fafc}.app-header{padding:1rem 2rem;background-color:var(--bg-header);border-bottom:1px solid var(--border);box-shadow:var(--shadow-card);z-index:10}.app-header h1{margin:0;font-size:1.5rem;line-height:1.1}.app-header p{margin:.5rem 0 0;color:var(--text-secondary);font-size:.9rem}.editors-pane{display:flex;flex:3;min-height:220px;background:#f8fafc;gap:1px;border-bottom:1px solid #e2e8f0}.editor-section{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#fff;position:relative;transition:flex .3s cubic-bezier(.4,0,.2,1)}.editor-section:after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:linear-gradient(to bottom,transparent,#e2e8f0,transparent)}.editor-section:last-child:after{display:none}.editor-container{display:flex;flex-direction:column;height:100%}.editor-header{padding:10px 20px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}.editor-label{font-size:.75rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}.editor-wrapper{flex:1;min-height:0;overflow:auto;position:relative;background-color:#fff}.preview-pane{flex:2;background-color:#fff;position:relative;display:flex;flex-direction:column;min-height:220px;box-shadow:inset 0 2px 4px #0000000d}.preview-header{padding:12px 24px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#64748b;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.preview-header-title{display:flex;align-items:center;gap:10px}.preview-header-title:before{content:"";width:8px;height:8px;background:#34d399;border-radius:50%;box-shadow:0 0 8px #34d39980}.preview-open-tab-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:.72rem;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.preview-compile-btn{background:#1e293b;border-color:#1e293b;color:#fff}.preview-compile-btn:hover{background:#0f172a;border-color:#0f172a;color:#fff}.html-compiler-page{gap:20px;padding:20px 24px 24px;background-color:#f8fafc;box-sizing:border-box}.html-compiler-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:0;flex-shrink:0}.html-compile-btn{margin-left:auto}.editors-pane--full{flex:1;border-bottom:none;gap:16px;background:transparent;padding:0}.editors-pane--single{display:flex}.editors-pane--single .editor-section{flex:1;min-width:0}.html-compiler-page .editors-pane{flex:1;min-height:0}.html-compiler-page .editor-section{border-radius:12px;border:1px solid #e2e8f0;overflow:hidden}.html-compiler-page .editor-section:after{display:none}.nav-link-compiler-action{border:none;cursor:pointer;font-family:inherit}.preview-header:before{content:none}.preview-pane iframe,.preview-iframe{width:100%;height:100%;flex:1;min-height:0;border:none;display:block}.preview-frame-wrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:#fff}.code-compiler-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:12px 24px 20px;gap:12px;background-color:#f8fafc;color:#0f172a;box-sizing:border-box;font-family:Inter,sans-serif;overflow:hidden}.compiler-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:16px;position:sticky;top:72px;z-index:50;padding:8px 0;background:#f8fafc}.run-button{padding:10px 24px;background:#10b981;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:10px;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #10b98133}.run-button:hover:not(:disabled){background:#059669;transform:translateY(-2px);box-shadow:0 10px 15px -3px #10b98140}.run-button:active:not(:disabled){transform:translateY(0)}.run-button:disabled{opacity:.7;cursor:wait;background:#475569}.compiler-body{display:flex;flex:1;gap:24px;overflow:hidden;min-height:0}.compiler-editor-container{flex:1.2;min-height:0;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background-color:#fff;box-shadow:0 4px 6px -1px #0000000d}.compiler-editor-container .editor-container{flex:1;min-height:0}.editor-header-label{padding:12px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;color:#64748b;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.editor-header-label--with-action{justify-content:space-between}.run-button--toolbar{padding:8px 16px;font-size:.8rem;flex-shrink:0}.code-compiler-container .editor-wrapper{scrollbar-width:thin;scrollbar-color:#cbd5e1 #f8fafc}.code-compiler-container .editor-wrapper::-webkit-scrollbar,.code-compiler-container .terminal-body::-webkit-scrollbar{width:10px;height:10px}.code-compiler-container .editor-wrapper::-webkit-scrollbar-track,.code-compiler-container .terminal-body::-webkit-scrollbar-track{background:#f8fafc}.code-compiler-container .editor-wrapper::-webkit-scrollbar-thumb,.code-compiler-container .terminal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid #f8fafc}.code-compiler-container .terminal-body::-webkit-scrollbar-track{background:#f1f5f9}.code-compiler-container .terminal-body::-webkit-scrollbar-thumb{border-color:#f1f5f9}.compiler-output-container{flex:.8;min-height:0;border:1px solid #e2e8f0;border-radius:16px;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d}.output-label{padding:12px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-weight:600;font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}.terminal-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:20px;background:#fff;overflow:auto;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.output-pre{margin:0;white-space:pre-wrap;color:#334155;background-color:transparent;font-family:Fira Code,Cascadia Code,monospace;font-size:.9rem;line-height:1.6}.output-pre:after{content:"▋";display:inline-block;vertical-align:bottom;animation:blink 1s step-end infinite;color:#34d399;margin-left:4px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.error-message{color:#fca5a5;background:#ef44441a;padding:16px;border-radius:8px;font-family:Fira Code,monospace;font-size:.875rem;border-left:4px solid #ef4444;margin-bottom:16px;display:flex;align-items:center;gap:12px}.fade-in{animation:fadeIn .4s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){body{overflow-y:auto;height:auto;min-height:100dvh}.app-container{height:auto;min-height:100dvh;overflow-y:auto;overflow-x:hidden}.content-area,.route-content{height:auto;overflow:visible;flex:none}.editors-pane{flex-direction:column;height:auto;flex:none}.editor-section{border-right:none;border-bottom:1px solid #e2e8f0;height:400px}.preview-pane{height:400px}.code-compiler-container{height:auto;min-height:calc(100dvh - 72px);padding:15px;overflow-y:auto}.compiler-body{flex-direction:column;flex:1;min-height:680px;overflow:visible}.compiler-editor-container,.compiler-output-container{height:480px;flex:none;min-height:480px}.output-pre{max-height:400px}}span.token{background:transparent!important;border-radius:0!important;padding:0!important;box-shadow:none!important;text-shadow:none!important}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;color:#1e293b;gap:16px}.loader{width:48px;height:48px;border:4px solid rgba(0,0,0,.05);border-radius:50%;border-top-color:#3b82f6;animation:loader-spin 1s linear infinite}@keyframes loader-spin{to{transform:rotate(360deg)}}.loading-overlay p{font-size:1rem;font-weight:500;margin:0;letter-spacing:.5px;opacity:.9}