lookbook 2.0.0.beta.3 → 2.0.0.beta.5

data/public/lookbook-assets/css/lookbook.css

@@ -407,7 +407,7 @@ pre[class*="language-"] {
   background-color: var(--lookbook-scrollbar);
   background-clip: content-box;
   border-radius: 9999px;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -1454,10 +1454,22 @@ pre[class*="language-"] {
   overflow: hidden;
 }
 
+[data-component="header"] .header-project-icon {
+  height: 1.25rem;
+  width: min-content;
+  flex: none;
+  display: inline-block;
+}
+
+[data-component="header"] .header-project-icon svg {
+  height: 100%;
+  width: auto;
+}
+
 [data-component="icon"] {
   flex: none;
   line-height: 1;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: block;
@@ -1468,16 +1480,93 @@ pre[class*="language-"] {
   width: 100%;
   fill: #0000;
   stroke: currentColor;
-  stroke-width: 2px;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
+[data-component="icon"].icon-stroke-2 svg {
+  stroke-width: 2px;
+}
+
+[data-component="icon"].icon-stroke-1 svg {
+  stroke-width: 1px;
+}
+
 .lookbook-panel {
   min-height: 100%;
   padding: 1rem;
 }
 
+[data-component="message"] {
+  width: 100%;
+  border-width: 1px;
+  border-color: var(--lookbook-divider);
+  background-color: var(--lookbook-message-bg);
+  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  border-radius: .25rem;
+  gap: 1.5rem;
+  padding: 1rem;
+  display: flex;
+}
+
+@media (min-width: 480px) {
+  [data-component="message"] {
+    padding: 1.5rem;
+  }
+}
+
+[data-component="message"].icon-right {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+[data-component="message"].icon-left {
+  align-items: flex-start;
+}
+
+[data-component="message"] .message-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: .025em;
+  color: var(--lookbook-message-title);
+  margin-bottom: .5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  overflow: hidden;
+}
+
+[data-component="message"] .message-icon {
+  opacity: .3;
+  flex: none;
+  display: none;
+}
+
+@media (min-width: 480px) {
+  [data-component="message"] .message-icon {
+    display: block;
+  }
+}
+
+[data-component="message"].theme-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
+[data-component="message"].theme-error .message-title {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+[data-component="message"].theme-error .message-icon {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+  opacity: .5;
+}
+
 [data-component="nav"] .nav-action {
   width: 100%;
   cursor: pointer;
@@ -1487,7 +1576,7 @@ pre[class*="language-"] {
   align-items: center;
   padding-top: .25rem;
   padding-bottom: .25rem;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: flex;
@@ -1520,7 +1609,7 @@ pre[class*="language-"] {
   text-align: left;
   vertical-align: middle;
   padding: 1rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table:not(.linear) thead th.param-label {
@@ -1542,7 +1631,7 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table:not(.linear) tbody td.param-label {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table:not(.linear) tbody .param-input-wrapper {
@@ -1580,24 +1669,32 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table.linear td.param-label {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table.linear td.param-description-empty {
   display: none;
 }
 
+[data-component="prose"] {
+  letter-spacing: -.015em !important;
+}
+
 [data-component="prose"] [data-component="code"] {
   border-width: 1px;
   border-color: var(--lookbook-divider);
   border-radius: .375rem;
 }
 
-[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"] {
+[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"], [data-component="prose"] [data-lookbook-embed] {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
+[data-component="prose"] [data-lookbook-embed] {
+  border-radius: .375rem;
+}
+
 [data-component="tabs-dropdown-tab"]:not(.hidden) {
   border-bottom-width: 1px;
   border-bottom-color: var(--lookbook-divider);
@@ -1652,7 +1749,7 @@ pre[class*="language-"] {
   -webkit-user-select: none;
   user-select: none;
   color: var(--lookbook-viewport-handle-icon-stroke);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -1785,10 +1882,6 @@ select.compact {
   position: relative;
 }
 
-.sticky {
-  position: sticky;
-}
-
 .-inset-px {
   inset: -1px;
 }
@@ -1907,6 +2000,10 @@ select.compact {
   margin-bottom: 1.5rem;
 }
 
+.mb-7 {
+  margin-bottom: 1.75rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1955,14 +2052,6 @@ select.compact {
   margin-top: 3rem;
 }
 
-.mt-2 {
-  margin-top: .5rem;
-}
-
-.mt-3 {
-  margin-top: .75rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -2067,6 +2156,10 @@ select.compact {
   min-height: 0;
 }
 
+.min-h-\[50vh\] {
+  min-height: 50vh;
+}
+
 .w-11 {
   width: 2.75rem;
 }
@@ -2087,10 +2180,6 @@ select.compact {
   width: 1.25rem;
 }
 
-.w-\[140px\] {
-  width: 140px;
-}
-
 .w-\[320px\] {
   width: 320px;
 }
@@ -2127,10 +2216,6 @@ select.compact {
   max-width: 1024px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .flex-none {
   flex: none;
 }
@@ -2139,6 +2224,10 @@ select.compact {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -2334,6 +2423,10 @@ select.compact {
   border-color: var(--lookbook-divider);
 }
 
+.divide-lookbook-viewport-handle-icon-stroke-hover > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -2445,6 +2538,10 @@ select.compact {
   border-color: var(--lookbook-tabs-border-active);
 }
 
+.border-lookbook-viewport-handle-icon-stroke-hover {
+  border-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
@@ -2454,6 +2551,32 @@ select.compact {
   border-color: #0000;
 }
 
+.border-x-lookbook-viewport-handle-icon-stroke-hover {
+  border-left-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+  border-right-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-y-lookbook-viewport-handle-icon-stroke-hover {
+  border-top-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+  border-bottom-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-b-lookbook-viewport-handle-icon-stroke-hover {
+  border-bottom-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-l-lookbook-viewport-handle-icon-stroke-hover {
+  border-left-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-r-lookbook-viewport-handle-icon-stroke-hover {
+  border-right-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-t-lookbook-viewport-handle-icon-stroke-hover {
+  border-top-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .\!bg-lookbook-header-bg {
   background-color: var(--lookbook-header-bg) !important;
 }
@@ -2515,6 +2638,10 @@ select.compact {
   background-color: var(--lookbook-toolbar-bg);
 }
 
+.bg-lookbook-viewport-handle-icon-stroke-hover {
+  background-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2539,6 +2666,29 @@ select.compact {
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
+.from-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-from: var(--lookbook-viewport-handle-icon-stroke-hover);
+  --tw-gradient-to: #fff0;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-to: #fff0;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--lookbook-viewport-handle-icon-stroke-hover), var(--tw-gradient-to);
+}
+
+.to-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-to: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.fill-lookbook-viewport-handle-icon-stroke-hover {
+  fill: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.stroke-lookbook-viewport-handle-icon-stroke-hover {
+  stroke: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .p-1 {
   padding: .25rem;
 }
@@ -2629,8 +2779,8 @@ select.compact {
   padding-bottom: .75rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pb-6 {
+  padding-bottom: 1.5rem;
 }
 
 .pl-0 {
@@ -2758,10 +2908,6 @@ select.compact {
   line-height: 1.25;
 }
 
-.tracking-wide {
-  letter-spacing: .025em;
-}
-
 .tracking-wider {
   letter-spacing: .05em;
 }
@@ -2794,10 +2940,6 @@ select.compact {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
-.text-lookbook-blank-slate-title {
-  color: var(--lookbook-blank-slate-title);
-}
-
 .text-lookbook-branding-text {
   color: var(--lookbook-branding-text);
 }
@@ -2838,9 +2980,8 @@ select.compact {
   color: var(--lookbook-tabs-text-hover);
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
+.text-lookbook-viewport-handle-icon-stroke-hover {
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
 .text-red-700 {
@@ -2857,6 +2998,23 @@ select.compact {
   text-decoration-line: underline;
 }
 
+.decoration-lookbook-viewport-handle-icon-stroke-hover {
+  -webkit-text-decoration-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+  text-decoration-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.placeholder-lookbook-viewport-handle-icon-stroke-hover::placeholder {
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.caret-lookbook-viewport-handle-icon-stroke-hover {
+  caret-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.accent-lookbook-viewport-handle-icon-stroke-hover {
+  accent-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .\!opacity-100 {
   opacity: 1 !important;
 }
@@ -2907,12 +3065,29 @@ select.compact {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-shadow-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.outline-lookbook-viewport-handle-icon-stroke-hover {
+  outline-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-ring-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.ring-offset-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-ring-offset-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2923,7 +3098,7 @@ select.compact {
 }
 
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -2941,7 +3116,7 @@ select.compact {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -2968,6 +3143,10 @@ select.compact {
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
+.bg-checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
 .tippy-box[data-animation="fade"][data-state="hidden"] {
   opacity: 0;
 }
@@ -3337,7 +3516,6 @@ select.compact {
 
 .theme-github .highlight .err {
   color: var(--hl-error-fg);
-  background-color: var(--hl-error-bg);
 }
 
 .theme-github .highlight .g {
@@ -3346,7 +3524,7 @@ select.compact {
 
 .theme-github .highlight .k {
   color: var(--hl-keyword);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .l {
@@ -3359,7 +3537,7 @@ select.compact {
 
 .theme-github .highlight .o {
   color: var(--hl-operator);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .x {
@@ -3377,7 +3555,7 @@ select.compact {
 
 .theme-github .highlight .cp {
   color: var(--hl-comment-preproc);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .c1 {
@@ -3389,7 +3567,7 @@ select.compact {
   color: var(--hl-comment-special-fg);
   background-color: var(--hl-comment-special-bg);
   font-style: italic;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gd {
@@ -3425,12 +3603,12 @@ select.compact {
 
 .theme-github .highlight .gs {
   color: var(--hl-subtle-fg);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gu {
   color: var(--hl-subheading);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gt {
@@ -3439,12 +3617,12 @@ select.compact {
 
 .theme-github .highlight .kc, .theme-github .highlight .kd, .theme-github .highlight .kn, .theme-github .highlight .kp, .theme-github .highlight .kr {
   color: var(--hl-keyword-crude);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .kt {
   color: var(--hl-keyword-subtle);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .ld {
@@ -3469,7 +3647,7 @@ select.compact {
 
 .theme-github .highlight .nc {
   color: var(--hl-class);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .no {
@@ -3486,12 +3664,12 @@ select.compact {
 
 .theme-github .highlight .ne {
   color: var(--hl-exception);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .nf {
   color: var(--hl-function);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .nl {
@@ -3516,7 +3694,7 @@ select.compact {
 
 .theme-github .highlight .ow {
   color: var(--hl-word);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .w {
@@ -3568,6 +3746,216 @@ select.compact {
   background-color: #0000;
 }
 
+@media (min-width: 1024px) {
+  .lg\:prose-base {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+
+  .lg\:prose-base :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+    font-size: 1.25em;
+    line-height: 1.6;
+  }
+
+  .lg\:prose-base :where(blockquote):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1em;
+  }
+
+  .lg\:prose-base :where(h1):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: .888889em;
+    font-size: 2.25em;
+    line-height: 1.11111;
+  }
+
+  .lg\:prose-base :where(h2):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 1em;
+    font-size: 1.5em;
+    line-height: 1.33333;
+  }
+
+  .lg\:prose-base :where(h3):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: .6em;
+    font-size: 1.25em;
+    line-height: 1.6;
+  }
+
+  .lg\:prose-base :where(h4):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.5em;
+    margin-bottom: .5em;
+    line-height: 1.5;
+  }
+
+  .lg\:prose-base :where(img):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(video):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:prose-base :where(figcaption):not(:where([class~="not-prose"] *)) {
+    margin-top: .857143em;
+    font-size: .875em;
+    line-height: 1.42857;
+  }
+
+  .lg\:prose-base :where(code):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(h2 code):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(h3 code):not(:where([class~="not-prose"] *)) {
+    font-size: .9em;
+  }
+
+  .lg\:prose-base :where(pre):not(:where([class~="not-prose"] *)) {
+    border-radius: .375rem;
+    margin-top: 1.71429em;
+    margin-bottom: 1.71429em;
+    padding: .857143em 1.14286em;
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+  }
+
+  .lg\:prose-base :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+  }
+
+  .lg\:prose-base :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: .5em;
+    margin-bottom: .5em;
+  }
+
+  .lg\:prose-base :where(ol > li):not(:where([class~="not-prose"] *)) {
+    padding-left: .375em;
+  }
+
+  .lg\:prose-base :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: .375em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(hr):not(:where([class~="not-prose"] *)) {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  .lg\:prose-base :where(hr + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h2 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h3 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(table):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(thead th):not(:where([class~="not-prose"] *)) {
+    padding-bottom: .571429em;
+    padding-left: .571429em;
+    padding-right: .571429em;
+  }
+
+  .lg\:prose-base :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-base :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .lg\:prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding: .571429em;
+  }
+
+  .lg\:prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+}
+
 .hover\:bg-lookbook-button-bg-hover:hover {
   background-color: var(--lookbook-button-bg-hover);
 }
@@ -3628,11 +4016,53 @@ select.compact {
   outline: 2px solid #0000;
 }
 
+.prose-headings\:font-semibold :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
+  font-weight: 600;
+}
+
+.prose-h1\:font-bold :where(h1):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
 .prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
   color: var(--lookbook-prose-link);
 }
 
+@media (min-width: 480px) {
+  .xs\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .xs\:w-auto {
+    width: auto;
+  }
+
+  .xs\:min-w-\[440px\] {
+    min-width: 440px;
+  }
+
+  .xs\:max-w-\[680px\] {
+    max-width: 680px;
+  }
+
+  .xs\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+@media (min-width: 640px) {
+  .sm\:p-8 {
+    padding: 2rem;
+  }
+}
+
 @media (min-width: 768px) {
+  .md\:p-12 {
+    padding: 3rem;
+  }
+
   .md\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -3643,4 +4073,14 @@ select.compact {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mb-9 {
+    margin-bottom: 2.25rem;
+  }
+
+  .lg\:pb-8 {
+    padding-bottom: 2rem;
+  }
+}
+
 /*# sourceMappingURL=lookbook.css.map */