lookbook 1.0.0.beta.3 → 1.0.0.beta.6

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

@@ -76,6 +76,7 @@ table {
 button, input, optgroup, select, textarea {
   font-family: inherit;
   font-size: 100%;
+  font-weight: inherit;
   line-height: inherit;
   color: inherit;
   margin: 0;
@@ -93,7 +94,7 @@ button, [type="button"], [type="reset"], [type="submit"] {
 }
 
 :-moz-focusring {
-  outline:  auto;
+  outline: auto;
 }
 
 :-moz-ui-invalid {
@@ -172,10 +173,6 @@ img, video {
   height: auto;
 }
 
-[hidden] {
-  display: none;
-}
-
 [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
   appearance: none;
   --tw-shadow: 0 0 #0000;
@@ -195,7 +192,7 @@ img, video {
   --tw-ring-offset-color: #fff;
   --tw-ring-color: #2563eb;
   --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(1px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   border-color: #2563eb;
   outline: 2px solid #0000;
@@ -241,7 +238,6 @@ select {
   appearance: none;
   color-adjust: exact;
   vertical-align: middle;
-  -webkit-user-select: none;
   user-select: none;
   height: 1rem;
   width: 1rem;
@@ -271,7 +267,7 @@ select {
   --tw-ring-offset-color: #fff;
   --tw-ring-color: #2563eb;
   --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(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   outline: 2px solid #0000;
 }
@@ -377,7 +373,9 @@ pre[class*="language-"] {
   background-color: var(--lookbook-scrollbar-hover);
 }
 
-*, :before, :after {
+*, :before, :after, ::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -446,7 +444,21 @@ pre[class*="language-"] {
   font-weight: 600;
 }
 
+.prose :where(a strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
 .prose :where(ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
   padding-left: 1.625em;
   list-style-type: decimal;
 }
@@ -488,6 +500,8 @@ pre[class*="language-"] {
 }
 
 .prose :where(ul):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
   padding-left: 1.625em;
   list-style-type: disc;
 }
@@ -538,6 +552,7 @@ pre[class*="language-"] {
 }
 
 .prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
   font-weight: 900;
 }
 
@@ -551,6 +566,7 @@ pre[class*="language-"] {
 }
 
 .prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
   font-weight: 800;
 }
 
@@ -564,6 +580,7 @@ pre[class*="language-"] {
 }
 
 .prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
   font-weight: 700;
 }
 
@@ -576,9 +593,15 @@ pre[class*="language-"] {
 }
 
 .prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
   font-weight: 700;
 }
 
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
 .prose :where(figure > *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
   margin-bottom: 0;
@@ -602,7 +625,33 @@ pre[class*="language-"] {
 }
 
 .prose :where(a code):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-links);
+  color: inherit;
+}
+
+.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+  font-size: .875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+  font-size: .9em;
+}
+
+.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
 }
 
 .prose :where(pre):not(:where([class~="not-prose"] *)) {
@@ -669,7 +718,15 @@ pre[class*="language-"] {
 
 .prose :where(tbody td):not(:where([class~="not-prose"] *)) {
   vertical-align: baseline;
-  padding: .571429em;
+}
+
+.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
+  border-top-width: 1px;
+  border-top-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
+  vertical-align: top;
 }
 
 .prose {
@@ -714,11 +771,6 @@ pre[class*="language-"] {
   margin-bottom: 1.25em;
 }
 
-.prose :where(img):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
 .prose :where(video):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
@@ -729,14 +781,6 @@ pre[class*="language-"] {
   margin-bottom: 2em;
 }
 
-.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
-  font-size: .875em;
-}
-
-.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
-  font-size: .9em;
-}
-
 .prose :where(li):not(:where([class~="not-prose"] *)) {
   margin-top: .5em;
   margin-bottom: .5em;
@@ -750,24 +794,24 @@ pre[class*="language-"] {
   padding-left: .375em;
 }
 
-.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: .75em;
   margin-bottom: .75em;
 }
 
-.prose > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.prose > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
-.prose > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.prose > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
@@ -800,19 +844,23 @@ pre[class*="language-"] {
   padding-right: 0;
 }
 
-.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+  padding: .571429em;
+}
+
+.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
   padding-left: 0;
 }
 
