Fixes

hdyc-svelte/src/app.css

@@ -371,6 +371,7 @@ a:focus-visible {
   font-weight: 800;
   font-size: 1.15rem;
   letter-spacing: -0.02em;
+  white-space: nowrap;
 }
 .site-logo .logo-accent {
   color: var(--accent);
@@ -466,11 +467,11 @@ a:focus-visible {
 .palette-dots {
   display: flex;
   gap: 0.25rem;
-  width: 38px;
+  max-width: 38px;
   overflow-x: hidden;
   overflow-y: visible;
   flex: 0 0 auto;
-  transition: width 0.2s ease, gap 0.2s ease;
+  transition: max-width 0.2s ease, gap 0.2s ease;
 }
 .palette-dot {
   width: 30px;
@@ -486,9 +487,10 @@ a:focus-visible {
   overflow: hidden;
   flex-shrink: 0;
   order: 0;
+  transform-origin: center;
 }
 .palette-dot:hover {
-  transform: translateY(-1px);
+  transform: scale(1.05);
 }
 .palette-dot.active,
 .palette-dot:focus-visible {
@@ -510,7 +512,7 @@ a:focus-visible {
 }
 .floating-palette-controls:hover .palette-dots,
 .floating-palette-controls:focus-within .palette-dots {
-  width: 360px;
+  max-width: min(280px, calc(100vw - 2rem));
   gap: 0.25rem;
 }
 .floating-palette-controls:hover .palette-dot:not(.active),
@@ -666,15 +668,25 @@ a:focus-visible {
 }
 .category-grid {
   width: min(1160px, 100%);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(0.75rem, 1.3vw, 1.25rem);
 }
 .category-grid .category-card {
-  flex: 0 1 clamp(180px, 22vw, 220px);
-  min-width: 180px;
-  max-width: 220px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .category-grid {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .category-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }
 
 /* ─── Calculator List (category page) ────────────────────── */
@@ -822,6 +834,25 @@ a:focus-visible {
   }
 }
 
+@media (max-width: 960px) {
+  .site-header {
+    gap: 0.5rem;
+  }
+  .header-left,
+  .header-right {
+    min-width: 0;
+  }
+  .site-logo {
+    flex: 1 1 auto;
+  }
+  .desktop-header-search {
+    display: none;
+  }
+  .header-icon-btn {
+    display: inline-flex;
+  }
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0 1rem;