@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;}body{background:linear-gradient(135deg,#0a0e27 0%,#1a1f3a 30%,#0d3b66 70%,#1a1f3a 100%);min-height:100vh;font-family:'Inter','Segoe UI',Arial,sans-serif;color:#e2e8f0;position:relative;overflow-x:hidden;}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 10% 20%,rgba(6,182,212,0.08) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(3,102,214,0.06) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(14,165,233,0.02) 0%,transparent 50%);pointer-events:none;z-index:-1;}@keyframes fadeIn{from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);}}@keyframes slideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes slideIn{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(6,182,212,0.3),inset 0 0 1px rgba(14,165,233,0.3);}50%{box-shadow:0 0 40px rgba(6,182,212,0.5),inset 0 0 1px rgba(14,165,233,0.5);}}h1,h2,h3{color:#0ea5e9;font-weight:700;letter-spacing:-0.8px;}h1{font-size:2.8rem;margin-bottom:1.2rem;background:linear-gradient(135deg,#06b6d4 0%,#0ea5e9 50%,#3b82f6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(6,182,212,0.1);font-weight:800;}h2{font-size:2rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#06b6d4 0%,#0ea5e9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}p{color:#cbd5e1;line-height:1.8;font-size:1.05rem;}button{background:linear-gradient(135deg,#0366d6 0%,#0284c7 50%,#0891b2 100%);color:#fff;border:1px solid rgba(14,165,233,0.3);border-radius:12px;padding:1rem 2.4rem;font-size:1.05rem;font-weight:700;margin:0.8rem 0.8rem 0.8rem 0;cursor:pointer;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 8px 24px rgba(3,102,214,0.35),inset 0 1px 0 rgba(255,255,255,0.1);position:relative;overflow:hidden;letter-spacing:0.5px;}button::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,0.3),transparent);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}button:hover::before{width:300px;height:300px;}button:hover:not([disabled]){background:linear-gradient(135deg,#0284c7 0%,#0891b2 50%,#06b6d4 100%);box-shadow:0 12px 40px rgba(6,182,212,0.5),inset 0 1px 0 rgba(255,255,255,0.2);border-color:rgba(6,182,212,0.5);}button:active:not([disabled]){}button:disabled,button[aria-disabled="true"]{background:linear-gradient(135deg,#475569 0%,#334155 100%);cursor:not-allowed;opacity:0.5;box-shadow:0 2px 8px rgba(0,0,0,0.3);border-color:rgba(148,163,184,0.2);}input,textarea{border:2px solid #0d5a5a;border-radius:12px;padding:1rem;font-size:1rem;margin-bottom:1.3rem;outline:none;background:linear-gradient(135deg,#0f172a 0%,#1a2942 100%);color:#e2e8f0;font-family:'Inter',sans-serif;transition:all 0.35s ease;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);}input::placeholder,textarea::placeholder{color:#64748b;font-weight:500;}input:focus,textarea:focus{border-color:#06b6d4;background:linear-gradient(135deg,#0a0e27 0%,#1a2942 100%);box-shadow:0 0 0 4px rgba(6,182,212,0.15),inset 0 0 10px rgba(6,182,212,0.05);}textarea{resize:vertical;min-height:11rem;width:100%;font-family:'Fira Code','Consolas',monospace;line-height:1.6;}.card{background:linear-gradient(135deg,rgba(15,23,42,0.7) 0%,rgba(30,41,59,0.7) 100%);backdrop-filter:blur(20px);border:1.5px solid rgba(6,182,212,0.25);border-radius:20px;padding:3.5rem;margin:2.5rem auto;max-width:650px;box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 1px rgba(6,182,212,0.4) inset,0 -1px 20px rgba(3,102,214,0.1);transition:all 0.45s ease;position:relative;}.card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(6,182,212,0.02) 0%,transparent 50%);border-radius:20px;pointer-events:none;}.card:hover{border-color:rgba(6,182,212,0.5);box-shadow:0 16px 48px rgba(3,102,214,0.25),0 0 1px rgba(6,182,212,0.6) inset,0 -1px 30px rgba(6,182,212,0.15);}a{color:#06b6d4;text-decoration:none;font-weight:700;transition:all 0.3s ease;position:relative;}a:hover{color:#0ea5e9;}label{font-weight:700;display:block;margin-bottom:0.6rem;color:#cbd5e1;font-size:0.98rem;letter-spacing:0.3px;}.error{color:#ff6b6b;font-weight:700;margin:1.3rem 0 0.8rem 0;padding:1rem 1.3rem;background:linear-gradient(135deg,rgba(255,107,107,0.12) 0%,rgba(255,107,107,0.06) 100%);border-left:5px solid #ff6b6b;border-radius:8px;box-shadow:0 4px 12px rgba(255,107,107,0.15);}.codeblock{text-align:left;background:linear-gradient(135deg,#0a0e27 0%,#1a2942 100%);border:1.5px solid rgba(6,182,212,0.2);border-radius:14px;padding:1.8rem;font-family:'Fira Code','Consolas',monospace;font-size:0.98rem;overflow-x:auto;margin:1.8em 0 0.8em 0;line-height:1.7;color:#cbd5e1;box-shadow:inset 0 2px 8px rgba(0,0,0,0.3);}.codeblock::-webkit-scrollbar{height:8px;width:8px;}.codeblock::-webkit-scrollbar-track{background:rgba(6,182,212,0.05);border-radius:10px;}.codeblock::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0ea5e9 0%,#06b6d4 100%);border-radius:10px;}.codeblock::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#06b6d4 0%,#0891b2 100%);}footer{text-align:center;margin-top:4rem;padding:2.5rem;color:#94a3b8;font-size:0.95rem;border-top:1px solid rgba(6,182,212,0.15);letter-spacing:0.3px;}footer p{margin:0.7rem 0;animation:none;}footer a{color:#06b6d4;font-weight:700;transition:all 0.3s ease;}footer a:hover{color:#0ea5e9;}@media (max-width:768px){h1{font-size:2.2rem;}h2{font-size:1.6rem;}.card{padding:2.2rem;margin:1.5rem auto;border-radius:16px;}button{padding:0.8rem 2rem;font-size:0.95rem;margin:0.6rem 0.6rem 0.6rem 0;}input,textarea{font-size:16px;}}@media (max-width:480px){h1{font-size:1.8rem;}.card{padding:1.5rem;border-radius:14px;}button{padding:0.7rem 1.5rem;font-size:0.9rem;}}.token.tag,.token.keyword{color:#0ea5e9;}.token.string{color:#10b981;}.token.number{color:#f59e0b;}.token.function{color:#06b6d4;}.token.punctuation{color:#94a3b8;}.token.operator{color:#0ea5e9;}.token.comment{color:#64748b;}