-.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
   padding-right: 0;
 }
 
-.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
@@ -914,10 +962,14 @@ pre[class*="language-"] {
 }
 
 .prose-sm :where(ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+  margin-bottom: 1.14286em;
   padding-left: 1.57143em;
 }
 
 .prose-sm :where(ul):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+  margin-bottom: 1.14286em;
   padding-left: 1.57143em;
 }
 
@@ -934,24 +986,24 @@ pre[class*="language-"] {
   padding-left: .428571em;
 }
 
-.prose-sm > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: .571429em;
   margin-bottom: .571429em;
 }
 
-.prose-sm > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
-.prose-sm > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
@@ -1000,23 +1052,52 @@ pre[class*="language-"] {
   padding-right: 0;
 }
 
-.prose-sm :where(tbody td):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
   padding: .666667em 1em;
 }
 
-.prose-sm :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
   padding-left: 0;
 }
 
-.prose-sm :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
   padding-right: 0;
 }
 
-.prose-sm > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+
+.prose-base :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose-base :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose-base :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose-base :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-sm > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
@@ -1118,10 +1199,14 @@ pre[class*="language-"] {
 }
 
 .prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+  margin-bottom: 1.33333em;
   padding-left: 1.55556em;
 }
 
 .prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+  margin-bottom: 1.33333em;
   padding-left: 1.55556em;
 }
 
@@ -1138,24 +1223,24 @@ pre[class*="language-"] {
   padding-left: .444444em;
 }
 
-.prose-lg > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: .888889em;
   margin-bottom: .888889em;
 }
 
-.prose-lg > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
-.prose-lg > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
@@ -1204,29 +1289,87 @@ pre[class*="language-"] {
   padding-right: 0;
 }
 
-.prose-lg :where(tbody td):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
   padding: .75em;
 }
 
-.prose-lg :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
   padding-left: 0;
 }
 
-.prose-lg :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
   padding-right: 0;
 }
 
-.prose-lg > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-lg > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .8em;
+  margin-bottom: .8em;
+}
+
+.prose-xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.2em;
+}
+
+.prose-xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.2em;
+}
+
+.prose-xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.2em;
+}
+
+.prose-xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.2em;
+}
+
+.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .833333em;
+  margin-bottom: .833333em;
+}
+
+.prose-2xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.33333em;
+}
+
+.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
 .theme-github-light {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .theme-github-light .highlight .hll {
@@ -1463,16 +1606,15 @@ pre[class*="language-"] {
   width: min-content;
   z-index: 10;
   height: 100%;
-  -webkit-user-select: none;
   user-select: none;
   border-style: dashed;
   border-right-width: 1px;
   border-color: var(--lookbook-divider);
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   text-align: right;
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity) );
+  color: rgb(156 163 175 / var(--tw-text-opacity));
   padding: .75rem;
 }
 
