SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /* latin */6@font-face {7 font-family: 'Brawler';8 font-style: normal;9 font-weight: 400;10 src: url(https://fonts.gstatic.com/s/brawler/v19/xn7gYHE3xXewAscGggexSg.woff2) format('woff2');11 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;12}13/* vietnamese */14@font-face {15 font-family: 'Work Sans';16 font-style: normal;17 font-weight: 200;18 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');19 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;20}21/* latin-ext */22@font-face {23 font-family: 'Work Sans';24 font-style: normal;25 font-weight: 200;26 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');27 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;28}29/* latin */30@font-face {31 font-family: 'Work Sans';32 font-style: normal;33 font-weight: 200;34 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');35 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;36}37/* vietnamese */38@font-face {39 font-family: 'Work Sans';40 font-style: normal;41 font-weight: 300;42 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');43 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;44}45/* latin-ext */46@font-face {47 font-family: 'Work Sans';48 font-style: normal;49 font-weight: 300;50 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');51 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;52}53/* latin */54@font-face {55 font-family: 'Work Sans';56 font-style: normal;57 font-weight: 300;58 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');59 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;60}61/* vietnamese */62@font-face {63 font-family: 'Work Sans';64 font-style: normal;65 font-weight: 400;66 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');67 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;68}69/* latin-ext */70@font-face {71 font-family: 'Work Sans';72 font-style: normal;73 font-weight: 400;74 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');75 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;76}77/* latin */78@font-face {79 font-family: 'Work Sans';80 font-style: normal;81 font-weight: 400;82 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');83 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;84}85/* vietnamese */86@font-face {87 font-family: 'Work Sans';88 font-style: normal;89 font-weight: 600;90 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');91 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;92}93/* latin-ext */94@font-face {95 font-family: 'Work Sans';96 font-style: normal;97 font-weight: 600;98 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');99 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;100}101/* latin */102@font-face {103 font-family: 'Work Sans';104 font-style: normal;105 font-weight: 600;106 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');107 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;108}109/* vietnamese */110@font-face {111 font-family: 'Work Sans';112 font-style: normal;113 font-weight: 700;114 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');115 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;116}117/* latin-ext */118@font-face {119 font-family: 'Work Sans';120 font-style: normal;121 font-weight: 700;122 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');123 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;124}125/* latin */126@font-face {127 font-family: 'Work Sans';128 font-style: normal;129 font-weight: 700;130 src: url(https://fonts.gstatic.com/s/worksans/v19/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');131 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;132}133 134 135 136/*137! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com138*/139 140/*1411. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)1422. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)143*/144 145*,146::before,147::after {148 box-sizing: border-box;149 /* 1 */150 border-width: 0;151 /* 2 */152 border-style: solid;153 /* 2 */154 border-color: #e5e7eb;155 /* 2 */156}157 158::before,159::after {160 --tw-content: '';161}162 163/*1641. Use a consistent sensible line-height in all browsers.1652. Prevent adjustments of font size after orientation changes in iOS.1663. Use a more readable tab size.1674. Use the user's configured `sans` font-family by default.1685. Use the user's configured `sans` font-feature-settings by default.1696. Use the user's configured `sans` font-variation-settings by default.1707. Disable tap highlights on iOS171*/172 173html,174:host {175 line-height: 1.5;176 /* 1 */177 -webkit-text-size-adjust: 100%;178 /* 2 */179 -moz-tab-size: 4;180 /* 3 */181 -o-tab-size: 4;182 tab-size: 4;183 /* 3 */184 font-family: Work Sans, sans-serif;185 /* 4 */186 font-feature-settings: normal;187 /* 5 */188 font-variation-settings: normal;189 /* 6 */190 -webkit-tap-highlight-color: transparent;191 /* 7 */192}193 194/*1951. Remove the margin in all browsers.1962. Inherit line-height from `html` so users can set them as a class directly on the `html` element.197*/198 199body {200 margin: 0;201 /* 1 */202 line-height: inherit;203 /* 2 */204}205 206/*2071. Add the correct height in Firefox.2082. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)2093. Ensure horizontal rules are visible by default.210*/211 212hr {213 height: 0;214 /* 1 */215 color: inherit;216 /* 2 */217 border-top-width: 1px;218 /* 3 */219}220 221/*222Add the correct text decoration in Chrome, Edge, and Safari.223*/224 225abbr:where([title]) {226 -webkit-text-decoration: underline dotted;227 text-decoration: underline dotted;228}229 230/*231Remove the default font size and weight for headings.232*/233 234h1,235h2,236h3,237h4,238h5,239h6 {240 font-size: inherit;241 font-weight: inherit;242}243 244/*245Reset links to optimize for opt-in styling instead of opt-out.246*/247 248a {249 color: inherit;250 text-decoration: inherit;251}252 253/*254Add the correct font weight in Edge and Safari.255*/256 257b,258strong {259 font-weight: bolder;260}261 262/*2631. Use the user's configured `mono` font-family by default.2642. Use the user's configured `mono` font-feature-settings by default.2653. Use the user's configured `mono` font-variation-settings by default.2664. Correct the odd `em` font sizing in all browsers.267*/268 269code,270kbd,271samp,272pre {273 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;274 /* 1 */275 font-feature-settings: normal;276 /* 2 */277 font-variation-settings: normal;278 /* 3 */279 font-size: 1em;280 /* 4 */281}282 283/*284Add the correct font size in all browsers.285*/286 287small {288 font-size: 80%;289}290 291/*292Prevent `sub` and `sup` elements from affecting the line height in all browsers.293*/294 295sub,296sup {297 font-size: 75%;298 line-height: 0;299 position: relative;300 vertical-align: baseline;301}302 303sub {304 bottom: -0.25em;305}306 307sup {308 top: -0.5em;309}310 311/*3121. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)3132. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)3143. Remove gaps between table borders by default.315*/316 317table {318 text-indent: 0;319 /* 1 */320 border-color: inherit;321 /* 2 */322 border-collapse: collapse;323 /* 3 */324}325 326/*3271. Change the font styles in all browsers.3282. Remove the margin in Firefox and Safari.3293. Remove default padding in all browsers.330*/331 332button,333input,334optgroup,335select,336textarea {337 font-family: inherit;338 /* 1 */339 font-feature-settings: inherit;340 /* 1 */341 font-variation-settings: inherit;342 /* 1 */343 font-size: 100%;344 /* 1 */345 font-weight: inherit;346 /* 1 */347 line-height: inherit;348 /* 1 */349 color: inherit;350 /* 1 */351 margin: 0;352 /* 2 */353 padding: 0;354 /* 3 */355}356 357/*358Remove the inheritance of text transform in Edge and Firefox.359*/360 361button,362select {363 text-transform: none;364}365 366/*3671. Correct the inability to style clickable types in iOS and Safari.3682. Remove default button styles.369*/370 371button,372[type='button'],373[type='reset'],374[type='submit'] {375 -webkit-appearance: button;376 /* 1 */377 background-color: transparent;378 /* 2 */379 background-image: none;380 /* 2 */381}382 383/*384Use the modern Firefox focus style for all focusable elements.385*/386 387:-moz-focusring {388 outline: auto;389}390 391/*392Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)393*/394 395:-moz-ui-invalid {396 box-shadow: none;397}398 399/*400Add the correct vertical alignment in Chrome and Firefox.401*/402 403progress {404 vertical-align: baseline;405}406 407/*408Correct the cursor style of increment and decrement buttons in Safari.409*/410 411::-webkit-inner-spin-button,412::-webkit-outer-spin-button {413 height: auto;414}415 416/*4171. Correct the odd appearance in Chrome and Safari.4182. Correct the outline style in Safari.419*/420 421[type='search'] {422 -webkit-appearance: textfield;423 /* 1 */424 outline-offset: -2px;425 /* 2 */426}427 428/*429Remove the inner padding in Chrome and Safari on macOS.430*/431 432::-webkit-search-decoration {433 -webkit-appearance: none;434}435 436/*4371. Correct the inability to style clickable types in iOS and Safari.4382. Change font properties to `inherit` in Safari.439*/440 441::-webkit-file-upload-button {442 -webkit-appearance: button;443 /* 1 */444 font: inherit;445 /* 2 */446}447 448/*449Add the correct display in Chrome and Safari.450*/451 452summary {453 display: list-item;454}455 456/*457Removes the default spacing and border for appropriate elements.458*/459 460blockquote,461dl,462dd,463h1,464h2,465h3,466h4,467h5,468h6,469hr,470figure,471p,472pre {473 margin: 0;474}475 476fieldset {477 margin: 0;478 padding: 0;479}480 481legend {482 padding: 0;483}484 485ol,486ul,487menu {488 list-style: none;489 margin: 0;490 padding: 0;491}492 493/*494Reset default styling for dialogs.495*/496 497dialog {498 padding: 0;499}500 501/*502Prevent resizing textareas horizontally by default.503*/504 505textarea {506 resize: vertical;507}508 509/*5101. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)5112. Set the default placeholder color to the user's configured gray 400 color.512*/513 514input::-moz-placeholder, textarea::-moz-placeholder {515 opacity: 1;516 /* 1 */517 color: #9ca3af;518 /* 2 */519}520 521input::placeholder,522textarea::placeholder {523 opacity: 1;524 /* 1 */525 color: #9ca3af;526 /* 2 */527}528 529/*530Set the default cursor for buttons.531*/532 533button,534[role="button"] {535 cursor: pointer;536}537 538/*539Make sure disabled buttons don't get the pointer cursor.540*/541 542:disabled {543 cursor: default;544}545 546/*5471. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)5482. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)549 This can trigger a poorly considered lint error in some tools but is included by design.550*/551 552img,553svg,554video,555canvas,556audio,557iframe,558embed,559object {560 display: block;561 /* 1 */562 vertical-align: middle;563 /* 2 */564}565 566/*567Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)568*/569 570img,571video {572 max-width: 100%;573 height: auto;574}575 576/* Make elements with the HTML hidden attribute stay hidden by default */577 578[hidden] {579 display: none;580}581 582body {583 font-family: Work Sans, sans-serif;584 font-size: 1rem;585 line-height: 1.5rem;586}587 588h1,h2,h3 {589 font-family: Brawler, serif;590}591 592h1 {593 margin-bottom: 0.75rem;594 font-size: 1.875rem;595 line-height: 2.25rem;596}597 598@media (min-width: 1024px) {599 h1 {600 margin-bottom: 1.5rem;601 font-size: 2.25rem;602 line-height: 2.5rem;603 }604}605 606@media (min-width: 1280px) {607 h1 {608 font-size: 3rem;609 line-height: 1;610 }611}612 613h2 {614 margin-top: 1rem;615 margin-bottom: 0.75rem;616 font-size: 1.25rem;617 line-height: 1.75rem;618 font-weight: 600;619}620 621@media (min-width: 1024px) {622 h2 {623 margin-top: 1.75rem;624 font-size: 1.5rem;625 line-height: 2rem;626 }627}628 629@media (min-width: 1280px) {630 h2 {631 font-size: 1.875rem;632 line-height: 2.25rem;633 font-weight: 400;634 }635}636 637h3 {638 margin-top: 0.75rem;639 margin-bottom: 0.25rem;640 font-size: 1.125rem;641 line-height: 1.75rem;642}643 644@media (min-width: 1024px) {645 h3 {646 font-size: 1.25rem;647 line-height: 1.75rem;648 }649}650 651p {652 line-height: 1.75rem;653 --tw-text-opacity: 1;654 color: rgb(92 90 90 / var(--tw-text-opacity));655}656 657*, ::before, ::after {658 --tw-border-spacing-x: 0;659 --tw-border-spacing-y: 0;660 --tw-translate-x: 0;661 --tw-translate-y: 0;662 --tw-rotate: 0;663 --tw-skew-x: 0;664 --tw-skew-y: 0;665 --tw-scale-x: 1;666 --tw-scale-y: 1;667 --tw-pan-x: ;668 --tw-pan-y: ;669 --tw-pinch-zoom: ;670 --tw-scroll-snap-strictness: proximity;671 --tw-gradient-from-position: ;672 --tw-gradient-via-position: ;673 --tw-gradient-to-position: ;674 --tw-ordinal: ;675 --tw-slashed-zero: ;676 --tw-numeric-figure: ;677 --tw-numeric-spacing: ;678 --tw-numeric-fraction: ;679 --tw-ring-inset: ;680 --tw-ring-offset-width: 0px;681 --tw-ring-offset-color: #fff;682 --tw-ring-color: rgb(59 130 246 / 0.5);683 --tw-ring-offset-shadow: 0 0 #0000;684 --tw-ring-shadow: 0 0 #0000;685 --tw-shadow: 0 0 #0000;686 --tw-shadow-colored: 0 0 #0000;687 --tw-blur: ;688 --tw-brightness: ;689 --tw-contrast: ;690 --tw-grayscale: ;691 --tw-hue-rotate: ;692 --tw-invert: ;693 --tw-saturate: ;694 --tw-sepia: ;695 --tw-drop-shadow: ;696 --tw-backdrop-blur: ;697 --tw-backdrop-brightness: ;698 --tw-backdrop-contrast: ;699 --tw-backdrop-grayscale: ;700 --tw-backdrop-hue-rotate: ;701 --tw-backdrop-invert: ;702 --tw-backdrop-opacity: ;703 --tw-backdrop-saturate: ;704 --tw-backdrop-sepia: ;705}706 707::backdrop {708 --tw-border-spacing-x: 0;709 --tw-border-spacing-y: 0;710 --tw-translate-x: 0;711 --tw-translate-y: 0;712 --tw-rotate: 0;713 --tw-skew-x: 0;714 --tw-skew-y: 0;715 --tw-scale-x: 1;716 --tw-scale-y: 1;717 --tw-pan-x: ;718 --tw-pan-y: ;719 --tw-pinch-zoom: ;720 --tw-scroll-snap-strictness: proximity;721 --tw-gradient-from-position: ;722 --tw-gradient-via-position: ;723 --tw-gradient-to-position: ;724 --tw-ordinal: ;725 --tw-slashed-zero: ;726 --tw-numeric-figure: ;727 --tw-numeric-spacing: ;728 --tw-numeric-fraction: ;729 --tw-ring-inset: ;730 --tw-ring-offset-width: 0px;731 --tw-ring-offset-color: #fff;732 --tw-ring-color: rgb(59 130 246 / 0.5);733 --tw-ring-offset-shadow: 0 0 #0000;734 --tw-ring-shadow: 0 0 #0000;735 --tw-shadow: 0 0 #0000;736 --tw-shadow-colored: 0 0 #0000;737 --tw-blur: ;738 --tw-brightness: ;739 --tw-contrast: ;740 --tw-grayscale: ;741 --tw-hue-rotate: ;742 --tw-invert: ;743 --tw-saturate: ;744 --tw-sepia: ;745 --tw-drop-shadow: ;746 --tw-backdrop-blur: ;747 --tw-backdrop-brightness: ;748 --tw-backdrop-contrast: ;749 --tw-backdrop-grayscale: ;750 --tw-backdrop-hue-rotate: ;751 --tw-backdrop-invert: ;752 --tw-backdrop-opacity: ;753 --tw-backdrop-saturate: ;754 --tw-backdrop-sepia: ;755}756 757.container {758 width: 100%;759}760 761@media (min-width: 640px) {762 .container {763 max-width: 640px;764 }765}766 767@media (min-width: 768px) {768 .container {769 max-width: 768px;770 }771}772 773@media (min-width: 1024px) {774 .container {775 max-width: 1024px;776 }777}778 779@media (min-width: 1280px) {780 .container {781 max-width: 1280px;782 }783}784 785@media (min-width: 1536px) {786 .container {787 max-width: 1536px;788 }789}790 791.prose {792 color: var(--tw-prose-body);793 max-width: 65ch;794}795 796.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {797 margin-top: 1.25em;798 margin-bottom: 1.25em;799}800 801.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {802 color: var(--tw-prose-lead);803 font-size: 1.25em;804 line-height: 1.6;805 margin-top: 1.2em;806 margin-bottom: 1.2em;807}808 809.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {810 color: var(--tw-prose-links);811 text-decoration: underline;812 font-weight: 500;813}814 815.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {816 color: var(--tw-prose-bold);817 font-weight: 600;818}819 820.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {821 color: inherit;822}823 824.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {825 color: inherit;826}827 828.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {829 color: inherit;830}831 832.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {833 list-style-type: decimal;834 margin-top: 1.25em;835 margin-bottom: 1.25em;836 padding-left: 1.625em;837}838 839.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {840 list-style-type: upper-alpha;841}842 843.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {844 list-style-type: lower-alpha;845}846 847.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {848 list-style-type: upper-alpha;849}850 851.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {852 list-style-type: lower-alpha;853}854 855.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {856 list-style-type: upper-roman;857}858 859.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {860 list-style-type: lower-roman;861}862 863.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {864 list-style-type: upper-roman;865}866 867.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {868 list-style-type: lower-roman;869}870 871.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {872 list-style-type: decimal;873}874 875.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {876 list-style-type: disc;877 margin-top: 1.25em;878 margin-bottom: 1.25em;879 padding-left: 1.625em;880}881 882.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {883 font-weight: 400;884 color: var(--tw-prose-counters);885}886 887.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {888 color: var(--tw-prose-bullets);889}890 891.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {892 color: var(--tw-prose-headings);893 font-weight: 600;894 margin-top: 1.25em;895}896 897.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {898 border-color: var(--tw-prose-hr);899 border-top-width: 1px;900 margin-top: 3em;901 margin-bottom: 3em;902}903 904.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {905 font-weight: 500;906 font-style: italic;907 color: var(--tw-prose-quotes);908 border-left-width: 0.25rem;909 border-left-color: var(--tw-prose-quote-borders);910 quotes: "\201C""\201D""\2018""\2019";911 margin-top: 1.6em;912 margin-bottom: 1.6em;913 padding-left: 1em;914}915 916.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {917 content: open-quote;918}919 920.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {921 content: close-quote;922}923 924.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {925 color: var(--tw-prose-headings);926 font-weight: 800;927 font-size: 2.25em;928 margin-top: 0;929 margin-bottom: 0.8888889em;930 line-height: 1.1111111;931}932 933.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {934 font-weight: 900;935 color: inherit;936}937 938.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {939 color: var(--tw-prose-headings);940 font-weight: 700;941 font-size: 1.5em;942 margin-top: 2em;943 margin-bottom: 1em;944 line-height: 1.3333333;945}946 947.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {948 font-weight: 800;949 color: inherit;950}951 952.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {953 color: var(--tw-prose-headings);954 font-weight: 600;955 font-size: 1.25em;956 margin-top: 1.6em;957 margin-bottom: 0.6em;958 line-height: 1.6;959}960 961.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {962 font-weight: 700;963 color: inherit;964}965 966.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {967 color: var(--tw-prose-headings);968 font-weight: 600;969 margin-top: 1.5em;970 margin-bottom: 0.5em;971 line-height: 1.5;972}973 974.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {975 font-weight: 700;976 color: inherit;977}978 979.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {980 margin-top: 2em;981 margin-bottom: 2em;982}983 984.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {985 display: block;986 margin-top: 2em;987 margin-bottom: 2em;988}989 990.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {991 font-weight: 500;992 font-family: inherit;993 color: var(--tw-prose-kbd);994 box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);995 font-size: 0.875em;996 border-radius: 0.3125rem;997 padding-top: 0.1875em;998 padding-right: 0.375em;999 padding-bottom: 0.1875em;1000 padding-left: 0.375em;1001}1002 1003.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1004 color: var(--tw-prose-code);1005 font-weight: 600;1006 font-size: 0.875em;1007}1008 1009.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {1010 content: "`";1011}1012 1013.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {1014 content: "`";1015}1016 1017.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1018 color: inherit;1019}1020 1021.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1022 color: inherit;1023}1024 1025.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1026 color: inherit;1027 font-size: 0.875em;1028}1029 1030.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1031 color: inherit;1032 font-size: 0.9em;1033}1034 1035.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1036 color: inherit;1037}1038 1039.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1040 color: inherit;1041}1042 1043.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1044 color: inherit;1045}1046 1047.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1048 color: var(--tw-prose-pre-code);1049 background-color: var(--tw-prose-pre-bg);1050 overflow-x: auto;1051 font-weight: 400;1052 font-size: 0.875em;1053 line-height: 1.7142857;1054 margin-top: 1.7142857em;1055 margin-bottom: 1.7142857em;1056 border-radius: 0.375rem;1057 padding-top: 0.8571429em;1058 padding-right: 1.1428571em;1059 padding-bottom: 0.8571429em;1060 padding-left: 1.1428571em;1061}1062 1063.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1064 background-color: transparent;1065 border-width: 0;1066 border-radius: 0;1067 padding: 0;1068 font-weight: inherit;1069 color: inherit;1070 font-size: inherit;1071 font-family: inherit;1072 line-height: inherit;1073}1074 1075.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {1076 content: none;1077}1078 1079.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {1080 content: none;1081}1082 1083.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1084 width: 100%;1085 table-layout: auto;1086 text-align: left;1087 margin-top: 2em;1088 margin-bottom: 2em;1089 font-size: 0.875em;1090 line-height: 1.7142857;1091}1092 1093.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1094 border-bottom-width: 1px;1095 border-bottom-color: var(--tw-prose-th-borders);1096}1097 1098.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1099 color: var(--tw-prose-headings);1100 font-weight: 600;1101 vertical-align: bottom;1102 padding-right: 0.5714286em;1103 padding-bottom: 0.5714286em;1104 padding-left: 0.5714286em;1105}1106 1107.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1108 border-bottom-width: 1px;1109 border-bottom-color: var(--tw-prose-td-borders);1110}1111 1112.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1113 border-bottom-width: 0;1114}1115 1116.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1117 vertical-align: baseline;1118}1119 1120.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1121 border-top-width: 1px;1122 border-top-color: var(--tw-prose-th-borders);1123}1124 1125.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1126 vertical-align: top;1127}1128 1129.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1130 margin-top: 0;1131 margin-bottom: 0;1132}1133 1134.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1135 color: var(--tw-prose-captions);1136 font-size: 0.875em;1137 line-height: 1.4285714;1138 margin-top: 0.8571429em;1139}1140 1141.prose {1142 --tw-prose-body: #374151;1143 --tw-prose-headings: #111827;1144 --tw-prose-lead: #4b5563;1145 --tw-prose-links: #111827;1146 --tw-prose-bold: #111827;1147 --tw-prose-counters: #6b7280;1148 --tw-prose-bullets: #d1d5db;1149 --tw-prose-hr: #e5e7eb;1150 --tw-prose-quotes: #111827;1151 --tw-prose-quote-borders: #e5e7eb;1152 --tw-prose-captions: #6b7280;1153 --tw-prose-kbd: #111827;1154 --tw-prose-kbd-shadows: 17 24 39;1155 --tw-prose-code: #111827;1156 --tw-prose-pre-code: #e5e7eb;1157 --tw-prose-pre-bg: #1f2937;1158 --tw-prose-th-borders: #d1d5db;1159 --tw-prose-td-borders: #e5e7eb;1160 --tw-prose-invert-body: #d1d5db;1161 --tw-prose-invert-headings: #fff;1162 --tw-prose-invert-lead: #9ca3af;1163 --tw-prose-invert-links: #fff;1164 --tw-prose-invert-bold: #fff;1165 --tw-prose-invert-counters: #9ca3af;1166 --tw-prose-invert-bullets: #4b5563;1167 --tw-prose-invert-hr: #374151;1168 --tw-prose-invert-quotes: #f3f4f6;1169 --tw-prose-invert-quote-borders: #374151;1170 --tw-prose-invert-captions: #9ca3af;1171 --tw-prose-invert-kbd: #fff;1172 --tw-prose-invert-kbd-shadows: 255 255 255;1173 --tw-prose-invert-code: #fff;1174 --tw-prose-invert-pre-code: #d1d5db;1175 --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);1176 --tw-prose-invert-th-borders: #4b5563;1177 --tw-prose-invert-td-borders: #374151;1178 font-size: 1rem;1179 line-height: 1.75;1180}1181 1182.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1183 margin-top: 0;1184 margin-bottom: 0;1185}1186 1187.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1188 margin-top: 2em;1189 margin-bottom: 2em;1190}1191 1192.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1193 margin-top: 0.5em;1194 margin-bottom: 0.5em;1195}1196 1197.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {1198 padding-left: 0.375em;1199}1200