:root {
  --design-url-favicon-ico: url("/roles/web-app-mini-qr/latest/img/design/favicon.ico");
  --design-url-apple-touch-icon-png: url("/roles/web-app-mini-qr/latest/img/design/apple-touch-icon.png");
  --design-url-apple-touch-icon-svg: url("/roles/web-app-mini-qr/latest/img/design/apple-touch-icon.svg");
  --design-url-banner-png: url("/roles/web-app-mini-qr/latest/img/design/banner.png");
  --design-url-banner-svg: url("/roles/web-app-mini-qr/latest/img/design/banner.svg");
  --design-url-favicon-png: url("/roles/web-app-mini-qr/latest/img/design/favicon.png");
  --design-url-favicon-svg: url("/roles/web-app-mini-qr/latest/img/design/favicon.svg");
  --design-url-header-png: url("/roles/web-app-mini-qr/latest/img/design/header.png");
  --design-url-header-svg: url("/roles/web-app-mini-qr/latest/img/design/header.svg");
  --design-url-icon-png: url("/roles/web-app-mini-qr/latest/img/design/icon.png");
  --design-url-icon-svg: url("/roles/web-app-mini-qr/latest/img/design/icon.svg");
  --design-url-logo-png: url("/roles/web-app-mini-qr/latest/img/design/logo.png");
  --design-url-logo-svg: url("/roles/web-app-mini-qr/latest/img/design/logo.svg");
  --design-url-pwa-192-png: url("/roles/web-app-mini-qr/latest/img/design/pwa-192.png");
  --design-url-pwa-192-svg: url("/roles/web-app-mini-qr/latest/img/design/pwa-192.svg");
  --design-url-pwa-512-png: url("/roles/web-app-mini-qr/latest/img/design/pwa-512.png");
  --design-url-pwa-512-svg: url("/roles/web-app-mini-qr/latest/img/design/pwa-512.svg");
  --design-url-wordmark-png: url("/roles/web-app-mini-qr/latest/img/design/wordmark.png");
  --design-url-wordmark-svg: url("/roles/web-app-mini-qr/latest/img/design/wordmark.svg");
  --design-slot-apple-touch-icon-width: 180px;
  --design-slot-apple-touch-icon-height: 180px;
  --design-slot-banner-width: 960px;
  --design-slot-banner-height: 160px;
  --design-slot-favicon-width: 64px;
  --design-slot-favicon-height: 64px;
  --design-slot-header-width: 320px;
  --design-slot-header-height: 64px;
  --design-slot-icon-width: 512px;
  --design-slot-icon-height: 512px;
  --design-slot-logo-width: 200px;
  --design-slot-logo-height: 48px;
  --design-slot-pwa-192-width: 192px;
  --design-slot-pwa-192-height: 192px;
  --design-slot-pwa-512-width: 512px;
  --design-slot-pwa-512-height: 512px;
  --design-slot-wordmark-width: 320px;
  --design-slot-wordmark-height: 64px;
}
body,
#app > main > .min-h-screen {
  background-color: var(--design-surface-1);
  color: var(--design-text);
}
:where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *)),
:where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::before,
:where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::after {
  border-color: var(--design-border);
}
:root [class~="bg-white"],
:root [class~="bg-zinc-50"],
:root [class~="bg-background"],
:root [class~="bg-popover"] {
  background-color: var(--design-surface-2);
}

:root [class~="bg-zinc-100"],
:root [class~="bg-gray-100"],
:root [class~="bg-gray-50"],
:root [class~="bg-gray-200"] {
  background-color: var(--design-surface-3);
}

:root [class~="bg-zinc-200"],
:root [class~="bg-border"] {
  background-color: var(--design-border);
}

:root [class~="bg-gray-300"],
:root [class~="bg-muted"] {
  background-color: var(--design-border-strong);
}

:root [class~="bg-blue-50"] {
  background-color: var(--design-info-subtle);
}

:root [class~="hover:bg-zinc-100"]:hover,
:root [class~="hover:bg-zinc-200"]:hover,
:root [class~="hover:bg-gray-50"]:hover,
:root [class~="hover:bg-accent"]:hover {
  background-color: var(--design-surface-hover);
}

:root [class~="data-[highlighted]:bg-accent"][data-highlighted] {
  background-color: var(--design-surface-hover);
}

:root [class~="data-[state=open]:bg-accent"][data-state="open"] {
  background-color: var(--design-surface-active);
}

