@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap";
:root{--background:#0d1117;--surface:#161b22;--surface-accent:#21262d;--primary:#58a6ff;--secondary:#bc8cff;--accent:#3fb950;--error:#f85149;--warning:#d29922;--text:#c9d1d9;--text-dim:#8b949e;--border:#30363d;--glass:#161b22b3;--font-mono:"Fira Code",monospace;--font-sans:"Inter",sans-serif;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--background);color:var(--text);font-family:var(--font-sans);line-height:1.5;overflow-x:hidden}.matrix-bg{z-index:-1;background-image:radial-gradient(circle,#1c2128 0%,#0d1117 100%);position:fixed;inset:0}.matrix-bg:after{content:"";opacity:.03;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 30m-30 0a30 30 0 1 0 60 0a30 30 0 1 0 -60 0' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");background-size:100px 100px;position:absolute;inset:0}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 2rem}.code-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s;overflow:hidden;box-shadow:0 10px 30px #0006}.code-panel:focus-within{border-color:var(--primary)}.panel-header{background:var(--surface-accent);border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.dot{border-radius:50%;width:12px;height:12px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.btn-dev{border-radius:var(--radius);background:var(--surface-accent);color:var(--text);border:1px solid var(--border);font-family:var(--font-mono);cursor:pointer;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-dev:hover{background:var(--border);border-color:var(--text-dim)}.btn-primary{background:var(--primary);color:#0d1117;border-color:#0000}.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 15px #58a6ff4d}.input-code{width:100%;color:var(--text);font-family:var(--font-mono);resize:vertical;background:0 0;border:none;min-height:300px;padding:1.5rem;font-size:.95rem}.input-code:focus{outline:none}.syntax-purple{color:var(--secondary)}.syntax-blue{color:var(--primary)}.syntax-green{color:var(--accent)}.syntax-orange{color:var(--warning)}.nav-link{color:var(--text-dim);font-size:.9rem;font-family:var(--font-mono);text-decoration:none;transition:all .2s}.nav-link:hover{color:var(--primary)}.hero-title{letter-spacing:-.05em;background:linear-gradient(to right,#fff 30%,var(--primary)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:900}.badge{color:var(--primary);font-size:.75rem;font-weight:700;font-family:var(--font-mono);background:#58a6ff1a;border:1px solid #58a6ff33;border-radius:99px;padding:.25rem .75rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:.5s ease-out forwards fadeUp}html{scrollbar-width:thin;scrollbar-color:var(--border)transparent}