:root{--bg-color: #0b101b;--header-bg: #0b101b;--editor-bg: #11161f;--editor-header-bg: #161b22;--text-primary: #ffffff;--text-secondary: #8b949e;--accent-color: #58a6ff;--border-color: #30363d;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column}#root{width:100%;max-width:100%;padding:0;display:flex;flex-direction:column;flex:1}.top-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:var(--header-bg);border-bottom:1px solid transparent}.logo-container{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.5rem;color:var(--text-primary);text-decoration:none}.logo-img{height:100px;width:auto}.header-nav-links{display:flex;gap:2rem;align-items:center}.header-nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;padding:.5rem 0;transition:color .2s ease;position:relative}.header-nav-links a:hover{color:var(--accent-color)}.header-nav-links a.active{color:var(--accent-color);font-weight:600}.header-nav-links a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--accent-color)}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem 4rem 2rem;width:100%;box-sizing:border-box}.hero-section{text-align:center;margin-bottom:3rem;margin-top:0}.hero-title{font-size:3rem;font-weight:800;line-height:1.1;margin:0;letter-spacing:-.02em}.hero-subtitle{color:var(--text-secondary);font-size:1.2rem;margin-top:1rem;font-weight:400}.converter-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:100%;max-width:1600px;height:70vh;min-height:600px}.editor-container{display:flex;flex-direction:column;background-color:var(--editor-bg);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;height:100%}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--editor-header-bg);border-bottom:1px solid var(--border-color);height:40px}.editor-tabs{display:flex;gap:1rem}.editor-tab{background:none;border:none;color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;padding:.25rem 0;position:relative}.editor-tab:hover,.editor-tab.active{color:var(--text-primary)}.editor-tab.active:after{content:"";position:absolute;bottom:-13px;left:0;width:100%;height:2px;background-color:var(--accent-color)}.editor-actions{display:flex;gap:.5rem}.action-btn{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:.25rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.action-btn:hover{background-color:#ffffff0d;color:var(--text-primary);border-color:var(--text-secondary)}.editor-content{flex:1;position:relative;display:flex}.line-numbers{width:40px;background-color:var(--editor-bg);border-right:1px solid var(--border-color);color:#484f58;font-family:Menlo,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;padding:1rem .5rem 1rem 0;text-align:right;-webkit-user-select:none;user-select:none;overflow:hidden}textarea{flex:1;background-color:var(--editor-bg);color:var(--text-primary);border:none;padding:1rem;font-family:Menlo,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;resize:none;outline:none;width:100%;box-sizing:border-box}textarea::placeholder{color:#484f58;font-style:italic}.footer{margin-top:auto;padding:2rem;border-top:1px solid var(--border-color);background-color:var(--header-bg);text-align:center}.faq-section{margin-top:4rem;width:100%;max-width:900px;padding-bottom:4rem}.faq-section h2{text-align:center;margin-bottom:2rem;font-size:2rem}.faq-item{background-color:var(--editor-header-bg);border:1px solid var(--border-color);margin-bottom:1rem;border-radius:6px}@media (max-width: 768px){.top-nav{flex-direction:column;gap:1rem;padding:1rem}.header-nav-links{gap:1.5rem;flex-wrap:wrap;justify-content:center}.main-content{padding:1rem}.converter-grid{grid-template-columns:1fr;height:auto}.editor-container{height:500px}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem;padding:0 1rem}.stats-container{grid-template-columns:1fr}.page-container{padding:1rem}.page-container h1{font-size:2rem}.logo-img{height:60px}.btn-text{display:none}.editor-header{padding:.5rem}.action-select{padding-right:1.5rem;width:auto;max-width:80px}}.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:none;border:none;color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;text-align:left;transition:background-color .2s}.faq-question:hover{background-color:#ffffff0d}.faq-answer{padding:0 1.5rem 1.5rem;color:var(--text-secondary);line-height:1.6;border-top:1px solid transparent}.action-select{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:.25rem 2rem .25rem .5rem;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:1em}.action-select:hover{background-color:#ffffff0d;color:var(--text-primary);border-color:var(--text-secondary)}.action-select option{background-color:var(--editor-bg);color:var(--text-primary)}.stats-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;width:100%;max-width:900px;margin-top:2rem;margin-bottom:2rem}.stat-item{background-color:var(--editor-header-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.stat-item.highlight{border-color:var(--accent-color);background-color:#58a6ff1a}.stat-label{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem;font-weight:500}.stat-value{color:var(--text-primary);font-size:1.5rem;font-weight:700}.stat-item.highlight .stat-value{color:var(--accent-color)}.page-container{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%;text-align:left}.page-container h1{margin-bottom:1.5rem;font-size:2.5rem;text-align:left}.page-container h2{margin-top:2rem;margin-bottom:1rem;font-size:1.8rem;text-align:left}.page-container h3{margin-top:1.5rem;margin-bottom:.75rem;font-size:1.3rem;text-align:left}.page-container p{line-height:1.6;margin-bottom:1rem;text-align:left}.page-container ul,.page-container ol{text-align:left;margin-left:1.5rem;margin-bottom:1rem;line-height:1.6}.page-container li{margin-bottom:.5rem}.page-container section{margin-bottom:2rem}.page-container a{color:var(--accent-color);text-decoration:underline}.page-container a:hover{color:var(--text-primary)}.footer{margin-top:4rem;padding:2rem 0;border-top:1px solid var(--border-color);background-color:#0f172a4d}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .2s}.footer-links a:hover{color:var(--accent-color)}.footer-links a.active{color:var(--accent-color);font-weight:600}.copyright{color:var(--text-secondary);font-size:.85rem;margin:0}.copyright a{color:var(--accent-color);text-decoration:none}.copyright a:hover{text-decoration:underline}.container{flex:1;display:flex;flex-direction:column;min-height:calc(100vh - 200px)}.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)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}