.vault-note-badge{flex:0 0 auto;width:max-content;min-width:0!important;white-space:nowrap!important;word-break:keep-all!important;line-height:1!important}
.vault-note-head{display:block;position:relative}
.vault-note-badge{position:absolute;top:0;right:0}
.vault-note-copy strong{display:block;padding-right:84px}
.vault-note-meta,.vault-note-preview{display:block;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.vault-note-preview{white-space:pre-line}

/* Slightly smaller letters, with each one retaining its own quiet movement. */
.vault-note{width:min(352px,calc(100% - 38px));min-height:108px}
.vault-note-shell{min-height:108px;padding:14px;animation:letter-drift var(--float-duration,10s) ease-in-out var(--float-delay,0s) infinite;will-change:transform}
.vault-note.is-owner .vault-note-shell{animation:owner-echo 4.2s ease-in-out infinite,letter-drift var(--float-duration,10s) ease-in-out var(--float-delay,0s) infinite}
@keyframes letter-drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(var(--float-shift-x,4px),calc(var(--float-shift-y,7px) * -1),0) rotate(var(--float-tilt,1deg))}}

/* On touch screens the page and the letter pile are vertical-scroll only. */
html,body{overflow-x:clip;overscroll-behavior-x:none}
.ask-body{touch-action:pan-y}
.vault-stage,.vault-stack{touch-action:pan-y;overscroll-behavior-x:none}
@media(max-width:700px){.vault-note{width:min(330px,calc(100% - 42px));min-height:104px}.vault-note-shell{min-height:104px;padding:13px}.vault-note strong{font-size:1rem}.vault-note span{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.vault-note-shell,.vault-note.is-owner .vault-note-shell{animation:none!important}}