Keep nav bar buttons above the blur layer on iOS Safari

iOS Safari can paint a backdrop-filter layer over later siblings even
while it is transparent, which dimmed the back button at the top of the
page. Put the nav content on its own layer above the material and only
apply the blur once the page has scrolled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/assets/style.css

@@ -251,15 +251,16 @@ a {
   position: sticky;
   top: 0;
   z-index: 10;
+  isolation: isolate;
   padding-top: env(safe-area-inset-top);
 }
+/* ぼかしはスクロールしたときだけ付ける。iOS Safari は透明でもぼかしの層をボタンの上に描くことがあるため */
 .nav-bar::before {
   content: "";
   position: absolute;
   inset: 0;
+  z-index: -1;
   background: var(--material-bar);
-  -webkit-backdrop-filter: blur(30px) saturate(150%);
-  backdrop-filter: blur(30px) saturate(150%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -271,9 +272,8 @@ a {
   top: 100%;
   height: 16px;
   pointer-events: none;
+  z-index: -1;
   background: linear-gradient(var(--material-bar), transparent);
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(#000, transparent);
   mask-image: linear-gradient(#000, transparent);
   opacity: 0;
@@ -283,8 +283,18 @@ a {
 .nav-bar.scrolled::after {
   opacity: 1;
 }
+.nav-bar.scrolled::before {
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  backdrop-filter: blur(30px) saturate(150%);
+}
+.nav-bar.scrolled::after {
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+/* ボタンと見出しはぼかしの層より必ず手前に */
 .nav-inner {
   position: relative;
+  z-index: 1;
   max-width: 600px;
   height: 44px;
   margin: 0 auto;