@@ -1500,13 +1642,13 @@ pre[class*="language-"] {
 
 [data-component="code"].focussed .code .line.highlighted {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity) );
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
 [data-component="icon"] {
   flex: none;
   line-height: 1;
-  transition-property: color, background-color, border-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, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: block;
@@ -1578,22 +1720,21 @@ pre[class*="language-"] {
 }
 
 [data-component="viewport"] .resize-handle:hover {
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
   --tw-bg-opacity: .2;
 }
 
 [data-component="viewport"] .resize-handle {
   touch-action: none;
-  -webkit-user-select: none;
   user-select: none;
-  color: var(--lookbook-viewport-handle-icon);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  color: var(--lookbook-viewport-handle-icon-stroke);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
 [data-component="viewport"] .resize-handle:hover {
-  color: var(--lookbook-viewport-handle-icon-hover);
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
 .form-input {
@@ -1616,7 +1757,7 @@ pre[class*="language-"] {
 
 .form-input {
   width: 100%;
-  background-color: var(--lookbook-input);
+  background-color: var(--lookbook-input-bg);
   border-radius: .375rem;
   font-size: .875rem;
   line-height: 1.25rem;
@@ -1682,10 +1823,6 @@ pre[class*="language-"] {
   top: 39px;
 }
 
-.-top-px {
-  top: -1px;
-}
-
 .top-1\/2 {
   top: 50%;
 }
@@ -1694,6 +1831,10 @@ pre[class*="language-"] {
   right: .75rem;
 }
 
+.-top-px {
+  top: -1px;
+}
+
 .-left-px {
   left: -1px;
 }
@@ -1756,30 +1897,22 @@ pre[class*="language-"] {
   margin-top: 2rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .ml-2 {
   margin-left: .5rem;
 }
 
-.mr-1 {
-  margin-right: .25rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
-.mr-6 {
-  margin-right: 1.5rem;
+.mt-12 {
+  margin-top: 3rem;
 }
 
 .ml-auto {
   margin-left: auto;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mr-2 {
   margin-right: .5rem;
 }
@@ -1796,6 +1929,14 @@ pre[class*="language-"] {
   margin-top: .25rem;
 }
 
+.mr-1 {
+  margin-right: .25rem;
+}
+
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1816,14 +1957,14 @@ pre[class*="language-"] {
   margin-right: .375rem;
 }
 
-.\!block {
-  display: block !important;
-}
-
 .block {
   display: block;
 }
 
+.\!block {
+  display: block !important;
+}
+
 .inline-block {
   display: inline-block;
 }
@@ -1848,14 +1989,14 @@ pre[class*="language-"] {
   display: contents;
 }
 
-.\!hidden {
-  display: none !important;
-}
-
 .hidden {
   display: none;
 }
 
+.\!hidden {
+  display: none !important;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1976,12 +2117,12 @@ pre[class*="language-"] {
   max-width: 1024px;
 }
 
-.max-w-\[420px\] {
-  max-width: 420px;
+.max-w-\[400px\] {
+  max-width: 400px;
 }
 
-.max-w-3xl {
-  max-width: 48rem;
+.max-w-\[420px\] {
+  max-width: 420px;
 }
 
 .max-w-none {
@@ -2010,42 +2151,42 @@ pre[class*="language-"] {
 
 .translate-x-0 {
   --tw-translate-x: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-x-full {
   --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-180 {
   --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-90 {
   --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-45 {
   --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 @keyframes spin {
@@ -2083,7 +2224,6 @@ pre[class*="language-"] {
 }
 
 .select-none {
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -2141,38 +2281,38 @@ pre[class*="language-"] {
 
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(.25rem * var(--tw-space-x-reverse) );
-  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse) ) );
+  margin-right: calc(.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse) ) );
-  margin-bottom: calc(.5rem * var(--tw-space-y-reverse) );
+  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)) );
+  margin-bottom: calc(.5rem * var(--tw-space-y-reverse));
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(.5rem * var(--tw-space-x-reverse) );
-  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+  margin-right: calc(.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse) );
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(.75rem * var(--tw-space-x-reverse) );
-  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse) ) );
+  margin-right: calc(.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)) );
 }
 
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse) ) );
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse) );
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)) );
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
 .divide-dashed > :not([hidden]) ~ :not([hidden]) {
@@ -2181,7 +2321,7 @@ pre[class*="language-"] {
 
 .divide-red-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-divide-opacity) );
