:root {
  --material-blur: 18px;
  --material-edge: color-mix(in srgb, var(--ink) 10%, transparent);
  --material-shadow: 0 16px 42px rgba(18, 28, 42, .11), inset 0 1px 0 rgba(255, 255, 255, .34);
}
html[data-theme=dark] {
  --material-edge: color-mix(in srgb, var(--ink) 13%, transparent);
  --material-shadow: 0 18px 48px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045);
}
body {
  background-image:
    radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 42%),
    radial-gradient(ellipse at 95% 20%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 38%),
    linear-gradient(145deg, var(--paper), color-mix(in srgb, var(--paper) 82%, var(--teal-wash)));
  background-attachment: fixed;
}
.layout .sidebar,
.ac-side,
.ac-files,
.cz-top,
.dbar,
.dchat,
.inspector,
.dpreview,
#petAgentPanel,
.pa-head,
.cz-card,
.pr-tile,
.pr-act,
.keys-dialog,
.plib,
.set-pane,
.set-rail {
  background-color: color-mix(in srgb, var(--card) 82%, transparent);
  border-color: var(--material-edge);
  box-shadow: var(--material-shadow);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(145%);
  backdrop-filter: blur(var(--material-blur)) saturate(145%);
}
.ac-side,
.ac-files { background-color: color-mix(in srgb, var(--paper) 72%, transparent); }
.cz-card,
.pr-tile,
.pr-act { border-radius: 16px; }
.pr-act { transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.pr-act:hover { transform: translateY(-2px); }
.ac-compose,
.ac-log,
.dmsgs,
.pa-body { background-color: color-mix(in srgb, var(--paper) 88%, transparent); }
.ac-task,
.ac-filter,
.ac-model,
.ac-engine,
.cz-input,
.pr-row select {
  background-color: color-mix(in srgb, var(--card) 85%, transparent);
  border-color: var(--material-edge);
}
.sb-link,
.btn,
.cz-tab,
.pr-tile button,
.ac-app button { transition-duration: .16s; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ac-side, .ac-files, .cz-top, .dbar, .dchat, .inspector,
  .dpreview, #petAgentPanel, .pa-head, .cz-card, .pr-tile, .pr-act, .keys-dialog,
  .plib, .set-pane, .set-rail {
    background-color: var(--card);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .ac-side, .ac-files, .cz-top, .dbar, .dchat, .inspector,
  .dpreview, #petAgentPanel, .pa-head, .cz-card, .pr-tile, .pr-act, .keys-dialog,
  .plib, .set-pane, .set-rail {
    background-color: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-act, .btn, .sb-link, .ac-app button { transition-duration: 0s; }
  .pr-act:hover { transform: none; }
}