@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Moon+Dance&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Moon+Dance&family=Fira+Code:wght@400;500&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&family=Moon+Dance&display=swap";@import"https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Pacifico&display=swap";body{margin:0;width:100vw;height:100vh;padding:0;border:1px solid rgb(0,0,0);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{max-width:1280px;margin:0 auto;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.mobile{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#111827,#1f2937);color:#fff;font-family:var(--font-primary);padding:var(--space-xl);text-align:center;position:relative;overflow:hidden;z-index:100}.mobile:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);z-index:-1;animation:pulse 15s infinite alternate ease-in-out}.mobile h1{font-size:2rem;font-weight:700;margin-bottom:var(--space-lg);background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mobile p{font-size:1.2rem;max-width:80%;color:var(--text-muted-light);line-height:1.6}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}.mobile svg{animation:logo-spin infinite 20s linear}}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card{padding:2em}.read-the-docs{color:#888}*{list-style-type:none;text-decoration:none;margin:0;padding:0;box-sizing:border-box}a{color:inherit}.navbar ul{display:flex;justify-content:space-between;align-items:center;width:100%}.navbar ul li{display:flex;align-items:center;gap:var(--space-md)}.logofont{font-family:var(--font-logo);font-weight:400;font-size:2.25rem;background:linear-gradient(135deg,var(--primary-color) 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all var(--transition-normal)}.sidebar{position:fixed;left:0;top:60px;width:240px;height:calc(100vh - 60px);background-color:var(--surface-color);color:var(--text-color);box-shadow:var(--shadow-sm);z-index:90;transition:all var(--transition-normal);overflow-y:auto}.sidebar ul{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs)}.icons{height:24px;width:24px;color:var(--primary-color);transition:all var(--transition-fast)}.components{width:100%;cursor:pointer;display:flex;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);align-items:center;justify-content:start;transition:all var(--transition-fast)}.components:hover{background-color:#3b82f61a}.components:active{background-color:#3b82f633}.sidebar li{text-align:left;flex:1;font-weight:500;font-size:.95rem}.workspace{height:calc(100vh - 60px);width:calc(100% - 240px);position:fixed;top:60px;left:240px;padding:var(--space-md);overflow:hidden;transition:all var(--transition-normal)}.workspace textarea{border:none;height:100%;width:100%;box-sizing:border-box;resize:none;padding:var(--space-lg);border-radius:var(--radius-md);background-color:var(--surface-color);color:var(--text-color);box-shadow:var(--shadow-md);transition:all var(--transition-normal);line-height:1.6}textarea:focus{outline:none;box-shadow:0 0 0 2px var(--primary-light)}.dropdown{background-color:var(--surface-color);position:relative;padding:var(--space-md);margin-left:var(--space-md);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:80;display:none;max-height:300px;overflow-y:auto}.dropdown-content{position:absolute;background-color:var(--surface-color);padding:var(--space-md);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:101;font-size:.9rem;font-weight:500;cursor:pointer;min-width:120px}.dropdown-content:hover{background-color:#3b82f61a}.username{font-weight:500;background-color:#3b82f61a;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:.9rem}.navlinks{display:flex;align-items:center;gap:var(--space-lg)}.toast-notification{position:fixed;bottom:var(--space-lg);right:var(--space-lg);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background-color:var(--surface-color);color:var(--text-color);box-shadow:var(--shadow-lg);z-index:1000;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:var(--space-sm);max-width:300px;animation:slideIn .3s ease,fadeOut .3s ease 2.7s}.toast-notification.success{border-left:3px solid var(--success-color)}.toast-notification.success:before{content:"✓";color:var(--success-color);font-weight:700}.toast-notification.error{border-left:3px solid var(--error-color)}.toast-notification.error:before{content:"✕";color:var(--error-color);font-weight:700}.toast-notification.info{border-left:3px solid var(--info-color)}.toast-notification.info:before{content:"ℹ";color:var(--info-color);font-weight:700}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}body.dark .workspace textarea{background-color:var(--dark-surface);box-shadow:0 0 0 1px #ffffff1a}body.dark .components:hover{background-color:#ffffff0d}body.dark .components:active{background-color:#ffffff1a}body.dark .toast-notification{background-color:var(--dark-surface)}body.light .workspace textarea,body.light .toast-notification{background-color:var(--light-surface)}.file-list{max-height:300px;overflow-y:auto;background-color:var(--surface-color);color:var(--text-color);border-radius:var(--radius-md);padding:var(--space-sm);width:100%}.file-list ul{list-style:none;padding:0;margin:0}.file-item{padding:var(--space-sm) var(--space-md);cursor:pointer;transition:all var(--transition-fast);font-size:.9rem;display:flex;align-items:start;margin-bottom:2px;border-bottom:1px black solid}.file-item:last-child{border:none!important}.file-item:before{content:"📄";margin-right:var(--space-sm);font-size:1rem}.file-item:hover{background-color:#3b82f61a}.file-item:active{background-color:#3b82f633}.error{color:#ef4444;padding:var(--space-sm);font-size:.9rem;background-color:#ef44441a;border-radius:var(--radius-sm);margin-bottom:var(--space-sm)}body.dark .file-item:hover{background-color:#ffffff0d}body.dark .file-item:active{background-color:#ffffff1a}.navbar{height:60px;width:100%;position:fixed;top:0;left:0;display:flex;align-items:center;background-color:var(--surface-color);color:var(--text-color);font-size:1rem;padding:0 var(--space-lg);box-shadow:var(--shadow-sm);z-index:100;transition:all var(--transition-normal)}.navbar h1{font-family:var(--font-logo);font-weight:400;font-size:2rem;background:linear-gradient(135deg,var(--primary-color) 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all var(--transition-normal)}.navbar-items{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--space-lg)}.navbar-controls{display:flex;align-items:center;gap:var(--space-md)}.options{min-width:120px;z-index:101}.theme-icons{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.icon{height:24px;width:24px;color:var(--primary-color);transition:all var(--transition-fast);cursor:pointer}.icon:hover{color:var(--accent-color)}.font-size-control{display:flex;align-items:center;gap:var(--space-xs)}.navbar label{font-size:.95rem;font-weight:500;white-space:nowrap}.navbar input[type=range]{width:80px;cursor:pointer;accent-color:var(--primary-color)}.navbar a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);background-color:#3b82f61a;color:var(--text-color);font-weight:500;font-size:.9rem;text-decoration:none;transition:all var(--transition-fast)}.navbar-logo{padding:0 1rem!important}.navbar a:hover{background-color:#3b82f633}.logout-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);background-color:#ef44441a;color:var(--text-color);font-weight:500;font-size:.9rem;border:none;font-family:var(--font-primary);cursor:pointer;transition:all var(--transition-fast)}.logout-btn:hover{background-color:#ef444433}.logout-btn .icon{color:var(--error-color)}body.dark .navbar{background-color:var(--dark-surface);color:var(--text-light)}body.light .navbar{background-color:var(--light-surface);color:var(--text-dark)}@media (max-width: 992px){.navbar{padding:0 var(--space-md)}.navbar h1{font-size:1.5rem}.navbar a span,.logout-btn span{display:none}}@media (max-width: 768px){.navbar label{display:none}.navbar-controls{gap:var(--space-sm)}}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-primary);color:var(--text-dark);background-color:var(--light-surface);overflow:hidden!important}.container{display:flex;width:100vw;height:100vh;background:linear-gradient(135deg,#111827,#1f2937);position:relative;overflow:hidden!important}#logofont{position:absolute;top:2rem;left:2rem;font-family:var(--font-logo);font-weight:800;font-size:3rem;color:var(--primary-light);z-index:10;text-shadow:0 2px 10px rgba(59,130,246,.3)}.pencil{position:absolute;z-index:111;top:50%;left:46%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}.note{position:absolute;z-index:111;top:50%;left:50%;transform:translate(-50%,-50%);animation:note 1.5s infinite alternate ease-in-out;filter:drop-shadow(0 0 5px rgba(255,255,255,.3))}.side{width:50vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text-light);font-family:var(--font-display);text-align:center;padding:var(--space-2xl);background:linear-gradient(135deg,#2563eb0d,#1d4ed81a);position:relative;overflow:hidden}.side:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);z-index:-1;animation:pulse 15s infinite alternate ease-in-out}.side h1{font-size:3.5rem;font-weight:700;margin-bottom:var(--space-lg);background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 10px rgba(59,130,246,.2)}.side h1:after{content:"";display:block;width:50%;height:3px;background:linear-gradient(90deg,#3b82f6 0%,transparent 100%);margin:var(--space-md) auto 0;border-radius:var(--radius-full)}.side h2{font-size:1.5rem;font-weight:400;color:var(--text-muted-light);margin-top:var(--space-lg)}.body{width:50vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:var(--light-surface);font-family:var(--font-primary);position:relative}.form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:65%;max-width:400px;padding:var(--space-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background-color:var(--light-surface);border:1px solid var(--border-color);transition:all var(--transition-normal)}.form:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.form h1.login{font-size:2.25rem;margin-bottom:var(--space-xl);color:var(--text-dark);font-weight:600;position:relative}.form h1.login:after{content:"";position:absolute;left:50%;bottom:-8px;width:40px;height:4px;background-color:var(--primary-color);transform:translate(-50%);border-radius:var(--radius-full)}.form-group{position:relative;width:100%;margin-bottom:var(--space-lg)}.form-group input{width:100%;padding:var(--space-md) var(--space-md);border:none;border-bottom:2px solid var(--text-muted-dark);background:transparent;font-size:1rem;font-family:var(--font-primary);transition:all var(--transition-fast);outline:none}.form-group input:focus{border-color:var(--primary-color);box-shadow:0 2px #3b82f633}.form-group input::placeholder{color:var(--text-muted-dark);opacity:.7}.button{font-family:var(--font-primary);font-size:1rem;font-weight:600;cursor:pointer;width:100%;padding:var(--space-md);border:none;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:var(--text-light);transition:all var(--transition-fast);box-shadow:var(--shadow-md);letter-spacing:.5px;margin-top:var(--space-md)}.button:hover{transform:translateY(-2px);box-shadow:0 8px 15px #2563eb40}.button:active{transform:translateY(0);box-shadow:0 4px 6px #2563eb33}.register{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:var(--space-lg);font-family:var(--font-primary);font-size:.9rem;color:var(--text-muted-dark)}.register span{cursor:pointer;font-weight:600;color:var(--primary-color);transition:color var(--transition-fast);text-decoration:underline;text-underline-offset:2px}.register span:hover{color:var(--primary-dark)}.eye{height:20px;width:20px;position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);cursor:pointer;color:var(--text-muted-dark);transition:color var(--transition-fast)}.eye:hover{color:var(--primary-color)}#eyeOff{display:none}@keyframes note{0%{transform:translate(-50%,-50%)}to{transform:translate(-50%,-45%)}}@keyframes pulse{0%{opacity:.3}50%{opacity:.6}to{opacity:.3}}@media (max-width: 768px){.side{display:none}.body{width:100vw}.form{width:85%;padding:var(--space-lg)}}:root{--primary-color: #4361ee;--primary-light: #4895ef;--primary-dark: #3a0ca3;--secondary-color: #4cc9f0;--accent-color: #f72585;--dark-bg: #0d1117;--dark-surface: #161b22;--light-bg: #f8fafc;--light-surface: #ffffff;--text-dark: #1a202c;--text-light: #f8fafc;--text-muted-dark: #64748b;--text-muted-light: #cbd5e1;--font-primary: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;--font-display: "Manrope", "Poppins", sans-serif;--font-logo: "Pacifico", "Moon Dance", cursive;--space-3xs: .125rem;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--border-thin: 1px;--border-medium: 2px;--border-thick: 3px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-focus: 0 0 0 3px rgba(67, 97, 238, .3);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));--gradient-accent: linear-gradient(135deg, var(--primary-light), var(--accent-color));--gradient-cool: linear-gradient(135deg, var(--secondary-color), var(--primary-color))}.dark{--bg-color: var(--dark-bg);--surface-color: var(--dark-surface);--surface-color-hover: #1c2128;--surface-color-active: #22272e;--text-color: var(--text-light);--text-muted: var(--text-muted-light);--border-color: rgba(240, 246, 252, .1);--hover-bg: rgba(177, 186, 196, .08);--active-bg: rgba(177, 186, 196, .12);--focus-ring: 0 0 0 2px rgba(67, 97, 238, .4);--surface-raised: #22272e}.light{--bg-color: var(--light-bg);--surface-color: var(--light-surface);--surface-color-hover: #f1f5f9;--surface-color-active: #e2e8f0;--text-color: var(--text-dark);--text-muted: var(--text-muted-dark);--border-color: rgba(15, 23, 42, .08);--hover-bg: rgba(15, 23, 42, .04);--active-bg: rgba(15, 23, 42, .08);--focus-ring: 0 0 0 2px rgba(67, 97, 238, .25);--surface-raised: #ffffff}*{margin:0;padding:0;box-sizing:border-box;list-style-type:none;text-decoration:none}body{font-family:var(--font-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}.App{background-color:var(--bg-color);color:var(--text-color)}.main{font-family:var(--font-primary);display:flex;height:calc(100vh - 60px);width:100%;gap:var(--space-md);padding:var(--space-md);position:fixed;top:60px;left:0;overflow:hidden;transition:all var(--transition-normal)}.left-container{position:relative;flex:60%;height:100%;display:flex;flex-direction:column;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);background-color:var(--surface-color)}.editor{border:1px solid var(--border-color);border-radius:var(--radius-md);height:100%;transition:all var(--transition-normal)}.right-container{flex:40%;height:100%;display:flex;flex-direction:column;background-color:var(--surface-color);padding:var(--space-md);gap:var(--space-md);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.input-box{flex:1;display:flex;flex-direction:column}.input-box textarea{background-color:var(--bg-color);color:var(--text-color);font-size:1rem;font-family:var(--font-mono);width:100%;height:100%;resize:none;padding:var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-md);box-sizing:border-box;transition:all var(--transition-fast);line-height:1.6}.input-box textarea:focus{outline:none;box-shadow:0 0 0 2px var(--primary-light)}.input-box textarea::placeholder{color:var(--text-muted)}.output-box{flex:1;background-color:var(--bg-color);color:var(--text-color);overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-md);position:relative;display:flex;box-shadow:var(--shadow-md)}.output-box pre{text-align:left;font-size:.95rem;font-family:var(--font-mono);white-space:pre-wrap;word-wrap:break-word;line-height:1.5;width:100%;padding-bottom:50px}.spinner-box{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.run-btn,.clear-btn{position:absolute;bottom:var(--space-md);right:var(--space-md);min-width:100px;height:40px;font-size:.95rem;font-weight:600;font-family:var(--font-primary);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.run-btn{background-color:var(--primary-color);color:var(--text-light);border:none;z-index:10}.run-btn:hover:not(:disabled){transform:translateY(-2px);background-color:var(--primary-dark);box-shadow:var(--shadow-lg)}.run-btn:active:not(:disabled){transform:translateY(0)}.run-btn:disabled{opacity:.7;cursor:not-allowed}.clear-btn{background-color:var(--surface-color);color:var(--text-color);border:1px solid var(--border-color)}.clear-btn:hover{background-color:#3b82f61a}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h4{color:var(--primary-color);margin-bottom:var(--space-sm);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;font-family:var(--font-display)}h4:after{content:"";flex:1;height:1px;background:linear-gradient(to right,rgba(59,130,246,.5),transparent);margin-left:var(--space-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#3b82f64d;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background-color:#3b82f680}body.dark .App{background-color:var(--dark-bg)}body.dark .left-container,body.dark .right-container{background-color:var(--dark-surface)}body.dark .input-box textarea,body.dark .output-box{background-color:var(--dark-bg);color:var(--text-light)}body.dark .clear-btn{background-color:var(--dark-surface);color:var(--text-light)}body.light .App{background-color:var(--light-bg);color:var(--text-dark)}body.light .left-container,body.light .right-container{background-color:var(--light-surface)}body.light .input-box textarea,body.light .output-box{background-color:var(--light-bg);color:var(--text-dark)}body.light .clear-btn{background-color:var(--light-surface);color:var(--text-dark)}@media (max-width: 992px){.main{flex-direction:column;height:auto;min-height:calc(100vh - 60px);overflow-y:auto;padding-bottom:var(--space-xl)}.left-container{height:50vh;min-height:300px}.right-container{height:auto;min-height:300px}}@media (max-width: 768px){.main{padding:var(--space-sm);gap:var(--space-sm)}.run-btn,.clear-btn{bottom:var(--space-sm);right:var(--space-sm);min-width:90px;height:36px;font-size:.9rem}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.output-box pre:not(:empty){animation:fadeIn .3s ease-in-out}