figranium 0.12.1 → 0.12.2

package/public/figranium_logo.svg

@@ -1,60 +1,60 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="400.000000pt" height="150.000000pt" viewBox="0 0 400.000000 150.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
-fill="#FFFFFF" stroke="none">
-<path d="M526 1059 c-24 -19 -26 -26 -26 -94 0 -41 -4 -76 -9 -80 -5 -3 -36
-11 -69 30 -68 39 -91 43 -120 18 -32 -27 -37 -64 -12 -96 25 -31 49 -33 179
--16 45 6 84 9 86 7 3 -2 -50 -35 -118 -73 -172 -98 -191 -121 -146 -179 27
--35 65 -34 129 4 76 45 80 43 80 -45 0 -86 18 -115 69 -115 48 0 71 39 71 121
-0 80 3 82 75 39 59 -35 97 -38 125 -10 28 28 26 71 -5 100 l-25 23 -117 -16
-c-65 -8 -119 -14 -121 -12 -2 1 58 37 133 80 74 42 140 85 145 95 18 33 11 68
--16 89 -36 28 -47 27 -120 -14 -34 -19 -65 -35 -68 -35 -3 0 -6 34 -6 75 0 67
--3 79 -25 100 -30 30 -54 31 -89 4z"/>
-<path d="M1410 975 c-17 -21 -5 -45 23 -45 34 0 54 25 37 45 -16 19 -44 19
--60 0z"/>
-<path d="M2914 976 c-11 -28 4 -48 33 -44 22 2 28 8 28 28 0 20 -6 26 -28 28
--18 2 -29 -2 -33 -12z"/>
-<path d="M1101 944 c-12 -15 -21 -41 -21 -60 0 -33 -1 -34 -40 -34 -33 0 -40
--3 -40 -20 0 -17 7 -20 40 -20 l39 0 3 -102 c3 -95 4 -103 23 -103 19 0 20 8
-23 103 l3 102 54 0 c48 0 55 2 55 20 0 18 -7 20 -56 20 l-55 0 3 38 3 37 53 3
-c44 3 52 6 52 23 0 17 -7 19 -59 19 -52 0 -62 -3 -80 -26z"/>
-<path d="M1675 881 c-54 -23 -80 -109 -55 -185 21 -64 100 -87 145 -41 l25 24
-0 -38 c0 -55 -18 -73 -78 -79 -42 -4 -52 -8 -52 -23 0 -16 8 -19 45 -19 52 0
-99 21 115 49 5 11 10 85 10 165 0 139 -1 146 -20 146 -14 0 -20 -7 -21 -22 0
--13 -3 -17 -6 -10 -6 14 -56 42 -75 41 -7 0 -22 -4 -33 -8z m103 -58 c20 -27
-15 -110 -8 -133 -24 -24 -67 -26 -92 -3 -27 24 -25 116 3 144 24 24 75 20 97
--8z"/>
-<path d="M2023 880 c-12 -5 -26 -17 -32 -27 -10 -16 -10 -16 -11 5 0 15 -6 22
--20 22 -19 0 -20 -7 -20 -140 0 -133 1 -140 20 -140 18 0 20 8 22 106 3 103 4
-108 30 127 23 17 31 19 54 9 14 -7 31 -26 37 -42 15 -41 47 -41 47 -1 0 59
--72 105 -127 81z"/>
-<path d="M2281 877 c-19 -7 -41 -22 -49 -34 -14 -22 -13 -23 9 -23 13 0 33 7
-43 15 40 31 106 5 106 -41 0 -23 -3 -24 -61 -24 -54 0 -64 -3 -90 -29 -83 -83
-39 -192 130 -115 l31 26 0 -27 c0 -20 4 -26 18 -23 15 3 17 17 20 105 3 125
--9 157 -66 172 -45 13 -48 13 -91 -2z m109 -172 c0 -42 -33 -68 -81 -63 -38 4
--54 25 -45 61 7 28 20 34 84 36 42 1 42 1 42 -34z"/>
-<path d="M2613 880 c-12 -5 -26 -17 -32 -27 -10 -16 -10 -16 -11 5 0 15 -6 22
--20 22 -19 0 -20 -7 -20 -140 0 -133 1 -140 20 -140 19 0 20 7 20 95 0 105 12
-143 48 152 57 14 82 -32 82 -154 0 -86 1 -93 20 -93 19 0 20 7 20 114 0 105
--2 117 -22 140 -25 29 -72 40 -105 26z"/>
-<path d="M3470 870 c-16 -16 -20 -17 -20 -5 0 8 -7 15 -15 15 -13 0 -15 -22
--15 -141 0 -128 2 -140 18 -137 15 3 18 19 22 123 5 120 5 120 30 120 l25 0 3
--123 c2 -110 4 -123 20 -120 15 3 18 20 22 123 5 120 5 120 30 120 l25 0 3
--123 c2 -110 4 -123 20 -120 15 3 17 18 17 131 0 116 -2 130 -19 143 -27 19
--43 18 -62 -5 -16 -18 -17 -18 -35 0 -24 24 -44 24 -69 -1z"/>
-<path d="M1340 860 c0 -17 7 -20 40 -20 l40 0 0 -94 0 -95 -47 -3 c-40 -3 -48
--6 -48 -23 0 -19 8 -20 113 -23 l112 -3 0 26 c0 23 -4 25 -40 25 l-40 0 0 115
-0 115 -65 0 c-58 0 -65 -2 -65 -20z"/>
-<path d="M2840 860 c0 -17 7 -20 45 -20 l45 0 0 -95 0 -95 -51 0 c-47 0 -50
--2 -47 -22 3 -22 7 -23 116 -26 l112 -3 0 26 c0 23 -4 25 -40 25 l-40 0 0 115
-0 115 -70 0 c-63 0 -70 -2 -70 -20z"/>
-<path d="M3130 780 c0 -144 23 -180 116 -180 26 0 44 8 65 29 29 29 29 31 29
-140 0 104 -1 111 -20 111 -19 0 -20 -7 -20 -98 0 -112 -13 -142 -60 -142 -51
-0 -60 20 -60 136 l0 104 -25 0 -25 0 0 -100z"/>
-</g>
-</svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="400.000000pt" height="150.000000pt" viewBox="0 0 400.000000 150.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
+fill="#FFFFFF" stroke="none">
+<path d="M526 1059 c-24 -19 -26 -26 -26 -94 0 -41 -4 -76 -9 -80 -5 -3 -36
+11 -69 30 -68 39 -91 43 -120 18 -32 -27 -37 -64 -12 -96 25 -31 49 -33 179
+-16 45 6 84 9 86 7 3 -2 -50 -35 -118 -73 -172 -98 -191 -121 -146 -179 27
+-35 65 -34 129 4 76 45 80 43 80 -45 0 -86 18 -115 69 -115 48 0 71 39 71 121
+0 80 3 82 75 39 59 -35 97 -38 125 -10 28 28 26 71 -5 100 l-25 23 -117 -16
+c-65 -8 -119 -14 -121 -12 -2 1 58 37 133 80 74 42 140 85 145 95 18 33 11 68
+-16 89 -36 28 -47 27 -120 -14 -34 -19 -65 -35 -68 -35 -3 0 -6 34 -6 75 0 67
+-3 79 -25 100 -30 30 -54 31 -89 4z"/>
+<path d="M1410 975 c-17 -21 -5 -45 23 -45 34 0 54 25 37 45 -16 19 -44 19
+-60 0z"/>
+<path d="M2914 976 c-11 -28 4 -48 33 -44 22 2 28 8 28 28 0 20 -6 26 -28 28
+-18 2 -29 -2 -33 -12z"/>
+<path d="M1101 944 c-12 -15 -21 -41 -21 -60 0 -33 -1 -34 -40 -34 -33 0 -40
+-3 -40 -20 0 -17 7 -20 40 -20 l39 0 3 -102 c3 -95 4 -103 23 -103 19 0 20 8
+23 103 l3 102 54 0 c48 0 55 2 55 20 0 18 -7 20 -56 20 l-55 0 3 38 3 37 53 3
+c44 3 52 6 52 23 0 17 -7 19 -59 19 -52 0 -62 -3 -80 -26z"/>
+<path d="M1675 881 c-54 -23 -80 -109 -55 -185 21 -64 100 -87 145 -41 l25 24
+0 -38 c0 -55 -18 -73 -78 -79 -42 -4 -52 -8 -52 -23 0 -16 8 -19 45 -19 52 0
+99 21 115 49 5 11 10 85 10 165 0 139 -1 146 -20 146 -14 0 -20 -7 -21 -22 0
+-13 -3 -17 -6 -10 -6 14 -56 42 -75 41 -7 0 -22 -4 -33 -8z m103 -58 c20 -27
+15 -110 -8 -133 -24 -24 -67 -26 -92 -3 -27 24 -25 116 3 144 24 24 75 20 97
+-8z"/>
+<path d="M2023 880 c-12 -5 -26 -17 -32 -27 -10 -16 -10 -16 -11 5 0 15 -6 22
+-20 22 -19 0 -20 -7 -20 -140 0 -133 1 -140 20 -140 18 0 20 8 22 106 3 103 4
+108 30 127 23 17 31 19 54 9 14 -7 31 -26 37 -42 15 -41 47 -41 47 -1 0 59
+-72 105 -127 81z"/>
+<path d="M2281 877 c-19 -7 -41 -22 -49 -34 -14 -22 -13 -23 9 -23 13 0 33 7
+43 15 40 31 106 5 106 -41 0 -23 -3 -24 -61 -24 -54 0 -64 -3 -90 -29 -83 -83
+39 -192 130 -115 l31 26 0 -27 c0 -20 4 -26 18 -23 15 3 17 17 20 105 3 125
+-9 157 -66 172 -45 13 -48 13 -91 -2z m109 -172 c0 -42 -33 -68 -81 -63 -38 4
+-54 25 -45 61 7 28 20 34 84 36 42 1 42 1 42 -34z"/>
+<path d="M2613 880 c-12 -5 -26 -17 -32 -27 -10 -16 -10 -16 -11 5 0 15 -6 22
+-20 22 -19 0 -20 -7 -20 -140 0 -133 1 -140 20 -140 19 0 20 7 20 95 0 105 12
+143 48 152 57 14 82 -32 82 -154 0 -86 1 -93 20 -93 19 0 20 7 20 114 0 105
+-2 117 -22 140 -25 29 -72 40 -105 26z"/>
+<path d="M3470 870 c-16 -16 -20 -17 -20 -5 0 8 -7 15 -15 15 -13 0 -15 -22
+-15 -141 0 -128 2 -140 18 -137 15 3 18 19 22 123 5 120 5 120 30 120 l25 0 3
+-123 c2 -110 4 -123 20 -120 15 3 18 20 22 123 5 120 5 120 30 120 l25 0 3
+-123 c2 -110 4 -123 20 -120 15 3 17 18 17 131 0 116 -2 130 -19 143 -27 19
+-43 18 -62 -5 -16 -18 -17 -18 -35 0 -24 24 -44 24 -69 -1z"/>
+<path d="M1340 860 c0 -17 7 -20 40 -20 l40 0 0 -94 0 -95 -47 -3 c-40 -3 -48
+-6 -48 -23 0 -19 8 -20 113 -23 l112 -3 0 26 c0 23 -4 25 -40 25 l-40 0 0 115
+0 115 -65 0 c-58 0 -65 -2 -65 -20z"/>
+<path d="M2840 860 c0 -17 7 -20 45 -20 l45 0 0 -95 0 -95 -51 0 c-47 0 -50
+-2 -47 -22 3 -22 7 -23 116 -26 l112 -3 0 26 c0 23 -4 25 -40 25 l-40 0 0 115
+0 115 -70 0 c-63 0 -70 -2 -70 -20z"/>
+<path d="M3130 780 c0 -144 23 -180 116 -180 26 0 44 8 65 29 29 29 29 31 29
+140 0 104 -1 111 -20 111 -19 0 -20 -7 -20 -98 0 -112 -13 -142 -60 -142 -51
+0 -60 20 -60 136 l0 104 -25 0 -25 0 0 -100z"/>
+</g>
+</svg>

