@property --modal-bg-color{inherits: true; initial-value: undefined; syntax: "<number>+ | undefined";}@property --modal-font-color{inherits: true; initial-value: undefined; syntax: "<number>+ | undefined";}@property --modal-border-color{inherits: true; initial-value: undefined; syntax: "<number>+ | undefined";}@property --modal-shadow-color{inherits: true; initial-value: undefined; syntax: "<number>+ | undefined";}@property --modal-shadow-alpha{inherits: true; initial-value: undefined; syntax: "<number>+ | undefined";}@property --modal-border-width{inherits: true; initial-value: undefined; syntax: "<length> | undefined";}@property --modal-separator-width{inherits: true; initial-value: undefined; syntax: "<length> | undefined";}@layer components{dialog:not([open]){display:none}.modal{--modal-bg-color: var(--bg-color);--modal-font-color: var(--text-color);--modal-border-color: var(--border-color);--modal-shadow-color: var(--shadow-color);--modal-shadow-alpha: var(--shadow-alpha);--selection-text-color: var(--modal-bg-color);--selection-bg-color: var(--modal-font-color);--modal-max-width: 600px;--modal-max-height: 90vh;--modal-padding: var(--space-md);--modal-border-radius: 8px;--modal-border-width: 1px;--modal-separator-width: 1px;display:flex;flex-direction:column;width:90vw;max-width:var(--modal-max-width);max-height:var(--modal-max-height);padding:0;border:var(--modal-border-width) solid rgb(var(--modal-border-color));border-radius:var(--modal-border-radius);color:rgb(var(--modal-font-color));background:rgb(var(--modal-bg-color));box-shadow:0 4px 12px rgb(var(--modal-shadow-color) / var(--modal-shadow-alpha))}.modal:has(.content){overflow:hidden}.modal>.header{position:relative;flex-shrink:0;padding:calc(var(--space-unit) * var(--modal-padding));border-bottom:var(--modal-separator-width) solid rgb(var(--modal-border-color))}.modal>.header>.headline{margin:0;padding-right:calc(var(--space-unit) * var(--space-xl))}.modal>.header>.control.close{position:absolute;top:calc(var(--space-unit) * var(--space-sm));right:calc(var(--space-unit) * var(--space-sm))}.modal>.content{overflow-y:auto;flex:1;min-height:0;padding:calc(var(--space-unit) * var(--modal-padding))}.modal>.footer{display:flex;flex-shrink:0;gap:calc(var(--space-unit) * var(--space-sm));justify-content:flex-end;padding:calc(var(--space-unit) * var(--modal-padding));border-top:var(--modal-separator-width) solid rgb(var(--modal-border-color))}.modal::backdrop{background:rgb(var(--modal-shadow-color, 0 0 0) / var(--modal-shadow-alpha, .5))}@supports not (background: rgb(var(--modal-shadow-color) / var(--modal-shadow-alpha))){.modal::backdrop{background:#0000007f}}.modal:not([open]){display:none!important}.modal.modal-small{--modal-max-width: 400px;--modal-max-height: 60vh}.modal.modal-large{--modal-max-width: 800px;--modal-max-height: 95vh}.modal.modal-fullscreen{--modal-max-width: 100vw;--modal-max-height: 100vh;--modal-border-radius: 0;width:100vw;height:100vh}.modal.modal-simple{padding:calc(var(--space-unit) * var(--modal-padding))}.modal.modal-simple>.content{padding:0}.modal>.header>.control.close:focus{outline:2px solid rgb(var(--modal-border-color));outline-offset:2px}}@supports not selector(::backdrop){.modal[open]{box-shadow:0 0 0 100vmax #00000080}.modal:not([open]){display:none!important;box-shadow:none!important}}@media(prefers-reduced-motion:reduce){.modal{transition:none}.modal::backdrop{transition:none}}@media(prefers-contrast:more){.modal{--modal-font-color: 0 0 0;--modal-bg-color: 255 255 255;--modal-border-color: 0 0 0;--modal-shadow-color: 0 0 0;--modal-shadow-alpha: 1}}.demo-area{margin:1em 0;padding:1em;border:1px solid rgb(var(--border-color));border-radius:4px;background:rgb(var(--bg-color))}pre{font-family:Courier New,monospace;font-size:.9em;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}