:root [class~="text-zinc-900"],
:root [class~="text-zinc-800"],
:root [class~="text-zinc-700"],
:root [class~="text-gray-800"],
:root [class~="text-gray-700"],
:root [class~="text-foreground"],
:root [class~="text-popover-foreground"] {
  color: var(--design-text);
}

:root [class~="hover:text-zinc-900"]:hover,
:root [class~="hover:text-zinc-700"]:hover,
:root [class~="hover:text-gray-700"]:hover,
:root [class~="hover:text-accent-foreground"]:hover {
  color: var(--design-text);
}

:root [class~="text-zinc-600"],
:root [class~="text-zinc-500"],
:root [class~="text-gray-600"],
:root [class~="text-gray-500"],
:root [class~="text-gray-400"],
:root [class~="text-muted-foreground"] {
  color: var(--design-text-muted);
}

:root [class~="placeholder:text-muted-foreground"]::placeholder {
  color: var(--design-text-muted);
}

:root [class~="data-[state=open]:text-muted-foreground"][data-state="open"] {
  color: var(--design-text-muted);
}

:root [class~="text-red-500"] {
  color: var(--design-danger);
}

:root [class~="text-blue-600"] {
  color: var(--design-link);
}

:root [class~="border-zinc-200"],
:root [class~="border-gray-200"],
:root [class~="border-gray-100"] {
  border-color: var(--design-border);
}

:root [class~="border-zinc-300"],
:root [class~="border-gray-300"],
:root [class~="border-slate-300"],
:root [class~="border-input"] {
  border-color: var(--design-border-strong);
}

:root [class~="hover:border-gray-400"]:hover {
  border-color: var(--design-text-muted);
}

:root [class~="border-zinc-900"],
:root [class~="border-gray-900"] {
  border-color: var(--design-primary);
}

:root [class~="border-t-blue-500"] {
  border-top-color: var(--design-primary);
}

:root [class~="border-red-500"] {
  border-color: var(--design-danger);
}

:root [class~="focus:border-red-500"]:focus {
  border-color: var(--design-danger);
}

:root [class~="border-blue-200"],
:root [class~="border-blue-400"] {
  border-color: var(--design-info-border);
}

:root [class~="focus-visible:ring-zinc-700"]:focus-visible,
:root [class~="focus-visible:ring-ring"]:focus-visible {
  --tw-ring-color: var(--design-focus, var(--design-link));
}

:root [class~="focus:ring-ring"]:focus {
  --tw-ring-color: var(--design-focus, var(--design-link));
}

:root [class~="focus:ring-red-500"]:focus {
  --tw-ring-color: var(--design-danger);
}

:root [class~="ring-offset-background"] {
  --tw-ring-offset-color: var(--design-surface-1);
}

