lookbook 0.9.0 → 1.0.0.beta.2

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

@@ -0,0 +1,3069 @@
+*, :before, :after {
+  box-sizing: border-box;
+  border: 0 solid #e5e7eb;
+}
+
+:before, :after {
+  --tw-content: "";
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}
+
+body {
+  line-height: inherit;
+  margin: 0;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+code, kbd, samp, pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+  background-color: #0000;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline:  auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul, menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder, textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  vertical-align: middle;
+  display: block;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}
+
+[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
+  appearance: none;
+  --tw-shadow: 0 0 #0000;
+  background-color: #fff;
+  border-width: 1px;
+  border-color: #6b7280;
+  border-radius: 0;
+  padding: .5rem .75rem;
+  font-size: 1rem;
+  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 {
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+  outline: 2px solid #0000;
+}
+
+input::placeholder, textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+::-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 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+select {
+  color-adjust: exact;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right .5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  color-adjust: unset;
+  padding-right: .75rem;
+}
+
+[type="checkbox"], [type="radio"] {
+  appearance: none;
+  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;
+  background-origin: border-box;
+  border-width: 1px;
+  border-color: #6b7280;
+  flex-shrink: 0;
+  padding: 0;
+  display: inline-block;
+}
+
+[type="checkbox"] {
+  border-radius: 0;
+}
+
+[type="radio"] {
+  border-radius: 100%;
+}
+
+[type="checkbox"]:focus, [type="radio"]:focus {
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  outline: 2px solid #0000;
+}
+
+[type="checkbox"]:checked, [type="radio"]:checked {
+  background-color: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-color: #0000;
+}
+
+[type="checkbox"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type="radio"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type="checkbox"]:checked:hover, [type="checkbox"]:checked:focus, [type="radio"]:checked:hover, [type="radio"]:checked:focus {
+  background-color: currentColor;
+  border-color: #0000;
+}
+
+[type="checkbox"]:indeterminate {
+  background-color: currentColor;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-color: #0000;
+}
+
+[type="checkbox"]:indeterminate:hover, [type="checkbox"]:indeterminate:focus {
+  background-color: currentColor;
+  border-color: #0000;
+}
+
+[type="file"] {
+  background: unset;
+  border-color: inherit;
+  font-size: unset;
+  line-height: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+[type="file"]:focus {
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+html {
+  height: 100vh;
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  color: var(--lookbook-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  overflow: hidden;
+}
+
+[x-cloak] {
+  display: none !important;
+}
+
+pre[class*="language-"] {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+::-webkit-scrollbar {
+  height: .25rem;
+  width: .25rem;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #0000;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--lookbook-scrollbar);
+  background-clip: content-box;
+  border-radius: 9999px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--lookbook-scrollbar-hover);
+}
+
+*, :before, :after {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #3b82f680;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+
+.prose {
+  color: var(--tw-prose-body);
+  max-width: 65ch;
+}
+
+.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-lead);
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+  font-size: 1.25em;
+  line-height: 1.6;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+.prose :where(strong):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-bold);
+  font-weight: 600;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.625em;
+  list-style-type: decimal;
+}
+
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: decimal;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.625em;
+  list-style-type: disc;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+  color: var(--tw-prose-counters);
+  font-weight: 400;
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+  color: var(--tw-prose-bullets);
+}
+
+.prose :where(hr):not(:where([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"] *)) {
+  color: var(--tw-prose-quotes);
+  border-left-width: .25rem;
+  border-left-color: var(--tw-prose-quote-borders);
+  quotes: "“""”""‘""’";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+  font-style: italic;
+  font-weight: 500;
+}
+
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *)):before {
+  content: open-quote;
+}
+
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *)):after {
+  content: close-quote;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  margin-top: 0;
+  margin-bottom: .888889em;
+  font-size: 2.25em;
+  font-weight: 800;
+  line-height: 1.11111;
+}
+
+.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 900;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-size: 1.5em;
+  font-weight: 700;
+  line-height: 1.33333;
+}
+
+.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 800;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  margin-top: 1.6em;
+  margin-bottom: .6em;
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  margin-top: 1.5em;
+  margin-bottom: .5em;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
+.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-captions);
+  margin-top: .857143em;
+  font-size: .875em;
+  line-height: 1.42857;
+}
+
+.prose :where(code):not(:where([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 {
+  content: "`";
+}
+
+.prose :where(a code):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+}
+
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-pre-code);
+  background-color: var(--tw-prose-pre-bg);
+  border-radius: .375rem;
+  margin-top: 1.71429em;
+  margin-bottom: 1.71429em;
+  padding: .857143em 1.14286em;
+  font-size: .875em;
+  font-weight: 400;
+  line-height: 1.71429;
+  overflow-x: auto;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *)) {
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  background-color: #0000;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *)):before, .prose :where(pre code):not(:where([class~="not-prose"] *)):after {
+  content: none;
+}
+
+.prose :where(table):not(:where([class~="not-prose"] *)) {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: .875em;
+  line-height: 1.71429;
+}
+
+.prose :where(thead):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(thead th):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  vertical-align: bottom;
+  padding-bottom: .571429em;
+  padding-left: .571429em;
+  padding-right: .571429em;
+  font-weight: 600;
+}
+
+.prose :where(tbody tr):not(:where([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"] *)) {
+  border-bottom-width: 0;
+}
+
+.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+  vertical-align: baseline;
+  padding: .571429em;
+}
+
+.prose {
+  --tw-prose-body: #374151;
+  --tw-prose-headings: #111827;
+  --tw-prose-lead: #4b5563;
+  --tw-prose-links: #111827;
+  --tw-prose-bold: #111827;
+  --tw-prose-counters: #6b7280;
+  --tw-prose-bullets: #d1d5db;
+  --tw-prose-hr: #e5e7eb;
+  --tw-prose-quotes: #111827;
+  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-captions: #6b7280;
+  --tw-prose-code: #111827;
+  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-bg: #00000080;
+  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-td-borders: #374151;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(video):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(figure):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+  font-size: .875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+  font-size: .9em;
+}
+
+.prose :where(li):not(:where([class~="not-prose"] *)) {
+  margin-top: .5em;
+  margin-bottom: .5em;
+}
+
+.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(ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+
+.prose > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+
+.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h3 + *):not(:where([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"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-sm {
+  font-size: .875rem;
+  line-height: 1.71429;
+}
+
+.prose-sm :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+  margin-bottom: 1.14286em;
+}
+
+.prose-sm :where([class~="lead"]):not(:where([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"] *)) {
+  margin-top: 1.33333em;
+  margin-bottom: 1.33333em;
+  padding-left: 1.11111em;
+}
+
+.prose-sm :where(h1):not(:where([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"] *)) {
+  margin-top: 1.6em;
+  margin-bottom: .8em;
+  font-size: 1.42857em;
+  line-height: 1.4;
+}
+
+.prose-sm :where(h3):not(:where([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"] *)) {
+  margin-top: 1.42857em;
+  margin-bottom: .571429em;
+  line-height: 1.42857;
+}
+
+.prose-sm :where(img):not(:where([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(figure):not(:where([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;
+  font-size: .857143em;
+  line-height: 1.33333;
+}
+
+.prose-sm :where(code):not(:where([class~="not-prose"] *)) {
+  font-size: .857143em;
+}
+
+.prose-sm :where(h2 code):not(:where([class~="not-prose"] *)) {
+  font-size: .9em;
+}
+
+.prose-sm :where(h3 code):not(:where([class~="not-prose"] *)) {
+  font-size: .888889em;
+}
+
+.prose-sm :where(pre):not(:where([class~="not-prose"] *)) {
+  border-radius: .25rem;
+  margin-top: 1.66667em;
+  margin-bottom: 1.66667em;
+  padding: .666667em 1em;
+  font-size: .857143em;
+  line-height: 1.66667;
+}
+
+.prose-sm :where(ol):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.57143em;
+}
+
+.prose-sm :where(ul):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.57143em;
+}
+
+.prose-sm :where(li):not(:where([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(ul > li):not(:where([class~="not-prose"] *)) {
+  padding-left: .428571em;
+}
+
+.prose-sm > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .571429em;
+  margin-bottom: .571429em;
+}
+
+.prose-sm > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+}
+
+.prose-sm > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.14286em;
+}
+
+.prose-sm > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.14286em;
+}
+
+.prose-sm > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.14286em;
+}
+
+.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([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(hr + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm :where(h2 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm :where(h3 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm :where(h4 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm :where(table):not(:where([class~="not-prose"] *)) {
+  font-size: .857143em;
+  line-height: 1.5;
+}
+
+.prose-sm :where(thead th):not(:where([class~="not-prose"] *)) {
+  padding-bottom: .666667em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose-sm :where(tbody td):not(:where([class~="not-prose"] *)) {
+  padding: .666667em 1em;
+}
+
+.prose-sm :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose-sm :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose-sm > :where(:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-sm > :where(:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-lg {
+  font-size: 1.125rem;
+  line-height: 1.77778;
+}
+
+.prose-lg :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+  margin-bottom: 1.33333em;
+}
+
+.prose-lg :where([class~="lead"]):not(:where([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"] *)) {
+  margin-top: 1.66667em;
+  margin-bottom: 1.66667em;
+  padding-left: 1em;
+}
+
+.prose-lg :where(h1):not(:where([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"] *)) {
+  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"] *)) {
+  margin-top: 1.66667em;
+  margin-bottom: .666667em;
+  font-size: 1.33333em;
+  line-height: 1.5;
+}
+
+.prose-lg :where(h4):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.77778em;
+  margin-bottom: .444444em;
+  line-height: 1.55556;
+}
+
+.prose-lg :where(img):not(:where([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(figure):not(:where([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;
+  font-size: .888889em;
+  line-height: 1.5;
+}
+
+.prose-lg :where(code):not(:where([class~="not-prose"] *)) {
+  font-size: .888889em;
+}
+
+.prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) {
+  font-size: .866667em;
+}
+
+.prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) {
+  font-size: .875em;
+}
+
+.prose-lg :where(pre):not(:where([class~="not-prose"] *)) {
+  border-radius: .375rem;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  padding: 1em 1.5em;
+  font-size: .888889em;
+  line-height: 1.75;
+}
+
+.prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.55556em;
+}
+
+.prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
+  padding-left: 1.55556em;
+}
+
+.prose-lg :where(li):not(:where([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(ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: .888889em;
+  margin-bottom: .888889em;
+}
+
+.prose-lg > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+}
+
+.prose-lg > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.33333em;
+}
+
+.prose-lg > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.33333em;
+}
+
+.prose-lg > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.33333em;
+}
+
+.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([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(hr + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg :where(table):not(:where([class~="not-prose"] *)) {
+  font-size: .888889em;
+  line-height: 1.5;
+}
+
+.prose-lg :where(thead th):not(:where([class~="not-prose"] *)) {
+  padding-bottom: .75em;
+  padding-left: .75em;
+  padding-right: .75em;
+}
+
+.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose-lg :where(tbody td):not(:where([class~="not-prose"] *)) {
+  padding: .75em;
+}
+
+.prose-lg :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose-lg :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose-lg > :where(:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose-lg > :where(:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.theme-github-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+}
+
+.theme-github-light .highlight .hll {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 6px 10px;
+}
+
+.theme-github-light .highlight .c {
+  color: #998;
+  font-style: italic;
+}
+
+.theme-github-light .highlight .k, .theme-github-light .highlight .o {
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .cm {
+  color: #998;
+  font-style: italic;
+}
+
+.theme-github-light .highlight .cp {
+  color: #999;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .c1 {
+  color: #998;
+  font-style: italic;
+}
+
+.theme-github-light .highlight .cs {
+  color: #999;
+  font-style: italic;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .gd {
+  color: #000;
+  background-color: #fdd;
+}
+
+.theme-github-light .highlight .gd .x {
+  color: #000;
+  background-color: #faa;
+}
+
+.theme-github-light .highlight .ge {
+  font-style: italic;
+}
+
+.theme-github-light .highlight .gr {
+  color: #a00;
+}
+
+.theme-github-light .highlight .gh {
+  color: #999;
+}
+
+.theme-github-light .highlight .gi {
+  color: #000;
+  background-color: #dfd;
+}
+
+.theme-github-light .highlight .gi .x {
+  color: #000;
+  background-color: #afa;
+}
+
+.theme-github-light .highlight .go {
+  color: #888;
+}
+
+.theme-github-light .highlight .gp {
+  color: #555;
+}
+
+.theme-github-light .highlight .gs {
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .gu {
+  color: purple;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .gt {
+  color: #a00;
+}
+
+.theme-github-light .highlight .kc, .theme-github-light .highlight .kd, .theme-github-light .highlight .kn, .theme-github-light .highlight .kp, .theme-github-light .highlight .kr {
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .kt {
+  color: #458;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .m {
+  color: #099;
+}
+
+.theme-github-light .highlight .s {
+  color: #d14;
+}
+
+.theme-github-light .highlight .\!s {
+  color: #d14 !important;
+}
+
+.theme-github-light .highlight .n {
+  color: #333;
+}
+
+.theme-github-light .highlight .na {
+  color: teal;
+}
+
+.theme-github-light .highlight .nb {
+  color: #0086b3;
+}
+
+.theme-github-light .highlight .nc {
+  color: #458;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .no {
+  color: teal;
+}
+
+.theme-github-light .highlight .ni {
+  color: purple;
+}
+
+.theme-github-light .highlight .ne, .theme-github-light .highlight .nf {
+  color: #900;
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .nn {
+  color: #555;
+}
+
+.theme-github-light .highlight .nt {
+  color: navy;
+}
+
+.theme-github-light .highlight .nv {
+  color: teal;
+}
+
+.theme-github-light .highlight .ow {
+  font-weight: bold;
+}
+
+.theme-github-light .highlight .w {
+  color: #bbb;
+}
+
+.theme-github-light .highlight .mf, .theme-github-light .highlight .mh, .theme-github-light .highlight .mi, .theme-github-light .highlight .mo {
+  color: #099;
+}
+
+.theme-github-light .highlight .sb, .theme-github-light .highlight .sc, .theme-github-light .highlight .sd, .theme-github-light .highlight .s2, .theme-github-light .highlight .se, .theme-github-light .highlight .sh, .theme-github-light .highlight .si, .theme-github-light .highlight .sx {
+  color: #d14;
+}
+
+.theme-github-light .highlight .sr {
+  color: #009926;
+}
+
+.theme-github-light .highlight .s1 {
+  color: #d14;
+}
+
+.theme-github-light .highlight .ss {
+  color: #990073;
+}
+
+.theme-github-light .highlight .bp {
+  color: #999;
+}
+
+.theme-github-light .highlight .vc, .theme-github-light .highlight .vg, .theme-github-light .highlight .vi {
+  color: teal;
+}
+
+.theme-github-light .highlight .il {
+  color: #099;
+}
+
+.theme-github-light .highlight .gc {
+  color: #999;
+  background-color: #eaf2f5;
+}
+
+[data-component="code"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  overflow-x: hidden;
+}
+
+[data-component="code"] .line {
+  min-height: 1.625em;
+  line-height: 1.625;
+}
+
+[data-component="code"] .code {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+[data-component="code"].numbered {
+  padding: 0;
+}
+
+[data-component="code"].numbered .wrapper {
+  height: 100%;
+  width: 100%;
+  grid-template-columns: min-content 1fr;
+  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;
+  border-style: dashed;
+  border-right-width: 1px;
+  border-color: var(--lookbook-divider);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+  text-align: right;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity) );
+  padding: .75rem;
+}
+
+[data-component="code"].numbered .line-number {
+  min-width: 1.4em;
+  padding-top: 4px;
+  font-size: .75rem;
+  line-height: 1rem;
+  display: block;
+}
+
+[data-component="code"].numbered .code {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+}
+
+[data-component="code"].numbered .code .line {
+  padding-left: .75rem;
+  padding-right: .75rem;
+}
+
+[data-component="code"].focussed .line:not(.highlighted) {
+  opacity: .3 !important;
+}
+
+[data-component="code"].focussed .code .line.highlighted {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity) );
+}
+
+[data-component="icon"] {
+  flex: none;
+  line-height: 1;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-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;
+}
+
+[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"] {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+[data-component="tabs-dropdown-tab"]:not(.hidden) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lookbook-divider);
+}
+
+[data-component="tabs-dropdown-tab"]:not(.hidden):last-child {
+  border-bottom-width: 0;
+}
+
+[data-component="toolbar"] .toolbar-sections > * {
+  height: 2.5rem;
+  white-space: nowrap;
+  border-color: var(--lookbook-toolbar-divider);
+  align-items: center;
+  display: flex;
+}
+
+[data-component="toolbar"] [data-component="button-group"] {
+  padding-left: .45rem;
+  padding-right: .45rem;
+}
+
+[data-component="toolbar"] [data-component="tabs"] {
+  margin-bottom: -1px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  position: relative;
+}
+
+[data-component="viewport"] {
+  background-color: #fff;
+  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");
+}
+
+[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;
+  display: flex;
+}
+
+[data-component="viewport"] .resize-handle:hover {
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+  --tw-bg-opacity: .2;
+}
+
+[data-component="viewport"] .resize-handle {
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  color: var(--lookbook-viewport-handle-icon);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+[data-component="viewport"] .resize-handle:hover {
+  color: var(--lookbook-viewport-handle-icon-hover);
+}
+
+.form-input {
+  color: var(--lookbook-input-text);
+}
+
+.form-input::placeholder {
+  color: var(--lookbook-input-text-placeholder);
+  font-style: italic;
+}
+
+.form-input {
+  border-color: var(--lookbook-input-border);
+}
+
+.form-input:focus {
+  border-color: var(--lookbook-input-border-focus);
+  --tw-ring-color: var(--lookbook-input-border-focus);
+}
+
+.form-input {
+  width: 100%;
+  background-color: var(--lookbook-input);
+  border-radius: .375rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.\!absolute {
+  position: absolute !important;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-0 {
+  inset: 0;
+}
+
+.-inset-px {
+  inset: -1px;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.top-\[40px\] {
+  top: 40px;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.top-\[39px\] {
+  top: 39px;
+}
+
+.-top-px {
+  top: -1px;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.right-3 {
+  right: .75rem;
+}
+
+.-left-px {
+  left: -1px;
+}
+
+.-left-4 {
+  left: -1rem;
+}
+
+.-bottom-px {
+  bottom: -1px;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-\[-1\] {
+  z-index: -1;
+}
+
+.\!z-40 {
+  z-index: 40 !important;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.mt-3 {
+  margin-top: .75rem;
+}
+
+.mt-2 {
+  margin-top: .5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: .5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.ml-2 {
+  margin-left: .5rem;
+}
+
+.mr-1 {
+  margin-right: .25rem;
+}
+
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mr-2 {
+  margin-right: .5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-\[-2px\] {
+  margin-bottom: -2px;
+}
+
+.mt-1 {
+  margin-top: .25rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.-ml-3 {
+  margin-left: -.75rem;
+}
+
+.-mb-px {
+  margin-bottom: -1px;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mr-1\.5 {
+  margin-right: .375rem;
+}
+
+.\!block {
+  display: block !important;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.contents {
+  display: contents;
+}
+
+.\!hidden {
+  display: none !important;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-\[calc\(100\%_-_40px\)\] {
+  height: calc(100% - 40px);
+}
+
+.h-\[calc\(100vh_-_2\.5rem\)\] {
+  height: calc(100vh - 2.5rem);
+}
+
+.h-\[calc\(100vh_-_40px\)\] {
+  height: calc(100vh - 40px);
+}
+
+.h-\[9px\] {
+  height: 9px;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-3\.5 {
+  height: .875rem;
+}
+
+.h-3 {
+  height: .75rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.\!h-auto {
+  height: auto !important;
+}
+
+.max-h-\[300px\] {
+  max-height: 300px;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.w-\[9px\] {
+  width: 9px;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-3\.5 {
+  width: .875rem;
+}
+
+.w-3 {
+  width: .75rem;
+}
+
+.w-\[140px\] {
+  width: 140px;
+}
+
+.w-11 {
+  width: 2.75rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.min-w-\[140px\] {
+  min-width: 140px;
+}
+
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
+.max-w-\[420px\] {
+  max-width: 420px;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-none {
+  max-width: none;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.max-w-\[800px\] {
+  max-width: 800px;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.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-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) );
+}
+
+.-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-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-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) );
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+}
+
+.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;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.\!cursor-default {
+  cursor: default !important;
+}
+
+.cursor-\[not-allowed\] {
+  cursor: not-allowed;
+}
+
+.cursor-\[col-resize\] {
+  cursor: col-resize;
+}
+
+.cursor-\[row-resize\] {
+  cursor: row-resize;
+}
+
+.cursor-\[nwse-resize\] {
+  cursor: nwse-resize;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.resize {
+  resize: both;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.\!grid-cols-\[1fr\] {
+  grid-template-columns: 1fr !important;
+}
+
+.grid-cols-\[1fr_17px\] {
+  grid-template-columns: 1fr 17px;
+}
+
+.grid-rows-\[40px_1fr\] {
+  grid-template-rows: 40px 1fr;
+}
+
+.\!grid-rows-\[1fr\] {
+  grid-template-rows: 1fr !important;
+}
+
+.grid-rows-\[1fr_17px\] {
+  grid-template-rows: 1fr 17px;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.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-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-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(.5rem * var(--tw-space-x-reverse) );
+  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse) );
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+}
+
+.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) ) );
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse) ) );
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse) );
+}
+
+.divide-dashed > :not([hidden]) ~ :not([hidden]) {
+  border-style: dashed;
+}
+
+.divide-red-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-divide-opacity) );
+}
+
+.divide-lookbook-divider > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--lookbook-divider);
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.truncate {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.rounded-sm {
+  border-radius: .125rem;
+}
+
+.rounded-md {
+  border-radius: .375rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-bl-md {
+  border-bottom-left-radius: .375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-b-0 {
+  border-bottom-width: 0;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-t-0 {
+  border-top-width: 0;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity) );
+}
+
+.border-lookbook-divider {
+  border-color: var(--lookbook-divider);
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity) );
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity) );
+}
+
+.\!border-lookbook-header-border {
+  border-color: var(--lookbook-header-border) !important;
+}
+
+.border-transparent {
+  border-color: #0000;
+}
+
+.border-lookbook-tabs-highlight {
+  border-color: var(--lookbook-tabs-highlight);
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+}
+
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity) );
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity) );
+}
+
+.bg-lookbook-sidebar {
+  background-color: var(--lookbook-sidebar);
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity) );
+}
+
+.bg-lookbook-page {
+  background-color: var(--lookbook-page);
+}
+
+.bg-transparent {
+  background-color: #0000;
+}
+
+.\!bg-lookbook-header {
+  background-color: var(--lookbook-header) !important;
+}
+
+.bg-lookbook-drawer {
+  background-color: var(--lookbook-drawer);
+}
+
+.bg-lookbook-prose {
+  background-color: var(--lookbook-prose);
+}
+
+.bg-zinc-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity) );
+}
+
+.bg-lookbook-divider {
+  background-color: var(--lookbook-divider);
+}
+
+.bg-lookbook-toolbar {
+  background-color: var(--lookbook-toolbar);
+}
+
+.bg-lookbook-viewport-handle {
+  background-color: var(--lookbook-viewport-handle);
+}
+
+.\!bg-lookbook-nav-item-active {
+  background-color: var(--lookbook-nav-item-active) !important;
+}
+
+.bg-lookbook-input-toggle-active {
+  background-color: var(--lookbook-input-toggle-active);
+}
+
+.bg-lookbook-input-toggle {
+  background-color: var(--lookbook-input-toggle);
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
+
+.stroke-2 {
+  stroke-width: 2px;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-1 {
+  padding: .25rem;
+}
+
+.p-2 {
+  padding: .5rem;
+}
+
+.p-3 {
+  padding: .75rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  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-3 {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+}
+
+.px-3 {
+  padding-left: .75rem;
+  padding-right: .75rem;
+}
+
+.py-1 {
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+}
+
+.px-1 {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.px-2 {
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pt-1 {
+  padding-top: .25rem;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pl-1 {
+  padding-left: .25rem;
+}
+
+.pb-1 {
+  padding-bottom: .25rem;
+}
+
+.pr-0\.5 {
+  padding-right: .125rem;
+}
+
+.pl-0\.5 {
+  padding-left: .125rem;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pr-2 {
+  padding-right: .5rem;
+}
+
+.pt-2\.5 {
+  padding-top: .625rem;
+}
+
+.pb-1\.5 {
+  padding-bottom: .375rem;
+}
+
+.pt-2 {
+  padding-top: .5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.font-mono {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+}
+
+.font-sans {
+  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-wider {
+  letter-spacing: .05em;
+}
+
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity) );
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity) );
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity) );
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity) );
+}
+
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity) );
+}
+
+.\!text-lookbook-header-text {
+  color: var(--lookbook-header-text) !important;
+}
+
+.text-lookbook-button-text {
+  color: var(--lookbook-button-text);
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity) );
+}
+
+.text-lookbook-branding-text {
+  color: var(--lookbook-branding-text);
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity) );
+}
+
+.text-lookbook-prose-text {
+  color: var(--lookbook-prose-text);
+}
+
+.text-lookbook-viewport-handle-icon {
+  color: var(--lookbook-viewport-handle-icon);
+}
+
+.text-lookbook-nav-text {
+  color: var(--lookbook-nav-text);
+}
+
+.text-lookbook-nav-toggle {
+  color: var(--lookbook-nav-toggle);
+}
+
+.text-lookbook-nav-icon {
+  color: var(--lookbook-nav-icon);
+}
+
+.text-lookbook-tabs-text {
+  color: var(--lookbook-tabs-text);
+}
+
+.\!text-lookbook-tabs-text-disabled {
+  color: var(--lookbook-tabs-text-disabled) !important;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.opacity-50 {
+  opacity: .5;
+}
+
+.opacity-30 {
+  opacity: .3;
+}
+
+.opacity-40 {
+  opacity: .4;
+}
+
+.opacity-80 {
+  opacity: .8;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.\!opacity-30 {
+  opacity: .3 !important;
+}
+
+.opacity-90 {
+  opacity: .9;
+}
+
+.opacity-60 {
+  opacity: .6;
+}
+
+.opacity-70 {
+  opacity: .7;
+}
+
+.\!opacity-100 {
+  opacity: 1 !important;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.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);
+}
+
+.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);
+}
+
+.filter {
+  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-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-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);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.duration-100 {
+  transition-duration: .1s;
+}
+
+.duration-200 {
+  transition-duration: .2s;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+  opacity: 0;
+}
+
+[data-tippy-root] {
+  max-width: calc(100vw - 10px);
+}
+
+.tippy-box {
+  color: #fff;
+  white-space: normal;
+  background-color: #333;
+  border-radius: 4px;
+  outline: none;
+  font-size: 14px;
+  line-height: 1.4;
+  transition-property: transform, visibility, opacity;
+  position: relative;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+  border-width: 8px 8px 0;
+  border-top-color: initial;
+  transform-origin: top;
+  bottom: -7px;
+  left: 0;
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+  border-width: 0 8px 8px;
+  border-bottom-color: initial;
+  transform-origin: bottom;
+  top: -7px;
+  left: 0;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+  border-width: 8px 0 8px 8px;
+  border-left-color: initial;
+  transform-origin: 0;
+  right: -7px;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+  border-width: 8px 8px 8px 0;
+  border-right-color: initial;
+  transform-origin: 100%;
+  left: -7px;
+}
+
+.tippy-box[data-inertia][data-state="visible"] {
+  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+}
+
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+  color: #333;
+}
+
+.tippy-arrow:before {
+  content: "";
+  border-style: solid;
+  border-color: #0000;
+  position: absolute;
+}
+
+.tippy-content {
+  z-index: 1;
+  padding: 5px 9px;
+  position: relative;
+}
+
+.tippy-box {
+  border: none;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-arrow:after {
+  border-top-color: inherit;
+  border-width: 8px 8px 0;
+  bottom: -8px;
+  left: 0;
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:after {
+  border-bottom-color: inherit;
+  border-width: 0 8px 8px;
+  top: -8px;
+  left: 0;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-arrow:after {
+  border-left-color: inherit;
+  border-width: 8px 0 8px 8px;
+  top: 0;
+  right: -8px;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-arrow:after {
+  border-width: 8px 8px 8px 0;
+  border-right-color: inherit;
+  top: 0;
+  left: -8px;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg:first-child:not(:last-child) {
+  top: 17px;
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg:first-child:not(:last-child) {
+  bottom: 17px;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg:first-child:not(:last-child) {
+  left: 12px;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg:first-child:not(:last-child) {
+  right: 12px;
+}
+
+.tippy-arrow {
+  border-color: inherit;
+}
+
+.tippy-arrow:after {
+  content: "";
+  z-index: -1;
+  border-style: solid;
+  border-color: #0000;
+  position: absolute;
+}
+
+.tippy-box[data-theme~="tooltip"] {
+  opacity: .9;
+  background-color: var(--lookbook-tooltip);
+  color: var(--lookbook-tooltip-text);
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.tippy-box[data-theme~="tooltip"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: var(--lookbook-tooltip);
+}
+
+.tippy-box[data-theme~="tooltip"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: var(--lookbook-tooltip);
+}
+
+.tippy-box[data-theme~="tooltip"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: var(--lookbook-tooltip);
+}
+
+.tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: var(--lookbook-tooltip);
+}
+
+.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;
+}
+
+.tippy-box[data-theme~="menu"] > .tippy-content {
+  border-radius: .25rem;
+  padding: 0;
+  overflow: hidden;
+}
+
+.tippy-box[data-theme~="menu"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: #fff;
+}
+
+.tippy-box[data-theme~="menu"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: #fff;
+}
+
+.tippy-box[data-theme~="menu"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: #fff;
+}
+
+.tippy-box[data-theme~="menu"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: #fff;
+}
+
+.hover\:bg-lookbook-draggable-hint:hover {
+  background-color: var(--lookbook-draggable-hint);
+}
+
+.hover\:bg-indigo-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+}
+
+.hover\:bg-lookbook-nav-item-hover:hover {
+  background-color: var(--lookbook-nav-item-hover);
+}
+
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity) );
+}
+
+.hover\:text-indigo-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 48 163 / var(--tw-text-opacity) );
+}
+
+.hover\:text-lookbook-button-text-hover:hover {
+  color: var(--lookbook-button-text-hover);
+}
+
+.hover\:text-lookbook-viewport-handle-icon-hover:hover {
+  color: var(--lookbook-viewport-handle-icon-hover);
+}
+
+.hover\:text-lookbook-tabs-text-hover:hover {
+  color: var(--lookbook-tabs-text-hover);
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.focus\:outline-none:focus {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:outline-none:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+
+.prose-a\:text-lookbook-prose-link :is(:where(a):not(:where([class~="not-prose"] *))) {
+  color: var(--lookbook-prose-link);
+}
+
+@media (min-width: 768px) {
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .md\:pt-10 {
+    padding-top: 2.5rem;
+  }
+}
+
+/*# sourceMappingURL=lookbook.css.map */