1 
  2<div class="radial-menu-container">
  3  <input type="checkbox" id="menu-toggle" class="menu-toggle" />
  4 
  5  <label
  6    for="menu-toggle"
  7    class="center-icon"
  8    tabindex="0"
  9    role="button"
 10    aria-label="Toggle menu"
 11    aria-expanded="false"
 12  >
 13    <svg
 14      width="800px"
 15      height="800px"
 16      viewBox="0 0 16 16"
 17      xmlns="http://www.w3.org/2000/svg"
 18      fill="none"
 19    >
 20      <path
 21        fill="#4285F4"
 22        d="M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z"
 23      ></path>
 24      <path
 25        fill="#34A853"
 26        d="M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z"
 27      ></path>
 28      <path
 29        fill="#FBBC04"
 30        d="M4.187 9.342a4.17 4.17 0 010-2.68V4.859H1.849a6.97 6.97 0 000 6.286l2.338-1.803z"
 31      ></path>
 32      <path
 33        fill="#EA4335"
 34        d="M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z"
 35      ></path>
 36    </svg>
 37  </label>
 38 
 39  <svg
 40    class="connection-lines"
 41    width="400"
 42    height="300"
 43    viewBox="0 0 400 300"
 44    aria-hidden="true"
 45  >
 46    <defs>
 47      <linearGradient
 48        id="googleFlow"
 49        gradientUnits="objectBoundingBox"
 50        x1="0"
 51        y1="0"
 52        x2="1"
 53        y2="0"
 54      >
 55        <stop offset="0%" stop-color="#4285F4" stop-opacity="0.2"></stop>
 56        <stop offset="45%" stop-color="#EA4335" stop-opacity="0.8"></stop>
 57        <stop offset="55%" stop-color="#FBBC05" stop-opacity="1"></stop>
 58        <stop offset="65%" stop-color="#34A853" stop-opacity="0.8"></stop>
 59        <stop offset="100%" stop-color="#4285F4" stop-opacity="0.2"></stop>
 60      </linearGradient>
 61    </defs>
 62 
 63    <path class="line line-1" d="M 200 150 Q 140 130, 80 80"></path>
 64    <path class="line line-2" d="M 200 150 Q 180 100, 180 50"></path>
 65    <path class="line line-3" d="M 200 150 Q 240 80, 300 40"></path>
 66    <path class="line line-4" d="M 200 150 Q 260 120, 320 100"></path>
 67    <path class="line line-5" d="M 200 150 Q 270 150, 330 160"></path>
 68    <path class="line line-6" d="M 200 150 Q 270 180, 330 220"></path>
 69    <path class="line line-7" d="M 200 150 Q 220 210, 200 260"></path>
 70    <path class="line line-8" d="M 200 150 Q 180 190, 110 230"></path>
 71  </svg>
 72 
 73  <div class="menu-item item-1">
 74    <button
 75      class="icon-circle"
 76      tabindex="0"
 77      aria-label="Google Mail"
 78      data-tooltip="Google Mail"
 79    >
 80      <svg
 81        width="800px"
 82        height="800px"
 83        viewBox="0 0 32 32"
 84        fill="none"
 85        xmlns="http://www.w3.org/2000/svg"
 86      >
 87        <path
 88          d="M2 11.9556C2 8.47078 2 6.7284 2.67818 5.39739C3.27473 4.22661 4.22661 3.27473 5.39739 2.67818C6.7284 2 8.47078 2 11.9556 2H20.0444C23.5292 2 25.2716 2 26.6026 2.67818C27.7734 3.27473 28.7253 4.22661 29.3218 5.39739C30 6.7284 30 8.47078 30 11.9556V20.0444C30 23.5292 30 25.2716 29.3218 26.6026C28.7253 27.7734 27.7734 28.7253 26.6026 29.3218C25.2716 30 23.5292 30 20.0444 30H11.9556C8.47078 30 6.7284 30 5.39739 29.3218C4.22661 28.7253 3.27473 27.7734 2.67818 26.6026C2 25.2716 2 23.5292 2 20.0444V11.9556Z"
 89          fill="white"
 90        ></path>
 91        <path
 92          d="M22.0515 8.52295L16.0644 13.1954L9.94043 8.52295V8.52421L9.94783 8.53053V15.0732L15.9954 19.8466L22.0515 15.2575V8.52295Z"
 93          fill="#EA4335"
 94        ></path>
 95        <path
 96          d="M23.6231 7.38639L22.0508 8.52292V15.2575L26.9983 11.459V9.17074C26.9983 9.17074 26.3978 5.90258 23.6231 7.38639Z"
 97          fill="#FBBC05"
 98        ></path>
 99        <path
