model output
LLaMA 4 Scout

Only CSS: Lanthanum
A 0.50T 0.22
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Lantern Animation</title>
7    <style>
8        body {
9            background-color: #1a1d23;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .lantern {
18            position: relative;
19            width: 50px;
20            height: 80px;
21            background-color: transparent;
22        }
23        .lantern .glass {
24            position: absolute;
25            top: 20px;
26            left: 50%;
27            transform: translateX(-50%);
28            width: 30px;
29            height: 40px;
30            background-color: #fff;
31            border-radius: 10px;
32        }
33        .lantern .flame {
34            position: absolute;
35            bottom: 10px;
36            left: 50%;
37            transform: translateX(-50%);
38            width: 10px;
39            height: 20px;
40            background-color: #ff3737;
41            border-radius: 50%;
42        }
43        .lantern .light {
44            position: absolute;
45            top: 0;
46            left: 0;
47            width: 100%;
48            height: 100%;
49            background-color: rgba(255, 255, 255, 0.2);
50            border-radius: 50%;
51            animation: pulse 2s infinite;
52        }
53        @keyframes pulse {
54            0% {
55                opacity: 0.2;
56            }
57            50% {
58                opacity: 0.5;
59            }
60            100% {
61                opacity: 0.2;
62            }
63        }
64        .lantern .lid {
65            position: absolute;
66            top: 0;
67            left: 50%;
68            transform: translateX(-50%);
69            width: 40px;
70            height: 20px;
71            background-color: #333;
72            border-radius: 10px;
73        }
74        .lantern.loaded {
75            animation: appear 1s;
76        }
77        @keyframes appear {
78            0% {
79                transform: scale(0);
80            }
81            100% {
82                transform: scale(1);
83            }
84        }
85    </style>
86</head>
87<body>
88    <div class="lantern" id="lantern">
89        <div class="glass"></div>
90        <div class="flame"></div>
91        <div class="light"></div>
92        <div class="lid"></div>
93    </div>
94
95    <script>
96        document.addEventListener('DOMContentLoaded', () => {
97            const lantern = document.getElementById('lantern');
98            lantern.classList.add('loaded');
99        });
100    </script>
101</body>
102</html>