+  border-color: rgb(254 202 202 / var(--tw-divide-opacity));
 }
 
 .divide-lookbook-divider > :not([hidden]) ~ :not([hidden]) {
@@ -2292,7 +2432,7 @@ pre[class*="language-"] {
 
 .border-red-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity) );
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
 .border-lookbook-divider {
@@ -2301,12 +2441,12 @@ pre[class*="language-"] {
 
 .border-gray-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity) );
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
 .border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity) );
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
 .\!border-lookbook-header-border {
@@ -2317,65 +2457,65 @@ pre[class*="language-"] {
   border-color: #0000;
 }
 
-.border-lookbook-tabs-highlight {
-  border-color: var(--lookbook-tabs-highlight);
+.border-lookbook-tabs-border-active {
+  border-color: var(--lookbook-tabs-border-active);
 }
 
 .bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-red-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity) );
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
 .bg-red-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity) );
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-lookbook-sidebar {
-  background-color: var(--lookbook-sidebar);
+.bg-lookbook-sidebar-bg {
+  background-color: var(--lookbook-sidebar-bg);
 }
 
 .bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity) );
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-lookbook-page {
-  background-color: var(--lookbook-page);
+.bg-lookbook-page-bg {
+  background-color: var(--lookbook-page-bg);
 }
 
 .bg-transparent {
   background-color: #0000;
 }
 
-.\!bg-lookbook-header {
-  background-color: var(--lookbook-header) !important;
+.bg-lookbook-drawer-bg {
+  background-color: var(--lookbook-drawer-bg);
 }
 
-.bg-lookbook-drawer {
-  background-color: var(--lookbook-drawer);
+.bg-lookbook-prose-bg {
+  background-color: var(--lookbook-prose-bg);
 }
 
-.bg-lookbook-prose {
-  background-color: var(--lookbook-prose);
+.\!bg-lookbook-header-bg {
+  background-color: var(--lookbook-header-bg) !important;
 }
 
 .bg-zinc-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity) );
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
 .bg-lookbook-divider {
   background-color: var(--lookbook-divider);
 }
 
-.bg-lookbook-toolbar {
-  background-color: var(--lookbook-toolbar);
+.bg-lookbook-toolbar-bg {
+  background-color: var(--lookbook-toolbar-bg);
 }
 
 .bg-lookbook-viewport-handle {
@@ -2511,6 +2651,10 @@ pre[class*="language-"] {
   padding-bottom: 3rem;
 }
 
+.pt-\[4px\] {
+  padding-top: 4px;
+}
+
 .pb-0 {
   padding-bottom: 0;
 }
@@ -2602,40 +2746,44 @@ pre[class*="language-"] {
 
 .text-red-300 {
   --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity) );
+  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity) );
+  color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
 .text-red-900 {
   --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity) );
+  color: rgb(127 29 29 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity) );
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 .text-red-800 {
   --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity) );
