lookbook 1.5.2 → 2.3.7

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

@@ -1,3 +1,37 @@
+@font-face {
+  font-family: Inter var;
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("../Inter-roman.var.b695afbe.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Inter var;
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("../Inter-italic.var.69eb0fe1.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Source Code Variable;
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("../SourceCodeVariable-Roman.ttf.118e9f22.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Source Code Variable;
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("../SourceCodeVariable-Italic.ttf.09b4354a.woff2") format("woff2");
+}
+
 *, :before, :after {
   box-sizing: border-box;
   border: 0 solid #e5e7eb;
@@ -7,11 +41,13 @@
   --tw-content: "";
 }
 
-html {
+html, :host {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-feature-settings: normal;
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   line-height: 1.5;
 }
 
@@ -45,7 +81,9 @@ b, strong {
 }
 
 code, kbd, samp, pre {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-family: Source Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   font-size: 1em;
 }
 
@@ -75,10 +113,13 @@ table {
 }
 
 button, input, optgroup, select, textarea {
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
   font-family: inherit;
   font-size: 100%;
   font-weight: inherit;
   line-height: inherit;
+  letter-spacing: inherit;
   color: inherit;
   margin: 0;
   padding: 0;
@@ -88,7 +129,7 @@ button, select {
   text-transform: none;
 }
 
-button, [type="button"], [type="reset"], [type="submit"] {
+button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
   -webkit-appearance: button;
   background-color: #0000;
   background-image: none;
@@ -106,7 +147,11 @@ progress {
   vertical-align: baseline;
 }
 
-::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -147,6 +192,10 @@ ol, ul, menu {
   list-style: none;
 }
 
+dialog {
+  padding: 0;
+}
+
 textarea {
   resize: vertical;
 }
@@ -178,7 +227,7 @@ img, video {
   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 {
+[type="text"], input:where(:not([type])), [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;
   background-color: #fff;
@@ -190,7 +239,7 @@ img, video {
   line-height: 1.5rem;
 }
 
-[type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus {
+[type="text"]:focus, input:where(:not([type])):focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus {
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty, );
   --tw-ring-offset-width: 0px;
@@ -214,9 +263,54 @@ input::placeholder, textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+::-webkit-datetime-edit {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-year-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-month-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-day-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-hour-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-minute-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-second-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-datetime-edit-millisecond-field {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+::-webkit-datetime-edit-meridiem-field {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -230,7 +324,7 @@ select {
   padding-right: 2.5rem;
 }
 
-[multiple] {
+[multiple], [size]:where(select:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -243,10 +337,7 @@ select {
   appearance: none;
   print-color-adjust: exact;
   vertical-align: middle;
-  -webkit-user-select: none;
   user-select: none;
-  height: 1rem;
-  width: 1rem;
   color: #2563eb;
   --tw-shadow: 0 0 #0000;
   background-color: #fff;
@@ -254,6 +345,8 @@ select {
   border-width: 1px;
   border-color: #6b7280;
   flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   padding: 0;
   display: inline-block;
 }
@@ -324,13 +417,14 @@ select {
 }
 
 [type="file"]:focus {
-  outline: 1px solid ButtonText;
+  outline: 1px solid buttontext;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
 html {
-  height: 100vh;
   scroll-behavior: smooth;
+  width: 100vw;
+  height: 100vh;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -340,10 +434,9 @@ html {
 }
 
 body {
+  width: 100vw;
   color: var(--lookbook-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-size: .875rem;
   line-height: 1.25rem;
   overflow: hidden;
@@ -359,8 +452,8 @@ pre[class*="language-"] {
 }
 
 ::-webkit-scrollbar {
-  height: .25rem;
   width: .25rem;
+  height: .25rem;
 }
 
 ::-webkit-scrollbar-track {
@@ -394,6 +487,9 @@ pre[class*="language-"] {
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -425,6 +521,10 @@ pre[class*="language-"] {
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
 }
 
 .form-input, .form-textarea, .form-select, .form-multiselect {
@@ -463,9 +563,54 @@ pre[class*="language-"] {
 
 .form-input::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+.form-input::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+.form-input::-webkit-datetime-edit {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-year-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-month-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-day-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-hour-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-minute-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-second-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-input::-webkit-datetime-edit-millisecond-field {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.form-input::-webkit-datetime-edit, .form-input::-webkit-datetime-edit-year-field, .form-input::-webkit-datetime-edit-month-field, .form-input::-webkit-datetime-edit-day-field, .form-input::-webkit-datetime-edit-hour-field, .form-input::-webkit-datetime-edit-minute-field, .form-input::-webkit-datetime-edit-second-field, .form-input::-webkit-datetime-edit-millisecond-field, .form-input::-webkit-datetime-edit-meridiem-field {
+.form-input::-webkit-datetime-edit-meridiem-field {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -475,12 +620,12 @@ pre[class*="language-"] {
   max-width: 65ch;
 }
 
-.prose :where(p):not(:where([class~="not-prose"] *)) {
+.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
-.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+.prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-lead);
   margin-top: 1.2em;
   margin-bottom: 1.2em;
@@ -488,116 +633,114 @@ pre[class*="language-"] {
   line-height: 1.6;
 }
 
-.prose :where(a):not(:where([class~="not-prose"] *)) {
+.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-links);
   font-weight: 500;
   text-decoration: underline;
 }
 
-.prose :where(strong):not(:where([class~="not-prose"] *)) {
+.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-bold);
   font-weight: 600;
 }
 
-.prose :where(a strong):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
+.prose :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th strong):not(:where([class~="not-prose"], [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"] *)) {
+.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
-  padding-left: 1.625em;
+  padding-inline-start: 1.625em;
   list-style-type: decimal;
 }
 
-.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: upper-alpha;
 }
 
-.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: lower-alpha;
 }
 
-.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: upper-alpha;
 }
 
-.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: lower-alpha;
 }
 
-.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: upper-roman;
 }
 
-.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: lower-roman;
 }
 
-.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: upper-roman;
 }
 
-.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: lower-roman;
 }
 
-.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   list-style-type: decimal;
 }
 
-.prose :where(ul):not(:where([class~="not-prose"] *)) {
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
-  padding-left: 1.625em;
+  padding-inline-start: 1.625em;
   list-style-type: disc;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+.prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
   color: var(--tw-prose-counters);
   font-weight: 400;
 }
 
-.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+.prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
   color: var(--tw-prose-bullets);
 }
 
-.prose :where(hr):not(:where([class~="not-prose"] *)) {
+.prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  margin-top: 1.25em;
+  font-weight: 600;
+}
+
+.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-color: var(--tw-prose-hr);
   border-top-width: 1px;
   margin-top: 3em;
   margin-bottom: 3em;
 }
 
-.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-quotes);
-  border-left-width: .25rem;
-  border-left-color: var(--tw-prose-quote-borders);
+  border-inline-start-width: .25rem;
+  border-inline-start-color: var(--tw-prose-quote-borders);
   quotes: "“""”""‘""’";
   margin-top: 1.6em;
   margin-bottom: 1.6em;
-  padding-left: 1em;
+  padding-inline-start: 1em;
   font-style: italic;
   font-weight: 500;
 }
 
-.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *)):before {
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
   content: open-quote;
 }
 
-.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *)):after {
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
   content: close-quote;
 }
 
-.prose :where(h1):not(:where([class~="not-prose"] *)) {
+.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   margin-top: 0;
   margin-bottom: .888889em;
@@ -606,12 +749,12 @@ pre[class*="language-"] {
   line-height: 1.11111;
 }
 
-.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+.prose :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
   font-weight: 900;
 }
 
-.prose :where(h2):not(:where([class~="not-prose"] *)) {
+.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   margin-top: 2em;
   margin-bottom: 1em;
@@ -620,12 +763,12 @@ pre[class*="language-"] {
   line-height: 1.33333;
 }
 
-.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+.prose :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
   font-weight: 800;
 }
 
-.prose :where(h3):not(:where([class~="not-prose"] *)) {
+.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   margin-top: 1.6em;
   margin-bottom: .6em;
@@ -634,12 +777,12 @@ pre[class*="language-"] {
   line-height: 1.6;
 }
 
-.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+.prose :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
   font-weight: 700;
 }
 
-.prose :where(h4):not(:where([class~="not-prose"] *)) {
+.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   margin-top: 1.5em;
   margin-bottom: .5em;
@@ -647,82 +790,85 @@ pre[class*="language-"] {
   line-height: 1.5;
 }
 
-.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+.prose :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
   font-weight: 700;
 }
 
-.prose :where(img):not(:where([class~="not-prose"] *)) {
+.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
+.prose :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+  display: block;
 }
 
-.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-captions);
-  margin-top: .857143em;
+.prose :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--tw-prose-kbd);
+  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
+  padding-top: .1875em;
+  padding-inline-end: .375em;
+  padding-bottom: .1875em;
+  border-radius: .3125rem;
+  padding-inline-start: .375em;
+  font-family: inherit;
   font-size: .875em;
-  line-height: 1.42857;
+  font-weight: 500;
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *)) {
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-code);
   font-size: .875em;
   font-weight: 600;
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *)):before, .prose :where(code):not(:where([class~="not-prose"] *)):after {
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
   content: "`";
 }
 
-.prose :where(a code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
+.prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
 }
 
-.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+.prose :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: inherit;
   font-size: .875em;
 }
 
-.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+.prose :where(h3 code):not(:where([class~="not-prose"], [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"] *)) {
+.prose :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th code):not(:where([class~="not-prose"], [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"] *)) {
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-pre-code);
   background-color: var(--tw-prose-pre-bg);
+  padding-top: .857143em;
+  padding-inline-end: 1.14286em;
+  padding-bottom: .857143em;
   border-radius: .375rem;
   margin-top: 1.71429em;
   margin-bottom: 1.71429em;
-  padding: .857143em 1.14286em;
+  padding-inline-start: 1.14286em;
   font-size: .875em;
   font-weight: 400;
   line-height: 1.71429;
   overflow-x: auto;
 }
 
-.prose :where(pre code):not(:where([class~="not-prose"] *)) {
+.prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-weight: inherit;
   color: inherit;
   font-size: inherit;
@@ -734,56 +880,71 @@ pre[class*="language-"] {
   padding: 0;
 }
 
-.prose :where(pre code):not(:where([class~="not-prose"] *)):before, .prose :where(pre code):not(:where([class~="not-prose"] *)):after {
+.prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
   content: none;
 }
 
-.prose :where(table):not(:where([class~="not-prose"] *)) {
-  width: 100%;
+.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   table-layout: auto;
-  text-align: left;
+  width: 100%;
   margin-top: 2em;
   margin-bottom: 2em;
   font-size: .875em;
   line-height: 1.71429;
 }
 
-.prose :where(thead):not(:where([class~="not-prose"] *)) {
+.prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--tw-prose-th-borders);
 }
 
-.prose :where(thead th):not(:where([class~="not-prose"] *)) {
+.prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   vertical-align: bottom;
+  padding-inline-end: .571429em;
   padding-bottom: .571429em;
-  padding-left: .571429em;
-  padding-right: .571429em;
+  padding-inline-start: .571429em;
   font-weight: 600;
 }
 
-.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--tw-prose-td-borders);
 }
 
-.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-bottom-width: 0;
 }
 
-.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   vertical-align: baseline;
 }
 
-.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
+.prose :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   border-top-width: 1px;
   border-top-color: var(--tw-prose-th-borders);
 }
 
-.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
+.prose :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   vertical-align: top;
 }
 
+.prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  text-align: start;
+}
+
+.prose :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--tw-prose-captions);
+  margin-top: .857143em;
+  font-size: .875em;
+  line-height: 1.42857;
+}
+
 .prose {
   --tw-prose-body: #374151;
   --tw-prose-headings: #111827;
@@ -796,6 +957,8 @@ pre[class*="language-"] {
   --tw-prose-quotes: #111827;
   --tw-prose-quote-borders: #e5e7eb;
   --tw-prose-captions: #6b7280;
+  --tw-prose-kbd: #111827;
+  --tw-prose-kbd-shadows: 17 24 39;
   --tw-prose-code: #111827;
   --tw-prose-pre-code: #e5e7eb;
   --tw-prose-pre-bg: #1f2937;
@@ -812,6 +975,8 @@ pre[class*="language-"] {
   --tw-prose-invert-quotes: #f3f4f6;
   --tw-prose-invert-quote-borders: #374151;
   --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-kbd: #fff;
+  --tw-prose-invert-kbd-shadows: 255 255 255;
   --tw-prose-invert-code: #fff;
   --tw-prose-invert-pre-code: #d1d5db;
   --tw-prose-invert-pre-bg: #00000080;
@@ -821,96 +986,93 @@ pre[class*="language-"] {
   line-height: 1.75;
 }
 
-.prose :where(video):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose :where(figure):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
+.prose :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.prose :where(li):not(:where([class~="not-prose"] *)) {
+.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .5em;
   margin-bottom: .5em;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .375em;
-}
-
-.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .375em;
+.prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: .375em;
 }
 
-.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .75em;
   margin-bottom: .75em;
 }
 
-.prose :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.prose :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
-.prose :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.prose :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
-.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .75em;
   margin-bottom: .75em;
 }
 
