.ui-root .ui-completion { width: min(100% - 1.5rem, 30rem); border-color: #d4c58f; background: #fffcf1; }
.ui-root .ui-completion__hero { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .75rem; border: 1px solid #e4ddbd; border-radius: 1rem; background: linear-gradient(130deg, #faf3d9, #fffdf5); overflow: hidden; isolation: isolate; }
.ui-root .ui-completion__corner { position: absolute; right: -.5rem; bottom: -.5rem; object-fit: contain; opacity: .6; z-index: -1; pointer-events: none; }
.ui-root .ui-completion__bottle { width: 8rem; height: 8rem; max-width: 100%; object-fit: contain; }
.ui-root .ui-completion__encouragement { flex: 1 1 8rem; color: var(--ui-heading); font-weight: 600; }
.ui-root .ui-completion__facts { margin: 0; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.ui-root .ui-completion__facts dt { color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); margin-top: .5rem; }
.ui-root .ui-completion__facts dd { margin: 0; }
.ui-root .ui-completion__task { font-weight: 600; }
.ui-root .ui-completion__journal { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .375rem .75rem; padding: .75rem; background: #f4f4e7; border: 1px solid var(--ui-border); border-radius: 1rem; }
.ui-root .ui-completion__journal-art { width: 3rem; height: 3rem; object-fit: contain; grid-row: span 2; }
.ui-root .ui-completion__journal .ui-button { grid-column: 1 / -1; }
@media (max-width: 359px) {
  .ui-root .ui-completion { width: calc(100% - 24px); }
  .ui-root .ui-completion .ui-dialog__header, .ui-root .ui-completion .ui-dialog__actions { padding: 16px; }
  .ui-root .ui-completion .ui-dialog__body { padding: 2px 16px 16px; }
  .ui-root .ui-completion__hero, .ui-root .ui-completion__journal { padding: 12px; }
  .ui-root .ui-completion__journal { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ui-root .ui-completion__journal-art { width: 48px; height: 48px; grid-row: auto; }
  .ui-root .ui-completion .ui-button { padding-inline: 12px; }
}
@media (forced-colors: active) {
  .ui-root .ui-completion, .ui-root .ui-completion__hero, .ui-root .ui-completion__journal { background: Canvas; border-color: CanvasText; }
}