+  color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.\!text-lookbook-header-text {
-  color: var(--lookbook-header-text) !important;
+.text-lookbook-icon-button-stroke {
+  color: var(--lookbook-icon-button-stroke);
 }
 
-.text-lookbook-button-text {
-  color: var(--lookbook-button-text);
+.text-lookbook-icon-button-stroke-hover {
+  color: var(--lookbook-icon-button-stroke-hover);
 }
 
 .text-green-500 {
   --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity) );
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.\!text-lookbook-header-text {
+  color: var(--lookbook-header-text) !important;
 }
 
 .text-lookbook-branding-text {
@@ -2644,15 +2792,15 @@ pre[class*="language-"] {
 
 .text-green-600 {
   --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity) );
+  color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
 .text-lookbook-prose-text {
   color: var(--lookbook-prose-text);
 }
 
-.text-lookbook-viewport-handle-icon {
-  color: var(--lookbook-viewport-handle-icon);
+.text-lookbook-viewport-handle-icon-stroke {
+  color: var(--lookbook-viewport-handle-icon-stroke);
 }
 
 .text-lookbook-nav-text {
@@ -2663,14 +2811,18 @@ pre[class*="language-"] {
   color: var(--lookbook-nav-toggle);
 }
 
-.text-lookbook-nav-icon {
-  color: var(--lookbook-nav-icon);
+.text-lookbook-nav-icon-stroke {
+  color: var(--lookbook-nav-icon-stroke);
 }
 
 .text-lookbook-tabs-text {
   color: var(--lookbook-tabs-text);
 }
 
+.text-lookbook-tabs-text-hover {
+  color: var(--lookbook-tabs-text-hover);
+}
+
 .\!text-lookbook-tabs-text-disabled {
   color: var(--lookbook-tabs-text-disabled) !important;
 }
@@ -2687,14 +2839,14 @@ pre[class*="language-"] {
   opacity: .3;
 }
 
-.opacity-40 {
-  opacity: .4;
-}
-
 .opacity-80 {
   opacity: .8;
 }
 
+.opacity-40 {
+  opacity: .4;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2707,18 +2859,14 @@ pre[class*="language-"] {
   opacity: .9;
 }
 
-.opacity-60 {
-  opacity: .6;
+.\!opacity-100 {
+  opacity: 1 !important;
 }
 
 .opacity-70 {
   opacity: .7;
 }
 
-.\!opacity-100 {
-  opacity: 1 !important;
-}
-
 .shadow {
   --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);
@@ -2727,7 +2875,7 @@ pre[class*="language-"] {
 
 .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);
+  --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);
 }
 
@@ -2747,7 +2895,7 @@ pre[class*="language-"] {
 }
 
 .transition {
-  transition-property: color, background-color, border-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, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -2789,7 +2937,7 @@ pre[class*="language-"] {
   white-space: normal;
   background-color: #333;
   border-radius: 4px;
-  outline: none;
+  outline: 0;
   font-size: 14px;
   line-height: 1.4;
   transition-property: transform, visibility, opacity;
@@ -2866,7 +3014,7 @@ pre[class*="language-"] {
 }
 
 .tippy-box {
-  border: none;
+  border: 1px #0000;
 }
 
 .tippy-box[data-placement^="top"] > .tippy-arrow:after {
@@ -2927,33 +3075,33 @@ pre[class*="language-"] {
 
 .tippy-box[data-theme~="tooltip"] {
   opacity: .9;
-  background-color: var(--lookbook-tooltip);
+  background-color: var(--lookbook-tooltip-bg);
   color: var(--lookbook-tooltip-text);
   font-size: .75rem;
   line-height: 1rem;
 }
 
 .tippy-box[data-theme~="tooltip"][data-placement^="top"] > .tippy-arrow:before {
-  border-top-color: var(--lookbook-tooltip);
+  border-top-color: var(--lookbook-tooltip-bg);
 }
 
 .tippy-box[data-theme~="tooltip"][data-placement^="bottom"] > .tippy-arrow:before {
-  border-bottom-color: var(--lookbook-tooltip);
+  border-bottom-color: var(--lookbook-tooltip-bg);
 }
 
 .tippy-box[data-theme~="tooltip"][data-placement^="left"] > .tippy-arrow:before {
-  border-left-color: var(--lookbook-tooltip);
+  border-left-color: var(--lookbook-tooltip-bg);
 }
 
 .tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow:before {
-  border-right-color: var(--lookbook-tooltip);
+  border-right-color: var(--lookbook-tooltip-bg);
 }
 
 .tippy-box[data-theme~="menu"] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity) );
+  color: rgb(75 85 99 / var(--tw-text-opacity));
   --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -2988,7 +3136,7 @@ pre[class*="language-"] {
 
 .hover\:bg-indigo-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-lookbook-nav-item-hover:hover {
@@ -2997,20 +3145,20 @@ pre[class*="language-"] {
 
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity) );
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
 .hover\:text-indigo-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(55 48 163 / var(--tw-text-opacity) );
+  color: rgb(55 48 163 / var(--tw-text-opacity));
 }
 
-.hover\:text-lookbook-button-text-hover:hover {
-  color: var(--lookbook-button-text-hover);
+.hover\:text-lookbook-icon-button-stroke-hover:hover {
+  color: var(--lookbook-icon-button-stroke-hover);
 }
 
-.hover\:text-lookbook-viewport-handle-icon-hover:hover {
-  color: var(--lookbook-viewport-handle-icon-hover);
+.hover\:text-lookbook-viewport-handle-icon-stroke-hover:hover {
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
 .hover\:text-lookbook-tabs-text-hover:hover {
@@ -3032,13 +3180,13 @@ pre[class*="language-"] {
 
 .focus\:ring-0:focus {
   --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);
+  --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);
 }
 
 .focus\:ring-2:focus {
   --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(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + 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);
 }