-.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
 }
 
-.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: .5em;
+  padding-inline-start: 1.625em;
 }
 
-.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
+.prose :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
+.prose :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
 }
 
-.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .571429em;
+  padding-inline-end: .571429em;
+  padding-bottom: .571429em;
+  padding-inline-start: .571429em;
 }
 
-.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"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
+.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
 }
 
-.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
 }
 
-.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
@@ -919,206 +1081,218 @@ pre[class*="language-"] {
   line-height: 1.71429;
 }
 
-.prose-sm :where(p):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.14286em;
   margin-bottom: 1.14286em;
 }
 
-.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .888889em;
   margin-bottom: .888889em;
   font-size: 1.28571em;
   line-height: 1.55556;
 }
 
-.prose-sm :where(blockquote):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.33333em;
   margin-bottom: 1.33333em;
-  padding-left: 1.11111em;
+  padding-inline-start: 1.11111em;
 }
 
-.prose-sm :where(h1):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
   margin-bottom: .8em;
   font-size: 2.14286em;
   line-height: 1.2;
 }
 
-.prose-sm :where(h2):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.6em;
   margin-bottom: .8em;
   font-size: 1.42857em;
   line-height: 1.4;
 }
 
-.prose-sm :where(h3):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.55556em;
   margin-bottom: .444444em;
   font-size: 1.28571em;
   line-height: 1.55556;
 }
 
-.prose-sm :where(h4):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.42857em;
   margin-bottom: .571429em;
   line-height: 1.42857;
 }
 
-.prose-sm :where(img):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.71429em;
   margin-bottom: 1.71429em;
 }
 
-.prose-sm :where(video):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.71429em;
-  margin-bottom: 1.71429em;
+.prose-sm :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.prose-sm :where(figure):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.71429em;
   margin-bottom: 1.71429em;
 }
 
-.prose-sm :where(figure > *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose-sm :where(figcaption):not(:where([class~="not-prose"] *)) {
-  margin-top: .666667em;
+.prose-sm :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .142857em;
+  padding-inline-end: .357143em;
+  padding-bottom: .142857em;
+  border-radius: .3125rem;
+  padding-inline-start: .357143em;
   font-size: .857143em;
-  line-height: 1.33333;
 }
 
-.prose-sm :where(code):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .857143em;
 }
 
