fix(story): harden notebook interaction and fallback

app/globals.css

@@ -835,7 +835,7 @@ textarea {
 
 .notebook-story-runway {
   position: relative;
-  min-height: 520vh;
+  min-height: var(--notebook-runway, 520vh);
 }
 
 .notebook-story-sticky {
@@ -1023,11 +1023,12 @@ textarea {
 .notebook-tab {
   display: flex;
   min-width: 0;
+  min-height: 44px;
   align-items: center;
   gap: var(--sp-2);
-  padding: 14px 10px;
-  border: 0;
-  border-bottom: 2px solid transparent;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-bottom-width: 2px;
   background: transparent;
   color: rgba(244, 242, 237, 0.48);
   cursor: pointer;
@@ -1104,20 +1105,39 @@ textarea {
 
 .notebook-panel-copy a {
   display: inline-flex;
+  min-height: 44px;
   align-items: center;
   gap: 6px;
   margin-top: var(--sp-5);
-  color: var(--slash);
+  padding: 0 14px;
+  border: 1px solid var(--slash);
+  background: var(--slash);
+  color: var(--ink);
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-decoration: none;
   text-transform: uppercase;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease;
 }
 
 .notebook-panel-copy a:hover {
-  color: var(--white);
+  border-color: var(--white);
+  background: var(--white);
+  color: var(--ink);
+}
+
+.notebook-panel-copy a:active {
+  transform: scale(0.98);
+}
+
+.notebook-panel-copy a:focus-visible {
+  outline: 2px solid var(--slash);
+  outline-offset: 3px;
 }
 
 .notebook-screenshot-wrap {
@@ -1132,7 +1152,49 @@ textarea {
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
+}
+.notebook-screenshot-current,
+.notebook-screenshot-outgoing {
+  position: absolute;
+  inset: 0;
+}
+
+.notebook-screenshot-current {
+  z-index: 0;
+  animation: notebook-screenshot-in 180ms ease both;
+}
+
+.notebook-screenshot-outgoing {
+  z-index: 0;
+  animation: notebook-screenshot-out 180ms ease both;
+}
+
+.notebook-screenshot-wrap img.notebook-screenshot-preload {
+  position: absolute;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@keyframes notebook-screenshot-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes notebook-screenshot-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .notebook-cursor {
@@ -1228,7 +1290,10 @@ textarea {
 
 @media (prefers-reduced-motion: reduce) {
   .notebook-tab,
-  .notebook-cursor {
+  .notebook-cursor,
+  .notebook-screenshot-current,
+  .notebook-screenshot-outgoing {
     transition: none;
+    animation: none;
   }
 }