changed theme from ny

package-lock.json

@@ -4,6 +4,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "goose-highlighter",
       "devDependencies": {
         "@eslint/css": "^0.9.0",
         "@eslint/js": "^9.30.0",
@@ -333,7 +334,6 @@
       "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^6.0.0",
         "@octokit/graphql": "^9.0.3",
@@ -1062,7 +1062,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1889,7 +1888,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2862,16 +2860,16 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
       "dev": true,
       "license": "MIT"
     },
@@ -2948,7 +2946,6 @@
       "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -5640,7 +5637,6 @@
       "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6463,7 +6459,6 @@
       "integrity": "sha512-phCkJ6pjDi9ANdhuF5ElS10GGdAKY6R1Pvt9lT3SFhOwM4T7QZE7MLpBDbNruUx/Q3gFD92/UOFringGipRqZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^13.0.0-beta.1",
         "@semantic-release/error": "^4.0.0",
@@ -7167,7 +7162,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7233,7 +7227,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

popup/popup.css

@@ -1,30 +1,32 @@
 :root {
-  --bg-color: #0d0f13;
-  --text-color: #e8e8e8;
-  --input-bg: #171b22;
-  --input-border: #2d2d2d;
-  --button-bg: #252525;
-  --button-hover: #333333;
-  --button-text: #e8e8e8;
-  --accent: #7dc7ff;
-  --accent-hover: #a9ddff;
-  --accent-text: #000000;
-  --highlight-tag: #222222;
-  --highlight-tag-border: #3a3a3a;
-  --danger: #ef4444;
-  --success: #10b981;
-  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
-  --border-radius: 10px;
-  --section-bg: #13161c;
-  --switch-bg: #3a3a3a;
-  --checkbox-accent: #ec9c23;
-  --checkbox-border: #4a4a4a;
+  --bg-color: #12100e;
+  --text-color: #f4ede6;
+  --input-bg: #1a1714;
+  --input-border: #3a2e26;
+  --button-bg: #2b211b;
+  --button-hover: #3a2c24;
+  --button-text: #f7efe9;
+  --accent: #f2a865;
+  --accent-hover: #f7c38a;
+  --accent-text: #1b120b;
+  --highlight-tag: #231a14;
+  --highlight-tag-border: #46372c;
+  --danger: #f87171;
+  --success: #4ade80;
+  --shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.4);
+  --border-radius: 12px;
+  --section-bg: #17130f;
+  --switch-bg: #4b3a2f;
+  --checkbox-accent: #f2a865;
+  --checkbox-border: #5a483b;
+  --focus-ring: 0 0 0 3px rgba(242, 168, 101, 0.2);
 }
 
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: var(--bg-color);
+  background: radial-gradient(120% 120% at 10% 0%, rgba(242, 168, 101, 0.08) 0%, transparent 45%),
+    linear-gradient(180deg, var(--bg-color) 0%, #0f0d0b 100%);
   color: var(--text-color);
   margin: 0;
   padding: 0;
@@ -73,33 +75,39 @@ body {
 }
 
 body.light {
-  --bg-color: #eef6ff;
-  --text-color: #1a1a1a;
-  --input-bg: #f3f8ff;
-  --input-border: #d0e4ff;
-  --button-bg: #e0f0ff;
-  --button-hover: #cde8ff;
-  --button-text: #1a1a1a;
-  --accent: #5ab6ff;
-  --accent-text: #000;
-  --accent-hover: #8ccfff;
-  --highlight-tag: #d8edff;
-  --highlight-tag-border: #c0e0ff;
+  --bg-color: #fbf6f1;
+  --text-color: #3b2a21;
+  --input-bg: #ffffff;
+  --input-border: #e6d7cc;
+  --button-bg: #f6eee7;
+  --button-hover: #efe3d9;
+  --button-text: #3b2a21;
+  --accent: #cc6a2a;
+  --accent-text: #ffffff;
+  --accent-hover: #e07b36;
+  --highlight-tag: #f2e7dd;
+  --highlight-tag-border: #e7d2c1;
   --danger: #ef4444;
   --success: #10b981;
-  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --section-bg: #f3f8ff;
-  --switch-bg: #d1d5db;
-  --checkbox-accent: #ec9c23;
-  --checkbox-border: #9ca3af;
+  --shadow: 0 10px 22px rgba(59, 42, 33, 0.12);
+  --shadow-sm: 0 4px 10px rgba(59, 42, 33, 0.08);
+  --section-bg: #fffaf6;
+  --switch-bg: #e1d5cb;
+  --checkbox-accent: #cc6a2a;
+  --checkbox-border: #d8c8bb;
+  --focus-ring: 0 0 0 3px rgba(204, 106, 42, 0.2);
+}
+
+body.light {
+  background: radial-gradient(120% 120% at 12% 0%, rgba(204, 106, 42, 0.08) 0%, transparent 45%),
+    linear-gradient(180deg, var(--bg-color) 0%, #f4e9df 100%);
 }
 
 .container {
-  padding: 12px;
+  padding: 14px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
   flex: 1;
   overflow: hidden;
   min-height: 0;
@@ -108,16 +116,20 @@ body.light {
 /* Tabs */
 .tabs {
   display: flex;
-  gap: 4px;
-  border-bottom: 2px solid var(--input-border);
+  gap: 6px;
+  padding: 6px;
+  border-radius: 12px;
+  background: var(--section-bg);
+  border: 1px solid var(--input-border);
+  box-shadow: var(--shadow-sm);
   margin-bottom: 8px;
 }
 
 .tab-button {
   flex: 1;
   background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
+  border: 1px solid transparent;
+  border-bottom: none;
   padding: 8px 6px;
   font-size: 0.75em;
   font-weight: 500;
@@ -128,8 +140,9 @@ body.light {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  margin-bottom: -2px;
+  margin-bottom: 0;
   transition: all 0.2s;
+  border-radius: 10px;
 }
 
 .tab-button:hover {
@@ -139,8 +152,10 @@ body.light {
 
 .tab-button.active {
   opacity: 1;
-  border-bottom-color: var(--accent);
-  color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-text);
+  border-color: transparent;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
 }
 
 .tab-button i {
@@ -165,15 +180,15 @@ body.light {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 12px;
-  background: linear-gradient(135deg, var(--section-bg) 0%, var(--input-bg) 100%);
-  border-radius: 8px;
-  border: 1px solid var(--input-border);
+  padding: 12px 14px;
+  background: linear-gradient(145deg, var(--section-bg) 0%, var(--input-bg) 100%);
+  border-radius: 14px;
+  border: 1px solid var(--highlight-tag-border);
   color: var(--text-color);
   font-weight: 600;
   font-size: 0.95em;
   margin-bottom: 0;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow);
   letter-spacing: -0.02em;
 }
 
@@ -200,12 +215,14 @@ body.light {
   display: flex;
   align-items: center;
   padding: 4px;
-  border-radius: 4px;
+  border-radius: 8px;
+  border: 1px solid transparent;
 }
 
 .icon-toggle:hover {
   color: var(--accent-hover);
   background: var(--highlight-tag);
+  border-color: var(--highlight-tag-border);
 }
 
 .hidden-toggle {
@@ -238,10 +255,10 @@ body.light {
 /* Sections */
 .section {
   background: var(--section-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
-  padding: 10px;
-  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--highlight-tag-border);
+  border-radius: 14px;
+  padding: 12px;
+  box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
 }
@@ -254,6 +271,13 @@ body.light {
   flex: 1;
   overflow: hidden;
   min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto auto 1fr;
+  row-gap: 6px;
+}
+
+.section[data-section="addwords"] textarea {
+  height: 44px;
 }
 
 .section h3 {
@@ -273,8 +297,8 @@ input[type="text"],
 textarea,
 select {
   width: 100%;
-  padding: 6px 8px;
-  border-radius: 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
   border: 1px solid var(--input-border);
   background-color: var(--input-bg);
   color: var(--text-color);
@@ -290,12 +314,12 @@ textarea:focus,
 select:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(236, 156, 35, 0.1);
+  box-shadow: var(--focus-ring);
 }
 
 textarea {
   resize: none;
-  height: 50px;
+  height: 60px;
   font-size: 0.85em;
   line-height: 1.4;
   font-family: inherit;
@@ -305,7 +329,7 @@ textarea {
 input[type="color"] {
   background: none;
   border: 1.5px solid var(--input-border);
-  border-radius: 6px;
+  border-radius: 8px;
   box-shadow: var(--shadow-sm);
   width: 24px;
   height: 24px;
@@ -366,7 +390,7 @@ input[type="checkbox"] {
   appearance: none;
   background-color: var(--input-bg);
   border: 1.5px solid var(--checkbox-border);
-  border-radius: 3px;
+  border-radius: 4px;
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -451,8 +475,8 @@ button {
   background: var(--button-bg);
   color: var(--button-text);
   border: 1px solid var(--input-border);
-  padding: 6px 10px;
-  border-radius: 6px;
+  padding: 8px 12px;
+  border-radius: 10px;
   font-weight: 500;
   cursor: pointer;
   display: inline-flex;
@@ -473,6 +497,7 @@ button i {
 
 button:hover {
   background: var(--button-hover);
+  border-color: var(--highlight-tag-border);
 }
 
 button.danger {
@@ -495,6 +520,18 @@ button.danger:hover {
   align-items: center;
 }
 
+.section[data-section="wordlist"] .button-row {
+  flex-wrap: wrap;
+  overflow: visible;
+  gap: 4px;
+  margin: 0;
+}
+
+.section[data-section="wordlist"] .button-row button {
+  padding: 6px 8px;
+  font-size: 0.72em;
+}
+
 .button-row button {
   flex-shrink: 0;
 }
@@ -505,12 +542,15 @@ button.danger:hover {
   gap: 6px;
   cursor: pointer;
   font-size: 0.8em;
-  padding: 4px 8px;
-  border-radius: 4px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--input-border);
+  background: var(--input-bg);
 }
 
 .button-row label:hover {
   background: var(--highlight-tag);
+  border-color: var(--highlight-tag-border);
 }
 
 .button-row input[type="checkbox"] {
@@ -525,8 +565,7 @@ input[type="file"] {
 /* Word List */
 #wordSearch {
   width: 100%;
-  margin-bottom: 6px;
-  margin-top: 6px;
+  margin: 0;
 }
 
 #wordList {
@@ -534,25 +573,28 @@ input[type="file"] {
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;
-  flex: 1;
+  flex: 1 1 auto;
   min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
   border: 1px solid var(--input-border);
-  border-radius: 6px;
+  border-radius: 12px;
   background: var(--section-bg);
-  padding: 4px;
+  padding: 6px;
 }
 
 #wordList .word-item {
   width: calc(100% - 8px);
   left: 4px;
-  height: 32px;
+  height: 34px;
   display: grid;
   grid-template-columns: 18px 1fr 26px 26px;
   align-items: center;
   gap: 6px;
-  padding: 4px 6px;
+  padding: 6px 8px;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 8px;
   background: var(--input-bg);
   border: 1px solid var(--input-border);
   transition: all 0.2s;
@@ -561,7 +603,7 @@ input[type="file"] {
 #wordList .word-item:hover {
   background: var(--highlight-tag);
   border-color: var(--accent);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 #wordList .word-item.disabled {
@@ -586,7 +628,7 @@ input[type="file"] {
   color: var(--text-color) !important;
   border: 1px solid var(--input-border) !important;
   padding: 4px 6px;
-  border-radius: 3px;
+  border-radius: 6px;
   font-size: 0.8em;
   transition: border-color 0.2s;
   margin: 0;
@@ -636,7 +678,7 @@ input[type="file"] {
   overflow-y: auto;
   margin: 8px 0;
   border: 1px solid var(--input-border);
-  border-radius: 6px;
+  border-radius: 12px;
   background: var(--input-bg);
   min-height: 0;
 }
@@ -646,7 +688,7 @@ input[type="file"] {
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 6px 10px;
+  padding: 8px 12px;
   border-bottom: none;
   font-size: 0.85em;
 }
@@ -696,9 +738,10 @@ input[type="file"] {
 /* Footer */
 .footer {
   padding: 10px 12px;
-  border-top: 1px solid var(--input-border);
+  border-top: 1px solid var(--highlight-tag-border);
   background: var(--section-bg);
   flex-shrink: 0;
+  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.12);
 }
 
 .footer-content {
@@ -723,12 +766,14 @@ input[type="file"] {
   text-decoration: none;
   padding: 3px 6px;
   border-radius: 4px;
+  border: 1px solid transparent;
 }
 
 .github-link:hover {
   opacity: 1;
   color: var(--accent);
   background: var(--highlight-tag);
+  border-color: var(--highlight-tag-border);
 }
 
 /* Scrollbars */
@@ -782,9 +827,9 @@ body::-webkit-scrollbar-corner,
 
 .page-highlights-info {
   font-size: 0.85em;
-  padding: 6px 8px;
+  padding: 8px 10px;
   background: var(--input-bg);
-  border-radius: 6px;
+  border-radius: 10px;
   border: 1px solid var(--input-border);
   margin-bottom: 8px;
 }
@@ -794,7 +839,7 @@ body::-webkit-scrollbar-corner,
   overflow-y: auto;
   margin-top: 8px;
   border: 1px solid var(--input-border);
-  border-radius: 6px;
+  border-radius: 12px;
   background: var(--input-bg);
   min-height: 0;
 }
@@ -804,7 +849,7 @@ body::-webkit-scrollbar-corner,
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 10px 12px;
   border-bottom: 1px solid var(--input-border);
   font-size: 0.85em;
   cursor: pointer;
@@ -818,7 +863,7 @@ body::-webkit-scrollbar-corner,
 .page-highlight-item:hover {
   background: var(--highlight-tag);
   border-left: 3px solid var(--accent);
-  padding-left: 7px;
+  padding-left: 9px;
 }
 
 .page-highlight-word {
@@ -873,25 +918,3 @@ body::-webkit-scrollbar-corner,
   opacity: 0.5;
   font-size: 0.85em;
 }
-
-.snow {
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 1000;
-}
-
-.snowflake {
-  position: absolute;
-  top: -10px;
-  color: #d0e7ff;
-  font-size: 6px;
-  opacity: 0.5;
-  user-select: none;
-  pointer-events: none;
-  will-change: transform;
-}

popup/popup.html

@@ -4,14 +4,13 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title data-i18n="extension_name">Goose Highlighter</title>
+  <title data-i18n="extension_name"winter>Goose Highlighter</title>
   <link rel="stylesheet" href="popup.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
 </head>
 
 <body class="dark">
-  <div class="snow" id="snowContainer"></div>
   <div class="loading-overlay">
     <div class="loading-spinner"></div>
   </div>
@@ -19,7 +18,7 @@
 
     <div class="header-bar">
       <span class="title">
-        <img src="../img/logo-outlined-winter.png" alt="Goose Highlighter"
+        <img src="../img/logo-outlined.png" alt="Goose Highlighter"
           style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
       </span>
       <div class="icon-toggles">

src/popup/PopupController.ts

@@ -25,7 +25,6 @@ export class PopupController {
     this.setupEventListeners();
     this.render();
     this.hideLoadingOverlay();
-    this.startSnow();
   }
 
   private hideLoadingOverlay(): void {
@@ -722,86 +721,4 @@ export class PopupController {
     (document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
     (document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled;
   }
-
-  // Ney year stuff
-
-  private snowflakes: HTMLSpanElement[] = [];
-
-private startSnow(): void {
-  const maxFlakes = 20; 
-  const spawnInterval = 500; 
-
-  const spawnFlake = () => {
-    if (this.snowflakes.length >= maxFlakes) return;
-
-    const flake = document.createElement('div');
-    flake.className = 'snowflake';
-    flake.style.position = 'fixed';
-    flake.style.pointerEvents = 'none';
-    flake.style.zIndex = '9999';
-    flake.style.fontSize = `${8 + Math.random() * 8}px`;
-    flake.textContent = '❄';
-
-    const isLightTheme = document.body.classList.contains('light');
-    flake.style.color = isLightTheme ? 'rgba(90, 181, 255, 0.78)' : 'rgba(255, 255, 255, 0.8)';
-
-    flake.dataset.x = `${Math.random() * window.innerWidth}`;
-    flake.dataset.y = `${-10}`;
-    flake.dataset.speed = `${0.1 + Math.random() * 0.2}`;
-    flake.dataset.wind = `${Math.random() * 0.2 - 0.1}`;
-    flake.dataset.amplitude = `${1 + Math.random() * 1}`;
-    flake.dataset.angle = `${Math.random() * Math.PI * 2}`;
-    flake.dataset.angleSpeed = `${(Math.random() * 0.02 - 0.01)}`;
-    flake.dataset.opacity = `${0.2 + Math.random() * 0.3}`;
-    flake.style.opacity = flake.dataset.opacity!;
-    flake.dataset.fadeSpeed = `${0.002 + Math.random() * 0.003}`;
-
-    document.body.appendChild(flake);
-    this.snowflakes.push(flake);
-  };
-
-  setInterval(spawnFlake, spawnInterval);
-  this.animateSnow();
-}
-
-private animateSnow(): void {
-  const animate = () => {
-    this.snowflakes.forEach((flake) => {
-      let x = parseFloat(flake.dataset.x!);
-      let y = parseFloat(flake.dataset.y!);
-      const speed = parseFloat(flake.dataset.speed!);
-      let wind = parseFloat(flake.dataset.wind!);
-      const amp = parseFloat(flake.dataset.amplitude!);
-      let angle = parseFloat(flake.dataset.angle!);
-      const angleSpeed = parseFloat(flake.dataset.angleSpeed!);
-
-      y += speed;
-      angle += angleSpeed;
-      wind += (Math.random() * 0.002 - 0.001);
-      wind = Math.max(-0.1, Math.min(0.1, wind));
-      x += Math.sin(angle) * amp + wind;
-
-      if (y > window.innerHeight) {
-        y = -10;
-        x = Math.random() * window.innerWidth;
-
-        if (Math.random() < 0.2) {
-          flake.remove();
-          this.snowflakes = this.snowflakes.filter(f => f !== flake);
-          return;
-        }
-      }
-
-      flake.dataset.x = `${x}`;
-      flake.dataset.y = `${y}`;
-      flake.dataset.angle = `${angle}`;
-      flake.dataset.wind = `${wind}`;
-      flake.style.transform = `translate(${x}px, ${y}px)`;
-    });
-
-    requestAnimationFrame(animate);
-  };
-
-  requestAnimationFrame(animate);
-}
 }