-.prose-sm :where(h2 code):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .9em;
 }
 
-.prose-sm :where(h3 code):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .888889em;
 }
 
-.prose-sm :where(pre):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .666667em;
+  padding-inline-end: 1em;
+  padding-bottom: .666667em;
   border-radius: .25rem;
   margin-top: 1.66667em;
   margin-bottom: 1.66667em;
-  padding: .666667em 1em;
+  padding-inline-start: 1em;
   font-size: .857143em;
   line-height: 1.66667;
 }
 
-.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"] *)) {
+.prose-sm :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.14286em;
   margin-bottom: 1.14286em;
-  padding-left: 1.57143em;
+  padding-inline-start: 1.57143em;
 }
 
-.prose-sm :where(li):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .285714em;
   margin-bottom: .285714em;
 }
 
-.prose-sm :where(ol > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .428571em;
+.prose-sm :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: .428571em;
 }
 
-.prose-sm :where(ul > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .428571em;
-}
-
-.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .571429em;
   margin-bottom: .571429em;
 }
 
-.prose-sm :where(.prose-sm > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm :where(.prose-sm > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
-.prose-sm :where(.prose-sm > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm :where(.prose-sm > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
-.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .571429em;
   margin-bottom: .571429em;
 }
 
-.prose-sm :where(hr):not(:where([class~="not-prose"] *)) {
-  margin-top: 2.85714em;
-  margin-bottom: 2.85714em;
+.prose-sm :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+  margin-bottom: 1.14286em;
 }
 
-.prose-sm :where(hr + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-sm :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.14286em;
 }
 
-.prose-sm :where(h2 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-sm :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: .285714em;
+  padding-inline-start: 1.57143em;
 }
 
-.prose-sm :where(h3 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-sm :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2.85714em;
+  margin-bottom: 2.85714em;
 }
 
-.prose-sm :where(h4 + *):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-sm :where(table):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .857143em;
   line-height: 1.5;
 }
 
-.prose-sm :where(thead th):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 1em;
   padding-bottom: .666667em;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-inline-start: 1em;
 }
 
-.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
+.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
+}
+
+.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .666667em;
+  padding-inline-end: 1em;
+  padding-bottom: .666667em;
+  padding-inline-start: 1em;
 }
 
-.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
-  padding: .666667em 1em;
+.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.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, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
 }
 
-.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose-sm :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.71429em;
+  margin-bottom: 1.71429em;
+}
+
+.prose-sm :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose-sm :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: .666667em;
+  font-size: .857143em;
+  line-height: 1.33333;
 }
 
-.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
@@ -1127,214 +1301,226 @@ pre[class*="language-"] {
   line-height: 1.77778;
 }
 
-.prose-lg :where(p):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.33333em;
   margin-bottom: 1.33333em;
 }
 
-.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.09091em;
   margin-bottom: 1.09091em;
   font-size: 1.22222em;
   line-height: 1.45455;
 }
 
-.prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.66667em;
   margin-bottom: 1.66667em;
-  padding-left: 1em;
+  padding-inline-start: 1em;
 }
 
-.prose-lg :where(h1):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
   margin-bottom: .833333em;
   font-size: 2.66667em;
   line-height: 1;
 }
 
-.prose-lg :where(h2):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.86667em;
   margin-bottom: 1.06667em;
   font-size: 1.66667em;
   line-height: 1.33333;
 }
 
-.prose-lg :where(h3):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.66667em;
   margin-bottom: .666667em;
   font-size: 1.33333em;
   line-height: 1.5;
 }
 
-.prose-lg :where(h4):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.77778em;
   margin-bottom: .444444em;
   line-height: 1.55556;
 }
 
-.prose-lg :where(img):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.77778em;
   margin-bottom: 1.77778em;
 }
 
-.prose-lg :where(video):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.77778em;
-  margin-bottom: 1.77778em;
+.prose-lg :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.prose-lg :where(figure):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.77778em;
   margin-bottom: 1.77778em;
 }
 
-.prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) {
-  margin-top: 1em;
+.prose-lg :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .222222em;
+  padding-inline-end: .444444em;
+  padding-bottom: .222222em;
+  border-radius: .3125rem;
+  padding-inline-start: .444444em;
   font-size: .888889em;
-  line-height: 1.5;
 }
 
-.prose-lg :where(code):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .888889em;
 }
 
-.prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .866667em;
 }
 
-.prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .875em;
 }
 
-.prose-lg :where(pre):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: 1em;
+  padding-inline-end: 1.5em;
+  padding-bottom: 1em;
   border-radius: .375rem;
   margin-top: 2em;
   margin-bottom: 2em;
-  padding: 1em 1.5em;
+  padding-inline-start: 1.5em;
   font-size: .888889em;
   line-height: 1.75;
 }
 
-.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"] *)) {
+.prose-lg :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.33333em;
   margin-bottom: 1.33333em;
-  padding-left: 1.55556em;
+  padding-inline-start: 1.55556em;
 }
 
-.prose-lg :where(li):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .666667em;
   margin-bottom: .666667em;
 }
 
-.prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .444444em;
-}
-
-.prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) {
-  padding-left: .444444em;
+.prose-lg :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: .444444em;
 }
 
-.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .888889em;
   margin-bottom: .888889em;
 }
 
-.prose-lg :where(.prose-lg > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg :where(.prose-lg > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
-.prose-lg :where(.prose-lg > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg :where(.prose-lg > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
-.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: .888889em;
   margin-bottom: .888889em;
 }
 
-.prose-lg :where(hr):not(:where([class~="not-prose"] *)) {
-  margin-top: 3.11111em;
-  margin-bottom: 3.11111em;
+.prose-lg :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+  margin-bottom: 1.33333em;
 }
 
-.prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-lg :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.33333em;
 }
 
-.prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-lg :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: .666667em;
+  padding-inline-start: 1.55556em;
 }
 
-.prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-lg :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 3.11111em;
+  margin-bottom: 3.11111em;
 }
 
-.prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-lg :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-lg :where(table):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-size: .888889em;
   line-height: 1.5;
 }
 
-.prose-lg :where(thead th):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: .75em;
   padding-bottom: .75em;
-  padding-left: .75em;
-  padding-right: .75em;
+  padding-inline-start: .75em;
 }
 
-.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
+.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
 }
 
-.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
-  padding: .75em;
+.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-top: .75em;
+  padding-inline-end: .75em;
+  padding-bottom: .75em;
+  padding-inline-start: .75em;
 }
 
-.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
+.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-start: 0;
 }
 
-.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
+.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding-inline-end: 0;
 }
 
-.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
+.prose-lg :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.77778em;
+  margin-bottom: 1.77778em;
 }
 
-.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-[data-component="code"] {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: .875rem;
-  line-height: 1.25rem;
+.prose-lg :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1em;
+  font-size: .888889em;
+  line-height: 1.5;
+}
+
+.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+[data-component="code"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
   overflow-x: hidden;
 }
 
