*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;min-height:100vh}body{font-family:Inter,Vazirmatn,sans-serif;transition:all .5s ease}.font-cyber{font-family:Space Grotesk,Estedad,sans-serif;font-weight:700}.cyber-bg{background:linear-gradient(135deg,#0a0a0f,#1a1a2e,#0f0f1e);background-attachment:fixed;position:relative;color:#fff}.cyber-bg:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(6,182,212,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(236,72,153,.08) 0%,transparent 50%);pointer-events:none;z-index:0}.cyber-bg:after{content:'import React from "react"; const App = () => { return <div className="cyber-container"> <h1>Neon Effect</h1> </div>; }; export default App; function CyberComponent() { const [data, setData] = useState([]); useEffect(() => { loadData(); }, []); return <div onClick={handleAction}>Cyber UI</div>; } npm install react vite; git push origin main; async function fetchAPI() { try { const res = await fetch(endpoint); const json = await res.json(); return json; } catch (err) { console.error(err); } } const glassStyle = { backdropFilter: "blur(40px)" }; interface ComponentProps { theme: string; size: number; } type DataType = { id: string; value: any; }; ';position:fixed;top:0;left:0;width:100%;height:100%;font-family:Courier New,monospace;font-size:13px;color:#06b6d414;line-height:2.2;word-wrap:break-word;overflow:hidden;white-space:pre-wrap;z-index:1;pointer-events:none;padding:60px 40px;letter-spacing:3px;background-image:repeating-linear-gradient(0deg,rgba(6,182,212,.06) 0px,transparent 1px,transparent 50px),repeating-linear-gradient(90deg,rgba(236,72,153,.06) 0px,transparent 1px,transparent 50px)}.light-bg{background:linear-gradient(135deg,#e8dcc8,#d9c7ad,#ccb89a);background-attachment:fixed;position:relative;color:#2c3e50}.light-bg:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(184,134,90,.06) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(201,151,109,.04) 0%,transparent 50%);pointer-events:none;z-index:0}.light-bg:after{content:'import React from "react"; const App = () => { return <div className="container"> <h1>Hello World</h1> </div>; }; export default App; function Component() { const [state, setState] = useState(); useEffect(() => { fetchData(); }, []); return <div onClick={handleClick}>Content</div>; } npm install vite; git commit -m "update"; async function getData() { try { const response = await fetch(url); return response.json(); } catch (error) { console.error(error); } } const styles = { container: { display: flex } }; interface Props { name: string; age: number; } type User = { id: number; email: string; }; ';position:fixed;top:0;left:0;width:100%;height:100%;font-family:Courier New,monospace;font-size:13px;color:#8b64461f;line-height:2.2;word-wrap:break-word;overflow:hidden;white-space:pre-wrap;z-index:1;pointer-events:none;padding:60px 40px;letter-spacing:3px;background-image:repeating-linear-gradient(0deg,rgba(139,100,70,.08) 0px,transparent 1px,transparent 50px),repeating-linear-gradient(90deg,rgba(139,100,70,.08) 0px,transparent 1px,transparent 50px)}.dark .glass-card{background:#ffffff05!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border:1.5px solid rgba(255,255,255,.15)!important;box-shadow:0 8px 32px #0000004d,inset 0 1px 1px #ffffff14!important}@supports not (backdrop-filter: blur(20px)){.dark .glass-card{background:#14141ed9!important}}.light .glass-card{background:#ffffff26!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border:2px solid rgba(255,255,255,.5)!important;box-shadow:0 8px 32px #b8865a1f,inset 0 2px 2px #fff9,inset 0 -2px 2px #b8865a14!important}@supports not (backdrop-filter: blur(20px)){.light .glass-card{background:#f0e6d2d9!important}}.text-neon-3d{text-shadow:0 0 10px rgba(6,182,212,.6),0 0 20px rgba(6,182,212,.4),0 0 30px rgba(236,72,153,.4),2px 2px 4px rgba(0,0,0,.5)}.light .text-neon-3d{text-shadow:0 0 10px rgba(6,182,212,.3),0 0 20px rgba(6,182,212,.2),0 0 30px rgba(236,72,153,.2),1px 1px 2px rgba(0,0,0,.1)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes glow-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-float{animation:float 6s ease-in-out infinite}.animate-glow{animation:glow-pulse 3s ease-in-out infinite}.animate-shimmer{animation:shimmer 3s linear infinite;background-size:2000px 100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}.dark ::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#06b6d4,#ec4899);border-radius:10px;transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#0891b2,#db2777)}.shadow-glass{box-shadow:0 8px 32px #00000026}.shadow-glass-hover{box-shadow:0 12px 48px #06b6d433}.shadow-neon-cyan{box-shadow:0 0 20px #06b6d466,0 0 40px #06b6d433,0 4px 20px #0000001a}.shadow-neon-pink{box-shadow:0 0 20px #ec489966,0 0 40px #ec489933,0 4px 20px #0000001a}*{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-duration:.3s;transition-timing-function:ease-in-out}::selection{background-color:#06b6d480;color:#fff}input:focus,textarea:focus{outline:none;border-color:#06b6d480}.light input:focus,.light textarea:focus{border-color:#06b6d4b3}button{cursor:pointer;-webkit-user-select:none;user-select:none}button:disabled{cursor:not-allowed;opacity:.5}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fade-in .5s ease-out}textarea{scroll-behavior:smooth;scrollbar-width:thin}textarea::-webkit-scrollbar{width:8px}textarea::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}.dark textarea::-webkit-scrollbar-track{background:#0000004d}textarea::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#06b6d4,#ec4899);border-radius:10px}textarea::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#0891b2,#db2777)}textarea{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}textarea::-webkit-scrollbar{display:none}.light .border-white\/5,.light .border-white\/10{border-color:#ffffff80!important}.light .border-white\/18{border-color:#fff9!important}.light .text-cyan-400,.light .text-cyan-600{color:#0891b2!important}.light .text-pink-400,.light .text-pink-600{color:#db2777!important}.light .text-purple-400{color:#9333ea!important}.light .text-gray-900{color:#1f2937!important}.light .text-white{color:#2c3e50!important}.light input,.light textarea{color:#2c3e50!important;background:transparent!important}.light input::placeholder,.light textarea::placeholder{color:#2c3e5080!important}.light .glass-card:hover{background:#fff3!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;border-color:#fff9!important}.dark .glass-card:hover{background:#ffffff08!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;border-color:#fff3!important}