pub const CSS: &str = "/*!\n * Drizzle CSS\n * Classless-first CSS framework driven by CSS variables.\n * Bundled with Lightning CSS.\n */\n@layer tokens, dark, reset, base, typography, lists, tables, forms, media, utilities, print, palette;\n\n@layer tokens {\n :root {\n --color-red: #e5484d;\n --color-orange: #f76b15;\n --color-yellow: #f5d90a;\n --color-green: #30a46c;\n --color-blue: #3b82f6;\n --color-indigo: #6366f1;\n --color-violet: #8b5cf6;\n --color-pink: #ec4899;\n --color-error: var(--color-red);\n --color-warning: var(--color-yellow);\n --color-success: var(--color-green);\n --color-info: var(--color-blue);\n --color-bg: #fff;\n --color-surface: #f6f6f7;\n --color-surface-2: #ececef;\n --color-text: #1c1c1f;\n --color-muted: #6b6b73;\n --color-border: #e1e1e6;\n --color-link: var(--color-blue);\n --color-link-hover: var(--color-indigo);\n --color-focus-ring: color-mix(in srgb, var(--color-link) 50%, transparent);\n --color-selection: color-mix(in srgb, var(--color-link) 25%, transparent);\n --dark-color-bg: #0e0e10;\n --dark-color-surface: #17171a;\n --dark-color-surface-2: #1f1f23;\n --dark-color-text: #e7e7ea;\n --dark-color-muted: #9c9ca6;\n --dark-color-border: #2a2a31;\n --dark-color-link: #60a5fa;\n --dark-color-link-hover: #a5b4fc;\n --dark-color-selection: color-mix(in srgb, var(--dark-color-link) 25%, transparent);\n --dark-shadow-sm: 0 1px 2px #0006;\n --dark-shadow: 0 2px 8px #00000080;\n --dark-shadow-lg: 0 8px 24px #0009;\n --font-family-sans: system-ui, -apple-system, \"Segoe UI\", Roboto,\n \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\";\n --font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n --font-family-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", serif;\n --font-family-base: var(--font-family-sans);\n --font-size-base: 1rem;\n --font-size-xs: .75rem;\n --font-size-sm: .875rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-h1: 2.5rem;\n --font-size-h2: 2rem;\n --font-size-h3: 1.5rem;\n --font-size-h4: 1.25rem;\n --font-size-h5: 1.125rem;\n --font-size-h6: 1rem;\n --line-height-base: 1.6;\n --line-height-tight: 1.25;\n --line-height-heading: 1.2;\n --letter-spacing-tight: -.02em;\n --letter-spacing-snug: -.015em;\n --letter-spacing-wide: .05em;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-bold: 700;\n --font-weight-heading: 700;\n --gutter-xs: .25rem;\n --gutter-sm: .5rem;\n --gutter-md: 1rem;\n --gutter-lg: 1.5rem;\n --gutter-xl: 2.5rem;\n --gutter-2xl: 4rem;\n --border-width-thin: 1px;\n --border-width: 2px;\n --border-width-thick: 4px;\n --border-style: solid;\n --border: var(--border-width-thin) var(--border-style) var(--color-border);\n --radius-sm: .25rem;\n --radius: .5rem;\n --radius-lg: 1rem;\n --radius-full: 9999px;\n --shadow-sm: 0 1px 2px #0000000f;\n --shadow: 0 2px 8px #00000014;\n --shadow-lg: 0 8px 24px #0000001f;\n --container-width: 64rem;\n --content-width: 42rem;\n --dialog-width: 32rem;\n --transition-fast: .12s ease;\n --transition: .2s ease;\n --opacity-disabled: .55;\n --button-press: translateY(1px);\n --backdrop-bg: #00000080;\n --backdrop-blur: blur(2px);\n --alert-tint: 12%;\n --meter-height: .6rem;\n --textarea-min-height: 6rem;\n }\n}\n\n@layer dark {\n @media (prefers-color-scheme: dark) {\n :root:not(.light) {\n color-scheme: dark;\n --color-bg: var(--dark-color-bg);\n --color-surface: var(--dark-color-surface);\n --color-surface-2: var(--dark-color-surface-2);\n --color-text: var(--dark-color-text);\n --color-muted: var(--dark-color-muted);\n --color-border: var(--dark-color-border);\n --color-link: var(--dark-color-link);\n --color-link-hover: var(--dark-color-link-hover);\n --color-selection: var(--dark-color-selection);\n --shadow-sm: var(--dark-shadow-sm);\n --shadow: var(--dark-shadow);\n --shadow-lg: var(--dark-shadow-lg);\n }\n }\n\n :root.dark {\n color-scheme: dark;\n --color-bg: var(--dark-color-bg);\n --color-surface: var(--dark-color-surface);\n --color-surface-2: var(--dark-color-surface-2);\n --color-text: var(--dark-color-text);\n --color-muted: var(--dark-color-muted);\n --color-border: var(--dark-color-border);\n --color-link: var(--dark-color-link);\n --color-link-hover: var(--dark-color-link-hover);\n --color-selection: var(--dark-color-selection);\n --shadow-sm: var(--dark-shadow-sm);\n --shadow: var(--dark-shadow);\n --shadow-lg: var(--dark-shadow-lg);\n }\n\n :root.light {\n color-scheme: light;\n }\n}\n\n@layer reset {\n *, :before, :after {\n box-sizing: border-box;\n }\n\n * {\n margin: 0;\n }\n\n html {\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n tab-size: 4;\n text-size-adjust: 100%;\n }\n\n html, body {\n height: 100%;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizelegibility;\n }\n\n img, picture, video, canvas, svg {\n display: block;\n max-width: 100%;\n height: auto;\n }\n\n input, button, textarea, select {\n font: inherit;\n color: inherit;\n }\n\n button {\n background: none;\n border: 0;\n cursor: pointer;\n }\n\n p, h1, h2, h3, h4, h5, h6 {\n overflow-wrap: break-word;\n }\n\n ::selection {\n background: var(--color-selection);\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, :before, :after {\n animation-duration: .01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: .01ms !important;\n scroll-behavior: auto !important;\n }\n }\n}\n\n@layer base {\n html {\n background: var(--color-bg);\n color: var(--color-text);\n }\n\n body {\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-base);\n background: var(--color-bg);\n color: var(--color-text);\n max-width: var(--content-width);\n margin: 0 auto;\n padding: var(--gutter-xl) var(--gutter-lg);\n }\n\n @media (min-width: 48rem) {\n body {\n padding: var(--gutter-2xl) var(--gutter-xl);\n }\n }\n\n @media (prefers-reduced-motion: no-preference) {\n html {\n scroll-behavior: smooth;\n }\n }\n\n main, article, section, header, footer, aside, nav {\n display: block;\n }\n\n a {\n color: var(--color-link);\n text-decoration: underline;\n text-underline-offset: .15em;\n text-decoration-thickness: 1px;\n transition: color var(--transition-fast);\n }\n\n a:visited {\n color: var(--color-indigo);\n }\n\n a:hover, a:focus-visible {\n color: var(--color-link-hover);\n text-decoration-thickness: 2px;\n }\n\n :focus-visible {\n outline: var(--border-width) solid var(--color-focus-ring);\n outline-offset: 2px;\n border-radius: var(--radius-sm);\n }\n\n hr {\n border: 0;\n border-top: var(--border-width-thin) var(--border-style) var(--color-border);\n margin: var(--gutter-lg) 0;\n }\n\n aside {\n background: var(--color-surface-2);\n border-left: var(--border-width-thick) var(--border-style) var(--color-border);\n border-radius: 0 var(--radius) var(--radius) 0;\n padding: var(--gutter-sm) var(--gutter-md);\n margin: var(--gutter-md) 0;\n }\n\n article > header {\n padding-block: var(--gutter-md) var(--gutter-sm);\n border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);\n margin-bottom: var(--gutter-md);\n }\n\n article > footer {\n padding-block: var(--gutter-sm);\n border-top: var(--border-width-thin) var(--border-style) var(--color-border);\n margin-top: var(--gutter-md);\n font-size: var(--font-size-sm);\n color: var(--color-muted);\n }\n\n section > header {\n padding-block: var(--gutter-sm);\n border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);\n margin-bottom: var(--gutter-md);\n }\n\n header > nav {\n display: flex;\n gap: var(--gutter-md);\n align-items: center;\n flex-wrap: wrap;\n }\n\n nav a[aria-current], nav a[aria-current=\"page\"] {\n color: var(--color-text);\n font-weight: var(--font-weight-bold);\n text-decoration: none;\n }\n\n iframe {\n display: block;\n max-width: 100%;\n border: 0;\n }\n\n abbr[title] {\n text-decoration: underline dotted;\n cursor: help;\n }\n\n small {\n font-size: var(--font-size-sm);\n color: var(--color-muted);\n }\n\n sub, sup {\n font-size: .75em;\n line-height: 0;\n vertical-align: baseline;\n position: relative;\n }\n\n sup {\n top: -.5em;\n }\n\n sub {\n bottom: -.25em;\n }\n}\n\n@layer typography {\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family-base);\n font-weight: var(--font-weight-heading);\n line-height: var(--line-height-heading);\n color: var(--color-text);\n margin-top: var(--gutter-xl);\n margin-bottom: var(--gutter-md);\n }\n\n h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {\n margin-top: 0;\n }\n\n h1 {\n font-size: var(--font-size-h1);\n letter-spacing: var(--letter-spacing-tight);\n }\n\n h2 {\n font-size: var(--font-size-h2);\n letter-spacing: var(--letter-spacing-snug);\n }\n\n h3 {\n font-size: var(--font-size-h3);\n }\n\n h4 {\n font-size: var(--font-size-h4);\n }\n\n h5 {\n font-size: var(--font-size-h5);\n }\n\n h6 {\n font-size: var(--font-size-h6);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n color: var(--color-muted);\n }\n\n p {\n margin: 0 0 var(--gutter-md);\n }\n\n p + p {\n margin-top: 0;\n }\n\n blockquote {\n margin: var(--gutter-lg) 0;\n padding: var(--gutter-sm) var(--gutter-lg);\n border-left: var(--border-width-thick) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n font-style: italic;\n border-radius: 0 var(--radius) var(--radius) 0;\n }\n\n blockquote cite, blockquote footer {\n display: block;\n margin-top: var(--gutter-sm);\n font-size: var(--font-size-sm);\n font-style: normal;\n color: var(--color-muted);\n }\n\n blockquote cite:before, blockquote footer:before {\n content: \"\u{2014} \";\n }\n\n code, kbd, samp, pre {\n font-family: var(--font-family-mono);\n font-size: .95em;\n }\n\n code {\n background: var(--color-surface);\n color: var(--color-text);\n padding: .15em .4em;\n border-radius: var(--radius-sm);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n }\n\n pre {\n background: var(--color-surface);\n color: var(--color-text);\n padding: var(--gutter-md);\n border-radius: var(--radius);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n overflow-x: auto;\n margin: var(--gutter-md) 0;\n line-height: var(--line-height-base);\n }\n\n pre code {\n background: none;\n border: 0;\n padding: 0;\n font-size: inherit;\n }\n\n kbd {\n background: var(--color-surface-2);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-bottom-width: 2px;\n border-radius: var(--radius-sm);\n padding: .1em .45em;\n font-size: .85em;\n }\n\n mark {\n background: color-mix(in srgb, var(--color-yellow) 50%, transparent);\n color: var(--color-text);\n padding: 0 .2em;\n border-radius: var(--radius-sm);\n }\n\n del {\n text-decoration: line-through;\n color: var(--color-muted);\n }\n\n ins {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n color: var(--color-muted);\n }\n\n q {\n quotes: \"\u{201c}\" \"\u{201d}\" \"\u{2018}\" \"\u{2019}\";\n }\n\n q:before {\n content: open-quote;\n }\n\n q:after {\n content: close-quote;\n }\n\n cite {\n font-style: italic;\n }\n\n var {\n font-family: var(--font-family-mono);\n font-style: italic;\n font-size: .95em;\n }\n\n dfn {\n font-style: italic;\n text-decoration: underline dotted;\n cursor: help;\n }\n\n address {\n font-style: normal;\n color: var(--color-muted);\n }\n}\n\n@layer lists {\n ul, ol {\n margin: 0 0 var(--gutter-md);\n padding-left: var(--gutter-lg);\n }\n\n ul {\n list-style: outside;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n margin-bottom: var(--gutter-xs);\n }\n\n li > ul, li > ol {\n margin-top: var(--gutter-xs);\n margin-bottom: 0;\n }\n\n ul ul {\n list-style: circle;\n }\n\n ul ul ul {\n list-style: square;\n }\n\n dl {\n margin: 0 0 var(--gutter-md);\n display: grid;\n grid-template-columns: max-content 1fr;\n gap: var(--gutter-xs) var(--gutter-md);\n }\n\n dt {\n font-weight: var(--font-weight-bold);\n color: var(--color-text);\n }\n\n dd {\n margin: 0;\n color: var(--color-text);\n }\n\n nav ul, nav ol {\n list-style: none;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n gap: var(--gutter-md);\n }\n}\n\n@layer tables {\n table {\n width: 100%;\n border-collapse: collapse;\n margin: var(--gutter-md) 0;\n font-size: var(--font-size-base);\n background: var(--color-bg);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius);\n overflow: hidden;\n }\n\n caption {\n caption-side: top;\n text-align: left;\n font-weight: var(--font-weight-bold);\n padding: var(--gutter-sm) 0;\n color: var(--color-muted);\n }\n\n th, td {\n text-align: left;\n padding: var(--gutter-sm) var(--gutter-md);\n border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);\n vertical-align: top;\n }\n\n thead th {\n background: var(--color-surface);\n font-weight: var(--font-weight-bold);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n\n tbody tr:nth-child(2n) {\n background: color-mix(in srgb, var(--color-surface) 60%, transparent);\n }\n\n tbody tr:hover {\n background: var(--color-surface);\n }\n\n tbody tr:last-child td {\n border-bottom: 0;\n }\n\n tfoot th, tfoot td {\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n font-weight: var(--font-weight-medium);\n }\n\n @media (max-width: 47.9375rem) {\n table {\n display: block;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n }\n}\n\n@layer forms {\n form {\n display: block;\n }\n\n fieldset {\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius);\n padding: var(--gutter-md) var(--gutter-lg);\n margin: 0 0 var(--gutter-md);\n }\n\n legend {\n padding: 0 var(--gutter-sm);\n font-weight: var(--font-weight-bold);\n color: var(--color-text);\n }\n\n label {\n display: inline-block;\n margin-bottom: var(--gutter-xs);\n font-weight: var(--font-weight-medium);\n color: var(--color-text);\n }\n\n label + input, label + textarea, label + select {\n margin-top: var(--gutter-xs);\n }\n\n input, textarea, select {\n display: block;\n width: 100%;\n padding: var(--gutter-sm) var(--gutter-md);\n font-family: inherit;\n font-size: var(--font-size-base);\n line-height: var(--line-height-tight);\n color: var(--color-text);\n background: var(--color-bg);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius);\n transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\n margin-bottom: var(--gutter-md);\n }\n\n textarea {\n min-height: var(--textarea-min-height);\n resize: vertical;\n }\n\n select {\n appearance: none;\n background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),\n linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);\n background-position: calc(100% - 1.1rem), calc(100% - .7rem);\n background-size: .4rem .4rem, .4rem .4rem;\n background-repeat: no-repeat;\n padding-right: var(--gutter-2xl);\n }\n\n input:focus, textarea:focus, select:focus {\n outline: 0;\n border-color: var(--color-link);\n box-shadow: 0 0 0 3px var(--color-focus-ring);\n }\n\n input:disabled, textarea:disabled, select:disabled, button:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n input:read-only, textarea:read-only {\n background: var(--color-surface);\n color: var(--color-muted);\n cursor: default;\n }\n\n input:invalid:not(:focus):not(:placeholder-shown), textarea:invalid:not(:focus):not(:placeholder-shown) {\n border-color: var(--color-error);\n }\n\n label:has( + :required):after {\n content: \" *\";\n color: var(--color-error);\n }\n\n optgroup {\n font-weight: var(--font-weight-bold);\n }\n\n input[type=\"checkbox\"], input[type=\"radio\"] {\n display: inline-block;\n width: auto;\n margin-right: var(--gutter-xs);\n margin-bottom: 0;\n accent-color: var(--color-link);\n }\n\n input[type=\"range\"] {\n padding: 0;\n border: 0;\n background: none;\n accent-color: var(--color-link);\n }\n\n input[type=\"color\"] {\n width: 3rem;\n height: 2.5rem;\n padding: .15rem;\n cursor: pointer;\n }\n\n input[type=\"file\"] {\n padding: var(--gutter-xs);\n }\n\n input[type=\"search\"] {\n appearance: none;\n }\n\n input[type=\"search\"]::-webkit-search-cancel-button {\n appearance: none;\n width: .8em;\n height: .8em;\n background: var(--color-muted);\n clip-path: polygon(14% 0, 0 14%, 36% 50%, 0 86%, 14% 100%, 50% 64%, 86% 100%, 100% 86%, 64% 50%, 100% 14%, 86% 0, 50% 36%);\n cursor: pointer;\n }\n\n ::placeholder {\n color: var(--color-muted);\n opacity: 1;\n }\n\n input[type=\"checkbox\"]:indeterminate {\n opacity: .7;\n }\n\n progress:indeterminate {\n opacity: .7;\n }\n\n button, [type=\"submit\"], [type=\"reset\"], [type=\"button\"] {\n display: inline-block;\n padding: var(--gutter-sm) var(--gutter-lg);\n font-family: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-tight);\n color: #fff;\n background: var(--color-link);\n border: var(--border-width-thin) var(--border-style) var(--color-link);\n border-radius: var(--radius);\n cursor: pointer;\n width: auto;\n transition: background var(--transition-fast), border-color var(--transition-fast),\n transform var(--transition-fast);\n margin-bottom: 0;\n }\n\n button:hover:not(:disabled), [type=\"submit\"]:hover:not(:disabled), [type=\"reset\"]:hover:not(:disabled), [type=\"button\"]:hover:not(:disabled) {\n background: var(--color-link-hover);\n border-color: var(--color-link-hover);\n }\n\n button:active:not(:disabled), [type=\"submit\"]:active:not(:disabled), [type=\"reset\"]:active:not(:disabled), [type=\"button\"]:active:not(:disabled) {\n transform: var(--button-press);\n }\n\n [type=\"reset\"] {\n background: var(--color-surface);\n color: var(--color-text);\n border-color: var(--color-border);\n }\n\n [type=\"reset\"]:hover:not(:disabled) {\n background: var(--color-surface-2);\n border-color: var(--color-border);\n color: var(--color-text);\n }\n\n progress {\n width: 100%;\n height: var(--meter-height);\n accent-color: var(--color-link);\n }\n\n meter {\n width: 100%;\n height: var(--meter-height);\n }\n\n output {\n display: inline-block;\n padding: .15em .4em;\n background: var(--color-surface);\n border-radius: var(--radius-sm);\n font-family: var(--font-family-mono);\n font-size: var(--font-size-sm);\n }\n}\n\n@layer media {\n figure {\n margin: var(--gutter-lg) 0;\n text-align: center;\n }\n\n figure > img, figure > picture, figure > video, figure > svg {\n margin: 0 auto;\n border-radius: var(--radius);\n }\n\n figcaption {\n margin-top: var(--gutter-sm);\n font-size: var(--font-size-sm);\n color: var(--color-muted);\n }\n\n img, video {\n border-radius: var(--radius-sm);\n }\n\n details {\n background: var(--color-surface);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius);\n padding: var(--gutter-sm) var(--gutter-md);\n margin: 0 0 var(--gutter-md);\n }\n\n details[open] {\n padding-bottom: var(--gutter-md);\n }\n\n summary {\n cursor: pointer;\n font-weight: var(--font-weight-medium);\n padding: var(--gutter-xs) 0;\n list-style: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n summary:before {\n content: \"\u{25b6}\";\n display: inline-block;\n font-size: .7em;\n margin-right: var(--gutter-xs);\n transition: transform var(--transition-default);\n }\n\n details[open] > summary:before {\n transform: rotate(90deg);\n }\n\n summary:hover {\n color: var(--color-link);\n }\n\n dialog {\n background: var(--color-bg);\n color: var(--color-text);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius-lg);\n padding: var(--gutter-lg);\n box-shadow: var(--shadow-lg);\n max-width: var(--dialog-width);\n }\n\n dialog::backdrop {\n background: var(--backdrop-bg);\n backdrop-filter: var(--backdrop-blur);\n }\n}\n\n@layer utilities {\n .container {\n max-width: var(--container-width);\n margin-inline: auto;\n padding-inline: var(--gutter-lg);\n }\n\n .wide {\n max-width: var(--container-width);\n }\n\n .narrow {\n max-width: var(--content-width);\n }\n\n .center {\n text-align: center;\n }\n\n .right {\n text-align: right;\n }\n\n .muted {\n color: var(--color-muted);\n }\n\n .lead {\n font-size: var(--font-size-lg);\n color: var(--color-muted);\n line-height: var(--line-height-base);\n }\n\n .stack {\n display: flex;\n flex-direction: column;\n gap: var(--gutter-md);\n }\n\n .stack-sm {\n gap: var(--gutter-sm);\n }\n\n .stack-lg {\n gap: var(--gutter-lg);\n }\n\n .row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gutter-md);\n align-items: center;\n }\n\n .grid {\n display: grid;\n gap: var(--gutter-md);\n grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));\n }\n\n .card {\n background: var(--color-surface);\n border: var(--border-width-thin) var(--border-style) var(--color-border);\n border-radius: var(--radius);\n padding: var(--gutter-lg);\n box-shadow: var(--shadow-sm);\n }\n\n .button {\n display: inline-block;\n padding: var(--gutter-sm) var(--gutter-lg);\n font-family: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-tight);\n color: #fff;\n background: var(--color-link);\n border: var(--border-width-thin) var(--border-style) var(--color-link);\n border-radius: var(--radius);\n cursor: pointer;\n text-decoration: none;\n transition: background var(--transition-fast), border-color var(--transition-fast),\n transform var(--transition-fast);\n }\n\n .button:hover:not(:disabled) {\n background: var(--color-link-hover);\n border-color: var(--color-link-hover);\n }\n\n .button:active:not(:disabled) {\n transform: var(--button-press);\n }\n\n .button-outline {\n background: none;\n color: var(--color-link);\n border-color: var(--color-link);\n }\n\n .button-outline:hover:not(:disabled) {\n background: var(--color-link);\n color: #fff;\n }\n\n .button-ghost {\n background: none;\n color: var(--color-text);\n border-color: #0000;\n }\n\n .button-ghost:hover:not(:disabled) {\n background: var(--color-surface);\n color: var(--color-text);\n border-color: var(--color-border);\n }\n\n .badge {\n display: inline-block;\n padding: .15em .55em;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n border-radius: var(--radius-full);\n background: var(--color-surface-2);\n color: var(--color-text);\n line-height: 1.4;\n }\n\n .prose {\n max-width: var(--content-width);\n margin-inline: auto;\n }\n\n .divider {\n border: 0;\n border-top: var(--border);\n margin-block: var(--gutter-lg);\n }\n\n .cluster {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gutter-sm);\n align-items: center;\n }\n\n .avatar {\n display: inline-block;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: var(--radius-full);\n overflow: hidden;\n object-fit: cover;\n }\n\n .skeleton {\n background: linear-gradient(90deg,\n var(--color-surface) 25%,\n var(--color-surface-2) 50%,\n var(--color-surface) 75%);\n background-size: 200% 100%;\n animation: 1.5s infinite skeleton-shimmer;\n border-radius: var(--radius);\n }\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n }\n\n .hidden {\n display: none !important;\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n}\n\n@layer print {\n @media print {\n *, :before, :after {\n background: none !important;\n color: #000 !important;\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n body {\n max-width: 100%;\n padding: 0;\n font-size: 12pt;\n line-height: 1.5;\n }\n\n header > nav, aside, dialog, .skeleton {\n display: none !important;\n }\n\n a, a:visited {\n text-decoration: underline;\n }\n\n a[href]:not([href^=\"#\"]):not([href^=\"javascript:\"]):after {\n content: \" (\" attr(href) \")\";\n font-size: .875em;\n }\n\n abbr[title]:after {\n content: \" (\" attr(title) \")\";\n }\n\n pre {\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n blockquote, pre, figure, img {\n break-inside: avoid;\n }\n\n h1, h2, h3, h4, h5, h6 {\n break-after: avoid;\n orphans: 3;\n widows: 3;\n }\n\n p {\n orphans: 3;\n widows: 3;\n }\n\n img, svg {\n max-width: 100% !important;\n }\n\n thead {\n display: table-header-group;\n }\n\n tr {\n break-inside: avoid;\n }\n }\n}\n\n@layer palette {\n .text-red {\n color: var(--color-red);\n }\n\n .text-orange {\n color: var(--color-orange);\n }\n\n .text-yellow {\n color: var(--color-yellow);\n }\n\n .text-green {\n color: var(--color-green);\n }\n\n .text-blue {\n color: var(--color-blue);\n }\n\n .text-indigo {\n color: var(--color-indigo);\n }\n\n .text-violet {\n color: var(--color-violet);\n }\n\n .text-pink {\n color: var(--color-pink);\n }\n\n .bg-red {\n background: var(--color-red);\n color: #fff;\n }\n\n .bg-orange {\n background: var(--color-orange);\n color: #fff;\n }\n\n .bg-yellow {\n background: var(--color-yellow);\n color: #1c1c1f;\n }\n\n .bg-green {\n background: var(--color-green);\n color: #fff;\n }\n\n .bg-blue {\n background: var(--color-blue);\n color: #fff;\n }\n\n .bg-indigo {\n background: var(--color-indigo);\n color: #fff;\n }\n\n .bg-violet {\n background: var(--color-violet);\n color: #fff;\n }\n\n .bg-pink {\n background: var(--color-pink);\n color: #fff;\n }\n\n .border-red {\n border-color: var(--color-red);\n }\n\n .border-orange {\n border-color: var(--color-orange);\n }\n\n .border-yellow {\n border-color: var(--color-yellow);\n }\n\n .border-green {\n border-color: var(--color-green);\n }\n\n .border-blue {\n border-color: var(--color-blue);\n }\n\n .border-indigo {\n border-color: var(--color-indigo);\n }\n\n .border-violet {\n border-color: var(--color-violet);\n }\n\n .border-pink {\n border-color: var(--color-pink);\n }\n\n .text-error {\n color: var(--color-error);\n }\n\n .text-warning {\n color: var(--color-warning);\n }\n\n .text-success {\n color: var(--color-success);\n }\n\n .text-info {\n color: var(--color-info);\n }\n\n .bg-error {\n background: var(--color-error);\n color: #fff;\n }\n\n .bg-warning {\n background: var(--color-warning);\n color: #1c1c1f;\n }\n\n .bg-success {\n background: var(--color-success);\n color: #fff;\n }\n\n .bg-info {\n background: var(--color-info);\n color: #fff;\n }\n\n .border-error {\n border-color: var(--color-error);\n }\n\n .border-warning {\n border-color: var(--color-warning);\n }\n\n .border-success {\n border-color: var(--color-success);\n }\n\n .border-info {\n border-color: var(--color-info);\n }\n\n .alert {\n display: block;\n padding: var(--gutter-md) var(--gutter-lg);\n margin: 0 0 var(--gutter-md);\n border-radius: var(--radius);\n background: var(--color-surface);\n border-left: var(--border-width-thick) var(--border-style) var(--color-border);\n color: var(--color-text);\n }\n\n .alert.error {\n border-left-color: var(--color-error);\n background: color-mix(in srgb, var(--color-error) var(--alert-tint), var(--color-bg));\n }\n\n .alert.warning {\n border-left-color: var(--color-warning);\n background: color-mix(in srgb, var(--color-warning) 18%, var(--color-bg));\n }\n\n .alert.success {\n border-left-color: var(--color-success);\n background: color-mix(in srgb, var(--color-success) var(--alert-tint), var(--color-bg));\n }\n\n .alert.info {\n border-left-color: var(--color-info);\n background: color-mix(in srgb, var(--color-info) var(--alert-tint), var(--color-bg));\n }\n}\n";Expand description
Unminified Drizzle CSS.