a,
a:visited,
a:active {
  color: var(--design-link);
}
:root p:where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *)),
:root label,
:root legend,
:root .radio > label,
:root .radio > * > label {
  color: var(--design-text);
}
:root :where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::selection {
  background-color: var(--design-surface-active);
  color: var(--design-text);
}
:root :where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::-webkit-scrollbar-track {
  background-color: var(--design-surface-3);
}
:root :where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::-webkit-scrollbar-thumb {
  background-color: var(--design-border-strong);
}
:root :where(:not(#element-to-export, #element-to-export *, #drawer-preview-container .origin-center *))::-webkit-scrollbar-thumb:hover {
  background-color: var(--design-text-muted);
}
:root input::placeholder,
:root textarea::placeholder {
  color: var(--design-text-muted);
}
:root .text-input,
:root .secondary-button {
  background-color: var(--design-surface-2);
  color: var(--design-text);
}
:root .button {
  background-color: var(--design-surface-3);
  color: var(--design-text);
}
:root .button:hover:not(:disabled),
:root .secondary-button:hover:not(:disabled) {
  background-color: var(--design-surface-hover);
}
:root .button:active:not(:disabled),
:root .secondary-button:active:not(:disabled) {
  background-color: var(--design-surface-active);
}
#export-options .button {
  background-color: var(--design-primary);
  color: var(--design-on-primary);
}
#export-options .button:hover:not(:disabled) {
  background-color: var(--design-primary-hover);
}
#export-options .button:active:not(:disabled) {
  background-color: var(--design-primary-active);
}
#app .icon-button {
  background-color: transparent;
  color: var(--design-text);
}
#app .icon-button:hover {
  background-color: var(--design-surface-hover);
}
:root .text-input:focus-visible,
:root .button:focus-visible,
:root .secondary-button:focus-visible,
:root .icon-button:focus-visible,
:root input[type="color"]:focus-visible,
:root input[type="checkbox"]:focus,
:root .radio:focus-within {
  --tw-ring-color: var(--design-focus, var(--design-link));
}
:root fieldset:focus-visible {
  outline-color: var(--design-focus, var(--design-link));
}
:root input[type="color"] {
  border-color: var(--design-border-strong);
  color: var(--design-text);
}
:root input[type="radio"],
:root input[type="checkbox"] {
  background-color: var(--design-surface-2);
  border-color: var(--design-border-strong);
}
:root input[type="checkbox"]:hover {
  border-color: var(--design-text-muted);
}
:root input[type="radio"]::before,
:root input[type="checkbox"]::before {
  background-color: var(--design-primary);
  color: var(--design-primary);
}
#app footer {
  background-color: rgba(var(--design-surface-1-rgb), 0.8);
}
:is(.icon-button, .button, .secondary-button, [role="combobox"], [aria-labelledby="data-to-encode-modal-title"]) svg :is([fill="#abcbca"], [fill="#abcabc"], [fill="#888888"]) {
  fill: currentColor;
}
:is(.icon-button, .button, .secondary-button, [role="combobox"], [aria-labelledby="data-to-encode-modal-title"]) svg[stroke="#abcbca"],
:is(.icon-button, .button, .secondary-button, [role="combobox"], [aria-labelledby="data-to-encode-modal-title"]) svg :is([stroke="#abcbca"], [stroke="#888888"]) {
  stroke: currentColor;
}
.prose {
  --tw-prose-body: var(--design-text);
  --tw-prose-headings: var(--design-text);
  --tw-prose-lead: var(--design-text-muted);
  --tw-prose-links: var(--design-link);
  --tw-prose-bold: var(--design-text);
  --tw-prose-counters: var(--design-text-muted);
  --tw-prose-bullets: var(--design-text-muted);
  --tw-prose-hr: var(--design-border);
  --tw-prose-quotes: var(--design-text);
  --tw-prose-quote-borders: var(--design-border);
  --tw-prose-captions: var(--design-text-muted);
  --tw-prose-code: var(--design-text);
  --tw-prose-pre-code: var(--design-text);
  --tw-prose-pre-bg: var(--design-surface-3);
  --tw-prose-th-borders: var(--design-border-strong);
  --tw-prose-td-borders: var(--design-border);
  --tw-prose-invert-body: var(--design-text);
  --tw-prose-invert-headings: var(--design-text);
  --tw-prose-invert-lead: var(--design-text-muted);
  --tw-prose-invert-links: var(--design-link);
  --tw-prose-invert-bold: var(--design-text);
  --tw-prose-invert-counters: var(--design-text-muted);
  --tw-prose-invert-bullets: var(--design-text-muted);
  --tw-prose-invert-hr: var(--design-border);
  --tw-prose-invert-quotes: var(--design-text);
  --tw-prose-invert-quote-borders: var(--design-border);
  --tw-prose-invert-captions: var(--design-text-muted);
  --tw-prose-invert-code: var(--design-text);
  --tw-prose-invert-pre-code: var(--design-text);
  --tw-prose-invert-pre-bg: var(--design-surface-3);
  --tw-prose-invert-th-borders: var(--design-border-strong);
  --tw-prose-invert-td-borders: var(--design-border);
}
#app .camera-scanner .scanner-container {
  background-color: var(--design-surface-3);
  box-shadow: var(--design-shadow-1);
}
#app .camera-scanner .scanner-container button {
  background-color: var(--design-surface-2);
  color: var(--design-text);
}
#app .camera-scanner .scanner-container button:hover {
  background-color: var(--design-surface-hover);
}
#app .camera-scanner .button {
  background-color: var(--design-surface-3);
  color: var(--design-text);
}
#app .camera-scanner .button:hover:not(:disabled) {
  background-color: var(--design-surface-hover);
}
#app .camera-scanner .button:active:not(:disabled) {
  background-color: var(--design-surface-active);
}
#app #qr-shaded-region {
  border-color: rgba(var(--design-frame-rgb), 0.48) !important;
}
#app #qr-shaded-region > div[style*="rgb(255, 255, 255)"] {
  background-color: var(--design-on-frame) !important;
}
#app #qr-shaded-region > div[style*="rgb(90, 193, 56)"] {
  background-color: var(--design-success) !important;
}
#app h1 {
  width: 200px;
  height: 48px;
  overflow: hidden;
  font-size: 0;
  background: url("/roles/web-app-mini-qr/latest/img/design/logo.svg") left center / contain no-repeat;
}
#app h1.text-xl {
  width: 150px;
  height: 36px;
}