package/public/novnc.html

@@ -1,108 +1,108 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
-    />
-    <title>Headful Browser</title>
-    <style>
-      :root {
-        color-scheme: dark;
-      }
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        background: #050505;
-        overflow: hidden;
-        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
-      }
-      #screen {
-        width: 100%;
-        height: 100%;
-      }
-      #status {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-        background: rgba(0, 0, 0, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        padding: 6px 10px;
-        border-radius: 10px;
-        font-size: 11px;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: #d1d5db;
-        pointer-events: none;
-      }
-      #status.hidden {
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="status">Connecting...</div>
-    <div id="screen"></div>
-    <script type="module">
-      import RFB from '/novnc/core/rfb.js';
-
-      const params = new URLSearchParams(window.location.search);
-      const host = params.get('host') || window.location.hostname;
-      const port = params.get('port') || window.location.port;
-      const rawPath = params.get('path') || 'websockify';
-      const path = rawPath.replace(/^\/+/, '');
-      const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-      const hostPort = port ? `${host}:${port}` : host;
-      const wsUrl = `${proto}://${hostPort}/${path}`;
-
-      const statusEl = document.getElementById('status');
-      const screen = document.getElementById('screen');
-      const rfb = new RFB(screen, wsUrl);
-      rfb.scaleViewport = true;
-      rfb.resizeSession = true;
-      rfb.showDotCursor = false;
-      rfb.clipViewport = false;
-
-      const sendKey = (keysym, code, down) => {
-        if (typeof rfb.sendKey !== 'function') return;
-        try {
-          rfb.sendKey(keysym, code, down);
-        } catch (err) {
-          // ignore
-        }
-      };
-
-      const clearModifiers = () => {
-        const modifiers = [
-          [0xFFE1, 'ShiftLeft'],
-          [0xFFE2, 'ShiftRight'],
-          [0xFFE3, 'ControlLeft'],
-          [0xFFE4, 'ControlRight'],
-          [0xFFE9, 'AltLeft'],
-          [0xFFEA, 'AltRight'],
-          [0xFFE7, 'MetaLeft'],
-          [0xFFE8, 'MetaRight']
-        ];
-        modifiers.forEach(([keysym, code]) => sendKey(keysym, code, false));
-      };
-
-      window.addEventListener('focus', () => {
-        clearModifiers();
-      });
-      window.addEventListener('blur', () => {
-        clearModifiers();
-      });
-
-      rfb.addEventListener('connect', () => {
-        statusEl.classList.add('hidden');
-      });
-      rfb.addEventListener('disconnect', () => {
-        statusEl.classList.remove('hidden');
-        statusEl.textContent = 'Disconnected';
-      });
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <title>Headful Browser</title>
+    <style>
+      :root {
+        color-scheme: dark;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: #050505;
+        overflow: hidden;
+        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+      }
+      #screen {
+        width: 100%;
+        height: 100%;
+      }
+      #status {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        background: rgba(0, 0, 0, 0.6);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 6px 10px;
+        border-radius: 10px;
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #d1d5db;
+        pointer-events: none;
+      }
+      #status.hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="status">Connecting...</div>
+    <div id="screen"></div>
+    <script type="module">
+      import RFB from '/novnc/core/rfb.js';
+
+      const params = new URLSearchParams(window.location.search);
+      const host = params.get('host') || window.location.hostname;
+      const port = params.get('port') || window.location.port;
+      const rawPath = params.get('path') || 'websockify';
+      const path = rawPath.replace(/^\/+/, '');
+      const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+      const hostPort = port ? `${host}:${port}` : host;
+      const wsUrl = `${proto}://${hostPort}/${path}`;
+
+      const statusEl = document.getElementById('status');
+      const screen = document.getElementById('screen');
+      const rfb = new RFB(screen, wsUrl);
+      rfb.scaleViewport = true;
+      rfb.resizeSession = true;
+      rfb.showDotCursor = false;
+      rfb.clipViewport = false;
+
+      const sendKey = (keysym, code, down) => {
+        if (typeof rfb.sendKey !== 'function') return;
+        try {
+          rfb.sendKey(keysym, code, down);
+        } catch (err) {
+          // ignore
+        }
+      };
+
+      const clearModifiers = () => {
+        const modifiers = [
+          [0xFFE1, 'ShiftLeft'],
+          [0xFFE2, 'ShiftRight'],
+          [0xFFE3, 'ControlLeft'],
+          [0xFFE4, 'ControlRight'],
+          [0xFFE9, 'AltLeft'],
+          [0xFFEA, 'AltRight'],
+          [0xFFE7, 'MetaLeft'],
+          [0xFFE8, 'MetaRight']
+        ];
+        modifiers.forEach(([keysym, code]) => sendKey(keysym, code, false));
+      };
+
+      window.addEventListener('focus', () => {
+        clearModifiers();
+      });
+      window.addEventListener('blur', () => {
+        clearModifiers();
+      });
+
+      rfb.addEventListener('connect', () => {
+        statusEl.classList.add('hidden');
+      });
+      rfb.addEventListener('disconnect', () => {
+        statusEl.classList.remove('hidden');
+        statusEl.textContent = 'Disconnected';
+      });
+    </script>
+  </body>
+</html>