@@ -1346,8 +1532,7 @@ pre[class*="language-"] {
 [data-component="code"] .code {
   padding-top: 1rem;
   padding-bottom: 1rem;
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
 }
 
 [data-component="code"].numbered {
@@ -1355,22 +1540,21 @@ pre[class*="language-"] {
 }
 
 [data-component="code"].numbered .wrapper {
-  height: 100%;
-  width: 100%;
   grid-template-columns: min-content 1fr;
+  width: 100%;
+  height: 100%;
   display: grid;
   position: relative;
 }
 
 [data-component="code"].numbered .line-numbers {
-  width: min-content;
   z-index: 10;
-  height: 100%;
-  -webkit-user-select: none;
   user-select: none;
   text-align: right;
   border-style: dashed;
   border-right-width: 1px;
+  width: min-content;
+  height: 100%;
   padding: .75rem;
 }
 
@@ -1401,42 +1585,70 @@ pre[class*="language-"] {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-[data-component="display-options-field"] [type="text"], [data-component="display-options-field"] [type="email"], [data-component="display-options-field"] [type="url"], [data-component="display-options-field"] [type="password"], [data-component="display-options-field"] [type="number"], [data-component="display-options-field"] [type="date"], [data-component="display-options-field"] [type="datetime-local"], [data-component="display-options-field"] [type="month"], [data-component="display-options-field"] [type="search"], [data-component="display-options-field"] [type="tel"], [data-component="display-options-field"] [type="time"], [data-component="display-options-field"] [type="week"], [data-component="display-options-field"] textarea, [data-component="display-options-field"] select {
-  padding: .26rem .6rem;
-  font-size: .8rem;
-  line-height: 1.1rem;
-}
-
 [data-component="display-options-field"] label {
   cursor: pointer;
   color: var(--lookbook-input-text);
   font-size: .82rem;
 }
 
-[data-component="display-options-field"] select {
-  background-position: right .4rem center;
-  background-size: 1.2em 1.2em;
-  border-radius: .375rem;
-  padding-right: 1.5rem;
+[data-component="embed-code-dropdown"] [data-component="code"] {
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--lookbook-divider);
+  background-color: var(--lookbook-base-50);
+  padding: .5rem;
+}
+
+[data-component="embed-code-dropdown"] pre.code.highlight {
+  white-space: normal;
+  padding: 0;
+  font-size: 11px;
+  overflow: hidden;
+}
+
+[data-component="embed-code-dropdown"] .line-clamp-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[data-component="header"] .header-project-icon {
+  flex: none;
+  width: min-content;
+  height: 1.25rem;
+  display: inline-block;
+}
+
+[data-component="header"] .header-project-icon svg {
+  width: auto;
+  height: 100%;
 }
 
 [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;
 }
 
 [data-component="icon"] svg {
-  height: 100%;
-  width: 100%;
   fill: #0000;
   stroke: currentColor;
-  stroke-width: 2px;
   stroke-linecap: round;
   stroke-linejoin: round;
+  width: 100%;
+  height: 100%;
+}
+
+[data-component="icon"].icon-stroke-2 svg {
+  stroke-width: 2px;
+}
+
+[data-component="icon"].icon-stroke-1 svg {
+  stroke-width: 1px;
 }
 
 .lookbook-panel {
@@ -1444,16 +1656,83 @@ pre[class*="language-"] {
   padding: 1rem;
 }
 
-[data-component="nav"] .nav-action {
+[data-component="message"] {
+  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);
   width: 100%;
+  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 (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-transform: uppercase;
+  letter-spacing: .025em;
+  color: var(--lookbook-message-title);
+  overflow-wrap: anywhere;
+  margin-bottom: .5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+
+[data-component="message"] .message-icon {
+  opacity: .3;
+  flex: none;
+  display: none;
+}
+
+@media (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 {
   cursor: pointer;
-  -webkit-user-select: none;
   user-select: none;
+  width: 100%;
   color: var(--lookbook-nav-text);
   align-items: center;
   padding-top: .25rem;
   padding-bottom: .25rem;
-  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: flex;
@@ -1464,8 +1743,8 @@ pre[class*="language-"] {
 }
 
 [data-component="nav"] .nav-action-inner {
-  width: 100%;
   align-items: center;
+  width: 100%;
   display: flex;
   position: relative;
 }
@@ -1486,7 +1765,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 {
@@ -1508,7 +1787,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 {
@@ -1546,24 +1825,38 @@ 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"] {
+  font-family: system-ui, sans-serif;
+}
+
 [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;
+}
+
+#page [data-component="prose"] h2 {
+  border-bottom-width: 1px;
+  border-color: var(--lookbook-divider);
+  padding-bottom: .75rem;
+}
+
 [data-component="tabs-dropdown-tab"]:not(.hidden) {
   border-bottom-width: 1px;
   border-bottom-color: var(--lookbook-divider);
@@ -1574,10 +1867,10 @@ pre[class*="language-"] {
 }
 
 [data-component="toolbar"] .toolbar-sections > * {
-  height: 2.5rem;
   white-space: nowrap;
   border-color: var(--lookbook-toolbar-divider);
   align-items: center;
+  height: 2.5rem;
   display: flex;
 }
 
@@ -1599,12 +1892,12 @@ pre[class*="language-"] {
 }
 
 [data-component="viewport"] .resize-handle {
-  height: 100%;
-  width: 100%;
   border-color: var(--lookbook-divider);
   background-color: var(--lookbook-viewport-handle);
   justify-content: center;
   align-items: center;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
 
@@ -1615,10 +1908,9 @@ pre[class*="language-"] {
 
 [data-component="viewport"] .resize-handle {
   touch-action: none;
-  -webkit-user-select: none;
   user-select: none;
   color: var(--lookbook-viewport-handle-icon-stroke);
-  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);
 }
@@ -1646,9 +1938,9 @@ pre[class*="language-"] {
 }
 
 [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"], textarea, select {
-  width: 100%;
   background-color: var(--lookbook-input-bg);
   border-radius: .375rem;
+  width: 100%;
   font-size: .875rem;
   line-height: 1.25rem;
   display: block;
@@ -1657,8 +1949,8 @@ pre[class*="language-"] {
 input[type="range"] {
   appearance: none;
   cursor: pointer;
-  width: 100%;
   background: none;
+  width: 100%;
 }
 
 input[type="range"]:focus {
@@ -1667,34 +1959,40 @@ input[type="range"]:focus {
 
 input[type="range"]::-webkit-slider-runnable-track {
   background-color: var(--lookbook-input-toggle);
-  height: .5rem;
   border-radius: .5rem;
+  height: .5rem;
 }
 
 input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   background-color: var(--lookbook-input-toggle-active);
-  height: 1rem;
-  width: 1rem;
   border-radius: .5rem;
+  width: 1rem;
+  height: 1rem;
   margin-top: -4px;
 }
 
 input[type="range"]::-moz-range-track {
   background-color: var(--lookbook-input-toggle);
-  height: .5rem;
   border-radius: .5rem;
+  height: .5rem;
 }
 
 input[type="range"]::-moz-range-thumb {
   background-color: var(--lookbook-input-toggle-active);
-  height: 1rem;
-  width: 1rem;
   border: none;
   border-radius: .5rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline-offset: 2px;
+  outline-width: 1px;
+  outline-color: var(--lookbook-input-toggle-active);
 }
 
-input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:focus::-moz-range-thumb {
+input[type="range"]:focus::-moz-range-thumb {
   outline-offset: 2px;
   outline-width: 1px;
   outline-color: var(--lookbook-input-toggle-active);
@@ -1702,11 +2000,11 @@ input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:focus::-moz
 
 input[type="color"] {
   -webkit-appearance: none;
-  width: 46px;
   cursor: pointer;
   border-width: 1px;
   border-color: var(--lookbook-input-border);
   border-radius: .5rem;
+  width: 46px;
 }
 
 input[type="color"]::-webkit-color-swatch-wrapper {
@@ -1718,6 +2016,19 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: .5rem;
 }
 
+select.compact {
+  background-position: right .4rem center;
+  background-size: 1.2em 1.2em;
+  border-radius: .375rem;
+  padding: .26rem 1.5rem .26rem .6rem;
+  font-size: .8rem;
+  line-height: 1.1rem;
+}
+
+#inspector .split-layout-gutter-horizontal {
+  top: 4px;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1742,40 +2053,32 @@ input[type="color"]::-webkit-color-swatch {
   position: relative;
 }
 
-.sticky {
-  position: sticky;
+.-inset-px {
+  inset: -1px;
 }
 
 .inset-0 {
   inset: 0;
 }
 
-.-inset-px {
-  inset: -1px;
+.-bottom-px {
+  bottom: -1px;
 }
 
-.top-0 {
-  top: 0;
+.-left-px {
+  left: -1px;
 }
 
-.right-0 {
-  right: 0;
+.-top-px {
+  top: -1px;
 }
 
 .bottom-0 {
   bottom: 0;
 }
 
-.top-\[40px\] {
-  top: 40px;
-}
-
-.top-\[39px\] {
-  top: 39px;
-}
-
-.top-1\/2 {
-  top: 50%;
+.right-0 {
+  right: 0;
 }
 
 .right-3 {
@@ -1786,32 +2089,40 @@ input[type="color"]::-webkit-color-swatch {
   right: 18px;
 }
 
-.-top-px {
-  top: -1px;
+.right-px {
+  right: 1px;
 }
 
-.-left-px {
-  left: -1px;
+.top-0 {
+  top: 0;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-\[-1px\] {
+  top: -1px;
 }
 
 .top-\[2px\] {
   top: 2px;
 }
 
-.-bottom-px {
-  bottom: -1px;
+.top-\[39px\] {
+  top: 39px;
 }
 
-.z-50 {
-  z-index: 50;
+.top-\[40px\] {
+  top: 40px;
 }
 
-.z-\[-1\] {
-  z-index: -1;
+.top-px {
+  top: 1px;
 }
 
-.\!z-40 {
-  z-index: 40 !important;
+.\!z-\[1000\] {
+  z-index: 1000 !important;
 }
 
 .z-0 {
@@ -1822,9 +2133,16 @@ input[type="color"]::-webkit-color-swatch {
   z-index: 10;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.z-50 {
+  z-index: 50;
+}
+
+.z-\[-1\] {
+  z-index: -1;
+}
+
+.z-\[1001\] {
+  z-index: 1001;
 }
 
 .mx-8 {
@@ -1832,98 +2150,122 @@ input[type="color"]::-webkit-color-swatch {
   margin-right: 2rem;
 }
 
-.mt-3 {
-  margin-top: .75rem;
-}
-
-.mt-2 {
-  margin-top: .5rem;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.\!ml-2 {
+  margin-left: .5rem !important;
 }
 
-.mb-2 {
-  margin-bottom: .5rem;
+.-ml-3 {
+  margin-left: -.75rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.-mr-1 {
+  margin-right: -.25rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.-mr-1\.5 {
+  margin-right: -.375rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.-mt-1 {
+  margin-top: -.25rem;
 }
 
-.ml-2 {
-  margin-left: .5rem;
+.-mt-px {
+  margin-top: -1px;
 }
 
-.ml-auto {
-  margin-left: auto;
+.mb-2 {
+  margin-bottom: .5rem;
 }
 
-.mr-2 {
-  margin-right: .5rem;
+.mb-3 {
+  margin-bottom: .75rem;
 }
 
 .mb-4 {
   margin-bottom: 1rem;
 }
 
-.mr-1 {
-  margin-right: .25rem;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
-.mr-6 {
-  margin-right: 1.5rem;
+.mb-8 {
+  margin-bottom: 2rem;
 }
 
 .mb-\[-2px\] {
   margin-bottom: -2px;
 }
 
-.mt-1 {
-  margin-top: .25rem;
+.ml-2 {
+  margin-left: .5rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.ml-auto {
+  margin-left: auto;
 }
 
-.-ml-3 {
-  margin-left: -.75rem;
+.mr-0 {
+  margin-right: 0;
 }
 
-.mr-auto {
-  margin-right: auto;
+.mr-0\.5 {
+  margin-right: .125rem;
+}
+
+.mr-1 {
+  margin-right: .25rem;
 }
 
 .mr-1\.5 {
   margin-right: .375rem;
 }
 
-.mr-0\.5 {
-  margin-right: .125rem;
+.mr-2 {
+  margin-right: .5rem;
 }
 
-.mr-0 {
-  margin-right: 0;
+.mr-6 {
+  margin-right: 1.5rem;
 }
 
-.block {
-  display: block;
+.mr-auto {
+  margin-right: auto;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
 }
 
 .\!block {
   display: block !important;
 }
 
+.block {
+  display: block;
+}
+
 .inline-block {
   display: inline-block;
 }
@@ -1956,56 +2298,52 @@ input[type="color"]::-webkit-color-swatch {
   display: none;
 }
 
-.h-screen {
-  height: 100vh;
+.h-10 {
+  height: 2.5rem;
 }
 
-.h-full {
-  height: 100%;
+.h-3 {
+  height: .75rem;
 }
 
-.h-\[calc\(100\%_-_40px\)\] {
-  height: calc(100% - 40px);
+.h-3\.5 {
+  height: .875rem;
 }
 
-.h-\[calc\(100vh_-_2\.5rem\)\] {
-  height: calc(100vh - 2.5rem);
+.h-4 {
+  height: 1rem;
 }
 
-.h-\[calc\(100vh_-_40px\)\] {
-  height: calc(100vh - 40px);
+.h-5 {
+  height: 1.25rem;
 }
 
 .h-6 {
   height: 1.5rem;
 }
 
-.h-5 {
-  height: 1.25rem;
-}
-
-.h-3\.5 {
-  height: .875rem;
+.h-\[9px\] {
+  height: 9px;
 }
 
-.h-3 {
-  height: .75rem;
+.h-\[calc\(100\%_-_40px\)\] {
+  height: calc(100% - 40px);
 }
 
-.h-\[9px\] {
-  height: 9px;
+.h-\[calc\(100vh_-_2\.5rem\)\] {
+  height: calc(100vh - 2.5rem);
 }
 
-.h-10 {
-  height: 2.5rem;
+.h-\[calc\(100vh_-_40px\)\] {
+  height: calc(100vh - 40px);
 }
 
-.h-4 {
-  height: 1rem;
+.h-full {
+  height: 100%;
 }
 
-.\!h-auto {
-  height: auto !important;
+.h-screen {
+  height: 100vh;
 }
 
 .max-h-full {
@@ -2016,56 +2354,56 @@ input[type="color"]::-webkit-color-swatch {
   min-height: 0;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.w-\[140px\] {
-  width: 140px;
-}
-
-.w-screen {
-  width: 100vw;
+.min-h-\[calc\(100vh_-_400px\)\] {
+  min-height: calc(100vh - 400px);
 }
 
 .w-11 {
   width: 2.75rem;
 }
 
-.w-5 {
-  width: 1.25rem;
+.w-3 {
+  width: .75rem;
 }
 
 .w-3\.5 {
   width: .875rem;
 }
 
-.w-3 {
-  width: .75rem;
+.w-4 {
+  width: 1rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-\[360px\] {
+  width: 360px;
 }
 
 .w-\[9px\] {
   width: 9px;
 }
 
-.w-4 {
-  width: 1rem;
+.w-full {
+  width: 100%;
 }
 
-.min-w-\[180px\] {
-  min-width: 180px;
+.w-screen {
+  width: 100vw;
 }
 
 .min-w-0 {
   min-width: 0;
 }
 
-.max-w-sm {
-  max-width: 24rem;
+.min-w-\[180px\] {
+  min-width: 180px;
 }
 
-.max-w-screen-lg {
-  max-width: 1024px;
+.max-w-\[40\%\] {
+  max-width: 40%;
 }
 
 .max-w-\[420px\] {
@@ -2076,8 +2414,8 @@ input[type="color"]::-webkit-color-swatch {
   max-width: none;
 }
 
-.max-w-xs {
-  max-width: 20rem;
+.max-w-screen-lg {
+  max-width: 1024px;
 }
 
 .flex-none {
@@ -2088,32 +2426,36 @@ input[type="color"]::-webkit-color-swatch {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
 
-.translate-x-0 {
-  --tw-translate-x: 0px;
+.-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));
 }
 
-.translate-x-full {
-  --tw-translate-x: 100%;
+.-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));
 }
 
-.translate-x-5 {
-  --tw-translate-x: 1.25rem;
+.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));
 }
 
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
+.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));
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
+.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));
 }
 
@@ -2122,13 +2464,19 @@ input[type="color"]::-webkit-color-swatch {
   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));
+}
+
 .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));
 }
 
-.rotate-45 {
-  --tw-rotate: 45deg;
+.scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
   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));
 }
 
@@ -2146,32 +2494,35 @@ input[type="color"]::-webkit-color-swatch {
   cursor: default !important;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-\[not-allowed\] {
-  cursor: not-allowed;
+.\!cursor-not-allowed {
+  cursor: not-allowed !important;
 }
 
 .cursor-\[col-resize\] {
   cursor: col-resize;
 }
 
-.cursor-\[row-resize\] {
-  cursor: row-resize;
+.cursor-\[not-allowed\] {
+  cursor: not-allowed;
 }
 
 .cursor-\[nwse-resize\] {
   cursor: nwse-resize;
 }
 
+.cursor-\[row-resize\] {
+  cursor: row-resize;
+}
+
 .cursor-help {
   cursor: help;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .select-none {
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -2191,10 +2542,6 @@ input[type="color"]::-webkit-color-swatch {
   grid-template-columns: 1fr 17px;
 }
 
-.grid-rows-\[40px_1fr\] {
-  grid-template-rows: 40px 1fr;
-}
-
 .\!grid-rows-\[1fr\] {
   grid-template-rows: 1fr !important;
 }
@@ -2203,6 +2550,10 @@ input[type="color"]::-webkit-color-swatch {
   grid-template-rows: 1fr 17px;
 }
 
+.grid-rows-\[40px_1fr\] {
+  grid-template-rows: 40px 1fr;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -2223,10 +2574,20 @@ input[type="color"]::-webkit-color-swatch {
   justify-content: space-between;
 }
 
-.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));
+.gap-2 {
+  gap: .5rem;
+}
+
+.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)));
+}
+
+.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(.375rem * var(--tw-space-x-reverse));
+  margin-left: calc(.375rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -2235,10 +2596,10 @@ input[type="color"]::-webkit-color-swatch {
   margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+.space-x-3 > :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(.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
@@ -2247,10 +2608,10 @@ input[type="color"]::-webkit-color-swatch {
   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)));
+.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));
 }
 
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
@@ -2259,12 +2620,6 @@ input[type="color"]::-webkit-color-swatch {
   margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
 }
 
-.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(.375rem * var(--tw-space-x-reverse));
-  margin-left: calc(.375rem * 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)));
@@ -2279,6 +2634,10 @@ input[type="color"]::-webkit-color-swatch {
   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;
 }
@@ -2317,12 +2676,12 @@ input[type="color"]::-webkit-color-swatch {
   white-space: pre-wrap;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.break-all {
+  word-break: break-all;
 }
 
-.rounded-sm {
-  border-radius: .125rem;
+.rounded-full {
+  border-radius: 9999px;
 }
 
 .rounded-md {
@@ -2345,90 +2704,116 @@ input[type="color"]::-webkit-color-swatch {
   border-width: 2px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
 
-.border-l {
-  border-left-width: 1px;
-}
-
 .border-b-0 {
   border-bottom-width: 0;
 }
 
-.border-r {
-  border-right-width: 1px;
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-l {
+  border-left-width: 1px;
 }
 
 .border-l-2 {
   border-left-width: 2px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
+.border-r {
+  border-right-width: 1px;
 }
 
-.border-t-0 {
-  border-top-width: 0;
+.border-t {
+  border-top-width: 1px;
 }
 
 .border-dashed {
   border-style: dashed;
 }
 
-.border-red-200 {
+.\!border-lookbook-header-border {
+  border-color: var(--lookbook-header-border) !important;
+}
+
+.border-gray-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
 .border-lookbook-divider {
   border-color: var(--lookbook-divider);
 }
 
-.border-gray-300 {
+.border-lookbook-page-header-border {
+  border-color: var(--lookbook-page-header-border);
+}
+
+.border-lookbook-tabs-border-active {
+  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(209 213 219 / var(--tw-border-opacity));
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
 .border-transparent {
   border-color: #0000;
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+.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-lookbook-header-border {
-  border-color: var(--lookbook-header-border) !important;
+.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-lookbook-tabs-border-active {
-  border-color: var(--lookbook-tabs-border-active);
+.border-b-lookbook-viewport-handle-icon-stroke-hover {
+  border-bottom-color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.border-e-lookbook-viewport-handle-icon-stroke-hover {
+  border-inline-end-color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+.border-l-lookbook-viewport-handle-icon-stroke-hover {
+  border-left-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));
+.border-r-lookbook-viewport-handle-icon-stroke-hover {
+  border-right-color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.bg-lookbook-sidebar-bg {
-  background-color: var(--lookbook-sidebar-bg);
+.border-s-lookbook-viewport-handle-icon-stroke-hover {
+  border-inline-start-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-button-bg {
+  background-color: var(--lookbook-button-bg) !important;
+}
+
+.\!bg-lookbook-header-bg {
+  background-color: var(--lookbook-header-bg) !important;
+}
+
+.\!bg-lookbook-nav-item-active {
+  background-color: var(--lookbook-nav-item-active) !important;
 }
 
 .bg-black {
@@ -2436,61 +2821,111 @@ input[type="color"]::-webkit-color-swatch {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-lookbook-page-bg {
-  background-color: var(--lookbook-page-bg);
+.bg-gray-100\/80 {
+  background-color: #f3f4f6cc;
 }
 
-.bg-transparent {
-  background-color: #0000;
+.bg-lookbook-base-50 {
+  background-color: var(--lookbook-base-50);
+}
+
+.bg-lookbook-button-bg {
+  background-color: var(--lookbook-button-bg);
+}
+
+.bg-lookbook-button-bg-hover {
+  background-color: var(--lookbook-button-bg-hover);
+}
+
+.bg-lookbook-divider {
+  background-color: var(--lookbook-divider);
 }
 
 .bg-lookbook-drawer-bg {
   background-color: var(--lookbook-drawer-bg);
 }
 
+.bg-lookbook-input-toggle {
+  background-color: var(--lookbook-input-toggle);
+}
+
 .bg-lookbook-input-toggle-active {
   background-color: var(--lookbook-input-toggle-active);
 }
 
-.bg-lookbook-input-toggle {
-  background-color: var(--lookbook-input-toggle);
+.bg-lookbook-page-bg {
+  background-color: var(--lookbook-page-bg);
+}
+
+.bg-lookbook-page-header-bg {
+  background-color: var(--lookbook-page-header-bg);
+}
+
+.bg-lookbook-params-editor-bg {
+  background-color: var(--lookbook-params-editor-bg);
 }
 
 .bg-lookbook-prose-bg {
   background-color: var(--lookbook-prose-bg);
 }
 
-.bg-zinc-50 {
+.bg-lookbook-sidebar-bg {
+  background-color: var(--lookbook-sidebar-bg);
+}
+
+.bg-lookbook-toolbar-bg {
+  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(250 250 250 / var(--tw-bg-opacity));
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.\!bg-lookbook-header-bg {
-  background-color: var(--lookbook-header-bg) !important;
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
-.bg-lookbook-divider {
-  background-color: var(--lookbook-divider);
+.bg-transparent {
+  background-color: #0000;
 }
 
-.bg-lookbook-toolbar-bg {
-  background-color: var(--lookbook-toolbar-bg);
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100\/80 {
-  background-color: #f3f4f6cc;
+.bg-zinc-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.\!bg-lookbook-nav-item-active {
-  background-color: var(--lookbook-nav-item-active) !important;
+.from-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-from: var(--lookbook-viewport-handle-icon-stroke-hover) var(--tw-gradient-from-position);
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.bg-lookbook-params-editor-bg {
-  background-color: var(--lookbook-params-editor-bg);
+.via-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--lookbook-viewport-handle-icon-stroke-hover) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.p-4 {
-  padding: 1rem;
+.to-lookbook-viewport-handle-icon-stroke-hover {
+  --tw-gradient-to: var(--lookbook-viewport-handle-icon-stroke-hover) var(--tw-gradient-to-position);
+}
+
+.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 {
@@ -2501,16 +2936,27 @@ input[type="color"]::-webkit-color-swatch {
   padding: .5rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
-}
-
 .p-3 {
   padding: .75rem;
 }
 
-.p-8 {
-  padding: 2rem;
+.p-4 {
+  padding: 1rem;
+}
+
+.px-1 {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.px-2 {
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+.px-3 {
+  padding-left: .75rem;
+  padding-right: .75rem;
 }
 
 .px-4 {
@@ -2518,29 +2964,24 @@ input[type="color"]::-webkit-color-swatch {
   padding-right: 1rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
 }
 
-.py-2 {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+.py-1 {
+  padding-top: .25rem;
+  padding-bottom: .25rem;
 }
 
-.px-2 {
-  padding-left: .5rem;
-  padding-right: .5rem;
+.py-1\.5 {
+  padding-top: .375rem;
+  padding-bottom: .375rem;
 }
 
-.px-3 {
-  padding-left: .75rem;
-  padding-right: .75rem;
+.py-2 {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
 }
 
 .py-3 {
@@ -2548,81 +2989,81 @@ input[type="color"]::-webkit-color-swatch {
   padding-bottom: .75rem;
 }
 
-.px-1 {
-  padding-left: .25rem;
-  padding-right: .25rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
-.pb-10 {
-  padding-bottom: 2.5rem;
+.pb-0 {
+  padding-bottom: 0;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pb-1 {
+  padding-bottom: .25rem;
 }
 
-.pt-1 {
-  padding-top: .25rem;
+.pb-1\.5 {
+  padding-bottom: .375rem;
 }
 
-.pr-0 {
-  padding-right: 0;
+.pb-10 {
+  padding-bottom: 2.5rem;
 }
 
-.pl-1 {
-  padding-left: .25rem;
+.pb-12 {
+  padding-bottom: 3rem;
 }
 
-.pb-1 {
-  padding-bottom: .25rem;
+.pb-6 {
+  padding-bottom: 1.5rem;
 }
 
-.pr-0\.5 {
-  padding-right: .125rem;
+.pl-0 {
+  padding-left: 0;
 }
 
 .pl-0\.5 {
   padding-left: .125rem;
 }
 
-.pl-0 {
-  padding-left: 0;
-}
-
-.pt-8 {
-  padding-top: 2rem;
+.pl-1 {
+  padding-left: .25rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
+.pl-2 {
+  padding-left: .5rem;
 }
 
-.pt-2 {
-  padding-top: .5rem;
+.pr-0 {
+  padding-right: 0;
 }
 
-.pb-0 {
-  padding-bottom: 0;
+.pr-0\.5 {
+  padding-right: .125rem;
 }
 
 .pr-1 {
   padding-right: .25rem;
 }
 
-.pl-2 {
-  padding-left: .5rem;
+.pt-1 {
+  padding-top: .25rem;
 }
 
 .pt-1\.5 {
   padding-top: .375rem;
 }
 
+.pt-2 {
+  padding-top: .5rem;
+}
+
 .pt-2\.5 {
   padding-top: .625rem;
 }
 
-.pb-1\.5 {
-  padding-bottom: .375rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 
 .text-left {
@@ -2634,11 +3075,15 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .font-mono {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-family: Source Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
-.font-sans {
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+.font-ui {
+  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.text-\[11px\] {
+  font-size: 11px;
 }
 
 .text-base {
@@ -2646,6 +3091,11 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: .875rem;
   line-height: 1.25rem;
@@ -2661,17 +3111,16 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+.font-black {
+  font-weight: 900;
 }
 
 .font-bold {
   font-weight: 700;
 }
 
-.font-black {
-  font-weight: 900;
+.font-semibold {
+  font-weight: 600;
 }
 
 .uppercase {
@@ -2690,27 +3139,20 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1.25;
 }
 
-.tracking-wide {
-  letter-spacing: .025em;
-}
-
 .tracking-wider {
   letter-spacing: .05em;
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
+.\!text-lookbook-button-text {
+  color: var(--lookbook-button-text) !important;
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+.\!text-lookbook-header-text {
+  color: var(--lookbook-header-text) !important;
 }
 
-.text-red-900 {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+.\!text-lookbook-tabs-text-disabled {
+  color: var(--lookbook-tabs-text-disabled) !important;
 }
 
 .text-gray-400 {
@@ -2718,16 +3160,9 @@ input[type="color"]::-webkit-color-swatch {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-lookbook-blank-slate-title {
-  color: var(--lookbook-blank-slate-title);
-}
-
-.text-lookbook-icon-button-stroke {
-  color: var(--lookbook-icon-button-stroke);
-}
-
-.text-lookbook-icon-button-stroke-hover {
-  color: var(--lookbook-icon-button-stroke-hover);
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
 .text-green-500 {
@@ -2740,26 +3175,42 @@ input[type="color"]::-webkit-color-swatch {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
-.\!text-lookbook-header-text {
-  color: var(--lookbook-header-text) !important;
+.text-lookbook-branding-text {
+  color: var(--lookbook-branding-text);
+}
+
+.text-lookbook-button-text {
+  color: var(--lookbook-button-text);
+}
+
+.text-lookbook-embed-title {
+  color: var(--lookbook-embed-title);
+}
+
+.text-lookbook-header-text {
+  color: var(--lookbook-header-text);
+}
+
+.text-lookbook-icon-button-stroke {
+  color: var(--lookbook-icon-button-stroke);
+}
+
+.text-lookbook-icon-button-stroke-hover {
+  color: var(--lookbook-icon-button-stroke-hover);
 }
 
-.text-lookbook-branding-text {
-  color: var(--lookbook-branding-text);
+.text-lookbook-nav-icon-stroke {
+  color: var(--lookbook-nav-icon-stroke);
 }
 
-.text-lookbook-header-text {
-  color: var(--lookbook-header-text);
+.text-lookbook-page-header-text {
+  color: var(--lookbook-page-header-text);
 }
 
 .text-lookbook-prose-text {
   color: var(--lookbook-prose-text);
 }
 
-.text-lookbook-nav-icon-stroke {
-  color: var(--lookbook-nav-icon-stroke);
-}
-
 .text-lookbook-tabs-text {
   color: var(--lookbook-tabs-text);
 }
@@ -2768,56 +3219,82 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--lookbook-tabs-text-hover);
 }
 
-.\!text-lookbook-tabs-text-disabled {
-  color: var(--lookbook-tabs-text-disabled) !important;
+.text-lookbook-viewport-handle-icon-stroke-hover {
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  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));
 }
 
 .underline {
   text-decoration-line: underline;
 }
 
-.opacity-50 {
-  opacity: .5;
+.decoration-lookbook-viewport-handle-icon-stroke-hover {
+  text-decoration-color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.opacity-60 {
-  opacity: .6;
+.placeholder-lookbook-viewport-handle-icon-stroke-hover::placeholder {
+  color: var(--lookbook-viewport-handle-icon-stroke-hover);
 }
 
-.opacity-0 {
-  opacity: 0;
+.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;
 }
 
 .\!opacity-30 {
   opacity: .3 !important;
 }
 
-.opacity-90 {
-  opacity: .9;
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: .25;
 }
 
 .opacity-40 {
   opacity: .4;
 }
 
-.opacity-80 {
-  opacity: .8;
+.opacity-50 {
+  opacity: .5;
+}
+
+.opacity-60 {
+  opacity: .6;
 }
 
 .opacity-70 {
   opacity: .7;
 }
 
-.\!opacity-100 {
-  opacity: 1 !important;
+.opacity-75 {
+  opacity: .75;
 }
 
-.opacity-25 {
-  opacity: .25;
+.opacity-80 {
+  opacity: .8;
 }
 
-.opacity-75 {
-  opacity: .75;
+.opacity-90 {
+  opacity: .9;
 }
 
 .shadow {
@@ -2826,12 +3303,29 @@ input[type="color"]::-webkit-color-swatch {
   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);
@@ -2841,26 +3335,32 @@ input[type="color"]::-webkit-color-swatch {
   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);
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.transition {
+  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);
 }
 
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+.transition-\[height\] {
+  transition-property: height;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.transition-all {
+  transition-property: all;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.transition-all {
-  transition-property: all;
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.transition-opacity {
+  transition-property: opacity;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -2869,14 +3369,26 @@ input[type="color"]::-webkit-color-swatch {
   transition-duration: .1s;
 }
 
+.duration-150 {
+  transition-duration: .15s;
+}
+
 .duration-200 {
   transition-duration: .2s;
 }
 
+.duration-300 {
+  transition-duration: .3s;
+}
+
 .ease-in-out {
   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;
 }
@@ -2948,9 +3460,9 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .tippy-arrow {
+  color: #333;
   width: 16px;
   height: 16px;
-  color: #333;
 }
 
 .tippy-arrow:before {
@@ -3051,14 +3563,13 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .tippy-box[data-theme~="menu"] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  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);
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--lookbook-dropdown-divider);
+  color: var(--lookbook-dropdown-text);
+  background: var(--lookbook-dropdown-bg);
+  max-width: none !important;
 }
 
 .tippy-box[data-theme~="menu"] > .tippy-content {
@@ -3068,19 +3579,19 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="top"] > .tippy-arrow:before {
-  border-top-color: #fff;
+  border-top-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="bottom"] > .tippy-arrow:before {
-  border-bottom-color: #fff;
+  border-bottom-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="left"] > .tippy-arrow:before {
-  border-left-color: #fff;
+  border-left-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="right"] > .tippy-arrow:before {
-  border-right-color: #fff;
+  border-right-color: var(--lookbook-dropdown-bg);
 }
 
 .theme-github {
@@ -3247,7 +3758,6 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .err {
   color: var(--hl-error-fg);
-  background-color: var(--hl-error-bg);
 }
 
 .theme-github .highlight .g {
@@ -3256,7 +3766,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .k {
   color: var(--hl-keyword);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .l {
@@ -3269,7 +3779,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .o {
   color: var(--hl-operator);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .x {
@@ -3287,7 +3797,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .cp {
   color: var(--hl-comment-preproc);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .c1 {
@@ -3299,7 +3809,7 @@ input[type="color"]::-webkit-color-swatch {
   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 {
@@ -3335,12 +3845,12 @@ input[type="color"]::-webkit-color-swatch {
 
 .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 {
@@ -3349,12 +3859,12 @@ input[type="color"]::-webkit-color-swatch {
 
 .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 {
@@ -3379,7 +3889,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .nc {
   color: var(--hl-class);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .no {
@@ -3396,12 +3906,12 @@ input[type="color"]::-webkit-color-swatch {
 
 .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 {
@@ -3426,7 +3936,7 @@ input[type="color"]::-webkit-color-swatch {
 
 .theme-github .highlight .ow {
   color: var(--hl-word);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .w {
@@ -3478,6 +3988,232 @@ input[type="color"]::-webkit-color-swatch {
   background-color: #0000;
 }
 
+@media (width >= 1024px) {
+  .lg\:prose-base {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+
+  .lg\:prose-base :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where([class~="lead"]):not(:where([class~="not-prose"], [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"], [class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-inline-start: 1em;
+  }
+
+  .lg\:prose-base :where(h1):not(:where([class~="not-prose"], [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"], [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"], [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"], [class~="not-prose"] *)) {
+    margin-top: 1.5em;
+    margin-bottom: .5em;
+    line-height: 1.5;
+  }
+
+  .lg\:prose-base :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:prose-base :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-top: .1875em;
+    padding-inline-end: .375em;
+    padding-bottom: .1875em;
+    border-radius: .3125rem;
+    padding-inline-start: .375em;
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: .9em;
+  }
+
+  .lg\:prose-base :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-top: .857143em;
+    padding-inline-end: 1.14286em;
+    padding-bottom: .857143em;
+    border-radius: .375rem;
+    margin-top: 1.71429em;
+    margin-bottom: 1.71429em;
+    padding-inline-start: 1.14286em;
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .lg\:prose-base :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: .5em;
+    margin-bottom: .5em;
+  }
+
+  .lg\:prose-base :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-start: .375em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: .5em;
+    padding-inline-start: 1.625em;
+  }
+
+  .lg\:prose-base :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  .lg\:prose-base :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .lg\:prose-base :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-end: .571429em;
+    padding-bottom: .571429em;
+    padding-inline-start: .571429em;
+  }
+
+  .lg\:prose-base :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-start: 0;
+  }
+
+  .lg\:prose-base :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-end: 0;
+  }
+
+  .lg\:prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-top: .571429em;
+    padding-inline-end: .571429em;
+    padding-bottom: .571429em;
+    padding-inline-start: .571429em;
+  }
+
+  .lg\:prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-start: 0;
+  }
+
+  .lg\:prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding-inline-end: 0;
+  }
+
+  .lg\:prose-base :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:prose-base :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: .857143em;
+    font-size: .875em;
+    line-height: 1.42857;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+}
+
+.hover\:\!bg-lookbook-button-bg-hover:hover {
+  background-color: var(--lookbook-button-bg-hover) !important;
+}
+
+.hover\:bg-lookbook-button-bg-hover:hover {
+  background-color: var(--lookbook-button-bg-hover);
+}
+
 .hover\:bg-lookbook-draggable-hint:hover {
   background-color: var(--lookbook-draggable-hint);
 }
@@ -3513,15 +4249,15 @@ input[type="color"]::-webkit-color-swatch {
   outline: 2px solid #0000;
 }
 
-.focus\:ring-2:focus {
+.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(2px + 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-0:focus {
+.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(0px + 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);
 }
 
@@ -3534,11 +4270,71 @@ input[type="color"]::-webkit-color-swatch {
   outline: 2px solid #0000;
 }
 
-.prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
+.prose-headings\:font-semibold :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-weight: 600;
+}
+
+.prose-h1\:font-bold :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
+.prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   color: var(--lookbook-prose-link);
 }
 
-@media (min-width: 768px) {
+@media (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 (width >= 640px) {
+  .sm\:p-8 {
+    padding: 2rem;
+  }
+}
+
+@media (width >= 768px) {
+  .md\:-mr-\[2px\] {
+    margin-right: -2px;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0;
+  }
+
+  .md\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+
+  .md\:p-12 {
+    padding: 3rem;
+  }
+
   .md\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -3549,4 +4345,29 @@ input[type="color"]::-webkit-color-swatch {
   }
 }
 
+@media (width >= 1024px) {
+  .lg\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .lg\:mb-9 {
+    margin-bottom: 2.25rem;
+  }
+
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .lg\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .lg\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
+}
 /*# sourceMappingURL=lookbook.css.map */