refactor: substituir celular e filmstrip por notebook

app/globals.css

@@ -835,13 +835,14 @@ textarea {
 
 .notebook-story-runway {
   position: relative;
-  min-height: 100dvh;
+  min-height: 520vh;
 }
 
 .notebook-story-sticky {
   position: sticky;
   top: 0;
   display: grid;
+  height: 100dvh;
   min-height: 100dvh;
   place-items: center;
   padding: clamp(40px, 7vw, 96px) clamp(20px, 6vw, 80px);
@@ -904,6 +905,30 @@ textarea {
   width: 100%;
   height: 100%;
 }
+.notebook-story-static-content {
+  width: min(1080px, 100%);
+  margin: 0 auto;
+  padding: clamp(48px, 9vw, 112px) clamp(20px, 6vw, 80px);
+}
+
+.notebook-story-static-content > .notebook-fallback {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.notebook-screen-surface {
+  width: min(660px, 68vw);
+  min-width: 280px;
+  overflow: hidden;
+  border-radius: 2px;
+  transform: translateZ(0);
+}
+
+.notebook-screen-surface .notebook-browser {
+  width: 100%;
+  box-shadow: none;
+}
 
 .notebook-fallback {
   width: min(1080px, 100%);