package/public/styles.css

@@ -1,86 +1,86 @@
-/* Figranium Shared Styles */
-
-.glass {
-    background: rgba(10, 10, 10, 0.9);
-    backdrop-filter: blur(64px);
-    -webkit-backdrop-filter: blur(64px);
-}
-
-.glass-card {
-    background: rgba(255, 255, 255, 0.015);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.glass-card:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.shine-effect {
-    position: relative;
-    overflow: hidden;
-}
-
-.shine-effect::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -100%;
-    width: 33.333333%;
-    height: 200%;
-    background: rgba(255, 255, 255, 0.2);
-    transform: rotate(25deg);
-    pointer-events: none;
-    transition: none;
-}
-
-.shine-effect:hover::after {
-    left: 150%;
-    transition: left 0.7s ease-in-out;
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 9999px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.custom-select {
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-opacity='0.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    background-size: 1em;
-}
-
-.custom-select option {
-    background: #0a0a0a;
-    color: white;
-}
-
-.action-card-item.dragging {
-    opacity: 0.5;
-}
-
-.action-card-item.drag-over-top {
-    border-top: 2px solid rgba(59, 130, 246, 0.5);
-}
-
-.action-card-item.drag-over-bottom {
-    border-bottom: 2px solid rgba(59, 130, 246, 0.5);
-}
+/* Figranium Shared Styles */
+
+.glass {
+    background: rgba(10, 10, 10, 0.9);
+    backdrop-filter: blur(64px);
+    -webkit-backdrop-filter: blur(64px);
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.015);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.shine-effect {
+    position: relative;
+    overflow: hidden;
+}
+
+.shine-effect::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -100%;
+    width: 33.333333%;
+    height: 200%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: rotate(25deg);
+    pointer-events: none;
+    transition: none;
+}
+
+.shine-effect:hover::after {
+    left: 150%;
+    transition: left 0.7s ease-in-out;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.custom-select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-opacity='0.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 1em;
+}
+
+.custom-select option {
+    background: #0a0a0a;
+    color: white;
+}
+
+.action-card-item.dragging {
+    opacity: 0.5;
+}
+
+.action-card-item.drag-over-top {
+    border-top: 2px solid rgba(59, 130, 246, 0.5);
+}
+
+.action-card-item.drag-over-bottom {
+    border-bottom: 2px solid rgba(59, 130, 246, 0.5);
+}