.pull-memory {
  --pull-distance: 0px;
  position: relative;
  padding: 4px 0 2px;
  isolation: isolate;
}
.pull-memory-preview {
  display: flex;
  justify-content: center;
  max-height: 330px;
  padding: 20px 22px 27px;
  overflow: hidden;
  opacity: 1;
  transition: max-height .4s ease, padding .4s ease, opacity .25s ease;
}
.pull-memory-preview-paper {
  position: relative;
  width: min(76%, 210px);
  padding: 9px 9px 23px;
  background: #fffffc;
  border: 1px solid #e2eadc;
  border-radius: 3px;
  box-shadow: 0 5px 12px #77947b14;
  transform: translateY(var(--pull-distance)) rotate(-3deg);
  transition: transform .2s ease;
}
.pull-memory-preview-paper::before,
.pull-memory-preview-paper::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 1px solid #dce8d5;
  border-radius: 3px;
  background: #fbf7e8;
  transform: translate(7px, 4px) rotate(4deg);
}
.pull-memory-preview-paper::after {
  background: #eff8ed;
  transform: translate(-6px, 7px) rotate(-4deg);
}
.pull-memory-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #f5faf0;
  pointer-events: none;
}
.pull-memory-preview-paper:has(img[hidden]) {
  min-height: 190px;
  background: #f7f9ed;
}
.pull-memory-handle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 226px);
  min-height: 49px;
  margin: 0 auto;
  padding: 12px 20px;
  border: 1px dashed #b8d5c0;
  border-radius: 5px 5px 14px 14px;
  background: #edf7ea;
  color: #627a68;
  box-shadow: 0 3px 0 #ddebdc;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: translateY(var(--pull-distance));
  transition: background .2s ease, transform .2s ease;
}
.pull-memory-handle:hover { background: #e5f2e2; }
.pull-memory-handle:focus-visible { outline: 3px solid #d4bea0; outline-offset: 5px; }
.pull-memory-label { white-space: pre-line; }
.pull-memory-grip {
  flex: 0 0 14px;
  height: 10px;
  background: radial-gradient(circle, #a4bda8 1px, transparent 1.5px) 0 0 / 5px 5px;
  pointer-events: none;
}
.pull-memory-arrow {
  flex: 0 0 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid #90aa95;
  border-bottom: 1.5px solid #90aa95;
  transform: rotate(45deg);
  transition: transform .3s ease;
  pointer-events: none;
}
.pull-memory-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows .45s ease, opacity .25s ease, visibility 0s .45s;
}
.pull-memory-panel-inner { position: relative; min-height: 0; overflow: hidden; }
.pull-memory-panel-inner > .memory-grid { position: relative; z-index: 1; margin: 0; }
.pull-memory-panel-inner::before {
  content: '';
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 50%;
  border-left: 1px dashed #c5d9be;
  pointer-events: none;
}
.pull-memory.is-open .pull-memory-preview { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.pull-memory.is-open .pull-memory-handle { background: #fbf6e7; border-color: #ddceb3; box-shadow: 0 3px 0 #eee3cc; }
.pull-memory.is-open .pull-memory-arrow { transform: rotate(225deg); margin-top: 3px; }
.pull-memory.is-open .pull-memory-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: grid-template-rows .45s ease, opacity .25s ease, visibility 0s;
}
.pull-memory.is-open .pull-memory-panel-inner > .memory-grid { padding-top: 26px; padding-bottom: 12px; }
.pull-memory.is-dragging .pull-memory-handle { cursor: grabbing; }
.pull-memory.is-dragging .pull-memory-handle,
.pull-memory.is-dragging .pull-memory-preview-paper { transition: none; }
@media (max-width: 480px) {
  .pull-memory-preview { padding-left: 12px; padding-right: 12px; }
  .pull-memory-preview-paper { width: min(74%, 190px); }
  .pull-memory-handle { font-size: 14px; min-height: 47px; }
}
@media (prefers-reduced-motion: reduce) {
  .pull-memory-preview,
  .pull-memory-preview-paper,
  .pull-memory-handle,
  .pull-memory-arrow,
  .pull-memory-panel { transition: none; }
}