100          d="M22.0508 15.2575V23.9924H25.8428C25.8428 23.9924 26.9219 23.8813 26.9995 22.6513V11.459L22.0508 15.2575Z"
101          fill="#34A853"
102        ></path>
103        <path
104          d="M9.94811 24.0001V15.0732L9.94043 15.0669L9.94811 24.0001Z"
105          fill="#C5221F"
106        ></path>
107        <path
108          d="M9.94014 8.52404L8.37646 7.39382C5.60179 5.91001 5 9.17692 5 9.17692V11.4651L9.94014 15.0667V8.52404Z"
109          fill="#C5221F"
110        ></path>
111        <path
112          d="M9.94043 8.52441V15.0671L9.94811 15.0734V8.53073L9.94043 8.52441Z"
113          fill="#C5221F"
114        ></path>
115        <path
116          d="M5 11.4668V22.6591C5.07646 23.8904 6.15673 24.0003 6.15673 24.0003H9.94877L9.94014 15.0671L5 11.4668Z"
117          fill="#4285F4"
118        ></path>
119      </svg>
120    </button>
121  </div>
122 
123  <div class="menu-item item-2">
124    <button
125      class="icon-circle"
126      tabindex="0"
127      aria-label="Google Drive"
128      data-tooltip="Google Drive"
129    >
130      <svg
131        width="24"
132        height="24"
133        viewBox="0 0 24 24"
134        fill="none"
135        xmlns="http://www.w3.org/2000/svg"
136      >
137        <circle cx="18" cy="5" r="3" fill="#4285F4"></circle>
138        <circle cx="6" cy="12" r="3" fill="#EA4335"></circle>
139        <circle cx="18" cy="19" r="3" fill="#FBBC04"></circle>
140        <line
141          x1="8.5"
142          y1="11"
143          x2="15.5"
144          y2="6"
145          stroke="#34A853"
146          stroke-width="2"
147        ></line>
148        <line
149          x1="8.5"
150          y1="13"
151          x2="15.5"
152          y2="18"
153          stroke="#34A853"
154          stroke-width="2"
155        ></line>
156      </svg>
157    </button>
158  </div>
159 
160  <div class="menu-item item-3">
161    <button
162      class="icon-circle"
163      tabindex="0"
164      aria-label="Google Docs"
165      data-tooltip="Google Docs"
166    >
167      <svg
168        width="24"
169        height="24"
170        viewBox="0 0 24 24"
171        fill="none"
172        xmlns="http://www.w3.org/2000/svg"
173      >
174        <path
175          d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
176          fill="#4285F4"
177          stroke="#4285F4"
178          stroke-width="2"
179          stroke-linecap="round"
180          stroke-linejoin="round"
181        ></path>
182        <polyline points="14,2 14,8 20,8" fill="#fff"></polyline>
183        <line
184          x1="8"
185          y1="13"
186          x2="16"
187          y2="13"
188          stroke="#fff"
189          stroke-width="2"
190        ></line>
191        <line
192          x1="8"
193          y1="17"
194          x2="16"
195          y2="17"
196          stroke="#fff"
197          stroke-width="2"
198        ></line>
199      </svg>
200    </button>
201  </div>
202 
203  <div class="menu-item item-4">
204    <button
205      class="icon-circle"
206      tabindex="0"
207      aria-label="Google PlayStore"
208      data-tooltip="Play Store"
209    >
210      <svg
211        version="1.1"
212        id="Layer_1"
213        xmlns="http://www.w3.org/2000/svg"
214        xmlns:xlink="http://www.w3.org/1999/xlink"
215        x="0px"
216        y="0px"
217        viewBox="0 0 511.999 511.999"
218        style="enable-background:new 0 0 511.999 511.999;"
219        xml:space="preserve"
220      >
221        <g>
222          <path
223            style="fill:#32BBFF;"
224            d="M382.369,175.623C322.891,142.356,227.427,88.937,79.355,6.028
225    C69.372-0.565,57.886-1.429,47.962,1.93l254.05,254.05L382.369,175.623z"
226          ></path>
227          <path
228            style="fill:#32BBFF;"
229            d="M47.962,1.93c-1.86,0.63-3.67,1.39-5.401,2.308C31.602,10.166,23.549,21.573,23.549,36v439.96
230    c0,14.427,8.052,25.834,19.012,31.761c1.728,0.917,3.537,1.68,5.395,2.314L302.012,255.98L47.962,1.93z"
231          ></path>
232          <path
233            style="fill:#32BBFF;"
234            d="M302.012,255.98L47.956,510.035c9.927,3.384,21.413,2.586,31.399-4.103
235    c143.598-80.41,237.986-133.196,298.152-166.746c1.675-0.941,3.316-1.861,4.938-2.772L302.012,255.98z"
236          ></path>
237        </g>
238        <path
239          style="fill:#2C9FD9;"
240          d="M23.549,255.98v219.98c0,14.427,8.052,25.834,19.012,31.761c1.728,0.917,3.537,1.68,5.395,2.314
241  L302.012,255.98H23.549z"
242        ></path>
243        <path
244          style="fill:#29CC5E;"
245          d="M79.355,6.028C67.5-1.8,53.52-1.577,42.561,4.239l255.595,255.596l84.212-84.212
246  C322.891,142.356,227.427,88.937,79.355,6.028z"
247        ></path>
248        <path
249          style="fill:#D93F21;"
250          d="M298.158,252.126L42.561,507.721c10.96,5.815,24.939,6.151,36.794-1.789
251  c143.598-80.41,237.986-133.196,298.152-166.746c1.675-0.941,3.316-1.861,4.938-2.772L298.158,252.126z"
252        ></path>
253        <path
254          style="fill:#FFD500;"
255          d="M488.45,255.98c0-12.19-6.151-24.492-18.342-31.314c0,0-22.799-12.721-92.682-51.809l-83.123,83.123
256  l83.204,83.205c69.116-38.807,92.6-51.892,92.6-51.892C482.299,280.472,488.45,268.17,488.45,255.98z"
257        ></path>
258        <path
259          style="fill:#FFAA00;"
260          d="M470.108,287.294c12.191-6.822,18.342-19.124,18.342-31.314H294.303l83.204,83.205
261  C446.624,300.379,470.108,287.294,470.108,287.294z"
262        ></path>
263      </svg>
264    </button>
265  </div>
266 
267  <div class="menu-item item-5">
268    <button
269      class="icon-circle"
270      tabindex="0"
271      aria-label="Google Podcasts"
272      data-tooltip="Podcasts"
273    >
274      <svg
275        xmlns="http://www.w3.org/2000/svg"
276        x="0px"
277        y="0px"
278        width="100"
279        height="100"
280        viewBox="0 0 48 48"
281      >
282        <path
283          fill="#f9a825"
284          d="M24.5,12L24.5,12c-1.381,0-2.5-1.119-2.5-2.5v-3C22,5.119,23.119,4,24.5,4h0 C25.881,4,27,5.119,27,6.5v3C27,10.881,25.881,12,24.5,12z"
285        ></path>
286        <path
287          fill="#f9a825"
288          d="M24.5,33L24.5,33c-1.381,0-2.5-1.119-2.5-2.5v-13c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v13C27,31.881,25.881,33,24.5,33z"
289        ></path>
290        <path
291          fill="#f9a825"
292          d="M24.5,44L24.5,44c-1.381,0-2.5-1.119-2.5-2.5v-3c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v3C27,42.881,25.881,44,24.5,44z"
293        ></path>
294        <path
295          fill="#e53935"
296          d="M15.5,36L15.5,36c-1.381,0-2.5-1.119-2.5-2.5v-3c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v3C18,34.881,16.881,36,15.5,36z"
297        ></path>
298        <path
299          fill="#43a047"
300          d="M33.5,20L33.5,20c-1.381,0-2.5-1.119-2.5-2.5v-3c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v3C36,18.881,34.881,20,33.5,20z"
301        ></path>
302        <path
303          fill="#e53935"
304          d="M15.5,25L15.5,25c-1.381,0-2.5-1.119-2.5-2.5v-9c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v9C18,23.881,16.881,25,15.5,25z"
305        ></path>
306        <path
307          fill="#43a047"
308          d="M33.5,37L33.5,37c-1.381,0-2.5-1.119-2.5-2.5v-9c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v9C36,35.881,34.881,37,33.5,37z"
309        ></path>
310        <path
311          fill="#1565c0"
312          d="M6.5,28L6.5,28C5.119,28,4,26.881,4,25.5v-3C4,21.119,5.119,20,6.5,20h0C7.881,20,9,21.119,9,22.5v3 C9,26.881,7.881,28,6.5,28z"
313        ></path>
314        <path
315          fill="#1e88e5"
316          d="M42.5,28L42.5,28c-1.381,0-2.5-1.119-2.5-2.5v-3c0-1.381,1.119-2.5,2.5-2.5h0 c1.381,0,2.5,1.119,2.5,2.5v3C45,26.881,43.881,28,42.5,28z"
317        ></path>
318      </svg>
319    </button>
320  </div>
321 
322  <div class="menu-item item-6">
323    <button
324      class="icon-circle"
325      tabindex="0"
326      aria-label="Google Home"
327      data-tooltip="Google Home"
328    >
329      <svg
330        xmlns="http://www.w3.org/2000/svg"
331        x="0px"
332        y="0px"
333        width="100"
334        height="100"
335        viewBox="0 0 48 48"
336      >
337        <path
338          fill="#fafafa"
339          d="M22.586,4.414L5.879,21.121C5.316,21.684,5,22.447,5,23.243V41c0,1.105,0.895,2,2,2h34 c1.105,0,2-0.895,2-2V23.243c0-0.796-0.316-1.559-0.879-2.121L25.414,4.414C24.633,3.633,23.367,3.633,22.586,4.414z"
340        ></path>
341        <path fill="#43a047" d="M12 35H36V43H12z"></path>
342        <path fill="#fbc02d" d="M13,24v19H7c-1.1,0-2-0.9-2-2V24H13z"></path>
343        <path
344          fill="#1e88e5"
345          d="M42.12,21.12L29.59,8.59l-5.55,5.55L35,25.1V43h6c1.1,0,2-0.9,2-2V23.24 C43,22.45,42.68,21.68,42.12,21.12z"
346        ></path>
347        <path
348          fill="#e64a19"
349          d="M29.59,8.59L5,33.18v-9.94c0-0.79,0.32-1.56,0.88-2.12L22.59,4.41c0.78-0.78,2.04-0.78,2.82,0 L29.59,8.59z"
350        ></path>
351      </svg>
352    </button>
353  </div>
354 
355  <div class="menu-item item-7">
356    <button
357      class="icon-circle"
358      tabindex="0"
359      aria-label="Google Map"
360      data-tooltip="Google Map"
361    >
362      <svg
363        xmlns="http://www.w3.org/2000/svg"
364        x="0px"
365        y="0px"
366        width="100"
367        height="100"
368        viewBox="0 0 48 48"
369      >
370        <path
371          fill="#48b564"
372          d="M35.76,26.36h0.01c0,0-3.77,5.53-6.94,9.64c-2.74,3.55-3.54,6.59-3.77,8.06  C24.97,44.6,24.53,45,24,45s-0.97-0.4-1.06-0.94c-0.23-1.47-1.03-4.51-3.77-8.06c-0.42-0.55-0.85-1.12-1.28-1.7L28.24,22l8.33-9.88  C37.49,14.05,38,16.21,38,18.5C38,21.4,37.17,24.09,35.76,26.36z"
373        ></path>
374        <path
375          fill="#fcc60e"
376          d="M28.24,22L17.89,34.3c-2.82-3.78-5.66-7.94-5.66-7.94h0.01c-0.3-0.48-0.57-0.97-0.8-1.48L19.76,15  c-0.79,0.95-1.26,2.17-1.26,3.5c0,3.04,2.46,5.5,5.5,5.5C25.71,24,27.24,23.22,28.24,22z"
377        ></path>
378        <path
379          fill="#2c85eb"
380          d="M28.4,4.74l-8.57,10.18L13.27,9.2C15.83,6.02,19.69,4,24,4C25.54,4,27.02,4.26,28.4,4.74z"
381        ></path>
382        <path
383          fill="#ed5748"
384          d="M19.83,14.92L19.76,15l-8.32,9.88C10.52,22.95,10,20.79,10,18.5c0-3.54,1.23-6.79,3.27-9.3  L19.83,14.92z"
385        ></path>
386        <path
387          fill="#5695f6"
388          d="M28.24,22c0.79-0.95,1.26-2.17,1.26-3.5c0-3.04-2.46-5.5-5.5-5.5c-1.71,0-3.24,0.78-4.24,2L28.4,4.74  c3.59,1.22,6.53,3.91,8.17,7.38L28.24,22z"
389        ></path>
390      </svg>
391    </button>
392  </div>
393  <div class="menu-item item-8">
394    <button
395      class="icon-circle"
396      tabindex="0"
397      aria-label="Google Meet"
398      data-tooltip="Google Meet"
399    >
400      <svg
401        xmlns="http://www.w3.org/2000/svg"
402        x="0px"
403        y="0px"
404        width="100"
405        height="100"
406        viewBox="0 0 48 48"
407      >
408        <rect
409          width="16"
410          height="16"
411          x="12"
412          y="16"
413          fill="#fff"
414          transform="rotate(-90 20 24)"
415        ></rect>
416        <polygon
417          fill="#1e88e5"
418          points="3,17 3,31 8,32 13,31 13,17 8,16"
419        ></polygon>
420        <path
421          fill="#4caf50"
422          d="M37,24v14c0,1.657-1.343,3-3,3H13l-1-5l1-5h14v-7l5-1L37,24z"
423        ></path>
424        <path
425          fill="#fbc02d"
426          d="M37,10v14H27v-7H13l-1-5l1-5h21C35.657,7,37,8.343,37,10z"
427        ></path>
428        <path fill="#1565c0" d="M13,31v10H6c-1.657,0-3-1.343-3-3v-7H13z"></path>
429        <polygon fill="#e53935" points="13,7 13,17 3,17"></polygon>
430        <polygon
431          fill="#2e7d32"
432          points="38,24 37,32.45 27,24 37,15.55"
433        ></polygon>
434        <path
435          fill="#4caf50"
436          d="M46,10.11v27.78c0,0.84-0.98,1.31-1.63,0.78L37,32.45v-16.9l7.37-6.22C45.02,8.8,46,9.27,46,10.11z"
437        ></path>
438      </svg>
439    </button>
440  </div>
441</div>          

  1 
  2.radial-menu-container {
  3  --primary-bg: #ffffff;
  4  --secondary-bg: #f3f4f6;
  5  --accent-color: #3b82f6;
  6  --text-color: #1f2937;
  7  --line-color: #d1d5db;
  8  --shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.05);
  9  --shadow-md: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
 10  --shadow-lg: 0 0.5em 1em rgba(0, 0, 0, 0.15);
 11 
 12  position: relative;
 13  width: 100%;
 14  height: 100%;
 15  display: flex;
 16  align-items: center;
 17  justify-content: center;
 18  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 19  font-size: 16px;
 20}
 21 
 22.menu-toggle {
 23  position: absolute;
 24  opacity: 0;
 25  pointer-events: none;
 26}
 27 
 28.center-icon {
 29  position: relative;
 30  width: 4em;
 31  height: 4em;
 32  background: var(--primary-bg);
 33  border-radius: 50%;
 34  display: flex;
 35  align-items: center;
 36  justify-content: center;
 37  cursor: pointer;
 38  z-index: 100;
 39  box-shadow: var(--shadow-md);
 40  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 41}
 42 
 43.center-icon:hover {
 44  transform: scale(1.1);
 45  box-shadow: var(--shadow-lg);
 46  background: var(--line-color);
 47}
 48 
 49.center-icon:hover svg path,
 50.center-icon:hover svg circle {
 51  stroke: white;
 52}
 53 
 54.center-icon:active {
 55  transform: scale(0.95);
 56}
 57 
 58.center-icon:focus-visible {
 59  outline: 0.125em solid var(--accent-color);
 60  outline-offset: 0.25em;
 61}
 62 
 63.center-icon svg {
 64  width: 2.5em;
 65  height: 2.5em;
 66  transition: transform 0.3s ease;
 67}
 68 
 69.menu-toggle:checked ~ .center-icon svg {
 70  transform: rotate(180deg);
 71}
 72 
 73.connection-lines {
 74  position: absolute;
 75  width: 100%;
 76  height: 100%;
 77  pointer-events: none;
 78  z-index: 1;
 79}
 80 
 81.line {
 82  fill: none;
 83  stroke: url(#googleFlow);
 84  stroke-width: 2.5;
 85  stroke-linecap: round;
 86  opacity: 0;
 87  stroke-dasharray: 350;
 88  stroke-dashoffset: 350;
 89 
 90  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 91}
 92 
 93.menu-toggle:checked ~ .connection-lines .line {
 94  opacity: 1;
 95}
 96 
 97.menu-toggle:checked ~ .connection-lines .line-1 {
 98  stroke-dashoffset: 0;
 99  transition-delay: 0.1s;
100}
101 
102.menu-toggle:checked ~ .connection-lines .line-2 {
103  stroke-dashoffset: 0;
104  transition-delay: 0.15s;
105}
106 
107.menu-toggle:checked ~ .connection-lines .line-3 {
108  stroke-dashoffset: 0;
109  transition-delay: 0.2s;
110}
111 
112.menu-toggle:checked ~ .connection-lines .line-4 {
113  stroke-dashoffset: 0;
114  transition-delay: 0.25s;
115}
116 
117.menu-toggle:checked ~ .connection-lines .line-5 {
118  stroke-dashoffset: 0;
119  transition-delay: 0.3s;
120}
121 
122.menu-toggle:checked ~ .connection-lines .line-6 {
123  stroke-dashoffset: 0;
124  transition-delay: 0.35s;
125}
126 
127.menu-toggle:checked ~ .connection-lines .line-7 {
128  stroke-dashoffset: 0;
129  transition-delay: 0.4s;
130}
131.menu-toggle:checked ~ .connection-lines .line-8 {
132  stroke-dashoffset: 0;
133  transition-delay: 0.5s;
134}
135 
136.menu-item {
137  position: absolute;
138  opacity: 0;
139  transform: scale(0) translate(-50%, -50%);
140  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
141  z-index: 10;
142}
143 
144.icon-circle {
145  width: 3.5em;
146  height: 3.5em;
147  background: var(--primary-bg);
148  border-radius: 50%;
149  display: flex;
150  align-items: center;
151  justify-content: center;
152  box-shadow: var(--shadow-sm);
153  cursor: pointer;
154  transition: all 0.3s ease;
155  border: 0.125em solid transparent;
156}
157 
158.icon-circle:hover {
159  transform: scale(1.15);
160  box-shadow: var(--shadow-lg);
161  border-color: var(--accent-color);
162  background: var(--secondary-bg);
163  stroke: #1f2937;
164}
165 
166.icon-circle:active {
167  transform: scale(1.05);
168}
169 
170.icon-circle:focus-visible {
171  outline: 0.125em solid var(--accent-color);
172  outline-offset: 0.125em;
173}
174 
175.icon-circle svg {
176  width: 2em;
177  height: 2em;
178  transition: transform 0.3s ease;
179}
180 
181.icon-circle:hover svg {
182  transform: rotate(12deg);
183}
184 
185.menu-toggle:checked ~ .menu-item {
186  opacity: 1;
187  transform: scale(1) translate(-50%, -50%);
188}
189 
190.item-1 {
191  left: 20%;
192  top: 28%;
193}
194 
195.menu-toggle:checked ~ .item-1 {
196  transition-delay: 0.1s;
197}
198 
199.item-2 {
200  left: 45.5%;
201  top: 18%;
202}
203 
204.menu-toggle:checked ~ .item-2 {
205  transition-delay: 0.15s;
206}
207 
208.item-3 {
209  left: 75%;
210  top: 15%;
211}
212 
213.menu-toggle:checked ~ .item-3 {
214  transition-delay: 0.2s;
215}
216 
217.item-4 {
218  left: 80%;
219  top: 34.5%;
220}
221 
222.menu-toggle:checked ~ .item-4 {
223  transition-delay: 0.25s;
224}
225 
226.item-5 {
227  left: 82%;
228  top: 53%;
229}
230 
231.menu-toggle:checked ~ .item-5 {
232  transition-delay: 0.3s;
233}
234 
235.item-6 {
236  left: 82.5%;
237  top: 72%;
238}
239 
240.menu-toggle:checked ~ .item-6 {
241  transition-delay: 0.35s;
242}
243 
244.item-7 {
245  left: 50%;
246  top: 85%;
247}
248 
249.menu-toggle:checked ~ .item-7 {
250  transition-delay: 0.4s;
251}
252 
253.item-8 {
254  left: 27%;
255  top: 74%;
256}
257 
258.menu-toggle:checked ~ .item-8 {
259  transition-delay: 0.5s;
260}
261 
262@media (max-width: 768px) {
263  .radial-menu-container {
264    font-size: 14px;
265  }
266}
267 
268@media (max-width: 480px) {
269  .radial-menu-container {
270    font-size: 12px;
271  }
272}
273 
274.icon-circle {
275  position: relative;
276}
277 
278.icon-circle::after {
279  content: attr(data-tooltip);
280  position: absolute;
281  bottom: 120%;
282  left: 50%;
283  transform: translateX(-50%) translateY(6px);
284 
285  background: linear-gradient(
286    135deg,
287    #4285f4 0%,
288    #ea4335 30%,
289    #fbbc05 60%,
290    #34a853 100%
291  );
292  color: #ffffff;
293  padding: 0.35em 0.6em;
294  font-size: 0.75em;
295  white-space: nowrap;
296  border-radius: 0.375em;
297 
298  opacity: 0;
299  pointer-events: none;
300  transition:
301    opacity 0.25s ease,
302    transform 0.25s ease;
303  z-index: 999;
304  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
305}
306 
307.icon-circle:hover::after,
308.icon-circle:hover::before,
309.icon-circle:focus-visible::after,
310.icon-circle:focus-visible::before {
311  opacity: 1;
312  transform: translateX(-50%) translateY(0);
313}