:where(:root, :root[data-theme="fantasy"]) {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(27.807% 0.029 256.847);
--color-primary: oklch(37.45% 0.189 325.02);
--color-primary-content: oklch(87.49% 0.037 325.02);
--color-secondary: oklch(53.92% 0.162 241.36);
--color-secondary-content: oklch(90.784% 0.032 241.36);
--color-accent: oklch(75.98% 0.204 56.72);
--color-accent-content: oklch(15.196% 0.04 56.72);
--color-neutral: oklch(27.807% 0.029 256.847);
--color-neutral-content: oklch(85.561% 0.005 256.847);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
@layer lily {
:where(:root) {
--lily-surface: var(--color-base-100);
--lily-surface-alt: var(--color-base-200);
--lily-surface-sunken: var(--color-base-300);
--lily-text: var(--color-base-content);
--lily-text-muted: color-mix(
in oklch,
var(--color-base-content) 70%,
transparent
);
--lily-border: color-mix(
in oklch,
var(--color-base-content) 20%,
transparent
);
--lily-border-strong: color-mix(
in oklch,
var(--color-base-content) 40%,
transparent
);
--lily-focus-ring: var(--color-primary);
--lily-radius-sm: var(--radius-selector);
--lily-radius-md: var(--radius-field);
--lily-radius-lg: var(--radius-box);
--lily-space-xs: 0.25rem;
--lily-space-sm: 0.5rem;
--lily-space-md: 1rem;
--lily-space-lg: 1.5rem;
--lily-space-xl: 2rem;
--lily-font-body:
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif;
--lily-font-mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--lily-shadow-sm: 0 1px 2px
color-mix(in oklch, var(--color-base-content) 8%, transparent);
--lily-shadow-md: 0 4px 12px
color-mix(in oklch, var(--color-base-content) 12%, transparent);
--lily-shadow-lg: 0 12px 32px
color-mix(in oklch, var(--color-base-content) 16%, transparent);
}
:where(
[class$="-input"],
[class$="-button"],
[class$="-link"],
[class$="-list-item"],
[class$="-option"],
[class$="-picker-button"],
.button,
.input,
.select,
.option,
.link,
.menu-item,
.tab-bar-button,
.switch-button,
.toggle-button,
.checkbox-input,
.radio-input,
.file-upload,
.signature-pad,
.editable
):focus-visible {
outline: 2px solid var(--lily-focus-ring);
outline-offset: 2px;
}
:where(
[class$="-input"]:not([class$="-with-mask-input"]):not([type="hidden"]),
.input
) {
appearance: none;
display: inline-block;
width: 100%;
max-width: 100%;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
font: inherit;
font-family: var(--lily-font-body);
color: var(--lily-text);
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border-strong);
border-radius: var(--lily-radius-md);
box-sizing: border-box;
transition:
border-color 120ms ease,
box-shadow 120ms ease;
}
:where([class$="-input"], .input):hover:not(:disabled) {
border-color: var(--color-primary);
}
:where([class$="-input"], .input):disabled,
:where([class$="-input"], .input)[aria-disabled="true"] {
color: var(--lily-text-muted);
background-color: var(--lily-surface-alt);
cursor: not-allowed;
}
:where([class$="-input"], .input)[aria-invalid="true"] {
border-color: var(--color-error);
}
:where([class$="-input"], .input)::placeholder {
color: var(--lily-text-muted);
opacity: 1;
}
:where(.hidden-input) {
display: none;
}
:where(.button-input, .submit-input, .reset-input, .image-input) {
width: auto;
min-width: 2.5rem;
background-color: var(--color-primary);
color: var(--color-primary-content);
border-color: transparent;
cursor: pointer;
font-weight: 600;
}
:where(.reset-input) {
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border-color: var(--lily-border-strong);
}
:where(.color-input) {
min-height: 2.5rem;
padding: 0.25rem;
width: 3rem;
cursor: pointer;
}
:where(.range-input, .angle-slider-range-input) {
appearance: none;
background: transparent;
border: 0;
padding: 0;
height: 1.5rem;
accent-color: var(--color-primary);
}
:where(.file-input, .image-file-input) {
padding: 0.375rem 0.5rem;
cursor: pointer;
}
:where(.checkbox-input, .radio-input) {
width: 1.125rem;
height: 1.125rem;
min-height: 0;
padding: 0;
accent-color: var(--color-primary);
cursor: pointer;
}
:where(.radio-input) {
border-radius: 50%;
}
:where(.checkbox-input) {
border-radius: var(--lily-radius-sm);
}
:where(.text-area-input, .text-area-input-with-character-counter) {
min-height: 6rem;
line-height: 1.5;
resize: vertical;
}
:where(.text-area-input-with-character-counter) {
display: flex;
flex-direction: column;
}
:where(.pin-input-div) {
display: inline-flex;
gap: 0.5rem;
padding: 0;
background: transparent;
border: 0;
width: auto;
min-height: 0;
}
:where(.pin-input-div > input) {
width: 2.5rem;
height: 3rem;
padding: 0;
text-align: center;
font-size: 1.125rem;
font-weight: 600;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border-strong);
border-radius: var(--lily-radius-md);
color: var(--lily-text);
}
:where(.password-input-or-text-input-div) {
display: inline-flex;
align-items: stretch;
width: 100%;
background: transparent;
border: 0;
padding: 0;
min-height: 0;
}
:where(.password-input-or-text-input-div > input) {
flex: 1;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border-strong);
border-right: 0;
border-radius: var(--lily-radius-md) 0 0 var(--lily-radius-md);
}
:where(.password-input-or-text-input-div > button) {
padding: 0 0.75rem;
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border: var(--border) solid var(--lily-border-strong);
border-radius: 0 var(--lily-radius-md) var(--lily-radius-md) 0;
cursor: pointer;
}
:where(.input-group) {
display: inline-flex;
align-items: stretch;
width: 100%;
}
:where(.input-group > *) {
border-radius: 0;
margin-left: calc(-1 * var(--border));
}
:where(.input-group > *:first-child) {
border-top-left-radius: var(--lily-radius-md);
border-bottom-left-radius: var(--lily-radius-md);
margin-left: 0;
}
:where(.input-group > *:last-child) {
border-top-right-radius: var(--lily-radius-md);
border-bottom-right-radius: var(--lily-radius-md);
}
:where(.input-with-mask) {
font-family: var(--lily-font-mono);
letter-spacing: 0.05em;
}
:where(.text-input-with-search, .search-input) {
background-image: linear-gradient(transparent, transparent);
padding-inline-start: 2.25rem;
}
:where(
[class$="-view"]:not(.theme-view):not(.scroll-view):not(
.split-view
):not(.tree-view)
) {
display: inline-block;
padding: 0.125rem 0.5rem;
font-family: var(--lily-font-mono);
color: var(--lily-text);
background-color: var(--lily-surface-alt);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
line-height: 1.4;
}
:where(.date-time-view, .date-range, .review-date) {
font-family: var(--lily-font-body);
}
:where(.theme-view) {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
color: var(--lily-text);
}
:where(.button, [class$="-button"]:not(.hamburger-menu-button)) {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.5rem;
padding: 0.5rem 1rem;
font: inherit;
font-family: var(--lily-font-body);
font-weight: 600;
line-height: 1.2;
color: var(--color-primary-content);
background-color: var(--color-primary);
border: var(--border) solid transparent;
border-radius: var(--lily-radius-md);
cursor: pointer;
user-select: none;
text-decoration: none;
transition:
background-color 120ms ease,
color 120ms ease,
border-color 120ms ease;
}
:where(.button, [class$="-button"]):hover:not(:disabled):not(
[aria-disabled="true"]
) {
background-color: var(--color-secondary);
color: var(--color-secondary-content);
}
:where(.button, [class$="-button"]):disabled,
:where(.button, [class$="-button"])[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
:where(.button, [class$="-button"])[aria-pressed="true"] {
background-color: var(--color-secondary);
color: var(--color-secondary-content);
}
:where(.icon-button) {
padding: 0.5rem;
min-width: 2.5rem;
aspect-ratio: 1;
}
:where(.float-button) {
position: fixed;
inset-block-end: 1rem;
inset-inline-end: 1rem;
box-shadow: var(--lily-shadow-lg);
border-radius: 999px;
width: 3.5rem;
height: 3.5rem;
padding: 0;
}
:where(.split-button) {
padding-inline-end: 0.5rem;
}
:where(.download-button) {
flex-direction: column;
align-items: flex-start;
text-align: start;
}
:where(.clipboard-copy-button) {
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border-color: var(--lily-border-strong);
}
:where(.switch-button) {
position: relative;
width: 2.75rem;
min-width: 2.75rem;
height: 1.5rem;
min-height: 1.5rem;
padding: 0;
background-color: var(--lily-surface-sunken);
border-radius: 999px;
}
:where(
.switch-button[aria-pressed="true"],
.switch-button[aria-checked="true"]
) {
background-color: var(--color-primary);
}
:where(.toggle-button[aria-pressed="false"]) {
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border-color: var(--lily-border-strong);
}
:where(
.back-link,
.skip-link,
.go-to-top,
.go-to-next-section,
.go-to-previous-section
) {
background-color: transparent;
color: var(--color-primary);
border-color: transparent;
text-decoration: underline;
text-underline-offset: 0.2em;
}
:where(.skip-link) {
position: absolute;
top: -3rem;
left: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--color-primary);
color: var(--color-primary-content);
text-decoration: none;
border-radius: var(--lily-radius-md);
z-index: 9999;
}
:where(.skip-link:focus) {
top: 0.5rem;
}
:where(.button-group) {
display: inline-flex;
gap: 0.25rem;
}
:where(.action-bar, .menu-bar, .tab-bar, .task-bar, .tool-bar) {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem;
background-color: var(--lily-surface-alt);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
}
:where(
.action-bar-button,
.menu-bar-button,
.tab-bar-button,
.task-bar-button,
.tool-bar-button
) {
background-color: transparent;
color: var(--lily-text);
border-color: transparent;
}
:where(.tab-bar-button[aria-selected="true"]) {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.tab-panel) {
padding: 1rem;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
}
:where([class$="-link"]:not(.skip-link):not(.back-link)) {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.15em;
}
:where([class$="-link"]):hover {
text-decoration-thickness: 2px;
}
:where([class$="-link"]):visited {
color: var(--color-secondary);
}
:where(
.accordion-list,
.breadcrumb-list,
.chat-list,
.check-list,
.collection-list,
.contents-list,
.description-list,
.document-list,
.do-list,
.dont-list,
.icon-list,
.pagination-list,
.section-list,
.step-list,
.summary-list,
.task-list,
.timeline-list,
.tour-list,
.tree-list,
.validation-list
) {
list-style: none;
margin: 0;
padding: 0;
}
:where(
.accordion-list-item,
.breadcrumb-list-item,
.chat-list-item,
.check-list-item,
.collection-list-item,
.contents-list-item,
.description-list-item,
.document-list-item,
.do-list-item,
.dont-list-item,
.icon-list-item,
.pagination-list-item,
.section-list-item,
.step-list-item,
.summary-list-item,
.task-list-item,
.timeline-list-item,
.tour-list-item,
.tree-list-item,
.validation-list-item
) {
padding: 0.5rem 0;
border-bottom: var(--border) solid var(--lily-border);
}
:where(.breadcrumb-list) {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
:where(.breadcrumb-list-item) {
border: 0;
padding: 0;
display: inline-flex;
align-items: center;
}
:where(.breadcrumb-list-item + .breadcrumb-list-item)::before {
content: "/";
margin-inline-end: 0.5rem;
color: var(--lily-text-muted);
}
:where(.breadcrumb-list-item[aria-current="page"]) {
color: var(--lily-text-muted);
}
:where(.pagination-list) {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
:where(.pagination-list-item) {
border: 0;
padding: 0;
}
:where(.pagination-link) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
padding: 0.5rem 0.75rem;
border-radius: var(--lily-radius-md);
text-decoration: none;
}
:where(.pagination-link[aria-current="page"]) {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.check-list-item)::marker {
content: "✓ ";
color: var(--color-success);
}
:where(.do-list-item)::marker {
content: "✓ ";
color: var(--color-success);
}
:where(.dont-list-item)::marker {
content: "✗ ";
color: var(--color-error);
}
:where(.tree-list .tree-list) {
padding-inline-start: 1.25rem;
}
:where(.tree-list-item) {
border: 0;
}
:where(.step-list) {
counter-reset: lily-step;
}
:where(.step-list-item) {
counter-increment: lily-step;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
:where(.step-list-item)::before {
content: counter(lily-step);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var(--lily-surface-sunken);
color: var(--lily-text);
font-weight: 600;
}
:where(.step-list-item[data-status="finished"])::before {
background-color: var(--color-success);
color: var(--color-success-content);
}
:where(.step-list-item[data-status="in-progress"])::before {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.step-list-item[data-status="error"])::before {
background-color: var(--color-error);
color: var(--color-error-content);
}
:where(.task-list-item) {
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.timeline-list-item) {
position: relative;
padding-inline-start: 1.5rem;
border-left: var(--border) solid var(--lily-border-strong);
margin-inline-start: 0.5rem;
}
:where(.timeline-list-item)::before {
content: "";
position: absolute;
inset-inline-start: -0.4rem;
inset-block-start: 0.65rem;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: var(--color-primary);
}
:where(.validation-list-item[data-status="passed"]) {
color: var(--color-success);
}
:where(.validation-list-item[data-status="failed"]) {
color: var(--color-error);
}
:where(.validation-list-item[data-status="pending"]) {
color: var(--lily-text-muted);
}
:where(.description-list) {
display: grid;
grid-template-columns: minmax(min-content, max-content) 1fr;
column-gap: 1rem;
row-gap: 0.5rem;
}
:where(.description-list-item) {
display: contents;
border: 0;
}
:where(.description-list dt) {
font-weight: 600;
}
:where(.summary-list) {
display: grid;
grid-template-columns: max-content 1fr auto;
column-gap: 1rem;
row-gap: 0.5rem;
}
:where(.summary-list-item) {
display: contents;
border: 0;
}
:where(.icon-list-item, .collection-list-item, .document-list-item) {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
:where(
.accordion-nav,
.breadcrumb-nav,
.chat-nav,
.contents-nav,
.pagination-nav,
.section-nav,
.tree-nav,
.navigation-menu
) {
display: block;
padding: 0;
}
:where(.table, .data-table, .calendar-table, .kanban-table, .gantt-table) {
width: 100%;
border-collapse: collapse;
background-color: var(--lily-surface);
color: var(--lily-text);
font-family: var(--lily-font-body);
}
:where(
.table-head,
.data-table-head,
.calendar-table-head,
.kanban-table-head,
.gantt-table-thead
) {
background-color: var(--lily-surface-alt);
}
:where(
.table-th,
.data-table-th,
.calendar-table-th,
.kanban-table-th,
.gantt-table-th
) {
padding: 0.625rem 0.75rem;
text-align: start;
font-weight: 600;
border-bottom: 2px solid var(--lily-border-strong);
}
:where(
.table-td,
.data-table-td,
.calendar-table-td,
.kanban-table-td,
.gantt-table-td
) {
padding: 0.625rem 0.75rem;
border-bottom: var(--border) solid var(--lily-border);
vertical-align: top;
}
:where(
.table-row,
.data-table-row,
.calendar-table-row,
.kanban-table-row,
.gantt-table-tr
):hover {
background-color: var(--lily-surface-alt);
}
:where(.data-filter-form) {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem;
background-color: var(--lily-surface-alt);
border-radius: var(--lily-radius-md);
}
:where(.calendar-table-td[aria-selected="true"]) {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.calendar-table-td[aria-current="date"]) {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
:where(.kanban-table) {
display: table;
}
:where(.kanban-table-td) {
vertical-align: top;
background-color: var(--lily-surface);
min-width: 14rem;
}
:where(.gantt-table-td[data-state="bar"]) {
background-color: var(--color-primary);
}
:where(
.card,
.feature-card,
.product-card,
.care-card,
.hover-card,
.panel,
.floating-panel,
.success-panel
) {
display: block;
padding: 1rem;
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-lg);
box-shadow: var(--lily-shadow-sm);
}
:where(.feature-card) {
padding: 1.5rem;
}
:where(.hover-card) {
box-shadow: var(--lily-shadow-md);
}
:where(.floating-panel) {
box-shadow: var(--lily-shadow-lg);
}
:where(.success-panel) {
border-color: var(--color-success);
background-color: color-mix(
in oklch,
var(--color-success) 8%,
var(--lily-surface)
);
}
:where(.care-card[data-urgency="urgent"]) {
border-color: var(--color-error);
border-left-width: 0.375rem;
}
:where(.care-card[data-urgency="non-urgent"]) {
border-color: var(--color-info);
border-left-width: 0.375rem;
}
:where(.care-card[data-urgency="primary"]) {
border-color: var(--color-primary);
border-left-width: 0.375rem;
}
:where(
.alert,
.banner,
.announcement-banner,
.phase-banner,
.government-banner,
.medical-banner,
.super-banner,
.information-callout,
.warning-callout,
.summary-box,
.notification,
.toast,
.sonner
) {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
border-inline-start-width: 0.375rem;
border-radius: var(--lily-radius-md);
}
:where(
.alert[data-severity="info"],
.information-callout,
.announcement-banner
) {
border-inline-start-color: var(--color-info);
background-color: color-mix(
in oklch,
var(--color-info) 8%,
var(--lily-surface)
);
}
:where(.alert[data-severity="success"]) {
border-inline-start-color: var(--color-success);
background-color: color-mix(
in oklch,
var(--color-success) 8%,
var(--lily-surface)
);
}
:where(.alert[data-severity="warning"], .warning-callout, .phase-banner) {
border-inline-start-color: var(--color-warning);
background-color: color-mix(
in oklch,
var(--color-warning) 12%,
var(--lily-surface)
);
}
:where(
.alert[data-severity="error"],
.error-message,
.error-summary,
.super-banner
) {
border-inline-start-color: var(--color-error);
background-color: color-mix(
in oklch,
var(--color-error) 8%,
var(--lily-surface)
);
}
:where(.medical-banner) {
border-inline-start-color: var(--color-primary);
}
:where(.medical-banner-box-for-danger) {
border-color: var(--color-error);
background-color: color-mix(
in oklch,
var(--color-error) 8%,
var(--lily-surface)
);
}
:where(.medical-banner-box-for-advice) {
border-color: var(--color-info);
background-color: color-mix(
in oklch,
var(--color-info) 8%,
var(--lily-surface)
);
}
:where(.government-banner) {
background-color: var(--color-neutral);
color: var(--color-neutral-content);
border-color: transparent;
border-inline-start-color: transparent;
}
:where(.summary-box) {
border-color: var(--color-primary);
border-inline-start-width: 0.375rem;
}
:where(.banner-box, .medical-banner-box) {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
:where(.sticky-promo-banner) {
position: sticky;
inset-block-start: 0;
z-index: 10;
}
:where(.error-message) {
color: var(--color-error);
font-weight: 600;
}
:where(.error-summary) {
padding: 1rem;
border: 0.25rem solid var(--color-error);
}
:where(.toast, .sonner) {
box-shadow: var(--lily-shadow-md);
}
:where(.notification) {
box-shadow: var(--lily-shadow-sm);
}
:where(.form, .editable-form) {
display: flex;
flex-direction: column;
gap: 1rem;
}
:where(.field) {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
:where(.fieldset) {
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 1rem;
}
:where(.fieldset > legend) {
padding-inline: 0.5rem;
font-weight: 600;
}
:where(.label) {
font-weight: 600;
color: var(--lily-text);
}
:where(.hint) {
color: var(--lily-text-muted);
font-size: 0.875rem;
}
:where(.character-counter) {
color: var(--lily-text-muted);
font-size: 0.875rem;
text-align: end;
}
:where(
.container,
.container-with-fixed-width,
.container-with-fluid-width
) {
display: block;
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
box-sizing: border-box;
}
:where(.container-with-fixed-width) {
max-width: 72rem;
}
:where(.container-with-fluid-width) {
max-width: none;
}
:where(.padding-reset) {
padding-inline: 0;
}
:where(.flex-stack) {
display: flex;
flex-direction: column;
gap: 1rem;
}
:where(.grid) {
display: grid;
gap: 1rem;
}
:where(.masonry) {
column-count: 3;
column-gap: 1rem;
}
:where(.separator) {
border: 0;
border-top: var(--border) solid var(--lily-border);
margin: 1rem 0;
}
:where(.tile) {
display: block;
padding: 1rem;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
}
:where(.sidebar) {
display: block;
background-color: var(--lily-surface-alt);
padding: 1rem;
border-radius: var(--lily-radius-md);
}
:where(.aspect-ratio-container) {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--lily-radius-md);
}
:where(.framer) {
padding: 1rem;
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
}
:where(.article-layout) {
--content-width-narrower: 20.625rem;
--content-width-narrow: 31.875rem;
--content-width-normal: 41.25rem;
--content-width-wide: 58.125rem;
--content-width-wider: 75rem;
display: block;
}
:where(.content-block) {
max-width: var(--content-width-normal);
margin-inline: auto;
padding-inline: 1rem;
box-sizing: border-box;
}
:where(.content-block[data-width="narrower"]) {
max-width: var(--content-width-narrower);
}
:where(.content-block[data-width="narrow"]) {
max-width: var(--content-width-narrow);
}
:where(.content-block[data-width="wide"]) {
max-width: var(--content-width-wide);
}
:where(.content-block[data-width="wider"]) {
max-width: var(--content-width-wider);
}
:where(.grail-layout) {
display: grid;
min-height: 100vh;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
background-color: var(--lily-surface);
color: var(--lily-text);
}
:where(.grail-layout-top-header) {
grid-area: header;
}
:where(.grail-layout-left-aside) {
grid-area: left;
}
:where(.grail-layout-center-main) {
grid-area: main;
}
:where(.grail-layout-right-aside) {
grid-area: right;
}
:where(.grail-layout-bottom-footer) {
grid-area: footer;
}
:where(.grail-layout-top-header, .grail-layout-bottom-footer) {
background-color: var(--lily-surface-alt);
padding: 1rem;
}
:where(.grail-layout-left-aside, .grail-layout-right-aside) {
padding: 1rem;
background-color: var(--lily-surface-alt);
}
:where(.grail-layout-center-main) {
padding: 1.5rem;
}
@media (max-width: 48rem) {
:where(.grail-layout) {
grid-template-areas: "header" "main" "left" "right" "footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
}
}
:where(.header) {
display: block;
padding: 1rem;
background-color: var(--lily-surface);
border-bottom: var(--border) solid var(--lily-border);
}
:where(.footer) {
display: block;
padding: 1rem;
background-color: var(--lily-surface-alt);
border-top: var(--border) solid var(--lily-border);
}
:where(
.dialog,
.alert-dialog,
.timeout-dialog,
.popconfirm-dialog,
.file-dialog
) {
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-lg);
padding: 1.5rem;
box-shadow: var(--lily-shadow-lg);
max-width: min(40rem, 90vw);
}
:where(
.dialog::backdrop,
.alert-dialog::backdrop,
.timeout-dialog::backdrop,
.popconfirm-dialog::backdrop,
.file-dialog::backdrop
) {
background-color: color-mix(in oklch, black 50%, transparent);
backdrop-filter: blur(2px);
}
:where(.alert-dialog) {
border-color: var(--color-error);
border-inline-start-width: 0.375rem;
}
:where(.popover, .popup, .tooltip, .coachmark, .contextual-help) {
display: block;
padding: 0.5rem 0.75rem;
background-color: var(--color-neutral);
color: var(--color-neutral-content);
border-radius: var(--lily-radius-md);
box-shadow: var(--lily-shadow-md);
font-size: 0.875rem;
max-width: 20rem;
}
:where(.popover, .popup) {
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
max-width: 24rem;
}
:where(.coachmark) {
border: 2px solid var(--color-primary);
}
:where(.overlay-container) {
position: fixed;
inset: 0;
background-color: color-mix(in oklch, black 50%, transparent);
z-index: 100;
}
:where(.drawer, .slide-out-drawer, .sheet) {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
width: min(28rem, 90vw);
background-color: var(--lily-surface);
color: var(--lily-text);
border-inline-start: var(--border) solid var(--lily-border);
box-shadow: var(--lily-shadow-lg);
padding: 1rem;
z-index: 101;
}
:where(.menu, .context-menu, .dropdown-menu, .tree-menu, .command) {
display: block;
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 0.25rem;
box-shadow: var(--lily-shadow-sm);
list-style: none;
margin: 0;
}
:where(.menu-item, .context-menu-item) {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: var(--lily-radius-md);
cursor: pointer;
}
:where(
.menu-item:hover,
.context-menu-item:hover,
.menu-item[aria-selected="true"]
) {
background-color: var(--lily-surface-alt);
}
:where(.menu-group) {
padding: 0.25rem 0;
}
:where(.menu-group::before) {
content: attr(aria-label);
display: block;
padding: 0.25rem 0.75rem;
color: var(--lily-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
:where(.cascader, .navigation-menu) {
display: flex;
gap: 0.25rem;
}
:where(.hamburger-menu) {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: transparent;
border: var(--border) solid var(--lily-border-strong);
border-radius: var(--lily-radius-md);
color: var(--lily-text);
cursor: pointer;
}
:where(
.segment-group,
.toggle-group,
.checkbox-group,
.radio-group,
.dial-group,
.tag-group,
.avatar-group,
.mutually-exclusive
) {
display: inline-flex;
gap: 0.25rem;
flex-wrap: wrap;
}
:where(.segment-group, .toggle-group) {
padding: 0.25rem;
background-color: var(--lily-surface-alt);
border-radius: var(--lily-radius-md);
}
:where(.segment-group-item) {
padding: 0.375rem 0.75rem;
background: transparent;
border: 0;
border-radius: var(--lily-radius-md);
color: var(--lily-text);
cursor: pointer;
}
:where(
.segment-group-item[aria-pressed="true"],
.segment-group-item[aria-selected="true"]
) {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.avatar-group > *) {
margin-inline-start: -0.5rem;
border: 2px solid var(--lily-surface);
}
:where(.progress, .progress-bar, .meter) {
display: block;
width: 100%;
height: 0.5rem;
appearance: none;
background-color: var(--lily-surface-sunken);
border: 0;
border-radius: 999px;
overflow: hidden;
}
:where(.progress::-webkit-progress-bar, .meter::-webkit-meter-bar) {
background-color: var(--lily-surface-sunken);
}
:where(
.progress::-webkit-progress-value,
.meter::-webkit-meter-optimum-value
) {
background-color: var(--color-primary);
}
:where(.progress::-moz-progress-bar) {
background-color: var(--color-primary);
}
:where(.progress-circle) {
display: inline-block;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: conic-gradient(
var(--color-primary) calc(var(--progress, 0) * 1%),
var(--lily-surface-sunken) 0
);
}
:where(.progress-spinner, .loading) {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 3px solid var(--lily-surface-sunken);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: lily-spin 0.8s linear infinite;
}
@keyframes lily-spin {
to {
transform: rotate(360deg);
}
}
:where(.skeleton) {
display: block;
background: linear-gradient(
90deg,
var(--lily-surface-alt) 0%,
var(--lily-surface-sunken) 50%,
var(--lily-surface-alt) 100%
);
background-size: 200% 100%;
animation: lily-skeleton 1.4s ease-in-out infinite;
border-radius: var(--lily-radius-md);
min-height: 1rem;
}
@keyframes lily-skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
:where(.progress-spinner, .loading, .skeleton, .beach-ball) {
animation: none;
}
}
:where(.avatar) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--lily-surface-sunken);
color: var(--lily-text);
overflow: hidden;
font-weight: 600;
}
:where(.avatar-image) {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
:where(.avatar-text) {
text-transform: uppercase;
}
:where(.badge, .flair, .status-tag, .tag, .ai-label) {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.5;
background-color: var(--color-neutral);
color: var(--color-neutral-content);
border-radius: 999px;
}
:where(.tag) {
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
}
:where(.ai-label) {
background-color: var(--color-accent);
color: var(--color-accent-content);
}
:where(.status-tag[data-status="success"]) {
background-color: var(--color-success);
color: var(--color-success-content);
}
:where(.status-tag[data-status="warning"]) {
background-color: var(--color-warning);
color: var(--color-warning-content);
}
:where(.status-tag[data-status="error"]) {
background-color: var(--color-error);
color: var(--color-error-content);
}
:where(.status-tag[data-status="info"]) {
background-color: var(--color-info);
color: var(--color-info-content);
}
:where(.status-light) {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
:where(.status-light)::before {
content: "";
display: inline-block;
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: var(--color-neutral);
}
:where(.status-light[data-status="success"])::before {
background-color: var(--color-success);
}
:where(.status-light[data-status="warning"])::before {
background-color: var(--color-warning);
}
:where(.status-light[data-status="error"])::before {
background-color: var(--color-error);
}
:where(.status-light[data-status="info"])::before {
background-color: var(--color-info);
}
:where(
.color-picker,
.theme-picker,
.five-face-rating-picker,
.five-star-rating-picker,
.net-promoter-score-picker,
.red-amber-green-picker,
.red-orange-yellow-green-blue-picker,
.emoji-character-picker,
.calendar-range-picker
) {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
}
:where(
.color-picker-button,
.theme-picker-button,
.five-face-rating-picker-button,
.five-star-rating-picker-button,
.net-promoter-score-picker-button,
.red-amber-green-picker-button,
.red-orange-yellow-green-blue-picker-button
) {
background-color: var(--lily-surface-alt);
color: var(--lily-text);
border: var(--border) solid var(--lily-border);
min-width: 2rem;
min-height: 2rem;
padding: 0.25rem 0.5rem;
}
:where(.color-picker-button) {
width: 1.75rem;
height: 1.75rem;
padding: 0;
border-radius: 50%;
}
:where(
.five-star-rating-view,
.five-star-rating-picker-button[aria-pressed="true"]
) {
color: var(--color-warning);
}
:where(
.red-amber-green-view[data-status="red"],
.red-amber-green-picker-button[data-status="red"]
) {
background-color: var(--color-error);
color: var(--color-error-content);
}
:where(
.red-amber-green-view[data-status="amber"],
.red-amber-green-picker-button[data-status="amber"]
) {
background-color: var(--color-warning);
color: var(--color-warning-content);
}
:where(
.red-amber-green-view[data-status="green"],
.red-amber-green-picker-button[data-status="green"]
) {
background-color: var(--color-success);
color: var(--color-success-content);
}
:where(.theme-select, .select, .select-with-extras, .tree-select) {
width: 100%;
min-height: 2.5rem;
padding: 0.5rem 2rem 0.5rem 0.75rem;
font: inherit;
background-color: var(--lily-surface);
color: var(--lily-text);
border: var(--border) solid var(--lily-border-strong);
border-radius: var(--lily-radius-md);
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--lily-text) 50%),
linear-gradient(135deg, var(--lily-text) 50%, transparent 50%);
background-position:
calc(100% - 1.1rem) 1.1rem,
calc(100% - 0.7rem) 1.1rem;
background-size: 0.4rem 0.4rem;
background-repeat: no-repeat;
}
:where(.option, .theme-select-option) {
background-color: var(--lily-surface);
color: var(--lily-text);
}
:where(.combobox, .listbox, .autosuggest) {
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border-strong);
border-radius: var(--lily-radius-md);
}
:where(.headline, .hero-headline, .section-heading) {
color: var(--lily-text);
font-family: var(--lily-font-body);
font-weight: 700;
line-height: 1.15;
margin: 0 0 0.5rem 0;
}
:where(.headline) {
font-size: clamp(1.5rem, 3vw, 2.25rem);
}
:where(.hero-headline) {
font-size: clamp(2rem, 5vw, 3.5rem);
}
:where(.section-heading) {
font-size: clamp(1.25rem, 2vw, 1.75rem);
}
:where(.body-text) {
line-height: 1.6;
color: var(--lily-text);
}
:where(.byline) {
color: var(--lily-text-muted);
font-size: 0.875rem;
}
:where(.blockquote) {
margin: 1rem 0;
padding: 0.5rem 1rem;
border-inline-start: 0.25rem solid var(--color-primary);
color: var(--lily-text);
font-style: italic;
}
:where(.end-notes, .related-content) {
margin-top: 2rem;
padding-top: 1rem;
border-top: var(--border) solid var(--lily-border);
}
:where(.caption, .footnote, .citation) {
font-size: 0.875rem;
color: var(--lily-text-muted);
}
:where(.kbd) {
display: inline-block;
padding: 0.125rem 0.4rem;
font-family: var(--lily-font-mono);
font-size: 0.85em;
background-color: var(--lily-surface-alt);
border: var(--border) solid var(--lily-border-strong);
border-bottom-width: 2px;
border-radius: var(--lily-radius-sm);
}
:where(.code) {
font-family: var(--lily-font-mono);
padding: 0.1em 0.3em;
background-color: var(--lily-surface-alt);
border-radius: var(--lily-radius-sm);
font-size: 0.9em;
}
:where(.code-block) {
display: block;
padding: 1rem;
background-color: var(--color-neutral);
color: var(--color-neutral-content);
font-family: var(--lily-font-mono);
border-radius: var(--lily-radius-md);
overflow-x: auto;
white-space: pre;
}
:where(.inset-text) {
padding: 0.75rem 1rem;
border-inline-start: 0.25rem solid var(--color-primary);
background-color: var(--lily-surface-alt);
}
:where(.character) {
font-family: var(--lily-font-mono);
}
:where(.clamp-text) {
display: -webkit-box;
-webkit-line-clamp: var(--lily-clamp-lines, 3);
line-clamp: var(--lily-clamp-lines, 3);
-webkit-box-orient: vertical;
overflow: hidden;
}
:where(.screen-reader-span) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:where(.hero) {
display: block;
padding: clamp(2rem, 5vw, 4rem) 1rem;
background-color: var(--color-primary);
color: var(--color-primary-content);
border-radius: var(--lily-radius-lg);
text-align: center;
}
:where(.figure) {
margin: 1rem 0;
text-align: center;
}
:where(.feature-photo) {
display: block;
width: 100%;
height: auto;
border-radius: var(--lily-radius-md);
}
:where(.photo-pack) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: 0.5rem;
}
:where(.image) {
max-width: 100%;
height: auto;
display: block;
}
:where(.qr-code-image, .barcode-image, .signature-pad) {
display: inline-block;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 0.5rem;
}
:where(.signature-pad) {
min-height: 8rem;
cursor: crosshair;
}
:where(.video-player) {
display: block;
width: 100%;
max-width: 100%;
border-radius: var(--lily-radius-md);
background-color: black;
}
:where(
.mockup-browser,
.mockup-window,
.mockup-shell,
.mockup-phone-portrait,
.mockup-phone-landscape,
.mockup-tablet-portrait,
.mockup-tablet-landscape,
.mockup-laptop,
.mockup-watch
) {
display: block;
background-color: var(--lily-surface);
border: 2px solid var(--color-neutral);
border-radius: var(--lily-radius-lg);
overflow: hidden;
box-shadow: var(--lily-shadow-md);
}
:where(.mockup-shell) {
background-color: var(--color-neutral);
color: var(--color-neutral-content);
font-family: var(--lily-font-mono);
padding: 1rem;
}
:where(.mockup-phone-portrait, .mockup-phone-landscape) {
border-radius: 1.5rem;
border-width: 6px;
}
:where(.mockup-watch) {
border-radius: 1rem;
border-width: 4px;
}
:where(.pictogram) {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
text-align: center;
}
:where(
.area-chart,
.bar-chart,
.column-chart,
.line-chart,
.scatter-chart,
.sparkline,
.tile-map,
.graphic-block
) {
display: block;
background-color: var(--lily-surface);
border-radius: var(--lily-radius-md);
padding: 1rem;
color: var(--lily-text);
--lily-chart-color-1: var(--color-primary);
--lily-chart-color-2: var(--color-secondary);
--lily-chart-color-3: var(--color-accent);
--lily-chart-color-4: var(--color-info);
--lily-chart-color-5: var(--color-success);
--lily-chart-color-6: var(--color-warning);
}
:where(.sparkline) {
padding: 0;
height: 1.5rem;
width: 6rem;
display: inline-block;
}
:where(.graphic-block) {
border: var(--border) solid var(--lily-border);
}
:where(.scroll-area) {
overflow: auto;
max-height: 20rem;
}
:where(.horizontal-scroller) {
overflow-x: auto;
display: flex;
gap: 0.5rem;
}
:where(.scroller, .scroller-base, .scroller-video) {
position: relative;
display: block;
}
:where(.scroll-bar) {
background-color: var(--lily-surface-sunken);
border-radius: 999px;
height: 0.5rem;
}
:where(.affix) {
position: sticky;
inset-block-start: 0;
}
:where(.visible) {
display: block;
}
:where(.resizable) {
resize: both;
overflow: auto;
}
:where(.split-view) {
display: flex;
align-items: stretch;
gap: 0;
}
:where(.splitter) {
flex: 0 0 0.375rem;
background-color: var(--lily-border);
cursor: col-resize;
}
:where(.statistic) {
display: inline-flex;
flex-direction: column;
gap: 0.25rem;
}
:where(.statistic > [data-part="value"]) {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
}
:where(.watermark) {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background: repeating-linear-gradient(
-45deg,
var(--lily-text) 0 1px,
transparent 1px 8rem
);
}
:where(.beach-ball) {
display: inline-block;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: conic-gradient(
var(--color-error),
var(--color-warning),
var(--color-success),
var(--color-info),
var(--color-primary),
var(--color-error)
);
animation: lily-spin 2s linear infinite;
}
:where(.diff) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
:where(.addressograph-box) {
display: block;
padding: 0.75rem 1rem;
background-color: var(--lily-surface-alt);
border: 2px solid var(--lily-text);
font-family: var(--lily-font-mono);
line-height: 1.4;
}
:where(.government-identifier) {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: var(--color-neutral);
color: var(--color-neutral-content);
}
:where(.share-page, .newsletter-signup, .call-to-action) {
padding: 1rem;
background-color: var(--lily-surface-alt);
border-radius: var(--lily-radius-md);
}
:where(.call-to-action) {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
:where(.expander, .collapsible, .details) {
display: block;
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 0.5rem 1rem;
}
:where(.details > summary, .expander > summary, .collapsible > summary) {
cursor: pointer;
font-weight: 600;
padding: 0.25rem 0;
}
:where(.carousel) {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 0.5rem;
}
:where(.carousel > *) {
scroll-snap-align: start;
flex: 0 0 auto;
}
:where(
.person,
.organization,
.place,
.event,
.comment,
.question,
.answer
) {
display: block;
padding: 0.75rem 0;
}
:where(.draft) {
border: 1px dashed var(--lily-border-strong);
background-color: var(--lily-surface-alt);
padding: 1rem;
border-radius: var(--lily-radius-md);
}
:where(.draft[data-status="draft"])::before {
content: "Draft";
display: inline-block;
margin-inline-end: 0.5rem;
padding: 0.125rem 0.5rem;
background-color: var(--color-warning);
color: var(--color-warning-content);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
:where(.dial) {
display: inline-block;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: conic-gradient(
var(--color-primary) calc(var(--dial-value, 0) * 1%),
var(--lily-surface-sunken) 0
);
}
:where(.file-upload) {
display: block;
padding: 1.5rem;
background-color: var(--lily-surface-alt);
border: 2px dashed var(--lily-border-strong);
border-radius: var(--lily-radius-md);
text-align: center;
cursor: pointer;
}
:where(.file-manager) {
display: block;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 0.5rem;
}
:where(.transfer-list) {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.5rem;
align-items: center;
}
:where(.tour) {
display: block;
background-color: var(--lily-surface);
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-lg);
padding: 1rem;
box-shadow: var(--lily-shadow-md);
}
:where(.editable) {
display: inline-block;
padding: 0.125rem 0.25rem;
border-bottom: 1px dashed var(--lily-border-strong);
cursor: text;
}
:where(.editable[aria-expanded="true"]) {
background-color: var(--lily-surface-alt);
border-bottom-color: var(--color-primary);
}
:where(.accordion-checkbox) {
display: block;
border: var(--border) solid var(--lily-border);
border-radius: var(--lily-radius-md);
padding: 0.5rem 0.75rem;
}
:where(.accordion-checkbox-input) {
margin-inline-end: 0.5rem;
}
:where(.accordion-checkbox-panel) {
display: none;
padding-block-start: 0.5rem;
}
:where(.accordion-checkbox-input:checked ~ .accordion-checkbox-panel) {
display: block;
}
:where(.icon) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
flex: 0 0 auto;
}
:where(.emoji) {
display: inline-block;
font-style: normal;
}
:where(.slider) {
display: block;
width: 100%;
height: 1.5rem;
background: linear-gradient(
to right,
var(--color-primary) calc(var(--slider-value, 50) * 1%),
var(--lily-surface-sunken) 0
);
border-radius: 999px;
}
:where(.timer) {
display: inline-block;
font-family: var(--lily-font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
:where(.medical-banner-box-for-advice, .medical-banner-box-for-danger) {
padding: 0.75rem 1rem;
border-radius: var(--lily-radius-md);
margin: 0.25rem 0;
}
@media print {
:where(
.skip-link,
.float-button,
.toast,
.sonner,
.tooltip,
.coachmark
) {
display: none !important;
}
:where(.card, .panel, .dialog, .alert) {
box-shadow: none;
border-color: var(--lily-text);
}
}
}